:root {
  --paper: #f9f9f9;
  --white: #ffffff;
  --ink: #0b0d0e;
  --muted: #4d5752;
  --line: #000000;
  --mint: #a7f3d0;
  --yellow: #fcd34d;
  --blue: #2f5eea;
  --blue-dark: #1439af;
  --gray: #eeeeee;
  --shadow: 6px 6px 0 #000;
  --shadow-lg: 10px 10px 0 #000;
  --font-display: "Space Grotesk", "Noto Sans SC", sans-serif;
  --font-body: "Manrope", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
}

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; }

button { cursor: pointer; }

[hidden] { display: none !important; }

.app-frame {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 32px 22px;
  background: var(--white);
  border-right: 4px solid var(--line);
  z-index: 20;
}

.side-brand strong {
  display: block;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.12em;
}

.side-brand span {
  display: block;
  margin-top: 8px;
  font-weight: 800;
}

.new-project,
.side-nav a,
.side-footer a,
.hard-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 5px 5px 0 #000;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.new-project {
  width: 100%;
  min-height: 54px;
  background: var(--mint);
}

.side-nav {
  display: grid;
  gap: 18px;
}

.side-nav a {
  justify-content: flex-start;
  min-height: 58px;
  padding: 0 20px;
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}

.side-nav a.is-active,
.side-nav a:hover {
  border-color: var(--line);
  background: var(--blue);
  color: #fff;
  box-shadow: 5px 5px 0 #000;
}

.side-nav span,
.side-footer span { font-size: 22px; line-height: 1; }

.side-footer {
  margin-top: auto;
  display: grid;
  gap: 16px;
}

.side-footer a {
  justify-content: flex-start;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 8px 0;
  color: #2f3734;
}

.main-frame { min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 80px;
  padding: 0 36px;
  background: var(--white);
  border-bottom: 4px solid var(--line);
}

.logo {
  position: relative;
  width: max-content;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.08em;
}

.logo::after {
  content: "";
  position: absolute;
  left: 0;
  right: -6px;
  bottom: 2px;
  height: 6px;
  background: var(--mint);
  z-index: -1;
}

.top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}

.top-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  transition: color 120ms ease, background 120ms ease;
}

.top-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}

.credit-badge {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(135deg, #111d18, #1b4a3b 52%, #9ff2ca);
  color: #fff;
  box-shadow: 0 18px 34px rgba(12,37,29,.16), inset 0 1px 0 rgba(255,255,255,.28);
}

.credit-badge span {
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.72);
}

.credit-badge strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.hard-btn,
.ghost-btn {
  min-height: 46px;
  padding: 0 24px;
}

.hard-btn { background: var(--mint); }
.ghost-btn { background: var(--white); }
.hard-btn:hover,
.ghost-btn:hover,
.new-project:hover,
.agent-pick:hover { transform: translate(4px, 4px); box-shadow: 1px 1px 0 #000; }
.hard-btn.large,
.ghost-btn.large { min-height: 62px; font-size: 16px; }

.grid-paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(0,0,0,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.16) 1px, transparent 1px);
  background-size: 28px 28px;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(360px, 1.1fr);
  gap: 60px;
  align-items: center;
  min-height: 620px;
  padding: 80px 72px;
  border-bottom: 2px solid var(--line);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 42px;
  width: 260px;
  height: 260px;
  background: var(--mint);
  border: 2px solid var(--line);
  transform: rotate(-7deg);
  z-index: 0;
}

.hero-copy,
.hero-art { position: relative; z-index: 1; }

.tilt-label,
.blue-sticker,
.result-label {
  display: inline-flex;
  width: max-content;
  padding: 8px 16px;
  border: 2px solid var(--line);
  background: var(--yellow);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transform: rotate(-3deg);
}

.hero h1 {
  margin: 34px 0 24px;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8vw, 8.6rem);
  line-height: 0.92;
  letter-spacing: -0.08em;
}

.hero h1 span {
  display: block;
  text-shadow: 6px 6px 0 var(--mint);
}

.hero h1 mark {
  display: inline-block;
  margin-top: 12px;
  padding: 0 22px 8px;
  color: #fff;
  background: var(--blue);
  border: 3px solid var(--line);
  box-shadow: 8px 8px 0 var(--mint), 12px 12px 0 var(--yellow);
  font-style: italic;
}

.hero p {
  max-width: 520px;
  margin: 0;
  padding-left: 22px;
  border-left: 4px solid #1b6b4f;
  background: rgba(255,255,255,.72);
  font-size: 18px;
  line-height: 1.8;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 40px;
}

.hero-art {
  display: flex;
  justify-content: center;
  padding: 46px 0;
  border-left: 2px solid var(--line);
}

.art-window {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  background: #020403;
  border: 2px solid var(--line);
  box-shadow: 10px 10px 0 #000;
  overflow: hidden;
}

