/* ═══════════════════════════════════════════════════════════════
   Dragon Ball Theme — "Dark Mode con Ki"
   Loaded AFTER styles.css — overrides dark theme visuals.
   Glow borders, futuristic inputs, energy checkboxes,
   floating tabs, tech aesthetic, micro-animations.
   ═══════════════════════════════════════════════════════════════ */

/* ─── PRELOADER ─── */
.db-preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.2rem;
    background: var(--bg-body);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.db-preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.db-preloader__ball {
    animation: db-spin 1.4s linear infinite;
    filter: drop-shadow(0 0 16px rgba(255, 94, 0, 0.5));
}

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

.db-preloader__text {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--stone);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.db-preloader__bar {
    width: 120px;
    height: 2px;
    background: var(--border-light);
    border-radius: 99px;
    overflow: hidden;
}

.db-preloader__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #FF5E00, #FFC107);
    border-radius: 99px;
    animation: db-fill 1.4s ease-out forwards;
}

@keyframes db-fill {
    to {
        width: 100%;
    }
}

/* ─── TOP BORDER: Animated energy gradient ─── */
body::before {
    background: linear-gradient(90deg,
            #FF5E00, #FFC107, #00D4FF, #FF5E00, #FFC107, #00D4FF, #FF5E00);
    background-size: 300% 100%;
    animation: db-gradient 8s linear infinite;
}

@keyframes db-gradient {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* ─── HEADER: Star accent ─── */
.app-header::after {
    content: '★';
    color: #FF5E00;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(255, 94, 0, 0.4);
}

/* ─── DARK MODE: Body radial energy ─── */
[data-theme="dark"] body {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 94, 0, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 212, 255, 0.02) 0%, transparent 50%),
        var(--bg-body);
}

/* ════════════════════════════════════════════════════════════════
   GLOW CARDS & CONTAINERS
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .card {
    border-color: rgba(255, 94, 0, 0.1);
    background: linear-gradient(180deg, rgba(255, 94, 0, 0.03) 0%, var(--bg-card) 20%);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

[data-theme="dark"] .card:hover {
    border-color: rgba(255, 94, 0, 0.2);
    box-shadow: 0 0 24px rgba(255, 94, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .card--summary {
    border-left: 3px solid #FF5E00;
    box-shadow: -4px 0 16px rgba(255, 94, 0, 0.08);
}

/* Card headers — glow accent line */
[data-theme="dark"] .card__header {
    border-bottom-color: rgba(255, 94, 0, 0.12);
}

[data-theme="dark"] .card__icon {
    color: #FF5E00;
    filter: drop-shadow(0 0 4px rgba(255, 94, 0, 0.3));
}

