/* ===== DARK THEME (default) ===== */
:root, [data-theme="dark"] {
  --bg:#0a0a0f;--surface:rgba(255,255,255,0.028);--surface-solid:#111116;--surface-2:rgba(255,255,255,0.045);
  --overlay:rgba(20,20,28,0.9);
  --border:rgba(255,255,255,0.065);--border-2:rgba(255,255,255,0.10);--border-3:rgba(255,255,255,0.15);
  --text:#f0f0f5;--text-mid:#8e8ea0;--text-dim:#5a5a6e;--text-muted:#35354a;
  --green:#34d399;--green-mid:#10b981;--green-dim:rgba(52,211,153,0.12);--green-glow:rgba(52,211,153,0.06);
  --cyan:#22d3ee;--cyan-dim:rgba(34,211,238,0.12);
  --yellow:#fbbf24;--yellow-dim:rgba(251,191,36,0.12);
  --orange:#fb923c;--orange-dim:rgba(251,146,60,0.12);
  --red:#f87171;--red-dim:rgba(248,113,113,0.12);
  --blue:#60a5fa;--blue-dim:rgba(96,165,250,0.12);
  --purple:#c084fc;--purple-dim:rgba(192,132,252,0.12);
  --code-color:var(--green);
  --scroll-thumb:rgba(255,255,255,0.08);
  --input-bg:var(--surface);
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:100px;
  --blur:blur(20px);
  --t-fast:0.15s ease;--t-normal:0.25s ease;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg:#FDF8F0;--surface:rgba(0,0,0,0.025);--surface-solid:#F5EFE6;--surface-2:rgba(0,0,0,0.04);
  --overlay:rgba(253,248,240,0.95);
  --border:rgba(0,0,0,0.08);--border-2:rgba(0,0,0,0.12);--border-3:rgba(0,0,0,0.18);
  --text:#1a1a1a;--text-mid:#555;--text-dim:#888;--text-muted:#bbb;
  --green:#059669;--green-mid:#047857;--green-dim:rgba(5,150,105,0.08);--green-glow:rgba(5,150,105,0.04);
  --cyan:#0891b2;--cyan-dim:rgba(8,145,178,0.08);
  --yellow:#d97706;--yellow-dim:rgba(217,119,6,0.08);
  --orange:#ea580c;--orange-dim:rgba(234,88,12,0.08);
  --red:#dc2626;--red-dim:rgba(220,38,38,0.08);
  --blue:#2563eb;--blue-dim:rgba(37,99,235,0.08);
  --purple:#9333ea;--purple-dim:rgba(147,51,234,0.08);
  --code-color:#059669;
  --scroll-thumb:rgba(0,0,0,0.12);
  --input-bg:rgba(255,255,255,0.6);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.5;
  min-height:100vh;-webkit-font-smoothing:antialiased;transition:background 0.4s ease,color 0.3s ease;
  display:flex;justify-content:center;align-items:flex-start;padding:var(--sp-6);
}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px;}

/* ===== LAYOUT ===== */
.app{
  width:100%;max-width:640px;margin:0 auto;padding-top:var(--sp-6);
}

