/* ===========================================================================
   TickClone — design system
   Tokens are declared once on :root, then redefined for the two dark states
   (OS preference without an explicit light choice, and an explicit toggle).
   Components only ever reference tokens.
   =========================================================================== */

:root{
  /* surfaces */
  --ground:#F4F5F8;
  --rail:#EAECF2;
  --side:#EFF1F6;
  --surface:#FFFFFF;
  --surface-2:#E9ECF3;
  --hover:#E4E8F1;

  /* ink */
  --ink:#13161D;
  --ink-2:#454C5C;
  --muted:#737A8B;
  --faint:#9AA1B1;

  /* structure */
  --line:#DCE0EA;
  --line-2:#C7CDDB;

  /* accent + semantics */
  --accent:#3550C8;
  --accent-ink:#FFFFFF;
  --accent-soft:#E3E8FB;
  --p1:#D93B32;   /* high   */
  --p3:#E08A05;   /* medium */
  --p5:#3F6BE8;   /* low    */
  --p0:#A2A9B8;   /* none   */
  --ok:#2E7D5B;
  --warn:#B4740A;

  --shadow-sm:0 1px 2px rgba(19,22,29,.06);
  --shadow:0 2px 4px rgba(19,22,29,.06), 0 12px 28px -18px rgba(19,22,29,.35);
  --shadow-lg:0 8px 16px rgba(19,22,29,.10), 0 32px 64px -32px rgba(19,22,29,.45);

  --r-sm:6px; --r:9px; --r-lg:14px;
  --rail-w:52px; --side-w:248px; --detail-w:400px;
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1015; --rail:#0A0C10; --side:#12151C; --surface:#171B23;
    --surface-2:#1E232D; --hover:#232935;
    --ink:#E8EAF0; --ink-2:#C2C8D5; --muted:#8B93A4; --faint:#697080;
    --line:#252B36; --line-2:#38404F;
    --accent:#7D95FF; --accent-ink:#0C0F16; --accent-soft:#1C2440;
    --p1:#F0685F; --p3:#F2AE3C; --p5:#7C9BFF; --p0:#6E7686;
    --ok:#5FC195; --warn:#E7B75A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 2px 6px rgba(0,0,0,.45), 0 14px 32px -20px rgba(0,0,0,.9);
    --shadow-lg:0 10px 20px rgba(0,0,0,.5), 0 40px 70px -34px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1015; --rail:#0A0C10; --side:#12151C; --surface:#171B23;
  --surface-2:#1E232D; --hover:#232935;
  --ink:#E8EAF0; --ink-2:#C2C8D5; --muted:#8B93A4; --faint:#697080;
  --line:#252B36; --line-2:#38404F;
  --accent:#7D95FF; --accent-ink:#0C0F16; --accent-soft:#1C2440;
  --p1:#F0685F; --p3:#F2AE3C; --p5:#7C9BFF; --p0:#6E7686;
  --ok:#5FC195; --warn:#E7B75A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 2px 6px rgba(0,0,0,.45), 0 14px 32px -20px rgba(0,0,0,.9);
  --shadow-lg:0 10px 20px rgba(0,0,0,.5), 0 40px 70px -34px rgba(0,0,0,1);
}

/* --------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button,input,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;padding:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-track{background:transparent;}
.mono{font-family:var(--mono);}
[hidden]{display:none !important;}

/* -------------------------------------------------------------------- shell */
.app{
  display:grid; height:100vh;
  grid-template-columns:var(--rail-w) var(--side-w) minmax(0,1fr) 0;
  transition:grid-template-columns .16s ease;
}
.app.has-detail{grid-template-columns:var(--rail-w) var(--side-w) minmax(0,1fr) var(--detail-w);}
.app.no-side{grid-template-columns:var(--rail-w) 0 minmax(0,1fr) 0;}
.app.no-side.has-detail{grid-template-columns:var(--rail-w) 0 minmax(0,1fr) var(--detail-w);}

