:root {
    --bg-main: #0e0e0f;
    --bg-panel: #151516;
    --bg-card: #1b1b1c;
    --border-subtle: rgba(255,255,255,0.06);
    --border-mid: rgba(255,255,255,0.1);
    --text-main: #e6e6e6;
    --text-muted: #a1a1a1;
    --good: #6ee7b7;
    --warn: #facc15;
    --bad: #ef4444;
    --green: #198754;
    --orange: #FFC107;
    --black: #000000;
    --ring-gap: 6deg;
    --seg1: #000000;
    --seg2: #000000;
    --seg3: #000000;
    --slider-progress: #a9ffad;
    --ui-scale: 1;
    --ui-font-scale: 1;
    --ui-spacing-scale: 1;
    --kb-key: clamp(34px, 3.2vw, 60px);
    --kb-gap: clamp(3px, 0.35vw, 5px);
    --kb-radius: 10px;
    --keyboard-top: 65px;
    --keyboard-height-custom: 125px;
    --eq-height: 180px;
    --eq-track: #2a2a2b;
    --eq-thumb: #1e90ff;
    --eq-positive: #2ecc71;
}

.keyboard-margin-top {
    margin-top: var(--keyboard-top);
}

body {
    font-size: calc(1rem * var(--ui-font-scale));
}

.pt-0 {
    padding-top: 0 !important;
}

.stat {
    font-size: clamp(1.6rem, 2vw, 2.4rem);
}

