:root {
  color-scheme: dark;
  --bg: #11131d;
  --panel: #202433;
  --panel-2: #252a3b;
  --ink: #f8fafc;
  --muted: #aeb7d8;
  --line: rgba(176, 103, 255, .28);
  --line-strong: rgba(198, 140, 255, .52);
  --green: #6ef2c2;
  --green-soft: rgba(110, 242, 194, .12);
  --blue: #5872ff;
  --blue-soft: rgba(88, 114, 255, .16);
  --coral: #ff5b73;
  --coral-soft: rgba(255, 91, 115, .12);
  --gold: #ffd166;
  --gold-soft: rgba(255, 209, 102, .14);
  --violet: #d45cff;
  --shadow: 0 18px 50px rgba(0, 0, 0, .26);
  --shadow-soft: 0 10px 26px rgba(0, 0, 0, .18);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html {
  background: var(--bg);
}
body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(88, 114, 255, .16), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(212, 92, 255, .13), transparent 30%),
    var(--bg);
  color: var(--ink);
}
body.auth-required .app-shell {
  display: none;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; }

.launch-warning {
  margin: 14px 14px 0;
  border: 1px solid rgba(194, 65, 45, .28);
  border-radius: 8px;
  background: var(--coral-soft);
  color: var(--coral);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 900;
}

.hidden { display: none !important; }

.auth-screen {
  display: none;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(246, 248, 251, .92), rgba(234, 240, 255, .78)),
    url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=80") center/cover;
}
body.auth-required .auth-screen {
  display: grid;
}
.auth-card {
  width: min(440px, 100%);
  border: 1px solid rgba(216, 222, 230, .86);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 60px rgba(16, 24, 40, .16);
  padding: 22px;
}
.auth-brand {
  margin-bottom: 18px;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}
.auth-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}
.auth-tabs button.active {
  background: #111827;
  color: #fff;
}
.auth-form {
  display: grid;
  gap: 12px;
}
.auth-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.auth-form input,
.auth-form textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 11px;
}
.auth-form textarea {
  min-height: 76px;
  resize: vertical;
}
.auth-message {
  min-height: 20px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.auth-links {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 900;
}
.auth-links a {
  color: var(--blue);
}

.app-shell {
  display: grid;
  grid-template-columns: 184px minmax(0, 1180px);
  gap: 12px;
  justify-content: center;
  min-height: 100vh;
  padding: 12px;
}

.sidebar,
.panel,
.preview-panel,
.output-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--shadow-soft);
}

.sidebar {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: fit-content;
  padding: 12px;
  border-color: rgba(176, 103, 255, .20);
  background: linear-gradient(180deg, #1b2030, #151925);
  color: #f8fafc;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 22px rgba(88, 114, 255, .24);
}
.brand strong,
.brand small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand strong {
  font-size: 15px;
  line-height: 1.18;
  white-space: normal;
}
.brand small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.sidebar .brand small { color: #9ca3af; }

.nav { display: grid; gap: 4px; }
.nav button {
  display: flex;
  align-items: center;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}
.sidebar .nav button {
  color: #cbd5e1;
}
.nav button.nav-muted {
  min-height: 32px;
  color: #98a2b3;
  font-size: 12px;
}
.nav button.active,
.nav button:hover {
  background: var(--green-soft);
  color: #067647;
}
.sidebar .nav button.active,
.sidebar .nav button:hover {
  background: linear-gradient(90deg, rgba(88, 114, 255, .34), rgba(212, 92, 255, .28));
  color: #f8fafc;
  box-shadow: inset 3px 0 0 var(--violet);
}

.install-app-btn {
  min-height: 40px;
  border: 1px solid rgba(7, 137, 90, .28);
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 950;
}
.install-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.sidebar .install-help-link {
  background: rgba(255, 255, 255, .08);
  color: #d1d5db;
}

.quota-box,
.system-box {
  display: none;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}
.sidebar .quota-box,
.sidebar .system-box {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
}
.sidebar .quota-box span,
.sidebar .system-box span {
  color: #9ca3af;
}
.quota-box span,
.system-box span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.quota-box strong { display: block; margin-top: 4px; font-size: 14px; }
.cloud-benefit-mini {
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 8px;
}
.cloud-benefit-mini strong {
  margin-top: 0;
  color: #eef2ff;
  font-size: 12px;
  line-height: 1.38;
}
.cloud-benefit-mini small {
  color: #a7f3d0;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}
.quota-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.quota-line b {
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  padding: 4px 8px;
  font-size: 11px;
}
.meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebf0;
}
.meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
}
.system-box strong {
  display: block;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.system-box strong.ready {
  background: var(--green-soft);
  color: var(--green);
}

.workspace {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.hero-console {
  background:
    linear-gradient(135deg, rgba(31, 36, 54, .98), rgba(37, 25, 64, .92)),
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent);
  color: #f8fafc;
}
.hero-console span,
.hero-console p {
  color: rgba(248, 250, 252, .76);
}
.hero-console .primary {
  border-color: rgba(255, 255, 255, .22);
  background: linear-gradient(90deg, var(--blue), var(--violet));
  color: #fff;
}
.hero-console .ghost {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.ops-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.ops-stats article {
  display: grid;
  gap: 7px;
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.ops-stats span,
.ops-stats small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.ops-stats strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
}

.ops-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ops-module-grid button {
  display: grid;
  gap: 8px;
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(37, 42, 59, .98), rgba(32, 36, 51, .98));
  padding: 16px;
  text-align: left;
}
.ops-module-grid button:hover {
  border-color: rgba(7, 137, 90, .32);
  background: linear-gradient(180deg, rgba(37, 42, 59, 1), rgba(27, 32, 48, 1));
}
.ops-module-grid strong {
  font-size: 17px;
}
.ops-module-grid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.readiness-list,
.mini-list,
.preset-panel {
  display: grid;
  gap: 8px;
}
.readiness-list article,
.mini-list article,
.preset-panel article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px 12px;
}
.mini-list article,
.preset-panel article {
  display: grid;
}
.readiness-list strong,
.mini-list strong,
.preset-panel strong {
  font-size: 13px;
}
.readiness-list span,
.mini-list span,
.preset-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.readiness-list .ok span { color: var(--green); }
.readiness-list .warn span { color: var(--gold); }
.readiness-list .block span { color: var(--coral); }

.voice-preview-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.voice-preview-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.voice-preview-result {
  min-height: 84px;
}
.voice-preview-result audio {
  width: 100%;
  max-width: 100%;
}
.voice-preview-result small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.voice-preview-warning {
  margin: 0;
  border: 1px solid rgba(220, 104, 3, .24);
  border-radius: 8px;
  background: var(--gold-soft);
  color: var(--gold);
  padding: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.diagnostics-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.diagnostics-export-result {
  margin: 12px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(88, 114, 255, .08);
  color: var(--muted);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}
.diagnostics-export-result[data-tone="ok"] {
  border-color: rgba(110, 242, 194, .28);
  background: var(--green-soft);
  color: var(--green);
}
.diagnostics-export-result[data-tone="error"] {
  border-color: rgba(255, 91, 115, .28);
  background: var(--coral-soft);
  color: var(--coral);
}
.diagnostics-export-result[data-tone="loading"] {
  border-color: rgba(255, 209, 102, .28);
  background: var(--gold-soft);
  color: var(--gold);
}
.diagnostic-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 13px;
}
.diagnostic-card b {
  justify-self: start;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
}
.diagnostic-card.ok b {
  background: var(--green-soft);
  color: var(--green);
}
.diagnostic-card.warn b {
  background: var(--gold-soft);
  color: var(--gold);
}
.diagnostic-card.block b {
  background: var(--coral-soft);
  color: var(--coral);
}
.diagnostic-card strong {
  font-size: 15px;
}
.diagnostic-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.storage-root-card {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(88, 114, 255, .08);
  padding: 13px;
}
.storage-root-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.storage-root-card strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}
.storage-root-card small {
  color: var(--muted);
  line-height: 1.5;
}
.storage-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.storage-layout-card {
  display: grid;
  align-content: space-between;
  gap: 11px;
  min-height: 176px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 13px;
}
.storage-layout-card div {
  display: grid;
  gap: 7px;
}
.storage-layout-card b {
  justify-self: start;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 11px;
}
.storage-layout-card.warn b {
  background: var(--gold-soft);
  color: var(--gold);
}
.storage-layout-card strong {
  font-size: 15px;
}
.storage-layout-card span,
.storage-layout-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.storage-layout-card code {
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  padding: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.compact-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.compact-card-grid article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}
.compact-card-grid strong,
.compact-card-grid span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-card-grid strong {
  white-space: nowrap;
  font-size: 14px;
}
.compact-card-grid span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}
.panel,
.template-strip {
  min-width: 0;
}
.view { display: none; }
.view.active { display: grid; gap: 12px; }
.wizard-step { display: none; }
.wizard-step.active { display: grid; gap: 12px; }
body[data-active-view="studio"][data-wizard-step="0"] #view-studio > .topbar,
body[data-active-view="studio"][data-wizard-step="0"] .wizard-steps {
  display: none;
}

.wizard-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.wizard-steps button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 950;
}
.wizard-steps button span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  font-size: 12px;
}
.wizard-steps button.active {
  border-color: rgba(7, 137, 90, .28);
  background: var(--green-soft);
  color: #067647;
}
.wizard-steps button.active span {
  background: var(--green);
  color: #fff;
}
.wizard-steps button:disabled {
  opacity: .46;
}

