/* Makar AI / Studio 02. A clear creative workspace in ink, cobalt and lime. */
:root,
:root[data-theme="dark"] {
  --canvas: #090e1b;
  --surface: #121c30;
  --surface-strong: #192641;
  --surface-soft: #10192b;
  --ink: #f6f8ff;
  --ink-deep: #f6f8ff;
  --muted: #899bb9;
  --muted-strong: #b4c0d6;
  --line: #25324a;
  --line-strong: #3a4c6c;
  --lime: #c7fa45;
  --lime-strong: #d8ff79;
  --lime-soft: #21331e;
  --primary: #3366ff;
  --primary-hover: #4b79ff;
  --primary-soft: #3366ff21;
  --coral: #ff6a55;
  --coral-soft: #ff6a551a;
  --cyan: #79d9ff;
  --error: #ff8a79;
  --green: #c7fa45;
  --shadow: 0 16px 50px #02071433;
  --shadow-card: 0 18px 44px #0207144d;
  --radius: 18px;
  --sidebar-width: 230px;
  --ease: cubic-bezier(.22,.75,.24,1);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --canvas: #f3f6ff;
  --surface: #ffffff;
  --surface-strong: #eef3ff;
  --surface-soft: #eaf0fc;
  --ink: #101a30;
  --ink-deep: #101a30;
  --muted: #6d7d9a;
  --muted-strong: #536582;
  --line: #dbe3f4;
  --line-strong: #bccce8;
  --lime-soft: #eef8d8;
  --primary-soft: #e6edff;
  --error: #c74035;
  --green: #47641b;
  --shadow: 0 16px 50px #1a3c6a0c;
  --shadow-card: 0 18px 44px #1a3c6a14;
  color-scheme: light;
}
html[data-theme] { background:var(--canvas); }
html[data-theme] body { background:var(--canvas);color:var(--ink);font-size:14px;line-height:1.6;letter-spacing:-.015em; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { transition:background 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease),box-shadow 180ms var(--ease),transform 180ms var(--ease); }
button { touch-action:manipulation; }
button:disabled { opacity:.5; }
svg { width:20px;height:20px; }
::selection { background:var(--primary);color:#fff; }
:focus-visible { outline:3px solid #7398ff;outline-offset:4px; }
html[data-theme] :is(h1,h2,h3,h4) { color:var(--ink); }
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { color:var(--muted);opacity:1; }
html[data-theme] .sidebar {
  width:var(--sidebar-width);padding:29px 16px 19px;
  background:#0c1425;border-color:var(--line);
  scrollbar-color:#283753 transparent;box-shadow:none;
}
html[data-theme="light"] .sidebar { background:#fff; }
html[data-theme] .brand { gap:11px;padding:0 10px; }
html[data-theme] .brand > svg { width:35px;height:35px; }
html[data-theme] .brand > svg rect { fill:var(--primary); }
html[data-theme] .brand > svg path { stroke:#fff; }
html[data-theme] .brand-name { font-size:24px;letter-spacing:-.065em;color:var(--ink); }
html[data-theme] .brand-ai { color:var(--ink);font-size:20px;font-weight:500; }
html[data-theme] .brand-tag { margin-top:5px;font-size:11px;color:var(--muted);letter-spacing:.12em; }
html[data-theme] .sidebar-create {
  min-height:43px;margin-top:30px;padding:10px 13px;
  background:var(--primary);border:1px solid var(--primary);color:#fff;border-radius:11px;font-size:12px;
  box-shadow:0 4px 16px #3366ff20;
}
html[data-theme] .sidebar-create:hover { background:var(--primary-hover);border-color:var(--primary-hover);transform:translateY(-1px); }
html[data-theme] .sidebar-create kbd { color:#c9d7ff;background:#ffffff13;border-color:#ffffff2a;font-size:11px; }
html[data-theme] .nav-group { margin-top:24px; }
html[data-theme] .nav-caption { padding:0 12px;color:var(--muted);font-size:11px;letter-spacing:.12em;font-weight:650; }
html[data-theme] .nav-item { position:relative;min-height:43px;margin:4px 0;padding:10px 13px;border:1px solid transparent;border-radius:9px;color:#a1b0cb;font-size:12px;font-weight:550; }
html[data-theme="light"] .nav-item { color:#60718f; }
html[data-theme] .nav-item svg { width:18px;height:18px;color:#8195b8;stroke-width:1.8; }
html[data-theme] .nav-item:hover { background:var(--surface);color:var(--ink);transform:none; }
html[data-theme] .nav-item.active { color:#eaf0ff;background:var(--primary-soft);border-color:#3366ff29;box-shadow:none; }
html[data-theme="light"] .nav-item.active { color:#2454e2; }
html[data-theme] .nav-item.active::before { content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--primary); }
html[data-theme] .nav-item.active svg { color:#749aff; }
html[data-theme="light"] .nav-item.active svg { color:var(--primary); }
html[data-theme] .nav-item .count,
html[data-theme] .nav-item.active .count { min-width:23px;height:20px;border-color:var(--line);background:var(--surface-strong);color:var(--muted-strong);font-size:11px; }
html[data-theme] .sidebar-bottom { padding-top:27px; }
html[data-theme] .upgrade-card { padding:17px 14px;margin:0 1px 18px;border:1px solid #3366ff35;background:linear-gradient(140deg,#14264b,#111d34);border-radius:12px; }
html[data-theme="light"] .upgrade-card { background:linear-gradient(140deg,#edf2ff,#f7faff); }
html[data-theme] .upgrade-card::after { display:none; }
html[data-theme] .upgrade-card-top { gap:9px; }
html[data-theme] .upgrade-card-top svg { width:19px;height:19px;color:#7ea1ff; }
html[data-theme] .upgrade-card-top span { color:var(--ink);font-size:11px;line-height:1.6; }
html[data-theme] .upgrade-card p { color:var(--muted);font-size:11px;line-height:1.8; }
html[data-theme] .upgrade-card a { margin-top:13px;padding-top:11px;border-color:#3366ff36;color:#85a5ff;font-size:11px; }
html[data-theme="light"] .upgrade-card a { color:var(--primary); }
html[data-theme] .profile-btn { padding:17px 7px 0;border-color:var(--line); }
html[data-theme] .profile-meta strong { color:var(--ink);font-size:12px; }
html[data-theme] .profile-meta small { color:var(--muted);font-size:11px; }
html[data-theme] .profile-btn > svg { color:var(--muted); }
html[data-theme] .avatar { background:#283c67;color:#c9d8ff;font-size:12px; }
html[data-theme] .topbar-actions > .avatar.small { border:2px solid var(--canvas);box-shadow:0 0 0 1px var(--line);background:#283c67;color:#c9d8ff; }
html[data-theme] .sidebar-version { padding-top:17px;color:#657a9d;font-size:11px; }
html[data-theme] .status-dot { width:5px;height:5px;background:var(--lime); }
html[data-theme] .workspace { max-width:1760px;margin-left:var(--sidebar-width);padding:26px 38px 31px;background:transparent; }
html[data-theme] .topbar { min-height:38px;margin-bottom:31px;gap:18px; }
html[data-theme] .breadcrumbs { gap:10px;color:var(--muted);font-size:11px; }
html[data-theme] .breadcrumbs > strong { color:var(--muted-strong);font-weight:600; }
html[data-theme] .topbar-actions { gap:10px; }
html[data-theme] .credit-pill { min-height:36px;border:1px solid #c7fa452d;background:#c7fa4509;color:var(--lime);border-radius:9px;padding:0 10px 0 12px;gap:7px;font-size:12px; }
html[data-theme="light"] .credit-pill { background:#f3fbdc;color:#53751b; }
html[data-theme] .credit-pill:hover { border-color:#c7fa4570;background:#c7fa4511; }
html[data-theme] .credit-pill > svg { width:14px;height:14px;color:var(--lime); }
html[data-theme="light"] .credit-pill > svg { color:#53751b; }
html[data-theme] .credit-pill > span:not(.credit-plus) { color:var(--muted-strong);font-size:11px; }
html[data-theme] .credit-plus { background:#c7fa4517;border-color:#c7fa453a;color:var(--lime);border-radius:5px; }
html[data-theme="light"] .credit-plus { background:#e4f8bc;color:#53751b; }
html[data-theme] .icon-btn,
html[data-theme] .notification-btn { color:var(--muted-strong);background:var(--surface);border-color:var(--line);border-radius:9px; }
html[data-theme] .icon-btn:hover { color:var(--ink);background:var(--surface-strong);border-color:var(--line-strong); }
html[data-theme] .notification-btn i { background:var(--coral);border-color:var(--surface); }
html[data-theme] .demo-badge { color:var(--muted);background:transparent;border-color:var(--line);font-size:11px;font-weight:500; }
html[data-theme] .workspace-footer { margin-top:34px;padding-top:18px;border-color:var(--line);color:#667b9f;font-size:11px; }
html[data-theme] .mobile-overlay.visible { background:#030917a6;backdrop-filter:blur(5px); }
#view { outline:none;animation:view-in 320ms var(--ease) both;min-width:0; }

/* Components shared by the four redesigned workspaces. */
.v2-page { min-width:0; }
.v2-intro { display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:25px; }
.v2-kicker { display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; }
.v2-kicker svg { width:14px;height:14px;color:#79a0ff; }
.v2-title { margin-top:9px;font-size:clamp(28px,2.8vw,39px);font-weight:650;line-height:1.2;letter-spacing:-.05em; }
.v2-title span { color:var(--primary); }
.v2-subtitle { max-width:580px;margin-top:9px;color:var(--muted);font-size:12px;line-height:1.8; }
.v2-heading,
.v2-section-title { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px; }
.v2-heading h2,
.v2-section-title h2 { font-size:18px;font-weight:650;letter-spacing:-.035em; }
.v2-heading > span,
.v2-section-title > span { color:var(--muted);font-size:11px; }
.v2-section { margin-top:31px;min-width:0; }
.v2-card { min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px; }
.v2-button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:10px 15px;border:1px solid transparent;border-radius:9px;font-size:12px;font-weight:650;line-height:1.4;white-space:nowrap; }
.v2-button svg { width:16px;height:16px; }
.v2-button.primary { background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 16px #3366ff1c; }
.v2-button.primary:hover { background:var(--primary-hover);border-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 7px 22px #3366ff30; }
.v2-button.secondary { background:var(--surface);border-color:var(--line);color:var(--ink); }
.v2-button.secondary:hover { background:var(--surface-strong);border-color:var(--line-strong); }
.v2-button.quiet { color:var(--muted-strong);background:transparent; }
.v2-button.quiet:hover { color:var(--ink);background:var(--surface-strong); }
.v2-button.lime { background:var(--lime);border-color:var(--lime);color:#172403; }
.v2-button.lime:hover { background:var(--lime-strong);border-color:var(--lime-strong);transform:translateY(-1px); }
.v2-button.full { width:100%; }
.v2-badge { display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 7px;background:var(--primary-soft);border:1px solid #3366ff30;border-radius:5px;color:#8badff;font-size:11px;font-weight:650;line-height:1.4; }
.v2-badge svg { width:11px;height:11px; }
.v2-badge.lime { color:var(--lime);background:#c7fa450d;border-color:#c7fa452a; }
.v2-badge.coral { color:var(--coral);background:var(--coral-soft);border-color:#ff6a552b; }
.v2-divider { height:1px;margin:20px 0;background:var(--line);border:0; }
.v2-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:200px;padding:24px;color:var(--muted);text-align:center; }
.v2-empty > svg { width:32px;height:32px;color:var(--line-strong); }
.v2-empty h3 { color:var(--ink);font-size:17px; }
.v2-empty p { max-width:300px;font-size:12px; }
.v2-inline-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.v2-inline-actions .v2-button { min-height:34px;padding:8px 11px;font-size:11px; }
.v2-textarea { display:block;width:100%;min-height:118px;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--canvas);color:var(--ink);resize:vertical;font-size:12px;line-height:1.8; }
.v2-textarea:focus { border-color:var(--primary);box-shadow:0 0 0 3px #3366ff12; }
.v2-model-button { display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);text-align:left; }
.v2-model-button > svg:last-child { width:15px;height:15px;margin-left:auto;color:var(--muted); }
.v2-model-button strong { display:block;color:var(--ink);font-size:12px; }
.v2-model-button small { display:block;color:var(--muted);font-size:11px;margin-top:2px; }
.v2-model-button:hover { border-color:var(--line-strong);background:var(--surface-strong); }
.v2-model-button .model-avatar { width:32px;height:32px;flex-shrink:0; }
.tool-section { margin-bottom:23px;min-width:0; }
.tool-section:last-child { margin-bottom:0; }
.tool-label { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;color:var(--muted-strong);font-size:11px;font-weight:650; }
.tool-label span,
.tool-label small { color:var(--muted);font-size:11px;font-weight:500; }
.field-hint { margin-top:8px;color:var(--muted);font-size:11px;line-height:1.75; }
.segmented { display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--canvas); }
.segmented button { display:flex;flex:1;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:7px 9px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font-size:11px;font-weight:600; }
.segmented button.active { background:var(--surface-strong);border-color:var(--line-strong);color:var(--ink);box-shadow:0 2px 4px #0002; }
.segmented button:hover:not(.active) { color:var(--ink); }
.segmented svg { width:14px;height:14px; }

/* Studio / a warm welcome and four direct doors into creative work. */
.home-layout { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:23px;align-items:stretch; }
.home-launch { display:flex;min-width:0;flex-direction:column;justify-content:center;padding:30px 0 24px; }
.home-greeting { max-width:620px;margin:12px 0 0;font-size:clamp(32px,3.45vw,51px);line-height:1.15;font-weight:650;letter-spacing:-.055em; }
.home-greeting span { color:var(--primary); }
.home-launch > p { max-width:430px;margin-top:17px;color:var(--muted);font-size:13px;line-height:1.85; }
.home-quick-nav { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:29px; }
.quick-tile { display:flex;position:relative;min-width:0;min-height:120px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;padding:16px 12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:left; }
.quick-tile:hover { border-color:var(--line-strong);background:var(--surface-strong);transform:translateY(-3px);box-shadow:var(--shadow-card); }
.quick-icon { display:grid;place-items:center;width:32px;height:32px;margin-bottom:6px;border-radius:9px;background:#3366ff20;color:#83a4ff; }
.quick-icon svg { width:18px;height:18px; }
.type-image .quick-icon { color:var(--coral);background:var(--coral-soft); }
.type-video .quick-icon { color:var(--cyan);background:#79d9ff15; }
.type-music .quick-icon { color:var(--lime);background:#c7fa4512; }
.quick-label { color:var(--ink);font-size:12px;font-weight:700; }
.quick-desc { color:var(--muted);font-size:11px;line-height:1.5; }
.quick-arrow { position:absolute;top:16px;right:11px;color:var(--muted); }
.quick-arrow svg { width:13px;height:13px; }
.home-prompt { margin-top:23px; }
.home-prompt > label,
.home-prompt > p { display:block;margin-bottom:9px;color:var(--muted);font-size:11px; }
.home-prompt-row { display:flex;align-items:center;gap:10px;min-height:54px;padding:7px 8px 7px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surface); }
.home-prompt-row:focus-within { border-color:var(--primary);box-shadow:0 0 0 3px #3366ff12; }
.home-prompt-row input { width:100%;min-width:0;min-height:35px;padding:0;border:0;background:transparent;color:var(--ink);font-size:12px; }
.home-prompt-row input:focus-visible { outline:0; }
.home-prompt-row button { display:grid;flex-shrink:0;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:var(--primary);color:#fff; }
.home-prompt-row button:hover { background:var(--primary-hover); }
.home-prompt-row button svg { width:17px;height:17px; }
.home-feature { position:relative;display:flex;min-height:370px;flex-direction:column;overflow:hidden;border:1px solid #ff6a552c;border-radius:18px;background:#301e29; }
.feature-photo { position:absolute;inset:0;overflow:hidden; }
.feature-photo img { width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:transform 800ms var(--ease); }
.home-feature:hover .feature-photo img { transform:scale(1.035); }
.feature-overlay { position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#090e1b00 25%,#090e1b10 44%,#090e1bc9 100%); }
.feature-caption { position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto;padding:26px 25px;color:#fff; }
.feature-caption > span,
.feature-caption > small { color:#ffffffa3;font-size:11px;letter-spacing:.03em; }
.feature-caption h2 { max-width:260px;color:#fff!important;font-size:27px;line-height:1.17;font-weight:600;letter-spacing:-.045em; }
.feature-caption p { color:#ffffffaf;font-size:11px;line-height:1.7; }
.feature-caption .v2-badge { color:#fff;border-color:#ffffff36;background:#ffffff13;backdrop-filter:blur(8px); }
.feature-caption .v2-button { min-height:34px;margin-top:1px;padding:7px 11px;border-color:#ffffff4d;background:#ffffff12;color:#fff;font-size:11px;backdrop-filter:blur(8px); }
.feature-caption .v2-button:hover { background:#ffffff26; }
.home-bottom { display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:24px;align-items:start;margin-top:30px; }
.home-recent { min-width:0; }
.v2-work-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px; }
.v2-work-card { min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-align:left; }
.v2-work-card:hover { transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-card); }
.v2-work-image { position:relative;width:100%;height:137px;padding:0;overflow:hidden;border:0;background:var(--surface-soft);color:var(--muted); }
.v2-work-image img { width:100%;height:100%;object-fit:cover;transition:transform 450ms var(--ease); }
.v2-work-card:hover .v2-work-image img { transform:scale(1.04); }
.v2-work-image .v2-badge { position:absolute;bottom:9px;left:9px;background:#090e1b85;border-color:#ffffff2d;color:#fff;backdrop-filter:blur(8px); }
.v2-work-image > svg { width:36px;height:36px; }
.v2-work-image .play-button { position:absolute;inset:0;margin:auto; }
.v2-work-info { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px; }
.v2-work-info > div { min-width:0; }
.v2-work-info strong { display:block;overflow:hidden;color:var(--ink);font-size:11px;font-weight:650;white-space:nowrap;text-overflow:ellipsis; }
.v2-work-info small { display:block;margin-top:4px;color:var(--muted);font-size:11px; }
.v2-work-info > svg { width:13px;height:13px;color:var(--muted); }
.home-side-note { padding:20px 19px;border:1px solid var(--line);border-radius:13px;background:var(--surface); }
.home-side-note > svg { width:23px;height:23px;margin-bottom:16px;color:var(--primary); }
.home-side-note h3 { font-size:17px;font-weight:650;line-height:1.35;letter-spacing:-.04em; }
.home-side-note p { margin-top:9px;color:var(--muted);font-size:11px;line-height:1.85; }
.home-side-note .v2-button { margin-top:17px;min-height:34px;padding:8px 11px;font-size:11px; }
.home-model-strip { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.compact-model { display:flex;align-items:center;gap:11px;min-width:0;padding:15px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);text-align:left; }
.compact-model:hover { border-color:var(--line-strong);background:var(--surface-strong);transform:translateY(-2px); }
.compact-model > .model-avatar { width:32px;height:32px;flex-shrink:0; }
.compact-model > div { min-width:0; }
.compact-model strong { display:block;overflow:hidden;color:var(--ink);font-size:11px;font-weight:700;white-space:nowrap;text-overflow:ellipsis; }
.compact-provider { display:block;margin-top:2px;color:var(--muted);font-size:11px; }
.compact-price { margin-left:auto;color:var(--muted-strong);font-size:11px;white-space:nowrap; }
.compact-price svg { width:11px;height:11px;color:var(--lime); }

/* Images / settings on the left, a focused, generous canvas on the right. */
.creative-toolbar { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px; }
.creative-toolbar > p { color:var(--muted);font-size:11px; }
.creative-layout { display:grid;grid-template-columns:310px minmax(0,1fr);align-items:start;gap:21px; }
.creation-sidebar { padding:22px 21px;border:1px solid var(--line);border-radius:15px;background:var(--surface); }
.aspect-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }
.aspect-options button { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:70px;padding:10px 6px;border:1px solid var(--line);border-radius:8px;background:var(--canvas);color:var(--muted);font-size:11px;font-weight:600; }
.aspect-options button > svg { width:22px;height:22px; }
.aspect-options button.active { color:#b7cbff;background:var(--primary-soft);border-color:var(--primary); }
.aspect-options button:hover { border-color:var(--line-strong); }
.aspect-options button.active:hover { border-color:var(--primary); }
.aspect-options .aspect-shape { width:20px;height:20px;border:1.5px solid currentColor;border-radius:2px; }
.aspect-options .aspect-shape.portrait { width:15px;height:23px; }
.aspect-options .aspect-shape.landscape { width:25px;height:15px; }
.style-options { display:flex;gap:6px;flex-wrap:wrap; }
.style-options button { padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);font-size:11px;font-weight:550; }
.style-options button.active { color:var(--coral);border-color:#ff6a5555;background:var(--coral-soft); }
.style-options button:hover { color:var(--ink);border-color:var(--line-strong); }
.v2-reference { display:flex;position:relative;align-items:center;gap:10px;min-height:69px;padding:12px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--canvas);cursor:pointer; }
.v2-reference > svg { width:20px;height:20px;color:var(--muted); }
.v2-reference strong { display:block;font-size:11px;font-weight:650; }
.v2-reference small { display:block;margin-top:3px;color:var(--muted);font-size:11px; }
.v2-reference:hover { background:var(--surface-strong);border-color:var(--primary); }
.v2-reference input { position:absolute;width:1px;height:1px;opacity:0; }
.v2-reference:focus-within { outline:3px solid #7398ff;outline-offset:3px; }
.creation-sidebar > .v2-button,
.music-form > .v2-button { width:100%;min-height:43px;justify-content:center; }
.creation-sidebar .button-cost,
.music-form .button-cost { margin-left:auto;padding-left:13px;color:#dce6ff;border-color:#ffffff33;font-size:11px;opacity:1; }
.creation-sidebar .v2-button .button-label,
.music-form .v2-button .button-label { gap:7px; }
.canvas-area { display:flex;min-width:0;flex-direction:column;align-items:stretch; }
.canvas-toolbar { display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:39px;margin-bottom:12px; }
.canvas-toolbar > div,
.canvas-toolbar > span { display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px; }
.canvas-toolbar > div strong { color:var(--muted-strong);font-size:11px;font-weight:600; }
.canvas-toolbar .icon-btn { width:29px;height:29px; }
.canvas-toolbar .icon-btn svg { width:14px;height:14px; }
.canvas-frame { position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:400px;max-height:580px;aspect-ratio:1.23;overflow:hidden;border:1px solid var(--line);border-radius:13px;background:#10182a;isolation:isolate; }
.canvas-frame > img { width:100%;height:100%;max-height:580px;object-fit:contain; }
.canvas-frame.portrait > img { width:auto;max-width:100%; }
.canvas-frame.landscape { aspect-ratio:1.45; }
.canvas-frame.landscape > img { object-fit:contain; }
.canvas-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:35px;color:var(--muted);text-align:center; }
.canvas-empty > svg { width:39px;height:39px;color:var(--line-strong); }
.canvas-empty h3 { font-size:19px; }
.canvas-empty p { max-width:280px;font-size:12px; }
.canvas-meta { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;color:var(--muted);font-size:11px; }
.canvas-meta > span { display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.canvas-meta strong { color:var(--muted-strong);font-weight:600; }
.canvas-meta svg { width:12px;height:12px; }
.canvas-actions { display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:12px;border-top:1px solid var(--line); }
.canvas-actions .v2-button { min-height:35px;padding:8px 11px;font-size:11px; }
.gallery-strip { display:flex;align-items:center;gap:9px;overflow-x:auto;margin-top:23px;padding:2px 1px 6px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent; }
.gallery-thumb { position:relative;flex:0 0 78px;height:65px;padding:3px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--surface); }
.gallery-thumb img { width:100%;height:100%;border-radius:4px;object-fit:cover; }
.gallery-thumb.active,
.gallery-thumb:has(img.active) { border-color:var(--primary);box-shadow:0 0 0 1px var(--primary); }
.gallery-thumb:hover { border-color:var(--line-strong);transform:translateY(-2px); }
.gallery-thumb.active:hover { border-color:var(--primary); }
.canvas-demo-note { margin-top:13px;color:var(--muted);font-size:11px;line-height:1.75; }
.canvas-demo-note svg { width:12px;height:12px;margin-right:4px; }

/* Music / a dedicated listening room and a compact arrangement form. */
.music-layout { display:grid;grid-template-columns:330px minmax(0,1fr);gap:23px;align-items:start; }
.music-form { min-width:0;padding:22px;border:1px solid var(--line);border-radius:15px;background:var(--surface); }
.music-tabs { display:flex;gap:0;margin:0 0 22px;border-bottom:1px solid var(--line); }
.music-tabs button { flex:1;position:relative;padding:0 5px 13px;border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:650; }
.music-tabs button.active { color:var(--ink); }
.music-tabs button.active::after { content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);border-radius:2px; }
.music-tabs button:hover { color:var(--ink); }
.genre-chips { display:flex;flex-wrap:wrap;gap:6px; }
.genre-chips button { padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--canvas);color:var(--muted);font-size:11px;font-weight:550; }
.genre-chips button.active { color:#192305;border-color:var(--lime);background:var(--lime); }
.genre-chips button:hover:not(.active) { color:var(--ink);border-color:var(--line-strong); }
.music-lyrics { min-height:150px; }
.music-preview { display:flex;position:relative;min-width:0;flex-direction:column;align-items:center;padding:26px 30px 23px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,#15213a 0%,#121c30 65%);text-align:center; }
html[data-theme="light"] .music-preview { background:linear-gradient(150deg,#e8eeff,#fff 70%); }
.music-preview::before { content:"";position:absolute;pointer-events:none;width:360px;height:260px;top:-140px;left:calc(50% - 180px);border-radius:50%;background:#3366ff14;filter:blur(50px); }
.record-art { position:relative;width:210px;height:210px;margin-bottom:18px;overflow:hidden;border:1px solid #ffffff18;border-radius:10px;background:#243456;box-shadow:0 14px 32px #03091655;transform:rotate(-2deg); }
.record-art::after { content:"";position:absolute;inset:0;border:1px solid #ffffff12;border-radius:inherit;pointer-events:none; }
.record-art img { width:100%;height:100%;object-fit:cover; }
.record-label { display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--lime);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; }
.record-label svg { width:11px;height:11px; }
.record-type { color:var(--muted);font-size:11px;letter-spacing:.02em; }
.record-title { margin-top:7px;font-size:26px;font-weight:650;letter-spacing:-.045em;line-height:1.25; }
.record-model { display:block;margin-top:8px;color:var(--muted);font-size:11px; }
.music-transport { display:flex;align-items:center;justify-content:center;gap:21px;margin-top:21px; }
.music-transport > button:not(.big-play) { display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:transparent;color:var(--muted-strong); }
.music-transport > button:not(.big-play):hover { color:var(--ink); }
.music-transport svg { width:18px;height:18px; }
.big-play { display:grid;place-items:center;width:49px;height:49px;padding:0;border:0;border-radius:50%;background:var(--lime);color:#1a2608;box-shadow:0 4px 18px #c7fa4517; }
.big-play:hover { background:var(--lime-strong);transform:scale(1.045); }
.big-play svg { width:21px;height:21px;fill:currentColor; }
.music-wave { display:flex;position:relative;align-items:center;justify-content:space-between;gap:3px;width:100%;max-width:460px;height:45px;margin-top:20px;color:var(--lime); }
.music-wave > span,
.music-wave > i { display:block;flex:1;max-width:4px;height:var(--h,17px);min-height:4px;border-radius:3px;background:currentColor;opacity:.35;transform-origin:center; }
.music-wave > :nth-child(2n) { opacity:.55; }
.music-wave > :nth-child(3n) { opacity:.8; }
.music-wave > :nth-child(n+21) { opacity:.15; }
.music-wave.playing > span,
.music-wave.playing > i,
.music-preview.playing .music-wave > span,
.music-preview.playing .music-wave > i { animation:music-wave-pulse 900ms calc(var(--i,0)*-43ms) ease-in-out infinite alternate; }
@keyframes music-wave-pulse { from { transform:scaleY(.45); } to { transform:scaleY(1.2); } }
.music-timeline { display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;max-width:460px;margin-top:8px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums; }
.music-timeline input { width:100%;accent-color:var(--lime);height:3px; }
.track-list { display:grid;gap:1px;margin-top:19px;padding:6px 13px;border:1px solid var(--line);border-radius:13px;background:var(--surface); }
.track-row { display:flex;align-items:center;gap:12px;min-width:0;min-height:73px;padding:12px 0;border-bottom:1px solid var(--line); }
.track-row:last-child { border-bottom:0; }
.track-row.active { position:relative; }
.track-row.active::before { content:"";position:absolute;left:-13px;top:16px;bottom:16px;width:2px;background:var(--lime);border-radius:2px; }
.track-cover { display:grid;flex-shrink:0;place-items:center;width:45px;height:45px;padding:0;overflow:hidden;border:0;border-radius:6px;background:var(--surface-strong);color:var(--muted); }
.track-cover img { width:100%;height:100%;object-fit:cover; }
.track-cover svg { width:18px;height:18px; }
.track-meta { min-width:0;flex:1; }
.track-meta strong { display:block;overflow:hidden;color:var(--ink);font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap; }
.track-meta small,
.track-meta p { display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.5; }
.track-meta button { display:block;max-width:100%;padding:0;overflow:hidden;border:0;background:transparent;color:var(--ink);font-size:11px;font-weight:650;text-align:left;text-overflow:ellipsis;white-space:nowrap; }
.track-duration { color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums; }
.track-action { display:grid;flex-shrink:0;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted); }
.track-action:hover { background:var(--surface-strong);color:var(--ink); }
.track-action svg { width:14px;height:14px; }
.music-bottom-note { display:flex;align-items:flex-start;gap:7px;margin-top:13px;color:var(--muted);font-size:11px;line-height:1.8; }
.music-bottom-note svg { width:13px;height:13px;margin-top:3px;flex-shrink:0; }
.music-form .select,
.music-form select,
.creation-sidebar select { width:100%;min-height:38px;padding:9px 11px;background:var(--canvas);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:11px; }

/* Bring the rest of the prototype into the same palette. */
html[data-theme] :is(.page-title,.model-title,.model-title h3,.work-title,button.work-title,.plan-card h2,.plan-price,.package-credits,.package-price,.stat-card strong,.faq-list summary,.profile-summary h2,.settings-title,.settings-title h2,.modal-header h2,.notification-empty h3,.help-card h2,.help-card h3,.pricing-note h3) { color:var(--ink); }
html[data-theme] :is(.page-subtitle,.section-subtitle,.model-description,.model-provider,.model-price,.work-info,.model-meta small,.faq-list p,.setting-row small,.modal-lead,.modal-lead p,.modal-lead small,.modal-lead span,.modal-header p,.plan-card p,.package-card p,.package-price small,.package-name,.package-cta,.plan-stars span,.profile-summary p,.profile-summary .muted,.settings-title p,.field small,.setting-row p,.transaction-date,.transaction-name,.transaction-row small,.plan-intro p,.pricing-note p,.help-card p,.help-card small,.notification-empty p) { color:var(--muted); }
html[data-theme] :is(.panel,.model-card,.work-card,.plan-card,.package-card,.stat-card,.creation-panel,.profile-summary,.profile-fields .settings-group,.faq-list details,.modal,.model-option,.payment-method,.pack-selector button) { background:var(--surface);border-color:var(--line); }
html[data-theme] :is(.panel,.plan-card,.profile-summary,.profile-fields .settings-group) { border-radius:16px; }
html[data-theme] :is(.button.primary,.button.dark,.generate-button,.chat-send) { color:#fff;background:var(--primary);border-color:var(--primary);box-shadow:none; }
html[data-theme] :is(.button.primary,.button.dark,.generate-button,.chat-send):hover { color:#fff;background:var(--primary-hover);border-color:var(--primary-hover);box-shadow:0 6px 20px #3366ff26; }
html[data-theme] .button.secondary { color:var(--ink);background:var(--surface);border-color:var(--line); }
html[data-theme] .button.secondary:hover { background:var(--surface-strong);border-color:var(--line-strong); }
html[data-theme] .button.ghost { background:transparent;color:var(--muted-strong); }
html[data-theme] .button.ghost:hover { background:var(--surface-strong);color:var(--ink); }
html[data-theme] .button-cost { border-color:#ffffff33;color:#e1eaff; }
html[data-theme] .text-button { color:#82a4ff; }
html[data-theme] .text-button:hover { color:#b5caff; }
html[data-theme="light"] .text-button { color:var(--primary); }
html[data-theme] :is(.eyebrow,.nav-caption) { color:var(--muted); }
html[data-theme] .eyebrow::before { background:var(--primary); }
html[data-theme] .title-dot { color:var(--primary); }
html[data-theme] .section-heading h2 span { color:var(--muted); }
html[data-theme] :is(.model-card:hover,.work-card:hover,.package-card:hover) { border-color:var(--line-strong);box-shadow:var(--shadow-card); }
html[data-theme] :is(.model-card-foot,.plan-features,.plan-card ul,.package-cta,.settings-group,.setting-row,.profile-divider,.transaction-row,.modal-header,.modal-footer,.workspace-footer) { border-color:var(--line); }
html[data-theme] :is(.badge,.tag,.notice,.demo-banner,.order-summary,.attachment-chip) { background:var(--primary-soft);border-color:#3366ff30;color:#a0bcff; }
html[data-theme="light"] :is(.badge,.tag,.notice,.demo-banner,.order-summary,.attachment-chip) { color:#4565aa; }
html[data-theme] :is(.plan-card.featured,.package-card.featured,.model-option.selected,.pack-selector button.selected,.payment-method.selected) { background:var(--primary-soft);border-color:var(--primary); }
html[data-theme] .plan-card.featured::before { background:var(--primary); }
html[data-theme] .package-badge,
html[data-theme] .package-card .badge { background:var(--primary);border-color:var(--primary);color:#fff; }
html[data-theme] :is(.stat-icon,.plan-icon,.tx-icon,.help-art,.insufficient-art) { background:var(--primary-soft);border-color:#3366ff30;color:#82a4ff; }
html[data-theme] .plan-card li { color:var(--muted-strong); }
html[data-theme] .plan-card li svg { color:var(--lime); }
html[data-theme] .plan-stars { color:var(--muted-strong); }
html[data-theme] :is(.help-card,.pricing-note) { background:var(--surface-soft);border-color:var(--line); }
html[data-theme] .faq-list details[open] { background:var(--surface-strong);border-color:var(--line-strong); }
html[data-theme] .faq-list summary svg { color:var(--muted); }
html[data-theme] .profile-summary .avatar { background:#283c67;color:#c9d8ff; }
html[data-theme] .profile-divider { background:var(--line); }
html[data-theme] .profile-balance { color:var(--lime); }
html[data-theme="light"] .profile-balance { color:#53751b; }
html[data-theme] :is(.field,.field label,.field-label) { color:var(--muted-strong);font-size:12px; }
html[data-theme] :is(.input,.select,.field input,.field select,.field textarea,.search-box,.model-select,.mode-badge,.prompt-tools button) { color:var(--ink);background:var(--surface-soft);border-color:var(--line); }
html[data-theme] :is(.input,.select,.field input,.field select,.field textarea):focus { background:var(--surface-soft);border-color:var(--primary);box-shadow:0 0 0 3px #3366ff13; }
html[data-theme] .search-box input { color:var(--ink);background:transparent; }
html[data-theme] .search-box svg { color:var(--muted); }
html[data-theme] .search-box:focus-within { border-color:var(--primary);box-shadow:0 0 0 3px #3366ff13; }
html[data-theme] .switch-input { border-color:var(--line-strong)!important;background:var(--surface-strong)!important; }
html[data-theme] .switch-input:checked { border-color:var(--primary)!important;background:var(--primary)!important; }
html[data-theme] .switch-input::before { display:none; }
html[data-theme] .switch-input::after,
html[data-theme] .switch-input:checked::after { background:#fff;box-shadow:0 1px 4px #0003; }
html[data-theme] .category-tab { color:var(--muted-strong);background:var(--surface);border-color:var(--line); }
html[data-theme] .category-tab small { color:var(--muted); }
html[data-theme] .category-tab:hover { color:var(--ink);background:var(--surface-strong);border-color:var(--line-strong); }
html[data-theme] .category-tab.active { color:#e4edff;background:var(--primary-soft);border-color:var(--primary); }
html[data-theme="light"] .category-tab.active { color:var(--primary); }
html[data-theme] .category-tab.active svg { color:#82a4ff; }
html[data-theme] .category-tab.active small { color:#92afe9; }
html[data-theme] .filter-tabs button { color:var(--muted); }
html[data-theme] .filter-tabs button:hover { background:var(--surface);color:var(--ink); }
html[data-theme] .filter-tabs button.active { background:var(--primary-soft);border-color:#3366ff40;color:#8eafff; }
html[data-theme] .model-avatar { background:var(--surface-strong);border-color:var(--line);color:#9cb7eb; }
html[data-theme] .model-avatar.lime { background:#c7fa4517;border-color:#c7fa4520;color:var(--lime); }
html[data-theme] .model-avatar.peach { background:var(--coral-soft);border-color:#ff6a5520;color:var(--coral); }
html[data-theme] .model-avatar.blue { background:var(--primary-soft);border-color:#3366ff30;color:#85a5ff; }
html[data-theme] .model-avatar.mint { background:#79d9ff14;border-color:#79d9ff20;color:var(--cyan); }
html[data-theme] .model-avatar.pink { background:#e48dff16;border-color:#e48dff20;color:#de9df5; }
html[data-theme] .provider-mark { color:#dfe8fa;background:#111d34c9;border-color:#ffffff25; }
html[data-theme] .model-option-info > strong { color:var(--ink); }
html[data-theme] :is(.model-option-info > span,.model-option-info > em,.model-option-info strong small) { color:var(--muted); }
html[data-theme] .model-option-price { color:var(--muted-strong); }
html[data-theme] .model-option-price svg { color:var(--primary); }
html[data-theme] .model-option:hover { border-color:var(--line-strong);background:var(--surface-strong); }
html[data-theme] .arrow-circle { color:#8dafff;background:var(--primary-soft);border-color:#3366ff30; }
html[data-theme] .model-card .model-price > svg { color:var(--lime); }
html[data-theme] .visual-text { background:#192c53;color:#adc3f0; }
html[data-theme] .visual-text.blue { background:#173475; }
html[data-theme] .visual-text.mint { background:#143543; }
html[data-theme] .visual-text.peach { background:#472831; }
html[data-theme] .text-orbit,
html[data-theme] .visual-text.mint .text-orbit,
html[data-theme] .visual-text.peach .text-orbit { color:#d6e4ff;border-color:#ffffff38;box-shadow:none; }
html[data-theme] .visual-music,
html[data-theme] .visual-music.pink { background:#3b2342;color:#f8b8e0; }
html[data-theme] .visual-music.mint { background:#24351b;color:var(--lime); }
html[data-theme] .visual-music.peach { background:#492b25;color:#ffbda4; }
html[data-theme] .model-visual img { filter:none; }
html[data-theme] .visual-category { color:#fff!important;background:#090e1b60;border-color:#ffffff25;opacity:1; }
html[data-theme] .thumb-music { background:#24351b;color:var(--lime); }
html[data-theme] .thumb-text { background:#192c53;color:#c2d4ff; }
html[data-theme] .thumb-video { background:#182c43; }
html[data-theme] .work-thumbnail.thumb-video img { filter:none; }
html[data-theme] :is(.work-type,.sample-tag) { color:#e5edff;background:#0c1528ae;border-color:#ffffff25; }
html[data-theme] .music-disc { color:var(--lime);background:#17240de6;border-color:#c7fa4533; }
html[data-theme] .text-preview { color:#a9bfe9; }
html[data-theme] .empty-state { background:var(--surface);border-color:var(--line-strong); }
html[data-theme] .empty-state h3 { color:var(--ink); }
html[data-theme] .empty-state p,
html[data-theme] .empty-state > svg { color:var(--muted); }
html[data-theme] .balance-card { color:#e4ecff;background:linear-gradient(125deg,#1d3d89,#162852);border:1px solid #3366ff40; }
html[data-theme] .balance-card::after { display:none; }
html[data-theme] .balance-decoration { color:#5c8aff;opacity:.16; }
html[data-theme] .balance-card-header > span:first-child,
html[data-theme] .balance-card .eyebrow,
html[data-theme] .balance-card > p { color:#b9c9ee; }
html[data-theme] .balance-card .badge { color:#c5d5ff;border-color:#7ea5ff45;background:#618eff1c; }
html[data-theme] .balance-amount { color:var(--lime); }
html[data-theme] .balance-amount span { color:#b0c2e8; }
html[data-theme] .balance-details { border-color:#6d95f240;color:#bdcef3; }
html[data-theme] .balance-details p { color:#adc1e9; }
html[data-theme] .balance-details strong { color:#fff; }
html[data-theme] .balance-card .button { background:var(--lime);border-color:var(--lime);color:#1b2708; }
html[data-theme] .positive { color:var(--lime); }
html[data-theme="light"] .positive { color:#53751b; }
html[data-theme] .negative { color:var(--muted-strong); }
html[data-theme] .transaction-row.table-head { color:var(--muted); }
html[data-theme] .payment-method { color:var(--ink); }
html[data-theme] .payment-method strong { color:var(--ink); }
html[data-theme] .payment-method small { color:var(--muted); }
html[data-theme] .payment-method > svg { color:#8dafff; }
html[data-theme] .payment-method.selected > svg:last-child { color:#9ebaff; }
html[data-theme] .pack-selector button { color:var(--muted-strong); }
html[data-theme] .pack-selector button:hover { background:var(--surface-strong);border-color:var(--line-strong); }
html[data-theme] .pack-selector button.selected { color:var(--ink); }
html[data-theme] .order-summary strong { color:var(--ink); }
html[data-theme] .order-summary > div:last-child { border-color:var(--line);color:var(--ink); }
html[data-theme] :is(.demo-notice,.demo-notice p,.result-meta,.result-prompt p) { color:var(--muted); }
html[data-theme] .result-prompt { border-color:var(--line); }
html[data-theme] .result-music { color:#e9eeff;background:#192641; }
html[data-theme] .result-music h3 { color:var(--ink); }
html[data-theme] .result-music > .play-button { background:var(--lime);border-color:var(--lime);color:#1a2708; }
html[data-theme] .result-text { background:var(--surface-soft);color:var(--muted-strong); }
html[data-theme] .modal-backdrop { background:#020714b3;backdrop-filter:blur(9px); }
html[data-theme] .modal { box-shadow:0 30px 110px #0007;scrollbar-color:var(--line-strong) transparent; }
html[data-theme] .modal-close { color:var(--muted);border-color:var(--line);background:var(--surface-soft); }
html[data-theme] .modal-close:hover { color:var(--ink);border-color:var(--line-strong);background:var(--surface-strong); }
html[data-theme] .toast { color:var(--ink);background:#182641;border-color:#355183;box-shadow:0 10px 35px #02071455; }
html[data-theme] .toast svg { color:#8badff; }
html[data-theme] .toast.success { border-color:#c7fa4540; }
html[data-theme] .toast.success > svg { color:var(--lime); }
html[data-theme] .toast.error { color:#ffc5bc;border-color:#ff6a5545;background:#3b2028; }
html[data-theme] .toast.error > svg { color:var(--coral); }
html[data-theme] .generation-progress { background:var(--primary-soft);border-color:#3366ff35; }
html[data-theme] .generation-progress strong,
html[data-theme] .generation-progress > span { color:#a4beff; }
html[data-theme] .generation-progress p,
html[data-theme] .generation-progress small { color:var(--muted); }
html[data-theme] .progress-bar { background:var(--line); }
html[data-theme] .progress-fill { background:var(--primary); }
html[data-theme] .loading-dot { color:#8dafff; }
html[data-theme] kbd { color:var(--muted);background:var(--surface);border-color:var(--line); }

/* Template details: visual examples keep their own place in each workspace. */
.v2-text-link { display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;color:#8aabff;font-size:11px;font-weight:600;line-height:1.7; }
.v2-text-link:hover { color:#bad0ff; }
html[data-theme="light"] .v2-text-link { color:var(--primary); }
.v2-text-link svg { width:13px;height:13px; }
.v2-icon-button { display:grid;place-items:center;flex-shrink:0;width:31px;height:31px;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted); }
.v2-icon-button svg { width:16px;height:16px; }
.v2-icon-button:hover { color:var(--ink);background:var(--surface-strong);border-color:var(--line); }
.v2-icon-button.active { color:var(--lime);background:#c7fa4510;border-color:#c7fa4525; }
.v2-heading .v2-section-title { display:block;margin:6px 0 0;font-size:18px;font-weight:650;letter-spacing:-.035em;line-height:1.3; }
.v2-section-title > span { margin-left:4px;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0; }
.v2-title-dot { color:var(--primary); }
.v2-input,
.v2-select { display:block;width:100%;min-width:0;min-height:39px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--canvas);color:var(--ink);font-size:11px; }
.v2-input:focus,
.v2-select:focus { border-color:var(--primary);box-shadow:0 0 0 3px #3366ff12; }
.v2-model-button > span:nth-child(2) { flex:1;min-width:0; }
.v2-model-button strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.v2-model-button small { overflow-wrap:anywhere; }
.v2-model-symbol { display:grid;place-items:center;flex-shrink:0;width:31px;height:31px;border:1px solid #3366ff30;border-radius:8px;background:var(--primary-soft);color:#99b6ff;font-size:17px;font-weight:650; }
.tool-section > .v2-text-link { margin-top:8px; }
.tool-generate { margin-top:23px;padding-top:17px;border-top:1px solid var(--line); }
.tool-generate > .v2-button { width:100%;min-height:43px;font-size:11px; }
.tool-generate > .v2-button > svg:last-child { margin-left:auto; }
.tool-generate > .field-hint { display:block;text-align:center; }
.generation-price { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px;font-size:11px;color:var(--muted); }
.generation-price strong { display:flex;align-items:center;gap:4px;color:var(--lime);font-size:12px;font-weight:650; }
html[data-theme="light"] .generation-price strong { color:#53751b; }
.generation-price svg { width:12px;height:12px; }
.home-launch { justify-content:center;padding:25px; }
.home-launch > .v2-heading { margin-bottom:0; }
.home-launch .v2-heading > .v2-badge { font-size:11px; }
.home-launch .home-quick-nav { margin-top:22px; }
.home-prompt > small { display:block;margin-top:8px;font-size:11px;color:var(--muted); }
.feature-overlay { display:flex;flex-direction:column; }
.feature-tag { position:absolute;top:23px;left:24px;display:inline-flex;padding:5px 8px;border:1px solid #ffffff30;border-radius:5px;background:#090e1b22;color:#ffffffc4;font-size:11px;font-weight:650;letter-spacing:.1em;backdrop-filter:blur(8px); }
.feature-caption { width:100%; }
.v2-work-card { padding:0; }
.v2-work-image { display:block; }
.v2-work-type { display:inline-flex;position:absolute;left:9px;bottom:9px;align-items:center;gap:4px;padding:4px 6px;border:1px solid #ffffff2b;border-radius:5px;background:#090e1b80;color:#fff;font-size:11px;font-weight:550;line-height:1.4;backdrop-filter:blur(8px); }
.v2-work-type svg { width:10px;height:10px; }
.v2-work-info { display:grid;grid-template-columns:minmax(0,1fr) 13px;grid-template-rows:auto auto;gap:3px 6px; }
.v2-work-info > strong { grid-column:1;grid-row:1; }
.v2-work-info > small { grid-column:1;grid-row:2;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.v2-work-info > small span { padding:0 5px; }
.v2-work-info > svg { grid-column:2;grid-row:1/3; }
.compact-model > .compact-provider { display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;margin:0;border:1px solid #3366ff30;border-radius:8px;background:var(--primary-soft);color:#9eb9ff;font-size:16px;font-weight:650; }
.compact-model.type-image > .compact-provider { color:var(--coral);background:var(--coral-soft);border-color:#ff6a5525; }
.compact-model.type-music > .compact-provider { color:var(--lime);background:#c7fa4510;border-color:#c7fa4525; }
.compact-model.type-video > .compact-provider { color:var(--cyan);background:#79d9ff10;border-color:#79d9ff25; }
.compact-model > span:nth-child(2) { min-width:0; }
.compact-model > span:nth-child(2) small { display:block;overflow:hidden;margin-top:4px;color:var(--muted);font-size:11px;white-space:nowrap;text-overflow:ellipsis; }
.compact-model > .compact-price { display:flex;align-items:center;gap:5px; }
.compact-price svg { width:12px;height:12px;color:var(--muted); }
.home-note-icon { position:relative;display:grid;place-items:center;width:37px;height:37px;margin-bottom:21px;border-radius:10px;background:var(--primary);color:#fff;font-size:21px;font-weight:750;letter-spacing:-.08em; }
.home-note-icon > span { position:absolute;right:-5px;top:-4px;width:17px;height:17px;border:2px solid var(--surface);border-radius:5px;background:var(--lime);color:#213208;font-size:11px;line-height:13px;text-align:center; }
.home-side-note .v2-text-link { margin-top:17px; }
.aspect-icon { display:block;width:18px;height:18px;border:1.5px solid currentColor;border-radius:2px; }
.aspect-icon.ratio-16-9 { width:24px;height:14px; }
.aspect-icon.ratio-9-16 { width:14px;height:23px; }
.aspect-options strong { font-size:11px;font-weight:650; }
.aspect-options small { color:var(--muted);font-size:11px;font-weight:500; }
.aspect-options button.active small { color:#93afed; }
.v2-reference { flex-wrap:wrap;text-align:left; }
.v2-reference > strong { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.v2-reference > small { flex:0 0 100%;margin:0 0 0 30px; }
.canvas-area { padding:18px; }
.canvas-toolbar { gap:8px; }
.canvas-toolbar > div { gap:7px; }
.canvas-toolbar .v2-badge { font-size:11px; }
.canvas-status { display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime); }
.canvas-stage { position:relative;display:flex;align-items:center;justify-content:center;min-height:430px;padding:20px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#0b1324; }
html[data-theme="light"] .canvas-stage { background:#e8eefb; }
.canvas-frame { flex-shrink:0;width:min(100%,395px);min-height:0;max-height:none;aspect-ratio:1;border:0;border-radius:7px; }
.canvas-frame > img { height:100%;width:100%;max-height:none;object-fit:cover; }
.canvas-frame.portrait { width:min(100%,220px);aspect-ratio:9/16; }
.canvas-frame.portrait > img { width:100%; }
.canvas-frame.landscape { width:100%;min-height:0;aspect-ratio:16/9; }
.canvas-frame.landscape > img { object-fit:cover; }
.canvas-loading { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:20px;background:#090e1bc2;color:#fff;text-align:center;backdrop-filter:blur(9px); }
.canvas-loading strong { font-size:15px;font-weight:650; }
.canvas-loading small { color:#a7b6d3;font-size:11px; }
.v2-spinner { width:27px;height:27px;border:2px solid #ffffff25;border-top-color:#86a7ff;border-radius:50%;animation:v2-spin 850ms linear infinite; }
@keyframes v2-spin { to { transform:rotate(360deg); } }
.canvas-meta { align-items:center; }
.canvas-meta > div { min-width:0;display:flex;flex-direction:column;gap:4px; }
.canvas-meta > div strong { font-size:12px;font-weight:650;color:var(--ink); }
.canvas-meta > div span { color:var(--muted);font-size:11px; }
.canvas-meta > .v2-button { min-height:34px;padding:8px 10px;flex-shrink:0;font-size:11px; }
.gallery-strip { border-top:1px solid var(--line);padding-top:15px;margin-top:3px; }
.gallery-thumb { flex-basis:122px;height:84px; }
.gallery-thumb > span { position:absolute;left:7px;right:7px;bottom:6px;overflow:hidden;color:#fff;font-size:11px;text-shadow:0 1px 8px #000;white-space:nowrap;text-overflow:ellipsis; }
.gallery-thumb > svg { position:absolute;top:6px;right:6px;width:14px;height:14px;padding:2px;background:var(--primary);border-radius:50%;color:#fff; }
.music-form .segmented.music-tabs { margin:0;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--canvas);gap:4px; }
.music-form .music-tabs button { min-height:32px;padding:7px 5px;font-size:11px; }
.music-form .music-tabs button.active { background:var(--surface-strong);border-color:var(--line-strong);color:var(--ink); }
.music-form .music-tabs button.active::after { display:none; }
.music-form-duo { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.music-form-duo .tool-label { gap:4px;flex-wrap:wrap; }
.music-form-duo .tool-label > span { font-size:11px; }
.music-form-duo input[type="range"] { display:block;width:100%;height:38px;margin:0;accent-color:var(--primary);cursor:pointer; }
.music-preview-top { display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-bottom:26px; }
.music-preview-top .v2-kicker { font-size:11px; }
.music-preview-top .v2-badge { font-size:11px; }
.record-art { flex-shrink:0; }
.record-art > .record-label { position:absolute;left:16px;top:15px;display:block;color:#fff;font-size:22px;line-height:1.1;letter-spacing:-.04em;text-align:left;text-shadow:0 1px 12px #0002; }
.record-art > .record-label small { display:block;margin-top:5px;font-size:6px;font-weight:550;letter-spacing:.16em; }
.record-art > .record-type { position:absolute;left:16px;bottom:15px;color:#ffffffc9;font-size:11px;letter-spacing:.15em; }
.record-details { min-width:0;max-width:100%; }
.record-title { overflow-wrap:anywhere; }
.record-model > span { padding-inline:6px; }
.music-preview.is-playing .music-wave > i { animation:music-wave-pulse 900ms calc(var(--i,0)*-43ms) ease-in-out infinite alternate; }
.music-preview > .music-bottom-note { display:block;margin-top:18px;font-size:11px;text-align:center; }
.music-transport > .v2-icon-button { border:1px solid transparent; }
.music-transport > .v2-icon-button:hover { background:var(--surface-strong);border-color:var(--line); }
.track-list > .v2-heading { margin:13px 0 4px; }
.track-list .v2-section-title { margin:0;font-size:15px; }
.track-cover { position:relative; }
.track-cover > span { display:grid;position:absolute;inset:0;place-items:center;background:#090e1b25;color:#fff; }
.track-cover > span svg { width:15px;height:15px;filter:drop-shadow(0 1px 4px #0008); }
.track-meta { padding:0;border:0;background:transparent;text-align:left; }
.track-meta small span { padding:0 5px; }
.track-meta:hover strong { color:#9cb8ff; }

/* Room for content at laptop, tablet and phone widths. */
@media (min-width:1700px) {
  html[data-theme] .workspace { margin-right:auto; }
  .home-feature { min-height:410px; }
  .canvas-frame { max-height:660px; }
}
@media (max-width:1280px) {
  html[data-theme] .workspace { padding-inline:28px; }
  .home-layout { grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:20px; }
  .home-greeting { font-size:40px; }
  .home-quick-nav { gap:7px; }
  .quick-tile { padding-inline:10px; }
  .quick-desc { font-size:11px; }
  .quick-arrow { display:none; }
  .home-feature { min-height:365px; }
  .home-bottom { grid-template-columns:minmax(0,1fr) 220px;gap:20px; }
  .v2-work-image { height:122px; }
  .home-model-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .creative-layout { grid-template-columns:285px minmax(0,1fr);gap:18px; }
  .creation-sidebar { padding:20px 18px; }
  .music-layout { grid-template-columns:300px minmax(0,1fr);gap:18px; }
  .music-form { padding:20px 18px; }
  .canvas-frame { min-height:360px;aspect-ratio:1.05; }
  .record-art { width:170px;height:170px; }
}
@media (max-width:1080px) {
  html[data-theme] .workspace { padding-inline:24px; }
  .home-layout { grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:19px; }
  .home-greeting { font-size:34px; }
  .home-quick-nav { grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px; }
  .quick-tile { min-height:80px;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:end;gap:3px 10px;padding:12px; }
  .quick-icon { grid-row:1/3;margin:0;align-self:center; }
  .quick-label { align-self:end; }
  .quick-desc { align-self:start; }
  .home-feature { min-height:410px; }
  .feature-caption { padding:23px 19px; }
  .feature-caption h2 { font-size:25px; }
  .home-bottom { grid-template-columns:minmax(0,1fr); }
  .home-side-note { display:grid;grid-template-columns:1fr auto;gap:5px 20px;align-items:center;padding:19px 20px; }
  .home-side-note > svg { display:none; }
  .home-side-note h3 { font-size:15px; }
  .home-side-note p { margin:0;grid-column:1; }
  .home-side-note .v2-button { grid-column:2;grid-row:1/3;margin:0; }
  .v2-work-image { height:140px; }
  .creative-layout { grid-template-columns:255px minmax(0,1fr);gap:16px; }
  .creation-sidebar { padding:18px 15px; }
  .tool-section { margin-bottom:19px; }
  .v2-model-button { gap:8px;padding:10px; }
  .v2-model-button strong { font-size:11px; }
  .v2-model-button small { font-size:11px; }
  .canvas-frame { min-height:360px;max-height:520px;aspect-ratio:.85; }
  .canvas-frame.landscape { min-height:280px;aspect-ratio:1.2; }
  .canvas-meta { align-items:flex-start;flex-direction:column;gap:5px; }
  .canvas-actions { gap:6px;flex-wrap:wrap; }
  .canvas-actions .v2-button { font-size:11px;padding-inline:9px; }
  .music-layout { grid-template-columns:270px minmax(0,1fr);gap:16px; }
  .music-form { padding:18px 15px; }
  .music-preview { padding:25px 19px 21px; }
  .record-title { font-size:23px; }
  .record-art { width:158px;height:158px; }
  .music-wave { gap:2px; }
}
@media (max-width:900px) {
  html[data-theme] .workspace { padding-inline:22px; }
  .home-layout { grid-template-columns:1fr;gap:18px; }
  .home-launch { padding:6px 0 0; }
  .home-greeting { font-size:40px;max-width:580px; }
  .home-quick-nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .quick-tile { display:flex;align-items:flex-start;min-height:110px;gap:5px; }
  .quick-icon { align-self:auto;margin-bottom:5px; }
  .quick-desc { font-size:11px; }
  .home-feature { min-height:225px; }
  .feature-photo img { object-position:center 40%; }
  .feature-overlay { background:linear-gradient(90deg,#090e1bc9 0%,#090e1b22 90%); }
  .feature-caption { padding:25px; }
  .feature-caption h2 { max-width:230px;font-size:26px; }
  .creative-layout { grid-template-columns:1fr;gap:22px; }
  .creation-sidebar { display:grid;grid-template-columns:1fr 1fr;gap:19px 18px;padding:22px;align-items:start; }
  .creation-sidebar > .tool-section { margin:0; }
  .creation-sidebar > .v2-button,
  .creation-sidebar > .field-hint { align-self:end;margin:0; }
  .canvas-frame { aspect-ratio:1.3;min-height:350px;max-height:550px; }
  .canvas-frame.landscape { aspect-ratio:1.5; }
  .canvas-meta { flex-direction:row; }
  .canvas-actions { justify-content:flex-start; }
  .music-layout { grid-template-columns:1fr;gap:21px; }
  .music-form { display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:20px;padding:22px; }
  .music-form > .music-tabs { grid-column:1/-1;margin-bottom:0; }
  .music-form > .tool-section { margin:0; }
  .music-form > .v2-button { align-self:end; }
  .music-form > .field-hint { margin:0; }
  .record-art { width:190px;height:190px; }
  .music-preview { padding:27px 30px 23px; }
}
@media (max-width:820px) {
  html[data-theme] { --sidebar-width:230px; }
  html[data-theme] .sidebar { transform:translateX(-100%);padding:27px 16px 20px;box-shadow:18px 0 70px #02071455; }
  html[data-theme] .sidebar.is-open,
  html[data-theme] .sidebar.open { transform:translateX(0); }
  html[data-theme] .workspace { margin-left:0;max-width:none;padding:22px 26px 28px; }
  html[data-theme] .topbar { margin-bottom:27px; }
  html[data-theme] .mobile-menu { display:grid; }
  .home-layout { grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:20px; }
  .home-launch { padding:13px 0; }
  .home-greeting { font-size:36px; }
  .home-quick-nav { grid-template-columns:repeat(2,minmax(0,1fr));margin-top:22px; }
  .quick-tile { min-height:81px;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:3px 9px;padding:11px; }
  .quick-icon { grid-row:1/3;margin:0;align-self:center; }
  .quick-label { font-size:11px; }
  .quick-desc { font-size:11px; }
  .home-prompt { margin-top:17px; }
  .home-feature { min-height:360px; }
  .feature-overlay { background:linear-gradient(180deg,#090e1b00 20%,#090e1b22 45%,#090e1bcc 100%); }
  .feature-caption { padding:24px 20px; }
  .feature-caption h2 { font-size:26px; }
  .creative-layout { grid-template-columns:280px minmax(0,1fr);gap:17px; }
  .creation-sidebar { display:block;padding:20px 18px; }
  .creation-sidebar > .tool-section { margin-bottom:21px; }
  .canvas-frame { aspect-ratio:.85;min-height:370px; }
  .canvas-frame.landscape { aspect-ratio:1.2;min-height:250px; }
  .canvas-meta { flex-direction:column;gap:5px; }
  .music-layout { grid-template-columns:290px minmax(0,1fr);gap:17px; }
  .music-form { display:block;padding:20px 18px; }
  .music-form > .music-tabs { margin-bottom:22px; }
  .music-form > .tool-section { margin-bottom:21px; }
  .music-form > .field-hint { margin-top:8px; }
  .music-preview { padding:25px 20px 22px; }
  .record-art { width:165px;height:165px; }
}
@media (max-width:650px) {
  html[data-theme] .workspace { padding:17px 18px 24px; }
  html[data-theme] .topbar { min-height:36px;margin-bottom:26px;gap:10px; }
  html[data-theme] .breadcrumbs { gap:8px;font-size:11px; }
  html[data-theme] .breadcrumbs > span:first-of-type,
  html[data-theme] .breadcrumb-divider { display:none; }
  html[data-theme] .topbar-actions { gap:7px; }
  html[data-theme] .topbar-actions > .demo-badge { display:none; }
  html[data-theme] .credit-pill { min-height:33px;height:33px;padding-inline:9px;gap:5px;font-size:11px; }
  html[data-theme] .credit-pill > span:not(.credit-plus) { display:none; }
  html[data-theme] .credit-plus { width:17px;height:17px;margin-left:2px; }
  html[data-theme] .topbar-actions > .avatar.small { width:31px;height:31px;margin-left:0; }
  html[data-theme] .icon-btn { width:33px;height:33px; }
  html[data-theme] .workspace-footer { flex-direction:column;align-items:flex-start;gap:7px;margin-top:26px;font-size:11px; }
  .v2-intro { align-items:flex-start;gap:15px;margin-bottom:21px; }
  .v2-intro > .v2-button { min-height:33px;padding:8px 10px;font-size:11px; }
  .v2-kicker { font-size:11px;letter-spacing:.1em; }
  .v2-title { margin-top:7px;font-size:28px;letter-spacing:-.045em; }
  .v2-subtitle { margin-top:8px;font-size:11px;line-height:1.8; }
  .v2-heading,
  .v2-section-title { gap:12px;margin-bottom:13px; }
  .v2-heading h2,
  .v2-section-title h2 { font-size:17px; }
  .v2-heading > span,
  .v2-section-title > span { font-size:11px; }
  .v2-section { margin-top:25px; }
  .v2-button { min-height:39px;font-size:11px;padding:10px 13px; }
  .v2-inline-actions { gap:6px; }
  .v2-inline-actions .v2-button { font-size:11px;min-height:32px;padding:7px 9px; }
  .home-layout { grid-template-columns:1fr;gap:21px; }
  .home-launch { padding:2px 0 0; }
  .home-greeting { max-width:430px;margin-top:10px;font-size:36px;line-height:1.13; }
  .home-launch > p { max-width:330px;font-size:12px;margin-top:13px; }
  .home-quick-nav { grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:23px; }
  .quick-tile { display:flex;align-items:flex-start;gap:5px;min-height:101px;padding:12px 9px 10px; }
  .quick-icon { width:29px;height:29px;align-self:auto;margin-bottom:5px; }
  .quick-icon svg { width:16px;height:16px; }
  .quick-label { font-size:11px; }
  .quick-desc { font-size:11px;line-height:1.4; }
  .home-prompt { margin-top:20px; }
  .home-prompt-row { min-height:50px; }
  .home-prompt-row input { font-size:11px; }
  .home-prompt-row button { width:33px;height:33px; }
  .home-feature { min-height:245px; }
  .feature-photo img { object-position:center 35%; }
  .feature-overlay { background:linear-gradient(90deg,#090e1bcd 0%,#090e1b22 100%); }
  .feature-caption { padding:24px;gap:9px; }
  .feature-caption h2 { max-width:210px;font-size:26px; }
  .feature-caption > span { font-size:11px; }
  .feature-caption p { font-size:11px;max-width:210px; }
  .home-bottom { margin-top:25px;gap:20px; }
  .v2-work-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .v2-work-grid .v2-work-card:nth-child(3) { display:none; }
  .v2-work-image { height:132px; }
  .v2-work-info { padding:11px; }
  .v2-work-info strong { font-size:11px; }
  .v2-work-info small { font-size:11px; }
  .home-side-note { display:block;padding:20px; }
  .home-side-note p { margin-top:7px; }
  .home-side-note .v2-button { margin-top:15px; }
  .home-model-strip { gap:9px; }
  .compact-model { gap:9px;padding:12px 10px; }
  .compact-model > .model-avatar { width:27px;height:27px;font-size:13px; }
  .compact-model strong { font-size:11px; }
  .compact-provider { font-size:11px; }
  .compact-price { display:none; }
  .creative-toolbar { align-items:flex-start;gap:12px;margin-bottom:16px; }
  .creative-toolbar > p { font-size:11px; }
  .creative-layout { grid-template-columns:1fr;gap:23px; }
  .creation-sidebar { padding:20px; }
  .creation-sidebar > .tool-section { margin-bottom:21px; }
  .aspect-options button { min-height:65px;flex-direction:row;gap:8px; }
  .v2-textarea { min-height:113px;font-size:12px; }
  .canvas-toolbar { margin-bottom:11px;min-height:32px; }
  .canvas-toolbar > div,
  .canvas-toolbar > span { font-size:11px; }
  .canvas-frame { aspect-ratio:1.05;min-height:290px;max-height:480px; }
  .canvas-frame.landscape { min-height:220px;aspect-ratio:1.35; }
  .canvas-frame.portrait { aspect-ratio:.85; }
  .canvas-meta { flex-direction:row;flex-wrap:wrap;gap:5px 12px;padding-block:12px;font-size:11px; }
  .canvas-actions { justify-content:flex-start;gap:7px;padding-top:11px; }
  .canvas-actions .v2-button { min-height:34px;padding:8px 10px;font-size:11px; }
  .gallery-strip { margin-top:19px;gap:8px; }
  .gallery-thumb { flex-basis:68px;height:58px; }
  .canvas-demo-note { font-size:11px; }
  .music-layout { grid-template-columns:1fr;gap:23px; }
  .music-form { padding:20px; }
  .music-preview { padding:27px 24px 22px; }
  .record-art { width:185px;height:185px; }
  .record-title { font-size:25px; }
  .music-wave { gap:3px;margin-top:21px; }
  .music-transport { gap:24px; }
  .track-list { padding-inline:12px;margin-top:16px; }
  .track-row.active::before { left:-12px; }
  .track-meta strong,
  .track-meta button { font-size:11px; }
  .track-meta small { font-size:11px; }
  .track-duration { font-size:11px; }
  .music-bottom-note { font-size:11px; }
  html[data-theme] .page-title { font-size:29px; }
  html[data-theme] .page-subtitle { font-size:12px;max-width:360px; }
  html[data-theme] .page-intro { flex-wrap:wrap; }
  html[data-theme] .balance-layout { grid-template-columns:1fr; }
  html[data-theme] .plans-grid { grid-template-columns:1fr;gap:19px; }
  html[data-theme] .plan-card { padding:25px; }
  html[data-theme] .plan-card .button { width:100%; }
  html[data-theme] .plan-card ul { grid-template-columns:1fr; }
  html[data-theme] .packages-grid { grid-template-columns:1fr;gap:13px; }
  html[data-theme] .package-card { padding:23px; }
  html[data-theme] .profile-summary { display:flex;gap:0;align-items:center;text-align:center; }
  html[data-theme] .profile-summary .avatar { margin-bottom:15px; }
  html[data-theme] .profile-summary .button { margin-top:18px;width:100%; }
  html[data-theme] .profile-fields .settings-group { padding:21px; }
  html[data-theme] .form-grid { grid-template-columns:1fr; }
  html[data-theme] .settings-actions { flex-direction:column;align-items:stretch;gap:14px; }
  html[data-theme] .settings-actions .button { width:100%; }
  html[data-theme] .transaction-row { grid-template-columns:minmax(0,1fr) 65px 68px;gap:10px; }
  html[data-theme] .transaction-row.table-head { font-size:11px; }
  html[data-theme] .transaction-name { font-size:11px;gap:8px; }
  html[data-theme] .transaction-name small { font-size:11px; }
  html[data-theme] .transaction-date { font-size:11px; }
  html[data-theme] .transaction-row > strong { font-size:11px; }
  html[data-theme] .tx-icon { width:28px;height:28px; }
  html[data-theme] .panel.transaction-panel { padding:20px 15px; }
  html[data-theme] .toast-container { right:18px;bottom:18px; }
}
@media (max-width:380px) {
  html[data-theme] .workspace { padding-inline:14px; }
  html[data-theme] .topbar-actions { gap:6px; }
  html[data-theme] .breadcrumbs { gap:6px;font-size:11px; }
  html[data-theme] .topbar-actions > .avatar.small { display:none; }
  .home-greeting { font-size:32px; }
  .home-quick-nav { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .quick-tile { display:grid;min-height:77px;grid-template-columns:29px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:3px 9px;padding:10px; }
  .quick-icon { grid-row:1/3;align-self:center;margin:0; }
  .quick-label { font-size:11px; }
  .quick-desc { font-size:11px; }
  .feature-caption { padding:22px 20px; }
  .v2-work-image { height:117px; }
  .v2-heading h2 { font-size:16px; }
  .v2-work-info strong { font-size:11px; }
  .creation-sidebar,.music-form { padding:18px; }
  .canvas-frame { min-height:260px; }
  .canvas-actions { display:grid;grid-template-columns:1fr 1fr; }
  .canvas-actions .v2-button:last-child { grid-column:1/-1; }
  .record-art { width:170px;height:170px; }
  .record-title { font-size:23px; }
  .music-preview { padding-inline:20px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}

/* Final responsive alignment for the real templates. */
.home-launch { padding:25px; }
.home-launch .home-prompt-row .v2-button { min-height:36px;padding:0; }
.home-launch .v2-heading { flex-wrap:wrap;gap:8px; }
.canvas-frame { min-height:0;max-height:none;aspect-ratio:1;width:min(100%,395px); }
.canvas-frame.landscape { min-height:0;max-height:none;aspect-ratio:16/9;width:100%; }
.canvas-frame.portrait { min-height:0;max-height:none;aspect-ratio:9/16;width:min(100%,220px); }
.canvas-frame > img { display:block;width:100%;height:100%;max-height:none;object-fit:cover; }
.canvas-meta > div { flex:1; }
.home-model-strip .compact-model > .compact-provider { display:grid; }
@media (min-width:1081px) {
  .record-art { width:210px;height:210px; }
}
@media (max-width:1080px) {
  .canvas-stage { min-height:380px;padding:17px; }
  .canvas-frame { width:min(100%,345px); }
  .canvas-frame.portrait { width:min(100%,195px); }
  .home-side-note .home-note-icon { display:none; }
  .home-side-note .v2-text-link { grid-column:2;grid-row:1/3;margin:0; }
}
@media (max-width:900px) {
  .home-launch { padding:23px; }
  .creation-sidebar > .tool-generate { grid-column:1/-1;margin-top:0; }
  .music-form > .tool-generate { grid-column:1/-1;margin-top:0; }
}
@media (max-width:820px) and (min-width:651px) {
  .home-launch { padding:21px; }
  .home-launch .home-quick-nav { margin-top:19px; }
  .canvas-stage { min-height:350px;padding:12px; }
  .canvas-frame.portrait { width:min(100%,178px); }
  .canvas-meta { align-items:stretch; }
  .canvas-meta > .v2-button { align-self:flex-start; }
}
@media (max-width:650px) {
  .home-launch { padding:20px 17px; }
  .home-launch > .v2-heading > .v2-kicker { font-size:11px; }
  .home-launch > .v2-heading > .v2-badge { font-size:11px; }
  .home-launch .home-quick-nav { margin-top:18px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .home-launch .quick-tile { display:grid;grid-template-columns:29px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 9px;min-height:87px;padding:12px 10px; }
  .home-launch .quick-icon { grid-row:1/3;align-self:center;margin:0; }
  .home-launch .quick-label { font-size:11px; }
  .home-launch .quick-desc { font-size:11px;line-height:1.5; }
  .home-launch .home-prompt { margin-top:18px; }
  .home-feature { min-height:255px; }
  .feature-tag { top:19px;left:21px;font-size:11px; }
  .feature-caption { padding:24px 21px; }
  .v2-heading .v2-section-title { font-size:17px; }
  .home-side-note .home-note-icon { display:none; }
  .home-side-note .v2-text-link { margin-top:15px; }
  .v2-work-grid .v2-work-card:nth-child(3) { display:block; }
  .v2-work-grid { grid-template-columns:1fr; }
  .v2-work-card { display:grid;grid-template-columns:94px minmax(0,1fr);align-items:center;min-height:86px; }
  .v2-work-image { height:86px; }
  .v2-work-info { padding:13px; }
  .v2-work-info strong { font-size:12px;white-space:normal;line-height:1.4; }
  .v2-work-info small { font-size:11px;margin-top:3px; }
  .v2-work-type { left:6px;bottom:6px;padding:3px 4px;font-size:11px; }
  .v2-work-type svg { width:9px;height:9px; }
  .home-model-strip { grid-template-columns:1fr 1fr; }
  .home-model-strip .compact-model { padding:12px 10px;gap:9px; }
  .compact-model > .compact-provider { flex-basis:27px;width:27px;height:27px;font-size:14px; }
  .home-model-strip .compact-price { display:none; }
  .home-model-strip .compact-model strong { font-size:11px; }
  .compact-model > span:nth-child(2) small { font-size:11px; }
  .canvas-area { padding:15px; }
  .canvas-stage { min-height:290px;padding:12px; }
  .canvas-frame { min-height:0;max-height:none;aspect-ratio:1;width:min(100%,350px); }
  .canvas-frame.landscape { min-height:0;max-height:none;aspect-ratio:16/9;width:100%; }
  .canvas-frame.portrait { min-height:0;max-height:none;aspect-ratio:9/16;width:min(100%,180px); }
  .canvas-meta { align-items:flex-start;flex-direction:column;gap:12px; }
  .canvas-meta > div { flex:auto; }
  .canvas-meta > div strong { font-size:12px; }
  .canvas-meta > div span { font-size:11px;line-height:1.7; }
  .gallery-thumb { flex-basis:112px;height:80px; }
  .canvas-toolbar .v2-badge { max-width:135px;font-size:11px; }
  .canvas-toolbar > div:first-child { gap:5px;flex-wrap:wrap; }
  .canvas-toolbar .v2-inline-actions { gap:2px;flex-wrap:nowrap; }
  .canvas-toolbar .v2-icon-button { width:27px;height:27px; }
  .aspect-options button { flex-direction:column;min-height:76px;gap:7px; }
  .music-form .segmented.music-tabs { margin-bottom:0; }
  .music-preview-top { margin-bottom:23px;gap:6px; }
  .music-preview-top .v2-kicker { font-size:11px; }
  .music-preview-top .v2-badge { font-size:11px; }
  .music-preview > .music-bottom-note { margin-top:17px;font-size:11px;line-height:1.8; }
  .track-list .v2-heading { gap:8px; }
  .track-list .v2-section-title { font-size:15px;margin:0; }
  .track-list .v2-text-link { font-size:11px; }
  .track-meta { min-width:0; }
}
@media (max-width:380px) {
  .home-launch { padding:18px 14px; }
  .home-launch .quick-tile { padding-inline:8px;gap:3px 7px; }
  .home-launch .quick-label { font-size:11px; }
  .home-launch .quick-desc { font-size:11px; }
  .home-model-strip { grid-template-columns:1fr; }
  .home-model-strip .compact-price { display:flex; }
  .canvas-area { padding:12px; }
  .canvas-frame { min-height:0; }
  .canvas-stage { min-height:250px;padding:9px; }
  .canvas-frame.portrait { width:min(100%,164px); }
  .music-preview { padding-inline:17px; }
  .track-list { padding-inline:10px; }
  .track-row { gap:9px; }
  .track-cover { width:40px;height:40px; }
  .track-meta strong { font-size:11px; }
  .track-meta small { font-size:11px; }
  .track-duration { font-size:11px; }
  .track-action { width:23px;height:26px; }
}