:root{
    --bg:#0f1117;
    --panel:#181c25;
    --panel2:#202633;
    --text:#e8eef7;
    --muted:#95a3b8;
    --border:#2d3443;
    --accent:#4ea1ff;

    --radius:16px;
    --transition:.18s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Inter,system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
}

/* ========================= */
/* Scrollbars                */
/* ========================= */

/* Slim, rounded and in the theme colours everywhere: pages, menus,
   tables, logs and dialogs. Chromium browsers (Chrome, Edge, Vivaldi,
   Brave) use these rules. */
::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner{
    background:transparent;
}

/* The transparent border keeps a gap around the thumb. */
::-webkit-scrollbar-thumb{
    background:var(--border);
    background-clip:padding-box;
    border:2px solid transparent;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#3f4859;
    background-clip:padding-box;
}

::-webkit-scrollbar-thumb:active{
    background:var(--accent);
    background-clip:padding-box;
}

::-webkit-scrollbar-button{
    display:none;
}

/* Firefox has no ::-webkit-scrollbar: the standard properties give it
   the same colours. Kept out of Chromium, which would otherwise ignore
   the rules above. */
@supports not selector(::-webkit-scrollbar){

    *{
        scrollbar-width:thin;
        scrollbar-color:var(--border) transparent;
    }

}

.app{
    display:flex;
    height:100vh;
}

/* ========================= */
/* Sidebar                   */
/* ========================= */

.sidebar{
    width:208px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    background:var(--panel);
    border-right:1px solid var(--border);
    padding:20px 16px;
}

/* Only very short windows need to scroll; keep it subtle. */
.sidebar::-webkit-scrollbar{
    width:6px;
}

/* Fits "Chaos Router OS" on one line; wraps instead of being cut off
   if a wider system font does not fit. */
.logo{
    font-size:18px;
    font-weight:700;
    line-height:1.3;
    text-align:center;
    margin:2px 0 18px;
}

.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.sidebar a{
    position:relative;
    color:var(--muted);
    text-decoration:none;
    padding:10px 16px;
    border-radius:10px;
    transition:var(--transition);
}

.sidebar a::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:3px;
    border-radius:999px;
    background:transparent;
    transition:var(--transition);
}

.sidebar a:hover{
    background:var(--panel2);
    color:white;
}