/* ---------------------------------------------------------------- rail (1) */
.rail{
  position:relative; z-index:62;    /* above the slide-in sidebar on narrow screens */
  background:var(--rail); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center;
  padding:10px 0 8px; gap:4px;
}
.avatar{
  width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:13px;display:grid;place-items:center;margin-bottom:8px;
}
.rail-modules{display:flex;flex-direction:column;gap:2px;flex:1;}
.rail-btn{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  color:var(--muted);position:relative;
}
.rail-btn:hover{background:var(--hover);color:var(--ink);}
.rail-btn.on{background:var(--accent-soft);color:var(--accent);}
.rail-btn svg{width:19px;height:19px;stroke-width:1.7;}
.rail-foot{display:flex;flex-direction:column;gap:2px;}
.tip{
  position:fixed;z-index:90;background:var(--ink);color:var(--ground);
  padding:4px 8px;border-radius:6px;font-size:12px;white-space:nowrap;
  pointer-events:none;box-shadow:var(--shadow);
}

/* ------------------------------------------------------------- sidebar (2) */
.sidebar{background:var(--side);border-right:1px solid var(--line);overflow:hidden;}
.side-scroll{height:100%;overflow-y:auto;padding:10px 8px 24px;}
.side-group{margin-top:14px;}
.side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 8px 4px;color:var(--faint);
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;
}
.side-head button{color:var(--faint);width:18px;height:18px;display:grid;place-items:center;border-radius:4px;}
.side-head button:hover{background:var(--hover);color:var(--ink);}
.side-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:6px 8px;border-radius:var(--r-sm);color:var(--ink-2);
  font-size:13.5px;text-align:left;position:relative;
}
.side-item:hover{background:var(--hover);color:var(--ink);}
.side-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600;}
.side-item .ic{width:16px;height:16px;flex:0 0 16px;display:grid;place-items:center;font-size:13px;}
.side-item .ic svg{width:15px;height:15px;stroke-width:1.7;}
.side-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.side-item .ct{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;}
.side-item.on .ct{color:var(--accent);}
.side-item .more{opacity:0;width:18px;height:18px;border-radius:4px;color:var(--muted);display:grid;place-items:center;}
.side-item:hover .more{opacity:1;}
.side-item .more:hover{background:var(--surface);}
.dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px;}
.folder-row{cursor:pointer;}
.folder-kids{margin-left:10px;border-left:1px solid var(--line);padding-left:4px;}
.side-empty{padding:6px 10px;font-size:12.5px;color:var(--faint);line-height:1.45;}
.side-sep{height:1px;background:var(--line);margin:12px 8px;}

/* ---------------------------------------------------------------- main (3) */
.main{display:flex;flex-direction:column;min-width:0;background:var(--ground);}
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-bottom:1px solid transparent;min-height:56px;
}
.topbar h1{font-size:19px;font-weight:600;margin:0;display:flex;align-items:center;gap:9px;letter-spacing:-.01em;}
.topbar .spacer{flex:1;}
.icon-btn{
  width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--muted);
}
.icon-btn:hover{background:var(--hover);color:var(--ink);}
.icon-btn.on{background:var(--accent-soft);color:var(--accent);}
.icon-btn svg{width:17px;height:17px;stroke-width:1.8;}
.content{flex:1;overflow:auto;padding:0 18px 80px;}
.pane{max-width:820px;}

/* ------------------------------------------------------------- quick add  */
.qa{
  position:relative;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 10px;margin:2px 0 14px;box-shadow:var(--shadow-sm);
}
.qa:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.qa .plus{color:var(--faint);display:grid;place-items:center;}
.qa .plus svg{width:16px;height:16px;stroke-width:1.9;}
.qa-field{position:relative;flex:1;min-width:0;}
.qa-mirror{
  position:absolute;inset:0;pointer-events:none;white-space:pre-wrap;
  font-size:14px;line-height:20px;color:transparent;overflow:hidden;
}
.qa-mirror mark{background:var(--accent-soft);color:transparent;border-radius:3px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);}
.qa-mirror mark.tag{background:color-mix(in srgb,var(--ok) 22%,transparent);}
.qa input{
  position:relative;width:100%;border:0;background:transparent;outline:0;
  font-size:14px;line-height:20px;padding:0;
}
.qa input::placeholder{color:var(--faint);}
.qa-chip{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--accent);
  background:var(--accent-soft);padding:2px 8px;border-radius:20px;white-space:nowrap;
}
.qa-chip.tagchip{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent);}
.qa-chip svg{width:12px;height:12px;stroke-width:2;flex:0 0 12px;}
.t-meta .tagpill{line-height:1.5;}
.qa-hint{
  position:absolute;right:10px;top:100%;margin-top:3px;font-size:11px;color:var(--faint);
}

