/* ================================================
   İSG C Sınıfı Sınav – Premium Dark Theme v2
   ================================================ */

:root {
    --bg-0: #060a14;
    --bg-1: #0c1222;
    --bg-2: #131b2e;
    --bg-3: #1a2440;
    --bg-4: #212d4a;
    --surface: #243050;

    --accent: #3b82f6;
    --accent-2: #8b5cf6;
    --accent-glow: rgba(59, 130, 246, 0.25);
    --accent-soft: rgba(59, 130, 246, 0.08);
    --accent-soft-2: rgba(139, 92, 246, 0.08);

    --green: #10b981;
    --green-bg: rgba(16, 185, 129, 0.1);
    --red: #ef4444;
    --red-bg: rgba(239, 68, 68, 0.1);
    --amber: #f59e0b;
    --amber-bg: rgba(245, 158, 11, 0.1);

    --text-1: #edf2f7;
    --text-2: #94a3b8;
    --text-3: #64748b;

    --border: rgba(255,255,255,0.06);
    --border-h: rgba(59,130,246,0.3);

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-full: 9999px;

    --sh-sm: 0 2px 8px rgba(0,0,0,0.25);
    --sh-md: 0 4px 24px rgba(0,0,0,0.35);
    --sh-lg: 0 8px 40px rgba(0,0,0,0.45);

    --font: 'Outfit', system-ui, sans-serif;
    --mono: 'JetBrains Mono', monospace;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:var(--bg-0); color:var(--text-1); min-height:100vh; overflow-x:hidden; line-height:1.6; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-0); }
::-webkit-scrollbar-thumb { background:var(--bg-4); border-radius:3px; }

/* ===== Screen System ===== */
.screen { display:none; min-height:100vh; flex-direction:column; position:relative; }
.screen.active { display:flex; animation:screenIn .5s var(--ease); }
@keyframes screenIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.hidden { display:none !important; }

/* ===== Ambient Background ===== */
.ambient-bg { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.orb { position:absolute; border-radius:50%; filter:blur(100px); opacity:.35; }
.orb-1 { width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.12),transparent 70%);top:-120px;right:-80px;animation:orbFloat 14s ease-in-out infinite; }
.orb-2 { width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,.1),transparent 70%);bottom:-100px;left:-100px;animation:orbFloat 18s ease-in-out infinite reverse; }
.orb-3 { width:300px;height:300px;background:radial-gradient(circle,rgba(59,130,246,.08),transparent 70%);top:40%;left:30%;animation:orbPulse 10s ease-in-out infinite; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,25px)} }
@keyframes orbPulse { 0%,100%{transform:scale(1);opacity:.3} 50%{transform:scale(1.2);opacity:.15} }

/* ===== Loading ===== */
#screen-loading { align-items:center; justify-content:center; }
.loader-wrap { display:flex; flex-direction:column; align-items:center; gap:20px; }
.loader-spinner { width:44px;height:44px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite; }
.loader-spinner.small { width:20px;height:20px;border-width:2px; }
.loader-msg { color:var(--text-2); font-size:.9rem; font-weight:500; }
.dots::after { content:''; animation:dots 1.5s steps(4) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }
@keyframes spin { to{transform:rotate(360deg)} }

/* ===== Animations ===== */
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideRight { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideLeft { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
.anim-up { animation:fadeUp .5s var(--ease) both; }
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}.d5{animation-delay:.25s}.d6{animation-delay:.3s}.d7{animation-delay:.35s}.d8{animation-delay:.4s}

/* ===== Buttons ===== */
.btn-primary { display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-family:var(--font);font-size:.92rem;font-weight:600;border:none;border-radius:var(--r-full);cursor:pointer;transition:all .3s var(--ease);box-shadow:0 4px 20px rgba(59,130,246,.25); }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 6px 28px rgba(59,130,246,.35); }
.btn-primary:active { transform:translateY(0) scale(.98); }
.btn-primary:disabled { opacity:.4;cursor:not-allowed;transform:none; }
.btn-primary.btn-full { width:100%;justify-content:center; }
.btn-primary.btn-danger { background:linear-gradient(135deg,var(--red),#dc2626); box-shadow:0 4px 20px rgba(239,68,68,.25); }

.btn-outline { display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:transparent;border:1.5px solid var(--border);color:var(--text-1);font-family:var(--font);font-size:.92rem;font-weight:600;border-radius:var(--r-full);cursor:pointer;transition:all .3s var(--ease); }
.btn-outline:hover { border-color:var(--border-h);background:var(--accent-soft); }

.btn-ghost { display:inline-flex;align-items:center;justify-content:center;padding:8px;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);cursor:pointer;transition:all .2s; }
.btn-ghost:hover { color:var(--text-1);border-color:var(--border-h); }

.btn-icon { display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);cursor:pointer;transition:all .2s; }
.btn-icon:hover { color:var(--text-1);border-color:var(--border-h); }

