/* ============================================================
   FLEET COMMAND - Custom Radzen Blazor Theme
   Naval Command Center Design System
   Target: Asian Gaming Market (JP/KR/SEA)
   Base: Radzen material-dark
   ============================================================ */

/* Import Radzen material-dark as the foundation */
@import url('/_content/Radzen.Blazor/css/material-dark.css');

/* ============================================================
   SECTION 1: DESIGN TOKENS
   ============================================================ */
:root {
    /* ─── Fleet Command Palette ─── */
    --ci-base: #060b18;
    --ci-surface: #0d1525;
    --ci-surface-light: #132038;
    --ci-surface-hover: #1a2a4a;
    --ci-surface-elevated: #162845;

    --ci-cyan: #00e5ff;
    --ci-cyan-dim: #0097a7;
    --ci-cyan-glow: rgba(0, 229, 255, 0.25);
    --ci-cyan-subtle: rgba(0, 229, 255, 0.08);
    --ci-gold: #ffab00;
    --ci-gold-dim: #c67c00;
    --ci-gold-glow: rgba(255, 171, 0, 0.2);

    --ci-danger: #ff1744;
    --ci-danger-dim: #b71c1c;
    --ci-danger-glow: rgba(255, 23, 68, 0.25);
    --ci-success: #00e676;
    --ci-success-dim: #00a152;
    --ci-warning: #ff9100;
    --ci-info: #448aff;

    /* Performance Rating Colors (WoWS Standard) */
    --ci-rating-bad: #930d0d;
    --ci-rating-below: #cd7a00;
    --ci-rating-avg: #cccc1d;
    --ci-rating-good: #399e3a;
    --ci-rating-vgood: #2f8f47;
    --ci-rating-great: #2c8e99;
    --ci-rating-unicum: #7335cc;
    --ci-rating-sunicum: #6118b0;

    /* Typography */
    --ci-font-display: 'Orbitron', sans-serif;
    --ci-font-heading: 'Rajdhani', sans-serif;
    --ci-font-body: 'Exo 2', sans-serif;

    /* Text Colors */
    --ci-text-primary: #e0e6f0;
    --ci-text-secondary: #8fa0bb;
    --ci-text-muted: #627d9e;
    --ci-text-accent: var(--ci-cyan);

    /* Borders */
    --ci-border: rgba(0, 229, 255, 0.12);
    --ci-border-hover: rgba(0, 229, 255, 0.3);
    --ci-border-active: rgba(0, 229, 255, 0.5);

    /* Glassmorphism */
    --ci-glass: rgba(13, 21, 37, 0.85);
    --ci-glass-light: rgba(22, 40, 69, 0.6);
    --ci-glass-blur: 16px;

    /* Shadows */
    --ci-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --ci-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --ci-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --ci-shadow-cyan: 0 0 20px var(--ci-cyan-glow), 0 0 60px rgba(0, 229, 255, 0.08);
    --ci-shadow-gold: 0 0 20px var(--ci-gold-glow);

    /* Transitions */
    --ci-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --ci-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --ci-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Radzen Variable Overrides ─── */

    /* Root scale */
    --rz-root-font-size: 14px;
    --rz-body-font-size: 1rem;

    /* Typography */
    --rz-text-font-family: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rz-text-color: var(--ci-text-primary);
    --rz-text-title-color: #fff;
    --rz-text-secondary-color: var(--ci-text-secondary);
    --rz-text-tertiary-color: var(--ci-text-muted);

    /* Background colors - deep navy palette */
    --rz-body-background-color: transparent;
    --rz-base-background-color: var(--ci-surface);
    --rz-layout-body-background-color: transparent;

    /* Base scale - navy-tinted greys */
    --rz-base: #1a2a4a;
    --rz-base-50: var(--ci-text-primary);
    --rz-base-100: var(--ci-text-secondary);
    --rz-base-200: var(--ci-text-muted);
    --rz-base-300: #2d3d5a;
    --rz-base-400: #1a2a4a;
    --rz-base-500: #132038;
    --rz-base-600: #0d1525;
    --rz-base-700: #0a1020;
    --rz-base-800: #070c1a;
    --rz-base-900: var(--ci-base);
    --rz-base-light: var(--ci-text-secondary);
    --rz-base-lighter: #fff;
    --rz-base-dark: #0a1020;
    --rz-base-darker: #000;

    /* Primary - Electric Cyan */
    --rz-primary: #00bcd4;
    --rz-primary-light: #4dd0e1;
    --rz-primary-lighter: rgba(0, 188, 212, 0.15);
    --rz-primary-dark: #0097a7;
    --rz-primary-darker: #006064;

    /* On-primary contrast */
    --rz-on-primary: #fff;
    --rz-on-primary-light: #fff;
    --rz-on-primary-lighter: #00bcd4;
    --rz-on-primary-dark: #fff;
    --rz-on-primary-darker: #fff;

    /* Secondary - Slate blue */
    --rz-secondary: #455a64;
    --rz-secondary-light: #78909c;
    --rz-secondary-lighter: rgba(69, 90, 100, 0.15);
    --rz-secondary-dark: #37474f;
    --rz-secondary-darker: #263238;

    --rz-on-secondary: #fff;
    --rz-on-secondary-light: #fff;
    --rz-on-secondary-lighter: #455a64;
    --rz-on-secondary-dark: #fff;
    --rz-on-secondary-darker: #fff;

    /* Success - Neon green */
    --rz-success: var(--ci-success);
    --rz-success-light: #69f0ae;
    --rz-success-lighter: rgba(0, 230, 118, 0.15);
    --rz-success-dark: #00c853;
    --rz-success-darker: #00a152;

    --rz-on-success: #fff;
    --rz-on-success-light: #fff;
    --rz-on-success-lighter: #00e676;
    --rz-on-success-dark: #fff;
    --rz-on-success-darker: #fff;

    /* Danger - Signal red */
    --rz-danger: var(--ci-danger);
    --rz-danger-light: #ff5252;
    --rz-danger-lighter: rgba(255, 23, 68, 0.15);
    --rz-danger-dark: #d50000;
    --rz-danger-darker: #b71c1c;

    --rz-on-danger: #fff;
    --rz-on-danger-light: #fff;
    --rz-on-danger-lighter: #ff1744;
    --rz-on-danger-dark: #fff;
    --rz-on-danger-darker: #fff;

    /* Warning - Amber */
    --rz-warning: var(--ci-warning);
    --rz-warning-light: #ffab40;
    --rz-warning-lighter: rgba(255, 145, 0, 0.15);
    --rz-warning-dark: #e65100;
    --rz-warning-darker: #bf360c;

    --rz-on-warning: #fff;
    --rz-on-warning-light: #fff;
    --rz-on-warning-lighter: #ff9100;
    --rz-on-warning-dark: #fff;
    --rz-on-warning-darker: #fff;

    /* Info - Blue */
    --rz-info: var(--ci-info);
    --rz-info-light: #82b1ff;
    --rz-info-lighter: rgba(68, 138, 255, 0.15);
    --rz-info-dark: #2979ff;
    --rz-info-darker: #2962ff;

    --rz-on-info: #fff;
    --rz-on-info-light: #fff;
    --rz-on-info-lighter: #448aff;
    --rz-on-info-dark: #fff;
    --rz-on-info-darker: #fff;

    /* On-base colors */
    --rz-on-base: #fff;
    --rz-on-base-light: var(--ci-base);
    --rz-on-base-lighter: var(--ci-base);
    --rz-on-base-dark: #fff;
    --rz-on-base-darker: #fff;

    /* Links */
    --rz-link-color: var(--ci-cyan);
    --rz-link-hover-color: var(--ci-gold);
    --rz-link-hover-text-decoration: none;

    /* Borders - navy-tinted */
    --rz-border-color: var(--ci-border);
    --rz-border-normal: 1px solid var(--ci-border);
    --rz-border-focus: 1px solid var(--ci-cyan);

    /* Border radius - slightly more rounded */
    --rz-border-radius: 6px;

    /* ─── Component-Level Overrides ─── */

    /* Card */
    --rz-card-background-color: var(--ci-glass);
    --rz-card-border: 1px solid var(--ci-border);
    --rz-card-border-radius: 8px;
    --rz-card-shadow: var(--ci-shadow-md);

    /* Sidebar */
    --rz-sidebar-background-color: var(--ci-glass);
    --rz-sidebar-border-inline-end: 1px solid var(--ci-border);

    /* Button */
    --rz-button-border-radius: 6px;

    /* Input */
    --rz-input-background-color: var(--ci-surface);
    --rz-input-border: 1px solid var(--ci-border);
    --rz-input-focus-shadow: inset 0 0 0 1px var(--ci-cyan);
    --rz-input-value-color: var(--ci-text-primary);
    --rz-input-placeholder-color: var(--ci-text-muted);

    /* Dialog */
    --rz-dialog-background-color: var(--ci-surface);
    --rz-dialog-shadow: var(--ci-shadow-lg);
    --rz-dialog-title-background-color: var(--ci-surface-light);
    --rz-dialog-title-color: #fff;

    /* Notification */
    --rz-notification-container-background-color: var(--ci-surface);

    /* Tooltip */
    --rz-tooltip-background-color: var(--ci-surface);
    --rz-tooltip-color: var(--ci-text-primary);
    --rz-tooltip-shadow: var(--ci-shadow-md);
    --rz-tooltip-border-radius: 6px;

    /* Grid */
    --rz-grid-cell-border: 1px solid rgba(0, 229, 255, 0.06);
    --rz-grid-bottom-cell-border: 1px solid rgba(0, 229, 255, 0.06);
    --rz-grid-hover-background-color: var(--ci-surface-hover);
    --rz-grid-hover-color: #fff;
    --rz-grid-stripe-background-color: rgba(0, 229, 255, 0.02);

    /* Text selection */
    --rz-text-selection-background-color: rgba(0, 229, 255, 0.25);
    --rz-text-selection-color: #fff;

    /* Shadows - deeper for command-center feel */
    --rz-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.3);
    --rz-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35);
    --rz-shadow-3: 0 4px 16px rgba(0, 0, 0, 0.4);
    --rz-shadow-9: 0 8px 40px rgba(0, 0, 0, 0.5);
}