[data-theme="dark"] .card__title {
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Step badges — tech style */
[data-theme="dark"] .step-badge {
    background: rgba(255, 94, 0, 0.1);
    border-color: rgba(255, 94, 0, 0.2);
    color: #FF5E00;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

/* Section count badge */
[data-theme="dark"] .section-count {
    background: #FF5E00;
    box-shadow: 0 0 10px rgba(255, 94, 0, 0.3);
}

/* ════════════════════════════════════════════════════════════════
   FUTURISTIC INPUTS
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .config-field__input,
[data-theme="dark"] .config-field__select {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 10px 4px;
    color: var(--ink);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] .config-field__input:focus,
[data-theme="dark"] .config-field__select:focus {
    outline: none;
    border-color: #FF5E00;
    border-bottom-color: #FF5E00;
    box-shadow: 0 2px 12px rgba(255, 94, 0, 0.2);
}

[data-theme="dark"] .config-field__input::placeholder {
    color: rgba(148, 163, 184, 0.5);
}

[data-theme="dark"] .config-field__label {
    color: #94A3B8;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
}

/* Login inputs — same futuristic style */
[data-theme="dark"] .login-field__input {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    padding: 12px 4px;
    color: var(--ink);
}

[data-theme="dark"] .login-field__input:focus {
    border-color: #FF5E00;
    box-shadow: 0 2px 12px rgba(255, 94, 0, 0.25);
}

/* Selects in inline styles (Restyler panel etc.) */
[data-theme="dark"] select {
    background: var(--bg-input) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] select:focus {
    border-color: #FF5E00 !important;
    box-shadow: 0 2px 8px rgba(255, 94, 0, 0.15);
}

/* ════════════════════════════════════════════════════════════════
   ENERGY CHECKBOXES
   ════════════════════════════════════════════════════════════════ */

/* Module items — hover glow */
[data-theme="dark"] .module-item {
    transition: background 0.2s ease, box-shadow 0.2s ease;
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .module-item:hover {
    background: rgba(255, 94, 0, 0.04);
}

/* Checkbox — off state: dim circle */
[data-theme="dark"] .module-item__checkbox {
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: all 0.25s ease;
}

/* Checkbox — selected: orange ki ball */
[data-theme="dark"] .module-item--selected .module-item__checkbox {
    background: #FF5E00;
    border-color: #FF5E00;
    box-shadow: 0 0 10px rgba(255, 94, 0, 0.5), 0 0 20px rgba(255, 94, 0, 0.2);
}

/* Checkbox — locked: green ki ball */
[data-theme="dark"] .module-item--locked .module-item__checkbox {
    background: #00E676;
    border-color: #00E676;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.2);
}

/* Module item selected bg glow */
[data-theme="dark"] .module-item--selected {
    background: rgba(255, 94, 0, 0.06);
}

[data-theme="dark"] .module-item--locked {
    background: rgba(0, 230, 118, 0.04);
}

/* Module dot — energy pulse */
.module-item__dot {
    animation: db-dot-pulse 2.5s ease-in-out infinite;
}

@keyframes db-dot-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 transparent;
    }

    50% {
        box-shadow: 0 0 8px 2px currentColor;
    }
}

/* Accent color on checkbox for restyler options */
[data-theme="dark"] .option-toggle input[type="checkbox"] {
    accent-color: #FF5E00;
}

[data-theme="dark"] .option-toggle {
    border-color: rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="dark"] .option-toggle:hover {
    border-color: rgba(255, 94, 0, 0.2);
    box-shadow: 0 0 8px rgba(255, 94, 0, 0.06);
}

/* General checkboxes in dark mode */
[data-theme="dark"] input[type="checkbox"] {
    accent-color: #FF5E00;
}

/* ════════════════════════════════════════════════════════════════
   FLOATING TABS
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .nav-tabs {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    gap: 4px;
    overflow: visible;
}

[data-theme="dark"] .nav-tab {
    background: transparent;
    color: #A0AEC0;
    border: none;
    border-radius: 6px 6px 0 0;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.1em;
    position: relative;
    transition: color 0.3s ease, background 0.3s ease;
}

[data-theme="dark"] .nav-tab+.nav-tab {
    border-left: none;
}

[data-theme="dark"] .nav-tab:hover {
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .nav-tab--active {
    color: #FFFFFF;
    font-weight: 700;
    background: rgba(255, 94, 0, 0.06);
}

[data-theme="dark"] .nav-tab--active:hover {
    background: rgba(255, 94, 0, 0.08);
    color: #FFFFFF;
}

/* Energy line under tabs */
[data-theme="dark"] .nav-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    right: 50%;
    height: 2px;
    background: linear-gradient(90deg, #FF5E00, #FFC107);
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 94, 0, 0.3);
    opacity: 0;
}

[data-theme="dark"] .nav-tab:hover::after {
    left: 20%;
    right: 20%;
    opacity: 0.6;
}

