/*
 * ╔═══════════════════════════════════════════════════════════════════════╗
 * ║         RELAY — Suite Design System v2.0                              ║
 * ║  Shared across: IPTVProject · stremio-ai-suite                        ║
 * ║  Framework: Bootstrap 5.3.0 + Inter (Google Fonts)                    ║
 * ║                                                                        ║
 * ║  STRUCTURE                                                             ║
 * ║   1.  Design Tokens — Light Mode (:root)                              ║
 * ║   2.  Design Tokens — Dark Mode  ([data-theme="dark"])                ║
 * ║   3.  Motion, Shadow & Radius Tokens                                  ║
 * ║   4.  Spacing Scale                                                    ║
 * ║   5.  Base / Reset                                                     ║
 * ║   6.  Typography                                                       ║
 * ║   7.  Layout Utilities                                                 ║
 * ║   8.  Cards & Containers                                               ║
 * ║   9.  Status Indicators & Badges                                       ║
 * ║  10.  Forms & Inputs                                                   ║
 * ║  11.  Buttons                                                          ║
 * ║  12.  Navigation & Dropdowns                                           ║
 * ║  13.  Tables & Data Rows                                               ║
 * ║  14.  Speed Test Components (IPTV)                                     ║
 * ║  15.  Terminal / Log Display                                           ║
 * ║  16.  Modals & Overlays                                                ║
 * ║  17.  Accordions                                                       ║
 * ║  18.  Loading States                                                   ║
 * ║  19.  Page Structure Components                                        ║
 * ║  20.  Data Display Components                                          ║
 * ║  21.  Workflow Components                                              ║
 * ║  22.  Media Components                                                 ║
 * ║  23.  Micro-interactions & Animations                                  ║
 * ║  24.  Utilities                                                        ║
 * ║  25.  Accessibility                                                    ║
 * ╚═══════════════════════════════════════════════════════════════════════╝
 */

/* ── 1. Design Tokens — Light Mode ──────────────────────────────────────── */
:root {
    /* — Backgrounds — */
    --bg-base:       #f7f8fa;
    --bg-surface:    #ffffff;
    --bg-elevated:   #ffffff;
    --bg-subtle:     #f1f3f6;
    --bg-muted:      #e8eaef;

    /* — Text — */
    --text-primary:   #0f1117;
    --text-secondary: #4b5563;
    --text-tertiary:  #6b7280;
    --text-inverse:   #ffffff;

    /* — Accent — */
    --accent:        #5b50f0;
    --accent-hover:  #4740d4;
    --accent-active: #3a30b8;
    --accent-subtle: #ede9fe;
    --accent-border: #c4b5fd;

    /* — Borders — */
    --border-default: #e2e5ea;
    --border-strong:  #c5c9d3;
    --border-focus:   #5b50f0;

    /* — Status: Success — */
    --success-bg:     #dcfce7;
    --success-text:   #166534;
    --success-dot:    #22c55e;
    --success-border: #86efac;

    /* — Status: Error — */
    --error-bg:     #fee2e2;
    --error-text:   #991b1b;
    --error-dot:    #ef4444;
    --error-border: #fca5a5;

    /* — Status: Warning — */
    --warning-bg:     #fef3c7;
    --warning-text:   #d97706;
    --warning-dot:    #f59e0b;
    --warning-border: #fde68a;

    /* — Status: Running / Info — */
    --running-bg:     #dbeafe;
    --running-text:   #1e40af;
    --running-dot:    #3b82f6;
    --running-border: #93c5fd;

    /* — Status: Slow / Degraded — */
    --slow-bg:     rgba(249, 115, 22, 0.12);
    --slow-text:   #c2410c;
    --slow-border: rgba(249, 115, 22, 0.4);

    /* — Backward-compat aliases — */
    --bg-color:        var(--bg-base);
    --card-bg:         var(--bg-surface);
    --surface-subtle:  var(--bg-subtle);
    --surface-muted:   var(--bg-muted);
    --input-bg:        var(--bg-surface);
    --input-disabled:  var(--bg-subtle);
    --pill-bg:         var(--bg-subtle);
    --glass-bg:        rgba(247, 248, 250, 0.88);
    --text-main:       var(--text-primary);
    --text-sub:        var(--text-tertiary);
    --text-soft:       var(--text-secondary);
    --brand-primary:   var(--accent);
    --brand-light:     var(--accent-subtle);
    --brand-dark:      var(--accent-hover);
    --brand-accent:    var(--accent);
    --border-soft:     var(--border-strong);
    --border-color:    var(--border-default);
    --radius-lg:       0.875rem;
}

