/* Konfiguracny tab */


#tab-config {
    /* max-width: 900px; */
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    /* padding mozeme davat len na boky aby nebol odsadeny sticky profile header */
    padding-left: 24px;
    padding-right: 24px;
    /* overflow-x: clip namiesto hidden - hidden by vytvaral scroll kontajner
       a zlomil by position: sticky na child elementoch */
    overflow-x: clip;
    box-sizing: border-box;

    --config-btn-radius: 8px;
    --config-btn-font-size: 13px;
    --config-btn-font-weight: 600;
    --config-btn-padding-y: 8px;
    --config-btn-padding-x: 14px;

    /* Nedajme tu margin lebo nam to oreze obsah tabu. */
}

#tab-config * {
    box-sizing: border-box;
}

#tab-config h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--msger-header-colour);
    margin: 24px 0 12px 0;
}

/* Nemozeme pridat padding priamo do tab configu kvoli sticky headerom */
#tab-config > .tab-header {
    padding-top: 20px;
}

.config-option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 12px;
    background: var(--config-option-bg, rgba(255, 255, 255, 0.05));
    border-radius: 6px;
}

.config-option > span {
    min-width: 150px;
    font-weight: 500;
}

#username-config-option {
    flex-wrap: wrap;
}

#username-config-input {
    /* flex-basis: 0 - rozsiruje sa z nuly, takze menu sa suciti skor ako zalomenie */
    flex: 1 1 0;
    min-width: 10ch;
}

#username-config-option .remember-me-inline-wrap {
    flex: 0 0 auto;
    white-space: nowrap;
}

#username-config-option .remember-me-inline-wrap label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--msger-header-colour);
    opacity: 0.85;
    font-size: 13px;
}

/* Sekcia USB zariadenia */

.usb-device-section {
    margin: 16px 0;
}

.usb-device-card {
    background: var(--config-option-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    border-radius: 8px;
    padding: 20px;
    transition: border-color 0.3s ease;
}

.usb-device-card.connected {
    border-color: #4CAF50;
}

.usb-device-card.unsupported {
    padding: 16px 20px;
}

.usb-device-card.unsupported .usb-device-header {
    margin-bottom: 0;
}

.usb-device-card.unsupported .usb-device-name {
    white-space: normal;
}

.usb-device-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.usb-device-info-wrapper {
    flex: 1;
    min-width: 0;
}

.usb-device-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    color: var(--msger-header-colour);
    opacity: 0.6;
}

.usb-device-status i {
    font-size: 8px;
    color: #ff6666;
}

.usb-device-card.connected .usb-device-status i {
    color: #4CAF50;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.usb-device-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--msger-header-colour);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usb-device-details {
    font-size: 12px;
    color: var(--msger-header-colour);
    opacity: 0.5;
    font-family: 'JetBrains Mono', monospace;
}

.usb-connect-button {
    padding: var(--config-btn-padding-y) calc(var(--config-btn-padding-x) + 2px);
    background: var(--config-btn-primary-bg);
    color: var(--config-btn-primary-fg);
    border: 1px solid var(--config-btn-primary-border);
    border-radius: var(--config-btn-radius);
    cursor: pointer;
    font-size: var(--config-btn-font-size);
    font-weight: var(--config-btn-font-weight);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.usb-connect-button:hover:not(:disabled) {
    background: var(--config-btn-primary-hover-bg);
    border-color: var(--config-btn-primary-hover-border);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(67, 128, 96, 0.25);
}

.usb-connect-button.paired {
    background: var(--config-btn-danger-bg);
    color: var(--config-btn-danger-fg);
    border-color: var(--config-btn-danger-border);
}

.usb-connect-button.paired:hover {
    background: var(--config-btn-danger-hover-bg);
    border-color: var(--config-btn-danger-hover-border);
    box-shadow: 0 4px 8px rgba(150, 95, 95, 0.28);
}

.usb-connect-button:disabled {
    background: var(--config-border, rgba(255, 255, 255, 0.1));
    color: var(--msger-header-colour);
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.usb-device-settings {
    border-top: 1px solid var(--config-border, rgba(255, 255, 255, 0.1));
    padding-top: 16px;
    margin-top: 16px;
}

.usb-setting-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.usb-setting-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--msger-header-colour);
    font-size: 14px;
}

.usb-setting-label i {
    color: var(--msger-send-button-bg);
    font-size: 16px;
}

.usb-profile-select {
    padding: 8px 12px;
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    border-radius: 6px;
    font-size: 14px;
    background: var(--config-input-bg, transparent);
    color: var(--msger-header-colour);
    min-width: 200px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.usb-profile-select:hover:not(:disabled) {
    border-color: var(--msger-send-button-bg);
}

.usb-profile-select:focus:not(:disabled) {
    outline: none;
    border-color: var(--msger-send-button-bg);
    box-shadow: 0 0 0 3px rgba(var(--msger-send-button-bg-rgb, 0, 123, 255), 0.1);
}

/* Responzivne upravy */
@media (max-width: 600px) {
    .usb-device-header {
        flex-wrap: wrap;
    }

    .usb-connect-button {
        width: 100%;
        justify-content: center;
    }

    .usb-setting-option {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .usb-profile-select {
        width: 100%;
    }
}

/* Koniec sekcie USB */


.profiles-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.profiles-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profiles-header-actions button {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--config-btn-radius);
    cursor: pointer;
    font-size: var(--config-btn-font-size);
    font-weight: var(--config-btn-font-weight);
}

#add-profile-button {
    background: var(--config-btn-primary-bg);
    color: var(--config-btn-primary-fg);
    border-color: var(--config-btn-primary-border);
}

