/* ==========================================================================
   FlexTV — Material Design 3 (M3) design layer
   Light color scheme generated from seed color #6C5CE7 (FlexTV purple).
   Loaded AFTER style.css so it wins the cascade. Unifies all UIkit
   components and custom classes with M3 color roles, type scale,
   shape, elevation, state layers and motion.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    color-scheme: light;

    /* M3 color roles — light scheme (seed #6C5CE7) */
    --md-sys-color-primary: #5a4fcf;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #e4dfff;
    --md-sys-color-on-primary-container: #160b64;
    --md-sys-color-primary-fixed: #e4dfff;
    --md-sys-color-primary-fixed-dim: #c8bfff;
    --md-sys-color-on-primary-fixed: #160b64;
    --md-sys-color-on-primary-fixed-variant: #4238b2;

    --md-sys-color-secondary: #5d5b72;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e3dff9;
    --md-sys-color-on-secondary-container: #1a1a2c;
    --md-sys-color-secondary-fixed: #e3dff9;
    --md-sys-color-secondary-fixed-dim: #c6c3dd;
    --md-sys-color-on-secondary-fixed: #1a1a2c;
    --md-sys-color-on-secondary-fixed-variant: #454459;

    --md-sys-color-tertiary: #7a5265;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffd8e7;
    --md-sys-color-on-tertiary-container: #2e1123;
    --md-sys-color-tertiary-fixed: #ffd8e7;
    --md-sys-color-tertiary-fixed-dim: #eab8cf;
    --md-sys-color-on-tertiary-fixed: #2e1123;
    --md-sys-color-on-tertiary-fixed-variant: #603b4d;

    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;

    --md-sys-color-surface: #fdf8ff;
    --md-sys-color-surface-dim: #ddd8e0;
    --md-sys-color-surface-bright: #fdf8ff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f7f2fa;
    --md-sys-color-surface-container: #f1ecf4;
    --md-sys-color-surface-container-high: #ebe6ef;
    --md-sys-color-surface-container-highest: #e5e0e9;
    --md-sys-color-on-surface: #1c1b21;
    --md-sys-color-on-surface-variant: #474551;
    --md-sys-color-outline: #787580;
    --md-sys-color-outline-variant: #c8c5d0;

    --md-sys-color-inverse-surface: #313036;
    --md-sys-color-inverse-on-surface: #f4eff7;
    --md-sys-color-inverse-primary: #c8bfff;

    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    /* Extended roles (success / warning — not in base M3 spec) */
    --md-ext-color-success: #1c6b30;
    --md-ext-color-on-success: #ffffff;
    --md-ext-color-success-container: #a3f4aa;
    --md-ext-color-on-success-container: #002109;
    --md-ext-color-warning: #7d5700;
    --md-ext-color-on-warning: #ffffff;
    --md-ext-color-warning-container: #ffdf9e;
    --md-ext-color-on-warning-container: #261900;
    --md-ext-color-info: #00639a;
    --md-ext-color-info-container: #cee5ff;
    --md-ext-color-on-info-container: #001d32;

    /* M3 type scale */
    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-medium-size: 45px;
    --md-sys-typescale-display-small-size: 36px;
    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-medium-size: 28px;
    --md-sys-typescale-headline-small-size: 24px;
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-small-size: 14px;
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-small-size: 12px;
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-small-size: 11px;
    --md-sys-font: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* M3 shape */
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 999px;

    /* M3 elevation (shadow only; surface tint approximated by containers) */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level4: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level5: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);

    /* M3 motion */
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
    --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --md-sys-motion-duration-short: 150ms;
    --md-sys-motion-duration-medium: 300ms;
    --md-sys-motion-duration-long: 500ms;

    /* State layer opacities */
    --md-sys-state-hover-opacity: 0.08;
    --md-sys-state-focus-opacity: 0.12;
    --md-sys-state-pressed-opacity: 0.12;
    --md-sys-state-dragged-opacity: 0.16;
}

/* ---------- Base ---------- */
body {
    font-family: var(--md-sys-font);
    background-color: #4a3b8f !important;
    background-image: none !important;
    animation: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: 24px;
    letter-spacing: 0.5px;
    min-height: 100vh;
    isolation: isolate;
}

h1, .uk-h1 { font-size: var(--md-sys-typescale-headline-large-size); line-height: 40px; font-weight: 400; color: rgba(255, 255, 255, 0.95); }
h2, .uk-h2 { font-size: var(--md-sys-typescale-headline-medium-size); line-height: 36px; font-weight: 400; color: rgba(255, 255, 255, 0.95); }
h3, .uk-h3 { font-size: var(--md-sys-typescale-headline-small-size); line-height: 32px; font-weight: 400; color: rgba(255, 255, 255, 0.95); }
h4, .uk-h4 { font-size: var(--md-sys-typescale-title-large-size); line-height: 28px; font-weight: 400; color: rgba(255, 255, 255, 0.95); }
h5 { font-size: var(--md-sys-typescale-title-medium-size); line-height: 24px; font-weight: 500; color: rgba(255, 255, 255, 0.95); }
h6 { font-size: var(--md-sys-typescale-title-small-size); line-height: 20px; font-weight: 500; color: rgba(255, 255, 255, 0.95); }

/* Headings inside light containers keep dark ink */
:is(.uk-card, .uk-modal-dialog, .uk-navbar-dropdown, .uk-dropdown, .uk-offcanvas-bar, .mobile-menu, .payment-container, .card, .uk-notification-message)
    :is(h1, h2, h3, h4, h5, h6,
        .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
        .uk-heading-line, .uk-heading-bullet, .uk-heading-divider,
        .uk-heading-small, .uk-heading-medium, .uk-heading-large,
        .uk-heading-xlarge, .uk-heading-2xlarge, .uk-card-title) {
    color: var(--md-sys-color-on-surface) !important;
}

/* Light containers keep dark ink (bootstrap cards/modals in check.php, mobile menu) */
.card, .modal-content, .mobile-menu { color: var(--md-sys-color-on-surface); }

/* uk-light contexts paint text light — but never inside nested light
   surfaces (e.g. cards inside a uk-light slider) */
.uk-light :is(h1, h2, h3, h4, h5, h6,
        .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
        .uk-heading-line, .uk-heading-bullet, .uk-heading-divider,
        .uk-heading-small, .uk-heading-medium, .uk-heading-large,
        .uk-heading-xlarge, .uk-heading-2xlarge, .uk-card-title, .uk-modal-title):not(.uk-card *):not(.card *) {
    color: rgba(255, 255, 255, 0.95) !important;
}

.uk-light :is(p, .uk-text-lead, .uk-text-meta, .uk-text-muted, .uk-text-small, small):not(.uk-card *):not(.card *) {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* Plain links directly on the ambient background stay light; inside light containers they keep M3 primary */
a { color: #e3dbff; }
a:hover { color: #ffffff; }
:is(.uk-card, .uk-modal-dialog, .payment-container, .card) a:not(.uk-button):not(.uk-icon-button):not(.uk-button-primary):not(.uk-button-default) {
    color: var(--md-sys-color-primary);
}

/* ---------- Ambient animated background (all pages) ----------
   Registered custom properties let the gradient interpolate colors/angle
   smoothly; a subtle grain layer sits on top of the gradient. */
@property --bga-a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 120deg;
}

@property --bga-c1 {
    syntax: '<color>';
    inherits: false;
    initial-value: oklch(0.62 0.21 12);
}

@property --bga-c2 {
    syntax: '<color>';
    inherits: false;
    initial-value: oklch(0.55 0.19 330);
}

@property --bga-c3 {
    syntax: '<color>';
    inherits: false;
    initial-value: oklch(0.48 0.17 268);
}

body::before {
    content: '';
    position: fixed;
    inset: -10%;
    z-index: -2;
    pointer-events: none;
    --bga-k1: oklch(0.62 0.21 12);
    --bga-k2: oklch(0.55 0.19 330);
    --bga-k3: oklch(0.48 0.17 268);
    --bga-a: 120deg;
    --bga-c1: var(--bga-k1);
    --bga-c2: var(--bga-k2);
    --bga-c3: var(--bga-k3);
    background: linear-gradient(var(--bga-a), var(--bga-c1) 0%, var(--bga-c2) 48%, var(--bga-c3) 100%);
    animation: bga-drift 18s linear infinite;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.35;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.5) 0.5px, transparent 0.6px),
        radial-gradient(rgba(0, 0, 0, 0.5) 0.5px, transparent 0.6px);
    background-size: 3px 3px, 4px 4px;
    background-position: 0 0, 1px 2px;
    animation: bga-grain 1.1s steps(3) infinite;
}