/* ============================================================
   SECTION 2: BASE RESET & GLOBAL
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: var(--rz-root-font-size);
    scroll-behavior: smooth;
}

body {
    font-family: var(--ci-font-body);
    color: var(--ci-text-primary);
    font-size: 14px;
    line-height: 1.6;
    background: var(--ci-base);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Atmospheric Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        url('/bgmain.jpg') center/cover no-repeat fixed,
        radial-gradient(ellipse at 20% 50%, rgba(0, 229, 255, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 171, 0, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(0, 188, 212, 0.03) 0%, transparent 50%),
        var(--ci-base);
    z-index: -2;
}

body.region-asia::before {
    background:
        url('/bgmainASIA.jpg') center/cover no-repeat fixed,
        radial-gradient(ellipse at 20% 50%, rgba(0, 229, 255, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 171, 0, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(0, 188, 212, 0.03) 0%, transparent 50%),
        var(--ci-base);
}

/* Subtle grid pattern overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -1;
    pointer-events: none;
}

/* ─── Links ─── */
a {
    color: var(--ci-cyan);
    text-decoration: none;
    transition: color var(--ci-transition-fast), text-shadow var(--ci-transition-fast);
}

a:hover, a:focus {
    color: var(--ci-gold);
    text-shadow: 0 0 8px var(--ci-gold-glow);
}

/* ─── Custom Scrollbar ─── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--ci-base);
}

::-webkit-scrollbar-thumb {
    background: var(--ci-cyan-dim);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ci-cyan);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ci-cyan-dim) var(--ci-base);
}


/* ============================================================
   SECTION 3: RADZEN COMPONENT OVERRIDES
   ============================================================ */

