/* ═══════════════════════════════════════════════════════════════
   XENTRO · Liquid Glass Design System v3
   Premium macOS/iOS-inspired desktop application UI
   deep charcoal · liquid glass · restrained blue accents · native controls
   ═══════════════════════════════════════════════════════════════ */

/* ══ DEPTH LEVELS ══ */
/* Level 0: Background
   Level 1: App shell window
   Level 2: Sidebar / main panels
   Level 3: Floating cards
   Level 4: Popovers / menus
   Level 5: Modal sheets */

:root {
    /* Core palette — restrained, Apple-like */
    --bg0: var(--bg0);
    --bg1: var(--bg1);
    --bg2: var(--bg2);
    --panel: var(--panel);
    --panel2: var(--panel2);
    --panel3: var(--panel3);
    --line: var(--line);
    --line2: var(--line2);
    --tx: var(--tx);
    --tx2: var(--tx2);
    --tx3: var(--tx3);
    --blue: var(--blue);
    --blue2: var(--blue2);
    --blue3: var(--blue3);
    --cyan: var(--cyan);
    --green: var(--green);
    --green2: var(--green2);
    --orange: var(--orange);
    --orange2: var(--orange2);
    --red: var(--red);

    /* Liquid Glass surface — base */
    --glass-tint: rgba(10, 16, 28, 0.60);
    --glass-blur: 24px;
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* Depth-level surfaces */
    --surface-0: transparent;
    --surface-1: rgba(6, 11, 22, 0.42);
    --surface-2: rgba(10, 16, 28, 0.48);
    --surface-3: rgba(14, 22, 40, 0.52);
    --surface-4: rgba(14, 22, 40, 0.62);
    --surface-5: rgba(6, 11, 22, 0.72);

    /* Blur per level */
    --blur-0: 0px;
    --blur-1: 12px;
    --blur-2: 16px;
    --blur-3: 20px;
    --blur-4: 24px;
    --blur-5: 28px;

    /* Shadows per level */
    --shadow-0: none;
    --shadow-1: 0 8px 28px rgba(0, 0, 0, 0.28);
    --shadow-2: 0 10px 32px rgba(0, 0, 0, 0.32);
    --shadow-3: 0 14px 42px rgba(0, 0, 0, 0.36);
    --shadow-4: 0 18px 50px rgba(0, 0, 0, 0.38);
    --shadow-5: 0 24px 64px rgba(0, 0, 0, 0.42);

    --radius: var(--radius);
    --radius-s: var(--radius-s);
    --radius-i: var(--radius-i);
    --font: var(--font);
    --mono: var(--mono);
    --ui-density: var(--ui-density, 1);
}

/* ══ BASE ══ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: var(--font);
    color: var(--tx);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1;
}

/* ══ LEVEL 0: BACKGROUND ══ */
.bg-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 500px at 85% -10%, var(--blue2-a14), transparent 60%),
        radial-gradient(800px 450px at -5% 110%, var(--cyan-a07), transparent 55%),
        linear-gradient(150deg, var(--bg0) 0%, var(--bg1) 35%, var(--bg2, var(--bg0)) 100%);
}

/* ┐ Subtle texture overlay for premium feel — very faint */
.bg-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.012) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(124, 215, 236, 0.018) 0%, transparent 40%);
    pointer-events: none;
}

/* ══ CONTAINER: APP WINDOW (Level 1) ══ */
#xentro-root {
    position: relative;
    z-index: 1;
    height: 100vh;
    padding: 22px;
    display: flex;
    justify-content: center;
}

.app-window {
    width: 100%;
    max-width: 1380px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    background: linear-gradient(160deg, var(--bg1) 0%, color-mix(in srgb, var(--bg1) 62%, #04060B) 52%, color-mix(in srgb, var(--bg0) 80%, #000) 100%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(var(--blur-1));
    -webkit-backdrop-filter: blur(var(--blur-1));
    overflow: hidden;
    transition: box-shadow 0.24s ease;
}

.app-window:hover {
    box-shadow: var(--shadow-2);
}

/* ══ LEVEL 2 PANEL SURFACE ══ */
.panel {
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-0);
    backdrop-filter: blur(var(--blur-2));
    -webkit-backdrop-filter: blur(var(--blur-2));
    transition: border-color 0.18s ease, box-shadow 0.22s ease;
}

.panel:hover {
    border-color: var(--line2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* ══ LEVEL 3 FLOATING CARD ══ */
.card {
    background: var(--surface-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-0);
    backdrop-filter: blur(var(--blur-3));
    -webkit-backdrop-filter: blur(var(--blur-3));
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}

.card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.32);
}

/* ══ LEVEL 4 POPOVER / MENU ══ */
.popover {
    background: var(--surface-4);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--shadow-4);
    backdrop-filter: blur(var(--blur-4));
    -webkit-backdrop-filter: blur(var(--blur-4));
    z-index: 100;
}

/* ══ LEVEL 5 MODAL SHEET ══ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeAppear 0.22s ease;
}
@keyframes fadeAppear { from { opacity: 0; } to { opacity: 1; } }

.modal-sheet {
    background: var(--surface-5);
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    box-shadow: var(--shadow-5);
    backdrop-filter: blur(var(--blur-5));
    -webkit-backdrop-filter: blur(var(--blur-5));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    animation: scaleAppear 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
}
@keyframes scaleAppear {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

/* Inner highlight / glass rim */
.panel::before, .card::before, .popover::before, .modal-sheet::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

/* ══ TITLE BAR (macOS style) ══ */
.titlebar {
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 0 20px;
    background: linear-gradient(180deg, rgba(10, 16, 28, 0.58), rgba(6, 11, 22, 0.32));
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
}

.tb-left { display: flex; align-items: center; gap: 11px; }
.logo {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(36, 169, 255, 0.32);
}
.logo svg { width: 13px; height: 13px; }
.tb-title { font-size: 13px; font-weight: 700; letter-spacing: -0.2px; color: var(--tx); }
.tb-sub { font-size: 10px; color: var(--tx3); font-family: var(--mono); margin-top: 1px; }

.tb-center { position: absolute; left: 50%; transform: translateX(-50%); }
.tb-pill {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--tx3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tb-pill.live::before, .tb-pill::after {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--green2);
}

.tb-right { display: flex; align-items: center; gap: 3px; }
.tb-up { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--tx3); margin-right: 12px; letter-spacing: 0.3px; }
.tb-up::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green2); box-shadow: 0 0 6px var(--green2); }
.tb-clock { font-family: var(--mono); font-size: 10.5px; color: var(--tx3); margin-right: 8px; letter-spacing: 0.4px; }

.win-btn {
    width: 30px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
}
.win-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--tx); }
.win-btn.win-close:hover { background: rgba(255, 85, 85, 0.14); color: var(--red); }
.win-btn svg { width: 10px; height: 10px; }

/* ══ APP BODY / SIDEBAR ══
   Deliberately not defined here. The shell layout has a single owner further
   down this file ("APPLICATION SHELL — SINGLE SOURCE OF TRUTH"); duplicating
   the grid and the rail width in two places is what broke the navigation. */

/* ══ SIDEBAR CONTENTS ══ */
.side-nav { flex: 1; min-height: 0; }

.nav-label {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tx3);
    opacity: 0.7;
    padding: 14px 14px 4px 16px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 1px 10px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tx3);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.16s ease;
    text-decoration: none;
    position: relative;
    opacity: 0.85;
}

.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; transition: 0.16s; }

.nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--tx2);
}

.nav-item.active {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--blue-a22);
    color: var(--blue3);
    box-shadow: 0 0 0 2px rgba(88, 102, 242, 0.12);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--blue), var(--cyan));
}

.nav-item.active svg { color: var(--blue3); }

.side-foot {
    border-top: 1px solid var(--line);
    padding: 10px 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.side-fuser {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
    padding: 8px 11px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
    transition: 0.16s;
}

.side-fuser:hover { background: rgba(255, 255, 255, 0.06); }
.side-fuser img { width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; border: 1px solid var(--line2); }
.side-fuser .sf-name { font-size: 11.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-fuser .sf-sub { font-size: 9.5px; color: var(--tx3); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-fuser .sf-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-left: auto; }
.side-fuser .sf-dot.online { background: var(--green2); box-shadow: 0 0 6px var(--green2); }

.side-logout {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
    flex-shrink: 0;
    text-decoration: none;
}
.side-logout svg { width: 13px; height: 13px; }
.side-logout:hover { background: rgba(255, 85, 85, 0.14); color: var(--red); }

/* ══ MAIN COLUMN ══ */
.main-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Top strip — integrated into window, not a separate bar */
.top-strip {
    flex-shrink: 0;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(10, 16, 28, 0.40), rgba(10, 16, 28, 0.30));
}

.ts-crumb { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tx3); min-width: 0; }
.ts-crumb .ts-brand { color: var(--blue3); font-weight: 700; font-size: 11.5px; letter-spacing: 0.3px; }
.ts-crumb b { color: var(--tx); font-weight: 600; font-size: 11.5px; }
.ts-crumb .ts-sep { color: var(--tx3); opacity: 0.6; font-size: 10px; }

.ts-right { display: flex; align-items: center; gap: 10px; }
.ts-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: 0.15s;
    text-decoration: none;
}
.ts-user:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--line2); }
.ts-user img { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line2); }
.ts-user span { font-size: 11.5px; font-weight: 600; color: var(--tx); }
.ts-user .ts-u-dot { width: 7px; height: 7px; border-radius: 50%; margin-left: 1px; }

.ts-link {
    color: var(--tx3);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 7px;
    transition: 0.14s;
}
.ts-link:hover { color: var(--red); background: rgba(245, 85, 85, 0.08); }
.ts-link svg { width: 12px; height: 12px; }

/* ══ CONTENT AREA ══ */
.content {
    flex: 1;
    overflow-y: auto;
    padding: 22px 26px;
    min-height: 0;
    animation: ntFadeIn 0.28s ease;
}
@keyframes ntFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.content::-webkit-scrollbar { width: 5px; }
.content::-webkit-scrollbar-thumb { background: var(--line-a22); border-radius: 4px; }

/* ══ PAGE HEAD ══ */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-head h1 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--tx);
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-head h1 .h-emoji { font-size: 15px; }
.page-head p { font-size: 12px; color: var(--tx3); line-height: 1.5; }

.page-head-actions { display: flex; gap: 8px; align-items: center; }

/* ══ GRID SYSTEM ══ */
.grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.inline { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ══ TYPOGRAPHY (Apple-inspired) ══ */
h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
h3 { font-size: 13px; font-weight: 600; letter-spacing: -0.1px; }
h4 { font-size: 11.5px; font-weight: 600; }
p { font-size: 13px; line-height: 1.55; color: var(--tx2); }
.caption { font-size: 11px; color: var(--tx3); line-height: 1.5; }
.micro { font-size: 9.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--tx3); }

/* ══ BUTTONS (native controls) ══ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--tx2);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.16s ease;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}
.btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--tx);
}
.btn:active { transform: translateY(0.5px) scale(0.985); }

.btn-primary {
    background: linear-gradient(135deg, #2A7BFF, #00C4FF);
    border: 1px solid rgba(42, 123, 255, 0.4);
    color: #fff;
    box-shadow: 0 4px 18px rgba(42, 123, 255, 0.30);
}
.btn-primary:hover {
    box-shadow: 0 6px 24px rgba(42, 123, 255, 0.38);
    filter: brightness(1.04);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line);
    color: var(--tx3);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tx2);
}

.btn-danger {
    background: rgba(255, 85, 85, 0.12);
    border: 1px solid rgba(255, 85, 85, 0.32);
    color: #FF8A96;
}
.btn-danger:hover {
    background: rgba(255, 85, 85, 0.20);
    color: #FFB0B8;
}

.btn-sm { height: 30px; padding: 0 11px; font-size: 11.5px; border-radius: 7px; }
.btn-lg { height: 40px; padding: 0 22px; font-size: 13.5px; border-radius: 11px; }
.btn-block { width: 100%; }

/* Secondary action — glass tint */
.btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--tx2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--tx);
}

/* ══ INPUTS (macOS/iOS style) ══ */
.input-field, .select-box {
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--tx);
    font-family: var(--font);
    font-size: 12.5px;
    outline: none;
    transition: all 0.16s ease;
    width: 100%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.input-field:focus, .select-box:focus {
    border-color: var(--blue3);
    box-shadow: 0 0 0 3px var(--blue3-a20);
    background: rgba(255, 255, 255, 0.05);
}
.input-field::placeholder { color: var(--tx3); }
.input-field:disabled { opacity: 0.4; cursor: not-allowed; }
.input-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tx3);
    margin-bottom: 6px;
}

.search-box { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--tx3); }
.search-box input { height: 36px; padding: 0 12px 0 38px; border-radius: 10px; }

select.input-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6A86' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 13px;
    padding-right: 34px;
}

.input-group { margin-bottom: 0; }

/* ══ SWITCHES (iOS-style) ══ */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line);
    transition: 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 999px;
}
.slider:before {
    position: absolute; content: "";
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background: #b8c4d8;
    transition: 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 50%;
}
input:checked + .slider {
    background: linear-gradient(135deg, #2A7BFF, #00C4FF);
    border-color: rgba(42, 123, 255, 0.50);
}
input:checked + .slider:before { transform: translateX(18px); background: #fff; }

/* ═= TOGGLES ══ */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); transition: 0.24s; border-radius: 999px; }
.toggle-switch .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #b8c4d8; transition: 0.24s; border-radius: 50%; }
.toggle-switch input:checked + .slider { background: linear-gradient(135deg, #2A7BFF, #00C4FF); border-color: rgba(42, 123, 255, 0.50); }
.toggle-switch input:checked + .slider:before { transform: translateX(18px); background: #fff; }

/* ══ BADGES / CHIPS ══ */
.badge, .tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.badge-green, .tag.online, .tag.done { background: rgba(34, 211, 138, 0.14); border: 1px solid rgba(34, 211, 138, 0.34); color: var(--green2); }
.badge-orange, .tag.warn { background: rgba(255, 165, 0, 0.12); border: 1px solid rgba(255, 165, 0, 0.32); color: var(--orange2); }
.badge-red, .tag.error { background: rgba(255, 85, 85, 0.12); border: 1px solid rgba(255, 85, 85, 0.32); color: #FF8A96; }
.badge-blue, .tag { background: var(--blue3-a12); border: 1px solid var(--blue3-a30); color: var(--blue3); }
.badge-gray, .tag { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--tx3); }
.badge-cyan, .tag { background: rgba(34, 211, 209, 0.12); border: 1px solid rgba(34, 211, 209, 0.30); color: var(--cyan); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--blue3-a10);
    border: 1px solid var(--blue3-a24);
    color: #93F0FF;
    font-size: 10.5px;
    font-weight: 700;
}

/* ══ LISTS / ROWS ══ */
.list { display: flex; flex-direction: column; gap: 6px; }
.list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.16s ease;
    font-size: 12.5px;
}
.list-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--line);
}

/* ══ TABS / SEG ══ */
.seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.seg-btn {
    height: 30px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--tx3);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.seg-btn svg { width: 13px; height: 13px; }
.seg-btn:hover { color: var(--tx2); }
.seg-btn.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tx);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 16px;
}
.tab {
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tx3);
    border: none;
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.16s ease;
}
.tab:hover { color: var(--tx2); }
.tab.active {
    background: rgba(255, 255, 255, 0.07);
    color: var(--tx);
}

