/*
 * SANI STUDIO — PROFESSIONAL WORKSPACE / v0.4
 * Static, self-hostable, system fonts, no paid services.
 * Every decorative meter is labelled as artwork, not live audio analysis.
 */
:root {
  color-scheme: dark;
  --bg: #0b0d11;
  --sidebar: #101116;
  --surface: #14171d;
  --surface-2: #191d24;
  --surface-3: #20252d;
  --border: #2a303a;
  --border-strong: #3c434d;
  --text: #f3f0ed;
  --sub: #a2a6af;
  --muted: #707985;
  --lime: #d7b48b; /* semantic project accent kept for engine compatibility */
  --accent: #d7b48b;
  --accent-dark: #9b7754;
  --teal: #7cb7b6;
  --purple: #aaa5d5;
  --danger: #de8e94;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
input[type="range"] { cursor: pointer; accent-color: var(--accent); }
[hidden] { display: none !important; }
::selection { color: #111319; background: #d7b48b; }

/* Layout and navigation */
.app-shell { display: grid; grid-template-columns: 242px minmax(0,1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid #272b34; padding: 29px 15px 16px; z-index: 3; min-width: 0; }
.logo { display: flex; align-items: center; gap: 12px; padding: 3px 8px 45px; }
.logo-mark { display: grid; place-items: center; position: relative; width: 42px; height: 42px; flex: 0 0 auto; background: #d7b48b; border-radius: 9px; color: #151313; font-weight: 850; font-size: 30px; letter-spacing: -.13em; padding-right: 5px; }
.logo-mark .spark { font-size: 22px; position: absolute; top: -9px; right: 5px; color: #4e3a25; }
.logo-word { font-size: 15px; font-weight: 840; letter-spacing: .17em; line-height: 1.2; white-space: nowrap; }
.logo-word > span { font-weight: 450; color: #ddd8d2; }
.logo-word small { display: block; font-size: 8px; letter-spacing: .13em; font-weight: 750; color: #858a94; margin-top: 8px; }
.side-label { color: #717885; font-size: 9px; letter-spacing: .21em; font-weight: 780; margin: 0 13px 14px; }
.side-label.separated { padding-top: 29px; margin-top: 19px; border-top: 1px solid #292d35; }
.side-nav { display: grid; gap: 4px; }
.side-item { min-height: 43px; border: 1px solid transparent; width: 100%; border-radius: 7px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; text-align: left; color: #9b9fa9; background: transparent; font-weight: 570; font-size: 12px; transition: background .18s, border-color .18s, color .18s; }
.side-item .icon { display: inline-grid; place-items: center; font-size: 17px; width: 21px; flex: 0 0 auto; color: #838995; }
.side-item:hover { color: #eee9e4; background: #1c2027; }
.side-item.active { background: linear-gradient(90deg,#343029,#25232a); border-color: #554735; color: #ebcba6; }
.side-item.active .icon { color: #e4ba86; }
.side-item .new { font: 700 8px var(--mono); margin-left: auto; border: 1px solid #856c4e; padding: 3px 5px; border-radius: 3px; letter-spacing: .08em; }
.side-item .chevron { margin-left: auto; opacity: .55; }
.side-button { cursor: pointer; }
.sidebar-bottom { margin-top: auto; padding: 17px 15px 13px; background: #171a1f; border: 1px solid #323943; border-radius: 10px; }
.status-heading { display: flex; align-items: center; gap: 8px; color: #b9c7ba; font: 750 10px var(--mono); letter-spacing: .05em; }
.status-heading i, .green-dot { width: 7px; height: 7px; display: inline-block; background: #7bb5a3; border-radius: 50%; box-shadow: 0 0 0 3px #7bb5a319; flex: 0 0 auto; }
.sidebar-bottom p { font-size: 11px; color: #858d99; line-height: 1.7; margin: 11px 0 17px; }
.sidebar-bottom-row { border-top: 1px solid #30343d; padding-top: 11px; display: flex; justify-content: space-between; color: #77818c; font: 700 9px var(--mono); letter-spacing: .08em; }
.main { min-width: 0; }
.topbar { height: 71px; border-bottom: 1px solid #272b33; background: #0e1014e8; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px,3.2vw,56px); gap: 15px; }
.bread { font: 700 10px var(--mono); letter-spacing: .13em; color: #7d8490; }
.bread span { padding: 0 10px; color: #4e545e; }
.bread strong { color: #dad9d7; }
.topright { display: flex; align-items: center; gap: 11px; font: 700 10px var(--mono); color: #9fa8af; white-space: nowrap; letter-spacing: .07em; }
.edition { border: 1px solid #555044; border-radius: 4px; padding: 7px 11px; color: #d7b48b; margin-right: 18px; }
.help-button { height: 32px; width: 32px; border: 1px solid #41454d; color: #ddd5cb; border-radius: 7px; background: #1c1f25; font-weight: 750; }
.content { width: min(1540px,100%); margin: 0 auto; padding: 31px clamp(24px,3.2vw,56px) 25px; }

/* Compact hero: premium studio console rather than a gaming splash screen. */
.hero { position: relative; overflow: hidden; border: 1px solid #3a3430; border-radius: 13px; background: linear-gradient(115deg, #1b1b20 0%, #1b1a1e 53%, #25201f 100%); display: grid; grid-template-columns: minmax(0,1.25fr) minmax(255px,.65fr); min-height: 275px; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.29; background-image:linear-gradient(#ffffff06 1px, transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(90deg,transparent 12%,black 100%); }
.hero-copy { position: relative; padding: 38px clamp(28px,3.3vw,49px) 31px; z-index:1; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #d9b78d; font: 750 10px var(--mono); letter-spacing: .15em; }
.eyebrow .line { width: 22px; height: 1px; background: #d9b78d; }
.eyebrow-slash { color: #877a6c; }
.version-pill { margin-left: 6px; border: 1px solid #655440; border-radius: 3px; padding: 4px 6px; font-size: 9px; }
.hero h1 { font-size: clamp(37px,3.5vw,57px); line-height: 1.11; letter-spacing: -.055em; font-weight: 770; margin: 19px 0 16px; }
.hero h1 em { font-style: normal; color: #d9b78d; }
.hero p { max-width: 580px; line-height: 1.65; font-size: 13px; color: #b1aeb0; margin: 0; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.hero-badges span { border: 1px solid #4a4340; background: #ffffff06; border-radius: 4px; padding: 9px 10px; font: 700 9px var(--mono); color: #a6a1a0; letter-spacing: .035em; }
.deck-art { align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; border-left: 1px solid #3b3736; background: radial-gradient(circle at 50% 54%,#46362d80 0,#211d1f 52%,#1d1b1d 73%); min-width: 0; }
.deck-upper, .deck-lower { position: absolute; right: 23px; left: 23px; display: flex; justify-content: space-between; gap:10px; color: #a99e93; font: 700 8px var(--mono); letter-spacing: .08em; }
.deck-upper { top: 20px; } .deck-lower { bottom: 18px; }
.deck-lower i { display: inline-block; background: #83b99b; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; }
.deck-disc { width: 171px; height: 171px; border-radius: 50%; position: relative; border: 1px solid #6e5b4c; box-shadow: 0 0 0 12px #b08c5d0b, 0 0 0 23px #b08c5d06, inset 0 0 25px #070808bd; background: repeating-radial-gradient(circle,#312a28 0 2px,#272323 2px 4px); }
.disc-ring { position: absolute; border: 1px solid #82705e66; border-radius: 50%; }
.r-one { inset: 16px; } .r-two { inset: 31px; border-color:#b4957552; } .r-three { inset: 46px; border-color: #ceb08c75; }
.disc-center { position:absolute; inset:59px; display:grid; place-items:center; border-radius:50%; background:#d7b48b; color:#24201c; font-size:37px; font-weight:800; line-height:1; box-shadow:0 0 0 4px #231e1d; }

/* Session status - all values connected to real state */
.session-strip { border: 1px solid var(--border); background: #15181e; border-radius: 10px; margin: 17px 0 33px; display: grid; grid-template-columns: .8fr 1fr 1fr 1.5fr; overflow: hidden; }
.session-stat { display: flex; flex-direction: column; gap: 8px; min-height: 77px; justify-content: center; padding: 15px 22px; border-right: 1px solid var(--border); }
.session-stat:last-child { border: 0; }
.session-stat small { font: 730 9px var(--mono); letter-spacing: .11em; color: #7b8590; }
.session-stat strong { color: #e3ded7; font: 690 20px var(--mono); letter-spacing: -.035em; }
.session-stat strong span { color: #7f8590; font-size: 11px; letter-spacing: 0; }
.session-state strong { font: 720 11px var(--mono); letter-spacing: .015em; color: #acb7bc; }
.session-state i { display: inline-block; margin-right: 6px; width: 8px; height: 8px; background: #727985; border-radius: 50%; }
.session-state [data-ready="ready"] { color: #d7b48b; }
.session-state [data-ready="ready"] i { background: #d7b48b; }
.session-state [data-ready="mixed"] { color: #8ec6af; }
.session-state [data-ready="mixed"] i { background: #8ec6af; }

/* General typography and surface language */
.section { margin-bottom: 26px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.overline { color: #c6a986; font: 730 10px var(--mono); letter-spacing: .135em; margin-bottom: 11px; }
h2,h3,p { overflow-wrap: break-word; }
.section-heading h2, .panel-head h2 { font-size: 21px; font-weight: 720; line-height: 1.22; margin: 0; letter-spacing: -.035em; }
.section-heading p { color: var(--sub); font-size: 12px; margin: 8px 0 0; }
.muted { color: #727b86; font-weight: 480; }
.ghost-button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid #404752; background: #1b1f26; color: #ddd3c9; border-radius: 6px; padding: 11px 16px; font-size: 11px; font-weight: 710; white-space: nowrap; }
.ghost-button:hover { background: #2b3039; border-color: #82705c; }
.panel { min-width:0; border: 1px solid #333942; background: linear-gradient(155deg,#191d23 0,#15191e 100%); border-radius: 11px; padding: 26px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom: 24px; }
.panel-icon { font-size: 21px; color: #8b93a0; }

/* Tracks: real waveforms and metadata, not a placeholder timeline */
.track-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.song-card { min-width:0; border: 1px solid #343a44; border-radius: 10px; overflow: hidden; background: #171b20; transition: border-color .2s, background .2s; }
.song-card:hover,.song-card.dragover { border-color: #aa8e70; background: #1d2025; }
.slot-head { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap:8px; padding: 10px 15px; border-bottom: 1px solid #31363f; background: #1e2229; }
.slot-head > div { min-width: 0; display: flex; align-items: center; gap:9px; flex-wrap: wrap; }
.slot-index { font: 740 10px var(--mono); color: #e6e0d9; letter-spacing: .06em; }
.role { padding: 5px 7px; border-radius: 4px; font: 740 8px var(--mono); letter-spacing:.04em; border: 1px solid #655139; color: #e1c199; background: #47382750; }
.role-b { color: #9cd4d1; border-color: #42696c; background: #1a3332; }
.role-c { color: #c2b8ee; border-color: #615879; background: #322d41; }
.remove-track { border: 1px solid #46383d; background: #32272a; color: #e5a5ad; width:24px; height:24px; line-height: 1; border-radius:5px; flex:0 0 auto; }
.upload-area { width:calc(100% - 24px); min-height:173px; margin:12px; border:1px dashed #51545b; border-radius:7px; background: radial-gradient(circle at 50% 20%,#28272a,#191d22 69%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color: #d7d2cd; text-align:center; padding: 19px 10px; }
.upload-area:hover { border-color:#c8a47c; background:#27262b; }
.upload-glyph { font: 400 31px var(--font); border:1px solid #54505a; width:47px;height:47px;display:grid;place-items:center;border-radius:9px;color:#d8b58a;margin-bottom:6px; }
.upload-area strong { font-size: 13px; }
.upload-area > span:last-child { color:#818995; font-size:10px; }
.loaded-track { padding: 17px 13px 14px; }
.loaded-head { display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:15px; }
.music-mark { width:33px;height:33px;display:grid;place-items:center;border-radius:7px;border:1px solid #6e5541;background:#372c27;color:#ebc59c;font-size:16px;flex:0 0 auto; }
.song-card[data-slot="1"] .music-mark { color:#92c6cb;background:#243538;border-color:#42656a; }
.song-card[data-slot="2"] .music-mark { color:#c1b9ef;background:#302c3e;border-color:#585270; }
.song-details { min-width:0; }
.song-name { display:block; color:#f0ebe6;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.song-meta { display:block; color:#8b929f;font-size:10px;margin-top:5px;font-family:var(--mono); }
.waveform { display:block;width:100%;height:75px;border-top:1px solid #35383f;border-bottom:1px solid #35383f;background: repeating-linear-gradient(90deg,transparent 0 19px,#ffffff06 19px 20px),linear-gradient(#24272c,#24272c);border-radius:4px; }
.song-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:15px; }
.song-bottom label { color:#969da9;display:flex;align-items:center;gap:7px;font:700 9px var(--mono); }
.song-bpm { min-width:0;width:54px;height:28px;padding:5px;background:#282b2f;border:1px solid #6b5b4b;border-radius:4px;color:#e9cfaa;font:700 12px var(--mono); }
.energy-label { color:#878f9c;font:690 9px var(--mono);white-space:nowrap; }
.replace-button { background:none;border:1px solid #464c56;border-radius:5px;padding:7px 9px;color:#d5d1cc;font-size:9px;white-space:nowrap; }
.replace-button:hover { border-color:#b2926d; }
.import-footer { display:flex;justify-content:space-between;gap:15px;margin-top:13px;color:#8a929e;font-size:11px; }
.import-footer #uploadCount { font:750 12px var(--mono); color:#dfb987; }

/* Inspector and arranger */
.controls-grid { display:grid;grid-template-columns: minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:18px; }
.setting-group + .setting-group { margin-top:25px; }
.setting-head { display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px; }
.setting-head label,.setting-label { font-size:12px;font-weight:680;color:#e1dbd4; }
.value-tag { background:#2c2928;border:1px solid #68533e;border-radius:5px;padding:7px 9px;color:#e4be94;font:770 11px var(--mono);white-space:nowrap; }
.range { appearance:none;width:100%;height:4px;display:block;border:0;border-radius:4px;outline-offset:8px;background:#303740; }
.range::-webkit-slider-thumb { appearance:none; width:15px;height:15px;border:3px solid #181b20;background:var(--accent);border-radius:50%;box-shadow:0 0 0 1px #c4a47a; }
.range::-moz-range-thumb { width:13px;height:13px;border:2px solid #181b20;background:var(--accent);border-radius:50%; }
.range-marks { display:flex;justify-content:space-between;color:#757f8b;margin-top:12px;font:650 9px var(--mono); }
.segment { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px; }
.segment button { padding:11px 4px;border:1px solid #41474f;background:#242931;color:#b4b6bc;border-radius:6px;font:700 11px var(--mono); }
.segment button.selected { color:#f6debd;border-color:#a8845e;background:#4a382c; }
.checkrow { display:flex;align-items:center;gap:11px;position:relative;margin-top:26px;cursor:pointer; }
.checkrow input { position:absolute;opacity:0;width:18px;height:18px; }
.custom-check { flex:0 0 auto;width:18px;height:18px;border:1px solid #777981;background:#1e242b;border-radius:4px;display:grid;place-items:center; }
.checkrow input:checked + .custom-check { background:#c9aa83;border-color:#c9aa83; }
.checkrow input:checked + .custom-check::after { content:'✓';color:#25201c;font-size:13px;font-weight:900; }
.checkrow input:focus-visible + .custom-check { outline:2px solid #d7b48b;outline-offset:3px; }
.checkrow strong,.checkrow small { display:block; }
.checkrow strong { font-size:12px; } .checkrow small { margin-top:4px;color:#9298a2;font-size:10px; }
.ai-symbol { display:grid;place-items:center;width:36px;height:36px;border:1px solid #66543f;background:#45372d;color:#e7c295;border-radius:7px;font-size:23px; }
.ai-desc { color:#9ba2ab;line-height:1.8;font-size:11px;margin:-8px 0 17px; }
.style-options { display:grid;gap:8px; }
.style-card { width:100%;background:#22262d;border:1px solid #434953;border-radius:7px;min-height:61px;padding:10px 14px;display:flex;align-items:center;gap:13px;text-align:left;color:#c9c6c5; }
.style-card.selected { border-color:#ac865f;background:#352c29; }
.style-card:hover { border-color:#977e69; }
.style-icon { width:26px;text-align:center;color:#c7ab8c;font-size:20px;flex:0 0 auto; }
.style-card > span:nth-child(2) { flex:1;min-width:0; }
.style-card strong,.style-card small { display:block; }
.style-card strong { font-size:12px;color:#e9e5e0; }
.style-card small { margin-top:5px;font-size:10px;color:#959aa4; }
.style-check { opacity:0;color:#d9b78d;font-size:13px;font-weight:900; }
.style-card.selected .style-check { opacity:1; }
.generate-button { width:100%;min-height:54px;margin-top:17px;background:#d6b18a;color:#1a1715;border:1px solid #e0c6a6;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 13px;font-size:13px;font-weight:800;box-shadow:0 6px 20px #d6b18a1a; }
.generate-button:hover:not(:disabled) { background:#ebc9a2; }
.generate-button .arrow { margin-left:auto;font-size:16px; }
.generate-button > span:first-child { margin-left:auto;font-size:18px; }
.ai-disclaimer { margin-top:12px;color:#8d949d;font-size:10px;line-height:1.55;text-align:center; }

/* Rendered result, scrubber, playback */
.result-panel { margin-top:14px; padding:26px; }
.result-heading { margin-bottom:20px; }
.result-tag { border:1px solid #5d5e59;border-radius:5px;padding:8px 10px;font:760 10px var(--mono);letter-spacing:.05em;color:#d2cec7;display:flex;align-items:center;gap:8px;white-space:nowrap;background:#24282b; }
.result-empty { min-height:172px; border:1px dashed #484c54;border-radius:7px;background:#15191e;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px; }
.empty-orbit { width:52px;height:52px;display:grid;place-items:center;border:1px solid #716252;border-radius:50%;color:#d5b58f;font-size:24px;margin-bottom:7px; }
.result-empty h3 { font-size:14px;margin:8px 0 6px; }
.result-empty p { color:#9199a3;font-size:11px; }
.arrangement { display:flex;gap:3px;overflow:hidden;min-height:57px;margin-bottom:14px;border-radius:5px; }
.arrangement div { position:relative;flex:var(--flex);min-width:10px;padding:10px 7px;border:1px solid var(--section-border);background:var(--section-bg);display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:hidden; }
.arrangement strong { font:740 10px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f1ece6; }
.arrangement span { font:650 9px var(--mono);color:#e2d9ceaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.preview-wave { position:relative;height:150px;overflow:hidden;border:1px solid #3c474b;border-radius:6px;background:repeating-linear-gradient(90deg,transparent 0 31px,#ffffff07 31px 32px),#1b2227;cursor:pointer; }
.preview-wave canvas { display:block;width:100%;height:100%; }
.playhead { position:absolute;inset:0 auto 0 0;width:2px;background:#f7d8ad;pointer-events:none;box-shadow:0 0 12px #e6c49594; }
.player { display:flex;align-items:center;gap:12px;margin-top:15px; }
.play-button { width:44px;height:44px;border:0;flex:0 0 auto;background:#d5b18a;color:#1d1a18;border-radius:7px;font-size:19px; }
.stop-button { width:42px;height:42px;flex:0 0 auto;background:#272c34;color:#c3c6ca;border:1px solid #494e58;border-radius:7px;font-size:16px; }
.player-time { display:flex;gap:4px;align-items:center;white-space:nowrap;font:700 11px var(--mono);margin:0 5px; }
.player-time strong { color:#d9b78d; } .player-time span { color:#88919e; }
.player>input[type=range] { flex:1;min-width:65px; }
.volume-label { display:flex;align-items:center;gap:8px;color:#969da7;font:720 10px var(--mono); }
.volume-label input { width:85px; }
.result-footer { display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:21px;padding-top:19px;border-top:1px solid #3a414b; }
.result-footer>span { color:#89919d;font:750 10px var(--mono);letter-spacing:.08em; }
.download-button { border:1px solid #b49674;border-radius:6px;background:#403328;color:#f3d4ac;padding:12px 18px;font:750 12px var(--font); }
.download-button:hover { background:#554332; }
.progress-block { border:1px solid #535149;border-radius:7px;padding:23px;background:#1f2125; }
.progress-top { display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:15px; }
.progress-top strong { color:#d9b78d;font-family:var(--mono); }
.progress-track { height:7px;background:#343a42;border-radius:5px;overflow:hidden; }
.progress-track>div { width:0;height:100%;background:linear-gradient(90deg,#9a7958,#e2bd8b);transition:width .2s; }
.progress-block p { color:#9ba1ac;font-size:11px;margin:12px 0 0; }
footer { display:flex;justify-content:space-between;gap:16px;padding:26px 0;color:#727a86;font:750 9px var(--mono);letter-spacing:.045em; }
footer b { color:#939ba4;font-weight:650; }
.toast { position:fixed;bottom:22px;right:22px;max-width:min(440px,calc(100vw - 28px));background:#e7caa5;color:#28211b;padding:14px 19px;border:1px solid #f1d6b8;border-radius:8px;box-shadow:0 16px 55px #000a;z-index:60;font-size:12px;font-weight:750;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s; }
.toast.show { opacity:1;transform:translateY(0); }
.toast.error { background:#f0b6ba;color:#5e222a; }
.modal-overlay { position:fixed;inset:0;display:grid;place-items:center;padding:15px;background:#020305d9;z-index:80; }
.modal { width:min(525px,100%);padding:31px;position:relative;background:#1a1c22;border:1px solid #716251;border-radius:12px;box-shadow:0 20px 100px #0009; }
.modal h2 { font-size:27px;margin:0 0 20px;letter-spacing:-.04em; }
.modal p { color:#c2c0bd;font-size:13px;line-height:1.7; }
.modal .muted-text { font-size:11px;color:#949ba3; }
.modal-close { position:absolute;top:14px;right:14px;width:33px;height:33px;border:1px solid #555660;color:#e5dbd0;border-radius:6px;background:#27292e;font-size:20px; }

/* Responsive workstation, including 320px wide phones */
@media(max-width:1280px) {
 .app-shell { grid-template-columns:208px minmax(0,1fr); }
 .sidebar { padding-inline:10px; }
 .content { padding-inline:25px; }
 .topbar { padding-inline:25px; }
 .logo-word { font-size:13px; }
 .hero { grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr); }
 .hero-copy { padding:33px 27px; }
 .deck-disc { width:150px;height:150px; }
 .disc-center { inset:52px;font-size:30px; }
 .song-bottom { flex-wrap:wrap; }
}
@media(max-width:1024px) {
 .app-shell { display:block; }
 .sidebar { height:auto; position:relative; flex-direction:row; align-items:center; padding:13px 22px;gap:17px;border-right:0;border-bottom:1px solid var(--border); }
 .logo { padding:0; }
 .side-label, .side-label.separated, .sidebar-bottom, .sidebar>.side-button { display:none; }
 .side-nav { display:flex; margin-left:auto;gap:2px; }
 .side-item { width:auto; min-height:36px;padding:8px 9px;font-size:10px;gap:7px;white-space:nowrap; }
 .side-item .new, .side-item .chevron { display:none; }
 .side-item .icon { width:auto;font-size:13px; }
 .content { max-width:100%; }
 .deck-art { min-width:180px; }
 .hero h1 { font-size:45px; }
}
@media(max-width:720px) {
 .sidebar { display:block;padding:14px 15px 12px; }
 .logo { justify-content:center; }
 .side-nav { justify-content:center;gap:5px;overflow-x:auto;margin:12px -6px 0; }
 .side-item { padding:8px 8px; }
 .topbar { height:52px;padding-inline:15px; }
 .topright { gap:8px;font-size:9px; }
 .topright>span:nth-of-type(2),.edition { display:none; }
 .content { padding:16px 14px 22px; }
 .hero { display:block;min-height:unset; }
 .hero-copy { padding:26px 22px 28px; }
 .hero h1 { font-size:clamp(34px,8vw,53px);margin:17px 0 14px; }
 .hero p { font-size:12px;max-width:440px; }
 .hero-badges { margin-top:20px;gap:6px; }
 .hero-badges span { font-size:8px;padding:7px; }
 .deck-art { display:none; }
 .session-strip { grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:29px; }
 .session-stat { min-height:67px;padding:13px 15px; }
 .session-stat:nth-child(2) { border-right:0; }
 .session-stat:nth-child(-n+2) { border-bottom:1px solid var(--border); }
 .session-stat strong { font-size:18px; }
 .session-state strong { font-size:10px; }
 .section-heading { align-items:flex-start;flex-wrap:wrap; }
 .section-heading h2,.panel-head h2 { font-size:20px; }
 .track-grid { grid-template-columns:1fr;gap:12px; }
 .upload-area { min-height:115px; }
 .loaded-track { padding:13px; }
 .song-bottom { flex-wrap:nowrap; }
 .controls-grid { grid-template-columns:1fr; }
 .panel,.result-panel { padding:20px; }
 .result-heading { align-items:flex-start; }
 .result-tag { font-size:9px; }
 .preview-wave { height:135px; }
 .arrangement strong { font-size:8px; } .arrangement span { font-size:8px; }
 .player { flex-wrap:wrap;gap:10px; }
 .volume-label { margin-left:auto; }
 .player>input[type=range] { flex:1;min-width:calc(100% - 210px); }
 .result-footer { flex-direction:column;align-items:stretch; }
 .download-button { width:100%; }
 footer { flex-wrap:wrap;justify-content:center;text-align:center;line-height:1.5; }
}
@media(max-width:380px) {
 .side-item { padding:7px 5px;font-size:9px; }
 .logo-word { font-size:12px; }
 .hero-copy { padding:24px 18px; }
 .hero h1 { font-size:33px; }
 .hero-badges span { font-size:7px; }
 .bread { font-size:9px; }
 .session-stat { padding:11px; }
 .song-bottom { flex-wrap:wrap; }
 .panel,.result-panel { padding:16px; }
 .player-time { font-size:10px; }
 .volume-label input { width:70px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;animation:none!important;transition:none!important; } }

/* SANI STUDIO 0.5 — musical intelligence and editable arrangement */
.director-controls{margin:18px 0 14px;padding:16px;background:linear-gradient(155deg,#24272c,#202229);border:1px solid #48444a;border-radius:9px}
.director-label{display:flex;justify-content:space-between;gap:8px;color:#dac3a7;font:750 10px var(--mono);letter-spacing:.08em;margin-bottom:10px}
.director-label small{color:#95949a;font-size:9px;letter-spacing:0;font-weight:500}
#creativePrompt{display:block;width:100%;min-height:70px;padding:13px 14px;resize:vertical;outline:0;border-radius:6px;border:1px solid #54515a;background:#14161b;color:#ebe9e9;font:500 12px/1.55 var(--font)}
#creativePrompt:focus{border-color:#c5a37b;box-shadow:0 0 0 2px #c5a37b1b}
.director-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}
.director-slider{min-width:0}.director-slider .range{width:100%}
.director-checks{display:grid;gap:12px}.director-checks label{display:flex;align-items:center;gap:8px;color:#cfcbd0;font-size:11px;line-height:1.45;cursor:pointer}
.director-checks input{accent-color:#cda67e;width:15px;height:15px;flex-shrink:0}
.director-explainer{font:500 11px/1.7 var(--font);color:#a8b1b7;border-top:1px solid #41434a;margin-top:14px;padding-top:13px}
.generation-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 12px}
.variation-button{padding:9px 13px;color:#debf95;background:#302b29;border:1px solid #685640;border-radius:6px;font-size:11px;font-weight:700}
.variation-button:disabled{opacity:.4;cursor:not-allowed}
#variationInfo{font:700 9px var(--mono);color:#aba2a0}
.analysis-report{margin:16px 0 0;border:1px solid #4d4440;background:linear-gradient(100deg,#292624,#22262b);border-radius:8px;padding:17px 19px}
.analysis-heading{font:750 10px var(--mono);letter-spacing:.09em;color:#dfc5a2;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.analysis-heading span{color:#92969f;font-size:9px}
.analysis-summary{color:#b8bbc1;font-size:11px;line-height:1.75;margin-top:11px}
.analysis-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.analysis-chip{padding:7px 10px;border:1px solid #5b524b;background:#232528;color:#d4cabf;border-radius:5px;font:700 10px var(--mono)}
.analysis-warning{color:#bea787;margin-top:8px}
.arrangement-title{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;color:#c9b7a3;font:700 10px var(--mono);margin:5px 0 12px}.arrangement-title span:last-child{font-size:9px;color:#92969f;font-weight:400}
.arrangement>button{border:0;text-align:left;cursor:pointer;border-radius:0;background:var(--section-bg);border-top:2px solid var(--section-border);padding:9px 6px;min-width:0;flex:var(--flex) 0 0;display:flex;flex-direction:column;justify-content:center;gap:5px;transition:filter .18s}
.arrangement>button:hover,.arrangement>button:focus-visible{filter:brightness(1.3);outline:1px solid #d1ab80;outline-offset:-1px}.arrangement>button strong{font-size:9px;color:#eee2d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arrangement>button span{font-size:9px;color:#bdb6b4}
.arrangement-notes{font:500 11px/1.7 var(--font);color:#a3a7af;margin:12px 0 17px}
.recipe-button{border:0;background:transparent;color:#dac2a1;cursor:pointer;font:700 10px var(--mono);margin-left:13px}
@media(max-width:720px){.director-grid{grid-template-columns:1fr}.director-label{flex-wrap:wrap}.analysis-report{padding:15px}.arrangement-title{display:block}.arrangement-title span{display:block}.arrangement-title span:last-child{margin-top:6px}.arrangement>button{padding:8px 3px}.arrangement>button strong{font-size:7px}.recipe-button{margin:7px 0 0;display:block}}

/* === SANI STUDIO 0.6: Production Console — additional functional instruments === */
.top-save-button{border:1px solid #76664f;color:#e9cfaa;background:#29241f;border-radius:6px;padding:9px 13px;white-space:nowrap;font:750 10px var(--mono);letter-spacing:.01em;transition:.2s}
.top-save-button:hover{background:#403429;border-color:#c8a57c}
.track-utilities{border-top:1px solid #303843;padding:10px 13px 12px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.track-utilities button{color:#bfc8d1;background:#222833;border:1px solid #3d4653;border-radius:5px;padding:8px 9px;font:680 10px var(--mono);min-height:32px;transition:background .2s,border-color .2s}
.track-utilities button:first-child{color:#e9c69c;background:#31291f;border-color:#6c5740;flex:1}
.track-utilities button:hover{background:#343d4b;border-color:#b79871}
.mastering-control{margin-top:22px;padding:17px 15px;border-radius:8px;background:#10151b;border:1px solid #40464e;display:grid;gap:9px}
.mastering-heading,.inspector-kicker{font:760 10px var(--mono);letter-spacing:.1em;color:#ddba91}
.mastering-control label{color:#e7e1d9;font-weight:630;font-size:12px}
.mastering-control select,.inspector-grid select{width:100%;color:#e9e5e1;background:#20242c;border:1px solid #4a505c;border-radius:6px;padding:11px 12px;font-size:12px;min-width:0}
.mastering-control small{font-size:10px;color:#8b969f;line-height:1.6}
.arrangement>button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #e2be91;background:linear-gradient(160deg,#64503b,var(--section-bg))}
.section-inspector{background:linear-gradient(120deg,#22262e,#191e26);border:1px solid #505563;border-radius:10px;padding:19px 21px;margin:16px 0 22px}
.inspector-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.inspector-heading h3{font-size:18px;line-height:1.15;font-weight:720;margin:5px 0 0;letter-spacing:-.025em}
#selectedSectionTime{font:680 10px var(--mono);color:#bbc2cc;border:1px solid #49515e;border-radius:5px;padding:8px 9px;white-space:nowrap}
.inspector-grid{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(120px,.8fr) minmax(210px,1.5fr);gap:12px}
.inspector-grid label{display:flex;flex-direction:column;gap:8px;color:#b5bcca;font-size:11px;font-weight:650;min-width:0}
.inspector-grid .offset-control{display:grid;grid-template-columns:1fr auto;align-content:center}
.offset-control input{grid-column:1/-1;min-width:0;width:100%;margin-top:10px;accent-color:#d8b38b}
.offset-control output{color:#e4c398;font:700 10px var(--mono)}
.inspector-actions{margin-top:17px;padding-top:13px;border-top:1px solid #3c4450;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.inspector-actions button,#compareMix{padding:10px 13px;color:#dac6aa;background:#302b29;border:1px solid #675949;border-radius:5px;font-size:11px;font-weight:700}
.inspector-actions button:hover,#compareMix:hover{background:#45392d}
.inspector-actions span{margin-left:auto;color:#939ca8;font-size:10px}
.review-tools{margin-top:14px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:13px;flex-wrap:wrap}
.master-report{font:700 10px/1.7 var(--mono);color:#a8c7bc;letter-spacing:.02em}
.export-depth-label{display:inline-flex;gap:7px;align-items:center;margin-left:12px;font-size:10px;color:#aab3bd}
.export-depth-label select{border:1px solid #45515a;border-radius:4px;padding:6px 8px;font:700 10px var(--mono);color:#e6d9c7;background:#252a32}
.help-button:hover{background:#333b47}
@media(max-width:1150px){.top-save-button{font-size:9px;padding:8px}.inspector-grid{grid-template-columns:1fr 1fr}.offset-control{grid-column:1/-1}.topright .edition{display:none}}
@media(max-width:720px){.top-save-button{padding:7px 9px;font-size:9px}.inspector-grid{grid-template-columns:1fr 1fr;gap:12px}.section-inspector{padding:15px}.inspector-actions span{flex-basis:100%;margin-left:0}.topright{gap:7px}.mastering-control{margin-top:16px}.review-tools{flex-direction:column;align-items:flex-start}.export-depth-label{margin:7px 0}.track-utilities button{font-size:9px}}
@media(max-width:420px){.inspector-grid{grid-template-columns:1fr}.offset-control{grid-column:1}.inspector-heading{align-items:flex-start;flex-direction:column}#selectedSectionTime{font-size:9px}.topright>span:not(.green-dot){display:none}.top-save-button{padding:6px}.section-inspector h3{font-size:16px}}