/*
   BestieBot Command System
   Final cascade layer for authenticated dashboard surfaces.

   Page CSS owns page-specific layout. This file owns the reusable UI contract:
   type, spacing, fields, buttons, cards, chips, tabs, modals, and focus states.
*/

:root {
    --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --bb-page-max: 1600px;
    --bb-readable-max: 72ch;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.875rem;
    --text-lg: 0.9375rem;
    --text-xl: 1rem;
    --text-2xl: 1.125rem;
    --text-3xl: 1.25rem;
    --text-4xl: 1.5rem;
    --text-page: 3rem;
    --text-page-mobile: 2rem;

    --leading-tight: 1.2;
    --leading-ui: 1.4;
    --leading-copy: 1.6;

    --control-h-xs: 30px;
    --control-h-sm: 34px;
    --control-h-md: 42px;
    --control-h-lg: 48px;
    --control-px-sm: 12px;
    --control-px-md: 16px;
    --control-px-lg: 18px;
    --control-radius-sm: 8px;
    --control-radius: 10px;
    --control-radius-lg: 12px;
    --control-gap: 8px;

    --icon-btn-sm: 30px;
    --icon-btn-md: 38px;
    --icon-btn-lg: 46px;

    --card-pad-sm: 16px;
    --card-pad-md: 20px;
    --card-pad-lg: 24px;
    --card-header-pad-y: 18px;
    --card-header-pad-x: 22px;

    --surface-page: oklch(7.8% 0.012 265);
    --surface-control: var(--surface-2);
    --surface-control-hover: var(--surface-3);
    --surface-panel: var(--surface-1);
    --surface-panel-strong: oklch(15% 0.012 265 / 0.96);
    --surface-active: rgba(93, 173, 226, 0.14);
    --surface-active-hover: rgba(93, 173, 226, 0.2);

    --focus-ring: 0 0 0 3px rgba(93, 173, 226, 0.18);
    --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.18);
    --field-border: var(--border);
    --field-border-hover: var(--border-strong);
    --field-border-focus: rgba(93, 173, 226, 0.62);
    --field-placeholder: rgba(255, 255, 255, 0.38);
    --button-shadow-primary: 0 10px 24px rgba(93, 173, 226, 0.16);
    --button-shadow-premium: 0 10px 24px rgba(251, 191, 36, 0.18);
    --control-transition: background 0.16s var(--ease-lift),
        border-color 0.16s var(--ease-lift),
        color 0.16s var(--ease-lift),
        box-shadow 0.16s var(--ease-lift),
        filter 0.16s var(--ease-lift);
}

html {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

body {
    background: var(--surface-page);
    color: var(--text);
    font-size: var(--text-md);
    line-height: var(--leading-copy);
}

code,
kbd,
pre,
.bb-mono,
.bb-chip,
.queue-count-chip,
.source-badge,
.filter-tab-count,
.pill-count,
.stat-chip-value,
.stat-label,
.stat-item strong,
.queue-number,
.np-time,
.volume-value,
.warning-row .warn-date,
.upload-status .progress,
.settings-arl-status,
.pl-card-meta,
.pl-tag-chip,
.settings-code,
.promo-code-label,
.row-status {
    font-family: var(--font-mono);
}

.main-content,
.app-container {
    font-size: var(--text-md);
}

:is(.main-content, .app-container) :is(.page-container, .server-select-shell) {
    width: 100%;
    max-width: var(--bb-page-max);
    margin-inline: auto;
}

:is(.main-content, .app-container) :is(.page-header, .music-page-top, .page-header-unified) {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}

:is(.main-content, .app-container) :is(.page-header h1, .music-page-top h1, .header-title-block h1) {
    margin: 0 0 var(--space-3);
    color: #f2f5fa;
    font-size: var(--text-page);
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

:is(.main-content, .app-container) :is(.page-header p, .music-page-top p, .header-title-block p) {
    max-width: var(--bb-readable-max);
    color: rgba(255, 255, 255, 0.46);
    font-size: var(--text-2xl);
    line-height: var(--leading-copy);
}

:is(.main-content, .app-container) :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .dash-card-title,
    .card-title,
    .type-card-title,
    .settings-section-title,
    .server-name,
    .feature-title,
    .marketplace-card-title,
    .app-card-title,
    .tool-title
) {
    letter-spacing: 0;
}

:is(.main-content, .app-container) :is(
    .bb-eyebrow,
    .section-eyebrow,
    .section-label,
    .settings-kicker,
    .form-label,
    .field-label span,
    .search-sort-label,
    .lib-panel-label,
    .cp-group-label,
    .stat-item-label,
    .hero-stat-label,
    .featured-pill,
    .tool-desc
) {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.56);
}