/* ══ DROPDOWNS / MENUS ══ */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 190px;
    background: rgba(14, 22, 40, 0.72);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 5px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
    display: none;
    animation: menuIn 0.18s ease;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-menu .menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--tx2);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.14s ease;
}
.dropdown-menu .menu-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--tx); }
.dropdown-menu .menu-item svg { width: 14px; height: 14px; opacity: 0.75; flex-shrink: 0; }
.dropdown-menu .menu-item.danger { color: #FF8A96; }
.dropdown-menu .menu-item.danger:hover { background: rgba(255, 85, 85, 0.12); }
.dropdown-menu .menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }

@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ══ TOAST ══
   The old single centred banner (a fixed `.toast` with `top`/`left`/`translateX`
   and its `.t-ic` / `.t-ok` / `.t-err` / `.t-info` parts) is gone. The current
   toast system further down this file stacks items inside `.toast-container`,
   and because those items are `position: relative`, the banner's `top: 64px`
   and `left: 50%` were still landing on every one of them — pushing the stack
   64px down so the second toast fell off the bottom of the viewport. Nothing
   rendered the banner markup any more, so the rules went with it. */

/* ══ CONTEXT MENU ══ */
.ctx-menu {
    position: fixed;
    z-index: 200;
    min-width: 200px;
    background: rgba(14, 22, 40, 0.76);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 5px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    animation: menuIn 0.16s ease;
}
.ctx-menu.show { display: block; }
.ctx-menu .menu-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: none; border-radius: 8px; background: transparent; color: var(--tx2); font-family: var(--font); font-size: 12px; cursor: pointer; text-align: left; transition: 0.13s; }
.ctx-menu .menu-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--tx); }
.ctx-menu .menu-item.danger { color: #FF8A96; }
.ctx-menu .menu-item.danger:hover { background: rgba(255, 85, 85, 0.12); }
.ctx-menu .menu-item svg { width: 13.5px; height: 13.5px; opacity: 0.75; flex-shrink: 0; }
.ctx-menu .menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.ctx-menu .menu-sub { color: var(--tx3); font-size: 10px; padding: 4px 11px 7px; }

/* ══ MODAL / SHEETS ══ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeAppear 0.2s ease;
}
.modal-content {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.modal-header h2 { font-size: 15px; font-weight: 600; }
.modal-close {
    width: 26px; height: 26px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.14s;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--tx); }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }

/* ══ PROGRESS ══ */
.progress-wrap { width: 100%; height: 5px; background: rgba(255, 255, 255, 0.06); border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #2A7BFF, #00C4FF); border-radius: 6px; transition: width 0.4s ease; }

/* ══ DIVIDERS ══ */
.divider { border: none; height: 1px; background: var(--line); margin: 18px 0; }
.divider-dashed { border: none; height: 1px; border-top: 1px dashed var(--line); margin: 16px 0; }

/* ══ UTILITIES ══ */
.muted { color: var(--tx3); }
.mono { font-family: var(--mono); }
.text-click { color: var(--blue3); cursor: pointer; text-decoration: none; }
.text-click:hover { text-decoration: underline; }

/* ══ RESPONSIVE ══ */
@media (max-width: 1280px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    #xentro-root { padding: 16px; }
}

@media (max-width: 900px) {
    #xentro-root { padding: 10px; }
    /* Sidebar rules deliberately absent: below 1080px the rail is an overlay
       drawer (see the drawer block near the end of this file). This block used to
       force a permanent 68px icon rail with no labels, no section headings and no
       account area, which fought the drawer and left the navigation unreadable. */
    .content { padding: 16px 16px 56px; }
    .grid-3, .form-grid { grid-template-columns: 1fr; }
    .modal-overlay { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   XENTRO v3 — COMPONENT LAYER
   Completes the Liquid Glass transformation: brings every page-level
   component (tables, stat cards, command cards, lists, editor, builder,
   marketplace, quests, notifications, terminal) out of the old v2
   cyberpunk styling (deep glows, saturated gradients, technical grid)
   and into the depth-level glass language.
   ═══════════════════════════════════════════════════════════════ */

/* ── section titles — restrained accent ── */
.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tx3);
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}
.section-title::before {
    content: '';
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--blue3);
    opacity: 0.85;
}
.section-title .st-icon { margin: 0; color: var(--blue3); }

/* ── hero / page heads — plain text, no gradient clip ── */
.page-head h1, .hero-head h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--tx);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}
.page-head p, .hero-head p { font-size: 12px; color: var(--tx3); line-height: 1.5; }

/* ── stat mini cards (dashboard) ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat-mini {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-s);
    backdrop-filter: blur(var(--blur-2));
    -webkit-backdrop-filter: blur(var(--blur-2));
    transition: all 0.18s ease;
    text-decoration: none;
}
.stat-mini:hover { transform: translateY(-1px); border-color: var(--blue3-a40); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); }
.stat-mini .sm-ic {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--tx2);
    flex-shrink: 0;
}
.stat-mini .sm-ic svg { width: 16px; height: 16px; }
/* The value/label pair lives in a plain <span> wrapper in the markup. Without an
   explicit column it stacked inline, rendering "93 msLATENCY" / "2SERVERS". */
.stat-mini > span:not(.sm-ic),
.stat-mini > div:not(.sm-ic) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 2px;
}
.stat-mini.green .sm-ic { color: var(--green2); background: var(--green-a12); border-color: var(--green-a30); }
.stat-mini.cyan .sm-ic { color: var(--cyan); background: var(--cyan-a12); border-color: var(--cyan-a30); }
.stat-mini.orange .sm-ic { color: var(--orange2); background: var(--orange-a12); border-color: var(--orange-a30); }
.stat-mini.red .sm-ic { color: #FF8A96; background: var(--red-a12); border-color: var(--red-a30); }
.stat-mini .sm-val {
    display: block;
    font-size: 16px; font-weight: 700; font-family: var(--mono); color: var(--tx);
    line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-mini .sm-val small { font-size: 9.5px; color: var(--tx3); font-family: var(--font); font-weight: 600; margin-left: 3px; }
.stat-mini .sm-label {
    display: block;
    font-size: 9px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--tx3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Quick-link tiles carry descriptive labels ("AUTOMATION", "LOGS & EVENTS")
   rather than a metric name, so they wrap instead of truncating. */
.stat-mini.ql .sm-label { white-space: normal; overflow: visible; line-height: 1.25; letter-spacing: 0.7px; }

/* ── glass tables ── */
.glass-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface-1);
    backdrop-filter: blur(var(--blur-1));
    -webkit-backdrop-filter: blur(var(--blur-1));
}
.glass-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 760px; }
.glass-table thead th {
    text-align: left;
    padding: 11px 14px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tx3);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}
.glass-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line-a07); color: var(--tx2); vertical-align: middle; }
.glass-table tbody tr { transition: 0.12s; }
.glass-table tbody tr:hover { background: rgba(255, 255, 255, 0.035); }
.glass-table tbody tr:last-child td { border-bottom: none; }