.art-window::before {
  content: "";
  position: absolute;
  inset: 18%;
  background:
    radial-gradient(circle at 45% 38%, var(--mint) 0 8%, transparent 9%),
    radial-gradient(circle at 62% 30%, #e8c374 0 5%, transparent 6%),
    radial-gradient(circle at 36% 64%, #d6a45b 0 11%, transparent 12%),
    linear-gradient(135deg, transparent 45%, rgba(167,243,208,.42) 45% 53%, transparent 54%);
  filter: drop-shadow(0 20px 18px rgba(167,243,208,.35));
}

.art-orbit { position: absolute; border: 2px solid var(--mint); border-radius: 999px; }
.orbit-a { width: 46%; height: 46%; left: 29%; top: 22%; transform: rotate(28deg); }
.orbit-b { width: 30%; height: 30%; right: 18%; bottom: 17%; border-color: #d6a45b; }
.orbit-c { width: 12px; height: 12px; left: 20%; top: 24%; background: var(--mint); }
.art-ring { position:absolute; inset: 28% 34% 42% 34%; border: 4px solid #d6a45b; border-radius: 50%; transform: rotate(-20deg); }
.art-base { position:absolute; left: 28%; right: 20%; bottom: 22%; height: 10%; background: linear-gradient(90deg,#3a4541,#d8f7ea,#48534e); transform: skewX(-12deg); }
.art-label { position: absolute; z-index: 2; padding: 8px 14px; background: var(--white); border: 2px solid var(--line); font-family: var(--font-display); font-size: 12px; }
.art-label.left { left: -24px; top: 16%; }
.art-label.right { right: -18px; bottom: 20%; transform: rotate(5deg); }

.protocols,
.account-zone,
.ops-zone,
.workspace-zone,
.agents-section,
.gallery-strip { padding: 72px; }

.section-title { margin-bottom: 36px; }
.section-title h2,
.workspace-intro h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.06em;
}
.section-title p,
.workspace-intro p { margin: 0; color: var(--muted); font-size: 18px; }

.protocol-grid { display: grid; grid-template-columns: 320px minmax(420px, 1fr); gap: 34px; }
.protocol-card { position: relative; border: 2px solid var(--line); box-shadow: var(--shadow-lg); }
.mint-card { min-height: 300px; padding: 54px 36px 28px; background: var(--mint); }
.wide-card { min-height: 300px; display: flex; align-items: end; padding: 38px; background: linear-gradient(135deg, #837735, #6d5e24 40%, #d5b64a); }
.round-icon { position: absolute; top: 24px; right: 24px; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; border:2px solid var(--line); background: var(--white); }
.white-inset { background: var(--white); border: 2px solid var(--line); padding: 28px; }
.white-inset h3 { margin: 0 0 14px; font-family: var(--font-display); font-size: 34px; line-height:1.05; }
.white-inset p { margin:0 0 24px; color:var(--muted); line-height:1.65; }
.white-inset a { font-family:var(--font-display); font-weight:800; border-bottom:3px solid var(--yellow); }
.wide-inset { width:min(560px, 100%); }
.blue-sticker { position:absolute; top:22px; right:22px; color:#fff; background:var(--blue); transform:rotate(4deg); }
.mini-tags { display:flex; gap:8px; }
.mini-tags span { padding:5px 12px; border:1px solid var(--line); background:var(--gray); font-size:12px; font-weight:800; }

.account-zone,
.ops-zone { border-top: 2px solid var(--line); background: #f5f5f5; }
.account-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:24px; }
.account-card,
.ops-panel { padding:28px; border:2px solid var(--line); background:var(--white); box-shadow:var(--shadow-lg); }
.account-card h3 { margin:0 0 12px; font-family:var(--font-display); font-size:34px; }
.account-status { margin:14px 0; padding:12px; border:2px solid var(--line); background:var(--yellow); font-weight:800; }
.auth-form { display:grid; gap:14px; margin-top:18px; }
.auth-actions,
.oauth-row,
.ops-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; }
.plan-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.plan-card { display:grid; gap:8px; padding:18px; text-align:left; border:2px solid var(--line); background:var(--mint); box-shadow:4px 4px 0 #000; }
.plan-card:nth-child(2) { background:var(--yellow); }
.plan-card:nth-child(3) { background:var(--blue); color:#fff; }
.plan-card strong { font-family:var(--font-display); font-size:22px; }
.plan-card span { font-size:28px; font-weight:900; }
.plan-card em { font-style:normal; font-weight:800; }
.ops-result { margin-top:20px; }
.ops-metrics { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.ops-metrics article { padding:16px; border:2px solid var(--line); background:var(--mint); box-shadow:4px 4px 0 #000; }
.ops-metrics strong { display:block; font-family:var(--font-display); font-size:30px; }
.ops-table { display:grid; gap:8px; }
.ops-table p { display:grid; grid-template-columns: minmax(180px,1fr) 120px 120px; gap:12px; margin:0; padding:12px; border:1px solid var(--line); background:var(--gray); }

.workspace-zone { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.workspace-intro { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:50px; }
.workspace-intro p { max-width: 520px; text-align:right; }
.agent-layout { display:grid; grid-template-columns: 360px minmax(0,1fr); gap:34px; align-items:start; }
.agent-selector { display:grid; gap:14px; }
.agent-pick { position:relative; width:100%; padding:18px; text-align:left; background:var(--white); border:2px solid var(--line); box-shadow:5px 5px 0 #000; color:var(--ink); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.agent-pick.is-active { background:var(--blue); color:#fff; }
.agent-pick:nth-child(3n) { background:#f1f1f1; }
.agent-pick:nth-child(3n).is-active { background:var(--blue); }
.agent-pick-type { display:block; margin-bottom:10px; font-family:var(--font-display); font-size:12px; font-weight:800; letter-spacing:.12em; }
.agent-pick strong { display:block; font-family:var(--font-display); font-size:22px; line-height:1.1; }
.agent-pick p { margin:10px 0 0; color:inherit; opacity:.82; line-height:1.55; }

.workspace-panel { position:relative; background:var(--white); border:2px solid var(--line); box-shadow: var(--shadow-lg); padding:0 28px 28px; }
.window-chrome { display:flex; align-items:center; gap:10px; height:54px; margin:0 -28px 24px; padding:0 24px; border-bottom:2px solid var(--line); transform: rotate(.4deg); }
.window-chrome span { width:14px; height:14px; border-radius:50%; border:2px solid var(--line); }
.window-chrome span:nth-child(1){ background:#ef4444; }
.window-chrome span:nth-child(2){ background:var(--yellow); }
.window-chrome span:nth-child(3){ background:var(--mint); }
.window-chrome strong { margin-left:auto; margin-right:auto; font-family:var(--font-display); font-size:13px; letter-spacing:.2em; }
.workspace-head { display:flex; justify-content:space-between; gap:24px; align-items:start; padding-bottom:20px; border-bottom:1px solid var(--line); }
.workspace-kicker { margin:0 0 8px; color:var(--blue); font-family:var(--font-display); font-weight:800; letter-spacing:.12em; }
.workspace-head h3 { margin:0; font-family:var(--font-display); font-size:40px; line-height:1; letter-spacing:-.04em; }
.workspace-alert {
  max-width: 520px;
  margin: 8px 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(0,126,98,.22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(167,243,208,.72), rgba(220,213,255,.48));
  color: #073f31;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.45;
  box-shadow: 0 16px 34px rgba(27,107,79,.10), inset 0 1px 0 rgba(255,255,255,.88);
}
.workspace-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.workspace-badges span { padding:6px 10px; border:1px solid var(--line); background:var(--yellow); font-family:var(--font-display); font-size:12px; font-weight:800; }

.workspace-form { display:grid; gap:22px; margin-top:26px; }
.field { display:grid; gap:10px; }
.field > span { font-family:var(--font-display); font-weight:900; letter-spacing:.04em; }
.upload-field { min-height:220px; padding:22px; border:2px dashed var(--line); background:#fbfbfb; align-content:center; justify-items:center; text-align:center; }
.upload-field input { max-width: 260px; }
.upload-field em { font-style:normal; font-size:20px; font-weight:900; }
.field-row { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
select, textarea, input[type="text"], input[type="file"] { width:100%; border:2px solid var(--line); background:var(--white); padding:14px; color:var(--ink); }
.select-wrap { position:relative; }
.form-submit { width:max-content; min-width:220px; }

.status-line {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 1px solid rgba(0,126,98,.2);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(236,253,245,.72));
  color: #073f31;
  font-weight: 950;
  box-shadow: 0 14px 34px rgba(27,107,79,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.status-line.error,
.status-line[data-state="error"] {
  border-color: rgba(239,68,68,.24);
  background: linear-gradient(135deg, rgba(254,226,226,.94), rgba(255,247,237,.78)) !important;
  color: #991b1b;
}
.status-line.loading,
.status-line[data-state="loading"] {
  border-color: rgba(0,126,98,.2);
  background: linear-gradient(135deg, rgba(167,243,208,.72), rgba(220,213,255,.44)) !important;
  color: #065f46;
}
.status-line.success,
.status-line[data-state="success"] {
  border-color: rgba(0,126,98,.24);
  background: linear-gradient(135deg, rgba(187,247,208,.86), rgba(219,234,254,.66)) !important;
  color: #065f46;
}
.result-shell { margin-top:24px; }
.result-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
.result-card { border:2px solid var(--line); background:var(--white); padding:20px; box-shadow:5px 5px 0 #000; }
.result-card-wide { grid-column:1 / -1; }
.result-card h4 { margin:8px 0 16px; font-family:var(--font-display); font-size:28px; }
.result-card p { line-height:1.65; }
.bullet-list { margin:0; padding-left:18px; line-height:1.7; }
.attempt-list, .action-list { display:grid; gap:10px; margin-top:16px; }
.attempt-item { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); background:var(--gray); }
.secret-pipeline-card p { max-width: 760px; color: #4a5d69; font-weight: 800; }
.secret-pipeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.secret-pipeline span {
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #f6f1e7;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
}
.secret-pipeline span.is-done { background: var(--mint); }
.secret-pipeline span.is-active {
  background: var(--yellow);
  box-shadow: 3px 3px 0 #000;
}
.reference-preview { padding:14px; border:2px solid var(--line); background:var(--mint); }
.reference-count { margin-bottom:10px; font-family:var(--font-display); font-weight:900; }
.reference-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap:12px; }
.reference-item { position:relative; border:2px solid var(--line); background:var(--white); padding:6px; }
.reference-item img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.reference-filename {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  color: #173126;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reference-remove { position:absolute; right:-8px; top:-8px; width:26px; height:26px; border:2px solid var(--line); background:var(--yellow); font-weight:900; }
.generated-image, .generated-video { display:block; width:100%; max-height:720px; object-fit:contain; border:2px solid var(--line); background:#111; }
.storyboard-placeholder { display:grid; place-items:center; min-height:360px; border:2px dashed var(--line); background:#f3f3f3; font-family:var(--font-display); font-size:28px; font-weight:900; }
.zoomable-media { cursor: zoom-in; }
.video-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:18px; }
.video-actions[hidden] { display:none !important; }
.planned-pane { margin-top:24px; }
.planned-list { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-top:16px; }

.module-pane {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 34px;
  background: rgba(255,255,255,.58);
  box-shadow: var(--shadow), var(--inner-glow);
}

.module-pane[data-module-id="ecommerce-suite"] {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.module-pane[data-module-id="ecommerce-suite"] .module-head {
  display: none;
}

.module-pane[data-module-id="face-transform"] .module-head {
  display: none;
}

.module-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 14px 14px 18px;
  border-bottom: 1px solid rgba(82,97,111,.12);
}

.module-head h4 {
  margin: 6px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.module-head p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.65;
}

.module-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.module-action-card {
  display: grid;
  gap: 10px;
  min-height: 132px;
  padding: 22px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(167,243,208,.24), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(247,251,250,.7));
  color: #132019;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 16px 36px rgba(83,92,128,.08);
}

.module-action-card:hover {
  background:
    radial-gradient(circle at 12% 0%, rgba(167,243,208,.42), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,246,242,.82));
}

.module-action-card strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.module-action-card span {
  color: #52616f;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.module-form {
  margin-top: 18px;
}

.module-form textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px rgba(83,92,128,.06);
  color: #12231d;
  line-height: 1.7;
}

.ecommerce-suite {
  display: grid;
  gap: 24px;
  margin-top: 0;
  min-width: 0;
}

.face-transform-workbench {
  display: grid;
  gap: 22px;
}

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

.face-upload-card,
.face-transform-prompt,
.face-transform-action-row {
  border: 1px solid rgba(207, 218, 226, .9);
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 44px rgba(83,92,128,.08), inset 0 1px 0 rgba(255,255,255,.92);
  padding: 24px;
}

.face-upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.face-upload-head h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.05em;
}

.face-upload-head button {
  border: 0;
  border-radius: 999px;
  background: #eef4f4;
  color: #52616f;
  font-weight: 950;
  padding: 8px 12px;
  cursor: pointer;
}

.face-upload-box {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 300px);
  aspect-ratio: 9 / 16;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px dashed rgba(0, 184, 131, .32);
  border-radius: 24px;
  background: linear-gradient(135deg, #fff, rgba(236,253,245,.66));
  cursor: pointer;
}

.face-upload-box.has-media {
  display: block;
  border-style: solid;
  border-color: rgba(0, 184, 131, .28);
  background:
    radial-gradient(circle at 18% 10%, rgba(167,243,208,.38), transparent 36%),
    linear-gradient(135deg, #f8fafc, #eefaf5);
  cursor: default;
}

.face-upload-box input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.face-upload-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}

.face-upload-empty span {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: linear-gradient(135deg, #a7f3d0, #dcd5ff);
  color: #14352c;
  font-size: 28px;
  font-weight: 950;
}

.face-upload-empty strong {
  color: #07151e;
  font-size: 18px;
  font-weight: 950;
}

.face-upload-ready span {
  background: linear-gradient(135deg, #dcfce7, #bfdbfe);
}

.face-upload-empty em,
.face-file-name,
.face-transform-action-row p {
  color: #65758a;
  font-style: normal;
  font-weight: 800;
}

.face-upload-media {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f8fafc;
}

.face-upload-card[data-face-card="video"] .face-upload-media {
  background: #07151e;
}

.face-upload-video {
  object-fit: cover;
}

.face-preview-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #14352c;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
}

.face-preview-status {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #52616f;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
}

.face-file-name {
  margin: 12px 0 0;
}

.face-transform-prompt {
  display: grid;
  gap: 12px;
}

.face-transform-prompt span {
  color: #07151e;
  font-weight: 950;
}

.face-transform-prompt textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid rgba(212,222,232,.95);
  border-radius: 18px;
  background: #fff;
  color: #12231d;
  font-weight: 850;
  line-height: 1.65;
  padding: 16px;
  resize: vertical;
}

.face-transform-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.face-transform-action-row strong {
  color: #19352b;
  font-weight: 950;
}

.face-transform-action-row p {
  margin: 6px 0 0;
}

.face-transform-start {
  min-width: 220px;
}

.face-transform-result:empty {
  display: none;
}

.face-transform-result {
  display: grid;
  justify-items: center;
}

.face-transform-result .agent-progress {
  width: min(720px, 100%);
  margin-inline: auto;
}

.ecommerce-suite-grid {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: start;
  min-width: 0;
}

.ecom-panel {
  min-width: 0;
  border: 1px solid rgba(207, 218, 226, .9);
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 44px rgba(83,92,128,.08), inset 0 1px 0 rgba(255,255,255,.92);
  padding: 28px;
}

.ecom-panel h4 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.05em;
}

.ecom-upload-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 28px;
  border: 1px dashed rgba(255, 116, 74, .42);
  border-radius: 24px;
  background: linear-gradient(135deg, #fff, rgba(255,250,246,.62));
  text-align: center;
  cursor: pointer;
}

.ecom-upload-box input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.ecom-upload-box strong {
  display: block;
  margin-top: 12px;
  color: #07151e;
  font-size: 18px;
  font-weight: 950;
}

.ecom-upload-box em {
  display: block;
  margin-top: 12px;
  color: #65758a;
  font-style: normal;
  font-weight: 750;
}

.ecom-upload-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f2edff, #e1defe);
  color: #bf4b18;
  font-size: 26px;
  font-weight: 950;
}

.ecom-preview {
  margin-top: 16px;
}

.ecom-field,
.ecom-setting-block {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.ecom-field > span,
.ecom-block-label,
.ecom-setting-head > span,
.ecom-quantity-head span {
  color: #07151e;
  font-weight: 950;
}

.ecom-field em {
  color: #76879b;
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
}

.ecom-select-wrap {
  max-width: 380px;
}

.ecom-setting-head,
.ecom-quantity-head,
.ecom-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.ecom-setting-head {
  flex-wrap: wrap;
}

.ecom-setting-head > div {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ecom-setting-head button {
  border: 0;
  background: transparent;
  color: #52616f;
  font-weight: 900;
  cursor: pointer;
}

.ecom-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 14px;
}

.ecom-type-card {
  display: grid;
  gap: 8px;
  min-height: 86px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(246,250,249,.74));
  box-shadow: 0 12px 28px rgba(83,92,128,.07);
  cursor: pointer;
}

.ecom-type-card.is-active {
  border-color: #de5b22;
  background: #ffded2;
  color: #7e2406;
}

.ecom-type-card strong {
  font-size: 16px;
  font-weight: 950;
}

.ecom-type-card span {
  color: #536478;
  font-size: 12px;
  font-weight: 800;
}

.ecom-type-count {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.ecom-type-count button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #de5b22;
  font-weight: 950;
}

.ecom-type-count em {
  min-width: 16px;
  text-align: center;
  font-style: normal;
  font-weight: 950;
}

.ecom-ratio-row,
.ecom-quantity-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ecom-ratio-pill,
.ecom-quantity-buttons button {
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #e7ebef;
  color: #183027;
  font-weight: 900;
  cursor: pointer;
}

.ecom-ratio-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ecom-ratio-pill i {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(82,97,111,.18);
}

.ecom-ratio-pill.is-active,
.ecom-quantity-buttons button.is-active {
  border-color: #de5b22;
  background: #fff3ec;
  color: #9a330a;
}

.ecom-ratio-pill.is-active i {
  background: #9a330a;
  box-shadow: inset 0 0 0 3px #fff;
}

.ecom-quantity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  gap: 14px;
  align-items: center;
}

.ecom-quantity-row input,
.ecom-field textarea {
  width: 100%;
  border: 1px solid rgba(212,222,232,.95);
  border-radius: 16px;
  background: #fff;
  color: #12231d;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.ecom-quantity-row input {
  min-height: 46px;
  padding: 0 16px;
}

.ecom-field textarea {
  min-height: 104px;
  padding: 16px;
  resize: vertical;
  line-height: 1.65;
}

.ecom-action-row {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(82,97,111,.12);
}

.ecom-action-row strong {
  color: #496072;
  font-size: 15px;
}

.ecom-action-row p {
  margin: 6px 0 0;
  color: #748397;
  font-weight: 750;
}

.ecom-start-btn {
  min-width: 150px;
}

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

.ecom-status-grid div {
  min-height: 76px;
  padding: 16px;
  border: 1px solid rgba(212,222,232,.95);
  border-radius: 16px;
  background: #f3f5f8;
}

.ecom-status-grid div.is-active {
  border-color: rgba(0,184,131,.34);
  background:
    radial-gradient(circle at 15% 20%, rgba(167,243,208,.55), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(238,244,255,.82));
  box-shadow: 0 18px 40px rgba(0,184,131,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

.ecom-status-grid span {
  display: block;
  color: #68778b;
  font-size: 13px;
  font-weight: 850;
}

.ecom-status-grid strong {
  display: block;
  margin-top: 8px;
  color: #08141d;
  font-size: 20px;
  font-weight: 950;
}

.ecom-status-bar {
  height: 9px;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe5f6;
}

.ecom-status-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, #a7f3d0, #7c5cff);
  transition: width 260ms ease;
}

.ecom-status-motion {
  margin: 16px 0;
}

.ecom-status-motion .storyboard-placeholder {
  min-height: 220px;
  border: 1px dashed rgba(0,126,98,.22);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(167,243,208,.28), rgba(220,213,255,.24)),
    rgba(255,255,255,.68);
  font-size: clamp(24px, 4vw, 34px);
}

.ecom-log-box,
.ecom-empty-box {
  min-height: 64px;
  padding: 18px;
  border: 1px dashed rgba(82,97,111,.18);
  border-radius: 16px;
  background: #f8fafc;
  color: #66788d;
  font-weight: 800;
}

.ecom-log-box p {
  margin: 0 0 8px;
}

.ecom-result-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 18px;
}

.ecom-analysis-list {
  display: grid;
  gap: 12px;
}

.ecom-analysis-list p {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  color: #172721;
  font-weight: 800;
}

.ecom-analysis-list span {
  display: block;
  margin-bottom: 6px;
  color: #007e62;
  font-weight: 950;
}

.ecom-analysis-card {
  padding: 16px;
  border-radius: 18px;
  background: #f8fafc;
  color: #172721;
  font-weight: 800;
}

.ecom-analysis-card > span {
  display: block;
  margin-bottom: 10px;
  color: #007e62;
  font-weight: 950;
}

.ecom-analysis-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  line-height: 1.65;
}

.ecom-analysis-card li strong {
  color: #06141c;
  font-weight: 950;
}

.ecom-blueprint-list {
  display: grid;
  gap: 10px;
}

.ecom-blueprint-list article {
  padding: 12px;
  border: 1px solid rgba(16,185,129,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.76);
}

.ecom-blueprint-list strong {
  display: block;
  color: #06141c;
  font-weight: 950;
}

.ecom-blueprint-list p {
  margin: 5px 0 0;
  padding: 0;
  background: transparent;
  color: #496072;
  font-size: 13px;
}

.ecom-output-grid {
  display: grid;
  gap: 16px;
}

.ecom-output-card {
  padding: 14px;
  border: 1px solid rgba(212,222,232,.95);
  border-radius: 20px;
  background: #fff;
}

.ecom-output-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ecom-output-head strong {
  font-weight: 950;
}

.ecom-output-head em {
  color: #007e62;
  font-style: normal;
  font-weight: 900;
}

.ecom-output-placeholder {
  display: grid;
  place-items: center;
  min-height: 240px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(167,243,208,.2), rgba(220,213,255,.22));
  color: #17352b;
  font-weight: 950;
}

.agents-section { background:#f5f5f5; }
.agent-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:20px; }
.agent-grid article { min-height:180px; padding:22px; border:2px solid var(--line); background:var(--white); box-shadow:5px 5px 0 #000; }
.agent-grid article:nth-child(odd) { background:var(--mint); }
.agent-grid article:nth-child(3n) { background:var(--yellow); }
.agent-grid b { font-family:var(--font-display); color:var(--blue); }
.agent-grid h3 { margin:16px 0 10px; font-family:var(--font-display); font-size:28px; line-height:1.05; }
.agent-grid p { margin:0; line-height:1.65; }

.gallery-strip { background:var(--paper); }
.sequence-card { padding:34px; border:2px solid var(--line); background:var(--white); box-shadow:var(--shadow-lg); }
.sequence-head { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:24px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.sequence-head h2 { margin:0; font-family:var(--font-display); font-size:40px; }
.sequence-head button { width:46px; height:46px; border:2px solid var(--line); background:var(--yellow); box-shadow:4px 4px 0 #000; font-weight:900; }
.sequence-grid { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:18px; }
.sequence-grid span { display:grid; place-items:center; aspect-ratio:1; border:2px dashed var(--line); background:#f8f8f8; color:#6b756f; font-family:var(--font-display); font-size:22px; font-weight:900; }
.sequence-grid span:nth-child(-n+5) { border-style:solid; background:var(--gray); box-shadow:4px 4px 0 #000; color:var(--ink); }
.sequence-grid span:nth-child(5) { background:var(--blue); color:#fff; }

.footer-banner { padding:56px 72px; border-top:4px solid var(--line); background:#ffcc12; text-align:center; }
.footer-banner nav { display:flex; justify-content:center; flex-wrap:wrap; gap:34px; margin-bottom:32px; font-family:var(--font-display); font-size:20px; font-weight:900; font-style:italic; }
.footer-banner strong { display:block; padding-top:28px; border-top:2px solid var(--line); font-family:var(--font-display); font-size:36px; font-style:italic; letter-spacing:-.05em; }

.media-lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:40px; background:rgba(0,0,0,.82); }
.lightbox-close { position:fixed; top:22px; right:22px; width:48px; height:48px; border:2px solid var(--line); background:var(--yellow); box-shadow:4px 4px 0 #000; font-size:30px; font-weight:900; }
.lightbox-content { max-width:min(1100px, 95vw); max-height:88vh; }
.lightbox-content img, .lightbox-content video { max-width:100%; max-height:88vh; border:2px solid var(--line); background:#000; }

.small-action { min-height:38px; padding:0 14px; font-size:13px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:2px solid var(--line); background:var(--white); box-shadow:4px 4px 0 #000; color:var(--ink); font-family:var(--font-display); font-weight:900; padding:12px 18px; }
.button-primary { background:var(--mint); }
.button-secondary { background:var(--white); }

@media (max-width: 1100px) {
  .app-frame { grid-template-columns: 1fr; }
  .sidebar { position:relative; height:auto; border-right:0; border-bottom:4px solid var(--line); }
  .side-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .side-footer { margin-top:0; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .topbar { grid-template-columns: 1fr; height:auto; padding:20px; }
  .top-nav, .top-actions { justify-self:start; }
  .hero, .agent-layout, .protocol-grid { grid-template-columns:1fr; }
  .hero-art { border-left:0; border-top:2px solid var(--line); }
  .workspace-intro { display:block; }
  .workspace-intro p { margin-top:12px; text-align:left; }
  .face-transform-grid,
  .ecommerce-suite-grid,
  .ecom-result-grid {
    grid-template-columns: 1fr;
  }
  .face-transform-action-row {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .hero, .protocols, .account-zone, .ops-zone, .workspace-zone, .agents-section, .gallery-strip, .footer-banner { padding:40px 18px; }
  .hero h1 { font-size:3.8rem; }
  .agent-grid, .field-row, .result-grid, .account-grid, .plan-grid, .ops-metrics { grid-template-columns:1fr; }
  .ops-table p { grid-template-columns:1fr; }
  .sequence-grid { gap:8px; }
  .footer-banner strong { font-size:24px; }
  .side-nav { grid-template-columns:1fr; }
}

/* Vitality / Lumina refresh: soft glass, organic gradients, rounded surfaces */
:root {
  --paper: #f7f9fb;
  --white: rgba(255, 255, 255, 0.72);
  --ink: #15191c;
  --muted: #52616f;
  --line: rgba(255, 255, 255, 0.72);
  --mint: #a7f3d0;
  --mint-strong: #00b883;
  --lavender: #dcd5ff;
  --peach: #f2e1c9;
  --blue: #6f83ea;
  --blue-dark: #1b6b4f;
  --gray: rgba(248, 250, 252, 0.72);
  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-muted: rgba(242, 244, 246, 0.74);
  --stroke: rgba(255, 255, 255, 0.82);
  --shadow: 0 24px 70px rgba(49, 108, 91, 0.12);
  --shadow-lg: 0 36px 110px rgba(83, 92, 128, 0.16);
  --inner-glow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.34);
  --font-display: "Manrope", "Noto Sans SC", sans-serif;
  --font-body: "Manrope", "Noto Sans SC", sans-serif;
}

html { background: #f7f9fb; }

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(167, 243, 208, 0.46), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(220, 213, 255, 0.5), transparent 31%),
    radial-gradient(circle at 74% 72%, rgba(242, 225, 201, 0.44), transparent 28%),
    linear-gradient(135deg, #fbfdfc 0%, #f6f8fb 46%, #eef8f2 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  filter: blur(36px);
  opacity: .72;
}

body::before {
  width: 52vw;
  height: 52vw;
  left: 22vw;
  top: 92px;
  border-radius: 42% 58% 64% 36% / 52% 40% 60% 48%;
  background:
    radial-gradient(circle at 30% 26%, rgba(167, 243, 208, .86), transparent 34%),
    radial-gradient(circle at 70% 28%, rgba(220, 213, 255, .78), transparent 30%),
    radial-gradient(circle at 48% 78%, rgba(191, 227, 223, .84), transparent 36%);
  animation: vitalityFloat 14s ease-in-out infinite alternate;
}

body::after {
  width: 34vw;
  height: 24vw;
  right: -8vw;
  bottom: 10vh;
  border-radius: 999px;
  background: rgba(167, 243, 208, .42);
}

@keyframes vitalityFloat {
  from { transform: translate3d(-18px, -8px, 0) rotate(-4deg) scale(1); }
  to { transform: translate3d(22px, 20px, 0) rotate(5deg) scale(1.04); }
}

.app-frame {
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 28px;
  padding: 24px;
}

.sidebar,
.topbar,
.protocol-card,
.account-card,
.ops-panel,
.workspace-card,
.agent-pick,
.result-card,
.agent-grid article,
.sequence-card,
.footer-banner,
.modal-panel {
  border: 1px solid var(--stroke) !important;
  background: var(--glass) !important;
  box-shadow: var(--shadow), var(--inner-glow) !important;
  backdrop-filter: blur(28px) saturate(1.18);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
}

.sidebar {
  top: 24px;
  height: calc(100vh - 48px);
  border-radius: 42px;
  padding: 34px 28px;
}

.side-brand strong,
.logo,
.agent-grid b {
  color: transparent;
  background: linear-gradient(100deg, #00bf89, #58bdd1 45%, #7a83ff 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.side-brand span { color: var(--muted); font-weight: 500; }

.new-project,
.side-nav a,
.side-footer a,
.hard-btn,
.ghost-btn,
.button,
.sequence-head button,
.reference-remove,
.lightbox-close {
  border: 1px solid rgba(255,255,255,.84) !important;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(67, 115, 100, .11), var(--inner-glow) !important;
  letter-spacing: 0;
}

.new-project,
.hard-btn,
.button-primary {
  color: #063d2c;
  background: linear-gradient(135deg, #a7f3d0, #dcd5ff) !important;
}

.ghost-btn,
.button-secondary,
.side-nav a,
.side-footer a {
  background: rgba(255,255,255,.46) !important;
  color: #486073;
}

.side-nav a.is-active,
.side-nav a:hover,
.side-footer a:hover {
  color: #006d52;
  background: linear-gradient(135deg, rgba(167,243,208,.72), rgba(219,238,255,.76)) !important;
}

.hard-btn:hover,
.ghost-btn:hover,
.new-project:hover,
.agent-pick:hover,
.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(27, 107, 79, .18), var(--inner-glow) !important;
}

.main-frame {
  border-radius: 46px;
  overflow: clip;
}

.topbar {
  top: 24px;
  margin-bottom: 18px;
  border-radius: 999px;
  height: 72px;
  padding: 0 32px;
}

.logo {
  font-style: normal;
  letter-spacing: -.06em;
}
.logo::after { display: none; }
.top-nav { color: #617085; font-weight: 700; }
.top-nav a:hover { color: #00896a; }
.top-nav a.is-active,
.top-nav a[aria-current="page"] {
  color: #073f31;
  background: linear-gradient(135deg, rgba(167,243,208,.65), rgba(220,213,255,.55));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.grid-paper {
  background: transparent;
}

.hero {
  min-height: 680px;
  margin: 0 0 28px;
  padding: 78px 64px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 56px;
  background: rgba(255,255,255,.38);
  box-shadow: var(--shadow-lg), var(--inner-glow);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.hero::before {
  right: 8%;
  bottom: 10%;
  width: 54%;
  height: 66%;
  border: 0;
  border-radius: 44% 56% 62% 38% / 58% 44% 56% 42%;
  background:
    radial-gradient(circle at 28% 24%, rgba(167,243,208,.9), transparent 34%),
    radial-gradient(circle at 72% 32%, rgba(220,213,255,.76), transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(210,232,229,.84), transparent 40%);
  filter: blur(12px);
  opacity: .78;
  transform: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 7% 4% auto auto;
  width: 42%;
  height: 78%;
  border-radius: 999px;
  background: rgba(210, 216, 220, .36);
  z-index: 0;
}

.tilt-label,
.blue-sticker,
.result-label,
.agent-tag,
.mini-tags span,
.workspace-badges span {
  border: 1px solid rgba(255,255,255,.84) !important;
  border-radius: 999px;
  background: rgba(255,255,255,.62) !important;
  color: #006d52;
  box-shadow: var(--inner-glow);
  transform: none;
  letter-spacing: .04em;
}

.hero h1 {
  max-width: 620px;
  font-size: clamp(4rem, 7vw, 7.8rem);
  line-height: .98;
  letter-spacing: -.08em;
}

.hero h1 span { text-shadow: none; }
.hero h1 mark {
  padding: 0;
  border: 0;
  box-shadow: none;
  color: transparent;
  background: linear-gradient(100deg, #007d5c, #5a6f88 45%, #7677e8 92%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}

.hero p {
  max-width: 680px;
  padding: 0;
  border-left: 0;
  background: transparent;
  color: #3f4d59;
}

.hero-art {
  border-left: 0;
  padding: 24px 0;
}

.art-window {
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 52px;
  background:
    radial-gradient(circle at 60% 30%, rgba(255,255,255,.7), transparent 12%),
    linear-gradient(145deg, #b8e5d5, #6e9d92 62%, #3f6c63);
  box-shadow: 0 40px 120px rgba(27,107,79,.2), var(--inner-glow);
}
.art-window::before { filter: blur(2px) drop-shadow(0 24px 22px rgba(255,255,255,.36)); }
.art-label { border: 1px solid rgba(255,255,255,.82); border-radius: 999px; background: rgba(255,255,255,.72); }

.protocols,
.account-zone,
.ops-zone,
.workspace-zone,
.agents-section,
.gallery-strip {
  padding: 56px 0;
  border: 0;
  background: transparent;
}

.section-title h2,
.workspace-intro h2,
.sequence-head h2 {
  letter-spacing: -.055em;
  color: #131a1f;
}
.section-title p,
.workspace-intro p { color: var(--muted); }

.protocol-card,
.account-card,
.ops-panel,
.workspace-card,
.sequence-card {
  border-radius: 42px;
  overflow: hidden;
}

.mint-card,
.wide-card,
.account-zone,
.ops-zone,
.agents-section,
.gallery-strip {
  background: transparent !important;
}

.white-inset,
.auth-tabs,
.plan-card,
.ops-metric,
.agent-pick,
.upload-field,
.field input,
.field select,
textarea,
.result-card,
.attempt-item,
.reference-preview,
.planned-list .attempt-item {
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 30px;
  background: rgba(255,255,255,.58) !important;
  box-shadow: var(--inner-glow);
}

.white-inset { box-shadow: none; }
.round-icon { border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.7); }

.account-card h3,
.white-inset h3,
.workspace-title h3,
.agent-grid h3,
.result-card h4 {
  letter-spacing: -.035em;
}

.auth-tabs { padding: 6px; }
.auth-tab { border-radius: 999px !important; border: 0 !important; box-shadow: none !important; }
.auth-tab.is-active { background: linear-gradient(135deg, #a7f3d0, #e5deff) !important; color: #053d2d; }

.agent-layout { gap: 28px; }
.agent-list,
.workspace-card { border-radius: 42px; }
.agent-list { gap: 14px; }
.agent-pick { padding: 22px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.agent-pick.is-active {
  background: linear-gradient(135deg, rgba(167,243,208,.74), rgba(230,239,255,.74)) !important;
  color: #10201c;
}
.agent-pick-type { color: #007d5c; }

.workspace-card { padding: 28px; }
.workspace-head { border-bottom: 1px solid rgba(82,97,111,.12); }
.upload-field {
  min-height: 218px;
  border-style: dashed !important;
  border-color: rgba(0, 128, 96, .18) !important;
}
.upload-field em { color: #1b6b4f; }
select, textarea, input[type="text"], input[type="file"] {
  border-radius: 999px;
  border-color: rgba(255,255,255,.86) !important;
  background: rgba(248,250,252,.76) !important;
  outline: none;
}
textarea:focus,
input[type="text"]:focus,
select:focus {
  box-shadow: 0 0 0 4px rgba(167,243,208,.36), var(--inner-glow);
}
.status-line {
  border: 1px solid rgba(0,126,98,.2) !important;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(236,253,245,.72)) !important;
  box-shadow: 0 14px 34px rgba(27,107,79,.08), inset 0 1px 0 rgba(255,255,255,.9);
  color: #1b6b4f;
}
.status-line.error,
.status-line[data-state="error"] { color: #991b1b; background: linear-gradient(135deg, rgba(254,226,226,.94), rgba(255,247,237,.78)) !important; }
.status-line.loading,
.status-line[data-state="loading"] { color: #065f46; background: linear-gradient(135deg, rgba(167,243,208,.72), rgba(220,213,255,.44)) !important; }
.status-line.success,
.status-line[data-state="success"] { color: #065f46; background: linear-gradient(135deg, rgba(187,247,208,.86), rgba(219,234,254,.66)) !important; }

.result-grid,
.result-columns,
.agent-grid,
.plan-grid,
.ops-metrics { gap: 22px; }
.generated-image,
.generated-video,
.storyboard-placeholder,
.reference-item,
.lightbox-content img,
.lightbox-content video {
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 32px;
  box-shadow: var(--shadow);
}
.storyboard-placeholder { background: rgba(247,249,251,.62); color: #607080; }

.agent-grid article:nth-child(odd),
.agent-grid article:nth-child(3n) { background: var(--glass) !important; }
.sequence-head { border-bottom: 1px solid rgba(82,97,111,.12); }
.sequence-grid span {
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 28px;
  background: rgba(255,255,255,.42);
  box-shadow: var(--inner-glow);
  color: #8a98a8;
}
.sequence-grid span:nth-child(-n+5) {
  background: rgba(167,243,208,.32);
  box-shadow: var(--inner-glow);
  color: #1b6b4f;
}
.sequence-grid span:nth-child(5) { background: linear-gradient(135deg, #a7f3d0, #dcd5ff); color: #17352c; }

.footer-banner {
  margin-top: 24px;
  border-radius: 42px 42px 0 0;
}
.footer-banner strong { border-top: 1px solid rgba(82,97,111,.12); font-style: normal; letter-spacing: -.055em; }

@media (max-width: 1100px) {
  .app-frame { padding: 14px; gap: 14px; }
  .sidebar { top: 0; height: auto; border-radius: 32px; }
  .topbar { top: 14px; border-radius: 32px; }
  .hero, .protocol-card, .account-card, .ops-panel, .workspace-card, .sequence-card { border-radius: 34px; }
}

@media (max-width: 720px) {
  .app-frame { padding: 10px; }
  .hero, .protocols, .account-zone, .ops-zone, .workspace-zone, .agents-section, .gallery-strip, .footer-banner { padding: 32px 14px; }
  .hero h1 { font-size: 3.4rem; }
  .topbar { border-radius: 28px; }
  .sidebar { border-radius: 28px; }
}

/* Mobile layout fix for Lumina theme */
@media (max-width: 1100px) {
  .app-frame {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .main-frame {
    width: 100%;
    overflow: visible;
  }
  .topbar {
    position: relative;
    top: 0;
    margin-bottom: 14px;
  }
}

@media (max-width: 720px) {
  body::before {
    width: 120vw;
    height: 120vw;
    left: -18vw;
    top: 160px;
  }
  .sidebar,
  .topbar,
  .hero,
  .protocol-card,
  .account-card,
  .ops-panel,
  .workspace-card,
  .sequence-card,
  .footer-banner {
    width: 100%;
  }
  .sidebar {
    padding: 28px;
  }
  .side-nav {
    grid-template-columns: 1fr;
  }
  .side-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .topbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    height: auto;
    padding: 22px;
  }
  .top-nav,
  .top-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    margin: 0 0 16px;
    overflow: hidden;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(3.1rem, 17vw, 4.2rem);
  }
  .hero::before {
    width: 105%;
    height: 52%;
    right: -22%;
    bottom: 4%;
  }
  .hero::after {
    display: none;
  }
  .art-window {
    border-radius: 34px;
  }
}

/* Closer 1:1 Lumina app shell: fixed pill topbar, floating left rail, scrollable canvas */
@media (min-width: 1101px) {
  body {
    overflow-x: hidden;
  }
  .app-frame {
    display: block;
    min-height: 100vh;
    padding: 0;
  }
  .sidebar {
    position: fixed;
    left: 16px;
    top: 112px;
    bottom: 16px;
    width: 288px;
    height: auto;
    z-index: 40;
    padding: 32px 28px;
    border-radius: 40px;
  }
  .topbar {
    position: fixed;
    left: 64px;
    right: 64px;
    top: 18px;
    z-index: 50;
    max-width: 1460px;
    margin: 0 auto;
    height: 72px;
    border-radius: 999px;
    grid-template-columns: auto 1fr auto;
  }
  .main-frame {
    margin-left: 320px;
    padding: 112px 36px 48px 28px;
    min-height: 100vh;
    overflow: visible;
    border-radius: 0;
  }
  main {
    max-width: 1240px;
    margin: 0 auto;
  }
  .hero {
    min-height: 520px;
    grid-template-columns: minmax(360px, .82fr) minmax(420px, 1.18fr);
    padding: 56px 54px;
    margin-bottom: 42px;
  }
  .hero h1 {
    font-size: clamp(4rem, 6vw, 6.8rem);
  }
  .hero-art {
    justify-content: flex-end;
  }
  .art-window {
    width: min(600px, 100%);
    aspect-ratio: 1.1 / 1;
  }
  .protocols,
  .account-zone,
  .ops-zone,
  .workspace-zone,
  .agents-section,
  .gallery-strip {
    padding: 34px 0;
  }
  .protocol-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: stretch;
  }
  .protocol-card {
    min-height: 330px;
  }
  .agent-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }
  .agent-list {
    position: sticky;
    top: 112px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    padding-right: 8px;
    scrollbar-width: thin;
  }
  .agent-pick {
    min-height: 106px;
  }
  .workspace-card {
    min-height: 540px;
    padding: 34px;
  }
  .workspace-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .result-shell {
    margin-top: 24px;
  }
  .agents-section .agent-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* Lumina app-screen cards: more like the reference screenshots */
.hero,
.workspace-zone .agent-layout,
.sequence-card {
  position: relative;
}

.protocol-card::before,
.account-card::before,
.ops-panel::before,
.workspace-card::before,
.agent-grid article::before,
.sequence-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 18% 0%, rgba(167,243,208,.22), transparent 34%), radial-gradient(circle at 100% 18%, rgba(220,213,255,.2), transparent 32%);
}

.protocol-card,
.account-card,
.ops-panel,
.workspace-card,
.agent-grid article,
.sequence-card {
  position: relative;
}

.protocol-card > *,
.account-card > *,
.ops-panel > *,
.workspace-card > *,
.agent-grid article > *,
.sequence-card > * {
  position: relative;
}

.sidebar .side-brand strong {
  font-size: 24px;
  letter-spacing: -.02em;
}
.sidebar .side-brand span {
  color: #00a878;
  font-size: 18px;
}
.side-nav a,
.side-footer a {
  min-height: 54px;
  padding: 0 20px;
  font-size: 16px;
}
.side-nav span,
.side-footer span {
  color: #8aa0b8;
}
.side-nav a.is-active span,
.side-nav a:hover span {
  color: currentColor;
}

.top-actions .ghost-btn,
.top-actions .hard-btn {
  min-width: 82px;
}

.protocol-card.mint-card {
  background: linear-gradient(135deg, rgba(236,255,247,.7), rgba(255,255,255,.55)) !important;
}
.protocol-card.wide-card {
  background: linear-gradient(135deg, rgba(255,255,255,.66), rgba(244,241,255,.66)) !important;
}
.white-inset {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.workspace-zone {
  scroll-margin-top: 100px;
}
.workspace-card {
  background: rgba(255,255,255,.62) !important;
}
.agent-pick strong {
  font-size: 18px;
  letter-spacing: -.02em;
}
.agent-pick p {
  color: #52616f;
}

@media (min-width: 1101px) and (max-width: 1320px) {
  .topbar { left: 24px; right: 24px; }
  .sidebar { width: 270px; }
  .main-frame { margin-left: 296px; padding-right: 24px; }
  .agent-layout { grid-template-columns: 250px minmax(0, 1fr); }
}

/* Lumina 1:1 first-screen composition: control stack + large preview canvas */
@media (min-width: 1101px) {
  .hero {
    grid-template-columns: 370px minmax(0, 1fr);
    gap: 56px;
    align-items: stretch;
    min-height: 620px;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none;
  }
  .hero::before,
  .hero::after {
    display: none;
  }
  .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 620px;
    padding: 50px 54px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 42px;
    background: rgba(255,255,255,.58);
    box-shadow: var(--shadow), var(--inner-glow);
    backdrop-filter: blur(28px) saturate(1.18);
    -webkit-backdrop-filter: blur(28px) saturate(1.18);
    overflow: hidden;
  }
  .hero-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 0% 0%, rgba(167,243,208,.34), transparent 42%), radial-gradient(circle at 100% 100%, rgba(220,213,255,.3), transparent 36%);
    pointer-events: none;
  }
  .hero-copy > * {
    position: relative;
  }
  .hero .tilt-label {
    margin-bottom: 28px;
  }
  .hero h1 {
    max-width: 100%;
    margin: 0 0 28px;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -.06em;
  }
  .hero h1 span,
  .hero h1 mark {
    display: inline;
  }
  .hero p {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.9;
  }
  .hero-buttons {
    margin-top: 34px;
  }
  .hero-buttons .large {
    min-height: 56px;
    padding: 0 28px;
  }
  .hero-copy::after {
    content: "光影流动\A 生命感  柔和\A 色彩张力  空灵";
    white-space: pre-line;
    display: block;
    margin-top: 42px;
    padding: 34px;
    border-radius: 34px;
    background: rgba(255,255,255,.62);
    color: #26333c;
    line-height: 2.2;
    box-shadow: var(--inner-glow), 0 22px 60px rgba(27,107,79,.08);
  }
  .hero-art {
    display: grid;
    place-items: center;
    min-height: 620px;
    padding: 76px 68px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 52px;
    background: rgba(255,255,255,.58);
    box-shadow: var(--shadow-lg), var(--inner-glow);
    backdrop-filter: blur(28px) saturate(1.16);
    -webkit-backdrop-filter: blur(28px) saturate(1.16);
    overflow: hidden;
  }
  .hero-art::before {
    content: "";
    position: absolute;
    inset: 7% 6%;
    border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
    background:
      radial-gradient(circle at 20% 18%, rgba(167,243,208,.55), transparent 30%),
      radial-gradient(circle at 70% 20%, rgba(220,213,255,.42), transparent 28%),
      radial-gradient(circle at 52% 84%, rgba(242,225,201,.35), transparent 26%);
    filter: blur(12px);
    pointer-events: none;
  }
  .art-window {
    width: min(720px, 100%);
    aspect-ratio: 1 / .86;
    border-radius: 46px;
  }
  .art-label.left {
    left: -8px;
    top: 20%;
  }
  .art-label.right {
    right: -10px;
    bottom: 18%;
  }
  .protocols {
    margin-top: 26px;
  }
}

@media (min-width: 1500px) {
  .hero { grid-template-columns: 390px minmax(0, 1fr); }
  .hero-copy,
  .hero-art { min-height: 680px; }
}

/* Fix preview canvas shrink in 1:1 Lumina hero */
@media (min-width: 1101px) {
  .hero-art .art-window {
    width: clamp(520px, 52vw, 720px) !important;
    max-width: 100%;
    min-width: 420px;
    aspect-ratio: 1 / .86;
    flex: 0 0 auto;
    z-index: 1;
  }
  .hero-art {
    justify-content: center;
  }
}

@media (min-width: 1101px) and (max-width: 1320px) {
  .hero-art .art-window {
    width: clamp(420px, 48vw, 560px) !important;
    min-width: 360px;
  }
}

/* Agent cards become the primary selector; workspace sits directly below */
.agents-section {
  scroll-margin-top: 110px;
}
.agent-grid button.agent-card-select {
  appearance: none;
  text-align: left;
  cursor: pointer;
  min-height: 180px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 0;
  background: rgba(255,255,255,.54);
  color: var(--ink);
  box-shadow: var(--inner-glow);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.agent-grid button.agent-card-select:hover,
.agent-grid button.agent-card-select.is-active {
  transform: translateY(-3px);
  background: linear-gradient(135deg, rgba(167,243,208,.5), rgba(220,213,255,.42));
  box-shadow: 0 22px 54px rgba(27,107,79,.12), var(--inner-glow);
}
.agent-grid button.agent-card-select b,
.agent-grid button.agent-card-select h3,
.agent-grid button.agent-card-select p {
  position: relative;
}
.agent-grid button.agent-card-select b {
  display: block;
  margin-bottom: 18px;
}
.agent-grid button.agent-card-select h3 {
  margin: 0 0 10px;
}
.agent-grid button.agent-card-select p {
  margin: 0;
}
.workspace-zone .workspace-intro h2 {
  font-size: clamp(2.6rem, 4vw, 4.6rem);
}
.workspace-zone .agent-layout {
  display: block !important;
}
.workspace-zone .workspace-panel {
  width: 100%;
}
.workspace-zone .workspace-card,
.workspace-panel {
  max-width: none;
}

@media (min-width: 1101px) {
  .agents-section {
    padding-top: 40px;
  }
  .workspace-zone {
    padding-top: 30px;
  }
  .workspace-zone .agent-layout {
    display: block !important;
  }
  .workspace-panel {
    display: block;
  }
}

/* Performance pass: reduce expensive fixed blurs and huge filters */
body::before,
body::after {
  filter: blur(18px) !important;
  opacity: .48 !important;
}
.sidebar,
.topbar,
.protocol-card,
.account-card,
.ops-panel,
.workspace-card,
.agent-grid button.agent-card-select,
.result-card,
.footer-banner,
.modal-panel {
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}
.hero-art::before {
  filter: blur(6px) !important;
}
* {
  animation-duration: .001ms;
  animation-iteration-count: 1;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Control polish + performance hardening */
html {
  scroll-behavior: auto !important;
}

body::before,
body::after {
  display: none !important;
}

.sidebar,
.topbar,
.protocol-card,
.account-card,
.ops-panel,
.workspace-card,
.workspace-panel,
.agent-grid button.agent-card-select,
.result-card,
.footer-banner,
.modal-panel,
.hero-copy,
.hero-art {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-art::before,
.art-window::before {
  filter: none !important;
}

* {
  animation: none !important;
  transition-duration: 80ms !important;
}

.workspace-form {
  gap: 24px;
}

.workspace-form .form-submit,
.workspace-form .hard-btn.form-submit {
  justify-self: center;
  margin-inline: auto;
}

.upload-field {
  position: relative;
  min-height: 210px;
  padding: 34px 28px;
  border: 1px dashed rgba(0, 126, 98, .24) !important;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(245,252,249,.62)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  cursor: pointer;
}

.upload-field > span {
  font-size: 16px;
  color: #101820;
}

.upload-field input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  opacity: 0;
  cursor: pointer;
  padding: 0 !important;
  border: 0 !important;
}

.upload-field::before {
  content: "选择文件";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 46px;
  margin: 14px 0 10px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a7f3d0, #dcd5ff);
  color: #073f31;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(27,107,79,.12), inset 0 1px 0 rgba(255,255,255,.85);
}

.upload-field::after {
  content: "支持拖拽上传，最多 6 张参考图";
  display: block;
  color: #6b7b8a;
  font-size: 14px;
  font-weight: 700;
}

#image-form[data-agent-id="ad-storyboard"] .upload-field::after {
  content: "支持拖拽上传，最多 6 张参考图";
}

#module-reference-field[data-module-type="face"]::after {
  content: "固定上传 2 张：目标图 + 人物参考图";
}

.upload-field em {
  margin-top: 4px;
  color: #007e62 !important;
  font-size: 18px !important;
}

.field-row.compact-row {
  align-items: end;
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "⌄";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-54%);
  pointer-events: none;
  color: #007e62;
  font-size: 22px;
  font-weight: 900;
}

select,
.field select {
  appearance: none;
  -webkit-appearance: none;
  height: 58px;
  padding: 0 58px 0 24px !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(247,251,250,.78)) !important;
  color: #25313b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px rgba(83,92,128,.06) !important;
  cursor: pointer;
}

select:focus,
.field select:focus {
  outline: none;
  border-color: rgba(0, 184, 131, .45) !important;
  box-shadow: 0 0 0 4px rgba(167,243,208,.32), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

select option {
  color: #101820;
  background: #ffffff;
}

.form-submit,
.hard-btn.form-submit {
  min-width: 220px;
  height: 54px;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #a7f3d0, #dcd5ff) !important;
  box-shadow: 0 16px 34px rgba(27,107,79,.13), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.upload-preview {
  margin-top: -4px;
}

.agent-grid button.agent-card-select:hover,
.agent-grid button.agent-card-select.is-active,
.hard-btn:hover,
.ghost-btn:hover,
.new-project:hover,
.agent-pick:hover,
.button:hover {
  transform: none !important;
}

@media (max-width: 720px) {
  .upload-field {
    min-height: 180px;
    padding: 28px 18px;
  }
  .field-row.compact-row {
    gap: 14px;
  }
  select,
  .field select {
    height: 54px;
  }
}

/* Result media: keep generated image's real ratio, no squeezed black canvas */
.zoomable-media {
  display: grid;
  place-items: center;
  width: 100%;
}

.generated-media-frame,
.lightbox-media-frame {
  display: grid;
  place-items: center;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 12%, rgba(167,243,208,.34), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(247,250,255,.72));
  box-shadow: 0 20px 54px rgba(38,51,73,.12), inset 0 1px 0 rgba(255,255,255,.92);
  overflow: hidden;
}

.generated-media-frame.is-landscape {
  width: 100%;
}

.generated-media-frame.is-portrait {
  width: min(460px, 100%);
}

.generated-media-frame.is-square {
  width: min(680px, 100%);
}

.generated-media-frame .generated-image,
.generated-media-frame .generated-video {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: min(78vh, 860px);
  object-fit: contain;
  border: 0 !important;
  border-radius: 24px;
  background: transparent !important;
  box-shadow: none !important;
}

.generated-media-frame.is-landscape .generated-image {
  width: 100% !important;
  max-height: none;
}

.generated-media-frame.is-portrait .generated-image,
.generated-media-frame.is-square .generated-image {
  width: auto !important;
  max-width: 100%;
}

.media-lightbox {
  box-sizing: border-box;
  background:
    radial-gradient(circle at 20% 12%, rgba(167,243,208,.28), transparent 30%),
    rgba(8, 15, 24, .74) !important;
  padding: 36px !important;
  overflow: auto;
}

.lightbox-content {
  display: grid;
  place-items: center;
  width: calc(100vw - 72px);
  min-height: calc(100vh - 72px);
  max-width: none;
  max-height: none;
}

.lightbox-media-frame {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 10px;
  border-radius: 34px;
}

.lightbox-media-frame img,
.lightbox-content .lightbox-video {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 104px);
  max-height: calc(100vh - 104px);
  object-fit: contain;
  border: 0 !important;
  border-radius: 26px;
  background: transparent !important;
  box-shadow: none !important;
}

/* Branded custom selects */
.select-wrap.has-pretty-select {
  position: relative;
  z-index: 8;
}

.select-wrap.has-pretty-select.is-open {
  z-index: 9000;
}

.select-wrap.has-pretty-select::after {
  display: none;
}

.select-wrap select.native-select-hidden {
  position: absolute !important;
  left: 18px;
  top: 18px;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
  padding: 0 !important;
}

.pretty-select {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 58px;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(247,251,250,.78)),
    linear-gradient(135deg, rgba(167,243,208,.34), rgba(220,213,255,.3));
  color: #12231d;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 14px 30px rgba(83,92,128,.08);
}

.pretty-select::after {
  content: "⌄";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 12px;
  border-radius: 50%;
  background: rgba(167,243,208,.52);
  color: #007e62;
  font-size: 20px;
  line-height: 1;
}

.pretty-select.is-open {
  box-shadow: 0 0 0 4px rgba(167,243,208,.26), inset 0 1px 0 rgba(255,255,255,.94), 0 18px 38px rgba(83,92,128,.1);
}

.pretty-select.is-open::after {
  content: "⌃";
}

.pretty-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 80;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 24px 54px rgba(38,51,73,.16), inset 0 1px 0 rgba(255,255,255,.94);
}

#view-count-field[data-count-mode="shots"] .pretty-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: min(420px, calc(100vw - 48px));
}

#view-count-field[data-count-mode="views"] .pretty-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#view-count-field .pretty-option {
  min-height: 42px;
  padding-inline: 8px;
  text-align: center;
  white-space: nowrap;
}

.pretty-options[hidden] {
  display: none !important;
}

.pretty-option {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #25313b;
  font-weight: 900;
  text-align: left;
}

.pretty-option:hover,
.pretty-option.is-selected {
  background: linear-gradient(135deg, rgba(167,243,208,.72), rgba(220,213,255,.58));
  color: #073f31;
}

/* Agent-specific waiting cards */
.agent-progress {
  --progress-a: #a7f3d0;
  --progress-b: #dcd5ff;
  position: relative;
  overflow: hidden;
}

.agent-progress::before {
  content: "";
  position: absolute;
  inset: -40% auto auto -12%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--progress-a), transparent 68%);
  opacity: .42;
  pointer-events: none;
  animation: agentProgressDrift 2.4s ease-in-out infinite alternate !important;
}

.agent-progress > * {
  position: relative;
  z-index: 1;
}

.agent-progress[data-agent-id="storyboard"] { --progress-a: #a7f3d0; --progress-b: #bfdbfe; }
.agent-progress[data-agent-id="selling-analysis"] { --progress-a: #fde68a; --progress-b: #a7f3d0; }
.agent-progress[data-agent-id="tri-view"] { --progress-a: #bae6fd; --progress-b: #e0f2fe; }
.agent-progress[data-agent-id="detail-page"] { --progress-a: #fbcfe8; --progress-b: #dcd5ff; }
.agent-progress[data-agent-id="script-no-voiceover"] { --progress-a: #fed7aa; --progress-b: #fde68a; }
.agent-progress[data-agent-id="voiceover-script"] { --progress-a: #ddd6fe; --progress-b: #bfdbfe; }
.agent-progress[data-agent-id="seeding-video"] { --progress-a: #bbf7d0; --progress-b: #fef3c7; }
.agent-progress[data-agent-id="face-transform"] { --progress-a: #a7f3d0; --progress-b: #dcd5ff; }

.agent-progress .storyboard-placeholder {
  min-height: 300px;
  border: 1px dashed rgba(0,126,98,.24);
  border-radius: 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--progress-a) 28%, transparent), color-mix(in srgb, var(--progress-b) 24%, transparent)),
    rgba(255,255,255,.64);
  color: #173126;
  text-align: center;
}

.ai-loading-stage {
  position: relative;
  isolation: isolate;
  gap: 18px;
  overflow: hidden;
}

.ai-loading-stage::before,
.ai-loading-stage::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    conic-gradient(from 0deg, transparent, rgba(167,243,208,.62), transparent, rgba(220,213,255,.54), transparent);
  animation: aiLoadingSweep 3.2s linear infinite !important;
}

.ai-loading-stage::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-100%);
  animation: aiLoadingScan 1.7s ease-in-out infinite !important;
}

.ai-loading-orbit {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 2px solid rgba(8, 73, 57, .12);
  background: rgba(255,255,255,.34);
}

.ai-loading-orbit::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #00b883;
  border-right-color: #9c8cff;
  animation: aiLoadingOrbit 1.05s linear infinite !important;
}

.ai-loading-text {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 950;
  color: #102b21;
}

.ai-loading-dots {
  display: inline-flex;
  gap: 9px;
}

.ai-loading-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00b883;
  animation: aiLoadingDot 1s ease-in-out infinite !important;
}

.ai-loading-dots i:nth-child(2) { animation-delay: .14s; background: #7dd3fc; }
.ai-loading-dots i:nth-child(3) { animation-delay: .28s; background: #9c8cff; }

.progress-steps {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.progress-steps li {
  padding: 11px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  color: #66717d;
  font-weight: 800;
}

.progress-steps li.is-active {
  background: linear-gradient(135deg, var(--progress-a), var(--progress-b));
  color: #102018;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.brief-hero-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(167,243,208,.22), transparent 34%),
    rgba(255,255,255,.72) !important;
}

.brief-columns {
  grid-template-columns: 1fr !important;
}

.brief-module-card {
  padding: clamp(24px, 3vw, 34px) !important;
}

.brief-shot-list {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.brief-shot-item {
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(247,251,250,.68)),
    radial-gradient(circle at 8% 0%, rgba(220,213,255,.2), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 34px rgba(83,92,128,.07);
}

.brief-shot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(82,97,111,.12);
}

.brief-shot-head strong {
  color: #082f49;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -.03em;
}

.brief-shot-body {
  display: grid;
  gap: 10px;
}

.brief-shot-body p {
  margin: 0;
  color: #17233a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.brief-shot-body span {
  display: inline-flex;
  align-items: center;
  min-width: 74px;
  margin-right: 8px;
  color: #008060;
  font-weight: 900;
}

.brief-actions,
.first-frame-actions {
  margin-top: 18px !important;
}

.editable-result-card {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 32px) !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(220,213,255,.28), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(242,252,248,.78)) !important;
}

.editable-result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.editable-result-head.compact {
  margin-bottom: 10px;
}

.editable-result-head h4 {
  margin: 6px 0 8px;
}

.editable-result-head p:last-child {
  color: #607080;
  font-weight: 700;
}

.editable-result-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 18px 20px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.76) !important;
  color: #13251f;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 34px rgba(50,72,92,.07);
  white-space: pre-wrap;
}

.editable-result-textarea.compact {
  min-height: 150px;
  font-size: 14px;
}

.editable-result-note {
  margin: 0 !important;
  color: #008060 !important;
  font-size: 13px;
  font-weight: 900;
}

.first-frame-prompt-editor {
  margin: 16px 0 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 28px;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.first-frame-inline-slot {
  margin: 18px 0 22px;
}

.persona-note {
  display: inline-flex;
  width: fit-content;
  margin: 10px 0 0 !important;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(167,243,208,.42);
  color: #007e62 !important;
  font-weight: 900;
}

.first-frame-card .generated-media-frame.is-portrait {
  width: min(380px, 100%);
}

@keyframes agentProgressDrift {
  from { transform: translate3d(0, 0, 0) scale(.96); }
  to { transform: translate3d(28px, 16px, 0) scale(1.08); }
}

@keyframes aiLoadingSweep {
  to { transform: rotate(1turn); }
}

@keyframes aiLoadingScan {
  0% { transform: translateX(-120%); opacity: 0; }
  22% { opacity: .72; }
  58% { opacity: .48; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes aiLoadingOrbit {
  to { transform: rotate(1turn); }
}

@keyframes aiLoadingDot {
  0%, 80%, 100% { transform: translateY(0); opacity: .42; }
  35% { transform: translateY(-8px); opacity: 1; }
}

/* Workspace cleanup requested: no fake window title / no top-right badges */
.window-chrome,
.workspace-badges {
  display: none !important;
}

.workspace-head {
  justify-content: flex-start;
  padding-bottom: 22px;
}

.workspace-cost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(167,243,208,.28));
  color: #19352b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 36px rgba(34,67,54,.08);
}

.workspace-cost[hidden] {
  display: none !important;
}

.workspace-cost strong {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #12231d;
  color: #fff;
  font-size: 13px;
  letter-spacing: .02em;
}

.workspace-cost span {
  font-weight: 800;
  color: rgba(18,35,29,.78);
}

.field-row.compact-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

button:disabled,
.hard-btn:disabled,
.ghost-btn:disabled {
  cursor: not-allowed;
  opacity: .62;
  filter: saturate(.72);
}

/* Analysis result: one clean vertical report, no provider/fallback chain */
.analysis-result-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.analysis-card {
  position: relative;
  padding: 28px 30px;
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 34px;
  background:
    radial-gradient(circle at 94% 0%, rgba(167,243,208,.22), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,251,250,.74)) !important;
  box-shadow: 0 18px 48px rgba(42,55,78,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.analysis-hero-card {
  background:
    radial-gradient(circle at 8% 8%, rgba(220,213,255,.34), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(241,252,248,.78)) !important;
}

.analysis-card h4 {
  margin-bottom: 10px;
  font-size: clamp(24px, 2.3vw, 34px);
  letter-spacing: -.045em;
}

.analysis-card .bullet-list {
  display: grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}

.analysis-card .bullet-list li {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.64);
}

.analysis-card .bullet-list strong {
  font-weight: 900;
}

.analysis-card .bullet-list span {
  color: #657282;
  font-size: 14px;
}

/* Loading card: only keep the large center state, no duplicated title */
.agent-progress .zoomable-media {
  min-height: 430px;
  align-content: center;
}

.agent-progress .storyboard-placeholder {
  width: min(620px, 100%);
  min-height: 380px;
  padding: 34px;
  font-size: clamp(24px, 2.15vw, 34px);
  line-height: 1.28;
  color: #102b21;
  overflow-wrap: anywhere;
  white-space: normal;
}

.video-progress {
  --progress-a: #bae6fd;
  --progress-b: #dcd5ff;
}

.video-progress .zoomable-media {
  min-height: 520px;
}

.video-progress .storyboard-placeholder,
.video-placeholder {
  width: min(760px, 100%);
  min-height: 430px;
  aspect-ratio: 16 / 9;
  font-size: clamp(30px, 2.6vw, 42px);
}

@media (max-width: 720px) {
  .analysis-card {
    padding: 22px;
  }
  .agent-progress .zoomable-media {
    min-height: 320px;
  }
  .agent-progress .storyboard-placeholder {
    min-height: 280px;
  }
  .video-progress .zoomable-media {
    min-height: 360px;
  }
  .video-progress .storyboard-placeholder,
  .video-placeholder {
    min-height: 300px;
  }
}

/* Mobile audit pass: remove duplicate left console, compress navigation, and make agent choice usable on phones */
@media (max-width: 1100px) {
  .sidebar {
    display: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .app-frame {
    display: block !important;
    padding: 16px !important;
  }

  .main-frame {
    overflow: visible !important;
  }

  .topbar,
  .standalone-topbar {
    position: sticky !important;
    top: 16px !important;
    z-index: 80;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    height: auto !important;
    min-height: 64px;
    margin-bottom: 18px !important;
    padding: 12px 16px !important;
    border-radius: 32px !important;
  }

  .top-nav {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .top-nav a {
    flex: 0 0 auto;
    padding: 0 12px;
  }

  .top-actions {
    justify-self: end;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .agents-section,
  .workspace-zone {
    padding-block: 24px !important;
  }

  .agent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .agent-grid button.agent-card-select {
    min-height: 142px !important;
    padding: 22px !important;
    border-radius: 28px !important;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .app-frame {
    display: block !important;
    padding: 8px !important;
  }

  .sidebar {
    display: none !important;
  }

  .main-frame {
    width: 100%;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .topbar,
  .standalone-topbar {
    position: sticky !important;
    top: 8px !important;
    z-index: 80;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 8px;
    width: 100%;
    min-height: 0;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 10px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 14px 38px rgba(34,67,54,.12), inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  .logo {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 24px !important;
    line-height: 1.05;
  }

  .top-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .credit-badge {
    min-height: 38px;
    padding: 0 12px;
    gap: 6px;
    font-size: 12px;
  }

  .credit-badge span {
    display: none;
  }

  .credit-badge strong {
    font-size: 16px;
  }

  .top-actions .hard-btn,
  .top-actions .ghost-btn {
    min-width: 0;
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  @media (max-width: 420px) {
    .top-actions [data-auth-link] {
      display: none !important;
    }
  }

  @media (max-width: 360px) {
    .logo {
      max-width: 104px;
      font-size: 21px !important;
    }
    .top-actions .hard-btn,
    .top-actions .ghost-btn,
    .credit-badge {
      padding-inline: 9px;
      font-size: 12px;
    }
  }

  .top-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    max-width: 100%;
    margin: 0 -2px;
    padding: 2px 2px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .top-nav::-webkit-scrollbar,
  .agent-grid::-webkit-scrollbar {
    display: none;
  }

  .top-nav a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
    background: rgba(255,255,255,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
  }

  .agents-section,
  .workspace-zone,
  .footer-banner,
  .works-zone,
  .recharge-zone,
  .account-zone,
  .ops-zone,
  .help-zone {
    padding: 20px 4px !important;
  }

  .section-title {
    margin-bottom: 16px !important;
  }

  .section-title h2 {
    font-size: clamp(32px, 11vw, 48px) !important;
    line-height: .95;
  }

  .section-title p {
    max-width: 100%;
    font-size: 14px;
  }

  .agent-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .agent-grid button.agent-card-select {
    width: 100%;
    min-height: 92px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .agent-grid button.agent-card-select b {
    display: inline-flex;
    margin: 0 0 8px;
    font-size: 14px;
  }

  .agent-grid button.agent-card-select h3 {
    margin-bottom: 6px;
    font-size: 18px;
    line-height: 1.05;
  }

  .agent-grid button.agent-card-select p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.35;
  }

  .agent-grid button.agent-card-select:hover,
  .agent-grid button.agent-card-select.is-active {
    transform: none;
    outline: 2px solid rgba(0, 184, 131, .42);
    outline-offset: 2px;
  }

  .workspace-panel,
  .result-card,
  .analysis-card,
  .works-import-panel,
  .recharge-panel,
  .account-card,
  .ops-panel {
    border-radius: 26px !important;
  }

  .workspace-panel {
    padding: 20px 14px 18px !important;
  }

  .module-pane {
    padding: 12px !important;
    border-radius: 26px !important;
  }

  .module-head {
    display: grid;
    gap: 14px;
    padding: 10px 8px 14px;
  }

  .module-action-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .module-action-card {
    min-height: 104px;
    padding: 18px;
    border-radius: 22px;
  }

  .workspace-head {
    padding-bottom: 16px;
  }

  .workspace-head h3 {
    font-size: clamp(28px, 9vw, 36px) !important;
    line-height: 1.05;
  }

  .workspace-kicker {
    font-size: 13px;
    letter-spacing: .04em;
  }

  .workspace-cost {
    margin-top: 14px;
    padding: 12px;
    border-radius: 20px;
    font-size: 13px;
  }

  .workspace-cost strong {
    min-height: 26px;
    font-size: 12px;
  }

  .workspace-form {
    gap: 16px;
    margin-top: 18px;
  }

  .upload-field {
    min-height: 150px !important;
    padding: 22px 16px !important;
    border-radius: 24px !important;
  }

  .upload-field::before {
    min-width: 112px;
    min-height: 40px;
    margin: 10px 0 8px;
    padding: 0 18px;
  }

  .upload-field::after,
  .upload-field em {
    font-size: 13px !important;
  }

  .field-row,
  .field-row.compact-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .form-submit,
  .hard-btn.form-submit {
    width: 100%;
    min-width: 0;
  }

  .video-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .video-actions .ghost-btn,
  .video-actions .hard-btn {
    width: 100%;
  }

  .secret-pipeline {
    grid-template-columns: 1fr;
  }

  .editable-result-head {
    display: grid;
    gap: 12px;
  }

  .editable-result-head .button,
  .editable-result-head .small-action {
    width: 100%;
  }

  .editable-result-textarea {
    min-height: 180px;
    padding: 14px 16px !important;
    border-radius: 20px !important;
    font-size: 14px;
  }

  .first-frame-prompt-editor {
    padding: 12px;
    border-radius: 22px;
  }

  .attempt-item {
    display: grid;
  }

  .footer-banner {
    margin-top: 12px;
    border-radius: 24px !important;
  }

  .footer-banner nav {
    gap: 14px;
    margin-bottom: 16px;
    font-size: 14px;
  }

  .footer-banner strong {
    padding-top: 16px;
    font-size: 20px !important;
  }
}

/* Dedicated recharge page block */
.recharge-zone {
  padding: 56px 0;
  scroll-margin-top: 110px;
}

.recharge-panel {
  padding: 34px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 42px;
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow), var(--inner-glow);
}

.recharge-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(82,97,111,.12);
}

.recharge-head h3 {
  margin: 14px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.recharge-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.recharge-head a,
#pay-status a {
  color: #007e62;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#recharge-credit-preview {
  flex: 0 0 auto;
  padding: 18px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a7f3d0, #dcd5ff);
  color: #073f31;
  font-size: 24px;
  box-shadow: 0 16px 34px rgba(27,107,79,.13), inset 0 1px 0 rgba(255,255,255,.88);
}

.recharge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.recharge-grid .plan-card {
  min-height: 150px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 32px;
  background: rgba(255,255,255,.68) !important;
  color: var(--ink) !important;
  box-shadow: var(--inner-glow), 0 14px 32px rgba(83,92,128,.08) !important;
}

.recharge-grid .plan-card:hover {
  background: linear-gradient(135deg, rgba(167,243,208,.55), rgba(220,213,255,.45)) !important;
}

.recharge-grid .plan-card.is-active {
  border-color: rgba(0, 126, 98, .26);
  background: linear-gradient(135deg, rgba(167,243,208,.62), rgba(220,213,255,.5)) !important;
  box-shadow: var(--inner-glow), 0 20px 42px rgba(27,107,79,.14) !important;
}

.recharge-grid .plan-card strong {
  font-size: 22px;
}

.recharge-grid .plan-card span {
  font-size: 34px;
}

.custom-recharge {
  margin-top: 22px;
}

.custom-money-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
}

#custom-amount {
  height: 56px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  box-shadow: var(--inner-glow), 0 12px 28px rgba(83,92,128,.06);
  font-size: 18px;
  font-weight: 900;
}

.pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.pay-method {
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #52616f;
  font-weight: 900;
  box-shadow: var(--inner-glow);
}

.pay-method.is-active {
  color: #073f31;
  background: linear-gradient(135deg, #a7f3d0, #dcd5ff);
}

#pay-status[hidden] {
  display: none !important;
}

.recharge-pay-submit {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
  min-height: 56px;
}

#pay-status[data-state="success"] {
  background: linear-gradient(135deg, rgba(167,243,208,.8), rgba(220,213,255,.52)) !important;
  color: #073f31;
}

#pay-status[data-state="loading"],
#pay-status[data-state="pending"] {
  background: linear-gradient(135deg, rgba(252,211,77,.72), rgba(255,255,255,.66)) !important;
  color: #5f4100;
}

#pay-status[data-state="error"] {
  background: rgba(255,210,210,.78) !important;
  color: #7a1e1e;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.login-shell {
  width: min(560px, 100%);
}

.login-card {
  display: grid;
  gap: 18px;
}

.login-card h1 {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.06em;
}

@media (max-width: 900px) {
  .recharge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .recharge-head,
  .custom-money-row {
    grid-template-columns: 1fr;
    display: grid;
  }
}

@media (max-width: 560px) {
  .recharge-grid {
    grid-template-columns: 1fr;
  }
  .recharge-panel {
    padding: 22px;
    border-radius: 32px;
  }
}

/* Standalone recharge page shell */
.recharge-page {
  min-height: 100vh;
  padding: 28px;
}

.standalone-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.standalone-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  min-height: 72px;
  padding: 0 28px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow), var(--inner-glow);
}

.standalone-topbar .top-nav {
  flex: 1 1 480px;
  gap: 10px;
}

.standalone-topbar .top-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.recharge-page .recharge-zone {
  padding: 48px 0 0;
}

.recharge-page .section-title h2 {
  font-size: clamp(3.8rem, 8vw, 7rem);
}

@media (max-width: 720px) {
  .recharge-page {
    padding: 14px;
  }
  .standalone-topbar {
    align-items: flex-start;
    flex-direction: column;
    border-radius: 30px;
    padding: 22px;
  }
}

/* Home now starts from agent selector */
@media (min-width: 1101px) {
  .agents-section:first-child {
    padding-top: 40px;
  }
}

.ops-page .ops-zone {
  padding: 48px 0 0;
}

.ops-page .section-title h2 {
  font-size: clamp(3.8rem, 8vw, 7rem);
}

/* Login form polish */
.login-card {
  padding: 30px;
  border-radius: 40px;
}

.login-card .logo {
  margin-bottom: 6px;
}

.login-card .account-status {
  margin: 10px 0 12px;
  padding: 16px 18px;
  border: 0 !important;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffe07a, #ffd24f) !important;
  color: #2d2411;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.login-card .auth-form {
  gap: 14px;
}

.login-card .auth-form input {
  height: 58px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.84) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(246,249,252,.82)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px rgba(83,92,128,.06);
  color: #18232d;
  outline: none;
}

.login-card .auth-form input::placeholder {
  color: #738293;
}

.login-card .auth-form input:focus {
  border-color: rgba(0, 184, 131, .4) !important;
  box-shadow: 0 0 0 4px rgba(167,243,208,.28), inset 0 1px 0 rgba(255,255,255,.9);
}

.login-card .auth-actions,
.login-card .oauth-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.login-card .auth-actions .hard-btn,
.login-card .auth-actions .ghost-btn,
.login-card .oauth-row .ghost-btn,
.login-card > .hard-btn,
.login-card > #logout-btn {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px !important;
}

/* Works page */
.works-page .works-zone {
  padding: 48px 0 0;
}

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

.works-status {
  margin: 0 0 18px;
}

.works-import-panel {
  display: grid;
  gap: 18px;
  margin: 0 0 22px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 34px;
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow), var(--inner-glow);
}

.works-import-panel strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.04em;
}

.works-import-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.works-import-controls {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}

.works-import-panel textarea {
  width: 100%;
  min-height: 120px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.76);
  box-shadow: var(--inner-glow), 0 12px 28px rgba(83,92,128,.06);
  color: #18232d;
  resize: vertical;
  outline: none;
}

.works-import-panel textarea:focus {
  border-color: rgba(0, 184, 131, .4) !important;
  box-shadow: 0 0 0 4px rgba(167,243,208,.28), var(--inner-glow);
}

.works-import-status {
  min-height: 42px;
  padding: 12px 16px;
  border-radius: 22px;
  background: rgba(167,243,208,.42);
  color: #073f31;
  font-weight: 900;
}

.works-import-status[data-state="error"] {
  background: rgba(255,210,210,.74);
  color: #7a1e1e;
}

.work-card {
  min-height: 220px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 34px;
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow), var(--inner-glow);
}

.work-card strong {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -.04em;
}

.work-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.work-card-live {
  display: grid;
  align-content: start;
  gap: 14px;
}

.work-card-top,
.work-card-meta,
.work-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.work-card-type,
.work-card-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #073f31;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.work-card-status {
  color: #52616f;
}

.work-card-media-shell,
.work-card-media-button,
.work-card-media,
.work-card-empty-note {
  display: block;
  width: 100%;
  min-height: 220px;
  max-height: 320px;
  border-radius: 28px;
  background: rgba(240,244,247,.92);
  overflow: hidden;
}

.work-card-media-button {
  padding: 0;
  border: 0;
  cursor: zoom-in;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}

.work-card-media-shell {
  position: relative;
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}

.work-card-video-preview {
  background:
    radial-gradient(circle at 24% 18%, rgba(167,243,208,.55), transparent 34%),
    linear-gradient(135deg, rgba(12,31,25,.92), rgba(70,84,94,.72));
}

.work-card-video-preview .work-card-media {
  background: transparent;
}

.work-card-media-button:hover .work-card-media {
  transform: scale(1.015);
}

.work-card-media {
  min-height: 220px;
  object-fit: cover;
  transition: transform 120ms ease !important;
}

.work-card-empty-note {
  display: grid;
  place-items: center;
  padding: 20px;
  color: #6b7b8a;
  font-weight: 800;
  text-align: center;
}

.work-card-summary {
  color: #3e4c57 !important;
}

.work-card-list {
  margin: 0;
  padding-left: 18px;
  color: #52616f;
  line-height: 1.7;
}

.work-card-meta {
  color: #6b7b8a;
  font-size: 13px;
  font-weight: 800;
}

.work-card-actions .ghost-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px !important;
}

.work-collection-card .work-card-media {
  background:
    radial-gradient(circle at 20% 15%, rgba(167,243,208,.35), transparent 42%),
    linear-gradient(135deg, rgba(248,250,252,.95), rgba(238,244,255,.82));
}

.lightbox-detail-panel {
  width: min(1180px, calc(100vw - 72px));
  max-height: calc(100vh - 96px);
  overflow: auto;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 36px;
  background:
    radial-gradient(circle at 12% 0%, rgba(167,243,208,.22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(246,250,255,.88));
  box-shadow: 0 28px 90px rgba(2,10,20,.32), inset 0 1px 0 rgba(255,255,255,.94);
}

.detail-panel-head h3 {
  margin: 6px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.detail-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.detail-task-meta span,
.detail-asset-top span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #52616f;
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94);
}

.detail-asset-section {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.detail-asset-section h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -.04em;
}

.detail-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.detail-asset-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(207,218,226,.8);
  border-radius: 26px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 40px rgba(83,92,128,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.detail-asset-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-asset-top strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-asset-media,
.detail-asset-media-button {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 190px;
  border: 0;
  border-radius: 22px;
  background:
    radial-gradient(circle at 22% 18%, rgba(167,243,208,.28), transparent 36%),
    linear-gradient(135deg, rgba(241,245,249,.95), rgba(238,244,255,.84));
  overflow: hidden;
}

.detail-asset-media {
  height: auto;
  object-fit: contain;
}

.detail-asset-media-button {
  padding: 0;
  cursor: zoom-in;
}

.detail-asset-media-button img {
  height: 100%;
}

.detail-asset-card p {
  margin: 0;
  color: #65758a;
  font-size: 13px;
  font-weight: 850;
}

.detail-asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-asset-actions .ghost-btn {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
}

@media (max-width: 900px) {
  .works-grid {
    grid-template-columns: 1fr;
  }
  .works-import-controls {
    grid-template-columns: 1fr;
  }
}

.login-page-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.login-page-actions .ghost-btn,
.login-page-actions .hard-btn {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px !important;
}

.user-page .login-card h1,
.help-page .section-title h2 {
  letter-spacing: -.06em;
}

.user-page {
  align-items: start;
}

.user-page .login-shell {
  width: min(1080px, 100%);
  display: grid;
  gap: 18px;
}

.user-page .account-card {
  position: relative;
  overflow: hidden;
}

.user-page .account-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -80px;
  top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,243,208,.62), transparent 66%);
  pointer-events: none;
}

.user-dashboard {
  display: grid;
  gap: 18px;
}

.user-dashboard[hidden] {
  display: none !important;
}

.user-credit-hero,
.credit-ledger-panel,
.credit-stat-grid article {
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 34px;
  background: rgba(255,255,255,.68);
  box-shadow: var(--shadow), var(--inner-glow);
}

.user-credit-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 32px;
  background:
    radial-gradient(circle at 82% 12%, rgba(220,213,255,.8), transparent 34%),
    radial-gradient(circle at 6% 18%, rgba(167,243,208,.72), transparent 28%),
    rgba(255,255,255,.72);
}

.user-credit-hero h2 {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6.8rem);
  line-height: .92;
  letter-spacing: -.08em;
}

.user-credit-hero h2 b {
  color: #08785f;
}

.user-credit-hero p {
  margin: 0;
  color: #52616f;
  font-weight: 800;
}

.credit-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.credit-stat-grid article {
  padding: 24px;
}

.credit-stat-grid span {
  display: block;
  margin-bottom: 10px;
  color: #64748b;
  font-weight: 900;
}

.credit-stat-grid strong {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: -.05em;
}

.credit-ledger-panel {
  padding: 26px;
}

.credit-ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.credit-ledger-head h3 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: -.05em;
}

.credit-ledger-head .ghost-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px !important;
}

.credit-ledger-status {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 22px;
  background: rgba(167,243,208,.42);
  color: #073f31;
  font-weight: 900;
}

.credit-ledger-list {
  display: grid;
  gap: 10px;
}

.credit-ledger-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(248,251,250,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.credit-ledger-item strong,
.credit-ledger-item span {
  display: block;
}

.credit-ledger-item strong {
  margin-bottom: 5px;
  font-size: 16px;
  color: #17231e;
}

.credit-ledger-item span {
  color: #64748b;
  font-weight: 800;
  line-height: 1.45;
}

.credit-ledger-right {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.credit-ledger-right b {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -.04em;
}

.credit-ledger-right time {
  color: #7a8794;
  font-size: 12px;
  font-weight: 900;
}

.credit-ledger-item.is-plus .credit-ledger-right b { color: #08785f; }
.credit-ledger-item.is-minus .credit-ledger-right b { color: #d44d2e; }
.credit-ledger-item.is-neutral .credit-ledger-right b { color: #64748b; }

.credit-empty {
  padding: 28px;
  border-radius: 26px;
  background: rgba(240,244,247,.78);
  color: #64748b;
  font-weight: 900;
  text-align: center;
}

@media (max-width: 760px) {
  .user-credit-hero,
  .credit-ledger-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .credit-stat-grid {
    grid-template-columns: 1fr;
  }
  .credit-ledger-item {
    grid-template-columns: 1fr;
  }
  .credit-ledger-right {
    justify-items: start;
  }
}

.workspace-zone,
.works-zone,
.recharge-zone,
.ops-zone,
.help-zone,
.footer-banner {
  content-visibility: auto;
  contain-intrinsic-size: 1px 960px;
}

/* Ops center — studio.ai777.ai inspired admin console */
.ops-page {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,252,.9)),
    radial-gradient(circle at 12% 18%, rgba(255, 118, 67, .12), transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(116, 88, 255, .14), transparent 28%),
    #f6f8fb;
}

.ops-page::before,
.ops-page::after {
  opacity: .18;
}

.ops-page .standalone-shell {
  width: min(1480px, 100%);
}

.ops-page .standalone-topbar {
  min-height: 64px;
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 52px rgba(17, 24, 39, .08), inset 0 1px 0 rgba(255,255,255,.95);
}

.ops-page .ops-zone {
  padding: 30px 0 0;
  background: transparent;
  border: 0;
}

.ops-page .section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.ops-page .section-title h2 {
  margin: 4px 0 0;
  font-size: clamp(36px, 4.8vw, 68px);
  letter-spacing: -.08em;
}

.ops-page .section-title p {
  max-width: 520px;
  margin: 0;
  color: #64748b;
  font-weight: 700;
  line-height: 1.7;
}

.ops-page .ops-panel {
  padding: 18px;
  border-radius: 34px;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.ops-page .ops-actions {
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 24px;
  background: rgba(248,250,252,.82);
}

#ops-auto-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #52616f;
  font-weight: 900;
}

#ops-auto-status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 5px rgba(148,163,184,.14);
}

#ops-auto-status[data-state="loading"]::before {
  background: #f97316;
  box-shadow: 0 0 0 5px rgba(249,115,22,.15);
  animation: opsPulse 1.1s ease-in-out infinite;
}

#ops-auto-status[data-state="success"]::before {
  background: #10b981;
  box-shadow: 0 0 0 5px rgba(16,185,129,.14);
}

#ops-auto-status[data-state="error"]::before {
  background: #ef4444;
  box-shadow: 0 0 0 5px rgba(239,68,68,.14);
}

@keyframes opsPulse {
  0%, 100% { transform: scale(.92); opacity: .7; }
  50% { transform: scale(1.2); opacity: 1; }
}

.ops-loading-card,
.ops-empty-state {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 360px;
  padding: 48px 20px;
  border: 1px dashed rgba(148,163,184,.55);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(248,250,252,.74));
  text-align: center;
}

.ops-sync-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 18px 22px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  color: #475569;
}

.ops-sync-line .ops-loading-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  box-shadow: none;
}

.ops-loading-card strong,
.ops-empty-state strong {
  font-size: 26px;
  letter-spacing: -.04em;
}

.ops-loading-card p,
.ops-empty-state p {
  max-width: 420px;
  margin: 0;
  color: #64748b;
  line-height: 1.7;
}

.ops-empty-state > span {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 118, 67, .12);
  color: #c2410c;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .14em;
}

.ops-loading-dot {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff7743, #7c4dff);
  box-shadow: 0 18px 42px rgba(124, 77, 255, .24);
  animation: opsSpin 1.4s ease-in-out infinite alternate;
}

@keyframes opsSpin {
  from { transform: rotate(-8deg) scale(.92); border-radius: 18px; }
  to { transform: rotate(12deg) scale(1.05); border-radius: 999px; }
}

.ops-dashboard {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ops-console-side {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

.ops-console-brand {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,118,67,.12), rgba(124,77,255,.1));
}

.ops-console-brand span,
.ops-eyebrow {
  color: #ff6d3a;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ops-console-brand strong {
  color: #0f172a;
  font-size: 22px;
  letter-spacing: -.06em;
}

.ops-console-brand small {
  overflow: hidden;
  color: #64748b;
  font-weight: 800;
  text-overflow: ellipsis;
}

.ops-console-side button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #475569;
  font-weight: 1000;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.ops-console-side button:hover {
  color: #b84318;
  background: linear-gradient(90deg, rgba(255,118,67,.12), transparent);
  transform: translateX(2px);
}

.ops-console-main {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.ops-hero-card,
.ops-section-card,
.ops-metric-card {
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.84);
  box-shadow: 0 18px 54px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.94);
}

.ops-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px;
  border-radius: 30px;
  overflow: hidden;
}

.ops-hero-card h3 {
  margin: 6px 0 8px;
  color: #0f172a;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.08em;
}

.ops-hero-card p {
  max-width: 720px;
  margin: 0;
  color: #64748b;
  font-weight: 700;
  line-height: 1.7;
}

.ops-hero-stats {
  min-width: 156px;
  padding: 22px;
  border-radius: 26px;
  background: linear-gradient(135deg, #fff0e8, #f0ecff);
  text-align: center;
}

.ops-hero-stats b {
  display: block;
  color: #0f172a;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.08em;
}

.ops-hero-stats span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-weight: 900;
}

.ops-page .ops-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.ops-metric-card {
  display: grid;
  gap: 8px;
  min-height: 138px;
  padding: 20px;
  border-radius: 26px;
}

.ops-page .ops-metrics .ops-metric-card {
  border: 1px solid rgba(226,232,240,.9) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.86)) !important;
  box-shadow: 0 18px 54px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.94) !important;
}