@keyframes bga-drift {
    25%  { --bga-c1: var(--bga-k2); --bga-c2: var(--bga-k3); --bga-c3: var(--bga-k1); }
    50%  { --bga-c1: var(--bga-k3); --bga-c2: var(--bga-k1); --bga-c3: var(--bga-k2); }
    75%  { --bga-c1: var(--bga-k1); --bga-c2: var(--bga-k3); --bga-c3: var(--bga-k2); }
    100% { --bga-a: 480deg; --bga-c1: var(--bga-k1); --bga-c2: var(--bga-k2); --bga-c3: var(--bga-k3); }
}

@keyframes bga-grain {
    33% { background-position: 1px 2px, 2px 0; }
    66% { background-position: 2px 1px, 0 1px; }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
    }
}

hr, .uk-divider-icon, .uk-hr {
    border-color: var(--md-sys-color-outline-variant);
}

.uk-text-muted { color: var(--md-sys-color-on-surface-variant) !important; }
.uk-text-primary { color: var(--md-sys-color-primary) !important; }
.uk-text-success { color: var(--md-ext-color-success) !important; }
.uk-text-warning { color: var(--md-ext-color-warning) !important; }
.uk-text-danger { color: var(--md-sys-color-error) !important; }
.uk-text-secondary { color: var(--md-sys-color-secondary) !important; }
.uk-text-background { background: var(--md-sys-color-primary); }

.uk-card-title {
    font-size: var(--md-sys-typescale-title-large-size);
    line-height: 28px;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
}

/* ---------- Top app bar (header) — floating frosted-glass capsule ---------- */
.header {
    position: sticky !important;
    top: 14px;
    z-index: 1000;
    width: calc(100% - 28px);
    margin: 14px auto 0;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1rem 2.5rem -1.2rem rgba(20, 20, 50, 0.35);
}

/* The old painted bar layer becomes transparent so the glass shows through */
.header .animated-bg-container {
    background: transparent !important;
    background-image: none !important;
}

/* Capsule geometry: fixed-height bar with contents truly centered */
.header .uk-navbar {
    min-height: 96px !important;
    padding: 0 24px !important;
}

.header .uk-navbar-container {
    min-height: 96px !important;
}

.header .uk-navbar-brand {
    color: #12142b !important;
    display: flex;
    align-items: center;
    line-height: 1 !important;
}

.header .uk-navbar-brand img {
    max-height: 62px;
    height: auto;
    width: auto;
}

/* Right controls: centered against the capsule, not anchored to its top edge */
.header .uk-navbar-right {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    height: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
}

.header .uk-navbar-nav {
    height: auto !important;
}

.header .uk-navbar-nav > li > a {
    min-height: 48px !important;
}

/* Pill nav links (hd-16 style): muted ink, white pill on hover/current */
.header .uk-navbar-nav > li > a:not(.uk-button) {
    color: #575d80 !important;
    border-radius: var(--md-sys-shape-corner-full);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
    min-height: 48px;
    padding: 0.45rem 0.8rem;
    transition: color 0.16s ease, background-color 0.16s ease;
}

.header .uk-navbar-nav > li > a:not(.uk-button):hover {
    color: #12142b !important;
    background: rgba(255, 255, 255, 0.5) !important;
    transform: none;
}

.header .uk-navbar-nav > li.uk-active > a:not(.uk-button),
.header .uk-navbar-nav > li > a[aria-current="page"] {
    color: #12142b !important;
    background: rgba(255, 255, 255, 0.62) !important;
}

/* M3 has no underline indicators on top app bar items */
.header .uk-navbar-nav > li > a::before {
    display: none;
}

/* "Zgłoś awarię" — M3 filled error button */
.header .uk-navbar-nav a.uk-button-danger {
    background: var(--md-sys-color-error) !important;
    color: var(--md-sys-color-on-error) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0;
    transition: translate 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.header .uk-navbar-nav a.uk-button-danger:hover {
    translate: 0 -1px;
    box-shadow: var(--md-sys-elevation-level1) !important;
    transform: none;
}

/* ---------- Navigation menu / dropdown (frosted glass menu) ---------- */
.uk-navbar-dropdown,
.uk-dropdown {
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level2);
    color: var(--md-sys-color-on-surface);
    padding: 8px 0;
}

.uk-navbar-dropdown-nav {
    background: transparent;
    color: var(--md-sys-color-on-surface);
    padding: 0;
}

.uk-navbar-dropdown-nav > li > a,
.uk-nav-default > li > a,
.uk-nav > li > a {
    color: var(--md-sys-color-on-surface);
    border-radius: 0;
    padding: 12px 16px;
    font-size: var(--md-sys-typescale-body-large-size);
    transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.uk-navbar-dropdown-nav > li > a:hover,
.uk-navbar-dropdown-nav > li > a:focus,
.uk-nav-default > li > a:hover,
.uk-nav > li > a:hover {
    background: rgba(28, 27, 33, var(--md-sys-state-hover-opacity));
    color: var(--md-sys-color-on-surface) !important;
}

.uk-navbar-dropdown-nav > li.uk-active > a,
.uk-nav > li.uk-active > a {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container) !important;
}

