/* ==========================================================================
   ARKA — Optional panel skin (appearance only)
   ========================================================================== */

/* ── Shared Arka accents ─────────────────────────────────────────────── */
html[data-panel-skin="arka"] {
    --arka-cyan: #22d3ee;
    --arka-purple: #8b5cf6;
    --arka-magenta: #e879f9;
    --arka-glow: 0 0 40px rgba(34, 211, 238, 0.16), 0 0 80px rgba(139, 92, 246, 0.12);
}

/* ── DARK (reference look — default for Arka) ─────────────────────────── */
html[data-panel-skin="arka"][data-theme="dark"] {
    --arka-bg: #0a0c18;
    --arka-bg-elevated: #101322;
    --arka-surface: rgba(20, 24, 46, 0.72);
    --arka-surface-2: rgba(28, 32, 58, 0.85);
    --arka-border: rgba(148, 163, 184, 0.14);
    --arka-border-glow: rgba(139, 92, 246, 0.45);
    --arka-text: #f1f5f9;
    --arka-text-muted: #94a3b8;
    --arka-glass: blur(18px);

    --club-bg: var(--arka-bg);
    --club-bg-subtle: #0c0e1a;
    --club-surface: var(--arka-surface);
    --club-surface-elevated: var(--arka-surface-2);
    --club-border: var(--arka-border);
    --club-border-strong: rgba(148, 163, 184, 0.22);
    --club-text: var(--arka-text);
    --club-text-muted: var(--arka-text-muted);
    --club-text-subtle: #64748b;

    --fx-bg: var(--arka-bg);
    --fx-bg-elevated: var(--arka-bg-elevated);
    --fx-surface: var(--arka-surface);
    --fx-surface-2: var(--arka-surface-2);
    --fx-surface-3: #161a30;
    --fx-border: var(--arka-border);
    --fx-border-strong: rgba(148, 163, 184, 0.2);
    --fx-text: var(--arka-text);
    --fx-text-secondary: #cbd5e1;
    --fx-text-muted: var(--arka-text-muted);
    --fx-accent: var(--club-accent, var(--arka-cyan));
    --fx-accent-2: var(--club-secondary, var(--arka-purple));
    --fx-accent-glow: color-mix(in srgb, var(--fx-accent) 26%, transparent);
    --fx-header-bg: rgba(10, 12, 24, 0.88);
    --fx-header-border: var(--arka-border);
    --fx-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
    --fx-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
    --fx-shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.55);
    --fx-chart-grid: rgba(148, 163, 184, 0.12);
    --fx-chart-muted: #94a3b8;
    --fx-hero-overlay: linear-gradient(105deg, rgba(8, 10, 20, 0.92) 0%, rgba(8, 10, 20, 0.5) 42%, rgba(139, 92, 246, 0.35) 100%);
    --fx-hero-overlay-dashboard: linear-gradient(100deg, rgba(8, 10, 20, 0.94) 0%, rgba(8, 10, 20, 0.48) 38%, rgba(34, 211, 238, 0.22) 100%);
    --fx-nav-text: #94a3b8;
    --fx-nav-text-hover: #f8fafc;
    --fx-nav-text-active: #ffffff;
    --fx-nav-bg-hover: rgba(139, 92, 246, 0.16);
    --fx-nav-bg-active: rgba(139, 92, 246, 0.32);
    --fx-nav-indicator: var(--arka-cyan);
    --fx-nav-icon: #64748b;
    --fx-nav-icon-hover: var(--arka-cyan);
    --fx-nav-icon-active: #fff;
    --fx-nav-icon-bg-active: rgba(139, 92, 246, 0.35);
    --fx-row-hover: rgba(139, 92, 246, 0.1);
    --fx-link: #a5b4fc;
    --fx-link-hover: #e0e7ff;

    color-scheme: dark;
}

