/* Noto Sans SC: self-hosted UI subset; fallback text remains visible while it loads. */
@font-face { font-family:"Family Sans"; src:url("/static/fonts/family-sans-ui.woff2") format("woff2"); font-style:normal; font-weight:400 650; font-display:swap; }
/* Native music layout: one page title, a compact player, three stable destinations. */
:root {
  --page:#fbfcf9; --surface:#fffefa; --ink:#20382f; --muted:#5d7067;
  --line:#dce6df; --accent:#207764; --accent-soft:#e9f2ec; --music-green:#227b67;
  --font-ui:"Family Sans",Roboto,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --type-label:15px; --type-action:16px; --weight-label:500; --weight-active:600;
  --nav-height:76px; --mini-height:72px;
  font-family:var(--font-ui); font-synthesis:none; text-rendering:optimizeLegibility;
  background:var(--page); color:var(--ink);
}
body { background:var(--page); }
button,input,textarea,select { font-family:inherit; }
button,a.button,.text-button { letter-spacing:.025em; line-height:1.5; }
h1,h2,h3 { text-wrap:balance; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
::selection { background:#c2e7d5; color:#163f2e; }
input,textarea { caret-color:var(--accent); }
* { scrollbar-color:#bccdc3 transparent; scrollbar-width:thin; }
.app-shell,.app-shell.sidebar-collapsed { display:block; min-height:100dvh; }
.main-shell { min-width:0; margin:0; }
.workspace-header { position:sticky; top:0; z-index:10; height:auto; min-height:72px; padding:22px max(28px,calc((100% - 1064px)/2)); background:var(--page); border:0; }
.workspace-header h1 { font-size:28px; line-height:1.25; font-weight:600; letter-spacing:.025em; }
#main-content,.has-player #main-content { width:100%; max-width:1120px; margin:0 auto; padding:8px 28px calc(var(--nav-height) + 32px + env(safe-area-inset-bottom)); }
.has-player #main-content { padding-bottom:calc(var(--nav-height) + var(--mini-height) + 32px + env(safe-area-inset-bottom)); }
.app-shell[data-page=create] #main-content { padding-bottom:calc(var(--nav-height) + 32px + env(safe-area-inset-bottom)); }
.button,.icon-button,.text-button,input,textarea,select { min-height:48px; font-size:15px; }
.icon-button { min-width:48px; padding:12px; border-radius:50%; }
.icon { width:22px; height:22px; flex:none; fill:currentColor; stroke:none; }
.button { border-radius:14px; padding:12px 20px; gap:8px; font-size:var(--type-label); font-weight:var(--weight-label); box-shadow:none; transition:background-color 160ms ease-out,box-shadow 160ms ease-out,transform 120ms ease-out; }
.button.primary { background:linear-gradient(180deg,#318e7a,var(--music-green)); border:1px solid #267a68; color:#fff; box-shadow:inset 0 1px 0 #ffffff50,0 5px 12px #1d604e1c; font-weight:550; letter-spacing:.06em; }
.button:disabled { opacity:.52; box-shadow:none; cursor:not-allowed; }
.button.primary:hover:not(:disabled) { background:#246f5f; border-color:#246f5f; }
.button:active:not(:disabled),.icon-button:active:not(:disabled) { filter:brightness(.97); transform:translateY(1px); }
.button.outline { background:var(--surface); border-color:#d6e1da; }
.button.danger { background:#a32f36; border-color:#a32f36; color:#fff; }
.text-button { padding:10px 12px; color:var(--accent); font-weight:500; }
input,textarea,select { border:1px solid #d8e1dc; border-radius:12px; background:var(--surface); padding:12px 14px; font-size:16px; box-shadow:none; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); }
input::placeholder,textarea::placeholder { color:#69776f; }
.field { font-size:14px; gap:9px; margin-bottom:20px; }
.muted,.small,.form-help,.editor-meta,.status-pill { color:var(--muted); }
.form-help { font-size:13px; line-height:1.7; margin:12px 0 0; text-align:left; }
.error-text { font-size:14px; margin:12px 0; }
.bottom-nav { position:fixed; inset:auto 0 0; z-index:30; display:flex; justify-content:center; gap:clamp(20px,8vw,140px); height:calc(var(--nav-height) + env(safe-area-inset-bottom)); padding:5px 16px calc(5px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); }
.bottom-nav .nav-item { display:flex; flex-direction:column; justify-content:center; gap:3px; width:min(160px,30%); min-height:64px; padding:4px 8px; border:0; border-radius:16px; background:transparent; color:var(--muted); text-align:center; font-size:12px; line-height:20px; font-weight:450; letter-spacing:.035em; }
.bottom-nav .nav-icon { display:grid; place-items:center; width:56px; height:32px; border-radius:20px; transition:background-color 160ms ease-out,color 160ms ease-out; }
.bottom-nav .nav-item .icon { width:23px; height:23px; }
.bottom-nav .nav-item.active { color:var(--accent); background:transparent; font-weight:600; }
.bottom-nav .nav-item.active .nav-icon { background:transparent; }
.bottom-nav .nav-item:hover:not(.active) { background:#f1f5f2; }
/* Creation: compact context, one dominant input and one stable action. */
.app-shell[data-page=create] { background:var(--page); }
.app-shell[data-page=create] .workspace-header { min-height:64px; padding-top:20px; padding-bottom:12px; }
.app-shell[data-page=create] .workspace-header h1 { font-size:24px; line-height:1.3; }
.app-shell[data-page=create] #main-content { padding-bottom:calc(var(--nav-height) + 116px + env(safe-area-inset-bottom)); }
.creation-tabs { display:flex; gap:30px; margin:0 0 24px; border:0; border-bottom:1px solid var(--line); }
.creation-tabs button { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:8px 0; border:0; border-bottom:0; border-radius:0; font-size:20px; font-weight:450; letter-spacing:.06em; background:transparent; color:var(--muted); }
.creation-tabs button.active { color:var(--ink); font-weight:600; }
.creation-tabs button.active:after { content:""; position:absolute; bottom:-1px; left:10%; right:10%; height:3px; border-radius:3px; background:var(--accent); }
.creation-tabs .icon { display:none; }
.song-panel,#workbench { max-width:720px; margin:0 auto; }
.creation-sourcebar { margin-bottom:28px; }
.reading-sources { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4px; width:100%; margin:0 0 28px; padding:4px; background:#edf2ed; border:1px solid #e2eae3; border-radius:15px; }
.reading-sources button { display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px 12px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--muted); font-size:15px; font-weight:450; letter-spacing:.04em; transition:background-color 160ms ease-out,color 160ms ease-out; }
.reading-sources button.active { background:var(--surface); border-color:#e6ece6; color:var(--ink); font-weight:550; box-shadow:0 2px 4px #244b350b; }
.creation-sourcebar .reading-sources { margin:0; }
#song-agent-form,#song-form { display:block; padding:0; }
.lead-field { gap:12px; margin:0; font-size:14px; font-weight:550; color:var(--ink); }
#song-query { min-height:68px; padding:18px; border:1px solid #bccfc3; border-radius:16px; background:var(--surface); font-size:22px; line-height:1.5; font-weight:450; box-shadow:none; }
.option-button { display:inline-flex; align-items:center; min-height:48px; max-width:100%; margin:10px 0 0; padding:10px 0; border:0; background:transparent; color:var(--accent); font-size:14px; text-align:left; overflow-wrap:anywhere; }
#song-artist-field { margin:8px 0 0; font-size:14px; }
#song-artist { min-height:52px; border-radius:12px; }
.creation-feedback { margin-top:18px; }
.creation-feedback p { margin:10px 0 0; font-size:13px; line-height:1.7; }
.creation-feedback #song-restore { margin-top:12px; min-height:48px; border-radius:12px; }
.song-upload { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:30px 18px; min-height:196px; margin:0; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-align:center; }
.song-upload .upload-symbol { position:static; display:block; width:30px; height:30px; margin:0; padding:0; border:0; border-radius:0; color:var(--accent); background:transparent; }
.song-upload .upload-title { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; font-weight:550; }
.song-upload #song-file { position:absolute; inset:0; width:100%; height:100%; max-width:none; padding:0; opacity:0; cursor:pointer; }
.song-upload .upload-limits { font-size:12px; font-weight:400; line-height:1.6; color:var(--muted); }
.song-upload:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.creation-action-dock { position:fixed; z-index:25; inset:auto 0 calc(var(--nav-height) + env(safe-area-inset-bottom)); padding:14px 20px 20px; border:0; background:var(--page); }
.action-dock-inner { display:flex; max-width:720px; margin:0 auto; }
.creation-action-dock .button { width:100%; min-height:52px; margin:0; border-radius:14px; font-size:var(--type-action); font-weight:550; letter-spacing:.08em; }
.keyboard-editing .creation-action-dock { display:none; }
.creation-options { display:flex; align-items:center; gap:10px; width:100%; min-height:64px; margin:20px 0 0; padding:10px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); text-align:left; font-size:15px; font-weight:450; letter-spacing:.025em; }
.creation-options:hover:not(:disabled) { border-color:#b9ccbf; background:#f8faf6; }
.creation-options:disabled { opacity:.55; cursor:wait; }
.creation-options .settings-portrait { width:36px; height:36px; flex:none; margin-right:2px; }
.creation-options .settings-language,.creation-options .settings-length { border-left:1px solid var(--line); padding-left:12px; margin-left:2px; }
.creation-options .chip-chevron { width:13px; height:13px; flex:none; margin-left:auto; color:var(--muted); }
#workbench:not([hidden]) { display:flex; flex-direction:column; }
#workbench>.reading-sources { order:0; }
#compose-pane,#result-pane { order:1; }
#reading-settings-open { order:2; }
#revision-box,#editor-error,#reading-job-note { order:3; }

#compose-pane { max-width:none; margin:0; padding:0; }
#topic { height:clamp(140px,calc(100dvh - 540px),260px); min-height:140px; padding:18px; border:1px solid #bccfc3; border-radius:16px; background:var(--surface); font-size:17px; line-height:1.85; resize:vertical; }
#reading-return-editor { margin-top:8px; padding-left:0; }
#workbench .preview-card { position:static; height:auto; min-height:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:none; }
#workbench .paper-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:60px; padding:6px 16px; border-bottom:1px solid var(--line); background:transparent; }
.paper-tools { display:flex; align-items:center; gap:6px; min-width:0; }
#workbench .paper-label { font-size:15px; font-weight:600; color:var(--ink); }
#workbench .status-pill { padding:0; background:transparent; color:var(--muted); font-size:12px; }
#workbench .status-pill:before { display:none; }
.paper-tools .text-button { min-height:48px; padding:8px; font-size:13px; }
#workbench #preview-editor { display:block; height:auto; }
#workbench .paper-content { padding:18px 18px 16px; }
#workbench .title-field { margin:0 0 18px; padding:0; border:0; }
#workbench .title-field input { min-height:48px; padding:0 0 10px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; font-size:21px; font-weight:550; box-shadow:none; }
#workbench .body-field { margin:0; }
#workbench #draft-text { width:100%; min-height:260px; height:auto; max-height:none; padding:0; border:0; border-radius:0; background:transparent; font-size:16px; line-height:1.85; resize:vertical; }
#workbench .editor-meta { display:flex; justify-content:space-between; gap:12px; margin-top:16px; padding:0; font-size:12px; color:var(--muted); }
#workbench .paper-bottom { padding:0 18px; background:transparent; }
#workbench .paper-bottom:has(.error-panel:not([hidden])) { padding:0 18px 16px; }
.revision-box { margin:16px 0; padding:0; border:0; }
.revision-box summary { min-height:48px; padding:12px 0; cursor:pointer; font-size:14px; color:var(--accent); }
.revision-box textarea { margin-top:8px; font-size:16px; }
#reading-settings-dialog { position:fixed; inset:auto 0 0; width:100%; max-width:520px; max-height:min(90dvh,640px); margin:0 auto; padding:0; border:0; border-radius:24px 24px 0 0; background:var(--surface); color:var(--ink); transform:none; box-shadow:0 -12px 40px #183c2b20; }
#reading-settings-dialog[open] { display:flex; flex-direction:column; }
#reading-settings-dialog::backdrop { background:#142c2259; backdrop-filter:none; }
.sheet-heading { display:flex; align-items:center; justify-content:space-between; flex:none; gap:12px; padding:14px 18px 8px; border-bottom:1px solid var(--line); }
.sheet-heading h2 { margin:0; font-size:20px; font-weight:600; }
#reading-settings-dialog .settings-body { display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; margin:0; padding:20px; overflow:auto; }
#reading-settings-dialog .voice-picker { display:grid; grid-template-columns:1fr 1fr; grid-column:1/-1; gap:10px; margin:0; min-width:0; }
.voice-picker .choice-portrait { width:32px; height:32px; flex:none; }
.voice-picker label:has(input:disabled) .choice-portrait { opacity:.6; }
.voice-picker legend { margin-bottom:10px; font-size:14px; }
.voice-picker label { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; margin:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font-size:15px; }
.voice-picker label:has(input:checked) { border-color:var(--accent); background:#e2eee7; }
.voice-picker input { position:static; width:16px; height:16px; min-height:0; margin:0; padding:0; opacity:1; transform:none; accent-color:var(--accent); }
.settings-body .field { margin:0; font-size:14px; }
.voice-picker label:has(input:disabled) { color:var(--muted); background:#f4f6f2; }
.voice-picker small { display:block; font-size:12px; line-height:1.5; font-weight:400; color:var(--muted); }
.settings-body select,.settings-body input { min-height:48px; border-radius:12px; }
#custom-length-field { grid-column:1/-1; }
.sheet-footer { flex:none; padding:12px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface); }
.sheet-footer .button { width:100%; min-height:52px; border-radius:16px; }
#song-panel button:focus-visible,#workbench button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#song-query:focus,#topic:focus { border-color:var(--accent); outline:2px solid #b8dccc; outline-offset:1px; }
.music-library-heading { margin:0 0 20px!important; border:0; min-height:48px; }
.voice-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.voice-tabs button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:8px 14px; border:0; border-radius:24px; color:var(--muted); background:transparent; font-size:15px; }
.voice-tabs button.active { background:var(--accent-soft); color:var(--accent); border:0; font-weight:600; }
.voice-portrait { position:relative; display:grid; place-items:center; flex:none; width:100%; height:100%; overflow:hidden; border-radius:50%; background:#e8efe9; color:var(--accent); }
.voice-portrait img { position:absolute; left:50%; top:50%; max-width:none; object-fit:cover; pointer-events:none; }
.voice-portrait.father img { width:210%; height:210%; transform:translate(-61%,-30%); }
.voice-portrait.mother { background:#fff; }
.voice-portrait.mother img { width:90%; height:120%; transform:translate(-50%,-40%); }
.voice-portrait>.icon { width:55%; height:55%; }
.voice-tabs .voice-portrait { width:28px; height:28px; }
#works-count { font-size:12px; }
.library-tools { display:grid; grid-template-columns:minmax(0,1fr) auto auto 48px; align-items:center; gap:12px; margin-bottom:24px; }
.library-tools .search-field { width:auto; min-width:0; margin:0; }
.library-tools input { min-height:48px; background:#e9eeeb; border:1px solid transparent; border-radius:24px; padding-left:44px; font-size:15px; }
.library-tools .search-field .icon { width:19px; height:19px; left:16px; }
#play-all { min-height:48px; padding:12px 20px; border-radius:24px; font-size:14px; }
.library-tools select { min-height:48px; border:0; background:transparent; font-size:14px; color:var(--muted); }
#refresh-works { min-width:48px; min-height:48px; padding:12px; }
#refresh-works .icon { width:21px; height:21px; }
.library-column-head,.work-row { display:grid; grid-template-columns:52px minmax(0,1fr) 64px 52px 96px; align-items:center; gap:16px; }
.library-column-head { width:100%; justify-content:normal; padding:0 0 14px; font-size:12px; }
.library-column-head span:nth-child(2) { grid-column:2; }
.library-column-head span:nth-child(3) { grid-column:3; }
.library-column-head span:nth-child(4) { grid-column:4; }
.library-column-head span:last-child { grid-column:5; padding:0; }
.work-list { background:transparent; border:0; border-radius:0; }
.work-row,.work-row:nth-child(even) { min-height:84px; padding:14px 0; border:0!important; border-bottom:1px solid #e8eeea!important; border-radius:0; background:transparent; }
.work-row:hover { background:#edf3ef; }
.work-row.current { background:#e9f5ed; border-radius:12px; box-shadow:none; }
.work-art,.work-art.father,.work-art.mother,.work-art.unknown { display:grid; place-items:center; width:52px; height:52px; align-self:center; padding:0; border:0; border-radius:50%; background:#dcefe5; color:#2b7550; font-size:19px; font-weight:550; }
.work-art.mother { background:#f2e7ec; color:#87566e; }
.work-art.unknown { background:#e4e9ef; color:#4e657a; }
.work-art,.player-cover,.full-player-cover { position:relative; }
.work-art>.icon,.player-cover>.icon,.full-player-cover>.icon { width:56%; height:56%; }
.art-voice { position:absolute; right:-3px; bottom:-2px; display:grid; place-items:center; width:20px; height:20px; border:2px solid var(--page); border-radius:50%; background:#2b7550; color:white; font-size:10px; font-weight:600; line-height:1; }
[data-voice=mother] .art-voice { background:#87566e; }
.player-cover[data-voice=mother] { background:#f2e7ec; color:#87566e; }
.work-copy { min-width:0; }
.work-copy h3 { font-size:16px; line-height:1.5; font-weight:550; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.work-meta { font-size:12px; margin-top:5px; }
.work-mobile-meta { display:none; font-size:12px; line-height:1.6; margin:5px 0 0; color:var(--muted); }
.work-voice,.work-duration { color:var(--muted); font-size:13px; }
.work-actions { display:flex; gap:0; align-items:center; justify-content:flex-end; padding:0; margin:0; border:0; flex-wrap:nowrap; }
.work-actions .button.work-play { flex:none; min-width:48px; width:48px; min-height:48px; margin:0; padding:12px; border:0; border-radius:50%; background:transparent; color:var(--accent); font-size:0; }
.work-actions .work-play .icon { width:22px; height:22px; }
.work-actions .work-more { color:var(--muted); }
.jobs-section { margin:0 0 24px; padding:16px; border:0; border-radius:16px; background:var(--surface); }
.jobs-section h2 { font-size:15px; }
.job-row { display:block; background:transparent; border-radius:0; padding:16px 0; }
.job-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.job-controls:empty { display:none; }
.job-controls .button { flex:none; min-height:44px; padding:9px 16px; border-radius:12px; font-size:14px; box-shadow:none; }
.job-controls [data-job-action=dismiss] { color:var(--muted); border-color:transparent; background:transparent; }
#song-restore { margin-right:8px; }
.job-row p { font-size:13px; }
.profile-grid { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); gap:24px; align-items:start; }
.profile-grid>.card { padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:none; }
.profile-identity { display:flex; gap:20px; align-items:center; margin:0 0 24px; }
.profile-identity h2 { font-size:23px; font-weight:600; }
.family-avatar,.family-avatar img,.family-avatar .large-avatar { width:80px; height:80px; flex:none; border-radius:20px; }
.family-avatar img { object-fit:cover; }
.identity-card #logout { display:block; margin:16px auto 0; color:var(--muted); }
.card>.section-heading { margin-bottom:8px; border:0; }
.card h2 { font-size:18px; }
.service-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:5px 12px; padding:18px 0; }
.service-icon { grid-column:1; grid-row:1/3; display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:#eef5f0; color:var(--accent); }
.service-icon .icon { width:21px; height:21px; }
.service-row+.service-row { border-top:1px solid #edf1ee; }
.service-name { grid-column:2; font-size:14px; font-weight:550; overflow-wrap:anywhere; }
.service-purpose { grid-column:2/-1; text-align:left; font-size:12px; }
.service-label { grid-column:3; font-size:11px; padding:4px 7px; border-radius:8px; background:var(--accent-soft); color:var(--accent); }
.service-label.off { background:#f2f3f1; color:#68756d; }
.settings-card { grid-column:1/-1; }
.player,.sidebar-collapsed .player { position:fixed; inset:auto 0 calc(var(--nav-height) + env(safe-area-inset-bottom)); z-index:25; display:flex; align-items:center; gap:4px; min-height:var(--mini-height); height:var(--mini-height); padding:8px max(16px,calc((100% - 1064px)/2)); border:0; border-top:1px solid var(--line); border-radius:0; background:var(--surface); box-shadow:0 -4px 16px #152b1e05; }
.player-summary { flex:1; display:flex; align-items:center; gap:12px; min-width:0; min-height:56px; padding:0 12px 0 0; border:0; background:transparent; text-align:left; }
.player-cover { flex:none; display:grid; place-items:center; width:44px; height:44px; padding:3px; border-radius:50%; font-size:18px; }
.player-info { display:flex; flex-direction:column; min-width:0; }
.player-info strong { display:block; max-width:none; font-size:14px; font-weight:550; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-info #player-meta { display:block; font-size:12px; line-height:1.5; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-info .player-queue { display:none; }
.player>.main-play,.player>#queue-toggle { display:grid; place-items:center; width:48px; height:48px; min-height:48px; padding:12px; background:transparent; color:var(--ink); }
.player>.main-play { background:var(--accent); color:#fff; border-radius:50%; padding:14px; }
.player-cover .art-voice { width:17px; height:17px; font-size:9px; border-color:var(--surface); }
.app-shell[data-page=create] .player { display:none; }
dialog { max-width:min(560px,calc(100vw - 32px)); max-height:88dvh; border:0; border-radius:24px; background:var(--surface); box-shadow:0 12px 40px #122c2020; }
dialog::backdrop { background:#101d17a3; }
.dialog-content { padding:26px; }
.dialog-content h2 { font-size:21px; }
.dialog-actions { flex-wrap:wrap; gap:10px; }
.confirm-text,.detail-text { font-size:16px; line-height:1.9; }
.check-label { font-size:14px; }
.queue-panel { position:fixed; inset:auto 0 0; margin:0 auto; width:min(600px,100vw); max-width:none; max-height:78dvh; padding:12px 0 max(16px,env(safe-area-inset-bottom)); border:0; border-radius:28px 28px 0 0; overflow:hidden; }
.queue-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 20px 0; border:0; }
.queue-heading h2 { font-size:21px; font-weight:600; }
.queue-heading h2 span { color:var(--muted); font-size:13px; font-weight:400; margin-left:6px; }
.queue-mode { font-size:13px; color:var(--muted); margin:4px 24px 12px; }
#queue-list { list-style:none; max-height:calc(78dvh - 130px); overflow:auto; padding:0; margin:0; }
.queue-item { display:grid; grid-template-columns:24px minmax(0,1fr) 32px; align-items:center; gap:12px; width:100%; min-height:64px; padding:16px 24px; background:transparent; border:0; border-radius:0; color:var(--ink); text-align:left; font-size:15px; }
.queue-item.current { color:var(--accent); background:var(--accent-soft); }
.queue-item:hover { background:#eff6f2; }
.queue-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-number,.queue-item small { color:var(--muted); font-size:12px; }
/* Expanded player: an uninterrupted surface, a real record and restrained transport. */
.player-dialog { position:fixed; inset:0; margin:0 auto; width:min(600px,100vw); max-width:none; height:100dvh; max-height:100dvh; padding:12px 28px max(24px,env(safe-area-inset-bottom)); border:0; border-radius:0; overflow:auto; background:radial-gradient(ellipse at 50% 34%,#edf5ee 0,transparent 57%),var(--page); color:var(--ink); }
.player-dialog[open] { display:flex; flex-direction:column; }
.player-dialog::backdrop { background:var(--page); }
.player-dialog>.sheet-heading { display:grid; grid-template-columns:48px 1fr 48px; align-items:center; flex:none; margin:0 0 24px; padding:0; border:0; text-align:center; color:var(--ink); font-size:15px; font-weight:500; letter-spacing:.04em; }
#player-dialog-close { grid-column:1; grid-row:1; }
.player-more { position:relative; grid-column:3; grid-row:1; }
.player-more>summary { display:grid; place-items:center; width:48px; height:48px; cursor:pointer; list-style:none; border-radius:50%; }
.player-more>summary::-webkit-details-marker { display:none; }
.player-more>summary .icon { transform:rotate(90deg); width:20px; height:20px; }
.player-menu { position:absolute; right:0; top:50px; z-index:5; width:188px; padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:0 8px 24px #20382f16; text-align:left; }
.player-menu .text-button { display:flex!important; align-items:center; justify-content:flex-start; width:100%; min-height:48px; padding:10px 14px; border-radius:9px; font-size:14px; color:var(--ink); }
.player-menu .text-button:hover { background:var(--accent-soft); }
.full-player-cover { display:grid; place-items:center; flex:none; width:min(78vw,330px,42dvh); height:min(78vw,330px,42dvh); padding:0; border-radius:50%; margin:0 auto 30px; background:repeating-radial-gradient(circle,#1f352d 0 1px,#2a4137 1.4px 2px,#1a3027 2.4px 3px); border:2px solid #4f6d60; color:#fff; box-shadow:inset 0 0 0 2px #142e25,0 14px 24px #244a3324; }
.full-player-cover:before { content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 25deg,transparent,#dbe8d625,transparent 30%,#b6c8bd1c,transparent 60%,#e6f5e522,transparent); pointer-events:none; }
.player-cover[data-voice] { background:#293c32; color:#fff; }
.full-player-cover>.voice-portrait { width:57%; height:57%; border:2px solid #c9ded0; box-shadow:0 0 0 2px #1e3b2e; }
.player-cover>.voice-portrait,.full-player-cover>.voice-portrait { animation:voice-record-spin 24s linear infinite; animation-play-state:paused; }
.player-cover[data-spinning=true]>.voice-portrait,.full-player-cover[data-spinning=true]>.voice-portrait { animation-play-state:running; }
.player-dialog:not([open]) .voice-portrait,.app-shell[data-page=create] .player .voice-portrait,body:has(#player-dialog[open]) .player .voice-portrait { animation-play-state:paused; }
@keyframes voice-record-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .player-cover>.voice-portrait,.full-player-cover>.voice-portrait { animation:none; } }
.full-player-cover .art-voice { display:none; }
#full-player-title { font-size:28px; font-weight:600; letter-spacing:.03em; text-align:left; line-height:1.45; margin:0; overflow-wrap:anywhere; }
#full-player-meta { text-align:left; font-size:15px; font-weight:400; margin:6px 0 18px; line-height:1.6; }
.player-transport { display:block; margin-top:auto; }
.playback-timeline { display:grid; grid-template-columns:1fr 1fr; column-gap:10px; width:100%; max-width:none; }
.playback-timeline span { min-width:32px; font-size:12px; line-height:1.6; font-variant-numeric:tabular-nums; color:var(--muted); }
#playback-current { grid-column:1; grid-row:2; }
#playback-duration { grid-column:2; grid-row:2; text-align:right; }
#playback-position { grid-column:1/-1; grid-row:1; width:100%; min-width:0; min-height:32px; height:32px; padding:0; border:0; background:transparent; accent-color:var(--accent); }
.transport-buttons { display:flex; align-items:center; justify-content:center; gap:32px; margin:24px 0; }
.transport-buttons .icon-button { display:grid; place-items:center; width:52px; height:52px; padding:14px; background:var(--accent-soft); color:var(--ink); }
.transport-buttons .icon-button>.icon { width:26px; height:26px; }
.transport-buttons .main-play { width:68px; height:68px; padding:20px; margin:0; border:1px solid #287867; border-radius:50%; background:linear-gradient(145deg,#409d89,#227b67 60%,#206957); color:#fff; box-shadow:inset 0 1px 1px #ffffff70,0 6px 14px #1d604e27; }
.transport-buttons .main-play .icon { width:28px; height:28px; }
.player-actions { display:flex; justify-content:center; flex-wrap:nowrap; gap:0; margin:0 0 10px; }
.player-actions .text-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:44%; font-size:14px; font-weight:450; min-height:48px; color:var(--muted); }
.player-actions #loop-button { display:inline-flex; }
.player-actions .text-button+.text-button { border-left:1px solid var(--line); border-radius:0; }
.player-actions .icon { color:var(--accent); width:22px; height:22px; }
#loop-button[aria-pressed=true] { color:var(--accent); font-weight:600; }
.volume-control { display:flex; align-items:center; gap:8px; justify-content:center; padding:0 12px; }
#audio-volume { width:112px; min-height:40px; padding:0; accent-color:var(--accent); }
@media(max-height:680px) { .player-dialog>.sheet-heading { margin-bottom:12px; } .full-player-cover { width:min(64vw,31dvh); height:min(64vw,31dvh); margin-bottom:18px; } .transport-buttons { margin:14px 0; } }
.keyboard-toolbar { position:fixed; inset:auto 12px calc(var(--keyboard-inset,0px) + 8px) auto; display:flex; z-index:90; padding:0; background:transparent; border:0; }
.keyboard-toolbar[hidden] { display:none!important; }
.keyboard-toolbar .text-button { display:flex; gap:6px; align-items:center; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 3px 10px #20382f18; font-size:13px; font-weight:450; }
.keyboard-toolbar .icon { width:16px; height:16px; }
.keyboard-editing #bottom-nav,.keyboard-editing #player { display:none; }
.keyboard-editing #main-content { padding-bottom:76px; }
.toast { top:16px; bottom:auto; z-index:120; border-radius:14px; font-size:14px; }
.auth-card { border-radius:24px; box-shadow:none; border-color:var(--line); }
@media(max-width:760px) {
  .workspace-header { min-height:68px; padding:22px 20px 16px; }
  .workspace-header h1 { font-size:25px; }
  #main-content,.has-player #main-content { padding-left:20px; padding-right:20px; }
  .bottom-nav { justify-content:space-around; gap:0; padding-left:12px; padding-right:12px; }
  .bottom-nav .nav-item { width:32%; }
  .voice-tabs { gap:4px; }
  .voice-tabs button { font-size:14px; padding:8px 12px; }
  #works-count { display:none; }
  .library-tools { grid-template-columns:auto minmax(0,1fr) 48px; gap:10px; margin-bottom:16px; }
  .library-tools .search-field { grid-column:1/-1; grid-row:1; }
  #play-all { grid-column:1; grid-row:2; }
  #kind-filter { grid-column:2; grid-row:2; justify-self:end; min-width:0; padding-right:18px; font-size:14px; }
  #refresh-works { grid-column:3; grid-row:2; }
  .library-column-head { display:none; }
  .work-row { grid-template-columns:52px minmax(0,1fr) 96px; gap:12px; min-height:80px; padding:12px 0; }
  .work-art { grid-column:1; grid-row:1; }
  .work-copy { grid-column:2; grid-row:1; }
  .work-copy h3 { font-size:15px; white-space:normal; }
  .work-meta,.work-voice,.work-duration { display:none; }
  .work-mobile-meta { display:block; }
  .work-actions { grid-column:3; grid-row:1; gap:0; }
  .work-actions .work-play { min-height:48px; padding:12px; }
  .work-actions .button .icon { width:22px; height:22px; }
  .profile-grid { display:block; }
  .profile-grid>.card { padding:20px; margin-bottom:20px; }
  .profile-identity { gap:18px; }
  .profile-identity h2 { font-size:22px; }
  .player,.sidebar-collapsed .player { padding:8px 12px; }
  .player-summary { gap:10px; }
  .player-info strong { font-size:14px; font-weight:550; }
  .player-info #player-meta { font-size:12px; }
  .player .icon-button { min-width:48px; min-height:48px; }
  .volume-control { display:flex; }
  .player-actions .text-button { padding:10px; font-size:14px; }
  #detail-dialog { position:fixed; inset:auto 0 0; width:100%; max-width:none; margin:0; border-radius:28px 28px 0 0; padding-bottom:env(safe-area-inset-bottom); }
  .dialog-content { padding:24px 20px; }
  .dialog-actions .button { min-height:48px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

.auth-card .brand-image { width:48px; height:48px; object-fit:cover; border-radius:14px; flex:none; }


@media (max-width:380px) {
 .creation-sourcebar { gap:8px; }

 #workbench .paper-toolbar { padding:6px 12px; }
 #workbench .paper-content { padding:16px 14px; }
 .paper-tools { gap:0; }
}

#service-settings>summary { min-height:48px; display:flex; align-items:center; font-size:15px; font-weight:500; letter-spacing:.025em; cursor:pointer; }
#detail-delete { background:transparent; color:#9c373d; border-color:#e4c5c5; box-shadow:none; }
@media(max-width:380px) { .creation-options { gap:8px; padding:10px 12px; font-size:14px; } .creation-options .settings-language,.creation-options .settings-length { padding-left:9px; margin-left:0; } }