:root{
  --bg:#0B0F14;
  --surface:#141A22;
  --surface-hi:#1A212B;
  --line:rgba(255,255,255,.07);
  --line-hi:rgba(59,130,246,.45);
  --text:#E6EDF3;
  --text-dim:#8B98A9;
  --text-faint:#5F6B7C;
  --blue:#3B82F6;
  --blue-soft:rgba(59,130,246,.12);
  --amber:#F59E0B;
  --amber-soft:rgba(245,158,11,.12);
  --radius:12px;
}
/* Author rules like `.fields{display:grid}` beat the browser's own
   `[hidden]{display:none}`, which silently leaves hidden blocks on screen. */
[hidden]{display:none!important}
/* Cross-document fade between pages where the browser supports it; ignored
   everywhere else, so it is purely an upgrade. */
@view-transition{navigation:auto}
*{box-sizing:border-box;margin:0;padding:0}
body{
  /* Global UI scale, driven by the A- / A+ control in the header. */
  zoom:var(--zoom,1);
  background:var(--bg);color:var(--text);font-size:14px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:520px;pointer-events:none;z-index:0;
  background:
    radial-gradient(720px 320px at 22% -140px, rgba(59,130,246,.20), transparent 70%),
    radial-gradient(520px 260px at 78% -180px, rgba(245,158,11,.07), transparent 70%);
}
a{color:inherit;text-decoration:none}

/* header */
header{
  position:sticky;top:0;z-index:50;height:64px;
  display:flex;align-items:center;gap:20px;padding:0 24px;
  background:rgba(11,15,20,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  /* At high text scale the four controls can out-min-width the window; without
     this the header stretches the whole document and the page scrolls sideways. */
  overflow-x:clip;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.wordmark{overflow:hidden;text-overflow:ellipsis}
.mark{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,#3B82F6,#1D4ED8);
  box-shadow:0 4px 14px rgba(59,130,246,.35);
  font-weight:700;font-size:17px;color:#fff;letter-spacing:-.02em;
}
.wordmark{font-size:15px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.wordmark span{color:var(--text-faint);font-weight:500}
.tagline{
  flex:1 1 auto;min-width:0;margin:0;text-align:center;
  font-size:14px;font-weight:600;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.chip{
  height:34px;padding:0 11px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text-dim);
  display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
}
.icon-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);display:grid;place-items:center;color:var(--text-dim);
  cursor:pointer;transition:all .15s ease;
}
.icon-btn:hover{color:var(--text);border-color:var(--line-hi)}
.i-sun{display:none}
html[data-theme="light"] .i-sun{display:block}
html[data-theme="light"] .i-moon{display:none}

/* text-size control */
.scale{
  display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;
  overflow:hidden;background:rgba(255,255,255,.03);
}
.scale button{
  width:31px;height:32px;border:0;background:transparent;color:var(--text-dim);
  font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .15s ease,color .15s ease;
}
.scale button:hover:not(:disabled){background:var(--blue-soft);color:var(--text)}
.scale button:disabled{opacity:.32;cursor:default}
.scale .sep{width:1px;height:16px;background:var(--line);flex:0 0 1px}

/* layout */
.shell{display:flex;align-items:flex-start;position:relative;z-index:1}
aside{
  width:256px;flex:0 0 256px;position:sticky;top:64px;
  /* Divided by the zoom factor: the zoom multiplies lengths, so a plain
     100vh - 64px would overflow the viewport as soon as the text grows. */
  height:calc(100vh / var(--zoom,1) - 64px);
  overflow:hidden;display:flex;flex-direction:column;
  padding:20px 12px 16px 16px;border-right:1px solid var(--line);
}
.side-label{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-faint);padding:0 10px 10px;
}
.cat-list{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow-y:auto}
.cat{
  display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;
  border-radius:9px;color:var(--text-dim);font-size:13px;font-weight:600;position:relative;
  white-space:nowrap;overflow:hidden;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.cat .label{overflow:hidden;text-overflow:ellipsis}
.cat svg{flex:0 0 16px;opacity:.85}
.cat .count{
  margin-left:auto;font-size:11.5px;color:var(--text-faint);
  font-weight:400;font-variant-numeric:tabular-nums;
}
.cat:hover{background:rgba(255,255,255,.035);color:var(--text)}
.cat.active{
  background:linear-gradient(90deg,rgba(59,130,246,.22),rgba(59,130,246,.09));
  color:#fff;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.28);
}
.cat.active svg{color:var(--blue);opacity:1}
.cat.active .count{color:rgba(147,197,253,.85)}
.cat.active::before{
  content:"";position:absolute;left:-16px;top:6px;bottom:6px;width:3px;
  background:var(--blue);border-radius:0 2px 2px 0;
}
.side-divider{height:1px;background:var(--line);margin:12px 10px}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.feedback-btn{
  display:flex;align-items:center;gap:9px;width:100%;height:38px;padding:0 11px;
  border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--text-dim);font-size:13px;font-weight:500;font-family:inherit;
  cursor:pointer;transition:all .15s ease;
}
.feedback-btn:hover{border-color:var(--line-hi);color:var(--text);background:var(--blue-soft)}
.feedback-btn:hover svg{color:var(--blue)}
.feedback-btn svg{flex:0 0 16px;color:var(--text-faint);transition:color .15s ease}