.btn-danger-outline { padding:8px 18px;background:transparent;border:1px solid rgba(239,68,68,.3);border-radius:var(--r-full);color:var(--red);font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s; }
.btn-danger-outline:hover { background:var(--red-bg);border-color:var(--red); }

.btn-sm { padding:8px 16px;font-size:.82rem; }

.btn-back { display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);cursor:pointer;transition:all .2s; }
.btn-back:hover { color:var(--text-1);border-color:var(--border-h); }

/* ===== Form ===== */
.form-group { margin-bottom:16px; }
.form-label { display:block;font-size:.78rem;font-weight:600;color:var(--text-2);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase; }
.form-input { width:100%;padding:12px 16px;background:var(--bg-3);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--text-1);font-family:var(--font);font-size:.95rem;transition:all .2s;outline:none; }
.form-input:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow); }
.form-input::placeholder { color:var(--text-3); }

/* ===== LOGIN ===== */
#screen-login { align-items:center; justify-content:center; padding:24px; }
.login-card { position:relative;z-index:1;width:100%;max-width:400px;padding:40px 32px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg); }
.login-brand { display:flex;align-items:center;gap:10px;margin-bottom:28px; }
.brand-icon { width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:var(--r-md);color:#fff; }
.brand-text { font-size:1.2rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.login-title { font-size:1.8rem;font-weight:800;margin-bottom:4px; }
.login-sub { color:var(--text-2);font-size:.9rem;margin-bottom:28px; }
.login-hint { font-size:.82rem;min-height:20px;margin-bottom:12px;font-weight:500; }
.login-hint.error { color:var(--red); }
.login-hint.success { color:var(--green); }
.login-note { font-size:.78rem;color:var(--text-3);text-align:center;margin-top:16px; }

.pin-row { display:flex;gap:12px;justify-content:center; }
.pin-box { width:56px;height:60px;background:var(--bg-3);border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--text-1);font-family:var(--mono);font-size:1.5rem;font-weight:700;text-align:center;outline:none;transition:all .2s; }
.pin-box:focus { border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow); }

/* ===== DASHBOARD ===== */
.dash-header { display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--bg-1);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px); }
.dash-brand { display:flex;align-items:center;gap:8px;font-weight:800;font-size:1rem;color:var(--accent); }
.dash-user { display:flex;align-items:center;gap:10px; }
.user-avatar { width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:50%;font-size:.82rem;font-weight:700;color:#fff; }
.user-name { font-size:.9rem;font-weight:600;color:var(--text-2); }
.btn-logout { background:transparent;border:none; }

.dash-main { position:relative;z-index:1;max-width:700px;width:100%;margin:0 auto;padding:32px 20px 40px; }
.dash-welcome { margin-bottom:24px; }
.dash-title { font-size:clamp(1.4rem,4vw,1.8rem);font-weight:800;margin-bottom:2px; }
.dash-sub { color:var(--text-2);font-size:.95rem; }

.quick-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px; }
.qs-card { display:flex;flex-direction:column;align-items:center;padding:16px 8px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);transition:all .2s; }
.qs-num { font-size:1.4rem;font-weight:800;font-family:var(--mono);color:var(--accent);line-height:1; }
.qs-label { font-size:.7rem;font-weight:600;color:var(--text-3);margin-top:4px;text-transform:uppercase;letter-spacing:.04em; }

