/* AUXIO - Void Black + White Glow */
:root {
    --bg-dark: #020203;

    --color-primary: #ffffff;
    --color-primary-glow: rgba(255, 255, 255, 0.55);
    --color-primary-light: #ffffff;
    --color-primary-dark: #555555;
    --color-primary-88: rgba(255, 255, 255, 0.11);
    --color-primary-55: rgba(255, 255, 255, 0.07);
    --color-primary-16: rgba(255, 255, 255, 0.04);

    --color-text: #ffffff;
    --color-text-dim: rgba(255, 255, 255, 0.45);
    --color-text-dark: rgba(255, 255, 255, 0.22);

    --font-futuristic: 'Syncopate', 'Orbitron', sans-serif;
    --font-clean: 'Inter', sans-serif;
    --border-radius: 12px;
    --border-glow: 1px solid rgba(255, 255, 255, 0.09);
    --box-shadow-glow: 0 32px 80px rgba(0,0,0,0.98), 0 0 40px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.04);
    
    /* All driven by applySmoothness() in script.js (Menu Smoothness setting) */
    --sel-transition-speed: 0.19s;
    --sel-transition-curve: cubic-bezier(0.16, 1, 0.30, 1);
    --item-transition-speed: 0.20s;
    --list-anim-speed: 0.30s;
    --list-anim-curve: cubic-bezier(0.16, 1, 0.30, 1);
    --list-anim-dist: 16px;

    --selector-transition-speed: var(--sel-transition-speed);
    --tab-transition-speed: 0.36s;
    --tab-transition-curve: cubic-bezier(0.16, 1, 0.30, 1);
    --page-transition-speed: 0.30s;
    --page-transition-curve: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    cursor: default !important;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-clean);
    background: transparent !important;
    background-color: transparent !important;
    color: var(--color-text);
}

#ui-wrapper {
    position: absolute;
    width: 1920px;
    height: 1080px;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 140px;
    transform-origin: top left;
}

/* Main Menu Window */
.menu-window {
    position: relative;
    width: 380px;
    height: 512px;
    background: linear-gradient(160deg, #0d0d12 0%, #080809 60%, #030304 100%);
    border-radius: var(--border-radius);
    border: none;
    box-shadow: 0 24px 64px rgba(0,0,0,0.95);
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 10;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: box-shadow 0.3s ease;
}

/* High-Res Banner Header (126px tall) */
.menu-header {
    height: 126px;
    min-height: 126px;
    flex-shrink: 0;
    background: #040306;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    border-top-left-radius: calc(var(--border-radius) - 1px);
    border-top-right-radius: calc(var(--border-radius) - 1px);
    overflow: hidden;
    transition: background-image 0.25s ease;
}

.menu-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, transparent 0%, rgba(4, 3, 6, 0.85) 100%);
    pointer-events: none;
}

.menu-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
    box-shadow: 0 0 12px var(--color-primary-glow);
}

/* Dynamic Top Tabs */
.dynamic-top-tabs {
    position: relative;
    display: flex;
    height: 38px;
    min-height: 38px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.55);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 5;
    overflow: hidden;
    padding: 4px 4px 0;
    gap: 3px;
}

.tab-btn {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: rgba(255,255,255,0.45);
    background: transparent;
    border-radius: 5px 5px 0 0;
    transition: color var(--item-transition-speed) ease,
                background var(--item-transition-speed) ease;
    z-index: 2;
    border: 1px solid transparent;
    border-bottom: none;
}

.tab-btn.active {
    color: #ffffff;
    background: linear-gradient(180deg,
        var(--color-primary-55) 0%,
        var(--color-primary-16) 60%,
        transparent 100%);
    border-color: var(--color-primary-55);
    border-bottom: none;
    box-shadow: 0 0 14px var(--color-primary-16), inset 0 1px 0 var(--color-primary-55);
}

/* Sliding indicator — hidden, tabs are filled now */
.tabs-slider-indicator {
    display: none;
}

/* Left Margin Custom Scrollbar */
.custom-scrollbar-container {
    position: absolute;
    left: -19px;
    top: 162px;
    width: 11px;
    height: 312px;
    z-index: 15;
    pointer-events: none;
}

.custom-scrollbar-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(2,2,4,0.95) 100%);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.95);
    transition: border 0.25s ease;
}