/* Each sidebar section has its own colour for the active marker. */
.sidebar a[data-group="overview"]{ --nav-color:#4ea1ff; }
.sidebar a[data-group="network"]{ --nav-color:#22d3ee; }
.sidebar a[data-group="security"]{ --nav-color:#f59e0b; }
.sidebar a[data-group="system"]{ --nav-color:#a78bfa; }
.sidebar a[data-group="apps"]{ --nav-color:#4ade80; }

.sidebar a.active{
    background:rgba(78,161,255,.18);
    background:color-mix(in srgb, var(--nav-color, var(--accent)) 18%, transparent);
    color:white;
}

.sidebar a.active::before{
    background:var(--nav-color, var(--accent));
}

.sidebar-divider{
    border:none;
    border-top:1px solid var(--border);
    margin:8px 0;
}

/* ========================= */
/* Main Layout               */
/* ========================= */

main{
    flex:1;
    padding:26px 36px;
    overflow:auto;
}

/* ========================= */
/* Chaos Header              */
/* ========================= */

.chaos-header{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px 22px;
    margin-bottom:22px;
}

.header-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}

.header-left,
.header-right{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
}

.header-item span{
    display:block;
    margin-bottom:2px;
    color:var(--muted);
    font-size:12px;
}

.header-item strong{
    font-size:15px;
    font-weight:600;
}

.status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(78,161,255,.12);
    color:#9fd0ff;
    font-size:14px;
}

.status::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
}

.status.online{
    background:rgba(34,197,94,.12);
    color:#8ce5aa;
}

.status.online::before{
    background:#22c55e;
}

.status.offline{
    background:rgba(239,68,68,.12);
    color:#ffb4b4;
}

.status.offline::before{
    background:#ef4444;
}

/* Modem page: no modem / not ready yet. */
.modem-notice{
    margin-bottom:18px;
    padding:14px 18px;
    background:var(--panel);
    border:1px solid var(--border);
    border-left:3px solid #f59e0b;
    border-radius:12px;
    color:var(--text);
}

.logout-btn{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
    padding:10px 14px;
    border-radius:10px;
    cursor:pointer;
    transition:var(--transition);
}

.logout-btn:hover{
    background:var(--panel2);
}

/* ========================= */
/* Workspace                 */
/* ========================= */

/* Pages use the full width of the window, like the header. */
.page{
    animation:fadeSlide .18s ease;
}

@keyframes fadeSlide{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.page-header{
    margin-bottom:32px;
}

.page-header h1{
    font-size:34px;
    margin-bottom:8px;
}

.page-header p{
    color:var(--muted);
}

/* ========================= */
/* Cards                     */
/* ========================= */

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
}

.card{
    min-width:0;
    min-height:140px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px;
    transition:var(--transition);
}

.card:hover{
    transform:translateY(-2px);
    border-color:#3f4b61;
}

.card span{
    display:block;
    margin-bottom:8px;
    color:var(--muted);
    font-size:14px;
}

.card h2{
    margin-top:12px;
    line-height:1.2;
}

.card-metric{
    font-size:clamp(24px,2vw,32px);
    font-weight:700;
    font-feature-settings:"tnum";
}

.card-value{
    font-size:24px;
    font-weight:600;
    line-height:1.3;
    overflow-wrap:anywhere;
    word-break:break-word;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-feature-settings:"tnum";
}

.card-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.card-link .card{
    height:100%;
}

/* ========================= */
/* Network Pulse             */
/* ========================= */

.network-pulse{
    margin-top:18px;
}

.pulse-track{
    height:8px;
    background:var(--panel2);
    border-radius:999px;
    overflow:hidden;
}

.pulse-fill{
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#3b82f6,#60a5fa);
    transition:width .35s ease;
}

.pulse-info{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
    font-size:13px;
    color:var(--muted);
}

/* ========================= */
/* Clients Table             */
/* ========================= */

.client-table{
    width:100%;
    border-collapse:collapse;
}

.client-table th{
    text-align:left;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    padding:16px;
    border-bottom:1px solid var(--border);
}

.client-table td{
    padding:16px;
    border-bottom:1px solid rgba(255,255,255,.04);
}

.client-table tr{
    transition:var(--transition);
    cursor:pointer;
}

.client-table tr:hover{
    background:rgba(255,255,255,.03);
}

.client-table small{
    color:var(--muted);
}

/* ========================= */
/* Clients Inspector         */
/* ========================= */

.clients-layout{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}

.client-table tr.selected{
    background:rgba(78,161,255,.12);
}

.client-inspector{
    position:fixed;
    top:0;
    right:-340px;
    width:min(320px,100vw);
    height:100vh;
    background:var(--panel);
    border-left:1px solid var(--border);
    padding:24px;
    transition:.25s ease;
    z-index:200;
    display:flex;
    flex-direction:column;
}

.client-inspector.open{
    right:0;
}

.inspector-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:24px;
}

.inspector-header h2{
    font-size:22px;
    margin-bottom:4px;
}

.inspector-header p{
    color:var(--muted);
}

.icon-btn{
    background:none;
    border:none;
    color:var(--text);
    font-size:28px;
    cursor:pointer;
}

.inspector-body{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* Label left, value right. Labels stay on one line; long values
   wrap onto a second line instead of pressing against the label. */
.info-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.info-row span{
    flex-shrink:0;
    color:var(--muted);
    font-size:14px;
    white-space:nowrap;
}

.info-row strong{
    min-width:0;
    text-align:right;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.inspector-actions{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.action-btn{
    width:100%;
    height:52px;
    background:var(--panel2);
    color:white;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:background .18s ease,
               border-color .18s ease,
               transform .12s ease;
}

.action-btn:hover:not(:disabled){
    background:#24324a;
    border-color:var(--accent);
}

.action-btn:active:not(:disabled){
    transform:scale(.98);
}

.action-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.action-btn.danger{
    border-color:#6b2a2a;
    color:#ffb4b4;
}

.action-btn.danger:hover:not(:disabled){
    background:#2a1b1b;
    border-color:#ef4444;
}


/* ========================= */
/* Modem Workspace           */
/* ========================= */

.signal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:16px;
    margin-top:18px;
}

.signal-box{
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:18px;
}

.signal-box label{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:8px;
}

.signal-box strong{
    font-size:26px;
}

.info-grid{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:18px;
}

.info-row label{
    color:var(--muted);
}

/* ========================= */
/* Settings                  */
/* ========================= */

.setting-row{
    display:flex;
    gap:14px;
    margin-top:18px;
    align-items:center;
}

.setting-input{
    width:100%;
    height:48px;
    background:var(--panel2);
    border:1px solid var(--border);
    color:var(--text);
    padding:0 16px;
    border-radius:12px;
    font-size:15px;
    font:inherit;
    line-height:1;
    transition:var(--transition);
    box-sizing:border-box;
}

.setting-input::placeholder{
    color:var(--muted);
}

.setting-input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(78,161,255,.12);
}

/* Inputs and selects stay completely still while editing. */
.setting-input:hover:not(:disabled){
    border-color:#3f4b61;
    transform:none;
}

.setting-input,
.setting-input:hover,
.setting-input:focus,
.setting-input:active{
    transform:none;
}

/* Make the Mode dropdown identical to text inputs */

select.setting-input{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    padding-right:42px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e8eef7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
}

.setting-input:disabled,
select.setting-input:disabled{
    opacity:.55;
    cursor:not-allowed;
    background:#1a1f29;
}

/* ========================= */
/* Network Configuration     */
/* ========================= */

.settings-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin-top:18px;
    align-items:start;
}

.setting-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

.setting-field label{
    color:var(--muted);
    font-size:13px;
    font-weight:500;
}

/* ========================= */
/* Pending Changes           */
/* ========================= */

.pending-bar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    padding:18px 22px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    animation:fadeSlide .18s ease;
}

.pending-bar.hidden{
    display:none;
}

.pending-left{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.pending-info{
    display:flex;
    align-items:center;
    gap:10px;
}

.pending-info strong{
    color:var(--accent);
    font-size:22px;
}

.pending-info span{
    color:var(--muted);
    font-weight:500;
}

.pending-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:20px;
}

.pending-change{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    font-size:14px;
}

.pending-change::before{
    content:"•";
    color:var(--accent);
    font-size:18px;
    line-height:1;
}