[data-theme="dark"] .nav-tab--active::after {
    left: 5%;
    right: 5%;
    opacity: 1;
    box-shadow: 0 0 12px rgba(255, 94, 0, 0.5);
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS — ENERGY STYLE
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .btn--primary {
    background: linear-gradient(135deg, #1E293B, #0F172A);
    border: 1px solid rgba(255, 94, 0, 0.2);
    color: #F1F5F9;
    transition: all 0.3s ease;
}

[data-theme="dark"] .btn--primary:hover {
    border-color: rgba(255, 94, 0, 0.4);
    box-shadow: 0 0 16px rgba(255, 94, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #1E293B, #1a1a2e);
}

[data-theme="dark"] .btn--gold {
    background: linear-gradient(135deg, #FF5E00, #FF8C00);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 94, 0, 0.3);
}

[data-theme="dark"] .btn--gold:hover {
    background: linear-gradient(135deg, #FF8C00, #FFC107);
    box-shadow:
        0 2px 12px rgba(255, 94, 0, 0.4),
        0 0 24px rgba(255, 140, 0, 0.2);
    transform: translateY(-1px);
}

[data-theme="dark"] .btn--ghost {
    border-color: rgba(255, 255, 255, 0.1);
    color: #94A3B8;
}

[data-theme="dark"] .btn--ghost:hover {
    border-color: rgba(255, 94, 0, 0.3);
    background: rgba(255, 94, 0, 0.06);
    color: #E2E8F0;
}

/* Ki flash on generate/gold buttons */
.btn--gold.db-ki-flash {
    animation: db-ki-burst 0.5s ease-out;
}

@keyframes db-ki-burst {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 94, 0, 0.7);
    }

    50% {
        box-shadow: 0 0 40px 12px rgba(255, 94, 0, 0.3);
    }

    100% {
        box-shadow: 0 2px 8px rgba(255, 94, 0, 0.3);
    }
}

/* ════════════════════════════════════════════════════════════════
   DROP ZONE — ENERGY BORDERS
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .drop-zone {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 94, 0, 0.02);
}

[data-theme="dark"] .drop-zone:hover,
[data-theme="dark"] .drop-zone--active {
    border-color: rgba(255, 94, 0, 0.4);
    background: rgba(255, 94, 0, 0.05);
    box-shadow: inset 0 0 20px rgba(255, 94, 0, 0.05);
}

[data-theme="dark"] .drop-zone__icon {
    color: #475569;
}

[data-theme="dark"] .drop-zone:hover .drop-zone__icon {
    color: #FF5E00;
    filter: drop-shadow(0 0 6px rgba(255, 94, 0, 0.4));
}

/* Tool upload zones */
[data-theme="dark"] .tool-upload-zone {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .tool-upload-zone:hover {
    border-color: rgba(255, 94, 0, 0.3);
    background: rgba(255, 94, 0, 0.04);
}

/* ════════════════════════════════════════════════════════════════
   LOGIN CARD — AURA GLOW
   ════════════════════════════════════════════════════════════════ */

.login-card {
    position: relative;
}

[data-theme="dark"] .login-card::before {
    content: '';
    position: absolute;
    inset: -24px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(255, 94, 0, 0.12) 0%, transparent 70%);
    z-index: -1;
    animation: db-aura 3s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes db-aura {
    0% {
        opacity: 0.4;
        transform: scale(0.95);
    }

    100% {
        opacity: 0.9;
        transform: scale(1.06);
    }
}

[data-theme="dark"] .login-card__icon {
    background: rgba(255, 94, 0, 0.12);
    color: #FF5E00;
    box-shadow: 0 0 20px rgba(255, 94, 0, 0.15);
}

[data-theme="dark"] .login-overlay {
    background: radial-gradient(circle at center, transparent 0%, rgba(11, 15, 25, 0.5) 100%);
}

/* ════════════════════════════════════════════════════════════════
   PANEL TRANSITIONS — KI FLASH
   ════════════════════════════════════════════════════════════════ */

.panel {
    animation: db-panel-in 0.4s ease;
}

@keyframes db-panel-in {
    0% {
        opacity: 0;
        transform: translateY(8px);
        filter: brightness(1.4);
    }

    40% {
        filter: brightness(1);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: brightness(1);
    }
}

/* ════════════════════════════════════════════════════════════════
   PROGRESS SPINNER — ENERGY
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .spinner {
    border-color: rgba(255, 255, 255, 0.06);
    border-top-color: #FF5E00;
    box-shadow: 0 0 14px rgba(255, 94, 0, 0.25);
}

/* Progress overlay is now always-dark, no overrides needed */


/* ════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .toast {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 94, 0, 0.06);
}

[data-theme="dark"] .toast--success {
    border-left-color: #00E676;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), -2px 0 12px rgba(0, 230, 118, 0.1);
}

/* ════════════════════════════════════════════════════════════════
   THEME CARDS (Restyler panel color selectors)
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .theme-card {
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .theme-card:hover {
    border-color: rgba(255, 94, 0, 0.25);
    box-shadow: 0 0 16px rgba(255, 94, 0, 0.08);
}

[data-theme="dark"] .theme-card--active {
    border-color: #FF5E00;
    box-shadow: 0 0 16px rgba(255, 94, 0, 0.15);
    background: rgba(255, 94, 0, 0.06);
}

/* ════════════════════════════════════════════════════════════════
   PREVIEW TABLE
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .preview-container {
    background: rgba(17, 24, 39, 0.9);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 94, 0, 0.1);
}

/* ════════════════════════════════════════════════════════════════
   FLOATING DRAGON BALL
   ════════════════════════════════════════════════════════════════ */

.db-float-ball {
    position: fixed;
    top: 18px;
    right: 24px;
    z-index: 50;
    animation: db-float 3s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 143, 0, 0.4));
    cursor: pointer;
    transition: filter 0.3s ease;
}

.db-float-ball:hover {
    filter: drop-shadow(0 0 20px rgba(255, 143, 0, 0.7));
}

@keyframes db-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ════════════════════════════════════════════════════════════════
   SCROLLBAR — NEON
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-body);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 94, 0, 0.25);
    border-radius: 99px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 94, 0, 0.5);
}