/* ── LIGHT (Arka روشن) ───────────────────────────────────────────────── */
html[data-panel-skin="arka"][data-theme="light"] {
    --arka-bg: #eef2ff;
    --arka-bg-elevated: #f8faff;
    --arka-surface: rgba(255, 255, 255, 0.82);
    --arka-surface-2: rgba(255, 255, 255, 0.94);
    --arka-border: rgba(99, 102, 241, 0.14);
    --arka-border-glow: rgba(139, 92, 246, 0.28);
    --arka-text: #0f172a;
    --arka-text-muted: #64748b;
    --arka-glass: blur(14px);

    --club-bg: var(--arka-bg);
    --club-bg-subtle: #e8edff;
    --club-surface: var(--arka-surface);
    --club-surface-elevated: var(--arka-surface-2);
    --club-border: var(--arka-border);
    --club-border-strong: rgba(99, 102, 241, 0.22);
    --club-text: var(--arka-text);
    --club-text-muted: var(--arka-text-muted);
    --club-text-subtle: #94a3b8;

    --fx-bg: var(--arka-bg);
    --fx-bg-elevated: var(--arka-bg-elevated);
    --fx-surface: var(--arka-surface);
    --fx-surface-2: var(--arka-surface-2);
    --fx-surface-3: #f1f5ff;
    --fx-border: var(--arka-border);
    --fx-border-strong: rgba(99, 102, 241, 0.2);
    --fx-text: var(--arka-text);
    --fx-text-secondary: #334155;
    --fx-text-muted: var(--arka-text-muted);
    --fx-accent: var(--club-accent, #7c3aed);
    --fx-accent-2: var(--club-secondary, #6366f1);
    --fx-accent-glow: color-mix(in srgb, var(--fx-accent) 14%, transparent);
    --fx-header-bg: rgba(255, 255, 255, 0.88);
    --fx-header-border: var(--arka-border);
    --fx-shadow-sm: 0 2px 8px rgba(79, 70, 229, 0.08);
    --fx-shadow-md: 0 8px 24px rgba(79, 70, 229, 0.1);
    --fx-shadow-lg: 0 16px 40px rgba(79, 70, 229, 0.12);
    --fx-chart-grid: rgba(99, 102, 241, 0.1);
    --fx-chart-muted: #94a3b8;
    --fx-hero-overlay: linear-gradient(105deg, rgba(255, 255, 255, 0.92) 0%, rgba(238, 242, 255, 0.75) 45%, rgba(139, 92, 246, 0.15) 100%);
    --fx-hero-overlay-dashboard: linear-gradient(100deg, rgba(255, 255, 255, 0.9) 0%, rgba(238, 242, 255, 0.7) 40%, rgba(34, 211, 238, 0.12) 100%);
    --fx-nav-text: #64748b;
    --fx-nav-text-hover: #0f172a;
    --fx-nav-text-active: #4c1d95;
    --fx-nav-bg-hover: rgba(139, 92, 246, 0.1);
    --fx-nav-bg-active: rgba(139, 92, 246, 0.18);
    --fx-nav-indicator: var(--arka-purple);
    --fx-nav-icon: #94a3b8;
    --fx-nav-icon-hover: var(--arka-purple);
    --fx-nav-icon-active: #fff;
    --fx-nav-icon-bg-active: rgba(139, 92, 246, 0.85);
    --fx-row-hover: rgba(139, 92, 246, 0.06);
    --fx-link: #5b21b6;
    --fx-link-hover: #4c1d95;

    color-scheme: light;
}

html[data-panel-skin="arka"] body.fitpro-ui,
html[data-panel-skin="arka"] body.club-landing,
body.theme-skin-arka.fitpro-ui,
body.theme-skin-arka.club-landing {
    background: var(--arka-bg) !important;
    color: var(--arka-text);
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

html[data-panel-skin="arka"] .fitpro-ui .club-sidebar,
html[data-panel-skin="arka"] .fitpro-ui .fx-sidebar,
body.theme-skin-arka.fitpro-ui .club-sidebar,
body.theme-skin-arka.fitpro-ui .fx-sidebar {
    background: linear-gradient(180deg, #0e1020 0%, #141832 48%, #0a0c18 100%) !important;
    border-inline-start-color: var(--arka-border) !important;
    box-shadow: -10px 0 36px rgba(0, 0, 0, 0.5), inset -1px 0 0 rgba(139, 92, 246, 0.12) !important;
}

html[data-panel-skin="arka"] .fitpro-ui .club-content,
html[data-panel-skin="arka"] .fitpro-ui .club-main,
html[data-panel-skin="arka"] .fitpro-ui .fx-workspace,
body.theme-skin-arka.fitpro-ui .club-content,
body.theme-skin-arka.fitpro-ui .fx-workspace {
    background:
        radial-gradient(ellipse 80% 50% at 100% 0%, rgba(139, 92, 246, 0.08), transparent 50%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(34, 211, 238, 0.06), transparent 45%),
        var(--arka-bg);
}

body.theme-skin-arka.fitpro-ui .club-sidebar__brand,
body.theme-skin-arka.fitpro-ui .fx-sidebar__brand {
    border-bottom-color: var(--arka-border);
}

body.theme-skin-arka.fitpro-ui .pro-nav-item--active,
body.theme-skin-arka.fitpro-ui .club-nav-item--active {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.06));
    box-shadow: inset 3px 0 0 var(--arka-cyan);
}

html[data-panel-skin="arka"] .fitpro-ui .club-header,
html[data-panel-skin="arka"] .fitpro-ui .fx-header,
body.theme-skin-arka.fitpro-ui .club-header,
body.theme-skin-arka.fitpro-ui .fx-header {
    background: var(--fx-header-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--arka-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* ── Cards & panels ───────────────────────────────────────────────────── */

body.theme-skin-arka.fitpro-ui .fx-card,
body.theme-skin-arka.fitpro-ui .pro-card,
body.theme-skin-arka.fitpro-ui .club-card,
body.theme-skin-arka.fitpro-ui .rounded-2xl.border.bg-white,
body.theme-skin-arka.fitpro-ui .app-data-grid {
    background: var(--arka-surface) !important;
    border-color: var(--arka-border) !important;
    box-shadow: var(--fx-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--arka-text);
}

body.theme-skin-arka.fitpro-ui .fx-card:hover,
body.theme-skin-arka.fitpro-ui .pro-kpi:hover {
    border-color: color-mix(in srgb, var(--arka-cyan) 35%, var(--arka-border)) !important;
    box-shadow: var(--fx-shadow-lg), 0 0 0 1px rgba(34, 211, 238, 0.08);
}

body.theme-skin-arka.fitpro-ui .pro-kpi,
body.theme-skin-arka.fitpro-ui .fit-kpi,
body.theme-skin-arka.fitpro-ui .fx-stat-card {
    background: linear-gradient(145deg, rgba(22, 26, 48, 0.95), rgba(14, 16, 32, 0.98));
    border: 1px solid var(--arka-border);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

body.theme-skin-arka.fitpro-ui .pro-kpi::before,
body.theme-skin-arka.fitpro-ui .fit-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--arka-cyan), var(--arka-purple));
    border-radius: 3px 0 0 3px;
    opacity: 0.85;
}

body.theme-skin-arka.fitpro-ui .pro-kpi__value,
body.theme-skin-arka.fitpro-ui .fit-kpi__value {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
}

/* ── Hero / page headers ────────────────────────────────────────────────── */

body.theme-skin-arka.fitpro-ui .fx-page-header,
body.theme-skin-arka.fitpro-ui .fx-banner {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--arka-border-glow);
    box-shadow: var(--arka-glow), var(--fx-shadow-lg);
}

body.theme-skin-arka.fitpro-ui .fx-page-header__overlay,
body.theme-skin-arka.fitpro-ui .fx-banner__overlay {
    background: var(--fx-hero-overlay-dashboard) !important;
}

body.theme-skin-arka.fitpro-ui .fx-page-header__title,
body.theme-skin-arka.fitpro-ui .fx-banner__title {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

body.theme-skin-arka.fitpro-ui .fx-page-header__subtitle {
    color: rgba(241, 245, 249, 0.85);
}

/* ── Tables ───────────────────────────────────────────────────────────── */

body.theme-skin-arka.fitpro-ui .club-table,
body.theme-skin-arka.fitpro-ui .fx-table {
    --fx-row-hover: rgba(139, 92, 246, 0.06);
}

body.theme-skin-arka.fitpro-ui .club-table thead th,
body.theme-skin-arka.fitpro-ui .fx-table thead th {
    background: rgba(14, 16, 32, 0.9);
    color: var(--arka-text-muted);
    border-color: var(--arka-border);
}

body.theme-skin-arka.fitpro-ui .club-table tbody tr,
body.theme-skin-arka.fitpro-ui .fx-table tbody tr {
    border-color: var(--arka-border);
}

body.theme-skin-arka.fitpro-ui .club-table tbody tr:hover,
body.theme-skin-arka.fitpro-ui .fx-table tbody tr:hover {
    background: var(--fx-row-hover);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

body.theme-skin-arka.fitpro-ui .club-btn-primary,
body.theme-skin-arka.fitpro-ui .bg-brand-500 {
    background: linear-gradient(135deg, var(--club-primary, #7c3aed), var(--club-secondary, #6366f1)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
}

body.theme-skin-arka.fitpro-ui .club-btn-primary:hover {
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.45), 0 0 0 1px rgba(34, 211, 238, 0.2);
}

body.theme-skin-arka.fitpro-ui .club-btn-ghost,
body.theme-skin-arka.fitpro-ui .club-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--arka-border);
    color: var(--arka-text);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

html[data-panel-skin="arka"] .fitpro-ui input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-panel-skin="arka"] .fitpro-ui select,
html[data-panel-skin="arka"] .fitpro-ui textarea,
body.theme-skin-arka.fitpro-ui input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body.theme-skin-arka.fitpro-ui select,
body.theme-skin-arka.fitpro-ui textarea {
    background: color-mix(in srgb, var(--arka-bg) 88%, var(--arka-surface)) !important;
    border-color: var(--arka-border) !important;
    color: var(--arka-text) !important;
}

body.theme-skin-arka.fitpro-ui input:focus,
body.theme-skin-arka.fitpro-ui select:focus,
body.theme-skin-arka.fitpro-ui textarea:focus {
    border-color: color-mix(in srgb, var(--arka-cyan) 50%, transparent) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */

body.theme-skin-arka.fitpro-ui .fx-tab-bar {
    background: rgba(14, 16, 32, 0.7);
    border: 1px solid var(--arka-border);
    border-radius: 12px;
    padding: 0.25rem;
}

body.theme-skin-arka.fitpro-ui .fx-tab-bar a {
    color: var(--arka-text-muted);
    border-radius: 8px;
}

body.theme-skin-arka.fitpro-ui .fx-tab-bar a.is-active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(34, 211, 238, 0.15));
    color: #fff;
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.25);
}