/* ── 2. Design Tokens — Dark Mode ───────────────────────────────────────── */
[data-theme="dark"] {
    --bg-base:       #111318;
    --bg-surface:    #1a1d24;
    --bg-elevated:   #22262f;
    --bg-subtle:     #1e222b;
    --bg-muted:      #2a2f3a;

    --text-primary:   #f1f3f6;
    --text-secondary: #9ca3af;
    --text-tertiary:  #6b7280;

    --accent:        #7c71ff;
    --accent-hover:  #9189ff;
    --accent-active: #a8a1ff;
    --accent-subtle: #1e1b3a;
    --accent-border: #4b45a0;

    --border-default: #2a2f3a;
    --border-strong:  #3a3f4d;
    --border-focus:   #7c71ff;

    --success-bg:     #14532d;
    --success-text:   #86efac;
    --success-dot:    #4ade80;
    --success-border: #166534;

    --error-bg:     #7f1d1d;
    --error-text:   #fca5a5;
    --error-dot:    #f87171;
    --error-border: #991b1b;

    --warning-bg:     rgba(245, 158, 11, 0.18);
    --warning-text:   #fbbf24;
    --warning-dot:    #f59e0b;
    --warning-border: rgba(245, 158, 11, 0.4);

    --running-bg:     #1e3a5f;
    --running-text:   #93c5fd;
    --running-dot:    #60a5fa;
    --running-border: #1e40af;

    --slow-bg:     rgba(249, 115, 22, 0.22);
    --slow-text:   #fdba74;
    --slow-border: rgba(249, 115, 22, 0.5);

    /* — Backward-compat — */
    --bg-color:       var(--bg-base);
    --card-bg:        var(--bg-surface);
    --surface-subtle: var(--bg-subtle);
    --surface-muted:  var(--bg-muted);
    --input-bg:       var(--bg-muted);
    --input-disabled: var(--bg-subtle);
    --pill-bg:        var(--bg-muted);
    --glass-bg:       rgba(17, 19, 24, 0.88);
    --text-main:      var(--text-primary);
    --text-sub:       var(--text-tertiary);
    --text-soft:      var(--text-secondary);
    --brand-primary:  var(--accent);
    --brand-light:    var(--accent-subtle);
    --brand-dark:     var(--accent-hover);
    --brand-accent:   var(--accent);
    --border-soft:    var(--border-strong);
    --border-color:   var(--border-default);
}

/* ── 3. Motion, Shadow & Radius Tokens ──────────────────────────────────── */
:root {
    /* — Easing — */
    --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);

    /* — Duration — */
    --duration-fast:   120ms;
    --duration-base:   200ms;
    --duration-slow:   320ms;

    /* — Backward-compat motion aliases — */
    --ui-ease-standard: var(--ease-in-out);
    --ui-speed-fast:    var(--duration-fast);
    --ui-speed-medium:  var(--duration-base);
    --ui-speed-slow:    var(--duration-slow);
    --ui-lift-y:        -2px;
    --ui-press-scale:   0.97;

    /* — Shadows (light) — */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.07);

    /* — Backward-compat — */
    --ui-shadow-sm: var(--shadow-sm);
    --ui-shadow-md: var(--shadow-md);
    --ui-focus:     0 0 0 3px rgba(91, 80, 240, 0.22);

    /* — Border Radius — */
    --radius-xs:   0.25rem;
    --radius-sm:   0.375rem;
    --radius-md:   0.625rem;
    --radius-lg:   0.875rem;
    --radius-xl:   1.125rem;
    --radius-full: 9999px;
}

[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.30);
    --ui-shadow-sm: var(--shadow-sm);
    --ui-shadow-md: var(--shadow-md);
    --ui-focus:     0 0 0 3px rgba(124, 113, 255, 0.28);
}

