/* =====================================================================
   TriVen One Hub — Operations Console design system
   Identity: dark navigation rail carrying the TriVen V-mark, quiet
   surfaces, monospaced codes, and the brand's magenta→violet→indigo
   gradient used only for focus (active nav, primary action, KPI rule).
   Default = TriVen purple   Light = sky blue   Dark = cosmic night
   Every theme carries an animated "gravity" particle field behind
   semi-transparent surfaces.
   ===================================================================== */

:root,
[data-theme="default"] {
    /* Default theme: TriVen purple, matching the V logo */
    --tv-grad: linear-gradient(135deg, #9D8CF5 0%, #B49AF7 50%, #D7A6EE 100%);
    --tv-grad-soft: linear-gradient(135deg, rgba(116, 21, 245, .12), rgba(236, 66, 233, .12));

    --hub-bg: #FCFBFF;
    --hub-bg-2: #F6F2FF;
    --hub-surface: rgba(255, 255, 255, .40);
    --hub-surface-2: rgba(246, 240, 255, .38);
    --hub-surface-soft: rgba(255, 255, 255, .40);
    --hub-surface-solid: #FFFFFF;
    --hub-text: #1E1238;
    --hub-text-2: #3B2A63;
    --hub-muted: #6B5B8E;
    --hub-border: rgba(196, 172, 245, .75);
    --hub-border-soft: rgba(221, 206, 250, .75);
    --hub-primary: #7C62D9;
    --hub-primary-dark: #6A50C7;
    --hub-primary-light: #B9A8F5;
    --hub-primary-soft: #F1ECFF;
    --hub-blue: #0891B2;
    --hub-blue-dark: #0E7490;
    --hub-blue-soft: #D5F5FB;
    --hub-amber: #B45309;
    --hub-amber-soft: #FEF3C7;
    --hub-red: #DC2626;
    --hub-red-soft: #FEE2E2;
    --hub-green: #15803D;
    --hub-green-soft: #DCFCE7;

    /* Navigation rail: deep violet */
    --rail-bg: #E9E1FF;
    --rail-bg-2: #F6F2FF;
    --rail-glow: rgba(236, 66, 233, .10);
    --rail-text: #3B2A63;
    --rail-muted: #8A78B3;
    --rail-active: #FFFFFF;
    --rail-brand: #2A1650;

    /* Gravity field colours (read by hub.js) */
    --gravity-dot: 124, 58, 237;
    --gravity-line: 192, 38, 211;
    --gravity-alpha: .5;

    --hub-shadow-sm: 0 1px 2px rgba(30, 18, 56, .06);
    --hub-shadow: 0 12px 32px -14px rgba(116, 21, 245, .35);
    --hub-radius: 14px;
    color-scheme: light;
}

[data-theme="light"] {
    /* Light theme: airy sky blue with a cyan→azure→indigo accent */
    --tv-grad: linear-gradient(135deg, #7DD3F0 0%, #8DB5F7 50%, #A3AEF5 100%);
    --tv-grad-soft: linear-gradient(135deg, rgba(34, 211, 238, .14), rgba(79, 70, 229, .12));

    --hub-bg: #FBFDFF;
    --hub-bg-2: #F2F7FF;
    --hub-surface: rgba(255, 255, 255, .40);
    --hub-surface-2: rgba(243, 248, 255, .38);
    --hub-surface-soft: rgba(255, 255, 255, .40);
    --hub-surface-solid: #FFFFFF;
    --hub-text: #0D1B36;
    --hub-text-2: #2C4066;
    --hub-muted: #5A6D90;
    --hub-border: rgba(180, 208, 245, .8);
    --hub-border-soft: rgba(210, 228, 250, .8);
    --hub-primary: #4F7FD9;
    --hub-primary-dark: #3F6CC4;
    --hub-primary-light: #9DBDF5;
    --hub-primary-soft: #EAF2FF;
    --hub-blue: #0891B2;
    --hub-blue-dark: #0E7490;
    --hub-blue-soft: #D5F5FB;
    --hub-amber: #B45309;
    --hub-amber-soft: #FEF3C7;
    --hub-red: #DC2626;
    --hub-red-soft: #FEE2E2;
    --hub-green: #15803D;
    --hub-green-soft: #DCFCE7;

    /* Navigation rail: deep navy */
    --rail-bg: #DDEBFF;
    --rail-bg-2: #F1F7FF;
    --rail-glow: rgba(56, 189, 248, .12);
    --rail-text: #1F3A66;
    --rail-muted: #6E86AD;
    --rail-active: #FFFFFF;
    --rail-brand: #0F2A55;

    /* Gravity field colours (read by hub.js) */
    --gravity-dot: 37, 99, 235;
    --gravity-line: 14, 116, 144;
    --gravity-alpha: .5;

    --hub-shadow-sm: 0 1px 2px rgba(13, 27, 54, .06);
    --hub-shadow: 0 12px 32px -14px rgba(37, 99, 235, .35);
    --hub-radius: 14px;
    color-scheme: light;
}

[data-theme="dark"] {
    --tv-grad: linear-gradient(135deg, #EC42E9 0%, #7415F5 48%, #4524D9 100%);
    --tv-grad-soft: linear-gradient(135deg, rgba(236, 66, 233, .14), rgba(69, 36, 217, .18));
    --rail-glow: rgba(116, 21, 245, .28);
    --rail-text: #C9C4E6;
    --rail-muted: #7E78A3;
    --rail-active: #FFFFFF;
    --gravity-dot: 167, 139, 250;
    --gravity-line: 236, 66, 233;
    --gravity-alpha: .5;

    --hub-bg: #0A0816;
    --hub-bg-2: #0E0B1E;
    --hub-surface: rgba(19, 16, 39, .48);
    --hub-surface-2: rgba(24, 20, 51, .45);
    --hub-surface-soft: rgba(19, 16, 39, .48);
    --hub-surface-solid: #131027;
    --hub-text: #ECEAFB;
    --hub-text-2: #C9C5E8;
    --hub-muted: #9590BA;
    --hub-border: #272148;
    --hub-border-soft: #1E1A3A;
    --hub-primary: #8B6CF2;
    --hub-primary-dark: #A58DF6;
    --hub-primary-light: #A58DF6;
    --hub-primary-soft: #221B47;
    --hub-blue: #38BDF8;
    --hub-blue-dark: #7DD3FC;
    --hub-blue-soft: #0B2638;
    --hub-amber: #FBBF24;
    --hub-amber-soft: #33240A;
    --hub-red: #F87171;
    --hub-red-soft: #3A1219;
    --hub-green: #4ADE80;
    --hub-green-soft: #0E2B1B;

    --rail-bg: #07050F;
    --rail-bg-2: #0F0B21;

    --hub-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --hub-shadow: 0 16px 40px -16px rgba(0, 0, 0, .7);
    color-scheme: dark;
}

/* ---------- Base ---------- */
html, body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--hub-bg);
    color: var(--hub-text);
    -webkit-font-smoothing: antialiased;
}

.hub-mono,
code {
    font-family: "Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
    font-size: .92em;
    letter-spacing: -.01em;
}

a {
    color: var(--hub-primary);
}

/* ---------- App frame ---------- */
.hub-nav-toggle {
    display: none;
}

.hub-app {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    min-height: 100vh;
}

.hub-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 60% at 0% 0%, var(--rail-glow), transparent 60%),
        linear-gradient(180deg, var(--rail-bg-2), var(--rail-bg));
    color: var(--rail-text);
    border-right: 1px solid rgba(255, 255, 255, .05);
    overflow-y: auto;
    z-index: 60;
}