.ops-page .ops-metrics .ops-metric-card:nth-child(3n + 1) {
  background:
    linear-gradient(135deg, rgba(255, 239, 230, .96), rgba(255,255,255,.88)) !important;
}

.ops-page .ops-metrics .ops-metric-card:nth-child(3n + 2) {
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(255,255,255,.88)) !important;
}

.ops-page .ops-metrics .ops-metric-card:nth-child(3n) {
  background:
    linear-gradient(135deg, rgba(238, 242, 255, .96), rgba(255,255,255,.88)) !important;
}

.ops-metric-card span,
.ops-metric-card small {
  color: #64748b;
  font-weight: 900;
}

.ops-metric-card strong {
  color: #0f172a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -.08em;
}

.ops-section-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 30px;
  scroll-margin-top: 100px;
}

.ops-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.ops-section-head h3 {
  margin: 4px 0;
  color: #0f172a;
  font-size: 28px;
  letter-spacing: -.06em;
}

.ops-section-head p {
  margin: 0;
  color: #64748b;
  font-weight: 700;
  line-height: 1.6;
}

.ops-section-count {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .06);
  color: #334155;
}

.ops-search-box {
  display: grid;
  gap: 8px;
  min-width: min(320px, 100%);
  color: #64748b;
  font-size: 13px;
  font-weight: 1000;
}

