:root{
  --bg: #0F131C;
  --bg-2: #12172280;
  --surface: #1A2030;
  --surface-2: #222A3E;
  --border: #2C3549;
  --text: #E9EDF5;
  --muted: #8894AC;
  --muted-2: #5C6784;
  --accent: #9AA0A6;
  --accent-soft: #9AA0A633;
  --good: #4CAF50;
  --bad: #FF5C5C;
  --radius: 14px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, var(--bg-2), transparent),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:760px;margin:0 auto;padding:28px 20px 80px;}

header.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px;flex-wrap:wrap;}
.brand{display:flex;flex-direction:column;gap:2px;}
.brand .mark{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-0.02em;}
.brand .mark span{color:var(--accent);transition:color .4s ease;}
.brand .sub{font-size:13px;color:var(--muted);}
.handle-box{display:flex;gap:8px;align-items:center;}
.handle-box input{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:9px 12px;font-family:var(--font-mono);font-size:13px;
  width:150px;outline:none;
}
.handle-box input:focus{border-color:var(--accent);}
.btn{
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  border-radius:8px;padding:9px 14px;font-size:13px;font-weight:500;
  transition:border-color .2s ease, transform .1s ease;
}
.btn:hover{border-color:var(--accent);}
.btn:active{transform:scale(0.97);}
.btn.primary{background:var(--accent);color:#0F131C;border-color:var(--accent);font-weight:600;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.ghost{background:transparent;}
.btn:disabled{opacity:0.5;cursor:default;transform:none;}

.status-line{font-size:12px;color:var(--muted);margin:0 0 20px;font-family:var(--font-mono);display:flex;gap:14px;flex-wrap:wrap;}
.status-line .cloud-on{color:var(--good);}
.status-line .cloud-off{color:var(--muted-2);}

.fundamentals-banner{
  background:var(--surface-2);border:1px dashed var(--muted-2);border-radius:10px;
  padding:12px 16px;margin-bottom:20px;font-size:12.5px;color:var(--muted);
}
.fundamentals-banner b{color:var(--text);}

.ladder-block{margin-bottom:26px;}
.ladder-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-2);font-family:var(--font-mono);margin-bottom:6px;}
.ladder-track{position:relative;height:10px;border-radius:6px;overflow:visible;display:flex;background:var(--surface-2);}
.ladder-seg{height:100%;}
.ladder-seg:first-child{border-radius:6px 0 0 6px;}
.ladder-seg:last-child{border-radius:0 6px 6px 0;}
.ladder-marker{
  position:absolute;top:-7px;width:2px;height:24px;background:var(--text);
  transform:translateX(-1px);transition:left .5s ease;
}
.ladder-marker::after{
  content:attr(data-rating);position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:11px;background:var(--text);color:var(--bg);
  padding:2px 6px;border-radius:4px;white-space:nowrap;font-weight:600;
}
.tier-caption{font-size:12px;color:var(--muted);margin-top:14px;}
.tier-caption b{color:var(--accent);}