main{flex:1 1 auto;min-width:0;padding:26px 28px 48px;max-width:1320px}

/* search — sticky, so it stays available while you are reading a category
   instead of scrolling away with the page */
.hero{
  position:sticky;top:64px;z-index:20;
  /* The negative margin plus matching padding keeps the input at exactly the
     same height whether the bar is in normal flow or stuck, so it does not jump
     the moment you start scrolling. */
  /* Bottom margin is tuned so the first section sits at the same offset an
     anchor jump would place it, which the page cannot reach by scrolling up. */
  margin:-26px 0 31px;padding:34px 0 10px;
  background:var(--bg);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:16px;
  background:linear-gradient(var(--bg),transparent);pointer-events:none;
}
.search{position:relative;display:flex;align-items:center;width:100%;min-width:0;max-width:720px;margin:0 auto}
.search input{
  width:100%;height:46px;border-radius:12px;padding:0 84px 0 44px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:14.5px;outline:none;
}
.search input::placeholder{color:var(--text-faint)}
.search input:focus{border-color:var(--line-hi);background:rgba(59,130,246,.06)}
.search svg{position:absolute;left:15px;width:17px;height:17px;color:var(--text-faint)}
.search .kbd{
  position:absolute;right:14px;font-size:11.5px;color:var(--text-faint);
  border:1px solid var(--line);border-radius:5px;padding:3px 8px;background:rgba(255,255,255,.03);
}

/* sections */
section{margin-bottom:30px}
/* Anchor jumps must clear the sticky header, or the section title lands
   underneath it and the heading looks missing. */
section[id]{scroll-margin-top:184px}
/* The last two sections are shorter than a window, so without this the page runs
   out of scroll before their anchor is reached and the jump lands short. */
main > section:last-of-type{min-height:calc(100vh - 170px)}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:13px;min-width:0}
.sec-head h2{
  font-size:15.5px;font-weight:600;letter-spacing:-.012em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sec-head .n{
  font-size:11px;color:var(--text-faint);border:1px solid var(--line);
  border-radius:20px;padding:1px 8px;background:rgba(255,255,255,.02);
}
.sec-head .more{
  margin-left:auto;font-size:12.5px;color:var(--text-dim);display:flex;align-items:center;gap:5px;
  white-space:nowrap;flex:0 0 auto;
}
.sec-head .more:hover{color:var(--text)}
.sec-sub{font-size:12.5px;color:var(--text-faint);margin:-6px 0 13px;max-width:720px;line-height:1.5}

/* Cards now hold only an icon and a name, so they no longer need to be wide
   enough for a sentence — a narrower track fits more per row and stops the
   inside of each card from being mostly empty. */
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}

.card{
  display:flex;align-items:center;gap:11px;padding:11px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  position:relative;min-height:56px;transition:all .15s ease;
}
.card:hover{background:var(--surface-hi);border-color:var(--line-hi);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
.tile{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.055);border:1px solid var(--line);
  font-size:13px;font-weight:600;color:#CBD5E1;letter-spacing:-.02em;
}
.tile img{width:21px;height:21px;object-fit:contain}
/* Brand marks are drawn for light backgrounds; a light chip keeps dark logos readable. */
.tile.has-icon{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.14)}
/* Letter tile: one hue per site, lightness follows the theme. */
.tile.lt{background:hsl(var(--h) 45% 16%);border-color:hsl(var(--h) 45% 26%);color:hsl(var(--h) 70% 74%)}
.meta{min-width:0;flex:1 1 auto}
/* Two lines, not one: "Spring Festival Shutdown" does not fit on a single line
   at this card width, and a truncated tool name is worse than a taller card. */
