/* ==========================================================================
   Voice Link — Creator Dashboard

   dashboard.css
   - global theme tokens and surfaces
   - sidebar, header, toolbar and main layout
   - base Voice list/media styling
   - playlist, settings, auth and general responsive rules

   Voice-list action buttons and pagination live in dashboard-controls.css.
   Keep feature-specific controls there so this file remains the visual template.
   ========================================================================== */

@import "dashboard-controls.css";
:root {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: light;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .56; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Theme tokens
   -------------------------------------------------------------------------- */

.dashboard-app {
    --bg: #eef3fa;
    --bg-2: #f8fbff;
    --surface: rgba(255,255,255,.78);
    --surface-strong: rgba(255,255,255,.93);
    --surface-solid: #f8fbff;
    --surface-muted: #edf3fb;

    --text: #172033;
    --text-soft: #42506a;
    --muted: #7c8aa3;

    --accent: #4169e1;
    --accent-2: #6e55e7;
    --accent-soft: #e9efff;
    --accent-soft-2: #f0ebff;

    --success: #36af78;
    --warning: #e2a23a;
    --danger: #ef6671;

    --line: rgba(66,83,118,.12);
    --line-strong: rgba(66,83,118,.18);

    --shadow-card: 0 8px 22px rgba(63,82,118,.07), 0 1px 4px rgba(63,82,118,.04);
    --shadow-float: 0 7px 18px rgba(52,70,108,.10), 0 1px 4px rgba(52,70,108,.05);
    --shadow-control: 0 3px 9px rgba(57,78,116,.07);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,.78), inset 0 0 0 1px rgba(255,255,255,.28);

    --sidebar-w: 246px;
    --radius-xl: 7px;
    --radius-lg: 7px;
    --radius-md: 6px;
    --radius-sm: 5px;

    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 78% -10%, rgba(102,126,235,.18), transparent 27%),
        radial-gradient(circle at 12% 88%, rgba(137,191,255,.16), transparent 30%),
        linear-gradient(135deg, var(--bg-2), var(--bg));
}

.dashboard-app[data-theme="dark"] {
    color-scheme: dark;

    --bg: #080b11;
    --bg-2: #0c1019;
    --surface: rgba(11,16,25,.64);
    --surface-strong: rgba(14,20,31,.78);
    --surface-solid: #0e141e;
    --surface-muted: #121a27;

    --text: #f0f4fb;
    --text-soft: #c2cbdb;
    --muted: #8793a8;

    --accent: #7897ff;
    --accent-2: #a382ff;
    --accent-soft: rgba(97,126,232,.17);
    --accent-soft-2: rgba(154,125,255,.14);

    --success: #55c894;
    --warning: #e8b257;
    --danger: #ff7b86;

    --line: rgba(150,164,186,.075);
    --line-strong: rgba(164,178,200,.115);

    --shadow-card: 0 12px 30px rgba(0,0,0,.34), 0 1px 6px rgba(0,0,0,.22);
    --shadow-float: 0 12px 28px rgba(0,0,0,.40), 0 1px 6px rgba(0,0,0,.24);
    --shadow-control: 0 5px 14px rgba(0,0,0,.28);
    --shadow-inset: inset 0 1px 0 rgba(210,222,240,.045), inset 0 0 0 1px rgba(155,170,194,.018);

    background:
        radial-gradient(circle at 76% -8%, rgba(93,108,219,.12), transparent 30%),
        radial-gradient(circle at 6% 92%, rgba(69,139,207,.075), transparent 30%),
        linear-gradient(145deg, #0c1019, #080b11 58%, #06090e);
}

/* --------------------------------------------------------------------------
   Shared surfaces
   -------------------------------------------------------------------------- */

.soft-card {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card), var(--shadow-inset);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.soft-control {
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-control), var(--shadow-inset);
}

.soft-inset {
    background: color-mix(in srgb, var(--surface-muted) 88%, transparent);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 2px rgba(50,70,104,.05);
}