.hub-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px 18px;
    text-decoration: none;
}

.hub-brand-mark {
    width: 38px;
    height: 32px;
    flex: 0 0 auto;
    filter: drop-shadow(0 4px 14px rgba(236, 66, 233, .35));
}

.hub-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hub-brand-name {
    color: var(--rail-brand, #FFFFFF);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .2px;
}

.hub-brand-sub {
    color: var(--rail-muted);
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-top: 3px;
}

.hub-nav {
    display: flex;
    flex-direction: column;
    padding: 6px 12px 18px;
    flex: 1;
}

.hub-nav-group {
    margin: 18px 10px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--rail-muted);
}

.hub-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--rail-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.hub-nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #FFFFFF;
}

.hub-nav-link.active {
    background: rgba(139, 108, 242, .18);
    color: var(--rail-active);
}

.hub-nav-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tv-grad);
}

.hub-nav-icon {
    width: 18px;
    text-align: center;
    font-size: 14px;
    opacity: .85;
}

.hub-rail-footer {
    padding: 14px 22px 20px;
    font-size: 11px;
    color: var(--rail-muted);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ---------- Gravity field (animated background, drawn by hub.js) ---------- */
.hub-gravity {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hub-app {
    position: relative;
    background:
        radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--hub-primary) 6%, transparent), transparent 65%),
        radial-gradient(60% 50% at 30% 100%, color-mix(in srgb, var(--hub-primary) 4%, transparent), transparent 60%),
        linear-gradient(160deg, var(--hub-bg) 0%, var(--hub-bg-2) 100%);
}

.hub-rail,
.hub-topbar {
    z-index: 60;
}

.hub-main {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hub-gravity { display: none; }
}

.hub-stage {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
}

.hub-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: color-mix(in srgb, var(--hub-bg) 82%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hub-border-soft);
}

.hub-topbar-spacer {
    flex: 1;
}

.hub-burger {
    display: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    color: var(--hub-text);
}

.hub-icon-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--hub-border);
    border-radius: 10px;
    background: var(--hub-surface);
    color: var(--hub-text-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}

.hub-icon-button:hover {
    color: var(--hub-text);
    border-color: var(--hub-primary-light);
}

.hub-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px 4px 4px;
}

.hub-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tv-grad);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
}

.hub-avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 22px;
    border-radius: 18px;
}

.hub-user-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hub-user-name {
    font-size: 13px;
    font-weight: 600;
}

.hub-user-role {
    font-size: 11px;
    color: var(--hub-muted);
}

.hub-main {
    padding: 28px 32px 56px;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

.hub-scrim {
    display: none;
}

@media (max-width: 980px) {
    .hub-app {
        grid-template-columns: 1fr;
    }

    .hub-rail {
        position: fixed;
        left: 0;
        top: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .hub-nav-toggle:checked ~ .hub-app .hub-rail {
        transform: translateX(0);
    }

    .hub-nav-toggle:checked ~ .hub-app .hub-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 8, 22, .5);
        z-index: 55;
    }

    .hub-burger {
        display: inline-block;
    }

    .hub-topbar {
        padding: 10px 16px;
    }

    .hub-main {
        padding: 20px 16px 48px;
    }

    .hub-hide-sm {
        display: none;
    }
}

