/* ══ Rise Navi Design System ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#F6F4EF;--surface:#FFF;--ink:#17150F;--ink2:#78756C;--ink3:#B8B5AE;
  --border:rgba(23,21,15,0.08);--border2:rgba(23,21,15,0.045);
  --green:#2A6049;--gbg:#E8F3EC;--gtext:#2A6049;
  --blue:#1A3A8F;--bbg:#EBF0FD;--btext:#1A3A8F;
  --amber:#8B5E0A;--abg:#FEF3C7;--atext:#8B5E0A;
  --red:#991B1B;--rbg:#FEE8E8;--rtext:#991B1B;
  --panel:420px;--nav-h:56px;--r:12px;--rs:8px;
}
html{font-size:18px;}
body{font-family:'Geist',sans-serif;background:var(--bg);color:var(--ink);height:100vh;display:flex;flex-direction:column;overflow:hidden;}
@supports (height: 100dvh){body{height:100dvh;}}
a{color:inherit;text-decoration:none;}

/* ── Nav ── */
nav{display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem;height:var(--nav-h);background:var(--surface);border-bottom:1px solid var(--border2);flex-shrink:0;z-index:200;}
.brand{font-family:'Instrument Serif',serif;font-size:1.3rem;}
.brand-lockup{display:inline-flex;align-items:center;gap:0.45em;white-space:nowrap;}
.brand-mark{display:block;width:1em;height:1em;object-fit:contain;flex-shrink:0;}
.pave-avatar .brand-mark,.m-ava .brand-mark,.chat-empty-mark .brand-mark,
.ap-ava .brand-mark,.af-dot .brand-mark,.ai-id-avatar .brand-mark,
.mp-mascot-body .brand-mark,.fin-banner-avatar .brand-mark,.pu-ava .brand-mark{width:100%;height:100%;}
.nav-c{display:flex;gap:0.15rem;}
.ntab{padding:0.3rem 0.7rem;border-radius:var(--rs);font-size:0.73rem;color:var(--ink3);cursor:pointer;background:transparent;border:none;font-family:'Geist',sans-serif;transition:all 0.12s;}
.ntab:hover{color:var(--ink2);background:var(--bg);}
.ntab.on{color:var(--ink);background:var(--bg);}
.nav-r{display:flex;align-items:center;gap:0.75rem;}

/* Usage ring — quiet by default, only attracts attention when budget is low */
.usage-ring{position:relative;width:20px;height:20px;cursor:default;display:flex;align-items:center;justify-content:center;}
.usage-ring .ur-bg{stroke:var(--border);}
.usage-ring .ur-fg{stroke:var(--ink3);transition:stroke-dashoffset 0.4s ease, stroke 0.2s;}
.usage-ring.warn .ur-fg{stroke:var(--amber);}
.usage-ring.cap .ur-fg{stroke:var(--red);}
.usage-tip{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:0.65rem 0.85rem;min-width:200px;box-shadow:0 4px 16px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.04);opacity:0;pointer-events:none;transform:translateY(-4px);transition:all 0.15s;z-index:100;font-size:0.68rem;color:var(--ink2);line-height:1.6;white-space:nowrap;}
.usage-ring:hover .usage-tip{opacity:1;transform:translateY(0);}
/* iPad Safari reports hover:hover but has no hover capability — the
   hover-reveal above never triggers there. app.js adds a click toggle
   that sets .open on the ring; this rule makes that revealing. */
.usage-ring.open .usage-tip{opacity:1;transform:translateY(0);}
.usage-tip-row{display:flex;justify-content:space-between;gap:1.2rem;}
.usage-tip-row strong{color:var(--ink);font-weight:500;}
.usage-tip-meta{color:var(--ink3);margin-top:0.4rem;padding-top:0.4rem;border-top:1px solid var(--border2);font-size:0.62rem;}

.panel-btn{display:flex;align-items:center;gap:0.45rem;padding:0.3rem 0.75rem;border-radius:99px;border:1px solid var(--border);background:transparent;font-family:'Geist',sans-serif;font-size:0.72rem;color:var(--ink2);cursor:pointer;transition:all 0.15s;position:relative;}
.panel-btn:hover{border-color:rgba(23,21,15,0.18);color:var(--ink);}
.panel-btn.on{border-color:var(--green);color:var(--gtext);background:var(--gbg);}
.pdot{width:6px;height:6px;border-radius:50%;background:var(--ink3);transition:background 0.2s;}
.panel-btn.on .pdot{background:var(--green);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.ava-wrap{position:relative;}
.ava{width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.6rem;color:var(--ink2);cursor:pointer;transition:border-color 0.12s;}
.ava:hover{border-color:rgba(23,21,15,0.2);}
.ava-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:6px;width:248px;max-width:calc(100vw - 32px);overflow-y:auto;overscroll-behavior-y:contain;box-shadow:0 4px 16px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.04);opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity 0.15s,transform 0.15s;z-index:100;}
.ava-wrap.open .ava-menu{opacity:1;pointer-events:auto;transform:translateY(0);}
.ava-menu-identity{padding:10px 9px 8px;line-height:1.5;overflow-wrap:anywhere;}
.ava-menu-name{font-size:14px;font-weight:500;color:var(--ink);}
.ava-menu-email{margin-top:3px;font-size:12px;color:var(--ink3);}
.ava-menu-divider{height:1px;margin:5px 6px;background:var(--border);}
.ava-menu-logout-form{margin:0;}
.ava-menu-item{display:flex;align-items:center;gap:0.45rem;width:100%;padding:0.4rem 0.55rem;border:none;background:transparent;font-family:'Geist',sans-serif;font-size:0.72rem;color:var(--ink2);cursor:pointer;border-radius:var(--rs);text-align:left;text-decoration:none;transition:all 0.1s;}
.ava-menu-item:hover{background:var(--bg);color:var(--ink);}

/* ── Layout ── */
.layout{display:flex;flex:1;min-height:0;}
.main{flex:1;overflow-y:auto;display:flex;justify-content:center;}
.main.shifted{margin-right:0;}
.main::-webkit-scrollbar{width:3px;}
.main::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.page{padding:2rem 2rem 0;width:100%;max-width:800px;}
.page-briefing{max-width:800px;}
.page-recommend,.page-profile{max-width:1120px;}
.page::after{content:'';display:block;height:6rem;}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ── Brief Head ── */
.brief-head{margin-bottom:1.8rem;animation:fadeUp 0.4s ease both;}
.brief-greeting{font-family:'Instrument Serif',serif;font-size:1.5rem;color:var(--ink);margin-bottom:0.3rem;}
.brief-summary{font-size:0.78rem;color:var(--ink2);line-height:1.7;}
.brief-summary strong{color:var(--ink);font-weight:500;}

/* ── Sections ── */
.sec{margin-bottom:1.6rem;}
.sec-label{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.7rem;animation:fadeUp 0.4s ease both;}
.sec-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.sec-text{font-size:0.63rem;font-weight:500;color:var(--ink3);letter-spacing:0.08em;text-transform:uppercase;}
.sec-count{font-size:0.6rem;color:var(--ink3);background:var(--bg);padding:1px 6px;border-radius:99px;border:1px solid var(--border);}
.sec-more{margin-left:auto;font-size:0.66rem;color:var(--ink3);cursor:pointer;text-decoration:none;transition:color 0.12s;}
.sec-more:hover{color:var(--ink2);}

