/* Susyymails Design System - Background & Tokens (v40.0 - 2026-07)
   ----------------------------------------------------------------
   Performance-first, GPU-friendly. Tokens drive EVERY page.
   Class names preserved for JS compatibility.
   ---------------------------------------------------------------- */

/* ===== Tokens ===== */
:root {
    /* Brand */
    --brand-50:  #eef4ff;
    --brand-100: #d9e4ff;
    --brand-200: #b8caff;
    --brand-300: #8eaaff;
    --brand-400: #6480ff;
    --brand-500: #4a5cf2;
    --brand-600: #3a48d0;
    --brand-700: #2e37a8;
    --brand-800: #252d82;
    --brand-900: #1a1f55;

    --accent-500: #a855f7;     /* primary CTA gradient endpoint */
    --accent-600: #7c3aed;     /* primary CTA gradient start */
    --accent-glow: rgba(168, 85, 247, 0.45);
    --accent-soft: rgba(168, 85, 247, 0.12);
    --accent-line: rgba(168, 85, 247, 0.32);
    --accent-cyan: #22d3ee;
    --accent-cyan-glow: rgba(34, 211, 238, 0.32);

    /* Surfaces (Dark default) */
    --canvas: #05060a;
    --canvas-elevated: #0a0d16;
    --surface-1: rgba(255, 255, 255, 0.025);
    --surface-2: rgba(255, 255, 255, 0.045);
    --surface-3: rgba(255, 255, 255, 0.075);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --surface-active: rgba(255, 255, 255, 0.09);

    /* Borders */
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.14);
    --line-soft: rgba(255, 255, 255, 0.04);
    --line-accent: rgba(168, 85, 247, 0.42);

    /* Text */
    --text: #e8ebf5;
    --text-strong: #ffffff;
    --text-muted: rgba(232, 235, 245, 0.62);
    --text-faint: rgba(232, 235, 245, 0.42);
    --text-disabled: rgba(232, 235, 245, 0.28);

    /* Status */
    --success-500: #2dd4a4;
    --success-600: #14b888;
    --success-bg: rgba(45, 212, 164, 0.10);

    --warning-500: #f5b14a;
    --warning-600: #d68a1e;
    --warning-bg: rgba(245, 177, 74, 0.10);

    --danger-500: #ff5b6b;
    --danger-600: #e03950;
    --danger-bg: rgba(255, 91, 107, 0.10);

    --info-500: #4cc4ff;
    --info-bg: rgba(76, 196, 255, 0.10);

    /* Background hues (kept names so JS hooks still work) */
    --auth-mint: #2dd4a4;
    --auth-amber: #f5b14a;
    --auth-coral: #ff6b4a;
    --auth-sky: #4cc4ff;

    /* Radius */
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-2xl: 36px;

    /* Space */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Shadow */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 14px 40px rgba(124, 58, 237, 0.32);
    --shadow-glow-strong: 0 0 0 1px rgba(168, 85, 247, 0.42), 0 18px 60px rgba(124, 58, 237, 0.55);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 400ms;

    /* Type */
    --font-sans: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Inter", "Space Grotesk", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Layout */
    --sidebar-w: 280px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 72px;
}

/* ===== Light Mode (optional toggle) ===== */
body.theme-light {
    --canvas: #f6f7fb;
    --canvas-elevated: #ffffff;
    --surface-1: rgba(15, 19, 36, 0.025);
    --surface-2: rgba(15, 19, 36, 0.04);
    --surface-3: rgba(15, 19, 36, 0.07);
    --surface-hover: rgba(15, 19, 36, 0.05);
    --surface-active: rgba(15, 19, 36, 0.09);
    --line: rgba(15, 19, 36, 0.08);
    --line-strong: rgba(15, 19, 36, 0.16);
    --line-soft: rgba(15, 19, 36, 0.04);
    --text: #1a1d2e;
    --text-strong: #0a0d1f;
    --text-muted: rgba(26, 29, 46, 0.62);
    --text-faint: rgba(26, 29, 46, 0.45);
}

/* ===== Background: GPU-friendly Three.js driven "Shambhala" layer ===== */
.page-bg,
.page-bg::before,
.page-bg::after {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    contain: strict;
}

