/* Researchette portal. Tokens mirror index.html so both feel like one product. */
:root {
  --paper: #F4F7FC; --ink: #18203D; --muted: #5F6989; --line: rgba(24, 32, 61, .08);
  --pen: #3448D8; --pen-soft: rgba(52, 72, 216, .09); --teal: #0B9E8C; --teal-soft: rgba(11, 158, 140, .11);
  --amber: #B7791F; --amber-soft: rgba(214, 150, 40, .14);
  --hl-bg: #FFE27A; --redpen: #DD4460; --red-soft: rgba(221, 68, 96, .1); --on-pen: #FFFFFF; --deep: #1A2250; --on-deep: #F4F7FC;
  --glass: rgba(255, 255, 255, .58); --glass-strong: rgba(255, 255, 255, .8); --glass-edge: rgba(255, 255, 255, .9); --glass-hi: rgba(255, 255, 255, .95);
  --shadow: 0 1px 1px rgba(24,32,61,.03), 0 18px 40px -22px rgba(40,50,110,.35);
  --aura-1: #9AA8FF; --aura-2: #7FE3D6; --aura-3: #FFE59A; --aura-4: #FFC2D3;
  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 22px; --ease: cubic-bezier(.2, .8, .2, 1);
  --tabbar-h: 0px;
  interpolate-size: allow-keywords;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C1022; --ink: #EAEFFF; --muted: #A1AACB; --line: rgba(255,255,255,.08);
    --pen: #8FA0FF; --pen-soft: rgba(143,160,255,.13); --teal: #4FD9C7; --teal-soft: rgba(79,217,199,.13);
    --amber: #F2C063; --amber-soft: rgba(242,192,99,.14);
    --hl-bg: rgba(230,198,74,.38); --redpen: #FF8599; --red-soft: rgba(255,133,153,.12); --on-pen: #0C1022; --deep: #1E2766; --on-deep: #F4F7FC;
    --glass: rgba(30, 37, 74, .5); --glass-strong: rgba(36, 44, 88, .75); --glass-edge: rgba(255,255,255,.1); --glass-hi: rgba(255,255,255,.14);
    --shadow: 0 1px 1px rgba(0,0,0,.3), 0 20px 44px -22px rgba(0,0,0,.8);
    --aura-1: #3A47B8; --aura-2: #0F6F66; --aura-3: #5E501C; --aura-4: #642A44;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0C1022; --ink: #EAEFFF; --muted: #A1AACB; --line: rgba(255,255,255,.08);
  --pen: #8FA0FF; --pen-soft: rgba(143,160,255,.13); --teal: #4FD9C7; --teal-soft: rgba(79,217,199,.13);
  --amber: #F2C063; --amber-soft: rgba(242,192,99,.14);
  --hl-bg: rgba(230,198,74,.38); --redpen: #FF8599; --red-soft: rgba(255,133,153,.12); --on-pen: #0C1022; --deep: #1E2766; --on-deep: #F4F7FC;
  --glass: rgba(30, 37, 74, .5); --glass-strong: rgba(36, 44, 88, .75); --glass-edge: rgba(255,255,255,.1); --glass-hi: rgba(255,255,255,.14);
  --shadow: 0 1px 1px rgba(0,0,0,.3), 0 20px 44px -22px rgba(0,0,0,.8);
  --aura-1: #3A47B8; --aura-2: #0F6F66; --aura-3: #5E501C; --aura-4: #642A44;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .5s var(--ease), color .5s var(--ease); }
h1, h2, h3 { font-family: var(--f-display); letter-spacing: -.025em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.7rem); font-weight: 700; }
h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--pen); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.mono { font-family: var(--f-mono); }
.hand { font-family: var(--f-hand); color: var(--redpen); font-weight: 700; }
.eyebrow { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }

/* aura */
.aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aura i { position: absolute; width: 50vmax; height: 50vmax; border-radius: 50%; filter: blur(90px); opacity: .42; animation: drift 30s ease-in-out infinite alternate; }
.aura i:nth-child(1) { background: var(--aura-1); top: -24vmax; left: -14vmax; }
.aura i:nth-child(2) { background: var(--aura-2); top: 20vh; right: -22vmax; animation-duration: 36s; animation-delay: -9s; }
.aura i:nth-child(3) { background: var(--aura-3); bottom: -24vmax; left: 10vw; width: 36vmax; height: 36vmax; opacity: .3; animation-duration: 32s; }
@keyframes drift { 50% { transform: translate(5vmax, 4vmax) scale(1.08); } 100% { transform: translate(-4vmax, 7vmax) scale(.95); } }