/* ── 4. Spacing Scale ───────────────────────────────────────────────────── */
:root {
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
}

/* ── 5. Base / Reset ────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    padding-bottom: var(--space-12);
    font-size: 0.9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 6. Typography ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    line-height: 1.3;
}
h1 { font-size: 1.875rem; letter-spacing: -0.035em; }
h2 { font-size: 1.5rem;   letter-spacing: -0.03em;  }
h3 { font-size: 1.25rem;  letter-spacing: -0.025em; }
h4 { font-size: 1.125rem; letter-spacing: -0.02em; font-weight: 600; }
h5 { font-size: 1rem;     letter-spacing: -0.015em; font-weight: 600; }
h6 { font-size: 0.9375rem; letter-spacing: -0.01em; font-weight: 600; }
p  { color: var(--text-secondary); }
small, .small { font-size: 0.875rem; }

.text-sub       { color: var(--text-tertiary)  !important; }
.text-primary   { color: var(--accent)         !important; }
.text-muted     { color: var(--text-tertiary)  !important; }
.text-dark      { color: var(--text-primary)   !important; }
.text-secondary { color: var(--text-secondary) !important; }
.bg-white       { background-color: var(--bg-surface) !important; }
.bg-light       { background-color: var(--bg-subtle)  !important; }
.bg-body        { background-color: var(--bg-base)    !important; }

code, pre, .font-monospace {
    font-family: 'Consolas', 'Monaco', ui-monospace, SFMono-Regular, monospace;
    font-size: 0.875em;
}

/* ── 7. Layout Utilities ────────────────────────────────────────────────── */
.page-wrapper { max-width: 1100px; margin-inline: auto; padding-inline: var(--space-4); }

/* ── 8. Cards & Containers ──────────────────────────────────────────────── */

/* Base card — no hover by default */
.card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    transition: box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-fast) ease,
                background-color var(--duration-fast) ease;
}

/* Interactive card — explicit opt-in for lift-on-hover */
.card-interactive {
    cursor: pointer;
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                border-color var(--duration-fast) ease;
}
.card-interactive:hover {
    transform: translateY(var(--ui-lift-y));
    box-shadow: var(--shadow-md);
    border-color: var(--accent-border);
}

/* Featured card — accent treatment for hero items */
.card-featured {
    border: 2px solid var(--accent);
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--bg-surface) 60%);
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    padding: var(--space-4) var(--space-6);
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
}
.card-body   { background-color: var(--bg-surface); }
.card-footer {
    background-color: var(--bg-subtle);
    border-top: 1px solid var(--border-default);
    border-bottom-left-radius: var(--radius-lg) !important;
    border-bottom-right-radius: var(--radius-lg) !important;
    padding: var(--space-4) var(--space-6);
}

/* Hub card (stremio app service cards) */
.card-hub {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    margin-bottom: var(--space-6);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                border-color var(--duration-fast) ease;
}
.card-hub:hover,
.card-hub:focus-within {
    transform: translateY(var(--ui-lift-y));
    box-shadow: var(--shadow-md);
    border-color: var(--accent-border);
}

/* EPG / gradient card (IPTV) */
.epg-card {
    background: linear-gradient(135deg, var(--accent-subtle) 0%, var(--bg-surface) 70%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--accent-border);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

/* Source row (IPTV config) */
.source-row {
    background: var(--bg-subtle);
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    transition: border-color var(--duration-fast) ease;
}
.source-row:focus-within { border-color: var(--accent); }

/* Empty state */
.empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--text-tertiary);
    background: rgba(127, 127, 127, 0.03);
}
.empty-state .bi {
    font-size: 2.5rem;
    opacity: 0.4;
    margin-bottom: var(--space-3);
    display: block;
}
.empty-state h5,
.empty-state h6 { color: var(--text-secondary); font-weight: 600; }
.empty-state p  { color: var(--text-tertiary); font-size: 0.875rem; margin: var(--space-1) 0 0; }

/* ── 9. Status Indicators & Badges ──────────────────────────────────────── */

