:root {
    --app-sidebar-width: 17.5rem;
    --app-sidebar-collapsed-width: 5rem;
    --app-bg: #080b13;
    --app-panel: #111624;
    --app-border: #293145;
    --app-text: #f4f6fb;
    --app-muted: #929bb0;
    --app-accent: #7667ff;
}

.app-body {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    color: var(--app-text);
    background: var(--app-bg);
}

.app-shell { min-height: 100vh; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    width: var(--app-sidebar-width);
    padding: 1.25rem 1rem 1rem;
    overflow-y: auto;
    flex-direction: column;
    border-right: 1px solid var(--app-border);
    background: rgba(11, 15, 25, 0.97);
    box-shadow: 1rem 0 3rem rgba(0, 0, 0, 0.14);
}

.sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0.2rem 1.3rem;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

.app-brand-mark {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: 0.85rem;
    background: linear-gradient(145deg, #8c80ff, #5143dc);
    box-shadow: 0 0 1.8rem rgba(118, 103, 255, 0.3);
    font-weight: 850;
}

.app-brand strong, .app-brand small,
.mobile-topbar strong, .mobile-topbar small,
.app-nav-link strong, .app-nav-link small { display: block; }
.app-brand small, .mobile-topbar small { margin-top: 0.12rem; color: var(--app-muted); font-size: 0.68rem; }

.sidebar-label {
    margin: 0 0 0.55rem;
    color: #697287;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.15em;
}

.app-nav { display: grid; gap: 0.45rem; }
.app-nav .sidebar-label { padding-left: 0.65rem; }
.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: var(--app-muted);
    border: 1px solid transparent;
    border-radius: 0.8rem;
    text-decoration: none;
    transition: 140ms ease;
}
.app-nav-link:hover { color: var(--app-text); background: rgba(255, 255, 255, 0.035); }
.app-nav-link.active {
    color: var(--app-text);
    border-color: rgba(118, 103, 255, 0.45);
    background: rgba(118, 103, 255, 0.13);
}
.app-nav-link small { margin-top: 0.18rem; color: #737d93; font-size: 0.66rem; }
.nav-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.6rem;
    background: #191f2e;
    font-size: 1rem;
    font-weight: 800;
}
.app-nav-link.active .nav-icon { color: #ddd8ff; background: rgba(118, 103, 255, 0.25); }

.sidebar-spacer { flex: 1; min-height: 2rem; }

.sidebar-auth {
    display: block;
    padding: 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: #0e1320;
}
.sidebar-auth-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.sidebar-auth-heading h2 { margin: 0; font-size: 0.88rem; }
.app-sidebar .login-panel-toggle {
    padding: 0.1rem;
    color: var(--app-muted);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 0.68rem;
}
.app-sidebar .topbar-controls.collapsed .key-control { display: none; }
.app-sidebar .key-control {
    display: flex;
    margin-top: 0.8rem;
    align-items: stretch;
    flex-direction: column;
    gap: 0.55rem;
}
.app-sidebar .key-control > label:first-child { color: var(--app-muted); font-size: 0.68rem; }
.app-sidebar .key-field { display: grid; gap: 0.45rem; min-width: 0; }
.app-sidebar .key-actions { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0.45rem; }
.app-sidebar .key-control input { width: 100%; min-width: 0; }
.app-sidebar .remember-key {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 0.4rem;
    color: var(--app-muted);
    cursor: pointer;
    font-size: 0.67rem;
}
.app-sidebar .remember-key input { width: auto; min-height: auto; margin: 0; }
.app-sidebar .status { align-self: flex-start; }

.sidebar-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0.35rem 0;
    color: #596276;
    font-size: 0.62rem;
}

.app-stage {
    height: 100vh;
    margin-left: var(--app-sidebar-width);
    padding-inline: 1.5rem;
    box-sizing: border-box;
    overflow: auto;
    scrollbar-gutter: stable;
}
.app-main {
    width: min(1440px, 100%);
    min-width: 64rem;
    max-width: none;
    margin: 0 auto;
    padding: 2.25rem 0 5rem;
}

.mobile-topbar { display: none; }
.sidebar-icon-button {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: 0.7rem;
    place-items: center;
    background: #121827;
    cursor: pointer;
    font-size: 1.2rem;
}
.sidebar-close { display: none; }
.sidebar-collapse { width: 2rem; height: 2rem; font-size: 1.15rem; }
.sidebar-backdrop { display: none; }

.app-stage::-webkit-scrollbar { width: 0.7rem; height: 0.7rem; }
.app-stage::-webkit-scrollbar-track { background: #090d16; }
.app-stage::-webkit-scrollbar-thumb { border: 2px solid #090d16; border-radius: 999px; background: #343d53; }
.app-stage::-webkit-scrollbar-thumb:hover { background: #4a5572; }

@media (min-width: 901px) {
    .app-sidebar, .app-stage { transition: width 180ms ease, margin-left 180ms ease; }
    .sidebar-collapsed .app-sidebar {
        width: var(--app-sidebar-collapsed-width);
        padding-inline: 0.75rem;
        overflow: hidden;
    }
    .sidebar-collapsed .app-stage { margin-left: var(--app-sidebar-collapsed-width); }
    .sidebar-collapsed .sidebar-heading { justify-content: center; padding-inline: 0; }
    .sidebar-collapsed .app-brand-mark { width: 2.5rem; height: 2.5rem; }
    .sidebar-collapsed .sidebar-collapse {
        position: absolute;
        top: 4.2rem;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 999px;
        background: #1b2233;
    }
    .sidebar-collapsed .sidebar-collapsible,
    .sidebar-collapsed .app-nav .sidebar-label,
    .sidebar-collapsed .sidebar-auth,
    .sidebar-collapsed .sidebar-footer { display: none; }
    .sidebar-collapsed .app-nav { margin-top: 3rem; }
    .sidebar-collapsed .app-nav-link { justify-content: center; padding: 0.55rem; }
}

@media (max-width: 900px) {
    .app-sidebar {
        width: min(86vw, 19rem);
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }
    .sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-close { display: grid; }
    .sidebar-collapse { display: none; }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: block;
        visibility: hidden;
        opacity: 0;
        border: 0;
        background: rgba(3, 5, 10, 0.72);
        transition: 180ms ease;
    }
    .sidebar-open .sidebar-backdrop { visibility: visible; opacity: 1; }
    .app-stage {
        height: auto;
        min-height: 100vh;
        margin-left: 0;
        padding-inline: 0;
        overflow: visible;
    }
    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        min-height: 4.2rem;
        padding: 0.75rem 1rem;
        align-items: center;
        gap: 0.8rem;
        border-bottom: 1px solid var(--app-border);
        background: rgba(8, 11, 19, 0.92);
        backdrop-filter: blur(16px);
    }
    .mobile-build { margin-left: auto; color: #657086; font: 0.6rem ui-monospace, monospace; }
    .app-main { width: min(100% - 1.25rem, 1440px); min-width: 0; padding-top: 1.25rem; }
    .sidebar-open { overflow: hidden; }
}