/* ------------------------------------------------------------- task rows  */
.section-head{
  display:flex;align-items:center;gap:7px;margin:16px 0 2px;
  color:var(--ink-2);font-size:13px;font-weight:600;
}
.section-head .caret{color:var(--faint);display:grid;place-items:center;transition:transform .12s;}
.section-head .caret svg{width:14px;height:14px;stroke-width:2;}
.section-head .icon-btn{width:22px;height:22px;}
.section-head .icon-btn svg{width:13px;height:13px;}
.section-head.closed .caret{transform:rotate(-90deg);}
.section-head .n{color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums;}
.section-head .addsec{opacity:0;color:var(--faint);}
.section-head:hover .addsec{opacity:1;}

.task{
  display:flex;align-items:flex-start;gap:10px;padding:9px 10px 9px 6px;
  border-bottom:1px solid var(--line);position:relative;cursor:default;
}
.task:hover{background:var(--surface);}
.task.sel{background:var(--surface);box-shadow:inset 2px 0 0 var(--accent);}
.task.done .t-title,.task.wont .t-title{color:var(--faint);}
.task.done .t-title{text-decoration:line-through;}
.task.wont .t-title{text-decoration:line-through;text-decoration-style:wavy;}
.task.sub{padding-left:34px;}

.check{
  width:17px;height:17px;flex:0 0 17px;margin-top:2px;border-radius:5px;
  border:1.6px solid var(--p0);display:grid;place-items:center;cursor:pointer;
  transition:background .12s,border-color .12s;
}
.check svg{width:11px;height:11px;stroke-width:2.6;color:#fff;opacity:0;}
.check:hover{border-color:var(--accent);}
.check[data-p="1"]{border-color:var(--p5);}
.check[data-p="3"]{border-color:var(--p3);}
.check[data-p="5"]{border-color:var(--p1);}
.check.on{background:var(--p0);border-color:var(--p0);}
.check.on svg{opacity:1;}
.check.on[data-p="1"]{background:var(--p5);border-color:var(--p5);}
.check.on[data-p="3"]{background:var(--p3);border-color:var(--p3);}
.check.on[data-p="5"]{background:var(--p1);border-color:var(--p1);}
.check.wont{border-style:dashed;}

.t-body{flex:1;min-width:0;}
.t-title{font-size:14px;line-height:1.42;word-break:break-word;}
.t-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;margin-top:3px;font-size:11.5px;color:var(--muted);}
.t-meta .due.today{color:var(--accent);font-weight:600;}
.t-meta .due.over{color:var(--p1);font-weight:600;}
.t-meta .bit{display:inline-flex;align-items:center;gap:4px;}
.t-meta svg{width:12px;height:12px;stroke-width:1.9;}
.tagpill{
  font-size:11px;padding:1px 7px;border-radius:20px;white-space:nowrap;
  background:var(--surface-2);color:var(--ink-2);
}
.t-right{display:flex;align-items:center;gap:6px;opacity:0;color:var(--muted);}
.task:hover .t-right{opacity:1;}
.t-right .icon-btn{width:24px;height:24px;}
.t-right .icon-btn svg{width:14px;height:14px;}
.flagmark{width:3px;align-self:stretch;border-radius:2px;}

.empty{
  display:grid;place-items:center;gap:6px;padding:80px 20px;text-align:center;color:var(--faint);
}
.empty > svg{width:28px;height:28px;stroke-width:1.5;opacity:.6;}
.empty strong{color:var(--ink-2);font-size:15px;font-weight:600;}
.empty p{margin:0;font-size:13px;max-width:36ch;}