.menu-grid { display:flex;flex-direction:column;gap:10px; }
.menu-card { display:flex;align-items:center;gap:16px;width:100%;padding:18px 20px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);cursor:pointer;transition:all .3s var(--ease);text-align:left;font-family:var(--font); }
.menu-card:hover { background:var(--bg-3);border-color:var(--border-h);transform:translateX(4px); }
.mc-icon { width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);flex-shrink:0; }
.mc-exam .mc-icon { background:var(--accent-soft);color:var(--accent); }
.mc-wrong .mc-icon { background:var(--red-bg);color:var(--red); }
.mc-retry .mc-icon { background:var(--amber-bg);color:var(--amber); }
.mc-profile .mc-icon { background:var(--accent-soft-2);color:var(--accent-2); }
.mc-upload .mc-icon { background:var(--green-bg);color:var(--green); }
.mc-settings .mc-icon { background:rgba(100,116,139,.1);color:var(--text-2); }
.mc-text { flex:1;display:flex;flex-direction:column; }
.mc-title { font-size:.95rem;font-weight:700;color:var(--text-1); }
.mc-desc { font-size:.78rem;color:var(--text-3); }
.mc-arrow { color:var(--text-3);flex-shrink:0;transition:transform .2s; }
.menu-card:hover .mc-arrow { transform:translateX(3px);color:var(--accent); }

/* ===== EXAM ===== */
.exam-header { display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-1);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px); }
.eh-left { display:flex;align-items:center;gap:10px; }
.eh-logo { font-weight:900;font-size:1.05rem;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.eh-badge { padding:3px 10px;background:var(--accent-soft);border-radius:var(--r-full);font-size:.7rem;font-weight:600;color:var(--accent);max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.eh-center { position:absolute;left:50%;transform:translateX(-50%); }
.eh-right { display:flex;align-items:center;gap:8px; }

.timer { display:flex;align-items:center;gap:6px;padding:7px 16px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-full);font-family:var(--mono);font-size:.95rem;font-weight:600;transition:all .3s; }
.timer svg { color:var(--accent); }
.timer.warning { border-color:var(--amber);color:var(--amber);background:var(--amber-bg);animation:pulse 1s ease-in-out infinite; }
.timer.warning svg { color:var(--amber); }
.timer.danger { border-color:var(--red);color:var(--red);background:var(--red-bg);animation:pulse .5s ease-in-out infinite; }
.timer.danger svg { color:var(--red); }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }

.progress-track { height:3px;background:var(--bg-1);position:relative; }
.progress-fill { height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:0 2px 2px 0;width:0%;transition:width .5s var(--ease); }
.progress-fill::after { content:'';position:absolute;right:0;top:-3px;width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent-glow); }
.progress-label { position:absolute;right:20px;top:48px;font-size:.7rem;font-weight:600;color:var(--text-3);font-family:var(--mono);z-index:10; }

.exam-body { flex:1;display:flex;flex-direction:column;max-width:780px;width:100%;margin:0 auto;padding:32px 20px 20px; }

.q-container { flex:1;animation:slideRight .35s var(--ease); }
.q-container.anim-left { animation:slideLeft .35s var(--ease); }

.q-top-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.q-number { font-size:.78rem;font-weight:700;color:var(--accent);letter-spacing:.05em;text-transform:uppercase; }
.q-source-badge { padding:3px 10px;background:var(--amber-bg);border:1px solid rgba(245,158,11,.2);border-radius:var(--r-full);font-size:.68rem;font-weight:700;color:var(--amber);letter-spacing:.02em; }
.q-text { font-size:1.05rem;font-weight:500;line-height:1.75;margin-bottom:10px; }
.q-image { max-width:100%;max-height:280px;border-radius:var(--r-md);border:1px solid var(--border);margin-bottom:16px;object-fit:contain;background:var(--bg-2); }