/* ---------- Appearance menu ---------- */
.hub-appearance {
    position: relative;
}

.hub-appearance > summary::-webkit-details-marker {
    display: none;
}

.hub-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 250px;
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: 14px;
    box-shadow: var(--hub-shadow);
    padding: 8px;
    z-index: 100;
}

.hub-menu-label {
    padding: 6px 10px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--hub-muted);
}

.hub-theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--hub-text);
    text-align: left;
    cursor: pointer;
}

.hub-theme-option:hover {
    background: var(--hub-primary-soft);
}

.hub-theme-swatch {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--hub-border);
    flex: 0 0 auto;
}

.hub-swatch-light { background: linear-gradient(135deg, #EAF3FF 50%, #3B82F6 50%); }
.hub-swatch-dark { background: linear-gradient(135deg, #131027 50%, #6236E0 50%); }
.hub-swatch-default { background: linear-gradient(135deg, #F4EEFF 50%, #7415F5 50%); }

.hub-theme-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hub-theme-name {
    font-weight: 600;
    font-size: 14px;
}

.hub-theme-desc {
    font-size: 12px;
    color: var(--hub-muted);
}

.hub-check {
    visibility: hidden;
    color: var(--hub-primary);
    font-weight: 700;
}

html[data-theme-choice="light"] .hub-theme-option[data-choice="light"] .hub-check,
html[data-theme-choice="dark"] .hub-theme-option[data-choice="dark"] .hub-check,
html[data-theme-choice="system"] .hub-theme-option[data-choice="system"] .hub-check {
    visibility: visible;
}

/* ---------- Page header ---------- */
.hub-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--hub-primary);
    margin-bottom: 6px;
}

.hub-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.hub-title {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -.4px;
    color: var(--hub-text);
    margin: 0 0 4px;
}

.hub-title-icon {
    display: none;
}

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

.hub-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
    color: var(--hub-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.hub-back:hover {
    color: var(--hub-primary);
}

/* ---------- Buttons ---------- */
.hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.hub-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--hub-primary);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.hub-button:hover {
    color: #FFFFFF;
    background: var(--hub-primary-dark);
    box-shadow: 0 6px 16px -8px rgba(98, 54, 224, .7);
}

.hub-button:active {
    transform: translateY(1px);
}

.hub-button:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.hub-button-primary {
    background: var(--tv-grad);
}

.hub-button-primary:hover {
    background: var(--tv-grad);
    filter: brightness(1.08);
}

.hub-button-light {
    background: var(--hub-surface);
    border-color: var(--hub-border);
    color: var(--hub-text);
}

.hub-button-light:hover {
    background: var(--hub-primary-soft);
    border-color: var(--hub-primary-light);
    color: var(--hub-text);
    box-shadow: none;
}

.hub-button-danger {
    background: var(--hub-red);
}

.hub-button-danger:hover {
    background: #B91C1C;
}

.hub-button-ghost {
    background: transparent;
    color: var(--hub-primary);
    border-color: transparent;
}

.hub-button-ghost:hover {
    background: var(--hub-primary-soft);
    color: var(--hub-primary);
    box-shadow: none;
}

.hub-button-small {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 8px;
}

/* ---------- Surfaces ---------- */
.hub-section,
.hub-card {
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow-sm);
    padding: 22px;
    margin-bottom: 22px;
}

.hub-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.hub-section-title {
    font-size: 16px;
    font-weight: 650;
    color: var(--hub-text);
    margin: 0;
}

.hub-section-subtitle {
    font-size: 13px;
    color: var(--hub-muted);
    margin: 2px 0 0;
}

.hub-indent {
    margin-left: 0;
}

.hub-grid {
    display: grid;
    gap: 16px;
}

.hub-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hub-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

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

@media (max-width: 900px) {
    .hub-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .hub-grid-2, .hub-grid-3, .hub-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- KPI tiles ---------- */
.stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 18px 22px;
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow-sm);
    overflow: hidden;
    color: var(--hub-text);
    text-decoration: none;
}

a.stat-card:hover {
    border-color: var(--hub-primary-light);
    box-shadow: var(--hub-shadow);
    color: var(--hub-text);
}

.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--stat-accent, var(--hub-primary));
}

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stat-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--hub-muted);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 16px;
    background: var(--stat-soft, var(--hub-primary-soft));
}

.stat-value {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    font-size: 32px;
    font-weight: 650;
    letter-spacing: -.6px;
    line-height: 1;
    color: var(--hub-text);
}

.stat-subtitle {
    font-size: 12.5px;
    color: var(--hub-muted);
}

.stat-purple { --stat-accent: var(--hub-primary); --stat-soft: var(--hub-primary-soft); }
.stat-blue   { --stat-accent: var(--hub-blue);    --stat-soft: var(--hub-blue-soft); }
.stat-amber  { --stat-accent: var(--hub-amber);   --stat-soft: var(--hub-amber-soft); }
.stat-red    { --stat-accent: var(--hub-red);     --stat-soft: var(--hub-red-soft); }
.stat-green  { --stat-accent: var(--hub-green);   --stat-soft: var(--hub-green-soft); }