/* M3 menu icons share a single on-surface-variant color */
.uk-navbar-dropdown-nav a [uk-icon],
.uk-nav a [uk-icon] {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* Long dropdown menus (e.g. admin) don't fit the viewport height —
   split them into two columns and cap the height with scrolling */
.header .uk-navbar-dropdown:has(.uk-navbar-dropdown-nav > li:nth-child(15)) {
    width: 560px !important;
    max-width: calc(100vw - 40px) !important;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    text-align: left !important;
}

.header .uk-navbar-dropdown:has(.uk-navbar-dropdown-nav > li:nth-child(15)) .uk-navbar-dropdown-nav {
    columns: 2;
    column-gap: 4px;
}

.header .uk-navbar-dropdown:has(.uk-navbar-dropdown-nav > li:nth-child(15)) .uk-navbar-dropdown-nav > li {
    break-inside: avoid;
}

/* Shorter viewports: split even medium-length menus */
@media (max-height: 720px) {
    .header .uk-navbar-dropdown {
        width: 560px !important;
        max-width: calc(100vw - 40px) !important;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        text-align: left !important;
    }

    .header .uk-navbar-dropdown .uk-navbar-dropdown-nav {
        columns: 2;
        column-gap: 4px;
    }

    .header .uk-navbar-dropdown .uk-navbar-dropdown-nav > li {
        break-inside: avoid;
    }
}

.uk-nav-header,
.uk-navbar-dropdown-nav .uk-nav-header {
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 8px 16px;
}

.uk-nav-divider,
.uk-navbar-dropdown-nav .uk-nav-divider {
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* ---------- Buttons (M3 common buttons) ---------- */
.uk-button,
button.uk-button,
a.uk-button {
    border-radius: var(--md-sys-shape-corner-full) !important;
    text-transform: none !important;
    font-family: var(--md-sys-font);
    font-weight: 500 !important;
    font-size: var(--md-sys-typescale-label-large-size) !important;
    line-height: 20px !important;
    letter-spacing: 0.1px !important;
    height: 40px !important;
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
                background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.uk-button::before { display: none !important; }

.uk-button:hover { transform: none; }

.uk-button-small {
    height: 32px !important;
    padding: 0 16px !important;
    font-size: var(--md-sys-typescale-label-medium-size) !important;
}

.uk-button-large {
    height: 48px !important;
    padding: 0 32px !important;
    font-size: var(--md-sys-typescale-title-medium-size) !important;
}

.uk-button:disabled,
.uk-button.uk-disabled {
    background: rgba(28, 27, 33, 0.12) !important;
    color: rgba(28, 27, 33, 0.38) !important;
    box-shadow: none !important;
    cursor: default;
}

/* Filled button */
.uk-button-primary {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

.uk-button-primary:hover {
    background: var(--md-sys-color-primary) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

.uk-button-primary:hover::after,
.uk-button-primary:focus-visible::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, var(--md-sys-state-hover-opacity));
    border-radius: inherit;
}

/* Tonal button */
.uk-button-secondary {
    background: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}

.uk-button-secondary:hover {
    background: var(--md-sys-color-secondary-container) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

.uk-button-secondary:hover::after,
.uk-button-secondary:focus-visible::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 44, var(--md-sys-state-hover-opacity));
    border-radius: inherit;
}

/* Error button */
.uk-button-danger {
    background: var(--md-sys-color-error) !important;
    color: var(--md-sys-color-on-error) !important;
}

.uk-button-danger:hover {
    background: var(--md-sys-color-error) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

.uk-button-danger:hover::after,
.uk-button-danger:focus-visible::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, var(--md-sys-state-hover-opacity));
    border-radius: inherit;
}

/* Outlined button */
.uk-button-default {
    background: transparent !important;
    color: var(--md-sys-color-primary) !important;
    border: 1px solid var(--md-sys-color-outline) !important;
    box-shadow: none !important;
}

.uk-button-default:hover {
    background: rgba(90, 79, 207, var(--md-sys-state-hover-opacity)) !important;
    color: var(--md-sys-color-primary) !important;
    border-color: var(--md-sys-color-outline) !important;
    transform: none;
}

/* Text button */
.uk-button-text,
.uk-button-link {
    background: transparent !important;
    color: var(--md-sys-color-primary) !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none;
}

.uk-button-text:hover,
.uk-button-link:hover {
    background: rgba(90, 79, 207, var(--md-sys-state-hover-opacity)) !important;
    color: var(--md-sys-color-primary) !important;
    transform: none;
}

/* Standard icon button (40px touch target) */
.uk-icon-button,
a.uk-icon-button,
button.uk-icon-button {
    height: 40px !important;
    width: 40px !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
    padding: 0 !important;
    line-height: 40px !important;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant) !important;
    border: none;
    transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.uk-icon-button:hover {
    background: rgba(71, 69, 81, var(--md-sys-state-hover-opacity));
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* ---------- Cards — frosted glass over the ambient background (glz-07b) ---------- */
.uk-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34)) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 26px !important;
    box-shadow: 0 32px 64px -28px rgba(60, 60, 120, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    color: var(--md-sys-color-on-surface);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* backdrop-filter creates a containing block for position:fixed —
   skip cards that contain modals/dropdowns needing fixed positioning */
.uk-card:not(:has([uk-modal])) {
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .uk-card { background: rgba(255, 255, 255, 0.94) !important; }
}

/* Cards with an intentionally custom/dark background keep it (no glass tint) */
:is(.live-channel-card, .lista-file-card) :is(.uk-card, .uk-card-default),
.uk-card[style*="0f1116"],
.uk-card[style*="background"] {
    background-image: none !important;
}

.uk-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 44px 80px -30px rgba(60, 60, 120, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.uk-card-default {
    color: var(--md-sys-color-on-surface);
}

.uk-card-primary {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

.uk-card-secondary {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}

/* Media area backdrop inside cards (inline backgrounds win — picon/logo tiles) */
body .uk-card-media-top:not([style*="background"]) {
    background-color: var(--md-sys-color-surface-container) !important;
}

/* Inner painted header strips: keep the card's own corner radius so the
   card background never peeks through at the top corners */
.uk-card > :is(.uk-position-relative, .uk-card-media-top, .uk-card-header)[style*="border-radius"],
.uk-card > div[style*="border-radius"]:has(> .animated-bg-container) {
    border-top-left-radius: 26px !important;
    border-top-right-radius: 26px !important;
}

/* Header strips inside cards: light glass sheen instead of painted purple,
   dark ink on top (glz-07b look). Dark-by-design contexts keep their look. */
.uk-card :is(div, section):has(> .animated-bg-container):not(.user-card *):not(.live-channel-card *):not(.lista-file-card *):not(.uk-card[style*="0f1116"] *):not(.uk-card[style*="background"] *) {
    border-bottom: 1px solid rgba(36, 32, 56, 0.12);
}

.uk-card .animated-bg-container:not(.user-card *):not(.live-channel-card *):not(.lista-file-card *):not(.uk-card[style*="0f1116"] *):not(.uk-card[style*="background"] *) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.18)) !important;
    animation: none !important;
}

.uk-card :is(div, section):has(> .animated-bg-container):not(.user-card *):not(.live-channel-card *):not(.lista-file-card *):not(.uk-card[style*="0f1116"] *):not(.uk-card[style*="background"] *)
    :is(h1, h2, h3, h4, h5, h6, p, div, span, small, strong, em, b, li, label,
        a:not(.uk-button),
        .uk-text-lead, .uk-text-meta, .uk-text-muted, .uk-text-small, .uk-text-large,
        .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
        .uk-heading-line, .uk-heading-small, .uk-heading-medium, .uk-heading-large,
        .uk-heading-xlarge, .uk-heading-2xlarge, .uk-card-title) {
    color: var(--md-sys-color-on-surface) !important;
    text-shadow: none !important;
}

/* Card corner handles (hide/resize/drag) — dark ink on the glass card */
.uk-card .hide-handle,
.uk-card .resize-handle,
.uk-card .sortable-handle {
    color: rgba(28, 27, 33, 0.55) !important;
}

/* ---------- Forms (M3 text fields & controls) ---------- */
.uk-input,
.uk-textarea,
.uk-select,
input[type="text"].uk-input,
input[type="email"].uk-input,
input[type="password"].uk-input {
    background: var(--md-sys-color-surface-container-lowest) !important;
    border: 1px solid var(--md-sys-color-outline) !important;
    border-radius: var(--md-sys-shape-corner-extra-small);
    color: var(--md-sys-color-on-surface) !important;
    font-family: var(--md-sys-font);
    font-size: var(--md-sys-typescale-body-large-size);
    min-height: 40px;
    transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.uk-input:focus,
.uk-textarea:focus,
.uk-select:focus {
    border-color: var(--md-sys-color-primary) !important;
    box-shadow: 0 0 0 1px var(--md-sys-color-primary) !important;
    outline: none;
    transform: none;
}

.uk-input::placeholder,
.uk-textarea::placeholder {
    color: var(--md-sys-color-on-surface-variant);
}

.uk-form-label {
    color: var(--md-sys-color-on-surface-variant);
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 500;
}

.uk-form-danger {
    border-color: var(--md-sys-color-error) !important;
    color: var(--md-sys-color-error) !important;
}

.uk-form-success {
    border-color: var(--md-ext-color-success) !important;
    color: var(--md-ext-color-success) !important;
}

.uk-checkbox,
.uk-radio,
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--md-sys-color-primary);
}