.page-bg {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 12%, rgba(168, 85, 247, 0.14), transparent 30%),
        radial-gradient(circle at 92% 88%, rgba(34, 211, 238, 0.10), transparent 32%),
        radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.05), transparent 55%),
        linear-gradient(160deg, #05030d 0%, #0a0716 55%, #06050f 100%);
}

.bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.45) 100%);
}

.bg-noise {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
}

.bg-glow {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.22;
    will-change: transform;
    transform: translateZ(0);
    mix-blend-mode: screen;
}

.bg-glow-one {
    top: -20vw;
    left: -15vw;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.85) 0%, transparent 60%);
    animation: bgFloat1 24s ease-in-out infinite alternate;
}

.bg-glow-two {
    bottom: -25vw;
    right: -20vw;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.75) 0%, transparent 60%);
    animation: bgFloat2 30s ease-in-out infinite alternate;
}

@keyframes bgFloat1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(15vw, 10vh, 0) scale(1.15); }
}
@keyframes bgFloat2 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-12vw, -8vh, 0) scale(1.2); }
}

/* Subtle mesh grid */
.page-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.10;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Vignette */
.page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.40) 100%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bg-glow { animation: none !important; }
    .bg-starfield, .bg-shooting-stars { animation: none !important; }
    .bg-star { animation: none !important; }
}

/* ===== Always-on CSS starfield + shooting stars (no JS required) =====
   Layered above the gradient base but below content. Animates
   immediately on first paint, so even on slow CDN fetches the
   user sees motion. Three.js upgrades on top of this when ready. */

.bg-starfield {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image:
        radial-gradient(1.2px 1.2px at 12% 18%,  rgba(255,255,255,0.95), transparent 60%),
        radial-gradient(1px   1px   at 27% 42%,  rgba(196,181,253,0.9), transparent 60%),
        radial-gradient(1.4px 1.4px at 51% 11%,  rgba(255,255,255,0.9),  transparent 60%),
        radial-gradient(1px   1px   at 68% 33%,  rgba(196,181,253,0.85),transparent 60%),
        radial-gradient(1.2px 1.2px at 82% 22%,  rgba(255,255,255,0.9),  transparent 60%),
        radial-gradient(1px   1px   at 8%  62%,  rgba(196,181,253,0.85),transparent 60%),
        radial-gradient(1.4px 1.4px at 22% 78%,  rgba(255,255,255,0.95), transparent 60%),
        radial-gradient(1px   1px   at 39% 56%,  rgba(255,255,255,0.8),  transparent 60%),
        radial-gradient(1.2px 1.2px at 58% 71%,  rgba(196,181,253,0.85),transparent 60%),
        radial-gradient(1px   1px   at 73% 86%,  rgba(255,255,255,0.85), transparent 60%),
        radial-gradient(1.4px 1.4px at 91% 64%,  rgba(196,181,253,0.85),transparent 60%),
        radial-gradient(1px   1px   at 95% 9%,   rgba(255,255,255,0.9),  transparent 60%),
        radial-gradient(1px   1px   at 14% 92%,  rgba(255,255,255,0.7),  transparent 60%),
        radial-gradient(1px   1px   at 44% 30%,  rgba(196,181,253,0.8), transparent 60%),
        radial-gradient(1px   1px   at 65% 5%,   rgba(255,255,255,0.85), transparent 60%),
        radial-gradient(1px   1px   at 33% 14%,  rgba(255,255,255,0.7),  transparent 60%),
        radial-gradient(1px   1px   at 78% 49%,  rgba(196,181,253,0.8), transparent 60%),
        radial-gradient(1px   1px   at 4%  44%,  rgba(255,255,255,0.8),  transparent 60%),
        radial-gradient(1px   1px   at 87% 77%,  rgba(255,255,255,0.7),  transparent 60%);
    background-repeat: no-repeat;
    animation: starDrift 90s linear infinite;
    will-change: transform;
    transform: translateZ(0);
    opacity: 0.9;
}

@keyframes starDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-30px, -20px, 0); }
}