/* ── Context affordance ── */
.ctx-add{position:absolute;top:24px;right:10px;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink3);font-size:0.7rem;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:all 0.15s;z-index:5;font-family:'Geist',sans-serif;line-height:1;}
.acard:hover .ctx-add,.job-mini:hover .ctx-add,.fyi:hover .ctx-add{opacity:1;}
.ctx-add:hover{border-color:var(--blue);color:var(--btext);background:var(--bbg);}
.ctx-on .ctx-add{opacity:1;background:var(--blue);color:#fff;border-color:var(--blue);}
.ctx-on{border-color:var(--blue) !important;background:rgba(26,58,143,0.015);}

/* ── Action Cards ── */
.acard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:0.55rem;overflow:hidden;transition:all 0.15s;animation:fadeUp 0.4s ease both;position:relative;}
.acard:hover{border-color:rgba(23,21,15,0.14);}
.acard-main{padding:0.9rem 1.1rem;display:flex;align-items:flex-start;gap:0.75rem;}
.acard-icon{width:26px;height:26px;border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-size:0.75rem;flex-shrink:0;margin-top:1px;}
.acard-body{flex:1;min-width:0;}
.acard-context{font-size:0.6rem;color:var(--ink3);margin-bottom:0.15rem;}
.acard-text{font-size:0.8rem;color:var(--ink2);line-height:1.65;}
.acard-text strong{color:var(--ink);font-weight:500;}
.acard-actions{display:flex;gap:0.35rem;margin-top:0.55rem;flex-wrap:wrap;}
.act{font-size:0.69rem;padding:0.28rem 0.72rem;border-radius:99px;border:1px solid var(--border);background:transparent;font-family:'Geist',sans-serif;color:var(--ink2);cursor:pointer;transition:all 0.12s;}
.act:hover{border-color:rgba(23,21,15,0.18);color:var(--ink);}
.act.p{background:var(--ink);color:#fff;border-color:transparent;}
.act.p:hover{opacity:0.85;}
.diff-strip{border-top:1px solid var(--border2);padding:0.55rem 1.1rem;background:#FAFAF8;}
.dl{font-size:0.7rem;font-family:'SF Mono','Menlo',monospace;line-height:1.85;padding:0.1rem 0.4rem;border-radius:4px;}
.dl.r{background:rgba(153,27,27,0.06);color:var(--rtext);text-decoration:line-through;text-decoration-color:rgba(153,27,27,0.35);}
.dl.a{background:rgba(42,96,73,0.07);color:var(--gtext);}
.draft-strip{border-top:1px solid var(--border2);padding:0.65rem 1.1rem;background:#FAFAF8;}
.draft-text{font-size:0.72rem;color:var(--ink2);line-height:1.75;font-style:italic;border-left:2.5px solid var(--ink3);padding-left:0.7rem;margin-bottom:0.5rem;}
.draft-meta{font-size:0.62rem;color:var(--ink3);}
.acard-expand{padding:0.4rem 1.1rem;border-top:1px solid var(--border2);display:flex;align-items:center;gap:0.4rem;font-size:0.67rem;color:var(--ink3);cursor:pointer;transition:all 0.12s;}
.acard-expand:hover{background:var(--bg);color:var(--ink2);}
.pave-avatar{width:12px;height:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ── Done states ── */
.acard.done{opacity:0;transform:translateY(-4px) scale(0.98);transition:all 0.35s ease;pointer-events:none;margin-bottom:0;padding:0;max-height:0;overflow:hidden;}
.done-toast{display:flex;align-items:center;gap:0.5rem;padding:0.55rem 0.9rem;background:var(--gbg);border:1px solid rgba(42,96,73,0.15);border-radius:var(--r);margin-bottom:0.55rem;font-size:0.72rem;color:var(--gtext);animation:fadeUp 0.35s ease both;}
.all-done{text-align:center;padding:2rem 1rem;animation:fadeUp 0.5s ease both;}
.all-done-icon{font-size:1.4rem;margin-bottom:0.5rem;}
.all-done-text{font-size:0.82rem;color:var(--ink2);line-height:1.7;}
.all-done-text strong{color:var(--ink);font-weight:500;}

/* ── Job Mini ── */
.job-mini{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin:0.45rem 0 0.55rem;overflow:visible;transition:all 0.15s;animation:fadeUp 0.4s ease both;position:relative;}
.job-mini:hover{border-color:rgba(23,21,15,0.14);}
.jm-row{padding:0.82rem 1rem 0.72rem;display:flex;align-items:stretch;gap:1rem;}
.jm-l{flex:1;min-width:0;}
.jm-title-line{display:block;min-width:0;margin-bottom:2px;}
.jm-name{font-size:0.82rem;font-weight:500;color:var(--ink);line-height:1.35;min-width:0;}
.jm-meta{font-size:0.66rem;color:var(--ink3);line-height:1.5;}
/* Lifted out of .jm-l (was sub-element of name/meta block) and now
   a sibling of .jm-row — independent Row 3 per design doc. Horizontal
   padding matches .jm-row so chips align with title; vertical padding
   gives the row breathing room from the buttons row above (.jm-row's
   bottom padding) and the dot-row's border-top below — empirically
   tuned so the two gaps look visually equal. */
.jm-tags{display:flex;flex-wrap:wrap;gap:3px;align-items:center;margin-top:0.55rem;}
.jm-status-row{margin-top:0.42rem;display:flex;align-items:center;gap:0.35rem;}
/* Salary chip — neutral style separate from .tag tg/tb/ta variants
   so it reads as metadata, not a colored badge. */
.tag.tag-salary{background:transparent;color:var(--ink2);border:1px solid var(--border);font-variant-numeric:tabular-nums;}
/* "See your analysis →" affordance on list cards. Pushed to the right
   end of the tags row via margin-left:auto. Hover deepens color +
   nudges the arrow right by 2px (design-doc cue that the row is the
   click target). */
.jm-see-detail{font-size:0.66rem;color:var(--ink3);letter-spacing:0.02em;white-space:nowrap;flex-shrink:0;transition:color 0.15s;text-decoration:none;}
.job-mini:hover .jm-see-detail{color:var(--ink);}
.tag{font-size:0.6rem;padding:2px 7px;border-radius:99px;font-weight:500;}
.tg{background:var(--gbg);color:var(--gtext);}
.tb{background:var(--bbg);color:var(--btext);}
.ta{background:var(--abg);color:var(--atext);}
.jm-r{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:0.55rem;flex-shrink:0;min-width:126px;}
.jm-acts{display:flex;gap:0.3rem;}
.jm-btn{font-size:0.66rem;padding:0.28rem 0.7rem;border-radius:var(--rs);border:none;cursor:pointer;font-family:'Geist',sans-serif;font-weight:500;transition:opacity 0.12s;}
.jm-yes{background:var(--ink);color:#fff;}
.jm-yes:hover{opacity:0.85;}
.jm-no{background:transparent;color:var(--ink3);border:1px solid var(--border);}
.jm-ai{padding:0.52rem 1rem;border-top:1px solid var(--border2);display:flex;align-items:flex-start;gap:0.45rem;font-size:0.67rem;color:var(--ink2);cursor:pointer;transition:background 0.12s;}
.jm-ai:hover{background:var(--bg);}
.jm-cta{color:var(--btext);font-weight:500;}
.jm-reason-body{flex:1;min-width:0;}
.jm-reason-head{display:flex;align-items:center;gap:0.35rem;margin-bottom:0.12rem;font-size:0.58rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink3);font-weight:500;}
.jm-reason-text{font-size:0.68rem;color:var(--ink2);line-height:1.55;}
.jm-reason-flag{padding:1px 6px;border-radius:99px;background:var(--abg);color:var(--atext);font-size:0.55rem;letter-spacing:0;text-transform:none;}
.jm-match-age{position:absolute;top:-0.5rem;right:0.75rem;z-index:4;padding:2px 8px;border-radius:99px;border:1px solid var(--border);background:#FCFBF8;color:var(--ink2);font-size:0.58rem;font-weight:500;line-height:1.3;box-shadow:0 2px 8px rgba(23,21,15,0.04);white-space:nowrap;font-variant-numeric:tabular-nums;}
.jm-match-age-fresh{background:var(--bbg);color:var(--btext);border-color:rgba(26,58,143,0.16);}
.jm-match-age-recent{background:var(--abg);color:var(--atext);border-color:rgba(139,94,10,0.16);}
.jm-match-age-older{background:#FCFBF8;color:var(--ink3);}
.page-briefing .job-mini{box-shadow:0 1px 0 rgba(23,21,15,0.02);}
.page-briefing .job-mini .jm-row{padding:0.9rem 1.05rem 0.78rem;}
.page-briefing .briefing-hero{border-color:rgba(26,58,143,0.24);box-shadow:inset 3px 0 0 rgba(26,58,143,0.42),0 1px 0 rgba(23,21,15,0.02);}
.page-briefing .briefing-hero .jm-row{padding:1.1rem 1.15rem 0.9rem;}
.page-briefing .briefing-hero .jm-name{font-size:0.98rem;line-height:1.32;}
.page-briefing .briefing-secondary{border-color:rgba(23,21,15,0.075);}
.job-mini-recommend .jm-yes{background:var(--gbg);color:var(--gtext);}
.job-mini-recommend .jm-no{background:transparent;}

/* List-card 6-dim dot row (replaces score% pill — mirrors detail-page
   dot palette but smaller. Tone class chosen via dimTone() in app.js;
   thresholds match the detail-page macro to stay visually consistent.) */
.jm-dot-row{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:0.5rem 1rem 0.55rem;border-top:1px solid var(--border2);}
.jm-dot-cell{display:flex;flex-direction:column;align-items:center;gap:4px;}
.jm-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0;}
.jm-dot-label{font-size:0.54rem;color:var(--ink3);letter-spacing:0.02em;}
.jm-dot-good{background:#6ee7b7;}
.jm-dot-warn{background:#fbbf24;}
.jm-dot-block{background:#f87171;}
.jm-dot-neutral{background:var(--ink3);}

/* ── FYI ── */
.fyi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:0.4rem;padding:0.7rem 1rem;display:flex;align-items:center;gap:0.7rem;transition:all 0.12s;animation:fadeUp 0.4s ease both;cursor:pointer;position:relative;}
.fyi:hover{border-color:rgba(23,21,15,0.14);}
.fyi-icon{font-size:0.75rem;flex-shrink:0;width:20px;text-align:center;}
.fyi-body{flex:1;min-width:0;}
.fyi-text{font-size:0.76rem;color:var(--ink2);line-height:1.55;}
.fyi-text strong{color:var(--ink);font-weight:500;}
.fyi-sub{font-size:0.64rem;color:var(--ink3);margin-top:1px;}
.fyi-arrow{font-size:0.65rem;color:var(--ink3);flex-shrink:0;}

/* ── Panel ── */
.panel{position:fixed;top:var(--nav-h);right:0;bottom:0;width:var(--panel);background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);z-index:100;}
.panel.open{transform:translateX(0);}
.pv{display:none;flex-direction:column;flex:1;min-height:0;}
.pv.show{display:flex;}
.pv-head{padding:0.9rem 1rem 0.75rem;border-bottom:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;gap:0.8rem;flex-shrink:0;background:var(--surface);}
.pv-title{font-size:0.86rem;font-weight:500;color:var(--ink);}
.pv-new{font-size:0.68rem;padding:0.34rem 0.78rem;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--ink2);cursor:pointer;font-family:'Geist',sans-serif;box-shadow:0 1px 3px rgba(23,21,15,0.03);white-space:nowrap;}
.pv-new:hover{border-color:rgba(23,21,15,0.2);color:var(--ink);background:var(--bg);}
.pv-new-float{display:none;}
.sess-scroll{flex:1;overflow-y:auto;padding:0.65rem 0.55rem 1rem;}
.sess-scroll::-webkit-scrollbar{width:3px;}
.chat-section{margin-bottom:1rem;}
.chat-section-title{padding:0.45rem 0.45rem 0.4rem;font-size:0.62rem;color:var(--ink2);font-weight:500;}
.chat-tasks{display:grid;grid-template-columns:1fr;gap:0.16rem;}
.chat-task{display:flex;align-items:center;gap:0.72rem;width:100%;height:38px;border:0;background:transparent;border-radius:10px;padding:0 0.5rem;font-family:'Geist',sans-serif;font-size:0.72rem;color:var(--ink);cursor:pointer;text-align:left;}
.chat-task:hover,.chat-task.active{background:var(--bg);}
.chat-task-ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:0.78rem;flex-shrink:0;}
.task-setup{margin:0 0.45rem 1rem;padding:0.7rem 0 0.85rem;border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);}
.task-setup-title{font-size:0.72rem;font-weight:500;color:var(--ink);margin-bottom:0.24rem;}
.task-setup-hint{font-size:0.64rem;color:var(--ink3);line-height:1.45;margin-bottom:0.55rem;}
.task-job-options{display:grid;gap:0.1rem;margin-bottom:0.6rem;}
.task-job-option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0.55rem;width:100%;box-sizing:border-box;min-height:34px;border-radius:8px;padding:0.25rem 0.2rem;font-size:0.68rem;color:var(--ink2);cursor:pointer;overflow:hidden;}
.task-job-option:hover{background:var(--bg);}
.task-job-option input{width:14px;height:14px;margin:0;accent-color:var(--ink);flex-shrink:0;}
.task-job-option span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.task-picker-toggle{border:0;background:transparent;color:var(--gtext);font-family:'Geist',sans-serif;font-size:0.66rem;font-weight:500;padding:0.15rem 0.2rem;margin:0 0 0.5rem;cursor:pointer;}
.task-picker-toggle:hover{text-decoration:underline;}
.task-picker{margin:0.1rem 0 0.65rem;}
.task-picker-input{width:100%;box-sizing:border-box;height:34px;border:1px solid var(--border);border-radius:10px;background:#fff;padding:0 0.65rem;font-family:'Geist',sans-serif;font-size:0.68rem;color:var(--ink);outline:none;}
.task-picker-input:focus{border-color:rgba(23,21,15,0.22);}
.task-picker-state{min-height:1rem;padding:0.28rem 0.1rem 0;font-size:0.62rem;color:var(--ink3);}
.task-picker-results{display:grid;gap:0.1rem;max-height:8rem;overflow-y:auto;padding-top:0.15rem;}
.task-setup-error{min-height:1rem;font-size:0.62rem;color:#b45309;margin-bottom:0.35rem;}
.task-setup-actions{display:flex;align-items:center;gap:0.45rem;}
.task-setup-primary,.task-setup-secondary,.task-setup-link{height:30px;border-radius:99px;padding:0 0.75rem;font-family:'Geist',sans-serif;font-size:0.66rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.task-setup-primary{border:0;background:var(--ink);color:#fff;}
.task-setup-secondary,.task-setup-link{border:1px solid var(--border);background:transparent;color:var(--ink2);}
.task-setup-secondary:hover,.task-setup-link:hover{border-color:rgba(23,21,15,0.2);color:var(--ink);}
.sess-group{margin-bottom:0.65rem;}
.sitem{min-height:54px;padding:0.58rem 2.35rem 0.58rem 0.7rem;border-radius:10px;cursor:pointer;transition:background 0.12s,border-color 0.12s,box-shadow 0.12s;border:1px solid transparent;margin-bottom:6px;position:relative;display:flex;align-items:center;}
.sitem.has-meta{min-height:58px;}
.sitem:hover{background:var(--bg);}
.sitem.cur{background:#fff;border-color:var(--border);box-shadow:0 1px 8px rgba(23,21,15,0.05);}
.sitem-main{flex:1;min-width:0;}
.sitem-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.6rem;margin-bottom:0.18rem;}
.sitem-title{font-size:0.76rem;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;}
.sitem-pre{font-size:0.66rem;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;}
.sitem-more{position:absolute;top:50%;right:0.45rem;transform:translateY(-50%);width:28px;height:28px;border-radius:8px;border:none;background:transparent;color:var(--ink3);font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.12s;font-family:'Geist',sans-serif;line-height:1;}
.sitem:hover .sitem-more,.sitem.menu-open .sitem-more{opacity:1;}
.sitem-more:hover,.sitem.menu-open .sitem-more{background:var(--surface);color:var(--ink);}
.sitem-menu{position:absolute;top:calc(100% - 4px);right:0.45rem;z-index:20;display:none;min-width:112px;padding:0.25rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 26px rgba(23,21,15,0.12);}
.sitem.menu-open .sitem-menu{display:block;}
.sitem-menu button{width:100%;border:none;background:transparent;border-radius:7px;padding:0.48rem 0.55rem;text-align:left;font-family:'Geist',sans-serif;font-size:0.68rem;color:var(--ink2);cursor:pointer;}
.sitem-menu button:hover{background:var(--bg);color:var(--ink);}
.sitem-menu-danger:hover{background:var(--rbg) !important;color:var(--rtext) !important;}
.list-empty{padding:2.2rem 1rem;text-align:center;font-size:0.72rem;color:var(--ink3);line-height:1.9;}
.list-empty-text{font-weight:500;color:var(--ink);margin-bottom:4px;font-size:0.82rem;}
.list-empty-hint{font-size:0.69rem;color:var(--ink3);margin:0 auto 1.4rem;line-height:1.6;max-width:240px;}
.list-empty-prompts{display:flex;flex-direction:column;gap:8px;text-align:left;margin-top:0.4rem;}
.prompt-card-label{font-size:0.65rem;color:var(--ink3);letter-spacing:0.4px;text-transform:uppercase;padding:0 4px;margin-bottom:2px;}
.prompt-card{padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--ink);font-size:0.78rem;line-height:1.4;text-align:left;cursor:pointer;font-family:inherit;transition:all 0.12s;}
.prompt-card:hover{background:var(--bg2,#f5f5f5);border-color:var(--ink3);transform:translateY(-1px);}

/* ── Chat ── */
.ph{padding:0.8rem 1rem;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:0.6rem;flex-shrink:0;}
.ph-back{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.7rem;color:var(--ink2);}
.ph-back:hover{background:var(--bg);color:var(--ink);}
.ph-info{flex:1;min-width:0;}
.ph-sup{font-size:0.58rem;color:var(--ink3);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:1px;}
.ph-title{font-size:0.78rem;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ctx-bar{padding:0.55rem 0.75rem;border-bottom:1px solid var(--border2);display:flex;flex-wrap:wrap;gap:0.45rem;flex-shrink:0;background:#FCFBF8;}
.ctx-card{min-width:0;max-width:100%;padding:0.48rem 0.62rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);box-shadow:0 1px 4px rgba(23,21,15,0.03);}
.ctx-card-k{font-size:0.55rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink3);font-weight:500;margin-bottom:0.12rem;}
.ctx-card-title{font-size:0.68rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.msgs{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:0.7rem;}
.msgs::-webkit-scrollbar{width:3px;}
.chat-empty{margin:auto 0;align-self:stretch;text-align:center;padding:1.4rem 0.3rem 1.7rem;animation:mIn 0.24s ease both;}
.chat-empty-mark{width:34px;height:34px;display:flex;align-items:center;justify-content:center;margin:0 auto 0.8rem;}
.chat-empty-title{font-size:1rem;font-weight:500;color:var(--ink);margin-bottom:0.35rem;}
.chat-empty-sub{font-size:0.73rem;color:var(--ink3);line-height:1.55;max-width:260px;margin:0 auto 1.05rem;}
.chat-empty-prompts{display:grid;grid-template-columns:1fr 1fr;gap:0.45rem;max-width:360px;margin:0 auto;}
.chat-prompt{border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:0.65rem 0.7rem;min-height:46px;text-align:left;color:var(--ink2);font-size:0.7rem;line-height:1.35;font-family:'Geist',sans-serif;cursor:pointer;transition:all 0.12s;}
.chat-prompt:hover{background:var(--bg);border-color:rgba(23,21,15,0.18);color:var(--ink);transform:translateY(-1px);}
.m-ai{display:flex;gap:0.5rem;align-items:flex-start;animation:mIn 0.28s ease both;}
@keyframes mIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.m-ava{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.m-bub{background:var(--bg);border:1px solid var(--border);border-radius:3px 12px 12px 12px;padding:0.6rem 0.8rem;font-size:0.76rem;color:var(--ink2);line-height:1.7;max-width:90%;}
.m-bub strong{color:var(--ink);font-weight:500;}
.m-bub p{margin:0 0 0.4em;}
.m-bub p:last-child{margin-bottom:0;}
.m-bub ul,.m-bub ol{margin:0.3em 0;padding-left:1.4em;}
.m-bub li{margin-bottom:0.15em;}
.m-bub h1,.m-bub h2,.m-bub h3,.m-bub h4{color:var(--ink);margin:0.5em 0 0.25em;font-size:0.82rem;}
.m-bub h1{font-size:0.92rem;}
.m-bub h2{font-size:0.86rem;}
.m-bub code{background:rgba(23,21,15,0.06);padding:0.1em 0.35em;border-radius:4px;font-size:0.7rem;font-family:'SF Mono','Menlo',monospace;}
.m-bub pre{background:rgba(23,21,15,0.06);padding:0.6em 0.8em;border-radius:6px;overflow-x:auto;margin:0.4em 0;}
.m-bub pre code{background:none;padding:0;font-size:0.68rem;}
.m-user{display:flex;justify-content:flex-end;animation:mIn 0.2s ease both;}
.m-user-bub{background:var(--ink);color:rgba(255,255,255,0.88);border-radius:12px 3px 12px 12px;padding:0.55rem 0.8rem;font-size:0.76rem;line-height:1.65;max-width:85%;}
.m-ctx-refs{display:flex;flex-wrap:wrap;gap:0.25rem;justify-content:flex-end;margin-bottom:0.1rem;animation:mIn 0.2s ease both;}
.m-ctx-pill{display:inline-flex;align-items:center;gap:0.2rem;padding:0.18rem 0.55rem;border-radius:99px;background:var(--bbg);font-size:0.6rem;color:var(--btext);border:1px solid rgba(26,58,143,0.13);max-width:82%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.typing{display:flex;gap:0.5rem;align-items:flex-start;}
.ty-bub{background:var(--bg);border:1px solid var(--border);border-radius:3px 12px 12px 12px;padding:0.55rem 0.8rem;display:flex;gap:4px;align-items:center;}
.ty-bub span{width:4px;height:4px;border-radius:50%;background:var(--ink3);animation:tb 1.2s infinite;}
.ty-bub span:nth-child(2){animation-delay:0.2s;}
.ty-bub span:nth-child(3){animation-delay:0.4s;}
@keyframes tb{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-4px);}}

/* ── Context tray + @ menu ── */
.chat-foot-wrap{border-top:1px solid var(--border2);flex-shrink:0;background:var(--surface);}
.ctx-tray{padding:0.55rem 0.8rem 0;display:none;flex-wrap:wrap;gap:0.35rem;}
.ctx-tray:not(:empty){display:flex;}
.ctx-pill{display:inline-flex;align-items:center;gap:0.25rem;max-width:100%;padding:0.22rem 0.55rem;border-radius:99px;background:var(--bbg);border:1px solid rgba(26,58,143,0.15);font-size:0.62rem;color:var(--btext);font-weight:500;animation:mIn 0.2s ease both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ctx-pill-x{width:12px;height:12px;border-radius:50%;background:transparent;border:none;color:var(--btext);font-size:0.58rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0.6;padding:0;font-family:'Geist',sans-serif;}
.ctx-pill-x:hover{opacity:1;}
.chat-foot{padding:0.65rem 0.75rem 0.7rem;display:flex;gap:0.5rem;align-items:center;}
.cinput-wrap{flex:1;position:relative;display:flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:18px;transition:border-color 0.15s,box-shadow 0.15s;}
.cinput-wrap:focus-within{border-color:rgba(23,21,15,0.22);box-shadow:0 1px 8px rgba(23,21,15,0.05);}
.cinput{width:100%;background:transparent;border:none;border-radius:18px;padding:0.55rem 0.85rem;font-family:'Geist',sans-serif;font-size:0.75rem;color:var(--ink);outline:none;}
.cinput::placeholder{color:var(--ink3);}
.csend{width:30px;height:30px;border-radius:50%;background:var(--ink);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.72rem;flex-shrink:0;transition:opacity 0.12s,transform 0.12s;}
.csend:hover{opacity:0.88;transform:translateY(-1px);}
.at-menu{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);box-shadow:0 4px 16px rgba(0,0,0,0.08);display:none;flex-direction:column;max-height:200px;overflow-y:auto;z-index:10;}
.at-menu.show{display:flex;}
.at-head{padding:0.35rem 0.7rem;font-size:0.58rem;font-weight:500;color:var(--ink3);letter-spacing:0.06em;text-transform:uppercase;border-bottom:1px solid var(--border2);}
.at-item{padding:0.45rem 0.7rem;font-size:0.72rem;color:var(--ink2);cursor:pointer;display:flex;align-items:center;gap:0.45rem;transition:background 0.1s;border-bottom:1px solid var(--border2);}
.at-item:last-child{border-bottom:none;}
.at-item:hover{background:var(--bg);color:var(--ink);}
.at-icon{font-size:0.65rem;width:16px;text-align:center;flex-shrink:0;}
.at-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Welcome / Onboarding ── */
.welcome{margin-bottom:2rem;animation:fadeUp 0.5s ease both;}
.welcome-greeting{font-family:'Instrument Serif',serif;font-size:1.6rem;color:var(--ink);margin-bottom:0.35rem;}
.welcome-sub{font-size:0.82rem;color:var(--ink2);line-height:1.7;}
.stepper{display:flex;align-items:center;gap:0;margin-bottom:1.5rem;animation:fadeUp 0.5s ease 0.1s both;}
.step-dot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:0.68rem;font-weight:500;color:var(--ink3);transition:all 0.25s;flex-shrink:0;}
.step-dot.active{border-color:var(--ink);color:var(--ink);background:var(--surface);}
.step-dot.done{border-color:var(--green);background:var(--gbg);color:var(--gtext);}
.step-line{flex:1;height:1.5px;background:var(--border);transition:background 0.3s;}
.step-line.done{background:var(--green);}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;animation:fadeUp 0.4s ease 0.15s both;}
.card-body{padding:1.3rem 1.4rem;}
.card-title{font-size:0.88rem;font-weight:500;color:var(--ink);margin-bottom:0.15rem;}
.card-sub{font-size:0.72rem;color:var(--ink3);margin-bottom:1rem;}
.card-foot{padding:0.75rem 1.4rem;border-top:1px solid var(--border2);display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;}

/* ── Onboarding language pre-step ── */
.locale-options{display:flex;flex-direction:column;gap:10px;margin-top:0.4rem;}
.locale-option{display:block;padding:14px 16px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;background:var(--surface);transition:all 0.15s;}
.locale-option:hover{border-color:rgba(23,21,15,0.25);background:var(--bg);}
.locale-option.selected{border-color:var(--ink);background:var(--bg);box-shadow:0 0 0 3px rgba(23,21,15,0.04);}
.locale-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.lo-name{font-size:0.95rem;font-weight:500;color:var(--ink);margin-bottom:3px;}
.lo-scope{font-size:0.72rem;color:var(--ink3);line-height:1.5;}

/* ── Job-seeking mode picker (side-by-side cards w/ icons) ── */
.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:0.4rem;margin-bottom:0.5rem;}
.mode-option{display:flex;flex-direction:column;gap:10px;padding:16px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;background:var(--surface);transition:all 0.15s;position:relative;}
.mode-option:hover{border-color:rgba(23,21,15,0.22);background:var(--bg);transform:translateY(-1px);}
.mode-option.selected{border-color:var(--ink);background:var(--bg);box-shadow:0 0 0 3px rgba(23,21,15,0.04);}
.mode-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.mode-icon{width:32px;height:32px;border-radius:var(--rs);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:all 0.15s;}
.mode-option.selected .mode-icon{background:var(--ink);color:#fff;}
.mode-name{font-size:0.95rem;font-weight:500;color:var(--ink);padding-right:28px;}
.mode-scope{font-size:0.72rem;color:var(--ink2);line-height:1.5;}
.mode-check{position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;display:none;align-items:center;justify-content:center;}
.mode-option.selected .mode-check{display:flex;}
@media (max-width:560px){.mode-options{grid-template-columns:1fr;}.mode-option:hover{transform:none;}}

/* ── Upload ── */
.upload-zone{border:1.5px dashed var(--border);border-radius:var(--r);padding:1.8rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;transition:all 0.15s;background:var(--bg);position:relative;text-align:center;}
.upload-zone:hover{border-color:rgba(23,21,15,0.2);background:#EFEDE8;}
.upload-zone.drag{border-color:var(--blue);background:var(--bbg);}
.uz-icon{font-size:1.4rem;}
.uz-label{font-size:0.82rem;font-weight:500;color:var(--ink);}
.uz-sub{font-size:0.69rem;color:var(--ink3);}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.file-uploaded{background:var(--gbg);border:1px solid rgba(42,96,73,0.2);border-radius:var(--rs);padding:0.7rem 0.9rem;display:flex;align-items:center;gap:0.7rem;}
.fu-icon{font-size:1rem;flex-shrink:0;}
.fu-info{flex:1;}
.fu-name{font-size:0.78rem;font-weight:500;color:var(--green);}
.fu-meta{font-size:0.65rem;color:var(--gtext);opacity:0.8;}
.fu-change{font-size:0.65rem;color:var(--ink3);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
/* ── Paste fallback (sibling of upload-zone for image-PDF / scanned
   files / fancy LaTeX templates that pdfplumber can't extract from).
   Lives outside #upload-area on purpose so the JS innerHTML rewrites
   don't wipe the textarea state. ── */
.paste-fallback{margin-top:0.7rem;border-top:1px solid var(--border2);padding-top:0.6rem;}
.paste-fallback summary{font-size:0.7rem;color:var(--ink3);cursor:pointer;list-style:none;padding:0.25rem 0;user-select:none;}
.paste-fallback summary::-webkit-details-marker{display:none;}
.paste-fallback summary::before{content:"+ ";color:var(--ink3);}
.paste-fallback[open] summary::before{content:"− ";}
.paste-fallback summary:hover{color:var(--ink2);}
.paste-fallback textarea{width:100%;margin-top:0.5rem;padding:0.55rem 0.7rem;border:1px solid var(--border);border-radius:var(--rs);font-family:'Geist',sans-serif;font-size:0.74rem;color:var(--ink);background:var(--bg);outline:none;resize:vertical;line-height:1.5;box-sizing:border-box;}
.paste-fallback textarea:focus{border-color:var(--ink);background:#fff;}
.paste-actions{display:flex;justify-content:flex-end;margin-top:0.5rem;}
.btn-paste-submit{padding:0.4rem 0.95rem;border:1px solid var(--border);border-radius:var(--rs);background:var(--bg);font-family:'Geist',sans-serif;font-size:0.72rem;color:var(--ink);cursor:pointer;font-weight:500;transition:all 0.12s;}
.btn-paste-submit:hover{background:#EFEDE8;border-color:rgba(23,21,15,0.2);}
.btn-paste-submit:disabled{opacity:0.4;pointer-events:none;}

/* ── AI parsed profile ── */
.ai-parsed{margin-top:0.85rem;border:1px solid var(--border);border-radius:var(--rs);overflow:hidden;animation:fadeUp 0.35s ease both;}
.ap-head{padding:0.55rem 0.85rem;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:0.5rem;background:#FAFAF8;}
.ap-ava{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ap-label{font-size:0.68rem;color:var(--ink2);}
.ap-body{padding:0.75rem 0.85rem;display:flex;flex-direction:column;gap:0.5rem;}
.ap-row{display:flex;align-items:flex-start;gap:0.55rem;font-size:0.74rem;opacity:0;animation:fadeUp 0.35s ease both;}
.ap-row:nth-child(1){animation-delay:0ms;}
.ap-row:nth-child(2){animation-delay:120ms;}
.ap-row:nth-child(3){animation-delay:240ms;}
.ap-row:nth-child(4){animation-delay:360ms;}
/* Loading state shown while the resume is being parsed by the LLM. Cycles
   through a few short status lines so the user gets an "AI is doing
   something" beat instead of a static spinner. JS owns the message swap;
   CSS owns the entrance. */
.ai-thinking{margin-top:0.85rem;border:1px solid var(--border);border-radius:var(--rs);padding:0.55rem 0.85rem;display:flex;align-items:center;gap:0.5rem;background:#FAFAF8;animation:fadeUp 0.35s ease both;}
.ai-thinking .ap-ava{flex-shrink:0;}
.at-text{font-size:0.7rem;color:var(--ink2);animation:mIn 0.28s ease both;}
.ap-key{color:var(--ink3);font-size:0.65rem;min-width:55px;flex-shrink:0;margin-top:1px;}
.ap-val{color:var(--ink);line-height:1.5;}
.ap-tags{display:flex;flex-wrap:wrap;gap:3px;}
.ap-tag{font-size:0.6rem;padding:2px 7px;border-radius:99px;background:var(--bbg);color:var(--btext);font-weight:500;}
.ap-foot{padding:0.5rem 0.85rem;border-top:1px solid var(--border2);font-size:0.65rem;color:var(--ink3);}
/* Honest-sparse footer: shown when the resume parse populated few or
   no fields. Pre-2026-05-10 the UI showed "?" placeholders that masked
   sparse parses (Tom incident — looked like a load glitch rather than
   "we couldn't extract much"). Subtle amber tone, not a hard error,
   because the user can still proceed and fill missing details later. */
.ap-foot-warn{background:rgba(218,165,32,0.06);color:#7a5a14;border-top-color:rgba(218,165,32,0.18);}

/* ── Forms ── */
.form-group{margin-bottom:0.85rem;}
.form-label{font-size:0.72rem;font-weight:500;color:var(--ink2);margin-bottom:0.3rem;}
.form-select,.form-input{width:100%;padding:0.5rem 0.8rem;border:1px solid var(--border);border-radius:var(--rs);font-family:'Geist',sans-serif;font-size:0.8rem;color:var(--ink);background:var(--bg);outline:none;transition:border-color 0.12s;}
.form-select:focus,.form-input:focus{border-color:var(--ink);background:#fff;}
/* Replace native browser select arrow with a custom SVG so it sits at a
   visually balanced offset from the right edge. macOS / Windows / iOS
   all paint the native arrow in different positions, which read as
   inconsistent and (on macOS especially) too far right. */
.form-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%2378756C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 0.85rem center;padding-right:2rem;}
.form-hint{font-size:0.65rem;color:var(--ink3);margin-top:0.25rem;}
/* hint + counter on the same row for the Work-location field — saves a
   line of vertical space and groups the two pieces of meta info that
   describe the pill picker below them. */
.location-meta{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;margin-top:0.25rem;margin-bottom:0.55rem;}
.location-meta .form-hint{margin-top:0;}
.location-meta .cap-counter{margin:0;}
/* Push the "you can change this later" hint a bit further from the
   passive radio card so it reads as standalone reassurance rather than a
   tail of the card. */
.section-mode .form-hint{margin-top:0.7rem;}
/* Section header for groups that aren't filter parameters but product
   commitments (e.g. notification cadence). Slightly heavier than the
   default form-label so users read it as "this is a different kind of
   choice" without a hard divider. */
.form-label-strong{color:var(--ink);}
/* Extra top margin gives an "invisible divider" between filter fields
   above (visa/salary/location) and the contract section below.
   Deliberately no border to keep the card visually unified. */
.section-mode{margin-top:1rem;}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;}
.pills{display:flex;flex-wrap:wrap;gap:0.4rem;}
.pill{padding:0.4rem 0.85rem;border-radius:99px;border:1px solid var(--border);font-size:0.75rem;color:var(--ink2);cursor:pointer;background:transparent;font-family:'Geist',sans-serif;transition:all 0.12s;}
.pill:hover{border-color:rgba(23,21,15,0.2);color:var(--ink);}
.pill.on{background:var(--ink);color:#fff;border-color:transparent;}

/* Counter shown next to pill groups to surface the cap (3 roles, 2 cities).
   Flashes red briefly when the user tries to exceed the cap. */
.cap-counter{display:inline-block;font-size:0.65rem;color:var(--ink3);margin:0.3rem 0 0.5rem;padding:2px 8px;border-radius:99px;background:rgba(23,21,15,0.04);font-variant-numeric:tabular-nums;transition:background 0.25s,color 0.25s;}
.cap-counter.cap-flash{background:rgba(220,60,60,0.15);color:#b22;animation:capShake 0.4s ease;}
@keyframes capShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}
.ai-autofill{display:flex;align-items:center;gap:0.45rem;padding:0.55rem 0.75rem;background:var(--bbg);border:1px solid rgba(26,58,143,0.12);border-radius:var(--rs);margin-bottom:0.85rem;font-size:0.7rem;color:var(--btext);animation:fadeUp 0.3s ease both;}
.ai-autofill .af-dot{width:14px;height:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ── Buttons ── */
.btn-next{padding:0.48rem 1.2rem;border:none;border-radius:var(--rs);background:var(--ink);font-family:'Geist',sans-serif;font-size:0.76rem;color:#fff;cursor:pointer;font-weight:500;transition:opacity 0.12s;}
.btn-next:hover{opacity:0.85;}
.btn-next:disabled{opacity:0.25;pointer-events:none;}


/* ── Auth pages ── */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);padding:2rem;}
.auth-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2rem;width:100%;max-width:380px;animation:fadeUp 0.5s ease both;}
.auth-brand{font-family:'Instrument Serif',serif;font-size:1.8rem;color:var(--ink);text-align:center;margin-bottom:0.3rem;}
.auth-brand.brand-lockup{display:flex;justify-content:center;}
.auth-sub{font-size:0.78rem;color:var(--ink2);text-align:center;margin-bottom:1.5rem;}
.auth-form .form-group{margin-bottom:0.7rem;}
.auth-btn{width:100%;padding:0.55rem;border:none;border-radius:var(--rs);background:var(--ink);color:#fff;font-family:'Geist',sans-serif;font-size:0.82rem;font-weight:500;cursor:pointer;transition:opacity 0.12s;}
.auth-btn:hover{opacity:0.85;}
.auth-divider{display:flex;align-items:center;gap:0.75rem;margin:1rem 0;font-size:0.68rem;color:var(--ink3);}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-google{width:100%;padding:0.5rem;border:1px solid var(--border);border-radius:var(--rs);background:var(--surface);color:var(--ink);font-family:'Geist',sans-serif;font-size:0.78rem;cursor:pointer;transition:border-color 0.12s;display:flex;align-items:center;justify-content:center;gap:0.5rem;}
.auth-google:hover{border-color:rgba(23,21,15,0.2);}
.auth-footer{text-align:center;margin-top:1rem;font-size:0.72rem;color:var(--ink3);}
/* margin-left avoids "No account?Sign up" / "还没有账号?登录" glued together
   when the i18n strings don't carry trailing whitespace. */
.auth-footer a{color:var(--btext);text-decoration:underline;text-underline-offset:2px;margin-left:0.3rem;}
.auth-error{background:var(--rbg);border:1px solid rgba(153,27,27,0.15);color:var(--rtext);padding:0.5rem 0.75rem;border-radius:var(--rs);font-size:0.72rem;margin-bottom:0.75rem;display:none;}
.auth-notice{background:var(--gbg);border:1px solid rgba(34,95,60,0.15);color:var(--gtext);padding:0.65rem 0.85rem;border-radius:var(--rs);font-size:0.72rem;margin-bottom:0.75rem;line-height:1.55;}
.auth-btn:disabled{opacity:0.55;cursor:not-allowed;}
.auth-subrow{display:flex;justify-content:flex-end;margin-top:-0.2rem;margin-bottom:0.5rem;}
.auth-link{font-size:0.68rem;color:var(--ink3);text-decoration:none;transition:color 0.12s;}
.auth-link:hover{color:var(--btext);text-decoration:underline;text-underline-offset:2px;}

/* Language switcher — two placement variants.
   Auth pages: .lang-switch alone → absolute inside .auth-card (top-right
               of the card, not the viewport, so it's always in the
               user's focal area next to the form).
   Logged-in nav: .lang-switch.lang-switch-nav → inline flex item in
               the nav-r cluster, position:static override. */
.lang-switch{
  position:absolute;top:14px;right:18px;z-index:10;
  font-size:13px;font-family:'Geist',sans-serif;
  user-select:none;line-height:1;
}
.lang-switch.lang-switch-nav{
  position:static;top:auto;right:auto;z-index:auto;
  margin-right:0.4rem;white-space:nowrap;
  font-size:12px;  /* nav version stays compact */
}
.lang-switch a{
  color:var(--ink3);text-decoration:none;
  padding:3px 5px;border-radius:4px;
  transition:color 0.15s, background 0.15s;
}
.lang-switch a:hover{color:var(--ink);background:var(--bg);}
.lang-switch a.active{color:var(--ink);font-weight:500;cursor:default;}
.lang-switch a.active:hover{background:transparent;}
.lang-sep{color:var(--ink4,#d6d1c4);margin:0 2px;}

/* Settings page */
.settings-head{margin-bottom:1.8rem;}
.settings-title{font-family:'Instrument Serif',serif;font-size:1.6rem;color:var(--ink);}
.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;margin-bottom:1.2rem;}
.settings-section-title{font-size:0.82rem;font-weight:500;color:var(--ink);margin-bottom:0.3rem;}
.settings-section-hint{font-size:0.72rem;color:var(--ink3);line-height:1.5;margin-bottom:1rem;}
.settings-form{display:flex;align-items:center;gap:0.8rem;flex-wrap:wrap;}
.settings-form .form-group{margin-bottom:0;min-width:180px;}
/* Settings form selects use a custom chevron instead of the browser's
   native dropdown arrow. width:auto alone wasn't enough — Chrome's
   native <select> reserves ~20px "indicator area" on the right regardless
   of padding, so the chevron still sat disconnected from the option
   text. appearance:none removes that area; the SVG chevron is placed
   close to the text via background-position right 0.6rem. Scoped to
   .settings-form so onboarding keeps its full-width native selects. */
.settings-form .form-select{
  width:auto;min-width:0;
  appearance:none;-webkit-appearance:none;
  padding-right:1.8rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378756C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.6rem center;
  background-size:10px;
}
/* Align save buttons across sections. width:auto selects make the
   select-width variable (97px for "English", 200px for "订阅..."), so
   buttons placed right after the select sat at different x positions.
   margin-left:auto pushes each save button to the form's right edge;
   since both forms live in equal-width section containers, their save
   buttons now share the same right + left edge. In mobile column stack
   margin-left:auto is a no-op (auto margins don't apply cross-axis). */
.settings-form .settings-save-btn{margin-left:auto;}
.settings-save-btn{background:var(--ink);color:#fff;border:none;border-radius:var(--rs);padding:0.5rem 1.2rem;font-size:0.78rem;font-family:inherit;cursor:pointer;transition:opacity 0.12s;}
.settings-save-btn:hover{opacity:0.85;}
.settings-save-btn:disabled{opacity:0.5;cursor:not-allowed;}
.settings-save-hint{font-size:0.72rem;color:var(--ink3);}

/* ── Feedback modal ── */
body.feedback-open{overflow:hidden;}
.feedback-modal[hidden]{display:none;}
.feedback-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1.2rem;}
.feedback-backdrop{position:absolute;inset:0;background:rgba(23,21,15,0.38);}
.feedback-card{position:relative;z-index:1;width:min(480px,100%);max-height:min(720px,calc(100dvh - 2.4rem));overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 22px 60px rgba(23,21,15,0.22);padding:1rem;}
.feedback-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:0.85rem;}
.feedback-title{font-size:0.95rem;font-weight:500;color:var(--ink);margin-bottom:0.18rem;}
.feedback-sub{font-size:0.7rem;color:var(--ink3);line-height:1.45;}
.feedback-x{width:30px;height:30px;border-radius:99px;border:1px solid var(--border);background:transparent;color:var(--ink2);font-size:1rem;line-height:1;cursor:pointer;flex:none;}
.feedback-x:hover{background:var(--bg);color:var(--ink);}
.feedback-label{display:block;font-size:0.68rem;font-weight:500;color:var(--ink2);margin:0.65rem 0 0.28rem;}
.feedback-select,.feedback-textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink);font-family:'Geist',sans-serif;font-size:0.78rem;outline:none;}
.feedback-select{height:38px;padding:0 0.7rem;}
.feedback-textarea{resize:vertical;min-height:116px;padding:0.7rem;line-height:1.55;}
.feedback-select:focus,.feedback-textarea:focus{border-color:rgba(23,21,15,0.24);box-shadow:0 1px 8px rgba(23,21,15,0.05);}
.feedback-drop{margin-top:0.75rem;border:1px dashed var(--border);border-radius:10px;background:var(--bg);padding:0.75rem;display:flex;align-items:center;justify-content:space-between;gap:0.8rem;}
.feedback-drop.drag-over{border-color:var(--ink3);background:#fff;}
.feedback-drop-main{font-size:0.7rem;color:var(--ink3);line-height:1.45;}
.feedback-attach-btn,.feedback-secondary,.feedback-submit{height:34px;border-radius:99px;font-family:'Geist',sans-serif;font-size:0.72rem;cursor:pointer;white-space:nowrap;}
.feedback-attach-btn,.feedback-secondary{border:1px solid var(--border);background:var(--surface);color:var(--ink2);padding:0 0.85rem;}
.feedback-attach-btn:hover,.feedback-secondary:hover{border-color:rgba(23,21,15,0.2);color:var(--ink);}
.feedback-submit{border:0;background:var(--ink);color:#fff;padding:0 1rem;}
.feedback-submit:disabled{opacity:0.55;cursor:not-allowed;}
.feedback-stage{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:0.7rem;}
.feedback-chip{display:inline-flex;align-items:center;gap:0.42rem;max-width:100%;height:32px;border:1px solid var(--border);border-radius:99px;background:#fff;padding:0.2rem 0.32rem 0.2rem 0.42rem;font-size:0.68rem;color:var(--ink2);}
.feedback-chip img{width:22px;height:22px;border-radius:5px;object-fit:cover;flex:none;}
.feedback-file-icon{width:22px;height:22px;border-radius:5px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:0.46rem;font-weight:600;letter-spacing:0;color:var(--ink3);flex:none;}
.feedback-chip-name{min-width:0;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feedback-chip button{width:20px;height:20px;border:0;border-radius:99px;background:transparent;color:var(--ink3);cursor:pointer;font-size:0.8rem;line-height:1;flex:none;}
.feedback-chip button:hover{background:var(--bg);color:var(--ink);}
.feedback-error{min-height:1rem;margin-top:0.65rem;font-size:0.68rem;color:var(--rtext);}
.feedback-actions{display:flex;justify-content:flex-end;gap:0.55rem;margin-top:0.85rem;}

/* Profile hub */
.profile-head{margin-bottom:1.5rem;animation:fadeUp 0.4s ease both;}
.profile-title{font-family:'Instrument Serif',serif;font-size:1.5rem;color:var(--ink);margin-bottom:0.3rem;}
.profile-sub{font-size:0.78rem;color:var(--ink2);line-height:1.7;}
.profile-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;}
.profile-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start;}
.profile-main-col,.profile-side-col{display:flex;flex-direction:column;gap:1rem;min-width:0;}
.profile-side-col{align-self:stretch;}
.profile-career-section{display:flex;flex-direction:column;align-items:flex-start;}
.profile-identity-card{width:100%;box-sizing:border-box;padding:0.9rem 1.05rem;}
.profile-identity-card .settings-section-title{margin-bottom:0;}
.profile-identity-top{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;width:100%;}
.profile-identity-copy{display:flex;flex-direction:column;gap:0.28rem;min-width:0;}
.profile-identity-actions{display:flex;align-items:center;gap:0.55rem;flex-shrink:0;}
.profile-status{display:inline-flex;align-items:center;gap:0.45rem;padding:0.32rem 0.65rem;border-radius:99px;background:var(--bg);font-size:0.72rem;color:var(--ink2);white-space:nowrap;}
.profile-status-dot{width:7px;height:7px;border-radius:50%;background:var(--ink3);flex-shrink:0;}
.profile-status-ready .profile-status-dot{background:var(--green);}
.profile-status-pending .profile-status-dot{background:var(--amber);}
.profile-status-failed .profile-status-dot{background:var(--red);}
.profile-career-note{font-size:0.72rem;color:var(--ink3);line-height:1.45;margin:0;max-width:520px;}
.profile-career-note-error{color:#8f1d19;}
.profile-career-actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.55rem;}
.profile-action-link{display:inline-flex;text-decoration:none;}
.profile-action-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--border);}
.profile-action-secondary:hover{border-color:rgba(23,21,15,0.2);}
.profile-retry-btn{background:transparent;color:var(--ink);border:1px solid var(--border);}
.profile-retry-hint{min-height:1em;}
.profile-read-card{scroll-margin-top:1rem;margin-bottom:0;padding:1.15rem 1.2rem;}
.profile-read-section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:0.8rem;font-size:0.9rem;font-weight:500;color:var(--ink);letter-spacing:0;}
.profile-read-section-head span{font-size:0.62rem;color:var(--ink3);font-weight:500;background:var(--bg);border:1px solid var(--border2);border-radius:99px;padding:1px 7px;letter-spacing:0;}
.profile-read-list{display:flex;flex-direction:column;}
.profile-read-item{padding:0.75rem 0;border-bottom:1px solid var(--border2);}
.profile-read-item:last-child{border-bottom:none;}
.profile-read-main{display:flex;flex-direction:column;gap:0.18rem;}
.profile-read-title{font-size:0.86rem;font-weight:500;color:var(--ink);line-height:1.4;}
.profile-read-meta{display:flex;flex-wrap:wrap;gap:0.45rem;font-size:0.66rem;color:var(--ink3);line-height:1.5;}
.profile-read-details{margin-top:0.45rem;}
.profile-read-details summary{display:inline-flex;align-items:center;gap:0.3rem;list-style:none;cursor:pointer;font-size:0.66rem;color:var(--ink2);border:1px solid var(--border);border-radius:99px;padding:0.25rem 0.58rem;background:var(--surface);transition:all 0.15s;}
.profile-read-details summary::-webkit-details-marker{display:none;}
.profile-read-details summary::after{content:"+";color:var(--ink3);}
.profile-read-details[open] summary{margin-bottom:0.5rem;color:var(--ink);border-color:rgba(23,21,15,0.16);}
.profile-read-details[open] summary::after{content:"-";}
.profile-read-details summary span{color:var(--ink3);}
.profile-read-details ul{display:flex;flex-direction:column;gap:0.35rem;margin-left:1rem;color:var(--ink2);font-size:0.72rem;line-height:1.55;}
.profile-read-prose{padding:0.75rem 0;border-bottom:1px solid var(--border2);color:var(--ink2);font-size:0.76rem;line-height:1.65;}
.profile-read-prose:last-child{border-bottom:none;}
.profile-read-prose p + p{margin-top:0.55rem;}
.profile-skill-strip{display:flex;flex-wrap:wrap;gap:0.38rem;margin-top:0.2rem;}
.profile-skill-chip{display:inline-flex;align-items:center;border:1px solid var(--border2);background:var(--bg);border-radius:99px;padding:0.28rem 0.65rem;font-size:0.68rem;color:var(--ink2);line-height:1.3;}
.profile-side-col .settings-section{margin-bottom:0;}
.profile-sticky-summary{position:sticky;top:0;z-index:10;}
.profile-snapshot-card{padding:1.15rem;}
.profile-snapshot-rows{display:flex;flex-direction:column;gap:0.75rem;margin-top:0.9rem;}
.profile-snapshot-row{display:flex;flex-direction:column;gap:0.32rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border2);}
.profile-snapshot-row:last-child{padding-bottom:0;border-bottom:none;}
.profile-snapshot-key{font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink3);font-weight:500;}
.profile-snapshot-values{display:flex;flex-wrap:wrap;gap:0.35rem;}
.profile-snapshot-value{font-size:0.72rem;color:var(--ink2);line-height:1.5;}
.profile-snapshot-pill{display:inline-flex;align-items:center;padding:0.25rem 0.62rem;border-radius:99px;background:var(--bg);border:1px solid var(--border2);font-size:0.66rem;color:var(--ink2);}
.profile-snapshot-empty{font-size:0.72rem;color:var(--ink3);}
.profile-snapshot-pref-list{display:flex;flex-direction:column;gap:0.55rem;}
.profile-snapshot-pref-group{display:flex;flex-direction:column;gap:0.3rem;}
.profile-snapshot-pref-label{font-size:0.62rem;color:var(--ink3);}
.profile-snapshot-actions{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.95rem;border-top:1px solid var(--border2);padding-top:0.8rem;}
.profile-snapshot-action,.profile-modal-secondary{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--ink2);border-radius:99px;padding:0.34rem 0.72rem;font-family:inherit;font-size:0.68rem;line-height:1.2;cursor:pointer;transition:all 0.15s;}
.profile-snapshot-action::after{content:"+";margin-left:0.28rem;color:var(--ink3);}
.profile-snapshot-action:hover,.profile-modal-secondary:hover{color:var(--ink);border-color:rgba(23,21,15,0.18);}
body.profile-modal-open{overflow:hidden;}
.profile-modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(23,21,15,0.28);padding:1.2rem;}
.profile-modal-backdrop[hidden]{display:none;}
.profile-modal-sheet{width:min(760px,100%);max-height:min(86vh,760px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 70px rgba(23,21,15,0.18);overflow:hidden;}
.profile-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border2);padding:1.2rem 1.25rem 1rem;}
.profile-modal-kicker{font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink3);font-weight:500;margin-bottom:0.3rem;}
.profile-modal-head h2{margin:0;font-size:1.05rem;font-weight:500;color:var(--ink);letter-spacing:0;line-height:1.25;}
.profile-modal-head p{margin:0.35rem 0 0;color:var(--ink3);font-size:0.72rem;line-height:1.5;}
.profile-modal-close{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--ink2);font-family:inherit;font-size:0.78rem;cursor:pointer;}
.profile-modal-close:hover{color:var(--ink);border-color:rgba(23,21,15,0.18);}
.profile-modal-body{padding:1.1rem 1.25rem 1.25rem;overflow:auto;}
.profile-modal-panel[hidden]{display:none;}
.profile-modal-sheet .profile-form-actions,.profile-modal-sheet .refine-actions{align-items:center;justify-content:flex-end;gap:0.65rem;margin-top:1rem;}
.profile-modal-sheet .profile-role-groups{max-height:340px;overflow:auto;padding-right:0.15rem;}
.profile-field-head{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;margin-bottom:0.45rem;}
.profile-field-head .form-label{margin-bottom:0;}
.profile-role-groups{display:flex;flex-direction:column;gap:0.75rem;}
.profile-role-category{font-size:0.66rem;color:var(--ink3);margin-bottom:0.35rem;text-transform:uppercase;letter-spacing:0.05em;}
.profile-stale-pill{border-style:dashed;color:var(--ink3);background:rgba(23,21,15,0.02);}
.profile-stale-pill.on{background:rgba(23,21,15,0.08);color:var(--ink2);border-color:rgba(23,21,15,0.22);}
.profile-stale-tag{margin-left:0.35rem;font-size:0.62rem;color:inherit;opacity:0.68;}
.profile-target-form{display:flex;flex-direction:column;gap:0.95rem;}
.profile-target-form .form-group{margin-bottom:0;}
.profile-target-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;}
.profile-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:0.8rem;margin-top:0.2rem;}
.settings-refine-label{font-size:11.5px;text-transform:uppercase;letter-spacing:0.05em;font-weight:500;color:var(--ink3);margin-bottom:6px;}
.refine-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;width:100%;}
.refine-col{min-height:180px;}
.refine-actions{display:flex;justify-content:center;margin-top:24px;width:100%;}
.refine-save-btn{min-width:120px;transition:background 0.2s ease,color 0.2s ease;}
.refine-save-btn.is-saved{background:#5a7a3f;color:#fff;border-color:#5a7a3f;}
.refine-save-btn.is-error{animation:refineShake 0.4s ease;}
@keyframes refineShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}

/* Top-of-page banner shown when user.email_verified == false. Placed
   right under the nav so it's impossible to miss, but soft-colored so
   it doesn't scream — this is a "please do this" not an error. */
.verify-banner{
  background:var(--abg);border-bottom:1px solid rgba(161,98,7,0.15);
  color:var(--atext);font-size:0.72rem;
  padding:0.55rem 1.2rem;
  display:flex;align-items:center;justify-content:center;gap:0.6rem;flex-wrap:wrap;
}
.verify-resend{
  background:transparent;border:1px solid rgba(161,98,7,0.3);
  color:var(--atext);font-family:inherit;font-size:0.68rem;
  padding:2px 10px;border-radius:99px;cursor:pointer;transition:background 0.12s;
  margin-left:0.3rem;
}
.verify-resend:hover{background:rgba(161,98,7,0.08);}
.verify-resend-hint{color:var(--atext);font-size:0.68rem;opacity:0.9;}

/* ── Impersonate banner ──
   Sticky red strip pinned to the top whenever an admin is "viewing
   as" a target user. Distinct from .verify-banner (amber, info
   tone) — red signals "you're acting on someone else's behalf,
   stop and notice". Stays visible on scroll because the Exit
   button inside it is the only path back to admin (admin loses
   /admin/* access for the impersonate window). */
.impersonate-banner{
  position:sticky;top:0;z-index:9999;
  background:#b91c1c;color:#fff;
  font-size:0.74rem;font-weight:500;
  padding:0.5rem 1rem;
  display:flex;align-items:center;justify-content:center;gap:0.8rem;flex-wrap:wrap;
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
}
.impersonate-banner .ib-text strong{font-weight:600;}
.impersonate-banner .ib-exit-form{margin:0;display:inline;}
.impersonate-banner .ib-exit-btn{
  background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.4);
  color:#fff;font-family:inherit;font-size:0.7rem;font-weight:500;
  padding:3px 12px;border-radius:99px;cursor:pointer;
  transition:background 0.12s;
}
.impersonate-banner .ib-exit-btn:hover{background:rgba(255,255,255,0.28);}