#import-profile-trigger-button {
    background: var(--config-btn-secondary-bg);
    color: var(--config-btn-secondary-fg);
    border-color: var(--config-btn-secondary-border);
}

#add-profile-button:hover {
    background: var(--config-btn-primary-hover-bg);
    border-color: var(--config-btn-primary-hover-border);
}

#import-profile-trigger-button:hover:not(:disabled) {
    background: var(--config-btn-secondary-hover-bg);
    border-color: var(--config-btn-secondary-hover-border);
}

#import-profile-modal .modal-content {
    max-width: 560px;
}

#import-profile-modal-input {
    font-family: 'JetBrains Mono', monospace;
}

#import-profile-validation-text {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    min-height: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    visibility: hidden;
}

#import-profile-validation-text.is-valid {
    color: #1db97b;
}

#import-profile-validation-text.is-invalid {
    color: #e07a5f;
}

#import-profile-scan-button {
    width: auto;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--config-btn-padding-y, 8px) var(--config-btn-padding-x, 14px);
    border-radius: var(--config-btn-radius, 8px);
    border: 1px solid var(--config-btn-secondary-border, #628f8b);
    background: var(--config-btn-secondary-bg, #6f9e9a);
    color: var(--config-btn-secondary-fg, #0f2826);
    font-size: var(--config-btn-font-size, 13px);
    font-weight: var(--config-btn-font-weight, 600);
}

#import-profile-scan-button:hover:not(:disabled) {
    background: var(--config-btn-secondary-hover-bg, #80aaa6);
    border-color: var(--config-btn-secondary-hover-border, #719c98);
}

#import-profile-scan-unavailable-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--msger-header-colour);
    opacity: 0.58;
    line-height: 1.4;
}

#import-profile-scanner-field {
    text-align: left;
}

#import-profile-video {
    width: 100%;
    min-height: 220px;
    max-height: 320px;
    object-fit: cover;
    border-radius: 8px;
    background: #111;
    margin-bottom: 10px;
}

#import-profile-scan-status {
    font-size: 12px;
    color: var(--msger-header-colour);
    opacity: 0.65;
    line-height: 1.5;
}


.profile-item {
    margin: 12px 0;
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    border-radius: 6px;
    /* overflow: clip neklipne poziciovane potomky, ale nespusti scroll kontajner.
       To je nutne aby position: sticky fungoval cez tuto vrstvu. */
    overflow: clip;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Sentinel pre IntersectionObserver - detekuje kedy je profile-header prilepeny. */
.profile-sticky-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
}

.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--profile-header-bg, #f8f9fa);
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: none;
    border-bottom: 1px solid var(--config-border, rgba(0, 0, 0, 0.10));
}

/* Tiene iba ked je header prilepeny (sticky). */
.profile-header--stuck {
    box-shadow: var(--profile-header-shadow, 0 2px 8px rgba(0, 0, 0, 0.12));
}

/* Explicitne plne pozadie pre sticky header - zabrani presvitaniu obsahu cez neho */
:root:not(.dark-scheme) .profile-header {
    background: #f8f9fa;
}
:root:not(.dark-scheme) .profile-header:hover {
    background: #e9ecef;
}
:root.dark-scheme .profile-header {
    background: #1e1d22;
}
:root.dark-scheme .profile-header:hover {
    background: #252430;
}

.profile-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.profile-toggle {
    color: var(--msger-header-colour);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 2px;
}

.profile-toggle.expanded {
    transform: rotate(90deg);
}

.profile-name-display {
    font-weight: 500;
    color: var(--msger-header-colour);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-id-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--msger-header-colour);
    opacity: 0.6;
    flex-shrink: 0;
    user-select: none;
}

.profile-name-input {
    font-weight: 500;
    color: var(--msger-header-colour);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    max-width: 200px;
    min-width: 120px;
    width: auto;
    transition: all 0.2s;
}

.profile-name-input:hover {
    background: var(--config-input-bg, rgba(255, 255, 255, 0.05));
    border-color: var(--config-border, rgba(255, 255, 255, 0.15));
}

.profile-name-input:focus {
    outline: none;
    background: var(--config-input-bg, rgba(255, 255, 255, 0.08));
    border-color: #579ffb;
}

.profile-header-right {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.delete-profile-button {
    background: var(--config-btn-danger-bg);
    color: var(--config-btn-danger-fg);
    padding: 6px 12px;
    font-size: var(--config-btn-font-size);
    border: 1px solid var(--config-btn-danger-border);
    border-radius: var(--config-btn-radius);
    cursor: pointer;
    font-weight: var(--config-btn-font-weight);
}

.delete-profile-button:hover {
    background: var(--config-btn-danger-hover-bg);
    border-color: var(--config-btn-danger-hover-border);
}


.profile-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease;
}