/* Per-star twinkle layer — individual stars that pulse in/out */
.bg-twinkle {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.bg-star {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px rgba(255,255,255,0.9), 0 0 8px rgba(196,181,253,0.5);
    animation: starTwinkle var(--dur, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    opacity: 0.85;
}
.bg-star.t1 { width: 1.5px; height: 1.5px; }
.bg-star.t2 { width: 2.5px; height: 2.5px; box-shadow: 0 0 6px rgba(196,181,253,0.95), 0 0 12px rgba(124,58,237,0.45); background: #e9defc; }
.bg-star.t3 { width: 1px;   height: 1px;   box-shadow: 0 0 3px rgba(255,255,255,0.8); }

@keyframes starTwinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.25); }
}

/* Shooting stars */
.bg-shooting-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.bg-shoot {
    position: absolute;
    width: 140px;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(196,181,253,0.7) 70%, rgba(255,255,255,0) 100%);
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.85)) drop-shadow(0 0 12px rgba(196,181,253,0.6));
    opacity: 0;
    transform-origin: left center;
    animation: shootAcross var(--shoot-dur, 1.6s) cubic-bezier(0.4, 0.0, 0.6, 1) infinite;
    animation-delay: var(--shoot-delay, 0s);
}
@keyframes shootAcross {
    0%   { transform: translate3d(0, 0, 0) rotate(var(--shoot-angle, 20deg)) scaleX(0.4); opacity: 0; }
    10%  { opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: translate3d(700px, 260px, 0) rotate(var(--shoot-angle, 20deg)) scaleX(1); opacity: 0; }
}

/* Three.js canvas sits above the CSS layers */
.shambhala-canvas, .sky-space-canvas {
    z-index: 1 !important;
}

/* ===== Reusable surfaces / generic classes (used by portal pages) ===== */

/* Card / panel design applied to legacy .panel / .card / .sidebar-note / etc. */
.panel,
.sidebar-note,
.modal-dialog,
.login-panel {
    position: relative;
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        var(--canvas-elevated);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.panel::before,
.modal-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.12), transparent 40%, rgba(255, 255, 255, 0.06));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}

/* Generic typography */
body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-strong);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    font-weight: 700;
}

a { color: var(--accent-500); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-300); }

::selection {
    background: rgba(106, 130, 255, 0.4);
    color: var(--text-strong);
}

/* ===== Button system (used everywhere) ===== */
button, .btn, .primary-btn, .secondary-btn, .danger-btn, .ghost-btn, .submit-btn, .fetch-submit, .logout-btn {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.005em;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition:
        transform var(--dur-fast) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
    transform: translateZ(0);
    will-change: transform;
    user-select: none;
}

button:focus-visible, .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 130, 255, 0.35);
}

button:disabled, .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.primary-btn {
    background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: var(--shadow-glow);
    position: relative;
    overflow: hidden;
}
.primary-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-500), var(--brand-300));
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}
.primary-btn > * { position: relative; z-index: 1; }
.primary-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-strong); }
.primary-btn:hover::before { opacity: 1; }
.primary-btn:active { transform: translateY(0); }
.primary-btn.primary-btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 14px; }

.secondary-btn {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--line);
}
.secondary-btn:hover {
    background: var(--surface-3);
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

.danger-btn {
    background: rgba(255, 91, 107, 0.10);
    color: var(--danger-500);
    border-color: rgba(255, 91, 107, 0.30);
}
.danger-btn:hover {
    background: rgba(255, 91, 107, 0.18);
    border-color: rgba(255, 91, 107, 0.50);
    transform: translateY(-1px);
}
.danger-btn:disabled {
    color: var(--text-disabled);
    border-color: var(--line);
}

.ghost-btn {
    background: transparent;
    color: var(--text-muted);
}
.ghost-btn:hover { background: var(--surface-2); color: var(--text); }

.logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 12px 16px;
    background: var(--surface-1);
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    font-weight: 500;
    margin-top: 18px;
}
.logout-btn:hover {
    color: var(--danger-500);
    background: var(--danger-bg);
    border-color: rgba(255, 91, 107, 0.28);
}

/* ===== Form fields ===== */
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.field-full { grid-column: 1 / -1; }
.field label,
.field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.field input,
.field textarea,
.field select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    background: var(--surface-1);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    min-height: 44px;
    outline: none;
    transition:
        border-color var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
    width: 100%;
}
.field input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--text-faint); }