/* ---------- Hero ---------- */
.hub-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 26px 28px;
    margin-bottom: 22px;
    color: #FFFFFF;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(236, 66, 233, .45), transparent 60%),
        radial-gradient(60% 120% at 0% 100%, rgba(69, 36, 217, .55), transparent 60%),
        #1A1338;
}

[data-theme="default"] .hub-hero {
    color: var(--hub-text);
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(232, 180, 240, .55), transparent 60%),
        radial-gradient(60% 120% at 0% 100%, rgba(185, 168, 245, .55), transparent 60%),
        #EEE8FF;
}

[data-theme="light"] .hub-hero {
    color: var(--hub-text);
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(150, 220, 245, .55), transparent 60%),
        radial-gradient(60% 120% at 0% 100%, rgba(165, 180, 245, .45), transparent 60%),
        #E8F1FF;
}

.hub-hero h1 {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -.3px;
    margin: 0 0 6px;
}

.hub-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
}

.hub-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.hub-hero-chip {
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Module launcher ---------- */
.hub-module {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: 12px;
    color: var(--hub-text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.hub-module:hover {
    color: var(--hub-text);
    border-color: var(--hub-primary-light);
    box-shadow: var(--hub-shadow);
    transform: translateY(-1px);
}

.hub-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--tv-grad-soft);
    font-size: 18px;
    flex: 0 0 auto;
}

.hub-module-body {
    flex: 1;
    min-width: 0;
}

.hub-module-title {
    font-size: 14.5px;
    font-weight: 650;
}

.hub-module-text {
    font-size: 12.5px;
    color: var(--hub-muted);
}

.hub-module-note {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--hub-primary);
}

.hub-module-arrow {
    color: var(--hub-muted);
    font-size: 18px;
}

/* ---------- Lists / activity ---------- */
.hub-activity {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hub-activity li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--hub-border-soft);
}

.hub-activity li:last-child {
    border-bottom: none;
}

.hub-activity-title {
    font-weight: 600;
    font-size: 14px;
}

.hub-activity-time {
    white-space: nowrap;
    font-size: 12px;
    color: var(--hub-muted);
}

.hub-tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--hub-blue-dark);
    background: var(--hub-blue-soft);
    padding: 2px 8px;
    border-radius: 6px;
}

/* ---------- Toolbar / inputs ---------- */
.hub-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.hub-input,
.hub-select,
.hub-textarea {
    padding: 9px 12px;
    border: 1px solid var(--hub-border);
    border-radius: 10px;
    background: var(--hub-surface);
    color: var(--hub-text);
    font-size: 14px;
    min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hub-input:disabled {
    background: var(--hub-surface-2);
    color: var(--hub-muted);
}

.hub-input:focus,
.hub-select:focus,
.hub-textarea:focus {
    outline: none;
    border-color: var(--hub-primary-light);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-primary) 18%, transparent);
}

.hub-search {
    flex: 1 1 280px;
    padding-left: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238e89ad' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
}

.hub-textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    font-family: inherit;
}

/* ---------- Tables ---------- */
.hub-table-wrap {
    overflow-x: auto;
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius);
    box-shadow: var(--hub-shadow-sm);
}

.hub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.hub-table th {
    position: sticky;
    top: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--hub-muted);
    background: var(--hub-surface-2);
    padding: 11px 14px;
    border-bottom: 1px solid var(--hub-border);
    white-space: nowrap;
}

.hub-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--hub-border-soft);
    vertical-align: middle;
}

.hub-table tbody tr:hover td {
    background: color-mix(in srgb, var(--hub-primary-soft) 45%, transparent);
}

.hub-table tr:last-child td {
    border-bottom: none;
}

.hub-table tr.hub-row-inactive td {
    opacity: .55;
}

.hub-table tr.hub-row-link {
    cursor: pointer;
}

.hub-table .hub-cell-actions {
    white-space: nowrap;
    text-align: right;
}

.hub-table .hub-cell-actions .hub-button {
    margin-left: 4px;
}

.hub-strong {
    font-weight: 600;
}

.hub-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hub-person .hub-avatar {
    width: 30px;
    height: 30px;
    font-size: 11px;
}

/* ---------- Pills / badges ---------- */
.hub-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.hub-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.hub-pill-active,
.hub-pill-success { background: var(--hub-green-soft); color: var(--hub-green); }
.hub-pill-inactive,
.hub-pill-neutral { background: var(--hub-primary-soft); color: var(--hub-muted); }
.hub-pill-warning { background: var(--hub-amber-soft); color: var(--hub-amber); }
.hub-pill-danger  { background: var(--hub-red-soft); color: var(--hub-red); }
.hub-pill-info    { background: var(--hub-blue-soft); color: var(--hub-blue-dark); }

.hub-provider {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 4px;
    border: 1px solid var(--hub-border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: var(--hub-surface);
    white-space: nowrap;
}

.hub-provider-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    color: #FFFFFF;
    background: #6B6788;
}

