/* Shared visual language from ALLSTARS Lyrics Studio, 2026-09-09. */
:root {
  color-scheme:light; --bg:#f5f6f7; --panel:#fff; --panel-2:#f7f8f9;
  --line:#dce1e5; --text:#30383f; --muted:#707b84; --accent:#327d70;
  --primary-ink:#fff; --accent-2:#486e97; --green:#428473; --success:#428473;
  --timed-bg:#e8f5ee; --timed-overlay:rgba(32,155,103,.16);
  --selected-bg:#ade9d0; --selected-overlay:rgba(12,166,106,.24);
  --playing-bg:#c5defa; --playing-overlay:rgba(49,124,213,.25);
  --warning:#916721; --warning-bg:#faf5e9; --danger:#ae4e50; --danger-bg:#fff2f2;
  --waveform:#8b99a4; --waveform-axis:#e7ebee; --boundary:#7b919e; --playhead:#cc785d;
  --sidebar:238px;
}
:root[data-theme="dark"] {
  color-scheme:dark; --bg:#202427; --panel:#292e32; --panel-2:#24292d;
  --line:#444d54; --text:#e0e5e9; --muted:#a3afb9; --accent:#92c7b8;
  --primary-ink:#1c332c; --accent-2:#a1bbdb; --green:#8ebcaa; --success:#8ebcaa;
  --timed-bg:#2c443b; --timed-overlay:rgba(92,201,151,.20);
  --selected-bg:#356f58; --selected-overlay:rgba(78,225,157,.28);
  --playing-bg:#365e86; --playing-overlay:rgba(104,170,246,.3);
  --warning:#d1b578; --warning-bg:#3c382b; --danger:#e7a2a3; --danger-bg:#433235;
  --waveform:#8f9fa9; --waveform-axis:#3a444c; --boundary:#728d9b; --playhead:#e5a08a;
}
body {font:13px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
button,input,textarea,select {font:inherit;color:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
button:disabled {cursor:default;opacity:.55}
[hidden] {display:none!important}
h1 {font-size:29px;letter-spacing:-.6px;font-weight:600}
h2 {font-size:20px;font-weight:600}
h3 {font-weight:600}
.eyebrow {color:var(--accent);font-size:10px;font-weight:600;letter-spacing:1.5px}
.sidebar {background:var(--panel);border-right:1px solid var(--line);padding:26px 17px 0}
.brand {gap:10px;margin:0 0 30px 8px;font-size:13px;font-weight:750;letter-spacing:.1px;color:var(--text)}
.brand-symbol {font-size:29px;background:none;color:var(--accent);width:auto;letter-spacing:0}
.brand-sub {font-size:8px;letter-spacing:1.2px;color:var(--muted);margin-top:4px}
.workspace {background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:5px;margin-bottom:25px}
.workspace-avatar,.profile-avatar {background:var(--timed-bg);color:var(--accent);border:1px solid var(--line);border-radius:5px}
.nav-label {color:var(--muted);font-size:9px;letter-spacing:1px}
.nav-item,.project-nav {color:var(--muted);border-radius:5px}
.nav-item.selected,.project-nav.active {background:var(--timed-bg);color:var(--accent)}
.nav-item:hover:not(:disabled),.project-nav:hover {background:var(--panel-2);color:var(--text)}
.nav-item .count {background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.feature-soon {font-size:8px;margin-left:auto;white-space:nowrap;color:var(--muted)}
.project-nav .nav-dot,.icon-button {color:var(--muted)}
.sidebar-bottom {border-color:var(--line)}
.sidebar-bottom p {color:var(--text);font-size:16px;line-height:1.5;font-weight:500}
.sidebar-bottom small,.pilot-indicator,.profile {color:var(--muted)}
.pilot-indicator i {background:var(--success)}
.profile {border-top:1px solid var(--line);gap:9px}
.profile>div {min-width:0;flex:1}
.profile .icon-button {flex-shrink:0}
.topbar {height:64px;background:var(--panel);border-bottom:1px solid var(--line);gap:10px;padding:0 32px}
.topbar #breadcrumb {color:var(--muted);flex:1}
.breadcrumb-link {color:var(--text)}
.topbar #breadcrumb span {color:var(--line)}
#themeSelect {width:99px;min-width:99px;height:34px;padding:5px 8px;margin:0;font-size:11px}
.topbar>.button {min-height:34px;padding:5px 11px;font-size:11px;gap:5px}
.ttml-only .wallet-pill {display:none}
.ttml-only .nav-item[data-feature="wallet"] {display:none}
main {padding:32px 32px 122px;max-width:1500px}
.ttml-modes {display:flex;gap:7px;flex-wrap:wrap;margin:0 0 18px}
.ttml-mode {padding:8px 12px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--muted);font-size:12px;cursor:pointer}
.ttml-mode.active {background:var(--timed-bg);border-color:var(--accent);color:var(--accent)}
.ttml-workspace {min-width:0}
.panel.ttml-materials {margin-bottom:16px;padding:0}
.ttml-materials>summary {padding:14px 18px;cursor:pointer;font-weight:600}
.ttml-materials>summary>span {font-size:11px;color:var(--muted);font-weight:400}
.ttml-only.ttml-editing #player {display:none}
.ttml-only.ttml-editing main {padding-bottom:40px}
.ttml-materials-body {padding:0 18px 16px}
.ttml-materials .form-row {grid-template-columns:1fr 1fr minmax(110px,.5fr);margin-top:16px}
.ttml-audio-file {display:flex;align-items:center;gap:13px;padding:12px;border:1px dashed var(--line);border-radius:5px}
.ttml-audio-file>span {font-size:24px;color:var(--accent)}
.ttml-audio-file>div {flex:1;min-width:0}
.ttml-audio-file strong,.ttml-audio-file small {display:block;overflow-wrap:anywhere}
.ttml-audio-file small {margin-top:3px;color:var(--muted);font-size:11px}
.ttml-file-drop {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px dashed var(--line);border-radius:5px;cursor:pointer;background:var(--panel-2);position:relative;overflow:hidden}
.ttml-file-drop input {position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ttml-file-drop strong,.ttml-file-drop small {display:block;font-size:11px}
.ttml-file-drop small {margin-top:4px;color:var(--muted)}
.ttml-file-drop .button {flex-shrink:0}
.ttml-file-drop:focus-within,.ttml-file-drop.dragging {border-color:var(--accent);background:var(--timed-bg)}
.ttml-save-status {display:flex;align-items:center;gap:9px;flex-wrap:wrap;max-width:40%;justify-content:flex-end}
.ttml-save-status .small-note {margin:0;text-align:right}
#ttml-upload-progress {width:100%;height:5px;accent-color:var(--accent);margin:0 0 14px}
.ttml-text-hidden {display:none!important}
.ttml-guide {padding-left:22px;font-size:13px;line-height:1.7}
.ttml-guide li {margin:0 0 11px}
.ttml-plan-costs {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.ttml-plan-costs>div {padding:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:5px}
.ttml-plan-costs span,.ttml-plan-costs strong {display:block}
.ttml-plan-costs span {font-size:11px;color:var(--muted)}
.ttml-plan-costs strong {font-size:19px;font-weight:500;margin-top:5px}
#ttml-help-dialog {max-width:720px}
#new-dialog {width:min(740px,calc(100vw - 28px));max-height:90vh}
#new-lyrics {min-height:130px;text-align:center}
body:not(.ttml-only) .new-ttml-fields {display:none}
@media(max-width:1100px) {.topbar {flex-wrap:wrap;height:auto;min-height:64px;padding-top:10px;padding-bottom:10px}.topbar #breadcrumb{flex-basis:100%}.ttml-materials .form-row{grid-template-columns:1fr 1fr}.ttml-materials .form-row>label:last-child{grid-column:1/-1;max-width:200px}}
@media(max-width:600px) {.ttml-modes{display:grid;grid-template-columns:1fr 1fr}.ttml-mode{font-size:11px;padding:9px 6px}.ttml-materials .form-row{grid-template-columns:1fr}.ttml-materials .form-row>label:last-child{max-width:none}.ttml-audio-file{flex-wrap:wrap}.ttml-audio-file>.button{margin-left:35px}.ttml-file-drop{flex-wrap:wrap}.ttml-save-status{max-width:100%;justify-content:flex-start}.ttml-save-status .small-note{text-align:left}.ttml-edit-panel .editor-toolbar{align-items:flex-start;gap:10px;flex-direction:column}.topbar-new{display:none}.ttml-guide{font-size:12px}}
.page-heading {margin-bottom:24px}
.page-heading p {font-size:12px;color:var(--muted)}
.button {border-radius:5px;min-height:36px;padding:8px 13px;gap:9px;font-size:12px;box-shadow:none}
.primary {background:var(--accent);color:var(--primary-ink);border:1px solid var(--accent)}
.primary:hover {background:var(--accent);opacity:.9}
.secondary {background:var(--panel);border-color:var(--line);color:var(--text)}
.secondary:hover,.ghost:hover {background:var(--panel-2)}
.ghost {background:transparent;border-color:var(--line);color:var(--muted)}
.hero {min-height:228px;border:1px solid var(--line);background:var(--timed-bg);border-radius:7px;padding:32px 36px}
.hero h2 {font-size:32px;line-height:1.2;color:var(--text);font-weight:500;letter-spacing:-.7px}
.hero p {font-size:12px;line-height:1.8;color:var(--muted)}
.hero .record {border-color:var(--boundary);background:repeating-radial-gradient(circle,var(--panel-2) 0px,var(--panel-2) 2px,var(--line) 3px,var(--panel-2) 4px);box-shadow:10px 12px 20px #0001}
.hero .record:after {background:var(--accent);border-color:var(--selected-bg)}
.hero .sleeve {background:linear-gradient(145deg,var(--selected-bg),var(--accent));border-color:var(--boundary);box-shadow:6px 12px 25px #0002;color:var(--primary-ink)}
.workspace-summary {border-color:var(--line);border-radius:6px}
.workspace-summary>div {background:var(--panel);padding:23px}
.workspace-summary strong {color:var(--accent);font-size:29px}
.workspace-summary span {color:var(--muted);font-size:12px}
.section-heading h2 {font-size:16px}
.section-heading span {font-size:11px}
.tool-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tool-card {border-radius:6px;padding:18px;min-height:195px}
.tool-available {border-color:var(--accent);background:var(--panel)}
.tool-upcoming {background:var(--panel-2)}
.tool-icon,.tool-icon.peach,.tool-icon.blue,.tool-icon.green {background:var(--timed-bg);color:var(--accent);width:34px;height:34px;border-radius:5px;margin-bottom:18px}
.tool-upcoming .tool-icon {color:var(--muted);background:var(--panel);border:1px solid var(--line)}
.tool-upcoming h3 {color:var(--muted)}
.tool-card h3 {font-size:12px;line-height:1.5}
.tool-card p {font-size:11px;line-height:1.7}
.tool-card .tool-bottom {color:var(--accent);font-size:10px;gap:7px}
.tool-upcoming .tool-bottom {color:var(--muted)}
.empty-projects {background:var(--panel);border-color:var(--line);border-radius:6px}
.project-card {border-radius:6px;padding:18px}
.project-card:hover {background:var(--panel-2);border-color:var(--accent)}
.project-thumb,.track-cover {background:var(--timed-bg);color:var(--accent);border:1px solid var(--line);border-radius:5px}
.project-card small,.project-readiness {color:var(--muted)}
.project-readiness .ready {color:var(--success)}
.project-status.active {background:var(--playing-bg);color:var(--accent-2)}
.project-status.attention {background:var(--warning-bg);color:var(--warning)}
.project-search input {min-height:38px}
.filter-button {min-height:38px;background:var(--panel);color:var(--muted);border-radius:5px}
.filter-button[aria-pressed=true] {background:var(--timed-bg);border-color:var(--accent);color:var(--accent)}
.track-header {gap:18px;margin-bottom:19px}
.track-cover {width:76px;height:76px;font-size:29px}
.track-info h1 {font-size:27px;margin:5px 0}
.version-badge {background:var(--panel);border-radius:4px}
.tabs {gap:22px;margin-bottom:18px}
.tab {font-size:12px;padding:10px 0}
.tab:disabled {opacity:1;color:var(--muted)}
.tab-soon {font-size:8px;margin-left:7px;color:var(--muted);padding:2px 4px;border:1px solid var(--line);border-radius:3px}
.panel {padding:22px;border-radius:6px;box-shadow:none}
.panel-description {margin-bottom:16px;font-size:12px}
.machine-tools {border-radius:5px;padding:16px;background:var(--panel-2);margin-bottom:20px}
.machine-tools>summary {cursor:pointer;font-size:12px;font-weight:550;color:var(--text)}
.machine-tools>summary span {font-size:10px;color:var(--muted);font-weight:400;margin-left:10px}
.machine-tools-body {margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}
.machine-tools h3 {margin-top:7px;font-size:16px}
.machine-tools .form-row {max-width:260px;display:block}
.machine-tools .inline-actions {margin:12px 0}
.machine-tools label {margin:0}
.editor-toolbar {margin-bottom:10px}
.editor-toolbar h3 {font-size:15px}
.status-pill {background:var(--panel-2);color:var(--muted);border-color:var(--line);font-size:10px}
.note,.note.neutral {background:var(--panel-2);color:var(--muted);border-color:var(--line)}
label {color:var(--text);font-size:12px}
input,textarea,select {background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:9px 10px;font-size:12px}
input::placeholder,textarea::placeholder {color:var(--muted);opacity:.8}
input[type=checkbox] {accent-color:var(--accent)}
.upload-zone {background:var(--panel-2);color:var(--text);border-color:var(--boundary);border-radius:5px}
.upload-zone small {color:var(--muted)}
.upload-zone.dragging {background:var(--timed-bg);border-color:var(--accent)}
dialog {background:var(--panel);color:var(--text);border-color:var(--line);border-radius:7px;padding:26px;box-shadow:0 24px 100px #0003;max-height:calc(100dvh - 32px)}
dialog::backdrop {background:#16241fb3;backdrop-filter:blur(3px)}
#toast {background:var(--panel);color:var(--text);border-color:var(--accent);border-radius:5px;box-shadow:0 10px 30px #0002}
#toast.error {background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.job-icon {background:var(--timed-bg);border-radius:5px}
.job-row[data-status=succeeded] .job-status {color:var(--success)}
.job-row[data-status=running] .job-status {color:var(--accent-2)}
.job-row[data-status=needs_review] .job-status,.job-row[data-status=partial] .job-status,.job-outdated {color:var(--warning)!important}
.job-info .job-error,.job-error {color:var(--danger);font-size:12px}
.machine-lines li.untimed {background:var(--warning-bg)}
.player {background:var(--panel);border-color:var(--line);height:78px;padding:12px 32px;gap:20px}
.small-cover {background:var(--timed-bg);color:var(--accent);border:1px solid var(--line);border-radius:4px}
.player-note {color:var(--muted)}
.coming-soon {padding:45px;max-width:720px;margin:40px auto}
.coming-soon h2 {margin:15px 0 10px}
.coming-soon p {color:var(--muted);line-height:1.8;max-width:500px;margin-bottom:20px}
#auth-screen {display:grid;grid-template-columns:minmax(300px,490px) minmax(320px,440px);justify-content:center;align-items:center;gap:100px;padding:56px 40px;background:var(--bg);min-height:100dvh}
.auth-intro {align-self:center}
.auth-brand {color:var(--text);font-size:17px;font-weight:750;letter-spacing:.7px;text-decoration:none;display:inline-block;margin-bottom:65px}
.auth-brand span {display:block;font-size:9px;color:var(--muted);font-weight:500;letter-spacing:2px;margin-top:5px}
.auth-intro h2 {font-size:43px;line-height:1.2;font-weight:500;letter-spacing:-1.2px;margin:0 0 20px}
.auth-intro>p {font-size:13px;color:var(--muted);line-height:1.9}
.auth-product {display:flex;align-items:center;gap:13px;margin-top:45px}
.auth-product>span {background:var(--timed-bg);color:var(--accent);height:47px;width:47px;border-radius:6px;display:grid;place-items:center;font-size:30px}
.auth-product strong {display:block;font-size:13px;font-weight:550}
.auth-product small {display:block;font-size:11px;color:var(--muted);margin-top:4px}
.auth-card {width:100%;padding:34px;border:1px solid var(--line);background:var(--panel);border-radius:7px}
.auth-card h1 {font-size:27px;margin:16px 0 10px}
.auth-card .panel-description {line-height:1.7;margin-bottom:25px}
.auth-card label {margin:17px 0}
.auth-card input {height:41px}
.auth-card>.button {min-height:40px}
.auth-card .small-note {line-height:1.8;margin-top:18px;font-size:11px}
.account-address {font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin:16px 0}
#account-storage {background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:15px;margin:18px 0 23px}
#account-storage:empty {display:none}
#account-storage h3 {font-size:13px;margin-bottom:12px}
.storage-usage {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;flex-wrap:wrap}
.storage-usage strong {color:var(--text);font-size:14px;font-weight:550}
.storage-usage span {color:var(--muted);font-size:11px;font-weight:400}
#account-storage progress {display:block;width:100%;height:6px;accent-color:var(--accent);margin:12px 0}
@media(max-width:650px) {.machine-tools>summary span{display:block;margin:6px 0 0 14px;line-height:1.6}}
@media(max-width:1200px) {.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-card{min-height:177px}.topbar{padding:0 24px}main{padding:26px 24px 110px}#auth-screen{gap:55px}.auth-intro h2{font-size:38px}}
@media(max-width:800px) {:root{--sidebar:0px}.sidebar{display:none}.topbar{height:58px;padding:0 18px}main{padding:24px 18px 112px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.player{left:0;padding:12px 18px}.hero{padding:26px}#auth-screen{grid-template-columns:minmax(0,440px);gap:30px;padding:35px 22px}.auth-brand{margin-bottom:0}.auth-intro h2,.auth-intro>p,.auth-product{display:none}.auth-card{padding:28px}.auth-intro{text-align:center}.topbar #breadcrumb{font-size:11px}.track-info h1{font-size:25px}}
@media(max-width:520px) {.topbar{gap:7px;padding:0 12px}.topbar #breadcrumb{max-width:none}.topbar>.button{font-size:10px;padding:5px 8px}#themeSelect{width:84px;min-width:84px;font-size:10px;padding:5px}.hero{padding:23px}.hero h2{font-size:28px}.tool-grid{gap:10px}.tool-card{padding:15px;min-height:187px}.tool-card h3{font-size:12px}.panel{padding:15px}.machine-tools{padding:13px}.tabs{gap:18px}.tab-soon{display:block;margin:4px 0 0;font-size:8px}.tab{display:flex;flex-direction:column;justify-content:center}.track-cover{height:60px;width:60px}.track-info h1{font-size:23px}.track-info p{font-size:10px}.player{padding:10px 12px;gap:8px}.auth-card{padding:25px 22px}.auth-card h1{font-size:25px}.page-heading{gap:10px}.page-heading h1{font-size:27px}.coming-soon{padding:25px}}