.q-options { display:flex;flex-direction:column;gap:8px;margin-top:16px; }
.opt-btn { display:flex;align-items:flex-start;gap:12px;width:100%;padding:14px 18px;background:var(--bg-2);border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:all .2s;text-align:left;font-family:var(--font);font-size:.92rem;color:var(--text-1);line-height:1.55; }
.opt-btn:hover { background:var(--bg-3);border-color:rgba(59,130,246,.15);transform:translateX(3px); }
.opt-btn.selected { border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent),0 0 20px var(--accent-glow); }
.opt-btn.selected .opt-letter { background:var(--accent);color:#fff;border-color:var(--accent); }
.opt-letter { width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:2px solid var(--border);border-radius:7px;font-weight:700;font-size:.82rem;color:var(--text-3);flex-shrink:0;transition:all .2s; }
.opt-text { padding-top:3px; }

.exam-nav { display:flex;align-items:center;justify-content:space-between;padding-top:24px;margin-top:auto;border-top:1px solid var(--border);gap:12px; }
.btn-nav { display:inline-flex;align-items:center;gap:7px;padding:11px 22px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-full);color:var(--text-1);font-family:var(--font);font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s; }
.btn-nav:hover:not(:disabled) { background:var(--bg-3);border-color:var(--border-h); }
.btn-nav:disabled { opacity:.3;cursor:not-allowed; }
.btn-nav-primary { background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;box-shadow:0 2px 12px rgba(59,130,246,.2); }
.btn-nav-primary:hover:not(:disabled) { box-shadow:0 4px 18px rgba(59,130,246,.3);border-color:transparent; }

/* Question Map */
.map-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s; }
.map-overlay.active { opacity:1;pointer-events:auto; }
.map-panel { position:fixed;right:-340px;top:0;width:320px;height:100vh;background:var(--bg-1);border-left:1px solid var(--border);z-index:201;padding:20px;overflow-y:auto;transition:right .4s var(--ease); }
.map-panel.active { right:0; }
.map-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.map-head h3 { font-size:1rem;font-weight:700; }
.map-legend { display:flex;gap:14px;margin-bottom:16px;font-size:.72rem;color:var(--text-2); }
.map-legend span { display:flex;align-items:center;gap:5px; }
.ml-dot { width:9px;height:9px;border-radius:50%; }
.ml-active { background:var(--accent);box-shadow:0 0 6px var(--accent-glow); }
.ml-answered { background:var(--accent-2); }
.ml-empty { background:var(--surface);border:1.5px solid var(--text-3); }
.map-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:6px; }
.map-cell { aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--bg-3);border:1.5px solid var(--border);border-radius:var(--r-sm);font-size:.78rem;font-weight:600;color:var(--text-3);cursor:pointer;transition:all .2s; }
.map-cell:hover { border-color:var(--border-h);transform:scale(1.05); }
.map-cell.mc-current { border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:0 0 10px var(--accent-glow); }
.map-cell.mc-answered { background:var(--accent-soft-2);border-color:rgba(139,92,246,.3);color:var(--accent-2); }

/* ===== RESULT ===== */
#screen-result { align-items:center;padding:32px 20px 60px;overflow-y:auto; }
.result-wrap { position:relative;z-index:1;max-width:680px;width:100%;display:flex;flex-direction:column;align-items:center;gap:28px; }
.result-title { font-size:clamp(1.4rem,4vw,2rem);font-weight:800;text-align:center; }
.result-sub { color:var(--text-2);font-size:.95rem;text-align:center; }