/* ─── Body ─── */
.rz-body {
    --rz-body-padding: 0;
    background: transparent !important;
}

/* ─── Sidebar ─── */
.rz-sidebar {
    background: var(--ci-glass) !important;
    backdrop-filter: blur(var(--ci-glass-blur));
    -webkit-backdrop-filter: blur(var(--ci-glass-blur));
    border-right: 1px solid var(--ci-border) !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4), 1px 0 0 var(--ci-border);
    z-index: 100 !important;
}

/* Sidebar top glow accent line */
.rz-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ci-cyan), var(--ci-gold), var(--ci-cyan), transparent);
    z-index: 10;
}

/* ─── Panel Menu (Navigation) ─── */
.rz-panel-menu {
    padding: 0.5rem 0 !important;
}

.rz-panel-menu .rz-navigation-item-wrapper {
    margin: 1px 8px;
    border-radius: 6px;
    transition: all var(--ci-transition-fast);
    position: relative;
    overflow: hidden;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover {
    background: var(--ci-surface-hover) !important;
}

.rz-panel-menu .rz-navigation-item-wrapper:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ci-cyan);
    box-shadow: 0 0 10px var(--ci-cyan-glow);
    border-radius: 0 2px 2px 0;
}

.rz-panel-menu .rz-navigation-item-text {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.rz-panel-menu .rz-navigation-item-wrapper-active {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.12), transparent) !important;
    border-left: 3px solid var(--ci-cyan);
}

.rz-panel-menu .rz-navigation-item-wrapper-active .rz-navigation-item-text {
    color: var(--ci-cyan) !important;
    text-shadow: 0 0 10px var(--ci-cyan-glow);
}

/* ─── Header ─── */
.rz-header {
    background: var(--ci-glass) !important;
    backdrop-filter: blur(var(--ci-glass-blur));
    -webkit-backdrop-filter: blur(var(--ci-glass-blur));
    border-bottom: 1px solid var(--ci-border) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    z-index: 99;
}

/* Header bottom accent line */
.rz-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ci-border-hover), transparent);
}

/* ─── Cards ─── */
.rz-card {
    background: var(--ci-glass) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ci-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--ci-shadow-md) !important;
    transition: border-color var(--ci-transition), box-shadow var(--ci-transition), transform var(--ci-transition);
    position: relative;
    overflow: hidden;
}

.rz-card:hover {
    border-color: var(--ci-border-hover) !important;
    box-shadow: var(--ci-shadow-lg), var(--ci-shadow-cyan) !important;
    transform: translateY(-2px);
}

/* Card top accent line */
.rz-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ci-cyan-dim), transparent);
    opacity: 0.6;
}

/* ─── Data Grids (Command Console Style) ─── */
.rz-datatable {
    background: var(--ci-glass) !important;
    border: 1px solid var(--ci-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.rz-datatable-thead > tr > th {
    background: var(--ci-surface) !important;
    border-bottom: 2px solid var(--ci-cyan-dim) !important;
    font-family: var(--ci-font-heading) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--ci-cyan) !important;
    padding: 0.85rem 1rem !important;
}

.rz-datatable-tbody > tr {
    border-bottom: 1px solid rgba(0, 229, 255, 0.06) !important;
    transition: background var(--ci-transition-fast);
}

.rz-datatable-tbody > tr:hover {
    background: var(--ci-surface-hover) !important;
}

.rz-datatable-tbody > tr > td {
    font-family: var(--ci-font-body) !important;
    font-size: 0.85rem !important;
    padding: 0.65rem 1rem !important;
    color: var(--ci-text-primary);
    border-bottom: none !important;
}

/* Subtle alternating row pattern */
.rz-datatable-tbody > tr:nth-child(even) {
    background: rgba(0, 229, 255, 0.02);
}

/* Grid scan-line effect */
.rz-data-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 229, 255, 0.008) 3px,
        rgba(0, 229, 255, 0.008) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Grid pager */
.rz-paginator {
    background: var(--ci-surface) !important;
    border-top: 1px solid var(--ci-border) !important;
    font-family: var(--ci-font-heading) !important;
}

.rz-paginator .rz-paginator-element {
    color: var(--ci-text-secondary) !important;
    transition: all var(--ci-transition-fast);
}

.rz-paginator .rz-paginator-element:hover {
    color: var(--ci-cyan) !important;
    background: var(--ci-cyan-subtle) !important;
}

.rz-paginator .rz-state-active {
    background: rgba(0, 229, 255, 0.15) !important;
    color: var(--ci-cyan) !important;
    border: 1px solid var(--ci-border-hover) !important;
}

/* Grid filter */
.rz-grid-filter-popup {
    background: var(--ci-surface) !important;
    border: 1px solid var(--ci-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--ci-shadow-lg) !important;
}

/* ─── Buttons ─── */
.rz-button {
    font-family: var(--ci-font-heading) !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    transition: all var(--ci-transition-fast) !important;
}

.rz-button.rz-variant-flat:hover {
    box-shadow: 0 0 12px var(--ci-cyan-glow) !important;
}

.rz-button-md {
    font-size: 0.8rem !important;
}

/* ─── Context Menu ─── */
.rz-contextmenu {
    background: var(--ci-surface) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--ci-border-hover) !important;
    border-radius: 8px !important;
    box-shadow: var(--ci-shadow-lg), var(--ci-shadow-cyan) !important;
    overflow: hidden;
    animation: context-menu-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rz-contextmenu .rz-navigation-item-wrapper {
    transition: all var(--ci-transition-fast);
    margin: 2px 4px;
    border-radius: 4px;
}

.rz-contextmenu .rz-navigation-item-wrapper:hover {
    background: var(--ci-surface-hover) !important;
}

.rz-contextmenu .rz-navigation-item-text {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
}