.hub-provider-godaddy .hub-provider-dot { background: #1BDBDB; color: #0B3B3B; }
.hub-provider-google .hub-provider-dot { background: #4285F4; }
.hub-provider-microsoft .hub-provider-dot { background: #F25022; }
.hub-provider-namecheap .hub-provider-dot { background: #DE3723; }
.hub-provider-hostinger .hub-provider-dot { background: #673DE6; }
.hub-provider-cloudflare .hub-provider-dot { background: #F38020; }
.hub-provider-aws .hub-provider-dot { background: #FF9900; color: #232F3E; }
.hub-provider-zoho .hub-provider-dot { background: #E42527; }
.hub-provider-bigrock .hub-provider-dot { background: #0071BC; }

.hub-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--hub-muted);
}

.hub-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.hub-pager-count {
    margin: 12px 4px 0;
}

/* ---------- Secret (password) field ---------- */
.hub-secret {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.hub-secret-value {
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--hub-surface-2);
    border: 1px dashed var(--hub-border);
    min-width: 96px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-secret-value.revealed {
    border-style: solid;
    border-color: var(--hub-primary-light);
    background: var(--hub-primary-soft);
    color: var(--hub-text);
}

.hub-secret-hint {
    font-size: 11px;
    color: var(--hub-muted);
}

/* ---------- Alerts ---------- */
.hub-alert {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid;
}

.hub-alert-error {
    background: var(--hub-red-soft);
    color: var(--hub-red);
    border-color: color-mix(in srgb, var(--hub-red) 40%, transparent);
}

.hub-alert-success {
    background: var(--hub-green-soft);
    color: var(--hub-green);
    border-color: color-mix(in srgb, var(--hub-green) 40%, transparent);
}

.hub-alert-info {
    background: var(--hub-blue-soft);
    color: var(--hub-blue-dark);
    border-color: color-mix(in srgb, var(--hub-blue) 40%, transparent);
}

/* ---------- Modal & forms ---------- */
.hub-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px;
    background: rgba(10, 8, 22, .55);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}

.hub-modal {
    width: 100%;
    max-width: 780px;
    background: var(--hub-surface);
    color: var(--hub-text);
    border: 1px solid var(--hub-border);
    border-radius: 18px;
    box-shadow: var(--hub-shadow);
    padding: 26px;
}

.hub-modal-small {
    max-width: 460px;
}

.hub-modal-title {
    font-size: 19px;
    font-weight: 650;
    margin: 0 0 18px;
}

.hub-modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hub-form-section {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--hub-primary);
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hub-border-soft);
}

.hub-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

@media (max-width: 640px) {
    .hub-form-grid { grid-template-columns: 1fr; }
}

.hub-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hub-field-wide {
    grid-column: 1 / -1;
}

.hub-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--hub-text-2);
}

.hub-required::after {
    content: " *";
    color: var(--hub-red);
}

.hub-checkbox {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--hub-text) !important;
    margin-bottom: 6px;
}

.hub-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--hub-primary);
}

/* ---------- Detail lists ---------- */
.hub-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px 22px;
    margin: 0;
}

.hub-details dt {
    font-size: 11px;
    font-weight: 700;
    color: var(--hub-muted);
    text-transform: uppercase;
    letter-spacing: .7px;
}

.hub-details dd {
    margin: 4px 0 0;
    font-size: 14.5px;
    word-break: break-word;
}

.hub-profile-header {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.hub-profile-name {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 650;
    margin: 0;
}

.hub-role {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.hub-role-superadmin { background: linear-gradient(135deg, #EC42E9, #7415F5); }
.hub-role-itadmin    { background: linear-gradient(135deg, #7415F5, #4524D9); }
.hub-role-employee   { background: #0F766E; }

/* ---------- Tabs ---------- */
.hub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--hub-border);
}

.hub-tab {
    position: relative;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--hub-muted);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.hub-tab:hover {
    color: var(--hub-text);
}

.hub-tab.active {
    color: var(--hub-text);
}

.hub-tab.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--tv-grad);
}

.hub-tab-count {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--hub-primary-soft);
    color: var(--hub-primary);
    font-size: 11px;
}

/* ---------- Renewal timeline ---------- */
.hub-countdown {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 6px 8px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.05;
}

.hub-countdown-num {
    font-size: 18px;
}

.hub-countdown-unit {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .8;
}

.hub-due-overdue { background: var(--hub-red-soft); color: var(--hub-red); }
.hub-due-urgent  { background: var(--hub-amber-soft); color: var(--hub-amber); }
.hub-due-soon    { background: var(--hub-blue-soft); color: var(--hub-blue-dark); }
.hub-due-later   { background: var(--hub-primary-soft); color: var(--hub-primary); }

.hub-bucket-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--hub-border-soft);
    margin: 4px 0 12px;
}

.hub-bucket-bar span {
    display: block;
    height: 100%;
}

/* ---------- Permission matrix ---------- */
.hub-matrix th.hub-matrix-role,
.hub-matrix td.hub-matrix-cell {
    text-align: center;
}

.hub-matrix-group td {
    background: var(--hub-surface-2) !important;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--hub-primary);
}

/* ---------- States ---------- */
.hub-error {
    border-color: var(--hub-red);
    background: var(--hub-red-soft);
}

.hub-error h2 {
    font-size: 16px;
    font-weight: 650;
    color: var(--hub-red);
}

.hub-loading {
    padding: 48px 0;
    text-align: center;
    color: var(--hub-muted);
}

.hub-loading::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 3px solid var(--hub-primary-soft);
    border-top-color: var(--hub-primary);
    animation: hub-spin .8s linear infinite;
}

@keyframes hub-spin {
    to { transform: rotate(360deg); }
}

.hub-note {
    font-size: 12.5px;
    color: var(--hub-muted);
    margin-top: 12px;
}

