/* Panel (logged-in app) — faithful port of the "App - Panel" design mockup.
   All classes are pn- prefixed; token values match the landing page design. */

:root{
  --pn-bg:#0A0B0D;
  --pn-surface:#14171B;
  --pn-surface-2:#1A1E24;
  --pn-surface-3:#0F1114;
  --pn-border:rgba(255,255,255,.08);
  --pn-border-strong:rgba(255,255,255,.14);
  --pn-text:#F3F5F7;
  --pn-text-2:#B4BCC6;
  --pn-text-3:#7C8590;
  --pn-accent:#34E0A1;
  --pn-accent-2:#5CEBB5;
  --pn-accent-ink:#06231A;
  --pn-amber:#f2d06b;
  --pn-danger:#FF7A7A;
  --pn-font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Helvetica Neue',Arial,sans-serif;
  --pn-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* Plain (non pn-) token names below: the panel also loads trening.css
     (the calibrated-interview widget, shared with the landing pages -- see
     public/panel/index.html) unchanged, and that stylesheet reads the
     landing pages' own un-prefixed token names directly. Values copied
     exactly from public/index.html's :root so the widget looks identical
     wherever it's embedded -- keep these in sync with that block by hand
     (no build step/preprocessor to share them automatically). */
  --bg:#0A0B0D; --bg-1:#0F1114; --surface:#14171B; --surface-2:#1A1E24;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --text:#F3F5F7; --text-2:#B4BCC6; --text-3:#7C8590;
  --accent:#34E0A1; --accent-strong:#5CEBB5; --accent-2:#7DF2C7; --accent-ink:#06231A;
  --accent-soft:rgba(52,224,161,.14); --accent-line:rgba(52,224,161,.35);
  --danger:#FF7A7A;
  --r-md:12px; --r-xl:26px; --r-pill:999px;
  --s4:16px; --s5:24px; --s6:32px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.6);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

html,body{margin:0;padding:0;background:var(--pn-bg)}
body{min-height:100vh;color:var(--pn-text);font-family:var(--pn-font);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}
a{color:var(--pn-accent);text-decoration:none}
a:hover{color:var(--pn-accent-2)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* .btn* below: same reason as the plain token names above -- trening.css's
   widget renders these classes (Google sign-in, "Skalibruj rozmowę",
   live-call controls, the done screen, ...) but never defined them itself;
   they've only ever lived in the landing pages' own inline <style>. Copied
   verbatim from public/index.html so every button the widget renders looks
   identical wherever it's embedded. Class selectors here already win over
   the bare `button{...}` reset above regardless of source order (higher
   specificity), so this doesn't need to move or !important anything. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:650;
  font-size:16px;padding:14px 22px;border-radius:var(--r-pill);transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
  will-change:transform;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 0 var(--accent-soft)}