.pending-old{
    color:var(--muted);
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.pending-arrow{
    color:var(--muted);
}

.pending-new{
    color:#8ce5aa;
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-weight:600;
}

.pending-actions{
    display:flex;
    gap:12px;
}

.secondary-btn{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 22px;
    cursor:pointer;
    transition:var(--transition);
}

.secondary-btn:hover:not(:disabled){
    background:var(--panel2);
}

/* ========================= */
/* Save / Apply Buttons      */
/* ========================= */

.save-btn{
    min-width:120px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    background:var(--accent);
    color:#fff;
    border:1px solid transparent;
    border-radius:12px;
    font:inherit;
    font-size:15px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease,opacity .18s ease;
}

.save-btn:hover:not(:disabled){
    background:#60aaff;
    border-color:#70b3ff;
    box-shadow:0 5px 18px rgba(78,161,255,.20);
}

.save-btn:active:not(:disabled){
    transform:scale(.98);
}

.save-btn:disabled{
    background:var(--accent);
    opacity:.45;
    cursor:not-allowed;
    box-shadow:none;
}

.secondary-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/* ========================= */
/* Responsive                */
/* ========================= */

/* ========================= */
/* Mobile menu               */
/* ========================= */

.nav-toggle,
.nav-backdrop{
    display:none;
}

@media (max-width:900px){

    main{
        padding:20px;
    }

    .nav-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:40px;
        height:40px;
        padding:0;
        background:var(--panel2);
        color:var(--text);
        border:1px solid var(--border);
        border-radius:10px;
        cursor:pointer;
    }

    .nav-toggle:hover{
        border-color:#3f4859;
    }

    /* The sidebar slides in over the page. */
    .sidebar{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        z-index:900;
        width:min(260px,82vw);
        transform:translateX(-100%);
        transition:transform .22s ease;
        box-shadow:none;
    }

    body.nav-open .sidebar{
        transform:none;
        box-shadow:0 0 60px rgba(0,0,0,.5);
    }

    body.nav-open .nav-backdrop{
        display:block;
        position:fixed;
        inset:0;
        z-index:850;
        background:rgba(0,0,0,.5);
        backdrop-filter:blur(2px);
    }

    .header-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .header-right{
        width:100%;
        justify-content:space-between;
    }

}

@media (max-width:700px){

    .settings-grid{
        grid-template-columns:1fr;
    }

    .pending-bar{
        flex-direction:column;
        align-items:stretch;
    }

    .pending-actions{
        flex-direction:column;
    }

}

@media (max-width:640px){

    /* 16px side gutter on phones. */
    main{
        padding:16px;
    }

    .chaos-header{
        padding:14px 16px;
    }

    .header-left,
    .header-right{
        gap:14px;
    }

    .page-header h1{
        font-size:28px;
    }

    .setting-row{
        flex-direction:column;
        align-items:stretch;
    }

    .save-btn{
        width:100%;
    }

}

.setting-input.invalid{
    border-color:#ef4444;
    box-shadow:0 0 0 3px rgba(239,68,68,.12);
}

.field-error{
    color:#ffb4b4;
    font-size:12px;
    margin-top:6px;
}

/* ========================= */
/* Global Modal              */
/* ========================= */

.hidden{
    display:none !important;
}

.modal-overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px);
    z-index:1000;
    padding:24px;
}

.modal{
    width:min(560px,100%);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:20px;
    padding:24px;
    box-shadow:0 24px 80px rgba(0,0,0,.45);
    animation:modalIn .18s ease;
}