/* Admin → user "Impersonate" button on /admin/users/{id}. Same red as
   .impersonate-banner so admin's eye associates the click target with
   the consequence (sticky red strip will appear on the next page).
   Sits inside .adm-head; revealed by AdminUserDetail.render() only
   when target is non-admin. */
.aud-impersonate-btn{
  background:#b91c1c;color:#fff;border:none;
  padding:0.4rem 0.85rem;border-radius:var(--rs);
  font-family:inherit;font-size:0.72rem;font-weight:500;
  cursor:pointer;transition:background 0.12s;
}
.aud-impersonate-btn:hover{background:#991b1b;}
.aud-impersonate-hint{
  margin-left:0.6rem;color:var(--ink3);font-size:0.66rem;
}

/* ── Empty state ── */
.empty-state{text-align:center;padding:3rem 1rem;animation:fadeUp 0.5s ease both;}
.empty-icon{font-size:2rem;margin-bottom:0.75rem;}
.empty-title{font-family:'Instrument Serif',serif;font-size:1.2rem;color:var(--ink);margin-bottom:0.3rem;}
.empty-sub{font-size:0.78rem;color:var(--ink2);line-height:1.7;}
.refresh-btn{margin-top:1.2rem;padding:0.5rem 1.5rem;background:var(--ink);color:#fff;border:none;border-radius:var(--rs);font-size:0.82rem;cursor:pointer;transition:opacity 0.2s;}
.refresh-btn:hover{opacity:0.8;}
.refresh-btn:disabled{opacity:0.5;cursor:default;}
.refresh-btn-sm{margin-left:auto;padding:0.2rem 0.6rem;background:none;border:1px solid var(--border);border-radius:var(--rs);font-size:0.72rem;color:var(--ink2);cursor:pointer;transition:all 0.2s;}
.refresh-btn-sm:hover{border-color:var(--ink3);color:var(--ink);}
.refresh-btn-sm:disabled{opacity:0.5;cursor:default;}

/* Briefing empty-state "Scan for jobs" CTA — appears only on the
   no_match variant (new user stuck, or filter matches nothing).
   Primary action button style (darker than the secondary pool link
   below it). Disabled state provides tactile feedback after click
   until load() swaps the empty state for the progress card. */
.empty-scan-btn{
  display:inline-block;margin:1rem auto 0;
  padding:0.5rem 1.2rem;font-size:0.82rem;font-weight:500;
  background:var(--ink);color:var(--bg);
  border:none;border-radius:999px;cursor:pointer;
  transition:opacity 0.15s;
}
.empty-scan-btn:hover{opacity:0.85;}
.empty-scan-btn:disabled{opacity:0.5;cursor:wait;}

/* Briefing empty-state "see full pool" link — appears after the user
   has emptied their tray (✓ caught up celebration) or when matcher
   hasn't produced picks yet. Subtle text link, not a button — the
   primary action is "wait for next cron", browsing pool is secondary. */
.empty-pool-link{display:inline-block;margin-top:1.2rem;font-size:0.78rem;color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:2px;transition:all 0.2s;}
.empty-pool-link:hover{color:var(--ink);border-color:var(--ink3);}

/* Pool scan utility — deliberately quiet. Briefing cadence is system-led;
   manual scan is available for recovery/browsing, not the main action. */
.rec-scan-utility{display:flex;align-items:center;gap:0.45rem;color:var(--ink3);font-size:0.68rem;white-space:nowrap;padding-top:0.25rem;}
.rec-scan-meta{color:var(--ink3);}
.rec-scan-sep{color:var(--border);}
.rec-scan-btn{margin-top:0;padding:0;background:transparent;border:none;border-radius:0;font-size:0.68rem;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:0.25rem;font-family:inherit;transition:color 0.15s;white-space:nowrap;}
.rec-scan-btn:hover{color:var(--ink);}
.rec-scan-btn:disabled{opacity:0.6;cursor:default;}
.rec-scan-btn.scanning .rec-scan-icon{animation:spin 1.4s linear infinite;display:inline-block;}
.rec-scan-icon{font-size:0.72rem;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── Matching progress card ──
   Zero-cognitive-load live status: large breathing emoji + one-line stage
   label + progress bar + elapsed time + a "go grab a coffee" hint. Renders
   whenever /api/jobs/briefing returns matching_in_progress=true. Sits above
   actions/picks so old recommendations stay visible below while fresh ones
   are being computed. */
.mp-wrap{margin-bottom:1.6rem;animation:fadeUp 0.4s ease both;}
.mp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2rem 1.5rem 1.75rem;text-align:center;position:relative;overflow:hidden;}
/* Warm ambient gradient on the card — subtle, feels alive */
.mp-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,240,200,0.35),transparent 55%);pointer-events:none;}
/* Rise Navi avatar — bouncing branded mark with personality. Replaces the
   static 🤖 emoji with a lively, "hardworking" character: bob + tilt for
   energy, shadow that breathes with the bounce, and two sparkle particles
   orbiting the body so it feels like it's actively scanning. */