#blazor-error-ui {
    color: #15122B;
}

/* ---------- Finance / invoices ---------- */
.stat-value.stat-value-text { font-size: 1.45rem; letter-spacing: -.01em; white-space: nowrap; }
.hub-empty-state { text-align: center; padding: 48px 24px; }
.hub-empty-state h3 { margin: 10px 0 6px; }
.hub-empty-icon {
    width: 64px; height: 64px; margin: 0 auto; border-radius: 20px;
    display: grid; place-items: center; font-size: 28px; color: #fff;
    background: var(--tv-grad); box-shadow: 0 12px 30px -12px var(--hub-primary);
}
.hub-role-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }


/* ---------- Glass surfaces: let the gravity animation show through ---------- */
.hub-card,
.stat-card,
.hub-module,
.hub-table-wrap,
.hub-button-light,
.hub-icon-button {
    -webkit-backdrop-filter: blur(3px) saturate(1.15);
    backdrop-filter: blur(3px) saturate(1.15);
}

.hub-table th,
.hub-table td {
    background: transparent;
}

.hub-table thead th {
    background: var(--hub-surface-2);
}

/* Pop-ups and menus stay solid so text over them is easy to read. */
.hub-modal,
.hub-menu,
.hub-appearance-menu,
details.hub-appearance > div {
    background: var(--hub-surface-solid);
}

.hub-brand-mark {
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(236, 66, 233, .45));
}


/* =====================================================================
   ORBIT SKIN — premium layer for the signed-in hub
   Floating glass navigation, gradient-edged glass cards, glowing KPI
   orbs, an aurora hero and gentle entrance motion. Works in all three
   appearances because it only uses theme variables.
   ===================================================================== */

:root {
    --orbit-edge: linear-gradient(140deg,
        rgba(255, 255, 255, .85) 0%,
        color-mix(in srgb, var(--hub-primary) 45%, transparent) 45%,
        rgba(255, 255, 255, .25) 100%);
    --orbit-glow: 0 18px 40px -22px color-mix(in srgb, var(--hub-primary) 70%, transparent);
    --orbit-radius: 18px;
}

[data-theme="dark"] {
    --orbit-edge: linear-gradient(140deg,
        rgba(255, 255, 255, .18) 0%,
        color-mix(in srgb, var(--hub-primary) 55%, transparent) 45%,
        rgba(255, 255, 255, .04) 100%);
}

/* ---------- typography ---------- */
.hub-app {
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
}

/* ---------- floating navigation rail (desktop) ---------- */
@media (min-width: 981px) {
    .hub-app {
        grid-template-columns: 276px minmax(0, 1fr);
    }

    .hub-rail {
        top: 12px;
        height: calc(100vh - 24px);
        margin: 12px 0 12px 12px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow:
            0 30px 60px -30px rgba(10, 4, 30, .55),
            inset 0 1px 0 rgba(255, 255, 255, .06);
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .15) transparent;
    }

    .hub-topbar {
        margin: 12px 20px 0;
        border-radius: 18px;
        border: 1px solid var(--hub-border-soft);
        box-shadow: 0 10px 30px -22px rgba(20, 10, 60, .45);
    }
}

.hub-rail::after {
    /* faint star grain inside the rail */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, .35), transparent 60%),
        radial-gradient(1px 1px at 70% 60%, rgba(255, 255, 255, .25), transparent 60%),
        radial-gradient(1px 1px at 40% 85%, rgba(255, 255, 255, .2), transparent 60%),
        radial-gradient(1px 1px at 85% 15%, rgba(255, 255, 255, .3), transparent 60%);
    opacity: .7;
}

.hub-nav-group {
    letter-spacing: 1.6px;
    opacity: .75;
}

.hub-nav-link {
    border-radius: 12px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.hub-nav-link:hover {
    transform: translateX(3px);
}

.hub-nav-link.active {
    color: #FFFFFF;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--hub-primary) 55%, transparent), color-mix(in srgb, var(--hub-primary) 12%, transparent));
    box-shadow:
        0 10px 24px -14px var(--hub-primary),
        inset 0 1px 0 rgba(255, 255, 255, .14);
}

.hub-nav-link.active::before {
    left: auto;
    right: 10px;
    top: 50%;
    bottom: auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #FFFFFF;
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--hub-primary-light) 90%, transparent);
}

/* ---------- glass cards with a gradient edge ---------- */
.hub-card,
.stat-card,
.hub-module,
.hub-table-wrap {
    position: relative;
    border-color: transparent;
    border-radius: var(--orbit-radius);
    box-shadow: var(--orbit-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.hub-card::after,
.stat-card::after,
.hub-module::after,
.hub-table-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--orbit-edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.hub-card .hub-card,
.hub-card .stat-card,
.hub-card .hub-module {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.hub-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    letter-spacing: -.2px;
}

.hub-section-title::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: var(--tv-grad);
    box-shadow: 0 0 12px color-mix(in srgb, var(--hub-primary) 60%, transparent);
}

/* ---------- KPI tiles ---------- */
.stat-card {
    padding: 20px 22px;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

.stat-card::before {
    /* glowing accent bar along the top instead of the side */
    left: 18px;
    right: 18px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--stat-accent, var(--hub-primary)), transparent);
    box-shadow: 0 0 16px 1px color-mix(in srgb, var(--stat-accent, var(--hub-primary)) 70%, transparent);
}