/* ════════════════════════════════════════════════════════════════
   ADMIN PANEL ENHANCEMENTS
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .admin-nav {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .admin-nav__tab {
    border-right-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .admin-nav__tab--active {
    background: rgba(255, 94, 0, 0.08);
    color: #FF5E00;
    border-bottom-color: #FF5E00;
}

[data-theme="dark"] .stat-card {
    border-color: rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="dark"] .stat-card:hover {
    border-color: rgba(255, 94, 0, 0.15);
    box-shadow: 0 0 16px rgba(255, 94, 0, 0.06);
}

[data-theme="dark"] .stat-card__value {
    font-family: 'Rajdhani', sans-serif;
}

/* ════════════════════════════════════════════════════════════════
   FORMAT BADGES — NEON VARIANT
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .format-badge {
    background: transparent !important;
    border: 1px solid;
    font-weight: 700;
}

[data-theme="dark"] .format-badge--xlsx {
    color: #00E676 !important;
    border-color: rgba(0, 230, 118, 0.3) !important;
}

[data-theme="dark"] .format-badge--xls {
    color: #00E676 !important;
    border-color: rgba(0, 230, 118, 0.2) !important;
}

[data-theme="dark"] .format-badge--csv {
    color: #00D4FF !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

[data-theme="dark"] .format-badge--ods {
    color: #B388FF !important;
    border-color: rgba(179, 136, 255, 0.3) !important;
}

[data-theme="dark"] .format-badge--docx {
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .format-badge--pdf {
    color: #FF5252 !important;
    border-color: rgba(255, 82, 82, 0.3) !important;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .app-footer {
    border-top-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .app-footer::before {
    content: '★';
    color: #FF5E00;
    text-shadow: 0 0 6px rgba(255, 94, 0, 0.3);
    background: var(--bg-body);
}

/* ════════════════════════════════════════════════════════════════
   HEADER TITLE — TECH FONT WEIGHT
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .app-header__title {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 26px;
}

[data-theme="dark"] .app-header__subtitle {
    color: #64748B;
    letter-spacing: 0.2em;
}

[data-theme="dark"] .app-header__version {
    border-color: rgba(255, 94, 0, 0.3);
    color: #FF5E00;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

/* Theme toggle */
[data-theme="dark"] .theme-toggle {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 94, 0, 0.08);
    border-color: rgba(255, 94, 0, 0.3);
}

/* ════════════════════════════════════════════════════════════════
   PARTICLE CANVAS
   ════════════════════════════════════════════════════════════════ */

#db-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

[data-theme="dark"] #db-particles {
    opacity: 0.5;
}