/* ─── Notifications / Toasts ─── */
.rz-notification {
    background: var(--ci-surface) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--ci-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--ci-shadow-lg) !important;
    font-family: var(--ci-font-heading) !important;
    animation: notification-slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rz-notification-summary {
    font-family: var(--ci-font-heading) !important;
    letter-spacing: 1px !important;
}

/* ─── Dialog ─── */
.rz-dialog {
    background: var(--ci-surface) !important;
    border: 1px solid var(--ci-border-hover) !important;
    border-radius: 10px !important;
    box-shadow: var(--ci-shadow-lg), var(--ci-shadow-cyan) !important;
}

.rz-dialog-titlebar {
    background: var(--ci-surface-light) !important;
    border-bottom: 1px solid var(--ci-border) !important;
    font-family: var(--ci-font-heading) !important;
    letter-spacing: 2px !important;
}

/* ─── Text Inputs ─── */
.rz-textbox {
    background: var(--ci-surface) !important;
    border: 1px solid var(--ci-border) !important;
    border-radius: 6px !important;
    color: var(--ci-text-primary) !important;
    font-family: var(--ci-font-body) !important;
    transition: all var(--ci-transition-fast) !important;
}

.rz-textbox:focus {
    border-color: var(--ci-cyan) !important;
    box-shadow: 0 0 0 2px var(--ci-cyan-glow) !important;
}

/* ─── Tooltip ─── */
.rz-tooltip {
    background: var(--ci-surface) !important;
    border: 1px solid var(--ci-border) !important;
    border-radius: 6px !important;
    box-shadow: var(--ci-shadow-md) !important;
    font-family: var(--ci-font-heading) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px !important;
}

/* ─── Sidebar Toggle ─── */
.rz-sidebar-toggle {
    color: var(--ci-text-secondary) !important;
    transition: color var(--ci-transition-fast) !important;
}

.rz-sidebar-toggle:hover {
    color: var(--ci-cyan) !important;
}

/* ─── Markdown ─── */
.rz-markdown h1,
.rz-markdown h2,
.rz-markdown h3 {
    font-family: var(--ci-font-heading) !important;
    letter-spacing: 1px !important;
    color: var(--ci-cyan) !important;
}

.rz-markdown li {
    color: var(--ci-text-secondary);
    font-size: 0.9rem;
    line-height: 1.8;
}

/* ─── RadzenText Overrides ─── */
.rz-text-display-h1,
.rz-text-display-h2,
.rz-text-h1,
.rz-text-h2,
.rz-text-h3,
.rz-text-h4,
.rz-text-h5,
.rz-text-h6 {
    font-family: var(--ci-font-heading) !important;
    color: var(--ci-text-primary) !important;
}

.rz-text-subtitle1,
.rz-text-subtitle2 {
    font-family: var(--ci-font-heading) !important;
}

.rz-text-overline {
    font-family: var(--ci-font-heading) !important;
    letter-spacing: 2px !important;
    color: var(--ci-text-secondary) !important;
}

/* ─── Column Picker ─── */
.rz-column-picker {
    background: var(--ci-surface) !important;
    border: 1px solid var(--ci-border) !important;
    border-radius: 8px !important;
}

/* ─── ProgressBar Circular ─── */
.rz-progressbar-circular {
    --rz-progressbar-circular-color: var(--ci-cyan) !important;
}


/* ============================================================
   SECTION 4: APP-SPECIFIC COMPONENTS
   ============================================================ */

/* ─── Sidebar Custom Elements ─── */
.sidebar-logo {
    position: relative;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--ci-border);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.04) 0%, transparent 100%);
}

.sidebar-logo-img {
    width: 56px;
    height: 56px;
    filter: drop-shadow(0 0 12px var(--ci-cyan-glow));
    transition: filter var(--ci-transition), transform var(--ci-transition);
}

.sidebar-logo-img:hover {
    filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.5));
    transform: scale(1.05);
}

.sidebar-title {
    font-family: var(--ci-font-display) !important;
    font-size: 1rem !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    color: var(--ci-cyan) !important;
    text-shadow: 0 0 20px var(--ci-cyan-glow);
    margin: 0 !important;
}

.sidebar-subtitle {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.7rem !important;
    letter-spacing: 4px !important;
    text-transform: uppercase;
    color: var(--ci-text-secondary) !important;
    margin: 0 !important;
}

.sidebar-footer {
    position: relative;
    padding: 1rem;
    border-top: 1px solid var(--ci-border);
    background: linear-gradient(0deg, rgba(0, 229, 255, 0.03) 0%, transparent 100%);
}

.sidebar-version {
    font-family: var(--ci-font-display) !important;
    font-size: 0.65rem !important;
    letter-spacing: 2px !important;
    color: var(--ci-text-secondary) !important;
    margin: 0 !important;
}

.sidebar-alpha {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.6rem !important;
    letter-spacing: 4px !important;
    color: var(--ci-gold) !important;
    text-shadow: 0 0 8px var(--ci-gold-glow);
    margin: 0 !important;
    animation: pulse-gold 3s ease-in-out infinite;
}

.sidebar-creator {
    font-family: var(--ci-font-body) !important;
    font-size: 0.6rem !important;
    letter-spacing: 1px !important;
    color: var(--ci-text-secondary) !important;
    margin: 0 !important;
}

/* ─── Header Custom Elements ─── */
.header-welcome {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    color: var(--ci-text-secondary) !important;
}

.header-welcome strong {
    color: var(--ci-cyan) !important;
    font-weight: 600;
}

.header-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ci-success);
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.5);
    margin-right: 8px;
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ─── Page Headings ─── */
.page-heading {
    font-family: var(--ci-font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: #fff !important;
    position: relative;
    display: inline-block;
}

.page-heading::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--ci-cyan), transparent);
    border-radius: 2px;
}

.page-subtitle {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.8rem !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--ci-text-secondary) !important;
}

/* ─── Dashboard ─── */
.dashboard-hero {
    position: relative;
    padding: 2rem 0 1rem;
}