/* ===== HEADER ===== */
.header{
  text-align:center;margin-bottom:var(--sp-8);
}
.header .eyebrow{
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--sp-3);font-weight:500;
}
.header h1{
  font-size:28px;font-weight:700;letter-spacing:-1px;line-height:1.2;margin-bottom:var(--sp-3);
}
.header h1 .acc{
  background:linear-gradient(135deg,var(--green),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.header .desc{
  font-size:14px;color:var(--text-dim);line-height:1.5;font-weight:300;
}

/* ===== USER BADGE ===== */
.user-badge{
  display:none;justify-content:center;margin-top:var(--sp-4);
}
.user-badge.visible{display:flex;}
.user-badge-pill{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:var(--r-pill);
  padding:4px 14px 4px 4px;transition:border-color var(--t-fast);
}
.user-badge-pill:hover{border-color:var(--border-2);}
.user-badge-avatar{
  width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--green-dim);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--green);font-family:var(--font-mono);
  position:relative;
}
.user-badge-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:relative;z-index:2;}
.user-badge-name{
  font-size:13px;font-weight:500;color:var(--text-mid);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:180px;
}
.user-badge-initials{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  position:absolute;top:0;left:0;z-index:1;
}
.user-badge-admin{
  font-size:11px;font-weight:500;color:var(--green);text-decoration:none;
  padding:2px 8px;border-radius:var(--r-pill);
  background:var(--green-dim);border:1px solid transparent;
  transition:border-color var(--t-fast),background var(--t-fast);
  white-space:nowrap;margin-left:2px;
}
.user-badge-admin:hover{border-color:var(--green);background:rgba(52,211,153,0.15);}
.user-badge-logout{
  background:none;border:none;cursor:pointer;color:var(--text-dim);
  font-size:16px;line-height:1;padding:2px 2px 2px 4px;margin-left:-2px;
  border-radius:50%;transition:color var(--t-fast),background var(--t-fast);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.user-badge-logout:hover{color:var(--text);background:var(--surface-2);}

/* ===== THEME TOGGLE ===== */
.theme-toggle-wrap{
  position:fixed;top:var(--sp-4);right:var(--sp-4);z-index:100;
}
.theme-toggle{
  display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 14px;
  transition:background 0.3s ease,border-color 0.3s ease;
}
.theme-switch{
  position:relative;width:36px;height:20px;background:var(--surface-2);
  border:1px solid var(--border-2);border-radius:10px;transition:all 0.3s ease;flex-shrink:0;
}
.theme-switch::after{
  content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:var(--text-dim);transition:all 0.3s ease;
}
[data-theme="light"] .theme-switch{background:var(--green-dim);border-color:var(--green);}
[data-theme="light"] .theme-switch::after{left:18px;background:var(--green);}
.theme-icons{display:flex;gap:3px;font-size:13px;}
.theme-icon{opacity:0.3;transition:opacity 0.3s ease;}
[data-theme="dark"] .theme-icon.moon{opacity:1;}
[data-theme="light"] .theme-icon.sun{opacity:1;}

/* ===== BREADCRUMBS ===== */
.breadcrumbs{
  margin-bottom:var(--sp-6);
}
.breadcrumbs-blocks{
  display:flex;gap:var(--sp-1);margin-bottom:var(--sp-3);
}
.bc-block{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;padding:var(--sp-2) var(--sp-1);border-radius:var(--r-sm);
  transition:all var(--t-fast);position:relative;
}
.bc-block:hover{background:var(--surface);}
.bc-block-label{
  font-size:10px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;
  color:var(--text-muted);transition:color 0.3s ease;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
}
.bc-block.active .bc-block-label{color:var(--green);}
.bc-block.done .bc-block-label{color:var(--text-dim);}
.bc-check{display:none;font-size:10px;color:var(--green);}
.bc-block.done .bc-check{display:inline;}

/* Mini dots inside each block */
.bc-dots{
  display:flex;gap:4px;align-items:center;
}
.bc-dot{
  width:6px;height:6px;border-radius:50%;background:var(--border-2);
  transition:all 0.3s ease;
}
.bc-dot.filled{background:var(--green);box-shadow:0 0 6px var(--green-glow);}
.bc-dot.current{background:var(--green);transform:scale(1.4);box-shadow:0 0 8px rgba(52,211,153,0.3);}

/* Block progress bar under breadcrumbs */
.bc-progress{
  background:var(--surface-2);border-radius:var(--r-pill);height:4px;overflow:hidden;
}
.bc-progress-fill{
  height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--green),var(--cyan));
  transition:width 0.5s cubic-bezier(0.4,0,0.2,1);width:0%;
}

/* ===== QUESTION SCREEN ===== */
.q-screen-wrap{
  position:relative;min-height:300px;
}
.q-screen{
  display:none;
  animation:qSlideIn 0.35s ease forwards;
}
.q-screen.active{display:block;}
.q-screen.slide-out{
  animation:qSlideOut 0.25s ease forwards;
}

@keyframes qSlideIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes qSlideOut{
  from{opacity:1;transform:translateY(0);}
  to{opacity:0;transform:translateY(-20px);}
}

/* ===== GLASS CARD ===== */
.glass-card{
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-6);margin-bottom:var(--sp-4);
  transition:background 0.3s ease,border-color 0.3s ease;
}
.glass-card:hover{border-color:var(--border-2);}

/* ===== BLOCK TITLE ===== */
.block-title{
  font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--green);margin-bottom:var(--sp-2);
}
.block-desc{
  font-size:13px;color:var(--text-dim);margin-bottom:var(--sp-6);font-weight:300;
}

