
    @font-face {
      font-family: "TaskbarLyrics Source Han Sans SC";
      src: url("../../Assets/Fonts/SourceHanSansSC-Regular.otf") format("opentype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    :root {
      color-scheme: dark;
      --background: oklch(0.145 0 0);
      --foreground: oklch(0.985 0 0);
      --card: oklch(0.205 0 0);
      --card-foreground: oklch(0.985 0 0);
      --popover: oklch(0.205 0 0);
      --popover-foreground: oklch(0.985 0 0);
      --primary: oklch(0.922 0 0);
      --primary-foreground: oklch(0.205 0 0);
      --secondary: oklch(0.269 0 0);
      --secondary-foreground: oklch(0.985 0 0);
      --muted: oklch(0.269 0 0);
      --muted-foreground: oklch(0.708 0 0);
      --accent: oklch(0.269 0 0);
      --accent-foreground: oklch(0.985 0 0);
      --destructive: oklch(0.704 0.191 22.216);
      --destructive-foreground: oklch(0.985 0 0);
      --border: oklch(1 0 0 / 10%);
      --input: oklch(1 0 0 / 15%);
      --ring: var(--primary);
      --sidebar: oklch(0.205 0 0);
      --sidebar-foreground: oklch(0.985 0 0);
      --surface-hover: oklch(0.31 0 0);
      --nav-hover: oklch(0.245 0 0);
      --subtle: oklch(0.62 0 0);
      --destructive-soft: oklch(0.704 0.191 22.216 / 12%);
      --success: oklch(0.765 0.177 157deg);
      --radius: 0.625rem;
      --radius-sm: calc(var(--radius) - 3px);
      --radius-md: var(--radius);
      --radius-lg: calc(var(--radius) + 2px);
      --duration-fast: 120ms;
      --duration: 180ms;
      --duration-slow: 220ms;
      --shadow: 0 18px 60px rgba(0, 0, 0, .38);
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
      --popover-shadow: 0 12px 32px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .18);
      --dialog-shadow: 0 28px 80px rgba(0, 0, 0, .6);
      --backdrop: rgba(0, 0, 0, .62);
      font-family: "TaskbarLyrics Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    }

    @media (prefers-color-scheme: light) {
      :root {
        color-scheme: light;
        --background: oklch(0.985 0 0);
        --foreground: oklch(0.145 0 0);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.145 0 0);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.145 0 0);
        --primary: oklch(0.205 0 0);
        --primary-foreground: oklch(0.985 0 0);
        --secondary: oklch(0.955 0 0);
        --secondary-foreground: oklch(0.205 0 0);
        --muted: oklch(0.955 0 0);
        --muted-foreground: oklch(0.46 0 0);
        --accent: oklch(0.94 0 0);
        --accent-foreground: oklch(0.205 0 0);
        --destructive: oklch(0.58 0.205 24);
        --destructive-foreground: oklch(0.985 0 0);
        --border: oklch(0 0 0 / 10%);
        --input: oklch(0 0 0 / 15%);
        --sidebar: oklch(0.97 0 0);
        --sidebar-foreground: oklch(0.145 0 0);
        --surface-hover: oklch(0.91 0 0);
        --nav-hover: oklch(0.935 0 0);
        --subtle: oklch(0.48 0 0);
        --destructive-soft: oklch(0.58 0.205 24 / 10%);
        --success: oklch(0.49 0.145 157deg);
        --shadow: 0 18px 60px rgba(0, 0, 0, .16);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);
        --popover-shadow: 0 12px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);
        --dialog-shadow: 0 28px 80px rgba(0, 0, 0, .22);
        --backdrop: rgba(0, 0, 0, .34);
      }
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; background: var(--background); color: var(--foreground); }
    body { overflow: hidden; }
    button, input, select, textarea { font: inherit; }
    button { color: inherit; }
    button, label, select, input[type="range"] { -webkit-tap-highlight-color: transparent; }
    svg { display: block; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

    .window-resize-handles { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
    .window-resize-handle { position: absolute; pointer-events: auto; }
    .window-resize-handle.edge-top { top: 0; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
    .window-resize-handle.edge-right { top: 12px; right: 0; bottom: 12px; width: 6px; cursor: ew-resize; }
    .window-resize-handle.edge-bottom { right: 12px; bottom: 0; left: 12px; height: 6px; cursor: ns-resize; }
    .window-resize-handle.edge-left { top: 12px; bottom: 12px; left: 0; width: 6px; cursor: ew-resize; }
    .window-resize-handle.corner-top-left { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
    .window-resize-handle.corner-top-right { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
    .window-resize-handle.corner-bottom-right { right: 0; bottom: 0; width: 12px; height: 12px; cursor: nwse-resize; }
    .window-resize-handle.corner-bottom-left { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
    .window-maximized .window-resize-handles { display: none; }

    .app-shell {
      width: 100%;
      height: 100vh;
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      overflow: hidden;
      background: var(--background);
      transition: grid-template-columns var(--duration-slow) cubic-bezier(.2, .8, .2, 1);
    }

    .sidebar {
      min-width: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 18px;
      padding: 18px 12px 12px;
      background: var(--sidebar);
      border-right: 1px solid var(--border);
      transition: padding var(--duration-slow) cubic-bezier(.2, .8, .2, 1);
    }

    .brand { height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 8px; overflow: hidden; transition: padding var(--duration-slow) cubic-bezier(.2, .8, .2, 1); }
    .brand-mark {
      width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
      border: 1px solid var(--input); border-radius: 9px;
      color: var(--foreground); background: var(--accent);
      font-size: 11px; font-weight: 700; letter-spacing: -.5px;
    }
    .brand-copy { min-width: 0; max-width: 150px; display: grid; gap: 1px; white-space: nowrap; overflow: hidden; opacity: 1; transform: translateX(0); transition: max-width var(--duration-slow) cubic-bezier(.2, .8, .2, 1), opacity .14s ease, transform var(--duration-slow) cubic-bezier(.2, .8, .2, 1); }
    .brand-copy strong { font-size: 13px; font-weight: 700; }
    .brand-copy small { color: var(--subtle); font-size: 11px; }

    .nav { display: grid; gap: 3px; align-content: start; }
    .nav-item {
      width: 100%; height: 40px; display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 10px;
      padding: 0 11px; border: 1px solid transparent; border-radius: 8px; background: transparent;
      color: var(--muted-foreground); text-align: left; cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease, padding var(--duration-slow) cubic-bezier(.2, .8, .2, 1), gap var(--duration-slow) cubic-bezier(.2, .8, .2, 1), grid-template-columns var(--duration-slow) cubic-bezier(.2, .8, .2, 1);
    }
    .nav-item svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; }
    .nav-item span { min-width: 0; max-width: 140px; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 1; transform: translateX(0); transition: max-width var(--duration-slow) cubic-bezier(.2, .8, .2, 1), opacity .13s ease, transform var(--duration-slow) cubic-bezier(.2, .8, .2, 1); }
    .nav-item:hover { color: var(--foreground); background: var(--nav-hover); }
    .nav-item.active { color: var(--accent-foreground); background: var(--accent); border-color: var(--border); box-shadow: none; }
    .nav-item.active svg { color: var(--accent-foreground); }

    .sidebar-footer { display: grid; gap: 8px; }
    .sidebar-footer .save-state { padding: 0 11px; }
    .sidebar-footer-action { width: 100%; justify-content: flex-start; padding-inline: 11px; }
    .sidebar-footer-icon { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .sidebar-footer-label { white-space: nowrap; overflow: hidden; min-width: 0; width: auto; opacity: 1; transition: opacity var(--duration-fast) ease; }
    .sidebar-footer-action[data-tooltip]::after { display: none; }
    .sidebar-note { max-width: 170px; padding: 0 9px; color: var(--subtle); font-size: 11px; white-space: nowrap; overflow: hidden; opacity: 1; transform: translateX(0); transition: max-width var(--duration-slow) cubic-bezier(.2, .8, .2, 1), opacity .12s ease, transform var(--duration-slow) cubic-bezier(.2, .8, .2, 1), padding var(--duration-slow) cubic-bezier(.2, .8, .2, 1); }
    .icon-button {
      width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm);
      background: transparent; color: var(--muted-foreground); cursor: pointer; transition: margin-left var(--duration-slow) cubic-bezier(.2, .8, .2, 1), background var(--duration-fast) ease, color var(--duration-fast) ease;
    }
    .icon-button:hover { color: var(--foreground); background: var(--secondary); }
    .icon-button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
    #collapseIcon { transition: transform var(--duration-slow) cubic-bezier(.2, .8, .2, 1); }

    [data-tooltip] { position: relative; }
    [data-tooltip]::after {
      content: attr(data-tooltip);
      position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
      padding: 5px 9px; border-radius: var(--radius-sm); background: var(--popover); color: var(--popover-foreground);
      font-size: 11px; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow); pointer-events: none;
      opacity: 0; transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease; z-index: 200;
    }
    [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
    .nav-item[data-tooltip]::after { display: none; }
    .sidebar-collapsed .nav-item[data-tooltip]::after { display: block; left: calc(100% + 12px); bottom: auto; top: 50%; transform: translate(-4px, -50%); }
    .sidebar-collapsed .nav-item[data-tooltip]:hover::after,
    .sidebar-collapsed .nav-item[data-tooltip]:focus-visible::after { transform: translate(0, -50%); }

    .app-shell.sidebar-collapsed { grid-template-columns: 68px minmax(0, 1fr); }
    .sidebar-collapsed .brand-copy, .sidebar-collapsed .nav-item span { max-width: 0; opacity: 0; transform: translateX(-7px); pointer-events: none; }
    .sidebar-collapsed .sidebar-footer-action { width: 34px; height: 34px; min-height: 0; margin-left: 5px; padding: 0; gap: 0; justify-content: center; }
    .sidebar-collapsed .sidebar-footer-icon { display: block; }
    .sidebar-collapsed .sidebar-footer-label { width: 0; opacity: 0; }
    .sidebar-collapsed .sidebar-footer-action[data-tooltip]::after { display: block; left: calc(100% + 12px); bottom: auto; top: 50%; transform: translate(-4px, -50%); }
    .sidebar-collapsed .sidebar-footer-action[data-tooltip]:hover::after,
    .sidebar-collapsed .sidebar-footer-action[data-tooltip]:focus-visible::after { transform: translate(0, -50%); }
    .sidebar-collapsed .nav-item { grid-template-columns: 20px 0; justify-content: center; gap: 0; padding-inline: 11px; }
    .sidebar-collapsed .brand { padding-inline: 7px; }
    .sidebar-collapsed .sidebar-footer .icon-button { margin-left: 5px; }
    .sidebar-collapsed #collapseIcon { transform: rotate(180deg); }

    .workspace { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
    .topbar {
      min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
      padding: 18px 28px 14px; border-bottom: 1px solid var(--border); background: var(--background);
    }
    .title-block { flex: 1; min-width: 0; transition: opacity var(--duration-fast) ease; }
    .title-block h1 { margin: 0 0 4px; font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.3px; }
    .title-block p { margin: 0; color: var(--muted-foreground); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .title-sub { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .title-sub p { flex: 1; min-width: 0; }
    .top-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
    .save-state { display: inline-flex; align-items: center; gap: 6px; color: var(--subtle); font-size: 11px; }
    .save-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(118,213,163,.08); }
    .save-state[data-state="applying"]::before { background: var(--muted-foreground); box-shadow: none; }
    .save-state[data-state="error"] { color: var(--destructive); }
    .save-state[data-state="error"]::before { background: var(--destructive); box-shadow: 0 0 0 3px var(--destructive-soft); }

    .caption-controls { position: fixed; top: 0; right: 0; z-index: 300; display: flex; align-items: center; height: 40px; }
    .caption-button { width: 46px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; }
    .caption-button:hover { background: var(--surface-hover); color: var(--foreground); }
    .caption-button.close:hover { background: var(--destructive); color: #fff; }
    .caption-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
    .caption-button svg[hidden] { display: none; }
    [data-caption-drag] { user-select: none; -webkit-user-select: none; cursor: default; }

    .btn {
      min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      padding: 0 12px; border: 1px solid var(--primary); border-radius: var(--radius-sm); background: var(--primary);
      color: var(--primary-foreground); font-size: 12px; font-weight: 600; cursor: pointer;
      transition: transform var(--duration-fast) ease, background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
    }
    .btn:hover { background: color-mix(in oklch, var(--primary) 85%, var(--background)); }
    .btn:active { transform: scale(.98); }
    .btn.secondary { border-color: var(--input); background: var(--secondary); color: var(--foreground); }
    .btn.secondary:hover { background: var(--surface-hover); }
    .btn.outline { border-color: var(--input); background: transparent; color: var(--foreground); }
    .btn.outline:hover { background: var(--secondary); }
    .btn.ghost { border-color: transparent; background: transparent; color: var(--muted-foreground); }
    .btn.ghost:hover { background: var(--secondary); color: var(--foreground); }
    .btn.destructive { border-color: color-mix(in oklch, var(--destructive) 30%, transparent); background: var(--destructive-soft); color: var(--destructive); }
    .btn.destructive:hover { background: color-mix(in oklch, var(--destructive) 18%, transparent); }
    .btn.small { min-height: 28px; padding: 0 9px; font-size: 11px; }
    .btn.icon { width: 34px; height: 34px; min-height: 0; padding: 0; }

    :where(button, input, select, textarea):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    :where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .46; }

    .page-stack { min-height: 0; position: relative; overflow: hidden; }
    .page { display: none; position: absolute; inset: 0; height: 100%; overflow: auto; padding: 22px 28px 30px; background: var(--background); }
    .page.active, .page.transitioning { display: block; }
    .page.active { z-index: 1; }
    .page.transitioning { z-index: 2; pointer-events: none; }
    .page-inner { width: 100%; display: grid; gap: 16px; }

    .panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; box-shadow: var(--shadow-sm); }
    .panel-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 15px 18px 13px; border-bottom: 1px solid var(--border); }
    .panel-head h2 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
    .panel-head p { margin: 0; color: var(--muted-foreground); font-size: 11px; line-height: 1.5; }
    .panel-body { padding: 14px 18px; }

    .source-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      max-height: 250px;
      overflow: auto;
      padding-right: 2px;
    }
    .source-card {
      min-width: 0; min-height: 82px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px;
      padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--background);
      transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
    }
    .source-card:hover { border-color: var(--input); background: var(--accent); box-shadow: inset 0 0 0 1px var(--border); }
    .source-card:focus-within { border-color: var(--ring); box-shadow: 0 0 0 2px oklch(0.556 0 0 / 20%); }
    .source-card.enabled { border-color: var(--input); background: var(--accent); }
    .source-card.unavailable { opacity: .55; cursor: not-allowed; }
    .source-logo { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--input); border-radius: 10px; background: var(--secondary); color: var(--foreground); font-size: 13px; font-weight: 700; }
    .source-logo img { width: 24px; height: 24px; display: block; object-fit: contain; border-radius: 5px; }
    .source-info { min-width: 0; display: grid; gap: 3px; }
    .source-info strong { overflow: hidden; color: var(--foreground); font-size: 12px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
    .source-info small { overflow: hidden; color: var(--subtle); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
    .source-settings-button, .icon-button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted-foreground); cursor: pointer; transition: color .14s ease, background .14s ease; }
    .source-settings-button:hover, .icon-button:hover { color: var(--foreground); background: var(--surface-hover); }
    .source-settings-button:focus-visible, .icon-button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    .source-settings-button svg, .icon-button svg { width: 17px; height: 17px; }
    .source-count { color: var(--subtle); font-size: 11px; white-space: nowrap; }

    .priority-list { display: grid; gap: 7px; }
    .priority-item { min-height: 42px; display: grid; grid-template-columns: 28px 24px 1fr; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); transition: opacity .12s ease, border-color .12s ease, transform .12s ease; }
    .priority-item.dragging { opacity: .36; }
    .priority-item.drag-over { border-color: var(--foreground); transform: translateY(2px); }
    .priority-number { color: var(--muted-foreground); font-size: 11px; font-weight: 700; text-align: center; }
    .priority-name { font-size: 12px; font-weight: 600; }
    .drag-handle { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--subtle); cursor: grab; }
    .drag-handle:hover { color: var(--foreground); background: var(--accent); }
    .drag-handle:active { cursor: grabbing; }
    .drag-handle svg { width: 14px; height: 14px; fill: currentColor; }

    .settings { display: grid; }
    .setting-row { min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 300px); align-items: center; gap: 24px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
    .setting-row:last-child { border-bottom: 0; }
    .setting-row.compact { grid-template-columns: minmax(0, 1fr) auto; }
    .setting-row.child { min-height: 54px; margin: 2px 0 6px 24px; padding: 9px 18px 9px 0; border: 0; border-radius: 0; background: transparent; }
    .setting-row.is-disabled { opacity: .46; }
    .setting-label { min-width: 0; display: grid; gap: 3px; }
    .setting-label strong { font-size: 13px; font-weight: 600; }
    .setting-label small { color: var(--muted-foreground); font-size: 11px; line-height: 1.45; }
    .setting-inline-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .spectrum-audio-status[data-state="blocked"] { color: var(--destructive); }
    .theme-segmented { width: 100%; min-height: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid var(--input); border-radius: 8px; background: var(--muted); }
    .theme-segmented button { min-width: 0; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
    .theme-segmented button:hover { color: var(--foreground); background: var(--surface-hover); }
    .theme-segmented button[aria-checked="true"] { color: var(--foreground); background: var(--background); box-shadow: var(--shadow-sm); }
    .theme-segmented button:focus-visible { outline: 2px solid var(--ring); outline-offset: -1px; }
    .theme-segmented svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .control { width: 100%; min-height: 36px; border: 1px solid var(--input); border-radius: 8px; background: var(--secondary); color: var(--foreground); padding: 0 10px; font-size: 12px; }
    .select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 9px; text-align: left; cursor: pointer; transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease; }
    .select-trigger:hover:not(:disabled), .select-trigger[aria-expanded="true"] { border-color: var(--ring); background: var(--surface-hover); }
    .select-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px oklch(0.556 0 0 / 18%); }
    .select-trigger-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .select-trigger svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted-foreground); transition: transform .16s ease; }
    .select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
    .select-popover { position: fixed; z-index: 120; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--popover-shadow); transform-origin: top; opacity: 0; transform: translateY(-3px) scale(.985); visibility: hidden; pointer-events: none; transition: opacity var(--duration-fast) ease-out, transform var(--duration-fast) ease-out, visibility 0s linear var(--duration-fast); }
    .select-popover[data-state="open"] { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; transition: opacity var(--duration-fast) ease-out, transform var(--duration-fast) ease-out, visibility 0s; }
    .select-listbox { max-height: 230px; overflow-y: auto; outline: none; scrollbar-width: thin; }
    .select-option { min-height: 34px; display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: center; gap: 7px; padding: 0 9px; border-radius: 6px; color: var(--foreground); font-size: 11px; cursor: default; user-select: none; }
    .select-option:hover, .select-option.is-active { background: var(--accent); color: var(--accent-foreground); }
    .select-option-check { width: 14px; color: var(--foreground); opacity: 0; }
    .select-option[aria-selected="true"] .select-option-check { opacity: 1; }
    @keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
    @keyframes dialog-out { to { opacity: 0; transform: translateY(4px) scale(.98); } }
    @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes backdrop-out { to { opacity: 0; } }
    textarea.control { min-height: 66px; resize: vertical; padding: 8px 10px; line-height: 1.5; }
    .folder-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .switch { position: relative; width: 42px; height: 23px; display: inline-flex; justify-self: end; }
    .switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    .switch-track { width: 42px; height: 23px; border: 1px solid var(--input); border-radius: 99px; background: var(--muted); transition: background .16s ease, border-color .16s ease; }
    .switch-track::after { content: ""; width: 17px; height: 17px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: var(--background); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform var(--duration-fast) ease; }
    .switch input:checked + .switch-track { border-color: var(--primary); background: var(--primary); }
    .switch input:checked + .switch-track::after { transform: translateX(19px); }
    .switch input:focus-visible + .switch-track { outline: 2px solid var(--ring); outline-offset: 2px; }

    .media-hotkey-list { display: grid; }
    .media-hotkey-row { min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); align-items: center; gap: 18px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
    .media-hotkey-row:last-child { border-bottom: 0; }
    .media-hotkey-controls { display: grid; grid-template-columns: minmax(142px, 1fr) minmax(104px, auto) auto; align-items: center; gap: 8px; }
    .media-hotkey-recorder { min-width: 0; text-align: left; font-family: Consolas, "Cascadia Mono", monospace; cursor: pointer; }
    .media-hotkey-recorder.recording { border-color: var(--ring); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 18%, transparent); }
    .media-hotkey-status { min-width: 0; overflow: hidden; color: var(--muted-foreground); font-size: 10px; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
    .media-hotkey-status[data-state="ready"] { color: oklch(.72 .13 150); }
    .media-hotkey-status[data-state="warning"] { color: oklch(.76 .14 80); }
    .media-hotkey-status[data-state="off"] { color: var(--muted-foreground); }

    .stepper { display: grid; grid-template-columns: 34px minmax(64px, 1fr) 34px; gap: 5px; }
    .stepper button { border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--secondary); color: var(--muted-foreground); cursor: pointer; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; }
    .stepper button:hover { color: var(--foreground); background: var(--surface-hover); }
    .stepper input { min-width: 0; text-align: center; }
    .size-control { display: grid; gap: 7px; }
    .switch.small { width: 34px; height: 20px; }
    .switch.small .switch-track { width: 34px; height: 20px; }
    .switch.small .switch-track::after { width: 14px; height: 14px; }
    .switch.small input:checked + .switch-track::after { transform: translateX(14px); }
    .slider-number-control { width: min(100%, 360px); min-width: 0; display: grid; grid-template-columns: minmax(120px, 1fr) max-content; align-items: center; gap: 10px; }
    .unit-input { --unit-input-padding: 27px; --unit-input-width: 72px; --unit-label-right: 9px; width: var(--unit-input-width); position: relative; display: block; }
    .unit-input input { padding-right: var(--unit-input-padding); text-align: right; font-variant-numeric: tabular-nums; }
    .unit-input span { position: absolute; top: 50%; right: var(--unit-label-right); color: var(--muted-foreground); font-size: 11px; transform: translateY(-50%); pointer-events: none; }
    .compact-number-input input { width: 100%; min-height: 30px; padding-left: 8px; appearance: textfield; border: 1px solid transparent; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--muted) 72%, transparent); color: var(--foreground); font: 12px Consolas, "Cascadia Mono", monospace; transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
    .compact-number-input:hover input { border-color: var(--border); background: var(--secondary); }
    .compact-number-input input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-color: var(--ring); background: var(--secondary); }
    .compact-number-input input::-webkit-inner-spin-button,
    .compact-number-input input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
    .pixel-input { --unit-input-padding: 29px; --unit-input-width: 86px; }
    .degree-input { --unit-input-padding: 24px; --unit-input-width: 68px; }
    input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; }
    input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--slider-progress, 0%), var(--secondary) var(--slider-progress, 0%), var(--secondary) 100%); }
    input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--foreground); box-shadow: 0 0 0 2px var(--background), 0 1px 4px rgba(0,0,0,.45); transition: transform var(--duration-fast) ease; }
    input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
    input[type="range"]:active::-webkit-slider-thumb { transform: scale(.96); }
    input[type="range"]:focus-visible { outline: none; }
    input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
    input[type="range"]:disabled { opacity: .5; }
    .setting-row.layout-scale-row { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); align-items: center; }
    .layout-scale-control { min-width: 0; display: grid; gap: 6px; }
    .layout-scale-control > .slider-number-control { width: 100%; }
    .layout-scale-footer { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
    .layout-scale-footer .btn { min-height: 24px; padding-inline: 7px; }
    .layout-scale-preview { min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; color: var(--muted-foreground); font-size: 11px; line-height: 1.35; text-align: left; font-variant-numeric: tabular-nums; }
    .layout-scale-preview span { white-space: nowrap; }
    .layout-scale-preview strong { color: var(--foreground); font-size: 11px; font-weight: 600; }
    .advanced-size-panel { min-width: 0; }
    .advanced-size-panel > summary { cursor: pointer; list-style: none; }
    .advanced-size-panel > summary::-webkit-details-marker { display: none; }
    .advanced-size-summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; }
    .advanced-size-panel > summary > svg { width: 16px; height: 16px; flex: 0 0 16px; align-self: center; fill: none; stroke: var(--muted-foreground); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast) ease; }
    .advanced-size-panel[open] > summary > svg { transform: rotate(180deg); }
    .advanced-size-panel > summary:hover { background: var(--nav-hover); }
    .advanced-size-panel > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
    .advanced-size-settings { display: grid; border-top: 1px solid var(--border); }
    .advanced-size-actions { display: flex; justify-content: flex-end; padding: 10px 18px; }
    .color-control { display: grid; grid-template-columns: minmax(116px, .8fr) minmax(108px, 1fr); gap: 8px; }
    .color-mode-control { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(150px, 1.2fr); gap: 8px; }
    .color-mode-control.is-custom > .select-trigger { grid-column: 1 / -1; }
    .color-mode-control.is-custom .custom-color-control { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .custom-color-control[hidden] { display: none; }
    .preset-color-readout { min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); color: var(--muted-foreground); font: 11px Consolas, "Cascadia Mono", monospace; }
    .preset-color-readout[hidden] { display: none; }
    .color-picker-button { min-height: 36px; position: relative; display: flex; align-items: center; gap: 9px; padding: 0 10px; overflow: hidden; border: 1px solid var(--input); border-radius: 8px; background: var(--secondary); color: var(--foreground); font-size: 11px; font-weight: 600; cursor: pointer; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; }
    .color-picker-button:hover { border-color: var(--ring); background: var(--surface-hover); }
    .color-picker-button:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px oklch(0.556 0 0 / 18%); }
    .color-swatch { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid oklch(1 0 0 / 24%); border-radius: 5px; background: #ffffff; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 18%); }
    .color-value-input { font-family: Consolas, "Cascadia Mono", monospace; letter-spacing: .2px; text-transform: uppercase; }
    .color-value-input.invalid { border-color: var(--destructive); box-shadow: 0 0 0 3px oklch(0.704 0.191 22.216 / 14%); }
    .input-error { grid-column: 1 / -1; color: var(--destructive); font-size: 11px; line-height: 1.45; }
    .input-error[hidden] { display: none; }
    .color-popover { position: fixed; z-index: 130; width: 264px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--popover); color: var(--popover-foreground); box-shadow: var(--popover-shadow); opacity: 0; transform: translateY(-3px) scale(.985); visibility: hidden; pointer-events: none; transition: opacity var(--duration-fast) ease-out, transform var(--duration-fast) ease-out, visibility 0s linear var(--duration-fast); }
    .color-popover[data-state="open"] { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; transition: opacity var(--duration-fast) ease-out, transform var(--duration-fast) ease-out, visibility 0s; }
    .color-area { --picker-hue: 0; height: 150px; position: relative; overflow: hidden; border-radius: 8px; background: linear-gradient(to top,#000,transparent), linear-gradient(to right,#fff,transparent), hsl(var(--picker-hue) 100% 50%); cursor: crosshair; touch-action: none; }
    .color-area:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    .color-cursor { width: 14px; height: 14px; position: absolute; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45); transform: translate(-50%,-50%); pointer-events: none; }
    .color-hue-control { width: 100%; margin: 11px 0 9px; grid-template-columns: minmax(0, 1fr) max-content; }
    .hue-slider { width: 100%; }
    .hue-slider::-webkit-slider-runnable-track { height: 12px; border-radius: 99px; background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
    .hue-slider::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -2px; border: 2px solid #fff; border-radius: 50%; background: hsl(var(--picker-hue) 100% 50%); box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.4); }
    .color-presets { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-bottom: 11px; }
    .color-preset { aspect-ratio: 1; border: 1px solid var(--input); border-radius: 5px; background: var(--preset); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
    .color-preset:hover, .color-preset:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
    .color-draft-row { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; }
    .color-draft-preview { width: 34px; height: 34px; border: 1px solid var(--input); border-radius: 7px; background: #fff; }
    .color-popover-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border); }

    .live-note { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); }
    .live-note-copy { min-width: 0; display: grid; gap: 2px; }
    .live-note-copy strong { font-size: 11px; font-weight: 600; }
    .live-note-copy small { color: var(--muted-foreground); font-size: 11px; }

    .track-offset-empty { min-height: 154px; display: grid; place-items: center; padding: 24px; text-align: center; }
    .track-offset-empty > div { display: grid; justify-items: center; gap: 5px; }
    .track-offset-empty svg { width: 22px; height: 22px; margin-bottom: 3px; stroke: var(--muted-foreground); fill: none; stroke-width: 1.6; }
    .track-offset-empty strong { font-size: 12px; }
    .track-offset-empty small { max-width: 420px; color: var(--muted-foreground); font-size: 11px; line-height: 1.55; }
    .current-track-layout { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(360px, 1.2fr); align-items: stretch; }
    .current-track-identity { min-width: 0; display: grid; align-content: center; gap: 5px; padding: 18px; border-right: 1px solid var(--border); }
    .current-track-identity strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
    .current-track-identity small { overflow: hidden; color: var(--muted-foreground); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
    .current-track-source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
    .track-offset-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: 99px; background: var(--secondary); color: var(--secondary-foreground); font-size: 10px; font-weight: 600; }
    .current-track-controls { min-width: 0; display: grid; align-content: center; gap: 11px; padding: 14px 18px; }
    .offset-summary { display: grid; grid-template-columns: repeat(3, 1fr); }
    .offset-summary-item { min-width: 0; display: grid; gap: 3px; padding: 0 12px; border-right: 1px solid var(--border); }
    .offset-summary-item:first-child { padding-left: 0; }
    .offset-summary-item:last-child { padding-right: 0; border-right: 0; }
    .offset-summary-item span { color: var(--muted-foreground); font-size: 10px; }
    .offset-summary-item strong { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
    .current-track-editor { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 10px; padding-top: 11px; border-top: 1px solid var(--border); }
    .track-offset-stepper { grid-template-columns: 38px minmax(96px, 1fr) 38px; }
    .track-offset-editor-unit { color: var(--muted-foreground); font-size: 11px; }

    .track-offset-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) 150px 150px; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
    .track-offset-search { position: relative; }
    .track-offset-search svg { width: 15px; height: 15px; position: absolute; left: 11px; top: 50%; z-index: 1; transform: translateY(-50%); stroke: var(--muted-foreground); fill: none; stroke-width: 1.8; pointer-events: none; }
    .track-offset-search .control { padding-left: 34px; }
    .compact-select { min-width: 0; }
    .track-offset-list { display: grid; }
    .track-offset-table-head,
    .track-offset-row { display: grid; grid-template-columns: minmax(190px, 1.6fr) minmax(110px, .8fr) 110px 116px 72px; align-items: center; gap: 12px; }
    .track-offset-table-head { min-height: 34px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--muted); color: var(--muted-foreground); font-size: 10px; }
    .track-offset-item { border-bottom: 1px solid var(--border); }
    .track-offset-item:last-child { border-bottom: 0; }
    .track-offset-row { min-height: 58px; padding: 8px 18px; transition: background var(--duration-fast) ease; }
    .track-offset-row:hover { background: var(--nav-hover); }
    .track-offset-song { min-width: 0; display: grid; gap: 3px; }
    .track-offset-song strong { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
    .track-offset-song small,
    .track-offset-meta { overflow: hidden; color: var(--muted-foreground); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
    .track-offset-value { font-size: 11px; font-weight: 600; }
    .track-offset-actions { display: flex; justify-content: flex-end; gap: 3px; }
    .track-offset-action { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); cursor: pointer; transition: color var(--duration-fast) ease, background var(--duration-fast) ease; }
    .track-offset-action:hover { color: var(--foreground); background: var(--secondary); }
    .track-offset-action.destructive:hover { color: var(--destructive); background: var(--destructive-soft); }
    .track-offset-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .track-offset-inline-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 360px) auto; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--border); background: var(--muted); }
    .track-offset-inline-editor > span { color: var(--muted-foreground); font-size: 11px; }
    .track-offset-footer { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 9px 18px; border-top: 1px solid var(--border); }
    .track-offset-footer p { margin: 0; color: var(--muted-foreground); font-size: 10px; line-height: 1.5; }
    .track-offset-footer .btn { justify-self: end; }
    .track-offset-pagination { display: flex; align-items: center; justify-content: center; gap: 5px; }
    .track-offset-pagination[hidden] { display: none; }
    .track-offset-pagination span { min-width: 48px; color: var(--muted-foreground); font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; }
    .track-offset-page-button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--secondary); color: var(--foreground); cursor: pointer; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; }
    .track-offset-page-button:hover:not(:disabled) { background: var(--nav-hover); }
    .track-offset-page-button:disabled { color: var(--muted-foreground); cursor: default; opacity: .45; }
    .track-offset-page-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .track-offset-list .track-offset-empty { min-height: 180px; }

    .diagnostics-page { min-width: 0; }
    .diagnostics-run-panel .panel-head { align-items: center; }
    .diagnostics-run-panel .btn { flex: 0 0 auto; min-width: 104px; }
    .diagnostics-status { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 11px; line-height: 1.5; }
    .diagnostics-status::before { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--subtle); content: ""; }
    .diagnostics-status[data-state="running"] { color: var(--foreground); }
    .diagnostics-status[data-state="running"]::before { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent); }
    .diagnostics-status[data-state="success"] { color: var(--success); }
    .diagnostics-status[data-state="success"]::before { background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 18%, transparent); }
    .diagnostics-status[data-state="empty"],
    .diagnostics-status[data-state="error"] { color: var(--destructive); }
    .diagnostics-status[data-state="empty"]::before,
    .diagnostics-status[data-state="error"]::before { background: var(--destructive); box-shadow: 0 0 0 3px var(--destructive-soft); }
    .diagnostics-track { min-width: 0; display: grid; grid-template-columns: minmax(180px, 1.3fr) repeat(4, minmax(100px, 1fr)); gap: 12px; padding: 14px 18px; }
    .diagnostics-track-item { min-width: 0; display: grid; align-content: start; gap: 4px; }
    .diagnostics-track-item span { color: var(--muted-foreground); font-size: 10px; }
    .diagnostics-track-item strong { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .diagnostics-track-item strong[title] { cursor: help; }
    .diagnostics-providers { display: grid; gap: 10px; padding: 14px 18px; }
    .diagnostics-provider { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); }
    .diagnostics-provider-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; cursor: pointer; list-style: none; }
    .diagnostics-provider-head::-webkit-details-marker { display: none; }
    .diagnostics-provider-head:hover { background: var(--accent); }
    .diagnostics-provider-head:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
    .diagnostics-provider[open] > .diagnostics-provider-head { border-bottom: 1px solid var(--border); }
    .diagnostics-provider-heading { min-width: 0; display: grid; gap: 3px; }
    .diagnostics-provider-title { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
    .diagnostics-provider-title strong { font-size: 12px; }
    .diagnostics-provider-detail { min-width: 0; margin: 3px 0 0; overflow: hidden; color: var(--muted-foreground); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .diagnostics-provider-toggle-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .diagnostics-provider-toggle-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
    .diagnostics-provider[open] .diagnostics-provider-toggle-meta svg { transform: rotate(90deg); }
    .diagnostics-report-summary { display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 10px 18px 0; color: var(--muted-foreground); font-size: 10px; }
    .diagnostics-report-summary span { min-width: 0; }
    .diagnostics-badge { display: inline-flex; align-items: center; min-height: 21px; padding: 0 7px; border: 1px solid var(--border); border-radius: 99px; background: var(--secondary); color: var(--muted-foreground); font-size: 10px; font-weight: 600; white-space: nowrap; }
    .diagnostics-badge[data-state="selected"],
    .diagnostics-badge[data-state="accepted"],
    .diagnostics-badge[data-state="success"] { border-color: color-mix(in oklch, var(--success) 36%, var(--border)); background: color-mix(in oklch, var(--success) 13%, transparent); color: var(--success); }
    .diagnostics-badge[data-state="rejected"],
    .diagnostics-badge[data-state="error"] { border-color: color-mix(in oklch, var(--destructive) 36%, var(--border)); background: var(--destructive-soft); color: var(--destructive); }
    .diagnostics-badge[data-state="high-confidence"] { border-color: color-mix(in oklch, var(--primary) 36%, var(--border)); background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--foreground); }
    .diagnostics-badge[data-state="running"] { color: var(--foreground); }
    .diagnostics-candidates { display: grid; gap: 7px; padding: 9px 12px 12px; }
    .diagnostics-candidate { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
    .diagnostics-candidate-main { min-width: 0; display: grid; gap: 5px; }
    .diagnostics-candidate-title { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
    .diagnostics-candidate-title strong { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .diagnostics-candidate-title small { min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--muted-foreground); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .diagnostics-candidate-meta { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted-foreground); font-size: 10px; line-height: 1.45; }
    .diagnostics-candidate-meta span { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .diagnostics-candidate-meta code,
    .diagnostics-selection code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 10px; }
    .diagnostics-candidate-side { display: grid; justify-items: end; align-content: start; gap: 6px; }
    .diagnostics-score { color: var(--foreground); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
    .diagnostics-reasons { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
    .diagnostics-reasons li { padding: 3px 6px; border-radius: 4px; background: var(--destructive-soft); color: var(--destructive); font-size: 10px; line-height: 1.25; }
    .diagnostics-candidate-empty { padding: 12px 10px; color: var(--muted-foreground); font-size: 11px; }
    .diagnostics-variants { display: grid; gap: 7px; padding: 12px 18px 14px; }
    .diagnostics-variant { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); }
    .diagnostics-variant-index { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--secondary); color: var(--muted-foreground); font-size: 10px; font-variant-numeric: tabular-nums; }
    .diagnostics-variant-copy { min-width: 0; display: grid; gap: 2px; }
    .diagnostics-variant-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .diagnostics-variant-copy small { overflow: hidden; color: var(--muted-foreground); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .diagnostics-variant-reasons { justify-self: end; color: var(--muted-foreground); font-size: 10px; text-align: right; }
    .diagnostics-selection { padding: 14px 18px; }
    .diagnostics-selection-card { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--background); }
    .diagnostics-selection-card.is-selected { border-color: color-mix(in oklch, var(--success) 45%, var(--border)); background: color-mix(in oklch, var(--success) 7%, var(--background)); }
    .diagnostics-selection-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .diagnostics-selection-title strong { font-size: 13px; }
    .diagnostics-selection-meta { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted-foreground); font-size: 10px; }
    .diagnostics-selection-meta span,
    .diagnostics-selection-meta code { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    .diagnostics-selection-empty { display: grid; justify-items: center; gap: 5px; padding: 14px; color: var(--muted-foreground); text-align: center; }
    .diagnostics-selection-empty strong { color: var(--foreground); font-size: 12px; }
    .diagnostics-selection-empty small { font-size: 11px; }

    .about-layout { width: 100%; display: grid; gap: 16px; }
    .about-product { min-height: 116px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px; }
    .about-logo { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--input); border-radius: 16px; background: var(--accent); color: var(--accent-foreground); font-weight: 700; }
    .about-copy { min-width: 0; display: grid; gap: 4px; }
    .about-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .about-title-row h2 { margin: 0; font-size: 19px; font-weight: 700; }
    .version-badge { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border: 1px solid var(--border); border-radius: 99px; background: var(--secondary); color: var(--secondary-foreground); font-size: 9px; font-weight: 600; }
    .about-copy p { margin: 0; color: var(--muted-foreground); font-size: 11px; line-height: 1.6; }
    .about-copy .easter-egg { position: relative; display: inline-block; color: inherit; text-decoration: none; cursor: help; }
    .about-copy .easter-egg::before,
    .about-copy .easter-egg::after { position: absolute; top: 50%; left: 50%; width: calc(100% + 1px); height: 1.25px; border-radius: 99px; background: currentColor; content: ""; pointer-events: none; transform-origin: center; }
    .about-copy .easter-egg::before { transform: translate(-50%, -50%) rotate(28deg); }
    .about-copy .easter-egg::after { transform: translate(-50%, -50%) rotate(-28deg); }
    .update-summary { min-height: 62px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 18px; border-top: 1px solid var(--border); }
    .update-status { display: grid; gap: 3px; }
    .update-status strong { font-size: 11px; font-weight: 600; }
    .update-status small { color: var(--muted-foreground); font-size: 11px; }
    .update-actions { display: flex; align-items: center; gap: 8px; }
    .spinner { width: 13px; height: 13px; display: inline-block; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .resource-list { display: grid; }
    .resource-item { min-height: 46px; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 8px 18px; border-bottom: 1px solid var(--border); }
    .resource-item:last-child { border-bottom: 0; }
    .resource-item > span { color: var(--muted-foreground); font-size: 11px; }
    .resource-item > strong { font-size: 11px; font-weight: 600; }
    .about-footer { color: var(--subtle); font-size: 11px; text-align: center; }

    dialog { width: min(430px, calc(100vw - 32px)); border: 1px solid var(--input); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); padding: 0; box-shadow: var(--dialog-shadow); animation: dialog-in var(--duration) cubic-bezier(.2,.8,.2,1); }
    dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(3px); animation: backdrop-in var(--duration) ease-out; }
    dialog.closing, dialog.closing::backdrop { pointer-events: none; }
    dialog.closing { animation: dialog-out var(--duration-fast) cubic-bezier(.4,0,1,1) forwards; }
    dialog.closing::backdrop { animation: backdrop-out var(--duration-fast) ease-in forwards; }
    .dialog-body { padding: 20px; }
    .dialog-body h2 { margin: 0 0 7px; font-size: 16px; }
    .dialog-body p { margin: 0; color: var(--muted-foreground); font-size: 11px; line-height: 1.65; }
    .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
    @keyframes player-drawer-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
    @keyframes player-drawer-out { to { opacity: 0; transform: translateX(20px); } }
    .player-settings-dialog { width: min(420px, calc(100vw - 24px)); height: calc(100vh - 24px); max-height: none; margin: 12px 12px 12px auto; overflow: hidden; animation: player-drawer-in 220ms cubic-bezier(.16,1,.3,1); }
    .player-settings-dialog.closing { animation: player-drawer-out var(--duration-fast) cubic-bezier(.4,0,1,1) forwards; }
    .player-drawer-header { min-height: 72px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .player-drawer-heading { min-width: 0; display: grid; gap: 3px; }
    .player-drawer-heading h2 { margin: 0; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
    .player-drawer-heading p { margin: 0; color: var(--muted-foreground); font-size: 11px; }
    .player-drawer-body { height: calc(100% - 72px); overflow-y: auto; padding: 16px; }
    .player-setting-section { overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--background); }
    .player-setting-section .setting-row { padding-inline: 14px; }
    .player-offset-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 14px 8px; }
    .player-offset-copy > div { display: grid; gap: 3px; }
    .player-offset-copy strong { font-size: 13px; }
    .player-offset-copy small { color: var(--muted-foreground); font-size: 11px; line-height: 1.45; }
    .player-offset-status { flex: 0 0 auto; color: var(--foreground); font-size: 12px; font-weight: 600; }
    .player-offset-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 14px; }
    .player-offset-stepper { grid-template-columns: 38px minmax(88px, 1fr) 38px; }
    .player-offset-unit { color: var(--muted-foreground); font-size: 11px; }
    .player-setting-actions { display: flex; justify-content: flex-end; padding: 4px 14px 12px; }
    .player-settings-note { margin: 2px 3px 0; color: var(--subtle); font-size: 11px; line-height: 1.6; }
    .toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translate(-50%, 14px); padding: 9px 13px; border: 1px solid var(--input); border-radius: 8px; background: var(--popover); color: var(--popover-foreground); font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; box-shadow: var(--shadow); }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }

    ::-webkit-scrollbar { width: 9px; height: 9px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: var(--muted-foreground); background-clip: padding-box; }

    @media (max-width: 980px) { .live-note { align-items: flex-start; } }
    @media (max-width: 980px) {
      .current-track-layout { grid-template-columns: 1fr; }
      .current-track-identity { border-right: 0; border-bottom: 1px solid var(--border); }
      .track-offset-table-head, .track-offset-row { grid-template-columns: minmax(180px, 1.5fr) minmax(100px, .8fr) 105px 72px; }
      .track-offset-table-head > :nth-child(4), .track-offset-row > :nth-child(4) { display: none; }
      .diagnostics-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 720px) {
      .app-shell { grid-template-columns: 68px minmax(0, 1fr); }
      .brand-copy, .nav-item span, .sidebar-note { max-width: 0; opacity: 0; transform: translateX(-7px); pointer-events: none; }
      .brand { justify-content: center; padding: 0; }
      .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
      .sidebar-footer { justify-items: center; }
      .topbar { padding-inline: 18px; }
      .page { padding-inline: 18px; }
      .save-state { display: none; }
      .save-state[data-state="error"] { display: inline-flex; }
      .setting-row { grid-template-columns: 1fr; gap: 8px; }
      .setting-row.layout-scale-row { grid-template-columns: 1fr; }
      .setting-row.compact { grid-template-columns: 1fr auto; }
      .media-hotkey-row { grid-template-columns: 1fr; gap: 8px; }
      .media-hotkey-controls { grid-template-columns: minmax(122px, 1fr) minmax(96px, auto) auto; }
      .color-mode-control { grid-template-columns: 1fr; }
      .about-product { grid-template-columns: 58px minmax(0, 1fr); }
      .about-product > .btn { grid-column: 1 / -1; justify-self: start; }
      .resource-item { grid-template-columns: 110px minmax(0, 1fr); }
      .resource-item > .btn { grid-column: 2; justify-self: start; }
      .track-offset-toolbar { grid-template-columns: 1fr 1fr; }
      .track-offset-search { grid-column: 1 / -1; }
      .track-offset-table-head { display: none; }
      .track-offset-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
      .track-offset-row > :nth-child(2) { grid-column: 1; }
      .track-offset-row > :nth-child(3) { grid-column: 2; grid-row: 1; }
      .track-offset-row > :nth-child(4) { display: none; }
      .track-offset-actions { grid-column: 2; grid-row: 2; }
      .track-offset-inline-editor { grid-template-columns: 1fr auto; }
      .track-offset-inline-editor > span { grid-column: 1 / -1; }
      .track-offset-footer { grid-template-columns: 1fr auto; }
      .track-offset-footer p { grid-column: 1 / -1; }
      .track-offset-pagination { justify-self: start; }
      .diagnostics-run-panel .panel-head { align-items: flex-start; }
      .diagnostics-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .diagnostics-candidate { grid-template-columns: minmax(0, 1fr); }
      .diagnostics-candidate-side { grid-template-columns: auto auto; justify-items: start; align-items: center; }
      .diagnostics-variant { grid-template-columns: auto minmax(0, 1fr); }
      .diagnostics-variant-reasons { grid-column: 2; justify-self: start; text-align: left; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }
