:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #f3f4f6);
  --surface: var(--tg-theme-secondary-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111827);
  --muted: var(--tg-theme-hint-color, #6b7280);
  --button: var(--tg-theme-button-color, #f97316);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --border: color-mix(in srgb, var(--text) 10%, transparent);
  --accent: #f97316;
  --accent-2: #fb923c;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{min-height:var(--tg-viewport-stable-height,100vh);padding:max(14px,env(safe-area-inset-top)) 14px max(24px,env(safe-area-inset-bottom))}
button{font:inherit}
.hidden{display:none!important}
.shell{width:min(100%,560px);margin:0 auto}
.state-card{min-height:70vh;display:grid;place-content:center;text-align:center;gap:10px;padding:28px}
.state-card h1{margin:8px 0 0;font-size:22px}
.state-card p{margin:0;color:var(--muted);line-height:1.5}
.state-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin:0 auto;background:color-mix(in srgb,#ef4444 14%,transparent);color:#ef4444;font-weight:800;font-size:24px}
.spinner{width:42px;height:42px;margin:0 auto;border:4px solid color-mix(in srgb,var(--accent) 20%,transparent);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dashboard{display:grid;gap:18px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:8px 2px 0}
.eyebrow,.card-label{margin:0;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.topbar h1{margin:4px 0 6px;font-size:clamp(26px,7vw,36px);line-height:1.05}
.muted{margin:0;color:var(--muted);font-size:14px}
.icon-button{width:44px;height:44px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);font-size:24px;cursor:pointer}
.icon-button:disabled{opacity:.55;cursor:wait}
.hero-card,.metric-card,.wide-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.hero-card{border-radius:24px;padding:20px;overflow:hidden;position:relative}
.hero-card::after{content:"";position:absolute;width:180px;height:180px;right:-90px;top:-100px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);pointer-events:none}
.hero-head,.usage-row,.usage-foot,.wide-row,.summary-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-head h2{margin:5px 0 0;font-size:20px}
.badge{max-width:52%;padding:8px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:12px;font-weight:800;text-align:right}
.usage-row{margin-top:28px}
.usage-value,.turnkey-value{margin:5px 0 0;font-size:34px;line-height:1;font-weight:800}
.usage-divider{color:var(--muted);font-weight:500}
.usage-percent{font-size:24px;font-weight:800;color:var(--accent)}
.progress-track{height:10px;margin-top:18px;border-radius:999px;background:color-mix(in srgb,var(--text) 9%,transparent);overflow:hidden}
.progress-bar{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s ease}
.usage-foot{margin-top:13px;color:var(--muted);font-size:12px}
.usage-foot strong{color:var(--text)}
#turnkey-block{margin-top:26px}
.section{display:grid;gap:10px}
.section-title h2{margin:0 2px;font-size:17px}
.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.metric-card{min-height:132px;border-radius:20px;padding:16px}
.metric-icon{font-size:20px}
.metric-value{margin:18px 0 4px;font-size:28px;line-height:1;font-weight:800}
.metric-label{margin:0;color:var(--muted);font-size:13px}
.wide-card{border-radius:22px;padding:18px}
.wide-value{margin:8px 0 0;font-size:38px;font-weight:800}
.ring{--percent:0;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--percent)*1%),color-mix(in srgb,var(--text) 9%,transparent) 0)}
.ring-center{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font-weight:900;color:var(--accent)}
.divider{height:1px;margin:16px 0 10px;background:var(--border)}
.summary-row{padding:8px 0;font-size:14px}
.summary-row span{color:var(--muted)}
.summary-row strong{font-size:17px}
.updated-at{margin:0;padding:4px 0 10px;text-align:center;color:var(--muted);font-size:12px}
.primary-button{border:0;border-radius:14px;padding:13px 18px;background:var(--button);color:var(--button-text);font-weight:800;cursor:pointer;margin-top:10px}
@media(min-width:520px){.metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric-card{min-height:140px}}