.custom-scrollbar-thumb {
    position: absolute;
    width: 3px;
    height: 48px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--color-primary) 30%,
        var(--color-primary) 70%,
        transparent 100%);
    border-radius: 2px;
    left: 3px;
    top: 0;
    transition: top var(--sel-transition-speed) var(--sel-transition-curve),
                height var(--sel-transition-speed) ease;
    box-shadow: none;
}

/* Menu Body: 0 Padding for Flush Fit */
.menu-body {
    position: relative;
    flex: 1 1 auto;
    height: 312px;
    max-height: 312px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 !important;
    margin: 0 !important;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
}

.menu-body::-webkit-scrollbar {
    display: none;
}

@keyframes pageSlideIn {
    from { opacity: 0; transform: translateX(var(--list-anim-dist)); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pageSlideBack {
    from { opacity: 0; transform: translateX(calc(-1 * var(--list-anim-dist))); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(calc(-0.4 * var(--list-anim-dist))); }
    to   { opacity: 1; transform: translateY(0); }
}

.items-list {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.items-list.anim-enter  { animation: pageSlideIn   var(--list-anim-speed) var(--list-anim-curve) both; }
.items-list.anim-back   { animation: pageSlideBack var(--list-anim-speed) var(--list-anim-curve) both; }
.items-list.anim-tab    { animation: pageFadeIn    var(--list-anim-speed) var(--list-anim-curve) both; }

/* Snappy: no motion at all, navigation lands instantly */
.sm-1 .items-list.anim-enter,
.sm-1 .items-list.anim-back,
.sm-1 .items-list.anim-tab { animation: none; }
.sm-1 #floating-selector-pill,
.sm-1 .custom-scrollbar-thumb,
.sm-1 .menu-item,
.sm-1 .toggle-switch,
.sm-1 .switch-slider,
.sm-1 .tab-btn,
.sm-1 .item-icon,
.sm-1 .cat-icon { transition: none !important; }

/* Page title bar (shown when subpage has no tabs) */
.page-title-bar {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    opacity: 0.7;
    border-bottom: 1px solid var(--color-primary-16);
    flex-shrink: 0;
}

/* Gliding Selector */
/* Gliding selector.
   The accent is layered as solid --color-primary at a FIXED opacity rather
   than via --color-primary-88/-16: those tokens carry wildly different alphas
   per theme (0.88 on Blue, 0.10 on Dark), so the bar used to be near-invisible
   on some themes and a solid slab on others. Fixed opacity = same punch
   everywhere. */
#floating-selector-pill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 39px;
    overflow: hidden;
    border-left: 3px solid var(--color-primary);
    /* Crisp 1px edges only -- no outer blur, that bled a diffuse halo
       above and below the row. */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.28);
    pointer-events: none;
    z-index: 1;
    transform: translateY(0px);
    transition: transform var(--sel-transition-speed) var(--sel-transition-curve);
    will-change: transform;
}

/* Accent wash + a bloom pooling at the leading edge */
#floating-selector-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(140px 34px at 0% 50%,
            var(--color-primary) 0%,
            transparent 72%),
        linear-gradient(90deg,
            var(--color-primary) 0%,
            var(--color-primary) 8%,
            transparent 82%);
    opacity: 0.30;
}

/* Glass sheen across the top-left, keeps it from reading flat */
#floating-selector-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        rgba(255,255,255,0.16) 0%,
        rgba(255,255,255,0.05) 26%,
        transparent 55%);
}

/* Menu Item Row */
.menu-item {
    display: flex;
    align-items: center;
    height: 39px;
    min-height: 39px;
    flex-shrink: 0;
    padding: 0 16px 0 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.58);
    position: relative;
    z-index: 2;
    background: transparent;
    transition: color var(--item-transition-speed) ease;
    opacity: 1;
}

.menu-item.keyboard-selected {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.35px;
}

.item-icon {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    margin-right: 10px;
    flex-shrink: 0;
}

.menu-item.keyboard-selected .item-icon {
    color: rgba(255,255,255,0.95);
}

.cat-icon {
    width: 14px;
    font-size: 12.5px;
    line-height: 1;
    text-align: center;
    color: rgba(255,255,255,0.6);
    transition: color var(--item-transition-speed) ease;
}