.uk-checkbox:checked,
.uk-radio:checked,
.uk-checkbox:indeterminate {
    background-color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.uk-range {
    accent-color: var(--md-sys-color-primary);
}

/* ---------- Tables (M3 data table) ---------- */
.uk-table {
    background: var(--md-sys-color-surface-container-lowest) !important;
    color: var(--md-sys-color-on-surface);
    border-radius: var(--md-sys-shape-corner-medium);
}

.uk-table th {
    background: var(--md-sys-color-surface-container-low) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 500;
    text-transform: none;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.uk-table td {
    color: var(--md-sys-color-on-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.uk-table tbody tr:hover,
.uk-table tr:hover {
    background: rgba(28, 27, 33, 0.04) !important;
    transform: none;
}

.uk-table-divider > :not(:first-child) > td,
.uk-table-divider > tr:not(:first-child) > td {
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* ---------- Alerts / banners ---------- */
.uk-alert {
    border-radius: var(--md-sys-shape-corner-medium);
    border: none !important;
    font-size: var(--md-sys-typescale-body-medium-size);
}

.uk-alert-primary,
.uk-alert:not([class*="uk-alert-"]) {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

.uk-alert-success {
    background: var(--md-ext-color-success-container) !important;
    color: var(--md-ext-color-on-success-container) !important;
}

.uk-alert-warning {
    background: var(--md-ext-color-warning-container) !important;
    color: var(--md-ext-color-on-warning-container) !important;
}

.uk-alert-danger {
    background: var(--md-sys-color-error-container) !important;
    color: var(--md-sys-color-on-error-container) !important;
}

/* ---------- Dialogs / modals (M3 dialog) ---------- */
.uk-modal-dialog {
    background: var(--md-sys-color-surface-container-high) !important;
    border-radius: var(--md-sys-shape-corner-extra-large) !important;
    box-shadow: var(--md-sys-elevation-level3);
    color: var(--md-sys-color-on-surface);
}

.uk-modal-title {
    font-size: var(--md-sys-typescale-headline-small-size);
    line-height: 32px;
    color: var(--md-sys-color-on-surface);
}

.uk-modal-close,
.uk-modal-close-default,
.uk-modal-close-outside {
    color: var(--md-sys-color-on-surface-variant) !important;
    border-radius: var(--md-sys-shape-corner-full);
}

.uk-modal-full .uk-modal-dialog { border-radius: 0; }

/* M3 scrim */
.uk-modal::before {
    background: rgba(0, 0, 0, 0.32) !important;
}

/* ---------- Dropdowns / offcanvas / overlays ---------- */
.uk-offcanvas-bar {
    background: var(--md-sys-color-surface-container-low) !important;
    color: var(--md-sys-color-on-surface) !important;
}

.uk-offcanvas-bar a { color: var(--md-sys-color-on-surface); }
.uk-offcanvas-bar a:hover { color: var(--md-sys-color-primary); }

.uk-drop,
.uk-dropbar {
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--md-sys-elevation-level2);
    border-radius: var(--md-sys-shape-corner-medium);
    color: var(--md-sys-color-on-surface);
}

.uk-tooltip {
    background: var(--md-sys-color-inverse-surface);
    color: var(--md-sys-color-inverse-on-surface);
    border-radius: var(--md-sys-shape-corner-extra-small);
    font-size: var(--md-sys-typescale-body-small-size);
    box-shadow: none;
}

/* ---------- Badges / labels / chips ---------- */
.uk-badge {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    border-radius: var(--md-sys-shape-corner-full);
    font-size: var(--md-sys-typescale-label-small-size);
    font-weight: 500;
    letter-spacing: 0.5px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
}

.uk-label {
    border-radius: var(--md-sys-shape-corner-small);
    font-size: var(--md-sys-typescale-label-medium-size);
    font-weight: 500;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    padding: 4px 8px;
    text-transform: none;
}

.uk-label-success { background: var(--md-ext-color-success-container); color: var(--md-ext-color-on-success-container); }
.uk-label-warning { background: var(--md-ext-color-warning-container); color: var(--md-ext-color-on-warning-container); }
.uk-label-danger { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

.uk-badge-large {
    border-radius: var(--md-sys-shape-corner-medium) !important;
    font-weight: 500 !important;
    text-transform: none;
}

.uk-badge-success { background-color: var(--md-ext-color-success-container) !important; color: var(--md-ext-color-on-success-container) !important; }
.uk-badge-warning { background-color: var(--md-ext-color-warning-container) !important; color: var(--md-ext-color-on-warning-container) !important; }

/* ---------- Tabs / subnav / pagination ---------- */
.uk-tab > * > a {
    color: var(--md-sys-color-on-surface-variant);
    border-bottom: 2px solid transparent;
    font-size: var(--md-sys-typescale-title-small-size);
    font-weight: 500;
}

.uk-tab > * > a:hover {
    color: var(--md-sys-color-on-surface);
    border-bottom-color: transparent;
    background: rgba(28, 27, 33, var(--md-sys-state-hover-opacity));
}

.uk-tab > .uk-active > a {
    color: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
}

.uk-tab::before { border-color: var(--md-sys-color-outline-variant); }

.uk-subnav-pill > * > a {
    border-radius: var(--md-sys-shape-corner-full);
    background: rgba(255, 255, 255, 0.75);
    color: var(--md-sys-color-on-surface-variant);
}

.uk-subnav-pill > * > a:hover {
    background: rgba(255, 255, 255, 0.92);
    color: var(--md-sys-color-on-surface);
}

.uk-subnav-pill > .uk-active > a {
    background: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}

.uk-pagination > * > a {
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-full);
}

.uk-pagination > .uk-active > * {
    color: var(--md-sys-color-primary);
    font-weight: 600;
}

/* ---------- Accordion ---------- */
.uk-accordion-title {
    color: var(--md-sys-color-on-surface);
    font-size: var(--md-sys-typescale-title-medium-size);
    border-radius: var(--md-sys-shape-corner-small);
}

.uk-accordion > li {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.uk-accordion-content { color: var(--md-sys-color-on-surface-variant); }

/* ---------- Progress (M3 linear progress indicator) ---------- */
/* Indicator color via --m3-progress-color (primary by default, semantic variants override). */
.uk-progress {
    --m3-progress-color: var(--md-sys-color-primary);
    height: 4px !important;
    background:
        radial-gradient(circle at calc(100% - 2px) 50%, var(--m3-progress-color) 2px, transparent 2.5px),
        var(--md-sys-color-secondary-container) !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
    overflow: hidden;
    box-shadow: none !important;
}

.uk-progress::-webkit-progress-bar {
    background:
        radial-gradient(circle at calc(100% - 2px) 50%, var(--m3-progress-color) 2px, transparent 2.5px),
        var(--md-sys-color-secondary-container) !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
}

.uk-progress::-webkit-progress-value {
    background: var(--m3-progress-color) !important;
    background-image: none !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
    animation: none;
}

.uk-progress::-moz-progress-bar {
    background: var(--m3-progress-color) !important;
    background-image: none !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
    animation: none;
}

/* ---------- Spinners / loaders (M3 circular progress) ---------- */
.uk-spinner svg circle,
.uk-spinner circle {
    stroke: var(--md-sys-color-primary) !important;
    stroke-width: 3 !important;
    stroke-linecap: round;
}

.m3-circular {
    display: inline-block;
    animation: m3-circular-rotate 1568ms linear infinite;
}

.m3-circular__track {
    fill: none;
    stroke: var(--md-sys-color-secondary-container);
    stroke-width: 4;
}

.m3-circular__bar {
    fill: none;
    stroke: var(--md-sys-color-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: m3-circular-dash 1333ms ease-in-out infinite;
}

@keyframes m3-circular-rotate {
    100% { transform: rotate(360deg); }
}

@keyframes m3-circular-dash {
    0%   { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; }
    100% { stroke-dasharray: 90, 200; stroke-dashoffset: -124px; }
}

/* Full-screen preloader — M3 surface scrim + circular progress */
.global-loader {
    background: var(--md-sys-color-surface);
    backdrop-filter: none;
}

.global-loader--hidden { opacity: 0; }

.loading {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 0;
    border-top-color: transparent;
    animation: m3-circular-rotate 1568ms linear infinite;
    position: relative;
}

.loading::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--md-sys-color-secondary-container);
}

.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--md-sys-color-primary);
}

/* ---------- Lists ---------- */
.uk-list > li { color: var(--md-sys-color-on-surface); }
.uk-list-divider > li:nth-child(n+2) { border-top-color: var(--md-sys-color-outline-variant); }

/* ---------- Footer ---------- */
.footer {
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.footer a { color: #e3dbff; }
.footer a:hover { color: #ffffff; }

/* ---------- Main content container ---------- */
.main-content {
    background: transparent;
    border: none;
    backdrop-filter: none;
}

/* ---------- Mobile navigation (M3 nav drawer styling) ---------- */
.mobile-menu-toggle {
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-full);
}

.mobile-menu-toggle:hover {
    background: rgba(71, 69, 81, var(--md-sys-state-hover-opacity));
}

.mobile-menu {
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--md-sys-elevation-level2);
}

.mobile-menu li { border-bottom: none; }

.mobile-menu a {
    color: var(--md-sys-color-on-surface-variant) !important;
    border-radius: var(--md-sys-shape-corner-full);
    margin: 2px 8px;
    padding: 12px 16px;
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-menu a:hover {
    background: rgba(28, 27, 33, var(--md-sys-state-hover-opacity));
    color: var(--md-sys-color-on-surface) !important;
}

.mobile-menu li.uk-active a {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container) !important;
}

.mobile-menu .uk-nav-header {
    color: var(--md-sys-color-on-surface-variant);
    padding: 8px 24px;
    font-size: var(--md-sys-typescale-label-small-size);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar-track { background: var(--md-sys-color-surface-container-low); }
::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-full); }
::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-outline); }

/* ---------- Chat (M3 bubbles & FAB) ---------- */
.chat-card-ios { background: var(--md-sys-color-surface-container-low); }

.chat-messages-ios {
    background: var(--md-sys-color-surface);
    box-shadow: none;
}

.chat-bubble-ios {
    box-shadow: none;
    font-size: var(--md-sys-typescale-body-medium-size);
}

.chat-message-row.from-them .chat-bubble-ios {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
    border-bottom-left-radius: var(--md-sys-shape-corner-extra-small);
}

.chat-message-row.from-them .chat-bubble-ios::before {
    background: var(--md-sys-color-surface-container-highest);
}

.chat-message-row.from-me .chat-bubble-ios {
    background: #bcd6f5;
    color: #1a1c21;
    border-bottom-right-radius: var(--md-sys-shape-corner-extra-small);
}

.chat-message-row.from-me .chat-bubble-ios::before {
    background: #bcd6f5;
}

.chat-sender-name { color: var(--md-sys-color-on-surface-variant); }
.chat-message-row.from-them .chat-meta { color: var(--md-sys-color-on-surface-variant); }
.chat-message-row.from-them .chat-file-link { color: var(--md-sys-color-primary) !important; }

.chat-avatar-icon,
.chat-contact-avatar,
.chat-header-avatar {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: none;
}

.chat-contact-item:hover { background: rgba(28, 27, 33, var(--md-sys-state-hover-opacity)); }

.chat-contact-item.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.chat-contact-item.active .chat-contact-meta { color: var(--md-sys-color-on-secondary-container); }

.chat-contact-meta { color: var(--md-sys-color-on-surface-variant); }
.chat-contact-unread { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }

.chat-badge { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }

.chat-status-dot { background: var(--md-sys-color-outline); }
.chat-status-dot.online { background: var(--md-ext-color-success); }
.chat-status-text { color: var(--md-sys-color-on-surface-variant); }

.chat-header-row { border-bottom-color: var(--md-sys-color-outline-variant); }

/* M3 FAB */
.chat-floating-button {
    width: 56px;
    height: 56px;
    border-radius: var(--md-sys-shape-corner-large);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    box-shadow: var(--md-sys-elevation-level3);
    transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.chat-floating-button:hover {
    box-shadow: var(--md-sys-elevation-level4);
    background: var(--md-sys-color-primary-container);
}

.chat-floating-button span[uk-icon] { color: var(--md-sys-color-on-primary-container); }

.chat-typing-indicator { color: var(--md-sys-color-on-surface-variant); }
.chat-typing-indicator .dot { background: var(--md-sys-color-on-surface-variant); }

.emoji-picker {
    background: var(--md-sys-color-surface-container);
    border: none;
    box-shadow: var(--md-sys-elevation-level2);
    border-radius: var(--md-sys-shape-corner-medium);
}

.emoji-btn:hover { background: rgba(28, 27, 33, var(--md-sys-state-hover-opacity)); }

.chat-attachment-preview { color: var(--md-sys-color-on-surface-variant); }
.chat-attachment-preview-remove { color: var(--md-sys-color-error); }

/* ---------- Miscellaneous custom classes ---------- */
.pastel-blue,
.pastel-green,
.pastel-pink,
.pastel-yellow,
.pastel-purple,
.pastel-cyan,
.pastel-lavender {
    background: var(--md-sys-color-surface-container-low) !important;
    border: none !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

.pastel-green::before,
.pastel-cyan::before,
.pastel-lavender::before,
.shine-effect::after {
    display: none;
    animation: none;
}

.subscription-warning {
    background: var(--md-ext-color-warning-container);
    border: none;
    color: var(--md-ext-color-on-warning-container);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: none;
}

.subscription-warning h5 { color: var(--md-ext-color-on-warning-container); }
.subscription-warning .warning-content p { color: var(--md-ext-color-on-warning-container); }

.subscription-days {
    color: var(--md-sys-color-primary) !important;
    text-shadow: none;
}

.subscription-label {
    color: var(--md-sys-color-on-surface-variant) !important;
    font-size: var(--md-sys-typescale-label-large-size) !important;
    letter-spacing: 0.1px;
}

.usdt-price { color: var(--md-ext-color-success); }
.usdt-price.usdt-error { color: var(--md-sys-color-error); }

.message-count-badge {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
    box-shadow: var(--md-sys-elevation-level1);
    text-shadow: none;
}

.user-tag {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border-radius: var(--md-sys-shape-corner-small);
}

.user-tags {
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    background: var(--md-sys-color-surface-container-lowest);
}

.plan-pricing-alert {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
    border: none;
    border-radius: var(--md-sys-shape-corner-medium);
    font-weight: 500;
}

.plan-pricing-status { color: var(--md-sys-color-on-error-container); }
.plan-pricing-progress { background: var(--md-sys-color-secondary-container); height: 4px; border-radius: var(--md-sys-shape-corner-full); }
.plan-pricing-progress__bar { background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-full); }
.plan-pricing-circle__svg { filter: none; }
.plan-pricing-circle__track { stroke: var(--md-sys-color-secondary-container); }
.plan-pricing-circle__bar { stroke: var(--md-sys-color-primary); }
.plan-pricing-circle__text { fill: var(--md-sys-color-on-surface); font-weight: 500; }

.plan-price-badge {
    border-radius: var(--md-sys-shape-corner-medium);
    font-weight: 500;
}

.plan-price-badge--gbp { background: var(--md-ext-color-info-container); color: var(--md-ext-color-on-info-container); }
.plan-price-badge--usdt { background: var(--md-ext-color-success-container); color: var(--md-ext-color-on-success-container); }

/* Header search/filter inputs -> M3 on-surface fields */
.header-filter-input {
    background-color: var(--md-sys-color-surface-container-highest) !important;
    border: 1px solid transparent !important;
    color: var(--md-sys-color-on-surface) !important;
    backdrop-filter: none;
    border-radius: var(--md-sys-shape-corner-full);
}

.header-filter-input:focus {
    background-color: var(--md-sys-color-surface-container-highest) !important;
    border-color: var(--md-sys-color-primary) !important;
    box-shadow: none;
}

.header-filter-input::placeholder { color: var(--md-sys-color-on-surface-variant) !important; }

.header-filter-btn {
    border-color: var(--md-sys-color-outline) !important;
    background: transparent !important;
    color: var(--md-sys-color-primary) !important;
    backdrop-filter: none;
    border-radius: var(--md-sys-shape-corner-full) !important;
}

.header-filter-btn:hover {
    background: rgba(90, 79, 207, var(--md-sys-state-hover-opacity)) !important;
}

.panel-add-btn {
    border: none;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    backdrop-filter: none;
}

.panel-add-btn:hover {
    background: var(--md-sys-color-secondary-container);
    border-color: transparent;
}

/* Weather card: keep layout, retone to M3 surface */
.weather-card {
    background: var(--md-sys-color-surface-container-low);
    box-shadow: var(--md-sys-elevation-level1);
    border-radius: var(--md-sys-shape-corner-medium);
}

.weather-card__place { color: var(--md-sys-color-on-surface); }
.weather-card__date,
.weather-card__desc { color: var(--md-sys-color-on-surface-variant); }
.weather-temp { color: var(--md-sys-color-on-surface); }

.weather-forecast__day {
    background: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-medium);
}

.weather-forecast__dow,
.weather-forecast__date { color: var(--md-sys-color-on-surface-variant); }
.weather-forecast__temp { color: var(--md-sys-color-on-surface); }

.weather-card-shell .weather-action {
    background: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface-variant) !important;
    border: none;
    box-shadow: var(--md-sys-elevation-level1);
    backdrop-filter: none;
    border-radius: var(--md-sys-shape-corner-full);
}