.ops-search-box input,
.ops-credit-controls input,
.ops-ratio-controls input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(203,213,225,.92);
  border-radius: 14px;
  background: rgba(248,250,252,.9);
  color: #0f172a;
  outline: none;
  padding: 0 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}

.ops-search-box input:focus,
.ops-credit-controls input:focus,
.ops-ratio-controls input:focus {
  border-color: rgba(255,118,67,.55);
  box-shadow: 0 0 0 4px rgba(255,118,67,.11), inset 0 1px 0 rgba(255,255,255,.86);
}

.ops-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid rgba(226,232,240,.88);
  border-radius: 22px;
  background: rgba(248,250,252,.72);
}

.ops-table-wrap h4 {
  margin: 0;
  padding: 16px 16px 0;
  color: #0f172a;
  font-size: 18px;
}

.ops-data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  color: #334155;
}

.ops-user-table {
  min-width: 1180px;
  table-layout: fixed;
}

.ops-user-table th:nth-child(1),
.ops-user-table td:nth-child(1) { width: 27%; }
.ops-user-table th:nth-child(2),
.ops-user-table td:nth-child(2) { width: 9%; }
.ops-user-table th:nth-child(3),
.ops-user-table td:nth-child(3) { width: 7%; }
.ops-user-table th:nth-child(4),
.ops-user-table td:nth-child(4) { width: 17%; }
.ops-user-table th:nth-child(5),
.ops-user-table td:nth-child(5) { width: 40%; }