/* Pulsing live dot (in status badges) */
.dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    margin-right: 6px;
    background-color: var(--text-tertiary);
    display: inline-block;
    flex-shrink: 0;
}
.running .dot { background-color: var(--running-dot); animation: pulse 1.8s infinite; }
.success .dot { background-color: var(--success-dot); }
.error   .dot { background-color: var(--error-dot); }
.warning .dot { background-color: var(--warning-dot); }

/* Status dot (small, for tables) */
.status-dot     { height: 0.45rem; width: 0.45rem; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; }
.dot-running    { background-color: var(--running-dot); box-shadow: 0 0 4px var(--running-dot); animation: pulse 1.8s infinite; }
.dot-exited     { background-color: var(--error-dot); }
.dot-unknown    { background-color: var(--text-tertiary); }

@keyframes pulse {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.6); }
    65%  { transform: scale(1);    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    letter-spacing: 0.01em;
}
.status-badge.running { background: var(--running-bg); color: var(--running-text); border-color: var(--running-border); }
.status-badge.success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.status-badge.warning { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.status-badge.error   { background: var(--error-bg);   color: var(--error-text);   border-color: var(--error-border);   }

/* Pill badges (IPTV host pills) */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--bg-subtle);
    color: var(--text-primary);
    font-family: 'Consolas', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
    user-select: none;
}
.pill:hover        { background: var(--bg-muted); border-color: var(--border-strong); }
.pill.active       { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
.pill.status-true  { border-color: var(--success-dot); background: var(--success-bg); color: var(--success-text); }
.pill.status-false { border-color: var(--error-dot);   background: var(--error-bg);   color: var(--error-text); }
.pill.status-slow  { border-color: var(--slow-text);   background: var(--slow-bg);    color: var(--slow-text); }

/* Tier badges (speed test) */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: var(--radius-full);
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
}
.tier-fast { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.tier-ok   { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.tier-slow { background: var(--slow-bg);    color: var(--slow-text);    border-color: var(--slow-border); }
.tier-dead { background: var(--error-bg);   color: var(--error-text);   border-color: var(--error-border); }

/* ── 10. Forms & Inputs ─────────────────────────────────────────────────── */
.form-label {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

.form-control,
.form-select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.5625rem 0.75rem;
    font-size: 0.9375rem;
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease,
                background-color var(--duration-fast) ease;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-focus);
    box-shadow: var(--ui-focus) !important;
    outline: none;
}
.form-control:disabled,
.form-control[readonly]    { background-color: var(--input-disabled); opacity: 0.75; cursor: not-allowed; }
.form-control::placeholder { color: var(--text-tertiary); opacity: 0.65; }
.form-text { color: var(--text-tertiary); font-size: 0.8125rem; margin-top: var(--space-1); }

.input-group-text {
    background-color: var(--bg-subtle);
    border-color: var(--border-default);
    color: var(--text-tertiary);
    font-size: 0.9375rem;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--border-default);
    color: var(--text-primary);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--border-focus);
    box-shadow: var(--ui-focus);
    color: var(--text-primary);
}
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-muted);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

/* ── 11. Buttons ────────────────────────────────────────────────────────── */
.btn {
    font-weight: 600;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    transition: background-color var(--duration-fast) ease,
                border-color var(--duration-fast) ease,
                color var(--duration-fast) ease,
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-spring);
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-inverse);
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover   { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-inverse); box-shadow: var(--shadow-sm); }
.btn-primary:active  { background-color: var(--accent-active); border-color: var(--accent-active); }
.btn-primary:focus-visible { box-shadow: var(--ui-focus), var(--shadow-xs); }

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-default);
    background: var(--bg-surface);
}
.btn-outline-secondary:hover  { color: var(--text-primary); background: var(--bg-subtle); border-color: var(--border-strong); }
.btn-outline-secondary:active { background: var(--bg-muted); }

