/* ═══════════════════════════════════════════════════════════════════
CAREER STUDIO — AURORA PRISM Design System v3.0
World's First Career Intelligence CSS
═══════════════════════════════════════════════════════════════════ */
/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
/* Void palette */
--void: #01020a;
--abyss: #04060f;
--deep: #070a18;
--surface: #0d1020;
--elevated: #141830;
--float: #1a2040;
--overlay: rgba(4,6,15,.94);
/* Aurora spectrum */
--aurora-gold: #f7ce5b;
--aurora-amber: #ffaa00;
--aurora-fire: #ff6b35;
--aurora-cyan: #00f0ff;
--aurora-teal: #00c9b8;
--aurora-blue: #4f8fff;
--aurora-violet: #8b5cf6;
--aurora-pink: #f472b6;
--aurora-green: #10ffb0;
--aurora-red: #ff3366;
/* Semantic tokens */
--accent: var(--aurora-gold);
--accent2: var(--aurora-cyan);
--accent3: var(--aurora-violet);
--success: var(--aurora-green);
--danger: var(--aurora-red);
--warning: var(--aurora-amber);
/* Glow maps */
--glow-gold: rgba(247,206,91,.14);
--glow-cyan: rgba(0,240,255,.1);
--glow-violet: rgba(139,92,246,.12);
--glow-green: rgba(16,255,176,.1);
--glow-red: rgba(255,51,102,.12);
/* Border system */
--bd0: rgba(255,255,255,.04);
--bd1: rgba(255,255,255,.08);
--bd2: rgba(255,255,255,.13);
--bdg: rgba(247,206,91,.22);
--bdc: rgba(0,240,255,.18);
--bdv: rgba(139,92,246,.2);
/* Typography */
--text-0: #ffffff;
--text-1: #e2e8f8;
--text-2: #94a3c8;
--text-3: #4f5e7a;
--text-4: #2a3550;
/* Radii */
--r3: 3px; --r6: 6px; --r8: 8px;
--r10: 10px; --r12: 12px; --r14: 14px;
--r18: 18px; --r24: 24px; --r32: 32px;
--rpill: 999px;
/* Fonts — --fd (body)/--fh (headings)/--ff (forms) resolve through
--ts-font-primary (Inter, registered by typography-system.css, linked
before this file in index.html's ) when that stylesheet is
present, falling back to the original brand pairing otherwise, so
this file still works correctly standalone. --fm (JetBrains Mono —
labels, badges, timestamps, dense UI chrome) and --fb (Instrument
Serif — italic accent/quote text) are deliberately left as the
original choice: same principle applied on every other page in this
rollout — swap the primary reading/heading typeface, keep the
intentional accent typefaces that give the product its character. */
--fd: var(--ts-font-primary, 'Bricolage Grotesque', 'Cabinet Grotesk', sans-serif);
--fh: var(--ts-font-primary, 'Clash Display', 'Space Grotesk', sans-serif);
--fm: 'JetBrains Mono', 'Fira Code', monospace;
--ff: var(--ts-font-primary, var(--fm)); /* forms/inputs — was a straight alias to the mono font; every real SaaS reference (Stripe/Notion/Linear) uses a normal reading face for input text, not monospace, and the typography spec's 16px input-text requirement assumes the same — falls back to the original mono alias if typography-system.css isn't linked */
--fb: 'Instrument Serif', Georgia, serif;
/* Motion */
--ease: cubic-bezier(.4,0,.2,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--ease-out: cubic-bezier(0,0,.2,1);
--t1: .12s; --t2: .22s; --t3: .38s; --t4: .6s;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0,0,0,.35);
--shadow-md: 0 6px 24px rgba(0,0,0,.45);
--shadow-lg: 0 16px 48px rgba(0,0,0,.55);
--shadow-glow: 0 0 40px rgba(247,206,91,.08);
/* Z-index */
--z-base: 1; --z-above: 10; --z-nav: 100;
--z-modal: 400; --z-toast: 900; --z-cursor: 9999;
}
/* ─── RESET + BASE ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; -webkit-font-smoothing: antialiased; color-scheme: dark; }
body {
background: var(--void);
color: var(--text-1);
font-family: var(--fd);
line-height: 1.6;
overflow-x: hidden;
cursor: default;
min-height: 100vh;
}
/* Reset checkbox/radio/hidden/range from the broad input selector */
input[type=checkbox],
input[type=radio],
input[type=hidden],
input[type=range],
input[type=submit],
input[type=button],
input[type=reset],
input[type=image],
input[type=file] {
min-height: unset;
width: auto;
padding: unset;
background: unset;
border: unset;
border-radius: unset;
box-shadow: unset;
color-scheme: dark;
}
::selection { background: rgba(247,206,91,.22); color: var(--aurora-gold); }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--abyss); }
::-webkit-scrollbar-thumb { background: rgba(247,206,91,.3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(247,206,91,.5); }
/* ─── CANVAS BACKGROUND ─────────────────────────────────────────── */
#bgCanvas {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 50% at 15% 20%, rgba(0,240,255,.035) 0%, transparent 65%),
radial-gradient(ellipse 60% 60% at 85% 80%, rgba(247,206,91,.03) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 50% 50%, rgba(139,92,246,.02) 0%, transparent 70%),
var(--void);
}
/* ─── CURSOR SYSTEM — native cursors always visible ─────────────── */
/* Custom cursor ring is purely decorative — does NOT hide native cursor */
.cdot {
position: fixed; z-index: var(--z-cursor);
width: 5px; height: 5px; border-radius: 50%;
background: var(--aurora-cyan);
pointer-events: none; transform: translate(-50%,-50%);
box-shadow: 0 0 8px var(--aurora-cyan);
transition: background var(--t1), transform var(--t1);
will-change: left, top;
opacity: .7;
}
.cring {
position: fixed; z-index: calc(var(--z-cursor) - 1);
width: 28px; height: 28px; border-radius: 50%;
border: 1px solid rgba(247,206,91,.35);
pointer-events: none; transform: translate(-50%,-50%);
transition: width var(--t2), height var(--t2), border-color var(--t2);
will-change: left, top;
opacity: .6;
}
/* All interactive elements MUST show pointer cursor */
a, button, [role=button], .ntab, .stab, .atab, .btn-p, .btn-gold,
.btn-danger, .btn-outline, .btn-sm, .btn-ghost, .btn-violet,
.oauth-btn, .submit-btn, .qq, .job-card, .plat-card, .skill-tag .del,
select, [onclick], .tog, label[for], .copy-btn, .rcta-btn,
.nav-item, .tab-item, details summary {
cursor: pointer !important;
}
input, textarea { cursor: text !important; }
input[type=checkbox], input[type=radio] { cursor: pointer !important; }
input:disabled, button:disabled, .disabled { cursor: not-allowed !important; }
/* ─── HEADER ─────────────────────────────────────────────────────── */
.hdr {
position: sticky; top: 0; z-index: var(--z-nav);
background: rgba(4,6,15,.88);
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
border-bottom: 1px solid var(--bd0);
}
.hdr::after {
content: '';
position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--aurora-teal) 25%, var(--aurora-gold) 50%, var(--aurora-violet) 75%, transparent 100%);
opacity: .35; animation: hdrLine 8s linear infinite;
}
@keyframes hdrLine {
0% { background-position: 0% 0; }
100% { background-position: 200% 0; }
}
.hdr-inner {
display: flex; align-items: center; gap: 14px;
max-width: 1900px; margin: 0 auto;
padding: 0 22px; height: 60px;
}
/* ─── SPINNING BRAND LOGO ───────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 11px; cursor: pointer; flex-shrink: 0; }
.brand-orbit {
position: relative; width: 38px; height: 38px; flex-shrink: 0;
filter: drop-shadow(0 0 8px rgba(247,206,91,.6));
animation: orbitGlow var(--t4) ease-in-out infinite alternate;
}
@keyframes orbitGlow {
from { filter: drop-shadow(0 0 6px rgba(247,206,91,.5)) drop-shadow(0 0 12px rgba(0,240,255,.2)); }
to { filter: drop-shadow(0 0 14px rgba(247,206,91,.8)) drop-shadow(0 0 28px rgba(0,240,255,.4)); }
}
.brand-orbit .hex-outer { animation: hexRotate 30s linear infinite; transform-origin: 50% 50%; }
.brand-orbit .hex-inner { animation: hexRotate 20s linear infinite reverse; transform-origin: 50% 50%; }
.brand-orbit .hex-core { animation: corePulse 3s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes hexRotate { to { transform: rotate(360deg); } }
@keyframes corePulse {
0%,100% { r: 4; opacity: 1; }
50% { r: 5.5; opacity: .8; }
}
.brand-text { display: flex; flex-direction: column; gap: 0; }
.brand-name {
font-family: var(--fh); font-size: 17px; font-weight: 700;
letter-spacing: .08em; line-height: 1; color: var(--text-0);
}
.brand-name .accent-txt {
background: linear-gradient(135deg, var(--aurora-gold) 0%, var(--aurora-amber) 50%, var(--aurora-cyan) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; background-size: 200%;
animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.brand-sub { font-family: var(--fm); font-size: 8px; color: var(--text-3); letter-spacing: .28em; text-transform: uppercase; }
/* ─── GLOBAL CONTEXT BAR ─────────────────────────────────────────── */
.global-ctx {
display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.ctx-capsule {
display: flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.03); border: 1px solid var(--bd0);
border-radius: var(--rpill); padding: 5px 12px 5px 8px;
transition: border-color var(--t2) var(--ease);
flex-shrink: 0;
}
.ctx-capsule:focus-within { border-color: var(--bdc); }
.ctx-flag { font-size: 14px; line-height: 1; }
.ctx-sel {
background: transparent; border: none; color: var(--text-1);
font-family: var(--fm); font-size: 11px; outline: none; cursor: pointer;
min-width: 160px; max-width: 190px;
}
.ctx-sel option, .ctx-sel optgroup { background: var(--surface); color: var(--text-1); }
.ctx-select { background: transparent; border: none; color: var(--text-1); font-family: var(--fm); font-size: 11px; outline: none; cursor: pointer; min-width: 160px; max-width: 220px; }
.ctx-select option, .ctx-select optgroup { background: var(--surface); color: var(--text-1); }
.ctx-select-wrap { display: flex; align-items: center; gap: 6px; }
.hdr-meters { display: flex; gap: 12px; }
.hdr-meter { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hm-v { font-family: var(--fh); font-size: 12px; font-weight: 600; line-height: 1; }
.hm-l { font-family: var(--fm); font-size: 7px; color: var(--text-3); letter-spacing: .18em; text-transform: uppercase; }
.gold { color: var(--aurora-gold); }
.cyan { color: var(--aurora-cyan); }
.green { color: var(--aurora-green); }
.crimson { color: var(--aurora-red); }
.violet { color: var(--aurora-violet); }
.hdr-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Live indicator */
.live-badge { display: flex; align-items: center; gap: 5px; font-family: var(--fm); font-size: 9px; color: var(--text-3); letter-spacing: .08em; }
.live-dot { width: 6px; height: 6px; background: var(--aurora-green); border-radius: 50%; animation: livePulse 2.2s ease-in-out infinite; box-shadow: 0 0 8px var(--aurora-green); }
@keyframes livePulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.65); opacity: .5; } }
/* User pill */
.user-pill {
display: flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.04); border: 1px solid var(--bd0);
border-radius: var(--rpill); padding: 4px 10px 4px 4px;
cursor: pointer; transition: border-color var(--t2) var(--ease);
position: relative;
}
.user-pill:hover { border-color: var(--bdg); }
.user-av {
width: 24px; height: 24px; border-radius: 50%;
background: linear-gradient(135deg, var(--aurora-gold), var(--aurora-cyan));
display: flex; align-items: center; justify-content: center;
font-family: var(--fh); font-size: 10px; font-weight: 700; color: var(--void);
}
.user-name { font-family: var(--fm); font-size: 10px; color: var(--text-2); max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-arrow { font-size: 8px; color: var(--text-3); }
/* User dropdown */
.user-menu {
position: absolute; top: calc(100% + 7px); right: 0;
background: var(--elevated); border: 1px solid var(--bd1);
border-radius: var(--r14); padding: 7px;
min-width: 176px; z-index: var(--z-above);
box-shadow: var(--shadow-lg);
animation: menuDown .18s var(--ease-out);
}
@keyframes menuDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.um-hdr { font-family: var(--fm); font-size: 9px; color: var(--text-3); padding: 5px 9px; border-bottom: 1px solid var(--bd0); margin-bottom: 4px; letter-spacing: .05em; }
.um-item {
display: flex; align-items: center; gap: 7px;
font-family: var(--fm); font-size: 10px; color: var(--text-2);
padding: 7px 9px; border-radius: var(--r10); cursor: pointer;
transition: background var(--t1) var(--ease), color var(--t1) var(--ease);
}
.um-item:hover { background: rgba(255,255,255,.06); color: var(--text-0); }
.um-item.danger { color: var(--aurora-red); }
.um-item.danger:hover { background: var(--glow-red); }
.hidden { display: none !important; }
/* ─── SIDEBAR TOGGLE BUTTON ─────────────────────────────────────── */
.sb-toggle {
background: transparent;
border: 1px solid var(--bd1);
color: var(--text-2);
width: 34px; height: 34px;
border-radius: var(--r6);
cursor: pointer;
font-size: 18px;
line-height: 1;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: background var(--t2) var(--ease), color var(--t2) var(--ease), border-color var(--t2) var(--ease);
}
.sb-toggle:hover {
background: rgba(247,206,91,.08);
border-color: rgba(247,206,91,.3);
color: var(--aurora-gold);
}
/* ─── APP BODY LAYOUT ────────────────────────────────────────────── */
.app-body {
display: flex;
min-height: calc(100vh - 60px);
position: relative;
}
.app-content {
flex: 1;
min-width: 0;
margin-left: 220px;
transition: margin-left .28s var(--ease);
}
body.sb-collapsed .app-content { margin-left: 0; }
/* ─── SIDEBAR ────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════
WORLD-CLASS SIDEBAR v5.0
═══════════════════════════════════════════════════ */
.sidebar {
position: fixed; left: 0; top: 60px;
width: 232px; height: calc(100vh - 60px);
background: linear-gradient(180deg,rgba(6,8,18,.99) 0%,rgba(4,6,14,1) 100%);
border-right: 1px solid rgba(255,255,255,.065);
display: flex; flex-direction: column;
overflow-y: auto; overflow-x: hidden;
z-index: calc(var(--z-nav) - 1);
padding: 0 0 20px;
scrollbar-width: thin;
scrollbar-color: rgba(0,229,255,.12) transparent;
transition: width .28s cubic-bezier(.4,0,.2,1);
will-change: width;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(0,229,255,.15); border-radius: 2px; }
body.sb-collapsed .sidebar { width: 0; overflow: hidden; }
/* ── USER SNAPSHOT ────────────────────────────────── */
.sb-user-snap {
display: flex; align-items: center; gap: 10px;
padding: 14px 14px 12px;
border-bottom: 1px solid rgba(255,255,255,.06);
flex-shrink: 0;
}
.sb-av {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg,#f7ce5b,#e5a000);
display: flex; align-items: center; justify-content: center;
font-family: var(--ff); font-size: 14px; font-weight: 700; color: #06080f;
}
.sb-user-info { flex: 1; min-width: 0; }
.sb-uname { font-family: var(--ff); font-size: 12px; font-weight: 700; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ustatus { display: flex; align-items: center; gap: 5px; font-family: var(--fm); font-size: 9px; color: var(--text-4); margin-top: 2px; letter-spacing: .05em; }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; background: #00ff88; animation: sbPulse 2.5s ease-in-out infinite; }
@keyframes sbPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,255,136,.4)} 50%{opacity:.7;box-shadow:0 0 0 4px rgba(0,255,136,0)} }
.sb-lang-btn {
flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
background: rgba(0,229,255,.07); border: 1px solid rgba(0,229,255,.18);
font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .2s,border-color .2s;
}
.sb-lang-btn:hover { background: rgba(0,229,255,.16); border-color: rgba(0,229,255,.4); }
/* ── PRIMARY NAV ─────────────────────────────────── */
.sb-primary { padding: 10px 10px 4px; display: flex; flex-direction: column; gap: 2px; }
/* ── NAV TABS ────────────────────────────────────── */
.ntab {
display: flex; align-items: center; gap: 10px;
width: 100%; font-family: var(--fm); font-size: 11.5px; font-weight: 500;
letter-spacing: .02em; white-space: nowrap; color: rgba(255,255,255,.5);
background: transparent; border: none; border-radius: 10px;
padding: 9px 12px; cursor: pointer; text-align: left;
transition: color .18s,background .18s,transform .15s; flex-shrink: 0; position: relative;
}
.ntab:hover { color: var(--text-0); background: rgba(255,255,255,.05); transform: translateX(2px); }
.ntab.active {
color: var(--aurora-gold);
background: linear-gradient(90deg,rgba(247,206,91,.1),rgba(247,206,91,.04));
box-shadow: inset 3px 0 0 var(--aurora-gold);
}
.ntab .ni { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; transition: transform .2s; }
.ntab:hover .ni { transform: scale(1.2); }
.ntab .nl { overflow: hidden; transition: opacity .18s,max-width .28s; max-width: 200px; }
.ntab .sb-hot {
margin-left: auto; font-family: var(--fm); font-size: 8px; font-weight: 700;
letter-spacing: .1em; color: #ff2d55; background: rgba(255,45,85,.12);
border: 1px solid rgba(255,45,85,.2); border-radius: 4px; padding: 2px 5px; flex-shrink: 0;
}
body.sb-collapsed .ntab { padding: 10px; justify-content: center; gap: 0; border-radius: 8px; }
body.sb-collapsed .ntab .nl, body.sb-collapsed .ntab .sb-hot { opacity: 0; max-width: 0; overflow: hidden; }
body.sb-collapsed .ntab .ni { width: auto; }
/* ── COLLAPSIBLE GROUPS ───────────────────────────── */
.sb-group { flex-shrink: 0; }
.sb-group-header {
display: flex; align-items: center; gap: 9px; width: 100%;
background: none; border: none; cursor: pointer;
padding: 9px 14px; color: rgba(255,255,255,.4);
font-family: var(--fm); font-size: 10.5px; font-weight: 600;
letter-spacing: .04em; text-align: left;
transition: color .18s,background .18s; border-radius: 0;
}
.sb-group-header:hover { color: rgba(255,255,255,.75); background: rgba(255,255,255,.03); }
.sb-gh-icon { font-size: 14px; flex-shrink: 0; }
.sb-gh-label { flex: 1; }
.sb-gh-count { display: none; }
.sb-gh-arrow { font-size: 14px; transition: transform .22s; color: rgba(255,255,255,.25); flex-shrink: 0; }
.sb-group.open .sb-gh-arrow { transform: rotate(90deg); }
.sb-group-body {
max-height: 0; overflow: hidden;
transition: max-height .3s cubic-bezier(.4,0,.2,1);
padding: 0 10px;
}
.sb-group.open .sb-group-body { max-height: 500px; }
.sb-group-body .ntab { font-size: 11px; padding: 7px 10px; }
body.sb-collapsed .sb-group { display: none; }
/* ── BOTTOM ACTIONS ──────────────────────────────── */
.sb-bottom {
margin-top: auto; padding: 10px 10px 0;
border-top: 1px solid rgba(255,255,255,.06);
display: flex; flex-direction: column; gap: 2px;
}
.sb-bottom-btn {
display: flex; align-items: center; gap: 9px; width: 100%;
background: none; border: none; border-radius: 9px;
padding: 8px 12px; cursor: pointer; text-align: left;
color: rgba(255,255,255,.35); font-family: var(--fm);
font-size: 11px; font-weight: 500; transition: color .18s,background .18s;
}
.sb-bottom-btn:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); }
.sb-bottom-btn.logout-btn:hover { color: #ff2d55; background: rgba(255,45,85,.06); }
body.sb-collapsed .sb-bottom { display: none; }
/* ─── AURORA MARQUEE ────────────────────────────────────────────── */
.marquee {
overflow: hidden; white-space: nowrap;
border-bottom: 1px solid var(--bd0);
background: linear-gradient(90deg, transparent, rgba(247,206,91,.025), rgba(0,240,255,.025), rgba(139,92,246,.025), transparent);
padding: 6px 0; position: relative; z-index: var(--z-base);
}
.mtrack {
display: inline-block; animation: ticker 55s linear infinite;
font-family: var(--fm); font-size: 9px; letter-spacing: .26em;
color: var(--text-3); text-transform: uppercase;
}
.mtrack b { color: var(--aurora-gold); margin: 0 16px; font-weight: 400; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ─── MAIN CONTENT ───────────────────────────────────────────────── */
.main { position: relative; z-index: var(--z-base); max-width: 1600px; margin: 0 auto; padding: 24px 28px 80px; }
/* ─── TABS ───────────────────────────────────────────────────────── */
.tab { display: none !important; }
.tab.active { display: block !important; animation: tabReveal .32s var(--ease-out); }
@keyframes tabReveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
/* ─── PANEL HEADER ───────────────────────────────────────────────── */
.ph { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--bd0); position: relative; }
.ph::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 52px; height: 1px; background: linear-gradient(90deg, var(--aurora-gold), var(--aurora-cyan)); }
.pt {
font-family: var(--fh); font-size: clamp(22px,3.2vw,40px);
font-weight: 700; letter-spacing: -.025em; line-height: 1.05; margin-bottom: 5px;
}
.pt em {
background: linear-gradient(135deg, var(--aurora-gold) 0%, var(--aurora-amber) 40%, var(--aurora-cyan) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; font-style: normal;
background-size: 200%; animation: gradientShift 5s ease-in-out infinite;
}
.pd { font-family: var(--fm); font-size: 11px; color: var(--text-2); letter-spacing: .02em; }
/* ─── GRID SYSTEM ───────────────────────────────────────────────── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.g3 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.span2 { grid-column: span 2; }
/* ─── AURORA CARDS ───────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--bd0);
border-radius: var(--r18);
padding: 20px 22px;
transition: border-color var(--t2) var(--ease), transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
position: relative; overflow: hidden;
}
/* Aurora shimmer layer */
.card::before {
content: ''; position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(135deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 50%);
pointer-events: none;
}
/* Glow edge on hover */
.card::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
background: radial-gradient(circle at 50% 0%, rgba(247,206,91,.04) 0%, transparent 70%);
opacity: 0; pointer-events: none;
transition: opacity var(--t3) var(--ease);
}
.card:hover { border-color: var(--bd1); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card:hover::after { opacity: 1; }
.card.accent-card { border-color: var(--bdg); background: linear-gradient(135deg, var(--surface), rgba(247,206,91,.02)); }
.card.cyan-card { border-color: var(--bdc); background: linear-gradient(135deg, var(--surface), rgba(0,240,255,.015)); }
.card.violet-card { border-color: var(--bdv); background: linear-gradient(135deg, var(--surface), rgba(139,92,246,.015)); }
.card.danger-card { border-color: rgba(255,51,102,.2); }
/* Card header */
.ch { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ci { font-size: 18px; flex-shrink: 0; }
.ch h3 { font-family: var(--fm); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-1); flex: 1; }
.cdesc { font-family: var(--fb); font-size: 14px; color: var(--text-2); margin-bottom: 13px; line-height: 1.65; font-style: italic; }
/* ─── WORLD-FIRST BADGES ─────────────────────────────────────────── */
.bdg { font-family: var(--fm); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--rpill); flex-shrink: 0; display: inline-flex; align-items: center; line-height: 1; }
.bdg { background: rgba(255,255,255,.05); color: var(--text-3); border: 1.5px solid var(--bd0); }
.bdg.live { background: var(--glow-cyan); color: var(--aurora-cyan); border: 1.5px solid var(--bdc); }
.bdg.world { background: linear-gradient(135deg, rgba(247,206,91,.15), rgba(0,240,255,.1), rgba(139,92,246,.1)); color: var(--aurora-gold); border: 1.5px solid rgba(247,206,91,.5); animation: worldBadge 3s ease-in-out infinite; }
.bdg.new-feat { background: var(--glow-green); color: var(--aurora-green); border: 1.5px solid rgba(16,255,176,.35); }
@keyframes worldBadge {
0%,100% { box-shadow: 0 0 0 0 rgba(247,206,91,.22); }
50% { box-shadow: 0 0 0 5px rgba(247,206,91,0); }
}
/* ─── WORLD-FIRST BANNER ─────────────────────────────────────────── */
.wfb { position: relative; margin-top: 18px; }
.wfp { font-family: var(--fm); font-size: 8px; letter-spacing: .32em; color: var(--aurora-gold); text-transform: uppercase; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.wfp::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(247,206,91,.4), transparent); }
/* ═══════════════════════════════════════════════════════════
UNIFORM FORM SYSTEM — v4.0 REDESIGN
All inputs, selects, textareas share one visual language
══════════════════════════════════════════════════════════ */
/* ─── FIELD GROUP ──────────────────────────────────────── */
.fg {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
.fg label {
font-family: var(--fm);
font-size: 9px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--text-2);
padding-left: 2px;
}
/* ─── ROW GRID ─────────────────────────────────────────── */
.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fr3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* ═══════════════════════════════════════════════════════════
CORE INPUT STYLES — uniform across ALL fields
══════════════════════════════════════════════════════════ */
input,
input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
input[type=search],
input[type=date],
input[type=time],
input[type=month],
input[type=week],
input[type=datetime-local],
textarea,
.sel,
select {
/* Size & spacing */
width: 100%;
min-height: 46px;
padding: 13px 16px;
font-size: 13px;
/* Typography */
font-family: var(--fm);
font-weight: 400;
color: var(--text-0);
letter-spacing: .02em;
line-height: 1.45;
/* Background — uniform dark with subtle depth */
background: rgba(8, 12, 28, 0.88);
/* Border — visible, not harsh */
border: 1.5px solid rgba(255,255,255,.12);
border-radius: 12px;
/* Focus ring prep */
outline: none;
box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.03);
/* Transitions */
transition:
border-color .2s ease,
background .2s ease,
box-shadow .2s ease,
transform .15s ease;
/* Behaviour */
-webkit-appearance: none;
appearance: none;
caret-color: var(--aurora-cyan);
resize: vertical;
/* Force dark theme on native widgets (date/time pickers on Windows/Chrome) */
color-scheme: dark;
}
/* ─── HOVER STATE ──────────────────────────────────────── */
input:hover:not(:focus):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
textarea:hover:not(:focus),
.sel:hover:not(:focus),
select:hover:not(:focus) {
border-color: rgba(255,255,255,.2);
background: rgba(8,12,28,.92);
}
/* ─── FOCUS STATE — glowing cyan ring ─────────────────── */
input:focus,
textarea:focus,
.sel:focus,
select:focus {
border-color: rgba(0,240,255,.6);
background: rgba(0,240,255,.028);
box-shadow:
inset 0 2px 6px rgba(0,0,0,.3),
0 0 0 3px rgba(0,240,255,.1),
0 0 18px rgba(0,240,255,.06);
transform: translateY(-1px);
}
/* ─── PLACEHOLDER ──────────────────────────────────────── */
input::placeholder,
textarea::placeholder {
color: rgba(148,163,200,.4);
font-style: italic;
font-size: 12px;
}
/* ─── TEXTAREA SPECIFIC ────────────────────────────────── */
textarea {
min-height: 110px;
resize: vertical;
line-height: 1.65;
}
textarea.tall { min-height: 180px; }
textarea.short { min-height: 72px; }
textarea.xtall { min-height: 280px; }
/* ─── SELECT / DROPDOWN ────────────────────────────────── */
.sel,
select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234f5e7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
}
.sel option,
.sel optgroup,
select option {
background: var(--elevated);
color: var(--text-1);
padding: 8px 12px;
}
/* ─── DISABLED STATE ───────────────────────────────────── */
input:disabled,
textarea:disabled,
.sel:disabled,
select:disabled {
opacity: .45;
cursor: not-allowed;
background: rgba(8,12,28,.5);
}
/* ─── VALID / INVALID ──────────────────────────────────── */
input:valid:not(:placeholder-shown):not([type=password]) { border-color: rgba(16,255,176,.25); }
input:invalid:not(:placeholder-shown) { border-color: rgba(255,51,102,.3); }
/* ─── INPUT WITH ICON PREFIX ───────────────────────────── */
.fg-icon { position: relative; }
.fg-icon input { padding-left: 42px; }
.fg-icon .fi-icon {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
font-size: 14px; color: var(--text-3); pointer-events: none;
}
/* ─── TOGGLE / CHECKBOX ────────────────────────────────── */
.tog {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--fm);
font-size: 11px;
color: var(--text-1);
cursor: pointer;
user-select: none;
padding: 10px 14px;
background: rgba(8,12,28,.7);
border: 1.5px solid rgba(255,255,255,.1);
border-radius: 10px;
transition: all .2s;
}
.tog:hover { border-color: var(--bdc); color: var(--aurora-cyan); }
.tog input[type=checkbox] {
accent-color: var(--aurora-cyan);
width: 15px; height: 15px;
cursor: pointer;
flex-shrink: 0;
}
/* ─── RANGE SLIDER ─────────────────────────────────────── */
input[type=range] {
-webkit-appearance: auto;
appearance: auto;
accent-color: var(--aurora-gold);
cursor: pointer;
min-height: auto;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
input[type=range]:focus { transform: none; box-shadow: none; border-color: transparent; }
/* ─── SEARCH INPUT ─────────────────────────────────────── */
input[type=search] {
padding-right: 38px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8' stroke='%234f5e7a' stroke-width='2' fill='none'/%3E%3Cpath d='m21 21-4.35-4.35' stroke='%234f5e7a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
}
/* ─── TAG / CHIP INPUT ─────────────────────────────────── */
.skill-tags, .tag-input-wrap {
display: flex;
flex-wrap: wrap;
gap: 7px;
min-height: 50px;
padding: 10px 14px;
background: rgba(8,12,28,.88);
border: 1.5px solid rgba(255,255,255,.12);
border-radius: 12px;
cursor: text;
transition: border-color .2s, box-shadow .2s;
align-items: center;
}
.skill-tags:focus-within, .tag-input-wrap:focus-within {
border-color: rgba(0,240,255,.6);
box-shadow: 0 0 0 3px rgba(0,240,255,.1), 0 0 18px rgba(0,240,255,.06);
}
.skill-input {
background: transparent;
border: none;
outline: none;
color: var(--text-0);
font-family: var(--fm);
font-size: 12px;
flex: 1;
min-width: 130px;
caret-color: var(--aurora-cyan);
padding: 2px 0;
}
.skill-tag {
display: flex; align-items: center; gap: 6px;
background: rgba(247,206,91,.08);
border: 1px solid rgba(247,206,91,.25);
border-radius: 20px;
padding: 4px 11px 4px 11px;
font-family: var(--fm); font-size: 10px;
color: var(--aurora-gold); letter-spacing: .04em;
white-space: nowrap;
}
.skill-tag .del {
cursor: pointer; color: rgba(247,206,91,.5);
font-size: 13px; line-height: 1;
transition: color .15s;
}
.skill-tag .del:hover { color: var(--aurora-red); }
/* ═══════════════════════════════════════════════════════════
BUTTON SYSTEM — redesigned uniform set
══════════════════════════════════════════════════════════ */
.btn-p, .btn-gold, .btn-danger, .btn-outline, .btn-sm, .btn-ghost, .btn-violet {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
font-family: var(--fm);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
border: none;
border-radius: 12px;
padding: 14px 20px;
cursor: pointer;
transition: all .22s cubic-bezier(.4,0,.2,1);
position: relative;
overflow: hidden;
white-space: nowrap;
user-select: none;
text-decoration: none;
}
/* Shimmer effect */
.btn-p::before, .btn-gold::before, .btn-danger::before, .btn-violet::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
transform: translateX(-130%);
transition: transform .5s ease;
}
.btn-p:hover::before, .btn-gold:hover::before, .btn-danger:hover::before, .btn-violet:hover::before { transform: translateX(130%); }
/* Primary — cyan */
.btn-p {
background: linear-gradient(135deg, rgba(0,200,220,.9), rgba(0,150,170,.85));
color: #fff;
border: 1px solid rgba(0,240,255,.2);
}
.btn-p:hover { background: linear-gradient(135deg, var(--aurora-cyan), var(--aurora-teal)); box-shadow: 0 0 32px rgba(0,240,255,.28); transform: translateY(-2px); }
/* Gold */
.btn-gold {
background: linear-gradient(135deg, var(--aurora-gold), #c9a030);
color: #04060f;
border: 1px solid rgba(247,206,91,.3);
}
.btn-gold:hover { box-shadow: 0 0 36px rgba(247,206,91,.35); transform: translateY(-2px); }
/* Danger */
.btn-danger {
background: linear-gradient(135deg, rgba(255,51,102,.85), rgba(200,20,70,.8));
color: #fff;
border: 1px solid rgba(255,51,102,.25);
}
.btn-danger:hover { box-shadow: 0 0 32px rgba(255,51,102,.28); transform: translateY(-2px); }
/* Outline */
.btn-outline {
background: rgba(0,240,255,.04);
border: 1.5px solid rgba(0,240,255,.3);
color: var(--aurora-cyan);
}
.btn-outline:hover { background: rgba(0,240,255,.09); border-color: var(--aurora-cyan); box-shadow: 0 0 18px rgba(0,240,255,.12); transform: translateY(-1px); }
/* Violet */
.btn-violet {
background: linear-gradient(135deg, var(--aurora-violet), rgba(100,40,200,.85));
color: #fff;
border: 1px solid rgba(139,92,246,.3);
}
.btn-violet:hover { box-shadow: 0 0 32px rgba(139,92,246,.3); transform: translateY(-2px); }
/* Small */
.btn-sm {
background: rgba(255,255,255,.05);
border: 1.5px solid rgba(255,255,255,.12);
color: var(--text-1);
padding: 9px 16px;
font-size: 9.5px;
width: auto;
border-radius: 8px;
}
.btn-sm:hover { border-color: var(--bdc); color: var(--aurora-cyan); background: rgba(0,240,255,.06); }
/* btn-s — alias for btn-sm used in world-first template feature tabs */
.btn-s {
background: rgba(255,255,255,.05);
border: 1.5px solid rgba(255,255,255,.12);
color: var(--text-1, #e2e8f0);
padding: 7px 14px;
font-size: 12px;
border-radius: 8px;
cursor: pointer;
transition: all .18s;
white-space: nowrap;
}
.btn-s:hover { border-color: var(--aurora-cyan, #00f0ff); color: var(--aurora-cyan, #00f0ff); background: rgba(0,240,255,.06); }
.btn-s:disabled { opacity: .4; cursor: not-allowed; }
.btn-s.active, .tpl-feature-btn.active {
background: linear-gradient(135deg, rgba(0,240,255,.18), rgba(0,200,150,.12));
border-color: var(--aurora-cyan, #00f0ff);
color: var(--aurora-cyan, #00f0ff);
box-shadow: 0 0 12px rgba(0,240,255,.2);
}
/* Ghost */
.btn-ghost {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
color: var(--text-2);
padding: 9px 16px;
font-size: 10px;
width: auto;
border-radius: 8px;
}
.btn-ghost:hover { color: var(--text-1); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
/* Disabled state for ALL buttons */
.btn-p:disabled, .btn-gold:disabled, .btn-danger:disabled,
.btn-outline:disabled, .btn-sm:disabled, .btn-ghost:disabled, .btn-violet:disabled {
opacity: .4;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* Button group */
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-group .btn-sm, .btn-group .btn-ghost { flex: 1; min-width: 80px; }
.btn-p, .btn-gold, .btn-danger, .btn-outline, .btn-sm, .btn-ghost {
font-family: var(--fm); font-size: 10.5px; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
border: none; border-radius: var(--r10);
padding: 10px 18px; cursor: pointer;
transition: all var(--t2) var(--ease);
position: relative; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
/* Shine sweep */
.btn-p::before, .btn-gold::before, .btn-danger::before {
content: ''; position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
transform: translateX(-120%); transition: transform .55s var(--ease);
}
.btn-p:hover::before, .btn-gold:hover::before, .btn-danger:hover::before { transform: translateX(120%); }
.btn-p {
width: 100%; margin-top: 8px;
background: linear-gradient(135deg, rgba(0,200,212,.9) 0%, rgba(0,150,168,.85) 100%);
color: var(--void); box-shadow: 0 0 22px rgba(0,240,255,.12), 0 2px 8px rgba(0,0,0,.3);
}
.btn-p:hover { background: linear-gradient(135deg, var(--aurora-cyan), var(--aurora-teal)); box-shadow: 0 0 36px rgba(0,240,255,.24); transform: translateY(-1px); }
.btn-p:active { transform: translateY(0); }
.btn-gold {
width: 100%; margin-top: 8px;
background: linear-gradient(135deg, var(--aurora-gold), var(--aurora-amber));
color: var(--void); box-shadow: 0 0 22px var(--glow-gold), 0 2px 8px rgba(0,0,0,.3);
}
.btn-gold:hover { box-shadow: 0 0 40px rgba(247,206,91,.35); transform: translateY(-1px); }
.btn-danger {
width: 100%; margin-top: 8px;
background: linear-gradient(135deg, rgba(220,38,80,.9), rgba(180,0,50,.85));
color: #fff; box-shadow: 0 0 20px rgba(255,51,102,.14);
}
.btn-danger:hover { box-shadow: 0 0 32px rgba(255,51,102,.28); transform: translateY(-1px); }
.btn-outline {
width: 100%; margin-top: 8px;
background: transparent; border: 1px solid var(--bd1); color: var(--text-2);
}
.btn-outline:hover { border-color: var(--bdc); color: var(--aurora-cyan); background: rgba(0,240,255,.04); }
.btn-sm {
background: rgba(255,255,255,.05); border: 1px solid var(--bd1);
color: var(--text-2); padding: 6px 13px; font-size: 9px; margin-top: 0;
}
.btn-sm:hover { border-color: var(--bdc); color: var(--aurora-cyan); }
.btn-ghost {
background: transparent; color: var(--text-3); font-size: 9px; padding: 5px 10px; margin-top: 0;
}
.btn-ghost:hover { color: var(--text-1); }
.tpl {
font-family: var(--fm); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
background: rgba(255,255,255,.03); border: 1px solid var(--bd0); border-radius: var(--rpill);
color: var(--text-3); padding: 4px 12px; cursor: pointer; transition: all var(--t2) var(--ease);
}
.tpl:hover { border-color: rgba(247,206,91,.28); color: var(--aurora-gold); background: rgba(247,206,91,.04); }
.qtpl { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.copy-btn {
font-family: var(--fm); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
background: rgba(255,255,255,.04); border: 1px solid var(--bd0); border-radius: var(--r6);
color: var(--text-2); padding: 5px 11px; cursor: pointer; transition: all var(--t2) var(--ease);
margin-top: 7px; display: inline-flex; align-items: center; gap: 4px;
}
.copy-btn:hover { border-color: var(--bdc); color: var(--aurora-cyan); }
/* ─── BRAIN LAYOUT ───────────────────────────────────────────────── */
.brain-layout { display: grid; grid-template-columns: 1fr 284px; gap: 16px; align-items: start; }
.chat-panel {
background: var(--surface); border: 1px solid var(--bd0);
border-radius: var(--r18); display: flex; flex-direction: column;
height: 556px; overflow: hidden;
}
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.msg { display: flex; gap: 8px; animation: msgIn .24s var(--ease-out); }
.msg.user { flex-direction: row-reverse; }
@keyframes msgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.av {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--aurora-teal), var(--aurora-gold));
display: flex; align-items: center; justify-content: center;
font-family: var(--fm); font-size: 8px; font-weight: 700; color: var(--void);
}
.msg.user .av { background: linear-gradient(135deg, var(--aurora-gold), var(--aurora-amber)); }
.mb {
max-width: 76%; background: var(--deep); border: 1px solid var(--bd0);
border-radius: var(--r14); padding: 10px 13px;
font-family: var(--fb); font-size: 14.5px; line-height: 1.7;
}
.msg.user .mb { background: rgba(247,206,91,.06); border-color: rgba(247,206,91,.15); }
.mb strong { color: var(--aurora-gold); font-family: var(--fd); }
.mb em { color: var(--aurora-teal); font-style: italic; }
.ci-area { padding: 12px; border-top: 1px solid var(--bd0); }
.ci-area textarea { border-radius: var(--r10); resize: none; margin-bottom: 8px; }
.ci-row { display: flex; align-items: center; gap: 7px; }
.bsend {
font-family: var(--fm); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
background: linear-gradient(135deg, var(--aurora-gold), var(--aurora-amber));
color: var(--void); border: none; border-radius: var(--r10);
padding: 8px 14px; cursor: pointer; transition: all var(--t2) var(--ease); flex-shrink: 0;
}
.bsend:hover { box-shadow: 0 0 22px var(--glow-gold); transform: translateY(-1px); }
/* Brain sidebar */
.bsidebar { display: flex; flex-direction: column; gap: 12px; }
.sc { background: var(--surface); border: 1px solid var(--bd0); border-radius: var(--r14); padding: 14px; }
.sc-t { font-family: var(--fm); font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }
.qlist { display: flex; flex-direction: column; gap: 4px; }
.qq {
background: rgba(255,255,255,.02); border: 1px solid var(--bd0); border-radius: var(--r6);
color: var(--text-2); font-family: var(--fm); font-size: 9.5px;
padding: 6px 9px; text-align: left; cursor: pointer; transition: all var(--t2) var(--ease); line-height: 1.5;
}
.qq:hover { border-color: var(--bdc); color: var(--aurora-cyan); transform: translateX(2px); }
.mkt-box { font-family: var(--fm); font-size: 10px; color: var(--text-3); line-height: 1.6; padding: 7px; background: rgba(0,0,0,.2); border-radius: var(--r10); min-height: 46px; }
.ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ssv { background: rgba(0,0,0,.2); border-radius: var(--r10); padding: 8px; text-align: center; }
.ssv span { display: block; font-family: var(--fh); font-size: 18px; font-weight: 700; color: var(--aurora-gold); line-height: 1; }
.ssv label { font-family: var(--fm); font-size: 7.5px; color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; display: block; }
/* ─── STREAMING PANELS ───────────────────────────────────────────── */
.spanel, .spanel-lg {
background: rgba(4,6,15,.75); border: 1px solid var(--bd0); border-radius: var(--r14);
padding: 15px; min-height: 160px; transition: border-color var(--t3) var(--ease);
position: relative; overflow-y: auto; max-height: 600px;
}
.spanel-lg { min-height: 380px; }
.spanel.live { border-color: var(--aurora-teal); box-shadow: 0 0 20px rgba(0,201,184,.08); }
.spanel.live::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--aurora-teal), var(--aurora-cyan), var(--aurora-gold)); animation: liveBar 2s linear infinite; border-radius: var(--r14) var(--r14) 0 0; }
@keyframes liveBar { 0% { opacity: 1; } 50% { opacity: .4; } 100% { opacity: 1; } }
.spanel.done { border-color: rgba(16,255,176,.18); }
.stext { font-family: var(--fb); font-size: 14.5px; line-height: 1.82; color: var(--text-1); word-break: break-word; }
.stext strong { color: var(--aurora-gold); font-weight: 700; }
.stext em { color: var(--aurora-teal); font-style: italic; }
.scursor { display: inline-block; width: 2px; height: 15px; background: var(--aurora-cyan); margin-left: 2px; animation: blink .75s step-end infinite; vertical-align: text-bottom; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
/* ─── MARKDOWN RENDER ENGINE — CareerStudioMax Response Format ───── */
.stext .md-h1 { font-family: var(--fd); font-size: 20px; font-weight: 700; color: var(--aurora-gold); margin: 18px 0 8px; letter-spacing: -.01em; line-height: 1.3; border-bottom: 1px solid rgba(247,206,91,.15); padding-bottom: 6px; }
.stext .md-h2 { font-family: var(--fd); font-size: 16px; font-weight: 700; color: var(--aurora-cyan); margin: 16px 0 7px; letter-spacing: -.005em; line-height: 1.35; }
.stext .md-h3 { font-family: var(--fd); font-size: 13.5px; font-weight: 600; color: var(--aurora-violet); margin: 12px 0 5px; text-transform: uppercase; letter-spacing: .06em; }
.stext .md-sec { font-family: var(--fd); font-size: 14px; font-weight: 700; color: var(--aurora-gold); margin: 16px 0 8px; padding: 8px 14px; background: linear-gradient(90deg, rgba(247,206,91,.06), transparent); border-left: 3px solid var(--aurora-gold); border-radius: 0 6px 6px 0; line-height: 1.4; }
.stext .md-p { margin: 0 0 10px; color: var(--text-1); line-height: 1.82; }
.stext .md-ul { margin: 4px 0 12px 0; padding: 0; list-style: none; }
.stext .md-ul li { position: relative; padding: 3px 0 3px 18px; line-height: 1.7; color: var(--text-1); }
.stext .md-ul li::before { content: '▸'; position: absolute; left: 0; color: var(--aurora-cyan); font-size: 11px; top: 5px; }
.stext .md-ol { margin: 4px 0 12px 0; padding: 0; list-style: none; counter-reset: md-ol; }
.stext .md-ol li { position: relative; padding: 3px 0 3px 26px; line-height: 1.7; counter-increment: md-ol; }
.stext .md-ol li::before { content: counter(md-ol); position: absolute; left: 0; width: 20px; height: 20px; background: rgba(0,240,255,.1); border: 1px solid rgba(0,240,255,.25); border-radius: 50%; font-family: var(--fm); font-size: 10px; font-weight: 700; color: var(--aurora-cyan); display: flex; align-items: center; justify-content: center; top: 3px; line-height: 20px; text-align: center; }
.stext .ic { font-family: var(--fc); font-size: 12.5px; background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.18); border-radius: 4px; padding: 1px 6px; color: var(--aurora-green); white-space: nowrap; }
.stext .md-a { color: var(--aurora-cyan); text-decoration: underline; text-underline-offset: 3px; }
.stext .md-a:hover { color: var(--aurora-gold); }
.stext .md-hr { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 14px 0; }
.stext .md-gap { height: 8px; }
.stext .md-table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 13px; }
.stext .md-table th { font-family: var(--fm); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--aurora-gold); border-bottom: 1px solid rgba(247,206,91,.2); padding: 6px 10px; text-align: left; }
.stext .md-table td { padding: 7px 10px; border-bottom: 1px solid var(--bd0); color: var(--text-1); vertical-align: top; }
.stext .md-table tr:hover td { background: rgba(255,255,255,.02); }
.stext .md-callout { background: rgba(0,240,255,.04); border: 1px solid rgba(0,240,255,.12); border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
.stext .md-warn { background: rgba(247,206,91,.04); border: 1px solid rgba(247,206,91,.15); border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
/* Chat message markdown */
.mb .stext .md-h1 { font-size: 17px; }
.mb .stext .md-h2 { font-size: 14.5px; }
.mb .stext .md-h3 { font-size: 12px; }
.es { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; gap: 8px; opacity: .28; }
.ei { font-size: 32px; filter: grayscale(1); }
.es p { font-family: var(--fm); font-size: 10px; color: var(--text-3); letter-spacing: .08em; text-align: center; }
/* Confidence footer */
.conf-footer { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--bd0); }
.clbl { font-family: var(--fm); font-size: 7.5px; letter-spacing: .15em; color: var(--text-3); text-transform: uppercase; white-space: nowrap; }
.cbar-w { flex: 1; height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.cbar-f { height: 100%; background: linear-gradient(90deg, var(--aurora-teal), var(--aurora-gold)); border-radius: 2px; transition: width 1.2s var(--ease); }
.cval { font-family: var(--fm); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
/* ─── SUB TABS ───────────────────────────────────────────────────── */
.sub-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; background: rgba(255,255,255,.02); border: 1px solid var(--bd0); border-radius: var(--r14); padding: 3px; width: fit-content; max-width: 100%; }
.stab { font-family: var(--fm); font-size: 9.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); background: transparent; border: none; border-radius: var(--r10); padding: 6px 13px; cursor: pointer; transition: all var(--t2) var(--ease); }
.stab:hover { color: var(--text-0); background: rgba(255,255,255,.05); }
.stab.active { color: var(--aurora-cyan); background: rgba(0,240,255,.06); border: 1px solid var(--bdc); }
.sub { display: none; } .sub.active { display: block; animation: tabReveal .25s var(--ease-out); }
/* ─── CUSTOM SUB-NAV (Transformer / CSTM-1 / Future-Self / Identity / Life-Sim / Psychology) ── */
/* Standardised active state for all custom sub-tab button variants */
.ct-sub.active,
.cstm-sub-btn.active,
.fs-sub-btn.active,
.im-sub-btn.active,
.ls-sub-btn.active,
.pl-sub-btn.active {
background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(0,240,255,.1)) !important;
color: var(--aurora-cyan) !important;
border: 1px solid var(--bdc) !important;
}
/* ─── ATS SCORE RINGS (shared SVG helpers) ────────────────────────── */
.ring-svg { transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.06); }
.ring-fill { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
/* ─── PLATFORM GRID ──────────────────────────────────────────────── */
.plat-controls { margin-bottom: 16px; display: flex; flex-direction: column; gap: 9px; }
.plat-search { max-width: 340px; }
.plat-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.pf { font-family: var(--fm); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.03); border: 1px solid var(--bd0); border-radius: var(--rpill); color: var(--text-3); padding: 4px 12px; cursor: pointer; transition: all var(--t2) var(--ease); }
.pf:hover { border-color: var(--bdc); color: var(--aurora-cyan); }
.pf.active { background: var(--glow-gold); border-color: var(--bdg); color: var(--aurora-gold); }
.plat-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 11px; }
.plat-card { background: var(--surface); border: 1px solid var(--bd0); border-radius: var(--r14); padding: 15px; transition: all var(--t2) var(--ease); position: relative; }
.plat-card:hover { border-color: var(--bd1); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.plat-card.tierS { border-color: rgba(247,206,91,.18); }
.plat-card.tierS::after { content: '★ S'; position: absolute; top: 9px; right: 9px; font-family: var(--fm); font-size: 7.5px; color: var(--aurora-gold); background: var(--glow-gold); border: 1px solid var(--bdg); border-radius: var(--rpill); padding: 2px 6px; letter-spacing: .1em; }
.plat-name { font-family: var(--fh); font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.plat-cov { font-family: var(--fm); font-size: 9px; color: var(--text-3); margin-bottom: 7px; letter-spacing: .04em; }
.plat-spec { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.plat-tag { font-family: var(--fm); font-size: 7.5px; padding: 2px 6px; border-radius: var(--rpill); background: var(--glow-cyan); color: var(--aurora-cyan); border: 1px solid var(--bdc); letter-spacing: .05em; }
.plat-link-btn { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fm); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--aurora-gold); text-decoration: none; border: 1px solid var(--bdg); border-radius: var(--r6); padding: 4px 9px; transition: all var(--t2) var(--ease); }
.plat-link-btn:hover { background: var(--glow-gold); }
.plat-count { font-family: var(--fm); font-size: 9.5px; color: var(--text-3); margin-top: 12px; letter-spacing: .07em; }
/* ─── SALARY GRID ────────────────────────────────────────────────── */
.sal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; align-content: start; }
.sal-card { background: var(--surface); border: 1px solid var(--bd0); border-radius: var(--r14); padding: 15px; }
.sal-level { font-family: var(--fm); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--aurora-gold); margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--bd0); }
.sal-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.sal-row:last-child { border-bottom: none; }
.sal-curr { font-family: var(--fm); font-size: 9px; color: var(--text-2); letter-spacing: .07em; }
.sal-val { font-family: var(--fh); font-size: 12px; font-weight: 600; color: var(--text-0); }
/* ─── PIPELINE ───────────────────────────────────────────────────── */
.pip-hdr { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 12px; }
.ps { background: rgba(0,0,0,.2); border: 1px solid var(--bd0); border-radius: var(--r10); padding: 8px; text-align: center; }
.ps span { display: block; font-family: var(--fh); font-size: 21px; font-weight: 700; color: var(--aurora-gold); line-height: 1; }
.ps label { font-family: var(--fm); font-size: 7.5px; color: var(--text-3); letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; display: block; }
/* ─── NEGOTIATION ────────────────────────────────────────────────── */
.ng-tracker { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: rgba(0,0,0,.28); border-radius: var(--r14); margin-bottom: 12px; gap: 7px; flex-wrap: wrap; }
.ng-tv { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ng-tn { font-family: var(--fh); font-size: 18px; font-weight: 700; line-height: 1; }
.ng-tl { font-family: var(--fm); font-size: 7.5px; color: var(--text-3); letter-spacing: .14em; text-transform: uppercase; }
.ng-mood { font-family: var(--fm); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; padding: 2.5px 8px; border-radius: var(--rpill); }
.ng-mood.Firm { background: var(--glow-red); color: var(--aurora-red); }
.ng-mood.Flexible { background: var(--glow-green); color: var(--aurora-green); }
.ng-mood.Impressed{ background: var(--glow-gold); color: var(--aurora-gold); }
.ng-mood.Annoyed { background: rgba(255,51,102,.18); color: var(--aurora-red); }
.ng-mood.Neutral { background: rgba(255,255,255,.04); color: var(--text-2); }
.ng-hm { background: rgba(255,51,102,.05); border: 1px solid rgba(255,51,102,.18); border-radius: var(--r10); padding: 11px; margin-bottom: 7px; animation: msgIn .24s var(--ease-out); }
.ng-you { background: rgba(16,255,176,.05); border: 1px solid rgba(16,255,176,.13); border-radius: var(--r10); padding: 11px; margin-bottom: 7px; animation: msgIn .24s var(--ease-out); }
.ng-whisper { background: var(--glow-gold); border: 1px dashed var(--bdg); border-radius: var(--r10); padding: 8px 11px; margin-bottom: 7px; font-family: var(--fm); font-size: 9.5px; color: var(--aurora-gold); line-height: 1.55; }
.ng-label { font-family: var(--fm); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
/* ─── MEDIA GENERATION ───────────────────────────────────────────── */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px; margin-top: 14px; }
.media-card { background: var(--surface); border: 1px solid var(--bd0); border-radius: var(--r18); overflow: hidden; transition: all var(--t2) var(--ease); }
.media-card:hover { border-color: var(--bd1); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.media-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--deep); display: block; }
.media-img-sq { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--deep); display: block; }
.media-body { padding: 12px 14px; }
.media-title { font-family: var(--fd); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.media-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.media-btn { font-family: var(--fm); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.05); border: 1px solid var(--bd0); border-radius: var(--rpill); color: var(--text-2); padding: 4px 10px; cursor: pointer; transition: all var(--t2) var(--ease); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.media-btn:hover { border-color: var(--bdc); color: var(--aurora-cyan); }
.media-btn.dl { border-color: var(--bdg); color: var(--aurora-gold); }
.media-btn.dl:hover { background: var(--glow-gold); }
.img-loading { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--deep), var(--surface)); display: flex; align-items: center; justify-content: center; }
.img-loading-sq { aspect-ratio: 1; }
.img-loader { width: 32px; height: 32px; border: 2px solid var(--bd1); border-top-color: var(--aurora-gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Platform size pills */
.size-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.size-pill { font-family: var(--fm); font-size: 8px; padding: 3px 9px; border-radius: var(--rpill); background: rgba(255,255,255,.04); border: 1px solid var(--bd0); color: var(--text-3); cursor: pointer; transition: all var(--t2) var(--ease); }
.size-pill:hover, .size-pill.active { border-color: var(--bdg); color: var(--aurora-gold); background: var(--glow-gold); }
/* Artifact preview frame */
.artifact-frame { width: 100%; min-height: 400px; border: 1px solid var(--bd1); border-radius: var(--r14); background: #fff; overflow: hidden; }
.artifact-frame iframe { width: 100%; height: 500px; border: none; }
/* ─── LANGUAGE TRANSLATOR ────────────────────────────────────────── */
.lang-grid { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 12px; align-items: start; margin-bottom: 14px; }
.lang-swap { display: flex; align-items: center; justify-content: center; padding-top: 28px; }
.lang-swap-btn { background: rgba(255,255,255,.06); border: 1px solid var(--bd1); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--t2) var(--ease); font-size: 14px; color: var(--aurora-gold); }
.lang-swap-btn:hover { background: var(--glow-gold); border-color: var(--bdg); transform: rotate(180deg); }
/* ─── CULTURE GRID ───────────────────────────────────────────────── */
.cul-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 9px; margin-top: 13px; }
.cul-card { background: var(--deep); border: 1px solid var(--bd0); border-radius: var(--r10); padding: 12px; transition: all var(--t2) var(--ease); cursor: pointer; }
.cul-card:hover { border-color: var(--aurora-cyan); background: rgba(0,229,255,.04); transform: translateY(-2px); }
.cul-card:hover .cul-name { color: var(--aurora-cyan); }
.cul-card::after { content: '🌐'; position: absolute; top: 8px; right: 8px; font-size: 10px; opacity: 0; transition: opacity .2s; }
.cul-card { position: relative; }
.cul-card:hover::after { opacity: .5; }
.cul-flag { font-size: 19px; margin-bottom: 5px; }
.cul-name { font-family: var(--fh); font-size: 12px; font-weight: 600; color: var(--aurora-gold); margin-bottom: 5px; }
.cul-tip { font-family: var(--fm); font-size: 9px; color: var(--text-2); line-height: 1.55; letter-spacing: .02em; }
/* ─── ANALYTICS ──────────────────────────────────────────────────── */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 12px; }
.an-card { background: var(--surface); border: 1px solid var(--bd0); border-radius: var(--r14); padding: 16px; text-align: center; }
.an-val { font-family: var(--fh); font-size: 30px; font-weight: 700; background: linear-gradient(135deg, var(--aurora-gold), var(--aurora-cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 4px; }
.an-label { font-family: var(--fm); font-size: 8.5px; color: var(--text-2); letter-spacing: .12em; text-transform: uppercase; }
.badge-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.badge-item { background: var(--glow-gold); border: 1px solid var(--bdg); border-radius: var(--rpill); padding: 5px 12px; font-family: var(--fm); font-size: 9.5px; color: var(--aurora-gold); letter-spacing: .07em; }
/* ─── [LIVE DATA] / [AI ANALYSIS] response labels ───────────────────
Fact vs interpretation, always visibly distinguished — see
careercamp-ai's grounding layer + cs-markdown.js _applyDataBadges */
.cs-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fm); font-size: 9px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: var(--rpill, 999px); vertical-align: middle; white-space: nowrap; margin: 0 2px; cursor: help; }
.cs-badge-live { background: rgba(0,229,195,.12); border: 1px solid rgba(0,229,195,.35); color: var(--aurora-cyan, #00e5c3); }
.cs-badge-ai { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.35); color: var(--aurora-violet, #8b5cf6); }
.activity-item { padding: 8px 0; border-bottom: 1px solid var(--bd0); display: flex; align-items: center; gap: 9px; font-family: var(--fm); font-size: 9.5px; color: var(--text-2); }
.activity-dot { width: 5px; height: 5px; background: var(--aurora-cyan); border-radius: 50%; flex-shrink: 0; }
/* ─── COMMUNITY ──────────────────────────────────────────────────── */
.post-card { background: var(--deep); border: 1px solid var(--bd0); border-radius: var(--r14); padding: 13px; margin-bottom: 9px; transition: all var(--t2) var(--ease); }
.post-card:hover { border-color: var(--bd1); }
.post-type-pill { font-family: var(--fm); font-size: 7.5px; padding: 2px 7px; border-radius: var(--rpill); display: inline-block; margin-bottom: 6px; letter-spacing: .1em; text-transform: uppercase; }
.post-type-pill.success { background: var(--glow-green); color: var(--aurora-green); }
.post-type-pill.question { background: var(--glow-cyan); color: var(--aurora-cyan); }
.post-type-pill.tip { background: var(--glow-gold); color: var(--aurora-gold); }
.post-type-pill.discussion { background: rgba(255,255,255,.04); color: var(--text-2); }
.post-title { font-family: var(--fh); font-size: 13px; font-weight: 600; margin-bottom: 5px; line-height: 1.3; }
.post-body { font-family: var(--fb); font-size: 13.5px; color: var(--text-2); line-height: 1.65; margin-bottom: 8px; }
.post-meta { display: flex; align-items: center; gap: 10px; font-family: var(--fm); font-size: 9px; color: var(--text-3); flex-wrap: wrap; }
.post-tag { background: rgba(255,255,255,.04); border-radius: var(--rpill); padding: 2px 7px; font-family: var(--fm); font-size: 7.5px; color: var(--text-3); letter-spacing: .06em; }
/* ─── TAG LISTS ──────────────────────────────────────────────────── */
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tag { font-family: var(--fm); font-size: 8.5px; padding: 2.5px 8px; border-radius: var(--rpill); letter-spacing: .05em; }
.tag.ok { background: var(--glow-green); color: var(--aurora-green); border: 1px solid rgba(16,255,176,.22); }
.tag.warn { background: var(--glow-gold); color: var(--aurora-gold); border: 1px solid var(--bdg); }
.tag.err { background: var(--glow-red); color: var(--aurora-red); border: 1px solid rgba(255,51,102,.2); }
.tag.info { background: var(--glow-cyan); color: var(--aurora-cyan); border: 1px solid var(--bdc); }
.tag.neu { background: rgba(255,255,255,.04); color: var(--text-2); border: 1px solid var(--bd0); }
/* ─── JOB CARDS ──────────────────────────────────────────────────── */
.job-card { background: var(--deep); border: 1px solid var(--bd0); border-radius: var(--r14); padding: 13px; margin-bottom: 9px; transition: all var(--t2) var(--ease); position: relative; }
.job-card:hover { border-color: var(--bd1); transform: translateX(3px); }
.job-title { font-family: var(--fh); font-size: 13.5px; font-weight: 600; }
.job-co { font-family: var(--fm); font-size: 9.5px; color: var(--text-2); margin-top: 2px; }
.job-match { position: absolute; top: 11px; right: 11px; font-family: var(--fh); font-size: 18px; font-weight: 700; color: var(--aurora-green); }
.job-meta-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.job-tag { font-family: var(--fm); font-size: 8px; padding: 2px 7px; border-radius: var(--r3); background: rgba(255,255,255,.04); color: var(--text-3); letter-spacing: .07em; text-transform: uppercase; }
.apply-btn { font-family: var(--fm); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; background: var(--glow-gold); border: 1px solid var(--bdg); border-radius: var(--r6); color: var(--aurora-gold); padding: 4px 10px; cursor: pointer; transition: all var(--t2) var(--ease); margin-top: 7px; display: inline-block; }
.apply-btn:hover { background: rgba(247,206,91,.12); }
/* ─── PORTFOLIO URL ───────────────────────────────────────────────── */
.portfolio-url { background: var(--glow-green); border: 1px solid rgba(16,255,176,.2); border-radius: var(--r10); padding: 11px 14px; font-family: var(--fm); font-size: 11.5px; color: var(--aurora-green); display: flex; align-items: center; gap: 9px; margin-top: 12px; flex-wrap: wrap; }
.portfolio-url a { color: var(--aurora-green); text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ─── ALERTS ─────────────────────────────────────────────────────── */
.alert { font-family: var(--fm); font-size: 10.5px; padding: 9px 13px; border-radius: var(--r10); letter-spacing: .03em; }
.alert.ok { background: var(--glow-green); border: 1px solid rgba(16,255,176,.28); color: var(--aurora-green); }
.alert.err { background: var(--glow-red); border: 1px solid rgba(255,51,102,.28); color: var(--aurora-red); }
.alert.inf { background: var(--glow-cyan); border: 1px solid var(--bdc); color: var(--aurora-cyan); }
/* ─── TOAST NOTIFICATIONS ────────────────────────────────────────── */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
.toast { background: var(--elevated); border: 1px solid var(--bd1); border-radius: var(--r14); padding: 10px 14px; font-family: var(--fm); font-size: 10px; color: var(--text-0); box-shadow: var(--shadow-lg); animation: toastIn .22s var(--ease-out); max-width: 272px; letter-spacing: .03em; pointer-events: auto; }
.toast.ok { border-color: rgba(16,255,176,.3); }
.toast.err { border-color: rgba(255,51,102,.3); }
.toast.inf { border-color: var(--bdc); }
@keyframes toastIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
/* ─── LOADING OVERLAY ────────────────────────────────────────────── */
.load-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(4,6,15,.9); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; }
.load-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.load-spin svg { filter: drop-shadow(0 0 20px var(--aurora-gold)); }
.load-inner p { font-family: var(--fm); font-size: 11px; letter-spacing: .16em; color: var(--text-2); }
.load-bar { width: 170px; height: 2px; background: rgba(255,255,255,.06); border-radius: 1px; overflow: hidden; }
.load-fill { height: 100%; background: linear-gradient(90deg, var(--aurora-teal), var(--aurora-gold), var(--aurora-violet), var(--aurora-teal)); background-size: 300%; animation: loadAurora 2s linear infinite; }
@keyframes loadAurora { from { background-position: 0% 0; } to { background-position: 300% 0; } }
/* ─── MODAL ──────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(4,6,15,.9); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-box { background: var(--elevated); border: 1px solid var(--bd1); border-radius: var(--r24); padding: 28px; max-width: 510px; width: 92%; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-ttl { font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--aurora-gold); margin-bottom: 16px; }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
kbd { font-family: var(--fm); font-size: 8.5px; background: rgba(255,255,255,.07); border: 1px solid var(--bd1); border-radius: 4px; padding: 2.5px 6px; color: var(--aurora-gold); letter-spacing: .05em; }
.sk { display: flex; align-items: center; gap: 8px; padding: 6px; background: rgba(0,0,0,.2); border-radius: var(--r6); }
.sk span { font-family: var(--fm); font-size: 9.5px; color: var(--text-2); }
/* ─── INTERVIEW ──────────────────────────────────────────────────── */
.iv-status { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: rgba(0,0,0,.28); border-radius: var(--r14); margin-bottom: 13px; }
.iv-q-num { font-family: var(--fh); font-size: 24px; font-weight: 700; color: var(--aurora-gold); line-height: 1; }
.iv-prog { font-family: var(--fm); font-size: 9.5px; color: var(--text-3); }
.iv-timer { font-family: var(--fm); font-size: 10.5px; color: var(--aurora-cyan); margin-left: auto; }
.iv-q-box { background: linear-gradient(135deg, rgba(247,206,91,.04), rgba(0,240,255,.04)); border: 1px solid rgba(247,206,91,.18); border-radius: var(--r14); padding: 16px; font-family: var(--fb); font-size: 16px; color: var(--text-0); margin-bottom: 12px; line-height: 1.55; min-height: 56px; }
.voice-btn { display: flex; align-items: center; gap: 7px; font-family: var(--fm); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,51,102,.07); border: 1px solid rgba(255,51,102,.22); border-radius: var(--r10); color: var(--aurora-red); padding: 8px 14px; cursor: pointer; transition: all var(--t2) var(--ease); }
.voice-btn.active { background: var(--glow-red); animation: voicePulse 1s ease-in-out infinite; }
@keyframes voicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,51,102,.4); } 50% { box-shadow: 0 0 0 7px rgba(255,51,102,0); } }
/* ─── PROGRESS BAR ───────────────────────────────────────────────── */
.progress-bar { width: 100%; height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; margin-top: 9px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--aurora-teal), var(--aurora-gold)); border-radius: 2px; transition: width .8s var(--ease); }
/* ─── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1280px) { .brain-layout { grid-template-columns: 1fr; } .g2,.g3 { grid-template-columns: 1fr; } .sal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
.hdr-inner { flex-wrap: wrap; height: auto; padding: 10px; }
.hdr-meters { gap: 8px; }
.sidebar { width: 56px; }
.sidebar .sb-section-label { opacity: 0; padding: 4px 0; pointer-events: none; }
.sidebar .ntab { padding: 10px; justify-content: center; gap: 0; }
.sidebar .ntab .nl { opacity: 0; max-width: 0; }
.sidebar .ntab .ni { width: auto; }
.app-content { margin-left: 56px; }
.main { padding: 12px 12px 60px; }
.fr { grid-template-columns: 1fr; }
.score-ring-wrap { grid-template-columns: repeat(3,1fr); }
.ng-tracker { gap: 9px; }
.sub-nav { width: 100%; overflow-x: auto; }
.media-grid { grid-template-columns: 1fr; }
.lang-grid { grid-template-columns: 1fr; }
.lang-swap { display: none; }
}
/* ═══ CAREER OS ADDITIONS ════════════════════════════════ */
/* ─── TWIN CARD ──────────────────────────────────────────── */
.twin-card {
background: linear-gradient(135deg, var(--surface), rgba(139,92,246,.03));
border: 1px solid var(--bdv); border-radius: var(--r18); padding: 24px;
}
.twin-archetype {
font-family: var(--fh); font-size: 22px; font-weight: 800;
background: linear-gradient(135deg,var(--aurora-gold),var(--aurora-violet));
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
margin-bottom: 6px;
}
.twin-stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 16px 0; }
.twin-stat { background: rgba(0,0,0,.25); border: 1px solid var(--bd0); border-radius: var(--r10); padding: 12px; text-align: center; }
.twin-stat-v { font-family: var(--fh); font-size: 20px; font-weight: 700; color: var(--aurora-gold); display: block; line-height: 1; }
.twin-stat-l { font-family: var(--fm); font-size: 7.5px; color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; display: block; }
.career-path-row {
display: flex; gap: 0; margin: 14px 0; overflow-x: auto; padding-bottom: 4px;
}
.cp-step {
flex: 1; min-width: 110px; background: rgba(0,0,0,.2); border: 1px solid var(--bd0);
border-radius: var(--r10); padding: 12px 10px; text-align: center; position: relative;
}
.cp-step:not(:last-child)::after {
content: '→'; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
color: var(--text-3); font-size: 14px; z-index: 1;
}
.cp-year { font-family: var(--fm); font-size: 8px; color: var(--text-3); letter-spacing: .15em; text-transform: uppercase; }
.cp-title { font-family: var(--fh); font-size: 12px; font-weight: 700; color: var(--text-0); margin: 4px 0; }
.cp-salary { font-family: var(--fm); font-size: 10px; color: var(--aurora-green); }
/* ─── HEATMAP ────────────────────────────────────────────── */
.heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; margin: 14px 0; }
.hm-card { background: var(--surface); border: 1px solid var(--bd0); border-radius: var(--r14); padding: 16px; transition: var(--tr); }
.hm-card:hover { border-color: var(--bd1); transform: translateY(-2px); }
.hm-card.hot { border-color: rgba(255,107,53,.3); }
.hm-card.warm { border-color: rgba(247,206,91,.2); }
.hm-card.cool { border-color: rgba(0,240,255,.15); }
.hm-card.cold { border-color: var(--bd0); opacity: .7; }
.hm-region { font-family: var(--fh); font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.hm-heat { font-family: var(--fm); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--rpill); display: inline-block; margin-bottom: 8px; }
.hm-heat.hot { background: rgba(255,107,53,.1); color: var(--aurora-fire); }
.hm-heat.warm { background: var(--glow-gold); color: var(--aurora-gold); }
.hm-heat.cool { background: var(--glow-cyan); color: var(--aurora-cyan); }
.hm-heat.cold { background: rgba(255,255,255,.04); color: var(--text-3); }
.hm-demand-bar { width: 100%; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; margin: 6px 0; }
.hm-demand-fill { height: 100%; border-radius: 2px; transition: width 1s var(--ease); }
.hm-salary { font-family: var(--fm); font-size: 10px; color: var(--aurora-green); margin-top: 5px; }
/* ─── OFFERS (REVERSE MARKET) ────────────────────────────── */
.offer-card { background: var(--surface); border: 1px solid var(--bd0); border-radius: var(--r14); padding: 18px; margin-bottom: 12px; transition: var(--tr); }
.offer-card:hover { border-color: var(--bd1); transform: translateX(3px); }
.offer-card.ranked-1 { border-color: var(--bdg); }
.offer-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.offer-company { font-family: var(--fh); font-size: 15px; font-weight: 700; }
.offer-role { font-family: var(--fm); font-size: 10px; color: var(--text-2); margin-top: 2px; }
.offer-score { font-family: var(--fh); font-size: 22px; font-weight: 800; color: var(--aurora-green); }
.offer-salary { font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--aurora-gold); margin: 8px 0; }
.offer-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.offer-tag { font-family: var(--fm); font-size: 8px; padding: 2px 8px; border-radius: var(--rpill); background: rgba(255,255,255,.04); color: var(--text-2); letter-spacing: .07em; text-transform: uppercase; }
/* ─── SKILL GAP GPS ──────────────────────────────────────── */
.gap-critical { background: var(--glow-red); border: 1px solid rgba(255,51,102,.2); border-radius: var(--r10); padding: 12px; margin-bottom: 8px; }
.gap-important { background: var(--glow-gold); border: 1px solid var(--bdg); border-radius: var(--r10); padding: 12px; margin-bottom: 8px; }
.gap-nice { background: var(--glow-cyan); border: 1px solid var(--bdc); border-radius: var(--r10); padding: 12px; margin-bottom: 8px; }
.gap-skill { font-family: var(--fh); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.gap-meta { font-family: var(--fm); font-size: 10px; color: var(--text-2); display: flex; gap: 12px; flex-wrap: wrap; }
.gap-meta span { display: flex; align-items: center; gap: 4px; }
.gps-timeline { position: relative; padding-left: 24px; }
.gps-timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg,var(--aurora-gold),var(--aurora-violet)); border-radius: 2px; }
.gps-step { position: relative; padding: 12px 0 12px 16px; border-bottom: 1px solid var(--bd0); }
.gps-step::before { content: ''; position: absolute; left: -21px; top: 18px; width: 10px; height: 10px; background: var(--aurora-gold); border-radius: 50%; border: 2px solid var(--surface); }
.gps-month { font-family: var(--fm); font-size: 9px; color: var(--aurora-gold); letter-spacing: .12em; text-transform: uppercase; }
.gps-focus { font-family: var(--fh); font-size: 13px; font-weight: 700; margin-top: 3px; }
.gps-deliverable { font-family: var(--fb); font-size: 13px; color: var(--text-2); font-style: italic; }
/* ─── CULTURE MATCH ──────────────────────────────────────── */
.culture-score-ring { position: relative; width: 100px; height: 100px; margin: 0 auto 12px; }
.culture-score-ring svg { transform: rotate(-90deg); }
.culture-score-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--fh); font-size: 28px; font-weight: 800; }
.culture-dimension-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bd0); }
.culture-dim-label { font-family: var(--fm); font-size: 10px; color: var(--text-2); width: 120px; flex-shrink: 0; }
.culture-dim-bar { flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.culture-dim-fill { height: 100%; background: linear-gradient(90deg,var(--aurora-teal),var(--aurora-violet)); border-radius: 2px; transition: width 1s var(--ease); }
.culture-dim-val { font-family: var(--fm); font-size: 10px; font-weight: 700; color: var(--aurora-gold); width: 30px; text-align: right; }
/* ─── FUTURE JOBS ────────────────────────────────────────── */
.future-card { background: var(--surface); border: 1px solid var(--bdv); border-radius: var(--r14); padding: 16px; margin-bottom: 10px; transition: var(--tr); }
.future-card:hover { border-color: var(--aurora-violet); transform: translateX(3px); }
.future-title { font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--aurora-violet); margin-bottom: 4px; }
.future-timeline { font-family: var(--fm); font-size: 9px; padding: 2px 8px; border-radius: var(--rpill); background: var(--glow-violet); color: var(--aurora-violet); letter-spacing: .1em; display: inline-block; margin-bottom: 8px; }
.future-prob { font-family: var(--fh); font-size: 18px; font-weight: 700; color: var(--aurora-green); float: right; }
/* ─── I18N LANGUAGE SELECTOR ─────────────────────────────── */
.lang-badge {
font-family: var(--fm); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
background: rgba(0,240,255,.07); border: 1px solid var(--bdc); border-radius: var(--rpill);
color: var(--aurora-cyan); padding: 3px 10px; display: inline-flex; align-items: center; gap: 5px;
transition: var(--tr); cursor: pointer;
}
.lang-badge:hover { background: rgba(0,240,255,.12); }
.lang-translating { animation: langPulse 1.2s ease-in-out infinite; }
@keyframes langPulse { 0%,100%{opacity:1}50%{opacity:.4} }
.rtl-layout { direction: rtl; text-align: right; }
.rtl-layout .hdr-inner { flex-direction: row-reverse; }
.rtl-layout .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--bd1); }
.rtl-layout .app-content { margin-left: 0; margin-right: 220px; }
.rtl-layout.sb-collapsed .app-content { margin-right: 56px; }
/* ─── RECRUITER AGENT ────────────────────────────────────── */
.recruiter-card { background: var(--surface); border: 1px solid var(--bdc); border-radius: var(--r14); padding: 18px; margin-bottom: 10px; }
.recruit-score { font-family: var(--fh); font-size: 24px; font-weight: 800; color: var(--aurora-green); float: right; }
.recruit-name { font-family: var(--fh); font-size: 14px; font-weight: 700; }
.recruit-role { font-family: var(--fm); font-size: 10px; color: var(--text-2); margin-top: 2px; }
.recruit-action { font-family: var(--fm); font-size: 9px; color: var(--aurora-cyan); margin-top: 8px; letter-spacing: .05em; }
/* ─── OS MASTER OUTPUT ───────────────────────────────────── */
.os-panel { background: var(--deep); border: 1px solid var(--bdv); border-radius: var(--r18); padding: 20px; }
.os-section { padding: 14px 0; border-bottom: 1px solid var(--bd0); }
.os-section:last-child { border-bottom: none; }
.os-section-title { font-family: var(--fm); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--aurora-violet); margin-bottom: 10px; }
@media (max-width: 768px) {
.twin-stat-row { grid-template-columns: 1fr 1fr; }
.career-path-row { gap: 0; }
.cp-step { min-width: 90px; }
}
/* ─── MISSING UTILITY CLASSES (added v4.1) ──────────────── */
/* Interview question box */
.iv-question-box {
background: linear-gradient(135deg, rgba(0,240,255,.04), rgba(139,92,246,.03));
border: 1.5px solid var(--bdc);
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 14px;
font-family: var(--fb);
font-size: 16px;
font-style: italic;
line-height: 1.7;
color: var(--text-1);
}
/* Chat layout */
.chat-wrap {
display: flex;
flex-direction: column;
gap: 10px;
max-height: 420px;
overflow-y: auto;
padding: 4px 0;
scroll-behavior: smooth;
}
.chat-wrap::-webkit-scrollbar { width: 4px; }
.chat-wrap::-webkit-scrollbar-track { background: transparent; }
.chat-wrap::-webkit-scrollbar-thumb { background: var(--bd1); border-radius: 2px; }
.chat-input-box {
display: flex;
gap: 8px;
align-items: flex-end;
margin-top: 10px;
}
.chat-input-box textarea {
flex: 1;
min-height: 46px;
max-height: 120px;
resize: vertical;
}
/* Context globe icon */
.ctx-globe {
font-size: 13px;
color: var(--text-3);
cursor: pointer;
transition: color .2s;
}
.ctx-globe:hover { color: var(--aurora-cyan); }
/* Stream output (already exists as .spanel but alias) */
.stream {
background: rgba(4,6,15,.55);
border: 1px solid var(--bd0);
border-radius: var(--r14);
padding: 16px;
min-height: 120px;
font-family: var(--fb);
font-size: 15px;
line-height: 1.72;
color: var(--text-1);
white-space: pre-wrap;
word-break: break-word;
}
/* Form group label variant */
.fg-label {
font-family: var(--fm);
font-size: 8.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-2);
margin-bottom: 5px;
display: block;
padding-left: 2px;
}
/* Culture match grid */
.culture-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
margin-top: 12px;
}
.culture-grid-item {
background: var(--surface);
border: 1px solid var(--bd0);
border-radius: 12px;
padding: 14px;
text-align: center;
transition: all .2s;
}
.culture-grid-item:hover { border-color: var(--bdc); transform: translateY(-2px); }
/* Platform control row */
.plat-ctrl {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
/* Working from country grid */
.wfc {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
}
/* ═══════════════════════════════════════════════════════════════════
CAREER STUDIO — WORLD-FIRST CSS ADDITIONS v4.1
Next-gen UI components for AI Career OS
═══════════════════════════════════════════════════════════════════ */
/* ─── GLASSMORPHISM CARDS ──────────────────────────────────────── */
.glass-card {
background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--r18);
position: relative;
overflow: hidden;
}
.glass-card::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 60%);
pointer-events: none;
}
/* ─── LIVE STATUS BADGES ──────────────────────────────────────── */
.live-badge {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--fm); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
padding: 4px 10px; border-radius: var(--rpill);
background: rgba(16,255,176,.08); border: 1px solid rgba(16,255,176,.25); color: var(--aurora-green);
}
.live-badge::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: var(--aurora-green);
box-shadow: 0 0 0 0 rgba(16,255,176,.4);
animation: livePulse 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes livePulse {
0%,100% { box-shadow: 0 0 0 0 rgba(16,255,176,.4); }
50% { box-shadow: 0 0 0 5px rgba(16,255,176,0); }
}
/* ─── METRIC CARDS ────────────────────────────────────────────── */
.metric-card {
background: var(--surface); border: 1px solid var(--bd1);
border-radius: var(--r14); padding: 16px 18px;
position: relative; overflow: hidden; transition: all var(--t2) var(--ease);
}
.metric-card:hover { border-color: var(--bdg); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.metric-card::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--aurora-cyan), var(--aurora-gold));
transform: scaleX(0); transform-origin: left; transition: transform var(--t3) var(--ease);
}
.metric-card:hover::after { transform: scaleX(1); }
.metric-val { font-family: var(--fh); font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--aurora-gold); }
.metric-lbl { font-family: var(--fm); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-top: 5px; }
.metric-delta { font-family: var(--fm); font-size: 10px; margin-top: 6px; }
.metric-delta.up { color: var(--aurora-green); }
.metric-delta.dn { color: var(--aurora-red); }
/* ─── AI TYPING ANIMATION ─────────────────────────────────────── */
.typing-dots { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; }
.typing-dots span {
width: 5px; height: 5px; border-radius: 50%;
background: var(--aurora-cyan); opacity: .4;
animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-6px);opacity:1} }
/* ─── CAREER PATH TIMELINE ────────────────────────────────────── */
.career-timeline { position: relative; padding-left: 28px; }
.career-timeline::before {
content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 1px;
background: linear-gradient(180deg, var(--aurora-cyan), var(--aurora-violet), var(--aurora-gold));
opacity: .4;
}
.timeline-item { position: relative; padding-bottom: 22px; }
.timeline-item::before {
content: ''; position: absolute; left: -24px; top: 5px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--aurora-cyan); border: 2px solid var(--deep);
box-shadow: 0 0 8px var(--aurora-cyan);
}
.timeline-item.current::before { background: var(--aurora-gold); box-shadow: 0 0 12px var(--aurora-gold); animation: corePulse 2s ease-in-out infinite; }
.timeline-item.future::before { background: transparent; border-color: var(--text-4); box-shadow: none; }
.timeline-role { font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--text-1); }
.timeline-meta { font-family: var(--fm); font-size: 9px; color: var(--text-3); letter-spacing: .08em; margin-top: 3px; }
.timeline-salary { font-family: var(--fm); font-size: 11px; color: var(--aurora-gold); margin-top: 4px; font-weight: 600; }
/* ─── SKILL DNA BARS ──────────────────────────────────────────── */
.skill-dna-bar {
display: flex; align-items: center; gap: 12px;
padding: 9px 0; border-bottom: 1px solid var(--bd0);
}
.skill-dna-bar:last-child { border-bottom: none; }
.skill-dna-name { font-family: var(--fm); font-size: 11px; color: var(--text-1); width: 120px; flex-shrink: 0; }
.skill-dna-track { flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.skill-dna-fill {
height: 100%; border-radius: 2px;
background: linear-gradient(90deg, var(--aurora-cyan), var(--aurora-violet));
transition: width 1.2s var(--ease-spring);
}
.skill-dna-pct { font-family: var(--fm); font-size: 10px; color: var(--text-3); width: 36px; text-align: right; flex-shrink: 0; }
/* ─── COUNTRY HEATMAP CELLS ───────────────────────────────────── */
.heat-cell {
border-radius: var(--r10); padding: 14px;
border: 1px solid var(--bd1); position: relative; overflow: hidden;
transition: all var(--t2) var(--ease); cursor: pointer !important;
}
.heat-cell:hover { transform: scale(1.04); z-index: 2; box-shadow: var(--shadow-lg); }
.heat-cell.hot { background: linear-gradient(135deg, rgba(16,255,176,.08), rgba(0,240,255,.04)); border-color: rgba(16,255,176,.25); }
.heat-cell.warm { background: linear-gradient(135deg, rgba(247,206,91,.07), rgba(255,170,0,.04)); border-color: rgba(247,206,91,.2); }
.heat-cell.cool { background: rgba(139,92,246,.05); border-color: rgba(139,92,246,.15); }
.heat-country { font-family: var(--fh); font-size: 13px; font-weight: 700; }
.heat-demand { font-family: var(--fm); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.heat-salary { font-family: var(--fm); font-size: 12px; color: var(--aurora-gold); font-weight: 600; margin-top: 5px; }
/* ─── JOB MATCH SCORE BADGE ───────────────────────────────────── */
.match-badge {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--fm); font-size: 10px; font-weight: 700; letter-spacing: .06em;
padding: 5px 11px; border-radius: var(--rpill);
border: 1px solid;
}
.match-badge.high { background: rgba(16,255,176,.08); border-color: rgba(16,255,176,.3); color: var(--aurora-green); }
.match-badge.medium { background: rgba(247,206,91,.08); border-color: rgba(247,206,91,.3); color: var(--aurora-gold); }
.match-badge.low { background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.3); color: var(--aurora-violet); }
/* ─── VOICE INTERVIEW UI ──────────────────────────────────────── */
.voice-ring {
width: 80px; height: 80px; border-radius: 50%;
border: 2px solid var(--aurora-cyan);
display: flex; align-items: center; justify-content: center;
position: relative; cursor: pointer !important;
transition: all var(--t2) var(--ease);
}
.voice-ring:hover { box-shadow: 0 0 0 8px rgba(0,240,255,.1); }
.voice-ring.active { border-color: var(--aurora-red); animation: voicePulse 1s ease-in-out infinite; }
@keyframes voicePulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,51,102,.4)} 50%{box-shadow:0 0 0 16px rgba(255,51,102,0)} }
.voice-ring .mic-icon { font-size: 28px; }
/* ─── INTERVIEW QUESTION BOX ──────────────────────────────────── */
.iv-question-box {
background: linear-gradient(135deg, rgba(0,240,255,.04), rgba(139,92,246,.03));
border: 1.5px solid var(--bdc); border-radius: var(--r14);
padding: 18px 20px; margin-bottom: 14px;
font-family: var(--fb); font-size: 16px; font-style: italic; line-height: 1.7;
color: var(--text-1); position: relative;
}
.iv-question-box::before {
content: '"'; position: absolute; top: -8px; left: 14px;
font-size: 48px; color: rgba(0,240,255,.2); font-family: Georgia, serif; line-height: 1;
}
/* ─── CHAT MESSAGES ───────────────────────────────────────────── */
.chat-wrap { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding: 4px 0; scroll-behavior: smooth; }
.chat-msg { max-width: 82%; }
.chat-msg.ai { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }
.chat-bubble {
padding: 12px 16px; border-radius: 16px; font-family: var(--fb); font-size: 14px; line-height: 1.65;
}
.chat-msg.ai .chat-bubble { background: rgba(0,240,255,.06); border: 1px solid var(--bdc); color: var(--text-1); border-bottom-left-radius: 4px; }
.chat-msg.user .chat-bubble { background: linear-gradient(135deg, rgba(247,206,91,.12), rgba(255,170,0,.08)); border: 1px solid var(--bdg); color: var(--text-0); border-bottom-right-radius: 4px; }
.chat-meta { font-family: var(--fm); font-size: 8.5px; color: var(--text-4); margin-top: 4px; letter-spacing: .06em; }
.chat-msg.user .chat-meta { text-align: right; }
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.chat-input-row textarea { flex: 1; min-height: 46px; max-height: 120px; resize: vertical; }
/* ─── PROGRESS STEPS ──────────────────────────────────────────── */
.progress-steps { display: flex; align-items: center; gap: 0; margin-bottom: 24px; }
.step-item { display: flex; align-items: center; flex: 1; }
.step-circle {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--fm); font-size: 11px; font-weight: 700;
border: 2px solid var(--bd2); color: var(--text-3);
transition: all var(--t2) var(--ease);
}
.step-item.done .step-circle { background: var(--aurora-green); border-color: var(--aurora-green); color: var(--abyss); }
.step-item.active .step-circle { background: var(--aurora-gold); border-color: var(--aurora-gold); color: var(--abyss); box-shadow: 0 0 16px rgba(247,206,91,.4); }
.step-line { flex: 1; height: 1px; background: var(--bd1); margin: 0 4px; }
.step-item.done ~ .step-item .step-line,
.step-item.done .step-line { background: var(--aurora-green); }
/* ─── OPPORTUNITY DNA CARD ────────────────────────────────────── */
.opp-dna-card {
background: var(--deep); border: 1px solid var(--bd1);
border-radius: var(--r18); padding: 20px; transition: all var(--t2) var(--ease);
position: relative; overflow: hidden;
}
.opp-dna-card:hover { border-color: var(--bdg); box-shadow: 0 8px 40px rgba(247,206,91,.08); transform: translateY(-3px); }
.dna-score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.dna-score-item { text-align: center; padding: 10px 6px; background: rgba(255,255,255,.03); border-radius: var(--r10); }
.dna-score-val { font-family: var(--fh); font-size: 18px; font-weight: 800; }
.dna-score-key { font-family: var(--fm); font-size: 8px; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
/* ─── SALARY COMPARISON BARS ──────────────────────────────────── */
.salary-compare { display: flex; flex-direction: column; gap: 12px; }
.salary-compare-item { display: flex; flex-direction: column; gap: 5px; }
.salary-compare-label { display: flex; justify-content: space-between; font-family: var(--fm); font-size: 10px; color: var(--text-2); }
.salary-compare-track { height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; position: relative; }
.salary-compare-fill { height: 100%; border-radius: 3px; transition: width 1.2s var(--ease-spring); }
.salary-compare-fill.current { background: linear-gradient(90deg, var(--aurora-cyan), var(--aurora-teal)); }
.salary-compare-fill.market { background: linear-gradient(90deg, var(--aurora-gold), var(--aurora-amber)); }
.salary-compare-fill.top { background: linear-gradient(90deg, var(--aurora-green), var(--aurora-teal)); }
/* ─── CAREER REWARDS LEVEL ─────────────────────────────────────── */
.level-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: var(--rpill);
background: linear-gradient(135deg, var(--glow-gold), var(--glow-cyan));
border: 1px solid var(--bdg);
}
.level-icon { font-size: 18px; }
.level-name { font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--aurora-gold); }
.level-pts { font-family: var(--fm); font-size: 10px; color: var(--text-2); }
/* ─── NOTIFICATION TOAST ─────────────────────────────────────── */
.toast-container { position: fixed; bottom: 22px; right: 22px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast-item {
min-width: 280px; max-width: 380px;
background: var(--elevated); border: 1px solid var(--bd2);
border-radius: var(--r14); padding: 13px 16px;
display: flex; align-items: flex-start; gap: 10px;
font-family: var(--fm); font-size: 11px; color: var(--text-1);
box-shadow: var(--shadow-lg);
animation: toastIn .3s var(--ease-spring);
pointer-events: all;
}
.toast-item.ok { border-color: rgba(16,255,176,.35); }
.toast-item.err { border-color: rgba(255,51,102,.35); }
.toast-item.inf { border-color: var(--bdc); }
.toast-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.toast-close { margin-left: auto; background: none; border: none; color: var(--text-3); cursor: pointer !important; font-size: 14px; padding: 0 0 0 8px; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px) } to { opacity:1; transform:translateX(0) } }
/* ─── MOBILE RESPONSIVE POLISH ──────────────────────────────────── */
@media (max-width: 768px) {
.hdr-inner { padding: 0 14px; height: 54px; gap: 10px; }
.nav { overflow-x: auto; padding: 6px 14px; gap: 4px; }
.ntab { font-size: 9px; padding: 6px 10px; white-space: nowrap; flex-shrink: 0; }
.main { padding: 14px; }
.g2, .fr { grid-template-columns: 1fr !important; }
.metric-card { padding: 14px; }
.metric-val { font-size: 22px; }
.dna-score-grid { grid-template-columns: repeat(2, 1fr); }
.btn-group { flex-direction: column; }
.btn-group .btn-sm { min-width: unset; }
}
@media (max-width: 480px) {
.auth-card { padding: 22px 16px; }
.two-col { grid-template-columns: 1fr; }
.card { padding: 16px; }
}
/* ─── PRINT / EXPORT STYLES ──────────────────────────────────────── */
@media print {
.hdr, .nav, .sidebar, #bgCanvas, .cdot, .cring, .toast-container { display: none !important; }
body { background: #fff !important; color: #000 !important; }
.main { max-width: 100% !important; padding: 0 !important; }
}
/* ─── FEATURE: SPINNING LOGO ANIMATION ──────────────────────────── */
.logo-hex { animation: logoPulse 3s ease-in-out infinite; }
.logo-core { animation: coreGlow 2s ease-in-out infinite alternate; }
@keyframes logoPulse {
0%,100% { filter: drop-shadow(0 0 4px rgba(247,206,91,.4)); }
50% { filter: drop-shadow(0 0 12px rgba(247,206,91,.8)); }
}
@keyframes coreGlow {
0% { r: 5; fill: #f7ce5b; }
100% { r: 7; fill: #fff176; }
}
/* ─── FEATURE: PLATFORM APPLY LINKS ─────────────────────────────── */
.plat-apply-link {
display: inline-flex; align-items: center;
padding: 6px 14px;
border: 1px solid rgba(0,240,255,.2);
border-radius: 100px;
font-family: var(--fm); font-size: 10px; letter-spacing: .06em;
color: var(--aurora-cyan); text-decoration: none;
transition: all .2s;
}
.plat-apply-link:hover {
background: rgba(0,240,255,.08);
border-color: rgba(0,240,255,.4);
}
/* ══════════════════════════════════════════════════════════
WORLD-FIRST RESUME INTELLIGENCE — CSS
══════════════════════════════════════════════════════════ */
/* ─── DROP ZONE ────────────────────────────────────────── */
.resume-drop-zone {
border: 2px dashed rgba(0,229,255,.25);
border-radius: var(--r12);
padding: 24px;
text-align: center;
cursor: pointer;
transition: all .25s;
background: rgba(0,229,255,.02);
position: relative;
}
.resume-drop-zone:hover, .rdz-drag {
border-color: rgba(0,229,255,.6);
background: rgba(0,229,255,.06);
transform: scale(1.01);
}
.rdz-loading { border-color: rgba(247,206,91,.5); background: rgba(247,206,91,.04); }
.rdz-done { border-color: rgba(0,255,136,.4); background: rgba(0,255,136,.04); border-style: solid; }
.rdz-icon { font-size: 28px; margin-bottom: 6px; }
.rdz-title { font-family: var(--fh); font-size: 13px; font-weight: 600; color: var(--text-0); margin-bottom: 4px; }
.rdz-sub { font-family: var(--fm); font-size: 9px; color: var(--text-3); letter-spacing: .06em; }
.rdz-status { font-family: var(--fm); font-size: 10px; color: var(--aurora-cyan); margin-top: 8px; min-height: 14px; }
/* ─── SCORE RINGS ──────────────────────────────────────── */
.score-ring-wrap { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 14px 0; }
.score-ring { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ring-wrapper { position: relative; width: 60px; height: 60px; }
.ring-label {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: var(--fh); font-weight: 700; font-size: 13px;
}
.ring-name { font-family: var(--fm); font-size: 8px; color: var(--text-3); letter-spacing: .08em; text-align: center; }
/* ─── ATS SYSTEM GRID ──────────────────────────────────── */
.ats-sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 8px; margin-bottom: 14px; }
.ats-sys {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
border-radius: var(--r10);
font-family: var(--fm); font-size: 10px;
border: 1px solid;
transition: all .2s;
}
.ats-sys.pass { background: rgba(0,255,136,.06); border-color: rgba(0,255,136,.2); color: #00ff88; }
.ats-sys.fail { background: rgba(255,45,85,.06); border-color: rgba(255,45,85,.2); color: #ff2d55; }
.ats-sys-icon { font-size: 12px; font-weight: 700; }
.ats-sys-name { flex: 1; font-weight: 600; letter-spacing: .04em; }
.ats-sys-score { font-size: 9px; opacity: .7; }
/* ─── RES TAG ROW ──────────────────────────────────────── */
.res-tags-row { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.res-tag-label { font-family: var(--fm); font-size: 8px; letter-spacing: .15em; color: var(--text-3); margin-bottom: 5px; }
/* ─── JD KEYWORD HEATMAP ───────────────────────────────── */
.jd-heatmap-grid { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jd-kw {
display: inline-flex; align-items: center; gap: 2px;
padding: 4px 9px;
border-radius: 6px;
font-family: var(--fm);
font-weight: 500;
cursor: default;
transition: transform .15s;
letter-spacing: .02em;
}
.jd-kw:hover { transform: scale(1.08); }
.jd-kw-hit { opacity: 1; }
.jd-kw-miss { opacity: .85; }
/* ─── BEFORE / AFTER ───────────────────────────────────── */
.before-after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .before-after-grid { grid-template-columns: 1fr; } }
.ba-label { font-family: var(--fm); font-size: 9px; letter-spacing: .15em; font-weight: 700; margin-bottom: 8px; }
.ba-pane {
background: rgba(0,0,0,.25);
border: 1px solid var(--bd0);
border-radius: var(--r10);
padding: 14px;
font-family: var(--fm); font-size: 10px; color: var(--text-1);
white-space: pre-wrap; line-height: 1.6;
max-height: 400px; overflow-y: auto;
}
/* ─── DNA RADAR BARS ───────────────────────────────────── */
.dna-bar-row { display: flex; align-items: center; gap: 10px; }
.dna-bar-label { font-family: var(--fm); font-size: 9px; color: var(--text-2); width: 100px; flex-shrink: 0; }
.dna-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.dna-bar-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }
.dna-bar-val { font-family: var(--fm); font-size: 9px; color: var(--text-3); width: 32px; text-align: right; flex-shrink: 0; }
/* ─── DNA DIMENSIONS ───────────────────────────────────── */
.dna-dim { display: flex; align-items: center; gap: 6px; font-family: var(--fm); font-size: 9px; color: var(--text-2); }
.dna-dim-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* ─── DOWNLOAD BUTTONS ─────────────────────────────────── */
.btn-dl {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: rgba(255,255,255,.02);
border: 1px solid var(--bd0);
border-radius: var(--r12);
cursor: pointer; width: 100%;
transition: all .2s;
color: var(--text-0);
font-family: var(--fh); font-size: 13px;
text-align: left;
}
.btn-dl:hover { border-color: var(--bd1); background: rgba(255,255,255,.04); transform: translateX(4px); }
.btn-dl-icon {
width: 40px; height: 40px;
border-radius: var(--r10);
border: 1px solid;
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
/* ─── SCORE HISTORY CHART CANVAS ───────────────────────── */
#scoreHistoryChart { border-radius: var(--r10); background: rgba(0,0,0,.2); }
/* ═══════════════════════════════════════════════════════
CAREER DNA SCANNER — WORLD-CLASS REDESIGN
═══════════════════════════════════════════════════════ */
/* ── HERO PANEL ───────────────────────────────────────── */
.dna-hero {
position: relative; overflow: hidden;
background: linear-gradient(135deg, rgba(168,85,247,.07) 0%, rgba(0,229,255,.04) 50%, rgba(0,0,0,0) 100%);
border: 1px solid rgba(168,85,247,.2);
border-radius: var(--r18); padding: 28px 28px 22px; margin-bottom: 20px;
}
.dna-particle-canvas {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; opacity: .55;
}
.dna-hero-inner { position: relative; z-index: 1; }
.dna-hero-badge {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--fm); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase;
color: var(--aurora-violet); background: rgba(168,85,247,.1); border: 1px solid rgba(168,85,247,.25);
border-radius: var(--rpill); padding: 4px 12px; margin-bottom: 14px;
}
.dna-badge-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--aurora-violet); flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(168,85,247,.5); animation: dnaPulse 2s ease-in-out infinite;
}
@keyframes dnaPulse { 0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,.5)} 50%{box-shadow:0 0 0 8px rgba(168,85,247,0)} }
.dna-hero-title {
font-family: var(--fh); font-size: clamp(22px,4vw,32px); font-weight: 800;
background: linear-gradient(135deg, #fff 30%, var(--aurora-violet) 70%, #00e5ff);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin-bottom: 8px; line-height: 1.15;
}
.dna-hero-desc {
font-family: var(--fm); font-size: 11px; color: var(--text-2); line-height: 1.7; max-width: 540px; margin-bottom: 16px;
}
.dna-legend-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dna-legend-pill {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--fm); font-size: 9px; letter-spacing: .06em;
color: var(--dc, #fff); background: color-mix(in srgb, var(--dc, #fff) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--dc, #fff) 22%, transparent);
border-radius: var(--rpill); padding: 3px 10px; transition: all .2s;
}
.dna-legend-pill:hover { background: color-mix(in srgb, var(--dc, #fff) 14%, transparent); transform: translateY(-1px); }
/* ── 5 DIMENSION CARDS ────────────────────────────────── */
.dna-dim-grid {
display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 20px;
}
@media (max-width:900px) { .dna-dim-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:560px) { .dna-dim-grid { grid-template-columns: repeat(2,1fr); } }
.dna-dim-card {
position: relative; overflow: hidden;
background: rgba(0,0,0,.28);
border: 1px solid color-mix(in srgb, var(--dc,#fff) 18%, transparent);
border-radius: var(--r14); padding: 16px 12px 14px;
display: flex; flex-direction: column; align-items: center; gap: 6px;
transition: all .25s var(--ease);
cursor: default;
}
.dna-dim-card:hover {
border-color: color-mix(in srgb, var(--dc,#fff) 40%, transparent);
background: rgba(0,0,0,.35);
transform: translateY(-3px);
box-shadow: 0 8px 32px color-mix(in srgb, var(--dc,#fff) 12%, transparent);
}
.dna-dc-glow {
position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
width: 80px; height: 80px; border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--dc,#fff) 20%, transparent), transparent 70%);
pointer-events: none;
}
.dna-dc-icon {
width: 36px; height: 36px; border-radius: var(--r10);
background: color-mix(in srgb, var(--dc,#fff) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--dc,#fff) 22%, transparent);
display: flex; align-items: center; justify-content: center;
color: var(--dc,#fff); font-size: 14px; flex-shrink: 0;
}
.dna-dc-ring-wrap {
position: relative; display: flex; align-items: center; justify-content: center;
width: 90px; height: 90px;
}
.dna-dc-pct {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: var(--fh); font-size: 20px; font-weight: 800; letter-spacing: -.02em;
}
.dna-dc-name {
font-family: var(--fm); font-size: 9px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--text-2); text-align: center; line-height: 1.3;
}
.dna-dc-bar {
width: 100%; height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden;
}
.dna-dc-bar-fill {
height: 100%; border-radius: 2px; width: 0%; transition: width 1.4s cubic-bezier(.4,0,.2,1);
}
.dna-dc-insight {
font-family: var(--fm); font-size: 8px; color: var(--text-4); text-align: center;
line-height: 1.45; min-height: 22px; letter-spacing: .02em;
}
/* ── CHARTS ROW ──────────────────────────────────────────── */
.dna-charts-row {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px;
}
@media (max-width:800px) { .dna-charts-row { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px) { .dna-charts-row { grid-template-columns: 1fr; } }
.dna-chart-panel {
background: rgba(0,0,0,.22); border: 1px solid var(--bd0);
border-radius: var(--r14); padding: 16px; display: flex; flex-direction: column; gap: 12px;
transition: border-color .2s;
}
.dna-chart-panel:hover { border-color: var(--bd1); }
.dna-chart-header {
display: flex; align-items: center; justify-content: space-between;
}
.dna-chart-title {
display: flex; align-items: center; gap: 6px;
font-family: var(--fm); font-size: 9px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
.dna-canvas-wrap {
display: flex; align-items: center; justify-content: center; position: relative;
}
.dna-donut-center {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; pointer-events: none;
}
.dna-donut-val {
font-family: var(--fh); font-size: 26px; font-weight: 800; line-height: 1;
background: linear-gradient(135deg, var(--aurora-violet), var(--aurora-cyan));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.dna-donut-lbl {
font-family: var(--fm); font-size: 7.5px; letter-spacing: .15em; color: var(--text-3);
text-transform: uppercase; margin-top: 2px;
}
/* ── SCORE LIST PANEL ────────────────────────────────────── */
.dna-score-list-panel { justify-content: flex-start; }
.dna-score-list { display: flex; flex-direction: column; gap: 0; }
.dna-score-row {
display: flex; align-items: center; gap: 8px;
padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.dna-score-row:last-child { border-bottom: none; }
.dna-score-row-icon { font-size: 11px; width: 18px; text-align: center; flex-shrink: 0; }
.dna-score-row-name {
font-family: var(--fm); font-size: 9.5px; color: var(--text-2); flex: 1; white-space: nowrap;
}
.dna-score-row-bar {
width: 60px; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.dna-score-row-fill {
height: 100%; border-radius: 2px; width: 0%;
background: var(--dc, #00e5ff);
transition: width 1.4s cubic-bezier(.4,0,.2,1);
}
.dna-score-row-val {
font-family: var(--fh); font-size: 11px; font-weight: 700;
color: var(--dc, #00e5ff); width: 32px; text-align: right; flex-shrink: 0;
}
/* ── SCAN CTA ────────────────────────────────────────────── */
.dna-cta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.btn-dna-scan {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--fm); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: #fff; background: linear-gradient(135deg, rgba(168,85,247,.85), rgba(0,229,255,.7));
border: none; border-radius: var(--r12); padding: 13px 24px; cursor: pointer;
transition: all .25s var(--ease);
box-shadow: 0 4px 24px rgba(168,85,247,.3), 0 0 0 1px rgba(168,85,247,.4);
}
.btn-dna-scan:hover {
transform: translateY(-2px);
box-shadow: 0 8px 36px rgba(168,85,247,.45), 0 0 0 1px rgba(168,85,247,.6);
}
.btn-dna-scan:active { transform: translateY(0); }
.dna-scan-ring {
position: absolute; inset: 0; border-radius: var(--r12);
background: linear-gradient(135deg, rgba(255,255,255,.08), transparent);
pointer-events: none;
}
.btn-dna-scan::before {
content: ''; position: absolute; top: 50%; left: -60%;
width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
transform: skewX(-20deg) translateY(-50%);
animation: dnaShimmer 3s ease-in-out infinite;
}
@keyframes dnaShimmer { 0%{left:-60%} 60%,100%{left:160%} }
/* ── DNA ACTIVE BANNER ───────────────────────────────────── */
.dna-active-banner {
display: flex; align-items: center; gap: 14px;
background: linear-gradient(135deg, rgba(168,85,247,.07), rgba(0,229,255,.04));
border: 1px solid rgba(168,85,247,.3); border-radius: var(--r14);
padding: 14px 18px; margin-top: 16px; position: relative; overflow: hidden;
}
.dna-active-pulse {
position: absolute; inset: 0; border-radius: var(--r14);
box-shadow: inset 0 0 0 1px rgba(168,85,247,.15);
animation: dnaActivePulse 3s ease-in-out infinite;
}
@keyframes dnaActivePulse { 0%,100%{opacity:1} 50%{opacity:.4} }
/* ─── WORLD-FIRST CARD ──────────────────────────────────── */
.wf-card {
border-color: rgba(0,229,255,.2);
background: linear-gradient(135deg, rgba(0,229,255,.03), rgba(168,85,247,.02));
}
.wf-card:hover { border-color: rgba(0,229,255,.35); }
/* ─── BADGE STREAM OVERRIDE ─────────────────────────────── */
.bdg.stream {
background: rgba(0,229,255,.1); border: 1.5px solid rgba(0,229,255,.5);
color: var(--aurora-cyan); border-radius: var(--rpill);
padding: 4px 10px; font-size: 9px; font-weight: 700; letter-spacing: .1em;
display: inline-flex; align-items: center; white-space: nowrap; line-height: 1;
}
/* ─── DNA INTELLIGENCE CARD ─────────────────────────────── */
.dna-intel-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin: 14px 0;
}
@media (max-width:600px) { .dna-intel-grid { grid-template-columns: 1fr; } }
.dna-intel-cell {
background: rgba(0,0,0,.2); border: 1px solid var(--bd0);
border-radius: var(--r10); padding: 12px;
}
.dna-intel-label { font-family: var(--fm); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.dna-intel-val { font-family: var(--fh); font-size: 13px; font-weight: 600; color: var(--text-0); line-height: 1.5; }
/* Archetype hero block */
.dna-archetype-hero {
background: linear-gradient(135deg, rgba(168,85,247,.08), rgba(0,229,255,.04));
border: 1px solid rgba(168,85,247,.25); border-radius: var(--r14);
padding: 16px 18px; margin-bottom: 14px; text-align: center;
}
.dna-arch-title { font-family: var(--fh); font-size: 22px; font-weight: 800; color: var(--aurora-violet); margin-bottom: 5px; }
.dna-arch-desc { font-family: var(--fm); font-size: 10px; color: var(--text-2); line-height: 1.6; font-style: italic; }
.dna-rarity-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 10px; }
.dna-rarity-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg,var(--aurora-violet),var(--aurora-gold)); transition: width 1s ease; }
/* Salary unlock / interview prep rows */
.dna-action-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 8px 0; border-bottom: 1px solid var(--bd0); font-family: var(--fm); font-size: 10px; color: var(--text-1);
}
.dna-action-row:last-child { border-bottom: none; }
.dna-action-num { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
/* Hiring Manager Score — world first */
.hm-score-card {
display: flex; align-items: center; gap: 16px;
background: linear-gradient(135deg, rgba(247,206,91,.06), rgba(255,170,0,.03));
border: 1px solid rgba(247,206,91,.2); border-radius: var(--r14); padding: 14px 18px; margin: 14px 0;
}
.hm-score-ring { width: 72px; height: 72px; flex-shrink: 0; position: relative; }
.hm-score-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 20px; font-weight: 800; color: var(--aurora-gold); }
.hm-score-detail { flex: 1; }
.hm-score-title { font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--text-0); margin-bottom: 4px; }
.hm-score-sub { font-family: var(--fm); font-size: 9.5px; color: var(--text-2); line-height: 1.55; }
/* ═══════════════════════════════════════════════════════
OPTIMIZE SUB-TAB — WORLD-CLASS REDESIGN
═══════════════════════════════════════════════════════ */
/* ── MODE SWITCHER ───────────────────────────────────── */
.opt-mode-row {
display: flex; gap: 6px; margin-bottom: 16px;
background: rgba(255,255,255,.02); border: 1px solid var(--bd0);
border-radius: var(--r14); padding: 4px; width: fit-content;
}
.opt-mode-btn {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--fm); font-size: 10px; font-weight: 600; letter-spacing: .06em;
color: var(--text-3); background: transparent; border: none;
border-radius: var(--r10); padding: 8px 16px; cursor: pointer;
transition: all .2s var(--ease);
}
.opt-mode-btn:hover { color: var(--text-0); background: rgba(255,255,255,.05); }
.opt-mode-btn.active {
color: var(--aurora-cyan); background: rgba(0,229,255,.08);
border: 1px solid rgba(0,229,255,.2);
box-shadow: 0 2px 12px rgba(0,229,255,.1);
}
.opt-mode-btn svg { opacity: .7; transition: opacity .2s; }
.opt-mode-btn.active svg, .opt-mode-btn:hover svg { opacity: 1; }
/* ── OPTIMIZE PANEL ──────────────────────────────────── */
.opt-panel {
background: var(--surface); border: 1px solid var(--bd0);
border-radius: var(--r18); padding: 22px; margin-bottom: 16px;
animation: tabReveal .2s var(--ease-out);
}
.opt-panel-header {
display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px;
}
.opt-panel-icon {
width: 46px; height: 46px; border-radius: var(--r12); flex-shrink: 0;
border: 1px solid; display: flex; align-items: center; justify-content: center;
}
.opt-panel-title {
font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--text-0); margin-bottom: 4px;
}
.opt-panel-sub {
font-family: var(--fm); font-size: 10px; color: var(--text-2); line-height: 1.6; max-width: 440px;
}
/* ── FEATURE CHIPS ───────────────────────────────────── */
.opt-feature-chips {
display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.opt-chip {
font-family: var(--fm); font-size: 8.5px; letter-spacing: .06em;
color: var(--aurora-cyan); background: var(--cc, rgba(0,229,255,.08));
border: 1px solid var(--cb, rgba(0,229,255,.2));
border-radius: var(--rpill); padding: 3px 10px;
}
/* ── SECTIONS GRID ───────────────────────────────────── */
.opt-sections-grid {
display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px;
}
.opt-section-badge {
font-family: var(--fm); font-size: 8px; font-weight: 700; letter-spacing: .18em;
color: var(--aurora-gold); background: rgba(247,206,91,.07);
border: 1px solid rgba(247,206,91,.2); border-radius: var(--r6);
padding: 4px 10px;
}
/* ── GO BUTTON ───────────────────────────────────────── */
.btn-opt-go {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--fm); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: #fff; background: linear-gradient(135deg, rgba(0,229,255,.85), rgba(0,200,230,.7));
border: none; border-radius: var(--r12); padding: 13px 24px; cursor: pointer;
transition: all .25s var(--ease);
box-shadow: 0 4px 20px rgba(0,229,255,.2), 0 0 0 1px rgba(0,229,255,.25);
position: relative; overflow: hidden;
}
.btn-opt-go::before {
content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
transform: skewX(-20deg);
animation: optShimmer 2.8s ease-in-out infinite;
}
@keyframes optShimmer { 0%{left:-100%} 55%,100%{left:160%} }
.btn-opt-go:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,229,255,.3), 0 0 0 1px rgba(0,229,255,.4); }
.btn-opt-go:active { transform: none; }
/* ═══════════════════════════════════════════════════════════════════
THEME SYSTEM — 5 World-Class Themes v6
═══════════════════════════════════════════════════════════════════ */
/* ── MIDNIGHT — Deep Royal Blue ─────────────────────────── */
[data-theme="midnight"] {
--void:#01020f;--abyss:#02041a;--deep:#050820;--surface:#0a0f2e;
--elevated:#111840;--float:#182050;--overlay:rgba(2,4,26,.95);
--aurora-gold:#f7ce5b;--aurora-cyan:#4f8fff;--aurora-violet:#7c3aed;
--aurora-green:#34d399;--aurora-red:#f43f5e;
--text-0:#f0f4ff;--text-1:#c8d5f8;--text-2:#7a8fc8;--text-3:#3d4f80;
--bd0:rgba(100,140,255,.06);--bd1:rgba(100,140,255,.1);--bd2:rgba(100,140,255,.16);
--bdg:rgba(247,206,91,.22);--bdc:rgba(79,143,255,.2);--bdv:rgba(124,58,237,.22);
}
/* ── AURORA — Northern Lights ─────────────────────────────── */
[data-theme="aurora"] {
--void:#010a06;--abyss:#020f08;--deep:#041a0c;--surface:#082512;
--elevated:#0e3018;--float:#163e22;--overlay:rgba(1,10,6,.95);
--aurora-gold:#10ffb0;--aurora-cyan:#00e5ff;--aurora-violet:#7fff00;
--aurora-green:#00ff88;--aurora-red:#ff4466;--aurora-amber:#aaff00;
--text-0:#e8fff4;--text-1:#a8f0cc;--text-2:#4a9068;--text-3:#1e5030;
--bd0:rgba(0,255,136,.05);--bd1:rgba(0,255,136,.09);--bd2:rgba(0,255,136,.15);
--bdg:rgba(16,255,176,.2);--bdc:rgba(0,229,255,.18);--bdv:rgba(127,255,0,.15);
--accent:var(--aurora-gold);--accent2:var(--aurora-cyan);
}
/* ── NEON — Electric Night ────────────────────────────────── */
[data-theme="neon"] {
--void:#06000f;--abyss:#0a0018;--deep:#0f0022;--surface:#160030;
--elevated:#1c003e;--float:#260050;--overlay:rgba(6,0,15,.96);
--aurora-gold:#ff2d78;--aurora-cyan:#00ff9f;--aurora-violet:#cc00ff;
--aurora-green:#00ffcc;--aurora-red:#ff0050;--aurora-amber:#ffdd00;
--text-0:#fff0ff;--text-1:#e8c8ff;--text-2:#9060b0;--text-3:#4a2070;
--bd0:rgba(200,0,255,.06);--bd1:rgba(200,0,255,.1);--bd2:rgba(200,0,255,.18);
--bdg:rgba(255,45,120,.22);--bdc:rgba(0,255,159,.18);--bdv:rgba(204,0,255,.2);
--accent:var(--aurora-gold);--accent2:var(--aurora-cyan);
}
[data-theme="neon"] .card { border-color:rgba(200,0,255,.1); }
[data-theme="neon"] .card:hover { border-color:rgba(200,0,255,.25);box-shadow:0 0 30px rgba(200,0,255,.08); }
[data-theme="neon"] .btn-p { background:linear-gradient(135deg,#cc00ff,#00ff9f); }
/* ── LIGHT — Professional Clean ──────────────────────────── */
[data-theme="light"] {
--void:#f2f5ff;--abyss:#e8ecf8;--deep:#dde3f5;--surface:#ffffff;
--elevated:#f8faff;--float:#eef2fc;--overlay:rgba(242,245,255,.97);
--aurora-gold:#b07c00;--aurora-cyan:#0066cc;--aurora-violet:#7c3aed;
--aurora-green:#008850;--aurora-red:#cc1133;--aurora-amber:#cc6600;
--text-0:#0a0f1e;--text-1:#1a2540;--text-2:#4a5878;--text-3:#8a9abc;--text-4:#bcc8e0;
--bd0:rgba(0,20,80,.07);--bd1:rgba(0,20,80,.12);--bd2:rgba(0,20,80,.18);
--bdg:rgba(176,124,0,.25);--bdc:rgba(0,102,204,.2);--bdv:rgba(124,58,237,.18);
--shadow-sm:0 2px 8px rgba(0,0,0,.08);--shadow-md:0 6px 24px rgba(0,0,0,.1);
--shadow-lg:0 16px 48px rgba(0,0,0,.12);
--accent:#1a5fc8;--accent2:#0098d4;
}
[data-theme="light"] body { background:var(--void);color:var(--text-1); }
[data-theme="light"] .sidebar { background:#ffffff;border-right:1px solid var(--bd1); }
[data-theme="light"] .card { background:#ffffff;border-color:var(--bd1);box-shadow:0 2px 8px rgba(0,0,0,.06); }
[data-theme="light"] .card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1);border-color:var(--bd2); }
[data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select { background:#f5f8ff;border-color:var(--bd1);color:var(--text-0); }
[data-theme="light"] input:focus,[data-theme="light"] textarea:focus { background:#fff;border-color:#4f8fff;box-shadow:0 0 0 3px rgba(79,143,255,.15); }
[data-theme="light"] .sidebar .ntab { color:var(--text-2); }
[data-theme="light"] .sidebar .ntab.active { background:rgba(79,143,255,.1);color:#1a5fc8; }
[data-theme="light"] .hdr { background:rgba(255,255,255,.96);border-bottom:1px solid var(--bd1); }
[data-theme="light"] .spanel { background:var(--elevated);border-color:var(--bd1);color:var(--text-1); }
[data-theme="light"] .toast { background:var(--surface);border-color:var(--bd2);color:var(--text-0); }
[data-theme="light"] .bdg.world { background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.25);color:#7c3aed; }
[data-theme="light"] #bgCanvas { display:none; }
[data-theme="light"] .btn-p { background:linear-gradient(135deg,#1a5fc8,#0098d4); }
[data-theme="light"] .btn-gold { background:linear-gradient(135deg,#b07c00,#cc9900); }
[data-theme="light"] .hdr-meter .hm-v { color:var(--text-0); }
[data-theme="light"] .hdr-meter .hm-l { color:var(--text-3); }
[data-theme="light"] .sub-nav { background:rgba(0,0,0,.04);border-color:var(--bd1); }
[data-theme="light"] .stab.active { background:#fff;color:#1a5fc8;box-shadow:0 2px 8px rgba(0,0,0,.08); }
/* ── THEME SWITCHER ──────────────────────────────────────── */
.theme-switcher {
display:flex;align-items:center;gap:5px;
background:rgba(255,255,255,.04);border:1px solid var(--bd1);
border-radius:var(--rpill);padding:5px 8px;
}
.theme-dot {
width:16px;height:16px;border-radius:50%;cursor:pointer;
border:2px solid transparent;transition:all .2s var(--ease);flex-shrink:0;
}
.theme-dot:hover { transform:scale(1.2); }
.theme-dot.active { border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.3);transform:scale(1.15); }
.theme-dot[data-theme="dark"] { background:radial-gradient(circle at 35% 35%,#4f8fff,#01020a); }
.theme-dot[data-theme="midnight"] { background:radial-gradient(circle at 35% 35%,#7c3aed,#01020f); }
.theme-dot[data-theme="aurora"] { background:radial-gradient(circle at 35% 35%,#10ffb0,#010a06); }
.theme-dot[data-theme="neon"] { background:radial-gradient(circle at 35% 35%,#ff2d78,#06000f); }
.theme-dot[data-theme="light"] { background:radial-gradient(circle at 35% 35%,#4f8fff,#f2f5ff); }
[data-theme="light"] .theme-switcher { background:rgba(0,0,0,.04);border-color:var(--bd1); }
[data-theme="light"] .theme-dot.active { border-color:#0a0f1e;box-shadow:0 0 0 2px rgba(0,0,0,.2); }
/* canvas tint per theme */
[data-theme="midnight"] #bgCanvas { filter:hue-rotate(30deg); }
[data-theme="aurora"] #bgCanvas { filter:hue-rotate(120deg) saturate(1.4); }
[data-theme="neon"] #bgCanvas { filter:hue-rotate(200deg) saturate(2); }
/* ── PAGE HEADER BADGES ROW ──────────────────────────────── */
.ph-badges { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }
/* ═══════════════════════════════════════════════════════════════════
WORLD-FIRST SALARY SECTION
═══════════════════════════════════════════════════════════════════ */
.sal-hero-row {
display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;
}
@media(max-width:768px){ .sal-hero-row { grid-template-columns:repeat(2,1fr); } }
.sal-hero-card {
background:rgba(0,0,0,.2);border:1px solid var(--bd0);border-radius:var(--r14);
padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:5px;
transition:all .2s var(--ease);
}
.sal-hero-card:hover { border-color:var(--bd2);background:rgba(255,255,255,.02); }
.sal-hero-card.accent {
background:rgba(247,206,91,.05);border-color:rgba(247,206,91,.2);
box-shadow:0 0 30px rgba(247,206,91,.06);
}
.sal-hero-icon { font-size:22px;margin-bottom:2px; }
.sal-hero-val { font-family:var(--fh);font-size:18px;font-weight:800;color:var(--aurora-gold); }
.sal-hero-label { font-family:var(--fm);font-size:8.5px;letter-spacing:.12em;color:var(--text-3);text-transform:uppercase; }
.sal-main-grid { display:grid;grid-template-columns:340px 1fr;gap:16px; }
@media(max-width:900px){ .sal-main-grid { grid-template-columns:1fr; } }
.sal-results-area {
background:var(--surface);border:1px solid var(--bd0);border-radius:var(--r18);
padding:18px;min-height:320px;
}
.sal-quick-btn {
display:block;width:100%;background:rgba(255,255,255,.03);
border:1px solid var(--bd0);border-radius:var(--r8);padding:8px 12px;
font-family:var(--fm);font-size:10px;color:var(--text-2);cursor:pointer;
text-align:left;transition:all .15s var(--ease);
}
.sal-quick-btn:hover {
background:rgba(247,206,91,.05);border-color:rgba(247,206,91,.2);
color:var(--aurora-gold);transform:translateX(3px);
}
.sal-advisor-card {
background:linear-gradient(135deg,rgba(247,206,91,.04),rgba(0,229,255,.02));
border-color:rgba(247,206,91,.15);
}
.sal-advisor-header { display:flex;align-items:flex-start;gap:14px;margin-bottom:16px; }
.sal-advisor-icon {
width:48px;height:48px;border-radius:var(--r12);flex-shrink:0;
background:rgba(247,206,91,.08);border:1px solid rgba(247,206,91,.2);
display:flex;align-items:center;justify-content:center;
}
.sal-advisor-input-row { display:flex;gap:8px; }
.sal-advisor-input {
flex:1;background:rgba(0,0,0,.2);border:1px solid var(--bd1);
border-radius:var(--r10);padding:11px 14px;font-family:var(--fd);font-size:12px;
color:var(--text-0);outline:none;transition:border-color .2s;
}
.sal-advisor-input:focus { border-color:rgba(247,206,91,.4);box-shadow:0 0 0 3px rgba(247,206,91,.08); }
.sal-advisor-btn {
width:44px;height:44px;border-radius:var(--r10);flex-shrink:0;
background:linear-gradient(135deg,var(--aurora-gold),var(--aurora-amber));
border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
color:#000;transition:all .2s var(--ease);
}
.sal-advisor-btn:hover { transform:scale(1.05);box-shadow:0 4px 16px rgba(247,206,91,.35); }
.sal-card {
background:rgba(0,0,0,.2);border:1px solid var(--bd0);border-radius:var(--r14);
padding:14px;transition:all .2s var(--ease);
}
.sal-card:hover { border-color:rgba(247,206,91,.2);transform:translateY(-2px); }
.sal-level { font-family:var(--fm);font-size:9px;letter-spacing:.18em;color:var(--aurora-gold);margin-bottom:8px; }
.sal-row { display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--bd0); }
.sal-row:last-child { border-bottom:none; }
.sal-curr { font-family:var(--fm);font-size:9px;color:var(--text-3); }
.sal-val { font-family:var(--fh);font-size:13px;font-weight:700;color:var(--text-0); }
/* Salary card live data indicators */
.sal-meta { display:flex;gap:6px;margin-top:6px;flex-wrap:wrap; }
.sal-demand { font-size:8px;font-family:var(--fm);letter-spacing:.12em;padding:2px 6px;border-radius:4px;background:rgba(0,255,136,.08);color:#00ff88;border:1px solid rgba(0,255,136,.2); }
.sal-demand-very_high { background:rgba(0,255,136,.15);border-color:rgba(0,255,136,.4);color:#00ff88; }
.sal-demand-high { background:rgba(247,206,91,.08);border-color:rgba(247,206,91,.3);color:#f7ce5b; }
.sal-demand-low,.sal-demand-declining { background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.3);color:#ff6b6b; }
.sal-yoy { font-size:10px;font-weight:700;font-family:var(--fh); }
.sal-prov { font-size:8px;font-family:var(--fm);color:var(--text-3);margin-top:4px;letter-spacing:.06em; }
.sal-notes { font-size:9px;color:var(--text-3);margin-top:5px;font-style:italic;line-height:1.4; }
/* Hero meta row */
.sal-hero-meta { display:flex;gap:12px;align-items:center;padding:6px 0;flex-wrap:wrap; }
.sal-fresh-badge { font-size:8px;font-family:var(--fm);color:#00ff88;background:rgba(0,255,136,.06);border:1px solid rgba(0,255,136,.2);padding:2px 8px;border-radius:10px;letter-spacing:.1em; }
.sal-prov-badge { font-size:8px;font-family:var(--fm);color:var(--text-2);letter-spacing:.06em; }
.sal-src-link { font-size:8px;font-family:var(--fm);color:var(--text-3);text-decoration:none;opacity:.7; }
.sal-src-link:hover { opacity:1;color:#00ff88; }
.sal-loading-dot { color:var(--text-3);animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }
/* Data footer */
.sal-data-footer { font-size:9px;font-family:var(--fm);color:var(--text-3);padding:6px 0;letter-spacing:.06em; }
.sal-footer-src { color:var(--text-2); }
.sal-footer-link { color:rgba(0,255,136,.7);text-decoration:none; }
.sal-footer-link:hover { color:#00ff88; }
/* ═══════════════════════════════════════════════════════════════════
WORLD-FIRST GLOBAL SECTION
═══════════════════════════════════════════════════════════════════ */
.globe-hero {
position:relative;display:flex;align-items:center;justify-content:center;
gap:32px;padding:28px;margin-bottom:20px;
background:rgba(0,229,255,.02);border:1px solid rgba(0,229,255,.08);
border-radius:var(--r18);overflow:hidden;
}
.globe-ring {
position:absolute;border-radius:50%;border:1px solid rgba(0,229,255,.12);
animation:globeRotate 12s linear infinite;pointer-events:none;
}
.globe-ring.r1 { width:220px;height:220px;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(70deg);animation-duration:10s; }
.globe-ring.r2 { width:280px;height:280px;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(60deg) rotateY(30deg);animation-duration:16s;animation-direction:reverse;border-color:rgba(168,85,247,.1); }
.globe-ring.r3 { width:160px;height:160px;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(75deg) rotateZ(45deg);animation-duration:8s;border-color:rgba(247,206,91,.08); }
@keyframes globeRotate { 0%{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(0deg)} 100%{transform:translate(-50%,-50%) rotateX(70deg) rotateZ(360deg)} }
.globe-center {
width:64px;height:64px;border-radius:50%;flex-shrink:0;
background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.2);
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 40px rgba(0,229,255,.1),inset 0 0 20px rgba(0,229,255,.05);
position:relative;z-index:2;animation:globePulse 3s ease-in-out infinite;
}
@keyframes globePulse { 0%,100%{box-shadow:0 0 40px rgba(0,229,255,.1)} 50%{box-shadow:0 0 60px rgba(0,229,255,.2)} }
.globe-stat { display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;z-index:2; }
.globe-stat-n { font-family:var(--fh);font-size:22px;font-weight:800;color:var(--aurora-cyan); }
.globe-stat-l { font-family:var(--fm);font-size:8.5px;letter-spacing:.15em;color:var(--text-3);text-transform:uppercase; }
.global-main-grid { display:grid;grid-template-columns:380px 1fr;gap:16px; }
@media(max-width:900px){ .global-main-grid { grid-template-columns:1fr; } }
.global-quick-row { display:flex;flex-wrap:wrap;gap:6px;margin-top:14px; }
.gq-btn {
background:rgba(0,229,255,.04);border:1px solid rgba(0,229,255,.12);
border-radius:var(--rpill);padding:5px 10px;font-family:var(--fm);font-size:9.5px;
color:var(--aurora-cyan);cursor:pointer;transition:all .15s var(--ease);
}
.gq-btn:hover { background:rgba(0,229,255,.1);border-color:rgba(0,229,255,.3);transform:translateY(-1px); }
/* ═══════════════════════════════════════════════════════════════════
LIVE JD MATCH — World-First Real-Time ATS Scoring
═══════════════════════════════════════════════════════════════════ */
.jd-live-score { position:relative;width:110px;height:110px;flex-shrink:0; }
.jd-live-score svg { transform:rotate(-90deg); }
.jd-live-score-text {
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;
}
.jd-live-score-num { font-family:var(--fh);font-size:28px;font-weight:800;color:var(--aurora-gold);line-height:1; }
.jd-live-score-label { font-family:var(--fm);font-size:7.5px;letter-spacing:.15em;color:var(--text-3);margin-top:3px; }
.kw-heatmap { display:flex;flex-wrap:wrap;gap:5px;margin:12px 0; }
.kw-chip {
display:inline-flex;align-items:center;gap:4px;border-radius:var(--rpill);
padding:3px 9px;font-family:var(--fm);font-size:9.5px;font-weight:500;transition:all .15s var(--ease);
}
.kw-chip.present { background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.25);color:#00ff88; }
.kw-chip.missing { background:rgba(255,45,85,.08);border:1px solid rgba(255,45,85,.2);color:#ff2d55;cursor:pointer; }
.kw-chip.missing:hover { background:rgba(255,45,85,.15);transform:scale(1.05); }
.kw-chip-dot { width:6px;height:6px;border-radius:50%; }
.kw-chip.present .kw-chip-dot { background:#00ff88; }
.kw-chip.missing .kw-chip-dot { background:#ff2d55; }
.ats-compat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0; }
@media(max-width:600px){ .ats-compat-grid { grid-template-columns:repeat(2,1fr); } }
.ats-compat-cell {
background:rgba(0,0,0,.2);border-radius:var(--r10);padding:10px;
text-align:center;border:1px solid var(--bd0);
}
.ats-compat-name { font-family:var(--fm);font-size:9px;color:var(--text-3);margin-bottom:5px; }
.ats-compat-score { font-family:var(--fh);font-size:16px;font-weight:800; }
.ats-compat-cell.pass .ats-compat-score { color:#00ff88; }
.ats-compat-cell.fail .ats-compat-score { color:#ff2d55; }
.jd-live-bar { height:3px;border-radius:2px;background:rgba(0,229,255,.08);overflow:hidden;margin:10px 0;position:relative; }
.jd-live-bar-fill { height:100%;border-radius:2px;background:linear-gradient(90deg,var(--aurora-cyan),var(--aurora-gold));transition:width .6s var(--ease);width:0%; }
/* ── AUTO-OPTIMIZE Live JD input ─────────────────────────── */
.jd-match-live-wrap {
position:relative;margin-bottom:12px;
}
.jd-match-live-badge {
position:absolute;top:10px;right:10px;
background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.25);
border-radius:var(--rpill);padding:2px 8px;font-family:var(--fm);font-size:8px;
color:var(--aurora-cyan);display:flex;align-items:center;gap:4px;z-index:2;pointer-events:none;
}
.jd-match-live-badge-dot { width:5px;height:5px;border-radius:50%;background:var(--aurora-cyan);animation:livePulse 1.2s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.jd-live-kw-strip { display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;min-height:24px; }
/* ── World-first animated DNA scan button upgrade ────────── */
.btn-dna-scan-v2 {
position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
background:linear-gradient(135deg,rgba(168,85,247,.9),rgba(0,229,255,.75),rgba(247,206,91,.5));
background-size:200% 200%;border:none;border-radius:var(--r14);padding:14px 28px;
cursor:pointer;color:#fff;font-family:var(--fm);font-size:11px;font-weight:700;
letter-spacing:.1em;transition:all .3s var(--ease);
box-shadow:0 4px 24px rgba(168,85,247,.35),0 0 0 1px rgba(168,85,247,.45);
animation:dnaGradientShift 4s ease infinite;
}
@keyframes dnaGradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.btn-dna-scan-v2:hover { transform:translateY(-3px);box-shadow:0 10px 40px rgba(168,85,247,.5); }
/* ── Light theme overrides for new sections ──────────────── */
[data-theme="light"] .sal-hero-card { background:#fff;border-color:var(--bd1); }
[data-theme="light"] .sal-hero-val { color:#b07c00; }
[data-theme="light"] .sal-card { background:#f8faff;border-color:var(--bd1); }
[data-theme="light"] .sal-val { color:#0a0f1e; }
[data-theme="light"] .sal-quick-btn { background:#f0f4ff;border-color:var(--bd1);color:var(--text-2); }
[data-theme="light"] .sal-quick-btn:hover { background:rgba(176,124,0,.06);border-color:rgba(176,124,0,.3);color:#b07c00; }
[data-theme="light"] .gq-btn { background:rgba(0,102,204,.05);border-color:rgba(0,102,204,.15);color:#0066cc; }
[data-theme="light"] .gq-btn:hover { background:rgba(0,102,204,.1);border-color:rgba(0,102,204,.3); }
[data-theme="light"] .globe-hero { background:rgba(0,102,204,.03);border-color:rgba(0,102,204,.1); }
[data-theme="light"] .globe-stat-n { color:#0066cc; }
[data-theme="light"] .kw-chip.present { background:rgba(0,136,80,.08);border-color:rgba(0,136,80,.2);color:#008850; }
[data-theme="light"] .sal-advisor-input { background:#f5f8ff;border-color:var(--bd1);color:#0a0f1e; }
/* ══════════════════════════════════════════════════════════════
ISCO GLOBAL MARKET INTELLIGENCE
══════════════════════════════════════════════════════════════ */
.isco-hero {
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
background:linear-gradient(135deg,rgba(0,180,255,.08),rgba(100,220,120,.06));
border:1px solid rgba(0,180,255,.18);border-radius:var(--r14);padding:28px 32px;
margin-bottom:24px;
}
.isco-hero-text h3 { font-size:1.35rem;font-weight:700;margin-bottom:6px;color:var(--acc1); }
.isco-hero-text p { font-size:.9rem;opacity:.75;max-width:520px;line-height:1.55; }
.isco-hero-stats { display:flex;gap:20px;flex-wrap:wrap; }
.isco-stat { text-align:center;min-width:72px; }
.isco-stat-n { display:block;font-size:1.7rem;font-weight:800;color:#00b4ff;line-height:1.1; }
.isco-stat-l { display:block;font-size:.72rem;opacity:.6;letter-spacing:.04em;margin-top:2px; }
.isco-main-grid { display:grid;grid-template-columns:1fr 1.6fr;gap:20px;align-items:start; }
@media(max-width:860px){ .isco-main-grid{ grid-template-columns:1fr; } }
.isco-quick-row { display:flex;flex-wrap:wrap;gap:6px;margin:12px 0; }
.isco-quick {
background:rgba(0,180,255,.07);border:1px solid rgba(0,180,255,.18);border-radius:20px;
padding:5px 12px;font-size:.79rem;cursor:pointer;color:var(--text-2);
transition:all .2s var(--ease);
}
.isco-quick:hover { background:rgba(0,180,255,.16);border-color:rgba(0,180,255,.4);color:#00b4ff; }
.isco-out-card { display:flex;flex-direction:column; }
.isco-spanel { min-height:520px;flex:1; }
.stream-thinking {
display:flex;align-items:center;gap:10px;padding:20px;
color:var(--acc1);font-size:.95rem;opacity:.8;
}
.dot-pulse {
width:10px;height:10px;border-radius:50%;background:var(--acc1);
animation:dotPulseAnim 1.2s ease-in-out infinite;
}
@keyframes dotPulseAnim { 0%,100%{transform:scale(.7);opacity:.4} 50%{transform:scale(1.2);opacity:1} }
/* Light theme overrides */
[data-theme="light"] .isco-hero { background:rgba(0,102,204,.04);border-color:rgba(0,102,204,.12); }
[data-theme="light"] .isco-hero-text h3 { color:#0066cc; }
[data-theme="light"] .isco-stat-n { color:#0066cc; }
[data-theme="light"] .isco-quick { background:rgba(0,102,204,.05);border-color:rgba(0,102,204,.15);color:#333; }
[data-theme="light"] .isco-quick:hover { background:rgba(0,102,204,.12);border-color:rgba(0,102,204,.35);color:#0066cc; }
/* ══════════════════════════════════════════════════════════════
AI RECRUITER — CV MATCH / MEETING / VIDEO CALL
══════════════════════════════════════════════════════════════ */
.rec-hero {
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
background:linear-gradient(135deg,rgba(247,206,91,.07),rgba(0,180,255,.06));
border:1px solid rgba(247,206,91,.2);border-radius:var(--r14);
padding:24px 28px;margin-bottom:20px;
}
.rec-hero-icon { font-size:2.4rem;flex-shrink:0; }
.rec-hero h3 { font-size:1.2rem;font-weight:700;margin-bottom:5px;color:var(--acc1); }
.rec-hero p { font-size:.88rem;opacity:.72;max-width:500px;line-height:1.55; }
.rec-hero-badges { display:flex;flex-direction:column;gap:6px;flex-shrink:0;margin-left:auto; }
@media(max-width:700px){ .rec-hero-badges{ flex-direction:row;margin-left:0; } }
.rec-grid {
display:grid;grid-template-columns:1fr 1.5fr;gap:20px;align-items:start;
}
@media(max-width:860px){ .rec-grid{ grid-template-columns:1fr; } }
.rec-out-card { display:flex;flex-direction:column; }
.rec-spanel { min-height:500px;flex:1; }
.rec-btn-main { width:100%;margin-top:10px;font-size:.85rem; }
.rec-quick-row { display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0; }
.rec-quick-label { font-size:.75rem;opacity:.55; }
.rec-quick {
background:rgba(0,180,255,.07);border:1px solid rgba(0,180,255,.2);border-radius:20px;
padding:4px 11px;font-size:.78rem;cursor:pointer;color:var(--text-2);
transition:all .2s var(--ease);
}
.rec-quick:hover { background:rgba(0,180,255,.15);border-color:rgba(0,180,255,.4);color:#00b4ff; }
.rec-outcome-preview {
display:flex;flex-direction:column;gap:7px;
background:rgba(255,255,255,.03);border:1px solid var(--bd0);border-radius:var(--r10);
padding:14px 16px;margin:12px 0;
}
.rec-outcome-item { display:flex;align-items:center;gap:10px;font-size:.83rem;color:var(--text-2); }
.rec-outcome-icon { font-size:1rem;width:20px;text-align:center;flex-shrink:0; }
.rec-video-info {
display:flex;gap:10px;flex-wrap:wrap;
background:rgba(0,255,136,.04);border:1px solid rgba(0,255,136,.15);border-radius:var(--r10);
padding:12px 14px;margin:10px 0;
}
.vc-participant {
display:flex;align-items:center;gap:6px;flex:1;min-width:140px;
background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.12);border-radius:8px;
padding:7px 10px;
}
.vc-cam { font-size:.95rem; }
.vc-name { font-size:.8rem;font-weight:600;color:var(--text-1); }
.vc-status { font-size:.72rem;opacity:.55;margin-left:auto; }
/* Light theme */
[data-theme="light"] .rec-hero { background:rgba(0,102,204,.03);border-color:rgba(0,102,204,.1); }
[data-theme="light"] .rec-hero h3 { color:#0066cc; }
[data-theme="light"] .rec-quick { background:rgba(0,102,204,.04);border-color:rgba(0,102,204,.15);color:#333; }
[data-theme="light"] .rec-quick:hover { background:rgba(0,102,204,.1);border-color:rgba(0,102,204,.3);color:#0066cc; }
[data-theme="light"] .rec-outcome-preview { background:rgba(0,0,0,.02);border-color:var(--bd1); }
[data-theme="light"] .rec-video-info { background:rgba(0,136,80,.03);border-color:rgba(0,136,80,.1); }
[data-theme="light"] .vc-participant { background:rgba(0,136,80,.04);border-color:rgba(0,136,80,.1); }
/* ══════════════════════════════════════════════════════════════
VIDEO CALL — SAVE / ANALYSE / VERDICT / HISTORY
══════════════════════════════════════════════════════════════ */
.vc-action-bar { display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center; }
.vc-analyse-btn { flex:1;min-width:200px;background:linear-gradient(135deg,rgba(0,180,255,.85),rgba(100,80,240,.85));font-size:.82rem;letter-spacing:.05em; }
.vc-copy-btn,.vc-hist-btn { padding:8px 14px;font-size:.8rem; }
.vc-action-hint { font-size:.78rem;opacity:.5;margin-top:6px;font-style:italic; }
.vc-verdict-panel { background:var(--elevated);border:1px solid var(--bd1);border-radius:var(--r14);padding:24px;overflow:hidden; }
.vc-verdict-header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--bd0);margin-bottom:20px; }
.vc-verdict-title { display:flex;align-items:center;gap:14px; }
.vc-verdict-title h3 { font-size:1.1rem;font-weight:700;margin-bottom:3px; }
.vc-verdict-badge { font-family:var(--fm);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 18px;border-radius:var(--rpill);border:2px solid; }
.vc-verdict-badge.pending { background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);color:var(--text-2); }
.vc-verdict-badge.qualified { background:rgba(0,255,136,.12);border-color:rgba(0,255,136,.5);color:#00ff88;box-shadow:0 0 18px rgba(0,255,136,.2); }
.vc-verdict-badge.rejected { background:rgba(255,45,85,.1);border-color:rgba(255,45,85,.45);color:#ff2d55;box-shadow:0 0 18px rgba(255,45,85,.15); }
.vc-verdict-badge.conditional { background:rgba(245,200,66,.1);border-color:rgba(245,200,66,.45);color:#f5c842;box-shadow:0 0 18px rgba(245,200,66,.15); }
.vc-verdict-body { display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:start;margin-bottom:22px; }
@media(max-width:640px){ .vc-verdict-body{ grid-template-columns:1fr; } }
.vc-score-section { display:flex;flex-direction:column;align-items:center;gap:10px; }
.vc-score-ring-wrap { position:relative;width:120px;height:120px; }
.vc-ring-svg { width:120px;height:120px;transform:rotate(-90deg); }
.vc-ring-bg { fill:none;stroke:rgba(255,255,255,.07);stroke-width:10; }
.vc-ring-fill { fill:none;stroke:#00ff88;stroke-width:10;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1); }
.vc-ring-center { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.vc-ring-num { font-size:2rem;font-weight:800;line-height:1; }
.vc-ring-lbl { font-size:.72rem;opacity:.5; }
.vc-score-label { font-size:.85rem;font-weight:700;text-align:center; }
.vc-score-sub { font-size:.78rem;opacity:.6;text-align:center;margin-top:4px; }
.vc-dims { display:flex;flex-direction:column;gap:7px; }
.vc-dim-title { font-size:.78rem;font-weight:700;opacity:.5;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px; }
.vc-dim-row { display:flex;align-items:center;gap:10px; }
.vc-dim-label { font-size:.8rem;min-width:150px;flex-shrink:0; }
.vc-dim-bar { flex:1;height:7px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden; }
.vc-dim-fill { height:100%;border-radius:4px;width:0%;transition:width 1s cubic-bezier(.4,0,.2,1); }
.vc-dim-fill.comm { background:linear-gradient(90deg,#00b4ff,#00e5ff); }
.vc-dim-fill.tech { background:linear-gradient(90deg,#a855f7,#7c3aed); }
.vc-dim-fill.prob { background:linear-gradient(90deg,#f5c842,#ffd700); }
.vc-dim-fill.cult { background:linear-gradient(90deg,#00ff88,#00c96a); }
.vc-dim-fill.prof { background:linear-gradient(90deg,#ff9500,#ffb340); }
.vc-dim-fill.exp { background:linear-gradient(90deg,#00e5ff,#00b4ff); }
.vc-dim-fill.mot { background:linear-gradient(90deg,#ff2d55,#ff6b8a); }
.vc-dim-fill.role { background:linear-gradient(90deg,#f5c842,#a855f7); }
.vc-dim-val { font-size:.78rem;font-weight:700;min-width:32px;text-align:right; }
.vc-analysis-wrap { border-top:1px solid var(--bd0);padding-top:18px;margin-top:4px; }
.vc-history-list { display:flex;flex-direction:column;gap:8px;margin-top:12px; }
.vc-hist-item { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;background:var(--elevated);border:1px solid var(--bd0);border-radius:var(--r10);padding:12px 16px; }
.vc-hist-main { display:flex;align-items:center;gap:14px;flex-wrap:wrap; }
.vc-hist-name { font-size:.9rem;font-weight:700; }
.vc-hist-role { font-size:.8rem;opacity:.6; }
.vc-hist-plat { font-size:.75rem;opacity:.45;font-style:italic; }
.vc-hist-meta { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.vc-hist-date { font-size:.75rem;opacity:.5; }
.vc-hist-score { font-size:.85rem;font-weight:700;color:var(--acc1); }
[data-theme="light"] .vc-verdict-panel { background:#fff;border-color:var(--bd1); }
[data-theme="light"] .vc-ring-bg { stroke:rgba(0,0,0,.07); }
[data-theme="light"] .vc-dim-bar { background:rgba(0,0,0,.06); }
[data-theme="light"] .vc-hist-item { background:#f8faff;border-color:var(--bd1); }
/* ══════════════════════════════════════════════════════════════
CULTURE CARDS — 196 COUNTRIES
══════════════════════════════════════════════════════════════ */
.culture-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
gap:10px;margin-top:4px;
}
.cul-card {
background:var(--elevated);border:1px solid var(--bd0);border-radius:var(--r10);
padding:12px 10px;text-align:center;
transition:all .2s var(--ease);
}
.cul-clickable {
cursor:pointer;position:relative;overflow:hidden;
}
.cul-clickable:hover {
border-color:rgba(0,180,255,.4);background:rgba(0,180,255,.06);
transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.2);
}
.cul-clickable:hover .cul-cta { opacity:1;transform:translateY(0); }
.cul-flag { font-size:1.8rem;margin-bottom:4px;line-height:1; }
.cul-name { font-size:.82rem;font-weight:700;margin-bottom:2px; }
.cul-region { font-size:.68rem;opacity:.4;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px; }
.cul-tip { font-size:.72rem;opacity:.6;line-height:1.4; }
.cul-cta {
margin-top:6px;font-size:.7rem;font-weight:700;color:#00b4ff;letter-spacing:.05em;
opacity:0;transform:translateY(4px);transition:all .2s ease;
}
/* ══════════════════════════════════════════════════════════════
COUNTRY INSIGHT MODAL
══════════════════════════════════════════════════════════════ */
.ci-modal-overlay {
position:fixed;inset:0;z-index:9999;
background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;padding:20px;
}
.ci-modal {
background:var(--surface);border:1px solid var(--bd1);border-radius:var(--r14);
width:100%;max-width:820px;max-height:90vh;
display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(0,180,255,.1);
animation:ciModalIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes ciModalIn {
from { opacity:0;transform:scale(.96) translateY(12px); }
to { opacity:1;transform:scale(1) translateY(0); }
}
.ci-modal-header {
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:20px 24px 16px;border-bottom:1px solid var(--bd0);flex-shrink:0;
}
.ci-modal-title {
display:flex;align-items:center;gap:14px;flex:1;flex-wrap:wrap;
}
.ci-modal-title h2 { font-size:1.15rem;font-weight:700;margin:0; }
.ci-modal-close {
background:rgba(255,255,255,.07);border:1px solid var(--bd0);border-radius:8px;
width:32px;height:32px;font-size:14px;cursor:pointer;color:var(--text-2);
flex-shrink:0;transition:all .15s;
}
.ci-modal-close:hover { background:rgba(255,45,85,.15);border-color:rgba(255,45,85,.3);color:#ff2d55; }
.ci-modal-filters {
display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
padding:14px 24px;border-bottom:1px solid var(--bd0);flex-shrink:0;
background:rgba(255,255,255,.02);
}
.ci-modal-out {
flex:1;overflow-y:auto;min-height:300px;max-height:52vh;
margin:0;border-radius:0;border:none;border-top:none;
padding:20px 24px;
}
.ci-modal-footer {
display:flex;justify-content:flex-end;gap:10px;
padding:14px 24px;border-top:1px solid var(--bd0);flex-shrink:0;
}
/* Light theme */
[data-theme="light"] .cul-card { background:#f8faff;border-color:var(--bd1); }
[data-theme="light"] .cul-clickable:hover { background:rgba(0,102,204,.05);border-color:rgba(0,102,204,.3); }
[data-theme="light"] .cul-cta { color:#0066cc; }
[data-theme="light"] .ci-modal { background:#fff;border-color:var(--bd1); }
[data-theme="light"] .ci-modal-filters { background:rgba(0,0,0,.02); }
/* ══════════════════════════════════════════════════════════════
AUTOMATION — FULL REBUILD
══════════════════════════════════════════════════════════════ */
.at-build-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start; }
@media(max-width:900px){ .at-build-grid{ grid-template-columns:1fr; } }
.at-tpl-row { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px; }
/* Result card */
.at-result-card { display:flex;flex-direction:column; }
/* URL strip */
.at-url-strip { background:linear-gradient(135deg,rgba(247,206,91,.06),rgba(0,229,255,.04));border:1.5px solid rgba(247,206,91,.3);border-radius:var(--r10);padding:16px;margin-bottom:14px; }
.at-url-label { font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--aurora-gold);margin-bottom:8px; }
.at-url-row { display:flex;gap:8px;margin-bottom:8px; }
.at-url-input { flex:1;background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.2);border-radius:6px;padding:8px 12px;font-family:var(--fm);font-size:.82rem;color:#00e5ff;outline:none;cursor:text; }
.at-copy-url-btn { white-space:nowrap;padding:8px 14px;font-size:.82rem; }
.at-url-actions { display:flex;gap:6px;flex-wrap:wrap; }
.at-action-btn { padding:6px 12px;font-size:.78rem;border-radius:6px; }
/* Email form */
.at-email-form { background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.2);border-radius:var(--r10);padding:14px;margin-bottom:12px; }
.at-email-label { font-size:.82rem;font-weight:700;color:#a855f7;margin-bottom:8px; }
.at-email-input { flex:1;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.25);border-radius:6px;padding:9px 12px;font-family:var(--fm);font-size:.88rem;color:var(--text-1);outline:none; }
/* Code wrap */
.at-code-wrap { background:rgba(0,0,0,.4);border:1px solid var(--bd0);border-radius:10px;overflow:hidden;margin-top:8px; }
.at-code-pre { padding:16px;font-family:var(--fm);font-size:.78rem;color:#7ec8e3;overflow-x:auto;max-height:380px;overflow-y:auto;white-space:pre-wrap;line-height:1.6; }
.at-code-pre::-webkit-scrollbar{ width:5px;height:5px; }
.at-code-pre::-webkit-scrollbar-thumb{ background:rgba(0,229,255,.2);border-radius:3px; }
/* Templates grid */
.at-templates-hero { background:linear-gradient(135deg,rgba(247,206,91,.07),rgba(0,229,255,.05));border:1px solid rgba(247,206,91,.18);border-radius:var(--r14);padding:22px 28px;margin-bottom:20px; }
.at-templates-hero h3 { font-size:1.15rem;font-weight:700;margin-bottom:5px; }
.at-templates-hero p { font-size:.88rem;opacity:.65; }
.at-tpl-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px; }
.at-tpl-card { background:var(--elevated);border:1px solid var(--bd0);border-radius:var(--r10);padding:18px;cursor:pointer;transition:all .2s var(--ease); }
.at-tpl-card:hover { border-color:rgba(247,206,91,.4);background:rgba(247,206,91,.04);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25); }
.at-tpl-icon { font-size:1.8rem;margin-bottom:8px; }
.at-tpl-cat { font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase;margin-bottom:4px; }
.at-tpl-name { font-size:.92rem;font-weight:700;margin-bottom:6px; }
.at-tpl-desc { font-size:.78rem;opacity:.6;line-height:1.45;margin-bottom:10px; }
.at-tpl-footer { display:flex;align-items:center;justify-content:space-between; }
.at-tpl-plat { background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.15);border-radius:4px;padding:2px 8px;font-family:var(--fm);font-size:.7rem;color:#00e5ff;text-transform:uppercase; }
.at-tpl-use { font-size:.78rem;color:var(--aurora-gold);font-weight:600; }
/* My workflows list */
.at-my-list { display:flex;flex-direction:column;gap:8px;margin-top:12px; }
.at-my-item { display:flex;flex-direction:column;gap:6px;background:var(--elevated);border:1px solid var(--bd0);border-radius:var(--r10);padding:12px 16px; }
.at-my-main { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.at-my-name { font-size:.9rem;font-weight:700; }
.at-my-tpl { background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.15);border-radius:4px;padding:2px 7px;font-family:var(--fm);font-size:.7rem;color:#00e5ff; }
.at-my-date { font-size:.75rem;opacity:.5; }
.at-my-dl { font-size:.75rem;opacity:.5; }
.at-my-actions { display:flex;gap:6px;flex-wrap:wrap; }
.at-my-btn { padding:5px 12px;font-size:.78rem;border-radius:6px;text-decoration:none;cursor:pointer; }
/* My Workflows — stats dashboard row (live DB aggregation, no hardcoded numbers) */
.at-my-stats-row { display:flex;gap:12px;flex-wrap:wrap;padding:12px 16px;background:rgba(0,255,136,.04);border:1px solid rgba(0,255,136,.12);border-radius:var(--r10);margin-bottom:8px; }
.at-my-stat { display:flex;flex-direction:column;align-items:center;min-width:70px; }
.at-my-stat-n { font-size:1.3rem;font-weight:800;color:#00ff88; }
.at-my-stat-l { font-size:.7rem;opacity:.55;margin-top:2px; }
/* Light theme */
[data-theme="light"] .at-url-strip { background:rgba(176,124,0,.04);border-color:rgba(176,124,0,.2); }
[data-theme="light"] .at-url-input { background:#f8faff;border-color:var(--bd1);color:#0066cc; }
[data-theme="light"] .at-tpl-card { background:#f8faff;border-color:var(--bd1); }
[data-theme="light"] .at-tpl-card:hover { background:rgba(176,124,0,.04);border-color:rgba(176,124,0,.3); }
[data-theme="light"] .at-my-item { background:#f8faff;border-color:var(--bd1); }
/* ══════════════════════════════════════════════════════════════
LINKEDIN INTELLIGENCE STUDIO — WORLD-CLASS CSS
══════════════════════════════════════════════════════════════ */
.li-page-hero {
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
background:linear-gradient(135deg,rgba(10,102,194,.1),rgba(0,180,255,.07),rgba(247,206,91,.04));
border:1px solid rgba(10,102,194,.25);border-radius:var(--r14);
padding:24px 28px;margin-bottom:20px;
}
.li-hero-left { display:flex;align-items:center;gap:16px;flex-wrap:wrap; }
.li-hero-logo {
width:52px;height:52px;background:linear-gradient(135deg,#0A66C2,#0077b5);
border-radius:12px;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 20px rgba(10,102,194,.35);flex-shrink:0;
}
.li-hero-badges { display:flex;gap:6px;flex-wrap:wrap;align-items:center; }
.li-score-grid { display:grid;grid-template-columns:1fr 1.4fr;gap:20px;align-items:start; }
@media(max-width:860px){ .li-score-grid{ grid-template-columns:1fr; } }
.li-input-card { display:flex;flex-direction:column; }
.li-score-btn { width:100%;margin-top:6px;justify-content:center;gap:8px; }
.fg-opt { font-size:.75rem;opacity:.45;margin-left:4px; }
.fg-req { color:#ff6b35;margin-left:4px; }
.li-score-card { display:flex;flex-direction:column;gap:20px; }
.li-score-top { display:flex;align-items:center;gap:24px;flex-wrap:wrap; }
.li-ring-wrap { position:relative;width:130px;height:130px;flex-shrink:0; }
.li-ring-svg { width:130px;height:130px;transform:rotate(-90deg); }
.li-ring-bg { fill:none;stroke:rgba(255,255,255,.06);stroke-width:10; }
.li-ring-fill { fill:none;stroke-width:10;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1); }
.li-ring-center {
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:1px;
}
.li-ring-num { font-size:2.2rem;font-weight:800;line-height:1;color:#00f0ff; }
.li-ring-lbl { font-size:.72rem;opacity:.5; }
.li-ring-sub { font-size:.7rem;font-weight:600;letter-spacing:.06em;margin-top:2px;color:#f7ce5b; }
.li-score-meta { flex:1;display:flex;flex-direction:column;gap:10px; }
.li-ssi-row { display:flex;align-items:center;gap:8px; }
.li-ssi-label { font-size:.78rem;min-width:130px;flex-shrink:0;opacity:.75; }
.li-ssi-bar { flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden; }
.li-ssi-fill { height:100%;border-radius:3px;background:linear-gradient(90deg,#0A66C2,#00e5ff);width:0%;transition:width 1.2s ease; }
.li-ssi-fill.magnet { background:linear-gradient(90deg,#f7ce5b,#ff9500); }
.li-ssi-val { font-size:.78rem;font-weight:700;min-width:40px;text-align:right;color:#00f0ff; }
.li-dims-wrap { background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:10px;padding:16px; }
.li-dims-title { font-family:var(--fm);font-size:.72rem;font-weight:700;opacity:.45;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px; }
.li-dim-row { display:flex;align-items:center;gap:8px;margin-bottom:7px; }
.li-dim-lbl { font-size:.78rem;min-width:152px;flex-shrink:0; }
.li-dim-bar { flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden; }
.li-dim-fill { height:100%;border-radius:3px;width:0%;transition:width 1s ease; }
.li-dim-fill.d1 { background:linear-gradient(90deg,#f7ce5b,#ffaa00); }
.li-dim-fill.d2 { background:linear-gradient(90deg,#00e5ff,#0A66C2); }
.li-dim-fill.d3 { background:linear-gradient(90deg,#a855f7,#7c3aed); }
.li-dim-fill.d4 { background:linear-gradient(90deg,#00ff88,#00c96a); }
.li-dim-fill.d5 { background:linear-gradient(90deg,#ff9500,#ffb340); }
.li-dim-fill.d6 { background:linear-gradient(90deg,#00e5ff,#a855f7); }
.li-dim-fill.d7 { background:linear-gradient(90deg,#ff2d55,#ff6b8a); }
.li-dim-fill.d8 { background:linear-gradient(90deg,#f7ce5b,#00ff88); }
.li-dim-val { font-size:.75rem;font-weight:700;min-width:32px;text-align:right; }
.li-out-panel { margin-top:0;flex:1; }
.li-human-hero {
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(0,180,255,.06));
border:1px solid rgba(168,85,247,.2);border-radius:var(--r14);padding:22px 26px;margin-bottom:20px;
}
.li-human-hero h3 { font-size:1.1rem;font-weight:700;margin-bottom:5px; }
.li-human-hero p { font-size:.88rem;opacity:.68;max-width:500px; }
.li-human-avatars { display:flex; }
.li-avatar { width:46px;height:46px;border-radius:50%;border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-right:-8px;transition:transform .2s; }
.li-avatar.recruiter { background:linear-gradient(135deg,rgba(10,102,194,.3),rgba(0,229,255,.2)); }
.li-avatar.hm { background:linear-gradient(135deg,rgba(168,85,247,.3),rgba(0,180,255,.2)); }
.li-avatar.peer { background:linear-gradient(135deg,rgba(0,255,136,.2),rgba(247,206,91,.2)); }
.li-avatar:hover { transform:translateY(-3px) scale(1.1); }
.li-ghost-hero {
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
background:linear-gradient(135deg,rgba(247,206,91,.07),rgba(0,180,255,.05));
border:1px solid rgba(247,206,91,.2);border-radius:var(--r14);padding:22px 26px;margin-bottom:20px;
}
.li-ghost-hero h3 { font-size:1.1rem;font-weight:700;margin-bottom:5px; }
.li-ghost-hero p { font-size:.88rem;opacity:.68;max-width:500px; }
.li-connect-hero {
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
background:linear-gradient(135deg,rgba(0,255,136,.06),rgba(0,180,255,.05));
border:1px solid rgba(0,255,136,.15);border-radius:var(--r14);padding:22px 26px;margin-bottom:20px;
}
.li-connect-hero h3 { font-size:1.1rem;font-weight:700;margin-bottom:5px; }
.li-connect-hero p { font-size:.88rem;opacity:.68;max-width:500px; }
.li-post-preview { background:rgba(10,102,194,.04);border-color:rgba(10,102,194,.2);font-size:.92rem;line-height:1.65; }
.li-tips-grid { display:flex;flex-direction:column;gap:10px;margin-top:8px; }
.li-tip-card { display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:10px;padding:12px 14px; }
.li-tip-icon { font-size:1.2rem;flex-shrink:0;margin-top:1px; }
.li-tip-text { font-size:.83rem;line-height:1.5;color:var(--text-2); }
.li-tip-text strong { color:var(--text-1); }
[data-theme="light"] .li-page-hero { background:rgba(10,102,194,.04);border-color:rgba(10,102,194,.15); }
[data-theme="light"] .li-human-hero { background:rgba(168,85,247,.03);border-color:rgba(168,85,247,.12); }
[data-theme="light"] .li-ghost-hero { background:rgba(176,124,0,.03);border-color:rgba(176,124,0,.12); }
[data-theme="light"] .li-connect-hero { background:rgba(0,136,80,.03);border-color:rgba(0,136,80,.1); }
[data-theme="light"] .li-dims-wrap { background:rgba(0,0,0,.02);border-color:var(--bd1); }
[data-theme="light"] .li-ssi-bar { background:rgba(0,0,0,.08); }
[data-theme="light"] .li-dim-bar { background:rgba(0,0,0,.08); }
[data-theme="light"] .li-ring-bg { stroke:rgba(0,0,0,.07); }
[data-theme="light"] .li-tip-card { background:rgba(0,0,0,.02);border-color:var(--bd1); }
/* ══════════════════════════════════════════════════════════════
1000 TEMPLATES + PaaS + IaaS + SaaS + APP BRAIN
══════════════════════════════════════════════════════════════ */
/* ── Template Page Hero ─────────────────────────────────── */
.at-tpl-page-hero {
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
background:linear-gradient(135deg,rgba(247,206,91,.08),rgba(0,229,255,.05),rgba(168,85,247,.04));
border:1px solid rgba(247,206,91,.2);border-radius:var(--r14);padding:24px 28px;margin-bottom:20px;
}
.at-tpl-hero-left h3 { font-size:1.3rem;font-weight:700;margin-bottom:6px;color:var(--aurora-gold); }
.at-tpl-hero-left p { font-size:.9rem;opacity:.7;max-width:520px;margin-bottom:12px; }
.at-tpl-stats { display:flex;gap:20px;flex-wrap:wrap; }
.at-stat { text-align:center; }
.at-stat-n { display:block;font-size:1.8rem;font-weight:800;color:var(--aurora-cyan);line-height:1.1; }
.at-stat-l { display:block;font-size:.72rem;opacity:.55;letter-spacing:.05em;margin-top:2px; }
/* ── Search + Controls ──────────────────────────────────── */
.at-tpl-controls {
display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;
}
.at-tpl-search-wrap { position:relative;flex:2;min-width:200px; }
.at-tpl-search {
width:100%;background:var(--elevated);border:1px solid var(--bd1);border-radius:var(--r10);
padding:9px 12px 9px 32px;font-family:var(--fb);font-size:.88rem;color:var(--text-1);outline:none;
transition:border-color .2s;
}
.at-tpl-search:focus { border-color:rgba(247,206,91,.4); }
.at-tpl-sel { flex:1;min-width:130px; }
.at-ai-gen-btn { white-space:nowrap;padding:9px 16px;font-size:.82rem; }
/* ── AI Generate Panel ──────────────────────────────────── */
.at-ai-gen-panel {
background:rgba(168,85,247,.04);border:1px solid rgba(168,85,247,.2);
border-radius:var(--r14);padding:20px;margin-bottom:16px;
}
/* ── Results Bar ────────────────────────────────────────── */
.at-tpl-results-bar {
display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
}
.at-tpl-result-count { font-size:.82rem;opacity:.6; }
.at-tpl-view-btns { display:flex;gap:4px; }
.at-view-btn {
background:rgba(255,255,255,.04);border:1px solid var(--bd0);border-radius:6px;
padding:4px 10px;font-size:.78rem;cursor:pointer;color:var(--text-2);transition:all .15s;
}
.at-view-btn.active { background:rgba(247,206,91,.1);border-color:rgba(247,206,91,.3);color:var(--aurora-gold); }
/* ── Template Main Grid ─────────────────────────────────── */
.at-tpl-main-grid {
display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;
}
.at-tpl-card {
background:var(--elevated);border:1px solid var(--bd0);border-radius:var(--r10);
padding:16px;cursor:pointer;transition:all .2s var(--ease);display:flex;flex-direction:column;gap:6px;
}
.at-tpl-card:hover {
transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.25);
}
.at-tpl-card-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:2px; }
.at-tpl-icon { font-size:1.7rem;line-height:1; }
.at-tpl-tier-dot {
font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:10px;border:1px solid;
}
.at-tpl-cat { font-family:var(--fm);font-size:.68rem;opacity:.45;letter-spacing:.08em;text-transform:uppercase; }
.at-tpl-name { font-size:.88rem;font-weight:700;line-height:1.3; }
.at-tpl-desc { font-size:.75rem;opacity:.6;line-height:1.45;flex:1; }
.at-tpl-metrics { display:flex;gap:6px;flex-wrap:wrap;margin-top:4px; }
.at-metric {
font-size:.72rem;background:rgba(255,255,255,.04);border:1px solid var(--bd0);
border-radius:4px;padding:2px 6px;color:var(--text-2);
}
.at-tpl-footer { display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;border-top:1px solid var(--bd0); }
.at-tpl-plat { background:rgba(0,229,255,.07);border:1px solid rgba(0,229,255,.15);border-radius:4px;padding:2px 7px;font-family:var(--fm);font-size:.68rem;color:#00e5ff;text-transform:uppercase; }
.at-tpl-use { font-size:.75rem;color:var(--aurora-gold);font-weight:600; }
/* ── List View ──────────────────────────────────────────── */
.at-tpl-list-view { display:flex;flex-direction:column;gap:6px; }
.at-tpl-list-item {
display:flex;align-items:center;gap:12px;background:var(--elevated);
border:1px solid var(--bd0);border-radius:var(--r10);padding:10px 14px;
cursor:pointer;transition:all .15s;flex-wrap:wrap;
}
.at-tpl-list-item:hover { border-color:rgba(247,206,91,.3);background:rgba(247,206,91,.04); }
.at-tpl-list-icon { font-size:1.4rem;flex-shrink:0; }
.at-tpl-list-main { flex:1;min-width:120px; }
.at-tpl-list-name { font-size:.88rem;font-weight:700;display:block; }
.at-tpl-list-cat { font-size:.72rem;opacity:.5; }
.at-tpl-list-plat { font-family:var(--fm);font-size:.72rem;color:#00e5ff;min-width:60px; }
.at-tpl-list-save { font-size:.75rem;opacity:.6;min-width:70px; }
.at-tpl-list-tier { font-size:.75rem;min-width:80px; }
.at-tpl-list-use { font-size:.78rem;color:var(--aurora-gold);font-weight:600;margin-left:auto; }
/* ── PaaS / IaaS / SaaS Heroes ──────────────────────────── */
.saas-hero {
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
border-radius:var(--r14);padding:24px 28px;margin-bottom:20px;border:1px solid;
}
.paas-hero {
background:linear-gradient(135deg,rgba(0,180,255,.08),rgba(0,229,255,.05));
border-color:rgba(0,180,255,.2);
}
.iaas-hero {
background:linear-gradient(135deg,rgba(255,149,0,.08),rgba(255,200,0,.05));
border-color:rgba(255,149,0,.2);
}
.saas-builder-hero {
background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(0,229,255,.05));
border-color:rgba(168,85,247,.2);
}
.saas-hero-icon { font-size:2.8rem;flex-shrink:0; }
.saas-hero h3 { font-size:1.15rem;font-weight:700;margin-bottom:5px; }
.saas-hero p { font-size:.88rem;opacity:.68;max-width:500px;line-height:1.55; }
.saas-hero-badges { display:flex;flex-direction:column;gap:6px;flex-shrink:0;margin-left:auto; }
@media(max-width:700px){ .saas-hero-badges{ flex-direction:row;margin-left:0; } }
.saas-grid { display:grid;grid-template-columns:1fr 1.4fr;gap:20px;align-items:start; }
@media(max-width:860px){ .saas-grid{ grid-template-columns:1fr; } }
.paas-btn { width:100%;margin-top:6px; }
/* SaaS quick ideas */
.saas-quick-ideas { display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0; }
.saas-quick-label { font-size:.75rem;opacity:.5;margin-right:4px; }
.saas-build-btn { width:100%;margin-top:8px; }
/* ── Unified Brain Hero ─────────────────────────────────── */
.brain-unified-hero {
display:flex;align-items:center;gap:24px;flex-wrap:wrap;
background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(0,229,255,.06),rgba(247,206,91,.04));
border:1px solid rgba(139,92,246,.2);border-radius:var(--r14);padding:24px 28px;margin-bottom:20px;
}
.brain-unified-hero h3 { font-size:1.15rem;font-weight:700;margin-bottom:5px; }
.brain-unified-hero p { font-size:.88rem;opacity:.68;max-width:500px;line-height:1.55; }
.brain-unified-orb {
position:relative;width:80px;height:80px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
}
.bu-ring {
position:absolute;border-radius:50%;border:1.5px solid rgba(139,92,246,.3);
animation:buOrbit 4s linear infinite;
}
.bu-ring.r1 { width:80px;height:80px;animation-duration:4s; }
.bu-ring.r2 { width:60px;height:60px;animation-duration:3s;border-color:rgba(0,229,255,.3); }
.bu-ring.r3 { width:40px;height:40px;animation-duration:2s;border-color:rgba(247,206,91,.3); }
@keyframes buOrbit { from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }
.bu-core { position:relative;z-index:1;font-size:1.8rem; }
.brain-btn { width:100%;margin-top:6px; }
/* ── Light theme ────────────────────────────────────────── */
[data-theme="light"] .at-tpl-page-hero { background:rgba(176,124,0,.04);border-color:rgba(176,124,0,.15); }
[data-theme="light"] .at-tpl-search { background:#fff;border-color:var(--bd1);color:#0a0f1e; }
[data-theme="light"] .at-tpl-card { background:#f8faff;border-color:var(--bd1); }
[data-theme="light"] .at-tpl-list-item { background:#f8faff;border-color:var(--bd1); }
[data-theme="light"] .at-view-btn { background:#f0f4ff;border-color:var(--bd1);color:#333; }
[data-theme="light"] .paas-hero { background:rgba(0,102,204,.03);border-color:rgba(0,102,204,.12); }
[data-theme="light"] .iaas-hero { background:rgba(204,102,0,.03);border-color:rgba(204,102,0,.12); }
[data-theme="light"] .saas-builder-hero { background:rgba(168,85,247,.03);border-color:rgba(168,85,247,.1); }
[data-theme="light"] .brain-unified-hero{ background:rgba(139,92,246,.03);border-color:rgba(139,92,246,.1); }
/* ══════════════════════════════════════════════════════════════
WORLD-FIRST 2000+ TEMPLATE SYSTEM — Full UI Design
Blueprint System™ · Chain Builder · ROI Calc · DNA · Bundles
══════════════════════════════════════════════════════════════ */
/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes tpl-fade-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes tpl-scale-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes tpl-glow-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(0,240,255,.3)} 50%{box-shadow:0 0 0 6px rgba(0,240,255,0)} }
@keyframes tpl-shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes tpl-spin { to{transform:rotate(360deg)} }
@keyframes dna-fill { from{width:0} to{width:var(--dna-w,60%)} }
@keyframes roi-count { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
/* ── Hero Banner ────────────────────────────────────────────── */
.at-tpl-page-hero {
position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
background:linear-gradient(135deg,rgba(247,206,91,.1) 0%,rgba(0,229,255,.06) 50%,rgba(168,85,247,.06) 100%);
border:1px solid rgba(247,206,91,.25);border-radius:18px;padding:28px 32px;margin-bottom:20px;
}
.at-tpl-page-hero::before {
content:'';position:absolute;top:-40px;right:-40px;width:220px;height:220px;border-radius:50%;
background:radial-gradient(circle,rgba(0,229,255,.1),transparent 70%);pointer-events:none;
}
.at-tpl-page-hero::after {
content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:18px 18px 0 0;
background:linear-gradient(90deg,transparent,rgba(247,206,91,.6),rgba(0,229,255,.5),transparent);
}
.at-tpl-hero-left h3 { font-size:1.4rem;font-weight:800;margin-bottom:6px;color:var(--aurora-gold);letter-spacing:-.02em; }
.at-tpl-hero-left p { font-size:.88rem;opacity:.7;max-width:520px;margin-bottom:14px;line-height:1.5; }
.at-tpl-hero-right { flex-shrink:0;display:flex;flex-direction:column;gap:6px;align-items:flex-end; }
.at-tpl-hero-right .btn-s { font-size:11px; }
.chain-form-row { margin-top:12px; }
.chain-search-wrap { margin:12px 0; }
.chain-search-label { font-size:12px;color:var(--text-2,#94a3b8);display:block;margin-bottom:6px; }
.chain-controls-row { margin-top:6px;margin-bottom:0; }
/* ── Stats Bar ──────────────────────────────────────────────── */
.at-tpl-stats { display:flex;gap:24px;flex-wrap:wrap; }
.at-stat {
text-align:center;min-width:50px;
}
.at-stat-n {
display:block;font-size:2rem;font-weight:800;line-height:1;
background:linear-gradient(135deg,var(--aurora-cyan),var(--aurora-gold));
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.at-stat-l { display:block;font-size:.7rem;opacity:.5;letter-spacing:.06em;margin-top:3px;text-transform:uppercase; }
/* ── World-First Feature Tabs ───────────────────────────────── */
.tpl-tabs-row {
display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;
padding:6px;background:rgba(255,255,255,.03);border-radius:14px;
border:1px solid rgba(255,255,255,.07);
}
.tpl-feature-btn {
flex:1;min-width:90px;text-align:center;
background:transparent;border:1px solid transparent;
color:var(--text-2,#94a3b8);padding:9px 14px;border-radius:10px;
font-size:.8rem;font-weight:600;cursor:pointer;
transition:all .2s var(--ease,ease);white-space:nowrap;
}
.tpl-feature-btn:hover {
background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--text-1);
}
.tpl-feature-btn.active {
background:linear-gradient(135deg,rgba(0,240,255,.15),rgba(0,200,130,.1));
border-color:rgba(0,240,255,.35);color:var(--aurora-cyan,#00f0ff);
box-shadow:0 0 16px rgba(0,240,255,.15),inset 0 1px 0 rgba(255,255,255,.1);
}
/* ── Tab Panels ─────────────────────────────────────────────── */
.tpl-panel { animation:tpl-fade-up .3s ease forwards; }
/* ── Browse Panel ───────────────────────────────────────────── */
.at-tpl-controls {
display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;
}
.at-tpl-search-wrap { position:relative;flex:2;min-width:220px; }
.at-tpl-search {
width:100%;background:var(--elevated,rgba(255,255,255,.05));
border:1.5px solid var(--bd1,rgba(255,255,255,.1));border-radius:10px;
padding:10px 12px 10px 34px;font-size:.88rem;color:var(--text-1);outline:none;
transition:border-color .2s,box-shadow .2s;
}
.at-tpl-search:focus { border-color:rgba(0,240,255,.4);box-shadow:0 0 0 3px rgba(0,240,255,.08); }
.at-tpl-sel { flex:1;min-width:130px; }
.at-tpl-results-bar {
display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
padding:8px 12px;background:rgba(255,255,255,.02);border-radius:8px;
border:1px solid rgba(255,255,255,.06);
}
.at-tpl-result-count { font-size:.82rem;opacity:.65;font-weight:500; }
.at-tpl-view-btns { display:flex;gap:4px; }
.at-view-btn {
background:rgba(255,255,255,.04);border:1px solid var(--bd0,rgba(255,255,255,.08));
border-radius:6px;padding:5px 11px;font-size:.78rem;cursor:pointer;
color:var(--text-2);transition:all .15s;
}
.at-view-btn.active { background:rgba(247,206,91,.1);border-color:rgba(247,206,91,.35);color:var(--aurora-gold); }
/* ── Template Grid ──────────────────────────────────────────── */
.at-tpl-main-grid {
display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;
}
.at-tpl-card {
background:var(--elevated,rgba(255,255,255,.04));
border:1px solid var(--bd0,rgba(255,255,255,.08));
border-radius:14px;padding:16px;
display:flex;flex-direction:column;gap:6px;
transition:all .22s var(--ease,ease);
animation:tpl-fade-up .35s ease both;
position:relative;overflow:hidden;
}
.at-tpl-card::before {
content:'';position:absolute;inset:0;border-radius:14px;opacity:0;
background:linear-gradient(135deg,rgba(247,206,91,.06),rgba(0,229,255,.04));
transition:opacity .22s;pointer-events:none;
}
.at-tpl-card:hover {
transform:translateY(-3px);
box-shadow:0 10px 32px rgba(0,0,0,.28);
}
.at-tpl-card:hover::before { opacity:1; }
.at-tpl-card-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:2px; }
.at-tpl-icon { font-size:1.8rem;line-height:1; }
.at-tpl-tier-dot { font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:10px;border:1px solid; }
.at-tpl-cat { font-family:var(--fm);font-size:.67rem;opacity:.45;letter-spacing:.08em;text-transform:uppercase;line-height:1.4; }
.at-tpl-name { font-size:.9rem;font-weight:700;line-height:1.35; }
.at-tpl-desc { font-size:.75rem;opacity:.6;line-height:1.48;flex:1; }
.at-tpl-metrics { display:flex;gap:5px;flex-wrap:wrap;margin-top:4px; }
.at-metric {
font-size:.7rem;background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);border-radius:4px;
padding:2px 6px;color:var(--text-2);
}
.at-tpl-footer {
display:flex;align-items:center;justify-content:space-between;
margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);
}
.at-tpl-plat {
background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.18);
border-radius:4px;padding:2px 7px;font-family:var(--fm);font-size:.67rem;
color:#00e5ff;text-transform:uppercase;letter-spacing:.04em;
}
.at-tpl-use { font-size:.75rem;color:var(--aurora-gold);font-weight:600;cursor:pointer; }
.at-tpl-use:hover { text-decoration:underline; }
/* ── Template Card Action Row (world-first buttons) ─────────── */
.tpl-card-actions {
display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;padding-top:6px;
border-top:1px solid rgba(255,255,255,.05);
}
.tpl-act-btn {
flex:1;text-align:center;font-size:10px;padding:4px 6px;border-radius:6px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
color:var(--text-2);cursor:pointer;transition:all .15s;white-space:nowrap;
font-family:var(--fb);font-weight:500;
}
.tpl-act-btn:hover { border-color:rgba(0,240,255,.3);color:var(--aurora-cyan);background:rgba(0,240,255,.06); }
.tpl-act-btn.chain:hover { border-color:rgba(168,85,247,.4);color:#a855f7;background:rgba(168,85,247,.08); }
.tpl-act-btn.roi:hover { border-color:rgba(34,197,94,.4);color:#22c55e;background:rgba(34,197,94,.08); }
.tpl-act-btn.dna:hover { border-color:rgba(0,255,136,.4);color:#00ff88;background:rgba(0,255,136,.06); }
/* ── DNA Badge on Cards ─────────────────────────────────────── */
.tpl-dna-badge {
display:inline-flex;align-items:center;gap:3px;
font-size:9px;padding:2px 6px;border-radius:10px;vertical-align:middle;
background:rgba(0,255,136,.12);color:#00ff88;border:1px solid rgba(0,255,136,.25);
font-weight:600;
}
/* ── Bundles Panel ──────────────────────────────────────────── */
.tpl-bundles-grid {
display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:16px;
}
.tpl-bundle-card {
background:var(--elevated,rgba(255,255,255,.04));
border-radius:16px;padding:20px;cursor:pointer;
border:1px solid rgba(255,255,255,.08);
transition:all .22s var(--ease,ease);
animation:tpl-fade-up .35s ease both;
position:relative;overflow:hidden;
}
.tpl-bundle-card::after {
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:var(--bundle-color,#6366f1);border-radius:16px 16px 0 0;
}
.tpl-bundle-card:hover { transform:translateY(-4px);box-shadow:0 12px 36px rgba(0,0,0,.3); }
.tpl-bundle-icon { font-size:2.4rem;margin-bottom:10px;display:block; }
.tpl-bundle-name { font-size:1rem;font-weight:700;margin:0 0 5px; }
.tpl-bundle-desc { font-size:.8rem;opacity:.65;margin:0 0 12px;line-height:1.5; }
.tpl-bundle-tags { display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px; }
.tpl-bundle-tag {
font-size:.68rem;padding:2px 8px;border-radius:20px;
background:var(--bundle-bg,rgba(99,102,241,.12));
color:var(--bundle-color,#6366f1);border:1px solid var(--bundle-color,#6366f1);
opacity:.8;
}
.tpl-bundle-footer {
display:flex;align-items:center;justify-content:space-between;
padding-top:12px;border-top:1px solid rgba(255,255,255,.06);
}
.tpl-bundle-count { font-size:.75rem;opacity:.55; }
.tpl-bundle-deploy {
font-size:.75rem;font-weight:700;padding:5px 12px;border-radius:8px;
background:var(--bundle-color,#6366f1);color:#fff;border:none;cursor:pointer;
transition:opacity .15s;
}
.tpl-bundle-deploy:hover { opacity:.85; }
/* ── Chain Builder Panel ────────────────────────────────────── */
.chain-builder-wrap { margin-top:16px; }
.chain-search-results {
display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:8px;margin-top:8px;max-height:220px;overflow-y:auto;
padding:2px;scrollbar-width:thin;
}
.chain-result-card {
padding:10px 12px;border-radius:10px;cursor:pointer;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
transition:all .15s;
}
.chain-result-card:hover { border-color:rgba(168,85,247,.4);background:rgba(168,85,247,.06); }
.chain-result-card.added { opacity:.35;cursor:not-allowed; }
.chain-result-name { font-size:.82rem;font-weight:600;margin-bottom:2px; }
.chain-result-meta { font-size:.72rem;opacity:.5; }
.chain-selected-area {
min-height:80px;padding:12px;margin:12px 0;
background:rgba(168,85,247,.04);border:1.5px dashed rgba(168,85,247,.2);
border-radius:12px;
}
.chain-selected-empty { color:var(--text-2);font-size:.82rem;opacity:.6;margin:0; }
.chain-step {
display:flex;align-items:center;gap:10px;padding:8px 10px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:8px;margin-bottom:6px;transition:all .15s;
}
.chain-step:hover { border-color:rgba(168,85,247,.3); }
.chain-step-num {
width:22px;height:22px;border-radius:50%;flex-shrink:0;
background:var(--aurora-cyan);color:#000;font-size:.7rem;font-weight:700;
display:flex;align-items:center;justify-content:center;
}
.chain-step-name { flex:1;font-size:.82rem;font-weight:600; }
.chain-step-plat { font-size:.7rem;opacity:.5; }
.chain-step-remove {
background:none;border:none;color:var(--text-2);cursor:pointer;
font-size:14px;padding:0 4px;opacity:.5;transition:opacity .15s;
}
.chain-step-remove:hover { opacity:1;color:#f87171; }
.chain-connector { text-align:center;font-size:16px;opacity:.35;margin:2px 0; }
.chain-output-panel {
margin-top:16px;padding:20px;
background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.2);
border-radius:14px;min-height:300px;
}
/* ── ROI Calculator Panel ───────────────────────────────────── */
.roi-inputs-row { display:flex;gap:12px;flex-wrap:wrap;margin:14px 0; }
.roi-input-group { flex:1;min-width:140px; }
.roi-input-group label { font-size:.78rem;opacity:.6;display:block;margin-bottom:5px; }
.roi-template-search-wrap { position:relative;flex:2;min-width:200px; }
.roi-dropdown {
background:var(--elevated,rgba(20,25,45,1));border:1px solid rgba(255,255,255,.1);
border-radius:10px;max-height:220px;overflow-y:auto;margin-bottom:12px;
box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.roi-dropdown-item {
padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05);
transition:background .15s;
}
.roi-dropdown-item:last-child { border-bottom:none; }
.roi-dropdown-item:hover { background:rgba(255,255,255,.05); }
.roi-dropdown-item-name { font-size:.85rem;font-weight:600; }
.roi-dropdown-item-meta { font-size:.72rem;opacity:.5;margin-top:2px; }
.roi-results-card {
padding:24px;margin-top:16px;
background:rgba(0,255,136,.05);border:1px solid rgba(0,255,136,.18);
border-radius:16px;animation:tpl-scale-in .3s ease both;
}
.roi-metrics-grid {
display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-bottom:16px;
}
.roi-metric { text-align:center; }
.roi-metric-val {
font-size:2.2rem;font-weight:800;line-height:1;
animation:roi-count .4s ease both;
display:block;
}
.roi-metric-val.green { color:#00ff88; }
.roi-metric-val.emerald{ color:#22c55e; }
.roi-metric-val.cyan { color:var(--aurora-cyan,#00f0ff); }
.roi-metric-val.gold { color:#f59e0b; }
.roi-metric-label { font-size:.72rem;opacity:.55;margin-top:4px;display:block; }
.roi-summary { font-size:.82rem;opacity:.65;line-height:1.6;margin-top:4px; }
.roi-divider { height:1px;background:rgba(255,255,255,.07);margin:14px 0; }
/* ── Platform Translator Panel ──────────────────────────────── */
.tpl-translator-panel {
margin-top:16px;animation:tpl-fade-up .3s ease both;
}
.tpl-translator-inner {
background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.25);
border-radius:16px;padding:20px;position:relative;
}
.tpl-translator-inner::after {
content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:16px 16px 0 0;
background:linear-gradient(90deg,rgba(139,92,246,.6),rgba(0,229,255,.4),transparent);
}
.tpl-translator-header { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.tpl-translator-close {
margin-left:auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
border-radius:6px;color:var(--text-2);cursor:pointer;padding:4px 10px;font-size:13px;
transition:all .15s;
}
.tpl-translator-close:hover { background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#f87171; }
.tpl-translator-controls {
display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap;
}
.tpl-translator-output {
min-height:280px;padding:16px;
background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.07);
border-radius:10px;font-size:.82rem;line-height:1.6;
}
/* ── AI Generate Panel ──────────────────────────────────────── */
.tpl-ai-gen-panel {
background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.2);
border-radius:16px;padding:22px;position:relative;overflow:hidden;
}
.tpl-ai-gen-panel::before {
content:'';position:absolute;top:-30px;right:-30px;width:150px;height:150px;
border-radius:50%;background:radial-gradient(circle,rgba(168,85,247,.15),transparent 70%);
pointer-events:none;
}
.tpl-ai-output {
margin-top:16px;padding:16px;
background:rgba(0,0,0,.2);border:1px solid rgba(168,85,247,.15);
border-radius:12px;min-height:200px;
}
/* ── Template DNA Modal ─────────────────────────────────────── */
.dna-score-ring {
width:90px;height:90px;border-radius:50%;margin:0 auto 12px;
display:flex;align-items:center;justify-content:center;flex-direction:column;
background:conic-gradient(var(--aurora-cyan) var(--dna-pct,60%), rgba(255,255,255,.06) 0);
box-shadow:0 0 24px rgba(0,240,255,.2);
}
.dna-score-num { font-size:1.5rem;font-weight:800;color:#fff; }
.dna-score-label { font-size:.65rem;opacity:.7; }
.dna-maturity-badge {
display:inline-block;padding:3px 12px;border-radius:20px;font-size:.78rem;font-weight:600;
background:rgba(0,255,136,.1);color:#00ff88;border:1px solid rgba(0,255,136,.3);margin-bottom:14px;
}
.dna-stats-grid {
display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.dna-stat {
padding:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
border-radius:10px;text-align:center;
}
.dna-stat-val { font-size:1.3rem;font-weight:700;display:block; }
.dna-stat-lbl { font-size:.7rem;opacity:.5;margin-top:3px;display:block; }
/* ── Modal overlay ──────────────────────────────────────────── */
.cs-modal-overlay {
position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9999;
display:flex;align-items:center;justify-content:center;padding:20px;
animation:tpl-fade-up .2s ease both;
}
.cs-modal {
background:var(--c2,#1a1a2e);border:1px solid rgba(255,255,255,.12);
border-radius:18px;padding:24px;max-width:540px;width:100%;
max-height:80vh;overflow-y:auto;position:relative;
box-shadow:0 24px 64px rgba(0,0,0,.5);
animation:tpl-scale-in .25s ease both;
}
.cs-modal-close {
position:absolute;top:14px;right:14px;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.1);border-radius:8px;
color:var(--text-2);font-size:16px;cursor:pointer;padding:4px 9px;
transition:all .15s;
}
.cs-modal-close:hover { background:rgba(248,113,113,.1);color:#f87171; }
.cs-modal-title { font-size:1rem;font-weight:700;margin:0 0 16px; }
/* ── List View ──────────────────────────────────────────────── */
.at-tpl-list-view { display:flex;flex-direction:column;gap:6px; }
.at-tpl-list-item {
display:flex;align-items:center;gap:12px;
background:var(--elevated);border:1px solid var(--bd0);
border-radius:10px;padding:10px 14px;cursor:pointer;
transition:all .15s;flex-wrap:wrap;
}
.at-tpl-list-item:hover { border-color:rgba(247,206,91,.3);background:rgba(247,206,91,.04); }
.at-tpl-list-icon { font-size:1.4rem;flex-shrink:0; }
.at-tpl-list-main { flex:1;min-width:120px; }
.at-tpl-list-name { font-size:.88rem;font-weight:700;display:block; }
.at-tpl-list-cat { font-size:.72rem;opacity:.5; }
.at-tpl-list-plat { font-family:var(--fm);font-size:.72rem;color:#00e5ff;min-width:60px; }
.at-tpl-list-save { font-size:.75rem;opacity:.6;min-width:70px; }
.at-tpl-list-tier { font-size:.75rem;min-width:80px; }
.at-tpl-list-use { font-size:.78rem;color:var(--aurora-gold);font-weight:600;margin-left:auto;cursor:pointer; }
/* ── Loading shimmer ────────────────────────────────────────── */
.tpl-shimmer-card {
border-radius:14px;padding:16px;height:180px;
background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);
background-size:400px 100%;
animation:tpl-shimmer 1.5s ease-in-out infinite;
border:1px solid rgba(255,255,255,.06);
}
/* ── Light Theme Overrides ──────────────────────────────────── */
[data-theme="light"] .tpl-feature-btn { color:#475569; }
[data-theme="light"] .tpl-feature-btn:hover { background:rgba(0,0,0,.05); }
[data-theme="light"] .tpl-feature-btn.active { background:rgba(0,180,200,.1);border-color:rgba(0,180,200,.4);color:#0284c7; }
[data-theme="light"] .at-tpl-card { background:#fff;border-color:#e2e8f0;box-shadow:0 2px 8px rgba(0,0,0,.06); }
[data-theme="light"] .tpl-bundle-card{ background:#fff;border-color:#e2e8f0; }
[data-theme="light"] .tpl-tabs-row { background:rgba(0,0,0,.03);border-color:#e2e8f0; }
[data-theme="light"] .roi-results-card{ background:rgba(0,200,80,.04);border-color:rgba(0,200,80,.2); }
[data-theme="light"] .at-tpl-search { background:#fff;border-color:#cbd5e1;color:#0f172a; }
[data-theme="light"] .tpl-translator-inner { background:rgba(99,102,241,.04);border-color:rgba(99,102,241,.2); }
[data-theme="light"] .cs-modal { background:#fff;border-color:#e2e8f0; }
[data-theme="light"] .chain-result-card { background:#f8faff;border-color:#e2e8f0; }
[data-theme="light"] .chain-selected-area { background:rgba(99,102,241,.04);border-color:rgba(99,102,241,.2); }
/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:680px){
.tpl-tabs-row { gap:4px; }
.tpl-feature-btn { font-size:.72rem;padding:7px 8px;min-width:60px; }
.at-tpl-main-grid { grid-template-columns:1fr 1fr; }
.roi-metrics-grid { grid-template-columns:1fr 1fr; }
.tpl-bundles-grid { grid-template-columns:1fr; }
.at-tpl-page-hero { padding:18px 20px; }
.at-tpl-stats { gap:14px; }
.at-stat-n { font-size:1.5rem; }
}
@media(max-width:420px){
.at-tpl-main-grid { grid-template-columns:1fr; }
.tpl-feature-btn { font-size:.68rem;padding:6px 6px; }
}
/* ══════════════════════════════════════════════════════
LINKEDIN AUTO-OPTIMIZE + BANNER + 50-LANGUAGE PICKER
══════════════════════════════════════════════════════ */
/* ── Auto-Optimize Hero ─────────────────────────────── */
.li-autoopt-hero {
display:flex;align-items:center;gap:22px;flex-wrap:wrap;
background:linear-gradient(135deg,rgba(247,206,91,.08),rgba(0,255,136,.06));
border:1px solid rgba(247,206,91,.22);border-radius:var(--r14);padding:22px 26px;margin-bottom:20px;
}
.li-autoopt-hero h3 { font-size:1.1rem;font-weight:700;margin-bottom:5px; }
.li-autoopt-hero p { font-size:.88rem;opacity:.68;max-width:500px;line-height:1.55; }
.li-autoopt-ring { position:relative;flex-shrink:0; }
.li-autoopt-pct {
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:1.5rem;font-weight:800;color:#f7ce5b;
}
/* Checklist */
.li-autoopt-checklist { display:flex;flex-direction:column;gap:7px;margin:12px 0; }
.ao-check {
display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-2);
padding:7px 12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
border-radius:8px;transition:all .3s;
}
.ao-dot {
width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);
flex-shrink:0;transition:all .3s;
}
.ao-check.ao-active { background:rgba(247,206,91,.06);border-color:rgba(247,206,91,.2);color:var(--aurora-gold); }
.ao-check.ao-active .ao-dot { background:var(--aurora-gold);box-shadow:0 0 8px rgba(247,206,91,.5); }
.ao-check.ao-done { background:rgba(0,255,136,.05);border-color:rgba(0,255,136,.2);color:#00ff88; }
.ao-check.ao-done .ao-dot { background:#00ff88;box-shadow:0 0 8px rgba(0,255,136,.4); }
/* ── Banner Hero ────────────────────────────────────── */
.li-banner-hero {
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(255,149,0,.05));
border:1px solid rgba(168,85,247,.2);border-radius:var(--r14);padding:22px 26px;margin-bottom:20px;
}
.li-banner-hero h3 { font-size:1.1rem;font-weight:700;margin-bottom:5px; }
.li-banner-hero p { font-size:.88rem;opacity:.68;max-width:500px;line-height:1.55; }
/* Light theme */
[data-theme="light"] .li-autoopt-hero { background:rgba(176,124,0,.04);border-color:rgba(176,124,0,.15); }
[data-theme="light"] .li-banner-hero { background:rgba(168,85,247,.04);border-color:rgba(168,85,247,.12); }
[data-theme="light"] .ao-check { background:#f8faff;border-color:var(--bd1); }
/* ═══════════════════════════════════════════════════
WORLD-CLASS DROPDOWN / SELECT — v5.0
Custom chevron, glow, option styling
═══════════════════════════════════════════════════ */
.sel,
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' stroke='%2300e5ff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
min-height: 44px;
background-color: rgba(6,10,24,.92);
border: 1.5px solid rgba(255,255,255,.1);
border-radius: 12px;
color: var(--text-0);
font-family: var(--fm);
font-size: 12.5px;
letter-spacing: .02em;
transition: border-color .2s, box-shadow .2s, background .2s;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
color-scheme: dark;
}
.sel:hover, select:hover {
border-color: rgba(0,229,255,.3);
background-color: rgba(0,229,255,.04);
}
.sel:focus, select:focus {
border-color: rgba(0,229,255,.6);
background-color: rgba(0,229,255,.06);
box-shadow: 0 0 0 3px rgba(0,229,255,.12), 0 0 20px rgba(0,229,255,.08);
outline: none;
}
.sel option, select option {
background: #0d1117;
color: #e0e6f0;
padding: 10px 14px;
font-size: 13px;
}
.sel optgroup, select optgroup {
background: #0a0f1a;
color: rgba(0,229,255,.7);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
/* Default (dark) theme —