.hero{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;margin-bottom:22px;position:relative;overflow:hidden;
  transition:border-color .4s ease, box-shadow .4s ease;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 100% 0%, var(--accent-soft), transparent 60%);
  transition:background .4s ease;
}
.hero .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);font-family:var(--font-mono);margin-bottom:10px;}
.hero h2{font-family:var(--font-display);font-size:24px;line-height:1.3;margin:0 0 14px;font-weight:600;}
.hero h2 a{text-decoration:none;border-bottom:1px solid var(--muted-2);}
.hero h2 a:hover{border-color:var(--text);}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.badge{
  font-family:var(--font-mono);font-size:11.5px;padding:4px 10px;border-radius:20px;
  border:1px solid var(--border);color:var(--muted);background:var(--surface-2);
}
.badge.rating{color:var(--accent);border-color:var(--accent-soft);font-weight:600;}
.badge.weak{color:var(--bad);border-color:#FF5C5C55;}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hero-actions .btn{flex:1;min-width:120px;text-align:center;}
.btn.solved{background:var(--good);border-color:var(--good);color:#0F131C;font-weight:600;}
.btn.failed{background:transparent;border-color:var(--bad);color:var(--bad);}
.btn.skip{background:transparent;}
.empty-state, .loading-state, .error-state{padding:40px 10px;text-align:center;color:var(--muted);font-size:14px;}
.error-state{color:var(--bad);}
.spinner{
  width:22px;height:22px;border:2px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;margin:0 auto 14px;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.stats-row{display:flex;gap:12px;margin-bottom:22px;flex-wrap:wrap;}
.stat{
  flex:1;min-width:100px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;
}
.stat .num{font-family:var(--font-mono);font-size:22px;font-weight:600;}
.stat .lbl{font-size:11px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:0.04em;}

section.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:20px;}
section.panel h3{font-family:var(--font-display);font-size:15px;margin:0 0 4px;font-weight:600;}
section.panel .desc{font-size:12.5px;color:var(--muted);margin:0 0 16px;}
.tag-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px;}
.tag-row .tag-name{width:130px;flex-shrink:0;color:var(--text);font-family:var(--font-mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tag-bar-track{flex:1;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;}
.tag-bar-fill{height:100%;border-radius:4px;transition:width .6s ease;}
.tag-pct{width:38px;text-align:right;color:var(--muted);font-family:var(--font-mono);font-size:11.5px;}
.no-data{color:var(--muted-2);font-size:13px;font-style:italic;}

.history-item{
  display:flex;justify-content:space-between;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:13px;
}
.history-item:last-child{border-bottom:none;}
.history-item .h-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.history-item .h-result{font-family:var(--font-mono);font-size:11px;padding:2px 8px;border-radius:10px;flex-shrink:0;}
.h-result.solved{background:#4CAF5022;color:var(--good);}
.h-result.failed{background:#FF5C5C22;color:var(--bad);}
.h-result.skipped{background:var(--surface-2);color:var(--muted);}
details summary{cursor:pointer;font-size:13px;color:var(--muted);margin-bottom:10px;user-select:none;}
details summary:hover{color:var(--text);}

footer{text-align:center;font-size:11.5px;color:var(--muted-2);margin-top:30px;font-family:var(--font-mono);}
footer button{background:none;border:none;color:var(--muted-2);text-decoration:underline;font-size:11.5px;padding:0;}
footer button:hover{color:var(--bad);}

/* ---- auth screens ---- */
.wrap.narrow{max-width:380px;padding-top:14vh;}
.brand.center{text-align:center;align-items:center;margin-bottom:24px;}
.auth-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;text-align:center;
}
.auth-card h3{font-family:var(--font-display);font-size:18px;margin:0 0 6px;}
.auth-card .desc{font-size:13px;color:var(--muted);margin:0 0 16px;}
.auth-card input{
  width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:11px 14px;font-size:14px;outline:none;margin-bottom:12px;
}
.auth-card input:focus{border-color:var(--accent);}
.auth-card .btn{width:100%;}
.auth-msg{font-size:12.5px;color:var(--muted);margin-top:12px;}

/* ---- header v2 ---- */
.header-right{display:flex;align-items:center;gap:10px;}
.email-badge{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.btn.small{padding:6px 10px;font-size:12px;}

/* ---- status line ---- */
.status-line{
  font-size:12px;color:var(--muted);margin:0 0 18px;font-family:var(--font-mono);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.dot.ok{background:var(--good);}
.dot.error{background:var(--bad);}
.dot.working{background:#FF9C33;animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.cloud-off{color:var(--muted-2);}

/* ---- CF verification panel ---- */
.cf-panel h3{display:flex;align-items:center;gap:8px;}
.verified{color:var(--good);font-size:14px;}
.cf-input-row{display:flex;gap:8px;}
.cf-input-row input{
  flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:9px 12px;font-family:var(--font-mono);font-size:13px;outline:none;
}
.cf-input-row input:focus{border-color:var(--accent);}
.cf-actions{display:flex;gap:10px;align-items:center;margin-top:4px;}
.token-box{
  font-family:var(--font-mono);font-size:15px;font-weight:600;background:var(--surface-2);
  border:1px dashed var(--accent);border-radius:8px;padding:12px 16px;margin:10px 0;
  text-align:center;letter-spacing:0.02em;color:var(--accent);user-select:all;
}

/* ---- tabs ---- */
.tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.tab-btn{
  background:none;border:none;color:var(--muted);font-size:13.5px;font-weight:500;
  padding:10px 4px;margin-right:20px;border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--text);border-bottom-color:var(--accent);}
.tab-content{animation:fadein .25s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

/* ---- stats: chart + heatmap ---- */
.rating-chart{width:100%;height:120px;display:block;}
.heatmap{
  display:grid;grid-template-columns:repeat(12, 1fr);grid-auto-flow:column;
  grid-template-rows:repeat(7, 1fr);gap:3px;height:100px;
}
.heat-cell{border-radius:2px;background:var(--surface-2);}
.heat-cell.level-1{background:var(--accent);opacity:0.35;}
.heat-cell.level-2{background:var(--accent);opacity:0.65;}
.heat-cell.level-3{background:var(--accent);opacity:1;}

@media (max-width:480px){
  .brand .mark{font-size:22px;}
  .hero h2{font-size:20px;}
  .tag-row .tag-name{width:96px;}
  .cf-input-row{flex-direction:column;}
  .heatmap{grid-template-columns:repeat(12, 1fr);}
}