@keyframes modalIn{
    from{
        opacity:0;
        transform:translateY(12px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}

.modal-header h2{
    font-size:28px;
}

.modal-subtitle{
    color:var(--muted);
    margin-bottom:20px;
}

.modal-body{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:24px;
}

.modal-change{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:14px 16px;
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:12px;
}

.modal-change label{
    color:var(--muted);
}

.modal-change strong{
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
}

.modal-actions .save-btn,
.modal-actions .secondary-btn{
    min-width:96px;
    height:44px;
    padding:0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
    font:inherit;
    font-size:15px;
    font-weight:600;
    line-height:1;
}

.modal-actions .save-btn{
    background:var(--accent);
    color:#fff;
    border:1px solid transparent;
    border-radius:12px;
}

.modal-actions .save-btn:hover:not(:disabled){
    background:#60aaff;
    border-color:#70b3ff;
    box-shadow:0 5px 18px rgba(78,161,255,.20);
}

.modal-actions .save-btn:active:not(:disabled){
    transform:scale(.98);
}

.modal-actions .save-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

@media (max-width:700px){

    .modal{
        padding:20px;
    }

    .modal-actions{
        flex-direction:column-reverse;
    }

    .modal-actions button{
        width:100%;
    }

}

.interface-footer{
    margin-top:20px;
    display:flex;
    justify-content:flex-start;
}

.interface-save{
    width:120px;
    height:44px;
    flex:none;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:12px;
    font:inherit;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.interface-save:hover:not(:disabled){
    filter:brightness(1.08);
}

.interface-save:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/* ========================================================= */
/* Chaos Custom Select                                       */
/* ========================================================= */

.chaos-select{
    position:relative;
    width:100%;
}

/* Hidden native select.
   JS still uses it as the actual value. */

.chaos-select .interface-mode-select,
.chaos-select > select{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
}

/* Trigger */

.chaos-select-trigger{
    width:100%;
    height:48px;
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    line-height:1;

    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:12px;

    color:var(--text);

    padding:0 14px 0 16px;

    font:inherit;
    font-size:15px;
    line-height:1;

    cursor:pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.chaos-select-trigger:hover{
    background:#242b39;
    border-color:#3f4b61;
}

.chaos-select.open .chaos-select-trigger{
    border-color:var(--accent);

    box-shadow:
        0 0 0 3px rgba(78,161,255,.12);
}

.chaos-select-trigger:disabled,
.chaos-select-trigger:disabled:hover,
.chaos-select-trigger:disabled:focus,
.chaos-select-trigger:disabled:active{
    background:#151922;
    border-color:#252d3a;
    color:#626b7b;
    opacity:1;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}

.interface-card .chaos-select-trigger:disabled .chaos-select-value,
.system-sections .chaos-select-trigger:disabled .chaos-select-value,
.setup-card .chaos-select-trigger:disabled .chaos-select-value,
.settings-sections .chaos-select-trigger:disabled .chaos-select-value{
    color:#626b7b;
}

.interface-card .chaos-select-trigger:disabled .chaos-select-chevron,
.system-sections .chaos-select-trigger:disabled .chaos-select-chevron,
.setup-card .chaos-select-trigger:disabled .chaos-select-chevron,
.settings-sections .chaos-select-trigger:disabled .chaos-select-chevron{
    color:#4d5666;
}

/* Chevron */

.chaos-select-chevron{
    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--muted);

    transition:
        transform .18s ease,
        color .18s ease;
}

.chaos-select.open .chaos-select-chevron{
    transform:rotate(180deg);
    color:var(--text);
}

/* Menu */

.chaos-select-menu{
    position:absolute;

    left:0;
    right:0;
    top:calc(100% + 6px);

    padding:5px;

    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.38);

    /* Closed menus take no space: a hidden but laid-out menu (e.g. the
       59 channels of 6 GHz) would stretch the page and show a
       scrollbar. Long lists scroll inside the menu. */
    display:none;

    max-height:min(320px,50vh);
    overflow-y:auto;
    overscroll-behavior:contain;

    transform-origin:top;

    z-index:100;

}

@keyframes chaosSelectIn{
    from{
        opacity:0;
        transform:translateY(-5px) scale(.985);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.chaos-select.open .chaos-select-menu{

    display:block;

    animation:chaosSelectIn .14s ease;

}

/* Options */

.chaos-select-option{

    width:100%;

    min-height:42px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 12px;

    background:transparent;
    border:none;
    border-radius:8px;

    color:var(--text);

    font:inherit;
    font-size:14px;
    line-height:1;

    text-align:left;

    cursor:pointer;

    transition:
        background .14s ease,
        color .14s ease;

}

.chaos-select-option:hover{
    background:rgba(78,161,255,.12);
    color:white;
}

.chaos-select-option.selected{
    background:rgba(78,161,255,.16);
    color:#b9dcff;
}

.chaos-select-option.selected:hover{
    background:rgba(78,161,255,.22);
}

/* Checkmark */

.chaos-select-check{
    opacity:0;

    color:var(--accent);

    font-size:15px;
    font-weight:700;

    transition:opacity .14s ease;
}

.chaos-select-option.selected .chaos-select-check{
    opacity:1;
}

/* ========================================================= */
/* Network Interface Cards                                   */
/* ========================================================= */

/*
 * Don't make the entire card move when the user is
 * interacting with an input/select inside it.
 */

.interface-card:hover{
    transform:none;
}

/*
 * Keep the dropdown above neighboring interface cards.
 */

.interface-card{
    position:relative;
}

/*
 * Make the Apply button feel like the other Chaos buttons.
 */

.interface-save{
    width:120px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    background:var(--accent);
    color:#fff;

    border:1px solid transparent;
    border-radius:12px;

    font:inherit;
    font-size:15px;
    font-weight:600;
    line-height:1;

    cursor:pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .12s ease,
        opacity .18s ease;

}

.interface-save:hover:not(:disabled){

    background:#60aaff;

    border-color:#70b3ff;

    box-shadow:
        0 5px 18px rgba(78,161,255,.20);

}

.interface-save:active:not(:disabled){

    transform:scale(.98);

}

.interface-save:disabled{

    background:var(--accent);

    opacity:.45;

    cursor:not-allowed;

    box-shadow:none;

    transform:none;

}

/* ========================================================= */
/* Control alignment                                         */
/* ========================================================= */

/* Keep editable fields vertically centered without moving them on hover. */
.setting-input,
.setting-input[type="text"],
.setting-input[type="number"]{
    height:48px;
    min-height:48px;
    padding-top:0;
    padding-bottom:0;
    line-height:normal;
    vertical-align:middle;
}

/* Custom mode selector: center the label itself, not just the wrapper. */
.chaos-select-trigger{
    height:48px;
    min-height:48px;
    padding-top:0;
    padding-bottom:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    line-height:normal;
}

.chaos-select-trigger > span,
.chaos-select-trigger .chaos-select-label{
    display:flex;
    align-items:center;
    height:100%;
    line-height:normal;
}

.chaos-select-option{
    min-height:42px;
    height:42px;
    display:flex;
    align-items:center;
    line-height:normal;
    padding-top:0;
    padding-bottom:0;
}

/* Buttons use flex centering as well. */
.interface-save,
.save-btn,
.secondary-btn,
.modal-actions button{
    box-sizing:border-box;
    line-height:normal;
    vertical-align:middle;
}

.interface-save{
    height:44px;
    min-height:44px;
}

.modal-actions .save-btn,
.modal-actions .secondary-btn{
    height:44px;
    min-height:44px;
}


/* ========================================================= */
/* FINAL NETWORK DROPDOWN ALIGNMENT                          */
/* ========================================================= */

.interface-card .chaos-select,
.system-sections .chaos-select,
.setup-card .chaos-select,
.settings-sections .chaos-select{
    position:relative;
    width:100%;
    min-width:0;
}

.interface-card .chaos-select-trigger,
.system-sections .chaos-select-trigger,
.setup-card .chaos-select-trigger,
.settings-sections .chaos-select-trigger{
    width:100%;
    height:48px;
    min-height:48px;
    margin:0;
    padding:0 14px 0 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    box-sizing:border-box;
    line-height:normal;
}

.interface-card .chaos-select-value,
.system-sections .chaos-select-value,
.setup-card .chaos-select-value,
.settings-sections .chaos-select-value{
    display:flex;
    align-items:center;

    height:100%;
    min-height:0;
    margin:0;
    padding:0;

    line-height:1;
    white-space:nowrap;
    color:var(--text);
}

/* Override the generic .card span muted color for the mode value. */
.interface-card .chaos-select-trigger .chaos-select-value,
.system-sections .chaos-select-trigger .chaos-select-value,
.setup-card .chaos-select-trigger .chaos-select-value,
.settings-sections .chaos-select-trigger .chaos-select-value{
    color:var(--text);
}

/* Keep only disabled/read-only interface text muted. */
.interface-card .chaos-select-trigger:disabled .chaos-select-value,
.system-sections .chaos-select-trigger:disabled .chaos-select-value,
.setup-card .chaos-select-trigger:disabled .chaos-select-value,
.settings-sections .chaos-select-trigger:disabled .chaos-select-value{
    color:#626b7b;
}

.interface-card .chaos-select-chevron,
.system-sections .chaos-select-chevron,
.setup-card .chaos-select-chevron,
.settings-sections .chaos-select-chevron{
    width:16px;
    height:16px;
    min-width:16px;
    min-height:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:0;
    line-height:0;
}

.interface-card .chaos-select-chevron svg,
.system-sections .chaos-select-chevron svg,
.setup-card .chaos-select-chevron svg,
.settings-sections .chaos-select-chevron svg{
    display:block;
    width:16px;
    height:16px;
    margin:0;
}

.interface-card .chaos-select-menu,
.system-sections .chaos-select-menu,
.setup-card .chaos-select-menu,
.settings-sections .chaos-select-menu{
    box-sizing:border-box;
}

.interface-card .chaos-select-option,
.system-sections .chaos-select-option,
.setup-card .chaos-select-option,
.settings-sections .chaos-select-option{
    width:100%;
    height:42px;
    min-height:42px;
    margin:0;
    padding:0 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    box-sizing:border-box;
    line-height:normal;
}

.interface-card .chaos-select-option > span:first-child,
.system-sections .chaos-select-option > span:first-child,
.setup-card .chaos-select-option > span:first-child,
.settings-sections .chaos-select-option > span:first-child{
    display:flex;
    align-items:center;
    height:100%;
    margin:0;
    padding:0;
    line-height:1;
}

.interface-card .chaos-select-check,
.system-sections .chaos-select-check,
.setup-card .chaos-select-check,
.settings-sections .chaos-select-check{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    line-height:1;
}

/* Prevent the field/card from shifting while interacting with it. */
.interface-card .chaos-select-trigger:hover,
.system-sections .chaos-select-trigger:hover,
.setup-card .chaos-select-trigger:hover,
.settings-sections .chaos-select-trigger:hover,
.interface-card .chaos-select-trigger:focus,
.system-sections .chaos-select-trigger:focus,
.setup-card .chaos-select-trigger:focus,
.settings-sections .chaos-select-trigger:focus,
.interface-card .chaos-select-trigger:active,
.system-sections .chaos-select-trigger:active,
.setup-card .chaos-select-trigger:active,
.settings-sections .chaos-select-trigger:active{
    transform:none;
}

/* ========================================================= */
/* System Page                                                */
/* ========================================================= */

/* Keep System sections visually separated. */


/* Remove browser number-field spinner arrows. */

.setting-input[type="number"]{
    -moz-appearance:textfield;
    appearance:textfield;
}

.setting-input[type="number"]::-webkit-inner-spin-button,
.setting-input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}


/* System timeout placeholders. */

#idleTimeoutInput::placeholder{
    color:var(--muted);
}

#absoluteTimeoutInput::placeholder{
    color:var(--muted);
}

/* ========================================================= */
/* System Page                                               */
/* ========================================================= */

/* Masonry columns: cards stack under each other without row gaps,
   up to three columns side by side, one column on narrow screens. */
/* System page: three columns (device, account, maintenance), each a
   stack of cards. Narrower windows wrap to two, then one column. */
.system-columns{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
    align-items:start;
    gap:18px;
}

.system-column{
    display:flex;
    flex-direction:column;
    gap:18px;
    min-width:0;
}

.system-column-title{
    margin:0 2px -4px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.system-column .card{
    min-height:0;
}

.system-column .card > .setting-hint{
    margin:0 0 16px;
    line-height:1.5;
}

/* Two related fields side by side. */
.system-pair{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:16px;
}

.system-pair .setting-group + .setting-group{
    margin-top:0;
}

.system-column .card > .setting-group + .system-pair{
    margin-top:16px;
}

/* Number input with its unit inside the same row. */
.input-unit{
    display:flex;
    align-items:center;
    gap:10px;
}

.input-unit .setting-input{
    flex:1;
    min-width:0;
}

.input-unit span{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

/* Factory reset: destructive, set apart. */
.danger-card{
    border-color:rgba(239,68,68,.35);
}

.danger-card > span{
    color:#ffb4b4;
}

@media (max-width:640px){

    .system-pair{
        grid-template-columns:1fr;
    }

}

.setting-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.setting-group + .setting-group{
    margin-top:18px;
}

.setting-group .setting-row{
    margin-top:0;
}

.system-sections .card > .setting-row{
    margin-top:18px;
}

.system-sections .setting-status{
    margin-top:8px;
}


/* ========================================================= */
/* Settings Pages                                            */
/* ========================================================= */

.status-cards{
    margin-bottom:18px;
}

.settings-sections{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* Same as interface cards: stay still and keep open menus on top. */
.settings-sections .card{
    position:relative;
}

.settings-sections .card:hover{
    transform:none;
}

.settings-sections .card:has(.chaos-select.open){
    z-index:10;
}

.settings-sections .card > .setting-row{
    margin-top:18px;
}

.settings-sections .setting-status{
    margin-top:8px;
    color:var(--muted);
    font-size:14px;
}

.table-scroll{
    overflow-x:auto;
}

.data-table tr{
    cursor:default;
}

.data-table .empty-row td{
    color:var(--muted);
    text-align:center;
}

.data-table .table-action{
    text-align:right;
    white-space:nowrap;
}

.table-btn{
    background:var(--panel2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px 14px;
    font:inherit;
    font-size:13px;
    cursor:pointer;
    transition:var(--transition);
}

.table-btn:hover{
    border-color:var(--accent);
    background:#24324a;
}

.table-btn.danger{
    border-color:#6b2a2a;
    color:#ffb4b4;
}

.table-btn.danger:hover{
    background:#2a1b1b;
    border-color:#ef4444;
}

.config-preview{
    margin-top:18px;
    padding:16px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;
    line-height:1.6;
    overflow-x:auto;
    white-space:pre;
}

/* Badges inside table cards: undo the generic ".card span" label style. */
.card .data-table .status{
    display:inline-flex;
    margin:0;
    color:#9fd0ff;
    font-size:13px;
}

.card .data-table .status.online{
    color:#8ce5aa;
}

.status.blocked,
.card .data-table .status.blocked{
    background:rgba(239,68,68,.12);
    color:#ffb4b4;
}

.status.blocked::before{
    background:#ef4444;
}

/* ========================================================= */
/* Firewall Page                                             */
/* ========================================================= */

.save-btn.danger-btn{
    background:transparent;
    border-color:#6b2a2a;
    color:#ffb4b4;
}

.save-btn.danger-btn:hover:not(:disabled){
    background:#2a1b1b;
    border-color:#ef4444;
    box-shadow:none;
}

.modal-check{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-weight:500;
}

.modal-check input{
    width:16px;
    height:16px;
    accent-color:var(--accent);
}

.modal-note{
    margin:8px 0 14px;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}

.modal-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:260px;
    overflow-y:auto;
}

.modal-list li{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:10px 12px;
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:10px;
    font-size:13px;
}

.modal-list code,
.modal-code{
    color:var(--muted);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;
    word-break:break-all;
}

.modal-code{
    display:block;
    padding:12px;
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:10px;
}

/* ========================================================= */
/* WiFi Page                                                 */
/* ========================================================= */

.password-field{
    position:relative;
}

.password-field .setting-input{
    padding-right:72px;
}

.password-toggle{
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    height:32px;
    padding:0 12px;
    background:transparent;
    border:1px solid var(--border);
    border-radius:8px;
    color:var(--muted);
    font:inherit;
    font-size:13px;
    cursor:pointer;
    transition:var(--transition);
}

.password-toggle:hover:not(:disabled){
    color:var(--text);
    border-color:#3f4b61;
}

.password-toggle:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/* Unavailable dropdown options, e.g. a band the radio lacks. */
.chaos-select-option:disabled,
.chaos-select-option:disabled:hover{
    background:transparent;
    color:#626b7b;
    cursor:not-allowed;
}

/* ========================================================= */
/* VPN Page                                                  */
/* ========================================================= */

.tab-bar{
    display:flex;
    gap:6px;
    margin-bottom:18px;
    padding:5px;
    width:max-content;
    max-width:100%;
    overflow-x:auto;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
}

.tab-btn{
    padding:10px 16px;
    background:transparent;
    border:none;
    border-radius:10px;
    color:var(--muted);
    font:inherit;
    font-size:14px;
    font-weight:500;
    white-space:nowrap;
    cursor:pointer;
    transition:var(--transition);
}

.tab-btn:hover{
    color:var(--text);
    background:var(--panel2);
}

.tab-btn.active{
    color:#b9dcff;
    background:rgba(78,161,255,.16);
}

.setting-hint{
    margin-top:14px;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}

.key-row{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:14px;
}

.key-row label{
    color:var(--muted);
    font-size:13px;
    font-weight:500;
}

.key-row code{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;
    word-break:break-all;
}

.config-field{
    margin-top:18px;
}

.setting-textarea{
    width:100%;
    min-height:160px;
    padding:14px 16px;
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;
    line-height:1.5;
    resize:vertical;
    transition:var(--transition);
}

.setting-textarea:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(78,161,255,.12);
}

.data-table .table-action .table-btn + .table-btn{
    margin-left:6px;
}

/* ========================================================= */
/* Safe Apply Banner                                         */
/* ========================================================= */

.apply-banner{
    position:sticky;
    top:0;
    z-index:500;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:24px;
    padding:16px 20px;
    background:#2a2414;
    border:1px solid #8a6d1f;
    border-radius:var(--radius);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.apply-text{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.apply-text strong{
    color:#ffe2a3;
}

.apply-text span{
    color:#e8d6ad;
    font-size:14px;
}

.apply-text .apply-hint{
    color:#ffcf6b;
}

.apply-actions{
    display:flex;
    gap:10px;
    flex-shrink:0;
}

.apply-notice{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:24px;
    padding:12px 16px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--muted);
    font-size:14px;
}

@media (max-width:700px){

    .apply-banner{
        flex-direction:column;
        align-items:stretch;
    }

    .apply-actions{
        flex-direction:column-reverse;
    }

}

/* ========================================================= */
/* Clients Inspector Tools                                   */
/* ========================================================= */

/* More actions than fit: let the panel scroll. */
.client-inspector{
    overflow-y:auto;
}

.inspector-tools{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.action-btn.compact{
    height:40px;
    padding:8px;
    font-size:13px;
}

.inspector-result{
    padding:10px 12px;
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
}

.inspector-result.error{
    border-color:#6b2a2a;
    color:#ffb4b4;
}

.inspector-warning,
.modal-warning{
    padding:10px 12px;
    margin-bottom:12px;
    background:#2a2414;
    border:1px solid #8a6d1f;
    border-radius:10px;
    color:#ffe2a3;
    font-size:13px;
    line-height:1.5;
}

.secondary-btn.danger-text{
    color:#ffb4b4;
    margin-right:auto;
}

#reserveModal .modal-body{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* ========================================================= */
/* Logs Page                                                 */
/* ========================================================= */

.status.warning,
.card .data-table .status.warning{
    background:rgba(234,179,8,.12);
    color:#fde68a;
}

.status.warning::before{
    background:#eab308;
}

.status.muted,
.card .data-table .status.muted{
    background:rgba(149,163,184,.10);
    color:var(--muted);
}

.status.muted::before{
    background:var(--muted);
}

.secondary-btn.active{
    border-color:var(--accent);
    color:#b9dcff;
    background:rgba(78,161,255,.12);
}

/* Logs are dense: tighter rows than the client table. */
.log-table td{
    padding:8px 12px;
    vertical-align:top;
    font-size:13px;
}

.log-table th{
    padding:12px;
}

.log-table .status{
    padding:3px 10px;
    font-size:12px;
}

.log-time,
.log-source{
    white-space:nowrap;
    color:var(--muted);
}

.log-message{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;
    line-height:1.5;
    white-space:pre-wrap;
    word-break:break-word;
}

.log-error .log-message{
    color:#ffb4b4;
}

.log-warning .log-message{
    color:#fde68a;
}

/* ========================================================= */
/* DNS Page                                                  */
/* ========================================================= */

.check-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.check-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:10px;
    font-size:14px;
    cursor:pointer;
}

.check-item input{
    width:16px;
    height:16px;
    accent-color:var(--accent);
}

.check-item small{
    color:var(--muted);
}

.check-item:has(input:disabled){
    cursor:default;
    opacity:.75;
}

/* ========================================================= */
/* Dashboard: fills the window without scrolling. The graph  */
/* takes the height that is left, so no space is wasted on   */
/* any window size (1080p at 100% or 125% scaling, ...).     */
/* ========================================================= */

/* Let pages stretch to the window height (main scrolls when a
   page is taller). */
main{
    display:flex;
    flex-direction:column;
}

main > *{
    flex-shrink:0;
}

#content{
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
}

/* The dashboard fills the window: the graph takes the spare height,
   text scales with the window. */
.dashboard{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* Title and subtitle on one line. */
.dashboard .page-header{
    display:flex;
    align-items:baseline;
    gap:14px;
    margin-bottom:0;
}

.dashboard .page-header h1{
    font-size:26px;
    margin-bottom:0;
}

.dashboard .card-grid{
    gap:14px;
}

.dashboard .card{
    min-height:0;
    padding:14px 18px;
}

.dashboard .card span{
    margin-bottom:4px;
    font-size:13px;
}

.dashboard-metrics .card-metric{
    font-size:clamp(22px,1.6vw,36px);
    line-height:1.2;
}

/* The graph card grows into the remaining height (more specific
   than .dashboard .card, so the minimum height holds). */
.dashboard .dashboard-graph{
    flex:1 1 0;
    min-height:200px;
    display:flex;
    flex-direction:column;
}

.graph-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    flex-wrap:wrap;
}

.graph-legend{
    display:flex;
    gap:16px;
    font-size:13px;
    color:var(--muted);
}

/* More specific than .card span (display:block). */
.graph-header .legend-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    font-size:13px;
}

.graph-header #graphInterface{
    display:inline;
    margin:0;
}

.legend-swatch{
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:6px;
    border-radius:3px;
    vertical-align:middle;
}

.legend-item .legend-swatch{
    margin-right:0;
}

.legend-swatch.download{
    background:#4ea1ff;
}

.legend-swatch.upload{
    background:#6ee7b7;
}

/* The SVG is drawn at this area's pixel size by dashboard.js. */
.graph-area{
    position:relative;
    flex:1 1 0;
    min-height:0;
    margin-top:8px;
}

.graph-area svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    cursor:crosshair;
    touch-action:pan-y;
}