/* ===== QUESTION ===== */
.question{margin-bottom:0;}
.q-label{
  font-size:16px;font-weight:500;margin-bottom:var(--sp-4);line-height:1.4;
}
.q-number{
  font-family:var(--font-mono);font-size:13px;color:var(--green);margin-right:8px;
}
.q-required{color:var(--red);margin-left:2px;font-size:12px;}
.validation-error{color:var(--red);font-size:13px;margin-top:var(--sp-2);display:none;font-weight:500;}
.question.invalid .c-input,.question.invalid .option-list,.situation-card.invalid .option-list{outline:2px solid var(--red);outline-offset:2px;border-radius:var(--r-md);}
.question.invalid .validation-error,.situation-card.invalid .validation-error{display:block;}
.q-hint{
  font-size:12px;color:var(--text-dim);font-style:italic;margin-bottom:var(--sp-3);font-weight:300;
}

/* ===== INPUT ===== */
.c-input{
  background:var(--input-bg);backdrop-filter:var(--blur);border:1px solid var(--border);
  color:var(--text);font-family:var(--font-body);font-size:14px;padding:12px 16px;
  outline:none;transition:border-color var(--t-fast),background 0.3s ease,box-shadow 0.2s ease;
  width:100%;border-radius:var(--r-sm);
}
.c-input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-dim);}
.c-input::placeholder{color:var(--text-muted);}
textarea.c-input{resize:vertical;min-height:80px;line-height:1.5;}

/* ===== RADIO / CHECKBOX ===== */
.option-list{display:flex;flex-direction:column;gap:var(--sp-2);}

.option-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:12px 16px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;transition:all var(--t-fast);user-select:none;
}
.option-item:hover{border-color:var(--border-2);background:var(--surface-2);}
.option-item.selected{border-color:var(--green);background:var(--green-dim);}

.option-item input[type="radio"],
.option-item input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:18px;height:18px;flex-shrink:0;
  border:2px solid var(--border-3);border-radius:50%;
  transition:all var(--t-fast);position:relative;background:transparent;cursor:pointer;
}
.option-item input[type="checkbox"]{border-radius:4px;}

.option-item input[type="radio"]:checked,
.option-item input[type="checkbox"]:checked{
  border-color:var(--green);background:var(--green);
}
.option-item input[type="radio"]:checked::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:6px;height:6px;border-radius:50%;background:#fff;
}
[data-theme="dark"] .option-item input[type="radio"]:checked::after{background:#000;}
.option-item input[type="checkbox"]:checked::after{
  content:'';position:absolute;top:1px;left:5px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
[data-theme="dark"] .option-item input[type="checkbox"]:checked::after{border-color:#000;}

.option-text{font-size:14px;color:var(--text-mid);flex:1;}
.option-item.selected .option-text{color:var(--text);}

/* Custom input inside option */
.option-custom{
  display:flex;align-items:center;gap:var(--sp-2);flex:1;
}
.option-custom-input{
  background:transparent;border:none;border-bottom:1px solid var(--border-2);
  color:var(--text);font-family:var(--font-body);font-size:13px;
  padding:2px 4px;outline:none;flex:1;transition:border-color var(--t-fast);
}
.option-custom-input:focus{border-color:var(--green);}
.option-custom-input::placeholder{color:var(--text-muted);}

/* ===== SITUATION CARD ===== */
.situation-card{
  margin-bottom:0;
}
.situation-scenario{
  font-size:15px;font-weight:500;margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--border);
  line-height:1.5;color:var(--text);
}
.situation-emoji{font-size:18px;margin-right:8px;}

/* ===== NAV BUTTONS ===== */
.nav-buttons{
  display:flex;gap:var(--sp-3);margin-top:var(--sp-6);justify-content:space-between;align-items:center;
}
.c-btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:12px 28px;font-family:var(--font-body);font-size:14px;font-weight:500;
  cursor:pointer;transition:all var(--t-fast);border:none;border-radius:var(--r-sm);
}
.btn-primary{background:var(--green);color:#fff;}
[data-theme="dark"] .btn-primary{color:#000;}
.btn-primary:hover{background:var(--green-mid);transform:translateY(-1px);}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none;}
.btn-ghost{background:var(--surface);color:var(--text-mid);border:1px solid var(--border);border-radius:var(--r-sm);}
.btn-ghost:hover{color:var(--text);background:var(--surface-2);border-color:var(--border-2);}
.btn-wide{flex:1;justify-content:center;}
.btn-sm{padding:8px 16px;font-size:13px;}

/* Text input next button */
.text-next-row{
  display:flex;gap:var(--sp-3);margin-top:var(--sp-3);justify-content:flex-end;
}

/* ===== AUTH SCREEN ===== */
.auth-screen{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);
  padding:var(--sp-8) var(--sp-6);
}
.auth-screen .auth-title{
  font-size:18px;font-weight:600;text-align:center;
}
.auth-screen .auth-desc{
  font-size:13px;color:var(--text-dim);text-align:center;max-width:400px;line-height:1.6;
}
.auth-buttons{
  display:flex;flex-direction:column;gap:var(--sp-3);width:100%;max-width:320px;
}
.auth-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  padding:14px 24px;border-radius:var(--r-sm);font-size:14px;font-weight:500;
  cursor:pointer;transition:all var(--t-fast);border:1px solid var(--border);
  text-decoration:none;color:var(--text);background:var(--surface);
}
.auth-btn:hover{background:var(--surface-2);border-color:var(--border-2);transform:translateY(-1px);}
.auth-btn svg{width:20px;height:20px;flex-shrink:0;}
.auth-btn.telegram{border-color:rgba(42,171,238,0.3);background:rgba(42,171,238,0.08);}
.auth-btn.telegram:hover{background:rgba(42,171,238,0.15);}
.auth-btn.google{border-color:rgba(255,255,255,0.1);}
.auth-skip{
  font-size:12px;color:var(--text-muted);cursor:pointer;text-align:center;margin-top:var(--sp-2);
  transition:color var(--t-fast);
}
.auth-skip:hover{color:var(--text-dim);}