:is(.main-content, .app-container) :is(.bb-eyebrow::before, .section-eyebrow::before, .section-label::before) {
    width: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
}

:is(.main-content, .app-container) :is(.bb-stack) {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

:is(.main-content, .app-container) :is(.bb-cluster) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--control-gap);
}

:is(.main-content, .app-container) :is(.bb-toolbar, .toolbar) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--control-gap);
    min-height: var(--control-h-lg);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-section);
    background: var(--surface-panel);
}

:is(.main-content, .app-container) :is(.bb-field, .pl-field, .form-group) {
    display: grid;
    gap: var(--space-2);
}

:is(.main-content, .app-container) :is(
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not(.msb-input),
    select,
    textarea,
    .bb-control,
    .bb-input,
    .bb-select,
    .bb-textarea,
    .search-input,
    .search-bar,
    .user-search,
    .form-input,
    .form-select,
    .form-textarea,
    .mod-input,
    .mod-select,
    .settings-arl-input,
    .search-sort-select,
    .system-modal-input,
    .wallet-promo-input,
    .keywords-form input,
    .search-container input,
    .search-box input
) {
    width: 100%;
    height: var(--control-h-md) !important;
    min-height: var(--control-h-md) !important;
    padding: 10px var(--control-px-md) !important;
    border: 1px solid var(--field-border);
    border-radius: var(--control-radius) !important;
    background: var(--surface-control);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--text-md) !important;
    font-weight: 500;
    line-height: var(--leading-ui);
    box-shadow: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--control-transition);
}

:is(.main-content, .app-container) :is(input[type='color']) {
    padding: 4px !important;
}

:is(.main-content, .app-container) :is(textarea, .bb-textarea, .form-textarea) {
    height: auto !important;
    min-height: 104px !important;
    resize: vertical;
    line-height: 1.55;
}

:is(.main-content, .app-container) :is(
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not(.msb-input),
    select,
    textarea,
    .bb-control,
    .bb-input,
    .bb-select,
    .bb-textarea,
    .search-input,
    .search-bar,
    .user-search,
    .form-input,
    .form-select,
    .form-textarea,
    .mod-input,
    .mod-select,
    .settings-arl-input,
    .search-sort-select,
    .system-modal-input,
    .wallet-promo-input,
    .keywords-form input,
    .search-container input,
    .search-box input
):hover:not(:disabled):not([readonly]) {
    background: var(--surface-control-hover);
    border-color: var(--field-border-hover);
}

:is(.main-content, .app-container) :is(
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not(.msb-input),
    select,
    textarea,
    .bb-control,
    .bb-input,
    .bb-select,
    .bb-textarea,
    .search-input,
    .search-bar,
    .user-search,
    .form-input,
    .form-select,
    .form-textarea,
    .mod-input,
    .mod-select,
    .settings-arl-input,
    .search-sort-select,
    .system-modal-input,
    .wallet-promo-input,
    .keywords-form input,
    .search-container input,
    .search-box input
):focus,
:is(.main-content, .app-container) :is(
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not(.msb-input),
    select,
    textarea,
    .bb-control,
    .bb-input,
    .bb-select,
    .bb-textarea,
    .search-input,
    .search-bar,
    .user-search,
    .form-input,
    .form-select,
    .form-textarea,
    .mod-input,
    .mod-select,
    .settings-arl-input,
    .search-sort-select,
    .system-modal-input,
    .wallet-promo-input,
    .keywords-form input,
    .search-container input,
    .search-box input
):focus-visible {
    border-color: var(--field-border-focus);
    background: var(--surface-control-hover);
    box-shadow: var(--focus-ring);
}

:is(.main-content, .app-container) :is(input, textarea)::placeholder {
    color: var(--field-placeholder);
    opacity: 1;
}

/* ================================================================
   UNIFIED DROPDOWNS — every <select> across the site looks identical:
   dark surface, brand chevron, dark option list, blue focus ring.
   Unscoped (covers selects rendered outside .main-content, e.g. modals)
   and !important so it wins over older page-specific select rules.
   ================================================================ */
