:root{
  --bg:#0e0c0a; --bg2:#171310; --card:#1e1813; --card2:#241d16;
  --line:#3a2f24; --line2:#4a3c2c;
  --txt:#f4ece0; --muted:#b7a88f; --faint:#8a7b64;
  --gold:#d8b072; --gold2:#c99a4e; --emerald:#3fae82; --emerald2:#2f8d68;
  --rose:#d98a86; --red:#e2685f; --amber:#e0a94a; --blue:#7fb4d8;
  --ok:#3fae82; --shadow:0 10px 30px rgba(0,0,0,.4);
  --r:16px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-body:14px; --fs-h3:15px; --fs-h2:18px; --fs-h1:22px; --fs-num:30px; --fs-hero:34px;
  --fs-display:clamp(34px,8vw,52px);
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:20px; --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1); --dur-1:120ms; --dur-2:160ms; --dur-3:220ms; --dur-4:320ms;
  --ring:var(--gold); --btn-bg:var(--gold); --on-primary:#1a1206;
  --field-rest:color-mix(in srgb, var(--line) 65%, transparent);
  --z-nav:40; --z-tabbar:140; --z-toast:150; --z-sheet:190; --z-menu:195; --z-modal:200; --z-boot:300;
  --hit:44px; --row-h:48px; --control-h:36px;
  --backdrop:rgba(0,0,0,.5);
  --red-bg:color-mix(in srgb, var(--red) 12%, transparent);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

.empty{color:var(--faint);font-size:13px;padding:14px 4px;text-align:center}
.foot{color:var(--faint);font-size:12px;text-align:center;margin-top:30px}
[hidden]{display:none !important}

/* Sync state dot in the app bar (replaces the old fixed savebar) */
.sync-dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--emerald);display:inline-block;flex:none}
.sync-dot.err{background:var(--red)}

:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
:focus:not(:focus-visible){outline:none}

.field{background:color-mix(in srgb,var(--card2) 35%,transparent);border:1px solid var(--field-rest);border-radius:var(--r-1);color:var(--txt);font:inherit;padding:7px 9px;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.field:hover{border-color:var(--line2);background:var(--card2)}
.field:focus{outline:none;border-color:var(--gold);background:var(--card2)}
.field::placeholder{color:var(--faint)}

/* Edit-in-place: invisible at rest, reveals on hover, lights up on focus.
   Turns list screens from walls of boxes into calm lists that stay tap-to-edit. */
.inline-edit{background:transparent;border:1px solid transparent;border-radius:var(--r-1);color:var(--txt);font:inherit;padding:6px 8px;
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.inline-edit:hover{border-color:var(--line2)}
.inline-edit:focus{outline:none;border-color:var(--gold);background:var(--card2)}
.inline-edit::placeholder{color:var(--faint)}

/* Card header: title + hint left, actions right. Add lives HERE, never under a list. */
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-head .ch-text{flex:1;min-width:0}
.card-head .ch-actions{display:flex;gap:8px;align-items:center;flex:none;padding-top:2px}

/* List row meta cluster: tags + attribution live right of the content, never beneath it. */
.lmeta{display:flex;align-items:center;gap:8px;flex:none;max-width:220px;overflow:hidden;white-space:nowrap}

/* Drag-to-reorder grip (see drag-sort.js). Faint at rest, grabbable, and
   touch-action:none so a touch drag reorders instead of scrolling the page. */
.drag-handle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:30px;padding:0;
  border:none;background:none;color:var(--line2);cursor:grab;touch-action:none;border-radius:6px;
  transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.drag-handle svg{fill:currentColor}
.drag-handle:hover{color:var(--muted);background:var(--card2)}
.drag-handle:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.drag-spacer{flex:0 0 auto;width:22px}
.sortable{touch-action:pan-y}
.sortable.dragging{opacity:.96;background:var(--card2);box-shadow:0 8px 24px rgba(0,0,0,.22);border-radius:10px;position:relative;z-index:3}
body.drag-active{cursor:grabbing;user-select:none;-webkit-user-select:none}
body.drag-active .drag-handle{cursor:grabbing}

.boot{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);
  background:var(--bg);transition:opacity var(--dur-4) var(--ease)}
.boot.boot-hide{opacity:0;pointer-events:none}
.boot-name{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:var(--fs-display);color:var(--txt);letter-spacing:.01em}
.boot-name .amp{color:var(--gold);font-style:italic;padding:0 .1em}
.boot-track{width:120px;height:2px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--gold) 22%,transparent);overflow:hidden;position:relative}
.boot-track>span{position:absolute;top:0;left:0;height:100%;width:40%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:boot-sweep 1.1s var(--ease) infinite}
@keyframes boot-sweep{from{transform:translateX(-100%)}to{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){
  .boot{transition:none}
  .boot-track>span{animation:none;transform:none;width:100%;background:var(--gold);opacity:.55}
}