.mp-mascot{display:flex;flex-direction:column;align-items:center;margin-bottom:0.9rem;position:relative;}
.mp-mascot-bob{animation:mpBob 1.6s cubic-bezier(0.36,0,0.64,1) infinite;}
.mp-mascot-body{
  width:54px;height:54px;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(54,31,108,0.2);
  position:relative;
}
/* Floating sparkle particles — two pseudo-elements orbiting at different
   speeds/phases so the motion feels organic, not mechanical. */
.mp-mascot-body::before,.mp-mascot-body::after{
  content:'';position:absolute;border-radius:50%;
  animation:mpFloat 2.4s ease-in-out infinite;
}
.mp-mascot-body::before{
  width:6px;height:6px;background:rgba(139,109,235,0.7);
  top:-6px;right:-10px;
}
.mp-mascot-body::after{
  width:5px;height:5px;background:rgba(139,109,235,0.5);
  bottom:0;left:-12px;
  animation-delay:1.2s;
}
.mp-mascot-shadow{
  width:30px;height:6px;
  background:rgba(0,0,0,0.06);
  border-radius:50%;margin-top:6px;
  animation:mpShadow 1.6s cubic-bezier(0.36,0,0.64,1) infinite;
}
@keyframes mpBob{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-10px) rotate(2deg);}
}
@keyframes mpShadow{
  0%,100%{transform:scaleX(1);opacity:0.8;}
  50%{transform:scaleX(0.6);opacity:0.4;}
}
@keyframes mpFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:0.6;}
  50%{transform:translateY(-8px) scale(1.15);opacity:1;}
}
.mp-title{font-family:'Instrument Serif',serif;font-size:1.3rem;color:var(--ink);margin-bottom:0.35rem;position:relative;}
.mp-stage{font-size:0.75rem;color:var(--ink2);margin-bottom:1.1rem;position:relative;min-height:1em;}
.mp-bar-wrap{height:6px;background:var(--bg);border-radius:99px;overflow:hidden;margin:0 auto 0.7rem;max-width:340px;position:relative;}
.mp-bar{height:100%;background:linear-gradient(90deg,var(--green),#3B7A5A);border-radius:99px;width:0%;transition:width 0.5s cubic-bezier(0.16,1,0.3,1);}
/* Indeterminate variant — used during prefilter where we can't tick a real count */
.mp-bar-wrap.indeterminate .mp-bar{width:35% !important;animation:mpSlide 1.4s ease-in-out infinite;}
@keyframes mpSlide{0%{transform:translateX(-100%);}100%{transform:translateX(340%);}}
.mp-stats{display:flex;align-items:center;justify-content:center;gap:0.55rem;font-size:0.7rem;color:var(--ink2);font-variant-numeric:tabular-nums;position:relative;}
.mp-dot{color:var(--ink3);}
.mp-hint{font-size:0.72rem;color:var(--ink3);margin-top:1rem;position:relative;}

/* ── mp-card complete state ──────────────────────────
   Morphs the progress card into a static summary:
     - Mascot stops bobbing (animation removed)
     - Bar + stats + hint hidden (message is the signal)
     - Title gets larger + centered (it IS the result)
     - Green "check" halo around the mascot for affirmation
   Auto-hides after 4 seconds via JS (MatchingCard.showComplete).
*/
.mp-complete .mp-mascot-bob{animation:none;}
.mp-complete .mp-mascot-body{border:1.5px solid rgba(42,96,73,0.25);}
.mp-complete .mp-stage,
.mp-complete .mp-bar-wrap,
.mp-complete .mp-stats,
.mp-complete .mp-hint{display:none;}
.mp-complete .mp-title{font-size:1.15rem;color:var(--ink);margin-top:0.4rem;}
.mp-complete .mp-card{animation:mpCompleteFade 0.4s ease both;}
@keyframes mpCompleteFade{from{transform:scale(0.98);opacity:0.6;}to{transform:scale(1);opacity:1;}}

/* ── Loading spinner ── */
.loading{display:flex;align-items:center;justify-content:center;padding:3rem;}
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--ink);border-radius:50%;animation:spin 0.6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── Refine bullet list (PaveRefineBullet) ─────────────────────────
   Free-form bullet input used on /onboarding/finalize and /profile.
   Two colour variants via data-rb-color on .rb-container:
     "green" — wants section
     "amber" — avoids section
   Behaviour driven by web/static/refine_bullet.js — CSS handles layout,
   colours, hover, and the "just-saved" 0.9s pulse. */
.rb-container{display:flex;flex-direction:column;}
.rb-row{display:flex;align-items:center;padding:9px 4px;border-bottom:1px solid var(--border);transition:background 0.2s ease;}
.rb-row:hover{background:rgba(0,0,0,0.015);}
.rb-dot{width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(0,0,0,0.2);background:transparent;margin-left:4px;margin-right:12px;flex-shrink:0;transition:background 0.25s ease,border-color 0.25s ease,transform 0.2s ease;}
.rb-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:13.5px;color:var(--ink);padding:0;}
.rb-input::placeholder{color:var(--ink3);}
/* Saved-state colours — section colour fills the dot.
   Green (#5a7a3f) for wants, amber (#a8702a) for avoids. */