.profile-content.expanded {
    grid-template-rows: 1fr;
}

.profile-content-inner {
    min-height: 0;
    padding: 0 16px;
    overflow: hidden;
}

.profile-content.expanded > .profile-content-inner {
    padding: 16px;
    overflow: visible;
}

.profile-field {
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-field label {
    font-weight: 500;
    font-size: 14px;
    color: var(--msger-header-colour);
    opacity: 0.85;
}

.profile-field input:not([type="checkbox"]):not([type="range"]),
.profile-field select {
    padding: 8px 12px;
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    border-radius: 4px;
    font-size: 14px;
    background: var(--config-input-bg, transparent);
    color: var(--msger-header-colour);
    max-width: 100%;
    width: 100%;
}

#tab-config :is(.profile-field input:not([type="checkbox"]):not([type="range"]), .profile-field select, .freq-picker-input-grp input[type="number"], .profile-code-input, .spect-cfg-input, .spect-cfg-select) {
    border-radius: 8px;
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    background: var(--config-input-bg, transparent);
    color: var(--msger-header-colour);
}

:root.dark-scheme #tab-config :is(.profile-field select, .usb-profile-select, .spect-cfg-select) {
    color-scheme: dark;
    background: var(--config-input-bg);
    color: var(--msger-header-colour);
    border-color: var(--config-border);
}

:root.dark-scheme #tab-config :is(.profile-field select, .usb-profile-select, .spect-cfg-select) option,
:root.dark-scheme #tab-config :is(.profile-field select, .usb-profile-select, .spect-cfg-select) optgroup {
    background: var(--select-option-bg, var(--config-input-bg));
    color: var(--select-option-text, var(--msger-header-colour));
}

#tab-config :is(.profile-field input:not([type="checkbox"]):not([type="range"]), .profile-field select, .freq-picker-input-grp input[type="number"], .profile-code-input, .spect-cfg-input, .spect-cfg-select):focus {
    outline: none;
    border-color: var(--config-btn-secondary-border, rgba(98, 143, 139, 0.8));
    box-shadow: 0 0 0 3px rgba(98, 143, 139, 0.16);
}

.profile-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    max-width: none;
    padding: 0;
    margin: 0;
    align-self: flex-start;
    cursor: pointer;
    accent-color: var(--msger-send-button-bg);
}

.profile-field input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(98, 143, 139, 0.16);
}

:root:not(.dark-scheme) #tab-config .profile-field input[type="checkbox"]:hover:not(:disabled) {
    box-shadow: 0 0 0 3px rgba(98, 143, 139, 0.12);
}

#tab-config input[type="number"]:disabled {
    appearance: textfield;
    -moz-appearance: textfield;
}

#tab-config input[type="number"]:disabled::-webkit-outer-spin-button,
#tab-config input[type="number"]:disabled::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.profile-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

#tab-config canvas {
    display: block;
    width: 100%;
}

.section-divider {
    margin: 24px 0 16px 0;
    padding-top: 16px;
    border-top: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
}

.section-divider:first-child {
    margin: 24px 0 16px 0;
    padding-top: 0px;
    border-top: none;
}

.section-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--msger-header-colour);
    margin-bottom: 12px;
}

.section-description {
    font-size: 13px;
    color: var(--msger-header-colour);
    opacity: 0.6;
    line-height: 1.6;
    margin: 4px 0 8px 0;
}

.profile-subsection-title {
    margin: 14px 0 6px 0;
    padding-top: 10px;
    border-top: 1px dashed var(--config-border, rgba(255, 255, 255, 0.15));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--msger-header-colour);
    opacity: 0.72;
}

.help-text {
    font-size: 12px;
    color: var(--msger-header-colour);
    opacity: 0.5;
    margin-top: 4px;
}

.profile-field-error {
    margin-top: 4px;
    font-size: 11px;
    color: var(--config-btn-danger-bg, #bd5f66);
    display: none;
    line-height: 1.35;
}

#tab-config :is(input, select, textarea).field-invalid {
    border-color: var(--config-btn-danger-border, #a85258) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--config-btn-danger-bg, #bd5f66) 22%, transparent);
}

#tab-config input[type="range"].field-invalid {
    outline: 2px solid color-mix(in srgb, var(--config-btn-danger-bg, #bd5f66) 45%, transparent);
    outline-offset: 2px;
    border-radius: 8px;
}

.profile-readonly-note {
    margin-bottom: 0;
}

.profile-spectrogram-preview {
    margin: 0 0 14px 0;
    padding: 10px 12px;
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    border-radius: 10px;
    background: color-mix(in srgb, var(--config-option-bg, rgba(255, 255, 255, 0.05)) 78%, transparent);
}

.profile-spectrogram-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.profile-spectrogram-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--msger-header-colour);
    opacity: 0.7;
}

.profile-spectrogram-speed {
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--msger-header-colour);
    opacity: 0.8;
    white-space: nowrap;
}

