*{box-sizing:border-box}
html,body{margin:0;background:#080c18;color:#eef2ff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
body{min-height:100vh}
.app-shell{max-width:1260px;margin:auto;padding:20px}

/* ── Topbar ── */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px}
.brand{font-size:24px;font-weight:800;letter-spacing:-.5px}
.brand span{font-weight:500;color:#9ca8c7}
.topbar-right{display:flex;align-items:center;gap:10px}
.version,.muted,.tiny{color:#8d98b4}
.version{font-size:12px;margin-top:4px}

/* ── Badges ── */
.status{padding:8px 12px;border-radius:999px;font-weight:800;font-size:11px;letter-spacing:1px}
.status.stopped{background:#251522;color:#ff9aa8}
.status.mining{background:#1c243c;color:#9fb7ff}
.conn-badge{padding:6px 10px;border-radius:999px;font-weight:800;font-size:10px;letter-spacing:1px;transition:all .3s}
.conn-badge.disconnected{background:#1a1f2e;color:#4d5a7a}
.conn-badge.connecting{background:#1f2617;color:#a8d870;animation:pulse 1.2s infinite}
.conn-badge.connected{background:#14251e;color:#73e0ae}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ── Layout ── */
.grid{display:grid;gap:14px}
.hero{grid-template-columns:2fr 1fr}
.stats{grid-template-columns:repeat(4,1fr);margin:14px 0}
.two{grid-template-columns:1.25fr 1fr;margin:14px 0}
.three{grid-template-columns:repeat(3,1fr);margin:14px 0}

/* ── Panels ── */
.panel{background:linear-gradient(145deg,#10172a,#0c1222);border:1px solid #1c2740;border-radius:18px;padding:18px;box-shadow:0 12px 40px #0005}
.panel-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.panel-title{font-weight:800;font-size:16px;margin-bottom:8px}

/* ── Hero ── */
.hero-main h1{font-size:clamp(26px,3.5vw,42px);line-height:1.05;margin:8px 0 12px;max-width:800px}
.eyebrow{font-size:11px;letter-spacing:2px;color:#8497c4;font-weight:800}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.notice{margin-top:15px;color:#a8b5d1;font-size:13px}

/* ── Stats ── */
.stat span{font-size:12px;color:#8d98b4}
.stat strong{display:block;font-size:25px;margin:7px 0}
.stat small{color:#77829c}

/* ── Wallet ── */
.wallet-state{font-weight:800;margin:20px 0}

/* ── Coin catalog ── */
.coin-list{display:grid;gap:9px;margin-top:14px}
.coin{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid #1b2740;border-radius:14px;background:#0b1120;cursor:pointer;transition:border-color .15s}
.coin:hover{border-color:#34456a}
.coin.selected{border-color:#6e83bd;background:#111b32}
.coin-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#18233b;font-weight:900;font-size:18px}
.coin-name{font-weight:800}
.coin-meta{font-size:11px;color:#8290ad;margin-top:3px}
.tag{font-size:10px;padding:5px 7px;border-radius:7px;background:#18233a;color:#aebbe0;white-space:nowrap}
.details{display:grid;gap:10px}
.small{font-size:11px;word-break:break-all}

/* ── Metrics ── */
.metric-row{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid #1b253b;font-size:13px}
.metric-row strong{text-align:right}

/* ── Pool quick-select ── */
.pool-quick{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.pool-btn{font-size:11px;padding:6px 12px;border-radius:8px;border:1px solid #2a3a58;background:#0c1527;color:#9db5e8;cursor:pointer;font-family:inherit;font-weight:700;transition:background .15s}
.pool-btn:hover{background:#162040}

/* ── Settings ── */
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.settings-grid label{display:grid;gap:6px;color:#aab5cd;font-size:12px;font-weight:700}
.settings-grid input,.settings-grid select,select{background:#090f1d;border:1px solid #27324b;color:#e8edff;border-radius:10px;padding:10px;outline:none;font:inherit}
.full-label{grid-column:1/-1}

/* ── Meter ── */
.meter{height:8px;background:#080d18;border-radius:10px;overflow:hidden;margin-top:15px}
.meter i{display:block;height:100%;width:0;background:#9fb7ff;transition:width .4s}

/* ── Log ── */
.log-panel{margin-top:14px}
.log-panel pre{height:180px;overflow:auto;margin:0;color:#93a4c9;font-size:11px;white-space:pre-wrap;line-height:1.5}

/* ── Buttons ── */
button,select,input{font:inherit}
button{border:0;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer;transition:opacity .15s}
button:disabled{opacity:.4;cursor:not-allowed}
.primary{background:#dce6ff;color:#09101e}
.danger{background:#4a1d2b;color:#ffb2bd}
.secondary{background:#1b2742;color:#c9d5f5}
.ghost{background:transparent;color:#9ca8c7;border:1px solid #26314c}
.full{width:100%;margin-top:8px}

/* ── Info box ── */
.info-box{background:#0d1525;border:1px solid #1e2e4a;border-radius:12px;padding:14px 16px;font-size:12px;color:#8fa3c9;margin-top:10px;line-height:1.6}
.info-box strong{color:#c9d9ff}

footer{text-align:center;color:#59657f;font-size:11px;padding:25px}

/* ── Responsive ── */
@media(max-width:850px){
  .hero,.two,.stats,.three{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  .app-shell{padding:12px}
  .topbar{align-items:flex-start}
  .hero-main h1{font-size:28px}
}