.rb-container[data-rb-color="green"] .rb-row-saved .rb-dot{background:#5a7a3f;border-color:#5a7a3f;}
.rb-container[data-rb-color="amber"] .rb-row-saved .rb-dot{background:#a8702a;border-color:#a8702a;}
/* Just-saved 0.9s box-shadow pulse — colour matches section. Plays
   once per save transition; .rb-row-pulse class is added on blur+save
   and removed by JS after the animation completes. */
@keyframes rbPulseGreen{from{box-shadow:0 0 0 0 rgba(90,122,63,0.45);}to{box-shadow:0 0 0 8px rgba(90,122,63,0);}}
@keyframes rbPulseAmber{from{box-shadow:0 0 0 0 rgba(168,112,42,0.45);}to{box-shadow:0 0 0 8px rgba(168,112,42,0);}}
.rb-container[data-rb-color="green"] .rb-row-pulse .rb-dot{animation:rbPulseGreen 0.9s ease-out;}
.rb-container[data-rb-color="amber"] .rb-row-pulse .rb-dot{animation:rbPulseAmber 0.9s ease-out;}
/* "Add another" — dashed-border circle + muted text. Sits below all
   rows; new rows insert above it. */
.rb-add-btn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:6px 4px;background:transparent;border:none;font-family:inherit;font-size:12.5px;color:var(--ink3);cursor:pointer;align-self:flex-start;}
.rb-add-btn::before{content:'+';display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:1.5px dashed rgba(0,0,0,0.25);border-radius:50%;font-size:10px;color:rgba(0,0,0,0.4);line-height:1;}
.rb-add-btn:hover{color:var(--ink2);}
.rb-add-btn:hover::before{border-color:rgba(0,0,0,0.4);color:rgba(0,0,0,0.6);}

/* ── Recommend page ── */
.rec-head{margin-bottom:1.1rem;animation:fadeUp 0.4s ease both;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}
.rec-head-copy{min-width:0;}
.rec-title{font-family:'Instrument Serif',serif;font-size:1.5rem;color:var(--ink);margin-bottom:0.3rem;}
.rec-sub{font-size:0.78rem;color:var(--ink2);line-height:1.7;}

.rec-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;animation:fadeUp 0.4s ease both;}
.rec-scope-toggle{display:inline-flex;gap:0.2rem;padding:0.2rem;border:1px solid var(--border);border-radius:var(--rs);background:var(--surface);}
.rec-scope-btn{border:0;background:transparent;border-radius:calc(var(--rs) - 2px);padding:0.35rem 0.75rem;font-family:'Geist',sans-serif;font-size:0.72rem;color:var(--ink2);cursor:pointer;transition:all 0.15s;}
.rec-scope-btn:hover{color:var(--ink);}
.rec-scope-btn.on{background:var(--ink);color:#fff;}

.rec-chips{display:flex;gap:0.4rem;}
.chip{display:inline-flex;align-items:center;gap:0.4rem;padding:0.35rem 0.85rem;border-radius:99px;border:1px solid var(--border);background:var(--surface);font-family:'Geist',sans-serif;font-size:0.72rem;color:var(--ink2);cursor:pointer;transition:all 0.15s;}
.chip:hover{border-color:rgba(23,21,15,0.16);color:var(--ink);}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.chip-n{font-size:0.66rem;padding:1px 6px;border-radius:99px;background:rgba(23,21,15,0.08);color:inherit;font-weight:500;}
.chip.on .chip-n{background:rgba(255,255,255,0.18);}

.rec-list{min-height:200px;}

.rec-pager{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.2rem 0 0.4rem;animation:fadeUp 0.4s ease both;}
.pager-btn{padding:0.35rem 0.9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);font-size:0.72rem;color:var(--ink2);cursor:pointer;font-family:'Geist',sans-serif;transition:all 0.15s;}
.pager-btn:hover:not(:disabled){border-color:var(--ink3);color:var(--ink);}
.pager-btn:disabled{opacity:0.4;cursor:default;}
.pager-btn.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.pager-info{font-size:0.7rem;color:var(--ink3);}