/* SVG variant (alien head) needs an explicit box, fonts size themselves */
.cat-icon-svg {
    height: 13px;
    display: block;
}

.menu-item.keyboard-selected .cat-icon {
    color: #ffffff;
    opacity: 1;
}

.item-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-action {
    display: flex;
    align-items: center;
    color: rgba(255,255,255,0.4);
    font-size: 11px;
    gap: 4px;
}

/* Section Divider */
.section-divider {
    display: flex;
    align-items: center;
    height: 32px;
    min-height: 32px;
    padding: 0 16px;
    gap: 8px;
    flex-shrink: 0;
}

/* Dividers stay white on every theme so they read against any accent */
.section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.45) 50%,
        transparent 100%);
}

.section-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0.92;
    text-shadow: 0 0 8px rgba(255,255,255,0.25);
    white-space: nowrap;
}

/* Toggle Switch */
.toggle-switch {
    width: 38px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    position: relative;
    transition: background-color var(--item-transition-speed) ease;
}

.toggle-switch.checked {
    background-color: var(--color-primary);
}

.switch-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background-color: rgba(255,255,255,0.9);
    border-radius: 2px;
    transition: transform var(--item-transition-speed) var(--sel-transition-curve);
}

.toggle-switch.checked .switch-slider {
    transform: translateX(22px);
    background-color: #000000;
}

/* Sliders */
.slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.slider-value {
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
    min-width: 28px;
    text-align: right;
}

.range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 75px;
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    outline: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 7px;
    border-radius: 2px;
    background-color: #ffffff;
    box-shadow: none;
}

/* Selectors */
.selector-container {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    overflow: hidden;
}

.selector-arrow {
    color: rgba(255,255,255,0.35);
    font-size: 9px;
    padding: 3px 7px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.selector-arrow:hover {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.07);
}

.selector-variant-text {
    font-size: 10.5px;
    font-weight: 600;
    color: #ffffff;
    min-width: 52px;
    text-align: center;
    letter-spacing: 0.15px;
    padding: 0 2px;
}

/* Color Preview Swatch in List */
.color-preview-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.color-preview-box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

/* HSV Canvas Color Picker — centered fixed overlay */
.color-picker-card {
    position: fixed;
    left: 530px;
    top: 75px;
    width: 280px;
    background: rgba(8, 6, 14, 0.97);
    border-radius: 12px;
    border: 1px solid var(--color-primary-55);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.95);
    display: flex;
    flex-direction: column;
    padding: 16px;
    z-index: 200;
    animation: toastSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    height: 22px;
}

.cp-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.cp-hex {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-16);
    border: 1px solid var(--color-primary-55);
    padding: 2px 7px;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 1px;
}

.cp-sv-wrap {
    position: relative;
    width: 248px;
    height: 160px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
}

.cp-sv-grad {
    position: absolute;
    inset: 0;
    background: hsl(0, 100%, 50%);
}

.cp-sv-grad::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.cp-sv-grad::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
}

.cp-sv-cursor {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
    z-index: 2;
}

.cp-hue-wrap {
    position: relative;
    width: 248px;
    height: 12px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
    flex-shrink: 0;
}

.cp-hue-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%),
        hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%),
        hsl(360,100%,50%));
}

.cp-hue-cursor {
    position: absolute;
    top: 0;
    width: 4px;
    height: 12px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.8);
    transform: translateX(-50%);
    pointer-events: none;
    display: none;
    z-index: 2;
}

.cp-bottom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.cp-swatch {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
    transition: background-color 0.05s ease;
}

.cp-hint-text {
    font-size: 9px;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
}

.cp-hint-text b {
    color: rgba(255,255,255,0.85);
}

/* Footer */
.menu-footer {
    height: 36px;
    min-height: 36px;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(5,5,8,0.98) 100%);
    border-bottom-left-radius: calc(var(--border-radius) - 1px);
    border-bottom-right-radius: calc(var(--border-radius) - 1px);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.22);
    position: relative;
}

.menu-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; width: 80%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary-55), transparent);
}

/* Always white, independent of theme accent */
.footer-version {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    opacity: 0.85;
    text-shadow: 0 0 8px rgba(255,255,255,0.22);
    font-weight: 600;
    letter-spacing: 1px;
}