.dashboard-title {
    font-family: var(--ci-font-display) !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase;
    color: #fff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-shadow: 0 0 30px var(--ci-cyan-glow);
}

.dashboard-title span {
    color: var(--ci-cyan);
}

.dashboard-stat-count {
    font-family: var(--ci-font-display) !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--ci-gold) !important;
    text-shadow: 0 0 20px var(--ci-gold-glow);
    display: inline-block;
}

.dashboard-stat-label {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.8rem !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    color: var(--ci-text-secondary) !important;
    margin-left: 0.75rem;
}

.dashboard-cards-container {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--ci-glass) !important;
    border: 1px solid var(--ci-border);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

/* Top accent bar */
.dashboard-cards-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ci-cyan), var(--ci-gold), var(--ci-cyan));
}

/* ─── Player Card ─── */
.player-card {
    background: var(--ci-glass) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--ci-border) !important;
    border-radius: 8px !important;
    width: 320px;
    max-width: 320px;
    transition: all var(--ci-transition);
    position: relative;
    overflow: hidden;
}

.player-card:hover {
    border-color: var(--ci-border-active) !important;
    box-shadow: var(--ci-shadow-lg), var(--ci-shadow-cyan) !important;
    transform: translateY(-4px) scale(1.01);
}

.player-card-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.player-card-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid var(--ci-border-hover);
    box-shadow: 0 0 16px var(--ci-cyan-glow);
    transition: all var(--ci-transition);
    object-fit: cover;
}

.player-card:hover .player-card-avatar {
    border-color: var(--ci-cyan);
    box-shadow: 0 0 24px var(--ci-cyan-glow);
}

.player-card-name {
    font-family: var(--ci-font-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #fff !important;
}

.player-card-label {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.65rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--ci-text-secondary) !important;
    margin: 0 !important;
}

.player-card-value {
    font-family: var(--ci-font-body) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #fff !important;
}

/* Stats section - Color based on performance tier */
.player-stats-section {
    margin: 0 -1px;
    padding: 1rem 1.25rem;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.player-stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.08;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.03) 2px,
        rgba(255, 255, 255, 0.03) 4px
    );
    pointer-events: none;
}

.player-stats-title {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.75rem !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 0.75rem !important;
}

/* Performance tier backgrounds */
.tier-bad { background: linear-gradient(135deg, var(--ci-rating-bad), rgba(147, 13, 13, 0.7)) !important; }
.tier-below { background: linear-gradient(135deg, var(--ci-rating-below), rgba(205, 122, 0, 0.7)) !important; }
.tier-avg { background: linear-gradient(135deg, var(--ci-rating-avg), rgba(204, 204, 29, 0.6)) !important; color: #1a1a00 !important; }
.tier-good { background: linear-gradient(135deg, var(--ci-rating-good), rgba(57, 158, 58, 0.7)) !important; }
.tier-vgood { background: linear-gradient(135deg, var(--ci-rating-vgood), rgba(47, 143, 71, 0.7)) !important; }
.tier-great { background: linear-gradient(135deg, var(--ci-rating-great), rgba(44, 142, 153, 0.7)) !important; }
.tier-unicum { background: linear-gradient(135deg, var(--ci-rating-unicum), rgba(115, 53, 204, 0.8)) !important; }
.tier-sunicum { background: linear-gradient(135deg, var(--ci-rating-sunicum), rgba(97, 24, 176, 0.9)) !important; }

.tier-avg .rz-color-on-primary-light { color: #1a1a00 !important; }

/* Card footer links */
.player-card-links {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.player-card-links a {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.75rem !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--ci-text-secondary) !important;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all var(--ci-transition-fast);
}

.player-card-links a:hover {
    color: var(--ci-cyan) !important;
    background: var(--ci-cyan-subtle);
    text-shadow: 0 0 8px var(--ci-cyan-glow);
}

.player-card-divider {
    color: var(--ci-text-muted) !important;
    font-size: 0.7rem;
}

/* ─── Loading States ─── */
.loading-radar {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 2rem auto;
}

.loading-radar::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--ci-border);
    border-radius: 50%;
    animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.loading-radar::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--ci-cyan-dim);
    border-radius: 50%;
    animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s;
}

/* ─── News / Changelog ─── */
.changelog-card {
    background: var(--ci-glass) !important;
    border: 1px solid var(--ci-border) !important;
    border-radius: 8px !important;
    padding: 1.5rem 2rem !important;
    margin-bottom: 1rem !important;
    position: relative;
    overflow: hidden;
    transition: all var(--ci-transition);
}

.changelog-card:hover {
    border-color: var(--ci-border-hover) !important;
    transform: translateX(4px);
}

/* Timeline connector */
.changelog-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--ci-cyan), var(--ci-cyan-dim));
    border-radius: 0 2px 2px 0;
}

.changelog-card h1 {
    font-family: var(--ci-font-heading) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: var(--ci-cyan) !important;
    margin-top: 0 !important;
}

.changelog-card li {
    color: var(--ci-text-secondary);
    font-family: var(--ci-font-body);
    line-height: 1.8;
    font-size: 0.85rem;
}

/* ─── Error Page ─── */
.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    text-align: center;
    padding: 2rem;
}

.error-code {
    font-family: var(--ci-font-display) !important;
    font-size: 6rem !important;
    font-weight: 900 !important;
    color: var(--ci-danger) !important;
    text-shadow: 0 0 40px var(--ci-danger-glow), 0 0 80px rgba(255, 23, 68, 0.1);
    line-height: 1;
    margin-bottom: 1rem;
    animation: glitch-text 3s ease-in-out infinite;
    position: relative;
}

.error-title {
    font-family: var(--ci-font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase;
    color: var(--ci-text-primary) !important;
    margin-bottom: 1rem;
}

.error-message {
    font-family: var(--ci-font-body) !important;
    font-size: 1rem !important;
    color: var(--ci-text-secondary) !important;
    max-width: 500px;
    line-height: 1.6;
}

.error-decor-line {
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ci-danger), transparent);
    margin: 1.5rem auto;
    border-radius: 1px;
}