/* Card status variants */
.rec-badge{display:inline-block;padding:1px 7px;border-radius:99px;font-size:0.58rem;font-weight:500;vertical-align:middle;letter-spacing:0;white-space:nowrap;}
.rec-badge-today{background:var(--bbg);color:var(--btext);}
/* Muted "精选" variant — same blue hue as 今日精选 so it reads as part of
   the same "featured" family, but with a transparent fill and a light blue
   hairline border so it doesn't compete visually with bright 今日精选.
   Communicates "still a quality pick, but not fresh-today". */
.rec-badge-featured{background:transparent;color:var(--btext);border:1px solid rgba(26,58,143,0.22);}
.rec-badge-interested{background:var(--gbg);color:var(--gtext);}
.rec-badge-skipped{background:var(--bg);color:var(--ink3);}

.briefing-fold{border:none;border-radius:0;background:transparent;margin:0.1rem 0 0.75rem;overflow:visible;animation:fadeUp 0.4s ease both;}
.briefing-fold summary{list-style:none;cursor:pointer;padding:0.48rem 0.05rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border2);font-size:0.68rem;color:var(--ink2);}
.briefing-fold summary::-webkit-details-marker{display:none;}
.briefing-fold summary::after{content:'+';font-size:0.78rem;color:var(--ink3);flex-shrink:0;}
.briefing-fold[open] summary::after{content:'−';}
.briefing-fold summary small{font-size:0.62rem;color:var(--ink3);line-height:1.5;text-align:right;}
.briefing-fold-list{padding:0.55rem 0 0.1rem;}
.briefing-fold-list .job-mini:last-child{margin-bottom:0;}
.pool-fold-card{box-shadow:none;}

.job-mini.rec-new{border-color:var(--border);box-shadow:inset 2px 0 0 rgba(26,58,143,0.28);}
.job-mini.rec-new:hover{border-color:rgba(23,21,15,0.14);box-shadow:inset 2px 0 0 rgba(26,58,143,0.38);}
.page-recommend .jm-reason-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.job-mini.rec-interested{border-color:rgba(42,96,73,0.28);background:rgba(232,243,236,0.35);}
.job-mini.rec-skipped{opacity:0.55;}
.job-mini.rec-skipped:hover{opacity:0.85;}

/* Animated card removal. Caller sets max-height to the measured offsetHeight
   just before adding .leaving so the transition has a real starting value —
   CSS can't transition from "auto" to 0. Overrides the base .job-mini
   transition (all 0.15s) with longer, property-specific curves for a smooth
   collapse + fade. 280ms max-height is the longest animation; JS uses a
   320ms setTimeout to safely remove the node after the transition completes. */
.job-mini.leaving{
  opacity:0;
  max-height:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  border-top-width:0 !important;
  border-bottom-width:0 !important;
  pointer-events:none;
  transition:
    opacity 0.18s ease-out,
    max-height 0.28s cubic-bezier(0.4,0,0.2,1),
    margin 0.28s cubic-bezier(0.4,0,0.2,1),
    border-width 0.28s ease-out;
}

.jm-btn.jm-reset{background:transparent;color:var(--ink3);border:1px solid var(--border);}
.jm-btn.jm-reset:hover{color:var(--ink);border-color:var(--ink3);}

/* ── Admin wrapper (single flex child of .main, contains subnav + page) ── */
.admin-wrap{width:100%;display:flex;flex-direction:column;align-items:center;}
.admin-wrap .page{max-width:800px;width:100%;}

/* ── Admin sub-nav ── */
.admin-subnav{max-width:800px;width:100%;margin:1.6rem 0 0;padding:0 2rem;display:flex;gap:1.2rem;border-bottom:1px solid var(--border2);}
.asn-tab{padding:0.55rem 0.1rem;font-size:0.72rem;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.15s;}
.asn-tab:hover{color:var(--ink2);}
.asn-tab.on{color:var(--ink);border-bottom-color:var(--ink);}
.asn-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-left:0.28rem;padding:0 0.32rem;border-radius:99px;background:var(--rtext);color:#fff;font-size:0.56rem;font-weight:600;line-height:1;}
/* Admin "include admin users" toggle — sits at the right edge of the
   subnav. margin-left:auto pushes it out so the page tabs stay
   left-aligned and the toggle is visually separate. */
.admin-audience-toggle{margin-left:auto;display:flex;align-items:center;gap:0.4rem;font-size:0.72rem;color:var(--ink3);cursor:pointer;user-select:none;padding:0.55rem 0;}
.admin-audience-toggle:hover{color:var(--ink2);}
.admin-audience-toggle input{margin:0;cursor:pointer;}

/* ── Admin / Usage dashboard ── */
.adm-head{margin-bottom:1.4rem;animation:fadeUp 0.4s ease both;}
.adm-title{font-family:'Instrument Serif',serif;font-size:1.5rem;color:var(--ink);margin-bottom:0.3rem;}
.adm-sub{font-size:0.78rem;color:var(--ink2);}

.adm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.6rem;animation:fadeUp 0.4s ease both;}
.adm-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem;}
.adm-kpi-label{font-size:0.62rem;color:var(--ink3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.4rem;}
.adm-kpi-value{font-family:'Instrument Serif',serif;font-size:1.6rem;color:var(--ink);}
.adm-kpi-meta{font-size:0.66rem;color:var(--ink3);margin-top:0.2rem;}

.adm-alerts{background:#FEF3C7;border:1px solid rgba(139,94,10,0.2);border-radius:var(--r);padding:0.8rem 1rem;margin-bottom:1.6rem;}
.adm-alert{font-size:0.74rem;color:var(--atext);margin-bottom:0.3rem;}
.adm-alert:last-child{margin-bottom:0;}

.adm-section{margin-bottom:1.8rem;animation:fadeUp 0.5s ease both;}
.adm-section-head{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.7rem;}
.adm-section-title{font-size:0.63rem;font-weight:500;color:var(--ink3);letter-spacing:0.08em;text-transform:uppercase;}

.adm-chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem;height:220px;}

.adm-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.adm-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:0.5rem;padding:0.55rem 1rem;font-size:0.72rem;color:var(--ink2);align-items:center;border-bottom:1px solid var(--border2);}
.adm-row:last-child{border-bottom:none;}
.adm-row.head{font-size:0.6rem;color:var(--ink3);text-transform:uppercase;letter-spacing:0.05em;background:var(--bg);font-weight:500;}
.adm-row strong{color:var(--ink);font-weight:500;}
.adm-row.capped{background:rgba(254,232,232,0.4);}
.adm-pct-bar{display:flex;align-items:center;gap:0.4rem;}
.adm-pct-track{flex:1;height:4px;background:var(--bg);border-radius:2px;overflow:hidden;}
.adm-pct-fill{height:100%;background:var(--ink3);border-radius:2px;transition:width 0.3s;}
.adm-pct-fill.warn{background:var(--amber);}
.adm-pct-fill.cap{background:var(--red);}
.adm-pct-num{font-size:0.62rem;color:var(--ink3);min-width:28px;text-align:right;}

.adm-footer{font-size:0.7rem;color:var(--ink3);text-align:center;padding:1rem 0;}

/* Two-col sub-sections (used on pool page for location + arrangement) */
.adm-two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.adm-two-col .adm-section{margin-bottom:0;}
@media (max-width:700px){.adm-two-col{grid-template-columns:1fr;}}