.score-ring-wrap { position:relative;width:180px;height:180px; }
.score-ring { width:100%;height:100%;transform:rotate(-90deg); }
.sr-bg { fill:none;stroke:var(--surface);stroke-width:8; }
.sr-fill { fill:none;stroke:url(#scoreGrad);stroke-width:8;stroke-linecap:round;stroke-dasharray:553;stroke-dashoffset:553;transition:stroke-dashoffset 2s var(--ease); }
.score-center { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.score-val { font-size:2.8rem;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.score-lbl { font-size:.68rem;font-weight:700;color:var(--text-3);letter-spacing:.15em;margin-top:2px; }

.stat-row { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%; }
.stat-box { display:flex;flex-direction:column;align-items:center;padding:18px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg); }
.sb-num { font-size:1.6rem;font-weight:800;line-height:1;font-family:var(--mono); }
.sb-lbl { font-size:.72rem;font-weight:600;color:var(--text-3);margin-top:4px; }
.st-correct { border-bottom:3px solid var(--green); } .st-correct .sb-num { color:var(--green); }
.st-wrong { border-bottom:3px solid var(--red); } .st-wrong .sb-num { color:var(--red); }
.st-empty { border-bottom:3px solid var(--amber); } .st-empty .sb-num { color:var(--amber); }
.st-time { border-bottom:3px solid var(--accent); } .st-time .sb-num { color:var(--accent); }

.weak-section, .review-section { width:100%; }
.sec-title { display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:700;margin-bottom:12px; }
.sec-title svg { flex-shrink:0; }

.weak-card { display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);border-left:4px solid var(--red);margin-bottom:8px;animation:fadeUp .4s var(--ease) both; }
.wc-name { font-weight:600;font-size:.9rem; }
.wc-stat { font-size:.8rem;color:var(--red);font-weight:600;font-family:var(--mono); }

.rev-item { padding:18px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;animation:fadeUp .3s var(--ease) both; }
.rev-item.rv-correct { border-left:4px solid var(--green); }
.rev-item.rv-wrong { border-left:4px solid var(--red); }
.rev-item.rv-empty { border-left:4px solid var(--amber); }
.rv-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:10px; }
.rv-num { font-size:.75rem;font-weight:700;color:var(--accent); }
.rv-badge { padding:2px 8px;border-radius:var(--r-full);font-size:.68rem;font-weight:700; }
.rv-badge.b-correct { background:var(--green-bg);color:var(--green); }
.rv-badge.b-wrong { background:var(--red-bg);color:var(--red); }
.rv-badge.b-empty { background:var(--amber-bg);color:var(--amber); }
.rv-text { font-size:.88rem;line-height:1.6;margin-bottom:10px; }
.rv-opts { display:flex;flex-direction:column;gap:3px;font-size:.82rem;color:var(--text-2);margin-bottom:10px; }
.rv-opt { display:flex;gap:6px; }
.rv-opt.rv-user { color:var(--red);font-weight:600; }
.rv-opt.rv-ans { color:var(--green);font-weight:600; }
.rv-explain { padding:10px 14px;background:var(--accent-soft);border-radius:var(--r-sm);font-size:.82rem;line-height:1.6;color:var(--text-2);border-left:3px solid var(--accent); }
.rv-explain strong { color:var(--accent);font-weight:600; }

.result-actions { display:flex;gap:12px;flex-wrap:wrap;justify-content:center; }

/* ===== PROFILE ===== */
.sub-header { display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--bg-1);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50; }
.sub-title { font-size:1.1rem;font-weight:700; }

.profile-body, .upload-body, .settings-body { max-width:640px;width:100%;margin:0 auto;padding:24px 20px 40px; }

.profile-card { text-align:center;padding:32px 20px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-xl);margin-bottom:28px; }
.pc-avatar { width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:50%;font-size:1.4rem;font-weight:800;color:#fff;margin:0 auto 12px; }
.pc-name { font-size:1.3rem;font-weight:700;margin-bottom:20px; }
.pc-stats-row { display:flex;justify-content:center;gap:32px; }
.pc-stats-row > div { display:flex;flex-direction:column;align-items:center; }
.pcs-num { font-size:1.5rem;font-weight:800;font-family:var(--mono);color:var(--accent);line-height:1; }
.pcs-lbl { font-size:.7rem;font-weight:600;color:var(--text-3);margin-top:4px; }

.profile-section { margin-bottom:28px; }

.cat-bar-item { display:flex;align-items:center;gap:12px;margin-bottom:10px; }
.cb-name { width:160px;font-size:.82rem;font-weight:600;color:var(--text-2);text-align:right;flex-shrink:0; }
.cb-track { flex:1;height:8px;background:var(--bg-3);border-radius:4px;overflow:hidden; }
.cb-fill { height:100%;border-radius:4px;transition:width 1s var(--ease); }
.cb-fill.good { background:var(--green); }
.cb-fill.mid { background:var(--amber); }
.cb-fill.bad { background:var(--red); }
.cb-pct { width:40px;font-size:.78rem;font-weight:600;font-family:var(--mono);color:var(--text-2); }

.hist-item { display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:8px; }
.hi-left { display:flex;flex-direction:column; }
.hi-date { font-size:.78rem;color:var(--text-3);font-weight:500; }
.hi-score { font-size:1rem;font-weight:700; }
.hi-right { display:flex;gap:16px;font-size:.78rem;color:var(--text-2); }
.hi-stat { display:flex;flex-direction:column;align-items:center; }
.hi-stat span:first-child { font-weight:700;font-family:var(--mono); }

.empty-msg { font-size:.9rem;color:var(--text-3);text-align:center;padding:24px; }

/* ===== UPLOAD ===== */
.upload-zone { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;border:2px dashed var(--border);border-radius:var(--r-xl);cursor:pointer;transition:all .3s;background:var(--bg-2);margin-bottom:16px; }
.upload-zone:hover, .upload-zone.dragover { border-color:var(--accent);background:var(--accent-soft); }
.upload-zone svg { color:var(--text-3);margin-bottom:12px; }
.uz-title { font-size:1rem;font-weight:700;margin-bottom:4px; }
.uz-sub { font-size:.82rem;color:var(--text-3); }

.upload-info { padding:14px 18px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:16px; }
.upload-info p { font-size:.82rem;color:var(--text-2);margin-bottom:4px; }
.upload-info p:last-child { margin-bottom:0; }
.upload-info strong { color:var(--accent); }

.upload-progress { margin:16px 0; }
.up-bar { height:6px;background:var(--bg-3);border-radius:3px;overflow:hidden; }
.up-fill { height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:3px;width:0%;transition:width .3s; }
.up-msg { font-size:.82rem;color:var(--text-2);margin-top:8px;text-align:center; }

.upload-result { text-align:center;padding:20px;margin:16px 0; }
.ur-icon { font-size:2rem;margin-bottom:8px; }
.ur-msg { font-size:.92rem;font-weight:600; }

.generate-section { padding:20px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg); }
.gen-desc { font-size:.85rem;color:var(--text-2);margin-bottom:16px; }
.gen-status { display:flex;align-items:center;gap:10px;margin-top:16px;font-size:.85rem;color:var(--text-2); }