.graph-label{
    fill:var(--muted);
    font-size:12px;
    font-family:inherit;
    font-variant-numeric:tabular-nums;
}

.graph-tooltip{
    position:absolute;
    z-index:2;
    min-width:180px;
    padding:10px 12px;
    background:rgba(15,17,23,.94);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    font-size:13px;
    line-height:1.7;
    pointer-events:none;
    white-space:nowrap;
}

.graph-tooltip strong{
    float:right;
    margin-left:16px;
    font-variant-numeric:tabular-nums;
}

.graph-tooltip-time{
    color:var(--muted);
    font-size:12px;
}

/* All six system cards in one row on wide screens. */
.dashboard-system{
    grid-template-columns:repeat(6,minmax(0,1fr));
}

.dashboard-system .card-value{
    font-size:clamp(15px,1.1vw,24px);
    line-height:1.3;
}

@media (max-width:1100px){

    .dashboard-system{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

@media (max-width:640px){

    .dashboard-system,
    .dashboard-metrics{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dashboard .page-header{
        flex-direction:column;
        gap:4px;
    }

}

/* ========================================================= */
/* Sidebar Credits                                           */
/* ========================================================= */

/* Pinned to the bottom of the sidebar, below the navigation. */
.sidebar-credits{
    margin-top:auto;
    padding-top:8px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
    opacity:.75;
}

/* Undo the navigation link style for these small text links. */
.sidebar .sidebar-credits a{
    display:inline;
    padding:0;
    border-radius:0;
    color:var(--text);
    background:none;
}

.sidebar .sidebar-credits a::before{
    content:none;
}

.sidebar .sidebar-credits a:hover{
    background:none;
    color:var(--accent);
    text-decoration:underline;
}

/* ========================================================= */
/* Backup & Restore                                          */
/* ========================================================= */

.backup-summary{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--border);
}

.backup-info{
    margin-bottom:12px;
    font-size:14px;
}

.backup-area.invalid{
    opacity:.6;
    cursor:default;
}

.backup-area.invalid small{
    color:#ffb4b4;
}

.backup-results{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:12px;
    font-size:13px;
}

.backup-results .ok{
    color:#8ce5aa;
}

.backup-results .failed{
    color:#ffb4b4;
}

/* ========================= */
/* eth0 LAN / WAN switch     */
/* ========================= */

.interface-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    flex-wrap:wrap;
}

.role-switch{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    max-width:320px;
}

.role-toggle{
    display:inline-flex;
    padding:4px;
    gap:4px;
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:12px;
}

.role-option{
    min-width:72px;
    padding:8px 18px;
    background:transparent;
    color:var(--muted);
    border:1px solid transparent;
    border-radius:9px;
    font:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background var(--transition),color var(--transition),box-shadow var(--transition),transform .12s ease;
}

.role-option:hover:not(.active){
    color:var(--text);
    background:rgba(255,255,255,.04);
}

.role-option:active{
    transform:scale(.97);
}

.role-option.active{
    background:var(--accent);
    color:#fff;
    box-shadow:0 4px 14px rgba(78,161,255,.25);
    cursor:default;
}

.role-option:focus-visible{
    outline:2px solid #70b3ff;
    outline-offset:2px;
}

.role-info{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
    text-align:right;
}

@media (max-width:700px){

    .role-switch{
        align-items:flex-start;
        max-width:none;
    }

    .role-info{
        text-align:left;
    }

}

/* Read-only value shaped like an input. */
.setting-readonly{
    display:flex;
    align-items:center;
    color:var(--muted);
    cursor:default;
    user-select:text;
}

/* Firewall: built-in rules */

.fw-essentials{
    margin-top:16px;
}

.rule-builtin{
    display:inline-block;
    padding:4px 10px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
}

/* ========================================================= */
/* Setup wizard (/setup)                                     */
/* ========================================================= */

.setup-body{
    min-height:100vh;
    overflow-y:auto;
}

.setup{
    width:min(560px,100%);
    margin:0 auto;
    padding:48px 16px;
}

.setup-header{
    margin-bottom:24px;
    text-align:center;
}

.setup-header h1{
    font-size:28px;
    margin-bottom:6px;
}

.setup-header p{
    color:var(--muted);
}

/* Step indicator */
.setup-steps{
    display:flex;
    gap:8px;
    margin-bottom:18px;
    padding:0;
    list-style:none;
    counter-reset:step;
}

.setup-steps li{
    flex:1;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--muted);
    font-size:14px;
    counter-increment:step;
}