/* glass */
.glass { position: relative; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--r); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); isolation: isolate; }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: linear-gradient(145deg, var(--glass-hi), transparent 35%); opacity: .4; }
.card { padding: clamp(20px, 3vw, 28px); }

/* buttons */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 600 .98rem var(--f-body); padding: .85em 1.4em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .2s, background-color .25s; -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.96); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-primary { background: var(--pen); color: var(--on-pen); box-shadow: 0 12px 26px -14px var(--pen), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-teal { background: var(--teal); color: var(--on-pen); box-shadow: 0 12px 26px -14px var(--teal); }
.btn-glass { background: var(--glass-strong); border-color: var(--glass-edge); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-hi); }
.btn-wa { background: #25D366; color: #fff; box-shadow: 0 12px 26px -14px #25D366, inset 0 1px 0 rgba(255,255,255,.3); }
.btn-wa svg { width: 18px; height: 18px; flex: none; }
.btn-glass svg { width: 18px; height: 18px; flex: none; }
.help-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.help-card h3 { margin-bottom: 2px; }
@media (max-width: 760px) { .help-card .btn { width: 100%; } }
.btn-quiet { background: transparent; color: var(--muted); padding-inline: .9em; }
.btn-quiet:hover { color: var(--ink); background: var(--pen-soft); }
.btn-sm { padding: .55em 1em; font-size: .86rem; }
.btn-block { width: 100%; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .2; animation: ripple .6s var(--ease) forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--glass-edge); background: var(--glass-strong); cursor: pointer; flex: none; transition: transform .35s var(--ease); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 18px; height: 18px; }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font: 500 .66rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: .42em .8em; border-radius: 99px; background: var(--pen-soft); color: var(--pen); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.approved { background: var(--teal-soft); color: var(--teal); }
.pill.review { background: var(--amber-soft); color: var(--amber); }
.pill.revision { background: var(--red-soft); color: var(--redpen); }
.pill.locked { background: var(--line); color: var(--muted); }
.pill.new { background: var(--pen-soft); color: var(--pen); }
.pill.declined { background: var(--line); color: var(--muted); }

/* avatar */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 .76rem var(--f-display); color: #fff; background: linear-gradient(135deg, #3448D8, #0B9E8C); flex: none; letter-spacing: 0; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.05rem; }
.avatar.warm { background: linear-gradient(135deg, #DD4460, #F2A65A); }
.avatar.cool { background: linear-gradient(135deg, #0B9E8C, #5A9BFF); }

/* layout */
.shell { width: 100%; max-width: 1060px; margin-inline: auto; padding-inline: 20px; }
.topbar { position: sticky; top: 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px); margin-bottom: 8px; background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px -26px rgba(24,32,61,.45); }
.topbar > .shell { max-width: none; padding-inline: clamp(16px, 3vw, 44px); }
.topbar-inner { display: flex; align-items: center; gap: 12px; padding-block: 10px; }
.logo { font-family: var(--f-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.035em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.logo i { font-style: normal; color: var(--pen); }
.logo svg { width: 22px; height: 22px; flex: none; }
.logo .role { font: 500 .62rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); background: var(--teal-soft); padding: .35em .6em; border-radius: 99px; margin-left: 2px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.avatar-btn { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }

/* tabs: inline in the top bar on desktop, floating glass bar on phones */
.tabs.bottom { display: none; }
.tabs { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--pen-soft); margin-left: 14px; }
.tabs a { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; padding: .5em 1em; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; transition: color .3s; -webkit-tap-highlight-color: transparent; }
.tabs a svg { width: 18px; height: 18px; flex: none; }
.tabs a.on { color: var(--ink); }
.tabs .ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--glass-strong); box-shadow: 0 2px 10px -4px rgba(24,32,61,.25); transition: transform .5s var(--ease), width .5s var(--ease); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--redpen); color: #fff; font: 700 .66rem var(--f-body); display: inline-grid; place-items: center; }
@media (max-width: 760px) {
  :root { --tabbar-h: 76px; }
  .tabs.top { display: none; }
  .tabs.bottom { display: flex; position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; width: min(calc(100% - 32px), 440px); justify-content: space-between; padding: 6px; background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); }
  .tabs.bottom a { flex: 1; flex-direction: column; gap: 2px; padding: .5em .3em; font-size: .7rem; }
  .tabs a svg { width: 21px; height: 21px; }
  .tabs a .badge { position: absolute; top: 3px; left: calc(50% + 6px); }
  .tabs .ind { top: 6px; bottom: 6px; }
}

main.view { display: grid; gap: 20px; align-content: start; padding-block: 12px calc(64px + var(--tabbar-h)); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 760px) { .actions .btn { flex: 1; } }
.view-enter > * { animation: viewin .6s var(--ease) both; }
.view-enter > *:nth-child(2) { animation-delay: .05s; } .view-enter > *:nth-child(3) { animation-delay: .1s; } .view-enter > *:nth-child(4) { animation-delay: .15s; } .view-enter > *:nth-child(n+5) { animation-delay: .2s; }
@keyframes viewin { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }
.stack { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: clamp(22px, 3vw, 32px); }
.page-head { display: grid; gap: 8px; padding-top: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: .9rem; }
.back:hover { color: var(--ink); }

/* progress ring */
.ring { position: relative; width: 76px; height: 76px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .track { stroke: var(--pen-soft); }
.ring .fill { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.15rem var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bar { height: 6px; border-radius: 99px; background: var(--pen-soft); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--pen)); transform-origin: left; animation: grow 1.2s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }

/* hero summary card */
.today-head { display: flex; align-items: center; gap: 18px; }
.today-head .txt { display: grid; gap: 4px; min-width: 0; }

/* segmented control */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 14px; background: var(--pen-soft); }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: .6em .8em; border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--muted); cursor: pointer; transition: color .3s; }
.seg button.on { color: var(--ink); }
.seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 3)); border-radius: 10px; background: var(--glass-strong); box-shadow: 0 2px 10px -4px rgba(24,32,61,.25); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .5s var(--ease); }