.weather-card-shell .weather-action:hover {
    background: var(--md-sys-color-surface-container-highest);
}

.weather-card--night {
    background: var(--md-sys-color-inverse-surface);
}

.weather-card--night .weather-card__place,
.weather-card--night .weather-temp { color: var(--md-sys-color-inverse-on-surface); }
.weather-card--night .weather-card__date,
.weather-card--night .weather-card__desc { color: rgba(244, 239, 247, 0.6); }
.weather-card--night .weather-forecast__day { background: rgba(244, 239, 247, 0.08); }
.weather-card--night .weather-forecast__dow,
.weather-card--night .weather-forecast__date { color: rgba(244, 239, 247, 0.6); }
.weather-card--night .weather-forecast__temp { color: var(--md-sys-color-inverse-on-surface); }

/* ---------- Sliders / carousels / lightbox ---------- */
.uk-slidenav {
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-full);
}

.uk-slidenav:hover {
    color: var(--md-sys-color-on-surface);
    background: rgba(28, 27, 33, var(--md-sys-state-hover-opacity));
}

.uk-dotnav > * > * {
    background: var(--md-sys-color-outline-variant);
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
}

.uk-dotnav > * > :hover,
.uk-dotnav > * > :focus {
    background: var(--md-sys-color-on-surface-variant);
}