.footer-sep {
    color: rgba(255,255,255,0.3);
    text-shadow: none;
    font-weight: 400;
}

.footer-user {
    color: #ffffff;
    text-shadow: none;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Footer hint: static reminder that F11 binds the highlighted item */
.footer-bind-hint {
    color: rgba(255,255,255,0.35);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Keybind Picker Overlay */
#keybind-overlay {
    position: fixed;
    bottom: 12vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#keybind-card {
    background: rgba(6, 4, 12, 0.97);
    border: 1px solid var(--color-primary-55);
    border-radius: 10px;
    padding: 18px 28px 14px;
    min-width: 260px;
    text-align: center;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.95),
        0 0 0 1px var(--color-primary-16),
        0 0 20px var(--color-primary-glow);
}

.kb-label {
    font-family: var(--font-clean);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}

.kb-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary-55), transparent);
    margin-bottom: 12px;
}

.kb-key {
    font-family: var(--font-clean);
    font-size: 22px;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-shadow: none;
    transition: color 0.15s ease, text-shadow 0.15s ease;
}

.kb-key.kb-key-set {
    color: var(--color-primary-light);
    text-shadow: 0 0 12px var(--color-primary-glow), 0 0 28px var(--color-primary-glow);
}

.kb-hint {
    font-family: var(--font-clean);
    font-size: 9.5px;
    color: rgba(255,255,255,0.2);
    letter-spacing: 0.5px;
}

/* Toast Notifications */
#notifications-container {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
    pointer-events: none;
}