/* pagination */
.pagination { display: flex; align-items: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.page-btn {
    min-width: 31px; height: 31px; padding: 0 9px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--tx3);
    font-family: var(--font);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: 0.15s;
}
.page-btn:hover { background: var(--blue3-a12); color: var(--tx); }
.page-btn.active { background: linear-gradient(135deg, #2A7BFF, #00C4FF); color: #fff; border: none; box-shadow: 0 4px 14px rgba(42, 123, 255, 0.3); }

/* ── command cards (hub) ── */
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cmd-card {
    position: relative;
    background: var(--surface-3);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    backdrop-filter: blur(var(--blur-3));
    -webkit-backdrop-filter: blur(var(--blur-3));
    transition: all 0.18s ease;
    overflow: hidden;
}
.cmd-card:hover { transform: translateY(-2px); border-color: var(--blue3-a40); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
.cmd-card .card-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--blue3-a10);
    border: 1px solid var(--blue3-a24);
    color: var(--blue3);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 13px;
}
.cmd-card .card-icon svg { width: 22px; height: 22px; }
.cmd-card .card-title { font-size: 14px; font-weight: 700; color: var(--tx); }
.cmd-card .card-desc { font-size: 11.5px; color: var(--tx3); margin-top: 5px; line-height: 1.45; }
.cmd-card .card-go { position: absolute; right: 14px; top: 14px; color: var(--tx3); opacity: 0; transition: 0.18s; }
.cmd-card:hover .card-go { opacity: 1; color: var(--blue3); }

/* ── list items (whitelist / triggers / messages / queue / records) ── */
.whitelist-item, .trigger-item, .msg-item, .record-item, .queue-item, .log-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 11px;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    margin-bottom: 9px;
    backdrop-filter: blur(var(--blur-2));
    -webkit-backdrop-filter: blur(var(--blur-2));
    transition: all 0.16s ease;
}
.whitelist-item:hover, .trigger-item:hover, .msg-item:hover, .record-item:hover, .queue-item:hover, .log-item:hover {
    border-color: var(--line2);
    background: var(--surface-3);
}
.whitelist-icon, .sp-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.whitelist-icon img, .sp-icon img { width: 100%; height: 100%; object-fit: cover; }
.sp-info b, .cp-info b { display: block; font-size: 13px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-info span, .cp-info span { font-size: 11px; color: var(--tx3); }
.q-img { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; object-fit: cover; background: rgba(255,255,255,0.04); border: 1px solid var(--line); }
.q-info { flex: 1; min-width: 0; }
.q-title { font-size: 12.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-author { font-size: 10.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-title { font-size: 12.5px; font-weight: 600; color: var(--tx); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-info { font-size: 10.5px; color: var(--tx3); margin-top: 2px; font-family: var(--mono); }
.no-items { padding: 18px; text-align: center; color: var(--tx3); font-size: 12px; border: 1px dashed var(--line-a32); border-radius: 11px; }

/* ── notification center ── */
.notif-list { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; }
.notif-item {
    display: flex;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 11px;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--blur-2));
    -webkit-backdrop-filter: blur(var(--blur-2));
    transition: all 0.16s ease;
}
.notif-item:hover { border-color: var(--line2); background: var(--surface-3); }
.notif-item .n-ic {
    width: 30px; height: 30px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
}
.notif-item .n-ic svg { width: 15px; height: 15px; }
.notif-item.n-info .n-ic { background: var(--blue3-a12); color: var(--blue3); border-color: var(--blue3-a30); }
.notif-item.n-success .n-ic { background: var(--green-a12); color: var(--green2); border-color: var(--green-a30); }
.notif-item.n-error .n-ic { background: var(--red-a12); color: #FF8A96; border-color: var(--red-a30); }
.notif-item .n-body { min-width: 0; flex: 1; }
.notif-item .n-title { font-size: 12.5px; font-weight: 600; color: var(--tx); word-break: break-word; }
.notif-item .n-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; flex-wrap: wrap; }
.notif-item .n-time { font-size: 10.5px; color: var(--tx3); }
.notif-item .n-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--tx3); font-family: var(--mono); }
.notif-empty { padding: 26px 10px; text-align: center; color: var(--tx3); font-size: 12px; border: 1px dashed var(--line-a32); border-radius: 12px; }

/* ── quest cards ── */
.quests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 13px; }
.quest-card {
    background: var(--surface-3);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 15px;
    backdrop-filter: blur(var(--blur-3));
    -webkit-backdrop-filter: blur(var(--blur-3));
    transition: all 0.18s ease;
}
.quest-card:hover { transform: translateY(-1px); border-color: var(--blue3-a32); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24); }
.quest-card.running { border-color: var(--green-a40); box-shadow: 0 0 20px var(--green-a10); }
.quest-name { font-size: 13.5px; font-weight: 700; color: var(--tx); display: flex; align-items: center; gap: 8px; }
.quest-meta { font-size: 11px; color: var(--tx3); margin-top: 4px; }
.quest-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.quest-progress-text { font-size: 10.5px; color: var(--tx3); margin-top: 5px; font-family: var(--mono); }

