:root{--bg:#eef3f7;--panel:#fff;--text:#1f2d38;--muted:#6d7f8d;--line:#d7e1ea;--blue:#1769aa;--blue2:#0f4e82;--danger:#b3261e;--success:#147844;--shadow:0 18px 45px rgba(36,52,68,.13)}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:linear-gradient(180deg,#f7fbff,#e8f0f6)}.topbar{min-height:58px;display:flex;align-items:center;gap:18px;padding:0 18px;background:#152433;color:#fff;box-shadow:0 2px 14px rgba(0,0,0,.18);position:sticky;top:0;z-index:20}.app-title{display:flex;align-items:center;gap:10px;min-width:210px}.app-title span{display:block;color:#b8c8d6;font-size:12px;margin-top:2px}.brand-mark{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#1b7fcb,#78c6ff);color:#fff;font-weight:800;box-shadow:0 12px 24px rgba(23,105,170,.24)}.brand-mark.small{width:38px;height:38px;border-radius:12px;font-size:13px;box-shadow:none}.menu-bar{display:flex;align-items:center;gap:2px;flex:1}.menu-item{position:relative;font-size:13px;padding:10px 12px;border-radius:8px;cursor:default;color:#f3f7fb}.menu-item:hover{background:rgba(255,255,255,.1)}.dropdown{display:none;position:absolute;top:38px;left:0;min-width:210px;background:#fff;color:#1e2e3d;border:1px solid #d6e0e8;border-radius:10px;box-shadow:var(--shadow);overflow:hidden;padding:6px;z-index:100}.menu-item:hover .dropdown{display:block}.dropdown button,.dropdown a{display:block;width:100%;padding:9px 10px;color:#1e2e3d;background:transparent;border:0;text-align:left;text-decoration:none;border-radius:7px;font-size:13px}.dropdown button:hover,.dropdown a:hover{background:#edf5fb}.admin-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 10px;border-radius:999px;font-size:12px}.dashboard{padding:22px;max-width:1280px;margin:0 auto}.hero-panel{background:linear-gradient(135deg,#fff,#eff7fd);border:1px solid var(--line);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow)}.hero-panel h1{margin:0 0 6px;font-size:26px}.hero-panel p{margin:0;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:18px 0}.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:0 8px 22px rgba(36,52,68,.08)}.stat-card span{display:block;color:var(--muted);font-size:13px}.stat-card strong{display:block;font-size:28px;margin-top:8px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.panel-head h2{margin:0;font-size:18px}button{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700}button:hover{background:var(--blue2)}button:disabled{opacity:.55;cursor:not-allowed}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:11px 12px;border-bottom:1px solid #edf1f5;text-align:left;vertical-align:top}th{font-size:12px;color:#5f7180;text-transform:uppercase;letter-spacing:.04em;background:#f8fbfd}code{background:#eef5fb;border:1px solid #d6e6f3;border-radius:7px;padding:3px 6px;color:#0f4e82}code.block{display:block;padding:10px;margin:8px 0}.pill{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;background:#edf1f5}.pill.active{background:#e3f6ec;color:var(--success)}.pill.revoked,.pill.suspended{background:#fde9e7;color:var(--danger)}.muted{color:var(--muted)}.modal{position:fixed;inset:0;background:rgba(5,15,25,.48);display:flex;align-items:center;justify-content:center;padding:22px;z-index:200}.modal.hidden,.hidden{display:none!important}.modal-box{width:min(560px,96vw);max-height:90vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:20px;position:relative}.modal-box.wide{width:min(980px,96vw)}.modal-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;padding:0;background:#eef4f8;color:#213648}.modal h2{margin:0 0 14px}label{display:block;font-size:13px;font-weight:700;margin:12px 0}input,select,textarea{width:100%;margin-top:6px;border:1px solid #cfdbe4;border-radius:10px;padding:10px;font:inherit;background:#fff}textarea{min-height:86px;resize:vertical}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.notice{padding:11px 12px;border-radius:12px;background:#eef5fb;border:1px solid #c8deef;margin:12px 0}.notice.danger{background:#fdebea;border-color:#f1b8b3;color:#841d18}.notice.success{background:#e8f8ee;border-color:#b8e4c7;color:#145f35}.toast{position:fixed;right:22px;bottom:22px;padding:13px 16px;border-radius:12px;background:#172938;color:#fff;box-shadow:var(--shadow);z-index:300}.toast.success{background:#147844}.toast.error{background:#b3261e}.login-body,.install-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card,.install-card{width:min(520px,96vw);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:26px}.login-card .brand-mark{margin-bottom:12px}.form-grid hr{border:0;border-top:1px solid var(--line);width:100%;margin:14px 0}.diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.diag-grid div{border:1px solid var(--line);border-radius:12px;padding:10px;background:#f8fbfd}.diag-grid strong{display:block;font-size:12px;color:var(--muted)}.diag-grid span{display:block;margin-top:4px}@media(max-width:900px){.topbar{height:auto;align-items:flex-start;flex-wrap:wrap;padding:12px}.menu-bar{order:3;flex-wrap:wrap;width:100%}.stat-grid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}}


/* v0.2.0 interface preview */
body{
    background:
        radial-gradient(circle at top left, rgba(33,123,205,.12), transparent 28%),
        linear-gradient(180deg,#f8fbff,#edf4fa 42%,#eef5fa);
}

.topbar{
    height:76px;
    background:linear-gradient(135deg,#064ba3,#216eb8 58%,#287ec8);
    box-shadow:0 8px 28px rgba(20,73,130,.22);
}

.app-title{min-width:250px;}
.app-title strong{font-size:17px;}

.brand-mark.small{
    width:48px;
    height:48px;
    border-radius:13px;
    background:linear-gradient(135deg,#2ad0ff,#1c7bd1);
    font-size:15px;
}

.menu-bar{
    justify-content:center;
    background:rgba(236,246,255,.88);
    border:1px solid rgba(255,255,255,.56);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 10px 24px rgba(0,43,96,.13);
    padding:6px;
    border-radius:14px;
    max-width:980px;
    margin:0 auto;
    flex:1 1 auto;
}

.menu-item{
    display:flex;
    align-items:center;
    gap:7px;
    color:#0d3f77;
    font-weight:700;
    padding:10px 12px;
    border-radius:10px;
}

.menu-item:hover{background:rgba(34,113,187,.12);}
.menu-icon{font-size:16px;line-height:1;color:#0a63bd;}
.dropdown{top:46px;}

.admin-chip{
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.35);
    padding:10px 14px;
    font-weight:700;
}

.dashboard{max-width:1420px;padding-top:26px;}

.hero-panel-v2{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:38px 48px;
    min-height:170px;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(246,251,255,.94));
}

.hero-panel-v2 h1{
    font-size:34px;
    letter-spacing:-.03em;
}

.hero-panel-v2 p{font-size:17px;}

.server-status-card{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:260px;
    padding:18px 20px;
    border-radius:16px;
    background:linear-gradient(135deg,#eefbf8,#f6fbff);
    border:1px solid #cfe5e1;
}

.server-status-icon{font-size:34px;color:#0f9a8a;}

.server-status-card span{
    display:block;
    color:#415a72;
    font-size:14px;
    margin-bottom:7px;
}

.server-status-card strong{
    display:flex;
    align-items:center;
    gap:8px;
    color:#142b45;
    font-size:18px;
}

.server-status-card strong i{
    width:11px;
    height:11px;
    border-radius:50%;
    background:#0bb26b;
    display:inline-block;
    box-shadow:0 0 0 4px rgba(11,178,107,.13);
}

.server-status-card em{
    display:block;
    margin-top:8px;
    color:#60768b;
    font-style:normal;
    font-size:13px;
}

.stat-grid-v2{gap:22px;margin:28px 0;}

.stat-card-v2{
    display:flex;
    align-items:center;
    gap:18px;
    min-height:135px;
    padding:22px;
    border-radius:18px;
}

.stat-icon{
    width:62px;
    height:62px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    font-weight:800;
}

.stat-icon.blue{background:#e9f2ff;color:#1477dd}
.stat-icon.teal{background:#e7f7f4;color:#0c988c}
.stat-icon.green{background:#eaf8e7;color:#18a64f}
.stat-icon.orange{background:#fff1df;color:#ef7b11}
.stat-icon.purple{background:#f3eafd;color:#874ee6}

.stat-card-v2 span{color:#314a62;font-size:15px;}
.stat-card-v2 strong{font-size:31px;margin-top:6px;}
.stat-card-v2 em{
    display:block;
    color:#65798d;
    font-style:normal;
    font-size:13px;
    margin-top:6px;
}

.panel{border-radius:18px;}
.panel-head{padding:20px 24px;}

.panel-head h2{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:22px;
}

.section-icon{color:#0d71cf;font-size:24px;}

.panel-head button{
    font-size:14px;
    padding:12px 18px;
    background:linear-gradient(135deg,#1168c7,#084ea6);
}

.empty-state{
    height:150px;
    text-align:center;
    color:#65798d;
}

.empty-state div,
.empty-state strong,
.empty-state span{display:block;}

.empty-icon{
    font-size:40px;
    color:#8497aa;
    margin-bottom:10px;
}

.empty-state strong{
    color:#314a62;
    font-size:17px;
    margin-bottom:6px;
}

.app-footer{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    color:#617589;
    font-size:13px;
    padding:28px 12px 34px;
}

.app-footer i{
    width:1px;
    height:18px;
    background:#b8c7d4;
    display:block;
}

@media(max-width:1100px){
    .topbar{height:auto;}
    .menu-bar{order:3;width:100%;max-width:none;}
    .hero-panel-v2{flex-direction:column;align-items:flex-start;padding:28px;}
    .stat-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:700px){
    .stat-grid{grid-template-columns:1fr;}
    .server-status-card{width:100%;}
}


/* v0.2.1 interface refinements */
.topbar{
    background:linear-gradient(135deg,#1469ba,#2f8bd1 62%,#43a1df) !important;
}

.menu-bar{
    background:rgba(229,242,252,.92) !important;
    border-color:rgba(255,255,255,.68) !important;
}

.menu-item{
    user-select:none;
}

.menu-item.open,
.menu-item:hover{
    background:rgba(21,105,186,.14) !important;
}

.menu-item.open .dropdown{
    display:block !important;
}

.menu-item::after{
    content:'';
    width:0;
    height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:5px solid #0d4d88;
    margin-left:2px;
    opacity:.65;
}

.menu-item .dropdown{
    cursor:default;
}

.dropdown{
    top:48px !important;
    z-index:500 !important;
}

.dropdown button,
.dropdown a{
    cursor:pointer;
}

.stat-card-v2{
    box-shadow:0 12px 30px rgba(34,76,111,.10);
}

.stat-icon{
    flex:0 0 auto;
}

.hero-panel-v2{
    max-width:none;
}

.dashboard{
    max-width:1500px !important;
}

.server-status-card{
    box-shadow:0 10px 24px rgba(32,116,131,.08);
}

/* make the menu easier to see without being stark white */
.menu-bar{
    backdrop-filter:blur(8px);
}


/* v0.2.2 hover dropdown correction */
.menu-item{
    position:relative;
}

.menu-item.open .dropdown{
    display:none !important;
}

.menu-item:hover .dropdown,
.menu-item:focus-within .dropdown{
    display:block !important;
}

.menu-item:hover,
.menu-item:focus-within{
    background:rgba(21,105,186,.14) !important;
}

.dropdown{
    top:100% !important;
    margin-top:0 !important;
}

/* Tiny invisible bridge so the menu does not close while moving the mouse downward */
.dropdown::before{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:-8px;
    height:8px;
}

/* Keep dropdown option clicks usable */
.dropdown button,
.dropdown a{
    cursor:pointer;
}


/* v0.2.3 final interface polish */
.topbar{
    min-height:78px;
    height:78px;
    display:flex;
    align-items:center;
    padding:0 16px 0 12px;
}

.app-title{
    min-width:300px !important;
    display:grid !important;
    grid-template-columns:48px auto;
    grid-template-rows:auto auto;
    column-gap:11px;
    align-items:center;
}

.app-title .brand-mark{
    grid-row:1 / span 2;
    align-self:center;
}

.app-title strong{
    align-self:end;
    line-height:1.05;
    margin-top:1px;
}

.app-title span:not(.brand-mark){
    align-self:start;
    line-height:1.1;
    margin-top:2px;
    opacity:.92;
}

.brand-mark.small{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(0,65,132,.18);
}

.admin-chip{
    background:linear-gradient(135deg,rgba(18,87,157,.78),rgba(39,130,199,.72)) !important;
    border:1px solid rgba(255,255,255,.42) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 8px 20px rgba(0,54,114,.16);
    color:#fff !important;
    min-width:86px;
    justify-content:center;
}

.menu-bar{
    min-height:46px;
}

.menu-item{
    min-height:34px;
}

/* Card icons and finished dashboard tile layout */
.stat-grid.stat-grid-v2{
    grid-template-columns:repeat(5, minmax(0, 1fr));
}

.stat-card-v2{
    display:grid !important;
    grid-template-columns:62px auto;
    align-items:center;
}

.stat-card-v2 > div:last-child{
    min-width:0;
}

.stat-icon{
    width:58px !important;
    height:58px !important;
    font-size:28px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

.stat-card-v2 span{
    display:block;
    margin-bottom:4px;
}

.stat-card-v2 strong{
    line-height:1;
}

.stat-card-v2 em{
    white-space:nowrap;
}

/* Keep plain card fallback polished too */
.stat-card:not(.stat-card-v2){
    position:relative;
    padding-left:72px;
}

.stat-card:not(.stat-card-v2)::before{
    content:'⬡';
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border-radius:50%;
    background:#e9f2ff;
    color:#1477dd;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
    font-weight:800;
}

.stat-card:not(.stat-card-v2):nth-child(2)::before{content:'▤';background:#e7f7f4;color:#0c988c;}
.stat-card:not(.stat-card-v2):nth-child(3)::before{content:'✓';background:#eaf8e7;color:#18a64f;}
.stat-card:not(.stat-card-v2):nth-child(4)::before{content:'⊘';background:#fff1df;color:#ef7b11;}
.stat-card:not(.stat-card-v2):nth-child(5)::before{content:'▣';background:#f3eafd;color:#874ee6;}

/* Slightly cleaner content centering */
.dashboard{
    max-width:1520px !important;
}

.hero-panel,
.panel,
.stat-card{
    border-color:#d6e4ef;
}

@media(max-width:1200px){
    .stat-grid.stat-grid-v2{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:760px){
    .topbar{
        height:auto;
        min-height:0;
        align-items:flex-start;
        padding:10px;
    }

    .app-title{
        min-width:220px !important;
    }

    .stat-grid.stat-grid-v2{
        grid-template-columns:1fr;
    }
}