/* ─── 404 Page ─── */
.not-found-container {
    text-align: center;
    padding: 5rem 2rem;
}

.not-found-code {
    font-family: var(--ci-font-display) !important;
    font-size: 8rem !important;
    font-weight: 900 !important;
    color: var(--ci-text-muted) !important;
    text-shadow: 0 0 30px rgba(74, 90, 120, 0.3);
    line-height: 1;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

.not-found-title {
    font-family: var(--ci-font-heading) !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 6px !important;
    text-transform: uppercase;
    color: var(--ci-text-primary) !important;
}

.not-found-subtitle {
    font-family: var(--ci-font-body) !important;
    font-size: 1rem !important;
    color: var(--ci-text-secondary) !important;
}

/* ─── Iframe Pages (CB, Leaderboard, etc.) ─── */
.iframe-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
    border: 1px solid var(--ci-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ci-surface);
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Top accent on iframe container */
.iframe-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ci-cyan), transparent);
    z-index: 10;
}

/* ─── Japanese Wave Decoration ─── */
.wave-decoration {
    position: relative;
    overflow: hidden;
}

.wave-decoration::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10%;
    right: -10%;
    height: 60px;
    background:
        radial-gradient(ellipse at 25% 100%, var(--ci-cyan-subtle) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 100%, rgba(255, 171, 0, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

/* ─── Clan Member Page ─── */
.clan-header {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ci-border);
    margin-bottom: 1.5rem;
}

.clan-name {
    font-family: var(--ci-font-heading) !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
}

.clan-name .clan-tag {
    color: var(--ci-cyan);
    font-family: var(--ci-font-display);
    font-size: 1rem;
}

.clan-member-count {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    color: var(--ci-text-secondary) !important;
}

/* Role badge colors in clan grid */
.role-commander { color: var(--ci-gold) !important; }
.role-executive { color: var(--ci-cyan) !important; }
.role-recruitment { color: var(--ci-success) !important; }
.role-officer { color: var(--ci-info) !important; }
.role-private { color: var(--ci-text-secondary) !important; }

/* ─── Settings Page ─── */
.settings-section {
    background: var(--ci-glass);
    backdrop-filter: blur(var(--ci-glass-blur));
    -webkit-backdrop-filter: blur(var(--ci-glass-blur));
    border: 1px solid var(--ci-border);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}

/* Top accent bar */
.settings-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ci-cyan), var(--ci-gold), var(--ci-cyan));
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.settings-section-title {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    color: var(--ci-text-primary) !important;
    margin: 0 !important;
}

.settings-label {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    color: var(--ci-cyan) !important;
    margin: 0 0 0.25rem 0 !important;
}

.settings-description {
    font-family: var(--ci-font-body) !important;
    font-size: 0.85rem !important;
    color: var(--ci-text-secondary) !important;
    margin: 0 0 1.25rem 0 !important;
}

/* Theme Grid */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.theme-card {
    background: var(--ci-surface);
    border: 1px solid var(--ci-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--ci-transition);
    position: relative;
}

.theme-card:hover {
    border-color: var(--ci-border-hover);
    box-shadow: var(--ci-shadow-md), 0 0 16px var(--ci-cyan-glow);
    transform: translateY(-3px);
}

.theme-card-active {
    border-color: var(--ci-cyan) !important;
    box-shadow: var(--ci-shadow-lg), var(--ci-shadow-cyan) !important;
}

.theme-card-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ci-cyan);
    box-shadow: 0 0 10px var(--ci-cyan-glow);
}

/* Theme preview swatch */
.theme-card-preview {
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    overflow: hidden;
}

.theme-card-preview-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.theme-card-preview-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 1rem;
}

/* Theme card body */
.theme-card-body {
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--ci-border);
}

.theme-card-name {
    font-family: var(--ci-font-heading) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: var(--ci-text-primary) !important;
    margin: 0 !important;
}

.theme-card-desc {
    font-family: var(--ci-font-body) !important;
    font-size: 0.78rem !important;
    color: var(--ci-text-secondary) !important;
    margin: 0.25rem 0 0 0 !important;
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    .theme-grid {
        grid-template-columns: 1fr;
    }

    .settings-section {
        padding: 1rem 1.25rem;
    }
}


/* ============================================================
   SECTION 5: ANIMATIONS & KEYFRAMES
   ============================================================ */

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(0, 230, 118, 0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 16px rgba(0, 230, 118, 0.8); }
}