/* ── terminal / console — dark mono surface ── */
.terminal-window {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.terminal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--line);
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; }
.term-dot:nth-child(1) { background: #ff5f57; }
.term-dot:nth-child(2) { background: #febc2e; }
.term-dot:nth-child(3) { background: #28c840; }
.terminal-title { font-size: 11px; color: var(--tx3); font-weight: 600; }
.terminal-body { padding: 13px 15px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--tx2); max-height: 250px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.console-box {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 15px;
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--tx2);
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 12px;
}

/* ── editor (scripts IDE) ── */
.ide-wrap { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 14px; height: calc(100vh - 190px); min-height: 460px; }
.explorer {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(var(--blur-2));
    -webkit-backdrop-filter: blur(var(--blur-2));
}
.explorer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 10px; }
.explorer-head .ex-title { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tx3); display: flex; align-items: center; gap: 7px; }
.explorer-head .ex-title svg { width: 14px; height: 14px; color: var(--blue3); }
.explorer-search { position: relative; margin-bottom: 8px; }
.explorer-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--tx3); }
.explorer-search input { height: 32px; padding: 0 10px 0 30px; font-size: 11.5px; }
.explorer-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.file-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: 0.13s;
    color: var(--tx3);
    width: 100%;
    background: transparent;
    font-family: var(--font);
    text-align: left;
}
.file-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tx3); transition: 0.13s; }
.file-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--tx2); }
.file-item.active { background: rgba(255, 255, 255, 0.07); border-color: var(--blue3-a30); color: var(--tx); }
.file-item.active svg { color: var(--blue3); }
.file-item .fi-main { flex: 1; min-width: 0; }
.file-item .fi-name { font-size: 12px; font-weight: 600; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-item .fi-sub { font-size: 9.5px; color: var(--tx3); font-family: var(--mono); margin-top: 1px; }
.file-item .fi-st { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.file-item .fi-st.on { background: var(--green2); box-shadow: 0 0 6px var(--green2); }
.file-item .fi-st.off { background: var(--tx3); opacity: 0.5; }
.editor-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    backdrop-filter: blur(var(--blur-2));
    -webkit-backdrop-filter: blur(var(--blur-2));
}
.ed-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
    overflow-x: auto;
}
.ed-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tx3);
    cursor: pointer;
    border: 1px solid transparent;
    transition: 0.13s;
    white-space: nowrap;
    font-family: var(--font);
    background: transparent;
}
.ed-tab svg { width: 12px; height: 12px; color: var(--blue3); }
.ed-tab:hover { background: rgba(255, 255, 255, 0.04); color: var(--tx2); }
.ed-tab.active { background: rgba(255, 255, 255, 0.07); color: var(--tx); border-color: var(--blue3-a24); }
.ed-tab .et-close { opacity: 0; transition: 0.13s; width: 12px; height: 12px; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.ed-tab:hover .et-close { opacity: 0.7; }
.ed-tab .et-close:hover { opacity: 1; background: var(--red-a20); color: #FF8A96; }
.ed-body { flex: 1; min-height: 0; display: flex; position: relative; }
.ed-lines {
    width: 52px; flex-shrink: 0;
    padding: 12px 8px 12px 0;
    text-align: right;
    font-family: var(--mono);
    font-size: 11px; line-height: 1.75;
    color: var(--tx3); opacity: 0.5;
    border-right: 1px solid var(--line-a09);
    background: rgba(255, 255, 255, 0.02);
    user-select: none;
    overflow: hidden;
}
.ed-code {
    flex: 1; min-width: 0;
    padding: 12px 16px;
    font-family: var(--mono);
    font-size: 11.5px; line-height: 1.75;
    color: var(--tx2);
    white-space: pre;
    overflow: auto;
    tab-size: 4;
}
.ed-code .tk-kw { color: #60A5FA; }
.ed-code .tk-str { color: #7CF0B0; }
.ed-code .tk-num { color: #FFB46B; }
.ed-code .tk-fn { color: #7CD0FF; }
.ed-code .tk-cm { color: var(--tx3); font-style: italic; }
.ed-code .tk-pr { color: #C792EA; }
.ed-code .tk-pro { color: var(--orange2); }
.ed-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--tx3);
    flex-wrap: wrap;
}
.ed-foot .ef-right { display: flex; gap: 14px; align-items: center; }
.ed-foot .ef-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green2); box-shadow: 0 0 6px var(--green2); }

/* ── feature builder ── */
.builder-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; height: calc(100vh - 190px); min-height: 460px; }
.builder-palette {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow-y: auto;
    backdrop-filter: blur(var(--blur-2));
    -webkit-backdrop-filter: blur(var(--blur-2));
}
.pal-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--tx2);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 600;
    cursor: grab;
    transition: 0.14s;
    text-align: left;
}
.pal-item svg { width: 14px; height: 14px; color: var(--cyan); flex-shrink: 0; }
.pal-item:hover { border-color: var(--blue3-a40); background: rgba(255, 255, 255, 0.06); color: var(--tx); transform: translateX(2px); }
.pal-item:active { cursor: grabbing; }
.builder-canvas {
    position: relative;
    padding: 22px 20px;
    overflow-y: auto;
    background: var(--surface-1);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(var(--blur-1));
    -webkit-backdrop-filter: blur(var(--blur-1));
}
.builder-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line-a05) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-a05) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
    border-radius: inherit;
}
.node {
    background: var(--surface-3);
    border: 1px solid var(--glass-border);
    border-radius: 11px;
    padding: 12px 13px;
    box-shadow: var(--shadow-1);
    position: relative;
    z-index: 1;
    transition: 0.15s;
}
.node:hover { border-color: var(--blue3-a40); }
.node.cond { border-left: 3px solid var(--cyan); }
.node.act { border-left: 3px solid var(--blue); }
.node.logic { border-left: 3px solid var(--orange); }
.node-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.node-head .nd-ic { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--blue3); background: var(--blue3-a12); border: 1px solid var(--blue3-a24); }
.node.cond .nd-ic { color: var(--cyan); background: var(--cyan-a12); border-color: var(--cyan-a30); }
.node.logic .nd-ic { color: var(--orange2); background: var(--orange-a12); border-color: var(--orange-a30); }
.node-head .nd-ic svg { width: 13px; height: 13px; }
.node-head .nd-name { font-size: 12px; font-weight: 700; color: var(--tx); flex: 1; }
.node-head .nd-del { width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent; color: var(--tx3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.13s; }
.node-head .nd-del svg { width: 11px; height: 11px; }
.node-head .nd-del:hover { background: var(--red-a14); color: #FF8A96; }
.node-body { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 11px; }
.node-body .full { grid-column: 1 / -1; }
.node-body .nd-opts { display: flex; gap: 4px; flex-wrap: wrap; grid-column: 1 / -1; }
.nd-add { grid-column: 1 / -1; }

/* ── marketplace & themes ── */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 13px; }
.market-card {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    background: var(--surface-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: blur(var(--blur-3));
    -webkit-backdrop-filter: blur(var(--blur-3));
    transition: all 0.16s ease;
    position: relative;
}
.market-card:hover { transform: translateY(-2px); border-color: var(--blue3-a40); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.26); }
.market-card .mc-head { display: flex; align-items: center; gap: 10px; }
.market-card .mc-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--blue3-a10); border: 1px solid var(--blue3-a28); color: var(--blue3); flex-shrink: 0; }
.market-card .mc-ic svg { width: 17px; height: 17px; }
.market-card .mc-title { font-size: 13px; font-weight: 700; color: var(--tx); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.market-card .mc-desc { font-size: 11px; color: var(--tx3); line-height: 1.5; flex: 1; }
.market-card .mc-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--tx3); font-family: var(--mono); flex-wrap: wrap; }
.market-card .mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line-a08); }
.market-card .stars { display: flex; align-items: center; gap: 3px; color: var(--orange2); font-size: 10.5px; font-weight: 700; }
.market-card .stars svg { width: 12px; height: 12px; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 13px; }
.theme-card { overflow: hidden; padding: 0; }
.theme-card .th-prev { height: 92px; border-radius: 0; border: none; border-bottom: 1px solid var(--line-a14); }
.theme-card .th-body { padding: 11px 13px; }
.theme-card .th-name { font-size: 12.5px; font-weight: 700; color: var(--tx); display: flex; align-items: center; gap: 8px; }
.theme-card .th-sub { font-size: 10px; color: var(--tx3); font-family: var(--mono); margin-top: 2px; }
.theme-card .th-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 6px; }
.th-prev {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--pv-bg, var(--surface-2));
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    gap: 5px;
}

/* ── account / profile cards ── */
.acct-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.acct-cell {
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--line);
}
.acct-cell .ac-label { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tx3); }
.acct-cell .ac-value { font-size: 11.5px; font-family: var(--mono); color: var(--tx); margin-top: 3px; display: flex; align-items: center; gap: 6px; word-break: break-all; }
.ph-stat { padding: 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); }
.ph-stat .ps-val { font-size: 15px; font-weight: 800; font-family: var(--mono); color: var(--tx); }
.ph-stat .ps-label { font-size: 8.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tx3); margin-top: 2px; }
.setting-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-a08); }
.setting-item:last-child { border-bottom: none; }
.setting-item .set-info b { display: block; font-size: 12.5px; font-weight: 700; color: var(--tx); }

/* ── status indicators / banners ── */
.status-indicator { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-radius: 12px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.status-indicator.on { background: var(--green-a12); border: 1px solid var(--green-a30); color: var(--green2); }
.status-indicator.off { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--tx3); }
.warn-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border-radius: 12px;
    background: var(--orange-a12);
    border: 1px solid var(--orange-a30);
    color: var(--orange2);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 16px;
}
.recording-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--red-a12);
    border: 1px solid var(--red-a30);
    color: #FF8A96;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ── misc neutralization of leftover cyberpunk text fills ── */
.stat-value { font-size: 20px; font-weight: 700; font-family: var(--mono); color: var(--tx); }
.stat-value small { font-size: 11px; color: var(--tx3); font-family: var(--font); font-weight: 600; }
.stat-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tx3); margin-top: 3px; }
.up-box { flex: 1; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: 11px; padding: 10px 6px; text-align: center; }
.up-box .up-val { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--blue3); }
.up-box .up-label { font-size: 8.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--tx3); text-transform: uppercase; margin-top: 2px; }
.hero-head h1 { font-size: 22px; }
.hero-head p { font-size: 12px; color: var(--tx3); margin-top: 3px; display: flex; align-items: center; gap: 7px; }