.btn-primary:hover{background:var(--accent-strong);color:var(--accent-ink);box-shadow:0 8px 30px -8px rgba(52,224,161,.5)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-block{width:100%}
.btn-lg{padding:16px 26px;font-size:17px}
input::placeholder{color:var(--pn-text-3)}
:focus-visible{outline:2px solid var(--pn-accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--pn-accent);color:var(--pn-accent-ink)}

@keyframes pn-pulseDot{0%{box-shadow:0 0 0 0 rgba(52,224,161,.5)}70%{box-shadow:0 0 0 8px rgba(52,224,161,0)}100%{box-shadow:0 0 0 0 rgba(52,224,161,0)}}
@keyframes pn-growBar{from{transform:scaleX(0)}}
@keyframes pn-radarIn{from{transform:scale(.05);opacity:0}}
@keyframes pn-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes pn-fadeUp{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

/* ------------------------------- top bar -------------------------------- */
.pn-topbar{position:sticky;top:0;z-index:50;background:rgba(10,11,13,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--pn-border)}
.pn-topbar-in{max-width:880px;margin:0 auto;height:72px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-mark{height:60px;width:auto}
.pn-brand{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--pn-text);display:inline-flex;align-items:center}
.pn-brand em{font-style:normal;background:linear-gradient(120deg,#34E0A1,#7DF2C7);-webkit-background-clip:text;background-clip:text;color:transparent}
.pn-nav{display:flex;align-items:center;gap:6px}
.pn-navlink{font-size:14.5px;font-weight:600;color:var(--pn-text-2);background:transparent;border-radius:999px;padding:8px 15px;transition:color .2s ease}
.pn-navlink:hover{color:var(--pn-text)}
.pn-navlink.active{color:var(--pn-text);background:rgba(255,255,255,.06)}
.pn-logout{margin-left:8px;font-size:14px;font-weight:650;color:var(--pn-text-2);border:1px solid var(--pn-border-strong);border-radius:999px;padding:8px 16px;transition:border-color .2s ease,color .2s ease}
.pn-logout:hover{border-color:rgba(255,255,255,.3);color:var(--pn-text)}
.pn-lang{display:inline-flex;align-items:center;gap:2px;margin-left:8px;border:1px solid var(--pn-border);border-radius:999px;padding:3px}
.pn-lang button{font:600 11.5px/1 var(--pn-mono);letter-spacing:.05em;color:var(--pn-text-3);border-radius:999px;padding:6px 9px;transition:color .2s ease}
.pn-lang button:hover{color:var(--pn-text)}
.pn-lang button.active{color:var(--pn-accent);background:rgba(52,224,161,.14)}

/* --------------------- referral-verified banner (unit 3) ------------------ */
.pn-refbanner{max-width:880px;margin:14px auto 0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(52,224,161,.12);border:1px solid rgba(52,224,161,.3);border-radius:12px;color:var(--pn-text);font-size:14.5px;font-weight:600}
.pn-refbanner button{flex:none;color:var(--pn-text-2);font-size:14px;line-height:1;padding:2px}
.pn-refbanner button:hover{color:var(--pn-text)}
@media(max-width:720px){.pn-refbanner{margin:14px 16px 0}}

/* -------------------------------- layout -------------------------------- */
.pn-view{animation:pn-fadeUp .35s ease both}
.pn-wrap{max-width:880px;margin:0 auto;padding:36px 20px 80px}
.pn-wrap--narrow{max-width:640px}
.pn-wrap--sc{padding-top:24px}
.pn-kicker{margin:0;font:600 12px/1 var(--pn-mono);letter-spacing:.08em;color:var(--pn-accent);text-transform:uppercase}
.pn-subkicker{margin:0;font:600 11px/1 var(--pn-mono);letter-spacing:.08em;color:var(--pn-text-3);text-transform:uppercase}

/* ----------------------------- sessions list ----------------------------- */
.pn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pn-h1{margin:0;font-size:clamp(24px,4vw,30px);font-weight:800;letter-spacing:-.02em}
.pn-plankicker{margin:8px 0 0;font:600 12px/1.5 var(--pn-mono);letter-spacing:.05em;color:var(--pn-text-3);text-transform:uppercase}
.pn-cta{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:650;color:var(--pn-accent-ink);background:var(--pn-accent);border-radius:999px;padding:13px 22px;box-shadow:0 0 28px rgba(52,224,161,.28);transition:transform .15s ease,box-shadow .2s ease}
.pn-cta:hover{box-shadow:0 0 40px rgba(52,224,161,.4);color:var(--pn-accent-ink)}
.pn-cta:active{transform:translateY(1px) scale(.99)}
.pn-buycol{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pn-buy{font-size:15.5px;font-weight:650;color:var(--pn-text-3);background:var(--pn-surface-2);border:1px solid var(--pn-border);border-radius:999px;padding:13px 22px;cursor:not-allowed}
.pn-waitlink{font-size:13px;font-weight:600}

.pn-list{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.pn-card{text-align:left;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--pn-surface);border:1px solid var(--pn-border);border-radius:18px;padding:19px 22px;cursor:pointer;transition:border-color .2s ease,transform .2s ease;color:inherit;font-size:inherit;width:100%;box-sizing:border-box}
.pn-card:hover{border-color:rgba(255,255,255,.22)}
.pn-card.dim{opacity:.55;cursor:default}
.pn-card.dim:hover{border-color:var(--pn-border)}
.pn-card-main{flex:1;min-width:200px;display:block}
.pn-card-title{display:block;font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.pn-card-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font:600 12px/1 var(--pn-mono);color:var(--pn-text-3)}
.pn-card-snippet{display:block;margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--pn-text-2);font-weight:400;max-width:56ch}
.pn-card-right{display:flex;align-items:center;gap:16px}
.pn-badge{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--pn-mono);letter-spacing:.04em;border-radius:999px;padding:7px 12px;white-space:nowrap;color:var(--pn-text-2);background:rgba(255,255,255,.04);border:1px solid var(--pn-border-strong)}
.pn-badge.ok{color:var(--pn-accent);background:rgba(52,224,161,.14);border-color:rgba(52,224,161,.35)}
.pn-badge.mute{color:var(--pn-text-3);background:transparent;border-color:rgba(255,255,255,.10)}
.pn-badge.fail{color:var(--pn-amber);background:transparent;border-color:rgba(242,208,107,.28);white-space:normal}
.pn-dot{width:7px;height:7px;border-radius:50%;background:var(--pn-accent);animation:pn-pulseDot 2s infinite;flex:none}
.pn-score{font-weight:800;font-size:23px;letter-spacing:-.02em}
.pn-score sub{vertical-align:baseline;bottom:0;font:600 13px/1 var(--pn-mono);color:var(--pn-text-3)}
.pn-arrow{color:var(--pn-text-3);font-size:17px}
.pn-retry-btn{font-size:12.5px;font-weight:650;color:var(--pn-text-2);background:var(--pn-surface-2);border:1px solid var(--pn-border-strong);border-radius:999px;padding:8px 14px;white-space:nowrap;transition:border-color .2s ease,color .2s ease}
.pn-retry-btn:hover{border-color:rgba(255,255,255,.3);color:var(--pn-text)}
.pn-retry-btn[disabled]{opacity:.6;cursor:default}
.pn-retry-err{display:block;margin-top:6px;font-size:12px;color:var(--pn-amber);max-width:220px;text-align:right}
.pn-pending .pn-retry-err{max-width:none;text-align:left}

.pn-list-err{margin:28px 0 0;color:var(--pn-text-2);font-size:15px;background:var(--pn-surface);border:1px solid var(--pn-border);border-radius:18px;padding:22px}
.pn-loadmore{margin-top:6px;display:flex;justify-content:center}

/* skeleton rows while the first snapshot loads */
.pn-skel{height:78px;border-radius:18px;border:1px solid var(--pn-border);background:linear-gradient(90deg,#14171B 25%,#181c21 50%,#14171B 75%);background-size:200% 100%;animation:pn-shimmer 1.6s linear infinite}

/* ------------------------------ empty state ------------------------------ */
.pn-empty{margin-top:28px;background:radial-gradient(120% 140% at 50% -20%,rgba(52,224,161,.14),transparent 60%),var(--pn-surface);border:1px solid rgba(52,224,161,.35);border-radius:26px;padding:56px 28px;text-align:center}
.pn-empty-kicker{margin:0;font:600 12px/1 var(--pn-mono);letter-spacing:.08em;color:var(--pn-accent);text-transform:uppercase}
.pn-empty h2{margin:14px auto 0;font-size:clamp(22px,3.6vw,28px);font-weight:800;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.pn-empty p{margin:12px auto 0;color:var(--pn-text-2);font-size:15.5px;max-width:46ch;text-wrap:pretty}
.pn-empty .pn-cta{margin-top:24px}

/* ------------------------------- scorecard ------------------------------- */
.pn-scbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pn-back{font-size:14px;font-weight:650;color:var(--pn-text-2);padding:8px 0}
.pn-back:hover{color:var(--pn-text)}
.pn-sc-head{margin-top:24px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pn-sc-title{margin:10px 0 0;font-size:clamp(23px,3.8vw,29px);font-weight:800;letter-spacing:-.02em}
.pn-sc-meta{margin:10px 0 0;font:600 12.5px/1 var(--pn-mono);color:var(--pn-text-3)}
.pn-overall{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.pn-overall-num{display:flex;align-items:baseline;gap:6px}
.pn-overall-num b{font-size:54px;font-weight:820;letter-spacing:-.03em;line-height:1}
.pn-overall-num span{font:600 17px/1 var(--pn-mono);color:var(--pn-text-3)}
.pn-overall-label{font:600 12px/1 var(--pn-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pn-accent);background:rgba(52,224,161,.14);border:1px solid rgba(52,224,161,.35);border-radius:999px;padding:6px 11px}
.pn-overall-label.low{color:var(--pn-amber);background:rgba(242,208,107,.12);border-color:rgba(242,208,107,.3)}
.pn-ai-note{font:600 10.5px/1 var(--pn-mono);letter-spacing:.06em;color:var(--pn-text-3);text-transform:uppercase}

.pn-summary{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.pn-summary-col{border:1px solid var(--pn-border);border-radius:16px;padding:18px 20px;background:var(--pn-surface)}
.pn-summary-good{border-left:3px solid var(--pn-accent)}
.pn-summary-work{border-left:3px solid var(--pn-amber)}
.pn-summary-kicker{margin:0;font:600 11px/1 var(--pn-mono);letter-spacing:.08em;text-transform:uppercase}
.pn-summary-good .pn-summary-kicker{color:var(--pn-accent)}
.pn-summary-work .pn-summary-kicker{color:var(--pn-amber)}
.pn-summary-col p+p{margin:10px 0 0;color:var(--pn-text-2);font-size:14.5px;line-height:1.55;text-wrap:pretty}
.pn-summary-missing{margin-top:22px;border:1px solid var(--pn-border);border-radius:16px;padding:18px 20px;background:var(--pn-surface);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pn-summary-missing p{margin:0;color:var(--pn-text-2);font-size:14px;line-height:1.5;max-width:56ch}
.pn-summary-missing-btn{flex:none;font-size:14px;font-weight:650;color:var(--pn-accent-ink);background:var(--pn-accent);border-radius:999px;padding:11px 18px;white-space:nowrap}
.pn-summary-missing-btn:hover{background:var(--pn-accent-2)}
.pn-summary-missing-btn[disabled]{opacity:.6;cursor:default}

.pn-sc-grid{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:14px;align-items:stretch}
.pn-topfix{background:radial-gradient(120% 120% at 80% -10%,rgba(242,208,107,.08),transparent 55%),var(--pn-surface);border:1px solid var(--pn-border);border-radius:18px;padding:24px}
.pn-topfix-kicker{margin:0;font:600 11px/1 var(--pn-mono);letter-spacing:.08em;color:var(--pn-amber);text-transform:uppercase}
.pn-topfix-list{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.pn-topfix-item + .pn-topfix-item{border-top:1px solid var(--pn-border);padding-top:16px}
.pn-topfix-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pn-topfix-row b{font-weight:700;font-size:15.5px}
.pn-topfix-row span{font:700 13px/1 var(--pn-mono);color:var(--pn-amber)}
.pn-topfix-item p{margin:6px 0 0;color:var(--pn-text-2);font-size:14.5px;text-wrap:pretty}
.pn-radar-card{background:var(--pn-surface);border:1px solid var(--pn-border);border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:center}
.pn-radar-inner{width:100%;max-width:570px}
.pn-radar-card svg{width:100%;display:block}
.pn-radar-poly,.pn-radar-dots{animation:pn-radarIn 1s cubic-bezier(.2,.8,.2,1) both}
.pn-radar-legend{margin-top:10px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.pn-radar-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--pn-text-3)}
.pn-radar-legend-item i{width:8px;height:8px;border-radius:50%;display:inline-block}

.pn-dims-kicker{margin:34px 0 0;font:600 11px/1 var(--pn-mono);letter-spacing:.08em;color:var(--pn-text-3);text-transform:uppercase}
.pn-dims{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.pn-dim{background:var(--pn-surface);border:1px solid var(--pn-border);border-radius:16px;overflow:hidden}
.pn-dim-btn{width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px 16px;padding:17px 20px;text-align:left}
.pn-dim-btn:hover{background:rgba(255,255,255,.02)}
.pn-dim-name{font-weight:650;font-size:15.5px}
.pn-dim-score{font:700 14px/1 var(--pn-mono);color:var(--pn-accent)}
.pn-dim-score span{color:var(--pn-text-3);font-weight:600}
.pn-dim-caret{font:600 16px/1 var(--pn-mono);color:var(--pn-text-3);width:16px;text-align:center}
.pn-bar{grid-column:1/-1;display:block;height:6px;border-radius:999px;background:var(--pn-surface-2);overflow:hidden}
.pn-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#5CEBB5,#34E0A1);transform-origin:left;animation:pn-growBar .9s cubic-bezier(.2,.8,.2,1) both}
.pn-dim-body{border-top:1px solid var(--pn-border);padding:20px;display:flex;flex-direction:column;gap:18px;animation:pn-fadeUp .3s ease both}
.pn-dim-body .pn-subkicker{margin:0 0 10px}
.pn-quotes{display:flex;flex-direction:column;gap:12px}
.pn-quote{border-left:2px solid var(--pn-text-3);padding-left:14px}
.pn-quote p{margin:0;font-style:italic;color:var(--pn-text-2);font-size:14.5px;text-wrap:pretty}
.pn-quote span{display:inline-block;margin-top:6px;font:600 11px/1 var(--pn-mono);color:var(--pn-text-3)}
.pn-diag{margin:0;color:var(--pn-text);font-size:14.5px;text-wrap:pretty}
.pn-rewrite{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.pn-re-your{background:var(--pn-surface-3);border:1px solid var(--pn-border);border-radius:12px;padding:16px}
.pn-re-your .pn-subkicker{margin:0 0 8px}
.pn-re-your p{margin:0;font-style:italic;color:var(--pn-text-2);font-size:14px;text-wrap:pretty}
.pn-re-strong{background:linear-gradient(180deg,rgba(52,224,161,.12),transparent);border:1px solid rgba(52,224,161,.35);border-radius:12px;padding:16px}
.pn-re-strong .pn-subkicker{margin:0 0 8px;color:var(--pn-accent)}
.pn-re-strong p{margin:0;color:var(--pn-text);font-size:14px;text-wrap:pretty}

/* --------------------------- scorecard pending --------------------------- */
.pn-pending{margin-top:28px;background:var(--pn-surface);border:1px solid var(--pn-border);border-radius:26px;padding:clamp(28px,5vw,44px);max-width:640px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.pn-pending-kicker{margin:0;display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--pn-mono);letter-spacing:.08em;color:var(--pn-accent);text-transform:uppercase}
.pn-pending-kicker.fail{color:var(--pn-amber)}
.pn-pending h1{margin:16px 0 0;font-size:clamp(22px,3.6vw,28px);font-weight:800;letter-spacing:-.02em}
.pn-pending-sub{margin:10px 0 0;color:var(--pn-text-2);font-size:15.5px;text-wrap:pretty}
.pn-shimbar{margin-top:22px;height:6px;border-radius:999px;background:linear-gradient(90deg,#1A1E24 25%,#262c34 50%,#1A1E24 75%);background-size:200% 100%;animation:pn-shimmer 1.6s linear infinite}
.pn-steps{margin-top:28px;border-top:1px solid var(--pn-border);padding-top:22px}
.pn-steps-list{margin-top:14px;display:flex;flex-direction:column;gap:10px;color:var(--pn-text-2);font-size:14.5px}
.pn-step{display:flex;gap:10px}
.pn-step b{color:var(--pn-accent);font-weight:700}
.pn-shims{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.pn-shim{height:14px;border-radius:6px;background:linear-gradient(90deg,#1A1E24 25%,#20252c 50%,#1A1E24 75%);background-size:200% 100%;animation:pn-shimmer 1.6s linear infinite}
.pn-shim.w72{width:72%}
.pn-shim.w90{width:90%}
.pn-shim.w55{width:55%}

/* -------------------------------- referrals ------------------------------- */
.pn-ref-summary{margin:18px 0 0;color:var(--pn-text-2);font-size:14.5px;text-wrap:pretty}

/* -------------------------------- account -------------------------------- */
.pn-acc-card{margin-top:24px;background:var(--pn-surface);border:1px solid var(--pn-border);border-radius:18px}
.pn-acc-row{padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pn-acc-row + .pn-acc-row{border-top:1px solid var(--pn-border)}
.pn-acc-key{font:600 11px/1 var(--pn-mono);letter-spacing:.08em;color:var(--pn-text-3);text-transform:uppercase}
.pn-acc-val{font-weight:650;font-size:15px}
.pn-acc-plan{margin:7px 0 0;font-weight:650;font-size:15px}
.pn-acc-buycol{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pn-acc-buy{font-size:13.5px;font-weight:650;color:var(--pn-text-3);background:var(--pn-surface-2);border:1px solid var(--pn-border);border-radius:999px;padding:9px 16px;cursor:not-allowed}
.pn-acc-waitlink{font-size:12.5px;font-weight:600}
.pn-danger{margin-top:14px;background:var(--pn-surface);border:1px solid rgba(255,122,122,.3);border-radius:18px;padding:20px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pn-danger-main{flex:1;min-width:220px}
.pn-danger-title{margin:0;font-weight:700;font-size:15px;color:var(--pn-danger)}
.pn-danger-body{margin:7px 0 0;color:var(--pn-text-3);font-size:13.5px;text-wrap:pretty}
.pn-danger-btn{font-size:14px;font-weight:650;color:var(--pn-danger);border:1px solid rgba(255,122,122,.4);border-radius:999px;padding:10px 18px;transition:background .2s ease}
.pn-danger-btn:hover{background:rgba(255,122,122,.1)}
.pn-acc-note{margin:12px 0 0;color:var(--pn-text-3);font-size:13.5px}
.pn-ghost-btn{margin-top:20px;font-size:14.5px;font-weight:650;color:var(--pn-text-2);border:1px solid var(--pn-border-strong);border-radius:999px;padding:11px 20px;transition:border-color .2s ease,color .2s ease}
.pn-ghost-btn:hover{border-color:rgba(255,255,255,.3);color:var(--pn-text)}

/* --------------------------------- auth ---------------------------------- */
.pn-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;box-sizing:border-box}
.pn-auth-card{width:min(420px,100%);background:var(--pn-surface);border:1px solid var(--pn-border);border-radius:26px;padding:clamp(28px,5vw,38px);box-shadow:0 20px 60px -20px rgba(0,0,0,.6);box-sizing:border-box}
.pn-auth-brand{text-align:center;font-size:23px;font-weight:800;letter-spacing:-.03em}
.pn-auth-brand em{font-style:normal;background:linear-gradient(120deg,#34E0A1,#7DF2C7);-webkit-background-clip:text;background-clip:text;color:transparent}
.pn-auth-sub{margin:10px 0 0;text-align:center;color:var(--pn-text-2);font-size:14.5px}
.pn-gbtn{margin-top:26px;width:100%;display:flex;align-items:center;justify-content:center;gap:11px;font-size:15px;font-weight:650;color:var(--pn-text);border:1px solid var(--pn-border-strong);border-radius:999px;padding:13px 18px;transition:border-color .2s ease;box-sizing:border-box}
.pn-gbtn:hover{border-color:rgba(255,255,255,.3)}
.pn-gbadge{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--pn-text);color:var(--pn-bg);font-weight:800;font-size:13px;align-items:center;justify-content:center;flex:none}
.pn-divider{margin:22px 0;display:flex;align-items:center;gap:12px}
.pn-divider i{flex:1;height:1px;background:var(--pn-border)}
.pn-divider span{font:600 11px/1 var(--pn-mono);letter-spacing:.08em;color:var(--pn-text-3);text-transform:uppercase}
.pn-fields{display:flex;flex-direction:column;gap:10px}
.pn-input{width:100%;box-sizing:border-box;background:var(--pn-bg);border:1px solid var(--pn-border-strong);border-radius:12px;color:var(--pn-text);font-size:16px;font-family:inherit;padding:13px 16px}
.pn-input:focus{outline:none;border-color:var(--pn-accent)}
.pn-primary{margin-top:14px;width:100%;font-size:15.5px;font-weight:650;color:var(--pn-accent-ink);background:var(--pn-accent);border-radius:999px;padding:13px 18px;box-shadow:0 0 28px rgba(52,224,161,.22)}
.pn-primary:active{transform:translateY(1px)}
.pn-primary[disabled]{opacity:.6;cursor:default}
.pn-auth-err{margin:12px 0 0;text-align:center;color:var(--pn-danger);font-size:13px;min-height:0}
.pn-consent{margin:18px 0 0;text-align:center;color:var(--pn-text-3);font-size:12.5px;line-height:1.6}
.pn-freebadge-row{margin:14px 0 0;text-align:center}
.pn-freebadge{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--pn-mono);letter-spacing:.05em;color:var(--pn-text-2);border:1px solid var(--pn-border);border-radius:999px;padding:7px 13px}
.pn-auth-lang{margin:18px 0 0;display:flex;justify-content:center}

/* --------------------- referral prompt + got-hired flow -------------------
   Post-session high-score nudge (scorecard view, overall >= 80) and the
   "got hired" acknowledgement (scorecard footer + account view). Both reuse
   the accent (green) token — same family as .pn-cta/.pn-summary-missing-btn —
   since these are positive, celebratory moments, never the danger/amber scale. */
.pn-refprompt{margin-top:22px;position:relative;background:radial-gradient(120% 140% at 50% -20%,rgba(52,224,161,.12),transparent 60%),var(--pn-surface);border:1px solid rgba(52,224,161,.3);border-radius:18px;padding:22px 48px 22px 24px}
.pn-refprompt-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--pn-surface-2);color:var(--pn-text-2);display:grid;place-items:center;font-size:13px}
.pn-refprompt-close:hover{background:var(--pn-border-strong);color:var(--pn-text)}
.pn-refprompt-text{margin:0;color:var(--pn-text);font-size:14.5px;line-height:1.55;text-wrap:pretty;max-width:56ch}

.pn-hired-footer{margin-top:22px}
.pn-hired-section{margin-top:14px}
.pn-hired-err{margin:8px 0 0;color:var(--pn-danger);font-size:13px}
.pn-hired-card{background:radial-gradient(120% 140% at 50% -20%,rgba(52,224,161,.14),transparent 60%),var(--pn-surface);border:1px solid rgba(52,224,161,.35);border-radius:18px;padding:22px 24px}
.pn-hired-text{margin:0;color:var(--pn-text);font-size:14.5px;line-height:1.55;text-wrap:pretty;max-width:56ch}

/* shared "filled accent pill" button, used by the referral-prompt CTA, the
   got-hired celebration's share CTA, and the got-hired action button itself */
.pn-refprompt-cta,.pn-hired-cta,.pn-hired-btn{font-size:14px;font-weight:650;color:var(--pn-accent-ink);background:var(--pn-accent);border-radius:999px;padding:11px 20px}
.pn-refprompt-cta:hover,.pn-hired-cta:hover,.pn-hired-btn:hover{background:var(--pn-accent-2)}
.pn-refprompt-cta,.pn-hired-cta{margin-top:14px;display:inline-flex}
.pn-hired-btn[disabled]{opacity:.6;cursor:default}

/* ---------------------------- mobile bottom nav --------------------------- */
.pn-bnav-spacer{height:64px}
.pn-bnav{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(10,11,13,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--pn-border);display:flex}
.pn-bnav button{flex:1;padding:16px 8px;font:600 12px/1 var(--pn-mono);letter-spacing:.06em;color:var(--pn-text-3);text-transform:uppercase}
.pn-bnav button.active{color:var(--pn-accent)}

/* --------------------------------- boot ---------------------------------- */
.pn-boot{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--pn-text-3);font:600 12px/1 var(--pn-mono);letter-spacing:.08em;text-transform:uppercase}

/* ------------------------- feedback widget (removable) -------------------
   Everything below belongs to public/panel/feedback.js. To remove the
   feature: delete feedback.js, its <script> tag in index.html, and this
   block — nothing above depends on it. */
.pnfb-card{margin-top:22px;position:relative;background:var(--pn-surface);border:1px solid var(--pn-border);border-radius:18px;padding:22px 24px}
.pnfb-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--pn-surface-2);color:var(--pn-text-2);display:grid;place-items:center;font-size:13px;border:0;cursor:pointer}
.pnfb-close:hover{background:var(--pn-border-strong);color:var(--pn-text)}
.pnfb-kicker{margin:0;font:600 11px/1 var(--pn-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pn-accent)}
.pnfb-title{margin:10px 42px 0 0;font-size:19px;font-weight:750;letter-spacing:-.01em}
.pnfb-sub{margin:8px 42px 0 0;color:var(--pn-text-3);font-size:13.5px}
.pnfb-questions{margin-top:20px;display:flex;flex-direction:column;gap:18px}
.pnfb-q{margin:0 0 10px;font-size:14.5px;font-weight:600}
.pnfb-scale{display:flex;align-items:center;gap:8px}
.pnfb-scale-lo,.pnfb-scale-hi{font-size:11.5px;color:var(--pn-text-3);flex:none}
.pnfb-scale-btn{flex:1;height:38px;border-radius:10px;background:var(--pn-surface-2);border:1px solid var(--pn-border);color:var(--pn-text-2);font:600 14px/1 var(--pn-mono);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.pnfb-scale-btn:hover{border-color:var(--pn-border-strong);color:var(--pn-text)}
.pnfb-scale-btn.sel{background:var(--pn-accent);border-color:var(--pn-accent);color:var(--pn-accent-ink)}
.pnfb-yesno{display:flex;gap:10px}
.pnfb-yn-btn{flex:1;height:40px;border-radius:10px;background:var(--pn-surface-2);border:1px solid var(--pn-border);color:var(--pn-text-2);font-size:14px;font-weight:650;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}
.pnfb-yn-btn:hover{border-color:var(--pn-border-strong);color:var(--pn-text)}
.pnfb-yn-btn.sel{background:var(--pn-accent);border-color:var(--pn-accent);color:var(--pn-accent-ink)}
.pnfb-textarea{width:100%;min-height:76px;background:var(--pn-surface-2);border:1px solid var(--pn-border);border-radius:10px;color:var(--pn-text);font:14px/1.5 inherit;padding:10px 12px;resize:vertical;box-sizing:border-box}
.pnfb-textarea:focus{outline:none;border-color:var(--pn-accent)}
.pnfb-err{color:var(--pn-danger);font-size:13px;margin:12px 0 0;min-height:0}
.pnfb-err:empty{margin:0}
.pnfb-actions{margin-top:18px}
.pnfb-submit{font-size:14.5px;font-weight:650;color:var(--pn-accent-ink);background:var(--pn-accent);border-radius:999px;padding:12px 22px;width:100%}
.pnfb-submit:hover{background:var(--pn-accent-2)}
.pnfb-submit[disabled]{opacity:.6;cursor:default}
@media(max-width:520px){.pnfb-scale{flex-wrap:wrap}.pnfb-scale-btn{min-width:44px;flex:1 1 15%}}