.feature-panel {
  min-height: min(620px, calc(100vh - 24px));
  align-content: start;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.feature-card {
  display: grid;
  gap: 10px;
  min-height: 148px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  text-align: left;
}
.feature-card strong {
  font-size: 18px;
  line-height: 1.25;
}
.feature-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.feature-card:hover {
  border-color: rgba(7, 137, 90, .32);
  box-shadow: var(--shadow-soft);
}
.feature-card.primary-feature {
  border-color: rgba(7, 137, 90, .32);
  background: linear-gradient(180deg, #f4fff8, #fff);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.summary-grid article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
  min-width: 0;
}
.summary-grid article span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.summary-grid article strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.summary-grid .summary-wide {
  grid-column: 1 / -1;
}
.summary-grid .summary-wide strong {
  white-space: normal;
  line-height: 1.5;
}
.compliance-box {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid rgba(7, 137, 90, .22);
  border-radius: 8px;
  background: #f5fff9;
  padding: 12px;
}
.compliance-box strong {
  color: #067647;
  font-size: 13px;
  font-weight: 950;
}
.compliance-box p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.compliance-box a,
.legal-check a {
  color: var(--blue);
  font-weight: 950;
}
.wizard-run-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.wizard-run-row b {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}
.delivery-stack {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.delivery-stack .phone {
  max-width: 300px;
  margin: 0 auto;
}

.topbar,
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.topbar {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.topbar p {
  max-width: 680px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.panel,
.preview-panel,
.output-panel {
  padding: 16px;
}
.panel-head { margin-bottom: 12px; }
.topbar span,
.panel-head span {
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}
h1, h2 {
  margin: 0;
  letter-spacing: 0;
  line-height: 1.2;
}
h1 { margin-top: 2px; font-size: 24px; }
h2 { margin-top: 3px; font-size: 18px; }
.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.top-actions b,
#runStatus,
.count {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.primary,
.ghost,
.danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.primary {
  border-color: #067647;
  background: var(--green);
  color: #fff;
}
.ghost:hover,
.primary:hover,
.danger:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.danger {
  display: none;
  margin-top: auto;
  border-color: rgba(194, 65, 45, .24);
  background: var(--coral-soft);
  color: var(--coral);
}
button:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
}

.studio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
.simple-form {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 150px;
  gap: 12px;
}
.form-grid,
.style-grid,
.viral-form,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.form-grid label:nth-child(1),
.form-grid label:nth-child(2),
.form-grid label:nth-child(3),
.form-grid label:nth-child(4) {
  grid-column: span 2;
}
.style-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 14px;
}
.style-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}
.style-panel-head {
  padding: 0;
  border: 0;
  box-shadow: none;
}
.cloud-benefit-panel {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(36, 87, 214, .18);
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}
.cloud-benefit-panel strong {
  color: #1d4ed8;
  font-size: 13px;
  line-height: 1.35;
}
.cloud-benefit-panel span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.cloud-benefit-panel.active {
  border-color: rgba(7, 137, 90, .26);
  background: #f2fbf6;
}
.cloud-benefit-panel.active strong {
  color: #067647;
}
.cloud-benefit-panel.warn {
  border-color: rgba(220, 104, 3, .28);
  background: #fff8ed;
}
.cloud-benefit-panel.warn strong {
  color: #b54708;
}
.source-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.source-guide article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 13px;
}
.source-guide strong {
  font-size: 14px;
}
.source-guide span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.source-guide a {
  justify-self: start;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
}
.range-field {
  align-content: start;
}
.range-field > span {
  justify-self: end;
  margin-top: -25px;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
}
input[type="range"] {
  accent-color: var(--green);
  padding: 0;
}
.live-collector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.viral-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }
.persona-grid textarea {
  min-height: 118px;
}
.persona-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(71, 104, 255, .12), rgba(212, 92, 255, .10));
  padding: 12px 14px;
}
.persona-inline div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.persona-inline strong {
  font-size: 14px;
}
.persona-inline span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.persona-preview {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(27, 31, 47, .92), rgba(22, 25, 38, .96));
  padding: 14px;
}
.persona-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
}
.persona-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.persona-score strong {
  color: var(--ink);
  font-size: 24px;
}
.persona-score i {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}
.persona-score i::before {
  content: "";
  display: block;
  width: var(--persona-progress, 8%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--violet));
}
.persona-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.persona-tags b {
  border: 1px solid rgba(212, 92, 255, .32);
  border-radius: 999px;
  background: rgba(212, 92, 255, .12);
  color: #f0d5ff;
  padding: 6px 9px;
  font-size: 12px;
}
.persona-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.persona-preview-grid article {
  display: grid;
  gap: 5px;
  min-height: 74px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  padding: 10px;
}
.persona-preview-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.persona-preview-grid strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
.field-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  color: #344054;
  font-size: 13px;
  font-weight: 950;
}
.field-section-title::before {
  content: "";
  width: 4px;
  height: 16px;
  border-radius: 999px;
  background: var(--green);
}
.cover-preview-card {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  min-height: 220px;
  align-content: end;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, .12);
  border-radius: 8px;
  background:
    linear-gradient(160deg, rgba(17, 24, 39, .08), rgba(17, 24, 39, .72)),
    repeating-linear-gradient(12deg, #0b1220 0 38px, #0e4727 38px 72px);
  padding: 18px;
}
.cover-template-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.cover-template-chip {
  display: grid;
  gap: 5px;
  min-height: 90px;
  justify-items: start;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(37, 42, 59, .96), rgba(24, 28, 42, .96));
  color: var(--muted);
  padding: 10px;
  box-shadow: none;
}
.cover-template-chip:hover,
.cover-template-chip.active {
  border-color: color-mix(in srgb, var(--template-accent, var(--violet)) 70%, transparent);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--template-accent, var(--violet)) 22%, rgba(37, 42, 59, .96)), rgba(24, 28, 42, .98));
}
.cover-template-chip span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--template-accent, var(--violet)) 22%, transparent);
  color: var(--template-accent, var(--violet));
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 950;
}
.cover-template-chip strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}
.cover-template-chip small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.cover-preview-card.clean {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .85)),
    linear-gradient(135deg, #e9eef7, #111827);
}
.cover-preview-card.education {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .9)),
    linear-gradient(135deg, #e0f2fe, #bae6fd 44%, #0f172a);
}
.cover-preview-card.magazine {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .72)),
    linear-gradient(135deg, #364152, #0b1220 52%, #124e3a);
}
.cover-preview-card.local_service,
.cover-preview-card.ecommerce,
.cover-preview-card.restaurant,
.cover-preview-card.career,
.cover-preview-card.renovation {
  background:
    linear-gradient(160deg, rgba(17, 24, 39, .08), rgba(17, 24, 39, .74)),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--cover-accent, #ffd65c) 42%, transparent), transparent 28%),
    repeating-linear-gradient(12deg, #0b1220 0 38px, #182238 38px 72px);
}
.cover-preview-card.beauty,
.cover-preview-card.parenting,
.cover-preview-card.finance {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .72)),
    radial-gradient(circle at 80% 18%, color-mix(in srgb, var(--cover-accent, #f472b6) 42%, transparent), transparent 30%),
    linear-gradient(135deg, #30384f, #0b1220 52%, #1f2937);
}
.cover-preview-card span {
  width: fit-content;
  border-radius: 8px;
  background: var(--cover-accent, #ffd65c);
  color: #111827;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 950;
}
.cover-preview-card em {
  width: fit-content;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.cover-preview-card.clean em,
.cover-preview-card.education em {
  color: #475467;
}
.cover-preview-card strong {
  max-width: 92%;
  color: var(--cover-title, #ffffff);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 950;
}
.cover-preview-card.clean strong {
  color: #111827;
}
.cover-preview-card.education strong {
  color: #0f172a;
}
.cover-preview-card small {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  line-height: 1.45;
}
.cover-preview-card.clean small,
.cover-preview-card.education small {
  color: #475467;
}
label {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.wide-label { margin-top: 12px; }
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  outline: none;
}
input,
select {
  min-height: 42px;
  padding: 0 11px;
}
input[type="color"] {
  min-height: 42px;
  padding: 4px;
}
textarea {
  min-height: 92px;
  resize: vertical;
  padding: 12px;
  line-height: 1.58;
}
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(36, 87, 214, .56);
  box-shadow: 0 0 0 4px rgba(36, 87, 214, .10);
}

.platform-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.advanced-panel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 0;
}
.advanced-panel > summary,
.compact-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  padding: 0 12px;
  color: #344054;
  font-size: 13px;
  font-weight: 950;
}
.advanced-panel > summary::-webkit-details-marker,
.compact-details > summary::-webkit-details-marker {
  display: none;
}
.advanced-panel > summary::after,
.compact-details > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
}
.advanced-panel[open] > summary::after,
.compact-details[open] > summary::after {
  content: "-";
}
.advanced-panel > :not(summary) {
  margin-left: 12px;
  margin-right: 12px;
}
.advanced-panel > :last-child {
  margin-bottom: 12px;
}
.compact-details {
  padding: 0;
}
.compact-details > summary {
  min-height: 64px;
}
.compact-details > .module-grid,
.compact-details > .scene-list {
  margin-left: 16px;
  margin-right: 16px;
}
.compact-details > .scene-list {
  margin-bottom: 16px;
}
.platform-row button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-weight: 900;
}
.platform-row button.active {
  border-color: rgba(7, 137, 90, .28);
  background: var(--green-soft);
  color: #067647;
}
.publish-account-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  border: 1px solid rgba(88, 114, 255, .22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(88, 114, 255, .08), rgba(212, 92, 255, .08));
  padding: 12px;
}
.publish-account-inline small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.account-console {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.25fr);
  gap: 12px;
}
.platform-account-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.platform-account-form .wide {
  grid-column: 1 / -1;
}
.platform-account-form textarea {
  min-height: 82px;
}
.platform-accounts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.platform-account-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(110, 242, 194, .22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 42, 59, .98), rgba(32, 36, 51, .98)),
    var(--panel);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.platform-account-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.platform-account-main b {
  width: fit-content;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  color: #fff;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
}
.platform-account-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 17px;
}
.platform-account-main span,
.platform-account-card p,
.platform-account-card dt,
.platform-account-card dd,
.platform-account-card a {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.platform-account-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.platform-account-card dl div {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  padding: 8px;
}
.platform-account-card dt,
.platform-account-card dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-account-card dt {
  color: rgba(174, 183, 216, .74);
}
.platform-account-card dd,
.platform-account-card a {
  margin-top: 4px;
  color: #eef2ff;
  font-weight: 850;
}
.platform-account-card p {
  min-height: 34px;
  margin: 0;
}
.platform-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  color: #475467;
  font-size: 13px;
  line-height: 1.45;
}
.check-row input {
  flex: 0 0 auto;
  width: 16px;
  min-height: 16px;
  margin-top: 2px;
}

.legal-page-body {
  min-height: 100vh;
  background: var(--bg);
  padding: 24px;
}
.legal-page {
  display: grid;
  gap: 14px;
  width: min(840px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  padding: 24px;
}
.legal-page h1,
.legal-page h2,
.legal-page p {
  margin: 0;
}
.legal-page > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.legal-page h1 {
  font-size: 26px;
  line-height: 1.22;
}
.legal-page section {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.legal-page h2 {
  font-size: 16px;
}
.legal-page p {
  color: #475467;
  line-height: 1.7;
}
.legal-summary {
  border-radius: 8px;
  background: var(--green-soft);
  color: #067647 !important;
  padding: 12px;
  font-weight: 850;
}
.legal-back {
  width: fit-content;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.template-strip,
.templates-grid,
.viral-grid,
.structure-grid,
.plan-grid {
  display: grid;
  gap: 10px;
}
.template-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.template-strip .template-card {
  min-height: 104px;
}
.template-strip .template-card p {
  display: none;
}
.template-strip .template-top button {
  min-width: 48px;
}
.templates-grid,
.plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.viral-workbench {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: start;
}
.viral-layout {
  display: grid;
  grid-template-columns: minmax(420px, .95fr) minmax(0, 1.05fr);
  gap: 16px;
  align-items: start;
}
.viral-compose-panel,
.viral-result-panel {
  min-height: 410px;
}
.ip-brain-box {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(88, 114, 255, .08);
  padding: 12px;
}
.ip-brain-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ip-brain-head div {
  display: grid;
  gap: 4px;
}
.ip-brain-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.ip-brain-head strong {
  font-size: 15px;
}
.ip-brain-actions {
  display: grid;
  grid-template-columns: 118px auto;
  gap: 8px;
  align-items: center;
}
.ip-brain-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ip-brain-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.ip-brain-form .wide {
  grid-column: 1 / -1;
}
.ip-brain-form textarea {
  min-height: 76px;
}
.ip-brain-result {
  display: grid;
  gap: 12px;
  margin: 0;
}
.ip-brain-summary,
.ip-brain-persona {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.ip-brain-summary strong {
  font-size: 15px;
}
.ip-brain-summary span,
.ip-brain-persona b {
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}
.ip-brain-result p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.ip-brain-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ip-brain-pillars article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  padding: 10px;
}
.ip-brain-pillars strong,
.ip-brain-lists strong {
  font-size: 13px;
}
.ip-brain-pillars span,
.ip-brain-pillars p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.ip-brain-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ip-brain-lists div {
  display: grid;
  gap: 7px;
}
.ip-brain-lists ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.ip-brain-warning {
  border: 1px solid rgba(255, 209, 102, .26);
  border-radius: 8px;
  background: var(--gold-soft);
  color: var(--gold) !important;
  padding: 9px;
}
.ip-brain-source {
  border: 1px solid rgba(5, 150, 105, .22);
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green) !important;
  padding: 9px;
}
.ip-brain-sources {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(5, 150, 105, .22);
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  padding: 10px;
}
.ip-brain-sources > strong {
  font-size: 13px;
}
.ip-brain-sources > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ip-brain-sources article {
  min-width: 0;
  border: 1px solid rgba(5, 150, 105, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
  padding: 8px;
}
.ip-brain-sources article strong,
.ip-brain-sources article span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ip-brain-sources article strong {
  font-size: 12px;
}
.ip-brain-sources article span {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}
.viral-search-box {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(7, 137, 90, .18);
  border-radius: 8px;
  background: #fbfffd;
  padding: 12px;
}
.viral-search-row,
.viral-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.viral-search-row button,
.viral-link-row button {
  min-width: 104px;
}
.viral-search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.viral-search-results .viral-card {
  padding: 12px;
}
.viral-search-status {
  grid-column: 1 / -1;
  min-height: 56px;
  margin: 0;
  display: grid;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.viral-search-status.running {
  border-color: rgba(161, 92, 7, .25);
  background: var(--gold-soft);
  color: var(--gold);
}
.viral-search-status.ready {
  border-color: rgba(24, 135, 88, .22);
  background: var(--green-soft);
  color: var(--green);
}
.viral-search-status.error {
  border-color: rgba(194, 65, 45, .28);
  background: var(--coral-soft);
  color: var(--coral);
}
.compact-empty {
  min-height: 48px;
  margin: 0;
  align-content: center;
}
.viral-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.viral-steps article {
  display: grid;
  gap: 5px;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 11px;
}
.viral-steps b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--green-soft);
  color: #067647;
  font-size: 12px;
}
.viral-steps strong {
  font-size: 13px;
}
.viral-steps span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.viral-admin-panel {
  grid-column: 1 / -1;
}
.viral-admin-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.viral-admin-panel > summary::-webkit-details-marker {
  display: none;
}
.compact-head {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.viral-grid {
  grid-template-columns: 1fr;
}
.structure-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}
.template-card,
.viral-card,
.structure-card,
.plan-card,
.module-card,
.plan-title,
.scene-row,
.material-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.template-card {
  display: grid;
  gap: 9px;
  min-height: 152px;
  padding: 12px;
}
.viral-card {
  display: grid;
  gap: 9px;
  min-height: 0;
  padding: 14px;
}
.template-card.active {
  border-color: rgba(7, 137, 90, .46);
  background: #fbfffd;
  box-shadow: inset 0 0 0 1px rgba(7, 137, 90, .12);
}
.viral-card.active {
  border-color: rgba(36, 87, 214, .36);
  background: #fbfdff;
  box-shadow: inset 0 0 0 1px rgba(36, 87, 214, .10);
}
.template-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.viral-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.template-top b,
.viral-card-top b,
.plan-card b {
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
}
.viral-card-top small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.template-top button,
.viral-card button,
.run-actions button,
.run-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 9px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.template-card strong,
.viral-card strong,
.plan-card strong,
.module-card strong,
.plan-title strong,
.structure-card b,
.scene-row strong,
.material-card strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viral-card strong {
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.template-card p,
.viral-card p,
.plan-card p,
.module-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.48;
}
.viral-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.viral-score {
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
}
.viral-source {
  width: fit-content;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.viral-source:hover { text-decoration: underline; }
.template-meta,
.material-tags,
.link-grid,
.run-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.template-meta span,
.material-tags span {
  border-radius: 999px;
  background: #f2f4f7;
  color: #475467;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 850;
}
.viral-result {
  margin-top: 12px;
}
.viral-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 10px;
}
.viral-result-meta span {
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}
.rewrite-script {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
  color: #344054;
  line-height: 1.58;
}
.structure-card {
  display: grid;
  gap: 6px;
  min-height: 128px;
  padding: 11px;
}
.structure-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.structure-card p {
  margin: 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.48;
}
.prompt-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.prompt-list b {
  font-size: 13px;
}
.prompt-list ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
}
.collector-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.module-card {
  min-height: 98px;
  padding: 12px;
}
.module-card.muted {
  background: #fbfcfd;
}
.module-card span {
  display: inline-flex;
  margin-top: 7px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
}
.module-card p { margin-top: 7px; }
.scene-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}
.plan-title {
  padding: 12px;
  background: #fbfcfd;
}
.plan-title span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.48;
}
.scene-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}
.scene-row b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 12px;
}
.scene-row p {
  margin: 5px 0 0;
  color: #344054;
  font-size: 13px;
  line-height: 1.44;
}
.scene-row span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 8px;
  margin-bottom: 12px;
}
.shoot-guide {
  display: grid;
  gap: 6px;
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(5, 150, 105, .20);
  border-radius: 8px;
  background: rgba(5, 150, 105, .07);
}
.shoot-guide strong {
  font-size: 14px;
}
.shoot-guide span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.upload-drop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
  align-items: center;
  min-height: 118px;
  margin-bottom: 12px;
  border: 1px dashed rgba(36, 87, 214, .32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(36, 87, 214, .07), rgba(5, 150, 105, .08)),
    #fff;
  padding: 18px;
  cursor: pointer;
}
.upload-drop:hover,
.upload-drop:focus-visible {
  border-color: rgba(5, 150, 105, .48);
  box-shadow: 0 0 0 4px rgba(5, 150, 105, .10);
  outline: none;
}
.upload-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.upload-drop strong {
  display: block;
  font-size: 16px;
  line-height: 1.35;
}
.upload-drop span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.upload-actions {
  display: grid;
  gap: 8px;
}
.upload-actions button {
  width: 100%;
}
.materials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.material-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
}
.material-card img,
.material-card video,
.audio-tile {
  width: 74px;
  height: 74px;
  border-radius: 8px;
  object-fit: cover;
  background: #111827;
}
.audio-tile {
  display: grid;
  place-items: center;
  align-content: center;
  color: #a7f3d0;
}
.audio-tile b { font-size: 14px; }
.audio-tile span { color: #d1d5db; font-size: 11px; }
.material-card span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.presenter-report {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  border: 1px solid rgba(18, 183, 106, .22);
  border-radius: 8px;
  background: var(--green-soft);
  padding: 7px;
}
.presenter-report.warn {
  border-color: rgba(220, 104, 3, .28);
  background: var(--gold-soft);
}
.presenter-report.block {
  border-color: rgba(217, 45, 32, .28);
  background: var(--coral-soft);
}
.presenter-report b {
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
}
.presenter-report.warn b { color: var(--gold); }
.presenter-report.block b { color: var(--coral); }
.presenter-report span,
.presenter-report li {
  margin: 0;
  color: #475467;
  font-size: 11px;
  line-height: 1.4;
}
.presenter-report ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 16px;
}

