:root{
--bg:#050d18;--sidebar:#07111e;--surface:#0c1726;--card:#0e1a2a;
--text:#f7f9fc;--muted:#8795a8;--soft:#687689;--border:rgba(160,187,218,.11);
--blue:#4b82ff;--purple:#7858ff;--green:#1ed69a;--amber:#ffb329;
--shadow:0 18px 55px rgba(0,0,0,.26)
}
html[data-theme=light]{
--bg:#f6f8fc;--sidebar:#fff;--surface:#fff;--card:#fff;
--text:#101827;--muted:#7b8798;--soft:#9aa5b5;--border:rgba(15,23,42,.07);
--shadow:0 15px 45px rgba(15,23,42,.07)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
body{background:radial-gradient(circle at 50% -15%,rgba(55,115,255,.11),transparent 36rem),var(--bg)}
a,button{font:inherit;color:inherit}
a{text-decoration:none}button{border:0;cursor:pointer}
.shell{min-height:100vh}.sidebar{position:fixed;z-index:30;left:0;top:0;bottom:0;width:87px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center}
.brand-mark{width:38px;height:38px;margin-top:27px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#5c80ff,#365be8);box-shadow:0 8px 25px #3764ff45}
.sidebar-nav{width:100%;margin-top:94px;padding:0 9px;display:flex;flex-direction:column;gap:7px}
.sidebar-nav a{height:66px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:9px}
.sidebar-nav a.active{color:var(--blue);background:linear-gradient(145deg,#397cff18,#397cff04)}
.main{margin-left:87px;width:calc(100% - 87px);max-width:1060px;padding:0 24px 95px}
.header{height:78px;display:flex;align-items:center;gap:10px}
.spacer{flex:1}.header-btn{position:relative;width:42px;height:42px;border-radius:14px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center}
.header-btn i{position:absolute;right:-2px;top:-3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#466fff;color:#fff;font-size:8px;font-style:normal}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#f1b19c,#714b42);color:#fff;font-size:11px;font-weight:800}
.menu-btn,.mobile-brand{display:none}
.welcome{padding:18px 2px 23px}.kicker{font-size:9px;letter-spacing:.16em;font-weight:800;color:var(--soft);margin-bottom:8px}
.welcome h1{margin:0;font-size:25px;letter-spacing:-.045em}.welcome h1 span:last-child{font-size:19px}.welcome p{font-size:11px;color:var(--muted);margin:7px 0 0}
.access-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.access-card{min-height:108px;padding:16px;border-radius:20px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;gap:12px}
.access-icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center}.access-card:nth-child(1) .access-icon{color:var(--green);background:#1ed69a18}.access-card:nth-child(2) .access-icon{color:var(--purple);background:#7858ff18}.access-card:nth-child(3) .access-icon{color:var(--blue);background:#4b82ff18}.access-card:nth-child(4) .access-icon{color:var(--amber);background:#ffb32918}
.access-card b{font-size:11px}.access-card small{display:block;font-size:8px;color:var(--muted);margin-top:5px}.access-card small i,.panel-title p i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:4px;box-shadow:0 0 9px #1ed69a}
.weather{height:116px;margin-top:16px;padding:20px 22px;border-radius:22px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center}
.weather-left{display:flex;align-items:center;gap:16px;width:47%}.weather-symbol{font-size:48px;color:#8ca8d6;line-height:1}
.weather-left strong{display:block;font-size:28px;letter-spacing:-.05em}.weather-left b{display:block;font-size:11px;margin-top:3px}.weather-left small{display:block;font-size:9px;color:var(--muted);margin-top:4px}
.weather-divider{height:55px;width:1px;background:var(--border);margin-right:29px}.weather-info{display:flex;align-items:flex-start;gap:7px;width:25%;color:var(--muted)}.weather-info>span{font-size:17px}.weather-info small{display:block;font-size:8px}.weather-info b{display:block;color:var(--text);font-size:9px;margin-top:4px}
.block{margin-top:22px}.block-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.block-title h2,.panel-title h2{font-size:15px;margin:0;letter-spacing:-.02em}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.summary-card{height:95px;padding:12px;border-radius:13px;background:var(--surface);border:1px solid var(--border);text-align:center}.summary-icon{width:33px;height:33px;margin:0 auto 7px;border-radius:10px;display:grid;place-items:center}.summary-icon.blue{color:var(--blue);background:#4b82ff17}.summary-icon.purple{color:var(--purple);background:#7858ff17}.summary-icon.amber{color:var(--amber);background:#ffb32917}.summary-icon.green{color:var(--green);background:#1ed69a17}.summary-card strong{display:block;font-size:13px}.summary-card small{display:block;color:var(--muted);font-size:7px;margin-top:3px}
.panel{margin-top:16px;padding:14px 15px;border-radius:21px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}.panel-title{display:flex;justify-content:space-between;align-items:flex-start}.panel-title p{font-size:8px;color:var(--muted);margin:4px 0 0}
.ev-area{height:195px;position:relative;display:flex;align-items:center}.ev-data{width:49%;z-index:2;padding-left:4px}.ev-data>strong{display:block;font-size:29px;letter-spacing:-.05em}.ev-data>strong small{font-size:14px}.ev-data>span{font-size:8px;color:var(--muted)}.ev-data p{font-size:9px;font-weight:600;margin:17px 0 10px}.progress{height:7px;border-radius:99px;background:#ffffff10;overflow:hidden}.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#18cb8f,#3ce1ae)}
.ev-area>img{position:absolute;right:-6px;bottom:-5px;width:55%;height:205px;object-fit:contain;filter:drop-shadow(0 18px 15px #0005)}
.ev-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.ev-metrics div{height:51px;border-radius:10px;border:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;align-items:center}.ev-metrics strong{font-size:11px}.ev-metrics small{font-size:7px;color:var(--muted);margin-top:3px}
.charge-button{width:100%;height:43px;margin-top:10px;border-radius:9px;background:linear-gradient(135deg,#22d89a,#16bb80);color:#061710;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px}
.server-area{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:11px}.server-stats{display:flex;flex-direction:column;gap:5px}.server-stats>div{height:48px;border-radius:8px;background:#ffffff04;border:1px solid var(--border);padding:7px 9px;position:relative}.server-stats small{font-size:7px;color:var(--muted);display:block}.server-stats strong{font-size:11px;display:block;margin-top:3px}.spark{position:absolute;right:9px;bottom:8px;width:51px;height:18px;border-bottom:1.4px solid #8b67ff;border-radius:50%;transform:skewY(-7deg)}
.server-detail{border-left:1px solid var(--border);padding-left:14px;position:relative}.server-detail small{font-size:7px;color:var(--muted)}.server-detail>strong{display:block;font-size:13px;margin-top:4px}.server-detail p{font-size:8px;color:var(--muted);margin:5px 0}.server-detail img{width:100px;height:70px;object-fit:contain;display:block;margin:4px auto 0;opacity:.9}
.detail-button{width:100%;height:34px;border-radius:8px;margin-top:10px;font-size:9px;font-weight:800}.purple-button{background:linear-gradient(135deg,#7356f2,#5134cc);color:#fff}
.network-area{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:9px;margin-top:11px}.internet-card,.speed-card,.online-card{min-height:103px;padding:10px;border:1px solid var(--border);border-radius:9px}.internet-card svg{color:#20d99a}.internet-card small,.speed-card>small,.online-card>small{display:block;font-size:7px;color:var(--muted);margin-top:8px}.internet-card strong{font-size:8px}.speed-card>div{display:flex;gap:18px;margin-top:9px}.speed-card span{font-size:7px;color:var(--muted)}.speed-card span strong{display:block;font-size:10px;color:var(--text);margin-top:2px}.network-line{height:25px!important;margin-top:7px!important;display:block!important;border-bottom:1.5px solid #22cce4;border-radius:50%;transform:skewY(-5deg)}.online-card>strong{font-size:17px;display:block;margin-top:3px}.online-card p{font-size:7px;color:var(--muted);margin:5px 0}.blue-button{background:linear-gradient(135deg,#477ef2,#3269d9);color:#fff}
.theme-button{position:fixed;right:23px;bottom:22px;width:42px;height:42px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);z-index:40;display:grid;place-items:center}.dark-icon{display:none}html[data-theme=dark] .light-icon{display:none}html[data-theme=dark] .dark-icon{display:block}
.toast{position:fixed;top:15px;left:50%;z-index:100;transform:translate(-50%,-100px);background:var(--surface);border:1px solid var(--border);padding:10px 16px;border-radius:14px;box-shadow:var(--shadow);font-size:10px;transition:.3s}.toast.show{transform:translate(-50%,0)}
.mobile-nav{display:none}
@media(max-width:760px){
.sidebar{display:none}.main{margin-left:0;width:100%;padding:0 13px 82px}.header{height:65px}.mobile-brand{display:flex;align-items:center;gap:8px;margin-right:auto}.mobile-brand .brand-mark{width:34px;height:34px;margin:0}.mobile-brand b{font-size:12px}.mobile-brand small{display:block;color:var(--blue);font-size:8px;margin-top:3px}.menu-btn{display:grid;place-items:center;background:transparent}.access-grid{grid-template-columns:repeat(2,1fr)}.weather{height:auto;display:grid;grid-template-columns:1fr 1px 1fr;padding:16px}.weather-left{width:auto}.weather-divider{height:60px;margin:0}.weather-info{width:auto;padding-left:13px}.summary-grid{grid-template-columns:repeat(2,1fr)}.server-area{grid-template-columns:1fr}.server-detail{border-left:0;border-top:1px solid var(--border);padding:12px 0 0}.network-area{grid-template-columns:1fr}.ev-area{height:185px}.ev-area>img{height:190px}.mobile-nav{position:fixed;z-index:50;left:0;right:0;bottom:0;height:67px;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(8,18,31,.92);backdrop-filter:blur(25px);border-top:1px solid var(--border);padding:6px 8px max(6px,env(safe-area-inset-bottom))}.mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:7px}.mobile-nav a.active{color:var(--blue)}.theme-button{right:15px;bottom:79px}.network-line{display:block}.speed-card{min-height:95px}}
@media(min-width:761px){body{padding:0}.main{min-height:100vh}}

/* ==========================================================
   EV CHARGE CARD — MATCH REFERENCE
   Reference canvas: 593 x 506 px
   ========================================================== */

.ev-panel{
    position:relative;
    width:100%;
    max-width:593px;
    min-height:506px;
    margin-top:16px;
    padding:0;
    overflow:hidden;
    border-radius:21px;
    background:
        radial-gradient(ellipse 230px 180px at 76% 38%, rgba(35,71,105,.16), transparent 72%),
        linear-gradient(145deg,#0c1726 0%,#08111e 52%,#06101b 100%);
    border:1px solid rgba(135,168,201,.15);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 18px 45px rgba(0,0,0,.30);
}

html[data-theme="light"] .ev-panel{
    background:linear-gradient(145deg,#ffffff 0%,#f7faff 100%);
    border-color:rgba(20,50,90,.10);
    box-shadow:0 15px 40px rgba(15,23,42,.08);
}

/* Header: exactly follows x≈38 / y≈45 in reference */
.ev-panel .panel-title{
    position:absolute;
    z-index:5;
    left:25px;
    top:24px;
    right:25px;
    height:48px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.ev-panel .panel-title h2{
    margin:0;
    font-size:21px;
    line-height:1.1;
    font-weight:700;
    letter-spacing:-.035em;
}

.ev-panel .panel-title p{
    margin:10px 0 0;
    font-size:12px;
    line-height:1;
    color:#20d99a;
    font-weight:500;
}

.ev-panel .panel-title p i{
    width:7px;
    height:7px;
    margin-right:6px;
    vertical-align:middle;
}

.ev-panel .panel-title > svg{
    width:38px;
    height:38px;
    padding:10px;
    color:#72e3d0;
    background:rgba(31,61,83,.28);
    border:1px solid rgba(103,160,191,.11);
    border-radius:50%;
}

/* Main EV content */
.ev-panel .ev-area{
    position:absolute;
    left:25px;
    right:25px;
    top:45px;
    height:248px;
    display:block;
}

.ev-panel .ev-data{
    position:absolute;
    z-index:3;
    left:0;
    top:74px;
    width:285px;
    padding:0;
}

.ev-panel .ev-data > strong{
    display:block;
    margin:0;
    font-size:38px;
    line-height:1;
    font-weight:600;
    letter-spacing:-.055em;
}

.ev-panel .ev-data > strong small{
    font-size:20px;
    font-weight:500;
    margin-left:2px;
}

.ev-panel .ev-data > span{
    display:block;
    margin-top:9px;
    font-size:12px;
    line-height:1;
    color:#9aa7b8;
}

html[data-theme="light"] .ev-panel .ev-data > span{
    color:#7a8797;
}

.ev-panel .ev-data p{
    margin:27px 0 0;
    font-size:13px;
    line-height:1;
    font-weight:500;
    color:#f0f4fa;
}

html[data-theme="light"] .ev-panel .ev-data p{
    color:#172033;
}

/* Green progress exactly like reference */
.ev-panel .progress{
    width:285px;
    height:10px;
    margin-top:29px;
    border-radius:999px;
    overflow:hidden;
    background:linear-gradient(90deg,rgba(42,78,92,.45),rgba(25,44,58,.48));
    box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}

html[data-theme="light"] .ev-panel .progress{
    background:#e8edf2;
}

.ev-panel .progress i{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#20e29c 0%,#35e3a7 100%);
    box-shadow:0 0 12px rgba(32,226,156,.22);
}

/* Scooter position / scale */
.ev-panel .ev-area > img{
    position:absolute;
    z-index:2;
    right:-3px;
    top:-3px;
    width:270px;
    height:235px;
    object-fit:contain;
    filter:
        drop-shadow(0 15px 12px rgba(0,0,0,.30))
        drop-shadow(0 3px 4px rgba(0,0,0,.18));
}

/* Three metrics: reference x 26 / width ~166 / y 314 */
.ev-panel .ev-metrics{
    position:absolute;
    z-index:4;
    left:13px;
    right:13px;
    top:296px;
    height:78px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.ev-panel .ev-metrics div{
    height:78px;
    padding:0;
    border-radius:12px;
    background:rgba(6,18,31,.34);
    border:1px solid rgba(104,145,180,.13);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.018),
        0 4px 12px rgba(0,0,0,.10);
}

html[data-theme="light"] .ev-panel .ev-metrics div{
    background:#fbfcfe;
    border-color:rgba(20,50,90,.09);
    box-shadow:0 3px 12px rgba(15,23,42,.03);
}

.ev-panel .ev-metrics strong{
    font-size:20px;
    line-height:1;
    font-weight:600;
    letter-spacing:-.035em;
}

.ev-panel .ev-metrics small{
    margin-top:12px;
    font-size:12px;
    line-height:1;
    color:#a0acbc;
}

html[data-theme="light"] .ev-panel .ev-metrics small{
    color:#7d8999;
}

/* Button: x≈33 y≈408 width≈527 height≈64 */
.ev-panel .charge-button{
    position:absolute;
    z-index:5;
    left:20px;
    right:20px;
    bottom:21px;
    width:auto;
    height:64px;
    margin:0;
    border-radius:12px;
    background:linear-gradient(135deg,#1dca83 0%,#16bd7c 100%);
    color:#f7fffb;
    font-size:18px;
    line-height:1;
    font-weight:700;
    letter-spacing:.005em;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 22px rgba(15,192,124,.13);
}

.ev-panel .charge-button svg{
    width:18px;
    height:18px;
}

.ev-panel .charge-button:hover{
    filter:brightness(1.04);
}

.ev-panel .charge-button:active{
    transform:scale(.992);
}

/* Charging state */
.ev-panel .charge-button.charging{
    background:linear-gradient(135deg,#f1a13c,#e67e25);
}

/* ==========================================================
   MOBILE — preserve the same visual proportions
   ========================================================== */
@media(max-width:620px){
    .ev-panel{
        max-width:none;
        min-height:0;
        height:auto;
        aspect-ratio:593 / 506;
        border-radius:20px;
    }

    .ev-panel .panel-title{
        left:4.2%;
        right:4.2%;
        top:4.7%;
        height:10%;
    }

    .ev-panel .panel-title h2{
        font-size:clamp(15px,3.55vw,21px);
    }

    .ev-panel .panel-title p{
        margin-top:1.8vw;
        font-size:clamp(8px,2.02vw,12px);
    }

    .ev-panel .panel-title p i{
        width:6px;
        height:6px;
        margin-right:4px;
    }

    .ev-panel .panel-title > svg{
        width:7%;
        height:auto;
        aspect-ratio:1;
        padding:1.8%;
    }

    .ev-panel .ev-area{
        left:4.2%;
        right:4.2%;
        top:8.9%;
        height:49%;
    }

    .ev-panel .ev-data{
        top:30%;
        width:51%;
    }

    .ev-panel .ev-data > strong{
        font-size:clamp(27px,6.4vw,38px);
    }

    .ev-panel .ev-data > strong small{
        font-size:clamp(15px,3.4vw,20px);
    }

    .ev-panel .ev-data > span{
        margin-top:1.6vw;
        font-size:clamp(8px,2vw,12px);
    }

    .ev-panel .ev-data p{
        margin-top:4.8vw;
        font-size:clamp(9px,2.2vw,13px);
    }

    .ev-panel .progress{
        width:100%;
        height:1.7vw;
        min-height:6px;
        margin-top:5vw;
    }

    .ev-panel .ev-area > img {
        right: -1%;
        top: -18%;
        width: 53%;
        height: 51vw;
        max-height: 235px;
    }

    .ev-panel .ev-metrics{
        left:2.2%;
        right:2.2%;
        top:58.5%;
        height:15.4%;
        gap:1.7%;
    }

    .ev-panel .ev-metrics div{
        height:100%;
        border-radius:10px;
    }

    .ev-panel .ev-metrics strong{
        font-size:clamp(13px,3.4vw,20px);
    }

    .ev-panel .ev-metrics small{
        margin-top:2.1vw;
        font-size:clamp(7px,2vw,12px);
    }

    .ev-panel .charge-button{
        left:3.55%;
        right:3.55%;
        bottom:4.15%;
        height:12.65%;
        min-height:48px;
        border-radius:10px;
        font-size:clamp(12px,3.1vw,18px);
    }

    .ev-panel .charge-button svg{
        width:clamp(14px,3.3vw,18px);
        height:clamp(14px,3.3vw,18px);
    }
}