/* ===== SETTINGS ===== */
.settings-card { padding:24px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:16px; }
.settings-card h3 { font-size:1rem;font-weight:700;margin-bottom:4px; }
.sc-desc { font-size:.82rem;color:var(--text-2);margin-bottom:14px; }
.settings-actions { display:flex;gap:10px;flex-wrap:wrap; }
.api-status { font-size:.82rem;margin-top:10px;font-weight:500; }
.api-status.ok { color:var(--green); }
.api-status.err { color:var(--red); }

/* ===== MODAL ===== */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:500;opacity:0;pointer-events:none;transition:opacity .3s;padding:20px; }
.modal-overlay.active { opacity:1;pointer-events:auto; }
.modal-box { background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;max-width:400px;width:100%;text-align:center;transform:scale(.92);transition:transform .4s var(--ease-bounce); }
.modal-overlay.active .modal-box { transform:scale(1); }
.modal-icon { font-size:2rem;margin-bottom:16px; }
.modal-title { font-size:1.1rem;font-weight:700;margin-bottom:8px; }
.modal-desc { font-size:.88rem;color:var(--text-2);margin-bottom:24px;line-height:1.6; }
.modal-btns { display:flex;gap:10px; }
.modal-btns .btn-outline, .modal-btns .btn-primary { flex:1; justify-content:center; }

/* ===== TOAST ===== */
.toast-container { position:fixed;bottom:24px;right:24px;z-index:600;display:flex;flex-direction:column;gap:8px; }
.toast { padding:12px 20px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);font-size:.85rem;font-weight:500;box-shadow:var(--sh-md);animation:toastIn .4s var(--ease) both;max-width:340px; }
.toast.t-success { border-left:4px solid var(--green);color:var(--green); }
.toast.t-error { border-left:4px solid var(--red);color:var(--red); }
.toast.t-info { border-left:4px solid var(--accent);color:var(--accent); }
.toast.out { animation:toastOut .3s var(--ease) both; }
@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(40px)} }

/* ===== Responsive ===== */
@media(max-width:640px) {
    .quick-stats { grid-template-columns:repeat(2,1fr); }
    .stat-row { grid-template-columns:repeat(2,1fr); }
    .eh-badge { display:none; }
    .btn-nav span { display:none; }
    .btn-nav { padding:11px 14px; }
    .pin-box { width:48px;height:52px;font-size:1.3rem; }
    .cb-name { width:100px;font-size:.75rem; }
    .pc-stats-row { gap:20px; }
    .hi-right { gap:10px; }
    .result-actions { flex-direction:column;width:100%; }
    .result-actions button { width:100%;justify-content:center; }
}