a.stat-card:hover,
.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 48px -24px color-mix(in srgb, var(--stat-accent, var(--hub-primary)) 75%, transparent);
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #FFFFFF;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 45%),
        var(--stat-accent, var(--hub-primary));
    box-shadow:
        0 8px 20px -6px color-mix(in srgb, var(--stat-accent, var(--hub-primary)) 80%, transparent),
        inset 0 -2px 6px rgba(0, 0, 0, .15);
}

.stat-value {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1px;
    background: linear-gradient(135deg, var(--hub-text) 30%, var(--stat-accent, var(--hub-primary)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-value.stat-value-text {
    font-size: 1.6rem;
}

/* ---------- aurora hero ---------- */
.hub-hero {
    border-radius: 26px;
    padding: 34px 36px;
    isolation: isolate;
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--hub-primary) 80%, transparent);
}

.hub-hero::before {
    /* moving aurora sheen */
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -1;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(255, 255, 255, .16) 60deg,
            transparent 120deg,
            rgba(236, 66, 233, .22) 200deg,
            transparent 260deg,
            rgba(34, 211, 238, .18) 320deg,
            transparent 360deg);
    animation: orbit-aurora 28s linear infinite;
    filter: blur(30px);
}

.hub-hero::after {
    /* fine star grid */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask: linear-gradient(100deg, transparent 35%, #000 100%);
    mask: linear-gradient(100deg, transparent 35%, #000 100%);
    opacity: .5;
}

.hub-hero h1 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.8px;
}

.hub-hero-chip {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
}

@keyframes orbit-aurora {
    to { transform: rotate(360deg); }
}

/* ---------- page headers ---------- */
.hub-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hub-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--hub-primary) 25%, transparent);
}

.hub-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.8px;
    background: linear-gradient(120deg, var(--hub-text) 40%, var(--hub-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- module tiles ---------- */
.hub-module {
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

.hub-module:hover {
    transform: translateY(-3px);
}

.hub-module-icon {
    border-radius: 14px;
    color: #FFFFFF;
    background: var(--tv-grad);
    box-shadow: 0 10px 22px -10px var(--hub-primary);
}

.hub-module-arrow {
    transition: transform .2s ease;
}

.hub-module:hover .hub-module-arrow {
    transform: translateX(4px);
    color: var(--hub-primary);
}

/* ---------- buttons ---------- */
.hub-button {
    border-radius: 12px;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}

.hub-button-primary {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 24px -12px var(--hub-primary);
}

.hub-button-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}

.hub-button-primary:hover::after {
    transform: translateX(120%);
}

.hub-button:active {
    transform: translateY(1px) scale(.99);
}

/* ---------- tables ---------- */
.hub-table tbody tr {
    transition: background .15s ease;
}

.hub-table tbody tr:hover td {
    background: color-mix(in srgb, var(--hub-primary) 7%, transparent);
}

.hub-input,
.hub-select,
.hub-textarea {
    border-radius: 12px;
}

.hub-input:focus,
.hub-select:focus,
.hub-textarea:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--hub-primary) 18%, transparent);
}

/* ---------- entrance motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    .hub-main > * {
        animation: orbit-rise .55s cubic-bezier(.2, .8, .2, 1) both;
    }

    .hub-main > *:nth-child(2) { animation-delay: .05s; }
    .hub-main > *:nth-child(3) { animation-delay: .1s; }
    .hub-main > *:nth-child(4) { animation-delay: .15s; }
    .hub-main > *:nth-child(5) { animation-delay: .2s; }

    .hub-grid > .stat-card {
        animation: orbit-rise .6s cubic-bezier(.2, .8, .2, 1) both;
    }

    .hub-grid > .stat-card:nth-child(2) { animation-delay: .06s; }
    .hub-grid > .stat-card:nth-child(3) { animation-delay: .12s; }
    .hub-grid > .stat-card:nth-child(4) { animation-delay: .18s; }
}

@keyframes orbit-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* ---------- scrollbars ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--hub-primary) 35%, transparent) transparent;
}


/* ---------- pastel navigation rail for Default and Light ---------- */
[data-theme="default"] .hub-rail,
[data-theme="light"] .hub-rail,
:root:not([data-theme]) .hub-rail {
    border: 1px solid color-mix(in srgb, var(--hub-primary) 14%, transparent);
    box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--hub-primary) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}

[data-theme="default"] .hub-rail::after,
[data-theme="light"] .hub-rail::after {
    display: none;
}

[data-theme="default"] .hub-nav-link:hover,
[data-theme="light"] .hub-nav-link:hover {
    background: color-mix(in srgb, var(--hub-primary) 9%, transparent);
    color: var(--rail-brand);
}

[data-theme="default"] .hub-nav-link.active,
[data-theme="light"] .hub-nav-link.active {
    background: var(--tv-grad);
}

/* ---------- Email accounts grouped by employee ---------- */
.hub-person { display: inline-flex; align-items: center; gap: 10px; }
.hub-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.hub-group-row { cursor: pointer; }
.hub-group-row.open td { background: color-mix(in srgb, var(--hub-primary) 8%, transparent); }
.hub-group-caret { color: var(--hub-primary); font-size: 14px; width: 28px; }
.hub-group-detail > td { padding: 0 14px 16px !important; background: color-mix(in srgb, var(--hub-primary) 4%, transparent); }
.hub-group-panel {
    border: 1px solid var(--hub-border-soft);
    border-radius: 14px;
    background: var(--hub-surface-solid);
    overflow: hidden;
    animation: orbit-rise .3s ease both;
}
.hub-group-panel-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--hub-border-soft);
    font-size: 13px; color: var(--hub-text-2);
}
.hub-group-panel .hub-table th { position: static; }