.profile-spectrogram-canvas {
    display: block;
    width: 100%;
    height: 140px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--config-border, rgba(255, 255, 255, 0.15)) 70%, transparent);
    background: rgba(14, 20, 28, 0.92);
}

.profile-readonly-properties {
    margin: 0 0 14px 0;
    padding: 10px 12px;
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    border-radius: 10px;
    background: color-mix(in srgb, var(--config-option-bg, rgba(255, 255, 255, 0.05)) 72%, transparent);
}

.profile-readonly-properties-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--msger-header-colour);
    opacity: 0.66;
}

.profile-readonly-prop-row {
    display: grid;
    grid-template-columns: minmax(130px, 200px) minmax(0, 1fr);
    gap: 10px;
    padding: 6px 0;
    border-top: 1px dashed color-mix(in srgb, var(--config-border, rgba(255, 255, 255, 0.15)) 70%, transparent);
}

.profile-readonly-prop-row:first-of-type {
    border-top: none;
    padding-top: 2px;
}

.profile-readonly-prop-label {
    font-size: 12px;
    color: var(--msger-header-colour);
    opacity: 0.68;
}

.profile-readonly-prop-value {
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--msger-header-colour);
    font-weight: 600;
}

.empty-state {
    text-align: center;
    padding: 32px;
    color: var(--msger-header-colour);
    opacity: 0.5;
    font-style: italic;
}

#confirmation-modal .modal-content {
    max-width: 400px;
}

