/* ============================================================================
   TR01 canonical role layer (docs/PLANS/2026-10-19/PROTOTYPE_TRANSFER/04 §2).
   The approved charcoal/forest/warm-white/pistachio palette lives in
   namespaced --vela-* roles so it can never silently replace the legacy
   LENGTH --sidebar or the TEXT --muted/--accent readers. Legacy names alias
   the canonical roles below; remove each alias only when its consumers move.
   Self-hosted Manrope subsets are app-owned assets: no runtime font CDN.
   ============================================================================ */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
  /* Approved compact type roles. The full editorial scale is applied by the
     screen packages that own those components; the shell only consumes the
     family/body/wordmark roles here. */
  --vela-font-sans: "Manrope", Arial, sans-serif;
  --vela-body-size: 14px;
  --vela-wordmark-size: 34px;
  --vela-wordmark-weight: 750;
  --vela-wordmark-tracking: -1.8px;
  --vela-topbar-size: 12px;
  --vela-nav-size: 12px;
  --vela-player-title-size: 12px;
  --vela-player-caption-size: 10px;
  /* Approved palette primitives from the reference. Semantic roles below use
     these; the light selector overrides semantic roles only. */
  --vela-charcoal: #131513;
  --vela-forest: #0e100f;
  --vela-warm-white: #f3f3ed;
  --vela-pistachio: #d3e9a5;
  /* Approved dark roles. */
  --vela-bg: var(--vela-charcoal);
  --vela-text: var(--vela-warm-white);
  --vela-card: #1b1e1b;
  --vela-popover: #1c201d;
  --vela-primary: var(--vela-pistachio);
  --vela-on-primary: #1b2511;
  --vela-secondary: #272c27;
  --vela-muted-surface: #232823;
  --vela-muted-text: #9aa296;
  --vela-quiet-text: #798372;
  --vela-accent-surface: #293025;
  --vela-danger: #ef9290;
  --vela-border: #2a2f2a;
  --vela-input-border: #383f37;
  --vela-control-line: #798372;
  --vela-sidebar-bg: var(--vela-forest);
  --vela-player-bg: #10130f;
  --vela-player-border: #343b2e;
  /* Main transport face: the approved 32px light circle on the dark band.
     Light re-points the same roles at its own primary pair. */
  --vela-player-face: #e4ebd9;
  --vela-player-face-text: #252c22;
  --vela-topbar-border: #ffffff05;
  --vela-search-bg: #1d211c;
  --vela-filter-inactive: #22271f;
  --vela-nav-active: #d3e9a50c;
  --vela-nav-active-text: #d3e9a5;
  --vela-track-hover: #ffffff04;
  --vela-track-current: #d3e9a505;
  --vela-seek-rail: #343d2c;
  --vela-seek-fill: #bbcda8;
  --vela-mobile-player: #1c2318;
  --vela-mobile-nav: #10140e;
  --vela-disabled-text: #9aa296;
  --vela-disabled-surface: #232823;
  --vela-scrollbar: #3b4335;
  --vela-avatar-bg: #32392b;
  --vela-avatar-text: #d0d9be;
  /* One shell layout authority: sidebar offset, topbar band and player reserve
     are declared once and consumed once by the shell grid. */
  --vela-sidebar-width: 216px;
  --vela-topbar-height: 75px;
  --vela-player-height: 88px;
  --vela-player-gutter: 26px;
  --vela-transport-max: 470px;
  --vela-content-max: 1560px;
  --vela-gutter: 33px;
  --vela-content-top: 24px;
  --vela-mobile-nav-height: 70px;
  --vela-mobile-player-height: 120px;
  /* TR09: display-cutout/home-indicator insets are declared once, as variables,
     so every band and the content gutter consume the same numbers. On hardware
     they resolve from env(safe-area-inset-*); a browser test can emulate the
     same geometry by overriding these four properties instead of guessing. */
  --vela-safe-top: env(safe-area-inset-top, 0px);
  --vela-safe-right: env(safe-area-inset-right, 0px);
  --vela-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vela-safe-left: env(safe-area-inset-left, 0px);
  /* The one bottom reserve the central scroller ends above. Desktop shell: the
     player band. Mobile composition (<=760px): the player band, the navigation
     band and the one safe-area inset that the navigation row already owns. */
  --vela-bottom-reserve: var(--vela-player-height);
  /* Compatibility aliases: the old names keep their old meaning. --quiet is
     aliased to the contrast-qualified text role because literal quiet on a
     card is below the normal-text threshold. */
  --bg: var(--vela-bg);
  --surface: var(--vela-card);
  --surface-raised: var(--vela-secondary);
  --surface-hover: var(--vela-accent-surface);
  --text: var(--vela-text);
  --muted: var(--vela-muted-text);
  --quiet: var(--vela-muted-text);
  --line: var(--vela-border);
  --control-line: var(--vela-control-line);
  --accent: var(--vela-primary);
  --accent-text: var(--vela-on-primary);
  --sand: #eed8b9;
  --danger: var(--vela-danger);
  --shadow: 0 24px 80px #0007;
  --image-outline: oklch(0 0 0 / .1);
  --disabled-text: var(--vela-disabled-text);
  --disabled-surface: var(--vela-disabled-surface);
  --sidebar: var(--vela-sidebar-width);
  --player: var(--vela-player-height);
  --layout-density: comfortable;
  --layout-density-source: project;
  --spacing: 4px;
  color-scheme: dark;
  font-family: var(--vela-font-sans);
}
/* Light is a separate validated adaptation of the same canonical roles. The
   approved dark hex values are never applied to this selector. */