.ops-data-table th,
.ops-data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(226,232,240,.86);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.ops-time-cell {
  min-width: 96px;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal !important;
}

.ops-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(248,250,252,.96);
  color: #64748b;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.ops-data-table tr:last-child td {
  border-bottom: 0;
}

.ops-data-table tbody tr {
  transition: background 160ms ease;
}

.ops-data-table tbody tr:hover {
  background: rgba(255,118,67,.05);
}

.ops-data-table .is-right {
  text-align: right;
}

.ops-data-table th:last-child,
.ops-data-table td:last-child {
  min-width: 84px;
}

.ops-empty-cell {
  padding: 34px !important;
  color: #94a3b8;
  font-weight: 1000;
  text-align: center !important;
}

.ops-user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ops-user-cell > div,
.ops-stack-text {
  min-width: 0;
}

.ops-user-cell strong,
.ops-user-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-user-cell strong,
.ops-stack-text strong {
  display: block;
  color: #0f172a;
  font-weight: 1000;
}

.ops-user-cell small,
.ops-stack-text span,
.ops-muted {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.ops-avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: linear-gradient(135deg, #ff7743, #7c4dff);
  color: #fff;
  font-weight: 1000;
}

.ops-credit-pill,
.ops-badge,
.ops-status,
.ops-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 1000;
  white-space: nowrap;
}