.dashboard-app[data-theme="dark"] .soft-inset {
    box-shadow: inset 0 1px 4px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.sidebar {
    position: fixed;
    inset: 8px auto 8px 8px;
    width: var(--sidebar-w);
    padding: 12px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;

    background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(247,250,255,.72));
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(72,88,121,.10), 0 1px 4px rgba(72,88,121,.05);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.dashboard-app[data-theme="dark"] .sidebar {
    background:
        linear-gradient(180deg, rgba(10,15,23,.76), rgba(7,11,18,.68));
    border-color: rgba(156,170,192,.075);
    box-shadow: 0 14px 34px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter: blur(30px) saturate(175%);
    -webkit-backdrop-filter: blur(30px) saturate(175%);
}

/* AirInbox brand */

.airinbox-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.airinbox-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-size: 19px;
    line-height: 1;
    font-weight: 580;
    letter-spacing: -0.035em;
}

.airinbox-air {
    color: var(--text);
}

.airinbox-inbox {
    color: var(--accent);
}

.airinbox-brand .brand-slot {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

.airinbox-brand .brand-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


.profile-summary {
    width: 100%;
    min-height: 52px;
    padding: 6px;
    display: grid;
    grid-template-columns: 36px 1fr 16px;
    align-items: center;
    gap: 7px;
    text-align: left;
    color: var(--text);
    border-radius: 7px;
    transition: .18s ease;
}

.profile-summary:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
}

.profile-summary.active {
    background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2));
    border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--surface-muted);
    border: 1px solid rgba(255,255,255,.45);
}

.dashboard-app[data-theme="dark"] .profile-avatar { border-color: var(--line); }

.profile-copy { min-width: 0; }
.profile-copy strong,
.profile-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-copy strong { font-size: 13px; }
.profile-copy small { color: var(--muted); margin-top: 3px; font-size: 11px; }
.profile-chevron { color: var(--muted); font-size: 20px; }

.sidebar-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-heading-row {
    min-height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
}

.sidebar-heading {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.inbox-nav {
    display: grid;
    gap: 6px;
    overflow: auto;
    padding: 2px 0 8px;
}

.inbox-nav-item {
    width: 100%;
    min-height: 48px;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: 8px 1fr;
    align-items: center;
    gap: 9px;
    color: var(--text);
    text-align: left;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    transition: .16s ease;
}

.inbox-nav-item:hover {
    background: color-mix(in srgb, var(--surface-muted) 60%, transparent);
}

.inbox-nav-item.active {
    position: relative;
    color: var(--text);
    background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2));
    border-color: color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.inbox-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent);
}
.inbox-dot.off { background: #9aa7b8; box-shadow: none; }

.inbox-nav-copy { min-width: 0; }
.inbox-nav-copy strong,
.inbox-nav-copy small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.inbox-nav-copy strong { font-size: 12px; }
.inbox-nav-copy small {
    color: var(--muted);
    margin-top: 2px;
    font-size: 10px;
    text-transform: capitalize;
}
.sidebar-empty { padding: 12px; color: var(--muted); }

.sidebar-bottom {
    margin-top: auto;
    display: grid;
    gap: 7px;
    font-size: 13px;
}

.sidebar-action {
    min-height: 43px;
    padding: 10px 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text);
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    transition: .16s ease;
}

.sidebar-action:hover {
    background: color-mix(in srgb, var(--surface-muted) 58%, transparent);
}

.sidebar-action.active {
    background: linear-gradient(135deg, var(--accent-soft), var(--accent-soft-2));
    border-color: color-mix(in srgb, var(--accent) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.round-icon-button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
    box-shadow: var(--shadow-control);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.round-icon-button:hover {
    transform: translateY(-1px);
    border-color: var(--line-strong);
}
.round-icon-button:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Main content
   -------------------------------------------------------------------------- */

.dashboard-main {
    margin-left: calc(var(--sidebar-w) + 12px);
    min-height: 100vh;
    padding: 14px clamp(12px, 2vw, 24px) 22px;
}

.dashboard-content {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    gap: 8px;
}
.panel-view { width: 100%; }

/* --------------------------------------------------------------------------
   Header / inbox overview
   -------------------------------------------------------------------------- */

.inbox-header-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(280px,1.05fr) minmax(520px,1.45fr);
    gap: 8px;
    align-items: center;
}

.inbox-header-card::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -95px;
    top: -135px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%);
}

.eyebrow {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.editable-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 7px;
}

.title-input {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--text);
    font-size: clamp(24px,3vw,34px);
    line-height: 1.08;
    font-weight: 780;
    letter-spacing: -.035em;
}

.save-title-button { flex: 0 0 auto; }

.inbox-id-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    color: var(--muted);
}
.inbox-id-row code { font-size: 11px; }

