@import url('https://cdn.jsdelivr.net/npm/@fontsource/cascadia-code@5.0.1/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cascadia-code@5.0.1/700.css');

:root {
    --bg:#07080c;
    --bg2:#0c0e14;
    --bg3:#10131a;
    --bg3h:#161a24;
    --bgi:#0a0c12;
    --border:#1e2a38;
    --bf:#0ad4e8;
    --t1:#b8ccd8;
    --t2:#708898;
    --tm:#4a5c6a;
    --accent:#0ad4e8;
    --ah:#08b0c2;
    --ag:rgba(10,212,232,.10);
    --ok:#10b981;
    --okbg:rgba(16,185,129,.07);
    --err:#e8364a;
    --errbg:rgba(232,54,74,.07);
    --warn:#e89030;
    --warnbg:rgba(232,144,48,.07);
    --info:#8b5cf6;
    --infobg:rgba(139,92,246,.07);
    --primary:#3b82f6;
    --primarybg:rgba(59,130,246,.07);
    --purple:#7048d4;
    --gs:#0ad4e8;
    --ge:#e8364a;
}
* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Cascadia Code','Cascadia Mono','SF Mono','Fira Code',Consolas,monospace;
    background:var(--bg);
    color:var(--t1);
    min-height:100vh;
    line-height:1.6;
    font-size:14px;
    -webkit-font-smoothing:antialiased;
}
html, input, button, select, textarea {
    font-family:'Cascadia Code','Cascadia Mono','SF Mono','Fira Code',Consolas,monospace;
}
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--ah); }

/* ─── Logo (1:1 with DDL-PANEL) ───────────────────────────────────────────── */
.logo {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}
.logo-icon {
    width:42px;
    height:42px;
    background:linear-gradient(135deg,var(--gs),var(--ge));
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:16px;
    color:#07080c;
    letter-spacing:-1px;
    box-shadow:0 0 18px rgba(10,212,232,.25),0 0 36px rgba(232,54,74,.12);
    border:1px solid rgba(10,212,232,.25);
}
.logo-text {
    font-size:20px;
    font-weight:700;
    color:var(--t1);
    letter-spacing:-.5px;
    font-family:'Cascadia Code','SF Mono','Fira Code','Consolas',monospace;
}
.logo-text > span:not(.logo-version) {
    color:var(--accent);
    text-shadow:0 0 10px rgba(10,212,232,.3);
}
.logo-text .logo-version {
    font-size:11px;
    color:var(--tm);
    font-weight:400;
    margin-left:4px;
    text-shadow:none;
}

/* ─── Status Dot (pulsing online indicator) ───────────────────────────────── */
.status-dot {
    font-size:12px;
    color:var(--ok);
    display:flex;
    align-items:center;
    gap:6px;
}
.status-dot::before {
    content:'';
    width:8px;
    height:8px;
    background:var(--ok);
    border-radius:50%;
    display:inline-block;
    animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes slideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ─── Modal ───────────────────────────────────────────────────────────────── */
.mo {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
    backdrop-filter:blur(4px);
}
.mo.on { display:flex; }
.md {
    background:var(--bg3);
    border:1px solid rgba(10,212,232,.18);
    border-radius:10px;
    width:90%;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.md-h {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    border-bottom:1px solid var(--border);
}
.md-t { font-size:16px; font-weight:600; }
.md-x {
    width:32px; height:32px;
    border-radius:8px;
    border:1px solid var(--border);
    background:0;
    color:var(--t2);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    transition:all .2s;
}
.md-x:hover { border-color:var(--err); color:var(--err); }
.md-b { padding:24px; }

input[type=checkbox] { accent-color:var(--accent); width:16px; height:16px; }