.btn-light {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn-light:hover { background: var(--border-default); }

.btn-danger        { box-shadow: var(--shadow-xs); }
.btn-outline-danger { border-color: var(--error-dot); color: var(--error-text); background: transparent; }
.btn-outline-danger:hover { background: var(--error-bg); border-color: var(--error-dot); color: var(--error-text); }

.copy-success { background-color: var(--success-text) !important; border-color: var(--success-text) !important; color: var(--text-inverse) !important; }

/* Full-width CTA */
.launch-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    background-color: var(--accent);
    color: var(--text-inverse);
    text-decoration: none;
    padding: 0.625rem var(--space-4);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9375rem;
    border: none;
    letter-spacing: -0.01em;
    transition: background-color var(--duration-fast) ease,
                transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.launch-btn:hover  { background-color: var(--accent-hover); color: var(--text-inverse); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.launch-btn:active { background-color: var(--accent-active); transform: scale(0.98); }

/* Pill return button */
.return-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    background-color: var(--bg-surface);
    color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease,
                color var(--duration-fast) ease,
                border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}
.return-pill-btn:hover {
    background-color: var(--bg-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.return-pill-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus), var(--shadow-xs);
}

/* Icon-only button */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.btn-icon:hover        { background: var(--bg-subtle); color: var(--text-primary); }
.btn-icon.danger:hover { background: var(--error-bg); color: var(--error-text); border-color: var(--error-border); }

/* Log button (hub cards) */
.log-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    width: 3rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    transition: background-color var(--duration-fast) ease;
}
.log-btn:hover { background-color: var(--border-default); color: var(--text-primary); }

/* ── 12. Navigation & Dropdowns ─────────────────────────────────────────── */

/* Sticky glass header — actually sticky */
.sticky-glass-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: var(--space-4) calc(50vw - 50%);
    margin-bottom: var(--space-6);
    background-color: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-default);
    transition: background-color var(--duration-base) ease,
                box-shadow var(--duration-base) ease;
}
.sticky-glass-header.scrolled {
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--border-strong);
}

/* Suite nav dropdown */
.suite-nav .dropdown-menu {
    min-width: 260px;
    max-width: calc(100vw - 2rem);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background-color: var(--bg-elevated);
    box-shadow: var(--shadow-lg);
    margin-top: 6px !important;
}
.suite-nav .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.suite-nav .dropdown-item:hover,
.suite-nav .dropdown-item:focus  { background-color: var(--bg-subtle); color: var(--text-primary); }
.suite-nav .dropdown-item:active { background-color: var(--accent-subtle); color: var(--accent); }
.suite-nav .dropdown-item.active { background-color: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.suite-nav .dropdown-item:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.suite-nav .dropdown-divider { border-color: var(--border-default); margin: var(--space-1) 0; }

[data-theme="dark"] .suite-nav .dropdown-menu { background-color: var(--bg-elevated); border-color: var(--border-strong); }
[data-theme="dark"] .suite-nav .dropdown-item { color: var(--text-primary); }
[data-theme="dark"] .suite-nav .dropdown-item:hover,
[data-theme="dark"] .suite-nav .dropdown-item:focus { background-color: var(--bg-muted); }

@media (min-width: 992px) { .suite-nav:hover .dropdown-menu { display: block; margin-top: 0; } }

/* Fixed chrome */
.theme-toggle  { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 1080; }
.ui-scroll-top {
    position: fixed; right: var(--space-4); bottom: 4.5rem; z-index: 1060;
    opacity: 0; pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.ui-scroll-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ── 13. Tables & Data Rows ─────────────────────────────────────────────── */
.table {
    color: var(--text-primary);
    border-color: var(--border-default);
}
.table td, .table th {
    border-color: var(--border-default);
    background-color: transparent !important;
    color: var(--text-primary);
    vertical-align: middle;
    padding: 0.75rem 1rem;
}
.table thead th {
    background-color: var(--bg-subtle) !important;
    color: var(--text-tertiary) !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-strong) !important;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    white-space: nowrap;
}
/* Compat alias */
.table thead.bg-light th { background-color: var(--bg-subtle) !important; color: var(--text-tertiary) !important; }

.table-hover tbody tr:hover td { background-color: rgba(91, 80, 240, 0.03) !important; }

/* Sticky table header */
.table-sticky thead th { position: sticky; top: 64px; z-index: 10; }

/* Responsive table wrapper */
.table-wrapper {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: clip;
}
.table-wrapper .table { margin-bottom: 0; }
.table-wrapper .table td:first-child,
.table-wrapper .table th:first-child { padding-left: var(--space-5); }
.table-wrapper .table td:last-child,
.table-wrapper .table th:last-child  { padding-right: var(--space-5); }

/* Row actions (revealed on row hover) */
.row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
}
tr:hover .row-actions { opacity: 1; }