.avatar-console {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: stretch;
}
.avatar-guide-card,
.avatar-primary-panel,
.avatar-examples-panel,
.avatar-library-panel {
  min-width: 0;
}
.avatar-requirements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.avatar-requirements article,
.avatar-example-grid article {
  display: grid;
  gap: 6px;
  min-height: 92px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(37, 42, 59, .96), rgba(30, 34, 49, .96));
  padding: 12px;
}
.avatar-requirements b,
.avatar-example-grid b,
.avatar-quality {
  width: fit-content;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}
.avatar-requirements span,
.avatar-example-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.avatar-example-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.avatar-example-grid article.warn b,
.avatar-quality.warn {
  background: var(--gold-soft);
  color: var(--gold);
}
.avatar-example-grid article.block b,
.avatar-quality.block {
  background: var(--coral-soft);
  color: var(--coral);
}
.avatar-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.avatar-stats span,
.avatar-stats b {
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--muted);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 900;
}
.avatar-stats b {
  color: #dffcf2;
}
.avatar-primary-card {
  min-height: 100%;
}
.avatar-primary-card > .empty {
  min-height: 182px;
}
.avatar-primary-card,
.avatar-card {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(110, 242, 194, .22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(37, 42, 59, .98), rgba(32, 36, 51, .98));
  box-shadow: var(--shadow-soft);
  padding: 12px;
}
.compact-card-grid .avatar-card {
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: stretch;
  border-color: rgba(110, 242, 194, .22);
  background: linear-gradient(135deg, rgba(37, 42, 59, .98), rgba(32, 36, 51, .98));
  padding: 12px;
}
.compact-card-grid .avatar-card span,
.compact-card-grid .avatar-card strong {
  margin-top: 0;
}
.avatar-card.warn,
.avatar-primary-card:has(.avatar-quality.warn) {
  border-color: rgba(255, 209, 102, .28);
}
.avatar-card.block,
.avatar-primary-card:has(.avatar-quality.block) {
  border-color: rgba(255, 91, 115, .30);
}
.avatar-primary-preview video,
.avatar-card-media video {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 250px;
  border-radius: 8px;
  background: #0b1020;
  object-fit: cover;
}
.avatar-primary-info,
.avatar-card-body,
.avatar-card-title {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.avatar-primary-info strong,
.avatar-card-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 17px;
}
.avatar-primary-info small,
.avatar-card-body small,
.avatar-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.avatar-card-body p {
  border: 1px solid rgba(110, 242, 194, .16);
  border-radius: 8px;
  background: rgba(110, 242, 194, .08);
  padding: 8px;
}
.avatar-issue-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}
.avatar-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.avatar-card-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.task-dashboard {
  display: grid;
  gap: 12px;
}
.task-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.task-stats article,
.task-filters {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  padding: 13px;
}
.task-stats article {
  display: grid;
  gap: 6px;
  min-height: 108px;
}
.task-stats span,
.task-stats small,
.task-filters span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.task-stats strong {
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}
.task-stats article.pass strong { color: var(--green); }
.task-stats article.warn strong { color: var(--gold); }
.task-stats article.fail strong { color: var(--coral); }
.task-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px auto;
  gap: 10px;
  align-items: end;
}
.task-filters strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.runs-table {
  display: grid;
  gap: 8px;
}
.run-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 128px 130px 118px 138px 128px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  font-size: 13px;
}
.run-head {
  min-height: 38px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.run-row.warn {
  border-color: rgba(220, 104, 3, .24);
}
.run-row.fail {
  border-color: rgba(217, 45, 32, .28);
}
.run-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  color: var(--muted);
}
.run-title-cell {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.run-title-cell img,
.run-cover-placeholder {
  width: 42px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
  background: linear-gradient(135deg, #e4e7ec, #f8fafc);
}
.run-title-cell > div {
  min-width: 0;
}
.run-title-cell strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-title-cell span {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 900;
}
.run-state-pill {
  width: fit-content;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 950;
}
.run-state-pill.warn {
  background: var(--gold-soft);
  color: var(--gold);
}
.run-state-pill.fail {
  background: var(--coral-soft);
  color: var(--coral);
}
.run-progress-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}
.run-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f6;
}
.run-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), #12b76a);
}
.run-progress-track span.warn {
  background: linear-gradient(90deg, var(--gold), #fdb022);
}
.run-progress-track span.fail {
  background: linear-gradient(90deg, var(--coral), #f97066);
}
.run-progress-cell small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.run-step {
  min-width: 0;
  overflow: hidden;
  color: #344054;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.plan-card {
  display: grid;
  gap: 9px;
  min-height: 152px;
  padding: 13px;
}
.plan-card.active {
  border-color: rgba(36, 87, 214, .36);
  background: #fbfdff;
}
.plan-card.benefit-plan {
  border-color: rgba(7, 137, 90, .30);
  background: #f4fbf7;
}
.plan-card.benefit-plan b {
  background: var(--green-soft);
  color: var(--green);
}
.plan-card > span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 950;
}

.phone {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 8px solid #111827;
  border-radius: 8px;
  background: #111827;
}
.phone video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone video:not([src]) { display: none; }
#emptyPreview {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 900;
}
.users-table {
  display: grid;
  gap: 10px;
}
.user-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.15fr) .55fr .8fr minmax(280px, 1.2fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.user-row strong,
.user-row span,
.user-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-row span,
.user-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}
.user-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cloud-quota-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cloud-quota-field,
.cloud-quota-note {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--green-soft);
  padding: 8px;
}
.cloud-quota-field span,
.cloud-quota-note strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}
.cloud-quota-field input {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid rgba(18, 183, 106, .28);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 0 8px;
}
.cloud-quota-note {
  grid-column: 1 / -1;
}
.status-pill {
  width: fit-content;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 950;
}
.status-pill.active {
  background: var(--green-soft);
  color: var(--green);
}
.status-pill.suspended {
  background: var(--coral-soft);
  color: var(--coral);
}
.status-pill.pending,
.status-pill.not-connected {
  background: var(--gold-soft);
  color: var(--gold);
}

.output-empty,
.output-running,
.output-error,
.output-ready {
  display: grid;
  gap: 10px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.48;
}
.output-running {
  border-color: rgba(161, 92, 7, .25);
  background: var(--gold-soft);
  color: var(--gold);
}
.output-error {
  border-color: rgba(194, 65, 45, .28);
  background: var(--coral-soft);
  color: var(--coral);
}
.output-ready {
  background: #fff;
  color: var(--ink);
}
.output-ready > span {
  color: var(--muted);
  font-size: 12px;
}
.status-summary {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(18, 183, 106, .24);
  border-radius: 8px;
  background: var(--green-soft);
  padding: 10px;
}
.status-summary.warn {
  border-color: rgba(220, 104, 3, .28);
  background: var(--gold-soft);
}
.status-summary.fail {
  border-color: rgba(217, 45, 32, .28);
  background: var(--coral-soft);
}
.status-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.status-summary-head b {
  color: var(--green);
  font-size: 13px;
}
.status-summary.warn .status-summary-head b { color: var(--gold); }
.status-summary.fail .status-summary-head b { color: var(--coral); }
.status-summary-head span {
  color: #475467;
  font-size: 11px;
  font-weight: 850;
}
.status-summary-list {
  display: grid;
  gap: 6px;
}
.status-summary-list article {
  display: grid;
  gap: 3px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .72);
  padding: 7px;
}
.status-summary-list strong {
  color: var(--ink);
  font-size: 12px;
}
.status-summary-list span {
  color: #475467;
  font-size: 11px;
  line-height: 1.42;
}
.status-summary-list article.warn strong { color: var(--gold); }
.status-summary-list article.fail strong { color: var(--coral); }
.run-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.run-status-badges b,
.run-status-badges span {
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
}
.run-status-badges .warn {
  background: var(--gold-soft);
  color: var(--gold);
}
.run-status-badges .fail {
  background: var(--coral-soft);
  color: var(--coral);
}
.link-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 8px;
  background: var(--green-soft);
  color: #067647;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.empty {
  margin: 0;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
}
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 40px));
  border-radius: 8px;
  background: #111827;
  color: #fff;
  padding: 11px 13px;
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 850;
}
.admin-only {
  display: none !important;
}
body.admin-mode .nav button.admin-only { display: flex !important; }
body.admin-mode button.admin-only { display: inline-flex !important; }
body.admin-mode .panel.admin-only,
body.admin-mode section.admin-only { display: block !important; }
body.admin-mode details.admin-only,
body.admin-mode .advanced-panel.admin-only,
body.admin-mode .pipeline-panel.admin-only { display: block !important; }
body.admin-mode .viral-admin-panel.admin-only { display: grid !important; }
body.admin-mode .source-guide.admin-only {
  display: grid !important;
}
body.admin-mode .view.admin-only { display: none !important; }
body.admin-mode .view.admin-only.active {
  display: grid !important;
  gap: 12px;
}
.settings-head {
  margin-bottom: 14px;
}
.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.settings-card-grid article {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 13px;
}
.settings-card-grid strong {
  font-size: 14px;
}
.settings-card-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