.inbox-id-row .text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.inbox-id-row .text-button svg {
    flex-shrink: 0;
}

.text-button {
    border: 0;
    background: transparent;
    color: var(--accent);
    font-weight: 800;
    padding: 4px;
}

.inbox-controls-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px;
}

.setting-control,
.stat-box,
.switch-row {
    min-height: 72px;
    padding: 12px 13px;
    border-radius: 7px;
}

.setting-control > span,
.stat-box > span,
.switch-row > span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    margin-bottom: 7px;
}

.setting-control select,
.setting-control input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-weight: 750;
    font-size: 13px;
}
.stat-box strong { font-size: 22px; letter-spacing: -.025em; }
.switch-row { display: flex; align-items: center; justify-content: space-between; }
.switch-row > span { margin: 0; }
.switch-row input { width: 42px; height: 22px; accent-color: var(--accent); }

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */

.toolbar-card {
    border-radius: var(--radius-lg);
    padding: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.search-wrap {
    flex: 1;
    min-height: 44px;
    border-radius: 7px;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 9px 12px;
}
.search-wrap span { color: var(--muted); font-size: 18px; }
.search-wrap input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
}
.search-wrap input::placeholder { color: color-mix(in srgb, var(--muted) 82%, transparent); }

.primary-button,
.secondary-button {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 9px 14px;
    font-weight: 800;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.primary-button {
    color: white;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 25%, transparent);
}

.secondary-button {
    color: var(--text);
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
    border-color: var(--line);
    box-shadow: var(--shadow-control);
}

.primary-button:hover,
.secondary-button:hover { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Voice message list
   -------------------------------------------------------------------------- */

.voice-list-card {
    border-radius: var(--radius-xl);
    padding: 9px;
}

.voice-list-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    padding: 2px 4px 14px;
}
.voice-list-heading h2 {
    margin: 4px 0 0;
    font-size: 21px;
    letter-spacing: -.025em;
}
.voice-list-heading small { color: var(--muted); }

.voice-list { display: grid; gap: 5px; }

.voice-row {
    min-height: 64px;
    padding: 9px 10px;
    display: grid;
    gap: 7px;
    align-items: center;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 7px;
    background: rgba(255,255,255,.24);
    box-shadow: none;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.dashboard-app[data-theme="dark"] .voice-row {
    background: rgba(255,255,255,.018);
    backdrop-filter: blur(10px) saturate(135%);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
}

.voice-row:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--surface-strong) 76%, transparent);
    border-color: var(--line);
    box-shadow: 0 10px 22px rgba(52,70,108,.06);
}

.dashboard-app[data-theme="dark"] .voice-row:hover {
    box-shadow: 0 14px 32px rgba(0,0,0,.30);
}

.trust-star {
    border: 0;
    background: transparent;
    color: #aab4c3;
    font-size: 18px;
    padding: 4px;
}
.trust-star.active {
    color: var(--warning);
    text-shadow: 0 3px 10px color-mix(in srgb, var(--warning) 30%, transparent);
}

.voice-avatar {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--surface-muted);
}

.voice-sender strong,
.voice-sender small { display: block; }
.voice-sender strong { font-size: 13px; }
.voice-sender small { color: var(--muted); margin-top: 3px; font-size: 11px; }

.voice-play {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--accent);
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
    box-shadow: var(--shadow-control);
    transition: transform .16s ease, border-color .16s ease;
}
.voice-play:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }

