/* ============================================================
   Career GPS — shared design system (dark-first)
   Loaded by every page. Page-specific styles stay inline.
   Theme: :root = dark (default). [data-theme="light"] = light.
   ============================================================ */

:root{
  /* brand constants (same in both themes) */
  --blue:#2139C2; --navy-deep:#0F1B4C; --navy1:#1a1e36;
  --accent:#FFF522;
  --self:#2980b9; --rel:#DB961F; --biz:#27ae60;

  /* dark surface + text */
  --bg:#0d1220; --bg-2:#0a0f1b; --card:#161d33; --card-2:#1c2542;
  --ink:#e8ecf5; --ink-strong:#ffffff; --muted:#9aa4ba;
  --line:#2a3350; --line-soft:#232c48;
  --link:#8b9cff; --blue-el:#4f6df5; --warm:#e8ab45;
  --ext:#ff7a6b; --int:#c792ea;
  --self-soft:rgba(41,128,185,.16); --rel-soft:rgba(219,150,31,.14); --biz-soft:rgba(39,174,96,.15);
  --ext-soft:rgba(255,122,107,.12); --int-soft:rgba(199,146,234,.12);
  --nav-bg:rgba(13,18,32,.88);
  --shadow:0 2px 10px rgba(0,0,0,.45); --shadow-md:0 10px 34px rgba(0,0,0,.55);
  --hero-grad:linear-gradient(150deg,#0a0f1b 0%,#101736 48%,#1a2a6e 100%);
  --band:linear-gradient(180deg,#101736,#0d1220);
  --ambient:radial-gradient(900px 520px at 92% -120px, rgba(79,109,245,.09), transparent 65%),
            radial-gradient(760px 560px at -140px 45%, rgba(199,146,234,.05), transparent 60%);

  /* fluid type scale */
  --fs-hero:clamp(2.1rem, 4.5vw + 1rem, 3.4rem);
  --fs-h2:clamp(1.5rem, 2vw + .9rem, 2.05rem);
  --fs-h3:clamp(1.15rem, 1vw + .9rem, 1.35rem);
  --fs-body:clamp(1rem, .25vw + .95rem, 1.0625rem);
  --fs-small:clamp(.85rem, .15vw + .82rem, .9rem);

  color-scheme:dark;
}

[data-theme="light"]{
  --bg:#f6f8fb; --bg-2:#eef1fb; --card:#ffffff; --card-2:#ffffff;
  --ink:#1c2b3a; --ink-strong:#0F1B4C; --muted:#5b6675;
  --line:#e4e8ef; --line-soft:#edf0f6;
  --link:#2139C2; --blue-el:#2139C2; --warm:#DB961F;
  --ext:#c0392b; --int:#8e44ad;
  --self-soft:#eaf2fb; --rel-soft:#fbf3e3; --biz-soft:#e9f7ee;
  --ext-soft:#fdecea; --int-soft:#f4ecf9;
  --nav-bg:rgba(255,255,255,.92);
  --shadow:0 2px 10px rgba(15,27,76,.06); --shadow-md:0 8px 26px rgba(15,27,76,.10);
  --hero-grad:linear-gradient(135deg,#1a1e36 0%,#0F1B4C 55%,#2139C2 135%);
  --band:linear-gradient(180deg,#eef1fb,#f6f8fb);
  --ambient:none;
  color-scheme:light;
}

/* ---------- base ---------- */
*{margin:0; padding:0; box-sizing:border-box;}
html{text-wrap:pretty; scroll-behavior:smooth;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink); line-height:1.7; font-size:var(--fs-body);
  background-color:var(--bg); background-image:var(--ambient); background-repeat:no-repeat;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{text-wrap:balance; line-height:1.15; color:var(--ink-strong);}
p,li{text-wrap:pretty;}
a{color:var(--link); text-decoration:none;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--blue-el); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

.wrap{max-width:1060px; margin:0 auto; padding:0 24px;}
.narrow{max-width:760px; margin:0 auto; padding:0 24px;}

/* theme-aware logo pair */
.logo-light{display:none;} .logo-dark{display:block;}
[data-theme="light"] .logo-light{display:block;}
[data-theme="light"] .logo-dark{display:none;}

/* ---------- nav ---------- */
.sitebar{position:sticky; top:0; z-index:60; background:var(--nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.sitebar .nav-inner{max-width:1080px; margin:0 auto; padding:11px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px;}
.sitebar .nav-brand{display:flex; align-items:center; flex:0 0 auto;}
.sitebar .nav-brand img{height:28px; width:auto; display:none;}
.sitebar .nav-brand img.logo-dark{display:block;}
[data-theme="light"] .sitebar .nav-brand img.logo-dark{display:none;}
[data-theme="light"] .sitebar .nav-brand img.logo-light{display:block;}
.sitebar .nav-right{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.sitebar .nav-links{display:flex; align-items:center; gap:20px; font-size:14.5px; font-weight:500;}
.sitebar .nav-links a{color:var(--muted); white-space:nowrap;}
.sitebar .nav-links a:hover{color:var(--ink);}
.sitebar .nav-links a.here{color:var(--link); font-weight:700;}
.sitebar .nav-cta{background:var(--blue-el); color:#fff !important; padding:9px 18px; border-radius:999px; font-weight:600; white-space:nowrap; font-size:14px;}
.sitebar .nav-cta:hover{filter:brightness(1.12);}
.sitebar .nav-auth{display:flex; align-items:center; gap:12px; font-size:14px;}
.sitebar .nav-auth:empty{display:none;}
.sitebar .nav-auth .chip{display:inline-flex; align-items:center; gap:7px; background:var(--card-2); border:1px solid var(--line); color:var(--ink); padding:6px 13px; border-radius:999px; font-weight:600; font-size:13px; white-space:nowrap;}
.sitebar .nav-auth .chip .pts{color:var(--warm); font-weight:700;}

/* theme toggle */
.theme-btn{background:transparent; border:1px solid var(--line); color:var(--muted); width:34px; height:34px; border-radius:999px; cursor:pointer; font-size:15px; line-height:1; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;}
.theme-btn:hover{color:var(--ink); border-color:var(--muted);}
.theme-btn .tb-sun{display:inline;} .theme-btn .tb-moon{display:none;}
[data-theme="light"] .theme-btn .tb-sun{display:none;}
[data-theme="light"] .theme-btn .tb-moon{display:inline;}

/* burger (mobile) */
.nav-burger{display:none; background:transparent; border:1px solid var(--line); border-radius:9px; width:38px; height:34px; cursor:pointer; padding:8px 9px; flex-direction:column; justify-content:space-between;}
.nav-burger span{display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s, opacity .2s;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:760px){
  .sitebar .nav-inner{padding:10px 15px; flex-wrap:wrap;}
  .nav-burger{display:flex;}
  .sitebar .nav-right{display:none; width:100%; flex-direction:column; align-items:stretch; gap:4px; padding:10px 2px 12px;}
  .sitebar .nav-right.open{display:flex;}
  .sitebar .nav-links{flex-direction:column; align-items:stretch; gap:0;}
  .sitebar .nav-links a{padding:11px 8px; border-bottom:1px solid var(--line-soft); font-size:15px;}
  .sitebar .nav-cta{text-align:center; margin-top:10px;}
  .sitebar .nav-auth{padding:10px 8px 0;}
  .theme-btn{margin:10px 8px 0;}
}

/* ---------- buttons ---------- */
.btn{display:inline-block; padding:14px 28px; border-radius:999px; font-weight:600; font-size:15.5px; transition:transform .15s, background .2s, filter .2s; cursor:pointer; border:none; font-family:inherit;}
.btn-primary{background:var(--accent); color:var(--navy-deep);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-blue{background:var(--blue-el); color:#fff;}
.btn-blue:hover{filter:brightness(1.12); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn-ghost:hover{background:var(--card-2);}
.hero .btn-ghost, .on-dark .btn-ghost{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.3);}
.hero .btn-ghost:hover, .on-dark .btn-ghost:hover{background:rgba(255,255,255,.16);}

/* ---------- sections ---------- */
section.block{padding:64px 0;}
.section-label{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--warm); margin-bottom:8px; text-align:center;}
h2.section-title{font-size:var(--fs-h2); font-weight:800; text-align:center; margin-bottom:14px; letter-spacing:-.4px;}
.section-intro{font-size:17px; color:var(--muted); text-align:center; max-width:660px; margin:0 auto 18px;}
.eyebrow{display:inline-block; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:700; background:rgba(255,245,34,.12); padding:6px 14px; border-radius:999px;}
.band{background:var(--band);}

/* ---------- cards ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);}

/* ---------- hero ---------- */
.hero{background:var(--hero-grad); color:#fff; padding:74px 24px 80px; text-align:center; position:relative; overflow:hidden;}
.hero::after{content:""; position:absolute; top:-40%; right:-15%; width:55%; height:130%; background:radial-gradient(circle, rgba(255,245,34,.13), transparent 60%); pointer-events:none;}
.hero::before{content:""; position:absolute; bottom:-45%; left:-12%; width:52%; height:120%; background:radial-gradient(circle, rgba(79,109,245,.20), transparent 60%); pointer-events:none;}
/* "Digital Wave" particle canvas — injected by site.js into .hero */
.hero-wave{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.hero > :not(.hero-wave){position:relative; z-index:1;}
@media print{.hero-wave{display:none;}}
.hero h1{font-size:var(--fs-hero); font-weight:800; letter-spacing:-.5px; color:#fff;}
.hero h1 .hl{color:var(--accent);}

/* ---------- footer ---------- */
footer.sitefoot{background:var(--bg-2); color:var(--muted); padding:44px 24px; text-align:center; font-size:14px; border-top:1px solid var(--line);}
[data-theme="light"] footer.sitefoot{background:var(--navy-deep); color:rgba(255,255,255,.7); border-top:none;}
footer.sitefoot img{height:26px; width:auto; margin-bottom:14px;}
footer.sitefoot a{color:var(--warm);}
[data-theme="light"] footer.sitefoot a{color:var(--accent);}
footer.sitefoot .links{margin:10px 0 16px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap;}
footer.sitefoot .fine{font-size:12.5px; opacity:.6;}

/* ---------- print: always light, hide chrome ---------- */
@media print{
  :root{
    --bg:#ffffff; --bg-2:#ffffff; --card:#ffffff; --card-2:#ffffff;
    --ink:#1c2b3a; --ink-strong:#0F1B4C; --muted:#5b6675;
    --line:#d5dae3; --line-soft:#e4e8ef;
    --link:#2139C2; --blue-el:#2139C2; --warm:#DB961F;
    --ext:#c0392b; --int:#8e44ad;
    --self-soft:#eaf2fb; --rel-soft:#fbf3e3; --biz-soft:#e9f7ee;
    --ext-soft:#fdecea; --int-soft:#f4ecf9;
    --shadow:none; --shadow-md:none;
  }
  body{background:#fff;}
  .sitebar, footer.sitefoot, .theme-btn, .nav-burger{display:none !important;}
}

/* ---------- favorites: bar under the nav + heart buttons (logged-in only) ---------- */
.favbar{position:sticky; top:50px; z-index:55; display:flex; align-items:center; gap:10px; padding:7px 20px; background:var(--nav-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); font-size:12.5px; overflow-x:auto; scrollbar-width:none;}
.favbar::-webkit-scrollbar{display:none;}
.favbar .fb-lbl{flex:0 0 auto; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:10.5px; color:var(--muted);}
.favbar .fb-chips{display:flex; gap:8px; align-items:center; flex:0 1 auto;}
.favbar .fb-chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 6px 4px 11px; color:var(--ink); text-decoration:none; font-weight:600; white-space:nowrap; transition:border-color .15s;}
.favbar .fb-chip:hover{border-color:var(--blue-el);}
.favbar .fb-chip .fb-x{display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; border:none; background:none; color:var(--muted); font-size:13px; line-height:1; cursor:pointer; padding:0;}
.favbar .fb-chip .fb-x:hover{color:var(--ext, #c0392b); background:var(--line);}
.favbar .fb-hint{color:var(--muted); white-space:nowrap;}
.favbar .fb-save{flex:0 0 auto; margin-left:auto;}
.fav-heart{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:999px; min-width:32px; height:32px; padding:0 10px; font-family:inherit; font-size:15px; line-height:1; cursor:pointer; transition:color .15s, border-color .15s, transform .15s;}
.fav-heart .fh-txt{font-size:12px; font-weight:600;}
.fav-heart:hover{border-color:var(--warm); color:var(--warm); transform:scale(1.05);}
.fav-heart.on{color:#e0245e; border-color:rgba(224,36,94,.45);}
.fav-heart[hidden]{display:none;}
@media print{.favbar,.fav-heart{display:none !important;}}