select,
.form-select,
.bb-select,
.mod-select,
.search-sort-select {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: var(--surface-control) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5' fill='none' stroke='%2398a0ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    border: 1px solid var(--field-border) !important;
    color: var(--text) !important;
    padding-right: 34px !important;
    cursor: pointer;
}
select:hover,
.form-select:hover,
.bb-select:hover,
.mod-select:hover,
.search-sort-select:hover {
    border-color: rgba(93, 173, 226, 0.4) !important;
}
select:focus,
.form-select:focus,
.bb-select:focus,
.mod-select:focus,
.search-sort-select:focus {
    border-color: var(--primary) !important;
    background-color: var(--surface-control-hover) !important;
    box-shadow: var(--focus-ring) !important;
    outline: none !important;
}
select option,
select optgroup {
    background-color: #16161d;
    color: #e8e8ea;
}

/* ================================================================
   CUSTOM DROPDOWN (.bbsel) — shared component, same as /music.
   enhanceSelect() (cv2_builder.js) renders this over a hidden native
   <select>, so the option list is fully themed (Safari included).
   Panel is body-appended + fixed, z-index above modals.
   ================================================================ */
.bbsel { position: relative; }
.bbsel-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 9px 12px 9px 14px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 10px; color: var(--text);
    font-size: 0.8125rem; font-family: inherit; font-weight: 500; cursor: pointer;
    outline: none; transition: border-color 0.15s, background 0.15s;
}
.bbsel-trigger:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-3, rgba(255,255,255,0.05)); }
.bbsel-trigger:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(93,173,226,0.18); }
.bbsel-trigger:disabled { opacity: 0.55; cursor: not-allowed; }
.bbsel-trigger.is-open { border-color: var(--primary); background: var(--surface-3, rgba(255,255,255,0.05)); }
.bbsel-trigger .bbsel-label { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.bbsel-trigger .bbsel-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbsel-trigger .bbsel-caret { color: var(--text-light); font-size: 0.7rem; transition: transform 0.18s var(--ease-lift); flex-shrink: 0; }
.bbsel-trigger.is-open .bbsel-caret { transform: rotate(180deg); color: var(--primary); }
.bbsel-panel {
    position: fixed; top: 0; left: 0; width: 240px; z-index: 10050;
    background: rgba(20, 22, 28, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-strong); border-radius: var(--radius-tile, 12px);
    box-shadow: 0 14px 38px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.03) inset;
    max-height: 320px; overflow-y: auto; padding: 6px; opacity: 0;
    transform: translateY(-4px) scale(0.98); pointer-events: none;
    transition: opacity 0.14s var(--ease-lift), transform 0.14s var(--ease-lift);
}
.bbsel-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.bbsel-panel::-webkit-scrollbar { width: 8px; }
.bbsel-panel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.bbsel-option {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px;
    cursor: pointer; color: var(--text); font-size: 0.8125rem; transition: background 0.12s; user-select: none;
}
.bbsel-option:hover, .bbsel-option.is-active { background: rgba(93,173,226,0.1); color: #fff; }
.bbsel-option.is-selected { background: rgba(93,173,226,0.16); color: #fff; }
.bbsel-option .bbsel-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbsel-option .bbsel-opt-check { width: 14px; flex-shrink: 0; color: var(--primary); opacity: 0; }
.bbsel-option.is-selected .bbsel-opt-check { opacity: 1; }
.bbsel-group { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-light); padding: 9px 10px 4px; }
/* leave room for the chevron. The .main-content control rule resolves to
   (0,5,1) because its :is() carries `input:not([type])×4`; the inert :not()s
   below lift this to (0,6,0) so it wins. They're always-true for dropdowns. */
:is(.main-content, .app-container) :is(select, .form-select, .bb-select, .mod-select, .search-sort-select):not([multiple]):not([size]):not([type]):not([form]) {
    padding-right: 34px !important;
}

:is(.main-content, .app-container) :is(input:disabled, select:disabled, textarea:disabled, button:disabled) {
    cursor: not-allowed;
    opacity: 0.52;
}

:is(.main-content, .app-container) :is(.search-box, .search-container, .music-search-bar) {
    min-height: var(--control-h-lg);
    border-radius: var(--control-radius-lg);
    background: var(--surface-panel);
    border: 1px solid var(--border);
}

:is(.main-content, .app-container) :is(.search-box, .search-container) {
    display: flex;
    align-items: center;
}

/* The wrapper (.search-box/.search-container) IS the bar — the input inside it
   must be chrome-less, or you get a second bar nested inside the first. The
   generic input rule above sets an opaque background + border at higher
   specificity, so these need !important to win. */
:is(.main-content, .app-container) :is(.search-box input, .search-container input) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

:is(.main-content, .app-container) :is(.search-box input, .search-container input):focus {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

:is(.main-content, .app-container) :is(
    .bb-btn,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success,
    .btn-outline,
    .btn-danger-outline,
    .btn-tertiary,
    .btn-text,
    .submit-btn,
    .submit-btn-secondary,
    .btn-sm,
    .btn-pill,
    .bb-btn-primary,
    .bb-btn-accent,
    .bb-btn-premium,
    .search-btn,
    .msb-btn,
    .refresh-btn,
    .btn-export,
    .widget-add-btn,
    .type-card-action,
    .settings-arl-btn,
    .btn-modal,
    .system-modal-btn,
    .copy-btn,
    .category-btn,
    .cat-tab,
    .btn-app,
    .btn-create-type,
    .dashboard-edit-btn,
    .server-required-link,
    .wallet-promo-btn,
    .cookie-btn,
    .tour-btn-back,
    .tour-btn-next,
    .tour-btn-skip,
    .welcome-btn-next,
    .welcome-btn-skip,
    .pl-ai-btn,
    .pl-ai-add-all
) {
    min-height: var(--control-h-md) !important;
    padding: 0 var(--control-px-md) !important;
    border-radius: var(--control-radius) !important;
    font-family: var(--font-ui);
    font-size: var(--text-md) !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--control-gap);
    border: 1px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--control-transition);
}