.uk-dotnav > .uk-active > * {
    background: var(--md-sys-color-primary);
}

.uk-slidenav-container .uk-slidenav,
.uk-position-bottom-center .uk-dotnav > * > * {
    background: rgba(255, 255, 255, 0.7);
}

.uk-lightbox-toolbar,
.uk-lightbox-caption { color: var(--md-sys-color-inverse-on-surface); }
.uk-lightbox-toolbar-icon,
.uk-lightbox-button { color: var(--md-sys-color-inverse-on-surface); }

/* ---------- Breadcrumb / search ---------- */
.uk-breadcrumb > * > * { color: var(--md-sys-color-on-surface-variant); }
.uk-breadcrumb > * > :hover { color: var(--md-sys-color-primary); }
.uk-breadcrumb > .uk-disabled > * { color: var(--md-sys-color-outline); }
.uk-breadcrumb > :last-child > * { color: var(--md-sys-color-on-surface); }

.uk-search .uk-search-input { color: var(--md-sys-color-on-surface); }
.uk-search .uk-search-input::placeholder { color: var(--md-sys-color-on-surface-variant); }
.uk-search-icon { color: var(--md-sys-color-on-surface-variant); }

/* ---------- Countdown / misc ---------- */
.uk-countdown-number,
.uk-countdown-label { color: var(--md-sys-color-on-surface); }
.uk-countdown-separator { color: var(--md-sys-color-on-surface-variant); }

.uk-heading-divider { border-bottom-color: var(--md-sys-color-outline-variant); }
.uk-heading-line > ::before,
.uk-heading-line > ::after { border-bottom-color: var(--md-sys-color-outline-variant); }

.uk-placeholder {
    border-color: var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-low);
    color: var(--md-sys-color-on-surface-variant);
}

.uk-overlay-default { background: rgba(0, 0, 0, 0.4); }

