/* A quiet audio library and writing desk. Loaded after the responsive shell. */
:root {
  --page:#f7f6f2;
  --sidebar:#efeee9;
  --surface:#fffefa;
  --ink:#303831;
  --muted:#71756d;
  --line:#e2e2da;
  --accent:#506b58;
  --accent-soft:#e7ece4;
}
h1,h2,h3 { letter-spacing:0; }
h1 { font-size:26px; font-weight:550; }
.button,.icon-button,.nav-item,input,textarea,select { border-radius:6px; }
.button.primary { box-shadow:none; }
.workspace-header { height:56px; padding:0 32px; background:var(--page); }
.workspace-note { letter-spacing:0; font-size:11px; }
.breadcrumb { font-size:12px; gap:12px; }
#main-content { max-width:1320px; padding:32px 40px 64px; }
.sidebar { padding:24px 14px 16px; }
.sidebar-brand { margin-bottom:25px; }
.brand { font-size:19px; letter-spacing:.02em; font-weight:600; }
.brand small { font-size:11px; letter-spacing:.02em; }
.brand-mark { width:28px; height:34px; }
.new-document { margin-bottom:14px; min-height:38px; box-shadow:none; font-size:13px; }
.new-document-arrow { display:none; }
.nav-item { min-height:39px; padding:8px 11px; font-size:13px; font-weight:400; }
.nav-item .icon { width:17px; height:17px; }
.nav-item.active { background:#e0e5dd; color:#3d5845; font-weight:500; }
.draft-section { margin-top:28px; }
.draft-section h2 { letter-spacing:0; font-size:11px; }
.draft-list { gap:1px; }
.draft-item { padding:10px; min-height:58px; border-radius:5px; }
.draft-item.selected { background:#e5e8e0; border-color:transparent; box-shadow:none; }
.draft-item.selected:before { display:none; }
.draft-item small { font-size:11px; }
.account-symbol { border:0; background:#e1e5dc; border-radius:5px; }
.page-heading { padding:0 0 24px; margin-bottom:25px; border-bottom:0; align-items:center; }
.eyebrow { font-size:11px; letter-spacing:.08em; margin-bottom:7px; }
.page-heading h1 { font-size:26px; }
.page-heading p { font-size:12px; margin-top:6px; }
.page-heading .heading-actions { padding:0; }
.heading-actions .button { font-size:12px; min-height:38px; }
.library-title { gap:0; }
.section-icon { display:none; }
.library-title h2 { font-size:13px; font-weight:500; }
.library-title p { font-size:11px; margin:0; }
.library-title>div { display:flex; gap:12px; align-items:baseline; }
.library-section>.section-heading { margin-bottom:12px; }
#refresh-works { min-height:34px; padding:5px 8px; font-size:11px; }
#refresh-works .icon { width:14px; height:14px; }
.library-tools { margin-bottom:18px; gap:8px; }
.library-tools input { background:transparent; min-height:38px; font-size:13px; }
.library-tools select { min-height:38px; font-size:12px; }
.search-field .icon { width:16px; height:16px; }
.library-column-head { padding:0 14px 10px; font-size:11px; letter-spacing:0; }
.work-list { background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; }
.work-row {
  display:flex; align-items:center; gap:14px; padding:19px 14px;
  border:0; border-radius:0; background:transparent;
}
.work-row+.work-row { border-top:1px solid var(--line); }
.work-row:hover { background:#efefe8; }
.work-row.current { background:#e9ede5; box-shadow:inset 2px 0 0 var(--accent); }
.work-art,.work-art.father,.work-art.mother,.work-art.unknown {
  width:26px; height:30px; border:0; border-radius:0; background:transparent;
  color:#858b7e; font-size:11px; font-variant-numeric:tabular-nums;
}
.work-copy h3 { font-size:14px; font-weight:500; line-height:1.6; }
.work-meta { font-size:11px; margin-top:4px; color:var(--muted); }
.work-actions { gap:4px; }
.work-actions .button { min-height:34px; padding:6px 10px; font-size:11px; border-radius:5px; }
.work-actions .work-play { background:transparent; border:1px solid #d6ddcf; color:var(--accent); box-shadow:none; }
.work-actions .work-play:hover:not(:disabled) { background:#dce4d6; }
.work-actions .icon { width:14px; height:14px; }
.workbench-heading { margin-bottom:24px; }
.workbench-heading .eyebrow { display:none; }
.workbench-heading h1 { font-size:24px; font-weight:550; }
.workbench-heading p { font-size:12px; margin-top:5px; }
.studio-grid { grid-template-columns:minmax(280px,.82fr) minmax(360px,1.25fr); gap:36px; }
.assistant-heading { margin:0 0 17px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.assistant-mark { display:none; }
.assistant-heading h2 { font-size:13px; font-weight:500; }
.assistant-heading p { display:none; }
.compose-card { background:transparent; padding:0; border:0; border-radius:0; }
.compose-card #topic { min-height:112px; font-size:14px; padding:12px; background:var(--surface); }
.field { font-size:12px; gap:7px; margin-bottom:17px; }
.inspiration-chips { margin-bottom:20px; gap:6px; }
.inspiration-chips button { background:transparent; border:0; padding:5px 7px; font-size:11px; min-height:30px; }
.inspiration-chips .icon { display:none; }
.voice-picker { gap:8px; margin-bottom:18px; }
.voice-picker label { padding:10px 12px; min-height:42px; border-radius:5px; background:var(--surface); }
.voice-picker label:has(input:checked) { border-color:#9ba994; background:#edf0e8; }
.voice-picker input { top:50%; right:12px; transform:translateY(-50%); }
.voice-symbol,.voice-picker small { display:none; }
.form-row .field { margin-bottom:17px; }
.form-row select { background:var(--surface); min-height:40px; font-size:13px; }
.compose-card .primary { min-height:40px; font-size:12px; }
#compose-button .icon { display:none; }
.form-help { text-align:left; font-size:11px; line-height:1.8; }
.other-types { margin-top:12px; }
.revision-box { margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.revision-box h2 { font-size:13px; }
.revision-box .section-heading { margin-bottom:11px; }
.revision-box textarea { background:var(--surface); min-height:72px; font-size:13px; }
.workspace-footnote { display:none; }
.preview-card { border-radius:6px; border-color:#dedfd6; box-shadow:0 2px 8px #30383105; }
.paper-toolbar { min-height:46px; padding:6px 14px 6px 22px; background:transparent; }
.paper-label { font-size:11px; gap:7px; }
.paper-label .icon { display:none; }
.paper-content { padding:25px 28px 0; }
.title-field input { font-size:23px; font-weight:500; letter-spacing:0; }
#draft-text { font-size:15px; line-height:2; }
.paper-bottom { padding:14px 22px; background:transparent; }
.editor-actions { padding:0; }
.editor-actions .button { font-size:12px; min-height:38px; }
.jobs-section { margin-top:28px; }
.jobs-section h2 { font-size:12px; font-weight:500; }
.job-row { background:transparent; border-radius:0; }
/* The player stays below the workspace. Queue controls never move the media node. */
.player {
  left:calc(236px + 18px); right:18px; bottom:14px; padding:12px 16px;
  border:1px solid #d5d9ce; border-radius:8px; background:#fffefb;
  box-shadow:0 4px 18px #3038310d; backdrop-filter:none;
  display:grid; grid-template-columns:minmax(140px,.8fr) minmax(300px,1.6fr) auto; gap:14px;
}
.sidebar-collapsed .player { left:18px; }
.player-info { min-width:0; }
.player-info strong { font-size:12px; font-weight:500; max-width:none; }
.player-info span { font-size:11px; }
.player-info .player-queue { color:var(--accent); margin-top:2px; font-variant-numeric:tabular-nums; }
.player-transport { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:3px; min-width:0; }
.transport-buttons { display:flex; align-items:center; gap:2px; }
.player-transport .icon-button { min-height:36px; min-width:30px; padding:6px; }
.player-transport .main-play { border-radius:50%; background:var(--ink); color:var(--surface); width:36px; margin:0 3px; }
.playback-timeline { display:flex; align-items:center; gap:8px; min-width:0; }
.playback-timeline span { font-size:11px; color:var(--muted); min-width:28px; font-variant-numeric:tabular-nums; }
#playback-position { appearance:none; -webkit-appearance:none; flex:1; width:100%; height:32px; min-height:32px; padding:0; border:0; background:transparent; cursor:pointer; accent-color:var(--accent); }
#playback-position::-webkit-slider-runnable-track { height:3px; background:#d7ddd0; border-radius:2px; }
#playback-position::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; margin-top:-3.5px; border-radius:50%; background:var(--accent); }
#playback-position::-moz-range-track { height:3px; background:#d7ddd0; }
#playback-position::-moz-range-progress { background:var(--accent); height:3px; }
#playback-position::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:var(--accent); }
.player-transport .icon { width:17px; height:17px; }
.player audio { width:100%; min-width:0; height:40px; }
.player audio::-webkit-media-controls-panel { background:#f1f2ed; }
.player-actions { gap:0; flex-wrap:nowrap; }
.player-actions .icon-button { min-height:36px; min-width:32px; font-size:11px; padding:6px; }
.player .error-text { grid-column:1/-1; }
.has-player #main-content { padding-bottom:155px; }
@media(min-width:1600px) { #main-content { padding-top:38px; } }
@media(max-width:1180px) {
  #main-content { padding:28px 28px 60px; }
  .studio-grid { gap:26px; grid-template-columns:minmax(260px,.8fr) minmax(340px,1.2fr); }
  .player,.sidebar-collapsed .player { left:14px; right:14px; grid-template-columns:minmax(120px,.7fr) minmax(260px,1.5fr) auto; gap:8px; }
  #skip-back,#skip-forward { display:none; }
}
@media(max-width:760px) {
  .workspace-header { height:52px; padding:0 20px; }
  #main-content { padding:25px 20px 40px; }
  .page-heading { margin-bottom:21px; padding-bottom:0; gap:12px; }
  .page-heading h1 { font-size:23px; }
  .page-heading p { font-size:11px; }
  .page-heading .eyebrow { font-size:11px; margin-bottom:5px; }
  .page-heading .heading-actions .button { min-height:36px; padding:7px 10px; font-size:11px; }
  .library-title>div { gap:8px; }
  .library-tools { margin-bottom:17px; }
  .library-tools input { min-height:42px; font-size:14px; }
  .library-tools select { min-height:38px; font-size:12px; }
  .work-list { display:block; }
  .work-row { display:grid; grid-template-columns:22px minmax(0,1fr); gap:5px 10px; padding:17px 4px 14px; border:0!important; border-radius:0; }
  .work-row+.work-row { border-top:1px solid var(--line)!important; }
  .work-row:hover { background:#efefe8; }
  .work-art { grid-column:1; grid-row:1; width:22px; height:26px; padding-top:2px; font-size:11px; }
  .work-copy { grid-column:2; }
  .work-copy h3 { font-size:14px; }
  .work-meta { font-size:11px; line-height:1.8; }
  .work-actions { grid-column:2; display:flex; justify-content:flex-start; gap:7px; padding:4px 0 0; border:0; margin:0; }
  .work-actions .button { min-height:36px; font-size:11px; padding:6px 9px; }
  .studio-grid { display:block; }
  .workbench-heading { margin-bottom:17px; }
  .workbench-heading h1 { font-size:22px; }
  .workbench-heading p { display:none; }
  .assistant-heading { margin:19px 0 15px; }
  .compose-card #topic { min-height:118px; font-size:16px; }
  .field { font-size:13px; }
  .voice-picker label { min-height:44px; font-size:13px; }
  .form-row select { font-size:16px; }
  .mobile-panel-tabs { margin-bottom:17px; border-radius:5px; }
  .preview-card { border-radius:6px; min-height:0; }
  .paper-content { padding:22px 20px 0; }
  .title-field input { font-size:22px; }
  #draft-text { font-size:16px; }
  .paper-bottom { padding:12px 16px; }
  .editor-actions { padding:0; }
  .has-player .body-field textarea { height:clamp(160px,calc(100dvh - 620px),260px); min-height:160px; }
  .editor-actions .button { min-height:42px; font-size:12px; }
  .player,.sidebar-collapsed .player { left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); padding:11px 12px; gap:7px; border-radius:7px; grid-template-columns:minmax(0,1fr) auto; }
  .player-info { grid-column:1; min-width:0; }
  .player-info strong { font-size:12px; }
  .player-info #player-meta { display:none; }
  .player-info .player-queue { font-size:11px; }
  .player-transport { grid-column:1/-1; grid-row:2; grid-template-columns:auto minmax(0,1fr); gap:7px; }
  .player-transport .icon-button { min-width:30px; min-height:40px; }
  .player-transport .main-play { min-width:36px; min-height:36px; }
  .playback-timeline { gap:5px; }
  .playback-timeline span { font-size:11px; min-width:25px; }
  #playback-position { min-height:40px; height:40px; }
  .player audio { height:42px; }
  .player-actions { grid-column:2; grid-row:1; width:auto; gap:0; justify-content:flex-end; }
  .player-actions .icon-button { min-width:36px; min-height:40px; font-size:11px; padding:6px; }
  #player-download { display:none; }
  .has-player #main-content { padding-bottom:175px; }
}
@media(max-width:760px) {
  .page-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .page-heading .heading-actions { width:auto; margin:0; }
  .page-heading .heading-actions .button { width:auto; }
}
@media(max-width:760px) {
  .mobile-panel-tabs { background:transparent; border:0; border-bottom:1px solid var(--line); padding:0; gap:16px; border-radius:0; }
  .mobile-panel-tabs button { border-radius:0; border-bottom:2px solid transparent; min-height:42px; }
  .mobile-panel-tabs button.active { background:transparent; box-shadow:none; border-bottom-color:var(--accent); }
}
/* QQ Music-inspired library: familiar music controls with the family's own content. */
:root {
  --page:#ffffff;
  --sidebar:#f6f7f8;
  --surface:#ffffff;
  --ink:#252d29;
  --muted:#626b64;
  --line:#e9eeeb;
  --accent:#007a52;
  --accent-hover:#006e4b;
  --accent-soft:#e8f8f0;
  --music-green:#26c78c;
}
::selection { background:#c5f2de; color:#153e2c; }
input,textarea { caret-color:var(--accent); }
* { scrollbar-color:#c7d2cb transparent; scrollbar-width:thin; }
input::placeholder,textarea::placeholder,.title-field input::placeholder,.body-field textarea::placeholder { color:#707970; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sidebar { background:var(--sidebar); border-right:0; }
.workspace-header { background:var(--surface); border-bottom:0; }
#main-content { max-width:none; padding:30px 38px 64px; }
.breadcrumb-parent,.workspace-note,.count,.draft-item small,.editor-meta,.status-pill,.paper-label,.form-help { color:var(--muted); }
.sidebar { padding:24px 16px; }
.sidebar-brand { margin:0 0 24px; padding:0 4px; }
.primary-nav { display:flex; flex-direction:column; gap:4px; margin:0; padding:0; }
.nav-item { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; justify-content:start; gap:12px; width:100%; min-height:44px; padding:10px 12px; text-align:left; font-size:14px; line-height:22px; white-space:nowrap; }
.nav-item .icon { width:20px; height:20px; margin:0; }
.nav-item.active { background:var(--music-green); color:#103b29; font-weight:550; border-radius:5px; }
.nav-item:hover:not(.active),.draft-item:hover:not(:disabled) { background:#edf1ee; }
.draft-item.selected { background:#e7eee9; }
.brand { font-size:20px; letter-spacing:.015em; }
.brand-mark { color:var(--accent); }
.button.primary { background:var(--music-green); color:#113a29; border-color:var(--music-green); }
.button.primary:hover:not(:disabled) { background:#1bb97d; border-color:#1bb97d; }
.page-heading { margin-bottom:26px; padding-bottom:14px; }
.page-heading h1 { font-size:28px; font-weight:600; }
.page-heading p { color:var(--muted); font-size:12px; }
.page-heading .heading-actions .button { background:transparent; border-color:#d9e3dd; color:var(--ink); }
.music-library-heading { border-bottom:1px solid var(--line); margin-bottom:22px!important; min-height:48px; }
.voice-tabs { display:flex; align-items:stretch; gap:26px; }
.voice-tabs button { background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; padding:12px 0 13px; color:var(--muted); font-size:15px; min-height:48px; }
.voice-tabs button.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:550; }
.voice-tabs button:hover { color:var(--accent); }
#works-count { font-size:11px; color:var(--muted); }
.library-tools { align-items:center; margin-bottom:20px; gap:12px; }
#play-all { padding:9px 22px; border-radius:22px; min-height:40px; font-size:13px; gap:7px; }
#play-all .icon { width:17px; height:17px; }
.library-tools .search-field { flex:0 1 240px; margin-left:auto; min-width:120px; }
.library-tools input { background:#f5f8f6; border-color:transparent; border-radius:18px; min-height:36px; }
.library-tools select { border:0; color:var(--muted); font-size:12px; padding:6px 25px 6px 8px; }
.library-column-head,.work-row { display:grid; grid-template-columns:28px minmax(0,1fr) 100px 54px 185px; gap:14px; align-items:center; }
.library-column-head { font-size:11px; color:var(--muted); padding:0 15px 11px; }
.library-column-head span:last-child { width:auto; text-align:right; padding-right:14px; }
.work-list { border:0; }
.work-row { padding:15px; border:0; border-radius:4px; min-height:76px; background:var(--surface); }
.work-row:nth-child(even) { background:#fafcfb; }
.work-row+.work-row { border:0; }
.work-row:hover { background:#f1f7f3; }
.work-row.current { background:#eaf8f0; box-shadow:none; }
.work-row.current h3 { color:var(--accent); }
.work-art,.work-art.father,.work-art.mother,.work-art.unknown { font-size:11px; color:var(--muted); width:28px; }
.work-copy h3 { font-size:14px; font-weight:450; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.work-meta { font-size:11px; margin-top:5px; color:var(--muted); }
.work-voice { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:2px; }
.work-voice small { font-size:11px; }
.work-duration { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.work-actions { justify-content:flex-end; gap:2px; }
.work-actions .button { padding:5px 7px; font-size:11px; border:0; min-height:34px; }
.work-actions .work-play { color:var(--accent); background:transparent; border:0; }
.work-actions .work-play:hover:not(:disabled) { background:#d7f2e5; }
.card,.preview-card { background:var(--surface); border-color:var(--line); box-shadow:none; border-radius:6px; }
.compose-card #topic,.voice-picker label,.form-row select,.revision-box textarea { background:#fbfdfc; border-color:#dfe7e2; }
.voice-picker label:has(input:checked) { border-color:#4cbd8c; background:#effbf5; }
.inspiration-chips button { color:var(--muted); }
.preview-empty h2 { letter-spacing:0; font-size:19px; }
.player,.sidebar-collapsed .player {
  inset:auto 0 0; border:0; border-top:1px solid #e1e8e3; border-radius:0;
  background:#fff; box-shadow:0 -3px 18px #25463306; padding:12px 25px;
  grid-template-columns:46px minmax(140px,.8fr) minmax(320px,1.7fr) auto; gap:14px; min-height:96px;
}
.player-cover { width:46px; height:46px; display:grid; place-items:center; background:#dff5e9; color:#116c47; border-radius:5px; font-size:20px; font-weight:500; }
.player-info strong { font-size:12px; }
.player-info span,.player-info .player-queue { color:var(--muted); font-size:11px; }
.player-transport { display:flex; flex-direction:column; align-items:center; gap:0; }
.transport-buttons { gap:16px; }
.player-transport .main-play { background:var(--music-green); color:#123c29; width:36px; height:36px; }
.playback-timeline { width:100%; max-width:620px; gap:10px; }
.playback-timeline span { font-size:11px; }
#playback-position { min-height:22px; height:22px; }
#playback-position::-webkit-slider-runnable-track { background:#dfe7e1; }
#playback-position::-webkit-slider-thumb { background:var(--accent); }
.volume-control { display:flex; align-items:center; gap:5px; margin-right:8px; }
.volume-control .icon { width:15px; height:15px; color:var(--muted); }
#audio-volume { width:55px; min-height:34px; padding:0; border:0; background:transparent; accent-color:var(--accent); }
.player-actions .icon-button { color:var(--muted); }
#skip-back,#skip-forward { display:none; }
#queue-toggle[aria-expanded=true] { color:var(--accent); background:var(--accent-soft); }
.queue-panel { position:absolute; right:14px; bottom:calc(100% + 8px); width:380px; max-width:calc(100vw - 28px); max-height:min(65dvh,520px); background:var(--surface); border:1px solid #dae5dd; border-radius:8px; box-shadow:0 8px 24px #00000015; overflow:hidden; }
.queue-heading { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 9px 20px; border-bottom:1px solid var(--line); }
.queue-heading h2 { font-size:14px; font-weight:500; }
.queue-heading h2 span { font-size:11px; color:var(--muted); margin-left:6px; }
#queue-list { list-style:none; margin:0; padding:6px 0; max-height:min(calc(65dvh - 64px),456px); overflow-y:auto; }
.queue-item { display:grid; grid-template-columns:22px minmax(0,1fr) 32px; align-items:center; width:100%; text-align:left; padding:11px 20px; gap:9px; min-height:46px; border:0; border-radius:0; background:transparent; color:var(--ink); font-size:12px; }
.queue-item:hover { background:#f4f8f5; }
.queue-item.current { color:var(--accent); background:var(--accent-soft); }
.queue-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.queue-number,.queue-item small { color:var(--muted); font-size:11px; }
.has-player #main-content { padding-bottom:155px; }
@media(min-width:1181px) { .has-player .sidebar { height:calc(100dvh - 96px); } }
@media(min-width:761px) { .has-player .preview-card { height:calc(100dvh - 275px); } }
@media(max-width:1180px) {
  .player,.sidebar-collapsed .player { left:0; right:0; bottom:0; grid-template-columns:40px minmax(110px,.7fr) minmax(240px,1.5fr) auto; gap:10px; padding:12px 16px; }
  .player-cover { width:40px; height:40px; }
  .volume-control { display:none; }
  .library-column-head,.work-row { grid-template-columns:24px minmax(0,1fr) 75px 45px 175px; gap:10px; }
}
@media(max-width:760px) {
  #main-content { padding:24px 20px 45px; }
  .workspace-header { padding:0 20px; }
  .page-heading { display:flex; align-items:center; gap:12px; flex-wrap:nowrap; margin-bottom:20px; padding-bottom:0; }
  .page-heading h1 { font-size:25px; }
  .page-heading p { display:none; }
  .page-heading .heading-actions .button { min-height:44px; padding:8px 12px; font-size:12px; }
  .nav-item,.sidebar-brand .icon-button,.draft-section .icon-button { min-height:44px; }
  .sidebar-brand .icon-button,.draft-section .icon-button { min-width:44px; }
  .music-library-heading { flex-wrap:nowrap; gap:5px; margin-bottom:17px!important; }
  .voice-tabs { flex:1; gap:20px; }
  .voice-tabs button { min-height:46px; padding:11px 0; font-size:13px; white-space:nowrap; }
  #works-count { display:none; }
  .library-tools { display:grid; grid-template-columns:auto minmax(0,1fr) 44px; gap:8px; margin-bottom:18px; }
  #play-all { min-height:44px; padding:8px 16px; font-size:12px; grid-column:1; }
  .library-tools select { grid-column:2; min-width:0; max-width:none; min-height:44px; font-size:16px; padding-right:20px; }
  .library-tools .search-field { grid-column:1/-1; grid-row:2; width:100%; margin:0; }
  .library-tools input { min-height:44px; font-size:16px; border-radius:7px; }
  #refresh-works { min-width:44px; min-height:44px; grid-column:3; grid-row:1; padding:10px; }
  .library-column-head { display:none; }
  .work-row { display:grid; grid-template-columns:22px minmax(0,1fr) 34px; gap:4px 9px; padding:15px 5px 12px; border:0!important; min-height:112px; border-radius:4px; }
  .work-row+.work-row { border:0!important; }
  .work-copy { grid-column:2; grid-row:1; }
  .work-copy h3 { font-size:14px; white-space:normal; line-height:1.65; }
  .work-meta { display:none; }
  .work-art { grid-column:1; grid-row:1; padding-top:0; align-self:start; }
  .work-voice { grid-column:2; grid-row:2; flex-direction:row; gap:10px; font-size:11px; align-items:center; }
  .work-voice small { font-size:11px; }
  .work-duration { grid-column:3; grid-row:1; font-size:11px; align-self:start; padding-top:5px; }
  .work-actions { grid-column:2/-1; grid-row:3; justify-content:flex-start; gap:7px; padding:0; }
  .work-actions .button { min-height:44px; min-width:44px; padding:8px; font-size:11px; }
  .inspiration-chips button,.mobile-panel-tabs button,.editor-actions .button { min-height:44px; }
  .revision-box textarea { font-size:16px; }
  .player,.sidebar-collapsed .player { left:0; right:0; bottom:0; padding:10px 14px max(10px,env(safe-area-inset-bottom)); grid-template-columns:34px minmax(0,1fr) auto; gap:5px 9px; min-height:120px; }
  .player-cover { grid-column:1; grid-row:1; width:34px; height:34px; font-size:16px; }
  .player-info { grid-column:2; grid-row:1; }
  .player-info strong { font-size:11px; }
  .player-info .player-queue { font-size:11px; margin-top:1px; }
  .player-actions { grid-column:3; grid-row:1; }
  .player-actions .icon-button { min-height:44px; min-width:44px; font-size:11px; padding:7px; }
  #loop-button { display:none; }
  .player-transport { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; }
  .transport-buttons { gap:2px; }
  .player-transport .icon-button { min-height:44px; min-width:40px; padding:10px; }
  .player-transport .main-play { min-height:40px; min-width:40px; width:40px; margin:0; }
  .playback-timeline { gap:5px; }
  .playback-timeline span { font-size:11px; min-width:24px; }
  #playback-position { min-height:44px; height:44px; }
  #player-download,#close-player { display:none; }
  .queue-panel { right:8px; bottom:calc(100% + 5px); width:calc(100vw - 16px); max-width:none; }
  .queue-item { min-height:48px; }
  .has-player #main-content { padding-bottom:175px; }
  .has-player .body-field textarea { height:clamp(160px,calc(100dvh - 620px),260px); min-height:160px; }
}

.jobs-section { background:#fbfdfc; border-color:var(--line); border-radius:6px; }
.request-caption,.other-types summary,.other-types p,.form-help,.editor-meta { color:var(--muted); }
@media(max-width:760px) {
  .player-transport .icon-button,.player-transport .main-play { min-width:44px; min-height:44px; }
  #queue-close,.compose-card .primary,.revision-box .button { min-height:44px; }
  .player-info .player-queue { font-size:11px; }
}

.status-pill,.request-caption,.revision-box .small,.request-section .small,.account-footer small { font-size:11px; }
dialog { box-shadow:0 10px 30px #00000018; }
@media(max-width:760px) { .page-heading { border-bottom:0; } }

/* Product flows share the existing music library's type, spacing and controls. */
.creation-tabs { display:flex; gap:28px; margin:20px 0 28px; border-bottom:1px solid var(--line); }
.creation-tabs button { border:0; border-radius:0; background:transparent; color:var(--muted); min-height:48px; padding:12px 4px; font:inherit; border-bottom:2px solid transparent; }
.creation-tabs button.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.song-panel { max-width:760px; }
#song-form { display:grid; gap:22px; padding:6px 0 28px; }
#song-form h2 { font-size:19px; }
.song-upload { padding:26px; background:#f6faf7; border:1px dashed #aac6b4; border-radius:8px; }
.song-upload input { width:100%; background:var(--surface); font-size:14px; }
.song-upload input::file-selector-button { border:0; border-radius:5px; padding:10px 12px; margin-right:12px; background:var(--accent-soft); color:var(--ink); font:inherit; cursor:pointer; }
.song-upload .muted { font-size:12px; line-height:1.7; }
#song-form select { max-width:360px; }
#song-submit { justify-self:start; min-width:132px; min-height:44px; }
#song-panel .jobs-section { margin-top:8px; }
.profile-identity { margin-bottom:24px; }
.service-row { display:grid; grid-template-columns:minmax(0,1.6fr) auto minmax(0,1fr); align-items:center; gap:14px; padding:18px 0; }
.service-name { overflow-wrap:anywhere; font-size:14px; }
.service-purpose { color:var(--muted); font-size:12px; text-align:right; }
.service-label { white-space:nowrap; }
.button.danger { background:#a32f36; border-color:#a32f36; color:#fff; }
.button.danger:hover { background:#87262c; }
.delete-work { color:#8e3438; }
.library-column-head,.work-row { grid-template-columns:24px minmax(0,1fr) 75px 45px 225px; }
@media(max-width:1180px) and (min-width:761px) {
  .library-column-head,.work-row { grid-template-columns:24px minmax(0,1fr) 55px 40px 200px; }
}
@media(max-width:760px) {
  .song-upload { padding:18px; }
  .song-upload input { font-size:16px; padding:8px; }
  #song-form select { max-width:none; font-size:16px; }
  .creation-tabs { margin-bottom:24px; }
  .service-row { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; }
  .service-purpose { grid-column:1/-1; text-align:left; }
  .work-row { grid-template-columns:22px minmax(0,1fr) 34px; }
  .work-actions { flex-wrap:wrap; }
  .profile-grid { display:block; }
  .profile-grid>.card { margin-bottom:22px; }
}
.profile-grid { align-items:start; }
#service-settings summary { font-size:16px; font-weight:600; cursor:pointer; }
#service-settings[open] summary { margin-bottom:20px; }
.family-avatar { flex:none; width:88px; height:88px; }
.family-avatar img { width:88px; height:88px; object-fit:cover; border-radius:12px; }
.family-avatar .large-avatar { width:88px; height:88px; font-size:24px; }
#editor-heading { font-size:20px; }