/* ===== RESULT SCREEN ===== */
.result-screen{display:none;animation:qSlideIn 0.6s ease;}
.result-screen.active{display:block;}

.result-hero{
  text-align:center;margin-bottom:var(--sp-8);
}
.result-hero .level-number{
  font-size:72px;font-weight:700;font-family:var(--font-mono);
  background:linear-gradient(135deg,var(--green),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;
}
.result-hero .level-name{
  font-size:24px;font-weight:600;letter-spacing:-0.5px;margin-top:var(--sp-2);
}
.result-hero .level-desc{
  font-size:14px;color:var(--text-dim);margin-top:var(--sp-3);font-weight:300;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.6;
}

/* ===== LADDER ===== */
.ladder{
  display:flex;flex-direction:column;gap:0;margin-bottom:var(--sp-8);
}
.ladder-step{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:12px var(--sp-5);
  border-left:3px solid var(--border);
  transition:all 0.3s ease;position:relative;
}
.ladder-step.current{
  border-left-color:var(--green);background:var(--green-dim);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.ladder-step.below{border-left-color:var(--green);opacity:0.7;}
.ladder-step.above{opacity:0.4;}

.ladder-num{
  font-family:var(--font-mono);font-size:16px;font-weight:600;
  width:28px;text-align:center;flex-shrink:0;color:var(--text-dim);
}
.ladder-step.current .ladder-num{color:var(--green);}
.ladder-step.below .ladder-num{color:var(--green);opacity:0.6;}

.ladder-title{font-size:13px;font-weight:500;flex:1;}
.ladder-step.current .ladder-title{color:var(--green);font-weight:600;}

.ladder-arrow{
  font-size:11px;color:var(--green);font-weight:600;font-family:var(--font-mono);
  display:none;
}
.ladder-step.current .ladder-arrow{display:block;}

/* ===== SUBMIT STATUS ===== */
.submit-status{
  text-align:center;padding:var(--sp-3);font-size:13px;border-radius:var(--r-sm);
  margin-top:var(--sp-4);display:none;
}
.submit-status.success{display:block;color:var(--green);background:var(--green-dim);border:1px solid rgba(52,211,153,0.2);}
.submit-status.error{display:block;color:var(--red);background:var(--red-dim);border:1px solid rgba(248,113,113,0.2);}
.submit-status.loading{display:block;color:var(--text-mid);background:var(--surface-2);border:1px solid var(--border);}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  body{padding:var(--sp-3);}
  .app{padding-top:var(--sp-3);}
  .header h1{font-size:22px;}
  .glass-card{padding:var(--sp-4);}
  .c-btn{padding:14px 24px;justify-content:center;}
  .bc-block-label{font-size:8px;letter-spacing:0;}
  .bc-dot{width:5px;height:5px;}
  .result-hero .level-number{font-size:56px;}
  .result-hero .level-name{font-size:20px;}
  .theme-toggle-wrap{top:var(--sp-2);right:var(--sp-2);}
  .theme-toggle{padding:4px 10px;}
  .q-label{font-size:15px;}
  .user-badge-name{max-width:140px;font-size:12px;}
  .user-badge-avatar{width:24px;height:24px;font-size:10px;}
  .user-badge-pill{padding:3px 10px 3px 3px;gap:6px;}
}