
:root{
  color-scheme:light;
  --bg:#f7f7f9;
  --surface:#ffffff;
  --surface2:#f2f2f5;
  --surface3:#ebecf0;
  --glass:rgba(255,255,255,.76);
  --glassStrong:rgba(255,255,255,.9);
  --text:#0f1012;
  --muted:#6d6d73;
  --muted2:#a0a0a6;
  --line:rgba(60,60,67,.12);
  --lineStrong:rgba(60,60,67,.2);
  --accent:#007aff;
  --accent2:#5856d6;
  --accentSoft:rgba(0,122,255,.09);
  --green:#248a3d;
  --greenSoft:rgba(52,199,89,.1);
  --orange:#b85d00;
  --orangeSoft:rgba(255,159,10,.11);
  --red:#d70015;
  --redSoft:rgba(255,59,48,.1);
  --shadow:0 18px 60px rgba(20,25,35,.08);
  --shadowDeep:0 30px 110px rgba(10,12,18,.2);
  --sidebar:224px;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#08090b;
    --surface:#0f1013;
    --surface2:#15161a;
    --surface3:#1c1d22;
    --glass:rgba(15,16,19,.74);
    --glassStrong:rgba(15,16,19,.9);
    --text:#f5f5f7;
    --muted:#a2a2a8;
    --muted2:#66676e;
    --line:rgba(255,255,255,.07);
    --lineStrong:rgba(255,255,255,.13);
    --accent:#0a84ff;
    --accent2:#7d7aff;
    --accentSoft:rgba(10,132,255,.11);
    --green:#32d74b;
    --greenSoft:rgba(50,215,75,.1);
    --orange:#ff9f0a;
    --orangeSoft:rgba(255,159,10,.1);
    --red:#ff453a;
    --redSoft:rgba(255,69,58,.1);
    --shadow:0 18px 60px rgba(0,0,0,.28);
    --shadowDeep:0 36px 130px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08090b;--surface:#0f1013;--surface2:#15161a;--surface3:#1c1d22;
  --glass:rgba(15,16,19,.74);--glassStrong:rgba(15,16,19,.9);
  --text:#f5f5f7;--muted:#a2a2a8;--muted2:#66676e;
  --line:rgba(255,255,255,.07);--lineStrong:rgba(255,255,255,.13);
  --accent:#0a84ff;--accent2:#7d7aff;--accentSoft:rgba(10,132,255,.11);
  --green:#32d74b;--greenSoft:rgba(50,215,75,.1);
  --orange:#ff9f0a;--orangeSoft:rgba(255,159,10,.1);
  --red:#ff453a;--redSoft:rgba(255,69,58,.1);
  --shadow:0 18px 60px rgba(0,0,0,.28);--shadowDeep:0 36px 130px rgba(0,0,0,.5);
}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:
    radial-gradient(700px 420px at 83% -10%, rgba(88,86,214,.055), transparent 60%),
    radial-gradient(760px 420px at 18% -16%, rgba(0,122,255,.045), transparent 62%),
    var(--bg);
}
button,input,select,textarea{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
svg{display:block}
.app{min-height:100svh}

/* Sidebar */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:40;
  padding:18px 12px 16px max(12px,env(safe-area-inset-left));
  border-right:1px solid var(--line);
  background:rgba(127,127,127,.018);
  backdrop-filter:blur(24px) saturate(140%);
  display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.brandmark{
  width:31px;height:31px;border-radius:9px;
  display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 8px 20px rgba(0,122,255,.18)
}
.brandtext strong{font-size:12px;display:block;line-height:1.1}
.brandtext span{font-size:10px;color:var(--muted);display:block;margin-top:2px}
.navgroup{margin:5px 0 12px}
.navlabel{padding:0 10px 6px;font-size:9px;color:var(--muted2);font-weight:760;letter-spacing:.08em;text-transform:uppercase}
.navbtn{
  width:100%;height:39px;border:0;background:transparent;border-radius:9px;
  display:flex;align-items:center;gap:10px;padding:0 10px;
  color:var(--muted);font-size:12px;font-weight:620;text-align:left;transition:.16s ease;
}
.navbtn:hover{background:var(--surface2);color:var(--text)}
.navbtn.active{background:var(--surface2);color:var(--text);font-weight:700}
.navbtn svg{width:16px;height:16px}
.navcount{
  margin-left:auto;min-width:20px;height:19px;padding:0 6px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);display:grid;place-items:center;
  font-size:9px;color:var(--muted);font-weight:700
}
.sidebarfoot{margin-top:auto;display:grid;gap:3px}
.sideaction{
  width:100%;height:38px;border:0;background:transparent;border-radius:9px;
  display:flex;align-items:center;gap:10px;padding:0 10px;color:var(--muted);
  font-size:11px;font-weight:620;text-align:left
}
.sideaction:hover{background:var(--surface2);color:var(--text)}
.sideaction svg{width:15px;height:15px}
.sideaction span:last-child{margin-left:auto;font-size:9px}
.profile{
  margin-top:5px;padding:9px 10px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:9px
}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-size:10px;font-weight:800;border:1px solid var(--line)}
.profile strong{font-size:11px;display:block}.profile span{font-size:9px;color:var(--muted);display:block;margin-top:2px}