.name{
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;
  white-space:normal;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}

.card.tool .tile{background:var(--amber-soft);border-color:rgba(245,158,11,.28);color:var(--amber)}
.card.tool .tile svg{color:var(--amber)}
.badge{
  display:inline-block;margin-top:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.07em;border-radius:4px;padding:2px 5px;
}
.badge.new{color:#93C5FD;background:var(--blue-soft);border:1px solid rgba(59,130,246,.3)}
.badge.estimate{color:var(--amber);background:var(--amber-soft);border:1px solid rgba(245,158,11,.25)}

footer{
  border-top:1px solid var(--line);padding:18px 28px;display:flex;gap:18px;align-items:center;
  font-size:12px;color:var(--text-faint);
}
footer .links{display:flex;gap:18px}
footer .links a:hover{color:var(--text-dim)}
footer .right{margin-left:auto}

/* ---------- tool pages ---------- */
.tool-head{max-width:760px;margin-bottom:22px}
.tool-head h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:7px}
.tool-head p{font-size:13.5px;color:var(--text-dim);line-height:1.6}
.tool-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
}
.panel-title{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:14px;
}
.fields{display:grid;gap:12px}
.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.field label{display:block;font-size:11.5px;color:var(--text-dim);margin-bottom:6px}
.field input,.field select{
  width:100%;height:38px;border-radius:9px;padding:0 11px;font-family:inherit;font-size:13.5px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);outline:none;
  font-variant-numeric:tabular-nums;
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-faint) 50%),linear-gradient(135deg,var(--text-faint) 50%,transparent 50%);background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.field input:focus,.field select:focus{border-color:var(--line-hi);background:var(--blue-soft)}
.field .hint{font-size:11px;color:var(--text-faint);margin-top:5px}
/* Containers needed: three stat blocks rather than a list of result rows. */
/* Custom select: the visible control is a button, the <select> is the value store. */
.csel{position:relative;min-width:0}
.csel select{display:none}
.csel-btn{
  width:100%;height:38px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--text);font-family:inherit;
  font-size:14px;padding:0 30px 0 11px;text-align:left;cursor:pointer;
  position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .15s ease,background .15s ease;
}
.csel-btn::after{
  content:"";position:absolute;right:12px;top:14px;width:6px;height:6px;
  border-right:1.6px solid var(--text-faint);border-bottom:1.6px solid var(--text-faint);
  transform:rotate(45deg);
}
.csel-btn:hover:not(:disabled){border-color:var(--line-hi);background:var(--blue-soft)}
.csel-btn:disabled{opacity:.5;cursor:default}
.csel-panel{
  /* Fixed and positioned by ui.js: inside the modal an absolute panel would be
     clipped by the dialog, which then needed a scrollbar of its own. */
  position:fixed;z-index:120;left:0;top:0;min-width:120px;
  overflow-y:auto;padding:6px;display:none;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.csel.open .csel-panel{display:block}
.csel-opt{
  display:block;width:100%;text-align:left;padding:7px 9px;border:0;border-radius:7px;
  background:transparent;color:var(--text);font-family:inherit;font-size:13.5px;
  cursor:pointer;white-space:nowrap;
}
.csel-opt:hover{background:var(--blue-soft)}
.csel-opt.on{color:var(--blue);font-weight:600}

.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cap{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 13px;
}
.cap span{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint)}
.cap b{display:block;margin-top:5px;font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cap small{display:block;margin-top:4px;font-size:11.5px;color:var(--text-faint);line-height:1.45}
@media (max-width:900px){
  .cap-grid{grid-template-columns:1fr}
}

/* Amount and its currency sit on one line: the number first, the unit right after. */
/* Unit converter: every category on one screen, each row converting in place. */
/* Kept to a readable width: with the full panel width the number field becomes
   absurdly long and stops reading as a pair with its result. */
.unit-list{display:grid;gap:10px;max-width:780px}
.unit-row{
  display:grid;align-items:center;gap:10px;
  grid-template-columns:104px minmax(0,1fr) 96px 24px minmax(0,1fr) 96px;
}
.unit-name{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.unit-row input,.unit-row select{
  height:38px;min-width:0;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--text);
  font-family:inherit;font-size:14px;padding:0 11px;outline:none;
  font-variant-numeric:tabular-nums;
}
.unit-row input:focus,.unit-row select:focus{border-color:var(--line-hi);background:var(--blue-soft)}
.unit-row output{
  font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.unit-arrow{color:var(--text-faint);text-align:center}
@media (max-width:900px){
  .unit-row{grid-template-columns:minmax(0,1fr) 96px;gap:8px}
  .unit-name{grid-column:1/-1}
  .unit-arrow{display:none}
  .unit-row output{text-align:left}
}

.conv-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;max-width:660px}
.amount-unit{display:flex;gap:8px}
.amount-unit input{flex:1 1 auto;min-width:0}
.amount-unit .csel{flex:0 0 104px}
.swap-btn{
  width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text-dim);cursor:pointer;
  font-family:inherit;font-size:15px;display:grid;place-items:center;
  transition:all .15s ease;
}
.swap-btn:hover{color:var(--text);border-color:var(--line-hi);background:var(--blue-soft)}
.conv-result{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:18px}
.conv-result span{font-size:13px;color:var(--text-dim)}
.conv-result b{
  font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.conv-meta{margin-top:8px;font-size:11.5px;color:var(--text-faint)}
.dotsep{margin:0 6px}
@media (max-width:900px){
  .conv-row{grid-template-columns:1fr}
}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.seg button{
  height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:transparent;
  color:var(--text-dim);font-family:inherit;font-size:12.5px;cursor:pointer;transition:all .15s ease;
}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--blue-soft);border-color:var(--line-hi);color:var(--text)}
.result{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.result:last-of-type{border-bottom:none}
.result span{font-size:12.5px;color:var(--text-dim);flex:1 1 auto}
.result b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.result.total b{font-size:19px;color:var(--blue)}
.result .unit{font-size:11.5px;color:var(--text-faint);font-weight:400;margin-left:3px}
.note{font-size:11.5px;color:var(--text-faint);line-height:1.6;margin-top:14px}
.note.warn{color:#F59E0B}
/* Clocks use the same card language and track width as the link grid, so they
   line up with the rest of the page instead of being one full-width row each. */
.clock-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.cc-holder{display:contents}
.clock-add{
  display:flex;align-items:center;justify-content:center;
  min-height:76px;border-radius:var(--radius);border:1px dashed var(--line);
  background:transparent;color:var(--text-dim);font-family:inherit;
  font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;
}
.clock-add:hover{border-color:var(--line-hi);color:var(--text);background:var(--blue-soft)}
.clock-add[hidden]{display:none}
/* city picker modal */
.modal{position:fixed;inset:0;z-index:90;display:none}
.modal.open{display:flex;align-items:center;justify-content:center;padding:24px}
.modal-bg{position:absolute;inset:0;background:rgba(3,6,10,.62);backdrop-filter:blur(2px)}
.modal-panel{
  /* Centred with flex, not transform: a transformed ancestor turns a
     position:fixed child (the dropdown list) into an absolutely positioned one,
     which put the list in the wrong place entirely. */
  position:relative;
  width:min(92vw,520px);max-height:min(80vh,640px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.modal-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.modal-title{flex:1 1 auto;font-size:14px;font-weight:600;letter-spacing:-.01em}
.modal-head button{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--text-dim);cursor:pointer;
  display:grid;place-items:center;font-family:inherit;font-size:14px;line-height:1;
}
.modal-head button:hover{color:var(--text);border-color:var(--line-hi);background:var(--blue-soft)}
.modal-head button[hidden]{display:none}
.modal-body{padding:10px;overflow-y:auto}
.field textarea{
  width:100%;min-height:88px;padding:10px 11px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);
  font-family:inherit;font-size:14px;line-height:1.5;outline:none;resize:vertical;
}
.field textarea:focus{border-color:var(--line-hi);background:var(--blue-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fb-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.btn-primary{
  height:36px;padding:0 16px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(59,130,246,.5);background:linear-gradient(180deg,#3B82F6,#2F6FDD);
  color:#fff;font-family:inherit;font-size:13px;font-weight:600;
  box-shadow:0 2px 10px rgba(59,130,246,.28);transition:filter .15s ease;
}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-primary:disabled{opacity:.6;cursor:default}
.fb-status{font-size:12.5px;color:var(--text-faint)}
.fb-status.err{color:#F87171}
.fb-done{font-size:13.5px;line-height:1.6;color:var(--text-dim);padding:6px 2px}
html[data-theme="light"] .field textarea{background:#fff;border-color:rgba(15,23,42,.12)}
.pick-list{max-height:none}
.clock-card{
  position:relative;display:flex;flex-direction:column;gap:3px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 12px;min-height:76px;
}
.clock-card.you{border-color:var(--line-hi);box-shadow:inset 0 0 0 1px rgba(59,130,246,.22)}
.cc-city{
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:4px;
}
.clock-card:not(.you) .cc-city{padding-right:62px}
.cc-city .dot{display:inline-block;margin-right:6px;vertical-align:middle}
.cc-time{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px}
.cc-meta{font-size:11.5px;color:var(--text-faint);line-height:1.45}
.cc-tag{font-size:10px;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.cc-ctl{position:absolute;top:9px;right:9px;display:flex;gap:3px}
.cc-ctl button{
  width:22px;height:22px;border-radius:6px;border:1px solid var(--line);
  background:transparent;color:var(--text-faint);cursor:pointer;font-size:11px;
  display:grid;place-items:center;font-family:inherit;line-height:1;
}
.cc-ctl button:hover{color:var(--text);border-color:var(--line-hi);background:var(--blue-soft)}
.pick-list{margin-top:10px;display:grid;gap:6px;max-height:300px;overflow-y:auto}
.pick{
  display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font-family:inherit;
}
.pick:hover:not(:disabled){border-color:var(--line-hi);background:var(--blue-soft)}
.pick:disabled{opacity:.45;cursor:default}
.pick b{font-size:13px;font-weight:600}
.pick small{font-size:11.5px;color:var(--text-faint)}
.btn-ghost{
  height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text-dim);font-family:inherit;
  font-size:12.5px;font-weight:500;cursor:pointer;align-self:flex-start;
}
.btn-ghost:hover{color:var(--text);border-color:var(--line-hi);background:var(--blue-soft)}
.hol{display:grid;gap:9px}
.hol-row{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.hol-row .nm{font-size:13.5px;font-weight:600;flex:1 1 auto}
.hol-row .nm small{display:block;font-weight:400;font-size:11.5px;color:var(--text-faint);margin-top:3px}
.hol-row .days{font-size:12.5px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.chipx{font-size:9.5px;font-weight:700;letter-spacing:.06em;border-radius:4px;padding:2px 6px;flex:0 0 auto}
.chipx.next{color:var(--blue);background:var(--blue-soft);border:1px solid var(--line-hi)}
.chipx.mk{color:var(--text-faint);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-dim);margin-bottom:16px}
.back:hover{color:var(--text)}

/* back to top */
.menu-btn{display:none}

.drawer{position:fixed;inset:0;z-index:80;display:none}
.drawer.open{display:block}
.drawer-bg{position:absolute;inset:0;background:rgba(3,6,10,.62);backdrop-filter:blur(2px)}
.drawer-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(86vw,330px);
  display:flex;flex-direction:column;padding:14px;
  background:var(--bg);border-left:1px solid var(--line);
  box-shadow:-18px 0 40px rgba(0,0,0,.4);
  animation:drawerIn .18s ease-out;
}
@keyframes drawerIn{from{transform:translateX(14px);opacity:.5}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px}
.drawer-head .t{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}
.drawer-close{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:transparent;color:var(--text-dim);cursor:pointer;display:grid;place-items:center;
}
.drawer-close:hover{color:var(--text);border-color:var(--line-hi)}
.drawer-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.drawer-nav .cat{height:44px;font-size:14px;border-radius:10px}
.drawer-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
html[data-theme="light"] .drawer-panel{box-shadow:-18px 0 40px rgba(15,23,42,.18)}

.to-top{
  position:fixed;right:26px;bottom:26px;z-index:60;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text-dim);
  box-shadow:0 8px 22px rgba(0,0,0,.38);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,color .15s ease,border-color .15s ease,background .15s ease;
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{color:var(--text);border-color:var(--line-hi);background:var(--blue-soft)}
html[data-theme="light"] .to-top{box-shadow:0 8px 20px rgba(15,23,42,.14)}

/* ---------- light theme ---------- */
html[data-theme="light"]{
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --surface-hi:#FFFFFF;
  --line:rgba(15,23,42,.08);
  --line-hi:rgba(37,99,235,.45);
  --text:#0F172A;
  --text-dim:#5A6779;
  --text-faint:#93A1B5;
  --blue:#2563EB;
  --blue-soft:rgba(37,99,235,.10);
  --amber:#B45309;
  --amber-soft:rgba(245,158,11,.15);
}
html[data-theme="light"] body::before{
  background:
    radial-gradient(720px 320px at 22% -140px, rgba(37,99,235,.10), transparent 70%),
    radial-gradient(520px 260px at 78% -180px, rgba(245,158,11,.06), transparent 70%);
}
html[data-theme="light"] header{background:rgba(255,255,255,.85)}
html[data-theme="light"] .card{box-shadow:0 1px 2px rgba(15,23,42,.04)}
html[data-theme="light"] .card:hover{box-shadow:0 8px 22px rgba(15,23,42,.10)}
html[data-theme="light"] .tile{background:#EEF2F7;border-color:rgba(15,23,42,.07);color:#475569}
html[data-theme="light"] .tile.has-icon{background:#fff;border-color:rgba(15,23,42,.10)}
html[data-theme="light"] .tile.lt{background:hsl(var(--h) 55% 94%);border-color:hsl(var(--h) 45% 85%);color:hsl(var(--h) 60% 34%)}
html[data-theme="light"] .cat.active{color:var(--blue)}
html[data-theme="light"] .cat.active .count{color:rgba(37,99,235,.6)}
html[data-theme="light"] .cat.active{
  background:linear-gradient(90deg,rgba(37,99,235,.15),rgba(37,99,235,.06));
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.22);
}
html[data-theme="light"] .chip,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .feedback-btn,
html[data-theme="light"] .scale{background:rgba(15,23,42,.03)}
html[data-theme="light"] .cat:hover{background:rgba(15,23,42,.04)}
html[data-theme="light"] .search input{background:#fff;border-color:rgba(15,23,42,.10)}
html[data-theme="light"] .search input:focus{background:#fff}
html[data-theme="light"] .search .kbd{background:rgba(15,23,42,.04)}
html[data-theme="light"] .field input,
html[data-theme="light"] .field select{background:#fff;border-color:rgba(15,23,42,.12)}
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field select:focus{background:#fff;border-color:var(--line-hi)}
html[data-theme="light"] .pick,
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .cc-ctl button{background:rgba(15,23,42,.03)}
html[data-theme="light"] .modal-panel{box-shadow:0 24px 60px rgba(15,23,42,.22)}
html[data-theme="light"] .chipx.mk{background:rgba(15,23,42,.04)}

/* mobile */
@media (max-width:900px){
  /* Static on mobile: the header wraps to two rows, so if it stayed sticky it
     would overlap the category strip, which also sticks to the top. */
  header{position:static;height:auto;padding:10px 14px;gap:8px;flex-wrap:wrap}
  .brand{flex:1 1 auto}
  .tagline{order:3;flex:1 1 100%;text-align:left;font-size:15px;white-space:normal;line-height:1.3}
  .actions{gap:8px;margin-left:auto}
  .scale button{width:29px;height:30px;font-size:12.5px}
  .to-top{right:16px;bottom:16px;width:40px;height:40px}
  .menu-btn{display:grid}
  /* The drawer replaces the sticky chip strip, so the sidebar is gone on mobile. */
  aside{display:none}
  .shell{flex-direction:column}
  main{padding:20px 14px 36px;max-width:none}
  /* The header is static on mobile, so the search bar is what sticks. */
  .hero{position:sticky;top:0;z-index:20;margin:-20px 0 14px;padding:28px 0 8px}
  section[id]{scroll-margin-top:106px}
  main > section:last-of-type{min-height:calc(100vh - 120px)}
  .search{max-width:none}
  .search input{height:44px;font-size:14px;padding:0 76px 0 42px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .card{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:11px}
  .meta{width:100%}
  footer{flex-wrap:wrap;gap:12px;padding:16px 14px}
  footer .right{margin-left:0;width:100%}
}