.voice-play {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.voice-play-icon {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.voice-play.is-loading .voice-play-icon {
    opacity: 0;
}

.voice-play.is-loading::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-top-color: var(--accent);
    animation: voice-loading-spin .72s linear infinite;
}

@keyframes voice-loading-spin {
    to { transform: rotate(360deg); }
}

.voice-media {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.voice-waveform {
    position: relative;
    width: min(100%, var(--voice-wave-width, 190px));
    min-width: 110px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    flex: 0 1 auto;
}

.voice-wave-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}

.voice-wave-bar {
    flex: 1 1 0;
    min-width: 1px;
    height: max(3px, calc(var(--wave-amp, .2) * 30px));
    border-radius: 2px;
    background: color-mix(in srgb, var(--muted) 48%, transparent);
}

.voice-wave-progress {
    position: absolute;
    inset: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    clip-path: inset(0 calc(100% - var(--voice-progress, 0%)) 0 0);
    transition: clip-path .08s linear;
}

.voice-wave-played {
    width: 100%;
    min-width: 110px;
}

.voice-wave-played .voice-wave-bar {
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.voice-waveform:hover .voice-wave-base .voice-wave-bar {
    background: color-mix(in srgb, var(--accent) 30%, var(--muted));
}

.voice-duration {
    flex: 0 0 auto;
    min-width: 36px;
    color: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.voice-date {
    color: var(--muted);
    font-size: 11px;
    text-align: right;
}

.add-playlist-button {
    border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 7px;
    padding: 8px 10px;
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 800;
    font-size: 11px;
}

.empty-voices {
    text-align: center;
    padding: 58px 16px 48px;
    color: var(--muted);
}
.empty-voices strong { display: block; color: var(--text); margin-top: 14px; }
.empty-voices p { max-width: 520px; margin: 8px auto 0; line-height: 1.65; }
.empty-play-icon {
    width: 62px;
    height: 62px;
    margin: auto;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: linear-gradient(145deg, var(--accent-soft), var(--accent-soft-2));
    box-shadow: var(--shadow-control);
}

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

.settings-card {
    border-radius: var(--radius-xl);
    padding: 12px;
}
.settings-card h1 { margin: 8px 0 22px; letter-spacing: -.03em; }

.profile-large {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 22px 0;
}
.profile-large img {
    width: 80px;
    height: 80px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--surface-muted);
    box-shadow: var(--shadow-control);
}
.profile-large h1 { margin: 0; }
.profile-large p { margin: 6px 0 0; color: var(--muted); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}
.muted-note { color: var(--muted); line-height: 1.6; }
.settings-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}
.settings-row p { margin: 5px 0 0; color: var(--muted); }
.setting-value { color: var(--accent); font-weight: 800; }

/* --------------------------------------------------------------------------
   Playlist drawer
   -------------------------------------------------------------------------- */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(20,28,44,.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dashboard-app[data-theme="dark"] .drawer-backdrop { background: rgba(0,0,0,.44); }

.playlist-drawer {
    position: fixed;
    z-index: 40;
    inset: 16px 16px 16px auto;
    width: min(430px,calc(100vw - 32px));
    padding: 20px;
    display: flex;
    flex-direction: column;
    color: var(--text);
    background: var(--surface-strong);
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translateX(calc(100% + 40px));
    transition: transform .24s ease;
}
.playlist-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { margin: 4px 0 0; }
.playlist-items {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    overflow: auto;
    flex: 1;
    padding: 3px;
    align-content: start;
}
.playlist-item {
    max-height: 70px;
    border-radius: 7px;
    padding: 9px;
    display: grid;
    grid-template-columns: 42px 1fr 32px;
    gap: 7px;
    align-items: center;
    transition: .18s ease;
}
.playlist-item.is-played {
    opacity: .68;
    background: color-mix(in srgb,var(--surface-muted) 64%,transparent);
}
.playlist-item.is-playing {
    opacity: 1;
    background: linear-gradient(135deg,var(--accent-soft),var(--accent-soft-2));
    box-shadow: inset 3px 0 0 var(--accent);
}
.playlist-item img {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--surface-muted);
}
.playlist-item-main,
.remove-playlist {
    border: 0;
    background: transparent;
    color: var(--text);
}
.playlist-item-main { text-align: left; display: grid; gap: 3px; }
.playlist-item-main small { color: var(--muted); }
.remove-playlist { font-size: 20px; color: var(--muted); }
.drawer-empty { color: var(--muted); text-align: center; padding: 48px 16px; }

.playlist-controls {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    gap: 9px;
    margin-top: 14px;
}
.playlist-controls button,
.download-placeholder {
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 11px;
    color: var(--text);
    background: var(--surface-muted);
}
.playlist-controls .play-main {
    border-color: transparent;
    color: white;
    font-weight: 800;
    background: linear-gradient(135deg,var(--accent),var(--accent-2));
}
.download-placeholder { margin-top: 9px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Empty + auth states
   -------------------------------------------------------------------------- */

.dashboard-empty { max-width: 760px; margin: 12vh auto 0; }
.empty-card {
    padding: 34px;
    border-radius: var(--radius-xl);
    text-align: center;
}
.empty-card p { color: var(--muted); line-height: 1.6; }

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
}
.auth-gate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(231,239,248,.56);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.dashboard-app[data-theme="dark"] .auth-gate-backdrop { background: rgba(5,8,13,.68); }

.auth-gate-card {
    position: relative;
    width: min(470px,100%);
    padding: 32px;
    text-align: center;
    border-radius: 7px;
}
.auth-gate-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--accent-soft), var(--accent-soft-2));
    box-shadow: var(--shadow-control);
}
.auth-gate-icon svg { width: 34px; fill: #ff4e55; }
.auth-gate-copy h1 { margin: 8px 0 10px; font-size: 29px; letter-spacing: -.03em; }
.auth-gate-copy p {
    margin: 0 auto 24px;
    max-width: 360px;
    color: var(--muted);
    line-height: 1.65;
}
.auth-connect-button {
    width: 100%;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
}
.youtube-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff4e55;
    box-shadow: 0 0 0 4px rgba(255,78,85,.12);
}
.auth-status { margin-top: 14px; color: var(--muted); font-size: 13px; min-height: 20px; }
.auth-status.is-error { color: var(--danger); }