.setup-steps li::before{
    content:counter(step);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--panel2);
    font-size:12px;
    font-weight:700;
}

.setup-steps li.active{
    border-color:var(--accent);
    color:var(--text);
}

.setup-steps li.active::before{
    background:var(--accent);
    color:#fff;
}

.setup-steps li.done::before{
    content:"✓";
    background:rgba(34,197,94,.18);
    color:#8ce5aa;
}

.setup-card{
    padding:28px;
}

.setup-card h2{
    font-size:22px;
    margin-bottom:8px;
}

.setup-hint{
    color:var(--muted);
    line-height:1.5;
    margin-bottom:20px;
}

.setup-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
}

.setup-field label{
    font-size:14px;
    font-weight:600;
}

.setup-note{
    color:var(--muted);
    font-size:12px;
}

.setup-password{
    display:flex;
    gap:8px;
}

.setup-password .setting-input{
    flex:1;
    min-width:0;
}

.setup-show{
    flex-shrink:0;
    min-width:72px;
}

.setup-check{
    margin-bottom:18px;
}

.setup-summary{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:16px 0 20px;
}

.setup-error{
    margin-top:4px;
    margin-bottom:12px;
    padding:12px 14px;
    background:rgba(239,68,68,.10);
    border:1px solid rgba(239,68,68,.35);
    border-radius:10px;
    color:#ffb4b4;
    line-height:1.5;
}

