/* ═══════════════════════════════════════════════════════════ */
/*  OpportunityAI v2.0 – Premium Theme System                 */
/* ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ─── Theme: Midnight (Default) ───────────────────────────── */
[data-theme="midnight"]{
  --bg:#06070b;--bg2:#0c0e14;--card:rgba(15,17,25,.85);--card2:#151722;
  --brd:rgba(255,255,255,.06);--brd2:rgba(255,255,255,.12);
  --t1:#f1f5f9;--t2:#94a3b8;--t3:#475569;
  --ind:#6366f1;--ind2:#818cf8;--cyan:#22d3ee;--em:#34d399;--amb:#fbbf24;--rose:#fb7185;
  --glow1:#6366f1;--glow2:#22d3ee;--glow3:#34d399;
  --nav-bg:rgba(6,7,11,.88);--glass:blur(20px);
  --card-glass:blur(16px);
  --btn-grad:linear-gradient(135deg,#6366f1,#4f46e5);
  --hero-grad:linear-gradient(135deg,#fff,#818cf8,#22d3ee);
}

/* ─── Theme: Ocean ─────────────────────────────────────────── */
[data-theme="ocean"]{
  --bg:#020617;--bg2:#0a1628;--card:rgba(10,22,48,.85);--card2:#0e1f3d;
  --brd:rgba(56,189,248,.08);--brd2:rgba(56,189,248,.18);
  --t1:#e2e8f0;--t2:#7dd3fc;--t3:#38bdf8;
  --ind:#0284c7;--ind2:#38bdf8;--cyan:#67e8f9;--em:#2dd4bf;--amb:#fcd34d;--rose:#f472b6;
  --glow1:#0284c7;--glow2:#06b6d4;--glow3:#2dd4bf;
  --nav-bg:rgba(2,6,23,.90);--glass:blur(20px);
  --card-glass:blur(16px);
  --btn-grad:linear-gradient(135deg,#0284c7,#0369a1);
  --hero-grad:linear-gradient(135deg,#e2e8f0,#38bdf8,#67e8f9);
}

/* ─── Theme: Cyberpunk ────────────────────────────────────── */
[data-theme="cyberpunk"]{
  --bg:#0a0a0f;--bg2:#12121a;--card:rgba(18,18,30,.85);--card2:#1a1a2e;
  --brd:rgba(236,72,153,.1);--brd2:rgba(236,72,153,.2);
  --t1:#fdf2f8;--t2:#f9a8d4;--t3:#ec4899;
  --ind:#d946ef;--ind2:#f0abfc;--cyan:#22d3ee;--em:#a3e635;--amb:#facc15;--rose:#fb7185;
  --glow1:#d946ef;--glow2:#ec4899;--glow3:#22d3ee;
  --nav-bg:rgba(10,10,15,.92);--glass:blur(20px);
  --card-glass:blur(16px);
  --btn-grad:linear-gradient(135deg,#d946ef,#a855f7);
  --hero-grad:linear-gradient(135deg,#fdf2f8,#f0abfc,#22d3ee);
}

/* ─── Theme: Forest ───────────────────────────────────────── */
[data-theme="forest"]{
  --bg:#0a120a;--bg2:#0e1a0e;--card:rgba(14,26,14,.85);--card2:#142014;
  --brd:rgba(74,222,128,.08);--brd2:rgba(74,222,128,.16);
  --t1:#ecfdf5;--t2:#86efac;--t3:#4ade80;
  --ind:#16a34a;--ind2:#4ade80;--cyan:#34d399;--em:#a3e635;--amb:#fbbf24;--rose:#fb923c;
  --glow1:#16a34a;--glow2:#22c55e;--glow3:#a3e635;
  --nav-bg:rgba(10,18,10,.90);--glass:blur(20px);
  --card-glass:blur(16px);
  --btn-grad:linear-gradient(135deg,#16a34a,#15803d);
  --hero-grad:linear-gradient(135deg,#ecfdf5,#4ade80,#a3e635);
}

/* ─── Theme: Sunset ───────────────────────────────────────── */
[data-theme="sunset"]{
  --bg:#1a0a0a;--bg2:#221210;--card:rgba(34,18,16,.85);--card2:#2a1a16;
  --brd:rgba(251,146,60,.08);--brd2:rgba(251,146,60,.16);
  --t1:#fff7ed;--t2:#fdba74;--t3:#f97316;
  --ind:#ea580c;--ind2:#fb923c;--cyan:#fbbf24;--em:#34d399;--amb:#facc15;--rose:#fb7185;
  --glow1:#ea580c;--glow2:#f97316;--glow3:#fbbf24;
  --nav-bg:rgba(26,10,10,.90);--glass:blur(20px);
  --card-glass:blur(16px);
  --btn-grad:linear-gradient(135deg,#ea580c,#dc2626);
  --hero-grad:linear-gradient(135deg,#fff7ed,#fb923c,#fbbf24);
}

/* ─── Theme: Minimal Light ────────────────────────────────── */
[data-theme="light"]{
  --bg:#f8fafc;--bg2:#f1f5f9;--card:rgba(255,255,255,.92);--card2:#ffffff;
  --brd:rgba(0,0,0,.08);--brd2:rgba(0,0,0,.14);
  --t1:#0f172a;--t2:#475569;--t3:#94a3b8;
  --ind:#4f46e5;--ind2:#6366f1;--cyan:#0891b2;--em:#059669;--amb:#d97706;--rose:#e11d48;
  --glow1:#6366f1;--glow2:#0891b2;--glow3:#059669;
  --nav-bg:rgba(248,250,252,.92);--glass:blur(20px);
  --card-glass:blur(16px);
  --btn-grad:linear-gradient(135deg,#4f46e5,#6366f1);
  --hero-grad:linear-gradient(135deg,#0f172a,#4f46e5,#0891b2);
}
[data-theme="light"] .amb div{opacity:.04}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)}

/* ─── Font & Globals ──────────────────────────────────────── */
:root{--font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--t1);min-height:100vh;overflow-x:hidden;transition:background .5s,color .3s}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

/* Reduced motion */
[data-no-anim="true"] *{animation:none!important;transition:none!important}

/* Compact mode */
[data-compact="true"] .jc{padding:16px}
[data-compact="true"] .pcard{padding:20px}
[data-compact="true"] .dash{padding:24px 0 60px}

/* ─── Ambient Orbs ────────────────────────────────────────── */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb div{position:absolute;border-radius:50%;filter:blur(140px);opacity:.12;animation:fl 25s ease-in-out infinite}
.o1{width:700px;height:700px;background:var(--glow1);top:-250px;left:-150px}
.o2{width:600px;height:600px;background:var(--glow2);bottom:-200px;right:-100px;animation-delay:-8s}
.o3{width:500px;height:500px;background:var(--glow3);top:40%;left:60%;animation-delay:-16s;opacity:.07}
@keyframes fl{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-50px) scale(1.08)}66%{transform:translate(-30px,40px) scale(.92)}}

/* No glass mode */
[data-no-glass="true"] .nav{backdrop-filter:none!important}
[data-no-glass="true"] .card,[data-no-glass="true"] .pcard{backdrop-filter:none!important}

/* ─── Nav ─────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:var(--glass);border-bottom:1px solid var(--brd);padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between;transition:background .4s}
.logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;letter-spacing:-.03em;background:var(--hero-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;cursor:pointer;user-select:none}
.logo-icon{font-size:20px}
.logo-v{font-size:10px;font-weight:600;opacity:.5;letter-spacing:.5px}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-btn{padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600;color:var(--t2);border:1px solid var(--brd);background:none;cursor:pointer;font-family:var(--font);transition:.3s;display:none;align-items:center;gap:6px}
.nav-btn:hover{background:rgba(255,255,255,.05);color:var(--t1);border-color:var(--brd2)}
.nav-btn svg{opacity:.6}
.theme-toggle{width:40px;height:40px;border-radius:12px;border:1px solid var(--brd);background:none;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s;font-family:var(--font)}
.theme-toggle:hover{background:rgba(255,255,255,.05);color:var(--t1);border-color:var(--brd2);transform:rotate(45deg)}
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 24px}

/* ─── Theme Panel ─────────────────────────────────────────── */
.theme-panel{position:fixed;top:0;right:-380px;width:360px;height:100vh;background:var(--bg2);border-left:1px solid var(--brd);z-index:200;transition:right .35s cubic-bezier(.4,0,.2,1);padding:28px;overflow-y:auto}
.theme-panel.open{right:0}
.tp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;opacity:0;pointer-events:none;transition:opacity .3s}
.tp-overlay.open{opacity:1;pointer-events:auto}
.tp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.tp-header h3{font-size:18px;font-weight:800}
.tp-close{width:36px;height:36px;border:1px solid var(--brd);background:none;border-radius:10px;color:var(--t2);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.tp-close:hover{background:rgba(251,113,133,.1);color:var(--rose);border-color:rgba(251,113,133,.2)}
.tp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:28px}
.tp-opt{padding:0;border:2px solid var(--brd);border-radius:14px;background:none;cursor:pointer;overflow:hidden;transition:.3s;font-family:var(--font)}
.tp-opt:hover{border-color:var(--brd2);transform:translateY(-2px)}
.tp-opt[data-theme].active{border-color:var(--ind2);box-shadow:0 0 16px rgba(99,102,241,.2)}
.tp-preview{height:64px;border-radius:0}
.tp-opt span{display:block;padding:10px;font-size:12px;font-weight:700;color:var(--t2);text-align:center}
/* Preview gradients */
.midnight-prev{background:linear-gradient(135deg,#06070b,#6366f1,#22d3ee)}
.ocean-prev{background:linear-gradient(135deg,#020617,#0284c7,#67e8f9)}
.cyberpunk-prev{background:linear-gradient(135deg,#0a0a0f,#d946ef,#22d3ee)}
.forest-prev{background:linear-gradient(135deg,#0a120a,#16a34a,#a3e635)}
.sunset-prev{background:linear-gradient(135deg,#1a0a0a,#ea580c,#fbbf24)}
.light-prev{background:linear-gradient(135deg,#f8fafc,#6366f1,#0891b2)}

/* Toggles */
.tp-extras{display:flex;flex-direction:column;gap:14px}
.tp-toggle{display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid var(--brd);transition:.2s}
.tp-toggle:hover{background:rgba(255,255,255,.04)}
.tp-toggle input{display:none}
.tp-slider{width:42px;height:24px;border-radius:12px;background:rgba(255,255,255,.1);position:relative;transition:.3s;flex-shrink:0}
.tp-slider::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:9px;background:var(--t3);transition:.3s}
.tp-toggle input:checked+.tp-slider{background:var(--ind)}
.tp-toggle input:checked+.tp-slider::after{transform:translateX(18px);background:#fff}
.tp-label{font-size:13px;font-weight:600;color:var(--t2)}

/* ─── Screens ─────────────────────────────────────────────── */
.scr{display:none}.scr.on{display:block}

/* ─── Landing ─────────────────────────────────────────────── */
.land{padding:60px 0 60px;text-align:center;position:relative}
.hero-glow{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:600px;height:300px;background:radial-gradient(ellipse,var(--glow1) 0%,transparent 70%);opacity:.06;pointer-events:none;filter:blur(80px)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:100px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.18);color:var(--ind2);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:24px;animation:fadeIn .6s ease}
.land h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:16px;background:var(--hero-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:fadeIn .8s ease}
.land>p{font-size:16px;color:var(--t2);max-width:580px;margin:0 auto 40px;line-height:1.7;animation:fadeIn 1s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Upload box */
.ubox{max-width:520px;margin:0 auto;background:var(--card);backdrop-filter:var(--card-glass);border:1px solid var(--brd);border-radius:20px;padding:36px;text-align:center;transition:border-color .3s,box-shadow .3s;animation:fadeIn 1.2s ease}
.ubox:hover{border-color:var(--brd2);box-shadow:0 0 40px rgba(99,102,241,.06)}
.ubox h2{font-size:20px;font-weight:800;margin-bottom:6px}
.ubox>p{font-size:14px;color:var(--t2);margin-bottom:20px}
.dz{border:2px dashed rgba(255,255,255,.08);border-radius:14px;padding:44px 24px;cursor:pointer;transition:.3s;background:rgba(255,255,255,.015);position:relative;overflow:hidden}
.dz::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,var(--ind) 0%,transparent 60%);opacity:0;transition:opacity .4s}
.dz:hover::before,.dz.over::before{opacity:.04}
.dz:hover,.dz.over{border-color:var(--ind);background:rgba(99,102,241,.03)}
.dz-icon{position:relative;z-index:1;margin-bottom:8px}
.dz-icon svg{display:block;margin:0 auto;opacity:.7;transition:.3s}
.dz:hover .dz-icon svg{opacity:1;transform:translateY(-4px)}
.dz h3{font-size:14px;font-weight:600;color:var(--t2);margin-bottom:4px;position:relative;z-index:1}
.dz span{font-size:12px;color:var(--t3);position:relative;z-index:1}
.dz input{display:none}
.fshow{margin-top:14px;display:none;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.15);font-size:13px;color:var(--em)}
.fshow.on{display:flex}
.fshow .fn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abtn{margin-top:20px;width:100%;padding:16px;border:none;border-radius:14px;background:var(--btn-grad);color:#fff;font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 24px rgba(99,102,241,.25);position:relative;overflow:hidden}
.abtn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:.3s}
.abtn:hover::before{opacity:1}
.abtn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(99,102,241,.35)}
.abtn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.abtn:disabled::before{display:none}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ─── Platform Marquee ────────────────────────────────────── */
.prow{margin-top:40px;animation:fadeIn 1.4s ease}
.prow>p{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
.prow strong{color:var(--t2)}
.plogos-track{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}
.plogos-scroll{display:flex;gap:10px;animation:marquee 120s linear infinite;width:max-content}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.pl{padding:7px 16px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--brd);font-size:12px;font-weight:700;color:var(--t2);display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;transition:.3s}
.pl:hover{background:rgba(255,255,255,.06);border-color:var(--brd2);transform:scale(1.04)}
.pl .d{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ─── Dashboard ───────────────────────────────────────────── */
.dash{padding:36px 0 80px}
.dash-h{margin-bottom:28px}
.dash-h h2{font-size:26px;font-weight:900;letter-spacing:-.03em;margin-bottom:4px}
.dash-h p{font-size:14px;color:var(--t2)}

/* Profile + Salary Grid */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
@media(max-width:768px){.pgrid{grid-template-columns:1fr}}
.pcard{background:var(--card);backdrop-filter:var(--card-glass);border:1px solid var(--brd);border-radius:20px;padding:28px;transition:border-color .3s,box-shadow .3s,transform .3s}
.pcard:hover{border-color:var(--brd2);box-shadow:0 8px 32px rgba(0,0,0,.15);transform:translateY(-2px)}
.pcard h3{font-size:16px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.pcard h3 svg{flex-shrink:0}
.skills{display:flex;flex-wrap:wrap;gap:6px}
.sk{padding:6px 14px;border-radius:8px;font-size:12px;font-weight:600;background:rgba(99,102,241,.1);color:var(--ind2);border:1px solid rgba(99,102,241,.2);cursor:default;transition:.2s}
.sk:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,.15)}

/* Skill tiers */
.sk.sk-hot{background:rgba(16,185,129,.12);color:var(--em);border-color:rgba(16,185,129,.25)}
.sk.sk-mid{background:rgba(99,102,241,.1);color:var(--ind2);border-color:rgba(99,102,241,.2)}
.sk.sk-base{background:rgba(255,255,255,.05);color:var(--t2);border-color:var(--brd)}

.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:500px){.sgrid{grid-template-columns:1fr}}
.sc{background:var(--bg2);border:1px solid var(--brd);border-radius:14px;padding:18px;text-align:center;transition:.3s}
.sc:hover{border-color:var(--brd2)}
.sc .sv{font-size:22px;font-weight:900;margin-bottom:2px}
.sc .sl{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3)}
.sc .sr{font-size:11px;color:var(--t2);margin-top:6px}

/* ─── Stats ───────────────────────────────────────────────── */
.srow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
@media(max-width:700px){.srow{grid-template-columns:repeat(2,1fr)}}
.st{background:var(--card);backdrop-filter:var(--card-glass);border:1px solid var(--brd);border-radius:14px;padding:18px;text-align:center;transition:.3s}
.st:hover{border-color:var(--brd2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.st .v{font-size:26px;font-weight:900}.st .l{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin-top:4px}

/* ─── Search Links ────────────────────────────────────────── */
.slinks{background:var(--card);backdrop-filter:var(--card-glass);border:1px solid var(--brd);border-radius:20px;padding:28px;margin-bottom:28px;transition:.3s}
.slinks:hover{border-color:var(--brd2)}
.slinks h3{font-size:16px;font-weight:800;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.slinks h3 svg{flex-shrink:0}
.link-cat{margin-bottom:20px}
.link-cat:last-child{margin-bottom:0}
.link-cat-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);margin-bottom:10px;padding-left:4px}
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.slink{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--brd);text-decoration:none;color:var(--t1);font-size:12px;font-weight:600;transition:.3s}
.slink:hover{border-color:var(--brd2);background:rgba(255,255,255,.06);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.slink .d{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.slink span{font-size:10px;color:var(--t3);margin-left:auto}

/* ─── Platform Tabs ───────────────────────────────────────── */
.ptabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pt{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid var(--brd);color:var(--t2);font-size:11px;font-weight:600;cursor:pointer;transition:.3s;font-family:var(--font)}
.pt:hover{background:rgba(255,255,255,.06);border-color:var(--brd2);color:var(--t1)}
.pt.on{background:rgba(99,102,241,.1);border-color:rgba(99,102,241,.3);color:var(--ind2)}
.pt .d{width:8px;height:8px;border-radius:50%}

.sec-t{font-size:18px;font-weight:800;margin-bottom:18px;display:flex;align-items:center;gap:10px}

/* ─── Job Cards ───────────────────────────────────────────── */
.jlist{display:flex;flex-direction:column;gap:14px}
.jc{background:var(--card);backdrop-filter:var(--card-glass);border:1px solid var(--brd);border-radius:20px;padding:24px;transition:.3s;animation:fiu .4s ease both;position:relative;overflow:hidden}
.jc:hover{border-color:var(--brd2);box-shadow:0 12px 40px rgba(0,0,0,.25);transform:translateY(-3px)}
.jc.ft::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--ind2),var(--cyan),transparent)}
.jc.strong-match{border-color:rgba(52,211,153,.15)}
.jc.strong-match::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--em),var(--cyan),transparent)}
.jc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.jc-i{flex:1;min-width:0}
.jc-co{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.cl{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#fff;flex-shrink:0}
.cn{font-size:13px;font-weight:600;color:var(--t2)}
.cp{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--t3);margin-left:8px}
.cp .d{width:6px;height:6px;border-radius:50%}
.jt{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.jm{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--t2)}
.jmi{display:flex;align-items:center;gap:5px}
.jmi svg{width:14px;height:14px;opacity:.6}
.jc-ma{flex-shrink:0;text-align:center;min-width:80px}
.jc-ma .mp{font-size:26px;font-weight:900}
.jc-ma .ml{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3)}
.jc-ma .match-detail{font-size:10px;color:var(--t2);margin-top:4px;font-weight:500}
.jc-ma .exp-fit{font-size:10px;color:var(--em);margin-top:2px;font-weight:600}
.jc-ma .exp-gap{font-size:10px;color:var(--amb);margin-top:2px;font-weight:600}
.jd{font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jtags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tg{padding:5px 12px;border-radius:8px;font-size:12px;font-weight:500}
.tg-m{background:rgba(16,185,129,.1);color:var(--em);border:1px solid rgba(16,185,129,.2)}
.tg-n{background:rgba(255,255,255,.03);color:var(--t2);border:1px solid var(--brd)}
.jbot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--brd);flex-wrap:wrap;gap:10px}
.jsal{font-size:15px;font-weight:800;color:var(--cyan)}
.jsal span{font-size:12px;font-weight:500;color:var(--t3)}
.jap{padding:10px 22px;border-radius:10px;background:var(--btn-grad);color:#fff;font-family:var(--font);font-size:13px;font-weight:700;border:none;cursor:pointer;transition:.3s;text-decoration:none;display:inline-flex;align-items:center;gap:6px;position:relative;overflow:hidden}
.jap::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:.3s}
.jap:hover::before{opacity:1}
.jap:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(99,102,241,.3)}

/* ─── Empty State ─────────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 24px;background:var(--card);border:1px solid var(--brd);border-radius:20px}
.empty-state h3{font-size:18px;font-weight:700;color:var(--t1);margin-bottom:12px}
.empty-state p{font-size:14px;color:var(--t2);line-height:1.7;max-width:500px;margin:0 auto}
.empty-state strong{color:var(--t1)}
.show-lower-btn{margin-top:20px;padding:12px 28px;border:1px solid var(--amb);border-radius:12px;background:rgba(251,191,36,.08);color:var(--amb);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:.3s}
.show-lower-btn:hover{background:rgba(251,191,36,.15);transform:translateY(-1px)}

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

/* ─── Filter Bar ──────────────────────────────────────────── */
.filter-bar{background:var(--card);backdrop-filter:var(--card-glass);border:1px solid var(--brd);border-radius:20px;padding:28px;margin-bottom:24px;transition:.3s}
.filter-bar:hover{border-color:var(--brd2)}
.filter-bar h3{font-size:16px;font-weight:800;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.filter-bar h3 svg{flex-shrink:0}
.fg{margin-bottom:20px}.fg:last-of-type{margin-bottom:0}
.fg-label{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin-bottom:10px}
.fg-chips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--brd);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;transition:.3s;font-family:var(--font)}
.fchip:hover{background:rgba(255,255,255,.06);border-color:var(--brd2);color:var(--t1)}
.fchip.on{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.35);color:var(--ind2);box-shadow:0 2px 8px rgba(99,102,241,.1)}
.fchip .cnt{font-size:10px;opacity:.5;margin-left:2px}
.fchip .d{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.filter-actions{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--brd);align-items:center}
.clear-btn{padding:8px 18px;border-radius:10px;background:rgba(251,113,133,.08);border:1px solid rgba(251,113,133,.15);color:var(--rose);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);transition:.3s}
.clear-btn:hover{background:rgba(251,113,133,.15);border-color:rgba(251,113,133,.3)}
.active-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1}
.af-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:8px;font-size:11px;font-weight:600;background:rgba(99,102,241,.1);color:var(--ind2);border:1px solid rgba(99,102,241,.2)}
.af-tag .x{cursor:pointer;opacity:.6;font-size:14px;line-height:1}.af-tag .x:hover{opacity:1}

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer{position:relative;z-index:1;padding:32px 0;border-top:1px solid var(--brd);margin-top:40px}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.footer-logo{font-size:14px;font-weight:800;background:var(--hero-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.footer-txt{font-size:12px;color:var(--t3)}

/* ─── Responsive ──────────────────────────────────────────── */
@media(max-width:900px){
  .nav{padding:0 16px}
  .land{padding:48px 0 40px}
  .links-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .footer-inner{flex-direction:column;gap:12px;text-align:center}
}
@media(max-width:500px){
  .srow{grid-template-columns:repeat(2,1fr)}
  .theme-panel{width:100%;right:-100%}
}