body {
    background: linear-gradient(180deg, #0b0b0c, #141416);
    color: var(--text-main);
    font-family: system-ui, -apple-system, Segoe UI, Roboto;
}

.color-picker {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.top-10 {
    margin-top: 10px;
}

.st100 {
    height: 150px;
    cursor: pointer;
}

.mm800 {
    height: 80px;
    cursor: pointer;
}

.mm800-right {
    height: 80px;
    cursor: pointer;
}

.st100-logo {
    height: 50px;
    cursor: pointer;
    color: var(--text-muted);
}

.no-stretch {
    height: auto;
}

.text-left {
    text-align: left!important;
}

.text-center {
    text-align: center!important;
}

.text-right {
    text-align:right!important;
}

.sentence-text {
    text-transform: none !important;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-20-all:not(:first-child) {
    margin-top: 20px;
}

.hidden {
    display: none;
}

.device-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin-bottom: 0;
    background-color: #181818;
    border: 1px solid #535353;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.device-container-pump {
    position: relative;
    width: 300px;
    height: 300px;
    margin-bottom: 0;
    background-color: #181818;
    border: 1px solid #535353;
    border-radius: 25%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.device-container-block {
    position: relative;
    width: 300px;
    height: 300px;
    margin-bottom: 0;
    background-color: #181818;
    border: 1px solid #535353;
    border-radius: 25%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.device-container-strip {
    position: relative;
    height: 30px;
    margin-bottom: 0;
    background-color: #181818;
    border: 1px solid #535353;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    background: #555;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #fff5;
}

.led {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #474747;
    border-radius: 50%;
    box-shadow: 0 0 3px #000;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
}

.led.on {
    background: lime;
    box-shadow: 0 0 6px lime;
}

.full-width {
    width: 100%;
}

.sidebar {
    background: linear-gradient(180deg, #0f0f10, #121213);
    border-right: 1px solid var(--border-subtle);
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.shake-once {
    animation: shake 0.3s ease;
}

.max-width-100 {
    max-width: 100px;
}

.max-width-110 {
    max-width: 110px;
}

.max-width-120 {
    max-width: 120px;
}

.max-width-200 {
    max-width: 200px;
}

.max-width-250 {
    max-width: 250px;
}

.max-width-300 {
    max-width: 300px;
}

.stack-gap-4 > * + * {
    margin-top: 1.5rem;
}

.device-selectable.device-selected {
    border: 1px solid #bf8d19;
}

.row-dark {
    background: #101010;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.color0 {
    transition: background-color 0.5s ease;
}

.logo-mark {
    width: 120px;
    color: var(--logo-main);
}

.logo-mark svg {
    width: 100%;
    height: auto;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.logo-mark .sail {
    fill: var(--sail-color);
}

.logo-mark .hull {
    fill: var(--hull-color);
}

/* Default colors */
.logo-mark {
    --logo-main: #ffffff;
    --sail-color: #ffffff;
    --hull-color: #d1d1d1;
}

/* Collapsible sidebar */
.sidebar {
    transition: width 0.25s ease;
}

.sidebar.collapsed {
    width: 72px;
}

.sidebar.collapsed .nav-link {
    justify-content: center;
    padding: 9px;
    font-size: 0;
    gap: 0;
}

.sidebar.collapsed .nav-link {
    position: relative;
}

.sidebar.collapsed .nav-link::after {
    content: attr(data-label);
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: #1f1f20;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-main);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 2000;
}

.sidebar.collapsed .nav-link:hover::after {
    opacity: 1;
}

/* Restore icon size */
.sidebar.collapsed .sidebar-icon {
    margin: 0;
    width: 22px;
    height: 22px;
}

/* Re-enable font size for icons (SVG/img unaffected) */
.sidebar.collapsed .nav-link img,
.sidebar.collapsed .nav-link svg {
    font-size: initial;
}

/* Hide non-link elements */
.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .divider,
.sidebar.collapsed .sidebar-meta,
.sidebar.collapsed .battery {
    display: none !important;
}

.nav-link {
    color: var(--text-muted);
    font-size: .95rem;
}

.nav-link.active {
    color: white;
    /*font-weight: 600;*/
}

.card {
    background: linear-gradient(180deg, #1a1a1b, #141415);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
}

.card-title {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    color: var(--text-muted);
}

.stat {
    font-size: 2rem;
    font-weight: 700;
}

.divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 12px 0;
}

.gauge {
    width: 120px;
    height: 120px;
    position: relative;
}

.gauge svg {
    transform: rotate(-90deg);
    display: block;
}

.gauge-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
}

small {
    color: var(--text-muted);
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--text-muted);
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
}

.sidebar .nav-link.active {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.12),
                                rgba(255,255,255,0.06)
    );
    color: white;
    /*font-weight: 600;*/
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.sidebar nav {
    gap: 6px;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    font-size: 13px;
}

.sidebar .nav-link.active i {
    opacity: 1;
}

.sidebar-nav {
    gap: 6px;
}

.sidebar {
    width: 260px;
    flex-shrink: 0;
}

.main-content {
    flex: 1;
}

.sidebar-title {
    text-align: center;
    color: white;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 600;
}

.sidebar-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    flex-shrink: 0;
    opacity: 0.8;
    filter: brightness(0.9);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.sidebar .nav-link:hover .sidebar-icon {
    opacity: 1;
    filter: brightness(1);
}

.sidebar .nav-link.active .sidebar-icon {
    opacity: 1;
    filter: brightness(1.15);
}

.system-card {
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.system-card .card-header {
    background: linear-gradient(180deg, #1e1e1f, #181819);
    border-bottom: 1px solid var(--border-subtle);
    padding: 10px 14px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.system-card .card-body {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.system-card .card-footer {
    background: linear-gradient(180deg, #181819, #141415);
    border-top: 1px solid var(--border-subtle);
    padding: 8px 14px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.system-card .card-footer.card-footer-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.header-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.header-left {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-right {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-main);
    text-align: right;
}

.header-right input {
    text-align: right;
}

.footer-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.footer-left {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-right {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-main);
    text-align: right;
}

.sidebar-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.meta-row:last-child {
    margin-bottom: 0;
}

.meta-label {
    opacity: 0.7;
}

.meta-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--text-main);
}

.battery {
    display: none;
    align-items: center;
    vertical-align: middle;
}

.battery-icon {
    width: 22px;
    height: 12px;
    stroke-width: 1.5;
    stroke: currentColor;
    fill: none;
}

.battery-level {
    fill: currentColor;
}

.battery-full {
    color: var(--good);
    margin-top: 1px;
}

.battery-full .battery-level {
    /*width: 16px;*/
}

.battery-warn {
    color: var(--warn);
    margin-top: 1px;
}

.battery-warn .battery-level {
    /*width: 8px;*/
}

.battery-low {
    color: var(--bad);
    margin-top: 1px;
}

.battery-low .battery-level {
    /*width: 3px;*/
}

.sidebar-text {
    flex: 1;
}

#gauge circle,
#pumpGauge {
transition: stroke-dashoffset 0.6s ease;
}

.gauge-value {
    transition: color 0.3s ease;
}

.gauge-value.rpm {
    color: var(--green) !important;
}

.gauge-value.temperature {
    color: var(--orange) !important;
}

/* Custom modal widths */
.modal-custom {
    max-width: none;
}

.modal-500 {
    width: 500px;
}

.modal-600 {
    width: 600px;
}

.modal-700 {
    width: 700px;
}

.modal-1000 {
    width: 1000px;
}

.modal-1200 {
    width: 1200px;
}

.modal-1300 {
    width: 1300px;
}

.modal-1400 {
    width: 1400px;
}

@media (max-width: 1200px) {
    .modal-1200 { width: 95%; }
}
@media (max-width: 1000px) {
    .modal-1000 { width: 95%; }
}
@media (max-width: 700px) {
    .modal-700 { width: 95%; }
}

.modal-content {
    background: linear-gradient(180deg, #1a1a1b, #141415);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    color: var(--text-main);
}

.modal-header,
.modal-footer {
    border-color: var(--border-subtle);
}

.modal .btn {
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.modal .btn-primary {
    background: linear-gradient(180deg, #2a2a2b, #1e1e1f);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

.modal .btn-primary:hover {
    background: linear-gradient(180deg, #343435, #262627);
    border-color: rgba(255,255,255,0.12);
}

.modal .btn-secondary {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.modal .btn-secondary:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
}

.modal .btn-danger {
    background: linear-gradient(180deg, #3a1d1d, #2a1414);
    border: 1px solid rgba(239,68,68,0.4);
    color: #fecaca;
}

.modal .btn-danger:hover {
    background: linear-gradient(180deg, #4a2323, #321818);
}

.modal .btn-accent {
    background: linear-gradient(180deg, #1f3a5f, #16283f);
    border: 1px solid rgba(59,130,246,0.4);
    color: #dbeafe;
}

.modal-header {
    color: var(--text-muted);
}

.modal-header .modal-title {
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.modal-body {
    color: var(--text-muted);
}

.modal-title {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    color: var(--text-muted);
}

.modal-footer {
    color: var(--text-muted);
}

.modal-body p {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle);
}

.modal .btn-close {
    width: 28px;
    height: 28px;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,0.06);
    border-radius: 8px;

    /* 🔴 CRITICAL FIX */
    background-image: none !important;
    filter: none;

    opacity: 0.75;
    cursor: pointer;

    transition:
            opacity 0.2s ease,
            background 0.2s ease,
            transform 0.15s ease;
}

.modal .btn-close::before {
    content: "×";
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-main); /* EXACT system font color */
}

.modal .btn-close:hover,
.modal .btn-close:focus {
    opacity: 1;
    background: rgba(255,255,255,0.12);
    transform: scale(1.05);
}

.modal .btn-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}

.modal .btn-close:focus {
    outline: none;
    box-shadow: none;
}

.modal .btn-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25); /* system-style focus */
}

.gauge-wrapper {
    flex: 1;
    min-width: 0;
}

/* Select input wrapper */
.system-select {
    background-color: var(--bg-card);
    background-image:
            linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
            linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
            calc(100% - 18px) calc(50% - 2px),
            calc(100% - 13px) calc(50% - 2px);
    background-size: 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-muted);
    padding: 8px 36px 8px 12px;
    font-size: 0.85rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            color 0.2s ease;
}

.system-select:hover {
    border-color: rgba(255,255,255,0.15);
    color: var(--text-main);
}

.system-select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    color: var(--text-main);
}

.system-select:disabled {
    opacity: 0.5;
    color: var(--text-muted);
    cursor: not-allowed;
}

.system-select.compact {
    padding: 6px 32px 6px 10px;
    font-size: 0.8rem;
}

.system-select.ok {
    border-color: rgba(34,197,94,0.4);
}

.system-select.warn {
    border-color: rgba(250,204,21,0.4);
}

.system-select.bad {
    border-color: rgba(239,68,68,0.4);
}

.system-select.auto-width {
    width: auto;
}

.system-select option {
    background: #141415;
    color: var(--text-main);
}

/* Slider input wrapper */
.system-slider {
    margin-top: 12px;
}

.system-slider.no-padding-top {
    margin-top: 0;
}

.system-input.no-padding-top {
    margin-top: 0;
}

.margin-lr-10 {
    margin-left: 10px;
    margin-right: 10px;
}

.slider-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.system-slider input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: transparent;
    cursor: pointer;
}

.system-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(
            to right,
            var(--green) 0%,
            var(--green) var(--slider-progress, 50%),
            #2a2a2b var(--slider-progress, 50%),
            #2a2a2b 100%
    );
}

.system-slider input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 6px;
    background: #2a2a2b;
}

.system-slider input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 6px;
    background: var(--green);
}

.system-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-main);
    border: 2px solid var(--good);
    transition: transform 0.15s ease;
}

.system-slider input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.system-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-main);
    border: 2px solid var(--good);
}