/* ----------------------------------------------------------------- kanban */
.kanban{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:20px;min-height:70vh;}
.kcol{
  flex:0 0 282px;background:var(--side);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:10px;display:flex;flex-direction:column;gap:8px;
}
.kcol.drop{border-color:var(--accent);background:var(--accent-soft);}
.kcol-head{display:flex;align-items:center;gap:7px;padding:2px 4px;font-size:13px;font-weight:600;}
.kcol-head .n{color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums;}
.kcol-head .spacer{flex:1;}
.kcol-head .icon-btn{width:22px;height:22px;}
.kcol-head .icon-btn svg{width:14px;height:14px;}
.kcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 10px;display:flex;gap:8px;cursor:grab;box-shadow:var(--shadow-sm);
}
.kcard:hover{border-color:var(--line-2);}
.kcard.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.kcard.dragging{opacity:.4;}
.kcard .t-title{font-size:13.5px;}
.kadd{
  display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--r-sm);
  color:var(--faint);font-size:13px;width:100%;
}
.kadd svg{width:15px;height:15px;stroke-width:1.9;flex:0 0 15px;}
.kadd:hover{background:var(--hover);color:var(--ink-2);}
.knew{flex:0 0 182px;}

/* ----------------------------------------------------------------- matrix */
.matrix{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:calc(100vh - 90px);}
@media (max-width:900px){.matrix{grid-template-columns:1fr;height:auto;}}
.quad{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;overflow:hidden;
}
.quad.drop{border-color:var(--accent);}
.quad-head{
  display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
}
.quad-head .n{margin-left:auto;color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums;}
.quad-body{overflow:auto;padding:4px 10px 14px;flex:1;}
.quad-body .task{border-bottom:1px solid var(--line);}
.quad-body .task:last-child{border-bottom:0;}
.q-stripe{width:10px;height:10px;border-radius:3px;}

/* --------------------------------------------------------------- calendar */
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.seg{display:inline-flex;background:var(--surface-2);border-radius:8px;padding:2px;gap:2px;}
.seg button{padding:4px 11px;border-radius:6px;font-size:12.5px;color:var(--muted);font-weight:500;}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
}
.cal-dow{
  padding:7px 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);background:var(--surface-2);border-bottom:1px solid var(--line);text-align:center;
}
.cal-cell{
  min-height:112px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:5px 6px;display:flex;flex-direction:column;gap:3px;
}
.cal-cell:nth-child(7n+7){border-right:0;}
.cal-cell.out{background:var(--ground);}
.cal-cell .dn{
  font-size:11.5px;color:var(--muted);align-self:flex-start;font-variant-numeric:tabular-nums;
  width:20px;height:20px;display:grid;place-items:center;border-radius:6px;
}
.cal-cell.today .dn{background:var(--accent);color:var(--accent-ink);font-weight:700;}
.ev{
  font-size:11.5px;padding:2px 6px;border-radius:5px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-left:3px solid var(--accent);background:var(--surface-2);
}
.ev.done{opacity:.5;text-decoration:line-through;}
.ev .tm{font-variant-numeric:tabular-nums;opacity:.75;margin-right:4px;}

.cal-week{display:grid;grid-template-columns:56px repeat(var(--cols,7),minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);}
.cal-week .hcell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);height:46px;position:relative;}
.cal-week .hour{
  border-bottom:1px solid var(--line);font-size:10.5px;color:var(--faint);
  text-align:right;padding:2px 6px 0 0;height:46px;font-variant-numeric:tabular-nums;
}
.cal-week .colhead{
  padding:7px 4px;text-align:center;font-size:11.5px;color:var(--muted);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-2);
}
.cal-week .colhead b{display:block;font-size:15px;color:var(--ink);}
.cal-week .colhead.today b{color:var(--accent);}
.wev{
  position:absolute;left:3px;right:3px;border-radius:5px;padding:2px 5px;font-size:11px;
  overflow:hidden;cursor:pointer;border-left:3px solid var(--accent);background:var(--surface-2);
}
.agenda-day{margin:14px 0 4px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  display:flex;gap:8px;align-items:baseline;}
.agenda-day span{color:var(--faint);font-weight:400;}