.ops-credit-pill {
  background: #ecfdf5;
  color: #047857;
}

.ops-badge {
  background: #eef2ff;
  color: #4f46e5;
}

.ops-status.is-ok {
  background: #ecfdf5;
  color: #047857;
}

.ops-status.is-wait {
  background: #fff7ed;
  color: #c2410c;
}

.ops-status.is-bad {
  background: #fef2f2;
  color: #dc2626;
}

.ops-delta.is-plus {
  background: #ecfdf5;
  color: #047857;
}

.ops-delta.is-minus {
  background: #fef2f2;
  color: #dc2626;
}

.ops-delta.is-neutral {
  background: #f1f5f9;
  color: #64748b;
}

.ops-control-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ops-credit-controls,
.ops-ratio-controls {
  display: grid;
  grid-template-columns: 42px 82px minmax(118px, 1fr) 64px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.ops-ratio-controls {
  grid-template-columns: 42px 82px 22px 64px;
}

.ops-credit-controls span,
.ops-ratio-controls span {
  color: #64748b;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.ops-ratio-controls em {
  color: #64748b;
  font-style: normal;
  font-weight: 1000;
}

.ops-invite-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px dashed rgba(124,77,255,.24);
  border-radius: 14px;
  background: rgba(124,77,255,.06);
}

.ops-invite-link span {
  min-width: 0;
  overflow: hidden;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-mini-btn,
.ops-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff7743, #7c4dff);
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 12px 28px rgba(124,77,255,.18);
  white-space: nowrap;
  word-break: keep-all;
  cursor: pointer;
  text-decoration: none;
}

.ops-link-btn {
  min-width: 64px;
}

.ops-copy-btn {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
  cursor: pointer;
}

.ops-mini-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(.4);
  opacity: .62;
}

.ops-inline-status {
  display: block;
  min-height: 18px;
  margin-top: 6px;
  color: #c2410c;
  font-size: 12px;
  font-weight: 900;
}

.ops-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 1120px) {
  .ops-dashboard,
  .ops-split-grid {
    grid-template-columns: 1fr;
  }
  .ops-console-side {
    position: static;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ops-console-brand {
    grid-column: 1 / -1;
  }
  .ops-page .ops-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .media-lightbox {
    padding: 14px !important;
  }
  .lightbox-content {
    width: calc(100vw - 28px);
    min-height: calc(100vh - 28px);
  }
  .lightbox-media-frame {
    padding: 6px;
    border-radius: 22px;
  }
  .lightbox-media-frame img,
  .lightbox-content .lightbox-video {
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    border-radius: 18px;
  }
  .ops-page .section-title,
  .ops-page .ops-actions,
  .ops-section-head,
  .ops-hero-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .ops-console-side {
    grid-template-columns: 1fr 1fr;
  }
  .ops-page .ops-metrics {
    grid-template-columns: 1fr;
  }
  .ops-section-card,
  .ops-page .ops-panel {
    padding: 14px;
    border-radius: 24px;
  }
}

@media (max-width: 900px) {
  .ecommerce-suite-grid,
  .ecom-result-grid {
    grid-template-columns: 1fr;
  }
  .ecom-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ecom-upload-box {
    min-height: 320px;
  }
  .ecom-quantity-row,
  .ecom-status-grid {
    grid-template-columns: 1fr;
  }
  .ecom-action-row {
    align-items: stretch;
    flex-direction: column;
  }
  .ecom-start-btn {
    width: 100%;
  }
}

/* Apple titanium glass redesign · final override */
:root {
  --paper: #f6f7fb;
  --white: #ffffff;
  --ink: #10131a;
  --muted: #6f7788;
  --line: rgba(38, 45, 64, .10);
  --mint: #eef5ff;
  --yellow: #fff5cf;
  --blue: #596eea;
  --blue-dark: #3346bc;
  --gray: #eef1f7;
  --shadow: 0 18px 42px rgba(45, 52, 75, .08);
  --shadow-lg: 0 30px 90px rgba(45, 52, 75, .12);
  --inner-glow: inset 0 1px 0 rgba(255,255,255,.82);
  --glass: rgba(255,255,255,.72);
  --glass-strong: rgba(255,255,255,.88);
  --accent: #6574f6;
  --accent-soft: rgba(101,116,246,.12);
  --success: #12a87a;
  --font-display: "Manrope", "Noto Sans SC", sans-serif;
  --font-body: "Manrope", "Noto Sans SC", sans-serif;
}

html {
  background: #f6f7fb;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(214, 229, 255, .72), transparent 32rem),
    radial-gradient(circle at 94% 12%, rgba(232, 226, 255, .72), transparent 34rem),
    linear-gradient(180deg, #fbfcff 0%, #eef2f6 100%);
  font-family: var(--font-body);
  letter-spacing: -.01em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.38) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.52), transparent 78%);
}

.app-frame {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  gap: 28px;
  min-height: 100vh;
  padding: 26px 30px 30px;
}

.sidebar {
  position: sticky !important;
  top: 26px;
  height: calc(100vh - 52px);
  gap: 24px;
  padding: 28px 22px;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.56)),
    radial-gradient(circle at 60% 100%, rgba(188, 199, 255, .22), transparent 18rem);
  box-shadow: 0 28px 80px rgba(67, 76, 100, .10), var(--inner-glow);
  backdrop-filter: blur(24px);
}

.side-brand {
  padding: 4px 4px 12px;
}

.side-brand strong,
.logo {
  color: #141820;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.04em;
}

.side-brand strong {
  font-size: 20px;
}

.side-brand span {
  margin-top: 6px;
  color: #8891a2;
  font-size: 12px;
  font-weight: 800;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
}

.logo::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%),
    conic-gradient(from 135deg, #7c8cff, #e7eaff, #7fc8ff, #7c8cff);
  box-shadow: 0 10px 22px rgba(101, 116, 246, .28);
}

.logo::after {
  display: none;
}

.new-project,
.side-nav a,
.hard-btn,
.ghost-btn,
.plan-card,
.pay-method,
.small-action,
.button {
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 32px rgba(68, 76, 99, .08), var(--inner-glow) !important;
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.new-project,
.hard-btn,
.recharge-pay-submit {
  background: linear-gradient(135deg, #dff9ee 0%, #d7e8ff 52%, #dcd9ff 100%) !important;
  color: #152034 !important;
}

.ghost-btn,
.side-nav a,
.pay-method {
  background: rgba(255,255,255,.66) !important;
  color: #4b5568 !important;
}

.new-project:hover,
.hard-btn:hover,
.ghost-btn:hover,
.side-nav a:hover,
.plan-card:hover,
.pay-method:hover,
.agent-grid button.agent-card-select:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 48px rgba(68, 76, 99, .14), var(--inner-glow) !important;
}

.side-nav {
  gap: 12px;
}

.side-nav a {
  min-height: 52px;
  padding: 0 18px;
  justify-content: flex-start;
}

.side-nav a.is-active,
.side-nav a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(233,238,255,.76)) !important;
  color: #2636b8 !important;
  box-shadow: 0 16px 38px rgba(101,116,246,.16), var(--inner-glow) !important;
}

.main-frame {
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

.topbar,
.standalone-topbar {
  top: 26px;
  min-height: 68px;
  height: auto;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 999px;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 18px 58px rgba(44, 52, 74, .10), var(--inner-glow) !important;
  backdrop-filter: blur(24px);
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 22px;
}

.top-nav {
  justify-content: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
}

.top-nav a {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
}

.top-nav a.is-active,
.top-nav a[aria-current="page"],
.top-nav a:hover {
  background: rgba(245,247,255,.92);
  color: #202532;
}

.top-actions {
  gap: 10px;
}

.top-actions .hard-btn,
.top-actions .ghost-btn,
.credit-badge {
  min-height: 44px;
  padding: 0 17px;
  font-size: 13px;
}

.credit-badge {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(232,237,255,.78));
  color: #172033;
  box-shadow: 0 18px 42px rgba(75, 85, 122, .12), var(--inner-glow);
}

.credit-badge span {
  color: #7b8494;
}

.credit-badge strong {
  color: #172033;
}

main {
  min-width: 0;
}

.agents-section,
.workspace-zone,
.recharge-zone,
.works-zone,
.ops-zone,
.footer-banner {
  padding: 34px 0 0 !important;
  background: transparent !important;
}

.section-title,
.workspace-head,
.module-head,
.recharge-head,
.credit-ledger-head,
.ops-title,
.ops-actions,
.work-card-top,
.work-card-meta,
.work-card-actions {
  gap: 16px;
}

.section-title {
  margin: 0 0 22px;
  padding: 0 10px;
}

.section-title h2,
.workspace-head h3,
.module-head h4,
.recharge-head h3,
.login-card h1,
.ops-page .section-title h2,
.recharge-page .section-title h2 {
  color: #10131a;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.06em;
}

.section-title h2,
.ops-page .section-title h2,
.recharge-page .section-title h2 {
  font-size: clamp(2.4rem, 5.8vw, 5.7rem) !important;
  line-height: .92;
}

.section-title p,
.module-head p,
.recharge-head p,
.work-card p,
.workspace-alert,
.workspace-cost span {
  color: var(--muted);
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.agent-grid button.agent-card-select {
  position: relative;
  min-height: 168px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(101,116,246,.14), transparent 4.6rem),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(246,248,252,.62)) !important;
  box-shadow: 0 22px 62px rgba(47, 56, 83, .09), var(--inner-glow) !important;
  text-align: left;
}

.agent-grid button.agent-card-select::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(230,235,255,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.agent-grid button.agent-card-select b {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: .02em;
}

.agent-grid button.agent-card-select h3 {
  margin: 16px 0 10px;
  color: #111827;
  font-size: 22px;
  letter-spacing: -.05em;
}

.agent-grid button.agent-card-select p {
  max-width: 16em;
  color: #747d8e;
  font-size: 13px;
  line-height: 1.65;
}

.agent-grid button.agent-card-select.is-active {
  border-color: rgba(101,116,246,.28) !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(101,116,246,.24), transparent 5rem),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(240,244,255,.78)) !important;
  box-shadow: 0 30px 76px rgba(101,116,246,.16), var(--inner-glow) !important;
}

.workspace-panel,
.module-pane,
.recharge-panel,
.work-card,
.works-import-panel,
.login-card,
.user-dashboard,
.ops-panel,
.ops-section-card,
.ops-hero-card,
.brief-module-card,
.ecommerce-suite-panel,
.result-card,
.result-shell,
.planned-pane,
.credit-ledger-panel,
.user-credit-hero,
.media-lightbox .lightbox-content {
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(250,251,255,.62)),
    radial-gradient(circle at 100% 0%, rgba(216,224,255,.26), transparent 16rem) !important;
  box-shadow: 0 26px 76px rgba(46, 55, 82, .10), var(--inner-glow) !important;
  backdrop-filter: blur(22px);
}

.workspace-panel {
  padding: 28px;
}

.workspace-head {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(36, 44, 62, .08) !important;
}

.workspace-kicker,
.result-label,
.ops-kicker {
  color: #0e8f70 !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

.workspace-head h3 {
  font-size: clamp(2.2rem, 4vw, 4.8rem);
}

.workspace-cost {
  display: inline-flex;
  width: auto;
  margin: 18px 0 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: #111d18 !important;
  color: #fff !important;
  font-size: 13px;
  box-shadow: 0 16px 34px rgba(17, 29, 24, .12);
}

.workspace-cost strong,
.workspace-cost span {
  color: #fff !important;
}

.field,
.custom-recharge {
  gap: 10px;
}

.field > span,
.custom-recharge > span {
  color: #263043;
  font-size: 13px;
  font-weight: 900;
}

input,
textarea,
select,
.select-wrap,
.upload-field,
.module-form textarea,
.works-import-panel textarea {
  border: 1px solid rgba(229,233,242,.88) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 14px 28px rgba(55, 65, 92, .04) !important;
}

input:focus,
textarea:focus,
select:focus,
.upload-field:focus-within,
.select-wrap:focus-within {
  outline: none;
  border-color: rgba(101,116,246,.38) !important;
  box-shadow: 0 0 0 5px rgba(101,116,246,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.upload-field {
  min-height: 190px;
  justify-content: center;
  color: #606b7d;
}

.reference-preview,
.upload-preview,
.module-result-grid,
.works-grid,
.credit-stat-grid,
.recharge-grid,
.ops-metrics {
  gap: 16px;
}

.preview-chip,
.reference-preview figure,
.work-preview,
.generated-media,
.generated-video,
.result-placeholder,
.storyboard-frame,
.first-frame-preview,
.lightbox-media-frame {
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 28px !important;
  background: rgba(246,248,252,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}

.status-line,
.account-status,
.works-status,
.credit-ledger-status,
.works-import-status,
.ops-auto-status,
#pay-status {
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.68) !important;
  color: #245246 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.status-line[data-state="loading"],
#pay-status[data-state="loading"],
.account-status[data-state="loading"] {
  background: linear-gradient(135deg, rgba(223,249,238,.88), rgba(224,231,255,.86)) !important;
}

#pay-status[data-state="error"],
.status-line[data-state="error"],
.works-import-status[data-state="error"] {
  background: rgba(255,236,236,.84) !important;
  color: #9b1c1c !important;
}

#pay-status[data-state="success"],
.status-line[data-state="success"] {
  background: rgba(229,252,241,.9) !important;
  color: #047857 !important;
}

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

.module-action-card,
.ecom-type-card,
.ecom-mode-card,
.ecom-count-btn,
.ratio-option,
.plan-card {
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(246,248,252,.68)) !important;
  box-shadow: 0 18px 46px rgba(45, 52, 75, .08), var(--inner-glow) !important;
}

.module-action-card.is-active,
.ecom-type-card.is-active,
.ecom-mode-card.is-active,
.ecom-count-btn.is-active,
.ratio-option.is-active,
.plan-card.is-active,
.pay-method.is-active {
  border-color: rgba(101,116,246,.32) !important;
  background: linear-gradient(135deg, #eef2ff, #ffffff) !important;
  color: #2836b8 !important;
}

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

.recharge-grid .plan-card {
  min-height: 134px;
}

.recharge-grid .plan-card span {
  color: #10131a;
}

#recharge-credit-preview {
  min-width: 142px;
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(135deg, #dff9ee, #dbe2ff) !important;
  color: #172033;
  box-shadow: 0 18px 42px rgba(101,116,246,.12), var(--inner-glow);
}

.recharge-pay-submit {
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
}

.pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.login-page,
.recharge-page {
  background:
    radial-gradient(circle at 18% 2%, rgba(218, 231, 255, .76), transparent 34rem),
    radial-gradient(circle at 82% 0%, rgba(237, 231, 255, .74), transparent 36rem),
    #f7f8fb;
}

.login-shell,
.standalone-shell {
  width: min(1280px, 100%);
}

.login-card {
  max-width: 560px;
}

.login-card .account-status {
  background: rgba(255,255,255,.68) !important;
  color: #4d586b !important;
}

.user-dashboard {
  padding: 26px;
}

.credit-stat-grid article {
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 26px;
  background: rgba(255,255,255,.62);
  box-shadow: var(--inner-glow);
}

.work-card-live {
  min-height: 420px;
}

.work-card-title {
  letter-spacing: -.05em;
}

.work-card-cover {
  aspect-ratio: 16 / 10;
  border-radius: 28px;
  overflow: hidden;
  background: #eef2f8;
}

.work-card-cover img,
.work-card-cover video,
.generated-media img,
.generated-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ops-dashboard {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
}

.ops-console-side {
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: var(--inner-glow);
}

.ops-table-wrap,
.ops-section-table {
  border-radius: 24px;
  overflow: hidden;
}

.ops-table-wrap table,
.ops-section-table table {
  border-collapse: separate;
  border-spacing: 0;
}

.ops-mini-btn,
.ops-link-btn,
.ops-copy-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #6674f7, #9b8cff) !important;
  box-shadow: 0 14px 28px rgba(101,116,246,.18);
}

.footer-banner {
  margin: 34px 0 0;
  padding: 30px 0 !important;
  border: 0;
  background: transparent !important;
  color: #6b7280;
}

.footer-banner nav {
  gap: 24px;
}

@media (max-width: 1280px) {
  .agent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .module-action-grid,
  .recharge-grid,
  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .app-frame {
    display: block;
    padding: 14px;
  }
  .sidebar {
    position: static;
    height: auto;
    margin-bottom: 14px;
  }
  .side-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .topbar,
  .standalone-topbar {
    top: 14px;
    border-radius: 28px;
  }
  .topbar {
    grid-template-columns: 1fr;
  }
  .top-actions,
  .top-nav {
    justify-content: flex-start;
  }
  .ops-dashboard {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .agent-grid,
  .module-action-grid,
  .recharge-grid,
  .works-grid,
  .credit-stat-grid,
  .ops-metrics {
    grid-template-columns: 1fr !important;
  }
  .workspace-panel,
  .module-pane,
  .recharge-panel,
  .work-card,
  .works-import-panel,
  .login-card,
  .user-dashboard,
  .ops-panel {
    padding: 18px !important;
    border-radius: 26px !important;
  }
  .section-title h2,
  .ops-page .section-title h2,
  .recharge-page .section-title h2 {
    font-size: clamp(2.6rem, 15vw, 4.2rem) !important;
  }
  .side-nav {
    grid-template-columns: 1fr;
  }
  .works-import-controls,
  .custom-money-row {
    grid-template-columns: 1fr;
  }
}

/* Stitch pixel-perfect replica theme */
:root {
  --stitch-bg: #f4f7fb;
  --stitch-panel: #ffffff;
  --stitch-text: #0f172a;
  --stitch-muted: #64748b;
  --stitch-faint: #eef2f7;
  --stitch-line: #e8edf5;
  --stitch-indigo: #6d5dfc;
  --stitch-indigo-dark: #5145e5;
  --stitch-green: #10b981;
  --stitch-shadow: 0 22px 70px rgba(31, 41, 55, .06);
  --stitch-soft-shadow: 0 8px 24px rgba(15, 23, 42, .04);
}

html {
  background: var(--stitch-bg) !important;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 34rem),
    var(--stitch-bg) !important;
  color: var(--stitch-text);
  font-family: Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.app-frame,
body.has-replica-sidebar {
  display: flex !important;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  padding: 0 !important;
  background: transparent !important;
}

.sidebar {
  position: relative !important;
  inset: auto !important;
  width: 260px !important;
  min-width: 260px !important;
  height: 100vh !important;
  padding: 28px 18px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 1px 0 0 rgba(226,232,240,.74) !important;
  backdrop-filter: blur(22px);
  display: flex !important;
  flex-direction: column !important;
  gap: 30px !important;
  z-index: 20;
}

.side-brand,
.logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  text-decoration: none !important;
}

.side-brand {
  min-height: 44px;
  padding: 0 6px !important;
}

.brand-mark,
.logo::before {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c5cff, #9b8cff);
  color: #fff;
  font-size: 18px;
  box-shadow: 0 10px 24px rgba(109,93,252,.26);
}

.logo::before {
  content: "⚡";
}

.side-nav {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px !important;
  padding: 0 !important;
  margin-top: 10px;
}

.side-nav a {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #52627a !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.side-nav a span {
  width: 22px;
  color: currentColor;
  text-align: center;
}

.side-nav a.is-active,
.side-nav a[aria-current="page"] {
  background: #fff !important;
  color: var(--stitch-indigo-dark) !important;
  box-shadow: var(--stitch-soft-shadow) !important;
}

.side-safety-card {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 130px;
  padding: 22px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 85% 88%, rgba(139,92,246,.18), transparent 64px),
    linear-gradient(135deg, rgba(248,250,252,.94), rgba(245,243,255,.92));
  color: var(--stitch-text);
  text-decoration: none;
  box-shadow: var(--stitch-soft-shadow);
}

.side-safety-card strong {
  font-size: 15px;
  line-height: 1.35;
}

.side-safety-card span {
  color: var(--stitch-muted);
  font-size: 13px;
}

.side-safety-card em {
  position: absolute;
  top: 28px;
  right: 20px;
  color: #94a3b8;
  font-size: 28px;
  font-style: normal;
  line-height: 1;
}

.main-frame,
.standalone-shell {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  background: transparent !important;
}

.standalone-shell {
  display: flex;
  flex-direction: column;
}

.topbar,
.standalone-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 15;
  height: 80px !important;
  min-height: 80px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 0 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(244,247,251,.76) !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px);
}

.topbar .logo,
.standalone-topbar .logo {
  display: none !important;
}

.top-nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 20px !important;
  min-width: 0;
}

.top-nav a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  color: #52627a !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.top-nav a.is-active,
.top-nav a[aria-current="page"] {
  background: #edf2ff;
  color: var(--stitch-indigo-dark) !important;
  box-shadow: inset 0 0 0 1px rgba(109,93,252,.08), var(--stitch-soft-shadow);
}

.top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  justify-content: flex-end !important;
}

.credit-badge,
.ghost-btn,
.hard-btn,
.new-project,
.recharge-pay-submit,
.button {
  min-height: 44px;
  border: 1px solid #eef2f7 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  color: #334155 !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.04) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.hard-btn,
.recharge-pay-submit,
.form-submit {
  background: linear-gradient(135deg, #6857f6, #904df5) !important;
  color: #fff !important;
  box-shadow: 0 14px 24px rgba(104,87,246,.22) !important;
}

.credit-badge strong {
  color: var(--stitch-text);
}

main {
  min-width: 0;
  padding: 0 38px 40px !important;
}

.home-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  width: min(1450px, 100%);
  margin: 0 auto;
}

.home-main {
  min-width: 0;
}

.agents-section,
.workspace-zone,
.works-zone,
.recharge-zone,
.ops-zone,
.credit-zone,
.help-zone {
  padding: 0 !important;
  background: transparent !important;
}

.home-title {
  display: flex !important;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 34px !important;
  padding: 0 !important;
}

.section-title h2,
.workspace-head h3,
.module-head h4,
.recharge-head h3,
.ops-page .section-title h2,
.recharge-page .section-title h2 {
  margin: 0 !important;
  color: var(--stitch-text) !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  letter-spacing: -.045em !important;
  font-family: inherit !important;
  font-weight: 800 !important;
}

.section-title p,
.workspace-alert,
.workspace-cost span,
.module-head p {
  margin-top: 8px;
  color: var(--stitch-muted) !important;
  font-size: 16px;
}

.agent-search {
  width: 320px;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid #edf2f7;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--stitch-soft-shadow);
}

.agent-search span {
  color: #94a3b8;
}

.agent-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--stitch-text);
  font: inherit;
}

.agent-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.agent-grid button.agent-card-select {
  position: relative;
  min-height: 170px;
  padding: 30px 28px !important;
  overflow: hidden;
  border: 1px solid #edf2f7 !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: var(--stitch-soft-shadow) !important;
  text-align: left;
  color: var(--stitch-text);
}

.agent-grid button.agent-card-select:hover,
.agent-grid button.agent-card-select.is-active {
  transform: translateY(-2px) !important;
  border-color: rgba(109,93,252,.26) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.08) !important;
}