/*
.system-slider {
    display: flex;
    align-items: center;
}
*/
.system-slider input[type="range"] {
    display: block;
    line-height: 1;
}

.slider-value {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Toggle input wrapper */
.system-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.system-toggle input {
    display: none;
}

.toggle-track {
    position: relative;
    width: 42px;
    height: 22px;
    background: #2a2a2b;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-main);
    transition: transform 0.25s ease;
}

.system-toggle input:checked + .toggle-track {
    background: rgba(34,197,94,0.35);
    border-color: rgba(34,197,94,0.5);
}

.system-toggle input:checked + .toggle-track::after {
    transform: translateX(20px);
}

.toggle-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.system-toggle:hover .toggle-track {
    border-color: rgba(255,255,255,0.15);
}

.system-toggle input:disabled + .toggle-track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Text input wrapper */
.system-input {
    margin-top: 12px;
}

.input-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.system-input input[type="text"],
.system-input input[type="password"],
.system-input input[type="email"],
.system-input input[type="file"],
.system-input input[type="number"] {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 8px 12px;

    font-size: 0.85rem;
    color: var(--text-main);

    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            background 0.2s ease;
}

.system-input input::placeholder {
    color: rgba(255,255,255,0.35);
}

.system-input input:hover {
    border-color: rgba(255,255,255,0.15);
}

.system-input input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    background: #1e1e1f;
}

.system-input input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.system-input.compact input {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.system-input.ok input {
    border-color: rgba(34,197,94,0.4);
}

.system-input.warn input {
    border-color: rgba(250,204,21,0.4);
}

.system-input.bad input {
    border-color: rgba(239,68,68,0.5);
}

.with-suffix {
    position: relative;
}

.with-suffix input {
    padding-right: 44px;
}

.input-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--text-muted);
    pointer-events: none;
}

