/*!****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./frontend/styles/vars.css ***!
  \****************************************************************************/
:root {
    /* Colors */
    --bg-base: #1c1f24;
    --bg-surface: #2a2d32;
    --bg-surface-elevated: #343a40;
    --bg-hover: #3a3f47;
    --bg-active: #495057;

    /* Text */
    --text-primary: #f8f9fa;
    --text-secondary: #dee2e6;
    --text-muted: #adb5bd;
    --text-on-accent: #ffffff;

    /* Accent */
    --accent-primary: #4170b6;
    --accent-primary-hover: #6584ac;
    --accent-success: #198754;
    --accent-warning: #ffc107;
    --accent-danger: #dc3545;
    --accent-secondary: #6c757d;

    /* Glass (for small overlays: dropdowns, level selector) */
    --glass-bg: rgba(28, 31, 36, 0.88);
    --glass-blur: 12px;
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Overlays (transparent white layers for hover/active states) */
    --overlay-faintest: rgba(255, 255, 255, 0.02);
    --overlay-faint: rgba(255, 255, 255, 0.04);
    --overlay-dim: rgba(255, 255, 255, 0.05);
    --overlay-subtle: rgba(255, 255, 255, 0.06);
    --overlay-light: rgba(255, 255, 255, 0.08);
    --overlay-medium: rgba(255, 255, 255, 0.1);

    /* Accent overlays */
    --accent-primary-subtle: rgba(13, 110, 253, 0.08);
    --accent-primary-tint: rgba(13, 110, 253, 0.1);
    --accent-primary-faded: rgba(13, 110, 253, 0.15);
    --accent-primary-bg: rgba(13, 110, 253, 0.2);
    --accent-primary-focus: rgba(13, 110, 253, 0.25);
    --accent-primary-glow: rgba(13, 110, 253, 0.3);
    --accent-warning-subtle: rgba(255, 193, 7, 0.08);

    /* Checkbox / form */
    --checkbox-border: rgba(255, 255, 255, 0.25);
    --checkbox-border-hover: rgba(255, 255, 255, 0.4);

    /* Highlight (green for selected categories) */
    --highlight-success: #00cc66;
    --highlight-success-focus: rgba(0, 204, 102, 0.25);

    /* Misc */
    --border-hover: rgba(255, 255, 255, 0.2);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-default: rgba(255, 255, 255, 0.12);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;

    /* Layout */
    --navbar-height: 48px;
    --sidebar-width: 320px;
    --panel-radius: 12px;
    --btn-radius: 8px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-default: 0.25s ease;
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);

    /* Light theme (homepage, loading screen) */
    --bg-light: #f0f0f0;
    --bg-white: #ffffff;
    --text-dark: #1c1f24;
    --text-dark-muted: #6c757d;
    --shadow-light-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-light-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-light-glow: 0 4px 12px rgba(13, 110, 253, 0.3);
    --shadow-white-glow: 0 4px 12px rgba(255, 255, 255, 0.2);
    --text-white-muted: rgba(255, 255, 255, 0.85);

    /* Banner (homepage) */
    --banner-start: var(--accent-primary);
    --banner-end: var(--accent-primary-hover);

    /* Viewer */
    --viewer-bg: #f0f8ff;
}

/* ============================================
   Light Theme Overrides
   ============================================ */
[data-theme='light'] {
    --bg-base: #eceef2;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #f5f6f8;
    --bg-hover: #e9ecef;
    --bg-active: #dee2e6;

    --text-primary: #1c1f24;
    --text-secondary: #495057;
    --text-muted: #6c757d;

    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.1);

    --overlay-faintest: rgba(0, 0, 0, 0.02);
    --overlay-faint: rgba(0, 0, 0, 0.03);
    --overlay-dim: rgba(0, 0, 0, 0.04);
    --overlay-subtle: rgba(0, 0, 0, 0.05);
    --overlay-light: rgba(0, 0, 0, 0.07);
    --overlay-medium: rgba(0, 0, 0, 0.09);

    --checkbox-border: rgba(0, 0, 0, 0.3);
    --checkbox-border-hover: rgba(0, 0, 0, 0.5);

    --border-hover: rgba(0, 0, 0, 0.22);
    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-default: rgba(0, 0, 0, 0.15);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.14);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Fallback for OS preference when JS hasn't set data-theme yet */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-base: #eceef2;
        --bg-surface: #ffffff;
        --bg-surface-elevated: #f5f6f8;
        --bg-hover: #e9ecef;
        --bg-active: #dee2e6;

        --text-primary: #1c1f24;
        --text-secondary: #495057;
        --text-muted: #6c757d;

        --glass-bg: rgba(255, 255, 255, 0.85);
        --glass-border: rgba(0, 0, 0, 0.1);

        --overlay-faintest: rgba(0, 0, 0, 0.02);
        --overlay-faint: rgba(0, 0, 0, 0.03);
        --overlay-dim: rgba(0, 0, 0, 0.04);
        --overlay-subtle: rgba(0, 0, 0, 0.05);
        --overlay-light: rgba(0, 0, 0, 0.07);
        --overlay-medium: rgba(0, 0, 0, 0.09);

        --checkbox-border: rgba(0, 0, 0, 0.3);
        --checkbox-border-hover: rgba(0, 0, 0, 0.5);

        --border-hover: rgba(0, 0, 0, 0.22);
        --border-subtle: rgba(0, 0, 0, 0.1);
        --border-default: rgba(0, 0, 0, 0.15);

        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.14);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.18);
    }
}

/*!*****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./frontend/styles/admin.css ***!
  \*****************************************************************************/
/* Page background */
body.login {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Segoe UI', 'Roboto', sans-serif;
}

/* Center layout */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* Card */
.login-card {
    background: var(--bg-surface);
    padding: var(--space-xl);
    border-radius: var(--panel-radius);
    box-shadow: var(--shadow-lg);
    width: 360px;
    border: 1px solid var(--border-default);
}

/* Title */
.login-title {
    text-align: center;
    margin-bottom: var(--space-lg);
    font-size: 1.4rem;
    font-weight: 600;
}

/* Form fields */
.login-card input {
    width: 100%;
    padding: var(--space-sm);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-md);
    border-radius: var(--btn-radius);
    border: 1px solid var(--border-default);
    background: var(--bg-surface-elevated);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.login-card input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-focus);
}

/* Button */
.login-btn {
    width: 100%;
    padding: var(--space-sm);
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--btn-radius);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.login-btn:hover {
    background: var(--accent-primary-hover);
}

/* Error messages */
.errornote {
    background: var(--accent-danger);
    color: white;
    padding: var(--space-sm);
    border-radius: var(--btn-radius);
    margin-bottom: var(--space-md);
}


/*# sourceMappingURL=admin-8d2e3dad09563d4145bb.css.map*/