/* Funnel bars (for users page) */
.adm-funnel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem;display:flex;flex-direction:column;gap:0.5rem;}
.adm-funnel-step{display:grid;grid-template-columns:140px 1fr 80px;align-items:center;gap:0.8rem;font-size:0.72rem;}
.adm-funnel-label{color:var(--ink2);}
.adm-funnel-bar{height:14px;background:var(--bg);border-radius:7px;overflow:hidden;}
.adm-funnel-fill{height:100%;background:var(--ink);border-radius:7px;transition:width 0.4s;}
.adm-funnel-num{text-align:right;color:var(--ink);font-weight:500;}
.adm-funnel-num small{color:var(--ink3);font-weight:400;margin-left:0.2rem;}

/* Key-value grid (for user detail profile/usage blocks) */
.adm-kv{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.2rem;display:grid;grid-template-columns:120px 1fr;gap:0.4rem 0.8rem;font-size:0.72rem;}
.adm-kv-label{color:var(--ink3);}
.adm-kv-val{color:var(--ink);}

/* Preset status pill (on pool page) */
.adm-status-pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:0.6rem;font-weight:500;}
.adm-status-pill.fresh{background:var(--gbg);color:var(--gtext);}
.adm-status-pill.aging{background:var(--abg);color:var(--atext);}
.adm-status-pill.stale{background:var(--rbg);color:var(--rtext);}
.adm-status-pill.never{background:var(--bg);color:var(--ink3);}

/* Small link-style user email in user table */
.adm-row a{color:var(--btext);text-decoration:none;border-bottom:1px dashed transparent;}
.adm-row a:hover{border-bottom-color:var(--btext);}
.adm-footer a{color:var(--btext);text-decoration:underline;text-underline-offset:2px;}

/* ── Pool job browser ── */
.adm-section-sub{font-size:0.68rem;color:var(--ink3);margin-left:auto;}

/* Filter row: select dropdowns + search box + reset button.
   Wraps on narrow screens so controls never get squeezed. */
.adm-filter-bar{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.7rem;align-items:center;}
.adm-filter-select,.adm-filter-input{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:0.38rem 0.7rem;font-size:0.7rem;color:var(--ink);font-family:inherit;
  cursor:pointer;transition:border-color 0.15s;
}
.adm-filter-input{cursor:text;min-width:180px;flex:1;}
.adm-filter-select:hover,.adm-filter-input:hover{border-color:var(--ink3);}
.adm-filter-select:focus,.adm-filter-input:focus{outline:none;border-color:var(--ink2);}
.adm-filter-btn{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
  padding:0.38rem 0.9rem;font-size:0.68rem;color:var(--ink3);cursor:pointer;
  font-family:inherit;transition:all 0.15s;
}
.adm-filter-btn:hover{color:var(--ink);border-color:var(--ink3);}

/* Job row: clickable, highlights on hover */
.adm-job-row{transition:background 0.12s;}
.adm-job-row:hover{background:var(--bg);}

/* Work-arrangement colored pills */
.adm-arr-remote{color:var(--gtext);background:var(--gbg);padding:1px 8px;border-radius:99px;font-size:0.6rem;font-weight:500;}
.adm-arr-hybrid{color:var(--atext);background:var(--abg);padding:1px 8px;border-radius:99px;font-size:0.6rem;font-weight:500;}
.adm-arr-onsite{color:var(--ink3);background:var(--bg);padding:1px 8px;border-radius:99px;font-size:0.6rem;font-weight:500;}
.adm-arr-unknown{color:var(--ink3);background:var(--bg);padding:1px 8px;border-radius:99px;font-size:0.6rem;font-weight:500;opacity:0.6;}

.adm-expired-tag{
  display:inline-block;padding:1px 6px;border-radius:99px;
  font-size:0.58rem;font-weight:500;background:var(--rbg);color:var(--rtext);
  margin-right:0.3rem;vertical-align:middle;
}

/* Expanded row detail panel — appears right under a clicked row */
.adm-job-detail{
  grid-column:1 / -1;
  background:var(--bg);padding:1rem 1.2rem;font-size:0.7rem;color:var(--ink2);
  border-bottom:1px solid var(--border2);animation:fadeUp 0.25s ease both;
}
.adm-detail-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:0.4rem 1.2rem;
  margin-bottom:0.8rem;
}
.adm-detail-label{display:inline-block;min-width:96px;color:var(--ink3);font-size:0.62rem;
  text-transform:uppercase;letter-spacing:0.04em;margin-right:0.4rem;}
.adm-detail-desc{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:0.7rem 0.9rem;margin-bottom:0.7rem;line-height:1.5;color:var(--ink2);
  font-size:0.7rem;white-space:pre-wrap;
}
.adm-detail-footer{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;flex-wrap:wrap;}
.adm-detail-footer a{color:var(--btext);text-decoration:none;border-bottom:1px dashed;font-size:0.7rem;}
.adm-pill-warn{
  display:inline-block;padding:2px 8px;border-radius:99px;font-size:0.6rem;
  background:var(--abg);color:var(--atext);font-weight:500;
}

/* Pagination controls */
.adm-pagination{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  padding:0.8rem 0;margin-top:0.2rem;
}
.adm-page-btn{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:0.35rem 0.9rem;font-size:0.68rem;color:var(--ink2);cursor:pointer;
  font-family:inherit;transition:all 0.15s;
}
.adm-page-btn:hover:not(:disabled){border-color:var(--ink3);color:var(--ink);}
.adm-page-btn:disabled{opacity:0.4;cursor:not-allowed;}
.adm-page-info{font-size:0.68rem;color:var(--ink3);}