/* Color input wrapper */
.system-color input[type="color"] {
    width: 42px;
    height: 42px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.system-color.compact input[type="color"] {
    width: 30px;
    height: 30px;
    padding: 3px;
    border-radius: 8px;
}

.system-color.vertical-align input[type="color"] {
    vertical-align: middle;
}

.settings-label.vertical-align {
    vertical-align: middle;
}

.system-color input[type="color"]:hover {
    border-color: rgba(255,255,255,0.15);
}

.system-color input[type="color"]:focus {
    outline: none;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

.system-color input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.system-color input[type="color"]::-webkit-color-swatch {
    border-radius: 6px;
    border: none;
}

.system-color input[type="color"]::-moz-color-swatch {
    border-radius: 6px;
    border: none;
}

.system-color input[type="color"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Settings list wrapper */
.settings-list {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
}

.settings-list.no-border {
    border: 0;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    gap: 14px;
}

.settings-row + .settings-row {
    border-top: 1px solid var(--border-subtle);
}

.settings-row.settings-dpi .system-slider {
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.settings-row.settings-actuation {
    display: grid;
    grid-template-columns: 140px 1fr 50px;
    align-items: center;
    gap: 14px;
}

.settings-row.settings-flashTap {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    align-items: center;
    gap: 14px;
}

.settings-row.settings-actuation .system-slider {
    flex: unset;
    min-width: 0;
}

.settings-row.settings-flashTap .system-slider {
    flex: unset;
    min-width: 0;
}

#secondaryContainer {
    display: none;
}

.settings-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.settings-label.warning {
    font-size: 0.75rem;
    color: var(--warn);
}

.settings-row-80-20 .system-slider {
    flex: 0 0 70%;
}

.settings-row-80-20 .slider-value {
    flex: 0 0 30%;
    text-align: center;
    margin-top: 3px;
}

.settings-row-30-50-20 .settings-label {
    flex: 0 0 30%;
    text-align: left;
}

.settings-row-30-50-20 .system-slider {
    flex: 0 0 50%;
}

.settings-row-30-50-20 .slider-value {
    flex: 0 0 20%;
    text-align: center;
    margin-top: 3px;
}

.settings-row.settings-row-equal > span {
    flex: 1 1 0;
    min-width: 0; /* keeps ellipsis working */
}

.settings-row-equal .settings-label {
    text-align: left;
}

.settings-row-equal .meta-value {
    text-align: right;
}


/* Base system button wrapper */
.system-button {
    appearance: none;
    border-radius: 10px;
    padding: 8px 16px;

    font-size: 0.85rem;
    font-weight: 500;

    background: linear-gradient(180deg, #2a2a2b, #1e1e1f);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);

    cursor: pointer;
    user-select: none;

    transition:
            background 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease;
}

.system-button:hover {
    background: linear-gradient(180deg, #343435, #262627);
    border-color: rgba(255,255,255,0.12);
}

.system-button:active {
    background: linear-gradient(180deg, #1e1e1f, #141415);
}

.system-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

.system-button:focus,
.system-button:active:focus {
    outline: none;
    box-shadow: none;
}

.system-button.secondary {
    background: transparent;
    color: var(--text-muted);
}

.system-button.secondary:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
}

.system-button.danger {
    background: linear-gradient(180deg, #3a1d1d, #2a1414);
    border-color: rgba(239,68,68,0.4);
    color: #fecaca;
}

.system-button.danger:hover {
    background: linear-gradient(180deg, #4a2323, #321818);
}

.system-button.success {
    background: linear-gradient(180deg, #163a28, #0f241b);
    border-color: rgba(34,197,94,0.45);
    color: #bbf7d0;
}

.system-button.success:hover {
    background: linear-gradient(180deg, #1f4a33, #143125);
}

.system-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.system-button.center {
    margin: 0 auto;
}

.system-button.left {
    text-align: left;
}

.system-button.compact {
    padding: 6px 10px 6px 10px;
    font-size: 0.8rem;
}

/* Device canwas wrapper */
.device-canvas {
    position: relative;
    height: 100%;
    min-height: 400px;

    border: 1px solid rgba(255,255,255,0.25); /* outer inner frame */
    border-radius: 6px;

    padding: 20px;
}

.device-canvas::before {
    width: 1px;
    top: 20px;
    bottom: 20px;
    left: 220px;
}

.device-canvas::after {
    height: 1px;
    left: 20px;
    right: 20px;
    bottom: 180px;
}

.device-canvas {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.canvas-left {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(34,197,94,1);
    cursor: pointer;
    border-radius: 10px;
}

.canvas-right {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(239,68,68,1);
    cursor: pointer;
    border-radius: 10px;
}

.canvas-bottom {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.canvas-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255,255,0,1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    cursor: pointer;
}

/* Inline wrapper */
.inline-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inline-controls input[type="color"] {
    width: 42px;
    min-width: 42px;
    height: 36px;
    padding: 4px;
}

.inline-controls .system-select {
    flex: 0 0 auto;
}

/* 404 error wrapper */
.error-card {
    width: 100%;
    padding: 28px;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1a1b, #141415);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
}

.error-code {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.error-title {
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: 14px;
}

.error-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 520px;
    margin-bottom: 24px;
}

.error-footer {
    position: absolute;
    bottom: 14px;
    right: 18px;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--text-muted);
}

.error-card.center {
    margin: 0 auto;
}

/* Headset wrapper */
.headset-view {
    display: flex;
    justify-content: center;
    gap: 200px;
    padding: 40px;
}

.earcup {
    width: 370px;
    height: 370px;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 30% 30%, #3a3a3c, #1a1a1b 70%);
    box-shadow: inset 0 0 14px rgba(0,0,0,0.85), 0 12px 30px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.earcup-center {
    width: 325px;
    height: 325px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #3e3e40, #1f1f20 70%);
    box-shadow: inset 0 0 8px rgba(255,255,255,0.15), inset 0 0 22px rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    color: rgba(230,230,230,0.6);
    position: relative;
    z-index: 2;
}

.earcup-center.logo {
    width: 100px;
    height: 100px;
    font-size: 12px;
}

.earcup-ring {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
}

.ring-segment {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    cursor: pointer;
    background: conic-gradient(transparent 0deg, transparent 360deg);
}

.ring-segment {
    box-shadow: inset 0 0 2px rgba(0,0,0,0.9);
}

.ring-segment {
    pointer-events: none;
}

.ring-segment::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: auto;
}

.seg-1::before {
    background: conic-gradient(var(--seg1, #ff0000) 3deg 114deg, transparent 114deg 360deg);
}

.seg-2::before {
    background: conic-gradient(transparent 0deg 120deg, var(--seg2, #ffaa00) 120deg 240deg, transparent 240deg 360deg);
}

.seg-3::before {
    background: conic-gradient(transparent 0deg 246deg, var(--seg3, #00ff88) 246deg 354deg, transparent 354deg 360deg);
}

/* File from wrapper */
.file-form {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.file-input {
    padding: 0;
    border-radius: 10px;
    background: #1f1f20;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.file-input::-webkit-file-upload-button {
    appearance: none;
    border: none;
}

.file-input::file-selector-button {
    height: 36px;
    padding: 0 14px;
    border-radius: 10px 0 0 10px;
    border: none;
    background: linear-gradient(180deg, #2a2a2b, #1e1e1f);
    border-right: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.file-input::file-selector-button:hover {
    background: linear-gradient(180deg, #343435, #262627);
    color: var(--text-main);
}

.file-input:focus-within {
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

.file-input {
    width: 100%;
}

.file-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.system-input.file-input {
    margin-top: 0;
}

.system-input.text-input {
    margin-top: 0;
}


/* System time wrapper */
.system-time {
    height: 36px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--text-main);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.system-time:hover {
    border-color: rgba(255,255,255,0.15);
}

.system-time:focus {
    outline: none;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    background: #1e1e1f;
}

.system-time:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.system-time::-webkit-datetime-edit {
    padding: 0;
}

.system-time::-webkit-datetime-edit-text,
.system-time::-webkit-datetime-edit-hour-field,
.system-time::-webkit-datetime-edit-minute-field,
.system-time::-webkit-datetime-edit-ampm-field {
    color: var(--text-main);
}

.system-time::-webkit-datetime-edit-text {
    opacity: 0.6;
}

.system-time::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
}

.system-time::-webkit-calendar-picker-indicator:hover {
    opacity: 0.85;
}

.system-time.compact {
    height: 32px;
    padding: 6px 10px;
    font-size: 0.8rem;
}

.system-input.system-time {
    margin-top: 0;
}

/* DataTable Wrapper */
.dataTables_wrapper {
    color: var(--text-muted);
    font-size: 0.85rem;
}

table.dataTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
}

table.dataTable thead th {
    background: linear-gradient(180deg, #1e1e1f, #181819);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

table.dataTable tbody td {
    padding: 12px 14px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-subtle);
}

table.dataTable tbody td.key-assignments {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Fix vertical alignment of toggles ONLY */
table.dataTable tbody td .system-toggle {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Normalize toggle track positioning */
table.dataTable tbody td .system-toggle .toggle-track {
    margin-top: 0;
}

table.dataTable tbody tr:hover {
    background: rgba(255,255,255,0.04);
}

table.dataTable tbody tr:last-child td {
    border-bottom: none;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
}

.dataTables_length label,
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.dataTables_length select {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 6px 28px 6px 10px;
    color: var(--text-main);
    font-size: 0.8rem;
}

.dataTables_filter input {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 6px 10px;
    color: var(--text-main);
    font-size: 0.8rem;
}

.dataTables_filter input:focus,
.dataTables_length select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

.dataTables_info {
    color: var(--text-muted);
    font-size: 0.75rem;
    padding-top: 8px;
}

.dataTables_paginate {
    display: flex;
    gap: 6px;
}

.dataTables_paginate .paginate_button {
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, #2a2a2b, #1e1e1f);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: var(--text-muted) !important;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dataTables_paginate .paginate_button:hover {
    background: linear-gradient(180deg, #343435, #262627);
    border-color: rgba(255,255,255,0.12);
    color: var(--text-main) !important;
}

.dataTables_paginate .paginate_button.current {
    background: linear-gradient(
            180deg,
            rgba(255,255,255,0.12),
            rgba(255,255,255,0.06)
    );
    color: #fff !important;
    border-color: rgba(255,255,255,0.18);
}

.dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dataTables_empty {
    color: var(--text-muted);
    padding: 20px !important;
    text-align: center;
}

table.dataTable.compact thead th,
table.dataTable.compact tbody td {
    padding: 8px 10px;
    font-size: 0.75rem;
}

.dt-search input {
    display: block;
    padding: 6px 10px;
    height: 32px;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-main);
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.dt-search input:hover {
    border-color: rgba(255,255,255,0.15);
}

.dt-search input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    background: #1e1e1f;
}

.dt-length select {
    display: block;
    width:100%;
    height: 100%;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-main);
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background-image:
            linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
            linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dt-length select:hover {
    border-color: rgba(255,255,255,0.15);
}

.dt-length select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

.dt-paging {
    display: flex;
    gap: 6px;
}

.dt-paging button {
    padding: 6px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: linear-gradient(180deg, #2a2a2b, #1e1e1f) !important;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dt-paging button:not(:disabled):hover {
    background: linear-gradient(180deg, #343435, #262627);
    border-color: rgba(255,255,255,0.12);
    color: var(--text-main);
}

.dt-paging button.current {
    background: linear-gradient(
            180deg,
            rgba(255,255,255,0.12),
            rgba(255,255,255,0.06)
    );
    color: #fff;
    border-color: rgba(255,255,255,0.18);
}

.dt-paging button:disabled,
.dt-paging button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dt-length select:not(:disabled):hover {
    border-color: var(--bg-card) !important;
    outline:0;
    -webkit-box-shadow:none;
    box-shadow:none;
}

#dataTable_wrapper .dt-layout-row:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

#dataTable_wrapper .dt-length {
    order: 2;
    margin-left: auto;
}

#dataTable_wrapper .dt-search label,
#dataTable_wrapper .dt-length label {
    display: none;
}

#dataTable_info {
    display: none;
}

#dataTable_wrapper .dt-search {
    margin-bottom: 14px;
}

#dataTable_wrapper .dt-layout-row:last-child {
    margin-top: 14px;
}

#dataTable_wrapper .dt-paging {
    margin-bottom: 6px;
}

#dataTable_wrapper .dt-length select {
    height: 32px;
    line-height: 32px;
    padding: 0 32px 0 10px;
}

#dataTable_wrapper .dt-layout-row:has(.dt-paging):has(.dt-length) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* Default table */
.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #8a8d93;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: #8a8d93;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #8a8d93;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: #8a8d93;
    vertical-align: top;
    border-color: #343a40;
}

.table>:not(:last-child)>:last-child>* {
    border-bottom-color: #343a40;
}
.table>:not(caption)>*>* {
    padding: .75rem .75rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    -webkit-box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

/* Memory wrapper */
.memory-card {
    background: linear-gradient(180deg, #1a1a1b, #141415);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 10px 30px rgba(0,0,0,0.6);
}

.memory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(180deg, #1f1f20, #181819);
    border-bottom: 1px solid var(--border-subtle);
}

.memory-title {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.memory-type {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.4);
    color: var(--good);
}

.memory-stick {
    background: #232323;
    width: 100%;
    height: 100px;
    position: relative;
    border: 1px solid var(--border-subtle);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.memory-chip {
    width: 50px;
    height: 70px;
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
    box-shadow: inset 0 0 5px #000;
}

.memory-contacts {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    height: 16px;
    padding: 0 20px;
}

.memory-contact {
    width: 6px;
    height: 14px;
    background: #daa520;
    border-radius: 1px;
}

/* Temperature profiles */
.tempProfiles:hover {
    outline: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tempProfiles-selected {
    outline: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tempProfiles .delete-profile:hover {
    outline: none;
}

.tempProfiles:has(.delete-profile:hover) {
    outline: none;
    cursor: default;
}

.tempList:hover {
    outline: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tempList-selected {
    outline: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tempList .delete-profile:hover {
    outline: none;
}

.tempList:has(.delete-profile:hover) {
    outline: none;
    cursor: default;
}

.newTemp:hover {
    outline: 1px solid rgba(255,255,255,0.12);
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.temp-graph-container {
    padding-top: 0;
    display:none;
}

.temp-graph-canvas-container {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}

.temp-graph-canvas {
    width: 100%;
    height: 500px;
    display: block;
}

#temperature-probe-data {
    display: none;
}

#hwmon-sensors-probe-data {
    display: none;
}

#binary-sensors-probe-data {
    display: none;
}

#storage-data {
    display: none;
}

#gpu-data {
    display: none;
}

/* Modal info wrapper */
.delete-warning {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px 10px;
}

.warning-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(180deg, #3a1d1d, #2a1414);
    border: 1px solid rgba(239,68,68,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fecaca;
    font-size: 1.25rem;
    box-shadow: 0 0 18px rgba(239,68,68,0.25);
}

.warning-text {
    flex: 1;
}

.warning-title {
    margin: 0 0 6px 0;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fecaca;
}

.warning-message {
    margin: 0 0 14px 0;
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.5;
}

.warning-box {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    font-size: 0.8rem;
    color: #fca5a5;
}

.warning-box i {
    margin-top: 2px;
    color: #f87171;
}

/* Add Device to Dashboard wrapper */
.add-device-widget {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.add-device-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2a2a2b, #1e1e1f);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.4rem;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.add-device-widget:hover .add-device-icon {
    color: var(--text-main);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 0 14px rgba(255,255,255,0.08);
}

.add-device-title {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

.add-device-select {
    width: 100%;
    display: flex;
    justify-content: center;
}

.add-device-btn {
    width: 100%;
}

.add-device-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* RGB Editor wrapper */
.rgbList {
    position: relative;
    cursor: pointer;
    transition:
            background 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease;
}

.rgbList:hover {
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.rgbList.selected {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    #box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 12px rgba(255,255,255,0.08);
}

.rgbList.selected .settings-label {
    color: var(--text-main);
}

#gradientWrapper {
    position: relative;
    height: 100px;
}

#gradientCanvas {
    width: 100%;
    height: 100px;
    border-radius: 5px;
}

.stop {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #fff;
    position: absolute;
    top: 0;
    cursor: pointer;
}

.table-rgb-data td {
    padding: 8px;
    vertical-align: middle;
}

.table-rgb-data td.left {
    border-right: 1px solid #454545;
    text-align: center;
    width: 40%;
}

.table-rgb-data td.right {
    text-align: right;
    width: 60%;
}

.table-rgb-data td.left-gradient {
    border-right: 1px solid #454545;
    text-align: center;
    width: 60%;
}

.table-rgb-data td.right-gradient {
    text-align: right;
    width: 40%;
}

/* Macros wrapper */
.macroList {
    position: relative;
    cursor: pointer;
    transition:
            background 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease;
}

.macroList:hover {
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.macroList.selected {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    #box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 12px rgba(255,255,255,0.08);
}

.macroList.selected .settings-label {
    color: var(--text-main);
}

/* Textarea wrapper */
.system-input textarea {
    width: 100%;
    min-height: 220px;

    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 8px 12px;

    font-size: 0.85rem;
    color: var(--text-main);
    font-family: inherit;

    resize: vertical;

    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            background 0.2s ease;
}

.system-input textarea::placeholder {
    color: rgba(255,255,255,0.35);
}

.system-input textarea:hover {
    border-color: rgba(255,255,255,0.15);
}

.system-input textarea:focus {
    outline: none;
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
    background: #1e1e1f;
}

.system-input textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.system-input.text-area {
    margin-top: 0;
}

/* Compact variant */
.system-input.compact textarea {
    padding: 6px 10px;
    font-size: 0.8rem;
}

.system-input textarea.monospace {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.system-input.text-area {
    width: 100%;
}

.system-input.text-area label {
    display: block;
    width: 100%;
}

.system-input.text-area textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Sortable wrapper */
.card-placeholder {
    display: block;
    min-height: 100px;
    border: 2px dashed rgba(255,255,255,0.25);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    box-sizing: border-box;
}

.ui-sortable-helper {
    transform: scale(1.02);
    box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}
.drag-handle {
    cursor: grab;
}

#system-cards {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#system-cards.ready {
    visibility: visible;
    opacity: 1;
}

#system-cards-add {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#system-cards-add.ready {
    visibility: visible;
    opacity: 1;
}

.ui-sortable-helper,
.card-placeholder {
    pointer-events: none;
}

/* Keyboard wrapper */
.keyboard-5,
.keyboard-6,
.keyboard-7,
.keyboard-8 {
    display: grid;
    grid-gap: var(--kb-gap);
    padding: var(--kb-gap);
    justify-content: center;
    align-items: center;
}

.keyboard-5 { grid-template-rows: repeat(5, var(--kb-key)); }
.keyboard-6 { grid-template-rows: repeat(6, var(--kb-key)); }
.keyboard-7 { grid-template-rows: repeat(7, var(--kb-key)); }
.keyboard-8 { grid-template-rows: repeat(8, var(--kb-key)); }

.keyboard-row-16 { display: grid; grid-template-columns: repeat(16, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-17 { display: grid; grid-template-columns: repeat(17, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-18 { display: grid; grid-template-columns: repeat(18, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-19 { display: grid; grid-template-columns: repeat(19, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-20 { display: grid; grid-template-columns: repeat(20, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-21 { display: grid; grid-template-columns: repeat(21, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-24 { display: grid; grid-template-columns: repeat(24, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-25 { display: grid; grid-template-columns: repeat(25, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-26 { display: grid; grid-template-columns: repeat(26, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-27 { display: grid; grid-template-columns: repeat(27, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-28 { display: grid; grid-template-columns: repeat(28, var(--kb-key)); grid-gap: var(--kb-gap); }
.keyboard-row-29 { display: grid; grid-template-columns: repeat(29, var(--kb-key)); grid-gap: var(--kb-gap); }

.keyboard-key {
    width: var(--kb-key);
    height: var(--kb-key);
    background: linear-gradient(180deg, #1c1c1c, #1a1a1a);
    border: 1px solid #474747;
    border-radius: var(--kb-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #bf8d19;
}

.keyboard-key.active {
    /*background: linear-gradient(180deg, #272727, #1a1a1a);*/
}

.keyboard-key-empty {
    width: var(--kb-key);
    height: var(--kb-key);
}

.keyboard-key.empty { visibility: hidden; }

.keyboard-key-dot {
    width: var(--kb-key);
    height: var(--kb-key);
    background-color: #1e1e1e;
    border: 1px solid #474747;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #bf8d19;
}

.keyboard-key.wide  { grid-column: span 2; width: auto; }
.keyboard-key.wide3 { grid-column: span 3; width: auto; }
.keyboard-key.wide4 { grid-column: span 4; width: auto; }
.keyboard-key.wide5 { grid-column: span 5; width: auto; }
.keyboard-key.wide6 { grid-column: span 6; width: auto; }
.keyboard-key.wide7 { grid-column: span 7; width: auto; }
.keyboard-key.wide8 { grid-column: span 8; width: auto; }

.keyboard-key-half-container {
    display: flex;
    flex-direction: column;
    height: var(--kb-key);
}

.keyboard-key-half {
    width: var(--kb-key);
    flex: 1;
    background-color: #1e1e1e;
    border: 1px solid #474747;
    border-radius: var(--kb-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #bf8d19;
}

.keyboard-key-half:active { background-color: #272727; }

.keyboard-key-half.wide3 { grid-column: span 3; width: auto; }
.keyboard-key-half.wide4 { grid-column: span 4; width: auto; }

.keyboard-key-125,
.keyboard-key-125-top32 {
    width: var(--kb-key);
    height: calc(var(--kb-key) * 2.0833);
    background-color: #1e1e1e;
    border: 1px solid #474747;
    border-radius: var(--kb-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #bf8d19;
    position: relative;
}

.keyboard-key-125:active,
.keyboard-key-125-top32:active { background-color: #272727; }

.keyboard-key-125-top32 { top: calc(var(--kb-key) * 0.54); }

.keyboard-key-125-125 {
    width: calc(var(--kb-key) * 2.0833);
    height: calc(var(--kb-key) * 2.0833);
    background-color: #1e1e1e;
    border: 1px solid #474747;
    border-radius: var(--kb-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: #bf8d19;
}

.keyboard-key.top-32 {
    margin-top: calc(var(--kb-key) * 0.54);
}

.keyboard-key.top-32auto {
    margin-top: calc(var(--kb-key) * 1.0666);
    height: auto;
}

.keyboard-key.wide100 { width: 100%; height: calc(var(--kb-key) * 0.1666); }
.keyboard-key.height50 { height: 50%; width: calc(var(--kb-key) * 0.1666); }
.keyboard-key.height40 { height: 40%; width: calc(var(--kb-key) * 0.1666); }
.keyboard-key.height50-50 { height: 50%; width: calc(var(--kb-key) * 0.1666); top: -50%; }
.keyboard-key.height40-50 { height: 40%; width: calc(var(--kb-key) * 0.1666); margin-top: -50%; }

/* Left LED bars */
.keyboard-key.height100 {
    height: 100%;
    width: calc(var(--kb-key) * 0.1666);
}

.keyboard-key.height125top20right {
    width: calc(var(--kb-key) * 0.1666);
    justify-self: end;
    margin-top: calc(var(--kb-key) * 0.3333);
    position: absolute;
}

.keyboard-key.height125top40right {
    width: calc(var(--kb-key) * 0.1666);
    justify-self: end;
    margin-top: calc(var(--kb-key) * 0.6666);
    position: absolute;
}

.keyboard-key.height125top60right {
    width: calc(var(--kb-key) * 0.1666);
    justify-self: end;
    margin-top: calc(var(--kb-key) * 0.9999);
    position: absolute;
}

/* Right LED bars */
.keyboard-key.height125topright {
    width: calc(var(--kb-key) * 0.1666);
    justify-self: end;
    position: absolute;
}

.keyboard-key.height125top20 {
    width: calc(var(--kb-key) * 0.1666);
    height: calc(var(--kb-key));
    margin-top: calc(var(--kb-key) * 0.3333);
    position: absolute;
}

.keyboard-key.height125top40 {
    width: calc(var(--kb-key) * 0.1666);
    height: calc(var(--kb-key));
    margin-top: calc(var(--kb-key) * 0.6666);
    position: absolute;
}

.keyboard-key.height125top60 {
    width: calc(var(--kb-key) * 0.1666);
    height: calc(var(--kb-key));
    margin-top: calc(var(--kb-key) * 0.9999);
    position: absolute;
}

.keyboard-key.height30top40,
.keyboard-key.height125top60,
.keyboard-key.left-led-1,
.keyboard-key.right-led-1,
.keyboard-key.left-led-2,
.keyboard-key.right-led-2,
.keyboard-key.left-led-3,
.keyboard-key.right-led-3,
.keyboard-key.left-led-4,
.keyboard-key.right-led-4,
.keyboard-key.left-led-5,
.keyboard-key.right-led-5,
.keyboard-key.left-led-6,
.keyboard-key.right-led-6,
.keyboard-key.left-led-7,
.keyboard-key.right-led-7,
.keyboard-key.left-led-8,
.keyboard-key.right-led-8,
.keyboard-key.left-led-9,
.keyboard-key.right-led-9,
.keyboard-key.left-led-10,
.keyboard-key.right-led-10,
.keyboard-key.left-led-11,
.keyboard-key.right-led-11 {
    width: calc(var(--kb-key) * 0.1666);
    position: absolute;
}

.keyboard-key.left-led-1,
.keyboard-key.left-led-2,
.keyboard-key.left-led-3,
.keyboard-key.left-led-4,
.keyboard-key.left-led-5,
.keyboard-key.left-led-6,
.keyboard-key.left-led-7,
.keyboard-key.left-led-8,
.keyboard-key.left-led-9,
.keyboard-key.left-led-10,
.keyboard-key.left-led-11 {
    margin-left: calc(-1 * var(--kb-key) / 2);
}

.keyboard-key.right-led-1,
.keyboard-key.right-led-2,
.keyboard-key.right-led-3,
.keyboard-key.right-led-4,
.keyboard-key.right-led-5,
.keyboard-key.right-led-6,
.keyboard-key.right-led-7,
.keyboard-key.right-led-8,
.keyboard-key.right-led-9,
.keyboard-key.right-led-10,
.keyboard-key.right-led-11 {
    justify-self: end;
    margin-right: calc(-1 * var(--kb-key) / 2);
}

.keyboard-key.height30top40 { height: calc(var(--kb-key) * 0.5); }

.keyboard-key.left-led-1,
.keyboard-key.right-led-1 { height: var(--kb-key); }

.keyboard-key.left-led-2,
.keyboard-key.right-led-2 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * 0.0666); }

.keyboard-key.left-led-3,
.keyboard-key.right-led-3 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * -0.3666); }

.keyboard-key.left-led-4,
.keyboard-key.right-led-4 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * -0.25); }

.keyboard-key.left-led-5,
.keyboard-key.right-led-5 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * -1.2); }

.keyboard-key.left-led-6,
.keyboard-key.right-led-6 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * -1.1); }

.keyboard-key.left-led-7,
.keyboard-key.right-led-7 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * -2.05); }

.keyboard-key.left-led-8,
.keyboard-key.right-led-8 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * -1.4); }

.keyboard-key.left-led-9,
.keyboard-key.right-led-9 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * -0.7666); }

.keyboard-key.left-led-10,
.keyboard-key.right-led-10 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * -0.1333); }

.keyboard-key.left-led-11,
.keyboard-key.right-led-11 { height: calc(var(--kb-key) * 0.5); margin-top: calc(var(--kb-key) * 0.5); }

.keySelector.active {
    /*border: 1px solid #bf8d19;*/
}

.enter-custom {
    margin-top: calc(-1 * var(--keyboard-top));
    height: var(--keyboard-height-custom);
}

.enter-custom2 {
    margin-top: calc(-1 * var(--keyboard-top));
    height: var(--keyboard-height-custom);
}

.key-no-color {
    color: rgba(255,255,255,1);
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.key-color {
    width: 100%;
    text-align: center;
}

.key-color-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.key-color-custom:empty {
    background-color: currentColor;
}

.key-color-custom:empty::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
}

/* Equalizer */
.equalizer-wrapper {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 24px;
    padding: 20px 24px;
    width: 100%;
    box-sizing: border-box;
}

.eq-scale {
    position: relative;
    height: var(--eq-height);
    font-size: 0.7rem;
    color: #a1a1a1;
    text-align: right;
}

.eq-scale span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
}

.eq-scale span:nth-child(1) { top: 0%; }
.eq-scale span:nth-child(2) { top: 50%; }
.eq-scale span:nth-child(3) { top: 100%; }

.eq-bands {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    align-items: end;
}

.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eq-band label {
    font-size: 0.7rem;
    color: #a1a1a1;
    letter-spacing: 0.08em;
}

.eq-slider-wrap {
    height: var(--eq-height);
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eq-slider {
    -webkit-appearance: none;
    appearance: none;
    width: var(--eq-height);
    height: 22px;
    background: transparent;
    transform: rotate(-90deg);
    cursor: pointer;
}

.eq-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
            to right,
            var(--green) 0%,
            var(--green) var(--slider-progress, 50%),
            #2a2a2b var(--slider-progress, 50%),
            #2a2a2b 100%
    );
}

.eq-slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--eq-track);
}

.eq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-main);
    border: 2px solid var(--good);
    margin-top: -5px;
}

.eq-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-main);
    border: 2px solid var(--good);
}

/* Full HD */
@media (max-width: 1920px) {
    :root {
        --kb-key: clamp(34px, 3.2vw, 45px);
        --kb-gap: clamp(3px, 0.35vw, 5px);
        --kb-radius: 6px;
        --keyboard-top: 50px;
        --keyboard-height-custom: 95px;
    }

    html {
        font-size: 14px;
    }

    .sidebar {
        width: 220px;
    }

    .sidebar-icon {
        width: 16px;
        height: 16px;
    }

    .sidebar .nav-link {
        font-size: 12px;
        padding: 8px 12px;
        gap: 6px;
    }

    .sidebar-title {
        font-size: 0.7rem;
        letter-spacing: 0.08em;
    }

    .card-title,
    .settings-label,
    .system-card .card-header,
    .system-card .card-body {
        letter-spacing: 0.04em;
    }

    .stat {
        font-size: 1.6rem;
    }

    .card {
        border-radius: 10px;
    }

    .settings-row {
        padding: 10px 12px;
    }

    .system-slider input[type="range"]::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
        margin-top: -4px;
    }

    .device-canvas {
        min-height: 320px;
        padding: 16px;
    }

    .canvas-left,
    .canvas-right,
    .canvas-logo {
        width: 140px;
        height: 140px;
    }

    .canvas-logo {
        letter-spacing: 0.06em;
    }

    .earcup {
        width: 300px;
        height: 300px;
    }

    .earcup-center {
        width: 260px;
        height: 260px;
        font-size: 1rem;
    }

    .headset-view {
        gap: 140px;
        padding: 32px;
    }
}

/* 4K */
@media (min-width: 2561px) {
    html {
        font-size: 18px;
    }
    .sidebar {
        width: 300px;
    }

    .sidebar-icon {
        width: 20px;
        height: 20px;
    }

    .sidebar .nav-link {
        font-size: 14px;
        padding: 12px 16px;
        gap: 10px;
    }

    .sidebar-title {
        font-size: 0.85rem;
        letter-spacing: 0.14em;
    }

    .card-title,
    .settings-label,
    .system-card .card-header,
    .system-card .card-body {
        letter-spacing: 0.1em;
    }

    .system-card .card-body.no-padding-top {
        padding-top: 0;
    }

    .stat {
        font-size: 2.4rem;
    }

    .card {
        border-radius: 18px;
    }

    .settings-row {
        padding: 14px 18px;
    }

    .system-slider input[type="range"]::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
        margin-top: -7px;
    }

    .device-canvas {
        min-height: 520px;
        padding: 28px;
    }

    .canvas-left,
    .canvas-right,
    .canvas-logo {
        width: 240px;
        height: 240px;
    }

    .canvas-logo {
        font-size: 0.85rem;
        letter-spacing: 0.14em;
    }

    .earcup {
        width: 440px;
        height: 440px;
    }

    .earcup-center {
        width: 380px;
        height: 380px;
        font-size: 1.3rem;
    }

    .headset-view {
        gap: 260px;
        padding: 56px;
    }
}