:is(.main-content, .app-container) :is(
    .btn-sm,
    .btn-text,
    .copy-btn,
    .cat-tab,
    .btn-app,
    .btn-create-type,
    .settings-arl-btn.clear,
    .pl-ai-btn,
    .pl-ai-add-all
) {
    min-height: var(--control-h-sm) !important;
    padding: 0 var(--control-px-sm) !important;
    border-radius: var(--control-radius-sm) !important;
    font-size: var(--text-sm) !important;
}

:is(.main-content, .app-container) :is(
    .btn,
    .btn-secondary,
    .btn-sm,
    .btn-pill,
    .btn-outline,
    .btn-tertiary,
    .btn-text,
    .submit-btn-secondary,
    .refresh-btn,
    .btn-export,
    .widget-add-btn,
    .copy-btn,
    .category-btn,
    .cat-tab,
    .btn-app,
    .btn-create-type,
    .cookie-btn-secondary,
    .tour-btn-back,
    .tour-btn-skip,
    .welcome-btn-skip,
    .system-modal-btn-secondary,
    .dashboard-edit-btn,
    .server-required-link
) {
    background: var(--surface-control);
    color: var(--text);
    border-color: var(--border);
    box-shadow: none;
}

:is(.main-content, .app-container) :is(
    .btn:hover,
    .btn-secondary:hover,
    .btn-sm:hover,
    .btn-outline:hover,
    .btn-tertiary:hover,
    .btn-text:hover,
    .submit-btn-secondary:hover,
    .refresh-btn:hover,
    .btn-export:hover,
    .widget-add-btn:hover,
    .copy-btn:hover,
    .category-btn:hover,
    .cat-tab:hover,
    .btn-app:hover,
    .btn-create-type:hover,
    .cookie-btn-secondary:hover,
    .tour-btn-back:hover,
    .tour-btn-skip:hover,
    .welcome-btn-skip:hover,
    .system-modal-btn-secondary:hover,
    .dashboard-edit-btn:hover,
    .server-required-link:hover
) {
    background: var(--surface-control-hover);
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: none;
    transform: none;
    filter: none;
}

:is(.main-content, .app-container) :is(
    .btn-primary,
    .bb-btn-primary,
    .submit-btn,
    .search-btn,
    .msb-btn,
    .btn-pill.primary,
    .cookie-btn-primary,
    .welcome-btn-next,
    .tour-btn-next,
    .type-card-action.configure,
    .settings-arl-btn.save,
    .system-modal-btn-primary
) {
    background: var(--primary);
    color: #f2f5fa;
    border-color: transparent;
}

:is(.main-content, .app-container) :is(
    .btn-primary:hover,
    .bb-btn-primary:hover,
    .submit-btn:hover,
    .search-btn:hover,
    .msb-btn:hover,
    .btn-pill.primary:hover,
    .cookie-btn-primary:hover,
    .welcome-btn-next:hover,
    .tour-btn-next:hover,
    .type-card-action.configure:hover,
    .settings-arl-btn.save:hover,
    .system-modal-btn-primary:hover
) {
    background: var(--primary-light);
    color: #071018;
    border-color: transparent;
    box-shadow: var(--button-shadow-primary);
    transform: none;
    filter: none;
}