.setup-actions{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:8px;
}

/* Next/Finish stays on the right when Back is hidden. */
.setup-actions .save-btn{
    margin-left:auto;
}

a.setup-open{
    text-decoration:none;
    margin-top:4px;
}

@media (max-width:640px){

    .setup{
        padding:24px 16px;
    }

    .setup-card{
        padding:20px;
    }

    .setup-steps li{
        justify-content:center;
        padding:8px;
        font-size:13px;
    }

    .setup-actions .save-btn,
    .setup-actions .secondary-btn{
        flex:1;
        width:auto;
    }

}

/* Network page: LAN bridge card and bridged eth0 */

.lan-bridge-card{
    margin-top:18px;
}

.bridge-note{
    margin-top:6px;
    color:var(--accent);
    font-size:13px;
}

.interface-card .setting-input:disabled{
    color:#626b7b;
    cursor:not-allowed;
}

/* Divider between two parts of one card. */
.card-divider{
    border:none;
    border-top:1px solid var(--border);
    margin:20px 0 16px;
}

.wifi-address-hint{
    margin:14px 0 0;
}

/* Interface name inside the label; .card span would make it a block. */
#wifiAddressInterface{
    display:inline;
    margin:0;
    color:inherit;
    font-size:inherit;
}

/* Labelled input inside a confirmation dialog. */
.modal-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:12px;
    font-size:14px;
    font-weight:600;
}

