/* hr.css */
/* ReconHire — "Cobalt Light": white and soft gray, blue + violet accents. Bright and easy to read, still cyber. */
@font-face{font-family:"Chakra Petch";font-weight:500;font-display:swap;src:url(../fonts/chakra-petch-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#f4f6fb;--surface:#ffffff;--surface2:#f3f6fc;--raise:#ffffff;
  --text:#0f172a;--muted:#475569;--dim:#64748b;
  --accent:#2563eb;--accent2:#7c3aed;--good:#059669;--bad:#dc2626;--info:#0284c7;--on-accent:#ffffff;
  --line:color-mix(in srgb,var(--text) 10%,transparent);--line2:color-mix(in srgb,var(--text) 16%,transparent);
  --radius:16px;--font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--hfont:"Chakra Petch","IBM Plex Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--maxw:1184px;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.18);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:linear-gradient(color-mix(in srgb,var(--text) 3.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 3.5%,transparent) 1px,transparent 1px);
  background-size:48px 48px;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1100px 520px at 12% -8%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),radial-gradient(900px 480px at 100% 0%,color-mix(in srgb,var(--accent2) 7%,transparent),transparent 70%)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--hfont);font-weight:700;line-height:1.12;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,3.9rem);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.15rem;font-weight:600}
p{text-wrap:pretty}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}
.muted{color:var(--muted)}.dim{color:var(--dim)}.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,28px)}
.hidden,[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.caret{display:inline-block;width:.5em;height:1em;background:currentColor;margin-left:3px;vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- logo / brand ---------- */
.brand{display:flex;align-items:center;gap:10px;color:var(--text);flex:none}
.brand:hover{text-decoration:none}
.logo{width:38px;height:38px;flex:none;overflow:visible}
.logo .halo{transition:stroke-opacity .3s,r .3s}
.brand:hover .logo .halo{stroke-opacity:.85}
.logo{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 45%,transparent))}
.logo .rsweep{transform-box:view-box;transform-origin:32px 32px;animation:rsweep 4.5s linear infinite}
@keyframes rsweep{to{transform:rotate(360deg)}}
.logo .halo{transform-box:view-box;transform-origin:32px 32px;animation:lockon 2.4s ease-in-out infinite}
@keyframes lockon{0%,100%{stroke-opacity:.15}50%{stroke-opacity:.75}}
.brand-text b{background:none}
.brand-text b span{text-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)}
.reduce-motion .logo .rsweep,.reduce-motion .logo .halo{animation:none}
@media (prefers-reduced-motion:reduce){.logo .rsweep,.logo .halo{animation:none}}
.brand-text{display:flex;flex-direction:column;line-height:1.02}
.brand-text b{font:700 1.32rem var(--hfont);letter-spacing:.01em}
.brand-text b span{color:var(--accent)}
.brand-text small{margin-top:4px;font:500 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--accent2) 75%,var(--muted));display:flex;align-items:center;gap:3px}
.brand-text small .caret{width:5px;height:9px;margin:0}

/* ---------- header ---------- */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40}
.head::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.head::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--line2) 20%,var(--line2) 80%,transparent)}
.head-scan{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.head-scan::before{content:"";position:absolute;top:0;bottom:0;width:22%;left:-22%;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);filter:drop-shadow(0 0 6px var(--accent));animation:scanx 7s cubic-bezier(.6,0,.4,1) infinite}
@keyframes scanx{0%{left:-22%}55%,100%{left:100%}}
.head-row{display:flex;align-items:center;gap:16px;height:70px}
.tabs{margin-left:auto;display:flex;align-items:stretch;height:100%;gap:0}
.tabs>a,.tabs>.pop>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:78px;padding:6px 10px 0;height:100%;color:var(--muted);background:none;border:0;cursor:pointer;font:500 .74rem var(--font);white-space:nowrap;transition:color .18s}
.tabs>.pop{display:flex;height:100%}
.tabs .ico{width:23px;height:23px;stroke-width:1.8}
.tabs>a:hover,.tabs>.pop>button:hover{color:var(--text);text-decoration:none}
.tabs>a.on,.tabs>.pop>button.on{color:var(--text)}
.tabs>a.on .ico,.tabs>.pop>button.on .ico{color:var(--accent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 55%,transparent))}
.tabs>a.on::after,.tabs>.pop>button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
.nav-ic{position:relative;display:grid;place-items:center}
.nav-ic .badge,.bottom-bar .badge{position:absolute;top:-6px;left:13px;background:var(--nbadge,#e5484d);color:#fff;box-shadow:0 0 0 2px var(--bg)}
.nav-ic .dot{position:absolute;top:-2px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--nbadge,#e5484d);box-shadow:0 0 0 2px var(--bg)}
.nav-lbl{display:flex;align-items:center;gap:2px}
.nav-lbl .ico{width:12px!important;height:12px!important}
.tabs .sep{width:1px;margin:14px 6px;background:var(--line2)}
.me-btn .me-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font:700 .72rem var(--hfont);color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2))}
.me-btn .me-av img{width:100%;height:100%;object-fit:cover}
.more-menu{min-width:250px}
.more-menu .grp{padding:8px 12px 4px;font:600 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.subnav{display:flex;gap:4px;margin:0 0 18px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;color:var(--muted);font-size:.9rem;font-weight:500;white-space:nowrap}
.subnav a:hover{color:var(--text);text-decoration:none;background:color-mix(in srgb,var(--text) 6%,transparent)}
.subnav a.on{color:var(--text);background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.subnav .badge{margin-left:2px}
.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent2);color:var(--on-accent,#fff);font:700 .68rem/1 var(--font)}
.head-actions{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:var(--muted);background:transparent;border:1px solid var(--line);cursor:pointer;transition:color .2s,border-color .2s,transform .2s}
.icon-btn:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-1px)}
.icon-btn .badge{position:absolute;top:-6px;right:-6px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 .95rem var(--hfont);color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));border:0;cursor:pointer}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:6px;border-radius:14px;background:var(--surface2);border:1px solid var(--line2);box-shadow:0 20px 50px -20px #000;z-index:60}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:9px;color:var(--text);background:none;border:0;cursor:pointer;font-size:.93rem;text-align:left}
.menu a:hover,.menu button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);text-decoration:none}
.menu .who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.menu .who b{display:block;color:var(--text);font-size:.95rem}
.pop{position:relative}
.notes{width:min(360px,92vw);max-height:420px;overflow:auto}
.note{padding:10px 12px;border-radius:9px;font-size:.88rem}
.note.unread{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.note time{display:block;color:var(--dim);font-size:.75rem;margin-top:2px}

/* mobile bottom bar */
.bottom-bar{display:none}
/* Narrower desktop windows: the bar stays at the top and just gets tighter */
@media (max-width:1180px) and (min-width:641px){.tabs>a,.tabs>.pop>button{min-width:64px;padding:6px 6px 0;font-size:.7rem}.brand-text small{display:none}}
@media (max-width:900px) and (min-width:641px){.tabs>a,.tabs>.pop>button{min-width:54px;padding:6px 4px 0;font-size:.66rem}}
@media (max-width:780px) and (min-width:641px){.brand-text{display:none}}
/* Phones: the same tabs move to a bottom bar; "Me" stays at the top */
@media (max-width:640px){
  .tabs>a,.tabs>.pop.more-pop{display:none}
  .tabs{margin-left:auto}
  .tabs .sep{display:none}
  .bottom-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line2)}
  .bottom-bar a,.bottom-bar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 1px;border-radius:10px;color:var(--muted);font:500 .64rem var(--font);position:relative;background:none;border:0;cursor:pointer;min-width:0}
  .bottom-bar .ico{width:22px;height:22px}
  .bottom-bar a.on,.bottom-bar button.on{color:var(--accent)}
  .bottom-bar a:hover{text-decoration:none}
  .bottom-bar .badge{left:calc(50% + 2px);top:0}
  .bottom-bar .more-menu{bottom:calc(100% + 8px);top:auto;right:6px}
  body.app{padding-bottom:76px}
}
@media (max-width:420px){.brand-text small{display:none}}

/* ---------- buttons, inputs, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--accent2)));color:var(--on-accent,#fff);border:0;padding:11px 18px;border-radius:12px;font:600 .95rem/1.2 var(--font);cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 12px 30px -14px var(--accent)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn.quiet{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.btn.quiet:hover{background:color-mix(in srgb,var(--text) 10%,transparent);box-shadow:none}
.btn.danger{background:color-mix(in srgb,var(--bad) 16%,transparent);color:#b91c1c;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,transparent)}
.btn.good{background:linear-gradient(135deg,#3ddc84,#1fb86a);color:#03140a}
.btn.sm{padding:7px 12px;font-size:.85rem;border-radius:10px}
.btn.lg{padding:15px 26px;font-size:1.04rem;border-radius:14px}
.btn .ico{width:17px;height:17px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.field>span,.label{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:.01em}
.field small{color:var(--dim);font-size:.8rem}
.input,select.input,textarea.input{width:100%;background:color-mix(in srgb,var(--bg) 70%,var(--surface));border:1px solid var(--line2);border-radius:11px;padding:11px 13px;color:var(--text);transition:border-color .2s,box-shadow .2s;min-width:0}
textarea.input{min-height:140px;resize:vertical;line-height:1.55}
.input:focus{outline:none;border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.input::placeholder{color:var(--dim)}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.chip{display:inline-flex;align-items:center;gap:5px;font:500 .78rem/1 var(--font);padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted);white-space:nowrap}
.chip.have{background:color-mix(in srgb,var(--good) 14%,transparent);color:#047857}
.chip.miss{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2);border:0}
.chip.warn{background:color-mix(in srgb,var(--bad) 14%,transparent);color:#b91c1c}
.chip.amber{background:color-mix(in srgb,var(--accent) 14%,transparent);color:color-mix(in srgb,var(--accent) 85%,var(--text))}
.chip.info{background:color-mix(in srgb,var(--info) 13%,transparent);color:#0369a1}
.chip .ico{width:13px;height:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.pick{cursor:pointer;user-select:none;border:0;padding:8px 12px;font-size:.84rem;transition:background .15s,color .15s,box-shadow .15s}
.pick:hover{color:var(--text)}
.pick.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.seg{display:inline-flex;padding:3px;border-radius:12px;background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid var(--line)}
.seg button{background:none;border:0;padding:7px 13px;border-radius:9px;color:var(--muted);cursor:pointer;font-size:.88rem;font-weight:500}
.seg button.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.92rem}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch i{width:40px;height:23px;border-radius:12px;background:color-mix(in srgb,var(--text) 14%,transparent);position:relative;transition:background .2s;flex:none}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:var(--text);transition:transform .2s}
.switch input:checked+i{background:var(--accent)}
.switch input:checked+i::after{transform:translateX(17px);background:#1a0f00}
.switch input:focus-visible+i{outline:2px solid var(--accent2);outline-offset:2px}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 .78rem/1.3 var(--mono);color:var(--accent2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.live{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent);animation:ping 2s infinite;flex:none}
@keyframes ping{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- cards / panels ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.card.pad-lg{padding:clamp(20px,3vw,32px)}
.card h3{margin:0 0 4px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head p{margin:0;color:var(--muted);font-size:.9rem}
.stack{display:flex;flex-direction:column;gap:16px}
.err{color:#b91c1c;background:color-mix(in srgb,var(--bad) 12%,transparent);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);padding:10px 13px;border-radius:11px;font-size:.9rem}
.okmsg{color:#047857;background:color-mix(in srgb,var(--good) 10%,transparent);border:1px solid color-mix(in srgb,var(--good) 30%,transparent);padding:10px 13px;border-radius:11px;font-size:.9rem}
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty>.ico{width:40px;height:40px;color:var(--accent);margin-bottom:12px;stroke-width:1.5}
.empty p{max-width:46ch;margin:6px auto 18px;line-height:1.6}
.empty .btn{margin:0 auto}
.empty h3{color:var(--text)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:100;padding:12px 18px;border-radius:12px;background:var(--raise);border:1px solid var(--line2);box-shadow:0 20px 50px -18px #000;transition:opacity .25s,transform .25s;font-size:.92rem;max-width:min(560px,92vw)}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:920px){.toast{bottom:90px}}

/* score ring */
.ring{position:relative;flex:none;display:grid;place-items:center}
.ring svg{transform:rotate(-90deg);display:block}
.ring .track{stroke:color-mix(in srgb,var(--text) 10%,transparent)}
.ring .val{transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.2,1)}
.ring b{position:absolute;font:700 1rem var(--hfont)}
.ring.lg b{font-size:1.9rem}
.ring.good .val{stroke:var(--good)}.ring.good b{color:#047857}
.ring.mid .val{stroke:var(--accent)}.ring.mid b{color:var(--accent)}
.ring.low .val{stroke:var(--accent2)}.ring.low b{color:color-mix(in srgb,var(--accent2) 80%,var(--text))}

/* ---------- app layout ---------- */
.page{padding-top:24px;padding-bottom:48px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:0}
.page-head p{margin:4px 0 0;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.stat{padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--accent),transparent 80%)}
.stat b{display:block;font:700 1.6rem/1.1 var(--hfont)}
.stat span{font-size:.8rem;color:var(--muted)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .search{flex:1 1 220px;position:relative}
.toolbar .search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim)}
.toolbar .search input{padding-left:38px}
.toolbar select.input{width:auto}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
@media (max-width:1060px){.split{grid-template-columns:1fr}.split .detail-col{display:none}.split.show-detail .list-col{display:none}.split.show-detail .detail-col{display:block}}
.list{display:flex;flex-direction:column;gap:10px}
.jobcard{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:start;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:border-color .2s,transform .15s,background .2s;position:relative}
.jobcard:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.jobcard.on{border-color:color-mix(in srgb,var(--accent) 70%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.jobcard.dim{opacity:.55}
.jobcard .t{font:600 1rem/1.3 var(--font);color:var(--text);margin:0 0 2px;overflow-wrap:anywhere}
.jobcard .c{font-size:.86rem;color:var(--muted);margin:0 0 8px}
.jobcard .chips{gap:5px}
.jobcard .why{font-size:.8rem;color:var(--dim);margin-top:8px}
.check{width:20px;height:20px;margin-top:10px;accent-color:var(--accent);cursor:pointer}
.new-dot{position:absolute;top:12px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.detail{position:sticky;top:86px;max-height:calc(100vh - 104px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 55%,transparent) transparent}

.detail.packet{position:static;max-height:none;overflow:visible}
.detail.packet .ptabs{position:sticky;top:calc(70px + env(safe-area-inset-top,0px));z-index:6;background:var(--surface);margin-left:-20px;margin-right:-20px;padding:6px 20px 0}
.detail .back{display:none}
@media (max-width:1060px){.detail{position:static;max-height:none}.detail .back{display:inline-flex}}
.detail-top{display:flex;gap:16px;align-items:flex-start}
.detail h2{font-size:1.45rem;margin:0 0 4px}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.why-list{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:.9rem}
.why-list li{display:flex;gap:8px;align-items:flex-start}
.why-list .ico{width:16px;height:16px;margin-top:3px;color:var(--good)}
.why-list li.flag .ico{color:var(--bad)}
.desc{white-space:pre-wrap;font-size:.92rem;line-height:1.65;color:color-mix(in srgb,var(--text) 86%,var(--muted));border-top:1px dashed var(--line2);padding-top:14px;margin-top:14px;overflow-wrap:anywhere}
.section-t{font:600 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent2);margin:18px 0 8px}
.bulkbar{position:sticky;bottom:16px;z-index:30;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 14px;border-radius:14px;background:var(--raise);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 18px 40px -16px #000;margin-top:12px}
@media (max-width:920px){.bulkbar{bottom:86px}}

/* radar spinner + recon button */
.recon-btn{position:relative;overflow:hidden}
.radar-mini{width:20px;height:20px;border-radius:50%;border:2px solid currentColor;position:relative;flex:none}
.radar-mini::after{content:"";position:absolute;inset:2px;border-radius:50%;background:conic-gradient(from 0deg,currentColor,transparent 40%)}
.scanning .radar-mini::after{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-overlay{display:grid;place-items:center;padding:40px 10px;text-align:center}
.scope{width:180px;height:180px;border-radius:50%;position:relative;border:1px solid var(--line2);margin:0 auto 18px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 10%,transparent),transparent)}
.scope::before,.scope::after{content:"";position:absolute;background:var(--line)}
.scope::before{left:50%;top:0;bottom:0;width:1px}.scope::after{top:50%;left:0;right:0;height:1px}
.scope i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent 25%);animation:spin 2.2s linear infinite}
.scope b{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:blip 2.2s infinite}
@keyframes blip{0%,100%{opacity:.2}50%{opacity:1}}

/* queue + packet */
.qitem{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:13px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.qitem:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.qitem.on{border-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.qitem .t{font-weight:600;font-size:.95rem}
.qitem .c{font-size:.82rem;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font:600 .72rem/1 var(--font);white-space:nowrap}
.pill.ready{background:color-mix(in srgb,var(--good) 15%,transparent);color:#047857}
.pill.queued{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.pill.error{background:color-mix(in srgb,var(--bad) 15%,transparent);color:#b91c1c}
.pill.submitting{background:color-mix(in srgb,var(--info) 15%,transparent);color:#0369a1}
.pill.submitting::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:blip 1s infinite}
.pill.applied{background:color-mix(in srgb,var(--info) 15%,transparent);color:#0369a1}
.pill.queued::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:blip 1s infinite}
.ptabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);margin:14px 0 14px}
.ptabs button{flex:1 1 auto;text-align:center;background:none;border:0;padding:10px 10px;font-size:.92rem;color:var(--muted);cursor:pointer;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ptabs button.on{color:var(--text);border-bottom-color:var(--accent)}
textarea.doc-edit{font-family:var(--mono);font-size:.84rem;min-height:420px}
textarea.letter-edit{min-height:380px}
.answer{padding:12px 0;border-bottom:1px dashed var(--line)}
.answer .q{font-weight:600;font-size:.92rem;margin-bottom:6px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.answer textarea{min-height:80px}
.apply-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:16px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--surface2));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.changes{margin:0;padding-left:18px;font-size:.88rem;color:var(--muted)}
.changes li{margin-bottom:4px}

/* tracker */
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:1100px){.board{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.board{grid-template-columns:1fr}}
.col{background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:200px;display:flex;flex-direction:column;gap:8px}
.col h4{font:600 .74rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:4px 4px 6px;display:flex;justify-content:space-between;gap:6px;line-height:1.35}
.col{min-width:0}.tcard{min-width:0;overflow-wrap:anywhere}
.col.drop{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.tcard{padding:11px 12px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);cursor:grab;font-size:.88rem}
.tcard:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.tcard b{display:block;font-weight:600;font-size:.9rem;margin-bottom:2px}
.tcard .meta{color:var(--dim);font-size:.76rem;display:flex;justify-content:space-between;margin-top:6px}

/* checker */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 16px;border:1.5px dashed var(--line2);border-radius:14px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;color:var(--muted)}
.drop:hover,.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.drop.ok{border-style:solid;border-color:color-mix(in srgb,var(--good) 60%,transparent);color:#047857}
.drop .ico{width:30px;height:30px;color:var(--accent);stroke-width:1.6}
.drop b{color:var(--text)}
.scorecards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:720px){.scorecards{grid-template-columns:1fr}}
.scorecard{display:flex;gap:16px;align-items:center}
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 18px}
@media (max-width:900px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.paths{grid-template-columns:1fr}}
.path{display:grid;grid-template-columns:minmax(0,1fr) 80px 30px;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:none;border:1px solid transparent;cursor:pointer;text-align:left;color:var(--text);font-size:.9rem}
.path:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.path.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.path span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.path b{text-align:right;font-family:var(--hfont)}
.bar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.issue{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.issue .ico{width:17px;height:17px;margin-top:3px}
.issue.bad .ico{color:var(--bad)}.issue.warn .ico{color:var(--accent)}.issue.tip .ico{color:var(--info)}
.issue ul{margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:.84rem}

/* wizard */
.wizard{max-width:820px;margin:28px auto}
.steps{display:flex;gap:8px;margin-bottom:18px}
.steps i{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.steps i.on{background:linear-gradient(90deg,var(--accent2),var(--accent))}
.track-block{margin-bottom:14px}
.track-block h4{font:600 .8rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}

/* auth */
.auth{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:30px 16px}
.auth .card{width:min(440px,100%);padding:30px}
.auth h1{font-size:1.7rem;margin-bottom:6px}
.auth .logo{width:54px;height:54px;margin-bottom:14px}
.codebox{letter-spacing:.4em;text-align:center;font:600 1.4rem var(--mono)}
.qr{background:#e8edf6;border-radius:12px;padding:10px;width:200px;margin:10px 0}
.qr svg{display:block;width:100%;height:auto}
.recovery{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-family:var(--mono);font-size:.9rem;padding:12px;border-radius:12px;background:var(--bg);border:1px solid var(--line2)}

/* modal */
.modal-bg{position:fixed;inset:0;z-index:80;background:rgba(5,4,2,.7);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px}
.modal{width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line2);border-radius:18px;padding:24px;box-shadow:0 30px 80px -30px #000}
.modal h3{font-size:1.25rem}

/* tables (admin) */
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{text-align:left;color:var(--muted);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;padding:8px;border-bottom:1px solid var(--line2)}
.table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap{overflow-x:auto}
.src{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px dashed var(--line)}
.dotst{width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--dim)}
.dotst.ok{background:var(--good);box-shadow:0 0 8px var(--good)}.dotst.bad{background:var(--bad)}

/* demo banner (preview only) */
.demo-banner{background:linear-gradient(90deg,color-mix(in srgb,var(--accent2) 25%,transparent),color-mix(in srgb,var(--accent) 18%,transparent));border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);font-size:.84rem;text-align:center;padding:7px 12px}

/* ================= LANDING ================= */
.l-nav{display:flex;gap:4px;margin-left:auto}
.l-nav a{color:var(--muted);padding:8px 12px;border-radius:10px;font-size:.93rem;font-weight:500}
.l-nav a:hover{color:var(--text);text-decoration:none;background:color-mix(in srgb,var(--text) 6%,transparent)}
@media (max-width:900px){.l-nav{display:none}.head-row .head-actions{margin-left:auto}}
.hero{position:relative;padding:clamp(36px,7vw,90px) 0 clamp(40px,6vw,70px);overflow:hidden}
.hero::before{content:"";position:absolute;right:-12%;top:-25%;width:75%;aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:color-mix(in srgb,var(--text) 82%,var(--muted));max-width:40em;margin:0 0 26px}
.cmd{display:inline-flex;align-items:center;gap:8px;font:500 .86rem var(--mono);color:var(--muted);padding:7px 12px;border-radius:10px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--line);margin-bottom:18px}
.cmd b{color:var(--accent);font-weight:500}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;color:var(--muted);font-size:.88rem}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust .ico{width:15px;height:15px;color:var(--good)}
.scope-art{position:relative;aspect-ratio:1;width:min(100%,470px);margin:0 auto}
.scope-art .rings,.scope-art .rings i{position:absolute;border-radius:50%}
.scope-art .rings{inset:0;border:1px solid var(--line2)}
.scope-art .rings i{border:1px solid var(--line)}
.scope-art .rings i:nth-child(1){inset:16%}.scope-art .rings i:nth-child(2){inset:32%;border-style:dashed}.scope-art .rings i:nth-child(3){inset:-7%;border-color:color-mix(in srgb,var(--text) 5%,transparent)}
.scope-art .rings::before,.scope-art .rings::after{content:"";position:absolute;background:var(--line)}
.scope-art .rings::before{left:50%;top:0;bottom:0;width:1px}.scope-art .rings::after{top:50%;left:0;right:0;height:1px}
.scope-art .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 38%,transparent),transparent 22%);animation:spin 6s linear infinite;mask:radial-gradient(circle,#000 69%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 69%,transparent 70%)}
.scope-art .core{position:absolute;inset:38%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#1b150b,#0e0b06);border:1px solid var(--line2);box-shadow:0 0 60px -10px color-mix(in srgb,var(--accent) 50%,transparent)}
.scope-art .core .logo{width:56%;height:56%}
.blip{position:absolute;display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:12px;background:color-mix(in srgb,var(--surface2) 92%,transparent);border:1px solid var(--line2);box-shadow:0 14px 30px -14px #000;font-size:.8rem;white-space:nowrap;animation:float 6s ease-in-out infinite}
.blip b{font-weight:600;color:var(--text);display:block;font-size:.84rem}
.blip span{color:var(--muted)}
.blip .sc{font:700 .9rem var(--hfont);color:var(--good);padding:6px 7px;border-radius:9px;background:color-mix(in srgb,var(--good) 12%,transparent)}
.blip .sc.mid{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.blip.b1{top:6%;left:-4%}.blip.b2{top:40%;right:-8%;animation-delay:-2s}.blip.b3{bottom:6%;left:4%;animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:520px){.blip.b1{left:0}.blip.b2{right:0}}
.term{font:500 .82rem/1.7 var(--mono);background:#0a0805;border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 20px 40px -20px #000}
.term-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--dim);font-size:.75rem}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term pre{margin:0;padding:12px 14px;white-space:pre-wrap;color:var(--muted);min-height:150px}
.term .p{color:var(--accent)}.term .g{color:var(--good)}
.band{border-block:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent)}
.band-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 0}
.band-row div b{display:block;font:700 1.9rem/1 var(--hfont);color:var(--accent)}
.band-row div span{color:var(--muted);font-size:.88rem}
@media (max-width:720px){.band-row{grid-template-columns:repeat(2,1fr)}}
.sec{padding:clamp(48px,8vw,96px) 0}
.sec-head{max-width:720px;margin-bottom:34px}
.sec-head p{color:var(--muted);font-size:1.05rem;margin:0}
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
@media (max-width:900px){.how{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.how{grid-template-columns:1fr}}
.how .card{padding:22px}
.how .card::before{counter-increment:s;content:"0" counter(s);display:block;font:700 .8rem var(--mono);color:var(--accent2);margin-bottom:14px}
.how .card p{color:var(--muted);margin:0;font-size:.93rem}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.feat{grid-template-columns:1fr}}
.feat .card{overflow:hidden;transition:transform .2s,border-color .2s}
.feat .card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.feat .card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent2),transparent 80%)}
.feat .fi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);margin-bottom:14px}
.feat .fi .ico{width:22px;height:22px}
.feat p{color:var(--muted);margin:0;font-size:.93rem}
.roles-wrap .seg{margin-bottom:16px;flex-wrap:wrap}
.check-tease{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:860px){.check-tease{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font:600 1.04rem var(--font);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--accent);font:600 1.3rem var(--mono);line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--muted);margin:10px 0 0}
.cta-final{text-align:center;padding:clamp(40px,6vw,70px) 20px;border-radius:24px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--surface);border:1px solid var(--line2)}
.foot{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--dim);font-size:.86rem}
.foot .row{justify-content:space-between}
.foot a{color:var(--muted)}
.cta-final .row{justify-content:center}
/* resume paper preview */
.paper{background:#fbf7ee;color:#1d1a14;border-radius:12px;padding:26px 28px;font:400 .82rem/1.5 "IBM Plex Sans",Calibri,sans-serif;min-height:420px;max-height:640px;overflow:auto;box-shadow:0 20px 40px -24px #000}
.paper h2{font:700 1.35rem var(--font);text-align:center;margin:0 0 4px;color:#111}
.paper h2+p{text-align:center;color:#444;font-size:.76rem}
.paper h3{font:700 .78rem var(--font);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #444;padding-bottom:2px;margin:14px 0 6px;color:#1f2937}
.paper h4{font:600 .82rem var(--font);margin:10px 0 3px;color:#111}
.paper h4 span{font-weight:400;color:#555}
.paper p{margin:0 0 6px}.paper ul{margin:0 0 6px;padding-left:18px}.paper li{margin-bottom:2px}
.paper b{color:#111}

/* ================= PRICING & BILLING ================= */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.price-head{text-align:center;max-width:720px;margin:10px auto 26px}
.price-head h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:10px}
.bill-toggle button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px}
.bill-toggle .save{font:700 .66rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--good) 18%,transparent);color:#047857}
.ptiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;align-items:stretch;max-width:1120px;margin:0 auto}
.ptile{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 90%,transparent),var(--surface));border:1px solid var(--line2);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.ptile::before{content:"";position:absolute;inset:0 0 auto;height:120px;background:radial-gradient(ellipse at 50% -40%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%);pointer-events:none}
.ptile:hover{transform:translateY(-4px);box-shadow:0 26px 60px -30px #000,0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.ptile.hot{border-color:transparent;background:linear-gradient(180deg,#1f190e,var(--surface)) padding-box,conic-gradient(from var(--ang),var(--accent2),var(--accent),#e6eeff,var(--accent),var(--accent2)) border-box;border:1.5px solid transparent;animation:spinang 6s linear infinite;box-shadow:0 30px 80px -40px color-mix(in srgb,var(--accent) 70%,transparent)}
@keyframes spinang{to{--ang:360deg}}
@media (prefers-reduced-motion:reduce){.ptile.hot{animation:none}}
.ptile.mine{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--good) 55%,transparent)}
.pbadge{position:absolute;top:16px;right:16px;font:700 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:6px 10px;border-radius:999px;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px -6px var(--accent)}
.ptile-top h3{font:700 1.5rem var(--hfont);margin:0 0 4px}
.ptile-top p{margin:0;font-size:.92rem}
.pprice{display:flex;align-items:baseline;gap:6px}
.pprice b{font:700 2.8rem/1 var(--hfont);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ptile.hot .pprice b{background:linear-gradient(100deg,var(--accent),#e6eeff 60%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pprice span{color:var(--muted);font-size:.92rem}
.psub{margin:-8px 0 0;color:var(--dim);font-size:.84rem}
.ptile .btn{width:100%}
.plimits{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 0;border-block:1px dashed var(--line2)}
.plimits span{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:.72rem;color:var(--muted);line-height:1.25}
.plimits b{font:700 1.15rem var(--hfont);color:var(--text)}
.pfeat{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.92rem}
.pfeat li{display:flex;gap:9px;align-items:flex-start}
.pfeat .ico{width:16px;height:16px;margin-top:3px;color:var(--good);flex:none}
.passes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;max-width:1120px;margin:0 auto}
.pass{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--line2);transition:border-color .2s}
.pass:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.center-head{text-align:center;margin-left:auto;margin-right:auto}
.pass h3{margin:10px 0 4px}.pass p{margin:0;font-size:.88rem}
.pass .pprice b{font-size:2rem}
.pass-buy{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap;border-top:1px dashed var(--line2);padding-top:14px}
.methods{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:34px auto 10px;max-width:900px}
.mchip{font:600 .78rem/1 var(--font);padding:8px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--line2);color:var(--text)}
.price-foot{text-align:center;color:var(--muted);font-size:.88rem;max-width:760px;margin:10px auto 0}
.price-foot p{display:flex;gap:6px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin:6px 0}
.price-foot .ico{width:15px;height:15px;margin-top:3px}
.payopts{display:grid;gap:8px}
.payopt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:14px;border-radius:13px;background:var(--surface2);border:1.5px solid var(--line2);color:var(--text);cursor:pointer}
.payopt span{color:var(--muted);font-size:.84rem}
.payopt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface2))}
.co-sum{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--surface2));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);flex-wrap:wrap}
.co-sum .pprice b{font-size:1.9rem}
.co-agree{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.9rem;cursor:pointer}
.co-agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex:none}
.plan-now{overflow:hidden}
.plan-now.paid{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),var(--surface)}
.plan-now h2{font-size:2rem;margin:0 0 4px}
.plan-now .row{margin-top:16px}
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.meter .spread{font-size:.88rem;margin-bottom:6px}
.meter .bar{display:block;height:8px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start;max-width:1080px;margin:0 auto}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.quick h3{display:flex;gap:8px;align-items:center}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.legal{max-width:820px;margin:0 auto}
.legal h3{margin-top:22px;font-size:1.08rem}
.legal p{color:color-mix(in srgb,var(--text) 82%,var(--muted));line-height:1.7}
.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin-bottom:10px}
.plan-editor{display:grid;gap:12px}

/* EU/UK withdrawal */
.withdraw-card{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.withdraw-card h3{margin:0 0 6px}
.withdraw-box{max-width:640px;margin:0 auto}
.step-n{display:inline-block;font:600 .74rem/1 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:12px 0 16px}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;overflow-wrap:anywhere}
pre.ack{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:.84rem;line-height:1.55;margin:14px 0}
.co-agree[hidden]{display:none}
@media print{.head,.foot,.bottom-bar,.tabs,.row{display:none!important}}
.withdraw-box + p.dim{max-width:640px;margin-left:auto!important;margin-right:auto!important;text-align:center}
@media (max-width:520px){.head-actions .btn.ghost.sm{display:none}}

/* support inbox */
.inbox-note{display:flex;gap:8px;align-items:center;font-size:.86rem;margin:0 0 12px}
.inbox-note svg{width:16px;height:16px;flex:none}
.bulkbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;margin-bottom:10px;position:sticky;top:76px;z-index:5}
.bulk-all{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem}
.bulk-all input,.tk-pick{width:18px;height:18px;accent-color:var(--accent);flex:none;cursor:pointer}
.bulk-acts{display:flex;gap:6px;flex-wrap:wrap}
.bulk-acts .btn:disabled{opacity:.4;cursor:not-allowed}
.tk{margin-bottom:8px;padding:12px 16px;transition:border-color .2s,background .2s}
.tk.picked{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.tk.unread .tk-title b{color:var(--text);font-weight:800}
.tk:not(.unread) .tk-title b{font-weight:500;color:color-mix(in srgb,var(--text) 80%,var(--muted))}
.tk-head{display:flex;align-items:center;gap:12px}
.tk-dot{width:8px;height:8px;border-radius:50%;flex:none;background:transparent}
.tk-dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.tk-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px 0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.tk-title b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-prev{white-space:nowrap;font-size:.84rem}
.tk-time{font-size:.82rem;white-space:nowrap}
.flagbtn{width:32px;height:32px;border-color:transparent}
.flagbtn svg{width:16px;height:16px}
.flagbtn.on{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.flagbtn.on svg{fill:currentColor}
.tk-body{padding:10px 0 4px 30px}
.thread{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px}
.msg{max-width:85%;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface2)}
.msg.us{align-self:flex-end;background:color-mix(in srgb,var(--accent) 10%,var(--surface2));border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.msg.them{align-self:flex-start}
.msg-meta{font-size:.76rem;color:var(--dim);margin-bottom:4px}
.msg-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.tk-note{margin-top:12px}
.tk-note summary{cursor:pointer;color:var(--muted);font-size:.88rem;margin-bottom:8px}
.my-req{border-bottom:1px dashed var(--line);padding:8px 0}
.my-req summary{display:flex;justify-content:space-between;gap:10px;cursor:pointer;list-style:none}
.my-req summary::-webkit-details-marker{display:none}
.my-req .msg{max-width:100%}
@media (max-width:640px){.tk-body{padding-left:0}.tk-prev{display:none}.bulkbar{top:64px}.msg{max-width:100%}}
@media (max-width:640px){.tk-title .chip{display:none}.inbox-seg{flex-wrap:wrap}.inbox-seg button{white-space:nowrap;padding:8px 10px}.bulkbar{position:static}.bulk-acts .btn{font-size:0;gap:0;padding:8px 10px}.bulk-acts .btn svg{width:17px;height:17px}.tk-head{gap:9px}.tk{padding:10px 12px}}
.partial-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding:10px 14px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 6%,transparent);font-size:.86rem;color:var(--muted)}
.partial-note svg{width:16px;height:16px;flex:none;color:var(--accent)}
.partial-note span:not(.spin){flex:1;min-width:200px}
.partial-note .spin{width:14px;height:14px;border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);border-radius:50%;animation:hrspin .8s linear infinite;flex:none}
@keyframes hrspin{to{transform:rotate(360deg)}}
.live-pill{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin-left:6px;padding:3px 9px;border-radius:999px;font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--good);border:1px solid color-mix(in srgb,var(--good) 35%,transparent);background:color-mix(in srgb,var(--good) 8%,transparent)}
.live-pill i{width:7px;height:7px;border-radius:50%;background:var(--good);animation:livedot 2s ease-in-out infinite}
.live-pill.pulse{animation:livepulse 1.2s ease-out}
@keyframes livedot{50%{opacity:.35}}
@keyframes livepulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.live-pill i,.live-pill.pulse{animation:none}}
.newbar{display:block;width:100%;margin:0 0 10px;padding:9px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font:600 .86rem var(--font);cursor:pointer;text-align:center}
.newbar:hover{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
.newbar[hidden]{display:none}
.idle-left{font-variant-numeric:tabular-nums;color:var(--accent)}
/* questionnaire (/start) */
.quiz-wrap{max-width:760px;margin:0 auto;padding:28px 0 60px}
.quiz-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:10px;min-height:34px}
.quiz-count{font:600 .74rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.quiz-bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:26px}
.quiz-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2,var(--accent)));transition:width .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px var(--accent)}
.quiz-card{animation:quizin .35s ease both}
.quiz-card h1{font-size:clamp(1.6rem,4vw,2.3rem);margin:0 0 8px;line-height:1.15}
.quiz-sub{margin:0 0 22px;font-size:1rem}
@keyframes quizin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.qgrid.compact{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.qopt{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;position:relative;min-height:72px}
.qopt.slim{min-height:58px;padding:12px 14px}
.qopt:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-2px)}
.qopt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qopt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:0 0 0 1px var(--accent),0 8px 28px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.qopt-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;flex:none;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.qopt-ico svg{width:20px;height:20px}
.qopt.slim .qopt-ico{width:32px;height:32px;border-radius:9px}.qopt.slim .qopt-ico svg{width:17px;height:17px}
.qopt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qopt-txt b{font-weight:600;font-size:.98rem}
.qopt-txt small{color:var(--muted);font-size:.84rem;line-height:1.4}
.qopt-mark{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2,var(--line));display:grid;place-items:center;flex:none;color:transparent;transition:all .18s}
.qopt-mark.sq{border-radius:6px}
.qopt-mark svg{width:14px;height:14px}
.qopt.on .qopt-mark{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.quiz-actions{display:flex;justify-content:flex-end;margin-top:24px}
.quiz-next:disabled{opacity:.4;cursor:not-allowed}
.quiz-note{font-size:.84rem;margin:12px 0 0}
.quiz-track{margin-bottom:16px}
.quiz-track h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:.92rem;color:var(--muted)}
.quiz-track h4 svg{width:16px;height:16px;color:var(--accent)}
.quiz-sub-fields{margin-top:18px;padding:16px;border:1px dashed var(--line);border-radius:12px}
.quiz-sub-fields[hidden]{display:none}
.quiz-details{display:flex;flex-direction:column;gap:12px}
.quiz-yn{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.quiz-yn small{display:block;color:var(--muted);font-size:.82rem}
.quiz-yn .seg{flex:none}
.quiz-scan{text-align:center;padding:24px 0 6px}
.radar-big{position:relative;display:block;width:96px;height:96px;margin:0 auto 18px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%)}
.radar-big i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:radarping 2.1s ease-out infinite}
.radar-big i:nth-child(2){animation-delay:.7s}.radar-big i:nth-child(3){animation-delay:1.4s}
@keyframes radarping{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.quiz-steps{list-style:none;padding:0;margin:8px auto 0;max-width:420px}
.quiz-steps li{display:flex;align-items:center;gap:10px;padding:7px 0;color:var(--muted);animation:quizin .3s ease both}
.quiz-steps li svg{width:16px;height:16px;color:var(--good)}
.quiz-summary{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:6px 16px;margin:8px 0 6px}
.qs-row{display:grid;grid-template-columns:auto 90px 1fr;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.qs-row:last-child{border-bottom:0}
.qs-row .qopt-ico{width:30px;height:30px;border-radius:8px}.qs-row .qopt-ico svg{width:15px;height:15px}
.qs-row b{font-weight:600;overflow-wrap:anywhere}
.quiz-signup{margin-top:22px;padding:22px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.quiz-signup h3{margin:0 0 14px}
@media (max-width:640px){.quiz-wrap{padding-top:14px}.qgrid,.qgrid.compact{grid-template-columns:1fr 1fr}.qgrid .qopt:not(.slim){grid-column:1/-1}.qs-row{grid-template-columns:auto 1fr}.qs-row .dim{display:none}.quiz-yn{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.quiz-card,.quiz-steps li,.radar-big i{animation:none}.quiz-bar i{transition:none}}
.quiz-wrap{padding-left:16px;padding-right:16px}
.quiz-top>:first-child{justify-self:start}
@media (max-width:640px){.quiz-count{font-size:.68rem}}
/* resume builder */
.bld-tabs{display:none;margin:-6px 0 14px}
.bld-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.bld-form{display:flex;flex-direction:column;gap:14px;min-width:0}
.bld-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px;min-width:0;max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:thin}
.bld-sec h3{margin:0}
.bld-sub{font-size:.86rem;margin:4px 0 12px}
.bld-sec .field.full{grid-column:1/-1}
.bld-item{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface2)}
.bld-item-head{margin-bottom:10px;gap:10px}
.bld-item-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn.sm{width:32px;height:32px;border-radius:9px}.icon-btn.sm svg{width:15px;height:15px}
.grid2.tight{gap:10px}
.bld-cert{display:grid;grid-template-columns:2fr 90px 130px auto;gap:10px;align-items:end}
.bld-cert .icon-btn{margin-bottom:14px}
.bld-chips{gap:6px;margin-top:6px}
.bld-chips .chip{font-size:.78rem;padding:4px 10px}
.bld-skills{margin-bottom:10px;min-height:8px}
.bld-skills .chip button{background:none;border:0;color:inherit;margin-left:6px;cursor:pointer;font-size:1rem;line-height:1;padding:0}
.bld-ideas{margin-top:10px;font-size:.88rem}
.bld-ideas summary{cursor:pointer;color:var(--accent);font-weight:600}
.bld-ideas ul{margin:6px 0 0;padding-left:18px;color:var(--muted)}
.bld-ideas li{margin:4px 0}
.bld-ideas.inline{margin-top:0}
.linklike{background:none;border:0;padding:0;color:var(--text);font:inherit;text-align:left;cursor:pointer;line-height:1.5}
.linklike:hover{color:var(--accent);text-decoration:underline}
.bld-bottom{display:flex;justify-content:flex-end}
.bld-state{font-size:.84rem;margin-right:4px}
.bld-check{padding:14px 16px}
.bld-meter{height:6px;border-radius:6px;background:var(--line);margin:10px 0;overflow:hidden}
.bld-meter i{display:block;height:100%;background:var(--accent);transition:width .3s}
.bld-list{list-style:none;padding:0;margin:0;font-size:.86rem}
.bld-list li{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--muted)}
.bld-list li svg{width:14px;height:14px;flex:none;color:var(--dim)}
.bld-list li.ok{color:var(--text)}.bld-list li.ok svg{color:var(--good)}
.bld-paper{background:#fff;color:#1d1d1f;border-radius:10px;padding:34px 38px;font:13px/1.5 Georgia,'Times New Roman',serif;box-shadow:0 20px 50px -25px rgba(0,0,0,.6)}
.bld-paper h1{font:700 22px/1.2 Georgia,serif;text-align:center;margin:0 0 4px;color:#111}
.bld-paper h1+p,.bld-paper h1+p+p{text-align:center;margin:0 0 2px;color:#333}
.bld-paper h2{font:700 12.5px/1.3 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #999;padding-bottom:3px;margin:16px 0 6px;color:#111}
.bld-paper h3{font:700 13px/1.3 Georgia,serif;margin:10px 0 1px;color:#111}
.bld-paper p{margin:2px 0}
.bld-paper i{color:#555}
.bld-paper ul{margin:3px 0 4px;padding-left:18px}
.bld-paper li{margin:1px 0}
.preview-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.preview-banner b svg{width:16px;height:16px;vertical-align:-3px;color:var(--accent)}
.preview-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));font-size:.88rem;color:var(--muted)}
.preview-note>svg{width:16px;height:16px;color:var(--accent);flex:none}
.preview-note>span{flex:1;min-width:180px}
.ob-alt{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.ob-build{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ob-skip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;font-size:.86rem}
@media (max-width:1060px){.bld-tabs{display:inline-flex}.bld-grid{grid-template-columns:1fr}.bld-side{display:none;position:static;max-height:none}.bld-grid.show-preview .bld-form{display:none}.bld-grid.show-preview .bld-side{display:flex}}
@media (max-width:640px){.bld-cert{grid-template-columns:1fr 1fr}.bld-cert .field:first-child{grid-column:1/-1}.bld-paper{padding:22px 18px;font-size:12px}}
@media print{body.print-resume *{visibility:hidden}body.print-resume .bld-paper,body.print-resume .bld-paper *{visibility:visible}body.print-resume .bld-paper{position:absolute;left:0;top:0;width:100%;box-shadow:none;padding:0;border-radius:0}body.print-resume .bld-side{position:static;max-height:none;overflow:visible;display:block}body.print-resume .bld-check{display:none}}
/* password strength */
.pw-meter{margin-top:8px}
.pw-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.pw-bars i{height:5px;border-radius:5px;background:var(--line);transition:background .25s}
.pw-meter.s1 .pw-bars i.on{background:var(--bad)}
.pw-meter.s2 .pw-bars i.on{background:#4f8fff}
.pw-meter.s3 .pw-bars i.on{background:color-mix(in srgb,var(--good) 75%,#4f8fff)}
.pw-meter.s4 .pw-bars i.on{background:var(--good)}
.pw-meter.s0 .pw-bars i:first-child{background:color-mix(in srgb,var(--bad) 55%,var(--line))}
.pw-text{display:flex;gap:8px;align-items:baseline;margin-top:6px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.pw-label{font-weight:700}
.pw-meter.s0 .pw-label,.pw-meter.s1 .pw-label{color:var(--bad)}
.pw-meter.s2 .pw-label{color:#4f8fff}
.pw-meter.s3 .pw-label,.pw-meter.s4 .pw-label{color:var(--good)}
/* email verification */
.inbox-card{text-align:center}
.inbox-ico{display:grid;place-items:center;width:64px;height:64px;margin:4px auto 14px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.inbox-ico svg{width:30px;height:30px}
.inbox-ico.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.inbox-card h1{margin-bottom:8px}
.inbox-tips{text-align:left;margin:14px auto 18px;padding-left:20px;color:var(--muted);font-size:.88rem;max-width:400px}
.inbox-tips li{margin:4px 0}
.inbox-card .field{text-align:left}
/* admin: users, sources, audit */
.users-tools,.audit-tools{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:10px;margin-bottom:12px}
.audit-tools{grid-template-columns:minmax(0,1fr) 190px 190px 160px}
.users-tools .search,.audit-tools .search{margin:0}
.bulk-more{width:auto;padding:6px 30px 6px 10px;font-size:.84rem}
.users-table td,.audit-table td{vertical-align:middle}
.users-table tr.picked td{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.users-table tr.banned td:nth-child(2){opacity:.65}
.users-table .chips{gap:4px}.users-table .chip{font-size:.72rem;padding:2px 8px}
.users-table input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent)}
.row-act{width:auto;padding:6px 30px 6px 10px;font-size:.84rem}
.audit-table .mono{font-family:var(--mono);font-size:.8rem}
.audit-detail{max-width:380px;overflow-wrap:anywhere;font-size:.84rem}
.audit-table .chip{font-size:.74rem}
.src-grid{margin-bottom:16px}
.hbars{display:flex;flex-direction:column;gap:7px}
.hbar{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:.84rem}
.hbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.hbar i{height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.hbar i b{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2,var(--accent)))}
.hbar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.src .field.full{grid-column:1/-1}
@media (max-width:900px){.audit-tools{grid-template-columns:1fr 1fr}.audit-tools .search{grid-column:1/-1}}
@media (max-width:640px){.users-tools{grid-template-columns:1fr}.bulk-acts .btn{font-size:0;gap:0;padding:8px 10px}.hbar{grid-template-columns:100px minmax(0,1fr) 36px}}
.users-tools .search,.audit-tools .search{position:relative}
.users-tools .search .ico,.audit-tools .search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);width:17px;height:17px}
.users-tools .search input,.audit-tools .search input{padding-left:38px}
.bulk-acts select.input.bulk-more{width:auto;flex:none}
.bulk-acts{align-items:center}
.src textarea.input{min-height:64px}
/* admin: user billing */
.modal-bg.wide .modal{max-width:820px;width:min(820px,calc(100vw - 32px))}
.ub-head{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:12px}
.ub-head>div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface2);display:flex;flex-direction:column;gap:2px;min-width:0}
.ub-head span{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.ub-head b{font-size:1.25rem}
.ub-head small{font-size:.8rem}
.ub-sec{margin-bottom:12px;padding:14px 16px}
.ub-sec h4{margin:0 0 6px}
.ub-note{font-size:.86rem;margin:0 0 10px}
.ub-table .num{text-align:right;font-variant-numeric:tabular-nums}
.refunded{color:var(--good);font-weight:600}
.ub-refund-row td{background:color-mix(in srgb,var(--accent) 5%,var(--surface2))}
.ub-refund{padding:8px 4px}
.ub-refund .chips{margin-top:8px;gap:6px}.ub-refund .chip{font-size:.78rem}
.money-in{position:relative}.money-in i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--dim)}.money-in input{padding-left:26px}
.ub-refunds{list-style:none;padding:0;margin:0;font-size:.88rem}.ub-refunds li{padding:6px 0;border-bottom:1px dashed var(--line)}.ub-refunds li:last-child{border:0}
@media (max-width:640px){.ub-head{grid-template-columns:1fr 1fr}.ub-head>div:first-child{grid-column:1/-1}}
/* questionnaire: short-label options as tiles (icon on top, full label, check in the corner) */
.qgrid.compact{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.qgrid.compact .qopt.slim{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 14px 13px;min-height:104px}
.qgrid.compact .qopt.slim .qopt-ico{width:36px;height:36px;border-radius:10px}
.qgrid.compact .qopt.slim .qopt-ico svg{width:18px;height:18px}
.qgrid.compact .qopt.slim .qopt-txt{width:100%;padding-right:4px}
.qgrid.compact .qopt.slim .qopt-txt b{font-size:.95rem;line-height:1.3;text-wrap:balance}
.qgrid.compact .qopt.slim .qopt-mark{position:absolute;top:12px;right:12px;width:20px;height:20px}
.qgrid.compact .qopt.slim:hover{transform:translateY(-2px)}
@media (max-width:640px){.qgrid.compact{grid-template-columns:1fr 1fr}.qgrid.compact .qopt.slim{min-height:96px}}
.ue-tabs{margin:0 0 12px;flex-wrap:wrap}
.ue .quiz-track h4{font-size:.84rem}
.ue-switches{gap:16px;margin-top:6px;flex-wrap:wrap}
.ue-resume{font-family:var(--mono);font-size:.82rem;min-height:300px}
.ue-foot{position:sticky;bottom:-24px;background:var(--surface);border-top:1px solid var(--line);padding:12px 0 2px;margin-top:6px}
.user-link{display:block;text-align:left}.user-link:hover b{color:var(--accent)}
.modal-bg.wide .modal{max-height:calc(100vh - 40px);overflow:auto}
.reset-link{display:block;word-break:break-all;padding:12px 14px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);font-size:.86rem}
.grant-chips{gap:6px;margin-top:4px}.grant-chips .chip{font-size:.82rem}
.grant-credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.grant-credit{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface2);display:flex;flex-direction:column;gap:6px}
.grant-credit small{font-size:.78rem;line-height:1.35}
.grant-list{margin:0 0 12px;padding-left:18px;color:var(--muted);font-size:.88rem}.grant-list li{margin:4px 0}
.ub-gift{justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px}
.bonus-note{margin:14px 0 0;font-size:.86rem;color:var(--muted);display:flex;gap:6px;align-items:center}.bonus-note svg{width:15px;height:15px;color:var(--accent)}
.grant-credits{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.grant textarea.input{min-height:64px}
.tk-tools{margin-bottom:12px}.prevflag{display:inline-flex;align-items:center;gap:4px;font-size:.72rem}.prevflag svg{width:12px;height:12px}

/* ===== On-site checkout (v1.16) ===== */
.co-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:start;max-width:1120px;margin:8px auto 40px}
.co-order{position:sticky;top:90px;padding:26px;border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface) 55%);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));box-shadow:0 30px 60px -40px color-mix(in srgb,var(--accent) 50%,transparent)}
.co-order .kicker{margin-bottom:14px}
.co-item{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.co-item>div{flex:1;min-width:0}.co-item b{display:block;font:700 1.3rem/1.2 var(--hfont)}
.co-badge{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line2);flex:none}
.co-badge svg{width:30px;height:30px}
.co-int{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-bottom:18px}
.co-int button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px}
.co-int small{color:var(--muted);font-size:.78rem;font-weight:500}
.co-feat-h{font:600 .74rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.co-feats{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px}
.co-feats li{display:flex;gap:9px;align-items:flex-start;font-size:.93rem}
.co-feats svg{width:16px;height:16px;color:var(--good);flex:none;margin-top:3px}
.co-lines{border-top:1px dashed var(--line2);padding-top:14px;display:grid;gap:9px;font-size:.93rem}
.co-lines>div{display:flex;justify-content:space-between;gap:12px}
.co-lines .good span:last-child{color:var(--good)}
.co-lines .dim{font-size:.84rem}
.co-total{border-top:1px solid var(--line2);padding-top:12px;margin-top:4px;align-items:baseline}
.co-total span{font-weight:600}.co-total b{font:700 1.7rem var(--hfont)}
.co-renew{font-size:.85rem;color:var(--muted);margin:12px 0 18px}
.co-trust{display:grid;gap:10px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--bg) 60%,transparent);border:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.co-trust>div{display:flex;gap:10px;align-items:flex-start}.co-trust svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:2px}
.co-trust b{color:var(--text)}
.co-pay{display:grid;gap:16px}
.co-head{display:flex;align-items:center;gap:12px}
.co-head h1{font-size:clamp(1.8rem,3vw,2.4rem);margin:0}
.co-step{padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.co-step-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.co-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 .82rem var(--hfont);background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.co-step .co-agree:first-of-type{margin-top:0}
.co-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.co-method{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1.5px solid var(--line2);background:var(--surface2);color:var(--text);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.co-method:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.co-method.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface2))}
.co-mico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line2);flex:none;color:var(--accent)}
.co-mico svg{width:20px;height:20px}
.co-mico .pp{font:800 italic 1.15rem Arial,sans-serif;color:#2790c3;text-shadow:2px 1px 0 #1b3f86}
.co-mtxt{display:flex;flex-direction:column;flex:1;min-width:0}.co-mtxt small{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);flex:none}
.co-method.on .co-radio{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--surface2);background:var(--accent)}
.co-stage{min-height:120px}
.co-idle{display:grid;gap:12px;justify-items:start;padding:16px;border-radius:14px;border:1px dashed var(--line2)}
.co-idle p{margin:0}
.co-continue{min-width:220px;justify-content:center}
.co-stripe{border-radius:14px;overflow:hidden;background:#fff;min-height:300px}
.co-paypal{max-width:420px;margin:4px auto 0;padding:16px;border-radius:14px;background:#fff}
.co-ppnote{text-align:center;font-size:.84rem;margin:10px 0 0}
.co-loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:40px;color:var(--muted)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);animation:spin 0.8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.co-sumtoggle{display:none}
.co-done{max-width:620px;margin:30px auto;text-align:center;padding:40px 30px}
.co-check{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good);animation:pop .4s ease-out}
.co-check svg{width:38px;height:38px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.co-receipt{display:grid;gap:0;margin:20px 0;border:1px solid var(--line);border-radius:14px;text-align:left;overflow:hidden}
.co-receipt>div{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.co-receipt>div:first-child{border-top:0}.co-receipt span{color:var(--muted)}
.co-done-acts{justify-content:center;gap:10px;flex-wrap:wrap}
@media (max-width:900px){
  .co-page{grid-template-columns:1fr;gap:14px}
  .co-sumtoggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));background:var(--surface);color:var(--text);font:600 .95rem var(--font);cursor:pointer}
  .co-sumtoggle svg{width:16px;height:16px;vertical-align:-3px}
  .co-order{position:static;display:none}.co-page.sum-open .co-order{display:block}
  .co-step{padding:16px}
}
@media (prefers-reduced-motion:reduce){.co-check{animation:none}.spin{animation-duration:2s}}
.co-page.done{display:block}

/* ===== Profile photos (v1.16) ===== */
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.avatar.has-img{background:var(--surface2)}
.pfp{border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:none;font:700 1rem var(--hfont);color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));user-select:none}
.pfp img{width:100%;height:100%;object-fit:cover;display:block}.pfp.has-img{background:var(--surface2)}
.pfp.md{width:44px;height:44px}.pfp.lg{width:64px;height:64px;font-size:1.4rem}.pfp.xl{width:112px;height:112px;font-size:2.4rem}
.ph-dlg{display:grid;gap:14px;justify-items:center;text-align:center}.ph-dlg .row{justify-content:center;gap:8px}
.ph-prev .pfp.xl{width:140px;height:140px}
.linkish{border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-align:left}
.linkish:hover{text-decoration:underline}

/* ===== Achievement wallet ===== */
.wl-loading,.cp-loading{display:flex;gap:10px;align-items:center;justify-content:center;padding:40px;color:var(--muted)}
.wl-hero{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px;margin-bottom:16px;background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 55%),var(--surface);border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.wl-hero-main{display:flex;gap:22px;align-items:flex-start;flex:1;min-width:280px}
.wl-photo{position:relative;border:0;padding:0;background:none;border-radius:50%;cursor:pointer;flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent),0 20px 40px -20px color-mix(in srgb,var(--accent) 70%,transparent)}
.wl-photo:hover .pfp{filter:brightness(.85)}
.wl-cam{position:absolute;right:2px;bottom:2px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent,#fff);border:3px solid var(--surface)}
.wl-cam svg{width:16px;height:16px}
.wl-id{min-width:0;flex:1}
.wl-id h1,.wl-id h2{margin:0 0 4px;font-size:clamp(1.6rem,3vw,2.2rem)}
.wl-headline{font-size:1.05rem;color:var(--text);margin:0 0 8px}
.wl-sub{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:.9rem;margin-bottom:12px}
.wl-sub span{display:inline-flex;gap:6px;align-items:center}.wl-sub svg{width:15px;height:15px}
.wl-links{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.wl-link{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--surface2);border:1px solid var(--line2);color:var(--text);font-size:.86rem;font-weight:600}
.wl-link:hover{border-color:var(--accent);text-decoration:none}.wl-link svg{width:14px;height:14px;color:var(--accent)}
.wl-acts{gap:8px;flex-wrap:wrap}
.wl-strength{display:flex;gap:14px;align-items:center;align-self:center;padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--line)}
.wl-strength small{display:block;max-width:180px}
.wl-ring,.cp-ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;flex:none}
.wl-ring>div,.cp-ring>div{width:66px;height:66px;border-radius:50%;background:var(--surface);display:grid;place-items:center;align-content:center;text-align:center}
.wl-ring b,.cp-ring b{font:700 1.2rem/1 var(--hfont)}.wl-ring small,.cp-ring small{font-size:.66rem;color:var(--muted)}
.wl-about{margin-bottom:16px}.wl-about p{margin:0;white-space:pre-line}
.wl-share{margin-bottom:22px}
.wl-share h3{display:flex;gap:8px;align-items:center}.wl-share h3 svg{width:18px;height:18px;color:var(--accent)}
.wl-share-row{display:flex;align-items:stretch;gap:0;margin:12px 0;max-width:620px}
.wl-prefix{display:flex;align-items:center;padding:0 12px;border:1px solid var(--line2);border-right:0;border-radius:12px 0 0 12px;background:var(--surface2);color:var(--muted);font:500 .9rem var(--mono);white-space:nowrap}
.wl-share-row .input{border-radius:0;flex:1;min-width:0}.wl-share-row .btn{border-radius:0 12px 12px 0}
.wl-share-opts{gap:18px;flex-wrap:wrap}.wl-share-live{gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px;font-size:.9rem}
.wl-sec{margin:26px 0}
.wl-sec-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.wl-sec-h h3{display:flex;align-items:center;gap:8px;margin:0;font-size:1.2rem}.wl-sec-h h3 svg{width:18px;height:18px;color:var(--accent)}
.wl-note{margin:-6px 0 12px;font-size:.86rem}
.wl-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.wl-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 12px;border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.wl-badge b{font-size:.92rem}.wl-badge small{color:var(--muted);font-size:.76rem;line-height:1.3}
.wl-badge-ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent,#fff);box-shadow:0 8px 20px -8px var(--accent)}
.wl-badge-ico svg{width:22px;height:22px}
.wl-badge.locked{background:var(--surface);border-color:var(--line);opacity:.55}
.wl-badge.locked .wl-badge-ico{background:var(--surface2);color:var(--muted);box-shadow:none}
.wl-certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.wl-cert{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:18px;min-height:178px;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--ic) 30%,#111725),#111725 70%);border:1px solid color-mix(in srgb,var(--ic) 45%,transparent);box-shadow:0 18px 40px -26px var(--ic)}
.wl-cert::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ic) 35%,transparent),transparent 70%);pointer-events:none}
.wl-cert-top{display:flex;align-items:center;gap:8px}
.wl-chip-ico{width:30px;height:24px;border-radius:5px;display:grid;place-items:center;background:linear-gradient(135deg,#f6d77a,#b8892c);color:#3b2a06}
.wl-chip-ico svg{width:14px;height:14px}
.wl-issuer{font:700 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--ic) 60%,var(--text))}
.wl-feat{margin-left:auto;color:var(--accent)}.wl-feat svg{width:16px;height:16px}
.wl-cert-name{font:700 1.15rem/1.25 var(--hfont)}
.wl-cert-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.wl-cert-meta .warn{color:var(--accent)}.wl-cert-meta .bad{color:var(--bad)}
.wl-cert-foot{display:flex;align-items:center;gap:10px;margin-top:auto;flex-wrap:wrap}
.wl-cert-foot code{font:500 .76rem var(--mono);color:var(--muted);letter-spacing:.06em}
.wl-cert-foot a{display:inline-flex;align-items:center;gap:4px;font-size:.84rem;font-weight:600}.wl-cert-foot a svg{width:14px;height:14px}
.wl-edit{display:flex;gap:4px;margin-left:auto}.wl-edit .icon-btn{width:30px;height:30px}.wl-edit svg{width:14px;height:14px}
.wl-items{display:grid;gap:10px}
.wl-item{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.wl-item-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.wl-item-ico svg{width:20px;height:20px}
.wl-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wl-item-top{display:flex;gap:8px;align-items:center}.wl-item-top small{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.wl-item-body b{font-size:1.02rem}.wl-item-body p{margin:6px 0 0;font-size:.92rem;color:color-mix(in srgb,var(--text) 85%,var(--muted))}
.wl-item-body a{display:inline-flex;align-items:center;gap:4px;font-size:.84rem;margin-top:6px}.wl-item-body a svg{width:13px;height:13px}
.wl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px;border-radius:16px;border:1px dashed var(--line2);color:var(--muted)}
.wl-empty svg{width:26px;height:26px;color:var(--accent)}.wl-empty b{color:var(--text)}.wl-empty span{max-width:520px;font-size:.9rem}
.wl-empty.big{max-width:520px;margin:60px auto}
.wl-linked{display:grid;gap:8px;margin-bottom:8px}
.wl-linkrow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) 36px;gap:8px;align-items:center}
.wl-public{max-width:1000px;margin:20px auto 60px}
.wl-hero.pub .wl-hero-main .pfp{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}
.wl-made{text-align:center;color:var(--muted);font-size:.86rem;margin-top:30px}
@media (max-width:640px){.wl-hero{padding:18px}.wl-hero-main{flex-direction:column;align-items:center;text-align:center}.wl-sub,.wl-links,.wl-acts{justify-content:center}.wl-strength{width:100%}.pfp.xl{width:96px;height:96px}.wl-linkrow{grid-template-columns:1fr 36px}.wl-linkrow input:nth-child(2){grid-column:1}.wl-share-row{flex-wrap:wrap}.wl-prefix{border-radius:12px 12px 0 0;border-right:1px solid var(--line2);border-bottom:0;width:100%;padding:8px 12px}.wl-share-row .input{border-radius:0 0 0 12px}}

/* ===== AI Copilot ===== */
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:20px}
.cp-tool{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--text);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}
.cp-tool:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);transform:translateY(-2px)}
.cp-tool.on{border-color:var(--accent);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface))}
.cp-tool small{color:var(--muted);font-size:.82rem;line-height:1.4}
.cp-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);flex:none}
.cp-ico svg{width:19px;height:19px}
.cp-panel{padding:22px}
.cp-panel-h{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}.cp-panel-h h2{margin:0;font-size:1.4rem}.cp-panel-h p{margin:2px 0 0}
.cp-go{justify-content:flex-end;margin-top:6px}
.cp-out{margin-top:18px;display:grid;gap:12px}
.cp-out:empty{display:none}
.cp-note{display:flex;gap:8px;align-items:flex-start;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--info) 10%,transparent);color:var(--info);font-size:.86rem;margin:0}
.cp-note svg{width:16px;height:16px;flex:none;margin-top:2px}
.cp-q{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--surface2)}
.cp-q summary{display:flex;gap:12px;align-items:center;cursor:pointer;list-style:none}.cp-q summary::-webkit-details-marker{display:none}
.cp-q[open] summary{margin-bottom:10px}
.cp-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font:700 .8rem var(--hfont)}
.cp-qt{flex:1;font-weight:600}
.cp-ans{padding:12px 14px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 12px 12px 0;margin:8px 0}
.cp-ans small{color:var(--muted)}.cp-ans p{margin:6px 0 8px}
.cp-list{list-style:none;padding:0;margin:6px 0;display:grid;gap:6px}
.cp-list li{display:flex;gap:8px;align-items:flex-start;font-size:.93rem}.cp-list svg{width:15px;height:15px;color:var(--good);flex:none;margin-top:4px}
.cp-practice{display:grid;gap:10px;margin-top:10px}
.cp-fb{display:flex;gap:16px;align-items:flex-start;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.cp-score{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;align-content:center;flex:none;background:color-mix(in srgb,var(--accent) 15%,transparent)}
.cp-score b{font:700 1.6rem/1 var(--hfont)}.cp-score small{color:var(--muted);font-size:.7rem}
.cp-score.good{background:color-mix(in srgb,var(--good) 16%,transparent)}.cp-score.good b{color:var(--good)}
.cp-score.low{background:color-mix(in srgb,var(--bad) 14%,transparent)}.cp-score.low b{color:var(--bad)}
.cp-fit{display:flex;gap:18px;align-items:center}.cp-fit p{margin:0}
.cp-block{padding:16px;border-radius:14px;background:var(--surface2);border:1px solid var(--line)}
.cp-block h3{margin:0 0 8px;font-size:1rem}
.cp-gaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.cp-gap{padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}.cp-gap p{margin:6px 0 0;font-size:.9rem}
.cp-plan{margin:0;padding-left:20px;display:grid;gap:8px}.cp-plan li{display:grid;gap:2px}
.cp-pre{white-space:pre-line;margin:0}
.cp-counter{padding:18px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.cp-counter small{color:var(--muted);display:block}.cp-counter b{font:700 1.3rem var(--hfont)}
.cp-kinds{flex-wrap:wrap}
.cp-chat{display:flex;flex-direction:column;gap:10px;max-height:460px;overflow:auto;padding:14px;border-radius:14px;background:var(--surface2);border:1px solid var(--line);margin:12px 0}
.cp-msgb{max-width:82%;padding:10px 14px;border-radius:14px;white-space:pre-line;line-height:1.5}
.cp-msgb small{display:block;font-size:.72rem;color:var(--muted);margin-bottom:2px}
.cp-msgb.assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--line)}
.cp-msgb.user{align-self:flex-end;background:color-mix(in srgb,var(--accent) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.cp-starters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.cp-starters .chip{cursor:pointer;border:1px solid var(--line2)}
.cp-compose{display:flex;gap:8px;align-items:flex-end}.cp-compose textarea{flex:1;resize:vertical}
.ai-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.ai-row-t{display:inline-flex;align-items:center;gap:6px;font:600 .82rem var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
.ai-row-t svg{width:15px;height:15px}.ai-row .chip{cursor:pointer;border:1px solid var(--line2)}.ai-row .chip:hover{border-color:var(--accent);color:var(--text)}
@media (max-width:640px){.cp-fb{flex-direction:column}.cp-msgb{max-width:92%}.cp-compose{flex-direction:column;align-items:stretch}}

/* clickable links in user / job text */
a.link{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px;overflow-wrap:anywhere}
a.link:hover{text-decoration-color:var(--accent)}
.rich p{margin:0 0 .7em}.rich p:last-child{margin:0}
.note-links{margin:-6px 0 12px;font-size:.86rem}

/* ===== Help guide ===== */
.hg-hero{text-align:center;max-width:760px;margin:10px auto 22px}
.hg-hero h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 8px}
.hg-tools{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.hg-search{max-width:480px;flex:1;min-width:240px}
.hg-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:24px}
.hg-qbtn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--text);font:600 .92rem var(--font);cursor:pointer;transition:transform .15s,border-color .15s}
.hg-qbtn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.hg-qico,.hg-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);flex:none}
.hg-qico svg,.hg-ico svg{width:20px;height:20px}
.hg-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
.hg-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.hg-toc a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--muted);font-size:.9rem}
.hg-toc a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text);text-decoration:none}
.hg-toc a svg{width:15px;height:15px;color:var(--accent);flex:none}
.hg-toc a[hidden]{display:none}
.hg-body{display:grid;gap:16px}
.hg-sec{padding:24px;scroll-margin-top:100px}
.hg-sec[hidden]{display:none}
.hg-sec h2{display:flex;align-items:center;gap:12px;font-size:1.45rem;margin:0 0 14px}
.hg-sec p{margin:0 0 12px}
.hg-h{margin:18px 0 8px;font-size:1.05rem}
.hg-steps{margin:0 0 14px;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.hg-steps li{counter-increment:s;display:flex;gap:12px;align-items:flex-start}
.hg-steps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 .8rem var(--hfont);background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);margin-top:1px}
.hg-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.hg-list li{display:flex;gap:10px;align-items:flex-start}.hg-list svg{width:16px;height:16px;color:var(--good);flex:none;margin-top:4px}
.hg-tip{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--info) 10%,transparent);border:1px solid color-mix(in srgb,var(--info) 30%,transparent);font-size:.92rem;margin-top:6px}
.hg-tip svg{width:17px;height:17px;color:var(--info);flex:none;margin-top:3px}
.hg-none{text-align:center}
.hg-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}.hg-cta h3{margin:0}.hg-cta p{margin:4px 0 0}
.hg-cta a:hover{text-decoration:none}
@media (max-width:860px){.hg-grid{grid-template-columns:1fr}.hg-toc{position:static;flex-direction:row;flex-wrap:wrap}.hg-toc a{flex:1 1 45%}}
@media (max-width:480px){.hide-xs{display:none!important}}
@media print{body.print-help .hg-hero .hg-tools,body.print-help .hg-quick,body.print-help .hg-toc,body.print-help .hg-cta{display:none!important}body.print-help .hg-grid{display:block}body.print-help .hg-sec{break-inside:avoid;border:1px solid #ccc;background:#fff;color:#000}}

/* ===== Admin → Health ===== */
.hl-status{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hl-status>div{flex:1}.hl-status small{display:block}
.hl-dot{width:14px;height:14px;border-radius:50%;background:var(--good);box-shadow:0 0 0 5px color-mix(in srgb,var(--good) 20%,transparent)}
.hl-status.warn .hl-dot{background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent)}
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:14px}
.hl-tile{display:flex;flex-direction:column;gap:4px;padding:16px}
.hl-tile b{font:700 1.5rem var(--hfont)}.hl-tile small{color:var(--muted);font-size:.8rem}
.hl-spark{width:100%;height:42px;margin-top:6px}
.hl-list{margin:0;padding-left:18px;display:grid;gap:6px}
.hl-errs details{border-top:1px solid var(--line);padding:8px 0}.hl-errs summary{cursor:pointer;font-size:.86rem}
.hl-errs pre{white-space:pre-wrap;font:12px/1.5 var(--mono);color:var(--muted);max-height:240px;overflow:auto}
/* link editor: site dropdown + link, and one custom link */
.wl-linkrow{display:grid;grid-template-columns:28px minmax(150px,200px) minmax(0,1fr) 36px;gap:8px;align-items:center}
.wl-linkrow.custom{grid-template-columns:28px minmax(150px,200px) minmax(0,1fr)}
.wl-lk-ico{display:grid;place-items:center;color:var(--accent)}.wl-lk-ico svg{width:16px;height:16px}
.wl-lk-h{margin-bottom:2px}.wl-lk-note{margin:0 0 10px;font-size:.86rem}
.wl-lk-custom{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line2)}
.wl-linkrow select option:disabled{color:var(--dim)}
@media (max-width:640px){.wl-linkrow,.wl-linkrow.custom{grid-template-columns:1fr 36px}.wl-linkrow .wl-lk-ico{display:none}.wl-linkrow select,.wl-linkrow.custom input:first-of-type{grid-column:1/-1}}
/* wallet import */
.im-srcs{display:grid;gap:10px}
.im-src{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px;border-radius:14px;border:1px solid var(--line2);background:var(--surface2)}
.im-src .btn{align-self:center}
.im-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}.im-ico svg{width:19px;height:19px}
.im-body{display:grid;gap:6px;min-width:0}.im-body small{line-height:1.4}
.im-prev h4{margin:14px 0 6px;font-size:.95rem}
.im-row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);margin-bottom:6px;cursor:pointer}
.im-row input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.im-row>span:nth-child(2){flex:1;min-width:0;display:grid}.im-row.have{opacity:.6}
@media (max-width:600px){.im-src{grid-template-columns:1fr}.im-src .im-ico{display:none}}

/* ---------- network: badges, avatars, feed, people, messages, jobs search ---------- */
.vbadges{display:inline-flex;gap:3px;margin-left:5px;vertical-align:-3px}
.vbadge{display:inline-flex;align-items:center;gap:4px;font:600 .72rem var(--font);white-space:nowrap}
.vbadge .ico{width:16px;height:16px;stroke-width:2.1}
.vbadge.b-id{color:#0284c7}.vbadge.b-id .ico{fill:color-mix(in srgb,#4fd1ff 22%,transparent)}
.vbadge.b-team{color:var(--accent)}.vbadge.b-emp{color:var(--good)}
h1 .vbadges{vertical-align:middle}h1 .vbadge{font-size:.8rem;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent)}
.nav-av{display:grid;place-items:center;flex:none;border-radius:50%;overflow:hidden;font-family:var(--hfont);font-weight:700;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 0 2px var(--surface)}
.nav-av img{width:100%;height:100%;object-fit:cover}
.nm-link{color:var(--text)}.nm-link:hover{text-decoration:none}.nm-link:hover .nm{text-decoration:underline;text-decoration-color:var(--accent)}
.nm{font-weight:650}
.hl{color:var(--muted);font-size:.86rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sec-t{margin:22px 0 10px;font-size:1rem}
select.input.sm,input.input.sm{padding:7px 10px;font-size:.86rem;width:auto}
.switch.sm{font-size:.85rem}.switch.sm i{width:34px;height:20px}.switch.sm i::after{width:14px;height:14px}.switch.sm input:checked+i::after{transform:translateX(14px)}
.chip.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
button.chip{border:0;cursor:pointer}

.join-card{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;max-width:820px;margin:10px auto}
.join-art{width:96px;height:96px;border-radius:26px;display:grid;place-items:center;color:var(--accent);background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),color-mix(in srgb,var(--text) 5%,transparent);border:1px solid var(--line2)}
.join-art .ico{width:48px;height:48px;stroke-width:1.5}
.join-pts{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}.join-pts li{display:flex;gap:9px;color:var(--muted);font-size:.92rem}.join-pts .ico{color:var(--good);margin-top:2px}
@media (max-width:640px){.join-card{grid-template-columns:1fr}.join-art{width:64px;height:64px}}

.feed-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:20px;align-items:start}
.f-left,.f-right{position:sticky;top:90px;display:grid;gap:14px}
.f-mid{display:grid;gap:14px;min-width:0}
.f-me{padding:0 0 12px;overflow:hidden;text-align:center}
.f-me-cover{height:58px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 45%,#1a1206),color-mix(in srgb,var(--accent2) 30%,#0c111b)),repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.05) 14px 15px)}
.f-me-av{margin:-34px auto 8px;width:max-content}
.f-me>a{color:var(--text);display:block;padding:0 14px}.f-me .hl{padding:2px 14px 0;font-size:.82rem}
.f-me-stats{display:grid;margin-top:12px;border-top:1px solid var(--line);padding:8px 0}
.f-me-stats a{display:flex;justify-content:space-between;padding:5px 14px;color:var(--muted);font-size:.84rem}.f-me-stats a:hover{background:color-mix(in srgb,var(--text) 5%,transparent);text-decoration:none}
.f-me-stats b{color:var(--accent)}
.f-me-cta{display:flex;gap:10px;align-items:center;text-align:left;margin:4px 12px;padding:10px;border-radius:12px;background:color-mix(in srgb,#4fd1ff 9%,transparent);border:1px solid color-mix(in srgb,#4fd1ff 30%,transparent);color:var(--text)}
.f-me-cta .ico{color:#0284c7;width:26px;height:26px;flex:none}.f-me-cta>span{display:block;min-width:0}.f-me-cta b{display:block}.f-me-cta small{display:block;color:var(--muted);font-size:.76rem}.f-me-cta:hover{text-decoration:none;border-color:#4fd1ff}
.f-me-ok{display:flex;justify-content:center;align-items:center;gap:4px;color:#0284c7;font-size:.84rem;font-weight:600;margin:6px 0}
.f-me-link{display:flex!important;align-items:center;justify-content:center;gap:7px;margin-top:8px;font-size:.85rem;color:var(--muted)!important}
.f-compose{padding:16px}
.f-c-top{align-items:flex-start;flex-wrap:nowrap!important}
.f-text{resize:vertical;min-height:46px!important;height:auto;border-radius:14px}
.f-compose>input{margin-top:10px}
.f-c-bar{margin-top:10px;gap:10px;flex-wrap:wrap}
.f-kinds{display:flex;gap:6px;flex-wrap:wrap}
.f-tabs{padding:0 2px}
.f-skel{display:grid;place-items:center;min-height:120px}
.f-post{padding:16px 18px}
.f-p-head{display:flex;gap:12px;align-items:flex-start}
.f-p-head small{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.f-kind{padding:3px 8px;font-size:.7rem}
.f-p-body{margin:12px 0 0;white-space:pre-wrap;word-break:break-word;line-height:1.55}
.f-p-link{display:flex;gap:10px;align-items:center;margin-top:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line2);background:color-mix(in srgb,var(--text) 3%,transparent);color:var(--text);min-width:0}
.f-p-link span{min-width:0}.f-p-link small{display:block;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.f-p-link:hover{text-decoration:none;border-color:var(--accent)}
.f-acts{display:flex;gap:4px;margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}
.f-act{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px;border-radius:9px;background:none;border:0;color:var(--muted);cursor:pointer;font:500 .86rem var(--font)}
.f-act:hover{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.f-act.on{color:var(--bad)}.f-act.on .ico{fill:currentColor}
.f-comments{margin-top:10px;display:grid;gap:10px}
.f-c-in{flex-wrap:nowrap!important}.f-c-in .input{flex:1}
.f-cm{display:flex;gap:10px}.f-cm-b{flex:1;min-width:0;padding:8px 12px;border-radius:4px 14px 14px 14px;background:color-mix(in srgb,var(--text) 5%,transparent)}
.f-cm-t{margin-top:2px;font-size:.92rem;white-space:pre-wrap;word-break:break-word}
.f-side{padding:16px;display:grid;gap:10px}
.f-side .spread a{font-size:.82rem}
.f-job{display:flex;gap:10px;align-items:center;color:var(--text);padding:6px;border-radius:10px;min-width:0}.f-job:hover{background:color-mix(in srgb,var(--text) 5%,transparent);text-decoration:none}
.f-job span{min-width:0}.f-job b{display:block;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.f-job small{color:var(--muted);font-size:.78rem}
.f-person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.f-person .btn{grid-column:2;justify-self:start}
.f-person small{display:block;font-size:.78rem}
@media (max-width:1180px){.feed-grid{grid-template-columns:220px minmax(0,1fr)}.f-right{display:none}}
@media (max-width:820px){.feed-grid{grid-template-columns:1fr}.f-left{position:static;display:none}}
.post-solo{max-width:680px;margin:0 auto}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.pcard{padding:0 14px 16px;text-align:center;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:4px}
.pcard-cover{align-self:stretch;margin:0 -14px;height:54px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 30%,#140e05),color-mix(in srgb,var(--info) 22%,#0b0d10))}
.pcard-av{margin-top:-38px}
.pcard .hl{font-size:.82rem;min-height:2.2em}
.pcard-chips{justify-content:center;margin:4px 0}.pcard-chips .chip{font-size:.7rem;padding:4px 8px}
.pcard-act{margin-top:auto;padding-top:8px}
.inv-row{display:flex;gap:14px;align-items:center;margin-bottom:10px;padding:14px 16px}
.inv-main{flex:1;min-width:0}
.inv-note{margin-top:6px;padding:8px 10px;border-left:2px solid var(--accent);background:color-mix(in srgb,var(--text) 4%,transparent);border-radius:0 8px 8px 0;font-size:.88rem}
@media (max-width:560px){.inv-row{flex-wrap:wrap}}

.mprof{max-width:900px;margin:0 auto;display:grid;gap:14px}
.mp-head{padding:0;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;gap:0 20px;align-items:end}
.mp-cover{grid-column:1/-1;height:130px;background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--info) 30%,transparent),transparent 50%),linear-gradient(120deg,color-mix(in srgb,var(--accent) 40%,#0c111b),#0b0f18),repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.04) 22px 23px)}
.mp-av{margin:-60px 0 20px 24px;align-self:start}.mp-av .nav-av{box-shadow:0 0 0 4px var(--surface)}
.mp-main{padding:14px 0 20px;min-width:0}.mp-main h1{margin:0;font-size:1.6rem}
.mp-hl{margin:4px 0;color:var(--text);font-size:1rem}
.mp-links{margin-top:10px;flex-wrap:wrap}.mp-links .chip:hover{text-decoration:none;color:var(--text)}
.mp-act{padding:0 24px 20px;align-self:end}
@media (max-width:720px){.mp-head{grid-template-columns:1fr}.mp-main{padding:0 20px}.mp-act{padding:0 20px 20px}}
.mp-certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.mp-cert{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent)}.mp-cert .ico{color:var(--accent)}.mp-cert small{display:block}
.mp-item{padding:10px 0;border-bottom:1px solid var(--line)}.mp-item:last-child{border:0}.mp-item small{display:block}.mp-item p{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.pre{white-space:pre-wrap}

.m-wrap{display:grid;grid-template-columns:330px minmax(0,1fr);padding:0;overflow:hidden;height:calc(100vh - 190px);min-height:460px}
.m-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.m-side-h{padding:14px 16px;border-bottom:1px solid var(--line)}.m-side-h h2{margin:0;font-size:1.1rem}
.m-threads{overflow:auto;flex:1}
.m-th{display:flex;gap:10px;align-items:center;width:100%;padding:12px 16px;background:none;border:0;border-left:3px solid transparent;color:var(--text);text-align:left;cursor:pointer}
.m-th:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}.m-th.on{background:color-mix(in srgb,var(--accent) 9%,transparent);border-left-color:var(--accent)}
.m-th-b{flex:1;min-width:0;display:grid}.m-th-b small:last-child{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-th.unread .m-th-b small:last-child{color:var(--text);font-weight:600}
.m-th .badge{background:#e5484d;color:#fff}
.m-conv{display:flex;flex-direction:column;min-height:0}
.m-c-head{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}.m-c-head>div:nth-child(3){flex:1;min-width:0}
.m-back{display:none!important}
.m-msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.m-day{align-self:center;font-size:.74rem;color:var(--dim);padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--text) 5%,transparent);margin:6px 0}
.m-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:78%}.m-msg.mine{align-self:flex-end;align-items:flex-end}
.m-bub{padding:9px 13px;border-radius:16px 16px 16px 4px;background:color-mix(in srgb,var(--text) 7%,transparent);white-space:pre-wrap;word-break:break-word;line-height:1.45}
.m-msg.mine .m-bub{border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--accent) 22%,var(--surface2));color:var(--text)}
.m-msg small{font-size:.7rem;margin-top:2px}
.m-compose{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--line)}.m-compose textarea{flex:1;resize:none;min-height:46px!important;height:46px;max-height:160px}
.m-empty{padding:18px;font-size:.88rem}
.m-none{margin:auto;text-align:center;padding:30px;display:grid;justify-items:center;gap:6px}.m-none>.ico{width:40px;height:40px;color:var(--accent)}
.m-pick{display:grid;max-height:360px;overflow:auto;min-width:min(420px,80vw)}
@media (max-width:760px){.m-wrap{grid-template-columns:1fr;height:calc(100vh - 210px)}.m-conv{display:none}.m-wrap.show-conv .m-side{display:none}.m-wrap.show-conv .m-conv{display:flex}.m-back{display:grid!important}}

.vid{max-width:720px;margin:10px auto;display:grid;grid-template-columns:auto 1fr;gap:26px}
.vid-art{width:90px;height:90px;border-radius:24px;display:grid;place-items:center;color:#0284c7;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,#4fd1ff 25%,transparent),transparent 70%);border:1px solid color-mix(in srgb,#4fd1ff 35%,transparent)}
.vid-art .ico{width:46px;height:46px;stroke-width:1.5}
.vid h1{margin:0 0 8px}
.vid-steps{margin:16px 0;padding-left:20px;display:grid;gap:8px;color:var(--muted)}.vid-steps b{color:var(--text)}
.vid-priv{display:flex;gap:8px;align-items:flex-start;font-size:.84rem;margin:0 0 16px}
@media (max-width:600px){.vid{grid-template-columns:1fr}}

.js-top{padding:16px;margin-bottom:16px;display:grid;gap:12px}
.js-bar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:10px}
.js-bar .search{position:relative}.js-bar .search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim)}.js-bar .search input{padding-left:38px}
.js-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.js-free{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:.84rem;color:var(--muted)}.js-free .ico{color:var(--good);margin-top:1px}
.js-count{font-size:.84rem;margin:0 0 8px}
.js-logo{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;font:700 1.1rem var(--hfont);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--line2)}
.js-logo.lg{width:84px;height:84px;font-size:2rem;border-radius:20px}
.js-card{grid-template-columns:auto 1fr}
.js-more{width:100%;margin-top:10px}
.ai-tag{padding:2px 6px!important;font-size:.64rem!important;margin-left:4px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
@media (max-width:720px){.js-bar{grid-template-columns:1fr}}

.rep-list{display:grid;gap:6px}.rep{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:9px;cursor:pointer}.rep:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.rep-card{margin-bottom:10px}

.notif-list{padding:10px;display:flex;flex-direction:column;gap:6px}
.notif{display:flex;gap:14px;align-items:center;padding:12px 16px;border-radius:12px;color:var(--text);line-height:1.45;border:1px solid transparent}
a.notif:hover{background:color-mix(in srgb,var(--text) 5%,transparent);border-color:var(--line);text-decoration:none}
.notif.unread{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:color-mix(in srgb,var(--accent) 16%,transparent)}
.notif-ic{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.notif-ic .ico{width:18px;height:18px}
.notif-body{flex:1;min-width:0;font-size:.94rem}.notif-body time{display:block;color:var(--dim);font-size:.76rem;margin-top:5px}
@media (max-width:560px){.notif-list{padding:6px;gap:6px}.notif{padding:12px;gap:12px}}
.pgrid>.empty{grid-column:1/-1}
.vid h1{font-size:clamp(1.6rem,3vw,2.2rem)}

/* ---------- scam warnings & employers ---------- */
.scam-note{display:flex;gap:12px;margin:14px 0 0;padding:12px 14px;border-radius:12px;border:1px solid}
.scam-note>.ico{width:22px;height:22px;flex:none;margin-top:2px}
.scam-note ul{margin:6px 0;padding-left:18px;font-size:.88rem}.scam-note small{color:var(--muted);font-size:.8rem}
.scam-note.high{background:color-mix(in srgb,var(--bad) 10%,transparent);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}.scam-note.high>.ico,.scam-note.high b{color:#b91c1c}
.scam-note.caution{background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}.scam-note.caution>.ico,.scam-note.caution b{color:var(--accent)}
.emp-setup{max-width:760px}
.emp-co{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.emp-co>div:nth-child(2){flex:1;min-width:200px}
.emp-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.emp-way{display:flex;flex-direction:column;gap:8px;position:relative}.emp-way h3{margin:0}.emp-way p{margin:0;font-size:.88rem}.emp-way>.chip{align-self:flex-start}
.emp-n{position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 .8rem var(--mono);color:var(--accent);border:1px solid var(--line2)}
.emp-code{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--text) 5%,transparent);min-width:0}.emp-code code{flex:1;font-size:.78rem;word-break:break-all}
.emp-doc{padding:6px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.emp-post,.emp-app{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.emp-resume{white-space:pre-wrap;font-size:.85rem;max-height:60vh;overflow:auto;margin:0}
.modal.modal-wide{width:min(820px,100%)}
@media (max-width:980px){.emp-ways{grid-template-columns:1fr}}
@media (max-width:600px){.grid3{grid-template-columns:1fr}}
.cp-voice{align-items:center;margin-bottom:8px;flex-wrap:wrap}
.cp-mock{display:flex;gap:14px;align-items:center;justify-content:space-between;margin:0 0 12px;border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.btn.rec{color:#b91c1c;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 60%,transparent)}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--bad);animation:recp 1s infinite}
@keyframes recp{50%{opacity:.3}}
.idv-admin h3 .ico{color:#0284c7;vertical-align:-3px}
.idv-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.idv-steps li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.45}
.idv-steps li .ico{flex:none;width:16px;height:16px;margin-top:2px}
.idv-steps li.ok .ico{color:var(--good)}.idv-steps li.no .ico{color:var(--bad)}.idv-steps li.info .ico{color:var(--info)}
.idv-steps code{font-size:.78rem;word-break:break-all}
.idv-manual{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.toolbar .switch.sm{white-space:nowrap}
.idv-search{position:relative;max-width:420px}.idv-search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim)}.idv-search input{padding-left:38px}
.idv-found{display:grid;gap:6px;margin-top:8px;max-width:620px}
.idv-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--text) 4%,transparent)}
.idv-row small{display:block;overflow:hidden;text-overflow:ellipsis}
.mid{font:500 .72rem var(--mono);color:var(--accent2);opacity:.85;margin-top:2px}
.mid-copy{display:flex!important;align-items:center;gap:6px;width:auto!important;margin-top:6px;padding:4px 8px!important;border-radius:7px!important;font:500 .74rem var(--mono)!important;color:var(--muted)!important;background:color-mix(in srgb,var(--text) 5%,transparent)!important}
.mid-copy b{color:var(--accent);font-weight:600}.mid-copy .ico{width:12px;height:12px}
.acct-id{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.acct-id h3{margin:0}
.acct-mid{display:grid;grid-template-columns:auto auto;gap:4px 12px;align-items:center}.acct-mid b{font:600 1.05rem var(--mono);color:var(--accent)}.acct-mid small:last-child{grid-column:1/-1}

/* ---------- side rail & ad space ---------- */
.rail-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.side-rail{position:sticky;top:90px;display:grid;gap:14px}
@media (max-width:1060px){.rail-grid{grid-template-columns:1fr}.side-rail{position:static;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.rail-foot{grid-column:1/-1}}
.mprof{max-width:none}
.ad-card{display:grid;gap:10px;padding:16px}
.ad-label{display:flex;align-items:center;gap:4px;font:600 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}.ad-label .ico{width:12px;height:12px}
.ad-body{display:flex;gap:12px;align-items:flex-start}.ad-body b{display:block;font-size:.95rem}.ad-body p{margin:3px 0 0;font-size:.85rem;color:var(--muted);line-height:1.45}
.ad-ic{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid var(--line2)}
.ad-ic.sp{font:700 1rem var(--hfont)}
.ad-card .btn{justify-self:center}
.ad-card.compact{grid-template-columns:1fr auto;align-items:center}.ad-card.compact .ad-label{grid-column:1/-1}
.trend{gap:4px}.trend>b{margin-bottom:4px}
.trend-item{display:grid;gap:2px;padding:8px;margin:0 -8px;border-radius:9px;color:var(--text)}.trend-item:hover{background:color-mix(in srgb,var(--text) 5%,transparent);text-decoration:none}
.trend-t{font-size:.88rem;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.trend-item small{font-size:.74rem}
.ns-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.ns-grid b{display:block;font:700 1.05rem var(--hfont);color:var(--accent)}.ns-grid small{font-size:.7rem;color:var(--muted)}
.tip-card p{margin:0;font-size:.88rem;line-height:1.5}
.rail-foot{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:.74rem;color:var(--dim);padding:0 8px}.rail-foot a{color:var(--dim)}.rail-foot span{width:100%;text-align:center}
.ads-table td{vertical-align:top}

/* ---------- video mock interview ---------- */
.vi-setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:8px}
@media (max-width:860px){.vi-setup{grid-template-columns:1fr}}
.vi-points{list-style:none;padding:0;margin:12px 0;display:grid;gap:6px;font-size:.86rem;color:var(--muted)}.vi-points li{display:flex;gap:8px}.vi-points .ico{flex:none;width:15px;height:15px;margin-top:2px;color:var(--accent)}
.vi-camwrap{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;border:1px solid var(--line2)}
.vi-cam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.vi-cam-msg{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;color:var(--dim);font-size:.88rem}.vi-cam-msg .ico{width:32px;height:32px}
.vi-meter{height:5px;border-radius:3px;background:color-mix(in srgb,var(--text) 8%,transparent);margin-top:8px;overflow:hidden}.vi-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--good),var(--accent));transition:width .1s}
.vi-room{display:grid;gap:16px}
.vi-progress{display:flex;gap:6px}.vi-progress i{width:34px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--text) 10%,transparent)}.vi-progress i.done{background:var(--good)}.vi-progress i.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.vi-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}
@media (max-width:860px){.vi-grid{grid-template-columns:1fr}}
.vi-left{display:grid;gap:12px;align-content:start}
.vi-ai{display:grid;justify-items:center;gap:2px;padding:18px;border-radius:16px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--info) 14%,transparent),transparent 70%),color-mix(in srgb,var(--text) 3%,transparent);border:1px solid var(--line)}
.vi-ai-face{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--info),var(--accent));margin-bottom:8px}
.vi-ai-face .ico{width:40px;height:40px;stroke-width:1.6}
.vi-ai-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid color-mix(in srgb,var(--info) 60%,transparent);opacity:0}
.vi-ai.talking .vi-ai-ring{animation:viring 1.4s ease-out infinite}.vi-ai.talking .vi-ai-ring.r2{animation-delay:.7s}
@keyframes viring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.vi-qn{font:600 .74rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent2)}
.vi-q{font:600 1.25rem/1.4 var(--hfont)}
.vi-right{display:grid;gap:10px}
.vi-rec{position:absolute;top:12px;left:12px;display:none;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:700 .72rem var(--mono)}.vi-rec.on{display:flex}.vi-rec i{width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:recp 1s infinite}
.vi-timer{position:absolute;top:12px;right:12px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 .78rem var(--mono)}.vi-timer.warn{color:#b91c1c}
.vi-cap{min-height:84px;max-height:150px;overflow:auto;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);font-size:.95rem;line-height:1.5}
.vi-ctrl{justify-content:flex-end}
.vi-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}
@media (max-width:760px){.vi-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vi-tile{display:grid;gap:2px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--line)}
.vi-tile>b{font:700 1.5rem var(--hfont)}.vi-tile>b.good{color:var(--good)}.vi-tile>b.ok{color:var(--accent)}.vi-tile>b.low{color:var(--bad)}.vi-tile small:last-child{font-size:.76rem;color:var(--muted)}
.vi-ans{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--surface2);margin-top:10px}
.vi-ans-h{display:flex;gap:10px;align-items:center;cursor:pointer;list-style:none}.vi-ans-h::-webkit-details-marker{display:none}.vi-ans-h b{flex:1}
.vi-ans.skipped{opacity:.6}
.vi-ans-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;margin-top:12px}
@media (max-width:860px){.vi-ans-grid{grid-template-columns:1fr}}
.vi-clip{display:grid;gap:8px;align-content:start}.vi-clip video{width:100%;border-radius:12px;background:#000;transform:scaleX(-1)}.vi-clip .btn{justify-self:start}
.vi-tr{white-space:pre-wrap;color:var(--muted);font-size:.92rem;line-height:1.55;margin:0 0 10px}
.vi-del li .ico{color:var(--info)}
.acct-mid{grid-template-columns:auto auto auto}.acct-mid small:last-child{grid-column:1/-1}
.mid-copy{white-space:nowrap}.menu .who{white-space:normal}

/* certifications: compact tiles (a bit bigger than a thumbnail) */
.wl-certs{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.wl-cert{gap:5px;padding:11px 12px;border-radius:13px;min-height:132px}
.wl-cert::after{right:-30px;top:-30px;width:90px;height:90px}
.wl-cert .wl-chip-ico{width:22px;height:22px;border-radius:7px}.wl-cert .wl-chip-ico .ico{width:12px;height:12px}
.wl-cert .wl-issuer{font-size:.6rem;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wl-cert-name{font-size:.86rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.wl-cert-meta{gap:2px 8px;font-size:.68rem;line-height:1.3}
.wl-cert-foot{gap:6px}.wl-cert-foot code{display:none}
.wl-cert-foot a{font-size:.72rem}.wl-cert-foot a svg{width:12px;height:12px}
.wl-cert-foot .icon-btn{width:26px;height:26px;border-radius:8px}.wl-cert-foot .icon-btn svg{width:13px;height:13px}
.wl-cert-foot .wl-edit{display:flex;gap:4px;margin-left:auto}
@media (max-width:520px){.wl-certs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.wl-certs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* milestones: compact badge tiles */
.wl-badges{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.wl-badge{gap:4px;padding:11px 8px;border-radius:13px}
.wl-badge-ico{width:34px;height:34px}.wl-badge-ico svg{width:16px;height:16px}
.wl-badge b{font-size:.78rem;line-height:1.2}.wl-badge small{font-size:.66rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:520px){.wl-badges{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* projects & achievements: compact tiles instead of full-width rows */
.wl-items{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.wl-item{position:relative;flex-direction:column;gap:6px;padding:11px 12px;border-radius:13px;min-height:132px}
.wl-item-ico{width:28px;height:28px;border-radius:8px}.wl-item-ico svg{width:14px;height:14px}
.wl-item-top small{font-size:.6rem}
.wl-item-body{gap:1px}
.wl-item-body b{font-size:.86rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wl-item-body .dim{font-size:.74rem}
.wl-item-body p{margin:4px 0 0;font-size:.74rem;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.wl-item-body a{font-size:.72rem;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-item .wl-edit{display:flex;gap:4px;margin-top:auto;justify-content:flex-end}
.wl-item .wl-edit .icon-btn{width:26px;height:26px;border-radius:8px}.wl-item .wl-edit .icon-btn svg{width:13px;height:13px}
.wl-item .wl-item-ico{position:absolute;top:11px;right:12px}.wl-item .wl-item-top{padding-right:34px}
@media (max-width:520px){.wl-items{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* same compact look on member profiles */
.mp-certs{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}.mp-cert{padding:9px 10px;font-size:.82rem}.mp-cert small{font-size:.68rem}
.mp-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.mp-item{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--text) 3%,transparent)}.mp-item:last-child{border:1px solid var(--line)}
.mp-item b{font-size:.86rem}.mp-item small{font-size:.7rem}.mp-item p{font-size:.76rem;margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* ---------- wallet tiles: certs with vendor badge art, milestones, projects (thumbnail+ size) ---------- */
.wl-certs{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wl-cert{align-items:center;text-align:center;gap:4px;padding:14px 10px 10px;min-height:0;border-radius:14px}
.wl-cert::after{right:-28px;top:-28px;width:80px;height:80px;opacity:.7}
.wl-cert .wl-feat{position:absolute;top:8px;left:8px;z-index:1}
.wl-cert-artlink{display:block;line-height:0}
.wl-cert-art{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));transition:transform .2s;position:relative;z-index:1}
.wl-cert:hover .wl-cert-art{transform:translateY(-2px) scale(1.04)}
.wl-cert-name{font:700 .8rem/1.25 var(--hfont);margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em}
.wl-cert .wl-issuer{font:600 .58rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:color-mix(in srgb,var(--ic) 70%,var(--muted));max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-cert-meta{justify-content:center;font-size:.66rem}
.wl-cert-foot{width:100%;justify-content:center;gap:4px;margin-top:4px;min-height:26px}
.wl-cert-foot .wl-verify{font-size:.7rem;font-weight:600;display:inline-flex;align-items:center;gap:3px}.wl-cert-foot .wl-verify svg{width:11px;height:11px}
.wl-cert-foot .wl-edit{margin-left:0;display:flex;gap:2px}
.wl-cert-foot .wl-edit .icon-btn{width:24px;height:24px;border-radius:7px}.wl-cert-foot .wl-edit .icon-btn svg{width:12px;height:12px}
@media (hover:hover){.wl-cert .wl-edit,.wl-item .wl-edit{opacity:0;transition:opacity .15s}.wl-cert:hover .wl-edit,.wl-cert:focus-within .wl-edit,.wl-item:hover .wl-edit,.wl-item:focus-within .wl-edit{opacity:1}}
@media (max-width:520px){.wl-certs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wl-badges{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.wl-badge{gap:3px;padding:10px 6px;border-radius:12px}
.wl-badge-ico{width:34px;height:34px}.wl-badge-ico svg{width:16px;height:16px}
.wl-badge b{font-size:.72rem;line-height:1.2}.wl-badge small{font-size:.62rem;line-height:1.25;-webkit-line-clamp:2}
@media (max-width:520px){.wl-badges{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wl-items{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.wl-item{min-height:0;padding:12px;border-radius:14px;gap:4px}
.wl-item-body p{-webkit-line-clamp:2}
.mp-certs{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.mp-cert{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 8px;color:var(--text)}.mp-cert:hover{text-decoration:none;background:color-mix(in srgb,var(--text) 7%,transparent)}
.mp-cert img{width:56px;height:56px;object-fit:contain}.mp-cert b{font-size:.76rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mp-cert small{font-size:.62rem}
.wl-cert{box-shadow:0 6px 16px -12px var(--ic);background:linear-gradient(160deg,color-mix(in srgb,var(--ic) 18%,#111725),#111725 65%);border-color:color-mix(in srgb,var(--ic) 35%,transparent)}
.wl-items{align-items:start}
.page-ad{margin:18px 0 0}.page-ad .ad-card,.list .ad-card{border-style:dashed;border-color:var(--line2)}

.m-ad{width:min(360px,100%);margin-top:18px;text-align:left}
.list>.ad-card.compact{margin:2px 0}
.ad-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 16px;margin-top:10px}
.ad-places{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 14px}
.ad-places label{display:flex;gap:8px;align-items:center;font-size:.86rem}
.nav-av.lock{background:color-mix(in srgb,var(--text) 8%,var(--surface2));color:var(--muted)}.nav-av.lock .ico{width:40%;height:40%}
.pcard.private .pcard-cover{background:linear-gradient(120deg,color-mix(in srgb,var(--text) 10%,#141008),#0b0f18)}
.idv-backup{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}.idv-backup select{width:auto}
.idv-prov{margin-top:14px;padding:14px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--text) 3%,transparent)}.idv-prov h4{margin:0 0 4px}
.idv-prov .grid3{gap:8px;margin-top:10px}

/* ---------- post media ---------- */
.f-media-btns{display:flex;gap:4px}
.f-tray{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.f-tray-i{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid var(--line2)}
.f-tray-i img{width:100%;height:100%;object-fit:cover}
.f-tray-i.vid{width:200px}
.f-tray-v{display:grid;place-items:center;align-content:center;gap:4px;height:100%;padding:8px;text-align:center}.f-tray-v small{font-size:.7rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-tray-x{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:0;background:rgba(0,0,0,.65);color:#fff;cursor:pointer}.f-tray-x .ico{width:12px;height:12px}
.f-prog{position:absolute;left:6px;right:6px;bottom:6px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}.f-prog i{display:block;height:100%;background:var(--accent);transition:width .2s}
.f-compose>input.input{margin-top:10px}
.f-imgs{display:grid;gap:4px;margin-top:12px;border-radius:12px;overflow:hidden}
.f-imgs.n1{grid-template-columns:1fr}.f-imgs.n2{grid-template-columns:1fr 1fr}.f-imgs.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}.f-imgs.n3 .f-img:first-child{grid-row:1/3}.f-imgs.n4{grid-template-columns:1fr 1fr}
.f-img{display:block;padding:0;border:0;background:#000;cursor:zoom-in;line-height:0}
.f-img img{width:100%;height:100%;max-height:520px;object-fit:cover}
.f-imgs.n2 .f-img img,.f-imgs.n4 .f-img img{aspect-ratio:1/1}.f-imgs.n3 .f-img img{aspect-ratio:1/1}.f-imgs.n3 .f-img:first-child img{aspect-ratio:auto;height:100%}
.f-video,.f-yt,.f-yt-frame{margin-top:12px;border-radius:12px;overflow:hidden;background:#000}
.f-video video{display:block;width:100%;max-height:560px}
.f-yt{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;aspect-ratio:16/9}.f-yt img{width:100%;height:100%;object-fit:cover;opacity:.9}
.f-yt-play{position:absolute;inset:0;display:grid;place-items:center}.f-yt-play .ico{width:68px;height:68px;color:#ff3d3d;stroke:#fff;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))}
.f-yt:hover .f-yt-play .ico{transform:scale(1.06)}
.f-yt-frame{aspect-ratio:16/9}.f-yt-frame iframe{width:100%;height:100%;border:0}
.lb{display:grid;justify-items:center}.lb-img{max-width:100%;max-height:75vh;border-radius:10px}

/* ---------- ad formats ---------- */
.ad-fmts{flex-wrap:wrap}
.ad-prev{margin-top:8px;max-width:360px}.ad-prev img,.ad-prev video{width:100%;border-radius:10px;display:block}
.ad-html{font-family:var(--mono);font-size:.8rem}
.ad-card .ad-creative-link,.ad-card .ad-banner-link{display:block;line-height:0;border-radius:10px;overflow:hidden}
.ad-card img.ad-creative,.ad-card video.ad-creative{width:100%;height:auto;max-height:420px;object-fit:cover;display:block;background:#000}
.ad-card .f-yt.ad-creative,.ad-card .f-yt-frame.ad-creative{margin-top:0}
.ad-card.banner{padding:10px}.ad-card.banner .ad-label{margin-bottom:2px}
.ad-frame{width:100%;border:0;display:block;border-radius:8px;background:transparent}
.ad-card ins.adsbygoogle{min-height:90px}
.ad-card.compact.has-creative{grid-template-columns:1fr}
.ads-google{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.ads-google summary{cursor:pointer}

/* ---------- Settings (LinkedIn-style) ---------- */
.st-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start;max-width:1100px}
.st-nav{position:sticky;top:90px;display:grid;gap:2px}
.st-me{display:flex;align-items:center;gap:12px;padding:6px 10px 16px}.st-me h1{margin:0;font-size:1.6rem}
.st-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-left:3px solid transparent;color:var(--muted);font-weight:600;border-radius:0 10px 10px 0}
.st-nav a:hover{background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);text-decoration:none}
.st-nav a.on{color:var(--accent);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.st-body{display:grid;gap:16px;min-width:0}.st-body>.card{margin:0!important}
.st-group{padding:0;overflow:hidden}.st-group h2{margin:0;padding:20px 22px 8px;font-size:1.15rem}
.st-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 22px;border-top:1px solid var(--line);color:var(--text)}
.st-group h2+.st-row{border-top:0}
a.st-row:hover{background:color-mix(in srgb,var(--text) 4%,transparent);text-decoration:none}
.st-l{font-size:.95rem}.st-d{font-size:.82rem;color:var(--muted);margin-top:2px;max-width:560px}
.st-c{display:flex;align-items:center;gap:8px;flex:none;color:var(--muted);font-size:.86rem}.st-c select{width:auto;max-width:260px}
.st-note{margin:0;padding:6px 22px 14px;font-size:.86rem;color:var(--muted)}
.st-sub{margin:10px 0 0}
@media (max-width:820px){.st-wrap{grid-template-columns:1fr}.st-nav{position:static;display:flex;overflow-x:auto;scrollbar-width:none}.st-me{display:none}.st-nav a{border-left:0;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;white-space:nowrap;padding:10px 12px}.st-nav a.on{border-bottom-color:var(--accent)}}
.reduce-motion *{animation:none!important;transition:none!important}

/* ---------- profile page (LinkedIn-style) ---------- */
.pf-tabs{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.pf-vote{flex:1 1 450px;min-width:0}.pf-vote:empty{display:none}
.vote-banner{display:flex;align-items:center;gap:10px;height:100%;min-height:46px;padding:5px 6px 5px 6px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:12px;background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface) 80%);box-shadow:inset 3px 0 0 var(--accent)}
.vote-bn-ic{flex:none;width:36px;height:36px;margin-left:4px;border-radius:9px;display:grid;place-content:center;text-align:center;background:color-mix(in srgb,var(--accent) 18%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);line-height:1}
.vote-bn-ic b{font:800 .95rem var(--mono);color:var(--accent)}.vote-bn-ic small{font:600 .5rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.vote-bn-txt{display:grid;gap:1px;min-width:0;flex:1;color:inherit;text-decoration:none;line-height:1.2}.vote-bn-txt:hover b{color:var(--accent)}
.vote-bn-txt .ann-k{font-size:.56rem;white-space:nowrap}.vote-bn-txt b{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vote-bn-txt .dim{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vote-bn-acts{display:flex;gap:6px;flex:none}.vote-bn-acts .btn{font-size:.74rem;padding:6px 10px;white-space:nowrap}
.vote-bn-x{flex:none}

@media (max-width:520px){.vote-banner{flex-wrap:wrap;height:auto;padding:8px}.vote-bn-txt{flex:1 1 0}.vote-bn-acts{order:5;width:100%}.vote-bn-acts .btn{flex:1;justify-content:center}.pf-tabs .seg{margin-left:auto}}
.bc-livenote{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--info) 40%,transparent);background:color-mix(in srgb,var(--info) 10%,var(--surface));font-size:.84rem}
.bc-livenote div{display:grid;gap:2px}.bc-livenote svg{flex:none;color:var(--info);margin-top:2px}
.pf-hero{padding:0;overflow:hidden}
.pf-cover{position:relative;height:190px;background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--info) 28%,transparent),transparent 55%),linear-gradient(120deg,color-mix(in srgb,var(--accent) 45%,#0c111b),#0b0f18 70%),repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.04) 22px 23px)}
.pf-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pf-edit{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--text);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.pf-edit:hover{background:var(--surface2)}.pf-edit .ico{width:16px;height:16px}
.pf-cover-edit{position:absolute;top:14px;right:14px}
.pf-top{display:flex;justify-content:space-between;align-items:flex-start;padding:0 24px}
.pf-photo{margin-top:-92px}.pf-photo .wl-photo{border-radius:50%;box-shadow:0 0 0 5px var(--surface)}
.pf-photo .ph.xl,.pf-photo .wl-photo>*:first-child{width:160px;height:160px}
.pf-top .pf-edit{margin-top:14px}
.pf-main{display:flex;justify-content:space-between;gap:24px;padding:6px 24px 0;flex-wrap:wrap}
.pf-id{min-width:0;flex:1 1 320px}
.pf-id h1{margin:0;font-size:1.75rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-hl{margin:6px 0 0;font-size:1.02rem;line-height:1.4}
.pf-loc{margin:8px 0 0;color:var(--muted);font-size:.9rem}
.pf-conn{margin:6px 0 0;font-size:.9rem}.pf-conn a{font-weight:600}
.pf-orgs{display:grid;gap:10px;align-content:start;min-width:220px;max-width:300px;padding-top:6px}
.pf-orgs>div{display:flex;gap:10px;align-items:center;font-size:.9rem}
.pf-org-ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.pf-org-ic .ico{width:16px;height:16px}
.pf-orgs.inline{display:flex;flex-wrap:wrap;gap:14px;max-width:none;margin-top:8px;padding:0}
.pf-acts{padding:16px 24px 6px;gap:8px;flex-wrap:wrap}
.pf-acts .btn.sm:first-child{border-radius:999px;padding:8px 18px}.pf-acts .pop>.btn,.pf-acts>.btn{border-radius:999px}
.pf-links{padding:4px 24px 20px}
.pf-hero>.pf-acts:last-child{padding-bottom:20px}
.pf-nudges{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:12px 0 16px}
.pf-nudge{position:relative;padding:16px 40px 14px 16px}.pf-nudge b{display:block;font-size:.92rem}.pf-nudge p{margin:4px 0 8px;font-size:.84rem;color:var(--muted)}
.pf-nudge a,.pf-nudge .linkish{font-weight:600;font-size:.86rem}
.pf-x{position:absolute;top:10px;right:10px}
.pf-side .spread{font-size:.88rem}.pf-side .wl-strength{display:flex;gap:12px;align-items:center}
.contact-modal,.pf-contact{display:grid;gap:14px}.pf-contact>div{display:flex;gap:12px;align-items:flex-start}.pf-contact b{display:block;font-size:.84rem}.pf-contact .ico{margin-top:3px;color:var(--accent)}
.mp-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.pf-cover{height:120px}.pf-photo{margin-top:-60px}.pf-photo .ph.xl,.pf-photo .wl-photo>*:first-child{width:110px;height:110px}.pf-id h1{font-size:1.4rem}.pf-orgs{max-width:none}}

img.js-logo{object-fit:contain;background:#fff;padding:4px}
.emp-logo{width:84px;height:84px;flex:none;border-radius:20px;object-fit:contain;background:#fff;padding:6px;border:1px solid var(--line2)}
.emp-logo.sm{width:32px;height:32px;border-radius:8px;padding:2px}
.emp-logo-prev img{width:84px;height:84px;border-radius:20px;object-fit:contain;background:#fff;padding:6px;border:1px solid var(--line2);display:block}

/* intro offer */
.intro-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:0 auto 22px;padding:12px 16px;max-width:760px;border-radius:14px;text-align:center;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 10%,transparent));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.intro-tag{display:inline-flex;align-items:center;gap:4px;font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-accent,#fff);background:var(--accent);padding:5px 8px;border-radius:6px}
.intro-tag .ico{width:12px;height:12px}
.pprice s.was{color:var(--dim);font-size:1.05rem;margin-right:8px;text-decoration-thickness:2px}
.intro-note{color:var(--accent);font-weight:600}
.intro-admin{margin-top:12px;padding:12px;border-radius:12px;border:1px dashed var(--line2)}
.co-lines .co-code,.co-code{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:6px 0 8px}.co-code .row{gap:8px;flex-wrap:nowrap}.co-code .input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.06em}.co-code .bad{color:var(--bad)}
.intro-banner.promo{border-color:color-mix(in srgb,var(--accent2) 55%,transparent)}
.disc-applies{display:flex;flex-wrap:wrap;gap:6px 14px}.disc-applies .chk{display:inline-flex;align-items:center;gap:6px;font-size:.88rem}

/* ad card: eye-catching label + call to action (amber scheme) */
.ad-card{position:relative;overflow:hidden}
.ad-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);opacity:.75}
.ad-label{gap:8px;flex-wrap:wrap}
.ad-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 8px;border-radius:999px;font:700 .64rem/1 var(--mono);letter-spacing:.14em;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.ad-dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);box-shadow:0 0 8px var(--accent2);animation:addot 2s ease-in-out infinite}
@keyframes addot{50%{opacity:.35}}
.ad-sponsor{font:600 .7rem var(--mono);letter-spacing:.1em;color:var(--muted)}
.ad-card .btn.ad-cta{justify-self:stretch;margin-top:4px;padding:10px 16px;border-radius:11px;box-shadow:0 6px 22px -10px var(--accent),inset 0 0 0 1px color-mix(in srgb,#fff 18%,transparent)}
.ad-cta-in{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}
.ad-cta .ico{width:15px;height:15px;transition:transform .2s}
.ad-cta:hover{text-decoration:none;filter:brightness(1.08)}.ad-cta:hover .ico{transform:translate(2px,-2px)}
.ad-cta.house:hover .ico{transform:translateX(3px)}
.ad-card.compact .btn.ad-cta{justify-self:center;margin-top:0}
.ad-card.banner .btn.ad-cta{margin-top:2px}
.reduce-motion .ad-dot{animation:none}
@media (prefers-reduced-motion:reduce){.ad-dot{animation:none}}

/* Premium */
.vbadge.b-prem{color:var(--on-accent,#fff);background:linear-gradient(135deg,#9ec0ff,var(--accent) 45%,var(--accent2));box-shadow:0 0 10px -2px color-mix(in srgb,var(--accent) 70%,transparent)}
.prem-card{position:relative;padding:16px 16px 18px;text-align:center;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--surface);border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.prem-card::after{content:"";position:absolute;inset:auto -40% -60% -40%;height:120px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent2) 18%,transparent),transparent);pointer-events:none}
.prem-top{display:flex;align-items:center;gap:8px;text-align:left}
.prem-mark{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--on-accent,#fff);background:linear-gradient(135deg,#9ec0ff,var(--accent) 50%,var(--accent2))}.prem-mark .ico{width:15px;height:15px}
.prem-k{font:700 .66rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);flex:1}
.prem-x{margin-left:auto;opacity:.6}.prem-x:hover{opacity:1}
.prem-hero{display:flex;justify-content:center;margin:14px 0 10px}
.prem-av{position:relative;padding:4px;border-radius:50%;background:conic-gradient(from 210deg,var(--accent2),var(--accent),#9ec0ff,var(--accent2));box-shadow:0 0 28px -6px var(--accent)}
.prem-av .nav-av{border:3px solid var(--surface)}
.prem-av-b{position:absolute;right:-4px;bottom:-2px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--on-accent,#fff);background:linear-gradient(135deg,#9ec0ff,var(--accent));border:3px solid var(--surface)}.prem-av-b .ico{width:13px;height:13px}
.prem-h{font-size:1.02rem;line-height:1.3;margin:0 0 10px}
.prem-perks{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px;text-align:left;font-size:.84rem;color:var(--muted)}
.prem-perks li{display:flex;gap:7px;align-items:flex-start}.prem-perks .ico{width:15px;height:15px;color:var(--good);flex:none;margin-top:2px}.prem-perks b{color:var(--text)}.prem-perks s{color:var(--dim)}
.prem-offer{margin:0 0 12px;font-size:.84rem;color:var(--muted);line-height:1.4}.prem-offer b{color:var(--accent)}.prem-offer .ico{width:14px;height:14px;color:var(--accent);vertical-align:-2px;margin-right:4px}
.prem-cta{width:100%;position:relative;z-index:1;box-shadow:0 8px 26px -10px var(--accent)}
.prem-cta:hover{text-decoration:none;filter:brightness(1.07)}.prem-cta:hover .ico{transform:translateX(3px)}.prem-cta .ico{transition:transform .2s;width:15px;height:15px}
/* side-column footer */
.rail-foot{display:grid;gap:10px;justify-items:center;padding:4px 8px 8px;font-size:.76rem;color:var(--dim)}
.rf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;line-height:1.5}
.rf-links a,.rf-dd summary{color:var(--dim);cursor:pointer}
.rf-links a:hover,.rf-dd summary:hover{color:var(--accent);text-decoration:underline}
.rf-dd{position:relative}.rf-dd summary{list-style:none;display:inline-flex;align-items:center;gap:3px}.rf-dd summary::-webkit-details-marker{display:none}
.rf-dd summary .ico{width:12px;height:12px;transition:transform .2s}.rf-dd[open] summary .ico{transform:rotate(180deg)}
.rf-menu{position:absolute;z-index:30;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);min-width:200px;display:grid;padding:6px;border-radius:12px;background:var(--raise);border:1px solid var(--line2);box-shadow:0 18px 40px -16px #000}
.rf-menu a{padding:8px 10px;border-radius:8px;color:var(--text)!important;text-decoration:none!important;white-space:nowrap}.rf-menu a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.rf-brand{display:flex;align-items:center;gap:6px;color:var(--muted)}.rf-brand .logo{width:18px;height:18px;filter:none}.rf-brand b{font:700 .82rem var(--hfont);color:var(--text)}.rf-brand b span{color:var(--accent)}
.menu a.menu-prem{color:var(--accent);font-weight:600}.menu a.menu-prem .ico{color:var(--accent)}

/* ID verification request queue */
.idq{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.idq-list{display:grid;gap:10px;margin-top:14px}
.idq-row{display:grid;grid-template-columns:auto 1fr minmax(260px,320px);gap:14px;align-items:center;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--text) 3%,transparent);border:1px solid var(--line);transition:opacity .3s,transform .3s}
.idq-row.done{opacity:0;transform:translateX(20px)}
.idq-who{display:grid;gap:2px;min-width:0}.idq-who small{overflow:hidden;text-overflow:ellipsis}
.idq-act{display:grid;gap:8px}.idq-act .row{gap:8px}.idq-act .row .btn{flex:1}
@media (max-width:760px){.idq-row{grid-template-columns:auto 1fr}.idq-act{grid-column:1/-1}}

/* Notifications page */
.n-grid{align-items:start}
.n-me{text-align:left}.n-me .nm{font:700 1.05rem var(--hfont);color:var(--text)}.n-me .hl{margin:4px 0 2px;font-size:.84rem;color:var(--muted)}
.n-manage{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:14px 16px;color:var(--text)}.n-manage:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.n-manage span{display:grid;gap:2px}.n-manage small{font-size:.76rem}.n-manage .ico{color:var(--accent)}
.n-filters{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;margin-bottom:10px}
.n-chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--text);font:600 .84rem var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.n-chip:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.n-chip.on{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--accent2)));color:var(--on-accent,#fff);border-color:transparent;box-shadow:0 4px 16px -8px var(--accent)}
.n-list{padding:0;overflow:visible}
.n-item{position:relative;display:grid;grid-template-columns:10px 46px 1fr auto;gap:12px;align-items:start;padding:14px 14px 14px 8px;border-bottom:1px solid var(--line);transition:background .15s,opacity .25s}
.n-item:last-child{border-bottom:0}.n-item:hover{background:color-mix(in srgb,var(--text) 3%,transparent)}
.n-item.unread{background:color-mix(in srgb,var(--accent) 7%,transparent)}.n-item.unread:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.n-item.gone{opacity:0}
.n-dot{width:8px;height:8px;border-radius:50%;margin-top:18px;background:transparent}.n-item.unread .n-dot{background:var(--accent2);box-shadow:0 0 8px var(--accent2)}
.n-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.n-ic .ico{width:20px;height:20px}
.k-posts .n-ic{color:var(--accent2);background:color-mix(in srgb,var(--accent2) 12%,transparent);border-color:color-mix(in srgb,var(--accent2) 28%,transparent)}
.k-network .n-ic{color:var(--info);background:color-mix(in srgb,var(--info) 12%,transparent);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.k-account .n-ic{color:var(--muted);background:color-mix(in srgb,var(--text) 6%,transparent);border-color:var(--line2)}
.n-body{display:grid;gap:10px;justify-items:start;min-width:0;padding-top:2px}
.n-text{font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
.n-act{border-radius:999px;padding:6px 14px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent)}
.n-act:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);text-decoration:none}
.n-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;position:relative}
.n-side time{font-size:.74rem;color:var(--dim);white-space:nowrap;padding-top:4px}
.n-more-wrap{position:relative}
.n-menu{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:240px;padding:6px;border-radius:12px;background:var(--raise);border:1px solid var(--line2);box-shadow:0 18px 40px -16px #000}
.n-side.open .n-menu{display:grid}
.n-menu button{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--text);font:500 .86rem var(--font);text-align:left;cursor:pointer}
.n-menu button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}.n-menu .ico{width:16px;height:16px;color:var(--muted)}
@media (max-width:640px){.n-item{grid-template-columns:8px 40px 1fr auto;gap:10px}.n-ic{width:40px;height:40px}}

/* Messaging dock */
.dock-root{position:fixed;right:20px;bottom:0;z-index:60;display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.dock-root>*{pointer-events:auto}
.dock,.dock-chat{width:320px;background:var(--surface);border:1px solid var(--line2);border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 -10px 40px -18px #000,0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);display:flex;flex-direction:column;overflow:hidden}
.dock::before,.dock-chat::before{content:"";height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.8}
.dock-head,.dock-chat-h{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;cursor:pointer;user-select:none}
.dock-head>b{font:700 .95rem var(--hfont);flex:1}
.dock-me{position:relative;display:inline-flex}.dock-on{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--good);border:2px solid var(--surface)}
.dock-tools{display:flex;gap:4px;margin-left:auto}
.dock-tools .icon-btn{width:30px;height:30px}
.dock .dock-tools .icon-btn:last-child .ico{transition:transform .2s}.dock.open .dock-tools .icon-btn:last-child .ico{transform:rotate(180deg)}
.dock-panel{display:none;height:min(460px,60vh);flex-direction:column;border-top:1px solid var(--line)}
.dock.open .dock-panel{display:flex}
.dock-searchrow{padding:8px 10px}.dock-search{width:100%}
.dock-list{flex:1;overflow:auto;padding:0 4px 6px}
.dock-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:10px;background:none;color:var(--text);text-align:left;cursor:pointer}
.dock-row:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.dock-row.unread .dock-row-b>small{color:var(--text);font-weight:600}
.dock-row-b{display:grid;gap:1px;min-width:0;flex:1}.dock-row-b b{font-size:.88rem;display:flex;align-items:center;gap:4px}.dock-row-b small{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-row .badge{flex:none}
.dock-empty{padding:12px;font-size:.84rem;margin:0}
.dock-pick{border-bottom:1px solid var(--line);padding:4px 6px 8px;max-height:220px;overflow:auto}.dock-pick-h{display:flex;justify-content:space-between;align-items:baseline;padding:4px 6px}
.dock-chat{height:440px;transition:height .2s}
.dock-chat.min{height:auto}.dock-chat.min .dock-msgs,.dock-chat.min .dock-compose{display:none}
.dock-chat-h{border-bottom:1px solid var(--line)}
.dock-who{display:grid;min-width:0;color:var(--text)}.dock-who:hover{text-decoration:none}.dock-who b{font-size:.9rem;display:flex;gap:4px;align-items:center;white-space:nowrap;overflow:hidden}.dock-who small{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-msgs{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.dock-day{align-self:center;font:600 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:6px 0}
.dock-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:85%}.dock-msg.mine{align-self:flex-end;align-items:flex-end}
.dock-bub{padding:8px 11px;border-radius:14px 14px 14px 4px;background:color-mix(in srgb,var(--text) 7%,transparent);font-size:.88rem;line-height:1.42;overflow-wrap:anywhere;white-space:pre-wrap}
.dock-msg.mine .dock-bub{border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--accent2)));color:var(--on-accent,#fff)}
.dock-msg.mine .dock-bub a{color:var(--on-accent,#fff);text-decoration:underline}
.dock-msg time{font-size:.66rem;color:var(--dim);margin-top:2px}
.dock-compose{display:flex;gap:8px;align-items:flex-end;padding:8px 10px;border-top:1px solid var(--line)}
.dock-input{flex:1;resize:none;min-height:38px;max-height:120px;font-size:.88rem}
.dock-send{width:38px;height:38px;padding:0}.dock-send .ico{width:16px;height:16px}
body.app .wrap{padding-bottom:20px}
@media (max-width:899px){.dock-root{display:none}}
.dock-searchrow .input{width:100%;max-width:none}
.n-me>small{display:block;padding:0 16px 14px;margin-top:-2px}
.dock-compose textarea.input.dock-input{height:40px;min-height:40px;padding:9px 12px;line-height:1.35}
.dock-searchrow input.input.dock-search{width:100%;display:block}

/* Advertise (self-serve) */
.adv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.adv-stats .card{padding:14px 16px;display:grid;gap:2px}.adv-stats b{font:700 1.3rem var(--hfont);color:var(--accent)}.adv-stats small{color:var(--muted);font-size:.8rem}
@media (max-width:760px){.adv-stats{grid-template-columns:1fr 1fr}}
.adv-closed{display:flex;gap:12px;align-items:flex-start}.adv-closed>.ico{color:var(--accent);flex:none;margin-top:2px}
.adv-camp{display:grid;grid-template-columns:260px 1fr;gap:18px;align-items:start}
@media (max-width:700px){.adv-camp{grid-template-columns:1fr}}
.adv-prev .ad-card,.sell-prev .ad-card{margin:0;pointer-events:none}
.adv-kpis{display:flex;gap:18px}.adv-kpis div{display:grid}.adv-kpis b{font:700 1.1rem var(--hfont)}.adv-kpis small{color:var(--dim);font-size:.74rem}
.adv-how ol{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--muted)}.adv-how b{color:var(--text)}
.adv-editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.adv-live{position:sticky;top:0;display:grid;gap:8px}
@media (max-width:820px){.adv-editor{grid-template-columns:1fr}.adv-live{position:static}}
.adv-fmt{flex-wrap:wrap}
.adv-slots{display:grid;gap:6px}
.adv-slot{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;border:1px solid var(--line2);cursor:pointer}
.adv-slot:has(input:checked){border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.adv-slot span{display:grid}.adv-slot small{font-size:.76rem}.adv-slot em{font-style:normal;font-weight:600;color:var(--accent);font-size:.86rem}
.adv-terms{padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--text) 4%,transparent);font-size:.84rem}.adv-terms p{margin:4px 0 0;color:var(--muted);white-space:pre-wrap}
.adv-sum{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.adv-total{font:700 1.4rem var(--hfont);color:var(--accent)}
.label.chk,label.chk{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--muted)}label.chk input{margin-top:3px}
.sell-card{display:grid;gap:12px}
.sell-prices summary{cursor:pointer;font-weight:600;color:var(--accent);margin-bottom:10px}
.sell-rates{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:10px}
.sell-rate{display:flex;align-items:center;gap:6px}.sell-rate i{font-style:normal;color:var(--dim)}.sell-rate small{color:var(--dim);white-space:nowrap}
.sell-queue{display:grid;gap:12px}
.sell-item{display:grid;grid-template-columns:240px 1fr;gap:16px;padding:12px;border-radius:12px;border:1px solid var(--line2)}
@media (max-width:700px){.sell-item{grid-template-columns:1fr}}
.modal.wide{width:min(1000px,96vw);max-width:none}

/* one footer style everywhere: in the right column when there's room, in the left column when the right one is hidden,
   and at the bottom of the page on small screens or pages without side columns */
.foot.foot-app{border-top:0;padding:18px 0 28px}
.foot.foot-app .rail-foot{max-width:520px;margin:0 auto}
body:has(.side-rail .rail-foot) .foot-app,body:has(.f-right .rail-foot) .foot-app{display:none}
.f-left .rail-foot{display:none;margin-top:12px}
@media (max-width:1180px) and (min-width:821px){.f-left .rail-foot{display:grid}}
@media (max-width:820px){body:has(.f-right .rail-foot) .foot-app{display:block}}
.rf-links a[data-go="withdraw"]{color:var(--muted)}
/* Home left column extras */
.act-card{display:grid;gap:4px;margin-top:12px}.act-card>b{margin-bottom:4px}
.act-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:.84rem;color:var(--muted)}.act-row b{color:var(--accent)}.act-row:hover{text-decoration:none;color:var(--text)}
.act-prem{display:flex;gap:8px;align-items:flex-start;margin-top:6px;padding:8px 10px;border-radius:10px;font-size:.78rem;line-height:1.35;color:var(--muted);background:color-mix(in srgb,var(--accent) 9%,transparent)}.act-prem .ico{width:15px;height:15px;color:var(--accent);flex:none;margin-top:1px}.act-prem b{color:var(--accent)}.act-prem:hover{text-decoration:none}
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}.act-grid div{display:grid;padding:8px 4px;border-radius:10px;background:color-mix(in srgb,var(--text) 4%,transparent)}.act-grid b{font:700 1.05rem var(--hfont);color:var(--accent)}.act-grid small{font-size:.66rem;color:var(--dim)}
.act-sub{margin-top:8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.act-person{display:flex;gap:8px;align-items:center;padding:5px 0;color:var(--text)}.act-person:hover{text-decoration:none}.act-person span{display:grid;min-width:0}.act-person b{font-size:.82rem;display:flex;gap:4px;align-items:center}.act-person small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-left .ad-left{margin-top:12px}
.detail::-webkit-scrollbar{width:8px}.detail::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 45%,transparent);border-radius:8px}.detail::-webkit-scrollbar-track{background:transparent}
.detail.more-below::after{content:"Scroll for more ↓";position:sticky;bottom:-20px;display:block;margin:0 -20px -20px;padding:26px 0 10px;text-align:center;font:600 .74rem var(--mono);letter-spacing:.08em;color:var(--accent);background:linear-gradient(transparent,var(--surface) 60%);pointer-events:none}
/* dropdowns: always leave room for the arrow */
select.input.sm{padding-right:34px;background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%}
.js-filters select.input{width:auto;min-width:120px;padding-right:36px}
.subnav .badge.soft{background:color-mix(in srgb,var(--text) 14%,transparent);color:var(--text)}
/* Ad sizes. Standard (default) stays compact everywhere; Half page and Full width only when an admin picks them. */
.ad-card.sz-standard img.ad-creative,.ad-card.sz-standard video.ad-creative{max-height:170px;aspect-ratio:auto}
.ad-card.sz-standard .f-yt.ad-creative img{max-height:170px;object-fit:cover}
/* wide spaces (page ads, Home feed, lists): standard ads sit side by side — picture left, words right */
.page-ad .ad-card.sz-standard.has-creative:not(.banner),.f-mid .ad-card.sz-standard.has-creative:not(.banner),.list .ad-card.sz-standard.has-creative:not(.banner),.rail-main .ad-card.sz-standard.has-creative:not(.banner){grid-template-columns:minmax(160px,240px) 1fr;grid-template-areas:"lbl lbl" "pic txt" "pic cta";column-gap:16px;align-items:start}
.page-ad .ad-card.sz-standard.has-creative:not(.banner)>.ad-label,.f-mid .ad-card.sz-standard.has-creative:not(.banner)>.ad-label,.list .ad-card.sz-standard.has-creative:not(.banner)>.ad-label,.rail-main .ad-card.sz-standard.has-creative:not(.banner)>.ad-label{grid-area:lbl}
.page-ad .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative-link,.page-ad .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative,.f-mid .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative-link,.f-mid .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative,.list .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative-link,.list .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative,.rail-main .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative-link,.rail-main .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative{grid-area:pic}
.page-ad .ad-card.sz-standard.has-creative:not(.banner)>.ad-body,.f-mid .ad-card.sz-standard.has-creative:not(.banner)>.ad-body,.list .ad-card.sz-standard.has-creative:not(.banner)>.ad-body,.rail-main .ad-card.sz-standard.has-creative:not(.banner)>.ad-body{grid-area:txt}
.page-ad .ad-card.sz-standard.has-creative:not(.banner)>.btn,.f-mid .ad-card.sz-standard.has-creative:not(.banner)>.btn,.list .ad-card.sz-standard.has-creative:not(.banner)>.btn,.rail-main .ad-card.sz-standard.has-creative:not(.banner)>.btn{grid-area:cta;justify-self:start;align-self:end}
.page-ad .ad-card.sz-standard img.ad-creative,.f-mid .ad-card.sz-standard img.ad-creative,.list .ad-card.sz-standard img.ad-creative,.rail-main .ad-card.sz-standard img.ad-creative,.page-ad .ad-card.sz-standard video.ad-creative,.f-mid .ad-card.sz-standard video.ad-creative,.list .ad-card.sz-standard video.ad-creative,.rail-main .ad-card.sz-standard video.ad-creative{height:135px;max-height:135px;object-fit:cover}
/* standard banners in wide spaces: a slim strip, never a billboard */
.page-ad .ad-card.sz-standard.banner,.f-mid .ad-card.sz-standard.banner,.list .ad-card.sz-standard.banner,.rail-main .ad-card.sz-standard.banner{max-width:728px;margin-left:auto;margin-right:auto}
.page-ad .ad-card.sz-standard.banner img.ad-creative,.f-mid .ad-card.sz-standard.banner img.ad-creative,.list .ad-card.sz-standard.banner img.ad-creative,.rail-main .ad-card.sz-standard.banner img.ad-creative{max-height:120px;object-fit:cover}
@media (max-width:640px){.page-ad .ad-card.sz-standard.has-creative:not(.banner),.f-mid .ad-card.sz-standard.has-creative:not(.banner),.list .ad-card.sz-standard.has-creative:not(.banner),.rail-main .ad-card.sz-standard.has-creative:not(.banner){grid-template-columns:1fr;grid-template-areas:"lbl" "pic" "txt" "cta"}}
/* half page: tall (300×600 style) */
.ad-card.sz-half{max-width:340px;margin-left:auto;margin-right:auto}
.ad-card.sz-half img.ad-creative,.ad-card.sz-half video.ad-creative{max-height:600px;object-fit:contain;background:transparent}
/* full width: the big one, only when chosen */
.ad-card.sz-full img.ad-creative,.ad-card.sz-full video.ad-creative{max-height:420px}
.dock-support{background:color-mix(in srgb,var(--accent) 7%,transparent);margin-bottom:4px}
.dock-sup-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2))}.dock-sup-ic .ico{width:20px;height:20px}
.dock-sup-ic.sm{width:30px;height:30px;border-radius:9px}.dock-sup-ic.sm .ico{width:16px;height:16px}
.ad-ph{display:grid;place-items:center;align-content:center;gap:6px;min-height:120px;aspect-ratio:1200/628;border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--muted);font-size:.78rem;text-align:center;padding:10px}
.ad-ph .ico{width:26px;height:26px;color:var(--accent)}
/* video ads: silent until unmuted */
.ad-vid{position:relative;line-height:0;border-radius:10px;overflow:hidden}
.ad-vid video.ad-creative{border-radius:0}
.ad-snd{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid color-mix(in srgb,#fff 25%,transparent);background:rgba(11,9,4,.72);color:#fff;cursor:pointer;backdrop-filter:blur(4px)}
.ad-snd .ico{width:17px;height:17px}.ad-snd:hover{background:rgba(11,9,4,.9)}.ad-snd.on{color:var(--on-accent,#fff);background:var(--accent);border-color:transparent}
.page-ad .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative-link .ad-vid video,.f-mid .ad-card.sz-standard.has-creative:not(.banner)>.ad-creative-link .ad-vid video{height:135px;object-fit:cover}
/* ---------- modern chat (Messaging page + messaging window) ---------- */
.chat-compose{display:grid;gap:8px;position:relative}
.chat-compose.drag{outline:2px dashed var(--accent);outline-offset:4px;border-radius:14px}
.chat-row{display:flex;align-items:flex-end;gap:8px;padding:6px;border-radius:16px;background:color-mix(in srgb,var(--bg) 70%,var(--surface));border:1px solid var(--line2);transition:border-color .2s,box-shadow .2s}
.chat-row:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.chat-tools{display:flex;gap:2px;align-self:center}
.chat-tool{width:34px;height:34px;border-radius:10px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.chat-tool:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.chat-tool .ico{width:19px;height:19px}.chat-emo-ic{font-size:18px;line-height:1;filter:grayscale(.3)}.chat-tool:hover .chat-emo-ic{filter:none}
.chat-tool.gif-t{font:800 .64rem var(--mono);letter-spacing:.04em;width:auto;padding:0 7px;border:1.5px solid currentColor;height:22px;border-radius:6px;margin:0 4px}
.chat-compose textarea.input.chat-ta{flex:1;min-height:40px;height:40px;max-height:160px;border:0;background:transparent;box-shadow:none;padding:9px 6px;resize:none;line-height:1.4}
.chat-compose textarea.input.chat-ta:focus{box-shadow:none}
.chat-send{border-radius:12px;height:40px;padding:0 16px;flex:none}.chat-send:disabled{opacity:.45;cursor:default}
.chat-compose.compact .chat-send{width:40px;padding:0}.chat-compose.compact .chat-tool{width:30px;height:30px}.chat-compose.compact .chat-tool.gif-t{height:20px;padding:0 5px;margin:0 2px}
.chat-compose.compact .chat-row{flex-wrap:wrap}.chat-compose.compact .chat-tools{order:3;width:100%;justify-content:flex-start;border-top:1px solid var(--line);padding-top:4px}
.chat-tray{display:flex;gap:8px;flex-wrap:wrap}
.chat-tray-i{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--raise);border:1px solid var(--line2)}
.chat-tray-i img{width:100%;height:100%;object-fit:cover}
.chat-tray-v{display:grid;place-items:center;align-content:center;height:100%;gap:2px;color:var(--accent);padding:4px;text-align:center}.chat-tray-v small{font-size:.6rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56px}
.chat-tray-i .f-prog{position:absolute;left:4px;right:4px;bottom:4px}
.chat-tray-x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(0,0,0,.7);color:#fff;cursor:pointer;padding:0}.chat-tray-x .ico{width:12px;height:12px}
.chat-pop{position:fixed;z-index:200;background:var(--raise);border:1px solid var(--line2);border-radius:16px;box-shadow:0 24px 60px -20px #000;padding:8px}
.emo-pop{width:300px}
.emo-tabs{display:flex;gap:2px;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:6px}
.emo-tabs button{flex:1;height:32px;border:0;border-radius:8px;background:none;font-size:17px;cursor:pointer}.emo-tabs button.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.emo-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:220px;overflow:auto}
.emo{height:34px;border:0;border-radius:8px;background:none;font-size:21px;cursor:pointer;line-height:1}.emo:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);transform:scale(1.12)}
.gif-pop{width:340px}
.gif-top{display:flex;gap:6px;margin-bottom:8px}.gif-top .input{flex:1}
.gif-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:300px;overflow:auto}
.gif{padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--surface);line-height:0}.gif img{width:100%;height:auto}.gif:hover{outline:2px solid var(--accent)}
.gif-off{grid-column:1/-1;margin:8px 4px;font-size:.84rem}.gif-by{display:block;text-align:right;color:var(--dim);font-size:.66rem;margin-top:6px}
/* bubbles */
.cm{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:78%;align-self:flex-start}
.cm.mine{align-self:flex-end;align-items:flex-end}
.cm-bub{padding:9px 13px;border-radius:18px 18px 18px 6px;background:color-mix(in srgb,var(--text) 8%,transparent);font-size:.92rem;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.cm.mine .cm-bub{border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 65%,var(--accent2)));color:var(--on-accent,#fff)}
.cm.mine .cm-bub a{color:var(--on-accent,#fff);text-decoration:underline}
.cm-emoji{font-size:2.4rem;line-height:1.1}
.cm-time{font-size:.68rem;color:var(--dim);padding:0 4px}
.cm-att{display:grid;gap:4px;border-radius:16px;overflow:hidden;max-width:320px}
.cm-att.n2,.cm-att.n4{grid-template-columns:1fr 1fr}.cm-att.n3{grid-template-columns:1fr 1fr}.cm-att.n3>:first-child{grid-column:1/-1}
.cm-img{position:relative;padding:0;border:0;cursor:zoom-in;background:var(--raise);line-height:0}.cm-img img{width:100%;max-height:300px;object-fit:cover}
.cm-att.n2 .cm-img img,.cm-att.n3 .cm-img img,.cm-att.n4 .cm-img img{height:140px}
.cm-vid{width:100%;max-height:320px;background:#000;border-radius:0}
.cm-gif{position:relative;line-height:0}.cm-gif img{width:100%;max-height:260px;object-fit:cover}
.cm-gif span,.cm-gif-tag{position:absolute;left:6px;bottom:6px;font:800 .58rem var(--mono);padding:2px 5px;border-radius:4px;background:rgba(0,0,0,.65);color:#fff;line-height:1.3}
.cm-link{display:grid;gap:2px;max-width:320px;padding:10px 12px;border-radius:14px;border:1px solid var(--line2);border-left:3px solid var(--accent);background:var(--raise);color:var(--text)}
.cm-link:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.cm-link small{font:600 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.cm-link b{font-size:.88rem;line-height:1.3}.cm-link span{font-size:.8rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.photo-view{position:fixed;inset:0;z-index:300;background:rgba(5,4,2,.92);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.photo-view img{max-width:100%;max-height:100%;border-radius:12px}.photo-view .icon-btn{position:absolute;top:16px;right:16px}
.dock-msgs .cm{max-width:86%}.dock-msgs .cm-att{max-width:230px}.dock-msgs .cm-link{max-width:230px}.dock-msgs .cm-bub{font-size:.86rem}
.dock-compose{padding:8px}
.dock-chat{height:480px}
.m-msgs{display:flex;flex-direction:column;gap:6px}
.m-compose{padding:10px 14px 14px;border-top:1px solid var(--line)}
/* small ad in messaging */
.mini-ad{padding:8px;border-top:1px solid var(--line)}
.m-side .mini-ad{margin-top:auto}
.mini-ad-b{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent);color:var(--text);text-align:left;cursor:pointer}
.mini-ad-b:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.mini-ad-th{width:44px;height:44px;flex:none;border-radius:9px;overflow:hidden;display:grid;place-items:center;background:var(--raise)}.mini-ad-th img{width:100%;height:100%;object-fit:cover}
.mini-ad-ic{font:700 1.1rem var(--hfont);color:var(--accent)}
.mini-ad-t{display:grid;gap:2px;min-width:0;flex:1}.mini-ad-t small{display:flex;align-items:center;gap:5px;font:600 .6rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}.mini-ad-t b{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-ad-b>.ico{width:16px;height:16px;color:var(--muted);flex:none}
.mini-ad-full{margin:0;border:0;padding:0;background:none}.mini-ad-full::before{display:none}
.m-compose{display:block}.m-compose .chat-compose{width:100%}
.m-compose textarea.input.chat-ta{min-height:40px!important;height:40px}
/* ---------- broadcasts ---------- */
.bc-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
@media (max-width:980px){.bc-grid{grid-template-columns:1fr}}
.bc-kinds{flex-wrap:wrap}
.bc-ch{display:grid;gap:8px}
.bc-est{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.bc-est-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}.bc-est-row div{display:grid}.bc-est-row b{font:700 1.15rem var(--hfont);color:var(--accent)}.bc-est-row small{font-size:.72rem;color:var(--muted)}
.bc-acts{flex-wrap:wrap;gap:8px}.bc-acts .bc-sp{flex:1}.bc-acts input[type=datetime-local]{width:auto}
.bc-prev{position:sticky;top:90px;display:grid;gap:10px}
.bc-prev-note{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:var(--raise);border:1px solid var(--line2)}.bc-prev-note .n-ic{width:38px;height:38px}.bc-prev-note div{display:grid}.bc-prev-note b{font-size:.86rem}
.bc-states{display:flex;flex-wrap:wrap;gap:4px 10px;max-height:150px;overflow:auto;padding:8px;border:1px solid var(--line2);border-radius:10px}.bc-st{font-size:.8rem}
.bc-vote-add{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line2)}
/* announcement banner + page */
.ann-banner{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;margin-bottom:12px;border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),var(--surface) 60%)}
.ann-banner.k-event{border-color:color-mix(in srgb,var(--info) 40%,transparent);background:linear-gradient(110deg,color-mix(in srgb,var(--info) 12%,var(--surface)),var(--surface) 60%)}
.ann-banner.k-marketing{border-color:color-mix(in srgb,var(--accent2) 45%,transparent);background:linear-gradient(110deg,color-mix(in srgb,var(--accent2) 14%,var(--surface)),var(--surface) 60%)}
.ann-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:color-mix(in srgb,var(--text) 6%,transparent)}
.ann-b{display:grid;gap:2px;min-width:0}.ann-b b{font-size:.98rem}.ann-b p{margin:0;font-size:.84rem;color:var(--muted)}
.ann-k{font:700 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ann-acts{display:flex;gap:6px;align-items:center}
@media (max-width:640px){.ann-banner{grid-template-columns:auto 1fr}.ann-acts{grid-column:1/-1}}
.ann-page{max-width:760px;margin:0 auto}.ann-page h1{font-size:clamp(1.6rem,4vw,2.4rem);margin:6px 0}.ann-body{white-space:pre-wrap;line-height:1.7;margin:16px 0 20px}
/* voting */
.vote-card{display:grid;gap:6px;margin-top:12px;border-color:color-mix(in srgb,var(--info) 35%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--info) 10%,var(--surface)),var(--surface) 70%)}
.vote-card .ann-k{color:var(--info)}.vote-card b{font-size:.92rem}
.vote-acts{gap:6px;margin-top:4px}.vote-acts .btn{flex:1;justify-content:center;font-size:.78rem;padding:8px 10px}
.vote-more{font-size:.76rem;color:var(--muted)}
.vote-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:640px){.vote-grid{grid-template-columns:1fr}}
.vote-tile{display:grid;gap:4px;padding:16px;border-radius:14px;border:1px solid var(--line2);background:var(--raise);color:var(--text)}.vote-tile:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.vote-ic{font-size:26px}.vote-tile small{color:var(--muted)}
.vote-el{display:flex;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.vote-el.other{opacity:.6}.vote-el>div:last-child{display:grid;gap:2px}
.vote-date{width:58px;height:58px;flex:none;border-radius:14px;display:grid;place-items:center;align-content:center;background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}.vote-date b{font:700 1.3rem var(--hfont);line-height:1}.vote-date small{font-size:.66rem}
.bc-prev .ann-banner{grid-template-columns:auto 1fr}.bc-prev .ann-acts{grid-column:1/-1}
/* message gate notices */
.chat-gate{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;font-size:.84rem;line-height:1.45;background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid var(--line2)}
.chat-gate>div{display:grid;gap:8px}.chat-gate .row{gap:6px}
.chat-gate-ic{font-size:18px;line-height:1.2}
.chat-gate.priv,.chat-gate.invite{background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.chat-gate.soft{padding:8px 10px;font-size:.8rem;color:var(--muted)}
.chat-gate-wrap{padding:0 8px}.chat-gate-wrap:empty{display:none}.chat-gate-wrap .chat-gate{margin-top:8px}
.m-gate{padding:10px 14px 0}
.dock-pick .dock-search{width:100%;margin:4px 0 6px}
.menu.float-menu{position:fixed;z-index:250;right:auto;margin:0}
/* one messenger: the conversation opens inside the Messaging window */
.dock{transition:width .2s}
.dock.chatting{width:380px}
.dock.chatting .dock-panel{display:none!important}
.dock .dock-chat{width:auto;height:min(520px,calc(100vh - 140px));border:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line)}
.dock .dock-chat::before{display:none}
.dock:not(.open) .dock-chat{display:none}
.dock-back{margin-right:-2px}
.dock-chat-h{cursor:default}
/* resume checker: space between the upload card and the results */
.check-results{margin-top:18px}
/* emoji picker: even grid, emoji centered in every cell on Windows, Mac and phones */
.gif-pop{max-height:calc(100vh - 16px)}.emo-pop{width:316px;max-height:calc(100vh - 16px);display:flex;flex-direction:column}.emo-pop .emo-grid{min-height:0;flex:1 1 auto}
.emo-grid{grid-template-columns:repeat(8,minmax(0,1fr));justify-items:center;align-items:center;gap:2px 0;padding:0;scrollbar-gutter:stable both-edges;overflow-y:auto;overflow-x:hidden}
.emo{width:34px;height:34px;padding:0;margin:0;display:flex;flex:none;box-sizing:border-box;vertical-align:top;align-items:center;justify-content:center;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;font-size:20px;line-height:1;text-align:center;overflow:hidden}
.emo:hover{transform:none;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.emo-tabs{padding-left:6px;padding-right:6px}.emo-tabs button{display:flex;align-items:center;justify-content:center;padding:0;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;line-height:1}
.chat-emo-ic,.cm-emoji{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.emo-grid::-webkit-scrollbar,.gif-grid::-webkit-scrollbar{width:6px}.emo-grid::-webkit-scrollbar-thumb,.gif-grid::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 40%,transparent);border-radius:6px}
.emo-grid,.gif-grid{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 40%,transparent) transparent}
/* GIF picker: same-size tiles, no odd gaps */
.gif-grid{grid-auto-rows:110px}
.gif{height:110px}.gif img{width:100%;height:100%;object-fit:cover;display:block}
/* conversation notices — branded, eye-catching */
.chat-gate{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 14px 12px 16px;border-radius:14px;overflow:hidden;font-size:.84rem;line-height:1.45;color:var(--muted);
  background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface) 75%);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);box-shadow:0 10px 28px -18px var(--accent)}
.chat-gate::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--accent),var(--accent2))}
.chat-gate-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 14px -6px var(--accent);font-size:0}
.chat-gate-ic .ico{width:17px;height:17px}
.chat-gate-b{display:grid;gap:3px;min-width:0}.chat-gate-b b{color:var(--text);font-size:.88rem}.chat-gate-b .row{margin-top:6px;gap:6px}
.chat-gate.sent .chat-gate-ic{animation:gatepulse 2.4s ease-in-out infinite}
@keyframes gatepulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)}}
.chat-gate.soft,.chat-gate.wait{background:linear-gradient(110deg,color-mix(in srgb,var(--info) 10%,var(--surface)),var(--surface) 75%);border-color:color-mix(in srgb,var(--info) 30%,transparent);box-shadow:none}
.chat-gate.soft::before,.chat-gate.wait::before{background:var(--info)}
.chat-gate.soft .chat-gate-ic,.chat-gate.wait .chat-gate-ic{color:#06121c;background:linear-gradient(135deg,var(--info),color-mix(in srgb,var(--info) 60%,#fff))}
.chat-gate.stop{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 8%,var(--surface))}.chat-gate.stop::before{background:var(--bad)}.chat-gate.stop .chat-gate-ic{background:var(--bad);color:#fff}
.reduce-motion .chat-gate.sent .chat-gate-ic{animation:none}
.m-gate{padding:12px 14px 4px}
.m-gate+.m-compose{border-top:0;padding-top:10px}
.chat-gate-wrap .chat-gate{margin:8px 0 2px}
/* profile: About card spacing */
.wl-about{margin:16px 0}.wl-about h3{margin:0 0 10px;font-size:1.15rem}.wl-about p{line-height:1.65}
.chat-gate.priv,.chat-gate.invite,.chat-gate.sent{background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface) 75%);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.chat-gate.soft{padding:12px 14px 12px 16px;font-size:.84rem;color:var(--muted)}
.chat-gate.soft .chat-gate-ic,.chat-gate.wait .chat-gate-ic{box-shadow:0 4px 14px -6px var(--info)}
/* broadcasts: media, codes, ads */
.bc-media{margin-top:8px}
.bc-newcode{margin-top:8px;padding:10px;border-radius:12px;border:1px dashed var(--line2)}
.ann-ic.pic{overflow:hidden;padding:0}.ann-ic.pic img{width:100%;height:100%;object-fit:cover}
.ann-code{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:4px 10px;border-radius:999px;font-size:.78rem;color:var(--text);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);justify-self:start}
.ann-code .ico{width:13px;height:13px;color:var(--accent)}.ann-code b{font-family:var(--mono);letter-spacing:.06em;color:var(--accent)}
.ann-media{display:grid;gap:6px;margin:0 0 18px;border-radius:14px;overflow:hidden}.ann-media.n2,.ann-media.n3,.ann-media.n4{grid-template-columns:1fr 1fr}
.ann-media img{width:100%;max-height:420px;object-fit:cover}.ann-media.n2 img,.ann-media.n3 img,.ann-media.n4 img{height:220px}.ann-media video{width:100%;max-height:440px;background:#000}
.ann-codebox{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:16px 18px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ann-codebox>div:first-child{display:grid;gap:2px}.ann-codebox b{font-size:1.6rem;letter-spacing:.08em;color:var(--accent)}
.ann-ad{display:grid;gap:6px;margin:0 0 18px;max-width:420px}
/* audit log: clickable rows + full record */
.audit-row{cursor:pointer}.audit-row:hover td{background:color-mix(in srgb,var(--accent) 6%,transparent)}.audit-row:focus-visible{outline:2px solid var(--accent)}
.audit-go{width:28px;color:var(--dim)}.audit-go .ico{width:15px;height:15px}.audit-row:hover .audit-go{color:var(--accent)}
.audit-d{display:grid;gap:12px}
.ad-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.ad-head small{width:100%}
.ad-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:760px){.ad-grid{grid-template-columns:1fr}}
.ad-sec{padding:14px 16px;display:grid;gap:8px;align-content:start}.ad-sec h4{margin:0;font:700 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ad-person{display:grid;gap:3px}.ad-person .row{gap:6px;margin-top:6px}
.ad-kv{display:grid;grid-template-columns:130px 1fr;gap:8px;font-size:.88rem}.ad-kv>span{color:var(--dim)}
.ad-ua{display:block;margin-top:6px;padding:8px;border-radius:8px;background:var(--raise);font-size:.74rem;white-space:pre-wrap;word-break:break-all}
.ad-ip{display:grid;gap:6px;margin-top:4px;padding-top:8px;border-top:1px dashed var(--line2)}.ad-ip .btn{justify-self:start}
.ad-detail{margin:0;padding:10px 12px;border-radius:10px;background:var(--raise);font:.84rem/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;max-height:240px;overflow:auto}
.ad-recent{display:grid;gap:4px}.ad-recent button{display:flex;gap:10px;align-items:center;padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--text);cursor:pointer;text-align:left}.ad-recent button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.biz-alerts{margin:6px 0 4px;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}.biz-alerts h4{margin:0 0 4px;display:flex;align-items:center;gap:6px}.biz-alerts p{margin:0 0 10px;font-size:.84rem}
.prune-card{margin-bottom:16px}
.prune-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.prune-stats div{display:grid;padding:10px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);text-align:center}.prune-stats b{font:700 1.2rem var(--hfont);color:var(--accent)}.prune-stats small{font-size:.74rem;color:var(--muted)}

/* GIF picker: the site's own GIFs first */
.gif-sec{grid-column:1/-1;font:700 .6rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:4px 2px 0}
/* Admin → Community: emoji picker editor and GIF library */
.ck-card h3{display:flex;align-items:center;gap:8px}
.ck-sets{display:grid;gap:10px;margin-top:12px}
.ck-set{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px;background:color-mix(in srgb,var(--text) 2%,transparent)}.ck-set.off{opacity:.6}
.ck-set-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ck-set-h .input{width:auto}
.ck-icon{width:52px!important;text-align:center;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:18px;padding:6px}
.ck-set-h .input:not(.ck-icon){flex:0 1 220px}
.ck-emo{display:flex;flex-wrap:wrap;gap:4px;max-height:180px;overflow:auto;padding:2px}
.ck-e{position:relative;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--text) 5%,transparent);cursor:grab}
.ck-g{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:19px;line-height:1}
.ck-x{position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;border:0;background:var(--bad,#e5484d);color:#fff;font-size:11px;line-height:16px;padding:0;cursor:pointer;display:none}
.ck-e:hover .ck-x,.ck-e:focus-within .ck-x{display:block}
.ck-set .row .input{flex:1}
.ck-acts{margin-top:12px}
.ck-drop{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:1.5px dashed var(--line2);border-radius:12px;color:var(--dim);font-size:.84rem;margin-bottom:10px}.ck-drop.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ck-gifs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;max-height:640px;overflow:auto}
.ck-gif{display:grid;gap:6px;border:1px solid var(--line);border-radius:12px;padding:8px}.ck-gif.off{opacity:.55}
.ck-gif-img{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#000;display:grid;place-items:center}.ck-gif-img img{max-width:100%;max-height:100%;object-fit:contain}
.ck-uses{position:absolute;left:6px;bottom:6px;font:600 .62rem var(--mono);background:#000a;color:#fff;padding:2px 6px;border-radius:6px}
.ck-gif-acts{gap:6px;align-items:center}
/* Voting banner on the profile: red, white and blue */
.vote-banner.usa{position:relative;overflow:hidden;border:1px solid var(--vt-edge);color:#fff;box-shadow:none;
  background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--vt-s1) 16%,transparent) 0 7px,color-mix(in srgb,var(--vt-s2) 6%,transparent) 7px 14px) right/45% 100% no-repeat,linear-gradient(100deg,var(--usa-navy) 0%,var(--usa-blue) 58%,var(--usa-navy) 100%)}
.vote-banner.usa::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--vt-band-v)}
.vote-banner.usa::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 1.6px) 0 0/16px 14px;-webkit-mask:linear-gradient(90deg,#000 0,transparent 32%);mask:linear-gradient(90deg,#000 0,transparent 32%);opacity:.5}
.vote-banner.usa>*{position:relative;z-index:1}
.vote-banner.usa .vote-bn-ic{background:var(--usa-navy);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 -3px 0 var(--usa-red)}
.vote-banner.usa .vote-bn-ic b{color:#fff}.vote-banner.usa .vote-bn-ic small{color:var(--vt-sub)}
.vote-banner.usa .ann-k{color:var(--vt-kick);letter-spacing:.16em}
.vote-banner.usa .vote-bn-txt b{color:#fff}.vote-banner.usa .vote-bn-txt:hover b{color:var(--vt-kick)}.vote-banner.usa .vote-bn-txt .dim{color:var(--vt-sub)}
.vote-banner.usa .vote-bn-acts .btn:not(.ghost){background:var(--usa-red);border-color:var(--usa-red);color:var(--vt-btn-text);box-shadow:0 4px 14px -6px var(--usa-red)}
.vote-banner.usa .vote-bn-acts .btn:not(.ghost):hover{filter:brightness(1.12)}
.vote-banner.usa .vote-bn-acts .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff}
.vote-banner.usa .vote-bn-acts .btn.ghost:hover{background:#fff;color:var(--usa-navy)}
.vote-banner.usa .vote-bn-x{color:var(--vt-sub)}.vote-banner.usa .vote-bn-x:hover{color:#fff;background:rgba(255,255,255,.12)}
/* profile: banner and tabs share one row with matching height */
.pf-tabs{align-items:stretch}
.pf-tabs .seg{align-self:stretch;display:flex;align-items:stretch}
.pf-tabs .seg button{display:flex;align-items:center;justify-content:center}
.pf-vote{display:flex}.pf-vote>.vote-banner{flex:1;min-width:0}
.vote-banner{min-height:56px;padding:6px 8px 6px 12px;gap:12px}
/* the day count: room to breathe */
.vote-bn-ic{width:44px;height:44px;margin-left:2px;gap:3px;padding-bottom:3px;align-content:center}
.vote-bn-ic b{font-size:1.05rem;line-height:1}.vote-bn-ic small{font-size:.5rem;letter-spacing:.12em;line-height:1}
.vote-banner.usa .vote-bn-ic{box-shadow:inset 0 -3px 0 var(--usa-red)}
.vote-bn-txt{gap:2px}
@media (max-width:520px){.pf-tabs{align-items:center}.pf-tabs .seg{align-self:auto}}
/* Voting box (Home): red, white and blue, with optional header image */
.vote-card{position:relative;overflow:hidden;gap:8px}
.vote-card .vote-title{font-size:.98rem;line-height:1.25}
.vote-card .vote-when{color:var(--dim);font-size:.78rem}
.vote-card .vote-msg{margin:0;font-size:.82rem;line-height:1.45}
.vote-card .vote-acts{display:grid;gap:6px;margin-top:4px}.vote-card .vote-acts .btn{justify-content:center;font-size:.8rem;padding:9px 10px}
.vote-card .vote-more{font-size:.76rem}
.vote-hero{position:relative;margin:-16px -16px 2px;aspect-ratio:2/1;overflow:hidden;background:#0b2350}
.vote-hero img{width:100%;height:100%;object-fit:cover;display:block}
.vote-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,20,48,.85))}
.vote-count{position:absolute;left:12px;bottom:10px;z-index:1;display:grid;place-content:center;text-align:center;width:46px;height:46px;border-radius:10px;background:#0b2350;border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 -3px 0 #c8102e;line-height:1;gap:3px;padding-bottom:3px}
.vote-count b{font:800 1.05rem var(--mono);color:#fff}.vote-count small{font:600 .5rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#c9d6f2}
.vote-hero .vote-x{position:absolute;top:8px;right:8px;z-index:1;background:rgba(8,20,48,.6);color:#fff;border-color:rgba(255,255,255,.3)}
.vote-card.usa{color:#fff;border:1px solid var(--vt-edge);
  background:radial-gradient(circle,rgba(255,255,255,.5) 0 1px,transparent 1.6px) 0 0/16px 14px,linear-gradient(165deg,var(--usa-blue) 0%,var(--usa-navy) 70%)}
.vote-card.usa.has-img{background:linear-gradient(165deg,var(--usa-blue) 0%,var(--usa-navy) 70%)}
.vote-card.usa::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--vt-band);z-index:2}
.vote-card.usa .vote-stripes{position:absolute;right:-30px;bottom:-30px;width:150px;height:120px;transform:rotate(-12deg);pointer-events:none;opacity:.14;background:repeating-linear-gradient(180deg,var(--vt-s1) 0 9px,var(--vt-s2) 9px 18px);-webkit-mask:linear-gradient(135deg,transparent 10%,#000 70%);mask:linear-gradient(135deg,transparent 10%,#000 70%)}
.vote-card.usa>*:not(.vote-stripes):not(.vote-hero){position:relative;z-index:1}
.vote-card.usa .ann-k{color:var(--vt-kick);letter-spacing:.16em}
.vote-card.usa .vote-title{color:#fff}.vote-card.usa .vote-when{color:var(--vt-sub)}.vote-card.usa .vote-msg{color:color-mix(in srgb,var(--vt-sub) 60%,#fff)}
.vote-card.usa .vote-acts .btn:not(.ghost){background:var(--usa-red);border-color:var(--usa-red);color:var(--vt-btn-text);box-shadow:0 6px 16px -8px var(--usa-red)}
.vote-card.usa .vote-acts .btn:not(.ghost):hover{filter:brightness(1.12)}
.vote-card.usa .vote-acts .btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.5);color:#fff}
.vote-card.usa .vote-acts .btn.ghost:hover{background:#fff;color:var(--usa-navy)}
.vote-card.usa .vote-more{color:var(--vt-sub)}.vote-card.usa .vote-more:hover{color:#fff}
.vote-card.usa .icon-btn{color:var(--vt-sub)}
/* profile banner with an admin image on the right */
.vote-bn-bg{position:absolute!important;inset:0 0 0 auto;width:42%;z-index:0!important;pointer-events:none;-webkit-mask:linear-gradient(90deg,transparent,#000 65%);mask:linear-gradient(90deg,transparent,#000 65%);opacity:.55}
.vote-bn-bg img{width:100%;height:100%;object-fit:cover;display:block}
.vote-banner:not(.usa){position:relative;overflow:hidden}.vote-banner:not(.usa)>*:not(.vote-bn-bg){position:relative;z-index:1}
/* Admin: voting box look */
.vl-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media (max-width:900px){.vl-grid{grid-template-columns:1fr}}
.vl-prev{display:grid;gap:8px;position:sticky;top:80px}.vl-prev .vote-card{margin-top:0}
.vl-imgs{display:grid;gap:8px;margin-top:8px}
.vl-img{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:10px}.vl-img.on{border-color:var(--accent)}
.vl-thumb{flex:none;width:88px;height:44px;padding:0;border:0;border-radius:6px;overflow:hidden;cursor:pointer;background:#000}.vl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vl-img .input{flex:1}
.vote-card{padding:16px}
/* Admin → Themes */
.th-head{display:grid;gap:14px}
.th-elect{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:color-mix(in srgb,var(--text) 3%,transparent)}
.th-elect.on{border-color:#2a4f9a;background:linear-gradient(100deg,#0b2350,#1b3f8b 60%,#16306a);color:#fff}.th-elect.on .dim{color:#c9d6f2}
.th-elect>div:nth-child(2){display:grid;gap:2px;flex:1}.th-elect-ic{font-size:26px;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.th-big{font-weight:700}
.th-mode{display:grid;grid-template-columns:auto minmax(200px,280px) auto;gap:14px;align-items:end}
@media (max-width:900px){.th-mode{grid-template-columns:1fr}}
.th-now{display:flex;gap:24px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.th-now-row{display:flex;align-items:center;gap:8px;margin-top:4px}.th-up .row{gap:6px;margin-top:4px;flex-wrap:wrap}
.th-em{font-size:22px;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.th-sw{display:inline-flex;gap:3px}.th-sw i{width:14px;height:14px;border-radius:4px;border:1px solid var(--line2)}
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.th-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;background:var(--surface2)}
.th-card.th-live{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.th-card.off{opacity:.6}
.th-card-top{height:6px}
.th-card-b{padding:10px 12px;display:grid;gap:3px}.th-card-b b{font-size:.92rem}
.th-greet{color:var(--muted);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-acts{gap:6px;margin-top:6px;align-items:center}
.label-sm,.switch.sm{font-size:.78rem}
.th-editor{display:grid;gap:12px;border-color:var(--accent)}
.th-emo-in{width:80px!important;text-align:center;font-size:20px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.th-cols{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.th-col{position:relative}.th-col input[type=color]{width:46px;height:36px;padding:2px;border:1px solid var(--line2);border-radius:8px;background:none;cursor:pointer}
.th-col .ck-x{display:none}.th-col:hover .ck-x{display:block}
.th-pill{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border-radius:999px;background:var(--raise);border:1px solid var(--accent);box-shadow:0 18px 40px -16px #000;font-size:.86rem}
/* Election looks for the voting box and profile banner (Stars & Stripes is the default) */
.usa{--usa-navy:#0b2350;--usa-blue:#163a80;--usa-red:#c8102e;--vt-btn-text:#fff;--vt-kick:#ff6b7d;--vt-sub:#c9d6f2;--vt-edge:#2a4f9a;--vt-s1:#c8102e;--vt-s2:#ffffff;
  --vt-band:linear-gradient(90deg,#c8102e 0 33%,#fff 33% 66%,#1b5fd0 66%);--vt-band-v:linear-gradient(180deg,#c8102e 0 33%,#fff 33% 66%,#1b5fd0 66%)}
.vt-presidential{--usa-navy:#070f24;--usa-blue:#13285a;--usa-red:#3a73e0;--vt-btn-text:#121a2a;--vt-kick:#f2c94c;--vt-sub:#d8cfae;--vt-edge:#6b5a1e;--vt-s1:#3a73e0;--vt-s2:#fff;--vt-band:linear-gradient(90deg,#c8102e 0 25%,#3a73e0 25% 50%,#fff 50% 75%,#1b5fd0 75%);--vt-band-v:linear-gradient(180deg,#c8102e 0 25%,#3a73e0 25% 50%,#fff 50% 75%,#1b5fd0 75%)}
.vt-midterm{--usa-navy:#141c2c;--usa-blue:#2f4060;--usa-red:#c8102e;--vt-kick:#e8c87a;--vt-sub:#c7cfdc;--vt-edge:#45597d;--vt-s1:#e8e4da;--vt-s2:#8a99b3;--vt-band:linear-gradient(90deg,#c8102e 0 33%,#e8e4da 33% 66%,#1b5fd0 66%);--vt-band-v:linear-gradient(180deg,#c8102e 0 33%,#e8e4da 33% 66%,#1b5fd0 66%)}
.vt-primary{--usa-navy:#241240;--usa-blue:#4b2a7a;--usa-red:#f4f0fb;--vt-btn-text:#3a1d66;--vt-kick:#d6b8ff;--vt-sub:#d9ccef;--vt-edge:#6a45a3;--vt-s1:#8a4fd8;--vt-s2:#fff;--vt-band:linear-gradient(90deg,#c8102e 0 33%,#8a4fd8 33% 66%,#1b5fd0 66%);--vt-band-v:linear-gradient(180deg,#c8102e 0 33%,#8a4fd8 33% 66%,#1b5fd0 66%)}
.vt-runoff{--usa-navy:#121214;--usa-blue:#2c2b30;--usa-red:#4f8fff;--vt-btn-text:#121a2a;--vt-kick:#ffd27a;--vt-sub:#cfc6b0;--vt-edge:#55503f;--vt-s1:#4f8fff;--vt-s2:#6b6b70;--vt-band:linear-gradient(90deg,#4f8fff 0 50%,#fff 50%);--vt-band-v:linear-gradient(180deg,#4f8fff 0 50%,#fff 50%)}
.vt-special{--usa-navy:#131a4a;--usa-blue:#283593;--usa-red:#e53950;--vt-kick:#b3bcff;--vt-sub:#cdd2f5;--vt-edge:#3d4bb0;--vt-s1:#c0c6e0;--vt-s2:#e53950;--vt-band:linear-gradient(90deg,#e53950 0 33%,#c0c6e0 33% 66%,#3949ab 66%);--vt-band-v:linear-gradient(180deg,#e53950 0 33%,#c0c6e0 33% 66%,#3949ab 66%)}
.vt-local{--usa-navy:#07292c;--usa-blue:#0f5257;--usa-red:#f4a259;--vt-btn-text:#2a1500;--vt-kick:#9fe3d2;--vt-sub:#bfe3dc;--vt-edge:#1d7a80;--vt-s1:#2a9d8f;--vt-s2:#f4a259;--vt-band:linear-gradient(90deg,#2a9d8f 0 33%,#fff 33% 66%,#f4a259 66%);--vt-band-v:linear-gradient(180deg,#2a9d8f 0 33%,#fff 33% 66%,#f4a259 66%)}
.vt-school{--usa-navy:#0f261c;--usa-blue:#1f4d3a;--usa-red:#f2c94c;--vt-btn-text:#1f1600;--vt-kick:#b6f0c8;--vt-sub:#cfe8d8;--vt-edge:#2f6e52;--vt-s1:#f2c94c;--vt-s2:#fff;--vt-band:linear-gradient(90deg,#f2c94c 0 33%,#fff 33% 66%,#2d9a5f 66%);--vt-band-v:linear-gradient(180deg,#f2c94c 0 33%,#fff 33% 66%,#2d9a5f 66%)}
.vt-measure{--usa-navy:#16212b;--usa-blue:#2f4858;--usa-red:#33b1a1;--vt-btn-text:#04211d;--vt-kick:#9be3d8;--vt-sub:#c3d2db;--vt-edge:#476577;--vt-s1:#33b1a1;--vt-s2:#fff;--vt-band:linear-gradient(90deg,#33b1a1 0 50%,#fff 50%);--vt-band-v:linear-gradient(180deg,#33b1a1 0 50%,#fff 50%)}
.vt-early{--usa-navy:#0b2350;--usa-blue:#3a1f5c;--usa-red:#ff7a3d;--vt-btn-text:#fff;--vt-kick:#ffc49b;--vt-sub:#e3cfe0;--vt-edge:#5b3a80;--vt-s1:#ff7a3d;--vt-s2:#ffc49b;--vt-band:linear-gradient(90deg,#ff7a3d,#ffc49b 50%,#7b4fd0);--vt-band-v:linear-gradient(180deg,#ff7a3d,#ffc49b 50%,#7b4fd0)}
.vt-registration{--usa-navy:#0b2350;--usa-blue:#155e75;--usa-red:#c8102e;--vt-kick:#7dd3fc;--vt-sub:#c6e2ee;--vt-edge:#1f7a96;--vt-s1:#7dd3fc;--vt-s2:#fff}
/* Admin: theme tiles for the voting box */
.vt-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vt-tile{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line2);background:var(--surface2);color:var(--text);cursor:pointer;text-align:left;font-size:.8rem;line-height:1.2}
.vt-tile i{flex:none;width:30px;height:22px;border-radius:5px;background:linear-gradient(165deg,var(--usa-blue),var(--usa-navy));box-shadow:inset 0 3px 0 var(--usa-red);border:1px solid rgba(255,255,255,.15)}
.vt-tile.auto i{background:conic-gradient(#c8102e,#8a4fd8,#2a9d8f,#4f8fff,#c8102e)}
.vt-tile.site i{background:linear-gradient(165deg,#1c2539,#0a0e16);box-shadow:inset 0 3px 0 #4f8fff}
.vt-tile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* Voting page: your state, themed date tiles */
.vote-where.has-state{display:grid;gap:14px}
.vote-st{display:flex;align-items:center;gap:12px}
.vote-st-code{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;font:800 1.05rem var(--mono);color:#fff;background:linear-gradient(165deg,#163a80,#0b2350);box-shadow:inset 0 -3px 0 #c8102e;border:1px solid #2a4f9a}
.vote-st div{display:grid;gap:2px}.vote-st b{font-size:1.1rem}
.vote-el>div:nth-child(2){display:grid;gap:2px;flex:1}
.vote-el.usa .vote-date{background:linear-gradient(165deg,var(--usa-blue),var(--usa-navy));color:#fff;border:1px solid var(--vt-edge);box-shadow:inset 0 -3px 0 var(--usa-red)}
.vote-el.usa .vote-date small{color:var(--vt-sub)}
.vote-el.vt-site .vote-date{background:var(--surface2);color:var(--text);box-shadow:inset 0 -3px 0 var(--accent);border-color:var(--line2)}
.vote-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.vote-civic{display:grid;gap:8px;padding:12px;border:1px solid var(--line2);border-radius:12px;margin:0 0 14px;background:color-mix(in srgb,var(--info) 6%,transparent)}.vote-civic .spread>div{display:grid;gap:3px}.vote-civic .row .input{flex:1;min-width:220px}
tr.vt-hidden{opacity:.5}
/* Weather alerts */
.wx-strip{display:flex;align-items:center;gap:12px;padding:9px 46px 9px 16px;position:relative;font-size:.86rem;color:#fff;flex-wrap:wrap}
.wx-strip.warning{background:linear-gradient(90deg,#9b111e,#c8102e 60%,#9b111e);border-bottom:1px solid #ff6b7d}
.wx-strip.watch{background:linear-gradient(90deg,#7a4a00,#b36b00 60%,#7a4a00);border-bottom:1px solid #4f8fff}
.wx-strip .wx-ic{font-size:20px}
.wx-strip-t{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;flex:1;min-width:0}.wx-strip-t b{font-family:var(--hfont);letter-spacing:.02em}.wx-strip-t span{opacity:.88}
.wx-strip .btn{background:#fff;color:#7a0d18;border-color:#fff}.wx-strip.watch .btn{color:#5a3500}
.wx-strip .chip{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}
.wx-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:8px;background:none;color:#fff;font-size:20px;cursor:pointer}.wx-x:hover{background:rgba(255,255,255,.15)}
.wx-ic{font-size:18px;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}.wx-ic.big{font-size:30px}
.wx-card{display:grid;gap:8px;margin-top:12px;padding:14px;border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--bad) 10%,var(--surface)),var(--surface) 70%)}
.wx-card .ann-k{color:var(--bad)}
.wx-row{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;color:var(--text);background:color-mix(in srgb,var(--text) 4%,transparent);border-left:3px solid var(--line2)}.wx-row:hover{text-decoration:none;background:color-mix(in srgb,var(--text) 8%,transparent)}
.wx-row div{display:grid;gap:1px}.wx-row b{font-size:.86rem}.wx-row small{color:var(--muted);font-size:.74rem}
.wx-row.warning,.wx-alert.warning{border-left-color:#ff4d5e}.wx-row.watch,.wx-alert.watch{border-left-color:#4f8fff}.wx-row.advisory,.wx-alert.advisory{border-left-color:#7cc4ff}
.wx-where{display:grid;gap:12px}.wx-place{display:flex;gap:12px;align-items:center}.wx-place>div{display:grid;gap:2px}.wx-place b{font-size:1.05rem}
.wx-pin{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.wx-set{gap:8px;flex-wrap:wrap;align-items:center}
.wx-alert{display:grid;gap:8px;padding:12px 14px;margin-top:10px;border-radius:12px;border:1px solid var(--line);border-left:4px solid var(--line2);background:var(--surface2)}
.wx-alert.warning{background:linear-gradient(100deg,color-mix(in srgb,#c8102e 14%,var(--surface2)),var(--surface2) 60%)}
.wx-alert-h{display:flex;gap:12px;align-items:center}.wx-alert-h>div{display:grid;gap:2px}.wx-alert-h b{font-size:1.05rem}
.wx-lv{font:700 .62rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.wx-lv.warning{color:#be123c}.wx-lv.watch{color:#4f8fff}.wx-lv.advisory{color:var(--info)}.wx-lv.statement{color:var(--muted)}
.wx-head{margin:0;font-weight:500}.wx-instr{margin:0;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,#c8102e 12%,transparent);font-size:.88rem}
.wx-more{display:grid;gap:10px}.wx-more p{margin:2px 0 0;white-space:pre-line;font-size:.86rem;color:var(--muted)}
.wx-safety{border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.wx-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:12px 0 4px}.wx-stat{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface2)}.wx-stat b{font:700 1.3rem var(--hfont)}.wx-stat small{color:var(--muted);font-size:.74rem}
.vote-where-chip{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font:600 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;vertical-align:2px;background:color-mix(in srgb,#2a9d8f 22%,transparent);color:#9fe3d2;border:1px solid color-mix(in srgb,#2a9d8f 45%,transparent)}
.vote-maybe{color:var(--accent);font-size:.78rem}
/* Profile: Edit intro */
.pf-intro{display:grid;gap:12px}
.pf-intro .pf-sec{display:flex;align-items:center;gap:6px;margin:8px 0 0;padding-top:12px;border-top:1px solid var(--line);font:600 .92rem var(--hfont);color:var(--accent)}
.pf-intro .pf-sec:first-of-type{border-top:0;padding-top:0}
.pf-acct{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--surface2);margin-top:4px}.pf-acct>div{display:grid;gap:2px;flex:1}
.pf-loc-btn{display:inline-flex;align-items:center;gap:4px}.pf-loc-btn .ico{width:14px;height:14px}
/* Weather in the messenger window and on the profile */
.dock-wx{border-bottom:1px solid var(--line)}
.dock-wx-row{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--text)}.dock-wx-row:hover{text-decoration:none;background:color-mix(in srgb,var(--text) 5%,transparent)}
.dock-wx-row>div{display:grid;gap:1px;flex:1;min-width:0}.dock-wx-row b{font-size:.82rem}.dock-wx-row small{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-wx.warning{background:linear-gradient(90deg,color-mix(in srgb,#c8102e 26%,var(--surface)),var(--surface));box-shadow:inset 3px 0 0 #ff4d5e}
.dock-wx.watch{background:linear-gradient(90deg,color-mix(in srgb,#b36b00 26%,var(--surface)),var(--surface));box-shadow:inset 3px 0 0 #4f8fff}
.dock-wx.advisory,.dock-wx.statement{background:color-mix(in srgb,var(--info) 8%,var(--surface));box-shadow:inset 3px 0 0 var(--info)}
.dock-wx-mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:12px;color:#fff;background:#c8102e;animation:wxPulse 1.6s ease-in-out infinite}.dock-wx-mark.watch{background:#b36b00}
@keyframes wxPulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,#ff4d5e 30%,transparent)}}
@media (prefers-reduced-motion:reduce){.dock-wx-mark{animation:none}}
.pf-wx:empty{display:none}.pf-wx{margin:0 0 12px}
.wx-banner{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;min-height:56px;border-radius:12px;border:1px solid var(--line2);background:var(--surface2)}
.wx-banner.warning{border-color:#ff4d5e;background:linear-gradient(100deg,color-mix(in srgb,#c8102e 30%,var(--surface)),var(--surface) 75%);box-shadow:inset 3px 0 0 #ff4d5e}
.wx-banner.watch{border-color:#b36b00;background:linear-gradient(100deg,color-mix(in srgb,#b36b00 28%,var(--surface)),var(--surface) 75%);box-shadow:inset 3px 0 0 #4f8fff}
.wx-banner.advisory{border-color:color-mix(in srgb,var(--info) 50%,transparent);box-shadow:inset 3px 0 0 var(--info)}
.wx-bn-t{display:grid;gap:1px;flex:1;min-width:0}.wx-bn-t b{font-size:.92rem}
.th-eauto{display:grid;gap:8px;padding:10px 14px;border:1px dashed var(--line2);border-radius:12px}.th-eauto .switch span{display:grid;gap:2px}.th-eauto .switch{align-items:flex-start}
.st-alloff{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:0 0 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));font-size:.86rem}.st-alloff .ico{flex:none;color:var(--accent);margin-top:2px}
.st-dim{opacity:.45;pointer-events:none}
/* 404 inside the app */
.nf-card{position:relative;overflow:hidden;max-width:640px;margin:30px auto;padding:34px 32px 30px}
.nf-card:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.nf-scan{position:absolute;inset:0;height:40%;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 7%,transparent) 50%,transparent);animation:nfScan 4.5s linear infinite}
@keyframes nfScan{from{transform:translateY(-100%)}to{transform:translateY(260%)}}@media (prefers-reduced-motion:reduce){.nf-scan{display:none}}
.nf-big{font:800 clamp(4.5rem,16vw,7rem)/.9 var(--hfont);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0}
.nf-card h1{font-size:clamp(1.6rem,4vw,2.1rem);margin:0 0 10px}
.nf-term{font:13px/1.6 var(--mono);color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:16px 0}.nf-term b{color:var(--good)}.nf-term i{font-style:normal;color:var(--accent)}
.nf-acts{gap:10px;flex-wrap:wrap;margin-top:8px}
/* reminder for admins while maintenance mode is on */
.maint-bar{position:sticky;top:0;z-index:120;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:8px 14px;font-size:.86rem;color:var(--on-accent,#fff);background:repeating-linear-gradient(135deg,#4f8fff 0 18px,#8ab4ff 18px 36px);border-bottom:1px solid #7b61ff;text-align:center}
.maint-bar a{color:var(--on-accent,#fff);font-weight:700;text-decoration:underline}
/* Admin → Maintenance */
.mt-head{display:grid;gap:14px}
.mt-status{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--good) 40%,transparent);background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.mt-status.on{border-color:var(--accent);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface)) 0 18px,color-mix(in srgb,var(--accent) 8%,var(--surface)) 18px 36px)}
.mt-status>div:nth-child(2){display:grid;gap:2px;flex:1}.mt-status b{font-size:1.05rem}
.mt-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;font-size:22px;background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}.mt-status.on .mt-ic{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.mt-sw{font-weight:700}
.mt-sched{display:grid;gap:6px;padding:12px 14px;border:1px dashed var(--line2);border-radius:12px}.mt-sched .row{gap:10px;align-items:flex-end;flex-wrap:wrap}.mt-sched .field{flex:1;min-width:200px;margin:0}
.mt-steps{display:grid;gap:12px;margin:12px 0 0;padding-left:20px}.mt-steps li{line-height:1.5}
.mt-snip{margin:8px 0;padding:12px 14px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font:12.5px/1.6 var(--mono);color:var(--text);white-space:pre-wrap}
.st-freq{min-width:170px;width:auto}
/* separate admin site */
.admin-pill{display:inline-flex;align-items:center;gap:5px;margin-left:12px;padding:4px 10px;border-radius:999px;font:700 .66rem var(--mono);letter-spacing:.16em;color:#fff;background:#c8102e;box-shadow:0 0 0 1px #ff6b7d,0 0 14px -4px #ff4d5e;text-decoration:none!important}.admin-pill .ico{width:12px;height:12px}
.pf-admin{background:linear-gradient(135deg,#c8102e,#9b111e);border-color:#c8102e;color:#fff}
/* ===== phones & tablets (iPhone, iPad, Android) ===== */
/* Safari gives date/time boxes a built-in minimum width and centered text — make them behave like other fields */
input[type=date],input[type=datetime-local],input[type=time],input[type=month]{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%;min-height:46px;text-align:left;line-height:1.3}
input[type=date]::-webkit-date-and-time-value,input[type=datetime-local]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.3em}
input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.4)}
.input,select,textarea{min-width:0;max-width:100%}
/* layout pieces may shrink below their content, so wide tab bars scroll inside themselves instead of widening the page */
.rail-main,.rail-side,.wrap>*,.grid2>*,.grid3>*,.stack>*,.field,.row>*{min-width:0}
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.seg::-webkit-scrollbar{display:none}
.seg button{flex:none}
img,video,iframe{max-width:100%}
pre,code{overflow-wrap:anywhere}
@media (hover:none) and (pointer:coarse){
  /* iPhone zooms in on any field with text smaller than 16px — keep fields at 16px on touch screens */
  .input,input,select,textarea{font-size:16px}
  .btn,.seg button,.chip,.icon-btn{touch-action:manipulation}
}
@media (max-width:640px){
  .btn{white-space:normal;text-align:center;max-width:100%}
  .row{flex-wrap:wrap}
  .card{padding-left:16px;padding-right:16px}
  .pad-lg{padding:22px 18px}
  .grid2,.grid3{grid-template-columns:1fr}
  table.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  /* footer menus open as a sheet at the bottom of the screen */
  .rf-menu{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:none;min-width:0;z-index:200}
  h1{overflow-wrap:anywhere}
}
@media (min-width:641px) and (max-width:1100px){
  /* iPad: footer menus stay on screen near the edges */
  .rf-dd:last-child .rf-menu{left:auto;right:0;transform:none}
  .rf-dd:first-child .rf-menu{left:4px;transform:none}
}
/* notched iPhones: keep content clear of the rounded corners and home bar */
@supports (padding:max(0px)){
  .wrap{padding-left:max(clamp(16px,3vw,28px),env(safe-area-inset-left));padding-right:max(clamp(16px,3vw,28px),env(safe-area-inset-right))}
}
@media (max-width:640px){ .mt-status{flex-wrap:wrap} .mt-status>div:nth-child(2){flex:1 1 calc(100% - 80px);min-width:0} .mt-status>.btn,.mt-status>.mt-sw{margin-left:0} }
/* ad buttons: always centered */
.ad-card .btn.ad-cta,.ad-card>.btn{justify-self:center!important;align-self:center;margin-left:auto;margin-right:auto}
/* advertiser edits */
.adv-pend{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:.88rem}
.adv-pend .ico{flex:none;width:16px;height:16px;margin-top:2px;color:var(--accent)}
.sell-old summary{cursor:pointer;color:var(--dim);font-size:.82rem;margin-top:8px}.sell-old .ad-card{opacity:.75;margin-top:6px}
/* ===== Admin → Moderation ===== */
.md-top{margin:12px 0 16px}
.md-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}.md-q{max-width:320px;flex:1 1 220px}
.md-list{gap:12px}
.md-item{display:grid;gap:8px;padding:16px}.md-item.st-held{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}.md-item.st-removed{opacity:.72}
.md-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.md-who small{overflow-wrap:anywhere}
.md-body{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.md-clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.md-note{display:flex;gap:6px;align-items:center;color:var(--dim)}.md-note .ico{width:14px;height:14px;color:var(--accent)}
.md-acts{flex-wrap:wrap;gap:8px}
.md-media{display:flex;flex-wrap:wrap;gap:8px}
.md-m{position:relative;display:block;width:160px;max-width:100%;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line2)}
.md-m img,.md-m video{width:100%;height:100%;object-fit:cover;display:block}
.md-x{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:8px;border:0;background:rgba(0,0,0,.7);color:#fff;display:grid;place-items:center;cursor:pointer}.md-x:hover{background:var(--bad,#c0392b)}.md-x .ico{width:15px;height:15px}
.md-prof-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.md-av{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}.md-av.ph{display:grid;place-items:center;background:var(--raise);font-weight:700}
.md-cover{width:100%;height:90px;object-fit:cover;border-radius:10px}
.md-ad{grid-template-columns:minmax(0,300px) 1fr;align-items:start}.md-ad-prev .ad-card{margin:0}
@media (max-width:760px){.md-ad{grid-template-columns:1fr}}
.md-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.md-stat{display:grid;gap:2px;text-align:left;cursor:pointer;padding:14px;font:inherit;color:inherit}.md-stat b{font-size:1.5rem}.md-stat small{color:var(--dim)}.md-stat.hot{border-color:var(--accent)}.md-stat.hot b{color:var(--accent)}
.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:10px}
.md-tile{border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--surface);display:grid}.md-tile.wide{grid-column:span 2}
@media (max-width:520px){.md-tile.wide{grid-column:auto}}
.md-tile-m{aspect-ratio:4/3;background:#000}.md-tile.wide .md-tile-m{aspect-ratio:4/1.4}.md-tile-m img,.md-tile-m video{width:100%;height:100%;object-fit:cover;display:block}
.md-tile-i{display:grid;gap:4px;padding:10px}.md-tile-i small{overflow-wrap:anywhere}
.md-box{display:grid;gap:8px;padding:12px;border:1px solid var(--line2);border-radius:12px}
.md-tips{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--dim)}
/* ===== one-line alert ticker (weather + voting) ===== */
.tick{display:flex;align-items:center;gap:10px;min-width:0;min-height:0;height:38px;padding:0 6px 0 10px;overflow:hidden;font-size:.84rem;line-height:1.2}
.tick-lead{flex:none;display:flex;align-items:center}.tick-lead:empty{display:none}
.tick-ic{font-size:17px;line-height:1}
.tick-view{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.tick-line{display:inline-flex;white-space:nowrap;will-change:transform}
.tick-txt{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;color:inherit}.tick-txt:hover{text-decoration:none}.tick-txt:hover .tick-main{text-decoration:underline}
.tick-tag{font-family:var(--hfont);letter-spacing:.02em}
.tick-main{opacity:.92}.tick-sub{opacity:.7}.tick-sub::before{content:"· ";}
.tick-pager{display:none;align-items:center;gap:2px;flex:none;font-size:.72rem;opacity:.85;font-variant-numeric:tabular-nums}
.tick.multi .tick-pager{display:inline-flex}
.tick-nav{border:0;background:none;color:inherit;font-size:1rem;line-height:1;width:20px;height:24px;border-radius:6px;cursor:pointer;padding:0}.tick-nav:hover{background:rgba(255,255,255,.14)}
.tick-acts{display:flex;gap:6px;flex:none}.tick-acts:empty{display:none}
.tick-acts .btn{padding:4px 10px;min-height:28px;font-size:.78rem}
.tick-x{flex:none;border:0;background:none;color:inherit;opacity:.8;font-size:1.15rem;width:28px;height:28px;border-radius:8px;cursor:pointer}.tick-x:hover{opacity:1;background:rgba(255,255,255,.14)}
.tick-in{animation:tickIn .35s ease both}
@keyframes tickIn{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
@keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(var(--tick-d,0))}}
@media (prefers-reduced-motion:reduce){.tick-line{animation:none!important}.tick-view{-webkit-mask:none;mask:none}.tick-txt{overflow:hidden;text-overflow:ellipsis}}
/* weather */
.wx-tick{color:var(--text);background:var(--surface2);border:1px solid var(--line2);border-radius:10px}
.wx-tick.warning{color:#fff;background:linear-gradient(90deg,#8d0f1c,#c8102e 60%,#9b111e);border-color:#ff6b7d}
.wx-tick.watch{color:#fff;background:linear-gradient(90deg,#6e4300,#b36b00 60%,#7a4a00);border-color:#4f8fff}
.wx-tick.advisory,.wx-tick.statement{box-shadow:inset 3px 0 0 var(--info)}
.wx-tick.warning .btn,.wx-tick.watch .btn{background:#fff;color:#7a0d18;border-color:#fff}.wx-tick.watch .btn{color:#5a3500}
#wx-strip.tick{height:34px;border-radius:0;border-width:0 0 1px;padding:0 6px 0 12px}
.wx-tick.wx-home{margin-top:12px;padding:0 8px 0 10px;height:40px}
.wx-tick.sm{height:32px;border-radius:0;border-width:0;font-size:.78rem}
.dock-wx{background:none;box-shadow:none}
.tick.wx-banner{min-height:0;height:40px;padding:0 6px 0 12px}
@media (max-width:640px){ #wx-strip .tick-acts{display:none} .tick{font-size:.8rem} .tick-sub{display:none} }
/* voting */
.vote-banner.vote-tick{min-height:0;height:44px;padding:0 6px 0 4px;gap:10px;flex-wrap:nowrap;border-radius:12px}
.vote-tick .vote-bn-ic{width:auto;min-width:34px;height:34px;padding:0 6px;display:inline-grid;grid-auto-flow:column;align-items:baseline;gap:3px;place-content:center;border-radius:9px}
.vote-tick .vote-bn-ic b{font-size:1rem}.vote-tick .vote-bn-ic small{font-size:.62rem}
.vote-tick .tick-tag{color:var(--accent);letter-spacing:.06em;font-size:.76rem;text-transform:uppercase}
.vote-banner.usa.vote-tick .tick-tag{color:#ffd27a}.vote-banner.usa.vote-tick .tick-main{color:#fff}
@media (max-width:520px){ .vote-banner.vote-tick{height:44px;flex-wrap:nowrap;padding:0 4px} .vote-tick .tick-acts .btn{padding:4px 8px} .vote-tick .tick-pager .tick-nav{display:none} }
.vote-rot{position:relative}.vote-rot .vote-card{animation:tickIn .35s ease both}
.vote-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
.vote-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:0;background:currentColor;opacity:.3;cursor:pointer}.vote-dots button.on{opacity:1;background:var(--accent)}
@media (prefers-reduced-motion:reduce){.vote-rot .vote-card{animation:none}}
/* ===== staff tools & roles ===== */
.staff-panel{border-color:color-mix(in srgb,var(--info,#5aa9ff) 45%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--info,#5aa9ff) 8%,var(--surface)),var(--surface))}
.staff-panel>summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.staff-panel>summary::-webkit-details-marker{display:none}
.staff-panel>summary .ico{width:16px;height:16px;vertical-align:-3px;color:var(--info,#5aa9ff)}
.staff-panel[open]>summary{margin-bottom:12px}
.staff-panel.mini .ico{width:15px;height:15px;vertical-align:-2px}
.sp-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.sp-facts>div{display:grid;gap:1px;min-width:0}.sp-facts b{overflow-wrap:anywhere;font-size:.9rem}.sp-hot{color:var(--bad,#ff6b6b)}
.sp-box{display:grid;gap:6px;padding:12px;border:1px solid var(--line2);border-radius:12px}
.sp-acts{flex-wrap:wrap;gap:8px}
.sp-post{display:flex;gap:8px;align-items:center}.sp-pt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}
.rl-card{display:grid;gap:12px}
.rl-perms{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px 16px}.rl-perms .chk{font-size:.86rem;align-items:flex-start}
.rl-person{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rl-person>div{display:grid;flex:1;min-width:180px}.rl-person select{max-width:240px}
/* post visibility */
.f-vis{display:inline-flex;align-items:center;gap:3px}.f-vis .ico{width:12px;height:12px}
.vis-opts{display:grid;gap:8px}.vis-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;cursor:pointer}.vis-opt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.vis-opt span{display:grid;gap:2px}
/* ===== account security ===== */
.ts-box{display:flex;justify-content:center;margin:4px 0}.ts-box:empty{display:none}
.or-line{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:.8rem;margin:12px 0}.or-line::before,.or-line::after{content:"";flex:1;border-top:1px solid var(--line2)}
.pk-row{display:flex;gap:10px;align-items:center}.pk-row>div{display:grid;flex:1;min-width:0}.pk-row>.ico{width:18px;height:18px;color:var(--accent);flex:none}
.sec-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));font-size:.9rem}
.sec-banner.bad{border-color:#ff4d5e;background:color-mix(in srgb,#c8102e 14%,var(--surface))}.sec-banner>span{flex:1;min-width:200px}.sec-banner>.ico{width:18px;height:18px;flex:none}
.sec-chain{padding:10px 12px;border-radius:10px;font-weight:600}.sec-chain.ok{background:color-mix(in srgb,var(--good,#2ecc71) 12%,transparent);color:var(--good,#2ecc71)}.sec-chain.bad{background:color-mix(in srgb,#c8102e 16%,transparent);color:#ff6b7d}
.st-toggles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px 16px}.st-toggles .chk{font-size:.88rem}
.rt-grid{display:grid;gap:8px}.rt-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--line2)}.rt-row>div:first-child{display:grid;gap:2px;flex:1;min-width:220px}.rt-due{color:var(--accent)}
.sec-page .card{margin-bottom:16px}.sec-list,.sec-rules{margin:0;padding:0;list-style:none;display:grid;gap:8px}.sec-list li{display:flex;gap:10px;align-items:flex-start}.sec-list .ico{width:16px;height:16px;color:var(--good,#2ecc71);flex:none;margin-top:3px}.sec-rules{padding-left:18px;list-style:disc}
/* ===== sign in right on the homepage ===== */
.hero-side{position:relative;display:grid;place-items:center;min-height:440px}
.hero-side .scope-art{position:absolute;inset:0;margin:auto;opacity:.5;pointer-events:none}
.hero-login{position:relative;z-index:1;width:min(100%,380px);display:grid;gap:12px;padding:24px;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line2);box-shadow:0 30px 80px -30px #000,0 0 40px -18px var(--accent)}
.hero-login .hl-head{display:flex;align-items:baseline;justify-content:space-between}.hero-login .hl-head b{font-family:var(--hfont);font-size:1.45rem}
.hero-login .field{margin:0}.hero-login .btn{width:100%;padding:12px}
.hero-login .hl-alt{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-size:.86rem;margin:2px 0 0;color:var(--dim)}
.hero-login .hl-me{display:grid;gap:10px;text-align:center}.hero-login .hl-me .av{width:64px;height:64px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font:700 1.6rem var(--hfont);overflow:hidden}.hero-login .hl-me .av img{width:100%;height:100%;object-fit:cover}
@media (max-width:920px){.hero-side{min-height:0}.hero-side .scope-art{display:none}.hero-login{width:100%;max-width:440px;margin:0 auto}}
/* ===== light look: depth from soft shadows instead of glow ===== */
.card,.modal,.pop>div,.rf-menu,.dock,.f-post{box-shadow:var(--shadow)}
body{background-image:linear-gradient(color-mix(in srgb,var(--text) 3%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 3%,transparent) 1px,transparent 1px)}
body::before{background:radial-gradient(1100px 520px at 12% -8%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%),radial-gradient(900px 480px at 100% 0%,color-mix(in srgb,var(--accent2) 7%,transparent),transparent 70%)}
.head::before{background:color-mix(in srgb,#fff 88%,transparent)}
.input,select.input,textarea.input{background:#fff}
.input:focus,select.input:focus,textarea.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.btn{box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line2);box-shadow:none}
.btn.quiet{color:var(--muted)}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}

/* seasonal patterns stay subtle on the light background */
html[data-season] body::after{opacity:.12!important}
/* ===== compact layout (Facebook / LinkedIn-style boxes): same content, less bulk ===== */
:root{--radius:10px}
body{font-size:15px;line-height:1.55;background-image:none}
.head-row{height:64px}
.card h3,.card-head h3{font-size:1rem}
.card-head p{font-size:.86rem}
.stack{gap:10px}
.btn{padding:8px 14px;font-size:.9rem;border-radius:8px}
.btn.sm{padding:5px 11px;font-size:.82rem;border-radius:7px}
.btn.lg{padding:12px 22px;font-size:1rem;border-radius:10px}
.btn .ico{width:15px;height:15px}
.input,select.input,textarea.input{padding:8px 11px;border-radius:8px}
.field{gap:4px;margin-bottom:10px}
.chip{padding:4px 9px;font-size:.74rem}
.seg{border-radius:9px;padding:2px}.seg button{padding:6px 11px;border-radius:7px;font-size:.85rem}
.page-head{margin-bottom:12px}.page-head h1{font-size:clamp(1.35rem,2.4vw,1.75rem)}.page-head p{font-size:.92rem}
.page{padding-top:16px}
.stats{gap:8px;margin-bottom:12px}.stat{padding:10px 12px;border-radius:var(--radius)}.stat b{font-size:1.3rem}.stat span{font-size:.76rem}
.f-post{padding:12px 14px}
.f-p-head{gap:10px}
.rail-grid{gap:14px}
.rail-side>.card,.rail-side>*{margin-bottom:10px}
.md-stat,.adv-stats .card{padding:10px 12px}.md-stat b{font-size:1.25rem}
.ad-card{padding:12px 14px;gap:8px}
.modal{border-radius:12px}
h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.landing h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.landing .btn.lg{padding:14px 26px}
/* light cover banners (LinkedIn-style) when the member hasn't uploaded one */
.f-me-cover,.mp-cover,.pcard-cover,.pf-cover{background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.55),transparent 45%),linear-gradient(120deg,#c9d8ff 0%,#d8ccff 55%,#c2e4ff 100%)}
.pcard.private .pcard-cover{background:linear-gradient(120deg,#e2e8f0,#cbd5e1)}
.pcard-cover{height:44px}.pcard-av{margin-top:-30px}.pcard{padding:0 12px 12px}
.pf-cover{height:150px}@media (max-width:640px){.pf-cover{height:110px}}

/* ---------- v1.40.1: light certification tiles (names readable on the white theme) ---------- */
.wl-cert{background:linear-gradient(170deg,color-mix(in srgb,var(--ic) 13%,#fff),#fff 62%);border:1px solid color-mix(in srgb,var(--ic) 28%,var(--line));box-shadow:0 1px 2px rgba(15,23,42,.06),0 8px 18px -14px var(--ic);color:var(--text)}
.wl-cert::after{background:radial-gradient(circle,color-mix(in srgb,var(--ic) 18%,transparent),transparent 70%)}
.wl-cert-name{color:var(--text)}
.wl-cert .wl-issuer{color:color-mix(in srgb,var(--ic) 75%,#0f172a)}
.wl-cert-meta{color:var(--muted)}
.wl-cert-art{filter:drop-shadow(0 4px 8px rgba(15,23,42,.18))}
.wl-cert:hover{border-color:color-mix(in srgb,var(--ic) 50%,var(--line));box-shadow:0 2px 4px rgba(15,23,42,.06),0 12px 24px -14px var(--ic)}
.pcard.private .pcard-cover{background:linear-gradient(120deg,#e2e8f0,#f1f5f9)}

/* ---------- v1.40.1: slimmer top bar, LinkedIn/Facebook proportions ---------- */
.head-row{height:56px;gap:12px}
.brand-text b{font-size:1.18rem}
.brand-text small{font-size:.56rem;letter-spacing:.12em;margin-top:3px}
.brand .logo{width:34px;height:34px}
.tabs>a,.tabs>.pop>button{min-width:68px;padding:5px 6px 0;gap:2px;font-size:.7rem}
.tabs .ico{width:21px;height:21px}
.tabs>a.on::after,.tabs>.pop>button.on::after{left:8px;right:8px}
.tabs .sep{margin:12px 4px}
.me-btn .me-av{width:24px;height:24px}
@media (max-width:1180px) and (min-width:641px){.tabs>a,.tabs>.pop>button{min-width:58px;padding:5px 4px 0;font-size:.66rem}}
@media (max-width:900px) and (min-width:641px){.tabs>a,.tabs>.pop>button{min-width:50px}}
/* Settings: left column holds the menu, an ad and the footer links */
.st-left{align-content:start}
.st-left .st-nav{position:static}
.st-left .ad-left{margin-top:0}
.st-body>.st-ad{margin:0}
@media (max-width:820px){.st-left{position:static;display:block}.st-left>.ad-left,.st-left>.rail-foot{display:none!important}}
/* weather alerts: one continuous sideways scroll through every alert (pauses on hover or focus) */
.tick-marq .tick-mview{-webkit-mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 22px),transparent);mask:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 22px),transparent)}
.tick-track{display:inline-flex;width:max-content;will-change:transform;animation:tickMarq 40s linear infinite}
.tick-run{display:inline-flex;flex:none}
.tick-seg{display:inline-flex;align-items:center;flex:none}
.tick-seg .tick-txt{align-items:center}
.tick-gap{padding:0 22px;opacity:.55}
.tick-marq:hover .tick-track,.tick-marq:focus-within .tick-track{animation-play-state:paused}
@keyframes tickMarq{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--run, 50%)))}}
@media (prefers-reduced-motion:reduce){.tick-track{animation:none}}
html body .hero-login{width:min(100%,400px)!important;max-width:400px}
/* v1.78 logo: a bolder hex plate, a coral contact blip that pings, and a slightly larger mark in the top bar */
.logo .blip{transform-box:view-box;transform-origin:43px 21.5px;animation:blip 2.8s ease-out infinite}
@keyframes blip{0%{transform:scale(.5);opacity:1}80%,100%{transform:scale(1.5);opacity:0}}
.reduce-motion .logo .blip{animation:none}
@media (prefers-reduced-motion:reduce){.logo .blip{animation:none}}
.head .brand .logo{width:42px;height:42px}

/* Messaging dock: stays put while the page scrolls on iPad and phones (see public/js/w9-dockfix.js) */
.dock-root{bottom:var(--vvb,0px);padding-bottom:env(safe-area-inset-bottom,0px);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:none}
/* social sign-in buttons (social-ui.js, landing.js) */
.soc-wrap{display:grid;gap:10px;margin:0 0 4px}
.soc-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.soc-btns.compact{grid-template-columns:1fr}
.soc-btn{width:100%;justify-content:flex-start;gap:10px;padding:10px 14px;font-weight:600;background:var(--surface,transparent)}
.hero-login .soc-btn{padding:9px 14px}
.soc-btn:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,var(--accent2))}
.soc-mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;font-size:.85rem;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2))}
.soc-mark .ico{width:14px;height:14px}
.soc-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem}.soc-or::before,.soc-or::after{content:"";flex:1;height:1px;background:var(--line)}
.soc-pw{padding:12px;border-radius:12px;border:1px dashed var(--line2)}
.soc-adm{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.soc-adm>summary{display:flex;align-items:center;gap:10px;cursor:pointer;flex-wrap:wrap}
.soc-adm>summary small{margin-left:auto}
.soc-adm[open]>summary{margin-bottom:8px}
.soc-steps{margin:4px 0 8px;padding-left:20px;font-size:.88rem;display:grid;gap:4px}
.soc-join{display:grid;gap:10px;margin:18px auto 0;max-width:640px}

/* v2.0.101 sign-in card + brand social buttons */
html body .soc-logo{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;color:var(--text)}
html body .soc-logo svg{width:20px;height:20px;display:block}
html body .soc-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;padding:9px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--surface,#fff);color:var(--text);font-weight:600;font-size:.95rem;box-shadow:0 1px 2px color-mix(in srgb,#000 8%,transparent);transition:transform .15s,box-shadow .15s,border-color .15s}
html body .soc-btn .soc-logo{position:absolute;left:14px}
html body .soc-btn .soc-t{padding:0 28px;text-align:center}
html body .soc-btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line2));box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 55%,transparent)}
html body .soc-btn:active{transform:none}
html body .soc-btn:disabled{opacity:.65;transform:none}
html body .soc-btns.grid{grid-template-columns:1fr 1fr;gap:8px}
html body .soc-btns.grid .soc-btn{justify-content:flex-start;padding:9px 10px;min-height:42px}
html body .soc-btns.grid .soc-btn .soc-logo{position:static}
html body .soc-btns.grid .soc-btn .soc-t{padding:0;text-align:left;font-size:.9rem}
html body .soc-cap{font:600 .72rem var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 -2px}
html body .soc-or{font-size:.78rem;letter-spacing:.02em}
html body .hero-login{padding:26px 24px 22px;border-radius:18px;gap:14px;overflow:hidden}
html body .hero-login::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
html body .hero-login .hl-head{flex-direction:column;align-items:flex-start;gap:4px}
html body .hero-login .hl-head b{font-size:1.6rem;letter-spacing:-.01em}
html body .hero-login .hl-head .dim{font-size:.9rem}
html body .hero-login .input{min-height:46px;border-radius:12px}
html body .hero-login .input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
html body .hero-login .field>span{font:600 .72rem var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
html body .hero-login button[data-go]{min-height:48px;border-radius:12px;font-size:1rem;box-shadow:0 10px 24px -12px var(--accent)}
html body .hero-login .hl-alt{margin:-4px 0 0;justify-content:flex-end}
html body .hero-login .h2-join{min-height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
html body .hero-login .rh-hl-sec{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 7%,transparent);font-size:.74rem;color:var(--muted)}
html body .hero-login .rh-hl-sec .ico{width:13px;height:13px;flex:none}
/* v2.0.101b round, side-by-side social buttons (names stay as the tooltip and screen-reader label) */
html body .soc-btns.round,html body .soc-btns.round.compact{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
html body .soc-btns.round .soc-btn{width:54px;height:54px;min-height:0;padding:0;border-radius:50% !important;justify-content:center}
html body .soc-btns.round .soc-btn .soc-logo{position:static;width:24px;height:24px}
html body .soc-btns.round .soc-btn .soc-logo svg{width:24px;height:24px}
html body .soc-btns.round .soc-btn .soc-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0}
html body .soc-btns.round .soc-btn:hover{transform:translateY(-2px)}
html body .soc-wrap .soc-cap{text-align:center;margin:0}
/* v2.0.103 Sign in with ReconHire: developer guide + settings */
.dv{display:grid;gap:22px;max-width:820px;margin:0 auto 40px}
.dv-sec h2{margin:0 0 8px;font-size:1.15rem}.dv-sec p{margin:0 0 10px}.dv-sec h3{margin:16px 0 8px}
.dv-code{margin:0 0 12px;padding:14px 16px;border-radius:12px;border:1px solid var(--line2);background:color-mix(in srgb,var(--accent) 5%,var(--surface,#fff));font:.8rem/1.55 var(--mono,ui-monospace,monospace);overflow-x:auto;white-space:pre;max-width:100%}
.dv-list{margin:0 0 12px;padding-left:18px;display:grid;gap:8px}.dv code,.dv-sec code{font-family:var(--mono,ui-monospace,monospace);font-size:.86em;overflow-wrap:anywhere}
.dv-app{padding:12px;border:1px solid var(--line);border-radius:12px;display:grid;gap:10px}.dv-form{padding:12px;border:1px dashed var(--line2);border-radius:12px}
.dv-secret{padding:12px;border-radius:12px;background:color-mix(in srgb,var(--good,#16a34a) 10%,transparent);display:grid;gap:6px;margin-top:8px}.dv-secret .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.dv-secret code{overflow-wrap:anywhere;word-break:break-all}
html body .dv,html body .dv-head{width:100%;max-width:820px;margin-left:auto;margin-right:auto;min-width:0}
html body .dv-head{padding:28px 0 18px;text-align:left}html body .dv-head h1{margin:6px 0 8px;font-size:clamp(1.7rem,4vw,2.3rem)}html body .dv-head p{margin:0;max-width:60ch}
html body .dv>*,html body .dv-sec{min-width:0;max-width:100%}html body .dv-code{max-width:100%;box-sizing:border-box}

/* posts.css */
/* ReconHire: posts styles (photo grid + viewer, edit dialog, threaded replies, share sheet) */

/* ---------- photo / video grid (Facebook-style) ---------- */
.pg{display:grid;gap:3px;margin-top:12px;border-radius:12px;overflow:hidden;background:var(--line)}
.pg-tile{position:relative;display:block;padding:0;border:0;margin:0;background:#0b1220;cursor:zoom-in;line-height:0;overflow:hidden;min-height:0;min-width:0}
.pg-tile img,.pg-tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.pg-tile:hover img,.pg-tile:hover video{transform:scale(1.02)}
.pg-tile:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.pg-1 .pg-tile img,.pg-1 .pg-tile video{height:auto;max-height:600px}
.pg-1 .pg-tile img{object-fit:cover}
.pg-2{grid-template-columns:1fr 1fr;aspect-ratio:2/1}
.pg-3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2}
.pg-3 .pg-tile:first-child{grid-row:1/3}
.pg-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1/1}
.pg-5{grid-template-columns:repeat(6,1fr);grid-template-rows:3fr 2fr;aspect-ratio:6/5}
.pg-5 .pg-tile:nth-child(-n+2){grid-column:span 3}
.pg-5 .pg-tile:nth-child(n+3){grid-column:span 2}
.pg-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pg-play i{width:54px;height:54px;border-radius:50%;background:rgba(10,14,25,.6);box-shadow:0 0 0 2px rgba(255,255,255,.85);position:relative}
.pg-play i::after{content:"";position:absolute;left:21px;top:16px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}
.pg-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,14,25,.55);color:#fff;font:700 clamp(1.4rem,4vw,2.1rem) var(--font);letter-spacing:.01em;pointer-events:none}

/* ---------- viewer (lightbox) ---------- */
body.lbx-open{overflow:hidden}
.lbx{position:fixed;inset:0;z-index:120;background:rgba(5,8,15,.94);display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:auto 1fr auto;color:#fff}
.lbx-top{grid-column:1/4;display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.lbx-count{font:600 .9rem var(--font);opacity:.85}
.lbx-x,.lbx-nav{display:grid;place-items:center;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);border-radius:50%;transition:background .15s}
.lbx-x{width:40px;height:40px}.lbx-x:hover,.lbx-nav:hover{background:rgba(255,255,255,.24)}
.lbx-x .ico,.lbx-nav .ico{width:22px;height:22px}
.lbx-nav{width:46px;height:46px;align-self:center;justify-self:center}
.lbx-stage{grid-column:2;display:grid;place-items:center;min-height:0;min-width:0;padding:0 4px}
.lbx-stage img,.lbx-stage video{max-width:100%;max-height:calc(100vh - 170px);border-radius:6px;display:block;background:#000}
.lbx-thumbs{grid-column:1/4;display:flex;gap:6px;justify-content:center;overflow-x:auto;padding:12px 16px 16px}
.lbx-th{flex:0 0 auto;width:58px;height:58px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#1e293b;cursor:pointer;opacity:.55;transition:opacity .15s,border-color .15s}
.lbx-th.on{opacity:1;border-color:#fff}.lbx-th:hover{opacity:.9}
.lbx-th img{width:100%;height:100%;object-fit:cover;display:block}
.lbx-th-v{display:grid;place-items:center;width:100%;height:100%;color:#fff}
@media (max-width:640px){
  .lbx{grid-template-columns:0 1fr 0}
  .lbx-nav{position:fixed;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,.45)}
  .lbx-nav.prev{left:8px}.lbx-nav.next{right:8px}
  .lbx-stage img,.lbx-stage video{max-height:calc(100vh - 150px);border-radius:0}
  .lbx-th{width:46px;height:46px}
}

/* ---------- composer tray + edit dialog ---------- */
.f-tray-n{flex-basis:100%;font-size:.78rem}
.f-tray-i.vid{margin:0;display:block;max-width:none} /* .vid is also the video interview page's class */
.f-tray-i.vid .f-tray-v{position:relative;padding:8px;align-content:end;justify-items:start;gap:0}
.f-tray-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.f-tray-i.vid .f-tray-v:has(video) small{position:relative;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.f-tray-i.vid .f-tray-v:has(video) .f-prog{position:relative}
.pe .f-tray{justify-content:flex-start}
.pe{gap:12px}
.pe-text{min-height:120px;resize:vertical;font-size:1rem;line-height:1.5}
.pe-tools{gap:8px;align-items:center;flex-wrap:wrap}
.pe .f-tray{margin-top:0}
.f-edited{cursor:help}

/* ---------- comments with one level of replies ---------- */
.f-thread{display:flex;flex-direction:column;gap:6px}
.f-cm-main{flex:1;min-width:0}
.f-cm-acts{display:flex;align-items:center;gap:12px;padding:3px 12px 0;font-size:.8rem}
.f-cm-acts small{font-size:.78rem}
.f-cm-reply{background:none;border:0;padding:0;font:600 .8rem var(--font);color:var(--muted);cursor:pointer}
.f-cm-reply:hover{color:var(--accent);text-decoration:underline}
.f-replies{display:flex;flex-direction:column;gap:6px;margin-left:42px;padding-left:12px;border-left:2px solid var(--line)}
.f-replies:empty{display:none}
.f-cm-r .f-cm-b{padding:7px 11px}
.f-reply-in{gap:6px}
.f-reply-in .input{padding:8px 11px;font-size:.9rem}
.f-cm-hl .f-cm-b{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
@media (max-width:640px){
  .f-replies{margin-left:20px;padding-left:10px}
  .f-reply-in .btn.quiet{display:none}
}

/* ---------- share sheet ---------- */
.shs-modal{width:min(520px,100%)}
.shs{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.shs-what{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--line)}
.shs-what b{font-size:.95rem}
.shs-what span{color:var(--muted);font-size:.86rem;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.shs-notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--info) 9%,transparent);border:1px solid color-mix(in srgb,var(--info) 30%,transparent)}
.shs-notice>.ico{flex:0 0 auto;width:20px;height:20px;color:var(--info);margin-top:1px}
.shs-notice p{margin:0 0 8px;font-size:.9rem;line-height:1.5}
.shs-notice p:last-child{margin:0}
.shs-note{display:flex;gap:8px;align-items:center;margin:-4px 0 0;color:var(--muted);font-size:.82rem}
.shs-note .ico{width:15px;height:15px;flex:0 0 auto}
.shs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px}
.shs-btn{display:flex;flex-direction:column;align-items:center;gap:7px;padding:6px 2px;border:0;background:none;border-radius:12px;color:var(--text);text-decoration:none;cursor:pointer;font:500 .8rem var(--font)}
.shs-btn:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.shs-btn:hover .shs-ic{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,0,0,.45)}
.shs-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shs-ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;transition:transform .15s,box-shadow .15s}
.shs-ic svg{width:26px;height:26px}
.shs-dev{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.shs-dev .ico{width:22px;height:22px}
.shs-lb{white-space:nowrap}
.shs-copyrow{display:flex;gap:8px;align-items:center}
.shs-url{flex:1;font-size:.86rem;color:var(--muted)}
.shs-copy{flex:0 0 auto;white-space:nowrap}
.shs-flash{animation:shsFlash 2.2s ease}
@keyframes shsFlash{0%,60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:var(--shadow)}}
@media (max-width:640px){
  .modal-bg:has(.shs-modal){place-items:end center;padding:0}
  .shs-modal{width:100%;border-radius:18px 18px 0 0!important;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .shs-grid{gap:12px 4px}
  .shs-ic{width:46px;height:46px}
  .shs-copyrow{flex-direction:column;align-items:stretch}
}
/* See translation */
.f-tr-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.f-tr{background:none;border:0;padding:0;font:600 .82rem var(--font);color:var(--muted);cursor:pointer}
.f-tr:hover{color:var(--accent);text-decoration:underline}
.f-tr-note{font-size:.78rem}
.f-cm-acts .f-tr{font-size:.76rem;margin-left:10px}
.f-cm-acts .f-tr-note{margin-left:10px}
/* editing a comment in place */
.f-cm-editbox{display:grid;gap:6px;margin-top:6px}
.f-cm-edit{min-height:58px;resize:vertical;font-size:.92rem}
/* composer: post types and the tools row sit centered under the text box */
.f-compose .f-c-bar{flex-direction:column;align-items:center;gap:10px}
.f-compose .f-c-bar .f-kinds{justify-content:center}
.f-compose .f-c-bar>.row{justify-content:center;flex-wrap:wrap}
@media (min-width:521px){.f-compose .f-c-bar{margin-left:56px}}
/* Home feed: "New posts" button, pinned just under the top bar while you scroll */
.f-newposts-wrap{position:sticky;top:calc(var(--head-h,56px) + 10px);z-index:20;display:flex;justify-content:center;height:0;overflow:visible}
.f-newposts{display:inline-flex;align-items:center;gap:7px;margin-top:2px;padding:9px 18px;border:0;border-radius:999px;cursor:pointer;
  font:600 .9rem var(--font);color:#fff;background:linear-gradient(135deg,var(--accent2,#2563eb),#7c3aed);box-shadow:0 10px 26px -10px rgba(37,99,235,.75);
  animation:fNewIn .35s cubic-bezier(.2,.9,.3,1.2) both;transform-origin:top center}
.f-newposts[hidden]{display:none}
.f-newposts .ico{width:16px;height:16px}
.f-newposts:hover{filter:brightness(1.08)}
.f-newposts:focus-visible{outline:3px solid color-mix(in srgb,var(--accent2,#2563eb) 45%,transparent);outline-offset:2px}
@keyframes fNewIn{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.f-newposts{animation:none}}

/* ads.css */
/* ReconHire: ads styles */

/* ---------- Ad sizes: banner (728 x 90 style) and half banner (468 x 60 style) ----------
   Layout: picture on the left, "Promoted" and the headline in the middle, the button centered on the right.
   "Picture only" ads (class .banner) are a full-width image strip with the label on top of it. */
body .card.ad-card.ad-shape{display:grid;grid-template-columns:160px minmax(0,1fr) auto;grid-template-rows:auto 1fr;grid-template-areas:"pic lbl cta" "pic txt cta";align-items:center;column-gap:14px;row-gap:2px;padding:10px 14px;min-height:0}
body .card.ad-card.ad-shape:not(.has-creative){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl cta" "txt cta"}
body .card.ad-card.ad-shape>.ad-label{grid-area:lbl;align-self:end;margin:0;font-size:.6rem;gap:6px}
body .card.ad-card.ad-shape .ad-tag{padding:3px 7px;font-size:.58rem}
body .card.ad-card.ad-shape>.ad-creative-link,body .card.ad-card.ad-shape>.ad-creative,body .card.ad-card.ad-shape>.ad-vid,body .card.ad-card.ad-shape>.f-yt,body .card.ad-card.ad-shape>.f-yt-frame{grid-area:pic;align-self:center;margin:0}
body .card.ad-card.ad-shape>.ad-body{grid-area:txt;align-self:start;min-width:0;gap:10px;align-items:center}
body .card.ad-card.ad-shape>.ad-body b{font-size:.92rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .card.ad-card.ad-shape>.ad-body p{margin:1px 0 0;font-size:.8rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
body .card.ad-card.ad-shape>.ad-body .ad-ic{width:34px;height:34px;border-radius:9px}
body .card.ad-card.ad-shape>.btn.ad-cta,body .card.ad-card.ad-shape>a.ad-cta{grid-area:cta;justify-self:center;align-self:center;margin:0;padding:8px 14px;font-size:.84rem;border-radius:10px}
body .card.ad-card.ad-shape img.ad-creative,body .card.ad-card.ad-shape video.ad-creative{width:160px;height:84px;max-height:84px;object-fit:cover;border-radius:8px;display:block}
body .card.ad-card.ad-shape .ad-creative-link,body .card.ad-card.ad-shape .ad-vid{border-radius:8px;line-height:0}
body .card.ad-card.ad-shape .f-yt.ad-creative,body .card.ad-card.ad-shape .f-yt-frame.ad-creative{width:160px;height:84px;border-radius:8px;overflow:hidden;position:relative}
body .card.ad-card.ad-shape .f-yt.ad-creative img{width:100%;height:100%;object-fit:cover}
body .card.ad-card.ad-shape .f-yt-frame.ad-creative iframe{width:100%;height:100%;border:0}
body .card.ad-card.ad-shape .ad-ph{width:160px;height:84px;min-height:0;aspect-ratio:auto;padding:4px;font-size:.68rem;gap:3px}
body .card.ad-card.ad-shape .ad-ph .ico{width:18px;height:18px}
body .card.ad-card.ad-shape .ad-snd{width:26px;height:26px;right:4px;bottom:4px}
body .card.ad-card.ad-shape .ad-snd .ico{width:13px;height:13px}
/* picture only: the image is the ad */
body .card.ad-card.ad-shape.banner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"lbl" "pic";padding:8px 10px 10px;row-gap:6px}
body .card.ad-card.ad-shape.banner>.ad-label{align-self:start}
body .card.ad-card.ad-shape.banner>.ad-creative-link~.ad-cta{display:none}
body .card.ad-card.ad-shape.banner>.ad-banner-link,body .card.ad-card.ad-shape.banner>.ad-creative{width:100%}
body .card.ad-card.ad-shape.banner img.ad-creative,body .card.ad-card.ad-shape.banner video.ad-creative{width:100%;height:auto;aspect-ratio:728/90;max-height:110px;object-fit:cover}
body .card.ad-card.ad-shape.banner .ad-ph{width:100%;height:auto;aspect-ratio:728/90;max-height:110px}
body .card.ad-card.ad-shape.banner .f-yt.ad-creative,body .card.ad-card.ad-shape.banner .f-yt-frame.ad-creative{width:100%;height:auto;aspect-ratio:16/9;max-height:none}
body .card.ad-card.ad-shape.banner>.btn.ad-cta{grid-area:auto;justify-self:center}
body .card.ad-card.ad-shape.banner ins.adsbygoogle{min-height:0}
body .card.ad-card.ad-shape.banner .ad-frame{border-radius:6px}
body .card.ad-card.ad-shape.shape-banner{max-width:760px;width:100%;margin-left:auto;margin-right:auto}
/* half banner: smaller and narrower */
body .card.ad-card.ad-shape.shape-half{max-width:468px;width:100%;margin-left:auto;margin-right:auto;grid-template-columns:96px minmax(0,1fr) auto;column-gap:10px;padding:8px 10px}
body .card.ad-card.ad-shape.shape-half:not(.has-creative){grid-template-columns:minmax(0,1fr) auto}
body .card.ad-card.ad-shape.shape-half.banner{grid-template-columns:minmax(0,1fr);padding:6px}
body .card.ad-card.ad-shape.shape-half img.ad-creative,body .card.ad-card.ad-shape.shape-half video.ad-creative,body .card.ad-card.ad-shape.shape-half .ad-ph,body .card.ad-card.ad-shape.shape-half .f-yt.ad-creative{width:96px;height:50px;max-height:50px}
body .card.ad-card.ad-shape.shape-half.banner img.ad-creative,body .card.ad-card.ad-shape.shape-half.banner video.ad-creative,body .card.ad-card.ad-shape.shape-half.banner .ad-ph{width:100%;height:auto;aspect-ratio:468/60;max-height:72px}
body .card.ad-card.ad-shape.shape-half>.ad-body b{font-size:.84rem;-webkit-line-clamp:2}
body .card.ad-card.ad-shape.shape-half>.ad-body p{display:none}
body .card.ad-card.ad-shape.shape-half>.ad-body .ad-ic{width:28px;height:28px;font-size:.85rem}
body .card.ad-card.ad-shape.shape-half>.btn.ad-cta{padding:6px 10px;font-size:.78rem}
body .card.ad-card.ad-shape.shape-half .ad-cta .ico{width:13px;height:13px}
/* narrow places (side columns, phones): the picture shrinks, the text stays readable */
@media (max-width:560px){
  body .card.ad-card.ad-shape{grid-template-columns:96px minmax(0,1fr) auto;column-gap:10px;padding:8px 10px}
  body .card.ad-card.ad-shape img.ad-creative,body .card.ad-card.ad-shape video.ad-creative,body .card.ad-card.ad-shape .ad-ph,body .card.ad-card.ad-shape .f-yt.ad-creative{width:96px;height:50px;max-height:50px}
  body .card.ad-card.ad-shape>.ad-body b{font-size:.84rem}
  body .card.ad-card.ad-shape>.ad-body p{display:none}
  body .card.ad-card.ad-shape>.btn.ad-cta{padding:6px 10px;font-size:.78rem}
  body .card.ad-card.ad-shape .ad-cta .ico{display:none}
}
.f-right .card.ad-card.ad-shape,.f-left .card.ad-card.ad-shape,.rail .card.ad-card.ad-shape{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"pic lbl" "pic txt" "cta cta";row-gap:6px}
.f-right .card.ad-card.ad-shape img.ad-creative,.f-left .card.ad-card.ad-shape img.ad-creative,.rail .card.ad-card.ad-shape img.ad-creative{width:72px;height:40px}
.f-right .card.ad-card.ad-shape>.ad-body p,.f-left .card.ad-card.ad-shape>.ad-body p{display:none}

/* ---------- Advertise: size picker, length and dates, previews ---------- */
.adv-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.adv-size{display:grid;gap:3px;justify-items:start;text-align:left;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.adv-size:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.adv-size.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.adv-size b{font-size:.9rem}.adv-size small{font-size:.74rem;line-height:1.35}
.adv-size-pic{display:grid;gap:3px;width:100%;height:46px;padding:6px;border-radius:7px;background:color-mix(in srgb,var(--text) 5%,transparent);margin-bottom:4px;align-content:center}
.adv-size-pic i,.adv-size-pic em,.adv-size-pic u{display:block;border-radius:3px;text-decoration:none}
.adv-size-pic i{background:color-mix(in srgb,var(--accent) 40%,transparent)}
.adv-size-pic em{background:color-mix(in srgb,var(--text) 22%,transparent);height:4px}
.adv-size-pic u{background:var(--accent);height:6px;width:40%;justify-self:center}
.adv-size-pic.pic-card{grid-template-columns:1fr}.adv-size-pic.pic-card i{height:20px}
.adv-size-pic.pic-banner{grid-template-columns:30% 1fr 22%;grid-template-areas:"i e u";align-items:center}
.adv-size-pic.pic-banner i{grid-area:i;height:20px}.adv-size-pic.pic-banner em{grid-area:e;height:5px}.adv-size-pic.pic-banner u{grid-area:u;width:100%}
.adv-size-pic.pic-half{grid-template-columns:22% 1fr 20%;grid-template-areas:"i e u";align-items:center;width:70%;justify-self:center}
.adv-size-pic.pic-half i{grid-area:i;height:13px}.adv-size-pic.pic-half em{grid-area:e;height:4px}.adv-size-pic.pic-half u{grid-area:u;width:100%;height:5px}
.adv-fit{color:var(--accent);font-size:.74rem;font-weight:600}.adv-fit:empty{display:none}
.adv-len{display:grid;gap:6px}
.adv-len-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
.adv-len .err-t{color:#b91c1c}
.adv-sum>span{display:grid;gap:2px}.adv-sum>span small{font-size:.76rem}
.adv-dates{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.8rem}.adv-dates .ico{width:14px;height:14px;color:var(--accent);flex:none}
.adv-editor{grid-template-columns:minmax(0,1fr) 360px}
.adv-pv{display:grid;gap:6px}
.adv-pv.alt{opacity:.9}
.adv-pv .ad-card{margin:0;pointer-events:none}
.adv-pv-l{font:600 .72rem var(--font);color:var(--muted)}.adv-pv-l .dim{font-weight:400}
.adv-live{gap:12px}
.adv-agree{padding:10px 12px;border-radius:10px;border:1px solid var(--line2)}
.adv-agree:has(input:checked){border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 6%,transparent)}
.sell-len{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:820px){.adv-editor{grid-template-columns:1fr}}
@media (max-width:640px){.adv-sizes{grid-template-columns:1fr}.adv-size{grid-template-columns:96px 1fr;column-gap:10px;align-items:center}.adv-size-pic{grid-row:span 2;margin:0}.adv-len-row,.sell-len{grid-template-columns:1fr}}

/* ---------- Ad rules: policy page layout (Help and the purchase form) ---------- */
.adr{display:grid;gap:14px}
.adr-intro{margin:0;font-size:.95rem;color:var(--muted);line-height:1.55;padding:12px 14px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 10px 10px 0}
.adr-secs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.adr-sec{padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--surface)}
.adr-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.adr-h b{font-size:.95rem;color:var(--text)}
.adr-n{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font:700 .75rem var(--mono);color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
.adr-sec ul{margin:0;padding:0 0 0 34px;display:grid;gap:4px;list-style:none}
.adr-sec ul li{position:relative;font-size:.88rem;color:var(--muted);line-height:1.5}
.adr-sec ul li::before{content:"";position:absolute;left:-14px;top:.62em;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--accent) 60%,transparent)}
.adr-sec.adr-no{border-color:color-mix(in srgb,var(--bad) 30%,transparent);background:color-mix(in srgb,var(--bad) 4%,var(--surface))}
.adr-sec.adr-no .adr-n{color:#b91c1c;background:color-mix(in srgb,var(--bad) 12%,transparent)}
.adr-sec ul.adr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;padding-left:34px}
.adr-sec ul.adr-grid li{display:flex;gap:7px;align-items:flex-start;color:var(--text)}
.adr-sec ul.adr-grid li::before{display:none}
.adr-sec ul.adr-grid .ico{width:14px;height:14px;flex:none;margin-top:3px;color:#b91c1c}
.adr-sec.adr-rev{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.adr-foot{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:.86rem;color:var(--muted)}.adr-foot .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
details.adr-box{border:1px solid var(--line2);border-radius:12px;background:color-mix(in srgb,var(--text) 2%,transparent)}
details.adr-box>summary{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;font-weight:600;font-size:.9rem;list-style:none}
details.adr-box>summary::-webkit-details-marker{display:none}
details.adr-box>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);transition:transform .15s}
details.adr-box[open]>summary::after{transform:rotate(-135deg)}
details.adr-box>summary .ico{width:16px;height:16px;color:var(--accent)}
details.adr-box>summary small{font-weight:400}
.adr-scroll{max-height:340px;overflow:auto;padding:4px 14px 14px;border-top:1px solid var(--line2)}
.adr-scroll .adr{gap:10px;padding-top:10px}
.adr-scroll .adr-sec{padding:10px 12px}
@media (max-width:640px){.adr-sec ul.adr-grid{grid-template-columns:1fr}.adr-sec ul{padding-left:20px}.adr-sec ul.adr-grid{padding-left:4px}}

/* ---------- Automatic checks: reasons on ads, admin panel ---------- */
.pol-box{display:grid;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,#d97706 35%,transparent);background:color-mix(in srgb,#f59e0b 7%,transparent)}
.pol-t,.pol-ok,.pol-ai{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600}
.pol-t .ico,.pol-ok .ico,.pol-ai .ico{width:14px;height:14px;flex:none}
.pol-t{color:#92400e}.pol-ok{color:var(--good);font-weight:500}.pol-ai{font-weight:400;color:var(--muted);flex-wrap:wrap}
.pol-hits{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.pol-hit{display:flex;gap:8px;align-items:baseline;font-size:.83rem;line-height:1.4}
.pol-hit .chip{flex:none}
.pol-box .chip.amber,.pol-card .chip.amber,.pol-rec .chip.amber{background:#fef3c7;color:#92400e}
.pol-card .md-tips{margin:0}
.pol-table{display:grid;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.pol-tr{display:grid;grid-template-columns:minmax(0,2.4fr) 90px 130px 60px 170px;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line2);font-size:.86rem}
.pol-tr:first-child{border-top:0}
.pol-tr>span:first-child{display:grid;gap:1px}.pol-tr small{font-size:.74rem}
.pol-th{background:color-mix(in srgb,var(--text) 4%,transparent);font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.pol-tr .input.sm{padding:6px 8px;font-size:.82rem}
.pol-opts{display:grid;gap:10px}
.pol-opts .switch{align-items:flex-start}.pol-opts .switch>span{display:grid;gap:2px}.pol-opts .switch small{font-size:.78rem}
.pol-test{display:grid;gap:8px;padding:12px 14px;border:1px dashed var(--line2);border-radius:12px}
.pol-out{display:grid;gap:8px}.pol-out:empty{display:none}
.pol-verdict{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
details.pol-recent-box>summary{cursor:pointer;font-weight:600;font-size:.9rem}
.pol-recent{display:grid;gap:8px;margin-top:10px;max-height:420px;overflow:auto}
.pol-rec{display:grid;gap:5px;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;font-size:.84rem}
.pol-cats{gap:5px;flex-wrap:wrap}
.chip.sm{padding:3px 8px;font-size:.72rem}
@media (max-width:760px){.pol-th{display:none}.pol-tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name on" "sev act" "scope act"}.pol-tr>span:nth-child(1){grid-area:name}.pol-tr>span:nth-child(2){grid-area:sev}.pol-tr>span:nth-child(3){grid-area:scope;font-size:.76rem}.pol-tr>label{grid-area:on;justify-self:end}.pol-tr>select{grid-area:act;width:150px}}
/* the purchase form's preview column is narrow: show banners the way they look on a phone or in a narrow column */
.adv-live .card.ad-card.ad-shape{grid-template-columns:96px minmax(0,1fr) auto;column-gap:10px;padding:8px 10px}
.adv-live .card.ad-card.ad-shape:not(.has-creative){grid-template-columns:minmax(0,1fr) auto}
.adv-live .card.ad-card.ad-shape.banner{grid-template-columns:minmax(0,1fr)}
.adv-live .card.ad-card.ad-shape:not(.banner) img.ad-creative,.adv-live .card.ad-card.ad-shape:not(.banner) video.ad-creative,.adv-live .card.ad-card.ad-shape:not(.banner) .ad-ph,.adv-live .card.ad-card.ad-shape:not(.banner) .f-yt.ad-creative{width:96px;height:50px;max-height:50px}
.adv-live .card.ad-card.ad-shape>.ad-body b{font-size:.84rem}
.adv-live .card.ad-card.ad-shape>.ad-body p{display:none}
.adv-live .card.ad-card.ad-shape>.btn.ad-cta{padding:6px 10px;font-size:.78rem}
.adv-live .card.ad-card.ad-shape .ad-cta .ico{display:none}
/* small preview boxes (review queue, campaign list, moderation): picture and headline on top, button below */
.sell-prev .card.ad-card.ad-shape:not(.banner),.adv-prev .card.ad-card.ad-shape:not(.banner),.md-ad-prev .card.ad-card.ad-shape:not(.banner),.f-right .card.ad-card.ad-shape:not(.banner),.f-left .card.ad-card.ad-shape:not(.banner),.rail .card.ad-card.ad-shape:not(.banner){grid-template-columns:72px minmax(0,1fr);grid-template-areas:"pic lbl" "pic txt" "cta cta";row-gap:6px;column-gap:10px;padding:10px}
.sell-prev .card.ad-card.ad-shape:not(.banner):not(.has-creative),.adv-prev .card.ad-card.ad-shape:not(.banner):not(.has-creative),.md-ad-prev .card.ad-card.ad-shape:not(.banner):not(.has-creative){grid-template-columns:minmax(0,1fr);grid-template-areas:"lbl" "txt" "cta"}
.sell-prev .card.ad-card.ad-shape:not(.banner) img.ad-creative,.adv-prev .card.ad-card.ad-shape:not(.banner) img.ad-creative,.md-ad-prev .card.ad-card.ad-shape:not(.banner) img.ad-creative,.sell-prev .card.ad-card.ad-shape .ad-ph,.adv-prev .card.ad-card.ad-shape .ad-ph,.md-ad-prev .card.ad-card.ad-shape .ad-ph{width:72px;height:40px;max-height:40px}
.sell-prev .card.ad-card.ad-shape>.ad-body p,.adv-prev .card.ad-card.ad-shape>.ad-body p,.md-ad-prev .card.ad-card.ad-shape>.ad-body p{display:none}
.sell-prev .card.ad-card.ad-shape>.btn.ad-cta,.adv-prev .card.ad-card.ad-shape>.btn.ad-cta,.md-ad-prev .card.ad-card.ad-shape>.btn.ad-cta{justify-self:center}

/* YouTube Shorts in ads: a tall 9:16 player, centered, never taller than 460px */
.ad-card .yt-short{aspect-ratio:9/16;width:auto;max-width:100%;height:min(460px,70vh);margin:0 auto;display:block;border-radius:14px;overflow:hidden;background:#000}
.ad-card .f-yt.yt-short img{width:100%;height:100%;object-fit:cover}
.ad-card .f-yt-frame.yt-short iframe{width:100%;height:100%;border:0}
.ad-card.shape-banner .yt-short,.ad-card.shape-half .yt-short{height:auto;aspect-ratio:auto;max-height:110px}

/* ---------- wide ad spaces (bottom of pages, feed, lists): a tidy horizontal card ----------
   creative on the left (16:9, or a tall 9:16 thumbnail for YouTube Shorts), headline and text beside it,
   and the button right under the text instead of floating in the middle */
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner){
  grid-template-columns:clamp(200px,28%,320px) minmax(0,1fr);grid-template-areas:"lbl lbl" "pic txt" "pic cta";
  column-gap:22px;row-gap:10px;align-items:start;padding:16px 18px;border-style:solid;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 55%)}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>:is(.ad-creative-link,.ad-creative){grid-area:pic;align-self:stretch;border-radius:12px;overflow:hidden}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner) :is(img.ad-creative,video.ad-creative,.f-yt.ad-creative,.f-yt-frame){width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-body{grid-area:txt;align-self:end;max-width:72ch}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-body b{font-family:var(--hfont);font-size:1.12rem;line-height:1.25}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-body p{margin-top:4px;line-height:1.5}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>:is(.btn,.ad-cta){grid-area:cta;justify-self:start;align-self:start;margin:4px 0 0}
/* YouTube Shorts in a wide space: a tall thumbnail, not a cropped wide one */
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.ad-yt-short.has-creative:not(.banner){grid-template-columns:auto minmax(0,1fr)}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.ad-yt-short .yt-short{aspect-ratio:9/16!important;height:clamp(200px,32vh,300px)!important;width:auto!important;max-height:none}
@media (max-width:640px){
  :is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner){grid-template-columns:1fr;grid-template-areas:"lbl" "pic" "txt" "cta"}
  :is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>:is(.btn,.ad-cta){justify-self:stretch;text-align:center}
  :is(.page-ad,.f-mid,.list,.rail-main) .ad-card.ad-yt-short.has-creative:not(.banner){grid-template-columns:1fr}
  :is(.page-ad,.f-mid,.list,.rail-main) .ad-card.ad-yt-short .yt-short{height:min(420px,60vh)!important;margin:0 auto}
}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-cta{justify-self:start!important;align-self:start!important}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-body{align-self:center}
@media (max-width:640px){:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-cta{justify-self:stretch!important;justify-content:center}}

/* ===== LinkedIn-style ad spaces (network-ui.js: sponsoredPost, textAds, spotlightAd, promotedJob, leadForm) ===== */
/* sponsored post: a member-post lookalike */
.f-post.ad-post{border-color:color-mix(in srgb,var(--accent2) 28%,var(--line))}
.ad-post-av{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;font:700 1.1rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ad-post-name{font:600 .98rem var(--hfont)}
.ad-post .f-p-head small .ad-tag{display:inline-flex;align-items:center;gap:5px;font:600 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.ad-post-link{display:block;margin:10px -16px 0;background:#000}
.ad-post-media{display:block;width:100%;max-height:420px;object-fit:cover}
.ad-post-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -16px -14px;padding:12px 16px;background:color-mix(in srgb,var(--accent) 6%,var(--surface2));border-top:1px solid var(--line)}
.ad-post-cta b{display:block;font:600 .95rem var(--hfont)}
.ad-post-cta .btn.ad-cta{flex:none;margin:0}
/* text ads: three tiny ads in one card */
.ad-text-card{display:grid;gap:6px;padding:12px 12px 8px}
.ad-text{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:12px;color:var(--text);text-decoration:none;text-align:left;background:none;border:0;font:inherit;cursor:pointer;width:100%;transition:background .15s}
.ad-text:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);text-decoration:none}
.ad-text-ic{width:44px;height:44px;flex:none;border-radius:10px;object-fit:cover;display:grid;place-items:center;font:700 1rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ad-text-t{display:grid;gap:2px;min-width:0}
.ad-text-t b{font-size:.9rem;line-height:1.25}
.ad-text-t small{color:var(--muted);font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-text-t em{font:600 .62rem/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2)}
/* spotlight: the viewer next to the sponsor */
.ad-spot{display:grid;justify-items:center;text-align:center;gap:10px;padding:16px;position:relative;overflow:hidden;background:radial-gradient(260px 140px at 50% 0%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),var(--surface)}
.ad-spot::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.ad-spot .ad-label{justify-self:stretch}
.ad-spot-pair{display:flex;align-items:center;gap:10px}
.ad-spot-pair .avatar,.ad-spot-pair img,.ad-spot-pair .nav-av{width:56px;height:56px;border-radius:50%}
.ad-spot-plus{font:700 1.2rem var(--hfont);color:var(--muted)}
.ad-spot-logo{width:56px;height:56px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font:700 1.3rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px -12px var(--accent2)}
.ad-spot-h{font:700 1.05rem/1.3 var(--hfont)}
.ad-spot-p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.45}
/* promoted job: a job card with a tag */
.jobcard.ad-job{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;border-color:color-mix(in srgb,var(--accent2) 35%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 7%,var(--surface)),var(--surface));cursor:default}
.ad-job-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.ad-job-top .ad-tag{display:inline-flex;align-items:center;gap:5px;font:600 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.ad-job-logo{width:44px;height:44px;border-radius:12px;object-fit:cover}
.ad-job-cta{margin:0;white-space:nowrap}
/* lead form */
.ad-lead-h{display:flex;align-items:center;gap:12px}
.ad-lead-h .ad-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:700 1.1rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ad-lead-rows{display:grid;gap:8px}
.ad-lead-rows>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.ad-lead-rows b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){.ad-post-cta{flex-direction:column;align-items:stretch}.jobcard.ad-job{grid-template-columns:auto minmax(0,1fr)}.ad-job-cta{grid-column:1/-1;justify-self:start}}
.adv-lead{padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent2) 35%,var(--line));background:color-mix(in srgb,var(--accent2) 5%,var(--surface));font-size:.88rem;line-height:1.45}
.adv-leads{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);font-size:.9rem}
.adv-leads .ico{width:16px;height:16px;color:var(--accent)}
.ad-lead-h>div{display:grid;gap:2px}
/* promote a post */
.pp-prev{padding:12px 14px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);display:grid;gap:6px}
.pp-prev .ad-tag{justify-self:start;display:inline-flex;align-items:center;gap:5px;font:600 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.pp-prev p{margin:0;font-size:.92rem;line-height:1.45}
.pr-weeks{display:flex}
.ad-member-post{border-color:color-mix(in srgb,var(--accent2) 35%,var(--line))}
.ad-tag-post{display:inline-flex;align-items:center;gap:5px;font:600 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.as-rv-post{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent2) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent2) 30%,var(--line));font-size:.9rem;line-height:1.45}.as-rv-post .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent2)}

/* ad fit: a creative is always shown whole (never cropped or squashed); the card grows to hold it */
.n-left .ad-mini img.ad-creative,.n-left .ad-mini video.ad-creative,.ng-left .ad-mini img.ad-creative,.ng-left .ad-mini video.ad-creative,.ng-mini .ad-card img.ad-creative,.ng-mini .ad-card video.ad-creative,
.ad-left img.ad-creative,.ad-left video.ad-creative,.rail-ad img.ad-creative,.rail-ad video.ad-creative{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:10px;display:block;background:#05060f}
.n-left .ad-mini .ad-creative-link,.ng-left .ad-mini .ad-creative-link,.ad-left .ad-creative-link,.n-left .ad-mini .ad-vid,.ng-left .ad-mini .ad-vid,.ad-left .ad-vid{display:block;width:100%;height:auto;max-height:none;line-height:0;border-radius:10px;overflow:hidden}
.n-left .ad-mini,.ng-left .ad-mini,.ad-left{overflow:hidden}
/* sponsored feed post: the call-to-action bar sits inside the card, flush with its bottom edge */
html body .f-post.ad-post{padding:16px 18px 0!important}
html body .f-post.ad-post .f-p-head .pop,html body .f-post.ad-post .f-p-head .menu{overflow:visible}
html body .f-post.ad-post .ad-post-link{margin:10px -18px 0!important;border-radius:0}
html body .f-post.ad-post .ad-post-cta{margin:0 -18px!important;border-radius:0 0 var(--radius) var(--radius)}
@media (max-width:600px){html body .f-post.ad-post{padding:14px 12px 0!important}html body .f-post.ad-post .ad-post-link{margin:10px -12px 0!important}html body .f-post.ad-post .ad-post-cta{margin:0 -12px!important}}

/* text-only ads: stack so narrow sidebars never squeeze the copy or push the button out */
body .card.ad-card.ad-shape:not(.has-creative):not(.banner){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"lbl" "txt" "cta";row-gap:8px;overflow:hidden}
body .card.ad-card.ad-shape:not(.has-creative):not(.banner)>.ad-body{align-items:flex-start}
body .card.ad-card.ad-shape:not(.has-creative):not(.banner)>.ad-body p{-webkit-line-clamp:3}
body .card.ad-card.ad-shape:not(.has-creative):not(.banner)>.btn.ad-cta,body .card.ad-card.ad-shape:not(.has-creative):not(.banner)>a.ad-cta{justify-self:start;max-width:100%}
.f-right .card.ad-card.ad-shape:not(.has-creative),.f-left .card.ad-card.ad-shape:not(.has-creative),.rail .card.ad-card.ad-shape:not(.has-creative){grid-template-columns:minmax(0,1fr);grid-template-areas:"lbl" "txt" "cta"}

/* left-rail / settings-rail ads: one column that can never grow past the rail; copy fills the width */
.ad-left{grid-template-columns:minmax(0,1fr);padding:12px;gap:8px;max-width:100%;box-sizing:border-box}
.ad-left>*{min-width:0;max-width:100%}
.ad-left .ad-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.ad-left .ad-body>div{min-width:0;overflow-wrap:anywhere}
.ad-left .ad-body b{font-size:.9rem;line-height:1.25}
.ad-left .ad-body p{font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ad-left .ad-ic{width:32px;height:32px}
.ad-left .btn.ad-cta{justify-self:stretch;width:100%;box-sizing:border-box;justify-content:center;padding:7px 12px;font-size:.8rem;white-space:normal;text-align:center}

/* compact text-only ads in narrow rails (feed left/right columns, settings rail): stack instead of text | button side by side */
:is(.ng-left,.ng-mini,.n-left,.ng-right,.rail,.f-left,.f-right,.st-left,.hx-left,.jh-left) .ad-card.compact:not(.has-creative),.ad-left.compact:not(.has-creative){grid-template-columns:minmax(0,1fr)}
:is(.ng-left,.ng-mini,.n-left,.ng-right,.rail,.f-left,.f-right,.st-left,.hx-left,.jh-left) .ad-card.compact:not(.has-creative)>.ad-body{min-width:0}
:is(.ng-left,.ng-mini,.n-left,.ng-right,.rail,.f-left,.f-right,.st-left,.hx-left,.jh-left) .ad-card.compact:not(.has-creative)>.ad-body>div{min-width:0;overflow-wrap:anywhere}
:is(.ng-left,.ng-mini,.n-left,.ng-right,.rail,.f-left,.f-right,.st-left,.hx-left,.jh-left) .ad-card.compact:not(.has-creative) .btn.ad-cta{justify-self:stretch;width:100%;box-sizing:border-box;justify-content:center;margin-top:2px}

/* ONE rule for every text-only ad, everywhere (feed, rails, settings, lists, jobs): copy gets the room, the button wraps under it when the card is narrow */
html body .card.ad-card.ad-card:not(.has-creative):not(.banner){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-sizing:border-box;max-width:100%;min-width:0}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-label{flex:0 0 100%;margin:0}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body{flex:1 1 220px;min-width:0;display:flex;gap:10px;align-items:flex-start}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body>div{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body b{display:block;font-size:.9rem;line-height:1.25;-webkit-line-clamp:unset;overflow:visible}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:.8rem;line-height:1.35;margin:2px 0 0}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body .ad-ic{flex:none;width:34px;height:34px}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.btn.ad-cta,html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>a.ad-cta{flex:0 0 auto;max-width:100%;margin:0;box-sizing:border-box;justify-self:auto;white-space:normal;text-align:center}


/* v1.90.4 ads never wider than their column (image, video and placeholder creatives were overflowing narrow side columns and covering the page) */
body .card.ad-card{min-width:0;max-width:100%;overflow:hidden}
body .card.ad-card .ad-creative-link{min-width:0;max-width:100%;box-sizing:border-box}
body .card.ad-card :is(.ad-creative,.ad-ph,img.ad-creative,video.ad-creative,.f-yt,.f-yt-frame,.ad-vid,.yt-short){max-width:100%;box-sizing:border-box}
body .card.ad-card.compact:not(.ad-shape) .ad-creative-link{width:100%;height:auto}
body .card.ad-card.compact:not(.ad-shape) :is(.ad-creative,.ad-ph,img.ad-creative,video.ad-creative,.f-yt,.f-yt-frame){width:100%;height:auto;max-height:240px;aspect-ratio:16/9;object-fit:cover}
body .card.ad-card.compact:not(.ad-shape) .yt-short{width:auto;max-width:100%;height:min(300px,45vh)}
body .card.ad-card .ad-cta,body .card.ad-card .btn{max-width:100%}

/* v1.91 ads in lists and at the bottom of pages: readable text on narrow screens (the headline and text were squeezed beside the button and creative) */
body .card.ad-card .ad-body p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
body .card.ad-card .ad-body>div{min-width:0}
@media (max-width:820px){
  body .card.ad-card.compact:not(.ad-shape):not(.has-creative){display:flex;flex-direction:column;align-items:stretch;gap:10px}
  body .card.ad-card.compact:not(.ad-shape):not(.has-creative) .ad-cta,body .card.ad-card.compact:not(.ad-shape):not(.has-creative)>.btn{align-self:stretch;width:100%;text-align:center;justify-content:center;margin:0}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner),:is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.ad-yt-short.has-creative:not(.banner){
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"lbl" "pic" "txt" "cta";row-gap:12px;padding:14px}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner)>:is(.ad-creative-link,.ad-creative){grid-area:pic;width:100%;max-height:260px}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner) :is(img.ad-creative,video.ad-creative,.f-yt.ad-creative,.f-yt-frame,.ad-vid video,.yt-short){width:100%;max-height:260px;height:auto;aspect-ratio:16/9;object-fit:cover}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner)>.ad-body{grid-area:txt;max-width:none}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner)>:is(.btn,.ad-cta){grid-area:cta;justify-self:stretch;width:100%;text-align:center;justify-content:center;margin:0}
}
/* banner ads sit in the content column, not centred under the sidebar */
.page-ad .ad-card.banner,.page-ad .ad-card.shape-banner{max-width:100%;margin-left:0;margin-right:0}

/* billing.css */
/* ReconHire: billing styles (pricing cards on the light theme, Plan & billing page, cancel flow) */

/* ---------- pricing cards: white cards, dark text, featured card with a blue/violet border and soft glow ---------- */
.ptile{background:var(--surface);color:var(--text);border:1px solid var(--line2);box-shadow:var(--shadow)}
.ptile::before{height:96px;background:radial-gradient(ellipse at 50% -40%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
.ptile:hover{transform:translateY(-3px);box-shadow:0 18px 44px -24px rgba(15,23,42,.35),0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.ptile.hot{animation:none;border:2px solid transparent;color:var(--text);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,#ffffff),#ffffff 62%) padding-box,linear-gradient(135deg,var(--accent),var(--accent2)) border-box;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent),0 24px 60px -28px color-mix(in srgb,var(--accent) 60%,transparent)}
.ptile.hot:hover{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 14%,transparent),0 28px 64px -26px color-mix(in srgb,var(--accent) 65%,transparent)}
.ptile.hot::before{background:radial-gradient(ellipse at 50% -40%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 70%)}
.ptile .ptile-top h3,.ptile .pprice b,.ptile.hot .pprice b{color:var(--text);background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor}
.ptile .ptile-top p,.ptile .muted{color:var(--muted)}
.ptile .pprice span{color:var(--muted)}
.ptile .pprice s.was,.pass .pprice s.was,.co-sum .pprice s.was{color:var(--muted);text-decoration-color:color-mix(in srgb,var(--text) 55%,transparent)}
.ptile .psub,.pass .psub{color:var(--muted);font-size:.86rem}
.intro-note{color:color-mix(in srgb,var(--accent) 72%,#0f172a);font-weight:600}
.ptile .plimits{border-color:var(--line2)}
.ptile .plimits span{color:var(--muted)}
.ptile .plimits b{color:var(--text)}
.ptile .pfeat li{color:var(--text)}
.ptile .pfeat .ico{color:#047857}
.ptile.mine{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--good) 55%,transparent),var(--shadow)}
.ptile.hot.mine{box-shadow:0 0 0 5px color-mix(in srgb,var(--good) 18%,transparent),0 24px 60px -28px color-mix(in srgb,var(--accent) 60%,transparent)}
.pbadge{box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.pass{box-shadow:var(--shadow);color:var(--text)}
.pass .muted{color:var(--muted)}
.intro-banner{color:var(--text);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,#ffffff),color-mix(in srgb,var(--accent2) 7%,#ffffff))}
.intro-banner .dim{color:var(--muted)}
.intro-banner .intro-tag{color:var(--on-accent,#fff);background:color-mix(in srgb,var(--accent) 88%,#0f172a)}
.price-foot p,.methods .dim{color:var(--muted)}
@media (max-width:640px){
  .ptile{padding:24px 18px 20px}
  .ptile.hot{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent),0 18px 40px -24px color-mix(in srgb,var(--accent) 55%,transparent)}
  .pbadge{top:14px;right:14px}
}

/* ---------- Plan & billing ---------- */
.bl-flash{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:.93rem;margin-bottom:16px}
.bl-flash .ico{width:18px;height:18px;flex:none;margin-top:2px}
.bl-flash.ok{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0}
.bl-flash.bad{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}
.bl-flash.info{color:#1e3a8a;background:#eff6ff;border:1px solid #bfdbfe}
.bl-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start}
.bl-col{display:grid;gap:18px;min-width:0}
.bl-grid .card{margin:0}
.bl-card h3{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.bl-card h3 .ico{width:18px;height:18px;color:var(--accent)}
.bl-sub{margin:0 0 14px;color:var(--muted);font-size:.9rem}
.bl-sum{position:relative;overflow:hidden}
.bl-sum.paid{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--accent) 9%,transparent),transparent 55%),var(--surface)}
.bl-sum-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.bl-sum-top h2{font-size:clamp(1.6rem,3vw,2rem);margin:2px 0 0}
.bl-kicker{font:600 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bl-status{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font:600 .8rem/1 var(--font);white-space:nowrap;border:1px solid transparent}
.bl-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.bl-status.active{color:#065f46;background:#ecfdf5;border-color:#a7f3d0}
.bl-status.trial{color:#1e40af;background:#eff6ff;border-color:#bfdbfe}
.bl-status.canceling{color:#92400e;background:#fffbeb;border-color:#fde68a}
.bl-status.past_due,.bl-status.incomplete{color:#991b1b;background:#fef2f2;border-color:#fecaca}
.bl-status.prepaid,.bl-status.comp{color:#5b21b6;background:#f5f3ff;border-color:#ddd6fe}
.bl-status.free,.bl-status.admin,.bl-status.off{color:#334155;background:#f1f5f9;border-color:#e2e8f0}
.bl-note{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:.9rem;line-height:1.5}
.bl-note.warn{color:#92400e;background:#fffbeb;border:1px solid #fde68a}
.bl-note.bad{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}
.bl-note.good{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0}
.bl-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:0;margin:16px 0 0;border:1px solid var(--line);border-width:1px 0 0 1px;border-radius:14px;overflow:hidden;background:var(--surface)}
.bl-facts>div{background:var(--surface);padding:12px 14px;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.bl-facts dt{font-size:.78rem;color:var(--muted);margin:0 0 3px}
.bl-facts dd{margin:0;font-weight:600;color:var(--text);overflow-wrap:anywhere;line-height:1.35}
.bl-facts dd small{display:block;font-weight:400;color:var(--muted);font-size:.82rem;margin-top:2px}
.bl-price{font:700 1.35rem/1.1 var(--hfont);font-variant-numeric:tabular-nums}
.bl-price s{font:500 .95rem var(--font);color:var(--muted);margin-left:6px}
.bl-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bl-acts .btn{flex:0 1 auto}
.bl-cancel-btn{background:#fff;color:#b91c1c;box-shadow:inset 0 0 0 1.5px #fca5a5}
.bl-cancel-btn:hover{background:#fef2f2}
.bl-upnext{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.bl-upnext .when{font-weight:600}
.bl-upnext .amt{font:700 1.5rem/1 var(--hfont);font-variant-numeric:tabular-nums}
.bl-break{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:12px 2px 0;font-size:.9rem}
.bl-break dt{color:var(--muted)}.bl-break dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.bl-break .tot{font-weight:700;color:var(--text);border-top:1px solid var(--line);padding-top:6px}
.bl-break .off{color:#047857}
.bl-fine{font-size:.82rem;color:var(--muted);margin:10px 0 0}
.bl-rcpt{width:100%;border-collapse:collapse;font-size:.9rem}
.bl-rcpt th{font-weight:600;font-size:.78rem;color:var(--muted);text-align:left;padding:0 10px 8px;border-bottom:1px solid var(--line)}
.bl-rcpt td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.bl-rcpt tr:last-child td{border-bottom:0}
.bl-rcpt .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-rcpt .desc small{display:block;color:var(--muted);font-size:.8rem}
.bl-rcpt .links{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.bl-rcpt .links a{font-size:.84rem;white-space:nowrap}
.bl-st{display:inline-block;padding:3px 8px;border-radius:999px;font:600 .74rem/1.2 var(--font);background:#f1f5f9;color:#334155;text-transform:capitalize}
.bl-st.keep{text-transform:none}
.bl-st.paid{background:#ecfdf5;color:#065f46}.bl-st.due,.bl-st.failed{background:#fef2f2;color:#991b1b}.bl-st.refunded,.bl-st.partly{background:#fffbeb;color:#92400e}
.bl-card-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.bl-card-row+.bl-card-row{margin-top:8px}
.bl-card-row.def{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 4%,#fff)}
.bl-brand{flex:none;display:grid;place-items:center;width:46px;height:32px;border-radius:7px;font:700 .66rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#1e293b,#475569)}
.bl-brand.visa{background:linear-gradient(135deg,#1a1f71,#2563eb)}.bl-brand.mastercard{background:linear-gradient(135deg,#eb001b,#f79e1b)}.bl-brand.amex{background:linear-gradient(135deg,#006fcf,#0ea5e9)}.bl-brand.discover{background:linear-gradient(135deg,#e55c20,#f59e0b)}.bl-brand.paypal{background:linear-gradient(135deg,#003087,#009cde)}
.bl-card-info{flex:1;min-width:0}
.bl-card-info b{display:block}.bl-card-info span{font-size:.84rem;color:var(--muted)}
.bl-card-row .row{gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bl-plans{display:grid;gap:8px;margin-top:12px}
.bl-plan{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:12px;border:1px solid var(--line)}
.bl-plan.cur{background:var(--surface2)}
.bl-plan b{display:block}.bl-plan span{font-size:.85rem;color:var(--muted)}
.bl-upsell{display:grid;gap:10px;margin-top:14px;padding:16px;border-radius:14px;border:2px solid transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,#fff),#fff) padding-box,linear-gradient(135deg,var(--accent),var(--accent2)) border-box}
.bl-upsell ul{margin:0;padding-left:18px;color:var(--text);font-size:.92rem}
.bl-upsell .intro-note{font-size:.9rem}
.bl-empty{color:var(--muted);margin:4px 0 0}
/* cancel flow */
.cx{display:grid;gap:12px}
.cx-step{font:600 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cx h4{font:700 1.15rem var(--hfont);margin:0}
.cx p{margin:0}
.cx-reasons{display:grid;gap:6px}
.cx-reasons label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line2);cursor:pointer;font-size:.94rem}
.cx-reasons label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,#fff)}
.cx-reasons input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.cx-offer{text-align:center;padding:18px 16px;border-radius:16px;border:2px solid transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,#fff),#fff) padding-box,linear-gradient(135deg,var(--accent),var(--accent2)) border-box}
.cx-offer .big{font:700 2.1rem/1.1 var(--hfont);color:var(--text);margin:4px 0}
.cx-offer .big s{font:500 1.05rem var(--font);color:var(--muted);margin-left:6px}
.cx-acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.cx-done{text-align:center}
.cx-done .fi{margin:0 auto 6px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center}
.cx-done .fi.ok{background:#ecfdf5;color:#047857}.cx-done .fi.end{background:#fffbeb;color:#b45309}
@media (max-width:900px){.bl-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .bl-acts .btn{flex:1 1 calc(50% - 10px);justify-content:center}
  .bl-rcpt thead{display:none}
  .bl-rcpt,.bl-rcpt tbody,.bl-rcpt tr,.bl-rcpt td{display:block;width:100%}
  .bl-rcpt tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:11px 0;border-bottom:1px solid var(--line)}
  .bl-rcpt tr:last-child{border-bottom:0}
  .bl-rcpt td{padding:0;border:0}
  .bl-rcpt td.date{grid-column:1;font-size:.8rem;color:var(--muted)}
  .bl-rcpt td.desc{grid-column:1}
  .bl-rcpt td.num{grid-column:2;grid-row:1 / span 2;align-self:center}
  .bl-rcpt td.stc{grid-column:1}
  .bl-rcpt .links{grid-column:1 / -1;justify-content:flex-start;margin-top:4px}
  .bl-card-row{flex-wrap:wrap}
  .bl-card-row .row{width:100%;justify-content:flex-start}
  .cx-acts .btn{flex:1 1 100%;justify-content:center}
}
/* Change plan card (billing-ui.js changeCard) */
.bl-plan-x{align-items:flex-start}
.bl-plan-x .bl-plan-main{min-width:0}
.bl-plan-x .bl-plan-price{display:inline-block;margin-left:8px;font:600 .85rem var(--mono);color:var(--muted)}
.bl-plan-keys{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px}
.bl-plan-keys li{font-size:.82rem;color:var(--muted)}
.bl-plan-keys li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin:0 6px 2px 0}
.bl-plan-x>.btn,.bl-plan-x>.bl-st{flex:none;white-space:nowrap}
.bl-pending{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);font-size:.9rem}
.bl-pending>span{flex:1;min-width:180px}.bl-pending>.ico{color:var(--accent)}
.bl-diff{display:grid;gap:10px;margin:10px 0}
.bl-diff ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px;font-size:.88rem}
.bl-diff li{display:flex;gap:6px;align-items:flex-start}.bl-diff li .ico{width:14px;height:14px;margin-top:3px;flex:none}
.bl-diff-g .ico{color:var(--good)}.bl-diff-l .ico{color:var(--bad)}
.bl-steps{margin:6px 0 10px;padding-left:20px;display:grid;gap:4px;font-size:.9rem}
/* grouped perks on pricing cards */
.pgroups{display:grid;gap:12px;margin:14px 0 12px}
.pgroup{display:grid;gap:6px}
.pgroup-h{font:700 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ptile .pgroup .pfeat{gap:6px;font-size:.88rem}
.ba-flaggroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.ba-flaggroup{display:grid;gap:8px;align-content:start}
.ba-salsel{margin:0}
@media (max-width:520px){.bl-plan-x{flex-wrap:wrap}.bl-plan-x>.btn,.bl-plan-x>.bl-st{margin-left:auto}}
#bl-change .seg .save{margin-left:6px}

/* access.css */
/* ReconHire: access styles (Admin → Roles matrix, staff list, access preview, read-only views for staff) */

/* ---------- Roles tab ---------- */
.ac-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ac-head h2{margin:0}
.ac-head p{margin:4px 0 0;max-width:720px}
.ac-views{flex-wrap:wrap}
.ac-warn{margin:0;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--bad) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);color:#b91c1c;font-size:.9rem;display:flex;align-items:center;gap:6px}
.ac-readonly{margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--surface2);border:1px dashed var(--line2);color:var(--muted);font-size:.86rem;display:flex;align-items:center;gap:6px}

/* the matrix */
.ac-matrix{padding:0;overflow:hidden}
.ac-scroll{overflow:auto;max-height:72vh}
.ac-table{border-collapse:separate;border-spacing:0;width:100%;font-size:.88rem}
.ac-table thead th{position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--line2);padding:10px 8px;vertical-align:bottom}
.ac-table .ac-pcol{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;min-width:300px;max-width:380px;padding:9px 14px;border-right:1px solid var(--line);font-weight:400}
.ac-table thead .ac-pcol{z-index:3}
.ac-table .ac-pcol b{display:block;font-weight:600;line-height:1.35}
.ac-table .ac-pcol code{font-family:var(--mono);font-size:.74rem;color:var(--dim)}
.ac-rcol{min-width:92px;text-align:center}
.ac-rcol b{display:block;font-size:.84rem;line-height:1.25}
.ac-rcol small{display:block;font-size:.72rem;font-weight:400}
.ac-lock{color:var(--accent)}
.ac-coltools{display:flex;justify-content:center;gap:2px;margin-top:4px}
.ac-coltools .icon-btn{width:26px;height:26px}
.ac-coltools .ico{width:14px;height:14px}
.ac-group th{background:var(--surface2);text-align:left;padding:7px 14px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;left:0}
.ac-table tbody tr:not(.ac-group):hover td,.ac-table tbody tr:not(.ac-group):hover .ac-pcol{background:color-mix(in srgb,var(--accent2) 5%,var(--surface))}
.ac-cell{text-align:center;padding:6px;border-bottom:1px solid var(--line)}
.ac-table .ac-pcol{border-bottom:1px solid var(--line)}
.ac-tick{display:inline-flex;padding:6px;cursor:pointer;border-radius:8px}
.ac-tick input{width:18px;height:18px;accent-color:var(--accent2);cursor:pointer}
.ac-on{color:var(--good);display:inline-flex}
.ac-cell.ac-changed{background:color-mix(in srgb,var(--accent) 16%,var(--surface))!important}
.ac-savebar{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:14px;background:var(--text);color:var(--surface);box-shadow:var(--shadow)}
.ac-savebar .btn.ghost{color:var(--surface);border-color:color-mix(in srgb,var(--surface) 40%,transparent)}
.ac-new h3{margin:0}
.ac-new p{margin:4px 0 12px}
.ac-newrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end}

/* staff list */
.ac-staff{padding:6px 8px}
.ac-stable td{vertical-align:middle}
.ac-stable td b,.ac-stable td small{display:block}
.ac-stable select{max-width:200px}
.ac-stable tr.ac-off{opacity:.55}
.ac-ovs{display:flex;flex-wrap:wrap;gap:4px}
.ac-ovs .chip{font-family:var(--mono);font-size:.72rem}
.ac-acts{flex-wrap:nowrap;justify-content:flex-end}

/* per-person overrides dialog */
.ac-ovdlg h4{margin:10px 0 0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ac-ovrow{display:grid;grid-template-columns:minmax(0,1fr) 170px 150px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.ac-ovrow b{display:block;font-weight:500;font-size:.88rem}
.ac-ovrow code{font-family:var(--mono);font-size:.72rem;color:var(--dim)}

/* access preview */
.ac-prevhead{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:16px;align-items:end}
.ac-prevhead p{margin:0 0 10px}
.ac-prevgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px}
.ac-prevgrid h4{margin:0 0 10px}
.ac-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.ac-tab{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;font-size:.86rem;border:1px solid var(--line)}
.ac-tab .ico{width:15px;height:15px;flex:none}
.ac-tab.on{background:color-mix(in srgb,var(--good) 10%,var(--surface));border-color:color-mix(in srgb,var(--good) 35%,transparent);color:var(--text)}
.ac-tab.on .ico{color:var(--good)}
.ac-tab.off{color:var(--dim);background:var(--surface2)}
.ac-areas{display:flex;flex-direction:column;gap:4px}
.ac-area{display:flex;justify-content:space-between;gap:12px;padding:7px 10px;border-radius:10px;font-size:.87rem;border-left:3px solid var(--line2);background:var(--surface2)}
.ac-area b{font-weight:600;text-align:right}
.ac-area.lv2{border-left-color:var(--good)}
.ac-area.lv1{border-left-color:var(--accent)}
.ac-area.lv0{color:var(--dim)}
.ac-area.lv0 b{font-weight:400}

/* security events (Security tab) */
.ac-ev-table td{font-size:.84rem;vertical-align:top}
.ac-ev-detail{max-width:360px;overflow-wrap:anywhere}
.ac-ua{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-devices summary{cursor:pointer}

/* ---------- read-only views: staff who can look but not change ---------- */
.ac-ro .btn:not(.ac-keep){display:none!important}
.ac-ro-inputs input,.ac-ro-inputs select,.ac-ro-inputs textarea{pointer-events:none;opacity:.75}
.ac-ro-support .reply-box,.ac-ro-support .tk-note,.ac-ro-support .flagbtn,.ac-ro-support .tk-head input[type=checkbox],.ac-ro-support .bulkbar{display:none!important}
.ac-noact .md-mod-box .btn.sm,.ac-noact .md-mod-box .md-x{display:none!important}
.ac-noads .md-ads-box .btn.sm{display:none!important}

@media (max-width:760px){
  .ac-newrow,.ac-prevhead,.ac-prevgrid{grid-template-columns:1fr}
  .ac-ovrow{grid-template-columns:1fr 1fr}
  .ac-ovrow>div{grid-column:1/-1}
  .ac-table .ac-pcol{min-width:200px}
}
.ac-ro-inputs label{pointer-events:none}

/* No scroll bars: the matrix fits the page width and scrolls with the page (header stays visible under the top bar) */
.ac-matrix{overflow:visible}
.ac-scroll{overflow:visible;max-height:none}
.ac-table{table-layout:fixed;width:100%}
.ac-table .ac-pcol{position:static;min-width:0;max-width:none;width:30%;padding:8px 12px}
.ac-table .ac-pcol b{font-size:.84rem}
.ac-table .ac-pcol code{font-size:.68rem}
.ac-table thead th{top:56px;padding:8px 4px}
.ac-rcol{min-width:0;overflow-wrap:anywhere}
.ac-rcol b{font-size:.76rem}
.ac-rcol small{font-size:.66rem}
.ac-coltools .icon-btn{width:22px;height:22px}
.ac-coltools .ico{width:12px;height:12px}
.ac-cell{padding:4px 2px}
.ac-tick{padding:4px}
.ac-tick input{width:16px;height:16px}
.ac-group th{position:static}
@media (max-width:900px){.ac-table .ac-pcol{width:38%}.ac-table .ac-pcol code{display:none}.ac-coltools{flex-direction:column;align-items:center}}
/* phones: role names turn sideways so the whole matrix still fits without scrolling */
@media (max-width:700px){
  .ac-table .ac-pcol{width:44%;padding:8px}
  .ac-table thead th.ac-rcol{vertical-align:bottom;height:120px}
  .ac-rcol b{writing-mode:vertical-rl;transform:rotate(180deg);margin:0 auto;font-size:.72rem;white-space:nowrap;overflow-wrap:normal}
  .ac-rcol small,.ac-rcol .ac-coltools,.ac-rcol .ac-lock{display:none}
  .ac-tick input{width:15px;height:15px}
}
/* the role names row stays pinned under the top bar while you scroll the permissions */
.ac-table thead th,.ac-table thead th.ac-pcol{position:sticky;top:var(--head-h,56px);z-index:6;background:var(--surface);box-shadow:inset 0 -1px 0 var(--line2)}
.ac-matrix,.ac-matrix .card,.ac-scroll{overflow:visible!important}

/* hiring.css */
/* ReconHire: hiring accounts. Account-type picker (sign-up and Settings), the hiring welcome step,
   the Hiring hub (talent search + pipeline) and the "Verified employer" / "Recruiter" labels.
   Colors come from the theme variables so light and dark mode both work. */
.acct-grid{--ac:var(--accent);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
.acct-card{--ac:var(--accent);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;padding:20px 18px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s,background .18s;min-height:100%}
.acct-card.t-employer{--ac:var(--good)}
.acct-card.t-recruiter{--ac:var(--accent2)}
.acct-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:16px 16px 0 0;background:var(--ac);opacity:.75}
.acct-card:hover{border-color:color-mix(in srgb,var(--ac) 55%,var(--line));transform:translateY(-2px);box-shadow:0 12px 30px -18px color-mix(in srgb,var(--ac) 80%,transparent)}
.acct-card:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.acct-card.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,var(--surface));box-shadow:0 0 0 1px var(--ac),0 12px 30px -16px color-mix(in srgb,var(--ac) 70%,transparent)}
.acct-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;flex:none;background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac)}
.acct-ic svg{width:23px;height:23px}
.acct-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.acct-txt b{font:700 1.05rem/1.25 var(--hfont)}
.acct-txt small{color:var(--muted);font-size:.85rem;line-height:1.4}
.acct-perks{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.acct-perks li{display:flex;align-items:flex-start;gap:7px;font-size:.84rem;color:var(--muted);line-height:1.35}
.acct-perks svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--ac);stroke-width:2.4}
.acct-mark{position:absolute;top:16px;right:14px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;color:transparent;transition:all .18s}
.acct-mark svg{width:13px;height:13px;stroke-width:2.6}
.acct-card.on .acct-mark{background:var(--ac);border-color:var(--ac);color:#fff}
.acct-grid.compact{grid-template-columns:1fr;gap:8px}
.acct-grid.compact .acct-card{flex-direction:row;align-items:center;padding:12px 44px 12px 14px;gap:12px}
.acct-grid.compact .acct-card::before{inset:0 auto 0 0;width:4px;height:auto;border-radius:16px 0 0 16px}
.acct-grid.compact .acct-ic{width:38px;height:38px;border-radius:11px}
.acct-grid.compact .acct-mark{top:50%;transform:translateY(-50%)}
.acct-note{font-size:.84rem;margin:0}
.acct-title{margin:0}
.acct-pick{max-width:980px;margin:0 auto}
.quiz-wrap:has(.acct-pick){max-width:1000px}
.acct-chosen{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:18px;border-radius:14px;border:1px solid var(--line);background:var(--surface2)}
.acct-chosen .acct-ic{--ac:var(--good);width:38px;height:38px}
.acct-chosen>div{flex:1;display:flex;flex-direction:column;line-height:1.25}
.acct-chosen small{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
.acct-badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:-4px 0 14px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--good) 6%,var(--surface));border:1px dashed color-mix(in srgb,var(--good) 35%,var(--line))}
.acct-badge-row small:last-child{flex-basis:100%;font-size:.8rem}
.acct-hint{display:flex;align-items:center;gap:6px;font-size:.82rem;margin:-6px 0 12px}
.acct-hint svg{width:14px;height:14px;flex:none}
.acct-form .field{margin-bottom:12px}
.acct-next{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;color:var(--muted);font-size:.86rem}
.acct-next li{display:flex;align-items:center;gap:6px}
.acct-next svg{width:15px;height:15px;color:var(--good)}
.acct-chip{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;border-radius:999px;font:600 .68rem/1.5 var(--font);background:color-mix(in srgb,var(--good) 12%,var(--surface));color:color-mix(in srgb,var(--good) 80%,var(--text));vertical-align:middle}
.acct-chip.t-recruiter{background:color-mix(in srgb,var(--accent2) 12%,var(--surface));color:color-mix(in srgb,var(--accent2) 80%,var(--text))}
.acct-chip svg{width:11px;height:11px}

/* "Verified employer" / "Recruiter" label on messages and profiles */
.hlabel{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 9px 3px 7px;border-radius:999px;font:600 .72rem/1.4 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
  background:color-mix(in srgb,var(--muted) 10%,var(--surface));color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2)}
.hlabel svg{width:12px;height:12px;flex:none;stroke-width:2.3}
.hlabel.ok{background:color-mix(in srgb,var(--good) 13%,var(--surface));color:color-mix(in srgb,var(--good) 82%,var(--text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 40%,transparent)}
.hlabel .hl-co{font-weight:500;opacity:.85;overflow:hidden;text-overflow:ellipsis}
.hlabel .hl-co::before{content:"· "}
.hlabel .hl-ck{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;background:var(--good);color:#fff;font-size:.58rem;font-weight:900;flex:none}
.hlabel.sm{padding:1px 7px 1px 5px;font-size:.66rem;margin:2px 0}
.m-th-b .hlabel,.dock-row-b .hlabel{align-self:flex-start;justify-self:start;width:max-content;max-width:100%}
.m-c-head .hlabel{margin:2px 0 1px}
.dock-who .hlabel{display:flex;width:max-content}
.mp-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ---------- welcome step ---------- */
.hw-wrap{max-width:820px;margin:0 auto;padding:24px 0 40px}
.hw-wrap h1{font-size:clamp(1.8rem,4.2vw,2.6rem);margin:0 0 10px}
.hw-lead{font-size:1.05rem;margin:0 0 20px;max-width:640px}
.hw-badges{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 20px;margin-bottom:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--good) 7%,var(--surface)),var(--surface) 70%)}
.hw-badges>div{display:flex;flex-direction:column;gap:6px}
.hw-badges small{font-size:.76rem}
.hw-arrow{color:var(--dim)}
.hw-arrow svg{width:22px;height:22px}
.hw-steps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hw-steps li{display:flex;flex-direction:column;gap:8px;padding:16px;position:relative}
.hw-steps b{font-family:var(--hfont);font-size:1rem}
.hw-steps p{margin:2px 0 0;font-size:.86rem;line-height:1.45}
.hw-n{position:absolute;top:12px;right:14px;font:700 .8rem var(--mono);color:var(--dim)}
.hw-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.hw-steps li:nth-child(2) .hw-ic{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.hw-steps li:nth-child(3) .hw-ic{background:color-mix(in srgb,var(--accent2) 14%,transparent);color:var(--accent2)}
.hw-ic svg{width:19px;height:19px}
.hw-join{margin:4px 0 18px}
.hw-acts{gap:10px;flex-wrap:wrap}
.hw-foot{margin:18px 0 0;font-size:.86rem}

/* ---------- Hiring hub ---------- */
.hh-off{max-width:620px;margin:30px auto}
.hh-head{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.hh-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 22px;overflow:hidden;
  background:radial-gradient(600px 200px at 100% 0%,color-mix(in srgb,var(--good) 10%,transparent),transparent 70%),linear-gradient(120deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 60%)}
.hh-id{display:flex;align-items:center;gap:16px;min-width:0}
.hh-id h1{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 6px;overflow-wrap:anywhere}
.hh-id .kicker{margin-bottom:4px}
.hh-logo{display:grid;place-items:center;width:64px;height:64px;flex:none;border-radius:16px;background:var(--surface2);border:1px solid var(--line);color:var(--dim);overflow:hidden}
.hh-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.hh-logo svg{width:28px;height:28px}
.hh-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:.86rem}
.hh-meta .tbadge{margin:0}
.hh-st{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font:600 .76rem/1.5 var(--font);background:color-mix(in srgb,var(--muted) 12%,var(--surface));color:var(--muted)}
.hh-st svg{width:13px;height:13px;stroke-width:2.4}
.hh-st.ok{background:color-mix(in srgb,var(--good) 14%,var(--surface));color:color-mix(in srgb,var(--good) 85%,var(--text))}
.hh-st.warn,.hh-st.wait{background:color-mix(in srgb,#f59e0b 16%,var(--surface));color:color-mix(in srgb,#b45309 80%,var(--text))}
.hh-st.bad{background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--bad)}
.hh-acts{display:flex;gap:8px;flex-wrap:wrap}
.hh-cta{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius);border:1px solid color-mix(in srgb,#f59e0b 45%,var(--line));background:linear-gradient(110deg,color-mix(in srgb,#f59e0b 12%,var(--surface)),var(--surface) 75%)}
.hh-cta.wait{border-color:color-mix(in srgb,var(--info) 40%,var(--line));background:linear-gradient(110deg,color-mix(in srgb,var(--info) 10%,var(--surface)),var(--surface) 75%)}
.hh-cta>div{flex:1;min-width:0}
.hh-cta b{font-family:var(--hfont);font-size:1.05rem}
.hh-cta p{margin:3px 0 0;font-size:.88rem;color:var(--muted)}
.hh-cta-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none;background:color-mix(in srgb,#f59e0b 20%,transparent);color:color-mix(in srgb,#b45309 85%,var(--text))}
.hh-cta.wait .hh-cta-ic{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)}
.hh-cta-ic svg{width:22px;height:22px}
.hh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hh-stat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--text);transition:border-color .15s,transform .15s}
a.hh-stat:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px)}
.hh-stat-ic{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
.hh-stat-ic svg{width:18px;height:18px}
.hh-stat b{font:700 1.45rem/1.1 var(--hfont)}
.hh-stat small{color:var(--muted);font-size:.8rem;line-height:1.3}
.hh-stat.hot{border-color:color-mix(in srgb,var(--good) 50%,var(--line))}
.hh-stat.hot .hh-stat-ic{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.hh-tabs{width:max-content;max-width:100%}
.hh-filters{display:flex;flex-direction:column;gap:10px;padding:14px;margin-bottom:10px}
.hh-filters .search{margin:0;position:relative}
.hh-filters .search .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--dim);width:18px;height:18px;pointer-events:none}
.hh-filters .search input{padding-left:40px;margin:0;width:100%}
.hh-fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:8px;align-items:center}
.hh-fgrid .input{margin:0;min-width:0}
.hh-fgrid .switch{white-space:nowrap}
.hh-tip{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:10px 12px;border-radius:12px;font-size:.86rem;color:var(--muted);background:color-mix(in srgb,var(--info) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--info) 25%,var(--line))}
.hh-tip svg{width:16px;height:16px;flex:none;color:var(--info)}
.hh-count{font-size:.85rem;margin:2px 2px 10px}
.hh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.hh-grid>.spin,.hh-grid>.hh-empty,.hh-grid>.err{grid-column:1/-1}
.hh-card{display:flex;flex-direction:column;gap:10px;padding:16px;transition:border-color .15s,box-shadow .15s}
.hh-card:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.hh-card-top{display:flex;gap:12px;align-items:flex-start;min-width:0}
.hh-card-who{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hh-card-who small{display:flex;align-items:center;gap:4px}
.hh-card-who small svg{width:12px;height:12px}
.hh-name{color:var(--text);display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;line-height:1.3}
.hh-name b{font-size:1rem}
.hh-name .tbadge{margin-left:2px}
.hh-hl{color:var(--muted);font-size:.86rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hh-facts{gap:5px;margin:0}
.hh-facts .chip{font-size:.72rem;padding:5px 8px}
.hh-facts .chip svg{width:12px;height:12px}
.hh-certs{display:flex;align-items:flex-start;gap:6px;font-size:.82rem;color:var(--muted);line-height:1.4}
.hh-certs svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--good)}
.hh-card-act{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.hh-card-act .btn{flex:1}
.btn.hh-saved{color:var(--good);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 45%,transparent)}
.btn.hh-locked{opacity:.72}
.hh-empty{padding:30px 20px}
.hh-stages,.hh-stage-pick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.hh-chip{--sc:var(--accent);display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:500 .84rem/1 var(--font);cursor:pointer;transition:all .15s}
.hh-chip svg{width:14px;height:14px}
.hh-chip .n{font:600 .74rem var(--mono);padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.hh-chip:hover{border-color:color-mix(in srgb,var(--sc) 50%,var(--line));color:var(--text)}
.hh-chip.on{border-color:var(--sc);color:var(--text);background:color-mix(in srgb,var(--sc) 12%,var(--surface))}
.s-contacted{--sc:var(--info)}.s-interviewing{--sc:var(--accent2)}.s-offer{--sc:#f59e0b}.s-hired{--sc:var(--good)}.s-notfit{--sc:var(--dim)}
.hh-pipe{display:flex;flex-direction:column;gap:10px}
.hh-row{--sc:var(--accent);display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-left:4px solid var(--sc)}
.hh-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hh-row-main .hh-facts{margin-top:2px}
.hh-row-act{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.hh-row-act .input{width:150px;margin:0}
.hh-note{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--surface2);border:1px dashed var(--line2);font-size:.86rem;cursor:pointer;white-space:pre-wrap}
.hh-note p{margin:0}
.hh-note.empty{color:var(--dim)}
.hh-note:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.hh-stage-pick .hh-chip{font-size:.9rem;padding:10px 14px}

@media (max-width:980px){.hh-fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.hh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .acct-grid{grid-template-columns:1fr}
  .acct-card{flex-direction:row;flex-wrap:wrap;align-items:center;padding:16px 46px 16px 16px}
  .acct-card .acct-txt{flex:1;min-width:0}
  .acct-card .acct-perks{flex-basis:100%;margin-top:4px}
  .acct-card::before{inset:0 auto 0 0;width:4px;height:auto;border-radius:16px 0 0 16px}
  .acct-card .acct-mark{top:18px}
  .hw-steps{grid-template-columns:1fr}
  .hw-steps li{flex-direction:row;align-items:flex-start;gap:12px}
  .hw-acts .btn{flex:1 1 100%}
  .hh-hero{padding:16px}
  .hh-acts{width:100%}.hh-acts .btn{flex:1}
  .hh-cta{flex-wrap:wrap}.hh-cta .btn{width:100%}
  .hh-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hh-fgrid .switch{grid-column:1/-1}
  .hh-grid{grid-template-columns:1fr}
  .hh-row{flex-wrap:wrap}
  .hh-row-act{flex-direction:row;width:100%;align-items:center;justify-content:space-between}
  .hh-row-act .input{flex:1;width:auto}
  .hh-tabs{width:100%}
}
@media (max-width:420px){.hh-stats{grid-template-columns:1fr 1fr}.hh-stat{padding:12px;column-gap:10px}.hh-stat-ic{width:32px;height:32px}.hh-stat b{font-size:1.2rem}.hh-id{gap:12px}.hh-logo{width:52px;height:52px}}
/* conversations: long names with a title badge and a hiring label must not push the pane wider than the screen */
.m-conv,.m-c-head>div{min-width:0}
@media (max-width:760px){.m-wrap{grid-template-columns:minmax(0,1fr)}}
.m-c-head .hlabel{max-width:100%}
@media (max-width:760px){.m-c-head .hlabel .hl-co{display:none}}

/* ui.css */
/* ReconHire: ui styles */
/* Sign out: easy to find at the bottom of the Me menu */
.menu .menu-signout{margin-top:6px;justify-content:center;font-weight:600;color:#b91c1c;background:color-mix(in srgb,#dc2626 8%,transparent);border:1px solid color-mix(in srgb,#dc2626 30%,transparent)}
.menu .menu-signout:hover{background:#dc2626;color:#fff;border-color:#dc2626}
.menu .menu-signout .ico{color:inherit}

/* Top bar, LinkedIn proportions: 56px tall, icon over a short label, items fill the bar height so the
   active underline sits at the very bottom edge instead of running through the label */
.head-row{height:56px}
.head-row>.tabs{height:auto!important;align-self:stretch}
.tabs>a,.tabs>.pop>button{height:56px;min-width:0;padding:0 14px;gap:3px;justify-content:center;font:500 12px/1 var(--font);letter-spacing:0}
.tabs>.pop{height:56px}
.tabs .ico{width:22px;height:22px}
.tabs .nav-lbl{line-height:1.1}
.tabs>a.on::after,.tabs>.pop>button.on::after{left:0;right:0;bottom:0;height:2px;border-radius:0;box-shadow:none}
.tabs .sep{margin:12px 6px}
.me-btn .me-av{width:24px;height:24px}
@media (max-width:1180px) and (min-width:641px){.tabs>a,.tabs>.pop>button{padding:0 9px;font-size:11px}}
@media (max-width:900px) and (min-width:641px){.tabs>a,.tabs>.pop>button{padding:0 6px}.tabs .nav-lbl{font-size:10px}}

/* ---------- Display and language picker ---------- */
.rh-prefs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rh-seg{display:inline-flex;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid var(--line)}
.rh-seg button{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:0;border-radius:8px;background:none;color:var(--muted);font:500 .82rem var(--font);cursor:pointer;white-space:nowrap}
.rh-seg button[aria-checked="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(15,23,42,.14)}
.rh-seg button span{font-size:.95rem;line-height:1}
.rh-lang{position:relative;display:inline-flex;align-items:center;gap:6px;padding:0 4px 0 10px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--muted)}
.rh-lang svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.rh-lang select{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--text);font:500 .84rem var(--font);padding:7px 22px 7px 0;cursor:pointer;outline:none;max-width:170px}
.rh-lang::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.rh-prefs.compact .rh-seg button{padding:5px 8px;font-size:.76rem}
.rh-prefs.compact .rh-lang select{font-size:.8rem;padding:6px 20px 6px 0}
.menu .menu-prefs{padding:8px 12px 6px;border-top:1px solid var(--line);margin-top:4px;display:grid;gap:8px}
.menu .menu-prefs .grp{padding:0;font:600 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.menu .menu-prefs .rh-prefs{flex-direction:column;align-items:stretch}.menu .menu-prefs .rh-seg{display:flex}.menu .menu-prefs .rh-seg button{flex:1;justify-content:center}
.menu .menu-prefs .rh-lang select{max-width:none;flex:1}
.rail-foot .rh-prefs{margin:10px 0 6px}
.foot .rh-prefs{margin-left:auto}
.head-actions .rh-lang{border-color:transparent;background:transparent}
@media (max-width:640px){.head-actions [data-prefs-head]{display:none}}

/* ---------- Dark mode ---------- */
html[data-theme="dark"]{
  --bg:#0b1220;--surface:#111a2c;--surface2:#16213a;--raise:#1a2640;
  --text:#e6ecf7;--muted:#a7b3c9;--dim:#7f8ca6;
  --accent:#5b8cff;--accent2:#a284ff;--good:#34d399;--bad:#f87171;--info:#38bdf8;--on-accent:#ffffff;
  --line:color-mix(in srgb,var(--text) 11%,transparent);--line2:color-mix(in srgb,var(--text) 18%,transparent);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}
html[data-theme="dark"] .head::before{background:color-mix(in srgb,var(--bg) 88%,transparent)}
html[data-theme="dark"] .input,html[data-theme="dark"] select.input,html[data-theme="dark"] textarea.input{background:var(--surface2);color:var(--text)}
html[data-theme="dark"] .btn.ghost{background:var(--surface2);color:var(--text)}
html[data-theme="dark"] .f-me-cover,html[data-theme="dark"] .mp-cover,html[data-theme="dark"] .pcard-cover,html[data-theme="dark"] .pf-cover{background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.08),transparent 45%),linear-gradient(120deg,#1e3a8a 0%,#4c1d95 55%,#0c4a6e 100%)}
html[data-theme="dark"] .pcard.private .pcard-cover{background:linear-gradient(120deg,#1e293b,#334155)}
html[data-theme="dark"] .wl-cert{background:linear-gradient(170deg,color-mix(in srgb,var(--ic) 22%,var(--surface)),var(--surface) 62%);box-shadow:0 8px 18px -14px var(--ic)}
html[data-theme="dark"] .wl-cert .wl-issuer{color:color-mix(in srgb,var(--ic) 60%,#fff)}
html[data-theme="dark"] .menu{box-shadow:0 20px 50px -20px #000}
html[data-theme="dark"] .menu .menu-signout{color:#fca5a5}
html[data-theme="dark"] .rh-seg button[aria-checked="true"]{background:var(--raise);box-shadow:0 1px 3px rgba(0,0,0,.5)}
html[data-theme="dark"] .co-stripe,html[data-theme="dark"] .co-paypal{background:#fff}
html[data-theme="dark"] img.js-logo,html[data-theme="dark"] .emp-logo{background:#fff}
.rh-lang select{width:auto!important;min-width:0;margin:0;box-shadow:none!important}

/* Dark mode for billing, ads and posts styles (those files use light tints) */
html[data-theme="dark"] .ptile,html[data-theme="dark"] .ptile.hot{color:var(--text)}
html[data-theme="dark"] .ptile.hot{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface) 62%) padding-box,linear-gradient(135deg,var(--accent),var(--accent2)) border-box}
html[data-theme="dark"] .intro-banner{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),color-mix(in srgb,var(--accent2) 12%,var(--surface)))}
html[data-theme="dark"] :is(.bl-flash,.bl-status,.bl-note,.bl-st).ok,
html[data-theme="dark"] :is(.bl-status.active,.bl-note.good,.bl-st.paid){color:#6ee7b7;background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35)}
html[data-theme="dark"] :is(.bl-flash.bad,.bl-note.bad,.bl-status.past_due,.bl-status.incomplete,.bl-st.due,.bl-st.failed){color:#fca5a5;background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}
html[data-theme="dark"] :is(.bl-flash.info,.bl-status.trial){color:#93c5fd;background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35)}
html[data-theme="dark"] :is(.bl-status.canceling,.bl-note.warn,.bl-st.refunded,.bl-st.partly){color:#fcd34d;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}
html[data-theme="dark"] :is(.bl-status.prepaid,.bl-status.comp){color:#c4b5fd;background:rgba(139,92,246,.14);border-color:rgba(139,92,246,.35)}
html[data-theme="dark"] :is(.bl-status.free,.bl-status.admin,.bl-status.off,.bl-st){color:var(--muted);background:color-mix(in srgb,var(--text) 8%,transparent);border-color:var(--line2)}
html[data-theme="dark"] .bl-cancel-btn{background:transparent;color:#fca5a5;box-shadow:inset 0 0 0 1.5px rgba(239,68,68,.5)}
html[data-theme="dark"] .bl-cancel-btn:hover{background:rgba(239,68,68,.14)}
html[data-theme="dark"] .bl-card-row.def,html[data-theme="dark"] .cx-reasons label:has(input:checked){background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
html[data-theme="dark"] .bl-upsell,html[data-theme="dark"] .cx-offer{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface)) padding-box,linear-gradient(135deg,var(--accent),var(--accent2)) border-box}
html[data-theme="dark"] .cx-done .fi.ok{background:rgba(16,185,129,.14);color:#6ee7b7}html[data-theme="dark"] .cx-done .fi.end{background:rgba(245,158,11,.14);color:#fcd34d}
html[data-theme="dark"] :is(.pol-box,.pol-card,.pol-rec) .chip.amber{background:rgba(245,158,11,.16);color:#fcd34d}
.i18n-bar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden;width:160px;margin-bottom:3px}.i18n-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.l-nav a{white-space:nowrap}@media (max-width:1280px){html:not([lang="en"]) .l-nav a{font-size:.86rem}}

/* ---------- Title badges (CEO, Recruiter…) and the Verified employer badge ---------- */
.tbadge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px 2px 6px;border-radius:999px;font:700 .66rem/1.5 var(--font);letter-spacing:.02em;white-space:nowrap;vertical-align:middle;color:#fff;
  background:linear-gradient(135deg,var(--tb1),var(--tb2));box-shadow:0 2px 8px -3px var(--tb2),inset 0 0 0 1px rgba(255,255,255,.18)}
.tbadge .ico{width:11px;height:11px;stroke-width:2.4;flex:none}
.tbadge.t-exec{--tb1:#f59e0b;--tb2:#b45309}
.tbadge.t-hire{--tb1:#10b981;--tb2:#047857}
.tbadge.t-lead{--tb1:#6366f1;--tb2:#4338ca}
.tbadge.t-pro{--tb1:#0ea5e9;--tb2:#0369a1}
.tbadge.t-learn{--tb1:#a78bfa;--tb2:#7c3aed}
/* self-reported titles are quieter than verified ones */
.tbadge:not(.ok){background:color-mix(in srgb,var(--tb2) 12%,var(--surface));color:color-mix(in srgb,var(--tb2) 85%,var(--text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tb2) 35%,transparent)}
.tbadge .tb-ck{display:inline-grid;place-items:center;width:13px;height:13px;margin-left:1px;border-radius:50%;background:#fff;color:var(--tb2);font-size:.6rem;font-weight:900;line-height:1}
.tbadge.big{margin:0;padding:5px 12px 5px 9px;font-size:.8rem;gap:6px}
.tbadge.big .ico{width:15px;height:15px}
.tbadge.big .tb-co{padding-left:7px;margin-left:2px;border-left:1px solid rgba(255,255,255,.45);font-weight:600}
.tbadge.big .tb-ck{width:16px;height:16px;font-size:.7rem}
.tbadge.ok.big{animation:tbGlow 3.2s ease-in-out infinite}
@keyframes tbGlow{0%,100%{box-shadow:0 4px 14px -6px var(--tb2),inset 0 0 0 1px rgba(255,255,255,.2)}50%{box-shadow:0 4px 20px -4px var(--tb1),inset 0 0 0 1px rgba(255,255,255,.3)}}
@media (prefers-reduced-motion:reduce){.tbadge.ok.big{animation:none}}
.mp-title{margin:6px 0 4px;min-height:0}
.pf-title select{max-width:240px}
.tb-prev{display:inline-flex}
/* Verified employer: an eye-catching green badge wherever it shows with text */
.vbadge.b-emp .ico{fill:color-mix(in srgb,var(--good) 20%,transparent)}
h1 .vbadge.b-emp,.chip.vemp{color:#fff!important;background:linear-gradient(135deg,#10b981,#047857)!important;box-shadow:0 3px 12px -5px #047857;border-color:transparent!important;font-weight:700}
h1 .vbadge.b-emp .ico,.chip.vemp .ico{color:#fff;fill:rgba(255,255,255,.2)}
html[data-theme="dark"] .tbadge:not(.ok){background:color-mix(in srgb,var(--tb1) 16%,var(--surface));color:color-mix(in srgb,var(--tb1) 80%,#fff)}
/* default profile picture for members without a photo */
html[data-theme="dark"] .nav-av.no-photo img,html[data-theme="dark"] .pfp.no-photo img{filter:brightness(.82) saturate(1.1)}
/* count badges on admin tabs and the Me button */
.tab-count{margin-left:6px;min-width:18px;height:18px;padding:0 5px;background:#e5484d!important;color:#fff!important;font-size:.66rem;box-shadow:0 0 0 2px var(--surface)}
.me-btn .me-av{position:relative;overflow:visible}
.me-btn .me-av img{border-radius:50%}
.me-count{position:absolute;top:-6px;right:-10px;min-width:16px;height:16px;padding:0 4px;font-size:.6rem;background:#e5484d!important;color:#fff!important;box-shadow:0 0 0 2px var(--bg)}
.menu .admin-count{background:#e5484d;color:#fff}
.sec-alerts{display:grid;gap:6px;margin-top:10px}
.sec-al{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--surface)}
.sec-al summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.sec-al summary::-webkit-details-marker{display:none}
.sec-al summary b{flex:1;font-size:.9rem;font-weight:600}
.sec-al .sev{width:9px;height:9px;border-radius:50%;flex:none;background:var(--info)}
.sec-al.mid .sev{background:#f59e0b}.sec-al.hi .sev{background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.18)}
/* reports in Moderation */
.rep-card.clickable{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.rep-card.clickable:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 6px 18px -12px var(--accent)}
.rep-reply{display:flex;gap:10px;margin-top:10px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.rep-reply .ico{color:var(--accent);margin-top:3px}.rep-reply p{margin:2px 0 0;white-space:pre-wrap;font-size:.9rem}

/* homepage: link for employers and recruiters under the hero buttons */
.hero-hire{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:.92rem;color:var(--muted)}
.hero-hire .ico{width:16px;height:16px;color:var(--good)}
.hero-hire a{font-weight:600}

/* ---------- Admin: grouped sidebar menu ---------- */
.adm-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:22px;align-items:start}
.adm-side{position:sticky;top:72px;max-height:calc(100vh - 88px);overflow:auto;scrollbar-width:thin;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow)}
.adm-nav{display:grid;gap:1px}
.adm-grp{padding:12px 10px 4px;font:600 .64rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.adm-grp:first-child{padding-top:4px}
.adm-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:none;color:var(--muted);font:500 .9rem var(--font);text-align:left;cursor:pointer;position:relative}
.adm-nav button .ico{width:17px;height:17px;flex:none;opacity:.85}
.adm-nav button span:not(.badge){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-nav button:hover{background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text)}
.adm-nav button.on{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);font-weight:600}
.adm-nav button.on::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.adm-nav button.on .ico{opacity:1}
.adm-nav .tab-count{margin-left:auto}
.adm-pick{display:none}
.adm-content{min-width:0}
.adm-content>.stack>h2:first-child,.adm-content>div>h2:first-child{margin-top:0}
@media (max-width:900px){
  .adm-layout{grid-template-columns:1fr;gap:12px}
  .adm-side{position:static;max-height:none;padding:0;border:0;box-shadow:none;background:none}
  .adm-nav{display:none}
  .adm-pick{display:block;font-weight:600}
}
/* admin sidebar: no inner scroll bar; it scrolls with the page and is a little tighter */
.adm-side{position:static;max-height:none;overflow:visible}
.adm-nav button{padding:7px 10px;font-size:.88rem}
.adm-grp{padding:10px 10px 3px}
.hl-errs pre{max-height:none;overflow:visible}

/* No visible scroll bars in the admin panel: tab bars wrap onto a second line instead of scrolling,
   and wide tables on phones can still be swiped sideways but without a bar */
.adm-content .seg,.adm-content .af-tabs,.adm-content .ba-tabs,.adm-content .md-top{flex-wrap:wrap;overflow:visible}
.adm-content *{scrollbar-width:none}
.adm-content *::-webkit-scrollbar{display:none}
.adm-content .af-filter{flex-wrap:wrap;overflow:visible}
.rep-review .rep-what{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.rep-review .rep-content{margin-top:8px;white-space:pre-wrap;font-size:.95rem}
.rep-review .staff-panel{margin:0}
@media (min-width:901px){.adm-side{position:sticky;align-self:start}}
/* "ReconHire was just updated" bar */
.rh-update{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:12px;background:var(--text);color:var(--surface);box-shadow:0 12px 30px -10px rgba(0,0,0,.45);font-size:.9rem}
.rh-update button{border:0;border-radius:8px;padding:7px 12px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
.rh-update button.x{background:transparent;color:inherit;opacity:.7;padding:4px 8px;font-size:1.1rem}
@media (max-width:640px){.rh-update{bottom:76px;width:calc(100% - 24px)}}

/* More menu: compact, two columns on wider screens */
.more-menu{min-width:0;width:min(470px,calc(100vw - 24px));padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;max-height:calc(100vh - 90px);overflow:auto;scrollbar-width:none}
.more-menu::-webkit-scrollbar{display:none}
.more-menu .mm-sec{display:grid;align-content:start;gap:1px;padding:2px 0}
.more-menu .grp{padding:8px 10px 3px;font-size:.6rem}
.more-menu a{padding:6px 10px;gap:9px;font-size:.84rem;border-radius:8px}
.more-menu a .ico{width:16px;height:16px;flex:none;color:var(--muted)}
.more-menu a:hover .ico{color:var(--accent)}
@media (max-width:640px){.more-menu{grid-template-columns:1fr 1fr;width:calc(100vw - 16px)}}
@media (max-width:380px){.more-menu{grid-template-columns:1fr}}
.bottom-bar .more-menu a,.more-menu a{flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;text-align:left!important;height:auto!important;min-width:0!important}.bottom-bar .more-menu .badge{position:static!important;margin-left:auto}

/* ---------- Modern dropdowns (select-ui.js) ---------- */
select.fx-hidden{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important}
.fx-sel{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:42px;padding:9px 38px 9px 13px;border:1px solid var(--line2);border-radius:11px;background:var(--surface);color:var(--text);font:400 .95rem/1.3 var(--font);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.fx-sel.sm{min-height:34px;padding:6px 32px 6px 11px;font-size:.86rem;border-radius:9px}
.fx-sel:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2))}
.fx-sel:focus-visible,.fx-sel.on{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.fx-sel:disabled{opacity:.55;cursor:not-allowed}
.fx-sel.placeholder .fx-txt{color:var(--dim)}
.fx-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-chev{position:absolute;right:13px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s,margin .18s}
.fx-sel.on .fx-chev{transform:rotate(225deg);margin-top:-2px;border-color:var(--accent)}
.fx-pop{position:fixed;z-index:400;display:flex;flex-direction:column;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line2);box-shadow:0 18px 48px -14px rgba(15,23,42,.35),0 2px 6px rgba(15,23,42,.08);animation:fxIn .14s ease-out;outline:none}
.fx-pop.up{animation-name:fxUp}
@keyframes fxIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes fxUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fx-search{margin:0 0 6px;padding:8px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--surface2);color:var(--text);font:400 .88rem var(--font);outline:none}
.fx-search:focus{border-color:var(--accent);background:var(--surface)}
.fx-list{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 18%,transparent) transparent}
.fx-list::-webkit-scrollbar{width:6px}.fx-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 18%,transparent);border-radius:3px}
.fx-grp{padding:10px 10px 4px;font:600 .64rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.fx-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:.9rem;color:var(--text);cursor:pointer;line-height:1.35}
.fx-opt span:first-child{flex:1;min-width:0}
.fx-opt.act{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.fx-opt.sel{color:var(--accent);font-weight:600}
.fx-opt.off{opacity:.45;cursor:default}
.fx-ck{width:6px;height:11px;margin-right:4px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);flex:none}
.fx-none{padding:12px;text-align:center;color:var(--dim);font-size:.88rem}
html[data-theme="dark"] .fx-pop{box-shadow:0 18px 48px -14px rgba(0,0,0,.7)}
/* pop-up menus inside cards (Add section, post ⋯ menus) are never cut off by the card edge */
.pf-hero,.mp-head{overflow:visible}
.pf-hero>.pf-cover,.mp-head>.mp-cover{border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.card:has(.pop>.menu),.card:has(.menu){overflow:visible!important;z-index:30;position:relative}
.pop>.menu{z-index:60}
.pf-hero .menu{min-width:280px}

/* admin: light/dark switch in the Control room header */
.page-head:has(.adm-head-tools){display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.adm-head-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-head-tools:empty{display:none}
/* dark mode: red buttons, warning chips and notes stay readable */
html[data-theme="dark"] .btn.danger:not(.solid),html[data-theme="dark"] .btn.sm.danger{color:#fca5a5;border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.10)}
html[data-theme="dark"] .btn.danger:not(.solid):hover{background:rgba(248,113,113,.18)}
html[data-theme="dark"] .chip.warn{color:#fca5a5;background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.35)}
html[data-theme="dark"] .ac-warn{color:#fcd34d}
html[data-theme="dark"] img.emp-adm-logo{background:#e2e8f0}
html[data-theme="dark"] .scam-note.high b,html[data-theme="dark"] .scam-note.high .ico{color:#fca5a5}
html[data-theme="dark"] .scam-note.medium b,html[data-theme="dark"] .scam-note.medium .ico{color:#fcd34d}
/* Home: bigger profile photo on the "me" card */
.f-me-cover{height:76px}
.f-me-av{margin:-52px auto 10px}
.f-me-av .nav-av{box-shadow:0 0 0 4px var(--surface),0 8px 22px -10px rgba(15,23,42,.45)}
/* top bar: the photo next to Me, a little smaller */
.me-btn .me-av{width:28px;height:28px}
/* top banners: the arrow folds the banner into a slim strip with a small "open" tab */
.season-bar .se-fold{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:0;line-height:1}
.season-bar .se-fold svg{flex:none;transition:transform .25s ease}
.season-bar .se-fold-t{display:none}
.season-bar.folded{min-height:0!important;height:30px;padding:0 50px!important;transition:height .25s ease}
.season-bar.folded>*:not(.se-fold):not(.el-wave):not(.el-stars):not(.se-art){display:none!important}
.season-bar.folded .se-art{opacity:.35}
.season-bar.folded .se-fold{position:absolute;left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:auto;height:24px;padding:0 12px 0 8px;border-radius:999px;
  font:600 .76rem/1 var(--font);letter-spacing:.02em;color:inherit;background:color-mix(in srgb,var(--text) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 12%,transparent)}
.season-bar.folded .se-fold svg{transform:rotate(180deg);width:15px;height:15px}
.season-bar.folded .se-fold-t{display:inline;font-size:.76rem;white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis}
.season-bar.el-bar.folded{height:34px;padding:0 50px 6px!important}
.season-bar.el-bar.folded .se-fold{top:calc(50% - 3px);color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.season-bar.el-bar.folded .se-fold:hover{background:rgba(255,255,255,.24)}
@media (max-width:620px){.season-bar.el-bar.folded .se-fold{top:calc(50% - 3px);transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.season-bar.folded,.season-bar .se-fold svg{transition:none}}
/* folded tab: beat the election banner's fixed button size, and sit above the stripes */
.season-bar.folded .se-fold.se-x{width:auto;height:24px;padding:0 12px 0 8px}
.season-bar.el-bar.folded{height:44px}
.season-bar.el-bar.folded .se-fold.se-x{top:6px;transform:translateX(-50%);height:24px;width:auto;border-radius:999px}
.season-bar.el-bar.folded .el-wave{height:14px}
@media (max-width:620px){.season-bar.el-bar.folded .se-fold.se-x{top:6px;transform:translateX(-50%)}}
.season-bar.folded .se-fold.se-x,.season-bar.el-bar.folded .se-fold.se-x{left:50%;right:auto}
/* dark mode, closer to black: near-black page, charcoal cards, a faint cool tint so it doesn't feel flat */
html[data-theme="dark"]{
  --bg:#06080c;--surface:#0e1117;--surface2:#151a22;--raise:#1b212b;
  --text:#e8ecf3;--muted:#a3adbd;--dim:#7c8696;
  --line:color-mix(in srgb,var(--text) 10%,transparent);--line2:color-mix(in srgb,var(--text) 16%,transparent);
  --shadow:0 1px 2px rgba(0,0,0,.6),0 12px 30px -14px rgba(0,0,0,.85);
}
html[data-theme="dark"] body{background-color:var(--bg)}
/* top alert strips (weather): the arrow folds the strip into a slim bar with a small "open" tab */
.tick .tick-fold{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:4px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:inherit;cursor:pointer}
.tick .tick-fold:hover{background:rgba(255,255,255,.22)}
.tick .tick-fold-ic{width:9px;height:9px;border-left:2.4px solid currentColor;border-top:2.4px solid currentColor;transform:translateY(2px) rotate(45deg);transition:transform .25s ease}
.tick .tick-fold-t{display:none}
.tick.tick-folded{min-height:0;padding-top:0;padding-bottom:0;height:30px;justify-content:center}
.tick.tick-folded>*:not(.tick-fold){display:none!important}
.tick.tick-folded .tick-fold{width:auto;height:22px;padding:0 12px 0 10px;gap:8px;border-radius:999px;margin:0 auto;font:600 .76rem/1 var(--font)}
.tick.tick-folded .tick-fold-ic{transform:translateY(-2px) rotate(225deg)}
.tick.tick-folded .tick-fold-t{display:inline;white-space:nowrap;max-width:70vw;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.tick .tick-fold-ic{transition:none}}
/* pinned top menu: nothing pokes out above it, so nothing gets clipped when it sticks to the top while scrolling */
.head{padding-top:8px}
html[data-el] .brand::after{top:-3px}
html[data-el-int="subtle"] .brand::after{top:-2px}
.head .brand::after{top:-3px}
/* Me menu, LinkedIn style: a profile card, two shortcut cards, a clean list, Sign out at the bottom */
.menu.me-menu{width:340px;max-width:calc(100vw - 20px);padding:12px;display:grid;gap:8px;border-radius:16px}
.me-menu a,.me-menu button{font-family:var(--font)}
.mm-profile,.mm-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;color:var(--text);text-decoration:none;background:var(--surface)}
.mm-profile:hover,.mm-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.mm-profile .nav-av{flex:none}
.mm-profile-t,.mm-card-t{flex:1;min-width:0;display:grid;gap:2px}
.mm-profile-t b{display:flex;align-items:center;gap:6px;font-size:1rem}
.mm-profile-t small{color:var(--muted);font-size:.8rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mm-card{padding:11px 14px}
.mm-card>.ico:first-child{width:18px;height:18px;color:var(--accent);flex:none}
.mm-card-t b{font-weight:600;font-size:.92rem}
.mm-card-t small{color:var(--dim);font-size:.76rem}
.mm-profile>.ico:last-child,.mm-card>.ico:last-child{width:16px;height:16px;flex:none;color:var(--dim)}
.mm-list{display:grid;gap:1px;padding:4px 0 0}
.me-menu .mm-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 8px;border:0;border-radius:10px;background:none;color:var(--text);font-size:.93rem;text-align:left;cursor:pointer;text-decoration:none}
.me-menu .mm-item:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.me-menu .mm-item>.ico{width:19px;height:19px;flex:none;color:var(--muted)}
.me-menu .mm-item>span:not(.badge):not(.mm-prem-ic){flex:1;min-width:0}
.me-menu .mm-item>.ico:last-child:not(:first-child){width:15px;height:15px;transition:transform .2s}
.me-menu .mm-item.open>.ico:last-child{transform:rotate(90deg)}
.mm-prem-ic{width:16px;height:16px;flex:none;margin:0 1px;border-radius:3px;background:linear-gradient(135deg,#f5b544 50%,#d98a14 50%)}
.mm-lang{padding:4px 8px 8px}
.mm-lang[hidden]{display:none}
.mm-lang .rh-prefs{flex-direction:column;align-items:stretch;gap:8px}
.mm-lang .rh-seg{display:flex}.mm-lang .rh-seg button{flex:1;justify-content:center}
.mm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 4px 2px;border-top:1px solid var(--line)}
.me-menu .mm-signout{width:auto;margin:0;padding:6px 8px;border:0;background:none;color:var(--text);font-weight:600;font-size:.95rem;border-radius:8px;cursor:pointer;justify-content:flex-start}
.me-menu .mm-signout:hover{background:color-mix(in srgb,var(--bad) 9%,transparent);color:var(--bad)}
.mm-ver{color:var(--dim);font-size:.76rem;text-decoration:none}
.menu.me-menu a.mm-profile,.menu.me-menu a.mm-card{border:1px solid var(--line2);border-radius:14px;padding:12px 14px;margin:0}
.menu.me-menu a.mm-card{padding:10px 14px}
.menu.me-menu{max-height:calc(100vh - var(--head-h,64px) - 24px);overflow-y:auto;scrollbar-width:none}
.menu.me-menu::-webkit-scrollbar{display:none}
.me-menu .mm-item>.ico:last-child:not(:first-child){transform:none}
.me-menu .mm-item.open>.ico:last-child:not(:first-child){transform:rotate(90deg)}
.menu.me-menu .mm-foot .mm-signout{width:auto;flex:none;white-space:nowrap;display:inline-flex}
/* For Business mega menu and Advertise, right side of the top bar */
.biz-sep{width:1px;align-self:center;height:34px;margin:0 6px;background:var(--line2)}
.biz-pop{position:relative}
.biz-btn,.biz-adv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 10px;height:56px;border:0;background:none;color:var(--muted);font:500 .74rem var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.biz-btn .nav-ic .ico,.biz-adv .nav-ic .ico{width:22px;height:22px}
.biz-btn:hover,.biz-adv:hover,.biz-btn.on,.biz-adv.on{color:var(--text)}
.biz-btn .nav-lbl{display:inline-flex;align-items:center;gap:2px}.biz-btn .nav-lbl .ico{width:12px;height:12px}
.menu.biz-menu{position:absolute;right:-70px;top:calc(100% + 6px);left:auto;width:760px;max-width:calc(100vw - 24px);display:grid;grid-template-columns:1fr 1.15fr;padding:0;border-radius:16px;overflow:hidden;max-height:calc(100vh - var(--head-h,64px) - 20px);overflow-y:auto;scrollbar-width:none}
.biz-col{display:grid;align-content:start;gap:2px;padding:24px 26px}
.biz-col h3{margin:0 0 12px;font-size:1.2rem}
.biz-explore{border-left:1px solid var(--line);background:color-mix(in srgb,var(--text) 2%,var(--surface))}
.menu.biz-menu a.biz-app{display:flex;align-items:center;gap:14px;padding:8px 8px;border-radius:10px;color:var(--text);font-weight:500;font-size:.95rem;text-decoration:none;margin:0}
.biz-app-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;color:#fff}
.biz-app-ic .ico{width:19px;height:19px}
.biz-app-ic.c1{background:linear-gradient(135deg,#3b82f6,#2563eb)}.biz-app-ic.c2{background:linear-gradient(135deg,#6366f1,#4338ca)}.biz-app-ic.c3{background:linear-gradient(135deg,#0ea5e9,#0369a1)}
.biz-app-ic.c4{background:linear-gradient(135deg,#14b8a6,#0f766e)}.biz-app-ic.c5{background:linear-gradient(135deg,#f59e0b,#d97706)}.biz-app-ic.c6{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.biz-app-ic.c7{background:linear-gradient(135deg,#ec4899,#be185d)}
.biz-grp{margin:12px 0 2px;color:var(--dim);font-size:.82rem;font-weight:600}
.menu.biz-menu a.biz-exp{display:grid;gap:2px;padding:10px 8px;border-radius:10px;color:var(--text);text-decoration:none;margin:0}
.biz-exp b{font-weight:600;font-size:.98rem}.biz-exp small{color:var(--muted);font-size:.84rem}
.menu.biz-menu a.biz-app:hover,.menu.biz-menu a.biz-exp:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.menu.biz-menu a.biz-create{display:inline-flex;align-items:center;gap:6px;margin:16px 8px 0;padding:0;color:var(--muted);font-weight:600;text-decoration:none}
.biz-create .ico{width:16px;height:16px}
.biz-create:hover{color:var(--accent)}
@media (max-width:1180px){.biz-sep,.tabs>.pop.biz-pop,.biz-pop,.biz-adv{display:none!important}}
/* ReconHire flavor for the Me and For Business menus */
.biz-k{font:600 .68rem var(--mono,ui-monospace,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.biz-col h3{font-family:var(--hfont);margin-top:2px}
.menu.biz-menu{border:1px solid var(--line2);box-shadow:0 30px 60px -28px rgba(15,23,42,.45),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent)}
.menu.biz-menu::before{content:"";grid-column:1 / -1;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.biz-explore{background-image:linear-gradient(color-mix(in srgb,var(--text) 3%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 3%,transparent) 1px,transparent 1px);background-size:22px 22px}
.menu.biz-menu a.biz-exp b{font-family:var(--hfont)}
.menu.biz-menu a.biz-exp:hover b{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.menu.me-menu{border:1px solid var(--line2)}
.menu.me-menu::before{content:"";display:block;height:3px;margin:-12px -12px 4px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.menu.me-menu a.mm-profile{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),color-mix(in srgb,var(--accent2) 8%,var(--surface)))}
.mm-profile-t b{font-family:var(--hfont)}
.mm-card>.ico:first-child{padding:6px;box-sizing:content-box;border-radius:9px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px -8px var(--accent)}
.me-menu .mm-item:hover>.ico{color:var(--accent)}
/* modern dropdowns: no visible scroll bar (the list still scrolls with the wheel, touch or arrow keys) */
.fx-list,.fx-pop{scrollbar-width:none;-ms-overflow-style:none}
.fx-list::-webkit-scrollbar,.fx-pop::-webkit-scrollbar{display:none;width:0;height:0}

/* Turnstile help: shown when Cloudflare's bot check can't run in this browser */
.ts-help{margin:10px 0 4px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--warn,#d97706) 45%,transparent);background:color-mix(in srgb,var(--warn,#d97706) 9%,var(--surface));font-size:.86rem;line-height:1.45;text-align:left}
.ts-help b{display:block;margin-bottom:4px}
.ts-help p{margin:0 0 10px;color:var(--muted)}
.ts-help[hidden]{display:none}

/* Sidebars taller than the window scroll on their own (sticky-rails.js), with no visible scroll bar */
.rail-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.rail-scroll::-webkit-scrollbar{display:none;width:0;height:0}

/* Sounds (sounds.js): speaker button, snooze menu, Notifications page card, Settings rows */
.snd-btn.snd-off{color:var(--warn,#d97706)}
.snd-menu{min-width:240px}
.snd-menu .snd-head{padding:8px 12px 6px;font-size:.78rem;color:var(--muted);border-bottom:1px dashed var(--line);margin-bottom:4px}
.snd-menu .snd-head b{font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.n-sound{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px}
.n-sound>span{display:grid;gap:2px;min-width:0}
.n-sound small{font-size:.8rem;line-height:1.35}
.snd-quiet{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mt-mute .ico{width:13px;height:13px;color:var(--dim)}

/* Me menu: Light / Dark / Auto right in the menu */
.me-menu .mm-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;flex-wrap:wrap}
.me-menu .mm-theme-l{display:inline-flex;align-items:center;gap:12px;font-size:.95rem;color:var(--text)}
.me-menu .mm-theme-l .ico{width:18px;height:18px;color:var(--muted)}
.me-menu .mm-theme .rh-prefs{margin:0}

/* sticky-rails.js: short windows. Level 1 hides the sidebar's links footer (the page footer shows instead);
   level 2 (menu sidebars) keeps only the menu card so it never moves */
.rail-fit1 .rail-foot{display:none!important}
body:has(.rail-fit1 .rail-foot) .foot-app{display:block!important}
.rail-fit2>:not(:first-child){display:none!important}
.rail-fitA>:not(:first-child):not(.rail-foot){display:none!important}
/* menu pages fill the window so their pinned menu has room to stay put */
@media (min-width:900px){.ng-grid,.jh-grid{min-height:calc(100vh - var(--head-h,70px) - 30px)}}
.rail-aside{display:none!important}

/* Home feed: both sidebars stay on screen on smaller windows instead of disappearing */
@media (max-width:1180px){.feed-grid{grid-template-columns:200px minmax(0,1fr) 250px;gap:14px}.f-right{display:grid}}
@media (max-width:1020px){.feed-grid{grid-template-columns:200px minmax(0,1fr)}.f-right{display:none}}
@media (min-width:721px) and (max-width:820px){.feed-grid{grid-template-columns:190px minmax(0,1fr)}.f-left{display:grid}}

/* ---------- cross-browser consistency ----------
   Firefox and newer Chrome/Edge hide scroll bars with scrollbar-width; Safari and older Chrome/Edge need the WebKit rule.
   Both are set for every list that scrolls without a visible bar, so it looks the same in every browser. */
.st-nav,.mt-list,.mx-none,.more-menu,.menu.biz-menu,.ng-mchips,.ng-pick,.fx-list,.fx-pop,.subnav,.tabs{-ms-overflow-style:none}
.st-nav::-webkit-scrollbar,.mt-list::-webkit-scrollbar,.mx-none::-webkit-scrollbar,.more-menu::-webkit-scrollbar,.menu.biz-menu::-webkit-scrollbar,.ng-mchips::-webkit-scrollbar,.ng-pick::-webkit-scrollbar{display:none;width:0;height:0}
/* grid and flex children may shrink below their content (Firefox and Safari otherwise let long text push dialogs sideways) */
.modal,.modal .stack,.modal .stack>*{min-width:0}
.modal{overflow-wrap:break-word}
/* older Safari: backdrop blur needs the prefixed property */
.modal-bg{-webkit-backdrop-filter:blur(4px)}

/* Presence (presence.js): a glowing green dot with a soft radar pulse on avatars of members online now */
.nav-av{position:relative}
.nav-av>.rh-online{position:absolute;right:4%;bottom:4%;width:max(10px,22%);height:max(10px,22%);max-width:22px;max-height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#86efac,#22c55e 55%,#15803d);border:2px solid var(--surface,#fff);z-index:3;pointer-events:none;
  box-shadow:0 0 0 0 rgba(34,197,94,.55),0 0 10px rgba(34,197,94,.75)}
.nav-av>.rh-online::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(34,197,94,.6);animation:rh-ping 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes rh-ping{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.1);opacity:0}}
.reduce-motion .nav-av>.rh-online::after{animation:none}
@media (prefers-reduced-motion:reduce){.nav-av>.rh-online::after{animation:none}}
html[data-theme="dark"] .nav-av>.rh-online{border-color:var(--surface,#0e1117)}
/* the "I voted" sticker sits bottom-right too: move the dot to the top-right when both show */
.nav-av:has(.av-voted)>.rh-online{bottom:auto;top:4%}
/* avatars clip to a circle; with a presence dot the photo clips itself so the dot can sit on the rim */
.nav-av.is-online{overflow:visible}
.nav-av.is-online>img{border-radius:50%}
.nav-av>.rh-online{right:2%;bottom:2%}
/* Jobs sidebar: the menu card is the one that must stay; on short windows the profile card steps aside instead */
.jh-left.rail-fitA>.card.jh-menu:not(.x),.jh-left.rail-fit2>.card.jh-menu:not(.x){display:grid!important}
/* v1.77.3: short windows shrink the profile card (no banner, no location) instead of removing it, so your job and school still show */
.jh-left.rail-fit2>.jh-me{display:block!important;padding:12px 14px}
.jh-left.rail-fit2>.jh-me .jh-cover,.jh-left.rail-fit2>.jh-me .jh-loc{display:none}
.jh-left.rail-fit2>.jh-me .jh-av{margin:0 0 6px}.jh-left.rail-fit2>.jh-me .jh-av .nav-av{width:44px!important;height:44px!important}
.jh-left.rail-fit2>.jh-me .jh-me-txt{padding:0}.jh-left.rail-fit2>.jh-me .jh-nm{font-size:1rem}
.jh-left.rail-fit2>.jh-me .jh-hl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.8rem}
.jh-left.rail-fit2>.jh-me .jh-orgs{margin-top:8px;padding-top:8px;gap:6px}
/* sidebars and their cards can't grow wider than their column (long text truncates instead of overlapping the feed) */
.feed-grid>*,.ng-grid>*,.jh-grid>*,.rail-grid>*{min-width:0}
.f-left>*,.f-right>*,.ng-left>*,.jh-left>*{max-width:100%;min-width:0}

/* Home feed and Notifications at medium widths: the right sidebar no longer disappears.
   901 to 1020px: three narrower columns. 721 to 900px: two columns, with the right sidebar's cards under the left one. */
@media (min-width:901px) and (max-width:1020px){
  .feed-grid,.rh-feed.feed-grid{grid-template-columns:180px minmax(0,1fr) 220px!important;gap:12px}
  .feed-grid>.f-right{display:grid!important}
}
@media (min-width:721px) and (max-width:900px){
  .feed-grid,.rh-feed.feed-grid{grid-template-columns:200px minmax(0,1fr)!important;grid-template-areas:"left mid" "right mid";grid-template-rows:auto 1fr}
  .feed-grid>.f-left{grid-area:left;display:grid!important}
  .feed-grid>.f-right{grid-area:right;display:grid!important;align-content:start;gap:12px;position:static!important}
  .feed-grid>:not(.f-left):not(.f-right){grid-area:mid}
}
/* side card headers: title and "See all" stay on one line; See all sits at the right, the title truncates if needed */
.f-side>.spread{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:10px}
.f-side>.spread>b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-side>.spread>a{flex:none;margin:0;padding:0;white-space:nowrap}
/* v1.52.1 phones: one column for every three-column page (the 1020px tablet rule no longer leaks down to phones) */
@media (max-width:720px){
  .feed-grid,.rh-feed.feed-grid{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important;grid-template-rows:none!important}
  .feed-grid>.f-left,.feed-grid>.f-right{display:none!important}
  .feed-grid>.f-mid{grid-area:auto!important}
}
/* Sign out in the More menu and in the page footer */
.more-menu .mm-out{border-top:1px solid var(--line2);padding-top:6px;margin-top:4px}
.more-menu .mm-out .menu-signout{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--text);font:600 .93rem var(--font);cursor:pointer;text-align:left}
.more-menu .mm-out .menu-signout .ico{width:18px;height:18px;color:var(--muted)}
.more-menu .mm-out .menu-signout:hover{background:color-mix(in srgb,var(--bad) 9%,transparent);color:var(--bad)}
.rail-foot .rf-signout{font-weight:600}
.rail-foot .rf-signout:hover{color:var(--bad)}
.menu{-webkit-overflow-scrolling:touch}
/* no stray scrolling on short pages: the season banner's top margin no longer leaks out of <body>, and framed
   Network/Jobs pages are only as tall as their content (the old fixed min-height ignored the banner and added ~100px) */
body{display:flow-root}
@media (min-width:900px){.ng-grid,.jh-grid{min-height:0}}
/* pages opened from the Jobs menu don't also show the Community tab row */
.jh-framed>.cm-subnav{display:none}
/* phones: the Jobs menu becomes one swipeable row of chips (like My Network), so the page content starts right away */
@media (max-width:720px){
  .jh-left>.jh-me,.jh-left>.ad-card,.jh-left>.ad-left,.jh-left>.rail-foot,.jh-left>.card:not(.jh-menu){display:none!important}
  .jh-left>.card.jh-menu{display:flex!important;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 1px!important;margin:0 -2px;border:0!important;background:none!important;box-shadow:none!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .jh-left>.card.jh-menu::-webkit-scrollbar{display:none}
  .jh-left>.card.jh-menu::before,.jh-left>.card.jh-menu::after{display:none!important}
  .jh-menu .jh-mi-sep,.jh-menu>:not(.jh-mi){display:none!important}
  .jh-menu .jh-mi{flex:none;gap:6px;padding:7px 12px!important;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font-size:.84rem!important;font-weight:500;white-space:nowrap;scroll-snap-align:start;box-shadow:none!important}
  .jh-menu .jh-mi .ico{width:16px!important;height:16px!important;color:var(--accent)}
  .jh-menu .jh-mi span:not(.badge){flex:none}
  .jh-menu .jh-mi.on{border-color:transparent;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2))}
  .jh-menu .jh-mi.on .ico{color:inherit}
  .jh-menu .jh-mi .badge{font-size:.7rem;min-width:18px;height:18px;padding:0 5px}
  .subnav a.on,.rh-tool .subnav a.on{box-shadow:none}
}
/* v1.52.1 rescan fixes: matching buttons and chips */
html[data-theme="light"] .vote-where-chip{color:#0f766e;background:color-mix(in srgb,#2a9d8f 12%,#fff);border-color:color-mix(in srgb,#2a9d8f 40%,transparent)}
.pf-acts .btn.sm:first-child{padding:5px 14px}
.pf-acts .btn.sm,.pf-acts .pop>.btn,.pf-acts>.btn{min-height:32px;border-radius:999px}
.pf-acts .btn.ghost,.mp-share.btn.ghost{border:1px solid var(--line2)}
.tick-acts .btn,.tick-acts .el-btn-main{border-radius:999px}
p.pf-conn,p.pf-conn span,p.pf-conn span.dim{font-family:var(--font)!important;letter-spacing:normal!important}p.pf-conn span.dim{font-size:.88rem!important}
p.pf-conn a{font-family:var(--font)!important;font-weight:700}
.hb-adm-top>.chip{padding:3px 8px;line-height:1.2}
/* v1.52.2 Business menu: compact, two tools per row, fits the window without scrolling */
.menu.biz-menu{width:820px;max-height:none}
.menu.biz-menu .biz-col{padding:16px 18px;gap:1px}
.menu.biz-menu .biz-col:not(.biz-explore){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px}
.menu.biz-menu .biz-col:not(.biz-explore)>.biz-k,.menu.biz-menu .biz-col:not(.biz-explore)>h3,.menu.biz-menu .biz-col:not(.biz-explore)>.biz-grp{grid-column:1 / -1}
.menu.biz-menu .biz-col h3{margin:0 0 6px;font-size:1.05rem}
.menu.biz-menu .biz-grp{margin:8px 0 1px;font-size:.74rem;letter-spacing:.02em}
.menu.biz-menu a.biz-app{gap:10px;padding:5px 6px;font-size:.86rem;line-height:1.25}
.menu.biz-menu a.biz-app>span:last-child{min-width:0}
.menu.biz-menu .biz-app-ic{width:30px!important;height:30px!important;border-radius:9px}
.menu.biz-menu .biz-app-ic .ico{width:16px!important;height:16px!important}
.menu.biz-menu a.biz-exp{padding:6px 8px;gap:0}
.menu.biz-menu .biz-exp b{font-size:.9rem}.menu.biz-menu .biz-exp small{font-size:.78rem;line-height:1.35}
.menu.biz-menu a.biz-create{margin:8px 8px 0}
/* v1.52.2 wider pages on PC: the page uses more of the screen and the sidebars get a little more room (phones/tablets unchanged) */
@media (min-width:1300px){
  html body .feed-grid,html body .rh-feed.feed-grid{grid-template-columns:225px minmax(0,1fr) 300px;gap:20px}
  html body .ng-grid{grid-template-columns:290px minmax(0,1fr);gap:22px}
  html body .jh-grid{grid-template-columns:300px minmax(0,1fr);max-width:none}
  html body .st-wrap,html body .rh-tool .st-wrap{max-width:1320px;grid-template-columns:280px minmax(0,1fr)}
  html body .pb-art-grid{max-width:1240px;grid-template-columns:minmax(0,1fr) 300px}
}
/* v1.90.3 page width follows LinkedIn (about 1128px of content): --maxw is 1184px everywhere, wide screens no longer stretch the page */
/* Admin → Operations → Updates (automatic updates) */
.au-head{position:relative;overflow:hidden}
.au-head::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.au-head.off::before{background:linear-gradient(90deg,var(--warn,#f59e0b),color-mix(in srgb,var(--warn,#f59e0b) 40%,transparent))}
.au-head-top{display:flex;gap:14px;align-items:flex-start}
.au-head-top h3{margin:2px 0 4px}.au-head-top p{margin:0}
.au-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.au-head.off .au-ic{background:linear-gradient(135deg,#f59e0b,#d97706)}
.au-ic .ico{width:22px;height:22px}
.au-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.au-stats>div{padding:10px 12px;border-radius:12px;border:1px solid var(--line2);background:color-mix(in srgb,var(--text) 3%,transparent);min-width:0}
.au-stats small{display:block;color:var(--muted);font-size:.74rem}
.au-stats b{display:block;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-note{display:flex;gap:8px;align-items:center;margin:12px 0 0;color:var(--muted);font-size:.88rem}.au-note .ico{width:16px;height:16px;flex:none}
.au-how h3{margin:0 0 6px}
.au-cmd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.au-cmd:first-of-type{border-top:0}
.au-cmd code{font:600 .84rem var(--mono);padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text);user-select:all}
.au-cmd span{color:var(--muted);font-size:.88rem}
.au-list{display:grid;gap:2px}
.au-row{display:flex;align-items:flex-start;gap:12px;padding:10px 4px;border-top:1px solid var(--line)}
.au-row:first-child{border-top:0}
.au-dot{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:999px;background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted)}
.au-dot .ico{width:15px;height:15px}
.au-good .au-dot{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.au-warn .au-dot{background:color-mix(in srgb,var(--warn,#f59e0b) 18%,transparent);color:var(--warn,#d97706)}
.au-bad .au-dot{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.au-info .au-dot{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.au-row-t{flex:1;min-width:0;display:grid;gap:2px}.au-row-t small{color:var(--muted);font-size:.84rem;overflow-wrap:anywhere}
.au-row time{flex:none;font-size:.8rem}
@media (max-width:720px){.au-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v1.53.1 job list + job details: two matching panels on computers (sized in core.js), each scrolls on its own */
.rh-tool .detail-col>.card.detail,.detail-col>.card.detail{overflow-y:auto;overflow-x:hidden}
@media (min-width:1061px){
  .split.split-panes{align-items:start}
  .split.split-panes>.list-col,.split.split-panes>.detail-col>.detail{max-height:none;overflow-y:auto;overscroll-behavior:auto;scrollbar-width:none}
  .split.split-panes>.list-col{position:sticky;top:calc(var(--head-h,64px) + 12px)}
  .split.split-panes>.detail-col>.detail{position:static}
  .split.split-panes>.list-col::-webkit-scrollbar,.split.split-panes>.detail-col>.detail::-webkit-scrollbar{display:none}
  .split.split-panes>.list-col{padding:2px 4px 2px 2px;margin:-2px -4px -2px -2px}
  .split.split-panes>.detail-col{position:sticky;top:calc(var(--head-h,64px) + 12px)}
  .detail.more-below::after{cursor:pointer}
}
/* v1.53.1 holiday and election banners: the same bold look, about 35% shorter, one row, melting into the top bar */
.season-bar:not(.folded){min-height:0!important;padding:8px 60px 16px!important;gap:14px;flex-wrap:nowrap}
.season-bar:not(.folded) .se-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.season-bar.el-bar:not(.folded) .el-bar-in{gap:14px;flex-wrap:nowrap!important}
.season-bar.el-bar:not(.folded) .el-bar-txt{display:grid;gap:0;min-width:0}
.season-bar.el-bar:not(.folded) .el-count{min-height:44px!important;min-width:56px;padding:2px 10px}
.season-bar.el-bar:not(.folded) .el-count b{font-size:1.6rem!important}
.season-bar.el-bar:not(.folded) .el-head{font-size:1.15rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.season-bar.el-bar:not(.folded) a.se-go,.season-bar.el-bar:not(.folded) .el-go{min-height:38px!important;padding:0 18px!important;flex:none;white-space:nowrap}
.season-bar.el-bar:not(.folded) .el-ballot{transform:scale(.85)}
.season-bar:not(.folded) .se-x,.season-bar:not(.folded) .se-fold{top:calc(50% - 4px)!important;transform:translateY(-50%)!important}
/* the blend: the menu bar's own background layer starts in the banner's colors and fades to the normal bar color,
   so the banner flows straight down into the menu with no seam (and the menu keeps a hint of the theme while scrolling) */
.season-bar ~ #app .head::before{background:linear-gradient(180deg,color-mix(in srgb,var(--season1,var(--accent)) 62%,transparent) 0%,color-mix(in srgb,var(--season2,var(--accent2)) 26%,transparent) 45%,transparent 100%),color-mix(in srgb,var(--bg) 88%,transparent)}
html:not([data-theme="dark"]) .season-bar ~ #app .head::before{background:linear-gradient(180deg,color-mix(in srgb,var(--season1,var(--accent)) 34%,transparent) 0%,color-mix(in srgb,var(--season2,var(--accent2)) 12%,transparent) 50%,transparent 100%),color-mix(in srgb,#fff 90%,transparent)}
.season-bar.el-bar ~ #app .head::before{background:linear-gradient(180deg,rgba(27,46,108,.98) 0%,rgba(20,40,100,.66) 38%,rgba(16,38,98,.18) 78%,transparent 100%),linear-gradient(100deg,rgba(179,19,43,.42) 0%,transparent 28%,transparent 72%,rgba(179,19,43,.42) 100%),color-mix(in srgb,var(--bg) 90%,transparent)}
html:not([data-theme="dark"]) .season-bar.el-bar ~ #app .head::before{background:linear-gradient(180deg,rgba(12,34,89,.42) 0%,rgba(12,34,89,.14) 45%,transparent 90%),linear-gradient(100deg,rgba(179,19,43,.16) 0%,transparent 26%,transparent 74%,rgba(179,19,43,.16) 100%),color-mix(in srgb,#fff 92%,transparent)}
.season-bar.folded ~ #app .head::before{background:linear-gradient(180deg,rgba(12,34,89,.5),transparent 70%),color-mix(in srgb,var(--bg) 90%,transparent)}
html:not([data-theme="dark"]) .season-bar.folded ~ #app .head::before{background:linear-gradient(180deg,rgba(12,34,89,.2),transparent 70%),color-mix(in srgb,#fff 92%,transparent)}
.season-bar ~ #app .head{background-image:none;border-bottom-color:transparent}
.season-bar.el-bar{box-shadow:none!important}
@media (max-width:900px){.season-bar.el-bar:not(.folded) .se-msg{display:none}}
@media (max-width:720px){
  .season-bar:not(.folded){padding:8px 50px 14px 12px!important;justify-content:flex-start!important}
  .season-bar.el-bar:not(.folded) .el-bar-in{flex-wrap:wrap!important;gap:8px 10px}
  .season-bar.el-bar:not(.folded) .el-bar-txt{flex:1 1 170px;min-width:170px}
  .season-bar.el-bar:not(.folded) .el-head{font-size:1rem!important;white-space:normal}
  .season-bar.el-bar:not(.folded) .el-count{min-height:40px!important}
  .season-bar.el-bar:not(.folded) .el-count b{font-size:1.35rem!important}
  .season-bar.el-bar:not(.folded) a.se-go,.season-bar.el-bar:not(.folded) .el-go{min-height:34px!important;width:auto!important;padding:0 16px!important;margin-left:auto}
  .season-bar.el-bar:not(.folded) .el-kick{display:none}
}
/* weather warnings and watches: a slim rounded strip right under the top menu, inside the page width */
#wx-strip.tick.wx-under{max-width:calc(var(--maxw) - 2 * clamp(16px,3vw,28px));margin:10px auto 0;width:calc(100% - 2 * clamp(16px,3vw,28px));height:36px;border-radius:12px;border-width:1px;padding:0 6px 0 12px;box-shadow:0 10px 24px -18px rgba(0,0,0,.6);position:relative;z-index:5}
#wx-strip.tick.wx-under.folded,#wx-strip.wx-under[data-folded="1"]{height:30px}
#wx-strip.wx-under .btn{min-height:26px;padding:0 12px;font-size:.78rem;border-radius:999px}
#wx-strip.wx-under + main,#wx-strip.wx-under ~ main{margin-top:0}
@media (max-width:720px){#wx-strip.tick.wx-under{margin-top:8px;height:34px;border-radius:10px}}
/* themed banner only: no dark seam. The bar's color layer also covers the bar's 3px top edge, and starts in the banner's last color */
.season-bar ~ #app .head::before{top:-3px}
.season-bar.el-bar ~ #app .head{border-top-color:transparent}
/* light mode: the dark banner melts into the light menu: its last 18px fade out over a bar that starts in the same navy */
html:not([data-theme="dark"]) .season-bar:not(.folded){-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),rgba(0,0,0,.35) 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),rgba(0,0,0,.35) 100%)}
html:not([data-theme="dark"]) .season-bar.el-bar ~ #app .head::before{background:linear-gradient(180deg,rgba(27,46,108,.55) 0%,rgba(27,46,108,.2) 22%,rgba(27,46,108,.06) 55%,transparent 85%),linear-gradient(100deg,rgba(179,19,43,.16) 0%,transparent 26%,transparent 74%,rgba(179,19,43,.16) 100%),color-mix(in srgb,#fff 92%,transparent)}
/* Search all jobs: the search bar and filters stay pinned under the menu on computers; the panels sit right under it */
@media (min-width:1061px){
  .js-top{position:sticky;top:calc(var(--head-h,64px) + 12px);z-index:22;transition:box-shadow .2s,padding .2s}
  .js-top.stuck{box-shadow:0 18px 34px -22px rgba(0,0,0,.65)}
  .split.split-panes>.list-col{top:var(--pane-top,calc(var(--head-h,64px) + 12px))}
}
@media (min-width:1061px){
  /* on the two-panel job pages the page ends with the panels, so scrolling stops once they reach the pinned search bar
     (the footer links stay in the left column) */
  body:has(.split.split-panes) #app>footer.foot,body:has(.split.split-panes) main>.page-ad,body:has(.split.split-panes) #app>.page-ad{display:none!important}
  body:has(.split.split-panes) main.page{padding-bottom:0!important}
  body:has(.split.split-panes) .jh-framed,body:has(.split.split-panes) .jh-grid{padding-bottom:0;margin-bottom:0}
}
/* Admin → Settings → Mobile apps */
.mo-head{display:flex;gap:14px;align-items:flex-start}
.mo-head h3{margin:2px 0 4px}.mo-head p{margin:0 0 10px}
.mo-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.mo-ic .ico{width:22px;height:22px}
.mo-chips{display:flex;flex-wrap:wrap;gap:6px}
.mo-chips .chip{display:inline-flex;align-items:center;gap:5px}.mo-chips .chip .ico{width:14px;height:14px}
.mo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mo-key{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.mo-key>div{flex:1 1 260px;display:grid;gap:2px;min-width:0}
@media (max-width:720px){.mo-grid{grid-template-columns:minmax(0,1fr)}}
/* inside the phone apps: no plan purchases (store rules), no "install the app" or web-push hints */
.in-app-nopay a[data-go^="pricing"],.in-app-nopay a[href*="#/pricing"],.in-app-nopay a[data-go^="checkout"],.in-app-nopay .mm-prem,.in-app-nopay .pr-upgrade,.in-app-nopay [data-buy]{display:none!important}
.in-app .pwa-install,.in-app .install-app{display:none!important}
.in-app body{-webkit-user-select:none;user-select:none}
.in-app input,.in-app textarea,.in-app [contenteditable],.in-app .n-text,.in-app .post-body,.in-app p{-webkit-user-select:text;user-select:text}
.in-app{-webkit-tap-highlight-color:transparent}
.in-app .head{padding-top:max(8px,env(safe-area-inset-top))}
.in-app .bottom-bar{padding-bottom:env(safe-area-inset-bottom)}
.mo-code{font:600 .8rem var(--mono);padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--accent) 10%,transparent);overflow-wrap:anywhere;user-select:all}
.mo-prices td{vertical-align:middle;white-space:nowrap}.mo-prices td .btn{margin-left:6px}
/* phone apps: Face ID lock screen, in-app purchase card and plan list */
.app-lock{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 20%,#1d2b5c 0%,#0e1530 45%,#070a16 100%);color:#e8edf8}
.app-lock-in{display:grid;justify-items:center;gap:16px;text-align:center}
.app-lock-in .logo{width:84px;height:84px;color:#e8edf8;filter:drop-shadow(0 0 14px rgba(91,140,255,.55))}
.app-lock-in b{font:700 1.2rem var(--hfont)}
.iap-card{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line2));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),color-mix(in srgb,var(--accent2) 9%,var(--surface)));display:grid;gap:12px;margin-bottom:14px}
.iap-card-t{display:flex;gap:12px;align-items:center}.iap-card-t small{display:block;color:var(--muted)}
.iap-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.iap-list{display:grid;gap:10px}
.iap-opt{display:grid;gap:2px;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.iap-opt b{font-size:1rem}.iap-opt span{font:700 1.05rem var(--hfont);color:var(--accent)}.iap-opt small{color:var(--muted)}
.iap-legal{font-size:.78rem;color:var(--muted);margin:4px 0 0}
/* Admin → Engagement → Mobile apps */
.as-head{display:flex;gap:14px;align-items:flex-start}.as-head h3{margin:2px 0 4px}.as-head p{margin:0 0 10px}
.as-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.as-tile{display:grid;gap:2px}.as-tile small{color:var(--muted);font-size:.78rem}.as-tile b{font:700 1.7rem var(--hfont)}.as-tile span{color:var(--muted);font-size:.8rem}
.as-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.as-two.flat .card{box-shadow:none}
.as-plat h3,.as-two h3{display:flex;align-items:center;gap:8px;margin:0 0 10px}.as-plat h3 .ico{width:18px;height:18px;color:var(--accent)}
.as-two dl,.as-plat dl{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:0}.as-two dt{color:var(--muted)}.as-two dd{margin:0;font-weight:700;text-align:right}
.as-bad{color:var(--bad)}
.as-chart{width:100%;height:auto;display:block}.as-ios{fill:var(--accent)}.as-and{fill:#34d399}.as-ax{font:11px var(--mono);fill:var(--muted)}
.as-legend{display:flex;gap:12px;font-size:.82rem;color:var(--muted)}.as-key::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--accent)}.as-key.and::before{background:#34d399}
@media (max-width:900px){.as-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.as-two{grid-template-columns:minmax(0,1fr)}}
/* ReconHire for iPhone and Android: coming soon / download badges (public/js/app-badges.js) */
.ab-wrap{display:grid;gap:8px;margin-top:18px}
.ab-k{font:600 .7rem var(--mono,ui-monospace,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ab-row{display:flex;flex-wrap:wrap;gap:10px}
.ab-badge{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 16px 8px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line2));
  background:linear-gradient(135deg,#0d1226,#1a1442);color:#fff;font:inherit;text-align:left;text-decoration:none;cursor:pointer;box-shadow:0 10px 24px -16px rgba(91,140,255,.8);transition:transform .15s,box-shadow .15s}
.ab-badge:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(123,97,255,.9);text-decoration:none}
.ab-badge svg{width:26px;height:26px;flex:none;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-ios svg{stroke:#9ec0ff}.ab-android svg{stroke:#6ee7b7}
.ab-t{display:grid;line-height:1.1}.ab-t small{font-size:.68rem;opacity:.75}.ab-t b{font:700 1.02rem var(--hfont,system-ui)}
.ab-soon{margin-left:6px;padding:3px 8px;border-radius:999px;font:700 .62rem var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:#1b1030;background:linear-gradient(135deg,#ffd166,#ff9f6b)}
.ab-badge.asked .ab-soon{color:#06281d;background:linear-gradient(135deg,#6ee7b7,#34d399)}
.ab-soon{white-space:nowrap}
.ab-badge.asked .ab-soon{font-size:0!important}
.ab-badge.asked .ab-soon::after{content:"✓ We’ll tell you";font:700 .62rem var(--mono,monospace);letter-spacing:.06em}
.ab-compact .ab-badge.asked .ab-soon::after{content:"✓ Notified";font-size:.56rem}
.ab-note{color:var(--muted);font-size:.8rem}
.ab-compact{margin-top:10px}.ab-compact .ab-row{gap:6px}
.ab-compact .ab-badge{min-height:0;padding:5px 10px 5px 8px;border-radius:10px;gap:6px;box-shadow:none}
.ab-compact .ab-badge svg{width:18px;height:18px}.ab-compact .ab-t small{display:none}.ab-compact .ab-t b{font-size:.8rem}
.ab-compact .ab-soon{font-size:.56rem;padding:2px 6px;margin-left:2px}
.rail-foot .ab-compact{justify-content:center}.rail-foot .ab-compact .ab-row{justify-content:center}
.ab-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;max-width:min(92vw,460px);padding:12px 16px;border-radius:12px;background:#111827;color:#fff;font-size:.9rem;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
html:not([data-theme="dark"]) .ab-badge{background:linear-gradient(135deg,#111a3a,#2a1f6b)}
.in-app .ab-wrap{display:none!important}
/* v1.56.1 app badges: bolder, glowing, matches the site (animated gradient edge, platform-tinted glass) */
@property --ab-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.ab-badge{border:0;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#0b1024 0%,#16123a 55%,#0d1a3a 100%);padding:9px 16px 9px 10px;min-height:56px;border-radius:16px;box-shadow:0 16px 34px -18px rgba(91,140,255,.95),inset 0 1px 0 rgba(255,255,255,.08)}
.ab-badge::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ab-a),#5b8cff,#b06bff,#ff4fd8,#22d3ee,#5b8cff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:abSpin 6s linear infinite}
.ab-android::before{background:conic-gradient(from var(--ab-a),#34d399,#22d3ee,#5b8cff,#6ee7b7,#34d399)}
.ab-glow{position:absolute;inset:-40% -20% auto auto;width:70%;height:140%;z-index:-1;background:radial-gradient(closest-side,rgba(123,97,255,.38),transparent);pointer-events:none}
.ab-android .ab-glow{background:radial-gradient(closest-side,rgba(52,211,153,.30),transparent)}
.ab-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;background:linear-gradient(145deg,rgba(91,140,255,.22),rgba(176,107,255,.16));box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 18px -4px rgba(123,97,255,.7)}
.ab-android .ab-ic{background:linear-gradient(145deg,rgba(52,211,153,.2),rgba(34,211,238,.14));box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 18px -4px rgba(52,211,153,.6)}
.ab-badge .ab-ic svg{width:26px;height:26px;fill:none;stroke:none}
.ab-t b{font-size:1.08rem;letter-spacing:.01em;background:linear-gradient(90deg,#fff,#cfdcff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ab-t small{letter-spacing:.04em}
.ab-soon{box-shadow:0 0 14px -2px rgba(255,159,107,.7);animation:abPulse 2.4s ease-in-out infinite}
.ab-badge.asked .ab-soon{box-shadow:0 0 14px -2px rgba(52,211,153,.7);animation:none}
.ab-badge:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 20px 40px -18px rgba(176,107,255,1),inset 0 1px 0 rgba(255,255,255,.1)}
.ab-badge:hover::before{animation-duration:2.2s}
.ab-compact .ab-badge{min-height:0;padding:5px 10px 5px 6px;border-radius:12px;box-shadow:0 8px 18px -14px rgba(91,140,255,.9)}
.ab-compact .ab-ic{width:24px;height:24px;border-radius:7px}.ab-compact .ab-ic svg{width:18px;height:18px}
.ab-compact .ab-glow{display:none}
@keyframes abSpin{to{--ab-a:360deg}}
@keyframes abPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@media (prefers-reduced-motion:reduce){.ab-badge::before,.ab-soon{animation:none}}
/* app launch waitlist form */
.ab-modal{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:16px;background:rgba(5,8,20,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:abFade .18s ease-out}
.ab-card{position:relative;width:min(440px,100%);padding:26px 24px 20px;border-radius:20px;color:#e8edf8;text-align:left;
  background:radial-gradient(120% 90% at 0% 0%,rgba(176,107,255,.28),transparent 55%),radial-gradient(110% 90% at 100% 100%,rgba(34,211,238,.20),transparent 55%),linear-gradient(160deg,#0d1226,#15113a);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.08);animation:abPop .22s cubic-bezier(.2,.9,.3,1.2)}
.ab-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ab-a),#5b8cff,#b06bff,#ff4fd8,#22d3ee,#5b8cff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:abSpin 6s linear infinite;pointer-events:none}
.ab-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer}
.ab-done .ab-x{position:static;width:auto;height:auto}
.ab-card-ic{display:flex;gap:8px;margin-bottom:12px}.ab-card-ic svg{width:34px;height:34px;padding:6px;border-radius:12px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ab-card h3{margin:4px 0 6px;font:700 1.35rem var(--hfont,system-ui);color:#fff}
.ab-card p{margin:0 0 16px;color:#b8c3e0;font-size:.93rem;line-height:1.5}
.ab-card .ab-k{color:#9ec0ff}
.ab-form{display:grid;gap:12px}
.ab-lab{display:grid;gap:6px;font-size:.8rem;color:#b8c3e0}
.ab-in{font:inherit;font-size:1rem;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;outline:none}
.ab-in:focus{border-color:#7b8cff;box-shadow:0 0 0 3px rgba(123,140,255,.3)}
.ab-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ab-pick label{position:relative;cursor:pointer}
.ab-pick input{position:absolute;opacity:0;pointer-events:none}
.ab-pick span{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-weight:700;transition:all .15s}
.ab-pick span svg{width:22px;height:22px}
.ab-pick input:checked+span{border-color:transparent;background:linear-gradient(135deg,rgba(91,140,255,.35),rgba(176,107,255,.35));box-shadow:inset 0 0 0 1.5px #8ea8ff,0 8px 20px -10px rgba(123,97,255,.9)}
.ab-pick input:focus-visible+span{outline:2px solid #8ea8ff;outline-offset:2px}
.ab-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.ab-go{font:700 1rem var(--font,system-ui);padding:13px 18px;border:0;border-radius:999px;color:#fff;cursor:pointer;background:linear-gradient(135deg,#4f8fff,#7b61ff 55%,#c04fff);box-shadow:0 12px 28px -12px rgba(123,97,255,.95)}
.ab-go:disabled{opacity:.7;cursor:default}
.ab-err{margin:0;color:#ff8a9a;font-size:.86rem}
.ab-fine{color:#8f9bbd;font-size:.75rem;text-align:center}.ab-fine a{color:#b8c8ff}
.ab-done{display:grid;justify-items:center;text-align:center;gap:4px;padding:10px 0 2px}
.ab-check{display:grid;place-items:center;width:58px;height:58px;border-radius:999px;font-size:28px;color:#06281d;background:linear-gradient(135deg,#6ee7b7,#34d399);box-shadow:0 0 28px -4px rgba(52,211,153,.8);margin-bottom:6px}
@keyframes abFade{from{opacity:0}}@keyframes abPop{from{opacity:0;transform:translateY(10px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.ab-card,.ab-modal{animation:none}.ab-card::before{animation:none}}
/* admin tables with a pinned header row (Roles and access, and any other sticky thead) sit below the pinned admin tab bar */
.adm-layout .ac-table thead th,.adm-layout table.sticky-head thead th{top:calc(var(--head-h,64px) + var(--adm-sub-h,0px))!important;z-index:20}
.adm-layout .ac-table thead .ac-pcol{z-index:21}
/* scheduled maintenance heads-up (live.js) */
.maint-soon{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:210;display:flex;align-items:center;gap:10px;max-width:min(92vw,720px);padding:10px 14px;border-radius:14px;font-size:.88rem;line-height:1.35;color:#fff;background:linear-gradient(135deg,#b45309,#dc2626);box-shadow:0 20px 40px -18px rgba(0,0,0,.7)}
.maint-soon.on{background:linear-gradient(135deg,#1d4ed8,#7c3aed)}
.maint-soon .ms-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:msDot 1.2s ease-in-out infinite}
@keyframes msDot{50%{opacity:.3}}
.maint-soon b{white-space:nowrap}
.maint-soon .ms-x{margin-left:auto;background:rgba(255,255,255,.18);border:0;color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1}
@media (max-width:600px){.maint-soon{flex-wrap:wrap;bottom:72px}}
/* notifications: compact LinkedIn-style rows, paged */
.n-filters{align-items:center;justify-content:space-between}
.n-filters .n-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.n-filters .n-head h2{margin:0;font-size:1.15rem}
.n-markall{margin-left:auto}
.n-item{grid-template-columns:8px 40px 1fr auto;gap:10px;padding:11px 12px 11px 8px;border-bottom:1px solid var(--line)}
.n-item.unread{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.n-item:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.n-item.unread:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.n-ic{width:40px;height:40px;border-radius:50%}
.n-body{gap:6px;padding-top:0}
.n-text{font-size:.92rem;line-height:1.4}
.n-text .n-fold{color:var(--muted);font-size:.8rem;white-space:nowrap}
.n-body .n-act{padding:5px 12px;font-size:.82rem;border-radius:999px}
.n-side time{font-size:.74rem}
.n-more-btn{display:block;width:calc(100% - 24px);margin:10px 12px 12px;border-radius:999px}
.n-more-btn[hidden]{display:none}

/* Notifications: footer links and app buttons live under the left ad (like My Network); the bottom footer only shows when that column is hidden */
.n-left:not(.rail-fit1) .rail-foot{display:grid;margin-top:4px;font-size:.76rem}
@media (min-width:821px){body:has(.n-left:not(.rail-fit1) .rail-foot) .foot-app{display:none}}
/* Notifications left column: compact so the footer fits under the ad */
.n-left .n-me .f-me-cover{height:40px}.n-left .n-me .f-me-av{margin:-30px 0 6px 14px}.n-left .n-me{padding-bottom:10px}.n-left .n-me .hl{margin:2px 0 0;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.n-left .n-me .nm{padding:0 16px;display:block}.n-left .n-me .hl{padding:0 16px}
.n-prefs{display:grid;padding:4px 14px;margin-top:10px}.n-pref{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;color:var(--text);text-decoration:none;font-size:.88rem}
.n-pref+.n-pref{border-top:1px solid var(--line)}.n-pref .ico{color:var(--accent);width:16px;height:16px}
.n-left .ad-mini{padding:10px 12px;gap:6px}
.n-left .ad-mini .ad-body b{font-size:.86rem;line-height:1.2}.n-left .ad-mini .ad-body p{font-size:.76rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 0}
.n-left .ad-mini .ad-cta{padding:6px 12px;font-size:.78rem}
.n-left .n-me .hl{display:none}.n-left .n-me .f-me-cover{height:34px}.n-left .n-me .f-me-av{margin:-26px 0 4px 14px}
.n-left .ad-mini .ad-label{font-size:.58rem}
.n-left .rail-foot{gap:7px}

/* Mark all read: a warm yellow button so it's easy to spot */
html body .n-markall{margin-left:auto;background:linear-gradient(135deg,#ffd43b,#ffb703)!important;color:#2b1d00!important;border:0!important;font-weight:700;box-shadow:0 4px 14px rgba(255,183,3,.35);transition:transform .15s,box-shadow .15s,filter .15s}
html body .n-markall:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 6px 18px rgba(255,183,3,.5)}
html body .n-markall:active{transform:none}
html body .n-markall .ico{color:#2b1d00}
@media (prefers-reduced-motion:no-preference){html body .n-markall:not([disabled]){animation:nmpulse 3.2s ease-in-out infinite}@keyframes nmpulse{0%,100%{box-shadow:0 4px 14px rgba(255,183,3,.35)}50%{box-shadow:0 4px 22px rgba(255,183,3,.6)}}}

/* "Happening on ReconHire" card: even spacing, name and badges on one line, one-line headline */
html body .act-card{gap:8px}
html body .act-card>.rh-kick{margin-bottom:0}
html body .act-card>b{margin:0 0 2px;font-size:1.1rem;line-height:1.25}
html body .act-grid{gap:8px;margin:2px 0 4px}
html body .act-grid div{padding:10px 4px;gap:4px}
html body .act-grid small{font-size:.62rem;line-height:1.35;letter-spacing:.06em}
html body .act-sub{margin:6px 0 0}
html body .act-person{gap:10px;padding:6px 0;align-items:center}
html body .act-person>span{flex:1;min-width:0;gap:2px}
html body .act-person b{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;font-size:.9rem;line-height:1.25}
html body .act-person b .vbadges{display:inline-flex;flex:none;gap:4px;margin-left:auto}
html body .act-person small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
html body .act-person .nav-av{flex:none;width:36px!important;height:36px!important;min-width:36px}

/* compact profile menu: same items, less height and width */
.menu.me-menu{width:300px;padding:8px;gap:5px;border-radius:14px}
.menu.me-menu a.mm-profile{padding:8px 10px;gap:10px;border-radius:12px}
.menu.me-menu a.mm-profile .nav-av,.menu.me-menu a.mm-profile .nav-av img{width:40px;height:40px}
.mm-profile-t{gap:0}
.mm-profile-t b{font-size:.92rem}
.mm-profile-t small{font-size:.74rem;-webkit-line-clamp:1}
.menu.me-menu a.mm-card{padding:6px 10px;gap:10px;border-radius:12px}
.mm-card>.ico:first-child{padding:5px;width:16px;height:16px;border-radius:8px}
.mm-card-t{gap:0}
.mm-card-t b{font-size:.85rem}
.mm-card-t small{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu.me-menu .wx-now{padding:5px 10px;font-size:.8rem}
.mm-list{padding:2px 0 0;gap:0}
.me-menu .mm-item{padding:6px 8px;gap:10px;font-size:.86rem;border-radius:8px}
.me-menu .mm-item>.ico{width:17px;height:17px}
.me-menu .mm-theme{padding:4px 8px;gap:8px}
.me-menu .mm-theme-l{font-size:.86rem;gap:10px}
.me-menu .mm-theme-l .ico{width:17px;height:17px}
.mm-foot{padding:6px 4px 0}
.me-menu .mm-signout{padding:4px 8px;font-size:.88rem}
/* folded alert banners shrink to a small pill (arrow + count) instead of a full-width bar */
.tick.tick-folded,#wx-strip.tick.wx-under.tick-folded{width:fit-content!important;max-width:calc(100% - 32px)!important;min-width:0;height:24px!important;padding:0!important;margin-left:auto!important;margin-right:auto!important;border-radius:999px!important;box-shadow:none!important;overflow:hidden}
#wx-strip.tick.wx-under.tick-folded{margin-top:6px!important}
.tick.tick-folded .tick-fold{height:24px;padding:0 12px 0 10px;margin:0;background:transparent;font-size:.72rem}

/* employer.css */
/* ReconHire: Employer page (Post verified jobs) and Admin → Employers. Uses theme variables so dark mode works. */
.emp-body{gap:18px}
.emp-body h2{font-size:1.25rem;margin:0}
.emp-body h3{font-size:1.02rem}
.emp-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.emp-ic .ico{width:20px;height:20px}
.linkish{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:.86rem;cursor:pointer}
.linkish:hover{text-decoration:underline}

/* badges */
.emp-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font:600 .78rem/1 var(--font);white-space:nowrap}
.emp-badge .ico{width:14px;height:14px}
.emp-badge.ok{color:color-mix(in srgb,var(--good) 80%,var(--text));background:color-mix(in srgb,var(--good) 14%,transparent)}
.emp-badge.info{color:color-mix(in srgb,var(--info) 80%,var(--text));background:color-mix(in srgb,var(--info) 14%,transparent)}
.emp-badge.warn{color:color-mix(in srgb,#d97706 80%,var(--text));background:color-mix(in srgb,#f59e0b 16%,transparent)}
.emp-badge.bad{color:color-mix(in srgb,var(--bad) 80%,var(--text));background:color-mix(in srgb,var(--bad) 13%,transparent)}

/* company header card */
.emp-hero{padding:0;overflow:hidden}
.emp-hero-band{height:76px;background:radial-gradient(circle at 85% 0,color-mix(in srgb,var(--accent2) 40%,transparent),transparent 55%),linear-gradient(115deg,color-mix(in srgb,var(--accent) 80%,#0b1220),color-mix(in srgb,var(--accent2) 70%,#0b1220))}
.emp-hero-main{display:flex;gap:18px;align-items:flex-start;padding:0 22px 20px;flex-wrap:wrap}
.emp-hero-lw{margin-top:-38px;flex:none}
.emp-hero-logo{position:relative;width:92px;height:92px;border-radius:22px;padding:0;border:4px solid var(--surface);background:var(--surface);box-shadow:0 8px 24px -12px rgba(0,0,0,.45);cursor:pointer;overflow:hidden;display:grid;place-items:center}
.emp-hero-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.emp-hero-init{width:100%;height:100%;display:grid;place-items:center;font:700 2.1rem var(--hfont);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.emp-hero-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 .72rem var(--font);color:#fff;background:rgba(10,15,30,.62);opacity:0;transition:opacity .18s}
.emp-hero-ov .ico{width:18px;height:18px}
.emp-hero-logo:hover .emp-hero-ov,.emp-hero-logo:focus-visible .emp-hero-ov,.emp-hero-logo.busy .emp-hero-ov{opacity:1}
.emp-hero-logo:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px}
.emp-hero-txt{flex:1;min-width:220px;padding-top:12px}
.emp-hero-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.emp-hero-name h2{font-size:1.4rem;line-height:1.2}
.emp-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.emp-fact{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--muted)}
.emp-fact .ico{width:15px;height:15px;opacity:.8}
a.emp-fact:hover{color:var(--accent);text-decoration:none}
.emp-about{margin:10px 0 0;font-size:.9rem;color:var(--muted);max-width:70ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.emp-hero-acts{display:flex;gap:8px;padding-top:14px;flex-wrap:wrap}

/* stepper */
.emp-stepper{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.emp-stepper-bar{position:absolute;left:calc(16.66% + 4px);right:calc(16.66% + 4px);top:33px;height:3px;border-radius:2px;background:var(--line2)}
.emp-stepper-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--good),var(--accent));transition:width .4s}
.emp-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.emp-step-n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 .9rem var(--font);color:var(--muted);background:var(--surface);border:2px solid var(--line2);z-index:1}
.emp-step-n .ico{width:18px;height:18px}
.emp-step.done .emp-step-n{background:var(--good);border-color:var(--good);color:#fff}
.emp-step.on .emp-step-n{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent)}
.emp-step-t{display:flex;flex-direction:column;line-height:1.3}
.emp-step-t b{font-size:.9rem}
.emp-step-t small{font-size:.76rem;color:var(--dim)}
.emp-step:not(.on):not(.done) .emp-step-t b{color:var(--muted)}

/* alerts */
.emp-alert{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius);border:1px solid var(--line2);background:var(--surface);color:var(--text)}
.emp-alert h3{margin:0 0 4px}
.emp-alert p{margin:0;font-size:.92rem}
.emp-alert>div{flex:1;min-width:0}
.emp-alert-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.emp-alert-ic .ico{width:19px;height:19px}
.emp-alert.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 6%,var(--surface))}
.emp-alert.bad .emp-alert-ic{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.emp-alert.info{border-color:color-mix(in srgb,var(--info) 35%,transparent);background:color-mix(in srgb,var(--info) 6%,var(--surface))}
.emp-alert.info .emp-alert-ic{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}
.emp-alert.warn{border-color:color-mix(in srgb,#f59e0b 45%,transparent);background:color-mix(in srgb,#f59e0b 7%,var(--surface))}
.emp-alert.warn .emp-alert-ic{color:#d97706;background:color-mix(in srgb,#f59e0b 16%,transparent)}
a.emp-alert{align-items:center;text-decoration:none}
a.emp-alert:hover{text-decoration:none;border-color:var(--accent)}
a.emp-alert>.ico{width:18px;height:18px;color:var(--muted)}
.emp-note{margin:10px 0 12px;padding:10px 14px;border-left:3px solid var(--bad);border-radius:0 10px 10px 0;background:var(--surface)}
.emp-note small{display:block;font:600 .72rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.emp-note p{font-size:.95rem;font-weight:500}
.emp-alert-sub{display:block;font-size:.88rem;margin-top:4px}
.emp-next{margin:6px 0 0;padding-left:20px;font-size:.9rem;color:var(--muted)}
.emp-next li{margin:3px 0}

/* method picker */
.emp-verify{display:flex;flex-direction:column;gap:14px}
.emp-sec-head p{margin:4px 0 0;font-size:.92rem}
.emp-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.emp-method{position:relative;display:flex;gap:12px;align-items:flex-start;text-align:left;padding:16px;border-radius:var(--radius);border:1.5px solid var(--line2);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.emp-method:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-1px)}
.emp-method:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.emp-method.on{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent);background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.emp-method-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
.emp-method-ic .ico{width:20px;height:20px}
.emp-method.on .emp-method-ic{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.emp-method-t{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;padding-right:20px}
.emp-method-t b{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.98rem}
.emp-method-t b em{font:600 .68rem/1 var(--font);font-style:normal;padding:4px 7px;border-radius:999px;color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent);letter-spacing:.02em}
.emp-method-t b em.fast{color:color-mix(in srgb,var(--good) 80%,var(--text));background:color-mix(in srgb,var(--good) 14%,transparent)}
.emp-method-t b em.rec{color:color-mix(in srgb,var(--accent2) 85%,var(--text));background:color-mix(in srgb,var(--accent2) 14%,transparent)}
.emp-method-t small{color:var(--muted);font-size:.84rem;line-height:1.45}
.emp-time{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;color:var(--dim);margin-top:2px}
.emp-time .ico{width:13px;height:13px}
.emp-radio{position:absolute;top:16px;right:14px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line2)}
.emp-method.on .emp-radio{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 4px,transparent 5px)}

/* method panel */
.emp-panel{padding:22px}
.emp-panel-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.emp-panel-head p{margin:2px 0 0;font-size:.9rem}
.emp-howto{counter-reset:s;list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:0}
.emp-howto li{counter-increment:s;display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted);padding:7px 12px 7px 8px;border-radius:999px;background:color-mix(in srgb,var(--text) 4%,transparent)}
.emp-howto li::before{content:counter(s);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 .72rem var(--font);color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.emp-inline{display:flex;gap:8px}
.emp-inline .input{flex:1}
.emp-step1 .field{max-width:560px;margin-bottom:8px}
.emp-msg{margin:10px 0 0;padding:9px 12px;border-radius:10px;font-size:.88rem;background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--muted)}
.emp-msg.bad{color:color-mix(in srgb,var(--bad) 85%,var(--text));background:color-mix(in srgb,var(--bad) 10%,transparent)}
.emp-msg.ok{color:color-mix(in srgb,var(--good) 80%,var(--text));background:color-mix(in srgb,var(--good) 10%,transparent)}
.emp-msg.warn{color:color-mix(in srgb,#d97706 80%,var(--text));background:color-mix(in srgb,#f59e0b 12%,transparent);margin:0}
.emp-codebox{max-width:560px}
.emp-codebox>p{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;font-size:.92rem}
.emp-codebox>p .ico{flex:none;width:18px;height:18px;margin-top:3px;color:var(--accent)}
.emp-codebox-foot{margin-top:12px;gap:14px}
.emp-panel-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.emp-empty{display:flex;gap:14px;align-items:flex-start}
.emp-empty p{margin:4px 0 12px;font-size:.9rem}

/* OTP boxes */
.emp-otp{display:flex;align-items:center;gap:7px}
.emp-otp-d{width:46px;height:54px;padding:0;text-align:center;font:600 1.4rem/1 var(--mono);color:var(--text);border-radius:12px;border:1.5px solid var(--line2);background:color-mix(in srgb,var(--bg) 70%,var(--surface));transition:border-color .15s,box-shadow .15s;caret-color:var(--accent)}
.emp-otp-d:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.emp-otp-d:disabled{opacity:.6}
.emp-otp-sep{width:8px;height:2px;border-radius:1px;background:var(--line2)}
.emp-otp.bad .emp-otp-d{border-color:var(--bad);animation:emp-shake .35s}
@keyframes emp-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.emp-otp.bad .emp-otp-d{animation:none}}
.emp-team-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* team code box */
.emp-team{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;padding:18px 20px}
.emp-team-txt{display:flex;gap:14px;align-items:flex-start;flex:1;min-width:260px}
.emp-team-txt p{margin:2px 0 0;font-size:.88rem}
.emp-team>.emp-msg{flex-basis:100%;margin:0}
.emp-team:not(.hot) .emp-ic{color:var(--muted);background:color-mix(in srgb,var(--text) 6%,transparent);border-color:var(--line)}
.emp-team.hot{border-color:color-mix(in srgb,var(--accent2) 45%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--accent2) 8%,var(--surface)),var(--surface) 60%);box-shadow:0 10px 30px -20px var(--accent2)}
.emp-team.hot .emp-ic{color:var(--accent2);background:color-mix(in srgb,var(--accent2) 13%,transparent);border-color:color-mix(in srgb,var(--accent2) 30%,transparent)}

/* website proof */
.emp-proofs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.emp-proof{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:14px;border:1px solid var(--line2);background:color-mix(in srgb,var(--text) 2%,var(--surface));min-width:0}
.emp-proof-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.emp-opt{font:600 .7rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent2);padding:3px 7px;border-radius:6px;background:color-mix(in srgb,var(--accent2) 12%,transparent)}
.emp-kv{display:flex;flex-direction:column;gap:6px}
.emp-kv-row{display:grid;grid-template-columns:100px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 6px 6px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.emp-kv-row small{color:var(--dim);font-size:.76rem}
.emp-kv-row code{font:500 .8rem/1.4 var(--mono);word-break:break-all;color:var(--text);padding:3px 0}
.emp-kv-row .emp-copy{padding:5px 9px}
.emp-kv-row:not(:has(button)){padding-right:10px}
.emp-req{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border-radius:12px;font-size:.9rem;background:color-mix(in srgb,#f59e0b 9%,transparent);border:1px solid color-mix(in srgb,#f59e0b 35%,transparent)}
.emp-req>span{flex:1;min-width:200px}
.emp-req>.ico{flex:none;width:18px;height:18px;color:#d97706}
.emp-req.ok{background:color-mix(in srgb,var(--good) 8%,transparent);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.emp-req.ok>.ico{color:var(--good)}

/* documents */
.emp-docs-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
.emp-docs-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.emp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:30px 18px;border-radius:16px;border:2px dashed var(--line2);background:color-mix(in srgb,var(--accent) 3%,transparent);cursor:pointer;transition:border-color .15s,background .15s}
.emp-drop:hover,.emp-drop:focus-visible{outline:none;border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.emp-drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.emp-drop b{font-size:.98rem}
.emp-drop u{color:var(--accent);text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.emp-drop small{color:var(--dim);font-size:.82rem}
.emp-drop-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);margin-bottom:4px}
.emp-drop-ic .ico{width:22px;height:22px}
.emp-files{display:flex;flex-direction:column;gap:8px}
.emp-files:empty{display:none}
.emp-file{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line2);background:var(--surface)}
.emp-file.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 5%,var(--surface))}
.emp-file.bad .emp-file-t small{color:color-mix(in srgb,var(--bad) 85%,var(--text))}
.emp-file-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.emp-file-t b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-file-t small{font-size:.78rem;color:var(--dim)}
.emp-file select.input{width:auto;max-width:280px;padding:7px 30px 7px 10px;font-size:.84rem}
.emp-thumb{flex:none;width:44px;height:52px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid var(--line)}
.emp-thumb img{width:100%;height:100%;object-fit:cover}
.emp-thumb.pdf{grid-template-rows:auto auto;align-content:center;gap:1px;color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.emp-thumb.pdf .ico{width:20px;height:20px}
.emp-thumb.pdf small{font:700 .58rem var(--mono);letter-spacing:.04em}
.emp-thumb.ok{color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent)}
.emp-thumb.ok .ico{width:22px;height:22px}
.emp-bar{display:block;height:5px;border-radius:3px;background:var(--line2);overflow:hidden;margin-top:5px}
.emp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s}
.emp-bar[hidden]{display:none}
.emp-done-tag{display:inline-flex;align-items:center;gap:4px;font:600 .74rem var(--font);color:color-mix(in srgb,var(--good) 80%,var(--text))}
.emp-done-tag .ico{width:13px;height:13px}
.emp-sub{margin:6px 0 0}
.emp-accept{padding:16px;border-radius:14px;background:color-mix(in srgb,var(--text) 3%,transparent);border:1px solid var(--line);font-size:.86rem}
.emp-accept>b{display:block;font-size:.84rem;margin-bottom:6px}
.emp-accept ul{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.emp-accept ul:last-child{margin-bottom:0}
.emp-accept li{display:flex;gap:7px;align-items:flex-start;line-height:1.4}
.emp-accept li .ico{flex:none;width:14px;height:14px;margin-top:2px;color:var(--good)}
.emp-accept ul.tips li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;margin-top:7px;background:var(--accent)}

/* under review */
.emp-review{padding:22px}
.emp-review-top{display:flex;gap:14px;align-items:flex-start}
.emp-review-top p{margin:4px 0 0}
.emp-review-ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--info);background:color-mix(in srgb,var(--info) 13%,transparent)}
.emp-review-ic .ico{width:22px;height:22px}
.emp-timeline{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column}
.emp-timeline li{position:relative;display:flex;gap:12px;padding-bottom:16px}
.emp-timeline li:last-child{padding-bottom:0}
.emp-timeline li:not(:last-child)::after{content:"";position:absolute;left:14px;top:30px;bottom:2px;width:2px;background:var(--line2)}
.emp-timeline li.done:not(:last-child)::after{background:var(--good)}
.emp-timeline li>span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--dim);background:var(--surface);border:2px solid var(--line2)}
.emp-timeline li>span .ico{width:14px;height:14px}
.emp-timeline li.done>span{color:#fff;background:var(--good);border-color:var(--good)}
.emp-timeline li.on>span{color:var(--info);border-color:var(--info);box-shadow:0 0 0 4px color-mix(in srgb,var(--info) 15%,transparent)}
.emp-timeline b{display:block;font-size:.92rem}
.emp-timeline small{color:var(--dim);font-size:.8rem}
.emp-timeline li:not(.done):not(.on) b{color:var(--muted)}
.emp-review-docs{margin-top:16px}
.emp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.emp-review-tip{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.emp-review-tip .ico{flex:none;width:16px;height:16px;margin-top:3px;color:var(--accent)}

/* verified */
.emp-ok{padding:22px;border-color:color-mix(in srgb,var(--good) 35%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--good) 8%,var(--surface)),var(--surface) 55%)}
.emp-ok-top{display:flex;gap:16px;align-items:flex-start}
.emp-ok-top p{margin:5px 0 0;color:var(--muted);font-size:.93rem;max-width:70ch}
.emp-ok-ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--good),color-mix(in srgb,var(--good) 60%,var(--info)));box-shadow:0 10px 24px -12px var(--good)}
.emp-ok-ic .ico{width:26px;height:26px}
.emp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.emp-stat{display:flex;flex-direction:column;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text)}
.emp-stat:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.emp-stat b{font:700 1.4rem/1.1 var(--hfont)}
.emp-stat small{color:var(--muted);font-size:.8rem}
.emp-ok-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* setup */
.emp-setup{max-width:none}
.emp-setup-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.emp-setup-head p{margin:4px 0 0}
.emp-setup-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.emp-setup-foot small{display:inline-flex;align-items:center;gap:6px}
.emp-setup-foot small .ico{width:14px;height:14px}

/* admin */
.emp-adm-head{margin-top:8px}
.emp-adm-head .seg{flex-wrap:wrap}
.emp-adm-q{width:240px;max-width:100%;padding:8px 12px}
.emp-adm-co{display:flex;flex-direction:column;gap:12px;padding:18px}
.emp-adm-top{display:flex;gap:12px;align-items:center}
.emp-adm-name{flex:1;min-width:0}
.emp-adm-name b{font-size:1.02rem}
.emp-adm-logo{flex:none;width:44px;height:44px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.emp-adm-logo.init{display:grid;place-items:center;font:700 1.1rem var(--hfont);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.emp-adm-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 18px;margin:0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--text) 3%,transparent)}
.emp-adm-kv>div{min-width:0}
.emp-adm-kv dt{font:600 .7rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.emp-adm-kv dd{margin:2px 0 0;font-size:.86rem;min-width:0;overflow-wrap:anywhere}
.emp-adm-kv .chip{font-size:.7rem;padding:3px 7px;margin-left:2px}
.emp-adm-about{margin:0;font-size:.88rem;color:var(--muted)}
.emp-adm-note{padding:10px 12px;border-radius:10px;border-left:3px solid var(--info);background:color-mix(in srgb,var(--info) 6%,transparent)}
.emp-adm-note small{font:600 .7rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.emp-adm-note p{margin:2px 0 0;font-size:.88rem}
.emp-adm-docs{display:flex;flex-direction:column;gap:8px}
.emp-adm-docs .kicker{margin:0}
.emp-adm-doc{display:flex;gap:12px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line)}
.emp-adm-doc>div{flex:1;min-width:0;display:flex;flex-direction:column}
.emp-adm-doc b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-adm-doc .emp-thumb{width:36px;height:42px}
.emp-adm-code{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent2) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 28%,transparent)}
.emp-adm-code>.ico{flex:none;width:18px;height:18px;color:var(--accent2)}
.emp-adm-code>div{flex:1;min-width:200px;display:flex;flex-direction:column}
.emp-adm-code b{font-size:.88rem}
.emp-adm-code small{color:var(--muted);font-size:.8rem}
.emp-adm-code.dead{background:color-mix(in srgb,var(--text) 4%,transparent);border-color:var(--line)}
.emp-adm-code.dead>.ico{color:var(--dim)}
.emp-adm-acts{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.emp-codedlg-info{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent);font-size:.86rem}
.emp-codedlg-info ul{margin:6px 0 0;padding-left:18px;color:var(--muted)}
.emp-codedlg-info li{margin:3px 0}
.emp-codedlg .emp-chips .chip,.modal .emp-chips .chip{cursor:pointer;border:1px solid var(--line2);white-space:normal;text-align:left;line-height:1.3}

/* dark mode touches */
html[data-theme="dark"] .emp-hero-logo{border-color:var(--surface)}
html[data-theme="dark"] .emp-otp-d,html[data-theme="dark"] .emp-kv-row{background:var(--surface2)}
html[data-theme="dark"] .emp-badge.warn,html[data-theme="dark"] .emp-msg.warn{color:#fbbf24}
html[data-theme="dark"] .emp-req>.ico,html[data-theme="dark"] .emp-alert.warn .emp-alert-ic{color:#fbbf24}

/* responsive */
@media (max-width:980px){
  .emp-methods{grid-template-columns:1fr}
  .emp-docs-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .emp-proofs{grid-template-columns:1fr}
  .emp-hero-main{padding:0 16px 16px;gap:12px}
  .emp-hero-txt{padding-top:0;flex-basis:100%}
  .emp-hero-acts{padding-top:0}
  .emp-hero-band{height:64px}
  .emp-stepper{padding:14px 8px}
  .emp-step-t small{display:none}
  .emp-step-t b{font-size:.78rem}
  .emp-stepper-bar{top:31px}
  .emp-panel,.emp-review,.emp-ok{padding:16px}
  .emp-inline{flex-direction:column}
  .emp-file{flex-wrap:wrap}
  .emp-file.done{flex-wrap:nowrap}
  .emp-done-tag{display:none}
  .emp-file select.input{order:3;flex-basis:100%;max-width:none;width:100%}
  .emp-kv-row{grid-template-columns:minmax(0,1fr) auto}
  .emp-kv-row small{grid-column:1/-1}
  .emp-team{padding:16px}
  .emp-team-form{width:100%}
  .emp-team-form .btn{flex:1}
  .emp-stats{gap:8px}
  .emp-stat{padding:10px}
  .emp-stat b{font-size:1.2rem}
}
@media (max-width:420px){
  .emp-otp{gap:5px}
  .emp-otp-d{width:40px;height:48px;font-size:1.2rem}
  .emp-otp-sep{width:4px}
}
.emp-adm-code>.row{flex-wrap:nowrap}

/* billing-admin.css */
/* ReconHire: Admin → Billing (overview, paywall & plans, offers, passes, subscribers, payments setup, refunds).
   Uses the theme variables so it works in light and dark mode. */
.ba,.modal{--ba-good:#047857;--ba-good-bg:color-mix(in srgb,var(--good) 11%,var(--surface));--ba-good-line:color-mix(in srgb,var(--good) 35%,transparent);
  --ba-warn:#92400e;--ba-warn-bg:color-mix(in srgb,#f59e0b 12%,var(--surface));--ba-warn-line:color-mix(in srgb,#f59e0b 40%,transparent);
  --ba-bad:#b91c1c;--ba-bad-bg:color-mix(in srgb,var(--bad) 9%,var(--surface));--ba-bad-line:color-mix(in srgb,var(--bad) 35%,transparent);
  --ba-info:#1e40af;--ba-info-bg:color-mix(in srgb,var(--accent) 8%,var(--surface));--ba-info-line:color-mix(in srgb,var(--accent) 30%,transparent);
}
.ba{display:grid;gap:16px;min-width:0}
html[data-theme="dark"] :is(.ba,.modal){--ba-good:#6ee7b7;--ba-warn:#fcd34d;--ba-bad:#fca5a5;--ba-info:#93c5fd}
.ba .card{margin:0}
.ba h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ba h3 .ico{width:18px;height:18px;color:var(--accent)}
.ba .co-loading{padding:28px}

/* ---------- overview: paywall status + numbers ---------- */
.ba-headwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.6fr);gap:16px;align-items:stretch}
.ba-wall{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;align-content:start;padding:20px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);position:relative;overflow:hidden}
.ba-wall.on{border:2px solid transparent;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface) 60%) padding-box,linear-gradient(135deg,var(--accent),var(--accent2)) border-box}
.ba-wall.off{background:linear-gradient(160deg,color-mix(in srgb,var(--text) 4%,var(--surface)),var(--surface) 60%);border-style:dashed;border-color:var(--line2)}
.ba-wall-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px -12px var(--accent)}
.ba-wall.off .ba-wall-ico{background:color-mix(in srgb,var(--text) 12%,var(--surface));color:var(--muted);box-shadow:none}
.ba-wall-ico .ico{width:22px;height:22px}
.ba-wall-txt h2{font:700 clamp(1.25rem,2.4vw,1.55rem)/1.2 var(--hfont);margin:4px 0 6px}
.ba-wall-txt p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
.ba-wall-act{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.ba-link{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--accent);text-decoration:none}
.ba-link:hover{text-decoration:underline}.ba-link .ico{width:15px;height:15px}
.ba-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ba-kpi{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;min-width:0;box-shadow:var(--shadow)}
button.ba-kpi{cursor:pointer;transition:border-color .15s,transform .15s}
button.ba-kpi:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px)}
button.ba-kpi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ba-kpi span{font-size:.78rem;color:var(--muted)}
.ba-kpi b{font:700 1.55rem/1.1 var(--hfont);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ba-kpi small{font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
.ba-kpi.big b{background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ba-kpi.bad{border-color:var(--ba-bad-line);background:var(--ba-bad-bg)}.ba-kpi.bad b{color:var(--ba-bad)}
.ba-kpi.warn b{color:var(--ba-warn)}
.ba-kpi.good small{color:var(--ba-good)}

/* ---------- alerts ---------- */
.ba-alerts{display:grid;gap:8px}
.ba-alert{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:.9rem;line-height:1.45;border:1px solid var(--ba-info-line);background:var(--ba-info-bg);color:var(--text)}
.ba-alert>.ico{width:18px;height:18px;flex:none;color:var(--ba-info)}
.ba-alert>span{flex:1;min-width:0}
.ba-alert .btn{flex:none}
.ba-alert.warn{border-color:var(--ba-warn-line);background:var(--ba-warn-bg)}.ba-alert.warn>.ico{color:var(--ba-warn)}
.ba-alert.bad{border-color:var(--ba-bad-line);background:var(--ba-bad-bg)}.ba-alert.bad>.ico{color:var(--ba-bad)}
.ba-alert.good{border-color:var(--ba-good-line);background:var(--ba-good-bg)}.ba-alert.good>.ico{color:var(--ba-good)}

/* ---------- sub navigation ---------- */
.ba-nav{position:sticky;top:var(--ba-sticky,64px);z-index:5;margin:2px 0 0}
.ba-tabs{display:flex;flex-wrap:wrap;max-width:100%;overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.ba-tabs::-webkit-scrollbar{display:none}
.ba-tabs button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 14px;flex:none}
.ba-tabs button .ico{width:16px;height:16px;opacity:.8}
.ba-tabs button.on .ico{color:var(--accent);opacity:1}
.ba-count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;font:700 .7rem/1 var(--font);color:#fff;background:var(--bad)}
.ba-n{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;font:600 .72rem/1.3 var(--font);background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted)}
.seg button.on .ba-n{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--text)}
.ba-pane{display:grid;gap:16px;min-width:0}

/* ---------- shared blocks ---------- */
.ba-card{display:grid;gap:12px}
.ba-card>h3,.ba-card h3{margin:0}
.ba-card p.muted{margin:2px 0 0;font-size:.9rem}
.ba-switchrow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ba-switchrow>div{flex:1 1 260px;min-width:0}
.ba-bigswitch{font-weight:600}
.ba-divider{height:1px;background:var(--line);margin:4px 0}
.ba-h4{font:600 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 0 0}
.ba-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;padding-top:4px}
.ba-block{display:grid;gap:12px;min-width:0}
.ba-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ba-sec-head>div:first-child{flex:1 1 320px;min-width:0}
.ba-sec-head h3{margin:0 0 4px;font-size:1.15rem}
.ba-sec-head p{margin:0;color:var(--muted);font-size:.9rem;max-width:760px;line-height:1.5}
.ba-sec-acts{display:flex;gap:8px;flex-wrap:wrap}
.ba-empty{text-align:center;padding:30px 18px}
.ba-empty>.ico{width:30px;height:30px;color:var(--accent);margin-bottom:6px}
.ba-empty h4{margin:0 0 4px;font:700 1.05rem var(--hfont)}
.ba-empty p{margin:0}
.ba-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.ba-chips .chip{border:1px solid var(--line2);cursor:pointer;font-size:.8rem;padding:5px 10px}
.ba-chips .chip:hover{border-color:var(--accent)}
.ba-chips .chip.on{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.ba-state{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font:600 .74rem/1.2 var(--font);white-space:nowrap;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted)}
.ba-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ba-state.s-live,.ba-state.s-active{background:var(--ba-good-bg);color:var(--ba-good);box-shadow:inset 0 0 0 1px var(--ba-good-line)}
.ba-state.s-trial,.ba-state.s-sched{background:var(--ba-info-bg);color:var(--ba-info);box-shadow:inset 0 0 0 1px var(--ba-info-line)}
.ba-state.s-canceling{background:var(--ba-warn-bg);color:var(--ba-warn);box-shadow:inset 0 0 0 1px var(--ba-warn-line)}
.ba-state.s-past_due{background:var(--ba-bad-bg);color:var(--ba-bad);box-shadow:inset 0 0 0 1px var(--ba-bad-line)}
.ba-state.s-pass,.ba-state.s-comp{background:color-mix(in srgb,var(--accent2) 10%,var(--surface));color:color-mix(in srgb,var(--accent2) 80%,var(--text));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 30%,transparent)}
.ba .err-t{color:var(--ba-bad)}

/* ---------- plans and passes (preview cards) ---------- */
.ba-plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:16px;align-items:start}
.ba-pass-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px;align-items:start}
.ba-plan{display:grid;gap:10px;padding:12px;border-radius:20px;border:1px solid var(--line);background:color-mix(in srgb,var(--text) 2.5%,var(--surface));min-width:0}
.ba-plan.hidden .ba-tile-prev{opacity:.55;filter:grayscale(.5)}
.ba-plan-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:2px 4px 0}
.ba-plan-meta>div{min-width:0}
.ba-plan-meta b{display:block}
.ba-plan-meta small{display:block;font-size:.78rem;overflow-wrap:anywhere}
.ba-plan-acts{display:flex;gap:6px;flex-wrap:wrap}
.ba-plan-acts .btn:first-child{flex:1;justify-content:center}
.ba-tile-prev{pointer-events:none;min-width:0}
.ba-tile-prev .ptile,.ba-prev-card .ptile{max-width:none;transform:none!important}
.ba-tile-prev .pass{margin:0}
.ba-fake{cursor:default;pointer-events:none;justify-content:center;width:100%}
.pass-buy .ba-fake{width:auto}

/* ---------- guided editor + live preview ---------- */
.ba-ed-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ba-ed-top h3{margin:0;font-size:1.2rem}
.ba-back{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line2);border-radius:10px;padding:7px 12px;color:var(--text);font:inherit;font-size:.88rem;cursor:pointer}
.ba-back:hover{border-color:var(--accent)}.ba-back .ico{width:15px;height:15px}
.ba-editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.ba-ed-form{display:grid;gap:14px;min-width:0}
.ba-live{position:sticky;top:calc(var(--ba-sticky,64px) + 56px);display:grid;gap:12px;padding:16px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface2)),var(--surface2));min-width:0}
.ba-modal .ba-live{top:0}
.ba-live-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ba-live .seg button{padding:6px 10px;font-size:.82rem;display:inline-flex;align-items:center;gap:6px}
.ba-live .seg button:disabled{opacity:.45;cursor:not-allowed}
.ba-ivseg .save{font:700 .6rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 6px;border-radius:999px;background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--ba-good)}
.ba-prev-card{pointer-events:none}
.ba-prev-note{margin:0;font-size:.82rem;color:var(--muted);line-height:1.45}
.ba-wallsw{font-size:.84rem}
.ba-steps{display:grid;gap:12px}
.ba-step{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.ba-step-h{display:flex;gap:12px;align-items:flex-start;padding:14px 16px 0}
.ba-step-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 .82rem/1 var(--font);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ba-step-h h4{margin:3px 0 2px;font:700 1rem var(--hfont)}
.ba-step-h p{margin:0;font-size:.85rem;color:var(--muted)}
.ba-step-b{display:grid;gap:10px;padding:12px 16px 16px 56px;min-width:0}
.ba-step-b .field{margin:0}
.ba-math{font-size:.88rem}
.ba-math p{margin:0}
.ba-math-ok{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--ba-good-bg);border:1px solid var(--ba-good-line)}
.ba-math-ok b{color:var(--ba-good)}.ba-math-ok span{color:var(--muted);font-size:.85rem}
.ba-math-bad{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--ba-warn-bg);border:1px solid var(--ba-warn-line);color:var(--text)!important}
.ba-math-bad .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ba-warn)}
.ba-limits{display:grid;gap:8px}
.ba-limit{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface2)}
.ba-limit b{display:block;font-size:.92rem}.ba-limit small{font-size:.78rem}
.ba-limit .input{margin:0;padding:8px 10px}
.ba-limit.off{opacity:.5}
.ba-unl{align-items:center;white-space:nowrap;font-size:.84rem;color:var(--text)}
.ba-unl input{margin:0}
.ba-sw{gap:18px;flex-wrap:wrap;margin-top:4px}
.ba-feats{display:grid;gap:6px}
.ba-feat{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px;align-items:center}
.ba-feat>.ico{width:16px;height:16px;color:var(--ba-good)}
.ba-feat .input{margin:0;padding:8px 10px}
.ba-feat .icon-btn{width:32px;height:32px}
.ba-feat .icon-btn:disabled{opacity:.35}
.ba-feat-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.ba-feat-add .input{margin:0}
.ba-id{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;background:none;padding:0}
.ba-id .input{width:180px;margin:0;padding:6px 10px}
.ba-ed-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:sticky;bottom:0;z-index:2;padding:12px 0;background:linear-gradient(0deg,var(--bg) 70%,transparent)}
.ba-ed-bar .grow{flex:1}

/* ---------- offers ---------- */
.ba-offer{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:20px;align-items:start}
.ba-offer-form{display:grid;gap:12px;min-width:0}
.ba-offer-prev{display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--surface2);border:1px solid var(--line);min-width:0}
.ba-offer-prev .intro-banner{margin:0;flex-wrap:wrap;font-size:.88rem}
.ba-offer-prev .cx-offer{padding:16px 14px}
.ba-offer-prev .cx-offer .big{font-size:1.7rem}
.ba-offer-prev p{margin:0}
.ba-priceline{display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.ba-priceline .pprice b{font-size:2rem}
.ba-priceline .intro-note{font-size:.86rem}
.ba-pl-head{display:flex;align-items:center;gap:8px;font-size:.84rem}
.ba-pick{margin:0;padding:5px 8px;font-size:.84rem;width:auto;max-width:100%}
.ba-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ba-mini-stats div{padding:10px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);text-align:center}
.ba-mini-stats b{display:block;font:700 1.25rem/1.1 var(--hfont)}
.ba-mini-stats span{font-size:.76rem;color:var(--muted)}
.ba-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.ba-code{display:grid;gap:8px;align-content:start;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);min-width:0}
.ba-code.s-live{border-color:var(--ba-good-line)}
.ba-code.s-off,.ba-code.s-ended{background:color-mix(in srgb,var(--text) 2.5%,var(--surface))}
.ba-code-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ba-code-top .ba-state{margin-left:auto}
.ba-code-name{font-size:1.05rem;letter-spacing:.04em}
.ba-code-off{margin:0;font-weight:600}
.ba-code-banner{margin:0;font-size:.86rem;color:var(--muted);font-style:italic}
.ba-code-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:10px 0 0;border-top:1px dashed var(--line2)}
.ba-code-facts dt{font-size:.72rem;color:var(--muted);margin:0 0 2px}
.ba-code-facts dd{margin:0;font-size:.82rem;overflow-wrap:anywhere}
.ba-code-note{margin:0;font-size:.82rem}
.ba-code-acts{display:flex;gap:6px;flex-wrap:wrap}
/* discount + pass editors in a modal */
.ba-modal.wide{width:min(1020px,96vw);max-width:none}
.ba-modal-ed{grid-template-columns:minmax(0,1fr) 330px;gap:20px}
.ba-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba-mode button{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.ba-mode button .ico{grid-row:1/3;width:20px;height:20px;color:var(--muted)}
.ba-mode button small{color:var(--muted);font-size:.8rem;line-height:1.35}
.ba-mode button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.ba-mode button.on .ico{color:var(--accent)}
.ba-disc-val{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ba-disc-val .money-in{flex:1 1 140px}
.ba-disc-val .money-in.pct i{left:auto;right:12px}
.ba-disc-val .money-in.pct input{padding-left:12px;padding-right:30px}
.ba-when{margin:-4px 0 0;font-size:.86rem;color:var(--text);padding:8px 12px;border-radius:10px;background:var(--ba-info-bg);border:1px solid var(--ba-info-line)}
.ba-live-body{display:grid;gap:10px}
.ba-live-body .intro-banner{margin:0;flex-wrap:wrap;font-size:.86rem}
.ba-live-status{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:.84rem}
.ba-checkout-line{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px dashed var(--ba-good-line);background:var(--ba-good-bg);font-size:.86rem}
.ba-checkout-line .ico{width:14px;height:14px;color:var(--ba-good);vertical-align:-2px}
.ba-checkout-line>b{color:var(--ba-good);font-variant-numeric:tabular-nums}

/* ---------- subscribers ---------- */
.ba-subtools{display:grid;grid-template-columns:minmax(0,auto) minmax(220px,1fr);gap:10px;align-items:center}
.ba-filter{overflow-x:auto;max-width:100%;scrollbar-width:none}
.ba-filter::-webkit-scrollbar{display:none}
.ba-filter button{white-space:nowrap;flex:none}
.ba-subtools .search{position:relative;margin:0}
.ba-subtools .search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);width:17px;height:17px}
.ba-subtools .search input{padding-left:38px;margin:0}
.ba-subs{display:grid;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.ba-sub{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr) 90px auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.ba-sub:last-child{border-bottom:0}
.ba-sub:hover{background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.ba-sub>div{min-width:0;display:grid;gap:2px}
.ba-sub b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba-sub small{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba-sub-st{justify-items:start}
.ba-sub-paid{text-align:right;font-variant-numeric:tabular-nums}
.ba-pager{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.86rem}
.ba-pager:empty{display:none}
.ba-loading-bar{height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;animation:baload 1s linear infinite;margin-bottom:8px}
@keyframes baload{from{background-position:200% 0}to{background-position:-200% 0}}
.ba-pay .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ba-refunded{display:block;color:var(--ba-warn);font-size:.76rem}

/* ---------- payments setup ---------- */
.ba-status-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ba-pills{display:flex;gap:8px;flex-wrap:wrap}
.ba-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font:600 .8rem/1.2 var(--font);border:1px solid var(--line2);color:var(--muted);background:var(--surface2)}
.ba-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ba-pill.good{color:var(--ba-good);background:var(--ba-good-bg);border-color:var(--ba-good-line)}
.ba-pill.warn{color:var(--ba-warn);background:var(--ba-warn-bg);border-color:var(--ba-warn-line)}
.ba-pill.bad{color:var(--ba-bad);background:var(--ba-bad-bg);border-color:var(--ba-bad-line)}
.ba-check:empty{display:none}
.ba-checklist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ba-checklist li{display:flex;gap:8px;align-items:flex-start;font-size:.88rem}
.ba-checklist .ico{width:16px;height:16px;flex:none;margin-top:2px}
.ba-checklist .ok .ico{color:var(--ba-good)}.ba-checklist .bad .ico{color:var(--ba-bad)}.ba-checklist .muted .ico{color:var(--dim)}
.ba-mode-badge{font:700 .66rem/1 var(--mono);letter-spacing:.06em;padding:5px 8px;border-radius:999px}
.ba-mode-badge.live{color:var(--ba-good);background:var(--ba-good-bg);box-shadow:inset 0 0 0 1px var(--ba-good-line)}
.ba-mode-badge.test{color:var(--ba-warn);background:var(--ba-warn-bg);box-shadow:inset 0 0 0 1px var(--ba-warn-line)}
.ba-nums{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:none}
.ba-num{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface2)}
.ba-num-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ba-num-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 .8rem/1 var(--font);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.ba-num-h b{flex:1;min-width:0}
.ba-num-b{display:grid;gap:8px;padding:8px 0 0 36px;min-width:0}
.ba-num-b p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5}
.ba-num-b .field{margin:0}
.ba-done{display:inline-flex;align-items:center;gap:4px;font:600 .74rem/1 var(--font);padding:4px 8px;border-radius:999px;color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent)}
.ba-done.ok{color:var(--ba-good);background:var(--ba-good-bg)}
.ba-done .ico{width:12px;height:12px}
.ba-copy{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);min-width:0}
.ba-copy code{flex:1;min-width:0;font-size:.82rem;overflow-wrap:anywhere;background:none;padding:0}
.ba-events{display:flex;flex-wrap:wrap;gap:6px}
.ba-events code{font-size:.74rem;padding:3px 7px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}
.ba-num-b>.btn{justify-self:start}
.ba-wh-st{display:flex;align-items:center;gap:6px;font-size:.84rem!important;color:var(--muted)}
.ba-wh-st .ico{width:15px;height:15px}
.ba-wh-st.good{color:var(--ba-good)!important}.ba-wh-st.bad{color:var(--ba-bad)!important}
.ba-elsewhere{grid-template-columns:minmax(0,1fr) auto;align-items:center;background:color-mix(in srgb,var(--text) 2.5%,var(--surface))}
.ba-elsewhere .btn .ico{width:15px;height:15px}

/* ---------- refunds & withdrawals ---------- */
.ba-policy{margin:0;font-size:.86rem;padding:10px 12px;border-radius:10px;background:var(--surface2);border:1px dashed var(--line2);color:var(--text)}
.ba-wds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
.ba-wd{display:grid;gap:8px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.ba-wd.open{border-color:var(--ba-warn-line);box-shadow:var(--shadow)}
.ba-wd-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ba-wd-top .dim{margin-left:auto;font-size:.82rem}
.ba-wd .ba-state{text-transform:capitalize}
.ba-confirm ul{margin:6px 0 12px;padding-left:20px;display:grid;gap:6px}
.ba-confirm p{margin:0}
.ba-confirm .bl-note .ico{width:15px;height:15px;vertical-align:-2px}

/* ---------- responsive ---------- */
@media (max-width:1180px){.ba-headwrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1100px){.ba-editor{grid-template-columns:minmax(0,1fr) 300px}.ba-offer{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .ba-editor,.ba-modal-ed{grid-template-columns:minmax(0,1fr)}
  .ba-live{position:static;order:-1}
  .ba-editor .ba-live{order:0}
  .ba-subtools{grid-template-columns:minmax(0,1fr)}
  .ba-sub{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .ba-sub-who{grid-column:1}.ba-sub-paid{grid-column:2;grid-row:1}
  .ba-sub-plan{grid-column:1}.ba-sub-st{grid-column:1}
  .ba-sub-act{grid-column:2;grid-row:2 / span 2;align-self:end}
}
@media (max-width:640px){
  .ba{gap:12px}
  .ba-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ba-kpi{padding:12px}
  .ba-kpi b{font-size:1.3rem}
  .ba-wall{padding:16px;grid-template-columns:auto minmax(0,1fr)}
  .ba-wall-ico{width:40px;height:40px}
  .ba-wall-act .btn{flex:1 1 100%;justify-content:center}
  .ba-alert{flex-wrap:wrap}
  .ba-alert .btn{margin-left:28px}
  .ba-nav{top:var(--ba-sticky-m,56px)}
  .ba-tabs{flex-wrap:nowrap}
  .ba-tabs button span:not(.ba-count){font-size:.84rem}
  .ba-step-b{padding:12px 14px 14px}
  .ba-limit{grid-template-columns:minmax(0,1fr) 92px;row-gap:6px}
  .ba-unl{grid-column:1/-1}
  .ba-code-facts{grid-template-columns:1fr 1fr}
  .ba-mode{grid-template-columns:1fr}
  .ba-num-b{padding-left:0}
  .ba-elsewhere{grid-template-columns:1fr}
  .ba-actions .btn,.ba-ed-bar .btn{flex:1 1 auto;justify-content:center}
  .ba-ed-bar .grow{display:none}
  .ba-ed-bar{position:static;background:none}
  .ba-pager{justify-content:center}
}
.ba-pay td,.ba-pay th{white-space:nowrap}
.ba-pl-head{white-space:nowrap}

/* notify.css */
/* Settings → Notifications: push group; Admin → Business: Push notifications card */
.nt-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nt-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.nt-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.6}
.nt-pill.on{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent);background:color-mix(in srgb,var(--good) 8%,transparent)}
.nt-tip{display:flex;gap:10px;align-items:flex-start;margin:4px 22px 14px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));font-size:.86rem;color:var(--text)}
.nt-tip .ico{flex:none;color:var(--accent);margin-top:2px}
.nt-devs{padding:14px 22px;border-top:1px solid var(--line)}
.nt-devs ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.nt-devs li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.nt-devs li b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.92rem}
.nt-devs li small{display:block;margin-top:2px}
.nt-this{font-size:.72rem;font-weight:600;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.nt-acts{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.nt-admin .card-head{align-items:flex-start}
.nt-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0 12px}
.nt-stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.nt-stat b{font-size:1.4rem;line-height:1.1;color:var(--text)}
.nt-stat span{font-size:.82rem;color:var(--muted)}
.nt-fine{font-size:.84rem;margin:0 0 12px}
@media (max-width:720px){
  .nt-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nt-push .st-row{flex-wrap:wrap}
  .nt-push .st-c{flex:1 1 100%;min-width:0}
  .nt-ctl{justify-content:flex-start;width:100%}
  .nt-ctl .btn{max-width:100%;white-space:normal}
  .nt-devs{padding:12px 16px}
  .nt-tip{margin:4px 16px 12px}
}

/* admin-forms.css */
/* ReconHire: guided admin editors (Broadcasts, Maintenance, Themes).
   A list first, then an editor with numbered steps and a live preview beside it. Matches Admin → Billing.
   Uses the theme variables only, so light and dark mode both work. */
.af{--af-good:#047857;--af-good-bg:color-mix(in srgb,var(--good) 11%,var(--surface));--af-good-line:color-mix(in srgb,var(--good) 35%,transparent);
  --af-warn:#92400e;--af-warn-bg:color-mix(in srgb,#f59e0b 12%,var(--surface));--af-warn-line:color-mix(in srgb,#f59e0b 40%,transparent);
  --af-bad:#b91c1c;--af-bad-bg:color-mix(in srgb,var(--bad) 9%,var(--surface));--af-bad-line:color-mix(in srgb,var(--bad) 35%,transparent);
  --af-info:#1e40af;--af-info-bg:color-mix(in srgb,var(--accent) 8%,var(--surface));--af-info-line:color-mix(in srgb,var(--accent) 30%,transparent);
  display:grid;gap:16px;min-width:0}
html[data-theme="dark"] .af{--af-good:#6ee7b7;--af-warn:#fcd34d;--af-bad:#fca5a5;--af-info:#93c5fd}
.af .card{margin:0}
.af h3{margin:0}
.af .ico{flex:none}

/* ---------- page head + sub tabs ---------- */
.af-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.af-head>div:first-child{flex:1 1 320px;min-width:0}
.af-head h3{font-size:1.2rem;margin:0 0 4px}
.af-head p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5;max-width:760px}
.af-tabs{display:flex;gap:4px;padding:4px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);overflow-x:auto;scrollbar-width:none;max-width:100%}
.af-tabs::-webkit-scrollbar{display:none}
.af-tabs button{display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;padding:9px 14px;border:0;border-radius:10px;background:none;color:var(--muted);font:500 .9rem var(--font);cursor:pointer}
.af-tabs button .ico{width:16px;height:16px;opacity:.8}
.af-tabs button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
.af-tabs button.on{color:var(--text);background:color-mix(in srgb,var(--accent) 12%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.af-tabs button.on .ico{color:var(--accent);opacity:1}
.af-n{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font:600 .72rem/1.4 var(--font);background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted)}
.seg button.on .af-n,.af-tabs button.on .af-n{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--text)}
.af-pane{display:grid;gap:16px;min-width:0}
.af-loading{padding:30px;display:grid;place-items:center}

/* ---------- list ---------- */
.af-bar-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.af-filter{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.af-filter::-webkit-scrollbar{display:none}
.af-filter .seg{flex-wrap:nowrap}
.af-filter .seg button{white-space:nowrap}
.af-list{display:grid;gap:18px}
.af-group{display:grid;gap:8px}
.af-group-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px}
.af-group-h .ico{width:16px;height:16px;color:var(--accent)}
.af-group-h b{font:700 .98rem var(--hfont)}
.af-group-h .af-n{margin-left:0}
.af-group-h small{font-size:.8rem;flex:1 1 200px}
.af-rows{display:grid;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.af-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.af-row:last-child{border-bottom:0}
.af-row:hover{background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
.af-row-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;line-height:1;overflow:hidden;background:color-mix(in srgb,var(--accent) 10%,var(--surface));font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",var(--font)}
.af-row.k-event .af-row-ic{background:color-mix(in srgb,var(--info) 12%,var(--surface))}
.af-row.k-marketing .af-row-ic{background:color-mix(in srgb,var(--accent2) 12%,var(--surface))}
.af-row-ic img{width:100%;height:100%;object-fit:cover}
.af-row-main{display:grid;gap:4px;min-width:0}
.af-row-t{display:flex;align-items:center;gap:8px;min-width:0}
.af-row-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.af-row.s-draft .af-row-t b{font-style:normal}
.af-row-meta{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);min-width:0}
.af-dot{min-width:0;overflow-wrap:anywhere}
.af-row-time{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--dim);min-width:0;flex-wrap:wrap}
.af-row-time .ico{width:13px;height:13px}
.af-row-time span{min-width:0}
.af-row-acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.af-row-acts .btn{padding:6px 10px}
.af-row-acts .btn .ico{width:15px;height:15px}
.af-row.s-canceled{opacity:.75}
.af-kind{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font:600 .72rem/1.4 var(--font);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:color-mix(in srgb,var(--accent) 80%,var(--text))}
.af-kind.k-event{background:color-mix(in srgb,var(--info) 13%,var(--surface));color:color-mix(in srgb,var(--info) 75%,var(--text))}
.af-kind.k-marketing{background:color-mix(in srgb,var(--accent2) 13%,var(--surface));color:color-mix(in srgb,var(--accent2) 78%,var(--text))}
.af-chans{display:inline-flex;gap:4px;flex-wrap:wrap}
.af-chan-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);font-size:.72rem;color:var(--muted)}
.af-chan-chip .ico{width:12px;height:12px}
.af-state{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 9px;border-radius:999px;font:600 .72rem/1.3 var(--font);white-space:nowrap;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted)}
.af-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.af-state.s-sent,.af-state.s-live,.af-state.s-active{background:var(--af-good-bg);color:var(--af-good);box-shadow:inset 0 0 0 1px var(--af-good-line)}
.af-state.s-scheduled,.af-state.s-upcoming{background:var(--af-info-bg);color:var(--af-info);box-shadow:inset 0 0 0 1px var(--af-info-line)}
.af-state.s-sending{background:var(--af-warn-bg);color:var(--af-warn);box-shadow:inset 0 0 0 1px var(--af-warn-line)}
.af-state.s-sending::before{animation:afPulse 1s ease-in-out infinite alternate}
.af-state.s-canceled,.af-state.s-off{background:var(--af-bad-bg);color:var(--af-bad)}
@keyframes afPulse{from{opacity:.3}to{opacity:1}}
.af-stats{display:grid;grid-template-columns:repeat(4,auto);gap:12px;text-align:center}
.af-stats span{display:grid;gap:0;min-width:46px}
.af-stats b{font:700 1rem/1.2 var(--hfont);font-variant-numeric:tabular-nums}
.af-stats small{font-size:.68rem;color:var(--muted);white-space:nowrap}
.af-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:34px 18px;border:1px dashed var(--line2);border-radius:18px;background:var(--surface)}
.af-empty-ic{font-size:30px;line-height:1}
.af-empty h4{margin:0;font:700 1.08rem var(--hfont)}
.af-empty p{margin:0;max-width:460px}

/* ---------- editor ---------- */
.af-ed-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.af-ed-top h3{margin:0;font-size:1.2rem}
.af-back{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line2);border-radius:10px;padding:7px 12px;color:var(--text);font:inherit;font-size:.88rem;cursor:pointer}
.af-back:hover{border-color:var(--accent)}.af-back .ico{width:15px;height:15px}
.af-editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.af-form{display:grid;gap:14px;min-width:0}
.af-panels{display:grid;gap:12px;min-width:0}
/* stepper */
.af-steps{list-style:none;margin:0;padding:5px;display:flex;gap:2px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.af-steps li{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:2px}
.af-steps li+li::before{content:"";flex:none;width:1px;height:18px;background:var(--line)}
.af-steps button{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0;padding:7px 4px;border-radius:10px;border:1px solid transparent;background:none;color:var(--muted);font:600 .82rem var(--font);cursor:pointer}
.af-steps button:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.af-sn{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 .76rem/1 var(--font);color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent)}
.af-sl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-steps button.on{color:var(--text);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.af-steps button.on .af-sn{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.af-steps button.done{color:var(--text)}
.af-steps button.done .af-sn{color:var(--af-good);background:var(--af-good-bg);box-shadow:inset 0 0 0 1px var(--af-good-line);font-size:0}
.af-steps button.done .af-sn::after{content:"✓";font-size:.8rem}
.af-steps button.bad .af-sn{color:var(--af-warn);background:var(--af-warn-bg);box-shadow:inset 0 0 0 1px var(--af-warn-line);font-size:0}
.af-steps button.bad .af-sn::after{content:"!";font-size:.82rem}
/* a step / section */
.af-sec{border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);min-width:0}
.af-sec-h{display:flex;gap:12px;align-items:flex-start;padding:16px 18px 0}
.af-sec-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 .82rem/1 var(--font);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.af-sec-h h4{margin:3px 0 2px;font:700 1.02rem var(--hfont)}
.af-sec-h p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.45}
.af-sec-b{display:grid;gap:12px;padding:14px 18px 18px 58px;min-width:0}
.af-sec-h:not(:has(.af-sec-n))+.af-sec-b{padding-left:18px}
.af-sec-b .field{margin:0}
.af-field.has-err .input{border-color:var(--af-bad-line);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 10%,transparent)}
.af .af-err,.af-err{color:var(--af-bad);font-size:.8rem;font-weight:500}
.af-err:empty{display:none}
.af-in{position:relative;display:block}
.af-in .input{padding-right:70px}
.af-in .af-count{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
.af-count{font-size:.72rem;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.af-count.near{color:var(--af-warn)}
.af-under{gap:8px;align-items:center;flex-wrap:nowrap}
.af-under small.dim{flex:1;min-width:0}
.af-tip{display:flex;gap:8px;align-items:flex-start;margin:0;padding:9px 12px;border-radius:10px;font-size:.85rem;line-height:1.45;background:var(--af-info-bg);border:1px solid var(--af-info-line);color:var(--text)}
.af-tip .ico{width:16px;height:16px;margin-top:2px;color:var(--af-info)}
.af-tip[hidden]{display:none}
.af-link{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.af-link:hover{text-decoration:underline}
.af-dim{opacity:.55}
.af-subsec{display:grid;gap:10px;padding-top:12px;border-top:1px dashed var(--line2)}
.af-subh{font-size:.9rem}
/* type cards */
.af-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.af-type{display:grid;gap:4px;align-content:start;justify-items:start;text-align:left;padding:14px;border-radius:14px;border:1.5px solid var(--line2);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.af-type:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-1px)}
.af-type.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.af-type:disabled{cursor:not-allowed}.af-type:disabled:not(.on){opacity:.5}
.af-type-ic{font-size:26px;line-height:1;margin-bottom:4px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",var(--font)}
.af-type b{font:700 1rem var(--hfont)}
.af-type small{color:var(--muted);font-size:.8rem;line-height:1.4}
.af-type-who{display:flex;gap:6px;align-items:flex-start;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line2);font-size:.76rem;line-height:1.4;color:var(--muted)}
.af-type-who .ico{width:13px;height:13px;margin-top:2px}
/* option cards (now / later) */
.af-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px}
.af-opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;text-align:left;padding:12px;border-radius:12px;border:1.5px solid var(--line2);background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.af-opt .ico{grid-row:1/3;width:20px;height:20px;color:var(--muted)}
.af-opt small{color:var(--muted);font-size:.8rem;line-height:1.35}
.af-opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.af-opt.on .ico{color:var(--accent)}
.af-opt:disabled{cursor:not-allowed;opacity:.55}
.af-when{margin:0;font-size:.86rem;padding:9px 12px;border-radius:10px;background:var(--af-info-bg);border:1px solid var(--af-info-line)}
.af-when:empty{display:none}
/* channel cards */
.af-chans-pick{display:grid;gap:8px}
.af-chan{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line2);background:var(--surface);cursor:pointer}
.af-chan:has(input:checked){border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.af-chan:has(input:disabled){cursor:not-allowed;opacity:.7}
.af-chan input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.af-chan-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--muted)}
.af-chan:has(input:checked) .af-chan-ic{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}
.af-chan-ic .ico{width:17px;height:17px}
.af-chan-t{display:grid;gap:1px;min-width:0}
.af-chan-t small{color:var(--muted);font-size:.8rem;line-height:1.35}
.af-chan-n{font:700 .95rem var(--hfont);color:var(--accent);font-variant-numeric:tabular-nums}
/* reach */
.af-reach{display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);transition:opacity .2s}
.af-reach.busy{opacity:.6}
.af-reach-row{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:8px;align-items:end}
.af-reach-row div{display:grid}
.af-reach-row b{font:700 1.2rem/1.2 var(--hfont);color:var(--accent);font-variant-numeric:tabular-nums}
.af-reach-row .big b{font-size:1.6rem;background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.af-reach-row small{font-size:.74rem;color:var(--muted)}
.af-reach-note{display:flex;gap:6px;align-items:flex-start;font-size:.8rem;color:var(--muted);line-height:1.4}
.af-reach-note .ico{width:14px;height:14px;margin-top:2px}
/* collapsible rules / extras */
details.af-rules,details.af-more{border:1px solid var(--line2);border-radius:12px;background:color-mix(in srgb,var(--text) 2%,transparent)}
details.af-rules>summary,details.af-more>summary{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;font-weight:600;font-size:.9rem;list-style:none}
details.af-rules>summary::-webkit-details-marker,details.af-more>summary::-webkit-details-marker{display:none}
details.af-rules>summary::after,details.af-more>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);transition:transform .15s;flex:none}
details.af-rules[open]>summary::after,details.af-more[open]>summary::after{transform:rotate(-135deg)}
details.af-rules>summary .ico,details.af-more>summary .ico{width:16px;height:16px;color:var(--accent)}
details.af-rules>summary small,details.af-more>summary small{font-weight:400}
details.af-rules ul{margin:0;padding:0 16px 14px 34px;display:grid;gap:6px;font-size:.86rem;line-height:1.5;color:var(--muted)}
details.af-rules ul b{color:var(--text)}
details.af-rules ol{margin:0;padding:0 16px 14px 34px;display:grid;gap:10px;font-size:.88rem;line-height:1.5}
.af-more-b{display:grid;gap:10px;padding:0 14px 14px}
.af-newcode{margin-top:0}
/* review */
.af-sum{display:grid;margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.af-sum-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--line);font-size:.88rem}
.af-sum-row:last-child{border-bottom:0}
.af-sum-row:nth-child(odd){background:color-mix(in srgb,var(--text) 2%,transparent)}
.af-sum dt{color:var(--muted);font-size:.8rem}
.af-sum dd{margin:0;min-width:0;overflow-wrap:anywhere}
.af-issue-box{display:grid;gap:6px;padding:12px 14px;border-radius:12px;background:var(--af-warn-bg);border:1px solid var(--af-warn-line)}
.af-issue-box>b{display:flex;align-items:center;gap:6px;color:var(--af-warn)}
.af-issue-box>b .ico{width:16px;height:16px}
.af-issue-box ul{margin:0;padding-left:22px;display:grid;gap:4px;font-size:.86rem}
.af-ok-box{display:flex;gap:8px;align-items:center;padding:11px 14px;border-radius:12px;background:var(--af-good-bg);border:1px solid var(--af-good-line);font-size:.88rem}
.af-ok-box .ico{width:16px;height:16px;color:var(--af-good)}
/* sticky action bar */
.af-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:sticky;bottom:0;z-index:3;padding:12px 0;background:linear-gradient(0deg,var(--bg) 72%,transparent)}
.af-bar .grow{flex:1}
.af-saved{font-size:.8rem;color:var(--dim)}
.af-saved.warn{color:var(--af-warn)}
.af-bar .btn .ico{width:16px;height:16px}

/* ---------- live preview panel ---------- */
.af-live{position:sticky;top:84px;display:grid;gap:12px;padding:16px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface2)),var(--surface2));min-width:0}
.af-live-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.af-kick{font:600 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.af-live-tog{display:none;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:600 .8rem var(--font);cursor:pointer}
.af-live-tog .ico{width:14px;height:14px}
.af-live-seg{display:flex;width:100%}
.af-live-seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 6px;font-size:.78rem;position:relative;white-space:nowrap}
.af-live-seg button .ico{width:14px;height:14px}
.af-live-seg .af-off{display:none}
.af-live-seg button.is-off{opacity:.55}
.af-live-seg button.is-off span{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--text) 40%,transparent)}
.af-live-b{display:grid;gap:10px;min-width:0}
.af-pv-l{font:600 .72rem var(--font);color:var(--muted)}
.af-pv-note{margin:0;font-size:.8rem;color:var(--muted);line-height:1.45}
.af-pv-frame{padding:10px;border-radius:14px;background:var(--bg);border:1px solid var(--line);min-width:0}
.af-pv-frame .ann-banner{margin:0;pointer-events:none}
.af-pv-frame .ann-banner{padding:12px}
.af-pv-frame .ann-code{display:flex;flex-wrap:wrap;border-radius:10px;gap:2px 6px;line-height:1.35;padding:6px 10px}
.af-pv-ad .ad-card{margin:0;pointer-events:none}
/* notification list */
.af-nt{border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.af-nt-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);font-size:.86rem}
.af-nt-h small{font-size:.74rem}
.af-nt-i{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.af-nt-i:last-child{border-bottom:0}
.af-nt-i.new{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.af-nt-i>div{display:grid;gap:4px;min-width:0}
.af-nt-i b{font-size:.86rem;line-height:1.35;font-weight:600;overflow-wrap:anywhere}
.af-nt-i small{font-size:.74rem}
.af-nt-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:17px;background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.af-nt-ic.ph,.af-ph{background:color-mix(in srgb,var(--text) 7%,transparent)}
.af-ph{display:block;height:8px;border-radius:4px}
.af-nt-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* message bubble */
.af-dm{border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.af-dm-h{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.af-dm-h>div{display:grid;line-height:1.25}.af-dm-h b{font-size:.88rem}.af-dm-h small{font-size:.72rem}
.af-dm-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--text)}
.af-dm-av .logo{width:20px;height:20px}
.af-dm-b{display:grid;gap:6px;justify-items:start;padding:12px}
.af-dm-txt{max-width:92%;padding:10px 12px;border-radius:4px 14px 14px 14px;background:color-mix(in srgb,var(--text) 6%,var(--surface));font-size:.84rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.af-dm-b>small{font-size:.7rem}
.af-dm-pics{display:grid;gap:4px;max-width:92%;border-radius:12px;overflow:hidden}
.af-dm-pics.n2,.af-dm-pics.n3,.af-dm-pics.n4{grid-template-columns:1fr 1fr}
.af-dm-pics img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
/* email */
.af-mail{border-radius:14px;background:#f4f6fb;border:1px solid var(--line);overflow:hidden;color:#0f172a}
.af-mail-meta{display:grid;gap:2px;padding:10px 12px;background:var(--surface);border-bottom:1px solid var(--line);color:var(--text);font-size:.8rem}
.af-mail-meta>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px;align-items:baseline}
.af-mail-meta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-mail-c{margin:12px;padding:18px 16px;border-radius:12px;background:#ffffff;border:1px solid rgba(15,23,42,.08);display:grid;gap:10px;position:relative;overflow:hidden}
.af-mail-c::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#2563eb,#7c3aed)}
.af-mail-k{font:600 .62rem 'Courier New',monospace;letter-spacing:.14em;text-transform:uppercase;color:#d97706}
.af-mail-c h4{margin:0;font:700 1.05rem/1.25 Arial,Helvetica,sans-serif;color:#0f172a;overflow-wrap:anywhere}
.af-mail-img{width:100%;border-radius:8px;display:block}
.af-mail-t{font:13px/1.55 Arial,Helvetica,sans-serif;color:#334155;overflow-wrap:anywhere}
.af-mail-t p{margin:0 0 8px}.af-mail-t p:last-child{margin:0}
.af-mail-t a{color:#2563eb}
.af-mail-code{display:grid;gap:2px;padding:10px 12px;border-radius:10px;border:1px dashed #2563eb;background:#eff4ff;font:13px Arial,sans-serif}
.af-mail-code small{font-size:.68rem;color:#64748b}.af-mail-code b{font-size:1.05rem;color:#1e3a8a;letter-spacing:.05em}.af-mail-code span{color:#334155}
.af-mail-x{margin:0;font:12px Arial,sans-serif;color:#64748b}
.af-mail-btn{justify-self:start;display:inline-block;padding:10px 18px;border-radius:10px;background:#d97706;color:#fff;font:700 13px Arial,sans-serif}
.af-mail-f{padding:0 14px 12px;font:11px/1.5 Arial,sans-serif;color:#64748b;text-align:center}

/* ---------- maintenance ---------- */
.af-mt-status{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:18px 20px;border-radius:var(--radius);border:1px solid var(--af-good-line);background:linear-gradient(160deg,var(--af-good-bg),var(--surface) 70%);box-shadow:var(--shadow)}
.af-mt-status.on{border:2px solid transparent;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)) 0 18px,color-mix(in srgb,var(--accent) 4%,var(--surface)) 18px 36px) padding-box,linear-gradient(135deg,var(--accent),var(--accent2)) border-box}
.af-mt-status.sched{border-color:var(--af-info-line);background:linear-gradient(160deg,var(--af-info-bg),var(--surface) 70%)}
.af-mt-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:#fff;background:var(--good)}
.af-mt-status.on .af-mt-ic{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.af-mt-status.sched .af-mt-ic{background:var(--info)}
.af-mt-txt{display:grid;gap:2px;min-width:0}
.af-mt-txt b{font:700 1.15rem var(--hfont)}
.af-mt-txt small{font-size:.86rem;color:var(--muted);line-height:1.45}
.af-mt-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.af-mt-sw{font-weight:700}
.af-mt-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* the maintenance / 404 page, drawn small */
.af-browser{border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:var(--surface);box-shadow:var(--shadow)}
.af-browser-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;background:color-mix(in srgb,var(--text) 5%,var(--surface));border-bottom:1px solid var(--line)}
.af-browser-bar i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--text) 18%,transparent)}
.af-browser-bar span{flex:1;margin-left:6px;padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:11px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-mtp{padding:18px 14px;color:#0f172a;font:13px/1.6 "IBM Plex Sans",system-ui,sans-serif;background:#f4f6fb;background-image:radial-gradient(500px 260px at 15% -10%,rgba(37,99,235,.14),transparent 70%),radial-gradient(400px 240px at 100% 0,rgba(124,58,237,.10),transparent 70%),linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);background-size:auto,auto,24px 24px,24px 24px}
.af-mtp-brand{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 .95rem "Chakra Petch",var(--font)}
.af-mtp-brand .logo{width:24px;height:24px;color:#0f172a}
.af-mtp-brand span{color:#2563eb}
.af-mtp-c{position:relative;overflow:hidden;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:14px;padding:18px 16px 16px;box-shadow:0 18px 40px -26px rgba(15,23,42,.4)}
.af-mtp-c::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#2563eb,#7c3aed)}
.af-mtp-k{font:600 .6rem ui-monospace,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:#2563eb;margin:0 0 6px}
.af-mtp-big{font:800 3rem/.9 "Chakra Petch",var(--font);margin:0 0 4px;background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.af-mtp h4{font:700 1.15rem/1.2 "Chakra Petch",var(--font);margin:0 0 8px;color:#0f172a;overflow-wrap:anywhere}
.af-mtp p{margin:0 0 8px;color:#334155;overflow-wrap:anywhere}
.af-mtp p a{color:#2563eb}
.af-mtp-term{font:11px/1.6 ui-monospace,Menlo,monospace;color:#9ba7bd;background:#0b1220;border-radius:10px;padding:8px 10px;margin:10px 0}
.af-mtp-term b{color:#3ddc84}.af-mtp-term i{font-style:normal;color:#60a5fa}
.af-mtp-cd{display:flex;gap:6px;margin:10px 0 4px}
.af-mtp-cd div{flex:1;text-align:center;background:#f3f6fc;border:1px solid rgba(37,99,235,.25);border-radius:10px;padding:6px 4px}
.af-mtp-cd b{display:block;font:700 1.2rem "Chakra Petch",var(--font);color:#2563eb;font-variant-numeric:tabular-nums}
.af-mtp-cd small{font:600 .52rem ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#9ba7bd}
.af-mtp-eta{font-size:.78rem;color:#64748b;margin:2px 0 0}
.af-mtp-u{margin:10px 0 0;padding:8px 10px;border-left:3px solid #2563eb;background:#f3f6fc;border-radius:0 8px 8px 0;font-size:.8rem;color:#334155;white-space:pre-line;overflow-wrap:anywhere}
.af-mtp-a{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.af-mtp-a span{display:inline-flex;align-items:center;padding:7px 12px;border-radius:9px;font:700 12px system-ui,sans-serif;border:1px solid rgba(15,23,42,.16);color:#0f172a;background:#fff}
.af-mtp-a span.p{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border:0}
.af-mtp-f{margin-top:8px;text-align:center;font-size:.68rem;color:#64748b}
.af-mt-bar{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:8px 12px;border-radius:10px;font-size:.8rem;text-align:center;background:repeating-linear-gradient(135deg,color-mix(in srgb,#f59e0b 22%,var(--surface)) 0 12px,color-mix(in srgb,#f59e0b 12%,var(--surface)) 12px 24px);border:1px solid var(--af-warn-line)}
.af-mt-bar u{color:var(--accent)}
.af-timeline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:.84rem;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.af-timeline i{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--accent)}
.af-timeline i.end{background:var(--good)}
.af-timeline span{min-width:0}

/* ---------- themes ---------- */
.af-th-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.af-th-groups{display:grid;gap:18px;min-width:0}
.af-th-list{display:grid;gap:6px}
details.af-fold>summary{list-style:none;cursor:pointer;display:block}
details.af-fold>summary::-webkit-details-marker{display:none}
details.af-fold>summary .af-group-h::after{content:"Show";margin-left:auto;font-size:.78rem;font-weight:600;color:var(--accent)}
details.af-fold[open]>summary .af-group-h::after{content:"Hide"}
details.af-fold[open]>summary{margin-bottom:8px}
.af-th-row{display:grid;grid-template-columns:6px 38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px 8px 0;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.af-th-row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.af-th-row.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.af-th-row.off{opacity:.62}
.af-th-row:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.af-th-strip{align-self:stretch;margin:-8px 0}
.af-th-em{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px;line-height:1;background:color-mix(in srgb,var(--text) 5%,transparent);font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",var(--font)}
.af-th-main{display:grid;gap:3px;min-width:0}
.af-th-main .af-row-t b{font-size:.95rem}
.af-th-meta{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.af-th-greet{font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px;color:var(--dim)}
.af-th-acts{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.af-th-acts .btn{padding:6px 10px}
.af-th-acts .switch{font-size:.8rem}
.af-th-pick{display:grid;gap:10px}
.af-th-pick-acts{display:flex;gap:8px;flex-wrap:wrap}
.af-th-pick-acts .btn{flex:1 1 auto;justify-content:center}
/* the contained theme preview (a tiny ReconHire page) */
.af-thv{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;border:1px solid var(--line2);background:var(--bg);color:var(--text);min-height:250px;box-shadow:var(--shadow)}
.af-thv::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(400px 200px at 12% -8%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),radial-gradient(380px 220px at 100% 0%,color-mix(in srgb,var(--season1,var(--accent)) 18%,transparent),transparent 70%),radial-gradient(360px 220px at 50% 110%,color-mix(in srgb,var(--season3,var(--accent2)) 12%,transparent),transparent 70%)}
.af-thv-pat{position:absolute;inset:0;z-index:-1;pointer-events:none}
.af-thv-line{height:3px;background:var(--season-line,linear-gradient(90deg,var(--accent),var(--accent2)));box-shadow:0 0 10px color-mix(in srgb,var(--season1,var(--accent)) 60%,transparent)}
.af-thv-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,var(--season1,transparent) 10%,transparent),transparent 40%,transparent 60%,color-mix(in srgb,var(--season3,transparent) 10%,transparent))}
.af-thv-logo{position:relative;display:inline-flex;align-items:center;gap:6px;font:700 .82rem "Chakra Petch",var(--font)}
.af-thv-logo .logo{width:20px;height:20px}
.af-thv-logo em{position:absolute;left:12px;top:-8px;font-style:normal;font-size:12px;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.af-thv-logo span{color:var(--accent)}
.af-thv-nav{margin-left:auto;display:flex;gap:6px}
.af-thv-nav i{width:22px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.af-thv-nav i:first-child{background:var(--accent)}
.af-thv-bar{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:44px;padding:8px 30px;font-size:.76rem;text-align:center;
  background:linear-gradient(100deg,color-mix(in srgb,var(--season1,var(--accent)) 34%,var(--bg)),color-mix(in srgb,var(--season2,var(--accent)) 14%,var(--bg)) 50%,color-mix(in srgb,var(--season3,var(--accent2)) 34%,var(--bg)));border-bottom:2px solid color-mix(in srgb,var(--season1,var(--accent)) 60%,transparent)}
.af-thv-bar b{font:700 .9rem var(--hfont);text-shadow:0 0 14px color-mix(in srgb,var(--season1,var(--accent)) 70%,transparent)}
.af-thv-bar .se-ic{font-size:14px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.af-thv-bar .se-msg{color:var(--muted)}
.af-thv-bar .se-go{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--season1,var(--accent)) 85%,#000);color:#fff;font-weight:600;white-space:nowrap}
.af-thv-bar .se-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}
.af-thv-bar .se-art{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:flex;gap:3px;font-size:16px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.af-thv-bar .se-art.r{left:auto;right:26px}
.af-thv-body{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:12px}
.af-thv-side,.af-thv-card{border-radius:10px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);padding:8px;display:grid;gap:6px;align-content:start}
.af-thv-av{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--text) 12%,transparent);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--season1,var(--accent))}
.af-thv-main{display:grid;gap:8px}
.af-thv-card i{display:block;height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.af-thv-card i.a{width:50%;background:var(--accent);height:8px}
.af-thv-card i.s{width:70%}
.af-thv-none{padding:14px;font-size:.82rem;color:var(--muted);text-align:center}
.af-th-sw{display:inline-flex;gap:3px}.af-th-sw i{width:12px;height:12px;border-radius:4px;border:1px solid var(--line2)}
/* theme editor bits */
.af-cols{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.af-col{position:relative}
.af-col input[type=color]{width:46px;height:38px;padding:2px;border:1px solid var(--line2);border-radius:10px;background:none;cursor:pointer}
.af-col .ck-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font-size:12px;line-height:1;cursor:pointer;display:none}
.af-col:hover .ck-x,.af-col:focus-within .ck-x{display:block}
.af-presets{display:flex;gap:6px;flex-wrap:wrap}
.af-presets button{display:inline-flex;gap:2px;padding:4px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);cursor:pointer}
.af-presets button:hover{border-color:var(--accent)}
.af-presets button i{width:12px;height:16px;border-radius:3px}
.af-emo-in{width:72px!important;text-align:center;font-size:20px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.af-pats{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.af-pats button{display:grid;gap:4px;justify-items:center;padding:8px 6px;border-radius:10px;border:1.5px solid var(--line2);background:var(--surface);color:var(--text);font:500 .78rem var(--font);cursor:pointer}
.af-pats button span{font-size:18px;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.af-pats button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.af-dates{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.af-dates .input{width:110px}

/* ---------- responsive ---------- */
@media (max-width:1180px){.af-editor,.af-th-layout{grid-template-columns:minmax(0,1fr) 320px}.af-stats{grid-template-columns:repeat(2,auto);gap:4px 12px}}
@media (max-width:1000px){
  .af-row{grid-template-columns:44px minmax(0,1fr) auto}
  .af-row .af-stats{grid-column:2/-1;grid-row:2;justify-content:start;grid-template-columns:repeat(4,auto)}
  .af-row .af-row-acts{grid-column:3;grid-row:1}
}
@media (max-width:900px){
  .af-editor,.af-th-layout{grid-template-columns:minmax(0,1fr)}
  .af-live{position:static;order:-1;padding:12px 14px}
  .af-live-tog{display:inline-flex}
  .af-live:not(.open)>:not(.af-live-h){display:none}
  .af-types{grid-template-columns:minmax(0,1fr)}
  .af-type{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .af-type-ic{grid-row:1/3;margin:0}
  .af-type-who{grid-column:1/-1}
  .af-th-layout .af-live{order:0}
}
@media (max-width:640px){
  .af{gap:12px}
  .af-row{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px}
  .af-row-ic{width:40px;height:40px}
  .af-row .af-stats{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;border-radius:10px;background:color-mix(in srgb,var(--text) 3%,transparent)}
  .af-row .af-row-acts{grid-column:1/-1;grid-row:auto;justify-content:flex-start}
  .af-row-acts .btn span{display:none}
  .af-row-acts .btn{padding:7px 9px}
  .af-row-t{flex-wrap:wrap}
  .af-row-t b{white-space:normal}
  .af-sec-h{padding:14px 14px 0}
  .af-sec-b{padding:12px 14px 14px}
  .af-steps .af-sl{display:none}
  .af-steps li:has(button.on){flex:2.4 1 0}
  .af-steps button.on .af-sl{display:inline}
  .af-reach-row{grid-template-columns:repeat(3,1fr)}
  .af-reach-row .big{grid-column:1/-1}
  .af-chan{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:10px 12px}
  .af-chan-ic{display:none}
  .af-sum-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  .af-sum-row dt{grid-column:1}
  .af-sum-row dd{grid-column:1}
  .af-sum-row>:last-child{grid-column:2;grid-row:1/3;align-self:center}
  .af-bar{position:sticky;padding:10px 0;gap:8px}
  .af-bar .grow{display:none}
  .af-bar .af-saved{order:5;flex:1 1 100%;text-align:center}
  .af-bar .btn{flex:1 1 auto;justify-content:center}
  .af-mt-status{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .af-mt-acts{grid-column:1/-1;justify-content:flex-start}
  .af-mt-grid2{grid-template-columns:1fr}
  .af-th-row{grid-template-columns:5px 36px minmax(0,1fr);gap:10px}
  .af-th-acts{grid-column:2/-1;justify-content:flex-start}
  .af-th-em{width:36px;height:36px}
  .af-tabs button{padding:8px 11px;font-size:.84rem}
  .af-under{flex-wrap:wrap}
}
/* grids never grow wider than the admin column (long chips and the filter scroll inside instead) */
.af,.af-pane,.af-list,.af-group,.af-rows,.af-panels,.af-form,.af-th-groups,.af-th-list,.af-live,.af-live-b,.af-sec-b{grid-template-columns:minmax(0,1fr)}
.af-bar-top>.af-filter{flex:1 1 220px}
@media (max-width:640px){.af-bar-top>.btn{flex:1 1 100%;justify-content:center}.af-row-meta{gap:4px 8px}}
.af-row-time{flex-wrap:nowrap;align-items:flex-start}.af-row-time .ico{margin-top:2px}.af-row-time span{flex:1}
/* phones: the app's bottom tab bar sits where a sticky bar would, so the actions stay in the page flow */
@media (max-width:640px){.af-bar{position:static;background:none;padding:6px 0 0}}
/* Users → Assign role dialog */
.ar{display:grid;gap:10px;min-width:min(520px,86vw)}
.ar-list{display:grid;gap:8px}
.ar-opt{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface)}
.ar-opt:hover{border-color:var(--line2)}
.ar-opt:has(input:checked){border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 7%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.ar-opt input{margin-top:4px;flex:none}
.ar-txt{display:grid;gap:2px;min-width:0}
.ar-txt b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ar-txt b .chip{font-size:.7rem;padding:1px 8px}
.ar-txt small{font-size:.82rem;line-height:1.45}
.ar-meta{color:var(--muted);font-size:.76rem!important}
.ar-opt.is-admin:has(input:checked){border-color:color-mix(in srgb,var(--bad) 55%,transparent);background:color-mix(in srgb,var(--bad) 6%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 12%,transparent)}
.ar-warn{display:flex;gap:8px;align-items:flex-start;margin:0;padding:9px 12px;border-radius:10px;font-size:.84rem;background:color-mix(in srgb,var(--bad) 9%,transparent);border:1px solid color-mix(in srgb,var(--bad) 28%,transparent)}
.ar-warn[hidden]{display:none}
.ar-warn .ico{width:16px;height:16px;flex:none;color:var(--bad);margin-top:2px}
.ar-link{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;justify-self:start}
.ar-link .ico{width:14px;height:14px}
@media (min-width:760px){.ar{min-width:min(720px,88vw)}.ar-list{grid-template-columns:1fr 1fr}.ar-opt{padding:10px 12px}}
.modal:has(.ar){width:min(780px,100%)}
.ar{min-width:0!important}

/* adspace.css */
/* ReconHire: Admin → Ad space (overview, review queue, campaigns, house ads, placements, pricing & rules, AdSense).
   Builds on the Billing admin look (billing-admin.css: .ba-kpi, .ba-tabs, .ba-step, .ba-live …). Theme variables only, so dark mode works. */
.as .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.as .ba-kpi.good small{color:var(--ba-good)}
.as .ba-kpi.warn{border-color:var(--ba-warn-line);background:var(--ba-warn-bg)}
.as .ba-alert>.btn{flex:none}

/* ---------- thumbnails and real-size previews ---------- */
.as-thumb{flex:none;width:180px;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--text) 4%,var(--surface2));border:1px solid var(--line);pointer-events:none;align-self:start}
.as-thumb-in{width:300px;zoom:.6}
.as-thumb.wide .as-thumb-in{width:468px;zoom:.3846}
.as-thumb .card.ad-card{margin:0!important;box-shadow:none;border:0}
.as-real{margin:0;display:grid;gap:6px;min-width:0;pointer-events:none}
.as-real figcaption{font:600 .72rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.as-real-in{min-width:0}
.as-real.s-card .as-real-in{width:min(100%,300px)}
.as-real.s-banner .as-real-in{width:min(100%,728px)}
.as-real.s-half .as-real-in{width:min(100%,468px)}
.as-real .card.ad-card{margin:0!important}
.as-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center;padding:14px;border-radius:16px;background:color-mix(in srgb,var(--text) 3%,var(--surface2));border:1px dashed var(--line2)}
.as-vs .as-real:last-child figcaption{color:var(--accent)}
.as-vs-arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.as-vs-arrow .ico{width:16px;height:16px}

/* ---------- review queue ---------- */
.as-rv{display:grid;gap:14px;border-left:4px solid #f59e0b}
.as-rv.edit{border-left-color:var(--accent)}
.as-rv-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.as-rv-who{display:grid;gap:2px;min-width:0;flex:1}
.as-rv-who b{font:700 1.05rem/1.3 var(--hfont);overflow-wrap:anywhere}
.as-rv-who small{overflow-wrap:anywhere}
.as-rv-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.as-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0;padding:12px 14px;border-radius:14px;background:var(--surface2);border:1px solid var(--line)}
.as-facts dt{font-size:.72rem;color:var(--muted);margin:0 0 2px}
.as-facts dd{margin:0;font-size:.88rem;overflow-wrap:anywhere}
.as-facts a{color:var(--accent)}
.as-rv-side{display:grid;gap:8px;min-width:0}
.as-decide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding-top:12px;border-top:1px solid var(--line)}
.as-decide textarea.as-note{margin:0;min-height:0;height:64px;resize:vertical}
.as-decide-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.as-ro{margin:0;font-size:.85rem}

/* ---------- campaigns ---------- */
.as-filter{display:grid;gap:10px}
.as-search{display:flex;align-items:center;gap:8px;margin:0;max-width:460px;padding:0 12px;border:1px solid var(--line2);border-radius:12px;background:var(--surface)}
.as-search>.ico{width:16px;height:16px;flex:none;color:var(--muted)}
.as-search .input{flex:1;min-width:0;margin:0;border:0;background:none;box-shadow:none;padding:10px 0}
.as-search:focus-within{border-color:var(--accent)}
.as-filter .ba-chips{margin:0}
.as-filter .ba-chips .chip{display:inline-flex;align-items:center;background:var(--surface)}
.as-filter .ba-chips .chip.on{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--text)}
.as-list{display:grid;gap:10px}
.as-row{display:grid;grid-template-columns:180px minmax(0,1fr) auto;grid-template-areas:"pic main perf" "pic acts acts";gap:8px 16px;align-items:start;margin:0}
.as-row>.as-thumb{grid-area:pic}
.as-row>.as-acts{grid-area:acts}
.as-row-main{grid-area:main;display:grid;gap:5px;min-width:0}
.as-row-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.as-row-t b{font-size:1rem;overflow-wrap:anywhere}
.as-row-main>small{overflow-wrap:anywhere}
.as-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted)}
.as-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere}
.as-meta .ico{width:14px;height:14px;flex:none;opacity:.8}
.as-why{display:flex;gap:6px;align-items:flex-start;color:var(--ba-bad);font-size:.82rem}
.as-why .ico{width:14px;height:14px;flex:none;margin-top:2px}
.as-perf{grid-area:perf;display:grid;grid-template-columns:repeat(3,auto);gap:2px 14px;text-align:right;align-content:start}
.as-perf div{display:grid}
.as-perf b{font:700 1.05rem/1.2 var(--hfont);font-variant-numeric:tabular-nums}
.as-perf span{font-size:.72rem;color:var(--muted)}
.as-perf small{grid-column:1/-1;font-size:.74rem}
.as-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.as-row.st-removed,.as-row.st-ended{background:color-mix(in srgb,var(--text) 2.5%,var(--surface))}
.as-row.st-removed .as-thumb,.as-row.st-ended .as-thumb{opacity:.55;filter:grayscale(.6)}
.ba-state.s-paused,.ba-state.s-ended{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted)}
.ba-state.s-warn{background:var(--ba-warn-bg);color:var(--ba-warn);box-shadow:inset 0 0 0 1px var(--ba-warn-line)}
.ba-state.s-bad{background:var(--ba-bad-bg);color:var(--ba-bad);box-shadow:inset 0 0 0 1px var(--ba-bad-line)}

/* ---------- house ads ---------- */
.as-fill .switch{flex:none}
.as-hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:14px;align-items:start}
.as-hcard{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;gap:12px;margin:0;align-content:start}
.as-hcard.off .as-hprev{opacity:.55;filter:grayscale(.5)}
.as-hprev{display:grid;place-items:center;padding:14px;border-radius:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 6%,var(--surface2)),var(--surface2));border:1px solid var(--line);min-height:150px}
.as-hprev .as-thumb{width:min(100%,240px);border:0;background:none}
.as-hprev .as-thumb.tall .as-thumb-in{zoom:.8}
.as-hprev .as-thumb.wide{width:100%}
.as-hprev .as-thumb.wide .as-thumb-in{zoom:.6}
.as-hbody{display:grid;gap:6px;min-width:0}
.as-hperf{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem;color:var(--muted)}
.as-hperf b{color:var(--text);font-variant-numeric:tabular-nums}
.as-hcard .as-acts{padding-top:10px;border-top:1px solid var(--line)}
.as-del{margin-left:auto}
.as-del .ico{width:16px;height:16px}

/* ---------- placements ---------- */
.as-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.as-slot{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start;margin:0;transition:opacity .15s}
.as-slot.off .as-map{filter:grayscale(1);opacity:.5}
.as-slot.off .as-slot-t b{color:var(--muted)}
.as-slot-b{display:grid;gap:6px;min-width:0}
.as-slot-t{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.as-slot-t b{font-size:.98rem;line-height:1.3}
.as-slot-t .switch{flex:none;margin:0}
.as-slot-b>small{font-size:.78rem;line-height:1.4}
.as-sizes{display:flex;flex-wrap:wrap;gap:5px}
.as-size{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:.74rem;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.as-size i,.as-shapes i{display:inline-block;border-radius:2px;background:linear-gradient(135deg,var(--accent),var(--accent2));flex:none}
.as-size i.sz-card{width:10px;height:10px}.as-size i.sz-banner{width:18px;height:5px}.as-size i.sz-half{width:12px;height:5px}
.as-slot-f{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;white-space:nowrap;font-size:.82rem;padding-top:6px;border-top:1px dashed var(--line2)}
/* little page map: header bar, columns, and the ad space lit up */
.as-map{width:120px;height:88px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);overflow:hidden;display:grid;grid-template-rows:12px 1fr}
.as-map-top{display:flex;align-items:center;gap:3px;padding:0 6px;background:color-mix(in srgb,var(--text) 8%,var(--surface))}
.as-map-top i{width:4px;height:4px;border-radius:50%;background:color-mix(in srgb,var(--text) 25%,transparent)}
.as-map-body{display:flex;gap:4px;padding:5px}
.as-map .c{display:flex;flex-direction:column;gap:3px;min-width:0}
.as-map .c.main{flex:2.2}.as-map .c.side{flex:1}.as-map .c.side.wide{flex:1.5}
.as-map .c i{display:block;height:8px;border-radius:2px;background:color-mix(in srgb,var(--text) 10%,var(--surface))}
.as-map .c.main i{height:9px}
.as-map .c i.ad{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent);animation:as-glow 2.4s ease-in-out infinite}
.as-map.m-rail .c.side i.ad{height:18px}
.as-map.m-center .c.main{justify-content:center;align-items:center;background:color-mix(in srgb,var(--text) 4%,var(--surface));border-radius:4px}
.as-map.m-center .c.main i.ad{width:70%;height:22px}
.as-map.m-bottom .c.main i.strip,.as-map.m-public .c.main i.strip{margin-top:auto;height:12px}
.as-map.m-public{border-style:dashed}
@keyframes as-glow{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}}
@media (prefers-reduced-motion:reduce){.as-map .c i.ad{animation:none}}

/* ---------- pricing & rules ---------- */
.as-price-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:start}
.as-price-side{display:grid;gap:16px;min-width:0}
.as-rates{display:grid;gap:6px}
.as-rate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);cursor:text}
.as-rate:focus-within{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.as-rate.off{opacity:.65}
.as-rate-n{display:grid;min-width:0}
.as-rate-n b{font-size:.9rem;font-weight:600}
.as-rate-n small{font-size:.74rem}
.as-rate-in{display:inline-flex;align-items:center;gap:6px}
.as-rate-in i{font-style:normal;color:var(--muted)}
.as-rate-in .input{width:96px;margin:0;padding:7px 10px;text-align:right;font-variant-numeric:tabular-nums}
.as-rate-in small{font-size:.76rem;color:var(--muted);white-space:nowrap}
.as-len{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.as-len .field{margin:0}
.as-unit{display:flex;align-items:center;gap:6px}
.as-unit .input{margin:0;min-width:0}
.as-unit small{color:var(--muted);font-size:.8rem}
.as-ex{overflow-x:auto}
.as-ex-t{width:100%;font-size:.86rem}
.as-ex-t td,.as-ex-t th{white-space:nowrap;padding-left:8px;padding-right:8px}
.as-ex-t td small{display:block;font-size:.74rem;color:var(--muted)}
.as-ex-t .as-save{margin-left:6px}
.as-ex-t tr.na td{color:var(--muted)}
.as-ex-t b{font-variant-numeric:tabular-nums}
.as-save{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.76rem;font-weight:600;background:var(--ba-good-bg);color:var(--ba-good);box-shadow:inset 0 0 0 1px var(--ba-good-line)}
.as-ex-card .ba-pick{min-width:150px}
.as-rules{font:.86rem/1.55 var(--mono);min-height:240px}

/* ---------- AdSense ---------- */
.as-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.as-stat{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);min-width:0}
.as-stat>.ico{width:20px;height:20px;flex:none}
.as-stat.ok>.ico{color:var(--ba-good)}.as-stat.no>.ico{color:var(--ba-warn)}
.as-stat div{display:grid;min-width:0}
.as-stat small{font-size:.76rem;color:var(--muted)}
.as-stat b{font-size:.92rem;overflow-wrap:anywhere}

/* ---------- guided editor ---------- */
.modal-bg.wide .modal.as-modal{width:min(1080px,96vw);max-width:none}
.as-editor{grid-template-columns:minmax(0,1fr) 360px}
.as-fmts{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.as-fmts button,.as-shapes button{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:inherit;font-size:.86rem;cursor:pointer;text-align:left}
.as-fmts button .ico{width:16px;height:16px;color:var(--muted);flex:none}
.as-fmts button:hover,.as-shapes button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2))}
.as-fmts button.on,.as-shapes button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 0 0 0 1px var(--accent)}
.as-fmts button.on .ico{color:var(--accent)}
.as-shapes{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.as-shapes button{display:grid;grid-template-columns:34px auto minmax(0,1fr);gap:10px;align-items:center}
.as-shapes button i{justify-self:center}
.as-shapes i.sz-card{width:22px;height:18px}.as-shapes i.sz-banner{width:30px;height:7px}.as-shapes i.sz-half{width:20px;height:7px}
.as-shapes small{font-size:.74rem;color:var(--muted);line-height:1.3}
.as-places{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 12px}
.as-live{max-height:calc(100vh - 160px);overflow:auto}
.as-modal .as-live{position:sticky;top:0}
.as-live-list{display:grid;gap:14px}
.as-live-item{display:grid;gap:6px;padding:10px;border-radius:14px;border:1px solid transparent;transition:border-color .15s,background .15s}
.as-live-item.on{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.as-live-l{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.84rem}
.as-live-ad{pointer-events:none;min-width:0}
.as-live-item.s-card .as-live-ad{max-width:300px}
.as-live-ad .card.ad-card{margin:0!important}

/* ---------- small screens ---------- */
@media (max-width:1100px){.as-price-grid{grid-template-columns:minmax(0,1fr)}.as-editor{grid-template-columns:minmax(0,1fr)}.as-modal .as-live{position:static;max-height:none}}
@media (max-width:860px){
  .as-rv-grid{grid-template-columns:minmax(0,1fr)}
  .as-row{grid-template-columns:120px minmax(0,1fr);grid-template-areas:"pic main" "perf perf" "acts acts"}
  .as-row>.as-thumb{width:120px}.as-row .as-thumb-in{zoom:.4}.as-row .as-thumb.wide .as-thumb-in{zoom:.2564}
  .as-perf{text-align:left;justify-content:start;padding-top:6px;border-top:1px dashed var(--line2)}
}
@media (max-width:640px){
  .as-vs{grid-template-columns:minmax(0,1fr);justify-items:stretch}
  .as-vs-arrow{transform:rotate(90deg);justify-self:center}
  .as-decide{grid-template-columns:minmax(0,1fr)}
  .as-decide-btns{justify-content:stretch}.as-decide-btns .btn{flex:1 1 auto;justify-content:center}
  .as-facts{gap:8px 12px}
  .as-rv-who{flex-basis:100%}
  .as-len{grid-template-columns:minmax(0,1fr)}
  .as-stats{grid-template-columns:minmax(0,1fr)}
  .as-slot{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .as-map{width:96px;height:72px}
  .as .ba-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as .ba-kpi b{font-size:1.3rem}
  .as .ba-step-b,.as-modal .ba-step-b{padding-left:16px}
}

/* messaging.css */
/* ReconHire Messaging: the LinkedIn-style page (one wide card: header, filter pills, list | conversation, plus a right
   rail), the conversation list, the conversation view, reactions, typing, game cards, sponsored messages and the docked
   messenger. Colors come from the theme variables so dark mode just works. */
.mx,.mx-dock,.mc{--mx-me:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,var(--accent2)));--mx-them:color-mix(in srgb,var(--text) 6.5%,var(--surface));--mx-p1:var(--accent);--mx-p2:#f59e0b;--mx-soft:color-mix(in srgb,var(--accent) 8%,transparent);--mx-star:#e8a400;--mx-otw:#16a34a;--mx-hover:color-mix(in srgb,var(--text) 4.5%,transparent);--mx-sel:color-mix(in srgb,var(--accent) 10%,var(--surface))}
html[data-theme="dark"] .mx,html[data-theme="dark"] .mx-dock,html[data-theme="dark"] .mc{--mx-them:color-mix(in srgb,var(--text) 10%,var(--surface));--mx-p2:#fbbf24;--mx-star:#fbbf24;--mx-otw:#22c55e;--mx-hover:color-mix(in srgb,var(--text) 6%,transparent);--mx-sel:color-mix(in srgb,var(--accent) 16%,var(--surface))}

/* ---------- page shell: card + right rail ---------- */
.mx-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.mx-rail{position:sticky;top:90px;display:grid;gap:14px;min-width:0}
.mx-rail .ad-card{margin:0}
@media (min-width:1101px){body:has(.mx-rail .rail-foot) .foot-app{display:none}}
@media (max-width:1100px){.mx-layout{grid-template-columns:minmax(0,1fr)}.mx-rail{display:none}}
.card.mx-card{display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:14px;height:calc(100dvh - 150px);min-height:440px;min-width:0}
.mx-top{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);flex:none}
.mx-title{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;flex:none}
.mx-search{position:relative;flex:0 1 320px;min-width:0;display:flex;align-items:center;margin:0}
.mx-search>.ico{position:absolute;left:11px;width:16px;height:16px;color:var(--dim);pointer-events:none}
.mx-q{width:100%;height:34px;padding:0 12px 0 34px;border-radius:8px;border:1px solid transparent;background:color-mix(in srgb,var(--text) 6%,var(--surface));color:var(--text);font:inherit;font-size:.88rem;outline:none;transition:border-color .15s,background .15s}
.mx-q::placeholder{color:var(--dim)}
.mx-q:focus{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.mx-top-act{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.mx-top-act .icon-btn,.mx-compose{width:36px;height:36px;border-radius:50%}
.mx-compose:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.mx-pills{flex:none;padding:10px 16px;border-bottom:1px solid var(--line)}
.mx-panes{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
.mx-side{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0}
.mx-conv{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface);position:relative}
.mx .mc-head{background:var(--surface);backdrop-filter:none}
.mx .mc-scroll{background:color-mix(in srgb,var(--bg) 35%,var(--surface))}

/* ---------- filter pills ---------- */
.mt{display:flex;flex-direction:column;min-height:0;flex:1}
.mt-searchrow{position:relative;margin:8px 14px 6px}
.mt-searchrow>.ico{position:absolute;left:11px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.mt-searchrow input.input.mt-search{width:100%;max-width:none;padding-left:34px;border-radius:999px;background:color-mix(in srgb,var(--text) 5%,transparent);border-color:transparent;height:36px}
.mt-searchrow input.input.mt-search:focus{background:var(--surface);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.mt-chips{display:flex;align-items:center;gap:6px;padding:4px 14px 8px;overflow-x:auto;scrollbar-width:none}
.mt-chips::-webkit-scrollbar{display:none}
.mx-pills .mt-chips{padding:0;gap:8px}
.mt-chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font:600 .84rem var(--font);cursor:pointer;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.mt-chip:hover{color:var(--text);border-color:var(--text);background:var(--mx-hover)}
.mt-chip:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.mt-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.mt-chip.on:hover{background:color-mix(in srgb,var(--accent) 88%,#000);color:var(--on-accent,#fff)}
.mt-chip em{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center}
.mt-chip em.soft{background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--muted)}
.mt-chip.on em{background:var(--on-accent,#fff);color:var(--accent)}
.mt-drop .ico{width:14px;height:14px;margin-right:-4px}
.mt-drop-dot{width:8px;height:8px;border-radius:50%;background:#e5484d;flex:none}
.mt-chip.on .mt-drop-dot{background:#fff}
.mt-sep{flex:none;width:1px;height:22px;background:var(--line2);margin:0 2px}
.mx-boxpop{display:grid;gap:2px;padding:6px;width:min(310px,calc(100vw - 24px))}
.mx-boxopt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);cursor:pointer;font:inherit}
.mx-boxopt:hover,.mx-boxopt:focus-visible{background:var(--mx-hover,color-mix(in srgb,var(--text) 6%,transparent));outline:none}
.mx-boxopt-t{flex:1;min-width:0;display:grid;gap:2px}
.mx-boxopt-t b{display:inline-flex;align-items:center;gap:6px;font-size:.92rem}
.mx-boxopt-t small{font-size:.76rem;color:var(--muted);line-height:1.35}
.mx-boxopt em{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font-size:.68rem;display:inline-grid;place-items:center}
.mx-boxopt>.ico{width:18px;height:18px;color:var(--accent);flex:none}

/* ---------- conversation list ---------- */
.mt-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:2px 8px 10px;overscroll-behavior:contain;scrollbar-width:none}
.mt-list::-webkit-scrollbar{display:none}
.mt-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:14px;color:var(--text);cursor:pointer;outline:none;transition:background .15s}
.mt-row:hover{background:var(--mx-hover,color-mix(in srgb,var(--text) 4.5%,transparent))}
.mt-row:focus-visible{box-shadow:inset 0 0 0 2px var(--accent2)}
.mt-row.on{background:var(--mx-sel,color-mix(in srgb,var(--accent) 11%,transparent))}
.mt-row.on::before{content:"";position:absolute;left:-8px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--accent),var(--accent2))}
.mt-b{flex:1;min-width:0;display:grid;gap:2px}
.mt-top{display:flex;align-items:center;gap:8px;min-width:0}
.mt-name{display:flex;align-items:center;gap:4px;min-width:0;flex:1;font-size:.93rem;font-weight:600}
.mt-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-name .tbadge,.mt-name .vbadges{flex:none}
.mt-tag{flex:none;font:700 .62rem var(--font);letter-spacing:.03em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:2px 6px;border-radius:5px}
.mt-when{flex:none;font-size:.74rem;color:var(--dim)}
.mt-hl{font-size:.78rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-sub{display:flex;align-items:center;gap:6px;min-width:0}
.mt-prev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem;color:var(--muted)}
.mt-row.unread .mt-name{font-weight:800}.mt-row.unread .mt-prev{color:var(--text);font-weight:600}.mt-row.unread .mt-when{color:var(--accent);font-weight:700}
.mt-count{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#e5484d;color:#fff;font:700 .7rem/20px var(--font);text-align:center;animation:mx-pop .3s ease}
.mt-udot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.mt-pin,.mt-star{flex:none;color:var(--dim);display:inline-flex}.mt-pin .ico,.mt-star .ico{width:13px;height:13px}
.mt-star{color:var(--mx-star)}.mt-star .ico{fill:currentColor}
.mt-spon{font-weight:600;color:var(--dim)}
/* hover quick actions: star, archive, mark unread, more */
.mt-quick{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .15s;z-index:1}
.mt-row:hover .mt-quick,.mt-row:focus-within .mt-quick{opacity:1;pointer-events:auto}
.mt-row:hover .mt-when,.mt-row:focus-within .mt-when{visibility:hidden}
.mt-q,.mt-quick .icon-btn{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.mt-q:hover,.mt-quick .icon-btn:hover{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.mt-q .ico,.mt-quick .icon-btn .ico{width:17px;height:17px}
.mt-q.on{color:var(--mx-star)}.mt-q.on .ico{fill:currentColor}
/* the page list: flat rows with dividers, big photos */
.mt.big .mt-list{padding:0}
.mt.big .mt-row{border-radius:0;padding:12px 16px;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line)}
.mt.big .mt-row.on::before{left:0;top:0;bottom:0;border-radius:0}
.mt.big .mt-b{padding-top:2px;gap:1px}
.mt.big .mt-row.sup{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.mt.big .mt-row.sup.on{background:var(--mx-sel)}
.mt.big .mx-av.sup{width:56px;height:56px;border-radius:50%}
.mt.big .mx-av.sup .ico{width:24px;height:24px}
.mt.big .mt-empty{padding:40px 20px}
.mt-row.sup:not(.on){margin-bottom:0}
.mt-empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:28px 18px;color:var(--muted);font-size:.88rem}
.mt-empty>span{font-size:28px}.mt-empty p{margin:0;max-width:280px}
.mt-skel{display:grid;gap:4px;padding:4px}
.mt-sk{display:flex;gap:12px;align-items:center;padding:8px}
.mt-sk i{width:48px;height:48px;border-radius:50%;flex:none}
.mt-sk span{display:grid;gap:6px;flex:1}.mt-sk b{height:11px;width:55%;border-radius:6px}.mt-sk em{height:9px;width:80%;border-radius:6px}
.mt-sk i,.mt-sk b,.mt-sk em{background:linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent),color-mix(in srgb,var(--text) 11%,transparent),color-mix(in srgb,var(--text) 6%,transparent));background-size:200% 100%;animation:mx-shim 1.3s linear infinite}
.mt.big .mt-skel{padding:8px 12px}.mt.big .mt-sk i{width:56px;height:56px}
.mt.compact .mt-searchrow{margin:8px 10px 4px}
.mt.compact .mt-chips{padding:2px 10px 6px;gap:4px}
.mt.compact .mt-chip{height:26px;padding:0 10px;font-size:.74rem}
.mt.compact .mt-chip em{min-width:16px;height:16px;font-size:.62rem}
.mt.compact .mt-list{padding:0 6px 6px}
.mt.compact .mt-row{padding:8px;gap:10px;border-radius:12px}
.mt.compact .mt-name{font-size:.87rem}.mt.compact .mt-prev{font-size:.79rem}
.mt-row.sup{background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* avatar with online dot, open-to-work ring and brand avatars for sponsored messages */
.mx-av{position:relative;display:inline-flex;flex:none;border-radius:50%}
.mx-dot{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:50%;background:#22c55e;border:2.5px solid var(--surface);z-index:2;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:mx-ping 2.6s ease-out infinite}
.mt.compact .mx-dot{width:12px;height:12px}
.mx-av.otw::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid transparent;border-left-color:var(--mx-otw);border-bottom-color:var(--mx-otw);transform:rotate(-10deg);pointer-events:none;z-index:1}
.mx-av.sup{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px -8px var(--accent)}
.mx-av.sup .ico{width:21px;height:21px}
.mx-av.sup.sm{width:28px;height:28px;border-radius:9px}.mx-av.sup.sm .ico{width:14px;height:14px}
.mx-av.sup.big{width:72px;height:72px;border-radius:22px}.mx-av.sup.big .ico{width:32px;height:32px}
.mt.compact .mx-av.sup{width:40px;height:40px;border-radius:12px}
.mx-brand{display:grid;place-items:center;overflow:hidden;border-radius:12px;background:var(--surface2,var(--surface));border:1px solid var(--line2);color:var(--accent);font-family:var(--hfont)}
.mx-brand img{width:100%;height:100%;object-fit:cover}
.mx-brand b{font-weight:800}
.mx-brand .ico{width:50%;height:50%}
.mx-brand.house{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),color-mix(in srgb,var(--accent2) 14%,var(--surface)))}
.mx-brand .mx-brand-logo,.mx-brand svg{width:62%;height:62%}

/* ---------- messages_inline: the "Promoted" native card ---------- */
.mi-ad-hold{padding:4px 2px;animation:mx-fade .4s ease}
.mi-ad{position:relative;display:grid;gap:6px;padding:10px 10px 10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),color-mix(in srgb,var(--accent2) 5%,var(--surface)));overflow:hidden}
.mi-ad::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--accent),var(--accent2))}
.mi-ad-l{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.mi-ad-tag{display:inline-flex;align-items:center;gap:5px;font:700 .6rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mi-ad-sp{font-size:.72rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-ad-in{display:flex;align-items:center;gap:10px;color:var(--text);min-width:0}
.mi-ad-in:hover{text-decoration:none}
.mi-ad-th{width:44px;height:44px;flex:none;border-radius:11px;overflow:hidden;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--accent);font:700 1.1rem var(--hfont)}
.mi-ad-th img,.mi-ad-th video{width:100%;height:100%;object-fit:cover}.mi-ad-th .ico{width:20px;height:20px}
.mi-ad-b{flex:1;min-width:0;display:grid;gap:1px}
.mi-ad-b b{font-size:.87rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-ad-b small{font-size:.77rem;color:var(--muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mi-ad-cta{flex:none;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent);font:600 .74rem var(--font);transition:background .15s,color .15s}
.mi-ad-cta .ico{width:12px;height:12px}
.mi-ad-in:hover .mi-ad-cta{background:var(--accent);color:var(--on-accent,#fff)}
.mi-ad.strip{padding:8px}.mi-ad-stripl{display:block;line-height:0;border-radius:9px;overflow:hidden}
.mi-ad-strip{width:100%;height:60px;object-fit:cover;display:block}
.mi-ad-card{margin:0}
.mt.compact .mi-ad-cta{padding:0 8px}.mt.compact .mi-ad-b small{-webkit-line-clamp:1}
.mc-adrow{align-self:center;width:min(440px,92%);margin:10px 0}
.mc-adrow .mi-ad-hold{padding:0}
.mc.compact .mc-adrow{width:100%}
.mi-ad.preview{max-width:360px}

/* ---------- conversation ---------- */
.mc{display:flex;flex-direction:column;min-height:0;height:100%;flex:1;min-width:0}
.mc-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);position:relative;z-index:2}
.mc-hav{display:inline-flex;flex:none}.mc-hav a{display:inline-flex}
.mc-who{flex:1;min-width:0;display:grid;gap:1px}
.mc-name{display:flex;align-items:center;gap:5px;min-width:0;color:var(--text);font-weight:700;font-size:1rem}
.mc-name:hover{text-decoration:none}.mc-name:hover .mc-nm{text-decoration:underline;text-underline-offset:3px}
.mc-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-sub{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0}
.mc-sub-on{display:inline-flex;align-items:center;gap:6px;color:#16a34a;font-weight:600}.mc-sub-on i{width:8px;height:8px;border-radius:50%;background:#22c55e}
html[data-theme="dark"] .mc-sub-on{color:#4ade80}
.mc-sub-typing{color:var(--accent);font-weight:600}
.mc-tools{display:flex;align-items:center;gap:6px;flex:none}
.mc-back{display:none!important}
.mc-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 18px 8px;scroll-behavior:auto}
.mc-feed{display:flex;flex-direction:column;gap:2px}
.mc-loading{display:grid;place-items:center;padding:40px}
.mc-day{display:flex;align-items:center;gap:12px;margin:14px 0 10px;font:600 .7rem var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.mc-day::before,.mc-day::after{content:"";flex:1;height:1px;background:var(--line)}
.mc-day span{padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.mc-row{position:relative;display:flex;align-items:flex-end;gap:8px;max-width:100%}
.mc-row.mine{flex-direction:row-reverse}
.mc-row.first{margin-top:8px}
.mc-av{width:30px;flex:none;display:flex;align-items:flex-end}
.mc-stack{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:min(560px,74%)}
.mc-row.mine .mc-stack{align-items:flex-end}
.mc-row.game .mc-stack{max-width:min(420px,88%)}
.mc .cm{max-width:100%;gap:3px}
.mc .cm-time{display:none}
.mc .cm-bub{background:var(--mx-them);border-radius:20px;padding:9px 14px;font-size:.93rem;box-shadow:0 1px 1px rgba(15,23,42,.04)}
.mc .cm.mine .cm-bub{background:var(--mx-me);color:var(--on-accent,#fff);box-shadow:0 6px 18px -12px var(--accent)}
.mc-row.theirs:not(.first) .cm-bub{border-top-left-radius:6px}.mc-row.theirs:not(.last) .cm-bub{border-bottom-left-radius:6px}
.mc-row.mine:not(.first) .cm-bub{border-top-right-radius:6px}.mc-row.mine:not(.last) .cm-bub{border-bottom-right-radius:6px}
.mc-row.theirs.last .cm-bub{border-bottom-left-radius:6px}.mc-row.mine.last .cm-bub{border-bottom-right-radius:6px}
.mc-row.first.last .cm-bub{border-radius:20px}.mc-row.theirs.first.last .cm-bub{border-bottom-left-radius:6px}.mc-row.mine.first.last .cm-bub{border-bottom-right-radius:6px}
.cm-bub.removed{display:inline-flex;align-items:center;gap:6px;font-style:italic;color:var(--dim)!important;background:transparent!important;border:1px dashed var(--line2);box-shadow:none!important}
.cm-bub.removed .ico{width:14px;height:14px}
.mc .cm-emoji{font-size:2.6rem;animation:mx-bounce .5s ease}
.mc .cm-link{background:var(--surface)}
.mc-meta{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--dim);padding:3px 6px 0}
.mc-seen{display:inline-flex;align-items:center;gap:2px;color:var(--accent);font-weight:600}.mc-seen .ico{width:12px;height:12px}
.mc-row.in{animation:mx-in .32s cubic-bezier(.2,.9,.3,1.2)}
.mc-row.mine.in{transform-origin:bottom right}.mc-row.theirs.in{transform-origin:bottom left}
/* hover actions */
.mc-acts{display:flex;align-items:center;gap:2px;align-self:center;opacity:0;transition:opacity .15s;flex:none}
.mc-row:hover .mc-acts,.mc-row:focus-within .mc-acts{opacity:1}
.mc-act,.mc-acts .icon-btn{width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--dim);display:grid;place-items:center;cursor:pointer}
.mc-act:hover,.mc-acts .icon-btn:hover{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.mc-act .ico,.mc-acts .icon-btn .ico{width:17px;height:17px}
@media (hover:none){.mc-acts{opacity:.7}}
/* reactions */
.mc-rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:-4px;padding:0 8px;position:relative;z-index:1}
.mc-rx-c{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 7px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);cursor:pointer;font-size:.86rem;line-height:1;box-shadow:0 2px 6px -3px rgba(15,23,42,.25);animation:mx-pop .25s ease}
.mc-rx-c small{font:700 .7rem var(--font);color:var(--muted)}
.mc-rx-c.mine{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.mc-rx-c.mine small{color:var(--accent)}
.mc-rx-c:hover{transform:translateY(-1px)}
.rx-pop{display:flex;gap:2px;padding:5px;border-radius:999px}
.rx-e{width:38px;height:38px;border:0;border-radius:50%;background:transparent;font-size:22px;cursor:pointer;transition:transform .12s,background .12s;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.rx-e:hover{transform:scale(1.25) translateY(-2px);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.rx-e.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
/* typing */
.mc-typing{display:flex;align-items:center;gap:8px;padding:8px 0 4px 38px;color:var(--dim);font-size:.76rem;animation:mx-fade .25s ease}
.mc-dots{display:inline-flex;gap:3px;padding:9px 12px;border-radius:16px;background:var(--mx-them)}
.mc-dots i{width:6px;height:6px;border-radius:50%;background:var(--dim);animation:mx-dot 1.2s infinite ease-in-out}
.mc-dots i:nth-child(2){animation-delay:.15s}.mc-dots i:nth-child(3){animation-delay:.3s}
/* first message / hello */
.mc-hello{display:grid;justify-items:center;gap:6px;text-align:center;padding:36px 16px 18px;color:var(--muted)}
.mc-hello b{color:var(--text);font:700 1.1rem var(--hfont)}.mc-hello p{margin:0;max-width:340px;font-size:.88rem}
/* gate + composer */
.mc-gate{padding:0 16px}.mc-gate:empty{display:none}.mc-gate .chat-gate{margin-top:8px}
.mc-foot{padding:10px 16px 14px}
.mc-foot .chat-row{border-radius:22px;background:var(--surface);box-shadow:0 4px 18px -12px rgba(15,23,42,.35)}
.mc-foot .chat-send{border-radius:16px;background:var(--mx-me);border:0}
.chat-tool.game-t{color:var(--accent2)}
.chat-tool.game-t:hover{background:color-mix(in srgb,var(--accent2) 14%,transparent);color:var(--accent2)}


/* ---------- empty right pane ---------- */
.mx-none{margin:auto;display:grid;justify-items:center;text-align:center;gap:8px;padding:24px;max-width:440px;max-height:100%;overflow-y:auto;scrollbar-width:none}
.mx-none::-webkit-scrollbar{display:none}
.mx-none h3{margin:4px 0 0;font-size:1.2rem;line-height:1.3}
.mx-none p{margin:0 0 6px;max-width:340px;font-size:.9rem}
.mx-none-art{position:relative;width:132px;height:110px;margin-bottom:2px;transform:scale(.85)}
.mx-none-art span{position:absolute;display:grid;place-items:center;border-radius:22px;box-shadow:0 14px 30px -14px var(--accent);font-size:30px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.mx-none-art .b1{left:18px;top:8px;width:84px;height:70px;background:var(--mx-me);border-bottom-left-radius:6px;animation:mx-float 4s ease-in-out infinite}
.mx-none-art .b2{right:0;bottom:4px;width:52px;height:46px;background:var(--surface);border:1px solid var(--line2);font-size:22px;border-bottom-right-radius:6px;animation:mx-float 4s ease-in-out -1.5s infinite}
.mx-none-art .b3{left:0;bottom:0;width:40px;height:36px;background:var(--surface);border:1px solid var(--line2);font-size:18px;border-radius:14px;animation:mx-float 4s ease-in-out -2.5s infinite}
.mx-none .btn{border-radius:999px}
.mx-none-f{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.mx-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:.76rem;color:var(--muted);background:var(--surface);border:1px solid var(--line)}
@media (max-height:700px){.mx-none-art{display:none}}

/* ---------- sponsored message view ---------- */
.mx-spon .mc-scroll{padding:0}
.sp-wrap{max-width:640px;margin:0 auto;padding:8px 20px 16px}
.sp-hero{display:grid;justify-items:center;text-align:center;gap:4px;padding:22px 12px 22px;border-bottom:1px solid var(--line)}
.sp-hero>.mx-brand{margin-bottom:6px;border-radius:16px}
.sp-brand{font-size:1.02rem}
.sp-when{color:var(--dim);font-size:.78rem}
.sp-title{margin:10px 0 2px;font-size:1.2rem;line-height:1.3;max-width:460px;color:var(--text)}
.sp-hero .sp-cta{margin-top:12px;border-radius:999px;padding-left:22px;padding-right:22px}
.sp-cta .ico,.sp-acts .ico{width:14px;height:14px}
.sp-media{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px;margin-top:16px;border:1px solid var(--line)}
.sp-card{margin:16px 0 0!important}
.sp-msg{display:flex;gap:10px;padding:18px 0 4px}
.sp-msg-av{flex:none}
.sp-msg-b{flex:1;min-width:0}
.sp-msg-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.sp-msg-h b{font-size:.92rem}.sp-msg-h small{font-size:.74rem;color:var(--dim)}
.sp-text{margin:6px 0 12px;padding:10px 14px;border-radius:4px 18px 18px 18px;background:var(--mx-them);white-space:pre-line;font-size:.92rem;line-height:1.5;overflow-wrap:anywhere}
.sp-text:empty{display:none}
.sp-acts{display:flex;flex-wrap:wrap;gap:8px}
.sp-acts .btn{border-radius:999px}
.sp-foot{flex:none;display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--dim);background:var(--surface)}
.sp-foot .ico{width:15px;height:15px;flex:none}
.mx-spon.compact .sp-wrap{padding:4px 12px 12px}
.mx-spon.compact .sp-hero{padding:14px 6px 16px}
.mx-spon.compact .sp-title{font-size:1rem}
.mx-spon.compact .sp-foot{padding:8px 10px;font-size:.74rem}
.mc-star.on{color:var(--mx-star)}.mc-star.on .ico{fill:currentColor}
.mc-sub-hl{color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis}

/* ---------- new message picker ---------- */
.mp{display:grid;gap:10px;min-width:min(440px,82vw)}
.mp-list{display:grid;gap:2px;max-height:380px;overflow:auto}
.mp-row{display:flex;align-items:center;gap:12px;padding:8px 10px;border:0;border-radius:12px;background:none;color:var(--text);text-align:left;cursor:pointer}
.mp-row:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.mp-empty{margin:8px;font-size:.86rem}
.dock-pick .mp{min-width:0;gap:6px}.dock-pick .mp .input{height:34px}.dock-pick .mp-list{max-height:220px}
.dock-pick-h{display:flex;align-items:center;justify-content:space-between}

/* ---------- games ---------- */
.gm-pick{width:min(360px,calc(100vw - 24px));padding:12px}
.gm-pick-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px 10px}
.gm-pick-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gm-tile{display:grid;justify-items:start;gap:2px;padding:12px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.gm-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 10px 24px -16px var(--accent)}
.gm-tile-ic{font-size:24px;line-height:1;margin-bottom:4px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.gm-tile b{font-size:.88rem}.gm-tile small{font-size:.74rem;color:var(--muted);line-height:1.3}
.gm{width:100%;min-width:260px;border-radius:18px;border:1px solid var(--line2);background:var(--surface);box-shadow:0 10px 30px -20px rgba(15,23,42,.45);overflow:hidden;transition:opacity .15s}
.gm.my-turn{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent),0 12px 30px -18px var(--accent)}
.gm.busy{opacity:.65;pointer-events:none}
.gm-h{display:flex;align-items:center;gap:10px;padding:10px 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),color-mix(in srgb,var(--accent2) 9%,var(--surface)));border-bottom:1px solid var(--line)}
.gm-ic{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);font-size:18px;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.gm-t{flex:1;min-width:0;display:grid;line-height:1.2}.gm-t b{font-size:.9rem}.gm-t small{font-size:.72rem;color:var(--muted)}
.gm-st{flex:none;font:700 .72rem var(--font);padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted);white-space:nowrap}
.gm-st.go{background:var(--accent);color:var(--on-accent,#fff);animation:mx-glow 1.8s ease-in-out infinite}
.gm-st.win{background:color-mix(in srgb,#22c55e 18%,transparent);color:#15803d}
.gm-st.lose{background:color-mix(in srgb,#e5484d 14%,transparent);color:#c0262d}
.gm-st.draw{background:color-mix(in srgb,var(--accent2) 14%,transparent);color:var(--accent2)}
html[data-theme="dark"] .gm-st.win{color:#4ade80}html[data-theme="dark"] .gm-st.lose{color:#fca5a5}
.gm-b{padding:12px;display:grid;gap:10px;justify-items:center}
.gm-b:empty{display:none}
.gm-note{margin:0;font-size:.84rem;color:var(--muted);text-align:center}
.gm-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:0 12px 12px}
.gm-f:empty{display:none}
.gm-resign{color:var(--dim)}
.gm-wrap{display:grid;justify-items:center;gap:8px}
.gm-legend{font-size:.74rem;color:var(--muted);display:inline-flex;align-items:center;gap:4px;white-space:pre}
/* tic-tac-toe */
.gm-ttt{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);gap:6px;padding:6px;border-radius:16px;background:color-mix(in srgb,var(--text) 5%,transparent)}
.gm-cell{border:0;border-radius:12px;background:var(--surface);display:grid;place-items:center;font:700 2rem var(--hfont);cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.08);transition:transform .12s,background .12s}
.gm-cell:disabled{cursor:default}
.gm-cell:not(:disabled):hover{background:color-mix(in srgb,var(--accent) 9%,var(--surface));transform:scale(1.04)}
.gm-cell .gm-ghost{opacity:0;color:var(--dim);transition:opacity .12s}.gm-cell:not(:disabled):hover .gm-ghost{opacity:.35}
.gm-cell.mX span{color:var(--accent)}.gm-cell.mO span{color:var(--mx-p2)}
.gm-cell.mine span,.gm-cell.theirs span{animation:mx-stamp .28s cubic-bezier(.2,.9,.3,1.4)}
.gm-cell.win{background:color-mix(in srgb,#22c55e 20%,var(--surface));box-shadow:0 0 0 2px #22c55e inset}
.gm-cell.last:not(.win){box-shadow:0 0 0 2px color-mix(in srgb,var(--accent2) 45%,transparent) inset}
/* connect four */
.gm-c4{display:grid;grid-template-columns:repeat(7,38px);gap:4px;padding:8px;border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 80%,#0b1530),color-mix(in srgb,var(--accent2) 70%,#0b1530))}
.gm-col{display:grid;grid-template-rows:repeat(6,34px);gap:4px;padding:2px;border:0;border-radius:10px;background:transparent;cursor:pointer;transition:background .12s}
.gm-col:disabled{cursor:default}
.gm-col:not(:disabled):hover{background:rgba(255,255,255,.14)}
.gm-disc{display:block;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,#020617 45%,transparent);box-shadow:inset 0 3px 6px rgba(0,0,0,.35)}
.gm-disc.d1{background:radial-gradient(circle at 35% 30%,#93c5fd,#2563eb 60%,#1e40af);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.gm-disc.d2{background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 60%,#b45309);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.gm-disc.last{animation:mx-drop .45s cubic-bezier(.3,1.3,.5,1)}
.gm-disc.win{box-shadow:0 0 0 3px #fff,0 0 14px 2px rgba(255,255,255,.7)}
.gm-key{display:inline-block;width:12px;height:12px;border-radius:50%}
.gm-key.d1{background:#2563eb}.gm-key.d2{background:#f59e0b}
/* rock paper scissors */
.gm-rps{display:grid;justify-items:center;gap:10px;width:100%}
.gm-score{display:flex;align-items:center;gap:14px}
.gm-score span{display:grid;justify-items:center;line-height:1.1}.gm-score b{font:700 1.8rem var(--hfont)}.gm-score small{font-size:.72rem;color:var(--muted)}
.gm-score i{font-style:normal;font:700 1.4rem var(--hfont);color:var(--dim)}
.gm-rounds{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.gm-round{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:1rem;border:1px solid var(--line2);font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.gm-round small{font:600 .62rem var(--font);color:var(--dim)}
.gm-round.win{border-color:#22c55e;background:color-mix(in srgb,#22c55e 10%,transparent)}.gm-round.lose{border-color:#e5484d;background:color-mix(in srgb,#e5484d 8%,transparent)}
.gm-rps-pick{display:flex;gap:8px}
.gm-rps-b{display:grid;justify-items:center;gap:2px;width:76px;padding:10px 4px 8px;border-radius:16px;border:1px solid var(--line2);background:var(--surface);cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.gm-rps-b span{font-size:30px;line-height:1;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
.gm-rps-b small{font-size:.72rem;color:var(--muted)}
.gm-rps-b:hover{transform:translateY(-3px) rotate(-3deg);border-color:var(--accent);box-shadow:0 10px 20px -14px var(--accent)}
/* trivia */
.gm-tv{display:grid;gap:10px;width:100%}
.gm-dots{display:flex;justify-content:center;gap:6px}
.gm-dots i{width:22px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.gm-dots i.ok{background:#22c55e}.gm-dots i.no{background:#e5484d}.gm-dots i.cur{background:var(--accent);animation:mx-glow 1.6s infinite}
.gm-fb{margin:0;text-align:center;font-size:.8rem;font-weight:600;animation:mx-fade .25s ease}
.gm-fb.ok{color:#16a34a}.gm-fb.no{color:#c0262d}
html[data-theme="dark"] .gm-fb.ok{color:#4ade80}html[data-theme="dark"] .gm-fb.no{color:#fca5a5}
.gm-q{display:grid;gap:3px;text-align:left}.gm-q small{font:600 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.gm-q b{font-size:.92rem;line-height:1.35}
.gm-opts{display:grid;gap:6px}
.gm-opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);color:var(--text);text-align:left;font-size:.85rem;cursor:pointer;transition:border-color .12s,background .12s}
.gm-opt:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.gm-opt.picked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.gm-opt-k{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font:700 .74rem var(--font);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.gm-tv-scores{display:grid;gap:4px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--text) 4%,transparent)}
.gm-tv-s{display:flex;justify-content:space-between;align-items:center;font-size:.84rem}
.gm-tv .btn{justify-self:center}

/* ---------- the docked messenger ---------- */
.mx-dock{border-radius:18px 18px 0 0;box-shadow:0 -12px 40px -16px rgba(15,23,42,.45),0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)}
.mx-dock .dock-head{padding:9px 10px 9px 12px}
.mx-dock .dock-panel{height:min(520px,64vh)}
.mx-dock .mini-ad{border-top:1px solid var(--line)}
.mx-dock .dock-pick{padding:8px 10px;border-bottom:1px solid var(--line);max-height:300px}
.dock.mx-dock.chatting{width:380px}
.mx-dock .mc.dock-chat{flex:none;height:min(560px,calc(100vh - 140px));border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 50%,var(--surface))}
.mc.compact .mc-head{padding:8px 10px;gap:8px}
.mc.compact .mc-back{display:grid!important}
.mc.compact .mc-name{font-size:.9rem}.mc.compact .mc-sub{font-size:.72rem}
.mc.compact .mc-tools .icon-btn{width:30px;height:30px}
.mc.compact .mc-scroll{padding:10px 10px 4px}
.mc.compact .mc-av{width:26px}
.mc.compact .mc-stack{max-width:82%}
.mc.compact .mc-row.game .mc-stack{max-width:100%;width:100%}
.mc.compact .mc-row.game .mc-av{display:none}
.mc.compact .cm-bub{font-size:.86rem;padding:8px 12px}
.mc.compact .cm-att,.mc.compact .cm-link{max-width:230px}
.mc.compact .mc-acts{position:absolute;top:-6px;z-index:2;background:var(--surface);border-radius:999px;box-shadow:var(--shadow)}
.mc.compact .mc-row.theirs .mc-acts{right:0}.mc.compact .mc-row.mine .mc-acts{left:0}
.mc.compact .mc-typing{padding-left:32px}
.mc.compact .mc-gate{padding:0 8px}
.mc.compact .mc-foot{padding:8px}
.mc.compact .gm{min-width:0}
.mc.compact .gm-ttt{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px)}
.mc.compact .gm-c4{grid-template-columns:repeat(7,32px);gap:3px;padding:6px}
.mc.compact .gm-col{grid-template-rows:repeat(6,29px);gap:3px;padding:1px}
.mc.compact .gm-disc{width:29px;height:29px}
.mc.compact .gm-rps-b{width:66px}
.mc.compact .mc-hello{padding:20px 10px 10px}

/* ---------- Admin placements map for the inline space ---------- */
.as-map.m-msgin .c.side.thr{flex:1.2;border-right:1px solid var(--line2);padding-right:3px}
.as-map.m-msgin .c.main.chat{flex:2;justify-content:flex-end}
.as-map.m-msgin .c.main.chat i{height:7px;width:62%;border-radius:4px}
.as-map.m-msgin .c.main.chat i.r{align-self:flex-end;background:color-mix(in srgb,var(--accent) 35%,var(--surface))}
.as-map.m-msgin .c.main.chat i.ad.thin{width:80%;align-self:center;height:9px}
.adv-slot .as-map{width:64px;height:48px;grid-template-rows:7px 1fr;flex:none;border-radius:7px}
.adv-slot .as-map-body{padding:3px;gap:2px}.adv-slot .as-map .c{gap:2px}.adv-slot .as-map .c i{height:4px}.adv-slot .as-map-top i{width:3px;height:3px}
.adv-slot .as-map.m-rail .c.side i.ad{height:9px}.adv-slot .as-map.m-center .c.main i.ad{height:11px}
.adv-pv.inline .mi-ad{max-width:340px}
.adv-pv-msg{display:grid;gap:6px;padding:10px;border-radius:14px;background:color-mix(in srgb,var(--text) 4%,transparent);max-width:360px}
.adv-pv-msg .fake{display:flex;gap:8px;align-items:center}.adv-pv-msg .fake i{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--text) 12%,transparent);flex:none}
.adv-pv-msg .fake span{display:grid;gap:4px;flex:1}.adv-pv-msg .fake b,.adv-pv-msg .fake em{display:block;height:7px;border-radius:4px;background:color-mix(in srgb,var(--text) 12%,transparent)}.adv-pv-msg .fake b{width:45%}.adv-pv-msg .fake em{width:75%}

/* ---------- small screens: the list fills the card; a conversation opens full screen with Back ---------- */
@media (max-width:760px){
  .card.mx-card{border-radius:12px;min-height:420px}
  .mx-top{flex-wrap:wrap;gap:8px 10px;padding:10px 12px}
  .mx-title{font-size:1.08rem}
  .mx-search{order:3;flex:1 1 100%}
  .mx-pills{padding:8px 12px}
  .mx-pills .mt-chips{gap:6px}
  .mt-chip{height:30px;padding:0 12px;font-size:.8rem}
  .mx-panes{grid-template-columns:minmax(0,1fr)}
  .mx-side{border-right:0}
  .mx-conv{display:none}
  .mx-card.show-conv .mx-conv{display:flex;position:fixed;inset:0;z-index:70;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:mx-slide .25s ease}
  .mt.big .mt-row{padding:10px 12px}
  .mt-quick{display:none}
  .mt-row:hover .mt-when{visibility:visible}
  .mx .mc-back{display:grid!important}
  .mx .mc-head{padding:10px 12px;gap:10px}
  .mx .mc-name .tbadge{display:none}
  .mx .mc-scroll{padding:12px 10px 6px}
  .mx .mc-stack{max-width:80%}
  .mx .mc-row.game .mc-stack{max-width:100%;width:100%}
  .mx .mc-row.game .mc-av{display:none}
  .mx .mc-acts{position:absolute;top:-8px;z-index:2;background:var(--surface);border-radius:999px;box-shadow:var(--shadow)}
  .mx .mc-row.theirs .mc-acts{right:0}.mx .mc-row.mine .mc-acts{left:0}
  .mx .mc-foot{padding:8px}
  .mx .gm{min-width:0}
  .mx .gm-c4{grid-template-columns:repeat(7,34px);gap:3px}.mx .gm-col{grid-template-rows:repeat(6,30px);gap:3px}.mx .gm-disc{width:30px;height:30px}
  .sp-wrap{padding:4px 14px 12px}
  .mx-none{padding:20px}
}

/* ---------- motion ---------- */
@keyframes mx-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes mx-fade{from{opacity:0}to{opacity:1}}
@keyframes mx-pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes mx-bounce{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes mx-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes mx-shim{to{background-position:-200% 0}}
@keyframes mx-ping{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}70%,100%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
@keyframes mx-glow{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}}
@keyframes mx-stamp{from{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes mx-drop{from{transform:translateY(-180px)}to{transform:none}}
@keyframes mx-float{50%{transform:translateY(-6px)}}
@keyframes mx-slide{from{opacity:.4;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mx *,.mx-dock *,.mc *{animation:none!important;transition:none!important}}
.adv-slot:has(.as-map){grid-template-columns:auto auto 1fr auto}
.mc.compact .mc-row.game .mc-acts{top:-14px}
@media (max-width:760px){.mx .mc-row.game .mc-acts{top:-16px}}
@media (max-width:760px){
  .mx .chat-send{width:42px;padding:0}.mx .chat-send span{display:none}
  .mx .chat-row{flex-wrap:wrap}.mx .chat-tools{order:3;width:100%;justify-content:flex-start;border-top:1px solid var(--line);padding-top:4px}
  .mx .gm-st{white-space:normal;text-align:center;max-width:46%}
}

/* ================= ReconHire identity layer =================
   Messaging wears the site's own look: mono "// comms" kickers, Chakra Petch headings, the blue to violet gradient with
   soft glows for the active pill, your bubbles, compose and primary buttons, card-style thread rows, a faint grid behind
   the conversation and terminal lines in empty states. Everything reads from theme variables, so dark mode follows. */
.mx,.mx-dock,.mc{--mx-grad:linear-gradient(135deg,var(--accent),var(--accent2));--mx-glow:0 8px 22px -10px color-mix(in srgb,var(--accent) 70%,transparent);--mx-line:color-mix(in srgb,var(--accent) 14%,var(--line))}
.card.mx-card{border-radius:20px;border:1px solid var(--mx-line);background:radial-gradient(700px 260px at 0% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),radial-gradient(600px 260px at 100% 100%,color-mix(in srgb,var(--accent2) 6%,transparent),transparent 70%),var(--surface);box-shadow:0 1px 0 color-mix(in srgb,#fff 40%,transparent) inset,0 24px 60px -36px color-mix(in srgb,var(--accent) 45%,transparent)}
.mx-top{border-bottom:1px solid var(--mx-line);padding:14px 18px;background:transparent}
.mx-head{display:grid;gap:1px;flex:none}
.mx-kick{font:700 .66rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.mx-title{font-family:var(--hfont);font-size:1.32rem;letter-spacing:.01em;line-height:1.1}
.mx-q{border-radius:12px;height:38px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));border:1px solid var(--mx-line)}
.mx-search{flex:0 1 360px}
.mx-compose{background:var(--mx-grad)!important;color:#fff!important;box-shadow:var(--mx-glow);border:0}
.mx-compose:hover{filter:brightness(1.08);transform:translateY(-1px)}
.mx-top-act .icon-btn:not(.mx-compose){border:1px solid var(--mx-line);background:var(--surface)}
.mx-pills{border-bottom:1px solid var(--mx-line);padding:10px 18px;background:color-mix(in srgb,var(--accent) 2.5%,transparent)}
/* filter chips: soft tinted tags, gradient when active */
.mt-chip{border:1px solid transparent;border-radius:10px;background:color-mix(in srgb,var(--text) 5.5%,transparent);color:var(--muted);font-weight:600}
.mt-chip:hover{border-color:var(--mx-line);color:var(--text);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.mt-chip.on,.mt-chip.on:hover{background:var(--mx-grad);border-color:transparent;color:#fff;box-shadow:var(--mx-glow)}
.mt-chip.on em{background:rgba(255,255,255,.95);color:var(--accent2)}
.mt-chip em.soft{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.mt-sep{background:var(--mx-line)}
.mx-boxopt.on{background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* thread rows: rounded cards with a gradient edge when open */
.mt.big .mt-list{padding:8px 8px 12px}
.mt.big .mt-row{border-radius:14px;border-bottom:0;padding:11px 12px;margin-bottom:2px}
.mt.big .mt-row.on::before{left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0}
.mt-row.on{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent2) 6%,transparent))}
.mt-name{font-family:var(--hfont);letter-spacing:.005em}
.mt-row.unread .mt-when{color:var(--accent2)}
.mt-row.unread::after{content:"";position:absolute;right:14px;bottom:16px;width:8px;height:8px;border-radius:50%;background:var(--mx-grad);box-shadow:0 0 10px var(--accent2)}
.mt-row.unread:has(.mt-count,.mt-udot)::after{display:none}
.mt-count{background:var(--mx-grad);box-shadow:0 0 10px -2px var(--accent2)}
.mt-udot{background:var(--mx-grad);box-shadow:0 0 8px var(--accent2)}
.mt-tag{font-family:var(--mono);letter-spacing:.08em}
.mt.big .mt-row.sup{background:color-mix(in srgb,var(--accent) 6%,transparent);border:1px dashed var(--mx-line)}
.mt-spon.ad-tag{flex:none;padding:3px 7px 3px 6px;font-size:.56rem;letter-spacing:.12em}
.mt-row.mt-ad{background:color-mix(in srgb,var(--accent2) 4%,transparent)}
.mt-quick{border-color:var(--mx-line);border-radius:12px}
.mx-term{display:block;font:600 .8rem/1.4 var(--mono);color:var(--accent2);letter-spacing:.02em;background:none;padding:0}
.mx-term::after{content:"";display:inline-block;width:0}
.mt-empty .mx-term{margin-top:2px}
/* online: a glowing green dot */
.mx-dot{background:#22c55e;box-shadow:0 0 8px 1px rgba(34,197,94,.75);animation:none}
.mc-sub-on i{box-shadow:0 0 8px rgba(34,197,94,.8)}
/* conversation */
.mx .mc-head{border-bottom:1px solid var(--mx-line);background:color-mix(in srgb,var(--surface) 92%,transparent)}
.mc-name,.mc-nm{font-family:var(--hfont)}
.mx .mc-scroll{background-color:color-mix(in srgb,var(--bg) 30%,var(--surface));background-image:linear-gradient(color-mix(in srgb,var(--accent) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,transparent) 1px,transparent 1px);background-size:28px 28px}
.mc .cm-bub{background:var(--surface);border:1px solid var(--mx-line);box-shadow:0 2px 8px -6px rgba(15,23,42,.25)}
.mc .cm.mine .cm-bub{background:var(--mx-grad);border-color:transparent;box-shadow:var(--mx-glow)}
.mc-day span{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:.66rem}
.mc-star.on{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--mx-star) 60%,transparent))}
.mx .chat-send,.mx-none .btn,.sp-cta,.sp-acts .btn:not(.ghost){background:var(--mx-grad);border-color:transparent;color:#fff;box-shadow:var(--mx-glow)}
/* empty right pane */
.mx-none{gap:6px}
.mx-none .mx-kick{margin-top:2px}
.mx-none h3{font-family:var(--hfont)}
.mx-none .mx-term{margin:2px 0 4px}
.mx-chip{cursor:pointer;font:inherit;font-size:.76rem;border-color:var(--mx-line);transition:border-color .15s,color .15s,box-shadow .15s}
.mx-chip:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
/* sponsored message */
.sp-when{display:inline-flex;align-items:center;gap:8px}
.mc-sub .ad-tag{font-size:.56rem;padding:3px 7px 3px 6px}
.sp-hero{border-bottom:1px solid var(--mx-line)}
.sp-brand{font-family:var(--hfont)}
.sp-text{background:var(--surface);border:1px solid var(--mx-line)}
html[data-theme="dark"] .card.mx-card{box-shadow:0 24px 70px -40px color-mix(in srgb,var(--accent) 60%,transparent)}
html[data-theme="dark"] .mc .cm-bub{box-shadow:none}
@media (max-width:760px){
  .mx-top{padding:10px 12px}
  .mx-head{order:0}
  .mx-title{font-size:1.15rem}
  .mx-pills{padding:8px 12px}
  .mt.big .mt-list{padding:6px 6px 10px}
  .mt.big .mt-row{padding:10px}
}
.mc-sub-hl{margin-left:5px}

/* titles.css */
/* ReconHire: title badge picker, "Verify your title" dialog and Admin → Badge requests (public/js/titles-ui.js).
   Reuses the employer verification look (employer.css) for the method cards, code boxes and file lists. */

/* ---------- picker (Edit intro) ---------- */
.tp{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--text) 2%,var(--surface))}
.tp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tp-lbl{font-weight:700;font-size:.9rem}
.tp-prev{display:flex;align-items:center;min-height:30px}
.tp-grp{display:flex;flex-direction:column;gap:7px}
.tp-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:700 .72rem/1.3 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.tp-h .ico{width:12px;height:12px}
.tp-h em{font:400 .78rem/1.3 var(--font);letter-spacing:0;text-transform:none;color:var(--dim)}
.tp-chips{display:flex;flex-wrap:wrap;gap:7px}
.tp-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:600 .82rem/1.2 var(--font);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.tp-chip:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.tp-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tp-chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:inset 0 0 0 1px var(--accent)}
.tp-dot{width:8px;height:8px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--tb1),var(--tb2))}
.tp-dot.t-exec{--tb1:#f59e0b;--tb2:#b45309}.tp-dot.t-hire{--tb1:#10b981;--tb2:#047857}.tp-dot.t-lead{--tb1:#6366f1;--tb2:#4338ca}.tp-dot.t-pro{--tb1:#0ea5e9;--tb2:#0369a1}.tp-dot.t-learn{--tb1:#a78bfa;--tb2:#7c3aed}
.tp-lock{display:inline-grid;place-items:center;color:var(--dim)}
.tp-lock .ico{width:12px;height:12px}
.tp-ck{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--good);color:#fff;font-size:.62rem;font-weight:900}
.tp-pend{font:700 .66rem/1 var(--font);font-style:normal;padding:3px 6px;border-radius:999px;color:#b45309;background:color-mix(in srgb,#f59e0b 16%,transparent)}
.tp-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 13px;border-radius:12px;background:color-mix(in srgb,#f59e0b 9%,transparent);border:1px solid color-mix(in srgb,#f59e0b 30%,transparent)}
.tp-status[hidden]{display:none}
.tp-status>div{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.tp-status b{font-size:.88rem}
.tp-status small{font-size:.8rem;color:var(--muted)}
.tp-st-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#d97706;background:color-mix(in srgb,#f59e0b 16%,transparent)}
.tp-st-ic .ico{width:16px;height:16px}
.tp-status.bad{background:color-mix(in srgb,var(--bad) 7%,transparent);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.tp-status.bad .tp-st-ic{color:var(--bad);background:color-mix(in srgb,var(--bad) 13%,transparent)}

/* ---------- own profile + settings status chip ---------- */
.tv-chip{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:4px 10px;border-radius:999px;border:1px dashed color-mix(in srgb,#f59e0b 60%,transparent);background:color-mix(in srgb,#f59e0b 9%,transparent);color:color-mix(in srgb,#b45309 85%,var(--text));font:600 .76rem/1.3 var(--font);cursor:pointer;vertical-align:middle}
.tv-chip .ico{width:13px;height:13px}
.tv-chip.bad{border-color:color-mix(in srgb,var(--bad) 55%,transparent);background:color-mix(in srgb,var(--bad) 7%,transparent);color:var(--bad)}
.tv-chip:hover{filter:brightness(.97)}

/* ---------- Verify your title dialog ---------- */
.modal.tv-modal{max-width:880px}
.tv{display:flex;flex-direction:column;gap:16px}
.tv-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tv-head p{margin:0;flex:1;min-width:220px;font-size:.88rem}
.tv-badge{display:flex;align-items:center}
.tv-stepper{margin:0}
.tv-form{display:flex;flex-direction:column;gap:12px;padding:18px}
.tv-form .field{margin:0}
.tv-sum{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--text) 2%,var(--surface))}
.tv-sum>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tv-sum>div b{font-size:.9rem;overflow-wrap:anywhere}
.tv-sum>button{margin-left:auto}
.tv-verify .emp-methods{grid-template-columns:repeat(3,minmax(0,1fr))}
.tv-team{margin:0}
.tv-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tv-foot small{display:inline-flex;align-items:center;gap:6px}
.tv-foot small .ico{width:13px;height:13px}
.tv-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:16px 8px 6px}
.tv-done h2{margin:0}
.tv-done p{margin:0;max-width:520px}
.tv-done-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--good),color-mix(in srgb,var(--good) 70%,#000));box-shadow:0 10px 26px -12px var(--good)}
.tv-done-ic .ico{width:26px;height:26px;stroke-width:2.6}
.tv-otp1{max-width:160px;letter-spacing:.3em;font:700 1.1rem var(--mono);text-align:center}

/* ---------- Admin → Badge requests ---------- */
.hl-grid.tv-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.mp-title .tv-chip:first-child{margin-left:0}
.tv-verify .emp-sec-head h2{font-size:1.2rem;margin:0 0 2px}
.tv-adm-intro{display:flex;gap:14px;align-items:flex-start}
.tv-adm-intro h3{margin:0 0 4px}
.tv-adm-intro p{margin:0;font-size:.88rem}
.tv-adm-badge{flex:none;display:flex;align-items:center;min-width:0}
.tv-adm-card .emp-adm-top{align-items:center}
.tv-adm-card .emp-adm-name a{color:inherit}

html[data-theme="dark"] .tp{background:var(--surface2)}
html[data-theme="dark"] .tp-chip{background:var(--surface)}
html[data-theme="dark"] .tp-pend,html[data-theme="dark"] .tv-chip:not(.bad){color:#fbbf24}
html[data-theme="dark"] .tp-st-ic{color:#fbbf24}
html[data-theme="dark"] .tv-sum{background:var(--surface2)}

@media (max-width:700px){
  .tv-verify .emp-methods{grid-template-columns:1fr}
  .tv-sum>button{margin-left:0}
  .tv-head .tv-badge{width:100%}
  .tp{padding:12px}
  .hl-grid.tv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tv-chip{margin:6px 0 0}
}

/* Admin → Badge requests: even spacing between the intro, tiles, filters and list */
.tv-adm-head{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.tv-adm-head>.card,.tv-adm-head>.hl-grid,.tv-adm-head>.emp-alert{margin:0}
.tv-adm-head .hl-grid.tv-tiles{gap:16px}
.tv-adm-intro{padding:18px 20px}
.tv-adm-intro p{line-height:1.55}
.tv-adm-bar{margin-top:6px;gap:12px;flex-wrap:wrap;align-items:center}
.tv-adm-bar .row{gap:10px;flex-wrap:wrap;align-items:center}
.tv-adm-bar .emp-adm-q{width:220px}
.tv-adm-list{gap:16px}

/* community.css */
/* ReconHire community: groups, mentors, study buddies, cert tracker, labs, congrats cards (public/js/community-ui.js).
   Colors come from the theme variables; group accent colors are mixed with the surface so they read well in light and dark. */
.cm-c-blue{--cm:#3b82f6}.cm-c-violet{--cm:#8b5cf6}.cm-c-teal{--cm:#14b8a6}.cm-c-green{--cm:#22c55e}.cm-c-amber{--cm:#f59e0b}.cm-c-rose{--cm:#f43f5e}.cm-c-slate{--cm:#64748b}.cm-c-cyan{--cm:#06b6d4}
.cm-tile{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;font-size:22px;line-height:1;background:color-mix(in srgb,var(--cm,var(--accent)) 18%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cm,var(--accent)) 35%,transparent)}
.cm-subnav{margin-bottom:16px}
.cm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.cm-bar .search{flex:1;min-width:220px;position:relative}
.cm-bar .search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);width:17px;height:17px;pointer-events:none}
.cm-bar .search input{padding-left:38px;width:100%}
.cm-h3{margin:4px 0 10px;font-size:1rem}
.cm-note{display:flex;gap:6px;align-items:flex-start;font-size:.84rem;margin:0}
.cm-note .ico{width:16px;height:16px;flex:none;margin-top:2px}
.cm-count{display:block;text-align:right;margin-top:3px;font-size:.75rem}
.cm-form .field>span{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.cm-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.cm-chips .chip{cursor:pointer;border:0}
.chip.on,.cm-chips .chip.on,.cm-slots .chip.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.cm-chip-n{margin-left:4px;font-weight:700;color:var(--accent)}
.chip.cm-off{background:color-mix(in srgb,var(--accent2) 14%,transparent);color:color-mix(in srgb,var(--accent2) 80%,var(--text))}
.cm-gmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.cm-tags{display:flex;flex-wrap:wrap;gap:5px}

/* group cards */
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.cm-grid2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.cm-grid>.empty,.cm-grid>.f-skel,.cm-grid>.err{grid-column:1/-1}
.cm-gcard{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.cm-gcard:hover{transform:translateY(-2px);box-shadow:0 16px 36px -22px color-mix(in srgb,var(--text) 45%,transparent)}
.cm-gband{height:6px;background:linear-gradient(90deg,var(--cm),color-mix(in srgb,var(--cm) 40%,var(--accent2)))}
.cm-gbody{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.cm-ghead{display:flex;gap:12px;align-items:center}
.cm-gname{color:var(--text);font-size:1rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-gabout{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.cm-gfoot{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:auto}

/* group page */
.cm-hero{padding:0;overflow:hidden;margin-bottom:14px}
.cm-hero-band{height:92px;background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--cm) 55%,transparent),transparent 60%),linear-gradient(120deg,color-mix(in srgb,var(--cm) 30%,var(--surface)),color-mix(in srgb,var(--accent2) 22%,var(--surface)))}
.cm-hero-body{display:flex;gap:16px;align-items:flex-start;padding:0 20px 18px;flex-wrap:wrap}
.cm-hero-body>.cm-tile{margin-top:-38px}
.cm-hero-txt{padding-top:12px}
.cm-gacts{padding-top:14px}
.cm-hero-body>.cm-tile{border-radius:22px;box-shadow:0 0 0 4px var(--surface),inset 0 0 0 1px color-mix(in srgb,var(--cm) 35%,transparent);background:color-mix(in srgb,var(--cm) 22%,var(--surface))}
.cm-hero-txt{flex:1;min-width:240px}
.cm-hero-txt h1{margin:6px 0 4px;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.cm-hero-txt p{margin:0 0 8px;max-width:70ch}
.cm-gstats{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:.86rem}
.cm-gstats span{display:inline-flex;gap:5px;align-items:center}
.cm-gstats .ico{width:15px;height:15px}
.cm-gacts{display:flex;gap:8px;align-items:center}
.cm-tabs{margin-bottom:14px}
.cm-tabs .badge{margin-left:6px}
.cm-gcols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.cm-gmain{display:grid;gap:12px;min-width:0}
.cm-gside{display:grid;gap:12px;position:sticky;top:76px}
.cm-about p{margin:6px 0 10px;color:var(--muted);font-size:.9rem;line-height:1.55}
.cm-rules-h{display:block;font-size:.86rem;margin-top:4px}
.cm-rules{margin:6px 0 0;padding-left:20px;color:var(--muted);font-size:.86rem;line-height:1.55}
.cm-joinbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cm-joinbar>span{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem}
.cm-mlist{display:grid;gap:4px}
.cm-mrow{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cm-mrow:last-child{border-bottom:0}
.cm-mctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cm-in{white-space:nowrap}
.cm-in-a{color:var(--muted);font-weight:600}
.cm-in-a:hover{color:var(--accent)}
.cm-in-ic{margin-right:3px}
.f-act.cm-modrm{color:var(--muted)}
.cm-pinned{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 120px)}
.cm-pin{display:flex;align-items:center;gap:6px;font:600 .74rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin:-2px 0 10px}
.cm-pin .ico{width:14px;height:14px}
.cm-pin .dim{text-transform:none;letter-spacing:0;font-family:var(--font);font-weight:500}

/* pickers in the create dialog */
.cm-picks{display:flex;flex-wrap:wrap;gap:6px}
.cm-pick{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);font-size:19px;cursor:pointer;display:grid;place-items:center;padding:0}
.cm-pick.on{box-shadow:0 0 0 2px var(--accent);border-color:transparent}
.cm-sw{background:var(--cm);border:0}

/* mentors and buddies */
.cm-mentor{display:flex;flex-direction:column;gap:10px}
.cm-mhead{display:flex;gap:12px;align-items:flex-start}
.cm-bio{margin:6px 0 0;color:var(--muted);font-size:.88rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.cm-formcard{max-width:760px}
.cm-gate{display:flex;gap:14px;align-items:flex-start}
.cm-gate>.ico{width:34px;height:34px;color:var(--accent);flex:none}
.cm-gate p{margin:6px 0 12px}
.cm-ok{display:flex;gap:8px;align-items:center;color:var(--good);font-weight:600;font-size:.9rem}
.cm-cols{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:18px;align-items:start}
.cm-blist{display:grid;gap:10px}
.cm-buddy,.cm-req{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.cm-reqb{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cm-slots{display:grid;gap:8px}
.cm-slotrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cm-slotrow>small{width:72px}
.cm-slots .chip{cursor:pointer;border:0}

/* cert tracker */
.cm-catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cm-cert{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;cursor:pointer;font:inherit;color:var(--text);transition:transform .15s,box-shadow .15s}
.cm-cert:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px var(--accent)}
.cm-cert-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);margin-bottom:4px}
.cm-lv-entry{background:color-mix(in srgb,var(--good) 14%,transparent);color:color-mix(in srgb,var(--good) 70%,var(--text))}
.cm-lv-intermediate{background:color-mix(in srgb,var(--accent) 14%,transparent);color:color-mix(in srgb,var(--accent) 75%,var(--text))}
.cm-lv-advanced{background:color-mix(in srgb,var(--accent2) 16%,transparent);color:color-mix(in srgb,var(--accent2) 75%,var(--text))}
.modal .cm-catalog{max-height:58vh;overflow:auto;padding:2px}
.cm-dlist{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.88rem}
.cm-dlist li{display:flex;justify-content:space-between;gap:10px;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--text) 4%,transparent)}
.cm-plans{margin-bottom:14px}
.cm-ccols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.cm-cmain{display:grid;gap:14px;min-width:0}
.cm-cside{display:grid;gap:12px}
.cm-plan-top{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:20px;background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 55%),var(--surface)}
.cm-plan-info{flex:1;min-width:240px;display:grid;gap:10px}
.cm-plan-info h2{margin:0;font-size:1.45rem}
.cm-plan-info .kicker{margin:0}
.cm-plan-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.cm-date{margin:0}
.cm-date span{font-size:.78rem;color:var(--muted);display:block;margin-bottom:4px}
.cm-ring{position:relative;flex:none;display:grid;place-items:center}
.cm-ring svg{position:absolute;inset:0}
.cm-rt{stroke:color-mix(in srgb,var(--text) 10%,transparent)}
.cm-rv{stroke:var(--accent);transition:stroke-dashoffset .6s ease}
.cm-ring-t{position:relative;text-align:center;line-height:1.1}
.cm-ring-t b{display:block;font:700 1.6rem/1 var(--hfont,var(--font))}
.cm-ring-t small{color:var(--muted);font-size:.74rem}
.cm-ring[style*="44px"] .cm-ring-t b{font-size:.8rem}
.cm-cd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cm-cd b{font:700 2rem/1 var(--hfont,var(--font));color:var(--accent)}
.cm-cd small{width:100%}
.cm-cd.none,.cm-cd.past{align-items:center;color:var(--muted);font-size:.92rem}
.cm-passed{display:inline-flex;gap:6px;align-items:center;font-weight:700;color:var(--good)}
.cm-domains{display:grid;gap:4px}
.cm-dom{border-top:1px solid var(--line);padding:2px 0}
.cm-dom summary{display:flex;gap:10px;align-items:center;cursor:pointer;padding:10px 2px;list-style:none;flex-wrap:wrap}
.cm-dom summary::-webkit-details-marker{display:none}
.cm-dom-n{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font:700 .78rem/1 var(--mono);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);flex:none}
.cm-dom-t{flex:1;min-width:160px;font-weight:600;font-size:.93rem}
.cm-bar-mini{width:80px;height:6px;border-radius:6px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden;flex:none}
.cm-bar-mini i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:6px;transition:width .4s}
.cm-steps{display:grid;gap:2px;padding:0 0 10px 34px}
.cm-step{display:flex;gap:10px;align-items:center;padding:7px 8px;border-radius:9px;cursor:pointer;font-size:.9rem}
.cm-step:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.cm-step input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.cm-step input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.cm-lab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:10px;color:var(--text);text-decoration:none}
.cm-lab:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);text-decoration:none}
.cm-lab b{display:block;font-size:.9rem}
.cm-lab small{display:block;color:var(--muted);font-size:.78rem;line-height:1.35}
.cm-lab-ic,.cm-job-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent2) 14%,transparent);color:var(--accent2)}
.cm-lab-ic .ico,.cm-job-ic .ico{width:17px;height:17px}
.cm-slink{display:flex;gap:8px;align-items:center;font-size:.88rem;padding:6px 0}
.cm-slink .ico{width:16px;height:16px}
.cm-gaps{display:grid;gap:12px}
.cm-gaplist{display:grid;gap:10px}
.cm-gap{display:grid;gap:6px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--text) 3.5%,transparent);border:1px solid var(--line)}
.cm-gap-labs{display:flex;gap:6px;flex-wrap:wrap}
.cm-gap-labs .chip{text-decoration:none;color:var(--text)}
.cm-gap-labs .chip:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* Home */
.cm-home{display:grid;gap:12px}
.cm-home:empty{display:none}
.cm-congrats{display:grid;gap:4px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 8%,var(--surface)),var(--surface) 60%)}
.cm-cg-h{display:flex;gap:8px;align-items:center;color:var(--accent2);margin-bottom:4px}
.cm-cg-h b{color:var(--text)}
.cm-cg{display:flex;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line);transition:opacity .4s}
.cm-cg:first-of-type{border-top:0}
.cm-cg-t{font-size:.92rem;line-height:1.4}
.cm-cg-b{display:flex;gap:4px;align-items:center}
.cm-cg-done{opacity:.6}
.cm-offer{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,color-mix(in srgb,var(--good) 12%,var(--surface)),var(--surface) 65%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 30%,transparent)}
.cm-offer-ic{font-size:30px;line-height:1}
.cm-offer p{margin:4px 0 10px;font-size:.88rem}
.cm-offer .switch{margin-bottom:10px}
.cm-sname{color:var(--text);font-size:.9rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-sugg .f-person{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.cm-sugg .f-person .btn{grid-column:auto}
.cm-focus{display:flex;gap:10px;align-items:center;color:var(--text);padding:6px;border-radius:10px;background:color-mix(in srgb,var(--accent) 6%,transparent);text-decoration:none}
.cm-focus:hover{text-decoration:none;background:color-mix(in srgb,var(--accent) 11%,transparent)}
.cm-focus b{display:block;font-size:.88rem}
.cm-focus small{display:block}
.cm-hgap-list{display:grid;gap:6px}
.cm-hgap{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:.85rem}
.cm-hgap-s{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-hgap a{display:inline-flex;gap:4px;align-items:center;white-space:nowrap;font-size:.8rem}
.cm-hgap .ico{width:14px;height:14px}

/* admin */
.cm-adm{display:grid;gap:12px}
.cm-adm-sw{display:flex;gap:18px;flex-wrap:wrap}
.cm-adm-pend{padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--bad) 10%,transparent);font-size:.88rem}
.cm-adm-list{display:grid}
.cm-adm-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.cm-thr{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px}
.cm-thr-t{display:flex;gap:8px}
.cm-emo{width:62px;flex:none;text-align:center}

@media (max-width:1000px){
  .cm-gcols,.cm-ccols,.cm-cols{grid-template-columns:minmax(0,1fr)}
  .cm-gside{position:static}
}
@media (max-width:600px){
  .cm-hero-band{height:64px}
  .cm-hero-body{padding:0 14px 14px;gap:12px}
  .cm-hero-body>.cm-tile{margin-top:-30px}
  .cm-hero-txt{padding-top:0;min-width:0;width:100%}
  .cm-hero-body>.cm-tile{width:60px!important;height:60px!important;font-size:30px!important}
  .cm-gacts{width:100%}
  .cm-plan-top{justify-content:center;text-align:center;padding:16px}
  .cm-plan-row,.cm-plan-info .row{justify-content:center}
  .cm-steps{padding-left:4px}
  .cm-bar-mini{width:56px}
  .cm-cg{flex-wrap:wrap}
  .cm-cg>div:nth-child(2){flex:1 1 calc(100% - 60px)}
  .cm-cg-b{margin-left:56px}
  .cm-mrow .cm-mctl{width:100%;padding-left:54px}
  .cm-grid,.cm-grid2{grid-template-columns:minmax(0,1fr)}
}
html[data-theme="dark"] .cm-gmeta .chip.have,html[data-theme="dark"] .cm-lab .chip.have,html[data-theme="dark"] .cm-buddy .chip.have{color:#6ee7b7}
html[data-theme="dark"] .chip.warn.cm-st,html[data-theme="dark"] .cm-gmeta .chip.warn{color:#fca5a5}
.cm-ccols+.cm-gaps,.cm-catalog~.cm-gaps,div>.cm-gaps:not(:first-child){margin-top:14px}

/* Cert tracker sits in a three-column frame: stack its own side column early so tablets (iPad) don't overlap */
@media (max-width:1320px){
  .cm-ccols{grid-template-columns:minmax(0,1fr)}
  .cm-ccols>.cm-cside{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
  .cm-ccols>.cm-cside>.stack{display:contents}
}

/* pubs.css */
/* ReconHire Newsletters ("Dispatches") and Events ("Ops calendar"): public/js/newsletters-ui.js, public/js/events-ui.js.
   ReconHire identity: mono kickers, Chakra Petch headings and dates, the accent → accent2 gradient, thin gradient top bars,
   grid and scan textures on covers without images, terminal empty states. Colors come from the theme variables, so light
   and dark both work; accents are mixed with the surface. */
.pb-kick{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);font-size:.74rem;margin-bottom:6px}
.pb-h1{font-family:var(--hfont,var(--font));letter-spacing:.01em}
.pb-h2{font:700 1.08rem/1.3 var(--hfont,var(--font));margin:22px 0 12px;display:flex;align-items:center;gap:10px}
.pb-h2:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent),transparent)}
.pb-h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 .98rem var(--hfont,var(--font))}
.pb-h3 .ico{width:17px;height:17px;color:var(--accent)}
.pb-head{position:relative}
.pb-head-acts .btn{box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent2) 80%,transparent)}
.pb-back{margin-bottom:12px}
.pb-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.pb-search{flex:1;min-width:220px;position:relative}
.pb-search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);width:17px;height:17px;pointer-events:none}
.pb-search input{padding-left:38px;width:100%}
.pb-seg{max-width:100%}
.pb-chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 16px;padding:2px 0}
.pb-chips::-webkit-scrollbar{display:none}
.pb-chip{cursor:pointer;border:0;flex:none;font-family:var(--mono);font-size:.74rem;letter-spacing:.02em}
.pb-chip.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent2) 80%,transparent)}
.pb-more{display:block;margin:16px auto 0}
.pb-fine{font-size:.8rem;margin:0}
.pb-form .field>span{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.pb-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pb-2col[hidden]{display:none}
.pb-warn{display:flex;gap:8px;align-items:flex-start;margin:12px 16px 0;padding:10px 12px;border-radius:12px;font-size:.88rem;background:color-mix(in srgb,var(--bad,#ef4444) 10%,transparent);color:var(--text);border:1px solid color-mix(in srgb,var(--bad,#ef4444) 30%,transparent)}
.pb-warn .ico{width:17px;height:17px;flex:none;color:var(--bad,#ef4444);margin-top:1px}
.pb-art .pb-warn{margin:0 0 14px}

/* gradient top bar on our cards */
.pb-nl,.ev-card,.pb-hero,.ev-hero,.pb-strip,.pb-side,.pb-ed-card,.ev-where,.ev-about,.ev-att,.ev-hosttools,.ev-bc,.pb-drafts,.pb-adm,.ev-rail,.pb-empty{border-radius:18px;overflow:hidden}
.pb-nl:before,.ev-card:before,.pb-side:before,.pb-ed-card:before,.ev-where:before,.ev-about:before,.ev-att:before,.ev-hosttools:before,.ev-bc:before,.pb-drafts:before,.pb-adm:before,.ev-rail:before,.pb-strip:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.9}

/* terminal empty state */
.pb-empty{text-align:center;padding:30px 20px;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%),var(--surface)}
.pb-empty h3{margin:14px 0 6px;font-family:var(--hfont,var(--font))}
.pb-empty p{margin:0 auto 14px;color:var(--muted);max-width:440px}
.pb-term{display:inline-flex;align-items:center;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 .82rem var(--mono);padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--muted);border:1px solid var(--line)}
.pb-term-p{color:var(--accent2);font-weight:700}
.pb-caret{display:inline-block;width:8px;height:15px;margin-left:4px;background:var(--accent);animation:pbBlink 1.1s steps(1) infinite}
@keyframes pbBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pb-caret{animation:none}}
.ev-grid>.pb-empty,.pb-grid>.pb-empty,.pb-grid>.f-skel,.pb-grid>.err{grid-column:1/-1}

/* logos and monograms */
.pb-logo{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 30%,var(--surface)),color-mix(in srgb,var(--accent2) 30%,var(--surface)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.pb-logo img{width:100%;height:100%;object-fit:cover;display:block}
.pb-mono{font:700 1.05rem/1 var(--hfont,var(--font));color:var(--text);letter-spacing:.04em}
.pb-mono.sm{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;font-size:.8rem;background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.pb-ref-nl .pb-logo{border-radius:7px}.pb-ref-nl .pb-mono{font-size:.6rem}

/* newsletter cards */
.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pb-nl{display:flex;flex-direction:column;gap:10px;padding:18px 16px 14px;transition:transform .15s,box-shadow .2s}
.pb-nl:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--accent2) 60%,transparent)}
.pb-nl-top{display:flex;gap:12px;align-items:center}
.pb-nl-name{display:block;color:var(--text);font:700 1.02rem/1.25 var(--hfont,var(--font));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-by{color:var(--muted);font-size:.82rem}
.pb-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.8rem;color:var(--muted)}
.pb-tag{font:600 .7rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:5px 8px;border-radius:7px;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 12%,transparent)}
.pb-cad{display:inline-flex;align-items:center;gap:4px}
.pb-cad .ico{width:14px;height:14px}
.pb-subs{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.pb-about{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.pb-nl-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.pb-feat{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:4px;font:700 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent2) 80%,transparent);z-index:2}
.pb-feat .ico{width:12px;height:12px}
.pb-feat.inline{position:static}
.pb-sub.on{color:var(--text)}
.pb-sub.on .ico{color:var(--good,#22c55e)}

/* newsletter hero */
.pb-hero{padding:0;margin-bottom:14px}
.pb-hero-band{position:relative;height:110px;background:
  linear-gradient(color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px) 0 0/22px 22px,
  radial-gradient(120% 160% at 0% 0%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 60%),
  linear-gradient(120deg,color-mix(in srgb,var(--accent) 30%,var(--surface)),color-mix(in srgb,var(--accent2) 36%,var(--surface)))}
.pb-hero-code{position:absolute;right:16px;bottom:10px;font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--text) 70%,transparent)}
.pb-hero-body{display:flex;gap:18px;align-items:flex-start;padding:0 20px 18px;flex-wrap:wrap}
.pb-hero-body>.pb-logo{position:relative;z-index:1;margin-top:-40px;border:4px solid var(--surface);box-sizing:content-box;border-radius:22px}
.pb-hero-main{flex:1;min-width:240px;padding-top:12px}
.pb-hero-main h1{margin:2px 0 8px;font-size:clamp(1.5rem,3vw,2rem)}
.pb-hero-about{margin:10px 0 12px;color:var(--muted);line-height:1.55;max-width:680px}
.pb-hero-acts{padding-top:14px;flex-wrap:wrap;gap:8px}
.pb-author{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.pb-author span{display:flex;flex-direction:column;line-height:1.25}
.pb-drafts{margin-bottom:6px}
.pb-draft{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.pb-draft>div{flex:1;display:flex;flex-direction:column}
.pb-chip-sched{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text)}
.pb-eds{display:flex;flex-direction:column;gap:12px}
.pb-ed{display:flex;gap:14px;padding:12px;color:var(--text);text-decoration:none;border-radius:16px;transition:border-color .15s,transform .15s}
.pb-ed:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateX(2px)}
.pb-ed-cover{flex:none;width:150px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),color-mix(in srgb,var(--accent2) 26%,var(--surface)))}
.pb-ed-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pb-ed-ph{display:grid;place-items:center;height:100%;color:color-mix(in srgb,var(--text) 55%,transparent)}
.pb-ed-main{min-width:0;display:flex;flex-direction:column;gap:4px}
.pb-date{font:600 .72rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent2)}
.pb-ed-title{font:700 1.05rem/1.3 var(--hfont,var(--font))}
.pb-ed-ex{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-ed-stats{display:flex;gap:12px;align-items:center;color:var(--dim);font-size:.8rem}
.pb-ed-stats span{display:inline-flex;align-items:center;gap:4px}.pb-ed-stats .ico{width:14px;height:14px}

/* article */
.pb-art-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start;max-width:1100px;margin:0 auto}
.pb-art{min-width:0}
.pb-strip{display:flex;align-items:center;gap:12px;padding:14px 14px 12px;margin-bottom:18px}
.pb-strip b{color:var(--text)}
.pb-strip small{display:block}
.pb-art-head{margin-bottom:16px}
.pb-art-title{font:700 clamp(1.7rem,4vw,2.6rem)/1.15 var(--hfont,var(--font));margin:4px 0 16px;letter-spacing:.005em;background:linear-gradient(120deg,var(--text) 55%,color-mix(in srgb,var(--accent2) 70%,var(--text)));-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-art-by{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pb-art-by>div{display:flex;flex-direction:column;line-height:1.3}
.pb-art-by b{color:var(--text)}
.pb-art-acts{gap:6px;flex:none;flex-wrap:nowrap;margin-left:auto}
.pb-art-cover{margin:0 0 22px;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -30px color-mix(in srgb,var(--accent2) 60%,transparent)}
.pb-art-cover img{display:block;width:100%;max-height:520px;object-fit:cover}
.pb-prose{font-size:1.06rem;line-height:1.75;color:var(--text);overflow-wrap:anywhere}
.pb-prose h2{font:700 1.45rem/1.3 var(--hfont,var(--font));margin:30px 0 10px}
.pb-prose h3{font:700 1.15rem/1.35 var(--hfont,var(--font));margin:24px 0 8px}
.pb-prose p{margin:0 0 18px}
.pb-prose a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset:3px}
.pb-prose blockquote{margin:0 0 18px;padding:12px 18px;border-left:3px solid var(--accent2);background:color-mix(in srgb,var(--accent2) 8%,transparent);border-radius:0 12px 12px 0;font-style:italic}
.pb-prose code{font:.9em var(--mono);padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--text) 8%,transparent)}
.pb-prose pre{margin:0 0 18px;padding:14px 16px;border-radius:14px;background:#0b1020;color:#dbe4f3;overflow-x:auto;font:.86rem/1.6 var(--mono);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);position:relative}
.pb-prose pre:before{content:"$ code";position:absolute;top:6px;right:10px;font-size:.66rem;letter-spacing:.08em;color:#7c8db5;text-transform:uppercase}
.pb-prose pre code{background:none;padding:0;color:inherit;font-size:1em}
.pb-prose ul,.pb-prose ol{margin:0 0 18px;padding-left:24px}.pb-prose li{margin:0 0 6px}
.pb-prose ul li::marker{color:var(--accent2)}
.pb-prose hr{border:0;height:1px;margin:28px 0;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent)}
.pb-prose figure{margin:0 0 20px}.pb-prose img{max-width:100%;height:auto;border-radius:14px;display:block}
.pb-prose figcaption{font-size:.84rem;color:var(--muted);margin-top:6px;text-align:center}
.pb-art-end{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 0 8px;padding:14px 16px;border-radius:16px;border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 5%,transparent)}
.pb-end-mark{font:600 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent2)}
.pb-end-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.pb-art-rail{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
.pb-side{padding:16px}
.pb-side p{margin:4px 0 10px;font-size:.86rem}
.pb-side-au{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:var(--text);text-decoration:none}
.pb-side-ed{display:flex;flex-direction:column;padding:9px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--text);line-height:1.35}
.pb-side-ed:first-of-type{border-top:0}
.pb-seeall{display:inline-block;margin-top:8px;font-size:.86rem}
/* the article's and the event's discussion: the post card, minus the parts the page already shows */
.pb-discuss .f-p-head,.pb-discuss .f-p-body,.pb-discuss .f-tr-row,.pb-discuss .pg,.pb-discuss .f-video,.pb-discuss .f-yt,.pb-discuss .f-p-link,.pb-discuss .pb-refwrap{display:none!important}
.pb-discuss{border-radius:18px}

/* editor */
.pb-editor{max-width:860px;margin:0 auto}
.pb-ed-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pb-ed-state{display:inline-flex;align-items:center;gap:6px;font:600 .74rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pb-dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.pb-dot.published{background:var(--good,#22c55e);box-shadow:0 0 0 4px color-mix(in srgb,var(--good,#22c55e) 20%,transparent)}
.pb-dot.scheduled{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
.pb-dot.held,.pb-dot.removed{background:var(--bad,#ef4444)}
.pb-status{margin-left:auto;color:var(--dim);font-size:.8rem}
.pb-ed-card{display:flex;flex-direction:column;gap:12px;padding:20px}
.pb-ed-tin{font:700 1.5rem/1.25 var(--hfont,var(--font));padding:12px 14px}
.pb-ed-bar{gap:8px;flex-wrap:wrap}
.pb-tools{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid var(--line)}
.pb-tools[hidden]{display:none}
.pb-tool b{font:700 .78rem var(--mono)}
.pb-ed-body{font:.98rem/1.65 var(--mono);min-height:340px;resize:vertical}
.pb-prev{min-height:340px;padding:6px 4px}
.pb-prev-t{font:700 1.8rem/1.2 var(--hfont,var(--font));margin:0 0 16px}
.pb-ed-help{display:flex;gap:6px;align-items:center;font-size:.8rem;color:var(--dim)}
.pb-ed-help .ico{width:15px;height:15px}
.pb-ed-acts{justify-content:flex-end;flex-wrap:wrap;gap:8px}
.pb-pick-wrap{display:flex;flex-direction:column;gap:8px}
.pb-pick{display:grid;place-items:center;width:96px;height:96px;border-radius:18px;overflow:hidden;border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 5%,transparent)}
.pb-pick.round{border-radius:22px}
.pb-pick.wide{width:100%;height:auto;aspect-ratio:16/6;max-height:220px}
.pb-pick img{width:100%;height:100%;object-fit:cover;display:block}
.pb-pick-ph{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--dim);font-size:.78rem;text-align:center;padding:6px}
.pb-share-prev{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* feed cards for posts that carry an edition or an event */
.pb-refwrap{margin:4px 0 10px}
.pb-ref-kick{display:flex;align-items:center;gap:6px;margin:0 0 8px;font:600 .74rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent2)}
.pb-ref-kick .ico{width:15px;height:15px}
.pb-ref{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--text);text-decoration:none;background:var(--surface);transition:border-color .15s,box-shadow .2s}
.pb-ref:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 16px 36px -24px color-mix(in srgb,var(--accent2) 70%,transparent)}
.pb-ref.gone{display:flex;gap:8px;align-items:center;padding:14px;color:var(--muted)}
.pb-ref-cover{aspect-ratio:16/7;overflow:hidden;background:#0b1020}
.pb-ref-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pb-ref-cover.noimg,.ev-cover.noimg{position:relative;display:grid;place-items:center;background:
  repeating-linear-gradient(0deg,color-mix(in srgb,#fff 5%,transparent) 0 1px,transparent 1px 4px),
  linear-gradient(color-mix(in srgb,#fff 7%,transparent) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,color-mix(in srgb,#fff 7%,transparent) 1px,transparent 1px) 0 0/24px 24px,
  radial-gradient(90% 120% at 20% 0%,color-mix(in srgb,var(--accent) 70%,#0b1020),transparent 70%),
  linear-gradient(130deg,#0b1020,color-mix(in srgb,var(--accent2) 55%,#0b1020))}
.pb-ref-cover.noimg span,.ev-cover-code{font:600 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent)}
.pb-ref-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.pb-ref-nl{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.8rem}
.pb-ref-t{font:700 1.08rem/1.3 var(--hfont,var(--font))}
.pb-ref-body p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-ref-go{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:.86rem;color:var(--accent)}
.pb-ref-go .ico{width:15px;height:15px}

/* ===== events ===== */
.ev-c-ctf{--evc:#22c55e}.ev-c-webinar{--evc:#06b6d4}.ev-c-conference{--evc:#f59e0b}.ev-c-careerfair{--evc:#f43f5e}.ev-c-study{--evc:#8b5cf6}.ev-c-workshop{--evc:#14b8a6}.ev-c-meetup{--evc:#3b82f6}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ev-sec{margin-bottom:8px}
.ev-card{padding:0;display:flex;flex-direction:column;transition:transform .15s,box-shadow .2s}
.ev-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--accent2) 60%,transparent)}
.ev-card.canceled{opacity:.72}
.ev-card-link{display:block;text-decoration:none}
.ev-card-top,.ev-ref-top{position:relative}
.ev-cover{aspect-ratio:16/8;overflow:hidden;background:#0b1020}
.ev-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ev-cover.noimg:after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--evc,var(--accent))}
.ev-date{position:absolute;left:12px;bottom:-22px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;padding:6px 0 5px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 24px -12px rgba(0,0,0,.45);line-height:1;z-index:1}
.ev-date b{font:700 1.6rem/1 var(--hfont,var(--font));background:linear-gradient(160deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;margin:2px 0}
.ev-date small{font:700 .58rem/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
.ev-date.big{position:static;width:76px;flex:none;padding:9px 0 8px;border-radius:18px}
.ev-date.big b{font-size:2.2rem}
.pb-adm-row .ev-date,.ev-rail-row .ev-date{position:static;width:46px;flex:none;padding:5px 0 4px;border-radius:11px;box-shadow:none}
.pb-adm-row .ev-date b,.ev-rail-row .ev-date b{font-size:1.2rem}
.ev-live{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;font:700 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:#ef4444;color:#fff}
.ev-live:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pbBlink 1.2s steps(1) infinite}
.ev-card-body{padding:30px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.ev-card-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ev-cat{font:700 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:7px;color:var(--evc,var(--accent2));background:color-mix(in srgb,var(--evc,var(--accent2)) 14%,transparent)}
.ev-type{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;color:var(--muted)}
.ev-type .ico{width:14px;height:14px}
.ev-title{display:block;color:var(--text);font:700 1.04rem/1.3 var(--hfont,var(--font))}
.ev-when{display:inline-flex;align-items:center;gap:5px;color:var(--accent2);font-weight:600;font-size:.82rem}
.ev-when .ico{width:14px;height:14px}
.ev-host{color:var(--muted);font-size:.8rem}
.ev-card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.ev-faces{display:flex;align-items:center}
.ev-face{margin-left:-8px;border-radius:50%;box-shadow:0 0 0 2px var(--surface);display:inline-flex}
.ev-face:first-child{margin-left:0}
.ev-faces small{margin-left:8px;font:.76rem var(--mono);color:var(--muted)}
.ev-faces-none{font-size:.8rem}
.ev-rsvp{display:flex;gap:6px;flex-wrap:wrap}
.ev-rsvp .btn.on{color:var(--text)}
.ev-rsvp .btn.on .ico{color:var(--good,#22c55e)}
.ev-host-chip{display:inline-flex;align-items:center;gap:5px;font:700 .72rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent2)}
.ev-host-chip .ico{width:14px;height:14px}

/* event page */
.ev-hero{padding:0;margin-bottom:14px}
.ev-cover.hero{aspect-ratio:auto;height:220px}
.ev-hero-body{display:flex;gap:18px;padding:0 20px 18px;margin-top:-34px;position:relative;align-items:flex-start;flex-wrap:wrap}
.ev-hero-main{flex:1;min-width:250px;padding-top:42px;display:flex;flex-direction:column;gap:10px}
.ev-h1{margin:0;font-size:clamp(1.5rem,3.2vw,2.1rem)}
.ev-when-big{display:flex;gap:8px;align-items:flex-start;font-weight:600;color:var(--text)}
.ev-when-big .ico{width:18px;height:18px;color:var(--accent2);margin-top:2px;flex:none}
.ev-hostl{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.ev-hostl span{display:flex;flex-direction:column;line-height:1.25}
.ev-hic{display:inline-grid!important;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));font-size:20px}
.ev-hero-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.ev-tools{gap:6px}
.ev-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.ev-main,.ev-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.ev-where,.ev-about,.ev-att,.ev-hosttools,.ev-bc{padding:16px}
.ev-wrow{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.ev-wrow+.ev-wrow{border-top:1px solid var(--line)}
.ev-wrow>.ico{width:20px;height:20px;color:var(--accent);flex:none;margin-top:2px}
.ev-wrow>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ev-map{display:inline-flex;align-items:center;gap:4px;font-size:.84rem}
.ev-map .ico{width:13px;height:13px}
.ev-join{align-self:flex-start;margin-top:4px}
.ev-url{overflow-wrap:anywhere}
.ev-count{font:600 .8rem var(--mono);color:var(--accent2)}
.ev-about-t{white-space:pre-wrap;line-height:1.65;overflow-wrap:anywhere}
.ev-bc-row{padding:8px 0;border-top:1px solid var(--line)}.ev-bc-row:first-of-type{border-top:0}
.ev-bc-row p{margin:0 0 2px;white-space:pre-wrap}
.ev-ht{display:flex;flex-direction:column;gap:6px}
.ev-ht .btn{justify-content:flex-start}
.ev-att-n{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ev-att-n b{font:700 2rem/1 var(--hfont,var(--font));background:linear-gradient(160deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ev-att-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ev-att-p{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.ev-att-p small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;color:var(--muted)}
.ev-alist{max-height:50vh;overflow:auto;display:flex;flex-direction:column}
.ev-arow{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.ev-arow>div{display:flex;flex-direction:column}
.ev-form{max-height:min(70vh,760px);overflow:auto;padding-right:4px}
.ev-ref .ev-date{bottom:-18px;width:50px}.ev-ref .ev-date b{font-size:1.3rem}
.ev-ref .pb-ref-body{padding-top:24px}
.ev-ref .ev-cover{aspect-ratio:16/6}

/* Home rail */
.ev-rail{padding:16px 14px 12px}
.ev-rail .pb-kick{margin:0}
.ev-rail-row{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--text)}
.ev-rail-row:first-of-type{border-top:0}
.ev-rail-t{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ev-rail-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.ev-rail-my{font:700 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--good,#22c55e)}
.ev-rail-none{margin:8px 0 2px;font-size:.86rem}

/* admin */
.pb-adm{padding:18px 16px}
.pb-adm-cfg{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.pb-adm-cfg .field{min-width:200px}
.pb-adm-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.pb-adm-row>div:nth-child(2) small{display:block;margin-top:3px}
.pb-adm-b{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.pb-chip-feat{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}

/* dark mode: a little more glow, a little less line */
html[data-theme="dark"] .pb-nl:hover,html[data-theme="dark"] .ev-card:hover{box-shadow:0 18px 44px -20px color-mix(in srgb,var(--accent2) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
html[data-theme="dark"] .ev-date{background:color-mix(in srgb,var(--surface) 88%,#000)}
html[data-theme="dark"] .pb-prose pre{background:#070b16}

/* phones and narrow screens */
@media (max-width:1000px){.pb-art-grid,.ev-cols{grid-template-columns:minmax(0,1fr)}.pb-art-rail{position:static}}
@media (max-width:640px){
  .pb-2col{grid-template-columns:1fr}
  .pb-grid,.ev-grid{grid-template-columns:minmax(0,1fr)}
  .pb-ed{flex-direction:column}.pb-ed-cover{width:100%}.pb-ed-cover:has(.pb-ed-ph){display:none}
  .pb-hero-body{padding:0 14px 14px}.pb-hero-body>.pb-logo{width:72px!important;height:72px!important}
  .ev-hero-body{padding:0 14px 14px;gap:12px}.ev-hero-main{padding-top:4px;min-width:0;flex-basis:100%}
  .ev-cover.hero{height:160px}
  .ev-hero-acts{flex-direction:column;align-items:stretch}
  .pb-art-title{font-size:1.65rem}
  .pb-prose{font-size:1rem}
  .pb-ed-card{padding:14px}
  .pb-art-acts{width:100%;margin-left:0}
  .pb-adm-row{flex-wrap:wrap}.pb-adm-b{width:100%;justify-content:flex-start}
  .pb-bar .pb-seg{width:100%}
}

/* range.css */
/* ReconHire Cyber Range (range-ui.js). ReconHire look: mono "// kickers" (var(--mono)), Chakra Petch headings
   (var(--hfont)), the accent -> accent2 gradient with soft glows, rounded cards with a top gradient bar, and dark
   SOC-console panels in monospace. Colors come from the theme tokens, so light and dark both work. Usable at 390px. */

.rg-page, .rg-player, .rg-cat, .rg-stats, .rg-lb { --rgrad: linear-gradient(135deg, var(--accent), var(--accent2)); --rglow: 0 10px 28px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.rg-kick { display: block; font: 600 .7rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); margin-bottom: 4px; }
.rg-head h1 { font-family: var(--hfont); letter-spacing: .01em; }
.rg-head p { color: var(--muted); max-width: 60ch; }

/* track accent colors */
.rg-blue { --tk: var(--accent); }
.rg-red { --tk: #ef4444; }
.rg-purple { --tk: #a855f7; }
.rg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tk, var(--accent)); box-shadow: 0 0 8px color-mix(in srgb, var(--tk, var(--accent)) 70%, transparent); flex: none; }

/* ---------- hero (signed out) ---------- */
.rg-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 40px 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rg-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rgrad); }
.rg-hero h1 { font-family: var(--hfont); font-size: 2rem; margin: 0 0 10px; }
.rg-hero p { color: var(--muted); max-width: 54ch; margin: 0 0 18px; }

/* ---------- subnav ---------- */
.rg-subnav { margin-top: 2px; }

/* ---------- catalog ---------- */
.rg-week { margin: 8px 0 20px; }
.rg-week-h h2 { font: 700 1.3rem var(--hfont); margin: 0; }
.rg-week-h p { margin: 2px 0 12px; }
.rg-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 16px; }
.rg-trackseg { flex-wrap: wrap; }
.rg-trackseg button.on.rg-red { color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); }
.rg-trackseg button.on.rg-purple { color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed); }
.rg-certsel { max-width: 220px; }
.rg-tracklabel { display: flex; align-items: center; gap: 9px; font: 600 .95rem var(--hfont); margin: 16px 0 8px; }
.rg-tracklabel small { margin-left: auto; font-weight: 400; }

.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rg-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.rg-card:hover { transform: translateY(-2px); box-shadow: var(--rglow); border-color: color-mix(in srgb, var(--tk, var(--accent)) 45%, transparent); }
.rg-card-bar { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--tk, var(--accent)), var(--accent2)); opacity: .9; }
.rg-card.done { border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.rg-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rg-type { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--tk, var(--accent)); background: color-mix(in srgb, var(--tk, var(--accent)) 12%, transparent); }
.rg-type .ico { width: 17px; height: 17px; }
.rg-card h3 { font: 700 1.1rem var(--hfont); margin: 2px 0 0; }
.rg-syn { color: var(--muted); font-size: .9rem; margin: 0; min-height: 2.6em; }
.rg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font: 600 .68rem var(--mono); letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.rg-chip.rg-blue { background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--text)); }
.rg-chip.rg-red { background: color-mix(in srgb, #ef4444 16%, transparent); color: #ef4444; }
.rg-chip.rg-purple { background: color-mix(in srgb, #a855f7 18%, transparent); color: #a855f7; }
.rg-chip.rg-new { background: color-mix(in srgb, var(--accent2) 18%, transparent); color: var(--accent2); }
.rg-chip.rg-ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.rg-chip.rg-ok .ico, .rg-chip.rg-new .ico { width: 12px; height: 12px; }
.rg-chip.rg-kev { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.rg-skills { display: flex; flex-wrap: wrap; gap: 5px; }
.rg-skill { font: 500 .7rem var(--mono); color: var(--dim); padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); }
.rg-certs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rg-certchip { font: 600 .68rem var(--mono); color: var(--accent2); background: color-mix(in srgb, var(--accent2) 10%, transparent); padding: 1px 7px; border-radius: 6px; }
.rg-card-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.rg-diff { flex: 1; min-width: 0; }
.rg-empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.rg-empty .ico { width: 34px; height: 34px; opacity: .5; }

/* ---------- player ---------- */
.rg-back { margin-bottom: 10px; }
.rg-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; }
.rg-back a:hover { color: var(--text); }
.rg-pl-head { position: relative; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; margin-bottom: 12px; }
.rg-pl-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--tk, var(--accent)), var(--accent2)); }
.rg-pl-head h1 { font: 700 1.5rem var(--hfont); margin: 0 0 8px; }
.rg-pl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-auth { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-bottom: 12px; background: color-mix(in srgb, #ef4444 9%, var(--surface)); border: 1px solid color-mix(in srgb, #ef4444 35%, transparent); }
.rg-auth .ico { color: #ef4444; flex: none; margin-top: 2px; }
.rg-auth b { color: var(--text); }
.rg-auth span { color: var(--muted); font-size: .9rem; }
.rg-brief { margin-bottom: 14px; }
.rg-brief-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rg-brief-h .ico { color: var(--accent); }
.rg-brief-h b { font-family: var(--hfont); }
.rg-brief p { margin: 0 0 8px; }
.rg-sys { font-size: .9rem; }

.rg-work { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.rg-ws { display: grid; gap: 14px; min-width: 0; }
.rg-obj { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rg-obj-h { display: flex; align-items: center; gap: 8px; font-family: var(--hfont); font-weight: 700; }
.rg-obj-h .ico { color: var(--accent2); }
.rg-objitem { padding: 10px 0; border-top: 1px solid var(--line); }
.rg-objitem:first-of-type { border-top: 0; }
.rg-objq { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: .92rem; margin: 0 0 8px; }
.rg-pts { font: 600 .7rem var(--mono); color: var(--dim); white-space: nowrap; }
.rg-choices { display: grid; gap: 6px; }
.rg-choice { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line); cursor: pointer; font-size: .9rem; transition: background .12s, border-color .12s; }
.rg-choice:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.rg-choice input { margin-top: 3px; accent-color: var(--accent); }
.rg-hintbox { margin-top: 8px; }
.rg-hintbtn { display: inline-flex; align-items: center; gap: 5px; font: 600 .76rem var(--font); color: var(--accent2); background: color-mix(in srgb, var(--accent2) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent); padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.rg-hintbtn .ico { width: 13px; height: 13px; }
.rg-hinttext { font-size: .85rem; color: var(--muted); display: flex; gap: 6px; margin: 6px 0 0; }
.rg-hinttext .ico { color: var(--accent2); flex: none; width: 14px; height: 14px; margin-top: 2px; }
.rg-submit { width: 100%; margin-top: 6px; }
.rg-small { font-size: .8rem; }
.rg-footnote { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 18px 0 4px; color: var(--dim); font-size: .8rem; }
.rg-footnote .ico { width: 13px; height: 13px; }

/* ---------- SOC console panels ---------- */
.rg-console { padding: 0; overflow: hidden; }
.rg-console-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--hfont); font-weight: 700; background: color-mix(in srgb, var(--text) 3%, transparent); }
.rg-console-h .ico { color: var(--accent); width: 18px; height: 18px; }
.rg-console-h small { margin-left: auto; font-family: var(--mono); }
.rg-query-row { display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap; }
.rg-query { flex: 1; min-width: 180px; font-family: var(--mono); font-size: .85rem; }
.rg-count { max-width: 150px; }
.rg-hint-line { display: flex; gap: 6px; align-items: flex-start; margin: 0 16px 10px; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--muted); font-size: .82rem; font-family: var(--mono); }
.rg-hint-line .ico { color: var(--accent); flex: none; width: 14px; height: 14px; margin-top: 2px; }
.rg-results { max-height: 460px; overflow: auto; }
.rg-res-meta { padding: 8px 16px; font: 600 .78rem var(--mono); color: var(--dim); position: sticky; top: 0; background: var(--surface); }
.rg-tablewrap { overflow-x: auto; }

.rg-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.rg-table th { text-align: left; padding: 7px 12px; font: 600 .68rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.rg-table td { padding: 7px 12px; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); vertical-align: top; }
.rg-mono { font-family: var(--mono); font-size: .8rem; white-space: nowrap; }
.rg-num { font-family: var(--mono); text-align: right; }
.rg-ev td { max-width: 320px; overflow-wrap: anywhere; }
.rg-alertrow { background: color-mix(in srgb, var(--bad) 7%, transparent); }
.rg-hi { background: color-mix(in srgb, var(--accent2) 6%, transparent); }
.rg-alertnote td { color: var(--bad); font-size: .8rem; display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--bad) 5%, transparent); }
.rg-alertnote .ico { width: 14px; height: 14px; flex: none; }
.rg-kv td.rg-hk, .rg-hdrs .rg-hk { font: 600 .78rem var(--mono); color: var(--dim); white-space: nowrap; width: 1%; }
.rg-hdrs .rg-hv { font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; }

/* email */
.rg-email-sub { padding: 10px 16px 4px; font-family: var(--hfont); }
.rg-email-meta { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 16px 8px; font-size: .84rem; color: var(--muted); }
.rg-email-meta code { font-size: .8rem; }
.rg-email-body { padding: 10px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); font-size: .92rem; white-space: pre-wrap; }
.rg-email-link { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 16px; font-size: .84rem; }
.rg-email-link code { overflow-wrap: anywhere; color: var(--accent); }

/* vuln */
.rg-vuln { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.rg-vuln-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rg-vuln-top b { font-family: var(--mono); }
.rg-sev { font: 600 .7rem var(--mono); padding: 1px 7px; border-radius: 6px; }
.rg-sev-crit { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
.rg-sev-high { background: color-mix(in srgb, #f97316 20%, transparent); color: #f97316; }
.rg-sev-med { background: color-mix(in srgb, #eab308 22%, transparent); color: #a16207; }
.rg-sev-low { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); }
.rg-vuln-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; font-size: .84rem; }
.rg-exposed { color: var(--bad); font-weight: 600; }
.rg-vuln-note { margin: 0; font-size: .85rem; color: var(--muted); }

/* panels */
.rg-plist { margin: 0; padding: 12px 16px 12px 32px; display: grid; gap: 6px; }
.rg-plist li { font-size: .88rem; }
.rg-plist code { font-size: .82rem; overflow-wrap: anywhere; }
.rg-console p { padding: 0 16px; }
.rg-console > p:last-child { padding-bottom: 14px; }

/* terminal */
.rg-term-card .rg-term { background: #0a0e16; }
html[data-theme="dark"] .rg-term-card .rg-term { background: #05070c; }
.rg-term { font-family: var(--mono); font-size: .82rem; color: #d6e2f5; padding: 12px; max-height: 420px; overflow: auto; }
.ft { font-family: var(--mono); color: #d6e2f5; }
.ft-out { display: block; }
.ft-row { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.ft-cmd { color: #8fd0ff; }
.ft-err { color: #ff9a9a; }
.ft-dim { color: #6b7a94; }
.ft-line { display: flex; align-items: baseline; }
.ft-prompt { color: #7be0a5; white-space: pre; flex: none; }
.ft-in { flex: 1; background: transparent; border: 0; color: #d6e2f5; font: inherit; outline: none; padding: 2px 0; min-width: 40px; }

/* IR board */
.rg-ir .rg-timer { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); color: var(--accent2); }
.rg-ir .rg-timer .ico { width: 15px; height: 15px; }
.rg-timer-out b { color: var(--bad); }
.rg-phase { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rg-phase-h { display: flex; gap: 10px; margin-bottom: 10px; }
.rg-phase-n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--rgrad); color: #fff; font: 700 .8rem var(--hfont); }
.rg-phase-h b { font-family: var(--hfont); }
.rg-phase-h p { margin: 2px 0 0; font-size: .88rem; color: var(--muted); }
.rg-phase-opts { display: grid; gap: 6px; }
.rg-opt { display: flex; align-items: flex-start; gap: 9px; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: .88rem; color: var(--text); transition: border-color .12s, background .12s; }
.rg-opt:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.rg-opt-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line2); flex: none; margin-top: 1px; }
.rg-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rg-opt.on .rg-opt-radio { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }

/* ---------- debrief ---------- */
.rg-score { display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 14px; position: relative; overflow: hidden; }
.rg-score::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rgrad); }
.rg-score.pass::before { background: linear-gradient(90deg, var(--good), var(--accent)); }
.rg-score.fail::before { background: linear-gradient(90deg, #f97316, var(--bad)); }
.rg-score h1 { font: 700 1.4rem var(--hfont); margin: 0; }
.rg-score p { margin: 4px 0 0; color: var(--muted); }
.rg-warn { color: var(--bad) !important; display: flex; align-items: center; gap: 6px; }
.rg-warn .ico { width: 15px; height: 15px; }
.rg-badges-earned { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.rg-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent2) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent); }
.rg-badge .ico { color: var(--accent2); width: 20px; height: 20px; }
.rg-badge b { font-family: var(--hfont); font-size: .9rem; }
.rg-badge small { display: block; color: var(--muted); font-size: .72rem; }
.rg-countsto { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rg-countsto .ico { color: var(--accent2); flex: none; }
.rg-countsto b { font-family: var(--hfont); }
.rg-practicelink { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; }
.rg-practicelink .ico { width: 13px; height: 13px; }
.rg-debrief h4 { font-family: var(--hfont); margin: 16px 16px 6px; }
.rg-sum { font-size: .95rem; }
.rg-chain { margin: 0 16px; padding-left: 20px; display: grid; gap: 6px; }
.rg-guide { margin: 0 16px; padding-left: 20px; display: grid; gap: 5px; color: var(--muted); font-size: .9rem; }
.rg-attack { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.rg-tech { display: inline-flex; flex-direction: column; padding: 6px 11px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.rg-tech b { font-family: var(--mono); font-size: .8rem; color: var(--accent); }
.rg-tech span { font-size: .76rem; color: var(--muted); }
.rg-ref { padding: 0 16px 14px; font-size: .82rem; }
.rg-debrief-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------- stats ---------- */
.rg-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.rg-stat { align-items: center; text-align: center; gap: 2px; padding: 16px 10px; }
.rg-stat .ico { color: var(--accent); width: 22px; height: 22px; margin-bottom: 4px; }
.rg-stat b { font: 700 1.3rem var(--hfont); }
.rg-freebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rg-freebar .ico { color: var(--accent); flex: none; }
.rg-freebar a { margin-left: auto; }
.rg-radarcard { margin-bottom: 14px; }
.rg-radarwrap { position: relative; max-width: 300px; margin: 16px auto; padding: 0 0 6px; }
.rg-radar { width: 100%; display: block; overflow: visible; }
.rg-radar-grid { fill: none; stroke: var(--line2); stroke-width: 1; }
.rg-radar-spoke { stroke: var(--line); stroke-width: 1; }
.rg-radar-val { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); stroke-width: 2; }
.rg-radar-lbl { position: absolute; transform: translate(-50%, -50%); font: 600 .62rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; text-align: center; }
.rg-radar-lbl b { display: block; font: 700 .8rem var(--hfont); color: var(--accent); }
.rg-badges { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- leaderboard ---------- */
.rg-optcard { margin-bottom: 14px; }
.rg-lbtable .rg-rank { font-family: var(--hfont); font-weight: 700; width: 1%; }
.rg-medal { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .78rem; color: #1a1205; }
.rg-medal.m1 { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.rg-medal.m2 { background: linear-gradient(135deg, #e5e7eb, #9ca3af); }
.rg-medal.m3 { background: linear-gradient(135deg, #fcd0a1, #b45309); color: #fff; }
.rg-me { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---------- certificate ---------- */
.rg-certpage { max-width: 760px; }
.rg-cert { position: relative; overflow: hidden; border-radius: 20px; padding: 36px 32px; text-align: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.rg-cert::after { content: ""; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--tk, var(--accent)) 30%, transparent); border-radius: 14px; pointer-events: none; }
.rg-cert-bar { position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--tk, var(--accent)), var(--accent2)); }
.rg-cert-top { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.rg-cert-logo { width: 34px; height: 34px; color: var(--accent); }
.rg-cert-brand { font: 700 1rem var(--hfont); letter-spacing: .02em; }
.rg-cert-kick { display: block; font: 600 .72rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent2); margin-bottom: 10px; }
.rg-cert-name { font: 700 2rem var(--hfont); margin: 0 0 4px; }
.rg-cert-line { color: var(--muted); margin: 0 0 4px; }
.rg-cert-scn { font: 600 1.2rem var(--hfont); margin: 0 0 18px; color: var(--accent); }
.rg-cert-stats { display: flex; justify-content: center; gap: 28px; margin-bottom: 16px; }
.rg-cert-stats span { display: grid; }
.rg-cert-stats b { font: 700 1.1rem var(--hfont); }
.rg-cert-stats small { color: var(--dim); font: 600 .66rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.rg-cert-certs { color: var(--muted); font-size: .88rem; }
.rg-cert-id { font: 500 .74rem var(--mono); color: var(--dim); margin: 6px 0 0; }

/* ---------- Home card ---------- */
.rg-homecard { display: grid; gap: 10px; }
.rg-home-h { display: flex; align-items: center; gap: 8px; font-family: var(--hfont); font-weight: 700; }
.rg-home-h .ico { color: var(--accent); }
.rg-home-scn { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.rg-home-scn:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.rg-home-scn b { font-family: var(--hfont); font-size: .95rem; }
.rg-home-scn small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- ack + upgrade dialogs ---------- */
.rg-ack ul, .rg-up-list { margin: 10px 0; padding-left: 20px; display: grid; gap: 7px; }
.rg-ack li { font-size: .92rem; }
.rg-ack-chk { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: .9rem; cursor: pointer; }
.rg-ack-chk input { margin-top: 2px; accent-color: var(--accent); }

/* ---------- admin ---------- */
.rg-admin-keep { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: .9rem; }
.rg-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rg-preview ol { padding-left: 18px; display: grid; gap: 10px; }
.rg-preview code { font-size: .78rem; overflow-wrap: anywhere; color: var(--accent); }

/* perk line on pricing tiles */
.pperk { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: .82rem; color: var(--accent2); }
.pperk .ico { width: 14px; height: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) { .rg-work { grid-template-columns: 1fr; } .rg-obj { position: static; } }
@media (max-width: 560px) { .rg-stat-row { grid-template-columns: repeat(2, 1fr); } .rg-grid { grid-template-columns: 1fr; } .rg-cert-stats { gap: 16px; } .rg-cert-name { font-size: 1.5rem; } }

@media print { .head, .bottom-bar, .rg-back, .rg-debrief-acts, .season-bar { display: none !important; } .rg-cert { box-shadow: none; } }

/* ---------- upgrade dialog (ReconHire style) ---------- */
.rg-up-modal{--ug:linear-gradient(135deg,var(--accent),var(--accent2));width:min(560px,100%);padding:0;overflow:hidden;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.rg-up-modal::before{content:"";display:block;height:4px;background:var(--ug)}
.rg-up-modal>.spread{padding:18px 22px 0}
.rg-up-modal>.spread h3{font-family:var(--hfont);font-size:1.15rem}
.rg-up-modal>.row{padding:0 22px 20px}
.rg-up{padding:12px 22px 0}
.rg-up-hero{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;color:#e8ecff;
  background:radial-gradient(120% 140% at 100% 0,color-mix(in srgb,var(--accent2) 45%,transparent),transparent 60%),linear-gradient(160deg,#0b1020,#151b33);
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),radial-gradient(120% 140% at 100% 0,color-mix(in srgb,var(--accent2) 45%,transparent),transparent 60%),linear-gradient(160deg,#0b1020,#151b33);background-size:22px 22px,22px 22px,auto,auto}
.rg-up-hex{flex:none;display:grid;place-items:center;width:52px;height:58px;background:var(--ug);color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 10px 28px -10px var(--accent)}
.rg-up-hex .ico{width:24px;height:24px}
.rg-up-kick{display:block;font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#a5b4fc}
.rg-up-h{display:block;font:700 1.25rem var(--hfont);margin:2px 0 6px;color:#fff}
.rg-up-hero p{margin:0;font-size:.9rem;line-height:1.5;color:#c7cdea}
.rg-up-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.rg-up-list li{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rg-up-pic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.rg-up-pic .ico{width:17px;height:17px}
.rg-up-list b{display:block;font-size:.92rem}
.rg-up-list small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35}
.rg-up-note{display:flex;gap:6px;align-items:center;margin:12px 0 0;color:var(--dim);font-size:.8rem}
.rg-up-note .ico{width:14px;height:14px}
.rg-up-cta{background:var(--ug);border:0;box-shadow:0 10px 26px -12px var(--accent)}
@media (max-width:520px){.rg-up-hero{flex-direction:column}.rg-up-modal>.row{flex-direction:column-reverse}.rg-up-modal>.row .btn{width:100%;justify-content:center}}
/* free-this-month and locked scenario cards */
.rg-card.rg-free{border-color:color-mix(in srgb,var(--good) 45%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--good) 25%,transparent),0 14px 30px -20px var(--good)}
.rg-chip.rg-freechip{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good);display:inline-flex;align-items:center;gap:4px}
.rg-chip.rg-freechip .ico{width:12px;height:12px}
.rg-card.rg-locked h3,.rg-card.rg-locked .rg-syn{opacity:.78}
.rg-card.rg-locked .rg-diff{opacity:.55}
/* Recruit-only plan: chip + locked higher difficulties (range-ui.js scenarioCard) */
.rg-chip.rg-recruitchip{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);display:inline-flex;align-items:center;gap:4px}
.rg-chip.rg-recruitchip .ico{width:12px;height:12px}
.rg-difflock{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
.rg-difflock-b{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;border:1px dashed var(--line);background:transparent;color:var(--muted);font:600 .74rem var(--mono);cursor:pointer}
.rg-difflock-b .ico{width:11px;height:11px}
.rg-difflock-b:hover,.rg-difflock-b:focus-visible{border-color:var(--accent);color:var(--accent)}
/* not passed (under 70%): amber chip on catalog cards and a note on the debrief */
.rg-chip.rg-fail{background:color-mix(in srgb,var(--warn,#d97706) 15%,transparent);color:var(--warn,#b45309);display:inline-flex;align-items:center;gap:4px}
.rg-chip.rg-fail .ico{width:12px;height:12px}
.rg-failnote{margin:4px 0 0;color:var(--warn,#b45309);font-weight:600;font-size:.9rem}
html[data-theme="dark"] .rg-chip.rg-fail,html[data-theme="dark"] .rg-failnote{color:#fbbf24}

/* "classified" mission complete stamp on passed scenarios */
.rg-card{position:relative}
.rg-card.done{border-color:color-mix(in srgb,#22c55e 40%,var(--line))}
.rg-stamp{position:absolute;top:44px;right:14px;z-index:2;display:grid;justify-items:center;gap:1px;padding:6px 12px 7px;transform:rotate(-9deg);pointer-events:none;
  border:3px double #16a34a;border-radius:8px;color:#16a34a;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;
  background:repeating-linear-gradient(-45deg,color-mix(in srgb,#22c55e 7%,transparent) 0 6px,transparent 6px 12px),color-mix(in srgb,var(--surface) 80%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,#22c55e 25%,transparent),0 0 18px -4px rgba(34,197,94,.55);opacity:.92;
  -webkit-mask-image:radial-gradient(circle at 30% 40%,#000 60%,rgba(0,0,0,.82) 61%,#000 75%);mask-image:radial-gradient(circle at 30% 40%,#000 60%,rgba(0,0,0,.82) 61%,#000 75%)}
.rg-stamp b{font:800 1.25rem/1 var(--hfont);letter-spacing:.22em}
.rg-stamp-k,.rg-stamp-s{font-size:.56rem;font-weight:700;opacity:.9}
html[data-theme="dark"] .rg-stamp{color:#4ade80;border-color:#4ade80}
@media (max-width:520px){.rg-stamp{top:40px;right:8px;padding:5px 9px}.rg-stamp b{font-size:1.05rem}}
.rg-stamp{top:12px;right:12px;padding:4px 10px 5px;transform:rotate(-7deg);background:var(--surface)}
.rg-stamp b{font-size:1rem}
.rg-stamp-k,.rg-stamp-s{font-size:.5rem}
.rg-card.done .rg-card-top{padding-right:120px}

/* console cards: full-width header band, padded content, and space between stacked cards */
.card:has(>.rg-console-h){padding:0;overflow:hidden}
.card:has(>.rg-console-h)>.rg-console-h{border-radius:0}
.card:has(>.rg-console-h)>:not(.rg-console-h){margin:16px 18px}
.card:has(>.rg-console-h)>.rg-tablewrap{margin:8px 10px 12px}
.card:has(>.rg-console-h)>.rg-badges{margin-top:16px;margin-bottom:18px}
.card:has(>.rg-console-h)+.card:has(>.rg-console-h){margin-top:16px}

/* Catalog: one box, tracks open in place */
.rg-box { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rg-acc { border: 1px solid var(--line, rgba(128,128,128,.25)); border-radius: 14px; background: var(--card, transparent); overflow: hidden; }
.rg-acc.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line, #888)); }
.rg-acc-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: none; border: 0; color: inherit; font: 600 .98rem var(--hfont); text-align: left; cursor: pointer; }
.rg-acc-h.solo { cursor: default; }
button.rg-acc-h:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rg-acc-n { margin-left: auto; font-weight: 400; }
.rg-acc-c { display: inline-flex; transition: transform .2s; opacity: .7; }
.rg-acc-c svg { width: 16px; height: 16px; }
.rg-acc-h[aria-expanded="true"] .rg-acc-c { transform: rotate(180deg); }
.rg-acc .rg-grid { padding: 4px 14px 16px; }
@media (max-width: 600px) { .rg-acc .rg-grid { padding: 4px 8px 12px; } .rg-acc-h { padding: 11px 12px; } }

/* learn.css */
/* Recon Learning (learn-ui.js). Uses the site's tokens so light and dark both work. */
.ln-hero{padding:22px 24px;margin-bottom:12px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface) 60%,color-mix(in srgb,var(--accent2) 12%,var(--surface)));border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.ln-hero h1{margin:4px 0 6px;font:800 clamp(1.5rem,2.6vw,2rem)/1.15 var(--hfont)}.ln-hero p{margin:0;color:var(--muted);max-width:44em}
.ln-kick{font:700 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
.ln-cont{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:12px;color:inherit;text-decoration:none;border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.ln-cont:hover{text-decoration:none;box-shadow:0 10px 26px -16px color-mix(in srgb,var(--accent) 60%,transparent)}
.ln-cont-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}.ln-cont-ic .ico{width:22px;height:22px}
.ln-cont-t{flex:1;min-width:0;display:grid;gap:1px}.ln-cont-t small{color:var(--muted);font-size:.78rem}.ln-cont-t b{font:700 1.02rem var(--hfont)}
.ln-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:14px 2px 8px}.ln-sec-h h2{margin:0;font:700 1.1rem var(--hfont)}
.ln-paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ln-path{display:flex;flex-direction:column;gap:8px;padding:16px;color:inherit;text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s}
.ln-path:hover{text-decoration:none;transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 12px 26px -18px color-mix(in srgb,var(--accent) 55%,transparent)}
.ln-path h3{margin:2px 0 0;font:700 1.08rem var(--hfont)}.ln-blurb{margin:0;color:var(--muted);font-size:.9rem;flex:1}
.ln-path-top{display:flex;align-items:center;justify-content:space-between}
.ln-path-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#3b82f6,#6366f1)}.ln-path-ic .ico{width:21px;height:21px}
.ln-path-ic.big{width:60px;height:60px;border-radius:16px}.ln-path-ic.big .ico{width:30px;height:30px}
.ic-networking{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.ic-operating-systems{background:linear-gradient(135deg,#10b981,#0d9488)}.ic-security-fundamentals{background:linear-gradient(135deg,#8b5cf6,#6366f1)}.ic-soc-intro{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.ln-level{font:700 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:3px 8px;border-radius:999px;align-self:flex-start}
.ln-meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted);font-size:.8rem}
.ln-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}.ln-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}
.ln-prog{display:flex;align-items:center;justify-content:space-between}.ln-prog small{color:var(--muted)}.ln-go{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-size:.88rem}.ln-go .ico{width:14px;height:14px}
.ln-stats{display:grid;gap:8px}.ln-stat-row{display:flex;gap:22px}.ln-stat-row b{display:block;font:800 1.3rem var(--hfont);color:var(--accent)}.ln-stat-row small{color:var(--muted)}
/* path page */
.ln-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.84rem;color:var(--muted);margin:0 2px 10px}.ln-sep{opacity:.5}
.ln-phead{display:flex;gap:16px;align-items:flex-start;padding:20px;margin-bottom:10px}.ln-phead-t{display:grid;gap:6px;min-width:0;flex:1}.ln-phead h1{margin:0;font:800 1.6rem/1.15 var(--hfont)}.ln-phead p{margin:0;color:var(--muted)}
.ln-pbar{display:grid;gap:4px;margin-top:4px}.ln-pbar small{color:var(--muted)}
.ln-start{margin-bottom:10px;width:100%;justify-content:center}
.ln-mod{padding:0;margin-bottom:8px;overflow:hidden}.ln-mod>summary{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;list-style:none}.ln-mod>summary::-webkit-details-marker{display:none}
.ln-mod>summary b{flex:1;font:700 1rem var(--hfont)}.ln-mod>summary .ico:last-child{width:16px;height:16px;transition:transform .2s;opacity:.6}.ln-mod[open]>summary .ico:last-child{transform:rotate(180deg)}
.ln-mod-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 .8rem var(--mono);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.ln-less{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line2);color:inherit;text-decoration:none}.ln-less:hover{text-decoration:none;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.ln-tick{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}.ln-tick.on{background:var(--good,#16a34a);border-color:var(--good,#16a34a);color:#fff}.ln-tick .ico{width:13px;height:13px}
.ln-less-t{flex:1;min-width:0;display:grid;gap:1px}.ln-less-t small{color:var(--muted);font-size:.8rem}.ln-less-m{display:flex;align-items:center;gap:8px;flex:none}
.ln-vid{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;color:var(--accent)}.ln-vid .ico{width:13px;height:13px}
/* lesson */
.ln-lhead{padding:18px 20px;margin-bottom:10px;display:grid;gap:4px}.ln-lhead h1{margin:0;font:800 1.6rem/1.15 var(--hfont)}.ln-lhead p{margin:0;color:var(--muted)}.ln-done{justify-self:start;margin-top:4px}
.ln-video{padding:0;margin-bottom:10px;overflow:hidden}.ln-frame{position:relative;aspect-ratio:16/9;background:#000}.ln-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ln-soon{display:flex;align-items:center;gap:14px;padding:18px 20px;background:repeating-linear-gradient(135deg,transparent 0 12px,color-mix(in srgb,var(--text) 3%,transparent) 12px 24px)}
.ln-soon-ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.ln-soon div{display:grid;gap:2px}.ln-soon small{color:var(--muted)}
.ln-vadm{padding:14px 16px;margin-bottom:10px;display:grid;gap:6px;border-style:dashed}.ln-vadm .row{display:flex;gap:8px}.ln-vadm .input{flex:1;min-width:0}
.ln-read{padding:20px 24px;margin-bottom:10px;font-size:1.02rem;line-height:1.65}.ln-read h2{margin:18px 0 6px;font:700 1.15rem var(--hfont)}.ln-read h2:first-child{margin-top:0}.ln-read p{margin:0 0 10px}.ln-read ul{margin:0 0 12px;padding-left:20px;display:grid;gap:4px}
.ln-quiz{padding:18px 20px;margin-bottom:10px}.ln-quiz h2{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:700 1.1rem var(--hfont)}.ln-quiz>p{margin:0 0 12px}
.ln-q{margin:14px 0}.ln-q>b{display:block;margin-bottom:8px}.ln-opts{display:grid;gap:6px}
.ln-opt{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font:inherit}
.ln-opt:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}.ln-opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.ln-radio{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line)}.ln-opt.on .ln-radio{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 45%,transparent 50%)}
.graded .ln-opt{cursor:default}.ln-opt.right{border-color:var(--good,#16a34a);background:color-mix(in srgb,var(--good,#16a34a) 12%,var(--surface))}.ln-opt.wrong{border-color:var(--bad,#dc2626);background:color-mix(in srgb,var(--bad,#dc2626) 10%,var(--surface))}
.ln-why{margin-top:8px;padding:8px 12px;border-radius:8px;font-size:.9rem;background:color-mix(in srgb,var(--text) 5%,transparent)}.ln-why.ok{border-left:3px solid var(--good,#16a34a)}.ln-why.no{border-left:3px solid var(--bad,#dc2626)}
.ln-qfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ln-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px}
@media (max-width:640px){.ln-phead{flex-direction:column}.ln-cont{flex-wrap:wrap}.ln-read{padding:16px}}

.ln-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
html body .ln-chips .ln-chip,html body .cr-tabs .ln-chip{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:6px 14px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s}
html body .ln-chips .ln-chip:hover,html body .cr-tabs .ln-chip:hover{border-color:var(--accent);color:var(--accent)}
html body .ln-chips .ln-chip.on,html body .cr-tabs .ln-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ln-group{margin:0 0 18px}.ln-group-h{margin:0 0 8px;font-size:1rem}
.tint0{background:linear-gradient(135deg,#06b6d4,#0891b2)}.tint1{background:linear-gradient(135deg,#ec4899,#be185d)}.tint2{background:linear-gradient(135deg,#84cc16,#4d7c0f)}.tint3{background:linear-gradient(135deg,#f97316,#c2410c)}.tint4{background:linear-gradient(135deg,#14b8a6,#0f766e)}.tint5{background:linear-gradient(135deg,#6366f1,#4338ca)}.tint6{background:linear-gradient(135deg,#eab308,#a16207)}
/* admin editor */
.lna-list{display:grid;gap:10px;margin-top:12px}
.lna-path>summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none}
.lna-path>summary::-webkit-details-marker{display:none}
.lna-mod{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}.lna-modh{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.lna-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}.lna-row.off .lna-t>span:first-child{text-decoration:line-through;opacity:.6}
.lna-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.lna-acts{display:inline-flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.lna-tag{font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:1px 8px;background:var(--surface2);color:var(--muted)}
.lna-tag.cust{background:rgba(37,99,235,.14);color:var(--accent)}.lna-tag.ed{background:rgba(245,158,11,.18);color:#b45309}.lna-tag.hid{background:rgba(239,68,68,.15);color:var(--bad)}.lna-tag.vid{background:rgba(16,185,129,.15);color:var(--good)}
.lna-addl{margin-top:8px}
.lna-lab{display:grid;gap:4px}.lna-lab>span{font-size:.82rem;font-weight:600;color:var(--muted)}
.lna-blocks{display:grid;gap:10px}.lna-blk{display:grid;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface2)}
.lna-opt{display:flex;align-items:center;gap:8px}.lna-opt .input{flex:1}
.lna-form{max-height:70vh;overflow:auto;padding-right:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:640px){.grid2{grid-template-columns:1fr}}
.lna-vid{margin-top:12px}.lna-vid .spread{gap:12px;flex-wrap:wrap}

/* marketplace */
.ln-market-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
@media(max-width:700px){.ln-market-cta{grid-template-columns:1fr}}
.ln-mk{display:flex;align-items:center;gap:12px;padding:12px 14px;color:inherit;text-decoration:none}.ln-mk:hover{border-color:var(--accent)}
.ln-mk>div{flex:1;min-width:0}.ln-mk b{display:block}.ln-mk small{color:var(--muted)}
.ln-mk-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444)}.ln-mk-ic.alt{background:linear-gradient(135deg,#6366f1,#2563eb)}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.mk-card{display:flex;flex-direction:column;gap:8px;padding:16px;color:inherit;text-decoration:none}.mk-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.mk-card h3{margin:0;font-size:1.02rem}.mk-by{color:var(--muted);font-size:.85rem}.mk-blurb{color:var(--muted);font-size:.9rem;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mk-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:8px}.mk-price{font-weight:800;font-size:1.1rem}.mk-tag{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 9px;background:var(--surface2);color:var(--muted)}
.mk-tag.own{background:rgba(16,185,129,.16);color:var(--good)}.mk-tag.pend{background:rgba(245,158,11,.18);color:#b45309}.mk-tag.bad{background:rgba(239,68,68,.15);color:var(--bad)}.mk-tag.ok{background:rgba(16,185,129,.16);color:var(--good)}
.mk-bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;align-items:center}.mk-bar .input{max-width:260px}
.mk-lessons{display:grid;gap:0}.mk-les{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);color:inherit;text-decoration:none}.mk-les:last-child{border:0}.mk-les.lock{opacity:.7}
.mk-buy{position:sticky;top:76px;display:grid;gap:10px}.mk-buy .mk-price{font-size:1.6rem}.mk-pay{display:grid;gap:8px}
.mk-locked{text-align:center;padding:28px 18px;display:grid;gap:10px;justify-items:center}
.cr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.cr-tile{padding:14px}.cr-tile small{color:var(--muted);display:block}.cr-tile b{font-size:1.4rem}
.cr-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.cr-chart{display:flex;align-items:flex-end;gap:3px;height:120px;padding:8px 0}.cr-chart i{flex:1;min-width:3px;background:var(--accent);border-radius:3px 3px 0 0;opacity:.85}.cr-chart i.z{background:var(--line);height:2px!important}
.cr-table{width:100%;border-collapse:collapse;font-size:.9rem}.cr-table th,.cr-table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}.cr-table th{color:var(--muted);font-weight:600;font-size:.8rem}.cr-table .num{text-align:right;white-space:nowrap}
.cr-note{padding:10px 12px;border-radius:10px;background:var(--surface2);font-size:.9rem}.cr-note.bad{background:rgba(239,68,68,.12)}.cr-note.warn{background:rgba(245,158,11,.14)}
.cr-prob{margin:6px 0 0;padding-left:18px}

/* premium.css */
/* Premium perks (premium-ui.js): salary insights, deep review, featured highlight, early access, credit gate */
.pm-featured{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font:700 .7rem var(--mono);letter-spacing:.03em;color:#8a6100;background:linear-gradient(135deg,#fff3c4,#ffe08a);border:1px solid #e9c24d;vertical-align:middle;margin-left:6px}
.pm-featured .ico{width:11px;height:11px}
.hh-card.rh-featured,.rh-featured{box-shadow:0 0 0 2px #e9c24d,0 6px 20px color-mix(in srgb,#e9c24d 25%,transparent);position:relative}
.hh-card>.pm-featured{position:absolute;top:10px;right:10px;margin:0}
.pm-early{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font:700 .68rem var(--mono);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);vertical-align:middle}
.pm-early .ico{width:11px;height:11px}
.pm-up{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border-radius:12px;border:1px dashed var(--line);font-size:.9rem;color:var(--muted)}
.pm-up>span{flex:1;min-width:200px}.pm-up>.ico{color:var(--accent)}
.pm-salform{display:grid;grid-template-columns:2fr 1.4fr auto;gap:10px;align-items:end;margin-bottom:14px}
.pm-salform .field{margin:0}
.pm-sal{display:grid;gap:16px}
.pm-big{font:800 2.4rem/1.1 var(--hfont);color:var(--text)}
.pm-empty{display:grid;gap:4px;justify-items:start}.pm-empty .ico{width:26px;height:26px;color:var(--muted)}
.pm-range{position:relative;height:12px;border-radius:999px;background:var(--surface2);border:1px solid var(--line)}
.pm-range i{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.pm-range b{position:absolute;top:-4px;width:4px;height:20px;margin-left:-2px;border-radius:2px;background:var(--text)}
.pm-range-l{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:.84rem;color:var(--muted);flex-wrap:wrap}
.pm-range-l b{color:var(--text)}
.pm-blur{filter:blur(5px);user-select:none;pointer-events:none;opacity:.7}.pm-blur .pm-range i{left:20%;width:45%}
.pm-top h4,.pm-trend h4{margin:0 0 8px;font:700 .95rem var(--hfont)}
.pm-top ol{margin:0;padding-left:20px;display:grid;gap:6px}.pm-top li span{margin-right:8px}.pm-top li small{margin-left:8px}
.pm-bars{display:flex;align-items:flex-end;gap:8px;height:150px}
.pm-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.pm-bar i{display:block;width:100%;max-width:42px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.pm-bar small{font:600 .7rem var(--mono);color:var(--muted)}
.pm-earlybox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.88rem;color:var(--muted);padding:10px;border-radius:10px;background:var(--surface2)}
.pm-fine{font-size:.8rem;color:var(--muted);margin:10px 2px}
.pm-jobsal{margin:10px 0 0;font-size:.88rem;color:var(--muted)}.pm-jobsal:empty{display:none}
.pm-jobsal .ico{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.pm-jobsal.above b{color:var(--good)}.pm-jobsal.below b{color:var(--bad)}
.pm-usage{margin:0 0 0 10px;font-size:.84rem}
.pm-deep{display:grid;gap:16px;margin-top:12px}
.pm-deep h4{margin:0 0 8px;font:700 1rem var(--hfont)}
.pm-deep-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pm-deep-head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}.pm-deep-head h3{margin:2px 0 4px;font:700 1.15rem var(--hfont)}.pm-deep-head p{margin:0;color:var(--muted)}
.pm-fixes{margin:0;padding-left:20px;display:grid;gap:6px}
.pm-pri{display:inline-block;min-width:58px;margin-right:8px;padding:1px 6px;border-radius:6px;font:700 .68rem var(--mono);text-align:center}
.pm-pri.p1{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}.pm-pri.p2{background:color-mix(in srgb,var(--accent2) 18%,transparent);color:var(--accent2)}.pm-pri.p3{background:var(--surface2);color:var(--muted)}
.pm-req{width:100%;border-collapse:collapse;font-size:.88rem}.pm-req td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.pm-req td:first-child{white-space:nowrap;width:1%;font:600 .78rem var(--mono)}.pm-req td .ico{width:13px;height:13px;margin-right:4px;vertical-align:-2px}
.pm-req small{display:block;color:var(--muted);margin-top:2px}
.pm-req .st-met td:first-child{color:var(--good)}.pm-req .st-partial td:first-child{color:var(--accent2)}.pm-req .st-missing td:first-child{color:var(--bad)}
.pm-bullet{padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;display:grid;gap:4px;justify-items:start}
.pm-old{margin:0;color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent);font-size:.88rem}
.pm-new{margin:0;font-size:.92rem}.pm-new .ico{width:13px;height:13px;color:var(--accent);margin-right:4px}
.pm-ats{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.88rem}.pm-ats li{display:flex;gap:6px}.pm-ats .ico{width:14px;height:14px;flex:none;margin-top:3px}.pm-ats li.bad .ico{color:var(--bad)}
.pm-flag{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:end;padding:10px 0;border-top:1px solid var(--line)}.pm-flag b{display:block}.pm-flag .field{margin:0}
.pm-earlylist ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.9rem}
@media (max-width:640px){.pm-salform{grid-template-columns:1fr}.pm-flag{grid-template-columns:1fr 1fr}.pm-deep-head{grid-template-columns:1fr}}
@media print{body.pm-printing *{visibility:hidden}body.pm-printing .pm-deep,body.pm-printing .pm-deep *{visibility:visible}body.pm-printing .pm-deep{position:absolute;inset:0}.no-print{display:none!important}}

/* soc.css */
/* ReconHire - Admin -> Security operations (SOC). Theme-variable only, so light and dark both work.
   No inner scrollbars: tables wrap in .table-wrap (horizontal scroll only when truly needed), everything else wraps. */

.soc-subtabs { margin: 14px 0 16px; }
.soc-pane { display: grid; gap: 16px; min-width: 0; }
.soc-pane > .card { margin: 0; }

/* status banner */
.soc-status { display: flex; align-items: center; gap: 14px; }
.soc-status > div { flex: 1; min-width: 0; }
.soc-status small { display: block; }
.soc-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--good); box-shadow: 0 0 0 5px color-mix(in srgb, var(--good) 20%, transparent); }
.soc-status.warn .soc-dot { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.soc-status.bad .soc-dot { background: var(--bad); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bad) 22%, transparent); }

/* stat tiles */
.soc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.soc-tile { display: flex; flex-direction: column; gap: 3px; padding: 15px 16px; margin: 0; }
.soc-tile b { font: 700 1.55rem var(--hfont); line-height: 1.1; }
.soc-tile small { font-size: .78rem; }
.soc-spark { width: 100%; height: 40px; margin-top: 4px; }

/* two-column layout that stacks on phones */
.soc-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.soc-two > .card { margin: 0; }
.soc-two .stack { display: grid; gap: 16px; }
@media (max-width: 760px) { .soc-two { grid-template-columns: 1fr; } }

/* bar lists */
.soc-bars { display: grid; gap: 8px; }
.soc-bar { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; font-size: .86rem; }
.soc-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.soc-bar-t { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.soc-bar-t i { display: block; height: 100%; border-radius: 999px; }
.soc-bar-n { font: 600 .82rem var(--mono); color: var(--text); min-width: 28px; text-align: right; }

/* severity + action chips */
.chip.soc-sev { font-weight: 600; }
.chip.soc-sev.lo { background: color-mix(in srgb, var(--info) 14%, transparent); color: color-mix(in srgb, var(--info) 92%, var(--text)); }
.chip.soc-sev.mid { background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.chip.soc-sev.hi { background: color-mix(in srgb, var(--bad) 16%, transparent); color: color-mix(in srgb, var(--bad) 92%, var(--text)); }
.chip.soc-sev.crit { background: var(--bad); color: #fff; }
.chip.soc-blocked { background: color-mix(in srgb, var(--bad) 16%, transparent); color: color-mix(in srgb, var(--bad) 92%, var(--text)); font-weight: 600; }
.chip.soc-detect { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.chip.soc-ext { background: color-mix(in srgb, var(--accent2) 14%, transparent); color: color-mix(in srgb, var(--accent2) 85%, var(--text)); }
.chip.st-open, .chip.st-investigating { background: color-mix(in srgb, var(--accent) 15%, transparent); color: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.chip.st-contained { background: color-mix(in srgb, var(--info) 15%, transparent); color: color-mix(in srgb, var(--info) 90%, var(--text)); }
.chip.st-resolved { background: color-mix(in srgb, var(--good) 15%, transparent); color: color-mix(in srgb, var(--good) 55%, var(--text)); }
.chip.st-false-positive { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); }

.soc-mitre { display: inline-block; font: 600 .72rem var(--mono); padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--accent2) 12%, transparent); color: color-mix(in srgb, var(--accent2) 85%, var(--text)); white-space: nowrap; }
.soc-mitres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* event tables */
.soc-evtable { font-size: .82rem; }
.soc-evtable td { vertical-align: middle; }
.soc-sample { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: .78rem; }
.soc-ipcell a { font-family: var(--mono); }
.soc-live .live { display: inline-block; vertical-align: middle; }
.soc-livewrap { min-height: 60px; }

/* filters */
.soc-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* block list */
.soc-bl-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.soc-bl-add .input { flex: 1 1 160px; min-width: 120px; }

/* incidents */
.soc-seg { margin-bottom: 4px; flex-wrap: wrap; }
.soc-inc { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: border-color .15s, transform .1s; margin: 0; }
.soc-inc:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.soc-inc-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.soc-inc-l b { display: block; }
.soc-inc-detail { display: grid; gap: 12px; }
.soc-inc-head { display: flex; align-items: flex-start; gap: 12px; }
.soc-inc-ctl { display: flex; gap: 14px; flex-wrap: wrap; }
.soc-playbook { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.soc-playbook svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 2px; }
.soc-playbook p { font-size: .88rem; color: var(--muted); }
.soc-timeline { display: grid; gap: 10px; }
.soc-tl { padding-left: 14px; border-left: 2px solid var(--line2); }

/* service status cards */
.soc-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.soc-svc { margin: 0; display: grid; gap: 8px; }
.soc-svc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.soc-svc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.soc-svc-top b { flex: 1; min-width: 0; }
.soc-svc-st { font-weight: 600; font-size: .82rem; }
.soc-svc-spark { height: 36px; }
.soc-strip { display: flex; gap: 2px; flex-wrap: wrap; }
.soc-strip i { width: 5px; height: 16px; border-radius: 2px; background: var(--dim); }
.soc-strip i.st-operational { background: var(--good); }
.soc-strip i.st-degraded { background: var(--accent); }
.soc-strip i.st-down { background: var(--bad); }
.soc-strip i.st-unknown { background: color-mix(in srgb, var(--text) 14%, transparent); }
.soc-uptime { display: flex; gap: 14px; font-size: .78rem; color: var(--dim); flex-wrap: wrap; }
.soc-uptime b { color: var(--text); font-family: var(--mono); }

/* posture */
.soc-posthead { display: flex; align-items: center; gap: 18px; }
.soc-posthead > div { flex: 1; min-width: 0; }
.soc-ringbox { position: relative; width: 92px; height: 92px; flex: none; display: grid; place-items: center; }
.soc-ring { width: 92px; height: 92px; }
.soc-ringval { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.soc-ringval b { font: 700 1.5rem var(--hfont); }
.soc-ringval small { display: block; font-size: .64rem; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.soc-post { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.soc-post:first-of-type { border-top: 0; }
.soc-post-i { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.soc-post-i svg { width: 15px; height: 15px; }
.soc-post-i.is-pass { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.soc-post-i.is-warn { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.soc-post-i.is-fail { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }

/* investigate */
.soc-lookup { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.soc-lookup .input { flex: 1 1 180px; min-width: 140px; }
.soc-or { color: var(--dim); font-size: .85rem; }
.soc-sum { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; color: var(--muted); font-size: .88rem; }
.soc-sum b { color: var(--text); font-family: var(--mono); }
.soc-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* settings tables */
.soc-rules td { vertical-align: middle; }
.soc-rules .input { max-width: 150px; }

@media (max-width: 520px) {
  .soc-tile b { font-size: 1.3rem; }
  .soc-sample { max-width: 140px; }
  .soc-bar { grid-template-columns: minmax(0, 1fr) 60px auto; }
}

/* incidents: block and unblock */
.soc-inc{gap:12px}
.soc-inc-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.soc-inc-r .chip .ico{width:13px;height:13px}
.soc-blocknote{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:9px 12px;border-radius:10px;font-size:.88rem;background:color-mix(in srgb,var(--bad) 9%,transparent);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent)}
.soc-blocknote .ico{width:16px;height:16px;color:var(--bad);flex:none}
.soc-blockopts{display:grid;gap:12px}
.soc-radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.soc-radio:has(input:checked){border-color:color-mix(in srgb,var(--accent2,#2563eb) 55%,transparent);background:color-mix(in srgb,var(--accent2,#2563eb) 7%,transparent)}
.soc-radio input{margin-top:4px}
.soc-radio span{display:grid;gap:2px}
.soc-radio small{overflow-wrap:anywhere}
@media (max-width:620px){.soc-inc{flex-wrap:wrap}.soc-inc-r{width:100%;justify-content:flex-start}}

/* ================= spacing pass: one 16px rhythm everywhere in the Security hub ================= */
.soc-pane{gap:16px}
.soc-pane .card{padding:18px 20px;margin:0}
.soc-pane .card>h3:first-child,.soc-pane .card>.spread:first-child h3{margin:0 0 12px;font-size:1.02rem}
.soc-grid{display:flex;flex-wrap:wrap;gap:16px}
.soc-grid>.soc-tile{flex:1 1 200px;min-width:0;padding:16px 18px}
.soc-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.soc-three>.card{margin:0;min-width:0}
.soc-status{padding:14px 18px}
.soc-filters,.soc-pane>.row,.soc-pane>.spread{gap:10px;flex-wrap:wrap;margin:0}
.soc-seg{margin:0}
.soc-pane .table-wrap{margin:0}
.soc-pane .stack{display:grid;gap:12px}
.soc-inc{padding:14px 18px}
@media (max-width:1100px){.soc-three{grid-template-columns:1fr 1fr}.soc-three>.card:last-child{grid-column:1 / -1}}
@media (max-width:700px){.soc-three{grid-template-columns:1fr}.soc-three>.card:last-child{grid-column:auto}.soc-pane .card{padding:14px 16px}}
@media (max-width:600px){.soc-grid{gap:10px}.soc-grid>.soc-tile{flex:1 1 140px;padding:12px 14px}.soc-tile b{font-size:1.3rem}}

/* habits.css */
/* Habits (public/js/habits-ui.js): streak flame, daily challenge, profile viewers, tracker reminders, admin bank.
   Colors come from the theme variables, so light and dark mode both work. */
.hb-card{gap:12px}
.hb-small{font-size:.82rem;margin:0}
.hb-sec{display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.hb-sec .spread a{font-size:.82rem}
.hb-links{display:grid;gap:0;padding-top:6px;border-top:1px solid var(--line)}
.hb-links .act-row .ico{width:16px;height:16px}
.hb-warn span{color:var(--text)}.hb-warn .ico{color:var(--accent)}
.hb-iv b{font-size:.78rem}

/* flame + streak */
.hb-flame .o{fill:color-mix(in srgb,var(--text) 18%,transparent)}
.hb-flame .i{fill:color-mix(in srgb,var(--text) 8%,transparent)}
.hb-flame.lit .o{fill:#f97316}
.hb-flame.lit .i{fill:#fde047}
html[data-theme="dark"] .hb-flame.lit .o{fill:#fb923c}
.hb-streak{display:flex;align-items:center;gap:12px}
.hb-flame-wrap{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;flex:none;background:color-mix(in srgb,var(--text) 5%,transparent)}
.hb-flame-wrap.lit{background:color-mix(in srgb,#f97316 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#f97316 28%,transparent)}
.hb-flame-wrap.lit .hb-flame{animation:hbFlicker 2.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes hbFlicker{0%,100%{transform:scale(1)}50%{transform:scale(1.07) rotate(-2deg)}}
.reduce-motion .hb-flame-wrap.lit .hb-flame{animation:none}
@media (prefers-reduced-motion:reduce){.hb-flame-wrap.lit .hb-flame{animation:none}}
.hb-streak.compact .hb-flame-wrap{width:44px;height:44px;border-radius:13px}
.hb-streak-t{display:grid;gap:1px;min-width:0}
.hb-streak-t b{font:700 1.08rem/1.2 var(--hfont)}
.hb-streak-t small{color:var(--muted);font-size:.8rem;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.hb-streak-t .hb-msg{color:var(--dim)}
.hb-champ{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font:600 .74rem/1.4 var(--font);color:#a16207;background:color-mix(in srgb,#eab308 18%,transparent)}
html[data-theme="dark"] .hb-champ{color:#fde047}
.hb-champ.sm{padding:1px 6px;margin-left:6px;font-size:.7rem;vertical-align:1px}
.hb-trophy{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hb-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.hb-week span{display:grid;justify-items:center;gap:3px}
.hb-week i{display:block;width:100%;max-width:26px;height:8px;border-radius:999px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.hb-week span.on i{background:linear-gradient(90deg,#f97316,#facc15)}
.hb-week small{font:600 .66rem/1 var(--mono);color:var(--dim)}
.hb-week span.today small{color:var(--accent)}
.hb-kinds{margin-top:10px}
.hb-side{padding:16px;display:grid;gap:10px}
.hb-side .btn{justify-self:start}
.hb-mstreak{display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:16px}
.hb-mstreak b{display:block;font-family:var(--hfont)}
.hb-mstreak .hb-champ{margin-left:auto}

/* challenge */
.hb-ch{display:grid;gap:8px}
.hb-ch-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.hb-ch .btn{justify-self:start}
.hb-q{margin:2px 0 4px;font-weight:600;line-height:1.45}
.hb-qcard .hb-q{font-size:1.12rem}
.hb-choices{display:grid;gap:6px}
.hb-choice{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;font-size:.9rem;line-height:1.35;transition:border-color .15s,background .15s}
.hb-choice:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.hb-choice:disabled{cursor:default}
.hb-choice .ico{margin-left:auto;width:18px;height:18px;flex:none}
.hb-letter{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;flex:none;font:700 .74rem/1 var(--mono);background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted)}
.hb-choice.picked{border-color:var(--accent)}
.hb-choice.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--surface))}
.hb-choice.right .hb-letter{background:var(--good);color:#fff}.hb-choice.right .ico{color:var(--good)}
.hb-choice.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--surface))}
.hb-choice.wrong .hb-letter{background:var(--bad);color:#fff}.hb-choice.wrong .ico{color:var(--bad)}
.hb-choice.off{opacity:.62}
.hb-result{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.hb-result.ok{background:color-mix(in srgb,var(--good) 9%,transparent);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
.hb-result.no{background:color-mix(in srgb,var(--bad) 7%,transparent);border-color:color-mix(in srgb,var(--bad) 25%,transparent)}
.hb-result b{font-family:var(--hfont)}
.hb-result.ok b{color:var(--good)}.hb-result.no b{color:var(--bad)}
.hb-pts{justify-self:end;font:700 .84rem/1 var(--mono);color:var(--accent)}
.hb-result small,.hb-result p{grid-column:1/-1}
.hb-result p{margin:4px 0 0;font-size:.88rem;color:var(--text)}

/* challenge page */
.hb-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.hb-qcard,.hb-stats,.hb-rules,.hb-board,.hb-past{padding:18px 20px}
.hb-qcard h3,.hb-stats h3,.hb-rules h3,.hb-past h3{margin:0 0 10px}
.hb-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hb-tiles div{padding:10px 12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);display:grid}
.hb-tiles b{font:700 1.35rem/1.1 var(--hfont);color:var(--accent)}
.hb-tiles small{color:var(--muted);font-size:.76rem}
.hb-champ-line{display:flex;align-items:center;gap:6px;margin:12px 0 0;color:var(--muted);font-size:.88rem}
.hb-champ-line .hb-trophy{color:#ca8a04}
.hb-rule-list{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--muted);font-size:.9rem}
.hb-rule-list b{color:var(--text)}
.hb-lb{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.hb-lb li{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px}
.hb-lb li.me{background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.hb-rank{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;font:700 .78rem/1 var(--mono);color:var(--muted);background:color-mix(in srgb,var(--text) 6%,transparent)}
.hb-rank.top1{background:#facc15;color:#422006}.hb-rank.top2{background:#cbd5e1;color:#1e293b}.hb-rank.top3{background:#fdba74;color:#431407}
.hb-lb-n{display:grid;min-width:0;flex:1}
.hb-lb-n a,.hb-lb-n>span{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-lb-n small{font-size:.74rem}
.hb-lb-p{font:700 .86rem/1 var(--mono);color:var(--accent);white-space:nowrap}
.hb-myrank{display:flex;justify-content:space-between;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px dashed var(--line2);font-size:.88rem;color:var(--muted)}
.hb-past-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hb-past-l li{display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:center}
.hb-past-l li small{grid-column:1/-1}
.hb-past-l li span{display:flex;align-items:center;gap:6px;font-weight:600}
.hb-past-l .hb-trophy{color:#ca8a04}
.hb-past-l b{font:700 .8rem/1 var(--mono);color:var(--muted)}

/* profile viewers */
.hb-vstats{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.hb-vstats .stat small{display:block;margin-top:2px;font-size:.74rem}
.hb-vlist{padding:18px 20px;display:grid;gap:2px}
.hb-vlist h3{margin:0 0 8px}
.hb-vrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:9px 6px;border-radius:12px;color:var(--text)}
a.hb-vrow:hover{background:color-mix(in srgb,var(--text) 4%,transparent);text-decoration:none}
.hb-vrow>div{display:grid;min-width:0}
.hb-vrow>div b{display:flex;align-items:center;gap:4px}
.hb-vrow>div small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-vrow>small{white-space:nowrap;font-size:.78rem}
.hb-anon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted)}
.hb-lock{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:10px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.hb-lock>.ico{width:22px;height:22px;color:var(--accent)}
.hb-lock>div{display:grid}.hb-lock small{color:var(--muted)}
.hb-priv{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px}
.hb-priv>div{display:grid}
.hb-empty{padding:20px 10px;text-align:center;display:grid;justify-items:center;gap:8px}
.hb-empty p{margin:0;color:var(--muted)}

/* tracker */
.hb-rem{display:grid;gap:8px;margin-bottom:14px}
.hb-rem:empty{display:none}
.hb-rem-i{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent)}
.hb-rem-i.iv{border-left-color:var(--good)}
.hb-rem-i>div:not(.hb-rem-a){display:grid;min-width:0}
.hb-rem-i small{color:var(--muted)}
.hb-rem-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.hb-rem-i.iv .hb-rem-ic{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.hb-rem-a{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.hb-rem-a .btn{width:auto}
.hb-ivchip{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 8px;border-radius:999px;font-size:.72rem;font-weight:600;color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.hb-ivchip .ico{width:12px;height:12px}
.hb-ivchip.past{color:var(--muted);background:color-mix(in srgb,var(--text) 6%,transparent)}
.hb-ivfield{display:grid;gap:6px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.hb-ivfield>span{font-size:.85rem;font-weight:600}
.hb-ivfield .row{gap:6px;flex-wrap:wrap}
.hb-ivfield input{flex:1;min-width:190px}
.hb-ivfield>a{justify-self:start}
.hb-draft{display:grid;gap:10px;min-width:min(560px,80vw)}

/* admin */
.hb-adm-filter{gap:8px;margin-top:12px;flex-wrap:wrap}
.hb-adm-filter input{flex:1;min-width:180px}
.hb-adm-q{padding:14px 16px;display:grid;gap:6px}
.hb-adm-q.off{opacity:.65}
.hb-adm-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hb-adm-c{margin:0;padding-left:22px;font-size:.88rem;color:var(--muted);list-style:upper-alpha}
.hb-adm-c li.ok{color:var(--good);font-weight:600}
.hb-adm-c .ico{width:14px;height:14px;vertical-align:-2px;margin-left:4px}
.hb-adm-row{gap:8px;align-items:center;flex-wrap:nowrap}
.hb-adm-row .input{flex:1}
.hb-adm-radio{display:flex;align-items:center;gap:4px;font:700 .8rem var(--mono);cursor:pointer}
.hb-adm-act .switch{margin-top:8px}
.hb-prev{width:100%;height:min(62vh,640px);border:1px solid var(--line);border-radius:12px;background:#fff}

@media (max-width:900px){.hb-grid{grid-template-columns:1fr}}
@media (max-width:620px){
  .hb-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-vstats{grid-template-columns:1fr}
  .hb-rem-i{grid-template-columns:auto 1fr}
  .hb-rem-i>.btn,.hb-rem-a{grid-column:1/-1;justify-content:flex-start;justify-self:start}
  .hb-lock{grid-template-columns:auto 1fr}.hb-lock .btn{grid-column:1/-1;justify-self:start}
  .hb-priv{flex-direction:column;align-items:flex-start}
  .hb-vrow{grid-template-columns:auto 1fr}.hb-vrow>small{grid-column:2}
  .hb-qcard,.hb-stats,.hb-rules,.hb-board,.hb-past,.hb-vlist{padding:14px}
  .hb-draft{min-width:0}
}
@media (max-width:900px){
  .hb-grid{display:flex;flex-direction:column;gap:14px}
  .hb-grid>.stack{display:contents}
  .hb-qcard{order:1}.hb-board{order:2}.hb-stats{order:3}.hb-past{order:4}.hb-rules{order:5}
}

/* Admin → Daily challenge: automatic questions */
.hb-auto{display:grid;gap:14px}
.hb-auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.hb-auto-src{display:grid;gap:8px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--text) 3%,transparent)}
.hb-auto-row .switch{align-items:flex-start}
.hb-auto-row .switch span{display:grid;gap:2px}
.hb-auto-row small{font-size:.8rem;line-height:1.45}
.hb-auto-days{gap:6px;flex-wrap:wrap}
.hb-auto-days .chip{cursor:pointer}
.hb-auto-days .chip.on{background:color-mix(in srgb,var(--accent2,#2563eb) 16%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--accent2,#2563eb) 45%,transparent);font-weight:600}
.chip.hb-src{background:color-mix(in srgb,#7c3aed 12%,transparent);color:#6d28d9}
html[data-theme="dark"] .chip.hb-src{color:#c4b5fd}

/* engage.css */
/* Engagement: getting-started checklist, jobs picked for you, Launch-ready badge, Admin → Billing cards (engage-ui.js) */
.eg-slot{display:grid;gap:12px;margin-bottom:12px}
.eg-slot:empty{display:none}
.eg-card,.eg-picks{padding:16px 18px;overflow:hidden}
.eg-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.eg-head{display:flex;gap:12px;align-items:flex-start}
.eg-ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.eg-ico.alt{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.eg-ico .ico{width:22px;height:22px}
.eg-ttl{flex:1;min-width:0}
.eg-ttl .kicker{display:block;font-size:.68rem;margin-bottom:2px}
.eg-ttl h3{margin:0;font-size:1.04rem;line-height:1.3}
.eg-ttl small{display:block;margin-top:2px;font-size:.82rem}
.eg-x{flex:none;margin:-4px -6px 0 0}
.eg-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--text) 8%,transparent);margin:14px 0 6px;overflow:hidden}
.eg-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .5s ease}
.eg-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.eg-steps li{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;min-width:0}
.eg-steps li.next{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.eg-steps li.focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent);animation:eg-pulse 1.4s ease 2}
@keyframes eg-pulse{50%{background:color-mix(in srgb,var(--accent) 14%,transparent)}}
.eg-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 .8rem var(--font);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line2)}
.eg-n .ico{width:16px;height:16px;stroke-width:2.6}
li.done .eg-n{color:var(--on-accent,#fff);background:var(--good);box-shadow:none}
li.next .eg-n{color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.eg-t{flex:1;min-width:0;display:grid;gap:1px}
.eg-t b{font-size:.92rem;line-height:1.3}
.eg-t small{color:var(--muted);font-size:.8rem;line-height:1.35}
li.done .eg-t b{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.eg-steps .btn.sm{flex:none;padding:7px 12px;font-size:.82rem}
.eg-done{flex:none;display:inline-flex;align-items:center;gap:4px;font:600 .78rem var(--font);color:var(--good)}
.eg-done .ico{width:15px;height:15px;stroke-width:2.6}
.eg-foot{display:flex;gap:8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.eg-foot .ico{flex:none;width:16px;height:16px;color:var(--accent)}
.eg-foot b{color:var(--text)}
/* compact on Home: done steps fold into one line */
.eg-card:not(.full) li.done{padding:5px 8px}
.eg-card:not(.full) li.done .eg-t small{display:none}
.eg-card:not(.full) li.done .eg-n{width:22px;height:22px}
/* jobs picked for you */
.eg-jobs{display:grid;gap:4px;margin-top:12px}
.eg-job{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;min-width:0}
.eg-job:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.eg-job-t{flex:1;min-width:0;color:var(--text)}
.eg-job-t:hover{text-decoration:none}
.eg-job-t b{display:block;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eg-job-t:hover b{color:var(--accent)}
.eg-job-t small{display:block;color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eg-job .btn.sm{flex:none;padding:7px 11px;font-size:.8rem}
.eg-job .btn.saved{color:var(--good)}
.eg-job .btn .ico{width:15px;height:15px}
.eg-more{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.86rem}
.eg-more a{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.eg-more a .ico{width:15px;height:15px}
.eg-empty{display:flex;gap:10px;align-items:center;margin:14px 0 0;color:var(--muted);font-size:.88rem}
.eg-empty .ico{flex:none;width:18px;height:18px}
/* Launch-ready chip and badge */
.eg-chip{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:3px 10px 3px 8px;border-radius:999px;font:700 .74rem var(--font);vertical-align:middle;color:var(--on-accent,#fff);background:linear-gradient(135deg,#f59e0b,#ea580c);box-shadow:0 3px 12px -6px #ea580c;white-space:nowrap}
.eg-chip .ico{width:14px;height:14px;stroke-width:2.3}
.eg-chip.big{margin:12px 0 0;padding:6px 14px 6px 11px;font-size:.86rem}
.eg-chip.big .ico{width:17px;height:17px}
.vbadge.b-launch{color:#ea580c}
h1 .vbadge.b-launch{color:var(--on-accent,#fff);background:linear-gradient(135deg,#f59e0b,#ea580c)}
html[data-theme="dark"] .vbadge.b-launch{color:#fbbf24}
html[data-theme="dark"] h1 .vbadge.b-launch{color:#1a1206}
.eg-menu .badge{font-size:.7rem}
/* celebration */
.eg-cele-box{overflow:hidden;max-width:440px}
.eg-cele{position:relative;text-align:center;padding:8px 6px 2px}
.eg-cele h2{margin:10px 0 6px;font-family:var(--hfont);font-size:1.5rem}
.eg-cele p{color:var(--muted);margin:0 auto;max-width:340px}
.eg-cele-ico{width:72px;height:72px;margin:0 auto;border-radius:22px;display:grid;place-items:center;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 14px 34px -14px var(--accent);animation:eg-lift .9s cubic-bezier(.2,.9,.3,1.3)}
.eg-cele-ico .ico{width:38px;height:38px}
@keyframes eg-lift{from{transform:translateY(30px) scale(.7);opacity:0}}
.eg-pro{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:14px!important;padding:10px 12px;border-radius:12px;color:var(--text)!important;background:color-mix(in srgb,var(--accent2) 10%,transparent);font-size:.9rem}
.eg-pro .ico{flex:none;width:18px;height:18px;color:var(--accent2)}
.eg-burst{position:absolute;inset:-20px 0 auto;height:0;pointer-events:none}
.eg-burst i{position:absolute;top:0;width:7px;height:12px;border-radius:2px;opacity:0;animation:eg-fall 1.8s ease-out forwards}
@keyframes eg-fall{0%{opacity:1;translate:0 0}100%{opacity:0;translate:0 260px}}
@media (prefers-reduced-motion:reduce){.eg-burst{display:none}.eg-cele-ico,.eg-steps li.focus{animation:none}.eg-bar i{transition:none}}
html.reduce-motion .eg-burst{display:none}
/* dialogs */
.eg-dlg{display:grid;gap:12px}
.eg-dlg p{margin:0}
.eg-chips{display:flex;flex-wrap:wrap;gap:6px}
.eg-chips .chip{cursor:pointer}
.eg-chips .chip.on{color:var(--on-accent,#fff);background:var(--accent);border-color:var(--accent)}
.eg-radios{display:grid;gap:8px}
.eg-radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line2);cursor:pointer}
.eg-radio:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.eg-radio input{margin-top:4px;accent-color:var(--accent)}
.eg-radio span{display:grid}
.eg-radio small{color:var(--muted);font-size:.8rem}
.eg-fine{display:flex;gap:8px;align-items:flex-start;font-size:.84rem;color:var(--muted)}
.eg-fine .ico{flex:none;width:16px;height:16px;margin-top:2px}
/* page */
.eg-page{display:grid;gap:14px;max-width:760px}
.eg-under{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.eg-complete .eg-chip{margin-left:52px}
/* Admin → Billing cards */
.eg-ah{align-items:flex-start;gap:12px}
.eg-ah h3{margin:0 0 4px}
.eg-ah p{margin:0}
.eg-ah select{width:auto;flex:none}
.eg-none{margin:12px 0 0}
.eg-reasons{display:grid;gap:8px;margin-top:14px}
.eg-reason{display:grid;grid-template-columns:150px 1fr 36px auto;gap:10px;align-items:center;font-size:.88rem}
.eg-reason b{text-align:right}
.eg-reason small{min-width:120px}
.eg-rbar{height:10px;border-radius:99px;background:color-mix(in srgb,var(--text) 7%,transparent);overflow:hidden}
.eg-rbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.eg-sub{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.eg-comments{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.eg-comments li{padding:10px 12px;border-radius:12px;background:var(--surface2)}
.eg-comments p{margin:6px 0 0;font-size:.9rem;overflow-wrap:anywhere}
.eg-cm-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.eg-oc.canceled{color:var(--bad)}.eg-oc.stayed{color:var(--good)}
.eg-sw{margin-top:12px;gap:14px}
.eg-sw p{margin:2px 0 0;font-size:.84rem}
.eg-funnel{flex-wrap:wrap}
.eg-prevs{display:flex;gap:8px;flex-wrap:wrap}
.eg-prevs .btn small{margin-left:4px}
.eg-prevbox p{margin:0 0 10px}
.eg-frame{display:block;width:100%;height:min(70vh,640px);border:1px solid var(--line);border-radius:12px;background:#f4f6fb}
@media (max-width:640px){
  .eg-card,.eg-picks{padding:14px}
  .eg-steps li{gap:10px;padding:8px 4px}
  .eg-hide-sm{display:none}
  .eg-card:not(.full) li:not(.next) .eg-t small{display:none}
  .eg-card:not(.full) li{padding:7px 4px}
  .eg-reason{grid-template-columns:1fr 36px;row-gap:4px}
  .eg-reason .eg-rbar{grid-column:1 / -1;grid-row:2}
  .eg-reason small{grid-column:1 / -1;min-width:0}
  .eg-complete .eg-chip{margin-left:0}
}

/* insights.css */
/* ReconHire: Insights (Admin → Engagement, saved candidate searches, reply-time badges).
   Theme variables only, so light and dark mode both work. No inner scroll bars: wide content wraps or pages. */
.ins{--ins-c:var(--accent);--ins-est:color-mix(in srgb,var(--accent) 45%,var(--surface))}
.ins-body{display:grid;gap:16px;min-width:0}
.ins-head-acts{gap:8px;flex-wrap:wrap}
.ins-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--af-info-line);background:var(--af-info-bg);color:var(--text);font-size:.88rem;line-height:1.5}
.ins-note .ico{width:18px;height:18px;color:var(--accent);margin-top:1px;flex:none}
.ins-tiles{margin:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.ins-tile{min-width:0}
.ins-tile b{font-variant-numeric:tabular-nums}
.ins-delta{display:inline-flex;align-items:center;gap:3px;font-size:.74rem;line-height:1.35;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-weight:600;width:fit-content;padding:1px 8px 1px 6px;border-radius:999px;background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--muted)}
.ins-delta .ico{width:13px;height:13px}
.ins-delta.up{color:var(--af-good);background:var(--af-good-bg)}
.ins-delta.down{color:var(--af-bad);background:var(--af-bad-bg)}
.ins-card{display:grid;gap:12px;min-width:0;padding:18px}
.ins-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.ins-card-h>div:first-child{flex:1 1 240px;min-width:0}
.ins-card-h h3{margin:0;font-size:1.02rem}
.ins-card-h p{margin:2px 0 0;font-size:.86rem}
.ins-seg{flex-wrap:wrap}
.ins-seg button{white-space:nowrap}
.ins-sub{margin:4px 0 0;font:700 .92rem var(--hfont)}
.ins-small{font-size:.82rem;margin:0;line-height:1.5}
.ins-foot{text-align:right}
.ins-big{font:700 1.8rem/1 var(--hfont);font-variant-numeric:tabular-nums}

/* charts */
.ins-chart-wrap{min-width:0}
.ins-chart{position:relative;min-width:0}
.ins-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
.ins-grid{stroke:var(--line);stroke-width:1}
.ins-axis{stroke:var(--line2);stroke-width:1}
.ins-tick{fill:var(--dim);font:500 11px var(--font)}
.ins-line{fill:none;stroke:var(--ins-c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ins-line.est{stroke:var(--ins-est);stroke-dasharray:4 4}
.ins-area{fill:color-mix(in srgb,var(--accent) 10%,transparent);stroke:none}
.ins-dot{fill:var(--ins-c);stroke:var(--surface);stroke-width:2}
.ins-mark{stroke:var(--line2);stroke-dasharray:2 3}
.ins-cross{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.ins-bar{fill:color-mix(in srgb,var(--accent2) 70%,var(--surface))}
.ins-bar.est{fill:color-mix(in srgb,var(--accent2) 35%,var(--surface))}
.ins-bar.on{fill:var(--accent2)}
.ins-sub-h{display:flex;gap:12px;margin:8px 0 2px;font-size:.78rem;color:var(--muted)}
.ins-key{display:inline-flex;align-items:center;gap:6px}
.ins-key-bar{display:inline-block;width:10px;height:10px;border-radius:2px;background:color-mix(in srgb,var(--accent2) 70%,var(--surface))}
.ins-tip{position:absolute;z-index:5;pointer-events:none;min-width:150px;max-width:240px;padding:8px 10px;border-radius:10px;background:var(--raise);color:var(--text);border:1px solid var(--line2);box-shadow:0 8px 24px rgba(0,0,0,.16);font-size:.8rem;display:grid;gap:3px}
.ins-tip[hidden]{display:none}
.ins-tip b{font-size:.82rem}
.ins-tip div{display:flex;justify-content:space-between;gap:14px;color:var(--muted)}
.ins-tip strong{color:var(--text);font-variant-numeric:tabular-nums}
.ins-tip small{color:var(--dim)}

/* retention */
.ins-rets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ins-ret{display:grid;gap:2px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);min-width:0}
.ins-ret b{font:700 1.5rem var(--hfont);font-variant-numeric:tabular-nums}
.ins-ret small{font-size:.78rem;color:var(--muted)}
.ins-ret p{margin:2px 0 0;font-size:.78rem;line-height:1.4}
.ins-coh-box{min-width:0}
.ins-coh-wrap{position:relative}
.ins-coh{display:grid;gap:3px;font-size:.78rem;min-width:0}
.ins-coh-h{color:var(--dim);font-weight:600;font-size:.72rem;padding:2px 2px 4px;white-space:nowrap}
.ins-coh-h.c{text-align:center}
.ins-coh-w,.ins-coh-n{display:flex;align-items:center;padding:0 2px;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ins-coh-n{color:var(--muted)}
.ins-cell{display:grid;place-items:center;min-width:0;height:30px;border-radius:6px;font:600 .74rem var(--font);font-variant-numeric:tabular-nums;color:var(--text);cursor:default;outline-offset:1px}
.ins-cell.dark{color:var(--on-accent)}
.ins-cell.partial{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 18%,transparent)}
.ins-cell.none{background:color-mix(in srgb,var(--text) 3%,transparent)}
.ins-coh-pg{margin-top:8px}

/* funnel + bar lists */
.ins-bars,.ins-fun{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ins-bars-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:.88rem;margin-bottom:4px}
.ins-bars-t>span:first-child{flex:1 1 140px;min-width:0;overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:8px}
.ins-bars-t b{font-variant-numeric:tabular-nums}
.ins-track{height:10px;border-radius:999px;background:color-mix(in srgb,var(--text) 6%,transparent);overflow:hidden}
.ins-track i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.ins-fun{gap:2px}
.ins-step{padding:6px 0}
.ins-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 .7rem var(--font);font-style:normal;background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent);flex:none}
.ins-drop{display:flex;align-items:center;gap:4px;padding-left:28px;font-size:.75rem;color:var(--muted)}
.ins-drop .ico{width:12px;height:12px;color:var(--af-bad)}
.ins-use{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ins-use h4{margin:0 0 10px}

/* at risk */
.ins-risk{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ins-risk>p{padding:12px 14px;margin:0}
.ins-risk-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) auto;gap:6px 14px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.ins-risk-row:last-child{border-bottom:0}
.ins-risk-who{display:grid;min-width:0}
.ins-risk-who a{color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.ins-risk-who a:hover b{text-decoration:underline}
.ins-risk-who small{overflow-wrap:anywhere}
.ins-risk-last{white-space:nowrap}

@media (max-width:760px){
  .ins-delta{white-space:normal;overflow:visible}
  .ins-use{grid-template-columns:1fr;gap:16px}
  .ins-risk-row{grid-template-columns:minmax(0,1fr)}
  .ins-card{padding:14px}
  .ins-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ins-tile{padding:12px}
  .ins-tile b{font-size:1.25rem}
}

@media (max-width:480px){
  .ins-rets{gap:8px}
  .ins-ret{padding:10px}
  .ins-ret b{font-size:1.15rem}
  .ins-ret p{display:none}
}

/* ---------- saved candidate searches ---------- */
.ins-savebar{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:-4px 0 12px;padding:0 2px}
.ins-savebar small{display:inline-flex;align-items:center;gap:4px}
.ins-savebar small .ico{width:14px;height:14px}
.ins-savebar .row{gap:6px}
.ins-saved{display:grid;gap:12px;min-width:0}
.ins-saved-h{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.ins-saved-h h3{margin:0}
.ins-saved-h p{margin:2px 0 0;font-size:.88rem;max-width:640px}
.ins-srch{display:grid;gap:12px;padding:16px;margin:0}
.ins-srch.paused{opacity:.85}
.ins-srch-top{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:start}
.ins-srch-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}
.ins-srch.paused .ins-srch-ic{background:color-mix(in srgb,var(--text) 6%,var(--surface));color:var(--muted)}
.ins-srch-main{display:grid;gap:2px;min-width:0}
.ins-srch-main small{overflow-wrap:anywhere}
.ins-srch-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ins-srch-name b{overflow-wrap:anywhere}
.ins-srch-tools{display:flex;gap:4px}
.ins-srch-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ins-res{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.ins-res[hidden]{display:none}
.ins-cand{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.ins-cand-main{display:grid;gap:3px;min-width:0}
.ins-cand-name{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;flex-wrap:wrap}
.ins-cand-name:hover b{text-decoration:underline}
.ins-cand-hl{font-size:.85rem;overflow-wrap:anywhere}
.ins-cand-act{gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ins-new{font-size:.7rem}
.ins-dlg{gap:12px}
@media (max-width:600px){
  .ins-cand{grid-template-columns:44px minmax(0,1fr)}
  .ins-cand-act{grid-column:1 / -1;justify-content:flex-start}
  .ins-srch-top{grid-template-columns:36px minmax(0,1fr) auto}
  .ins-srch-ic{width:36px;height:36px}
}

/* ---------- reply-time badges ---------- */
.rt-slot{display:none}
.chip.rt-badge{color:var(--af-good,#047857);background:color-mix(in srgb,var(--good) 11%,var(--surface));border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.chip.rt-badge .ico{width:13px;height:13px}
.chip.rt-badge.t-2days,.chip.rt-badge.t-week{color:var(--info);background:color-mix(in srgb,var(--info) 10%,var(--surface));border-color:color-mix(in srgb,var(--info) 30%,transparent)}
html[data-theme="dark"] .chip.rt-badge{color:#6ee7b7}
html[data-theme="dark"] .chip.rt-badge.t-2days,html[data-theme="dark"] .chip.rt-badge.t-week{color:#7dd3fc}
.rt-card{display:grid;gap:12px;padding:18px;margin:0}
.rt-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:start}
.rt-top h3{margin:2px 0}
.rt-top p{margin:0;font-size:.86rem}
.rt-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--good) 12%,var(--surface));color:var(--good)}
.rt-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rt-stats>div{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);min-width:0}
.rt-stats b{font:700 1.15rem var(--hfont)}
.rt-stats small{font-size:.76rem}
.rt-tip{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:.86rem;line-height:1.5;color:var(--muted)}
.rt-tip .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
@media (max-width:600px){
  .rt-top{grid-template-columns:40px minmax(0,1fr)}
  .rt-top>.chip{grid-column:1 / -1;width:fit-content}
  .rt-stats{gap:6px}
  .rt-stats>div{padding:8px}
  .rt-stats b{font-size:.98rem}
}

/* adminnet.css */
/* ReconHire: Admin → Security → Admin site access (public/js/adminnet-ui.js).
   Theme variables only, with darker-mode text colors under html[data-theme="dark"]. No inner scroll areas;
   long IPv6 addresses wrap instead. */
.an{--an-ok:#047857;--an-bad:#b91c1c;--an-mid:#92400e;--an-info:#1e40af;display:grid;gap:18px;min-width:0}
html[data-theme="dark"] .an{--an-ok:#6ee7b7;--an-bad:#fca5a5;--an-mid:#fcd34d;--an-info:#93c5fd}
.an .ico{flex:none}
.an h4{margin:0;font:700 1rem var(--hfont)}

.an-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.an-title{flex:1 1 320px;min-width:0}
.an-title h3{display:flex;align-items:center;gap:8px;margin:0}
.an-title h3 .ico{color:var(--accent)}
.an-title p{margin:4px 0 0;line-height:1.5;max-width:720px}
.an-main{display:inline-flex;align-items:center;gap:10px;cursor:pointer;flex:none}
.an-main .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.an-switch{display:inline-flex;align-items:center;position:relative}

.an-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font:600 .76rem/1.2 var(--font);background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted);white-space:nowrap}
.an-pill.ok{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--an-ok)}
.an-pill.mid{background:color-mix(in srgb,#f59e0b 16%,transparent);color:var(--an-mid)}

.an-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.an-note .ico{color:var(--an-info);margin-top:2px}
.an-note.warn{border-color:color-mix(in srgb,#f59e0b 40%,transparent);background:color-mix(in srgb,#f59e0b 10%,var(--surface))}
.an-note.warn .ico{color:var(--an-mid)}
.an-note p{margin:0;font-size:.9rem;line-height:1.5}

.an-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.an-box{display:grid;gap:7px;align-content:start;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--text) 2.5%,var(--surface))}
.an-box .btn{justify-self:start;margin-top:2px}
.an-k{font:600 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.an-ip{font:700 1.15rem/1.3 var(--mono);overflow-wrap:anywhere;color:var(--text)}
.an-ip6{font-size:.98rem}
.an-ips{display:grid;gap:6px}
.an-ips>div{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.an-fam{font:600 .7rem var(--mono);padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--muted);flex:none}
.an-ok,.an-bad{display:inline-flex;align-items:flex-start;gap:6px;font-size:.86rem;line-height:1.45}
.an-ok{color:var(--an-ok)}.an-bad{color:var(--an-bad)}
.an-ok .ico,.an-bad .ico{width:15px;height:15px;margin-top:2px}
.an-err{color:var(--an-bad);font-size:.84rem;line-height:1.45}
.an-hint:empty{display:none}
.an-grace{display:grid;gap:2px}

.an-sec{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line);min-width:0}
.an-row{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.an-row .an-switch{margin-top:2px}
.an-row-t{display:grid;gap:2px;min-width:0}
.an-row-t small{font-size:.84rem;line-height:1.45}
.an-inline{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.an-inline small{flex:1 1 240px}
.an-bits{width:auto;max-width:220px}
.an-sub{display:grid;gap:8px;min-width:0}
.an-sub>b{font-size:.9rem}
.an-empty{margin:0;font-size:.88rem}
.an-list{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.an-list:has(.an-empty){border:0}
.an-item{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.an-item:last-child{border-bottom:0}
.an-item code{font:600 .9rem var(--mono);overflow-wrap:anywhere}
.an-item span{font-size:.86rem;min-width:0;overflow-wrap:anywhere}
.an-item .icon-btn{width:34px;height:34px}
.an-add{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:8px}
.an-add .input{margin:0;min-width:0}
.an-chips{display:flex;flex-wrap:wrap;gap:6px}
.an-chip{font:500 .8rem var(--mono);padding:3px 8px;border-radius:7px;border:1px solid var(--line);background:color-mix(in srgb,var(--text) 3%,var(--surface));overflow-wrap:anywhere}
.an-chip.bad{color:var(--an-bad);text-decoration:line-through}

.an-hist{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.an-hrow{display:grid;grid-template-columns:150px auto minmax(0,1fr);gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line)}
.an-hrow:last-child{border-bottom:0}
.an-change{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;min-width:0}
.an-change code{font-size:.84rem;overflow-wrap:anywhere}

.an-ddns summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.an-ddns summary::-webkit-details-marker{display:none}
.an-ddns summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:-4px 0 0 auto;transition:transform .2s}
.an-ddns[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.an-ddns>p{margin:0;line-height:1.5;font-size:.9rem}
.an-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.an-form .field{margin-bottom:10px}
.an-checks{display:flex;flex-wrap:wrap;gap:8px 20px}
.an-result:empty{display:none}
.an-status{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;font-size:.88rem;line-height:1.45;background:color-mix(in srgb,var(--good) 9%,var(--surface));color:var(--text)}
.an-status .ico{width:16px;height:16px;margin-top:2px;color:var(--an-ok)}
.an-status.bad{background:color-mix(in srgb,var(--bad) 9%,var(--surface))}
.an-status.bad .ico{color:var(--an-bad)}
.an-acts{flex-wrap:wrap;margin-top:4px}
.an-foot{margin:0;font-size:.84rem;line-height:1.5}
.an-modal p{margin:0 0 10px;line-height:1.5}

@media (max-width:640px){
  .an-add{grid-template-columns:1fr}
  .an-add .btn{justify-self:start}
  .an-form{grid-template-columns:1fr}
  .an-hrow{grid-template-columns:auto minmax(0,1fr);gap:4px 10px}
  .an-hrow>small{grid-column:1 / -1}
  .an-item{grid-template-columns:minmax(0,1fr) auto}
  .an-item span{grid-column:1;grid-row:2}
  .an-item .icon-btn{grid-column:2;grid-row:1 / span 2}
}
/* inside the Security hub: same spacing as the other Security pages */
.adm-pane .an-card{margin:0}

/* election.css */
/* ReconHire: the election look. A deep navy-to-crimson band with waving stripes, twinkling stars, a ballot badge and a big
   countdown, used by the site banner, the Home election card, the profile election bar and the Admin → Themes preview.
   Loud, but classy and nonpartisan: flag colors only, civic words only.
   Intensity (Admin → Themes): html[data-el-int] = subtle | bold | max. Every animated piece uses transform or opacity and
   stops under prefers-reduced-motion. Built by src/themes.js (banner) and public/js/election-ui.js (everything else). */

:root,[data-el-int]{
  --el-navy:#071433;--el-navy2:#0c2259;--el-blue:#16307a;--el-red:#b3132b;--el-crimson:#8e1430;--el-gold:#f3c969;--el-sub:#d3dcf3;--el-kick:#ffc2cb;
  --el-grad:linear-gradient(112deg,#06112c 0%,#0c2259 36%,#142c70 54%,#4d1838 80%,#8e1430 100%);
  --el-play:running;--el-stars-op:.75;--el-wave-op:.95;--el-glow:.45;--el-shine-op:.32;--el-bar-h:76px}
[data-el-int="subtle"]{--el-play:paused;--el-stars-op:.4;--el-wave-op:.55;--el-glow:0;--el-shine-op:0;--el-bar-h:60px;
  --el-grad:linear-gradient(112deg,#0a1838 0%,#10265e 50%,#1b2f66 76%,#5a1730 100%)}
[data-el-int="max"]{--el-stars-op:1;--el-wave-op:1;--el-glow:.8;--el-shine-op:.45;--el-bar-h:88px;
  --el-grad:linear-gradient(112deg,#050f29 0%,#0b2463 32%,#173a8f 50%,#6a1736 76%,#b3132b 100%)}

/* the waving stripes: an SVG tile twice as wide as its box, slid sideways */
.el-wave{position:absolute;left:0;width:200%;height:18px;pointer-events:none;opacity:var(--el-wave-op);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'%3E%3Cpath d='M0 3Q20 -1 40 3T80 3T120 3T160 3V6Q140 10 120 6T80 6T40 6T0 6Z' fill='%23d4213d'/%3E%3Cpath d='M0 6Q20 2 40 6T80 6T120 6T160 6V9Q140 13 120 9T80 9T40 9T0 9Z' fill='%23ffffff'/%3E%3Cpath d='M0 9Q20 5 40 9T80 9T120 9T160 9V12Q140 16 120 12T80 12T40 12T0 12Z' fill='%23d4213d'/%3E%3Cpath d='M0 12Q20 8 40 12T80 12T120 12T160 12V15Q140 19 120 15T80 15T40 15T0 15Z' fill='%23ffffff'/%3E%3C/svg%3E") 0 0/160px 18px repeat-x;
  animation:elWave 16s linear infinite;animation-play-state:var(--el-play)}
/* twinkling stars: two faint star layers fading in turn (slow, never flashing) */
.el-stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.el-stars::before,.el-stars::after{content:"";position:absolute;inset:0;opacity:calc(var(--el-stars-op) * .55);animation:elTwinkle 5.5s ease-in-out infinite alternate;animation-play-state:var(--el-play);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cg fill='%23ffffff'%3E%3Cpath transform='translate(14 16) scale(.38)' d='M0-10 2.9-3.1 10-3.1 4.3 1.2 6.2 8.1 0 4-6.2 8.1-4.3 1.2-10-3.1-2.9-3.1z'/%3E%3Cpath transform='translate(88 10) scale(.26)' d='M0-10 2.9-3.1 10-3.1 4.3 1.2 6.2 8.1 0 4-6.2 8.1-4.3 1.2-10-3.1-2.9-3.1z'/%3E%3Cpath transform='translate(58 46) scale(.32)' d='M0-10 2.9-3.1 10-3.1 4.3 1.2 6.2 8.1 0 4-6.2 8.1-4.3 1.2-10-3.1-2.9-3.1z'/%3E%3Ccircle cx='120' cy='40' r='1.1'/%3E%3Ccircle cx='34' cy='58' r='.9'/%3E%3Ccircle cx='104' cy='62' r='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0/140px 70px;
  -webkit-mask:linear-gradient(90deg,#000,rgba(0,0,0,.25) 70%,transparent);mask:linear-gradient(90deg,#000,rgba(0,0,0,.25) 70%,transparent)}
.el-stars::after{background-position:70px 35px;background-size:180px 90px;animation-duration:7.5s;animation-delay:-3s}
@keyframes elWave{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes elTwinkle{0%{opacity:calc(var(--el-stars-op) * .2)}100%{opacity:var(--el-stars-op)}}
@keyframes elShine{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@keyframes elPop{0%{transform:scale(.4) rotate(-30deg);opacity:0}70%{transform:scale(1.08) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-10deg);opacity:1}}
@keyframes elGlow{from{opacity:.55}to{opacity:1}}

/* the ballot badge */
.el-ballot{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.el-ballot svg{width:30px;height:30px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}

/* ---------- the site banner ---------- */
.season-bar.el-bar{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:var(--el-bar-h);padding:10px 60px 26px;margin:3px 0 0;
  color:#fff;text-align:left;font-size:.95rem;background:var(--el-grad);border:0;box-shadow:0 14px 30px -22px rgba(7,20,51,.95)}
.season-bar.el-bar .el-wave{bottom:0}
.season-bar.el-bar::after{content:"";position:absolute;inset:-60% 30% -60% -10%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(90,140,255,.35),transparent);opacity:var(--el-glow);animation:elGlow 6s ease-in-out infinite alternate;animation-play-state:var(--el-play)}
.el-bar-in{position:relative;z-index:2;display:flex;align-items:center;gap:14px;min-width:0;max-width:1180px}
.el-count{position:relative;overflow:hidden;flex:none;display:grid;place-items:center;align-content:center;min-width:66px;min-height:52px;padding:4px 10px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.32),0 0 26px -6px rgba(243,201,105,var(--el-glow))}
.el-count b{font:700 2rem/1 "Chakra Petch",var(--hfont,sans-serif);color:#fff;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.el-count small{font:700 .6rem/1.3 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:var(--el-gold)}
.el-count.today b{font-size:1.25rem;letter-spacing:.04em;color:var(--el-gold)}
.el-count.today small{color:#fff;letter-spacing:.12em}
.el-count::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,var(--el-shine-op)) 50%,transparent 70%);transform:translateX(-130%);animation:elShine 6s ease-in-out infinite;animation-play-state:var(--el-play)}
.el-bar-txt{display:grid;gap:2px;min-width:0}
.el-kick{font:700 .64rem/1.3 var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:var(--el-kick)}
.season-bar.el-bar .el-head{font:700 1.25rem/1.2 "Chakra Petch",var(--hfont,sans-serif);letter-spacing:.01em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.season-bar.el-bar .se-msg{color:var(--el-sub);font-size:.86rem;line-height:1.35}
.season-bar.el-bar a.se-go,.el-go{flex:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:var(--el-navy2);font-weight:700;font-size:.9rem;white-space:nowrap;text-decoration:none;box-shadow:0 8px 20px -10px rgba(0,0,0,.7),inset 0 -3px 0 rgba(179,19,43,.85);transition:transform .15s ease,background-color .15s ease}
.season-bar.el-bar a.se-go:hover,.el-go:hover{background:var(--el-gold);color:var(--el-navy);text-decoration:none;transform:translateY(-1px)}
.season-bar.el-bar a.se-go:focus-visible,.season-bar.el-bar .se-x:focus-visible,.el-card a:focus-visible,.el-card button:focus-visible,.el-tick a:focus-visible,.el-tick button:focus-visible{outline:3px solid var(--el-gold);outline-offset:2px}
.season-bar.el-bar .se-x{position:absolute;right:10px;top:50%;z-index:3;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.season-bar.el-bar .se-x:hover{background:rgba(255,255,255,.2)}
.season-bar.el-bar.el-day .el-head{font-size:1.4rem;color:#fff}
.season-bar.el-bar.el-day::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(600px 120px at 50% 120%,rgba(243,201,105,.28),transparent 70%)}
[data-el-int="max"] .season-bar.el-bar .el-head{font-size:1.4rem}
[data-el-int="max"] .el-count b{font-size:2.4rem}
[data-el-int="subtle"] .season-bar.el-bar .el-count{min-height:44px}
[data-el-int="subtle"] .season-bar.el-bar .el-count b{font-size:1.6rem}
[data-el-int="subtle"] .season-bar.el-bar .se-msg{display:none}
@media (max-width:900px){.season-bar.el-bar .se-msg{display:none}}
@media (max-width:620px){
  .season-bar.el-bar{justify-content:flex-start;min-height:0;padding:10px 52px 18px 12px;font-size:.84rem}
  .el-bar-in{flex-wrap:wrap;gap:8px 10px;width:100%}
  .el-bar .el-ballot{display:none}
  .el-count{min-width:54px;min-height:46px;padding:3px 8px}
  .el-count b{font-size:1.6rem}[data-el-int="max"] .el-count b{font-size:1.8rem}
  .el-count.today b{font-size:1rem}
  .el-bar-txt{flex:1 1 0}
  .season-bar.el-bar .el-head,[data-el-int="max"] .season-bar.el-bar .el-head{font-size:1.02rem}
  .season-bar.el-bar.el-day .el-head{font-size:1.1rem}
  .el-kick{font-size:.56rem;letter-spacing:.16em}
  .season-bar.el-bar a.se-go,.el-go{width:100%;justify-content:center;min-height:42px}
  .season-bar.el-bar .se-x{top:10px;transform:none}
}

/* the logo badge: a small ballot with a check (instead of the emoji) while the election theme is on */
html[data-el] .brand{position:relative}
html[data-el] .brand::after{content:"";position:absolute;left:22px;top:-6px;width:18px;height:18px;border-radius:50%;pointer-events:none;
  background:#0c2259 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.4 3 3 6-6.6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow:0 0 0 2px var(--bg,#fff),0 0 0 3.5px #b3132b,0 2px 6px rgba(0,0,0,.35)}
html[data-el-int="subtle"] .brand::after{width:14px;height:14px;top:-4px;left:24px;background-size:9px}
/* profile photos get a thin flag-colored frame; the header gets a light tint */
html[data-el]:not([data-el-int="subtle"]) :is(.me-av,.nav-av,.mp-av img,.mp-av .nav-av,.pf-av img,.pf-av .nav-av,.f-p-head .nav-av,.f-p-head img){box-shadow:0 0 0 2px var(--bg),0 0 0 4px #b3132b,0 0 0 6px #0c2259!important}
html[data-el] .head{background:linear-gradient(90deg,color-mix(in srgb,#0c2259 8%,transparent),transparent 40%,transparent 60%,color-mix(in srgb,#b3132b 7%,transparent))}
html[data-el] .season-line{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:var(--season-line);pointer-events:none}
html[data-el] .head{border-top:3px solid transparent}
html[data-el] .tabs a.on .nav-ic{filter:drop-shadow(0 0 5px rgba(179,19,43,.55))}

/* ---------- the Home election card ---------- */
.vote-card.el-card{position:relative;display:block;padding:0;gap:0;margin-top:12px;overflow:hidden;border:0;border-radius:18px;color:#fff;background:var(--el-grad);
  box-shadow:0 22px 40px -26px rgba(7,20,51,.9),0 0 0 1px rgba(12,34,89,.25)}
html[data-theme="dark"] .vote-card.el-card{box-shadow:0 22px 44px -24px #000,0 0 0 1px rgba(255,255,255,.12),0 0 40px -18px rgba(90,140,255,var(--el-glow))}
.el-card.el-site{--el-grad:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,#000),color-mix(in srgb,var(--accent2) 80%,#000))}
.el-hero{position:relative;overflow:hidden;isolation:isolate;padding:22px 16px 16px}
.el-hero .el-wave{top:0}
.el-hero>*:not(.el-wave):not(.el-stars):not(.el-img){position:relative;z-index:2}
.el-img{position:absolute;inset:0;z-index:0}.el-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:.35}
.el-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,17,44,.4),rgba(6,17,44,.85))}
.el-top{display:flex;align-items:center;gap:10px}
.el-top .el-ballot{width:36px;height:36px;border-radius:10px}.el-top .el-ballot svg{width:26px;height:26px}
.el-top .el-kick{flex:1;min-width:0;letter-spacing:.14em}
.el-card .el-x{flex:none;width:40px;height:40px;margin:-6px -8px -6px 0;color:#fff;background:transparent;border-color:transparent}
.el-card .el-x:hover{background:rgba(255,255,255,.14);color:#fff}
.el-card .el-title{display:block;margin-top:12px;font:700 1.4rem/1.15 "Chakra Petch",var(--hfont,sans-serif);letter-spacing:.01em;color:#fff;overflow-wrap:anywhere}
.el-where{display:block;margin-top:3px;color:var(--el-sub);font-size:.8rem;line-height:1.35}
.el-cd-wrap{margin-top:14px}
.el-cd{display:flex;align-items:stretch;gap:3px}
.el-tile{position:relative;overflow:hidden;flex:1 1 0;min-width:0;display:grid;place-items:center;align-content:center;gap:3px;padding:10px 2px 8px;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.el-tile:first-child{box-shadow:inset 0 0 0 1px rgba(243,201,105,.55),0 0 22px -8px rgba(243,201,105,var(--el-glow))}
.el-tile:first-child::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,var(--el-shine-op)) 50%,transparent 70%);transform:translateX(-130%);animation:elShine 6s ease-in-out infinite;animation-play-state:var(--el-play)}
.el-card .el-num{font:700 2rem/1 "Chakra Petch",var(--hfont,sans-serif);color:#fff;font-variant-numeric:tabular-nums}
.el-tile:first-child .el-num{color:var(--el-gold)}
.el-tile small{font:700 .54rem/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--el-sub)}
.el-sep{align-self:center;font:700 1.1rem/1 "Chakra Petch",sans-serif;color:rgba(255,255,255,.45);padding-bottom:12px}
.el-cd-cap{display:block;margin-top:8px;text-align:center;font:700 .6rem/1.2 var(--mono,monospace);letter-spacing:.22em;text-transform:uppercase;color:var(--el-sub)}
.el-today{display:grid;gap:4px;margin-top:14px;padding:12px;border-radius:14px;background:rgba(243,201,105,.12);box-shadow:inset 0 0 0 1px rgba(243,201,105,.5)}
.el-card .el-today-h{font:700 1.3rem/1.15 "Chakra Petch",var(--hfont,sans-serif);color:var(--el-gold)}
.el-today small{color:#eef2fc;font-size:.8rem;line-height:1.4}
.el-body{display:grid;gap:10px;padding:14px 16px 16px;background:rgba(3,9,28,.32);border-top:1px solid rgba(255,255,255,.12)}
.el-msg{margin:0;font-size:.88rem;line-height:1.45;color:#eef2fc;font-weight:500}
.el-reg{display:flex;align-items:center;gap:6px;margin:0;font-size:.8rem;color:var(--el-gold)}.el-reg svg{width:15px;height:15px;flex:none}
.el-acts{display:grid;gap:8px}
.el-card .btn,.el-tick .btn{justify-content:center;text-decoration:none}
.el-card .el-btn-main,.el-tick .el-btn-main{min-height:44px;background:#fff;border:1px solid #fff;color:var(--el-navy2);font-weight:700;box-shadow:0 8px 18px -10px rgba(0,0,0,.7),inset 0 -3px 0 rgba(179,19,43,.85)}
.el-card .el-btn-main:hover,.el-tick .el-btn-main:hover{background:var(--el-gold);border-color:var(--el-gold);color:var(--el-navy);filter:none}
.el-card .el-btn-alt,.el-tick .el-btn-alt{min-height:44px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.6);color:#fff}
.el-card .el-btn-alt:hover,.el-tick .el-btn-alt:hover{background:#fff;color:var(--el-navy2)}
.el-card .el-btn-main svg,.el-card .el-btn-alt svg{width:16px;height:16px}
.el-more{display:flex;flex-wrap:wrap;gap:0 16px}
.el-more a{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:#e3e9fa;font-size:.8rem;font-weight:600;text-decoration:none}
.el-more a:hover{color:#fff;text-decoration:underline}.el-more svg{width:14px;height:14px;flex:none}
.el-card .vote-dots,.el-dots{display:flex;justify-content:center;gap:2px;padding:0 0 8px;background:rgba(3,9,28,.32)}
.el-card .el-dots button{width:40px;height:40px;border:0;border-radius:8px;background:none;opacity:1;cursor:pointer;position:relative;padding:0}
.el-card .el-dots button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.4)}
.el-card .el-dots button.on{background:none}.el-card .el-dots button.on::after{width:20px;margin-left:-10px;border-radius:4px;background:var(--el-gold)}
/* Election Day: a warmer glow */
.el-card.el-day{box-shadow:0 22px 44px -24px rgba(7,20,51,.95),0 0 0 2px rgba(243,201,105,.6)}
/* phones: the left column is hidden, so a copy sits at the top of the feed */
.el-rot-top{display:none}
@media (max-width:820px){.el-rot-top{display:block;margin-bottom:14px}.el-rot-top .vote-card.el-card{margin-top:0}}
@media (min-width:821px) and (max-width:1180px){.el-card .el-num{font-size:1.7rem}}

/* ---------- "I voted" ---------- */
.el-voted{display:grid;gap:6px;padding-top:4px;border-top:1px dashed rgba(255,255,255,.2)}
.el-card .el-voted-btn{min-height:48px;gap:8px;background:var(--el-gold);border:1px solid var(--el-gold);color:var(--el-navy);font-weight:800;font-size:.95rem;letter-spacing:.02em}
.el-card .el-voted-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.el-fine{display:block;font-size:.74rem;line-height:1.4;color:var(--el-sub)}
.el-sticker{display:inline-grid;place-items:center;flex:none;width:58px;height:58px;transform:rotate(-10deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.el-sticker.sm{width:26px;height:26px;transform:rotate(-8deg);filter:none}
.el-sticker svg{width:100%;height:100%;display:block}
.el-voted.done .el-sticker:not(.sm){animation:elPop .6s cubic-bezier(.2,.9,.3,1.3) both}
.el-voted-row{display:flex;align-items:center;gap:12px}.el-card .el-voted-row b{display:block;font:700 1rem/1.2 "Chakra Petch",sans-serif;color:#fff}
.el-switch{color:#fff;font-size:.8rem;min-height:40px;align-items:center}
.el-link{justify-self:start;min-height:40px;padding:0 2px;border:0;background:none;color:var(--el-sub);font-size:.78rem;text-decoration:underline;cursor:pointer}
.el-link:hover{color:#fff}
/* the profile badge (vbadge, from identity.badgesFor) */
.vbadge.b-voted{color:#fff;background:linear-gradient(135deg,#0c2259 0 60%,#b3132b 60%);box-shadow:0 0 0 1px rgba(255,255,255,.6) inset}
html[data-theme="dark"] .vbadge.b-voted{box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}

/* ---------- the profile election bar (ticker) ---------- */
.tick.vote-banner.el-tick{position:relative;isolation:isolate;height:56px;min-height:56px;padding:0 6px 0 6px;gap:10px;border:0;border-radius:14px;color:#fff;background:var(--el-grad);box-shadow:0 12px 26px -18px rgba(7,20,51,.9)}
html[data-theme="dark"] .tick.vote-banner.el-tick{box-shadow:0 12px 26px -16px #000,0 0 0 1px rgba(255,255,255,.12)}
.tick.vote-banner.el-tick::before{content:"";position:absolute;inset:auto 0 0 0;height:4px;width:auto;z-index:0;background:linear-gradient(90deg,#d4213d 0 33.3%,#fff 33.3% 66.6%,#d4213d 66.6%);opacity:var(--el-wave-op)}
.tick.vote-banner.el-tick::after{display:none}
.el-tick>*{position:relative;z-index:1}
.el-lead{display:inline-grid;grid-auto-flow:column;align-items:baseline;gap:4px;min-width:52px;height:44px;padding:0 10px;place-content:center;border-radius:11px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.el-lead b{font:700 1.6rem/1 "Chakra Petch",sans-serif;color:var(--el-gold)}
.el-lead small{font:700 .58rem var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.el-lead.today{align-items:center;padding:0 8px 0 4px}.el-lead.today .el-ballot{width:34px;height:34px;background:none;box-shadow:none}.el-lead.today .el-ballot svg{width:26px;height:26px}
.el-lead.voted,.el-lead:has(.el-ballot:only-child){padding:0 8px;align-items:center}
.el-lead .el-ballot:only-child{width:34px;height:34px;background:none;box-shadow:none}
.el-tick .tick-tag{color:var(--el-kick);font:700 .74rem var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase}
.el-tick .tick-main{color:#fff;opacity:1;font-weight:500}
.el-tick .tick-txt:hover .tick-main{color:#fff}
.el-tick .tick-pager{opacity:1;color:var(--el-sub)}
.el-tick .tick-nav{width:32px;height:40px;color:#fff}.el-tick .tick-nav:hover{background:rgba(255,255,255,.16)}
.el-tick .tick-acts .btn{min-height:40px;padding:0 14px;font-size:.8rem;white-space:nowrap}
.el-tick .tick-x{width:40px;height:40px;color:#fff;opacity:.9}
.el-tick .tick-acts .btn.el-ic{width:40px;padding:0}.el-tick .tick-acts .btn.el-ic svg{width:17px;height:17px}
.tick.el-tick.el-day{box-shadow:0 12px 26px -18px rgba(7,20,51,.9),0 0 0 2px rgba(243,201,105,.6)}
@media (max-width:640px){
  .tick.vote-banner.el-tick{height:auto;min-height:56px;flex-wrap:wrap;padding:6px 4px 10px 6px;row-gap:6px}
  .el-tick .tick-lead{order:1}.el-tick .tick-view{order:2;flex:1 1 0}.el-tick .tick-x{order:3}
  .el-tick .tick-pager{order:4}.el-tick .tick-acts{order:5;flex:1 1 auto}
  .el-tick::after{content:"";order:3;flex-basis:100%;height:0;display:block!important;position:static}
  .el-tick .tick-acts .btn{flex:1}.el-tick .tick-acts .btn.el-ic{flex:none}
  .el-tick .tick-pager .tick-nav{display:inline-block;width:36px}
  .el-tick .tick-tag{font-size:.66rem}
}

/* ---------- Admin → Themes preview ---------- */
.af-thv.el-mock{min-height:0;container-type:inline-size}
.af-thv.el-mock .season-bar.el-bar{margin:0;min-height:0;padding:8px 44px 14px 12px;font-size:.78rem}
.af-thv.el-mock .el-bar-in{gap:10px}
.af-thv.el-mock .el-ballot{width:32px;height:32px}.af-thv.el-mock .el-ballot svg{width:24px;height:24px}
.af-thv.el-mock .el-count{min-width:50px;min-height:42px}.af-thv.el-mock .el-count b{font-size:1.4rem}.af-thv.el-mock .el-count.today b{font-size:.95rem}
.af-thv.el-mock .el-head{font-size:.95rem!important}
.af-thv.el-mock .se-msg{display:none}
.af-thv.el-mock .el-go{min-height:32px;padding:0 12px;font-size:.74rem}
.af-thv.el-mock .se-x{width:30px;height:30px;font-size:15px}
.af-thv.el-mock .af-thv-body{grid-template-columns:minmax(150px,200px) minmax(0,1fr);align-items:start}
.af-thv.el-mock .el-card{margin:0}
.el-card.el-mini .el-hero{padding:18px 12px 12px}.el-card.el-mini .el-title{font-size:1.1rem;margin-top:8px}
.el-card.el-mini .el-num{font-size:1.4rem}.el-card.el-mini .el-x{display:none}.el-card.el-mini .el-tile{padding:7px 1px 6px}.el-card.el-mini .el-tile small{font-size:.46rem;letter-spacing:.08em}
.el-card.el-mini .el-body{padding:10px 12px 12px;gap:8px}.el-card.el-mini .el-msg{font-size:.76rem}
.el-card.el-mini .btn{min-height:34px;font-size:.72rem;padding:4px 8px}.el-card.el-mini .el-more,.el-card.el-mini .el-reg{display:none}
.el-card.el-mini .el-today-h{font-size:1rem}.el-card.el-mini .el-today small{font-size:.7rem}
.el-card.el-mini .el-voted-btn{min-height:36px;font-size:.78rem}
.th-int{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.th-int .seg button{min-height:40px}
.th-int small{flex:1 1 220px}
@container (max-width:560px){
  .af-thv.el-mock .el-bar-in{flex-wrap:wrap;width:100%}
  .af-thv.el-mock .el-bar .el-ballot{display:none}
  .af-thv.el-mock .el-bar-txt{flex:1 1 0}
  .af-thv.el-mock .el-go{width:100%;justify-content:center}
  .af-thv.el-mock .se-x{top:8px;transform:none}
  .af-thv.el-mock .el-kick{font-size:.52rem;letter-spacing:.14em}
}
@container (max-width:360px){.af-thv.el-mock .af-thv-body{grid-template-columns:1fr}.af-thv.el-mock .af-thv-main{display:none}}

/* confetti canvas */
.el-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}

/* light mode: the dark band sits on a white page, so soften its edge */
html:not([data-theme="dark"]) .season-bar.el-bar{box-shadow:0 10px 24px -18px rgba(7,20,51,.8)}

@media (prefers-reduced-motion:reduce){
  .el-wave,.el-stars::before,.el-stars::after,.el-count::after,.el-tile:first-child::after,.season-bar.el-bar::after,.el-voted.done .el-sticker{animation:none!important}
  .el-stars::before,.el-stars::after{opacity:calc(var(--el-stars-op) * .6)}
  .el-go,.el-card .el-voted-btn{transition:none}
}
@media print{.season-bar.el-bar,.el-rot,.el-tick{display:none!important}}
.af-thv-logo em.el-mock-badge{display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background:#0c2259;color:#fff;font:700 8px/1 sans-serif;box-shadow:0 0 0 1.5px var(--bg,#fff),0 0 0 2.6px #b3132b;filter:none}
/* the Voting info page: the hero, wide */
.vote-card.el-card.el-wide{margin:0 0 16px}
@media (min-width:760px){
  .el-wide .el-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);column-gap:28px;align-items:center;padding:30px 24px 22px}
  .el-wide .el-top,.el-wide .el-title,.el-wide .el-where{grid-column:1}
  .el-wide .el-cd-wrap,.el-wide .el-today{grid-column:2;grid-row:1 / span 3;margin-top:0}
  .el-card.el-wide .el-title{font-size:1.9rem}
  .el-card.el-wide .el-num{font-size:2.6rem}
  .el-wide .el-body{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:16px 24px 18px}
  .el-wide .el-acts{grid-template-columns:auto auto;grid-column:2;grid-row:1 / span 2}
  .el-wide .el-msg,.el-wide .el-reg,.el-wide .el-more{grid-column:1}
  .el-wide .el-voted{grid-column:1 / -1}
}
/* the I voted chip next to your name on your own profile */
h1 .vbadge.b-voted.el-chip{display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;min-height:28px;padding:2px 10px 2px 4px;border-radius:999px;font:700 .74rem/1 var(--font,sans-serif);letter-spacing:.02em;vertical-align:middle}
h1 .vbadge.b-voted.el-chip .el-sticker.sm{width:22px;height:22px}
h1 .vbadge.b-voted.el-chip svg:not(.el-sticker svg){width:12px;height:12px;opacity:.85}
/* the switch on the dark card: always light on dark, in both site themes */
.el-card .el-switch i{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.el-card .el-switch i::after{background:#fff}
.el-card .el-switch input:checked+i{background:var(--el-gold)}
.el-card .el-switch input:checked+i::after{background:var(--el-navy)}
.el-card .el-switch input:focus-visible+i{outline:3px solid var(--el-gold)}

/* the "I voted" sticker on a profile photo */
.nav-av.has-voted,.pf-photo.has-voted{position:relative;overflow:visible}
.nav-av.has-voted>img{border-radius:50%}
.av-voted{position:absolute;right:-12%;bottom:-10%;width:46%;height:46%;min-width:24px;min-height:24px;max-width:58px;max-height:58px;z-index:3;pointer-events:auto;
  transform:rotate(-12deg);filter:drop-shadow(0 3px 6px rgba(7,20,51,.45));animation:avVotedPop .55s cubic-bezier(.2,.9,.3,1.35) both}
.av-voted .el-sticker{width:100%;height:100%;transform:none;filter:none}
.av-voted .el-sticker svg{width:100%;height:100%;display:block}
.pf-photo .av-voted{right:-4px;bottom:-4px;width:44%;height:44%;max-width:64px;max-height:64px}
.av-voted-lock{position:absolute;left:-4px;top:-4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px var(--line);color:var(--muted)}
.av-voted-lock .ico{width:11px;height:11px}
.av-voted:hover{transform:rotate(-4deg) scale(1.08);transition:transform .2s}
@keyframes avVotedPop{from{opacity:0;transform:rotate(-40deg) scale(.4)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.av-voted{animation:none}.av-voted:hover{transform:rotate(-12deg)}}
.f-me-av .av-voted{width:52%;height:52%;min-width:32px;min-height:32px;right:-14%;bottom:-8%}
/* the top bar photo by Me: a thinner election ring so it stays small */
html[data-el]:not([data-el-int="subtle"]) .me-btn .me-av{box-shadow:0 0 0 1.5px var(--bg),0 0 0 3px #b3132b}

/* admin-nav.css */
/* Admin panel navigation (admin-nav.js): hub sidebar, Jump to search, the shared sub-tab bar, and the Home inbox.
   Colors come from the theme variables, so light and dark mode both follow. Nothing here scrolls inside itself. */

/* ---------- sidebar: Jump to ---------- */
.adm-jump{position:relative;margin:0 0 8px}
.adm-jump-box{display:flex;align-items:center;gap:6px;padding:0 8px;border:1px solid var(--line2);border-radius:10px;background:var(--surface2)}
.adm-jump-box:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.adm-jump-box>.ico{width:15px;height:15px;flex:none;color:var(--dim)}
.adm-jump-in.input{flex:1;min-width:0;border:0;background:none;box-shadow:none;padding:8px 2px;font-size:.88rem;outline:none}
.adm-jump-in::-webkit-search-cancel-button{display:none}
.adm-jump-k{flex:none;padding:1px 6px;border:1px solid var(--line2);border-radius:6px;font:600 .66rem var(--mono);color:var(--dim);background:var(--surface)}
.adm-jump-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);min-width:240px;margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow)}
.adm-jump-list li{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:.88rem}
.adm-jump-list li .ico{width:16px;height:16px;flex:none;color:var(--dim)}
.adm-jump-list li span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.adm-jump-list li b{font-weight:600;color:var(--text)}
.adm-jump-list li small{color:var(--dim);font-size:.76rem}
.adm-jump-list li.on,.adm-jump-list li:hover{background:color-mix(in srgb,var(--accent) 11%,transparent)}
.adm-jump-list li.on .ico{color:var(--accent)}
.adm-jump-list li.adm-jump-none{cursor:default;color:var(--dim);background:none}

/* ---------- sidebar: hubs ---------- */
.adm-nav button{padding:9px 10px;font-size:.9rem}

/* ---------- content: hub title + sub-tab bar ---------- */
.adm-hubtitle{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;margin:0 0 10px}
.adm-hubtitle>.ico{width:22px;height:22px;color:var(--accent);grid-row:span 2}
.adm-hubtitle h2{margin:0;font-size:1.3rem;line-height:1.2}
.adm-hubtitle p{margin:2px 0 0;font-size:.88rem}
.adm-subwrap{margin:0 0 18px}
.adm-subs{display:flex;flex-wrap:wrap;gap:2px 4px;padding:0 0 0;border-bottom:1px solid var(--line2)}
.adm-subs.solo{display:none}
.adm-subs button{display:inline-flex;align-items:center;gap:7px;padding:9px 12px 10px;margin:0 0 -1px;border:0;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;background:none;color:var(--muted);font:500 .9rem var(--font);cursor:pointer;white-space:nowrap}
.adm-subs button .ico{width:16px;height:16px;flex:none;opacity:.8}
.adm-subs button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 4%,transparent)}
.adm-subs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.adm-subs button.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.adm-subs button.on .ico{opacity:1}
.adm-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e5484d;color:#fff;font:700 .66rem/1 var(--font)}
.adm-nav .tab-count{background:#e5484d;color:#fff}
.adm-panes>.adm-pane>h2:first-child{margin-top:0}

/* pages whose own tab bar the hub replaces (their sections are hub sub-tabs now) */
.adm-hoist-mod>.spread:first-child,.adm-hoist-mod>.md-top{display:none}
.adm-hoist-billing .ba-nav{display:none}

/* ---------- Home ---------- */
.adm-inbox{display:grid;gap:12px}
.adm-inbox-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.adm-inbox-h h3{margin:0}
.adm-inbox-h p{margin:2px 0 0;font-size:.9rem}
.adm-inbox-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.adm-inbox-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-decoration:none;background:var(--surface)}
.adm-inbox-row:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.adm-inbox-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.adm-inbox-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
.adm-inbox-ico .ico{width:17px;height:17px}
.adm-inbox-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.adm-inbox-txt b{font-weight:600}
.adm-inbox-txt small{color:var(--dim);font-size:.8rem}
.adm-inbox-n{flex:none;min-width:34px;padding:2px 10px;border-radius:999px;text-align:center;font:700 1rem var(--hfont);color:#fff;background:#e5484d}
.adm-inbox-go{flex:none;color:var(--dim)}
.adm-inbox-go .ico{width:16px;height:16px}
.adm-allclear{display:flex;align-items:center;gap:8px;padding:12px;border-radius:12px;color:var(--good);background:color-mix(in srgb,var(--good) 9%,transparent);font-weight:600}
.adm-allclear .ico{width:18px;height:18px}
.adm-inbox-clear{margin:0;font-size:.82rem;color:var(--dim)}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:16px 0}
.adm-stat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;margin:0}
.adm-stat small{font:600 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.adm-stat b{font:700 1.5rem/1.2 var(--hfont);color:var(--text)}
.adm-stat span{font-size:.8rem;color:var(--muted)}
.adm-quickwrap{margin-top:18px}
.adm-quickhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.adm-quickhead h3{margin:0}
.adm-quickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.adm-quick{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin:0;color:var(--text);text-decoration:none}
.adm-quick:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.adm-quick-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--accent2) 12%,transparent);color:var(--accent2)}
.adm-quick-ico .ico{width:17px;height:17px}
.adm-quick-t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.adm-quick-t small{color:var(--dim);font-size:.8rem}

/* Roles → Access preview, grouped by hub */
.ac-hubgrp{margin:0 0 12px}
.ac-hubgrp h5{margin:0 0 6px;font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ac-hubgrp.off h5{color:var(--dim)}
/* Roles matrix on phones: "Owner only" wraps inside its narrow cell instead of pushing the page sideways */
@media (max-width:700px){.ac-table .ac-cell .dim{display:block;font-size:.62rem;line-height:1.15;overflow-wrap:anywhere}}

/* ---------- phones and narrow windows ---------- */
@media (max-width:900px){
  .adm-jump{margin-bottom:8px}
  .adm-jump-k{display:none}
  .adm-hubtitle{margin-bottom:6px}
  .adm-hubtitle p{display:none}
  .adm-hubtitle h2{font-size:1.15rem}
}
@media (max-width:600px){
  .adm-subs{gap:4px;border-bottom:0}
  .adm-subs button{padding:7px 10px;border:1px solid var(--line);border-radius:999px;margin:0;font-size:.84rem}
  .adm-subs button.on{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
  .adm-subs button .ico{display:none}
  .adm-inbox-row{padding:10px}
  .adm-inbox-ico{display:none}
  .adm-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .adm-stat b{font-size:1.25rem}
}

/* ================= redesign: pinned pill tab bar, tidy sidebar, consistent spacing ================= */
/* hub title */
.adm-hubhead{margin:0 0 4px}
.adm-hubtitle{margin:0 0 14px}
.adm-hubtitle>.ico{width:26px;height:26px;padding:8px;box-sizing:content-box;border-radius:12px;background:color-mix(in srgb,var(--accent) 11%,transparent)}
.adm-hubtitle h2{font-size:1.35rem}
/* the tabs bar: one rounded card of pills, pinned under the top bar while you scroll */
.adm-pinmark{height:1px;margin-bottom:-1px}
.adm-subwrap{position:sticky;top:calc(var(--head-h,64px) + 8px);z-index:25;margin:0 0 20px;transition:filter .2s}
.adm-subwrap:not(:has(.adm-subs:not([hidden]):not(.solo))){display:none}
.adm-subs{gap:4px;padding:5px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.adm-subwrap.stuck .adm-subs{box-shadow:0 10px 28px -14px rgba(15,23,42,.35),0 1px 2px rgba(15,23,42,.06)}
.adm-subs button{margin:0;padding:8px 13px;border:0;border-radius:10px;font-size:.88rem;line-height:1.2;color:var(--muted)}
.adm-subs button:hover{color:var(--text);background:color-mix(in srgb,var(--text) 5%,transparent)}
.adm-subs button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);border:0}
.adm-subs button .adm-n{margin-left:2px}
html[data-theme="dark"] .adm-subs{background:color-mix(in srgb,var(--surface) 90%,transparent)}
html[data-theme="dark"] .adm-subwrap.stuck .adm-subs{box-shadow:0 12px 30px -12px rgba(0,0,0,.8)}
/* sidebar: aligned icons, a clear active state with an accent bar, badges lined up on the right */
.adm-side{padding:10px}
.adm-nav{display:grid;gap:2px}
.adm-nav button{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:10px;font-weight:500}
.adm-nav button>.ico{width:18px;height:18px;flex:none}
.adm-nav button>span:not(.badge){flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-nav button .tab-count{margin-left:auto;flex:none}
.adm-nav button.on{font-weight:600}
.adm-nav button.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
/* pages inside a hub: the hub already shows the title, so the page's own repeat of it goes */
.adm-pane .sec-pagehead{display:none}
/* phones: the pinned bar stays compact */
@media (max-width:900px){.adm-subwrap{top:calc(var(--head-h,58px) + 6px);margin-bottom:14px}.adm-nav button.on::before{display:none}}
@media (max-width:600px){.adm-subs{padding:4px;border-radius:12px}.adm-subs button{border:0;padding:7px 10px}.adm-subs button.on{border:0}}
/* while pinned, cover the little gap between the top bar and the tabs bar so content doesn't peek through */
.adm-subwrap.stuck::before{content:"";position:absolute;left:-6px;right:-6px;top:-12px;height:16px;background:var(--bg);z-index:-1}
.soc-bar-l{white-space:normal;overflow-wrap:anywhere}
/* phones: the tabs wrap onto a few rows, so they scroll with the page instead of covering it */
@media (max-width:600px){.adm-subwrap{position:static}.adm-subwrap.stuck .adm-subs{box-shadow:none}.adm-subwrap.stuck::before{display:none}}
@media (max-width:900px){.adm-nav{display:none}}
@media (max-width:900px){.adm-side{padding:0}}

/* w2-celebrate.css */
/* Birthday and anniversary celebrations (public/js/w2-celebrate.js) */
.w2-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:10060;pointer-events:none}
.w2-pop-bg{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;background:rgba(6,10,24,.62);backdrop-filter:blur(5px);animation:w2fade .25s ease}
.w2-pop-bg.out{opacity:0;transition:opacity .2s}
.w2-pop{position:relative;width:min(440px,100%);max-height:calc(100dvh - 36px);overflow:auto;text-align:center;padding:30px 26px 24px;border-radius:26px;background:var(--surface,#fff);color:var(--text,#0f172a);border:1px solid var(--line2,rgba(128,128,128,.3));box-shadow:0 30px 80px rgba(0,0,0,.45);animation:w2pop .5s cubic-bezier(.2,1.3,.4,1);z-index:2}
.w2-pop::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:26px 26px 0 0;background:linear-gradient(90deg,#ec4899,#f59e0b,#22c55e,#3b82f6,#a855f7)}
.w2-pop.anniv::before{background:linear-gradient(90deg,#7c3aed,#f59e0b,#ec4899)}
.w2-x{position:absolute;top:12px;right:12px}
.w2-emoji{font-size:64px;line-height:1.1;margin:4px 0 6px;animation:w2bob 1.6s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.w2-pop h2{margin:0 0 8px;font:800 1.55rem/1.2 var(--hfont,inherit);background:linear-gradient(120deg,var(--accent,#2563eb),var(--accent2,#7c3aed),#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.w2-text{margin:0 auto 14px;max-width:34ch;color:var(--muted,#475569);line-height:1.55}
.w2-gift{margin:14px 0;padding:16px;border-radius:18px;border:2px dashed var(--accent,#2563eb);background:color-mix(in srgb,var(--accent,#2563eb) 9%,transparent);display:grid;gap:8px;justify-items:center}
.w2-gift>small:first-child{font:700 .68rem var(--mfont,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--accent,#2563eb)}
.w2-gift>b{font-size:1.2rem}
.w2-code{display:flex;gap:8px;align-items:center}
.w2-code code{padding:7px 14px;border-radius:10px;background:var(--text,#0f172a);color:var(--surface,#fff);font:700 1.05rem var(--mfont,monospace);letter-spacing:.18em}
.w2-more{margin:6px 0 0;color:var(--muted)}
.w2-thanks{margin-top:10px}
.w2-balloons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.w2-balloons span{position:absolute;bottom:-60px;font-size:34px;animation:w2float 6s ease-in infinite}
.w2-ribbon{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:10px 14px;border-radius:16px;border:1px solid color-mix(in srgb,#ec4899 40%,transparent);background:linear-gradient(120deg,color-mix(in srgb,#ec4899 16%,var(--surface,#fff)),color-mix(in srgb,#f59e0b 16%,var(--surface,#fff)));color:var(--text);position:relative;overflow:hidden}
.w2-ribbon.anniv{border-color:color-mix(in srgb,#7c3aed 40%,transparent);background:linear-gradient(120deg,color-mix(in srgb,#7c3aed 16%,var(--surface,#fff)),color-mix(in srgb,#f59e0b 14%,var(--surface,#fff)))}
.w2-r-emoji{font-size:30px;animation:w2bob 1.8s ease-in-out infinite}
.w2-r-t{flex:1;min-width:0;display:grid;gap:1px}.w2-r-t b{font:700 1rem var(--hfont,inherit)}.w2-r-t span{font-size:.86rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w2-r-party{border:0;background:none;font-size:22px;cursor:pointer;padding:4px 6px;border-radius:10px}.w2-r-party:hover{background:rgba(255,255,255,.2)}
@keyframes w2fade{from{opacity:0}to{opacity:1}}
@keyframes w2pop{0%{transform:scale(.7) translateY(30px);opacity:0}100%{transform:none;opacity:1}}
@keyframes w2bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes w2float{0%{transform:translateY(0) rotate(-8deg);opacity:0}12%{opacity:1}100%{transform:translateY(-110vh) rotate(10deg);opacity:.9}}
@media (prefers-reduced-motion:reduce){.w2-pop,.w2-emoji,.w2-r-emoji,.w2-pop-bg{animation:none}.w2-balloons,.w2-confetti{display:none}}
@media (max-width:520px){.w2-ribbon{flex-wrap:wrap}.w2-r-t span{white-space:normal}}

/* w2-admin.css */
/* Admin: Celebrations and Newsletter studio (public/js/w2-admin.js) */
.w2a-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}
.w2a-stats>div{padding:12px 14px;border-radius:14px;border:1px solid var(--line2);background:color-mix(in srgb,var(--accent) 6%,transparent);display:grid;gap:2px}
.w2a-stats b{font:800 1.4rem var(--hfont,inherit)}.w2a-stats small{color:var(--dim,#64748b)}
.w2a-toggles{display:grid;gap:10px;margin:6px 0 16px}
.w2a-tg{display:flex;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line2);border-radius:14px}.w2a-tg span{display:grid;gap:1px}.w2a-tg small{color:var(--dim)}
.w2a-occ{border:1px solid var(--line2);border-radius:16px;padding:14px 16px;margin:0 0 12px;display:grid;gap:10px}
.w2a-occ-h{display:flex;align-items:center;gap:10px}.w2a-occ-h .sp,.w2a-bh .sp{flex:1}.w2a-occ-e{font-size:24px}
.w2a-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.w2a .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.w2a .input.sm{min-width:70px;max-width:150px}
.w2a-frame{width:100%;height:560px;border:1px solid var(--line2);border-radius:14px;background:#0b1020}
.w2a-frame.live{height:min(78vh,820px)}
.w2a-empty{text-align:center;padding:34px 18px}.w2a-empty>span{font-size:44px}
.w2a-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.w2a-sw{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;flex:none}
.w2a-rt{flex:1;min-width:200px;display:grid;gap:2px}
.w2a-st{font-weight:700}.w2a-st.sent{background:color-mix(in srgb,#22c55e 18%,transparent)}.w2a-st.scheduled,.w2a-st.sending{background:color-mix(in srgb,#f59e0b 20%,transparent)}
.w2a-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.w2a-tpl{border:1px solid var(--line2);border-radius:16px;background:var(--surface);color:var(--text);text-align:left;padding:0 0 12px;display:grid;gap:4px;cursor:pointer;overflow:hidden}
.w2a-tpl:hover{border-color:var(--accent);transform:translateY(-2px)}.w2a-tpl b,.w2a-tpl small{padding:0 12px}
.w2a-tpl-h{display:grid;place-items:center;height:76px;font-size:24px;letter-spacing:4px;margin-bottom:6px}
.w2a-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:14px}
@media (max-width:1100px){.w2a-split{grid-template-columns:minmax(0,1fr)}}
.w2a-edit{display:grid;gap:14px}.w2a .stack{display:grid;gap:12px}
.w2a-pv{position:sticky;top:84px}.w2a-pv-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.w2a-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.w2a-th{border:1px solid var(--line2);border-radius:12px;background:none;color:var(--text);padding:6px;display:grid;gap:4px;justify-items:center;cursor:pointer}
.w2a-th>span{width:100%;height:34px;border-radius:8px;display:grid;place-items:center;font-size:18px}.w2a-th small{font-size:.7rem;text-align:center}
.w2a-th.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}
.w2a-block{border:1px solid var(--line2);border-radius:14px;padding:10px 12px;display:grid;gap:8px;margin-bottom:10px}
.w2a-bh{display:flex;align-items:center;gap:4px}
.w2a-add{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.w2a-add .chip{cursor:pointer}
.w2a-hero img,.w2a-pic{max-width:100%;max-height:180px;border-radius:12px;display:block;margin-bottom:8px}
.w2a-rad{display:flex;gap:10px;align-items:center}

/* admin-redesign.css */
/* Admin panel redesign (admin-nav.js): grouped, collapsible sidebar with search, breadcrumb title, sticky sub-tab bar with part chips,
   Home dashboard, All tools map, and the Ctrl+K command palette. Colors come only from the theme variables, so light and dark follow.
   Loaded after the other admin css; selectors start with .adm-layout / .adm-pal so they win without !important where they can. */

/* ---------- layout ---------- */
.adm-layout{grid-template-columns:248px minmax(0,1fr);gap:24px;padding-bottom:88px} /* room under the page for the floating messages dock */
.adm-content{min-width:0}

/* ---------- sidebar ---------- */
.adm-layout .adm-side{padding:10px 10px 12px;border-radius:16px}
.adm-sidetop{display:grid;gap:8px;margin:0 0 6px}
.adm-search{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:1px solid var(--line2);border-radius:11px;background:var(--surface2);color:var(--dim);font:500 .88rem var(--font);text-align:left;cursor:pointer}
.adm-search:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--text)}
.adm-search:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.adm-search>.ico{width:16px;height:16px;flex:none}
.adm-search>span{flex:1;min-width:0}
.adm-search .adm-jump-k{display:inline-block}
.adm-layout .adm-nav{display:grid;gap:1px}
.adm-layout .adm-grp{padding:14px 10px 5px;font:600 .64rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.adm-layout .adm-grp:first-child{padding-top:6px}
.adm-hubrow{display:block}
.adm-hubline{display:flex;align-items:center;gap:2px;position:relative}
.adm-layout .adm-nav .adm-hb{flex:1;min-width:0;padding:8px 10px;gap:10px;font-size:.9rem}
.adm-layout .adm-nav .adm-hb>.ico{width:18px;height:18px}
.adm-layout .adm-nav .adm-hb.on{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
.adm-layout .adm-nav .adm-tg{flex:none;width:30px;height:30px;padding:0;justify-content:center;border-radius:8px;color:var(--dim)}
.adm-layout .adm-nav .adm-tg>.ico{width:14px;height:14px;transition:transform .15s}
.adm-layout .adm-nav .adm-tg:hover{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.adm-hubrow.open .adm-tg>.ico{transform:rotate(180deg)}
.adm-layout .adm-nav .adm-tg::before,.adm-layout .adm-nav .adm-sl::before{display:none}
.adm-subnav{display:none;margin:1px 0 4px 17px;padding:0 0 0 8px;border-left:1px solid var(--line2)}
.adm-hubrow.open .adm-subnav{display:grid;gap:1px}
.adm-hubrow.open .adm-subnav[hidden]{display:none}
.adm-layout .adm-nav .adm-sl{padding:6px 9px;font-size:.84rem;font-weight:500;border-radius:8px;gap:8px}
.adm-layout .adm-nav .adm-sl>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-layout .adm-nav .adm-sl.on{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);font-weight:600}
.adm-layout .adm-nav .adm-sl .adm-n,.adm-layout .adm-nav .adm-hb .tab-count{flex:none;margin-left:auto}
.adm-layout .adm-nav .tab-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:700 .66rem/18px var(--font);text-align:center}

/* ---------- title: breadcrumb, heading, one-line description ---------- */
.adm-layout .adm-hubhead{margin:0 0 12px}
.adm-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin:0 0 6px;font-size:.78rem;color:var(--dim)}
.adm-crumbs a{color:var(--muted);text-decoration:none}
.adm-crumbs a:hover{color:var(--accent);text-decoration:underline}
.adm-crumbs span:not(.adm-sep){color:var(--text)}
.adm-sep{opacity:.6}
.adm-layout .adm-hubtitle{margin:0;column-gap:12px}
.adm-layout .adm-hubtitle>.ico{width:24px;height:24px}
.adm-layout .adm-hubtitle h2{font-size:1.4rem}
.adm-layout .adm-hubtitle p{margin:2px 0 0;font-size:.9rem;max-width:70ch}

/* ---------- pinned tab bars ---------- */
.adm-layout .adm-subwrap{position:sticky;top:calc(var(--adm-top,var(--head-h,64px)) + 8px);z-index:26;margin:0 0 10px}
.adm-layout .adm-subs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.adm-layout .adm-subs::-webkit-scrollbar{display:none}
.adm-layout .adm-subs button{flex:none}
.adm-layout .adm-partwrap{position:sticky;top:calc(var(--adm-top,var(--head-h,64px)) + 8px + var(--adm-subs-h,48px) + 6px);z-index:25;margin:0 0 16px}
.adm-layout .adm-partwrap[hidden]{display:none}
.adm-layout .adm-subwrap:not(:has(.adm-subs:not([hidden]):not(.solo))) + .adm-partwrap{top:calc(var(--adm-top,var(--head-h,64px)) + 8px)}
.adm-layout .adm-subs.adm-parts{display:flex;gap:6px;padding:0;border:0;box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.adm-layout .adm-subs.adm-parts button{padding:6px 13px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);font-size:.84rem;color:var(--muted);box-shadow:none}
.adm-layout .adm-subs.adm-parts button:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.adm-layout .adm-subs.adm-parts button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:none}
.adm-layout .adm-subs.adm-parts button .ico{width:14px;height:14px}
.adm-subwrap.stuck + .adm-partwrap{padding-bottom:2px}
/* a quiet backdrop behind the pinned bars so scrolling content never shows through the gap */
.adm-layout .adm-partwrap:not([hidden])::before{content:"";position:absolute;left:-6px;right:-6px;top:-4px;bottom:-6px;background:var(--bg);z-index:-1;border-radius:0 0 12px 12px;opacity:.94}
/* when the site's top bar slides away on scroll, the bars pin to the top edge instead */
html.head-hidden .adm-layout,body.head-hidden .adm-layout,html[data-head="hidden"] .adm-layout{--adm-top:0px}

/* ---------- Home ---------- */
.adm-glance{margin:18px 0 0}
.adm-glance h3,.adm-quickhead h3{margin:0 0 10px;font-size:1rem}
.adm-glance .adm-stats{margin:0}
.adm-stat.link{text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.adm-stat.link:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-1px)}
.adm-stat.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.adm-stat.good b{color:var(--good)}
.adm-stat.warn b{color:#e5484d}
.adm-quickgrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.adm-quick{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.adm-quick-h{display:flex;gap:12px;align-items:flex-start;color:var(--text);text-decoration:none}
.adm-quick-h:hover b{color:var(--accent)}
.adm-quick-links{display:flex;flex-wrap:wrap;gap:6px}
.adm-quick-links a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line2);border-radius:999px;font-size:.8rem;color:var(--muted);text-decoration:none;background:var(--surface2)}
.adm-quick-links a:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.adm-map{margin:0 0 14px}
.adm-map h3{display:flex;align-items:center;gap:8px;margin:0}
.adm-map h3 .ico{width:18px;height:18px;color:var(--accent)}
.adm-map>p{margin:2px 0 10px;font-size:.88rem}
.adm-map ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px}
.adm-map li a{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:11px;color:var(--text);text-decoration:none;height:100%;box-sizing:border-box}
.adm-map li a:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.adm-map li a>.ico{width:17px;height:17px;flex:none;margin-top:2px;color:var(--accent)}
.adm-map-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.adm-map-t small{color:var(--dim);font-size:.8rem}
.adm-map-t .adm-map-in{font-size:.72rem;opacity:.85}
.adm-map .adm-n{flex:none}

/* ---------- command palette ---------- */
.adm-pal-bg{position:fixed;inset:0;z-index:300;display:flex;justify-content:center;align-items:flex-start;padding:min(14vh,120px) 14px 14px;background:color-mix(in srgb,#05080f 52%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.adm-pal{width:min(620px,100%);max-height:min(72vh,560px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);overflow:hidden}
.adm-pal-top{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.adm-pal-top>.ico{width:18px;height:18px;flex:none;color:var(--dim)}
.adm-pal-in.input{flex:1;min-width:0;border:0;background:none;box-shadow:none;padding:6px 0;font-size:1rem;outline:none}
.adm-pal-in::-webkit-search-cancel-button{display:none}
.adm-pal-x{flex:none;padding:3px 8px;border:1px solid var(--line2);border-radius:7px;background:var(--surface2);color:var(--dim);font:600 .68rem var(--mono);cursor:pointer}
.adm-pal-list{list-style:none;margin:0;padding:6px;overflow-y:auto;scrollbar-width:thin}
.adm-pal-list li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;cursor:pointer}
.adm-pal-list li>.ico{width:18px;height:18px;flex:none;color:var(--dim)}
.adm-pal-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.adm-pal-t b{font-weight:600;color:var(--text)}
.adm-pal-t small{color:var(--dim);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-pal-list li.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.adm-pal-list li.on>.ico{color:var(--accent)}
.adm-pal-list li.adm-pal-none{cursor:default;color:var(--dim);background:none}
.adm-pal-list li.adm-pal-h{cursor:default;padding:6px 10px 2px;font:600 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:none}
.adm-pal-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--line);font-size:.74rem;color:var(--dim)}
.adm-pal-foot kbd{margin-right:3px;padding:0 5px;border:1px solid var(--line2);border-radius:5px;font:600 .66rem var(--mono);background:var(--surface2)}
html.adm-pal-on{overflow:hidden}

/* ---------- one page shown two ways: ID verification vs Groups and community ---------- */
.adm-only-idq>*:not(.idq){display:none!important}
.adm-no-idq>.idq{display:none}

/* ---------- tablet and phone ---------- */
@media (max-width:900px){
  .adm-layout{grid-template-columns:1fr;gap:10px;padding-bottom:96px}
  .adm-layout .adm-side{padding:0;border:0;background:none;box-shadow:none}
  .adm-layout .adm-nav{display:none}
  .adm-sidetop{grid-template-columns:48px minmax(0,1fr);gap:8px;margin:0}
  .adm-search{justify-content:center;padding:0;height:42px}
  .adm-search>span,.adm-search .adm-jump-k{display:none}
  .adm-sidetop .adm-pick{height:42px;font-size:.95rem}
  .adm-layout .adm-subwrap{top:calc(var(--adm-top,var(--head-h,58px)) + 6px);margin-bottom:8px}
  .adm-layout .adm-partwrap{top:calc(var(--adm-top,var(--head-h,58px)) + 6px + var(--adm-subs-h,44px) + 4px);margin-bottom:12px}
  .adm-layout .adm-hubtitle p{display:block;font-size:.84rem}
  .adm-layout .adm-hubtitle h2{font-size:1.2rem}
}
@media (max-width:600px){
  /* phones: both bars are single rows you swipe sideways; only the main bar stays pinned so content keeps the room */
  .adm-layout .adm-subwrap{position:sticky}
  .adm-layout .adm-subs{padding:4px;border:1px solid var(--line);border-radius:12px;gap:4px;mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .adm-layout .adm-subs button{padding:8px 12px;border:0;border-radius:9px}
  .adm-layout .adm-subs button .ico{display:none}
  .adm-layout .adm-subs button.on{border:0}
  .adm-layout .adm-subwrap.stuck .adm-subs{box-shadow:0 8px 20px -14px rgba(15,23,42,.45)}
  .adm-layout .adm-subwrap.stuck::before{display:block;left:-16px;right:-16px;top:-8px}
  .adm-layout .adm-partwrap{position:static;margin:0 -16px 12px;padding:0 16px}
  .adm-layout .adm-partwrap::before{display:none!important}
  .adm-layout .adm-subs.adm-parts{mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .adm-layout .adm-subs.adm-parts button .ico{display:none}
  .adm-crumbs{font-size:.74rem}
  .adm-quickgrid,.adm-map ul{grid-template-columns:minmax(0,1fr)}
  .adm-pal-bg{padding-top:10vh}
  .adm-pal-foot{display:none}
}

/* filter chips inside admin pages scroll sideways on phones instead of pushing the page wider */
.adm-layout .adm-content .af-filter{overflow-x:auto;overflow-y:hidden}

/* w4.css */
/* @mentions, Who viewed me, Profile Boost (public/js/w4-ui.js) */
.w4-m{color:var(--accent);font-weight:600;text-decoration:none;border-radius:6px;padding:0 2px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.w4-m:hover{text-decoration:underline}
.w4-mh{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-left:6px;padding:1px 6px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));vertical-align:middle}
.w4-pop{position:fixed;z-index:1200;width:min(290px,calc(100vw - 16px));max-height:300px;overflow:auto;background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.28);padding:6px}
.w4-opt{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;border:0;background:none;color:var(--text);border-radius:10px;text-align:left;cursor:pointer;font:inherit}
.w4-opt.on,.w4-opt:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.w4-opt-t{display:grid;min-width:0}.w4-opt-t b{font-size:.9rem}.w4-opt-t small{color:var(--dim);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w4-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.w4-tabs{display:flex;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.w4-tab{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font:600 .86rem var(--font);cursor:pointer}
.w4-tab em{font-style:normal;font-size:.74rem;opacity:.8;background:color-mix(in srgb,var(--accent) 14%,transparent);padding:0 7px;border-radius:999px}
.w4-tab.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2))}.w4-tab.on em{background:rgba(255,255,255,.22)}
.w4-colo,.w4-mono{width:44px;height:44px;border-radius:12px;flex:none;object-fit:contain;background:#fff;border:1px solid var(--line2);padding:4px}
.w4-mono{display:grid;place-items:center;color:#fff;font:700 .95rem var(--hfont);border:0;padding:0}
.w4-corow b{display:flex;align-items:center;flex-wrap:wrap}
.w4-boost{display:flex;gap:16px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 40%,var(--line2));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface))}
.w4-boost.on{padding:14px 18px}
.w4-boost-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));flex:none}.w4-boost-ic .ico{width:22px;height:22px}
.w4-boost-t{flex:1 1 280px;min-width:0}.w4-boost-t p{margin:2px 0 8px}
.w4-boost-t ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:.88rem}.w4-boost-t li{display:flex;gap:8px;align-items:flex-start}.w4-boost-t li .ico{width:16px;height:16px;color:var(--accent);flex:none;margin-top:2px}
.w4-boost-buy{display:grid;gap:4px;justify-items:center;text-align:center}.w4-price{font:800 1.7rem var(--hfont)}
.w4-an h3{display:flex;align-items:center;gap:8px;margin:0}
.w4-bars{display:flex;align-items:flex-end;gap:3px;height:90px;margin:14px 0}
.w4-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--accent),var(--accent2));min-height:4px;opacity:.9}
.w4-an-co{display:grid;gap:6px}.w4-an-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed var(--line2);font-size:.9rem}
.w4-priv{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}.w4-priv .input{max-width:360px}
.w4-priv>div{display:grid;gap:3px;flex:1 1 260px;min-width:0}

/* @mentions: a soft moving shine so a tagged name catches the eye (off for reduced motion) */
.w4-m{position:relative;background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 12%,transparent) 0%,color-mix(in srgb,var(--accent2) 26%,transparent) 50%,color-mix(in srgb,var(--accent) 12%,transparent) 100%);background-size:220% 100%;transition:box-shadow .2s}
.w4-m:hover{text-decoration:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
@media (prefers-reduced-motion:no-preference){.w4-m{animation:w4shine 4.5s ease-in-out infinite}@keyframes w4shine{0%,100%{background-position:0 0}50%{background-position:100% 0}}}
/* #hashtags */
.hashtag{color:var(--accent2,var(--accent));font-weight:600;text-decoration:none;border-radius:6px;padding:0 1px}
.hashtag:hover{text-decoration:underline}
.hashtag.otw{color:var(--good,#22c55e)}
a.chip.have.hashtag,a.hashtag.otw.chip{text-decoration:none}
.pf-tags{margin:2px 0 0;font-size:.9rem}
.vbadge.b-spot{color:#2b1d00;background:linear-gradient(135deg,#ffd43b,#ffb703);border-radius:999px}
.vbadge.b-spot .ico{color:#2b1d00}
.mt-boost{margin-left:6px;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:999px;color:#2b1d00;background:linear-gradient(135deg,#ffd43b,#ffb703)}

/* Admin: game questions */
.w7a-set{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:10px 0}
.w7a-warn{padding:10px 12px;border-radius:10px;background:color-mix(in srgb,#ffb703 16%,transparent);color:var(--text);font-size:.9rem}
.w7a-add{display:grid;gap:8px;margin:16px 0;padding:14px;border:1px dashed var(--line2);border-radius:12px}
.w7a-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.w7a-q{display:grid;gap:8px;padding:12px;margin-top:8px;border:1px solid var(--line2);border-radius:12px}
.w7a-qt{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.w7a-qt small{margin-left:auto}
.w7a-o{margin:0;padding-left:20px;display:grid;gap:2px;font-size:.88rem}.w7a-o .ok{color:var(--good,#22c55e);font-weight:700}

/* Admin emoji: tabs and the all-in-one view */
.ck-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0;position:sticky;top:0;z-index:2;padding:6px 0;background:var(--surface,transparent)}
.ck-tab{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:600 .84rem var(--font,inherit);cursor:pointer}
.ck-tab small{opacity:.65;font-weight:500}.ck-tab.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent,#fff);border-color:transparent}.ck-tab.off{opacity:.55}
.ck-ov{margin-top:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px}
.ck-ov-h{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;color:inherit;padding:0 0 8px;cursor:pointer;text-align:left}.ck-ov-h .ico{margin-left:auto;width:16px;height:16px}
.ck-ov-g{display:flex;flex-wrap:wrap;gap:4px;font-size:1.35rem;line-height:1.2}

/* Recon Edge on the pricing page and the Boost card */
.ptiles{max-width:1240px}
/* Recon Edge card: same surface tokens as the plans so it follows light and dark */
.ptile-boost:not(.hot){border-color:color-mix(in srgb,#f5b301 45%,var(--line2));background:linear-gradient(180deg,color-mix(in srgb,#f5b301 9%,var(--surface2)),var(--surface))}
.ptile-boost .pbadge{background:linear-gradient(90deg,#f5b301,#ff8a3d);color:#1b1200}
.w4-boost-inc{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:.88rem}
.w4-boost-inc svg{flex:none;margin-top:2px;color:var(--accent)}
.w4-boost-buy{display:flex;flex-direction:column;gap:8px;align-items:stretch}

/* Recon Edge pop-up */
.edge-pop{display:grid;gap:12px;min-width:0}
.edge-top{display:flex;gap:12px;align-items:center}
.edge-top h2{margin:0}.edge-top p{margin:2px 0 0}
.edge-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#f5b301,#ff8a3d);color:#1b1200;flex:none}
.edge-price b{font-size:1.9rem}.edge-price span{color:var(--muted,#667)}
.edge-feats{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.edge-feats li{display:flex;gap:8px;align-items:flex-start}.edge-feats svg{flex:none;margin-top:3px;color:var(--accent)}
.edge-done{text-align:center;display:grid;gap:10px;justify-items:center;padding:12px 0}

/* network-grow.css */
/* ReconHire: My Network. Built by pages.network in network-ui.js.
   ReconHire look: mono "// kickers", Chakra Petch headings and numbers, the blue to violet accent gradient with soft glows,
   faint grid texture and hex motifs on hero cards and banners, terminal-style empty states.
   Left: Your network (counts), ad, footer. Main: hero with Signal boost / Intel feed, requests, daily games, recon picks, people. */
.ng-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
.ng-left{position:sticky;top:76px;display:grid;gap:12px;min-width:0}
.ng-main{display:grid;gap:14px;min-width:0}
.ng-body{display:grid;gap:14px;min-width:0}
.ng-sections,.ng-sections>div{display:grid;gap:14px;min-width:0}
.ng-sections>div:empty{display:none}
.ng-main .spin{margin:18px auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ng-main .card,.ng-left .ng-man{border-radius:18px}

/* shared bits */
.ng-kick{display:block;font:600 .7rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:4px}
.ng-term{font:600 .92rem/1.3 var(--mono);color:var(--accent2)!important;letter-spacing:.02em}
.ng-cursor{display:inline-block;width:.5em;height:.95em;margin-left:6px;vertical-align:-.08em;border-radius:1px;background:linear-gradient(180deg,var(--accent),var(--accent2));animation:blink 1.1s steps(1) infinite;box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.ng-cursor{animation:none}}
/* feature cards: a thin gradient bar on top */
.ng-feat,.ng-hero,.ng-gamesec,.ng-jobs{overflow:hidden}
.ng-feat::before,.ng-hero::before,.ng-gamesec::before,.ng-jobs::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.9}

/* ---------- Your network (left) ---------- */
.ng-man{padding:12px 6px 6px}
.ng-man .ng-kick{margin:0 10px 2px}
.ng-man h2{font:600 .98rem/1.3 var(--hfont);margin:0 10px 6px;color:var(--text);letter-spacing:.01em}
.ng-man-list{display:grid;gap:2px}
.ng-man-row{position:relative;display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:.86rem;font-weight:500;transition:background .15s,color .15s}
.ng-man-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text);text-decoration:none}
.ng-man-row.on{color:var(--text);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 6%,transparent))}
.ng-man-row.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent)}
.ng-man-ic{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ng-man-ic .ico{width:15px;height:15px}
.ng-man-row.on .ng-man-ic{color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
.ng-man-l{display:grid;flex:1;min-width:0;line-height:1.25}
.ng-man-l small{color:var(--dim);font-size:.7rem;font-weight:400}
.ng-man-n{font:700 .85rem/1 var(--hfont);color:var(--text)}
.ng-left .rail-foot{display:grid}
.ng-left .ng-ad{margin:0}
/* one footer: the left column's on desktop, the page footer on phones */
@media (min-width:901px){body:has(.ng-left .rail-foot) .foot-app{display:none}}
@media (max-width:900px){.ng-left .rail-foot{display:none}}

/* phones: the left card becomes a row of chips that scrolls on its own */
.ng-mchips{display:none;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 1px;margin:0 -2px}
.ng-mchips::-webkit-scrollbar{display:none}
.ng-mchips a{display:inline-flex;align-items:center;gap:6px;flex:none;padding:7px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font-size:.84rem;font-weight:500;white-space:nowrap;text-decoration:none}
.ng-mchips a .ico{width:16px;height:16px;color:var(--accent)}
.ng-mchips a b{font:700 .84rem var(--hfont);color:var(--text)}
.ng-mchips a.on{border-color:transparent;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ng-mchips a.on .ico,.ng-mchips a.on b{color:inherit}

/* ---------- hero (Signal boost / Intel feed) ---------- */
.ng-hero{padding:20px 20px 14px;background:
  linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,
  radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),
  radial-gradient(380px 200px at 0% 100%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--surface)}
.ng-hero::after{content:"";position:absolute;right:-26px;top:-30px;width:170px;height:190px;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%237c3aed' stroke-width='1.4'%3E%3Cpath d='M50 3 94 28v56L50 109 6 84V28z' opacity='.55'/%3E%3Cpath d='M50 25 75 39v34L50 87 25 73V39z' stroke='%232563eb' opacity='.6'/%3E%3Ccircle cx='50' cy='56' r='5' fill='%232563eb' stroke='none' opacity='.5'/%3E%3C/svg%3E") center/contain no-repeat}
.ng-hero-top{position:relative;z-index:1;display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.ng-hero-txt{min-width:0;flex:1 1 300px}
.ng-hero-h{margin:0;font:700 1.6rem/1.15 var(--hfont);letter-spacing:.01em;color:var(--text)}
.ng-hero p{margin:6px 0 0;color:var(--muted);font-size:.92rem;max-width:520px}
.ng-stats{display:flex;gap:8px}
.ng-stat{display:grid;justify-items:center;min-width:84px;padding:9px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(6px);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.ng-stat:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.ng-stat b{font:700 1.35rem/1.1 var(--hfont);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ng-stat small{font:600 .62rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);white-space:nowrap}
.ng-tabs{position:relative;z-index:1;display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.ng-tabs a{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font:600 .9rem var(--font);text-decoration:none;transition:all .15s}
.ng-tabs a .ico{width:16px;height:16px}
.ng-tabs a:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent);text-decoration:none}
.ng-tabs a.on{color:var(--on-accent,#fff);border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 75%,transparent)}

/* ---------- section cards ---------- */
.ng-sec{padding:16px 18px 18px;min-width:0}
.ng-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.ng-sec-tt{min-width:0}
.ng-sec-h h2{margin:0;font:600 1.08rem/1.3 var(--hfont);letter-spacing:.01em;color:var(--text);min-width:0}
.ng-sec-h .row{gap:6px;flex-wrap:nowrap;align-items:center}
.ng-all{display:inline-flex;align-items:center;gap:2px;flex:none;border:0;background:none;padding:6px 8px 6px 12px;border-radius:999px;color:var(--accent);font:600 .86rem var(--font);cursor:pointer;text-decoration:none;white-space:nowrap}
.ng-all .ico{width:15px;height:15px}
.ng-all:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);text-decoration:none}
.ng-card-x{width:32px;height:32px;border-radius:50%;border:0}
.ng-empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:22px 12px;color:var(--muted)}
.ng-empty>.ico{width:30px;height:30px;color:var(--accent2);opacity:.75}
.ng-empty b{color:var(--text)}
.ng-empty .btn{margin-top:6px}
.ng-out{opacity:0;transform:scale(.94);transition:opacity .25s ease,transform .25s ease}
.ng-in{animation:ngIn .3s ease}
@keyframes ngIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ng-out,.ng-in{transition:none;animation:none}}

/* search */
.ng-search{padding:10px 12px}
.ng-search-row{display:flex;gap:8px;align-items:center}
.ng-search .search{position:relative;flex:1;min-width:0}
.ng-search .search .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--accent);width:17px;height:17px}
.ng-search .search input{width:100%;padding-left:40px;border-radius:999px}
.ng-search .search input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.ng-fbtn{flex:none;border-radius:999px}
.ng-fbtn[aria-expanded="true"]{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ng-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.ng-filters[hidden]{display:none}
.ng-filters select.input,.ng-filters input.input{width:auto;min-width:150px;flex:0 1 200px}
.ng-more{display:flex;margin:14px auto 0;border-radius:999px}

/* primary actions: gradient pills with a soft glow */
.ng-inv-act .btn.ng-accept,.ng-pc-act .btn:not(.ghost),.ng-conn-act .btn.ng-msg,.ng-game-go:not(.ghost),.ng-job .btn.ng-job-go,html[data-theme] .ng-inv-act .btn.ng-accept,html[data-theme] .ng-conn-act .btn.ng-msg,html[data-theme] .ng-job .btn.ng-job-go{border:0;border-radius:999px;color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.ng-inv-act .ng-accept:hover,.ng-pc-act .btn:not(.ghost):hover,.ng-conn-act .ng-msg:hover,.ng-job .btn.ng-job-go:hover{filter:brightness(1.08);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent2) 85%,transparent)}

/* ---------- invitations ---------- */
.ng-inv-list{display:grid}
.ng-inv{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px dashed var(--line2)}
.ng-inv:first-child{border-top:0;padding-top:4px}
.ng-inv-av{flex:none;border-radius:50%;text-decoration:none;line-height:0}
.ng-inv-av .nav-av,.ng-conn-av .nav-av,.ng-cu-av .nav-av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}
.ng-inv-main{flex:1;min-width:0;display:grid;gap:3px}
.ng-inv-t{font-size:.95rem;color:var(--text);line-height:1.35}
.ng-inv-t a{color:var(--text)}
.ng-inv-t a:hover b{color:var(--accent)}
.ng-inv-t .vbadges{margin:0 2px}
.ng-inv-t>span:last-child{color:var(--muted)}
.ng-inv-hl{color:var(--muted);font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ng-inv-note{position:relative;margin:6px 0 2px;padding:8px 12px 8px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--text);font-size:.88rem;font-style:normal;border:0;overflow-wrap:anywhere}
.ng-inv-note::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.ng-inv-act{display:flex;gap:8px;align-items:center;flex:none;align-self:center}
.ng-inv-act .btn{border-radius:999px;padding:7px 16px}
.ng-inv-done{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;color:var(--muted);font-size:.92rem}
.ng-inv-done>span:not(.nav-av){flex:1;min-width:160px}
.ng-inv-done .nav-av{flex:none;min-width:0}
.ng-inv-done b{color:var(--text)}
.ng-mutual{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:.8rem;line-height:1.3;min-width:0}
.ng-mutual>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ng-mutual .nav-av{box-shadow:none!important;font-size:8px!important;flex:none}
.ng-mutual>.ico{width:14px;height:14px;flex:none;color:var(--accent)}
.ng-mutual.otw{color:var(--good);font-weight:600}
.ng-dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 20%,transparent),0 0 8px var(--good)}

/* sub tabs on the Invitations view */
.ng-utabs{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.ng-utabs button{border:1px solid var(--line2);background:var(--surface);padding:7px 14px;border-radius:999px;color:var(--muted);font:600 .86rem var(--font);cursor:pointer}
.ng-utabs button:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ng-utabs button.on{color:var(--on-accent,#fff);border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.ng-view-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ng-view-h h2{margin:0;font:600 1.15rem/1.3 var(--hfont)}
.ng-view-h .ng-kick{margin-bottom:2px}
.ng-view-h small{display:block}
.ng-back{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:12px;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ng-back:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.ng-back .ico{width:18px;height:18px}

/* ---------- carousels (games, jobs) ---------- */
.ng-car{position:relative;min-width:0}
.ng-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:2px;margin:-2px;overscroll-behavior-x:contain}
.ng-track::-webkit-scrollbar{display:none}
.ng-track>*{scroll-snap-align:start;flex:none}
.ng-arr{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:38px;height:38px;margin-top:-19px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line2));background:var(--surface);color:var(--accent);box-shadow:var(--shadow),0 0 14px -4px color-mix(in srgb,var(--accent) 60%,transparent);cursor:pointer;transition:opacity .2s,transform .15s}
.ng-arr .ico{width:18px;height:18px}
.ng-arr.prev{left:-12px}.ng-arr.next{right:-12px}
.ng-arr.off{opacity:0;pointer-events:none}
.ng-arr:hover{transform:scale(1.06)}
@media (hover:none),(pointer:coarse){.ng-arr{display:none}}

/* daily games */
.ng-game{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:212px;min-height:172px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface2);color:var(--text);text-align:left;font:inherit;cursor:pointer;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.ng-game:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);transform:translateY(-2px);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--accent) 70%,transparent);text-decoration:none}
.ng-game.ch{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:
  linear-gradient(color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px) 0 0/16px 16px,
  linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px) 0 0/16px 16px,
  linear-gradient(150deg,color-mix(in srgb,var(--accent) 16%,var(--surface2)),color-mix(in srgb,var(--accent2) 10%,var(--surface2)))}
.ng-game.ch::after{content:"LIVE";position:absolute;top:12px;right:12px;font:700 .6rem/1 var(--mono);letter-spacing:.14em;color:var(--good);padding:4px 6px 4px 16px;border-radius:6px;background:color-mix(in srgb,var(--good) 12%,transparent) radial-gradient(circle at 8px 50%,var(--good) 3px,transparent 3.5px)}
.ng-game-ic{display:grid;place-items:center;width:44px;height:44px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent,#fff)}
.ng-game-ic .ico{width:21px;height:21px}
.ng-game-ic.emo{font-size:1.3rem;line-height:1;background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.ng-game-b{display:grid;gap:3px;flex:1}
.ng-game-b b{font:600 .95rem/1.25 var(--hfont)}
.ng-game-b small{color:var(--muted);font-size:.8rem;line-height:1.35}
.ng-streak{display:inline-flex;align-items:center;gap:4px;color:var(--accent2)!important;font:600 .74rem var(--mono)!important;text-transform:uppercase;letter-spacing:.06em}
.ng-streak .ico{width:13px;height:13px}
.ng-game-go{border-radius:999px;padding:6px 16px}

/* recon picks (jobs) */
.ng-job{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:206px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface2);transition:border-color .15s,transform .15s}
.ng-job:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-2px)}
.ng-job-logo{display:grid;place-items:center;width:46px;height:46px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);color:#fff;font:700 1.15rem/1 var(--hfont);margin-bottom:6px}
.ng-job-t{font:600 .93rem/1.3 var(--hfont);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.ng-job-t:hover{color:var(--accent);text-decoration:none}
.ng-job-co{color:var(--muted);font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ng-job small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-height:1.2em;font-family:var(--mono);font-size:.72rem}
.ng-job-go{margin-top:8px;align-self:stretch;padding:7px 12px}

/* ---------- people cards ---------- */
.ng-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ng-pc{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 0 14px;overflow:hidden;text-align:center;border-radius:16px;transition:box-shadow .2s,transform .2s,border-color .2s}
.ng-pc:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 14px 30px -18px color-mix(in srgb,var(--accent) 70%,transparent)}
/* banner: deep navy with grid lines and a hex, in both themes (their own cover image when they have one) */
.ng-cover{position:relative;align-self:stretch;height:66px;flex:none;background:
  linear-gradient(rgba(148,163,255,.14) 1px,transparent 1px) 0 0/14px 14px,
  linear-gradient(90deg,rgba(148,163,255,.14) 1px,transparent 1px) 0 0/14px 14px,
  radial-gradient(120px 70px at 85% 10%,rgba(124,58,237,.55),transparent 70%),
  linear-gradient(120deg,#0b1430 0%,#1e2a6b 55%,#3b1f78 100%)}
.ng-cover::after{content:"";position:absolute;left:10px;top:9px;width:22px;height:25px;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%23a5b4fc' stroke-width='7'%3E%3Cpath d='M50 6 90 29v54L50 106 10 83V29z'/%3E%3C/svg%3E") center/contain no-repeat}
.ng-cover:has(img)::after{display:none}
.ng-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ng-pc.private .ng-cover{background:linear-gradient(rgba(148,163,184,.14) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,rgba(148,163,184,.14) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(120deg,#1e293b,#334155)}
.ng-x{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(8,12,30,.55);backdrop-filter:blur(4px);color:#fff;cursor:pointer;transition:background .2s}
.ng-x:hover{background:rgba(8,12,30,.85)}
.ng-x .ico{width:15px;height:15px}
.ng-pc .ng-x{z-index:2}
.ng-pc-link{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 12px;color:var(--text);text-decoration:none;width:100%;min-width:0}
.ng-pc-link:hover{text-decoration:none}
.ng-pc-link:hover .ng-pc-nm b{color:var(--accent)}
.ng-pc-av{margin-top:-52px;margin-bottom:6px;border-radius:50%;line-height:0;padding:3px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.ng-pc-av .nav-av{box-shadow:0 0 0 3px var(--surface)!important;width:98px!important;height:98px!important}
.ng-pc-nm{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;max-width:100%;font:600 1rem/1.3 var(--hfont)}
.ng-pc-nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ng-pc-nm .tbadge{font-size:.66rem}
.ng-pc-hl{color:var(--muted);font-size:.82rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;overflow-wrap:anywhere}
.ng-pc-mut{display:flex;justify-content:center;width:100%;padding:8px 12px 0;min-height:30px;margin-top:auto}
.ng-pc-act{width:100%;padding:10px 12px 0}
.ng-pc-act .btn{width:100%;border-radius:999px;padding:8px 12px}
.ng-pc-act .btn.ghost{color:var(--muted);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line2)}
.ng-pc-act .btn .ico{width:16px;height:16px}
.ng-lock{box-shadow:0 0 0 3px var(--surface)}
.ng-full{max-height:min(70vh,760px);overflow-y:auto;margin:6px -4px 0;padding:4px}
.modal.wide .ng-pgrid-modal{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

/* ---------- Intel feed ---------- */
.ng-cu-f{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 8px}
.ng-cu-f .chip{border:1px solid var(--line2);background:var(--surface);color:var(--muted);cursor:pointer;font:600 .84rem var(--font);padding:7px 14px;border-radius:999px}
.ng-cu-f .chip:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ng-cu-f .chip.on{color:var(--on-accent,#fff);border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.ng-cu-list{display:grid;position:relative}
.ng-cu{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px dashed var(--line2)}
.ng-cu:first-child{border-top:0}
.ng-cu-av{flex:none;border-radius:50%;line-height:0}
.ng-cu-main{flex:1;min-width:0;display:grid;gap:4px}
.ng-cu-t{font-size:.93rem;color:var(--text);line-height:1.4}
.ng-cu-t a{color:var(--text)}
.ng-cu-t a:hover b{color:var(--accent)}
.ng-cu-hl{color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ng-cu-post{display:grid;gap:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--text);font-size:.88rem;text-decoration:none;margin-top:4px}
.ng-cu-post span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ng-cu-post:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);text-decoration:none}
.ng-cu-who{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);color:var(--text);text-decoration:none;margin-top:4px;min-width:0}
.ng-cu-who span{display:grid;min-width:0;font-size:.86rem}
.ng-cu-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ng-cu-who:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ng-cu-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.ng-cu-meta small{font-family:var(--mono);font-size:.72rem}
.ng-cu-tag{display:inline-flex;align-items:center;gap:5px;font:700 .66rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent2);padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent2) 10%,transparent)}
.ng-cu-tag .ico{width:12px;height:12px}
.ng-cu-act{flex:none;align-self:center}
.ng-cu-act .btn{border-radius:999px}

/* ---------- Connections ---------- */
.ng-conn-tools{margin:0 0 6px}
.ng-conn-tools .search{position:relative;max-width:340px}
.ng-conn-tools .search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--accent);width:16px;height:16px}
.ng-conn-tools .search input{width:100%;padding-left:36px;border-radius:999px}
.ng-conn-list{display:grid}
.ng-conn{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px dashed var(--line2)}
.ng-conn:first-child{border-top:0}
.ng-conn[hidden]{display:none}
.ng-conn-av{flex:none;border-radius:50%;line-height:0}
.ng-conn-main{flex:1;min-width:0;display:grid;gap:2px}
.ng-conn-main>a{display:flex;align-items:center;gap:4px;flex-wrap:wrap;color:var(--text);font-family:var(--hfont);font-size:1rem}
.ng-conn-main>a:hover b{color:var(--accent)}
.ng-conn-hl{color:var(--muted);font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ng-conn-act{display:flex;align-items:center;gap:6px;flex:none}
.ng-conn-act .ng-msg{padding:7px 14px}

/* game partner picker */
.ng-pick{display:grid;gap:2px;max-height:min(60vh,520px);overflow-y:auto}
.ng-pick-row{display:flex;align-items:center;gap:12px;padding:8px 4px;border-top:1px solid var(--line)}
.ng-pick-row:first-child{border-top:0}
.ng-pick-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- dark mode ---------- */
html[data-theme="dark"] .ng-hero{background:
  linear-gradient(color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 1px) 0 0/22px 22px,
  radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,var(--accent2) 26%,transparent),transparent 70%),
  radial-gradient(380px 200px at 0% 100%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),var(--surface)}
html[data-theme="dark"] .ng-hero::after{opacity:.8}
html[data-theme="dark"] .ng-stat{background:color-mix(in srgb,var(--surface2) 70%,transparent)}
html[data-theme="dark"] .ng-tabs a:not(.on),html[data-theme="dark"] .ng-utabs button:not(.on),html[data-theme="dark"] .ng-cu-f .chip:not(.on){background:var(--surface2)}
html[data-theme="dark"] .ng-x{background:rgba(0,0,0,.55)}
html[data-theme="dark"] .ng-arr{background:var(--raise)}
html[data-theme="dark"] .ng-game,html[data-theme="dark"] .ng-job{background:var(--surface2)}
html[data-theme="dark"] .ng-mchips a:not(.on){background:var(--surface)}
html[data-theme="dark"] .ng-pc{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface2) 60%,var(--surface)))}
html[data-theme="dark"] .ng-pc-act .btn.ghost{background:transparent}
html[data-theme="dark"] .ng-game-ic.emo{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}

/* ---------- responsive ---------- */
@media (max-width:1180px){.ng-grid{grid-template-columns:220px minmax(0,1fr)}.ng-pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){
  .ng-grid{grid-template-columns:minmax(0,1fr)}
  .ng-left{position:static;order:2}
  .ng-left .ng-man{display:none}
  .ng-mchips{display:flex}
}
@media (max-width:640px){
  .ng-pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ng-sec{padding:14px 12px 14px}
  .ng-hero{padding:16px 14px 12px}
  .ng-hero-h{font-size:1.3rem}
  .ng-hero p{font-size:.86rem}
  .ng-hero::after{width:120px;height:136px;right:-30px;top:-24px;opacity:.35}
  .ng-stats{width:100%}
  .ng-stat{flex:1;min-width:0;padding:8px 6px}
  .ng-stat b{font-size:1.15rem}
  .ng-stat small{font-size:.56rem;letter-spacing:.06em}
  .ng-tabs a{flex:1;justify-content:center;padding:8px 10px}
  .ng-pc-link{padding:0 8px}.ng-pc-act{padding:10px 8px 0}.ng-pc-mut{padding:8px 8px 0}
  .ng-pc-av .nav-av{width:84px!important;height:84px!important}
  .ng-pc-av{margin-top:-46px}
  .ng-inv{flex-wrap:wrap}
  .ng-inv .ng-inv-av .nav-av{width:56px!important;height:56px!important}
  .ng-inv-main{flex-basis:calc(100% - 70px)}
  .ng-inv-act{width:100%;justify-content:flex-end}
  .ng-conn{gap:10px}
  .ng-conn-av .nav-av{width:48px!important;height:48px!important}
  .ng-conn-act .ng-msg span{display:none}
  .ng-conn-act .ng-msg{padding:7px 10px}
  .ng-cu{flex-wrap:wrap}
  .ng-cu-av .nav-av{width:44px!important;height:44px!important}
  .ng-cu-main{flex-basis:calc(100% - 56px)}
  .ng-cu-act{width:100%;padding-left:56px}
  .ng-game{width:180px}
  .ng-job{width:172px}
  .ng-filters select.input,.ng-filters input.input{flex:1 1 140px;min-width:0}
  .ng-fbtn span{display:none}
}
@media (max-width:360px){.ng-pgrid{grid-template-columns:minmax(0,1fr)}}

/* ---------- My Network frame: Groups, Mentors, Cert tracker, Viewers, Newsletters and Events open inside My Network ---------- */
.ng-framed{min-width:0;overflow-x:clip}
.ng-framed>.page-head:first-of-type,.ng-framed>.cm-subnav+.page-head{margin-top:4px}
.ng-frame .ng-mchips{max-width:100%;overflow-x:auto;scrollbar-width:none}
.ng-frame .ng-mchips::-webkit-scrollbar{display:none}
/* Groups and Cert tracker are already in the left column, so their duplicate community tab bar is hidden; Mentors keeps it for its sub-tabs */
.ng-framed[data-view="groups"]>.cm-subnav,.ng-framed[data-view="certs"]>.cm-subnav{display:none}
/* game partner picker: the long headline truncates instead of making the list scroll sideways; no visible scroll bars */
.ng-pick{overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
.ng-pick::-webkit-scrollbar{display:none;width:0;height:0}
.ng-pick-row{min-width:0}
.ng-pick-row>*:not(:first-child):not(:last-child){flex:1;min-width:0}
.ng-pick-row>:first-child,.ng-pick-row>:last-child{flex:none}
.ng-pick-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== My Network: right rail and eye-catching pages (HR.netRail in network-ui.js) ===== */
.ng-grid.ng-3{grid-template-columns:250px minmax(0,1fr) 290px}
.ng-right{display:grid;gap:14px;min-width:0;align-self:start}
.ng-right>.card{border-radius:18px}
.ng-rc{position:relative;overflow:hidden;padding:16px;display:grid;gap:10px}
.ng-rc::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899)}
.ng-rc .ng-kick{margin:0}
.ng-rc>.spread b{font:700 .98rem var(--hfont)}
.ng-glance-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ng-gl{display:grid;justify-items:center;gap:3px;padding:10px 6px;border-radius:14px;background:var(--surface2);border:1px solid var(--line);color:var(--text);text-decoration:none;text-align:center;transition:border-color .15s,transform .15s}
.ng-gl:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-2px);text-decoration:none}
.ng-gl-ic{width:28px;height:28px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.ng-gl-ic .ico{width:14px;height:14px}
.ng-gl b{font:700 1.25rem/1 var(--hfont);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ng-gl small{color:var(--muted);font-size:.7rem;line-height:1.2}
.ng-goal{display:grid;gap:6px}
.ng-goal small{color:var(--muted);font-size:.8rem}
.ng-goal b{font:700 .85rem var(--mono);color:var(--accent2)}
.ng-meter{height:8px;border-radius:8px;background:color-mix(in srgb,var(--text) 9%,transparent);overflow:hidden}
.ng-meter span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899);transition:width .6s}
.ng-next{margin:0;display:flex;gap:8px;align-items:flex-start;font-size:.86rem;line-height:1.4;color:var(--text)}
.ng-next .ico{width:15px;height:15px;flex:none;margin-top:2px;color:var(--accent2)}
.ng-chal{text-decoration:none;color:var(--text);background:radial-gradient(240px 120px at 100% 0%,color-mix(in srgb,#f59e0b 18%,transparent),transparent 70%),var(--surface)}
.ng-chal::before{background:linear-gradient(90deg,#f59e0b,#ec4899)}
.ng-chal b{font:700 1rem var(--hfont)}.ng-chal small{color:var(--muted)}.ng-chal .btn{justify-self:start}
.ng-chal:hover{text-decoration:none}
.ng-grp{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s}
.ng-grp:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateX(2px);text-decoration:none}
.ng-grp-ic{width:36px;height:36px;flex:none;display:grid;place-items:center;font-size:1.1rem;border-radius:10px;background:color-mix(in srgb,var(--cm,var(--accent)) 16%,transparent)}
.ng-grp>span:nth-child(2){flex:1;min-width:0;display:grid}
.ng-grp b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ng-grp small{color:var(--muted);font-size:.76rem}
.ng-grp i{font-style:normal;color:var(--accent2)}
.ng-ev{display:flex;gap:12px;align-items:center;color:var(--text);text-decoration:none}
.ng-ev:hover{text-decoration:none}
.ng-ev-d{width:48px;flex:none;display:grid;justify-items:center;padding:6px 0;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ng-ev-d b{font:700 1.3rem/1 var(--hfont)}.ng-ev-d small{font:600 .62rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.ng-ev>span:last-child{display:grid;min-width:0}.ng-ev b{font-size:.92rem}.ng-ev small{color:var(--muted);font-size:.78rem}
/* page heads inside My Network become hero panels */
.ng-framed .page-head:not(.card *),.ng-body>.page-head{position:relative;overflow:hidden;isolation:isolate;padding:22px 22px 18px;border-radius:22px;align-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:var(--shadow);
  background:linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,radial-gradient(460px 220px at 100% 0%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 70%),radial-gradient(420px 220px at 0% 100%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--surface)}
.ng-framed .page-head:not(.card *)::before,.ng-body>.page-head::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899,var(--accent));background-size:200% 100%;animation:ngSlide 6s linear infinite}
.ng-framed .page-head h1,.ng-body>.page-head h1{font:700 clamp(1.5rem,2.8vw,2.1rem)/1.15 var(--hfont);margin:4px 0 6px}
.ng-framed .page-head p,.ng-body>.page-head p{color:var(--muted);max-width:640px}
.ng-framed .page-head .kicker,.ng-body>.page-head .kicker{font:600 .68rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.ng-framed .page-head>.btn,.ng-framed .page-head>.row{position:relative;z-index:1}
/* the hero on Signal boost / Intel feed gets the same moving bar */
.ng-hero{position:relative;overflow:hidden}
.ng-hero::after{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899,var(--accent));background-size:200% 100%;animation:ngSlide 6s linear infinite}
/* subnav pills and cards: lift on hover, gradient on the active pill */
.ng-framed .cm-subnav a.on,.ng-mchips a.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 10px 22px -12px var(--accent2)}
.ng-main .card:not(.ng-hero):not(.ad-card):not(.f-post){transition:transform .18s,box-shadow .18s,border-color .18s}
.ng-main .card:not(.ng-hero):not(.ad-card):not(.f-post):hover{box-shadow:0 18px 36px -24px color-mix(in srgb,var(--accent) 70%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.ng-main .f-person,.ng-main .ng-person,.ng-main .cm-row{border-radius:14px;transition:background .15s}
.ng-main .f-person:hover,.ng-main .ng-person:hover,.ng-main .cm-row:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.ng-main .card.empty,.ng-main .rh-empty{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:color-mix(in srgb,var(--accent) 3%,var(--surface))}
@keyframes ngSlide{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.ng-framed>.page-head::before,.ng-hero::after{animation:none}}
.ng-left{display:grid;gap:12px;align-content:start}
.ng-left.rail-scroll,.ng-right.rail-scroll{padding-right:2px}
@media (max-width:1280px){.ng-grid.ng-3{grid-template-columns:220px minmax(0,1fr) 260px;gap:14px}}
@media (max-width:1100px){.ng-grid.ng-3{grid-template-columns:200px minmax(0,1fr) 240px;gap:12px}}
@media (max-width:960px){
  .ng-grid.ng-3{grid-template-columns:1fr}
  .ng-grid.ng-3 .ng-right{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));position:static!important;max-height:none!important;overflow:visible!important}
}
@media (max-width:600px){.ng-grid.ng-3 .ng-right{grid-template-columns:1fr}}
/* pinned sidebars that scroll inside themselves: rows keep their natural height (a max-height on a grid used to squash every card) */
.ng-left.rail-scroll,.ng-right.rail-scroll{grid-auto-rows:max-content;align-content:start;overflow-y:auto;overflow-x:visible}
.ng-left>*,.ng-right>*{flex:none;min-height:0;overflow:visible}
.ng-left .card,.ng-right .card{max-height:none}
/* compact rail that fits one screen, and the row below the page for the rest */
.ng-mini{gap:10px}
.ng-mini .ng-rc{padding:12px;gap:8px}
.ng-mini .ng-glance-row{gap:6px}
.ng-mini .ng-gl{padding:7px 4px;gap:2px}
.ng-mini .ng-gl-ic{width:24px;height:24px}.ng-mini .ng-gl-ic .ico{width:12px;height:12px}
.ng-mini .ng-gl b{font-size:1.1rem}.ng-mini .ng-gl small{font-size:.66rem}
.ng-mini .ng-goal small,.ng-mini .ng-next{font-size:.78rem}
.ng-mini .ng-meter{height:6px}
.ng-mini .ng-chal{padding:10px 12px}.ng-mini .ng-chal b{font-size:.9rem;display:block}.ng-mini .ng-chal .ng-kick{display:block;margin-bottom:2px}
.ng-mini .f-ppl .f-person{padding:4px 0;gap:8px}
.ng-mini .f-ppl .f-person .hl{font-size:.72rem}
.ng-mini .f-ppl .f-person .btn{padding:5px 9px;font-size:.76rem}
.ng-mini .f-ppl>.spread b{font-size:.9rem}
.ng-mini .ad-card{margin:0}
.ng-below{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.ng-below .ng-rc{padding:14px;gap:8px}
.ng-below:empty{display:none}
.ng-left .ng-ad{margin:0}
@media (max-width:960px){.ng-below{grid-template-columns:1fr}}
/* mini ads in the My Network rails: small creative, one line of text, small button */
.ng-mini .ad-card,.ng-left .ad-mini{padding:10px 12px;gap:6px}

.ng-mini .ad-card .ad-body b,.ng-left .ad-mini .ad-body b{font-size:.86rem;line-height:1.2}
.ng-mini .ad-card .ad-body p,.ng-left .ad-mini .ad-body p{font-size:.76rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 0}
.ng-mini .ad-card .ad-cta,.ng-left .ad-mini .ad-cta{padding:6px 12px;font-size:.78rem}
.ng-mini .ad-card .ad-label,.ng-left .ad-mini .ad-label{font-size:.58rem}
.ng-left .ad-mini .ad-ic,.ng-mini .ad-card .ad-ic{width:32px;height:32px}

.ng-mini .ad-text-card{padding:10px 10px 6px;gap:4px}.ng-mini .ad-text{padding:5px 6px;gap:8px}.ng-mini .ad-text-ic{width:34px;height:34px}.ng-mini .ad-text-t small{display:none}.ng-mini .ad-text-t b{font-size:.84rem}
.ng-left .rail-foot{font-size:.76rem}
.ng-mini .ad-card .ad-body p{display:none}
.ng-mini .ad-text-card .ad-text:nth-child(n+4){display:none}
.ng-mini .ng-next{display:none}
/* degree of connection, why-suggested, follow, viewers card, people also viewed, contact import */
.deg{font-weight:500;font-size:.82em;color:var(--muted,#8b93a7);margin-left:6px;white-space:nowrap}
.deg1{color:var(--accent,#4fd1a5)}
.ng-mutual.why{color:var(--muted,#8b93a7)}
.fol-btn{gap:6px}.fol-btn.on{opacity:.9}
.f-viewed{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:10px;text-decoration:none;color:inherit}
.f-viewed:hover{border-color:var(--line2)}
.fv-av{display:inline-flex}.fv-av .nav-av{margin-left:-8px;border:2px solid var(--surface)}.fv-av .nav-av:first-child{margin-left:0}
.fv-t{display:grid;gap:1px;flex:1;min-width:0}.fv-t small{color:var(--muted,#8b93a7)}
.mp-also .ng-pc{min-width:190px;max-width:210px;flex:none;scroll-snap-align:start}
.fc-card{display:grid;gap:8px;margin:10px 0}.fc-card textarea{width:100%}.fc-out{display:grid;gap:8px}
/* degree of connection, why-suggested, follow, viewers card, people also viewed, contact import */
.deg{font-weight:500;font-size:.82em;color:var(--muted,#8b93a7);margin-left:6px;white-space:nowrap}
.deg1{color:var(--accent,#4fd1a5)}
.ng-mutual.why{color:var(--muted,#8b93a7)}
.fol-btn{gap:6px}.fol-btn.on{opacity:.9}
.f-viewed{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:10px;text-decoration:none;color:inherit}
.f-viewed:hover{border-color:var(--line2)}
.fv-av{display:inline-flex}.fv-av .nav-av{margin-left:-8px;border:2px solid var(--surface)}.fv-av .nav-av:first-child{margin-left:0}
.fv-t{display:grid;gap:1px;flex:1;min-width:0}.fv-t small{color:var(--muted,#8b93a7)}
.mp-also .ng-pc{min-width:190px;max-width:210px;flex:none;scroll-snap-align:start}
.fc-card{display:grid;gap:8px;margin:10px 0}.fc-card textarea{width:100%}.fc-out{display:grid;gap:8px}
.fc-chips{display:flex;gap:6px;flex-wrap:wrap}.fc-chips .chip{cursor:pointer;border:1px solid var(--line2);background:none;color:inherit;font:inherit}.fc-chips .chip.on{background:var(--accent);color:var(--on-accent,#fff);border-color:transparent}
.fc-steps ol{margin:6px 0 0;padding-left:20px;display:grid;gap:4px;color:var(--muted,#8b93a7);font-size:.9rem}

.fc-card{padding:12px 14px}.fc-card .spread{align-items:center;gap:10px}.fc-card .dim{font-size:.85rem}.fc-more{display:grid;gap:8px}.fc-more[hidden]{display:none}.fc-link{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.fc-link .input{flex:1 1 220px;min-width:0}

/* slim network page */
.ng-slim{display:grid;gap:8px}.ng-slim-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.ng-slim-top h2{margin:0;font:700 1.15rem var(--hfont)}
.ng-slim .ng-stats{gap:14px}.ng-slim .ng-stat{padding:0;background:none;border:0;box-shadow:none;flex-direction:row;align-items:baseline;gap:5px}.ng-slim .ng-stat b{font-size:1rem}.ng-slim .ng-stat small{font-size:.78rem}
.ng-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px}.ng-tools-t{font-weight:600;font-size:.92rem}
.fc-card{border:0;box-shadow:none;padding:0;margin:0}

/* jobs-home.css */
/* ReconHire: Jobs home (#/jobs-home) and the jobs list + detail view (#/jobs-view). public/js/jobs-home.js.
   ReconHire's own look: mono kickers, Chakra Petch headings, score rings, the blue to violet gradient with soft glows,
   grid and scan textures and small terminal touches. Colors come from the theme tokens, so light and dark both work. */

.jh-grid,.jv-page,.jh-up,.jh-pref-form{--jg:linear-gradient(135deg,var(--accent),var(--accent2));--jglow:0 10px 28px -14px color-mix(in srgb,var(--accent) 80%,transparent);--jr:18px}

/* ---------- shared bits ---------- */
.jh-kick{margin:0 0 4px;font-size:.7rem;letter-spacing:.12em;color:var(--accent2)}
.jh-kick .live{width:7px;height:7px}
.jh-caret{display:inline-block;width:.5em;height:1em;margin-left:4px;vertical-align:-.12em;background:var(--accent);border-radius:1px;animation:blink 1.05s steps(1) infinite;box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
.jh-term{font:500 .84rem var(--mono);color:var(--muted)}
.jh-term .jh-caret{width:.55em;height:.95em}
@media (prefers-reduced-motion:reduce){.jh-caret{animation:none}}

/* ---------- shared job row ---------- */
.jh-logo{display:grid;place-items:center;flex:none;border-radius:12px;overflow:hidden;background:var(--surface2);border:1px solid var(--line)}
.jh-logo img{width:100%;height:100%;object-fit:contain;display:block}
.jh-logo.init{background:linear-gradient(140deg,var(--tile,var(--accent)),color-mix(in srgb,var(--tile,var(--accent)) 55%,#0b1020));color:#fff;border:0;font-family:var(--hfont);font-weight:700;line-height:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.jh-shield{display:inline-grid;place-items:center;color:var(--good);flex:none}.jh-shield .ico{width:16px;height:16px}
.jh-list{display:grid}
.jh-row{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;padding:15px 20px;border-top:1px solid var(--line);transition:background .15s}
.jh-row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--jg);opacity:0;transition:opacity .15s}
.jh-row:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.jh-row:hover::before{opacity:.45}
.jh-row.on{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent2) 4%,transparent))}
.jh-row.on::before{opacity:1;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}
.jh-row[tabindex]{cursor:pointer}
.jh-body{min-width:0;display:grid;gap:2px}
.jh-tline{display:flex;align-items:center;gap:6px;min-width:0}
.jh-title{font:600 1.04rem/1.3 var(--hfont);color:var(--text);overflow-wrap:anywhere;letter-spacing:.005em}
.jh-title:hover{color:var(--accent);text-decoration:none}
.jh-row.on .jh-title{color:var(--accent)}
.jh-row.seen .jh-title{color:color-mix(in srgb,var(--text) 72%,var(--muted))}
.jh-row.seen.on .jh-title{color:var(--accent)}
.jh-co{font-size:.9rem;color:var(--muted);overflow-wrap:anywhere}
.jh-pay{font:500 .82rem var(--mono);color:var(--good)}
.jh-top,.jh-score{display:flex;align-items:center;gap:8px;font-size:.82rem;margin-top:4px;color:var(--muted)}
.jh-top{color:var(--text);font-weight:600}
.jh-top>span,.jh-score>span{font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
.jh-top>span{background:var(--jg);-webkit-background-clip:text;background-clip:text;color:transparent}
.jh-top .ring b,.jh-score .ring b{font-size:.6rem}
.jh-top .ring{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--good) 45%,transparent))}
.jh-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:.78rem;color:var(--dim);margin-top:4px}
.jh-viewed{font:600 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.jh-easy{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-weight:600;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 10%,transparent)}.jh-easy .ico{width:12px;height:12px}
.jh-st{color:var(--accent2);font-weight:600}
.jh-acts{display:flex;gap:4px;align-items:flex-start}
.jh-acts .icon-btn{border-color:transparent;background:transparent}
.jh-acts .icon-btn:hover{border-color:var(--line2);color:var(--text)}
.jh-save[aria-pressed="true"]{color:var(--accent2)}.jh-save[aria-pressed="true"] svg{fill:currentColor}
.jh-gone{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;background:color-mix(in srgb,var(--text) 3%,transparent)}
.jh-gone b{color:var(--text)}
.jh-loading{display:grid;place-items:center;padding:36px}
.jh-empty{text-align:center;padding:36px 20px;border-top:1px solid var(--line)}
.jh-empty>.ico{width:34px;height:34px;color:var(--accent2);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent2) 45%,transparent))}.jh-empty h3{margin:8px 0 4px}.jh-empty p{margin:0 0 14px}

/* upsell row for free members */
.jh-up{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--line);
  background:radial-gradient(420px 140px at 0 0,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 70%),linear-gradient(100deg,color-mix(in srgb,var(--accent) 7%,transparent),color-mix(in srgb,var(--accent2) 9%,transparent))}
.jh-up .jh-kick{margin:0}
.jh-up-t{display:grid;gap:6px;min-width:0;flex:1 1 280px}
.jh-up-t>b{font:600 1.02rem/1.3 var(--hfont)}
.jh-up-p{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--muted)}.jh-up-p .nav-av{flex:none}
.jh-up-a{display:grid;gap:4px;justify-items:start}
.jh-up-btn{background:var(--jg);color:#fff;box-shadow:var(--jglow)}
.jh-up-a small{font-size:.76rem}

/* ---------- Jobs home layout ---------- */
.jh-grid{display:grid;grid-template-columns:296px minmax(0,1fr);gap:24px;align-items:start;max-width:1128px;margin:0 auto}
.jh-left{position:sticky;top:84px;display:grid;gap:12px}
.jh-main{display:grid;gap:14px;min-width:0}
.jh-grid .card{border-radius:var(--jr)}
.jh-h{font:700 1.22rem/1.25 var(--hfont);margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jh-sub{margin:2px 0 0;font-size:.86rem;color:var(--muted)}
.jh-count{font:600 .72rem var(--mono);letter-spacing:.04em;color:var(--accent);padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.jh-count:empty{display:none}

/* hero */
.jh-hero{padding:2px 2px 0}
.jh-hero h1{font:700 clamp(1.45rem,2.6vw,1.95rem)/1.15 var(--hfont);margin:2px 0 4px}
.jh-hero p{margin:0;color:var(--muted);font-size:.95rem}

/* profile card */
.jh-me{display:block;padding:0 0 16px;overflow:hidden;color:var(--text);position:relative}
.jh-me:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.jh-cover{height:72px;position:relative;overflow:hidden;
  background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/14px 14px,
    radial-gradient(160px 90px at 85% 10%,color-mix(in srgb,var(--accent2) 70%,transparent),transparent 70%),linear-gradient(120deg,#0b1430,color-mix(in srgb,var(--accent) 70%,#0b1430) 60%,color-mix(in srgb,var(--accent2) 60%,#0b1430))}
.jh-cover::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:scanx 9s linear infinite}
.jh-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.jh-av{margin:-40px 0 0 16px;width:max-content;position:relative;z-index:2}
.jh-av .nav-av{box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--accent) 45%,transparent)}
.jh-me-txt{display:grid;gap:2px;padding:10px 16px 0}
.jh-nm{font:700 1.15rem/1.3 var(--hfont);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.jh-hl{margin:0;font-size:.86rem;color:var(--text);line-height:1.4}
.jh-loc{font-size:.8rem;color:var(--dim)}
.jh-work:empty{display:none}
.jh-co-row{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2);font-size:.84rem;font-weight:600}
.jh-co-tile{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}.jh-co-tile .ico{width:15px;height:15px}
.jh-me-go{display:none}
@media (prefers-reduced-motion:reduce){.jh-cover::after{animation:none;display:none}}

/* menu card */
.jh-menu{display:grid;padding:8px}
.jh-mi{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--text);font-weight:600;font-size:.92rem;transition:background .15s}
.jh-mi:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);text-decoration:none}
.jh-mi:hover .ico{color:var(--accent)}
.jh-mi .ico{width:19px;height:19px;color:var(--muted);flex:none}
.jh-mi span:not(.badge){flex:1;min-width:0}
.jh-mi .badge{background:var(--jg)}
.jh-mi-sep{height:1px;background:var(--line);margin:6px 8px}
.jh-left .rail-foot{margin-top:4px}

/* feature cards: thin gradient bar on top */
.jh-feat::before,.jh-prefs::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent 85%);z-index:1}

/* preferences card */
.jh-prefs{padding:16px 20px;overflow:hidden}
.jh-prefs-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.jh-prefs-h .row{gap:6px;flex-wrap:nowrap}
.jh-prefs-b{margin-top:14px}
.jh-prefs.closed .jh-prefs-b{display:none}
.jh-prefs-empty{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:center}
.jh-illus{display:grid;gap:8px;padding:12px;border-radius:14px;background:#0b1224;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:12px 12px;box-shadow:0 18px 40px -26px var(--accent)}
.jh-illus-bar{display:flex;align-items:center;gap:5px}.jh-illus-bar i{width:7px;height:7px;border-radius:50%;background:#334155}.jh-illus-bar i:first-child{background:#f87171}.jh-illus-bar i:nth-child(2){background:#fbbf24}.jh-illus-bar i:nth-child(3){background:#34d399}
.jh-illus-bar span{margin-left:auto;font:500 .62rem var(--mono);color:#64748b;letter-spacing:.08em}
.jh-illus-cmd{font:500 .74rem var(--mono);color:#93c5fd;background:none;padding:0}.jh-illus-cmd b{color:#c4b5fd}
.jh-sk-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.jh-sk-tile{width:28px;height:28px;border-radius:8px;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.jh-sk-row+.jh-sk-row .jh-sk-tile{background:linear-gradient(135deg,#0891b2,#059669)}
.jh-sk-lines{display:grid;gap:6px;flex:1}
.jh-sk-lines i{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.12)}
.jh-sk-lines i:first-child{background:color-mix(in srgb,var(--accent) 60%,transparent)}
.jh-sk-ring{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2.5px solid #34d399;font:700 .58rem var(--hfont);color:#a7f3d0;flex:none}
.jh-sk-row+.jh-sk-row .jh-sk-ring{border-color:#60a5fa;color:#bfdbfe}
.jh-prefs-cta h3{font:700 1.15rem/1.3 var(--hfont);margin:0 0 4px}
.jh-prefs-cta p{margin:0 0 12px;font-size:.88rem}
.jh-pchips{gap:8px}
.jh-chip{background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);padding:6px 11px}
.jh-chip .ico{width:13px;height:13px;color:var(--accent2)}
.jh-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.88rem;padding:12px 16px;border-left:3px solid var(--accent2)}
.jh-note>.ico{width:18px;height:18px;color:var(--accent2);flex:none}.jh-note>span{flex:1 1 240px}

/* sections */
.jh-sec{padding:0;overflow:hidden}
.jh-sec-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px 14px}
.jh-recon{flex:none}.jh-recon .radar-mini{width:16px;height:16px;color:var(--accent)}
.jh-all{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-top:1px solid var(--line);font:600 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.jh-all:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);text-decoration:none}
.jh-all .ico{width:15px;height:15px;transition:transform .15s}.jh-all:hover .ico{transform:translateX(3px)}
.jh-all-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-left:12px}
.jh-all-row .jh-all{border-top:0;flex:1;justify-content:flex-end;padding-right:20px}
.jh-searches{display:grid}
.jh-search{display:flex;align-items:center;gap:12px;padding:12px 20px;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;color:var(--text)}
.jh-search:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.jh-search-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--accent2) 10%,transparent);color:var(--accent2);flex:none}.jh-search-ic .ico{width:16px;height:16px}
.jh-search-t{display:grid;flex:1;min-width:0}.jh-search-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jh-search>.ico{width:16px;height:16px;color:var(--dim)}

/* preferences modal */
.jh-pref-form{display:grid;gap:14px}
.jh-lbl{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:6px}
.jh-rolebar{display:flex;align-items:center;gap:10px;margin-bottom:8px}.jh-rolebar .input{flex:1;max-width:320px}
.jh-roles{display:grid;gap:10px;max-height:300px;overflow:auto;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);scrollbar-width:thin}
.jh-track h4{font:600 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--accent2);margin:0 0 6px}
.jh-track .chips{gap:6px}.jh-track .chip{cursor:pointer;border:0}
.jh-seg{flex-wrap:wrap}
.jh-more-set{margin:0;font-size:.82rem}

/* ---------- list + detail view ---------- */
.jv-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.jv-back{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.jv-back:hover{color:var(--accent);text-decoration:none;border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.jv-back .ico{width:16px;height:16px}
.jv-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 .84rem/1.2 var(--font);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.jv-pill>span{display:inline-flex;align-items:center;gap:5px}
.jv-pill .ico{width:14px;height:14px;color:var(--accent2)}
.jv-pill:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.jv-pill.on{background:var(--jg);border-color:transparent;color:#fff;box-shadow:var(--jglow)}
.jv-pill.on .ico{color:#fff}
.jv-dd{position:relative}
.jv-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:55;min-width:210px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line2);box-shadow:0 20px 50px -20px rgba(15,23,42,.45);display:grid}
.jv-menu button{display:flex;align-items:center;gap:8px;padding:9px 10px;border:0;border-radius:9px;background:transparent;text-align:left;cursor:pointer;font-size:.9rem;color:var(--text)}
.jv-menu button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.jv-menu button.on{font-weight:600}.jv-menu .ico{width:15px;height:15px;color:var(--accent)}.jv-sp{width:15px;flex:none}
.jv-reset{border:0;background:transparent;color:var(--muted);font:600 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:6px 8px}.jv-reset:hover{color:var(--accent)}
.jv-classic{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--muted)}.jv-classic .ico{width:15px;height:15px;color:var(--accent)}
.jv-classic:hover{color:var(--accent);text-decoration:none}

.jv-wrap{display:grid;grid-template-columns:minmax(330px,42%) minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--jr);overflow:hidden;height:calc(100vh - 200px);min-height:520px;box-shadow:var(--shadow);position:relative}
.jv-wrap::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent 85%);z-index:2}
.jv-list,.jv-detail{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.jv-list::-webkit-scrollbar,.jv-detail::-webkit-scrollbar{display:none}
.jv-list{border-right:1px solid var(--line)}
.jv-head{padding:18px 20px 12px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent)}
.jv-head .jh-h{font-size:1.2rem}
.jv-count{margin:6px 0 0;font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.jv-list .jh-row:first-of-type{border-top:1px solid var(--line)}
.jv-more{display:flex;margin:14px auto 18px}
.jv-card{border:0;border-radius:0;padding:24px 26px 30px;background:transparent}
.jv-none{display:grid;place-items:center;text-align:center;min-height:320px;color:var(--muted)}.jv-none .ico{width:34px;height:34px;color:var(--dim)}
.jv-mback{display:none;margin-bottom:12px}
.jv-coline{display:flex;align-items:center;gap:10px;font-size:.92rem}.jv-coline .jh-logo{border-radius:9px}
.jv-sp2{flex:1}
.jv-title{font:700 1.6rem/1.2 var(--hfont);margin:12px 0 6px;overflow-wrap:anywhere}
.jv-facts{margin:0;font-size:.88rem;color:var(--muted)}
.jv-hstat{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:.86rem;font-weight:600;color:var(--good)}.jv-hstat .ico{width:15px;height:15px}
.jv-chips{gap:8px;margin-top:12px}
.jv-chip{background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);color:var(--text);padding:6px 11px;font-weight:600}
.jv-chip .ico{width:14px;height:14px;color:var(--accent2)}
.jv-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.jv-apply{background:var(--jg);box-shadow:var(--jglow)}
.jv-apply .ico{width:15px;height:15px}
.jv-save[aria-pressed="true"]{color:var(--accent2);box-shadow:inset 0 0 0 1.5px var(--accent2)}.jv-save[aria-pressed="true"] svg{fill:currentColor}
.jv-ring{display:inline-flex;align-items:center;gap:10px;margin-left:auto;padding:6px 12px 6px 6px;border-radius:999px;background:color-mix(in srgb,var(--accent) 6%,transparent);border:1px solid var(--line)}
.jv-ring small{display:grid;line-height:1.25}
.jv-ring small b{font:700 .86rem var(--hfont);color:var(--text)}
.jv-ring small span{font:600 .64rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.jv-ring .ring b{font-size:.8rem}
.jv-sec{position:relative;margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.jv-sec>h3{display:flex;align-items:center;gap:8px;font:700 1.06rem/1.3 var(--hfont);margin:0 0 10px}
.jv-sec>h3 .ico{width:17px;height:17px;color:var(--accent2)}
.jv-sec>h3+.jv-tiny{margin:-6px 0 8px}
.jv-fit{overflow:hidden;background:radial-gradient(380px 160px at 100% 0,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 60%);border-color:color-mix(in srgb,var(--accent2) 30%,transparent)}
.jv-fit::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent 85%)}
.jv-ai{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.jv-aichip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent2) 35%,transparent);background:var(--surface);color:var(--text);font:600 .86rem/1.2 var(--font);cursor:pointer;transition:transform .15s,box-shadow .15s}
.jv-aichip:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px var(--accent2)}.jv-aichip .ico{width:15px;height:15px;color:var(--accent2)}
.jv-aichip.locked{border-color:var(--line2);color:var(--muted)}.jv-aichip.locked .ico{color:#d97706}
.jv-gate{display:flex;align-items:flex-start;gap:6px;margin-top:10px}.jv-gate .ico{width:14px;height:14px;flex:none;margin-top:2px}
.jv-tiny{font-size:.8rem;margin:4px 0 0}
.jv-person{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.jv-person:first-of-type{border-top:0}
.jv-sec>h3+.jv-person,.jv-sec>.jv-tiny+.jv-person{border-top:0}
.jv-pt{display:grid;flex:1;min-width:0}.jv-pt a{color:var(--text);display:flex;align-items:center;gap:5px}.jv-pt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jv-person .row{gap:6px;flex-wrap:nowrap}
.jv-desc{border-top:0;padding-top:4px;margin-top:4px}
.jv-detail .preview-note{margin-top:12px}

/* ---------- desktop: the left column carries the footer ---------- */
@media (min-width:901px){body:has(.jh-left .rail-foot) .foot-app{display:none}}

/* ---------- tablets ---------- */
@media (max-width:1060px){
  .jh-grid{grid-template-columns:250px minmax(0,1fr);gap:16px}
  .jh-prefs-empty{grid-template-columns:1fr}.jh-illus{max-width:320px}
  .jv-wrap{grid-template-columns:minmax(290px,44%) minmax(0,1fr)}
}

/* ---------- phones ---------- */
@media (max-width:900px){
  .jh-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .jh-left{position:static;gap:10px}
  .jh-left .rail-foot{display:none}
  .jh-me{display:flex;align-items:center;gap:12px;padding:12px 14px}
  .jh-cover{display:none}
  .jh-av{margin:0}.jh-av .nav-av{width:48px!important;height:48px!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
  .jh-me-txt{padding:0;flex:1;min-width:0}
  .jh-nm{font-size:1rem}.jh-hl{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .jh-loc,.jh-work{display:none}
  .jh-me-go{display:grid;place-items:center;color:var(--dim)}.jh-me-go .ico{width:18px;height:18px}
  .jh-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:6px}
  .jh-mi{padding:9px 10px;font-size:.84rem;gap:8px}.jh-mi .ico{width:17px;height:17px}
  .jh-mi-sep{display:none}
  .jh-row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;padding:12px 14px}
  .jh-row .jh-logo{width:44px!important;height:44px!important}
  .jh-acts{flex-direction:column;gap:2px}
  .jh-sec-h{padding:14px 14px 12px}.jh-prefs{padding:14px}
  .jh-up,.jh-gone{padding:14px}
  .jv-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px}.jv-bar::-webkit-scrollbar{display:none}
  .jv-bar>*{flex:none}
  .jv-classic{margin-left:0}
  .jv-wrap{display:block;height:auto;min-height:0}
  .jv-list,.jv-detail{overflow:visible}
  .jv-list{border-right:0}
  .jv-detail{display:none}
  .jv-wrap.show-detail .jv-list{display:none}
  .jv-wrap.show-detail .jv-detail{display:block}
  .jv-wrap.show-detail ~ *{display:none}
  .jv-page:has(.jv-wrap.show-detail) .jv-bar{display:none}
  .jv-card{padding:16px 16px 24px}
  .jv-mback{display:inline-flex}
  .jv-title{font-size:1.35rem}
  .jv-sec{padding:14px}
  .jv-ring{margin-left:0}
}

/* ---------- dark mode ---------- */
html[data-theme="dark"] .jh-grid,html[data-theme="dark"] .jv-page,html[data-theme="dark"] .jh-up{--jglow:0 10px 30px -12px color-mix(in srgb,var(--accent) 90%,transparent)}
html[data-theme="dark"] .jv-pill{box-shadow:none}
html[data-theme="dark"] .jv-pill.on{box-shadow:var(--jglow)}
html[data-theme="dark"] .jv-wrap{box-shadow:0 30px 60px -40px #000}
html[data-theme="dark"] .jv-menu{background:var(--surface2);box-shadow:0 20px 50px -20px #000}
html[data-theme="dark"] .jh-illus{background-color:#070b16}
html[data-theme="dark"] .jh-pay,html[data-theme="dark"] .jv-hstat,html[data-theme="dark"] .jh-shield,html[data-theme="dark"] .jv-detail .chip.have{color:#6ee7b7}
html[data-theme="dark"] .jh-grid .ring.good b,html[data-theme="dark"] .jv-page .ring.good b{color:#6ee7b7}
.jh-track .chip.on{background:var(--jg);color:#fff;box-shadow:var(--jglow)}
.jv-drop>.ico{width:13px;height:13px;color:inherit;opacity:.7}

/* ---------- Jobs frame: Jobs pages open inside Jobs with the same left menu ---------- */
.jh-framed{min-width:0;overflow-x:clip}
.jh-mi.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.jh-mi.on .ico{color:var(--accent)}
.jh-frame .page-head:first-child{margin-top:0}
/* the tracker board has 6 columns; next to the menu it wraps to 3 per row unless the screen is very wide */
@media (min-width:621px) and (max-width:1599px){.jh-framed .board{grid-template-columns:repeat(3,minmax(0,1fr))}}
.jh-orgs.pf-orgs{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}
.jh-orgs .pf-org{padding:0;margin:0;min-width:0}
.jh-orgs .pf-org-t b{font-size:.84rem}.jh-orgs .pf-org-t small{font-size:.74rem}

/* search.css */
/* ReconHire global search: top-bar box + typeahead, phone overlay, results page (#/results). Theme tokens only, so light,
   dark and seasonal themes all apply. Signature: mono "// kickers", Chakra Petch headings, blue to violet gradient for the
   active state and highlights, terminal empty state. */
.gs{--gs-grad:linear-gradient(90deg,var(--accent),var(--accent2));position:relative;flex:0 1 300px;min-width:150px;margin-left:6px;transition:flex-basis .25s ease}
.gs:focus-within,.gs.open{flex-basis:440px}
.gs-form{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 12px;border-radius:12px;background:color-mix(in srgb,var(--surface2) 80%,var(--surface));border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,background .2s}
.gs-form:hover{border-color:var(--line2)}
.gs-form:focus-within{background:var(--surface);border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent),0 0 22px -4px color-mix(in srgb,var(--accent2) 45%,transparent)}
.gs-lead{display:flex;color:var(--dim);flex:none}
.gs-lead .ico{width:18px;height:18px}
.gs-form:focus-within .gs-lead{color:var(--accent)}
.gs-input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--text);font:500 .9rem var(--font)}
.gs-input::placeholder{color:var(--dim);opacity:1}
.gs-input::-webkit-search-cancel-button{opacity:.6}
.gs-input:focus-visible{outline:0}
.gs-k{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;border:1px solid var(--line2);background:var(--surface);color:var(--dim);font:600 .68rem/1 var(--mono);letter-spacing:.04em}
.gs-form:focus-within .gs-key{display:none}
.gs-mbtn{display:none}

/* typeahead */
.gs-pop{position:absolute;top:calc(100% + 8px);left:0;width:max(100%,460px);max-width:calc(100vw - 32px);max-height:min(72vh,620px);overflow:auto;overscroll-behavior:contain;z-index:60;padding:6px;
  background:var(--surface);border:1px solid var(--line2);border-radius:16px;box-shadow:0 18px 50px -18px rgba(2,6,23,.45),0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),0 0 40px -18px color-mix(in srgb,var(--accent2) 55%,transparent)}
.gs-pop::before{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:2px;background:var(--gs-grad,linear-gradient(90deg,var(--accent),var(--accent2)));opacity:.8}
.gs-kick{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 4px;font:700 .66rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.gs-kick span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.gs-clear{border:0;background:none;color:var(--muted);font:600 .74rem var(--font);letter-spacing:0;text-transform:none;cursor:pointer;padding:2px 6px;border-radius:6px}
.gs-clear:hover{color:var(--text);background:var(--surface2)}
.gs-opt{cursor:pointer;border-radius:10px}
.gs-row{display:flex;align-items:center;gap:10px;padding:7px 10px;min-height:44px;border-radius:10px;position:relative}
.gs-opt.on .gs-row,.gs-opt.gs-row.on,.gs-opt.on{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.gs-opt.on .gs-row::before,.gs-opt.gs-row.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
.gs-main{display:flex;flex-direction:column;min-width:0;flex:1}
.gs-main b{display:block;font:600 .9rem/1.3 var(--font);color:var(--text);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-main b>.vbadges,.gs-main b>.gs-shield,.gs-main b>.gs-deg,.gs-main b>.gs-lock{display:inline-flex;vertical-align:-2px;margin-left:5px}
.gs-main b>.gs-q{display:inline-block;vertical-align:bottom}
.gs-main small{color:var(--muted);font-size:.78rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-main .vbadges{flex:none}
.gs-snip{color:var(--text);font-size:.86rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gs-ic{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--surface2);color:var(--dim);flex:none}
.gs-ic .ico{width:16px;height:16px}
.gs-x{flex:none;display:flex;border:0;background:none;color:var(--dim);padding:6px;border-radius:8px;cursor:pointer;opacity:0}
.gs-x .ico{width:14px;height:14px}
.gs-opt:hover .gs-x,.gs-opt.on .gs-x,.gs-x:focus-visible{opacity:1}
.gs-x:hover{color:var(--text);background:var(--surface2)}
.gs-row.all{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px}
.gs-row.all b{color:var(--accent)}
.gs-q{max-width:240px;overflow:hidden;text-overflow:ellipsis}
.gs-score{flex:none;font:700 .72rem var(--mono);color:var(--good);padding:2px 7px;border-radius:999px;background:color-mix(in srgb,var(--good) 12%,transparent)}
.gs-deg{flex:none;font:600 .66rem/1 var(--mono);color:var(--muted);padding:3px 5px;border-radius:5px;border:1px solid var(--line2)}
.gs-shield{display:inline-flex;color:var(--accent);flex:none}
.gs-shield .ico{width:14px;height:14px;fill:color-mix(in srgb,var(--accent) 18%,transparent)}
.gs-lock{display:inline-flex;color:var(--dim)}.gs-lock .ico{width:13px;height:13px}
.gs-hint{padding:12px 12px 6px;color:var(--muted);font-size:.84rem}
.gs-hint.none{padding-bottom:10px}
.gs-prompt{font:700 .9em var(--mono);color:var(--accent)}
.gs-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 10px 10px}
.gs-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:500 .82rem var(--font);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.gs-chip .ico{width:13px;height:13px;color:var(--dim)}
.gs-chip:hover,.gs-chip.on{border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 0 14px -6px color-mix(in srgb,var(--accent) 70%,transparent)}

/* tiles: logos, initials, group icons */
.gs-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:9px;overflow:hidden;font:700 .9rem var(--hfont);color:var(--on-accent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 85%,#000),color-mix(in srgb,var(--accent2) 85%,#000))}
.gs-tile.round{border-radius:50%}
.gs-tile.img{background:var(--surface);border:1px solid var(--line)}
.gs-tile img{width:100%;height:100%;object-fit:contain}
.gs-tile.emoji{background:color-mix(in srgb,var(--accent) 10%,var(--surface2));font-size:1.1rem;border:1px solid var(--line)}
.gs-tile .ico{width:18px;height:18px}
.gs-tile.lg{width:52px;height:52px;border-radius:13px;font-size:1.25rem}
.gs-tile.emoji.lg{font-size:1.5rem}

/* match highlight: accent underline with a soft glow, never a yellow marker */
mark.gs-hl{background:linear-gradient(90deg,var(--accent),var(--accent2)) left bottom/100% 2px no-repeat;color:inherit;font-weight:700;padding:0 0 1px;border-radius:0;text-shadow:0 0 12px color-mix(in srgb,var(--accent) 35%,transparent)}

/* phones: icon in the bar, full-screen search */
.gs-ov{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;background:var(--bg)}
.gs-ovbar{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;border-bottom:1px solid var(--line);background:var(--surface)}
.gs-ovbar .gs-form{flex:1;height:44px}
.gs-ovbar .gs-input{font-size:16px}
.gs-ovlist{flex:1;overflow:auto;padding:6px 8px calc(16px + env(safe-area-inset-bottom,0px))}
.gs-ovlist .gs-row{min-height:52px}
html.gs-noscroll{overflow:hidden}

@media (max-width:1320px) and (min-width:1181px){.gs{flex-basis:230px}.gs:focus-within,.gs.open{flex-basis:340px}.biz-adv .nav-lbl{display:none}.biz-adv{padding:0 8px}}
@media (max-width:1180px) and (min-width:641px){.gs{flex-basis:220px;min-width:130px}.gs:focus-within,.gs.open{flex-basis:320px}.gs-key{display:none}}
@media (max-width:900px) and (min-width:641px){.gs{min-width:44px;margin-left:2px}.gs-form{padding:0 8px 0 10px}}
@media (max-width:640px){
  .gs{flex:none;min-width:0;margin-left:auto}
  .gs:focus-within,.gs.open{flex-basis:auto}
  .gs ~ .tabs{margin-left:0}
  .gs-form,.gs-pop{display:none}
  .gs-mbtn{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--text)}
  .gs-mbtn .ico{width:20px;height:20px}
  .gs-ov .gs-form{display:flex}
}

/* ---------- results page ---------- */
.gs-page{--gs-grad:linear-gradient(90deg,var(--accent),var(--accent2));max-width:900px;padding-top:22px;padding-bottom:40px}
.gs-head{margin:0 0 14px}
.gs-kicker{font:700 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.gs-title{font:700 clamp(1.45rem,3.2vw,2rem)/1.15 var(--hfont);margin:0;overflow-wrap:anywhere}
.gs-qt{background:var(--gs-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gs-bar{position:sticky;top:calc(56px + 8px + env(safe-area-inset-top,0px));z-index:20;margin:0 -6px 16px;padding:8px 6px;border-radius:14px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gs-pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.gs-pills::-webkit-scrollbar{display:none}
.gs-pill{flex:none;padding:8px 15px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:600 .86rem/1.1 var(--font);cursor:pointer;transition:color .15s,border-color .15s,box-shadow .15s}
.gs-pill:hover{color:var(--text);border-color:var(--line2)}
.gs-pill.on{color:#fff;border-color:transparent;background:var(--gs-grad);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 80%,transparent),0 0 16px -6px color-mix(in srgb,var(--accent2) 70%,transparent)}
.gs-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.gs-filters[hidden]{display:none}
.gs-sel,.gs-tog,.gs-locw,.gs-seg{height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:500 .82rem var(--font)}
.gs-sel{padding:0 28px 0 10px;cursor:pointer;-webkit-appearance:none;appearance:none;max-width:100%;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-size:5px 5px;background-repeat:no-repeat}
.gs-sel.on,.gs-tog.on{border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.gs-tog{display:inline-flex;align-items:center;gap:6px;padding:0 12px;cursor:pointer}
.gs-tog .ico{width:14px;height:14px}
.gs-locw{display:inline-flex;align-items:center;gap:6px;padding:0 10px;color:var(--dim)}
.gs-locw .ico{width:14px;height:14px}
.gs-loc{border:0;outline:0;background:none;color:var(--text);font:inherit;width:130px}
.gs-locw:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.gs-seg{display:inline-flex;padding:2px;gap:2px}
.gs-seg button{border:0;background:none;color:var(--muted);font:600 .8rem var(--font);padding:0 11px;border-radius:7px;cursor:pointer}
.gs-seg button.on{background:var(--gs-grad);color:#fff}
.gs-reset{border:0;background:none;color:var(--muted);font:600 .82rem var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.gs-reset:hover{color:var(--text)}

.gs-sec,.gs-list.card-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}
.gs-sec{padding:16px 20px 6px;margin-bottom:16px}
.gs-sec::before,.gs-list.card-list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gs-grad);opacity:.85}
.gs-list.card-list{padding:2px 20px}
.gs-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.gs-sec-h .gs-kick{padding:0 0 4px;justify-content:flex-start}
.gs-sec-h h2{font:700 1.15rem/1.2 var(--hfont);margin:0}
.gs-sec-h .gs-kick b{font:inherit;color:var(--dim);margin-left:8px;letter-spacing:.1em}
.gs-sec-h.solo{margin:0 0 10px}
.gs-sec-f{border-top:1px solid var(--line);margin:4px -20px 0;padding:4px 10px}
.gs-seeall{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--accent);font:600 .88rem var(--font);padding:9px 10px;border-radius:9px;cursor:pointer}
.gs-seeall .ico{width:15px;height:15px;transition:transform .15s}
.gs-seeall:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.gs-seeall:hover .ico{transform:translateX(3px)}

.gs-res{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 0}
.gs-res + .gs-res{border-top:1px solid var(--line)}
.gs-res.job,.gs-res.postmini,.gs-res.prov{cursor:pointer;border-radius:12px;margin:0 -10px;padding-left:10px;padding-right:10px;transition:background .15s}
.gs-res.job:hover,.gs-res.postmini:hover,.gs-res.prov:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.gs-res.postmini{grid-template-columns:auto minmax(0,1fr)}
.gs-link{color:inherit;display:inline-flex;min-width:0}
.gs-link:hover{text-decoration:none}
.gs-link:hover b{color:var(--accent)}
.gs-rbody{min-width:0}
.gs-rt{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.gs-rt b{font:600 1rem/1.3 var(--font);color:var(--text);overflow-wrap:anywhere}
.gs-rt .gs-jt{font-family:var(--hfont);font-size:1.04rem;font-weight:600}
.gs-rs{margin:2px 0 0;color:var(--muted);font-size:.88rem;line-height:1.4;overflow-wrap:anywhere}
.gs-rs .ico{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.gs-ra{margin:6px 0 0;color:var(--dim);font-size:.84rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gs-rm{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;color:var(--dim);font-size:.8rem}
.gs-rm span{display:inline-flex;align-items:center;gap:4px}
.gs-rm .ico{width:13px;height:13px}
.gs-otw{color:var(--good)!important;font-weight:600}
.gs-st{font:600 .72rem var(--mono);color:var(--accent2)!important}
.gs-ract{display:flex;align-items:center;gap:8px}
.gs-vchip,.gs-pchip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font:600 .7rem/1.4 var(--font)}
.gs-vchip{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.gs-pchip{color:var(--muted);background:var(--surface2);border:1px solid var(--line)}
.gs-vchip .ico,.gs-pchip .ico{width:12px;height:12px}
.gs-when{color:var(--dim);font-size:.78rem}
.gs-res .gs-snip{margin:4px 0 0;font-size:.92rem;-webkit-line-clamp:3}
.gs-list.posts{display:flex;flex-direction:column;gap:14px}
.gs-list.posts .gs-post>*{margin:0}
.gs-more{display:flex;margin:16px auto 0}
.gs-end{text-align:center;color:var(--dim);font:600 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;margin:18px 0 0}

/* loading */
.gs-skel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px 20px}
.gs-skrow{display:flex;gap:14px;align-items:center;padding:14px 0}
.gs-skrow + .gs-skrow{border-top:1px solid var(--line)}
.gs-skrow i{width:48px;height:48px;border-radius:12px;flex:none}
.gs-skrow div{flex:1;display:flex;flex-direction:column;gap:8px}
.gs-skrow b{height:12px;width:45%;border-radius:6px}.gs-skrow span{height:10px;width:70%;border-radius:6px}
.gs-skrow i,.gs-skrow b,.gs-skrow span{background:linear-gradient(90deg,var(--surface2),color-mix(in srgb,var(--accent) 10%,var(--surface2)),var(--surface2));background-size:200% 100%;animation:gs-sh 1.2s linear infinite}
@keyframes gs-sh{to{background-position:-200% 0}}

/* empty: a small terminal */
.gs-empty{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.gs-term{border-radius:var(--radius);overflow:hidden;background:#0a0f1d;border:1px solid color-mix(in srgb,var(--accent) 30%,#1e293b);box-shadow:0 20px 50px -24px color-mix(in srgb,var(--accent) 60%,transparent),inset 0 0 60px -30px color-mix(in srgb,var(--accent2) 60%,transparent)}
.gs-term-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#111830;border-bottom:1px solid #1e293b}
.gs-term-bar i{width:10px;height:10px;border-radius:50%;background:#334155}
.gs-term-bar i:nth-child(1){background:#f87171}.gs-term-bar i:nth-child(2){background:#fbbf24}.gs-term-bar i:nth-child(3){background:#34d399}
.gs-term-bar span{margin-left:8px;font:600 .72rem var(--mono);color:#94a3b8}
.gs-term-body{padding:16px 16px 20px;font:500 .9rem/1.7 var(--mono);color:#e2e8f0;overflow-wrap:anywhere}
.gs-term .gs-prompt{color:#7dd3fc}
.gs-caret{display:inline-block;width:.6em;height:1.05em;margin-left:3px;vertical-align:-2px;background:#a78bfa;box-shadow:0 0 10px #a78bfa;animation:blink 1.1s steps(1) infinite}
.gs-tips{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.gs-tips h3{font:700 1rem var(--hfont);margin:0 0 6px}
.gs-tips ul{margin:0 0 6px;padding-left:18px;color:var(--muted);font-size:.9rem}
.gs-tips .gs-chips{padding:6px 0 0}

@media (prefers-reduced-motion:reduce){.gs,.gs-seeall .ico{transition:none}.gs-skrow i,.gs-skrow b,.gs-skrow span,.gs-caret{animation:none}}
@media (max-width:760px){.gs-empty{grid-template-columns:1fr}}
@media (max-width:640px){
  .gs-page{padding-top:14px}
  .gs-bar{top:calc(56px + env(safe-area-inset-top,0px));margin:0 -16px 14px;padding:8px 16px;border-radius:0}
  .gs-sec{padding:14px 14px 4px}
  .gs-sec-f{margin:4px -14px 0}
  .gs-list.card-list{padding:2px 14px}
  .gs-res{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .gs-res .gs-ract{grid-column:2;justify-self:start}
  .gs-res.job .gs-ract{display:none}
  .gs-tile.lg{width:44px;height:44px}
  .gs-loc{width:110px}
}

/* v2.0.104 search page: one tidy column, a big search box, tiles to start from */
html body .gs-page{max-width:980px;margin-left:auto;margin-right:auto;padding:26px clamp(14px,3vw,24px) 48px;display:block}
html body .gs-head{margin:0 0 18px;display:grid;gap:10px}
html body .gs-kicker{margin:0}
html body .gs-title{margin:0}
html body .gs-form{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border:1px solid var(--line2);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
html body .gs-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
html body .gs-form-ic{display:inline-grid;place-items:center;color:var(--muted);flex:none}html body .gs-form-ic .ico{width:20px;height:20px}
html body .gs-big-in{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:500 1.05rem/1.4 inherit;font-family:inherit;padding:10px 0}
html body .gs-big-in::-webkit-search-cancel-button{cursor:pointer}
html body .gs-form-go{min-height:44px;padding:0 22px;border-radius:12px;flex:none}
html body .gs-bar{margin:0 0 16px;padding:0;background:none;position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
html body .gs-pills{display:flex;flex-wrap:wrap;gap:8px}
html body .gs-body{display:grid;gap:16px}
html body .gs-body>.gs-sec,html body .gs-body>.gs-list,html body .gs-body>.gs-empty{margin:0}
html body .gs-sec{padding:18px 20px 16px}
html body .gs-sec .gs-chips{padding:10px 0 4px}
html body .gs-chips{display:flex;flex-wrap:wrap;gap:8px}
html body .gs-chip{display:inline-flex;align-items:center;gap:6px}html body .gs-chip .ico{width:14px;height:14px;opacity:.7}
html body .gs-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}
html body .gs-tile-b{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface2,var(--surface));color:inherit;cursor:pointer;font:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}
html body .gs-tile-b:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 10px 22px -14px color-mix(in srgb,var(--accent) 60%,transparent)}
html body .gs-tile-ic{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent2) 18%,transparent));color:var(--accent)}html body .gs-tile-ic .ico{width:19px;height:19px}
html body .gs-tile-b b{font-size:.95rem}html body .gs-tile-b small{color:var(--muted);font-size:.78rem;line-height:1.3}
html body .gs-empty{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (max-width:560px){html body .gs-form-go{padding:0 14px}html body .gs-tiles{grid-template-columns:1fr 1fr}html body .gs-tile-b small{display:none}html body .gs-tile-b{grid-template-rows:auto}html body .gs-tile-ic{grid-row:auto}}

/* v2.0.107 left sidebar on the search page */
html body .gs-page{max-width:1240px}
html body .gs-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
html body .gs-col{min-width:0}
html body .gs-side{position:sticky;top:84px;display:grid;gap:14px;min-width:0}
html body .gs-sidec{padding:14px 14px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
html body .gs-sidec .gs-kick{margin:0 0 8px}
html body .gs-sidel{display:grid;gap:2px}
html body .gs-sidel a,html body .gs-sidel button{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:.9rem;font-weight:500;text-align:left;text-decoration:none;cursor:pointer}
html body .gs-sidel a:hover,html body .gs-sidel button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
html body .gs-sidel .ico{width:16px;height:16px;flex:none;color:var(--accent)}
html body .gs-sidel span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .gs-side .ad-card{margin:0}
@media (max-width:1000px){html body .gs-layout{grid-template-columns:minmax(0,1fr)}html body .gs-side{display:none}}

/* v2.0.127: on phones the top-bar search is a round button again. The v2.0.104 search-page rule above (html body .gs-form)
   also matched the top bar, so the full box showed on phones and pushed the whole screen sideways. The phone overlay
   (.gs-ov) still shows its own box. */
@media (max-width:640px){
  html body .gs > .gs-form,html body .gs > .gs-pop{display:none}
  html body .gs-ov .gs-form{display:flex}
  html body .nr-head .gs{flex:none;min-width:0;max-width:none;margin-left:auto}
}

/* practice.css */
/* ReconHire: free practice exams and PBQs (practice-ui.js).
   ReconHire look: mono "// kickers", Chakra Petch headings and numbers, blue→violet accent gradient with soft glows,
   faint grid texture on hero cards, rounded cards with a thin gradient top bar, terminal-style touches.
   Works light and dark; usable at 390px with no horizontal page scroll (PBQ workspaces scroll inside their panel). */

/* ---------- shared ---------- */
.pr-wrap{display:grid;gap:16px;min-width:0}
.pr-kick{display:block;font:600 .7rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:4px}
.pr-disc{font-size:.76rem;color:var(--dim);line-height:1.5;margin:4px 0 0}
.pr-card{position:relative;overflow:hidden}
.pr-card::before,.pr-hero::before,.pr-exam-top::before,.pr-result::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.9}
.pr-fresh{display:inline-flex;align-items:center;gap:6px;font:500 .78rem/1 var(--mono);color:var(--dim)}
.pr-fresh .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px color-mix(in srgb,var(--good) 70%,transparent)}

/* ---------- catalog ---------- */
.pr-hero{position:relative;overflow:hidden;padding:20px;border-radius:18px;background:
  linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,
  radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),var(--surface);
  border:1px solid var(--line)}
.pr-hero h1{font:700 clamp(1.5rem,3.4vw,2.1rem)/1.1 var(--hfont);margin:.2em 0 .25em}
.pr-hero p{margin:0;color:var(--muted);max-width:60ch}
.pr-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:2px 0}
.pr-bar .search{flex:1;min-width:180px;display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--bg) 70%,var(--surface));border:1px solid var(--line2);border-radius:11px;padding:0 12px}
.pr-bar .search .ico{width:16px;height:16px;color:var(--dim);flex:none}
.pr-bar .search input{border:0;background:none;color:var(--text);padding:11px 0;width:100%;outline:none}
.pr-vendor{font:600 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:14px 2px 8px;display:flex;align-items:center;gap:8px}
.pr-vendor::after{content:"";flex:1;height:1px;background:var(--line)}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.pr-tile{position:relative;overflow:hidden;text-align:left;display:grid;gap:8px;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.pr-tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 14px 34px -20px var(--accent);text-decoration:none}
.pr-tile::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:0;transition:opacity .15s}
.pr-tile:hover::before{opacity:1}
.pr-tile b{font:700 1.02rem/1.25 var(--hfont);color:var(--text)}
.pr-tile .pr-code{font:600 .76rem/1 var(--mono);color:var(--accent2)}
.pr-tile .pr-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pr-ringwrap{display:flex;align-items:center;gap:12px}
.pr-badge-major{position:absolute;top:12px;right:12px;font:600 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:4px 7px;border-radius:7px}

/* ---------- readiness ring ---------- */
.pr-ring{position:relative;width:var(--s,72px);height:var(--s,72px);flex:none;display:grid;place-items:center}
.pr-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.pr-ring .pr-ring-t{position:absolute;inset:0;display:grid;place-items:center;font:700 1rem var(--hfont);color:var(--text)}
.pr-ring.lg{--s:132px}.pr-ring.lg .pr-ring-t{font-size:1.9rem}
.pr-ring.sm{--s:44px}.pr-ring.sm .pr-ring-t{font-size:.8rem}
.pr-ring .trk{stroke:color-mix(in srgb,var(--text) 10%,transparent)}
.pr-ring .val{stroke:url(#prg);stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}

/* ---------- cert page ---------- */
.pr-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:4px}
.pr-fact{background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.pr-fact small{display:block;font:500 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:5px}
.pr-fact b{font:700 1.1rem var(--hfont);color:var(--text)}
.pr-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pr-mode{position:relative;overflow:hidden;text-align:left;display:grid;gap:4px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:transform .15s,border-color .15s}
.pr-mode:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);text-decoration:none}
.pr-mode .ico{width:20px;height:20px;color:var(--accent)}
.pr-mode b{font:700 .98rem var(--hfont);color:var(--text)}
.pr-mode small{color:var(--muted);font-size:.82rem}
.pr-domains{display:grid;gap:8px}
.pr-dom{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--text) 3%,transparent);border:1px solid var(--line)}
.pr-dom-n{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font:700 .8rem var(--hfont);color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2))}
.pr-dom-t{min-width:0}.pr-dom-t b{font-weight:600;font-size:.92rem}.pr-dom-t small{display:block;color:var(--dim);font-size:.76rem}
.pr-weight{font:700 .9rem var(--hfont);color:var(--accent2)}
.pr-dombar{height:5px;border-radius:5px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden;margin-top:5px}
.pr-dombar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.pr-pbqs{display:grid;gap:8px}
.pr-pbq{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.pr-pbq .pr-pbq-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pr-pbq-b{flex:1;min-width:0}.pr-pbq-b b{font:600 .95rem var(--hfont)}.pr-pbq-b small{display:block;color:var(--dim);font-size:.78rem}
.pr-pbq .chip.sm{flex:none}

/* ---------- exam / drill player ---------- */
.pr-player{max-width:860px;margin:0 auto;display:grid;gap:14px;min-width:0}
.pr-exam-top{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);position:sticky;top:64px;z-index:20}
.pr-exam-top .pr-ex-ttl{flex:1;min-width:0}.pr-exam-top h2{font:700 1.05rem var(--hfont);margin:0}
.pr-exam-top small{color:var(--dim);font-size:.78rem}
.pr-timer{font:700 1.15rem var(--mono);color:var(--text);display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;background:color-mix(in srgb,var(--text) 5%,transparent);border:1px solid var(--line)}
.pr-timer.warn{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.pr-timer .ico{width:16px;height:16px}
.pr-q{padding:18px;border-radius:16px}
.pr-q .pr-q-obj{font:600 .7rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--accent2);margin-bottom:6px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pr-q .pr-q-txt{font-size:1.08rem;line-height:1.5;margin:0 0 6px;white-space:pre-wrap}
.pr-scen{background:color-mix(in srgb,var(--accent) 7%,transparent);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:10px 12px;margin:0 0 12px;font-size:.92rem;color:var(--text)}
.pr-opts{display:grid;gap:9px;margin:10px 0 0}
.pr-opt{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line2);cursor:pointer;transition:border-color .12s,background .12s;text-align:left;width:100%;font-size:.95rem;color:var(--text)}
.pr-opt:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.pr-opt .pr-key{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;font:700 .8rem var(--hfont);color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent);border:1px solid var(--line2)}
.pr-opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pr-opt.on .pr-key{color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.pr-opt.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.pr-opt.ok .pr-key{background:var(--good);color:#04130b;border-color:transparent}
.pr-opt.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.pr-opt.bad .pr-key{background:var(--bad);color:#fff;border-color:transparent}
.pr-fb{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--text) 3%,transparent)}
.pr-fb.ok{border-color:color-mix(in srgb,var(--good) 40%,transparent);background:color-mix(in srgb,var(--good) 9%,transparent)}
.pr-fb.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 9%,transparent)}
.pr-fb b{display:block;margin-bottom:3px}
.pr-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.pr-flagbtn{margin-left:auto;font-size:.82rem}
/* review grid */
.pr-gridnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:6px}
.pr-gridnav button{aspect-ratio:1;border-radius:8px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font:600 .82rem var(--hfont);cursor:pointer}
.pr-gridnav button.done{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.pr-gridnav button.flag{box-shadow:inset 0 0 0 2px var(--accent2)}
.pr-gridnav button.cur{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- PBQ workspaces ---------- */
.pr-pbq-work{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pr-list{display:grid;gap:8px}
.pr-item{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;background:var(--surface);border:1.5px solid var(--line2);cursor:grab;font-size:.9rem}
.pr-item.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pr-item .pr-grip{color:var(--dim);font:700 1rem var(--mono);flex:none}
.pr-item .pr-ord{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;font:700 .8rem var(--hfont);color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--accent),var(--accent2))}
.pr-move{display:flex;gap:4px;margin-left:auto}
.pr-move button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center}
.pr-move button:hover{color:var(--text);border-color:var(--accent)}
.pr-move button:disabled{opacity:.4;cursor:default}
.pr-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pr-zone{border:1.5px dashed var(--line2);border-radius:12px;padding:10px;min-height:92px;background:color-mix(in srgb,var(--text) 3%,transparent)}
.pr-zone.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pr-zone h4{margin:0 0 8px;font:600 .8rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent2)}
.pr-chip-item{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:0 0 6px;border-radius:9px;background:var(--surface);border:1px solid var(--line2);cursor:grab;font-size:.86rem}
.pr-bank{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.pr-match{display:grid;gap:8px}
.pr-match-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.pr-match-row b{font-weight:600;font-size:.9rem}
.pr-match-row .ico{width:16px;height:16px;color:var(--dim);justify-self:center}
.pr-subnet{display:grid;gap:10px}
.pr-subnet label{display:grid;gap:4px}.pr-subnet label span{font:600 .8rem var(--mono);color:var(--muted)}
.pr-term{background:#0a0e16;color:#d6e2ff;border:1px solid #223049;border-radius:12px;font:14px/1.5 var(--mono);overflow:hidden}
html:not([data-theme=dark]) .pr-term{background:#0b1220;color:#d6e2ff}
.pr-term-out{padding:12px;height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.pr-term-line{display:flex;gap:8px;align-items:center;border-top:1px solid #223049;padding:8px 12px}
.pr-term-line .pr-prompt{color:#5eead4;white-space:nowrap}
.pr-term-line input{flex:1;background:none;border:0;color:#d6e2ff;font:14px/1.5 var(--mono);outline:none}
.pr-term-ask{display:grid;gap:8px;margin-top:10px}
.pr-checks{display:grid;gap:7px}
.pr-check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1.5px solid var(--line2);cursor:pointer;font-size:.9rem}
.pr-check.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pr-check .box{width:20px;height:20px;flex:none;border-radius:6px;border:2px solid var(--line2);display:grid;place-items:center}
.pr-check.on .box{background:var(--accent);border-color:var(--accent)}
.pr-check.on .box .ico{width:14px;height:14px;color:#fff}
.pr-siem{display:grid;gap:10px}
.pr-siem label{display:grid;gap:4px}.pr-siem label span{font:600 .8rem var(--mono);color:var(--muted)}

/* ---------- result ---------- */
.pr-result{position:relative;overflow:hidden;padding:22px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:center;display:grid;gap:10px;justify-items:center}
.pr-result.pass{box-shadow:0 0 0 1px color-mix(in srgb,var(--good) 40%,transparent),0 18px 44px -24px var(--good)}
.pr-score{font:800 3rem/1 var(--hfont);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-verdict{font:700 1.1rem var(--hfont)}
.pr-verdict.pass{color:var(--good)}.pr-verdict.fail{color:var(--bad)}
.pr-result-meta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;color:var(--muted);font-size:.86rem}
.pr-rev{display:grid;gap:10px}
.pr-rev-q{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.pr-rev-q.ok{border-left:4px solid var(--good)}
.pr-rev-q.bad{border-left:4px solid var(--bad)}
.pr-rev-q .pr-rev-obj{font:600 .68rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent2);margin-bottom:5px}
.pr-rev-opt{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:8px;font-size:.9rem}
.pr-rev-opt.a{background:color-mix(in srgb,var(--good) 12%,transparent)}
.pr-rev-opt.y{background:color-mix(in srgb,var(--bad) 12%,transparent)}
.pr-rev-opt .ico{width:15px;height:15px;flex:none;margin-top:3px}

/* ---------- tracker card bits (reused inside #/certs) ---------- */
.pr-tk{display:grid;gap:12px}
.pr-tk-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pr-tk-stats{display:flex;gap:8px;flex-wrap:wrap}
.pr-tk-stat{background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--line);border-radius:10px;padding:7px 11px;font-size:.82rem;color:var(--muted)}
.pr-tk-stat b{color:var(--text);font:700 .95rem var(--hfont)}
.pr-tk-btns{display:flex;gap:8px;flex-wrap:wrap}
.pr-weakchips{display:flex;gap:6px;flex-wrap:wrap}
.pr-plan{background:color-mix(in srgb,var(--accent) 6%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:12px;padding:12px 14px}
.pr-plan b{font:700 .95rem var(--hfont)}
.pr-ready{display:inline-flex;align-items:center;gap:7px;font:700 .82rem var(--hfont);color:#04130b;background:linear-gradient(135deg,var(--good),#1fb86a);padding:6px 12px;border-radius:999px;box-shadow:0 0 14px color-mix(in srgb,var(--good) 45%,transparent)}
.pr-labstrip{display:grid;gap:8px}
.pr-lab{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.pr-lab.locked{opacity:.72}
.pr-lab .pr-lab-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pr-lab-b{flex:1;min-width:0}.pr-lab-b b{font:600 .92rem var(--hfont)}.pr-lab-b small{display:block;color:var(--dim);font-size:.76rem}
.pr-lock{color:var(--dim)}.pr-lock .ico{width:15px;height:15px}

/* ---------- home card ---------- */
.pr-home .pr-home-top{display:flex;align-items:center;gap:12px}
.pr-home .pr-home-cta{margin-top:10px;width:100%;justify-content:center}
.pr-home .pr-cd{font:700 1.2rem var(--hfont);color:var(--accent2)}

/* ---------- phones ---------- */
@media (max-width:520px){
  .pr-exam-top{top:56px;padding:11px 13px}
  .pr-score{font-size:2.4rem}
  .pr-q{padding:14px}
  .pr-match-row{grid-template-columns:1fr auto 1fr}
}
/* premium extras (practice-ui.js): extras card, locked buttons, tutor, percentile, readiness report */
.pr-extras{display:grid;gap:10px;margin-top:10px}
.pr-extra{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pr-extra b{display:block;font:700 .95rem var(--hfont)}.pr-extra small{color:var(--muted);font-size:.82rem}
.pr-extra-ic,.pr-up-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.pr-lockbtn{border-style:dashed}.pr-lockbtn .ico{width:13px;height:13px}
.pr-up-line{margin:10px 0 0;font-size:.84rem;color:var(--muted);display:flex;gap:6px;align-items:flex-start}
.pr-up-hero{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}.pr-up-hero b{font:700 1.05rem var(--hfont)}.pr-up-hero p{margin:4px 0 0;color:var(--muted)}
.pr-up-note{margin:14px 0 0;font-size:.86rem;color:var(--muted);display:flex;gap:6px}
.pr-custom-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pr-tutor{margin-top:8px}.pr-tutor-out{margin-top:6px;padding:10px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--line)}
.pr-tutor-out p{margin:0 0 6px;font-size:.9rem}.pr-tutor-out p:last-child{margin:0}.pr-tutor-note{font-size:.86rem;color:var(--muted);display:flex;gap:6px;margin:6px 0 0}
.pr-pctl-t{margin:0;font-size:.95rem}.pr-pctl .spread{gap:10px;flex-wrap:wrap}
.pr-report-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pr-trend{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:6px}
.pr-trend-c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.pr-trend-c i{display:block;width:100%;max-width:34px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.pr-trend-c small{font:600 .7rem var(--mono);color:var(--muted)}
.pr-rtable{width:100%;border-collapse:collapse;font-size:.88rem}.pr-rtable th,.pr-rtable td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line)}.pr-rtable th{color:var(--muted);font:600 .75rem var(--mono);text-transform:uppercase}
.pr-plan{margin:0;padding-left:18px}.pr-plan li{margin:4px 0}
@media (max-width:520px){.pr-extra{grid-template-columns:auto 1fr}.pr-extra>button{grid-column:1/-1;justify-self:start}.pr-custom-row{grid-template-columns:1fr}}
@media print{body *{visibility:hidden}.pr-report,.pr-report *{visibility:visible}.pr-report{position:absolute;inset:0;padding:0}.no-print{display:none!important}.pr-report .card{break-inside:avoid;box-shadow:none}}

/* certificates.css */
/* ReconHire training certificates (certificates-ui.js). The certificate itself is a navy console document in both themes;
   everything around it follows the light / dark tokens. Sizes inside the certificate use container units so it scales
   from a 390px phone to a printed A4 or Letter page. */

/* ---------- the certificate ---------- */
.ct-cert{--ca:#4f8fff;--cb:#38d6ff;--accent:var(--ca);--accent2:var(--cb);
  /* design variables (certificates-ui.js paint(); Admin → Settings → Certificates). The fallbacks are the original look. */
  --ct-fn:var(--ct-fname,var(--hfont));--ct-fh:var(--ct-fhead,var(--hfont));--ct-fb:var(--ct-fbody,var(--font));--ct-fm:var(--ct-fmono,var(--mono));--ct-fs:var(--ct-fsig,"RH Signature","Segoe Script","Brush Script MT",cursive);
  container-type:inline-size;position:relative;width:100%;aspect-ratio:2000/1414;padding:.9%;border-radius:12px;
  background:linear-gradient(135deg,var(--ca),var(--cb));box-shadow:0 24px 60px -30px color-mix(in srgb,var(--ca) 70%,#000),0 2px 6px rgba(0,0,0,.25);color:var(--ct-text,#eef3ff);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ct-in{position:relative;height:100%;overflow:hidden;border-radius:8px;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:radial-gradient(ellipse at 50% 30%,var(--ct-glow,#12224a) 0%,transparent 70%),
    repeating-linear-gradient(0deg,var(--ct-grid,rgba(140,170,230,.07)) 0 1px,transparent 1px 2.5cqw),repeating-linear-gradient(90deg,var(--ct-grid,rgba(140,170,230,.07)) 0 1px,transparent 1px 2.5cqw),var(--ct-bg,#070e1c)}
.ct-nogrid .ct-in{background:radial-gradient(ellipse at 50% 30%,var(--ct-glow,#12224a) 0%,transparent 70%),var(--ct-bg,#070e1c)}
.ct-in::after{content:"";position:absolute;inset:1.8cqw;border:max(1px,.1cqw) solid color-mix(in srgb,var(--ca) 38%,transparent);border-radius:4px;pointer-events:none}
.ct-hexes{position:absolute;left:1.4cqw;top:1.4cqw;width:15cqw;height:auto;pointer-events:none}
.ct-hexes-r{left:auto;top:auto;right:1.4cqw;bottom:1.4cqw;transform:rotate(180deg)}
.ct-top{position:absolute;left:5.5cqw;right:5.5cqw;top:4.6cqw;display:flex;align-items:center;justify-content:space-between;z-index:1}
.ct-brand{display:flex;align-items:center;gap:1.2cqw;text-align:left}
.ct-logo{width:5.2cqw;height:5.2cqw;color:var(--ct-logo,#e6ecf7)}
.ct-brand span{display:grid;line-height:1.05}
.ct-brand b{font:700 2.5cqw var(--ct-fh);color:var(--ct-brand,#f2f6ff);letter-spacing:.01em}
.ct-brand small{font:500 1.25cqw var(--ct-fm);color:var(--ct-soft,#9fb0cf);text-transform:uppercase;letter-spacing:.06em;margin-top:.4cqw}
.ct-badge{font:700 1.25cqw var(--ct-fm);text-transform:uppercase;letter-spacing:.08em;color:var(--cb);border:max(1px,.13cqw) solid var(--ca);border-radius:99px;padding:.65cqw 1.5cqw;background:rgba(255,255,255,.03)}
.ct-body{position:relative;z-index:1;margin-top:14.4cqw;display:flex;flex-direction:column;align-items:center;max-width:82cqw}
.ct-kick{font:600 1.5cqw var(--ct-fm);color:var(--cb);letter-spacing:.04em}
.ct-certifies{margin:1.6cqw 0 0;font:400 1.6cqw var(--ct-fb);color:var(--ct-soft,#9fb0cf)}
.ct-name{margin:.6cqw 0 0;font:700 5.9cqw/1.08 var(--ct-fn);color:var(--ct-strong,#fff);letter-spacing:.005em;max-width:82cqw;overflow-wrap:anywhere}
.ct-name::after{content:"";display:block;width:24cqw;height:.26cqw;margin:1.4cqw auto 0;border-radius:2px;background:linear-gradient(90deg,var(--ca),var(--cb))}
.ct-line{margin:1.7cqw 0 0;font:400 1.6cqw var(--ct-fb);color:var(--ct-line,#b8c5de)}
.ct-title{margin:.9cqw 0 0;font:700 2.9cqw/1.14 var(--ct-fh);background:linear-gradient(90deg,var(--ca),var(--cb));-webkit-background-clip:text;background-clip:text;color:transparent;max-width:80cqw;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ct-sub{margin:.8cqw 0 0;font:500 1.5cqw var(--ct-fb);color:var(--ct-soft,#9fb0cf)}
.ct-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);width:78cqw;margin-top:3.4cqw}
.ct-stats span{display:grid;gap:.5cqw;padding:0 1.5cqw}
.ct-stats span+span{border-left:max(1px,.1cqw) solid var(--ct-rule,rgba(160,185,230,.2))}
.ct-stats small{font:600 1.1cqw var(--ct-fm);letter-spacing:.1em;text-transform:uppercase;color:var(--ct-dim,#7f8ca6)}
.ct-stats b{font:700 1.75cqw var(--ct-fh);color:var(--ct-text,#eef3ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-stats b.ct-mono{font:700 1.6cqw var(--ct-fm);letter-spacing:.04em}
.ct-foot{position:absolute;left:6.5cqw;right:6.5cqw;bottom:5.6cqw;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:2cqw;z-index:1}
.ct-sign{display:grid;justify-items:start;text-align:left;gap:.3cqw}
.ct-sig{display:block;width:23cqw;height:4cqw;border-bottom:max(1px,.1cqw) solid rgba(200,215,245,.5);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M8 30C30 2 44 38 66 18s30 10 52 0 28 6 50 0' fill='none' stroke='%23cfe0ff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom .4cqw/90% auto no-repeat}
.ct-sign b{font:700 1.5cqw var(--ct-fh);color:var(--ct-text,#eef3ff);margin-top:.6cqw}
.ct-sign small,.ct-verify small{font:500 1.05cqw var(--ct-fm);color:var(--ct-dim,#7f8ca6);text-transform:uppercase;letter-spacing:.1em}
.ct-seal{width:12.5cqw;height:12.5cqw;filter:drop-shadow(0 0 1.4cqw color-mix(in srgb,var(--ca) 45%,transparent))}
.ct-verify{display:grid;justify-items:end;text-align:right;gap:.5cqw}
.ct-verify b{font:700 1.4cqw var(--ct-fm);color:var(--ct-text,#eef3ff);overflow-wrap:anywhere}
.ct-note{position:absolute;left:4cqw;right:4cqw;bottom:2.7cqw;margin:0;font:400 1.1cqw var(--ct-fb);color:var(--ct-dim,#7f8ca6);z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-mono{font-family:var(--ct-fm,var(--mono))}

/* ---------- certificate page ---------- */
.ct-page{max-width:1040px}
.ct-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ct-kick2{font:600 .74rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
.ct-stage{margin:0 auto 16px}
.ct-zoomhint{display:none;align-items:center;justify-content:center;gap:6px;font-size:.8rem;color:var(--dim);margin:-8px 0 12px}.ct-zoomhint .ico{width:14px;height:14px}
.ct-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 16px}
.ct-settings{display:grid;gap:14px;max-width:720px;margin:0 auto}
.ct-settings .switch span{display:grid;gap:2px}
.ct-settings .switch small{font-size:.82rem;line-height:1.4}
.ct-verifyrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.88rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;overflow-wrap:anywhere}
.ct-verifyrow .ico{width:16px;height:16px;color:var(--accent)}
.ct-disclaim{text-align:center;font-size:.84rem;margin:14px auto 0;max-width:640px}
.ct-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:36px 20px}.ct-empty>.ico{width:34px;height:34px;color:var(--dim)}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ct-tile{display:block;text-decoration:none;color:inherit;border-radius:14px;transition:transform .15s}
.ct-tile:hover{transform:translateY(-2px)}
.ct-flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;padding:0 4px}
.ct-none{grid-column:1/-1}

/* ---------- small certificate card (wallet, feed, earned card) ---------- */
.ct-mini{--ca:#4f8fff;--cb:#38d6ff;--accent:var(--ca);--accent2:var(--cb);display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:var(--ct-text,#eef3ff);
  background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--ca) 22%,transparent),transparent 60%) padding-box,linear-gradient(var(--ct-mini-bg,#0b1530),var(--ct-mini-bg,#0b1530)) padding-box,linear-gradient(135deg,var(--ca),var(--cb)) border-box;border:1.5px solid transparent;min-width:0}
.ct-mini-seal{flex:none;width:46px;height:46px;display:grid;place-items:center;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(135deg,var(--ca),var(--cb))}
.ct-mini-logo{width:40px;height:40px;color:#e6ecf7;background:#0a1426;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);padding:6px}
.ct-mini-b{display:grid;gap:1px;min-width:0;flex:1}
.ct-mini-b small{font:600 .68rem var(--ct-fmono,var(--mono));text-transform:uppercase;letter-spacing:.08em;color:var(--cb)}
.ct-mini-b b{font:700 .98rem/1.25 var(--ct-fhead,var(--hfont));color:var(--ct-strong,#fff);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ct-mini-b span{font-size:.8rem;color:var(--ct-line,#b8c5de)}
.ct-vchip{display:inline-flex;align-items:center;gap:4px;font:600 .72rem var(--mono);color:#0b1530;background:linear-gradient(135deg,var(--ca),var(--cb));padding:3px 9px;border-radius:99px;flex:none}
.ct-vchip .ico{width:12px;height:12px}
.ct-mini-prev{pointer-events:none}

/* earned card (range debrief, practice result) */
.ct-earned{display:grid;gap:12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),color-mix(in srgb,var(--accent2) 7%,var(--surface)));margin:12px 0;text-align:left}
.ct-earned-h{display:flex;gap:12px;align-items:center}
.ct-earned-h>div{display:grid;gap:2px;min-width:0}
.ct-earned-h b{font:700 1.08rem var(--hfont)}
.ct-earned-k{font:600 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
.ct-earned-ic{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.ct-earned-ic .ico{width:24px;height:24px}
.ct-earned-acts{display:flex;flex-wrap:wrap;gap:8px}

/* wallet section */
.ct-wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.ct-wcard{display:grid;grid-template-rows:1fr auto;gap:8px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.ct-wlink{display:block;text-decoration:none;color:inherit}.ct-wcard .ct-wlink,.ct-wcard .ct-mini{height:100%}
.ct-wfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 2px;font-size:.84rem}
.switch.sm i{width:34px;height:20px}.switch.sm i::after{width:14px;height:14px}.switch.sm input:checked+i::after{transform:translateX(14px)}

/* feed card */
.ct-refpost{display:block;margin:4px 0 10px;text-decoration:none;color:inherit}
.ct-refpost.gone{display:flex;gap:8px;align-items:center;padding:12px;border:1px dashed var(--line2);border-radius:12px;color:var(--dim)}
.ct-ref-r{display:grid;justify-items:end;gap:6px;flex:none;text-align:right}
.ct-ref-r small{font:600 .66rem var(--mono);color:#9fb0cf;text-transform:uppercase;letter-spacing:.06em;max-width:120px}

/* verify page */
.ct-vpage{max-width:1000px}
.ct-vbar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;margin:4px 0 16px;border:1px solid}
.ct-vbar>div{display:grid;gap:2px}
.ct-vbar b{font:700 1.2rem var(--hfont)}
.ct-vbar span{font-size:.92rem;color:var(--muted)}
.ct-vbar.ok{background:color-mix(in srgb,var(--good) 12%,var(--surface));border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.ct-vbar.ok b{color:color-mix(in srgb,var(--good) 75%,var(--text))}
.ct-vbar.bad{background:color-mix(in srgb,var(--bad) 10%,var(--surface));border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.ct-vtick{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff}
.ct-vbar.ok .ct-vtick{background:var(--good)}.ct-vbar.bad .ct-vtick{background:var(--bad)}
.ct-vtick .ico{width:22px;height:22px}
.ct-vfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px;margin:0 auto}
.ct-vfacts div{display:grid;gap:2px;min-width:0}
.ct-vfacts small{font:600 .68rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.ct-vfacts b{overflow-wrap:anywhere}

@media (max-width:640px){
  .ct-stage{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;cursor:zoom-in}
  .ct-stage.zoom{cursor:zoom-out}.ct-stage.zoom .ct-cert{width:760px}
  .ct-zoomhint{display:flex}
  .ct-vfacts{grid-template-columns:1fr 1fr}
  .ct-actions .btn{flex:1 1 calc(50% - 10px);justify-content:center}
  .ct-cert{border-radius:8px}.ct-in{border-radius:5px}
  .ct-grid,.ct-wgrid{grid-template-columns:1fr}
}

/* ---------- print / save as PDF: only the certificate, landscape, no page chrome ---------- */
.ct-print-root{display:none}
@media print{
  @page{size:landscape;margin:0}
  html,body.ct-printing{margin:0!important;padding:0!important;background:#070e1c!important}
  body.ct-printing>*:not(.ct-print-root){display:none!important}
  body.ct-printing .ct-print-root{display:flex!important;position:fixed;inset:0;align-items:center;justify-content:center;background:var(--ct-print-bg,#070e1c);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.ct-printing .ct-print-root .ct-cert{width:min(100vw,141.4vh);border-radius:0;box-shadow:none}
  body.ct-printing .ct-print-root .ct-in{border-radius:0}
  body.ct-printing .ct-print-root .ct-title{background:none;color:var(--cb)}
}
/* Cyber Range level (Recruit, Analyst, Hunter, Elite): a fourth stat with a level color */
.ct-stats.n4{grid-template-columns:.8fr 1fr 1fr 1fr;width:86cqw}
.ct-stats.n3.has-level{grid-template-columns:.8fr 1fr 1fr}
.ct-stats.n2{grid-template-columns:repeat(2,1fr);width:58cqw}
.ct-level b{letter-spacing:.12em;font-family:var(--ct-fh)}
.ct-level.lvl-recruit b{color:#7dd3fc}.ct-level.lvl-analyst b{color:#a78bfa}.ct-level.lvl-hunter b{color:#fb923c}.ct-level.lvl-elite b{color:#f43f5e;text-shadow:0 0 1.2cqw rgba(244,63,94,.45)}
/* signature: the owner's name in a handwritten style on the line (replaces the drawn squiggle) */
.ct-sig{background:none;height:auto;padding:0 .4cqw .2cqw 1cqw;font:italic 400 2.7cqw/1.2 "Segoe Script","Brush Script MT","Lucida Handwriting","Snell Roundhand",cursive;color:#cfe0ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* handwritten signature font (Great Vibes, SIL Open Font License, bundled locally) */
@font-face{font-family:"RH Signature";font-weight:400;font-display:swap;src:url(../fonts/great-vibes-latin-400-normal.woff2) format("woff2")}
/* certificate designer fonts (SIL Open Font License, bundled locally): a second script and a classic serif */
@font-face{font-family:"Dancing Script";font-weight:400;font-display:swap;src:url(../fonts/dancing-script-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Dancing Script";font-weight:700;font-display:swap;src:url(../fonts/dancing-script-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-weight:700;font-display:swap;src:url(../fonts/playfair-display-latin-700-normal.woff2) format("woff2")}
.ct-sig{font:400 3.4cqw/1.15 var(--ct-fs);color:var(--ct-sigc,#dbe7ff);border-bottom-color:var(--ct-sigline,rgba(200,215,245,.5));overflow:visible;text-overflow:clip;padding-left:1.2cqw}
.ct-sig-plain{height:3.9cqw}
.ct-sign-r{justify-items:end;text-align:right}
.ct-sign-r .ct-sig{padding:0 1.2cqw 0 0}
.ct-verify-line{position:relative;z-index:1;margin:1cqw 0 0;font-size:1.05cqw;color:var(--ct-verifyc,#c8d4ee);letter-spacing:.04em}
.ct-verify-line{position:absolute;left:0;right:0;bottom:4.3cqw;text-align:center;margin:0}
/* certificate design toggles: no seal keeps the footer's three columns */
.ct-seal-gap{display:block;width:12.5cqw}

/* certdesign.css */
/* ReconHire admin: Certificate designer (certdesign-ui.js). Form on the left, the live certificate on the right;
   below 1100px the preview stacks under the form. Theme variables only, so light and dark mode both work. */
.cd .af-head h3{display:flex;align-items:center;gap:8px}
.cd .af-head h3 .ico{width:20px;height:20px;color:var(--accent)}
.cd-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cd-state{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 .76rem/1.3 var(--font);white-space:nowrap}
.cd-state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cd-state.is-saved{background:var(--af-good-bg);color:var(--af-good);box-shadow:inset 0 0 0 1px var(--af-good-line)}
.cd-state.is-dirty{background:var(--af-warn-bg);color:var(--af-warn);box-shadow:inset 0 0 0 1px var(--af-warn-line)}
.cd-tabs{justify-self:start}
.cd-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;align-items:start}
.cd-form{display:grid;gap:14px;min-width:0}
.cd-sec{display:grid;min-width:0}
.cd-sec-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:16px 18px 0}
.cd-sec-h>div{flex:1 1 240px;min-width:0}
.cd-sec-h h4{margin:0 0 3px;font:700 1.05rem var(--hfont)}
.cd-sec-h p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.45}
.cd-sec-b{display:grid;gap:16px;padding:14px 18px 18px;min-width:0}
.cd-group{display:grid;gap:10px;min-width:0}
.cd-group+.cd-group{padding-top:14px;border-top:1px dashed var(--line2)}
.cd-group h5{margin:0;font:700 .8rem var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.cd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;min-width:0}
.cd-field{margin:0}
.cd-field small{line-height:1.4}
.cd-field .af-in .input{padding-right:62px}
/* fonts */
.cd-fonts{gap:12px}
.cd-frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px dashed var(--line2)}
.cd-frow:last-child{border-bottom:0;padding-bottom:0}
.cd-fsample{display:block;padding:12px 14px;border-radius:12px;background:#070e1c;color:#eef3ff;font-size:1.25rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line)}
/* colors */
.cd-pair{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--bg) 40%,var(--surface))}
.cd-pair-h{display:flex;align-items:center;gap:10px}
.cd-pair-h b{font:600 .9rem var(--font)}
.cd-strip{flex:1;height:8px;border-radius:99px;min-width:40px}
.cd-color{display:grid;gap:4px;min-width:0}
.cd-clabel{font-size:.8rem;font-weight:600;color:var(--muted)}
.cd-cin{display:flex;align-items:center;gap:6px;min-width:0}
.cd-swatch{flex:none;width:42px;height:40px;padding:0;border:1px solid var(--line2);border-radius:10px;background:none;cursor:pointer}
.cd-swatch::-webkit-color-swatch-wrapper{padding:3px}.cd-swatch::-webkit-color-swatch{border:0;border-radius:7px}.cd-swatch::-moz-color-swatch{border:0;border-radius:7px}
.cd-hex{flex:1;min-width:0;font-family:var(--mono);padding:9px 10px}
.cd-hex.bad{border-color:var(--af-bad-line);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 10%,transparent)}
.cd-rs{flex:none}
.cd-rs .ico{width:15px;height:15px}
/* layout toggles */
.cd-toggles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cd-switch{align-items:flex-start}
.cd-switch span{display:grid;gap:2px}
.cd-switch small{font-size:.8rem;line-height:1.4}
/* preview */
.cd-prev{position:sticky;top:76px;display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow);min-width:0}
.cd-prev-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cd-prev-h b{display:inline-flex;align-items:center;gap:6px;font:700 .98rem var(--hfont)}
.cd-prev-h b .ico{width:16px;height:16px;color:var(--accent)}
.cd-prev-h small{font-size:.8rem}
.cd-prev-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cd-rangeopts{display:flex;gap:6px;flex-wrap:wrap}
.cd-rangeopts[hidden]{display:none}
.cd-prev-cert{min-width:0}
.cd-prev-cert .ct-cert{box-shadow:0 14px 34px -22px rgba(0,0,0,.6)}
.cd-prev-acts{display:flex;gap:8px;flex-wrap:wrap}
.cd-warns{display:grid;gap:6px}
.cd-warns:empty{display:none}
.cd-warn{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 11px;border-radius:10px;font-size:.84rem;line-height:1.45;border:1px solid}
.cd-warn .ico{width:15px;height:15px;margin-top:2px;flex:none}
.cd-warn.warn{background:var(--af-warn-bg);border-color:var(--af-warn-line);color:var(--text)}.cd-warn.warn .ico{color:var(--af-warn)}
.cd-warn.bad{background:var(--af-bad-bg);border-color:var(--af-bad-line);color:var(--text)}.cd-warn.bad .ico{color:var(--af-bad)}
.cd-warn.info{background:var(--af-info-bg);border-color:var(--af-info-line);color:var(--text)}.cd-warn.info .ico{color:var(--af-info)}
/* PNG modal */
.modal.cd-pngmodal{width:min(1100px,calc(100vw - 32px));max-width:none}
.cd-pngwrap{border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--line)}
.cd-png{display:block;width:100%;height:auto}

@media (max-width:1100px){
  .cd-layout{grid-template-columns:minmax(0,1fr)}
  .cd-prev{position:static;order:2}
}
@media (max-width:640px){
  .cd .af-head{align-items:stretch}
  .cd-actions{width:100%}
  .cd-actions .btn{flex:1 1 auto;justify-content:center}
  .cd-state{order:-1;flex-basis:100%;justify-content:center}
  .cd-grid,.cd-toggles,.cd-frow{grid-template-columns:minmax(0,1fr)}
  .cd-sec-h,.cd-sec-b{padding-left:14px;padding-right:14px}
  .cd-prev{padding:10px}
  .cd-prev-acts .btn{flex:1 1 auto;justify-content:center}
}

/* rh-skin-public.css */
/* ReconHire public skin: the signed-out pages (homepage, sign-in and sign-up, pricing, FAQ, help, legal, contact,
   public wallet /u/<handle>) plus the public header and footer. Same vocabulary as the signed-in redesign
   (network-grow.css, jobs-home.css, search.css, pubs.css): mono "// kickers", Chakra Petch headings and numbers,
   the blue to violet gradient with soft glows, cards with a thin gradient bar on top, faint grid and scan textures,
   hex motifs and small terminal touches. Everything is scoped to body.rh-pub:not(.app), so signed-in pages never change.
   Colors come from the theme tokens, so light and dark both work. CSS animations only; all of them stop for reduced motion. */

.rh-pub:not(.app){
  --rg:linear-gradient(135deg,var(--accent),var(--accent2));
  --rglow:0 10px 28px -12px color-mix(in srgb,var(--accent) 75%,transparent);
  --rbar:linear-gradient(90deg,var(--accent),var(--accent2) 70%,transparent);
  --rr:18px;
  --rhex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%237c3aed' stroke-width='1.4'%3E%3Cpath d='M50 3 94 28v56L50 109 6 84V28z' opacity='.55'/%3E%3Cpath d='M50 25 75 39v34L50 87 25 73V39z' stroke='%232563eb' opacity='.6'/%3E%3Ccircle cx='50' cy='56' r='5' fill='%232563eb' stroke='none' opacity='.5'/%3E%3C/svg%3E");
  --rgrid:linear-gradient(color-mix(in srgb,var(--accent) 6%,transparent) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent) 1px,transparent 1px) 0 0/24px 24px;
  background-image:linear-gradient(color-mix(in srgb,var(--text) 3%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 3%,transparent) 1px,transparent 1px);
  background-size:48px 48px;background-attachment:fixed;overflow-x:hidden
}
.rh-pub:not(.app) h1,.rh-pub:not(.app) h2{letter-spacing:.005em}
.rh-pub:not(.app) .kicker{font:600 .72rem/1.3 var(--mono);letter-spacing:.14em;color:var(--accent2)}

/* shared: blinking terminal cursor */
.rh-cur{display:inline-block;width:.5em;height:1em;margin-left:4px;vertical-align:-.14em;border-radius:1px;background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent);animation:blink 1.05s steps(1) infinite}

/* ---------- buttons ---------- */
.rh-pub:not(.app) .btn:not(.ghost):not(.quiet):not(.danger){background:var(--rg);box-shadow:var(--rglow);border-radius:10px;transition:transform .15s,box-shadow .15s,filter .15s}
.rh-pub:not(.app) .btn:not(.ghost):not(.quiet):not(.danger):hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--accent2) 80%,transparent);text-decoration:none}
.rh-pub:not(.app) .btn.ghost{border-radius:10px;border-color:color-mix(in srgb,var(--accent) 22%,var(--line2))}
.rh-pub:not(.app) .btn.ghost:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);text-decoration:none}
.rh-pub:not(.app) .btn.quiet{border-radius:10px}
.rh-pub:not(.app) .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

/* ---------- header (homepage and the other public pages) ---------- */
.rh-pub:not(.app) .head .head-row{height:62px}
.rh-pub:not(.app) .l-nav{gap:2px}
.rh-pub:not(.app) .l-nav a{position:relative;padding:8px 12px;border-radius:10px;font-size:.9rem;font-weight:500;color:var(--muted)}
.rh-pub:not(.app) .l-nav a:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent);text-decoration:none}
.rh-pub:not(.app) .l-nav a.on{color:var(--text)}
.rh-pub:not(.app) .l-nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--rg);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-pnav{margin-left:auto}
.rh-pnav-xs{display:none!important}
.rh-phead .head-actions{margin-left:12px}
.rh-phead-prefs .rh-prefs{flex-wrap:nowrap}
.rh-pub:not(.app) .head-actions .rh-lang select{font-size:.82rem}
@media (max-width:900px){
  .rh-phead .head-actions{margin-left:auto}
  .rh-pnav-xs{display:inline-flex!important}
}
@media (max-width:640px){.rh-phead-prefs{display:none}}
@media (max-width:480px){
  .rh-pnav-xs{display:none!important}
  .rh-pub:not(.app) .head-actions{gap:6px}
  .rh-pub:not(.app) .head-actions .btn.sm{padding:6px 10px}
}
@media (max-width:520px){.rh-pub:not(.app) .head-actions .btn.ghost.sm.rh-signin-link{display:inline-flex}}
@media (max-width:360px){.rh-pub:not(.app) .brand-text{display:none}}

/* ---------- homepage hero ---------- */
.rh-pub:not(.app) .hero{padding-top:clamp(28px,5vw,64px)}
.rh-pub:not(.app) .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:var(--rgrid);-webkit-mask:radial-gradient(ellipse 70% 80% at 70% 40%,#000 20%,transparent 75%);mask:radial-gradient(ellipse 70% 80% at 70% 40%,#000 20%,transparent 75%);opacity:.9}
.rh-pub:not(.app) .hero-grid{z-index:1}
.rh-pub:not(.app) .hero h1{font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.04;margin-bottom:18px}
.rh-pub:not(.app) .hero h1 em{filter:drop-shadow(0 6px 22px color-mix(in srgb,var(--accent) 35%,transparent))}
.rh-pub:not(.app) .cmd{gap:9px;padding:9px 14px;border-radius:12px;background:#0b1220;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:#9fb0cc;box-shadow:0 10px 30px -18px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.05);font-size:.88rem;max-width:100%}
.rh-pub:not(.app) .cmd>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rh-pub:not(.app) .cmd b{color:#8fb4ff;font-weight:600}
.rh-pub:not(.app) .cmd .live{flex:none}
.rh-pub:not(.app) .hero-hire{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 12px;border-radius:999px;border:1px dashed color-mix(in srgb,var(--accent2) 40%,var(--line2));background:color-mix(in srgb,var(--accent2) 5%,transparent);font-size:.88rem}
.rh-pub:not(.app) .hero-hire .ico{color:var(--accent2)}
.rh-pub:not(.app) .trust span{padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);font-size:.84rem}

/* sign-in box on the homepage */
.rh-pub:not(.app) .hero-login{overflow:hidden;border-radius:var(--rr);padding:26px 24px 20px;border-color:color-mix(in srgb,var(--accent) 25%,var(--line2));box-shadow:0 30px 70px -34px rgba(15,23,42,.55),0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent),0 0 46px -20px var(--accent)}
.rh-pub:not(.app) .hero-login::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-pub:not(.app) .hero-login::after{content:"";position:absolute;right:-34px;top:-38px;width:130px;height:146px;pointer-events:none;opacity:.32;background:var(--rhex) center/contain no-repeat}
.rh-k{font:600 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent2)}
.rh-pub:not(.app) .hero-login .hl-head b{font-size:1.5rem}
.rh-pub:not(.app) .hero-login .field>span,.rh-pub:not(.app) .auth .field>span{font:600 .68rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.rh-pub:not(.app) .hero-login .btn{font-family:var(--hfont);letter-spacing:.03em;font-size:1rem}
.rh-hl-sec,.rh-auth-sec{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 0;padding-top:12px;border-top:1px dashed var(--line2);font:500 .7rem/1.3 var(--mono);letter-spacing:.06em;color:var(--dim);text-align:center}
.rh-hl-sec .ico,.rh-auth-sec .ico{width:13px;height:13px;color:var(--good)}
.rh-pub:not(.app) .scope-art{opacity:.42}
.rh-signin-link{white-space:nowrap}

/* ---------- at a glance band ---------- */
.rh-pub:not(.app) .band{border:0;background:none}
.rh-pub:not(.app) .band-row{gap:12px;padding:8px 0 10px}
.rh-pub:not(.app) .band-row>div{position:relative;overflow:hidden;padding:16px 18px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.rh-pub:not(.app) .band-row>div::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--rbar)}
.rh-pub:not(.app) .band-row>div::after{content:"";position:absolute;right:-14px;bottom:-18px;width:62px;height:70px;opacity:.18;background:var(--rhex) center/contain no-repeat}
.rh-pub:not(.app) .band-row div b{font-size:2.1rem;background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.rh-pub:not(.app) .band-row div span{display:block;margin-top:4px;font-size:.84rem}

/* ---------- sections ---------- */
.rh-pub:not(.app) .sec{padding:clamp(44px,7vw,84px) 0}
.rh-pub:not(.app) .sec-head .kicker{margin-bottom:8px}
.rh-pub:not(.app) .sec-head h2{margin-bottom:10px}

/* how it works: numbered steps on a scan line */
.rh-pub:not(.app) .how{position:relative}
.rh-pub:not(.app) .how::before{content:"";position:absolute;left:4%;right:4%;top:38px;height:1px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent) 0 6px,transparent 6px 12px);z-index:0}
.rh-pub:not(.app) .how .card{z-index:1;overflow:hidden;border-radius:var(--rr);padding:20px 20px 22px;transition:transform .2s,border-color .2s,box-shadow .2s}
.rh-pub:not(.app) .how .card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-pub:not(.app) .how .card::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rbar)}
.rh-pub:not(.app) .how .card::before{content:"0" counter(s);display:grid;place-items:center;width:40px;height:44px;margin:0 0 14px;font:700 .9rem var(--hfont);color:#fff;background:var(--rg);clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%);letter-spacing:0}
.rh-pub:not(.app) .how h3{font-size:1.05rem}
@media (max-width:900px){.rh-pub:not(.app) .how::before{display:none}}

/* features: hex icon tiles */
.rh-pub:not(.app) .feat .card{border-radius:var(--rr);padding:20px 20px 22px}
.rh-pub:not(.app) .feat .card::before{background:var(--rbar)}
.rh-pub:not(.app) .feat .card:hover{box-shadow:0 18px 40px -24px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-pub:not(.app) .feat .fi{width:46px;height:52px;border-radius:0;color:#fff;background:var(--rg);clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%)}
.rh-pub:not(.app) .feat h3{font-size:1.05rem}

/* role coverage */
.rh-pub:not(.app) .roles-wrap{position:relative}
.rh-pub:not(.app) .roles-wrap .wrap{position:relative;overflow:hidden;padding-top:28px;padding-bottom:28px;border-radius:24px;background:var(--rgrid),radial-gradient(520px 240px at 100% 0,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 70%),var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.rh-pub:not(.app) .roles-wrap .wrap::after{content:"";position:absolute;right:-30px;top:-34px;width:170px;height:190px;opacity:.35;pointer-events:none;background:var(--rhex) center/contain no-repeat}
.rh-pub:not(.app) .roles-wrap .seg{gap:6px;padding:0;border:0;background:none}
.rh-pub:not(.app) .roles-wrap .seg button{padding:7px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);font-weight:600}
.rh-pub:not(.app) .roles-wrap .seg button:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.rh-pub:not(.app) .roles-wrap .seg button.on{color:#fff;border-color:transparent;background:var(--rg);box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 75%,transparent)}
.rh-pub:not(.app) [data-role-chips]{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px}
.rh-pub:not(.app) [data-role-chips] .chip{padding:6px 11px;border-radius:9px;font:500 .78rem/1.1 var(--mono);letter-spacing:.01em;color:var(--text);background:color-mix(in srgb,var(--surface) 85%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
.rh-pub:not(.app) [data-role-chips] .chip::before{content:"";width:6px;height:7px;flex:none;background:var(--rg);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* free checker teaser terminal */
.rh-pub:not(.app) .term{background:#0b1220;border-color:color-mix(in srgb,var(--accent) 28%,transparent);border-radius:16px;box-shadow:0 30px 60px -30px rgba(15,23,42,.6),0 0 40px -22px var(--accent)}
.rh-pub:not(.app) .term-bar{color:#7f8ca6;border-color:rgba(255,255,255,.07)}
.rh-pub:not(.app) .term pre{color:#9fb0cc;background:linear-gradient(180deg,rgba(91,140,255,.05),transparent 40%)}
.rh-pub:not(.app) .term .p{color:#8fb4ff}.rh-pub:not(.app) .term .g{color:#34d399}

/* questions */
.rh-pub:not(.app) .faq details{margin:0 0 10px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;transition:border-color .15s}
.rh-pub:not(.app) .faq details:hover{border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.rh-pub:not(.app) .faq details[open]{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.rh-pub:not(.app) .faq summary{position:relative;padding:15px 18px;font:600 1rem var(--hfont);letter-spacing:.01em;align-items:center}
.rh-pub:not(.app) .faq summary::-webkit-details-marker{display:none}
.rh-pub:not(.app) .faq summary::after{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:1.05rem}
.rh-pub:not(.app) .faq details[open] summary::after{background:var(--rg);color:#fff}
.rh-pub:not(.app) .faq details[open] summary::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--rg)}
.rh-pub:not(.app) .faq details>p{margin:0;padding:0 18px 16px}
.rh-pub:not(.app) .faq details>div{padding:0 18px 16px}

/* final call to action */
.rh-pub:not(.app) .cta-final{position:relative;overflow:hidden;border-radius:26px;border-color:color-mix(in srgb,var(--accent) 25%,var(--line2));background:var(--rgrid),radial-gradient(ellipse at top,color-mix(in srgb,var(--accent) 18%,transparent),transparent 65%),radial-gradient(500px 220px at 100% 100%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 70%),var(--surface);box-shadow:0 30px 70px -40px color-mix(in srgb,var(--accent) 80%,transparent)}
.rh-pub:not(.app) .cta-final::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-pub:not(.app) .cta-final::after{content:"";position:absolute;left:-40px;bottom:-50px;width:200px;height:224px;opacity:.28;pointer-events:none;background:var(--rhex) center/contain no-repeat}
.rh-pub:not(.app) .cta-final>*{position:relative;z-index:1}
.rh-ad-wrap{max-width:640px}

/* ---------- public footer ---------- */
.rh-foot{position:relative;margin-top:28px;padding:40px 0 22px;border-top:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 4%,transparent));color:var(--dim);font-size:.88rem}
.rh-foot::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 50%,transparent) 30%,color-mix(in srgb,var(--accent2) 50%,transparent) 70%,transparent)}
.rh-foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:28px 24px}
.rh-foot-brand{display:grid;gap:12px;align-content:start;min-width:0}
.rh-foot-brand p{margin:0;max-width:34ch;color:var(--muted);font-size:.88rem;line-height:1.55}
.rh-foot-brand .brand-text small .caret{display:none}
.rh-foot-term{justify-self:start;max-width:100%;padding:8px 12px;border-radius:10px;background:#0b1220;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);font:500 .76rem/1.3 var(--mono);color:#9fb0cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-foot-term b{color:#34d399}.rh-foot-term i{font-style:normal;color:#8fb4ff}
.rh-foot-term .rh-cur{width:.45em;height:.9em}
.rh-foot-col{display:grid;gap:9px;align-content:start;min-width:0}
.rh-foot-k{margin-bottom:2px;font:600 .68rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent2)}
.rh-foot-col a{color:var(--muted);font-size:.88rem;width:max-content;max-width:100%}
.rh-foot-col a:hover{color:var(--accent);text-decoration:none}
.rh-foot-base{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-top:30px;padding-top:16px;border-top:1px dashed var(--line2);font-size:.82rem}
.rh-foot-base .rh-prefs{margin-left:0}
@media (max-width:900px){.rh-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rh-foot-brand{grid-column:1 / -1}}
@media (max-width:420px){.rh-foot-grid{gap:24px 16px}.rh-foot-base{flex-direction:column;align-items:flex-start}}

/* ---------- public app pages: pricing, FAQ, terms, privacy, contact, withdraw, security, checker ---------- */
.rh-pub:not(.app) #app>main{position:relative;min-height:calc(100vh - 360px)}
.rh-pub:not(.app) .page{padding-top:clamp(20px,4vw,40px)}
.rh-pub:not(.app) .price-head{position:relative}
.rh-pub:not(.app) .price-head h1,.rh-pub:not(.app) .page-head h1,.rh-pub:not(.app) .hg-hero h1{font-family:var(--hfont)}
.rh-pub:not(.app) .price-head .kicker,.rh-pub:not(.app) .page-head .kicker{padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent2) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 22%,transparent)}
.rh-pub:not(.app) .legal.card,.rh-pub:not(.app) .card.legal{overflow:hidden;border-radius:var(--rr);padding:clamp(22px,4vw,40px)}
.rh-pub:not(.app) .card.legal::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rbar)}
.rh-pub:not(.app) .card.legal::after{content:"";position:absolute;right:-30px;top:-34px;width:150px;height:168px;opacity:.22;pointer-events:none;background:var(--rhex) center/contain no-repeat}
.rh-pub:not(.app) .legal h3{position:relative;padding-left:16px;font-family:var(--hfont)}
.rh-pub:not(.app) .legal h3::before{content:"";position:absolute;left:0;top:.28em;width:8px;height:9px;background:var(--rg);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.rh-pub:not(.app) .faq.legal h3::before{top:.42em}
/* FAQ page: grouped questions */
.rh-pub:not(.app) .faq.legal h2{position:relative;font:600 .76rem/1.2 var(--mono);font-size:.76rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin:28px 0 12px!important;padding-left:16px}
.rh-pub:not(.app) .faq.legal h2::before{content:"";position:absolute;left:0;top:.18em;width:8px;height:9px;background:var(--rg);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* pricing */
.rh-pub:not(.app) .plans .card,.rh-pub:not(.app) .plan{border-radius:var(--rr)}
.rh-pub:not(.app) .bill-toggle{border-radius:999px;padding:3px}
.rh-pub:not(.app) .bill-toggle button{border-radius:999px}
.rh-pub:not(.app) .bill-toggle button.on{color:#fff;background:var(--rg);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
/* contact and other cards */
.rh-pub:not(.app) .contact-grid>.card,.rh-pub:not(.app) .contact-grid .card{border-radius:var(--rr);overflow:hidden}
.rh-pub:not(.app) .contact-grid>.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rbar)}
/* help guide */
.rh-pub:not(.app) .hg-hero{position:relative;overflow:hidden;padding:clamp(22px,4vw,34px);border-radius:22px;background:var(--rgrid),radial-gradient(520px 240px at 100% 0,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 70%),var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.rh-pub:not(.app) .hg-hero::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-pub:not(.app) .hg-hero::after{content:"";position:absolute;right:-30px;top:-30px;width:170px;height:190px;opacity:.35;pointer-events:none;background:var(--rhex) center/contain no-repeat}
.rh-pub:not(.app) .hg-hero>*{position:relative;z-index:1}
.rh-pub:not(.app) .hg-sec{border-radius:var(--rr)}
/* the help guide renders straight into <main> when signed out: give it the page width and side gutters */
.rh-pub:not(.app) #app>main:has(>.hg-hero){max-width:var(--maxw);margin:0 auto;padding:clamp(16px,3vw,28px) clamp(16px,3vw,28px) 0}
.rh-pub:not(.app) #app>main:has(>.hg-hero)>.wrap{padding-left:0;padding-right:0}
/* resume checker (signed out) */
.rh-pub:not(.app) .page-head{position:relative}

/* ad slot under public pages */
.rh-pub:not(.app) .page-ad .ad-card{border-radius:var(--rr)}

/* ---------- auth: two-step check, admin sign-in, reset password, check your inbox ---------- */
.rh-pub:not(.app) .auth{min-height:calc(100vh - 300px);background:radial-gradient(520px 320px at 50% 30%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.rh-pub:not(.app) .auth .card{overflow:hidden;border-radius:20px;padding:30px 28px 22px;border-color:color-mix(in srgb,var(--accent) 22%,var(--line2));box-shadow:0 30px 70px -36px rgba(15,23,42,.55),0 0 46px -22px var(--accent)}
.rh-pub:not(.app) .auth .card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-pub:not(.app) .auth .card::after{content:"";position:absolute;right:-34px;top:-38px;width:140px;height:156px;opacity:.28;pointer-events:none;background:var(--rhex) center/contain no-repeat}
.rh-auth-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rh-pub:not(.app) .rh-auth-top .logo{width:44px;height:44px;margin:0}
.rh-pub:not(.app) .rh-auth-top .kicker{margin:0}
.rh-pub:not(.app) .auth h1{font-size:1.75rem}
.rh-pub:not(.app) .auth .codebox{font:600 1.4rem var(--mono);letter-spacing:.4em;text-align:center}
.rh-pub:not(.app) .auth .btn{font-family:var(--hfont);letter-spacing:.03em}
.rh-pub:not(.app) .auth .rh-auth-sec{margin-top:16px}
.rh-pub:not(.app) .inbox-card .inbox-ico{color:#fff;background:var(--rg);box-shadow:var(--rglow)}

/* ---------- sign-up questionnaire (/start) ---------- */
.rh-pub:not(.app) .quiz-card{border-radius:var(--rr)}

/* ---------- public achievement wallet (/u/handle) ---------- */
.rh-pub:not(.app) .wl-public{padding-top:clamp(16px,3vw,28px)}
.rh-pub:not(.app) .wl-hero.pub{position:relative;overflow:hidden;padding-top:96px;border-radius:22px;border-color:color-mix(in srgb,var(--accent) 22%,var(--line));background:var(--surface)}
.rh-pub:not(.app) .wl-hero.pub::before{content:"";position:absolute;inset:0 0 auto;height:118px;
  background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/16px 16px,
    radial-gradient(240px 120px at 85% 10%,color-mix(in srgb,var(--accent2) 70%,transparent),transparent 70%),linear-gradient(120deg,#0b1430,color-mix(in srgb,var(--accent) 70%,#0b1430) 60%,color-mix(in srgb,var(--accent2) 60%,#0b1430))}
.rh-pub:not(.app) .wl-hero.pub::after{content:"";position:absolute;top:0;height:118px;width:30%;left:-30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:scanx 9s linear infinite;pointer-events:none}
.rh-pub:not(.app) .wl-hero.pub .wl-hero-main{position:relative;z-index:1}
.rh-pub:not(.app) .wl-hero.pub .wl-hero-main .pfp{box-shadow:0 0 0 4px var(--surface),0 0 0 6px color-mix(in srgb,var(--accent) 50%,transparent),0 0 30px -6px var(--accent)}
.rh-pub:not(.app) .wl-hero.pub .wl-id{padding-top:34px}
.rh-pub:not(.app) .wl-hero.pub h1{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-bottom:4px}
.rh-pub:not(.app) .wl-about{border-radius:var(--rr);overflow:hidden}
.rh-pub:not(.app) .wl-about::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rbar)}
.rh-pub:not(.app) .wl-about h3::before{content:"// ";color:var(--accent2);font-family:var(--mono)}
.rh-pub:not(.app) .wl-sec-h h3{font-family:var(--hfont)}
.rh-pub:not(.app) .wl-sec-h h3 .ico{color:var(--accent2)}
.rh-pub:not(.app) .wl-sec-h .chip{font:600 .72rem var(--mono);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.rh-pub:not(.app) .wl-made{font:500 .78rem var(--mono);letter-spacing:.04em}
.rh-pub:not(.app) .wl-made::before{content:"$ ";color:var(--good)}
@media (max-width:640px){
  .rh-pub:not(.app) .wl-hero.pub{padding-top:70px}
  .rh-pub:not(.app) .wl-hero.pub::before,.rh-pub:not(.app) .wl-hero.pub::after{height:96px}
  .rh-pub:not(.app) .wl-hero.pub .wl-id{padding-top:0}
}

/* ---------- dark mode ---------- */
html[data-theme="dark"] .rh-pub:not(.app) .hero-login{box-shadow:0 30px 70px -30px #000,0 0 50px -22px var(--accent)}
html[data-theme="dark"] .rh-pub:not(.app) .auth .card{box-shadow:0 30px 70px -30px #000,0 0 50px -22px var(--accent)}
html[data-theme="dark"] .rh-pub:not(.app) .cmd,html[data-theme="dark"] .rh-pub:not(.app) .term,html[data-theme="dark"] .rh-foot-term{background:#070b14}
html[data-theme="dark"] .rh-pub:not(.app) .trust span{background:color-mix(in srgb,var(--surface) 70%,transparent)}
html[data-theme="dark"] .rh-pub:not(.app) .wl-hero.pub::before{filter:saturate(1.1) brightness(.9)}

/* ---------- phones ---------- */
@media (max-width:640px){
  .rh-pub:not(.app) .hero h1{font-size:clamp(2.1rem,10vw,2.6rem)}
  .rh-pub:not(.app) .cmd{font-size:.8rem}
  .rh-pub:not(.app) .hero-hire{border-radius:14px}
  .rh-pub:not(.app) .band-row div b{font-size:1.7rem}
  .rh-pub:not(.app) .band-row>div{padding:14px 14px 12px}
  .rh-pub:not(.app) .roles-wrap .wrap{border-radius:0;border-left:0;border-right:0}
  .rh-pub:not(.app) .cta-final{border-radius:20px}
  .rh-pub:not(.app) .auth .card{padding:26px 20px 20px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .rh-cur{animation:none}
  .rh-pub:not(.app) .wl-hero.pub::after{animation:none;display:none}
  .rh-pub:not(.app) .how .card,.rh-pub:not(.app) .feat .card,.rh-pub:not(.app) .btn{transition:none}
  .rh-pub:not(.app) .how .card:hover,.rh-pub:not(.app) .feat .card:hover,.rh-pub:not(.app) .btn:hover{transform:none}
}
.reduce-motion .rh-cur{animation:none}

/* ===== sign-in hero: form + one pulse deck with tabs (index.html, landing.js) ===== */
.hero-side{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start;place-items:stretch}
.hero-side .scope-art{opacity:.2}
.hero-login{width:100%;max-width:none;gap:10px}
.hero-login .hl-head{flex-direction:column;align-items:flex-start;gap:2px}
.hero-login .hl-head b{font-size:1.35rem}
.hero-login .hl-head .dim{font-size:.84rem}
.hl-pulse{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--good) 10%,transparent);border:1px solid color-mix(in srgb,var(--good) 35%,transparent)}
.hl-live{display:inline-flex;align-items:center;gap:5px;font:700 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--good)}
.hl-live i{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:hlPulse 1.6s ease-in-out infinite}
@keyframes hlPulse{50%{opacity:.35}}
.hl-deck{position:relative;z-index:1;overflow:hidden;padding:0;border-radius:18px;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line2);display:grid}
.hl-deck::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899,var(--accent));background-size:200% 100%;animation:hlSlide 6s linear infinite}
@keyframes hlSlide{to{background-position:-200% 0}}
.hl-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px 10px 0}
.hl-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 4px;border-radius:10px;border:0;background:transparent;color:var(--muted);font:600 .74rem var(--font,inherit);cursor:pointer;transition:background .15s,color .15s}
.hl-tabs button .ico{width:13px;height:13px}
.hl-tabs button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}
.hl-tabs button.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 8px 18px -10px var(--accent2)}
.hl-panes{position:relative;height:238px;padding:12px 14px 8px;overflow:hidden}
.hl-pane{display:none;gap:8px;animation:hlIn .3s ease-out}
.hl-pane.on{display:grid}
.hl-pane .rh-k{margin:0 0 2px}
@keyframes hlIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hl-board-list,.hl-wins-list,.hl-tools{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.hl-board-list li{display:flex;align-items:center;gap:8px;font-size:.84rem;padding:5px 8px;border-radius:10px;background:var(--surface2)}
.hl-empty{color:var(--muted);font-size:.8rem;line-height:1.35;display:block}
.hl-place{width:22px;height:22px;flex:none;display:grid;place-items:center;font:700 .7rem/1 var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.hl-place.p1{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#422006}.hl-place.p2{background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#111}.hl-place.p3{background:linear-gradient(135deg,#fdba74,#c2410c)}
.hl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.hl-board-list b{font:600 .72rem var(--mono);color:var(--accent2)}
.hl-wins-list li{display:flex;align-items:flex-start;gap:7px;font-size:.82rem;line-height:1.3;padding:4px 0}
.hl-win-ic{flex:none;font-size:.9rem}
.hl-win-t{flex:1;min-width:0}
.hl-wins-list small{color:var(--dim);font-size:.68rem;white-space:nowrap}
.hl-tools li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;background:var(--surface2)}
.hl-tools i{font-style:normal;width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.hl-tools span{display:grid;min-width:0}.hl-tools b{font-size:.84rem}.hl-tools small{color:var(--muted);font-size:.72rem;line-height:1.3}
.hl-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.hl-stats>div{display:grid;gap:1px;padding:10px;border-radius:12px;background:var(--surface2);text-align:center}
.hl-stats b{font:700 1.3rem/1 var(--hfont);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hl-stats small{color:var(--muted);font-size:.68rem}
.hl-cta{font-size:.8rem;font-weight:600;color:var(--accent);text-decoration:none;margin-top:2px}
.hl-dots{display:flex;justify-content:center;gap:5px;padding:0 0 10px}
.hl-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--text) 18%,transparent);transition:all .2s}
.hl-dots i.on{width:18px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
@media (max-width:920px){.hero-side{max-width:440px;margin:0 auto}.hl-tabs button{font-size:.68rem;padding:7px 2px}.hl-tabs button .ico{display:none}}

/* ===== homepage declutter: tighter sections, numbers in the hero, step strip, tabbed features, compact faq, strip ad ===== */
.rh-pub:not(.app) .sec.sec-tight{padding:clamp(28px,4.5vw,56px) 0}
.rh-pub:not(.app) .sec-tight .sec-head{margin-bottom:18px}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:none}
.sec-head-row h2{margin-bottom:0}
.sec-head-row .btn{margin-bottom:4px}
.hero-nums{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 10px}
.hero-nums>div{display:flex;align-items:baseline;gap:7px}
.hero-nums b{font:700 1.5rem/1 var(--hfont);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-nums span{color:var(--muted);font-size:.84rem}
.steps-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.steps-strip li{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 14px 14px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.steps-strip li::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:var(--rg);opacity:.8}
.steps-strip span{flex:none;width:34px;height:34px;display:grid;place-items:center;font:700 .78rem/1 var(--hfont);color:#fff;background:var(--rg);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.steps-strip b{display:block;font:600 .98rem/1.25 var(--hfont);margin-bottom:3px}
.steps-strip small{color:var(--muted);font-size:.82rem;line-height:1.4}
.lp-tabs{margin-bottom:4px}
.lp-pane{display:none}.lp-pane.on{display:block}
.lp-pane .feat{margin-top:4px}
.rh-pub:not(.app) .lp-pane .feat .card{padding:16px}
.rh-pub:not(.app) .lp-pane .feat .card p{font-size:.88rem}
.roles-wrap.lp-pane{padding:0;background:none;border:0;box-shadow:none}
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.rh-pub:not(.app) .faq-cols details{margin:0}
.sec-ad .rh-ad-wrap .ad-card{max-width:none;margin:0}
.rh-pub:not(.app) .sec.sec-ad{padding:0 0 clamp(28px,4.5vw,56px)}
@media (max-width:900px){.steps-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.faq-cols{grid-template-columns:1fr}}
@media (max-width:540px){.steps-strip{grid-template-columns:1fr}.hero-nums{gap:6px 14px}.hero-nums b{font-size:1.2rem}}

/* ---------- v2.0.126: header fit. The menu no longer runs under the language picker ----------
   In the header the language picker is a round globe button (the native list still opens on click);
   the menu never shrinks below its text and drops the on-page jump links first as the window narrows. */
.rh-pub:not(.app) .l-nav{flex:0 0 auto;min-width:0;white-space:nowrap}
.rh-pub:not(.app) .l-nav a{padding:8px 10px}
.rh-pub:not(.app) .head-actions .rh-lang{width:36px;height:36px;padding:0;justify-content:center;border:1px solid var(--line2);border-radius:999px;background:transparent}
.rh-pub:not(.app) .head-actions .rh-lang:hover,.rh-pub:not(.app) .head-actions .rh-lang:focus-within{color:var(--text);border-color:color-mix(in srgb,var(--accent) 55%,var(--line2));background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rh-pub:not(.app) .head-actions .rh-lang svg{width:18px;height:18px}
.rh-pub:not(.app) .head-actions .rh-lang::after{display:none}
.rh-pub:not(.app) .head-actions .rh-lang select{position:absolute;inset:0;width:100%!important;max-width:none;height:100%;padding:0;opacity:0;cursor:pointer;font-size:16px}
.rh-pub:not(.app) .head-actions .rh-lang:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
@media (max-width:1180px){.rh-pub:not(.app) .l-nav a[href="#who"],.rh-pub:not(.app) .l-nav a[href="/#who"]{display:none}}
@media (max-width:1080px){.rh-pub:not(.app) .l-nav a[href="#features"],.rh-pub:not(.app) .l-nav a[href="/#features"]{display:none}}
@media (max-width:990px){.rh-pub:not(.app) .l-nav a[href="#how"],.rh-pub:not(.app) .l-nav a[href="/#how"]{display:none}}

/* ---------- v2.0.126: menu redesign. A glass "command bar" pill with brand-gradient hover and active states ---------- */
.rh-pub:not(.app) .l-nav{gap:0;padding:4px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line2));
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 82%,transparent),color-mix(in srgb,var(--surface) 62%,transparent));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 color-mix(in srgb,#fff 10%,transparent) inset,0 6px 22px -12px color-mix(in srgb,var(--accent) 55%,transparent)}
.rh-pub:not(.app) .l-nav a{padding:7px 10px;border-radius:999px;font-weight:600;font-size:.86rem;letter-spacing:0;color:var(--muted);transition:color .15s,background-color .15s,box-shadow .2s}
.rh-pub:not(.app) .l-nav a:hover,.rh-pub:not(.app) .l-nav a:focus-visible{color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent) inset;outline:none}
.rh-pub:not(.app) .l-nav a.on{color:#fff;background:var(--rg);box-shadow:0 4px 14px -4px color-mix(in srgb,var(--accent2) 70%,transparent)}
.rh-pub:not(.app) .l-nav a.on::after{display:none}
/* Sign in and Start free: pill buttons; Start free gets the gradient, a soft glow and a slow shine */
.rh-pub:not(.app) .head-actions .btn.sm{border-radius:999px;padding:7px 14px;font-weight:700}
.rh-pub:not(.app) .head-actions .btn.sm:not(.ghost){position:relative;overflow:hidden;color:#fff;border:0;background:var(--rg);box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent2) 75%,transparent),0 0 0 1px color-mix(in srgb,#fff 14%,transparent) inset}
.rh-pub:not(.app) .head-actions .btn.sm:not(.ghost)::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:rhNavShine 5s ease-in-out infinite}
.rh-pub:not(.app) .head-actions .btn.sm:not(.ghost):hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent2) 85%,transparent)}
.rh-pub:not(.app) .head-actions .btn.ghost.sm{border-color:color-mix(in srgb,var(--accent) 35%,var(--line2))}
.rh-pub:not(.app) .head-actions .btn.ghost.sm:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
@keyframes rhNavShine{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.rh-pub:not(.app) .head-actions .btn.sm:not(.ghost)::before{animation:none;display:none}}

/* rh-skin-feed.css */
/* ReconHire skin: Home feed (#/feed), single post (#/post), Notifications, your profile and wallet (#/profile),
   member profiles (#/member), Who viewed you (#/viewers) and the Daily challenge (#/challenge).
   Same vocabulary as My Network (network-grow.css) and Jobs (jobs-home.css): mono "// kickers", Chakra Petch headings
   and numbers, the blue to violet gradient with soft glows, 18px cards with a thin gradient bar on feature cards, faint
   grid textures and hex motifs on banners, terminal-style empty states. Colors come from theme tokens so light and dark
   both work. Every rule is scoped to these pages; sidebars keep their sticky classes (sticky-rails.js), so no overflow
   rules are set on their ancestors. The election banner and vote cards are left alone on purpose. */

:root{
  --rs-g:linear-gradient(135deg,var(--accent),var(--accent2));
  --rs-gx:linear-gradient(90deg,var(--accent),var(--accent2));
  --rs-glow:0 8px 20px -10px color-mix(in srgb,var(--accent) 80%,transparent);
  --rs-r:18px;
  --rs-line:color-mix(in srgb,var(--accent) 12%,var(--line));
  --rs-grid:color-mix(in srgb,var(--accent) 7%,transparent);
  --rs-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%237c3aed' stroke-width='1.4'%3E%3Cpath d='M50 3 94 28v56L50 109 6 84V28z' opacity='.55'/%3E%3Cpath d='M50 25 75 39v34L50 87 25 73V39z' stroke='%232563eb' opacity='.6'/%3E%3Ccircle cx='50' cy='56' r='5' fill='%232563eb' stroke='none' opacity='.5'/%3E%3C/svg%3E");
  /* the deep navy banner with grid lines (same as the My Network people cards), in both themes */
  --rs-cover:
    linear-gradient(rgba(148,163,255,.14) 1px,transparent 1px) 0 0/18px 18px,
    linear-gradient(90deg,rgba(148,163,255,.14) 1px,transparent 1px) 0 0/18px 18px,
    radial-gradient(260px 120px at 88% 0%,rgba(124,58,237,.6),transparent 70%),
    radial-gradient(220px 120px at 0% 100%,rgba(37,99,235,.45),transparent 70%),
    linear-gradient(120deg,#0b1430 0%,#1e2a6b 55%,#3b1f78 100%);
}
html[data-theme="dark"]{--rs-grid:color-mix(in srgb,var(--accent) 10%,transparent);--rs-line:color-mix(in srgb,var(--accent) 14%,var(--line))}

/* ---------- shared bits ---------- */
.rh-kick{display:block;font:600 .68rem/1.25 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin:0 0 3px}
.rh-term{margin:4px 0 2px;font:600 .9rem/1.35 var(--mono);color:var(--accent2);letter-spacing:.02em}
.rh-cursor{display:inline-block;width:.5em;height:.95em;margin-left:6px;vertical-align:-.1em;border-radius:1px;background:var(--rs-g);animation:blink 1.1s steps(1) infinite;box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
@media (prefers-reduced-motion:reduce){.rh-cursor{animation:none}}
.rh-empty{display:grid;justify-items:center;gap:6px;padding:30px 18px!important;text-align:center;background:
  linear-gradient(var(--rs-grid) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,var(--rs-grid) 1px,transparent 1px) 0 0/20px 20px,var(--surface)}
.rh-empty>.ico{width:32px;height:32px;color:var(--accent2);opacity:.8;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent2) 45%,transparent))}
.rh-empty h3{margin:2px 0 0;font:600 1.05rem/1.3 var(--hfont);color:var(--text)}
.rh-empty p:not(.rh-term){margin:0;max-width:440px;color:var(--muted)}
.rh-empty .btn{margin-top:8px}

/* the pages this file covers (rails included) */
:is(.rh-feed,.n-grid,.post-solo,.mprof,.pf-page,.hb-grid,.rail-grid:has(.mprof,.pf-page,.hb-head)) .card{border-radius:var(--rs-r);border-color:var(--rs-line)}
:is(.rh-feed,.n-grid,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-side>.spread>b,
:is(.rh-feed,.n-grid,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-side>b{font:600 1rem/1.3 var(--hfont);letter-spacing:.01em;color:var(--text)}
:is(.rh-feed,.n-grid,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-side>.spread>a.dim{padding:4px 10px;margin:-4px -8px -4px 0;border-radius:999px;color:var(--accent)!important;font-weight:600;font-size:.8rem}
:is(.rh-feed,.n-grid,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-side>.spread>a.dim:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);text-decoration:none}
:is(.rh-feed,.n-grid,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-side>.rh-kick{margin-bottom:-6px}

/* feature cards: a thin gradient bar on top (drawn with its own radius, so cards with pop-up menus stay overflow visible) */
.rh-feed .f-compose::before,.rh-feed .f-jobs::before,.rh-feed .hb-card::before,.rh-feed .cm-congrats::before,.rh-feed .cm-offer::before,.rh-feed .eg-picks::before,
.n-grid .n-filters::before,.pf-page .pf-nudge::before,.pf-page .wl-share::before,.hb-grid .hb-qcard::before,.rail-grid:has(.pf-page) .hb-side::before,.mprof .hb-mstreak::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rs-gx);opacity:.9;pointer-events:none}
.rh-feed .f-compose,.rh-feed .f-jobs,.rh-feed .hb-card,.rh-feed .cm-congrats,.rh-feed .cm-offer,.rh-feed .eg-picks,.rh-feed .eg-card,
.n-grid .n-filters,.pf-page .pf-nudge,.pf-page .wl-share,.hb-grid .hb-qcard,.rail-grid:has(.pf-page) .hb-side,.mprof .hb-mstreak{overflow:hidden}

/* gradient primary pills, ghost pills */
.rh-feed .f-c-bar .row>.btn.sm,.rh-feed .f-person .btn.sm:not(.ghost),.rh-feed .eg-steps li.next .btn.sm,.rh-feed .cm-cg-b .btn,.rh-feed .cm-offer .btn:not(.ghost),.rh-feed .hb-ch .btn,
.rail-grid:has(.mprof,.pf-page,.hb-head) .f-person .btn.sm:not(.ghost),.mprof .mp-act .btn:not(.ghost):not(.danger),.pf-page .pf-acts .btn.pf-otw,.pf-page .wl-sec-h .btn.sm:not(.ghost),.pf-page .wl-share-row .btn,
.post-solo .f-c-in .btn.sm,.mprof .f-c-in .btn.sm,.rh-feed .f-c-in .btn.sm,.n-grid .rh-empty .btn,.hb-grid .hb-qcard .btn,.rail-main .hb-lock .btn,.rail-main .rh-empty .btn{
  border:0;border-radius:999px;color:var(--on-accent,#fff);background:var(--rs-g);box-shadow:var(--rs-glow)}
.rh-feed .f-c-bar .row>.btn.sm:hover,.rh-feed .f-person .btn.sm:not(.ghost):hover,.mprof .mp-act .btn:not(.ghost):not(.danger):hover,.pf-page .pf-acts .btn.pf-otw:hover{filter:brightness(1.08);box-shadow:0 10px 24px -10px color-mix(in srgb,var(--accent2) 85%,transparent)}
.rh-feed .btn.ghost,.n-grid .btn.ghost,.post-solo .btn.ghost,.mprof>:not(.staff-panel) .btn.ghost,.pf-page .btn.ghost,.rail-grid:has(.mprof,.pf-page,.hb-head) .side-rail .btn.ghost,.hb-grid .btn.ghost,.rail-main .hb-priv .btn.ghost{
  border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--text);box-shadow:none}
.rh-feed .btn.ghost:hover,.n-grid .btn.ghost:hover,.post-solo .btn.ghost:hover,.mprof>:not(.staff-panel) .btn.ghost:hover,.pf-page .btn.ghost:hover,.rail-grid:has(.mprof,.pf-page,.hb-head) .side-rail .btn.ghost:hover,.hb-grid .btn.ghost:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.rh-feed .btn.quiet,.post-solo .btn.quiet,.mprof>:not(.staff-panel) .btn.quiet,.pf-page .btn.quiet,.post-back{border-radius:999px}

/* ======================================================================
   HOME: left column
   ====================================================================== */
:is(.rh-feed,.n-grid) .f-me{padding:0 0 12px;border-radius:var(--rs-r);overflow:visible}
:is(.rh-feed,.n-grid) .f-me .f-me-cover{position:relative;height:78px;border-radius:var(--rs-r) var(--rs-r) 0 0;background:var(--rs-cover)}
:is(.rh-feed,.n-grid) .f-me .f-me-cover::after{content:"";position:absolute;right:10px;top:8px;width:30px;height:34px;opacity:.6;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%23a5b4fc' stroke-width='7'%3E%3Cpath d='M50 6 90 29v54L50 106 10 83V29z'/%3E%3C/svg%3E") center/contain no-repeat}
:is(.rh-feed,.n-grid) .f-me .f-me-av{position:relative;margin:-50px auto 10px;padding:3px;border-radius:50%;line-height:0;background:var(--rs-g);box-shadow:0 8px 22px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.n-grid .n-me .f-me-av{margin-left:14px}
:is(.rh-feed,.n-grid) .f-me .f-me-av .nav-av{box-shadow:0 0 0 3px var(--surface)!important}
:is(.rh-feed,.n-grid) .f-me .nm{font:700 1.08rem/1.3 var(--hfont);letter-spacing:.01em;color:var(--text)}
:is(.rh-feed,.n-grid) .f-me a:hover .nm{color:var(--accent)}
.rh-feed .f-me-stats{gap:2px;margin:12px 10px 0;padding:8px 0 0;border-top:1px dashed var(--line2)}
.rh-feed .f-me-stats a{align-items:center;padding:7px 8px;border-radius:10px;font:600 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rh-feed .f-me-stats a:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}
.rh-feed .f-me-stats b,.rh-feed .act-row b{font:700 1rem/1 var(--hfont);background:var(--rs-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.rh-feed .f-me-cta{margin:8px 10px 2px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent2) 9%,transparent))}
.rh-feed .f-me-cta .ico{color:var(--accent2)}
.rh-feed .f-me-cta b{font-family:var(--hfont)}
.rh-feed .f-me-cta:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.rh-feed .f-me-ok{color:var(--accent)}
.rh-feed .f-me-link{width:max-content;margin:10px auto 0;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rh-feed .f-me-link:hover{color:var(--accent)!important;text-decoration:none}
.rh-feed .f-me-link .ico{color:var(--accent)}

/* Your week / Happening on ReconHire */
.rh-feed .act-card{gap:2px;margin-top:0}
.rh-feed .act-card>b{margin-bottom:6px}
.rh-feed .act-card>.rh-kick{margin-bottom:0}
.rh-feed .act-row{padding:7px 8px;margin:0 -8px;border-radius:10px}
.rh-feed .act-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.rh-feed .act-grid{gap:6px}
.rh-feed .act-grid div{padding:9px 4px;border-radius:12px;border:1px solid var(--rs-line);background:linear-gradient(var(--rs-grid) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,var(--rs-grid) 1px,transparent 1px) 0 0/12px 12px,var(--surface2)}
.rh-feed .act-grid b,.rh-feed .net-stats .ns-grid b{background:var(--rs-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.rh-feed .act-grid small{font:600 .56rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.rh-feed .act-sub{font-family:var(--mono);font-size:.62rem!important;color:var(--accent2)!important;letter-spacing:.14em}
.rh-feed .act-prem{border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent2) 10%,transparent))}
.rh-feed .act-person{padding:6px 8px;margin:0 -8px;border-radius:10px}
.rh-feed .act-person:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* streak and daily challenge card */
.rh-feed .hb-card{padding:16px}
.rh-feed .hb-card>.rh-kick{margin-bottom:-4px}
.rh-feed .hb-flame-wrap{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0}
.rh-feed .hb-sec>.spread>b{font:600 .95rem var(--hfont)}
.rh-feed .hb-sec .spread a.dim{color:var(--accent)!important;font-weight:600}
:is(.rh-feed,.hb-grid) .hb-ch-head .chip.amber{font:700 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 11%,transparent);border-radius:999px;padding:5px 9px}
:is(.rh-feed,.hb-grid) .hb-choice{border-radius:12px;transition:border-color .15s,background .15s,transform .15s}
:is(.rh-feed,.hb-grid) .hb-choice:hover:not(:disabled){transform:translateX(2px);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
:is(.rh-feed,.hb-grid) .hb-letter{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;width:26px;height:28px;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
:is(.rh-feed,.hb-grid) .hb-choice.picked{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 8%,var(--surface))}
:is(.rh-feed,.hb-grid) .hb-result{border-radius:12px}

/* ======================================================================
   HOME: getting started, jobs picked for you, community cards
   ====================================================================== */
.rh-feed .eg-card,.rh-feed .eg-picks{padding:16px 18px}
.rh-feed .eg-ico{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;width:42px;height:46px;color:var(--on-accent,#fff);background:var(--rs-g)}
.rh-feed .eg-ico.alt{color:var(--on-accent,#fff);background:linear-gradient(135deg,var(--good),color-mix(in srgb,var(--good) 50%,var(--accent)))}
.rh-feed .eg-ttl .kicker{font-size:.66rem;letter-spacing:.14em}
.rh-feed .eg-ttl h3{font-family:var(--hfont);font-weight:600;font-size:1.08rem;letter-spacing:.01em}
.rh-feed .eg-ttl small{font-family:var(--mono);font-size:.72rem}
.rh-feed .eg-bar{height:6px;box-shadow:inset 0 0 0 1px var(--line)}
.rh-feed .eg-bar i{box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-feed .eg-steps li.next{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent2) 5%,transparent));box-shadow:inset 3px 0 0 var(--accent)}
.rh-feed .eg-n{font-family:var(--hfont)}
.rh-feed li.next .eg-n{color:var(--on-accent,#fff);background:var(--rs-g);box-shadow:0 0 10px -2px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-feed .eg-t b{font-family:var(--hfont);font-weight:600}
.rh-feed .eg-steps .btn.sm{border-radius:999px}
.rh-feed .eg-foot{border-top-style:dashed}
.rh-feed .eg-job{border-radius:14px}
.rh-feed .eg-job:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.rh-feed .eg-job-t b{font-family:var(--hfont);font-weight:600}
.rh-feed .eg-job .btn.sm{border-radius:999px}
.rh-feed .eg-more{border-top-style:dashed}

/* community: pinned weekly thread, congrats, offer */
.rh-feed .cm-pinned{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.rh-feed .cm-pin{font:700 .66rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
.rh-feed .cm-pin .dim{text-transform:none;letter-spacing:0;font-family:var(--font);font-weight:500}
.rh-feed .cm-congrats,.rh-feed .cm-offer{padding:16px 18px}
.rh-feed .cm-cg-h b{font:600 1rem var(--hfont)}
.rh-feed .cm-cg-h .ico{color:var(--accent2)}
.rh-feed .cm-cg{border-top:1px dashed var(--line2)}
.rh-feed .cm-offer b{font-family:var(--hfont);font-size:1.02rem}

/* ======================================================================
   HOME: composer, feed tabs
   ====================================================================== */
.rh-feed .f-compose{padding:16px 16px 14px}
.rh-feed .f-c-top>.nav-av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}
.rh-feed .f-text{border-radius:14px;background:var(--surface2);border-color:var(--line)}
.rh-feed .f-text:focus{background:var(--surface);border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.rh-feed .f-text::placeholder{color:var(--dim)}
.rh-feed .f-c-bar{padding-top:10px;border-top:1px dashed var(--line2)}
.rh-feed .f-kinds .chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font:600 .8rem var(--font);cursor:pointer;transition:all .15s}
.rh-feed .f-kinds .chip .ico{width:14px;height:14px;color:var(--accent)}
.rh-feed .f-kinds .chip:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.rh-feed .f-kinds .chip.on{color:var(--on-accent,#fff);border-color:transparent;background:var(--rs-g);box-shadow:var(--rs-glow)}
.rh-feed .f-kinds .chip.on .ico{color:inherit}
.rh-feed .f-media-btns .icon-btn,.rh-feed .f-c-bar .icon-btn{border-radius:50%;border-color:transparent;background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--accent)}
.rh-feed .f-media-btns .icon-btn:hover,.rh-feed .f-c-bar .icon-btn:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.rh-feed .f-c-bar select.input{border-radius:999px}
.rh-feed .f-c-bar .row>.btn.sm{padding:7px 20px}

.rh-feed .f-tabs{align-items:center;padding:0 2px}
.rh-feed .f-seg{gap:6px;padding:0;background:none;border:0}
.rh-feed .f-seg button{padding:7px 16px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font:600 .86rem var(--font);box-shadow:none}
.rh-feed .f-seg button:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.rh-feed .f-seg button.on{color:var(--on-accent,#fff);border-color:transparent;background:var(--rs-g);box-shadow:var(--rs-glow)}
.rh-feed .f-tabs>small{font:600 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.rh-feed .f-newposts{background:var(--rs-g);color:var(--on-accent,#fff);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.rh-feed .f-more{display:flex;margin:4px auto 0;border-radius:999px;padding:9px 22px}
.rh-feed .f-skel,.post-solo .f-skel{position:relative;display:grid;place-items:center;gap:6px;background:linear-gradient(var(--rs-grid) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,var(--rs-grid) 1px,transparent 1px) 0 0/20px 20px,var(--surface)}
.rh-feed .f-skel::after{content:"> syncing your feed_";font:600 .82rem var(--mono);color:var(--accent2)}

/* ======================================================================
   POST CARDS (Home, single post, member activity) and comments
   ====================================================================== */
:is(.rh-feed,.post-solo,.mprof) .f-post{padding:16px 18px 10px;border-radius:var(--rs-r);border-color:var(--rs-line);transition:border-color .2s,box-shadow .2s}
:is(.rh-feed,.post-solo) .f-post:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
:is(.rh-feed,.post-solo,.mprof) .f-p-head>.nav-av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--accent) 32%,transparent)}
:is(.rh-feed,.post-solo,.mprof) .f-p-head .nm{font:600 1rem/1.3 var(--hfont);letter-spacing:.01em;color:var(--text)}
:is(.rh-feed,.post-solo,.mprof) .f-p-head .nm-link:hover .nm{color:var(--accent)}
:is(.rh-feed,.post-solo,.mprof) .f-p-head small.dim{font-family:var(--mono);font-size:.7rem;letter-spacing:.02em}
:is(.rh-feed,.post-solo,.mprof) .f-kind{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font:700 .6rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 11%,transparent);border:0}
:is(.rh-feed,.post-solo,.mprof) .f-kind .ico{width:11px;height:11px}
:is(.rh-feed,.post-solo,.mprof) .f-p-body{font-size:.95rem}
:is(.rh-feed,.post-solo,.mprof) .f-p-link{position:relative;padding:11px 14px 11px 16px;border-radius:14px;border-color:var(--line);background:var(--surface2)}
:is(.rh-feed,.post-solo,.mprof) .f-p-link::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--rs-g)}
:is(.rh-feed,.post-solo,.mprof) .f-p-link .ico{color:var(--accent)}
:is(.rh-feed,.post-solo,.mprof) .f-p-link b{font-family:var(--hfont)}
:is(.rh-feed,.post-solo,.mprof) .f-p-link small{font-family:var(--mono);font-size:.7rem}
:is(.rh-feed,.post-solo,.mprof) .pg,:is(.rh-feed,.post-solo,.mprof) .f-video,:is(.rh-feed,.post-solo,.mprof) .f-yt{border-radius:14px}
:is(.rh-feed,.post-solo,.mprof) .f-acts{gap:6px;margin-top:12px;padding-top:8px;border-top:1px dashed var(--line2)}
:is(.rh-feed,.post-solo,.mprof) .f-act{border-radius:999px;font-weight:600;transition:background .15s,color .15s}
:is(.rh-feed,.post-solo,.mprof) .f-act:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent)}
:is(.rh-feed,.post-solo,.mprof) .f-act span{font-family:var(--font)}
:is(.rh-feed,.post-solo,.mprof) .f-act.on{color:var(--accent2);background:color-mix(in srgb,var(--accent2) 10%,transparent)}
:is(.rh-feed,.post-solo,.mprof) .f-act.on .ico{fill:currentColor;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent2) 60%,transparent))}
:is(.rh-feed,.post-solo,.mprof) .f-comments{padding-top:10px;border-top:1px dashed var(--line2)}
:is(.rh-feed,.post-solo,.mprof) .f-c-in .input{border-radius:999px;background:var(--surface2)}
:is(.rh-feed,.post-solo,.mprof) .f-c-in .input:focus{background:var(--surface)}
:is(.rh-feed,.post-solo,.mprof) .f-cm-b{border-radius:4px 16px 16px 16px;background:var(--surface2);border:1px solid var(--line)}
:is(.rh-feed,.post-solo,.mprof) .f-cm-b .nm{font:600 .9rem var(--hfont)}
:is(.rh-feed,.post-solo,.mprof) .f-cm-acts small{font-family:var(--mono);font-size:.7rem}
:is(.rh-feed,.post-solo,.mprof) .f-cm-reply{color:var(--accent)}
:is(.rh-feed,.post-solo,.mprof) .f-replies{border-left:2px solid color-mix(in srgb,var(--accent) 22%,transparent)}
:is(.rh-feed,.post-solo,.mprof) .f-cm-hl .f-cm-b{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.post-solo{max-width:700px}
.post-back{margin-left:max(0px,calc((100% - 700px) / 2))}

/* ======================================================================
   HOME: right rail (job picks, people, trending, suggested groups, skill gaps, events)
   ====================================================================== */
.rh-feed .f-job{padding:8px;margin:0 -8px;border-radius:12px}
.rh-feed .f-job:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.rh-feed .f-job b{font:600 .9rem/1.3 var(--hfont)}
.rh-feed .f-job small{font-family:var(--mono);font-size:.7rem}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-ppl .f-person{padding:8px 0;border-top:1px dashed var(--line2)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-ppl .spread+.f-person{border-top:0}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-person>.nav-av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-person .nm{font:600 .92rem var(--hfont)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .f-person .btn.sm{border-radius:999px;padding:5px 14px}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head),.n-grid) .trend>b::before{content:"// hot this week";display:block;margin-bottom:3px;font:600 .68rem/1.25 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head),.n-grid) .net-stats>b::before{content:"// live counters";display:block;margin-bottom:3px;font:600 .68rem/1.25 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .trend{counter-reset:tr}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .trend-item{position:relative;padding:8px 8px 8px 36px;border-radius:12px;counter-increment:tr}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .trend-item::before{content:counter(tr,decimal-leading-zero);position:absolute;left:8px;top:9px;font:700 .8rem/1 var(--hfont);background:var(--rs-g);-webkit-background-clip:text;background-clip:text;color:transparent}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .trend-item:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head)) .trend-item small{font-family:var(--mono);font-size:.66rem}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head),.n-grid) .net-stats .ns-grid div{padding:8px 2px;border-radius:12px;border:1px solid var(--rs-line);background:var(--surface2)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head),.n-grid) .net-stats .ns-grid small{font:600 .56rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head),.n-grid) .tip-card{background:linear-gradient(var(--rs-grid) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--rs-grid) 1px,transparent 1px) 0 0/16px 16px,var(--surface)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head),.n-grid) .tip-card .ad-label{color:var(--accent2)}
:is(.rh-feed,.rail-grid:has(.mprof,.pf-page,.hb-head),.n-grid) .tip-card p{margin:0;font-size:.88rem}
.rh-feed .cm-sugg .cm-sname{font-family:var(--hfont);font-weight:600}
.rh-feed .cm-sugg .btn.sm{border-radius:999px}
.rh-feed .cm-hgap-s{font:600 .82rem var(--hfont)}
.rh-feed .cm-hgap a{font-family:var(--mono);font-size:.72rem}

/* ======================================================================
   NOTIFICATIONS
   ====================================================================== */
.n-grid .n-filters{display:grid;gap:12px;padding:18px 18px 14px;margin-bottom:0;overflow:hidden;background:
  linear-gradient(var(--rs-grid) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,var(--rs-grid) 1px,transparent 1px) 0 0/22px 22px,
  radial-gradient(360px 160px at 100% 0%,color-mix(in srgb,var(--accent2) 15%,transparent),transparent 70%),var(--surface)}
.n-grid .n-filters::after{content:"";position:absolute;right:-18px;top:-22px;width:120px;height:136px;opacity:.45;pointer-events:none;background:var(--rs-hex) center/contain no-repeat}
.n-grid .n-head{position:relative;z-index:1}
.n-grid .n-head h2{margin:0;font:700 1.4rem/1.15 var(--hfont);letter-spacing:.01em}
.n-grid .n-pills{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
.n-grid .n-chip{background:var(--surface);color:var(--muted);transition:all .15s}
.n-grid .n-chip:hover{color:var(--text)}
.n-grid .n-chip.on{color:var(--on-accent,#fff);background:var(--rs-g);box-shadow:var(--rs-glow)}
.n-grid .n-list{border-radius:var(--rs-r)}
.n-grid .n-list>.spin{margin:30px auto}
.n-grid .n-item{grid-template-columns:4px 46px minmax(0,1fr) auto;padding:14px 16px 14px 10px;border-bottom:1px dashed var(--line2)}
.n-grid .n-item:first-child{border-radius:var(--rs-r) var(--rs-r) 0 0}
.n-grid .n-item:last-child{border-radius:0 0 var(--rs-r) var(--rs-r)}
.n-grid .n-item:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.n-grid .n-item.unread{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent2) 3%,transparent))}
.n-grid .n-dot{width:3px;height:auto;align-self:stretch;margin:2px 0;border-radius:3px}
.n-grid .n-item.unread .n-dot{background:var(--rs-g);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
.n-grid .n-ic{width:44px;height:48px;border:0;border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.n-grid .n-item.unread .n-ic{color:var(--on-accent,#fff);background:var(--rs-g)}
.n-grid .n-text{font-size:.93rem}
.n-grid .n-item.unread .n-text{color:var(--text)}
.n-grid .n-item .n-act.btn{border-radius:999px;box-shadow:none;border:0;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-weight:600}
.n-grid .n-item .n-act.btn:hover{background:var(--rs-g);color:var(--on-accent,#fff)}
.n-grid .n-side time{font:600 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
.n-grid .n-menu{border-radius:14px}
.n-grid .n-manage{border-radius:var(--rs-r)}
.n-grid .n-manage b{font-family:var(--hfont)}
.n-grid .n-manage .ico{display:grid;width:30px;height:30px;padding:7px;box-sizing:border-box;border-radius:50%;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.n-grid .n-me>a{padding:0 14px}
.n-grid .n-me .hl{padding:0 14px}
.n-grid .n-me>small{display:block;padding:2px 14px 0;font-family:var(--mono);font-size:.7rem}

/* ======================================================================
   YOUR PROFILE AND WALLET (#/profile)
   ====================================================================== */
.pf-page .pf-tabs .seg{gap:4px;padding:4px;border-radius:999px;border:1px solid var(--rs-line);background:var(--surface)}
.pf-page .pf-tabs .seg button{border-radius:999px;padding:7px 16px;font-weight:600;color:var(--muted);box-shadow:none;background:none}
.pf-page .pf-tabs .seg button.on{color:var(--on-accent,#fff);background:var(--rs-g);box-shadow:var(--rs-glow)}
.pf-page .pf-hero{border-radius:var(--rs-r)}
.pf-page .pf-hero>.pf-cover{border-radius:var(--rs-r) var(--rs-r) 0 0}
.pf-page .pf-hero .pf-cover:not(:has(img)){background:var(--rs-cover)}
.pf-page .pf-hero .pf-cover:not(:has(img))::after{content:"";position:absolute;right:70px;top:18px;width:120px;height:136px;opacity:.55;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%23a5b4fc' stroke-width='1.6'%3E%3Cpath d='M50 3 94 28v56L50 109 6 84V28z'/%3E%3Cpath d='M50 25 75 39v34L50 87 25 73V39z' opacity='.7'/%3E%3Ccircle cx='50' cy='56' r='5' fill='%23a5b4fc' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat}
.pf-page .pf-edit{background:rgba(8,12,30,.55);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px)}
.pf-page .pf-top .pf-edit{background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);border:1px solid var(--rs-line)}
.pf-page .pf-photo .wl-photo{padding:4px;background:var(--rs-g);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
.pf-page .pf-photo .wl-photo>.pfp{box-shadow:0 0 0 4px var(--surface)}
.pf-page .pf-id>.rh-kick{margin-top:4px}
.pf-page .pf-id h1{font:700 1.75rem/1.2 var(--hfont);letter-spacing:.01em}
.pf-page .pf-loc{font-size:.88rem}
.pf-page .pf-conn a{font-family:var(--hfont)}
.pf-page .pf-conn .dim{font-family:var(--mono);font-size:.74rem}
.pf-page .pf-org-ic{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;width:32px;height:36px;color:var(--on-accent,#fff);background:var(--rs-g)}
.pf-page .pf-orgs b{font-family:var(--hfont);font-weight:600}
.pf-page .pf-acts{padding-top:16px;margin:12px 24px 0;padding-left:0;padding-right:0;border-top:1px dashed var(--line2)}
.pf-page .pf-acts .btn{border-radius:999px}
.pf-page .pf-acts .btn.pf-otw{padding:8px 18px}
.pf-page .pf-acts .btn.quiet{color:var(--muted)}
.pf-page .pf-acts .btn.quiet:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pf-page .wl-link{border-radius:999px;border:1px solid var(--line2);background:var(--surface2);color:var(--text);font-weight:600}
.pf-page .wl-link .ico{color:var(--accent)}
.pf-page .wl-link:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);text-decoration:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.pf-page .pf-nudge{padding:18px 44px 14px 16px}
.pf-page .pf-nudge b{font:600 .98rem var(--hfont)}
.pf-page .pf-nudge a,.pf-page .pf-nudge .linkish{display:inline-flex;align-items:center;gap:4px;color:var(--accent)}
.pf-page .pf-nudge a::after,.pf-page .pf-nudge .linkish::after{content:"->";font-family:var(--mono);font-size:.8rem}
.pf-page .wl-about h3,.pf-page .wl-share h3{font-family:var(--hfont);font-weight:600;letter-spacing:.01em}
.pf-page .wl-share{padding:18px}
.pf-page .wl-share h3 .ico{color:var(--accent)}
.pf-page .wl-prefix{font-family:var(--mono)}
.pf-page .wl-sec-h h3{display:flex;align-items:center;gap:10px;font:600 1.15rem/1.3 var(--hfont);letter-spacing:.01em}
.pf-page .wl-sec-h h3 .ico{box-sizing:content-box;width:16px;height:16px;padding:7px;color:var(--on-accent,#fff);background:var(--rs-g);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.pf-page .wl-sec-h .chip{font:700 .64rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 10%,transparent);border-radius:999px}
.pf-page .wl-sec-h .btn.sm{border-radius:999px}
.pf-page .wl-note{font-size:.84rem}
.pf-page .wl-badge{border-radius:16px;border:1px solid var(--rs-line);background:var(--surface);transition:transform .15s,border-color .15s,box-shadow .15s}
.pf-page .wl-badge:not(.locked):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 12px 26px -16px color-mix(in srgb,var(--accent) 70%,transparent)}
.pf-page .wl-badge b{font-family:var(--hfont);font-weight:600}
.pf-page .wl-badge:not(.locked) .wl-badge-ico{border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);color:var(--on-accent,#fff);background:var(--rs-g)}
.pf-page .wl-badge.locked{border-style:dashed;background:transparent}
.pf-page .wl-cert{border-radius:16px}
.pf-page .wl-cert-name{font-family:var(--hfont)}
.pf-page .wl-issuer{font-family:var(--mono)}
.pf-page .wl-item{border-radius:16px;border-color:var(--rs-line)}
.pf-page .wl-item b{font-family:var(--hfont)}
.pf-page .wl-item-ico{border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);color:var(--on-accent,#fff);background:var(--rs-g)}
.pf-page .wl-item-top small{font-family:var(--mono);letter-spacing:.04em}
.pf-page .wl-empty{border-radius:var(--rs-r);border:1px dashed color-mix(in srgb,var(--accent) 30%,var(--line2));background:
  linear-gradient(var(--rs-grid) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,var(--rs-grid) 1px,transparent 1px) 0 0/20px 20px,var(--surface)}
.pf-page .wl-empty>.ico{color:var(--accent2);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent2) 45%,transparent))}
.pf-page .wl-empty b{font-family:var(--hfont)}
.pf-page .wl-empty b::before{content:"> ";font-family:var(--mono);color:var(--accent2)}
.pf-page .wl-loading{display:flex;align-items:center;gap:10px;padding:24px;font:600 .86rem var(--mono);color:var(--accent2)}
/* side column: public URL, strength, streak */
.rail-grid:has(.pf-page) .pf-side{gap:8px}
.rail-grid:has(.pf-page) .pf-side .spread>b,.rail-grid:has(.pf-page) .wl-strength b{font-family:var(--hfont);font-weight:600}
.rail-grid:has(.pf-page) .pf-side small.dim{font-family:var(--mono);font-size:.72rem}
.rail-grid:has(.pf-page) .pf-side>.spread:not(:first-child):not(.pf-lang) b{font:700 1rem var(--hfont);background:var(--rs-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.rail-grid:has(.pf-page) .wl-ring>div b{font-family:var(--hfont)}
.rail-grid:has(.pf-page) .wl-ring>div small{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase}
:is(.rail-grid:has(.pf-page),.mprof) .hb-flame-wrap{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0}
.rail-grid:has(.pf-page) .hb-side>.rh-kick{margin-bottom:-4px}
.rail-grid:has(.pf-page) .hb-side .act-row b,.rail-grid:has(.hb-head) .act-row b{font:700 .95rem var(--hfont);background:var(--rs-g);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ======================================================================
   MEMBER PROFILE (#/member)
   ====================================================================== */
.mprof .mp-head{border-radius:var(--rs-r)}
.mprof .mp-head>.mp-cover{position:relative;border-radius:var(--rs-r) var(--rs-r) 0 0}
.mprof .mp-head>.mp-cover:not(:has(img)){background:var(--rs-cover)}
.mprof .mp-head>.mp-cover:not(:has(img))::after{content:"";position:absolute;right:40px;top:12px;width:90px;height:102px;opacity:.55;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%23a5b4fc' stroke-width='1.6'%3E%3Cpath d='M50 3 94 28v56L50 109 6 84V28z'/%3E%3Cpath d='M50 25 75 39v34L50 87 25 73V39z' opacity='.7'/%3E%3C/svg%3E") center/contain no-repeat}
.mprof .mp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mprof .mp-av{padding:4px;border-radius:50%;line-height:0;background:var(--rs-g);box-shadow:0 10px 28px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
.mprof .mp-av .nav-av{box-shadow:0 0 0 4px var(--surface)!important}
.mprof .mp-main>.rh-kick{margin-top:2px}
.mprof .mp-main h1{font:700 1.6rem/1.2 var(--hfont);letter-spacing:.01em}
.mprof .mp-main>p.dim{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em}
.mprof .pf-org-ic{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;width:32px;height:36px;color:var(--on-accent,#fff);background:var(--rs-g)}
.mprof .mp-main .chips .chip{border-radius:999px}
.mprof .mp-main .chip.have{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent)}
.mprof .mp-links .chip{border:1px solid var(--line2);background:var(--surface2);font-weight:600}
.mprof .mp-links .chip .ico{color:var(--accent)}
.mprof .mp-links .chip:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.mprof .mp-act .btn{border-radius:999px}
.mprof>.card:not(.mp-head):not(.staff-panel)>h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:600 1.1rem/1.3 var(--hfont);letter-spacing:.01em}
.mprof>.card:not(.mp-head):not(.staff-panel)>h3::before{content:"//";font:700 .8rem var(--mono);color:var(--accent2)}
.mprof>.card:not(.mp-head):not(.staff-panel){padding:18px 20px}
.mprof .mp-cert{border-radius:14px;border:1px solid var(--rs-line);background:var(--surface2)}
.mprof .mp-cert:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);text-decoration:none}
.mprof .mp-cert b{font-family:var(--hfont)}
.mprof .mp-item{padding:12px 0 12px 14px;border-left:2px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.mprof .mp-item b{font-family:var(--hfont)}
.mprof .mp-activity{display:grid;gap:12px}
.mprof .mp-activity>h3{margin-bottom:0!important}
.mprof .mp-activity .f-post{box-shadow:none;background:var(--surface2)}
.mprof .hb-mstreak{padding:16px 18px;margin-bottom:0}
.mprof .rh-empty,.mprof .card.empty{border-radius:var(--rs-r)}

/* ======================================================================
   WHO VIEWED YOU (#/viewers) and DAILY CHALLENGE (#/challenge)
   ====================================================================== */
.hb-head{position:relative;overflow:hidden;padding:20px 22px 18px;border-radius:var(--rs-r);border:1px solid var(--rs-line);background:
  linear-gradient(var(--rs-grid) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,var(--rs-grid) 1px,transparent 1px) 0 0/22px 22px,
  radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),
  radial-gradient(380px 200px at 0% 100%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--surface)}
.hb-head::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rs-gx)}
.hb-head::after{content:"";position:absolute;right:-24px;top:-28px;width:160px;height:180px;opacity:.5;pointer-events:none;background:var(--rs-hex) center/contain no-repeat}
.hb-head>div{position:relative;z-index:1}
.hb-head .kicker{margin-bottom:4px;font-size:.7rem;letter-spacing:.14em}
.hb-head h1{font:700 clamp(1.35rem,2.6vw,1.7rem)/1.15 var(--hfont)!important;letter-spacing:.01em}
.hb-head p{margin:6px 0 0;color:var(--muted);max-width:560px}
html[data-theme="dark"] .hb-head::after{opacity:.8}

.rail-main .hb-vstats{gap:10px}
.rail-main .hb-vstats .stat{border-radius:16px;border-color:var(--rs-line);background:linear-gradient(var(--rs-grid) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,var(--rs-grid) 1px,transparent 1px) 0 0/16px 16px,var(--surface)}
.rail-main .hb-vstats .stat b{font:700 1.6rem/1.1 var(--hfont);background:var(--rs-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.rail-main .hb-vstats .stat>span{font:600 .62rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rail-main .hb-vstats .stat small{display:block;margin-top:4px;font-size:.76rem}
.rail-main .hb-vlist,.rail-main .hb-priv{border-radius:var(--rs-r);border-color:var(--rs-line)}
.rail-main .hb-vlist>h3{display:flex;align-items:center;gap:8px;font:600 1.08rem var(--hfont)}
.rail-main .hb-vlist>h3::before{content:"//";font:700 .8rem var(--mono);color:var(--accent2)}
.rail-main .hb-vrow{border-radius:12px;border-top:1px dashed var(--line2)}
.rail-main .hb-vrow:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);text-decoration:none}
.rail-main .hb-vrow>.nav-av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
.rail-main .hb-vrow b{font-family:var(--hfont)}
.rail-main .hb-vrow>small.dim{font-family:var(--mono);font-size:.7rem}
.rail-main .hb-anon{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 12%,transparent)}
.rail-main .hb-lock{border-radius:14px;border:1px dashed color-mix(in srgb,var(--accent) 35%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,transparent),color-mix(in srgb,var(--accent2) 8%,transparent))}
.rail-main .hb-lock b,.rail-main .hb-priv b{font-family:var(--hfont)}
.rail-main .hb-lock>.ico{color:var(--accent2)}
.rail-main .hb-empty{border:0}

.hb-grid .card h3{font:600 1.1rem/1.3 var(--hfont);letter-spacing:.01em}
.hb-grid .hb-qcard{background:linear-gradient(var(--rs-grid) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,var(--rs-grid) 1px,transparent 1px) 0 0/22px 22px,radial-gradient(360px 180px at 100% 0%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 70%),var(--surface)}
.hb-grid .hb-qcard>h3::before{content:"// ";font:700 .8rem var(--mono);color:var(--accent2)}
.hb-grid .hb-qcard .hb-q{font-family:var(--hfont);font-weight:600;font-size:1.15rem}
.hb-grid .hb-tiles div{border-radius:14px;border-color:var(--rs-line)}
.hb-grid .hb-tiles b{background:var(--rs-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-grid .hb-tiles small{font:600 .6rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.hb-grid .hb-rule-list li::marker{color:var(--accent2)}
.hb-grid .hb-lb li{border-radius:12px}
.hb-grid .hb-lb li.me{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent2) 5%,transparent));box-shadow:inset 3px 0 0 var(--accent)}
.hb-grid .hb-rank{font-family:var(--hfont)}
.hb-grid .hb-lb-p{font-family:var(--hfont);background:var(--rs-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb-grid .hb-board .spread small{font:600 .64rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.hb-grid .hb-past-l b{font-family:var(--hfont)}

/* election season: avatars keep the theme's own ring, so the gradient rings step aside */
html[data-el]:not([data-el-int="subtle"]) :is(.rh-feed,.n-grid) .f-me .f-me-av,html[data-el]:not([data-el-int="subtle"]) .mprof .mp-av,html[data-el]:not([data-el-int="subtle"]) .pf-page .pf-photo .wl-photo{padding:0;background:none}

/* ---------- dark mode ---------- */
html[data-theme="dark"] .rh-feed .f-kinds .chip:not(.on),html[data-theme="dark"] .rh-feed .f-seg button:not(.on),html[data-theme="dark"] .n-grid .n-chip:not(.on){background:var(--surface2)}
html[data-theme="dark"] :is(.rh-feed,.post-solo,.mprof) .f-post{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface2) 45%,var(--surface)))}
html[data-theme="dark"] :is(.rh-feed,.post-solo,.mprof) .f-cm-b{background:var(--raise)}
html[data-theme="dark"] .rh-feed .f-text{background:var(--surface2)}
html[data-theme="dark"] .rh-feed .f-text:focus{background:var(--raise)}
html[data-theme="dark"] .pf-page .wl-badge{background:var(--surface)}
html[data-theme="dark"] .pf-page .wl-badge.locked{background:transparent}
html[data-theme="dark"] .mprof .mp-activity .f-post{background:var(--surface2)}
html[data-theme="dark"] :is(.rh-feed,.n-grid,.post-solo,.mprof,.pf-page,.hb-grid,.rail-grid:has(.mprof,.pf-page,.hb-head)) .card{box-shadow:0 1px 2px rgba(0,0,0,.5),0 14px 30px -18px rgba(0,0,0,.9)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .rh-feed{grid-template-columns:minmax(0,1fr)}
  .rh-feed .f-mid{gap:12px;grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .rh-feed .f-compose{padding:14px 12px 12px}
  .rh-feed .f-c-bar{gap:8px}
  .rh-feed .f-kinds{flex:1 1 100%;min-width:0;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px}
  .rh-feed .f-kinds::-webkit-scrollbar{display:none}
  .rh-feed .f-kinds .chip{flex:none}
  .rh-feed .f-c-bar>.row{width:100%;max-width:100%;min-width:0;flex-wrap:wrap;gap:6px;justify-content:flex-end}
  .rh-feed .f-c-bar>.f-kinds{width:100%;max-width:100%}
  :is(.rh-feed,.post-solo,.mprof) .f-post{padding:14px 12px 8px}
  :is(.rh-feed,.post-solo,.mprof) .f-act{padding:8px 4px}
  .rh-feed .f-tabs>small{display:none}
  .n-grid .n-filters{padding:16px 12px 12px}
  .n-grid .n-head h2{font-size:1.2rem}
  .n-grid .n-item{grid-template-columns:3px 38px minmax(0,1fr) auto;gap:10px;padding:12px 10px 12px 6px}
  .n-grid .n-ic{width:38px;height:42px}
  .pf-page .pf-acts{margin:12px 16px 0}
  .pf-page .pf-id h1{font-size:1.4rem}
  .pf-page .pf-hero .pf-cover:not(:has(img))::after{right:62px;top:12px;width:62px;height:70px}
  .mprof>.card:not(.mp-head):not(.staff-panel){padding:16px 14px}
  .mprof .mp-main h1{font-size:1.35rem}
  .hb-head{padding:16px 14px 14px}
  .hb-head::after{width:110px;height:124px;right:-30px;top:-20px;opacity:.35}
  .post-back{margin-left:0}
}

/* spacing between posts, and kickers on the community cards in the right rail */
.rh-feed .f-list{display:grid;gap:12px}
.rh-feed .cm-sugg>.spread>b,.rh-feed .cm-hgaps>.spread>b{display:block}
.rh-feed .cm-sugg>.spread>b::before,.rh-feed .cm-hgaps>.spread>b::before{display:block;margin-bottom:3px;font:600 .68rem/1.25 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.rh-feed .cm-sugg>.spread>b::before{content:"// find your crew"}
.rh-feed .cm-hgaps>.spread>b::before{content:"// level up"}
.rh-feed .cm-sugg>.spread,.rh-feed .cm-hgaps>.spread{align-items:flex-end}
@media (max-width:640px){.rh-feed .f-compose .f-c-bar .f-kinds{justify-content:flex-start}}
.mprof .mp-av,.pf-page .pf-top{position:relative;z-index:1}
.mprof .mp-av{width:max-content;justify-self:start}
html[data-el]:not([data-el-int="subtle"]) :is(.rh-feed,.n-grid) .f-me .f-me-av,html[data-el]:not([data-el-int="subtle"]) .mprof .mp-av,html[data-el]:not([data-el-int="subtle"]) .pf-page .pf-photo .wl-photo{box-shadow:none}
/* "Get your ✓ badge" card: icon beside the text, grows with its text at any width (it was picking up .f-me>a{display:block}) */
.f-me>a.f-me-cta{display:flex;align-items:center;gap:12px;height:auto;min-height:0;padding:12px 14px;flex-wrap:nowrap}
.f-me>a.f-me-cta>span{flex:1;min-width:0}
.f-me>a.f-me-cta b{line-height:1.25}
.f-me>a.f-me-cta small{line-height:1.35;white-space:normal;overflow-wrap:anywhere}
/* keep the left sidebar on medium-small windows (it used to vanish below 820px wide) */
@media (min-width:721px) and (max-width:820px){.rh-feed.feed-grid{grid-template-columns:190px minmax(0,1fr)}.rh-feed .f-left{display:grid}}

/* rh-skin-tools.css */
/* ReconHire skin for the tool pages: Settings, Groups / mentors / cert tracker, Plan and billing, Pricing, Withdraw,
   Help guide, Contact, Employer pages, Hiring hub, AI copilot, Resume checker and builder, Tracker, Apply queue,
   Saved jobs, Recon matches (#/jobs), Search jobs (#/search), Getting started, Voting info, Weather and Advertise.
   app.js shell() puts .rh-tool (and data-route) on <main> for these routes, so every rule here is scoped to them.
   Same vocabulary as My Network, Jobs home, Messaging and Search: mono "// kickers", Chakra Petch headings and numbers,
   the blue to violet gradient with soft glows, 16 to 20px cards with a thin gradient bar on feature cards, faint grid
   and scan textures, hex motifs and terminal-style empty states. Colors come from the theme tokens (light and dark).
   Nothing here adds overflow on sidebar ancestors, so sticky-rails.js keeps pinning .st-nav and .cm-cside. */

.rh-tool,.cp-main{
  --rg:linear-gradient(135deg,var(--accent),var(--accent2));
  --rglow:0 8px 20px -10px color-mix(in srgb,var(--accent) 80%,transparent);
  --rglow2:0 12px 28px -12px color-mix(in srgb,var(--accent2) 85%,transparent);
  --rgrid:linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px;
  --rhex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%237c3aed' stroke-width='1.4'%3E%3Cpath d='M50 3 94 28v56L50 109 6 84V28z' opacity='.55'/%3E%3Cpath d='M50 25 75 39v34L50 87 25 73V39z' stroke='%232563eb' opacity='.6'/%3E%3Ccircle cx='50' cy='56' r='5' fill='%232563eb' stroke='none' opacity='.5'/%3E%3C/svg%3E");
  --rr:18px;
}

/* ================= shared pieces ================= */

/* page heads become a hero panel: grid texture, two soft glows, a hex in the corner, a gradient bar on top */
.rh-tool>.page-head,.rh-tool>div:not(.card)>.page-head,.rh-tool .cpf-mid>.page-head,.rh-tool>.price-head,.rh-tool>.hg-hero{position:relative;overflow:hidden;isolation:isolate;padding:20px 22px 18px;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  background:var(--rgrid),radial-gradient(460px 220px at 100% 0%,color-mix(in srgb,var(--accent2) 15%,transparent),transparent 70%),radial-gradient(420px 220px at 0% 100%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%),var(--surface);
  box-shadow:var(--shadow)}
.rh-tool>.page-head::before,.rh-tool>div:not(.card)>.page-head::before,.rh-tool .cpf-mid>.page-head::before,.rh-tool>.price-head::before,.rh-tool>.hg-hero::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg);opacity:.9}
.rh-tool>.page-head::after,.rh-tool>div:not(.card)>.page-head::after,.rh-tool .cpf-mid>.page-head::after,.rh-tool>.price-head::after,.rh-tool>.hg-hero::after{content:"";position:absolute;z-index:-1;right:-24px;top:-30px;width:160px;height:180px;pointer-events:none;opacity:.45;background:var(--rhex) center/contain no-repeat}
.rh-tool>.page-head,.rh-tool>div:not(.card)>.page-head,.rh-tool .cpf-mid>.page-head{align-items:center;margin-bottom:16px}
.rh-tool .page-head h1{font:700 clamp(1.4rem,2.4vw,1.8rem)/1.15 var(--hfont);letter-spacing:.01em}
.rh-tool .page-head p{max-width:640px}
.rh-tool .page-head>.row,.rh-tool .page-head>.btn{position:relative;z-index:1}
.rh-tool>.price-head,.rh-tool>.hg-hero{max-width:none;margin:4px 0 22px;padding:26px 22px 24px}
.rh-tool>.price-head>*,.rh-tool>.hg-hero>*{position:relative}
.rh-tool>.price-head h1,.rh-tool>.hg-hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:.005em}
.rh-tool>.price-head p,.rh-tool>.hg-hero p{max-width:620px;margin-left:auto;margin-right:auto}

/* kickers: mono, uppercase, letter-spaced, violet */
.rh-tool .kicker{font:600 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:6px}
.rh-tool .kicker .live,.rh-tool .kicker .dot{box-shadow:0 0 8px var(--good)}

/* tab bars (Jobs tabs, Community tabs, Employer and Hiring tabs): one rounded card of pills, the active one in the gradient */
.rh-tool .subnav{gap:4px;padding:5px;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.rh-tool .subnav a{border-radius:999px;padding:8px 15px;font-weight:600;color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
.rh-tool .subnav a .ico{color:var(--accent)}
.rh-tool .subnav a:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rh-tool .subnav a.on{color:var(--on-accent,#fff);background:var(--rg);box-shadow:var(--rglow)}
.rh-tool .subnav a.on .ico{color:inherit}
.rh-tool .subnav a.on .badge{background:#fff;color:var(--accent)}
.rh-tool .subnav a.on .badge.soft{background:rgba(255,255,255,.25);color:#fff}

/* segmented controls */
.rh-tool .seg:not(.rh-seg){padding:3px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--text) 4%,transparent)}
.rh-tool .seg:not(.rh-seg) button{border-radius:999px;font-weight:600;transition:background .15s,color .15s}
.rh-tool .seg:not(.rh-seg) button:hover:not(.on){color:var(--text)}
.rh-tool .seg:not(.rh-seg) button.on{color:var(--on-accent,#fff);background:var(--rg);box-shadow:var(--rglow)}
.rh-tool .seg:not(.rh-seg) button.on .badge{background:#fff;color:var(--accent)}

/* cards */
.rh-tool .card:not(.f-post):not(.f-compose):not(.ad-card){border-radius:var(--rr)}

/* buttons: gradient pills with a soft glow; ghost is a clean outline, quiet a soft tint */
.rh-tool .btn:not(:is(.f-post,.f-compose,.ad-card,.page-ad,.el-card) *){border-radius:999px}
.rh-tool .btn:not(.ghost):not(.quiet):not(.danger):not(.good):not(.rec):not(.linkish):not(:is(.f-post,.f-compose,.ad-card,.page-ad,.el-card,.ptile.hot) *){background:var(--rg);color:var(--on-accent,#fff);box-shadow:var(--rglow)}
.rh-tool .btn:not(.ghost):not(.quiet):not(.danger):not(.good):not(.rec):not(.linkish):not(:is(.f-post,.f-compose,.ad-card,.page-ad,.el-card) *):hover{filter:brightness(1.07);box-shadow:var(--rglow2)}
.rh-tool .btn.ghost:not(:is(.f-post,.f-compose,.ad-card,.page-ad,.el-card) *){background:var(--surface);color:var(--text);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line2));box-shadow:none}
.rh-tool .btn.ghost:not(:is(.f-post,.f-compose,.ad-card,.page-ad,.el-card) *):hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--surface));color:var(--text)}
.rh-tool .btn.quiet:not(:is(.f-post,.f-compose,.ad-card,.page-ad,.el-card) *){background:color-mix(in srgb,var(--accent) 8%,transparent);color:color-mix(in srgb,var(--accent) 70%,var(--text))}
.rh-tool .btn.quiet:not(:is(.f-post,.f-compose,.ad-card,.page-ad,.el-card) *):hover{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.rh-tool .btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

/* inputs */
.rh-tool .input:not(:is(.f-post,.f-compose) *){border-radius:12px}
.rh-tool textarea.input{border-radius:14px}
.rh-tool .input:focus{border-color:color-mix(in srgb,var(--accent) 65%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.rh-tool .field>span:first-child{font-weight:600}

/* chips that work as filters */
.rh-tool .chip.on,.rh-tool .cm-chips .chip.on{color:var(--on-accent,#fff);background:var(--rg);box-shadow:var(--rglow)}

/* stat tiles: Chakra numbers in the gradient, mono labels */
.rh-tool .stats{gap:10px}
.rh-tool .stat{border-radius:16px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));background:radial-gradient(160px 80px at 100% 0%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 70%),var(--surface);box-shadow:var(--shadow)}
.rh-tool .stat::before{height:3px;background:var(--rg);opacity:.85}
.rh-tool .stat b{font:700 1.45rem/1.1 var(--hfont);background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.rh-tool .stat span{font:600 .64rem/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* empty states: a hex badge and a blinking terminal caret */
.rh-tool .empty{position:relative;background:var(--rgrid),var(--surface)}
.rh-tool .empty>.ico{box-sizing:content-box;width:24px;height:24px;padding:14px;margin-bottom:10px;color:var(--on-accent,#fff);background:var(--rg);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);stroke-width:1.8}
.rh-tool .empty h3{font-family:var(--hfont)}
.rh-tool .empty h3::after{content:"";display:inline-block;width:.45em;height:.9em;margin-left:6px;vertical-align:-.06em;border-radius:1px;background:var(--rg);animation:blink 1.1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.rh-tool .empty h3::after{animation:none}}
.reduce-motion .rh-tool .empty h3::after{animation:none}

/* progress bars */
.rh-tool .bar i,.rh-tool .eg-bar i,.rh-tool .cm-bar-mini i{background:var(--rg);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 50%,transparent)}

/* section titles inside cards */
.rh-tool .card h3,.rh-tool .card-head h3{font-family:var(--hfont);letter-spacing:.005em}
.rh-tool .section-t{font:600 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}

/* ================= Settings ================= */
.rh-tool .st-wrap{grid-template-columns:270px minmax(0,1fr);gap:22px;max-width:1140px}
.rh-tool .st-nav{gap:2px;padding:14px 8px 8px;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.rh-tool .st-nav::before{content:"";position:absolute;inset:0 18px auto;height:3px;border-radius:0 0 3px 3px;background:var(--rg);opacity:.9}
.rh-tool .st-me{gap:12px;padding:6px 10px 14px;margin-bottom:4px;border-bottom:1px dashed var(--line2)}
.rh-tool .st-me h1{font:700 1.35rem/1.1 var(--hfont);margin:0}
.rh-tool .st-me .nav-av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--accent) 40%,transparent)}
.rh-tool .st-kick{display:block;font:600 .64rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:3px}
.rh-tool .st-nav a{position:relative;gap:12px;padding:9px 10px;border-left:0;border-radius:12px;color:var(--muted);font-weight:500;transition:background .15s,color .15s}
.rh-tool .st-nav a:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text)}
.rh-tool .st-nav a.on{color:var(--text);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 6%,transparent))}
.rh-tool .st-nav a.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--rg);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent)}
.rh-tool .st-nic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.rh-tool .st-nic .ico{width:17px;height:17px}
.rh-tool .st-nav a.on .st-nic{color:var(--on-accent,#fff);background:var(--rg);box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-tool .st-nl{display:grid;min-width:0;line-height:1.25;font-size:.92rem}
.rh-tool .st-nav a.on .st-nl{font-weight:600}
.rh-tool .st-nl small{color:var(--dim);font-size:.74rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rh-tool .st-body{gap:14px}
.rh-tool .st-group{border-radius:18px}
.rh-tool .st-group h2{display:flex;align-items:center;gap:10px;padding:18px 22px 10px;font:600 1.06rem/1.3 var(--hfont);letter-spacing:.01em}
.rh-tool .st-group h2::before{content:"";width:14px;height:16px;flex:none;background:var(--rg);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);opacity:.9}
.rh-tool .st-row{border-top:1px dashed var(--line2);transition:background .15s}
.rh-tool .st-group h2+.st-row{border-top:0}
.rh-tool a.st-row:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.rh-tool a.st-row:hover .st-c>.ico{color:var(--accent);transform:translateX(2px)}
.rh-tool .st-c>.ico{transition:transform .15s,color .15s}
.rh-tool .st-l{font-weight:600}
.rh-tool .st-sub{font:600 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin:8px 2px 0}
.rh-tool .st-body>.card:not(.st-group){border-radius:18px}
.rh-tool .st-body>.card:not(.st-group)>h3:first-child,.rh-tool .st-body>.card .card-head h3{font-family:var(--hfont)}
.rh-tool .st-alloff{border-radius:14px}
.rh-tool .switch input:checked+i{background:var(--rg)}
@media (max-width:820px){
  .rh-tool .st-wrap{grid-template-columns:minmax(0,1fr)}
  .rh-tool .st-nav{padding:5px;gap:4px;border-radius:16px;overflow-x:auto}
  .rh-tool .st-nav::before{display:none}
  .rh-tool .st-nav a{flex:none;padding:6px 12px 6px 6px;border-radius:999px}
  .rh-tool .st-nav a.on{color:var(--on-accent,#fff);background:var(--rg);box-shadow:var(--rglow)}
  .rh-tool .st-nav a.on::before{display:none}
  .rh-tool .st-nav a.on .st-nic{background:rgba(255,255,255,.2);box-shadow:none}
  .rh-tool .st-nic{width:26px;height:26px;border-radius:999px}
  .rh-tool .st-nic .ico{width:15px;height:15px}
  .rh-tool .st-nl{white-space:nowrap;font-size:.86rem}
  .rh-tool .st-nl small{display:none}
  .rh-tool .st-group h2{padding:16px 16px 8px}
  .rh-tool .st-row{padding:12px 16px}
}

/* ================= Groups, mentors, study buddies, cert tracker ================= */
.rh-tool .cm-gcard{border-radius:18px}
.rh-tool .cm-gcard:hover{border-color:color-mix(in srgb,var(--cm,var(--accent)) 45%,transparent);box-shadow:0 16px 34px -20px color-mix(in srgb,var(--cm,var(--accent)) 70%,transparent)}
.rh-tool .cm-gband{height:4px}
.rh-tool .cm-gname{font-family:var(--hfont);letter-spacing:.005em}
.rh-tool .cm-gfoot{border-top:1px dashed var(--line2)}
.rh-tool .cm-tile{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;box-shadow:none}
.rh-tool .cm-bar .search .ico{color:var(--accent)}
.rh-tool .cm-bar .search input{border-radius:999px}
.rh-tool .cm-hero{border-radius:20px}
.rh-tool .cm-hero-band{position:relative;background:linear-gradient(rgba(148,163,255,.16) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(148,163,255,.16) 1px,transparent 1px) 0 0/18px 18px,radial-gradient(260px 140px at 88% 10%,color-mix(in srgb,var(--cm,var(--accent2)) 65%,transparent),transparent 70%),linear-gradient(120deg,#0b1430 0%,#1e2a6b 55%,#3b1f78 100%)}
.rh-tool .cm-hero-band::after{content:"";position:absolute;right:18px;top:12px;width:56px;height:62px;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%23a5b4fc' stroke-width='5'%3E%3Cpath d='M50 6 90 29v54L50 106 10 83V29z'/%3E%3Cpath d='M50 30 70 41v30L50 82 30 71V41z' opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat}
.rh-tool .cm-hero-body>.cm-tile{box-shadow:none;outline:0;filter:drop-shadow(0 0 0 var(--surface)) drop-shadow(0 6px 14px rgba(15,23,42,.25))}
.rh-tool .cm-hero-txt h1{font-family:var(--hfont);letter-spacing:.01em}
.rh-tool .cm-gstats{font-family:var(--mono);font-size:.8rem}
.rh-tool .cm-about,.rh-tool .cm-gside>.card{border-radius:18px}
.rh-tool .cm-plan-top{background:var(--rgrid),radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%),var(--surface)}
.rh-tool .cm-plan-top .kicker,.rh-tool .cm-plan-info>small:first-child{font-family:var(--mono)}
.rh-tool .cm-ring-t b{background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.rh-tool .cm-cd b,.rh-tool .cm-plan-row b{font-family:var(--hfont)}
.rh-tool .cm-dom{border-top:1px dashed var(--line2)}
.rh-tool .cm-dom-n{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;width:26px;height:28px;background:var(--rg);color:var(--on-accent,#fff)}
.rh-tool .cm-dom-t{font-family:var(--hfont);font-weight:600}
.rh-tool .cm-cmain>.card:first-child,.rh-tool .cm-cmain>.stack>.card:first-child{overflow:hidden}
.rh-tool .cm-cmain>.stack>.card:first-child::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg);z-index:1}
.rh-tool .cm-cside>.card{border-radius:18px}
.rh-tool .cm-lab-ic{border-radius:10px}

/* ================= Plan and billing, checkout ================= */
.rh-tool .bl-card{border-radius:18px}
.rh-tool .bl-sum{overflow:hidden;background:var(--rgrid),radial-gradient(360px 180px at 100% 0%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 70%),var(--surface)}
.rh-tool .bl-sum::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-tool .bl-kicker{font:600 .66rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.rh-tool .bl-sum-top h2,.rh-tool .bl-sum h2,.rh-tool .bl-sum-top b{font-family:var(--hfont)}
.rh-tool .bl-note{border-radius:12px}
.rh-tool .meter .spread b{font-family:var(--hfont);font-size:1rem}
.rh-tool .meter .bar{height:8px;border-radius:99px}
.rh-tool .bl-card h3 .ico{padding:6px;box-sizing:content-box;border-radius:9px;color:var(--on-accent,#fff);background:var(--rg);width:14px;height:14px}
.rh-tool .bl-card-row{border-radius:14px}
.rh-tool .bl-card-row.def{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}

/* ================= Pricing (in the app) and Withdraw ================= */
.rh-tool .bill-toggle{background:var(--surface)}
.rh-tool .intro-banner{border-radius:999px}
.rh-tool .intro-tag{font-family:var(--mono);letter-spacing:.1em}
.rh-tool .ptile{border-radius:20px}
.rh-tool .ptile:not(.hot)::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent2) 55%,transparent));opacity:.7}
.rh-tool .ptile .ptile-top h3{font-family:var(--hfont);letter-spacing:.01em}
.rh-tool .ptile .pprice b{font-family:var(--hfont)}
.rh-tool .ptile .plimits b{font-family:var(--hfont)}
.rh-tool .ptile.hot .btn,.rh-tool .ptile .btn:not(.ghost){background:var(--rg);color:var(--on-accent,#fff);box-shadow:var(--rglow)}
.rh-tool .ptile .btn.ghost{border-radius:999px}
.rh-tool .pbadge{font-family:var(--mono);letter-spacing:.1em}
.rh-tool .pass{border-radius:18px}
.rh-tool .sec-head .kicker,.rh-tool .center-head .kicker{justify-content:center}
.rh-tool .withdraw-box{border-radius:20px;overflow:hidden;max-width:760px;margin-left:auto;margin-right:auto}
.rh-tool .withdraw-box::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}

/* ================= Help guide and Contact ================= */
.rh-tool .hg-tools .input{border-radius:999px}
.rh-tool .hg-qbtn{border-radius:18px;font-family:var(--hfont);font-weight:600;letter-spacing:.01em;background:radial-gradient(140px 70px at 50% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%),var(--surface);box-shadow:var(--shadow)}
.rh-tool .hg-qbtn:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 14px 30px -18px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-tool .hg-qico{display:grid;place-items:center;width:42px;height:46px;border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:var(--rg);color:var(--on-accent,#fff)}
.rh-tool .hg-qico svg,.rh-tool .hg-qico .ico{color:inherit}
.rh-tool .hg-toc{border-radius:18px;box-shadow:var(--shadow)}
.rh-tool .hg-toc a{border-radius:12px}
.rh-tool .hg-toc a:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.rh-tool .hg-toc a.on{color:var(--text);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 6%,transparent))}
.rh-tool .hg-sec{border-radius:18px}
.rh-tool .hg-sec h2{font-family:var(--hfont);letter-spacing:.01em}
.rh-tool .hg-ico{border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}
.rh-tool .hg-steps>li::before,.rh-tool .hg-steps li::marker{font-family:var(--mono)}
.rh-tool .hg-tip{border-radius:14px;border-left:3px solid var(--accent2)}
.rh-tool .contact-grid>.card{border-radius:20px}
.rh-tool .contact-grid>.card:first-child{overflow:hidden}
.rh-tool .contact-grid>.card:first-child::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-tool .contact-grid .quick a,.rh-tool .contact-grid ul a{font-weight:500}

/* ================= Employer pages and Hiring hub ================= */
.rh-tool .emp-hero{border-radius:20px}
.rh-tool .emp-hero-band{background:linear-gradient(rgba(148,163,255,.16) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(148,163,255,.16) 1px,transparent 1px) 0 0/18px 18px,radial-gradient(280px 150px at 88% 10%,rgba(124,58,237,.6),transparent 70%),linear-gradient(120deg,#0b1430 0%,#1e2a6b 55%,#3b1f78 100%)}
.rh-tool .emp-hero-name{font-family:var(--hfont);letter-spacing:.01em}
.rh-tool .emp-facts{font-size:.86rem}
.rh-tool .emp-stepper{border-radius:18px}
.rh-tool .emp-step-n{font-family:var(--hfont)}
.rh-tool .emp-step.done .emp-step-n{background:var(--rg);border-color:transparent;color:#fff}
.rh-tool .emp-stepper-bar{background:var(--rg)}
.rh-tool .emp-sec-head h2,.rh-tool .emp-sec-head h3{font-family:var(--hfont)}
.rh-tool .emp-method{border-radius:16px}
.rh-tool .emp-method.on,.rh-tool .emp-method:has(input:checked){border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent),0 12px 26px -18px var(--accent)}
.rh-tool .emp-method-ic,.rh-tool .emp-ic{border-radius:12px;background:var(--rg);color:#fff}
.rh-tool .emp-time{font-family:var(--mono);font-size:.72rem}
.rh-tool .emp-panel{border-radius:18px}
.rh-tool .emp-otp-d{border-radius:12px;font-family:var(--hfont)}
.rh-tool .hh-hero{overflow:hidden;border-radius:20px;background:var(--rgrid),radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,var(--accent2) 15%,transparent),transparent 70%),var(--surface)}
.rh-tool .hh-hero::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-tool .hh-hero h1{font-family:var(--hfont)}
.rh-tool .hh-logo{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0}
.rh-tool .hh-cta{border-radius:18px}
.rh-tool .hh-stat{border-radius:16px}
.rh-tool .hh-stat b{font-family:var(--hfont);background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.rh-tool .hh-stat small{font:600 .64rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.rh-tool .hh-stat-ic{border-radius:10px}
.rh-tool .hh-card,.rh-tool .hh-grid>.card{border-radius:18px}
.rh-tool .hh-name{font-family:var(--hfont)}
.rh-tool .hh-off{max-width:640px;margin:10px auto;border-radius:20px;overflow:hidden}
.rh-tool .hh-off::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}

/* ================= AI copilot, resume checker, resume builder ================= */
.rh-tool .cp-grid{gap:12px}
.rh-tool .cp-tool{position:relative;overflow:hidden;border-radius:18px;box-shadow:var(--shadow);background:radial-gradient(160px 80px at 100% 0%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 70%),var(--surface)}
.rh-tool .cp-tool::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg);opacity:0;transition:opacity .15s}
.rh-tool .cp-tool:hover::before,.rh-tool .cp-tool.on::before{opacity:1}
.rh-tool .cp-tool:hover{box-shadow:0 14px 30px -18px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-tool .cp-tool b{font-family:var(--hfont);font-weight:600;letter-spacing:.01em}
.rh-tool .cp-ico{width:40px;height:44px;border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:var(--rg);color:var(--on-accent,#fff)}
.rh-tool .cp-stage>.card{border-radius:20px}
.rh-tool .drop{border-radius:18px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line2));background:var(--rgrid),color-mix(in srgb,var(--accent) 3%,var(--surface))}
.rh-tool .drop:hover,.rh-tool .drop.over{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}
.rh-tool .drop .ico{box-sizing:content-box;padding:10px;width:24px;height:24px;color:var(--on-accent,#fff);background:var(--rg);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.rh-tool .drop b{font-family:var(--hfont)}
.rh-tool .scorecard{border-radius:18px}
.rh-tool .scorecard b,.rh-tool .ring b{font-family:var(--hfont)}
.rh-tool .path{border-radius:14px}
.rh-tool .bld-sec{border-radius:18px}
.rh-tool .bld-sec h3,.rh-tool .bld-sec>.spread b{font-family:var(--hfont)}
.rh-tool .bld-side>.card:first-child{overflow:hidden}
.rh-tool .bld-check::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-tool .bld-meter i{background:var(--rg)}
.rh-tool .bld-list li.ok .ico,.rh-tool .bld-list .ok svg{color:var(--good)}
.rh-tool .bld-paper{border-radius:14px}
.rh-tool .bld-chips .chip.pick:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent);color:var(--text)}

/* ================= Tracker, Apply queue, Saved, Recon matches, Search jobs ================= */
.rh-tool .hb-rem-i{border-radius:16px}
.rh-tool .hb-rem-ic{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;background:var(--rg);color:#fff}
.rh-tool .board{gap:10px}
.rh-tool .col{border-radius:16px;background:var(--rgrid),color-mix(in srgb,var(--surface) 82%,transparent);border-color:color-mix(in srgb,var(--accent) 10%,var(--line))}
.rh-tool .col h4{color:var(--accent2);letter-spacing:.07em;padding-bottom:8px;border-bottom:1px dashed var(--line2)}
.rh-tool .col.drop{border-style:solid;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.rh-tool .tcard{border-radius:12px;background:var(--surface);box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .15s,transform .15s,box-shadow .15s}
.rh-tool .tcard:hover{transform:translateY(-1px);box-shadow:0 10px 22px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-tool .tcard b{font-family:var(--hfont);font-weight:600}
.rh-tool .tcard .meta{font-family:var(--mono);font-size:.7rem}
.rh-tool .toolbar .search .ico{color:var(--accent)}
.rh-tool .toolbar .search input{border-radius:999px}
.rh-tool .split .list-col>.dim:first-child,.rh-tool .js-count,.rh-tool .newbar{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em}
.rh-tool .jobcard,.rh-tool .qitem{position:relative;border-radius:16px;transition:border-color .15s,background .15s,box-shadow .15s}
.rh-tool .jobcard .t,.rh-tool .qitem .t{font-family:var(--hfont);font-weight:600;letter-spacing:.005em}
.rh-tool .jobcard:hover,.rh-tool .qitem:hover{box-shadow:0 10px 24px -18px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-tool .jobcard.on,.rh-tool .qitem.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),color-mix(in srgb,var(--accent2) 4%,var(--surface)))}
.rh-tool .jobcard.on::before,.rh-tool .qitem.on::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--rg);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent)}
.rh-tool .detail-col>.card,.rh-tool .detail{border-radius:18px}
.rh-tool .detail-col>.card{overflow:hidden}
.rh-tool .detail-col>.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg);z-index:1}
.rh-tool .detail-top h2{font-family:var(--hfont)}
.rh-tool .detail .facts .chip,.rh-tool .detail-top .chip{font-weight:600}
.rh-tool .ai-row{border-radius:14px}
.rh-tool .ai-row-t,.rh-tool .ai-tag{font-family:var(--mono);letter-spacing:.1em}
.rh-tool .bulkbar{border-radius:999px}
.rh-tool .js-top{overflow:hidden;background:var(--rgrid),radial-gradient(420px 160px at 100% 0%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 70%),var(--surface)}
.rh-tool .js-top::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-tool .js-bar .search input{border-radius:999px}
.rh-tool .js-bar .search .ico{color:var(--accent)}
.rh-tool .js-free{font-size:.84rem}
.rh-tool .ptabs{border-radius:999px}
.rh-tool .apply-bar{border-radius:16px}
.rh-tool .recon-btn{background:var(--rg)!important;box-shadow:var(--rglow)!important}

/* ================= Getting started, Voting info, Weather, Advertise ================= */
.rh-tool .eg-card{border-radius:20px;overflow:hidden}
.rh-tool .eg-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-tool .eg-head{background:none}
.rh-tool .eg-ico{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;background:var(--rg);color:#fff}
.rh-tool .eg-ttl b,.rh-tool .eg-ttl h2,.rh-tool .eg-ttl h3{font-family:var(--hfont)}
.rh-tool .eg-steps>li,.rh-tool .eg-steps>div{border-radius:14px}
.rh-tool .eg-steps .next{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--accent2) 4%,transparent))}
.rh-tool .eg-n{font-family:var(--mono)}
.rh-tool .eg-done{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.rh-tool .eg-job{border-radius:14px}
.rh-tool .vote-where,.rh-tool .vote-links,.rh-tool .vote-tile{border-radius:18px}
.rh-tool .vote-st-code{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;font-family:var(--hfont)}
.rh-tool .vote-date{font-family:var(--hfont)}
.rh-tool .ann-k{font:600 .64rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.rh-tool .wx-where{overflow:hidden;background:var(--rgrid),radial-gradient(360px 160px at 100% 0%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 70%),var(--surface)}
.rh-tool .wx-where::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg)}
.rh-tool .wx-pin{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;background:var(--rg);color:#fff}
.rh-tool .wx-place b,.rh-tool .wx-place h2,.rh-tool .wx-place h3{font-family:var(--hfont)}
.rh-tool .wx-safety{border-left:3px solid var(--accent2)}
.rh-tool .adv-stats .card{overflow:hidden;border-radius:16px;background:radial-gradient(160px 80px at 100% 0%,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 70%),var(--surface)}
.rh-tool .adv-stats .card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rg);opacity:.85}
.rh-tool .adv-stats .card b{font-family:var(--hfont);background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.rh-tool .adv-stats .card small,.rh-tool .adv-stats .card span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase}
.rh-tool .adv-how{border-radius:18px}
.rh-tool .adv-how li::marker{color:var(--accent2);font-family:var(--mono);font-weight:700}

/* ================= dark mode ================= */
html[data-theme="dark"] .rh-tool{--rgrid:linear-gradient(color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px) 0 0/22px 22px}
html[data-theme="dark"] .rh-tool>.page-head,html[data-theme="dark"] .rh-tool>div:not(.card)>.page-head,html[data-theme="dark"] .rh-tool .cpf-mid>.page-head,html[data-theme="dark"] .rh-tool>.price-head,html[data-theme="dark"] .rh-tool>.hg-hero{border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  background:var(--rgrid),radial-gradient(460px 220px at 100% 0%,color-mix(in srgb,var(--accent2) 24%,transparent),transparent 70%),radial-gradient(420px 220px at 0% 100%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--surface)}
html[data-theme="dark"] .rh-tool>.page-head::after,html[data-theme="dark"] .rh-tool>div:not(.card)>.page-head::after,html[data-theme="dark"] .rh-tool .cpf-mid>.page-head::after,html[data-theme="dark"] .rh-tool>.price-head::after,html[data-theme="dark"] .rh-tool>.hg-hero::after{opacity:.75}
html[data-theme="dark"] .rh-tool .card:not(.f-post):not(.f-compose):not(.ad-card):not(.vote-card):not(.empty){background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface2) 55%,var(--surface)))}
html[data-theme="dark"] .rh-tool .subnav{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:var(--line2)}
html[data-theme="dark"] .rh-tool .btn.ghost:not(:is(.f-post,.f-compose,.ad-card,.page-ad,.el-card) *){background:var(--surface2);border-color:color-mix(in srgb,var(--accent) 22%,var(--line2))}
html[data-theme="dark"] .rh-tool .btn.quiet:not(:is(.f-post,.f-compose,.ad-card,.page-ad,.el-card) *){background:color-mix(in srgb,var(--accent) 14%,transparent);color:color-mix(in srgb,var(--accent) 60%,#fff)}
html[data-theme="dark"] .rh-tool .seg:not(.rh-seg){background:var(--surface2)}
html[data-theme="dark"] .rh-tool .stat{background:radial-gradient(160px 80px at 100% 0%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),var(--surface)}
html[data-theme="dark"] .rh-tool .st-nav{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface2) 55%,var(--surface)))}
html[data-theme="dark"] .rh-tool .col{background:var(--rgrid),color-mix(in srgb,var(--surface) 88%,transparent)}
html[data-theme="dark"] .rh-tool .tcard{background:var(--surface2)}
html[data-theme="dark"] .rh-tool .jobcard,html[data-theme="dark"] .rh-tool .qitem{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface2) 50%,var(--surface)))}
html[data-theme="dark"] .rh-tool .jobcard.on,html[data-theme="dark"] .rh-tool .qitem.on{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),color-mix(in srgb,var(--accent2) 8%,var(--surface)))}
html[data-theme="dark"] .rh-tool .cp-tool,html[data-theme="dark"] .rh-tool .hg-qbtn{background:radial-gradient(160px 80px at 100% 0%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),var(--surface)}
html[data-theme="dark"] .rh-tool .empty{background:var(--rgrid),var(--surface)}
html[data-theme="dark"] .rh-tool .drop{background:var(--rgrid),color-mix(in srgb,var(--accent) 5%,var(--surface))}
html[data-theme="dark"] .rh-tool .bl-card-row.def{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
html[data-theme="dark"] .rh-tool .adv-stats .card,html[data-theme="dark"] .rh-tool .hh-hero,html[data-theme="dark"] .rh-tool .wx-where,html[data-theme="dark"] .rh-tool .js-top,html[data-theme="dark"] .rh-tool .bl-sum{background:var(--rgrid),radial-gradient(360px 170px at 100% 0%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 70%),var(--surface)}

/* ================= phones ================= */
@media (max-width:640px){
  .rh-tool>.page-head,.rh-tool>div:not(.card)>.page-head,.rh-tool .cpf-mid>.page-head{padding:16px 14px 14px;border-radius:18px}
  .rh-tool>.page-head::after,.rh-tool>div:not(.card)>.page-head::after,.rh-tool .cpf-mid>.page-head::after,.rh-tool>.price-head::after,.rh-tool>.hg-hero::after{width:110px;height:124px;right:-30px;top:-22px;opacity:.3}
  .rh-tool .page-head h1{font-size:1.3rem}
  .rh-tool>.price-head,.rh-tool>.hg-hero{padding:20px 14px 18px}
  .rh-tool>.price-head h1,.rh-tool>.hg-hero h1{font-size:1.6rem}
  .rh-tool .subnav{border-radius:14px;padding:4px}
  .rh-tool .subnav a{padding:7px 12px}
  .rh-tool .stat{padding:10px 12px}
  .rh-tool .stat b{font-size:1.2rem}
  .rh-tool .stat span{font-size:.58rem;letter-spacing:.06em}
}

/* late fixes: Help quick tiles fit any count in one row on wide screens; readable info chips in dark mode */
@media (min-width:901px){.rh-tool .hg-quick{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}}
html[data-theme="dark"] .rh-tool .chip.info{color:#7dd3fc}
html[data-theme="dark"] .rh-tool .chip.have{color:#6ee7b7}
@media (max-width:640px){.rh-tool .hh-stat small{letter-spacing:.05em}}

/* ================= AI tools: hub, per-tool pages, back button (copilot-ui.js) ================= */
.cp-main{--c1:var(--accent);--c2:var(--accent2)}
.cp-main.h1,.cp-main .h1,.cp-card.h1,.cpf-nav .h1{--c1:var(--accent);--c2:var(--accent2)}
.cp-main.h2,.cp-main .h2,.cp-card.h2,.cpf-nav .h2{--c1:#8b5cf6;--c2:#ec4899}
.cp-main.h3,.cp-main .h3,.cp-card.h3,.cpf-nav .h3{--c1:#06b6d4;--c2:#3b82f6}
.cp-main.h4,.cp-main .h4,.cp-card.h4,.cpf-nav .h4{--c1:#10b981;--c2:#06b6d4}
.cp-main.h5,.cp-main .h5,.cp-card.h5,.cpf-nav .h5{--c1:#6366f1;--c2:#a855f7}
.cp-main.h6,.cp-main .h6,.cp-card.h6,.cpf-nav .h6{--c1:#ec4899;--c2:#f97316}
.cp-main.h7,.cp-main .h7,.cp-card.h7,.cpf-nav .h7{--c1:#22c55e;--c2:#14b8a6}
.cp-grad{background:linear-gradient(135deg,var(--accent),var(--accent2) 60%,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}

/* hub hero */
.cp-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:30px 28px;border-radius:24px;margin:0 0 18px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:var(--shadow);
  background:var(--rgrid),radial-gradient(520px 260px at 100% 0%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 70%),radial-gradient(480px 260px at 0% 100%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),radial-gradient(300px 200px at 60% 120%,color-mix(in srgb,#ec4899 12%,transparent),transparent 70%),var(--surface)}
.cp-hero::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899,var(--accent));background-size:200% 100%;animation:cpSlide 6s linear infinite}
.cp-hero::after{content:"";position:absolute;z-index:-1;right:-30px;top:-40px;width:220px;height:250px;opacity:.4;background:var(--rhex) center/contain no-repeat;animation:cpFloat 9s ease-in-out infinite}
.cp-hero h1{margin:4px 0 8px;font:700 clamp(1.7rem,3.8vw,2.7rem)/1.1 var(--hfont);letter-spacing:.005em}
.cp-hero p{margin:0;max-width:620px;color:var(--muted);font-size:1.02rem;line-height:1.55}
.cp-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cp-hero-cta .btn{padding:11px 18px;font-size:.95rem}
.cp-hero-stats{display:grid;gap:10px;min-width:170px}
.cp-hero-stats>div{padding:12px 16px;border-radius:16px;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));backdrop-filter:blur(6px);display:flex;align-items:baseline;gap:10px}
.cp-hero-stats b{font:700 1.6rem/1 var(--hfont);background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:62px}
.cp-hero-stats small{color:var(--muted);font-size:.8rem}

/* jump back in */
.cp-recent{display:flex;align-items:center;gap:12px;margin:0 0 22px;flex-wrap:wrap}
.cp-recent-k{display:inline-flex;align-items:center;gap:6px;font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
.cp-recent-k svg{width:14px;height:14px}
.cp-recent-row{display:flex;gap:10px;flex-wrap:wrap;flex:1}

/* groups */
.cp-group{margin:0 0 26px}
.cp-group-h{display:flex;gap:12px;align-items:center;margin:0 0 12px}
.cp-group-h h2{margin:0;font:700 1.2rem/1.2 var(--hfont)}
.cp-group-h p{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.cp-step-n{width:34px;height:34px;flex:none;display:grid;place-items:center;font:700 .95rem/1 var(--hfont);color:#fff;background:var(--rg);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);box-shadow:var(--rglow)}
.cp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}

/* tool cards */
.cp-card{position:relative;isolation:isolate;overflow:hidden;display:flex;gap:14px;align-items:flex-start;padding:18px 40px 18px 16px;border-radius:18px;text-decoration:none;color:var(--text);
  background:radial-gradient(220px 120px at 100% 0%,color-mix(in srgb,var(--c2) 14%,transparent),transparent 70%),var(--surface);
  border:1px solid color-mix(in srgb,var(--c1) 18%,var(--line));box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.cp-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--c1),var(--c2));opacity:.55;transition:opacity .18s}
.cp-card:hover,.cp-card:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c1) 55%,transparent);box-shadow:0 18px 36px -20px color-mix(in srgb,var(--c1) 80%,transparent);text-decoration:none}
.cp-card:hover::before{opacity:1}
.cp-hex{width:46px;height:46px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);transition:transform .25s}
.cp-hex svg{width:21px;height:21px}
.cp-card:hover .cp-hex{transform:rotate(-8deg) scale(1.06)}
.cp-card-t{flex:1;min-width:0;display:grid;gap:5px}
.cp-card-t b{font:600 1.04rem/1.25 var(--hfont);letter-spacing:.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cp-card-t small{color:var(--muted);font-size:.86rem;line-height:1.45}
.cp-badge{font:600 .62rem/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#fff;padding:4px 7px;border-radius:999px;background:linear-gradient(135deg,var(--c1),var(--c2))}
.cp-arrow{position:absolute;right:16px;top:16px;font-size:1.1rem;color:var(--c1);opacity:.5;transition:transform .18s,opacity .18s}
.cp-card:hover .cp-arrow{transform:translateX(4px);opacity:1}
.cp-card.sm{padding:10px 36px 10px 10px;align-items:center;border-radius:14px;flex:0 1 auto;min-width:200px}
.cp-card.sm .cp-hex{width:34px;height:34px}.cp-card.sm .cp-hex svg{width:16px;height:16px}
.cp-card.sm .cp-card-t b{font-size:.92rem}
.cp-card.sm .cp-arrow{top:50%;margin-top:-.6em}

/* back button bar */
.cp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.cp-back{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;text-decoration:none;color:var(--text);
  border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--accent),var(--accent2),#ec4899) border-box;
  box-shadow:0 10px 24px -16px color-mix(in srgb,var(--accent) 90%,transparent);transition:transform .18s,box-shadow .18s}
.cp-back:hover,.cp-back:focus-visible{transform:translateY(-1px);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--accent2) 90%,transparent);text-decoration:none}
.cp-back-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.05rem;background:var(--rg);transition:transform .2s}
.cp-back:hover .cp-back-ic{transform:translateX(-3px)}
.cp-back>span:last-child{display:grid;line-height:1.1}
.cp-back small{font:600 .62rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cp-back b{font:700 .95rem/1.2 var(--hfont)}
.cp-switch-w{display:flex;align-items:center;gap:8px;margin:0}
.cp-switch-w span{font:600 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cp-main .cp-switch{width:auto;min-width:210px;padding:8px 34px 8px 12px;border-radius:12px;font-family:var(--font,system-ui,sans-serif)!important;font-size:.92rem!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;color:var(--text)}

/* tool hero */
.cp-thero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-items:center;padding:24px 24px 20px;border-radius:22px;margin:0 0 16px;
  border:1px solid color-mix(in srgb,var(--c1) 24%,var(--line));box-shadow:var(--shadow);
  background:var(--rgrid),radial-gradient(480px 240px at 100% 0%,color-mix(in srgb,var(--c2) 20%,transparent),transparent 70%),radial-gradient(420px 220px at 0% 100%,color-mix(in srgb,var(--c1) 15%,transparent),transparent 70%),var(--surface)}
.cp-thero::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c1));background-size:200% 100%;animation:cpSlide 6s linear infinite}
.cp-hex.lg{width:68px;height:68px}.cp-hex.lg svg{width:30px;height:30px}
.cp-thero .cp-hex.lg{filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--c1) 50%,transparent))}
.cp-thero h1{margin:2px 0 4px;font:700 clamp(1.5rem,3vw,2.1rem)/1.15 var(--hfont)}
.cp-thero p{margin:0;color:var(--muted);max-width:680px}
.cp-thero .kicker{color:var(--c2)}
.cp-flow{grid-column:1/-1;list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:none}
.cp-flow li{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--line);color:var(--muted);transition:all .25s}
.cp-flow li span{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 .8rem/1 var(--hfont);background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted);transition:all .25s}
.cp-flow li b{font-weight:600;font-size:.88rem}
.cp-flow li.on{color:var(--text);border-color:color-mix(in srgb,var(--c1) 40%,var(--line))}
.cp-flow li.on span{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff}
.cp-flow li.now span{animation:cpPulse 1.6s ease-out infinite}

/* the tool panel and results */
.cp-main .cp-stage .cp-panel-h{display:none}
.cp-main .cp-stage{--rg:linear-gradient(135deg,var(--c1),var(--c2))}
.cp-main .cp-panel{position:relative;overflow:hidden;border-radius:20px;padding:22px;border:1px solid color-mix(in srgb,var(--c1) 16%,var(--line))}
.cp-main .cp-go{margin-top:12px}
.rh-tool.cp-main .cp-go .btn,.cp-main .cp-go .btn,.rh-tool.cp-main .cp-compose .btn,.cp-main .cp-compose .btn{position:relative;overflow:hidden;padding:12px 22px;font-size:.98rem;border-radius:12px;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 12px 26px -14px color-mix(in srgb,var(--c1) 90%,transparent);border:0;color:#fff}
.cp-main .cp-go .btn::after,.cp-main .cp-compose .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.cp-main .cp-go .btn:hover::after,.cp-main .cp-compose .btn:hover::after{transform:translateX(120%)}
.cp-main .cp-loading{flex-direction:column;gap:12px;padding:34px 20px;border-radius:16px;border:1px dashed color-mix(in srgb,var(--c1) 35%,var(--line));background:color-mix(in srgb,var(--c1) 5%,transparent);font-weight:500}
.cp-main .cp-loading::after{content:"";width:min(260px,70%);height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--c1),var(--c2),transparent);background-size:200% 100%;animation:cpSlide 1.4s linear infinite}
.cp-main .cp-out{gap:14px}
.cp-main .cp-out>*{animation:cpIn .35s ease-out both}
.cp-main .cp-block{position:relative;border-radius:16px;padding:18px 18px 16px 20px;background:var(--surface2);border:1px solid var(--line)}
.cp-main .cp-block::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(var(--c1),var(--c2))}
.cp-main .cp-block h3{font:700 1.02rem/1.3 var(--hfont);margin:0 0 10px}
.cp-main .cp-counter{padding:20px 22px;border-radius:18px;border:1px solid color-mix(in srgb,var(--c1) 35%,var(--line));background:radial-gradient(400px 160px at 100% 0%,color-mix(in srgb,var(--c2) 18%,transparent),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--c1) 12%,var(--surface)),var(--surface))}
.cp-main .cp-counter small{font:600 .68rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c2);margin-bottom:6px}
.cp-main .cp-counter b{font:700 1.15rem/1.45 var(--hfont)}
.cp-main .cp-q{border-radius:16px;transition:border-color .18s,box-shadow .18s}
.cp-main .cp-q[open]{border-color:color-mix(in srgb,var(--c1) 35%,var(--line));box-shadow:0 12px 28px -22px color-mix(in srgb,var(--c1) 80%,transparent)}
.cp-main .cp-n{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff}
.cp-main .cp-ans{border-left-color:var(--c1)}
.cp-main .cp-list svg{color:var(--c1)}
.cp-main .cp-mock{border-radius:16px;border-color:color-mix(in srgb,var(--c1) 35%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 10%,var(--surface)),var(--surface))}
.cp-main .cp-chat{max-height:520px;border-radius:16px;scrollbar-width:none}
.cp-main .cp-chat::-webkit-scrollbar{display:none}
.cp-main .cp-msgb.user{background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 22%,var(--surface)),color-mix(in srgb,var(--c2) 16%,var(--surface)))}

/* keep going */
.cp-next{margin:22px 0 8px;padding:20px;border-radius:20px;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--surface));animation:cpIn .4s ease-out both}
.cp-next-h h2{margin:2px 0 14px;font:700 1.2rem/1.2 var(--hfont)}
.cp-all{display:inline-block;margin-top:14px;font-weight:600;color:var(--accent2)}
.cp-main>.page-ad{margin-top:26px}

@keyframes cpSlide{to{background-position:-200% 0}}
@keyframes cpFloat{50%{transform:translateY(12px) rotate(4deg)}}
@keyframes cpPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c1) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@keyframes cpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cp-hero::before,.cp-hero::after,.cp-thero::before,.cp-flow li.now span,.cp-main .cp-out>*,.cp-next,.cp-main .cp-loading::after{animation:none}}

html[data-theme="dark"] .cp-hero,html[data-theme="dark"] .cp-thero{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
html[data-theme="dark"] .cp-hero::after{opacity:.65}
html[data-theme="dark"] .cp-card{background:radial-gradient(220px 120px at 100% 0%,color-mix(in srgb,var(--c2) 20%,transparent),transparent 70%),var(--surface)}

@media (max-width:820px){
  .cp-hero{grid-template-columns:1fr;padding:22px 18px;border-radius:20px}
  .cp-hero-stats{grid-template-columns:repeat(3,1fr);min-width:0}
  .cp-hero-stats>div{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px}
  .cp-hero-stats b{font-size:1.3rem;min-width:0}
  .cp-thero{grid-template-columns:auto minmax(0,1fr);padding:18px 16px 16px}
  .cp-hex.lg{width:54px;height:54px}.cp-hex.lg svg{width:24px;height:24px}
}
@media (max-width:600px){
  .cp-hero-cta .btn{flex:1 1 100%;justify-content:center}
  .cp-flow{gap:6px}
  .cp-flow li{flex-direction:column;align-items:center;text-align:center;gap:5px;padding:8px 4px}
  .cp-flow li b{font-size:.72rem;line-height:1.2}
  .cp-switch-w{display:none}
  .cp-thero{grid-template-columns:1fr}
  .cp-thero .cp-hex.lg{display:none}
  .cp-main .cp-panel{padding:16px}
  .cp-card.sm{min-width:0;flex:1 1 100%}
  .cp-cards{grid-template-columns:1fr}
}

/* ================= AI pages: left and right rails (HR.aiFrame in copilot-ui.js) ================= */
.cpf-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 270px;gap:18px;align-items:start}
.cpf-mid{min-width:0}
.cpf-left,.cpf-right{display:grid;gap:14px;min-width:0;align-self:start}
.cpf-left .card,.cpf-right .card{border-radius:18px}
.cpf-nav{padding:10px;display:grid;gap:2px;position:relative;overflow:hidden}
.cpf-nav::before,.cpf-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899)}
.cpf-nav a{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:11px;color:var(--text);text-decoration:none;font-size:.9rem;font-weight:500;transition:background .15s,transform .15s}
.cpf-nav a:hover{background:color-mix(in srgb,var(--c1,var(--accent)) 9%,transparent);transform:translateX(2px);text-decoration:none}
.cpf-nav a.on{background:linear-gradient(135deg,color-mix(in srgb,var(--c1,var(--accent)) 16%,transparent),color-mix(in srgb,var(--c2,var(--accent2)) 10%,transparent));font-weight:700;box-shadow:inset 3px 0 0 var(--c1,var(--accent))}
.cpf-all{margin-top:4px}.cpf-all b{font:700 .95rem var(--hfont)}
.cpf-g{display:grid;gap:1px;margin-top:8px}
.cpf-g small{font:600 .62rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:2px 9px 3px}
.cpf-dot{width:26px;height:26px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1,var(--accent)),var(--c2,var(--accent2)));clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.cpf-dot svg{width:13px;height:13px}
.cpf-dot.lg{width:38px;height:38px}.cpf-dot.lg svg{width:18px;height:18px}
.cpf-card{position:relative;overflow:hidden;padding:16px;display:grid;gap:8px}
.cpf-card .kicker{margin:0;font:600 .66rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.cpf-card>b{font:700 .98rem/1.3 var(--hfont)}
.cpf-card p,.cpf-card small{margin:0;line-height:1.45}
.cpf-meter{height:7px;border-radius:7px;background:color-mix(in srgb,var(--text) 9%,transparent);overflow:hidden}
.cpf-meter span{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899)}
.cpf-up{justify-self:start;margin-top:2px}
.cpf-tips ol{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:9px}
.cpf-tips li{counter-increment:t;display:grid;grid-template-columns:22px 1fr;gap:9px;font-size:.87rem;line-height:1.45}
.cpf-tips li::before{content:counter(t);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 .72rem/1 var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.cpf-stats{display:grid;gap:6px}
.cpf-stat{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s}
.cpf-stat:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-1px);text-decoration:none}
.cpf-stat>span:last-child{display:flex;align-items:baseline;gap:7px;min-width:0}
.cpf-stat b{font:700 1.15rem/1 var(--hfont);background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.cpf-stat small{color:var(--muted);font-size:.8rem}
.cpf-trust{grid-template-columns:auto 1fr;align-items:start;gap:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--good,#10b981) 9%,var(--surface)),var(--surface))}
.cpf-trust .cpf-dot{background:linear-gradient(135deg,#10b981,#06b6d4)}
.cpf-trust b{display:block;font:700 .95rem/1.3 var(--hfont);margin-bottom:3px}
.cpf-trust::before{background:linear-gradient(90deg,#10b981,#06b6d4)}
/* the tool hero and hub fit the narrower middle column */
.cpf-mid .cp-hero{grid-template-columns:1fr;padding:26px 24px}
.cpf-mid .cp-hero-stats{grid-template-columns:repeat(3,1fr);min-width:0}
.cpf-mid .cp-hero-stats>div{flex-direction:column;align-items:flex-start;gap:4px}
.cpf-mid .cp-hero-stats b{min-width:0}
.cpf-mid .cp-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cpf-mid .cp-switch-w{display:none}
html[data-theme="dark"] .cpf-trust{background:linear-gradient(135deg,color-mix(in srgb,#10b981 14%,var(--surface)),var(--surface))}
@media (max-width:1100px){.cpf-grid{grid-template-columns:minmax(0,1fr) 250px}.cpf-left{display:none}.cpf-right{grid-column:auto;position:static!important}}
@media (max-width:900px){.cpf-grid{grid-template-columns:1fr}.cpf-right{grid-column:auto;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}

/* footer menu and app buttons live under the left ad; the bottom footer only shows when that column is hidden */
.cpf-left .rail-foot{display:grid;font-size:.76rem}
@media (min-width:901px){body:has(.cpf-left .rail-foot) .foot-app{display:none}}

/* weather.css */
/* ReconHire Weather: the #/weather page (sky hero, alerts, hourly strip, 7-day, radar, settings) and the current
   temperature chip in the top bar, Me menu and Home profile card. Same vocabulary as network-grow.css, jobs-home.css and
   rh-skin-*.css: mono "// kickers", Chakra Petch headings, the accent to accent2 gradient, navy grid panels with a hex motif,
   rounded cards with a thin gradient bar on top. Theme tokens only, so light and dark both apply. */

.wx2{position:relative;--wrg:linear-gradient(135deg,var(--accent),var(--accent2));--whex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M50 3 94 28v56L50 109 6 84V28z' opacity='.5'/%3E%3Cpath d='M50 25 75 39v34L50 87 25 73V39z' opacity='.55'/%3E%3Ccircle cx='50' cy='56' r='5' fill='%23ffffff' stroke='none' opacity='.45'/%3E%3C/svg%3E");
  --wgrid:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px;
  display:grid;gap:16px;min-width:0}
.wx2 .wx2-k{display:block;font:600 .68rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.wx2 .wx2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

/* ---------- weather icons ---------- */
.wxi{display:block;flex:none;width:40px;height:40px;overflow:visible}
.wxi .c-sun{fill:#fbbf24}
.wxi .c-rays{fill:none;stroke:#f59e0b;stroke-width:3.6;stroke-linecap:round}
.wxi .c-moon{fill:#c7d2fe;stroke:#818cf8;stroke-width:1.5}
.wxi .c-star{fill:#a5b4fc}
.wxi .c-cloud{fill:#eef2f8;stroke:#94a3b8;stroke-width:2;stroke-linejoin:round}
.wxi .c-cloud.c-back{fill:#cbd5e1;stroke:#94a3b8}
.wxi .c-cloud.c-dark{fill:#64748b;stroke:#475569}
.wxi .c-drop{fill:none;stroke:#3b82f6;stroke-width:3.4;stroke-linecap:round}
.wxi .c-bolt{fill:#facc15;stroke:#ca8a04;stroke-width:1.2;stroke-linejoin:round}
.wxi .c-flake{fill:none;stroke:#38bdf8;stroke-width:2.6;stroke-linecap:round}
.wxi .c-fog{fill:none;stroke:#94a3b8;stroke-width:3.4;stroke-linecap:round}
.wxi .c-wind{fill:none;stroke:#60a5fa;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.wxi .c-warn{fill:#f59e0b;stroke:#b45309;stroke-width:2;stroke-linejoin:round}
.wxi .c-warnmark{fill:none;stroke:#fff;stroke-width:4.4;stroke-linecap:round}
.wxi .c-hex{fill:color-mix(in srgb,var(--good) 14%,transparent);stroke:var(--good);stroke-width:2.4;stroke-linejoin:round}
.wxi .c-tick{fill:none;stroke:var(--good);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.wxi .c-globe{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:2.4}
.wxi .c-globel{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.8}
html[data-theme="dark"] .wxi .c-cloud{fill:#cbd5e1;stroke:#e2e8f0;stroke-width:1}
html[data-theme="dark"] .wxi .c-cloud.c-back{fill:#94a3b8;stroke:#94a3b8}
html[data-theme="dark"] .wxi .c-cloud.c-dark{fill:#64748b;stroke:#94a3b8}
html[data-theme="dark"] .wxi .c-moon{fill:#e0e7ff;stroke:#c7d2fe}
html[data-theme="dark"] .wxi .c-fog{stroke:#cbd5e1}
.wxi.anim .c-spin{transform-origin:32px 32px;animation:wx2spin 26s linear infinite}
.wxi-partly.anim .c-spin{transform-origin:24px 22px}
.wxi.anim .c-fall{animation:wx2fall 1.3s linear infinite}
.wxi.anim .c-bolt{animation:wx2flash 3.4s ease-in-out infinite}
@keyframes wx2spin{to{transform:rotate(360deg)}}
@keyframes wx2fall{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}100%{transform:translateY(5px);opacity:0}}
@keyframes wx2flash{0%,82%,100%{opacity:1}86%{opacity:.25}90%{opacity:1}93%{opacity:.4}}

/* ---------- hero: big "now" card with a sky that follows the weather and the time of day ---------- */
.wx2-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;color:#fff;padding:22px 24px 18px;min-height:250px;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 46px -26px rgba(15,23,42,.65);background:linear-gradient(160deg,#1e3a8a,#312e81)}
.wx2-hero::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--wrg);z-index:2}
.wx2-hero::after{content:"";position:absolute;z-index:-1;right:-40px;top:-46px;width:250px;height:280px;opacity:.16;background:var(--whex) center/contain no-repeat;pointer-events:none}
.wx2-hero-in{position:relative;display:grid;gap:14px}
.wx2-hero-in::before{content:"";position:absolute;inset:-22px -24px -18px;z-index:-1;background:var(--wgrid);-webkit-mask:linear-gradient(90deg,transparent,#000 35%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 35%,#000 70%,transparent);opacity:.7;pointer-events:none}
.wx2-hero .wx2-k{color:rgba(255,255,255,.82)}
.wx2-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wx2-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font:600 .82rem var(--font);backdrop-filter:blur(6px)}
.wx2-pill .ico{width:15px;height:15px}
.wx2-hero-main{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.wx2-hero-ic{display:grid;place-items:center;width:132px;height:132px;flex:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0))}
.wxi.wxi-hero{width:112px;height:112px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.wx2-hero .wxi .c-cloud{fill:#fff;stroke:rgba(255,255,255,.6);stroke-width:1}
.wx2-hero .wxi .c-cloud.c-back{fill:rgba(255,255,255,.62);stroke:none}
.wx2-hero .wxi .c-cloud.c-dark{fill:#94a3b8;stroke:#cbd5e1}
.wx2-hero .wxi .c-moon{fill:#fef9c3;stroke:#fde68a}
.wx2-hero .wxi .c-star{fill:#fef3c7}
.wx2-hero-t{display:grid;gap:2px;min-width:0}
.wx2-temp{font:700 clamp(4rem,9vw,6.2rem)/.92 var(--hfont);letter-spacing:-.02em;text-shadow:0 6px 24px rgba(0,0,0,.18)}
.wx2-temp span{font-size:.36em;font-weight:600;vertical-align:top;margin-left:4px;opacity:.85;letter-spacing:0}
.wx2-cond{font:600 1.28rem/1.25 var(--hfont);letter-spacing:.01em}
.wx2-feels{display:flex;gap:14px;flex-wrap:wrap;font-size:.92rem;opacity:.9}
.wx2-feels span{font:600 .84rem var(--mono);letter-spacing:.04em}
.wx2-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wx2-tile{display:grid;gap:1px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);min-width:0}
.wx2-tile small{font:600 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.78}
.wx2-tile b{font:700 1.25rem/1.2 var(--hfont)}
.wx2-tile span{font-size:.76rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx2-hero-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.76rem;opacity:.85}
.wx2-upd{display:inline-flex;align-items:center;gap:7px}
.wx2-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
.wx2-upd.stale .wx2-dot{background:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.25)}
.wx2-hero-empty{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:6px 0 4px}
.wx2-hero-empty .wx2-title,.wx2-hero .wx2-title{font:700 clamp(1.5rem,3vw,2.1rem)/1.15 var(--hfont);margin:0 0 6px;color:#fff}
.wx2-hero-empty p{margin:0 0 12px;max-width:560px;opacity:.9}
.wx2-btn-glass{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;box-shadow:none}
.wx2-btn-glass:hover{background:rgba(255,255,255,.28)}
.wx2-skel{height:150px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.18),rgba(255,255,255,.08)) 0 0/200% 100%;animation:wx2shim 1.4s linear infinite}
@keyframes wx2shim{to{background-position:-200% 0}}
/* skies */
.wx2-hero.sky-load{background:linear-gradient(160deg,#1e3a8a,#4338ca)}
.wx2-hero.sky-clear{background:radial-gradient(420px 260px at 12% 18%,rgba(253,224,71,.45),transparent 70%),linear-gradient(165deg,#0ea5e9 0%,#2563eb 55%,#4f46e5 100%)}
.wx2-hero.sky-night{background:radial-gradient(1.5px 1.5px at 18% 22%,#fff 60%,transparent),radial-gradient(1px 1px at 32% 58%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 56% 16%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 44%,#fff 60%,transparent),radial-gradient(1.2px 1.2px at 88% 20%,#fff 60%,transparent),radial-gradient(1px 1px at 44% 80%,#fff 60%,transparent),radial-gradient(1px 1px at 8% 70%,#fff 60%,transparent),radial-gradient(360px 220px at 14% 20%,rgba(199,210,254,.22),transparent 70%),linear-gradient(170deg,#0b1026 0%,#1e1b4b 55%,#312e81 100%)}
.wx2-hero.sky-cloud{background:radial-gradient(500px 260px at 85% 0%,rgba(255,255,255,.22),transparent 70%),linear-gradient(165deg,#64748b 0%,#475569 55%,#334155 100%)}
.wx2-hero.sky-cloud.is-night{background:radial-gradient(500px 260px at 85% 0%,rgba(148,163,184,.2),transparent 70%),linear-gradient(165deg,#334155,#1e293b 60%,#0f172a)}
.wx2-hero.sky-rain{background:repeating-linear-gradient(105deg,rgba(255,255,255,.07) 0 1px,transparent 1px 14px),linear-gradient(165deg,#475569 0%,#1e3a5f 60%,#1e293b 100%)}
.wx2-hero.sky-storm{background:radial-gradient(300px 180px at 70% 10%,rgba(250,204,21,.18),transparent 70%),repeating-linear-gradient(105deg,rgba(255,255,255,.06) 0 1px,transparent 1px 12px),linear-gradient(165deg,#3b0764 0%,#1e1b4b 50%,#0f172a 100%)}
.wx2-hero.sky-snow{color:#0f172a;background:radial-gradient(2px 2px at 20% 30%,#fff 60%,transparent),radial-gradient(2px 2px at 60% 20%,#fff 60%,transparent),radial-gradient(2px 2px at 80% 60%,#fff 60%,transparent),radial-gradient(2px 2px at 40% 75%,#fff 60%,transparent),linear-gradient(165deg,#e0f2fe 0%,#bae6fd 50%,#a5b4fc 100%)}
.wx2-hero.sky-fog{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%,rgba(255,255,255,.14) 70%,transparent),linear-gradient(165deg,#94a3b8 0%,#64748b 60%,#475569 100%)}
.wx2-hero.sky-away{background:radial-gradient(400px 240px at 85% 10%,rgba(124,58,237,.35),transparent 70%),linear-gradient(165deg,#0f172a,#1e1b4b 60%,#312e81)}
.wx2-hero.sky-snow .wx2-k,.wx2-hero.sky-snow .wx2-title{color:#0f172a}
.wx2-hero.sky-snow .wx2-pill,.wx2-hero.sky-snow .wx2-tile{background:rgba(255,255,255,.5);border-color:rgba(15,23,42,.12)}
.wx2-hero.sky-snow .wxi .c-cloud{fill:#fff;stroke:#94a3b8}

/* ---------- two columns ---------- */
.wx2-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.wx2-main,.wx2-side{display:grid;gap:16px;min-width:0}
.wx2-main>div:empty,.wx2-side>div:empty{display:none}

/* ---------- cards ---------- */
.wx2 .wx2-card{position:relative;overflow:hidden;padding:16px 18px;border-radius:18px;display:grid;gap:12px;min-width:0}
.wx2 .wx2-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--wrg);opacity:.9}
.wx2-ch{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.wx2 .wx2-h{font:700 1.12rem/1.2 var(--hfont);margin:2px 0 0;letter-spacing:.01em}
.wx2-cfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:500 .72rem var(--mono);letter-spacing:.04em;color:var(--dim)}
.wx2-cfoot .stale{color:#b45309}
html[data-theme="dark"] .wx2-cfoot .stale{color:#fcd34d}
.wx2-note{margin:0}

/* ---------- alerts ---------- */
.wx2-alerts{--al:var(--info)}
.wx2-calm{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--good) 40%,var(--line));background:color-mix(in srgb,var(--good) 6%,transparent)}
.wxi.wxi-calm{width:46px;height:46px}
.wx2-calm b{font:700 1rem var(--hfont)}
.wx2-calm p{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.wx2-alert{--al:#2563eb;--al-bg:color-mix(in srgb,var(--al) 9%,var(--surface));display:grid;gap:8px;padding:14px 14px 12px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--al) 35%,var(--line));background:linear-gradient(100deg,var(--al-bg),var(--surface) 75%);box-shadow:inset 4px 0 0 var(--al)}
.wx2-alert.lv-warning{--al:#dc2626}
.wx2-alert.lv-watch{--al:#ea580c}
.wx2-alert.lv-advisory{--al:#ca8a04}
.wx2-alert.lv-statement{--al:#2563eb}
html[data-theme="dark"] .wx2-alert{--al-bg:color-mix(in srgb,var(--al) 16%,var(--surface))}
html[data-theme="dark"] .wx2-alert.lv-warning{--al:#f87171}
html[data-theme="dark"] .wx2-alert.lv-watch{--al:#fb923c}
html[data-theme="dark"] .wx2-alert.lv-advisory{--al:#facc15}
html[data-theme="dark"] .wx2-alert.lv-statement{--al:#60a5fa}
.wx2-ah{display:flex;gap:12px;align-items:center}
.wx2-ah>div{display:grid;gap:1px;min-width:0}
.wx2-aic{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:12px;background:color-mix(in srgb,var(--al) 16%,transparent)}
.wxi.wxi-alert{width:32px;height:32px}
.wx2-lv{font:700 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--al)}
.wx2-alert.lv-advisory .wx2-lv{color:color-mix(in srgb,var(--al) 70%,var(--text))}
.wx2-alert h3{margin:0;font:700 1.06rem/1.2 var(--hfont)}
.wx2-ah small{color:var(--muted);font-size:.8rem}
.wx2-ahl{margin:0;font-weight:500;font-size:.9rem}
.wx2-todo{margin:0;padding:8px 11px;border-radius:10px;font-size:.88rem;background:color-mix(in srgb,var(--al) 10%,transparent)}
.wx2-more{justify-self:start;display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 2px;color:var(--accent);font:600 .82rem var(--font);cursor:pointer}
.wx2-more .ico{width:15px;height:15px;transition:transform .2s}
.wx2-more[aria-expanded="true"] .ico{transform:rotate(180deg)}
.wx2-afull{display:grid;gap:10px;padding-top:6px;border-top:1px dashed var(--line2)}
.wx2-afull p{margin:3px 0 0;white-space:pre-line;font-size:.86rem;color:var(--muted)}
.wx2-afull .btn{justify-self:start}

/* ---------- hourly strip: scrolls sideways, no visible scroll bar ---------- */
.wx2-arrs{display:none;gap:6px}
.wx2-arr,.wx2-iconbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .15s,color .15s,opacity .15s}
.wx2-arr:hover:not(:disabled),.wx2-iconbtn:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}
.wx2-arr:disabled{opacity:.35;cursor:default}
.wx2-arr .ico,.wx2-iconbtn .ico{width:17px;height:17px}
@media (hover:hover) and (min-width:700px){.wx2-arrs{display:flex}}
.wx2-hscroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain;margin:0 -18px;padding:0 18px;border-radius:0}
.wx2-hscroll::-webkit-scrollbar{display:none}
.wx2-hscroll:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}
.wx2-htrack{position:relative}
.wx2-curve{position:absolute;left:0;top:64px;pointer-events:none;overflow:visible}
.wx2-curve .wx2-pt{fill:var(--surface);stroke:var(--accent);stroke-width:2}
.wx2-hcells{position:relative;display:flex}
.wx2-hc{flex:none;width:68px;display:grid;justify-items:center;grid-template-rows:20px 36px 60px 18px;gap:4px;padding:8px 0 6px;border-radius:14px;scroll-snap-align:start}
.wx2-hc.now{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent2) 6%,transparent))}
.wx2-hc.newday{box-shadow:inset 1px 0 0 var(--line2)}
.wx2-hct{font:600 .72rem var(--mono);letter-spacing:.04em;color:var(--muted)}
.wx2-hc.now .wx2-hct,.wx2-hc.newday .wx2-hct{color:var(--accent2);font-weight:700}
.wxi.wxi-sm{width:34px;height:34px}
.wx2-hband{position:relative;width:100%}
.wx2-hband b{position:absolute;left:0;right:0;text-align:center;font:700 .95rem/1.4 var(--hfont)}
.wx2-pop{display:inline-flex;align-items:center;gap:3px;font:600 .7rem var(--mono);color:#2563eb}
.wx2-pop.lo{color:var(--dim);opacity:.75}
.wx2-pop.hi{color:#1d4ed8}
html[data-theme="dark"] .wx2-pop{color:#93c5fd}
html[data-theme="dark"] .wx2-pop.hi{color:#bfdbfe}
.wx2-drop{display:inline-block;width:7px;height:9px;background:currentColor;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;clip-path:polygon(50% 0,100% 62%,92% 88%,50% 100%,8% 88%,0 62%)}

/* ---------- 7-day ---------- */
.wx2-days{display:grid;gap:4px}
.wx2-drow{border-radius:14px;transition:background .15s}
.wx2-drow.open{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.wx2-day{width:100%;display:grid;grid-template-columns:96px 36px minmax(0,1fr) 76px 34px minmax(70px,150px) 34px 18px;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:14px;background:none;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.wx2-day:hover{background:color-mix(in srgb,var(--text) 4%,transparent)}
.wx2-dn{display:grid;line-height:1.2}
.wx2-dn b{font:700 .95rem var(--hfont)}
.wx2-dn small{font:500 .7rem var(--mono);color:var(--dim);letter-spacing:.04em}
.wx2-ds{font-size:.86rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx2-dp{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:4px;font:600 .72rem var(--mono);color:#2563eb}
.wx2-dp.lo{color:var(--dim)}
html[data-theme="dark"] .wx2-dp{color:#93c5fd}
html[data-theme="dark"] .wx2-dp.lo{color:var(--dim)}
.wx2-pbar{grid-column:1/-1;height:4px;margin-top:3px;border-radius:4px;background:color-mix(in srgb,#3b82f6 14%,transparent);overflow:hidden}
.wx2-pbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#60a5fa,#2563eb)}
.wx2-lo,.wx2-hi{font:700 .95rem var(--hfont);text-align:right}
.wx2-lo{color:var(--dim)}
.wx2-hi{text-align:left}
.wx2-rbar{position:relative;height:6px;border-radius:6px;background:color-mix(in srgb,var(--text) 9%,transparent)}
.wx2-rbar i{position:absolute;top:0;bottom:0;border-radius:6px;min-width:6px}
.wx2-chev{width:16px;height:16px;color:var(--dim);transition:transform .2s}
.wx2-day[aria-expanded="true"] .wx2-chev{transform:rotate(180deg)}
.wx2-dmore{display:grid;gap:6px;padding:0 14px 12px 56px}
.wx2-dmore p{margin:0;font-size:.88rem;color:var(--muted)}
.wx2-dmore p b{color:var(--text)}

/* ---------- radar ---------- */
.wx2-rtools{gap:8px;flex-wrap:nowrap}
.wx2-seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--surface2);border:1px solid var(--line)}
.wx2-seg button{border:0;background:none;padding:5px 10px;border-radius:8px;font:600 .76rem var(--font);color:var(--muted);cursor:pointer;white-space:nowrap}
.wx2-seg button[aria-pressed="true"]{background:var(--wrg);color:#fff;box-shadow:0 6px 14px -8px var(--accent)}
.wx2-seg button:disabled{opacity:.4;cursor:default}
.wx2-rimg{position:relative;overflow:hidden;border-radius:14px;background:#0b1220;border:1px solid var(--line2);aspect-ratio:600/550;display:grid;place-items:center}
.wx2-rimg.nat{aspect-ratio:auto;min-height:180px}
.wx2-rimg img{display:block;width:100%;height:100%;object-fit:contain}
.wx2-rimg.nat img{height:auto}
.wx2-rimg.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.08),rgba(255,255,255,0)) 0 0/200% 100%,var(--wgrid);animation:wx2shim 1.3s linear infinite}
.wx2-rlive{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;background:rgba(2,6,23,.72);color:#fff;font:700 .6rem var(--mono);letter-spacing:.16em}
.wx2-rlive i{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:wx2pulse 1.6s ease-in-out infinite}
@keyframes wx2pulse{50%{opacity:.35}}
.wx2-rmsg{position:absolute;inset:auto 16px;margin:0;text-align:center;color:#cbd5e1;font-size:.88rem}
.wx2-credit{font-weight:700;color:var(--muted)}
.wx2-iconbtn.spin1 .ico{animation:wx2spin .7s ease}

/* ---------- settings ---------- */
.wx2-where{display:flex;gap:12px;align-items:center}
.wx2-where>div{display:grid;gap:1px;min-width:0}
.wx2-where b{font:700 1.02rem var(--hfont)}
.wx2-hexpin{display:grid;place-items:center;width:44px;height:48px;flex:none;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:var(--wrg);color:#fff}
.wx2-hexpin .ico{width:20px;height:20px}
.wx2-zip{display:flex;gap:8px}
.wx2-zip .input{flex:1;min-width:0}
.wx2-alt{gap:8px;flex-wrap:wrap}
.wx2-sw{display:grid;gap:10px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wx2-set .field{margin:0}
.wx2-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text);font-weight:600;font-size:.88rem}
.wx2-link:hover{text-decoration:none;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.wx2-link span{flex:1}
.wx2-link .ico{width:17px;height:17px;color:var(--accent)}
.wx2-fine{display:flex;gap:8px;margin:0;font-size:.76rem;color:var(--dim)}
.wx2-fine .ico{width:14px;height:14px;flex:none;margin-top:2px}
.wx2-safety p{margin:0;color:var(--muted);font-size:.88rem}
.wx2-safety .row{gap:8px;flex-wrap:wrap}

/* ---------- current temperature chip ---------- */
.wx-now{display:inline-flex;align-items:center;gap:6px;color:var(--text);text-decoration:none;white-space:nowrap}
.wx-now:hover{text-decoration:none}
.wx-now b{font:700 .9rem/1 var(--hfont);letter-spacing:.01em}
.wxi.wxi-chip{width:22px;height:22px}
.wx-now-top{flex:none;height:36px;padding:0 10px 0 7px;margin-left:2px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface2) 80%,var(--surface));transition:border-color .2s,box-shadow .2s}
.wx-now-top:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}

.wx-now-t{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;min-width:0}
.menu a.wx-now-menu{width:auto;gap:8px;margin:0;padding:8px 12px;border-radius:12px;background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent2) 8%,transparent));border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))}
.menu a.wx-now-menu:hover{background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent2) 12%,transparent))}
.wx-now-menu b{font-size:1rem}
/* the top-bar chip is off: the bar has no spare room; the temperature shows in the Me menu and on the Home card */
.wx-now-top{display:none!important}
.wx-now-card{justify-content:center;max-width:100%;margin:8px auto 0;padding:5px 12px;border-radius:999px;font-size:.8rem;background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.wx-now-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.f-me .wx-now-card{display:flex;width:max-content}
.wx-now-card .wx-now-t{max-width:130px}

/* ---------- phones ---------- */
@media (max-width:1000px){.wx2-grid{grid-template-columns:minmax(0,1fr)}.wx2-side{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
@media (max-width:700px){
  .wx2{gap:12px}
  .wx2-hero{padding:18px 16px 14px;border-radius:18px;min-height:0}
  .wx2-hero-in::before{inset:-18px -16px -14px}
  .wx2-hero-main{gap:12px;flex-wrap:nowrap}
  .wx2-hero-ic{width:92px;height:92px}
  .wxi.wxi-hero{width:80px;height:80px}
  .wx2-temp{font-size:3.9rem}
  .wx2-cond{font-size:1.08rem}
  .wx2-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wx2-side{grid-template-columns:minmax(0,1fr)}
  .wx2 .wx2-card{padding:14px;border-radius:16px}
  .wx2-hscroll{margin:0 -14px;padding:0 14px}
  .wx2-day{grid-template-columns:78px 30px 44px 28px minmax(30px,1fr) 28px;gap:7px;padding:8px 6px}
  .wx2-ds,.wx2-chev{display:none}
  .wx2-dn b{font-size:.86rem;white-space:nowrap}
  .wx2-dmore{padding:0 10px 12px}
  .wx2-ch{align-items:center}
}
@media (prefers-reduced-motion:reduce){.wxi.anim .c-spin,.wxi.anim .c-fall,.wxi.anim .c-bolt,.wx2-skel,.wx2-rimg.loading::after,.wx2-rlive i{animation:none}}

/* ---------- weather location: source badge, Change popover, mode picker, location prompt ---------- */
.wx2-placebar{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wx-src{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:999px;font:600 .74rem var(--font);white-space:nowrap;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.wx-src .ico{width:13px;height:13px}
.wx2-hero .wx-src{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
.wx2-hero .wx-src-device{background:rgba(74,222,128,.2);border-color:rgba(74,222,128,.45)}
.wx2-hero.sky-snow .wx-src{background:rgba(255,255,255,.5);color:#0f172a;border-color:rgba(15,23,42,.12)}
.wx2-chg{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:inherit;font:600 .78rem var(--font);cursor:pointer}
.wx2-chg:hover{background:rgba(255,255,255,.22)}
.wx2-chg .ico{width:13px;height:13px;transition:transform .2s}
.wx2-chg[aria-expanded="true"] .ico{transform:rotate(180deg)}
.wx2-pop{position:absolute;right:0;top:60px;z-index:30;width:min(380px,calc(100vw - 32px));display:grid;gap:8px;padding:14px;border-radius:16px;color:var(--text);background:var(--surface);border:1px solid var(--line2);box-shadow:0 24px 48px -20px rgba(15,23,42,.55)}
.wx2-pop::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:var(--wrg)}
.wx2-pop .wx2-k{color:var(--accent2)}
.wx-mode-list{display:grid;gap:6px}
.wx-mode-row{display:grid;gap:8px}
.wx-mode-row>.btn,.wx-mode-row>.wx2-zip{margin-left:34px}
.wx-mode-row>.btn{justify-self:start}
.wx-mode-opt{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.wx-mode-opt:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.wx-mode-opt.on{border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),color-mix(in srgb,var(--accent2) 6%,var(--surface)))}
.wx-mode-opt>span{display:grid;gap:1px;min-width:0}
.wx-mode-opt b{font:700 .92rem var(--hfont)}
.wx-mode-opt small{color:var(--muted);font:400 .8rem/1.4 var(--font);letter-spacing:0;text-transform:none}
.wx-mode-dot{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;border:2px solid var(--line2);background:var(--surface)}
.wx-mode-opt.on .wx-mode-dot{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 4px,var(--surface) 4.5px)}
.wx-mode.compact{display:grid;gap:8px;justify-items:end}
.wx-mode.compact .wx2-zip{width:min(240px,100%)}
.wx2-ask{display:flex;gap:14px;align-items:flex-start;max-width:440px}
.wx2-ask p{margin:0 0 8px}
.wx2-ask ul{margin:0;padding-left:18px;color:var(--muted);font-size:.88rem;display:grid;gap:4px}
.wxi.wxi-ask{width:56px;height:56px}
@media (max-width:700px){.wx2-pop{position:fixed;left:12px;right:12px;top:auto;bottom:76px;z-index:70;width:auto;max-height:72vh;overflow:auto;box-shadow:0 -12px 40px -8px rgba(2,6,23,.55)}.wx-mode.compact{justify-items:stretch}.wx2-ask{flex-direction:column}}
/* the Home card temperature chip must never widen the sidebar (long conditions like "Heavy Rain and Fog/Mist") */
.f-me .wx-now-card{width:auto;max-width:calc(100% - 20px);overflow:hidden}
.wx-now-card .wx-now-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* acct-profiles.css */
/* ReconHire: account types made visible (hiring-ui.js).
   - Employer and recruiter profile designs: a company-forward header on the member page (#/member), your own profile
     (#/profile) and the public wallet (/u/<handle>). Employers are teal/green, recruiters amber/gold, so the type reads
     at a glance. Job seekers and accounts under review keep the regular profile.
   - The business gate dialog, the "under review" status card on #/employer, the account type status pill, and the
     account requests list in Admin → Employers.
   Same vocabulary as rh-skin-feed.css and network-grow.css: mono "// kickers", Chakra Petch headings (var(--hfont)),
   a navy grid cover with a hex motif, gradient pills. Colors come from theme tokens plus the two type accents. */

.ap-emp,.ap-perk.t-employer,.ap-type.t-employer,.ap-adm-ic.t-employer,.ap-adm-co.t-employer{--ap-a:#0f766e;--ap-b:#16a34a;--ap-ink:#0f766e}
.ap-rec,.ap-perk.t-recruiter,.ap-type.t-recruiter,.ap-adm-ic.t-recruiter,.ap-adm-co.t-recruiter{--ap-a:#b45309;--ap-b:#d97706;--ap-ink:#92400e}
html[data-theme="dark"] :is(.ap-emp,.ap-perk.t-employer,.ap-type.t-employer,.ap-adm-ic.t-employer,.ap-adm-co.t-employer){--ap-a:#14b8a6;--ap-b:#22c55e;--ap-ink:#5eead4}
html[data-theme="dark"] :is(.ap-rec,.ap-perk.t-recruiter,.ap-type.t-recruiter,.ap-adm-ic.t-recruiter,.ap-adm-co.t-recruiter){--ap-a:#d97706;--ap-b:#f59e0b;--ap-ink:#fcd34d}

.ap-kick{display:block;font:600 .66rem/1.25 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ap-ink,var(--accent2));margin:0 0 3px}

/* ---------- profile header ---------- */
.card.ap-head{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--ap-a) 32%,var(--line))!important;box-shadow:0 14px 34px -26px color-mix(in srgb,var(--ap-a) 70%,transparent)}
.card.ap-head::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--ap-a),var(--ap-b));pointer-events:none;z-index:2}
.ap-cover{position:relative!important;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%23ffffff' stroke-width='1.3'%3E%3Cpath d='M50 3 94 28v56L50 109 6 84V28z' opacity='.22'/%3E%3Cpath d='M50 25 75 39v34L50 87 25 73V39z' opacity='.14'/%3E%3C/svg%3E") right 26px center/104px auto no-repeat,
  linear-gradient(rgba(148,163,255,.12) 1px,transparent 1px) 0 0/18px 18px,
  linear-gradient(90deg,rgba(148,163,255,.12) 1px,transparent 1px) 0 0/18px 18px,
  radial-gradient(300px 140px at 86% 0%,color-mix(in srgb,var(--ap-b) 60%,transparent),transparent 70%),
  radial-gradient(240px 130px at 0% 100%,color-mix(in srgb,var(--ap-a) 55%,transparent),transparent 70%),
  linear-gradient(120deg,#0b1430 0%,#13234f 55%,#0d2a3a 100%)!important}
.ap-rec .ap-cover{background-color:#1b1530}
.ap-cover>img{position:relative;z-index:0}
.ap-ribbon{position:absolute;left:16px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:999px;
  font:700 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--ap-a),var(--ap-b));
  box-shadow:0 6px 18px -6px color-mix(in srgb,var(--ap-b) 80%,transparent),inset 0 0 0 1px rgba(255,255,255,.22)}
.ap-ribbon .ico{width:14px;height:14px}
.ap-rec .ap-ribbon{color:#1c1204}
html[data-theme="dark"] .ap-rec .ap-ribbon{color:#1c1204}
/* public wallet: no cover there, so a band goes on top of the card */
.wl-hero.ap-head{padding-top:0}
.wl-hero .ap-band{flex:1 1 100%;height:96px;margin:0 -26px;border-radius:0}
@media (max-width:640px){.wl-hero .ap-band{margin:0 -18px;height:84px}}

/* the company / agency strip under the name */
.ap-strip{grid-column:1/-1;flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin:14px 0 0;padding:14px 20px 16px;
  border-top:1px dashed color-mix(in srgb,var(--ap-a) 30%,var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--ap-a) 8%,transparent),color-mix(in srgb,var(--ap-b) 3%,transparent) 70%)}
.wl-hero .ap-strip{margin:16px -26px -26px;padding:14px 26px 18px}
.pf-hero .ap-strip{margin-top:4px}
.ap-co{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 320px}
.ap-logo{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid color-mix(in srgb,var(--ap-a) 30%,var(--line));
  box-shadow:0 6px 16px -10px color-mix(in srgb,var(--ap-a) 80%,transparent)}
.ap-logo img{width:100%;height:100%;object-fit:contain}
.ap-logo>span{font:700 1.35rem/1 var(--hfont);background:linear-gradient(135deg,var(--ap-a),var(--ap-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.ap-co-t{display:grid;gap:3px;min-width:0}
.ap-co-name{display:flex;align-items:center;gap:7px;min-width:0}
.ap-co-name b{font:600 1.12rem/1.25 var(--hfont);color:var(--text);letter-spacing:.01em;overflow-wrap:anywhere}
.ap-ck{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--ap-a),var(--ap-b));box-shadow:0 0 0 3px color-mix(in srgb,var(--ap-a) 18%,transparent)}
.ap-ck .ico{width:12px;height:12px}
.ap-facts{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:.84rem}
.ap-facts span{display:inline-flex;align-items:center;gap:5px}
.ap-facts .ico{width:14px;height:14px;color:var(--ap-ink)}
.ap-specs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px}
.ap-specs small{font:600 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim,var(--muted));margin-right:2px}
.ap-spec{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--ap-ink);
  background:color-mix(in srgb,var(--ap-a) 10%,transparent);border:1px solid color-mix(in srgb,var(--ap-a) 28%,transparent)}
.ap-hiring-for{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font:600 .8rem var(--mono);color:var(--ap-ink)}
.ap-hiring-for .ico{width:14px;height:14px}
.ap-ctas{display:flex;flex-wrap:wrap;gap:8px}
.ap-ctas .btn.ap-cta{border:0;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--ap-a),var(--ap-b));box-shadow:0 8px 20px -10px color-mix(in srgb,var(--ap-a) 85%,transparent)}
.ap-rec .ap-ctas .btn.ap-cta{color:#1c1204}
.ap-ctas .btn.ap-cta:hover{filter:brightness(1.07);text-decoration:none}
.ap-ctas .btn.ghost{border-radius:999px;border-color:color-mix(in srgb,var(--ap-a) 40%,var(--line))!important;color:var(--ap-ink)!important}

/* open roles */
.card.ap-roles{position:relative;overflow:hidden;display:grid;gap:10px;border-color:color-mix(in srgb,var(--ap-a) 24%,var(--line))!important;scroll-margin-top:84px}
.card.ap-roles::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--ap-a),var(--ap-b))}
.ap-roles-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.ap-roles-h h3{margin:0;font:600 1.05rem/1.3 var(--hfont);color:var(--text)}
.ap-count{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:10px;font:700 1rem/1 var(--hfont);color:#fff;background:linear-gradient(135deg,var(--ap-a),var(--ap-b))}
.ap-rec .ap-count{color:#1c1204}
.ap-jobs{display:grid;gap:8px}
.ap-job{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);color:var(--text);background:var(--surface);transition:border-color .15s,background .15s}
.ap-job:hover{text-decoration:none;border-color:color-mix(in srgb,var(--ap-a) 45%,var(--line));background:color-mix(in srgb,var(--ap-a) 6%,var(--surface))}
.ap-job-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;color:var(--ap-ink);background:color-mix(in srgb,var(--ap-a) 12%,transparent)}
.ap-job-ic .ico{width:18px;height:18px}
.ap-job-t{display:grid;gap:2px;flex:1;min-width:0}
.ap-job-t b{font-weight:650;overflow-wrap:anywhere}
.ap-job-t small{color:var(--muted);font-size:.8rem}
.ap-job>.ico:last-child{width:16px;height:16px;color:var(--dim,var(--muted));flex:none}
.ap-roles .btn.sm{justify-self:start}

@media (max-width:720px){
  .ap-strip{padding:12px 20px 16px}
  .ap-ctas{width:100%}
  .ap-ctas .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:640px){.wl-hero .ap-strip{margin:14px -18px -18px;padding:12px 18px 16px;text-align:left}}

/* ---------- business gate dialog ---------- */
.ap-gate .rh-kick{margin-bottom:-4px}
.ap-perks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ap-perk{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--ap-a) 30%,var(--line));background:color-mix(in srgb,var(--ap-a) 6%,var(--surface))}
.ap-perk-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--ap-a),var(--ap-b))}
.ap-perk-ic .ico{width:18px;height:18px}
.ap-perk b{display:block;font:600 1rem/1.25 var(--hfont);color:var(--text)}
.ap-perk small{display:block;color:var(--muted);font-size:.78rem;margin-bottom:6px}
.ap-perk ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.84rem}
.ap-perk li{display:flex;gap:6px;align-items:flex-start}
.ap-perk li .ico{width:14px;height:14px;margin-top:2px;color:var(--ap-ink);flex:none}
.ap-next{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;font-size:.88rem;background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.ap-next .ico{width:18px;height:18px;color:var(--accent);flex:none;margin-top:1px}
.ap-note{margin:0;padding:10px 12px;border-left:3px solid var(--bad);border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--bad) 7%,transparent)}
.ap-note small{display:block;font:600 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bad)}
.ap-note p{margin:4px 0 0}
@media (max-width:560px){.ap-perks{grid-template-columns:1fr}}

/* ---------- status pills (account type dialog, Settings, review card) ---------- */
.ap-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font:700 .7rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ap-pill.ok{color:#047857;background:color-mix(in srgb,#10b981 14%,transparent)}
.ap-pill.wait{color:#92400e;background:color-mix(in srgb,#f59e0b 18%,transparent)}
.ap-pill.bad{color:#b91c1c;background:color-mix(in srgb,#ef4444 13%,transparent)}
.ap-pill.none{color:var(--muted);background:var(--surface2)}
html[data-theme="dark"] .ap-pill.ok{color:#6ee7b7}
html[data-theme="dark"] .ap-pill.wait{color:#fcd34d}
html[data-theme="dark"] .ap-pill.bad{color:#fca5a5}
.ap-st-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ap-cur{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.ap-cur small{font:600 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ap-cur b{font:600 1rem var(--hfont);margin-right:auto}
.ap-review-note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;font-size:.88rem;background:color-mix(in srgb,#f59e0b 10%,transparent);border:1px solid color-mix(in srgb,#f59e0b 30%,transparent)}
.ap-review-note[hidden]{display:none}
.ap-review-note .ico{width:18px;height:18px;flex:none;margin-top:1px;color:#b45309}
html[data-theme="dark"] .ap-review-note .ico{color:#fbbf24}

/* ---------- #/employer: account under review ---------- */
.card.ap-review{position:relative;overflow:hidden;display:grid;gap:12px;padding:20px 22px;border-color:color-mix(in srgb,#f59e0b 35%,var(--line));
  background:linear-gradient(color-mix(in srgb,#f59e0b 5%,transparent) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,color-mix(in srgb,#f59e0b 5%,transparent) 1px,transparent 1px) 0 0/20px 20px,var(--surface)}
.card.ap-review::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#d97706,#f59e0b)}
.card.ap-review.bad{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.card.ap-review.bad::before{background:linear-gradient(90deg,#dc2626,#f97316)}
.ap-review-top{display:flex;gap:14px;align-items:flex-start}
.ap-review-top>div{flex:1;min-width:0}
.ap-review-top h2{margin:0;font:600 1.2rem/1.3 var(--hfont);color:var(--text)}
.ap-review-top p{margin:4px 0 0}
.ap-review-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#d97706,#f59e0b);box-shadow:0 8px 20px -10px #d97706}
.ap-review.bad .ap-review-ic{background:linear-gradient(135deg,#dc2626,#f97316);box-shadow:0 8px 20px -10px #dc2626}
.ap-review-ic .ico{width:22px;height:22px}
.ap-sub{font:600 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ap-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ap-steps li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.ap-steps li b{display:block;font-weight:650}
.ap-steps li small{color:var(--muted)}
.ap-step-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;color:var(--muted);background:var(--surface2);border:1px solid var(--line)}
.ap-step-ic .ico{width:15px;height:15px}
.ap-steps li.done .ap-step-ic{color:#fff;background:#059669;border-color:#059669}
.ap-steps li.on{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.ap-steps li.on .ap-step-ic{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.ap-locked{display:flex;gap:8px;align-items:flex-start;margin:0;color:var(--muted);font-size:.86rem}
.ap-locked .ico{width:16px;height:16px;flex:none;margin-top:2px}
.ap-review-acts{gap:8px;flex-wrap:wrap}
.btn.ap-lockbtn{opacity:.75}
@media (max-width:560px){.card.ap-review{padding:44px 16px 16px}.ap-review-top .ap-pill{position:absolute;top:14px;right:14px}.ap-review-ic{width:38px;height:38px}}

/* ---------- Admin → Employers → Account type requests ---------- */
.ap-adm{gap:10px;margin:6px 0 10px}
.ap-type{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font:700 .7rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ap-ink);
  background:color-mix(in srgb,var(--ap-a) 12%,transparent);border:1px solid color-mix(in srgb,var(--ap-a) 30%,transparent)}
.emp-adm-logo.ap-adm-ic{display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--ap-a),var(--ap-b))}
.emp-adm-logo.ap-adm-ic .ico{width:22px;height:22px}
.card.ap-adm-co{border-left:3px solid var(--ap-a)}

/* ---------- Advertise: open to everyone ---------- */
.ap-ad-open{display:flex;gap:8px;align-items:center;margin:0 0 12px;padding:9px 12px;border-radius:12px;font-size:.88rem;color:var(--text);background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.ap-ad-open .ico{width:16px;height:16px;color:var(--accent);flex:none}
/* the Open roles card sat flush against the employer/recruiter header card */
.card.ap-roles{margin-top:16px!important}
.card.ap-roles+.card,.card.ap-roles+section,.card.ap-roles+div{margin-top:16px}

/* study.css */
/* ReconHire study pages: Cyber Range, Practice exams, Cert path tracker (study-ui.js, range-ui.js, practice-ui.js,
   community-ui.js). Hero panels with grid texture and glows, a right sidebar with an ad and info cards, track and
   vendor colored cards. Theme tokens only, so light and dark both work. */
:root{--sg:linear-gradient(135deg,var(--accent),var(--accent2));--sg3:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899,var(--accent))}
.sx-grid,.hx-grid,.sx-hero,.cm-path,.rg-tracks,.pr-grid,.cm-catalog{--sg:linear-gradient(135deg,var(--accent),var(--accent2));--sg3:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899,var(--accent));
  --sgrid:linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px}

/* layout */
.sx-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.sx-mid{min-width:0}
.sx-right{display:grid;gap:14px;min-width:0;align-self:start}
.sx-right>.card{border-radius:18px}

/* hero */
.sx-hero{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding:28px 26px;margin:0 0 16px;border-radius:24px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:var(--shadow);
  background:var(--sgrid),radial-gradient(520px 260px at 100% 0%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 70%),radial-gradient(480px 260px at 0% 100%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--surface)}
.sx-hero::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--sg3);background-size:200% 100%;animation:sxSlide 6s linear infinite}
.sx-hero h1{margin:4px 0 8px;font:700 clamp(1.6rem,3.4vw,2.5rem)/1.1 var(--hfont);letter-spacing:.005em}
.sx-hero p{margin:0;max-width:640px;color:var(--muted);line-height:1.55}
.sx-k{display:block;font:600 .68rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2)}
.sx-hero-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px;margin-top:18px}
.sx-stat{padding:11px 14px;border-radius:14px;background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));backdrop-filter:blur(6px);display:grid;gap:2px}
.sx-stat b{font:700 1.45rem/1 var(--hfont);background:var(--sg);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-stat small{color:var(--muted);font-size:.78rem}
.sx-hero>.sx-stats{margin-top:0;grid-template-columns:repeat(2,minmax(110px,1fr));min-width:250px}

/* rail cards */
.sx-card{position:relative;overflow:hidden;padding:16px;display:grid;gap:10px}
.sx-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899)}
.sx-t{font:700 1rem/1.3 var(--hfont)}
.sx-p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}
.sx-empty{margin:0;color:var(--muted);font-size:.86rem}
.sx-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sx-row small{color:var(--muted)}
.sx-row em{font-style:normal;font:700 .9rem var(--hfont);color:var(--accent)}
.sx-meter{height:8px;border-radius:8px;background:color-mix(in srgb,var(--text) 9%,transparent);overflow:hidden}
.sx-meter span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899);transition:width .6s}
.sx-card .sx-stats{margin-top:0;grid-template-columns:1fr 1fr}
.sx-card .sx-stat{padding:9px 11px}
.sx-card .sx-stat b{font-size:1.2rem}
.sx-link{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:600;font-size:.88rem;transition:border-color .15s,transform .15s}
.sx-link:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateX(2px);text-decoration:none}
.sx-link .ico{width:16px;height:16px;color:var(--accent)}
.sx-link span{flex:1}.sx-link i{font-style:normal;color:var(--accent2)}
.sx-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.sx-steps li{counter-increment:s;display:grid;grid-template-columns:24px 1fr;column-gap:10px;font-size:.88rem}
.sx-steps li::before{content:counter(s);grid-row:span 2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 .74rem/1 var(--hfont);color:#fff;background:var(--sg)}
.sx-steps b{font-weight:600}.sx-steps small{color:var(--muted);font-size:.8rem;line-height:1.4}
.sx-rank{display:flex;align-items:center;gap:12px}
.sx-rank-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;color:#fff;background:var(--sg);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.sx-rank-ic .ico{width:20px;height:20px}
.sx-rank small{display:block;color:var(--muted);font:600 .64rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.sx-rank b{font:700 1.15rem/1.2 var(--hfont)}
.sx-board{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sx-board li{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:11px;background:var(--surface2);font-size:.88rem}
.sx-board li.me{box-shadow:inset 0 0 0 1.5px var(--accent)}
.sx-place{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 .75rem/1 var(--hfont);background:color-mix(in srgb,var(--text) 9%,transparent)}
.sx-place.p1{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#422006}.sx-place.p2{background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#111}.sx-place.p3{background:linear-gradient(135deg,#fdba74,#c2410c);color:#fff}
.sx-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-board b{font:600 .8rem var(--mono);color:var(--muted)}
.sx-levels{display:grid;gap:7px}
.sx-lv{display:flex;align-items:center;gap:10px;font-size:.86rem}
.sx-lv>span:nth-child(2){flex:1;display:grid}.sx-lv small{color:var(--muted);font-size:.78rem}
.sx-lv em{font-style:normal;font:700 .78rem var(--mono);color:var(--accent2)}
.sx-lv-bars{display:flex;gap:2px;align-items:flex-end;height:16px}
.sx-lv-bars i{width:4px;border-radius:2px;background:color-mix(in srgb,var(--text) 14%,transparent)}
.sx-lv-bars i:nth-child(1){height:5px}.sx-lv-bars i:nth-child(2){height:8px}.sx-lv-bars i:nth-child(3){height:12px}.sx-lv-bars i:nth-child(4){height:16px}
.sx-lv-bars i.on{background:var(--sg)}
.sx-cta{background:radial-gradient(260px 140px at 100% 0%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),var(--surface)}
.sx-note{grid-template-columns:auto 1fr;align-items:start;gap:10px;background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.sx-note::before{background:linear-gradient(90deg,#10b981,#06b6d4)}
.sx-note .ico{width:18px;height:18px;color:#10b981;margin-top:2px}
.sx-note small{color:var(--muted);line-height:1.45}
.sx-modes{display:grid;gap:8px}
.sx-modes>div{display:flex;gap:10px;align-items:flex-start}
.sx-modes>div>span:last-child{display:grid;font-size:.86rem}.sx-modes small{color:var(--muted);font-size:.78rem;line-height:1.4}
.sx-mode-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.sx-mode-ic .ico{width:15px;height:15px}
.sx-plan{display:grid;gap:5px;padding:10px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);color:var(--text);text-decoration:none}
.sx-plan:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);text-decoration:none}
.sx-plan b{font-size:.9rem}.sx-plan small{color:var(--muted);font-size:.78rem}

/* ============ Cyber Range ============ */
.rg-hero-x .rg-hero-art{position:relative;width:170px;height:170px;border-radius:50%;flex:none;
  background:radial-gradient(circle,transparent 30%,color-mix(in srgb,var(--accent) 22%,transparent) 31%,transparent 32%,transparent 55%,color-mix(in srgb,var(--accent) 22%,transparent) 56%,transparent 57%,transparent 80%,color-mix(in srgb,var(--accent) 26%,transparent) 81%,transparent 83%),color-mix(in srgb,var(--accent) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);overflow:hidden}
.rg-radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--accent2) 55%,transparent),transparent 25%);animation:sxSpin 4s linear infinite}
.rg-blip{position:absolute;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 12px #ef4444;animation:sxBlip 2.4s ease-in-out infinite}
.rg-blip.b1{left:62%;top:28%}.rg-blip.b2{left:28%;top:60%;background:#22c55e;box-shadow:0 0 12px #22c55e;animation-delay:.8s}.rg-blip.b3{left:70%;top:68%;background:#a855f7;box-shadow:0 0 12px #a855f7;animation-delay:1.6s}
.rg-x .rg-subnav{margin:0 0 14px}
.rg-tracks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px}
.rg-trk{--tk:var(--accent);position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;text-align:left;font:inherit;color:var(--text);cursor:pointer;
  background:radial-gradient(160px 90px at 100% 0%,color-mix(in srgb,var(--tk) 14%,transparent),transparent 70%),var(--surface);border:1px solid color-mix(in srgb,var(--tk) 22%,var(--line));transition:transform .15s,box-shadow .15s,border-color .15s}
.rg-trk-red{--tk:#ef4444}.rg-trk-purple{--tk:#a855f7}.rg-trk-all{--tk:var(--accent2)}
.rg-trk:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px var(--tk)}
.rg-trk[aria-pressed="true"]{border-color:var(--tk);box-shadow:0 0 0 1.5px var(--tk),0 16px 32px -20px var(--tk);background:radial-gradient(200px 110px at 100% 0%,color-mix(in srgb,var(--tk) 24%,transparent),transparent 70%),color-mix(in srgb,var(--tk) 6%,var(--surface))}
.rg-trk-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--tk),color-mix(in srgb,var(--tk) 50%,var(--accent2)));clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.rg-trk-ic .ico{width:18px;height:18px}
.rg-trk-t{flex:1;min-width:0;display:grid}
.rg-trk-t b{font:700 .95rem/1.2 var(--hfont)}.rg-trk-t small{color:var(--muted);font-size:.76rem;line-height:1.3}
.rg-trk em{font-style:normal;font:700 1.2rem/1 var(--hfont);color:var(--tk)}
.rg-x .rg-filters{margin:0 0 12px}
.rg-filt-k{display:inline-flex;align-items:center;gap:6px;font:600 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rg-filt-k .ico{width:14px;height:14px}
.rg-x .rg-certsel{width:auto;min-width:200px;border-radius:12px}
.rg-x .rg-tracklabel{font:700 1.1rem var(--hfont);margin:20px 0 10px}
.rg-x .rg-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* scenario cards */
.rg-x .rg-card{padding:0 0 14px;border-radius:18px;gap:8px;border-color:color-mix(in srgb,var(--tk,var(--accent)) 20%,var(--line))}
.rg-x .rg-card>*:not(.rg-art):not(.rg-card-bar):not(.rg-stamp){margin-left:16px;margin-right:16px}
.rg-x .rg-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px var(--tk,var(--accent));border-color:color-mix(in srgb,var(--tk,var(--accent)) 55%,transparent)}
.rg-art{position:relative;overflow:hidden;height:74px;display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff;
  background:radial-gradient(180px 100px at 90% 10%,rgba(255,255,255,.22),transparent 70%),linear-gradient(135deg,var(--tk,var(--accent)),color-mix(in srgb,var(--tk,var(--accent)) 45%,#0b1020))}
.rg-art-grid{position:absolute;inset:0;opacity:.25;background:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px) 0 0/16px 16px;mask-image:linear-gradient(90deg,transparent,#000 60%)}
.rg-art-ic{position:relative;z-index:1;width:42px;height:42px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);transition:transform .3s}
.rg-art-ic .ico{width:20px;height:20px}
.rg-card:hover .rg-art-ic{transform:rotate(-10deg) scale(1.08)}
.rg-art-k{position:relative;z-index:1;font:600 .66rem/1.2 var(--mono);letter-spacing:.14em;opacity:.92}
.rg-x .rg-card-bar{display:none}
.rg-x .rg-card .rg-type{display:none}
.rg-x .rg-card h3{font-size:1.12rem}
.rg-x .rg-card.done .rg-card-top{padding-right:0}
.rg-x .rg-stamp{top:12px;right:12px}
.rg-x .rg-card-foot{padding-top:10px;border-top:1px dashed var(--line)}
.rg-x .rg-card-foot .btn{border-radius:11px;background:linear-gradient(135deg,var(--tk,var(--accent)),var(--accent2));border:0;color:#fff;box-shadow:0 10px 22px -14px var(--tk,var(--accent))}
.rg-x .rg-card-foot .btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line2);box-shadow:none}
.rg-x .rg-week{position:relative;padding:18px;border-radius:20px;margin:0 0 18px;border:1px solid color-mix(in srgb,#ef4444 30%,var(--line));background:radial-gradient(400px 200px at 100% 0%,color-mix(in srgb,#ef4444 12%,transparent),transparent 70%),var(--surface)}
.rg-x .rg-week-h h2{font:700 1.25rem var(--hfont);margin:2px 0}
.rg-x .rg-stat-row .rg-stat,.rg-x .card{border-radius:18px}
.rg-x .page-head.rg-head{position:relative;overflow:hidden;padding:20px 22px;border-radius:22px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));background:var(--sgrid),radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 70%),var(--surface);margin-bottom:14px}
.rg-x .page-head.rg-head::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--sg3)}

/* ============ Practice exams ============ */
.pr-hero-x .pr-hero-art{position:relative;width:170px;height:150px;flex:none}
.pr-sheet{position:absolute;width:110px;height:130px;border-radius:14px;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:0 18px 30px -20px var(--accent);display:grid;align-content:start;gap:9px;padding:18px 14px}
.pr-sheet i{height:7px;border-radius:4px;background:color-mix(in srgb,var(--accent) 22%,transparent)}.pr-sheet i:nth-child(2){width:75%}.pr-sheet i:nth-child(3){width:55%}
.pr-sheet.s1{left:0;top:14px;transform:rotate(-8deg)}
.pr-sheet.s2{left:46px;top:0;transform:rotate(6deg);animation:sxFloat 5s ease-in-out infinite}
.pr-hero-art .pr-check{position:absolute;right:4px;bottom:4px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#22c55e,#10b981);box-shadow:0 12px 24px -10px #22c55e}
.pr-hero-art .pr-check .ico{width:26px;height:26px}
.pr-x .pr-bar-x{display:grid;gap:10px;margin:0 0 6px}
.pr-vchips{display:flex;flex-wrap:wrap;gap:6px}
.pr-vchips button{font:600 .8rem var(--font,inherit);padding:7px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;transition:all .15s}
.pr-vchips button:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.pr-vchips button[aria-pressed="true"]{background:var(--sg);color:#fff;border-color:transparent;box-shadow:0 8px 18px -10px var(--accent)}
.pr-x .pr-vendor{font:700 1.05rem var(--hfont);letter-spacing:0;text-transform:none;color:var(--text);margin:22px 2px 10px}
.pr-x .pr-vendor small{font:600 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pr-tile.v1{--vc:#ef4444;--vc2:#f97316}.pr-tile.v2{--vc:#10b981;--vc2:#06b6d4}.pr-tile.v3{--vc:#3b82f6;--vc2:#6366f1}.pr-tile.v4{--vc:#06b6d4;--vc2:#0ea5e9}.pr-tile.v5{--vc:#8b5cf6;--vc2:#3b82f6}.pr-tile.v6{--vc:#f59e0b;--vc2:#f97316}.pr-tile.v7{--vc:#22c55e;--vc2:#3b82f6}
.pr-x .pr-tile{gap:10px;padding:18px;border-radius:18px;border-color:color-mix(in srgb,var(--vc,var(--accent)) 20%,var(--line));box-shadow:var(--shadow);
  background:radial-gradient(220px 110px at 100% 0%,color-mix(in srgb,var(--vc2,var(--accent2)) 12%,transparent),transparent 70%),var(--surface)}
.pr-x .pr-tile::before{opacity:.7;height:4px;background:linear-gradient(90deg,var(--vc,var(--accent)),var(--vc2,var(--accent2)))}
.pr-x .pr-tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--vc,var(--accent)) 55%,transparent);box-shadow:0 20px 38px -22px var(--vc,var(--accent))}
.pr-x .pr-tile:hover::before{opacity:1}
.pr-tile-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pr-x .pr-code{font:700 .72rem/1 var(--mono);letter-spacing:.06em;color:#fff;padding:5px 9px;border-radius:8px;background:linear-gradient(135deg,var(--vc,var(--accent)),var(--vc2,var(--accent2)))}
.pr-x .pr-badge-major{position:static;display:inline-flex;align-items:center;gap:4px;font:600 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#c2410c;background:color-mix(in srgb,#f97316 14%,transparent);padding:5px 8px;border-radius:999px}
.pr-x .pr-badge-major .ico{width:12px;height:12px}
.pr-x .pr-tile>b{font:700 1.08rem/1.25 var(--hfont)}
.pr-x .pr-meta{display:flex;flex-wrap:wrap;gap:10px}
.pr-x .pr-meta span{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:.8rem}
.pr-x .pr-meta .ico{width:14px;height:14px;color:var(--vc,var(--accent))}
.pr-x .pr-fresh{display:grid;gap:6px;font:inherit;font-size:.78rem;color:var(--muted)}
.pr-fresh-row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.pr-fresh-row>span{display:inline-flex;align-items:center;gap:6px}
.pr-fill{height:5px;border-radius:5px;background:color-mix(in srgb,var(--text) 9%,transparent);overflow:hidden}
.pr-fill i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--vc,var(--accent)),var(--vc2,var(--accent2)))}
.pr-go{display:flex;justify-content:space-between;align-items:center;margin-top:2px;padding-top:10px;border-top:1px dashed var(--line);font-weight:700;font-size:.86rem;color:var(--vc,var(--accent))}
.pr-go i{font-style:normal;transition:transform .15s}
.pr-tile:hover .pr-go i{transform:translateX(4px)}
html[data-theme="dark"] .pr-x .pr-badge-major{color:#fdba74}

/* ============ Cert path tracker ============ */
.cm-hero-x .sx-hero-a .btn{padding:11px 18px}
.cm-path{position:relative;overflow:hidden;padding:18px}
.cm-path::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--sg3)}
.cm-path-h{display:grid;gap:2px;margin-bottom:14px}
.cm-path-h b{font:700 1.2rem var(--hfont)}
.cm-path-row{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;position:relative}
.cm-path-row li{position:relative;display:grid;justify-items:center;gap:5px;text-align:center;padding:0 4px}
.cm-path-row li::before{content:"";position:absolute;top:19px;left:-50%;width:100%;height:4px;background:color-mix(in srgb,var(--text) 10%,transparent);z-index:0}
.cm-path-row li::after{content:"";position:absolute;top:19px;left:-50%;width:0;height:4px;background:var(--sg);z-index:0;transition:width .6s}
.cm-path-row li.done::after{width:100%}
.cm-path-row li.part::after{width:50%}
.cm-path-row li:first-child::before,.cm-path-row li:first-child::after{display:none}
.cm-node{position:relative;z-index:1;width:42px;height:42px;display:grid;place-items:center;font:700 .9rem/1 var(--hfont);color:var(--muted);
  background:conic-gradient(var(--accent) var(--f,0%),color-mix(in srgb,var(--text) 12%,transparent) 0);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.cm-node::before{content:"";position:absolute;inset:4px;background:var(--surface);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);z-index:-1}
.cm-node .ico{width:18px;height:18px}
.cm-path-row li.done .cm-node{background:var(--sg);color:#fff}
.cm-path-row li.done .cm-node::before{display:none}
.cm-path-row li.goal .cm-node{background:linear-gradient(135deg,#f59e0b,#ec4899);color:#fff;animation:sxPulse 2s ease-out infinite}
.cm-path-row li.goal .cm-node::before{display:none}
.cm-path-row small{font-size:.74rem;line-height:1.25;color:var(--text);max-width:120px}
.cm-path-row em{font-style:normal;font:600 .7rem var(--mono);color:var(--muted)}
.cm-plan-top{position:relative;overflow:hidden;border-radius:20px!important;background:var(--sgrid),radial-gradient(420px 220px at 100% 0%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 70%),radial-gradient(360px 200px at 0% 100%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--surface)!important;--sgrid:linear-gradient(color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px}
.cm-plan-top h2{font:700 clamp(1.4rem,2.6vw,1.9rem)/1.15 var(--hfont)}
.cm-plan-top .cm-cd b{background:linear-gradient(135deg,var(--accent),var(--accent2),#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:2.4rem}
.cm-domains{border-radius:20px!important}
.cm-dom summary{padding:12px 6px;border-radius:12px;transition:background .15s}
.cm-dom summary:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.cm-dom[open]{background:color-mix(in srgb,var(--accent) 3%,transparent);border-radius:14px}
.cm-dom-n{background:var(--sg)!important;color:#fff!important}
.cm-bar-mini i{background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899)!important}
.cm-step{padding:8px 10px;border-radius:10px;transition:background .15s}
.cm-step:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cm-step input:checked+span{color:var(--muted)}
.cm-cside>.card,.cm-cside .card{border-radius:18px}
.cm-ccols>.cm-cside{position:static!important;top:auto!important}
.cm-x .cm-catalog{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cm-cert{position:relative;overflow:hidden;border-radius:18px!important;padding:16px!important;background:radial-gradient(200px 100px at 100% 0%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 70%),var(--surface)!important}
.cm-cert::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--sg);opacity:.6}
.cm-cert:hover::before{opacity:1}
.cm-cert-ic{background:var(--sg)!important;color:#fff!important;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0!important;width:40px!important;height:40px!important}
.cm-cert b{font:700 1rem/1.25 var(--hfont)}

@keyframes sxSlide{to{background-position:-200% 0}}
@keyframes sxSpin{to{transform:rotate(360deg)}}
@keyframes sxBlip{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes sxFloat{50%{transform:rotate(6deg) translateY(-8px)}}
@keyframes sxPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,#ec4899 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
@media (prefers-reduced-motion:reduce){.sx-hero::before,.rg-radar-sweep,.rg-blip,.pr-sheet.s2,.cm-path-row li.goal .cm-node{animation:none}}

html[data-theme="dark"] .sx-hero{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}

@media (max-width:1180px){
  .sx-grid{grid-template-columns:1fr}
  .sx-right{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (max-width:900px){
  .rg-tracks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-hero{grid-template-columns:1fr;padding:22px 18px;border-radius:20px}
  .rg-hero-x .rg-hero-art,.pr-hero-x .pr-hero-art{display:none}
  .sx-hero>.sx-stats{min-width:0;grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .sx-right{grid-template-columns:1fr}
  .sx-stats{grid-template-columns:repeat(2,1fr)}
  .rg-trk{padding:10px;gap:8px}.rg-trk-t small{display:none}.rg-trk-ic{width:32px;height:32px}
  .cm-path-row{grid-auto-flow:row;grid-auto-columns:auto;gap:10px}
  .cm-path-row li{grid-template-columns:42px 1fr auto;justify-items:start;align-items:center;text-align:left;gap:10px}
  .cm-path-row li::before,.cm-path-row li::after{display:none}
  .cm-path-row small{max-width:none}
  .sx-hero-a .btn{flex:1 1 100%;justify-content:center}
}
.rg-x .rg-subnav{flex-wrap:wrap;overflow:visible}

/* side frame: left menu + ad, middle page, optional right sidebar (hiring and practice pages) */
.hx-grid{display:grid;gap:20px;align-items:start}
.hx-grid.hx-3{grid-template-columns:230px minmax(0,1fr) 300px}
.hx-grid.hx-2{grid-template-columns:230px minmax(0,1fr)}
.hx-mid{min-width:0;display:grid;gap:16px;align-content:start}
.hx-right{display:grid;gap:14px;min-width:0;align-self:start}
.hx-right>.card{border-radius:18px}
.hx-menu{padding:10px;display:grid;gap:2px;border-radius:18px}
.hx-mt{font:700 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 10px 8px}
.hx-mg{font:700 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px}
.hx-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--text);font-weight:600;font-size:.9rem}
.hx-menu a .ico{width:18px;height:18px;color:var(--muted);flex:none}
.hx-menu a:hover{background:color-mix(in srgb,var(--text) 5%,transparent);text-decoration:none}
.hx-menu a.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}.hx-menu a.on .ico{color:var(--accent)}
.hx-left .ad-left{margin-top:0}
.hx-mid>.page-ad{display:none}
@media (max-width:1180px){.hx-grid.hx-3{grid-template-columns:230px minmax(0,1fr)}.hx-grid.hx-3>.hx-right{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
@media (max-width:900px){
  .hx-grid.hx-2,.hx-grid.hx-3{grid-template-columns:1fr}
  .hx-left{position:static!important;display:block}
  .hx-left>.ad-left,.hx-left>.rail-foot{display:none!important}
  .hx-menu{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px;border-radius:16px}
  .hx-menu .hx-mt,.hx-menu .hx-mg{display:none}
  .hx-menu a{flex:none;white-space:nowrap;padding:8px 12px;border-radius:999px}
  .hx-mid>.page-ad{display:block}
}

/* recruiter tools */
.hx-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.hx-tool{display:grid;gap:6px;padding:18px;color:var(--text);border-radius:18px}.hx-tool:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.hx-tool small{color:var(--muted)}
.hx-tool-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.hx-res{display:grid;gap:10px}
.hx-score{display:flex;align-items:center;gap:16px;padding:16px 18px}.hx-score small{display:block;color:var(--muted)}
.hx-n{font:800 2.4rem var(--hfont);line-height:1;min-width:64px;text-align:center}
.hx-score.ok .hx-n{color:var(--good)}.hx-score.mid .hx-n{color:var(--warn,#d89b00)}.hx-score.low .hx-n{color:var(--bad,#d64545)}
.hx-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.hx-item small{display:block;color:var(--muted);margin-top:2px}.hx-item .ico{width:18px;height:18px;flex:none;margin-top:2px}
.hx-item.good .ico{color:var(--good)}.hx-item.warn .ico{color:var(--warn,#d89b00)}.hx-item.bad .ico{color:var(--bad,#d64545)}
.hx-item.bad{border-color:color-mix(in srgb,var(--bad,#d64545) 40%,var(--line))}
.hx-tabs{display:flex;flex-wrap:wrap;gap:8px}
.hx-tabs .chip{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:7px 14px;border-radius:999px;font:600 .85rem var(--font);cursor:pointer}
.hx-tabs .chip.on{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);color:var(--accent)}
.hx-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.hx-pay{display:flex;gap:28px;flex-wrap:wrap}.hx-pay small{display:block;color:var(--muted)}.hx-big{font:800 2rem var(--hfont)}
.hx-bar{position:relative;height:10px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);margin-top:6px}
.hx-bar i{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.hx-bar em{position:absolute;top:-4px;width:4px;height:18px;margin-left:-2px;border-radius:2px;background:var(--text)}
.hx-bar-l{display:flex;justify-content:space-between}
.hx-q{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.hx-q small{display:block;color:var(--muted);margin-top:3px}
.hx-qn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 .8rem var(--mono);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}

/* election-live.css */
/* ReconHire: election news page, Home card and admin panel (public/js/election-live.js). Works in light and dark.
   Every outlet gets the same style; the only color is a steady per-outlet hue so sources are easy to tell apart. */
.en-page{display:grid;gap:14px;min-width:0}
.en-page .card{border-radius:18px}

/* live pill */
.en-live{display:inline-flex;align-items:center;gap:6px;font:700 .64rem/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#dc2626;padding:5px 9px 5px 8px;border-radius:999px;width:max-content}
.en-live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:enPulse 1.4s ease-in-out infinite}
.en-live.off{background:var(--muted,#64748b)}.en-live.off i{animation:none;opacity:.7}
@keyframes enPulse{50%{opacity:.25;transform:scale(.7)}}

/* hero: a poster with the state map */
.en-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:center;padding:26px 28px;border-radius:24px;color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(600px 300px at 100% 0%,rgba(216,69,59,.55),transparent 65%),radial-gradient(520px 300px at 0% 100%,rgba(47,111,228,.5),transparent 65%),linear-gradient(135deg,#0b1636,#16264f 55%,#2a1a3f);box-shadow:0 30px 60px -36px rgba(11,22,54,.9)}
.en-stars{position:absolute;inset:0;z-index:-1;opacity:.55;background-image:radial-gradient(1.2px 1.2px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#fff,transparent),radial-gradient(1.4px 1.4px at 52% 18%,#fff,transparent),radial-gradient(1px 1px at 70% 80%,#fff,transparent),radial-gradient(1.2px 1.2px at 88% 30%,#fff,transparent),radial-gradient(1px 1px at 8% 88%,#fff,transparent),radial-gradient(1.3px 1.3px at 94% 62%,#fff,transparent);animation:enTwinkle 5s ease-in-out infinite alternate}
@keyframes enTwinkle{to{opacity:.25}}
.en-stripes{position:absolute;left:0;right:0;bottom:0;height:7px;z-index:-1;background:repeating-linear-gradient(90deg,#d8453b 0 28px,#fff 28px 56px,#2f6fe4 56px 84px)}
.en-hero-t{display:grid;gap:10px;min-width:0;align-content:center}
.en-hero h1{margin:0;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1;letter-spacing:-.02em;color:#fff}.en-hero h1 em{font-style:normal;background:linear-gradient(90deg,#ff8a80,#ffd3a0);-webkit-background-clip:text;background-clip:text;color:transparent}
.en-hero p{margin:0;color:rgba(255,255,255,.82);max-width:46ch;font-size:1.02rem}
.en-k{font:600 .68rem/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.en-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}.en-stats span{display:grid;gap:2px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);min-width:78px}
.en-stats b{font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}.en-stats small{font-size:.7rem;color:rgba(255,255,255,.75)}
.en-hero-f{color:rgba(255,255,255,.65)}
@media (max-width:860px){.en-hero{grid-template-columns:1fr;padding:22px 18px 26px}}

/* map */
.en-maphost{display:grid;gap:10px;min-width:0}
.en-layers{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:860px){.en-layers{justify-content:flex-start}}
.en-layer{font:inherit;font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:background .15s}
.en-layer:hover{background:rgba(255,255,255,.18)}.en-layer.on{background:#fff;color:#14234d;border-color:#fff}.en-layer:focus-visible{outline:2px solid #fff;outline-offset:2px}
.en-map{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(8,auto);gap:4px}
.en-t{aspect-ratio:1;display:grid;place-content:center;gap:0;text-align:center;border:1.5px solid transparent;border-radius:8px;font:inherit;color:#fff;cursor:pointer;padding:0;min-width:0;background:rgba(255,255,255,.1);transition:transform .12s,background .2s,box-shadow .2s}
.en-t b{font-size:clamp(.5rem,1.2vw,.74rem);line-height:1.1}.en-t small{font:700 clamp(.46rem,.9vw,.6rem)/1 var(--mono,monospace);opacity:.9}
.en-t.dim{background:rgba(255,255,255,.06);color:rgba(255,255,255,.45)}
.en-t.hot{background:rgba(255,138,128,calc(.25 + var(--i,.5) * .75));color:#fff;border-color:rgba(255,255,255,.3);box-shadow:0 0 calc(var(--i,.5) * 14px) rgba(255,138,128,calc(var(--i,.5) * .8))}
.en-t.race{background:linear-gradient(135deg,#ffd3a0,#ff8a80);color:#2a1020;border-color:transparent}
.en-t.race.sp{background:linear-gradient(135deg,#fff,#ffd3a0);outline:2px dashed rgba(255,255,255,.7);outline-offset:-4px}
.en-t:hover{transform:scale(1.1);z-index:1}.en-t.sel{box-shadow:0 0 0 2.5px #fff}.en-t:focus-visible{outline:2px solid #fff;outline-offset:1px}
.en-mapnote{color:rgba(255,255,255,.7);font-size:.76rem}
@media (prefers-reduced-motion:reduce){.en-stars{animation:none}}

/* status line when a state is picked */
.en-filt{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.en-filt:empty{display:none}.en-filt span{font-size:.92rem}

/* outlet chip */
.en-src{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:hsl(var(--h) 55% 38%);white-space:nowrap}
.en-src i{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:hsl(var(--h) 65% 50%)}
@media (prefers-color-scheme:dark){.en-src{color:hsl(var(--h) 70% 72%)}}
:root[data-theme="dark"] .en-src{color:hsl(var(--h) 70% 72%)}
:root[data-theme="light"] .en-src{color:hsl(var(--h) 55% 38%)}

/* ticker */
.en-tick{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);min-height:44px}
.en-tick:empty{display:none}
.en-tick-l{display:inline-flex;align-items:center;gap:7px;padding:0 14px;background:#dc2626;color:#fff;font:700 .68rem/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;flex:none}
.en-tick-l i{width:7px;height:7px;border-radius:50%;background:#fff;animation:enPulse 1.4s ease-in-out infinite}
.en-tick-w{display:flex;overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.en-tick-in{display:flex;flex:none;gap:34px;padding:0 17px;align-items:center;animation:enScroll 90s linear infinite}
.en-tick-w:hover .en-tick-in,.en-tick-w:focus-within .en-tick-in{animation-play-state:paused}
@keyframes enScroll{to{transform:translateX(-100%)}}
.en-tick-i{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--text);text-decoration:none;font-size:.88rem}.en-tick-i:hover span{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.en-tick-in,.en-live i,.en-tick-l i{animation:none}.en-tick-w{overflow-x:auto}}

/* filters and list */
.en-body{display:grid;gap:12px}
.en-chips{display:flex;gap:8px;flex-wrap:wrap}
.en-chip{font:inherit;font-size:.84rem;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.en-chip:hover{border-color:var(--accent)}.en-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.en-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.en-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.en-card{display:grid;gap:8px;align-content:start;padding:15px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:transform .15s,box-shadow .15s,border-color .15s}
.en-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px -24px var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.en-card.fresh{animation:enFresh 2.4s ease-out both}
@keyframes enFresh{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-6px);opacity:.2}40%{opacity:1;transform:none}100%{box-shadow:0 0 0 0 transparent}}
.en-card-h{display:flex;align-items:center;gap:10px}.en-card-h time{margin-left:auto;font-size:.74rem;color:var(--muted)}
.en-new{font:700 .58rem/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;background:#dc2626;color:#fff;padding:3px 6px;border-radius:999px}
.en-card-t{color:var(--text);text-decoration:none}.en-card-t b{font-size:1.02rem;line-height:1.3;display:block}.en-card-t:hover b{text-decoration:underline}
.en-card p{margin:0;font-size:.88rem;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.en-card-go{font-size:.8rem;font-weight:600;color:var(--accent);text-decoration:none}.en-card-go:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.en-card.fresh{animation:none}}
.en-empty{margin:0;font-size:.9rem;grid-column:1/-1}
.en-fine{margin:0;font-size:.76rem;color:var(--muted);text-align:center;padding:0 8px 4px}
.en-closed{display:grid;justify-items:center;gap:8px;text-align:center;padding:36px 18px}.en-closed svg{width:30px;height:30px;color:var(--accent)}.en-closed h2{margin:0}.en-closed p{margin:0;max-width:44ch;color:var(--muted)}

/* Home card */
.en-home{display:grid;gap:10px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(360px 140px at 0% 0%,color-mix(in srgb,#2f6fe4 14%,transparent),transparent 70%),radial-gradient(360px 140px at 100% 100%,color-mix(in srgb,#d8453b 12%,transparent),transparent 70%),var(--surface)}
.en-home-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--text);text-decoration:none}.en-home-t b{font-size:1.02rem}.en-home-t small{color:var(--muted)}
.en-home-l{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.en-home-i{display:grid;gap:2px;padding:8px 0;color:var(--text);text-decoration:none;border-top:1px solid var(--line)}.en-home-l li:first-child .en-home-i{border-top:0}
.en-home-i span{font-size:.9rem;font-weight:600;line-height:1.3}.en-home-i small{color:var(--muted);font-size:.74rem}.en-home-i:hover span{text-decoration:underline}
.en-home-go{font-weight:600;font-size:.86rem;color:var(--accent);text-decoration:none}

/* admin */
.en-adm{display:grid;gap:14px}
.en-adm-top{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 16px}.en-adm-top>div{flex:1 1 260px;display:grid;gap:2px}
.en-adm-c{display:grid;gap:12px}.en-adm-c h4{margin:0}.en-adm-c .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.en-adm-list{display:grid;gap:6px}
.en-adm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.en-adm-n{display:grid;min-width:0}.en-adm-n b{font-size:.9rem}.en-adm-n small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.en-bad{color:#dc2626}
@media (max-width:640px){.en-adm-row{grid-template-columns:auto minmax(0,1fr)}.en-adm-row>small,.en-adm-b{grid-column:2}}

/* cards: outlet accent, lead story, state tags */
.en-card{position:relative;overflow:hidden}
.en-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:hsl(var(--h,220) 65% 52%)}
.en-card.lead{grid-column:1/-1;padding:22px 24px;gap:10px;background:radial-gradient(520px 200px at 100% 0%,hsl(var(--h,220) 70% 55% / .16),transparent 70%),var(--surface)}
.en-card.lead .en-card-t b{font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.2}.en-card.lead p{font-size:1rem;-webkit-line-clamp:4}
.en-top{font:700 .6rem/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(90deg,#2f6fe4,#d8453b);color:#fff;padding:4px 8px;border-radius:999px}
.en-card-f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.en-tags{display:flex;gap:5px;flex-wrap:wrap}
.en-tag{font:700 .66rem/1 var(--mono,monospace);letter-spacing:.06em;padding:4px 8px;border-radius:7px;border:1px solid var(--line);background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text);cursor:pointer}
.en-tag:hover{border-color:var(--accent);color:var(--accent)}
.en-maphost{max-width:600px;width:100%;justify-self:end}
@media (max-width:860px){.en-maphost{justify-self:stretch;max-width:none}}

/* w5-news.css */
/* ReconHire News card and Top stories page (w5-news.js) */
.rn-card{padding:16px 16px 12px;border-radius:18px}
.rn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rn-head b{font:700 1.15rem var(--hfont)}
.rn-info{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:0;background:none;color:var(--dim);cursor:pointer}.rn-info:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent)}.rn-info .ico{width:16px;height:16px}
.rn-list{list-style:none;margin:0;padding:0;display:grid}
.rn-list li+li{border-top:1px solid var(--line2)}
.rn-item{display:grid;gap:2px;padding:8px 0;color:var(--text);text-decoration:none}
.rn-item:hover{text-decoration:none}.rn-item:hover .rn-t{color:var(--accent)}
.rn-t{font-weight:700;font-size:.92rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rn-m{color:var(--dim);font-size:.78rem}
.rn-s{color:var(--muted);font-size:.76rem}
.rn-all{display:inline-flex;align-items:center;margin-top:6px;padding:8px 2px;font-weight:600;font-size:.9rem;color:var(--text);text-decoration:none}.rn-all:hover{color:var(--accent);text-decoration:none}
.rn-pg-head{padding:18px 20px;margin-bottom:14px;display:grid;gap:6px}.rn-pg-head h1{margin:0;font:800 1.7rem var(--hfont)}.rn-pg-head p{margin:0}
.rn-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rn-pg-box{padding:6px 20px 16px}
.rn-hero{display:grid;gap:6px;padding:16px 0;border-bottom:1px solid var(--line2);color:var(--text);text-decoration:none}.rn-hero:hover{text-decoration:none}.rn-hero:hover .rn-hero-t{color:var(--accent)}
.rn-hero-img{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--surface2,rgba(128,128,128,.12))}
.rn-hero-img img,.rn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rn-hero-t{font:800 1.45rem/1.25 var(--hfont);margin-top:6px}
.rn-sum{margin:2px 0 0;color:var(--muted);font-size:.9rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rn-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:14px;padding:14px 0;border-bottom:1px solid var(--line2);color:var(--text);text-decoration:none;align-items:start}
.rn-row.noimg{grid-template-columns:minmax(0,1fr)}
.rn-row:hover{text-decoration:none}.rn-row:hover b{color:var(--accent)}
.rn-row-t{display:grid;gap:3px;min-width:0}.rn-row-t b{font-size:1.02rem;line-height:1.35}
.rn-thumb{position:relative;display:block;width:112px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--surface2,rgba(128,128,128,.12))}
.rn-src{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.78rem}.rn-src i{width:8px;height:8px;border-radius:50%;background:hsl(var(--h) 70% 55%)}
.rn-play{position:absolute;inset:auto 8px 8px auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff}.rn-play .ico{width:15px;height:15px}
.rn-more{margin:14px auto 0;display:flex}
@media (max-width:600px){.rn-pg-box{padding:4px 14px 14px}.rn-hero-t{font-size:1.2rem}.rn-row{grid-template-columns:minmax(0,1fr) 88px}.rn-thumb{width:88px}}
.rn-hero-img{aspect-ratio:auto;height:clamp(200px,34vw,340px)}
.rn-src i{display:inline-block;flex:none}
.rn-row-t small{display:block}.rn-src{display:flex!important}
.rn-sum{font-size:.88rem}

/* w8-news.css */
/* ReconHire Newsroom: public pages (nr-), in-app reader and badges (rn-), and Admin → Newsroom (nra-).
   Uses the site's colour tokens, so light and dark both work. */
.nr-body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;-webkit-text-size-adjust:100%}
.nr-body *{box-sizing:border-box}
.nr-body a{color:var(--accent)}
.nr-wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.nr-skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent)!important;padding:8px 12px;border-radius:8px;z-index:50}
.nr-skip:focus{left:8px}
.nr-main{padding-top:22px;padding-bottom:50px;min-height:60vh}

/* breaking banner */
.nr-break{display:flex;align-items:center;gap:12px;background:#b91c1c;color:#fff;padding:8px 14px;font-size:14px}
.nr-break[hidden]{display:none}
.nr-break strong{text-transform:uppercase;letter-spacing:.08em;font-size:12px;background:#fff;color:#b91c1c;border-radius:4px;padding:2px 7px;flex:none}
.nr-break a{color:#fff!important;font-weight:600;text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nr-break a:hover{text-decoration:underline}
.nr-break-x{background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:6px}
.nr-break-x:hover{background:rgba(255,255,255,.2)}

/* masthead */
.nr-top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nr-top-in{display:flex;align-items:center;gap:14px;justify-content:space-between;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.nr-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)!important;min-width:0}
.nr-logo b{display:block;font-family:var(--hfont);font-size:20px;line-height:1.1;letter-spacing:.01em}
.nr-logo small{display:block;color:var(--dim);font-size:12px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nr-logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));flex:none;position:relative}
.nr-logo-mark::after{content:"";position:absolute;inset:9px;border:2px solid #fff;border-radius:50%;border-right-color:transparent}
.nr-top-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nr-search{display:flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden;background:var(--surface2)}
.nr-search input{border:0;background:none;color:var(--text);padding:7px 12px;font:inherit;font-size:14px;width:160px;outline:none}
.nr-search button{border:0;background:none;color:var(--muted);padding:0 12px;cursor:pointer;font-size:16px}
.nr-btn{background:var(--accent);color:var(--on-accent)!important;text-decoration:none;font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px;white-space:nowrap}
.nr-theme{background:none;border:1px solid var(--line2);color:var(--text);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:0;display:inline-flex;align-items:center;justify-content:center;padding:0}
.nr-theme::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%);box-sizing:border-box}
.nr-nav{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.nr-nav::-webkit-scrollbar{display:none}
.nr-nav a{color:var(--muted)!important;text-decoration:none;font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;white-space:nowrap}
.nr-nav a:hover{background:var(--surface2)}
.nr-nav a[aria-current]{background:var(--text);color:var(--surface)!important}

.nr-h1{font-family:var(--hfont);font-size:clamp(26px,4vw,38px);line-height:1.15;margin:4px 0 8px}
.nr-h2{font-family:var(--hfont);font-size:20px;margin:28px 0 14px;display:flex;align-items:center;gap:10px}
.nr-sub{color:var(--muted);margin:0 0 14px}
.nr-kick{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)!important;text-decoration:none}
.nr-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--line2);border-radius:4px;padding:1px 6px;margin-left:6px;color:var(--muted)}
.nr-tag.brk{background:#b91c1c;border-color:#b91c1c;color:#fff}
.nr-empty{text-align:center;padding:60px 10px;color:var(--muted)}
.nr-listhead{margin-bottom:18px}

/* cards */
.nr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.nr-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.nr-card-pic{display:block;aspect-ratio:16/9;background:var(--surface2);overflow:hidden}
.nr-card-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.nr-card:hover .nr-card-pic img{transform:scale(1.03)}
.nr-card-t{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.nr-card h3{margin:0;font-family:var(--hfont);font-size:18px;line-height:1.25}
.nr-card h3 a{color:var(--text)!important;text-decoration:none}
.nr-card h3 a:hover{color:var(--accent)!important}
.nr-card p{margin:0;color:var(--muted);font-size:14px}
.nr-card small{color:var(--dim);font-size:12.5px}
.nr-card.big{display:grid;grid-template-columns:1.3fr 1fr}
.nr-card.big .nr-card-pic{aspect-ratio:auto;min-height:280px}
.nr-card.big h3{font-size:clamp(24px,3vw,34px)}
.nr-card.big .nr-card-t{padding:24px;justify-content:center}
.nr-card.big.nopic{grid-template-columns:1fr}
@media(max-width:760px){.nr-card.big{grid-template-columns:1fr}.nr-card.big .nr-card-pic{min-height:0;aspect-ratio:16/9}.nr-card.big .nr-card-t{padding:16px}.nr-logo small{display:none}.nr-search input{width:110px}}

/* live */
.nr-livebadge{display:inline-flex;align-items:center;gap:6px;background:#dc2626;color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;padding:3px 9px;border-radius:999px;vertical-align:middle}
.nr-livebadge i{width:8px;height:8px;border-radius:50%;background:#fff;animation:nrpulse 1.4s infinite}
.nr-livebadge.off{background:var(--dim)}
.nr-livebadge.off i{animation:none;opacity:.7}
@keyframes nrpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.nr-lives{margin-bottom:26px}
.nr-lives-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.nr-live-card{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px;text-decoration:none;color:var(--text)!important}
.nr-live-card.on{border-color:#dc2626;box-shadow:0 0 0 1px #dc262655}
.nr-live-card img{width:84px;height:60px;object-fit:cover;border-radius:10px;flex:none}
.nr-live-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.nr-live-t b{font-family:var(--hfont);line-height:1.25}
.nr-live-t small{color:var(--dim)}
.nr-up{list-style:none;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:14px 16px;margin:0 0 12px}
.nr-up.brk{border-left-color:#dc2626}
.nr-up.pin{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.nr-up.new{animation:nrnew 1.6s ease-out}
@keyframes nrnew{from{background:color-mix(in srgb,var(--accent) 25%,var(--surface))}to{background:var(--surface)}}
.nr-up-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--dim);margin-bottom:6px}
.nr-up-h time{font-weight:700;color:var(--text)}
.nr-up p{margin:0 0 8px}
.nr-up figure{margin:8px 0}.nr-up figure img{max-width:100%;border-radius:10px;display:block}
.nr-ups{padding:0;margin:20px 0}
.nr-jump{position:fixed;right:18px;bottom:22px;z-index:30;background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;padding:11px 18px;font-weight:700;font:inherit;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.25);cursor:pointer}
.nr-jump[hidden]{display:none}
.nr-ended{background:var(--surface2);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;margin:16px 0}
.nr-ended p{margin:6px 0 0}
.nr-auto{color:#dc2626!important}

/* article */
.nr-article{max-width:760px;margin:0 auto}
.nr-ah h1{font-family:var(--hfont);font-size:clamp(28px,5vw,44px);line-height:1.12;margin:8px 0 10px}
.nr-dek{font-size:clamp(17px,2.2vw,21px);color:var(--muted);margin:0 0 14px;line-height:1.45}
.nr-by{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--dim);font-size:14px;margin-bottom:16px}
.nr-by a{font-weight:600}
.nr-upd{color:var(--good)}
.nr-cover{margin:0 -4px 18px}.nr-cover img{width:100%;border-radius:var(--radius);display:block;max-height:520px;object-fit:cover}
.nr-article figcaption{color:var(--dim);font-size:13px;margin-top:6px}
.nr-prose{font-size:18px;line-height:1.75}
.nr-prose h2{font-family:var(--hfont);font-size:26px;margin:34px 0 8px;line-height:1.25}
.nr-prose h3{font-family:var(--hfont);font-size:21px;margin:26px 0 6px}
.nr-prose p{margin:0 0 1.1em}
.nr-prose img{max-width:100%;border-radius:12px;display:block;margin:0 auto}
.nr-prose figure{margin:24px 0}
.nr-prose blockquote{margin:24px 0;padding:4px 0 4px 18px;border-left:4px solid var(--accent);color:var(--muted);font-style:italic}
.nr-prose .nr-pull{font-family:var(--hfont);font-size:26px;line-height:1.3;margin:30px 0;padding:18px 0;border-top:3px solid var(--accent);border-bottom:1px solid var(--line2);text-align:center}
.nr-prose hr{border:0;border-top:1px solid var(--line2);margin:32px 0}
.nr-prose ul,.nr-prose ol{padding-left:1.4em;margin:0 0 1.1em}
.nr-video-box{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.nr-video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nr-notes{background:color-mix(in srgb,#f59e0b 12%,var(--surface));border:1px solid color-mix(in srgb,#f59e0b 45%,var(--line));border-radius:12px;padding:10px 16px;margin:0 0 18px}
.nr-notes p{margin:6px 0}
.nr-preview{background:#fef3c7;color:#78350f;border-radius:8px;padding:8px 14px;margin-bottom:14px;font-weight:600}
.nr-tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}
.nr-tags a{background:var(--surface2);border-radius:999px;padding:4px 12px;font-size:14px;text-decoration:none}
.nr-gallery>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.nr-gallery figure{margin:0}.nr-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.nr-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0;font-size:14px}
.nr-share span{color:var(--dim);font-weight:600}
.nr-share a,.nr-share button{border:1px solid var(--line2);background:var(--surface);color:var(--text)!important;border-radius:999px;padding:5px 14px;text-decoration:none;font:inherit;font-size:13.5px;cursor:pointer}
.nr-share a:hover,.nr-share button:hover{border-color:var(--accent);color:var(--accent)!important}
.nr-author-card,.nr-author-head{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:26px 0}
.nr-author-card small{display:block;color:var(--dim)}.nr-author-card p{margin:6px 0 0;color:var(--muted)}
.nr-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:var(--surface2)}
.nr-avatar.ph{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;background:var(--accent);color:var(--on-accent)}
.nr-related{max-width:1120px;margin:40px auto 0}
.nr-pager{display:flex;justify-content:space-between;align-items:center;margin:30px 0 0}
.nr-pager a{font-weight:600;text-decoration:none}
.nr-foot{border-top:1px solid var(--line);background:var(--surface);padding:22px 0;color:var(--muted);font-size:14px}

/* ---------- inside the app: ReconHire badge, LIVE dot, the reader for outside headlines ---------- */
.rn-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:4px;padding:1px 6px;margin-right:6px;vertical-align:1px}
.rn-livedot{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;color:#fff;background:#dc2626;border-radius:999px;padding:1px 8px 1px 6px;margin-right:6px;vertical-align:1px}
.rn-livedot i{width:7px;height:7px;border-radius:50%;background:#fff;animation:nrpulse 1.4s infinite}
.rn-brk{font-size:10px;font-weight:800;text-transform:uppercase;background:#b91c1c;color:#fff;border-radius:4px;padding:1px 6px;margin-right:6px}
.rn-nr-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;margin-top:6px;text-decoration:none;color:var(--accent)}
.rn-item.rn-live-item .rn-t{font-weight:700}
.rn-bannerbar{display:flex;align-items:center;gap:10px;background:#b91c1c;color:#fff;border-radius:12px;padding:9px 12px;margin:0 0 12px;font-size:14px}
.rn-bannerbar strong{background:#fff;color:#b91c1c;border-radius:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;flex:none}
.rn-bannerbar a{color:#fff!important;font-weight:600;text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rn-bannerbar button{background:none;border:0;color:#fff;font-size:20px;cursor:pointer;line-height:1;padding:0 6px}
.rn-story{max-width:760px}
.rn-story h1{font-family:var(--hfont);font-size:clamp(24px,4vw,34px);line-height:1.18;margin:6px 0 8px}
.rn-story .rn-pic{width:100%;border-radius:var(--radius);display:block;margin:12px 0;max-height:420px;object-fit:cover}
.rn-story .rn-meta{color:var(--dim);font-size:14px;display:flex;gap:6px 14px;flex-wrap:wrap}
.rn-story .rn-sum{font-size:17px;line-height:1.65;margin:14px 0}
.rn-story .rn-note{color:var(--dim);font-size:13px;margin:4px 0 14px}
.rn-story .rn-go{display:inline-flex;align-items:center;gap:8px;font-size:16px;padding:12px 20px;margin:6px 0;text-decoration:none}
.rn-share{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;align-items:center}
.rn-share>span{color:var(--dim);font-weight:600;font-size:14px}
.rn-rel{margin-top:22px}.rn-rel h3{margin:0 0 8px}
.rn-rel a{display:block;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--text)}
.rn-rel a b{display:block}.rn-rel a small{color:var(--dim)}

/* ---------- Admin → Newsroom ---------- */
.nra{display:flex;flex-direction:column;gap:14px}
.nra h3,.nra h4{margin:0}
.nra-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.nra-head p{margin:4px 0 0;color:var(--muted);max-width:640px}
.nra-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.nra-stat{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.nra-stat b{display:block;font-family:var(--hfont);font-size:26px;line-height:1.1}
.nra-stat span{color:var(--dim);font-size:13px}
.nra-stat.live b{color:#dc2626}
.nra-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nra-bar .input{flex:1;min-width:130px;max-width:260px}
.nra-list{display:flex;flex-direction:column}
.nra-row{display:flex;gap:12px;align-items:center;padding:10px 4px;border-top:1px solid var(--line);flex-wrap:wrap}
.nra-row:first-child{border-top:0}
.nra-row .nra-t{flex:1;min-width:200px}
.nra-row .nra-t b{display:block;line-height:1.3}
.nra-row .nra-t small{color:var(--dim)}
.nra-row img.nra-th{width:64px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:var(--surface2)}
.nra-st{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 9px;background:var(--surface2);color:var(--muted);white-space:nowrap}
.nra-st.published{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.nra-st.review{background:color-mix(in srgb,#f59e0b 20%,transparent);color:#b45309}
.nra-st.scheduled{background:color-mix(in srgb,var(--info) 18%,transparent);color:var(--info)}
.nra-st.live{background:#dc2626;color:#fff}
.nra-flag{font-size:11px;font-weight:700;color:#b91c1c}
.nra-ed{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media(max-width:980px){.nra-ed{grid-template-columns:1fr}}
.nra-side{display:flex;flex-direction:column;gap:12px}
.nra-side .card{padding:14px}
.nra-title{resize:none;overflow:hidden;line-height:1.25;width:100%;font-family:var(--hfont);font-size:24px;font-weight:700;border:0;border-bottom:1px solid var(--line2);background:none;color:var(--text);padding:6px 0;outline:none}
.nra-title:focus{border-color:var(--accent)}
.nra-dek{width:100%;border:0;background:none;color:var(--muted);font:inherit;font-size:16px;padding:6px 0;outline:none;resize:vertical}
.nra-tools{display:flex;gap:4px;flex-wrap:wrap;position:sticky;top:0;z-index:5;background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:5px;margin:8px 0}
.nra-tools button{border:0;background:none;color:var(--text);min-width:34px;height:34px;border-radius:8px;cursor:pointer;font:inherit;font-weight:700;padding:0 8px}
.nra-tools button:hover{background:var(--surface2)}
.nra-tools .sep{width:1px;background:var(--line2);margin:4px 2px}
.nra-body{min-height:360px;border:1px solid var(--line2);border-radius:10px;padding:16px 18px;background:var(--surface);color:var(--text);font-size:17px;line-height:1.7;outline:none;overflow-wrap:anywhere}
.nra-body:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.nra-body h2{font-family:var(--hfont);font-size:24px;margin:20px 0 6px}.nra-body h3{font-family:var(--hfont);font-size:20px;margin:16px 0 4px}
.nra-body blockquote{border-left:4px solid var(--accent);margin:12px 0;padding-left:14px;color:var(--muted);font-style:italic}
.nra-body .nr-pull{font-size:22px;text-align:center;border-top:3px solid var(--accent);border-bottom:1px solid var(--line2);padding:12px 0;margin:16px 0}
.nra-body img{max-width:100%;border-radius:10px;display:block;margin:8px auto}
.nra-body figure{margin:14px 0}
.nra-body figure.nr-video{border:2px dashed var(--line2);border-radius:10px;padding:26px;text-align:center;color:var(--muted)}
.nra-body figure.nr-video::before{content:"▶ Video: " attr(data-v);font-weight:700}
.nra-save{font-size:13px;color:var(--dim)}
.nra-save.dirty{color:#b45309}
.nra-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:8px}
.nra-gal div{position:relative}.nra-gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.nra-gal button{position:absolute;top:3px;right:3px;border:0;background:rgba(0,0,0,.65);color:#fff;border-radius:50%;width:22px;height:22px;cursor:pointer}
.nra-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;background:var(--surface2)}
.nra-field{display:flex;flex-direction:column;gap:4px;margin:0 0 10px}
.nra-field>span{font-size:13px;font-weight:600;color:var(--muted)}
.nra-note{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:6px 0;font-size:14px}
.nra-comp{display:flex;flex-direction:column;gap:8px}
.nra-comp textarea{min-height:90px;font-size:16px}
.nra-up{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--surface)}
.nra-up.pin{border-color:var(--accent)}
.nra-up p{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.nra-up img{max-width:160px;border-radius:8px;display:block}
.nra-up .nra-bar{margin-top:6px}
.nra-subnav{display:flex;gap:6px;flex-wrap:wrap}

.nra-side .card h4{margin-bottom:8px}
.nra-dash-h{margin:0}
@media(max-width:760px){.nr-top{position:static}.nr-ah h1{font-size:28px}.nr-prose{font-size:17px}.nr-jump{bottom:16px}}
/* use the real ReconHire mark */
.nr-logo-mark{background:url(/static/img/logo-mark.svg) center/contain no-repeat!important;border-radius:0!important;width:38px;height:38px}
.nr-logo-mark::after{display:none!important}
/* header matches the rest of the site (logo, tagline, glass bar, scan line) */
.nr-head{position:sticky;top:0;z-index:40}
.nr-head .nr-top-r{margin-left:auto}
.nr-pill{font:600 .78rem var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line2);border-radius:999px;padding:4px 10px;text-decoration:none;white-space:nowrap}
.nr-sub .nr-nav{padding-bottom:6px}
@media(max-width:760px){.nr-head{position:static}.nr-head .head-row{height:auto;padding:8px 0;flex-wrap:wrap}.nr-pill{display:none}.nr-head .nr-top-r{margin-left:0;width:100%;justify-content:space-between}}
/* live video: pasted feed + the site's own camera */
.nr-video{display:grid;gap:12px;margin:14px 0}
.nr-embed{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.nr-embed iframe,.nr-embed video{position:absolute;inset:0;width:100%;height:100%;border:0}
.nr-cam{position:relative;background:#000;border-radius:12px;overflow:hidden}
.nr-cam[hidden]{display:none}
.nr-cam-v{display:block;width:100%;aspect-ratio:16/9;background:#000;cursor:pointer}
.nr-cam-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#0c0f17;color:#e8ecf8}
.nr-cam-bar button{background:none;border:0;color:inherit;font-size:16px;cursor:pointer;padding:4px 6px;min-width:30px}
.nr-cam-r{flex:1;min-width:60px;accent-color:var(--accent)}
.nr-cam-t{font:500 12px var(--mono,monospace);color:#aab3cc;white-space:nowrap}
.nr-cam-tag{font:700 12px var(--mono,monospace);letter-spacing:.06em;margin-left:auto;color:#aab3cc;padding:3px 8px;border-radius:999px}
.nr-cam-tag.on{color:#fff;background:#d4223a}.nr-cam-tag.btn{background:#2a3150;cursor:pointer}
.nr-cam:has(.nr-cam-r[style*="none"]) .nr-cam-tag{margin-left:auto}
.nr-cam-no{margin:0;padding:18px;color:#cdd3e8;background:#0c0f17}
/* the main site's menu on the Newsroom header */
.nr-head .head-row{gap:14px}
.nr-head .admin-pill{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.nr-head .admin-pill .ico{width:14px;height:14px}
.nr-tabs{margin-left:auto;display:flex;align-items:stretch;height:100%;gap:0}
.nr-tabs>a,.nr-tabs>details>summary{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:70px;padding:6px 8px 0;height:100%;color:var(--muted);background:none;border:0;cursor:pointer;font:500 .74rem var(--font);white-space:nowrap;text-decoration:none;list-style:none;box-sizing:border-box}
.nr-tabs>details>summary::-webkit-details-marker{display:none}
.nr-tabs>details{display:flex;height:100%;position:relative}
.nr-tabs .ico{width:23px;height:23px}
.nr-tabs>a:hover,.nr-tabs>details>summary:hover,.nr-tabs>details[open]>summary{color:var(--text)}
.nr-me{width:26px;height:26px;border-radius:50%;overflow:hidden;display:inline-block;background:var(--surface2)}
.nr-me img{width:100%;height:100%;object-fit:cover;display:block}
.nr-menu{position:absolute;top:100%;right:0;min-width:210px;max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:8px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);z-index:60;display:grid;gap:2px}
.nr-menu b{font:600 .66rem var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:8px 10px 2px}
.nr-menu a{color:var(--text)!important;text-decoration:none;padding:7px 10px;border-radius:8px;font-size:.86rem}
.nr-menu a:hover{background:var(--surface2)}
.nr-signin{min-width:70px}
.nr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nr-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nr-sub .nr-nav{flex:1;min-width:0}
.nr-sub-r{display:flex;align-items:center;gap:8px;padding-bottom:6px}
@media(max-width:900px){.nr-head .head-row{height:auto;flex-wrap:wrap;padding:6px 0}.nr-tabs{order:3;width:100%;margin-left:0;overflow-x:auto;height:56px}.nr-tabs>a,.nr-tabs>details>summary{min-width:64px}.nr-menu{position:fixed;left:12px;right:12px;top:auto}}

/* search box and Newsroom tag in the header, same look as the main site */
.nr-head .gs{flex:0 1 300px}
.nr-head .nr-pill{margin-left:-2px}
.nr-head .gs-form .gs-input{border:0;padding:0;background:none;width:auto}
@media(max-width:900px){.nr-head .gs{order:2;flex:1 1 160px}.nr-pill{display:inline-block}}
@media(max-width:760px){.nr-pill{display:none}}

/* same details as the main menu: carets on the dropdowns, a divider before For Business, the Advertise label */
.nr-tabs>details>summary>span:last-child::after{content:"";display:inline-block;width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:6px;opacity:.8}
.nr-tabs>.nr-biz{margin-left:8px;padding-left:8px;border-left:1px solid var(--line2)}
.nr-tabs>.nr-biz>summary{min-width:96px}
.nr-me{width:28px;height:28px}
.nr-sr{position:static;width:auto;height:auto;clip:auto;overflow:visible}
.nr-head .gs{flex:0 1 300px;min-width:150px}
.nr-head .gs:focus-within{flex-basis:440px}
@media(max-width:1180px){.nr-head .nr-pill{display:none}}
.nr-head .gs{flex:1 1 300px;max-width:420px;min-width:200px}
.nr-head .gs:focus-within{flex-basis:420px}
@media(max-width:1320px){.nr-head .nr-pill{display:none}}
.nr-pill-sub{display:none;margin-bottom:6px}
@media(max-width:1500px){.nr-head .head-row .nr-pill{display:none}.nr-pill-sub{display:inline-block}}
.nr-head .nr-sub .nr-pill-sub{display:none}
@media(max-width:1500px){.nr-head .nr-sub .nr-pill-sub{display:inline-block;margin-right:6px}}

.nr-menu .nr-out{display:block;width:100%;text-align:left;margin-top:6px;padding:8px 10px;border:0;border-top:1px solid var(--line2);border-radius:0 0 8px 8px;background:none;color:var(--text);font:inherit;font-size:.86rem;cursor:pointer}.nr-menu .nr-out:hover{background:var(--surface2)}
.nr-menu a.nr-me-card{display:grid;gap:1px;padding:8px 10px 10px;border-bottom:1px solid var(--line2);border-radius:8px 8px 0 0;margin-bottom:4px}.nr-me-card b{padding:0;font:600 .92rem var(--hfont,inherit);text-transform:none;letter-spacing:0;color:var(--text)}.nr-me-card small{color:var(--dim);font-size:.76rem}

.nr-appear{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;font-size:.86rem;color:var(--text)}.nr-seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}.nr-seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:.76rem;padding:4px 8px;cursor:pointer}.nr-seg button.on{background:var(--accent);color:#fff}

/* menus are the site's own (w8-menus.js); the server-rendered lists stay as the no-script fallback */
.nr-js .nr-menu{display:none!important}
.nr-tabs .nr-pop{position:relative}
.nr-tabs .nr-pop>.menu{right:0;top:calc(100% + 8px);z-index:60}

/* links inside the site menus keep the menu text colour (the Newsroom page styles plain links blue) */
.nr-tabs .menu a,.nr-tabs .menu a:hover{color:var(--text)!important;text-decoration:none}
.nr-tabs .menu a.mm-card .mm-card-t b{color:var(--text)}
.nr-tabs .menu .mm-ver{color:var(--dim)!important}
/* phones: the top menu scrolls sideways and every item keeps its own space (labels no longer run together) */
@media(max-width:900px){
  .nr-tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:2px}
  .nr-tabs::-webkit-scrollbar{display:none}
  .nr-tabs>a,.nr-tabs>details{flex:none}
  .nr-tabs>a,.nr-tabs>details>summary{min-width:78px;padding:6px 14px 0;white-space:nowrap;font-size:13px}
  .nr-tabs>.nr-biz{margin-left:4px}
}

/* w5-jobs.css */
/* Jobs home: search hero, categories, collections, right rail (w5-jobs.js) */
.jh-grid.jh-3{grid-template-columns:240px minmax(0,1fr) 300px;max-width:1380px}
.jh-right{position:sticky;top:84px;display:grid;gap:12px;align-self:start;min-width:0}
.jh-right .card{border-radius:var(--jr,18px)}
@media (max-width:1240px){
  .jh-grid.jh-3{grid-template-columns:296px minmax(0,1fr)}
  .jh-right{grid-column:2;position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (max-width:900px){.jh-grid.jh-3{grid-template-columns:minmax(0,1fr)}.jh-right{grid-column:auto}}

.jf-hero{padding:20px 22px 18px;position:relative;overflow:hidden;display:grid;gap:12px;
  background:radial-gradient(520px 200px at 100% 0,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 70%),radial-gradient(420px 180px at 0 100%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--surface)}
.jf-hero::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent 85%)}
.jf-title{margin:0;font:800 clamp(1.3rem,2.4vw,1.7rem)/1.2 var(--hfont)}
.jf-form{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:8px;align-items:stretch}
.jf-f{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line2);border-radius:14px;background:var(--surface);min-width:0}
.jf-f:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.jf-f .ico{width:18px;height:18px;color:var(--muted);flex:none}
.jf-f .input,.jf-in{border:0!important;background:none!important;box-shadow:none!important;padding:13px 0!important;min-width:0;flex:1;font-size:.95rem}
.jf-go{border-radius:14px;padding:0 22px;gap:8px;white-space:nowrap}
.jf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jf-lbl{font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.jf-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--surface);color:var(--text);font:600 .82rem var(--font);cursor:pointer;transition:border-color .15s,background .15s}
.jf-chip .ico{width:14px;height:14px;color:var(--accent)}
.jf-chip:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
@media (max-width:700px){.jf-form{grid-template-columns:1fr}.jf-go{padding:12px 20px;justify-content:center}.jf-hero{padding:16px}}

.jf-sec .jh-sec-h{padding-bottom:10px}
.jf-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:2px 20px 18px}
.jf-cat{position:relative;display:grid;gap:2px;text-align:left;padding:14px 14px 14px 14px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;font:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}
.jf-cat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tc,var(--accent)) 55%,var(--line2));box-shadow:0 12px 26px -18px var(--tc,var(--accent))}
.jf-cat b{font:700 .98rem var(--hfont);padding-right:22px}.jf-cat small{color:var(--muted);font-size:.8rem}
.jf-cat-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;margin-bottom:8px;background:color-mix(in srgb,var(--tc,var(--accent)) 14%,transparent);color:var(--tc,var(--accent))}.jf-cat-ic .ico{width:20px;height:20px}
.jf-cat-go{position:absolute;right:12px;top:14px;color:var(--muted)}.jf-cat-go .ico{width:16px;height:16px}
.jf-cat.t1,.jf-col.c1 .jf-col-ic{--tc:#2563eb}.jf-cat.t2{--tc:#7c3aed}.jf-cat.t3{--tc:#0891b2}.jf-cat.t4{--tc:#059669}.jf-cat.t5{--tc:#d97706}.jf-cat.t6{--tc:#db2777}
.jf-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:2px 20px 18px}
@media (max-width:620px){.jf-cols{grid-template-columns:1fr;padding:2px 14px 14px}.jf-cats{padding:2px 14px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}}
.jf-col{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line2);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}
.jf-col:hover{text-decoration:none;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.jf-col-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}.jf-col-ic .ico{width:20px;height:20px}
.jf-col.c2 .jf-col-ic{background:linear-gradient(135deg,#f59e0b,#ef4444)}.jf-col.c3 .jf-col-ic{background:linear-gradient(135deg,#10b981,#0891b2)}.jf-col.c4 .jf-col-ic{background:linear-gradient(135deg,#6366f1,#ec4899)}
.jf-col.c5 .jf-col-ic{background:linear-gradient(135deg,#0ea5e9,#6366f1)}.jf-col.c6 .jf-col-ic{background:linear-gradient(135deg,#2563eb,#14b8a6)}.jf-col.c7 .jf-col-ic{background:linear-gradient(135deg,#8b5cf6,#d946ef)}.jf-col.c8 .jf-col-ic{background:linear-gradient(135deg,#64748b,#334155)}
.jf-col-t{display:grid;gap:1px;min-width:0}.jf-col-t b{font:700 .92rem var(--hfont)}.jf-col-t small{color:var(--muted);font-size:.78rem;line-height:1.35}

.jf-tips{display:grid;gap:4px;padding:16px}
.jf-tips>b{font:700 1.05rem var(--hfont);margin:0 0 6px}
.jf-tip{display:flex;align-items:center;gap:12px;padding:9px 8px;margin:0 -8px;border-radius:12px;color:var(--text);text-decoration:none}
.jf-tip:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);text-decoration:none}
.jf-tip>.ico{width:20px;height:20px;color:var(--accent);flex:none}
.jf-tip span{display:grid;gap:1px;min-width:0}.jf-tip b{font-size:.88rem}.jf-tip small{color:var(--muted);font-size:.78rem}

/* profile.css */
/* ReconHire profile and wallet: hero, profile power, streak, slim share bar, spotlight, compact cert tiles, badges of
   honor for ReconHire certificates and achievements, and Premium wallet themes on the public page (wallet-ui.js,
   habits-ui.js, certificates-ui.js). Theme tokens only: light and dark both work. */
:root{--pf-g:linear-gradient(135deg,var(--accent),var(--accent2));--pf-g3:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899,var(--accent));--pf-gold:linear-gradient(135deg,#fde68a,#f59e0b 55%,#d97706)}

/* ===== hero ===== */
.pf-hero{border-radius:24px!important;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:var(--shadow)}
.pf-cover{height:200px;background:
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/28px 28px,
  radial-gradient(520px 240px at 100% 0%,rgba(236,72,153,.45),transparent 70%),radial-gradient(480px 240px at 0% 100%,rgba(91,140,255,.5),transparent 70%),linear-gradient(120deg,#1e1b4b,#312e81 45%,#4c1d95)}
.pf-cover::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--pf-g3);background-size:200% 100%;animation:pfSlide 6s linear infinite}
.pf-cover:not(:has(img))::before{content:"";position:absolute;right:28px;top:-20px;width:150px;height:170px;opacity:.35;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M50 3 94 28v56L50 109 6 84V28z'/%3E%3Cpath d='M50 25 75 39v34L50 87 25 73V39z' opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat}
.pf-photo .wl-photo{box-shadow:0 0 0 5px var(--surface),0 0 0 8px color-mix(in srgb,var(--accent) 55%,transparent),0 20px 40px -20px var(--accent2)}
.pf-id h1{font:700 1.9rem/1.15 var(--hfont)}
.pf-id .rh-kick{color:var(--accent2)}
.pf-hl{font-size:1.04rem;color:var(--text)}
.pf-conn a{background:var(--pf-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-acts .btn.sm:first-child{background:var(--pf-g);color:#fff;border:0;box-shadow:0 10px 24px -14px var(--accent2)}
.pf-org-ic{background:var(--pf-g);color:#fff;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0}

/* ===== slim share bar (right under the hero) ===== */
.wl-sharebar{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 12px;margin:12px 0 4px;border-radius:16px!important;border:1px solid var(--line);flex-wrap:wrap}
.wl-sharebar.is-live{border-color:color-mix(in srgb,var(--good) 40%,var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--good) 8%,var(--surface)),var(--surface) 50%)}
.wl-sb-t{flex:1;min-width:200px;display:grid;line-height:1.25}
.wl-sb-t b{font:700 .95rem var(--hfont)}
.wl-sb-t a{font:600 .82rem var(--mono);color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-sb-t small{font-size:.8rem}
.wl-sb-acts{display:flex;gap:6px;flex-wrap:wrap}
.wl-sb-acts .btn{border-radius:999px}
.wl-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.wl-theme{position:relative;display:grid;justify-items:center;gap:5px;padding:8px 6px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:var(--text)}
.wl-theme i{display:block;width:100%;height:30px;border-radius:8px}
.wl-theme small{font-size:.74rem}
.wl-theme em{position:absolute;top:4px;right:4px;font:600 .54rem/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--pf-gold);padding:3px 5px;border-radius:999px}
.wl-theme.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.wl-qr{display:grid;place-items:center;padding:14px;background:#fff;border-radius:16px}
.wl-qr svg{width:min(260px,70vw);height:auto}
.wl-qr-wrap{align-items:center}

/* ===== spotlight ===== */
.wl-spot{margin:14px 0 6px}
.wl-spot-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.wl-spot-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,#f59e0b 45%,var(--line));
  background:radial-gradient(200px 100px at 100% 0%,color-mix(in srgb,#f59e0b 18%,transparent),transparent 70%),var(--surface);box-shadow:0 14px 30px -22px #f59e0b}
.wl-spot-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--pf-gold)}
.wl-spot-art{width:48px;height:48px;object-fit:contain;flex:none}
.wl-spot-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;color:#fff;background:var(--pf-gold);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.wl-spot-ic .ico{width:20px;height:20px}
.wl-spot-card>div{min-width:0;display:grid}
.wl-spot-card b{font:700 .92rem/1.25 var(--hfont);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-spot-card small{color:var(--muted);font-size:.76rem}

/* ===== profile power (side) ===== */
.pf-power{position:relative;overflow:hidden;padding:16px;display:grid;gap:12px;border-radius:18px!important}
.pf-power::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--pf-g3);background-size:200% 100%;animation:pfSlide 6s linear infinite}
.pf-power.all-star{border-color:color-mix(in srgb,#f59e0b 45%,var(--line));background:radial-gradient(260px 140px at 100% 0%,color-mix(in srgb,#f59e0b 16%,transparent),transparent 70%),var(--surface)}
.pf-power.all-star::before{background:var(--pf-gold)}
.pf-power-top{display:flex;align-items:center;gap:14px}
.pf-ring{--v:0;width:84px;height:84px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) 0,var(--accent2) calc(var(--v) * .6%),#ec4899 calc(var(--v) * 1%),color-mix(in srgb,var(--text) 10%,transparent) 0);box-shadow:0 14px 30px -18px var(--accent2)}
.pf-power.all-star .pf-ring{background:conic-gradient(#fde68a,#f59e0b,#d97706,#fde68a);animation:pfSpin 6s linear infinite}
.pf-ring>div{width:66px;height:66px;border-radius:50%;background:var(--surface);display:grid;place-items:center;align-content:center;text-align:center}
.pf-ring b{font:700 1.25rem/1 var(--hfont)}
.pf-ring small{font:600 .56rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pf-power-t{display:grid;gap:3px;min-width:0}
.pf-power-t b{font:700 1.05rem/1.2 var(--hfont)}
.pf-power-t small{color:var(--muted);font-size:.8rem;line-height:1.4}
.pf-steps{display:grid;gap:6px}
.pf-step{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 4%,transparent);color:var(--text);font:inherit;cursor:pointer;text-align:left;transition:border-color .15s,transform .15s}
.pf-step:hover{border-style:solid;border-color:var(--accent);transform:translateX(2px)}
.pf-step>span{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--pf-g)}
.pf-step>span .ico{width:12px;height:12px}
.pf-step b{flex:1;font-size:.86rem;font-weight:600}
.pf-step em{font:700 .74rem var(--mono);font-style:normal;color:var(--good)}
.pf-star{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;color:#7c2d12;background:var(--pf-gold);font-weight:700;font-size:.88rem}
.pf-star .ico{width:16px;height:16px}
.pf-views{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf-views a{display:grid;gap:1px;padding:9px 11px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .15s}
.pf-views a:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);text-decoration:none}
.pf-views b{font:700 1.2rem/1 var(--hfont);background:var(--pf-g);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-views small{color:var(--muted);font-size:.72rem}
.pf-lang{align-items:center}

/* ===== streak card (habits-ui.js, beside the profile) ===== */
.hb-side{position:relative;overflow:hidden;border-radius:18px!important;background:radial-gradient(260px 140px at 100% 0%,color-mix(in srgb,#f97316 14%,transparent),transparent 70%),var(--surface)}
.hb-side::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#f97316,#ec4899,#f59e0b)}
.hb-side .rh-kick{color:#f97316}
.hb-side .hb-flame-wrap{width:58px;height:58px;border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:color-mix(in srgb,var(--text) 8%,transparent);box-shadow:none}
.hb-side .hb-flame-wrap.lit{background:linear-gradient(135deg,#f97316,#ec4899)}
.hb-side .hb-flame-wrap.lit .hb-flame .o{fill:#fff7ed}.hb-side .hb-flame-wrap.lit .hb-flame .i{fill:#fde047}
.hb-side .hb-streak-t b{font:700 1.15rem/1.2 var(--hfont)}
.hb-side .hb-week span i{border-radius:3px;height:12px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hb-side .hb-week span.on i{background:linear-gradient(135deg,#f97316,#ec4899);box-shadow:0 0 10px color-mix(in srgb,#f97316 60%,transparent)}
.hb-side .hb-week span.today i{outline:2px solid color-mix(in srgb,#f97316 60%,transparent);outline-offset:2px}
.hb-side .btn{border-radius:999px;background:linear-gradient(135deg,#f97316,#ec4899);color:#fff;border:0}

/* ===== certifications: smaller tiles, same info ===== */
.wl-certs{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))!important;gap:8px!important}
.wl-cert{padding:9px 9px 8px!important;min-height:0!important;border-radius:12px!important;gap:4px!important}
.wl-cert .wl-cert-art{width:52px!important;height:52px!important}
.wl-cert-name{font-size:.76rem!important;line-height:1.2!important;-webkit-line-clamp:2!important}
.wl-cert .wl-issuer{font-size:.56rem!important}
.wl-cert-meta{font-size:.64rem!important}
.wl-cert-foot a{font-size:.68rem!important}
.wl-cert-foot .icon-btn{width:22px!important;height:22px!important}
@media (max-width:520px){.wl-certs{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* ===== ReconHire certificates: badges of honor ===== */
.ct-wsec{position:relative;padding:16px;border-radius:20px;border:1px solid color-mix(in srgb,#f59e0b 40%,var(--line));
  background:radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,#f59e0b 14%,transparent),transparent 70%),radial-gradient(360px 200px at 0% 100%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),var(--surface);overflow:hidden}
.ct-wsec::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--pf-gold)}
.ct-wsec .wl-sec-h h3{font-family:var(--hfont);order:-1}
.ct-wsec .wl-sec-h h3 .ico{color:#f59e0b}
.ct-wsec .wl-sec-h::after{content:"Badge of honor";order:0;font:600 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#92400e;background:var(--pf-gold);padding:5px 9px;border-radius:999px;margin-right:auto;margin-left:10px}
html[data-theme="dark"] .ct-wsec .wl-sec-h::after{color:#451a03}
.ct-wcard{position:relative;border-radius:16px;transition:transform .2s,box-shadow .2s}
.ct-wcard:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px #f59e0b}
.ct-wcard .ct-mini{position:relative;overflow:hidden}
.ct-wcard .ct-mini::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:pfShine 5s ease-in-out infinite}

/* ===== projects and achievements: honors ===== */
.wl-item{position:relative;border-radius:16px!important;transition:transform .18s,box-shadow .18s,border-color .18s}
.wl-item:hover{transform:translateY(-2px);box-shadow:0 16px 32px -22px var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.wl-item-ico{background:var(--pf-g)!important;color:#fff!important;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0!important;width:32px!important;height:32px!important}
.wl-item .wl-item-ico{top:10px!important;right:10px!important}.wl-item .wl-item-ico svg{width:15px!important;height:15px!important}
.wl-item .wl-item-top{padding-right:44px!important;min-height:32px;align-items:flex-start!important;line-height:1.35}
.wl-item .wl-item-body{padding-top:2px}
.wl-item .wl-feat{color:#f59e0b}
.wl-item:has(.wl-feat){border-color:color-mix(in srgb,#f59e0b 50%,var(--line));background:radial-gradient(220px 100px at 100% 0%,color-mix(in srgb,#f59e0b 14%,transparent),transparent 70%),var(--surface)}
.wl-item:has(.wl-feat)::before{content:"Honor";position:absolute;bottom:10px;right:10px;font:600 .56rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#92400e;background:var(--pf-gold);padding:4px 7px;border-radius:999px}
.wl-badges .wl-badge:not(.locked){border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:radial-gradient(160px 80px at 100% 0%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 70%),var(--surface)}
.wl-badges .wl-badge:not(.locked) .wl-badge-ico{background:var(--pf-g);color:#fff;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0}
.wl-sec-h .chip{background:var(--pf-g);color:#fff;border:0}

/* ===== public wallet themes (Premium) ===== */
.wl-public.wl-t-aurora{--accent:#06b6d4;--accent2:#8b5cf6}
.wl-public.wl-t-ember{--accent:#f97316;--accent2:#ec4899}
.wl-public.wl-t-ocean{--accent:#0ea5e9;--accent2:#10b981}
.wl-public.wl-t-forest{--accent:#16a34a;--accent2:#0d9488}
.wl-public.wl-t-mono{--accent:#475569;--accent2:#0f172a}
.wl-public[class*="wl-t-"] .wl-hero{background:radial-gradient(520px 240px at 100% 0%,color-mix(in srgb,var(--accent2) 28%,transparent),transparent 70%),radial-gradient(480px 240px at 0% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--surface)}

@keyframes pfSlide{to{background-position:-200% 0}}
@keyframes pfSpin{to{transform:rotate(360deg)}}
@keyframes pfShine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.pf-cover::after,.pf-power::before,.pf-power.all-star .pf-ring,.ct-wcard .ct-mini::after{animation:none}}
@media (max-width:640px){.wl-sharebar{gap:10px}.wl-sb-acts{width:100%}.pf-views{grid-template-columns:1fr 1fr}}
/* an uploaded banner keeps its 4:1 shape at every width instead of being cropped to a fixed height (phones showed only the middle) */
.pf-cover:has(img){height:auto;max-height:280px;width:100%;max-width:100%}
.pf-cover:has(img) img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover;object-position:center}
@media (max-width:640px){.pf-cover{height:120px}.pf-cover:has(img){height:auto;min-height:0}.pf-cover:has(img)~.pf-top .pf-photo{margin-top:-52px}}

/* current job and university beside the intro (like LinkedIn) */
.pf-orgs{display:grid;gap:12px;align-content:start;min-width:230px;max-width:320px;padding-top:6px}
.pf-orgs>.pf-org,.pf-orgs>div.pf-org{display:flex;gap:10px;align-items:center;text-align:left;background:none;border:0;padding:0;margin:0;color:var(--text);font:inherit;cursor:default}
.pf-orgs>button.pf-org{cursor:pointer;border-radius:10px;padding:4px;margin:-4px}
.pf-orgs>button.pf-org:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pf-org-logo,.pf-org-mono{width:40px;height:40px;border-radius:8px;flex:none;object-fit:contain;background:var(--surface,#fff);border:1px solid var(--border,rgba(128,128,128,.25))}
.pf-org-mono{display:grid;place-items:center;font-weight:800;font-size:.9rem;color:#fff;border:0;background:hsl(var(--h,210) 55% 42%)}
.pf-org-t{display:grid;min-width:0;line-height:1.25}
.pf-org-t b{font-size:.92rem;overflow-wrap:anywhere}
.pf-org-t small{color:var(--muted);font-size:.78rem}
.pf-orgs>button.pf-org.add{display:inline-flex;gap:6px;color:var(--accent);font-weight:600;font-size:.85rem}
.pf-orgs>button.pf-org.add .ico{width:16px;height:16px}
.pf-orgs.inline{display:flex;flex-wrap:wrap;gap:16px;max-width:none;margin-top:10px;padding:0}
@media (max-width:700px){.pf-orgs{min-width:0;max-width:none}}
.org-line{align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.org-logo-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.org-prev{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--border,rgba(128,128,128,.3));background:var(--surface,transparent);color:var(--muted);overflow:hidden}
.org-prev img{width:100%;height:100%;object-fit:contain}.org-prev .ico{width:18px;height:18px}
.org-sug-wrap{position:relative}
.org-sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;display:grid;max-height:260px;overflow:auto;background:var(--surface,#fff);color:var(--text);border:1px solid var(--border,rgba(128,128,128,.3));border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.22);padding:4px}
.org-sug[hidden]{display:none}
.org-sug-i{text-align:left;background:none;border:0;color:inherit;font:inherit;font-size:.9rem;padding:8px 10px;border-radius:7px;cursor:pointer}
.org-sug-i:hover,.org-sug-i.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.org-find{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.org-dom{width:210px;max-width:100%;padding:6px 10px;font-size:.85rem}
.org-logo-pick small{flex-basis:100%}

/* narrower profile page and sign-in box */
@media (min-width:1061px){html body .rail-grid:has(.pf-page){grid-template-columns:minmax(0,780px) 300px;justify-content:center}}
html body .auth .card{width:min(380px,100%)}
html body .hero-login{width:min(100%,400px)!important;max-width:400px}

/* small organisation logos in the intro (company and university) */
.pf-org-logo,.pf-org-mono{width:28px!important;height:28px!important;border-radius:6px}
.pf-org-mono{font-size:.68rem}
.pf-orgs{gap:8px;min-width:200px}
.pf-orgs>.pf-org,.pf-orgs>div.pf-org{gap:9px}
.pf-org-t b{font-size:.86rem}.pf-org-t small{font-size:.72rem}
.pf-orgs.inline{gap:8px 18px;margin-top:8px}
@media (max-width:700px){.pf-orgs{display:grid;gap:8px;margin-top:8px}.pf-orgs.inline{display:grid}}

/* Open-to-work glow: a ring that is solid at one side and fades to nothing, plus a small "Ready to recon" tag */
.nav-av.av-otw,.wl-photo.av-otw{position:relative;overflow:visible}
.nav-av.av-otw>img{border-radius:50%}
.av-otw::before{content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none;z-index:1;
  background:conic-gradient(from 210deg,var(--good,#22c55e) 0%,color-mix(in srgb,var(--good,#22c55e) 70%,var(--accent2,#8b5cf6)) 40%,transparent 88%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--good,#22c55e) 55%,transparent))}
.av-otw-tag{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:3;white-space:nowrap;padding:2px 10px;border-radius:999px;font:700 .64rem/1.5 var(--mfont,var(--hfont));letter-spacing:.06em;text-transform:uppercase;color:#04210f;background:linear-gradient(90deg,var(--good,#22c55e),color-mix(in srgb,var(--good,#22c55e) 40%,#fff));box-shadow:0 2px 8px rgba(0,0,0,.28)}
.wl-photo.av-otw-own::after{content:"Ready to recon";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:3;white-space:nowrap;padding:2px 10px;border-radius:999px;font:700 .64rem/1.5 var(--mfont,var(--hfont));letter-spacing:.06em;text-transform:uppercase;color:#04210f;background:linear-gradient(90deg,var(--good,#22c55e),color-mix(in srgb,var(--good,#22c55e) 40%,#fff))}
.wl-photo.av-otw-own>*:first-child{border-radius:50%}
@media (prefers-reduced-motion:no-preference){.av-otw::before{animation:otwspin 14s linear infinite}@keyframes otwspin{to{transform:rotate(360deg)}}}

/* v2.0.126: the public wallet link lives in the Share profile dialog (no separate bar under the profile header) */
.pf-share-btn{position:relative}
.pf-share-btn.is-live{border-color:color-mix(in srgb,var(--good) 45%,var(--line2))}
.pf-live-dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent);margin-left:2px}
.wl-share-dlg .wl-sharebar{margin:0}
.wl-share-dlg .wl-sb-acts{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.wl-share-out{justify-content:center}
.wl-share-note{margin:0;font-size:.84rem}

/* w3-games.css */
/* Games & puzzles hub, the "Today's puzzles" card, and the extra Messaging games */
.gx-tile{display:inline-grid;place-items:center;border-radius:12px;flex:none;color:#fff;box-shadow:0 6px 14px -8px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.25);line-height:1}
.gx-card{padding:16px 16px 10px}
.gx-card-h{margin:0 0 6px;font:700 1.05rem var(--hfont)}
.gx-list{display:grid}
.gx-row{display:flex;align-items:center;gap:12px;padding:9px 6px;margin:0 -6px;border-radius:12px;color:var(--text);text-decoration:none}
.gx-row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);text-decoration:none}
.gx-row-t{display:grid;gap:1px;min-width:0;flex:1}
.gx-row-t b{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-row-t small{color:var(--muted);font-size:.8rem}
.gx-chev{color:var(--muted);display:inline-flex}.gx-chev .ico{width:18px;height:18px}
.gx-more{display:flex;align-items:center;gap:6px;margin:6px auto 4px;padding:6px 12px;background:none;border:0;color:var(--muted);font:600 .86rem var(--bfont,inherit);cursor:pointer;border-radius:999px}
.gx-more:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 8%,transparent)}.gx-more .ico{width:15px;height:15px}
.gx-page{display:grid;gap:10px}
.gx-gh{margin:14px 2px 2px;font:700 1.05rem var(--hfont)}
.gx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.gx-game{display:flex;align-items:center;gap:14px;padding:14px 16px;color:var(--text);text-decoration:none;transition:transform .15s,border-color .15s}
.gx-game:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));text-decoration:none}
.gx-game-t{display:grid;gap:2px;min-width:0;flex:1}
.gx-game-t b{font-size:1rem}.gx-game-t p{margin:0;color:var(--muted);font-size:.86rem}.gx-game-t small{color:var(--accent);font-weight:600;font-size:.78rem}
.gx-bar{display:flex;align-items:center;gap:12px;margin:0 0 12px;flex-wrap:wrap}.gx-bar-t{display:inline-flex;align-items:center;gap:8px;font-size:1.05rem}
.gx-play{max-width:640px;margin:0 auto;padding:20px;display:grid;gap:14px;justify-items:center;text-align:center}
.gx-q{display:grid;gap:12px;width:100%;text-align:left}.gx-q small{color:var(--muted)}.gx-qt{font:700 1.2rem/1.35 var(--hfont)}
.gx-q .gm-opts{display:grid;gap:8px}
.gx-q .gm-opt.right,.gx-log .right{border-color:#16a34a;background:color-mix(in srgb,#16a34a 16%,var(--surface))}
.gx-q .gm-opt.wrong,.gx-log .wrong{border-color:#dc2626;background:color-mix(in srgb,#dc2626 14%,var(--surface))}
.gx-fb{min-height:1.4em;margin:0;font-weight:600}.gx-fb.ok{color:#16a34a}.gx-fb.no{color:#dc2626}
.gx-info{margin:0;color:var(--muted);font-weight:600}
.gx-hint{margin:0;font-size:.82rem}
.gx-log{display:grid;gap:8px}.gx-logline{padding:10px 12px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:500 .84rem/1.4 var(--mono,ui-monospace,monospace);cursor:pointer;word-break:break-word}.gx-logline:hover{border-color:var(--accent)}
.gx-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(100%,380px)}
.gx-card-f{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:1.8rem;cursor:pointer;perspective:600px}
.gx-card-f .gx-f-back,.gx-card-f .gx-f-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;transition:opacity .2s,transform .3s}
.gx-card-f .gx-f-face{background:var(--surface);border:2px solid var(--accent);opacity:0;transform:scale(.8)}
.gx-card-f.up .gx-f-face,.gx-card-f.ok .gx-f-face{opacity:1;transform:none}.gx-card-f.ok{box-shadow:0 0 0 3px #16a34a}
.gx-2048{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;border-radius:14px;background:color-mix(in srgb,var(--accent) 14%,var(--surface2,var(--surface)));width:min(100%,340px);touch-action:none;outline:none}
.gx-t{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;font:800 1.4rem var(--hfont);background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.gx-t2{background:#dbeafe;color:#1e3a8a}.gx-t4{background:#bfdbfe;color:#1e3a8a}.gx-t8{background:#fdba74;color:#7c2d12}.gx-t16{background:#fb923c;color:#fff}.gx-t32{background:#f87171;color:#fff}.gx-t64{background:#ef4444;color:#fff}.gx-t128{background:#fde047;color:#713f12;font-size:1.2rem}.gx-t256{background:#facc15;color:#713f12;font-size:1.2rem}.gx-t512{background:#a3e635;color:#365314;font-size:1.2rem}.gx-t1024{background:#34d399;color:#064e3b;font-size:1rem}.gx-t2048{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:1rem}
.gx-pad{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.gx-sud{display:grid;grid-template-columns:repeat(4,1fr);width:min(100%,280px);border:3px solid var(--text);border-radius:6px;overflow:hidden}
.gx-sc{aspect-ratio:1;border:1px solid var(--line);background:var(--surface);color:var(--accent);font:700 1.5rem var(--hfont);cursor:pointer;padding:0}
.gx-sc.fx{background:color-mix(in srgb,var(--text) 8%,var(--surface));color:var(--text);cursor:default}
.gx-sc.rb{border-right:3px solid var(--text)}.gx-sc.bb{border-bottom:3px solid var(--text)}.gx-sc.sel{outline:3px solid var(--accent2);outline-offset:-3px}
.gx-wg{display:grid;gap:6px}.gx-wr{display:grid;grid-template-columns:repeat(5,52px);gap:6px;justify-content:center}
.gx-wc{display:grid;place-items:center;height:52px;border:2px solid var(--line);border-radius:8px;font:800 1.5rem var(--hfont);text-transform:uppercase}
.gx-wc.g{background:#16a34a;border-color:#16a34a;color:#fff}.gx-wc.y{background:#ca8a04;border-color:#ca8a04;color:#fff}.gx-wc.x{background:color-mix(in srgb,var(--text) 22%,var(--surface));border-color:transparent;color:var(--text)}
.gx-kb{display:grid;gap:6px;width:100%}.gx-kr{display:flex;gap:4px;justify-content:center}
.gx-k{min-width:30px;height:44px;padding:0 6px;border:0;border-radius:8px;background:color-mix(in srgb,var(--text) 12%,var(--surface));color:var(--text);font:700 .85rem var(--hfont);cursor:pointer;flex:1;max-width:44px}.gx-k.w{max-width:64px;flex:1.5}
.gx-k.g{background:#16a34a;color:#fff}.gx-k.y{background:#ca8a04;color:#fff}.gx-k.x{background:color-mix(in srgb,var(--text) 30%,var(--surface));opacity:.6}
.gx-done{display:grid;gap:10px;justify-items:center;padding:10px}.gx-done h2{margin:0}.gx-score{margin:0;color:var(--muted);font-weight:700}
.gx-burst{font-size:3rem;animation:gxpop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes gxpop{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
.gx-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.reduce-motion .gx-burst{animation:none}
@media (max-width:480px){.gx-wr{grid-template-columns:repeat(5,44px)}.gx-wc{height:44px}.gx-play{padding:14px}}
/* Messaging: the game picker holds more games now */
.gm-pick-g{max-height:min(60vh,420px);overflow:auto}

/* confetti, stickers, big emoji messages (w3-fun.js) */
.fx-confetti{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:60}
.fx-confetti.full{position:fixed;left:50%;top:40%;inset:auto;width:0;height:0;z-index:9999}
.fx-confetti:not(.full){left:50%;top:35%;inset:auto;width:0;height:0}
.fx-confetti i{position:absolute;left:0;top:0;font-style:normal;font-size:1.3rem;opacity:0;animation:fxburst 1.6s cubic-bezier(.15,.8,.3,1) forwards}
.fx-confetti i.bit{width:8px;height:12px;border-radius:2px}
@keyframes fxburst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 120px)) rotate(var(--r)) scale(1)}}
.fx-stickers{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;max-height:230px;overflow:auto}
.fx-st{background:none;border:0;border-radius:12px;padding:6px;cursor:pointer;font-size:1.9rem;line-height:1}
.fx-st:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.fx-st span,.fx-j{display:inline-block}
.fx-a-bounce{animation:fxbounce 1.1s ease-in-out infinite}.fx-a-spin{animation:fxspin 2.4s linear infinite}.fx-a-shake{animation:fxshake 1.2s ease-in-out infinite}
.fx-a-pulse{animation:fxpulse 1.2s ease-in-out infinite}.fx-a-wave{animation:fxwave 1.4s ease-in-out infinite;transform-origin:70% 70%}.fx-a-float{animation:fxfloat 2.2s ease-in-out infinite}
@keyframes fxbounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-22%)}60%{transform:translateY(-8%)}}
@keyframes fxspin{to{transform:rotate(360deg)}}
@keyframes fxshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
@keyframes fxpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes fxwave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(16deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
@keyframes fxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12%)}}
.cm-bub.fx-j{background:transparent!important;box-shadow:none!important;border:0!important;font-size:2.6rem;line-height:1.1;padding:2px 4px!important}
.reduce-motion .fx-a-bounce,.reduce-motion .fx-a-spin,.reduce-motion .fx-a-shake,.reduce-motion .fx-a-pulse,.reduce-motion .fx-a-wave,.reduce-motion .fx-a-float,.reduce-motion .fx-confetti i{animation:none}
@media (prefers-reduced-motion:reduce){.fx-a-bounce,.fx-a-spin,.fx-a-shake,.fx-a-pulse,.fx-a-wave,.fx-a-float{animation:none}}

/* slim-heads.css */
/* Slim page headers: every page's top tile is one compact, colorful strip (title, one line of text, action on the right). */
:root{--sh-grad:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899)}
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x,.rh-tool>.page-head,.rh-tool .cpf-mid>.page-head,.ng-framed .page-head,.ng-body>.page-head,.rg-x .page-head.rg-head){
  position:relative;overflow:hidden;isolation:isolate;
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;flex-wrap:wrap;gap:6px 16px!important;
  min-height:0!important;height:auto!important;padding:10px 16px 10px 18px!important;margin:0 0 12px!important;border-radius:14px!important;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))!important;
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 11%,var(--surface)) 0%,var(--surface) 55%,color-mix(in srgb,var(--accent2) 12%,var(--surface)) 100%)!important;
  box-shadow:0 6px 18px -12px color-mix(in srgb,var(--accent) 45%,transparent)!important}
/* top accent bar and a bold left edge */
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x)::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;width:auto;background:var(--sh-grad);opacity:1;z-index:1}
/* decorative art off */
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x)::after{display:none!important}
html body :is(.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.sp-hero,.pr-hero-x) [class*="hero-art"],
html body :is(.sx-hero,.cm-hero,.cp-hero,.emp-hero,.pb-hero,.rg-hero,.pr-hero-x) :is(svg.art,.art,.scope-art){display:none!important}
/* title block: kicker, title and text on tight rows */
html body :is(.page-head,.price-head,.hg-hero,.rg-head)>div:first-child,
html body :is(.sx-hero,.pr-hero-x)>.sx-hero-t{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:0;min-width:0;flex:1 1 280px}
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x) h1{font:700 1.3rem/1.2 var(--hfont)!important;margin:0!important;letter-spacing:.005em}
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x) :is(.kicker,.sx-k){font:700 .62rem/1.3 var(--mono)!important;letter-spacing:.14em;text-transform:uppercase;margin:0!important;padding:0!important;background:none!important;border:0!important;color:var(--accent2)!important;order:-1}
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x) p{font-size:.84rem!important;line-height:1.35;margin:1px 0 0!important;flex:1 0 100%;max-width:none!important;color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* actions and buttons shrink */
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x) .btn{padding:7px 14px!important;min-height:0!important;font-size:.84rem!important}
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x) .sx-hero-a{margin:0;gap:8px}
/* hero stat tiles become a slim inline row */
html body :is(.sx-hero,.pr-hero-x) .sx-stats{display:flex;gap:6px 14px;margin:0;flex-wrap:wrap}
html body :is(.sx-hero,.pr-hero-x) .sx-stat{display:flex;align-items:baseline;gap:6px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;min-width:0}
html body :is(.sx-hero,.pr-hero-x) .sx-stat b{font-size:1rem}.sx-hero .sx-stat small{font-size:.72rem}
@media (max-width:640px){
  html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x){padding:9px 12px 9px 14px!important;border-radius:12px!important}
  html body :is(.page-head,.sx-hero,.price-head) h1{font-size:1.15rem!important}
}
/* AI Copilot and Help headers */
html body .cp-hero-stats{display:none!important}
html body .cp-hero-txt{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:0;flex:1 1 auto;min-width:0}
html body .cp-hero-txt>p{flex:1 0 100%;order:3}
html body .cp-hero-cta{display:flex;gap:8px;margin:0 0 0 auto!important;order:2;flex-wrap:wrap}
html body .cp-hero h1 .cp-grad{display:inline}
html body .hg-hero{text-align:left!important;justify-content:flex-start}
html body .hg-hero>*{max-width:none}
html body .hg-hero{display:grid!important;justify-items:start;align-items:start!important;gap:4px 16px!important}
html body .hg-hero h1{text-align:left}
@media (max-width:640px){html body .cp-hero-cta{margin-left:0!important;width:100%}html body .cp-hero-cta .btn{flex:1 1 140px;justify-content:center}}

/* v1.90.4 roomier page headers: the slim headers were squeezing the title, subtitle, buttons and stats together */
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x,.rh-tool>.page-head,.rh-tool .cpf-mid>.page-head,.ng-framed .page-head,.ng-body>.page-head,.rg-x .page-head.rg-head){padding:16px 20px 16px 22px!important;gap:10px 18px!important;margin-bottom:16px!important}
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x) h1{line-height:1.25!important}
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x) p{font-size:.92rem!important;line-height:1.5!important;margin:6px 0 0!important;-webkit-line-clamp:3!important}
html body :is(.sx-hero,.pr-hero-x) .sx-hero-t{row-gap:2px}
html body :is(.sx-hero,.pr-hero-x) .sx-hero-a{margin:8px 0 0;gap:10px}
html body :is(.sx-hero,.pr-hero-x) .sx-stats{gap:8px 20px;margin:10px 0 0}
html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x) .btn{padding:8px 16px!important;font-size:.88rem!important}
@media (max-width:640px){html body :is(.page-head,.price-head,.hg-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.rg-head,.sp-hero,.pr-hero-x){padding:13px 14px 13px 16px!important}}

/* w1-extras.css */
/* worker 1: company pages, What's new, admin logos, profile contact line */
.pf-loc{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.pf-loc>button.linkish,.pf-loc .linkish{font:inherit;line-height:1.3;padding:0;margin:0;vertical-align:middle;display:inline-flex;align-items:center}
.cp-link{color:inherit;font-weight:inherit;text-decoration:none}.cp-link:hover{color:var(--accent);text-decoration:underline}
a.pf-org{color:inherit;text-decoration:none}a.pf-org:hover .pf-org-t b{color:var(--accent);text-decoration:underline}
.cp-page{display:grid;gap:14px;max-width:880px;margin:0 auto}
.cp-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px}
.cp-logo{border-radius:14px;object-fit:contain;background:#fff;border:1px solid var(--line2);flex:none;padding:4px}
.cp-mono{display:grid;place-items:center;border-radius:14px;flex:none;color:#fff;font-weight:700;background:hsl(var(--h) 55% 42%)}
.cp-id{flex:1;min-width:200px}.cp-id h1{margin:0;font:700 1.5rem/1.2 var(--hfont);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.cp-id p{margin:4px 0}
.cp-ver{font-size:.74rem}.cp-ver .ico{width:13px;height:13px}
.cp-web{display:inline-flex;align-items:center;gap:6px;font-size:.88rem}
.cp-stats{display:flex;gap:16px;color:var(--muted);font-size:.9rem}.cp-stats b{color:var(--text)}
.cp-sec{padding:16px 18px}.cp-sec h3{margin:0 0 10px;display:flex;align-items:center;gap:8px;font:600 1.02rem var(--hfont)}.cp-sec h3 .ico{width:17px;height:17px;color:var(--accent)}
.cp-soft{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-style:dashed}.cp-soft>div{flex:1;min-width:200px}.cp-soft p{margin:2px 0 0}
.cp-job,.cp-post{display:flex;flex-direction:column;gap:2px;padding:11px 8px;border-top:1px solid var(--line2);color:inherit;text-decoration:none;position:relative;border-radius:8px}
.cp-job:first-of-type,.cp-post:first-of-type{border-top:0}
.cp-job:hover,.cp-post:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cp-job>.ico{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.5}.cp-job{padding-right:34px}
.wn-hero{padding:18px 20px}.wn-hero h1{margin:0 0 4px;font:700 1.4rem var(--hfont)}.wn-hero p{margin:0}
.wn{display:grid;gap:14px;max-width:820px;margin:14px auto 0}.wn-hero{max-width:820px;margin:0 auto}
.wn-day{padding:16px 20px}.wn-day h2{margin:0 0 8px;font:600 1rem var(--hfont);color:var(--muted)}
.wn-item{padding:12px 0;border-top:1px dashed var(--line2)}.wn-item:first-of-type{border-top:0}
.wn-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.wn-top b{font-size:1.02rem}
.wn-item ul{margin:8px 0 0;padding-left:20px;display:grid;gap:5px;color:var(--text)}
.cp-prev{width:44px;height:44px}.cp-prev img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.cp-adm-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line2)}.cp-adm-row>div{flex:1;min-width:0}.cp-adm-row:first-child{border-top:0}
.cp-miss-t{width:100%;font:600 .8rem var(--hfont);color:var(--muted);margin:8px 0 4px;text-transform:uppercase;letter-spacing:.06em}
.cp-adm-miss{display:flex;flex-wrap:wrap;gap:6px}.cp-miss{cursor:pointer}
@media (max-width:600px){.cp-head{padding:16px}.cp-id h1{font-size:1.25rem}}

/* slim.css */
/* LinkedIn-style slim pass: flat cards, tighter spacing, no hover lift, no decorative hero glow. Loaded last. */
.card,.ng-main .card,.ng-right>.card,.ng-left .ng-man{border-radius:10px;box-shadow:none}
.card{padding:12px 14px}
.ng-main .card:not(.ad-card):not(.f-post):hover,.card:hover{transform:none;box-shadow:none}
.ng-hero::before,.ng-hero::after,.ng-feat::before,.ng-gamesec::before,.ng-jobs::before,.ng-framed>.page-head::before{display:none}
.ng-hero,.ng-feat,.ng-gamesec,.ng-jobs{background:var(--surface)}
.ng-grid.ng-3{grid-template-columns:225px minmax(0,1fr) 270px;gap:12px}
.ng-right,.ng-left{gap:8px}
.ng-kick{display:none}
.page-head h1{font-size:1.35rem}
.btn{box-shadow:none}
.ng-mchips a.on,.ng-framed .cm-subnav a.on{box-shadow:none}
.ng-ev,.f-person{padding-top:4px;padding-bottom:4px}
@media (max-width:900px){.ng-grid.ng-3{grid-template-columns:1fr}}

.ng-slim .ng-stat b{font-size:1rem}
/* stats header: one tidy line, in light and dark */
html .ng-slim .ng-stats{display:flex;gap:16px}
html .ng-slim .ng-stat{display:flex;flex-direction:row;align-items:baseline;gap:6px;min-width:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
html .ng-slim .ng-stat small{letter-spacing:.04em;font-size:.72rem}
html .ng-slim .ng-stat b{font-size:1.05rem}
.ng-slim-top{gap:6px 16px}
/* member profile head: actions drop under the details so the name gets full width */
.mp-head{grid-template-columns:auto minmax(0,1fr);gap:0 16px}
.mp-act{grid-column:1/-1;padding:0 20px 14px}
.mp-main{padding:10px 16px 8px 0}.mp-main h1{font-size:1.4rem;line-height:1.2}
.mp-cover{height:110px}.mp-av{margin:-52px 0 12px 20px}
.mprof{gap:10px}
.mprof>.card:not(.mp-head):not(.staff-panel){padding:14px 16px}
.mp-main>*{margin-top:6px}.mp-main>h1{margin-top:0}
/* settings */
.st-wrap{gap:16px;max-width:1000px}
.st-nav a{padding:9px 12px}.st-nav a small{display:none}
.st-group{border-radius:10px}.st-group h2{padding:14px 16px 6px;font-size:1rem}
.st-row{padding:10px 16px;gap:12px}
.st-d{font-size:.8rem}
.sec-page .card{margin-bottom:10px}
/* jobs and feed */
.f-compose{padding:12px}.f-post{border-radius:10px}.f-post,.f-compose{box-shadow:none}
.jh-hero{padding:0}
.js-bar,.js-filters{gap:8px}
.jc,.job-card,.jh-card{box-shadow:none;border-radius:10px}
.page-head{margin-bottom:10px}
.wrap>.page-head p,.page-head .sub{display:none}
.rh-tool .st-group,.rh-tool .st-body>.card:not(.st-group){border-radius:10px}
.rh-tool .st-group h2{padding:12px 16px 4px;font-size:.98rem}.rh-tool .st-group h2::before{width:10px;height:12px}
.rh-tool .st-row{padding:8px 16px}
.st-body{gap:10px}
.st-l{font-size:.92rem}
/* stat tiles: one compact row */
.rh-tool .stat,.stat{padding:8px 12px;border-radius:10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rh-tool .stat b,.stat b{display:inline;font-size:1.1rem}
.rh-tool .stat span,.rh-tool .stat small,.stat span{font:600 .72rem var(--mono);letter-spacing:.02em;text-transform:none}
.stats{gap:8px;margin-bottom:10px}
/* feed: smaller "me" card */
.f-me-cover,:is(.rh-feed,.n-grid) .f-me .f-me-cover{height:44px}
.f-me-av,:is(.rh-feed,.n-grid) .f-me .f-me-av{margin-top:-30px}
.f-me-av .nav-av,.f-me-av img{width:56px!important;height:56px!important}
.card.ng-rc,.f-side{padding:12px 14px}
.ng-gamesec{display:none}
.stats{align-items:stretch}.rh-tool .stat,.stat{align-items:center;align-content:center;min-height:0;height:auto}.rh-tool .stat b{line-height:1.2}
.rh-tool .stat span{white-space:normal}
/* framed pages (certs, groups, mentors...): the side column stacks under the content, ads stay in the main rail */
.ng-framed .sx-grid,.ng-framed .hx-grid{grid-template-columns:1fr;gap:12px}
.ng-framed .sx-grid .ad-card,.ng-framed .hx-grid .ad-card{display:none}
.ng-framed .cm-catalog{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
/* help guide */
.hg-quick{gap:8px;margin-bottom:14px}.rh-tool .hg-quick{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.hg-quick>*{padding:10px 8px;gap:6px;border-radius:10px;box-shadow:none}
.hg-quick .ico,.hg-quick svg{width:22px;height:22px}
.hg-hero{padding:14px 16px}
.hg-sec{margin-bottom:14px}
/* long pages: tighter vertical rhythm */
.page-head{margin-bottom:8px}
main.wrap.page{padding-top:12px}
.wn-item{padding:12px 14px}

.w4-an{display:grid;gap:10px}.w4-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.w4-num{display:grid;gap:1px}.w4-num b{font:700 1.3rem/1.1 var(--hfont)}.w4-num span{font-size:.78rem;color:var(--muted)}.w4-num small{font-size:.72rem;color:var(--dim)}
.w4-bars{height:56px}
@media (max-width:640px){.w4-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Me menu avatar: the circle and the photo are the same size and the photo fills it */
.menu.me-menu a.mm-profile .nav-av{width:44px!important;height:44px!important;min-width:44px;font-size:1rem!important}
.menu.me-menu a.mm-profile .nav-av img{width:100%!important;height:100%!important;object-fit:cover;border-radius:50%}
.mm-profile-t b{flex-wrap:wrap}
/* search box keeps its width when focused; the results panel opens over the page instead of squeezing the menu */
.gs:focus-within,.gs.open{flex-basis:300px}
@media (max-width:1320px) and (min-width:1181px){.gs:focus-within,.gs.open{flex-basis:230px}}
@media (max-width:1180px) and (min-width:641px){.gs:focus-within,.gs.open{flex-basis:220px}}
@media (max-width:640px){.gs:focus-within,.gs.open{flex-basis:auto}}
/* ===== LinkedIn-scale density (loaded last) ===== */
html{font-size:15.5px}
body{font-size:15.5px;line-height:1.45}
:root{--radius:8px}
html body .head-row{height:54px;gap:10px}
html body .btn{padding:6px 14px;font-size:.92rem;border-radius:999px;min-height:32px}
html body .btn.sm{padding:3px 11px;font-size:.84rem;min-height:26px}
html body .input,html body select.input,html body textarea.input{padding:7px 11px;border-radius:6px;min-height:34px}
html body textarea.input{min-height:0}
html body .card{padding:12px 14px;border-radius:8px}
html body .page-head h1,html body h1{font-size:1.35rem;line-height:1.25}
html body h2{font-size:1.1rem}html body h3{font-size:1rem}
html body .stack{gap:10px}
html body main.wrap.page{padding-top:12px;padding-bottom:24px}
html body .nav-av{box-shadow:none}
.chip{padding:3px 10px;font-size:.8rem}
.badge{font-size:.7rem}
.row{gap:8px}
.spread{gap:10px}
/* lists: compact rows */
.hb-vrow,.f-person,.act-row,.ng-man-row{padding-top:7px;padding-bottom:7px}
.ng-man-row{min-height:0}
.st-nav a,.jh-menu a{padding-top:8px;padding-bottom:8px}
/* hero blocks lose their extra air */
.ng-hero,.jh-hero,.page-head.hb-head,.hg-hero,.st-me{padding-top:10px;padding-bottom:10px}
/* ===== chat windows (LinkedIn-style multiple open chats) ===== */
.dock-root{gap:10px;align-items:flex-end}
.dock-win{width:330px;height:min(470px,calc(100vh - 90px));display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line2);border-bottom:0;border-radius:10px 10px 0 0;box-shadow:0 -8px 30px -16px #000;overflow:hidden}
.dock-win-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 4px 12px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface));border-bottom:1px solid var(--line);cursor:pointer;user-select:none;flex:none}
.dock-win-t{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dock-win-tools{display:flex;gap:2px;flex:none}
.dock-win .mc.dock-chat{flex:1;min-height:0;width:auto;height:auto;border:0;border-radius:0;box-shadow:none}
.dock-win .mc.dock-chat::before{display:none}
.dock-win.min{height:auto}.dock-win.min .mc{display:none}
@media (max-width:899px){.dock-win{display:none}}

/* ===== Grow page: LinkedIn-style people cards ===== */
.ng-people .ng-sec-h h2,.ng-sec-h h2{font-size:1rem;font-weight:600}
.ng-pgrid{gap:10px}
.ng-pc{border-radius:8px;padding-bottom:10px}
html body .ng-pc .ng-pc-cover,.ng-pc-cover{height:46px}
.ng-pc-av .nav-av{width:84px!important;height:84px!important;box-shadow:0 0 0 3px var(--surface)!important}
html body .ng-pc .ng-cover{height:48px}
html body .ng-pc .ng-pc-av{margin-top:-44px}
.ng-pc .btn,.ng-pc .ng-pc-act .btn{background:none;color:var(--accent);border:1px solid var(--accent);box-shadow:none;border-radius:999px;font-weight:600}
.ng-pc .btn:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ng-pc .btn.ghost,.ng-pc .btn.quiet{color:var(--muted);border-color:var(--line2)}
/* ===== messenger sizing like LinkedIn: slim when minimised, roomy when open ===== */
.dock-win{width:400px;height:min(640px,calc(100vh - 70px))}
.dock-win.min{width:200px;height:auto;border-radius:8px 8px 0 0}
.dock-win.min .dock-win-bar{padding:2px 4px 2px 10px;min-height:34px}
.dock-win.min .dock-win-t{font-size:.84rem}
.dock-win.min .dock-win-tools button:nth-child(-n+2){display:none}
.dock-win .dock-win-bar{min-height:40px}
.dock-win .mc.dock-chat .mc-feed{font-size:.95rem}
.dock-root .dock{width:300px}
.dock-root .dock.open{width:360px}
.dock-root .dock .dock-head{padding:4px 8px 4px 10px;min-height:40px}
.dock-root .dock.open .dock-panel{height:min(520px,calc(100vh - 110px))}
@media (max-width:1280px){.dock-win{width:360px}}

/* empty-state cards: the big accent icon is only the top one, buttons keep their own small icons */
html body .wl-empty .btn svg,html body .wl-empty .btn .ico{width:16px;height:16px;color:currentColor;filter:none}
html body .wl-empty .btn{gap:8px;padding-left:14px;padding-right:14px}

/* company / school member rows: avatar beside the name */
html body .cp-sec a.cp-job{display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px;padding:10px 34px 10px 8px!important;text-align:left}
html body .cp-sec a.cp-job .ng-av,html body .cp-sec a.cp-job .avatar,html body .cp-sec a.cp-job>img{flex:none}

/* ===== welcoming feed: LinkedIn-style "start a post" strip, slim getting-started ===== */
html body .f-compose{padding:10px 12px}
html body .f-compose .f-c-bar{display:none}
html body .f-compose:focus-within .f-c-bar{display:flex}
html body .f-compose:not(:focus-within) textarea{min-height:44px!important;height:44px!important;border-radius:999px;padding:11px 18px;resize:none;overflow:hidden}
html body .f-compose .f-c-top{align-items:center;gap:10px}
html body .f-compose .av,html body .f-compose .avatar{width:40px!important;height:40px!important}
html body .eg-card{padding:12px 14px}
html body .eg-card [class*="step"],html body .eg-card li,html body .eg-card [class*="row"]{padding-top:6px;padding-bottom:6px}
html body .eg-card small,html body .eg-card .dim{font-size:.78rem}

/* side-rail ads: image creatives capped so they never dominate the column */
html body .rail-aside.ad-card .ad-creative img,html body .ad-card.shape-card .ad-creative img,html body .ad-card.shape-card .ad-media img{max-height:170px;width:100%;object-fit:cover}
html body .ad-card.shape-card{padding-bottom:12px}

/* fewer filler cards in the feed side column */
html body .f-side.tip-card{display:none}

/* invite + import cards inside the network side column */
html body .ng-right .fc-card{padding:14px}
html body .ng-right .fc-card .spread{flex-wrap:wrap;gap:10px}
html body .ng-right .fc-invite{display:grid;gap:10px}
html body .ng-right .fc-invite input.input{min-width:0;width:100%}
html body .ng-right .fc-invite .row{flex-wrap:wrap;gap:8px}

/* no wasted columns: an empty result list takes the whole width instead of leaving a blank detail pane */
html body .split.split-panes:has(.list-col>.card.empty){grid-template-columns:minmax(0,1fr)!important}
html body .split.split-panes:has(.list-col>.card.empty)>:not(.list-col){display:none}
html body .split.split-panes .list-col>.card.empty{padding:40px 24px}

/* "Featured candidate" badge sits on the card's top edge so it never covers the name or chips */
html body .hh-card>.pm-featured{top:-11px;right:16px;z-index:2;box-shadow:0 2px 8px -2px rgba(0,0,0,.35)}
html body .hh-card{margin-top:6px}
/* wide inline text ads: label on top, message left, button aligned with the message on the right */
@media (min-width:760px){
  html body .ad-card.compact.shape-card:not(.rail-aside):not(.ad-left):not(aside *):not(.f-side *){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:6px;align-items:center}
  html body .ad-card.compact.shape-card:not(.rail-aside):not(.ad-left):not(aside *):not(.f-side *)>.ad-label{grid-column:1/-1}
  html body .ad-card.compact.shape-card:not(.rail-aside):not(.ad-left):not(aside *):not(.f-side *)>.ad-body{grid-column:1;grid-row:2}
  html body .ad-card.compact.shape-card:not(.rail-aside):not(.ad-left):not(aside *):not(.f-side *)>.ad-cta{grid-column:2;grid-row:2;align-self:center;justify-self:end;margin:0;white-space:nowrap}
}
html body .list-col>.ad-card{margin-top:12px}

/* My Network: the side-column ad is taller so the column is not left half empty */
html body .ng-right>.ad-card.has-creative{display:flex;flex-direction:column;min-height:440px}
html body .ng-right>.ad-card.has-creative .ad-creative,html body .ng-right>.ad-card.has-creative .ad-creative-link{flex:1;display:flex}
html body .ng-right>.ad-card.has-creative img.ad-creative,html body .ng-right>.ad-card.has-creative video.ad-creative{max-height:none;height:100%;min-height:300px;object-fit:cover;width:100%}
html body .ng-right>.ad-card.has-creative .ad-body{margin-top:auto;flex:none}
html body .ng-right>.ad-card.has-creative .ad-cta{margin-top:10px;align-self:stretch;justify-content:center}

/* search boxes with an icon: icon sits inside the field and the text starts after it (Events, Groups and others) */
html body .search:has(>.ico):has(>input){position:relative}
html body .search:has(>.ico)>.ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--dim);pointer-events:none;z-index:1}
html body .search:has(>.ico)>input{padding-left:40px;width:100%;margin:0}
html body .pb-search{flex:1 1 280px;min-width:0}

/* salary.css */
/* Salary insights (interactive): public/js/salary-ui.js */
.sl-form{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;padding:18px}
.sl-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) auto;gap:12px;align-items:end}
.sl-fields .field{margin:0}
.sl-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.sl-lab{font:600 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:96px}
.sl-chips{display:flex;flex-wrap:wrap;gap:6px}
.sl-chip{border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:999px;padding:6px 12px;font:600 .82rem var(--font);cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.sl-chip:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.sl-chip.on{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;box-shadow:0 6px 16px -8px var(--accent)}
.sl-ctl{justify-content:space-between}
.sl-seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface2);border:1px solid var(--line)}
.sl-seg button{border:0;background:transparent;color:var(--muted);padding:6px 14px;border-radius:999px;font:600 .82rem var(--font);cursor:pointer}
.sl-seg button.on{background:var(--accent);color:#fff}
.sl-toggle{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line);background:transparent;color:var(--text);border-radius:999px;padding:6px 14px;font:600 .82rem var(--font);cursor:pointer}
.sl-toggle .ico{width:16px;height:16px}
.sl-toggle[aria-pressed="true"]{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.sl-out{display:flex;flex-direction:column;gap:14px;transition:opacity .2s}
.sl-out.busy{opacity:.55}
.sl-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.sl-card{display:flex;flex-direction:column;gap:18px;padding:20px;position:relative;overflow:hidden}
.sl-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899)}
.sl-top{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-end}
.sl-big{font:800 clamp(2.4rem,6vw,3.6rem)/1.05 var(--hfont);background:linear-gradient(120deg,var(--accent),var(--accent2) 60%,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.sl-pills{display:flex;flex-wrap:wrap;gap:8px}
.sl-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.sl-pill b{color:var(--text)}.sl-pill .ico{width:15px;height:15px}
.sl-land{padding:16px;border-radius:16px;background:color-mix(in srgb,var(--accent) 7%,var(--surface2));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))}
.sl-land h4,.sl-sec h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:700 1rem var(--hfont)}
.sl-land h4 .ico,.sl-sec h4 .ico{width:18px;height:18px;color:var(--accent)}
.sl-land p{margin:0 0 10px}
.sl-land input[type=range]{width:100%;accent-color:var(--accent);height:28px;cursor:pointer}
.sl-meter{height:8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);overflow:hidden;margin:6px 0 10px}
.sl-meter i{display:block;height:100%;width:50%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s ease}
.sl-land-out{font-size:.95rem;line-height:1.45}
.sl-land-out b{font:800 1.15rem var(--hfont)}
.sl-land-out.above b{color:var(--good,#10b981)}.sl-land-out.below b{color:var(--warn,#f59e0b)}
.sl-top-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.sl-top-list li{display:grid;grid-template-columns:minmax(90px,1.2fr) minmax(80px,2.4fr) auto auto;gap:6px 12px;align-items:center}
.sl-co{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-bar{height:10px;border-radius:999px;background:var(--surface2);overflow:hidden}
.sl-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.sl-trend{position:relative}
.sl-trend-svg{width:100%;height:auto;display:block;touch-action:pan-y}
.sl-grid{stroke:var(--line);stroke-dasharray:3 5}
.sl-line{stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.sl-dot{fill:var(--accent);stroke:var(--surface);stroke-width:3;transition:cx .12s,cy .12s}
.sl-tip{position:absolute;transform:translate(-50%,-135%);pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 10px;box-shadow:0 10px 24px -12px #000;display:flex;flex-direction:column;white-space:nowrap}
.sl-tip small{color:var(--muted)}
.sl-change{margin:6px 0 0;font-weight:700}.sl-change.up{color:var(--good,#10b981)}.sl-change.down{color:var(--warn,#f59e0b)}
.sl-vs{display:flex;gap:12px;align-items:center;padding:14px 18px;border-left:4px solid var(--accent)}
.sl-vs.up{border-left-color:var(--good,#10b981)}.sl-vs.down{border-left-color:var(--warn,#f59e0b)}
.sl-vs .ico{width:22px;height:22px;color:var(--accent)}
@media (max-width:900px){.sl-pair{grid-template-columns:1fr}}
@media (max-width:560px){.sl-top-list li{grid-template-columns:1fr auto}.sl-bar{grid-column:1/-1;order:3}.sl-lab{min-width:0;width:100%}}
@media (prefers-reduced-motion:reduce){.sl-bar i,.sl-meter i,.sl-dot,.sl-chip{transition:none}}
.sl-trend-svg{max-height:200px}

/* status-page.css */
/* /status inside the site shell (public/js/status-ui.js) */
.sp-main{display:block}
.sp-hero{padding:22px 24px;margin-bottom:14px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));position:relative;overflow:hidden}
.sp-hero::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899)}
.sp-hero h1{margin:4px 0 6px;font:800 clamp(1.5rem,3vw,2rem) var(--hfont)}.sp-hero p{margin:0;color:var(--muted);max-width:60ch}
.sp-wrap{display:grid;gap:12px;max-width:860px}
.sp-head,.sp-notice,.sp-off{display:flex;align-items:center;gap:14px;padding:16px 18px}
.sp-head b{font:700 1.1rem var(--hfont);display:block}
.sp-notice{border-left:4px solid var(--accent)}.sp-notice .ico,.sp-off .ico{width:22px;height:22px;color:var(--accent);flex:none}
.sp-head.st-operational{border-color:color-mix(in srgb,#10b981 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,#10b981 9%,var(--surface)),var(--surface))}
.sp-head.st-degraded{border-color:color-mix(in srgb,#f59e0b 50%,var(--line))}.sp-head.st-down{border-color:color-mix(in srgb,#ef4444 50%,var(--line))}
.sp-dot{width:12px;height:12px;border-radius:50%;flex:none;background:#64748b}
.sp-dot.operational{background:#10b981;animation:spPulse 2s infinite}
.sp-dot.degraded{background:#f59e0b;box-shadow:0 0 10px 1px #f59e0b88}.sp-dot.down{background:#ef4444;box-shadow:0 0 10px 1px #ef444488}.sp-dot.unknown{background:#64748b}
.sp-head .sp-dot{width:16px;height:16px}
@keyframes spPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.sp-list{padding:4px 0;overflow:hidden}
.sp-row{display:grid;grid-template-columns:auto minmax(120px,1.2fr) minmax(90px,1.4fr) auto auto;gap:6px 14px;align-items:center;padding:13px 18px;border-top:1px solid var(--line)}
.sp-row:first-child{border-top:0}
.sp-row .nm{font-weight:600}
.sp-bars{display:flex;gap:2px;align-items:center;height:22px;min-width:0}
.sp-bars i{flex:1;min-width:2px;max-width:7px;height:100%;border-radius:2px;background:#10b981}
.sp-bars i.degraded{background:#f59e0b}.sp-bars i.down{background:#ef4444}.sp-bars i.unknown{background:color-mix(in srgb,var(--text) 14%,transparent)}
.sp-up{font-size:.78rem;color:var(--muted);white-space:nowrap}
.sp-st{font-weight:700;font-size:.85rem;min-width:96px;text-align:right}
.sp-st.operational{color:#059669}.sp-st.degraded{color:#d97706}.sp-st.down{color:#dc2626}.sp-st.unknown{color:var(--muted)}
html[data-theme="dark"] .sp-st.operational{color:#34d399}html[data-theme="dark"] .sp-st.degraded{color:#fbbf24}html[data-theme="dark"] .sp-st.down{color:#f87171}
.sp-foot{margin:4px 2px}
@media (max-width:640px){.sp-row{grid-template-columns:auto 1fr auto}.sp-bars{grid-column:1/-1;order:5}.sp-up{grid-column:2;order:3}.sp-st{order:2}}
@media (prefers-reduced-motion:reduce){.sp-dot.operational{animation:none;box-shadow:0 0 8px 1px #10b98188}}
.sp-main .sp-hero{max-width:860px;margin:18px auto 14px;display:block;text-align:left;padding:22px 24px;width:auto;min-height:0}
.sp-main .sp-hero h1{text-align:left;display:block;margin:4px 0 6px}
.sp-main .sp-hero p{text-align:left;margin:0}
.sp-main .sp-wrap{margin:0 auto 24px}
.sp-main .sp-foot{background:none;border:0;padding:4px 2px}

/* polish.css */
/* v1.91 layout polish: spacing and sizing fixes found in review. Loaded last. */

/* Hiring hub: stat tiles and filters were squeezed in the narrower page width */
.hh-stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hh-stat{min-width:0;padding:14px 14px}
.hh-stat>small,.hh-stat small{overflow-wrap:anywhere;hyphens:auto}
.hh-fgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.hh-fgrid .switch{grid-column:1/-1;justify-self:start}
.hh-fgrid select.input{text-overflow:ellipsis}

/* Group cards: full name, roomier meta and footer */
.cm-ghead{align-items:flex-start}
.cm-gname{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.cm-gmeta{gap:6px 8px;margin-top:6px}
.cm-gbody{gap:12px}
.cm-gabout{min-height:4.5em}
.cm-gfoot{padding-top:12px;gap:10px}
.cm-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}

/* Message box: textarea gets its own full row when the window is narrow */
.chat-compose{container-type:inline-size}
@container (max-width:470px){
  .chat-row{flex-wrap:wrap;row-gap:4px}
  .chat-row .chat-ta,.chat-compose textarea.input.chat-ta{order:-1;flex:1 1 100%;min-width:0}
  .chat-row .chat-tools{order:1;width:auto;border:0;padding:0}
  .chat-row .chat-send{order:2;margin-left:auto}
}
.chat-compose textarea.input.chat-ta{min-width:0;overflow-y:auto}

/* v1.91 medium-size cards: Cyber Range scenarios */
.rg-x .rg-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px}
.rg-x .rg-card{border-radius:14px;gap:6px;padding-bottom:10px;min-width:0}
.rg-x .rg-card>*:not(.rg-art):not(.rg-card-bar):not(.rg-stamp){margin-left:12px;margin-right:12px}
.rg-x .rg-art{height:46px;padding:0 12px;gap:9px}
.rg-x .rg-art-ic{width:30px;height:30px}.rg-x .rg-art-ic .ico{width:15px;height:15px}
.rg-x .rg-art-k{font-size:.6rem}
.rg-x .rg-card h3{font-size:.98rem;line-height:1.25}
.rg-x .rg-card p,.rg-x .rg-syn{font-size:.8rem;line-height:1.4}
.rg-x .rg-card-foot{flex-wrap:wrap;gap:6px;padding-top:8px}
.rg-x .rg-card-foot select,.rg-x .rg-card-foot .input{flex:1 1 90px;min-width:0;padding:6px 8px;font-size:.8rem}
.rg-x .rg-card-foot .btn{padding:6px 12px;font-size:.8rem}
.rg-acc .rg-grid{padding:4px 12px 14px}

/* v1.91 medium cards: Practice exams */
.pr-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.pr-tile{padding:12px;gap:6px;border-radius:14px;min-width:0}
.pr-tile b{font-size:.94rem;overflow-wrap:anywhere}
.pr-tile .pr-code{font-size:.7rem}
.pr-tile .pr-meta{gap:4px 8px;font-size:.78rem}
.pr-badge-major{top:8px;right:8px}

/* v1.91 medium cards: Weather */
.wx2-hero{min-height:0;padding:16px 20px 14px;border-radius:18px}
.wx2-hero-in{gap:10px}
.wx2-hero-main{gap:14px}
.wx2-hero-ic{width:84px;height:84px}.wx2-hero-ic svg{max-width:100%;height:auto}
.wx2-temp{font-size:clamp(2.8rem,6vw,4.2rem)}
.wx2-hero-empty{gap:14px;padding:2px 0}
.wx2-hero-empty .wx2-title,.wx2-hero .wx2-title{font-size:clamp(1.2rem,2.4vw,1.6rem)}
.wx2-hero-empty p{margin:0 0 8px;font-size:.92rem}
.wx2-tiles{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.wx2-tile{padding:8px 10px;border-radius:12px}
.wx2-tile b{font-size:1.05rem}.wx2-tile span{font-size:.72rem}

/* v1.91 AI Copilot hub: medium tool cards */
.cpf-mid .cp-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.cpf-mid .cp-card{padding:12px 34px 12px 12px;gap:10px;border-radius:14px}
.cpf-mid .cp-card p{font-size:.84rem;line-height:1.4}
.cpf-mid .cp-cards>*{min-width:0}
.cpf-mid .cp-group{margin-top:14px}
.cpf-right .card{padding:14px}

/* v1.91 ad cards never stretch taller than their own content (mobile lists, mini rails) */
body .card.ad-card{align-self:start;height:auto;min-height:0}
@media (max-width:820px){body .card.ad-card.compact:not(.has-creative)>.ad-body,body .card.ad-card.shape-card:not(.has-creative)>.ad-body{flex:0 0 auto!important;min-height:0}}
body .card.ad-card>.ad-label{align-self:flex-start;min-height:0;height:auto}
@media (max-width:820px){body .card.ad-card.compact:not(.has-creative){max-width:100%;overflow:hidden}}

/* v1.91 phone: the Study/Practice side menu scrolls inside itself instead of widening the page */
.hx-grid>*{min-width:0}
@media (max-width:900px){.hx-left{max-width:100%;overflow:hidden}.hx-left .hx-menu{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.hx-left .hx-menu a{flex:none;white-space:nowrap}}

/* v1.91 profile editing: compact dialogs that fit on screen without a scroll bar */
.modal-bg.wide .modal:has(.pf-intro){width:min(1040px,calc(100vw - 32px));max-width:1040px;padding:18px 20px}
.pf-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;row-gap:0;align-items:start}
.pf-intro .pf-col{display:grid;gap:8px;min-width:0;align-content:start}
.pf-intro .field{margin:0}.pf-intro .field>span,.pf-intro .field>label{font-size:.78rem;margin-bottom:2px}
.pf-intro .input{padding:7px 10px;font-size:.9rem}
.pf-intro textarea.input{min-height:0}
.pf-intro .pf-sec{margin:4px 0 0;padding-top:8px;font-size:.78rem}
.pf-intro .pf-col:first-child .pf-sec:first-of-type{margin-top:4px}
.pf-intro .grid2,.pf-intro .grid3{gap:8px}
.pf-intro small.dim{font-size:.72rem;line-height:1.3}
.pf-intro .tb-picker,.pf-intro .tp-grp{gap:5px}
.pf-intro .tp-chips{gap:5px}.pf-intro .tp-chip{padding:3px 8px;font-size:.76rem}
.pf-intro .pf-acct{padding:7px 10px}
.pf-intro .switch.sm{font-size:.8rem}
@media (max-width:860px){.pf-intro{grid-template-columns:1fr}}
/* every other profile dialog: tighter padding so short ones never scroll */
.modal:has(.field){padding:18px 20px}
.modal:has(.field) .field{margin-bottom:0}
.modal:has(.field) .stack,.modal:has(.field)>div{gap:10px}
.modal h2,.modal h3.modal-t{margin-top:0}
.pf-intro .org-line{margin:0}.pf-intro .org-line .field{width:100%}
.pf-intro .pf-sec+small.dim{margin-top:-4px}
.pf-intro .tp-top{margin-bottom:0}
.pf-intro [class*="tp-"]{--gap:4px}
.modal-bg.wide .modal:has(.pf-intro){padding:14px 18px}
.modal:has(.pf-intro) h2,.modal:has(.pf-intro) .modal-h{margin:0 0 6px}
.pf-intro .tp-card,.pf-intro [class*="tb-box"],.pf-intro .field.pf-title{padding:10px 12px}
.pf-intro .pf-col:first-child>*:nth-child(2){padding:10px 14px}
.pf-intro textarea.input{height:84px;min-height:60px;max-height:60vh;resize:vertical}
.pf-intro .grid2>.field>small{display:none}
.pf-intro .pf-sec+small.dim{display:none}
.modal textarea.input{resize:vertical;max-height:60vh}

/* v1.91.6 certification dialog */
.cd-feat{margin-top:16px;padding-top:12px;border-top:1px solid var(--line,rgba(128,128,128,.25))}
.cd-feat .switch{display:flex;align-items:center;gap:12px}
.cd-fetch{margin-bottom:12px}

/* v1.91.8 bigger certification badges */
html body .wl-certs{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))!important;gap:12px!important}
html body .wl-cert .wl-cert-art{width:110px!important;height:110px!important;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
html body .wl-cert .wl-cert-artlink{margin:4px auto 6px}
@media (max-width:520px){html body .wl-certs{grid-template-columns:repeat(2,minmax(0,1fr))!important}html body .wl-cert .wl-cert-art{width:88px!important;height:88px!important}}

/* v1.91.9 boxless headers: Notifications and Hiring hub sit straight on the page */
html body .n-grid .n-filters.card,html body .n-filters.card,html body .card.hh-hero,html body .rh-tool .hh-hero,html body.rh-tool .card.hh-hero{
  background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 0 10px!important;margin:0 0 10px!important;overflow:visible!important;backdrop-filter:none!important}
html body .n-filters.card::before,html body .n-filters.card::after,html body .card.hh-hero::before,html body .card.hh-hero::after,html body .rh-tool .hh-hero::before,html body .rh-tool .hh-hero::after{display:none!important}
/* notifications: title, mark-all and filters on one clean row set */
html body .n-grid .n-filters.card{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;border-bottom:1px solid var(--line)!important;padding-bottom:12px!important}
html body .n-filters .n-head{display:flex;align-items:center;gap:12px}
html body .n-filters .n-head .rh-kick{display:none}
html body .n-grid .n-head h2{font-size:1.5rem!important}
/* hiring hub: compact identity row, buttons on the right */
html body .card.hh-hero{display:flex!important;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;border-bottom:1px solid var(--line)!important;padding-bottom:14px!important}
html body .hh-hero .hh-id{display:flex;align-items:center;gap:14px;min-width:0}
html body .hh-hero .hh-logo{width:56px;height:56px;flex:none}
html body .hh-hero .kicker{display:none}
html body .hh-hero h1{font-size:1.6rem!important;margin:0 0 4px!important}
html body .hh-hero .hh-acts{display:flex;gap:10px;flex-wrap:wrap}

/* v1.91.10 boxless hero headers: the title and text sit straight on the page, no card around them */
html body :is(.ln-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.pr-hero-x,.hg-hero,.price-head,.vote-hero,.prem-hero,.pr-hero):not(#a):not(#b){
  background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;backdrop-filter:none!important;overflow:visible!important;
  padding:2px 0 10px!important;margin:0 0 12px!important}
html body :is(.ln-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.pr-hero-x,.hg-hero,.price-head,.vote-hero,.prem-hero,.pr-hero):not(#a):not(#b)::before,
html body :is(.ln-hero,.sx-hero,.cm-hero,.cp-hero,.emp-hero,.ev-hero,.pb-hero,.en-hero,.jh-hero,.rg-hero,.pr-hero-x,.hg-hero,.price-head,.vote-hero,.prem-hero,.pr-hero):not(#a):not(#b)::after{display:none!important}
html body .ln-hero h1{font-size:clamp(1.8rem,3.6vw,2.6rem)!important;line-height:1.1!important;margin:2px 0 8px!important}
html body .ln-hero p{max-width:760px}

/* v1.91.11 choose which certification badges show */
html body .wl-cert.is-hidden{opacity:.55;filter:grayscale(.6);border-style:dashed}
html body .wl-cert .wl-hid{position:absolute;top:8px;right:8px;z-index:2;font:700 .62rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}

/* v1.91.12 Edit intro: three columns on wide screens so nothing scrolls; birthday sits with contact info */
.modal-bg.wide .modal:has(.pf-intro){width:min(1280px,calc(100vw - 32px))!important;max-width:1280px!important}
.pf-intro{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important}
.pf-intro .pf-col:nth-child(2)>.pf-sec:first-child{border-top:0;padding-top:0}
.pf-intro .pf-col:nth-child(2) textarea.input{height:150px}

.st-nav .st-back{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 14px;border-radius:999px;font-weight:700;font-size:.9rem;text-decoration:none;color:#fff;background:linear-gradient(100deg,var(--accent),var(--accent2));box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.st-nav .st-back svg{width:16px;height:16px}

/* v1.91.13 compact, LinkedIn-style job search: one search pill, small filter pills, no card */
html body .js-top.js-compact{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;gap:8px!important;margin-bottom:12px!important}
html body .js-top.js-compact::before,html body .js-top.js-compact::after{display:none!important}
html body .js-compact .js-bar{display:flex!important;align-items:stretch;gap:0!important;border:1px solid var(--line2,var(--line));border-radius:999px;background:var(--surface);overflow:hidden;box-shadow:0 6px 18px -14px rgba(0,0,0,.6)}
html body .js-compact .js-bar .search{flex:1 1 0;min-width:0}
html body .js-compact .js-bar .search+.search{border-left:1px solid var(--line)}
html body .js-compact .js-bar .search input{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;height:42px;padding-top:0;padding-bottom:0}
html body .js-compact .js-bar .btn{border-radius:0!important;margin:0;padding:0 22px!important;min-height:0!important;box-shadow:none!important}
html body .js-compact .js-filters{gap:6px!important}
html body .js-compact .js-filters select.input.sm{width:auto;height:32px;padding:0 28px 0 12px;font-size:.84rem;border-radius:999px;background-color:var(--surface)}
html body .js-compact .js-filters .switch.sm{font-size:.84rem;padding:5px 10px;border:1px solid var(--line);border-radius:999px}
html body .js-compact .js-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--accent);font-weight:700;font-size:.84rem;cursor:pointer;padding:6px 8px}
html body .js-compact .js-all svg{width:15px;height:15px}
html body .js-compact .js-info{display:inline-grid;place-items:center;color:var(--dim);cursor:help}
html body .js-compact .js-info svg{width:16px;height:16px}
@media (max-width:720px){html body .js-compact .js-bar{flex-direction:column;border-radius:16px}html body .js-compact .js-bar .search+.search{border-left:0;border-top:1px solid var(--line)}html body .js-compact .js-bar .btn{padding:10px!important}html body .js-compact .js-all{margin-left:0}}
html body .js-compact .js-filters select.input.sm{width:auto!important;min-width:0!important;flex:0 0 auto!important;max-width:100%}

/* v1.91.14 slim people search (no card) and a roomier resume builder (no right sidebar) */
html body .ng-search.ng-slim{padding:0!important;background:none!important;border:0!important;box-shadow:none!important;margin-bottom:10px}
html body .ng-search.ng-slim::before,html body .ng-search.ng-slim::after{display:none!important}
html body .ng-slim .search input{height:42px;background:var(--surface);box-shadow:0 6px 18px -14px rgba(0,0,0,.6)}
html body .ng-slim .ng-fbtn{border-radius:999px;border:1px solid var(--line)}
html body .ng-slim .js-all{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--accent);font-weight:700;font-size:.84rem;cursor:pointer;padding:6px 8px;white-space:nowrap}
html body .ng-slim .js-all svg{width:15px;height:15px}
@media (max-width:640px){html body .ng-slim .js-all span,html body .ng-slim .ng-search-row{flex-wrap:wrap}}
html body .cpf-grid.cpf-bld{grid-template-columns:minmax(0,1fr)!important;gap:14px}
html body .cpf-grid.cpf-bld>.cpf-right,html body .cpf-grid.cpf-bld>.cpf-left{display:none!important}
html body .cpf-bld .bld-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
html body .cpf-bld .bld-form .card{padding:14px 16px}
@media (max-width:1100px){html body .cpf-grid.cpf-bld{grid-template-columns:minmax(0,1fr)!important}}

/* v1.91.15 AI tool headers: no box, one compact row (icon, title, text, step pills) */
html body .cp-thero{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;padding:0 0 10px!important;margin:0 0 12px!important;
  display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center;gap:6px 14px!important;border-bottom:1px solid var(--line)!important}
html body .cp-thero::before,html body .cp-thero::after{display:none!important}
html body .cp-thero .cp-hex.lg{width:46px;height:46px;filter:none}
html body .cp-thero .cp-hex.lg svg{width:22px;height:22px}
html body .cp-thero .kicker{display:none}
html body .cp-thero h1{font-size:1.5rem!important;margin:0 0 2px!important}
html body .cp-thero p{font-size:.9rem;line-height:1.4;max-width:none}
html body .cp-thero .cp-flow{grid-column:1/-1;display:flex!important;flex-wrap:wrap;gap:8px!important;margin:6px 0 0!important}
html body .cp-thero .cp-flow li{flex:0 0 auto;padding:5px 12px 5px 6px!important;border-radius:999px!important;gap:8px;background:var(--surface)}
html body .cp-thero .cp-flow li span{width:20px;height:20px;font-size:.72rem}
html body .cp-thero .cp-flow li b{font-size:.8rem;white-space:nowrap}
html body .cp-thero .cp-flow li.on{background:color-mix(in srgb,var(--c1) 14%,var(--surface))}
@media (max-width:640px){html body .cp-thero{grid-template-columns:1fr!important}html body .cp-thero .cp-hex.lg{display:none}html body .cp-thero .cp-flow li{flex-direction:row!important;padding:5px 10px 5px 6px!important}html body .cp-thero .cp-flow li b{font-size:.76rem!important}}

/* v1.91.16 Edit intro: four columns, prefix link fields, bigger suggestion lists */
.modal-bg.wide .modal:has(.pf-intro){width:min(1340px,calc(100vw - 24px))!important;max-width:1340px!important}
.pf-intro{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))!important}
.pf-intro .pfx{display:flex;align-items:center;border:1px solid var(--line2,var(--line));border-radius:10px;background:var(--surface);overflow:hidden}
.pf-intro .pfx>span{padding:0 4px 0 10px;font-size:.8rem;color:var(--dim);white-space:nowrap}
.pf-intro .pfx>input.input{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding-left:2px;min-width:0;flex:1}
.pf-intro .pfx:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.org-sug{max-height:280px;overflow:auto;box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
.org-sug-i{padding:9px 12px;font-size:.9rem}
.modal.wide:has(.pf-intro),.modal-bg .modal:has(.pf-intro){width:min(1340px,calc(100vw - 24px))!important;max-width:1340px!important}

/* v1.91.17 jobs home search matches the compact job search: one slim bar, small pills, no card */
html body .jf-hero.card{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:visible!important;gap:8px!important;margin-bottom:12px!important}
html body .jf-hero::before,html body .jf-hero::after{display:none!important}
html body .jf-hero .rh-kick{display:none}
html body .jf-hero .jf-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html body .jf-hero .jf-form{display:flex;align-items:stretch;gap:0;border:1px solid var(--line2,var(--line));border-radius:999px;background:var(--surface);overflow:hidden;box-shadow:0 6px 18px -14px rgba(0,0,0,.6)}
html body .jf-hero .jf-f{flex:1 1 0;border:0;border-radius:0;background:transparent;box-shadow:none}
html body .jf-hero .jf-f+.jf-f{border-left:1px solid var(--line)}
html body .jf-hero .jf-in{padding:11px 0!important}
html body .jf-hero .jf-go{border-radius:0!important;margin:0;padding:0 22px!important}
html body .jf-hero .jf-chips{gap:6px}
html body .jf-hero .jf-chip{padding:4px 11px;font-size:.82rem}
html body .jf-hero .jf-all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--accent);font-weight:700;font-size:.84rem;cursor:pointer;padding:6px 8px}
html body .jf-hero .jf-all svg{width:15px;height:15px}
@media (max-width:700px){html body .jf-hero .jf-form{flex-direction:column;border-radius:16px}html body .jf-hero .jf-f+.jf-f{border-left:0;border-top:1px solid var(--line)}html body .jf-hero .jf-go{padding:10px!important;justify-content:center}html body .jf-hero .jf-all{margin-left:0}}

/* v1.91.18 suggestion dropdowns: no scroll bars, tidy rows, matched text highlighted, "new" row for names not on the list */
html body .org-sug{max-height:none!important;overflow:hidden!important;padding:6px;gap:2px;border-radius:14px;min-width:100%;width:max-content;max-width:min(420px,86vw);background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 22px 48px -14px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.2)}
html body .org-sug-i{display:flex!important;align-items:center;gap:8px;padding:9px 12px!important;border-radius:9px!important;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
html body .org-sug-i mark{background:none;color:var(--accent);font-weight:800}
html body .org-sug-i:hover,html body .org-sug-i.on{background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent2) 12%,transparent))!important}
html body .org-sug-new{margin-top:2px;border-top:1px solid var(--line)!important;border-radius:0 0 9px 9px!important;color:var(--muted);font-weight:600}
html body .org-sug-new svg{width:14px;height:14px;color:var(--good,#34d399);flex:none}
html body .org-sug-new span{overflow:hidden;text-overflow:ellipsis}
html body .org-sug-new small{margin-left:auto;font:700 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
html body .org-sug-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
html body .org-sug-t{white-space:pre!important}

/* v1.91.20 categories and collections as a compact colorful strip under the jobs search */
html body .jf-quick{display:grid;gap:8px;margin-top:4px}
html body .jf-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
html body .jf-pills .jf-lbl{min-width:0;margin-right:2px}
html body .jf-pill{--pc:#6c8cff;display:inline-flex;align-items:center;gap:8px;padding:4px 13px 4px 4px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pc) 42%,var(--line));background:color-mix(in srgb,var(--pc) 11%,var(--surface));color:var(--text);font:700 .82rem var(--hfont,inherit);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
html body .jf-pill:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--pc) 20%,var(--surface));box-shadow:0 8px 18px -10px var(--pc)}
html body .jf-pill-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 55%,#fff));color:#fff;box-shadow:0 0 12px -2px var(--pc)}
html body .jf-pill-ic svg{width:13px;height:13px}
html body .pc0{--pc:#6c8cff}html body .pc1{--pc:#f59e0b}html body .pc2{--pc:#10b981}html body .pc3{--pc:#a855f7}html body .pc4{--pc:#38bdf8}html body .pc5{--pc:#14b8a6}html body .pc6{--pc:#ec4899}html body .pc7{--pc:#94a3b8}
html body .jf-pill-ic.pc0,html body .jf-pill-ic.pc1,html body .jf-pill-ic.pc2,html body .jf-pill-ic.pc3,html body .jf-pill-ic.pc4,html body .jf-pill-ic.pc5,html body .jf-pill-ic.pc6,html body .jf-pill-ic.pc7{border:0}
@media (max-width:700px){html body .jf-pills .jf-lbl{flex:1 0 100%}}

/* v1.91.21 Career roadmap */
.rm-main .rm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.rm-kick{display:inline-flex;align-items:center;gap:8px;font:700 .75rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.rm-kick svg{width:16px;height:16px}
.rm-bar select.input.sm{width:auto;max-width:100%;min-width:220px;border-radius:999px}
.rm-pill{border:1px solid var(--line2,var(--line));background:var(--surface);color:var(--text);border-radius:999px;padding:5px 12px;font:700 .82rem var(--hfont,inherit);cursor:pointer}
.rm-pill.on,.rm-pill:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.rm-body{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:start}
.rm-sum{grid-column:1/-1;display:grid;gap:10px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.rm-sum h1{font:800 clamp(1.5rem,3vw,2.1rem)/1.15 var(--hfont);margin:0 0 2px}.rm-sum p{margin:0;color:var(--muted)}
.rm-facts{display:flex;flex-wrap:wrap;gap:8px}
.rm-fact{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:8px 14px 8px 10px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.rm-fact svg{grid-row:1/3;width:20px;height:20px;color:var(--accent)}.rm-fact b{font-size:.78rem;color:var(--muted);font-weight:700}.rm-fact small{font-size:.88rem;color:var(--text)}
.rm-meter{height:8px;border-radius:99px;background:var(--line);overflow:hidden}.rm-meter span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2),#34d399);transition:width .4s}
.rm-m0{width:2%}.rm-m1{width:10%}.rm-m2{width:20%}.rm-m3{width:30%}.rm-m4{width:40%}.rm-m5{width:50%}.rm-m6{width:60%}.rm-m7{width:70%}.rm-m8{width:80%}.rm-m9{width:90%}.rm-m10{width:100%}
.rm-steps{display:grid;gap:4px;position:relative}
.rm-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:6px 0 18px;position:relative}
.rm-step:not(:last-child)::before{content:"";position:absolute;left:16px;top:38px;bottom:0;width:2px;background:linear-gradient(var(--accent),transparent)}
.rm-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:800 .95rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 16px -2px var(--accent)}
.rm-step h2{margin:2px 0 0;font:700 1.15rem var(--hfont)}.rm-step p.dim{margin:2px 0 8px;font-size:.88rem}
.rm-lbl{margin:10px 0 6px;font:700 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rm-chips,.rm-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rm-chip{padding:4px 11px;border-radius:999px;border:1px solid var(--line2,var(--line));background:var(--surface);font-size:.82rem}
.rm-lp,.rm-job{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font:700 .82rem var(--hfont,inherit);text-decoration:none;color:var(--text);cursor:pointer;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--surface));text-transform:capitalize}
.rm-job{text-transform:none}.rm-lp svg,.rm-job svg{width:14px;height:14px;color:var(--accent)}
.rm-tiers{display:grid;gap:10px}.rm-tier-h{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.rm-tier-h small{color:var(--muted);font-size:.78rem}
.rm-certs{display:flex;flex-wrap:wrap;gap:6px}
.rm-cert{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:12px;border:1px solid var(--line2,var(--line));background:var(--surface);cursor:pointer;font-size:.86rem}
.rm-cert input{position:absolute;opacity:0;pointer-events:none}
.rm-cert i{width:18px;height:18px;border-radius:6px;border:2px solid var(--line2,var(--muted));display:grid;place-items:center;flex:none}
.rm-cert.on{border-color:color-mix(in srgb,#34d399 55%,var(--line));background:color-mix(in srgb,#34d399 10%,var(--surface))}
.rm-cert.on i{background:#34d399;border-color:#34d399}.rm-cert.on i::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.rm-got{color:#34d399;font-weight:700}
.rm-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}.rm-list li{display:flex;gap:8px;align-items:flex-start;font-size:.9rem}.rm-list svg{width:15px;height:15px;color:#34d399;margin-top:3px;flex:none}
.rm-side{display:grid;gap:10px;position:sticky;top:calc(var(--head-h,64px) + 12px)}
.rm-box{padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.rm-box h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:700 .95rem var(--hfont)}.rm-box h3 svg{width:17px;height:17px;color:var(--accent)}
.rm-box p{margin:0 0 8px;font-size:.86rem;line-height:1.45;color:var(--muted)}
.rm-res{display:grid;gap:6px}.rm-r{display:grid;padding:7px 10px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:var(--text)}.rm-r:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.rm-r b{font-size:.86rem}.rm-r small{color:var(--muted);font-size:.76rem}
html body .pc8{--pc:#f43f5e}
@media (max-width:980px){.rm-body{grid-template-columns:1fr}.rm-side{position:static}}
/* v1.91.22 search autocomplete */
.ac-host{position:relative}
.ac-pop{position:absolute;left:-1px;top:calc(100% + 8px);min-width:100%;width:max-content;max-width:min(440px,92vw);z-index:80;padding:6px;border-radius:14px;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 22px 48px -14px rgba(0,0,0,.65);overflow:hidden}
.ac-pop[hidden]{display:none}
.ac-k{padding:8px 10px 3px;font:700 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ac-o{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;cursor:pointer}
.ac-o.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ac-i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);flex:none}.ac-i svg{width:15px;height:15px}
.ac-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}.ac-t b{font-weight:600;font-size:.9rem;white-space:pre;overflow:hidden;text-overflow:ellipsis}.ac-t small{color:var(--muted);font-size:.74rem}
.ac-hl{background:none;color:var(--accent2);font-weight:800}
.jf-hero .ac-pop,.js-bar .ac-pop{left:0}
html body form.js-bar,html body .jf-hero .jf-form{overflow:visible!important}
html body form.js-bar>.btn,html body .jf-hero .jf-go{border-radius:0 999px 999px 0!important}
html body form.js-bar>.search:first-child,html body .jf-hero .jf-f:first-child{border-radius:999px 0 0 999px!important}
@media (max-width:700px){html body .jf-hero .jf-go{border-radius:0 0 16px 16px!important}html body .jf-hero .jf-f:first-child{border-radius:16px 16px 0 0!important}}
html body .ac-pop .ac-i svg{position:static!important;inset:auto!important;transform:none!important;width:15px!important;height:15px!important;margin:0!important;left:auto!important;top:auto!important;pointer-events:none}
html body .ac-pop .ac-i{position:relative}
/* v1.91.25 manage certifications */
.cm{display:grid;gap:10px;min-width:min(520px,86vw)}.cm p{margin:0}
.cm-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.cm-count{margin-left:auto;font:700 .78rem var(--mono);color:var(--muted)}
.cm-list{display:grid;gap:4px;max-height:min(46vh,380px);overflow:auto;padding-right:2px}
.cm-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;border:1px solid var(--line);cursor:pointer}
.cm-row:hover{border-color:var(--accent)}
.cm-row input{position:absolute;opacity:0;pointer-events:none}
.cm-row i{width:18px;height:18px;border-radius:6px;border:2px solid var(--line2,var(--muted));flex:none;display:grid;place-items:center}
.cm-row input:checked+i{background:var(--accent);border-color:var(--accent)}.cm-row input:checked+i::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.cm-row input:focus-visible+i{outline:2px solid var(--accent2);outline-offset:2px}
.cm-ico{width:30px;height:30px;border-radius:8px;object-fit:contain;flex:none}.cm-ico.ph{display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.cm-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}.cm-t b{font-size:.9rem;font-weight:600}.cm-t small{color:var(--muted);font-size:.76rem}
.cm-act{justify-content:flex-end;gap:8px}
/* v1.91.28 documents, comment attachments, saved posts */
.f-docs,.f-cm-files{display:grid;gap:8px;margin:8px 0}
.f-docs{padding:0 16px}
.f-doc{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--text);max-width:520px}
.f-doc:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.f-doc-t{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:10px;font:800 .7rem var(--mono);letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,#64748b,#475569)}
.f-doc-t.sm{width:30px;height:30px;font-size:.6rem;border-radius:8px}
.f-doc-t.t-pdf{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.f-doc-t.t-doc,.f-doc-t.t-docx,.f-doc-t.t-rtf{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.f-doc-t.t-xls,.f-doc-t.t-xlsx,.f-doc-t.t-csv{background:linear-gradient(135deg,#22c55e,#15803d)}
.f-doc-t.t-ppt,.f-doc-t.t-pptx{background:linear-gradient(135deg,#f97316,#c2410c)}
.f-doc-n{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}.f-doc-n b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.f-doc-n small{color:var(--muted);font-size:.76rem}
.f-doc-d{color:var(--accent);display:grid;place-items:center}.f-doc-d svg{width:18px;height:18px}
.f-tray-i.doc{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;position:relative;width:min(100%,360px);aspect-ratio:auto;height:auto}
.f-tray-i.doc .f-tray-x{position:static;margin-left:auto}
.f-ctray{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0 42px}
.f-ctray-i{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 4px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.78rem;max-width:230px}
.f-ctray-i.busy{opacity:.55}.f-ctray-i img{width:30px;height:30px;border-radius:7px;object-fit:cover}
.f-ctray-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.f-ctray-i button{border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:2px}.f-ctray-i button svg{width:13px;height:13px}
.f-cm-img img{max-width:220px;max-height:180px;border-radius:12px;border:1px solid var(--line);display:block}
.f-cm-files .f-doc{padding:7px 10px;max-width:360px}.f-cm-files .f-doc-t{width:34px;height:34px}
.f-save.on{color:var(--accent2)}.f-save.on svg{fill:currentColor}
.sv-head{margin:0 0 14px}.sv-head h1{margin:2px 0 4px;font:800 clamp(1.5rem,3vw,2rem) var(--hfont)}
.sp-page .sp-list{display:grid;gap:12px;padding:0;overflow:visible}.sp-more{display:grid;place-items:center;margin:14px 0}
.sp-empty{display:grid;justify-items:center;gap:8px;padding:40px 16px;text-align:center;border:1px dashed var(--line2,var(--line));border-radius:18px;color:var(--muted)}.sp-empty svg{width:34px;height:34px;color:var(--accent)}.sp-empty b{color:var(--text);font-size:1.05rem}
/* v1.91.29 LinkedIn-style comment box */
html body .f-c-in .f-pill{flex:1;min-width:0;display:flex;align-items:center;gap:2px;padding:3px 6px 3px 14px;border:1px solid var(--line2,var(--line));border-radius:999px;background:var(--surface)}
html body .f-c-in .f-pill:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
html body .f-c-in .f-pill input.input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:8px 4px!important;outline:0}
html body .f-c-in .f-pill .chat-tool{flex:none}
html body .f-c-in .f-pill .btn.sm{border-radius:999px;margin-left:4px}
.f-ctray-i.big{padding:0;border:0;position:relative;background:none}.f-ctray-i.big img{width:auto;max-width:200px;height:auto;max-height:150px;border-radius:12px;border:1px solid var(--line)}
.f-ctray-i.big button{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.65);color:#fff;border-radius:50%;width:22px;height:22px}
/* v1.91.30 link cards */
.lp-card{display:flex;flex-direction:column;margin:8px 16px 4px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);color:var(--text);text-decoration:none;position:relative}
a.lp-card:hover{border-color:var(--accent)}
.lp-img{width:100%;max-height:300px;aspect-ratio:1.91/1;object-fit:cover;display:block;background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.lp-b{display:flex;flex-direction:column;gap:3px;padding:10px 14px 12px;min-width:0}
.lp-site{font:700 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lp-t{font-size:.98rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-d{font-size:.84rem;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-box{margin:6px 0}.lp-box .lp-card{margin:0}
.lp-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;display:grid;place-items:center;cursor:pointer}.lp-x svg{width:14px;height:14px}
@media (min-width:700px){.lp-card.lp-side{flex-direction:row}}
/* v1.91.30 search without scrollbars */
html body .gs-pop,html body .gs-ovlist,html body .ac-pop,html body .org-sug,html body .ac-scroll{scrollbar-width:none!important;-ms-overflow-style:none}
html body .gs-pop::-webkit-scrollbar,html body .gs-ovlist::-webkit-scrollbar,html body .ac-pop::-webkit-scrollbar,html body .org-sug::-webkit-scrollbar,html body .ac-scroll::-webkit-scrollbar{display:none!important;width:0;height:0}
/* v1.91.32 document page viewer */
.f-docw{display:grid;gap:0;max-width:520px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.f-docw .f-doc{border:0;border-radius:0;max-width:none;border-top:1px solid var(--line)}
.f-docw .f-doc:only-child{border-top:0}
.f-dv{position:relative;background:color-mix(in srgb,var(--text) 6%,var(--surface));display:grid;place-items:center}
.f-dv[hidden]{display:none}
.f-dv-img{display:block;width:100%;max-height:560px;object-fit:contain;background:#fff}
.f-dv-b{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#fff;display:grid;place-items:center;cursor:pointer}
.f-dv-b:hover{background:rgba(0,0,0,.82)}.f-dv-b[hidden]{display:none}.f-dv-b svg{width:18px;height:18px}
.f-dv-p{left:8px}.f-dv-n{right:8px}
.f-dv-c{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font:600 .72rem var(--mono)}
.f-dv-p svg{transform:rotate(180deg)}
.f-docbar{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line)}.f-docw .f-docbar .f-doc{flex:1;min-width:0;border:0}
.f-dv:not([hidden]){min-height:70px}.f-dv-t{margin:0;width:100%;max-height:420px;overflow:auto;scrollbar-width:none;padding:18px 20px;background:#fff;color:#1b1f2a;font:.84rem/1.55 Georgia,serif;white-space:pre-wrap;word-break:break-word}.f-dv-t::-webkit-scrollbar{display:none}
.f-dv-t[hidden],.f-dv-note[hidden],.f-dv-img[hidden],.f-dv-c[hidden]{display:none}
.f-dv-note{padding:22px 16px;font-size:.88rem;color:var(--muted);text-align:center}
.f-dv-tog{flex:none;display:inline-flex;align-items:center;gap:6px;margin-right:12px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font:600 .8rem var(--sans,inherit);cursor:pointer}.f-dv-tog:hover{border-color:var(--accent);color:var(--accent)}.f-dv-tog svg{width:15px;height:15px}
/* v1.91.34 post page side column, slimmer videos */
.post-grid .post-solo{max-width:none}
body:has(.post-grid .f-left .rail-foot) .foot-app{display:none}
@media (max-width:820px){body:has(.post-grid .f-left .rail-foot) .foot-app{display:block}}
html body .f-yt,html body .f-yt-frame{max-width:520px}
html body .f-p .f-yt-play .ico,html body .f-yt .f-yt-play .ico{width:52px;height:52px}
/* v1.91.37 Hiring hub: compact, no boxes */
.hh-head{gap:6px;margin-bottom:8px}
html body .hh-flat{background:none;border:0;box-shadow:none;border-radius:0}
html body .hh-hero.hh-flat{padding:2px 0 10px;gap:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.hh-hero .hh-id{gap:12px}
.hh-hero .hh-logo{width:40px;height:40px;border-radius:10px}.hh-hero .hh-logo svg{width:20px;height:20px}
.hh-hero .hh-id h1{font-size:1.25rem;margin:0 0 2px}
.hh-hero .hh-meta{font-size:.78rem;gap:5px 8px}
.hh-hero .hh-st{padding:1px 8px;font-size:.72rem}
.hh-hero .hh-acts .btn{padding:6px 12px;font-size:.82rem}
/* the four number tiles become one quiet line */
.hh-stats{display:flex;flex-wrap:wrap;gap:4px 18px;padding:2px 0}
html body .hh-stat{display:inline-flex;align-items:baseline;gap:5px;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.hh-stat-ic{display:none}
html body .hh-stat b{font:700 .98rem var(--hfont)}
.hh-stat small{font-size:.8rem;color:var(--muted)}
.hh-stat.hot b{color:var(--good)}
a.hh-stat:hover small{color:var(--accent)}
/* reply-time card becomes a slim row */
.hh-head .rt-card{padding:0;border:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.hh-head .rt-card .rt-top{display:flex;align-items:center;gap:8px;margin:0}
.hh-head .rt-card .rt-ic{width:auto;height:auto;background:none;display:inline-grid;color:var(--accent)}.hh-head .rt-card .rt-ic svg{width:15px;height:15px}
.hh-head .rt-card .kicker,.hh-head .rt-card .rt-top p,.hh-head .rt-card .rt-tip,.hh-head .rt-card>small{display:none}
.hh-head .rt-card h3{font:600 .84rem var(--sans,inherit);margin:0;color:var(--muted)}
.hh-head .rt-card .rt-stats{display:flex;gap:14px;margin:0}.hh-head .rt-card .rt-stats>div{display:flex;gap:5px;align-items:baseline}.hh-head .rt-card .rt-stats b{font-size:.9rem}.hh-head .rt-card .rt-stats small{font-size:.76rem}
.hh-tabs{margin:2px 0 4px}
/* search like the rest of the site: one rounded bar, slim pill filters */
html body .hh-filters.hh-flat{padding:0;margin:4px 0 6px;gap:8px}
html body .hh-filters .search.hh-q{position:relative}
html body .hh-in{width:100%;height:44px;padding:0 16px 0 42px;border-radius:999px;border:1px solid var(--line2,var(--line));background:var(--surface);color:var(--text);font:inherit;box-shadow:0 6px 18px -14px rgba(0,0,0,.6)}
html body .hh-in:focus{outline:0;border-color:var(--accent)}
html body .hh-filters .search .ico{left:15px}
html body .hh-fgrid{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
html body .hh-sel{width:auto;min-width:0;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font:600 .8rem var(--sans,inherit)}
html body select.hh-sel{padding-right:26px}
html body input.hh-sel{width:120px}
html body .hh-sel:focus{outline:0;border-color:var(--accent)}
.hh-fgrid .switch{font-size:.8rem}
/* save-search row: one slim line */
.ins-savebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:2px 0 8px;padding:0}
.ins-savebar small{font-size:.76rem}.ins-savebar .btn.sm{padding:4px 10px;font-size:.78rem}
/* v1.91.37 hiring hub: tighter page */
@media (min-width:901px){body:has(.hx-left) .hh-tabs{display:none}}
html body .hh-fgrid select.hh-sel,html body .hh-fgrid input.hh-sel{height:32px;min-height:0;line-height:1;padding:0 12px;font-size:.8rem;border-radius:999px;background-color:transparent;width:auto;flex:none}
html body .hh-fgrid select.hh-sel{padding-right:28px;background-position:right 10px center;background-size:10px}
html body .hh-fgrid input.hh-sel{width:118px}
html body .hh-cta{padding:10px 14px;gap:12px;border-radius:12px}
html body .hh-cta-ic{width:32px;height:32px;border-radius:9px}.hh-cta-ic svg{width:16px;height:16px}
html body .hh-cta b{font-size:.95rem}
html body .hh-cta p{font-size:.8rem;margin:1px 0 0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html body .hh-cta .btn{padding:6px 12px;font-size:.82rem}
html body .hh-tip{padding:6px 10px;font-size:.78rem;border-radius:10px;margin:0 0 8px}
html body .hh-count{margin:0 2px 6px;font-size:.8rem}
.hh-grid{gap:10px}
html body .hh-card{padding:12px;gap:8px}
.hh-body{display:block}
/* page ads on business pages: a slim letterboard strip */
html body .page-ad .card.ad-card{padding:6px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
html body .page-ad .card.ad-card .ad-creative,html body .page-ad .card.ad-card img.ad-creative,html body .page-ad .card.ad-card video.ad-creative,html body .page-ad .card.ad-card .ad-creative-link,html body .page-ad .card.ad-card .ad-banner-link{width:100%;max-height:84px;height:auto;aspect-ratio:728/90;object-fit:cover;border-radius:8px;margin:0;overflow:hidden}
html body .page-ad .card.ad-card .ad-creative-link img,html body .page-ad .card.ad-card .ad-banner-link img{width:100%;height:100%;object-fit:cover;max-height:84px}
html body .page-ad .card.ad-card .f-yt.ad-creative,html body .page-ad .card.ad-card .f-yt-frame.ad-creative{max-height:84px;aspect-ratio:728/90}
html body .page-ad .card.ad-card .ad-label{margin:0}
html body .page-ad .card.ad-card .ad-cta{margin-left:auto}
html body .hh-fgrid select.hh-sel,html body .hh-fgrid input.hh-sel{height:30px!important;min-height:0!important;font-size:.78rem!important;padding-top:0!important;padding-bottom:0!important;width:auto!important;min-width:0!important}
html body .hh-fgrid input.hh-sel{width:108px!important}
html body .hh-hero .hh-logo{width:34px;height:34px;clip-path:none;border-radius:9px}
html body .hh-empty{padding:18px 16px}.hh-empty h3{font-size:1rem;margin:4px 0}.hh-empty p{font-size:.84rem;margin:2px 0}.hh-empty svg{width:28px;height:28px}
html body .hx-right .card,html body .hx-left .card{padding:12px}
html body .hx-right .card p,html body .hx-left .card p{font-size:.8rem}
html body .hx-left .sidenav a,html body .hx-left nav a{padding-top:7px;padding-bottom:7px}
html body .hh-fgrid .fx-sel{width:auto;min-height:30px;height:30px;padding:0 26px 0 12px;font-size:.78rem;font-weight:600;border-radius:999px;background:transparent;border-color:var(--line)}
html body .hh-fgrid .fx-sel .fx-chev{right:10px;width:6px;height:6px;margin-top:-5px}
html body .hh-fgrid .fx-sel.on .fx-chev{margin-top:-1px}
.hh-wl{position:relative;display:block;margin:0}
/* v1.91.39 shorter suggestion lists */
html body .ac-pop{max-height:min(340px,52vh);overflow-y:auto}
html body .ac-pop .ac-o{padding-top:6px;padding-bottom:6px}
html body .ac-pop .ac-k{padding-top:6px;padding-bottom:2px}
.feed-grid.post-grid.no-right{grid-template-columns:230px minmax(0,1fr)}
@media (max-width:820px){.feed-grid.post-grid.no-right{grid-template-columns:1fr}}
/* v1.91.43 messaging dock: sits in the bottom-right corner like LinkedIn's and the page leaves room for it */
@media (min-width:900px){
  html body{padding-bottom:56px}
  html body .dock-root{right:16px}
  html body .dock-root .dock:not(.open):not(.chatting){width:264px}
  html body .f-left,html body .f-right,html body .side-rail,html body .detail{padding-bottom:56px}
}
/* v1.91.44 roadmap facts as one quiet line */
html body .rm-facts{gap:2px 18px;margin:2px 0 6px}
html body .rm-fact{display:inline-flex;align-items:baseline;gap:6px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
html body .rm-fact svg{display:none}
html body .rm-fact b{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
html body .rm-fact small{font-size:.86rem}
html body .rm-fact b::after{content:":"}
html body .rm-fact b{font-weight:800;color:#b45309}
html[data-theme="dark"] body .rm-fact b,html:not([data-theme="light"]) body .rm-fact b{color:#fbbf24}
html[data-theme="light"] body .rm-fact b{color:#b45309}
/* v1.91.46 smaller photo in the Messaging bar so it sits inside it */
html body .dock-me{flex:none;width:28px;height:28px}
html body .dock-me>:first-child,html body .dock-me .nav-av,html body .dock-me img{width:28px!important;height:28px!important;min-width:0;font-size:.7rem;box-sizing:border-box}
html body .dock-me .dock-on{width:8px;height:8px;right:-2px;bottom:-2px}
html body .dock-root .dock .dock-head{min-height:38px;padding-top:3px;padding-bottom:3px}
/* v1.91.48 account menu: nothing runs past the edge (Edge and narrow windows) */
html body .menu.me-menu{box-sizing:border-box;width:min(340px,calc(100vw - 16px));overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - 80px)}
html body .menu.me-menu>*{min-width:0;max-width:100%;box-sizing:border-box}
html body .menu.me-menu a.wx-now-menu{display:flex;width:100%;min-width:0;overflow:hidden}
html body .menu.me-menu .wx-now-menu .wx-now-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .menu.me-menu .mm-item,html body .menu.me-menu a{min-width:0}
html body .menu.me-menu .mm-item>span:not(.badge),html body .menu.me-menu a small{overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){html body .menu.me-menu{position:fixed;right:8px;left:auto;top:64px;width:min(340px,calc(100vw - 16px))}}
/* v1.91.49 no scroll bars in pop-up windows, menus and panels (they still scroll) */
html body .modal-bg,html body .modal-bg *,html body .modal,html body .modal *,html body .menu,html body .menu *,html body .dock-root *,html body .fx-pop,html body .fx-pop *{scrollbar-width:none!important;-ms-overflow-style:none}
html body .modal-bg::-webkit-scrollbar,html body .modal-bg *::-webkit-scrollbar,html body .modal::-webkit-scrollbar,html body .modal *::-webkit-scrollbar,html body .menu::-webkit-scrollbar,html body .menu *::-webkit-scrollbar,html body .dock-root *::-webkit-scrollbar,html body .fx-pop::-webkit-scrollbar,html body .fx-pop *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
/* v2 resilience */
.v2-offline{position:fixed;left:50%;transform:translateX(-50%);bottom:64px;z-index:500;padding:8px 16px;border-radius:999px;background:#7c2d12;color:#fff;font-size:.84rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.v2-err{display:grid;place-items:center;gap:6px;padding:28px 16px;text-align:center}.v2-err svg{width:28px;height:28px;color:var(--warn,#f59e0b)}.v2-err h3{margin:2px 0}.v2-err .row{display:flex;gap:8px;justify-content:center;margin-top:6px}
/* v2 offer compare */
.of-head h1{margin:2px 0 4px;font:800 clamp(1.5rem,3vw,2rem) var(--hfont)}
.of-grid{display:grid;grid-template-columns:minmax(120px,170px) repeat(var(--n,2),minmax(0,1fr));gap:6px 10px;align-items:center;margin:10px 0}
.of-grid[data-n="2"]{--n:2}.of-grid[data-n="3"]{--n:3}
.of-lab{display:flex;flex-direction:column;line-height:1.2}.of-lab b{font-size:.86rem}.of-lab small{color:var(--dim);font-size:.72rem}
.of-col{position:relative;min-width:0}.of-col input{width:100%}
.of-x{position:absolute;right:4px;top:-2px;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}.of-x svg{width:13px;height:13px}
.of-bar{display:flex;gap:8px;margin:4px 0 14px}
.of-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:6px 0 12px}
.of-card{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}.of-card small{color:var(--muted);font-weight:700}.of-card b{font:800 1.5rem/1.1 var(--hfont)}.of-card span{font-size:.78rem;color:var(--muted)}
.of-card em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:.78rem;font-weight:700;color:var(--good,#10b981);margin-top:2px}.of-card em svg{width:13px;height:13px}.of-card em.gap{color:var(--muted)}
.of-card.win{border-color:var(--good,#10b981);background:color-mix(in srgb,var(--good,#10b981) 7%,transparent)}
.of-tbl{width:100%;border-collapse:collapse;font-size:.88rem}.of-tbl th,.of-tbl td{padding:7px 10px;text-align:left;border-top:1px solid var(--line)}.of-tbl th{color:var(--muted);font-weight:700;border-top:0}.of-tbl td.neg{color:var(--muted)}.of-tbl tr.tot td{font-weight:800;border-top:2px solid var(--line2,var(--line))}
.of-note{font-size:.76rem;margin-top:10px}
/* v2 today strip */
.td-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;overflow:hidden;margin-bottom:12px}
.td-c{display:flex;flex-direction:column;gap:1px;padding:10px 14px;color:var(--text);text-decoration:none;border-right:1px solid var(--line);min-width:0}.td-c:last-child{border-right:0}
.td-c:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);text-decoration:none}
.td-k{font:700 .66rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.td-c b{font:800 1.2rem/1.2 var(--hfont);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-c small{color:var(--muted);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-c.hot b{color:var(--accent)}.td-c.warn b{color:#f59e0b}.td-c.good b{color:var(--good,#10b981)}
@media (max-width:640px){.td-strip{grid-template-columns:1fr 1fr}.td-c:nth-child(2){border-right:0}.td-c:nth-child(-n+2){border-bottom:1px solid var(--line)}}
html body .of-col .input{width:100%!important;max-width:none;min-width:0}
/* v2.0.1 no underlines on clickable text */
html body a,html body a:hover,html body a:focus,html body a:active,html body a:visited,html body .link,html body .link:hover,html body button.link,html body [role="link"]{text-decoration:none!important}
html body a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* v2.0.2 — compact creator join button */
html body .cr-join{align-self:flex-start;width:auto!important;min-height:0!important;padding:7px 18px!important;font-size:.88rem!important;border-radius:999px}

/* v2.0.4 — matches: wider, more compact, salary stands out */
html body .wrap:has(.split .jobcard){max-width:1480px}
html body .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px}
html body .jobcard{padding:9px 12px;gap:10px;border-radius:12px}
html body .jobcard .ring{width:38px!important;height:38px!important}
html body .jobcard .t{font-size:.95rem;margin:0 0 1px}
html body .jobcard .c{margin:0 0 5px;font-size:.82rem}
html body .jobcard .chips{gap:4px}
html body .jobcard .chip{padding:2px 8px;font-size:.74rem}
html body .jobcard .why{margin-top:5px;font-size:.76rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .detail{padding:14px 18px}
html body .detail-top{gap:12px}
html body .detail-top .ring{width:60px!important;height:60px!important}
html body .detail h2{font-size:1.2rem;margin:0 0 2px}
html body .detail .facts{margin:8px 0;gap:5px}
html body .detail .chip{padding:2px 9px;font-size:.76rem}
html body .detail .why-list{margin:6px 0 0;gap:3px;font-size:.84rem;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
html body .detail .section-t{margin:12px 0 6px}
html body .detail .ai-row{margin-top:8px;padding:7px 10px}
html body .detail .chips{gap:4px}
html body .detail .row{margin-top:10px!important}
/* salary: bold yellow */
html body .chip.sal,html body .jobcard .chip.sal,html body .detail .chip.sal{color:#facc15!important;font-weight:800!important;border-color:color-mix(in srgb,#facc15 55%,transparent)!important;background:color-mix(in srgb,#facc15 12%,transparent)!important}
html body .chip.sal .ico{color:#facc15}
html body .pm-jobsal .pm-one{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .pm-jobsal .pm-rng{color:#facc15;font-weight:800;font-size:.95rem}
html body .pm-jobsal .pm-n{color:var(--muted);font-size:.8rem}
html[data-theme="light"] body .chip.sal,html[data-theme="light"] body .pm-jobsal .pm-rng{color:#a16207!important}

/* v2.0.5 — rings scale with their box, detail chips sit on one tidy row */
html body .jobcard .ring svg,html body .detail-top .ring svg{width:100%!important;height:100%!important}
html body .jobcard .ring b{font-size:.82rem}
html body .detail-top .ring.lg b{font-size:1.35rem}
html body .detail-top .facts{margin:6px 0 4px}
html body .detail .why-list li{line-height:1.35}
html body .detail .why-list .ico{margin-top:2px}
html body .detail .pm-jobsal{margin:8px 0 0}
html body .detail .pm-jobsal .pm-one{white-space:normal}
html body .detail .desc{line-height:1.55;font-size:.9rem}
html body .detail .desc p,html body .detail .desc br+br{margin:0}

/* v2.0.6 — job panels stop above the messaging bar; no scroll bar on the page while they are showing */
html:has(.split.split-panes){scrollbar-width:none}
html:has(.split.split-panes)::-webkit-scrollbar{display:none}

/* v2.0.7 — job panels: the page stays in place, only the lists scroll (no bars) */
html.pane-lock,html.pane-lock body{overflow:hidden!important;height:100%}
html.pane-lock .jh-left{max-height:calc(100vh - var(--head-h,64px) - 24px);overflow-y:auto;scrollbar-width:none}
html.pane-lock .jh-left::-webkit-scrollbar{display:none}
html.pane-lock .split.split-panes>.list-col,html.pane-lock .split.split-panes>.detail-col>.detail{overscroll-behavior:contain!important}

/* v2.0.8 — Jobs home: target, Explore and Collections in the right side bar; page stays in place */
html body .jf-side{padding:12px 14px;display:grid;gap:10px}
html body .jf-side .jf-sh{display:flex;align-items:center;justify-content:space-between;gap:8px}
html body .jf-side .jf-edit{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:2px 10px;font:600 .74rem var(--font);cursor:pointer}
html body .jf-side .jf-edit:hover{color:var(--accent);border-color:var(--accent)}
html body .jf-side .jf-edit svg{width:12px;height:12px}
html body .jf-side .jf-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0}
html body .jf-side .jf-chip{padding:3px 10px;font-size:.78rem}
html body .jf-side .jf-quick{display:grid;gap:10px;margin:0;padding-top:10px;border-top:1px solid var(--line)}
html body .jf-side .jf-pgrp{display:grid;gap:6px}
html body .jf-side .jf-pills{display:flex;flex-wrap:wrap;gap:5px}
html body .jf-side .jf-pill{padding:2px 10px 2px 3px;gap:6px;font-size:.76rem}
html body .jf-side .jf-pill-ic{width:20px;height:20px}
html body .jf-side .jf-pill-ic svg{width:11px;height:11px}
html body .jf-side .jf-all{margin:0;justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:.78rem}
html body .jf-hero{padding:0!important}
/* the page stays in place; columns scroll on their own with no bars */
html body .jh-pane{overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:none;position:static!important;align-self:start}
html body .jh-pane::-webkit-scrollbar{display:none}

/* v2.0.9 — Jobs home: wider, compact rows, soft bottom edge instead of a hard cut */
html body .jh-grid.jh-3{max-width:1600px;grid-template-columns:220px minmax(0,1fr) 320px;gap:14px}
@media (max-width:1180px){html body .jh-grid.jh-3{grid-template-columns:200px minmax(0,1fr) 280px}}
html body .jh-pane{padding-bottom:28px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
html body .jh-row{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:8px 14px}
html body .jh-row .jh-logo{width:40px!important;height:40px!important;border-radius:10px;font-size:.9rem}
html body .jh-row .jh-body{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:0}
html body .jh-row .jh-tline,html body .jh-row .jh-co,html body .jh-row .jh-pay{flex:1 0 100%}
html body .jh-row .jh-title{font-size:.95rem}
html body .jh-row .jh-co{font-size:.82rem}
html body .jh-row .jh-pay{font-size:.78rem}
html body .jh-row .jh-top,html body .jh-row .jh-score,html body .jh-row .jh-meta{margin-top:2px}
html body .jh-row .jh-top .ring,html body .jh-row .jh-score .ring{width:22px!important;height:22px!important}
html body .jh-row .ring svg{width:100%!important;height:100%!important}
html body .jh-row .jh-meta{font-size:.74rem}
html body .jh-sec-h{padding:10px 14px 8px}
html body .jh-sec-h .jh-sub{display:none}
html body .jh-sec .jh-h{font-size:1.05rem}
html body .jh-hero{margin:0 0 6px}
html body .jh-hero p{margin:2px 0 0}
html body .jh-main{display:flex;flex-direction:column;gap:10px}
html body .jh-main>*{flex:none}
html body .jf-side{padding:10px 12px;gap:8px}

/* v2.0.10 — Jobs home right side bar: everything fits without scrolling */
html body .jf-side{padding:8px 10px;gap:6px}
html body .jf-side .jf-chips,html body .jf-side .jf-pills{gap:4px}
html body .jf-side .jf-chip{padding:1px 8px;font-size:.72rem}
html body .jf-side .jf-pill{padding:1px 8px;gap:0;font-size:.72rem}
html body .jf-side .jf-pill-ic{display:none}
html body .jf-side .jf-quick{gap:6px;padding-top:6px}
html body .jf-side .jf-pgrp{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
html body .jf-side .jf-pgrp .jf-lbl{flex:1 0 100%;font-size:.62rem;margin:0}
html body .jf-side .jf-pgrp .jf-pills{flex:1 0 100%}
html body .jf-side .jf-sh .jf-lbl{font-size:.62rem}
html body .jf-side .jf-all{padding:2px 10px;font-size:.72rem}
html body .jh-right>.card:not(.jf-side){padding:10px 12px}
html body .jh-right .jf-tips,html body .jh-right .pm-card{display:none}

@media (max-height:1000px){html body .jh-right .ad-card{display:none}}

/* v2.0.11 — About the role: clear sections, bigger readable text */
html body .jv-sec:has(.jd){padding:18px 22px;border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface) 160px)}
html body .jv-sec:has(.jd)>h3{font-size:1.25rem;padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid color-mix(in srgb,var(--accent) 45%,transparent)}
html body .jv-sec:has(.jd)>h3 .ico{width:22px;height:22px;color:var(--accent)}
html body .desc:has(.jd),html body .jv-desc:has(.jd){white-space:normal;border-top:0;padding-top:0;margin-top:0}
html body .jd{font-size:1rem;line-height:1.75;color:var(--text);max-width:75ch}
html body .jd .jd-h{margin:22px 0 8px;padding-left:10px;border-left:4px solid var(--accent);font:700 1.05rem/1.35 var(--hfont);color:var(--text);letter-spacing:.005em}
html body .jd>.jd-h:first-child{margin-top:4px}
html body .jd .jd-p{margin:0 0 12px}
html body .jd .jd-ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:7px}
html body .jd .jd-ul li{position:relative;padding-left:22px}
html body .jd .jd-ul li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
html body .jd a{color:var(--accent)}
html body .detail .desc .jd{font-size:.94rem;line-height:1.7}

/* v2.0.12 — side bar cards keep their natural height (the fixed-height column was stretching them); plain Search all link */
html body .jh-right,html body .jh-left{display:flex!important;flex-direction:column;gap:12px}
html body .jh-right>*,html body .jh-left>*{flex:none}
html body .jf-side .jf-all{background:none!important;border:0!important;box-shadow:none!important;padding:2px 0!important;height:auto!important;min-height:0!important;color:var(--accent);font-weight:600;cursor:pointer}
html body .jf-side .jf-all:hover{text-decoration:none;color:var(--text)}

/* v2.0.13 — Job tracker: wider page and roomier columns */
html body .wrap:has(.jh-frame .board){max-width:min(2000px,100%)}
html body .jh-grid.jh-frame:has(.board){max-width:none;grid-template-columns:220px minmax(0,1fr);gap:16px}
html body .jh-frame .board{gap:12px}
@media (min-width:1280px){html body .jh-framed .board{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:621px) and (max-width:1279px){html body .jh-framed .board{grid-template-columns:repeat(3,minmax(0,1fr))}}
html body .jh-frame .board .col{padding:10px 12px}

/* v2.0.14 — My Network: no wasted space around empty sections */
html body .ng-body,html body .ng-sections,html body .ng-sections>div{gap:10px}
html body .ng-sections>div:not(:has(.card,.ng-empty,section,article)){display:none}
html body .ng-sections>div>div:empty{display:none}
html body .ng-results:not(:has(*)){display:none}
html body .ng-slim .ng-tabs{margin-top:8px}
html body .ng-empty{padding:14px 12px;gap:4px}
html body .ng-sec{padding:12px 16px 14px}
html body .ng-main{gap:10px}
html body .ng-search.ng-slim{margin-bottom:0}

/* v2.0.15 — Cert tracker: summary and path in one compact card */
html body .cm-plan-top.cm-one{display:grid;gap:10px;padding:12px 16px}
html body .cm-plan-main{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
html body .cm-one .cm-plan-info{gap:4px;min-width:200px}
html body .cm-one .cm-plan-info h2{font-size:1.2rem}
html body .cm-one .cm-plan-row{gap:12px}
html body .cm-one .cm-cd{gap:6px}
html body .cm-one .cm-cd b{font-size:1.4rem}
html body .cm-one .cm-cd small{width:auto}
html body .cm-one .cm-path-h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-top:8px;border-top:1px solid var(--line)}
html body .cm-one .cm-path-h2 b{font:700 .95rem var(--hfont)}
html body .cm-one .cm-path-h2 small{font-size:.8rem}
html body .cm-one .cm-path-row li{gap:3px}
html body .cm-one .cm-path-row li::before,html body .cm-one .cm-path-row li::after{top:13px;height:3px}
html body .cm-one .cm-node{width:28px;height:28px;font-size:.78rem}
html body .cm-one .cm-node .ico{width:14px;height:14px}
html body .cm-one .cm-path-row small{font-size:.7rem;line-height:1.2}
html body .cm-one .cm-path-row em{font-size:.68rem}
html body .cm-one .cm-plan-info{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px}
html body .cm-one .cm-plan-info .kicker,html body .cm-one .cm-plan-info h2{flex:1 0 100%}
html body .cm-one .cm-date{display:flex;align-items:center;gap:6px;margin:0}
html body .cm-one .cm-date span{font-size:.75rem}
html body .cm-one .cm-date .input{padding:4px 8px;min-height:0;height:30px}
html body .cm-one .cm-plan-info .row{gap:6px}
html body .cm-one .cm-plan-info .btn{padding:4px 12px;font-size:.8rem}

/* v2.0.16 — Salary insights: one compact search card */
html body .sl-form.sl-one{padding:10px 12px;gap:8px;margin-bottom:10px}
html body .sl-one .sl-bar{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:999px;background:var(--surface2,var(--surface));overflow:visible}
html body .sl-one .sl-f{flex:1 1 0;display:flex;align-items:center;gap:8px;padding:0 14px;min-width:0;position:relative;margin:0}
html body .sl-one .sl-f+.sl-f{border-left:1px solid var(--line)}
html body .sl-one .sl-f[hidden]{display:none}
html body .sl-one .sl-f .ico{width:16px;height:16px;color:var(--muted);flex:none}
html body .sl-one .sl-f .input{border:0!important;background:transparent!important;box-shadow:none!important;padding:10px 0!important;min-width:0;width:100%}
html body .sl-one .sl-go{border-radius:0 999px 999px 0!important;margin:0;padding:0 22px!important;min-height:0!important}
html body .sl-one .sl-row{gap:4px 8px}
html body .sl-one .sl-lab{min-width:46px;font-size:.66rem}
html body .sl-one .sl-chips{gap:4px}
html body .sl-one .sl-chip{padding:2px 10px;font-size:.74rem}
html body .sl-one .sl-ctl2{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
html body .sl-one .sl-seg button{padding:3px 10px;font-size:.74rem}
html body .sl-one .sl-toggle{padding:3px 10px;font-size:.74rem}
@media (max-width:700px){html body .sl-one .sl-bar{flex-direction:column;border-radius:16px}html body .sl-one .sl-f+.sl-f{border-left:0;border-top:1px solid var(--line)}html body .sl-one .sl-go{border-radius:0 0 16px 16px!important;padding:10px!important}}
html body .sl-one .sl-bar{flex:none;min-height:42px}
html body .sl-one .sl-row{flex:none}
html body .sl-one .sl-go{align-self:stretch;min-height:42px!important;display:inline-flex;align-items:center}

/* v2.0.17 — role suggestions: no scroll bars, room for the full list */
html body .ac-pop{max-height:min(420px,70vh);overflow-y:auto!important;scrollbar-width:none!important;-ms-overflow-style:none}
html body .ac-pop::-webkit-scrollbar{display:none!important}

/* v2.0.18 — Cert tracker: wider main column, ring number fits, path labels tidy */
html body .wrap:has(.cm-ccols){max-width:min(1700px,100%)}
html body .cm-ccols{grid-template-columns:minmax(0,1fr) 300px;gap:14px}
@media (max-width:1180px){html body .cm-ccols{grid-template-columns:minmax(0,1fr)}html body .cm-cside{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
@media (max-width:760px){html body .cm-cside{grid-template-columns:minmax(0,1fr)}}
html body .cm-one .cm-ring-t b{font-size:1.15rem}
html body .cm-one .cm-ring-t small{font-size:.66rem}
html body .cm-one .cm-plan-main{flex-wrap:nowrap}
html body .cm-one .cm-plan-info{flex:1;min-width:0}
html body .cm-one .cm-path-row small{overflow-wrap:normal;hyphens:auto}
html body .cm-one .cm-path-row li{padding:0 2px}
html body .cm-one .cm-plan-info .row .btn,html body .cm-one .cm-passed{white-space:nowrap}
html body .cm-one label.field.cm-date{display:flex!important;flex-direction:row;align-items:center;gap:6px}
html body .cm-one label.field.cm-date .input{width:auto}
@media (max-width:1250px){html body .ng-grid:has(.cm-ccols)>.ng-right,html body .ng-grid:has(.cm-ccols) .ng-right{display:none}html body .ng-grid:has(.cm-ccols){grid-template-columns:230px minmax(0,1fr)}}

/* v2.0.19 — Cert tracker: back to a comfortable width */
html body .wrap:has(.cm-ccols){max-width:1280px}
html body .cm-ccols{max-width:100%}

/* v2.0.20 — every page uses the same 1480px width */
:root,html body{--maxw:1480px}
html body .wrap,html body .wrap:has(.cm-ccols),html body .wrap:has(.jh-frame .board),html body .wrap:has(.split .jobcard){max-width:1480px}
html body .jh-grid,html body .jh-grid.jh-3,html body .jh-grid.jh-frame:has(.board){max-width:1480px}
html body .feed-grid,html body .ng-grid,html body .rail-grid{max-width:100%}

/* v2.0.21 — messenger: long links and wide pictures wrap inside the bubble instead of running off the left edge */
html body .mc-scroll{overflow-x:hidden}
html body .mc-feed,html body .mc-row,html body .mc .cm,html body .mc-stack{min-width:0;max-width:100%}
html body .mc-stack{max-width:min(560px,78%)}
html body .mc .cm-bub{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
html body .mc .cm-bub a{overflow-wrap:anywhere;word-break:break-all}
html body .mc .cm img,html body .mc .cm video,html body .mc .cm-media,html body .mc .cm-img{max-width:100%!important;height:auto;object-fit:contain}
html body .mc .cm-media img,html body .mc .cm-img img{width:100%}
html body .mc .cm-att,html body .mc .cm-gif,html body .mc .cm-link{min-width:0;max-width:min(320px,100%)}
html body .mc.compact .cm-att,html body .mc.compact .cm-link,html body .mc.compact .cm-gif{max-width:min(230px,100%)}
html body .mc .cm-gif img,html body .mc .cm-img img{max-width:100%}
html body .mc-feed>*{max-width:100%}

/* v2.0.22 — profile, wallet, member and other content pages use the full 1480px too */
html body .wl-public,html body .mprof,html body .st-wrap,html body .ct-page,html body .ct-vpage,html body .co-page,html body .gs-page,html body .contact-grid,html body .eg-page{max-width:1480px}
html body .wl-public,html body .ct-page,html body .ct-vpage{margin-left:auto;margin-right:auto}
html body .wl-wrap,html body .wl-page,html body .wl-main{max-width:1480px}
@media (min-width:1061px){html body .rail-grid:has(.pf-page){grid-template-columns:minmax(0,1fr) 300px;justify-content:stretch}}
html body .pf-page{max-width:none}

/* v2.0.23 — Cert tracker: no right ad / daily challenge column */
html body .ng-grid:has(.cm-ccols) .ng-right{display:none!important}
html body .ng-grid:has(.cm-ccols){grid-template-columns:260px minmax(0,1fr)}
@media (max-width:1180px){html body .ng-grid:has(.cm-ccols){grid-template-columns:230px minmax(0,1fr)}}
@media (max-width:900px){html body .ng-grid:has(.cm-ccols){grid-template-columns:minmax(0,1fr)}}

/* v2.0.24 people lists as card grids like LinkedIn "People you may know" */
html body .ng-pgrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:14px!important}
html body .ng-pgrid>.ng-pc{margin:0;min-width:0}
html body .ng-pgrid.cm-blist{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
html body .ng-pc-note{display:grid;gap:6px;justify-items:center;text-align:center;width:100%;padding:6px 12px 0}
html body .ng-pc-note .ng-inv-note{margin:0;text-align:left;width:100%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html body .ng-pc-menu{position:absolute;top:8px;right:8px;z-index:2}
html body .ng-pc-menu .icon-btn{width:30px;height:30px;border-radius:50%;background:rgba(8,12,30,.55);color:#fff;border:1px solid rgba(255,255,255,.25)}
html body .ng-pc-act .btn.ng-msg{justify-content:center}
html body .ng-pc-act .btn.ng-msg span{display:inline!important}
html body .ng-pc-act .ng-inv-act{display:flex;gap:8px}
html body .ng-pc-act .ng-inv-act .btn{flex:1}
html body .ng-pc-act .cm-mctl{display:grid;gap:6px}
html body .ng-pc-act .cm-mctl .btn,html body .ng-pc-act .cm-mctl select{width:100%}
html body .ng-invc .ng-inv-done{display:grid;justify-items:center;gap:8px;padding:18px 12px 0;text-align:center}
html body .hb-vlist .hb-vgrid{margin-top:10px}
html body .ng-inv-list.ng-pgrid{align-items:start!important}

/* v2.0.25 post media and documents centered */
html body :is(.pg,.f-imgs,.f-video,.f-yt,.f-docw,.f-link-card){margin-left:auto!important;margin-right:auto!important;align-self:center!important}
html body .f-docs{justify-items:center}
html body .f-docs>.f-doc,html body .f-docw{width:100%}
html body .f-video video{margin:0 auto}
html body .pg.pg-1{grid-template-columns:minmax(0,1fr);justify-items:center;background:transparent!important;border-radius:0}
html body .pg.pg-1 .pg-tile{width:auto;max-width:100%;border-radius:14px;overflow:hidden}
html body .pg.pg-1 .pg-tile img,html body .pg.pg-1 .pg-tile video{width:auto;max-width:100%;height:auto;max-height:560px;object-fit:contain;margin:0 auto}

/* v2.0.26 Jobs home formatting: score rings fit their number, employer/school names don't break mid-word */
html body .jh-row .jh-top .ring,html body .jh-row .jh-score .ring{width:28px!important;height:28px!important}
html body .jh-row .jh-top .ring b,html body .jh-row .jh-score .ring b{font-size:.58rem!important;letter-spacing:-.03em;line-height:1}
html body .jh-row .jh-top,html body .jh-row .jh-score{gap:8px;align-items:center}
html body .jh-left .jh-orgs *{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
html body .jh-left .jh-orgs b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
html body .jh-left .jh-orgs small{display:block;font-size:.78rem;line-height:1.3}
html body .jh-left .jh-nm{overflow-wrap:normal;word-break:normal;font-size:1.1rem;line-height:1.25}
html body .jh-left .jh-hl{overflow-wrap:normal;word-break:normal}

/* v2.0.27 profile header: more compact, still bold */
html body .pf-hero .pf-cover:has(img){max-height:190px;overflow:hidden}
html body .pf-hero .pf-cover:has(img) img{max-height:190px;object-fit:cover;object-position:center}
html body .pf-hero .pf-cover:not(:has(img)){height:150px}
html body .pf-hero .pf-photo{margin-top:-62px}
html body .pf-hero .pf-photo .ph.xl,html body .pf-hero .pf-photo .wl-photo>*:first-child{width:116px!important;height:116px!important}
html body .pf-hero .pf-top{padding:0 22px}
html body .pf-hero .pf-top .pf-edit{margin-top:10px}
html body .pf-hero .pf-main{padding:2px 22px 0;gap:4px 24px}
html body .pf-hero .pf-id h1{font-size:1.6rem;line-height:1.15;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
html body .pf-hero .pf-id .rh-kick{font-size:.68rem}
html body .pf-hero .pf-hl{font-size:.95rem;line-height:1.35;margin:4px 0}
html body .pf-hero .pf-loc,html body .pf-hero .pf-tags,html body .pf-hero .pf-conn{margin:2px 0;font-size:.88rem}
html body .pf-hero .pf-tags{display:inline-block;margin-right:10px}
html body .pf-hero .pf-orgs{gap:6px;padding-top:0;min-width:230px}
html body .pf-page .pf-hero .pf-acts{padding:10px 0 2px;margin:8px 22px 0}
html body .pf-hero .pf-links{padding:2px 22px 12px}
html body .pf-hero .pf-links .btn,html body .pf-hero .pf-links a{padding-top:5px;padding-bottom:5px}
html body .pf-hero>.pf-acts:last-child{padding-bottom:12px}
html body .pf-hero .ap-roles,html body .pf-hero .ap-head{padding-top:10px;padding-bottom:10px}
/* photo badge and "Ready to recon" tag sit clear of the photo, name and kicker */
html body .pf-hero .pf-top{margin-bottom:14px}
html body .pf-hero .av-otw-tag,html body .pf-hero .pf-photo .av-otw-tag{bottom:-14px!important;font-size:.58rem;padding:1px 9px}
html body .pf-hero .pf-main{padding-top:10px}

/* v2.0.28 side-rail ads: picture on top, text below at full width, a bit taller */
html body :is(.side-rail,.f-right,.f-left,.ng-right,.jh-right,.jf-side,.ln-rail) .card.ad-card.has-creative:not(.banner){display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"lbl" "pic" "txt" "cta"!important;gap:10px!important;padding:14px!important}
html body :is(.side-rail,.f-right,.f-left,.ng-right,.jh-right,.jf-side,.ln-rail) .card.ad-card.has-creative:not(.banner)>:is(.ad-creative-link,.ad-creative){grid-area:pic!important;width:100%!important;max-width:none!important;border-radius:12px;overflow:hidden}
html body :is(.side-rail,.f-right,.f-left,.ng-right,.jh-right,.jf-side,.ln-rail) .card.ad-card.has-creative:not(.banner) :is(img.ad-creative,video.ad-creative,.f-yt.ad-creative,.f-yt-frame,.ad-creative-link img){width:100%!important;height:auto!important;aspect-ratio:4/3!important;max-height:none!important;object-fit:cover}
html body :is(.side-rail,.f-right,.f-left,.ng-right,.jh-right,.jf-side,.ln-rail) .card.ad-card.has-creative:not(.banner)>.ad-body{grid-area:txt!important;align-self:start!important;max-width:none!important;min-width:0}
html body :is(.side-rail,.f-right,.f-left,.ng-right,.jh-right,.jf-side,.ln-rail) .card.ad-card.has-creative:not(.banner)>.ad-body b{display:block;font-size:1rem;line-height:1.25;overflow:visible;-webkit-line-clamp:unset;overflow-wrap:normal;word-break:normal}
html body :is(.side-rail,.f-right,.f-left,.ng-right,.jh-right,.jf-side,.ln-rail) .card.ad-card.has-creative:not(.banner)>.ad-body p{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.82rem;line-height:1.4;margin:4px 0 0;overflow-wrap:normal;word-break:normal}
html body :is(.side-rail,.f-right,.f-left,.ng-right,.jh-right,.jf-side,.ln-rail) .card.ad-card.has-creative:not(.banner)>:is(.btn,.ad-cta){grid-area:cta!important;justify-self:stretch!important;align-self:start!important;text-align:center;justify-content:center;margin:0!important}

/* v2.0.29 middle column scrolls on its own; sidebars and the page stay put */
html body .mid-pane{overflow-y:auto!important;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;align-self:start;padding-bottom:28px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}
html body .mid-pane::-webkit-scrollbar{display:none}
html body .mid-pane :is(.side-rail,.f-right,.ln-rail){top:8px!important}
/* v2.0.29 fix: a fixed-height middle column must not stretch its cards */
html body .mid-pane{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-content:flex-start!important;gap:14px}
html body .mid-pane>*{flex:none!important;min-height:0;align-self:stretch}
html body .mid-pane.ng-main>*,html body .mid-pane.f-mid>*{height:auto!important}
/* v2.0.30 middle column: rows keep their natural height inside the scrolling pane */
html body .mid-pane{align-content:start!important;grid-auto-rows:max-content!important;justify-content:stretch}
html body .mid-pane>*{flex:none!important;min-height:0}
/* v2.0.30 profile card: employer and school names wrap on word breaks instead of cutting off */
html body .jh-left .jh-orgs .pf-org{align-items:flex-start;gap:9px}
html body .jh-left .jh-orgs b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:.84rem!important;line-height:1.25;overflow-wrap:break-word!important}
html body .jh-left .jh-orgs .pf-org>:first-child{flex:none;width:30px;height:30px}
html body .jh-left .jh-orgs .pf-org>:first-child img{width:100%;height:100%;object-fit:contain}

/* v2.0.32 sidebars never cut off at the bottom when the page is locked: a tall sidebar scrolls inside itself (no scroll bar) */
html.pane-lock body .f-left,html.pane-lock body .f-right,html.pane-lock body .ng-left,html.pane-lock body .ng-right,html.pane-lock body .ln-rail{max-height:calc(100vh - var(--head-h,64px) - 76px)!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:20px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)}
html.pane-lock body :is(.f-left,.f-right,.ng-left,.ng-right,.ln-rail)::-webkit-scrollbar{display:none}
html.pane-lock body :is(.f-left,.f-right,.ng-left,.ng-right,.ln-rail)>*{flex:none}

/* People you may know in the side column: four people, photo and name only */
html body .f-side.f-ppl .f-person{display:flex;align-items:center;gap:10px;padding:7px 0!important}
html body .f-side.f-ppl .f-person .btn,html body .f-side.f-ppl .f-person .hl,html body .f-side.f-ppl .f-person small{display:none!important}
html body .f-side.f-ppl .f-person>div{font-weight:700;font-size:.92rem;min-width:0}
html body .f-side.f-ppl .f-person:nth-of-type(n+5){display:none!important}

/* v2.0.33 person cards: narrower and taller (portrait) everywhere */
html body .ng-pc{width:190px;min-height:300px;flex:none}
html body .ng-pgrid{grid-template-columns:repeat(auto-fill,190px)!important;justify-content:start;gap:14px!important}
html body .ng-pgrid.cm-blist{grid-template-columns:repeat(auto-fill,190px)!important}
html body .ng-pgrid>.ng-pc{width:190px}
html body .ng-pc .ng-pc-act{margin-top:auto;width:100%;padding:0 14px}
html body .ng-pc .ng-pc-act .btn{width:100%;justify-content:center}
html body .ng-pc .ng-pc-note{padding-top:8px}
html body .ng-invc{min-height:340px}

/* v2.0.34 phones: member and own profile headers stay inside the screen */
@media (max-width:720px){
  html body .mp-head{grid-template-columns:minmax(0,1fr)!important;gap:0!important;justify-items:stretch}
  html body .mp-head>*{min-width:0;max-width:100%}
  html body .mp-head .mp-av{margin:-56px 0 0 16px!important;position:relative;z-index:2}
  html body .mp-head .mp-av>*:first-child{width:104px!important;height:104px!important}
  html body .mp-head .mp-main{padding:10px 16px 0!important;min-width:0}
  html body .mp-head .mp-main h1{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:1.45rem;line-height:1.15;overflow-wrap:anywhere}
  html body .mp-head .mp-main h1>*{max-width:100%;flex:0 1 auto}
  html body .mp-head .mp-main :is(.mp-hl,.dim,p){overflow-wrap:break-word;max-width:100%}
  html body .mp-head .mp-act{padding:12px 16px 18px!important;flex-wrap:wrap}
  html body .mp-head .pf-orgs.inline{flex-direction:column;gap:8px}
  html body .mp-head .mp-cover:has(img),html body .pf-hero .pf-cover:has(img){height:auto!important;max-height:none!important}
  html body .mp-head .mp-cover img,html body .pf-hero .pf-cover img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
  html body .pf-hero .pf-main{padding:2px 16px 0!important;min-width:0}
  html body .pf-hero .pf-id h1{flex-wrap:wrap;overflow-wrap:anywhere}
  html body .pf-hero .pf-orgs{min-width:0;max-width:100%}
  html body .pf-hero :is(.pf-hl,.pf-loc,.pf-conn){overflow-wrap:break-word;max-width:100%}
}

/* v2.0.34 phones and tablets: the wide-screen column layouts fall back to one column (they were overriding the phone rules) */
@media (max-width:1060px) and (min-width:901px){
  html body .jh-grid.jh-3{grid-template-columns:250px minmax(0,1fr)}
  html body .jh-grid.jh-3>.jh-right{grid-column:1/-1}
}
@media (max-width:900px){
  html body .jh-grid.jh-3,html body .jh-grid.jh-frame:has(.board),html body .split,html body .cm-ccols,html body .ng-grid:has(.cm-ccols),html body .cpf-bld .bld-grid,html body .cpf-grid.cpf-bld{grid-template-columns:minmax(0,1fr)!important}
  html body .jh-grid.jh-3>.jh-right{grid-column:auto}
}
/* v2.0.36 phones: tracker board is one full-width column per stage, empty stages stay short */
@media (max-width:560px){
  html body .jh-frame .board,html body .jh-framed .board{grid-template-columns:minmax(0,1fr)!important;gap:10px}
  html body .jh-frame .board .col{min-height:0!important;height:auto!important}
  html body .jh-frame .board .col:not(:has(.card,.jobcard,.kcard)){padding-bottom:6px}
  html body .jh-framed .stats,html body .jh-framed .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* v2.0.37 person cards: full name always shown (wraps), badges sit on their own centred line */
html body .ng-pc-nm{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 5px}
html body .ng-pc-nm>b{flex:0 0 100%;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;text-align:center;line-height:1.25}
/* v2.0.37 iPad: footer dropdown menus open as a centred bottom sheet so they can never run off the screen edge */
@media (min-width:641px) and (max-width:1280px){
  html body .rf-dd .rf-menu,html body .rf-dd:first-child .rf-menu,html body .rf-dd:last-child .rf-menu{position:fixed;left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 32px));z-index:200}
}
/* v2.0.39 Connections page: LinkedIn-style list of people you are connected with (photo, name, headline, connected date, Message, menu) */
html body .ng-conn-list.ng-clist{display:block!important;padding:0;margin-top:6px}
html body .ng-crow{display:flex;align-items:center;gap:14px;padding:12px 6px;border-top:1px solid var(--line)}
html body .ng-crow:first-child{border-top:0}
html body .ng-crow[hidden]{display:none}
html body .ng-crow-av{flex:none;line-height:0;border-radius:50%}
html body .ng-crow-av .av,html body .ng-crow-av img{width:72px!important;height:72px!important}
html body .ng-crow-main{flex:1 1 auto;min-width:0;display:grid;gap:2px;color:var(--text)!important;text-decoration:none!important}
html body .ng-crow-nm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font:700 1rem/1.25 var(--hfont)}
html body .ng-crow-nm b{overflow-wrap:anywhere}
html body .ng-crow-nm .tbadge{font-size:.66rem}
html body .ng-crow-hl{font-size:.9rem;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .ng-crow-when{color:var(--dim);font-size:.82rem}
html body .ng-crow-act{flex:none;display:flex;align-items:center;gap:6px}
html body .ng-crow-act .ng-msg{border-radius:999px;padding:6px 16px;height:auto;min-height:0;font-weight:600}
@media (max-width:560px){
  html body .ng-crow{gap:10px;align-items:flex-start}
  html body .ng-crow-av .av,html body .ng-crow-av img{width:56px!important;height:56px!important}
  html body .ng-crow-act{flex-direction:column-reverse;align-items:flex-end}
}
/* rail "People you may know": an X removes the suggestion */
html body .f-person{position:relative}
html body .f-person .f-px{flex:none;margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--dim);cursor:pointer}
html body .f-person .f-px:hover{background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text)}
html body .f-person .f-px .ico{width:15px;height:15px}
html body .f-side.f-ppl .f-person .f-px{display:grid!important}
@media (max-width:560px){
  html body .ng-crow{flex-wrap:wrap}
  html body .ng-crow-main{flex:1 1 calc(100% - 70px)}
  html body .ng-crow-act{flex:0 0 100%;flex-direction:row;justify-content:flex-end;padding-left:66px}
  html body .ng-crow-hl{-webkit-line-clamp:3}
}
@media (max-width:560px){
  html body .ng-crow{display:grid;grid-template-columns:60px minmax(0,1fr);gap:4px 12px;align-items:start}
  html body .ng-crow-main{flex:none}
  html body .ng-crow-act{grid-column:1/-1;padding-left:0}
  html body .ng-crow-av,html body .ng-crow-av *{max-width:60px;max-height:60px}
}
/* v2.0.40 Ready to recon: LinkedIn-style green photo frame with a curved #READYTORECON band (replaces the glow ring and pill tag) */
html body .av-otw::before,html body .av-otw::after,html body .wl-photo.av-otw-own::after{display:none!important;content:none!important}
html body .av-otw-tag{display:none!important}
html body .nav-av.av-otw,html body .wl-photo.av-otw{position:relative;overflow:visible}
html body .otw-frame{position:absolute;left:-7%;top:-7%;width:114%;height:114%;pointer-events:none;z-index:3;overflow:visible}
html body .otw-frame .otw-txt{font-family:var(--hfont),system-ui,sans-serif;paint-order:normal}
html body .wl-photo.av-otw-own{box-shadow:none!important}
html body .pf-hero .pf-photo .wl-photo.av-otw-own{box-shadow:none!important}
/* v2.0.40 mutual connections like LinkedIn: small round photo, "Name and N other mutual connections" (wraps, never cut off) */
html body .ng-mutual{align-items:center;gap:8px;font-size:.84rem}
html body .ng-mutual>span:last-child{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-align:left}
html body .ng-pc .ng-mutual{justify-content:center;text-align:left}
html body .ng-mutual .nav-av{width:24px!important;height:24px!important;border-radius:50%;overflow:hidden}
html body .mp-mut{margin:6px 0 0}
html body .mp-mut .ng-mutual{color:var(--dim)}
/* v2.0.40 Premium "People hiring for ..." strip */
html body .hp-card{padding:12px 14px 14px;overflow:hidden}
html body .hp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
html body .hp-kick{display:inline-flex;align-items:center;gap:6px;font:700 .82rem/1 var(--hfont);color:#b7791f}
html body .hp-kick .ico{width:14px;height:14px}
html body .hp-title{font-size:1.02rem;line-height:1.3;color:var(--text);margin-top:4px}
html body .hp-ctl{display:flex;align-items:center;gap:6px;flex:none}
html body .hp-ctl .ng-arr{position:static!important;transform:none!important;width:32px;height:32px;border-radius:50%;margin:0}
html body .hp-x{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--text);background:transparent;color:var(--text);cursor:pointer}
html body .hp-x .ico{width:15px;height:15px}
html body .hp-card .ng-car{display:block}
html body .hp-track{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
html body .hp-track::-webkit-scrollbar{display:none}
html body .hp-item{flex:0 0 min(300px,82%);scroll-snap-align:start;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
html body .hp-av{line-height:0}
html body .hp-main{min-width:0;display:grid;gap:5px}
html body .hp-role{font:700 .95rem/1.25 var(--hfont);color:var(--text)!important;text-decoration:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .hp-co{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--dim);min-width:0}
html body .hp-co span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .hp-co img,html body .hp-co i{flex:none;width:20px;height:20px;border-radius:4px;object-fit:cover;display:grid;place-items:center;font:700 .7rem/1 var(--hfont);font-style:normal;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
html body .hp-view{border-radius:999px;padding:5px 16px;height:auto;min-height:0;font-weight:600;border-color:var(--accent);color:var(--accent)}
/* v2.0.40 Spotlight ad as a company card (banner, your photo + company logo, greeting headline, outline button) */
html body .ad-spot{padding:0 0 16px;gap:0;justify-items:stretch;text-align:center;background:var(--surface)}
html body .ad-spot::before{display:none}
html body .ad-spot-cover{position:relative;height:84px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 70%,#0b1020),color-mix(in srgb,var(--accent2) 75%,#0b1020) 60%,color-mix(in srgb,#22d3ee 55%,var(--accent)));overflow:hidden}
html body .ad-spot-cover.has-img img{width:100%;height:100%;object-fit:cover;display:block}
html body .ad-spot-tag{position:absolute;top:8px;right:10px;padding:2px 9px;border-radius:6px;background:rgba(255,255,255,.88);color:#334155;font:600 .72rem/1.5 var(--hfont)}
html body .ad-spot-pair{justify-content:center;gap:12px;margin-top:-30px;position:relative;z-index:2}
html body .ad-spot-pair .nav-av,html body .ad-spot-pair .nav-av img{width:64px!important;height:64px!important;border-radius:50%}
html body .ad-spot-pair .nav-av{border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.25)}
html body .ad-spot-logo{width:64px!important;height:64px!important;border-radius:8px!important;border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.25);object-fit:cover;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:grid;place-items:center;font:700 1.4rem var(--hfont)}
html body .ad-spot-logo .ico{width:26px;height:26px}
html body .ad-spot-h{display:block;margin:12px 16px 0;font:700 1rem/1.35 var(--hfont)}
html body .ad-spot-p{margin:6px 16px 0}
html body .ad-spot-cta{margin:14px 16px 0;justify-self:stretch;border-radius:999px;background:transparent!important;color:var(--accent)!important;border:1.5px solid var(--accent)!important;font-weight:700;padding:8px 0;height:auto;box-shadow:none!important}
html body .ad-spot-cta:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)!important}
/* v2.0.41 follow a company */
html body .cp-follow-box{display:grid;justify-items:center;gap:4px;margin-left:auto}
html body .cp-follow{border-radius:999px;padding:7px 22px;height:auto;min-height:0;font-weight:700;background:transparent!important;color:var(--accent)!important;border:1.5px solid var(--accent)!important;box-shadow:none!important}
html body .cp-follow.on{background:color-mix(in srgb,var(--accent) 12%,transparent)!important}
html body .cp-followers{color:var(--dim);font-size:.78rem}
/* v2.0.41 #ReadyToRecon frame: see-through green ring like LinkedIn, photo sits inside it, no second gold ring around it */
html body .prem-av:has(.av-otw,.otw-frame){background:none!important;box-shadow:none!important;padding:0!important;animation:none!important}
html body .av-otw>img,html body .wl-photo.av-otw>:first-child:not(.otw-frame){transform:scale(.88);border-radius:50%}
html body .av-otw,html body .wl-photo.av-otw-own{box-shadow:none!important;background:transparent!important}
html body .mp-av .nav-av.av-otw{box-shadow:none!important}
html body .otw-frame{filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}
/* v2.0.42 frame geometry: ring hugs the photo, band overlaps its lower edge, no white halo */
html body .otw-frame{left:-6%!important;top:-6%!important;width:112%!important;height:112%!important;filter:none!important}
html body .av-otw>img,html body .wl-photo.av-otw>:first-child:not(.otw-frame){transform:scale(.9)!important}
html body .nav-av.av-otw,html body .wl-photo.av-otw,html body .wl-photo.av-otw-own{box-shadow:none!important;border:0!important;outline:0!important}
html body .wl-photo.av-otw-own::before,html body .wl-photo.av-otw-own::after{display:none!important;content:none!important}
/* v2.0.41 ready-to-recon ring sits on the photo edge (translucent like LinkedIn) instead of floating outside it */
html body .otw-frame{left:0!important;top:0!important;width:100%!important;height:100%!important}
html body .otw-frame .otw-txt{font-family:var(--hfont),system-ui,sans-serif}
/* v2.0.42 profile photo with the ready-to-recon ring: no extra gradient halo around it, the ring is the frame */
html body .mprof .mp-av:has(.av-otw){background:none!important;padding:0!important;box-shadow:none!important}
html body .mprof .mp-av .nav-av.av-otw{box-shadow:none!important}
html body .pf-hero .pf-photo:has(.av-otw){background:none!important;box-shadow:none!important}
/* v2.0.43 Premium hiring strip for free members: blurred teaser with an upgrade prompt */
html body .hp-card.locked{position:relative}
html body .hp-card.locked .hp-track,html body .hp-card.locked .hp-ctl .ng-arr{filter:blur(7px);pointer-events:none;user-select:none;opacity:.85}
html body .hp-lock{position:absolute;left:0;right:0;bottom:0;top:58px;display:grid;place-items:center;padding:10px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 25%,transparent),color-mix(in srgb,var(--surface) 65%,transparent))}
html body .hp-lock-in{display:grid;justify-items:center;gap:8px;text-align:center;max-width:420px}
html body .hp-lock-in b{font:700 1rem/1.3 var(--hfont)}
html body .hp-lock-in span{color:var(--dim);font-size:.86rem;line-height:1.4}
html body .hp-up{border-radius:999px;padding:8px 22px;height:auto;min-height:0;font-weight:700;background:linear-gradient(135deg,#f6c453,#d99a1c)!important;color:#2b1d00!important;border:0!important;display:inline-flex;gap:6px;align-items:center}
html body .hp-up .ico{width:15px;height:15px}
@media (max-width:560px){html body .hp-lock{top:74px}}
html body .hp-card.locked{min-height:210px}
@media (max-width:560px){html body .hp-card.locked{min-height:290px}}
html body .hp-lock{top:auto;height:calc(100% - 66px);bottom:0}
@media (max-width:560px){html body .hp-lock{height:calc(100% - 96px)}}
/* v2.0.45 the upload button stays above the ready-to-recon ring */
html body .wl-photo .wl-cam{z-index:6!important;right:-3px!important;bottom:-3px!important}
html body .wl-photo.av-otw-own .otw-frame{z-index:3}
/* v2.0.46 bolder ring: brand gradient with a soft glow; upload button moves to the top right of the photo */
html body .otw-frame{filter:drop-shadow(0 0 3px rgba(124,58,237,.55)) drop-shadow(0 0 7px rgba(37,99,235,.35))}
html body .wl-photo.av-otw-own .wl-cam{top:4px!important;bottom:auto!important;right:-6px!important;width:30px;height:30px;z-index:6!important}
html body .wl-photo.av-otw-own .wl-cam svg{width:14px;height:14px}
/* v2.0.49 smaller upload button on the profile photo */
html body .wl-photo.av-otw-own .wl-cam,html body .wl-photo .wl-cam{width:24px!important;height:24px!important;border-width:2px!important}
html body .wl-photo .wl-cam svg{width:12px!important;height:12px!important}
/* v2.0.51 small #ReadyToRecon tag (brand gradient) next to headlines, in the connections list and in Messaging */
html body .rtr-tag{display:inline-flex;align-items:center;margin-left:8px;padding:1px 8px;border-radius:999px;font:700 .68rem/1.5 var(--hfont);letter-spacing:.02em;color:#fff;white-space:nowrap;background:linear-gradient(120deg,#22d3ee,#2563eb 45%,#7c3aed 80%,#ec4899);vertical-align:middle;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}
html body .rtr-tag.rtr-b{display:flex;margin:6px auto 0;width:max-content}
html body .rtr-tag.rtr-s{margin-left:6px;padding:0 7px;font-size:.62rem}
html body .mc-hello .rtr-tag{margin:4px 0 0}
html body .ng-crow-hl .rtr-tag{margin-left:8px}
/* v2.0.51 "Your network" side menu: more compact, same width */
html body .ng-man{padding:8px 4px 4px}
html body .ng-man h2{font-size:.9rem;margin:0 8px 3px}
html body .ng-man-list{gap:0}
html body .ng-man-row{gap:8px;padding:3px 6px!important;min-height:0;font-size:.8rem;border-radius:8px}
html body .ng-man-ic{width:22px;height:22px;border-radius:7px}
html body .ng-man-ic .ico{width:13px;height:13px}
html body .ng-man-l{line-height:1.15}
html body .ng-man-l small{font-size:.64rem}
html body .ng-man-n{font-size:.78rem}
html body .ng-man-row.on::before{top:6px;bottom:6px}
/* v2.0.51 Groups page: LinkedIn-style list (Your groups / Requested / Discover) with a "Groups you might be interested in" side card */
html body .gr-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:900px){html body .gr-wrap{grid-template-columns:minmax(0,1fr)}}
html body .gr-main{padding:0 18px 12px;position:relative;overflow:hidden}
html body .gr-main::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),#22d3ee)}
html body .gr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-top:6px}
html body .gr-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
html body .gr-tabs::-webkit-scrollbar{display:none}
html body .gr-tab{position:relative;border:0;background:none;color:var(--dim);font:600 .92rem/1 var(--hfont);padding:14px 12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
html body .gr-tab:hover{color:var(--text)}
html body .gr-tab.on{color:var(--accent)}
html body .gr-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
html body .gr-n{font-style:normal;font-size:.68rem;font-weight:700;background:var(--accent);color:#fff;border-radius:999px;padding:1px 6px}
html body .gr-create{border-radius:999px;padding:6px 18px;height:auto;min-height:0;font-weight:700;border:1.5px solid var(--accent)!important;color:var(--accent)!important;background:transparent!important;white-space:nowrap}
html body .gr-create:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)!important}
html body .gr-search{display:flex;align-items:center;gap:8px;margin:12px 0 4px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
html body .gr-search .ico{width:15px;height:15px;color:var(--dim)}
html body .gr-search input{border:0!important;background:transparent!important;box-shadow:none!important;flex:1;min-width:0}
html body .gr-list{display:grid}
html body .gr-row{display:flex;align-items:center;gap:14px;padding:12px 6px;border-bottom:1px solid var(--line);border-radius:10px;transition:background .15s}
html body .gr-row:last-of-type{border-bottom:0}
html body .gr-row:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
html body .gr-ic{flex:none;line-height:0;border-radius:12px;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
html body .gr-ic .cm-tile{border-radius:12px}
html body .gr-info{flex:1;min-width:0;display:grid;gap:3px}
html body .gr-name{color:var(--text)!important;text-decoration:none!important}
html body .gr-name b{font:700 1rem/1.25 var(--hfont);overflow-wrap:anywhere}
html body .gr-name:hover b{color:var(--accent)}
html body .gr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--dim);font-size:.8rem}
html body .gr-meta>span{display:inline-flex;align-items:center;gap:4px}
html body .gr-meta .ico{width:13px;height:13px}
html body .gr-pend{color:#b7791f;font-weight:600}
html body .gr-empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:30px 10px;color:var(--dim)}
html body .gr-empty .ico{width:30px;height:30px;color:var(--accent)}
html body .gr-empty b{color:var(--text);font:700 1rem var(--hfont)}
html body .gr-foot{margin:12px 0 2px;text-align:center;color:var(--dim);font-size:.88rem}
html body .gr-side{padding:14px 16px 6px}
html body .gr-side h3{font:700 .98rem/1.3 var(--hfont);margin:0 0 6px}
html body .gr-srow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
html body .gr-srow .gr-name b{font-size:.92rem}
html body .gr-srow .btn{border-radius:999px;padding:5px 16px;height:auto;min-height:0;font-weight:700}
html body .gr-srow .btn:not(.ghost){background:transparent!important;color:var(--accent)!important;border:1.5px solid var(--accent)!important}
html body .gr-grid-note{display:none}
html body .gr-wrap{grid-template-columns:minmax(0,1fr) 270px}
@media (max-width:1100px){html body .gr-wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){html body .gr-tab{padding:14px 8px;font-size:.86rem}html body .gr-create{padding:5px 12px;font-size:.85rem}html body .gr-main{padding:0 12px 10px}}

/* v2.0.52 compact manage-notifications card */
html body .n-prefs{padding:0 12px!important;margin-top:8px!important}
html body .n-pref{padding:7px 0!important;font-size:.8rem!important;min-height:0!important}
html body .n-pref .ico{width:14px!important;height:14px!important}

/* v2.0.53 update bar */
html body .v2-updating{background:linear-gradient(90deg,#2563eb,#7c3aed)!important;bottom:18px!important;font-weight:600}

/* v2.0.53 compact invite card: one row for link + buttons, gradient accent keeps it noticeable */
html body .ng-right .fc-invite{display:grid!important;gap:6px!important;padding:10px 12px 10px 14px!important;position:relative;overflow:hidden;border:1px solid rgba(124,58,237,.28)!important;background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.10))!important}
html body .ng-right .fc-invite::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#22d3ee,#2563eb,#7c3aed,#ec4899)}
html body .ng-right .fc-invite .ng-kick{font-size:.66rem!important}
html body .ng-right .fc-invite h3{font-size:.92rem!important;margin:0!important}
html body .ng-right .fc-invite .dim{font-size:.76rem!important;line-height:1.3}
html body .ng-right .fc-invite .fc-link{display:flex!important;flex-wrap:nowrap!important;gap:6px!important}
html body .ng-right .fc-invite input.input{flex:1 1 0;min-width:0!important;width:auto!important;height:30px!important;padding:0 8px!important;font-size:.76rem!important}
html body .ng-right .fc-invite .btn{height:30px!important;padding:0 9px!important;font-size:.76rem!important;gap:4px!important;white-space:nowrap}
html body .ng-right .fc-invite .btn .ico{width:13px!important;height:13px!important}
html body .fc-invite .fc-imp{justify-self:start;height:26px!important;padding:0 8px!important;font-size:.74rem!important;margin-top:2px}

/* v2.0.53 employer page: one compact verified + reply-time card */
html body .emp-ok-c{padding:12px 14px!important}
html body .emp-ok-c .emp-ok-top{align-items:center!important;gap:12px!important}
html body .emp-ok-c .emp-ok-top>div{flex:1;min-width:0}
html body .emp-ok-c .emp-ok-ic{width:34px!important;height:34px!important;border-radius:11px!important}
html body .emp-ok-c .emp-ok-ic .ico{width:18px!important;height:18px!important}
html body .emp-ok-c h2{font-size:1rem!important;margin:0!important}
html body .emp-ok-c .emp-ok-top p{font-size:.8rem!important;margin:2px 0 0!important;line-height:1.35}
html body .emp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
html body .emp-chip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:.8rem;text-decoration:none}
html body .emp-chip b{font:700 .95rem/1 var(--hfont)}
html body .emp-chip small{color:var(--muted);font-size:.76rem}
html body .emp-chip .ico{width:13px;height:13px;align-self:center;color:var(--good)}
html body .emp-chip[hidden]{display:none}
@media (max-width:560px){html body .emp-ok-c .emp-ok-top{flex-wrap:wrap}}

/* v2.0.53 Hiring pages (company, job posts, applicants, recruiter tools): tighter spacing, same width */
html body .hx-hire .hx-menu{padding:6px 8px!important;gap:0!important}
html body .hx-hire .hx-menu a{padding:5px 8px!important;font-size:.8rem!important;gap:8px!important;border-radius:8px!important}
html body .hx-hire .hx-menu a .ico{width:15px!important;height:15px!important}
html body .hx-hire .hx-mt{font-size:.66rem!important;margin:2px 0!important}
html body .hx-hire .hx-mg{font-size:.62rem!important;margin:6px 0 1px!important}
html body .hx-hire .emp-tabs{padding:3px!important;gap:3px!important}
html body .hx-hire .emp-tabs a{padding:5px 12px!important;font-size:.82rem!important;min-height:0!important}
html body .hx-hire .emp-body{gap:10px!important}
html body .hx-hire .emp-body>.spread h2{font-size:1.15rem!important}
html body .hx-hire .emp-body>.spread .dim{font-size:.8rem!important;margin:0!important}
html body .hx-hire .emp-body .btn:not(.sm){padding:6px 14px!important;font-size:.84rem!important;min-height:0!important}
html body .hx-hire .emp-post{padding:10px 14px!important;gap:8px!important}
html body .hx-hire .emp-post h3{font-size:.95rem!important}
html body .hx-hire .emp-post .dim{font-size:.8rem!important;margin:2px 0 0!important}
html body .hx-hire .emp-post .chips{margin-top:5px!important}
html body .hx-hire .emp-post .chip{padding:2px 8px!important;font-size:.72rem!important}
html body .hx-hire .emp-app{padding:10px 14px!important}
html body .hx-hire .sx-card{padding:10px 12px!important;gap:6px!important}
html body .hx-hire .sx-card h3{font-size:.95rem!important;margin:0!important}
html body .hx-hire .sx-link{padding:6px 9px!important;font-size:.8rem!important;border-radius:9px!important}
html body .hx-hire .sx-card .stack{gap:5px!important}
html body .hx-hire .ad-mini,html body .hx-hire .hx-left .card.ad{padding:10px 12px!important}

/* v2.0.55 company hero: logo, name, facts and buttons share one compact block */
html body .emp-hero-band{display:none!important}
html body .emp-hero-main{padding:12px 16px!important;gap:12px!important;align-items:center!important;flex-wrap:nowrap!important}
html body .emp-hero-lw{margin-top:0!important}
html body .emp-hero-logo{width:56px!important;height:56px!important;border-radius:14px!important;border-width:2px!important}
html body .emp-hero-init{font-size:1.3rem!important}
html body .emp-hero-txt{padding-top:0!important;min-width:0!important;flex:1 1 0!important}
html body .emp-hero-name{gap:8px!important}
html body .emp-hero-name h2{font-size:1.15rem!important;margin:0!important}
html body .emp-facts{margin-top:3px!important;gap:2px 12px!important;font-size:.78rem!important}
html body .emp-facts .ico{width:13px!important;height:13px!important}
html body .emp-about{margin:3px 0 0!important;font-size:.78rem!important;-webkit-line-clamp:1!important}
html body .emp-hero-acts{padding-top:0!important;flex:none!important;flex-wrap:nowrap!important}
@media (max-width:760px){html body .emp-hero-main{flex-wrap:wrap!important}html body .emp-hero-txt{flex-basis:calc(100% - 70px)!important}html body .emp-hero-acts{flex-basis:100%}}
/* verified card: header and chips tighter */
html body .emp-ok-c{padding:9px 12px!important}
html body .emp-chips{margin-top:7px!important;gap:5px!important}
html body .emp-chip{padding:3px 9px!important}

/* v2.0.57 invite card fits its column: link on its own line, buttons share the next row */
html body .ng-right .fc-invite{grid-template-columns:minmax(0,1fr)!important;min-width:0!important}
html body .ng-right .fc-invite>*{min-width:0!important}
html body .ng-right .fc-invite .dim{white-space:normal!important;overflow-wrap:anywhere}
html body .ng-right .fc-invite .fc-link{flex-wrap:wrap!important}
html body .ng-right .fc-invite input.input{flex:1 1 100%!important;width:100%!important}
html body .ng-right .fc-invite .fc-link .btn{flex:1 1 0!important;justify-content:center}
html body .ng-right .fc-invite .fc-imp{justify-self:stretch!important;justify-content:center;width:100%}

/* v2.0.57 Interview Edge (#/interview) and the hiring kit's own-question form */
html body .iv{display:grid;gap:10px;max-width:100%}
html body .iv-bar{padding:10px 12px!important;display:grid;gap:8px;position:relative;overflow:hidden}
html body .iv-bar::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#22d3ee,#2563eb,#7c3aed,#ec4899)}
html body .iv-bar.busy{opacity:.7}
html body .iv-roles,html body .iv-cats{display:flex;flex-wrap:wrap;gap:6px}
html body .iv-roles .chip,html body .iv-cats .chip{padding:4px 11px!important;font-size:.78rem!important}
html body .iv-row2{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
html body .iv-drill{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;border:0!important}
html body .iv-prog{display:grid;gap:4px}
html body .iv-meter{height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
html body .iv-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#2563eb,#7c3aed);transition:width .3s}
html body .iv-tip,html body .iv-bar>small.dim{display:flex;align-items:center;gap:6px;font-size:.78rem}
html body .iv-bar .ico{width:14px;height:14px}
html body .iv-list{gap:6px!important}
html body .iv-q{padding:0!important;overflow:hidden}
html body .iv-top{display:flex;align-items:center;gap:10px;padding:8px 12px}
html body .iv-chk{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line2,var(--line));background:transparent;color:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
html body .iv-chk .ico{width:14px;height:14px}
html body .iv-chk.on{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:transparent;color:#fff}
html body .iv-qh{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--text);flex-wrap:wrap}
html body .iv-qh>b{flex:1 1 280px;font-size:.92rem;line-height:1.35}
html body .iv-qh>.ico{flex:none;width:16px;height:16px;color:var(--muted);transition:transform .15s;margin-left:auto}
html body .iv-q.open .iv-qh>.ico{transform:rotate(180deg)}
html body .iv-q.done .iv-qh>b{color:var(--muted)}
html body .iv-tags{display:flex;gap:5px;flex-wrap:wrap}
html body .iv-tag{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:99px;font-size:.68rem;font-weight:600;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--muted)}
html body .iv-tag .ico{width:11px;height:11px}
html body .iv-tag.hot{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#b45309}
html body .iv-tag.teams{background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(124,58,237,.18));color:var(--accent)}
html body .iv-det{display:none;padding:2px 14px 12px 46px;gap:8px}
html body .iv-q.open .iv-det{display:grid}
html body .iv-blk small{display:block;font:700 .66rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
html body .iv-blk p{margin:0;font-size:.86rem;line-height:1.45}
html body .iv-note{font-size:.84rem!important;min-height:64px;resize:vertical}
html body .iv-drill-q{font:700 1.1rem/1.35 var(--hfont);margin:0}
html body .iv-timer{font:700 1.4rem var(--hfont);color:var(--accent)}
html body .hx-add{display:grid;gap:8px;padding:12px 14px!important}
html body .hx-add h3{margin:0;font-size:.98rem}
html body .hx-add p{margin:0;font-size:.8rem}
html body .hx-add-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html body .hx-add-s{display:flex;align-items:center;gap:8px;font-size:.84rem}
html body .hx-add-l{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600}
html body .hx-add-l .ico{width:14px;height:14px}
html body .hx-own{align-items:center}
html body .hx-own-a{margin-left:auto;gap:4px;flex:none}
@media (max-width:560px){html body .iv-det{padding-left:14px}html body .hx-add-g{grid-template-columns:1fr}}

/* v2.0.59 Groups: card fills the middle column; only that column scrolls (side bars stay put) */
@media (min-width:901px){
  html body .ng-grid.ng-scrollmid{height:calc(100dvh - 128px);min-height:420px;overflow:hidden;align-items:stretch!important}
  html body .ng-grid.ng-scrollmid>.ng-left,html body .ng-grid.ng-scrollmid>.ng-right{overflow:hidden;align-self:start;max-height:100%}
  html body .ng-grid.ng-scrollmid>.ng-main{overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:16px}
  html body .ng-grid.ng-scrollmid>.ng-main::-webkit-scrollbar{display:none;width:0;height:0}
}
html body .gr-wrap{grid-template-columns:minmax(0,1fr)!important;width:100%}
html body .gr-main{width:100%;min-height:calc(100dvh - 330px)}
html body .gr-top{flex-wrap:nowrap}
html body .gr-tabs{flex:1 1 auto;min-width:0}
html body .gr-create{flex:none;margin-left:auto}
html body .gr-row{padding:14px 8px}
html body .gr-side{width:100%}
html body .gr-side .gr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:20px}
@media (max-width:560px){html body .gr-top{flex-wrap:wrap}html body .gr-create{margin:4px 0 8px}}

/* v2.0.60 Interview Edge on Home, job pages and the thank-you note */
html body .iv-home{display:grid;gap:8px;padding:12px 14px!important;position:relative;overflow:hidden}
html body .iv-home::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#22d3ee,#2563eb,#7c3aed,#ec4899)}
html body .iv-home-t{display:grid;gap:2px}
html body .iv-home-t b{font:700 .92rem/1.3 var(--hfont)}
html body .iv-home-q{margin:0;font-size:.82rem;line-height:1.4}
html body .iv-home-q small{display:block;font:700 .62rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
html body .iv-home-go{justify-self:start}
html body .iv-job{display:grid;gap:6px}
html body .iv-job h3{display:flex;align-items:center;gap:8px}
html body .iv-job-s{margin:0;font-size:.82rem}
html body .iv-job-l{margin:0;padding-left:20px;display:grid;gap:5px;font-size:.88rem}
html body .iv-job-l .iv-tag{margin-left:6px;vertical-align:middle}
html body .iv-job .btn{justify-self:start}
html body .iv-ty{display:grid;gap:8px;padding:12px 14px!important}
html body .iv-ty-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
html body .iv-ty-h h3{margin:0;font-size:1rem}
html body .iv-ty-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html body .iv-ty-out{font-size:.84rem!important;line-height:1.45;resize:vertical}
@media (max-width:760px){html body .iv-ty-g{grid-template-columns:1fr 1fr}}

/* v2.0.61 My applications (#/applications) and the employer's not-moving-forward dialogs */
html body .ap{display:grid;gap:10px}
html body .ap-chips{display:flex;flex-wrap:wrap;gap:6px}
html body .ap-chips .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px!important;font-size:.8rem!important}
html body .ap-n{font-style:normal;font-size:.68rem;font-weight:700;background:color-mix(in srgb,var(--text) 10%,transparent);border-radius:99px;padding:0 6px}
html body .ap-chips .chip.on .ap-n{background:rgba(255,255,255,.28)}
html body .ap-list{gap:8px!important}
html body .ap-card{padding:12px 14px!important;display:grid;gap:10px}
html body .ap-top{display:flex;align-items:center;gap:12px}
html body .ap-tile{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:700 1.1rem var(--hfont);color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed)}
html body .ap-info{flex:1;min-width:0;display:grid;gap:1px}
html body .ap-title{font:700 .98rem/1.3 var(--hfont);color:var(--text)!important;text-decoration:none!important;overflow-wrap:anywhere}
html body .ap-title:hover{color:var(--accent)!important}
html body .ap-pill{flex:none;padding:3px 11px;border-radius:99px;font-size:.74rem;font-weight:700;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--muted)}
html body .ap-pill.t-blue{background:color-mix(in srgb,#2563eb 15%,transparent);color:#2563eb}
html body .ap-pill.t-good{background:color-mix(in srgb,#16a34a 17%,transparent);color:#15803d}
html body .ap-pill.t-rose{background:color-mix(in srgb,#e11d48 13%,transparent);color:#be123c}
html body .ap-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
html body .ap-steps li{position:relative;display:grid;justify-items:center;gap:2px;text-align:center;font-size:.72rem;color:var(--muted)}
html body .ap-steps li::before{content:"";position:absolute;top:10px;left:-50%;width:100%;height:2px;background:color-mix(in srgb,var(--text) 12%,transparent)}
html body .ap-steps li:first-child::before{display:none}
html body .ap-steps li.on::before{background:linear-gradient(90deg,#2563eb,#7c3aed)}
html body .ap-dot{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid color-mix(in srgb,var(--text) 18%,transparent);color:#fff}
html body .ap-dot .ico{width:12px;height:12px}
html body .ap-steps li.on .ap-dot{background:linear-gradient(135deg,#2563eb,#7c3aed);border-color:transparent}
html body .ap-steps li.now .ap-dot{box-shadow:0 0 0 4px color-mix(in srgb,#2563eb 22%,transparent)}
html body .ap-steps li.end.t-interview .ap-dot,html body .ap-steps li.end.t-offer .ap-dot{background:linear-gradient(135deg,#22c55e,#16a34a)}
html body .ap-steps li.end.t-rejected .ap-dot{background:linear-gradient(135deg,#fb7185,#e11d48)}
html body .ap-steps li.end.t-closed .ap-dot{background:#94a3b8}
html body .ap-steps li.on b{color:var(--text)}
html body .ap-steps li small{font-size:.66rem}
html body .ap-msg{display:grid;gap:6px;justify-items:start;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--text) 5%,transparent);font-size:.84rem}
html body .ap-msg.t-blue{background:color-mix(in srgb,#2563eb 8%,transparent)}
html body .ap-msg.t-good{background:color-mix(in srgb,#16a34a 10%,transparent)}
html body .ap-msg.t-rose{background:color-mix(in srgb,#e11d48 7%,transparent)}
html body .ap-msg p{margin:0}
html body .ap-msg blockquote{margin:0;padding-left:10px;border-left:3px solid var(--line2,var(--line));color:var(--muted);font-style:italic}
@media (max-width:480px){html body .ap-top{flex-wrap:wrap}html body .ap-steps li b{font-size:.68rem}}

/* v2.0.62 Recon matches and the Jobs pages: less bulky, same page width */
html body .jh-me .jh-work{display:none!important}
html body .jh-cover{height:34px!important}
html body .jh-av{margin:-24px 0 0 14px!important}
html body .jh-av .nav-av{width:52px!important;height:52px!important}
html body .jh-me-txt{padding:6px 14px 10px!important;gap:1px!important}
html body .jh-me .jh-nm{font-size:.95rem!important}
html body .jh-me .jh-hl{font-size:.78rem!important;-webkit-line-clamp:2}
html body .jh-menu{padding:6px 8px!important;gap:0!important}
html body .jh-menu .jh-mi{padding:5px 8px!important;font-size:.8rem!important;gap:9px!important;min-height:0!important}
html body .jh-menu .jh-mi .ico{width:15px!important;height:15px!important}
html body .jh-menu .jh-mi-sep{margin:3px 8px!important}
html body .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-bottom:8px!important}
html body .stats .stat{display:flex!important;align-items:baseline;gap:7px;padding:6px 10px!important;border-radius:12px!important;min-width:0}
html body .stats .stat b{font-size:1rem!important;line-height:1}
html body .stats .stat span,html body .stats .stat small{font-size:.7rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .toolbar{flex-wrap:nowrap!important;gap:6px!important;margin-bottom:8px!important;align-items:center}
html body .toolbar .search{flex:1 1 140px!important;min-width:0!important}
html body .toolbar .search input{height:32px!important;font-size:.8rem!important}
html body .toolbar select.input,html body .toolbar .seg button{height:32px!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;font-size:.78rem!important}
html body .toolbar select.input{flex:0 1 112px;min-width:0;padding-left:8px!important}
html body .toolbar .seg{flex:none}
html body .toolbar .switch{flex:none;font-size:.78rem!important;gap:6px}
html body .list-col .list>*:not(.ad-card){padding-top:9px!important;padding-bottom:9px!important}
html body .list-col .list{gap:6px!important}
html body .list-col .list p,html body .list-col .list .dim{font-size:.78rem!important;line-height:1.35!important}
@media (max-width:1100px){html body .toolbar{flex-wrap:wrap!important}html body .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v2.0.63 guided Quick apply (applicant wizard) and the employer's application questions */
html body .qa-box{width:min(640px,calc(100vw - 24px))!important;max-width:640px!important}
html body .qa{display:grid;gap:12px;min-width:0}
html body .qa-top{display:flex;align-items:center;gap:10px}
html body .qa-bar{flex:1;height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
html body .qa-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#2563eb,#7c3aed);transition:width .25s}
html body .qa-top small{color:var(--muted);font-size:.76rem;white-space:nowrap}
html body .qa-job{font-size:.82rem;color:var(--muted)}
html body .qa-job b{font-weight:600}
html body .qa-h{margin:0;font:700 1rem/1.3 var(--hfont)}
html body .qa-s{margin:0;font-size:.82rem}
html body .qa-who{display:flex;align-items:center;gap:12px}
html body .qa-who div{display:grid;gap:1px;min-width:0}
html body .qa-who small{font-size:.78rem;overflow-wrap:anywhere}
html body .qa-opts{gap:8px!important}
html body .qa-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}
html body .qa-opt>div{flex:1;min-width:0;display:grid;gap:1px}
html body .qa-opt.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
html body .qa-doc{flex:none;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:#1e4d8f;color:#fff;font-weight:700}
html body .qa-radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line2,var(--line))}
html body .qa-opt.on .qa-radio{border-color:#16a34a;background:radial-gradient(circle,#16a34a 0 45%,transparent 50%)}
html body .qa-yn .chip{padding:5px 18px!important}
html body .qa-rv{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
html body .qa-rv p{margin:0;font-size:.9rem}
html body .qa-edit{background:none;border:0;color:var(--accent);font-weight:700;cursor:pointer;font-size:.84rem}
html body .qa-follow{display:flex;align-items:center;gap:10px;font-size:.88rem}
html body .qa-nav{justify-content:flex-end;gap:8px;margin-top:4px}
html body .qa-err{margin:0}
html body .qa textarea.input{font-size:.88rem}
html body .qa-ans{display:grid;gap:4px;margin:6px 0 2px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--text) 5%,transparent);font-size:.84rem}
html body .qa-ans div{display:grid;gap:0}
html body .qb{display:grid;gap:8px}
html body .qb-list{gap:8px!important}
html body .qb-row{display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:12px}
html body .qb-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html body .qb-line select{flex:1 1 140px;min-width:0}
html body .qb-req{display:inline-flex;align-items:center;gap:6px;font-size:.8rem}

/* v2.0.63 Recon matches: stats as plain text, a large search under them, filters on the next row */
html body .stats{display:flex!important;flex-wrap:wrap;gap:4px 22px!important;margin:2px 0 8px!important;padding:0 2px}
html body .stats .stat{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;display:inline-flex!important;align-items:baseline;gap:6px;overflow:visible}
html body .stats .stat::before,html body .stats .stat::after{display:none!important}
html body .stats .stat b{font-size:1.15rem!important;color:var(--accent)}
html body .stats .stat span,html body .stats .stat small{font-size:.78rem!important;white-space:normal;overflow:visible;text-overflow:clip;color:var(--muted)}
html body .toolbar{flex-wrap:wrap!important;gap:8px!important}
html body .toolbar .search{flex:1 1 100%!important;order:-1;height:42px;border-radius:999px}
html body .toolbar .search input{height:40px!important;font-size:.95rem!important}
html body .toolbar select.input{flex:1 1 110px!important}
html body .toolbar .seg{flex:none}
html body .list-col .list>*{min-width:0;max-width:100%}
html body .list-col .list *{overflow-wrap:anywhere}
html body .list-col .list .chips{flex-wrap:wrap}

/* v2.0.65 Recon matches: more room for the job list and the job. The greeting row is gone and the rows above the panels are tighter. */
html body .jh-framed>.page-head:has(~ .stats){display:none!important}
html body .jh-framed .stats{margin:0 0 4px!important}
html body .jh-framed .toolbar{margin-bottom:4px!important;gap:6px!important}
html body .jh-framed .toolbar .search,html body .jh-framed .toolbar .search input{height:36px!important}
html body .split{gap:10px}
html body .split>.list-col{padding-right:2px}

/* v2.0.66 profile card avatar: no overlap trick, so it can never poke out of the card */
html body .jh-me{padding:10px 0 12px!important;overflow:hidden}
html body .jh-me .jh-cover{display:none!important}
html body .jh-me .jh-av{margin:0 0 0 14px!important;position:relative;z-index:1;line-height:0}
html body .jh-me .jh-av .nav-av{width:56px!important;height:56px!important}
html body .jh-me .jh-me-txt{padding:8px 14px 0!important}
@media (max-width:900px){html body .jh-me{display:flex!important;align-items:center;gap:12px;padding:10px 14px!important}html body .jh-me .jh-av{margin:0!important}html body .jh-me .jh-me-txt{padding:0!important}}

/* v2.0.67 preview banner: one slim row */
html body .preview-banner{padding:8px 12px!important;gap:8px 14px!important;margin-bottom:6px!important;border-radius:14px!important}
html body .preview-banner>div:first-child{flex:1 1 280px;min-width:0}
html body .preview-banner b{font-size:.88rem}
html body .preview-banner p{margin:1px 0 0!important;font-size:.78rem!important;line-height:1.35}
html body .preview-banner .btn{padding:5px 12px!important;font-size:.8rem!important;min-height:0!important}
html body .preview-banner>div:last-child{display:flex;gap:6px;flex-wrap:nowrap}

/* v2.0.72 cover themes: chosen under Edit cover, shown on profile, member and people cards */
html body .cvt.cvt-recon-grid{background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 22px),linear-gradient(120deg,#0b1220,#1d3a8a 60%,#5b8cff)!important}
html body .cvt.cvt-signal{background:radial-gradient(circle at 70% 50%,rgba(91,140,255,.55),transparent 38%),radial-gradient(circle at 70% 50%,transparent 20%,rgba(91,140,255,.35) 21%,transparent 22%,transparent 34%,rgba(91,140,255,.3) 35%,transparent 36%),#0a0f1c!important}
html body .cvt.cvt-terminal{background:repeating-linear-gradient(0deg,rgba(52,211,153,.14) 0 2px,transparent 2px 6px),linear-gradient(120deg,#04110d,#0b2a20)!important}
html body .cvt.cvt-blue-hour{background:linear-gradient(120deg,#1e3a8a,#2563eb 50%,#38bdf8)!important}
html body .cvt.cvt-violet-drift{background:linear-gradient(120deg,#4c1d95,#7c3aed 55%,#c084fc)!important}
html body .cvt.cvt-sunset{background:linear-gradient(120deg,#7c2d12,#ea580c 45%,#fbbf24)!important}
html body .cvt.cvt-aurora{background:radial-gradient(circle at 20% 80%,rgba(52,211,153,.67),transparent 45%),radial-gradient(circle at 80% 20%,rgba(162,132,255,.8),transparent 50%),linear-gradient(120deg,#0b1220,#134e4a)!important}
html body .cvt.cvt-rose-quartz{background:linear-gradient(120deg,#fbcfe8,#f9a8d4 50%,#c4b5fd)!important}
html body .cvt.cvt-midnight{background:linear-gradient(120deg,#020617,#0f172a 55%,#1e293b)!important}
html body .cvt.cvt-waves{background:repeating-radial-gradient(circle at 0 120%,rgba(255,255,255,.22) 0 2px,transparent 2px 18px),linear-gradient(120deg,#0e7490,#155e75)!important}
html body .cvt.cvt-circuit{background:linear-gradient(90deg,rgba(52,211,153,.25) 2px,transparent 2px) 0 0/48px 48px,linear-gradient(0deg,rgba(52,211,153,.25) 2px,transparent 2px) 0 0/48px 48px,linear-gradient(120deg,#064e3b,#022c22)!important}
html body .cvt.cvt-diagonal{background:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 10px,transparent 10px 24px),linear-gradient(120deg,#be123c,#7c3aed)!important}
html body .cvt.cvt-dots{background:radial-gradient(rgba(255,255,255,.35) 2px,transparent 2.5px) 0 0/22px 22px,linear-gradient(120deg,#1d4ed8,#312e81)!important}
html body .cvt.cvt-paper{background:linear-gradient(120deg,#f1f5f9,#e2e8f0)!important}
html body .cvt.cvt-slate{background:linear-gradient(120deg,#334155,#1e293b)!important}
html body .cvt.cvt-mint{background:linear-gradient(120deg,#d1fae5,#a7f3d0)!important}
html body .cvt.cvt-diwali{background:radial-gradient(circle at 25% 40%,#fde68a,transparent 18%),radial-gradient(circle at 70% 30%,rgba(251,191,36,.67),transparent 14%),linear-gradient(120deg,#7c2d12,#c2410c 50%,#7e22ce)!important}
html body .cvt.cvt-winter{background:radial-gradient(rgba(255,255,255,.9) 1.5px,transparent 2px) 0 0/34px 34px,linear-gradient(120deg,#0c4a6e,#1e40af)!important}
html body .cvt.cvt-spring{background:radial-gradient(circle at 20% 30%,#fbcfe8,transparent 22%),radial-gradient(circle at 75% 60%,#bbf7d0,transparent 26%),linear-gradient(120deg,#ecfccb,#bae6fd)!important}
html body .cvt.cvt-stars-stripes{background:repeating-linear-gradient(90deg,#b3132b 0 28px,#fff 28px 56px)!important}
html body .cvt::after{display:none!important}
html body .cvt img{display:none}
.cvp-up{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 0 12px;border-bottom:1px solid var(--line)}
.cvp-up p{margin:2px 0 0;color:var(--muted);font-size:.86rem}
.cvp-cat{font:600 .7rem var(--font-head,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:12px 0 6px}
.cvp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.cvp-opt{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:6px 8px;cursor:pointer;background:var(--surface)}
.cvp-opt input{position:absolute;opacity:0;pointer-events:none}
.cvp-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--dim);flex:none}
.cvp-opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.cvp-opt:has(input:checked) .cvp-dot{border-color:var(--accent);background:radial-gradient(var(--accent) 0 45%,transparent 50%)}
.cvp-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.cvp-sw{flex:1;height:38px;border-radius:8px;min-width:0}
.cvp-n{font:600 .74rem var(--font-body,inherit);width:60px;line-height:1.15}
.cvp-prev{height:92px;border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--surface2)}
.cvp-prev img{width:100%;height:100%;object-fit:cover;display:block}
.cvp{max-height:60vh;overflow:auto;padding-right:2px}.cvp-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
/* v2.0.72 new profile layout (the Classic switch on your profile turns it off: html.pl-classic) */
html:not(.pl-classic) body .mprof .mp-head>.mp-cover{height:200px}
html:not(.pl-classic) body .mprof .mp-head .mp-av{margin:-86px 0 18px 28px}
html:not(.pl-classic) body .mprof .mp-head .mp-av>*:first-child{width:152px!important;height:152px!important}
html:not(.pl-classic) body .mprof .mp-head .mp-av .nav-av{box-shadow:0 0 0 5px var(--surface)}
html:not(.pl-classic) body .mprof .mp-main h1{font-size:1.75rem;line-height:1.15}
html:not(.pl-classic) body .mprof .mp-act .btn{border-radius:999px;padding:8px 18px}
html:not(.pl-classic) body .pf-hero .pf-cover{height:200px}
html:not(.pl-classic) body .pf-hero .pf-cover:not(:has(img)){height:200px}
html:not(.pl-classic) body .pf-hero .pf-photo{margin-top:-86px}
html:not(.pl-classic) body .pf-hero .pf-photo .ph.xl,html:not(.pl-classic) body .pf-hero .pf-photo .wl-photo>*:first-child{width:152px!important;height:152px!important}
html:not(.pl-classic) body .pf-hero .pf-id h1{font-size:1.75rem}
@media (max-width:640px){
  html:not(.pl-classic) body .mprof .mp-head>.mp-cover,html:not(.pl-classic) body .pf-hero .pf-cover,html:not(.pl-classic) body .pf-hero .pf-cover:not(:has(img)){height:130px}
  html:not(.pl-classic) body .mprof .mp-head .mp-av{margin:-56px 0 0 16px}
  html:not(.pl-classic) body .mprof .mp-head .mp-av>*:first-child,html:not(.pl-classic) body .pf-hero .pf-photo .ph.xl,html:not(.pl-classic) body .pf-hero .pf-photo .wl-photo>*:first-child{width:104px!important;height:104px!important}
  html:not(.pl-classic) body .pf-hero .pf-photo{margin-top:-56px}
}

/* v2.0.75 resume shown as a page */
.rd-page{background:#fff;color:#1b2333;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.28);padding:40px 48px;max-width:780px;width:100%;margin:0 auto;font:400 .92rem/1.5 var(--font-body,'IBM Plex Sans',system-ui,sans-serif);box-sizing:border-box}
.rd-page .rd-name{font:700 1.7rem/1.15 var(--font-head,'Chakra Petch',sans-serif);margin:0 0 4px;text-align:center;color:#0f172a}
.rd-page .rd-contact{margin:0 0 14px;text-align:center;color:#475569;font-size:.85rem;overflow-wrap:anywhere}
.rd-page .rd-h{font:600 .78rem var(--font-head,'Chakra Petch',sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#1d4ed8;margin:18px 0 8px;padding-bottom:4px;border-bottom:1.5px solid #cbd5e1}
.rd-page .rd-job{margin:10px 0 4px;display:flex;flex-wrap:wrap;gap:2px 10px;color:#475569;font-size:.86rem}
.rd-page .rd-job b{color:#0f172a;font-size:.95rem}
.rd-page .rd-job span+span::before{content:"·";margin-right:10px;color:#94a3b8}
.rd-page .rd-ul{margin:4px 0 6px;padding-left:20px}.rd-page .rd-ul li{margin:2px 0}
.rd-page .rd-p{margin:0 0 8px}
.rd-page.rd-letter{padding:36px 44px}.rd-page.rd-letter .rd-p{margin:0 0 12px}
@media (max-width:640px){.rd-page{padding:24px 18px}}

/* v2.0.78 Experience, Education and Skills cards */
.rs-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}.rs-h h3{margin:0}
.rs-list{display:flex;flex-direction:column}
.rs-it{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}.rs-it:first-child{border-top:0}
.rs-lg{width:48px;height:48px;flex:none;border-radius:10px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;font:700 .85rem var(--font-head,inherit);color:var(--accent)}
.rs-b{min-width:0;flex:1}.rs-t{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rs-t b{font-size:1rem}
.rs-now{font-size:.72rem;border-radius:6px;padding:2px 8px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.rs-m{color:var(--muted);font-size:.9rem}.rs-d{color:var(--dim);font-size:.82rem}.rs-p{margin:6px 0 0;color:var(--muted);font-size:.88rem}
.rs-ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:.9rem}.rs-ul li.rs-x{display:none}.rs-ul.open li.rs-x{display:list-item}
.rs-more{background:none;border:0;color:var(--dim);cursor:pointer;padding:2px 0;font:inherit;font-size:.86rem}
.rs-list .rs-x,.rs-sk .rs-x{display:none}.rs-list.open .rs-x,.rs-sk.open .rs-x{display:flex}.rs-sk.open .rs-x{display:inline-flex}
.rs-all{display:block;width:calc(100% + 40px);margin:12px -20px -16px;padding:12px;border:0;border-top:1px solid var(--line);background:none;color:var(--muted);font:600 .9rem var(--font-body,inherit);cursor:pointer;border-radius:0 0 14px 14px}
.rs-all:hover{background:var(--surface2)}
.rs-vis{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.rs-vis>div{flex:1;min-width:200px}.rs-vis p{margin:2px 0 0;font-size:.85rem}
.rs-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);color:var(--accent)}
.rs-sk{margin-top:8px}

.act-fol{color:var(--accent);font-size:.9rem;margin-top:2px}
.act-wrap{position:relative;margin-top:8px}
.act-car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.act-car::-webkit-scrollbar{display:none}
.act-it{flex:0 0 min(440px,88%);scroll-snap-align:start;min-width:0}
.act-it>*{height:100%;margin:0}
.act-wrap.list .act-car{flex-direction:column;overflow:visible}.act-wrap.list .act-it{flex-basis:auto}.act-wrap.list .act-nx{display:none}
.act-nx{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mp-activity .rs-all{margin-top:14px}

/* v2.0.79 analytics, suggestions, recommendations, interests, activity tabs */
.rs-priv{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:.8rem;margin-top:2px}.rs-priv svg{width:14px;height:14px}
.rs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.rs-stat{display:flex;gap:10px;min-width:0}.rs-stat p{margin:2px 0 0;font-size:.82rem}
.rs-ic.big{width:52px;height:52px;flex:none}
.rs-sugbox{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;background:var(--surface2)}.rs-sugbox p{margin:2px 0 10px;font-size:.88rem}
.rs-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.rs-tab{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 14px;font:600 .82rem var(--font-body,inherit);cursor:pointer}
.rs-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rs-rec{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}.rs-rec:first-of-type{border-top:0}
.rs-rn{font-weight:700;color:var(--text);text-decoration:none}.rs-rtext{margin:8px 0 0;color:var(--muted);font-size:.92rem;white-space:pre-wrap}.rs-rtext.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rs-act{gap:8px;margin-top:10px;flex-wrap:wrap}
.rs-asks{display:flex;flex-direction:column;gap:8px;margin:10px 0}.rs-ask{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:10px;padding:10px 12px;font-size:.9rem}
.rs-int{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.rs-person{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--surface);color:inherit;cursor:pointer;text-align:left}.rs-person>div{flex:1;min-width:0}.rs-person.done{opacity:.7}
.rs-pick{max-height:46vh;overflow:auto}
.act-tabs{margin-top:8px}.act-imp{display:flex;justify-content:space-between;color:var(--dim);font-size:.82rem;padding:8px 4px 0}
.act-cm{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface)}.act-cm small{display:block;color:var(--dim);margin-bottom:6px}
@media(max-width:700px){.rs-stats,.rs-int{grid-template-columns:1fr}}
.cx-list:not(.open)>.cx-x{display:none}

/* v2.0.82: profile card spacing, Activity no longer scrolls up/down, Suggested for you shows people */
.rs-slot{display:contents}
.pf-page .card.rs-card,.pf-page .card.mp-activity,.pf-page .card.mp-also,.pf-page .card.wl-about{margin:14px 0}
.act-car{overflow-y:hidden;overscroll-behavior-x:contain}
.act-wrap.list .act-car{overflow:visible}
.act-it{display:flex;flex-direction:column;gap:8px}.act-it>*{margin:0!important;height:auto!important}.act-it>:first-child{flex:1}
.rs-ppl{display:grid;gap:2px}
.rs-pp{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.rs-pp:first-child{border-top:0}
.rs-pp-l{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none}
.rs-pp .btn{flex:none}
.rs-sug .rs-sugbox{position:relative;margin-top:12px}.rs-sug .rs-sugbox>.icon-btn{position:absolute;top:6px;right:6px}
.rs-sug .rs-all{display:inline-block;margin-top:6px}

/* v2.0.85: Admin email previews */
.em-prev{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start}
.em-prev-list{display:grid;gap:4px}
.em-prev-item{text-align:left;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font:inherit;font-size:.92rem}
.em-prev-item.on{border-color:var(--accent);background:var(--surface2);font-weight:700}
.em-prev-main{display:grid;gap:8px;min-width:0}
.em-prev-frame{width:100%;height:1100px;border:1px solid var(--line);border-radius:14px;background:#eef1f8}
@media(max-width:760px){.em-prev{grid-template-columns:1fr}.em-prev-list{grid-template-columns:1fr 1fr}}

/* v2.0.91: My applications cards. The older acct-profiles.css rules for .ap-steps (boxed list items) were leaking into the new stepper, so every step looked like a bordered box with a line through it. */
html body .ap-card{padding:16px 18px!important;gap:16px;border-radius:18px}
html body .ap-top{gap:14px;align-items:flex-start}
html body .ap-tile{width:48px;height:48px;border-radius:14px;font-size:1.2rem;box-shadow:0 10px 22px -14px #4f46e5}
html body .ap-info{display:grid;gap:2px;min-width:0;flex:1}
html body .ap-title{font:700 1.05rem/1.3 var(--hfont);color:var(--text);text-decoration:none}
html body .ap-title:hover{color:var(--accent)}
html body .ap-info small{font-size:.78rem}
html body .ap-pill{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem;padding:4px 12px}
html body .ap-steps{padding:2px 4px 0;gap:0}
html body .ap-steps li{border:0!important;background:none!important;padding:0!important;border-radius:0!important;display:grid!important;justify-items:center;align-content:start;gap:3px;min-width:0}
html body .ap-steps li::before{top:11px;left:-50%;width:100%;height:3px;border-radius:3px;background:color-mix(in srgb,var(--text) 10%,transparent)}
html body .ap-steps li.on::before{background:linear-gradient(90deg,#2563eb,#7c3aed)}
html body .ap-dot{width:24px;height:24px;border-width:2px}
html body .ap-steps li.on .ap-dot{box-shadow:0 4px 10px -4px #4f46e5}
html body .ap-steps li.now .ap-dot{box-shadow:0 0 0 5px color-mix(in srgb,#2563eb 20%,transparent)}
html body .ap-steps li b{font:600 .8rem/1.2 var(--font);color:var(--muted);margin-top:4px}
html body .ap-steps li.on b{color:var(--text)}
html body .ap-steps li small{font-size:.72rem;color:var(--dim,var(--muted))}
html body .ap-msg{position:relative;padding:12px 14px 12px 18px;border-radius:14px;overflow:hidden;gap:8px}
html body .ap-msg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--text);opacity:.18}
html body .ap-msg.t-blue::before{background:#2563eb;opacity:1}
html body .ap-msg.t-good::before{background:#16a34a;opacity:1}
html body .ap-msg.t-rose::before{background:#e11d48;opacity:1}
html body .ap-msg>b{font-size:.92rem}
html body .ap-msg .btn{margin-top:2px}
@media (max-width:520px){html body .ap-card{padding:14px!important}html body .ap-steps li b{font-size:.7rem}html body .ap-steps li small{font-size:.64rem}}

/* v2.0.93: place suggestions float above the page (never hidden behind a banner or footer) */
html body .ac-pop.ac-portal{position:fixed;z-index:100000;overflow-y:auto;overscroll-behavior:contain;right:auto}

/* v2.0.98 Admin → Updates: install-now card */
html body .au-act{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:14px 0}
html body .au-act-t{flex:1 1 260px;min-width:0}html body .au-act-t h3{margin:0 0 4px}html body .au-act-t p{margin:0}
html body .au-act-b{display:flex;gap:8px;flex-wrap:wrap}
html body .au-act-b .btn{display:inline-flex;align-items:center;gap:6px}html body .au-act-b .ico{width:16px;height:16px}
html body .au-act .au-note{flex:1 1 100%;margin:0}


/* v2.0.104 About card */
html body .ab-card{position:relative;overflow:hidden;padding:20px 22px 18px}
html body .ab-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
html body .ab-card h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--mono,monospace)}
html body .ab-card h3 .ico{width:15px;height:15px;color:var(--accent)}
html body .ab-lead{margin:0 0 14px;font:600 1.18rem/1.5 var(--hfont,inherit);letter-spacing:-.005em;color:inherit;white-space:normal}
html body .ab-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
html body .ab-chip{padding:4px 11px;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));background:color-mix(in srgb,var(--accent) 9%,transparent);color:inherit}
html body .ab-chip.k-cert{background:color-mix(in srgb,var(--good,#16a34a) 12%,transparent);border-color:color-mix(in srgb,var(--good,#16a34a) 35%,var(--line))}
html body .ab-chip.k-edu{background:color-mix(in srgb,var(--accent2) 12%,transparent);border-color:color-mix(in srgb,var(--accent2) 35%,var(--line))}
html body .ab-chip.k-yrs{background:color-mix(in srgb,#f59e0b 14%,transparent);border-color:color-mix(in srgb,#f59e0b 40%,var(--line))}
html body .ab-body{display:grid;gap:10px}html body .ab-body p{margin:0;line-height:1.7;color:inherit;white-space:normal}
html body .ab-body.fold{max-height:5.4em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
html body .ab-more{margin-top:8px;background:none;border:0;padding:0;color:var(--accent);font-weight:600;font-size:.88rem;cursor:pointer}

/* v2.0.104 invitation accepted: shrink the card to fit instead of keeping the tall empty one */
html body .ng-invc.ng-done{min-height:0!important;height:auto!important;align-self:start}
html body .ng-invc.ng-done .ng-inv-done{padding:16px 14px 16px;gap:10px;justify-items:center}
html body .ng-invc.ng-done .ng-inv-done>span:not(.nav-av){min-width:0;flex:none;line-height:1.4}

/* v2.0.105 About card always fills its row */
html body .card.ab-card{width:100%;max-width:none;min-width:0;box-sizing:border-box;justify-self:stretch;align-self:stretch;grid-column:1/-1;flex:1 1 100%}
html body .ab-card .ab-lead,html body .ab-card .ab-body,html body .ab-card .ab-body p{max-width:none}
html body .wl-public>.ab-card,html body .rs-slot+.ab-card,html body .pf-page .ab-card{display:block;width:100%;flex:1 1 100%;max-width:none}
html body .wl-public{display:block}

/* v2.0.108 certifications: richer horizontal cards */
html body .wl-certs{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))!important;gap:12px!important}
html body .wl-cert.wl-cert2{flex-direction:row;align-items:flex-start;gap:14px;min-height:0!important;padding:16px 16px 14px 18px;border-radius:16px;position:relative;text-align:left}
html body .wl-cert.wl-cert2::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--ic),color-mix(in srgb,var(--ic) 30%,transparent))}
html body .wl-cert2 .wl-cert-art,html body .wl-cert2 .wl-cert-artlink{width:68px!important;height:68px!important;flex:none;margin:0!important;filter:drop-shadow(0 8px 14px color-mix(in srgb,var(--ic) 45%,transparent))}
html body .wl-cert2 .wl-cert-artlink img{width:100%!important;height:100%!important}
html body .wl-c2-b{display:grid;gap:5px;min-width:0;flex:1;align-content:start}
html body .wl-c2-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
html body .wl-cert2 .wl-cert-name{font:700 1rem/1.25 var(--hfont);margin:0;min-width:0;overflow-wrap:anywhere}
html body .wl-c2-st{flex:none;padding:2px 9px;border-radius:999px;font:700 .66rem var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--good,#16a34a) 18%,transparent);color:var(--good,#22c55e);border:1px solid color-mix(in srgb,var(--good,#16a34a) 40%,transparent)}
html body .wl-c2-st.warn{background:color-mix(in srgb,#f59e0b 18%,transparent);color:#f59e0b;border-color:color-mix(in srgb,#f59e0b 40%,transparent)}
html body .wl-c2-st.bad{background:color-mix(in srgb,var(--bad,#ef4444) 18%,transparent);color:var(--bad,#ef4444);border-color:color-mix(in srgb,var(--bad,#ef4444) 40%,transparent)}
html body .wl-cert2 .wl-cert-meta{margin:0;font-size:.8rem}
html body .wl-c2-bar{height:5px;border-radius:99px;background:color-mix(in srgb,var(--ic) 16%,transparent);overflow:hidden}
html body .wl-c2-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ic),color-mix(in srgb,var(--ic) 55%,#fff))}
html body .wl-c2-id{display:flex;gap:8px;align-items:baseline;font-size:.76rem;color:var(--muted);min-width:0}html body .wl-c2-id code{font:500 .76rem var(--mono,monospace);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .wl-cert2 .wl-cert-foot{margin-top:4px;gap:8px}
html body .wl-cert2 .wl-verify{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ic) 50%,var(--line));font-weight:600;font-size:.8rem;text-decoration:none}
html body .wl-cert2 .wl-feat{position:absolute;top:10px;right:12px;margin:0}
html body .wl-cert2 .wl-hid{position:absolute;top:8px;right:10px}
@media (max-width:520px){html body .wl-certs{grid-template-columns:1fr!important}}

/* v2.0.108 interests: groups like a list of communities */
html body .in-groups{display:grid;gap:2px;margin-top:6px}
html body .in-g{display:flex;gap:12px;align-items:flex-start;padding:10px 6px;border-radius:12px;color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
html body .in-g:last-child{border-bottom:0}html body .in-g:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
html body .in-g-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;font:700 1.3rem var(--hfont,inherit);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
html body .in-g-b{display:grid;gap:2px;min-width:0}html body .in-g-b b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.98rem}
html body .in-g-b small{color:var(--muted)}html body .in-g-b p{margin:2px 0 0;font-size:.84rem;color:var(--muted);line-height:1.4}
html body .in-g-off{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;font:600 .68rem var(--mono,monospace);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}html body .in-g-off .ico{width:11px;height:11px}
html body .in-empty{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 4px 4px}html body .in-empty p{margin:0}

/* v2.0.108 activity: smaller post cards */
html body .act-it{flex-basis:min(330px,82%)}
html body .act-it .card{padding:12px 14px;font-size:.9rem}
html body .act-it img:not([class*="av"]):not([class*="photo"]){max-height:150px;object-fit:cover;width:100%;border-radius:10px}
html body .act-it video{max-height:150px;object-fit:cover}
html body .act-it [class*="media"],html body .act-it [class*="vid"]{max-height:150px;overflow:hidden;border-radius:10px}
html body .act-it .pc-bar,html body .act-it [class*="actions"]{padding-top:4px;margin-top:4px}
html body .act-it button{min-height:34px}
html body .act-imp{font-size:.74rem}
html body .wl-cert2,html body .wl-cert2 *{text-align:left}
html body .wl-cert2 .wl-cert-meta,html body .wl-cert2 .wl-cert-foot,html body .wl-cert2 .wl-c2-id{justify-content:flex-start}
html body .wl-cert2 .wl-issuer{display:block}
html body .in-groups .rs-x{display:none}html body .in-groups.open .rs-x{display:flex}

/* v2.0.109 invite friends + admin growth */
html body .iv-page{max-width:860px;margin:0 auto;display:grid;gap:14px}
html body .iv-hero{position:relative;overflow:hidden;padding:24px}
html body .iv-hero::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
html body .iv-hero h1{margin:4px 0 6px;font-size:clamp(1.4rem,3vw,1.9rem)}
html body .iv-link{display:flex;gap:10px;margin:14px 0 10px;flex-wrap:wrap}html body .iv-link .input{flex:1;min-width:220px}
html body .iv-share{gap:8px;flex-wrap:wrap}
html body .iv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}
html body .iv-stat{padding:14px;text-align:center}html body .iv-stat b{display:block;font-size:1.6rem}html body .iv-stat small{color:var(--muted)}
html body .iv-fr{display:grid;gap:2px;margin-top:8px}
html body .iv-f{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}html body .iv-f:last-child{border-bottom:0}
html body .iv-f p{margin:4px 0 0;line-height:1.5}html body .iv-step{cursor:pointer;justify-content:flex-start}html body .iv-step input{margin-top:5px}

/* v2.0.109 interests note, crisper bigger cert badges, activity cards that fit */
html body .in-vis{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 8px;font-size:.8rem;color:var(--muted);text-decoration:none}
html body .in-vis .ico{width:14px;height:14px}html body .in-vis u{color:var(--accent);margin-left:4px}
html body .wl-cert2 .wl-cert-art,html body .wl-cert2 .wl-cert-artlink{width:92px!important;height:92px!important;object-fit:contain;image-rendering:-webkit-optimize-contrast;border-radius:12px}
html body .wl-cert2 .wl-cert-artlink img{object-fit:contain;image-rendering:-webkit-optimize-contrast}
html body .wl-cert.wl-cert2{gap:16px;padding:18px 18px 16px 20px}
html body .act-car{align-items:flex-start}
html body .act-it>*{height:auto}
html body .act-it{flex:0 0 min(340px,86%);overflow:hidden}
html body .act-it .card{min-width:0;overflow:hidden}
html body .act-it [class*="action"],html body .act-it .pc-acts,html body .act-it .pc-foot{display:flex;flex-wrap:nowrap;gap:2px;justify-content:space-between;min-width:0}
html body .act-it [class*="action"] button,html body .act-it .pc-acts button,html body .act-it .pc-foot button{padding-left:6px;padding-right:6px;min-width:0;gap:5px;font-size:.84rem;flex:1 1 0;justify-content:center}
html body .act-it .pc-head,html body .act-it [class*="head"]{min-width:0}
html body .act-it .f-acts{gap:0;flex-wrap:nowrap}
html body .act-it .f-act{flex:1 1 0;min-width:0;padding:8px 4px;gap:5px;font-size:.8rem;overflow:hidden;white-space:nowrap}
html body .act-it .f-act span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){html body .act-it .f-act span{display:none}html body .act-it .f-act:has(span:only-child){}}
html body .cm-guide{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600}html body .cm-guide .ico{width:14px;height:14px}

/* v2.0.112 employer outreach (Admin → Growth) */
html body .ou-warn{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:10px 0;border-radius:12px;background:color-mix(in srgb,#f59e0b 14%,transparent);border:1px solid color-mix(in srgb,#f59e0b 40%,transparent);font-size:.9rem}html body .ou-warn .ico{flex:none;width:16px;height:16px;margin-top:3px}
html body .ou-row{align-items:center}html body .ou-who{flex:1;min-width:0;display:grid}html body .ou-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ou-st{width:auto;min-width:130px;padding:6px 8px}html body .ou-send{margin:12px 0;gap:8px;flex-wrap:wrap}
html body .ou-pre{white-space:pre-wrap;font:inherit;margin:0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface2,transparent)}
html body .ou-tpl{margin-top:8px}html body .ou-tpl summary{cursor:pointer;font-weight:700;padding:8px 0}

/* v2.0.115 practice cert header: ring and number line up, tighter row */
html body .pr-ring.lg{--s:92px}html body .pr-ring.lg .pr-ring-t{font-size:1.5rem}
html body .pr-ringwrap{gap:18px;align-items:center}
html body .pr-ringwrap .pr-ring{flex:none}

/* v2.0.116 practice exams rebuild: streak strip, vivid tiles, hero cert header, colourful modes, progress bar, celebration */
html body .pr-day{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(90deg,color-mix(in srgb,#f59e0b 10%,var(--surface)),var(--surface) 60%)}
html body .pr-day-f{display:inline-flex;align-items:center;gap:6px;font:700 1rem var(--hfont);color:var(--dim);flex:none}
html body .pr-day-f .ico{width:20px;height:20px}
html body .pr-day-f.on{color:#f59e0b}html body .pr-day-f.on .ico{animation:prFlame 1.6s ease-in-out infinite}
html body .pr-day-f small{font:600 .72rem var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
html body .pr-day-g{flex:1;min-width:0;display:grid;gap:5px;font-size:.84rem;color:var(--muted)}
html body .pr-day-b{height:7px;border-radius:7px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
html body .pr-day-b i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#f59e0b,var(--accent2));transition:width .5s}
html body .pr-day-n{font:700 .9rem var(--hfont);color:var(--text);flex:none}
@keyframes prFlame{0%,100%{transform:scale(1)}50%{transform:scale(1.18) rotate(-5deg)}}

/* catalog tiles */
html body .pr-tile{padding:18px;gap:10px;border-radius:18px;background:radial-gradient(240px 120px at 100% 0%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 70%),var(--surface)}
html body .pr-tile::before{opacity:1;height:4px}
html body .pr-tile-top{display:flex;align-items:center;gap:10px;padding-right:74px}
html body .pr-tile-ic{display:grid;place-items:center;min-width:42px;height:42px;padding:0 6px;border-radius:12px;font:800 .8rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 18px -8px var(--accent)}
html body .pr-tile.v2 .pr-tile-ic{background:linear-gradient(135deg,#7c3aed,#ec4899)}
html body .pr-tile.v3 .pr-tile-ic{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
html body .pr-tile.v4 .pr-tile-ic{background:linear-gradient(135deg,#06b6d4,#3b82f6)}
html body .pr-tile.v5 .pr-tile-ic{background:linear-gradient(135deg,#22c55e,#0ea5e9)}
html body .pr-tile.v6 .pr-tile-ic{background:linear-gradient(135deg,#f59e0b,#ef4444)}
html body .pr-tile.v7 .pr-tile-ic{background:linear-gradient(135deg,#ef4444,#f59e0b)}
html body .pr-tile:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 40px -22px var(--accent)}
html body .pr-fill{display:block;height:5px;border-radius:5px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden;margin-top:6px}
html body .pr-fill i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
html body .pr-go{display:flex;align-items:center;justify-content:space-between;margin-top:2px;padding:9px 12px;border-radius:11px;font:700 .86rem var(--hfont);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);transition:background .15s,color .15s}
html body .pr-tile:hover .pr-go{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
html body .pr-go i{font-style:normal;transition:transform .15s}html body .pr-tile:hover .pr-go i{transform:translateX(4px)}

/* cert page header */
html body .pr-chead{padding:22px;background:radial-gradient(420px 220px at 0% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),radial-gradient(380px 200px at 100% 100%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),var(--surface)}
html body .pr-chead h1{font:800 clamp(1.4rem,3vw,1.9rem)/1.1 var(--hfont);margin:2px 0 8px}
html body .pr-chead .pr-ring.lg{--s:112px}html body .pr-chead .pr-ring.lg .pr-ring-t{font-size:2rem}
html body .pr-chead-cta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
html body .pr-chead-cta .btn{box-shadow:0 10px 24px -10px var(--accent)}
@media(max-width:520px){html body .pr-ringwrap{flex-direction:column;align-items:flex-start}}

/* mode cards */
html body .pr-modes{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
html body .pr-mode{--mc:var(--accent);--mc2:var(--accent2);padding:16px;gap:6px;border-radius:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--mc) 14%,var(--surface)),var(--surface) 65%);border-color:color-mix(in srgb,var(--mc) 28%,var(--line))}
html body .pr-mode.m-quick{--mc:#f59e0b;--mc2:#ef4444}html body .pr-mode.m-weak{--mc:#ec4899;--mc2:#7c3aed}html body .pr-mode.m-drill{--mc:#06b6d4;--mc2:#3b82f6}html body .pr-mode.m-exam{--mc:#22c55e;--mc2:#0ea5e9}
html body .pr-mode:hover{transform:translateY(-4px);border-color:var(--mc);box-shadow:0 18px 36px -22px var(--mc)}
html body .pr-mode-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--mc),var(--mc2));box-shadow:0 8px 18px -8px var(--mc)}
html body .pr-mode-ic .ico{width:20px;height:20px;color:#fff}
html body .pr-mode b{font-size:1.05rem;margin-top:4px}
html body .pr-mode-go{margin-top:4px;font:700 .8rem var(--hfont);color:var(--mc)}
html body .pr-mode-tag{position:absolute;top:12px;right:12px;font:700 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:#fff;background:linear-gradient(135deg,var(--mc),var(--mc2));padding:5px 8px;border-radius:8px}

/* domains */
html body .pr-dombar{height:7px}
html body .pr-dombar.hi i{background:linear-gradient(90deg,#22c55e,#0ea5e9)}
html body .pr-dombar.mid i{background:linear-gradient(90deg,#f59e0b,#eab308)}
html body .pr-dombar.lo i{background:linear-gradient(90deg,#ef4444,#ec4899)}
html body .pr-dombar i{transition:width .7s cubic-bezier(.4,0,.2,1)}

/* player */
html body .pr-exam-top{padding-bottom:18px}
html body .pr-prog{position:absolute;left:0;right:0;bottom:0;height:5px;background:color-mix(in srgb,var(--text) 8%,transparent)}
html body .pr-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px var(--accent);transition:width .45s cubic-bezier(.4,0,.2,1)}
html body .pr-streak{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font:700 .8rem var(--hfont);color:#b45309;background:color-mix(in srgb,#f59e0b 18%,transparent);animation:prPop .35s}
html body .pr-streak[hidden]{display:none}
html body .pr-streak .ico{width:15px;height:15px;color:#f59e0b}
@keyframes prPop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
html body .pr-q{padding:22px;animation:prIn .25s ease-out}
@keyframes prIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html body .pr-q .pr-q-txt{font-size:1.15rem;font-weight:500}
html body .pr-opt{padding:14px 16px;border-radius:14px;font-size:1rem;transition:transform .12s,border-color .12s,background .12s,box-shadow .12s}
html body .pr-opt:hover{transform:translateX(3px);box-shadow:0 8px 20px -14px var(--accent)}
html body .pr-opt .pr-key{width:28px;height:28px;border-radius:9px}
html body .pr-opt.ok{animation:prPop .35s}html body .pr-opt.bad{animation:prShake .35s}
@keyframes prShake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
html body .pr-fb{animation:prIn .25s}html body .pr-fb b{font:700 1.02rem var(--hfont)}
html body .pr-fb.ok b{color:var(--good)}html body .pr-fb.bad b{color:var(--bad)}

/* results */
html body .pr-result{padding:26px;background:radial-gradient(460px 240px at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--surface)}
html body .pr-result.pass{background:radial-gradient(460px 240px at 50% 0%,color-mix(in srgb,var(--good) 20%,transparent),transparent 70%),var(--surface)}
html body .pr-res-ring{position:relative;display:grid;place-items:center}
html body .pr-ring.xl{--s:148px}html body .pr-ring.xl .pr-ring-t{display:none}
html body .pr-res-sc{position:absolute;inset:0;display:grid;place-items:center}
html body .pr-res-sc .pr-score{font-size:1.5rem}
html body .pr-res-msg{font:600 1.05rem var(--hfont);color:var(--text);max-width:36ch}
html body .pr-conf{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}
html body .pr-conf i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;opacity:0;animation:prFall 2.4s ease-in forwards}
@keyframes prFall{0%{opacity:1;top:-12px}100%{opacity:0;top:105%;margin-left:30px}}
@media (prefers-reduced-motion:reduce){html body .pr-conf{display:none}html body .pr-q,html body .pr-fb,html body .pr-opt,html body .pr-day-f .ico{animation:none!important}}
html body .pr-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
html body .pr-tile{min-width:0}
html body .pr-tile-ic{display:none}
html body .pr-tile-top{padding-right:0;flex-wrap:wrap}
html body .pr-tile .pr-meta{flex-wrap:wrap}
html body .pr-tile .pr-meta span{white-space:nowrap}
html body .pr-badge-major{position:static;margin-left:auto}
html body .pr-modes{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* v2.0.117 hands-on simulations: ticket brief, log viewer, rule badges, chip pickers */
html body .pr-tkt{padding:20px;display:grid;gap:10px;background:radial-gradient(420px 200px at 100% 0%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 70%),var(--surface)}
html body .pr-tkt h2{font:800 clamp(1.25rem,2.6vw,1.6rem)/1.15 var(--hfont);margin:0}
html body .pr-tkt-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html body .pr-tkt-sp{flex:1}
html body .pr-tkt-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
html body .pr-tkt-ic .ico{width:18px;height:18px;color:#fff}
html body .pr-tkt-id{font:700 .8rem var(--mono);letter-spacing:.06em;color:var(--accent2)}
html body .pr-pri{font:700 .64rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:7px;color:#fff;background:#64748b}
html body .pr-pri.critical{background:#dc2626}html body .pr-pri.high{background:#ea580c}html body .pr-pri.normal{background:#2563eb}
html body .pr-brief{margin:4px 0;padding:12px 14px;border-left:4px solid var(--accent2);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--accent) 7%,transparent);font-size:.94rem;color:var(--text)}
html body .pr-brief b{display:block;font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent2);margin-bottom:3px}
html body .pr-task p{margin:0;font-size:1rem;line-height:1.5}
html body .pr-goals{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
html body .pr-goals li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--text);background:color-mix(in srgb,var(--good) 12%,transparent);border:1px solid color-mix(in srgb,var(--good) 30%,transparent)}
html body .pr-goals .ico{width:13px;height:13px;color:var(--good)}
html body .pr-hintrow{display:grid;gap:8px;justify-items:start}
html body .pr-hint{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#f59e0b 14%,transparent);font-size:.9rem}
html body .pr-hint[hidden]{display:none}html body .pr-hint .ico{width:16px;height:16px;color:#f59e0b;flex:none;margin-top:2px}
html body .pr-work{padding:18px}
html body .pr-pbq-top{display:flex;align-items:center;gap:14px;margin-bottom:6px}
html body .pr-pbq-h{font:800 1.2rem var(--hfont);display:block}

/* firewall rules */
html body .pr-item.drag{cursor:grab;transition:transform .12s,box-shadow .12s,border-color .12s}
html body .pr-item.dragging{opacity:.4}
html body .pr-item.over{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
html body .pr-rule{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
html body .pr-rule code{font:13px/1.4 var(--mono);overflow-wrap:anywhere}
html body .pr-act{font:800 .68rem/1 var(--mono);font-style:normal;padding:5px 8px;border-radius:7px;letter-spacing:.06em;flex:none}
html body .pr-act.allow{color:#04130b;background:#34d399}html body .pr-act.deny{color:#fff;background:#ef4444}

/* log viewer */
html body .pr-logbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#0b1220;color:#8aa0c8;border-radius:12px 12px 0 0;font:600 .75rem var(--mono);text-transform:uppercase;letter-spacing:.08em}
html body .pr-logbar .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}
html body .pr-cnt{color:#5eead4}
html body .pr-logv{background:#0a0e16;border-radius:0 0 12px 12px;overflow-x:auto;padding:4px 0;margin-bottom:14px}
html body .pr-logl{display:flex;gap:12px;align-items:flex-start;padding:7px 12px;cursor:pointer;color:#c8d6f5;border-left:3px solid transparent;min-width:max-content}
html body .pr-logl:hover{background:#111a2e}
html body .pr-logl .n{color:#51638a;font:12px/1.6 var(--mono);width:22px;text-align:right;flex:none}
html body .pr-logl code{font:13px/1.6 var(--mono);white-space:pre}
html body .pr-logl .fl{opacity:0;color:#ff6b8b;margin-left:auto}html body .pr-logl .fl .ico{width:14px;height:14px}
html body .pr-logl.on{background:#2a1220;border-left-color:#ff4d6d;color:#ffd6de}html body .pr-logl.on .fl{opacity:1}
html body .pr-logl:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* chip pickers (siem parts, attack type) */
html body .pr-siem{gap:16px}
html body .pr-sgrp{display:grid;gap:8px}
html body .pr-sl{font:700 .74rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent2)}
html body .pr-chips{display:flex;flex-wrap:wrap;gap:8px}
html body .pr-chipb{padding:9px 14px;border-radius:999px;border:1.5px solid var(--line2);background:var(--surface);color:var(--text);font:600 .88rem var(--bfont,inherit);cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
html body .pr-chipb:hover{border-color:var(--accent);transform:translateY(-1px)}
html body .pr-chipb.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 18px -10px var(--accent)}

/* checklist and IAM rows as big toggles */
html body .pr-check{padding:13px 14px;border-radius:14px;font-size:.96rem;transition:transform .12s,border-color .12s,background .12s}
html body .pr-check:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
html body .pr-check .box{width:22px;height:22px;border-radius:7px}
html body .pr-pbq{transition:transform .12s,border-color .12s}html body .pr-pbq:hover{transform:translateY(-2px);border-color:var(--accent)}
html body .pr-player>*{min-width:0;max-width:100%}
html body .pr-work{overflow:hidden}
html body .pr-logv{max-width:100%}
html body .pr-logv{overflow-x:visible}
html body .pr-logl{min-width:0}
html body .pr-logl code{white-space:pre-wrap;overflow-wrap:anywhere;flex:1;min-width:0;font-size:12.5px}

/* v2.0.118 activity cards all match the media post; ReconHire action icons */
html body .act-wrap:not(.list) .act-car{align-items:stretch}
html body .act-wrap:not(.list) .act-it{flex:0 0 min(340px,86%)}
html body .act-wrap:not(.list) .act-it>.f-post{display:flex;flex-direction:column;min-height:330px;height:100%!important;margin:0}
html body .act-wrap:not(.list) .act-it>.f-post .f-p-body{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
html body .act-wrap:not(.list) .act-it>.f-post .f-acts{margin-top:auto}
html body .act-wrap:not(.list) .act-it>.f-post .f-p-head+.f-p-body{margin-bottom:12px}
html body .act-it .f-acts .f-act .ico{width:19px;height:19px;stroke-width:1.8}
html body .f-act:nth-child(1):hover .ico{transform:translateY(-2px)}
html body .f-act .ico{transition:transform .18s,color .15s}
html body .f-acts>.f-act:nth-child(1).on{color:var(--accent)}
html body .f-acts>.f-act:nth-child(1).on .ico{fill:none}
html body .f-acts>.f-act:nth-child(1).on .ico path:first-child{fill:currentColor}
html body .f-acts>.f-act:nth-child(1).on .ico path:nth-child(2){stroke:#fff}
html body .f-acts>.f-act:nth-child(1).on .ico{animation:rhBoost .4s}
@keyframes rhBoost{0%{transform:scale(.7)}60%{transform:scale(1.25) translateY(-2px)}100%{transform:none}}
html body .f-acts>.f-act:nth-child(3):hover .ico{transform:translate(2px,-2px)}
html body .f-acts>.f-act.f-save.on{color:var(--accent2)}
html body .f-acts>.f-act.f-save.on .ico{fill:currentColor}
html body .f-acts>.f-act.f-save.on .ico circle{fill:#fff;stroke:#fff}
html body .act-wrap:not(.list) .act-it>.f-post{min-height:290px}
html body .act-wrap:not(.list) .act-it>.f-post .f-p-body{font-size:1.04rem;line-height:1.5}

/* v2.0.123 developer site pill */
html body .head .admin-pill:has(+ .bc-sp){background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 6px 16px -8px var(--accent);color:#fff;border-color:transparent}

/* ph-heads.css */
/* v1.91.7 page headers: buttons only, big and bright. The title text stays for screen readers. */
html body .ph-title.ph-title,html body .ph-gone.ph-gone>*{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
html body .page-head.ph-gone.ph-gone.ph-gone,html body .sp-hero.ph-gone.ph-gone.ph-gone{display:block!important;position:static!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
html body .page-head.ph-gone.ph-gone.ph-gone::before,html body .page-head.ph-gone.ph-gone.ph-gone::after,html body .sp-hero.ph-gone.ph-gone.ph-gone::before,html body .sp-hero.ph-gone.ph-gone.ph-gone::after{display:none!important}
html body .page-head.ph-acts.ph-acts.ph-acts,html body .sp-hero.ph-acts.ph-acts.ph-acts{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 14px!important;border-radius:0!important;overflow:visible!important;justify-content:flex-start!important;gap:10px!important}
html body .page-head.ph-acts.ph-acts.ph-acts::before,html body .page-head.ph-acts.ph-acts.ph-acts::after,html body .sp-hero.ph-acts.ph-acts.ph-acts::before,html body .sp-hero.ph-acts.ph-acts.ph-acts::after{display:none!important}
html body .ph-acts>.row,html body .ph-acts>.ph-moved,html body .ph-acts>div:not(.ph-title){display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0}
/* every action button is a bright, glowing pill */
html body .ph-acts .btn,html body .ph-acts>a,html body .ph-acts>button{display:inline-flex;align-items:center;gap:8px;padding:11px 20px!important;font-size:.95rem!important;font-weight:700;border-radius:999px!important;min-height:0!important;letter-spacing:.01em;
  background:linear-gradient(100deg,var(--accent),var(--accent2))!important;color:#fff!important;border:0!important;text-decoration:none;
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent),0 0 0 1px color-mix(in srgb,#fff 18%,transparent) inset;transition:transform .15s,box-shadow .15s,filter .15s}
html body .ph-acts .btn:hover,html body .ph-acts>a:hover,html body .ph-acts>button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 28px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
html body .ph-acts .btn.ghost,html body .ph-acts .btn.secondary,html body .ph-acts a.back{background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important;color:var(--text)!important;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line))!important;box-shadow:0 0 18px -8px color-mix(in srgb,var(--accent) 60%,transparent)}
html body .ph-acts svg{width:18px;height:18px}
@media (max-width:640px){html body .ph-acts .btn,html body .ph-acts>a,html body .ph-acts>button{flex:1 1 150px;justify-content:center}}

/* help-guide.css */
/* ReconHire Help guide: grouped contents, "what it is" blurbs, screenshots, short recordings and flow diagrams.
   Uses the site's theme variables, so it follows light and dark mode. Loaded for the in-app Help page and public /help. */

/* ---------- grouped contents ---------- */
.hg-grid{align-items:start}
.hg-tocwrap{position:sticky;top:96px;max-height:calc(100vh - 118px);overflow:auto;overscroll-behavior:contain;border-radius:16px;background:var(--surface);border:1px solid var(--line);scrollbar-width:thin}
.hg-tocwrap>summary{display:none}
.hg-tocwrap .hg-toc{position:static;max-height:none;border:0;border-radius:0;background:transparent;padding:8px}
.hg-toc-g{margin:10px 10px 4px;font:700 .68rem var(--hfont,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hg-toc-g:first-child{margin-top:4px}
.hg-toc-g[hidden]{display:none}
.hg-toc a{font-size:.88rem;padding:7px 10px}
.hg-toc a.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}

/* ---------- group headings between section cards ---------- */
.hg-group{display:flex;align-items:baseline;gap:12px;margin:14px 2px 0;scroll-margin-top:100px}
.hg-group:first-child{margin-top:0}
.hg-group h2{margin:0;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-family:var(--hfont,inherit)}
.hg-group::after{content:"";flex:1;height:1px;background:var(--line)}
.hg-group[hidden]{display:none}

/* ---------- section body ---------- */
.hg-what{display:grid;gap:4px;margin:0 0 16px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,transparent);border-left:3px solid var(--accent)}
.hg-what>b{font:700 .7rem var(--hfont,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.hg-what>span{font-size:.97rem;line-height:1.55}
.hg-sec .hg-h{display:flex;align-items:center;gap:8px;margin:20px 0 8px;font-size:1.02rem}
.hg-sec .hg-h.how::before{content:"";width:4px;height:1em;border-radius:2px;background:var(--accent)}
.hg-sec a{overflow-wrap:anywhere}
.hg-sec h2{line-height:1.2}
.hg-dim{color:var(--muted)}

/* ---------- figures: screenshots, recordings, diagrams ---------- */
.hg-fig{margin:6px 0 18px;padding:0}
.hg-fig .hg-frame{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 6px 22px color-mix(in srgb,#000 10%,transparent)}
.hg-fig img,.hg-fig video{display:block;width:100%;max-width:100%;height:auto;background:var(--surface)}
.hg-fig a.hg-frame{cursor:zoom-in}
.hg-fig figcaption{margin:8px 2px 0;font-size:.85rem;line-height:1.5;color:var(--muted)}
.hg-fig figcaption b{color:var(--text)}
.hg-fig.rec .hg-frame{position:relative}
.hg-fig .hg-badge{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;padding:3px 10px;border-radius:99px;font:700 .68rem var(--hfont,inherit);letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.hg-fig .hg-badge svg{width:12px;height:12px}
.hg-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 18px}
.hg-duo .hg-fig{margin:0}

/* ---------- flow diagrams ---------- */
.hg-dia{margin:6px 0 18px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.hg-dia svg{display:block;width:100%;height:auto;max-width:640px;margin:0 auto}
.hg-dia figcaption{margin:8px 2px 0;font-size:.85rem;line-height:1.5;color:var(--muted);text-align:center}
.hg-dia .n-box{fill:color-mix(in srgb,var(--accent) 7%,var(--surface));stroke:var(--line);stroke-width:1.5}
.hg-dia .n-end .n-box{fill:color-mix(in srgb,var(--good) 12%,var(--surface));stroke:color-mix(in srgb,var(--good) 45%,var(--line))}
.hg-dia .n-dot{fill:var(--accent)}
.hg-dia .n-num{fill:#fff;font:700 13px var(--hfont,system-ui,sans-serif);text-anchor:middle;dominant-baseline:central}
.hg-dia .n-t{fill:var(--text);font:700 15px var(--hfont,system-ui,sans-serif)}
.hg-dia .n-s{fill:var(--muted);font:13px var(--font,system-ui,sans-serif)}
.hg-dia .n-arrow{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hg-dia .n-head{fill:var(--accent)}
.hg-dia .n-note{fill:var(--muted);font:italic 13px var(--font,system-ui,sans-serif);text-anchor:middle}

/* ---------- small helpers ---------- */
.hg-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 16px}
.hg-key{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.hg-key b{display:block;font:700 1.25rem var(--hfont,inherit);color:var(--text)}
.hg-key span{display:block;margin-top:2px;font-size:.82rem;color:var(--muted)}
.hg-sec.hg-hit{animation:hgHit 1.6s ease-out 1}
@keyframes hgHit{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.hg-sec.hg-hit{animation:none}}

/* ---------- phones and tablets ---------- */
@media (max-width:860px){
  .hg-tocwrap{position:static;max-height:none;overflow:visible}
  .hg-tocwrap>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;cursor:pointer;font-weight:700;list-style:none}
  .hg-tocwrap>summary::-webkit-details-marker{display:none}
  .hg-tocwrap>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
  .hg-tocwrap[open]>summary::after{transform:rotate(225deg)}
  .hg-tocwrap .hg-toc{flex-direction:column;flex-wrap:nowrap;max-height:60vh;overflow:auto;border-top:1px solid var(--line)}
  .hg-tocwrap .hg-toc a{flex:none}
}
@media (max-width:640px){
  .hg-sec{padding:18px 16px}
  .hg-duo{grid-template-columns:1fr}
  .hg-sec h2{font-size:1.25rem}
  .hg-dia{padding:10px}
}
@media print{
  body.print-help .hg-tocwrap,body.print-help .hg-fig video{display:none!important}
  body.print-help .hg-fig .hg-frame{box-shadow:none}
  body.print-help .hg-group{break-after:avoid}
  body.print-help .hg-fig,body.print-help .hg-dia{break-inside:avoid}
}

.hg-tools .hg-search{flex:1 1 300px;min-width:min(300px,100%);max-width:480px}

/* copages.css */
/* v2.0.127 Company Pages (copages-ui.js) and pro tools (protools-ui.js). Theme tokens come from hr.css / rh-skin-*.css. */
.cpg-wrap{max-width:1128px;margin:0 auto;display:grid;gap:14px;min-width:0}
.cpg-narrow{max-width:1000px}
.cpg-mono{display:inline-grid;place-items:center;border-radius:14px;color:#fff;font-weight:800;flex:none;box-shadow:0 0 0 3px var(--surface,#fff)}
.cpg-logo{border-radius:14px;object-fit:cover;background:var(--surface,#fff);flex:none;box-shadow:0 0 0 3px var(--surface,#fff),0 0 0 4px var(--line2,#e3e7f1)}
.cpg-ver{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700;vertical-align:middle;color:var(--good,#16a34a);background:color-mix(in srgb,var(--good,#16a34a) 12%,transparent);border:1px solid color-mix(in srgb,var(--good,#16a34a) 35%,transparent)}
.cpg-ver svg{width:13px;height:13px}
.cpg-kind{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:600;color:var(--muted);border:1px solid var(--line2)}
.cpg-role{font-size:.74rem;font-weight:700;padding:2px 9px;border-radius:999px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);justify-self:start}
.cpg-explain{display:flex;gap:12px;align-items:flex-start;border-color:color-mix(in srgb,var(--accent) 30%,var(--line2));background:color-mix(in srgb,var(--accent) 5%,var(--surface,transparent))}
.cpg-explain>svg{flex:none;color:var(--accent);margin-top:2px}
.cpg-explain p{margin:4px 0 0;color:var(--muted);font-size:.88rem;line-height:1.5}
.cpg-explain.sm p{font-size:.82rem}
.cpg-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 10%,var(--surface,#fff)),color-mix(in srgb,var(--accent2,#7c3aed) 10%,var(--surface,#fff)))}
.cpg-hero h1{margin:4px 0}
.cpg-hero p{margin:0;color:var(--muted);max-width:640px}
.cpg-search{padding:10px 14px}
.cpg-sec h2{font-size:1.05rem;margin:6px 0 10px;display:flex;gap:6px;align-items:baseline}
.cpg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cpg-card{padding:0;overflow:hidden;display:grid;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.cpg-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line2));box-shadow:0 10px 26px -14px color-mix(in srgb,var(--accent) 55%,transparent)}
.cpg-card-cover{height:62px;background:var(--rg,linear-gradient(90deg,#2563eb,#7c3aed));background-size:cover;background-position:center;opacity:.9}
.cpg-card-body{padding:0 14px 14px;display:grid;gap:3px;justify-items:start}
.cpg-card-body>.cpg-logo,.cpg-card-body>.cpg-mono{margin-top:-28px;margin-bottom:6px}
.cpg-card-n{font-size:1rem;line-height:1.25}
.cpg-card-t{color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cpg-invites{display:grid;gap:10px}
.cpg-inv{display:flex;align-items:center;gap:10px}

/* the page */
.cpg-head{padding:0;overflow:hidden}
.cpg-cover{height:190px;background:var(--rg,linear-gradient(90deg,#2563eb,#7c3aed));background-size:cover;background-position:center}
.cpg-head-in{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end;padding:0 24px 20px}
.cpg-head-logo{margin-top:-52px}
.cpg-head-logo .cpg-logo,.cpg-head-logo .cpg-mono{border-radius:20px;box-shadow:0 0 0 4px var(--surface,#fff),0 8px 22px -10px rgba(0,0,0,.35)}
.cpg-id{min-width:0;padding-top:12px}
.cpg-id h1{margin:0;font-size:1.6rem;line-height:1.2}
.cpg-tag{margin:4px 0 0;font-size:1rem}
.cpg-facts{margin:6px 0 0;color:var(--muted);font-size:.88rem}
.cpg-chips{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.cpg-web{display:inline-flex;gap:5px;align-items:center;font-size:.86rem;font-weight:600}
.cpg-web svg{width:15px;height:15px}
.cpg-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cpg-follow{border-radius:999px}
.cpg-follow.on{background:transparent;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line2))}
.icon-only{padding-left:10px;padding-right:10px}
.cpg-tabs{display:flex;gap:4px;overflow-x:auto;padding:4px;border-radius:999px;border:1px solid var(--line2);background:var(--surface,#fff);scrollbar-width:none}
.cpg-tabs::-webkit-scrollbar{display:none}
.cpg-tabs a{display:inline-flex;gap:6px;align-items:center;white-space:nowrap;padding:8px 16px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--muted);text-decoration:none}
.cpg-tabs a svg{width:16px;height:16px}
.cpg-tabs a:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.cpg-tabs a.on{color:#fff;background:var(--rg,linear-gradient(90deg,#2563eb,#7c3aed))}
.cpg-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.cpg-main{min-width:0}
.cpg-side{position:sticky;top:76px}
.cpg-sec h3{display:flex;gap:8px;align-items:center;margin:0 0 10px;font-size:1.02rem}
.cpg-sec h3 svg{width:18px;height:18px;color:var(--accent)}
.cpg-about{white-space:pre-line;line-height:1.6;margin:0}
.cpg-more{display:inline-block;margin-top:10px;font-weight:600}
.cpg-empty{text-align:center;justify-items:center;display:grid;gap:6px}
.cpg-mini h3{margin:0 0 8px;font-size:.98rem}
.cpg-mini dl,.cpg-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.88rem}
.cpg-dl{margin:16px 0}
.cpg-mini dt,.cpg-dl dt{color:var(--muted)}
.cpg-mini dd,.cpg-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.cpg-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cpg-note{margin:14px 0 0;font-size:.82rem}
.cpg-job{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;text-decoration:none;color:inherit}
.cpg-job:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}

.cpg-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cpg-person{display:grid;justify-items:center;text-align:center;gap:3px;padding:14px 10px;border:1px solid var(--line2);border-radius:14px;text-decoration:none;color:inherit}
.cpg-person:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line2))}
.cpg-person small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cpg-cur{color:var(--accent);font-weight:600}
.cpg-compose{display:grid;gap:10px}
.cpg-compose-top{display:flex;gap:10px;align-items:flex-start}
.cpg-compose-top textarea{flex:1;min-width:0}
.cpg-compose-bot{display:flex;gap:10px;align-items:center}
.cpg-compose-bot input{flex:1;min-width:0}
.cpg-post{display:grid;gap:10px}
.cpg-post-h{display:flex;gap:10px;align-items:center}
.cpg-post-h>div:not(.cpg-post-tools){flex:1;min-width:0;display:grid}
.cpg-post-tools{display:flex;gap:2px}
.cpg-post-b{margin:0;white-space:pre-line;line-height:1.55;overflow-wrap:anywhere}
.cpg-post-l{display:inline-flex;gap:6px;align-items:center;font-size:.88rem;overflow-wrap:anywhere}
.cpg-post-a{display:flex;gap:6px;border-top:1px solid var(--line2);padding-top:8px}
.cpg-react{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:999px;border:0;background:transparent;color:var(--muted);font-weight:600;cursor:pointer}
.cpg-react:hover{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--text)}
.cpg-react.on{color:#e11d48}
.cpg-react svg{width:17px;height:17px}
.cpg-cmts{display:grid;gap:10px}
.cpg-cmt{display:flex;gap:8px;align-items:flex-start}
.cpg-cmt>div{flex:1;min-width:0;background:color-mix(in srgb,var(--text) 4%,transparent);border-radius:12px;padding:8px 12px}
.cpg-cmt p{margin:2px 0 0;overflow-wrap:anywhere}
.cpg-cmt-new{display:flex;gap:8px}
.cpg-cmt-new input{flex:1;min-width:0}
.cpg-held{display:inline-flex;gap:6px;align-items:center;font-size:.82rem;color:#b45309}
.cpg-warn,.cpg-claim{display:flex;gap:12px;align-items:center}
.cpg-warn{border-color:#f59e0b66;background:color-mix(in srgb,#f59e0b 8%,var(--surface,transparent))}
.cpg-warn p,.cpg-claim p{margin:2px 0 0}
.cpg-claim{border-color:color-mix(in srgb,var(--good,#16a34a) 40%,var(--line2))}
.cpg-claim>div{flex:1}
/* create */
.cpg-new-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.cpg-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cpg-agree{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--muted);line-height:1.45}
.cpg-agree input{margin-top:3px}
.cpg-k{font-family:var(--mono,monospace);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
/* manage */
.cpg-mhead{display:flex;gap:14px;align-items:center}
.cpg-mhead>div{flex:1;min-width:0}
.cpg-mhead h1{margin:2px 0;font-size:1.35rem}
.cpg-ed-imgs{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px}
.cpg-img-ed{display:grid;gap:8px;align-content:start}
.cpg-cover-ed{height:120px;border-radius:12px}
.cpg-logo-ed{padding:6px 0}
.cpg-range{display:flex;gap:6px;flex-wrap:wrap}
.cpg-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cpg-tile{display:grid;gap:2px}
.cpg-tile>b{font-size:1.6rem;line-height:1.1}
.cpg-chart{display:flex;align-items:flex-end;gap:3px;height:140px;margin-top:12px}
.cpg-chart i{flex:1;min-width:2px;border-radius:4px 4px 0 0;background:var(--rg,linear-gradient(180deg,#2563eb,#7c3aed))}
.cpg-chart i.z{background:color-mix(in srgb,var(--text) 10%,transparent)}
.cpg-chart-x{display:flex;justify-content:space-between;color:var(--muted);margin-top:4px}
.cpg-top{display:grid;gap:2px;padding:8px 0;border-top:1px solid var(--line2)}
.cpg-top:first-of-type{border-top:0}
.cpg-admin-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line2)}
.cpg-admin-row:first-child{border-top:0}

.cpg-danger{border-color:color-mix(in srgb,#dc2626 35%,var(--line2))}
.cpg-adm{display:grid;gap:8px}
.cpg-status{font-size:.76rem;font-weight:700;padding:3px 10px;border-radius:999px;align-self:start}
.cpg-status.s-active{color:var(--good,#16a34a);background:color-mix(in srgb,var(--good,#16a34a) 12%,transparent)}
.cpg-status.s-review{color:#b45309;background:#f59e0b22}
.cpg-status.s-hidden{color:#dc2626;background:#dc262618}
.cpg-reps{display:grid;gap:3px}
.cpg-reps small{display:flex;gap:6px;align-items:center}
@media (max-width:900px){
  .cpg-body,.cpg-new-grid{grid-template-columns:1fr}
  .cpg-side{position:static}
  .cpg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cpg-ed-imgs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cpg-cover{height:120px}
  .cpg-head-in{grid-template-columns:1fr;gap:8px;padding:0 16px 16px}
  .cpg-head-logo{margin-top:-44px}
  .cpg-head-logo .cpg-logo,.cpg-head-logo .cpg-mono{width:84px!important;height:84px!important}
  .cpg-acts{justify-content:flex-start}
  .cpg-pair{grid-template-columns:1fr}
  .cpg-compose-bot{flex-wrap:wrap}
  .cpg-id h1{font-size:1.35rem}
}

/* ---------- pro tools (protools-ui.js) ---------- */
.pt-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pt-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.pt-tag button{border:0;background:none;color:inherit;cursor:pointer;padding:0 0 0 2px;font-size:.9rem;line-height:1}
.pt-extras{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.pt-score{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center}
.pt-stars{display:inline-flex;gap:3px}
.pt-stars button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--muted);font-weight:700;cursor:pointer}
.pt-stars button.on{background:var(--rg,linear-gradient(90deg,#2563eb,#7c3aed));color:#fff;border-color:transparent}
.pt-verdict{display:flex;gap:6px;flex-wrap:wrap}
.pt-list{display:grid;gap:10px}
.pt-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pt-row>div:first-child{flex:1;min-width:200px;display:grid;gap:2px}
.pt-pill{font-size:.74rem;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid var(--line2)}
.pt-pill.good{color:var(--good,#16a34a);border-color:color-mix(in srgb,var(--good,#16a34a) 40%,transparent)}
.pt-pill.bad{color:#dc2626;border-color:#dc262655}
.pt-slots{display:flex;flex-wrap:wrap;gap:8px}
.pt-slot{padding:8px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--surface,#fff);font-weight:600;cursor:pointer;color:inherit}
.pt-slot:hover{border-color:var(--accent)}
.pt-slot.taken{opacity:.55;cursor:default;text-decoration:line-through}
.pt-slot.mine{background:color-mix(in srgb,var(--good,#16a34a) 12%,transparent);border-color:var(--good,#16a34a)}
.pt-slot-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pt-funnel{display:grid;gap:6px}
.pt-funnel div{display:grid;grid-template-columns:110px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:.86rem}
.pt-funnel i{display:block;height:10px;border-radius:999px;background:var(--rg,linear-gradient(90deg,#2563eb,#7c3aed));min-width:2px}
.pt-table{width:100%;border-collapse:collapse;font-size:.88rem}
.pt-table th,.pt-table td{text-align:left;padding:8px 10px;border-top:1px solid var(--line2);vertical-align:top}
.pt-table th{color:var(--muted);font-weight:600;border-top:0;white-space:nowrap}
.pt-scroll{overflow-x:auto}
.pt-heat{display:grid;grid-template-columns:46px repeat(6,minmax(0,1fr));gap:3px;font-size:.72rem}
.pt-heat span{display:grid;place-items:center;height:26px;border-radius:6px;color:var(--muted)}
.pt-heat b{display:block;height:26px;border-radius:6px;background:color-mix(in srgb,var(--text) 6%,transparent);overflow:hidden}.pt-heat b i{display:block;height:100%;background:var(--rg,linear-gradient(90deg,#2563eb,#7c3aed))}
.pt-draft{display:grid;gap:8px}
.pt-draft-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pt-check{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line2)}
.pt-check:first-child{border-top:0}
.card.cpg-head{padding:0}
.cpg-cover{border-radius:0}
.cpg-head .cpg-cover{border-radius:var(--radius,16px) var(--radius,16px) 0 0}
.cpg-trust{display:flex;gap:10px;align-items:flex-start;padding:12px 14px}
.cpg-trust>svg{flex:none;width:18px;height:18px;color:var(--muted);margin-top:2px}
.cpg-trust.ok>svg{color:var(--good,#16a34a)}
.cpg-trust b{display:block;font-size:.9rem}
.cpg-trust small{color:var(--muted)}
.cpg-linkbtn{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.cpg-linkbtn:hover{text-decoration:underline}
.card.cpg-card{padding:0}
.cpg-card .cpg-card-cover{border-radius:var(--radius,16px) var(--radius,16px) 0 0}
.cpg-back{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:.9rem;color:var(--muted);text-decoration:none;justify-self:start}
.cpg-back:hover{color:var(--accent)}
.cpg-back svg{width:16px;height:16px}

.cpg-who{flex:1;min-width:0;display:grid;gap:1px}
.cpg-who b,.cpg-who small{overflow:hidden;text-overflow:ellipsis}
.cpg-admin-row .cpg-role{flex:none}
.cpg-admin-row select{width:auto;flex:none}
.cpg-hero.sm h1{font-size:1.35rem}
.cpg-hero.sm{padding-top:16px;padding-bottom:16px}
.cpg-range{display:flex;gap:6px;flex-wrap:wrap}
.pt-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.pt-h{margin:8px 0 0;font-size:1rem}
.pt-stats{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:.9rem}
.pt-stats b{font-size:1.1rem}
.pt-bulkbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pt-bulkbar select{width:auto}
.pt-day{display:block;margin-top:6px;font-size:.9rem}
.pt-clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:inherit;text-decoration:none}
.pt-inline{margin:0;flex-direction:row;align-items:center;gap:8px}
.pt-inline select{width:auto}
.pt-later{display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:.9rem}
.pt-draft-meta input[type=datetime-local]{width:auto}
.pt-item{padding:12px 0;border-top:1px solid var(--line2)}
.pt-item:first-of-type{border-top:0}
a.pt-check,label.pt-check{color:inherit;text-decoration:none;cursor:pointer}
a.pt-check:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.pt-check>svg{width:18px;height:18px;color:var(--accent)}
.pt-slot-add input[type=date],.pt-slot-add input[type=time],.pt-slot-add select{width:auto}
.hx-group{display:flex;align-items:baseline;gap:10px;margin:10px 0 -2px}
.hx-group h2{margin:0;font-size:1.05rem}
.hx-tool{position:relative}
.hx-new{position:absolute;top:10px;right:10px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--rg,linear-gradient(90deg,#2563eb,#7c3aed));padding:2px 8px;border-radius:999px}
@media (max-width:900px){.pt-two{grid-template-columns:1fr}}
@media (max-width:640px){.pt-score{grid-template-columns:1fr}.pt-heat{font-size:.6rem;grid-template-columns:34px repeat(6,minmax(0,1fr))}}
.pt-score{padding:10px 0;border-top:1px solid var(--line2)}
.pt-score:first-child{border-top:0}
.pt-score input{grid-column:1/-1}
.pt-verdict .chip.on{background:var(--rg,linear-gradient(90deg,#2563eb,#7c3aed));color:#fff;border-color:transparent}

/* v3.css */
/* ============================================================================================================
   ReconHire v3 design layer. Loaded LAST on every page (app, homepage, public pages), so it restyles the whole site
   from one place: same blue → violet colors, cleaner and slimmer surfaces.
   - Calm canvas: no grid pattern behind pages, one soft glow at the top.
   - Slim cards: thin border, light shadow, no gradient bars or glows; tighter padding in the side columns.
   - Eyebrow labels ("Your stats") instead of code-style "// YOUR STATS"; hidden in side columns where cards have titles.
   - One footer: the side-column footer keeps just the links; language and app badges live in the page footer.
   - New logo (a gradient tile with a radar arc and an R) with a slow, subtle scan.
   Dark mode keeps working: everything uses the theme tokens.
   ============================================================================================================ */
:root{--radius:14px;--v3-r:14px;--v3-r-sm:10px;
  --v3-shadow:0 1px 2px rgba(15,23,42,.05),0 1px 1px rgba(15,23,42,.03);
  --v3-shadow-hi:0 1px 2px rgba(15,23,42,.06),0 12px 28px -16px rgba(15,23,42,.28);
  --v3-grad:linear-gradient(135deg,#3b82f6 0%,#4f46e5 55%,#7c3aed 100%)}
[data-theme="dark"]{--v3-shadow:0 1px 2px rgba(0,0,0,.35);--v3-shadow-hi:0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.6)}

/* ---------- canvas ---------- */
html body{background-image:none;background-color:var(--bg)}
html body::before{background:radial-gradient(1000px 420px at 50% -220px,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
html body .caret{display:none}

/* ---------- logo ---------- */
html body .logo{width:34px;height:34px;filter:none;overflow:visible}
html body .logo .rscan{transform-box:view-box;transform-origin:32px 32px;animation:v3scan 9s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes v3scan{0%{transform:rotate(0)}70%,100%{transform:rotate(360deg)}}
html body .brand:hover .logo .rscan{animation-duration:2.4s}
@media (prefers-reduced-motion:reduce){html body .logo .rscan{animation:none}}
html.reduce-motion body .logo .rscan,.reduce-motion .logo .rscan{animation:none}
html body .brand-text{justify-content:center}
html body .brand-text b{font-weight:700;letter-spacing:-.01em}
html body .brand-text b span{text-shadow:none;background:var(--v3-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- cards ---------- */
html body .card{border-radius:var(--v3-r);border:1px solid var(--line);box-shadow:var(--v3-shadow);background:var(--surface)}
html body:not(.landing) .card:not(.vote-card):not(.vote-banner)::before{display:none}
html body .card:hover{box-shadow:var(--v3-shadow)}
html body a.card:hover,html body .card.cpg-card:hover,html body .hx-tool:hover{box-shadow:var(--v3-shadow-hi);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
html body .modal{border-radius:18px;box-shadow:0 30px 80px -20px rgba(15,23,42,.45)}

/* side columns: slimmer cards, tighter rhythm */
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.mx-rail,.n-left) .card{padding:12px 14px;border-radius:12px}
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.mx-rail,.n-left){gap:10px}
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-right) .card h3{font-size:.98rem}

/* ---------- eyebrow labels (were "// LABEL" in a code font) ---------- */
html body :is(.kicker,.rh-kick,.pr-kick,.ng-kick,.ln-kick,.sx-k,.mx-kick,.st-kick,.rg-kick,.jh-kick,.pb-kick,.biz-k,.wx2-k,.en-k,.gs-kicker,.ct-kick2,.kick,.rh-k){
  font:600 .7rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:none;-webkit-text-fill-color:currentColor}
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.mx-rail,.n-left) :is(.kicker,.rh-kick,.pr-kick,.ng-kick,.ln-kick,.sx-k,.mx-kick,.st-kick,.jh-kick){display:none}

/* ---------- page heads: smaller, calmer titles inside the app ---------- */
html body:not(.landing) main h1,html body:not(.landing) .page-head h1{font-size:clamp(1.45rem,2.4vw,1.85rem);letter-spacing:-.005em}
html body:not(.landing) main h2{font-size:clamp(1.15rem,1.8vw,1.35rem)}
html body .page-head p,html body .cpg-hero p{color:var(--muted)}
html body .cpg-hero{background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),color-mix(in srgb,var(--accent2) 7%,var(--surface)));border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}

/* ---------- buttons, chips, inputs ---------- */
html body .btn{border-radius:var(--v3-r-sm);font-weight:600;box-shadow:none;transition:background-color .15s,border-color .15s,color .15s,transform .1s}
html body .btn:active{transform:translateY(1px)}
html body .btn.primary{background:var(--v3-grad);border-color:transparent;color:#fff}
html body .btn.primary:hover{filter:brightness(1.07)}
html body .btn.ghost{background:var(--surface);border:1px solid var(--line2);color:var(--text)}
html body .btn.ghost:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2));color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
html body .btn.quiet{background:transparent;border-color:transparent}
html body .btn.quiet:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
html body .chip{border-radius:999px}
html body .chip.on{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
html body :is(.input,input.input,select.input,textarea.input){border-radius:var(--v3-r-sm);border:1px solid var(--line2);background:var(--surface);box-shadow:none}
html body :is(.input,input.input,select.input,textarea.input):focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}

/* ---------- top bar ---------- */
html body .top,html body header.top,html body .app-top{box-shadow:none}
html body .nav-lbl{font-weight:600;letter-spacing:0}
html body .tabs>a.on .nav-lbl,html body .tabs button.on .nav-lbl{color:var(--text)}

/* ---------- one footer ---------- */
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.mx-rail,.n-left,aside) .rail-foot :is(.rh-prefs,.ab-wrap){display:none}
html body:has(:is(.f-left,.hx-left,.side-rail,.jh-left,.mx-rail,.n-left,aside) .rail-foot) .foot-app{display:none}
html body .rail-foot{gap:8px;font-size:.78rem}
html body .rail-foot .rf-brand{opacity:.75}
html body .rail-foot .rf-logo{width:18px;height:18px}

/* ---------- ad cards: slimmer label, no glow ---------- */
html body .ad-card{box-shadow:var(--v3-shadow)}
html body .ad-label{font:600 .66rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
html body .ad-tag{background:none;padding:0;border:0}

/* ---------- empty states: lighter ---------- */
html body .card.empty{box-shadow:none;border-style:dashed}

/* ---------- homepage ---------- */
html body.landing .card{box-shadow:var(--v3-shadow)}
html body.landing .feat .card::before{display:none}

/* ---------- small screens ---------- */
@media (max-width:640px){
  html body :is(main) .card{border-radius:12px}
  html body .logo{width:30px;height:30px}
}

/* terminal-style status lines ("> nothing here yet_") are gone in v3; the plain sentence under them stays */
html body :is(.mx-term,p.rh-term,.jh-term){font:500 .92rem/1.4 var(--font);color:var(--muted);background:none;border:0;padding:0;letter-spacing:0;text-transform:none}
html body :is(.mx-term,p.rh-term,.jh-term)::after,html body :is(.mx-term,p.rh-term,.jh-term)::before{display:none}
html body .mx-empty .mx-term+p,html body .mx-empty p{margin-top:4px}
/* homepage: calmer canvas too */
html body.landing{background-image:none}

/* ============================================================================================================
   v3.1 redesign: less boxy, tighter corners, fewer widgets.
   - Corners: panels and cards 8px (was 14 to 16). Buttons and chips stay fully rounded.
   - Open side columns: widgets in the left and right columns are open sections divided by a thin line, not boxes.
   - Home feed: post box first; left column is your card plus one "today" card; right column is job picks, people,
     one ad and one Explore list (interview prep, puzzles, practice, events, groups, range) instead of seven cards.
   - Profile: shorter header, and empty sections are one slim row each instead of a tall empty box.
   ============================================================================================================ */
:root{--radius:8px;--v3-r:8px;--v3-r-sm:8px}
html body .card{border-radius:8px;box-shadow:none}
html body .card:hover{box-shadow:none}
html body .modal{border-radius:12px}
html body :is(.input,input.input,select.input,textarea.input){border-radius:8px}
html body .btn{border-radius:999px}
html body .cpg-logo,html body .cpg-mono{border-radius:8px}
html body .cpg-head-logo .cpg-logo,html body .cpg-head-logo .cpg-mono{border-radius:10px}
html body .cpg-head .cpg-cover{border-radius:8px 8px 0 0}
html body .cpg-card .cpg-card-cover{border-radius:8px 8px 0 0}
html body :is(.cpg-col,.cpg-person,.pt-slot){border-radius:8px}

/* tabs: an underline instead of a pill bar */
html body .cpg-tabs{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:0;gap:2px}
html body .cpg-tabs a{border-radius:0;padding:10px 14px 11px;position:relative;background:none}
html body .cpg-tabs a:hover{background:none;color:var(--text)}
html body .cpg-tabs a.on{color:var(--text);background:none}
html body .cpg-tabs a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px;background:var(--v3-grad)}

/* open side columns: sections, not boxes */
html body :is(.f-left,.f-right,.hx-right,.side-rail,.jh-right,.ng-right,.mx-rail,.n-left) > .card:not(.ad-card):not(.ad-spot):not(.f-me):not(.jh-me):not(.hx-menu),
html body :is(.f-left,.f-right,.hx-right,.side-rail,.jh-right,.ng-right) > .stack > .card:not(.ad-card){
  background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:14px 2px 6px}
html body :is(.f-left,.f-right,.hx-right,.side-rail,.jh-right,.ng-right,.mx-rail,.n-left) > .card:first-child:not(.ad-card):not(.ad-spot):not(.f-me):not(.jh-me):not(.hx-menu){border-top:0;padding-top:2px}
html body :is(.f-left,.f-right,.hx-left,.hx-right,.side-rail,.jh-left,.jh-right,.ng-left,.ng-right,.mx-rail,.n-left){gap:6px}
html body :is(.f-left,.f-right,.hx-right,.side-rail,.jh-right,.ng-right) .ad-card,html body :is(.f-right,.side-rail) .ad-spot{border-radius:8px;margin:6px 0}
/* the left menus (Jobs, Hiring, Network) stay as one clean panel */
html body :is(.hx-menu,.jh-menu,.ng-man){border-radius:8px}

/* ---------- Home feed ---------- */
html body .rh-feed .f-left > :is(.act-card,.ad-left,.rg-homecard){display:none}
html body .rh-feed .f-right > :is(.iv-home,.gx-card,.ad-text-card,.ev-rail,.cm-sugg,.cm-hgaps,.pr-home){display:none}
html body .rh-feed .f-mid{display:flex;flex-direction:column;gap:10px}
html body .rh-feed .f-mid > *{margin:0}
html body .rh-feed .f-mid > .f-compose{order:1}
html body .rh-feed .f-mid > .eg-slot{order:2}
html body .rh-feed .f-mid > .f-tabs{order:3}
html body .rh-feed .f-mid > .f-list{order:4}
html body .rh-feed .f-mid > .td-strip{display:none}
html body .rh-feed .f-mid > .hp-card{order:5;display:none}
html body .rh-feed .f-right{display:flex;flex-direction:column}
html body .rh-feed .f-right > .f-jobs{order:1}
html body .rh-feed .f-right > .f-ppl{order:2}
html body .rh-feed .f-right > .ad-spot,html body .rh-feed .f-right > .ad-card{order:3}
html body .rh-feed .f-right > .v3-explore{order:4}
html body .rh-feed .f-right > .trend{order:5}
html body .rh-feed .f-right > .rail-foot{order:9}
html body .rh-feed .f-post{border-radius:8px}
/* getting started: one slim line with the next step; the rest opens on demand */
html body .eg-card{padding:12px 14px}
html body .eg-card:not(.v3-open) .eg-steps li:not(.next){display:none}
html body .eg-card:not(.v3-open) .eg-foot{display:none}
html body .eg-card .eg-head{cursor:pointer}
html body .eg-card .v3-more{border:0;background:none;color:var(--accent);font:600 .82rem var(--font);cursor:pointer;padding:4px 0 0}
/* the Explore list */
html body .v3-explore h3{margin:0 0 6px;font-size:.98rem}
html body .v3-explore a{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:8px;color:var(--text);text-decoration:none;font-size:.9rem}
html body .v3-explore a:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--accent)}
html body .v3-explore a .ico{width:18px;height:18px;color:var(--accent);flex:none}
html body .v3-explore a small{margin-left:auto;color:var(--dim);font-size:.76rem}

/* ---------- Profile ---------- */
html body .pf-hero .pf-cover{height:140px}
html body .pf-page .wl-sec{padding-top:6px}
html body .pf-page .wl-empty{display:flex;align-items:center;gap:12px;min-height:0;padding:12px 14px;text-align:left;border:1px dashed var(--line2);border-radius:8px;background:none}
html body .pf-page .wl-empty > svg,html body .pf-page .wl-empty > .ico{width:22px;height:22px;flex:none;margin:0}
html body .pf-page .wl-empty :is(h3,h4,b){margin:0;font-size:.95rem}
html body .pf-page .wl-empty p{margin:0;font-size:.86rem;color:var(--muted)}
html body .pf-page .pf-nudge{padding:10px 14px}
/* stronger overrides where older skins used long selectors */
html body .pf-page .pf-hero .pf-cover{height:132px!important;min-height:0!important}
html body .pf-page .wl-empty{flex-direction:row!important;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px 12px}
html body .pf-page .wl-empty > b{flex:0 0 auto}
html body .pf-page .wl-empty > span{flex:1 1 320px;color:var(--muted);font-size:.86rem;text-align:left}
html body .rh-feed .f-left > .ad-card{display:none}
html body .rh-feed .card,html body .pf-page .card,html body .jh-grid .card,html body .ng-grid .card{border-radius:8px}
/* profile side column: the streak and daily challenge live on Home; keep strength, views and one ad here */
html body .pf-page + .side-rail .hb-card,html body .rail-grid > .side-rail .hb-card{display:none}
/* one promo per side column: when the large spotlight ad shows, the small card for it does not */
html body :is(.side-rail,.f-right,.jh-right,.hx-right):has(> .ad-spot) > .ad-card{display:none}
html body .pf-page .wl-empty b::before{content:none}
/* leftover code-style prefixes added by older styles */
html body .hb-qcard>h3::before,html body .wl-about h3::before,html body .wl-made::before,html body .net-stats>b::before,html body .trend>b::before,html body .cm-hgaps>.spread>b::before,html body .cm-sugg>.spread>b::before{content:none!important;display:none!important}
html body .rh-feed .f-skel::after{content:"Loading your feed…"!important;font:500 .9rem var(--font)!important}
/* feed: no promo in the left column; on phones the post box comes first and the same widgets are trimmed */
html body .rh-feed .f-left > .ad-card{display:none!important}
html body .rh-feed .f-mid > :is(.act-card,.rg-homecard,.iv-home,.gx-card,.ad-text-card,.ev-rail,.cm-sugg,.cm-hgaps,.pr-home,.td-strip,.hp-card){display:none!important}
html body .rh-feed .f-mid > .hb-card{order:2}
html body .rh-feed .f-mid > :is(.f-jobs,.f-ppl,.trend,.ad-spot,.ad-card,.v3-explore){order:6}

/* ============================================================================================================
   v3.2: every remaining page.
   - Promos live on the right or at the bottom only: none in left columns, and the stacked "From ReconHire" text ads
     step aside whenever another ad is on the page.
   - Empty states: no grid pattern, no terminal line; an icon, a short title and one sentence.
   - Duplicate labels above page titles are gone (Messages, Events, Learning).
   - Footer: plain column titles, no terminal status line.
   ============================================================================================================ */
html body :is(.f-left,.hx-left,.jh-left,.ng-left,.n-left,.st-side,.ln-left,.mx-left) .ad-card{display:none!important}
html body:has(.ad-spot,.ad-card:not([hidden])) .ad-text-card{display:none}
html body :is(.pb-term,.rh-cursor,.pb-caret,.rh-foot-term){display:none!important}
html body :is(.rh-empty,.pb-empty,.card.empty,.hb-empty,.jh-empty,.f-empty){background-image:none!important}
html body :is(.rh-empty,.pb-empty,.card.empty) h3{font-size:1.02rem;margin:6px 0 2px}
html body :is(.rh-empty,.pb-empty,.card.empty) p{color:var(--muted);margin:0 0 8px}
html body :is(.mx-kick,.pb-kick,.ln-kick,.st-kick,.jh-kick,.ng-kick){display:none}
html body .rh-foot :is(.rh-foot-k,.kick,.kicker){font:700 .74rem/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* tables and lists (admin, billing, trackers): lighter lines, tighter rows */
html body table{border-collapse:collapse}
html body :is(.adm-table,.tbl,.table) :is(th,td){padding:8px 10px;border-color:var(--line)}
html body :is(.adm-table,.tbl,.table) th{font:600 .74rem var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:none}
/* section tabs across the app share the underline style */
html body :is(.pf-tabs .seg,.cr-tabs,.rs-tabs){border-radius:8px}
/* messaging: a flat two-pane panel */
html body .mx-shell,html body .mx-wrap{border-radius:8px;box-shadow:none}
/* learning, practice and range cards: flat, tight corners, no coloured top bars */
html body :is(.ln-card,.pr-cert,.rg-card,.ng-card,.cm-card,.ev-card,.gx-tile){border-radius:8px;box-shadow:none}
html body :is(.ln-card,.pr-cert,.cm-card,.ev-card)::before{display:none}
/* pricing: flat plan cards, one highlighted */
html body :is(.plan,.price-card,.bl-plan){border-radius:10px;box-shadow:none}
/* phones: content first on framed pages */
@media (max-width:900px){
  html body :is(.hx-grid,.jh-grid,.ng-grid) :is(.hx-right,.jh-right,.ng-right) .ad-card{margin-top:8px}
}
/* tight corners everywhere, including panels older skins styled with long selectors */
html body .card,html body :is(.st-group,.rg-card,.sx-card,.mx,.n-list,.ad-spot,.ad-card,.jh-me,.jh-menu,.hx-menu,.ng-man,.preview-banner,.bl-card,.f-me,.jh-note,.jf-hero,.jf-side,.hl-deck,.term){border-radius:8px!important}
html body .mx{box-shadow:none!important;border:1px solid var(--line)}
html body .card{box-shadow:none!important}
html body .st-nav{border-radius:8px!important;box-shadow:none!important;border:1px solid var(--line)}
html body .st-nav::before{display:none!important}
html body .n-markall{background:var(--surface);border:1px solid var(--line2);color:var(--text)}

/* v3.2.1: public achievement wallet (/u/handle). The About card shared a class name with the dark app-launch pop-up and inherited its
   light text on what is now a light card; the page also lost its side margins and the header band floated under a blank strip. */
html body .card.ab-card{color:var(--text)!important;animation:none!important;text-align:left}
html body .card.ab-card .ab-lead{color:var(--text)!important;font-size:1.05rem;line-height:1.55;margin:0 0 14px}
html body .card.ab-card .ab-body p{color:var(--text)!important;font-size:.95rem}
html body .card.ab-card .ab-chip{color:var(--text)!important}
html body .card.ab-card h3{color:var(--muted)!important;font:600 .8rem var(--font)!important;letter-spacing:.06em!important}
html body .wl-public{max-width:1040px!important;margin:0 auto 48px!important;padding:24px 20px 0!important;box-sizing:border-box}
html body .wl-public>.card{margin:0 0 14px!important}
html body .wl-public .wl-hero.ap-head{padding:0 26px 26px!important;overflow:hidden}
html body .wl-public .wl-hero .ap-band{margin:0 -26px!important;height:104px}
html body .wl-public .wl-hero .wl-hero-main{margin-top:-34px;position:relative;z-index:2;align-items:flex-end;gap:18px;flex-wrap:wrap}
html body .wl-public .wl-hero .wl-id{padding-top:44px!important;min-width:0;flex:1 1 260px}
html body .wl-public .wl-hero .wl-id h1{font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15;overflow-wrap:anywhere}
html body .wl-public .wl-hero .ap-strip{margin:18px -26px -26px!important;padding:14px 26px 16px!important}
html body .wl-public .card.ap-roles{padding:16px 20px!important}
html body .wl-public .card.ab-card{padding:18px 22px!important}
html body .wl-public .wl-made{margin-top:22px!important}
@media (max-width:640px){
  html body .wl-public{padding:14px 12px 0!important}
  html body .wl-public .wl-hero.ap-head{padding:0 16px 16px!important}
  html body .wl-public .wl-hero .ap-band{margin:0 -16px!important;height:84px}
  html body .wl-public .wl-hero .ap-strip{margin:14px -16px -16px!important;padding:12px 16px 14px!important}
  html body .wl-public .wl-hero .wl-id{padding-top:8px!important;flex-basis:100%}
  html body .wl-public .card.ap-roles,html body .wl-public .card.ab-card{padding:14px 16px!important}
}
html body .wl-public .wl-hero .wl-hero-main{margin-top:0;align-items:flex-start}
html body .wl-public .wl-hero .wl-hero-main>.pfp,html body .wl-public .wl-hero .wl-hero-main>.wl-photo{margin-top:-44px;flex:none}
html body .wl-public .wl-hero .wl-id{padding-top:14px!important}
html body .wl-public .wl-sub:empty{display:none}
@media (max-width:640px){html body .wl-public .wl-hero .wl-id{padding-top:8px!important}}
@media (max-width:640px){
  html body .wl-public .wl-hero .wl-hero-main{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;text-align:left!important}
  html body .wl-public .wl-hero .wl-id{width:100%!important;max-width:100%!important;flex:0 0 auto!important;text-align:left!important;margin:0!important}
  html body .wl-public .wl-hero .wl-id h1{font-size:1.5rem!important;white-space:normal!important;justify-content:flex-start!important}
  html body .wl-public .wl-hero .wl-id .kicker,html body .wl-public .wl-hero .wl-headline{text-align:left!important}
}

/* v3.3.0: profile header. Photo overlaps the cover, then the name and details sit underneath it (not beside it),
   with current job and school in a column on the right. Same layout on your own profile and on member profiles. */
html body .mprof .mp-head{display:block!important;padding:0!important}
html body .mprof .mp-head .mp-av{margin:-78px 0 0 24px!important;position:relative;z-index:2;width:max-content}
html body .mprof .mp-head .mp-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:4px 32px;padding:12px 24px 0!important;align-items:start}
html body .mprof .mp-head .mp-main>*{grid-column:1;min-width:0;margin-top:0;margin-bottom:0}
html body .mprof .mp-head .mp-main>.pf-orgs.inline{grid-column:2;grid-row:1/span 5;display:grid!important;gap:12px;margin:4px 0 0!important;align-content:start}
html body .mprof .mp-head .mp-main>.chips,html body .mprof .mp-head .mp-main>.mp-links{margin-top:6px}
html body .mprof .mp-head .mp-main h1{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
html body .mprof .mp-head .mp-act{padding:14px 24px 20px!important;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start!important}
html body .pf-page .pf-hero .pf-top{padding:0 24px!important;margin:0!important;display:flex;justify-content:space-between;align-items:flex-start}
html body .pf-page .pf-hero .pf-photo{margin-top:-78px!important;position:relative;z-index:2}
html body .pf-page .pf-hero .pf-top .pf-edit{margin-top:12px}
html body .pf-page .pf-hero .pf-main{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:4px 32px;padding:12px 24px 0!important;align-items:start}
html body .pf-page .pf-hero .pf-main .pf-orgs{padding-top:4px;min-width:0;max-width:none}
html body .pf-page .pf-hero .pf-acts{margin:14px 24px 0!important;padding:0 0 18px!important;gap:8px;flex-wrap:wrap;justify-content:flex-start;border:0!important}
html body .pf-page .pf-hero .pf-acts .btn.sm{border-radius:999px;font-weight:600}
html body .pf-page .pf-hero .pf-acts .pf-otw{background:var(--accent)!important;color:#fff!important;border:0!important;box-shadow:none!important}
html body .pf-pop{position:relative}
html body .pf-pop>.menu,html body .pf-acts .pop>.menu{position:absolute;top:calc(100% + 6px);left:0;right:auto;z-index:40;min-width:290px;max-width:min(340px,86vw);padding:6px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 34px -14px rgba(15,23,42,.35);display:grid}
html body .pf-menu>button{display:flex;align-items:flex-start;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:8px;text-align:left;color:var(--text);cursor:pointer;font:inherit}
html body .pf-menu>button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
html body .pf-menu>button>.ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--accent)}
html body .pf-menu>button>span{display:grid;gap:1px;min-width:0}
html body .pf-menu>button b{font-size:.92rem;font-weight:600}
html body .pf-menu>button small{font-size:.78rem;color:var(--muted);line-height:1.35;white-space:normal}
html body .pf-page .pf-hero{overflow:visible!important}
html body .pf-page .pf-hero .pf-cover{border-radius:8px 8px 0 0;overflow:hidden}
@media (max-width:760px){
  html body .mprof .mp-head .mp-main,html body .pf-page .pf-hero .pf-main{grid-template-columns:minmax(0,1fr)!important;padding:10px 16px 0!important}
  html body .mprof .mp-head .mp-main>.pf-orgs.inline{grid-column:1;grid-row:auto;margin-top:8px!important}
  html body .mprof .mp-head .mp-av{margin:-56px 0 0 16px!important}
  html body .pf-page .pf-hero .pf-photo{margin-top:-56px!important}
  html body .pf-page .pf-hero .pf-top{padding:0 16px!important}
  html body .mprof .mp-head .mp-act{padding:12px 16px 16px!important}
  html body .pf-page .pf-hero .pf-acts{margin:12px 16px 0!important}
}
html body .pf-page .pf-hero .pf-acts .btn.sm.ghost{background:none!important;color:var(--accent)!important;border:1px solid var(--accent)!important;box-shadow:none!important}
html body .pf-page .pf-hero .pf-acts .btn.sm.ghost:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)!important}
html body .pf-page .pf-hero .pf-acts .pf-pop:last-of-type>.btn.sm.ghost{color:var(--text)!important;border-color:var(--line2)!important}
@media (max-width:760px){html body .pf-page .pf-hero .pf-acts{position:relative}html body .pf-page .pf-hero .pf-acts .pop{position:static}html body .pf-page .pf-hero .pf-acts .pop>.menu{left:0;right:0;max-width:none;min-width:0}}
html body .pf-acts .pop>.menu{max-height:min(72vh,470px)!important;overflow:auto}

/* v3.4.0: Home side columns. Job picks shows two at a time with arrows. */
html body .f-jobs .f-job-list{display:grid;gap:2px;margin-top:6px}
html body .f-jobs .f-job-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
html body .f-jobs .f-job-nav button{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;padding:0}
html body .f-jobs .f-job-nav button:hover{border-color:var(--accent);color:var(--accent)}
html body .f-jobs .f-job-nav button .ico{width:15px;height:15px}
html body .f-jobs .f-job-dots{font-size:.78rem;color:var(--muted)}
/* v3.4.1: footer columns never push a phone page sideways */
@media (max-width:900px){html body .rh-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}html body .rh-foot-grid>*{min-width:0}html body .rh-foot-col a{width:auto!important;max-width:100%;white-space:normal;overflow-wrap:anywhere}}

/* v3.4.2: weekly viewer numbers live in the profile card under Invitations; the left column has no scrollbar */
html body .f-me-stats a.f-me-wk span{white-space:normal;line-height:1.25}
html body .f-me .f-me-name{display:grid;justify-items:center;gap:6px;padding:0 12px;text-decoration:none}
html body .f-me .f-me-name .nm{display:block;text-align:center;text-wrap:balance;line-height:1.25}
html body .f-me .f-me-name .nm .vbadges{display:inline-flex;vertical-align:middle;margin-left:5px;white-space:nowrap}
html body .f-me .f-me-title{display:block;max-width:100%;min-width:0}
html body .f-me .f-me-title .tbadge{max-width:100%;margin:0;white-space:nowrap}
html body .f-me .f-me-title .tbadge .tb-co{overflow:hidden;text-overflow:ellipsis;min-width:0}
html body .f-me .f-me-title .tbadge.big{display:inline-flex;font-size:.68rem;padding:4px 9px;gap:4px;white-space:nowrap;max-width:100%;box-sizing:border-box}
html body .f-me .f-me-title .tbadge.big .tb-l,html body .f-me .f-me-title .tbadge.big .tb-ck,html body .f-me .f-me-title .tbadge.big .ico{flex:none}
html body .f-me .f-me-title .tbadge.big .tb-co{max-width:none!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}
html body .f-me .f-me-name{padding:0 6px}

/* v3.5.0: profile side column. A finished profile shows one quiet All-star line and the view counts instead of the big progress card; no language switcher here (it lives in Settings and the Me menu). */
html body .pf-power.all-star{background:var(--surface)!important;padding:12px 14px!important}
html body .pf-power .pf-done{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:.92rem}
html body .pf-power .pf-done .ico{width:18px;height:18px;color:#d97706;flex:none}
html body .pf-power .pf-done small{margin-left:auto;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,#f59e0b 16%,transparent);color:#b45309;font-weight:600;font-size:.72rem}
/* v3.5.0: profile links sit under the school in the right column of the header */
html body .pf-links-side{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0!important;padding:0!important;border:0!important}
html body .pf-links-side .wl-links{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
html body .pf-links-side :is(.wl-link,.chip){font-size:.8rem;padding:4px 10px;min-height:0}
html body .mprof .mp-head .mp-main>.mp-links:empty{display:none}

/* v3.5.0: profile side column. No language switcher here (it is in Settings and the Me menu); a small All-star chip in the header replaces the finished progress card */
html body .side-rail .rail-foot .rh-prefs,html body .pf-page ~ * .rh-prefs{display:none!important}
html body .pf-allstar{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 9px;border-radius:999px;font-size:.76rem;font-weight:700;color:#92400e;background:linear-gradient(90deg,#fde68a,#fbbf24);vertical-align:middle}
html body .pf-allstar .ico{width:13px;height:13px}
/* v3.5.0: free resume checker: the "keep this resume and see matching jobs" call to action under the scores */
html body .ck-save{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:14px 0;padding:16px 18px!important;border-radius:8px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))!important;background:color-mix(in srgb,var(--accent) 6%,var(--surface))!important}
html body .ck-save[hidden]{display:none}
html body .ck-save-t{flex:1 1 320px;min-width:0}
html body .ck-save-t b{font-size:1.08rem}
html body .ck-save-t p{margin:4px 0 0;color:var(--muted);font-size:.92rem}
html body .ck-save-a{display:grid;gap:6px;justify-items:start}