/* Semantic palettes keep generated media untouched while every work surface changes together. */
:root, :root[data-theme="seaglass"] {
  color-scheme: dark;
  --bg: #101918; --panel: #1b2725; --raised: #253531; --input: #131f1c;
  --sidebar: #13201d; --line: #3a5149; --text: #edf3ef; --muted: #a0b5ab;
  --accent: #b5dfcf; --accent-ink: #163529; --accent-soft: #2a483d;
  --danger: #f3b2a6; --danger-ink: #44221b; --success: #b5dfcf; --overlay: #08120de0;
  --shadow: #00000026; --image-ink: #f6f8f5;
  --border: var(--line); --mint: var(--accent); --cyan: var(--accent);
  --font: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  --scene-opacity: .48;
  --ease-out: cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="ocean"] {
  --bg: #111a24; --panel: #1b2b39; --raised: #293d50; --input: #132230;
  --sidebar: #14212d; --line: #3e566c; --text: #edf3f9; --muted: #a4b8ca;
  --accent: #a9cee9; --accent-ink: #16334b; --accent-soft: #29445a;
  --success: #addacf; --overlay: #081521e0;
}
:root[data-theme="amber"] {
  --bg: #211c17; --panel: #2b251e; --raised: #3d3228; --input: #241e17;
  --sidebar: #241f19; --line: #5c4b38; --text: #f5efe3; --muted: #c4b39b;
  --accent: #e5c294; --accent-ink: #443018; --accent-soft: #4a3928;
  --success: #c3d6aa; --overlay: #171109e0;
}
:root[data-theme="rose"] {
  --bg: #21191d; --panel: #2d2329; --raised: #41313a; --input: #251c22;
  --sidebar: #261d23; --line: #624952; --text: #f7edf2; --muted: #c5adb9;
  --accent: #e5bdcf; --accent-ink: #472b3a; --accent-soft: #50333f;
  --success: #c1dacd; --overlay: #1b0e17e0;
}
:root[data-theme="moon"] {
  --bg: #191c21; --panel: #252930; --raised: #353b44; --input: #1d2128;
  --sidebar: #1d2127; --line: #535c68; --text: #f0f2f7; --muted: #b4bac6;
  --accent: #d1d8e3; --accent-ink: #29313e; --accent-soft: #3d4553;
  --success: #bbd8cb; --overlay: #10131be0;
}
:root[data-theme="shell"] {
  color-scheme: light;
  --bg: #f2f0e9; --panel: #faf9f5; --raised: #e8e7df; --input: #f5f3ed;
  --sidebar: #e8e9e1; --line: #babfb2; --text: #283831; --muted: #586a60;
  --accent: #315e4d; --accent-ink: #ffffff; --accent-soft: #dce7db;
  --danger: #a33230; --danger-ink: #ffffff; --success: #315e4d; --overlay: #e3e7dfed;
  --shadow: #39483714; --scene-opacity: .42;
}
body { isolation: isolate; background: var(--bg); transition: background-color .38s, color .3s; }
.theme-background { position: fixed; inset: 0 0 auto 0; height: min(900px, 100dvh); z-index: -1; pointer-events: none; overflow: hidden; opacity: var(--scene-opacity); mask-image: linear-gradient(to bottom, #000 12%, #0009 60%, transparent 100%); transition: opacity .7s; }
.theme-background-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0; transition: opacity .75s var(--ease-out); }
.theme-background-image.is-visible { opacity: 1; }
.sidebar, .admin-rail { background: color-mix(in srgb, var(--sidebar) 96%, transparent); border-color: var(--line); }
.sidebar { padding-top: 27px; }
.topbar, .admin-topbar { border-color: color-mix(in srgb, var(--line) 48%, transparent); padding-right: 94px; min-height: 80px; }
.topbar-right { gap: 16px; }
.view { padding-top: 38px; }
.sidebar-note { margin-top: 35px; }
.sidebar-note p, .direction-card h3, .feature-copy h3 { font-family: var(--font); font-style: normal; }
.nav-item, .rail-link { min-height: 46px; border: 1px solid transparent; transition: color .22s, background-color .22s, transform .26s var(--ease-out); }
.nav-item.active, .rail-link.active { border-color: color-mix(in srgb, var(--accent) 23%, transparent); background: var(--accent-soft); color: var(--accent); }
.nav-item:hover, .rail-link:hover { transform: translateX(3px); }
.intro h1, .page-heading h1 { font-weight: 500; letter-spacing: .015em; }
.composer, .music-composer, .image-composer { background: color-mix(in srgb, var(--panel) 95%, transparent); border-color: var(--line); box-shadow: 0 16px 48px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent); }
.composer:focus-within, .image-composer:focus-within, .music-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); }
.primary { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); border-radius: 12px; }
.primary:hover { background: color-mix(in srgb, var(--accent) 89%, var(--text)); }
.primary, .secondary, .prompt-enhance, .upload-tile { transition: transform .24s var(--ease-out), background-color .24s, border-color .24s, box-shadow .24s; }
.primary:active, .secondary:active, .prompt-enhance:active { transform: scale(.97); }
.upload-tile:hover { transform: translateY(-2px); }
.media-card, .image-result, .music-job, .skill-card { transition: transform .25s var(--ease-out), border-color .25s; }
.media-card:hover, .image-result:hover { transform: translateY(-3px); border-color: var(--accent); }
.view:not([hidden]), .admin-view:not([hidden]) { animation: studio-arrive .42s var(--ease-out) both; }
@keyframes studio-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
select, select option { background-color: var(--input); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
:root[data-theme="shell"] input::placeholder, :root[data-theme="shell"] textarea::placeholder { opacity: 1; }
.breadcrumb strong { color: var(--text); }
.breadcrumb, .live-counts, .field-heading, .composer-caption, .prompt-footer, .section-note { color: var(--muted); }
dialog { background: var(--panel); border-color: var(--line); color: var(--text); }
dialog::backdrop { background: var(--overlay); }
.theme-dial { position: fixed; top: 19px; right: 27px; z-index: 80; font-family: var(--font); }
.theme-trigger { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; padding: 0; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 4px 16px var(--shadow); cursor: pointer; transition: transform .42s var(--ease-out), border-color .2s; }
.theme-trigger:hover { border-color: var(--accent); transform: rotate(22deg); }
.theme-trigger:active { transform: scale(.93); }
.theme-trigger-wheel { width: 23px; height: 23px; border-radius: 50%; background: conic-gradient(from 20deg, #b5dfcf 0deg 60deg, #a9cee9 60deg 120deg, #e5c294 120deg 180deg, #e5bdcf 180deg 240deg, #d1d8e3 240deg 300deg, #e8e5d7 300deg 360deg); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line); transition: transform .5s var(--ease-out); }
.is-open .theme-trigger-wheel { transform: rotate(145deg); }
.theme-orbit { position: absolute; width: 270px; height: 270px; top: 55px; right: 0; border-radius: 50%; background: color-mix(in srgb, var(--panel) 96%, transparent); border: 1px solid var(--line); box-shadow: 0 20px 70px var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateY(-12px) scale(.12) rotate(-24deg); transform-origin: calc(100% - 21px) -13px; transition: transform .42s var(--ease-out), opacity .25s, visibility .42s; pointer-events: none; }
.is-open .theme-orbit { opacity: 1; visibility: visible; transform: translateY(0) scale(1) rotate(0); pointer-events: auto; }
.theme-orbit-ring { position: absolute; inset: 36px; border: 1px dashed var(--line); border-radius: 50%; opacity: .55; }
.theme-orbit-center { position: absolute; inset: 92px 51px; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.theme-orbit-center small { font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.theme-orbit-center strong { color: var(--text); font-size: 16px; font-weight: 550; white-space: nowrap; }
.theme-orbit-center>span { font-size: 9px; color: var(--muted); white-space: nowrap; }
.theme-swatch { position: absolute; width: 48px; height: 48px; padding: 6px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; transition: transform .24s var(--ease-out), border-color .2s; }
.theme-swatch>span { display: block; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, var(--swatch-a) 50%, var(--swatch-b) 50%); }
.theme-swatch:hover { transform: scale(1.13); border-color: var(--accent); }
.theme-swatch[aria-checked="true"] { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-swatch svg { display: none; position: absolute; width: 17px; height: 17px; stroke: #fff; stroke-width: 2.6; fill: none; background: #172821c9; border-radius: 50%; }
.theme-swatch[aria-checked="true"] svg { display: block; }
.theme-swatch-seaglass { --swatch-a: #b5dfcf; --swatch-b: #29443a; left: 110px; top: 22px; }
.theme-swatch-ocean { --swatch-a: #a9cee9; --swatch-b: #29445a; left: 187px; top: 67px; }
.theme-swatch-amber { --swatch-a: #e5c294; --swatch-b: #59422a; left: 187px; top: 156px; }
.theme-swatch-rose { --swatch-a: #e5bdcf; --swatch-b: #50333f; left: 110px; top: 200px; }
.theme-swatch-moon { --swatch-a: #d1d8e3; --swatch-b: #454b59; left: 33px; top: 156px; }
.theme-swatch-shell { --swatch-a: #f2f0e9; --swatch-b: #aabdb0; left: 33px; top: 67px; }
@media(max-width: 900px) { .topbar, .admin-topbar { padding-right: 79px; } .theme-dial { right: 20px; } }
@media(max-width: 700px) { .theme-dial { top: 13px; right: 14px; } .theme-trigger { width: 40px; height: 40px; } .topbar, .admin-topbar { min-height: 66px; padding-right: 68px; } .topbar-right { gap: 8px; } .live-counts { gap: 8px; } .theme-orbit { top: 51px; } .view { padding-top: 25px; } }
@media(max-width: 420px) { .topbar .breadcrumb { font-size: 10px; } .topbar .breadcrumb>span { margin-inline: 5px; } .topbar .connection { display: none; } .theme-orbit { width: 270px; } }
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; } }