.vpn-full-tunnel{
    margin-top:14px;
}

/* ========================================================= */
/* Web shell                                                 */
/* ========================================================= */

/* The terminal fills the height left under the header. */
.page.shell-page{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.shell-page .page-header{
    margin-bottom:0;
}

.shell-unlock .setting-row .setting-input{
    max-width:360px;
}

.shell-notice a.secondary-btn{
    display:inline-flex;
    align-items:center;
    margin-top:4px;
    text-decoration:none;
}

.shell-terminal-card{
    flex:1 1 0;
    min-height:360px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.shell-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.shell-toolbar .shell-state{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0;
    font-size:13px;
}

.shell-toolbar .shell-state::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#626b7b;
}

.shell-toolbar .shell-state.connected::before{
    background:#22c55e;
}

/* xterm's fit add-on sizes the terminal from this box's height and
   only subtracts the padding of xterm's own element. So: no padding
   here, and a height without the border (content-box), otherwise the
   last row ends up below the frame. */
.shell-terminal{
    flex:1 1 0;
    min-height:0;
    box-sizing:content-box;
    padding:0;
    background:#0f1117;
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
}

.shell-terminal .xterm{
    padding:10px;
}

/* xterm.css paints the scroll area black; match the terminal colour. */
.shell-terminal .xterm,
.shell-terminal .xterm .xterm-viewport{
    background-color:#0f1117;
}

/* Phones and touch-only devices: the shell entry is greyed out. */
@media (max-width:900px), (hover:none) and (pointer:coarse){

    .sidebar a.nav-desktop-only{
        opacity:.4;
        pointer-events:none;
        cursor:not-allowed;
    }

}