.field input:hover,
input:hover,
textarea:hover,
select:hover {
    border-color: var(--line-strong);
}

.field input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-500);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px rgba(106, 130, 255, 0.18);
}

input[type="checkbox"], input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line-strong);
    border-radius: 5px;
    background: var(--surface-1);
    cursor: pointer;
    position: relative;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
    border-color: var(--accent-500);
}
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}
input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}

.field small, small {
    color: var(--text-faint);
    font-size: 12px;
    line-height: 1.5;
}

/* ===== Table ===== */
.table-wrap {
    border-radius: var(--r-md);
    overflow: auto;
    border: 1px solid var(--line);
    background: var(--canvas-elevated);
    max-height: 65vh;
}
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}
table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
table th {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
    background: rgba(255, 255, 255, 0.02);
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
    vertical-align: middle;
}
table tbody tr {
    transition: background var(--dur-fast) var(--ease-out);
}
table tbody tr:hover {
    background: var(--surface-1);
}

/* Status badges */
.status-badge, .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    border: 1px solid transparent;
}
.status-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px currentColor;
    filter: blur(0.5px);
    opacity: 0.65;
}
.status-active, .badge-success { background: var(--success-bg); color: var(--success-500); border-color: rgba(45, 212, 164, 0.25); }
.status-inactive { background: rgba(150, 150, 150, 0.10); color: var(--text-muted); border-color: var(--line); }
.status-suspended, .badge-danger { background: var(--danger-bg); color: var(--danger-500); border-color: rgba(255, 91, 107, 0.30); }
.status-expired, .badge-warning { background: var(--warning-bg); color: var(--warning-500); border-color: rgba(245, 177, 74, 0.30); }
.badge-info { background: var(--info-bg); color: var(--info-500); border-color: rgba(76, 196, 255, 0.30); }