.adm-empty{padding:1.5rem;text-align:center;color:var(--ink3);font-size:0.72rem;}
.adm-feedback-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:0.45rem;margin:-0.35rem 0 0.85rem;}
.adm-feedback-toolbar .pager-btn.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.adm-feedback-toolbar .pager-btn span:not(:empty){margin-left:0.2rem;color:inherit;opacity:0.72;}
.adm-feedback-list{display:flex;flex-direction:column;}
.adm-feedback-item{border-bottom:1px solid var(--border2);padding:0.85rem 0.95rem;background:var(--surface);}
.adm-feedback-item:last-child{border-bottom:none;}
.adm-feedback-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0.45rem 0.65rem;margin-bottom:0.45rem;font-size:0.66rem;color:var(--ink3);}
.adm-feedback-meta a{color:var(--ink2);text-decoration:none;}
.adm-feedback-meta a:hover{text-decoration:underline;}
.adm-feedback-message{font-size:0.78rem;color:var(--ink);line-height:1.65;white-space:pre-wrap;word-break:break-word;margin-bottom:0.45rem;}
.adm-feedback-page{font-size:0.66rem;color:var(--ink3);word-break:break-all;margin-bottom:0.45rem;}
.adm-feedback-page a{color:var(--btext);text-decoration:none;}
.adm-feedback-page a:hover{text-decoration:underline;}
.adm-feedback-context{margin:0.4rem 0 0.48rem;font-size:0.66rem;color:var(--ink3);}
.adm-feedback-context summary{cursor:pointer;color:var(--ink2);}
.adm-feedback-context pre{margin:0.42rem 0 0;padding:0.55rem;border:1px solid var(--border2);background:var(--bg);white-space:pre-wrap;word-break:break-word;color:var(--ink2);font-size:0.62rem;line-height:1.55;}
.adm-feedback-attachments{display:flex;flex-wrap:wrap;gap:0.45rem;}
.adm-feedback-attachment{display:inline-flex;align-items:center;gap:0.38rem;max-width:100%;border:1px solid var(--border);border-radius:9px;background:var(--bg);padding:0.28rem 0.5rem;font-size:0.66rem;color:var(--ink2);text-decoration:none;}
.adm-feedback-attachment:hover{border-color:rgba(23,21,15,0.2);color:var(--ink);}
.adm-feedback-attachment span{color:var(--ink3);font-size:0.6rem;}
.adm-feedback-attachment img{width:44px;height:32px;border-radius:6px;object-fit:cover;background:#fff;flex:none;}
.adm-feedback-file-icon{width:28px;height:28px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:0.46rem;font-weight:600;letter-spacing:0;color:var(--ink3);flex:none;}
.adm-feedback-actions{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.55rem;}
.adm-feedback-action{border:1px solid var(--border);background:var(--bg);color:var(--ink2);border-radius:var(--rs);padding:0.28rem 0.55rem;font-family:inherit;font-size:0.64rem;cursor:pointer;}
.adm-feedback-action:hover:not(:disabled){border-color:rgba(23,21,15,0.24);color:var(--ink);}
.adm-feedback-action:disabled{opacity:0.45;cursor:default;}
.adm-status-pill.open{background:var(--rbg);color:var(--rtext);}
.adm-status-pill.reviewed{background:var(--abg);color:var(--atext);}
.adm-status-pill.resolved{background:var(--gbg);color:var(--gtext);}
.adm-status-pill.ignored{background:var(--bg);color:var(--ink3);}
body.adm-feedback-preview-open{overflow:hidden;}
.adm-feedback-preview-modal[hidden]{display:none;}
.adm-feedback-preview-modal{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:1.25rem;}
.adm-feedback-preview-backdrop{position:absolute;inset:0;background:rgba(15,14,10,0.64);}
.adm-feedback-preview-sheet{position:relative;width:min(960px,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);display:flex;flex-direction:column;background:var(--surface);border:1px solid rgba(255,255,255,0.45);box-shadow:0 24px 80px rgba(15,14,10,0.35);}
.adm-feedback-preview-head{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.72rem 0.85rem;border-bottom:1px solid var(--border2);}
.adm-feedback-preview-title{min-width:0;font-size:0.74rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adm-feedback-preview-actions{display:flex;align-items:center;gap:0.45rem;flex:none;}
.adm-feedback-preview-actions a,.adm-feedback-preview-actions button{height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--bg);color:var(--ink2);font-family:inherit;font-size:0.66rem;text-decoration:none;cursor:pointer;}
.adm-feedback-preview-actions a{padding:0 0.65rem;}
.adm-feedback-preview-actions button{width:32px;font-size:1rem;line-height:1;}
.adm-feedback-preview-actions a:hover,.adm-feedback-preview-actions button:hover{border-color:rgba(23,21,15,0.24);color:var(--ink);}
.adm-feedback-preview-sheet img{display:block;width:100%;max-height:calc(100dvh - 6rem);object-fit:contain;background:#fff;}

/* Toast stack: container positions at bottom-center; each toast is a
   child in a flex column. Multiple toasts coexist, old ones drift up as
   new ones are appended below. pointer-events:none on container prevents
   the empty gap area from stealing clicks. */
.rec-toast-stack{position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;z-index:1000;pointer-events:none;}
.rec-toast{display:flex;align-items:center;gap:0.8rem;padding:0.6rem 1rem;background:var(--ink);color:#fff;border-radius:99px;font-size:0.72rem;font-family:'Geist',sans-serif;box-shadow:0 6px 20px rgba(0,0,0,0.18);transition:opacity 0.3s;pointer-events:auto;}
.rec-toast-undo{background:transparent;border:none;color:#fff;font-family:'Geist',sans-serif;font-size:0.72rem;font-weight:500;cursor:pointer;padding:0 0.2rem;border-left:1px solid rgba(255,255,255,0.25);padding-left:0.8rem;}
.rec-toast-undo:hover{opacity:0.75;}

/* ── Mobile (≤640px) ── Nav + chat panel adaptation. Cards / forms
   are still desktop-sized; those are follow-ups. */
.ntab{white-space:nowrap;}
@media (max-width: 640px) {
  :root{--nav-h:52px;}
  html{height:auto;}
  body{display:block;height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto;}
  nav{position:sticky;top:0;padding:0 0.55rem;height:var(--nav-h);gap:0.35rem;}
  .brand{font-size:1rem;flex-shrink:0;}
  .nav-c{display:flex;flex:1;justify-content:center;gap:0.05rem;min-width:0;}
  .ntab{padding:0.42rem 0.42rem;font-size:0.72rem;}
  .nav-r{gap:0.4rem;}
  .panel-btn{padding:0.32rem 0.55rem;font-size:0.7rem;}
  .usage-ring{display:none;}
  .adm-feedback-preview-modal{padding:0.5rem;}
  .adm-feedback-preview-sheet{width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem);}
  .adm-feedback-preview-head{padding:0.58rem 0.65rem;}
  .adm-feedback-preview-actions a{padding:0 0.5rem;}
  .adm-feedback-preview-sheet img{max-height:calc(100dvh - 5rem);}
  .main{min-height:calc(100dvh - var(--nav-h));overflow:visible;display:flex;justify-content:center;}
  /* Panel goes full-width instead of the desktop 420px slide-in, which
     on a 393px iPhone overshot the viewport left-edge by 27px and
     pushed main content off-screen. Top follows --nav-h so the nav is
     still reachable — users close the panel via the 助手 button.
     margin-right:0 stops `.main.shifted` from scrolling the content
     out when the panel opens. */
  .panel{top:var(--nav-h);bottom:auto;width:100vw;height:calc(100dvh - var(--nav-h));border-left:none;}
  .main.shifted{margin-right:0;}
  .chat-foot-wrap{padding-bottom:calc(0.75rem + env(safe-area-inset-bottom));background:var(--surface);}
  .msgs{padding-bottom:1.1rem;}
  .pv-head{padding:1rem 1.25rem 0.8rem;}
  .pv-new{display:none;}
  .pv-new-float{position:absolute;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:30;display:inline-flex;align-items:center;gap:0.45rem;height:46px;padding:0 1rem;border:0;border-radius:999px;background:var(--ink);color:#fff;font-family:'Geist',sans-serif;font-size:0.78rem;font-weight:500;box-shadow:0 10px 28px rgba(23,21,15,0.22);cursor:pointer;}
  .pv.task-mode .pv-new-float{display:none;}
  .pv-new-ico{font-size:1rem;line-height:1;}
  .sess-scroll{padding:0.55rem 1.15rem calc(7.25rem + env(safe-area-inset-bottom));}
  .chat-section{margin-bottom:1.15rem;}
  .chat-tasks-section{margin-bottom:1.45rem;}
  .chat-section-title{padding:0.58rem 0 0.5rem;font-size:0.76rem;color:var(--ink);font-weight:500;}
  .chat-tasks{gap:0.16rem;}
  .chat-task{height:38px;padding:0 0.1rem;font-size:0.76rem;}
  .chat-task-ico{width:18px;height:18px;font-size:0.72rem;}
  .task-setup{margin:0 0 1.35rem;padding:0.85rem 0 1rem;}
  .task-setup-title{font-size:0.78rem;}
  .task-setup-hint{font-size:0.7rem;margin-bottom:0.7rem;}
  .task-job-option{min-height:42px;padding:0.35rem 0.1rem;font-size:0.76rem;}
  .task-job-option input{width:16px;height:16px;}
  .task-picker-toggle{font-size:0.72rem;margin-bottom:0.65rem;}
  .task-picker-input{height:40px;font-size:0.76rem;border-radius:12px;}
  .task-picker-state{font-size:0.68rem;padding-top:0.38rem;}
  .task-picker-results{max-height:6.4rem;}
  .task-setup-primary,.task-setup-secondary,.task-setup-link{height:36px;font-size:0.72rem;padding:0 0.9rem;}
  .sitem,.sitem.has-meta{min-height:50px;padding:0.44rem 1.8rem 0.44rem 0;border-radius:8px;margin-bottom:0.2rem;}
  .sitem-title{font-size:0.78rem;font-weight:400;}
  .sitem-pre{display:none;}
  .sitem-more{right:0;width:30px;color:rgba(23,21,15,0.26);}
  .sitem-more:hover,.sitem.menu-open .sitem-more{background:rgba(23,21,15,0.04);}
  .sitem-menu{right:0;}
  .ctx-card{width:100%;}
  .ctx-card-title{max-width:100%;}
  .chat-empty{padding-top:1rem;}
  .chat-empty-prompts{grid-template-columns:1fr;max-width:320px;}

  /* Job-mini cards: stack vertically on mobile. On desktop the horizontal
     layout (title · company | score | [yes][no]) forces title to wrap 3
     lines at 390px, and the action buttons end up ~22px tall — below the
     Apple HIG 40-44px tap-target threshold, easy to mis-tap between
     "感兴趣" and "跳过". The mis-tap cost is high because skipping
     requires a separate reset flow to recover.

     New layout: info block on top (title/meta/tags), score floats to the
     top-right corner next to the ctx-add (+), action buttons become a
     full-width row underneath with flex:1 each so either 2 buttons split
     half-half (briefing + recommend.new) or a single reset button fills
     the row (recommend.interested/skipped). */
  .jm-row{flex-direction:column;align-items:stretch;gap:0.4rem;padding:0.8rem 0.9rem;}
  .jm-l{padding-right:1.8rem;}  /* reserve room for absolute .ctx-add (20px + 8px right) */
  .jm-r{width:100%;margin-top:0.2rem;align-items:stretch;}
  .jm-see-detail{align-self:flex-start;}
  .jm-acts{display:flex;gap:0.4rem;width:100%;}
  .jm-btn{flex:1;padding:0.45rem 0.9rem;font-size:0.75rem;min-height:36px;}

  /* Visual hierarchy rebalance: the 40px full-width buttons were
     outweighing the 14.4px title, turning cards into "tap to choose"
     rather than "read then decide". Boosting title/meta and softening
     the primary action (gbg/gtext is the existing brand green,
     already used for tg tag + done-toast) puts the content back on
     top without shrinking the tap target. */
  .jm-name{font-size:0.92rem;}
  .jm-meta{font-size:0.72rem;}
  .jm-btn.jm-yes{background:var(--gbg);color:var(--gtext);}
  .jm-match-age{top:-0.42rem;right:0.7rem;font-size:0.6rem;}
  .page-briefing .jm-dot-row,.page-recommend .jm-dot-row{display:none;}
  .page-recommend .jm-reason-text{-webkit-line-clamp:1;}
  .page-recommend .jm-ai{padding:0.45rem 0.9rem;}

  /* ── Admin pages on mobile ──
     Admin is a secondary surface — target is "legible + operable on a
     phone", not polished. Strategy: tables horizontal-scroll rather
     than restructure (scroll trumps wrapped half-unreadable cells);
     KPI grid halves 4→2; funnel/kv key columns tighten; detail grid
     collapses to 1 column; page paddings shrink. All wrapped in the
     same mobile @media so the desktop admin layout is untouched. */
  .admin-wrap .page{padding:1.2rem 1rem 0;}
  .admin-subnav{padding:0 1rem;gap:0.8rem;flex-wrap:wrap;}
  .asn-tab{padding:0.45rem 0.1rem;}
  .adm-title{font-size:1.3rem;}
  .adm-kpis{grid-template-columns:repeat(2,1fr);gap:0.5rem;}
  .adm-kpi{padding:0.75rem;}
  .adm-kpi-value{font-size:1.3rem;}
  .adm-kpi-label{font-size:0.58rem;margin-bottom:0.3rem;}
  .adm-alerts{padding:0.7rem 0.85rem;}
  .adm-chart-wrap{height:180px;padding:0.7rem;}
  /* Tables: horizontal scroll preserves the row layout. Crushing 5
     columns into 60px each would overlap the CJK labels. */
  .adm-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .adm-row{min-width:560px;}
  .adm-funnel-step{grid-template-columns:80px 1fr 48px;gap:0.5rem;font-size:0.68rem;}
  .adm-kv{grid-template-columns:90px 1fr;padding:0.8rem 0.9rem;font-size:0.68rem;}
  .adm-detail-grid{grid-template-columns:1fr;gap:0.3rem 0;}
  /* Filter bar: search input claims its own row so the selects stay
     tap-friendly above it. */
  .adm-filter-input{min-width:100%;flex-basis:100%;}
  .adm-pagination{padding:0.7rem 0;gap:0.7rem;}

  /* verify-email banner resend button: desktop `padding:2px 10px` gives
     ~20px tap height — too small for finger. Bump to ~32px without
     enlarging the font dramatically. */
  .verify-resend{padding:0.45rem 0.9rem;font-size:0.72rem;min-height:32px;}
  /* Banner itself tightens: the bigger resend button above grows the
     banner vertically, so counter with smaller banner padding + font
     so the banner stays out of the way above the page content. */
  .verify-banner{padding:0.45rem 0.9rem;gap:0.4rem;font-size:0.68rem;}
  .verify-resend-hint{font-size:0.64rem;}
  .feedback-modal{align-items:flex-end;padding:0.7rem;}
  .feedback-card{max-height:calc(100dvh - 1.4rem);border-radius:14px;padding:0.95rem 0.95rem calc(0.95rem + env(safe-area-inset-bottom));}
  .feedback-drop{align-items:stretch;flex-direction:column;}
  .feedback-attach-btn{width:100%;}
  .feedback-actions{flex-direction:column-reverse;}
  .feedback-secondary,.feedback-submit{width:100%;height:38px;}
  .feedback-chip-name{max-width:230px;}

  /* Non-admin page container: admin already ran 2rem → 1rem via
     `.admin-wrap .page`; this applies the same tightening to every
     other logged-in page (briefing / recommend / settings / onboarding).
     Selector specificity keeps admin's rule winning (0,2,0 > 0,1,0). */
  .page{padding:1.2rem 1rem 0;}
  .page::after{height:calc(3.5rem + env(safe-area-inset-bottom));}
  .page-recommend,.page-profile{max-width:800px;}
  .rec-head{flex-direction:column;gap:0.75rem;}
  .rec-scan-utility{align-self:flex-start;flex-wrap:wrap;white-space:normal;}
  .rec-toolbar{align-items:flex-start;flex-direction:column;gap:0.6rem;}
  .rec-chips{flex-wrap:wrap;}
  .briefing-fold summary{align-items:center;flex-direction:row;gap:0.55rem;}
  .briefing-fold summary small{display:none;}
  .profile-layout{display:flex;flex-direction:column;align-items:stretch;}
  .profile-main-col{order:0;}
  .profile-side-col{display:contents;}
  .profile-identity-top{align-items:flex-start;flex-direction:column;}
  .profile-identity-actions{align-items:flex-start;flex-wrap:wrap;gap:0.5rem;}
  .profile-sticky-summary{position:static;order:-1;}
  .profile-read-title{font-size:0.82rem;}
  .profile-snapshot-actions{flex-direction:column;align-items:flex-start;}
  .profile-modal-backdrop{align-items:flex-end;padding:0;background:rgba(23,21,15,0.32);}
  .profile-modal-sheet{width:100%;max-height:88vh;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;}
  .profile-modal-head{padding:1rem 1rem 0.85rem;}
  .profile-modal-body{padding:1rem 1rem 0;}
  .profile-modal-sheet .profile-target-row{grid-template-columns:1fr;}
  .profile-modal-sheet .profile-form-actions,.profile-modal-sheet .refine-actions{position:sticky;bottom:0;z-index:2;justify-content:flex-start;flex-wrap:wrap;background:var(--surface);border-top:1px solid var(--border2);margin:1rem -1rem 0;padding:0.85rem 1rem 1rem;}
  .profile-modal-sheet .profile-role-groups{max-height:34vh;}

  /* Settings form: flex-wrap was scattering [select][save-btn][hint]
     across 3 uneven rows. Stack vertically so everything flows cleanly
     down one column and save + hint stay visually associated. */
  .settings-form{flex-direction:column;align-items:flex-start;gap:0.6rem;}
  .settings-form .form-group{min-width:0;width:100%;}
  .profile-target-row{grid-template-columns:1fr;}
  .profile-form-actions{align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:0.55rem;}
  .refine-grid{grid-template-columns:1fr;gap:18px;}
}

/* Keep the full wordmark and navigation readable on narrow phones. */
@media (max-width:400px){
  :root{--nav-h:84px;}
  nav{flex-wrap:wrap;align-content:center;row-gap:0;}
  .nav-r{margin-left:auto;}
  .nav-c{order:1;flex:0 0 100%;}
}

/* ── Touch devices ──
   Reveal affordances that were gated behind :hover on desktop, AND
   enlarge the chat input so iOS Safari doesn't auto-zoom on focus
   (<16px inputs trigger the zoom-to-readable behaviour).

   The compound query `(hover: none), (pointer: coarse)` is intentional:
   iPad Safari (iOS 13+) defaults to a desktop user-agent and reports
   `hover: hover` even though the device has no hover capability — so
   `(hover: none)` alone silently skips iPad. `pointer: coarse` covers
   touch input precision and is correctly reported on iPad, iPhone, and
   Android. The OR keeps iPhones + Android tablets (which DO report
   `hover: none`) working and extends to iPad.

   Side-effect: Windows touch laptops (Surface, Yoga in tablet mode)
   may also match `pointer: coarse` and see these rules. Acceptable —
   those users do tap the screen. Pure mouse-driven desktops match
   neither clause and are untouched. */
@media (hover: none), (pointer: coarse) {
  .ctx-add{opacity:1;}
  .cinput{font-size:16px;}
  .task-picker-input{font-size:16px;}
  /* Chat send button: desktop 24×24 is fine for a mouse cursor but
     well below finger tap size. Round button grows to 36×36 to match
     the enlarged .cinput row height and sit as a proper partner. */
  .csend{width:36px;height:36px;font-size:0.8rem;}
}

/* ── Onboarding step 2: AI-led role picker (v2) ──
   Replaces the old flat "all categories equal" list with an AI-hero
   typography block + primary category expanded + others collapsed.
   Added as a separate class namespace (.ai-id, .meta-row, .sub-cat,
   .other-*, .not-quite, .reset-*) so no existing onboarding class
   is touched — preserves locale/settings pages' look. */
.ai-id{display:flex;align-items:flex-start;gap:0.75rem;margin-bottom:1.4rem;}
.ai-id-avatar{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-top:0.15rem;}
.ai-id-text{flex:1;display:flex;flex-direction:column;gap:0.1rem;min-width:0;}
.ai-id-lead{font-size:0.7rem;color:var(--ink2);line-height:1.4;}
.ai-id-role-row{display:flex;align-items:baseline;gap:0.55rem;flex-wrap:wrap;}
.ai-id-role{font-size:1.2rem;font-weight:500;color:var(--ink);line-height:1.25;letter-spacing:-0.01em;}
.not-quite{font-size:0.68rem;color:var(--ink3);text-decoration:underline dashed;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer;background:none;border:none;font-family:inherit;padding:0;transition:color 0.15s;}
.not-quite:hover{color:var(--ink);}

.meta-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:0.5rem;margin-bottom:0.75rem;border-bottom:1px solid var(--border2);}
.meta-cat{font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink3);font-weight:500;}
.meta-count{font-size:0.66rem;color:var(--ink3);font-variant-numeric:tabular-nums;transition:color 0.2s,transform 0.2s;}
.meta-count.cap-flash{color:#b22;animation:capShake 0.4s ease;}

.sub-cat{margin-top:1rem;}
.sub-cat-label{font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink3);font-weight:500;margin-bottom:0.4rem;padding-bottom:0.35rem;border-bottom:1px solid var(--border2);}

.other-wrap{margin-top:1.3rem;}
.other-toggle{display:inline-flex;align-items:center;gap:0.3rem;padding:0.35rem 0;color:var(--ink2);cursor:pointer;font-size:0.72rem;user-select:none;background:none;border:none;font-family:inherit;transition:color 0.15s;}
.other-toggle:hover{color:var(--ink);}
.other-chev{color:var(--ink3);transition:transform 0.25s;font-family:-apple-system,sans-serif;font-size:0.82rem;}
.other-wrap.open .other-chev{transform:rotate(180deg);color:var(--ink);}
.other-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease;}
.other-wrap.open .other-body{max-height:1800px;}

.reset-strip{margin-top:0.75rem;padding:0.65rem 0.8rem;background:rgba(220,60,60,0.07);border-radius:var(--rs);display:none;align-items:center;justify-content:space-between;gap:0.55rem;}
.reset-strip.show{display:flex;animation:fadeUp 0.25s ease both;}
.reset-strip-text{font-size:0.7rem;color:#b22;line-height:1.4;flex:1;}
.reset-actions{display:flex;gap:0.35rem;flex-shrink:0;}
.reset-btn{padding:0.3rem 0.75rem;border-radius:99px;border:1px solid rgba(178,34,34,0.3);background:#fff;color:#b22;font-family:inherit;font-size:0.65rem;cursor:pointer;font-weight:500;}
.reset-btn:hover{background:rgba(178,34,34,0.06);}
.reset-btn.dismiss{border-color:transparent;background:transparent;color:var(--ink3);}
.reset-btn.dismiss:hover{color:var(--ink2);}

/* Back button for onboarding step navigation. Uses margin-right:auto
   to push itself to the left within .card-foot (which is flex-end by
   default) so the Next button stays right-aligned without needing to
   touch the shared .card-foot rule. */
.btn-back{margin-right:auto;padding:0.48rem 0.9rem;border:none;background:transparent;font-family:'Geist',sans-serif;font-size:0.76rem;color:var(--ink3);cursor:pointer;transition:color 0.12s;}
.btn-back:hover{color:var(--ink);}