body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--app-bg);
            color: var(--app-text);
        }
        [data-theme] .bg-ink-950 { background-color: var(--app-bg) !important; }
        [data-theme] .bg-ink-950\/90 { background-color: var(--overlay) !important; }
        [data-theme] .bg-ink-900, [data-theme] .bg-ink-900\/80 { background-color: var(--app-panel) !important; }
        [data-theme] .bg-ink-800, [data-theme] .bg-ink-800\/40, [data-theme] .bg-ink-800\/50 { background-color: var(--app-field) !important; }
        [data-theme] .text-white, [data-theme] .text-slate-100, [data-theme] .text-slate-200 { color: var(--app-text) !important; }
        [data-theme] .bg-accent.text-white { color: var(--app-on-accent) !important; }
        [data-theme] .text-slate-300, [data-theme] .text-slate-400 { color: var(--app-muted) !important; }
        [data-theme] .text-slate-500, [data-theme] .text-slate-600, [data-theme] .text-slate-700 { color: var(--app-dim) !important; }
        [data-theme] .border-white\/5 { border-color: var(--app-border-soft) !important; }
        [data-theme] .border-white\/10 { border-color: var(--app-border) !important; }
        [data-theme] .shadow-card { box-shadow: var(--shadow) !important; }
        [data-theme] .text-accent, [data-theme] .text-accent-glow { color: var(--app-accent) !important; }
        [data-theme] .bg-accent { background-color: var(--app-accent) !important; }
        [data-theme] .text-mint { color: var(--app-success) !important; }
        [data-theme] .bg-mint { background-color: var(--app-success) !important; }
        [data-theme] .text-red-300, [data-theme] .text-red-400 { color: var(--app-error) !important; }
        [data-theme] .bg-red-400 { background-color: var(--app-error) !important; }
        [data-theme] .bg-red-950\/50 { background-color: color-mix(in srgb, var(--app-error) 10%, transparent) !important; }
        [data-theme] .border-red-500\/20 { border-color: color-mix(in srgb, var(--app-error) 45%, transparent) !important; }
        [data-theme] .bg-slate-600 { background-color: var(--app-dim) !important; }
        [data-theme] .hover\:bg-accent-dim:hover { background-color: var(--accent-strong) !important; }
        [data-theme] .focus\:ring-accent\/50:focus { --tw-ring-color: var(--focus) !important; }
        select { color: var(--app-text); background: var(--app-field); border-color: var(--app-border); }
        .mesh-bg {
            background-image:
                radial-gradient(ellipse 80% 50% at 50% -20%, color-mix(in srgb, var(--app-accent) 18%, transparent), transparent),
                radial-gradient(ellipse 60% 40% at 100% 0%, color-mix(in srgb, var(--app-success) 8%, transparent), transparent),
                radial-gradient(ellipse 50% 30% at 0% 100%, color-mix(in srgb, var(--chart-2) 10%, transparent), transparent);
        }
        /* Grid children must be allowed to shrink below their intrinsic content width. */
        #dashboardApp .grid > * { min-width: 0; }
        .chart-container { height: 280px; width: 100%; }
        @media (min-width: 768px) { .chart-container { height: 320px; } }
        [data-panel-state="empty"] > .chart-container,
        [data-panel-state="empty"] > .chart-container.ranking-table {
            height: 9.5rem;
            min-height: 9.5rem;
        }
        .panel-error {
            color: var(--app-error);
        }
        .panel-inline-error {
            margin-bottom: 0.75rem;
            color: var(--app-error);
            font-size: 0.8125rem;
        }
        #historyTableWrap[data-panel-state="empty"],
        #historyTableWrap[data-panel-state="error"],
        #historyTableWrap[data-panel-state="loading"] {
            min-height: 12rem;
        }
        #historyTableWrap[data-panel-state="empty"] table,
        #historyTableWrap[data-panel-state="error"] table,
        #historyTableWrap[data-panel-state="loading"] table {
            visibility: hidden;
        }
        /* Ranking cards grow with their variable-height rows. */
        .chart-container.ranking-table { height: auto; min-height: 280px; }
        @media (min-width: 768px) { .chart-container.ranking-table { min-height: 320px; } }
        .pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.85); }
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        [data-motion="reduced"] *,
        [data-motion="reduced"] *::before,
        [data-motion="reduced"] *::after {
            scroll-behavior: auto !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
        .skeleton {
            background: linear-gradient(90deg, var(--surface-raised) 25%, var(--field-bg) 50%, var(--surface-raised) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s ease-in-out infinite;
            border-radius: 0.5rem;
        }
        .truncate-cell { max-width: 12rem; }
        @media (min-width: 768px) { .truncate-cell { max-width: 16rem; } }
        .stat-value { font-variant-numeric: tabular-nums; }

        .now-playing-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border: 1px solid var(--app-border);
            border-radius: 0.75rem;
            background: color-mix(in srgb, var(--app-field) 40%, transparent);
            padding: 0.75rem 1rem;
        }
        .now-playing-icon {
            display: flex;
            width: 2.25rem;
            height: 2.25rem;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            background: color-mix(in srgb, var(--app-success) 10%, transparent);
            color: var(--app-success);
        }
        .now-playing-meta { min-width: 0; flex: 1 1 0; }
        .now-playing-title-row { display: flex; min-width: 0; align-items: baseline; gap: 0.5rem; }
        .now-playing-title,
        .now-playing-artist,
        .now-playing-client,
        .now-playing-client-label,
        .now-playing-user {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .now-playing-title { color: var(--app-text); font-size: 0.875rem; font-weight: 500; }
        .now-playing-artist { color: var(--app-dim); font-size: 0.75rem; }
        .now-playing-subrow {
            display: flex;
            min-width: 0;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.125rem;
            color: var(--app-dim);
            font-size: 0.75rem;
        }
        .now-playing-client { display: inline-flex; min-width: 0; align-items: center; gap: 0.25rem; }
        .now-playing-client-glyph { color: var(--app-dim); }
        .now-playing-separator { color: var(--app-border); }
        .now-playing-elapsed {
            flex: 0 0 auto;
            color: var(--app-success);
            font: 500 0.875rem "SF Mono", ui-monospace, monospace;
        }

        .ranking-table {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 0.5rem;
            align-content: start;
        }
        .ranking-row {
            display: grid;
            grid-template-columns: 1.75rem 2rem minmax(0, 38%) minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            border: 1px solid transparent;
            border-radius: 0.625rem;
            padding: 0.375rem 0.5rem;
            color: inherit;
            text-align: left;
            transition: background-color 120ms ease, border-color 120ms ease;
        }
        .ranking-row:hover {
            border-color: var(--app-border-soft);
            background: color-mix(in srgb, var(--app-field) 55%, transparent);
        }
        .ranking-row:focus-visible {
            border-color: var(--app-accent);
            outline: 2px solid var(--focus);
            outline-offset: 1px;
        }
        .ranking-row + .ranking-row { margin-top: 0.125rem; }
        .ranking-rank {
            font-family: "SF Mono", ui-monospace, monospace;
            color: var(--app-dim);
            font-size: 0.75rem;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .ranking-label {
            color: var(--app-text);
            font-size: 0.875rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ranking-bar-cell { min-width: 0; }
        .ranking-track {
            height: 0.625rem;
            background: var(--app-border-soft);
            border-radius: 9999px;
            overflow: hidden;
        }
        .ranking-bar {
            height: 100%;
            border-radius: 9999px;
            min-width: 2px;
        }
        .ranking-bar-artists { background: linear-gradient(90deg, var(--chart-2) 0%, var(--chart-1) 100%); }
        .ranking-bar-albums { background: linear-gradient(90deg, var(--chart-7) 0%, var(--chart-3) 100%); }
        .ranking-count {
            color: var(--app-muted);
            font-family: "SF Mono", ui-monospace, monospace;
            font-size: 0.8125rem;
            text-align: right;
            min-width: 3.5rem;
            font-variant-numeric: tabular-nums;
            line-height: 1.1;
        }
        .ranking-count-primary { font-weight: 600; }
        .ranking-count-secondary {
            font-size: 0.6875rem;
            color: var(--app-dim);
            margin-top: 0.125rem;
        }
        .player-legend-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        .player-legend-table th, .player-legend-table td {
            padding: 0.375rem 0.5rem;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .player-legend-table th {
            color: var(--app-dim);
            font-weight: 500;
            font-size: 0.6875rem;
            line-height: 1.25;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 1px solid var(--app-border-soft);
            overflow-wrap: anywhere;
            hyphens: auto;
            white-space: normal;
            vertical-align: bottom;
        }
        .player-legend-table td { overflow: hidden; white-space: nowrap; }
        .player-legend-table th:nth-child(1) { width: 25%; }
        .player-legend-table th:nth-child(2) { width: 12%; }
        .player-legend-table th:nth-child(3) { width: 19%; }
        .player-legend-table th:nth-child(4) { width: 25%; }
        .player-legend-table th:nth-child(5) { width: 19%; }
        .player-legend-table td.client-cell {
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--app-text);
        }
        .client-detail-button {
            display: block;
            width: 100%;
            min-width: 0;
            overflow: hidden;
            border-radius: 0.25rem;
            color: inherit;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .client-detail-button:hover { color: var(--app-accent); }
        .client-detail-button:focus-visible {
            outline: 2px solid var(--focus);
            outline-offset: 2px;
        }
        .player-legend-table th:first-child,
        .player-legend-table td:first-child { text-align: left; }
        .source-breakdown { display: grid; gap: 0.5rem; }
        .source-breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center; }
        .source-breakdown-name {
            overflow: hidden;
            color: var(--app-muted);
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .source-breakdown-count,
        .source-breakdown-duration { font-family: "SF Mono", ui-monospace, monospace; }
        .source-breakdown-count { color: var(--app-muted); }
        .source-breakdown-duration { color: var(--app-dim); }
        .source-badge {
            display: inline-flex;
            max-width: 11rem;
            flex: 0 1 auto;
            overflow: hidden;
            border: 1px solid var(--app-border);
            border-radius: 999px;
            background: var(--app-field);
            padding: 0.125rem 0.45rem;
            color: var(--app-muted);
            font-size: 0.625rem;
            font-weight: 600;
            line-height: 1.2;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .history-cell-title .source-badge { margin-top: 0.3rem; }
        .player-legend-table tr + tr td { border-top: 1px solid var(--app-border-soft); }
        @media (max-width: 520px) {
            .player-legend-table th.hide-mobile, .player-legend-table td.hide-mobile { display: none; }
            .player-legend-table th:nth-child(1) { width: 46%; }
            .player-legend-table th:nth-child(2) { width: 20%; }
            .player-legend-table th:nth-child(3) { width: 34%; }
            .player-legend-table th,
            .player-legend-table td { padding-inline: 0.3rem; }
        }

        body.entity-detail-open { overflow: hidden; }
        .entity-detail-layer {
            position: fixed;
            inset: 0;
            z-index: 45;
        }
        .entity-detail-backdrop {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            background: var(--overlay);
            backdrop-filter: blur(3px);
        }
        .entity-detail-panel {
            position: absolute;
            inset: 0 0 0 auto;
            width: min(46rem, calc(100vw - 2rem));
            overflow-y: auto;
            border-left: 1px solid var(--app-border);
            background: var(--app-bg);
            box-shadow: -24px 0 64px color-mix(in srgb, #000 38%, transparent);
            color: var(--app-text);
        }
        .entity-detail-header {
            position: sticky;
            top: 0;
            z-index: 2;
            display: grid;
            grid-template-columns: 4rem minmax(0, 1fr) auto;
            gap: 1rem;
            align-items: start;
            border-bottom: 1px solid var(--app-border-soft);
            background: color-mix(in srgb, var(--app-bg) 92%, transparent);
            padding: 1.25rem 1.5rem;
            backdrop-filter: blur(14px);
        }
        .entity-detail-cover {
            display: grid;
            width: 4rem;
            height: 4rem;
            place-items: center;
            overflow: hidden;
            border: 1px solid var(--app-border);
            border-radius: 0.875rem;
            background: linear-gradient(135deg, var(--surface-raised), var(--app-field));
            color: var(--app-accent);
            font-size: 1.5rem;
            font-weight: 700;
        }
        .entity-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
        .entity-detail-heading { min-width: 0; }
        .entity-detail-eyebrow {
            color: var(--app-accent);
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .entity-detail-name {
            overflow-wrap: anywhere;
            margin-top: 0.125rem;
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.025em;
            line-height: 1.2;
        }
        .entity-detail-artist { margin-top: 0.2rem; color: var(--app-muted); font-size: 0.8125rem; }
        .entity-detail-scope { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
        .entity-scope-chip {
            max-width: 12rem;
            overflow: hidden;
            border: 1px solid var(--app-border-soft);
            border-radius: 999px;
            background: var(--app-field);
            padding: 0.18rem 0.5rem;
            color: var(--app-dim);
            font-size: 0.625rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .entity-detail-actions { display: flex; align-items: center; gap: 0.4rem; }
        .entity-detail-action,
        .entity-detail-icon-action,
        .entity-detail-retry {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--app-border);
            border-radius: 0.625rem;
            background: var(--app-field);
            color: var(--app-muted);
            font-size: 0.75rem;
            font-weight: 600;
        }
        .entity-detail-action { gap: 0.4rem; min-height: 2.25rem; padding: 0.45rem 0.65rem; }
        .entity-detail-action.hidden { display: none; }
        .entity-detail-action svg { width: 1rem; height: 1rem; }
        .entity-detail-icon-action { width: 2.25rem; height: 2.25rem; }
        .entity-detail-icon-action svg { width: 1.15rem; height: 1.15rem; }
        .entity-detail-action:hover,
        .entity-detail-icon-action:hover,
        .entity-detail-retry:hover { border-color: var(--app-accent); color: var(--app-text); }
        .entity-detail-action:focus-visible,
        .entity-detail-icon-action:focus-visible,
        .entity-detail-retry:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
        .entity-detail-state {
            display: grid;
            min-height: 20rem;
            place-content: center;
            justify-items: center;
            gap: 0.75rem;
            padding: 2rem;
            color: var(--app-muted);
            text-align: center;
        }
        .entity-detail-state.hidden,
        .entity-detail-content.hidden { display: none; }
        .entity-detail-loading-mark { width: 3rem; height: 3rem; border-radius: 999px; }
        .entity-detail-retry { margin-top: 0.25rem; padding: 0.5rem 0.9rem; }
        .entity-detail-content { display: grid; gap: 1rem; padding: 1.25rem 1.5rem 2rem; }
        .entity-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
        .entity-detail-stat {
            min-width: 0;
            border: 1px solid var(--app-border-soft);
            border-radius: 0.75rem;
            background: var(--app-panel);
            padding: 0.75rem;
        }
        .entity-detail-stat span { display: block; color: var(--app-dim); font-size: 0.625rem; }
        .entity-detail-stat strong {
            display: block;
            min-height: 2.1rem;
            margin-top: 0.3rem;
            color: var(--app-text);
            font-size: 0.875rem;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }
        .entity-rank-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border: 1px solid color-mix(in srgb, var(--app-accent) 26%, var(--app-border-soft));
            border-radius: 0.875rem;
            background: color-mix(in srgb, var(--app-accent) 7%, var(--app-panel));
            padding: 0.9rem 1rem;
        }
        .entity-rank-label { display: block; color: var(--app-dim); font-size: 0.625rem; }
        .entity-rank-value { display: block; margin-top: 0.1rem; font-size: 1.25rem; }
        .entity-rank-copy { display: grid; justify-items: end; gap: 0.15rem; text-align: right; }
        .entity-rank-copy strong { color: var(--app-accent); font-size: 0.8125rem; }
        .entity-rank-copy span { color: var(--app-dim); font-size: 0.6875rem; }
        .entity-detail-section {
            min-width: 0;
            border: 1px solid var(--app-border-soft);
            border-radius: 0.875rem;
            background: var(--app-panel);
            padding: 1rem;
        }
        .entity-detail-section-heading { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; }
        .entity-detail-section-heading h3 { color: var(--app-muted); font-size: 0.8125rem; font-weight: 650; }
        .entity-detail-section-heading p { margin-top: 0.1rem; color: var(--app-dim); font-size: 0.625rem; }
        .entity-trend-chart { width: 100%; height: 16rem; }
        .entity-detail-empty { padding: 2rem 0.75rem; color: var(--app-dim); font-size: 0.75rem; text-align: center; }
        .entity-detail-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
        .entity-detail-list { display: grid; gap: 0.25rem; }
        .entity-detail-list-item {
            display: grid;
            grid-template-columns: 1.35rem minmax(0, 1fr) minmax(7rem, auto);
            gap: 0.55rem;
            align-items: center;
            min-width: 0;
            border-top: 1px solid var(--app-border-soft);
            padding: 0.55rem 0;
        }
        .entity-detail-list-item:first-child { border-top: 0; }
        .entity-list-rank { color: var(--app-dim); font: 0.6875rem "SF Mono", ui-monospace, monospace; text-align: right; }
        .entity-list-copy { min-width: 0; }
        .entity-list-title {
            display: block;
            overflow: hidden;
            color: var(--app-text);
            font-size: 0.75rem;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .entity-list-context,
        .entity-list-meta {
            display: block;
            margin-top: 0.1rem;
            overflow-wrap: anywhere;
        }
        .entity-list-context { color: var(--app-muted); font-size: 0.6875rem; }
        .entity-list-meta { color: var(--app-dim); font-size: 0.625rem; }
        .entity-list-value {
            align-self: center;
            color: var(--app-muted);
            font: 0.6875rem "SF Mono", ui-monospace, monospace;
            text-align: right;
            white-space: nowrap;
        }
        @media (max-width: 720px) {
            .entity-detail-panel { width: 100%; }
            .entity-detail-header { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 1rem; }
            .entity-detail-cover { width: 3rem; height: 3rem; border-radius: 0.7rem; font-size: 1.1rem; }
            .entity-detail-name { font-size: 1.2rem; }
            .entity-detail-action span { display: none; }
            .entity-detail-action { width: 2.25rem; padding: 0; }
            .entity-detail-content { padding: 1rem; }
            .entity-detail-summary { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 480px) {
            .entity-detail-list-item { grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; }
            .entity-list-value { grid-column: 2; justify-self: start; text-align: left; }
            .ranking-row {
                grid-template-columns: 1.5rem 1.75rem minmax(0, 40%) minmax(0, 1fr) auto;
                gap: 0.5rem;
            }
            .ranking-cover { width: 26px; height: 26px; }
            .ranking-cover-fallback { font-size: 0.65rem; }
        }
        .dashboard-header {
            position: relative;
            z-index: 30;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--app-border-soft);
        }
        .dashboard-header-main {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto auto;
            align-items: center;
            gap: 0.75rem;
            min-height: 2.25rem;
        }
        .dashboard-brand {
            display: flex;
            grid-area: auto;
            min-width: 0;
            align-items: center;
            gap: 0.5rem;
        }
        .dashboard-brand-mark {
            display: flex;
            width: 2rem;
            height: 2rem;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            color: var(--app-accent);
        }
        .dashboard-brand-mark svg { width: 1.75rem; height: 1.75rem; }
        .dashboard-title {
            color: var(--app-text);
            font-size: 0.9375rem;
            font-weight: 650;
            line-height: 1.2;
            letter-spacing: -0.01em;
            white-space: nowrap;
        }
        .brand-version {
            color: var(--app-dim);
            font-family: "SF Mono", ui-monospace, monospace;
            font-size: 0.7rem;
            margin-left: 2px;
            white-space: nowrap;
        }
        .dashboard-filters {
            display: flex;
            min-width: 0;
            align-items: center;
            justify-content: flex-end;
            gap: 0.375rem;
        }
        .dashboard-meta {
            display: flex;
            min-width: 0;
            align-items: center;
            gap: 0.625rem;
            color: var(--app-dim);
            white-space: nowrap;
        }
        .dashboard-live {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: var(--app-dim);
            font-size: 0.6875rem;
            white-space: nowrap;
        }
        .dashboard-live-dot {
            width: 0.4rem;
            height: 0.4rem;
            flex: 0 0 auto;
            border-radius: 999px;
        }
        .dashboard-meta-divider {
            width: 1px;
            height: 0.875rem;
            background: var(--app-border);
        }
        .dashboard-updated {
            display: inline-flex;
            min-width: 0;
            align-items: center;
            gap: 0.35rem;
        }
        .dashboard-updated svg { width: 0.75rem; height: 0.75rem; flex: 0 0 auto; }
        .dashboard-updated p {
            overflow: hidden;
            max-width: 10rem;
            font: 500 0.625rem/1.2 "SF Mono", ui-monospace, monospace;
            text-overflow: ellipsis;
        }
        .dashboard-actions {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: 0.125rem;
        }
        .header-icon-button {
            display: inline-flex;
            width: 2.25rem;
            height: 2.25rem;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 0.5rem;
            background: transparent;
            color: var(--app-dim);
            transition: background 150ms ease, color 150ms ease, transform 150ms ease;
        }
        .header-icon-button.hidden { display: none; }
        .header-icon-button svg { width: 0.9375rem; height: 0.9375rem; }
        .header-icon-button:hover { background: var(--app-field); color: var(--app-text); }
        .header-icon-button:active { transform: translateY(1px); }
        .header-icon-button.refresh { color: var(--app-accent); }
        .header-icon-button:focus-visible,
        .filter-trigger:focus-visible,
        .date-field:focus-visible,
        .filter-option:focus-visible,
        .app-footer a:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--focus);
        }
        .filter-control { position: relative; min-width: 0; }
        .filter-control.window { width: 10.5rem; }
        .filter-control.source { width: 9.75rem; }
        .filter-trigger {
            display: flex;
            width: 100%;
            min-width: 0;
            height: 2.25rem;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid var(--app-border);
            border-radius: 0.5rem;
            background: transparent;
            padding: 0 0.55rem;
            color: var(--app-text);
            text-align: left;
            transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
        }
        .filter-trigger:hover, .filter-trigger[aria-expanded="true"] {
            border-color: var(--app-accent);
            background: var(--app-panel);
        }
        .filter-trigger-icon {
            width: 0.875rem;
            height: 0.875rem;
            flex: 0 0 auto;
        }
        .filter-trigger-icon.window { color: var(--app-accent); }
        .filter-trigger-icon.source { color: var(--app-success); }
        #statsUserControl .filter-trigger-icon { color: var(--app-muted); }
        .filter-trigger-copy { min-width: 0; flex: 1 1 auto; }
        .filter-trigger-value {
            display: block;
            overflow: hidden;
            color: var(--app-text);
            font-size: 0.75rem;
            font-weight: 550;
            line-height: 1.2;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .filter-trigger-chevron {
            width: 0.75rem;
            height: 0.75rem;
            flex: 0 0 auto;
            color: var(--app-dim);
            transition: transform 150ms ease;
        }
        .filter-trigger[aria-expanded="true"] .filter-trigger-chevron { transform: rotate(180deg); }
        .visually-hidden {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }
        .filter-popover {
            position: absolute;
            z-index: 40;
            top: calc(100% + 0.5rem);
            left: 0;
            width: 20rem;
            max-width: calc(100vw - 2rem);
            border: 1px solid var(--app-border);
            border-radius: 0.875rem;
            background: var(--app-panel);
            padding: 0.375rem;
            box-shadow: var(--shadow);
        }
        .filter-control.source .filter-popover { width: 17rem; }
        .filter-option {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border-radius: 0.625rem;
            padding: 0.625rem 0.75rem;
            color: var(--app-muted);
            font-size: 0.8125rem;
            text-align: left;
        }
        .filter-option:hover, .filter-option:focus-visible {
            background: var(--app-field);
            color: var(--app-text);
        }
        .filter-option-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .filter-option[aria-selected="true"] {
            background: var(--accent-soft);
            color: var(--app-accent);
        }
        .option-check { opacity: 0; }
        .filter-option[aria-selected="true"] .option-check { opacity: 1; }
        .columns-menu { display: flex; flex-direction: column; min-width: 10rem; }
        .filter-control.columns .filter-popover { left: auto; right: 0; width: 11rem; }
        .history-header-actions {
            display: flex;
            align-items: center;
            gap: 0.125rem;
        }
        .filter-control.history-insight .filter-popover {
            left: auto;
            right: 0;
            width: 21rem;
        }
        .play-accounting-popover { padding: 0.875rem; }
        .play-accounting-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
        }
        .play-accounting-title {
            color: var(--app-text);
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.4;
        }
        .play-accounting-close {
            display: inline-flex;
            width: 1.75rem;
            height: 1.75rem;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            border-radius: 0.375rem;
            color: var(--app-dim);
        }
        .play-accounting-close svg { width: 0.875rem; height: 0.875rem; }
        .play-accounting-close:hover,
        .play-accounting-close:focus-visible { background: var(--app-field); color: var(--app-text); }
        .play-accounting-body { margin-top: 0.625rem; }
        .play-accounting-value {
            color: var(--app-muted);
            font-size: 0.8125rem;
            font-variant-numeric: tabular-nums;
            line-height: 1.5;
        }
        .play-accounting-description,
        .play-accounting-state {
            color: var(--app-dim);
            font-size: 0.75rem;
            line-height: 1.55;
        }
        .play-accounting-description { margin-top: 0.375rem; }
        .play-accounting-retry {
            margin-top: 0.5rem;
            border: 1px solid var(--app-border);
            border-radius: 0.375rem;
            padding: 0.3rem 0.55rem;
            color: var(--app-muted);
            font-size: 0.75rem;
        }
        .play-accounting-retry:hover,
        .play-accounting-retry:focus-visible { border-color: var(--app-accent); color: var(--app-accent); }
        .play-accounting-close:focus-visible,
        .play-accounting-retry:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
        .column-option-off .option-check { visibility: hidden; }
        .column-option[aria-pressed="true"] .option-check { opacity: 1; }
        .history-table th.column-hidden,
        .history-table td.column-hidden { display: none; }
        @media (min-width: 641px) {
            .history-table col.column-hidden { visibility: collapse; }
        }
        .custom-range-panel {
            margin-top: 0.25rem;
            padding: 0.75rem 0.5rem 0.5rem;
            border-top: 1px solid var(--app-border-soft);
        }
        .custom-range-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.5rem;
        }
        .custom-range-label {
            color: var(--app-dim);
            font-size: 0.6875rem;
        }
        .date-field {
            width: 100%;
            margin-top: 0.375rem;
            color-scheme: dark;
            border: 1px solid var(--app-border);
            border-radius: 0.625rem;
            background: var(--app-bg);
            padding: 0.625rem 0.7rem;
            color: var(--app-text);
            font: 500 0.75rem "SF Mono", ui-monospace, monospace;
        }
        html[data-scheme="light"] .date-field { color-scheme: light; }
        .custom-range-error { margin-top: 0.5rem; color: var(--app-error); font-size: 0.75rem; }
        .custom-range-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }
        .custom-range-action {
            border-radius: 0.625rem;
            padding: 0.5rem 0.75rem;
            color: var(--app-muted);
            font-size: 0.75rem;
            font-weight: 600;
        }
        .custom-range-action:hover { background: var(--app-field); color: var(--app-text); }
        .custom-range-action.apply { background: var(--app-accent); color: var(--app-on-accent); }
        .custom-range-action.apply:hover { filter: brightness(1.05); }
        .history-table-wrap {
            width: 100%;
            overflow: hidden;
        }
        .history-table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }
        .history-col-user { width: 15%; }
        .history-col-track { width: 25%; }
        .history-col-artist { width: 15%; }
        .history-col-album { width: 23%; }
        .history-col-played { width: 16%; }
        .history-col-count { width: 6%; }
        .history-table th,
        .history-table td {
            min-width: 0;
            overflow: hidden;
            padding: 0.875rem 1rem;
            vertical-align: middle;
        }
        .history-table th { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .history-row + .history-row { border-top: 1px solid var(--app-border-soft); }
        .history-row:hover { background: color-mix(in srgb, var(--app-text) 3%, transparent); }
        .history-user-wrap {
            display: flex;
            min-width: 0;
            align-items: center;
            gap: 0.5rem;
            color: var(--app-muted);
            font-weight: 500;
        }
        .history-avatar {
            display: flex;
            width: 1.5rem;
            height: 1.5rem;
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: color-mix(in srgb, var(--app-accent) 20%, transparent);
            color: var(--app-accent);
            font: 500 0.75rem "SF Mono", ui-monospace, monospace;
        }
        .history-user-label,
        .history-primary,
        .history-cell-artist,
        .history-cell-album {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .history-user-label { min-width: 0; }
        .history-user-meta { display: flex; flex-direction: column; min-width: 0; }
        .history-user-source {
            color: var(--app-dim);
            font-size: 0.7rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 9rem;
        }
        .history-primary { color: var(--app-text); font-weight: 500; }
        .history-cell-artist { color: var(--app-muted); }
        .history-cell-album { color: var(--app-dim); }
        .history-cell-played {
            color: var(--app-dim);
            font: 500 0.75rem "SF Mono", ui-monospace, monospace;
            white-space: nowrap;
        }
        .history-cell-count { text-align: right; }
        .history-count-badge {
            display: inline-flex;
            min-width: 2rem;
            align-items: center;
            justify-content: center;
            border-radius: 0.375rem;
            background: color-mix(in srgb, var(--app-accent) 15%, transparent);
            padding: 0.125rem 0.5rem;
            color: var(--app-accent);
            font-size: 0.875rem;
            font-weight: 600;
        }
        .history-empty-cell { padding: 3rem 1rem !important; text-align: center; }
        .new-user-guide {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
            border: 1px solid color-mix(in srgb, var(--app-accent) 34%, transparent);
            border-radius: 1rem;
            background: color-mix(in srgb, var(--app-accent) 8%, var(--app-panel));
            padding: 1rem 1.125rem;
        }
        .new-user-guide.hidden { display: none; }
        .new-user-guide-icon {
            display: grid;
            width: 2.25rem;
            height: 2.25rem;
            place-items: center;
            border-radius: 0.75rem;
            background: color-mix(in srgb, var(--app-accent) 16%, transparent);
            color: var(--app-accent);
            font-size: 1.1rem;
        }
        .new-user-guide h2 { color: var(--app-text); font-size: 0.875rem; font-weight: 650; }
        .new-user-guide p { margin-top: 0.2rem; color: var(--app-muted); font-size: 0.75rem; line-height: 1.5; }
        .new-user-guide a {
            border-radius: 0.625rem;
            background: var(--app-accent);
            padding: 0.55rem 0.75rem;
            color: var(--app-on-accent);
            font-size: 0.75rem;
            font-weight: 650;
            white-space: nowrap;
        }
        .new-user-guide a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
        .app-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 2rem;
            padding: 1rem 0 0.25rem;
            border-top: 1px solid var(--app-border-soft);
            color: var(--app-dim);
            font-size: 0.6875rem;
        }
        .app-footer-brand {
            color: var(--app-muted);
            font-weight: 600;
            letter-spacing: 0.01em;
        }
        .app-footer-links { display: flex; align-items: center; gap: 1rem; }
        .app-footer a { border-radius: 0.25rem; color: var(--app-dim); transition: color 150ms ease; }
        .app-footer a:hover { color: var(--app-text); }
        @media (max-width: 1050px) {
            .dashboard-updated,
            .dashboard-meta-divider { display: none; }
        }
        @media (max-width: 860px) {
            .dashboard-meta { display: none; }
        }
        @media (max-width: 760px) {
            .dashboard-header-main {
                grid-template-columns: minmax(0, 1fr) auto;
                grid-template-areas:
                    "brand actions"
                    "filters filters";
                row-gap: 0.625rem;
            }
            .dashboard-brand { grid-area: brand; }
            .dashboard-filters { grid-area: filters; width: 100%; }
            .dashboard-actions { grid-area: actions; }
            .filter-control.window,
            .filter-control.source {
                width: auto;
                flex: 1 1 0;
            }
        }
        @media (max-width: 640px) {
            .new-user-guide { grid-template-columns: auto minmax(0, 1fr); }
            .new-user-guide a { grid-column: 1 / -1; text-align: center; }
            .history-table-wrap { overflow: visible; }
            .history-table,
            .history-table tbody { display: block; }
            .history-table colgroup,
            .history-table thead { display: none; }
            .history-table tr {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                grid-template-areas:
                    "user count"
                    "track track"
                    "artist played"
                    "album album";
                gap: 0.25rem 0.75rem;
                padding: 0.875rem 1rem;
            }
            .history-table td {
                display: block;
                padding: 0;
                border: 0;
            }
            .history-cell-user { grid-area: user; }
            .history-cell-title { grid-area: track; margin-top: 0.3rem; }
            .history-cell-artist { grid-area: artist; color: var(--app-muted); font-size: 0.75rem; }
            .history-cell-album { grid-area: album; color: var(--app-dim); font-size: 0.6875rem; }
            .history-cell-played {
                grid-area: played;
                align-self: center;
                color: var(--app-dim);
                font-size: 0.625rem;
                text-align: right;
            }
            .history-cell-count { grid-area: count; align-self: center; }
            .history-empty-row { display: block !important; padding: 0 !important; }
            .history-empty-cell { display: block !important; width: 100%; padding: 3rem 1rem !important; }
        }
        @media (max-width: 480px) {
            .dashboard-header { margin-bottom: 1.25rem; padding-bottom: 0.875rem; }
            .filter-popover {
                position: fixed;
                left: 1rem;
                right: 1rem;
                top: auto;
                bottom: 1rem;
                width: auto;
                max-width: none;
                max-height: calc(100dvh - 2rem);
                overflow-y: auto;
            }
            .filter-control.history-insight .filter-popover {
                left: 1rem;
                right: 1rem;
                width: auto;
            }
            .app-footer { margin-top: 1.5rem; }
        }

        .now-playing-cover,
        .ranking-cover,
        .history-cover {
            flex: 0 0 auto;
            border-radius: 5px;
            object-fit: cover;
            background: var(--app-field);
        }

        .now-playing-cover { width: 38px; height: 38px; }
        .ranking-cover { width: 32px; height: 32px; align-self: center; }
        .history-cover { width: 30px; height: 30px; border-radius: 4px; }

        .ranking-cover-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--app-field);
            color: var(--app-muted);
            font-size: 0.75rem;
            font-weight: 600;
            user-select: none;
        }

        .history-title-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .review-subtitle { color: var(--app-muted); font-size: 0.9rem; margin: 0.25rem 0 1rem; }
        .review-metric-row { display: flex; justify-content: flex-end; margin-bottom: 0.75rem; }
        #reviewYearMenu { max-height: min(22rem, calc(100vh - 8rem)); overflow-y: auto; }
        .review-period-control {
            display: inline-flex;
            padding: 3px;
            border: 1px solid var(--app-border);
            border-radius: 10px;
            background: var(--app-field);
        }
        .review-period-control button {
            border: 0;
            border-radius: 7px;
            padding: 7px 11px;
            color: var(--app-muted);
            background: transparent;
            font-size: 0.75rem;
            cursor: pointer;
        }
        .review-period-control button[aria-pressed="true"] {
            color: white;
            background: var(--app-accent);
        }
        #reviewMonthMenu { max-height: min(22rem, calc(100vh - 8rem)); overflow-y: auto; }

        .review-hero {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
            margin-bottom: 14px;
        }

        .review-stat-card {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 14px 16px;
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: var(--app-panel);
        }

        .review-stat-label {
            color: var(--app-dim);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .review-stat-value { color: var(--app-text); font-size: 1.4rem; font-weight: 600; }
        .review-stat-detail { color: var(--app-dim); font-size: 0.72rem; min-height: 1em; }

        .review-facts {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 22px;
            color: var(--app-muted);
            font-size: 0.8rem;
            margin-bottom: 16px;
        }

        .review-fact-label { color: var(--app-dim); margin-right: 6px; }
        .review-fact-value { color: var(--app-text); font-weight: 500; }

        .review-chart-card {
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: var(--app-panel);
            padding: 14px 16px;
        }

        .review-top-card {
            border: 1px solid var(--app-border);
            border-radius: 12px;
            background: var(--app-panel);
            padding: 14px 16px;
        }

        .review-tops-row { margin-top: 14px; }

        .review-chart { width: 100%; height: 260px; }
        .review-chart-tall { height: 300px; }
        .review-chart-wide { margin-bottom: 14px; }
        .review-chart-title { color: var(--app-text); font-size: 0.9rem; font-weight: 600; margin: 0 0 8px; }

        .review-charts-row,
        .review-tops-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 14px;
        }

        .review-top-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .review-top-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 8px;
            border-radius: 8px;
            background: color-mix(in srgb, var(--app-field) 40%, transparent);
        }

        .review-top-rank {
            color: var(--app-dim);
            font-variant-numeric: tabular-nums;
            width: 1.2rem;
            text-align: right;
        }

        .review-top-cover { width: 38px; height: 38px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; }

        .review-top-cover-fallback {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--app-text);
            background: var(--app-field);
            font-weight: 600;
        }

        .review-top-meta { display: flex; flex-direction: column; min-width: 0; }
        .review-top-name {
            color: var(--app-text);
            font-size: 0.85rem;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .review-top-detail { color: var(--app-dim); font-size: 0.75rem; }

        .review-empty {
            border: 1px dashed var(--app-border);
            border-radius: 12px;
            padding: 40px 16px;
            text-align: center;
            color: var(--app-dim);
        }
        .review-retry-button {
            margin-top: 14px;
            border: 1px solid var(--app-border);
            border-radius: 8px;
            padding: 8px 14px;
            color: var(--app-text);
            background: var(--app-field);
            font-size: 0.8125rem;
            font-weight: 600;
        }
        .review-retry-button:hover,
        .review-retry-button:focus-visible { border-color: var(--app-accent); color: var(--app-accent); }