.agent-grid button.agent-card-select b {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 22px !important;
  border-radius: 18px;
  background: #f4efff;
  color: #8b5cf6 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

.agent-grid button.agent-card-select:nth-child(4n+3) b { background: #eff6ff; color: #3b82f6 !important; }
.agent-grid button.agent-card-select:nth-child(4n+4) b { background: #ecfdf5; color: #10b981 !important; }
.agent-grid button.agent-card-select:nth-child(4n+5) b { background: #fff7ed; color: #f97316 !important; }
.agent-grid button.agent-card-select:nth-child(4n+6) b { background: #fdf2f8; color: #ec4899 !important; }

.agent-grid button.agent-card-select h3 {
  margin: 0 0 8px !important;
  color: var(--stitch-text) !important;
  font-size: 21px !important;
  line-height: 1.18 !important;
  letter-spacing: -.045em !important;
  font-weight: 800 !important;
}

.agent-grid button.agent-card-select p {
  max-width: 180px;
  margin: 0 !important;
  color: #94a3b8 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.agent-grid button.agent-hero-card {
  grid-column: span 2;
  min-height: 294px;
  padding: 44px 48px !important;
  border-radius: 34px !important;
}

.agent-grid button.agent-hero-card b {
  width: auto;
  height: auto;
  padding: 6px 16px;
  margin-bottom: 24px !important;
  border-radius: 999px;
  font-size: 14px !important;
}

.agent-grid button.agent-hero-card h3 {
  max-width: 220px;
  font-size: 38px !important;
  line-height: 1.04 !important;
}

.agent-grid button.agent-hero-card p {
  max-width: 210px;
  color: #64748b !important;
  font-size: 17px !important;
}

.agent-grid button.agent-hero-card > span {
  display: inline-flex;
  align-items: center;
  margin-top: 30px;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--stitch-indigo-dark);
  font-weight: 800;
  box-shadow: var(--stitch-soft-shadow);
}

.agent-grid button.agent-card-select.face-hero {
  background:
    linear-gradient(90deg, rgba(245,240,255,.96) 0 42%, rgba(245,240,255,0) 63%),
    url("/assets/generated/hero-face.webp") right bottom / auto 112% no-repeat,
    #f4efff !important;
}

.agent-grid button.agent-card-select.ecom-hero {
  background:
    linear-gradient(90deg, rgba(235,248,255,.95) 0 53%, rgba(235,248,255,0) 74%),
    url("/assets/generated/hero-ecommerce.webp") right 34px center / auto 68% no-repeat,
    #e8f7ff !important;
}

.home-rail {
  display: grid;
  align-content: start;
  gap: 26px;
}

.rail-card,
.workspace-panel,
.module-pane,
.recharge-panel,
.works-import-panel,
.work-card,
.user-dashboard,
.ops-panel,
.login-card {
  border: 1px solid #edf2f7 !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--stitch-shadow) !important;
}

.rail-card {
  padding: 34px;
}

.rail-card h3 {
  margin: 0 0 24px;
  color: var(--stitch-text);
  font-size: 22px;
  letter-spacing: -.04em;
}

.rail-status-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.rail-status-row span,
.recent-task-card li > span {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #eef2ff;
  color: var(--stitch-indigo-dark);
  font-size: 20px;
}

.rail-status-row p,
.recent-task-card p {
  margin: 0;
  color: #334155;
  font-weight: 600;
}

.rail-status-row strong {
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--stitch-indigo-dark);
}

.rail-card a {
  display: inline-flex;
  margin-top: 22px;
  color: #475569;
  font-weight: 700;
  text-decoration: none;
}

.rail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rail-card-head a {
  margin: 0;
  color: #94a3b8;
}

.recent-task-card ul {
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.recent-task-card li {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 14px;
}

.recent-task-card em {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 14px;
  font-style: normal;
}

.rail-full-link {
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid #edf2f7;
  border-radius: 16px;
  background: #f8fafc;
}

.workspace-zone {
  margin-top: 32px;
}

.home-page .workspace-zone {
  display: none !important;
}

.agent-detail-page main {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.agent-detail-page .workspace-zone {
  margin-top: 28px;
}

.workspace-panel,
.module-pane,
.recharge-panel,
.user-dashboard,
.ops-panel {
  padding: 30px !important;
}

.field,
.upload-field,
.select-wrap,
textarea,
input,
select {
  border-color: #e6edf6 !important;
  border-radius: 18px !important;
  background-color: #fff !important;
  color: var(--stitch-text) !important;
  box-shadow: none !important;
}

.upload-field {
  min-height: 220px;
  background: #fbfdff !important;
  border-style: dashed !important;
}

.result-shell,
.status-line,
.account-status {
  border-color: #edf2f7 !important;
  border-radius: 18px !important;
  background: #fff !important;
}

.works-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}

.work-card-live {
  min-height: 170px;
}

.work-card-cover {
  border-radius: 20px !important;
  background: #eef4fa !important;
}

.works-toolbar {
  display: grid;
  grid-template-columns: 1fr 360px auto;
  align-items: center;
  gap: 22px;
  margin: 28px 0;
}

.works-tabs {
  display: flex;
  gap: 24px;
}

.works-tabs button {
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #334155;
  font: inherit;
  font-weight: 600;
}

.works-tabs button.is-active {
  background: #eef2ff;
  color: var(--stitch-indigo-dark);
  box-shadow: inset 0 0 0 1px rgba(109,93,252,.12);
}

.works-search {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: #fff;
}

.works-search input {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  outline: 0;
}

.works-import-panel {
  display: none !important;
}

.work-list-row {
  display: grid !important;
  grid-template-columns: 88px minmax(210px, 1fr) minmax(330px, 520px) 150px;
  align-items: center;
  gap: 28px;
  padding: 34px !important;
}

.work-list-icon {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #eef2ff;
  color: var(--stitch-indigo-dark);
  font-size: 30px;
  font-weight: 900;
}

.work-list-main {
  display: grid;
  gap: 24px;
}

.work-list-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.work-list-title-row strong {
  color: var(--stitch-text);
  font-size: 24px;
  letter-spacing: -.045em;
}

.work-card-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border-radius: 10px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 14px;
  font-weight: 700;
}

.work-list-meta {
  display: flex;
  gap: 32px;
  color: #94a3b8;
  font-size: 15px;
}

.work-list-meta b {
  display: block;
  margin-top: 6px;
  color: var(--stitch-text);
  font-size: 18px;
}

.work-list-preview {
  display: grid;
  grid-template-columns: repeat(4, 118px);
  align-items: center;
  gap: 14px;
}

.work-list-thumb,
.work-list-more {
  width: 118px;
  height: 118px;
  overflow: hidden;
  border: 1px solid #edf2f7;
  border-radius: 12px;
  background: #f8fafc;
}

.work-list-thumb img,
.work-list-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ghost-thumb {
  background:
    radial-gradient(circle at 50% 40%, rgba(15,23,42,.18), transparent 34px),
    linear-gradient(135deg, #0f172a, #020617);
}

.work-list-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 20px;
  font-weight: 700;
}

.work-list-row .work-card-actions {
  justify-content: flex-end;
}

.ops-dashboard {
  grid-template-columns: 230px minmax(0, 1fr) !important;
}

.recharge-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.footer-banner {
  display: none !important;
}

[hidden],
.side-nav a[hidden],
.top-nav a[hidden],
.ops-nav-link[hidden] {
  display: none !important;
}

.login-page {
  min-height: 100vh;
  display: block !important;
  padding: 0 !important;
  background: var(--stitch-bg) !important;
}

.login-replica-top {
  width: 100% !important;
  height: 80px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
  padding: 0 56px;
  border-bottom: 1px solid #e6edf6;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(20px);
}

.login-replica-top .logo {
  display: inline-flex !important;
}

.login-shell {
  width: 100% !important;
  min-height: calc(100vh - 80px);
  display: grid;
  place-items: center;
  padding: 70px 56px !important;
}

.login-card {
  width: min(1500px, 100%);
  max-width: none !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 80px;
  padding: 24px !important;
  border-radius: 38px !important;
  background: #fff !important;
}

.login-promo-panel {
  min-height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 40px 40px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 35% 65%, rgba(109,93,252,.18), transparent 150px),
    linear-gradient(135deg, #e7ebff, #f2f4ff);
  overflow: hidden;
}

.login-promo-panel h2 {
  margin: 0;
  color: var(--stitch-text);
  font-size: 42px;
  letter-spacing: -.06em;
}

.login-promo-panel p {
  margin: 18px 0 110px;
  color: #475569;
  font-size: 20px;
}

.login-promo-shot {
  width: min(320px, 70%);
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.12)),
    radial-gradient(circle at 50% 60%, rgba(109,93,252,.28), transparent 120px),
    rgba(255,255,255,.62);
  color: var(--stitch-text);
  box-shadow: 0 30px 80px rgba(109,93,252,.12);
}

.login-promo-shot strong {
  font-size: 18px;
}

.login-promo-shot span {
  margin-top: 10px;
  color: #64748b;
}

.login-form-panel {
  position: relative;
  padding: 76px 70px 54px 0;
}

.login-back {
  position: absolute;
  top: 30px;
  right: 0;
}

.login-form-panel h1 {
  margin: 0 0 16px;
  color: var(--stitch-text);
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -.055em;
}

.login-subtitle {
  margin: 0 0 54px;
  color: #64748b;
  font-size: 18px;
}

.login-tabs {
  display: flex;
  gap: 38px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 22px;
}

.login-tabs strong {
  position: relative;
  color: var(--stitch-indigo-dark);
}

.login-tabs strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25px;
  height: 3px;
  border-radius: 999px;
  background: var(--stitch-indigo-dark);
}

.auth-form {
  display: grid;
  gap: 28px;
}

.auth-form label {
  display: grid;
  gap: 12px;
  color: #334155;
  font-size: 15px;
  font-weight: 600;
}

.auth-form input {
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
  border: 1px solid #dbe4f0 !important;
  border-radius: 16px !important;
  background: #fbfdff !important;
  font-size: 16px;
}

.auth-actions {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 18px;
  margin-top: 4px;
}

.auth-actions .hard-btn {
  min-height: 70px;
  font-size: 22px !important;
}

.oauth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 54px 0 28px;
  color: #94a3b8;
  font-style: normal;
}

.oauth-divider span {
  height: 1px;
  background: #e2e8f0;
}

.oauth-divider em {
  font-style: normal;
}

.oauth-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.oauth-row .ghost-btn {
  min-height: 58px;
  justify-content: center;
}

.login-agreement {
  margin-top: 38px;
  color: #64748b;
  font-size: 15px;
}

@media (max-width: 1280px) {
  .home-dashboard {
    grid-template-columns: 1fr;
  }
  .home-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .works-toolbar,
  .work-list-row {
    grid-template-columns: 1fr;
  }
  .work-list-preview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .work-list-thumb,
  .work-list-more {
    width: 100%;
  }
  .login-card {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .login-promo-panel {
    min-height: 360px;
    padding: 58px 30px 30px;
  }
  .login-promo-shot {
    min-height: 190px;
  }
  .login-form-panel {
    padding: 36px 34px 42px;
  }
}

@media (max-width: 980px) {
  .app-frame,
  body.has-replica-sidebar {
    display: block !important;
    height: auto;
    overflow: visible;
  }
  .sidebar {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 12px;
    border-radius: 24px !important;
  }
  .side-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .side-safety-card {
    display: none;
  }
  .main-frame,
  .standalone-shell {
    height: auto;
    overflow: visible !important;
  }
  .topbar,
  .standalone-topbar {
    grid-template-columns: 1fr !important;
    height: auto !important;
    padding: 18px !important;
  }
  main {
    padding: 18px !important;
  }
  .login-replica-top {
    height: auto;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }
  .login-shell {
    padding: 20px !important;
  }
  .home-title {
    align-items: stretch;
    flex-direction: column;
  }
  .agent-search {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .agent-grid,
  .home-rail,
  .works-grid,
  .recharge-grid {
    grid-template-columns: 1fr !important;
  }
  .agent-grid button.agent-hero-card {
    grid-column: auto;
    min-height: 240px;
  }
  .login-card {
    padding: 14px !important;
    border-radius: 28px !important;
  }
  .login-promo-panel {
    min-height: 260px;
  }
  .login-form-panel {
    padding: 24px 14px 22px;
  }
  .login-form-panel h1 {
    font-size: 34px;
  }
  .auth-actions,
  .oauth-row {
    grid-template-columns: 1fr;
  }
  .face-hero,
  .ecom-hero {
    background-image: linear-gradient(135deg, rgba(245,240,255,.98), rgba(235,248,255,.86)) !important;
  }
}

/* Compact login page and OAuth provider polish */
.login-page {
  min-height: 100vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 44px 20px !important;
  background: var(--stitch-bg) !important;
}

.login-page .login-shell {
  width: min(900px, calc(100vw - 40px)) !important;
  min-height: auto !important;
  display: block !important;
  padding: 0 !important;
}

.login-page .login-card.account-card {
  width: 100% !important;
  max-width: 900px !important;
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  grid-template-areas:
    "brand title"
    "status form"
    "oauth form"
    "logout logout" !important;
  gap: 22px 42px !important;
  padding: 28px !important;
  border: 1px solid rgba(226, 232, 240, .82) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 8% 4%, rgba(166, 255, 217, .34), transparent 16rem),
    radial-gradient(circle at 100% 0%, rgba(231, 227, 255, .62), transparent 18rem),
    rgba(255, 255, 255, .92) !important;
  box-shadow: 0 28px 80px rgba(51, 65, 85, .12), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

.login-page .login-card .logo {
  grid-area: brand;
  align-self: start;
  margin: 0 !important;
  padding: 4px 0;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap;
  line-height: 1.1;
  color: #111827 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  text-decoration: none !important;
}

.login-page .login-card .logo::before {
  content: "";
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 0;
  background: url("/assets/generated/brand-lightning.svg") center / contain no-repeat !important;
  box-shadow: none;
}

.login-page .login-card h1 {
  grid-area: title;
  margin: 0 !important;
  color: #111827;
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 60px) !important;
  line-height: 1;
  letter-spacing: -.055em;
}

.login-page .login-card .account-status {
  grid-area: status;
  min-height: 132px;
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  padding: 22px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .62) !important;
  color: #18314f !important;
  box-shadow: none !important;
}

.login-page .login-card .auth-form {
  grid-area: form;
  align-self: start;
  display: grid !important;
  gap: 14px !important;
}

.login-page .login-card .auth-form input {
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 22px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

.login-page .login-card .auth-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px !important;
  margin: 6px 0 0 !important;
}

.login-page .login-card .auth-actions .hard-btn,
.login-page .login-card .auth-actions .ghost-btn {
  min-height: 54px !important;
  padding: 0 24px !important;
  justify-content: center;
  font-size: 16px !important;
}

.login-page .login-card .oauth-row {
  grid-area: oauth;
  align-self: end;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
}

.login-page .login-card .oauth-btn {
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px !important;
  color: #18223a !important;
  font-size: 15px !important;
}

.login-page .login-card .oauth-btn img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.login-page .login-card > #logout-btn {
  grid-area: logout;
  justify-self: start;
}

.login-page .login-card > .hard-btn[href="/recharge.html"] {
  display: none !important;
}

@media (max-width: 820px) {
  .login-page {
    align-items: flex-start;
    padding: 18px !important;
  }

  .login-page .login-shell {
    width: 100% !important;
  }

  .login-page .login-card.account-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "title"
      "status"
      "form"
      "oauth"
      "logout" !important;
    gap: 18px !important;
    padding: 20px !important;
  }

  .login-page .login-card h1 {
    font-size: 40px !important;
  }

  .login-page .login-card .account-status {
    min-height: auto;
  }

  .login-page .login-card .auth-actions {
    grid-template-columns: 1fr;
  }
}

/* Final centered login layout */
.login-page .login-shell {
  width: min(620px, calc(100vw - 40px)) !important;
}

.login-page .login-card.account-card {
  max-width: 620px !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "brand"
    "title"
    "status"
    "form"
    "oauth"
    "logout" !important;
  gap: 18px !important;
  padding: 36px !important;
}

.login-page .login-card .logo {
  justify-self: center;
  justify-content: center;
}

.login-page .login-card h1 {
  justify-self: center;
  text-align: center;
}

.login-page .login-card .account-status {
  min-height: auto !important;
  justify-content: center;
  padding: 12px 16px !important;
  text-align: center;
  border-radius: 999px !important;
}

.login-page .login-card .auth-actions {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.login-page .login-card .oauth-row {
  grid-template-columns: 1fr 1fr !important;
  margin-top: -2px !important;
}

@media (max-width: 640px) {
  .login-page .login-shell {
    width: 100% !important;
  }

  .login-page .login-card.account-card {
    padding: 24px 20px !important;
  }

  .login-page .login-card .auth-actions,
  .login-page .login-card .oauth-row {
    grid-template-columns: 1fr !important;
  }
}

/* Ops user management should never clip the invite/credit controls */
@media (max-width: 1500px) {
  .ops-user-table {
    min-width: 0 !important;
    table-layout: auto !important;
  }

  .ops-user-table thead {
    display: none;
  }

  .ops-user-table,
  .ops-user-table tbody {
    display: block;
    width: 100%;
  }

  .ops-user-table tr[data-ops-user-row] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(130px, auto);
    gap: 12px 18px;
    padding: 18px;
    border-bottom: 1px solid rgba(226,232,240,.86);
  }

  .ops-user-table td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border-bottom: 0 !important;
  }

  .ops-user-table td:nth-child(5) {
    grid-column: 1 / -1;
    min-width: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(226,232,240,.72) !important;
  }

  .ops-user-table .ops-control-stack {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .ops-user-table .ops-credit-controls {
    grid-template-columns: 42px 82px minmax(0, 1fr) 64px;
  }

  .ops-user-table .ops-ratio-controls {
    grid-template-columns: 42px 82px 22px 64px;
    justify-content: start;
  }

  .ops-user-table .ops-invite-link {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .ops-user-table tr[data-ops-user-row] {
    grid-template-columns: 1fr;
  }

  .ops-user-table td:nth-child(5) {
    padding-top: 12px !important;
  }

  .ops-user-table .ops-credit-controls {
    grid-template-columns: 42px minmax(0, 1fr) 64px;
  }

  .ops-user-table .ops-credit-controls input[data-credit-reason] {
    grid-column: 2 / -1;
  }

  .ops-user-table .ops-ratio-controls {
    grid-template-columns: 42px minmax(0, 92px) 22px 64px;
  }

  .ops-user-table .ops-invite-link {
    align-items: stretch;
    flex-direction: column;
  }

  .ops-user-table .ops-copy-btn {
    align-self: flex-start;
  }
}

/* Ops center needs to use the full workspace width, not a centered narrow shell. */
.stitch-replica.ops-replica .main-frame {
  width: 100% !important;
  max-width: none !important;
}

.stitch-replica.ops-replica .replica-main.ops-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 38px 52px !important;
  box-sizing: border-box;
}

.stitch-replica.ops-replica .ops-hero,
.stitch-replica.ops-replica .ops-panel,
.stitch-replica.ops-replica .ops-result,
.stitch-replica.ops-replica .ops-dashboard,
.stitch-replica.ops-replica .ops-console-main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.stitch-replica.ops-replica .ops-panel {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.stitch-replica.ops-replica .ops-dashboard {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start;
}

.stitch-replica.ops-replica .ops-table-wrap {
  overflow-x: auto;
}

.stitch-replica.ops-replica .ops-user-table {
  min-width: 1120px;
}

.stitch-replica.ops-replica .ops-user-table th:nth-child(1),
.stitch-replica.ops-replica .ops-user-table td:nth-child(1) { width: 24%; }
.stitch-replica.ops-replica .ops-user-table th:nth-child(2),
.stitch-replica.ops-replica .ops-user-table td:nth-child(2) { width: 8%; }
.stitch-replica.ops-replica .ops-user-table th:nth-child(3),
.stitch-replica.ops-replica .ops-user-table td:nth-child(3) { width: 7%; }
.stitch-replica.ops-replica .ops-user-table th:nth-child(4),
.stitch-replica.ops-replica .ops-user-table td:nth-child(4) { width: 15%; }
.stitch-replica.ops-replica .ops-user-table th:nth-child(5),
.stitch-replica.ops-replica .ops-user-table td:nth-child(5) { width: 46%; }

@media (min-width: 1700px) {
  .stitch-replica.ops-replica .ops-dashboard {
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }

  .stitch-replica.ops-replica .ops-user-table {
    min-width: 0;
  }
}

@media (max-width: 1180px) {
  .stitch-replica.ops-replica .ops-dashboard {
    grid-template-columns: 1fr !important;
  }

  .stitch-replica.ops-replica .ops-console-side {
    position: static !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Admin ops console lives in the real sidebar so the content area stays wide. */
.stitch-replica.ops-replica .sidebar.has-ops-console {
  gap: 18px !important;
}

.stitch-replica.ops-replica .sidebar.has-ops-console .side-nav {
  flex: 0 0 auto !important;
  margin-top: 8px !important;
}

.stitch-replica.ops-replica .ops-sidebar-console {
  position: static !important;
  top: auto !important;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  align-content: start;
  gap: 8px;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(226, 232, 240, .72) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(124, 77, 255, .10), transparent 120px),
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(248, 252, 250, .72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
  overflow: hidden;
}

.stitch-replica.ops-replica .ops-sidebar-console .ops-console-brand {
  margin-bottom: 6px;
  padding: 12px;
  border-radius: 18px;
}

.stitch-replica.ops-replica .ops-sidebar-console .ops-console-brand strong {
  font-size: 18px;
  letter-spacing: 0;
}

.stitch-replica.ops-replica .ops-sidebar-console .ops-console-brand small {
  font-size: 12px;
}

.stitch-replica.ops-replica .ops-sidebar-console button {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 14px;
}

.stitch-replica.ops-replica .ops-dashboard {
  grid-template-columns: minmax(0, 1fr) !important;
}

.stitch-replica.ops-replica .ops-console-main {
  grid-column: 1 / -1;
}

@media (min-width: 1700px) {
  .stitch-replica.ops-replica .ops-dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}