body:not(.auth-required) .panel,
body:not(.auth-required) .topbar,
body:not(.auth-required) .preview-panel,
body:not(.auth-required) .output-panel,
body:not(.auth-required) .feature-card,
body:not(.auth-required) .wizard-steps button,
body:not(.auth-required) .template-card,
body:not(.auth-required) .viral-card,
body:not(.auth-required) .material-card,
body:not(.auth-required) .run-row,
body:not(.auth-required) .user-row,
body:not(.auth-required) .plan-card,
body:not(.auth-required) .settings-card-grid article,
body:not(.auth-required) .summary-grid article,
body:not(.auth-required) .source-guide article,
body:not(.auth-required) .style-panel,
body:not(.auth-required) .style-grid,
body:not(.auth-required) .upload-drop,
body:not(.auth-required) .output-ready,
body:not(.auth-required) .output-empty,
body:not(.auth-required) .readiness-list article,
body:not(.auth-required) .mini-list article,
body:not(.auth-required) .preset-panel article,
body:not(.auth-required) .diagnostic-card,
body:not(.auth-required) .storage-root-card,
body:not(.auth-required) .storage-layout-card,
body:not(.auth-required) .compact-card-grid article {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(37, 42, 59, .96), rgba(32, 36, 51, .96));
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

body:not(.auth-required) .run-head,
body:not(.auth-required) .feature-card.primary-feature,
body:not(.auth-required) .plan-card.active {
  background: linear-gradient(180deg, rgba(41, 48, 73, .98), rgba(32, 39, 58, .98));
}

body:not(.auth-required) input,
body:not(.auth-required) textarea,
body:not(.auth-required) select {
  border-color: var(--line);
  background: #171b28;
  color: var(--ink);
}

body:not(.auth-required) input::placeholder,
body:not(.auth-required) textarea::placeholder {
  color: rgba(174, 183, 216, .62);
}

body:not(.auth-required) .primary {
  border-color: rgba(212, 92, 255, .48);
  background: linear-gradient(90deg, var(--blue), var(--violet));
  color: #fff;
  box-shadow: 0 10px 24px rgba(88, 114, 255, .22);
}

body:not(.auth-required) .ghost {
  border-color: var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
}

body:not(.auth-required) .empty {
  border-color: var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
}

body:not(.auth-required) .meter {
  background: rgba(255, 255, 255, .12);
}

body:not(.auth-required) .meter i,
body:not(.auth-required) input[type="range"] {
  accent-color: var(--violet);
}

body:not(.auth-required) .link-grid a {
  background: var(--green-soft);
  color: var(--green);
}

body:not(.auth-required) .audio-tile,
body:not(.auth-required) .material-card img,
body:not(.auth-required) .material-card video,
body:not(.auth-required) .compact-card-grid img,
body:not(.auth-required) .compact-card-grid video {
  background: #111827;
}

@media (max-width: 1240px) {
  .app-shell {
    grid-template-columns: 176px minmax(0, 920px);
  }
  .template-strip,
  .templates-grid,
  .viral-grid,
  .plan-grid,
  .ops-stats,
  .task-stats,
  .ops-module-grid,
  .diagnostics-grid,
  .storage-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-filters > div,
  .task-filters button {
    grid-column: 1 / -1;
  }
  .run-row {
    grid-template-columns: minmax(220px, 1fr) 122px 128px 108px 132px 116px;
  }
  .studio-grid {
    grid-template-columns: 1fr;
  }
  .style-grid,
  .source-guide,
  .viral-form,
  .ip-brain-form,
  .live-collector,
  .viral-steps,
  .cover-template-grid,
  .avatar-example-grid,
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .viral-workbench,
  .viral-layout,
  .avatar-console,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .user-row {
    grid-template-columns: minmax(0, 1.2fr) auto;
  }
  .cloud-quota-controls,
  .user-actions {
    grid-column: 1 / -1;
  }
  .viral-search-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  body {
    min-height: 100dvh;
  }
  body:not(.auth-required) {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
  .app-shell {
    display: block;
    padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
  }
  .sidebar,
  .delivery-stack {
    position: static;
    height: auto;
    margin-bottom: 10px;
  }
  .sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
  }
  .sidebar .brand {
    min-width: 0;
  }
  .sidebar .brand > span {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  .sidebar .brand strong {
    font-size: 13px;
  }
  .sidebar .brand small {
    font-size: 11px;
  }
  .nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border: 1px solid rgba(216, 222, 230, .9);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
    padding: 7px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .wizard-steps {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .wizard-steps button {
    flex: 0 0 112px;
  }
  .feature-panel {
    min-height: auto;
  }
  .feature-grid,
  .summary-grid,
  .delivery-stack {
    grid-template-columns: 1fr;
  }
  .feature-card {
    min-height: 118px;
    padding: 16px;
  }
  .user-row,
  .cloud-quota-controls {
    grid-template-columns: 1fr;
  }
  .user-actions {
    justify-content: flex-start;
  }
  .wizard-run-row {
    display: grid;
  }
  .ip-brain-head,
  .ip-brain-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .quota-box,
  .system-box {
    display: none;
  }
  .danger {
    display: none;
  }
  .install-app-btn {
    min-height: 36px;
    padding: 0 10px;
    white-space: nowrap;
  }
  .logout-btn {
    min-height: 36px;
    padding: 0 12px;
    white-space: nowrap;
  }
  .install-help-link {
    min-height: 36px;
    padding: 0 9px;
    white-space: nowrap;
  }
  .nav button {
    flex: 0 0 86px;
    justify-content: center;
    text-align: center;
    padding: 0 8px;
    min-height: 44px;
    font-size: 12px;
    white-space: nowrap;
  }
  .sidebar .nav button {
    color: var(--muted);
  }
  .sidebar .nav button.active,
  .sidebar .nav button:hover {
    background: var(--green-soft);
    color: #067647;
  }
  .topbar,
  .panel-head {
    display: grid;
  }
  .diagnostics-actions {
    justify-content: stretch;
  }
  .diagnostics-actions button {
    width: 100%;
  }
  .topbar {
    padding: 16px;
  }
  .panel,
  .preview-panel,
  .output-panel {
    padding: 15px;
  }
  button,
  input,
  select {
    min-height: 44px;
  }
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 0;
  }
  textarea {
    min-height: 112px;
  }
  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    max-width: none;
  }
  .auth-screen {
    min-height: 100dvh;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  }
  .auth-card {
    padding: 18px;
  }
  .legal-page-body {
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  }
  .legal-page {
    padding: 18px;
  }
  .legal-page h1 {
    font-size: 22px;
  }
  .form-grid,
  .simple-form,
  .style-grid,
  .viral-form,
  .ip-brain-form,
  .ip-brain-pillars,
  .ip-brain-lists,
  .ip-brain-sources > div,
  .live-collector,
  .viral-steps,
    .publish-account-inline,
    .account-console,
    .platform-account-form,
    .platform-accounts-grid,
    .avatar-console,
    .avatar-requirements,
    .avatar-example-grid,
    .settings-grid,
    .settings-card-grid,
    .ops-stats,
    .task-stats,
    .task-filters,
    .voice-preview-controls,
    .cover-template-grid,
    .ops-module-grid,
    .dashboard-grid,
    .diagnostics-grid,
    .storage-layout-grid,
  .compact-card-grid,
  .template-strip,
  .templates-grid,
  .viral-grid,
  .structure-grid,
  .plan-grid,
  .module-grid,
  .materials-grid,
  .delivery-stack {
    grid-template-columns: 1fr;
  }
  .viral-search-row,
  .viral-link-row {
    grid-template-columns: 1fr;
  }
  .form-grid label:nth-child(1),
  .form-grid label:nth-child(2),
  .form-grid label:nth-child(3),
  .form-grid label:nth-child(4) {
    grid-column: auto;
  }
  .platform-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .platform-account-card dl {
    grid-template-columns: 1fr;
  }
  .platform-account-actions {
    justify-content: stretch;
  }
  .platform-account-actions button,
  .publish-account-inline button {
    width: 100%;
  }
  .avatar-primary-card,
  .compact-card-grid .avatar-card {
    grid-template-columns: 1fr;
  }
  .avatar-primary-preview video,
  .avatar-card-media video {
    max-height: 360px;
  }
  .avatar-card-actions {
    justify-content: stretch;
  }
  .avatar-card-actions button,
  .avatar-card-actions a {
    width: 100%;
  }
  .persona-inline {
    align-items: stretch;
    flex-direction: column;
  }
  .persona-preview-grid {
    grid-template-columns: 1fr;
  }
  .run-row {
    grid-template-columns: 1fr;
  }
  .task-filters > div,
  .task-filters button {
    grid-column: auto;
  }
  .task-stats article {
    min-height: 92px;
  }
  .task-stats strong {
    font-size: 26px;
  }
  .run-state-pill,
  .run-step {
    width: fit-content;
  }
  .run-progress-cell {
    grid-template-columns: minmax(0, 1fr) 42px;
  }
  .run-head {
    display: none;
  }
  .upload-row {
    grid-template-columns: 1fr;
  }
  .upload-drop {
    grid-template-columns: 1fr;
    min-height: 148px;
  }
  .template-strip .template-card {
    min-height: 108px;
  }
  .template-strip {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
  }
  .template-strip .template-card {
    flex: 0 0 224px;
    scroll-snap-align: start;
  }
  .template-picker {
    overflow: hidden;
  }
}

/* Product UI regularization layer */
:root {
  --bg: #11131a;
  --panel: #1b202b;
  --panel-2: #222836;
  --panel-3: #2a3141;
  --ink: #f3f6fb;
  --muted: #9aa4b7;
  --line: rgba(161, 126, 204, .28);
  --line-strong: rgba(190, 140, 255, .62);
  --green: #45d59a;
  --green-soft: rgba(69, 213, 154, .13);
  --blue: #4d7cff;
  --blue-soft: rgba(77, 124, 255, .16);
  --coral: #ff5d68;
  --coral-soft: rgba(255, 93, 104, .13);
  --gold: #ffd15f;
  --gold-soft: rgba(255, 209, 95, .14);
  --violet: #b971ff;
  --shadow: 0 22px 58px rgba(0, 0, 0, .34);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, .22);
}

html,
body {
  background: var(--bg);
}

body {
  background: #11131a;
}

.auth-card {
  color: #111827;
}

.auth-card .brand strong,
.auth-form input,
.auth-form textarea {
  color: #111827;
}

.auth-form label,
.auth-message {
  color: #667085;
}

body:not(.auth-required) .app-shell {
  grid-template-columns: minmax(0, 1580px);
  gap: 18px;
  padding: 0 18px 18px;
}

body:not(.auth-required) .sidebar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: 68px;
  width: 100%;
  margin: 0;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #202430;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px rgba(0, 0, 0, .22);
  padding: 0 14px;
}

body:not(.auth-required) .sidebar .brand {
  min-width: 0;
}

body:not(.auth-required) .brand-mark {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}

body:not(.auth-required) .sidebar .nav {
  display: flex;
  justify-content: center;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  padding: 0 10px;
  scrollbar-width: none;
}

body:not(.auth-required) .sidebar .nav::-webkit-scrollbar {
  display: none;
}

body:not(.auth-required) .sidebar .nav button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 12px;
  color: #c8cedd;
  font-size: 13px;
  font-weight: 850;
  box-shadow: none;
}