/* ── Alerts & badges ────────────────────────────────────────────────────── */

body.theme-skin-arka.fitpro-ui .club-alert-success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

body.theme-skin-arka.fitpro-ui .club-alert-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

/* ── Auth ───────────────────────────────────────────────────────────────── */

body.theme-skin-arka.fx-auth .fx-auth__card {
    background: rgba(14, 16, 32, 0.92);
    border: 1px solid var(--arka-border-glow);
    box-shadow: var(--arka-glow), 0 24px 64px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
}

body.theme-skin-arka.fx-auth .fx-auth__scene-glow {
    background: radial-gradient(circle at 30% 50%, rgba(139, 92, 246, 0.35), transparent 55%),
        radial-gradient(circle at 70% 30%, rgba(34, 211, 238, 0.2), transparent 50%);
}

/* ── Preloader ──────────────────────────────────────────────────────────── */

body.theme-skin-arka.fitpro-ui .fx-preloader {
    background: var(--arka-bg);
}

body.theme-skin-arka.fitpro-ui .fx-preloader__ring {
    border-top-color: var(--arka-cyan);
    border-right-color: var(--arka-purple);
}

/* ── Charts (canvas containers) ─────────────────────────────────────────── */

body.theme-skin-arka.fitpro-ui .fx-chart-wrap,
body.theme-skin-arka.fitpro-ui [class*="chart"] {
    filter: saturate(1.15) contrast(1.05);
}