/* step page */
.step-head { display: grid; gap: 10px; }
.step-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: .86rem; }
.panel { animation: viewin .5s var(--ease) both; }
.lesson { list-style: none; margin: 0; padding: 0; display: grid; }
.lesson li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding-block: 16px; border-top: 1px solid var(--line); }
.lesson li:first-child { border-top: 0; padding-top: 4px; }
.lesson .n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--pen-soft); color: var(--pen); font: 700 .82rem var(--f-display); }
.lesson b { display: block; font-weight: 600; margin-bottom: 2px; }
.lesson p { color: var(--muted); font-size: .96rem; }
.ex { display: grid; gap: 12px; }
.ex-box { border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; font-size: .95rem; }
.ex-box .lbl { font: 500 .66rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.ex-weak { background: var(--red-soft); }
.ex-weak .lbl { color: var(--redpen); }
.ex-weak p { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--redpen) 60%, transparent); color: var(--muted); }
.ex-strong { background: var(--teal-soft); }
.ex-strong .lbl { color: var(--teal); }
.why { color: var(--muted); font-size: .92rem; }
.prompt { font-size: 1.02rem; }
textarea, input, select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: 14px; padding: .85em 1em; width: 100%; transition: border-color .25s, box-shadow .25s; }
textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
textarea::placeholder, input::placeholder { color: var(--muted); opacity: .7; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--pen); box-shadow: 0 0 0 4px var(--pen-soft); }
label { font-weight: 600; font-size: .88rem; }
.field { display: grid; gap: 7px; }
.counter { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.counter.ok { color: var(--teal); }
.paper { white-space: pre-wrap; background: var(--glass-strong); border-radius: 16px; padding: 16px 18px; font-size: .96rem; line-height: 1.65; overflow-wrap: anywhere; }
.note { border-radius: 16px; padding: 16px 18px; display: grid; gap: 8px; }
.note.red { background: var(--red-soft); }
.note.teal { background: var(--teal-soft); }
.note.amber { background: var(--amber-soft); }
.note .fb { font: 700 1.35rem/1.25 var(--f-hand); color: var(--redpen); white-space: pre-wrap; }
.note.teal .fb { color: var(--teal); }
.note .by { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); }
.note .by .avatar { width: 24px; height: 24px; font-size: .6rem; }
.stamp { display: inline-block; font: 700 1.5rem var(--f-hand); color: var(--teal); border: 2px solid var(--teal); border-radius: 10px; padding: 0 .5em; transform: rotate(-5deg); animation: stamp .6s .2s var(--ease) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-5deg) scale(1.8); } }
.locked-box { text-align: center; display: grid; gap: 12px; justify-items: center; padding-block: 40px; }
.locked-box svg { width: 34px; height: 34px; color: var(--muted); }