@keyframes toastSlideIn {
    0%   { opacity: 0; transform: translateX(120px); }
    100% { opacity: 1; transform: translateX(0px); }
}
@keyframes toastSlideOut {
    0%   { opacity: 1; transform: translateX(0px); }
    100% { opacity: 0; transform: translateX(120px); }
}
@keyframes timerDrain {
    0%   { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}

.notification {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 240px;
    max-width: 320px;
    padding: 10px 14px 10px 24px;
    background: #0c0c12;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
    animation: toastSlideIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
}

.notification.slide-out {
    animation: toastSlideOut 0.38s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Timer bar: inset from edges, drains top→bottom like water emptying */
.notification-timer {
    position: absolute;
    left: 8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    transform-origin: bottom center;
    animation: timerDrain linear forwards;
}

.notification-info    .notification-timer { background: #3c8cff; }
.notification-success .notification-timer { background: #22c55e; }
.notification-warning .notification-timer { background: #f5a623; }
.notification-error   .notification-timer { background: #ef4444; }

.notification-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.notification-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}

.notification-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-info    .notification-dot { background: #3c8cff; }
.notification-success .notification-dot { background: #22c55e; }
.notification-warning .notification-dot { background: #f5a623; }
.notification-error   .notification-dot { background: #ef4444; }

.notification-type-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.notification-info    .notification-type-label { color: #3c8cff; }
.notification-success .notification-type-label { color: #22c55e; }
.notification-warning .notification-type-label { color: #f5a623; }
.notification-error   .notification-type-label { color: #ef4444; }

.notification-title {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.notification-desc {
    font-size: 10.5px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    line-height: 1.35;
}

/* Animations */
@keyframes pageFadeSlideUp {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0px); }
}

.animate-page-enter {
    animation: pageFadeSlideUp var(--page-transition-speed) var(--page-transition-curve) forwards !important;
}

/* ── Velox Watermark ─────────────────────────────────────────── */
#velox-watermark {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 18px;
    background: rgba(9, 10, 13, 0.88);
    border-radius: 9px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.55);
    white-space: nowrap;
    line-height: 1;
    font-family: var(--font-clean);
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
}

/* Phantom-style accent glow bleeding in from the right edge */
#velox-watermark::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 55%;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 320%);
    opacity: 0.30;
    pointer-events: none;
}

#velox-watermark > * { position: relative; z-index: 1; }

.wm-logo {
    font-family: var(--font-futuristic);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 4px;
    color: #ffffff;
    /* Always a white bloom, never the theme accent -- only the rest of the
       watermark (the right-edge wash) picks up the theme colour. */
    text-shadow: 0 0 10px rgba(255,255,255,0.55), 0 0 24px rgba(255,255,255,0.32);
    flex-shrink: 0;
}

.wm-brand {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.wm-dot {
    font-size: 14px;
    color: rgba(255,255,255,0.3);
}

.wm-seg {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wm-ico {
    width: 14px;
    height: 14px;
    color: rgba(255,255,255,0.75);
    flex-shrink: 0;
}

.wm-seg b {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.wm-seg i {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
}

.wm-seg b.wm-accent { color: #ffffff; }
.wm-seg b.wm-dim {
    font-weight: 500;
    color: rgba(255,255,255,0.55);
}

/* ── Menu Background Modes ───────────────────────────────────────
   Driven by the "Background" setting. "Black" is the opaque default
   defined on .menu-window; the rest re-declare it with alpha. The
   tabs/footer bars are dimmed alongside it so they don't stay as
   opaque slabs floating over a see-through window. */

/* Transparency applies to the item area ONLY. The window itself goes fully
   transparent and .menu-body carries the tint, so the banner, the tab bar and
   the footer stay solid instead of turning see-through with it. */
.bg-semi .menu-window,
.bg-transparent .menu-window {
    background: transparent;
}

.bg-semi .dynamic-top-tabs,
.bg-transparent .dynamic-top-tabs {
    background: #0a0a0e;
}

.bg-semi .menu-footer,
.bg-transparent .menu-footer {
    background: linear-gradient(90deg, #07070b 0%, #050508 100%);
}

.bg-semi .menu-body        { background: rgba(8, 8, 11, 0.86); }
.bg-transparent .menu-body { background: rgba(8, 8, 11, 0.46); }

/* Watermark positions (set via body class from Lua) */
.wm-pos-top-center    #velox-watermark { top: 8px;  bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.wm-pos-top-left      #velox-watermark { top: 8px;  bottom: auto; left: 16px; right: auto; transform: none; }
.wm-pos-top-right     #velox-watermark { top: 8px;  bottom: auto; left: auto; right: 16px; transform: none; }
.wm-pos-bottom-center #velox-watermark { top: auto; bottom: 8px; left: 50%; right: auto; transform: translateX(-50%); }
.wm-pos-bottom-left   #velox-watermark { top: auto; bottom: 8px; left: 16px; right: auto; transform: none; }
.wm-pos-bottom-right  #velox-watermark { top: auto; bottom: 8px; left: auto; right: 16px; transform: none; }

/* ── HUD Panels (ported from friend's interface) ─────────────────── */
.hud-panel {
    position: absolute;
    /* Fixed width -- the Lua drag hit-test assumes 200px (HUD_W) */
    width: 200px;
    background: linear-gradient(160deg, rgba(16,16,22,0.94) 0%, rgba(9,9,12,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.03);
    overflow: hidden;
    z-index: 30;
}
.hud-accent-bar {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
    box-shadow: 0 0 12px var(--color-primary-glow);
}
.hud-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    padding: 0 12px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hud-head-left { display: flex; align-items: center; gap: 7px; }
.hud-head-icon { width: 12px; height: 12px; color: var(--color-primary); }
.hud-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
}
.hud-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-16);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 1px 7px;
    border-radius: 4px;
}
.hud-body { padding: 6px 0; }
.hud-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    height: 24px;
    padding: 0 12px;
}
.hud-row-left { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.hud-row-label {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud-row.is-on .hud-row-label { color: #fff; font-weight: 600; }
.hud-row-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary);
    flex-shrink: 0;
}
.hud-key {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.45);
    flex-shrink: 0;
}
.hud-row.is-on .hud-key {
    color: #fff;
    border-color: var(--color-primary-55);
    background: linear-gradient(180deg, var(--color-primary-55) 0%, var(--color-primary-16) 100%);
    box-shadow: 0 0 8px var(--color-primary-16);
}
.hud-sid {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-primary);
    opacity: 0.85;
    margin-right: 4px;
}
.hud-empty {
    padding: 6px 12px 8px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.25);
    text-align: center;
}

/* Keybind bind key — no box, just colored text */
.hud-bind-key {
    font-size: 10.5px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}
.hud-row.is-on .hud-bind-key {
    color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary-glow);
}
.hud-row.is-off .hud-bind-key {
    color: rgba(255,255,255,0.2);
}
.hud-row.is-off .hud-row-label {
    color: rgba(255,255,255,0.25);
}