/* ── responsive (kept last so it wins over the component layer) ── */
@media (max-width: 1280px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .rec-grid, .music-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .grid-3, .grid-4, .form-grid, .server-input-group { grid-template-columns: 1fr; }
    .ide-wrap, .builder-wrap { grid-template-columns: 1fr; height: auto; }
    .explorer, .builder-palette { max-height: 260px; }
    .node-body { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   XENTRO v3 · SHELL POLISH (token-driven premium layer)
   Elevated floating window depth, macOS titlebar, native nav pill,
   controlled content density and unified motion. Consumes --x-* tokens.
   ═══════════════════════════════════════════════════════════════ */

/* ── Floating application window ── */
.app-window {
    border-radius: var(--x-radius-xl);
    backdrop-filter: blur(var(--x-blur-lg)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--x-blur-lg)) saturate(1.4);
    box-shadow:
        0 0 0 1px var(--x-glass-border),
        0 2px 6px rgba(0,0,0,.18),
        0 14px 40px rgba(0,0,0,.32),
        0 40px 110px rgba(0,0,0,.48);
    position: relative;
}
.app-window::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 var(--x-glass-highlight), inset 0 0 0 1px color-mix(in srgb, #fff 4%, transparent);
}
.app-window:hover { box-shadow: 0 0 0 1px var(--x-glass-border), 0 18px 52px rgba(0,0,0,.36), 0 52px 130px rgba(0,0,0,.52); }

/* ── Title bar ── */
.titlebar {
    background: linear-gradient(180deg, rgba(10,16,28,.66), rgba(6,11,22,.28));
    border-bottom: 1px solid var(--x-border);
}
.tb-title { color: var(--x-text); font-weight: 650; letter-spacing: -.2px; }
.tb-sub { color: var(--x-text-faint); }

/* ── Navigation pill (native macOS rail) ── */
.nav-item {
    background: transparent;
    color: var(--x-text-muted);
    border-radius: 9px;
}
.nav-item svg { opacity: .9; }
.nav-item:hover { background: rgba(255,255,255,.045); color: var(--x-text); }
.nav-item.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--x-accent) 16%, transparent), color-mix(in srgb, var(--x-accent) 7%, transparent));
    color: var(--x-text);
    border: 1px solid color-mix(in srgb, var(--x-accent) 34%, transparent);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--x-accent) 22%, transparent), var(--x-glass-highlight);
}
.nav-item.active svg { color: var(--x-accent); }
.nav-item.active::before {
    left: -12px;
    width: 3px;
    background: linear-gradient(180deg, var(--x-accent), var(--x-cyan));
    box-shadow: 0 0 10px color-mix(in srgb, var(--x-cyan) 55%, transparent);
}

/* ── Content density: keep the composition balanced at ultra-wide ── */
.content {
    padding: 26px 30px 80px;
}
@media (min-width: 1900px) {
    .content { max-width: 1760px; margin: 0 auto; width: 100%; }
}

/* The shell is deliberately a floating window rather than a full-bleed page,
   but a flat 1380px cap turned a 2560px display into ~45% dead margin while
   the workspace inside it stayed cramped (the .content cap above could never
   apply). Grow the cap in two steps: wide displays gain usable width, and the
   content column above still stops line lengths from running away. */
@media (min-width: 1700px) {
    .app-window { max-width: 1560px; }
}
@media (min-width: 2200px) {
    .app-window { max-width: 1880px; }
}

/* ── Segmented filters / tabs — native iOS feel ── */
.seg, .tabs { border-color: var(--x-border); }
.seg-btn, .tab { border-radius: 8px; transition: background var(--x-fast) var(--x-ease-out), color var(--x-fast) var(--x-ease-out); }
.seg-btn.active, .tab.active { background: rgba(255,255,255,.09); box-shadow: var(--x-glass-highlight); color: var(--x-text); }

/* ── Motion system ── */
.card, .stat-mini, .cmd-card, .list-item, .menu-item, .ctx-menu, .dropdown-menu, .modal-content {
    transition: transform var(--x-base) var(--x-ease-out), box-shadow var(--x-base) var(--x-ease-out), border-color var(--x-base) var(--x-ease-out), background var(--x-base) var(--x-ease-out), opacity var(--x-base) var(--x-ease-out);
}
.toast, .modal-overlay, .modal-backdrop { animation-duration: var(--x-slow); }
.ctx-menu, .dropdown-menu { animation: menuIn var(--x-fast) var(--x-ease-out); }

/* ════════════════════════════════════════════════════════════════════
   NEW NAVIGATION & APP SHELL COMPONENTS
   ════════════════════════════════════════════════════════════════════ */

/* ── Titlebar Live Pill ── */
.tb-pill { position: relative; padding-left: 18px; }
.tb-pill-dot { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--green2); box-shadow: 0 0 8px var(--green2); animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ══════════════════════════════════════════════════════════════════════════
   APPLICATION SHELL — SINGLE SOURCE OF TRUTH FOR NAVIGATION LAYOUT

   The sidebar was previously described in three places (xentro.css, the block
   near the top of this file, and here), each with its own width, and the grid
   column was set independently of the <aside>'s own width. Whenever the two
   numbers diverged the layout broke:

     • collapsing shrank the aside to 64px while the grid still reserved 210px
       -> 146px of dead space,
     • below 1280px the aside was translated off-canvas while the grid STILL
       reserved 210px -> 210px of dead space with only a floating hamburger.

   One variable now drives both, and the aside simply fills its grid track, so
   they cannot disagree again.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --sidebar-expanded-width: 232px;
    --sidebar-collapsed-width: 68px;
    /* The live width. Everything reads this; nothing else sets a nav width. */
    --sidebar-w: var(--sidebar-expanded-width);
    --nav-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

.app-body {
    flex: 1;
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 0;
    position: relative;          /* containing block for the mobile drawer */
    transition: grid-template-columns 0.26s var(--nav-ease);
}

/* Desktop collapsed: the ONE state class. Set on .app-body so the grid and the
   rail change together in the same paint. */
.app-body.nav-collapsed { --sidebar-w: var(--sidebar-collapsed-width); }

.sidebar {
    width: 100%;                 /* fills the grid track — no second width */
    min-width: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
    border-right: 1px solid var(--line);
    backdrop-filter: blur(var(--blur-2));
    -webkit-backdrop-filter: blur(var(--blur-2));
}

/* ── Rail header: holds the collapse control, integrated into the sidebar
      itself rather than floating over the page. ── */
.side-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 6px 16px;
    min-height: 42px;
}
.side-head-title {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--tx3);
    opacity: 0.55;
    white-space: nowrap;
    transition: opacity 0.16s ease;
}
.app-body.nav-collapsed .side-head { justify-content: center; padding: 12px 8px 6px; }
.app-body.nav-collapsed .side-head-title { display: none; }

.side-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 0; }
.side-nav::-webkit-scrollbar { width: 4px; }
.side-nav::-webkit-scrollbar-thumb { background: var(--line-a20); border-radius: 4px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }

.nav-group { margin-bottom: 8px; }
.nav-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tx3);
    opacity: 0.6;
    padding: 12px 12px 4px 10px;
    white-space: nowrap;
    transition: opacity 0.18s ease;
}

.sidebar.collapsed .nav-label { opacity: 0; pointer-events: none; height: 0; padding: 0; overflow: hidden; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    /* No width:100% — combined with the 6px side margins the row was 12px wider
       than its container and got clipped by the rail's overflow. A flex/block
       child fills the remaining space on its own. */
    margin: 1px 8px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tx3);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.1px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s var(--nav-ease);
    text-decoration: none;
    position: relative;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
}

.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; transition: color 0.16s ease; color: inherit; }

.nav-item:hover {
    background: rgba(255, 255, 255, 0.055);
    color: var(--tx);
    border-color: rgba(255, 255, 255, 0.05);
}
.nav-item:active { transform: scale(0.985); }

/* Translucent accent pill. Uses the theme's own alpha tokens: the previous rule
   read --blue-rgb, which the theme engine never emits, so the active state was
   permanently hardcoded blue and ignored the selected theme. */
.nav-item.active {
    background: linear-gradient(180deg, var(--blue-a16), var(--blue-a07));
    border-color: var(--blue-a24);
    color: var(--blue3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 1px 10px var(--blue-a18);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--blue), var(--cyan));
    box-shadow: 0 0 10px var(--cyan-a50);
}

.nav-item.active svg { color: var(--blue3); }

/* Keyboard shortcut hint */
.nav-kbd {
    margin-left: auto;
    font-size: 8.5px;
    font-family: var(--mono);
    font-weight: 600;
    color: var(--tx3);
    opacity: 0.5;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    transition: opacity 0.16s ease;
}

.nav-item:hover .nav-kbd { opacity: 0.7; }
.sidebar.collapsed .nav-kbd { display: none; }

/* Live indicator for music */
.nav-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green2);
    box-shadow: 0 0 8px var(--green2);
    animation: livePulse 2s ease-in-out infinite;
    margin-left: auto;
}

.nav-badge {
    font-size: 7.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--red-a12);
    border: 1px solid var(--red-a30);
    color: var(--red);
    margin-left: auto;
}