.confirmation-modal-body {
    color: var(--msger-header-colour);
    opacity: 0.8;
    line-height: 1.5;
    margin-bottom: 10px;
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-button {
    padding: var(--config-btn-padding-y, 8px) var(--config-btn-padding-x, 14px);
    border: 1px solid transparent;
    border-radius: var(--config-btn-radius, 8px);
    cursor: pointer;
    font-weight: var(--config-btn-font-weight, 600);
    font-size: var(--config-btn-font-size, 13px);
}

.modal-button.cancel {
    background: var(--config-modal-cancel-bg, #5f6770);
    color: var(--config-modal-cancel-fg, #ffffff);
    border-color: var(--config-modal-cancel-border, #505861);
}

.modal-button.cancel:hover {
    background: var(--config-modal-cancel-hover-bg, #6b737b);
    border-color: var(--config-modal-cancel-hover-border, #5b646d);
}

.modal-button.confirm {
    background: var(--config-modal-confirm-bg, #915f5f);
    color: var(--config-modal-confirm-fg, #ffffff);
    border-color: var(--config-modal-confirm-border, #805252);
}

.modal-button.confirm:hover {
    background: var(--config-modal-confirm-hover-bg, #a06c6c);
    border-color: var(--config-modal-confirm-hover-border, #8e5f5f);
}

.modal-button.primary {
    background: var(--config-btn-primary-bg, #78b08e);
    color: var(--config-btn-primary-fg, #0f2a1c);
    border-color: var(--config-btn-primary-border, #6aa883);
}

.modal-button.primary:hover {
    background: var(--config-btn-primary-hover-bg, #88be9b);
    border-color: var(--config-btn-primary-hover-border, #79b792);
}

/* Share profilu - modal */
#share-profile-modal .modal-content {
    width: min(440px, calc(100vw - 32px));
    max-width: 440px;
}

#share-profile-modal .share-modal-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 14px;
    padding: 18px;
}

#share-profile-modal .share-modal-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

#share-profile-modal .share-modal-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--msger-header-colour);
    line-height: 1.2;
}

#share-profile-modal .share-modal-subtitle {
    font-size: 12px;
    color: var(--msger-header-colour);
    opacity: 0.68;
}

#share-profile-modal .share-modal-qr-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--config-border, rgba(255, 255, 255, 0.15)) 82%, transparent);
    background: color-mix(in srgb, var(--config-option-bg, rgba(255, 255, 255, 0.05)) 68%, transparent);
    padding: 14px;
}

#share-profile-modal-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 210px;
}

#share-profile-modal-qr svg {
    width: min(218px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

#share-profile-modal .share-modal-qr-empty {
    width: 100%;
    min-height: 92px;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--config-border, rgba(255, 255, 255, 0.15)) 86%, transparent);
    background: color-mix(in srgb, var(--config-input-bg, transparent) 78%, transparent);
    color: var(--msger-header-colour);
    opacity: 0.7;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

#share-profile-modal .share-modal-code-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--msger-header-colour);
    opacity: 0.66;
    text-align: left;
}

#share-profile-modal .share-modal-code-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

#share-profile-modal .share-modal-code-box .profile-code-input {
    height: 42px;
    font-size: 12px;
    border-radius: 10px;
    padding: 0 12px;
}

#share-profile-modal .copy-profile-code-button {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

#share-profile-modal .share-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#share-profile-modal .share-modal-actions .modal-button {
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.copy-profile-code-button.copied {
    color: #ffffff;
    background: var(--config-btn-primary-bg);
    border-color: var(--config-btn-primary-border);
}

@media (max-width: 520px) {
    #share-profile-modal .share-modal-content {
        padding: 14px;
        gap: 10px;
    }

    #share-profile-modal .share-modal-title {
        font-size: 17px;
    }

    #share-profile-modal-qr {
        min-height: 184px;
    }

    #share-profile-modal .share-modal-actions {
        grid-template-columns: 1fr;
    }
}

:root:not(.dark-scheme) #tab-config {
    --config-option-bg: #f9f9f9;
    --config-border: #ddd;
    --config-input-bg: #fff;
    --profile-header-bg: #f8f9fa;
    --profile-header-hover-bg: #e9ecef;
    --profile-active-soft-bg: #f3f8f5;
    --profile-active-soft-hover-bg: #eef5f1;
    --profile-active-content-bg: #fbfdfc;
    --config-btn-primary-bg: #2f8f66;
    --config-btn-primary-hover-bg: #267a57;
    --config-btn-primary-fg: #f6fffa;
    --config-btn-primary-border: #2a7f5d;
    --config-btn-primary-hover-border: #236f53;
    --config-btn-secondary-bg: #2f6f9f;
    --config-btn-secondary-hover-bg: #285f89;
    --config-btn-secondary-fg: #f4faff;
    --config-btn-secondary-border: #2a628c;
    --config-btn-secondary-hover-border: #235576;
    --config-btn-neutral-bg: #e6edf4;
    --config-btn-neutral-hover-bg: #dce4ec;
    --config-btn-neutral-fg: #273340;
    --config-btn-neutral-border: #c7d3de;
    --config-btn-neutral-hover-border: #b8c6d2;
    --config-btn-danger-bg: #bd5f66;
    --config-btn-danger-hover-bg: #aa535a;
    --config-btn-danger-fg: #fff4f5;
    --config-btn-danger-border: #a85258;
    --config-btn-danger-hover-border: #99494f;
    --config-modal-cancel-bg: #6d8196;
    --config-modal-cancel-hover-bg: #60788f;
    --config-modal-cancel-border: #60778d;
    --config-modal-cancel-hover-border: #557084;
    --config-modal-cancel-fg: #f7fbff;
    --config-modal-confirm-bg: #b5535a;
    --config-modal-confirm-hover-bg: #a74a50;
    --config-modal-confirm-border: #9f464c;
    --config-modal-confirm-hover-border: #934147;
    --config-modal-confirm-fg: #fff7f8;
    --freq-graph-good-line: #5d8fd6;
    --freq-graph-good-fill: rgba(93, 143, 214, 0.24);
    --freq-graph-bad-line: #c48787;
    --freq-graph-bad-fill: rgba(196, 135, 135, 0.16);
    --freq-graph-threshold-line: rgba(196, 135, 135, 0.62);
    --freq-graph-select-line: rgba(93, 143, 214, 0.68);
}

:root.dark-scheme #tab-config {
    --config-option-bg: rgba(255, 255, 255, 0.05);
    --config-border: rgba(255, 255, 255, 0.12);
    --config-input-bg: rgba(255, 255, 255, 0.06);
    --profile-header-bg: #1e1d22;
    --profile-header-hover-bg: #252430;
    --profile-active-soft-bg: #243029;
    --profile-active-soft-hover-bg: #29362e;
    --profile-active-content-bg: #1d2521;
    --config-btn-primary-bg: #4d7c60;
    --config-btn-primary-hover-bg: #5a8c6d;
    --config-btn-primary-fg: #d6f2e2;
    --config-btn-primary-border: #58896a;
    --config-btn-primary-hover-border: #669779;
    --config-btn-secondary-bg: #3b6f6a;
    --config-btn-secondary-hover-bg: #467f79;
    --config-btn-secondary-fg: #d0ece9;
    --config-btn-secondary-border: #467974;
    --config-btn-secondary-hover-border: #528883;
    --config-btn-neutral-bg: #5f6770;
    --config-btn-neutral-hover-bg: #6b737b;
    --config-btn-neutral-fg: #e0e6ea;
    --config-btn-neutral-border: #6a727b;
    --config-btn-neutral-hover-border: #77808a;
    --config-btn-danger-bg: #915f5f;
    --config-btn-danger-hover-bg: #a06c6c;
    --config-btn-danger-fg: #ffeaea;
    --config-btn-danger-border: #9b6868;
    --config-btn-danger-hover-border: #a97878;
    --config-modal-cancel-bg: #535c65;
    --config-modal-cancel-hover-bg: #616a73;
    --config-modal-cancel-border: #616a73;
    --config-modal-cancel-hover-border: #6e7780;
    --config-modal-cancel-fg: #ffffff;
    --config-modal-confirm-bg: #7e5353;
    --config-modal-confirm-hover-bg: #8d5f5f;
    --config-modal-confirm-border: #8b5d5d;
    --config-modal-confirm-hover-border: #9a6b6b;
    --config-modal-confirm-fg: #ffffff;
    --freq-graph-good-line: #7fa8e3;
    --freq-graph-good-fill: rgba(127, 168, 227, 0.28);
    --freq-graph-bad-line: #a06c6c;
    --freq-graph-bad-fill: rgba(160, 108, 108, 0.24);
    --freq-graph-threshold-line: rgba(160, 108, 108, 0.70);
    --freq-graph-select-line: rgba(127, 168, 227, 0.74);
}

@media (max-width: 600px) {
    #tab-config {
        padding-left: 12px;
        padding-right: 12px;
    }

    #tab-config h3 {
        font-size: 16px;
        margin: 16px 0 8px 0;
    }

    .config-option {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .config-option > span {
        min-width: unset;
        font-size: 13px;
    }

    #username-config-option {
        flex-direction: row;
        align-items: center;
    }

    #username-config-input {
        flex-basis: 180px;
    }

    .profile-field-row {
        grid-template-columns: 1fr;
    }

    .profile-item {
        margin: 8px 0;
    }

    .profile-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "left right"
            "actions actions";
        padding: 10px 12px;
        gap: 6px 8px;
        align-items: center;
    }

    .profile-header-left {
        grid-area: left;
        gap: 8px;
        min-width: 0;
        flex: unset;
    }

    .profile-header-right {
        grid-area: right;
        gap: 6px;
        flex-shrink: 0;
        width: auto;
        justify-content: flex-end;
    }

    .profile-name-input {
        max-width: none;
        min-width: 0;
        flex: 1;
        font-size: 13px;
        padding: 3px 6px;
    }

    .profile-name-display {
        font-size: 13px;
    }

    .use-profile-button {
        font-size: 11px;
        padding: 5px 10px;
        white-space: nowrap;
    }

    .delete-profile-button {
        padding: 5px 10px;
        font-size: 12px;
    }

    .profile-content-inner {
        padding: 0 12px;
    }

    .profile-content.expanded > .profile-content-inner {
        padding: 12px;
    }

    .profile-field {
        margin: 10px 0;
    }

    .profile-field label {
        font-size: 13px;
    }

    .profile-field input:not([type="checkbox"]):not([type="range"]),
    .profile-field select {
        padding: 6px 10px;
        font-size: 13px;
    }

    .section-divider {
        margin: 16px 0 12px 0;
        padding-top: 12px;
    }

    .section-title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .section-description {
        font-size: 12px;
    }

    .profile-spectrogram-preview {
        padding: 10px;
    }

    .profile-spectrogram-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .profile-spectrogram-canvas {
        height: 120px;
    }

    .profile-readonly-properties {
        padding: 10px;
    }

    .profile-readonly-prop-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .profile-readonly-prop-label {
        font-size: 11px;
    }

    .profile-readonly-prop-value {
        font-size: 12px;
    }

    .help-text {
        font-size: 11px;
    }

    .profiles-header {
        margin: 12px 0;
    }

    .profiles-header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .profiles-header-actions button {
        justify-content: center;
        align-self: stretch;
        padding: 7px 12px;
        font-size: 13px;
        gap: 6px;
    }

    .modal-content {
        margin: 20px;
        max-width: calc(100% - 40px);
    }

    .slider-row {
        display: grid;
        grid-template-columns: 18px 1fr;
        grid-template-areas:
            "icon range"
            "label label";
        align-items: center;
        gap: 8px;
    }

    .slider-row input[type="range"] {
        grid-area: range;
        min-width: 0;
        width: 100%;
    }

    .slider-label {
        grid-area: label;
        min-width: unset;
        width: 100%;
        text-align: center;
        font-size: 0.85em;
    }

    .slider-icon {
        grid-area: icon;
        font-size: 12px;
        width: 14px;
        align-self: center;
    }

}

