:root{
    --bg:#070A12;
    --panel:rgba(255,255,255,.06);
    --text:rgba(255,255,255,.88);
    --muted:rgba(255,255,255,.64);
    --faint:rgba(255,255,255,.40);
    --border:rgba(255,255,255,.10);
    --shadow:0 10px 35px rgba(0,0,0,.45);
    --glow:0 0 0 1px rgba(255,255,255,.10), 0 18px 60px rgba(0,0,0,.55);
    --a:#6EE7FF; --b:#9B8CFF; --c:#7CFFB2; --warn:#FFCF5A;
    --radius:18px; --radius-lg:26px; --max:1100px;
    --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

@media (prefers-color-scheme: light){
    :root{
        --bg:#f6f7fb;
        --panel:rgba(0,0,0,.04);
        --text:rgba(0,0,0,.86);
        --muted:rgba(0,0,0,.62);
        --faint:rgba(0,0,0,.42);
        --border:rgba(0,0,0,.10);
        --shadow:0 10px 35px rgba(0,0,0,.12);
        --glow:0 0 0 1px rgba(0,0,0,.08), 0 20px 60px rgba(0,0,0,.10);
    }
}

.ha-bg{
    min-height:100vh;
    color:var(--text);
    font-family:var(--sans);
    background:
            radial-gradient(1200px 700px at 10% 0%, rgba(110,231,255,.20), transparent 55%),
            radial-gradient(900px 550px at 90% 20%, rgba(155,140,255,.22), transparent 55%),
            radial-gradient(900px 550px at 50% 110%, rgba(124,255,178,.16), transparent 55%),
            linear-gradient(180deg, var(--bg), var(--bg));
}

.ha-header{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.06));
    border-bottom:1px solid var(--border);
}
@media (prefers-color-scheme: light){
    .ha-header{ background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.55)); }
}
.ha-bar{ max-width:var(--max); margin:0 auto; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ha-brand{ display:flex; align-items:center; gap:10px; min-width:210px; }
.ha-logo{
    width:34px; height:34px; border-radius:12px;
    background: radial-gradient(circle at 30% 20%, rgba(110,231,255,.9), rgba(155,140,255,.85) 55%, rgba(124,255,178,.75));
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    position:relative;
}
.ha-logo:after{ content:""; position:absolute; inset:8px; border-radius:10px; background: rgba(0,0,0,.22); }
.ha-brand-title{ font-size:14px; font-weight:800; line-height:1.2; }
.ha-brand-sub{ font-size:12px; color:var(--muted); margin-top:2px; }

.ha-nav{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.ha-chip{
    padding:8px 10px; border:1px solid var(--border);
    background: rgba(255,255,255,.05);
    border-radius:999px; font-size:12px; color:var(--muted);
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.ha-chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); color: var(--text); border-color: rgba(255,255,255,.18); }

.ha-wrap{ max-width:var(--max); margin:0 auto; padding:28px 18px 64px; }

.ha-card{
    background: linear-gradient(180deg, var(--panel), transparent 120%);
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow:hidden;
    position:relative;
}
.ha-card-inner{ padding:22px; }

.ha-hero{ padding:46px 0 22px; display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:stretch; }
@media (max-width: 900px){ .ha-hero{ grid-template-columns: 1fr; padding-top:26px; } }

.ha-hero-title{ margin:0 0 10px; font-size: clamp(28px, 3.6vw, 44px); letter-spacing:-0.02em; line-height:1.05; }
.ha-hero-text{ margin:0 0 16px; font-size:15px; color:var(--muted); line-height:1.6; max-width:64ch; }

.ha-cta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.ha-btn{
    border:1px solid var(--border);
    background: rgba(255,255,255,.06);
    color:var(--text);
    padding:10px 12px;
    border-radius:12px;
    font-weight:700;
    font-size:13px;
    display:inline-flex; align-items:center; gap:10px;
    cursor:pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.ha-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.ha-primary{ border-color: rgba(110,231,255,.35); background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(155,140,255,.16)); }

.ha-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.ha-pill{
    font-family: var(--mono);
    font-size:12px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.05);
    color: var(--muted);
}
.ha-pill b{ color:var(--text); }

.ha-hero-art{ min-height:260px; display:grid; place-items:center; }
.ha-orb{
    width:min(340px, 80%); aspect-ratio: 1/1; border-radius:999px;
    background:
            radial-gradient(circle at 20% 20%, rgba(110,231,255,.9), rgba(110,231,255,.1) 35%, transparent 62%),
            radial-gradient(circle at 70% 35%, rgba(155,140,255,.85), transparent 55%),
            radial-gradient(circle at 45% 80%, rgba(124,255,178,.70), transparent 55%),
            radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,.02) 55%, transparent 76%);
    filter: drop-shadow(0 26px 70px rgba(0,0,0,.45));
    border: 1px solid rgba(255,255,255,.10);
    position:relative; overflow:hidden;
}