/* ════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .badge--success {
    background: rgba(0, 230, 118, 0.12);
    color: #00E676;
}

[data-theme="dark"] .badge--error {
    background: rgba(255, 82, 82, 0.1);
    color: #FF5252;
}

[data-theme="dark"] .badge--warning {
    background: rgba(255, 193, 7, 0.12);
    color: #FFC107;
}

[data-theme="dark"] .badge--info {
    background: rgba(0, 212, 255, 0.1);
    color: #00D4FF;
}

/* Card badge */
[data-theme="dark"] .card__badge {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   HUB PORTAL — DARK MODE ENHANCEMENTS
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .hub__profile-card {
    border-color: rgba(255, 94, 0, 0.1);
    background: linear-gradient(180deg, rgba(255, 94, 0, 0.03) 0%, var(--bg-card) 30%);
}

[data-theme="dark"] .hub__profile-avatar {
    border-color: rgba(255, 94, 0, 0.2);
    box-shadow: 0 0 12px rgba(255, 94, 0, 0.1);
}

[data-theme="dark"] .hub__profile-edit:hover {
    box-shadow: 0 0 8px rgba(255, 94, 0, 0.15);
}



/* ─── Enhanced Glassmorphism — deeper blur + inner light ─── */
[data-theme="dark"] .card {
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .card:hover {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 94, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* ─── Premium Hub Portal Cards — dramatic ki aura ─── */
[data-theme="dark"] .hub__portal-card {
    overflow: visible;
}

[data-theme="dark"] .hub__portal-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255, 94, 0, 0.25) 0%,
        rgba(255, 193, 7, 0.12) 40%,
        transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

[data-theme="dark"] .hub__portal-card:hover::after {
    opacity: 1;
}

[data-theme="dark"] .hub__portal-card--games::after {
    background: linear-gradient(135deg,
        rgba(0, 212, 255, 0.25) 0%,
        rgba(224, 64, 251, 0.12) 40%,
        transparent 70%);
}

/* ─── Premium Login — energy veins on the card ─── */
/* (login page may not have data-theme attr, so we duplicate selectors) */
[data-theme="dark"] .login-card,
.login-card {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 94, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 94, 0, 0.12);
}

[data-theme="dark"] .login-card::after,
.login-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        #FF5E00 20%,
        #FFC107 50%,
        #FF5E00 80%,
        transparent 100%);
    background-size: 200% 100%;
    animation: db-login-vein 3s ease infinite;
    border-radius: 0 0 12px 12px;
    opacity: 0.6;
}

@keyframes db-login-vein {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Login button — ki charge (works with or without data-theme) */
.btn.btn--primary.login-btn,
#login-submit.login-btn {
    background: linear-gradient(135deg, #FF5E00, #FF8C00) !important;
    border-color: #FF5E00 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(255, 94, 0, 0.3),
                0 0 0 0 rgba(255, 94, 0, 0) !important;
    transition: all 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn.btn--primary.login-btn:hover,
#login-submit.login-btn:hover {
    box-shadow: 0 6px 24px rgba(255, 94, 0, 0.4),
                0 0 40px rgba(255, 140, 0, 0.2) !important;
    transform: translateY(-2px);
}

/* ─── Enhanced Drop Zone — energy border animation ─── */
[data-theme="dark"] .drop-zone {
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .drop-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 94, 0, 0.04) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

[data-theme="dark"] .drop-zone:hover::before,
[data-theme="dark"] .drop-zone--active::before {
    opacity: 1;
}

/* ─── Nav Tabs — sliding energy indicator upgrade ─── */
[data-theme="dark"] .nav-tab--active {
    background: linear-gradient(180deg,
        rgba(255, 94, 0, 0.08) 0%,
        rgba(255, 94, 0, 0.02) 100%);
}

/* ─── Card Header Title — ki text glow ─── */
[data-theme="dark"] .card__title {
    text-shadow: 0 0 20px rgba(255, 94, 0, 0.08);
}

/* ─── Step Badge — energy outline ─── */
[data-theme="dark"] .step-badge {
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .step-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent 0deg,
        rgba(255, 94, 0, 0.1) 60deg,
        transparent 120deg
    );
    animation: db-badge-rotate 6s linear infinite;
    pointer-events: none;
}

@keyframes db-badge-rotate {
    to { transform: rotate(360deg); }
}

/* ─── Hub Title — power text effect ─── */
[data-theme="dark"] .hub__title {
    text-shadow: 0 0 30px rgba(255, 94, 0, 0.15),
                 0 0 60px rgba(255, 94, 0, 0.05);
    letter-spacing: 0.08em;
}

/* ─── Hub Portal Divider — animated energy line ─── */
[data-theme="dark"] .hub__portal-divider {
    background: linear-gradient(90deg, #FF5E00, #FFC107, #FF5E00);
    background-size: 200% 100%;
    animation: db-divider-flow 4s ease infinite;
    height: 2px;
    box-shadow: 0 0 8px rgba(255, 94, 0, 0.3);
}

@keyframes db-divider-flow {
    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }
}