@keyframes pulse-gold {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes radar-ping {
    0% { transform: scale(0.5); opacity: 1; border-color: var(--ci-cyan); }
    100% { transform: scale(1.5); opacity: 0; border-color: transparent; }
}

@keyframes context-menu-in {
    0% { opacity: 0; transform: scale(0.95) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes notification-slide-in {
    0% { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes glitch-text {
    0%, 95%, 100% { transform: translateX(0); }
    96% { transform: translateX(-4px); }
    97% { transform: translateX(4px); }
    98% { transform: translateX(-2px); }
    99% { transform: translateX(2px); }
}

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 8px var(--ci-cyan-glow); }
    50% { box-shadow: 0 0 20px var(--ci-cyan-glow), 0 0 40px rgba(0, 229, 255, 0.1); }
}

@keyframes border-glow {
    0%, 100% { border-color: var(--ci-border); }
    50% { border-color: var(--ci-border-hover); }
}

@keyframes scan-line {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* Staggered entrance animations */
.animate-in {
    animation: fade-in-up 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-in-1 { animation-delay: 50ms; }
.animate-in-2 { animation-delay: 100ms; }
.animate-in-3 { animation-delay: 150ms; }
.animate-in-4 { animation-delay: 200ms; }
.animate-in-5 { animation-delay: 250ms; }
.animate-in-6 { animation-delay: 300ms; }
.animate-in-7 { animation-delay: 350ms; }
.animate-in-8 { animation-delay: 400ms; }

.animate-slide-left {
    animation: slide-in-left 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* ============================================================
   SECTION 6: UTILITY CLASSES
   ============================================================ */

.text-cyan { color: var(--ci-cyan) !important; }
.text-gold { color: var(--ci-gold) !important; }
.text-danger { color: var(--ci-danger) !important; }
.text-success { color: var(--ci-success) !important; }
.text-muted { color: var(--ci-text-muted) !important; }
.text-secondary { color: var(--ci-text-secondary) !important; }

.glow-cyan { text-shadow: 0 0 10px var(--ci-cyan-glow) !important; }
.glow-gold { text-shadow: 0 0 10px var(--ci-gold-glow) !important; }

.font-display { font-family: var(--ci-font-display) !important; }
.font-heading { font-family: var(--ci-font-heading) !important; }
.font-body { font-family: var(--ci-font-body) !important; }

.border-glow {
    border: 1px solid var(--ci-border-hover);
    animation: border-glow 3s ease-in-out infinite;
}

.glass {
    background: var(--ci-glass) !important;
    backdrop-filter: blur(var(--ci-glass-blur));
    -webkit-backdrop-filter: blur(var(--ci-glass-blur));
}

/* Decorative horizontal rule */
.ci-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ci-border-hover), transparent);
    border: none;
    margin: 1.5rem 0;
}

/* Badge-like labels */
.ci-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-family: var(--ci-font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid;
}

.ci-badge-cyan {
    color: var(--ci-cyan);
    border-color: rgba(0, 229, 255, 0.3);
    background: rgba(0, 229, 255, 0.08);
}

.ci-badge-gold {
    color: var(--ci-gold);
    border-color: rgba(255, 171, 0, 0.3);
    background: rgba(255, 171, 0, 0.08);
}

.ci-badge-danger {
    color: var(--ci-danger);
    border-color: rgba(255, 23, 68, 0.3);
    background: rgba(255, 23, 68, 0.08);
}

.ci-plan-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-family: var(--ci-font-heading);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    border: 1px solid;
}

.ci-plan-pill-free {
    color: var(--ci-gold);
    border-color: rgba(255, 171, 0, 0.35);
    background: rgba(255, 171, 0, 0.08);
}

.ci-plan-pill-premium {
    color: var(--ci-cyan);
    border-color: rgba(0, 229, 255, 0.35);
    background: rgba(0, 229, 255, 0.08);
}

.premium-lock-shell {
    position: relative;
    min-height: 55vh;
}

.premium-lock-content {
    transition: filter var(--ci-transition), transform var(--ci-transition);
}

.premium-lock-content-blurred {
    filter: blur(7px) saturate(0.7);
    transform: scale(0.995);
    pointer-events: none;
    user-select: none;
}

.premium-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.premium-lock-card {
    width: min(520px, 95%);
    padding: 1.25rem 1.25rem 1.4rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 171, 0, 0.38);
    background: rgba(5, 11, 24, 0.84);
    backdrop-filter: blur(10px);
    text-align: center;
    box-shadow: var(--ci-shadow-md), 0 0 24px rgba(255, 171, 0, 0.12);
}

.premium-lock-icon {
    font-size: 1.9rem;
    color: var(--ci-gold);
}

.premium-lock-title {
    margin-top: 0.55rem;
    font-family: var(--ci-font-heading);
    font-size: 1.05rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}

.premium-lock-subtitle {
    margin-top: 0.45rem;
    margin-bottom: 0.95rem;
    color: var(--ci-text-secondary);
    line-height: 1.45;
}

.premium-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid rgba(255, 171, 0, 0.35);
    border-radius: 8px;
    background: rgba(255, 171, 0, 0.08);
    padding: 0.75rem 0.9rem;
    box-shadow: 0 0 14px rgba(255, 171, 0, 0.12);
}

.premium-info-icon {
    color: var(--ci-gold);
    margin-top: 2px;
}

.premium-info-title {
    font-family: var(--ci-font-heading);
    font-size: 0.78rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
}

.premium-info-subtitle {
    margin-top: 0.18rem;
    color: var(--ci-text-secondary);
    font-size: 0.83rem;
}

.premium-anon-text {
    filter: blur(4px);
    opacity: 0.9;
}

.billing-card {
    border: 1px solid var(--ci-border);
    background: var(--ci-glass);
}

.billing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.84rem;
    color: var(--ci-text-secondary);
}

.billing-row strong {
    color: var(--ci-text-primary);
    font-weight: 600;
}

.billing-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 171, 0, 0.3);
    border-radius: 8px;
    background: rgba(255, 171, 0, 0.08);
    color: var(--ci-text-secondary);
    font-size: 0.8rem;
}

.player-lookup-shell {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lookup-search-card,
.lookup-grid-card {
    border: 1px solid var(--ci-border);
    background: var(--ci-glass);
}

.lookup-hero-card,
.lookup-chart-card,
.lookup-legend-card {
    border: 1px solid var(--ci-border);
    background: var(--ci-glass);
}

.lookup-hero-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 440px);
    gap: 1rem;
    align-items: stretch;
}

.lookup-hero-label {
    font-family: var(--ci-font-heading);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ci-text-secondary);
}

.lookup-player-name {
    font-family: var(--ci-font-display) !important;
    font-size: 1.8rem !important;
    letter-spacing: 2px !important;
    color: #fff !important;
    margin-top: 0.15rem;
}

.lookup-player-sub {
    color: var(--ci-text-secondary);
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.lookup-xpr-meter {
    margin-top: 0.95rem;
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.06), rgba(115, 53, 204, 0.06));
}