:is(.main-content, .app-container) :is(.bb-btn-accent) {
    background: var(--accent-gradient);
    color: #f2f5fa;
    border-color: transparent;
}

:is(.main-content, .app-container) :is(.bb-btn-premium, .btn-premium, .btn-upgrade, .upgrade-btn) {
    background: var(--premium-gradient);
    color: #1a1a2e;
    border-color: transparent;
    box-shadow: var(--button-shadow-premium);
}

:is(.main-content, .app-container) :is(
    .btn-danger,
    .btn-danger-outline,
    .btn-pill.danger,
    .settings-arl-btn.clear,
    .system-modal-btn-danger,
    .btn-revoke
) {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-hi);
    border-color: rgba(239, 68, 68, 0.32);
}

:is(.main-content, .app-container) :is(
    .btn-danger:hover,
    .btn-danger-outline:hover,
    .btn-pill.danger:hover,
    .settings-arl-btn.clear:hover,
    .system-modal-btn-danger:hover,
    .btn-revoke:hover
) {
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.46);
    box-shadow: none;
}

:is(.main-content, .app-container) :is(.btn-success, .system-modal-btn-success, .btn-grant, .btn-music-on) {
    background: rgba(16, 185, 129, 0.14);
    color: var(--success-hi);
    border-color: rgba(16, 185, 129, 0.34);
}

:is(.main-content, .app-container) :is(.btn-music-off) {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.58);
    border-color: var(--border);
}