/* ===== Sidebar ===== */
.sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%),
        rgba(10, 13, 22, 0.85);
    border-right: 1px solid var(--line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-link {
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
}
.nav-link::before {
    content: "";
    width: 4px; height: 18px;
    border-radius: 999px;
    background: transparent;
    transition: background var(--dur-base) var(--ease-out);
}
.nav-link:hover {
    background: var(--surface-2);
    color: var(--text);
}
.nav-link.active {
    background: linear-gradient(90deg, rgba(106, 130, 255, 0.18), rgba(106, 130, 255, 0.05));
    color: var(--text-strong);
    border-color: rgba(106, 130, 255, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.nav-link.active::before {
    background: linear-gradient(180deg, var(--accent-500), var(--accent-glow));
    box-shadow: 0 0 12px var(--accent-glow);
}

/* Two-line nav-link with hint */
.nav-link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  min-width: 0;
}
.nav-link-label {
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}
.nav-link-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.85;
}
.nav-link:hover .nav-link-hint { color: var(--text); opacity: 1; }
.nav-link.active .nav-link-hint { color: var(--text); opacity: 0.92; }


/* ===== Modals ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal.hidden { display: none; }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fadeIn 0.2s var(--ease-out);
}
.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow: auto;
    padding: 24px;
    animation: modalIn 0.32s var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Empty state, feedback, generated boxes ===== */
.empty-state-box, .email-empty-state {
    padding: 32px;
    text-align: center;
    color: var(--text-faint);
    border-radius: var(--r-md);
    border: 1px dashed var(--line);
    background: var(--surface-1);
    font-size: 14px;
}

.feedback, .form-feedback {
    min-height: 18px;
    font-size: 13px;
    color: var(--text-muted);
}
.feedback.error, .form-feedback.error { color: var(--danger-500); }
.feedback.success, .form-feedback.success { color: var(--success-500); }

.generated-box {
    margin-top: 18px;
    padding: 18px;
    border-radius: var(--r-md);
    border: 1px solid rgba(45, 212, 164, 0.30);
    background: linear-gradient(135deg, rgba(45, 212, 164, 0.08), rgba(45, 212, 164, 0.02));
}
.generated-box.hidden { display: none; }

/* ===== Skeletons ===== */
.skeleton {
    background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 8px;
}
@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ===== Toast/Notification ===== */
.toast-host {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(20, 24, 38, 0.94);
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
    color: var(--text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.32s var(--ease-bounce);
    max-width: 360px;
}
.toast.success { border-color: rgba(45, 212, 164, 0.4); }
.toast.error { border-color: rgba(255, 91, 107, 0.4); }
.toast.warning { border-color: rgba(245, 177, 74, 0.4); }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Pagination ===== */
.pagination-wrap {
    margin-top: 18px;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.pagination-wrap button {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--surface-1);
    color: var(--text-muted);
    border: 1px solid var(--line);
    font-size: 13px;
}
.pagination-wrap button:hover { background: var(--surface-2); color: var(--text); }
.pagination-wrap button.active {
    background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-glow);
}
.pagination-wrap button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== Helpers ===== */
.hidden { display: none !important; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.spacer { flex: 1; }

/* ===== Fetch-console (used on public.php, inbox.php, reseller_inbox.php, dashboard, public_fetch_tool) ===== */
.fetch-console {
    border-radius: var(--r-xl);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--canvas-elevated);
    border: 1px solid var(--line);
    padding: 28px;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.fetch-console-head { margin-bottom: 22px; }
.fetch-console-title { font-size: 24px; margin: 4px 0 0; }
.fetch-console-body { display: flex; flex-direction: column; gap: 22px; }
.fetch-field { display: flex; flex-direction: column; gap: 8px; }
.fetch-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }

.fetch-input {
    background: var(--surface-1);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 18px;
    min-height: 52px;
    font-size: 15px;
    outline: none;
    transition: all var(--dur-base) var(--ease-out);
}
.fetch-input:focus {
    border-color: var(--accent-500);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px rgba(106, 130, 255, 0.18);
}

.fetch-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.fetch-type-card { cursor: pointer; }
.fetch-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.fetch-type-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: var(--r-md);
    background: var(--surface-1);
    border: 1px solid var(--line);
    transition: all var(--dur-base) var(--ease-out);
    text-align: center;
}
.fetch-type-card:hover .fetch-type-card-body {
    background: var(--surface-2);
    border-color: var(--line-strong);
    transform: translateY(-2px);
}
.fetch-type-card input:checked + .fetch-type-card-body {
    background: linear-gradient(135deg, rgba(106, 130, 255, 0.18), rgba(106, 130, 255, 0.05));
    border-color: var(--accent-500);
    box-shadow: 0 0 0 1px rgba(106, 130, 255, 0.40), 0 8px 24px rgba(74, 92, 242, 0.18);
}
.fetch-type-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.fetch-type-label {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

.fetch-submit {
    background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: var(--shadow-glow);
    min-height: 52px;
    position: relative;
    overflow: hidden;
}
.fetch-submit:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow-strong); }
.fetch-submit:disabled {
    background: var(--surface-2);
    color: var(--text-muted);
    box-shadow: none;
}
.fetch-submit-compact { padding: 14px 22px; min-height: 46px; font-size: 14px; }

/* ===== Page specific auxiliary ===== */

/* Help drawer (public.php has this) */
.help-floating-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: rgba(16, 13, 39, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-md);
}
.help-floating-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent-500);
    box-shadow: var(--shadow-glow);
}

.help-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(4, 3, 13, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
}
.help-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.help-drawer {
    position: fixed;
    top: 0;
    right: -440px;
    width: 440px;
    max-width: 100vw;
    height: 100vh;
    z-index: 1001;
    background: rgba(10, 8, 26, 0.95);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    transition: right 0.32s var(--ease-out);
    color: var(--text);
}
.help-drawer.open { right: 0; }
.help-drawer-header {
    padding: 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.help-drawer-title-area { display: flex; flex-direction: column; gap: 4px; }

/* Sidebar note (per-portal text block) */
.sidebar-note {
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--surface-1);
    border: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}
.sidebar-note strong { color: var(--text); }

/* Mobile overlay / responsive behaviour preserved */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
}
.mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Brand block in sidebar */
.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}
.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-glow);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-kicker {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    font-weight: 600;
}
.brand-block strong {
    display: block;
    font-size: 15px;
    color: var(--text-strong);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Kicker / labels */
.section-kicker, .page-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-500);
    background: rgba(106, 130, 255, 0.10);
    border: 1px solid rgba(106, 130, 255, 0.20);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}