/* Velmi male displeje */
@media (max-width: 400px) {
    #tab-config {
        padding-left: 8px;
        padding-right: 8px;
    }

    #tab-config h3 {
        font-size: 15px;
    }

    .profile-header-left {
        gap: 6px;
    }

    .profile-toggle {
        font-size: 12px;
    }

    .profile-id-label {
        font-size: 12px;
    }

    .profile-name-input {
        max-width: 120px;
        min-width: 60px;
        font-size: 12px;
    }

    .use-profile-button {
        padding: 6px 10px;
    }

    .delete-profile-button {
        padding: 6px 10px;
    }

    .profile-content-inner {
        padding: 0 10px;
    }

    .profile-content.expanded > .profile-content-inner {
        padding: 10px;
    }

    .profile-field-row {
        gap: 12px;
    }

    .section-title {
        font-size: 13px;
    }

    #add-profile-button {
        padding: 6px 10px;
    }

    .modal-content {
        margin: 10px;
        max-width: calc(100% - 20px);
        padding: 16px;
    }

    .modal-footer {
        gap: 8px;
    }

    .modal-button {
        padding: 7px 12px;
        font-size: 13px;
    }

}

/* Ultra male displeje */
@media (max-width: 360px) {
    .profile-name-input {
        max-width: 100px;
        min-width: 50px;
    }
}

:root.dark-scheme #tab-config input[type="number"] {
    color-scheme: normal;
}

:root:not(.dark-scheme) #tab-config input[type="number"] {
    color-scheme: light;
}