/* -------------------------------------------------------------- countdown */
.cd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px;}
.cd-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;text-align:center;position:relative;box-shadow:var(--shadow-sm);
}
.cd-card .nm{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13.5px;font-weight:600;}
.cd-card .big{font-size:44px;font-weight:700;line-height:1.1;margin:8px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.cd-card .sub{font-size:11.5px;color:var(--faint);}
.cd-card .x{position:absolute;top:8px;right:8px;opacity:0;color:var(--muted);width:24px;height:24px;border-radius:6px;display:grid;place-items:center;}
.cd-card:hover .x{opacity:1;}
.cd-card .x:hover{background:var(--hover);}

/* ---------------------------------------------------------------- detail  */
.detail{
  background:var(--surface);border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;min-width:0;
}
.d-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);}
.d-scroll{flex:1;overflow-y:auto;padding:16px 18px 30px;}
.d-title{overflow:hidden;
  font-size:19px;font-weight:600;line-height:1.32;border:0;background:transparent;
  width:100%;resize:none;outline:0;padding:0;letter-spacing:-.01em;
}
.d-content{
  width:100%;min-height:110px;border:0;background:transparent;outline:0;resize:vertical;
  font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:10px;padding:0;
}
.d-content::placeholder,.d-title::placeholder{color:var(--faint);}
.d-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--line);font-size:13px;}
.d-row .lb{color:var(--muted);width:78px;flex:0 0 78px;display:flex;align-items:center;gap:6px;}
.d-row .lb svg{width:14px;height:14px;stroke-width:1.8;}
.d-row .vl{flex:1;min-width:0;}
.d-sub{display:flex;align-items:center;gap:8px;padding:6px 0;}
.d-sub input{flex:1;border:0;background:transparent;outline:0;font-size:13.5px;}
.d-sub.done input{color:var(--faint);text-decoration:line-through;}
.d-foot{
  display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);
}
.d-foot .spacer{flex:1;}
.acts{font-size:12px;color:var(--muted);}
.acts li{margin:3px 0;}

/* ---------------------------------------------------------- generic bits  */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--surface);font-size:13px;font-weight:500;color:var(--ink);
}
.btn:hover{background:var(--hover);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.btn.primary:hover{filter:brightness(1.07);}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted);}
.btn.ghost:hover{background:var(--hover);color:var(--ink);}
.btn.danger{color:var(--p1);}
.btn.block{width:100%;padding:9px;}
.btn svg{width:15px;height:15px;stroke-width:1.9;}
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;
  font-size:11.5px;background:var(--surface-2);color:var(--ink-2);
}
kbd{
  font-family:var(--mono);font-size:11px;padding:1px 5px;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--line-2);border-bottom-width:2px;
}

/* ------------------------------------------------------------- menus/pop  */
.menu-layer{position:fixed;inset:0;z-index:70;}
.menu{
  position:fixed;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:5px;min-width:184px;z-index:71;
  max-height:min(70vh,520px);overflow:auto;
}
.menu button,.menu .mi{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;
  border-radius:var(--r-sm);font-size:13px;text-align:left;color:var(--ink-2);
}
.menu button:hover{background:var(--hover);color:var(--ink);}
.menu button.danger{color:var(--p1);}
.menu button.on{color:var(--accent);font-weight:600;}
.menu svg{width:15px;height:15px;stroke-width:1.8;flex:0 0 15px;}
.menu-sep{height:1px;background:var(--line);margin:4px 2px;}
.menu-label{padding:6px 9px 3px;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--faint);}
.menu-row{display:flex;gap:4px;padding:2px 6px 6px;}
.menu-row button{width:34px;height:30px;justify-content:center;padding:0;}
.menu input[type="text"],.menu input[type="date"],.menu input[type="time"],.menu input[type="search"]{
  width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);outline:0;font-size:13px;
}
.menu input:focus{border-color:var(--accent);}