/* ── Tailwind utility overrides in dark panels ───────────────────────────── */

body.theme-skin-arka.fitpro-ui .text-gray-500,
body.theme-skin-arka.fitpro-ui .text-gray-600 {
    color: var(--arka-text-muted) !important;
}

body.theme-skin-arka.fitpro-ui .text-gray-800,
body.theme-skin-arka.fitpro-ui .dark\:text-white\/90 {
    color: var(--arka-text) !important;
}

body.theme-skin-arka.fitpro-ui .bg-white,
body.theme-skin-arka.fitpro-ui .dark\:bg-white\/\[0\.03\] {
    background-color: var(--arka-surface) !important;
}

body.theme-skin-arka.fitpro-ui .border-gray-200,
body.theme-skin-arka.fitpro-ui .dark\:border-gray-800 {
    border-color: var(--arka-border) !important;
}

/* ── Public landing (optional consistency) ───────────────────────────────── */

body.theme-skin-arka.club-landing {
    background: var(--arka-bg);
    color: var(--arka-text);
}

body.theme-skin-arka.club-landing .landing-navbar {
    background: rgba(8, 10, 20, 0.9);
    border-bottom-color: var(--arka-border);
}

body.theme-skin-arka.club-landing .landing-hero-glow {
    background: linear-gradient(135deg, var(--arka-purple), var(--arka-cyan));
    opacity: 0.35;
}