#tab-config input[type="number"]::-webkit-outer-spin-button,
#tab-config input[type="number"]::-webkit-inner-spin-button {
    filter: var(--spin-button-filter, none);
    opacity: var(--spin-button-opacity, 1);
}

/* Tlacidlo pouzit profil */

.use-profile-button {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          6px 14px;
    border-radius:    var(--config-btn-radius);
    font-size:        var(--config-btn-font-size);
    font-weight:      var(--config-btn-font-weight);
    letter-spacing:   0.02em;
    cursor:           pointer;
    white-space:      nowrap;

    /* Kludovy stav s obrysom. */
    color:            var(--config-btn-secondary-fg);
    background:       var(--config-btn-secondary-bg);
    border:           1px solid var(--config-btn-secondary-border);

    transition:
        background   0.18s ease,
        color        0.18s ease,
        border-color 0.18s ease,
        box-shadow   0.18s ease,
        transform    0.12s ease;
}

.share-profile-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--config-btn-radius);
    border: 1px solid var(--config-btn-secondary-border);
    background: var(--config-btn-secondary-bg);
    color: var(--config-btn-secondary-fg);
    font-size: var(--config-btn-font-size);
    font-weight: var(--config-btn-font-weight);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.profile-share-row {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--config-border, rgba(255, 255, 255, 0.15)) 84%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--config-option-bg, rgba(255, 255, 255, 0.05)) 70%, transparent);
}

.profile-share-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.profile-share-code-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.is-hidden {
    display: none !important;
}

.profile-readonly-note,
.profile-share-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 4px;
    color: var(--msger-header-colour);
    opacity: 0.8;
    font-size: 12px;
    line-height: 1.45;
}

.profile-readonly-note i,
.profile-share-note i {
    opacity: 0.85;
}

.profile-code-input {
    width: 100%;
    min-width: 0;
    height: 36px;
    border-radius: 8px;
    border: 1px dashed rgba(138, 148, 166, 0.35);
    background: rgba(138, 148, 166, 0.08);
    color: var(--msger-header-colour);
    font: 600 11px 'JetBrains Mono', monospace;
    letter-spacing: 0.03em;
    padding: 0 10px;
    cursor: pointer;
}

.profile-code-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.45);
}