/* ---------- Outage report wizard (awarie.php) ---------- */
body .outage-card {
    background: var(--md-sys-color-surface-container-low) !important;
    border: none !important;
    border-radius: var(--md-sys-shape-corner-large) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

body .outage-card__head {
    border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
}

body .outage-title { color: var(--md-sys-color-on-surface) !important; }
body .outage-sub { color: var(--md-sys-color-on-surface-variant) !important; }

body .outage-stepperline {
    background: var(--md-sys-color-surface-container) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
}

body .outage-step:not(:last-child)::after {
    background: var(--md-sys-color-outline-variant) !important;
}

body .outage-step.is-done:not(:last-child)::after {
    background: var(--md-sys-color-primary) !important;
}

body .outage-step__dot {
    border-color: var(--md-sys-color-outline) !important;
    background: var(--md-sys-color-surface-container-lowest) !important;
    box-shadow: none !important;
}

body .outage-step.is-active .outage-step__dot {
    border-color: var(--md-sys-color-primary) !important;
    background: var(--md-sys-color-primary-container) !important;
}

body .outage-step.is-done .outage-step__dot {
    border-color: var(--md-sys-color-primary) !important;
    background: var(--md-sys-color-primary) !important;
}

body .outage-step__label { color: var(--md-sys-color-on-surface-variant) !important; }
body .outage-step.is-active .outage-step__label,
body .outage-step.is-done .outage-step__label { color: var(--md-sys-color-on-surface) !important; }

body .outage-stepper__pill {
    background: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
}

body .outage-hint {
    background: var(--md-sys-color-primary-container) !important;
    border: none !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

body .outage-q {
    background: var(--md-sys-color-surface-container) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
}

body .outage-q label { color: var(--md-sys-color-on-surface) !important; }

body .outage-summary {
    border: 1px dashed var(--md-sys-color-outline-variant) !important;
    background: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
}

body .outage-done { color: var(--md-sys-color-on-surface) !important; }
body .outage-done-sub { color: var(--md-sys-color-on-surface-variant) !important; }

body .outage-empty {
    background: var(--md-sys-color-surface-container) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
}

/* M3 bottom app bar style for the sticky action bar */
body .outage-stickybar {
    background: var(--md-sys-color-surface-container) !important;
    border-top: none !important;
    box-shadow: var(--md-sys-elevation-level2) !important;
    backdrop-filter: none !important;
}

/* ---------- Channel/logo tiles (picon cards) — dark surfaces by design ---------- */
body .picon-grid-card {
    background: #0f1116 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

body .picon-grid-card::before { display: none !important; }

body .picon-grid-card img { filter: none !important; }

body .picon-check-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

body .picon-grid-card.is-selected {
    border-color: var(--md-sys-color-error) !important;
    box-shadow: 0 0 0 2px var(--md-sys-color-error), var(--md-sys-elevation-level2) !important;
}

body .picon-card {
    background: #0f1116 !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
}

/* ---------- Shop (sklep.php / sklep_item.php) ---------- */
body .shop-card,
body .product-card {
    background: var(--md-sys-color-surface-container-low) !important;
    border: none !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
}

body .shop-card__media,
body .product-slider,
body .product-slider .uk-slideshow-items > li {
    background: var(--md-sys-color-surface-container) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

body .shop-card__title,
body .product-title,
body .shop-card__price,
body .product-price { color: var(--md-sys-color-on-surface) !important; }

body .shop-card__meta,
body .product-meta,
body .shop-rate-info,
body .rate-info,
body .product-desc { color: var(--md-sys-color-on-surface-variant) !important; }

body .shop-card__price-sub,
body .product-price-sub { color: var(--md-ext-color-success) !important; }

/* ---------- Downloads (downloads.php) ---------- */
body .download-card {
    background: var(--md-sys-color-surface-container-low) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
}

body .download-card:hover {
    transform: none !important;
    box-shadow: var(--md-sys-elevation-level2) !important;
}

body .download-content { color: var(--md-sys-color-on-surface) !important; }
body .download-title { color: var(--md-sys-color-on-surface) !important; font-weight: 500; }
body .download-meta { color: var(--md-sys-color-on-surface-variant) !important; }
body .download-desc { color: var(--md-sys-color-on-surface-variant) !important; }

body select.header-filter-input option {
    background-color: var(--md-sys-color-surface-container-lowest) !important;
    color: var(--md-sys-color-on-surface) !important;
}

/* ---------- Category badges (faq.php, downloads.php) ---------- */
body .category-badge {
    background: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
    border-radius: var(--md-sys-shape-corner-small) !important;
    font-weight: 500;
    text-shadow: none;
}

/* ---------- Channels grid (kanaly.php) ---------- */
body .channels-section-title { color: rgba(255, 255, 255, 0.95) !important; }

body .channels-section-title::before,
body .channels-section-title::after {
    border-bottom-color: var(--md-sys-color-outline-variant) !important;
}

body .channels-info-pill {
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    color: var(--md-sys-color-on-surface) !important;
}

body .channels-info-pill--iptv {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
    border: none !important;
}

body .channels-grid-card {
    background-color: #0f1116 !important;
    background-image: radial-gradient(120% 140% at 12% 8%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 42%, rgba(0,0,0,0.55) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: var(--md-sys-shape-corner-small) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.40) !important;
}

/* ---------- Check page result banners (check.php) ---------- */
body .result-good {
    background-color: var(--md-ext-color-success-container) !important;
    border-color: transparent !important;
    color: var(--md-ext-color-on-success-container) !important;
}

body .result-warning {
    background-color: var(--md-ext-color-warning-container) !important;
    border-color: transparent !important;
    color: var(--md-ext-color-on-warning-container) !important;
}

body .result-danger {
    background-color: var(--md-sys-color-error-container) !important;
    border-color: transparent !important;
    color: var(--md-sys-color-on-error-container) !important;
}

body .result-secondary {
    background-color: var(--md-sys-color-secondary-container) !important;
    border-color: transparent !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}

/* ---------- Live channel / decoder widgets — dark surfaces by design ---------- */
body .live-channel-card {
    background-color: #121212 !important;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 0),
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 0) !important;
    background-size: auto, 40px 40px, 20px 20px, 20px 20px !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

body .live-channel-card .uk-card-title,
body .live-channel-card h1,
body .live-channel-card h2,
body .live-channel-card h3,
body .live-channel-card h4 {
    color: rgba(255, 255, 255, 0.95) !important;
}

body .live-channel-card #live-channel-no-ecm,
body .live-channel-card .uk-form-label,
body .live-channel-card .uk-text-muted,
body .live-channel-card .uk-text-meta,
body .live-channel-card .uk-text-small {
    color: rgba(255, 255, 255, 0.72) !important;
}

body .live-channel-row {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--md-sys-shape-corner-small) !important;
    background: rgba(0, 0, 0, 1) !important;
}

body .live-channel-picon {
    background: rgba(0, 0, 0, 1) !important;
    border-radius: var(--md-sys-shape-corner-small) !important;
}

body .live-channel-title { color: var(--md-sys-color-on-surface) !important; }
body .live-channel-sub,
body .live-channel-label { color: var(--md-sys-color-on-surface-variant) !important; }
body .live-channel-value { color: var(--md-sys-color-on-surface) !important; }

body .decoder-program {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(28, 27, 33, 0.12) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
}

body .decoder-program__show { color: rgba(28, 27, 33, 0.92) !important; }

/* Dark variant stays only inside the live-channel widget (profile.php) */
body .live-channel-card .decoder-program {
    background: rgba(0, 0, 0, 1) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body .live-channel-card .decoder-program__show { color: rgba(255, 255, 255, 0.92) !important; }

/* Decoder progress bars — M3 linear indicators on dark strips.
   Indicator color per state via --m3-progress-color; track/dot come from base .uk-progress. */
body .decoder-program__progress.uk-progress {
    --m3-progress-color: var(--md-sys-color-primary);
}

body .decoder-signal__progress.uk-progress,
body .decoder-memory__progress.uk-progress {
    --m3-progress-color: #22c55e;
}

body .decoder-signal__progress--warn.uk-progress,
body .decoder-memory__progress--warn.uk-progress {
    --m3-progress-color: #f59e0b;
}

body .decoder-signal__progress--bad.uk-progress,
body .decoder-memory__progress--bad.uk-progress {
    --m3-progress-color: #ef4444;
}

body .decoder-program__progress.uk-progress,
body .decoder-signal__progress.uk-progress,
body .decoder-signal__progress--warn.uk-progress,
body .decoder-signal__progress--bad.uk-progress,
body .decoder-memory__progress.uk-progress,
body .decoder-memory__progress--warn.uk-progress,
body .decoder-memory__progress--bad.uk-progress {
    height: 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* ---------- Profile extras (profile.php) ---------- */
body .profile-avatar {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

body .profile-avatar--initials {
    background: var(--md-sys-color-primary-container) !important;
}

body .profile-avatar-ring__spin,
body .profile-avatar-ring__spin span {
    background-image: linear-gradient(var(--md-sys-color-primary), var(--md-sys-color-primary)) !important;
}

body .profile-avatar-ring::after {
    border-color: var(--md-sys-color-surface-container-lowest) !important;
}

body .active-subscription-overlay {
    background: rgba(235, 230, 239, 0.92) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    color: var(--md-sys-color-on-surface) !important;
}

body .profile-token-pill {
    border: 1px solid rgba(17, 24, 39, 0.20) !important;
    background: rgba(17, 24, 39, 0.06) !important;
    color: rgba(17, 24, 39, 0.92) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
}

body .ecm-badge--label {
    background: #1d4ed8 !important;
    color: #eaf2ff !important;
    border-top-left-radius: var(--md-sys-shape-corner-small) !important;
    border-bottom-left-radius: var(--md-sys-shape-corner-small) !important;
}

body .ecm-badge--value {
    background: rgba(28, 27, 33, 0.07) !important;
    color: rgba(28, 27, 33, 0.92) !important;
    border-top-right-radius: var(--md-sys-shape-corner-small) !important;
    border-bottom-right-radius: var(--md-sys-shape-corner-small) !important;
}

body .live-channel-card .ecm-badge--value {
    background: #0b1220 !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

body .profile-vpn-row .uk-label-success {
    background: var(--md-ext-color-success-container) !important;
    color: var(--md-ext-color-on-success-container) !important;
}

body .profile-vpn-row .uk-label-danger {
    background: var(--md-sys-color-error-container) !important;
    color: var(--md-sys-color-on-error-container) !important;
}

body .profile-vpn-row .uk-label-primary {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

/* ---------- Admin widgets ---------- */

/* Channel list editor (admin/lista_kanalow.php) — light milky workspace */
body .lista-file-card {
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
    color: var(--md-sys-color-on-surface) !important;
}

body .lista-file-card .uk-card,
body .lista-file-card .uk-card-default {
    background-color: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(28, 27, 33, 0.12) !important;
    color: var(--md-sys-color-on-surface) !important;
}

body .lista-file-card .uk-text-bold,
body .lista-file-card [style*="color: rgba(255,255,255"],
body .lista-file-card [style*="color:rgba(255,255,255"] {
    color: rgba(28, 27, 33, 0.88) !important;
}

body .bouquet-list {
    border: 1px solid rgba(28, 27, 33, 0.12) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    background: rgba(255, 255, 255, 0.55) !important;
}

body .bouquet-row {
    border: 1px solid rgba(28, 27, 33, 0.12) !important;
    border-radius: var(--md-sys-shape-corner-small) !important;
    background: rgba(255, 255, 255, 0.6) !important;
}

body .bouquet-index { color: rgba(28, 27, 33, 0.75) !important; }
body .bouquet-handle { color: rgba(28, 27, 33, 0.55) !important; }
body .bouquet-count { color: rgba(28, 27, 33, 0.75) !important; }

body .bouquet-input {
    border: 1px solid rgba(28, 27, 33, 0.16) !important;
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    color: rgba(28, 27, 33, 0.92) !important;
}

body .bouquet-input:focus { border-color: var(--md-sys-color-primary) !important; }

body .lista-textarea {
    background: rgba(255, 255, 255, 0.75) !important;
    color: rgba(28, 27, 33, 0.92) !important;
    border-color: rgba(28, 27, 33, 0.16) !important;
}

/* Picon tag panels (admin/picons.php) — light panels, dark picon tiles */
body .tags-panel,
body .picon-panel {
    background: rgba(255, 255, 255, 0.55) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    border: 1px solid rgba(28, 27, 33, 0.12) !important;
}

body .tags-panel-title,
body .picon-panel-title {
    color: rgba(28, 27, 33, 0.92) !important;
    border-bottom-color: rgba(28, 27, 33, 0.12) !important;
}

body .tag-row {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(28, 27, 33, 0.12) !important;
}

body .tag-row:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(28, 27, 33, 0.2) !important;
}

body .tag-row.drag-over {
    border-color: rgba(108, 92, 231, 0.85) !important;
    background: rgba(108, 92, 231, 0.14) !important;
}

body .tag-actions {
    background: rgba(255, 255, 255, 0.5) !important;
    border-top-color: rgba(28, 27, 33, 0.12) !important;
}

body .tag-hint { color: rgba(28, 27, 33, 0.6) !important; }

body .tag-input {
    background: rgba(255, 255, 255, 0.85) !important;
    color: rgba(28, 27, 33, 0.92) !important;
    border: 1px solid rgba(28, 27, 33, 0.16) !important;
}

body .tag-input::placeholder { color: rgba(28, 27, 33, 0.45) !important; }

body .tag-picon {
    border: 2px dashed rgba(255, 255, 255, 0.22) !important;
    background: #0f1116 !important;
}

body .tag-picon.has {
    border-style: solid !important;
    border-color: rgba(34, 197, 94, 0.55) !important;
}

body .picon-thumb {
    border: 2px solid rgba(255, 255, 255, 0.10) !important;
    background: #0f1116 !important;
}

body .picon-thumb:hover { border-color: rgba(108, 92, 231, 0.75) !important; }

/* User cards (admin/users.php) — light milky glass, glz-07b style */
body .user-card > .uk-card,
body .user-card > .uk-card.uk-card-default,
body .user-card > .user-card-shell {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.38)) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 32px 64px -28px rgba(60, 60, 120, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    color: var(--md-sys-color-on-surface) !important;
}

body .user-card > .uk-card:not(:has([uk-modal])) {
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}

body .user-card .uk-card-body {
    background: transparent !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

body .user-card .uk-card-title,
body .user-card h2,
body .user-card h3,
body .user-card h4 {
    color: var(--md-sys-color-on-surface) !important;
}

body .user-card .uk-text-muted,
body .user-card .uk-text-meta,
body .user-card .uk-text-small {
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* Picon surfaces stay dark — everywhere else is light */
body .decoder-picon {
    background: rgba(0, 0, 0, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body .decoder-strip,
body .vpn-strip,
body .token-strip,
body .decoder-signal,
body .ecm-time-chart {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(28, 27, 33, 0.12) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
}

body .token-pill {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(28, 27, 33, 0.16) !important;
    color: rgba(28, 27, 33, 0.9) !important;
}

body .token-pill:hover { background: rgba(255, 255, 255, 0.9) !important; }

body .vpn-tag .vpn-badge--label {
    background: #16a34a !important;
    color: #eafff1 !important;
}

body .vpn-tag .vpn-badge--value {
    background: rgba(28, 27, 33, 0.07) !important;
    color: rgba(28, 27, 33, 0.92) !important;
}

body .plan-corner {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(28, 27, 33, 0.10) !important;
    box-shadow: 0 8px 20px -8px rgba(60, 60, 120, 0.35) !important;
}

/* Picon thumbnails keep dark backgrounds on every page */
body .bouquet-picon {
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: var(--md-sys-shape-corner-small) !important;
    padding: 4px;
}

/* Inline dark picon tiles (index.php, admin/outage_reports.php) */
body .uk-card[style*="0f1116"],
body [style*="background:#0f1116"],
body [style*="background: #0f1116"] {
    background-color: #0f1116 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* User cards have no colored cover — VPN state is shown as a glow ring
   around the avatar instead (glz-07b style). */

/* VPN status = glow ring around the avatar (green = VPN active) */
body .user-card[data-vpn="1"] .user-card-identity__avatar::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 3px solid rgba(34, 197, 94, 0.9);
    box-shadow: 0 0 24px 6px rgba(34, 197, 94, 0.55), inset 0 0 12px rgba(34, 197, 94, 0.35);
    pointer-events: none;
}

body .user-card[data-vpn="0"] .user-card-identity__avatar::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 18px 4px rgba(124, 108, 240, 0.35);
    pointer-events: none;
}

/* Admin custom action buttons -> M3 roles */
body .uk-button-welcome {
    background: var(--md-ext-color-success) !important;
    color: var(--md-ext-color-on-success) !important;
}

body .uk-button-subscription {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

body .uk-button-email {
    background: var(--md-sys-color-tertiary) !important;
    color: var(--md-sys-color-on-tertiary) !important;
}

/* M3 spinner for card action indicator (admin/users.php) */
body .user-card-action-indicator__spinner {
    border: 4px solid var(--md-sys-color-secondary-container) !important;
    border-top-color: var(--md-sys-color-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Admin users get an ADMIN badge instead of a colored avatar ring —
   the VPN glow ring (.user-card-identity__avatar::after) applies to them too. */

/* Order status pills (admin/shop_orders.php) */
body .pill--confirmed {
    background: var(--md-ext-color-success-container) !important;
    color: var(--md-ext-color-on-success-container) !important;
}

/* Subscription preview (admin/subscription_preview.php) — light milky panels */
body .preview-step {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.38)) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 54px -24px rgba(60, 60, 120, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body .preview-step__head {
    border-bottom: 1px solid rgba(28, 27, 33, 0.10) !important;
}

body .preview-step__title { color: rgba(28, 27, 33, 0.92) !important; }
body .preview-step__body { background: transparent !important; }

body .preview-wrap [style*="color: rgba(255,255,255"],
body .preview-wrap [style*="color:rgba(255,255,255"] {
    color: var(--md-sys-color-on-surface) !important;
}

body .preview-iframe {
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    background: var(--md-sys-color-surface-container-lowest) !important;
}

body .payment-container {
    background: var(--md-sys-color-surface-container-low) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-level1) !important;
    color: var(--md-sys-color-on-surface) !important;
}

body .price-tag { color: var(--md-sys-color-on-surface) !important; }

body .qr-code {
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-small) !important;
    background: var(--md-sys-color-surface-container-lowest) !important;
}

body .user-info {
    background: var(--md-sys-color-surface-container) !important;
    border-radius: var(--md-sys-shape-corner-small) !important;
    color: var(--md-sys-color-on-surface) !important;
}

body .btn-confirm {
    background: var(--md-ext-color-success) !important;
    color: var(--md-ext-color-on-success) !important;
}

/* Media thumbnails (admin/matrix_banners, hls_slides, news_carousel) */
body .matrix-thumb,
body .hls-item-card__img,
body .news-item-card__img {
    background: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
}

/* Channel name mapping page (admin/lista2.php) */
body .page-wrap h1 { color: var(--md-sys-color-on-surface) !important; }
body .page-wrap p[style*="color"] { color: var(--md-sys-color-on-surface-variant) !important; }

body .channel-row {
    border-bottom-color: var(--md-sys-color-outline-variant) !important;
}

body .channel-row:hover {
    background: rgba(28, 27, 33, var(--md-sys-state-hover-opacity)) !important;
}

body .channel-source { color: var(--md-sys-color-on-surface) !important; }

body .channels-card {
    background: var(--md-sys-color-surface-container-low) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
}

body .stat-chip {
    background: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
    border: none !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
}

body .search-wrap,
body .sticky-header-wrap {
    background: var(--md-sys-color-surface) !important;
    border-bottom-color: var(--md-sys-color-outline-variant) !important;
}

body .has-map { box-shadow: inset 4px 0 0 var(--md-ext-color-success) !important; }

/* Outage reports admin (admin/outage_reports.php) */
body .outage-admin-shell { color: var(--md-sys-color-on-surface) !important; }

body .outage-admin-shell h2,
body .outage-admin-shell .uk-heading-small {
    color: var(--md-sys-color-on-surface) !important;
    text-shadow: none !important;
}

body .outage-admin-shell .uk-text-muted,
body .outage-admin-shell .uk-text-meta {
    color: var(--md-sys-color-on-surface-variant) !important;
}

body .outage-admin-shell .uk-text-small { color: var(--md-sys-color-on-surface-variant) !important; }

body .outage-admin-shell .uk-button.uk-button-default {
    background: transparent !important;
    color: var(--md-sys-color-primary) !important;
    border: 1px solid var(--md-sys-color-outline) !important;
}

body .outage-admin-shell .uk-accordion-title,
body .outage-admin-shell .uk-accordion-title:hover {
    color: var(--md-sys-color-on-surface) !important;
}

body .outage-admin-shell .uk-accordion-content {
    color: var(--md-sys-color-on-surface-variant) !important;
}

body .outage-admin-shell .uk-card.uk-card-default {
    background-color: var(--md-sys-color-surface-container-low) !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
}

body .outage-admin-shell .uk-textarea {
    background: var(--md-sys-color-surface-container-lowest) !important;
    color: var(--md-sys-color-on-surface) !important;
    border: 1px solid var(--md-sys-color-outline) !important;
}

body .outage-admin-shell .uk-textarea::placeholder {
    color: var(--md-sys-color-on-surface-variant) !important;
}

body .outage-admin-shell .uk-form-label,
body .outage-admin-shell label {
    color: var(--md-sys-color-on-surface-variant) !important;
}

body .outage-admin-shell ul > li[style] {
    border-color: var(--md-sys-color-outline-variant) !important;
    background: var(--md-sys-color-surface-container-low) !important;
}

body .outage-admin-shell td {
    background: var(--md-sys-color-surface-container) !important;
    color: var(--md-sys-color-on-surface) !important;
    border-color: var(--md-sys-color-outline-variant) !important;
}

/* Picon tiles inside outage admin keep their dark background */
body .outage-admin-shell .uk-card[style*="0f1116"],
body .outage-admin-shell [style*="background:#0f1116"],
body .outage-admin-shell [style*="background: #0f1116"] {
    background-color: #0f1116 !important;
}

/* ---------- Reduced motion (M3 accessibility) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}