/* Main */
.main{margin-left:var(--sidebar);min-height:100svh}
.content{width:min(1140px,calc(100vw - var(--sidebar) - 56px));margin:0 auto;padding:38px 0 72px}
.page{display:none}.page.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:.68;transform:translateY(3px)}to{opacity:1;transform:none}}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}
.kicker{font-size:10px;color:var(--muted);font-weight:680;margin-bottom:7px}
h1{margin:0;font-size:35px;line-height:1.02;letter-spacing:-.045em;font-weight:760}
.pagehead p{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.headtools{display:flex;gap:7px}
.iconbtn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;color:var(--muted);box-shadow:0 1px 2px rgba(0,0,0,.02)
}
.iconbtn:hover{color:var(--text);border-color:var(--lineStrong)}
.iconbtn svg{width:16px;height:16px}

/* Career status */
.careerbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:42px;padding:0 13px;margin-bottom:14px;border:1px solid var(--line);
  border-radius:12px;background:var(--glass);backdrop-filter:blur(22px) saturate(160%);
}
.careerbar-left{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:650}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accentSoft)}
.careerbar-right{font-size:10px;color:var(--muted)}

/* Hero */
.hero{
  position:relative;overflow:hidden;min-height:200px;padding:24px;
  border-radius:20px;border:1px solid var(--line);background:var(--surface);
}
.hero:after{
  content:"";position:absolute;inset:auto -90px -130px auto;width:310px;height:310px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,122,255,.085),transparent 64%);pointer-events:none
}
.hero-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px}
.hero-label{font-size:9px;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.hero h2{margin:8px 0 6px;font-size:27px;line-height:1.07;letter-spacing:-.04em}
.hero-company{font-size:12px;color:var(--muted);font-weight:600}
.hero-score{display:flex;align-items:baseline;gap:4px;font-size:29px;font-weight:790;letter-spacing:-.045em}
.hero-score small{font-size:10px;color:var(--muted);font-weight:650;letter-spacing:0}
.hero-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.meta{
  display:inline-flex;align-items:center;height:27px;padding:0 8px;border-radius:7px;
  background:var(--surface2);font-size:10px;color:var(--muted);font-weight:650
}
.meta.money{color:var(--text)}
.hero-bottom{
  position:absolute;z-index:1;left:24px;right:24px;bottom:20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.status{
  display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 8px;border-radius:999px;
  font-size:9px;font-weight:760;color:var(--muted);background:var(--surface2)
}
.status:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted2)}
.status.applied{color:var(--accent);background:var(--accentSoft)} .status.applied:before{background:var(--accent)}
.status.open{color:var(--green);background:var(--greenSoft)} .status.open:before{background:var(--green)}
.status.check{color:var(--orange);background:var(--orangeSoft)} .status.check:before{background:var(--orange)}
.status.bad{color:var(--red);background:var(--redSoft)} .status.bad:before{background:var(--red)}
.textlink{border:0;background:transparent;color:var(--accent);font-size:11px;font-weight:700;padding:6px 0}
.textlink:hover{text-decoration:underline}

/* Stats */
.summarygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.summary{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);min-height:86px}
.summarylabel{font-size:9px;color:var(--muted);font-weight:770;text-transform:uppercase;letter-spacing:.065em}
.summaryvalue{margin-top:7px;font-size:19px;font-weight:760;letter-spacing:-.035em}
.summarysub{margin-top:3px;font-size:9px;color:var(--muted)}