body:not(.auth-required) .sidebar .nav button.active,
body:not(.auth-required) .sidebar .nav button:hover {
  border-color: rgba(185, 113, 255, .38);
  background: rgba(185, 113, 255, .16);
  color: #fff;
  box-shadow: none;
}

body:not(.auth-required) .quota-box,
body:not(.auth-required) .system-box,
body:not(.auth-required) .install-help-link,
body:not(.auth-required) .install-app-btn,
body:not(.auth-required) #clearBtn {
  display: none !important;
}

body:not(.auth-required) .logout-btn {
  min-height: 36px;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  padding: 0 12px;
}

body:not(.auth-required) .workspace {
  gap: 18px;
}

body:not(.auth-required) .view.active,
body:not(.auth-required) .wizard-step.active {
  gap: 18px;
}

body:not(.auth-required) .topbar,
body:not(.auth-required) .panel,
body:not(.auth-required) .preview-panel,
body:not(.auth-required) .output-panel,
body:not(.auth-required) .feature-card,
body:not(.auth-required) .template-card,
body:not(.auth-required) .viral-card,
body:not(.auth-required) .material-card,
body:not(.auth-required) .run-row,
body:not(.auth-required) .user-row,
body:not(.auth-required) .plan-card,
body:not(.auth-required) .settings-card-grid article,
body:not(.auth-required) .summary-grid article,
body:not(.auth-required) .source-guide article,
body:not(.auth-required) .style-panel,
body:not(.auth-required) .style-grid,
body:not(.auth-required) .upload-drop,
body:not(.auth-required) .output-ready,
body:not(.auth-required) .output-empty,
body:not(.auth-required) .readiness-list article,
body:not(.auth-required) .mini-list article,
body:not(.auth-required) .preset-panel article,
body:not(.auth-required) .diagnostic-card,
body:not(.auth-required) .storage-root-card,
body:not(.auth-required) .storage-layout-card,
body:not(.auth-required) .compact-card-grid article {
  border-color: var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

body:not(.auth-required) .topbar,
body:not(.auth-required) .panel {
  padding: 18px;
}

body:not(.auth-required) input,
body:not(.auth-required) textarea,
body:not(.auth-required) select {
  border-color: rgba(161, 126, 204, .34);
  background: #202532;
  color: var(--ink);
}

body:not(.auth-required) input::placeholder,
body:not(.auth-required) textarea::placeholder {
  color: rgba(154, 164, 183, .72);
}

body:not(.auth-required) input:focus,
body:not(.auth-required) select:focus,
body:not(.auth-required) textarea:focus {
  border-color: rgba(185, 113, 255, .72);
  box-shadow: 0 0 0 4px rgba(185, 113, 255, .12);
}

body:not(.auth-required) .primary {
  border-color: rgba(185, 113, 255, .55);
  background: linear-gradient(90deg, #4d7cff, #c563ff);
  color: #fff;
  box-shadow: 0 12px 24px rgba(77, 124, 255, .20);
}

body:not(.auth-required) .ghost {
  border-color: rgba(161, 126, 204, .32);
  background: rgba(255, 255, 255, .045);
  color: var(--ink);
}

body:not(.auth-required) .primary:hover,
body:not(.auth-required) .ghost:hover,
body:not(.auth-required) .danger:hover {
  transform: none;
  border-color: var(--line-strong);
}

body:not(.auth-required) h1 {
  font-size: 25px;
}

body:not(.auth-required) h2 {
  font-size: 18px;
}

.home-view {
  --flow-bg: #171b25;
}

.home-product-shell {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.home-flow-rail,
.home-stage {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.home-flow-rail {
  min-height: calc(100vh - 104px);
  padding: 18px;
}

.home-flow-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 22px;
}

.home-flow-head span,
.home-stage-title span,
.home-section-title span {
  display: block;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  font-weight: 900;
}

.home-flow-head h1 {
  margin-top: 5px;
  font-size: 26px;
}

.home-flow-head .ghost {
  min-height: 34px;
  padding: 0 10px;
}

.home-flow-steps {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 2px 0;
}

.home-flow-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 38px;
  width: 2px;
  background: rgba(185, 113, 255, .35);
}

.home-flow-steps button {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  min-height: 78px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  text-align: left;
}

.home-flow-steps button.active,
.home-flow-steps button:hover {
  border-color: rgba(255, 209, 95, .86);
  background: rgba(185, 113, 255, .20);
  color: #fff;
}

.home-flow-steps b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #303850;
  color: #d8deea;
  font-size: 22px;
  font-style: italic;
  font-weight: 900;
}

.home-flow-steps button.active b,
.home-flow-steps button:hover b {
  background: linear-gradient(135deg, #4d7cff, #c563ff);
  color: #fff;
}

.home-flow-steps span {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 15px;
  font-weight: 950;
}

.home-flow-steps small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.home-stage {
  overflow: hidden;
  background: linear-gradient(135deg, #1b202b 0%, #1b202b 58%, #52305f 100%);
}

.home-stage-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 24px 18px;
}

.home-stage-title p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.home-stage-card {
  margin: 0 24px 18px;
  border: 1px solid rgba(161, 126, 204, .28);
  border-radius: 8px;
  background: rgba(35, 40, 53, .92);
  box-shadow: inset 0 0 0 20px rgba(255, 255, 255, .035), 0 20px 54px rgba(0, 0, 0, .22);
  padding: 28px;
}

.home-stage-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #252b3a;
  padding: 8px;
}

.home-stage-tabs button {
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.home-stage-tabs button.active,
.home-stage-tabs button:hover {
  background: linear-gradient(90deg, rgba(185, 113, 255, .36), rgba(77, 124, 255, .22));
  color: #fff;
}

.home-stage-grid {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.home-action-card,
.home-preview-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 360px;
  border: 1px solid rgba(161, 126, 204, .24);
  border-radius: 8px;
  background: rgba(24, 28, 40, .84);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .24);
  padding: 22px;
}

.home-action-card h2,
.home-preview-card h2 {
  font-size: 20px;
}

.home-link-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid rgba(77, 166, 255, .34);
  border-radius: 8px;
  background: #202532;
  padding: 8px 8px 8px 16px;
}

.home-link-bar span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-link-bar button,
.home-upload-card {
  border: 1px solid rgba(161, 126, 204, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
}

.home-link-bar button {
  min-height: 42px;
  padding: 0 14px;
  font-weight: 900;
}

.home-upload-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 96px;
  border-style: dashed;
  padding: 16px;
  cursor: pointer;
}

.home-upload-card:hover {
  border-color: rgba(77, 166, 255, .48);
  background: rgba(77, 124, 255, .10);
}

.home-upload-card b {
  color: #fff;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.home-upload-card strong,
.home-preview-card strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
}

.home-upload-card small,
.home-preview-card span,
.home-action-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.home-preview-card > div {
  display: grid;
  align-content: center;
  min-height: 280px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #232838;
  padding: 18px;
}

.home-module-section {
  margin-top: 22px;
}

.home-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.home-section-title strong {
  color: #dce4f6;
  font-size: 13px;
}

.home-module-grid {
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 10px;
}

.home-module-grid button {
  min-height: 116px;
  border-color: rgba(161, 126, 204, .26);
  background: #1c2230;
  padding: 14px;
}

.home-module-grid button:hover {
  border-color: rgba(185, 113, 255, .55);
  background: #232a3a;
}

.home-module-grid strong {
  font-size: 15px;
}

.home-module-grid span {
  font-size: 12px;
}

.home-flow-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 24px 18px;
}

.home-flow-stats article {
  min-height: 104px;
  background: rgba(27, 32, 43, .92);
}

.home-console-grid {
  margin: 0 24px 24px;
}

.home-console-grid .panel {
  background: rgba(27, 32, 43, .92);
}

body:not(.auth-required) .readiness-list article,
body:not(.auth-required) .mini-list article {
  min-height: 50px;
  background: #202532;
}

body:not(.auth-required) .empty {
  border-color: rgba(161, 126, 204, .28);
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
}

@media (max-width: 1320px) {
  .home-product-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .home-module-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-action-card,
  .home-preview-card {
    min-height: 280px;
  }
}

@media (max-width: 1040px) {
  body:not(.auth-required) .app-shell {
    padding-inline: 12px;
  }

  body:not(.auth-required) .sidebar {
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
  }

  .home-product-shell {
    grid-template-columns: 1fr;
  }

  .home-flow-rail {
    min-height: auto;
  }

  .home-flow-steps {
    grid-template-columns: repeat(7, minmax(134px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .home-flow-steps::before {
    display: none;
  }
}

@media (max-width: 860px) {
  body:not(.auth-required) {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  body:not(.auth-required) .app-shell {
    display: block;
    padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
  }

  body:not(.auth-required) .sidebar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
  }

  body:not(.auth-required) .sidebar .nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 60;
    justify-content: flex-start;
    border: 1px solid rgba(161, 126, 204, .34);
    border-radius: 8px;
    background: rgba(27, 32, 43, .98);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
    padding: 7px;
  }

  body:not(.auth-required) .sidebar .nav button {
    flex: 0 0 86px;
    justify-content: center;
    min-height: 42px;
    padding: 0 8px;
    font-size: 12px;
  }

  .home-flow-rail,
  .home-stage {
    border-radius: 8px;
  }

  .home-flow-rail,
  .home-stage-title,
  .home-stage-card {
    padding: 16px;
  }

  .home-stage-title {
    display: grid;
  }

  .home-stage-card,
  .home-flow-stats,
  .home-console-grid {
    margin: 0 0 12px;
  }

  .home-stage-tabs,
  .home-stage-grid,
  .home-module-grid,
  .home-flow-stats,
  .home-console-grid {
    grid-template-columns: 1fr;
  }

  .home-stage-tabs {
    display: flex;
    overflow-x: auto;
  }

  .home-stage-tabs button {
    flex: 0 0 112px;
  }

  .home-flow-steps {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .home-flow-steps::-webkit-scrollbar {
    display: none;
  }

  .home-flow-steps button {
    flex: 0 0 188px;
    min-height: 76px;
  }

  .home-link-bar {
    grid-template-columns: 1fr;
  }

  .home-link-bar button,
  .home-stage-title .top-actions button {
    width: 100%;
  }
}

/* QY-style workflow shell */
body:not(.auth-required) {
  background: #151821;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

body:not(.auth-required) .app-shell {
  grid-template-columns: minmax(0, 100%);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  max-width: none;
  gap: 12px;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 0 12px 12px;
}

body:not(.auth-required) .workspace {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  min-height: 0;
  overflow: hidden;
}

body:not(.auth-required) .view.active {
  min-height: 0;
}

body:not(.auth-required) .sidebar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  min-height: 72px;
  width: 100%;
  border: 1px solid rgba(161, 126, 204, .34);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #232631;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
  padding: 0 18px;
}

body:not(.auth-required) .sidebar .brand {
  min-width: 0;
}

body:not(.auth-required) .sidebar .brand strong {
  color: #fff;
  font-size: 16px;
}

body:not(.auth-required) .sidebar .brand small {
  color: #aeb7c8;
}

body:not(.auth-required) .top-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f3f6fb;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 900;
}

body:not(.auth-required) .top-menu-btn::after {
  content: "⌄";
  margin-left: 7px;
  color: #aeb7c8;
}

body:not(.auth-required) .sidebar .nav {
  position: absolute;
  top: 72px;
  right: 88px;
  display: none;
  grid-template-columns: repeat(2, minmax(118px, 1fr));
  gap: 8px;
  width: 300px;
  border: 1px solid rgba(161, 126, 204, .36);
  border-radius: 8px;
  background: #202532;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .36);
  padding: 10px;
}

body:not(.auth-required).menu-open .sidebar .nav {
  display: grid;
}

body:not(.auth-required) .sidebar .nav button {
  justify-content: flex-start;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: #cfd6e5;
}

body:not(.auth-required) .sidebar .nav button.active,
body:not(.auth-required) .sidebar .nav button:hover {
  border-color: rgba(185, 113, 255, .42);
  background: rgba(185, 113, 255, .20);
  color: #fff;
}

body:not(.auth-required) .quota-box,
body:not(.auth-required) .system-box,
body:not(.auth-required) .install-help-link,
body:not(.auth-required) .install-app-btn,
body:not(.auth-required) #clearBtn {
  display: none !important;
}

body:not(.auth-required) .logout-btn {
  min-height: 38px;
  border-color: rgba(161, 126, 204, .36);
  background: rgba(255, 255, 255, .045);
  padding: 0 16px;
}

.workflow-clone-view {
  display: none;
}

.workflow-clone-view.active {
  display: block;
  height: 100%;
}

.workflow-clone-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.workflow-clone-rail,
.workflow-clone-main {
  border: 1px solid rgba(161, 126, 204, .36);
  border-radius: 8px;
  background: #1d212d;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
}

.workflow-clone-rail {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  overflow: hidden;
  padding: 22px 18px;
}

.workflow-clone-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 24px;
}

