*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#0c0d12;--card:#131520;--card-b:#1e2030;
    --t1:#d4d4de;--t2:#7a7a90;--t3:#484860;
    --accent:#e0e0e8;--font:'Inter',system-ui,sans-serif;
    --green:#4AD68A;--cyan:#5CC8C8;--orange:#D4943E;--blood:#B84A5A;
    --track:#181a28;
}
html,body{width:100vw;height:56.25vw;overflow:hidden;background:var(--bg);color:var(--t1);font-family:var(--font)}

.dash{
    width:100%;height:100%;padding:0.74vw 1.04vw;
    display:grid;
    grid-template-rows:1.88vw 1fr auto;
    gap:0.52vw;
}

/* HEADER */
.hdr{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--card-b);padding-bottom:0.31vw}
.hdr-l{display:flex;align-items:center;gap:0.52vw}
.hdr-logo{width:1.67vw;height:1.67vw}
.hdr-name{font-size:0.94vw;font-weight:800;letter-spacing:0.13vw;color:var(--accent)}
.hdr-c{font-size:1.88vw;color:var(--t1);font-weight:700}
.hdr-r{font-size:0.63vw;color:var(--t3);display:flex;align-items:center;gap:0.31vw}
.dot{width:0.31vw;height:0.31vw;border-radius:50%;background:var(--green);animation:blink 2s infinite}

/* BLOCK 1 */
.block1{
    display:grid;
    grid-template-columns:10.42vw 1fr 1fr;
    grid-template-rows:auto 1fr;
    gap:0.52vw;
    min-height:0;
}