body.theme-skin-arka.club-landing .landing-card,
body.theme-skin-arka.club-landing .landing-about,
body.theme-skin-arka.club-landing .landing-footer {
    background: var(--arka-surface);
    border-color: var(--arka-border);
}

body.theme-skin-arka.club-landing .landing-btn-primary {
    background: linear-gradient(135deg, var(--club-primary, #7c3aed), var(--club-secondary, #6366f1));
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.4);
}

body.theme-skin-arka.club-landing .landing-cta-mid {
    background: linear-gradient(135deg, #4c1d95, #0e7490);
}

body.theme-skin-arka.club-landing .landing-cta-final {
    background: var(--arka-bg-elevated);
    border-top: 1px solid var(--arka-border);
}

/* ══════════════════════════════════════════════════════════════════════════
   REFERENCE MATCH — glass cards, neon hero, sidebar pills (Arka Gym)
   ══════════════════════════════════════════════════════════════════════════ */

html[data-panel-skin="arka"] .fitpro-ui .club-content,
html[data-panel-skin="arka"] .fitpro-ui .fx-workspace {
    background:
        radial-gradient(ellipse 90% 55% at 100% -5%, rgba(139, 92, 246, 0.14), transparent 52%),
        radial-gradient(ellipse 70% 45% at 0% 105%, rgba(34, 211, 238, 0.1), transparent 48%),
        var(--arka-bg) !important;
}

html[data-panel-skin="arka"][data-theme="dark"] .fitpro-ui .club-sidebar,
html[data-panel-skin="arka"][data-theme="dark"] .fitpro-ui .fx-sidebar {
    background: linear-gradient(180deg, #0c0e1c 0%, #141832 55%, #090b16 100%) !important;
}

html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .club-sidebar,
html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .fx-sidebar {
    background: linear-gradient(180deg, #f8faff 0%, #eef2ff 55%, #e8edff 100%) !important;
}

html[data-panel-skin="arka"] .fitpro-ui .pro-nav-item--active,
html[data-panel-skin="arka"] .fitpro-ui .club-nav-item--active {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.55), rgba(139, 92, 246, 0.22)) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 24px rgba(139, 92, 246, 0.12), 0 0 0 1px rgba(139, 92, 246, 0.2) !important;
    color: #fff !important;
}

html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .pro-nav-item--active,
html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .club-nav-item--active {
    color: #4c1d95 !important;
}

html[data-panel-skin="arka"] .fitpro-ui .pro-nav-item--active .pro-nav-item__icon,
html[data-panel-skin="arka"] .fitpro-ui .club-nav-item--active .club-nav-item__icon {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

html[data-panel-skin="arka"] .fitpro-ui .fx-card,
html[data-panel-skin="arka"] .fitpro-ui .fx-bento .fx-card,
html[data-panel-skin="arka"] .fitpro-ui .fx-dash-feature,
html[data-panel-skin="arka"] .fitpro-ui .fx-spotlight-tile {
    background: var(--arka-surface) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--arka-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--fx-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-panel-skin="arka"][data-theme="dark"] .fitpro-ui .fx-card:hover,
html[data-panel-skin="arka"][data-theme="dark"] .fitpro-ui .fx-bento .fx-card:hover {
    border-color: color-mix(in srgb, var(--arka-cyan) 40%, var(--arka-border)) !important;
    box-shadow: var(--arka-glow), var(--fx-shadow-lg) !important;
}

html[data-panel-skin="arka"] .fitpro-ui .fx-hero--dashboard {
    border-radius: 20px !important;
    border: 1px solid var(--arka-border-glow) !important;
    box-shadow: var(--arka-glow), var(--fx-shadow-lg) !important;
    overflow: hidden;
    position: relative;
}

html[data-panel-skin="arka"] .fitpro-ui .fx-hero--dashboard .fx-hero__glow {
    background:
        radial-gradient(circle at 75% 35%, rgba(34, 211, 238, 0.45), transparent 42%),
        radial-gradient(circle at 25% 65%, rgba(232, 121, 249, 0.35), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.25), transparent 55%) !important;
    opacity: 1 !important;
    filter: blur(8px);
}

html[data-panel-skin="arka"] .fitpro-ui .fx-hero--dashboard .fx-hero__overlay--dashboard {
    background: var(--fx-hero-overlay-dashboard) !important;
}

html[data-panel-skin="arka"] .fitpro-ui .fx-hero__title {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
}

html[data-panel-skin="arka"] .fitpro-ui .fx-live-dot {
    background: var(--arka-cyan) !important;
    box-shadow: 0 0 12px var(--arka-cyan), 0 0 24px rgba(34, 211, 238, 0.4);
}

html[data-panel-skin="arka"] .fitpro-ui .fx-hero__stat {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(10px);
}

html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .fx-hero__stat {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: var(--arka-border) !important;
}

html[data-panel-skin="arka"] .fitpro-ui .fx-hero__stat-val {
    color: #fff !important;
    text-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
}

html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .fx-hero__stat-val {
    color: #4c1d95 !important;
    text-shadow: none;
}

html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .fx-hero__stat-val--muted {
    color: #1e293b !important;
}

html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .fx-hero__stat-label,
html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .fx-hero__stat-hint {
    color: #475569 !important;
}

html[data-panel-skin="arka"] .fitpro-ui .club-header,
html[data-panel-skin="arka"] .fitpro-ui .fit-topbar {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-panel-skin="arka"] .fitpro-ui .club-btn-primary {
    background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.45) !important;
    border-radius: 12px !important;
}

html[data-panel-skin="arka"] .fitpro-ui .club-header-btn,
html[data-panel-skin="arka"] .fitpro-ui .club-header-user {
    border-radius: 12px !important;
    border: 1px solid var(--arka-border);
    background: color-mix(in srgb, var(--arka-surface) 80%, transparent);
}

html[data-panel-skin="arka"] .fitpro-ui .fx-brand-tag {
    color: var(--arka-cyan) !important;
    letter-spacing: 0.12em;
    font-size: 0.62rem;
    opacity: 0.9;
}

html[data-panel-skin="arka"] .fitpro-ui .fx-chart {
    filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.08));
}

html[data-panel-skin="arka"] .fitpro-ui .club-badge,
html[data-panel-skin="arka"] .fitpro-ui .fx-slot {
    border-radius: 10px;
}

html[data-panel-skin="arka"] .fitpro-ui .fx-dash-zone__title {
    font-weight: 700;
    color: var(--arka-text);
}

html[data-panel-skin="arka"] .fitpro-ui .fx-feed__amt {
    color: var(--arka-cyan);
    font-weight: 700;
}

html[data-panel-skin="arka"][data-theme="light"] .fitpro-ui .fx-feed__amt {
    color: var(--arka-purple);
}