.copy-profile-code-button {
    width: 36px;
    height: 36px;
    border-radius: var(--config-btn-radius);
    border: 1px solid var(--config-btn-secondary-border);
    background: var(--config-btn-secondary-bg);
    color: var(--config-btn-secondary-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.copy-profile-code-button:hover {
    background: var(--config-btn-secondary-hover-bg);
    border-color: var(--config-btn-secondary-hover-border);
    transform: translateY(-1px);
}

.copy-profile-code-button:active {
    transform: translateY(0);
}

.share-profile-button i {
    font-size: 11px;
}

.share-profile-button:hover {
    background: var(--config-btn-secondary-hover-bg);
    border-color: var(--config-btn-secondary-hover-border);
    transform: translateY(-1px);
}

.share-profile-button:active {
    transform: translateY(0);
}

.share-profile-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.share-profile-button:hover:disabled {
    background: var(--config-btn-secondary-bg);
    border-color: var(--config-btn-secondary-border);
}

.dark-scheme .profile-code-input {
    border-color: rgba(126, 138, 158, 0.3);
    background: rgba(126, 138, 158, 0.1);
}

@media (max-width: 600px) {
    .profile-share-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .profile-share-code-wrap {
        width: 100%;
    }

    .share-profile-button {
        width: 100%;
        justify-content: center;
    }
}

.use-profile-button i {
    font-size:  11px;
    transition: transform 0.18s ease;
}

/* Hover stav */
.use-profile-button:hover:not(:disabled) {
    color:       var(--config-btn-primary-fg);
    background:  var(--config-btn-primary-hover-bg);
    border-color: var(--config-btn-primary-hover-border);
    box-shadow:  0 2px 10px rgba(70, 128, 98, 0.3);
    transform:   translateY(-1px);
}

.use-profile-button:hover:not(:disabled) i {
    transform: translateX(2px);
}

/* Stlaceny stav */
.use-profile-button:active:not(:disabled) {
    transform:  translateY(0);
    box-shadow: 0 1px 4px rgba(70, 128, 98, 0.22);
}

/* Aktivny alebo vybrany stav */
.use-profile-button--active,
.use-profile-button--active:disabled {
    color:        var(--config-btn-primary-fg);
    background:   var(--config-btn-primary-bg);
    border-color: var(--config-btn-primary-border);
    cursor:       default;
    /* Pri disabled vypni hover efekty. */
    transform:    none;
    box-shadow:   none;
}


/* Zvraznenie aktivnej karty profilu */

.profile-item--active {
    border-color: rgba(29, 185, 123, 0.56) !important;
    background: var(--profile-active-content-bg, transparent);
    box-shadow: 0 0 0 1px rgba(29, 185, 123, 0.20),
        0 5px 14px rgba(29, 185, 123, 0.10);
}

.dark-scheme .profile-item--active {
    border-color: rgba(34, 214, 142, 0.52) !important;
    box-shadow: 0 0 0 1px rgba(34, 214, 142, 0.22),
        0 7px 16px rgba(9, 22, 17, 0.44);
}

:root:not(.dark-scheme) .profile-item--active .profile-header {
    background: var(--profile-active-soft-bg);
}

:root:not(.dark-scheme) .profile-item--active .profile-header:hover {
    background: var(--profile-active-soft-hover-bg);
}

:root.dark-scheme .profile-item--active .profile-header {
    background: var(--profile-active-soft-bg);
}

:root.dark-scheme .profile-item--active .profile-header:hover {
    background: var(--profile-active-soft-hover-bg);
}

/* Predvoleny profil ma jemny lavy okraj. */
.profile-item--default {
    border-left: 3px solid rgba(138, 148, 166, 0.35);
}

.profile-item--default.profile-item--active {
    border-left-color: rgba(29, 185, 123, 0.72);
}

.dark-scheme .profile-item--default {
    border-left-color: rgba(126, 138, 158, 0.28);
}

.dark-scheme .profile-item--default.profile-item--active {
    border-left-color: rgba(34, 214, 142, 0.68);
}

/* Interaktivny vyber pasma moze ist na celu sirku. */
/* .profile-field-row:tx {
    display: flex;
    flex-direction: row;
} */

/* Posuvniky */

.slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-row input[type="range"] {
    flex: 1;
    accent-color: rgb(88, 128, 101);
    cursor: pointer;
    height: 4px;
}

.slider-row input[type="range"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.slider-label {
    min-width: 200px;
    width: 200px;
    text-align: right;
    font-size: 0.85em;
    color: var(--msger-header-colour);
    font-variant-numeric: tabular-nums;
}

.slider-icon {
    font-size: 14px;
    color: var(--msger-header-colour);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Sekcia info o kniznici */

/* --- Promo karta rozsirenia ------------------------------------------------ */

.addon-promo-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--config-option-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    border-radius: 8px;
    padding: 20px;
    margin: 12px 0;
}

.addon-promo-icon {
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--config-btn-primary-bg, #2f8f66);
    border: 1px solid var(--config-btn-primary-border, #2a7f5d);
    border-radius: 8px;
    color: var(--config-btn-primary-fg, #f6fffa);
    font-size: 20px;
    line-height: 1;
}

.addon-promo-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.addon-promo-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--msger-header-colour);
    letter-spacing: 0.01em;
}

.addon-promo-desc {
    font-size: 0.85em;
    color: var(--msger-header-colour);
    opacity: 0.75;
    line-height: 1.5;
}

.addon-promo-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    padding: var(--config-btn-padding-y, 8px) var(--config-btn-padding-x, 14px);
    background: var(--config-btn-primary-bg, #2f8f66);
    color: var(--config-btn-primary-fg, #f6fffa);
    border: 1px solid var(--config-btn-primary-border, #2a7f5d);
    border-radius: var(--config-btn-radius, 8px);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--config-btn-font-size, 13px);
    font-weight: var(--config-btn-font-weight, 600);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.addon-promo-button:hover {
    background: var(--config-btn-primary-hover-bg, #267a57);
    border-color: var(--config-btn-primary-hover-border, #236f53);
}

.addon-promo-button i {
    font-size: 14px;
}

/* --- Kniznina informacia --------------------------------------------------- */

.lib-info-section {
    background: var(--config-option-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    border-radius: 8px;
    margin: 12px 0;
    overflow: clip;
}

.lib-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--config-border, rgba(255, 255, 255, 0.08));
}

.lib-info-row:last-child {
    border-bottom: none;
}

.lib-info-label {
    min-width: 80px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.6;
    flex-shrink: 0;
}

.lib-info-value {
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--msger-header-colour);
}

.audio-info-section {
    margin: 12px 0;
    padding: 10px;
    border: 1px solid var(--config-border, rgba(255, 255, 255, 0.15));
    border-radius: 8px;
    background: var(--config-option-bg, rgba(255, 255, 255, 0.05));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.audio-info-top {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.audio-info-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--config-border, rgba(255, 255, 255, 0.15)) 85%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--config-input-bg, transparent) 86%, transparent);
}

.audio-info-kpi-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--msger-header-colour);
    opacity: 0.56;
}

.audio-info-kpi-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--msger-header-colour);
}

.audio-info-kpi-value[data-state="ok"],
.audio-info-kpi-value[data-state="granted"] {
    color: #1db97b;
}

.audio-info-kpi-value[data-state="warn"],
.audio-info-kpi-value[data-state="prompt"] {
    color: #e1b45a;
}

.audio-info-kpi-value[data-state="bad"],
.audio-info-kpi-value[data-state="denied"] {
    color: #e07a5f;
}

.audio-info-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.audio-info-item {
    display: grid;
    grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--config-border, rgba(255, 255, 255, 0.15)) 80%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--config-option-bg, rgba(255, 255, 255, 0.05)) 65%, transparent);
    min-width: 0;
}

.audio-info-item-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--msger-header-colour);
    opacity: 0.56;
}

.audio-info-item-value {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--msger-header-colour);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .audio-info-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .audio-info-item {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}