/* list rows */
.list { padding: 4px clamp(14px, 2.5vw, 22px); }
.list > * + * { border-top: 1px solid var(--line); }
.li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding-block: 15px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
a.li { transition: opacity .2s; }
a.li:hover .li-title { color: var(--pen); }
.li-main { min-width: 0; display: grid; gap: 2px; }
.li-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; transition: color .2s; }
.li-sub { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-end { display: flex; align-items: center; gap: 10px; }
.chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.sicon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font: 700 .8rem var(--f-display); flex: none; }
.sicon svg { width: 16px; height: 16px; }
.sicon.approved { background: var(--teal); color: var(--on-pen); }
.sicon.review { background: var(--amber-soft); color: var(--amber); }
.sicon.revision { background: var(--red-soft); color: var(--redpen); }
.sicon.current { background: var(--pen); color: var(--on-pen); box-shadow: 0 0 0 5px var(--pen-soft); animation: beat 2.4s ease-in-out infinite; }
.sicon.locked { background: var(--line); color: var(--muted); }
@keyframes beat { 50% { box-shadow: 0 0 0 9px transparent; } }
.phase-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 4px 10px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { padding: 18px; display: grid; gap: 4px; text-decoration: none; color: inherit; transition: transform .4s var(--ease); }
a.stat:hover { transform: translateY(-3px); }
.stat b { font: 800 clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem)/1 var(--f-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .82rem; }
.stat.hot b { color: var(--redpen); }

/* steps dots (admin member view) */
.dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.dots i { height: 8px; border-radius: 99px; background: var(--line); }
.dots i.approved { background: var(--teal); }
.dots i.review { background: var(--amber); }
.dots i.revision { background: var(--redpen); }
.dots i.current { background: var(--pen); }

/* applications */
.app-card { display: grid; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: .78rem; padding: .25em .75em; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); background: var(--glass); }
.quote { color: var(--muted); font-size: .95rem; border-left: 2px solid var(--pen-soft); padding-left: 12px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; font-size: .9rem; -webkit-tap-highlight-color: transparent; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .t { width: 44px; height: 26px; border-radius: 99px; background: var(--line); position: relative; transition: background-color .3s; flex: none; }
.switch .t::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .4s var(--ease); }
.switch input:checked + .t { background: var(--teal); }
.switch input:checked + .t::after { transform: translateX(18px); }
.switch input:focus-visible + .t { outline: 3px solid var(--pen); outline-offset: 2px; }
.search { position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); }
.search input { padding-left: 42px; border-radius: 999px; }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.login { width: min(100%, 420px); padding: clamp(26px, 5vw, 38px); display: grid; gap: 22px; }
.login .logo { font-size: 1.35rem; }
.pw { position: relative; }
.pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--muted); font-size: .82rem; font-weight: 600; padding: .4em .6em; cursor: pointer; border-radius: 8px; }
.error { color: var(--redpen); font-size: .88rem; }
.demo { border-radius: 16px; padding: 14px 16px; background: var(--pen-soft); display: grid; gap: 10px; font-size: .86rem; }
.demo .row { gap: 8px; }

/* sheet / modal */
.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(12,16,34,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: fade .3s ease both; }
.sheet { width: min(100%, 440px); padding: 26px; display: grid; gap: 18px; background: var(--glass-strong); animation: sheetin .5s var(--ease) both; max-height: 90vh; overflow: auto; }
@media (max-width: 760px) {
  .sheet-bg { place-items: end center; padding: 0; }
  .sheet { width: 100%; border-radius: 26px 26px 0 0; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); animation-name: sheetup; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes sheetin { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes sheetup { from { transform: translateY(100%); } }
.sheet .grab { width: 40px; height: 5px; border-radius: 9px; background: var(--line); margin: -10px auto 0; }
.cred { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--paper); }
.cred span { font-size: .75rem; color: var(--muted); }
.cred b { font-family: var(--f-mono); font-size: .95rem; overflow-wrap: anywhere; user-select: all; }

/* toast */
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(24px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: .8em 1.2em; border-radius: 999px; background: var(--deep); color: var(--on-deep); font-size: .92rem; font-weight: 500; box-shadow: var(--shadow); animation: toast 3s var(--ease) both; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 16px); } 12%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 8px); } }

.empty { text-align: center; padding: 36px 16px; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.empty svg { width: 30px; height: 30px; color: var(--teal); }
.demo-flag { font-size: .78rem; color: var(--muted); text-align: center; padding-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}