.dashboard-app[data-authenticated="false"] .sidebar,
.dashboard-app[data-authenticated="false"] .dashboard-main {
    pointer-events: none;
    user-select: none;
}


/* Dark-mode glass enhancement: visual-only overrides */
.dashboard-app[data-theme="dark"] .soft-card {
    background: rgba(11,16,25,.64);
    border-color: rgba(255,255,255,.09);
    backdrop-filter: blur(29px) saturate(175%);
    -webkit-backdrop-filter: blur(29px) saturate(175%);
}

.dashboard-app[data-theme="dark"] .soft-control {
    background: rgba(14,20,31,.62);
    backdrop-filter: blur(18px) saturate(155%);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.dashboard-app[data-theme="dark"] .soft-inset {
    background: rgba(18,26,39,.56);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* --------------------------------------------------------------------------
   Dark-specific polish
   -------------------------------------------------------------------------- */

.dashboard-app[data-theme="dark"] .primary-button {
    color: #f7f9ff;
}

.dashboard-app[data-theme="dark"] .secondary-button,
.dashboard-app[data-theme="dark"] .round-icon-button,
.dashboard-app[data-theme="dark"] .voice-play {
    background: rgba(255,255,255,.028);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.dashboard-app[data-theme="dark"] .search-wrap,
.dashboard-app[data-theme="dark"] .setting-control,
.dashboard-app[data-theme="dark"] .stat-box,
.dashboard-app[data-theme="dark"] .switch-row {
    background: rgba(255,255,255,.020);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.dashboard-app[data-theme="dark"] select option {
    background: #0e141e;
    color: var(--text);
}


/* --------------------------------------------------------------------------
   Voice Link — refined dark glass pass
   Subtle borders + localized glass reflections; dark mode only.
   -------------------------------------------------------------------------- */
.dashboard-app[data-theme="dark"] .soft-card,
.dashboard-app[data-theme="dark"] .sidebar,
.dashboard-app[data-theme="dark"] .playlist-drawer,
.dashboard-app[data-theme="dark"] .auth-gate-card {
    border-color: rgba(150,164,186,.075);
}

.dashboard-app[data-theme="dark"] .soft-card {
    position: relative;
    background:
        linear-gradient(135deg, rgba(205,220,244,.032) 0%, transparent 22%),
        linear-gradient(315deg, rgba(118,151,214,.018) 0%, transparent 24%),
        rgba(9,14,22,.61);
    box-shadow:
        var(--shadow-card),
        inset 0 1px 0 rgba(218,228,245,.042),
        inset 1px 0 0 rgba(196,211,234,.018);
    backdrop-filter: blur(30px) saturate(165%);
    -webkit-backdrop-filter: blur(30px) saturate(165%);
}

.dashboard-app[data-theme="dark"] .sidebar {
    background:
        linear-gradient(135deg, rgba(213,225,244,.038) 0%, transparent 18%),
        linear-gradient(180deg, rgba(9,14,22,.72), rgba(6,10,16,.66));
    box-shadow:
        0 14px 34px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(220,230,246,.045),
        inset 1px 0 0 rgba(188,205,231,.018);
    backdrop-filter: blur(31px) saturate(168%);
    -webkit-backdrop-filter: blur(31px) saturate(168%);
}

.dashboard-app[data-theme="dark"] .soft-control,
.dashboard-app[data-theme="dark"] .soft-inset {
    border-color: rgba(150,164,186,.065);
    box-shadow:
        var(--shadow-control),
        inset 0 1px 0 rgba(210,222,240,.032);
}

.dashboard-app[data-theme="dark"] .voice-row {
    border-color: transparent;
}

.dashboard-app[data-theme="dark"] .voice-row:hover {
    border-color: rgba(150,164,186,.075);
}

.dashboard-app[data-theme="dark"] .round-icon-button,
.dashboard-app[data-theme="dark"] .voice-play,
.dashboard-app[data-theme="dark"] .secondary-button {
    border-color: rgba(150,164,186,.07);
}

.dashboard-app[data-theme="dark"] .round-icon-button:hover,
.dashboard-app[data-theme="dark"] .voice-play:hover,
.dashboard-app[data-theme="dark"] .secondary-button:hover {
    border-color: rgba(164,178,200,.11);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .dashboard-app { --sidebar-w: 228px; }
    .sidebar { inset: 10px auto 10px 10px; }
    .dashboard-main {
        margin-left: calc(var(--sidebar-w) + 12px);
        padding: 14px clamp(12px, 2vw, 24px) 22px;
    }
    .inbox-header-card { grid-template-columns: 1fr; }
    .inbox-controls-grid { grid-template-columns: repeat(4,minmax(110px,1fr)); }
}

@media (max-width: 860px) {
    .inbox-controls-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
    .dashboard-app { --sidebar-w: 100%; }

    .sidebar {
        position: relative;
        inset: auto;
        width: calc(100% - 20px);
        margin: 10px;
        min-height: auto;
        border-radius: 7px;
        padding: 12px;
    }

    .inbox-nav {
        grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    }

    .sidebar-bottom {
        grid-template-columns: 1fr 1fr;
        margin-top: 4px;
    }

    .dashboard-main {
        margin-left: 0;
        padding: 14px clamp(12px, 2vw, 24px) 22px;
    }

    .inbox-header-card,
    .voice-list-card,
    .settings-card { border-radius: 7px; padding: 12px; }

    .toolbar-card {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid { grid-template-columns: 1fr; }
}


@media (max-width: 520px) {
    .sidebar-bottom { grid-template-columns: 1fr; }
    .inbox-controls-grid { grid-template-columns: 1fr 1fr; }
    .title-input { font-size: 22px; }
    .profile-large { align-items: flex-start; }
    .settings-row { flex-direction: column; gap: 8px; }
    .playlist-drawer { inset: 8px; width: auto; }
}

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


/* --------------------------------------------------------------------------
   Refined compact pass
   - max 7px corners on structural UI
   - tighter rhythm and lighter visual weight
   -------------------------------------------------------------------------- */
.dashboard-app {
    --radius-xl: 7px;
    --radius-lg: 7px;
    --radius-md: 6px;
    --radius-sm: 5px;
}

/* keep only true round UI elements circular */
.inbox-dot,
.youtube-dot,
.switch-row input,
.trust-star {
    border-radius: 999px;
}

.sidebar,
.soft-card,
.soft-control,
.soft-inset,
.profile-summary,
.inbox-nav-item,
.sidebar-action,
.inbox-header-card,
.toolbar-card,
.search-wrap,
.setting-control,
.stat-box,
.switch-row,
.primary-button,
.secondary-button,
.voice-list-card,
.voice-row,
.add-playlist-button,
.settings-card,
.playlist-drawer,
.playlist-item,
.auth-gate-card,
.download-placeholder {
    border-radius: 7px !important;
}

.brand-mark,
.round-icon-button,
.voice-play {
    border-radius: 6px !important;
}

.profile-avatar,
.voice-avatar,
.playlist-item img,
.profile-large img {
    border-radius: 7px !important;
}

.inbox-nav { gap: 3px; }
.sidebar-section { gap: 5px; }
.sidebar-bottom { gap: 5px; }
.inbox-controls-grid { gap: 5px; }
.form-grid { gap: 8px; }
.playlist-items { gap: 5px; }
.playlist-controls { gap: 6px; }

.inbox-nav-item { padding: 7px 8px; min-height: 40px; }
.sidebar-action { padding: 8px 9px; min-height: 40px; }
.setting-control, .stat-box, .switch-row { padding: 8px 9px; min-height: 50px; }
.search-wrap { padding: 7px 9px; }
.primary-button, .secondary-button { padding: 8px 11px; }
.voice-row { padding: 7px 8px; min-height: 54px; }

.voice-row:hover,
.profile-summary:hover {
    transform: none;
}

@media (max-width: 760px) {
    .sidebar { inset: auto; border-radius: 0 !important; }
    .dashboard-main { padding: 8px; }
}


/* ============================================================
   AirInbox refined header and sidebar — October 2026
   Preserve existing JS IDs and dark/light theme tokens.
   ============================================================ */
.dashboard-app .inbox-header-card {
    grid-template-columns: minmax(350px, 1fr) minmax(330px, .88fr);
    gap: 16px;
    padding: 13px 15px;
}
.dashboard-app .editable-title-row { margin-top: 5px; gap: 7px; }
.dashboard-app .title-input {
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 580;
    line-height: 1.2;
    letter-spacing: -.028em;
}
.dashboard-app .save-title-button { width: 30px; height: 30px; }
.dashboard-app .inbox-id-row { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.dashboard-app .inbox-id-chip,
.dashboard-app .inbox-id-row #copyInboxIdBtn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line));
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
    color: var(--accent);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}
.dashboard-app .inbox-id-row #copyInboxIdBtn { gap: 7px; }
.dashboard-app .inbox-id-row #copyInboxIdBtn:hover { border-color: var(--accent); }
.dashboard-app .inbox-id-row #resetInboxBtn {
    min-height: 32px;
    padding: 4px 7px;
    font-size: 11px;
    font-weight: 550;
    color: var(--danger);
    white-space: nowrap;
}
.dashboard-app .inbox-controls-grid {
    display: grid;
    grid-template-columns: minmax(155px, 1fr) minmax(160px, 1.12fr);
    gap: 8px;
    align-items: stretch;
}
.dashboard-app .inbox-controls-grid .setting-control,
.dashboard-app .inbox-controls-grid .inbox-stats-stack {
    min-height: 74px;
    padding: 9px 11px;
    border-radius: 7px;
}
.dashboard-app .inbox-controls-grid .setting-control { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.dashboard-app .inbox-controls-grid .setting-control > .control-label { margin: 0; }
.dashboard-app .control-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}
.dashboard-app .control-symbol { display: inline-flex; justify-content: center; width: 18px; color: var(--accent); font-size: 16px; }
.dashboard-app .status-symbol { color: var(--success); }
.dashboard-app .inbox-controls-grid .setting-control select {
    height: 25px;
    padding: 0 2px 0 25px;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}
.dashboard-app .inbox-stats-stack { display: grid; grid-template-rows: 1fr 1fr; }
.dashboard-app .inbox-stat-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.dashboard-app .inbox-stat-line + .inbox-stat-line { border-top: 1px solid var(--line); }
.dashboard-app .inbox-stat-line strong { color: var(--text); font-size: 14px; font-weight: 650; }
.dashboard-app .inbox-stat-line input { margin: 0; width: 37px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.dashboard-app .sidebar-bottom { gap: 3px; }
.dashboard-app .sidebar-bottom .sidebar-action { min-height: 38px; padding: 7px 10px; }
.dashboard-app #themeToggle { min-height: 33px; font-size: 12px; color: var(--text-soft); }
.dashboard-app #themeIcon { font-size: 16px; }
.dashboard-app .sidebar-logout {
    display: flex; align-items: center; gap: 8px;
    width: 100%; min-height: 29px;
    padding: 5px 10px; border: 0; border-radius: 5px;
    background: transparent; color: var(--danger);
    text-align: left; font-size: 11px; font-weight: 600;
}
.dashboard-app .sidebar-logout:hover { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.dashboard-app .sidebar-logout span { font-size: 17px; line-height: 1; }
.dashboard-app .sidebar-heading-row { gap: 5px; }
.dashboard-app .sidebar-heading-row .round-icon-button { width: 29px; height: 29px; flex-shrink: 0; }
.dashboard-app .sidebar-heading-row .create-inbox-preview:disabled {
    opacity: .6; display:none;}
@media (max-width: 1180px) {
    .dashboard-app .inbox-header-card { grid-template-columns: 1fr; }
    .dashboard-app .inbox-controls-grid { max-width: 570px; }
}
@media (max-width: 520px) {
    .dashboard-app .inbox-header-card { padding: 12px; }
    .dashboard-app .inbox-controls-grid { grid-template-columns: minmax(0,1fr); max-width: none; }
}