.ha-section{ margin-top:18px; }
.ha-title{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ha-title h2{ margin:0; font-size:18px; letter-spacing:-0.01em; }
.ha-title small{ color:var(--faint); font-family: var(--mono); }

.ha-kpi{ display:flex; gap:10px; flex-wrap:wrap; }
.ha-metric{ flex: 1 1 170px; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(255,255,255,.05); padding:14px; box-shadow: var(--glow); }
.ha-label{ color:var(--muted); font-size:12px; }
.ha-value{ font-weight:900; font-size:20px; letter-spacing:-0.02em; margin-top:6px; }
.ha-note{ color:var(--faint); font-size:12px; margin-top:6px; line-height:1.4; }

.ha-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap:16px; }
.ha-col-7{ grid-column: span 7; } .ha-col-5{ grid-column: span 5; } .ha-col-6{ grid-column: span 6; }
@media (max-width: 900px){ .ha-col-7,.ha-col-5,.ha-col-6{ grid-column: span 12; } }

.ha-list{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.ha-item{
    border:1px solid var(--border);
    background: rgba(255,255,255,.05);
    border-radius: var(--radius);
    padding:14px;
}
.ha-item h3{ margin:0 0 6px; font-size:14px; }
.ha-item p{ margin:0; color:var(--muted); font-size:13px; line-height:1.55; }

.ha-badge{ display:inline-flex; align-items:center; gap:8px; font-family: var(--mono); font-size:11px; color:var(--muted); margin-top:10px; }
.ha-dot{ width:8px; height:8px; border-radius:99px; display:inline-block; background: var(--a); box-shadow: 0 0 0 3px rgba(110,231,255,.12); }
.ha-dot.ha-v{ background: var(--b); box-shadow: 0 0 0 3px rgba(155,140,255,.12); }
.ha-dot.ha-g{ background: var(--c); box-shadow: 0 0 0 3px rgba(124,255,178,.12); }
.ha-dot.ha-w{ background: var(--warn); box-shadow: 0 0 0 3px rgba(255,207,90,.14); }

.ha-diagram{
    padding:16px;
    border-radius: var(--radius-lg);
    border:1px solid var(--border);
    background: rgba(255,255,255,.05);
    box-shadow: var(--shadow);
    overflow:hidden;
}
.ha-diagram svg{ width:100%; height:auto; display:block; }
.ha-legend{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--muted); }
.ha-legend span{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.04); }

.ha-switches{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
@media (max-width: 560px){ .ha-switches{ grid-template-columns: 1fr; } }

.ha-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.05);
    border-radius: var(--radius);
    padding: 12px 12px 12px 14px;
}
.ha-info{ display:grid; gap:2px; }
.ha-info strong{ font-size:13px; }
.ha-info em{ font-style:normal; color:var(--muted); font-size:12px; }

/* Switch */
.ha-tbtn{
    width:52px; height:32px;
    border-radius:999px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.06);
    position:relative;
    cursor:pointer;
    transition: background .18s ease, border-color .18s ease;
    flex: 0 0 auto;
}
.ha-tbtn i{
    position:absolute; top:50%; left:5px;
    transform: translateY(-50%);
    width:22px; height:22px;
    border-radius:999px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 20px rgba(0,0,0,.25);
    transition: left .18s ease, background .18s ease;
}

/* aria-checked styling */
.ha-tbtn[aria-checked="true"]{
    background: linear-gradient(135deg, rgba(124,255,178,.25), rgba(110,231,255,.22));
    border-color: rgba(124,255,178,.35);
}
.ha-tbtn[aria-checked="true"] i{ left:24px; background: #fff; }

.ha-tank{
    margin-top:12px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.05);
    border-radius: var(--radius);
    padding:14px;
    display:grid;
    gap:10px;
}
.ha-tank-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.ha-tank-top span{ color:var(--muted); font-family: var(--mono); font-size:12px; }

.ha-barwrap{ border-radius:999px; background: rgba(255,255,255,.06); border:1px solid var(--border); overflow:hidden; height:14px; }
.ha-barfill{
    height:100%;
    background: linear-gradient(90deg, rgba(255,107,139,.75), rgba(255,207,90,.85), rgba(124,255,178,.85));
    transition: width .35s ease;
}

.ha-tank-meta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
.ha-tank-meta code{
    font-family: var(--mono);
    padding:2px 6px;
    border-radius:8px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.04);
    color: var(--text);
}

.ha-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.ha-log{
    margin-top:8px;
    white-space: pre-wrap;
    font-family: var(--mono);
    font-size:12px;
    color: var(--muted);
}

.ha-kbd{ font-family: var(--mono); border:1px solid var(--border); background: rgba(255,255,255,.04); padding:2px 6px; border-radius:8px; color: var(--text); }

.ha-footer{ margin-top:22px; padding-bottom: 20px; }
.ha-fine{ border:1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.04); padding:14px; color: var(--muted); }
.ha-fine b{ color: var(--text); }