/* Sidebar collapsed state */
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-kbd,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-live {
    display: none;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 9px;
    margin: 3px auto;
    width: 40px;
    border-radius: 11px;
}

.sidebar.collapsed .nav-item svg { width: 17px; height: 17px; }
/* In a 68px rail the pill alone reads as the active state; the left accent bar
   would sit outside the item and be clipped by the rail's overflow. */
.sidebar.collapsed .nav-item.active::before { display: none; }
/* Section rules replace the hidden section headings so groups stay legible. */
.sidebar.collapsed .nav-group + .nav-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

/* ── Collapse control, and the mobile menu button in the page header.
      The old .sidebar-toggle was position:fixed / left:14px / top:50%, i.e. a
      button floating in the middle of empty space, detached from the layout. ── */
.side-toggle,
.nav-menu-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.side-toggle:hover,
.nav-menu-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line);
    color: var(--tx);
}
.side-toggle:active, .nav-menu-btn:active { transform: scale(0.94); }
.side-toggle svg, .nav-menu-btn svg { width: 15px; height: 15px; }
/* The chevron points the way the rail will move. */
.side-toggle svg { transition: transform 0.26s var(--nav-ease); }
.app-body.nav-collapsed .side-toggle svg { transform: rotate(180deg); }

/* Header menu button is mobile-only; the rail's own control covers desktop. */
.nav-menu-btn { display: none; margin-right: 4px; }

/* Custom tooltip for the collapsed rail. A single node positioned by JS, so it
   is never clipped by the rail's own overflow and never shows a browser-default
   title bubble. */
.nav-tip {
    position: fixed;
    z-index: 90;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--surface-4, rgba(22, 27, 38, 0.96));
    border: 1px solid var(--line2);
    color: var(--tx);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-3, 0 10px 30px rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.nav-tip.show { opacity: 1; transform: translateX(0); }

/* Bottom account section */
.side-foot {
    border-top: 1px solid var(--line);
    padding: 10px 8px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar.collapsed .side-foot { padding: 10px 4px 14px; }

.side-fuser {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
    transition: 0.16s;
}

.side-fuser:hover { background: rgba(255, 255, 255, 0.06); }

.sf-avatar-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--line2);
}

.sf-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }

.sf-dot { position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--bg1); }
.sf-dot.online { background: var(--green2); box-shadow: 0 0 6px var(--green2); }
.sf-dot.idle { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.sf-dot.dnd { background: var(--red); box-shadow: 0 0 6px var(--red); }
.sf-dot.offline { background: var(--tx3); }

.sidebar.collapsed .sf-info { display: none; }
.sidebar.collapsed .side-fuser { justify-content: center; padding: 8px; }

.sf-info { min-width: 0; }
.sf-name { font-size: 11.5px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-sub { font-size: 9px; color: var(--tx3); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.side-logout {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
    flex-shrink: 0;
}

.sidebar.collapsed .side-logout { width: 32px; height: 32px; }

.side-logout svg { width: 13px; height: 13px; }
.side-logout:hover { background: rgba(255, 85, 85, 0.14); color: var(--red); }

/* ── PAGE HEADER ── */
.page-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(10, 16, 28, 0.45), rgba(10, 16, 28, 0.25));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.ph-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--tx3);
    flex-wrap: wrap;
    max-width: 100%;
    overflow: hidden;
}

.bc-item { display: inline-flex; align-items: center; gap: 4px; color: var(--tx3); text-decoration: none; padding: 3px 6px; border-radius: 6px; transition: 0.14s; }
.bc-item:hover { color: var(--tx); background: rgba(255, 255, 255, 0.04); }
.bc-item svg { width: 13px; height: 13px; }
.bc-sep { opacity: 0.5; font-size: 9px; pointer-events: none; }
.bc-current { color: var(--tx); font-weight: 600; font-size: 11px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.page-title-block { min-width: 0; }
.page-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--tx);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    line-height: 1.2;
}
.page-desc { font-size: 12px; color: var(--tx3); margin: 0; line-height: 1.4; }

.ph-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── GLOBAL STATUS BAR ── */
.global-status {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 20px;
    border-bottom: 1px solid var(--line);
    background: rgba(6, 11, 22, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gs-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: 100%;
    min-height: 32px;
}

.gs-sep {
    width: 1px;
    height: 16px;
    background: linear-gradient(180deg, transparent, var(--line), transparent);
    margin: 0 4px;
}

.gs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tx3); }
.gs-item.connected .gs-dot { background: var(--green2); box-shadow: 0 0 8px var(--green2); }
.gs-item.playing .gs-dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.gs-item.active .gs-dot { background: var(--blue3); box-shadow: 0 0 8px var(--blue3); }

.gs-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--tx3); }
.gs-value { font-size: 11px; font-weight: 500; color: var(--tx2); font-family: var(--mono); }

/* ── GLOBAL MINI PLAYER ── */
.mini-player {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* 480px could not fit the row: artwork + a 180px progress track + time +
       three controls + close already exceeded the content box, and .mp-info was
       the only shrinkable child — so the track title collapsed to 0px wide and
       the player showed artwork and buttons with no idea what was playing. */
    max-width: 560px;
    padding: 10px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(6, 11, 22, 0.72), rgba(4, 8, 16, 0.88));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-4);
    backdrop-filter: blur(var(--blur-4));
    -webkit-backdrop-filter: blur(var(--blur-4));
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
    opacity: 0;
    pointer-events: none;
}

.mini-player.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* A class selector outranks the UA's `[hidden] { display: none }`, so without
   this the player kept rendering while the attribute said it was hidden. */
.mini-player[hidden] { display: none; }

.mini-player::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.mp-artwork {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
}

.mp-artwork img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The title keeps a readable floor; the progress track is what gives way. */
.mp-info { flex: 1 1 auto; min-width: 112px; overflow: hidden; }
.mp-title { font-size: 12px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.mp-artist { font-size: 10.5px; color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mp-progress {
    position: relative;
    /* A fixed desktop track: letting it flex meant the title (which has a long
       content basis) took everything and the seek bar shrank to its 46px floor,
       which is not a usable click target. */
    flex: 0 0 110px;
    max-width: 180px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.mp-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--cyan));
    box-shadow: 0 0 8px var(--blue-a45);
    width: 0;
    transition: width 0.1s linear;
}

.mp-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-family: var(--mono);
    color: var(--tx3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.mp-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mp-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.14s ease;
}
.mp-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.mp-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--tx); }
.mp-btn.mp-play {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff;
    box-shadow: 0 4px 16px rgba(36, 136, 255, 0.4);
}
.mp-btn.mp-play:hover { filter: brightness(1.1); transform: scale(1.05); }
.mp-btn.mp-play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* Audio node unreachable: the queue still holds a track, but nothing is coming
   out of the node. The transport stays where it is instead of pretending to
   drive playback, and the artist line says why (set by MiniPlayer.poll). */