.workflow-clone-head span,
.workflow-clone-panel > h2 {
  color: #fff;
}

.workflow-clone-head span {
  font-size: 13px;
  font-weight: 950;
}

.workflow-clone-head h1 {
  margin: 4px 0 10px;
  font-size: 25px;
}

.workflow-clone-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.workflow-clone-head .ghost {
  min-height: 34px;
  padding: 0 10px;
}

.workflow-clone-steps {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding: 10px 0;
}

.workflow-clone-steps::-webkit-scrollbar,
.workflow-clone-board::-webkit-scrollbar {
  width: 6px;
}

.workflow-clone-steps::-webkit-scrollbar-thumb,
.workflow-clone-board::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(185, 113, 255, .45);
}

.workflow-clone-steps::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 72px;
  width: 2px;
  background: rgba(151, 83, 202, .48);
}

.workflow-clone-steps button {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 60px 42px minmax(0, 1fr);
  align-items: center;
  min-height: 74px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #b5bdcc;
  padding: 8px 12px;
  text-align: left;
}

.workflow-clone-steps button.active {
  border-color: #ffd568;
  background: rgba(120, 83, 174, .40);
  box-shadow: 0 0 28px rgba(185, 113, 255, .16);
}

.workflow-clone-steps b {
  color: #aeb7c8;
  font-size: 25px;
  font-style: italic;
  font-weight: 900;
}

.workflow-clone-steps button::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #30374c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.workflow-clone-steps button.active::before {
  background: linear-gradient(135deg, #4b75ff, #bd65ff);
}

.workflow-clone-steps span {
  display: grid;
  gap: 4px;
  color: #f5f7fb;
  font-size: 15px;
  font-weight: 950;
}

.workflow-clone-steps small {
  color: #a6afbf;
  font-size: 12px;
  font-weight: 750;
}

.workflow-clone-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  min-height: 0;
  background:
    linear-gradient(115deg, rgba(29, 33, 45, .96) 0%, rgba(29, 33, 45, .96) 62%, rgba(101, 58, 126, .95) 100%);
}

.workflow-clone-board {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 26px 28px 18px;
}

.workflow-clone-panel {
  display: none;
}

.workflow-clone-panel.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  gap: 14px;
  min-height: 100%;
}

.workflow-clone-panel > h2 {
  margin: 0;
  font-size: 24px;
}

.workflow-card {
  min-height: 0;
  border: 1px solid rgba(161, 126, 204, .24);
  border-radius: 8px;
  background: rgba(39, 43, 58, .80);
  box-shadow: inset 0 0 0 18px rgba(255, 255, 255, .025), 0 18px 36px rgba(0, 0, 0, .20);
  padding: 22px;
}

.workflow-tabs,
.workflow-tabs.small {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #252a39;
  padding: 8px;
}

.workflow-tabs button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 950;
}

.workflow-tabs button.active,
.workflow-tabs button:hover {
  background: linear-gradient(90deg, rgba(185, 113, 255, .36), rgba(77, 124, 255, .28));
  color: #fff;
}

.workflow-learn-panel {
  display: none;
  min-height: 0;
}

.workflow-learn-panel.active {
  display: block;
}

.workflow-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 18px;
  min-height: 0;
  margin-top: 18px;
}

.workflow-two-col.tall .workflow-empty-text {
  min-height: 310px;
}

.workflow-three-col {
  display: grid;
  grid-template-columns: minmax(210px, .82fr) minmax(300px, 1fr) minmax(300px, 1.08fr);
  gap: 18px;
  min-height: 0;
}

.workflow-block {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  min-width: 0;
  border: 1px solid rgba(161, 126, 204, .18);
  border-radius: 8px;
  background: rgba(24, 28, 39, .72);
  padding: 18px;
}

.workflow-block h3,
.workflow-card h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
}

.workflow-input-row,
.workflow-file-btn,
.workflow-source-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border: 1px solid rgba(77, 166, 255, .32);
  border-radius: 8px;
  background: #252a39;
  padding: 8px 10px 8px 14px;
}

.workflow-input-row input {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #f6f8ff;
  padding: 0;
}

.workflow-input-row input:focus {
  box-shadow: none;
}

.workflow-mini-grid {
  display: grid;
  grid-template-columns: minmax(110px, .72fr) minmax(0, 1fr);
  gap: 10px;
}

.workflow-inline-text {
  gap: 8px;
}

.workflow-home-textarea {
  min-height: 230px;
  border: 1px dashed rgba(132, 93, 190, .44);
  background: rgba(255, 255, 255, .035);
  color: #dce3f1;
  line-height: 1.72;
}

.workflow-home-textarea.compact,
.workflow-short-textarea {
  min-height: 132px;
  border: 1px dashed rgba(132, 93, 190, .38);
  background: rgba(255, 255, 255, .032);
  color: #dce3f1;
  line-height: 1.65;
}

.workflow-home-textarea.large {
  min-height: clamp(300px, 42vh, 420px);
}

.workflow-home-textarea::placeholder,
.workflow-short-textarea::placeholder,
.workflow-input-row input::placeholder {
  color: #98a3b6;
}

.workflow-input-row span,
.workflow-file-btn,
.workflow-source-bar span,
.workflow-source-bar strong {
  min-width: 0;
  overflow: hidden;
  color: #b2bbca;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-input-row button,
.workflow-file-btn button,
.workflow-actions button {
  min-height: 38px;
  border: 1px solid rgba(161, 126, 204, .32);
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
  color: #f6f8ff;
  padding: 0 14px;
  font-weight: 900;
}

.workflow-upload,
.workflow-dropzone,
.workflow-empty-text,
.workflow-video-empty,
.workflow-empty-state {
  border: 1px dashed rgba(132, 93, 190, .44);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: #b2bbca;
}

.workflow-upload {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 16px;
  text-align: left;
}

.workflow-upload b {
  color: #fff;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.workflow-upload span,
.workflow-empty-state {
  display: grid;
  gap: 5px;
  color: #fff;
  font-weight: 950;
}

.workflow-upload small,
.workflow-card small,
.workflow-video-empty small {
  color: #a7afbd;
  font-size: 12px;
  font-weight: 750;
}

.workflow-result-box {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 330px;
  max-height: min(52vh, 520px);
  overflow: auto;
  border: 1px dashed rgba(132, 93, 190, .44);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  color: #c6cedd;
  padding: 16px;
  line-height: 1.65;
}

.workflow-result-box.output-ready {
  border-style: solid;
  border-color: rgba(110, 141, 255, .42);
  background: rgba(18, 22, 32, .58);
}

.workflow-result-box.output-running {
  border-style: solid;
  border-color: rgba(93, 211, 213, .42);
}

.workflow-result-box.output-error {
  border-style: solid;
  border-color: rgba(255, 110, 121, .55);
  color: #ffd4d8;
}

.workflow-result-head,
.workflow-result-tags,
.workflow-result-cards,
.workflow-topic-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.workflow-result-head {
  justify-content: space-between;
}

.workflow-result-head strong,
.workflow-result-box > strong {
  color: #fff;
}

.workflow-result-head span,
.workflow-result-tags b {
  border: 1px solid rgba(185, 113, 255, .34);
  border-radius: 999px;
  background: rgba(185, 113, 255, .12);
  color: #d9c6ff;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.workflow-result-tags,
.workflow-result-cards {
  flex-wrap: wrap;
}

.workflow-result-cards article {
  flex: 1 1 170px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 10px;
}

.workflow-result-cards strong,
.workflow-topic-list strong {
  display: block;
  color: #fff;
}

.workflow-result-cards span,
.workflow-topic-list span {
  color: #aab3c4;
  font-size: 12px;
}

.workflow-result-warning {
  color: #f5c86f;
}

.workflow-topic-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-topic-list li {
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 12px;
}

.workflow-topic-list button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid rgba(161, 126, 204, .34);
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
  color: #f6f8ff;
  padding: 0 12px;
  font-weight: 900;
}

.workflow-upload-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 28px;
}

.workflow-upload-modal.hidden {
  display: none;
}

.workflow-upload-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 14, 22, .58);
  backdrop-filter: blur(12px);
}

.workflow-upload-dialog {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 40px));
  border: 1px solid rgba(161, 126, 204, .28);
  border-radius: 10px;
  background: #171b26;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
  padding: 42px;
}

.workflow-upload-close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #f6f8ff;
  font-size: 34px;
  line-height: 1;
}

.workflow-upload-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
  gap: 28px;
  align-items: end;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding-bottom: 24px;
  margin-bottom: 22px;
}

.workflow-upload-header span {
  color: #58c7de;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 5px;
}

.workflow-upload-header h2 {
  margin: 14px 0 0;
  color: #fff;
  font-size: 28px;
}

.workflow-upload-header p {
  margin: 0;
  color: #a9b2c2;
  line-height: 1.65;
}

.workflow-upload-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 20px;
}

.workflow-upload-dropzone,
.workflow-upload-side {
  min-height: 430px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}

.workflow-upload-dropzone {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  border-style: dashed;
  border-color: rgba(77, 166, 255, .34);
  color: #f7f9ff;
  padding: 34px;
  text-align: center;
}

.workflow-upload-dropzone.dragging,
.workflow-upload-dropzone.has-file {
  border-color: rgba(102, 219, 244, .8);
  background: rgba(77, 166, 255, .08);
}

.workflow-upload-dropzone b {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .20);
  color: #fff;
  font-size: 34px;
  font-weight: 500;
}

.workflow-upload-dropzone strong {
  color: #fff;
  font-size: 19px;
}

.workflow-upload-dropzone span,
.workflow-upload-dropzone small {
  max-width: 420px;
  color: #a9b2c2;
  line-height: 1.7;
}

.workflow-upload-dropzone small {
  color: #75d6ef;
  font-weight: 850;
}

.workflow-upload-side {
  display: grid;
  align-content: space-between;
  gap: 20px;
  padding: 24px;
}

.workflow-upload-side input {
  background: rgba(255, 255, 255, .055);
  color: #fff;
}

.workflow-upload-note {
  min-height: 110px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  color: #a9b2c2;
  padding: 16px;
  line-height: 1.7;
}

.workflow-empty-text {
  min-height: 230px;
  padding: 18px;
  font-size: 16px;
  line-height: 1.65;
}

.workflow-empty-text.large {
  min-height: clamp(300px, 42vh, 420px);
}

.workflow-wide-btn {
  width: 100%;
  min-height: 50px;
}

.workflow-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workflow-card-head span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.workflow-stack {
  display: grid;
  gap: 18px;
}

.workflow-dropzone,
.workflow-video-empty {
  display: grid;
  place-items: center;
  min-height: 230px;
  text-align: center;
}

.workflow-video-empty {
  min-height: clamp(300px, 46vh, 470px);
  border-style: solid;
  background: #1b1f2b;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
}

.workflow-video-empty small {
  display: block;
  margin-top: 8px;
}

.workflow-config-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) auto auto;
  gap: 14px;
  align-items: end;
  border-radius: 8px;
  background: rgba(20, 23, 33, .60);
  padding: 18px;
}

.warm-btn {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #ffb347, #ff5d68);
  color: #fff;
  padding: 0 18px;
  font-weight: 950;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  padding: 6px;
}

.segmented button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #aeb7c8;
  font-weight: 950;
}