/* ─── Module Selector — premium container glow ─── */
[data-theme="dark"] .module-selector {
    border-color: rgba(255, 94, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* ─── Summary Card — dragon ball accent glow ─── */
[data-theme="dark"] .card--summary {
    border-image: linear-gradient(180deg, #FF5E00, #FFC107) 1;
    border-left-width: 3px;
    box-shadow: -6px 0 24px rgba(255, 94, 0, 0.1),
                0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─── Action Bar buttons — wider glow halo ─── */
[data-theme="dark"] .action-bar .btn--primary:hover,
[data-theme="dark"] .action-bar .btn--gold:hover {
    filter: brightness(1.1);
}

/* ─── Theme Selector Cards — subtle rotation on hover ─── */
[data-theme="dark"] .theme-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .theme-card:hover {
    transform: translateY(-2px) scale(1.02);
}

/* ─── User Pill — premium glow ─── */
[data-theme="dark"] .user-pill {
    border: 1px solid rgba(255, 94, 0, 0.15);
    box-shadow: 0 0 12px rgba(255, 94, 0, 0.06);
}

/* ─── Scrollbar Track — subtle glow line ─── */
[data-theme="dark"] ::-webkit-scrollbar-track {
    border-left: 1px solid rgba(255, 94, 0, 0.05);
}

/* ─── Selection Color — ki orange ─── */
::selection {
    background: rgba(255, 94, 0, 0.3);
    color: #FFFFFF;
}

::-moz-selection {
    background: rgba(255, 94, 0, 0.3);
    color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */

/* Work Portal  Orange Ki */
[data-theme="dark"] .hub__portal-card--work {
    border-color: rgba(255, 94, 0, 0.1);
    background: linear-gradient(180deg, rgba(255, 94, 0, 0.04) 0%, var(--bg-card) 40%);
}

[data-theme="dark"] .hub__portal-card--work:hover {
    border-color: rgba(255, 94, 0, 0.3);
    box-shadow: 0 0 30px rgba(255, 94, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .hub__portal-card--work:hover .hub__portal-icon {
    color: #FF5E00;
    filter: drop-shadow(0 0 8px rgba(255, 94, 0, 0.5));
}

.hub__portal-glow--work {
    background: radial-gradient(circle at 50% 0%, rgba(255, 94, 0, 0.08) 0%, transparent 70%);
}

[data-theme="dark"] .hub__portal-cta--work {
    background: linear-gradient(135deg, #FF5E00, #FF8C00);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(255, 94, 0, 0.3);
}

[data-theme="dark"] .hub__portal-cta--work:hover {
    box-shadow: 0 2px 16px rgba(255, 94, 0, 0.5), 0 0 24px rgba(255, 140, 0, 0.2);
    transform: translateY(-1px);
}

/* Games Portal — Cyan/Purple Electric */
[data-theme="dark"] .hub__portal-card--games {
    border-color: rgba(0, 212, 255, 0.1);
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.04) 0%, var(--bg-card) 40%);
}

[data-theme="dark"] .hub__portal-card--games:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .hub__portal-card--games:hover .hub__portal-icon {
    color: #00D4FF;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5));
}

.hub__portal-glow--games {
    background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
}

.hub__portal-divider--games {
    background: linear-gradient(90deg, #00D4FF, #E040FB);
}

[data-theme="dark"] .hub__portal-cta--games {
    background: linear-gradient(135deg, #00D4FF, #00BCD4);
    color: #0B0F19;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
    font-weight: 700;
}

[data-theme="dark"] .hub__portal-cta--games:hover {
    box-shadow: 0 2px 16px rgba(0, 212, 255, 0.5), 0 0 24px rgba(0, 188, 212, 0.2);
    transform: translateY(-1px);
}

/* Tracker Portal — Violet/Purple Ki */
[data-theme="dark"] .hub__portal-card--tracker {
    border-color: rgba(139, 92, 246, 0.1);
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, var(--bg-card) 40%);
}

[data-theme="dark"] .hub__portal-card--tracker:hover {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .hub__portal-card--tracker:hover .hub__portal-icon {
    color: #8B5CF6;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

.hub__portal-glow--tracker {
    background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
}

.hub__portal-divider--tracker {
    background: linear-gradient(90deg, #8B5CF6, #EC4899);
}

[data-theme="dark"] .hub__portal-cta--tracker {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    font-weight: 700;
}

[data-theme="dark"] .hub__portal-cta--tracker:hover {
    box-shadow: 0 2px 16px rgba(139, 92, 246, 0.5), 0 0 24px rgba(124, 58, 237, 0.2);
    transform: translateY(-1px);
}

[data-theme="dark"] .hub__portal-card--tracker::after {
    background: linear-gradient(135deg,
        rgba(139, 92, 246, 0.25) 0%,
        rgba(236, 72, 153, 0.12) 40%,
        transparent 70%);
}

/* Admin Card */
[data-theme="dark"] .hub__admin-card {
    border-color: rgba(255, 255, 255, 0.06);
    background: var(--bg-card);
}

[data-theme="dark"] .hub__admin-card:hover {
    border-color: rgba(255, 193, 7, 0.3);
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.06);
}

[data-theme="dark"] .hub__admin-icon {
    color: #FFC107;
}

[data-theme="dark"] .hub__admin-title {
    color: #FFC107;
}

/* Hub Footer */
[data-theme="dark"] .hub__footer {
    color: #475569;
}

/* Hub animation on load */
.hub__portal-card {
    animation: hub-card-in 0.5s ease both;
}

.hub__portal-card--games {
    animation-delay: 0.1s;
}

.hub__profile-card {
    animation: hub-card-in 0.4s ease both;
}

.hub__admin-card {
    animation: hub-card-in 0.5s ease both;
    animation-delay: 0.15s;
}

@keyframes hub-card-in {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Back button in dark mode */
[data-theme="dark"] .app-header__back {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .app-header__back:hover {
    border-color: rgba(255, 94, 0, 0.3);
    color: #FF5E00;
    box-shadow: 0 0 8px rgba(255, 94, 0, 0.1);
}

/* ════════════════════════════════════════════════════════════════
   DRAGON BALL CHARACTERS — Personajes de fondo v2
   Enfoque correcto: siluetas grandes y atmosféricas DETRÁS del contenido.
   z-index stratificado: chars=0, card/content=10+
   ════════════════════════════════════════════════════════════════ */

/* ─── Capa de personajes: full-screen, z-index:0 — DETRÁS de todo ─── */
.db-chars-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;     /* nunca bloquear interacciones */
    z-index: 0;               /* Detrás de la card (que tiene z-index: 10+) */
    user-select: none;
}

/* Asegurar que el login-overlay sea contexto de posicionamiento */
#login-overlay {
    position: fixed !important;  /* ya era fixed, lo reforzamos */
}

/* La login-card ENCIMA de los personajes */
.login-card {
    position: relative;
    z-index: 10;
    overflow: visible !important;  /* para que el pointer pueda sobresalir */
}

/* Hub portal: contexto de posicionamiento para la capa */
#hub-portal {
    position: relative;
    overflow: hidden;
}

/* Hub cards encima de los personajes */
.hub__portal-card,
.hub__profile-card,
.hub__admin-card {
    position: relative;
    z-index: 10;
}

/* Hub walker characters — NEVER block mouse events */
.db-walker {
    pointer-events: none !important;
    z-index: 0 !important;
    user-select: none;
}

.db-walker img {
    pointer-events: none !important;
}

/* Hub header action buttons — always above characters */
.hub__header-actions,
.hub__header-actions button {
    position: relative;
    z-index: 20;
}

/* Hub footer */
.hub__footer {
    position: relative;
    z-index: 10;
}

/* ─── Personaje individual — siluetas GRANDES y atmosféricas ─── */
.db-char {
    position: absolute;
    display: block;
    pointer-events: none;
    will-change: left;           /* Solo animamos left — GPU */
    transform-origin: center center;
    /* opacidad controlada desde JS: 0.06–0.13 */
}

/* ════════════════════════════════════════════════════════════════
   LOGIN POINTER — Personaje señalando el campo usuario/contraseña
   Posicionado en la card, sobresaliendo hacia la derecha
   ════════════════════════════════════════════════════════════════ */
.db-login-pointer {
    position: absolute;
    right: -195px;          /* Bien separado del card */
    bottom: 80px;           /* A la altura de campo Usuario */
    width: 180px;           /* Grande y claro */
    pointer-events: none;
    animation: db-pointer-float 3.5s ease-in-out infinite;
    z-index: 20;
    opacity: 1;             /* Opacidad completa — es el personaje estelar */
}

/* Flotación suave con pequeña rotación */
@keyframes db-pointer-float {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    40%       { transform: translateY(-10px) rotate(0deg); }
    70%       { transform: translateY(-5px) rotate(-9deg); }
}

/* Flecha curva apuntando hacia la izquierda (hacia los inputs) */
.db-login-pointer-arrow {
    position: absolute;
    left: -44px;            /* Sale hacia la izquierda, hacia el formulario */
    bottom: 10px;
    width: 50px;
    height: 24px;
    animation: db-arrow-pulse 1.1s ease-in-out infinite;
    pointer-events: none;
}

@keyframes db-arrow-pulse {
    0%, 100% { transform: translateX(0); opacity: 0.8; }
    50%       { transform: translateX(-6px); opacity: 1; }
}

/* ─── En mobile: ajustar tamaño del pointer ─── */
@media (max-width: 600px) {
    .db-login-pointer {
        right: 8px;
        bottom: auto;
        top: -60px;
        width: 50px;
    }
    .db-login-pointer-arrow {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════
   KAMEHAMEHA ANIMATION — Enhanced with distortion & multiple impacts
   ════════════════════════════════════════════════════════════════ */

/* Impacto azul con múltiples ondas expansivas */
@keyframes db-kame-impact {
    0%   { opacity: 1; box-shadow: 0 0 0 4px rgba(180,230,255,0.95),
                                   0 0 40px rgba(120,200,255,0.9),
                                   0 0 80px rgba(60,140,255,0.6),
                                   0 0 140px rgba(20,80,255,0.3); }
    20%  { box-shadow: 0 0 0 8px rgba(180,230,255,0.85),
                       0 0 50px rgba(120,200,255,0.8),
                       0 0 100px rgba(60,140,255,0.5),
                       0 0 160px rgba(20,80,255,0.25); }
    40%  { box-shadow: 0 0 0 15px rgba(150,220,255,0.7),
                       0 0 70px rgba(100,180,255,0.6),
                       0 0 140px rgba(40,100,255,0.35),
                       0 0 200px rgba(0,60,255,0.15); }
    60%  { box-shadow: 0 0 0 25px rgba(120,200,255,0.3),
                       0 0 90px rgba(80,160,255,0.25),
                       0 0 160px rgba(20,80,255,0.1); }
    100% { opacity: 0; box-shadow: 0 0 0 40px rgba(100,200,255,0),
                                   0 0 120px rgba(0,80,255,0); }
}

/* Energy waves expanding from impact center */
@keyframes db-impact-wave {
    0%   { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

/* Beam pattern oscillation — moving energy stripes */
@keyframes db-beam-energy {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}

/* Screen distortion ripple effect */
@keyframes db-distortion {
    0%   { filter: brightness(1) contrast(1); }
    25%  { filter: brightness(1.1) contrast(1.05); }
    50%  { filter: brightness(1) contrast(1); }
    75%  { filter: brightness(1.05) contrast(1.08); }
    100% { filter: brightness(1) contrast(1); }
}

/* Recoil/knockback — Goku pushed back by blast */
@keyframes db-goku-recoil {
    0%   { transform: translateX(0px); }
    15%  { transform: translateX(15px); }
    100% { transform: translateX(0px); }
}

/* Flash ki cuando Goku carga */
@keyframes db-kame-flash {
    0%, 100% { filter: saturate(2.2) brightness(1.3); }
    50%       { filter: saturate(3)   brightness(4) drop-shadow(0 0 40px rgba(100,200,255,1)); }
}

/* Ki particles converge toward Goku's hands during charge phase */
@keyframes db-ki-particle {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    20%  { opacity: 1; }
    80%  { opacity: 0.8; transform: translate(var(--ki-dx), var(--ki-dy)) scale(0.5); }
    100% { opacity: 0;   transform: translate(var(--ki-dx), var(--ki-dy)) scale(0); }
}

/* Beam energy flicker — subtle width/opacity oscillation */
@keyframes db-beam-flicker {
    0%   { opacity: 0.92; height: 14px; }
    100% { opacity: 1;    height: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    .db-preloader__ball,
    .module-item__dot,
    body::before,
    .login-card::before,
    .db-float-ball,
    .hub__portal-card,
    .hub__profile-card,
    .hub__admin-card,
    .db-char,
    .db-login-pointer,
    .db-login-pointer-arrow,
    #db-kame-char,
    #db-kame-beam,
    #db-kame-impact {
        animation: none !important;
    }

    #db-kame-char,
    #db-kame-beam,
    #db-kame-impact,
    #db-kame-particles {
        display: none !important;
    }

    .panel {
        animation-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   3D CANVAS (dragonball-3d.js renders via WebGL)
   Login: Kid Buu + Cell Jr GLB models
   Hub: Static GLB models (Frieza, Piccolo, Gotenks, Krillin, Dragonballs)
   ========================================================================== */

#db-hub-3d-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.5s ease;
}