/* ------------------------------------------------------------- overlays   */
.overlay{
  position:fixed;inset:0;z-index:80;background:color-mix(in srgb,#000 42%,transparent);
  display:grid;place-items:start center;padding:12vh 16px 16px;backdrop-filter:blur(2px);
}
.sheet{
  width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;
}
.sheet.wide{max-width:760px;}
.sheet-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);}
.sheet-head input{flex:1;border:0;background:transparent;outline:0;font-size:15px;}
.sheet-body{max-height:56vh;overflow:auto;padding:6px;}
.sheet-foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;}
.res{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-sm);width:100%;text-align:left;font-size:13.5px;}
.res:hover,.res.cursor{background:var(--hover);}
.res .rt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.res .rr{font-size:11.5px;color:var(--faint);}
.res > svg{width:15px;height:15px;stroke-width:1.8;flex:0 0 15px;color:var(--muted);}
.sheet-head > svg{width:17px;height:17px;stroke-width:1.9;color:var(--muted);flex:0 0 17px;}
.scopes{display:flex;gap:6px;padding:0 14px 10px;}
.scopes button{padding:3px 10px;border-radius:20px;font-size:12px;background:var(--surface-2);color:var(--muted);}
.scopes button.on{background:var(--accent-soft);color:var(--accent);font-weight:600;}
.form-grid{display:grid;grid-template-columns:96px 1fr;gap:10px 12px;align-items:center;padding:16px;}
.form-grid label{font-size:13px;color:var(--muted);}
.form-grid input,.form-grid select{
  padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--ground);outline:0;font-size:13.5px;width:100%;
}
.form-grid input:focus,.form-grid select:focus{border-color:var(--accent);}
.swatches{display:flex;gap:6px;flex-wrap:wrap;}
.swatch{width:22px;height:22px;border-radius:7px;border:2px solid transparent;}
.swatch.on{border-color:var(--ink);}

/* --------------------------------------------------------------- shortcuts */
.keys{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:14px 18px 18px;}
@media (max-width:640px){.keys{grid-template-columns:1fr;}}
.keys h4{grid-column:1/-1;margin:14px 0 4px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--faint);font-weight:600;}
.keys h4:first-child{margin-top:0;}
.keyrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:5px 0;font-size:13px;border-bottom:1px solid var(--line);}

/* ------------------------------------------------------------------ toast */
.toast-stack{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:95;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{
  background:var(--ink);color:var(--ground);padding:8px 14px;border-radius:22px;
  font-size:13px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;
  pointer-events:auto;
}
.toast button{color:var(--ground);text-decoration:underline;font-size:13px;opacity:.85;}
.toast button:hover{opacity:1;}

/* ------------------------------------------------------------------- auth */
.auth{position:fixed;inset:0;display:grid;place-items:center;background:var(--ground);padding:20px;z-index:100;}
.auth-card{width:100%;max-width:352px;}
.d-foot .icon-btn{width:26px;height:26px;}
.d-foot .icon-btn svg{width:15px;height:15px;}
.d-top .btn svg{width:14px;height:14px;}
.topbar h1 > svg{flex:0 0 18px;}
.auth-brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;margin-bottom:26px;letter-spacing:-.01em;}
.auth h1{font-size:25px;margin:0 0 4px;letter-spacing:-.02em;}
.auth-sub{margin:0 0 22px;color:var(--muted);font-size:13.5px;}
.auth label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px;}
.auth input{
  width:100%;padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);outline:0;font-size:14px;
}
.auth input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.auth button[type="submit"]{margin-top:20px;}
.auth-error{color:var(--p1);font-size:13px;margin:12px 0 0;}
.auth-switch{margin:16px 0 0;font-size:13px;color:var(--muted);text-align:center;}
.linkish{color:var(--accent);font-weight:600;font-size:13px;}
.linkish:hover{text-decoration:underline;}

/* --------------------------------------------------------------- narrow   */
@media (max-width:1080px){
  :root{--detail-w:340px;}
}
@media (max-width:820px){
  .app,.app.has-detail{grid-template-columns:var(--rail-w) minmax(0,1fr);}
  .sidebar{position:fixed;left:var(--rail-w);top:0;bottom:0;width:var(--side-w);z-index:60;
    box-shadow:var(--shadow-lg);transform:translateX(-110%);transition:transform .18s ease,visibility .18s;
    visibility:hidden;}
  .app.side-open .sidebar{transform:none;visibility:visible;}
  .app.side-open .main::before{
    content:"";position:fixed;inset:0 0 0 var(--rail-w);z-index:59;
    background:color-mix(in srgb,#000 35%,transparent);
  }
  .detail{position:fixed;inset:0;z-index:65;border-left:0;}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}