.segmented button.active {
  background: linear-gradient(90deg, #4b75ff, #c563ff);
  color: #fff;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 0 14px;
  color: #aeb7c8;
  font-weight: 900;
}

.toggle-row b {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #737986;
}

.toggle-row.active b {
  background: linear-gradient(90deg, #4b75ff, #c563ff);
}

.template-mini-grid,
.cover-template-clone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.template-mini-grid button,
.cover-template-clone button {
  min-height: 108px;
  border: 1px solid rgba(161, 126, 204, .22);
  border-radius: 8px;
  background: linear-gradient(180deg, #1d202b, #0f1118);
  color: #fff;
  font-weight: 950;
}

.template-mini-grid button.active,
.cover-template-clone button.active {
  border-color: #4b75ff;
  box-shadow: 0 0 0 1px #4b75ff;
}

.workflow-cover-grid {
  display: grid;
  grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
  gap: 18px;
}

.workflow-cover-preview {
  display: grid;
  place-items: center;
  min-height: clamp(340px, 50vh, 500px);
  border-radius: 8px;
  background: linear-gradient(180deg, #303030, #060606);
  color: #fff;
  font-size: 26px;
  font-weight: 950;
}

.cover-template-clone {
  margin-top: 14px;
  grid-template-columns: repeat(5, minmax(116px, 1fr));
}

.cover-template-clone button {
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 178px;
  padding: 14px;
}

.cover-template-clone small {
  color: #b5bdcc;
}

.workflow-field-label {
  display: block;
  color: #aeb7c8;
  font-size: 13px;
  font-weight: 950;
}

.workflow-template-section {
  display: grid;
  gap: 10px;
}

.workflow-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.workflow-preset-grid.video {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-preset-card,
.workflow-setting-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 86px;
  border: 1px solid rgba(161, 126, 204, .22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)),
    #1b1f2b;
  color: #f8fbff;
  padding: 13px;
  text-align: left;
}

.workflow-preset-card strong,
.workflow-setting-card strong {
  font-size: 15px;
  font-weight: 950;
}

.workflow-preset-card small,
.workflow-setting-card small {
  color: #aeb7c8;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.workflow-preset-card.active,
.workflow-setting-card.active {
  border-color: rgba(87, 126, 255, .96);
  background:
    linear-gradient(135deg, rgba(76, 119, 255, .30), rgba(192, 91, 255, .22)),
    #202436;
  box-shadow: 0 0 0 1px rgba(87, 126, 255, .55);
}

.template-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.template-preview-card {
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-height: 118px;
  padding: 13px;
  text-align: left;
}

.template-preview-card i {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 6px;
  background: #05060a;
  color: #fff5b5;
  font-style: normal;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
}

.template-preview-card strong {
  font-size: 14px;
}

.template-preview-card small {
  color: #aeb7c8;
  font-size: 12px;
  line-height: 1.4;
}

.template-preview-card.accent-red i {
  background: linear-gradient(90deg, #d72f48, #11141f);
  color: #fff;
}

.template-preview-card.accent-blue i {
  background: linear-gradient(90deg, #2858ff, #1b2446);
  color: #9ee8ff;
}

.template-preview-card.accent-price i {
  background: linear-gradient(90deg, #ffb347, #11141f);
  color: #11141f;
}

.template-preview-card.accent-qna i {
  background: linear-gradient(90deg, #11141f, #343a58);
  color: #fff;
}

.workflow-cover-preview {
  align-content: center;
  gap: 10px;
  text-align: center;
}

.workflow-cover-preview span {
  display: block;
  max-width: 82%;
}

.workflow-cover-preview small {
  display: block;
  color: rgba(255, 255, 255, .70);
  font-size: 13px;
  font-weight: 850;
}

.workflow-cover-preview[data-cover-style="yellow"] {
  color: #ffe766;
  text-shadow: 0 3px 0 #000, 0 0 18px rgba(255, 231, 102, .30);
}

.workflow-cover-preview[data-cover-style="price"] {
  background: linear-gradient(180deg, #2f1115, #07080d);
}

.workflow-cover-preview[data-cover-style="shop"] {
  background: linear-gradient(180deg, #20352e, #06080b);
}

.workflow-cover-preview[data-cover-style="list"] {
  background: linear-gradient(180deg, #23283a, #07080d);
}

.workflow-cover-preview[data-cover-style="clean"] {
  background: linear-gradient(180deg, #f6f7fb, #dfe5ef);
  color: #111827;
}

.workflow-cover-tab-panel {
  display: none;
  margin-top: 14px;
}

.workflow-cover-tab-panel.active {
  display: block;
}

.workflow-setting-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cover-template-clone {
  grid-template-columns: repeat(3, minmax(118px, 1fr));
}

.cover-template-card {
  position: relative;
  overflow: hidden;
}

.cover-template-card::before {
  content: "";
  position: absolute;
  inset: 14px 12px auto;
  height: 46px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
  opacity: .55;
}

.cover-template-card span,
.cover-template-card small {
  position: relative;
  z-index: 1;
}

.cover-template-card.cover-yellow span {
  color: #ffe766;
  text-shadow: 0 2px 0 #000;
}

.cover-template-card.cover-price {
  background: linear-gradient(180deg, #2b1418, #0d0f16);
}

.cover-template-card.cover-price span {
  color: #ffdf6e;
}

.cover-template-card.cover-shop {
  background: linear-gradient(180deg, #1f332b, #0d0f16);
}

.cover-template-card.cover-list::before {
  height: 76px;
  background:
    linear-gradient(#f7f9ff, #f7f9ff) 18px 14px / 62% 5px no-repeat,
    linear-gradient(#f7f9ff, #f7f9ff) 18px 32px / 46% 5px no-repeat,
    linear-gradient(#f7f9ff, #f7f9ff) 18px 50px / 56% 5px no-repeat;
}

.cover-template-card.cover-clean {
  background: linear-gradient(180deg, #f3f4f8, #cdd4df);
  color: #111827;
}

.cover-template-card.cover-clean small {
  color: #374151;
}

.workflow-right-btn {
  justify-self: end;
  margin-top: 14px;
  min-width: 160px;
}

.publish-form-clone {
  display: grid;
  gap: 12px;
}

[data-home-workflow-panel="6"] .workflow-two-col {
  align-items: stretch;
  min-height: 100%;
}

[data-home-workflow-panel="6"] .workflow-card {
  height: 100%;
}

[data-home-workflow-panel="6"] .workflow-video-empty {
  min-height: clamp(240px, 34vh, 390px);
}

[data-home-workflow-panel="6"] .workflow-empty-state {
  min-height: clamp(200px, 30vh, 300px);
}

.workflow-empty-state {
  place-items: center;
  min-height: clamp(220px, 34vh, 300px);
  text-align: center;
}

.workflow-empty-state button {
  border: 0;
  background: transparent;
  color: #c4a8ff;
  font-weight: 950;
}

.workflow-clone-footer {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 14px 28px 18px;
}

.workflow-clone-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  margin-bottom: 16px;
}

.workflow-clone-progress i {
  display: block;
  width: 14.28%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4b75ff, #5fd3d5, #cc69ff);
}

.workflow-clone-controls {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  gap: 16px;
  align-items: center;
}

.workflow-clone-controls button {
  min-height: 54px;
  font-size: 16px;
}

.workflow-clone-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border: 1px solid rgba(103, 92, 201, .50);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  color: #cfd6e5;
  font-weight: 950;
}

.workflow-clone-status span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #b7bdca;
  margin-right: 10px;
  vertical-align: middle;
}

.workflow-mobile-stepbar {
  display: none;
}

.workflow-clone-view .home-flow-stats,
.workflow-clone-view .home-console-grid,
.workflow-clone-view .home-module-section,
.workflow-clone-view #homeStats,
.workflow-clone-view #homeModuleGrid {
  display: none !important;
}

.menu-workspace-view {
  max-width: 100%;
  min-width: 0;
}

.menu-workspace-view.active {
  display: grid;
  gap: 16px;
  align-content: start;
}

.menu-workspace-hero,
.menu-workspace-panel {
  min-width: 0;
  border: 1px solid rgba(161, 126, 204, .34);
  border-radius: 8px;
  background: #1d212d;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.menu-workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 128px;
  padding: 24px 28px;
  background:
    linear-gradient(115deg, rgba(29, 33, 45, .97) 0%, rgba(29, 33, 45, .94) 68%, rgba(101, 58, 126, .92) 100%);
}

.menu-workspace-hero span,
.menu-workspace-panel .panel-head span {
  color: #62d7a6;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
}

.menu-workspace-hero h1 {
  margin: 6px 0 10px;
  color: #fff;
  font-size: 30px;
}

.menu-workspace-hero p {
  max-width: 850px;
  margin: 0;
  color: #aab3c4;
  font-size: 14px;
  line-height: 1.65;
}

.menu-workspace-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.menu-workspace-actions button {
  min-width: 128px;
  min-height: 48px;
  font-size: 15px;
}

.menu-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.menu-workspace-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 24px;
}

.menu-workspace-panel .panel-head {
  margin: 0;
  padding-bottom: 2px;
}

.menu-workspace-panel .panel-head h2 {
  margin-top: 5px;
  color: #fff;
  font-size: 22px;
}

.persona-workspace-view .settings-grid.persona-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.persona-workspace-view .persona-grid label {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: #aeb7c8;
  font-size: 13px;
  font-weight: 900;
}

.persona-workspace-view .persona-grid input,
.persona-workspace-view .persona-grid select,
.persona-workspace-view .persona-grid textarea {
  width: 100%;
  min-width: 0;
  border-color: rgba(161, 126, 204, .34);
  background: #202532;
  color: #f6f8ff;
}

.persona-workspace-view .persona-grid textarea {
  min-height: 154px;
  line-height: 1.65;
}

.persona-workspace-view .persona-panel-preview {
  gap: 14px;
}

.persona-workspace-view .persona-preview {
  margin-top: 0;
  border-color: rgba(161, 126, 204, .22);
  background: rgba(20, 23, 33, .64);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.persona-workspace-view .persona-score {
  min-height: 62px;
}

.persona-workspace-view .persona-score strong {
  color: #fff;
  font-size: 32px;
}

.persona-workspace-view .persona-tags b {
  border-color: rgba(185, 113, 255, .38);
  background: rgba(185, 113, 255, .16);
}

.persona-workspace-view .persona-preview-grid {
  gap: 10px;
}

.persona-workspace-view .persona-preview-grid article {
  min-height: 82px;
  background: rgba(255, 255, 255, .035);
}

.workflow-module-host-panel {
  min-width: 0;
}

.workflow-module-host-panel.active {
  display: block;
}

.workflow-module-host-panel > .view {
  min-width: 0;
}

.workflow-module-host-panel > .view.active {
  display: grid;
  gap: 16px;
  min-height: 100%;
}

.workflow-module-host-panel .topbar,
.workflow-module-host-panel .panel,
.workflow-module-host-panel .preview-panel,
.workflow-module-host-panel .output-panel {
  border-color: rgba(161, 126, 204, .30);
  background: #1d212d;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .20);
}

.workflow-module-host-panel .topbar {
  min-height: 118px;
  align-items: center;
  padding: 22px 24px;
  background:
    linear-gradient(115deg, rgba(29, 33, 45, .97) 0%, rgba(29, 33, 45, .94) 68%, rgba(101, 58, 126, .86) 100%);
}

.workflow-module-host-panel .topbar h1 {
  color: #fff;
  font-size: 28px;
}

.workflow-module-host-panel .topbar p {
  max-width: 860px;
  color: #aab3c4;
  font-size: 14px;
}

.workflow-module-host-panel .topbar span,
.workflow-module-host-panel .panel-head span {
  color: #62d7a6;
}

.workflow-module-host-panel .dashboard-grid,
.workflow-module-host-panel .viral-workbench,
.workflow-module-host-panel .task-dashboard,
.workflow-module-host-panel .avatar-console {
  gap: 16px;
}

.workflow-module-host-panel .wizard-view {
  align-content: start;
}

.workflow-module-host-panel .wizard-steps {
  margin: 0;
}

@media (max-width: 1180px) {
  body:not(.auth-required) {
    overflow: auto;
  }

  body:not(.auth-required) .app-shell {
    height: auto;
    max-height: none;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  body:not(.auth-required) .workspace {
    overflow: visible;
  }

  .workflow-clone-view.active {
    height: auto;
  }

  .workflow-clone-shell,
  .workflow-two-col,
  .workflow-three-col,
  .workflow-cover-grid {
    grid-template-columns: 1fr;
  }

  .workflow-clone-shell {
    height: auto;
    overflow: visible;
  }

  .menu-workspace-grid,
  .workflow-module-host-panel .dashboard-grid,
  .workflow-module-host-panel .viral-workbench,
  .workflow-module-host-panel .avatar-console,
  .persona-workspace-view .settings-grid.persona-grid {
    grid-template-columns: 1fr;
  }

  .workflow-clone-rail {
    min-height: auto;
    overflow: visible;
  }

  .workflow-clone-steps {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .workflow-clone-steps::before {
    display: none;
  }

  .workflow-clone-steps button {
    flex: 0 0 210px;
  }
}

@media (max-width: 860px) {
  body:not(.auth-required) .app-shell {
    padding: calc(8px + env(safe-area-inset-top)) 8px calc(78px + env(safe-area-inset-bottom));
  }

  body:not(.auth-required) .sidebar {
    position: sticky;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 60px;
    border-radius: 8px;
    padding: 8px 10px;
  }

  .menu-workspace-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px;
  }

  .menu-workspace-actions {
    justify-content: stretch;
  }

  .menu-workspace-actions button {
    width: 100%;
  }

  .menu-workspace-panel {
    padding: 18px;
  }

  .workflow-module-host-panel .topbar {
    display: grid;
    min-height: auto;
    padding: 18px;
  }

  body:not(.auth-required) .sidebar .nav {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 76px;
    bottom: auto;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-clone-shell {
    gap: 10px;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .workflow-clone-rail,
  .workflow-clone-main {
    border-radius: 8px;
  }

  .workflow-clone-rail,
  .workflow-clone-board,
  .workflow-card,
  .workflow-block {
    padding: 14px;
  }

  .workflow-clone-head {
    grid-template-columns: 1fr;
  }

  .workflow-clone-head h1,
  .workflow-clone-panel > h2 {
    font-size: 22px;
  }

  .workflow-clone-steps button {
    grid-template-columns: 42px minmax(0, 1fr);
    flex: 0 0 176px;
  }

  .workflow-clone-steps b {
    font-size: 22px;
  }

  .workflow-clone-steps button::before {
    display: none;
  }

  .workflow-tabs,
  .workflow-tabs.small,
  .workflow-config-row,
  .workflow-mini-grid,
  .workflow-preset-grid,
  .workflow-setting-grid,
  .template-mini-grid,
  .cover-template-clone,
  .workflow-clone-controls {
    grid-template-columns: 1fr;
  }

  .workflow-empty-text.large,
  .workflow-video-empty,
  .workflow-cover-preview,
  .workflow-empty-state {
    min-height: 240px;
  }

  .workflow-clone-footer {
    padding: 12px 14px 14px;
  }

  .workflow-upload-modal {
    align-items: start;
    padding: 14px 8px;
  }

  .workflow-upload-dialog {
    width: 100%;
    padding: 24px 16px 18px;
  }

  .workflow-upload-header,
  .workflow-upload-body {
    grid-template-columns: 1fr;
  }

  .workflow-upload-header {
    gap: 12px;
    padding-bottom: 16px;
  }

  .workflow-upload-header h2 {
    font-size: 23px;
  }

  .workflow-upload-dropzone,
  .workflow-upload-side {
    min-height: 260px;
  }
}

/* Workflow rail polish */
.workflow-clone-rail {
  grid-template-rows: auto minmax(0, 1fr);
  background:
    radial-gradient(circle at 18% 0%, rgba(128, 97, 255, .20), transparent 34%),
    linear-gradient(180deg, rgba(34, 38, 54, .94), #171b26 100%);
  padding: 16px 14px 18px;
}

.workflow-clone-head {
  grid-template-columns: 1fr;
  gap: 9px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.workflow-clone-head h1 {
  max-width: none;
  margin: 2px 0 6px;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0;
}

.workflow-clone-head p {
  max-width: none;
  color: rgba(210, 218, 232, .72);
  line-height: 1.5;
}

.workflow-clone-head .ghost {
  justify-self: stretch;
  min-height: 34px;
  border-color: rgba(134, 151, 255, .28);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  color: #f6f8ff;
  font-size: 13px;
}

.workflow-clone-steps {
  grid-template-rows: repeat(7, 84px);
  gap: 0;
  align-content: space-between;
  overflow: hidden;
  padding: 3px 0 5px;
}

.workflow-clone-steps::before {
  top: 42px;
  bottom: 42px;
  left: 104px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(162, 91, 238, .76) 12%, rgba(162, 91, 238, .62) 90%, transparent);
}

.workflow-clone-steps button {
  grid-template-columns: 54px 54px minmax(0, 1fr);
  min-height: 0;
  height: 82px;
  border-color: transparent;
  border-radius: 16px;
  background: transparent;
  padding: 8px 10px;
  column-gap: 12px;
}

.workflow-clone-steps button:hover {
  border-color: rgba(122, 161, 255, .24);
  background: rgba(255, 255, 255, .035);
}

.workflow-clone-steps button::before {
  display: none;
}

.workflow-clone-steps b {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 44px;
  height: 56px;
  color: #b9c3d8;
  font-size: 33px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  transform: skewX(-9deg);
  text-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.workflow-step-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(150, 169, 218, .18);
  border-radius: 999px;
  background: linear-gradient(135deg, #303b5e, #26304d);
  color: #f5f7ff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.workflow-step-icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--workflow-step-icon) center / contain no-repeat;
  mask: var(--workflow-step-icon) center / contain no-repeat;
}

.icon-lightbulb {
  --workflow-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .8-1.7 1.5-2.5A5 5 0 1 0 7.5 11.5C8.2 12.3 8.8 13 9 14'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M10 14h4'/%3E%3C/svg%3E");
}

.icon-pen {
  --workflow-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

.icon-volume {
  --workflow-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M19 5a9 9 0 0 1 0 14'/%3E%3C/svg%3E");
}

.icon-video {
  --workflow-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 10.5 21 7v10l-6-3.5Z'/%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E");
}

.icon-scissors {
  --workflow-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.1 15.9'/%3E%3Cpath d='M14.5 14.5 20 20'/%3E%3Cpath d='M8.1 8.1 12 12'/%3E%3C/svg%3E");
}

.icon-image {
  --workflow-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8' cy='10' r='1.7'/%3E%3Cpath d='m21 15-5-5L5 19'/%3E%3C/svg%3E");
}

.icon-rocket {
  --workflow-step-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1 1-1.5 3-1.5 3s2-.5 3-1.5c.6-.6.6-1.5 0-2.1s-1.5-.6-2.1 0Z'/%3E%3Cpath d='M9 15 6 18'/%3E%3Cpath d='M15 9l3-3'/%3E%3Cpath d='M7 13c-1.2-3.3 1.2-6 4-7l7-2 2 2-2 7c-1 2.8-3.7 5.2-7 4Z'/%3E%3Cpath d='M9 15 15 9'/%3E%3C/svg%3E");
}

.workflow-clone-steps button.active {
  border-color: #ffd965;
  background: linear-gradient(90deg, rgba(136, 76, 181, .62), rgba(54, 62, 111, .72));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .82), 0 18px 34px rgba(0, 0, 0, .28), 0 0 36px rgba(184, 101, 255, .14);
}

.workflow-clone-steps button.active .workflow-step-icon {
  width: 52px;
  height: 52px;
  border-color: transparent;
  background: linear-gradient(135deg, #5d7fff, #a45fff);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 12px 26px rgba(95, 112, 255, .36);
}

.workflow-clone-steps button.active .workflow-step-icon::before {
  width: 25px;
  height: 25px;
}

.workflow-clone-steps button.active b {
  color: #c4cce0;
}

.workflow-clone-steps span {
  gap: 3px;
  font-size: 17px;
  line-height: 1.15;
}

.workflow-clone-steps button.active span {
  color: #fff;
  font-size: 18px;
}

.workflow-clone-steps small {
  color: rgba(202, 211, 229, .68);
  font-size: 12.5px;
  line-height: 1.3;
}

@media (max-width: 1180px) {
  .workflow-clone-rail {
    padding: 14px;
  }

  .workflow-clone-head {
    grid-template-columns: minmax(0, 1fr) minmax(130px, auto);
    align-items: end;
    margin-bottom: 12px;
  }

  .workflow-clone-head h1 {
    font-size: 22px;
  }

  .workflow-clone-head .ghost {
    align-self: center;
    justify-self: end;
    min-width: 128px;
  }

  .workflow-clone-steps {
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 4px 2px 8px;
  }

  .workflow-clone-steps button {
    flex: 0 0 238px;
    scroll-snap-align: start;
  }
}

@media (max-width: 860px) {
  .workflow-clone-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .workflow-clone-head h1 {
    max-width: none;
    font-size: 21px;
  }

  .workflow-clone-head p {
    max-width: none;
    font-size: 12px;
  }

  .workflow-clone-head .ghost {
    justify-self: stretch;
  }

  .workflow-clone-steps button {
    grid-template-columns: 36px 42px minmax(0, 1fr);
    flex-basis: 214px;
    min-height: 76px;
    padding: 8px 9px;
    column-gap: 8px;
  }

  .workflow-clone-steps b {
    width: 30px;
    height: 42px;
    font-size: 25px;
  }

  .workflow-step-icon {
    width: 38px;
    height: 38px;
  }

  .workflow-clone-steps button.active .workflow-step-icon {
    width: 42px;
    height: 42px;
  }

  .workflow-clone-steps span {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  body:not(.auth-required):not([data-mobile-workflow-screen="detail"]) .workflow-clone-main {
    display: none;
  }

  body:not(.auth-required)[data-mobile-workflow-screen="detail"] .workflow-clone-rail {
    display: none;
  }

  body:not(.auth-required)[data-mobile-workflow-screen="detail"] .workflow-clone-main {
    display: grid;
  }

  .workflow-clone-shell {
    gap: 12px;
  }

  .workflow-clone-rail {
    padding: 18px 16px 20px;
    border-radius: 10px;
    background:
      radial-gradient(circle at 10% 0%, rgba(133, 103, 255, .24), transparent 36%),
      linear-gradient(180deg, #222638 0%, #171c28 100%);
  }

  .workflow-clone-head {
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .workflow-clone-head span {
    font-size: 12px;
    letter-spacing: 0;
  }

  .workflow-clone-head h1 {
    margin: 2px 0 7px;
    font-size: 30px;
    line-height: 1.12;
  }

  .workflow-clone-head p {
    max-width: 300px;
    font-size: 14px;
    line-height: 1.65;
  }

  .workflow-clone-head .ghost {
    min-height: 44px;
    border-radius: 8px;
    font-size: 15px;
  }

  .workflow-clone-steps {
    position: relative;
    display: grid;
    grid-template-rows: none;
    grid-auto-rows: minmax(74px, auto);
    gap: 10px;
    overflow: visible;
    padding: 2px 0 0;
    scroll-snap-type: none;
  }

  .workflow-clone-steps::before {
    display: block;
    top: 38px;
    bottom: 38px;
    left: 61px;
    width: 2px;
    background: linear-gradient(180deg, rgba(130, 93, 255, .10), rgba(171, 92, 242, .72), rgba(130, 93, 255, .10));
  }

  .workflow-clone-steps button {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 74px;
    flex: none;
    grid-template-columns: 38px 48px minmax(0, 1fr);
    column-gap: 10px;
    padding: 10px 12px 10px 8px;
    border: 1px solid rgba(161, 126, 204, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .032);
  }

  .workflow-clone-steps button.active {
    border-color: #ffd965;
    background: linear-gradient(90deg, rgba(126, 79, 177, .70), rgba(59, 66, 114, .80));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .72), 0 16px 32px rgba(0, 0, 0, .25);
  }

  .workflow-clone-steps b {
    width: 32px;
    height: 48px;
    font-size: 30px;
  }

  .workflow-step-icon {
    width: 44px;
    height: 44px;
  }

  .workflow-step-icon::before {
    width: 21px;
    height: 21px;
  }

  .workflow-clone-steps button.active .workflow-step-icon {
    width: 48px;
    height: 48px;
  }

  .workflow-clone-steps button.active .workflow-step-icon::before {
    width: 23px;
    height: 23px;
  }

  .workflow-clone-steps span {
    font-size: 18px;
    line-height: 1.15;
  }

  .workflow-clone-steps button.active span {
    font-size: 18px;
  }

  .workflow-clone-steps small {
    margin-top: 3px;
    font-size: 13px;
  }

  .workflow-mobile-stepbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: -2px -2px 14px;
    padding: 10px 0 12px;
    background:
      linear-gradient(180deg, rgba(29, 33, 45, .98), rgba(29, 33, 45, .88));
    backdrop-filter: blur(12px);
  }

  .workflow-mobile-stepbar button {
    min-height: 38px;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 950;
  }

  .workflow-mobile-stepbar span {
    min-width: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.auth-required)[data-mobile-workflow-screen="detail"] .workflow-clone-board {
    padding-top: 14px;
  }

  body:not(.auth-required)[data-mobile-workflow-screen="detail"] .workflow-clone-panel > h2 {
    display: none;
  }

  body:not(.auth-required)[data-mobile-workflow-screen="detail"] .workflow-clone-footer {
    padding: 12px 14px 14px;
  }

  body:not(.auth-required)[data-mobile-workflow-screen="detail"] .workflow-clone-controls {
    grid-template-columns: minmax(0, 1fr) minmax(112px, .8fr);
    gap: 10px;
  }

  body:not(.auth-required)[data-mobile-workflow-screen="detail"] .workflow-clone-status {
    display: none;
  }
}