.mini-player.mp-stalled .mp-controls { opacity: .45; }
.mini-player.mp-stalled .mp-btn.mp-play {
    background: linear-gradient(135deg, var(--orange, #ffb020), #c98510);
    box-shadow: 0 4px 16px rgba(255, 176, 32, .28);
}
.mini-player.mp-stalled .mp-progress-bar { background: var(--orange, #ffb020); opacity: .5; }

.mp-close {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.14s;
    flex-shrink: 0;
    margin-left: 4px;
}
.mp-close:hover { background: rgba(255, 85, 85, 0.12); color: var(--red); }
.mp-close svg { width: 12px; height: 12px; }

/* ── COMMAND PALETTE ── */
.cmd-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.cmd-palette-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

.cmd-palette {
    width: 100%;
    max-width: 620px;
    margin: 0 24px;
    background: var(--surface-5);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--shadow-5);
    backdrop-filter: blur(var(--blur-5));
    -webkit-backdrop-filter: blur(var(--blur-5));
    overflow: hidden;
    animation: scaleAppear 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cmd-palette::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.cp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.cp-header svg { width: 18px; height: 18px; color: var(--tx3); flex-shrink: 0; }

.cmd-input {
    flex: 1;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--tx);
    font-family: var(--font);
    font-size: 15px;
    outline: none;
    padding: 0;
}

.cmd-input::placeholder { color: var(--tx3); }

.cp-hint {
    font-size: 10px;
    font-family: var(--mono);
    font-weight: 600;
    color: var(--tx3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.cp-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px;
}

.cp-results::-webkit-scrollbar { width: 4px; }
.cp-results::-webkit-scrollbar-thumb { background: var(--line-a20); border-radius: 4px; }
.cp-results::-webkit-scrollbar-track { background: transparent; }

.cp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--tx2);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s ease;
    text-decoration: none;
}

.cp-item:hover,
.cp-item.selected {
    background: rgba(255, 255, 255, 0.06);
    color: var(--tx);
}

.cp-item svg { width: 17px; height: 17px; color: var(--blue3); flex-shrink: 0; }

.cp-item-title { font-weight: 500; }
.cp-item-desc { font-size: 11px; color: var(--tx3); margin-top: 1px; }

.cp-item-shortcut {
    margin-left: auto;
    font-size: 9.5px;
    font-family: var(--mono);
    color: var(--tx3);
    opacity: 0.6;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
}

.cp-section {
    padding: 4px 12px 2px;
}

.cp-section-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tx3);
    opacity: 0.7;
}

.cp-divider { height: 1px; background: var(--line); margin: 6px 8px; }

.cp-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.cp-hint-text { font-size: 10.5px; color: var(--tx3); }

/* ── TOAST SYSTEM ── */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 380px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tx);
    background: var(--surface-4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-4);
    backdrop-filter: blur(var(--blur-4));
    -webkit-backdrop-filter: blur(var(--blur-4));
    animation: toastIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

.toast.ok::before { background: var(--green2); }
.toast.err::before { background: var(--red); }
.toast.warn::before { background: var(--orange); }
.toast.info::before { background: var(--blue); }

.toast svg { width: 15px; height: 15px; flex-shrink: 0; }
.toast.ok svg { color: var(--green2); }
.toast.err svg { color: var(--red); }
.toast.warn svg { color: var(--orange); }
.toast.info svg { color: var(--blue); }

.toast-title { font-weight: 600; flex: 1; }
.toast-msg { font-size: 12.5px; color: var(--tx2); line-height: 1.4; }

.toast-close {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.12s;
    flex-shrink: 0;
}
.toast-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--tx); }
.toast-close svg { width: 11px; height: 11px; }

/* The element Toast.show() builds is <div class="toast-prog-bar">, so the old
   `.toast.prog-bar` (an element carrying BOTH classes) never matched anything
   and the duration countdown was invisible. */
.toast .toast-prog-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 12px 12px;
    background: currentColor;
    opacity: 0.5;
    animation: toastProgress linear forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(30px) translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

.toast.leaving { animation: toastOut 0.2s ease forwards; }

@keyframes toastOut {
    to { opacity: 0; transform: translateX(20px) translateY(-10px); }
}

/* ── PAGE TRANSITIONS ── */
.page-transition-wrapper {
    position: relative;
    width: 100%;
    animation: pageFadeIn 0.22s var(--x-ease-out);
}

.page-transition-wrapper.exiting {
    animation: pageFadeOut 0.18s var(--x-ease-in) forwards;
}

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

@keyframes pageFadeOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-6px); }
}

/* Slide variant for deeper pages */
.page-transition-wrapper.slide-in {
    animation: pageSlideIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-transition-wrapper.slide-out {
    animation: pageSlideOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pageSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: none; }
}

@keyframes pageSlideOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateX(-20px); }
}

/* ── RESPONSIVE ── */

/* Single owner for the page title.
   The application shell renders breadcrumb + title + description, but 21 views
   still carry their own in-page .page-head block (which also holds that page's
   action buttons, e.g. Import JSON / New Theme / Refresh). The result was every
   one of those pages printing its title twice. Where a page provides its own
   head, the shell yields the title and keeps the breadcrumb, status strip and
   action slot, so nothing is duplicated and no page loses its controls. */
body:has(.page-head) .page-title-block { display: none; }
body:has(.page-head) .page-header { padding-top: 10px; padding-bottom: 10px; }

@media (max-width: 1440px) {
    .page-header { padding: 10px 18px; }
    .global-status { padding: 6px 16px; }
    .gs-item { padding: 0 12px; }
    /* The labels used to be hidden here, which left the strip reading
       "Disconnected · Idle · Active" with nothing saying what each one was.
       There is ample room at 1440 and 1366 — only tighten the type. */
    .gs-label { font-size: 9.5px; letter-spacing: 0.6px; }
    .content { padding: 20px 22px; }
}

/* The status strip keeps its labels down to phone widths — the drawer means the
   content now has the full window at these sizes, and hiding both the label and
   the value left three unlabelled dots. */
@media (max-width: 640px) {
    .gs-label { display: none; }
}

/* ══ SMALL SCREENS: the rail becomes an overlay drawer ══
   The previous rule here was `.sidebar:not(.collapsed) { translateX(-100%) }`,
   which inverted the semantics — an EXPANDED sidebar was hidden and only a
   collapsed one stayed visible — while the grid kept reserving a full column
   for the off-canvas rail. That is the state the navigation was stuck in.

   Now the grid track goes to zero (content reclaims the space) and the drawer is
   positioned inside .app-body, so it stays within the rounded app window. */
@media (max-width: 1080px) {
    /* One track only. The drawer is absolutely positioned, so it is no longer a
       grid item — with two tracks, .main-col became the FIRST item and got laid
       out inside the 0px column (a 36px-wide page header with the hamburger
       stacked above the actions). */
    .app-body,
    .app-body.nav-collapsed {
        --sidebar-w: 0px;
        grid-template-columns: minmax(0, 1fr);
    }
    .main-col { grid-column: 1 / -1; }

    .nav-menu-btn { display: flex; }

    .sidebar {
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--sidebar-expanded-width);
        z-index: 40;
        border-right: 1px solid var(--line2);
        box-shadow: none;
        transform: translateX(-100%);
        transition: transform 0.28s var(--nav-ease), box-shadow 0.28s ease;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
    }

    /* A drawer is always the full navigation, never the icon rail. */
    .sidebar.collapsed { width: var(--sidebar-expanded-width); }
    .sidebar.collapsed .nav-item span,
    .sidebar.collapsed .nav-kbd,
    .sidebar.collapsed .nav-badge,
    .sidebar.collapsed .nav-live,
    .sidebar.collapsed .sf-info { display: revert; }
    .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 8px 10px; margin: 1px 6px; }
    .sidebar.collapsed .nav-label { opacity: 0.6; height: auto; padding: 12px 12px 4px 10px; }
    .side-toggle { display: none; }

    .sidebar-overlay {
        position: absolute;
        inset: 0;
        z-index: 39;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.24s ease, visibility 0.24s ease;
    }
    .sidebar-overlay.visible { opacity: 1; visibility: visible; }
}

/* Outside the drawer breakpoint the overlay must never intercept clicks. */
@media (min-width: 1081px) {
    .sidebar-overlay { display: none; }
}

@media (max-width: 900px) {
    .mini-player {
        left: 12px;
        right: 12px;
        max-width: none;
        transform: translateX(0) translateY(100px);
    }
    .mini-player.visible { transform: translateX(0) translateY(0); }
    /* Full-width player: the track may use the room the title does not need. */
    .mp-progress { flex: 1 1 120px; max-width: 100%; }
}

@media (max-width: 640px) {
    .page-header { padding: 8px 14px; }
    .page-title { font-size: 16px; }
    .breadcrumb { display: none; }
    .cmd-palette { margin: 0 12px; }
    .content { padding: 16px 16px 80px; }
    #xentro-root { padding: 12px; }
}