.lookup-xpr-meter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.lookup-xpr-tier {
    font-family: var(--ci-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.lookup-xpr-band {
    margin-top: 0.6rem;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.lookup-xpr-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 300ms ease;
}

.lookup-xpr-fill-bot { background: #930d0d; }
.lookup-xpr-fill-vbad { background: #cd3333; }
.lookup-xpr-fill-bad { background: #cc7a00; }
.lookup-xpr-fill-below { background: #ccb800; }
.lookup-xpr-fill-avg { background: #849b24; }
.lookup-xpr-fill-good { background: #4d7326; }
.lookup-xpr-fill-vgood { background: #399e3a; }
.lookup-xpr-fill-great { background: #3972c6; }
.lookup-xpr-fill-unicum { background: #793db6; }
.lookup-xpr-fill-sunicum { background: #401070; }

.lookup-xpr-value-row {
    margin-top: 0.55rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.lookup-xpr-value {
    font-family: var(--ci-font-display);
    font-size: 1.35rem;
    letter-spacing: 1px;
}

.lookup-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 0.65rem;
}

.lookup-kpi-card {
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 8px;
    padding: 0.7rem 0.75rem;
    background: rgba(6, 11, 24, 0.55);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lookup-kpi-label {
    font-family: var(--ci-font-heading);
    font-size: 0.62rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ci-text-secondary);
}

.lookup-kpi-card strong {
    font-family: var(--ci-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ci-text-primary);
}

.lookup-env-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    font-family: var(--ci-font-heading);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: var(--ci-cyan);
    border: 1px solid rgba(0, 229, 255, 0.35);
    background: rgba(0, 229, 255, 0.08);
}

.lookup-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.lookup-summary-stat {
    border: 1px solid var(--ci-border);
    background: var(--ci-glass);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lookup-stat-label {
    font-family: var(--ci-font-heading);
    font-size: 0.62rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ci-text-secondary);
}

.lookup-stat-value {
    font-family: var(--ci-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ci-text-primary);
}

.lookup-chart-title {
    font-family: var(--ci-font-heading);
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ci-text-secondary);
}

.lookup-grid-toolbar {
    margin-bottom: 0.9rem;
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: end;
    flex-wrap: wrap;
}

.lookup-grid-count {
    font-family: var(--ci-font-heading);
    font-size: 0.74rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ci-cyan);
}

.lookup-xpr-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    font-family: var(--ci-font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

.lookup-xpr-pill-bot { background: #930d0d; }
.lookup-xpr-pill-vbad { background: #cd3333; }
.lookup-xpr-pill-bad { background: #cc7a00; }
.lookup-xpr-pill-below { background: #ccb800; color: #1a1a1a; }
.lookup-xpr-pill-avg { background: #849b24; color: #0c1300; }
.lookup-xpr-pill-good { background: #4d7326; }
.lookup-xpr-pill-vgood { background: #399e3a; }
.lookup-xpr-pill-great { background: #3972c6; }
.lookup-xpr-pill-unicum { background: #793db6; }
.lookup-xpr-pill-sunicum { background: #401070; }

.lookup-xpr-legend {
    margin-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.lookup-legend-item {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.58rem;
    font-family: var(--ci-font-heading);
    font-size: 0.62rem;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #fff;
}

.tier-bot { background: #930d0d; }
.tier-vbad { background: #cd3333; }
.tier-bad { background: #cc7a00; }
.tier-below { background: #ccb800; color: #1a1a1a; }
.tier-avg { background: #849b24; color: #101700; }
.tier-good { background: #4d7326; }
.tier-vgood { background: #399e3a; }
.tier-great { background: #3972c6; }
.tier-unicum { background: #793db6; }
.tier-sunicum { background: #401070; }

.text-bot {
    color: #930d0d;
    font-weight: 700;
}

.text-vbad {
    color: #cd3333;
    font-weight: 700;
}

.text-bad {
    color: #cc7a00;
    font-weight: 700;
}

.text-below {
    color: #ccb800;
    font-weight: 700;
}

.text-avg {
    color: #849b24;
    font-weight: 700;
}

.text-good {
    color: #4d7326;
    font-weight: 700;
}

.text-vgood {
    color: #4d7326;
    font-weight: 700;
}

.text-great {
    color: #3972c6;
    font-weight: 700;
}

.text-unicum {
    color: #793db6;
    font-weight: 700;
}

.text-sunicum {
    color: #401070;
    font-weight: 700;
}

@media (max-width: 1040px) {
    .lookup-hero-grid {
        grid-template-columns: 1fr;
    }

    .lookup-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media (max-width: 768px) {
    .lookup-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lookup-grid-toolbar {
        align-items: stretch;
    }

    .lookup-grid-count {
        width: 100%;
    }
}


/* ============================================================
   SECTION 7: BLAZOR FRAMEWORK OVERRIDES
   ============================================================ */

#blazor-error-ui {
    background: var(--ci-surface);
    bottom: 0;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.5);
    display: none;
    left: 0;
    padding: 0.8rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 10000;
    border-top: 2px solid var(--ci-danger);
    color: var(--ci-text-primary);
    font-family: var(--ci-font-heading);
    letter-spacing: 1px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.6rem;
    color: var(--ci-text-secondary);
}

.blazor-error-boundary {
    background: var(--ci-danger-dim);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: 8px;
    border: 1px solid var(--ci-danger);
    font-family: var(--ci-font-heading);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Loading progress */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--ci-surface-light);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--ci-cyan);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
    filter: drop-shadow(0 0 6px var(--ci-cyan-glow));
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    font-family: var(--ci-font-display);
    color: var(--ci-cyan);
    letter-spacing: 2px;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}


/* ============================================================
   SECTION 8: RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .dashboard-title {
        font-size: 1.4rem !important;
        letter-spacing: 2px !important;
    }

    .dashboard-stat-count {
        font-size: 1.3rem !important;
    }

    .player-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-title {
        font-size: 0.85rem !important;
        letter-spacing: 2px !important;
    }

    body::after {
        display: none; /* Remove grid on mobile for performance */
    }
}

@media (max-width: 1200px) {
    .dashboard-cards-container {
        padding: 1rem;
    }
}