/* ---------- import dialog ---------- */
.hub-modal-wide { max-width: 980px; }
.hub-steps { margin: 0 0 16px; padding-left: 20px; line-height: 2; color: var(--hub-text-2); font-size: 14px; }
.hub-import-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.hub-text-danger { color: var(--hub-red); font-size: 12.5px; }
.hub-text-success { color: var(--hub-green); font-size: 12.5px; font-weight: 600; }

/* ---------- profile pictures ---------- */
img.hub-avatar-photo {
    object-fit: cover;
    padding: 0;
    background: var(--hub-surface-solid);
    border: 2px solid color-mix(in srgb, var(--hub-primary) 35%, transparent);
}
.hub-photo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.hub-photo-actions input[type=file] { display: none; }
.hub-pseudo { font-size: 13px; color: var(--hub-primary); font-weight: 600; }

/* ---------- notification bell ---------- */
.hub-bell > summary { position: relative; font-size: 16px; }
.hub-bell-count {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--tv-grad); color: #fff; font-size: 11px; font-weight: 700;
    display: grid; place-items: center; box-shadow: 0 4px 10px -4px var(--hub-primary);
}
.hub-bell-menu { width: 320px; max-height: 70vh; overflow-y: auto; }
.hub-bell-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.hub-bell-item.today, .hub-bell-eotm { background: color-mix(in srgb, var(--hub-primary) 9%, transparent); }
.hub-bell-empty { padding: 6px 10px 10px; font-size: 12.5px; color: var(--hub-muted); }

/* ---------- engagement & photo approvals ---------- */
.hub-notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--hub-border-soft); margin-bottom: 8px; }
.hub-photo-card { text-align: center; }
.hub-photo-card img, .hub-photo-placeholder {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px;
    background: var(--hub-primary-soft); display: grid; place-items: center; color: var(--hub-muted);
}
.hub-photo-rules { font-size: 12.5px; color: var(--hub-muted); line-height: 1.6; margin-top: 8px; }
.hub-eotm-card { display: flex; gap: 16px; align-items: center; }
.hub-eotm-card .hub-avatar-lg { box-shadow: 0 0 0 4px color-mix(in srgb, #F5B301 45%, transparent); }
.hub-birthday-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hub-border-soft); }
.hub-birthday-row:last-child { border-bottom: 0; }
.hub-ticket-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hub-border-soft); font-size: 13.5px; }
.hub-ticket-row:last-child { border-bottom: 0; }

/* ---------- notes ---------- */
.hub-note-card { display: flex; flex-direction: column; margin-bottom: 0; }
.hub-note-card.due::before, .hub-note-card.overdue::before {
    content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 4px 4px;
    background: var(--hub-amber);
}
.hub-note-card.overdue::before { background: var(--hub-red); }
.hub-note-card.done { opacity: .65; }
.hub-note-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hub-note-when { font-size: 12px; color: var(--hub-muted); white-space: nowrap; }
.hub-note-card.overdue .hub-note-when { color: var(--hub-red); font-weight: 600; }
.hub-note-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.hub-alert-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hub-border-soft); font-size: 13.5px; }
.hub-alert-row:last-child { border-bottom: 0; }
.hub-nav-badge {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--tv-grad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

/* ---------- approvals ---------- */
.hub-approval { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--hub-border-soft); }
.hub-approval:last-child { border-bottom: 0; }
.hub-approval-actions { display: flex; gap: 8px; align-self: center; }


/* ---------- soft (lighter) look for Default and Light ---------- */
[data-theme="default"] .hub-hero p,
[data-theme="light"] .hub-hero p { color: var(--hub-text-2); }

[data-theme="default"] .hub-hero-chip,
[data-theme="light"] .hub-hero-chip {
    color: var(--hub-text);
    background: rgba(255, 255, 255, .6);
    border-color: color-mix(in srgb, var(--hub-primary) 22%, transparent);
}

[data-theme="default"] .hub-hero,
[data-theme="light"] .hub-hero {
    box-shadow: 0 20px 40px -30px color-mix(in srgb, var(--hub-primary) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--hub-primary) 14%, transparent);
}

[data-theme="default"] .hub-hero::before,
[data-theme="light"] .hub-hero::before { opacity: .45; }

[data-theme="default"] .hub-hero::after,
[data-theme="light"] .hub-hero::after {
    background-image: radial-gradient(color-mix(in srgb, var(--hub-primary) 35%, transparent) 1px, transparent 1.2px);
}

/* softer glows everywhere in the two light appearances */
[data-theme="default"],
[data-theme="light"] {
    --orbit-glow: 0 14px 34px -24px color-mix(in srgb, var(--hub-primary) 45%, transparent);
}

[data-theme="default"] .hub-button-primary,
[data-theme="light"] .hub-button-primary,
[data-theme="default"] .hub-nav-link.active,
[data-theme="light"] .hub-nav-link.active {
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(40, 20, 90, .25);
    box-shadow: 0 8px 18px -12px var(--hub-primary);
}