:is(.main-content, .app-container) :is(
    .search-clear,
    .np-btn,
    .queue-action-btn,
    .search-result-add,
    .pl-modal-close,
    .modal-close,
    .profile-card-close,
    .mobile-menu-btn
) {
    width: var(--icon-btn-md) !important;
    min-width: var(--icon-btn-md) !important;
    height: var(--icon-btn-md) !important;
    min-height: var(--icon-btn-md) !important;
    padding: 0 !important;
    border-radius: var(--control-radius) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:is(.main-content, .app-container) .np-btn {
    border-radius: var(--radius-chip) !important;
}

:is(.main-content, .app-container) .np-btn.primary {
    width: var(--icon-btn-lg) !important;
    min-width: var(--icon-btn-lg) !important;
    height: var(--icon-btn-lg) !important;
    min-height: var(--icon-btn-lg) !important;
}

/* Only actual controls get the control-box treatment. .field-control and
   .setting-control are layout WRAPPERS (e.g. moderation.css gives .field-control
   `display:flex; gap:10px` to sit an input next to a unit label) — boxing them
   here put a box around every toggle/input and a second box around the inputs
   inside. Let each inner control be its own single box. */
:is(.main-content, .app-container) :is(.bbsel-trigger, .mod-picker-trigger) {
    min-height: var(--control-h-md) !important;
    padding: 0 var(--control-px-md) !important;
    border-radius: var(--control-radius) !important;
    background: var(--surface-control);
    border: 1px solid var(--border);
    font-size: var(--text-md) !important;
    font-family: var(--font-ui);
}

:is(.main-content, .app-container) :is(.bbsel-panel, .mod-picker-panel, .search-results) {
    border-radius: var(--radius-tile);
}

:is(.main-content, .app-container) :is(.bbsel-option, .mod-picker-opt) {
    min-height: var(--control-h-sm);
    border-radius: var(--control-radius-sm);
    font-size: var(--text-sm);
}

:is(.main-content, .app-container) :is(.filter-tabs, .cat-tabs, .time-selector, .music-tab-bar, .music-tabs) {
    min-height: var(--control-h-lg);
    border-radius: var(--radius-tile);
    background: var(--surface-control);
    border: 1px solid var(--border);
}

:is(.main-content, .app-container) :is(.filter-tab, .music-tab, .cat-tab, .time-btn) {
    min-height: 38px !important;
    padding: 0 var(--control-px-md) !important;
    border-radius: var(--control-radius-sm) !important;
    font-size: var(--text-md) !important;
    font-weight: 700;
    letter-spacing: 0;
}

:is(.main-content, .app-container) :is(
    .bb-card,
    .card,
    .dash-card,
    .bento-card,
    .command-card,
    .profile-card,
    .premium-card,
    .premium-status-card,
    .premium-upgrade-card,
    .admin-tool-card,
    .success-card,
    .update-card,
    .step-card,
    .why-card,
    .faq-card,
    .crosslink-card,
    .permissions-panel,
    .users-panel,
    .home-signal-panel,
    .mod-panel,
    .settings-section,
    .feature-card,
    .type-card,
    .server-card,
    .marketplace-card,
    .app-card,
    .widget-card,
    .stat-card,
    .wallet-balance-card,
    .stats-bar,
    .table-container,
    .featured-card,
    .pl-card,
    .rule-item,
    .preset-card,
    .warning-row,
    .kw-toggle,
    .keywords-form,
    .upload-zone,
    .server-required-card
) {
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    background: var(--surface-panel);
}

:is(.main-content, .app-container) :is(
    .type-card,
    .server-card,
    .feature-card,
    .app-card,
    .widget-card,
    .stat-card,
    .featured-card,
    .pl-card,
    .mod-panel,
    .admin-tool-card
) {
    padding: var(--card-pad-md);
}

:is(.main-content, .app-container) :is(.dash-card-header, .card-header, .pl-modal-header, .modal-header) {
    min-height: 62px;
    padding: var(--card-header-pad-y) var(--card-header-pad-x);
}

:is(.main-content, .app-container) :is(.dash-card-body, .card-body, .pl-modal-body, .modal-body) {
    padding: var(--card-pad-lg);
}

:is(.main-content, .app-container) :is(.dash-card-title, .card-title, .type-card-title, .pl-modal-header h3) {
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.25;
}

:is(.main-content, .app-container) :is(
    .bb-chip,
    .status-chip,
    .badge,
    .admin-badge,
    .owner-badge,
    .role-badge,
    .save-badge,
    .profile-badge,
    .streak-badge,
    .server-badge,
    .premium-badge,
    .premium-trial-badge,
    .source-badge,
    .queue-count-chip,
    .filter-tab-count,
    .count-badge,
    .pl-tag-chip,
    .row-status,
    .hero-stat,
    .market-chip,
    .featured-pill,
    .meta-chip
) {
    border-radius: var(--radius-chip);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
}

:is(.main-content, .app-container) :is(.table-container thead th) {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
}

:is(.main-content, .app-container) :is(.table-container tbody td) {
    font-size: var(--text-md);
}

:is(.main-content, .app-container) :is(.modal-content, .pl-modal, .system-modal-card) {
    border-radius: var(--radius-card);
    background: var(--surface-panel-strong);
    border: 1px solid var(--border-strong);
}

:is(.main-content, .app-container) :is(button:focus-visible, a:focus-visible, [role='button']:focus-visible) {
    outline: none;
    box-shadow: var(--focus-ring);
}

:is(.main-content, .app-container) :is(.btn-danger:focus-visible, .btn-revoke:focus-visible, .system-modal-btn-danger:focus-visible) {
    box-shadow: var(--focus-ring-danger);
}

@media (max-width: 768px) {
    .main-content .page-header h1,
    .app-container .page-header h1,
    .main-content .music-page-top h1,
    .app-container .music-page-top h1,
    .main-content .header-title-block h1,
    .app-container .header-title-block h1 {
        font-size: var(--text-page-mobile);
    }

    .main-content .page-header p,
    .app-container .page-header p,
    .main-content .music-page-top p,
    .app-container .music-page-top p,
    .main-content .header-title-block p,
    .app-container .header-title-block p {
        font-size: var(--text-xl);
    }
}

@media (max-width: 600px) {
    :is(.main-content, .app-container) :is(.bb-toolbar, .toolbar) {
        align-items: stretch;
    }

    :is(.main-content, .app-container) :is(
        .btn,
        .btn-primary,
        .btn-secondary,
        .btn-danger,
        .btn-success,
        .search-btn,
        .msb-btn,
        .refresh-btn,
        .btn-export,
        .btn-add-widget,
        .system-modal-btn,
        .dashboard-edit-btn,
        .server-required-link
    ) {
        width: 100%;
        min-height: var(--control-h-lg) !important;
    }

    :is(.main-content, .app-container) :is(.filter-tabs, .music-tabs, .music-tab-bar) {
        width: 100%;
    }

    :is(.main-content, .app-container) :is(.dash-card-body, .card-body, .pl-modal-body, .modal-body) {
        padding: var(--card-pad-md);
    }
}