/* LEFT: LIQUID */
.hero{
    grid-row:1/3;
    background:var(--card);border:1px solid var(--card-b);border-radius:0.63vw;
    display:flex;flex-direction:column;align-items:center;
    padding:0.52vw;gap:0.21vw;overflow:hidden;
}
.hero-label{font-size:0.83vw;font-weight:800;text-transform:uppercase;letter-spacing:0.1vw;color:var(--accent)}
.hero-meta{font-size:0.52vw;color:var(--t3);text-align:center;line-height:1.3}
.liquid-box{
    flex:1;width:100%;
    border:0.1vw solid #252538;border-radius:0.73vw;
    position:relative;overflow:hidden;background:#0a0b14;
}
.target-line{position:absolute;left:0;right:0;z-index:5;border-top:0.1vw dashed rgba(255,255,255,0.3)}
.target-tag{position:absolute;right:0.21vw;transform:translateY(-100%);font-size:0.42vw;font-weight:800;color:rgba(255,255,255,0.45)}
.liquid{position:absolute;bottom:0;left:0;right:0;border-radius:0 0 0.63vw 0.63vw;transition:height 1.5s ease}
.liquid::before{content:'';position:absolute;top:-0.52vw;left:-10%;width:120%;height:1.04vw;background:inherit;border-radius:50%;opacity:0.6;animation:wave 3s ease-in-out infinite}
.liquid::after{content:'';position:absolute;top:-0.31vw;left:-5%;width:110%;height:0.73vw;background:inherit;border-radius:50%;opacity:0.35;animation:wave 2.5s ease-in-out infinite reverse}
.liq-green{background:linear-gradient(0deg,#38B070,var(--green))}
.liq-cyan{background:linear-gradient(0deg,#42A8A8,var(--cyan))}
.liq-orange{background:linear-gradient(0deg,#B07830,var(--orange))}
.liq-blood{background:linear-gradient(0deg,#8A2E3E,var(--blood))}
.liquid-info{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:4}
.liquid-val{font-size:2.08vw;font-weight:900;letter-spacing:-0.1vw;line-height:1;color:#fff;text-shadow:0 0.1vw 0.63vw rgba(0,0,0,0.7)}
.liquid-tgt{font-size:0.63vw;color:rgba(255,255,255,0.5);font-weight:500;margin-top:0.16vw;text-shadow:0 0.05vw 0.21vw rgba(0,0,0,0.6)}
.liquid-pct{font-size:1.04vw;font-weight:900;margin-top:0.16vw;text-shadow:0 0.1vw 0.42vw rgba(0,0,0,0.6)}

/* METRIC CARDS */
.metric{
    background:var(--card);border:1px solid var(--card-b);border-radius:0.52vw;
    padding:0.63vw 0.83vw;
    display:flex;flex-direction:column;gap:0.21vw;overflow:hidden;
}
.metric-top{display:flex;align-items:flex-start;gap:0.63vw}
.metric-info{flex-shrink:0}
.metric-name{font-size:0.94vw;font-weight:700;text-transform:uppercase;letter-spacing:0.08vw;color:var(--accent)}
.metric-row{display:flex;align-items:baseline;gap:0.42vw;margin-top:0.1vw}
.metric-val{font-size:2.29vw;font-weight:900;letter-spacing:-0.1vw;line-height:1}
.metric-ref{font-size:0.73vw;color:var(--t3);font-weight:500}
.metric-sub{font-size:0.63vw;color:var(--t2);margin-top:0.1vw}
.metric-chart{flex:1;min-width:0;height:100%}
.metric-chart svg{width:100%;height:100%;display:block}
.chart-legend{display:flex;gap:0.73vw;margin-top:auto;padding-top:0.21vw}
.legend-item{display:flex;align-items:center;gap:0.21vw;font-size:0.57vw;color:var(--t2)}
.legend-dot{width:0.42vw;height:0.42vw;border-radius:50%;flex-shrink:0}

/* BREAKDOWN CARDS */
.card{background:var(--card);border:1px solid var(--card-b);border-radius:0.52vw;padding:0.52vw 0.83vw;display:flex;flex-direction:column;gap:0;min-height:0}
.card-t{font-size:1.15vw;font-weight:800;text-transform:uppercase;letter-spacing:0.05vw;color:var(--accent)}

.bd{display:flex;flex-direction:column;gap:0.31vw;margin-top:auto}
.bd-r{display:flex;align-items:center;gap:0.42vw}
.bd-l{font-size:0.83vw;font-weight:700;color:var(--t1);min-width:3.65vw;flex-shrink:0}
.bd-track{flex:1;height:1.35vw;background:var(--track);border-radius:0.31vw;overflow:hidden}
.bd-fill{height:100%;border-radius:0.31vw;min-width:0.1vw}
.bd-v{font-size:0.73vw;font-weight:800;min-width:5.21vw;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-p{font-size:0.78vw;font-weight:800;min-width:2.29vw;text-align:right;flex-shrink:0}
.card-desc{display:grid;grid-template-columns:1fr 1fr;gap:0.05vw 0.73vw;padding-top:0.31vw;margin-top:auto;border-top:1px solid var(--card-b)}
.desc-item{font-size:0.52vw;font-style:italic;color:var(--t3);line-height:1.3}
.desc-item b{font-weight:600;font-style:normal;color:var(--t2)}

.bf-blood{background:linear-gradient(90deg,#8A2E3E,var(--blood))}
.bf-orange{background:linear-gradient(90deg,#B07830,var(--orange))}
.bf-green{background:linear-gradient(90deg,#38B070,var(--green))}
.bf-cyan{background:linear-gradient(90deg,#42A8A8,var(--cyan))}
.c-blood{color:var(--blood)}.c-orange{color:var(--orange)}.c-green{color:var(--green)}.c-cyan{color:var(--cyan)}

/* BLOCK 2 */
.block2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.52vw;
}
.hcard{
    background:var(--card);border:1px solid var(--card-b);border-radius:0.63vw;
    padding:0.73vw 1.04vw;
    display:flex;flex-direction:column;gap:0.42vw;
}
.hcard-top{display:flex;align-items:baseline;gap:0.63vw;flex-wrap:wrap}
.hcard-label{font-size:1.15vw;font-weight:800;text-transform:uppercase;letter-spacing:0.1vw;color:var(--accent)}
.hcard-val{font-size:2.19vw;font-weight:900;letter-spacing:-0.08vw;line-height:1}
.hcard-ref{font-size:0.83vw;font-weight:500;color:var(--t3)}
.hcard-pct{font-size:1.15vw;font-weight:900;margin-left:auto}
.hcard-sub{font-size:0.68vw;color:var(--t2)}

.hliq-box{
    flex:1;min-height:3.13vw;
    border:0.1vw solid #252538;border-radius:0.63vw;
    position:relative;overflow:hidden;background:#0a0b14;
}
.hliq-vline{position:absolute;top:0;bottom:0;z-index:5;border-left:0.1vw dashed rgba(255,255,255,0.25)}
.hliq-vtag{position:absolute;bottom:0.21vw;left:0.21vw;font-size:0.47vw;font-weight:800;color:rgba(255,255,255,0.4)}
.hliq-fill{
    position:absolute;left:0;top:0;bottom:0;
    border-radius:0.52vw;
    transition:width 1.5s ease;
}
.hliq-fill::before{
    content:'';position:absolute;
    top:-15%;right:-0.73vw;width:1.46vw;height:130%;
    background:inherit;border-radius:50%;opacity:0.65;
    animation:hwave 3s ease-in-out infinite;
}
.hliq-fill::after{
    content:'';position:absolute;
    top:-8%;right:-0.42vw;width:0.83vw;height:116%;
    background:inherit;border-radius:50%;opacity:0.35;
    animation:hwave 2.5s ease-in-out infinite reverse;
}

/* ===== LOGIN PAGE ===== */
.login-page{
    width:100vw;height:100vh;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg);
}
.login-card{
    background:var(--card);border:1px solid var(--card-b);border-radius:1vw;
    padding:3vw 4vw;text-align:center;width:25vw;
}
.login-logo{margin-bottom:1vw}
.login-title{font-size:1.5vw;font-weight:800;letter-spacing:0.2vw;color:var(--accent);margin-bottom:0.3vw}
.login-subtitle{font-size:0.8vw;color:var(--t3);margin-bottom:2vw}
.login-error{background:rgba(184,74,90,0.15);border:1px solid var(--blood);color:var(--blood);padding:0.5vw;border-radius:0.3vw;margin-bottom:1vw;font-size:0.7vw}
.login-input{
    display:block;width:100%;padding:0.6vw 0.8vw;margin-bottom:0.8vw;
    background:#0a0b14;border:1px solid var(--card-b);border-radius:0.4vw;
    color:var(--t1);font-family:var(--font);font-size:0.8vw;
    outline:none;transition:border-color 0.2s;
}
.login-input:focus{border-color:var(--cyan)}
.login-btn{
    width:100%;padding:0.7vw;
    background:linear-gradient(90deg,#42A8A8,var(--cyan));
    border:none;border-radius:0.4vw;
    color:#0c0d12;font-family:var(--font);font-size:0.85vw;font-weight:700;
    cursor:pointer;transition:opacity 0.2s;
}
.login-btn:hover{opacity:0.85}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes wave{0%,100%{transform:translateX(-5%) rotate(1deg)}50%{transform:translateX(5%) rotate(-1deg)}}
@keyframes hwave{0%,100%{transform:translateY(-10%) rotate(3deg)}50%{transform:translateY(10%) rotate(-3deg)}}