/* ── 14. Speed Test Components (IPTV) ───────────────────────────────────── */
.speed-row {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    will-change: transform;
}
.speed-row.has-tier-fast { border-left-color: var(--success-text); }
.speed-row.has-tier-ok   { border-left-color: var(--warning-text); }
.speed-row.has-tier-slow { border-left-color: var(--slow-text); }
.speed-row.has-tier-dead { border-left-color: var(--error-text); }

.speed-row-enter { animation: speedRowIn var(--duration-base) var(--ease-out); }
@keyframes speedRowIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.speed-bar-track {
    height: 3px;
    background: var(--border-default);
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    width: 80px;
}
.speed-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 400ms var(--ease-out);
}

.speedtest-history-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.speedtest-chip {
    display: inline-flex;
    flex-direction: column;
    padding: var(--space-1) 0.625rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-subtle);
    color: var(--text-tertiary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    line-height: 1.3;
    user-select: none;
}
.speedtest-chip:hover            { border-color: var(--accent); color: var(--text-primary); }
.speedtest-chip.active           { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); font-weight: 600; }
.speedtest-chip .chip-time       { font-weight: 600; color: var(--text-primary); }
.speedtest-chip.active .chip-time { color: var(--accent); }
.speedtest-chip .chip-summary    { color: var(--text-tertiary); font-size: 0.68rem; }

/* ── 15. Terminal / Log Display ─────────────────────────────────────────── */
.modal-content.terminal-style {
    border: none;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}
.modal-header.terminal-header {
    background: #161b22;
    color: #e6edf3;
    border-bottom: 1px solid #30363d;
}
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

#logContent {
    background: #0d1117;
    color: #3fb950;
    padding: var(--space-4);
    font-family: 'Consolas', 'Monaco', ui-monospace, monospace;
    height: 450px;
    overflow-y: auto;
    font-size: 0.85rem;
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.55;
}

.mono-panel {
    background: #0d1117;
    color: #e6edf3;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-family: 'Consolas', 'Monaco', ui-monospace, monospace;
    white-space: pre-wrap;
    min-height: 80px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.85rem;
    border: 1px solid #30363d;
    line-height: 1.55;
}

/* ── 16. Modals & Overlays ───────────────────────────────────────────────── */
.modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-default);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-6);
}
.modal-body   { padding: var(--space-5) var(--space-6); }
.modal-footer {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-default);
    border-bottom-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-6);
}
.modal-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }

.modal.fade .modal-dialog {
    transition: transform var(--duration-slow) var(--ease-out),
                opacity var(--duration-slow) var(--ease-out);
    transform: translateY(12px) scale(0.985);
    opacity: 0;
}
.modal.show .modal-dialog { transform: translateY(0) scale(1); opacity: 1; }
.modal-backdrop.show { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

[data-theme="dark"] .modal-content { border-color: var(--border-strong); }

/* ── 17. Accordions ─────────────────────────────────────────────────────── */
.accordion-item { border: none; background: transparent; }
.accordion-button {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-xs) !important;
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    transition: background-color var(--duration-fast) ease,
                border-color var(--duration-fast) ease,
                color var(--duration-fast) ease;
}
.accordion-button:not(.collapsed) {
    background: var(--bg-surface);
    color: var(--accent);
    border-color: var(--accent-border);
    box-shadow: var(--shadow-xs) !important;
}
.accordion-button::after       { filter: brightness(0.5); }
[data-theme="dark"] .accordion-button          { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); }
[data-theme="dark"] .accordion-button::after   { filter: invert(1); }
[data-theme="dark"] .accordion-button:not(.collapsed) { color: var(--accent); border-color: var(--accent-border); }

.accordion-body { padding: var(--space-4) 0; }
.accordion-collapse { transition: height var(--duration-slow) var(--ease-out) !important; }

