/* MAIZAO V6.2.6 unified light interface */
:root {
  color-scheme: light;
  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel-2: #f4f4f6;
  --panel-3: #ededf0;
  --line: rgba(31, 31, 35, .105);
  --line-strong: rgba(31, 31, 35, .18);
  --text: #202124;
  --muted: #6f7077;
  --dim: #92939a;
  --blue: #6d5dfc;
  --blue-2: #6551d4;
  --blue-soft: rgba(109, 93, 252, .105);
  --cyan: #2f9fae;
  --cyan-soft: rgba(47, 159, 174, .1);
  --orange: #aa641d;
  --green: #168b68;
  --red: #c84f5d;
  --mz-sidebar: 220px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

html, body {
  color: var(--text);
  background:
    radial-gradient(circle at 78% -8%, rgba(117, 94, 255, .075), transparent 26%),
    radial-gradient(circle at 18% 105%, rgba(53, 171, 196, .05), transparent 30%),
    var(--bg);
}

body { min-height: 100vh; }
button, input, textarea, select { font-family: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(109, 93, 252, .18);
  outline-offset: 2px;
}
label, .field > span, .range-field > span { color: #62636a; }
input, textarea, select,
.field input, .field textarea, .field select,
.custom-blueprint input, .custom-blueprint textarea,
.viral-reverse-prompt textarea, .viral-master-prompt textarea {
  color: #292a2e;
  border-color: var(--line);
  background: #f5f5f7;
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: #a0a1a7; }
input:focus, textarea:focus, select:focus,
.field input:focus, .field textarea:focus, .field select:focus {
  color: #202124;
  border-color: rgba(109,93,252,.48);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(109,93,252,.085);
}

/* Shared application shell */
.app-shell {
  grid-template-columns: var(--mz-sidebar) minmax(0, 1fr);
  background: transparent;
  transition: grid-template-columns .28s cubic-bezier(.2,.8,.2,1);
}
.workspace, .suite-main { background: transparent; }
.sidebar, .suite-sidebar {
  border-color: var(--line);
  background: rgba(250, 250, 251, .88);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
  backdrop-filter: blur(30px) saturate(145%);
  box-shadow: none;
  transition: width .28s cubic-bezier(.2,.8,.2,1), padding .28s cubic-bezier(.2,.8,.2,1);
}
.sidebar { gap: 10px; padding: 20px 12px 14px; }
.suite-sidebar { width: var(--mz-sidebar); padding: 20px 12px 16px; }
.brand, .suite-brand { gap: 11px; padding: 2px 8px 22px; }
.brand-mark, .suite-brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  transform: none;
  box-shadow: 0 12px 28px rgba(84, 71, 202, .18);
}
.brand-mark svg, .suite-brand-mark svg { width: 100%; height: 100%; display: block; }
.brand strong, .suite-brand strong { color: #1f2023; font-size: 18px; font-weight: 720; letter-spacing: -.025em; }
.brand span, .suite-brand span { margin-top: 3px; color: #92939a; font-size: 8px; letter-spacing: .28em; }
.primary-nav, .suite-nav { gap: 4px; }
.nav-item, .suite-nav button {
  min-height: 43px;
  height: 43px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  color: #64656c;
  background: transparent;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 510;
  letter-spacing: -.01em;
}
.nav-item:hover, .support-link:hover, .suite-nav button:hover { color: #242529; background: rgba(31,31,35,.045); }
.nav-item.active, .suite-nav button.active {
  color: #403486;
  background: linear-gradient(105deg, rgba(109,93,252,.125), rgba(81,138,235,.055));
  box-shadow: inset 2px 0 0 #7664f7;
}
.nav-icon, .suite-nav i { width: 21px; height: 21px; flex: 0 0 21px; color: #85868d; font-size: 0; }
.nav-icon svg, .suite-nav i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active .nav-icon, .suite-nav .active i { color: #6652d6; }
.nav-new { color: #644dcc; background: #eeeaff; font-size: 8px; }
.sidebar-spacer, .suite-sidebar-spacer { min-height: 10px; }
.credit-card, .suite-credit {
  border-color: rgba(109,93,252,.17);
  border-radius: 16px;
  color: #2e2a4f;
  background: linear-gradient(145deg, #f1efff, #edf4ff);
  box-shadow: 0 12px 30px rgba(71,66,143,.055);
}
.credit-card { padding: 14px; }
.credit-card .credit-label, .credit-card span:last-child, .suite-credit span, .suite-credit small { color: #777484; }
.credit-card strong, .suite-credit strong { color: #2f2957; }
.support-link, .account-chip, .suite-test {
  border-color: var(--line);
  color: #65666d;
  background: rgba(255,255,255,.72);
}
.support-link { min-height: 40px; font-size: 11px; }
.account-chip { padding: 9px; border-radius: 13px; }
.account-avatar { color: #6551d4; background: #efecff; }
.account-chip strong, .suite-test strong { color: #35363a; font-size: 11px; }
.account-chip span { color: #8d8e95; font-size: 8px; }

.mz-sidebar-toggle {
  position: absolute;
  z-index: 30;
  top: 27px;
  right: -14px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(31,31,35,.12);
  border-radius: 50%;
  color: #6f7077;
  background: rgba(255,255,255,.92);
  box-shadow: 0 7px 24px rgba(30,31,39,.1);
  cursor: pointer;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.mz-sidebar-toggle:hover { color: #5140b1; background: #fff; transform: scale(1.06); }
.mz-sidebar-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s ease; }

html.mz-sidebar-collapsed .app-shell,
html.mz-sidebar-collapsed .suite-app { grid-template-columns: 72px minmax(0,1fr); }
html.mz-sidebar-collapsed .suite-sidebar { width: 72px; padding-inline: 9px; }
html.mz-sidebar-collapsed .sidebar { padding-inline: 9px; }
html.mz-sidebar-collapsed .brand,
html.mz-sidebar-collapsed .suite-brand { justify-content: center; padding-inline: 0; }
html.mz-sidebar-collapsed .brand > div:last-child,
html.mz-sidebar-collapsed .suite-brand > div,
html.mz-sidebar-collapsed .credit-card,
html.mz-sidebar-collapsed .suite-credit,
html.mz-sidebar-collapsed .support-link,
html.mz-sidebar-collapsed .suite-test,
html.mz-sidebar-collapsed .account-chip > div:last-child,
html.mz-sidebar-collapsed .nav-new { display: none; }
html.mz-sidebar-collapsed .nav-item,
html.mz-sidebar-collapsed .suite-nav button { justify-content: center; padding: 0; gap: 0; font-size: 0; }
html.mz-sidebar-collapsed .nav-item .nav-icon,
html.mz-sidebar-collapsed .suite-nav i { width: 22px; height: 22px; flex-basis: 22px; }
html.mz-sidebar-collapsed .account-chip { justify-content: center; padding: 7px; }
html.mz-sidebar-collapsed .mz-sidebar-toggle svg { transform: rotate(180deg); }
html.mz-sidebar-collapsed [data-nav-label] { position: relative; }
html.mz-sidebar-collapsed [data-nav-label]:hover::after {
  content: attr(data-nav-label);
  position: absolute;
  z-index: 100;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 10px;
  border: 1px solid rgba(31,31,35,.1);
  border-radius: 9px;
  color: #303136;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 30px rgba(30,31,39,.12);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 560;
}

/* Top navigation */
.topbar, .suite-topbar {
  border-color: var(--line);
  background: rgba(250,250,251,.82);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
}
.topbar { height: 62px; padding: 0 22px; }
.topbar-kicker, .suite-topbar-title span { color: #92939a; font-family: "SFMono-Regular", "SF Mono", Menlo, monospace; font-size: 9px; }
.topbar strong, .suite-topbar-title strong { color: #2a2b2f; font-weight: 650; }
.service-status, .test-mode-badge, .model-status, .test-pill {
  color: #686970;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.76);
}
.service-status.online, .model-status.online, .test-mode-badge, .test-pill { color: #147759; border-color: rgba(22,139,104,.2); }
.ghost-button, .secondary-button, .text-button, .secondary-action, .ghost-action {
  color: #5f6067;
  border-color: var(--line);
  background: rgba(255,255,255,.78);
}
.ghost-button:hover, .secondary-button:hover, .text-button:hover { color: #292a2e; border-color: rgba(109,93,252,.24); background: #fff; }

/* Studio and configuration */
.mode-tabs, .stepbar { border-color: var(--line); background: rgba(255,255,255,.8); }
.mode-tabs { min-height: 54px; padding: 8px 18px; }
.mode-tabs button { color: #74757c; border-radius: 10px; font-size: 11px; }
.mode-tabs button:hover { color: #2b2c30; background: #f2f2f4; }
.mode-tabs button.active { color: #40358c; border-color: rgba(109,93,252,.15); background: #eeebff; box-shadow: none; }
.stepbar { min-height: 55px; }
.stepbar button { color: #8b8c93; font-size: 10px; }
.stepbar button span { color: #76777e; background: #ececef; }
.stepbar button i { background: #dddde1; }
.stepbar button.active { color: #35363a; }
.stepbar button.active span { color: #fff; background: #6d5dfc; box-shadow: 0 0 0 5px rgba(109,93,252,.09); }
.stepbar button.done { color: #5e52a7; }
.stepbar button.done span { color: #5e4bc6; background: #eae6ff; }
.studio-layout { grid-template-columns: 310px minmax(500px,1fr) 246px; background: #f6f6f7; }
.config-panel, .preview-panel { color: var(--text); background: rgba(255,255,255,.84); }
.config-panel { border-color: var(--line); padding: 21px 18px 30px; }
.preview-panel { border-color: var(--line); }
.mode-heading > span, .modal-kicker { color: #6752d5; }
.mode-heading h1, .stage-header h2, .view-heading h1 { color: #242529; letter-spacing: -.035em; }
.mode-heading p, .stage-header p { color: var(--muted); }
.dropzone {
  border-color: rgba(78,79,86,.22);
  background: radial-gradient(circle at 50% 25%, rgba(109,93,252,.07), transparent 44%), #fafafa;
}
.dropzone:hover { border-color: rgba(109,93,252,.45); background: #f7f5ff; }
.upload-icon { color: #6551d4; border-color: rgba(109,93,252,.22); background: #ece8ff; }
.dropzone small { color: #96979e; }
.reference-thumb, .add-reference { border-color: var(--line); background: #f0f0f2; }
.upload-state { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(37,38,43,.72); }
.upload-state.ready { color: #e8fff5; border-color: rgba(65,190,145,.3); background: rgba(20,116,82,.78); }
.auto-analysis-card { border-color: rgba(47,159,174,.17); color: #3f4850; background: linear-gradient(135deg,rgba(47,159,174,.075),rgba(109,93,252,.05)); }
.auto-analysis-card.done { border-color: rgba(22,139,104,.2); background: #edf9f4; }
.auto-analysis-card.error { border-color: rgba(183,112,32,.22); background: #fff7ec; }
.auto-analysis-icon { color: #6551d4; background: #eae7ff; }
label { color: #606168; }
input, textarea, select {
  color: #26272b;
  border-color: rgba(31,31,35,.105);
  background: #f6f6f8;
}
input::placeholder, textarea::placeholder { color: #a0a1a7; }
input:focus, textarea:focus, select:focus { border-color: #7866ed; background: #fff; box-shadow: 0 0 0 4px rgba(109,93,252,.085); }
.cost-box { border-color: var(--line); background: linear-gradient(145deg,rgba(109,93,252,.06),#f7f7f9); }
.cost-box strong { color: #5b49bd; }
.canvas-panel { background-color: #f6f6f7; background-image: radial-gradient(circle, rgba(60,61,68,.13) 1px, transparent 1px); background-size: 24px 24px; }
.stage { width: min(980px,100% - 48px); }
.form-grid { border-color: var(--line); background: #fff; box-shadow: 0 16px 44px rgba(30,31,39,.05); }
.primary-button, .primary-action {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg,#7864f5,#5a75ed);
  box-shadow: 0 11px 28px rgba(82,76,196,.18);
}
.primary-button:hover, .primary-action:hover { filter: brightness(1.03); transform: translateY(-1px); }
.module-grid article { color: var(--text); }
.blueprint-tabs button, .custom-blueprint button, .library-toolbar button, .project-view-switch button {
  color: #6c6d74;
  border-color: var(--line);
  background: #fff;
}
.blueprint-tabs button span, .project-view-switch button span { color: #87888f; background: #f0f0f2; }
.blueprint-tabs button.active, .library-toolbar button.active, .project-view-switch button.active { color: #5846b8; border-color: rgba(109,93,252,.25); background: #efecff; }
.blueprint-summary strong { color: #34353a; }
.blueprint-card { border-color: var(--line); background: #fff; box-shadow: 0 10px 30px rgba(30,31,39,.035); }
.blueprint-card.selected { border-color: rgba(109,93,252,.4); background: linear-gradient(145deg,#f1efff,#fff 62%); }
.module-grid .blueprint-select:hover { background: #f8f8fa; }
.module-grid .blueprint-select > span, .module-grid .blueprint-select small { color: #85868d; }
.module-grid .blueprint-select i { color: #777880; background: #f0f0f2; }
.blueprint-card.selected .blueprint-select i { color: #fff; background: #6d5dfc; }
.blueprint-options { border-color: var(--line); background: #f7f7f9; }
.module-reference-upload span { color: #6250c9; border-color: rgba(109,93,252,.25); background: #fff; }
.save-preset-button { color: #5f6067; border-color: var(--line); background: #fff; }
.validation-copy, .generate-summary { color: #707178; }
.prompt-state { color: #686970; background: #eeeeF1; }
.prompt-state.enhancing { color: #5a49ba; background: #ebe7ff; }
.prompt-state.done { color: #14795a; background: #e9f8f1; }
.prompt-state.error { color: #99601d; background: #fff4e5; }
.prompt-card { border-color: var(--line); background: #fff; box-shadow: 0 12px 34px rgba(30,31,39,.04); }
.prompt-card textarea { background: #f6f6f8; }
.structure-note { color: #4b5552; border-color: rgba(22,139,104,.16); background: #eef8f4; }
.sticky-footer { border-color: var(--line); background: rgba(255,255,255,.9); box-shadow: 0 14px 36px rgba(30,31,39,.09); }
.strategy-board, .experience-controls, .model-route-summary {
  color: var(--text);
  border-color: rgba(47,159,174,.16);
  background: linear-gradient(110deg,rgba(47,159,174,.06),#fff 46%);
}
.strategy-board strong, .experience-heading strong, .model-route-summary strong { color: #303136; }
.strategy-board span, .experience-heading span, .model-route-summary strong { color: #4e50a9; }
.experience-preview { border-color: rgba(109,93,252,.15); background: #f5f3ff; }
.experience-preview strong { color: #5846b8; }
.preview-panel dl, .required-card, .guardrail-card, .offline-card {
  border-color: var(--line);
  background: #f7f7f9;
}
.preview-panel dd { color: #3e3f44; }
.required-card > div span { color: #74757b; background: #e9e9ec; }
.required-card > div.ok span { color: #147759; background: #e4f5ed; }
.guardrail-card { border-color: rgba(109,93,252,.16); background: linear-gradient(145deg,#f1efff,#f9f9fb); }
.guardrail-card span { color: #5e4bc2; }
.offline-card { border-color: rgba(200,79,93,.18); background: #fff3f4; }
.offline-card strong { color: #aa3f4b; }

/* Generation and results */
.generation-progress {
  border-color: rgba(109,93,252,.2);
  background: radial-gradient(circle at 18% 20%,rgba(109,93,252,.08),transparent 38%),linear-gradient(145deg,#fff,#f5f4ff);
  box-shadow: 0 22px 60px rgba(40,41,49,.065);
}
.generation-progress::before { background: rgba(109,93,252,.055); }
.generation-progress-copy h3 { color: #27282c; }
.generation-progress-copy strong, .generation-progress-copy > strong { color: #5a49bb; }
.generation-live-dot { color: #147b5c; }
.generation-progress .progress-track, .progress-track { background: #e5e5e8; }
.progress-orbit { background: conic-gradient(var(--blue) 0 65%, #e2e2e6 65% 100%); }
.progress-orbit::before { background: #fff; }
.generation-status-row span { color: #74757c; border-color: rgba(31,31,35,.075); background: rgba(255,255,255,.68); }
.pending-media { background: linear-gradient(110deg,transparent 20%,rgba(109,93,252,.08) 42%,transparent 65%),#f0f0f3; }
.pending-shimmer { background-color: #f0f0f3; background-image: linear-gradient(110deg,transparent 20%,rgba(109,93,252,.09) 45%,rgba(47,159,174,.07) 55%,transparent 80%); }
.hard-error {
  color: #33343a;
  border-color: rgba(190,131,40,.22) !important;
  background: radial-gradient(circle at 50% 0,rgba(222,167,76,.1),transparent 48%),linear-gradient(145deg,#fff,#fffaf3) !important;
  box-shadow: 0 20px 55px rgba(40,41,49,.06);
}
.hard-error > span { color: #9f671e !important; }
.hard-error h3 { color: #303136 !important; }
.hard-error p { color: #73747b !important; }
.result-card { border-color: var(--line); background: #fff; box-shadow: 0 15px 40px rgba(30,31,39,.055); }
.result-media { background: #f0f0f2; }
.result-media > span { color: #137456; background: rgba(231,248,241,.92); }
.result-meta strong { color: #2f3034; }
.result-meta a { color: #5948b9; border-color: rgba(109,93,252,.18); background: #f1efff; }
.media-error { color: #a43e4a; background: #fff3f4; }
.empty-state { color: #77787f; border-color: rgba(75,76,83,.2); background: rgba(255,255,255,.5); }
.empty-state strong { color: #303136; }

/* Dashboard, assets and projects */
.hub-view, .library-view, .membership-view, .miniapp-view { color: var(--text); }
.hub-hero {
  color: #242529;
  border-color: rgba(31,31,35,.075);
  background: radial-gradient(circle at 88% 12%,rgba(109,93,252,.13),transparent 34%),radial-gradient(circle at 18% 100%,rgba(47,159,174,.07),transparent 36%),linear-gradient(135deg,#fff,#faf9ff);
  box-shadow: 0 24px 70px rgba(35,36,44,.07);
}
.hub-hero h1, .membership-hero h1, .miniapp-copy h1 { color: #1f2023; font-weight: 735; letter-spacing: -.055em; }
.hub-hero > div:first-child > p { color: #696a71; }
.hero-score { color: #34353a; border-color: rgba(109,93,252,.16); background: radial-gradient(circle,rgba(109,93,252,.1),transparent 62%),rgba(255,255,255,.7); box-shadow: inset 0 0 0 16px rgba(109,93,252,.025),0 22px 60px rgba(30,31,39,.08); }
.metric-grid article, .engine-grid article {
  color: #292a2e;
  border-color: var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 38px rgba(30,31,39,.045);
}
.engine-grid small { color: #85868d; }
.engine-badge { color: #168476; background: #e7f6f2; }
.engine-badge.image { color: #4e5fba; background: #ecefff; }
.engine-badge.video { color: #9b5e1d; background: #fff1e1; }
.engine-badge.relay { color: #7a4bab; background: #f3e9ff; }
.relay-card { background: linear-gradient(155deg,rgba(122,75,171,.07),transparent 60%),#fff !important; }
.library-toolbar { border-color: var(--line); background: rgba(255,255,255,.82); box-shadow: 0 10px 30px rgba(30,31,39,.04); }
.asset-library-grid article, .project-grid article {
  color: #2f3034;
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 14px 40px rgba(30,31,39,.045);
}
.asset-preview { background: #f0f0f2; }
.asset-library-grid span, .project-grid article > span { color: #604dc5; }
.asset-library-grid a { color: #5948b9; }
.project-grid article { background: linear-gradient(160deg,rgba(109,93,252,.055),transparent 45%),#fff; }
.protection-toggle > span { background: #ececef; }
.preset-strip button.active { color: #5744b7; border-color: rgba(109,93,252,.25); background: #efecff; }

/* Membership and mini program */
.membership-hero {
  color: #292a2e;
  border-color: var(--line);
  background: radial-gradient(circle at 88% 5%,rgba(109,93,252,.12),transparent 34%),linear-gradient(145deg,#fff,#f8f7ff);
  box-shadow: 0 22px 65px rgba(35,36,44,.065);
}
.membership-hero > div:first-child > span, .miniapp-copy > span { color: #6551d4; }
.membership-hero > div:first-child > p, .miniapp-copy > p { color: #707178; }
.member-status-card { border-color: rgba(109,93,252,.16); background: rgba(255,255,255,.72); }
.member-status-card strong { color: #312b59; }
.membership-grid article, .member-payment-bar, .miniapp-features article {
  color: #292a2e;
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 14px 40px rgba(30,31,39,.045);
}
.membership-grid article.recommended { border-color: rgba(109,93,252,.38); box-shadow: 0 18px 48px rgba(80,69,180,.1); }
.membership-grid article > span { color: #5b48bf; background: #efecff; }
.phone-shell { border-color: #e0e0e4; box-shadow: 0 28px 80px rgba(30,31,39,.14); }
.phone-hero { background: linear-gradient(145deg,#6755da,#4c7bcf); }
.phone-hero span { color: #e9e7ff; }
.phone-hero p { color: rgba(255,255,255,.76); }
.phone-hero button { color: #44368d; background: #fff; }
.phone-grid i { color: #5e4ac3; background: #edeaff; }

/* Video intelligence */
.motion-command, .motion-command.viral {
  color: #292a2e;
  border-color: rgba(109,93,252,.16);
  background: radial-gradient(circle at 92% 0,rgba(47,159,174,.08),transparent 34%),linear-gradient(120deg,rgba(109,93,252,.07),transparent 42%),#fff;
  box-shadow: 0 20px 60px rgba(30,31,39,.06);
}
.video-mode-tabs { background: linear-gradient(90deg,rgba(109,93,252,.055),transparent 58%),rgba(255,255,255,.9); }
.motion-command-copy > span, .viral-storyboard-head span, .video-prompt-stack-head span { color: #6551d4; }
.motion-engine-map > div, .viral-dna-card, .viral-fusion-card {
  border-color: var(--line);
  background: rgba(247,247,249,.82);
}
.motion-engine-map i { color: #258794; }
.motion-engine-map > b, .viral-pipeline > b { color: #b5b5bb; }
.model-picker-grid select, .viral-source-card input { color: #2b2c30; border-color: var(--line); background: #f6f6f8; }
.viral-source-card {
  color: #303136;
  border-color: rgba(172,100,29,.17);
  background: radial-gradient(circle at 100% 0,rgba(109,93,252,.08),transparent 40%),linear-gradient(145deg,rgba(255,244,230,.65),#fff);
}
.viral-source-title span, .viral-analysis-board span, .viral-analysis-board small { color: #9e5e1b; }
.viral-ready { background: #eaf8f2; }
.viral-ready span { color: #14795a; }
.viral-analysis-board, .video-prompt-stack {
  color: #303136;
  border-color: rgba(109,93,252,.15);
  background: radial-gradient(circle at 100% 0,rgba(47,159,174,.06),transparent 38%),linear-gradient(135deg,rgba(109,93,252,.055),#fff);
}
.viral-reverse-prompt textarea, .viral-master-prompt textarea { color: #303136; border-color: rgba(109,93,252,.16); background: #f6f6f8; }
.viral-pipeline article, .viral-beat-track article, .video-prompt-layers article {
  color: #303136;
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 10px 30px rgba(30,31,39,.035);
}
.viral-storyboard { color: #303136; border-color: rgba(109,93,252,.15); background: #f8f7ff; }
.viral-goal-field textarea { background: #f6f6f8 !important; border-color: rgba(109,93,252,.18) !important; }

/* Dialogs */
.modal-backdrop { background: rgba(38,38,44,.38); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.modal, .login-modal {
  color: #292a2e;
  border-color: rgba(255,255,255,.5);
  background: radial-gradient(circle at 86% 0,rgba(109,93,252,.09),transparent 35%),rgba(255,255,255,.96);
  box-shadow: 0 34px 100px rgba(24,25,31,.22);
}
.modal-close, .login-password-row button, .login-code-row button, .login-back { color: #62636a; border-color: var(--line); background: #f2f2f4; }
.login-method-tabs { border-color: var(--line); background: #f2f2f4; }
.login-method-tabs button { color: #77787f; }
.login-method-tabs button.active { color: #4f3dae; background: #fff; box-shadow: 0 3px 12px rgba(30,31,39,.06); }
.account-mode-switch { border-color: var(--line); }
.account-mode-switch button { color: #83848b; }
.account-mode-switch button.active { color: #303136; }
.login-divider span { color: #898a91; background: #fff; }
.wechat-login-panel { border-color: var(--line); background: #f7f7f9; }
.price-grid article { color: #303136; border-color: var(--line); background: #fff; }
.price-grid article.recommended { border-color: rgba(109,93,252,.34); background: linear-gradient(160deg,rgba(109,93,252,.08),#fff 48%); }
.price-grid b { color: #82551d; }
.price-grid button { color: #6d6e75; border-color: var(--line); background: #f0f0f2; }
.price-grid button:not(:disabled) { color: #fff; border-color: transparent; background: #6d5dfc; }
.price-note { color: #77787f; background: #f4f4f6; }
.payment-switch button { color: #73747b; border-color: var(--line); background: #f7f7f9; }
.payment-switch button.active { color: #4d3baa; border-color: rgba(109,93,252,.3); background: #efecff; }
.purchase-type-switch { border-color: var(--line); background: #f2f2f4; }
.purchase-type-switch button { color: #77787f; }
.purchase-type-switch button.active { color: #4f3dae; background: #fff; box-shadow: 0 3px 12px rgba(30,31,39,.06); }
.payment-order { color: #303136; border-color: rgba(109,93,252,.16); background: #f8f7ff; }

.toast, .suite-toast {
  color: #303136;
  border-color: rgba(31,31,35,.11);
  background: rgba(255,255,255,.94);
  box-shadow: 0 16px 48px rgba(30,31,39,.16);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.inline-error, .login-error { color: #a63f4b; border-color: rgba(200,79,93,.2); background: #fff1f3; }

/* Static creative and brand pages align with the same shell */
.suite-app { grid-template-columns: var(--mz-sidebar) minmax(0,1fr); transition: grid-template-columns .28s cubic-bezier(.2,.8,.2,1); }
.suite-content { background: transparent; }
.suite-nav button { font-size: 13.5px; }
.suite-hero { box-shadow: 0 22px 64px rgba(35,36,44,.065); }
.workbench, .brand-workspace { box-shadow: 0 22px 64px rgba(35,36,44,.065); }

@media (max-width: 1180px) and (min-width: 821px) {
  :root { --mz-sidebar: 76px; }
  .app-shell, .suite-app { grid-template-columns: 76px minmax(0,1fr); }
  .suite-sidebar { width: 76px; padding-inline: 9px; }
  .brand, .suite-brand { justify-content: center; padding-inline: 0; }
  .brand > div:last-child, .suite-brand > div, .credit-card, .suite-credit, .support-link, .suite-test, .account-chip > div:last-child, .nav-new { display: none; }
  .nav-item, .suite-nav button { justify-content: center; padding: 0; font-size: 0; }
  .account-chip { justify-content: center; }
}

@media (max-width: 820px) {
  .app-shell, .suite-app { display: block; }
  .sidebar, .suite-sidebar { position: static; width: 100%; height: auto; flex-direction: row; align-items: center; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand, .suite-brand { margin-right: auto; padding: 0; }
  .brand > div:last-child, .suite-brand > div { display: none; }
  .primary-nav, .suite-nav { display: flex; }
  .nav-item, .suite-nav button { width: 39px; height: 39px; min-height: 39px; justify-content: center; padding: 0; font-size: 0; }
  .primary-nav .nav-item:nth-child(n+4), .suite-nav button:nth-child(n+4), .sidebar-spacer, .suite-sidebar-spacer, .credit-card, .suite-credit, .support-link, .suite-test, .account-chip { display: none; }
  .mz-sidebar-toggle { display: none; }
  .studio-layout { display: block; }
  .config-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .hub-view, .library-view, .membership-view, .miniapp-view { width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}