:root[data-theme="light"] {
  --vela-bg: #f4f7f3;
  --vela-text: #14271c;
  --vela-card: #fff;
  --vela-popover: #fff;
  --vela-primary: #08754c;
  --vela-on-primary: #fff;
  --vela-secondary: #e4ece6;
  --vela-muted-surface: #e5ebe6;
  --vela-muted-text: #40594a;
  --vela-quiet-text: #4c6555;
  --vela-accent-surface: #d7e9de;
  --vela-danger: #a13c33;
  --vela-border: #c1d1c5;
  --vela-input-border: #668572;
  --vela-control-line: #668572;
  --vela-sidebar-bg: #fff;
  --vela-player-bg: #fff;
  --vela-player-border: #c1d1c5;
  --vela-player-face: var(--vela-primary);
  --vela-player-face-text: var(--vela-on-primary);
  --vela-topbar-border: #c1d1c5;
  --vela-search-bg: #fff;
  --vela-filter-inactive: #eef3ee;
  --vela-nav-active: #08754c12;
  --vela-nav-active-text: #08754c;
  --vela-track-hover: #00000005;
  --vela-track-current: #08754c0d;
  --vela-seek-rail: #c1d1c5;
  --vela-seek-fill: #08754c;
  --vela-mobile-player: #fff;
  --vela-mobile-nav: #fff;
  --vela-disabled-text: #607368;
  --vela-disabled-surface: #e5ebe6;
  --vela-scrollbar: #8fa89a;
  --vela-avatar-bg: #dbe7dd;
  --vela-avatar-text: #1d3a2b;
  --shadow: 0 24px 80px #21372920;
  --image-outline: oklch(1 0 0 / .1);
  color-scheme: light;
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input,select{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;min-height:44px;padding:10px 13px;max-width:100%}input::placeholder{color:var(--quiet)}input[type=range]{min-height:20px;padding:0;border:0;accent-color:var(--accent);cursor:pointer;background:none;height:20px}input[type=checkbox]{min-height:20px;width:18px;accent-color:var(--accent)}label{display:block;font-size:12px;font-weight:600;margin:14px 0 7px}form>input{width:100%}form>.button{margin-top:18px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(28px,3.1vw,45px);letter-spacing:-1.7px;line-height:1.14;font-weight:650;margin-bottom:8px}h2{font-size:22px;letter-spacing:-.65px;font-weight:600;line-height:1.25;margin-bottom:10px}h3{font-size:16px;font-weight:600;line-height:1.4;margin-bottom:8px}p{color:var(--muted);margin-bottom:18px}small{font-size:11px;color:var(--muted);display:block}strong{font-weight:550}.sr-only{position:absolute;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.muted{color:var(--muted)}.eyebrow{display:block;font-size:10px;letter-spacing:2px;font-weight:650;color:var(--accent);margin-bottom:15px}.brand{display:flex;align-items:center;gap:11px;font-size:var(--vela-wordmark-size);letter-spacing:var(--vela-wordmark-tracking);font-weight:var(--vela-wordmark-weight);color:var(--text)}.brand img{width:32px;height:32px}.brand-wordmark{white-space:nowrap}.brand-dot{color:var(--vela-primary)}.brand-mark{display:grid;place-items:center;font-size:35px;background:var(--accent);color:var(--accent-text);width:64px;height:64px;border-radius:20px;font-weight:700}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;border-radius:9px;padding:11px 20px;font-weight:600;white-space:nowrap;transition:background-color .15s,transform .15s;font-size:12px}.button:hover:not(:disabled){transform:translateY(-1px)}.button:active:not(:disabled){transform:scale(.96)}.button.primary{background:var(--accent);color:var(--accent-text)}.button.secondary{background:var(--surface-raised);color:var(--text);border:1px solid var(--line)}.button.cream{background:var(--sand);color:#253c31}.button.danger{color:var(--danger);background:var(--surface-raised);border:1px solid var(--line)}.button.small{min-height:36px;padding:8px 14px;font-size:11px}.icon-button{background:none;color:var(--muted);font-size:20px;min-width:32px;height:36px;padding:0 7px;display:inline-grid;place-items:center;border-radius:8px;transition:background-color .15s,transform .15s}.icon-button:hover{background:var(--surface-hover);color:var(--text)}.icon-button:active:not(:disabled){transform:scale(.96)}.icon-button.selected{color:var(--accent)}.alert{padding:12px 16px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;margin-bottom:16px;border:1px solid var(--line);background:var(--surface-raised)}.alert.error{color:var(--danger)}.alert.success{color:var(--accent)}.alert button{font-size:20px;background:none;color:inherit}.boot-screen{display:flex;min-height:100vh;align-items:center;justify-content:center;flex-direction:column;gap:24px}.boot-screen p{font-size:13px}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.auth-story{background:#173a30;color:#f1eedc;position:relative;overflow:hidden;padding:40px 11%;display:flex;flex-direction:column;align-items:flex-start}.auth-story>.brand{color:#f1eedc;margin-bottom:9vh}.auth-story .eyebrow{color:#aed8b9}.auth-story h1{font-size:clamp(44px,6vw,83px);line-height:1.02;font-weight:500;letter-spacing:-3.4px;position:relative;z-index:1}.auth-story>p{max-width:310px;color:#b2c6b8;font-size:14px;position:relative;z-index:1}.auth-footer{margin-top:auto;padding-top:180px;color:#aec4b2;font-size:10px;letter-spacing:.8px;position:relative;z-index:1}.vinyl{position:absolute;width:470px;height:470px;border-radius:50%;right:-200px;bottom:35px;background:repeating-radial-gradient(circle,#14291f 0,#14291f 2px,#294231 3px,#152d21 4px);box-shadow:0 20px 45px #0003;display:grid;place-items:center;transform:rotate(-12deg)}.vinyl-label{width:165px;height:165px;border-radius:50%;background:#d1b391;color:#3a4d33;display:flex;align-items:center;justify-content:center;flex-direction:column}.vinyl-label span{font-size:36px;font-family:Georgia,serif;font-style:italic}.vinyl-label small{font-size:8px;color:#5a684a;margin-top:9px}.auth-card{align-self:center;justify-self:center;padding:50px 42px;width:min(460px,100%)}.auth-card h2{font-size:29px;letter-spacing:-1.2px}.auth-card p{font-size:13px;margin-bottom:25px}.auth-card form .button{width:100%;margin-top:27px}.version{font-size:10px;margin-top:42px}.public-share{margin-bottom:36px;padding-bottom:25px;border-bottom:1px solid var(--line)}.public-share-tracks{max-height:260px;overflow:auto}.public-share .playlist-track{padding:9px 0}.public-share .playlist-track div{display:block}.public-share>p:last-child{font-size:11px;margin-top:16px;margin-bottom:0}.app-shell{display:grid;grid-template-columns:var(--vela-sidebar-width) minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--vela-player-height);height:calc(100dvh / var(--app-zoom, 1));min-height:0;overflow:hidden;background:var(--vela-bg)}.sidebar{grid-column:1;grid-row:1;position:relative;inset:auto;width:auto;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--vela-border);padding:29px 17px 0;display:flex;flex-direction:column;background:var(--vela-sidebar-bg);z-index:20;scrollbar-width:thin;scrollbar-color:var(--vela-scrollbar) transparent}.sidebar .brand{margin:0 12px 45px}.nav-label{font-size:9px;letter-spacing:1.6px;color:var(--quiet);font-weight:600;display:block;margin:0 14px 13px}.nav-item{display:flex;width:100%;align-items:center;gap:14px;background:none;color:var(--muted);text-align:left;height:45px;border-radius:8px;font-size:12px;padding:0 14px;margin:3px 0;font-weight:500}.nav-item.active{color:var(--accent);background:var(--surface-hover)}.nav-item:hover{color:var(--text);background:var(--surface-hover)}.nav-icon{font-size:19px;width:23px;text-align:center}.sidebar-collection{margin:35px 13px 0;padding-top:22px;border-top:1px solid var(--line)}.sidebar-collection .nav-label{margin:0 0 15px}.sidebar-collection strong{font-size:24px;font-weight:550;display:block;letter-spacing:-.8px}.sidebar-collection>span{display:block;font-size:11px;color:var(--muted)}.sidebar-collection p{font-size:10px;line-height:1.6;max-width:135px;margin-top:16px;color:var(--quiet)}.sidebar-bottom{margin-top:auto}.account{display:flex;align-items:center;gap:10px;padding:20px 8px 0;border-top:1px solid var(--line);margin-top:14px}.avatar{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#6a8b73;color:#f6eddf;font-size:11px;font-weight:650}.account strong{font-size:11px;max-width:130px;overflow:hidden;text-overflow:ellipsis;display:block}.account small{font-size:9px;margin-top:2px}.main-content{grid-column:2;grid-row:1;display:flex;flex-direction:column;max-width:none;margin:0;padding:0;min-width:0;min-height:0;overflow:hidden}.topbar{flex:0 0 var(--vela-topbar-height);height:var(--vela-topbar-height);min-height:var(--vela-topbar-height);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 var(--vela-gutter);border-bottom:1px solid var(--vela-topbar-border);margin:0;background:var(--vela-bg);position:relative;z-index:5}.breadcrumb{font-size:9px;letter-spacing:1.5px;color:var(--quiet);font-weight:600}.topbar-actions{display:flex;align-items:center;gap:20px}.topbar .button.small{min-height:38px}.theme-button{font-size:22px}.page-heading{margin-bottom:29px}.page-heading .eyebrow{margin-bottom:10px}.library-banner{position:relative;min-height:280px;background:#21493a;color:#f8f1dd;border-radius:15px;overflow:hidden;padding:32px 35px;margin-bottom:36px;display:flex;align-items:center}.library-banner>div:first-child{position:relative;z-index:1}.library-banner .eyebrow{font-size:9px;color:#aac7ad;margin-bottom:15px}.library-banner h2{font-family:Georgia,"Times New Roman",serif;font-size:39px;line-height:1.08;font-weight:400;letter-spacing:-1.2px;margin-bottom:12px}.library-banner p{font-size:11px;max-width:280px;color:#b4c9b7;margin-bottom:20px}.library-banner .button{font-size:11px;min-height:38px}.banner-record{width:330px;height:330px;border-radius:50%;position:absolute;right:30px;top:15px;background:repeating-radial-gradient(circle,#162e22 0,#162e22 2px,#304933 3px,#162e22 4px);box-shadow:0 20px 50px #09140a70;display:grid;place-items:center;transform:rotate(-16deg)}.banner-record>div{width:118px;height:118px;background:#c6ab82;border-radius:50%;color:#395238;font-family:Georgia,serif;font-size:73px;font-style:italic;text-align:center;line-height:106px;position:relative}.banner-record>div:after{content:"";width:9px;height:9px;background:#183022;border:2px solid #dfc49e;position:absolute;top:55px;left:55px;border-radius:50%}.banner-caption{position:absolute;right:28px;bottom:24px;font-size:8px;letter-spacing:3px;color:#9bb297;writing-mode:vertical-rl}.section-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.section-toolbar h2{margin-bottom:5px;font-size:21px}.section-toolbar p{font-size:11px;margin:0}.search-form{display:flex;align-items:center;position:relative;min-width:220px;margin:0}.search-form input{width:100%;font-size:11px;min-height:38px;padding-right:40px;background:var(--surface)}.search-form button{position:absolute;right:5px;background:none;color:var(--muted);font-size:25px;width:32px;height:30px}.track-table{width:100%}.track-header,.track-row{display:grid;grid-template-columns:35px minmax(180px,1.8fr) minmax(120px,1fr) 70px 48px 90px;gap:13px;align-items:center}.track-header{padding:13px 10px 12px;border-bottom:1px solid var(--line);color:var(--quiet);font-size:8px;letter-spacing:1.2px}.track-row{min-height:69px;border-bottom:1px solid var(--line);padding:8px 10px;border-radius:7px;transition:background-color .12s}.track-row:hover{background:var(--surface)}.track-row.current{background:var(--surface-hover)}.track-row.current .track-title strong{color:var(--accent)}.track-play{background:none;color:var(--quiet);font-size:11px;text-align:left;padding:10px 0}.track-row:hover .track-play{color:var(--accent)}.track-title{border:0;background:none;text-align:left;display:flex;align-items:center;gap:12px;min-width:0;color:var(--text);padding:0}.track-title>div:last-child{min-width:0}.track-title strong{font-size:12px;font-weight:500;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.track-title small{font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:3px}.artwork{width:43px;height:43px;min-width:43px;overflow:hidden;border-radius:5px;background:linear-gradient(140deg,#596b4c,#293d2b);display:grid;place-items:center;color:#c1c5a4;font-family:Georgia,serif;font-size:24px}.artwork img{width:100%;height:100%;object-fit:cover;outline:1px solid var(--image-outline);outline-offset:-1px}.artwork-large{width:100%;height:auto;aspect-ratio:1;border-radius:12px;outline:1px solid var(--image-outline);outline-offset:-1px}.track-album{color:var(--muted);font-size:11px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.quality-tag{color:var(--quiet);background:var(--surface-raised);border:1px solid var(--line);border-radius:4px;justify-self:start;display:inline-block;text-transform:uppercase;font-size:8px;font-weight:600;letter-spacing:.3px;padding:2px 5px;max-width:100%;white-space:nowrap}.track-duration{color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.track-actions{display:flex;align-items:center;justify-content:flex-end;gap:1px}.track-actions .icon-button{font-size:19px;padding:0 3px;min-width:25px}.track-actions .favorite{font-size:21px}.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:15px}.pagination>span{font-size:10px;color:var(--quiet)}.empty-state{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;border:1px dashed var(--line);border-radius:12px;padding:35px 20px}.empty-state h3{font-size:20px;letter-spacing:-.5px}.empty-state p{font-size:12px;max-width:330px;line-height:1.7}.empty-icon{font-size:36px;color:var(--accent);margin-bottom:16px}.empty-state.compact{min-height:160px}.spinner{height:28px;width:28px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:18px}@keyframes spin{to{transform:rotate(360deg)}}.panel{padding:27px 28px;background:var(--surface);border:1px solid var(--line);border-radius:13px}.panel p{font-size:12px;line-height:1.75}.panel .eyebrow{font-size:9px}.import-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}.import-card form .button{width:100%}.import-card input{font-size:12px}.upload-card{background:linear-gradient(140deg,var(--surface),var(--surface-raised));align-self:start}.upload-card>.button{width:100%;margin-bottom:17px}.upload-card>small{font-size:10px;text-align:center}.rights-note{font-size:10px;line-height:1.7;margin-top:19px;color:var(--quiet)}.import-preview{margin-top:22px;padding:22px;background:var(--bg);border:1px solid var(--line);border-radius:9px}.preview-icon{font-size:25px;color:var(--accent);display:block;margin-bottom:10px}.import-preview h3{overflow-wrap:anywhere;margin-bottom:4px}.import-preview p{margin-bottom:12px;font-size:11px}.import-preview>small{margin:15px 0}.import-preview>.button{width:100%}.metadata-pills{display:flex;gap:7px;flex-wrap:wrap}.metadata-pills span{padding:4px 8px;border-radius:5px;background:var(--surface-raised);color:var(--muted);font-size:9px}.jobs-section{margin-top:35px}.job-card{display:flex;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:17px 20px;margin-bottom:10px}.job-icon{font-size:20px;color:var(--accent);background:var(--surface-hover);width:40px;height:40px;min-width:40px;display:grid;place-items:center;border-radius:9px}.job-info{min-width:0;flex:1}.job-info strong{font-size:12px;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.job-status{font-size:10px;color:var(--muted);display:block;margin-top:3px}.job-info progress{width:100%;height:4px;accent-color:var(--accent);margin-top:12px;display:block}.job-error{font-size:10px;color:var(--danger);margin:8px 0 0;overflow-wrap:anywhere}.inline-form{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.inline-form input{width:auto;flex:1;min-width:130px;min-height:36px;font-size:11px}.inline-form .button{margin:0}.inline-form label{margin:0}.checkbox-label{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:400;white-space:nowrap;color:var(--muted)}.checkbox-label input{width:16px;flex:0}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:21px;margin-bottom:32px}.playlist-card{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:11px;padding:16px;text-align:left;transition:background-color .15s,transform .15s}.playlist-card:hover{background:var(--surface-hover);transform:translateY(-2px)}.playlist-card:active{transform:scale(.98)}.playlist-art{aspect-ratio:1;border-radius:7px;background:linear-gradient(135deg,#62745a,#243d32);display:grid;place-items:center;font-size:65px;color:#ced0ae;margin-bottom:15px}.playlist-card:nth-child(3n+2) .playlist-art{background:linear-gradient(135deg,#977861,#493c31)}.playlist-card:nth-child(3n+3) .playlist-art{background:linear-gradient(135deg,#667b7a,#273a41)}.playlist-card h3{font-size:13px;margin-bottom:4px;overflow-wrap:anywhere}.playlist-card p{font-size:10px;margin-bottom:0}.playlist-track{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line);padding:12px 0}.playlist-track>div:not(.artwork){flex:1;min-width:0}.playlist-track strong{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.playlist-track small{font-size:10px}.sharing-controls{padding-top:28px;margin-top:22px;border-top:1px solid var(--line)}.sharing-controls h3{font-size:17px;letter-spacing:-.3px}.sharing-controls p{font-size:11px;max-width:570px}.sharing-controls .share-form{margin-top:20px}.sharing-controls .share-form label{color:var(--muted);font-size:10px;font-weight:400}.share-form select{font-size:10px;min-height:34px}.sharing-controls>input{width:100%;font-size:11px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px}.settings-grid .panel{align-self:start}.settings-grid .panel>small{margin-top:19px;line-height:1.7}.settings-grid dl{margin:22px 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:11px}.settings-grid dt{color:var(--muted)}.settings-grid dd{margin:0;text-align:right}.content-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin:48px 0 22px;padding-top:21px;font-size:8px;letter-spacing:1.4px;color:var(--quiet)}.content-footer span{font-family:Georgia,serif;font-style:italic;letter-spacing:0;font-size:14px}.player-bar{grid-column:1/-1;grid-row:2;position:relative;left:auto;right:auto;bottom:auto;width:100%;height:var(--vela-player-height);background:var(--vela-player-bg);border-top:1px solid var(--vela-player-border);z-index:40;display:grid;grid-template-columns:minmax(190px,1fr) minmax(280px,1.5fr) minmax(150px,1fr);align-items:center;gap:24px;padding:0 var(--vela-player-gutter)}.now-playing{display:flex;align-items:center;gap:13px;min-width:0}.now-playing .artwork{width:53px;height:53px;min-width:53px;border-radius:7px}.now-playing>div:last-child{min-width:0}.now-playing strong{font-size:12px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.now-playing small{font-size:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:3px}.player-buttons{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:5px}.player-buttons .icon-button{font-size:14px;min-width:28px;height:28px}.player-buttons .icon-button:first-child,.player-buttons .icon-button:last-child{font-size:20px}.play-toggle{height:33px;width:33px;border-radius:50%;background:var(--text);color:var(--bg);font-size:13px;display:grid;place-items:center;letter-spacing:-1px}.seek-row{display:flex;align-items:center;gap:10px;justify-content:center}.seek-row span{font-size:9px;font-variant-numeric:tabular-nums;color:var(--quiet);min-width:30px;text-align:center}.seek-row input{width:100%}.player-right{display:flex;justify-content:flex-end;align-items:center;gap:13px}.player-right input{max-width:92px}.volume-icon{color:var(--quiet);font-size:17px}.mobile-nav{display:none}.queue-panel{position:fixed;right:0;top:0;bottom:var(--player);width:min(450px,100vw);padding:30px 26px;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:35;overflow-y:auto}.queue-panel h2{font-size:22px}.queue-panel .eyebrow{font-size:9px;margin-bottom:9px}.queue-row{display:flex;align-items:center;padding:9px;border-bottom:1px solid var(--line);gap:5px;border-radius:7px}.queue-row.current{background:var(--surface-hover)}.queue-track{display:flex;align-items:center;gap:12px;min-width:0;flex:1;background:none;color:var(--text);text-align:left;padding:0}.queue-track>div:last-child{min-width:0}.queue-track strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-track small{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-panel>.button{margin-top:24px;width:100%}.modal-backdrop{position:fixed;inset:0;z-index:100;background:#07100bcc;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:25px;overflow-y:auto}.modal{width:min(490px,100%);background:var(--surface);padding:28px 33px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto}.modal .section-toolbar{margin-bottom:17px}.modal .section-toolbar .eyebrow{margin:0;font-size:9px}.modal h2{font-size:27px;letter-spacing:-1px}.modal>p{font-size:12px;line-height:1.75}.upload-zone{padding:25px 18px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed var(--quiet);border-radius:11px;background:var(--bg);text-align:center;margin:24px 0 18px;cursor:pointer}.upload-zone>span{font-size:34px;color:var(--accent);line-height:1.1;margin-bottom:14px}.upload-zone strong{font-size:13px;margin-bottom:5px}.upload-zone small{font-size:9px}.upload-zone input{width:100%;font-size:10px;background:var(--surface);margin-top:15px;min-height:35px;padding:8px;border:none}.modal>.button{width:100%}.modal>small{text-align:center;margin-top:20px;font-size:10px;line-height:1.6}.modal-divider{display:flex;align-items:center;gap:15px;color:var(--quiet);font-size:11px;padding:16px 0}.modal-divider:before,.modal-divider:after{content:"";height:1px;background:var(--line);flex:1}.upload-status{font-size:11px;color:var(--accent);overflow-wrap:anywhere}
/* TR02 desktop shell -------------------------------------------------------
   The grid applies the sidebar offset exactly once (column 1 -> 2) and the
   player reserve exactly once (row 2). `.main-scroll` is the only vertical
   scroller; the fixed-height topbar and the persistent player never scroll
   with the catalog. The content wrapper is centered inside the main column,
   never across the whole window, so 1500+/3440 layouts cannot produce a
   centered double-offset band. */
.app-shell > audio { display:none; }
.main-scroll {
  flex:1 1 auto; min-width:0; min-height:0;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--vela-scrollbar) transparent;
}
.main-scroll::-webkit-scrollbar { width:10px; }
.main-scroll::-webkit-scrollbar-track { background:transparent; }
.main-scroll::-webkit-scrollbar-thumb {
  background:var(--vela-scrollbar); border:2px solid transparent;
  border-radius:8px; background-clip:content-box;
}
.content-inner {
  width:100%; max-width:var(--vela-content-max); min-width:0;
  margin:0 auto;
  padding:var(--vela-content-top) max(var(--vela-gutter), var(--vela-safe-right)) 24px
    max(var(--vela-gutter), var(--vela-safe-left));
}
.player-center {
  display:flex; flex-direction:column; justify-content:center;
  width:100%; max-width:var(--vela-transport-max); margin:0 auto;
  min-width:0; height:100%;
}
.player-buttons { flex:0 0 44px; height:44px; margin:0; }
.seek-row { flex:0 0 44px; height:44px; min-height:44px; }
.player-right { min-width:0; }
.avatar { background:var(--vela-avatar-bg); color:var(--vela-avatar-text); border:1px solid var(--vela-border); }
.queue-panel { background:var(--vela-popover); border-left-color:var(--vela-border); }
@media(min-width:1500px){:root{--vela-sidebar-width:240px;--vela-gutter:48px;--vela-content-top:35px}.library-banner{min-height:320px;padding:40px 45px}.library-banner h2{font-size:48px}.banner-record{width:390px;height:390px;right:65px;top:18px}.banner-record>div{width:135px;height:135px;font-size:85px;line-height:125px}.banner-record>div:after{top:64px;left:64px}.track-row{min-height:75px}}
@media(max-width:1100px){:root{--vela-sidebar-width:190px;--vela-gutter:25px}.sidebar{padding:28px 14px}.track-header,.track-row{grid-template-columns:25px minmax(160px,1.5fr) minmax(100px,1fr) 48px 77px;gap:10px}.track-header>span:nth-child(4),.track-row>.quality-tag{display:none}.banner-record{right:-30px;width:310px;height:310px}.library-banner{padding:28px}.library-banner h2{font-size:35px}.player-bar{gap:17px;padding-left:20px;padding-right:20px;grid-template-columns:minmax(160px,1fr) minmax(260px,1.4fr) minmax(120px,.7fr)}.player-buttons{gap:12px}.player-right{gap:6px}.player-right input{max-width:66px}.import-layout{grid-template-columns:1fr 1fr;gap:16px}.panel{padding:23px}.section-toolbar{flex-wrap:wrap}.section-toolbar .search-form{flex:1;max-width:310px}.settings-grid{gap:16px}}
@media(max-width:850px){:root{--vela-sidebar-width:175px;--vela-gutter:20px}.sidebar .brand{margin-left:9px}.sidebar .nav-item{padding-left:10px;gap:9px}.sidebar-collection{margin-left:9px;margin-right:9px}.breadcrumb{font-size:8px;letter-spacing:1px}.topbar-actions{gap:9px}.banner-record{right:-100px;top:28px}.library-banner h2{font-size:32px}.library-banner p{max-width:240px}.track-header,.track-row{grid-template-columns:20px minmax(150px,1fr) 42px 73px;gap:9px}.track-album,.track-header>span:nth-child(3){display:none}.track-title{gap:9px}.track-title strong{font-size:11px}.track-title small{font-size:9px}.artwork{width:37px;height:37px;min-width:37px}.track-actions{gap:0}.track-actions .icon-button{min-width:22px}.track-actions .icon-button:last-child{font-size:17px}.import-layout{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.player-bar{grid-template-columns:minmax(160px,1fr) minmax(250px,1.5fr);padding:12px 20px}.player-right{display:none}.now-playing .artwork{width:44px;height:44px;min-width:44px}.player-buttons{gap:13px}.auth-story{padding:40px 12%}.auth-story h1{font-size:58px}.auth-card{padding:40px 30px}.vinyl{bottom:30px;width:380px;height:380px}.sidebar .avatar{width:28px;height:28px}.account{gap:8px;padding-left:4px}.account strong{max-width:85px;font-size:10px}.account small{font-size:8px}}
@media(max-width:620px){:root{--vela-sidebar-width:0px;--vela-gutter:20px;--vela-content-top:25px;--vela-topbar-height:63px;--vela-player-height:var(--vela-mobile-player-height)}.app-shell{padding:0}.sidebar{display:none}.breadcrumb{max-width:130px;line-height:1.7;font-size:8px}.topbar .button{font-size:10px;padding:8px 12px;min-height:35px}.theme-button{font-size:21px}.page-heading{margin-bottom:24px}.page-heading .eyebrow{font-size:8px;letter-spacing:1.8px}h1{font-size:32px;letter-spacing:-1.2px}.library-banner{min-height:240px;padding:26px 22px;border-radius:12px;margin-bottom:30px}.library-banner h2{font-size:33px}.library-banner p{font-size:10px;max-width:210px}.banner-record{width:235px;height:235px;right:-100px;top:58px;opacity:.9}.banner-record>div{width:90px;height:90px;font-size:56px;line-height:85px}.banner-record>div:after{left:42px;top:42px;width:6px;height:6px}.banner-caption{display:none}.library-banner .eyebrow{font-size:8px}.library-banner .button{font-size:10px;padding:9px 14px}.section-toolbar{gap:14px;align-items:flex-start;margin-bottom:16px}.section-toolbar h2{font-size:20px}.section-toolbar p{font-size:10px}.section-toolbar .search-form{width:100%;max-width:100%;flex-basis:100%}.search-form input{min-height:39px}.track-header{font-size:7px;padding-right:0;padding-left:0}.track-header,.track-row{grid-template-columns:18px minmax(100px,1fr) 35px 53px;gap:8px}.track-row{min-height:67px;padding:9px 0;border-radius:0}.track-title{gap:10px}.track-title strong{font-size:11px}.track-title small{font-size:9px}.artwork{width:39px;height:39px;min-width:39px}.track-duration{font-size:9px}.track-actions .icon-button{min-width:25px;height:33px;font-size:20px}.track-actions .icon-button:nth-child(3){display:none}.pagination{flex-wrap:wrap;margin-top:20px;gap:10px}.pagination>span{font-size:9px;order:3;width:100%;text-align:center}.pagination .button{font-size:10px;min-height:34px;padding:7px 12px}.content-footer{font-size:7px;margin-top:36px;padding-top:19px;letter-spacing:1px}.empty-state{min-height:230px}.empty-state h3{font-size:19px}.empty-state p{font-size:11px}.player-bar{bottom:63px;height:77px;grid-template-columns:minmax(100px,1fr) 110px;gap:8px;padding:12px 18px 16px}.now-playing{gap:10px}.now-playing .artwork{width:42px;height:42px;min-width:42px}.now-playing strong{font-size:11px}.now-playing small{font-size:9px}.player-center{display:flex;align-items:center;justify-content:flex-end}.player-buttons{margin:0;gap:10px}.player-buttons .icon-button:first-child,.player-buttons .icon-button:nth-child(2),.player-buttons .icon-button:last-child{display:none}.player-buttons .icon-button{font-size:13px}.play-toggle{width:33px;height:33px}.seek-row{position:absolute;left:0;right:0;bottom:0;height:12px;gap:0}.seek-row>span{display:none}.seek-row>input{width:100%;height:12px;min-height:12px;margin:0;border-radius:0}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:63px;background:var(--surface);border-top:1px solid var(--line);z-index:45;justify-content:space-around;padding:6px 8px max(7px,var(--vela-safe-bottom));align-items:center}.mobile-nav button{color:var(--quiet);background:none;display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:55px;gap:1px}.mobile-nav button>span{font-size:20px}.mobile-nav button>small{color:inherit;font-size:8px}.mobile-nav button.active{color:var(--accent)}.queue-panel{bottom:140px;padding:25px 20px}.queue-panel h2{font-size:22px}.import-layout{gap:15px}.panel{padding:23px 20px}.panel h2{font-size:22px}.import-card input{font-size:11px}.import-card .button{font-size:11px}.job-card{padding:13px;gap:11px}.job-card .button{font-size:9px;padding:7px 11px;min-height:30px}.job-icon{width:32px;height:32px;min-width:32px;font-size:18px}.job-info strong{font-size:10px}.job-status{font-size:9px}.playlist-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:25px}.playlist-card{padding:12px}.playlist-art{font-size:55px;margin-bottom:12px}.playlist-card h3{font-size:12px}.playlist-card p{font-size:9px}.playlist-detail .section-toolbar .button{font-size:10px;min-height:35px;padding:8px 13px}.inline-form{width:100%}.inline-form input{font-size:11px}.inline-form .button{font-size:10px}.sharing-controls h3{font-size:16px}.sharing-controls p{font-size:10px}.checkbox-label{font-size:9px}.settings-grid dl{font-size:10px;gap:14px}.modal-backdrop{padding:16px}.modal{padding:23px 23px;max-height:92vh}.modal h2{font-size:25px}.modal>p{font-size:11px}.modal .button{font-size:11px}.auth-shell{grid-template-columns:1fr}.auth-story{padding:24px 27px 35px;min-height:260px}.auth-story>.brand{font-size:26px;margin-bottom:37px}.auth-story .brand img{width:32px;height:32px}.auth-story h1{font-size:48px;letter-spacing:-2px;line-height:1.02}.auth-story .eyebrow{font-size:8px;margin-bottom:12px}.auth-story>p{font-size:11px;max-width:210px;margin-bottom:0}.vinyl{width:230px;height:230px;right:-95px;bottom:0}.vinyl-label{width:95px;height:95px}.vinyl-label span{font-size:27px}.vinyl-label small{display:none}.auth-footer{display:none}.auth-card{width:100%;padding:36px 27px 35px}.auth-card h2{font-size:25px}.auth-card p{font-size:12px}.version{margin-top:28px;font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.player-buttons .mobile-queue{display:none}.queue-playback-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 0 18px;margin-bottom:8px;border-bottom:1px solid var(--line)}.queue-playback-controls label{font-size:10px;margin:10px 0 0;width:100%;color:var(--muted)}.queue-playback-controls input{width:100%}@media(max-width:850px){.player-buttons .mobile-queue{display:inline-grid}}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 24px;
}
.catalog-card {
  min-width: 0;
  padding: 0;
  text-align: left;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  transition: transform .15s;
}
.catalog-card:hover {
  transform: translateY(-1px);
}
.catalog-card:active { transform: scale(.98); }
.catalog-cover {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(135deg, #667b56, #243e31);
  color: #d5d0aa;
}
.catalog-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catalog-cover span {
  font-family: Georgia, serif;
  font-size: 55px;
}
.artist-cover {
  border-radius: 50%;
  background: linear-gradient(140deg, #526f69, #253b43);
}
.artist-cover span {
  font-size: 85px;
}
.catalog-card .catalog-cover {
  margin-bottom: 10px;
}
.catalog-card h3 {
  margin-bottom: 5px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.catalog-card p {
  margin-bottom: 8px;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.catalog-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  color: var(--quiet);
}
.artist-card {
  text-align: center;
}
.artist-card .catalog-cover {
  width: 86%;
  margin: 4px auto 18px;
}
.catalog-back {
  margin-bottom: 23px;
}
.catalog-detail-header {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  margin-bottom: 35px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.catalog-detail-info h2 {
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -1px;
  overflow-wrap: anywhere;
  margin-bottom: 8px;
}
.catalog-credit {
  margin-bottom: 15px;
  font-size: 13px;
}
.catalog-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  font-size: 11px;
  color: var(--muted);
}
.catalog-facts span + span:before {
  content: "·";
  margin-right: 14px;
  color: var(--quiet);
}
@media (max-height: 850px) and (min-width: 621px) {
  .sidebar-collection { display: none; }
  .sidebar .brand { margin-bottom: 27px; }
}
@media (max-width: 850px) {
  .catalog-grid { gap: 17px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .catalog-detail-header { grid-template-columns: 145px minmax(0, 1fr); gap: 22px; }
  .catalog-detail-info h2 { font-size: 28px; }
}
@media (max-width: 620px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .catalog-card { padding: 10px; }
  .catalog-card h3 { font-size: 12px; }
  .catalog-card p { font-size: 9px; }
  .catalog-card-meta { font-size: 8px; }
  .catalog-detail-header { grid-template-columns: 110px minmax(0, 1fr); gap: 19px; padding-bottom: 23px; margin-bottom: 25px; }
  .catalog-detail-info h2 { font-size: 23px; letter-spacing: -.7px; }
  .catalog-detail-info .eyebrow { font-size: 8px; margin-bottom: 9px; }
  .catalog-credit { font-size: 10px; margin-bottom: 11px; }
  .catalog-facts { gap: 8px; font-size: 9px; margin-bottom: 13px; }
  .catalog-facts span + span:before { margin-right: 8px; }
  .catalog-detail-info .button { font-size: 10px; min-height: 35px; padding: 8px 12px; }
  .catalog-cover span { font-size: 43px; }
  .artist-cover span { font-size: 65px; }
  .mobile-nav { overflow-x: auto; justify-content: flex-start; gap: 3px; scrollbar-width: none; }
  .mobile-nav button { min-width: 47px; flex: 1 0 47px; }
  .mobile-nav button small { font-size: 7px; }
}

.metadata-dialog { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:18px; padding:28px; width:min(580px,calc(100% - 32px)); max-height:90dvh; overflow:auto; box-shadow:var(--shadow); }
.metadata-dialog::backdrop { background:#060d0bcc; backdrop-filter:blur(6px); }
.metadata-heading h2 { font-size:27px; }
.metadata-heading p { font-size:12px; margin-bottom:12px; }
.metadata-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.metadata-field input { width:100%; }
.metadata-field label { margin-top:12px; }
.metadata-field:first-child { grid-column:1/-1; }
.metadata-hint { font-size:12px; grid-column:1/-1; margin:16px 0 8px; }
.metadata-footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:20px; }
.metadata-dialog .empty-state { padding:24px; }
@media(max-width:480px) { .metadata-dialog { padding:20px; } .metadata-heading h2 { font-size:23px; } .metadata-fields { gap:0 10px; } .metadata-footer .button { font-size:11px; padding:10px 12px; } }
@media(max-width:720px) { .track-header,.track-row { grid-template-columns:18px minmax(100px,1fr) 35px 100px; gap:8px; } .track-actions .icon-button.metadata-edit { display:inline-grid; } }

.scanner-panel { grid-column:1/-1; min-width:0; }
.scanner-panel > p { max-width:760px; font-size:12px; line-height:1.75; }
.scanner-panel .section-toolbar { align-items:center; margin-bottom:14px; }
.scanner-panel .eyebrow { margin-bottom:9px; }
.scanner-panel h2 { margin-bottom:0; }
.scanner-source-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:16px; align-items:end; margin-bottom:22px; }
.scanner-source-form input,.scanner-source-form select { width:100%; min-width:0; }
.scanner-source-form > .button { margin-top:0; }
.scanner-sources { border-top:1px solid var(--line); margin:23px 0 12px; }
.scanner-source { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.scanner-source > div:first-child { min-width:0; }
.scanner-source h3 { font-size:14px; margin-bottom:4px; overflow-wrap:anywhere; }
.scanner-source small { font-size:11px; overflow-wrap:anywhere; }
.scanner-actions { display:flex; gap:9px; flex-shrink:0; }
.scanner-panel .scanner-hint { font-size:11px; margin:12px 0 20px; line-height:1.7; }
.scanner-empty { padding:20px 0; font-size:12px; }
.scanner-empty h3 { font-size:15px; }
.scanner-empty p { font-size:12px; }
.scanner-jobs-heading { margin:28px 0 16px; }
.scanner-jobs-heading h3 { margin-bottom:5px; }
.scanner-job { border:1px solid var(--line); padding:18px 20px; border-radius:10px; background:var(--bg); margin-bottom:12px; min-width:0; }
.scanner-job-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.scanner-job-heading strong { font-size:12px; overflow-wrap:anywhere; }
.scanner-job-status { display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.scanner-progress { width:100%; height:4px; display:block; margin-top:14px; accent-color:var(--accent); }
.settings-grid .scanner-counters { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:17px 0 0; }
.scanner-counters > div { min-width:0; }
.scanner-counters dt { font-size:9px; color:var(--muted); margin-bottom:4px; }
.scanner-counters dd { margin:0; font-size:15px; color:var(--text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.scanner-job .scanner-job-error { color:var(--danger); font-size:11px; margin:14px 0 0; overflow-wrap:anywhere; }
.scanner-job > small { font-size:10px; margin-top:12px; }
@media(max-width:850px) { .scanner-source-form { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; } .scanner-source-form > .button { justify-self:start; margin-top:16px; grid-column:1/-1; } }
@media(max-width:620px) { .scanner-source-form { grid-template-columns:1fr; } .scanner-source { align-items:flex-start; flex-direction:column; gap:12px; } .scanner-panel .section-toolbar { gap:12px; } .scanner-panel > p { font-size:11px; } .scanner-actions { flex-wrap:wrap; } .scanner-job { padding:15px; } .scanner-job-heading .button { font-size:10px; padding:8px 10px; } .settings-grid .scanner-counters { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .scanner-counters dd { font-size:14px; } }

.library-filters { margin:20px 0; min-width:0; }
.filter-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.filter-toolbar > .button { flex-shrink:0; }
.filter-summary { color:var(--muted); font-size:11px; margin:0; flex:1 1 220px; overflow-wrap:anywhere; line-height:1.7; }
.filter-form { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:20px; margin-top:14px; min-width:0; }
.filter-suggestions-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; }
.filter-suggestions-heading p { font-size:12px; color:var(--muted); margin:0; line-height:1.7; }
.filter-suggestions-heading .button { flex-shrink:0; }
.filter-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px 18px; }
.filter-field { min-width:0; }
.filter-field label { font-size:11px; margin:0 0 8px; display:block; }
.filter-field input,.filter-field select { width:100%; min-width:0; font-size:12px; padding:11px 12px; }
.filter-field select { text-overflow:ellipsis; }
.filter-hint { font-size:11px; color:var(--muted); line-height:1.7; margin:16px 0; }
.filter-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.filter-actions small { flex:1 1 190px; font-size:11px; color:var(--muted); line-height:1.7; }
.applied-search { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted); margin:16px 0; overflow-wrap:anywhere; }
@media(max-width:1100px) { .filter-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
  .filter-form { padding:16px; }
  .filter-fields { gap:14px 12px; }
  .filter-suggestions-heading { align-items:flex-start; flex-direction:column; gap:10px; }
  .filter-toolbar { gap:10px; }
  .filter-summary { flex-basis:100%; order:2; }
  .filter-field label { font-size:10px; min-height:25px; display:flex; align-items:end; }
  .filter-field input,.filter-field select { font-size:11px; padding:10px; }
  .filter-actions small { flex-basis:100%; }
}
@media(max-width:360px) { .filter-fields { grid-template-columns:1fr; } .filter-field label { min-height:0; } }

/* The task center keeps server history bounded while leaving progress legible. */
.job-center { min-width:0; }
.job-center-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; margin-bottom:24px; }
.job-center-controls label { margin-top:0; }
.job-center-controls select { width:100%; }
.job-center-controls p { grid-column:1/-1; margin:16px 0 0; font-size:11px; color:var(--muted); }
.job-center-update,.job-center-stale,.job-center-hint,.job-center-warning { font-size:11px; line-height:1.7; color:var(--muted); }
.job-center-stale,.job-center-warning { border-left:3px solid var(--accent); padding-left:12px; }
.background-jobs { display:grid; gap:14px; }
.background-job { min-width:0; }
.background-job-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.background-job-heading > div { min-width:0; }
.background-job-heading .eyebrow { font-size:9px; letter-spacing:1px; margin-bottom:9px; }
.background-job-heading h3 { margin:0 0 5px; font-size:17px; overflow-wrap:anywhere; }
.background-job-heading small { font-size:10px; color:var(--muted); }
.background-job-status { color:var(--accent); background:var(--surface-hover); font-size:10px; padding:7px 10px; border-radius:20px; flex-shrink:0; }
.background-job-transfer { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.background-job progress { display:block; width:100%; height:5px; accent-color:var(--accent); margin:12px 0 18px; }
.background-job-counters { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:17px 0; }
.background-job-counters dt { font-size:9px; color:var(--muted); margin-bottom:5px; }
.background-job-counters dd { font-size:17px; font-variant-numeric:tabular-nums; margin:0; }
.background-job-actions,.job-center-links { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; }
.background-job-actions .button { margin:0; }
.job-center-links { padding-top:22px; border-top:1px solid var(--line); margin-top:25px; }
.job-center-empty { min-height:210px; }
@media(max-width:850px) {
  .background-job-counters { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media(max-width:620px) {
  /* Eight visible destinations stay keyboard/touch accessible at 320px. */
  .mobile-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,1fr); height:104px; gap:1px; padding:4px 7px max(4px,var(--vela-safe-bottom)); overflow:visible; }
  .mobile-nav button { min-width:0; min-height:44px; width:100%; gap:0; }
  .mobile-nav button > span { font-size:17px; line-height:20px; }
  .mobile-nav button small { font-size:10px; line-height:14px; }
  .player-bar { bottom:104px; }
  .app-shell { padding-bottom:194px; }
  .queue-panel { bottom:181px; }
  .job-center-controls { gap:0 13px; padding:18px; }
  .job-center-controls label { font-size:10px; }
  .job-center-controls select { font-size:11px; padding-left:9px; padding-right:5px; }
  .job-center-controls p { font-size:10px; }
  .background-job { padding:18px; }
  .background-job-heading { flex-direction:column; gap:12px; margin-bottom:16px; }
  .background-job-heading h3 { font-size:15px; }
  .background-job-status { font-size:10px; padding:6px 9px; }
  .background-job-actions .button,.job-center-links .button { min-height:40px; font-size:10px; padding:9px 12px; }
  .job-center-pagination .button { min-height:40px; }
}

/* Listening shell: original Vela surfaces, real artwork and a stable root player. */
.vela-icon { display:inline-block; width:22px; height:22px; flex-shrink:0; vertical-align:middle; }
.icon-button .vela-icon { width:19px; height:19px; }
.play-toggle .vela-icon { width:22px; height:22px; }
.button .vela-icon { width:18px; height:18px; }
.artwork > .vela-icon { width:50%; height:50%; }
.sidebar .brand { margin-bottom:20px; }
.sidebar > nav,.sidebar-bottom { flex-shrink:0; }
.sidebar-library { flex:1; min-height:0; overflow-y:auto; margin-top:18px; }
.sidebar-library .nav-label { margin-bottom:9px; }
.sidebar .nav-item { height:40px; }
.sidebar-bottom { margin-top:12px; }
.sidebar-playlists { margin:15px 0; padding-top:12px; border-top:1px solid var(--line); }
.sidebar-playlist { display:flex; align-items:center; width:100%; text-align:left; gap:10px; padding:10px 12px; background:none; color:var(--muted); border-radius:8px; font-size:11px; }
.sidebar-playlist span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-playlist .vela-icon { width:17px; height:17px; }
.sidebar-playlist:hover { background:var(--surface-hover); color:var(--text); }
.home-hero { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:35px 40px; border-radius:20px; background:linear-gradient(125deg,#234e40,#16392e 70%,#325341); color:#f4f0e4; overflow:hidden; }
.home-hero h1 { font-size:clamp(30px,3.3vw,48px); margin-bottom:12px; overflow-wrap:anywhere; }
.home-hero .eyebrow,.home-hero p { color:#bdd8c9; }
.home-hero .button { margin-top:7px; }
.home-artwork { width:190px; flex-shrink:0; transform:rotate(7deg); }
.home-artwork .artwork { width:100%; height:100%; aspect-ratio:1; border-radius:12px; box-shadow:0 18px 40px #0004; }
.home-vinyl { width:180px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:repeating-radial-gradient(circle,#13281f 0,#13281f 3px,#355640 4px,#142b21 5px); }
.home-vinyl span { width:65px; height:65px; border-radius:50%; background:var(--sand); color:#253c31; display:grid; place-items:center; font-size:36px; font-family:Georgia,serif; font-style:italic; }
.home-toolbar { margin:25px 0; }
.home-toolbar p { margin:0; font-size:12px; }
.home-section,.search-result-section { margin:30px 0 38px; }
.text-button { background:none; color:var(--accent); font-size:12px; padding:9px 3px; text-align:left; min-height:40px; }
.text-button:hover { text-decoration:underline; }
.home-track-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; }
.listening-card { min-width:0; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-align:left; color:var(--text); transition:background-color .15s,transform .15s; }
.listening-card:active { transform:scale(.98); }
.listening-card:hover { background:var(--surface-raised); }
.listening-card-play { width:100%; padding:0; text-align:left; background:none; color:var(--text); }
.listening-card strong,.collection-card strong { display:block; font-size:13px; margin:12px 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.listening-card small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.listening-cover { position:relative; }
.listening-cover .artwork { width:100%; height:auto; aspect-ratio:1; border-radius:9px; }
.cover-play { position:absolute; right:10px; bottom:10px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--accent-text); box-shadow:0 3px 15px #0004; }
.cover-play .vela-icon { width:20px; height:20px; }
.listening-actions { display:flex; justify-content:space-between; align-items:center; gap:2px; margin-top:11px; }
.listening-actions .icon-button { min-width:32px; }
.home-album-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; }
.collection-card .catalog-cover { width:100%; aspect-ratio:1; }
.home-playlist-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.home-playlist-card { display:flex; align-items:center; gap:16px; padding:18px; min-width:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); text-align:left; }
.home-playlist-card:hover { background:var(--surface-hover); }
.home-playlist-card > .vela-icon { width:34px; height:34px; color:var(--accent); }
.home-playlist-card > div { min-width:0; }
.home-playlist-card > .catalog-cover {
  width:56px;
  height:56px;
  flex:0 0 56px;
  margin:0;
  border-radius:6px;
}
.home-playlist-card strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.home-playlist-card small { font-size:11px; margin-top:4px; }
.global-search-form { display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:9px 10px 9px 18px; }
.global-search-form > .vela-icon { color:var(--muted); }
.global-search-form input { width:100%; flex:1; min-width:0; background:none; border:0; font-size:16px; }
.search-categories { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 12px; }
.filter-chip { min-height:40px; padding:8px 17px; border:1px solid var(--line); border-radius:24px; background:var(--surface); color:var(--text); font-size:12px; }
.filter-chip.active { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.search-scope { font-size:11px; margin:12px 0; }
.search-track-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 12px; border-bottom:1px solid var(--line); }
.search-track-row:hover { background:var(--surface); }
.search-track-main { display:flex; align-items:center; gap:14px; min-width:0; flex:1; color:var(--text); background:none; text-align:left; padding:0; }
.search-track-main > div { flex:1; min-width:0; }
.search-track-main strong { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-track-main small { font-size:11px; }
.search-track-row .listening-actions { margin:0; flex-shrink:0; }
.track-info-menu { position:relative; }
.track-info-menu summary { display:grid; place-items:center; cursor:pointer; width:32px; height:36px; color:var(--muted); border-radius:8px; list-style:none; }
.track-info-menu summary::-webkit-details-marker { display:none; }
.track-info-menu summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.track-info-content { position:absolute; z-index:45; right:0; top:100%; width:240px; max-width:80vw; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--surface-raised); box-shadow:var(--shadow); }
.track-info-content strong { font-size:13px; margin:0 0 12px; }
.track-info-content dl { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; font-size:11px; }
.track-info-content dt { color:var(--muted); }
.track-info-content dd { margin:0; text-align:right; }
.loading-skeletons { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:18px; margin:25px 0; }
.skeleton-card,.skeleton-row { border-radius:14px; background:var(--surface-raised); animation:vela-pulse 1.4s ease-in-out infinite alternate; }
.skeleton-card { height:235px; }.skeleton-row { height:66px; }
@keyframes vela-pulse { from {opacity:.45;} to {opacity:1;} }
@media(max-width:900px) { .home-hero {padding:28px;} .home-artwork {width:155px;} }
@media(max-width:620px) {
  .mobile-nav.listening-mobile-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:1fr; height:calc(70px + var(--vela-safe-bottom)); padding:7px 6px max(7px,var(--vela-safe-bottom)); gap:2px; }
  .mobile-nav.listening-mobile-nav button { min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .mobile-nav.listening-mobile-nav small { font-size:10px; line-height:16px; }
  .mobile-nav.listening-mobile-nav .vela-icon { width:22px; height:22px; }
  .queue-panel {bottom:calc(var(--vela-player-height) + var(--vela-mobile-nav-height) + var(--vela-safe-bottom));}
  .home-hero { padding:25px 22px; gap:12px; }
  .home-hero h1 {font-size:30px;letter-spacing:-1px;}
  .home-hero p {font-size:12px;}
  .home-artwork {width:85px;align-self:flex-start;margin-top:20px;}
  .home-vinyl {width:85px;}.home-vinyl span {width:37px;height:37px;font-size:26px;}
  .home-hero .button {font-size:11px;padding:10px 13px;}
  .home-track-grid {grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:16px;}
  .home-album-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .home-playlist-grid {grid-template-columns:1fr;}
  .home-toolbar {align-items:flex-start;gap:15px;}
  .home-toolbar p {font-size:11px;}
  .listening-actions .icon-button,.track-info-menu summary {width:44px;min-width:44px;height:44px;}
  .home-track-grid .listening-card {display:grid;grid-template-columns:1fr;}
  .listening-cover .artwork {max-height:260px;object-fit:cover;}
  .listening-card strong {font-size:14px;}
  .global-search-form {padding:6px 9px;gap:3px;}
  .global-search-form > .vela-icon {display:none;}
  .global-search-form input {font-size:14px;padding:9px;}
  .global-search-form .button {padding:9px 12px;min-height:44px;font-size:11px;}
  .filter-chip {min-height:44px;padding:8px 13px;}
  .search-track-row {align-items:stretch;flex-direction:column;gap:8px;padding:12px 0;}
  .search-track-row .listening-actions {justify-content:flex-end;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}}

/* DR05: one presentation stack for the root's own feedback.
   The recovery status, the Undo receipt and the ordinary receipt are three
   signals of the root, projected into one column beside the persistent
   player. Nothing here is a new store: the DOM order is recovery, Undo
   receipt, ordinary receipt, so a real failure is never hidden under a
   receipt. The stack is a sibling of the player, never over the browser's
   top layer, and it never takes focus. */
.feedback-stack {
  position: fixed;
  z-index: 60;
  bottom: calc(var(--vela-bottom-reserve) + 16px);
  right: 24px;
  width: min(600px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100dvh / var(--app-zoom, 1) - var(--vela-topbar-height)
    - var(--vela-safe-top) - var(--vela-bottom-reserve) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  pointer-events: none;
}
.feedback-stack > * { pointer-events: auto; }
.feedback-stack .alert {
  margin: 0;
  width: 100%;
  position: static;
  inset: auto;
  max-width: none;
  background: var(--surface-raised);
  border-color: var(--control-line);
  box-shadow: var(--shadow);
  color: var(--text);
}
.feedback-stack .alert.error { color: var(--danger); }
.feedback-stack .alert.success { color: var(--accent); }
.feedback-stack .alert > div { min-width: 0; }
.feedback-stack .alert p { color: inherit; margin: 6px 0 0; overflow-wrap: anywhere; }
/* DR05: the stack's dismiss and action targets keep a 44px rectangle on every
   input type, not only on touch. The receipt is dismissed with a mouse as
   often as with a finger, and a 32px target is a miss waiting to happen. */
.feedback-stack .alert button[aria-label^="Dismiss"] {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  flex-shrink: 0;
}
.feedback-stack .playback-status { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.feedback-stack .playback-status .text-button { flex-shrink: 0; min-height: 44px; }
.feedback-stack .playlist-undo { flex-wrap: wrap; row-gap: 8px; }
.feedback-stack .playlist-undo .button { flex-shrink: 0; }
@media (max-width: 760px) {
  .feedback-stack { left: 16px; right: 16px; width: auto; }
}
@media (max-width: 620px) {
  .feedback-stack .playback-status { font-size: 12px; flex-wrap: wrap; gap: 5px; }
}
.queue-context {max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px;}
@media(max-width:620px){.queue-context {max-width:190px;}}

/* Private history uses existing surfaces; it never owns the player. */
.listening-privacy .checkbox-label{white-space:normal;display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;margin:18px 0}.listening-privacy .checkbox-label input{flex:0 0 18px;margin-top:2px}.listening-privacy select{width:100%;margin-bottom:15px}.listening-privacy-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.listening-privacy-actions .button,.history-delete-confirm .button{white-space:normal;text-align:center}.history-delete-confirm{border:1px solid var(--danger);border-radius:12px;padding:18px;margin-top:20px}.history-delete-confirm .button{margin:4px 8px 4px 0;max-width:100%}.history-track-list{display:grid;gap:8px}.history-track{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:8px 16px 8px 8px;min-width:0}.history-play{display:flex;align-items:center;gap:13px;min-width:0;flex:1;text-align:left;color:var(--text);background:none;padding:4px;border-radius:8px}.history-play .artwork{width:48px;height:48px;min-width:48px}.history-play>div{min-width:0}.history-play strong,.history-play small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-play .vela-icon{margin-left:auto;flex-shrink:0}.history-track>small{white-space:nowrap}.listening-history .section-toolbar p{margin-bottom:0}.listening-history .pagination{gap:10px;flex-wrap:wrap}@media(max-width:500px){.history-track{gap:8px;padding-right:10px}.history-play{gap:10px}.history-play .artwork{width:40px;height:40px;min-width:40px}.history-play .vela-icon{display:none}.history-track>small{font-size:10px}.listening-privacy-actions{flex-direction:column}.listening-privacy-actions .button{width:100%}.listening-privacy .checkbox-label{font-size:13px}.listening-history .section-toolbar{align-items:flex-start;gap:10px;flex-wrap:wrap}}

/* Local radio shares the listener surfaces and the root playback coordinator. */
.radio-page{max-width:1200px;margin:auto;min-width:0}.radio-hero{display:flex;align-items:center;gap:28px;margin:12px 0 32px;padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(125deg,var(--surface-raised),var(--surface))}.radio-hero>.artwork{width:160px;height:160px;flex-shrink:0;border-radius:16px}.radio-hero>div{min-width:0}.radio-hero h2{font-size:clamp(24px,3vw,40px);letter-spacing:-1px;overflow-wrap:anywhere;margin:10px 0}.radio-hero p,.radio-coverage,.radio-reason{color:var(--muted);line-height:1.6}.radio-track-list{display:grid;gap:10px;margin:22px 0 32px}.radio-track{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,240px) auto;align-items:center;gap:16px;border:1px solid var(--line);border-radius:14px;padding:10px;background:var(--surface)}.radio-track-play{display:flex;align-items:center;gap:14px;min-width:0;background:none;color:var(--text);text-align:left;border-radius:8px;min-height:52px}.radio-track-play .artwork{width:48px;height:48px;min-width:48px;flex-shrink:0}.radio-track-description{min-width:0;flex:1}.radio-track-play strong,.radio-track-play small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.radio-track-play small{color:var(--muted);margin-top:4px}.radio-track-play>.vela-icon{flex-shrink:0}.radio-track-actions,.radio-analysis-actions{display:flex;gap:10px;flex-wrap:wrap}.radio-reason{font-size:12px;margin:0}.radio-analysis{min-width:0;margin-bottom:24px}.analysis-counts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:24px 0}.analysis-counts dt{font-size:11px;color:var(--muted);grid-row:1}.analysis-counts dd{font-size:22px;font-weight:600;margin:0;grid-row:2}.radio-analysis-actions{margin:20px 0}.radio-analysis-actions .button{white-space:normal;max-width:100%}.radio-measurements{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}.radio-measurements summary{cursor:pointer;min-height:44px;line-height:44px;font-weight:600}.radio-measurements dl{display:grid;grid-template-columns:minmax(100px,1fr) minmax(120px,1fr);gap:12px;font-size:13px}.radio-measurements dt{color:var(--muted)}.radio-measurements dd{margin:0;overflow-wrap:anywhere}.radio-measurements small{line-height:1.6}.radio-page .section-toolbar{flex-wrap:wrap;gap:14px}.radio-page .section-toolbar h3{margin-bottom:6px}.track-actions .track-radio{min-width:44px}
@media(max-width:760px){.radio-hero{padding:20px;gap:18px;align-items:flex-start}.radio-hero>.artwork{width:100px;height:100px}.radio-track{grid-template-columns:minmax(0,1fr) auto;gap:8px}.radio-reason{grid-column:1/-1;grid-row:2;margin-left:6px}.radio-track-actions{grid-column:2;grid-row:1}.analysis-counts{grid-template-columns:repeat(3,minmax(0,1fr))}.analysis-counts dt:nth-of-type(n+4){grid-row:3;margin-top:12px}.analysis-counts dd:nth-of-type(n+4){grid-row:4}.radio-analysis-actions{flex-direction:column}.radio-analysis-actions .button{width:100%}}
@media(max-width:400px){.radio-hero{flex-direction:column;padding:18px}.radio-hero>.artwork{width:110px;height:110px}.radio-track-play{gap:9px}.radio-track-play>.vela-icon{display:none}.radio-track-play .artwork{width:38px;height:38px;min-width:38px}.radio-track-actions{gap:0}.radio-track-actions .icon-button{min-width:40px;width:40px}.radio-reason{font-size:11px}.radio-measurements dl{grid-template-columns:1fr;gap:6px}.radio-measurements dd{margin-bottom:8px}}

.history-radio{flex:0 0 44px;min-width:44px;height:44px}

/* Personal sets are grounded in the owner's library, never a pretend public catalog. */
.personal-mixes{border-top:1px solid var(--line);padding-top:34px;min-width:0}
.personal-mixes-heading{align-items:flex-start;gap:20px}
.personal-mixes-heading>div{min-width:0;max-width:650px}
.personal-mixes-heading .eyebrow{margin-bottom:12px}
.personal-mixes-heading h2{font-size:clamp(25px,3vw,34px);letter-spacing:-1px}
.personal-mixes-heading p{margin-bottom:0;font-size:13px;line-height:1.7}
.personal-mixes-heading>.button{flex-shrink:0;margin-top:5px}
.personal-mix-basis{padding:20px 22px;margin:22px 0 30px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(125deg,var(--surface-raised),var(--surface))}
.personal-mix-basis p{font-size:12px;margin:10px 0;line-height:1.7}
.personal-mix-basis small{font-size:11px;line-height:1.7;margin-top:6px}
.personal-mix-explanation{border-top:1px solid var(--line);margin-top:12px;padding-top:5px}
.personal-mix-explanation summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;font-size:12px;color:var(--accent)}
.personal-mix-explanation summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.personal-mix-tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;background:var(--surface-hover);color:var(--accent);font-size:11px;font-weight:600}
.personal-mix-shelf{margin:28px 0 34px;min-width:0}
.personal-mix-shelf>.section-toolbar{align-items:center;gap:20px}
.personal-mix-shelf>.section-toolbar>div{min-width:0;max-width:650px}
.personal-mix-shelf h3{font-size:22px;letter-spacing:-.55px;margin-bottom:6px}
.personal-mix-shelf>.section-toolbar p{font-size:12px;line-height:1.6;margin:0}
.personal-mix-shelf>.section-toolbar>.button{flex-shrink:0}
.personal-mix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.personal-mix-card{display:flex;flex-direction:column;min-width:0;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--surface);transition:background .15s}
.personal-mix-card:hover{background:var(--surface-raised)}
.personal-mix-play{display:block;text-align:left;min-width:0;width:100%;padding:0;color:var(--text);background:none;border-radius:9px}
.personal-mix-play .listening-cover{min-width:0;width:100%}
.personal-mix-play .artwork{width:100%;height:auto;aspect-ratio:1;min-width:0;border-radius:9px}
.personal-mix-description{min-width:0;margin:13px 0 0}
.personal-mix-description strong,.personal-mix-description small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.personal-mix-description strong{font-size:14px}
.personal-mix-description small{margin-top:4px;font-size:11px}
.personal-mix-reason{margin:12px 0 14px;font-size:11px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.personal-mix-actions{display:flex;align-items:center;justify-content:space-between;gap:2px;margin-top:auto;border-top:1px solid var(--line);padding-top:6px}
.personal-mix-actions .icon-button{min-width:40px;width:40px;height:44px}
.personal-mix-actions .text-button{min-height:44px;padding:8px 5px;font-size:11px}
.personal-mix-empty{display:flex;align-items:center;gap:18px;padding:24px;border:1px dashed var(--line);border-radius:14px;background:var(--surface)}
.personal-mix-empty>.vela-icon{width:28px;height:28px;color:var(--accent);flex-shrink:0}
.personal-mix-empty>div{min-width:0;flex:1}
.personal-mix-empty strong{font-size:14px}
.personal-mix-empty p{font-size:12px;line-height:1.7;margin:6px 0 0}
.personal-mix-empty .text-button{flex-shrink:0;max-width:170px}
.personal-mix-preferences{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;padding-top:12px;border-top:1px solid var(--line)}
.personal-mix-preferences .text-button{font-size:12px;min-height:44px;white-space:normal}
.personal-mix-confirm{margin:18px 0;padding:22px;border:1px solid var(--accent);border-radius:13px;background:var(--surface-raised)}
.personal-mix-confirm p{font-size:13px;line-height:1.7}
.personal-mix-confirm>.button,.personal-mix-confirm>.text-button{margin:4px 16px 4px 0;white-space:normal;min-height:44px}
.personal-mix-notice{overflow-wrap:anywhere}
.personal-mix-undo{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0 0 12px}
.personal-mix-loading{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
@media(max-width:850px){.personal-mixes-heading{flex-wrap:wrap}.personal-mix-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.personal-mix-card{padding:10px}.personal-mix-actions .icon-button{width:36px;min-width:36px}.personal-mix-actions .text-button{padding-left:2px;padding-right:2px}.personal-mix-empty{flex-wrap:wrap}.personal-mix-empty>.text-button{margin-left:46px}}
@media(max-width:620px){.personal-mixes{padding-top:28px}.personal-mixes-heading h2{font-size:27px}.personal-mixes-heading p{font-size:12px}.personal-mixes-heading>.button{min-height:44px;white-space:normal}.personal-mix-basis{padding:17px;margin-bottom:24px}.personal-mix-shelf>.section-toolbar{align-items:flex-start;gap:14px}.personal-mix-shelf h3{font-size:21px}.personal-mix-shelf>.section-toolbar>.button{min-height:44px}.personal-mix-grid{grid-template-columns:1fr;gap:12px}.personal-mix-card{padding:13px}.personal-mix-play{display:flex;align-items:center;gap:14px;min-height:76px}.personal-mix-play .listening-cover{width:76px;flex:0 0 76px}.personal-mix-play .artwork{width:76px;height:76px;min-width:76px}.personal-mix-play .cover-play{width:29px;height:29px;right:4px;bottom:4px}.personal-mix-play .cover-play .vela-icon{width:16px;height:16px}.personal-mix-description{margin:0;flex:1}.personal-mix-description strong{font-size:14px}.personal-mix-description small{font-size:12px;white-space:normal;overflow-wrap:anywhere}.personal-mix-reason{font-size:12px;margin-top:13px}.personal-mix-actions{justify-content:flex-start;gap:12px}.personal-mix-actions .icon-button{min-width:44px;width:44px}.personal-mix-actions .text-button{margin-left:auto;min-width:44px;font-size:12px}.personal-mix-empty{padding:18px;gap:13px}.personal-mix-empty>.vela-icon{width:23px;height:23px}.personal-mix-empty>div{flex-basis:calc(100% - 40px)}.personal-mix-empty>.text-button{margin-left:36px}.personal-mix-preferences{gap:2px 15px}.personal-mix-preferences .text-button{font-size:11px}.personal-mix-confirm{padding:18px}.personal-mix-confirm>.button,.personal-mix-confirm>.text-button{width:100%;margin:4px 0;text-align:center}}

/* Explicit publication keeps owned playback and remote catalog rights distinct. */
.network-page{max-width:1080px;margin:auto;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.network-hero,.network-page>.alert,.network-saving,.network-publications,.network-peers,.network-scope{grid-column:1/-1}
.network-hero{display:flex;gap:22px;align-items:flex-start;padding:8px 0 12px}
.network-hero>.vela-icon{width:44px;height:44px;flex:0 0 44px;color:var(--accent);margin-top:8px}
.network-hero>div{min-width:0;max-width:760px}
.network-hero h2{font-size:clamp(29px,3vw,41px);margin-bottom:14px}
.network-hero p{font-size:13px;line-height:1.8;margin:0;max-width:670px}
.network-page>.panel{min-width:0;align-self:start;padding:25px}
.network-page .section-toolbar{align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.network-page .section-toolbar .eyebrow{margin-bottom:10px}
.network-page .text-button{min-height:44px;white-space:normal;text-align:left;font-size:12px}
.network-page .button{max-width:100%;white-space:normal;text-align:center;min-height:44px}
.network-page .checkbox-label{white-space:normal;align-items:flex-start;gap:10px;font-size:12px;line-height:1.7;margin:20px 0}
.network-page .checkbox-label input{flex:0 0 18px;width:18px;height:20px;margin:2px 0 0}
.network-page input,.network-page select{width:100%;font-size:12px;min-width:0}
.network-page .checkbox-label input{width:18px}
.network-page small{line-height:1.7;font-size:11px}
.network-page form>small{margin:8px 0 17px}
.network-page label{margin-top:18px}
.network-page textarea{display:block;width:100%;min-height:95px;max-width:100%;resize:vertical;border:1px solid var(--line);border-radius:9px;padding:12px 13px;font:inherit;font-size:12px;line-height:1.7;color:var(--text);background:var(--bg)}
.network-page textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.network-page textarea:disabled,.network-page input:disabled,.network-page select:disabled,.network-page fieldset:disabled{opacity:.55}
.network-page .alert{overflow-wrap:anywhere;margin:0;flex-wrap:wrap}
.network-page .alert .text-button{font-size:12px;flex-shrink:0}
.network-server-state{padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:var(--surface-raised)}
.network-server-state strong{color:var(--text);font-size:13px}
.network-server-state small{margin-top:6px}
.network-disabled-note{border-left:2px solid var(--accent);padding:8px 0 8px 13px}
.network-inline-form{display:flex;align-items:flex-start;gap:10px;min-width:0}
.network-inline-form>input{flex:1;min-width:0}
.network-inline-form>.button{flex-shrink:0}
.network-track-results{display:grid;gap:6px;max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;margin:14px 0 8px;padding:6px}
.network-track-choice{display:flex;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;background:none;color:var(--text);padding:8px;border-radius:7px;border:1px solid transparent}
.network-track-choice:hover,.network-track-choice.selected{background:var(--surface-hover);border-color:var(--line)}
.network-track-choice>.artwork{width:38px;height:38px;min-width:38px;flex-shrink:0}
.network-track-choice>span{min-width:0;flex:1}
.network-track-choice strong,.network-track-choice small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.network-track-choice strong{font-size:12px}
.network-track-choice>.vela-icon{flex:0 0 18px;width:18px;height:18px;color:var(--accent)}
.network-selection{padding:17px;margin:20px 0;border:1px solid var(--accent);border-radius:10px;background:var(--surface-raised)}
.network-selection>strong{display:block;font-size:13px;overflow-wrap:anywhere}
.network-selection>small{margin-top:5px}
.network-publication-form{margin-top:24px;border-top:1px solid var(--line);padding-top:2px}
.network-grants{min-width:0;padding:15px 16px 18px;border:1px solid var(--line);border-radius:10px;margin:22px 0}
.network-grants legend{font-size:12px;font-weight:600;padding:0 6px}
.network-grants .checkbox-label{margin:8px 0 14px}
.network-grants small{margin-top:14px}
.network-rights-confirm{border-top:1px solid var(--line);padding-top:18px}
.network-actions{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-top:12px}
.network-actions .text-button{display:inline-flex;align-items:center;gap:7px}
.network-actions .vela-icon{width:17px;height:17px;flex-shrink:0}
.network-actions .network-revoke{color:var(--danger)}
.network-records{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.network-record{min-width:0;border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--bg)}
.network-record-heading{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.network-record-heading>.artwork{width:44px;height:44px;min-width:44px;flex-shrink:0}
.network-record-heading>div:not(.artwork){min-width:0;flex:1}
.network-record-heading h3{font-size:14px;overflow-wrap:anywhere;margin-bottom:4px}
.network-record-heading p{font-size:11px;margin:0;overflow-wrap:anywhere}
.network-status{font-size:10px;border:1px solid var(--line);border-radius:7px;padding:4px 8px;color:var(--accent);background:var(--surface);width:fit-content;max-width:100%;overflow-wrap:anywhere}
.network-record dl{display:grid;grid-template-columns:105px minmax(0,1fr);gap:10px 14px;font-size:11px;margin:14px 0}
.network-record dt{color:var(--muted)}
.network-record dd{margin:0;overflow-wrap:anywhere;min-width:0}
.network-record a,.network-license{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.network-attribution{white-space:pre-wrap;overflow-wrap:anywhere}
.network-record-details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:18px}
.network-record-details summary{cursor:pointer;min-height:44px;font-size:11px;align-content:center;color:var(--muted)}
.network-record-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.network-record-details dl{grid-template-columns:1fr;gap:5px;margin-bottom:18px}
.network-record-details dd{margin-bottom:6px}
.network-pagination{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}
.network-pagination>small{margin-left:auto}
.network-revoke-confirm{padding:22px;margin-top:22px;border:1px solid var(--danger);border-radius:12px;background:var(--surface-raised)}
.network-revoke-confirm h3{overflow-wrap:anywhere}
.network-revoke-confirm p{margin-bottom:8px}
.network-empty{border:1px dashed var(--line);border-radius:12px;padding:24px;margin-top:22px}
.network-empty p{margin-bottom:0}
.network-peer-result{margin-top:28px;border-top:1px solid var(--line);padding-top:23px}
.network-peer-result h3{overflow-wrap:anywhere;font-size:21px;margin-bottom:6px}
.network-origin{overflow-wrap:anywhere;font-size:12px}
.network-peer-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.network-peer-track{border:1px solid var(--line);border-radius:11px;padding:18px;min-width:0;background:var(--bg)}
.network-peer-track h4{font-size:14px;margin:0 0 5px;overflow-wrap:anywhere}
.network-peer-track p{font-size:11px;margin-bottom:13px;overflow-wrap:anywhere}
.network-peer-track .network-license{display:inline-block;margin:0 0 12px;font-size:11px}
.network-peer-track .network-actions{gap:8px}
.network-peer-note,.network-scope{font-size:11px;line-height:1.8;margin:15px 0 0}
.network-scope{border-top:1px solid var(--line);padding-top:20px}
.network-saving{margin:0;font-size:12px;color:var(--accent)}
@media(max-width:1150px){.network-page{grid-template-columns:minmax(0,1fr);gap:20px}.network-page>.panel{padding:24px}.network-publish{grid-column:1/-1}.network-settings{grid-column:1/-1}.network-settings form{max-width:650px}.network-track-results{max-height:240px}.network-records{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.network-records,.network-peer-tracks{grid-template-columns:minmax(0,1fr)}.network-page>.panel{padding:20px}.network-hero{gap:15px}.network-hero>.vela-icon{width:30px;height:30px;flex-basis:30px}.network-hero h2{font-size:29px}.network-hero .eyebrow{font-size:9px;letter-spacing:1.5px}.network-hero p{font-size:12px}.network-record-heading .network-status{flex-basis:100%;width:fit-content}.network-inline-form{flex-wrap:wrap}.network-inline-form>input{flex-basis:100%;width:100%}.network-inline-form>.button{width:100%}.network-pagination>small{flex-basis:100%;margin:4px 0 0}.network-page .section-toolbar>.text-button{font-size:11px}.network-revoke-confirm{padding:18px}}
@media(max-width:400px){.network-page>.panel{padding:18px}.network-hero{display:block}.network-hero>.vela-icon{margin:0 0 18px}.network-hero h2{font-size:28px}.network-record{padding:15px}.network-record dl{grid-template-columns:1fr;gap:5px}.network-record dd{margin-bottom:8px}.network-grants{padding:13px}.network-page .button{width:100%}.network-page .checkbox-label{font-size:12px}.network-revoke-confirm .network-actions{display:block}.network-revoke-confirm .text-button{margin-top:8px}}
.listening-devices{margin-top:22px}.listening-devices h3{margin:0 0 8px}.listening-devices .history-track{flex-wrap:wrap;gap:10px}.listening-devices .history-play{flex:1 1 100%}.listening-devices .button{max-width:100%;white-space:normal;text-align:center;margin-left:auto}
/* High-contrast Vela: existing mint identity, neutral surfaces and open music shelves. */
/* Theme colors switch atomically; keep only spatial/opacity feedback animated. */
html[data-theme] *,html[data-theme] *::before,html[data-theme] *::after { transition-property:transform,opacity,box-shadow; }
/* Palette roles now live in the single TR01 canonical layer at the top of
   this file. This later layer keeps only component behavior so a second raw
   palette cannot silently override the namespaced roles. */
[hidden] { display:none!important; }
body { font-size:var(--vela-body-size); }
h1 { font-size:clamp(28px,2.7vw,38px); letter-spacing:-1px; }
h2 { font-size:24px; }
.button,.button.small { font-size:13px; min-height:44px; }
.button.secondary { border-color:var(--control-line); }
button:disabled { opacity:1; color:var(--disabled-text); }
.button:disabled,.play-toggle:disabled { background:var(--disabled-surface); color:var(--disabled-text); }
input,select { border-color:var(--control-line); font-size:14px; }
input::placeholder { color:var(--quiet); opacity:1; }
.sidebar .nav-item { min-height:41px; font-size:var(--vela-nav-size); gap:13px; border-radius:7px; color:var(--muted); }
.sidebar { gap:24px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.sidebar>* { flex-shrink:0; }
.sidebar>.brand { margin:0 12px 24px; }
.sidebar-library { flex:0 0 auto; min-height:auto; margin-top:0; overflow:visible; }
.sidebar-bottom { margin-top:auto; }
.sidebar .nav-item.active { background:var(--vela-nav-active); color:var(--vela-nav-active-text); font-weight:600; }
.sidebar .nav-item.active .vela-icon { color:var(--vela-nav-active-text); }
.sidebar .nav-item.active::after { content:""; width:5px; height:5px; margin-left:auto; border-radius:50%; background:var(--vela-primary); flex-shrink:0; }
.nav-label { font-size:9px; letter-spacing:1.6px; }
.sidebar-playlist { font-size:12px; min-height:40px; }
.account strong { font-size:13px; }
.account small { font-size:12px; }
.breadcrumb { font-size:12px; letter-spacing:.6px; }
.page-heading .eyebrow,.home-hero .eyebrow,.section-toolbar .eyebrow { display:none; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-heading h1 { margin:0; }
/* DR05: the root's receipts moved into `.feedback-stack`. The old fixed
   `right/bottom` rule for `.content-inner>.alert.success` is removed, so a
   receipt can never float over the recovery message again. */
.section-toolbar p,.page-heading p,.home-toolbar p { font-size:14px; }
.home-hero {
  min-height:240px; padding:32px; border-radius:12px;
  background:var(--surface); color:var(--text); border:1px solid var(--line);
}
.home-hero h1 { font-size:clamp(28px,3vw,42px); max-width:22ch; }
.home-hero p { color:var(--muted); font-size:15px; }
.home-artwork { transform:none; width:200px; }
.home-artwork .artwork { border-radius:6px; }
.home-section,.search-result-section { margin:32px 0 40px; }
.home-track-grid { gap:24px; }
.listening-card,.catalog-card,.collection-card,.playlist-card {
  border-color:transparent; background:transparent; border-radius:8px; padding:12px;
}
.listening-card:hover,.catalog-card:hover,.collection-card:hover,.playlist-card:hover {
  background:var(--surface); transform:none;
}
.listening-card strong,.collection-card strong,.catalog-card h3,.playlist-card h3 { font-size:15px; }
.listening-card small,.catalog-card p,.playlist-card p,.catalog-card-meta,.home-playlist-card small { font-size:13px; }
.listening-cover .artwork,.catalog-cover,.playlist-art { border-radius:6px; }
.listening-actions { gap:4px; }
.listening-actions .icon-button { min-width:36px; min-height:36px; }
.home-playlist-card { background:var(--surface); border:0; padding:16px; }
.home-playlist-card strong { font-size:13px; }
.track-title strong { font-size:12px; font-weight:550; }
.track-title small { font-size:12px; margin-top:2px; }
.track-album,.track-duration,.quality-tag { font-size:12px; }
.track-header { font-size:11px; letter-spacing:.6px; }
.track-row { min-height:64px; }
.track-header,.track-row { grid-template-columns:44px minmax(0,1.7fr) minmax(0,1fr) 90px 48px 176px; gap:12px; }
.track-play,.track-title,.track-actions .icon-button { min-height:44px; }
.track-play { min-width:44px; }
.track-actions { gap:0; }
.track-actions .icon-button { width:44px; min-width:44px; }
.search-form { display:flex; align-items:center; gap:8px; padding:0; background:var(--surface); border:1px solid var(--control-line); border-radius:10px; }
.search-form input { flex:1; width:0; min-width:0; min-height:44px; padding:12px 16px; border:0; background:none; }
.search-form button { position:static; flex:0 0 44px; width:44px; min-height:44px; padding:8px; }
.topbar .button,.topbar .button.small,.theme-button { min-height:44px; }
.topbar { margin:0; }
.theme-button { min-width:44px; }
.track-row:hover { background:var(--surface); }
.track-row.current { background:var(--surface-hover); }
.artwork { border-radius:6px; }
.now-playing strong { font-size:14px; }
.now-playing small,.seek-row>span { font-size:12px; }
.play-toggle { background:var(--accent); color:var(--accent-text); }
.player-bar { box-shadow:none; }
.player-buttons .icon-button,.player-right .icon-button { min-width:44px; height:44px; }
.player-buttons { gap:8px; margin-bottom:0; }
.play-toggle { width:44px; height:44px; flex-shrink:0; }
.seek-row input,.player-right input { height:44px; min-height:44px; }
.queue-row { border:0; border-bottom:1px solid var(--line); border-radius:6px; background:transparent; }
.queue-row.current { background:var(--surface-hover); }
.queue-row strong { font-size:14px; }
.queue-row small { font-size:12px; }
.empty-state { border:0; min-height:200px; }
.empty-state p { font-size:14px; }
.inline-form { gap:12px; }
.inline-form input { font-size:14px; }
.alert { font-size:13px; }
.panel>p,.sharing-controls p { font-size:14px; }
@media(max-width:850px) {
  .sidebar .nav-item { font-size:var(--vela-nav-size); }
  .track-title strong { font-size:14px; }
  .track-title small { font-size:12px; }
  .track-header,.track-row { grid-template-columns:44px minmax(0,1fr) 48px 176px; gap:8px; }
}
@media(max-width:620px) {
  :root { --vela-player-height:var(--vela-mobile-player-height); --vela-mobile-nav-height:70px; }
  .app-shell { padding:0; }
  .home-hero { padding:24px; gap:16px; min-height:200px; }
  .home-hero h1 { font-size:28px; }
  .home-hero p { font-size:14px; }
  .home-artwork { width:112px; }
  .track-title strong { font-size:14px; }
  .track-title small { font-size:12px; }
  .track-duration { font-size:12px; }
  .track-header,.track-row { grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; }
  .track-actions { grid-column:2/-1; justify-content:flex-end; }
  .track-actions .icon-button:nth-child(3) { display:inline-grid; }
  .player-bar { grid-column:1; grid-row:2; bottom:auto; height:var(--vela-player-height); grid-template-columns:minmax(0,1fr) 140px; padding:12px 16px 48px; }
  .player-buttons { gap:4px; }
  .player-buttons .icon-button { min-width:44px; height:44px; }
  .seek-row { height:44px; }
  .seek-row input { height:44px; min-height:44px; }
  .mobile-nav { height:100%; }
  .queue-panel { bottom:184px; }
  .topbar .button { min-height:44px; }
  .now-playing strong { font-size:13px; }
  .now-playing small { font-size:12px; }
  .mobile-nav button>small { font-size:11px; }
  .mobile-nav button { color:var(--muted); min-height:44px; }
  .mobile-nav button.active { color:var(--accent); background:var(--surface-hover); border-radius:8px; }
  .catalog-card h3,.playlist-card h3 { font-size:14px; }
  .catalog-card p,.playlist-card p { font-size:12px; }
  .home-track-grid { gap:16px; }
  .listening-card,.catalog-card,.collection-card,.playlist-card { padding:8px; }
}

/* ---------------------------------------------------------------------------
   Device app size (EX261) — one validated percentage applied exactly once as
   CSS zoom on the document root. `--app-zoom` is the only inline style the
   presentation adapter writes. 100% leaves the app at the platform's own
   scaling, and browser page zoom stays an independent user control.
   --------------------------------------------------------------------------- */
:root { --app-zoom: 1; zoom: var(--app-zoom); }
/* Viewport units do not follow root zoom, so the shell and modals divide them
   back out to stay exactly one zoomed viewport tall. At 100% this is a no-op. */
.boot-screen, .auth-shell { min-height: calc(100vh / var(--app-zoom)); }
.modal { max-height: calc(90vh / var(--app-zoom)); }

/* TR08: Settings is the mobile "More" destination, so it also carries the
   compact list of the remaining implemented routes. The columns adapt from one
   real touch target per row (320px at 150% app size) to a wide desktop strip. */
.settings-destinations { grid-column: 1 / -1; }
.settings-destinations > .eyebrow { margin-bottom: 10px; }
.settings-destinations h2 { margin-bottom: 6px; }
.settings-destinations > p { max-width: 660px; font-size: 12px; line-height: 1.7; margin-bottom: 16px; }
.settings-destination-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.settings-destination { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--text); font-size: 12px; font-weight: 500; text-align: left; }
.settings-destination:hover { background: var(--surface-hover); }
.settings-destination .vela-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--muted); }
.settings-destination span { min-width: 0; overflow-wrap: anywhere; }
.settings-destination.active, .settings-destination[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.settings-destination.active .vela-icon, .settings-destination[aria-current="page"] .vela-icon { color: var(--accent); }

.settings-appearance { grid-column: 1 / -1; }
.settings-appearance > .eyebrow { margin-bottom: 10px; }
.settings-appearance h2 { margin-bottom: 8px; }
.settings-appearance > p { max-width: 660px; font-size: 12px; line-height: 1.75; }
.setting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.setting-text { flex: 1 1 260px; min-width: 0; }
.setting-text h3 { font-size: 15px; letter-spacing: -.2px; margin-bottom: 5px; }
.setting-text p { font-size: 12px; line-height: 1.7; margin: 0; }
.setting-value { display: flex; align-items: center; gap: 6px; }
.app-scale-value { min-width: 62px; text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); }
.app-scale-step { min-width: 44px; height: 44px; font-size: 20px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 9px; }
.app-scale-step:hover:not(:disabled) { background: var(--surface-hover); }
.app-scale-control { margin-top: 16px; }
.app-scale-control > label { margin: 0 0 6px; font-size: 11px; color: var(--muted); }
.app-scale-control input { width: 100%; }
.app-scale-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--quiet); margin-top: 2px; }
.appearance-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.appearance-actions .appearance-note { margin: 0; flex: 1 1 240px; }
.appearance-note { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 12px 0 0; }
.appearance-note.warning { color: var(--danger); }
.setting-divider { height: 1px; background: var(--line); margin: 24px 0; }
.theme-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-choice { display: flex; align-items: center; gap: 7px; margin: 0; min-height: 44px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; }
.theme-choice:hover { background: var(--surface-hover); }
.theme-choice:focus-within { border-color: var(--accent); }
.theme-choice input[type=radio] { min-height: 0; width: 16px; height: 16px; accent-color: var(--accent); }

/* Narrow layouts must reflow rather than clip when the app is scaled up:
   at 150% a 320px viewport has ~213 CSS pixels of layout width. */
@media (max-width: 620px) {
  .modal { max-height: calc(92vh / var(--app-zoom)); }
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .player-bar { grid-template-columns: minmax(0, 1fr) 140px; }
  .mobile-nav button { min-width: 0; flex: 1 1 0; }
}

/* IN01: geometry-matched library skeleton rows */
.skeleton-table { margin-top:4px; }
.skeleton-track-row { pointer-events:none; }
.skeleton-block { display:block; border-radius:5px; background:linear-gradient(100deg,var(--surface-raised) 20%,var(--surface-hover) 40%,var(--surface-raised) 60%); background-size:200% 100%; animation:vela-skeleton 1.3s ease-in-out infinite; }
.skeleton-index { width:18px; height:12px; justify-self:start; }
.skeleton-title { display:flex; align-items:center; gap:12px; min-width:0; }
.skeleton-art { width:43px; height:43px; min-width:43px; border-radius:7px; }
.skeleton-lines { display:grid; gap:7px; min-width:0; flex:1; }
.skeleton-line { height:10px; }
.skeleton-line-wide { width:min(220px,80%); }
.skeleton-line-short { width:min(120px,45%); height:8px; }
.skeleton-album { width:min(130px,80%); height:9px; }
.skeleton-time { width:30px; height:9px; justify-self:end; }
.skeleton-dot { width:26px; height:26px; border-radius:50%; justify-self:end; }
@keyframes vela-skeleton { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-block { animation:none; background:var(--surface-raised); } }
@media (max-width:850px) { .skeleton-album { display:none; } .skeleton-track-row { grid-template-columns:20px minmax(150px,1fr) 42px 73px; } }
@media (max-width:620px) { .skeleton-track-row { grid-template-columns:18px minmax(100px,1fr) 35px 53px; padding:9px 0; } .skeleton-art { width:39px; height:39px; min-width:39px; } }

/* IN01: Home and global-search skeletons reuse the real listening card and
   search row geometry, so a pending request never moves what follows. */
.track-skeletons { pointer-events:none; }
.home-track-grid.track-skeletons { margin:0; }
.search-skeletons { margin:22px 0 32px; }
.track-skeleton-art,.track-skeleton-bar,.track-skeleton-action {
  background:linear-gradient(100deg,var(--surface-raised) 20%,var(--surface-hover) 40%,var(--surface-raised) 60%);
  background-size:200% 100%;
  animation:vela-track-loading 1.3s ease-in-out infinite;
}
.track-skeleton-art { border-radius:6px; }
.track-skeleton-play { display:inline-block; width:100%; }
.track-skeleton-bar { display:inline-block; vertical-align:baseline; width:68%; height:10px; border-radius:5px; }
.track-skeleton-bar.artist { width:44%; height:8px; }
.track-skeleton-action { border-radius:8px; }
@keyframes vela-track-loading { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .track-skeleton-art,.track-skeleton-bar,.track-skeleton-action { animation:none; background:var(--surface-raised); }
}

/* The 761-900 band keeps the 175px reference sidebar even though the older
   content rules switch at 850px. The shell ladder stays explicit so the
   offset comes from one token and is still applied only once. */
@media (min-width:761px) and (max-width:900px) {
  :root { --vela-sidebar-width:175px; --vela-gutter:20px; }
}

/* TR02/TR09 tablet/mobile shell -------------------------------------------
   Below 761px the sidebar hands over to the persistent bottom navigation and
   the band becomes the mobile composition (mini-player + navigation). This is
   the single decision boundary for the shell: 761..1024 is the tablet ladder
   (sidebar + desktop player, no navigation bar), <=760 is the mobile one. Both
   bands are reserved exactly once, as grid rows, so the final focused row
   always scrolls fully above them and the safe-area inset is counted once. */
@media (max-width:760px) {
  :root {
    --vela-sidebar-width:0px; --vela-topbar-height:63px;
    --vela-content-top:25px;
    --vela-player-height:var(--vela-mobile-player-height);
    --vela-bottom-reserve:calc(
      var(--vela-player-height) + var(--vela-mobile-nav-height) + var(--vela-safe-bottom)
    );
  }
  .app-shell {
    display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) var(--vela-player-height)
      calc(var(--vela-mobile-nav-height) + var(--vela-safe-bottom));
    padding:0; height:calc(100dvh / var(--app-zoom,1)); overflow:hidden;
  }
  .sidebar { display:none; }
  .main-content { grid-column:1; grid-row:1; min-width:0; min-height:0; padding:0; }
  .topbar {
    flex:0 0 calc(var(--vela-topbar-height) + var(--vela-safe-top));
    height:calc(var(--vela-topbar-height) + var(--vela-safe-top));
    min-height:calc(var(--vela-topbar-height) + var(--vela-safe-top));
    padding:var(--vela-safe-top) max(var(--vela-gutter), var(--vela-safe-right)) 0
      max(var(--vela-gutter), var(--vela-safe-left));
    flex-wrap:nowrap; row-gap:0;
  }
  .topbar-actions { flex-shrink:0; }
  .app-shell>.player-bar {
    grid-column:1; grid-row:2; position:relative; inset:auto; width:100%;
    padding-left:max(16px, var(--vela-safe-left));
    padding-right:max(16px, var(--vela-safe-right));
  }
  .app-shell>.mobile-nav {
    display:flex; grid-column:1; grid-row:3; position:relative; inset:auto;
    width:100%; height:100%; z-index:45; align-items:stretch;
    padding-left:max(6px, var(--vela-safe-left));
    padding-right:max(6px, var(--vela-safe-right));
    padding-bottom:max(9px, var(--vela-safe-bottom));
  }
  .app-shell>.mobile-nav>button {
    flex:1 1 0; min-width:0; min-height:44px; display:flex; gap:2px;
    align-items:center; justify-content:center; flex-direction:column;
    color:var(--vela-quiet-text); background:none; border-radius:8px; font-size:11px;
  }
  .app-shell>.mobile-nav>button small { color:inherit; font-size:10px; }
  .app-shell>.mobile-nav>button .vela-icon { width:20px; height:20px; }
  .app-shell>.mobile-nav>button.active {
    color:var(--vela-nav-active-text); background:var(--vela-nav-active);
  }
  .content-inner { padding-bottom:20px; }
  .queue-panel { bottom:var(--vela-bottom-reserve); }
  /* DR05: the recovery status moved into `.feedback-stack`, which owns the
     bottom offset itself. The old per-instance fixed `bottom` rule is gone,
     so a mobile recovery message can never float away from its stack. */
}
/* The narrowest supported reference width uses the 16px gutter. */
@media (max-width:360px) {
  :root { --vela-gutter:16px; }
  /* The decorative breadcrumb yields at the narrowest width so the 63px
     topbar still contains its real actions without covering the page title. */
  .topbar .breadcrumb { display:none; }
  .topbar-actions { margin-left:auto; }
}

/* TR03 persistent player ----------------------------------------------------
   The reference composition for the one root player. The TR02 shell already
   reserves the 88px band once (grid row 2) and below 761px the player, then the
   navigation, are separate rows; this layer only styles the three unboxed
   zones, and never introduces a second audio element, source or transport
   authority. Desktop reference: left ≈28% / center ≤470 / right ≈28%, 51px
   cover, 32px main face inside a 44px hit box, 3px seek rail, 65px volume. */
.player-bar {
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px) minmax(0, 1fr);
  gap: 20px;
  padding: 10px var(--vela-player-gutter);
  background: var(--vela-player-bg);
  border-top: 1px solid var(--vela-player-border);
}
.player-now { display: flex; align-items: center; gap: 10px; min-width: 0; }
.now-playing { gap: 12px; }
.now-playing-trigger {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text);
  text-align: left;
}
.now-playing-trigger:hover .player-title { color: var(--vela-primary); }
.now-playing .artwork { width: 51px; height: 51px; min-width: 51px; border-radius: 6px; }
.now-playing-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.now-playing-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.now-playing strong.player-title {
  display: block; min-width: 0; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: var(--text);
}
.now-playing .player-artist, .now-playing .player-album {
  display: block; margin: 0; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; font-size: 10px; line-height: 1.35;
}
.now-playing .player-artist { color: var(--vela-muted-text); }
.now-playing .player-album { color: var(--vela-quiet-text); }
.player-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; width: 12px; flex-shrink: 0; }
.player-eq i { display: block; width: 2px; border-radius: 1px; background: var(--vela-quiet-text); }
.player-eq i:nth-child(1) { height: 4px; }
.player-eq i:nth-child(2) { height: 7px; }
.player-eq i:nth-child(3) { height: 5px; }
.player-eq i:nth-child(4) { height: 9px; }
.player-eq[data-state="playing"] i { background: var(--vela-primary); animation: vela-player-eq 800ms ease-in-out infinite alternate; }
.player-eq[data-state="playing"] i:nth-child(2) { animation-delay: -200ms; }
.player-eq[data-state="playing"] i:nth-child(3) { animation-delay: -400ms; }
.player-eq[data-state="playing"] i:nth-child(4) { animation-delay: -600ms; }
.player-eq[data-state="connecting"] i { background: var(--vela-primary); }
@keyframes vela-player-eq { from { height: 3px; } to { height: 10px; } }
.player-favorite { flex-shrink: 0; color: var(--vela-muted-text); }
.player-favorite.selected { color: var(--vela-primary); }
.player-favorite .vela-icon { width: 17px; height: 17px; }
.player-center { gap: 1px; }
.player-buttons { gap: 17px; height: 44px; flex: 0 0 44px; }
.player-buttons .icon-button {
  position: relative; width: 28px; min-width: 28px; height: 28px; padding: 0;
  color: var(--vela-muted-text); background: none;
}
.player-buttons .icon-button:hover:not(:disabled) { color: var(--text); background: none; }
.player-buttons .icon-button .vela-icon { width: 15px; height: 15px; }
.player-buttons .icon-button.selected, .player-buttons .icon-button.active { color: var(--vela-primary); }
.player-mode-dot {
  position: absolute; right: 2px; bottom: 1px; width: 3px; height: 3px;
  border-radius: 50%; background: var(--vela-primary);
}
.play-toggle {
  width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; background: none; color: var(--vela-text);
}
.play-toggle-face {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vela-player-face); color: var(--vela-player-face-text);
  transition: transform 150ms ease, background-color 150ms ease;
}
.play-toggle:hover:not(:disabled) .play-toggle-face { transform: scale(1.05); }
.play-toggle:disabled .play-toggle-face { background: var(--vela-disabled-surface); color: var(--vela-disabled-text); }
.play-toggle .vela-icon { width: 14px; height: 14px; }
.seek-row {
  flex: 0 0 22px; height: 22px; min-height: 22px; gap: 9px;
  align-items: center; justify-content: center;
}
.seek-row .player-time {
  min-width: 32px; text-align: center; font-size: 10px; line-height: 1;
  color: var(--vela-quiet-text); font-variant-numeric: tabular-nums;
}
.seek-control { position: relative; flex: 1 1 auto; min-width: 0; height: 22px; display: flex; align-items: center; }
.seek-rail {
  position: absolute; left: 0; right: 0; top: calc(50% - 2px); transform: translateY(-50%);
  height: 3px; border-radius: 2px; background: var(--vela-seek-rail);
  overflow: hidden; pointer-events: none;
}
.seek-fill { display: block; height: 3px; border-radius: 2px; background: var(--vela-seek-fill); }
.seek-control input[type=range] {
  position: relative; z-index: 1; top: -2px; width: 100%; height: 44px;
  min-height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.seek-control input[type=range]::-webkit-slider-runnable-track { height: 3px; background: transparent; }
.seek-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 8px; height: 8px;
  margin-top: -2.5px; border: 0; border-radius: 50%;
  background: var(--vela-seek-fill); opacity: 0; transition: opacity 150ms ease;
}
.seek-control input[type=range]:hover::-webkit-slider-thumb,
.seek-control input[type=range]:focus-visible::-webkit-slider-thumb { opacity: 1; }
.seek-control input[type=range]::-moz-range-track { height: 3px; background: transparent; }
.seek-control input[type=range]::-moz-range-thumb {
  width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--vela-seek-fill);
  opacity: 0; transition: opacity 150ms ease;
}
.seek-control input[type=range]:hover::-moz-range-thumb,
.seek-control input[type=range]:focus-visible::-moz-range-thumb { opacity: 1; }
@media (hover: none) {
  .seek-control input[type=range]::-webkit-slider-thumb,
  .seek-control input[type=range]::-moz-range-thumb { opacity: 1; }
}
.player-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.player-quality {
  display: flex; flex-direction: column; align-items: flex-end; min-width: 0;
  margin-right: 4px; overflow: hidden; text-align: right;
}
.player-quality-format {
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 10px; line-height: 1.3; color: var(--vela-muted-text);
  font-variant-numeric: tabular-nums;
}
.player-quality small {
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  margin: 0; font-size: 9px; line-height: 1.3; color: var(--vela-quiet-text);
}
.player-right .icon-button { width: 32px; min-width: 32px; height: 32px; padding: 0; }
.player-right .icon-button .vela-icon { width: 17px; height: 17px; }
.player-right .player-mute[aria-pressed="true"] { color: var(--vela-primary); }
.player-right input[type=range] { width: 65px; max-width: 65px; height: 44px; min-height: 44px; margin: 0; padding: 0; }

@media (max-width: 1100px) {
  .player-bar { gap: 16px; }
  .player-buttons { gap: 12px; }
  .player-now .player-favorite { display: none; }
  .player-quality, .player-expand { display: none; }
  .player-right { gap: 4px; }
  .player-right .icon-button { width: 30px; min-width: 30px; height: 30px; }
  .player-right input[type=range] { width: 44px; max-width: 44px; }
}
@media (max-width: 900px) {
  .player-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 430px) minmax(0, 1fr); gap: 14px; }
  .player-buttons { gap: 10px; }
  .player-buttons .mobile-queue { display: none; }
}
/* TR09: <=760px is one mobile composition, not two. The two-zone mini-player
   (art/title, favorite, Play/Pause, Next and Queue above a full-width seek rail)
   now starts at the same boundary as the navigation bar, so 671..760px is no
   longer a touch-width screen wearing the desktop transport. The transport and
   volume details stay in the expanded player. The right column is sized by its
   content instead of a fixed 140px, so three 44px targets can never overflow
   into the title zone at 320px. */
@media (max-width: 760px) {
  .player-bar {
    grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
    height: var(--vela-player-height);
    padding: 12px max(16px, var(--vela-safe-right)) 48px max(16px, var(--vela-safe-left));
  }
  /* The approved mobile band surfaces: a lifted #1c2318 mini-player above the
     darker #10140e navigation, both from the canonical role layer. */
  .app-shell>.player-bar { background: var(--vela-mobile-player); }
  .app-shell>.mobile-nav { background: var(--vela-mobile-nav); }
  .player-now { gap: 8px; }
  .now-playing { gap: 10px; }
  .now-playing-trigger { gap: 10px; min-height: 44px; }
  .now-playing .artwork { width: 42px; height: 42px; min-width: 42px; border-radius: 5px; }
  .now-playing strong.player-title { font-size: 12px; }
  .now-playing .player-artist { font-size: 10px; }
  .now-playing .player-album { display: none; }
  .player-now .player-favorite { display: inline-grid; width: 44px; min-width: 44px; height: 44px; }
  .player-center { flex-direction: row; align-items: center; justify-content: flex-end; max-width: none; }
  .player-buttons { gap: 8px; justify-content: flex-end; }
  .player-buttons .icon-button { width: 44px; min-width: 44px; height: 44px; }
  .player-buttons .icon-button .vela-icon { width: 19px; height: 19px; }
  .player-buttons .player-shuffle, .player-buttons .player-previous, .player-buttons .player-repeat { display: none; }
  .player-buttons .mobile-queue { display: inline-grid; }
  .player-right { display: none; }
  .seek-row {
    position: absolute; left: 0; right: 0; bottom: 0; height: 44px; gap: 0;
    padding: 0 max(16px, var(--vela-safe-right)) 0 max(16px, var(--vela-safe-left));
  }
  .seek-row .player-time { display: none; }
  .seek-control { height: 44px; }
  .play-toggle-face { width: 36px; height: 36px; }
  .play-toggle .vela-icon { width: 16px; height: 16px; }
}
/* The narrowest reference width gives the title/artist path the room instead of
   an extra heart; the same real favorite stays in the expanded player and rows. */
@media (max-width: 360px) {
  .player-now .player-favorite { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .player-eq i { animation: none !important; }
  .play-toggle:hover:not(:disabled) .play-toggle-face { transform: none; }
}

/* ============================================================================
   TR04a bounded Home increment — approved header, one real filter group and
   conditional sections built from the DTOs Home already requests. The header
   and tabs consume the TR01 canonical roles; nothing here redesigns the
   library, the player or the secondary routes.
   ============================================================================ */
.home-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin: 0 0 20px;
}
.home-heading { min-width: 0; }
.home-heading .eyebrow { margin-bottom: 10px; }
.home-header h1 {
  display: flex; align-items: baseline; gap: 1px; margin: 0;
  font-size: clamp(30px, 3.1vw, 45px); line-height: 1.08;
  letter-spacing: -1.7px; font-weight: 650;
}
.home-title-dot::after { content: "."; color: var(--vela-primary); }
.home-private {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 4px; padding: 0 12px; min-height: 30px;
  border: 1px solid var(--vela-border); border-radius: 5px;
  background: var(--vela-muted-surface); color: var(--vela-muted-text);
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.home-private .vela-icon { width: 15px; height: 15px; color: var(--vela-primary); }
.home-filter-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 26px;
}
.home-filter-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.home-filter {
  min-height: 30px; padding: 0 14px; border: 0; border-radius: 5px;
  background: var(--vela-filter-inactive); color: var(--vela-muted-text);
  font-size: 12px; font-weight: 600; transition: background-color .15s, color .15s;
}
.home-filter:hover:not([aria-selected="true"]):not(.active) {
  background: var(--vela-accent-surface); color: var(--vela-text);
}
.home-filter.active, .home-filter[aria-selected="true"] {
  background: var(--vela-primary); color: var(--vela-on-primary);
}
.home-filter:focus-visible { outline: 2px solid var(--vela-primary); outline-offset: 3px; }
.home-filter-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.home-filter-caption { margin: 0; font-size: 11px; color: var(--vela-muted-text); }
.home-refresh { font-size: 11px; }
.home-view { min-width: 0; }
.home-absent {
  border: 1px solid var(--vela-border); border-radius: 10px;
  background: var(--vela-muted-surface); padding: 18px 22px; margin: 0 0 30px;
  max-width: 720px;
}
.home-absent .eyebrow { margin-bottom: 8px; color: var(--vela-muted-text); }
.home-absent strong { display: block; font-size: 14px; margin-bottom: 6px; }
.home-absent p { margin: 0; font-size: 12px; line-height: 1.7; }
.home-album-shelf {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 17px;
}
.home-album-card {
  display: flex; flex-direction: column; align-items: stretch;
  min-width: 0; padding: 0; border: 0; border-radius: 7px;
  background: none; color: var(--text); text-align: left;
}
.home-album-card .catalog-cover { width: 100%; aspect-ratio: 1; border-radius: 7px; }
.home-album-card .catalog-cover img { transition: transform .35s ease; }
.home-album-card:hover .catalog-cover img { transform: scale(1.035); }
.home-album-card strong {
  display: block; margin-top: 12px; font-size: 13px; font-weight: 650;
  line-height: 1.35; overflow-wrap: anywhere;
}
.home-album-card small {
  display: block; margin-top: 5px; font-size: 11px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.home-album-card:focus-visible { outline: 2px solid var(--vela-primary); outline-offset: 3px; }
.home-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--vela-border); border-radius: 10px;
  background: var(--vela-muted-surface); padding: 16px 20px; margin: 0 0 30px;
}
.home-note .vela-icon { width: 20px; height: 20px; color: var(--vela-primary); flex: 0 0 20px; }
.home-note strong { display: block; font-size: 13px; }
.home-note p { margin: 4px 0 0; font-size: 12px; }
.home-note .text-button { margin-left: auto; }
.home-empty { min-height: 220px; }
/* The empty library state carries one action and, at most, the real import
   progress the server reported. It reuses the semantic roles above and adds
   no new tokens. */
.home-empty h2 { font-size: 20px; letter-spacing: -.5px; margin-bottom: 8px; }
.home-empty p { max-width: 420px; }
.home-empty .home-empty-action { margin-top: 4px; }
/* A failed import read is not an empty library: it says so in the danger role
   and keeps the confirmed progress above it visible. */
.home-empty .home-empty-error { color: var(--danger); font-size: 12px; margin: 14px 0 0; }
.home-empty-progress {
  width: 100%; max-width: 420px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line); text-align: left;
}
.home-empty-progress-title { font-size: 12px; color: var(--text); margin-bottom: 10px; }
.home-empty-progress-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.home-empty-progress-status { color: var(--accent); font-weight: 600; }
.home-empty-progress-bar {
  flex: 1 0 100%; width: 100%; height: 4px; margin-top: 8px;
  accent-color: var(--accent); display: block;
}
.home-playlists-view .home-playlist-grid { margin-top: 4px; }
.home-extra[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .home-album-card:hover .catalog-cover img { transform: none; }
}
@media (max-width: 1100px) {
  .home-album-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 760px) {
  .home-header { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .home-filter-caption { display: none; }
  .home-filter-row { margin-bottom: 20px; gap: 12px; }
  .home-album-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .home-album-card strong { font-size: 12px; margin-top: 9px; }
  .home-album-card small { font-size: 10px; margin-top: 3px; }
  .home-empty { min-height: 0; padding: 28px 18px; }
  .home-empty h2 { font-size: 18px; }
  .home-empty p { font-size: 12px; max-width: none; }
  .home-empty .home-empty-action { width: 100%; }
  .home-empty-progress { max-width: none; }
}
@media (max-width: 380px) {
  .home-header h1 { font-size: 26px; letter-spacing: -1.1px; }
  .home-filter { padding: 0 11px; }
  .home-absent { padding: 15px 17px; }
  .home-empty { padding: 24px 14px; }
  .home-empty h2 { font-size: 17px; }
  .home-empty-progress-row { font-size: 10px; }
}
/* Range sliders keep a visible focus ring across engines/modalities. */
input[type="range"]:focus { outline:2px solid var(--accent); outline-offset:3px; }

.playlist-detail-cover { width:168px; max-width:38%; margin-bottom:18px; }
.playlist-detail-cover .catalog-cover { border-radius:9px; }
@media(max-width:620px){.playlist-detail-cover{width:120px;max-width:50%;margin-bottom:14px}}

.playlist-undo { gap:10px; flex-wrap:wrap; }
.playlist-undo span { flex:1; min-width:180px; }

.track-menu { position:relative; }
.track-menu-panel { position:absolute; right:0; top:calc(100% + 4px); z-index:80; min-width:190px; display:grid; padding:5px; border:1px solid var(--control-line); border-radius:8px; background:var(--surface-raised); box-shadow:0 16px 40px #0006; }
.track-menu-panel button { min-height:36px; padding:8px 10px; border-radius:6px; background:none; color:var(--text); text-align:left; font-size:11px; }
.track-menu-panel button:hover, .track-menu-panel button:focus-visible { background:var(--surface-hover); }

/* TR07b/TR09: at touch widths the row More menu is a real modal bottom action
   sheet. It is anchored above the reserved player + navigation bands, so the
   shell keeps counting the safe area exactly once (the navigation row owns it)
   instead of hiding the sheet behind the transport. The backdrop is the real
   click-away layer, each action stays a full-width >=44px row, and the panel
   scrolls internally rather than overflowing on short landscape viewports.
   The sheet boundary is the shell's own mobile boundary (760px), so 671..760px
   no longer gets an anchored desktop panel on a phone composition.
   Desktop keeps the compact anchored panel above; both surfaces are the same
   signal-backed menu dispatching the same root actions, never a second audio
   owner. */
.track-menu-backdrop { display:none; }
@media (max-width:760px) {
  .track-menu-backdrop {
    display:block; position:fixed; inset:0; z-index:70;
    background:#050a07b3;
  }
  .track-menu-panel {
    position:fixed; left:0; right:0; top:auto; z-index:71;
    bottom:var(--vela-bottom-reserve);
    width:100%; max-width:none; min-width:0;
    max-height:calc((100dvh - var(--vela-bottom-reserve) - 16px) / var(--app-zoom, 1));
    overflow-y:auto; overscroll-behavior:contain; gap:2px;
    padding:8px max(10px, var(--vela-safe-right)) 10px max(10px, var(--vela-safe-left));
    border:0; border-top:1px solid var(--control-line); border-radius:20px 20px 0 0;
    background:var(--vela-popover); box-shadow:0 -18px 50px #0007;
  }
  .track-menu-panel button {
    display:flex; align-items:center; width:100%; min-height:48px;
    padding:12px 14px; border-radius:10px; font-size:13px;
  }
}

/* TR07: the add-to-playlist picker. It is one native modal <dialog> that owns
   the whole viewport in the top layer, so the browser supplies the modal
   inertness while the root player's own dialog handling stays untouched. The
   visible sheet is centered on desktop and becomes a bottom sheet above the
   reserved player band at touch widths, so the transport stays visible. The
   backdrop is a real click-away element and each row is a >=44px target. */
.playlist-picker:not([open]) { display:none; }
.playlist-picker { position:fixed; inset:0; width:100%; max-width:100vw; height:100%; max-height:100dvh; margin:0; padding:16px; border:0; background:transparent; color:var(--text); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.playlist-picker::backdrop { background:transparent; }
.playlist-picker-backdrop { position:absolute; inset:0; background:#050a07cc; backdrop-filter:blur(6px); }
.playlist-picker-sheet { position:relative; z-index:1; display:flex; flex-direction:column; width:min(520px,100%); max-height:min(calc(100dvh - 32px),620px); border:1px solid var(--control-line); border-radius:16px; background:var(--vela-popover,var(--surface-raised)); box-shadow:0 24px 70px #0008; overflow:hidden; }
.playlist-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 22px 0; }
.playlist-picker-head .eyebrow { margin-bottom:8px; font-size:9px; }
.playlist-picker-head h2 { font-size:21px; letter-spacing:-.5px; margin-bottom:0; overflow-wrap:anywhere; }
.playlist-picker-head .icon-button { min-width:44px; min-height:44px; flex:0 0 44px; }
.playlist-picker-hint { margin:8px 22px 14px; font-size:11px; line-height:1.6; }
.playlist-picker-sheet > input[type="search"] { margin:0 22px; width:calc(100% - 44px); min-height:44px; font-size:12px; }
.playlist-picker-list { display:flex; flex-direction:column; gap:2px; margin:12px 12px 0; padding:0 10px 0 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.playlist-choice { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:44px; padding:10px 12px; border-radius:9px; background:none; color:var(--text); text-align:left; font-size:12px; }
.playlist-choice:hover { background:var(--surface-hover); }
.playlist-choice.selected { background:var(--surface-hover); box-shadow:inset 0 0 0 1px var(--accent); }
.playlist-choice-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:550; }
.playlist-choice small { font-size:10px; white-space:nowrap; color:var(--muted); }
.playlist-picker-empty { margin:10px 12px 12px; font-size:12px; }
.playlist-picker-sheet > .alert { margin:12px 22px 0; }
.playlist-picker-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 22px 18px; margin-top:14px; border-top:1px solid var(--line); }
.playlist-picker-foot .button { min-height:44px; }
@media (max-width:760px) {
  .playlist-picker {
    align-items:flex-end;
    padding:0 0 var(--vela-bottom-reserve);
  }
  .playlist-picker-sheet { width:100%; max-height:calc((100dvh - var(--vela-bottom-reserve) - 16px) / var(--app-zoom,1)); border-radius:20px 20px 0 0; }
  .playlist-picker-head { padding:18px 18px 0; }
  .playlist-picker-hint { margin:8px 18px 12px; }
  .playlist-picker-sheet > input[type="search"] { margin:0 18px; width:calc(100% - 36px); }
  .playlist-choice { min-height:48px; font-size:13px; }
  .playlist-picker-foot { padding:12px 18px 16px; }
  .playlist-picker-foot .button { flex:1; }
}

/* ============================================================================
   TR09 responsive recovery — one mobile composition, tablet boundaries, touch
   targets, safe-area insets and short-height behavior ----------------------
   The shell tokens at the top of this file stay the only layout authority:
   every band, sheet and gutter below consumes --vela-player-height,
   --vela-mobile-nav-height, --vela-safe-* and --vela-bottom-reserve instead of
   inventing its own offset. Bands: <=760 mobile (mini-player + navigation),
   761..1024 tablet (sidebar + desktop player, no navigation bar), >=1025 the
   full desktop composition. No rule here adds a second scroller, a second
   navigation surface or a second audio owner.
   ============================================================================ */

/* --- Desktop/tablet: the side and top insets are consumed, not assumed ----
   A landscape cutout must not clip the first or last control of the topbar or
   the player. With no inset these are exactly the reference 33/48px gutters. */
@media (min-width:761px) {
  .topbar {
    flex:0 0 calc(var(--vela-topbar-height) + var(--vela-safe-top));
    height:calc(var(--vela-topbar-height) + var(--vela-safe-top));
    min-height:calc(var(--vela-topbar-height) + var(--vela-safe-top));
    padding:var(--vela-safe-top) max(var(--vela-gutter), var(--vela-safe-right)) 0
      max(var(--vela-gutter), var(--vela-safe-left));
  }
  .player-bar {
    padding-left:max(var(--vela-player-gutter), var(--vela-safe-left));
    padding-right:max(var(--vela-player-gutter), var(--vela-safe-right));
  }
}

/* --- Coarse pointer (real tablet/touch): 44px primary targets --------------
   The composition does not change; only the hit boxes grow to the product
   goal and the transport column yields width back to the side zones so three
   44px controls can never overlap the title. */
@media (pointer: coarse) {
  .player-buttons { gap:8px; }
  .player-buttons .icon-button { width:44px; min-width:44px; height:44px; }
  .player-buttons .icon-button .vela-icon { width:19px; height:19px; }
  .player-right .icon-button { width:44px; min-width:44px; height:44px; }
  .track-menu-panel { min-width:min(230px, 100%); }
}
@media (pointer: coarse) and (min-width:761px) and (max-width:1100px) {
  .player-bar { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .player-center { max-width:none; }
}
/* The 761..900 tablet band keeps the reference three zones but caps the
   transport at its own content width, so the title and the queue/volume zone
   are not squeezed into 125px while the middle column holds unused space. */
@media (min-width:761px) and (max-width:900px) {
  .player-bar { grid-template-columns:minmax(0,1fr) minmax(0,300px) minmax(0,1fr); }
}

/* --- Mobile composition: primary actions reach 44px ---------------------- */
@media (max-width:760px) {
  .topbar .button, .topbar .button.small, .topbar .icon-button { min-height:44px; }
  .topbar .icon-button { min-width:44px; }
  .home-filter { min-height:44px; padding:0 16px; }
  .text-button { min-height:44px; }
  .pagination .button,
  .playlist-detail .section-toolbar .button,
  .playlist-detail .section-toolbar .text-button,
  .job-card .button,
  .settings-grid .button,
  .inline-form .button { min-height:44px; }
  .share-form select, .import-card input, .inline-form input { min-height:44px; }
  /* A dialog's own dismiss control is the primary escape on a phone; the
     picker/Now Playing already size theirs, so the upload modal and the queue
     drawer join them instead of keeping a 36px desktop hit box. */
  .modal .icon-button, .queue-close { min-width:44px; min-height:44px; }
  /* The personal-mix card actions are that card's primary controls on a phone;
     they reach the same 44px goal from the same boundary as the rest. */
  .personal-mix-actions .icon-button { min-width:44px; width:44px; }
  .personal-mix-actions .text-button { min-width:44px; min-height:44px; }
  /* The navigation labels sit in their own line of the tab: a 20px icon, a
     2px gap and a 10px label. A longer localized label is clipped to its own
     tab with an ellipsis (and keeps its full accessible name) instead of
     covering the icon, the neighbour or the tab's own hit box. */
  .app-shell>.mobile-nav>button>small {
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    line-height:1.15;
  }
  /* A focused tab paints its ring inside the band: the shell clips overflow at
     the viewport edge, so an outside ring would lose its bottom edge. */
  .app-shell>.mobile-nav>button:focus-visible {
    outline:2px solid var(--vela-primary); outline-offset:-2px;
  }
}

/* --- Short-height recovery ----------------------------------------------
   390x600, landscape phones and an onscreen keyboard keep both bands reserved
   and the central scroller intact; only the decorative top padding yields so a
   first primary action is never pushed under the transport. */
@media (max-width:760px) and (max-height:640px) {
  :root { --vela-content-top:16px; }
  .content-inner { padding-bottom:16px; }
  .content-footer { margin:28px 0 14px; padding-top:16px; }
  .empty-state, .empty-state.compact { min-height:180px; }
  .home-header { margin-bottom:12px; }
}

/* Real touch rectangles, with no overlapping pseudo-element hit halos. */
@media (max-width:760px), (pointer:coarse) {
  .alert button[aria-label^="Dismiss"] {
    min-width:44px;
    width:44px;
    min-height:44px;
    height:44px;
    flex-shrink:0;
  }
}
@media (pointer:coarse) {
  .sidebar .nav-item,
  .sidebar-playlist,
  .home-filter-group [role="tab"],
  .text-button,
  .home-track-actions button,
  .track-info summary {
    min-height:44px;
  }
  .personal-mix-actions .icon-button,
  .personal-mix-actions .text-button,
  .home-track-actions .icon-button {
    min-width:44px;
    width:44px;
    min-height:44px;
    height:44px;
  }
}