/* ── 18. Loading States ─────────────────────────────────────────────────── */
.skeleton,
.skeleton-block {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.05) 25%,
        rgba(0, 0, 0, 0.10) 37%,
        rgba(0, 0, 0, 0.05) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--radius-xs);
    min-height: 18px;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
[data-theme="dark"] .skeleton,
[data-theme="dark"] .skeleton-block {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.09) 37%,
        rgba(255, 255, 255, 0.04) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

/* ── 19. Page Structure Components ──────────────────────────────────────── */

/* Info bar — slim information strip replacing heavy EPG card */
.info-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-5);
}
.info-bar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.info-bar-content { flex: 1; min-width: 0; }
.info-bar-title   { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.info-bar-sub     { font-size: 0.8rem; color: var(--text-tertiary); margin: 0; }
.info-bar-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* Section header — title + horizontal rule + optional action */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.section-header-text { flex-shrink: 0; }
.section-header-text h2,
.section-header-text h3,
.section-header-text h4 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.section-header-text p  { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--text-tertiary); }
.section-header-rule    { flex: 1; height: 1px; background: var(--border-default); border: none; }
.section-header-action  { flex-shrink: 0; }

/* Control bar — slim form row for AI dashboard etc. */
.control-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.control-bar .form-control,
.control-bar .form-select {
    flex: 1;
    min-width: 140px;
    background: var(--bg-subtle);
    border-color: transparent;
}
.control-bar .form-control:focus,
.control-bar .form-select:focus { border-color: var(--border-focus); background: var(--bg-surface); }

/* ── 20. Data Display Components ────────────────────────────────────────── */

/* KPI strip — row of key performance indicators */
.kpi-strip {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-surface);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-6);
}
.kpi-item {
    flex: 1;
    padding: var(--space-4) var(--space-5);
    text-align: center;
    border-right: 1px solid var(--border-default);
    transition: background-color var(--duration-fast) ease;
}
.kpi-item:last-child { border-right: none; }
.kpi-item:hover      { background: var(--bg-subtle); }
.kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.kpi-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--space-1);
    font-weight: 600;
}
.kpi-value.positive { color: #16a34a; }
.kpi-value.negative { color: var(--error-text); }

/* Hub card icon + info */
.hub-header     { display: flex; align-items: center; margin-bottom: var(--space-4); }
.hub-icon {
    width: 3rem;
    height: 3rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--accent);
    margin-right: var(--space-3);
    flex-shrink: 0;
    border: 1px solid var(--border-default);
}
.hub-info       { min-width: 0; }
.hub-title      { font-size: 0.9375rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); letter-spacing: -0.015em; }
.hub-subtitle   { font-size: 0.8rem; color: var(--text-tertiary); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.125rem; }
.btn-group-actions { display: flex; gap: var(--space-2); margin-top: auto; }

/* Avatar initials */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-weight: 700;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    color: var(--text-inverse);
    background: var(--accent);
    user-select: none;
}
.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-md { width: 40px; height: 40px; font-size: 0.9rem;  }
.avatar-lg { width: 52px; height: 52px; font-size: 1.1rem;  }

/* Mini stat boxes (billing, finance detail) */
.mini-stat {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent);
    background: var(--bg-surface);
}
.mini-stat.stat-success { border-left-color: var(--success-dot); }
.mini-stat.stat-danger  { border-left-color: var(--error-dot); }
.mini-stat.stat-warning { border-left-color: var(--warning-dot); }
.mini-stat-value { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.mini-stat-label { font-size: 0.75rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-top: 0.125rem; }

/* ── 21. Workflow Components ─────────────────────────────────────────────── */

/* Steps / progress indicator */
.steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.step-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    position: relative;
}
.step-item:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-default);
    margin: 0 var(--space-3);
}
.step-item.done::after   { background: var(--success-dot); }
.step-number {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background: var(--bg-muted);
    border: 1.5px solid var(--border-default);
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--duration-base) ease,
                border-color var(--duration-base) ease,
                color var(--duration-base) ease;
}
.step-item.active .step-number { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.step-item.done   .step-number { background: var(--success-bg); border-color: var(--success-dot); color: var(--success-text); }
.step-label       { font-size: 0.8125rem; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
.step-item.active .step-label { color: var(--text-primary); }
.step-item.done   .step-label { color: var(--success-text); }

@media (max-width: 575.98px) {
    .steps      { padding: var(--space-3) var(--space-4); }
    .step-label { display: none; }
    .step-item:not(:last-child)::after { margin: 0 var(--space-2); }
}

/* Inline confirmation */
.inline-confirm {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    animation: fadeIn var(--duration-base) var(--ease-out);
}
.inline-confirm span        { font-size: 0.8125rem; color: var(--error-text); font-weight: 600; }
.inline-confirm .btn-confirm { font-size: 0.8125rem; padding: 0.2rem 0.6rem; }
.inline-confirm .btn-cancel  { font-size: 0.8125rem; padding: 0.2rem 0.5rem; background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; }
.inline-confirm .btn-cancel:hover { color: var(--text-primary); }

/* Admin mode banner */
.admin-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--warning-text);
}

/* ── 22. Media Components ────────────────────────────────────────────────── */

/* Media card (recommendation carousels) */
.media-card {
    flex: 0 0 160px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: var(--bg-muted);
    scroll-snap-align: start;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.media-card:hover { transform: scale(1.04); box-shadow: var(--shadow-md); z-index: 1; }
.media-card img   { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; min-height: 120px; }
.media-card-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--space-3) var(--space-2) var(--space-2);
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--duration-base) ease;
}
.media-card:hover .media-card-overlay { opacity: 1; }
.media-card-title { font-size: 0.75rem; font-weight: 600; color: #fff; line-height: 1.3; margin: 0; }
.media-card-type  { font-size: 0.65rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.05em; }

/* Media carousel scroll container */
.media-carousel {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: var(--space-3);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.media-carousel::-webkit-scrollbar { display: none; }

/* Color swatch bar at top of theme cards */
.color-swatch-top {
    height: 4px;
    width: calc(100% + var(--space-10));
    display: block;
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── 23. Micro-interactions & Animations ────────────────────────────────── */

.mi-press { animation: miPress 200ms var(--ease-spring); }
@keyframes miPress {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

.mi-field-changed {
    box-shadow: 0 0 0 3px rgba(91, 80, 240, 0.14) !important;
    transition: box-shadow var(--duration-base) ease;
}

.ui-interactive,
.btn, button,
.accordion-button,
.dropdown-item,
.nav-link,
[role="button"] {
    transition:
        transform var(--duration-base) var(--ease-spring),
        box-shadow var(--duration-base) var(--ease-out),
        background-color var(--duration-fast) ease,
        color var(--duration-fast) ease,
        border-color var(--duration-fast) ease;
    will-change: transform;
}

.btn:hover,    button:hover,    .ui-lift:hover  { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active,   button:active,   .ui-press:active { transform: scale(var(--ui-press-scale)); }

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.ui-focus-ring:focus { box-shadow: var(--ui-focus) !important; }

.ui-inline-feedback {
    font-size: 0.8rem;
    margin-top: var(--space-1);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.ui-inline-feedback.show { opacity: 1; transform: translateY(0); }

.fade-in { animation: fadeIn 0.35s var(--ease-out) both; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Live counter number flip */
.num-flip { display: inline-block; animation: numFlip 0.3s var(--ease-spring); }
@keyframes numFlip {
    0%   { transform: translateY(-6px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* View transition (dashboard ↔ editor) */
.view-slide-enter { animation: viewSlideIn var(--duration-slow) var(--ease-out) both; }
@keyframes viewSlideIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── 24. Utilities ──────────────────────────────────────────────────────── */
.hidden      { display: none !important; }
.truncate    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm      { gap: var(--space-2); }
.gap-md      { gap: var(--space-3); }
.gap-lg      { gap: var(--space-4); }

/* ── 25. Accessibility ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

@media (forced-colors: active) {
    .status-badge, .pill, .tier-badge, .btn { border: 1px solid ButtonText; }
    .card, .card-hub { border: 1px solid ButtonText; }
}