:root {
  --bg: #fffaf2;
  --surface: rgba(255, 255, 255, .78);
  --surface-solid: #fffdf9;
  --surface-2: #fff8ec;
  --text: #2a2118;
  --muted: #7a6549;
  --soft: #a48b63;
  --line: rgba(176, 126, 44, .16);
  --line-strong: rgba(176, 126, 44, .28);
  --primary: #cc8c1d;
  --primary-2: #9a6209;
  --accent: #e8bb58;
  --danger: #b54b45;
  --success: #8f6a1a;
  --warning: #9b650b;
  --shadow: 0 16px 42px rgba(105, 70, 17, .08);
  --radius: 14px;
  --radius-sm: 9px;
}

/* Home page premium entry layout */
body.is-home-page {
  background: #fbf7ef;
}

body.is-home-page .topbar {
  height: 58px;
  padding: 0 28px 0 40px;
  border-bottom-color: rgba(180, 129, 45, .08);
  background: rgba(251, 247, 239, .72);
  box-shadow: none;
}

body.is-home-page .topbar::before {
  content: "创作中心";
  color: rgba(42,33,24,.74);
  font-size: 14px;
  font-weight: 760;
}

body.is-home-page .search,
body.is-home-page .workspace-chip,
body.is-home-page .account-chip {
  display: none;
}

body.is-home-page .top-actions .btn.primary {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(154,98,9,.12);
}

body.is-home-page .avatar-badge {
  width: 32px;
  height: 32px;
}

body.is-home-page .content {
  padding: 22px 40px 48px;
  background:
    radial-gradient(circle at 82% 0%, rgba(232,187,88,.15), transparent 31%),
    linear-gradient(180deg, #fbf7ef 0%, #fffaf1 100%);
}

.home-studio,
.home-feature-grid,
.home-persona-showcase,
.home-persona-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

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

.home-feature-card {
  position: relative;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 10px 24px rgba(105,70,17,.08);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  contain: paint;
}

.home-feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .28s ease, filter .28s ease;
}

.home-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 42%, rgba(42,33,24,.18)),
    linear-gradient(135deg, rgba(255,255,255,.1), rgba(204,140,29,.08));
  opacity: .68;
  pointer-events: none;
}

.home-feature-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px rgba(105,70,17,.16);
}

.home-feature-card:hover img {
  transform: scale(1.04);
  filter: saturate(1.04) contrast(1.02);
}

.home-feature-fallback {
  position: absolute;
  inset: 18px;
  z-index: 1;
  display: none;
  align-content: end;
  gap: 5px;
  text-align: left;
}

.home-feature-card.is-missing-image .home-feature-fallback {
  display: grid;
}

.home-feature-card.is-missing-image .home-feature-fallback b {
  color: #2a2118;
  font-size: 18px;
}

.home-feature-card.is-missing-image .home-feature-fallback em {
  color: var(--muted);
  font-style: normal;
}

.home-persona-showcase {
  margin-top: 48px;
}

.home-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}

.home-section-head h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.25;
}

.home-section-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.home-persona-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.home-persona-filters button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  color: rgba(42,33,24,.72);
  font-size: 13px;
  font-weight: 720;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}

.home-persona-filters button:hover,
.home-persona-filters button.active {
  color: #8a5605;
  border-color: rgba(204,140,29,.32);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,238,203,.84));
}

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

.home-persona-card {
  position: relative;
  aspect-ratio: 3 / 4;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(176,126,44,.15);
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 16%, rgba(232,187,88,.26), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(248,235,214,.86));
  box-shadow: 0 14px 30px rgba(105,70,17,.1), inset 0 1px 0 rgba(255,255,255,.86);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  contain: paint;
}

.home-persona-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform .28s ease, filter .28s ease;
}

.home-persona-card::after {
  content: "";
  position: absolute;
  inset: 34% 0 0;
  background: linear-gradient(180deg, rgba(23,18,15,0), rgba(23,18,15,.68) 60%, rgba(23,18,15,.86));
  pointer-events: none;
}

.home-persona-card:hover {
  transform: translateY(-4px);
  border-color: rgba(204,140,29,.34);
  box-shadow: 0 22px 48px rgba(105,70,17,.18), inset 0 1px 0 rgba(255,255,255,.9);
}

.home-persona-card:hover img {
  transform: scale(1.04);
  filter: saturate(1.04) contrast(1.02);
}

.home-persona-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 24px 16px 14px;
  color: #fff;
  display: grid;
  gap: 10px;
}

.home-persona-overlay b {
  display: block;
  font-size: 17px;
  line-height: 1.25;
}

.home-persona-overlay span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.76);
  font-size: 12px;
}

.home-persona-overlay p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 9px 0 0;
}

.home-persona-overlay i {
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: normal;
}

.home-persona-overlay .btn {
  justify-self: start;
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.88);
  color: #5d3a06;
}

.home-persona-fallback {
  position: absolute;
  inset: 16px;
  z-index: 1;
  display: none;
  align-content: end;
  color: var(--text);
}

.home-persona-card.is-missing-image .home-persona-fallback {
  display: grid;
}

body.is-home-page,
body.is-home-page .main,
body.is-home-page .content,
body.is-home-page #page-home {
  overflow-x: clip;
}

@media (max-width: 1240px) {
  .home-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 980px) {
  body.is-home-page .content {
    padding: 22px 24px 40px;
  }

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

@media (max-width: 640px) {
  body.is-home-page .topbar {
    height: auto;
    padding: 10px 14px;
  }

  body.is-home-page .content {
    padding: 18px 16px 34px;
  }

  .home-feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-feature-card {
    border-radius: 22px;
  }

  .home-persona-showcase {
    margin-top: 36px;
  }

  .home-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .home-persona-overlay {
    padding: 15px 12px 12px;
  }

  .home-persona-overlay b {
    font-size: 16px;
  }
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--text);
  background: linear-gradient(135deg, #fffdf9, #fff8ec 48%, #f7ecd9);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid rgba(204, 140, 29, .28);
  outline-offset: 2px;
}
img, video { display: block; max-width: 100%; }
.nav-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
.sidebar {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 16px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,249,239,.56));
  border-right: 1px solid rgba(204, 140, 29, .14);
  backdrop-filter: blur(24px);
}
.brand {
  display: flex;
  align-items: center;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--line);
}
.brand-logo {
  display: block;
  width: 156px;
  height: auto;
}
.nav {
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px 4px 14px 0;
  margin-right: -4px;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(154,98,9,.28) transparent;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(154,98,9,.22);
}
.nav-section {
  display: grid;
  gap: 3px;
  padding: 0 0 6px;
}
.nav-section + .nav-section {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(176,126,44,.12);
}
.nav-section-title,
.nav-label {
  padding: 3px 8px 4px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
}
.nav-flow-head {
  padding: 0 8px 4px;
}
.nav-flow-head .nav-section-title {
  padding: 0;
}
.nav-item {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 11px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(42, 33, 24, .72);
  background: transparent;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  overflow: hidden;
}
.nav-item b {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: rgba(151,96,9,.82);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item.active .nav-icon,
.nav-parent.active .nav-icon {
  color: #9a6209;
}
.nav-flow-step {
  position: relative;
  height: 36px;
  min-height: 36px;
  align-items: center;
  padding: 0 11px;
  gap: 10px;
}
.nav-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 27px;
  bottom: -8px;
  width: 1px;
  background: rgba(204,140,29,.14);
}
.nav-step-index,
.nav-step {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(151,96,9,.88);
  background: #fffdf9;
  border: 1px solid rgba(204,140,29,.2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}
.nav-flow-step b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
  color: rgba(42,33,24,.82);
  font-size: 13px;
  font-weight: 760;
}

.nav-flow-step .nav-step-index + b {
  white-space: normal;
}
.nav-flow-step.active {
  box-shadow: inset 0 0 0 1px rgba(204,140,29,.16);
}
.nav-flow-step.active .nav-step-index,
.nav-flow-step.active .nav-step {
  color: #fff;
  background: #cc8c1d;
  border-color: #cc8c1d;
}
.nav-flow-step.active b {
  color: #8f5b08;
}
.nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(204,140,29,.46);
  flex: 0 0 6px;
}
.nav-item:hover { background: rgba(255,255,255,.48); }
.nav-item.active {
  color: var(--primary-2);
  background: linear-gradient(135deg, rgba(204,140,29,.14), rgba(255,255,255,.44));
}
.nav-parent {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(42, 33, 24, .72);
  font-size: 14px;
  font-weight: 760;
  text-align: left;
  overflow: hidden;
}
.nav-parent.active {
  color: var(--primary-2);
}
.nav-parent:hover { background: rgba(255,255,255,.48); }
.nav-parent b {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-parent i {
  color: rgba(42,33,24,.45);
  font-style: normal;
  font-size: 14px;
  transition: transform .18s ease;
}
.nav-parent.collapsed i { transform: rotate(-90deg); }
.nav-subgroup {
  display: grid;
  gap: 3px;
  margin: -1px 0 2px 16px;
  padding: 2px 0 6px 10px;
  border-left: 1px solid rgba(204,140,29,.18);
}
.nav-subgroup.collapsed { display: none; }
.nav-child {
  height: 32px;
  padding-left: 8px;
  font-size: 13px;
}
.nav-child .nav-icon {
  width: 16px;
  height: 16px;
}
.nav-child b {
  font-size: 13px;
  font-weight: 650;
}
.plan-card {
  flex: 0 0 auto;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
  box-shadow: var(--shadow);
}
.plan-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-card strong { font-size: 14px; }
.plan-card span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 760;
}
.plan-card p,
.plan-bar,
#refreshWorkspaceBtn {
  display: none;
}
.plan-card p {
  margin: 6px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-bar { height: 5px; border-radius: 999px; overflow: hidden; background: rgba(204,140,29,.12); margin-bottom: 8px; }
.plan-bar i { display: block; width: 58%; height: 100%; border-radius: inherit; background: var(--primary); }
.plan-card .btn { min-height: 30px; margin-top: 8px; }
.plan-card .btn + .btn { margin-top: 6px; }

.main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(204,140,29,.12);
  background: rgba(255,250,242,.78);
  backdrop-filter: blur(22px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.search {
  flex: 1;
  max-width: 420px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.68);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  color: var(--soft);
}
.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}
.workspace-chip {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  white-space: nowrap;
}
.workspace-chip b { font-size: 13px; }
.workspace-chip span { color: var(--muted); font-size: 12px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.account-chip {
  min-width: 142px;
  min-height: 42px;
  display: grid;
  gap: 2px;
  align-content: center;
  padding: 7px 12px;
  border: 1px solid rgba(204,140,29,.22);
  border-radius: var(--radius);
  background: rgba(255,255,255,.74);
  color: var(--text);
  text-align: left;
}
.account-chip b {
  font-size: 13px;
  line-height: 1.1;
}
.account-chip span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.15;
}
.avatar-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#fff,#f4dfb5);
  border: 1px solid rgba(204,140,29,.16);
  color: var(--primary-2);
  font-weight: 800;
}

.content { flex: 1; overflow: visible; padding: 24px; }
.page { display: none; animation: fade .18s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 18px;
}
.kicker {
  margin-bottom: 6px;
  color: #a36a0a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.page-head h1 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: 0; }
.page-head p { max-width: 820px; margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.btn {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}
.btn:hover { border-color: rgba(176,126,44,.36); background: rgba(255,255,255,.82); }
.btn.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
  box-shadow: 0 10px 22px rgba(204, 140, 29, .18);
}
.btn.primary:hover { background: #b97714; }
.btn.full { width: 100%; }
.btn.small { min-height: 30px; padding: 0 10px; font-size: 12px; }
.btn.danger {
  border-color: rgba(181,75,69,.35);
  color: var(--danger);
  background: #fff6f4;
}
.btn.danger:hover { background: #faecea; border-color: rgba(181,75,69,.55); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.cost-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(42,33,24,.08);
  color: rgba(42,33,24,.66);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}
.btn.primary .cost-badge {
  background: rgba(255,255,255,.22);
  color: #fff;
}
.voice-feature-card .cost-badge,
.persona-capability-card .cost-badge,
.employee-account-card .cost-badge {
  width: fit-content;
  margin-top: 2px;
}

.panel,
.card {
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter: blur(20px);
}
.panel { padding: 16px; }
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.panel-head h2 { margin: 0; font-size: 16px; line-height: 1.3; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin: 22px 0 12px;
}
.section-title h2 { margin: 0; font-size: 18px; }
.section-title p { margin: 0; color: var(--muted); font-size: 12px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat { padding: 14px; }
.stat small { color: var(--muted); font-size: 12px; font-weight: 680; }
.stat strong { display: block; margin: 4px 0; font-size: 24px; line-height: 1.15; }
.stat span { color: var(--success); font-size: 12px; }
.stat-grid.compact .stat { min-height: 94px; }

.home-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) 360px; gap: 14px; margin-bottom: 14px; }
.home-layout.secondary { grid-template-columns: minmax(0, 1fr) 360px; }
.queue-list { display: grid; gap: 8px; }
.queue-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.queue-item:last-child { border-bottom: 0; }
.queue-item .type { color: var(--primary); font-size: 12px; font-weight: 760; }
.queue-item b { display: block; font-size: 14px; line-height: 1.35; }
.queue-item p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.status,
.pill {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff8ec;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.status.ok,
.status.done,
.pill.ok { color: var(--success); background: #fff4dc; border-color: #ead3ae; }
.status.wait { color: var(--warning); background: #fff3df; border-color: #ead3ae; }
.status.fail,
.pill.fail { color: var(--danger); background: #faecea; border-color: #edcbc7; }
.quick-list { display: grid; gap: 8px; }
.quick-action {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
}
.quick-action:hover { background: rgba(255,255,255,.82); border-color: rgba(204,140,29,.24); }
.quick-action i {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-style: normal;
  color: white;
  background: linear-gradient(145deg, #dba348, #b97714);
  font-size: 12px;
  font-weight: 800;
}
.quick-action b { display: block; font-size: 14px; }
.quick-action em { display: block; margin-top: 2px; color: var(--muted); font-style: normal; font-size: 12px; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.work-card {
  min-height: 128px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fffaf2, #f7e5c2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.work-card b { font-size: 14px; line-height: 1.35; }
.work-card p { margin: 7px 0; color: var(--muted); font-size: 12px; }
.work-card span { color: var(--primary); font-size: 12px; font-weight: 760; }
.calendar-list { display: grid; gap: 8px; }
.calendar-list div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
}
.calendar-list b { color: var(--primary-2); font-size: 13px; }
.calendar-list span { color: var(--text); font-size: 13px; }
.calendar-list i { color: var(--muted); font-style: normal; font-size: 12px; }

.workspace-grid,
.video-layout,
.publish-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 14px;
  min-width: 0;
}
.publish-layout.accounts-collapsed {
  grid-template-columns: minmax(0, 1fr) 420px;
}
.form-panel { min-width: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field { margin-bottom: 13px; }
.field label { display: block; margin-bottom: 6px; color: #4c3927; font-size: 13px; font-weight: 720; }
.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  outline: 0;
  font-size: 14px;
}
.input,
.select { height: 38px; padding: 0 10px; }
.textarea { min-height: 116px; padding: 10px; line-height: 1.65; resize: vertical; }
.small-textarea { min-height: 78px; }
.spaced { margin-top: 12px; }

.upload {
  min-height: 118px;
  border: 1px dashed rgba(176,126,44,.30);
  border-radius: var(--radius);
  background: rgba(255,255,255,.46);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
  cursor: pointer;
}
.upload:hover { border-color: rgba(204,140,29,.42); background: rgba(255,248,236,.72); }
.upload input { display: none; }
.upload strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 14px; }
.upload span { color: var(--muted); font-size: 12px; }
.compact-upload { min-height: 82px; }

.employee-directory-view.hidden,
.employee-chat-shell.hidden {
  display: none;
}

@media (min-width: 981px) {
  body.is-employee-chat-page {
    height: 100vh;
    overflow: hidden;
  }

  body.is-employee-chat-page .app-shell,
  body.is-employee-chat-page .main {
    height: 100vh;
    min-height: 0;
  }

  body.is-employee-chat-page .content {
    min-height: 0;
    overflow: hidden;
  }
}

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

.employee-account-card {
  min-height: 240px;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.74);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(105,70,17,.07), inset 0 1px 0 rgba(255,255,255,.78);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.employee-account-card:hover {
  transform: translateY(-3px);
  border-color: rgba(154,98,9,.32);
  background: rgba(255,248,236,.9);
}

.employee-account-card span {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: #3b2a17;
  color: #fffaf1;
  font-size: 18px;
  font-weight: 860;
}

.employee-account-card strong {
  margin-top: 6px;
  color: #2f2113;
  font-size: 18px;
  line-height: 1.3;
}

.employee-account-card em {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
  color: #8a5c16;
  font-style: normal;
  font-size: 12px;
  font-weight: 820;
}

.employee-account-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.employee-account-card i {
  align-self: end;
  margin-top: 12px;
  color: var(--primary-2);
  font-style: normal;
  font-size: 13px;
  font-weight: 820;
}

.employee-account-card.is-disabled {
  opacity: .62;
  cursor: not-allowed;
  filter: grayscale(.18);
}

.employee-account-card.is-disabled:hover {
  transform: none;
  border-color: var(--line);
  background: rgba(255,255,255,.74);
}

.employee-status-pill {
  justify-self: start;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(59,42,23,.08);
  color: #6b4a22;
  font-size: 12px;
  font-weight: 820;
}

.employee-account-card.is-live .employee-status-pill {
  background: rgba(35,135,77,.12);
  color: #1f7a4b;
}

.employee-chat-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  height: calc(100vh - 112px);
  min-height: 560px;
  overflow: hidden;
}

.employee-chat-main,
.employee-chat-side {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 34px rgba(105,70,17,.08), inset 0 1px 0 rgba(255,255,255,.78);
}

.employee-chat-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.employee-chat-header {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,250,242,.74);
}

.employee-chat-profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.employee-chat-profile span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #3b2a17;
  color: #fffaf1;
  font-weight: 860;
}

.employee-chat-profile b,
.employee-chat-profile em {
  display: block;
}

.employee-chat-profile b {
  color: #2f2113;
  font-size: 16px;
}

.employee-chat-profile em {
  margin-top: 3px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.employee-chat-body {
  min-height: 0;
  max-height: none;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  overscroll-behavior: contain;
}

.employee-message {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.employee-message.user {
  justify-content: flex-end;
}

.employee-message-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #3b2a17;
  color: #fffaf1;
  font-size: 13px;
  font-weight: 860;
}

.employee-message-bubble {
  max-width: min(760px, 82%);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.86);
  color: #3a2a19;
  line-height: 1.68;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.employee-message.user .employee-message-bubble {
  border-color: rgba(154,98,9,.26);
  background: #d4931f;
  color: #fffaf1;
}

.employee-message.result .employee-message-bubble {
  width: auto;
  max-width: min(820px, 88%);
  white-space: normal;
}

.employee-message.native-result .employee-message-bubble {
  width: auto;
  max-width: min(820px, 88%);
  padding: 12px 14px;
  border-color: var(--line);
  background: rgba(255,255,255,.86);
}

.agency-native-session,
.employee-result-panel {
  min-width: 0;
}

.employee-result-panel {
  display: grid;
  gap: 10px;
}

.employee-result-body {
  min-width: 0;
  display: block;
  color: #3a2a19;
  font-size: 14.5px;
  line-height: 1.78;
  white-space: normal;
}

.employee-result-body p,
.employee-result-body ul,
.employee-result-body blockquote,
.employee-result-body .agency-native-ordered,
.employee-result-body .agency-native-table-wrap,
.employee-result-body .agency-native-code {
  margin: 0 0 10px;
}

.employee-result-body p:last-child,
.employee-result-body ul:last-child,
.employee-result-body blockquote:last-child,
.employee-result-body .agency-native-ordered:last-child,
.employee-result-body .agency-native-table-wrap:last-child,
.employee-result-body .agency-native-code:last-child {
  margin-bottom: 0;
}

.employee-result-body .narr-h4,
.employee-result-body .narr-h5 {
  margin: 12px 0 6px;
  color: #2f2113;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
}

.employee-result-body .narr-list {
  padding-left: 19px;
}

.employee-result-body .narr-list li {
  margin: 4px 0;
}

.agency-native-ordered {
  display: grid;
  gap: 7px;
}

.narr-ordered-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.narr-ordered-index {
  color: #9a6209;
  font-size: 12px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  line-height: 1.8;
}

.narr-ordered-body {
  min-width: 0;
}

.narr-quote {
  padding-left: 10px;
  border-left: 3px solid rgba(204,140,29,.34);
  color: #5b4120;
}

.agency-native-code {
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: 8px;
  background: #fffaf2;
  color: #332414;
  overflow: auto;
  white-space: pre;
}

.agency-native-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.agency-native-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.55;
}

.agency-native-table th,
.agency-native-table td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(176,126,44,.16);
  text-align: left;
  vertical-align: top;
}

.agency-native-table th {
  color: #2f2113;
  font-weight: 780;
}

.employee-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.employee-deliverable-list {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,248,236,.74);
  border: 1px solid rgba(201,143,53,.18);
}

.employee-deliverable-list b {
  display: block;
  margin-bottom: 6px;
  color: #2f2113;
}

.employee-deliverable-list p {
  margin: 4px 0;
  color: #5f5141;
  line-height: 1.5;
}

.employee-action-table {
  display: grid;
  gap: 8px;
}

.employee-action-table div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 96px;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
}

.employee-action-table b {
  color: #8a5c16;
  font-size: 13px;
}

.employee-action-table span,
.employee-action-table em {
  color: #4c3927;
  font-style: normal;
  font-size: 13px;
  line-height: 1.55;
}

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

.employee-topic-grid article {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
}

.employee-topic-grid span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
  color: #8a5c16;
  font-size: 12px;
  font-weight: 860;
}

.employee-topic-grid b {
  display: block;
  margin: 8px 0 6px;
  color: #2f2113;
  font-size: 14px;
  line-height: 1.45;
}

.employee-topic-grid p,
.employee-topic-grid em,
.employee-topic-grid small {
  display: block;
  margin: 5px 0 0;
  color: #5b4120;
  font-style: normal;
  font-size: 12px;
  line-height: 1.55;
}

.employee-topic-grid footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.employee-topic-grid footer i,
.employee-topic-grid footer strong {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
  color: #7a4b08;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

@media (max-width: 860px) {
  .employee-topic-grid,
  .employee-insight-grid {
    grid-template-columns: 1fr;
  }

  .employee-action-table div {
    grid-template-columns: 1fr;
  }
}

.employee-chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 82px;
  overflow: auto;
  padding: 0 14px 10px;
  overscroll-behavior: contain;
}

.employee-chat-quick button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,248,236,.78);
  color: #7a4b08;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
}

.employee-intake-panel {
  max-height: 260px;
  overflow: auto;
  margin: 10px 14px 0;
  padding: 12px;
  border: 1px solid rgba(201,143,53,.22);
  border-radius: 12px;
  background: rgba(255,250,242,.76);
}

.employee-intake-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.employee-intake-head b,
.employee-intake-head span {
  display: block;
}

.employee-intake-head b {
  color: #2f2113;
  font-size: 15px;
}

.employee-intake-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.employee-intake-section + .employee-intake-section {
  margin-top: 12px;
}

.employee-intake-section h3 {
  margin: 0 0 8px;
  color: #8a5c16;
  font-size: 12px;
  letter-spacing: .04em;
}

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

.employee-intake-field {
  display: grid;
  gap: 5px;
}

.employee-intake-field.wide {
  grid-column: 1 / -1;
}

.employee-intake-field span {
  color: #3c2a17;
  font-size: 12px;
  font-weight: 820;
}

.employee-intake-field input,
.employee-intake-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: rgba(255,255,255,.84);
  color: var(--text);
  font: inherit;
}

.employee-intake-field textarea {
  min-height: 72px;
  resize: vertical;
}

.employee-intake-field small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.employee-chat-composer {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 88px;
  gap: 10px;
  align-items: end;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: rgba(255,250,242,.82);
}

.employee-chat-composer textarea {
  min-height: 64px;
  max-height: 112px;
}

.employee-attach {
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border: 1px dashed rgba(176,126,44,.36);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  color: #7a4b08;
  font-size: 12px;
  font-weight: 820;
  cursor: pointer;
  overflow: hidden;
}

.employee-attach input {
  display: none;
}

.employee-attach span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-chat-side {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  padding: 14px;
  overflow: hidden;
}

.employee-side-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.employee-side-list span,
.employee-side-result,
.employee-default-note {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.66);
  color: #5b4120;
  font-size: 12px;
  line-height: 1.5;
}

.employee-default-note {
  margin: 12px 0;
  background: rgba(255,248,236,.68);
  color: #735018;
}

.employee-side-result {
  display: grid;
  gap: 4px;
}

.employee-side-result b {
  color: #332414;
  font-size: 13px;
}

.employee-side-result span {
  color: var(--muted);
}

.rewrite-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.rewrite-input-panel,
.rewrite-result-panel {
  width: 100%;
  min-width: 0;
}

.rewrite-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.rewrite-mode-tabs button {
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.rewrite-mode-tabs button.active {
  border-color: rgba(191,123,18,.55);
  background: rgba(255,248,236,.85);
  color: #7a4b08;
}

.rewrite-input-block {
  display: none;
}

.rewrite-input-block.active {
  display: block;
}

.rewrite-strategy-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(204,140,29,.20);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,253,248,.92), rgba(255,242,217,.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.rewrite-strategy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rewrite-strategy-head span {
  display: inline-flex;
  margin-bottom: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(151,130,97,.12);
  color: #756247;
  font-size: 11px;
  font-weight: 850;
}

.rewrite-strategy-panel.is-ready .rewrite-strategy-head span {
  background: rgba(204,140,29,.14);
  color: #8a5809;
}

.rewrite-strategy-head strong {
  display: block;
  color: #2a2118;
  font-size: 14px;
  line-height: 1.45;
}

.rewrite-strategy-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.rewrite-strategy-controls {
  border-top: 1px dashed rgba(176,126,44,.22);
  padding-top: 8px;
}

.rewrite-strategy-controls summary {
  cursor: pointer;
  color: #8a5809;
  font-size: 13px;
  font-weight: 800;
}

.rewrite-strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.rewrite-textarea {
  min-height: 150px;
}

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

.segment { display: flex; flex-wrap: wrap; gap: 7px; }
.seg,
.tab {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.seg.active,
.tab.active { color: var(--primary-2); background: rgba(204,140,29,.12); border-color: rgba(204,140,29,.28); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.subpanel { display: none; }
.subpanel.active { display: block; }

.creative-subnav {
  position: sticky;
  top: 76px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: var(--radius);
  background: rgba(255,250,242,.86);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter: blur(18px);
}
.creative-subnav button {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.58);
  color: var(--muted);
  text-align: left;
}
.creative-subnav button:hover,
.creative-subnav button.active {
  border-color: rgba(204,140,29,.30);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,240,211,.78));
  color: #8a5605;
}
.creative-subnav i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: rgba(204,140,29,.10);
  color: #9a6209;
  font-style: normal;
  font-weight: 840;
}
.creative-subnav b,
.creative-subnav em {
  display: block;
}
.creative-subnav b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.creative-subnav em {
  margin-top: 2px;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  line-height: 1.35;
}
.image-design-view {
  display: none;
}
.image-design-view.active {
  display: block;
}
#page-creative-commerce-image {
  --commerce-bg: #f7f8f4;
  --commerce-surface: #ffffff;
  --commerce-panel: #fbfcf8;
  --commerce-line: #dde4d8;
  --commerce-line-strong: #c8d2c4;
  --commerce-text: #1f2a24;
  --commerce-muted: #657166;
  --commerce-accent: #1d7a5f;
  --commerce-accent-2: #d36f4e;
  --commerce-soft: #eef5ee;
  --commerce-shadow: 0 18px 44px rgba(36, 48, 40, .08);
  max-width: 1500px;
  margin: 0 auto;
  color: var(--commerce-text);
}
#page-creative-commerce-image .page-head {
  align-items: center;
  margin-bottom: 14px;
  padding: 4px 2px 16px;
  border-bottom: 1px solid var(--commerce-line);
}
#page-creative-commerce-image .page-head h1 {
  font-size: 30px;
  letter-spacing: 0;
}
#page-creative-commerce-image .page-head p {
  max-width: 740px;
  color: var(--commerce-muted);
  font-size: 13px;
}
#page-creative-commerce-image .kicker {
  color: var(--commerce-accent);
  letter-spacing: .12em;
}
#page-creative-commerce-image .btn {
  min-height: 38px;
  border-color: var(--commerce-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--commerce-text);
  box-shadow: none;
}
#page-creative-commerce-image .btn:hover {
  border-color: #aebbad;
  background: #f8fbf7;
}
#page-creative-commerce-image .btn.primary {
  border-color: var(--commerce-text);
  background: var(--commerce-text);
  color: #fff;
  box-shadow: 0 12px 26px rgba(31, 42, 36, .16);
}
#page-creative-commerce-image .btn.primary:hover {
  background: #17211c;
}
.commerce-image-tool {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) minmax(280px, 320px);
  gap: 16px;
  align-items: start;
}
#page-creative-commerce-image.commerce-step-input .commerce-image-tool {
  grid-template-columns: minmax(420px, 560px) minmax(320px, 420px);
  max-width: 1100px;
}
#page-creative-commerce-image.commerce-step-input .commerce-studio-main {
  display: none;
}
#page-creative-commerce-image.commerce-step-input .commerce-image-rail,
#page-creative-commerce-image.commerce-step-input .commerce-image-side {
  position: static;
  max-height: none;
  overflow: visible;
}
#page-creative-commerce-image.commerce-step-input .commerce-product-panel {
  min-height: 0;
}
.commerce-result-mode .commerce-image-tool {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1.35fr) minmax(280px, 320px);
}
.commerce-result-mode .commerce-image-side {
  display: grid;
}
.commerce-image-tool > * {
  min-width: 0;
}
.commerce-image-rail,
.commerce-image-main,
.commerce-image-side {
  display: grid;
  gap: 14px;
  align-content: start;
}
.commerce-image-rail,
.commerce-image-side {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.commerce-image-main {
  min-height: min(680px, calc(100vh - 24px));
}
#page-creative-commerce-image .commerce-studio-shell {
  align-items: start;
}
#page-creative-commerce-image .commerce-studio-main {
  grid-template-columns: minmax(0, 1fr);
}
#page-creative-commerce-image .commerce-studio-panel,
#page-creative-commerce-image .commerce-image-side .panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: var(--commerce-surface);
  box-shadow: var(--commerce-shadow);
}
#page-creative-commerce-image .commerce-studio-panel-head,
#page-creative-commerce-image .commerce-studio-mini-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#page-creative-commerce-image .commerce-studio-panel-head b,
#page-creative-commerce-image .commerce-studio-mini-head b {
  display: block;
  color: var(--commerce-text);
  font-size: 15px;
}
#page-creative-commerce-image .commerce-studio-panel-head span,
#page-creative-commerce-image .commerce-studio-mini-head span {
  display: block;
  margin-top: 3px;
  color: var(--commerce-muted);
  font-size: 12px;
  line-height: 1.45;
}
#page-creative-commerce-image .commerce-studio-panel-head > span {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 5px 9px;
  border: 1px solid var(--commerce-line);
  border-radius: 999px;
  background: var(--commerce-panel);
  font-weight: 780;
}
#page-creative-commerce-image .commerce-studio-compact-grid,
#page-creative-commerce-image .commerce-studio-setting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#page-creative-commerce-image .commerce-studio-setting-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#page-creative-commerce-image .commerce-command-panel {
  padding: 20px;
}
#page-creative-commerce-image .commerce-studio-module-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: var(--commerce-panel);
}
#page-creative-commerce-image .commerce-script-option-bank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 2px;
}
#page-creative-commerce-image .commerce-advanced-options {
  display: grid;
  gap: 10px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: #fff;
}
#page-creative-commerce-image .commerce-advanced-options summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--commerce-text);
  cursor: pointer;
  list-style: none;
}
#page-creative-commerce-image .commerce-advanced-options summary::-webkit-details-marker {
  display: none;
}
#page-creative-commerce-image .commerce-advanced-options summary span {
  font-size: 13px;
  font-weight: 840;
}
#page-creative-commerce-image .commerce-advanced-options summary em {
  color: var(--commerce-muted);
  font-size: 12px;
  font-style: normal;
}
#page-creative-commerce-image .commerce-advanced-options summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--commerce-line);
  border-radius: 50%;
  color: var(--commerce-accent);
  font-weight: 900;
}
#page-creative-commerce-image .commerce-advanced-options[open] summary::after {
  content: "-";
}
#page-creative-commerce-image .commerce-advanced-options .commerce-script-option-bank {
  padding: 0 12px 12px;
}
#page-creative-commerce-image .commerce-studio-actions {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 10px;
}
#page-creative-commerce-image .commerce-studio-actions .btn,
#page-creative-commerce-image .commerce-plan-panel .commerce-image-actions .btn {
  min-height: 46px;
}
#page-creative-commerce-image .commerce-resolution-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
#page-creative-commerce-image .commerce-resolution-row button {
  min-width: 0;
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: #fff;
  color: var(--commerce-muted);
  text-align: left;
}
#page-creative-commerce-image .commerce-resolution-row button:hover,
#page-creative-commerce-image .commerce-resolution-row button.active {
  border-color: rgba(29, 122, 95, .34);
  background: #eef7f1;
  color: var(--commerce-accent);
}
#page-creative-commerce-image .commerce-resolution-row button.active {
  border-color: var(--commerce-text);
  background: var(--commerce-text);
  color: #fff;
}
#page-creative-commerce-image .commerce-resolution-row b,
#page-creative-commerce-image .commerce-resolution-row span,
#page-creative-commerce-image .commerce-resolution-row em,
#page-creative-commerce-image .commerce-resolution-row small {
  display: block;
  min-width: 0;
}
#page-creative-commerce-image .commerce-resolution-row b {
  color: inherit;
  font-size: 15px;
}
#page-creative-commerce-image .commerce-resolution-row span,
#page-creative-commerce-image .commerce-resolution-row em,
#page-creative-commerce-image .commerce-resolution-row small {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
}
#page-creative-commerce-image .commerce-result-panel {
  min-height: 120px;
}
#page-creative-commerce-image .api-status {
  border-color: var(--commerce-line);
  background: #fff;
  color: var(--commerce-muted);
}
#page-creative-commerce-image .api-status.ok {
  border-color: rgba(29, 122, 95, .22);
  background: #eef8f3;
  color: var(--commerce-accent);
}
#page-creative-commerce-image .api-status.loading {
  border-color: rgba(211, 111, 78, .24);
  background: #fff5ef;
  color: #a44f31;
}
#page-creative-commerce-image .api-status.warn {
  border-color: rgba(211, 111, 78, .26);
  background: #fff7ed;
  color: #a44f31;
}
#page-creative-commerce-image .api-status.fail {
  border-color: rgba(181, 75, 69, .24);
  background: #fff1ef;
  color: #b54b45;
}
.commerce-image-rail-title,
.commerce-image-rail-card {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.76);
}
.commerce-image-rail-title b,
.commerce-image-rail-card b {
  color: var(--text);
  font-size: 14px;
}
.commerce-image-rail-title span,
.commerce-image-rail-card span,
.commerce-image-rail-card em {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
}
.commerce-image-stepper {
  display: grid;
  gap: 0;
  padding: 8px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: #fff;
}
.commerce-image-stepper button {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 2px 10px;
  min-width: 0;
  padding: 10px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}
.commerce-image-stepper button::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 42px;
  bottom: -10px;
  width: 2px;
  background: var(--commerce-line);
}
.commerce-image-stepper button:last-child::after {
  display: none;
}
.commerce-image-stepper button.active {
  background: #eef7f1;
  color: var(--commerce-accent);
}
.commerce-image-stepper button.done {
  color: #15946d;
}
.commerce-image-stepper i {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(29,122,95,.10);
  color: currentColor;
  font-style: normal;
  font-weight: 840;
}
.commerce-image-stepper button.done i {
  background: var(--commerce-accent);
  color: #fff;
}
.commerce-image-stepper b,
.commerce-image-stepper span,
.commerce-image-stepper em {
  min-width: 0;
}
.commerce-image-stepper b {
  color: var(--text);
  font-size: 13px;
}
.commerce-image-stepper span,
.commerce-image-stepper em {
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
}
#page-creative-commerce-image .commerce-studio-panel.commerce-image-stage,
#page-creative-commerce-image .commerce-product-panel[data-commerce-image-stage] {
  display: none;
  gap: 12px;
  align-content: start;
}
#page-creative-commerce-image .commerce-studio-panel.commerce-image-stage.active,
#page-creative-commerce-image .commerce-product-panel[data-commerce-image-stage].active {
  display: grid;
}
.commerce-image-upload {
  min-height: 104px;
  margin: 0;
}
.commerce-image-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.commerce-image-product-grid article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.72);
}
.commerce-image-product-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.commerce-image-product-grid button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(42,33,24,.72);
  color: #fffaf1;
}
.commerce-image-product-grid span {
  display: block;
  padding: 7px;
  color: var(--muted);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commerce-image-analysis {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(32,124,83,.18);
  border-radius: var(--radius);
  background: rgba(246,252,248,.78);
}
.commerce-image-analysis b {
  color: var(--text);
  font-size: 13px;
}
.commerce-image-analysis span,
.commerce-image-analysis p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.commerce-image-analysis > div:not(.commerce-analysis-sections) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.commerce-analysis-sections {
  display: grid;
  gap: 8px;
}
.commerce-analysis-sections.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.commerce-analysis-sections section {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(32,124,83,.10);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.62);
}
.commerce-analysis-sections strong {
  color: #155f43;
  font-size: 12px;
}
.commerce-analysis-sections em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
}
.commerce-analysis-sections ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.commerce-analysis-sources {
  display: grid !important;
  gap: 5px;
  padding: 9px;
  border: 1px dashed rgba(32,124,83,.18);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.54);
}
.commerce-analysis-sources.compact {
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: center;
}
.commerce-analysis-sources strong {
  color: #155f43;
  font-size: 12px;
}
.commerce-analysis-sources span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.commerce-image-analysis i {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(32,124,83,.10);
  color: #207c53;
  font-size: 10px;
  font-style: normal;
  font-weight: 780;
}
.commerce-point-inline-assist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: var(--commerce-panel);
}
.commerce-point-inline-assist .input {
  min-width: 0;
}
.commerce-point-inline-assist .btn {
  min-width: 96px;
  white-space: nowrap;
}
.commerce-image-point-list {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
  padding-right: 2px;
}
.commerce-image-point-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px 30px;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.78);
}
.commerce-image-point-list article.selected {
  border-color: rgba(32,148,109,.26);
  background: rgba(239,252,246,.84);
}
.commerce-image-point-list article > button:first-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(32,148,109,.12);
  color: #15946d;
}
.commerce-image-point-list article:not(.selected) > button:first-child {
  background: rgba(160,145,124,.14);
  color: var(--muted);
}
.commerce-image-point-list i {
  font-style: normal;
  font-weight: 840;
}
.commerce-image-point-list b,
.commerce-image-point-list span,
.commerce-image-point-list em {
  display: block;
  min-width: 0;
}
.commerce-image-point-list b {
  color: var(--text);
  font-size: 13px;
}
.commerce-image-point-list b small {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(18,91,124,.10);
  color: #125b7c;
  font-size: 10px;
  font-weight: 760;
  vertical-align: middle;
}
.commerce-image-point-list span,
.commerce-image-point-list em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
}
.commerce-image-output-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.commerce-image-output-grid button {
  min-width: 0;
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: #fff;
  color: var(--commerce-muted);
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.commerce-image-output-grid button:hover,
.commerce-image-output-grid button.active {
  border-color: rgba(29,122,95,.34);
  background: #eef7f1;
  color: var(--commerce-accent);
}
.commerce-image-output-grid button:active {
  transform: translateY(1px);
}
.commerce-image-output-grid b,
.commerce-image-output-grid span {
  display: block;
}
.commerce-image-output-grid b {
  color: var(--commerce-text);
  font-size: 12px;
  line-height: 1.35;
}
.commerce-image-output-grid span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.38;
}
.commerce-image-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
#page-creative-commerce-image .commerce-image-actions {
  justify-content: flex-end;
}
.commerce-system-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: var(--commerce-panel);
}
.commerce-system-box > b {
  color: var(--commerce-text);
  font-size: 13px;
}
.commerce-system-box > span {
  color: var(--commerce-muted);
  font-size: 12px;
  line-height: 1.5;
}
.commerce-system-columns,
.commerce-system-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.commerce-system-columns section,
.commerce-system-grid div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(18,91,124,.12);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.74);
}
.commerce-system-columns h4,
.commerce-system-grid b {
  display: block;
  margin: 0 0 6px;
  color: var(--text);
  font-size: 11px;
}
.commerce-system-columns ul,
.commerce-system-rules {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 16px;
}
.commerce-system-columns li,
.commerce-system-rules li,
.commerce-system-grid span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.commerce-script-option-section {
  display: grid;
  gap: 8px;
}
.commerce-script-option-section > label {
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}
.commerce-script-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.commerce-script-option-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.commerce-script-option-grid button {
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: #fff;
  color: var(--commerce-muted);
  text-align: left;
}
.commerce-script-option-grid button.active {
  border-color: rgba(29,122,95,.34);
  background: #eef7f1;
  color: var(--commerce-accent);
}
.commerce-script-option-grid b,
.commerce-script-option-grid span {
  display: block;
  min-width: 0;
}
.commerce-script-option-grid b {
  color: var(--commerce-text);
  font-size: 12px;
}
.commerce-script-option-grid span {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
}
.commerce-stepper-input {
  display: grid;
  grid-template-columns: 36px minmax(96px, 1fr) 36px;
  gap: 8px;
}
.commerce-stepper-input button {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.74);
  color: var(--text);
  font-size: 18px;
  font-weight: 820;
}
.commerce-stepper-input input {
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
}
.commerce-stepper-input input::placeholder {
  color: var(--commerce-muted);
  opacity: .86;
}
.commerce-image-stage .field label small {
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
}
.commerce-shot-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding-right: 4px;
}
.commerce-has-results .commerce-shot-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.commerce-result-command-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(29,122,95,.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(209,158,55,.16), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,250,244,.94));
  box-shadow: 0 18px 46px rgba(38,56,38,.08);
}
.commerce-result-command-bar[hidden] {
  display: none;
}
.commerce-result-command-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.commerce-result-command-main > span {
  color: var(--commerce-accent);
  font-size: 11px;
  font-weight: 880;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.commerce-result-command-main > b {
  color: var(--commerce-text);
  font-size: 20px;
  line-height: 1.2;
}
.commerce-result-command-main > div,
.commerce-result-command-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.commerce-result-command-actions {
  justify-content: flex-end;
  align-content: center;
}
.commerce-result-stat-pill,
.commerce-result-main-meta i,
.commerce-result-inspect-meta span {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(29,122,95,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: var(--commerce-accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 840;
}
.commerce-result-main-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.commerce-result-main-gallery[hidden] {
  display: none;
}
.commerce-result-main-gallery article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(84,108,84,.14);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, rgba(250,248,242,.96));
  box-shadow: 0 14px 34px rgba(43,35,25,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.commerce-result-main-gallery article:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(43,35,25,.10);
}
.commerce-result-main-gallery article.active {
  border-color: rgba(29,122,95,.5);
  box-shadow: 0 20px 54px rgba(29,122,95,.16);
}
.commerce-result-main-gallery article.active::after {
  content: "当前查看";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(24,77,58,.92);
  color: #fff;
  font-size: 10px;
  font-weight: 860;
}
.commerce-result-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: rgba(248,250,246,.9);
  cursor: zoom-in;
  overflow: hidden;
}
.commerce-result-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .24s ease;
}
.commerce-result-thumb:hover img {
  transform: scale(1.025);
}
.commerce-result-main-info {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.commerce-result-main-info span {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(32,148,109,.10);
  color: #15946d;
  font-size: 10px;
  font-weight: 820;
}
.commerce-result-main-info b {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.commerce-result-main-info p {
  min-height: 34px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.commerce-result-main-info div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.commerce-result-main-meta {
  margin-top: 2px;
}
.commerce-result-card-actions {
  padding-top: 4px;
}
.commerce-shot-brief-panel {
  border: 1px solid var(--commerce-line);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
}
.commerce-shot-brief-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
  cursor: pointer;
}
.commerce-shot-brief-panel > div {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}
.commerce-shot-brief-panel article {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(247,250,246,.86);
}
.commerce-shot-brief-panel b {
  color: var(--text);
  font-size: 12px;
}
.commerce-shot-brief-panel span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}
.commerce-shot-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: #fff;
}
.commerce-shot-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(29,122,95,.12);
  color: var(--commerce-accent);
  font-weight: 880;
}
.commerce-shot-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.commerce-shot-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.commerce-shot-title b {
  color: var(--text);
  font-size: 14px;
}
.commerce-shot-title span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(29,122,95,.10);
  color: var(--commerce-accent);
  font-size: 10px;
  font-weight: 820;
}
.commerce-shot-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.commerce-shot-card dl div {
  display: grid;
  gap: 3px;
}
.commerce-shot-card dt,
.commerce-shot-card dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.commerce-shot-card dt {
  color: var(--muted);
  font-weight: 820;
}
.commerce-shot-card dd {
  color: var(--text);
}
.commerce-shot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.commerce-shot-tags i {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(32,148,109,.10);
  color: #15946d;
  font-size: 10px;
  font-style: normal;
  font-weight: 820;
}
.commerce-shot-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(18,91,124,.12);
  border-radius: var(--radius-sm);
  background: rgba(247,251,252,.82);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.48;
}
.commerce-shot-checks {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 10px 10px 10px 28px;
  border: 1px solid rgba(32,148,109,.14);
  border-radius: var(--radius-sm);
  background: rgba(239,252,246,.72);
}
.commerce-shot-checks li {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}
.commerce-shot-prompt {
  min-height: 132px;
  font-size: 12px;
  line-height: 1.55;
}
.commerce-image-preview {
  min-height: 220px;
  max-height: 340px;
  border-color: var(--commerce-line);
  border-radius: 14px;
  background-color: #f8fbf7;
}
.commerce-image-side-summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--commerce-line);
  border-radius: 12px;
  background: var(--commerce-panel);
}
.commerce-image-side-summary div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.commerce-image-side-summary b,
.commerce-image-side-summary span {
  font-size: 12px;
  line-height: 1.35;
}
.commerce-image-side-summary b {
  color: var(--muted);
}
.commerce-image-side-summary span {
  min-width: 0;
  color: var(--text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commerce-image-result {
  max-height: 220px;
  overflow: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.commerce-history-panel {
  padding: 0 !important;
  overflow: hidden;
  border-color: rgba(29,122,95,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,246,238,.94)),
    radial-gradient(circle at top right, rgba(29,122,95,.10), transparent 42%) !important;
}
.commerce-history-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.commerce-history-panel summary::-webkit-details-marker {
  display: none;
}
.commerce-history-panel summary span {
  display: grid;
  gap: 3px;
}
.commerce-history-panel summary b {
  color: var(--commerce-text);
  font-size: 13px;
}
.commerce-history-panel summary em {
  color: var(--commerce-muted);
  font-size: 12px;
  font-style: normal;
}
.commerce-history-panel summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--commerce-line);
  border-radius: 50%;
  color: var(--commerce-accent);
  font-weight: 900;
}
.commerce-history-panel[open] summary::after {
  content: "-";
}
.commerce-history-panel > :not(summary) {
  margin: 0 16px 14px;
}
.commerce-history-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-top: 2px;
}
.commerce-history-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(29,122,95,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
}
.commerce-history-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--commerce-muted);
  font-weight: 820;
  cursor: pointer;
}
.commerce-history-tabs button.active {
  background: var(--commerce-accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(29,122,95,.20);
}
.commerce-history-search {
  width: 100%;
}
.commerce-result-mode .commerce-image-preview {
  min-height: 190px;
}
.commerce-result-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 0;
  max-width: 100%;
}
.commerce-result-workbench[hidden] {
  display: none;
}
.commerce-result-stage {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--commerce-line);
  border-radius: 14px;
  background: #fff;
}
.commerce-result-stage-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.commerce-result-stage-head > div:first-child {
  display: grid;
  gap: 5px;
}
.commerce-result-stage-head span {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(32,148,109,.10);
  color: #15946d;
  font-size: 11px;
  font-weight: 820;
}
.commerce-result-stage-head b {
  color: var(--text);
  font-size: 18px;
}
.commerce-result-stage-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.commerce-result-stage-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.commerce-result-canvas {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 260px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, rgba(32,124,83,.035) 25%, transparent 25% 75%, rgba(32,124,83,.035) 75%) 0 0 / 28px 28px,
    linear-gradient(45deg, rgba(32,124,83,.035) 25%, transparent 25% 75%, rgba(32,124,83,.035) 75%) 14px 14px / 28px 28px,
    rgba(250,252,248,.96);
  color: var(--muted);
  cursor: zoom-in;
}
.commerce-canvas-board {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1120px);
}
.commerce-canvas-board.lightbox {
  width: min(100%, 1180px);
}
.commerce-canvas-board img,
.commerce-result-canvas img {
  display: block;
  max-width: 100%;
  max-height: 380px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  box-shadow: 0 16px 44px rgba(42,33,24,.13);
}
.commerce-canvas-board img {
  width: 100%;
}
.commerce-result-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-width: 0;
  max-height: 360px;
  overflow: auto;
}
.commerce-result-gallery > button {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}
.commerce-result-gallery button,
.commerce-status-output-list article {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.72);
  text-align: left;
  cursor: pointer;
}
.commerce-result-gallery button.active,
.commerce-status-output-list article.active {
  border-color: rgba(32,148,109,.34);
  background: rgba(239,252,246,.86);
}
.commerce-result-gallery img,
.commerce-status-output-list img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}
.commerce-result-gallery > button img { aspect-ratio: 4 / 3; }
.commerce-result-gallery b,
.commerce-result-gallery span,
.commerce-status-output-list b,
.commerce-status-output-list span {
  display: block;
  min-width: 0;
}
.commerce-result-gallery b,
.commerce-status-output-list b {
  margin-top: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}
.commerce-result-gallery span,
.commerce-status-output-list span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.commerce-check-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  min-width: 0;
  border: 1px solid rgba(18,91,124,.16);
  border-radius: var(--radius);
  background: rgba(247,251,252,.92);
}
.commerce-check-head {
  display: grid;
  gap: 4px;
}
.commerce-check-head b {
  color: var(--text);
  font-size: 13px;
}
.commerce-check-head span,
.commerce-check-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}
.commerce-shot-spec-mini {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(136,91,224,.14);
  border-radius: var(--radius-sm);
  background: rgba(249,247,255,.82);
}
.commerce-shot-spec-mini div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
}
.commerce-shot-spec-mini b,
.commerce-shot-spec-mini span {
  font-size: 11px;
  line-height: 1.42;
}
.commerce-shot-spec-mini b {
  color: #6d43c7;
}
.commerce-shot-spec-mini span {
  color: var(--muted);
}
.commerce-copy-plan-mini {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(32,148,109,.14);
  border-radius: var(--radius-sm);
  background: rgba(244,252,248,.86);
}
.commerce-copy-plan-mini > b {
  color: var(--text);
  font-size: 12px;
}
.commerce-copy-plan-mini ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.commerce-copy-plan-mini li {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(32,148,109,.1);
}
.commerce-copy-plan-mini li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.commerce-copy-plan-mini span {
  color: var(--muted);
  font-size: 10px;
}
.commerce-copy-plan-mini strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}
.commerce-copy-plan-mini em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}
.commerce-quality-checks {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(18,91,124,.12);
}
.commerce-plan-quality {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(32,148,109,.14);
  border-radius: var(--radius-sm);
  background: rgba(239,252,246,.70);
}
.commerce-plan-quality b {
  color: var(--text);
  font-size: 12px;
}
.commerce-plan-quality span {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}
.commerce-plan-quality span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16bf8d;
}
.commerce-plan-quality span.warn::before {
  background: #d9822b;
}
.commerce-quality-checks b {
  color: var(--text);
  font-size: 12px;
}
.commerce-quality-checks ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 16px;
}
.commerce-quality-checks li {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}
.commerce-status-output-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.commerce-status-text-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.commerce-status-text-list li {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.68);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}
.commerce-image-jobs {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.commerce-image-job-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.76);
}
.commerce-image-job-card.active {
  border-color: rgba(195,126,19,.46);
  box-shadow: 0 10px 28px rgba(141,91,18,.12);
}
.commerce-image-job-card.failed {
  border-color: rgba(182,63,45,.28);
}
.commerce-image-job-card.completed {
  border-color: rgba(40,126,82,.28);
}
.commerce-image-job-card > button {
  width: 100%;
  padding: 12px;
  border: 0;
  background: transparent;
  text-align: left;
}
.commerce-image-job-card div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.commerce-image-job-card b,
.commerce-image-job-card span,
.commerce-image-job-card p,
.commerce-image-job-card small {
  display: block;
  min-width: 0;
}
.commerce-image-job-card b {
  color: var(--text);
  font-size: 13px;
}
.commerce-image-job-card span,
.commerce-image-job-card p,
.commerce-image-job-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.commerce-image-job-card em {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(209,143,43,.13);
  color: #a4680e;
  font-size: 10px;
  font-style: normal;
  font-weight: 840;
}
.commerce-image-job-card.completed em {
  background: rgba(44,138,88,.13);
  color: #227449;
}
.commerce-image-job-card.failed em {
  background: rgba(185,68,48,.12);
  color: #a63b2b;
}
.commerce-image-job-card i {
  display: block;
  height: 5px;
  overflow: hidden;
  margin: 10px 0 8px;
  border-radius: 999px;
  background: rgba(115,88,54,.12);
}
.commerce-image-job-card i::before {
  content: "";
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d08a17, #f0c56b);
}
.commerce-archive-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 10px;
}
.commerce-archive-title b {
  color: var(--text);
  font-size: 13px;
}
.commerce-archive-title span {
  color: var(--muted);
  font-size: 11px;
}
.commerce-image-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.commerce-image-project-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.74);
}
.commerce-image-project-card > button:first-child {
  width: 100%;
  padding: 10px;
  border: 0;
  background: transparent;
  text-align: left;
}
.commerce-image-project-card > button:first-child span {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  background: rgba(235,249,242,.86);
  color: #207c53;
  font-size: 14px;
  font-weight: 820;
}
.commerce-image-project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.commerce-image-project-card b,
.commerce-image-project-card em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commerce-image-project-card b {
  color: var(--text);
  font-size: 12px;
}
.commerce-image-project-card em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}
.commerce-image-project-card > .icon-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: rgba(42,33,24,.68);
  color: #fffaf1;
}
.commerce-image-output .panel-head > span {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}
.commerce-point-modal[hidden] {
  display: none;
}
.commerce-point-modal,
.commerce-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 18px;
}
.commerce-lightbox-modal[hidden] {
  display: none;
}
.commerce-point-modal .modal-backdrop,
.commerce-lightbox-modal .modal-backdrop {
  display: block;
  z-index: 0;
  background: rgba(42,33,24,.34);
}
.commerce-point-modal .modal-card,
.commerce-lightbox-modal .modal-card {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 36px);
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffaf2;
  box-shadow: 0 24px 70px rgba(42,33,24,.22);
}
.commerce-lightbox-modal .modal-card {
  width: min(1180px, calc(100vw - 28px));
  background: #fffdf8;
}
.commerce-lightbox-media {
  display: grid;
  place-items: center;
  max-height: min(78vh, 820px);
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(247,251,252,.86);
}
.commerce-lightbox-media img {
  display: block;
  max-width: 100%;
  max-height: min(74vh, 780px);
  border-radius: var(--radius-sm);
  object-fit: contain;
}
.commerce-lightbox-media .commerce-canvas-board img {
  max-height: min(74vh, 780px);
  box-shadow: 0 18px 54px rgba(42,33,24,.16);
}
.commerce-point-assist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(32,124,83,.14);
  border-radius: 8px;
  background: rgba(246,252,248,.78);
}
.commerce-point-assist .btn {
  white-space: nowrap;
}
.commerce-point-editor {
  display: grid;
  gap: 10px;
  max-height: min(68vh, 640px);
  overflow: auto;
}
.commerce-point-editor article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.76);
}
.commerce-point-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.commerce-point-editor-head label {
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}
.image-entry-shell {
  display: block;
}
.image-entry-shell > *,
.image-workbench-shell > * {
  min-width: 0;
}
.image-entry-composer,
.image-entry-preview-panel {
  margin-bottom: 14px;
}
.image-entry-topline,
.image-entry-section-head,
.image-entry-card-head,
.image-workbench-head,
.image-workbench-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.image-entry-section-head h2,
.image-entry-topline h2,
.image-workbench-head h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
}
.image-entry-section-head h3 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}
.image-entry-preview-panel .image-entry-section-head > span {
  max-width: 160px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-entry-service,
.image-entry-tool-card,
.image-entry-prompt-card,
.image-entry-shelf,
.image-entry-recent {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.image-entry-service span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.image-entry-service {
  padding: 12px;
  margin-top: auto;
}
.image-entry-service b {
  display: block;
  color: var(--text);
  font-size: 13px;
}
.image-entry-service.ok {
  border-color: rgba(32,124,83,.22);
  background: rgba(231,248,239,.72);
}
.image-entry-actions {
  display: grid;
  gap: 8px;
}
.image-entry-composer {
  display: grid;
  align-content: start;
  gap: 16px;
  overflow: hidden;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,250,242,.72)),
    radial-gradient(circle at 88% 0%, rgba(204,140,29,.10), transparent 32%);
}
.image-entry-studio-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.image-entry-studio-head h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 26px;
  line-height: 1.18;
}
.image-entry-studio-head p {
  max-width: 680px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.image-entry-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) 260px;
  gap: 14px;
}
.image-entry-command-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(204,140,29,.18);
  border-radius: var(--radius);
  background: rgba(255,255,255,.80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 18px 42px rgba(42,33,24,.08);
}
.image-selected-template-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(32,124,83,.24);
  border-radius: var(--radius);
  background: rgba(246,252,248,.92);
}
.image-selected-template-card[hidden] {
  display: none;
}
.image-selected-template-media {
  width: 96px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: rgba(32,124,83,.10);
}
.image-selected-template-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-selected-template-media span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #207c53;
  font-size: 26px;
  font-weight: 860;
}
.image-selected-template-body {
  min-width: 0;
}
.image-selected-template-body b,
.image-selected-template-body span,
.image-selected-template-body p {
  display: block;
}
.image-selected-template-body b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.image-selected-template-body span {
  margin-top: 4px;
  color: #207c53;
  font-size: 11px;
  line-height: 1.45;
}
.image-selected-template-body p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.image-entry-title-field {
  max-width: 520px;
}
.image-entry-main-field label {
  color: #8a5605;
  font-size: 13px;
}
.image-entry-main-field small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.image-entry-prompt-card,
.image-entry-tool-card,
.image-entry-shelf,
.image-entry-recent {
  padding: 14px;
}
.image-entry-textarea {
  min-height: 92px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.72;
}
.image-subject-textarea {
  min-height: 82px;
  font-size: 15px;
  line-height: 1.65;
}
.image-prompt-panel {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  overflow: hidden;
}
.image-prompt-panel[open] {
  background: rgba(255,252,247,.86);
}
.image-prompt-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}
.image-prompt-panel summary::-webkit-details-marker {
  display: none;
}
.image-prompt-panel summary span {
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
}
.image-prompt-panel summary em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-prompt-panel summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(204,140,29,.10);
  color: #8a5605;
  font-weight: 800;
}
.image-prompt-panel[open] summary {
  border-bottom: 1px solid var(--line);
}
.image-prompt-panel[open] summary::after {
  content: "-";
}
.image-prompt-textarea {
  width: calc(100% - 24px);
  min-height: 132px;
  margin: 12px 12px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.58;
  resize: vertical;
}
.image-prompt-textarea.final {
  min-height: 180px;
}
.image-prompt-panel small {
  display: block;
  margin: 0 12px 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.image-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 12px 8px;
}
.template-logic-note {
  display: grid;
  gap: 4px;
  margin: 0 0 13px;
  padding: 11px;
  border: 1px solid rgba(204,140,29,.22);
  border-radius: var(--radius-sm);
  background: rgba(255,246,226,.72);
}
.template-logic-note b {
  color: #8a5605;
  font-size: 12px;
}
.template-logic-note span {
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}
.image-reference-field {
  display: grid;
  gap: 9px;
}
.image-reference-mode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.image-reference-mode-row button {
  min-width: 0;
  min-height: 64px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.64);
  color: var(--muted);
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.image-reference-mode-row button:hover,
.image-reference-mode-row button.active {
  border-color: rgba(204,140,29,.40);
  background: rgba(255,242,217,.86);
  color: #8a5605;
}
.image-reference-mode-row button:active {
  transform: translateY(1px);
}
.image-reference-mode-row b,
.image-reference-mode-row span {
  display: block;
}
.image-reference-mode-row b {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}
.image-reference-mode-row span {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
}
.image-reference-dropzone {
  min-height: 98px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  border: 1px dashed rgba(204,140,29,.48);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,251,244,.92), rgba(255,244,224,.76));
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.image-reference-dropzone:hover,
.image-reference-dropzone:focus-visible,
.image-reference-dropzone.dragging {
  outline: 0;
  border-color: rgba(204,140,29,.86);
  background: rgba(255,241,211,.94);
  box-shadow: 0 12px 28px rgba(140,89,10,.10);
}
.image-reference-dropzone.has-files {
  border-style: solid;
  border-color: rgba(32,124,83,.24);
  background: rgba(246,252,248,.92);
}
.image-reference-dropzone strong,
.image-reference-dropzone span {
  display: block;
}
.image-reference-dropzone strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.image-reference-dropzone span {
  margin-top: 5px;
  color: #5b4120;
  font-size: 12px;
  line-height: 1.55;
}
.image-reference-dropzone em {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
  color: #8a5605;
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
}
.image-advanced-settings {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.52);
  overflow: hidden;
}
.image-advanced-settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}
.image-advanced-settings summary::-webkit-details-marker {
  display: none;
}
.image-advanced-settings summary span {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}
.image-advanced-settings summary em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-advanced-settings summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(204,140,29,.10);
  color: #8a5605;
  font-weight: 800;
}
.image-advanced-settings[open] summary {
  border-bottom: 1px solid var(--line);
}
.image-advanced-settings[open] summary::after {
  content: "-";
}
.image-advanced-settings > .field,
.image-advanced-settings > .form-row {
  margin: 12px;
}
.image-entry-command-tools {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(300px, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}
.image-entry-side-tools {
  display: grid;
  gap: 14px;
  align-content: start;
}
.image-entry-card-head {
  margin-bottom: 10px;
}
.image-entry-card-head b {
  color: var(--text);
  font-size: 12px;
}
.image-entry-card-head span {
  color: var(--muted);
  font-size: 10px;
}
.image-entry-upload {
  min-height: 96px;
}
.image-entry-reference-picker {
  min-height: 112px;
  margin: 0;
}
.image-entry-reference-picker span em {
  font-style: normal;
}
.image-entry-tool-card.compact {
  padding: 12px;
}
.image-reference-list.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}
.image-reference-list.workbench {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
}
.image-entry-live-workspace {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(204,140,29,.20);
  border-radius: var(--radius);
  background: rgba(255,252,246,.90);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.image-entry-live-workspace.active {
  display: grid;
}
.image-entry-live-workspace.is-loading {
  border-color: rgba(204,140,29,.34);
  background: rgba(255,246,232,.94);
}
.image-entry-live-workspace.has-result {
  border-color: rgba(32,124,83,.24);
  background: rgba(246,252,248,.94);
}
.image-entry-live-workspace.has-error {
  border-color: rgba(181,75,69,.24);
  background: rgba(255,246,244,.94);
}
.image-entry-live-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.image-entry-live-head span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(204,140,29,.10);
  color: #8a5605;
  font-size: 10px;
  font-weight: 850;
}
.image-entry-live-head b {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}
.image-entry-live-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.image-entry-live-head .api-status.inline {
  justify-self: end;
  max-width: 340px;
  text-align: left;
}
.image-entry-live-head > div:first-child {
  min-width: 0;
}
.image-entry-live-grid {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.image-entry-live-preview {
  min-height: 260px;
  height: auto;
  aspect-ratio: 4 / 5;
  background-color: #fffaf1;
}
.image-entry-live-preview.media-preview.poster {
  aspect-ratio: 4 / 5;
}
.image-entry-live-output {
  min-height: 260px;
  max-height: 360px;
  overflow: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.image-entry-size-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.image-entry-size-row button {
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.72);
  text-align: left;
}
.image-entry-size-row button.active,
.image-entry-size-row button:hover {
  border-color: rgba(204,140,29,.35);
  background: rgba(255,240,211,.78);
}
.image-entry-size-row b,
.image-entry-size-row span {
  display: block;
}
.image-entry-size-row b {
  color: var(--text);
  font-size: 12px;
}
.image-entry-size-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}
.image-resolution-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.image-resolution-row button {
  min-width: 0;
  min-height: 74px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.64);
  color: var(--muted);
  text-align: left;
}
.image-resolution-row.compact button {
  min-height: 66px;
  padding: 8px;
}
.image-resolution-row button.active,
.image-resolution-row button:hover {
  border-color: rgba(204,140,29,.38);
  background: rgba(255,240,211,.82);
  color: #8a5605;
}
.image-resolution-row b,
.image-resolution-row span,
.image-resolution-row em,
.image-resolution-row small {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.image-resolution-row b {
  color: var(--text);
  font-size: 15px;
  line-height: 1.1;
}
.image-resolution-row span {
  margin-top: 3px;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}
.image-resolution-row em {
  margin-top: 4px;
  color: #8a5605;
  font-size: 11px;
  font-style: normal;
  font-weight: 720;
}
.image-resolution-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}
.image-design-filter-row.compact {
  margin: 10px 0 12px;
}
.image-design-filter-row.compact button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.image-design-filter-row.compact small {
  color: inherit;
  opacity: .62;
  font-size: 10px;
}
.image-home-preset-shelf {
  column-width: 210px;
  column-gap: 12px;
}
.image-home-preset-shelf article {
  display: inline-block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  break-inside: avoid;
}
.image-home-preset-shelf article.active {
  border-color: rgba(204,140,29,.36);
  background: rgba(255,240,211,.42);
}
.image-home-preset-shelf article.is-loading,
.image-inspiration-card.is-loading {
  pointer-events: none;
}
.image-home-preset-shelf article.is-loading .image-home-preset-visual,
.image-inspiration-card.is-loading .image-inspiration-visual,
.image-home-preset-shelf article.is-loading b,
.image-home-preset-shelf article.is-loading span,
.image-home-preset-shelf article.is-loading p,
.image-home-preset-shelf article.is-loading em,
.image-inspiration-card.is-loading b,
.image-inspiration-card.is-loading span,
.image-inspiration-card.is-loading p,
.image-inspiration-card.is-loading i {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(204,140,29,.08), rgba(255,255,255,.76), rgba(204,140,29,.10));
  background-size: 220% 100%;
  color: transparent;
  animation: imageDesignSkeleton 1.15s ease-in-out infinite;
}
.image-home-preset-shelf article.is-loading b,
.image-inspiration-card.is-loading b {
  width: 68%;
  height: 15px;
}
.image-home-preset-shelf article.is-loading span,
.image-inspiration-card.is-loading span {
  width: 46%;
  height: 12px;
  margin-top: 8px;
}
.image-home-preset-shelf article.is-loading p,
.image-inspiration-card.is-loading p {
  width: 100%;
  height: 42px;
  margin-top: 10px;
}
.image-home-preset-shelf article.is-loading em,
.image-inspiration-card.is-loading i {
  width: 48px;
  height: 18px;
}
@keyframes imageDesignSkeleton {
  from { background-position: 160% 0; }
  to { background-position: -60% 0; }
}
.image-home-preset-visual {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f8d9a1, #fff8e6 48%, #d7a343);
  color: #8a5605;
  overflow: hidden;
}
.image-home-preset-shelf article.portrait .image-home-preset-visual { aspect-ratio: 4 / 5; }
.image-home-preset-shelf article.landscape .image-home-preset-visual { aspect-ratio: 16 / 10; }
.image-home-preset-shelf article.square .image-home-preset-visual { aspect-ratio: 1 / 1; }
.image-home-preset-shelf article.tall .image-home-preset-visual { aspect-ratio: 3 / 4; }
.image-home-preset-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-home-preset-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 54%;
  background: linear-gradient(180deg, transparent, rgba(42,33,24,.62));
  opacity: 0;
  transition: opacity .18s ease;
}
.image-home-preset-visual.has-image::after {
  opacity: 1;
}
.image-home-preset-visual span {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  color: #fffaf1;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  text-align: left;
}
.image-home-preset-visual i {
  font-style: normal;
  font-size: 28px;
  font-weight: 860;
}
.image-home-preset-shelf article > div {
  min-width: 0;
  padding: 12px;
}
.image-home-preset-shelf article > div button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.image-home-preset-shelf b,
.image-home-recent-shelf b {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.38;
}
.image-home-preset-shelf article > div span,
.image-home-preset-shelf p,
.image-home-recent-shelf em {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.image-home-preset-shelf p {
  margin: 6px 0 8px;
}
.image-home-preset-shelf em {
  display: inline-flex;
  margin: 0 5px 5px 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(204,140,29,.10);
  color: #8a5605;
  font-size: 10px;
  font-style: normal;
}
.image-home-preset-shelf article > .btn {
  margin: 0 12px 12px;
  white-space: nowrap;
}
.image-home-recent-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.image-gallery-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.74);
  display: grid;
  align-content: start;
}
.image-gallery-thumb {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.image-gallery-thumb img,
.image-gallery-thumb span {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: rgba(255,244,220,.78);
  color: #9a6209;
  font-size: 18px;
  font-weight: 820;
}
.image-gallery-body {
  display: grid;
  gap: 8px;
  padding: 10px;
  min-width: 0;
}
.image-gallery-body > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.image-gallery-body b,
.image-gallery-body span,
.image-gallery-body p {
  min-width: 0;
  overflow-wrap: anywhere;
}
.image-gallery-body b {
  color: var(--text);
  font-size: 13px;
}
.image-gallery-body span {
  color: var(--muted);
  font-size: 12px;
}
.image-gallery-body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.image-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.image-home-recent-shelf > button {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.74);
  text-align: left;
}
.image-home-recent-shelf > button > span {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,244,220,.78);
  color: #9a6209;
  font-size: 18px;
  font-weight: 820;
}
.image-home-recent-shelf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-home-recent-shelf em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-entry-preview-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}
.image-entry-preview {
  min-height: 520px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 34%, rgba(204,140,29,.10) 0%, transparent 52%),
    repeating-conic-gradient(rgba(204,140,29,.035) 0% 25%, transparent 0% 50%) 0 0 / 28px 28px,
    rgba(255,250,242,.72);
}
.image-entry-preview-canvas {
  position: relative;
  width: min(100%, 310px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px;
  background: linear-gradient(135deg, #122538 0%, #2b6078 48%, #c2852b 100%);
  box-shadow: 0 26px 70px rgba(42,33,24,.16);
}
.image-entry-preview-canvas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-entry-preview-canvas.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42,33,24,.04), rgba(42,33,24,.80));
}
.image-entry-preview-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px;
  color: #fffaf1;
}
.image-entry-preview-overlay > span {
  align-self: flex-start;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  font-size: 10px;
  font-weight: 760;
}
.image-entry-preview-overlay strong {
  font-size: 22px;
  line-height: 1.16;
}
.image-entry-preview-overlay p {
  margin: 0;
  color: rgba(255,250,241,.78);
  font-size: 12px;
  line-height: 1.68;
}
.image-entry-preview-overlay div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.image-entry-preview-overlay i {
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,250,241,.86);
  font-size: 10px;
  font-style: normal;
}
.image-entry-preview-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.image-entry-preview-meta article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.68);
}
.image-entry-preview-meta b,
.image-entry-preview-meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-entry-preview-meta b {
  color: var(--text);
  font-size: 11px;
}
.image-entry-preview-meta span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.image-workbench-shell {
  display: none;
  margin-top: 14px;
  scroll-margin-top: 92px;
}
.image-workbench-shell.active {
  display: block;
}
.image-workbench-head {
  margin-bottom: 14px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,250,242,.72));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.75);
}
.image-workbench-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.image-workbench-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.image-studio-layout {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.2fr) minmax(260px, .72fr);
  gap: 14px;
  align-items: start;
}
.image-studio-layout > * {
  min-width: 0;
}
.image-studio-control,
.image-studio-brief {
  align-self: start;
}
.image-studio-control {
  max-height: calc(100vh - 174px);
  overflow: auto;
}
.image-studio-canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.image-studio-canvas > * {
  min-width: 0;
  max-width: 100%;
}
.image-design-canvas-preview {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: min(64vh, 620px);
  min-height: 420px;
  aspect-ratio: auto;
  background-color: #fffaf1;
}
.image-design-canvas-preview.media-preview.poster {
  aspect-ratio: auto;
}
.image-design-output {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 360px;
  overflow: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.image-option-grid,
.image-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.image-size-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.image-option-grid button,
.image-style-grid button {
  min-width: 0;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.62);
  color: var(--muted);
  text-align: left;
}
.image-option-grid button.active,
.image-style-grid button.active,
.image-option-grid button:hover,
.image-style-grid button:hover {
  border-color: rgba(204,140,29,.36);
  background: rgba(255,240,211,.78);
  color: #8a5605;
}
.image-option-grid b,
.image-style-grid b {
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}
.image-option-grid span,
.image-style-grid span,
.image-option-grid em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}
.image-custom-size-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.image-custom-size-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.image-custom-size-chips button {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  color: var(--muted);
  font-size: 11px;
}
.image-custom-size-chips b { margin-right: 4px; color: var(--text); }
.image-custom-size-box {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.image-custom-size-box.active { display: flex; }
.image-custom-size-box .input { min-height: 34px; }
.image-reference-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.image-reference-list article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.68);
}
.image-reference-list img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.image-reference-list button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(42,33,24,.72);
  color: #fff;
}
.image-reference-list span {
  display: block;
  padding: 5px;
  color: var(--muted);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.empty-inline {
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.image-design-button-row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 8px;
}
.image-entry-command-actions {
  min-width: 300px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: center;
}
.image-generation-progress {
  display: grid;
  gap: 10px;
}
.image-generation-progress div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.image-generation-progress b { color: var(--text); }
.image-generation-progress span,
.image-generation-progress p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.image-generation-progress i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
}
.image-generation-progress i::after {
  content: "";
  display: block;
  width: var(--progress, 45%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d08a16, #f3c66d);
  animation: progressSlide 1.2s ease-in-out infinite alternate;
}
.commerce-image-result .image-generation-progress i::after {
  animation: none;
}
.image-generation-progress ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.image-generation-progress li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.image-generation-progress li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(160,145,124,.36);
}
.image-generation-progress li.done::before {
  background: #16bf8d;
}
.image-generation-progress li.active {
  color: var(--text);
  font-weight: 760;
}
.image-generation-progress li.active::before {
  background: #d08a16;
}
.image-edit-progress-card {
  min-height: 100%;
  align-content: start;
}
.image-progress-meta {
  padding: 8px 10px;
  border: 1px dashed rgba(204,140,29,.28);
  border-radius: var(--radius-sm);
  background: rgba(255,252,246,.72);
  color: #7a5731;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}
.image-progress-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
@keyframes progressSlide {
  from { transform: translateX(0); }
  to { transform: translateX(120%); }
}
.image-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.image-result-preview {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.image-result-strip article {
  cursor: pointer;
}
.image-result-strip article.active {
  border-color: rgba(204,140,29,.42);
  background: rgba(255,240,211,.72);
}
.image-lightbox-backdrop.active {
  display: grid;
  z-index: 138;
}
.image-lightbox-modal {
  width: min(1280px, 96vw);
  max-height: 94vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.image-lightbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.image-lightbox-media {
  display: grid;
  place-items: center;
  min-height: min(70vh, 780px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, rgba(140,114,78,.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(140,114,78,.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(140,114,78,.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(140,114,78,.08) 75%),
    #fffdf8;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
  cursor: zoom-in;
  overscroll-behavior: contain;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.image-lightbox-media.can-pan {
  cursor: grab;
}
.image-lightbox-media.is-panning {
  cursor: grabbing;
}
.image-lightbox-media img {
  display: block;
  width: auto;
  max-width: none;
  max-height: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 56px rgba(42,33,24,.22);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.image-edit-modal-backdrop.active {
  display: grid;
  place-items: stretch;
  z-index: 242;
  padding: 12px;
  background: rgba(16, 13, 10, .78);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.image-edit-modal {
  width: min(1760px, calc(100vw - 24px)) !important;
  height: calc(100vh - 24px) !important;
  max-height: none !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  border-color: rgba(255,255,255,.16) !important;
  background: linear-gradient(180deg, rgba(36, 29, 21, .96), rgba(20, 17, 13, .98)) !important;
  color: #fff8ea !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.42) !important;
}
.image-edit-modal .modal-head p {
  margin: 4px 0 0;
  color: rgba(255,248,234,.66);
}
.image-edit-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.06) 75%),
    #11100e;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
  touch-action: none;
}
.image-edit-stage canvas {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.image-edit-stage #imageDesignMaskImageCanvas {
  z-index: 1;
}
.image-edit-stage #imageDesignMaskOverlayCanvas {
  z-index: 2;
  pointer-events: none;
}
.image-edit-stage #imageDesignMaskDrawCanvas {
  z-index: 3;
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23251b11' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 25l5-1 13-13-4-4L8 20z' fill='%23fff8ee'/%3E%3Cpath d='M19 9l4 4'/%3E%3Cpath d='M7 25l1-5'/%3E%3C/g%3E%3C/svg%3E") 4 28,
    pointer;
  opacity: .01;
}
.image-edit-stage span {
  z-index: 4;
  color: rgba(255,255,255,.72);
  font-size: 13px;
}
.image-edit-stage span.hidden {
  display: none;
}
.image-edit-tools {
  display: grid;
  gap: 12px;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.image-edit-tool-row,
.image-edit-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.image-edit-tool-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,248,234,.70);
  font-size: 12px;
}
.image-edit-tool-row input {
  width: 150px;
}
.image-edit-tools textarea.is-invalid {
  border-color: rgba(185,68,48,.54);
  box-shadow: 0 0 0 3px rgba(185,68,48,.10);
}
.image-edit-preview-row .api-status {
  flex: 1 1 260px;
}
.image-edit-modal .btn,
.image-edit-modal .icon-btn {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff8ea;
}
.image-edit-modal .btn.primary {
  background: linear-gradient(180deg, #f0c66a, #c88b22);
  color: #2d1f0f;
}
@media (max-width: 900px) {
  .image-edit-modal-backdrop.active {
    padding: 6px;
  }
  .image-edit-modal {
    width: calc(100vw - 12px) !important;
    height: calc(100vh - 12px) !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }
  .image-edit-tools {
    gap: 10px;
  }
  .image-edit-tool-row,
  .image-edit-preview-row {
    gap: 6px;
  }
  .image-edit-tool-row input {
    width: 112px;
  }
}
.image-brief-list {
  display: grid;
  gap: 8px;
}
.image-brief-list div,
.image-brief-list p {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.58);
}
.image-brief-list div {
  display: grid;
  gap: 4px;
}
.image-brief-list div.wide {
  gap: 6px;
}
.image-brief-list b {
  color: #8a5605;
  font-size: 12px;
}
.image-brief-list span,
.image-brief-list p {
  color: #4c3927;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.image-design-library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 2px 0 14px;
}
.image-design-library-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}
.image-design-library-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.image-design-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.image-design-filter-row button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}
.image-design-filter-row button.active,
.image-design-filter-row button:hover {
  color: #8a5605;
  border-color: rgba(204,140,29,.32);
  background: rgba(255,240,211,.78);
}
.image-inspiration-layout {
  display: block;
}
.image-inspiration-toolbar,
.image-inspiration-wall {
  min-width: 0;
}
.image-inspiration-toolbar,
.image-inspiration-wall {
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,250,242,.66));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.75);
}
.image-inspiration-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
  padding: 14px;
}
.image-inspiration-search label {
  display: block;
  margin-bottom: 7px;
  color: #8a5605;
  font-size: 12px;
  font-weight: 820;
}
.image-inspiration-filters {
  margin: 0;
}
.image-inspiration-filters button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.image-inspiration-filters b,
.image-inspiration-filters span {
  display: inline;
}
.image-inspiration-filters span {
  opacity: .66;
  font-size: 10px;
}
.image-inspiration-wall {
  padding: 14px;
}
.image-inspiration-wall-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.image-inspiration-wall-head h3 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 18px;
}
.image-inspiration-wall-head span {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: var(--muted);
  font-size: 11px;
}
.image-design-inspiration-grid {
  display: block;
  column-width: 210px;
  column-gap: 14px;
}
.image-inspiration-loading {
  display: grid;
  gap: 6px;
  column-span: all;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px dashed rgba(204,140,29,.24);
  border-radius: var(--radius);
  background: rgba(255,253,249,.72);
  color: var(--muted);
  break-inside: avoid;
}
.image-inspiration-loading b {
  color: var(--text);
}
.image-inspiration-loading span {
  font-size: 12px;
}
.image-inspiration-card,
.image-project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,250,242,.66));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.75);
}
.image-inspiration-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  cursor: pointer;
  break-inside: avoid;
}
.image-inspiration-card.image-only {
  scroll-margin-top: 150px;
  border-color: rgba(255,255,255,.92);
  background: #fffaf1;
  box-shadow: 0 14px 34px rgba(97,65,24,.12), inset 0 1px 0 rgba(255,255,255,.82);
}
.image-inspiration-card.active {
  border-color: rgba(204,140,29,.38);
  background: linear-gradient(180deg, rgba(255,249,236,.92), rgba(255,240,211,.62));
}
.image-inspiration-card.image-only.active {
  border-color: rgba(204,140,29,.52);
  box-shadow: 0 18px 42px rgba(97,65,24,.16), 0 0 0 3px rgba(204,140,29,.14);
}
.image-inspiration-visual {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 5;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(42,33,24,0), rgba(42,33,24,.70)),
    linear-gradient(135deg, #f8d9a1, #fff8e6 48%, #d7a343);
  color: #fffaf1;
}
.image-inspiration-card.square .image-inspiration-visual { aspect-ratio: 1 / 1; }
.image-inspiration-card.portrait .image-inspiration-visual { aspect-ratio: 4 / 5; }
.image-inspiration-card.landscape .image-inspiration-visual { aspect-ratio: 16 / 10; }
.image-inspiration-card.tall .image-inspiration-visual { aspect-ratio: 3 / 4; }
.image-inspiration-card.compact .image-inspiration-visual { aspect-ratio: 4 / 3; }
.image-inspiration-visual.has-image {
  padding: 0;
  background: #fffaf1;
}
.image-inspiration-visual.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-inspiration-card.image-only .image-inspiration-visual {
  display: flex;
  align-items: stretch;
  min-height: 120px;
  aspect-ratio: 4 / 5;
  padding: 0;
  background:
    linear-gradient(135deg, rgba(255,250,241,.92), rgba(248,226,187,.72)),
    #fffaf1;
}
.image-inspiration-card.image-only .image-inspiration-visual.is-loaded {
  display: block;
  min-height: 0;
  aspect-ratio: auto;
}
.image-inspiration-card.image-only .image-inspiration-visual.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fffaf1;
}
.image-inspiration-card.image-only .image-inspiration-visual.has-image.is-loaded img {
  height: auto;
  object-fit: contain;
}
.image-inspiration-card.image-only .image-inspiration-visual.has-image.is-error img {
  display: none;
}
.image-inspiration-card.image-only .image-inspiration-visual.has-image.is-error {
  min-height: 230px;
  aspect-ratio: 4 / 5;
}
.image-inspiration-visual.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42,33,24,0), rgba(42,33,24,.72));
}
.image-inspiration-card.image-only .image-inspiration-visual.has-image::after {
  background: linear-gradient(180deg, rgba(42,33,24,0) 45%, rgba(42,33,24,.66));
}
.image-inspiration-visual.has-image div {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 16px;
}
.image-inspiration-card.image-only .image-inspiration-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 12px;
  padding: 18px;
  color: #fffaf1;
  pointer-events: none;
}
.image-inspiration-card.image-only .image-inspiration-overlay b {
  max-width: 100%;
  color: #fffaf1;
  font-size: 20px;
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(42,33,24,.36);
  overflow-wrap: anywhere;
}

.image-inspiration-overlay-text {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.image-inspiration-card.image-only .image-inspiration-overlay-text span {
  color: rgba(255,250,241,.86);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(42,33,24,.30);
}
.image-inspiration-card.image-only .image-inspiration-card-actions .btn:not(.primary) {
  border-color: rgba(255,255,255,.64);
  background: rgba(255,250,241,.78);
}
.image-inspiration-card.image-only .image-inspiration-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  z-index: 5;
  transition: opacity .18s ease, transform .18s ease;
}
.image-inspiration-card.image-only:hover .image-inspiration-card-actions,
.image-inspiration-card.image-only:focus-within .image-inspiration-card-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.image-inspiration-card.image-only .image-inspiration-card-actions .btn {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.88);
  color: #5b4120;
  box-shadow: 0 8px 20px rgba(42,33,24,.16);
}
.image-inspiration-card.image-only .image-inspiration-card-actions .btn.primary {
  border-color: rgba(208,138,22,.92);
  background: #d08a16;
  color: #fffaf1;
}
.image-inspiration-visual.cover {
  background:
    linear-gradient(180deg, rgba(42,33,24,0), rgba(42,33,24,.72)),
    linear-gradient(135deg, #b8c2a3, #fff8e6 48%, #c2852b);
}
.image-inspiration-visual.infocard {
  background:
    linear-gradient(180deg, rgba(42,33,24,0), rgba(42,33,24,.68)),
    linear-gradient(135deg, #f3efe5, #d6c0a3 46%, #9fb8ac);
}
.image-inspiration-visual.product_bundle {
  background:
    linear-gradient(180deg, rgba(42,33,24,0), rgba(42,33,24,.70)),
    linear-gradient(135deg, #fff5dd, #ddb765 52%, #8f6b39);
}
.image-inspiration-visual b {
  font-size: 18px;
  line-height: 1.25;
}
.image-inspiration-visual span {
  font-size: 12px;
  opacity: .88;
}
.image-inspiration-body,
.image-project-body {
  display: grid;
  gap: 10px;
  padding: 13px;
}
.image-project-body {
  gap: 7px;
  padding: 9px;
}
.image-inspiration-body div,
.image-project-body div {
  min-width: 0;
}
.image-inspiration-body b,
.image-project-body b {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}
.image-project-body b {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-inspiration-body span,
.image-project-body span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.image-project-body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-inspiration-body p,
.image-project-body p {
  margin: 0;
  color: #5b4120;
  font-size: 12px;
  line-height: 1.58;
}
.image-project-body p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 36px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.image-inspiration-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.image-inspiration-tags i {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(204,140,29,.10);
  color: #8a5605;
  font-size: 11px;
  font-style: normal;
}
.image-inspiration-card-actions,
.image-inspiration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.image-inspiration-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.image-inspiration-facts article {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.62);
}
.image-inspiration-facts b,
.image-inspiration-facts span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-inspiration-facts b {
  color: var(--text);
  font-size: 11px;
}
.image-inspiration-facts span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.image-preset-modal-backdrop {
  z-index: 120;
  background: rgba(24, 22, 20, .56);
}

.image-preset-modal {
  position: relative;
  width: min(1120px, calc(100vw - 36px));
  max-height: min(900px, calc(100vh - 32px));
  overflow: hidden;
  padding: 0;
  background: #fffaf1;
}

.image-preset-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 28px rgba(42,33,24,.14);
}

.image-preset-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  min-height: min(760px, calc(100vh - 72px));
}

.image-preset-detail-visual {
  min-width: 0;
  max-height: min(900px, calc(100vh - 32px));
  display: grid;
  place-items: center;
  overflow: auto;
  background:
    linear-gradient(135deg, rgba(255,250,241,.88), rgba(239,222,193,.78)),
    #f7efe1;
}

.image-preset-detail-visual img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

.image-preset-detail-visual span {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: rgba(204,140,29,.14);
  color: #8a5605;
  font-size: 42px;
  font-weight: 820;
}

.image-preset-detail-body {
  min-width: 0;
  max-height: min(900px, calc(100vh - 32px));
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 28px;
  padding-right: 56px;
}

.image-preset-detail-head {
  display: grid;
  gap: 8px;
}

.image-preset-detail-head > span {
  color: #9a6a18;
  font-size: 12px;
  font-weight: 820;
}

.image-preset-detail-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.image-preset-detail-head p,
.image-preset-detail-copy p,
.image-preset-detail-source p {
  margin: 0;
  color: #5b4120;
  font-size: 13px;
  line-height: 1.7;
}

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

.image-preset-detail-meta article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.7);
}

.image-preset-detail-meta b,
.image-preset-detail-meta span {
  display: block;
}

.image-preset-detail-meta b {
  color: #9a6a18;
  font-size: 11px;
}

.image-preset-detail-meta span {
  margin-top: 5px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.image-preset-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.image-preset-detail-tags i {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(204,140,29,.11);
  color: #80530e;
  font-size: 12px;
  font-style: normal;
}

.image-preset-detail-copy,
.image-preset-detail-reference,
.image-preset-detail-source {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(231,214,184,.92);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.62);
}

.image-preset-detail-copy b,
.image-preset-detail-reference b,
.image-preset-detail-source b {
  color: var(--text);
  font-size: 13px;
}

.image-preset-detail-copy p,
.image-preset-detail-reference p {
  max-height: 210px;
  overflow: auto;
}

.image-preset-detail-source a {
  color: #9a6a18;
  font-size: 12px;
  font-weight: 760;
}

.image-preset-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.image-project-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.image-project-summary article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
}
.image-project-summary b {
  display: block;
  color: #8a5605;
  font-size: 22px;
  line-height: 1.2;
}
.image-project-summary span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.image-design-project-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.image-project-thumb {
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: rgba(255,244,220,.74);
  color: var(--muted);
  font-size: 12px;
  cursor: zoom-in;
}
.image-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-project-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.image-project-actions .btn {
  min-width: 0;
  min-height: 28px;
  padding: 0 6px;
  font-size: 11px;
  white-space: nowrap;
}

.persona-preview { display: grid; gap: 12px; }
.media-preview {
  min-height: 210px;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(204,140,29,.08), rgba(201,123,49,.10)),
    repeating-linear-gradient(45deg, #fffdf9 0, #fffdf9 10px, #f7ead6 10px, #f7ead6 20px);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.media-preview img,
.media-preview video { width: 100%; height: 100%; object-fit: cover; }
.media-preview.portrait { aspect-ratio: 4 / 5; }
.media-preview.poster { aspect-ratio: 4 / 5; min-height: 280px; }
.media-preview.product { aspect-ratio: 1 / 1; min-height: 160px; }
.media-preview.video-placeholder { aspect-ratio: 16 / 9; min-height: 240px; }
.preview-panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.creative-video-workbench {
  display: grid;
  grid-template-columns: minmax(360px, 430px) minmax(560px, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.creative-video-console {
  align-self: start;
  padding: 15px;
}
.creative-video-console .field {
  margin-bottom: 10px;
}
.creative-video-prompt-field .textarea {
  min-height: 132px;
}
.creative-video-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: min(72vh, 730px);
  padding: 16px;
  background: #171410;
  border-color: rgba(58,45,31,.34);
  box-shadow: 0 20px 54px rgba(47,38,27,.14);
}
.creative-video-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.creative-video-stage-head > div:first-child {
  min-width: 0;
}
.creative-video-stage-head b,
.creative-video-stage-head span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.creative-video-stage-head b {
  color: rgba(255,250,242,.94);
  font-size: 14px;
  line-height: 1.3;
}
.creative-video-stage-head span {
  margin-top: 3px;
  color: rgba(255,250,242,.58);
  font-size: 12px;
  line-height: 1.35;
}
.creative-video-stage-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  max-width: min(100%, 360px);
}
.creative-video-stage-actions[hidden] {
  display: none;
}
.creative-video-action {
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: rgba(255,250,242,.92);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 780;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.creative-video-action:hover {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
}
.creative-video-action.primary {
  border-color: rgba(221,158,52,.48);
  background: rgba(204,140,29,.92);
  color: #fff;
}
.creative-video-action svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.creative-video-stage {
  min-width: 0;
  min-height: clamp(330px, calc(100vh - 380px), 640px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(28,25,21,.96), rgba(11,10,9,.98)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 18px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}
.creative-video-preview {
  justify-self: center;
  align-self: center;
  width: min(100%, 1080px);
  min-height: 0;
  max-height: 100%;
  border: 0;
  background:
    linear-gradient(135deg, rgba(35,28,22,.72), rgba(20,16,13,.88)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 12px, rgba(255,255,255,.02) 12px, rgba(255,255,255,.02) 24px);
  color: rgba(255,255,255,.72);
  box-shadow: none;
}
.creative-video-preview.ratio-9-16 {
  aspect-ratio: 9 / 16;
  width: min(100%, 360px);
  min-height: 0;
  height: auto;
  max-height: 100%;
}
.creative-video-preview.ratio-16-9 {
  aspect-ratio: 16 / 9;
  width: min(100%, 1100px);
  min-height: 0;
  height: auto;
}
.creative-video-preview.ratio-1-1 {
  aspect-ratio: 1 / 1;
  width: min(100%, 760px);
  min-height: 0;
}
.creative-video-preview.ratio-4-3 {
  aspect-ratio: 4 / 3;
  width: min(100%, 920px);
  min-height: 0;
}
.creative-video-preview.ratio-3-4 {
  aspect-ratio: 3 / 4;
  width: min(100%, 620px);
  min-height: 0;
}
.ltx-video-settings {
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid rgba(204,140,29,.16);
  border-radius: 8px;
  background: rgba(255,250,242,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.ltx-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ltx-settings-head b {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.ltx-settings-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.ltx-size-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}
.ltx-size-grid button {
  min-width: 0;
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.66);
  color: var(--muted);
  text-align: left;
}
.ltx-size-grid button.active {
  border-color: rgba(204,140,29,.36);
  background: rgba(255,241,212,.86);
  color: #9a6209;
}
.ltx-size-grid b,
.ltx-size-grid span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ltx-size-grid b {
  color: inherit;
  font-size: 13px;
  line-height: 1.25;
}
.ltx-size-grid span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}
.ltx-param-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  gap: 7px;
  align-items: end;
  margin-top: 8px;
}
.ltx-param-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ltx-basic-grid {
  align-items: start;
}
.ltx-param-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: #4c3927;
  font-size: 11px;
  font-weight: 740;
}
.ltx-swap-btn {
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  color: var(--primary-2);
  font-size: 18px;
  font-weight: 820;
}
.ltx-advanced {
  margin-top: 10px;
  border-top: 1px solid rgba(204,140,29,.14);
  padding-top: 10px;
}
.ltx-advanced summary {
  cursor: pointer;
  color: var(--primary-2);
  font-size: 12px;
  font-weight: 820;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style-position: outside;
}
.ltx-advanced summary em {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
}
.ltx-advanced .field {
  margin: 10px 0 0;
}
.ltx-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 10px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}
.creative-video-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.creative-video-preview img,
.creative-video-preview video {
  object-fit: contain;
  background: #140f0a;
}
.creative-video-result {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.creative-video-result video {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  background: #140f0a;
}
.creative-video-actions {
  display: none;
}
.creative-video-actions .btn {
  text-decoration: none;
}
.creative-video-progress {
  width: min(100% - 28px, 420px);
  max-width: 100%;
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: 8px;
  background: rgba(255,253,249,.86);
  box-shadow: 0 12px 30px rgba(105,70,17,.08);
  color: var(--text);
  text-align: left;
}
.creative-video-progress-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.creative-video-progress-head div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.creative-video-progress-head b {
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.creative-video-progress-head span {
  color: var(--muted);
  font-size: 12px;
}
.creative-video-progress-head strong {
  flex: 0 0 auto;
  color: var(--primary-2);
  font-size: 18px;
  line-height: 1;
}
.creative-video-progress-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
}
.creative-video-progress-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .35s ease;
}
.creative-video-progress p,
.creative-video-progress em,
.creative-video-progress small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.creative-video-progress em {
  font-style: normal;
  color: var(--soft);
}
.creative-video-progress small {
  padding-top: 2px;
  color: var(--soft);
}
.creative-video-progress.is-failed {
  border-color: rgba(181,75,69,.24);
  background: rgba(255,247,245,.9);
}
.creative-video-progress.is-failed .creative-video-progress-head strong,
.creative-video-progress.is-failed .creative-video-progress-head span {
  color: var(--danger);
}
.creative-video-progress.is-failed .creative-video-progress-bar {
  background: rgba(181,75,69,.12);
}
.creative-video-progress.is-failed .creative-video-progress-bar i {
  background: linear-gradient(90deg, var(--danger), #d9856f);
}
.media-preview.ops-persona-preview {
  width: min(100%, 240px);
  min-height: 0;
  aspect-ratio: 3 / 4;
  justify-self: start;
  background: #fffaf1;
}
.media-preview.ops-persona-preview img,
.media-preview.ops-persona-preview video {
  object-fit: contain;
}
.persona-copy { display: grid; gap: 5px; }
.persona-copy b { font-size: 17px; }
.persona-copy span,
.persona-copy p { margin: 0; color: var(--muted); font-size: 13px; }
.persona-copy em {
  justify-self: start;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fff1df;
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 760;
}
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mini-asset {
  min-height: 126px;
  padding: 13px;
  display: grid;
  gap: 7px;
  align-content: start;
}
.mini-asset b { font-size: 15px; }
.mini-asset span { justify-self: start; color: var(--primary); font-size: 12px; font-weight: 760; }
.mini-asset p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.mini-asset .asset-actions { display: flex; gap: 7px; margin-top: 4px; }

.asset-workbench { display: grid; gap: 16px; }
.asset-upload-panel { padding: 16px; }
.asset-upload-grid { display: grid; grid-template-columns: 1.15fr .7fr .8fr 1.25fr; gap: 12px; align-items: end; }
.asset-upload-grid .field { margin: 0; }
.asset-upload-drop { margin-top: 12px; min-height: 86px; }
.asset-upload-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.asset-library-panel { display: grid; gap: 14px; }
.asset-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 150px 160px auto; gap: 10px; align-items: center; }
.asset-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.asset-card {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.76);
  overflow: hidden;
  display: grid;
  grid-template-rows: 118px 1fr;
}
.asset-card-media {
  width: 100%;
  height: 118px;
  border: 0;
  padding: 0;
  background: #f7f0e2;
  cursor: pointer;
  overflow: hidden;
  color: var(--primary);
  font: inherit;
}
.asset-card-media img,
.asset-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 118px;
  display: grid;
  place-items: center;
  color: var(--primary);
  font-size: 16px;
  font-weight: 760;
  background: linear-gradient(135deg, #fbf8f0 0%, #fff4d8 100%);
}
.asset-audio-placeholder {
  background: linear-gradient(135deg, #f5f8ef 0%, #eaf3ff 100%);
  color: #285c69;
}
.asset-video-placeholder {
  background: linear-gradient(135deg, #f7f0e2 0%, #fff6df 100%);
  color: #9a6b14;
}
.asset-card-body { padding: 12px; display: grid; gap: 8px; align-content: start; }
.asset-card-title-row { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.asset-card-title-row b { min-width: 0; color: var(--text); font-size: 14px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-title-row span { flex-shrink: 0; padding: 2px 7px; border-radius: 999px; background: #fff1df; color: var(--accent); font-size: 11px; font-weight: 760; }
.asset-card p { margin: 0; min-height: 0; color: var(--muted); font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.asset-card-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
.asset-tags { display: flex; gap: 5px; flex-wrap: wrap; min-height: 22px; }
.asset-tags em { padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: #6b4a22; background: #fbf8f0; font-size: 11px; font-style: normal; }
.asset-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.btn.danger { color: #9b2c2c; border-color: #ead1c8; background: #fff7f4; }

.generated-copy {
  min-height: 220px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  color: #4c3927;
  line-height: 1.7;
  white-space: pre-wrap;
}

.copy-structure,
.copy-script,
.copy-evaluation {
  padding: 11px;
  border: 1px solid rgba(204, 140, 29, .2);
  border-radius: var(--radius-sm);
  background: rgba(255, 252, 246, .78);
  white-space: pre-wrap;
}

.copy-script {
  margin-top: 10px;
  border-color: rgba(136, 89, 23, .2);
  background: rgba(255,255,255,.78);
  color: #332414;
  font-weight: 650;
}

.copy-evaluation {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.copy-structure {
  color: #735018;
  font-size: 13px;
}

.rewrite-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}

.rewrite-compare > div {
  min-width: 0;
}

.rewrite-asset-panel {
  display: grid;
  gap: 8px;
  align-content: start;
}

.rewrite-compare b {
  display: block;
  margin-bottom: 2px;
  color: #5a3a14;
  font-size: 13px;
}

.rewrite-asset-panel label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.copy-field {
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.72);
  color: #332414;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.copy-title-field {
  min-height: 48px;
  font-weight: 820;
}

.copy-tags-field {
  min-height: 50px;
  color: #8a5c16;
  font-weight: 760;
}

.compact-copy {
  min-height: 340px;
  max-height: 640px;
  overflow: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.result-summary {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}
.result-summary span { color: var(--muted); font-size: 12px; }
.generated-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  white-space: normal;
}
.generated-asset-grid article {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.58);
}
.generated-asset-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  object-fit: cover;
}
.generated-asset-grid b { color: var(--text); font-size: 13px; }
.generated-asset-grid span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.radar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; margin-bottom: 14px; }
.radar-filter {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 150px auto;
  gap: 12px;
  align-items: end;
}
.radar-filter .field { margin-bottom: 0; }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.rule-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rule-list button {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
  color: var(--muted);
  font-size: 12px;
}
.hot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hot-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.hot-cover {
  height: 86px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f7deb1, #e8bb58 48%, #fff8df);
  color: #9b6208;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  font-weight: 800;
  margin-bottom: 10px;
  overflow: hidden;
}
.hot-cover img { width: calc(100% + 20px); height: calc(100% + 20px); margin: -10px; object-fit: cover; }
.hot-cover span { display: flex; align-items: flex-end; width: 100%; height: 100%; }
.hot-card h4 { margin: 0; min-height: 42px; font-size: 15px; line-height: 1.4; }
.hot-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; color: var(--soft); font-size: 12px; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.55; }
.hot-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.hot-tags em {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(204, 140, 29, .1);
  color: var(--primary-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}
.source-link {
  display: inline-flex;
  margin: 0 0 10px;
  color: var(--primary-2);
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}

.copy-inspiration-page {
  display: grid;
  gap: 22px;
  color: #24272f;
}

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

.copy-inspiration-head h2 {
  margin: 0;
  color: #24272f;
  font-size: 28px;
  line-height: 1.22;
  font-weight: 900;
}

.copy-inspiration-head p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 8px 0 0;
  color: #9699a3;
  font-size: 14px;
  line-height: 1.55;
}

.copy-inspiration-head p span {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #8d89ff, #79c8ff);
  color: #fff;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 840;
}

.copy-inspiration-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 12px;
}

.radar-search-card,
.radar-creator-card {
  min-height: 112px;
  border-radius: 14px;
  display: flex;
  align-items: center;
}

.radar-search-card {
  padding: 0 26px;
  background: linear-gradient(108deg, #e7dcff 0%, #dff2ff 54%, #cdeef5 100%);
}

.radar-search-card select,
.radar-search-card input,
.radar-search-btn {
  border: 0;
  outline: 0;
  background: transparent;
  color: #2f333c;
}

.radar-search-card select {
  width: 118px;
  min-height: 38px;
  font-size: 15px;
  font-weight: 860;
}

.radar-search-divider {
  width: 1px;
  height: 34px;
  margin: 0 24px 0 10px;
  background: rgba(60,67,83,.16);
}

.radar-search-card input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  color: #2f333c;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}

.radar-search-card input::placeholder {
  color: #a1a4ad;
}

.radar-search-btn {
  width: 46px;
  height: 46px;
  margin-left: 10px;
  border-radius: 50%;
  color: #9b9da4;
  font-size: 30px;
  cursor: pointer;
}

.radar-creator-card {
  position: relative;
  padding: 14px 24px;
  background: linear-gradient(108deg, #fff5ec 0%, #f3eaff 100%);
  overflow: hidden;
}

.radar-creator-card button {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 68px;
  border: 0;
  background: transparent;
  color: #2f333c;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}

.radar-creator-card button span {
  color: #ff5f3f;
  font-size: 21px;
}

.radar-creator-card i {
  width: 1px;
  height: 86px;
  background: rgba(58,48,66,.12);
}

.radar-creator-card em {
  position: absolute;
  top: 16px;
  color: #8d8792;
  font-style: normal;
  font-size: 12px;
}

.radar-creator-card em:first-of-type { left: 38%; }
.radar-creator-card em:last-of-type { right: 20px; }

.inspiration-work-section {
  display: grid;
  gap: 14px;
}

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

.inspiration-work-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 310px;
  border: 1px solid #ebedf1;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.inspiration-work-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: #f5f6f8;
  color: #9a8a6d;
  font-size: 13px;
  font-weight: 860;
}

.inspiration-work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inspiration-work-body {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.inspiration-work-body b {
  color: #252934;
  font-size: 15px;
  line-height: 1.38;
}

.inspiration-work-body em,
.inspiration-work-body p {
  margin: 0;
  color: #8f949f;
  font-size: 12px;
  line-height: 1.5;
  font-style: normal;
}

.inspiration-work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inspiration-work-tags i {
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff4ef;
  color: #c65a39;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.inspiration-work-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.radar-rules-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, .8fr);
  gap: 12px 18px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  background: #fff;
}

.radar-rules-strip > div:first-child {
  display: grid;
  gap: 4px;
}

.radar-rules-strip b {
  color: #24272f;
  font-size: 15px;
  font-weight: 900;
}

.radar-rules-strip span,
.radar-rules-strip .api-note {
  margin: 0;
  color: #9699a3;
  font-size: 13px;
  line-height: 1.55;
}

.radar-rule-form {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 10px;
}

.radar-rule-form .select,
.radar-rule-form .input {
  border-color: #e9ebf0;
  border-radius: 10px;
  background: #fff;
}

.radar-rules-strip .rule-list,
.radar-rules-strip .api-status,
.radar-rules-strip .api-note {
  grid-column: 1 / -1;
}

.radar-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
}

.radar-section-head h3 {
  margin: 0;
  color: #24272f;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 900;
}

.radar-section-head p {
  margin: 8px 0 0;
  color: #9699a3;
  font-size: 14px;
}

.radar-filter-select select {
  width: 260px;
  height: 48px;
  border: 0;
  border-radius: 7px;
  background: #f5f6f8;
  color: #3c414c;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 780;
}

.radar-rank-tabs {
  display: flex;
  align-items: center;
  gap: 38px;
  border-bottom: 1px solid #ebedf1;
}

.radar-rank-tabs button {
  position: relative;
  height: 45px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3c414c;
  font-size: 15px;
  font-weight: 820;
  cursor: pointer;
}

.radar-rank-tabs button.active {
  color: #ff6544;
}

.radar-rank-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: #ff6544;
}

.radar-table-shell {
  overflow: hidden;
  border-radius: 0;
  background: #fff;
}

.hot-radar-table-wrap {
  overflow-x: auto;
}

.hot-radar-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}

.hot-radar-table th {
  height: 52px;
  padding: 0 22px;
  background: #f6f6f7;
  color: #24272f;
  font-size: 15px;
  font-weight: 900;
  text-align: left;
}

.hot-radar-table th:first-child { width: 42%; }
.hot-radar-table th:nth-child(2) { width: 18%; }
.hot-radar-table th:nth-child(3),
.hot-radar-table th:nth-child(4) { width: 14%; }
.hot-radar-table th:last-child { width: 18%; }

.hot-radar-table td {
  height: 84px;
  padding: 0 22px;
  border-bottom: 1px solid #edf0f3;
  color: #343842;
  font-size: 15px;
  vertical-align: middle;
}

.radar-topic-cell {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.radar-topic-cell b {
  color: #30343d;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.radar-topic-cell span {
  color: #a3a6ae;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radar-trend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333842;
  font-weight: 760;
}

.radar-trend i {
  color: #ff4f54;
  font-size: 10px;
  font-style: normal;
}

.radar-trend.down i {
  color: #20ba59;
}

.radar-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.radar-table-actions a,
.radar-table-actions button {
  border: 0;
  background: transparent;
  color: #ff6544;
  display: inline-flex;
  align-items: center;
  padding: 0;
  font-size: 14px;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
}

.radar-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 22px 0 4px;
  background: #fff;
}

.radar-pagination button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 7px;
  background: #f6f7f9;
  color: #343842;
  font-size: 16px;
  cursor: pointer;
}

.radar-pagination button.active {
  background: #fff0ed;
  color: #ff6544;
}

.radar-pagination button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.radar-page-ellipsis {
  min-width: 32px;
  color: #343842;
  text-align: center;
  font-weight: 900;
}

.radar-table-empty {
  padding: 18px 0 0;
  background: #fff;
}

.radar-empty-row td {
  height: auto;
  padding: 18px;
}

.radar-empty-row .empty-state {
  margin: 0;
  border-color: #f0d6bf;
  background: #fffdfa;
}

#page-copy[data-active-panel="radar"] .copy-page-head {
  display: none;
}

#page-copy[data-active-panel="radar"] .tabs {
  margin-bottom: 8px;
}

#page-copy[data-active-panel="radar"] .copy-inspiration-page {
  gap: 14px;
}

#page-copy[data-active-panel="radar"] .radar-command-head {
  align-items: stretch;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(213, 184, 126, .38);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 206, 106, .34), transparent 34%),
    linear-gradient(135deg, rgba(36, 31, 22, .96), rgba(92, 67, 34, .92) 54%, rgba(244, 213, 151, .86));
  color: #fff8e7;
  box-shadow: 0 26px 70px rgba(71, 49, 18, .22);
  position: relative;
  overflow: hidden;
}

#page-copy[data-active-panel="radar"] .radar-command-head::after {
  content: "";
  position: absolute;
  inset: auto -10% -58% 38%;
  height: 180px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transform: rotate(-8deg);
}

.radar-kicker {
  color: #f7ca70;
  letter-spacing: .18em;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 5px;
}

#page-copy[data-active-panel="radar"] .radar-command-head h2 {
  color: #fff7df;
  font-size: clamp(30px, 4vw, 54px);
  line-height: .94;
  letter-spacing: -.05em;
  font-weight: 950;
}

#page-copy[data-active-panel="radar"] .radar-command-head p {
  gap: 8px;
  margin-top: 10px;
  color: rgba(255,248,231,.8);
  font-size: 13px;
  line-height: 1.45;
  position: relative;
  z-index: 1;
}

#page-copy[data-active-panel="radar"] .radar-command-head #radarApiStatus {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(196, 255, 179, .16);
  color: #d7ffc8;
  border: 1px solid rgba(215,255,200,.34);
  font-weight: 900;
}

.radar-cost-card {
  min-width: 210px;
  max-width: 280px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  display: grid;
  align-content: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.radar-cost-card b {
  color: #ffe0a1;
  font-size: 12px;
  letter-spacing: .08em;
}

.radar-cost-card span {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.radar-cost-card em {
  color: rgba(255,248,231,.72);
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
}

#page-copy[data-active-panel="radar"] .radar-command-head .radar-quick-actions {
  align-self: center;
  position: relative;
  z-index: 1;
}

#page-copy[data-active-panel="radar"] .radar-command-head .radar-quick-actions button {
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.5);
}

.hot-radar-mission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mission-card {
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(223, 210, 188, .72);
  border-radius: 22px;
  background: linear-gradient(160deg, #fffdf7, #fff7eb);
  box-shadow: 0 18px 45px rgba(89, 63, 24, .08);
  position: relative;
  overflow: hidden;
}

.mission-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 108px;
  height: 108px;
  border-radius: 36px;
  background: rgba(255, 101, 68, .09);
  transform: rotate(18deg);
}

.mission-card.primary { background: linear-gradient(145deg, #fff9e7, #fff); }
.mission-card.low-follower { background: linear-gradient(145deg, #effaf2, #fff); }
.mission-card.creator-watch { background: linear-gradient(145deg, #eff5ff, #fff); }
.mission-card.workflow { background: linear-gradient(145deg, #fff0eb, #fff); }

.mission-card span {
  color: #a77b31;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
}

.mission-card b {
  margin-top: 8px;
  color: #27231b;
  display: block;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 950;
}

.mission-card p {
  max-width: 92%;
  margin: 10px 0 0;
  color: #817767;
  font-size: 12px;
  line-height: 1.45;
}

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

.radar-lane {
  border: 1px solid #eee3d3;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 16px 42px rgba(70, 54, 29, .07);
  overflow: hidden;
}

.radar-lane-head {
  padding: 14px 14px 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,247,230,.86), rgba(255,255,255,.4));
}

.radar-lane-head b {
  color: #2d2619;
  display: block;
  font-size: 16px;
  font-weight: 950;
}

.radar-lane-head span {
  color: #8b8173;
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
}

.radar-lane-head em {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #2f2a21;
  color: #ffe5a9;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.radar-lane-list {
  display: grid;
  gap: 8px;
  padding: 0 10px 12px;
}

.radar-lane-card {
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  text-align: left;
  position: relative;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.radar-lane-card:hover {
  border-color: #ffd7c9;
  box-shadow: 0 14px 28px rgba(255,101,68,.11);
  transform: translateY(-1px);
}

.radar-lane-card > i {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff2ec;
  color: #f16342;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
}

.radar-lane-thumb {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffe8b7, #f2f7ff);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #9b6324;
  font-size: 12px;
  font-weight: 900;
}

.radar-lane-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.radar-lane-card b {
  padding-right: 40px;
  color: #312b22;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 850;
}

.radar-lane-card span {
  margin-top: 4px;
  color: #8b8f98;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.radar-lane-empty {
  min-height: 82px;
  border: 1px dashed #eadcca;
  border-radius: 16px;
  color: #9a8d7c;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}

.radar-watch-strip > div:first-child {
  display: grid;
  gap: 2px;
}

.radar-watch-strip small {
  color: #aa9170;
  font-size: 11px;
}

.radar-table-head {
  margin-top: 0 !important;
}

@media (max-width: 1280px) {
  .hot-radar-mission-grid,
  .hot-radar-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-copy[data-active-panel="radar"] .radar-command-head { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .hot-radar-mission-grid,
  .hot-radar-lanes { grid-template-columns: 1fr; }
  .radar-cost-card { max-width: none; }
}

#page-copy[data-active-panel="radar"] .copy-inspiration-head {
  align-items: center;
  gap: 14px;
}

#page-copy[data-active-panel="radar"] .copy-inspiration-head h2 {
  font-size: 24px;
  line-height: 1.18;
}

#page-copy[data-active-panel="radar"] .copy-inspiration-head p {
  gap: 8px;
  margin-top: 4px;
  color: #8f8a82;
  font-size: 12px;
  line-height: 1.45;
}

#page-copy[data-active-panel="radar"] .copy-inspiration-head #radarApiStatus {
  padding: 2px 9px;
  border-radius: 999px;
  background: #eff8f0;
  color: #447436;
  font-weight: 860;
}

.radar-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.radar-quick-actions button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #f0d8b8;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #6b4b19;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 860;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(176,119,38,.08);
}

.radar-quick-actions button span {
  color: #d08a18;
  font-size: 15px;
}

.copy-inspiration-toolbar {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, .82fr);
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid #f0e6d8;
  border-radius: 10px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 12px 28px rgba(106,72,31,.05);
}

#page-copy[data-active-panel="radar"] .copy-inspiration-hero {
  display: contents;
}

#page-copy[data-active-panel="radar"] .radar-search-card {
  min-height: 48px;
  padding: 0 10px 0 14px;
  border: 1px solid rgba(224,207,185,.6);
  border-radius: 10px;
  background: linear-gradient(105deg, #f3eeff 0%, #e9f7fb 100%);
}

#page-copy[data-active-panel="radar"] .radar-search-card select {
  width: 92px;
  min-height: 34px;
  font-size: 14px;
}

#page-copy[data-active-panel="radar"] .radar-search-divider {
  height: 26px;
  margin: 0 12px 0 4px;
}

#page-copy[data-active-panel="radar"] .radar-search-card input {
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
}

#page-copy[data-active-panel="radar"] .radar-search-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  margin-left: 8px;
  border-radius: 10px;
  background: #ff6544;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 10px 20px rgba(255,101,68,.18);
}

.radar-search-btn:disabled {
  cursor: wait;
  opacity: .9;
}

.radar-search-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: #fff;
  border-radius: 999px;
  animation: radar-spin .7s linear infinite;
}

@keyframes radar-spin {
  to { transform: rotate(360deg); }
}

#page-copy[data-active-panel="radar"] .radar-creator-card {
  display: none;
}

#page-copy[data-active-panel="radar"] .radar-rule-form {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) auto;
  gap: 8px;
}

#page-copy[data-active-panel="radar"] .radar-rule-form .select,
#page-copy[data-active-panel="radar"] .radar-rule-form .input {
  height: 48px;
  border-color: #ece2d7;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

#page-copy[data-active-panel="radar"] .radar-rule-form .btn {
  height: 48px;
  border-radius: 10px;
  padding: 0 18px;
}

#page-copy[data-active-panel="radar"] .radar-section-head {
  display: block;
  margin-top: 2px;
}

#page-copy[data-active-panel="radar"] .radar-section-head h3 {
  font-size: 22px;
  line-height: 1.12;
  font-weight: 920;
}

#page-copy[data-active-panel="radar"] .radar-section-head p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}

#page-copy[data-active-panel="radar"] .radar-rules-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid #f1e6d8;
  border-radius: 8px;
  background: rgba(255,255,255,.62);
}

#page-copy[data-active-panel="radar"] .radar-rules-strip b {
  color: #6e593b;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

#page-copy[data-active-panel="radar"] .radar-rules-strip .rule-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#page-copy[data-active-panel="radar"] .radar-rules-strip .api-note {
  grid-column: 1 / -1;
  min-width: 0;
  max-height: 18px;
  margin: 0;
  color: #b18440;
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspiration-filters {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid #edf0f4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(54,64,82,.04);
}

.inspiration-filters.is-loading {
  opacity: .78;
}

.inspiration-filter-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.inspiration-filter-row.compact {
  align-items: center;
}

.inspiration-filter-row b {
  min-height: 30px;
  color: #30343d;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.inspiration-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  min-width: 0;
}

.inspiration-chip-list button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #606773;
  font-size: 12px;
  font-weight: 760;
  cursor: pointer;
  white-space: nowrap;
}

.inspiration-chip-list button:hover {
  background: #f7f8fa;
}

.inspiration-chip-list button:disabled {
  cursor: wait;
  opacity: .55;
}

.inspiration-chip-list button.active {
  border-color: #ffd5cb;
  background: #fff0ed;
  color: #f0522f;
  box-shadow: inset 0 0 0 1px rgba(255,101,68,.08);
}

.inspiration-chip-list.segmented {
  width: fit-content;
  gap: 0;
  padding: 3px;
  border: 1px solid #edf0f4;
  border-radius: 8px;
  background: #f7f8fa;
}

.inspiration-chip-list.segmented button {
  border-radius: 6px;
}

#page-copy[data-active-panel="radar"] .radar-table-shell {
  position: relative;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(54,64,82,.05);
}

.radar-table-shell.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(3px);
}

.radar-table-shell.is-loading::after {
  content: attr(data-loading-label);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  min-width: 190px;
  height: 42px;
  padding: 0 18px 0 42px;
  border: 1px solid rgba(255,101,68,.18);
  border-radius: 10px;
  background: #fff;
  color: #333842;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 18px 42px rgba(54,64,82,.12);
  transform: translate(-50%, -50%);
}

.radar-table-shell.is-loading .hot-radar-table-wrap,
.radar-table-shell.is-loading .radar-pagination {
  pointer-events: none;
}

#page-copy[data-active-panel="radar"] .hot-radar-table {
  min-width: 860px;
}

#page-copy[data-active-panel="radar"] .hot-radar-table th {
  height: 40px;
  padding: 0 18px;
  background: #f7f8fa;
  font-size: 14px;
}

#page-copy[data-active-panel="radar"] .hot-radar-table th:first-child { width: 42%; }
#page-copy[data-active-panel="radar"] .hot-radar-table th:nth-child(2) { width: 13%; }
#page-copy[data-active-panel="radar"] .hot-radar-table th:nth-child(3),
#page-copy[data-active-panel="radar"] .hot-radar-table th:nth-child(4) { width: 13%; }
#page-copy[data-active-panel="radar"] .hot-radar-table th:last-child { width: 19%; }

#page-copy[data-active-panel="radar"] .hot-radar-table td {
  height: 72px;
  padding: 8px 18px;
  font-size: 14px;
}

.inspiration-video-cell {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.inspiration-thumb {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff2d9, #f1f6f8 56%, #ffe3db);
  color: #bf6330;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  position: relative;
}

.inspiration-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inspiration-thumb i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 28px;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(28,31,38,.74);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

#page-copy[data-active-panel="radar"] .radar-topic-cell {
  gap: 3px;
}

#page-copy[data-active-panel="radar"] .radar-topic-cell b {
  font-size: 14px;
  font-weight: 780;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-copy[data-active-panel="radar"] .radar-topic-cell em {
  color: #848b96;
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-copy[data-active-panel="radar"] .radar-table-actions {
  align-items: center;
  gap: 8px;
}

#page-copy[data-active-panel="radar"] .radar-table-actions a,
#page-copy[data-active-panel="radar"] .radar-table-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #ffe0d8;
  border-radius: 7px;
  background: #fff7f4;
  color: #ff6544;
  font-size: 13px;
  font-weight: 820;
}

#page-copy[data-active-panel="radar"] .radar-table-actions button[data-hot-play],
#page-copy[data-active-panel="radar"] .radar-table-actions button[data-hot-view] {
  border-color: #edf0f4;
  background: #fff;
  color: #4d5663;
}

#page-copy[data-active-panel="radar"] .radar-pagination {
  gap: 8px;
  padding: 14px 0 16px;
}

#page-copy[data-active-panel="radar"] .radar-pagination button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 14px;
}

#page-copy[data-active-panel="radar"] .radar-page-ellipsis {
  min-width: 28px;
}

.hot-preview-modal {
  width: min(860px, 100%);
  border-radius: 12px;
}

.hot-preview-body {
  margin-top: 14px;
}

.hot-preview-layout {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.hot-preview-media {
  min-height: 360px;
  border-radius: 10px;
  background: #171a20;
  color: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 18px;
  font-weight: 900;
}

.hot-preview-media video,
.hot-preview-media img,
.hot-preview-media a {
  width: 100%;
  height: 100%;
}

.hot-preview-media img {
  object-fit: cover;
}

.hot-preview-media a {
  color: inherit;
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
}

.hot-preview-link {
  padding: 18px;
}

.hot-preview-detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hot-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hot-preview-metrics span {
  min-height: 58px;
  padding: 10px;
  border: 1px solid #edf0f4;
  border-radius: 8px;
  background: #fff;
  color: #727986;
  display: grid;
  gap: 3px;
  font-size: 12px;
}

.hot-preview-metrics b {
  color: #24272f;
  font-size: 18px;
}

.hot-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hot-preview-tags i {
  padding: 5px 8px;
  border-radius: 7px;
  background: #f4f6f8;
  color: #5b6470;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.hot-preview-actions {
  margin-top: auto;
}

.btn.small.active {
  border-color: rgba(204, 140, 29, .4);
  background: rgba(204, 140, 29, .14);
  color: var(--primary-2);
}
.empty-state {
  display: grid;
  gap: 6px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 253, 249, .72);
  color: var(--muted);
  text-align: center;
}
.empty-state.wide { grid-column: 1 / -1; }
.image-design-inspiration-grid .empty-state.wide,
.image-home-preset-shelf .empty-state.wide {
  column-span: all;
}
.empty-state b { color: var(--text); }
.empty-inline {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 253, 249, .72);
  color: var(--muted);
  font-size: 12px;
}
.empty-inline.full {
  grid-column: 1 / -1;
  width: 100%;
}

.voice-mode-tabs {
  width: fit-content;
  height: 40px;
  margin-bottom: 14px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.56);
  display: grid;
  grid-template-columns: repeat(2, 120px);
  gap: 3px;
}
.voice-mode-tabs button {
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--muted);
  font-weight: 760;
}
.voice-mode-tabs button.active { background: #fff; color: var(--primary-2); box-shadow: 0 6px 18px rgba(105,70,17,.08); }
.voice-feature-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.voice-feature-card {
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.66);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: left;
}
.voice-feature-card:hover { background: #fff; border-color: var(--line-strong); }
.voice-feature-card i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff4dc;
  color: var(--primary-2);
  font-style: normal;
  font-size: 12px;
  font-weight: 820;
}
.voice-feature-card b { display: block; font-size: 14px; }
.voice-feature-card em { color: var(--muted); font-size: 12px; font-style: normal; }
.voice-library-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 14px; align-items: start; }
.voice-library-layout.compact { display: block; }
.voice-category-panel { position: sticky; top: 84px; display: grid; gap: 14px; }
.compact-head { margin-bottom: 0; }
.voice-library-toolbar {
  margin: 8px 0 12px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.voice-library-toolbar > span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.voice-filter-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
}
.voice-filter-inline b {
  margin: 0 6px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}
.voice-filter-inline button {
  min-width: 38px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}
.voice-filter-inline button.active {
  border-color: rgba(204,140,29,.22);
  background: #fff;
  color: var(--primary-2);
  box-shadow: 0 4px 12px rgba(105,70,17,.07);
}
.voice-filter-block { display: grid; gap: 7px; }
.voice-filter-block b { color: var(--text); font-size: 13px; }
.voice-filter-block button {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
}
.voice-filter-block button:hover { background: rgba(255,255,255,.58); }
.voice-filter-block button.active {
  border-color: rgba(204,140,29,.24);
  background: rgba(204,140,29,.12);
  color: var(--primary-2);
  font-weight: 760;
}
.voice-workbench { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }
.voice-library-panel,
.voice-compose-panel { min-height: 560px; }
.voice-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; }
.voice-tabs {
  height: 38px;
  padding: 3px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.46);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.voice-tabs button {
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}
.voice-tabs button.active {
  background: #fff;
  color: var(--primary-2);
  box-shadow: 0 6px 18px rgba(105,70,17,.08);
}
.voice-tabs span {
  margin-left: 5px;
  color: var(--soft);
  font-size: 12px;
}
.voice-list-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.voice-list-head b { font-size: 15px; }
.voice-list-head span { color: var(--muted); font-size: 12px; }
.voice-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 204px));
  justify-content: start;
  gap: 10px;
}
.voice-list { display: grid; gap: 8px; }
.voice-item,
.voice-card {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  display: grid;
  gap: 9px;
  text-align: left;
}
.voice-card {
  min-height: 124px;
  padding: 11px;
  align-content: start;
  position: relative;
}
.voice-card:hover,
.voice-item:hover { background: rgba(255,255,255,.82); }
.voice-card.active,
.voice-item.active { border-color: rgba(204,140,29,.28); background: rgba(204,140,29,.12); }
.voice-card.playing {
  border-color: rgba(204,140,29,.48);
  box-shadow: 0 0 0 3px rgba(204,140,29,.12);
}
.voice-card.disabled { opacity: .62; }
.voice-card button:disabled,
.btn:disabled { cursor: not-allowed; opacity: .55; }
.voice-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.voice-play,
.voice-favorite {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--primary-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
}
.voice-favorite { color: var(--soft); }
.voice-favorite.active { color: var(--primary-2); background: #fff4dc; }
.voice-play.playing {
  background: var(--primary-2);
  border-color: var(--primary-2);
  color: #fff;
}
.voice-play.disabled { opacity: .4; }
.voice-card-main {
  width: 100%;
  padding: 0;
  display: grid;
  gap: 5px;
  background: transparent;
  text-align: left;
}
.voice-card-main b {
  min-height: 22px;
  font-size: 14px;
  line-height: 1.35;
}
.voice-card-main span {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.voice-inline-audio {
  display: none;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(204,140,29,.18);
  border-radius: var(--radius-sm);
  background: rgba(255,250,242,.82);
}
.voice-inline-audio.active,
.voice-card.playing .voice-inline-audio {
  display: block;
}
.voice-inline-audio audio {
  width: 100%;
  height: 34px;
  min-width: 0;
}
.voice-inline-audio span {
  color: var(--muted);
  font-size: 12px;
}
.voice-select-area {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  background: transparent;
  padding: 0;
  text-align: left;
}
.voice-item i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#fff,#f4deaa);
  color: #9b650b;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}
.voice-item b { display: block; font-size: 14px; }
.voice-item span { color: var(--muted); font-size: 12px; }
.voice-item audio { width: 100%; height: 32px; }
.voice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}
.voice-tags em {
  min-height: 19px;
  padding: 0 6px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}
.voice-license {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.voice-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: auto; }
.voice-card .btn.small {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
}
.selected-voice-card {
  min-height: 72px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  display: grid;
  gap: 9px;
}
.selected-voice-card > b { font-size: 14px; }
.selected-voice-card > span { color: var(--muted); font-size: 12px; }
.selected-voice-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.selected-voice-main i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#fff,#f4deaa);
  color: #9b650b;
  font-style: normal;
  font-weight: 800;
}
.selected-voice-main b { display: block; font-size: 15px; }
.selected-voice-main em { color: var(--muted); font-size: 12px; font-style: normal; }
.voice-prosody-panel {
  margin: 12px 0 14px;
  padding: 13px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,249,238,.68));
  display: grid;
  gap: 11px;
}
.voice-prosody-panel.compact {
  margin-top: 10px;
  padding: 12px;
}
.tts-route-panel {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}
.tts-route-panel.compact {
  margin: 6px 0 10px;
}
.tts-route-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.tts-route-tabs button {
  min-height: 38px;
  border: 1px solid rgba(176,126,44,.22);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.72);
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}
.tts-route-tabs button.active {
  border-color: rgba(176,126,44,.5);
  background: #fff7e8;
  color: var(--primary-2);
  box-shadow: 0 6px 18px rgba(105,70,17,.08);
}
.voice-prosody-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.voice-prosody-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.voice-prosody-head b {
  color: var(--text);
  font-size: 14px;
}
.voice-prosody-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}
.voice-prosody-head .btn {
  flex: 0 0 auto;
}
.voice-ai-summary {
  padding: 9px 10px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.68);
  color: #745415;
  font-size: 12px;
  line-height: 1.55;
}
.voice-prosody-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.voice-prosody-grid .field {
  margin-bottom: 0;
}
.voice-advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.voice-advanced {
  border: 1px solid rgba(176,126,44,.16);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.52);
}
.voice-advanced summary {
  min-height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #745415;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.voice-advanced summary::-webkit-details-marker {
  display: none;
}
.voice-advanced summary::after {
  content: "+";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff7e8;
  color: var(--primary-2);
  font-size: 17px;
  line-height: 1;
}
.voice-advanced[open] summary::after {
  content: "-";
}
.voice-advanced .voice-advanced-grid {
  padding: 0 10px 10px;
}
.voice-range-card {
  min-width: 0;
}
.voice-range-card span {
  min-width: 0;
}
.voice-range-card b {
  color: var(--primary-2);
}
.voice-empty {
  min-height: 220px;
  padding: 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255,255,255,.46);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}
.voice-empty b { font-size: 16px; }
.voice-empty span { max-width: 280px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.voice-clone-modal {
  width: min(820px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
}
.voice-clone-grid {
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: start;
}
.voice-clone-grid .form-panel,
.voice-clone-grid .preview-panel {
  padding: 14px;
}
.voice-clone-grid .small-textarea {
  min-height: 76px;
}
.voice-clone-hint {
  margin: -2px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.48);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.voice-detail-modal {
  width: min(760px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
}
.voice-detail-summary {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
}
.voice-detail-audio {
  min-height: 48px;
}
.voice-detail-audio span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.voice-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.voice-detail-meta div {
  min-height: 58px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.46);
}
.voice-detail-meta span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}
.voice-detail-meta b {
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}
.voice-edit-form {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.46);
}
.voice-edit-form .field:last-child { margin-bottom: 0; }
.voice-edit-form.readonly {
  opacity: .86;
}
.voice-detail-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.voice-detail-actions {
  position: sticky;
  bottom: -18px;
  margin: 14px -18px -18px;
  padding: 12px 18px 18px;
  background: linear-gradient(180deg, rgba(255,250,242,.72), #fffaf2 32%);
}
.voice-flow-note { display: grid; gap: 10px; }
.voice-flow-note div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.56);
}
.voice-flow-note i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff4dc;
  color: var(--primary-2);
  font-style: normal;
  font-weight: 800;
}
.voice-flow-note b { display: block; font-size: 13px; }
.voice-flow-note em { color: var(--muted); font-size: 12px; font-style: normal; line-height: 1.5; }
.voice-progress {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.66);
}
.voice-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 760;
}
.voice-progress-head span { color: var(--primary-2); }
.voice-progress-bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(204,140,29,.12);
}
.voice-progress-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .28s ease;
}
.voice-progress p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.avatar-video-progress {
  margin-top: 10px;
}

.avatar-edit-progress {
  margin-top: 10px;
}

.avatar-edit-actions {
  margin-top: 12px;
}

.avatar-edit-result {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.68);
  display: grid;
  gap: 12px;
}

.avatar-edit-result.hidden {
  display: none;
}

.avatar-edit-result video {
  width: 100%;
  max-height: 520px;
  border-radius: var(--radius-sm);
  background: #16110c;
}

.avatar-edit-result img {
  width: 100%;
  max-height: 260px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.avatar-edit-result .result-actions {
  margin-top: 0;
}
.audio-preview audio { width: 100%; height: 36px; margin-top: 8px; }
.result-block { margin-top: 14px; }
.result-block b { display: block; margin-bottom: 8px; }
.muted-box {
  min-height: 46px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  color: var(--muted);
}

.api-status {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 250, 242, .74);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.api-status.ok {
  border-color: rgba(204, 140, 29, .24);
  background: rgba(255, 244, 220, .82);
  color: var(--success);
}

.api-status.warn,
.api-status.loading {
  border-color: rgba(204, 140, 29, .28);
  background: rgba(255, 243, 223, .82);
  color: var(--warning);
}

.api-status.fail {
  border-color: rgba(181, 75, 69, .25);
  background: rgba(250, 236, 234, .86);
  color: var(--danger);
}

.api-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.api-note.subtle { color: var(--soft); }

.field-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.45;
}

.phone-preview {
  width: min(260px, 100%);
  aspect-ratio: 9 / 16;
  margin: 0 auto 14px;
  padding: 8px;
  border-radius: 24px;
  background: #2a2118;
  box-shadow: 0 14px 34px rgba(105, 70, 17, .18);
}
.phone-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #f5ead8;
}
.phone-inner img,
.phone-inner video { width: 100%; height: 100%; object-fit: cover; }
.video-preview-extra {
  position: absolute;
  right: 12px;
  bottom: 62px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  pointer-events: none;
}
.video-preview-open {
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.25;
  text-decoration: none;
  pointer-events: auto;
}
.video-preview-open:hover {
  background: rgba(0, 0, 0, .78);
}
.video-load-state {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  display: none;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}
.phone-inner.video-load-failed .video-load-state,
.phone-inner.video-load-buffering .video-load-state {
  display: block;
}
.phone-inner.video-load-buffering .video-load-state {
  top: auto;
  bottom: 54px;
  transform: none;
}
.phone-inner.video-load-ready .video-load-state,
.phone-inner:not(.video-load-failed):not(.video-load-buffering) .video-load-state {
  display: none !important;
}
.phone-inner.video-load-failed video {
  opacity: .34;
}
.empty-video {
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.empty-video b { color: var(--text); }
.phone-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  padding: 9px 10px;
  border-radius: var(--radius);
  background: rgba(42, 33, 24, .72);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
}

.phone-edit-badges {
  position: absolute;
  left: 12px;
  top: 14px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phone-edit-badges i {
  min-height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #7b571e;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.phone-edit-live-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  color: #fff;
  font-size: 11px;
}

.live-preview-topline {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.live-preview-topline span,
.live-preview-topline b {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(26, 21, 17, .58);
  color: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 850;
}

.live-cover-preview {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 52px;
  min-height: 92px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(20, 18, 15, .78), rgba(20, 18, 15, .22));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.live-cover-ref {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  opacity: .28;
}

.live-cover-ref img,
.live-cover-ref video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-cover-ref span {
  display: none;
}

.live-cover-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.live-cover-copy span {
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 760;
}

.live-cover-copy b {
  max-width: 92%;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 930;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.live-cover-copy em {
  color: rgba(255,255,255,.82);
  font-style: normal;
  font-size: 11px;
  font-weight: 760;
}

.live-cover-points {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.live-cover-points i {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: #6d4d1c;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 10px;
  font-weight: 850;
}

.live-cover-points strong {
  color: #c98612;
  font-size: 10px;
}

.cover-points {
  min-height: 112px;
  background: linear-gradient(180deg, rgba(20,18,15,.74), rgba(20,18,15,.30));
  align-content: center;
}

.cover-points .live-cover-copy b {
  font-size: 15px;
}

.cover-points .live-cover-points {
  display: grid;
  gap: 5px;
}

.cover-points .live-cover-points i {
  justify-content: flex-start;
  border-radius: 8px;
  background: rgba(255,255,255,.90);
}

.cover-course {
  top: auto;
  bottom: 124px;
  min-height: 78px;
  background: rgba(21, 48, 45, .72);
  border-left: 4px solid #d08a16;
}

.cover-course .live-cover-copy span::before {
  content: "课程 · ";
}

.cover-brand {
  top: 56px;
  min-height: 62px;
  background: rgba(255,255,255,.86);
  border-bottom: 3px solid #d08a16;
}

.cover-brand .live-cover-copy b,
.cover-brand .live-cover-copy em,
.cover-brand .live-cover-copy span {
  color: #2f261e;
  text-shadow: none;
}

.cover-brand .live-cover-points {
  display: none;
}

.live-subtitle {
  position: absolute;
  left: 18px;
  right: 18px;
  display: grid;
  justify-items: center;
  text-align: center;
}

.live-subtitle span {
  max-width: 100%;
  color: #fff;
  font-size: 15px;
  line-height: 1.24;
  font-weight: 930;
  overflow-wrap: anywhere;
  text-shadow:
    0 2px 8px rgba(0,0,0,.86),
    1px 1px 0 rgba(0,0,0,.72),
    -1px 1px 0 rgba(0,0,0,.72),
    1px -1px 0 rgba(0,0,0,.72),
    -1px -1px 0 rgba(0,0,0,.72);
}

.live-subtitle b {
  margin-top: 3px;
  color: #ffd66b;
  font-size: 12px;
  font-weight: 930;
  text-shadow: 0 2px 8px rgba(0,0,0,.72);
}

.subtitle-lower { bottom: 82px; }
.subtitle-center { top: 50%; transform: translateY(-50%); }
.subtitle-top { top: 142px; }

.style-brand {
  left: 22px;
  right: 22px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(208,138,22,.88);
}

.style-brand span,
.style-brand b {
  text-shadow: none;
}

.style-note {
  left: 22px;
  right: 22px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.90);
}

.style-note span {
  color: #2f261e;
  text-shadow: none;
}

.style-note b {
  color: #a36809;
  text-shadow: none;
}

.style-plain span,
.style-plain b {
  font-weight: 820;
}

.live-broll-fullscreen {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: rgba(18, 16, 13, .70);
  animation: brollPreviewPulse 3.8s ease-in-out infinite;
}

.live-broll-fullscreen img,
.live-broll-fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.04);
}

.live-broll-fullscreen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.38)),
    linear-gradient(90deg, rgba(0,0,0,.26), transparent 34%, transparent 66%, rgba(0,0,0,.18));
}

.live-broll-fullscreen > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  background: repeating-linear-gradient(
    -35deg,
    rgba(255,255,255,.10) 0,
    rgba(255,255,255,.10) 8px,
    rgba(255,255,255,.04) 8px,
    rgba(255,255,255,.04) 18px
  );
}

.live-broll-fullscreen em,
.live-broll-fullscreen strong {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  font-style: normal;
  text-shadow: 0 2px 12px rgba(0,0,0,.54);
}

.live-broll-fullscreen em {
  top: 90px;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 850;
}

.live-broll-fullscreen strong {
  bottom: 148px;
  color: #fff;
  font-size: 20px;
  line-height: 1.12;
  font-weight: 930;
}

.live-broll-fullscreen.missing {
  background: #51432f;
}

@keyframes brollPreviewPulse {
  0%, 42%, 100% { opacity: .34; transform: scale(1.015); }
  12%, 30% { opacity: .92; transform: scale(1.045); }
}

.live-pip {
  position: absolute;
  width: var(--pip-scale, 32%);
  min-width: 54px;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 12px;
  background: rgba(255,255,255,.18);
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
  overflow: hidden;
}

.live-pip img,
.live-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-pip > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.86);
  color: #8a611f;
  font-weight: 930;
}

.live-pip em {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  min-height: 16px;
  border-radius: 999px;
  background: rgba(20,18,15,.62);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pip-right-top { top: 152px; right: 18px; }
.pip-right-bottom { right: 18px; bottom: 152px; }
.pip-left-top { top: 152px; left: 18px; }

.pip-bottom-strip {
  left: 18px;
  right: 18px;
  bottom: 144px;
  width: auto;
  min-width: 0;
  aspect-ratio: auto;
  height: 42px;
}

.live-bgm {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(20,18,15,.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-items: center;
}

.live-bgm span {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #d08a16;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 900;
}

.live-bgm b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 11px;
}

.live-bgm em {
  color: rgba(255,255,255,.72);
  font-style: normal;
  font-size: 10px;
  font-weight: 760;
}

.live-bgm i {
  grid-column: 1 / -1;
  height: 4px;
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d08a16, #ffd66b);
}

.avatar-studio-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  grid-template-areas:
    "persona editor"
    "preview preview";
  gap: 14px;
  align-items: start;
}

.workflow-guide {
  margin: 0 0 14px;
  padding: 8px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.workflow-guide-step {
  min-width: 0;
  min-height: 70px;
  padding: 8px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: calc(var(--radius) - 4px);
  background: rgba(255,253,249,.72);
  color: var(--text);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  text-align: left;
}

.workflow-guide-step i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(204,140,29,.12);
  color: var(--primary-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 860;
}

.workflow-guide-step span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.workflow-guide-step b {
  min-width: 0;
  color: rgba(42,33,24,.90);
  font-size: 12px;
  line-height: 1.25;
}

.workflow-guide-step em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.workflow-guide-step.active {
  border-color: rgba(204,140,29,.36);
  background: rgba(255,246,226,.92);
  box-shadow: inset 0 0 0 1px rgba(204,140,29,.06);
}

.workflow-guide-step.done {
  border-color: rgba(54,132,84,.24);
  background: rgba(236,248,240,.78);
}

.workflow-guide-step.done i {
  background: #2f8a58;
  color: #fff;
}

.workflow-guide-step.pending {
  opacity: .74;
}

.video-editor-flow-guide {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: var(--radius);
  background: rgba(255,255,255,.68);
}

.video-editor-flow-guide button {
  min-height: 64px;
  padding: 8px;
  border: 1px solid rgba(176,126,44,.14);
  border-radius: 10px;
  background: rgba(255,253,249,.76);
  color: var(--text);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.video-editor-flow-guide i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(204,140,29,.12);
  color: var(--primary-2);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.video-editor-flow-guide span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.video-editor-flow-guide b {
  color: rgba(42,33,24,.92);
  font-size: 12px;
  line-height: 1.25;
}

.video-editor-flow-guide em {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
  overflow-wrap: anywhere;
}

.video-editor-flow-guide button.active {
  border-color: rgba(204,140,29,.34);
  background: rgba(255,246,226,.94);
  box-shadow: inset 0 0 0 1px rgba(204,140,29,.06);
}

.video-editor-flow-guide button.done {
  border-color: rgba(54,132,84,.24);
  background: rgba(236,248,240,.82);
}

.video-editor-flow-guide button.done i {
  background: #2f8a58;
  color: #fff;
}

.video-editor-flow-guide button.pending {
  opacity: .68;
}

.video-editor-flow-guide button:disabled,
.video-editor-step-nav button:disabled {
  cursor: not-allowed;
  opacity: .46;
}

.avatar-side-panel {
  grid-area: persona;
}

.avatar-preview-panel {
  grid-area: preview;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 240px;
  gap: 12px;
  align-items: start;
}

.avatar-editor-panel {
  grid-area: editor;
}

#page-avatar .avatar-studio-layout {
  grid-template-columns: minmax(220px, 280px) minmax(420px, 1fr) minmax(300px, 340px);
  grid-template-areas: "persona editor preview";
  gap: 12px;
}

#page-avatar .avatar-side-panel,
#page-avatar .avatar-editor-panel,
#page-avatar .avatar-preview-panel {
  min-width: 0;
}

#page-avatar .avatar-preview-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 96px);
  overflow: auto;
  align-self: start;
}

#page-avatar .avatar-preview-panel .panel-head,
#page-avatar .avatar-preview-panel .avatar-preview-summary,
#page-avatar .avatar-preview-panel .avatar-history-panel,
#page-avatar .avatar-preview-panel .task-status,
#page-avatar .avatar-preview-panel .log-list,
#page-avatar .avatar-preview-panel .avatar-live-audio {
  margin-top: 0;
}

#page-avatar .avatar-preview-panel .phone-preview {
  width: min(236px, 100%);
  margin-bottom: 0;
}

#page-avatar .avatar-preview-summary {
  gap: 6px;
}

#page-avatar .avatar-preview-summary span {
  min-height: 28px;
  padding: 7px 9px;
}

#page-avatar .avatar-history-summary {
  min-height: 54px;
}

.avatar-side-panel,
.avatar-preview-panel {
  position: static;
  align-self: start;
}

.avatar-side-actions {
  display: grid;
  gap: 8px;
}

.avatar-inline-picker {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(204,140,29,.18);
  border-radius: var(--radius);
  background: rgba(255,252,246,.82);
  display: grid;
  gap: 10px;
}

.avatar-persona-picker-modal,
.avatar-history-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: min(5vh, 42px) max(20px, calc((100vw - 1120px) / 2));
  border: 0;
  border-radius: 0;
  background: rgba(35,28,22,.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  place-items: center;
  overflow: auto;
}

.avatar-persona-picker-modal.hidden,
.avatar-history-modal.hidden {
  display: none;
}

.avatar-picker-open,
.avatar-history-open {
  overflow: hidden;
}

.avatar-persona-picker-modal .avatar-inline-picker-head,
.avatar-persona-picker-modal .avatar-inline-picker-toolbar,
.avatar-persona-picker-modal .avatar-inline-persona-grid,
.avatar-history-modal .avatar-inline-picker-head,
.avatar-history-modal .avatar-history-modal-toolbar,
.avatar-history-modal .avatar-task-history-list {
  width: min(1040px, calc(100vw - 40px));
  box-sizing: border-box;
}

.avatar-persona-picker-modal .avatar-inline-picker-head,
.avatar-history-modal .avatar-inline-picker-head {
  padding: 18px 20px;
  border: 1px solid rgba(176,126,44,.16);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(255,252,246,.96);
}

.avatar-persona-picker-modal .avatar-inline-picker-head div,
.avatar-history-modal .avatar-inline-picker-head div {
  display: grid;
  gap: 5px;
}

.avatar-persona-picker-modal .avatar-inline-picker-head span,
.avatar-history-modal .avatar-inline-picker-head span {
  color: var(--muted);
  font-size: 12px;
}

.avatar-persona-picker-modal .avatar-inline-picker-toolbar {
  padding: 0 20px 14px;
  border-left: 1px solid rgba(176,126,44,.16);
  border-right: 1px solid rgba(176,126,44,.16);
  background: rgba(255,252,246,.96);
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  align-items: center;
}

.avatar-persona-picker-modal .avatar-inline-persona-grid {
  max-height: min(66vh, 680px);
  padding: 0 20px 20px;
  border: 1px solid rgba(176,126,44,.16);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background: rgba(255,252,246,.96);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  overflow: auto;
}

.avatar-inline-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.avatar-inline-picker-head b {
  font-size: 13px;
}

.icon-btn.small {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 17px;
  line-height: 1;
}

.avatar-inline-picker-toolbar {
  display: grid;
  gap: 8px;
}

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

.segmented.small button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.segmented.small button.active {
  border-color: rgba(204,140,29,.34);
  background: rgba(204,140,29,.12);
  color: var(--primary-2);
}

.input.compact {
  height: 32px;
  border-radius: 8px;
  font-size: 12px;
}

.avatar-inline-persona-grid {
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.avatar-inline-persona-card {
  min-width: 0;
  min-height: 98px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  color: var(--text);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.avatar-inline-persona-card:hover,
.avatar-inline-persona-card.active {
  border-color: rgba(204,140,29,.36);
  background: rgba(255,248,236,.82);
}

.avatar-inline-persona-thumb {
  width: 72px;
  aspect-ratio: 1;
  border-radius: 12px;
}

.avatar-inline-persona-thumb .persona-source {
  display: none;
}

.avatar-inline-persona-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.avatar-inline-persona-card b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.avatar-inline-persona-card em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.avatar-inline-persona-card i {
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(204,140,29,.10);
  color: var(--primary-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.avatar-inline-persona-card.active i {
  background: var(--primary);
  color: #fff;
}

.avatar-production-note {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(204,140,29,.16);
  border-radius: var(--radius);
  background: rgba(255,248,236,.68);
  display: grid;
  gap: 7px;
}

.avatar-production-note b {
  font-size: 13px;
}

.avatar-production-note span {
  position: relative;
  padding-left: 15px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.avatar-production-note span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.avatar-editor-panel {
  min-width: 0;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.avatar-stage-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: var(--radius);
  background: rgba(255,255,255,.48);
}

.avatar-stage-nav button {
  min-width: 0;
  min-height: 42px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 5px);
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
}

.avatar-stage-nav button i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(204,140,29,.12);
  color: var(--primary-2);
  font-style: normal;
  font-size: 11px;
}

.avatar-stage-nav button.active {
  border-color: rgba(204,140,29,.24);
  background: #fff;
  color: var(--primary-2);
  box-shadow: 0 6px 18px rgba(105,70,17,.08);
}

.avatar-stage-nav button.locked {
  opacity: .55;
}

.avatar-stage-card {
  display: none;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.54);
}

.avatar-stage-card.active {
  display: block;
}

.avatar-stage-card.locked:not(.active) {
  display: none;
}

.avatar-stage-kicker {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(204,140,29,.10);
  color: var(--primary-2);
  font-size: 11px;
  font-weight: 850;
}

.avatar-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.avatar-editor-header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.avatar-editor-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.avatar-editor-header.compact {
  margin-bottom: 12px;
}

.avatar-script-box {
  min-height: 190px;
}

.avatar-content-tags-field {
  margin-top: -2px;
}

.avatar-content-tags-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 8px;
  align-items: stretch;
}

.avatar-content-tag-chips {
  min-height: 32px;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.avatar-content-tag-chips button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(176,126,44,.22);
  border-radius: 999px;
  background: rgba(255,250,242,.82);
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
}

.avatar-content-tag-chips button::before {
  content: "#";
  color: var(--primary-2);
  margin-right: 2px;
}

.avatar-content-tag-chips.empty {
  color: var(--muted);
  font-size: 12px;
  align-items: center;
}

.avatar-script-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -3px 0 14px;
}

.voice-control-row {
  grid-template-columns: minmax(0, 1fr) 96px 104px;
  align-items: end;
}

.avatar-preview-button {
  min-height: 38px;
  margin-bottom: 13px;
  padding: 0 10px;
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1;
}

.avatar-preview-button small,
.avatar-preview-button br {
  display: none;
}

.avatar-preview-button.playing {
  border-color: rgba(204,140,29,.42);
  background: rgba(204,140,29,.16);
  color: var(--primary-2);
}

.voice-preview-hint,
.avatar-generated-audio,
.avatar-live-audio,
.avatar-capability-panel {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,250,242,.72);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.voice-preview-hint {
  margin: -4px 0 13px;
}

.voice-preview-hint.ok {
  border-color: rgba(143,106,26,.22);
  background: rgba(249,244,230,.86);
  color: #745415;
}

.voice-preview-hint.warn {
  border-color: rgba(204,140,29,.24);
  background: rgba(255,243,223,.82);
  color: var(--warning);
}

.avatar-audio-progress {
  margin-top: 14px;
}

.avatar-step-actions {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.avatar-generated-audio {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 42px;
}

.avatar-generated-audio:empty {
  display: none;
}

.avatar-generated-audio b,
.avatar-live-audio b,
.avatar-capability-panel b {
  display: block;
  color: var(--text);
  font-size: 12px;
}

.avatar-generated-audio audio,
.avatar-live-audio audio {
  width: 100%;
  min-width: 0;
}

.avatar-section-divider {
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(204,140,29,.22), transparent);
}

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

.avatar-tool-block {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
}

.avatar-template-strip {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  display: grid;
  gap: 10px;
}

.hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.avatar-template-strip-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.avatar-template-strip-head b {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
}

.avatar-template-strip-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.avatar-template-strip-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.avatar-template-strip-list button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,250,242,.82);
  color: var(--text);
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: 12px;
  font-weight: 820;
  cursor: pointer;
}

.avatar-template-strip-list button i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--template-accent, var(--primary));
  box-shadow: 0 0 0 3px rgba(208,138,22,.12);
}

.avatar-template-strip-list button.more {
  background: #2f261e;
  color: #fff;
}

.template-first-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
  gap: 12px;
  align-items: stretch;
}

.template-first-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  gap: 10px;
}

.template-first-card {
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.86);
  color: var(--text);
  display: grid;
  grid-template-rows: minmax(0, auto) auto;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.template-first-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--template-accent) 52%, #c78a2c);
  box-shadow: 0 16px 32px rgba(71,48,18,.10);
}

.template-first-card.active {
  border-color: color-mix(in srgb, var(--template-accent) 68%, #9a6209);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--template-accent) 16%, transparent), 0 16px 34px rgba(71,48,18,.12);
}

.template-first-card .avatar-template-art {
  aspect-ratio: 9 / 16;
  height: auto;
  min-height: 0;
  border-radius: 0;
}

.template-first-card-copy {
  min-height: 78px;
  padding: 9px;
  display: grid;
  gap: 4px;
}

.template-first-card-copy b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}

.template-first-card-copy em {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
  font-weight: 720;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-selected-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: 10px;
  background: linear-gradient(180deg, #fff, rgba(255,248,235,.82));
  display: grid;
  gap: 10px;
  align-content: start;
}

.template-selected-head {
  display: grid;
  gap: 4px;
}

.template-selected-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 840;
}

.template-selected-head b {
  color: var(--text);
  font-size: 17px;
  font-weight: 930;
}

.template-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-selected-tags i {
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(204,140,29,.10);
  color: #6f4711;
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 830;
}

.filter-choice-row,
.visual-choice-grid,
.music-preset-grid,
.broll-layout-grid {
  display: grid;
  gap: 10px;
}

.filter-choice-row {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.visual-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}

.font-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

.font-choice-grid.compact {
  grid-template-columns: repeat(3, minmax(92px, 1fr));
}

.music-preset-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.broll-layout-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.visual-select-field {
  position: relative;
}

.visual-choice-card,
.filter-choice-card,
.music-preset-card,
.broll-layout-card {
  min-width: 0;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  color: var(--text);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.visual-choice-card:hover,
.filter-choice-card:hover,
.music-preset-card:hover,
.broll-layout-card:hover {
  transform: translateY(-1px);
  border-color: rgba(154,98,9,.32);
  box-shadow: 0 10px 22px rgba(71,48,18,.08);
}

.visual-choice-card.active,
.filter-choice-card.active,
.music-preset-card.active,
.broll-layout-card.active {
  border-color: rgba(154,98,9,.55);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(154,98,9,.10), 0 12px 26px rgba(71,48,18,.10);
}

.visual-choice-card {
  min-height: 124px;
  padding: 10px;
  display: grid;
  gap: 7px;
  align-content: start;
  text-align: left;
}

.visual-choice-card b,
.filter-choice-card b,
.broll-layout-card b,
.music-preset-card strong {
  grid-column: 1 / -1;
}

.music-preset-card strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 900;
}

.visual-choice-card em,
.filter-choice-card em,
.broll-layout-card em,
.music-preset-card em {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 720;
}

.choice-demo {
  min-height: 38px;
  padding: 8px 9px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
}

.subtitle-style-card.style-stroke .choice-demo {
  background: linear-gradient(135deg, #2e3642, #15191f);
  text-shadow: 1px 1px 0 rgba(0,0,0,.85), -1px 1px 0 rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.7);
}

.subtitle-style-card.style-brand .choice-demo {
  background: #df9b30;
  color: #271f18;
  text-shadow: none;
}

.subtitle-style-card.style-note .choice-demo {
  background: #fff7df;
  color: #342820;
  box-shadow: inset 0 0 0 1px rgba(120,83,24,.12);
}

.subtitle-style-card.style-plain .choice-demo {
  background: #1c1c1c;
  text-shadow: 0 2px 7px rgba(0,0,0,.86);
}

.subtitle-style-card.style-pop .choice-demo {
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  color: #fff;
  transform: rotate(-1deg);
}

.subtitle-style-card.style-clean .choice-demo {
  background: rgba(247,250,252,.96);
  color: #23303d;
  border-left: 4px solid #55a39a;
}

.font-choice-card {
  min-height: 86px;
  align-content: center;
}

.font-choice-card span {
  display: block;
  min-height: 30px;
  color: #1f2937;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-system,
.font-rounded {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.font-source {
  font-family: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", sans-serif;
}

.font-serif {
  font-family: "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
}

.font-mono {
  font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
}

.font-light {
  font-family: "Helvetica Neue", "PingFang SC", Arial, sans-serif;
  font-weight: 520;
}

.title-font-choice-card {
  min-height: 94px;
}

.title-font-choice-card span {
  min-height: 36px;
}

.font-title-viral,
.font-title-rounded {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 950;
}

.font-title-gold {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 950;
  color: #6b4210;
}

.font-title-hand {
  font-family: "Kaiti SC", "STKaiti", "PingFang SC", sans-serif;
  font-weight: 900;
}

.font-title-serif {
  font-family: "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
  font-weight: 900;
}

.font-title-tech {
  font-family: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", sans-serif;
  font-weight: 950;
}

.font-title-minimal {
  font-family: "PingFang SC", "Source Han Sans SC", sans-serif;
  font-weight: 820;
}

.font-title-bubble {
  font-family: "Arial Rounded MT Bold", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 950;
  color: #ff70a0;
}

.font-title-crayon {
  font-family: "Chalkboard SE", "Marker Felt", "PingFang SC", sans-serif;
  font-weight: 930;
  color: #3674d6;
}

.font-title-sticker {
  font-family: "Kaiti SC", "STKaiti", "PingFang SC", sans-serif;
  font-weight: 920;
  color: #483730;
}

.title-style-card {
  min-height: 150px;
}

.title-mini-frame {
  position: relative;
  height: 76px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(19,24,31,.25), rgba(19,24,31,.68)),
    linear-gradient(135deg, #87a78d, #384c63 52%, #b77d48);
  overflow: hidden;
  display: block;
}

.title-mini-frame i {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  color: #fff;
  font-style: normal;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 930;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.58);
}

.title-demo-hero .title-mini-frame i {
  top: 22px;
  font-size: 16px;
}

.title-demo-brand .title-mini-frame i {
  top: 12px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(0,0,0,.22);
}

.title-demo-vertical .title-mini-frame i {
  left: 8px;
  right: auto;
  top: 8px;
  bottom: 8px;
  writing-mode: vertical-rl;
  letter-spacing: 0;
}

.title-demo-lower .title-mini-frame i {
  top: auto;
  bottom: 9px;
  padding: 5px 7px;
  background: rgba(0,0,0,.48);
  border-radius: 6px;
}

.title-demo-cover .title-mini-frame i {
  top: 18px;
  font-size: 17px;
  color: #ffe1a1;
}

.title-demo-bubble .title-mini-frame i {
  top: 21px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff49c;
  color: #ff70a0;
  text-shadow: 0 2px 0 rgba(255,255,255,.8);
  box-shadow: 0 0 0 2px rgba(255,126,173,.72);
}

.title-demo-crayon .title-mini-frame i {
  top: 19px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,247,220,.74);
  color: #3674d6;
  text-shadow: 2px 2px 0 #fff08f, -1px 1px 0 #ff8474;
}

.title-demo-sticker .title-mini-frame i {
  top: 20px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fffff9;
  color: #483730;
  text-shadow: none;
  box-shadow: 4px 5px 0 rgba(0,0,0,.16), inset 0 0 0 2px rgba(255,195,76,.8);
}

.filter-choice-card {
  min-height: 76px;
  padding: 9px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  text-align: left;
}

.filter-choice-card i {
  width: 42px;
  height: 54px;
  border-radius: 7px;
  background: linear-gradient(150deg, var(--filter-accent), #1f2937);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}

.filter-choice-card.filter-warm i {
  background: linear-gradient(150deg, #f4c27c, #97512c);
}

.filter-choice-card.filter-cool i {
  background: linear-gradient(150deg, #c8e2ee, #3d6478);
}

.filter-choice-card.filter-contrast i {
  background: linear-gradient(150deg, #ffe66d, #232323 56%, #d75135);
}

.filter-choice-card.filter-soft i {
  background: linear-gradient(150deg, #ffe4e0, #c48998);
}

.filter-choice-card.filter-story i {
  background: linear-gradient(150deg, #9b8a74, #24201d);
}

.filter-choice-card span,
.music-preset-card,
.broll-layout-card {
  min-width: 0;
}

.filter-choice-card span,
.broll-layout-card {
  display: grid;
  gap: 3px;
}

.music-preset-card {
  min-height: 126px;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-content: start;
  text-align: left;
}

.music-wave {
  grid-column: 1 / -1;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--music-accent) 26%, white), rgba(255,255,255,.55));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.music-wave i {
  width: 5px;
  height: 13px;
  border-radius: 999px;
  background: var(--music-accent);
  animation: musicWave 1.1s ease-in-out infinite;
}

.music-wave i:nth-child(2) { height: 22px; animation-delay: .12s; }
.music-wave i:nth-child(3) { height: 17px; animation-delay: .24s; }
.music-wave i:nth-child(4) { height: 25px; animation-delay: .36s; }

.music-license-badge {
  justify-self: start;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--music-accent) 12%, white);
  color: color-mix(in srgb, var(--music-accent) 74%, #1f2937);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.music-preset-card em {
  grid-column: 1 / -1;
}

.music-preset-card small {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--music-accent) 70%, #4b5563);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
}

.music-play-pill {
  justify-self: end;
  align-self: start;
  min-width: 42px;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--music-accent) 14%, white);
  color: color-mix(in srgb, var(--music-accent) 70%, #1f2937);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

@keyframes musicWave {
  0%, 100% { transform: scaleY(.72); opacity: .72; }
  50% { transform: scaleY(1.05); opacity: 1; }
}

.broll-layout-card {
  min-height: 158px;
  padding: 10px;
  text-align: left;
}

.broll-demo {
  position: relative;
  width: min(96px, 100%);
  aspect-ratio: 9 / 16;
  height: auto;
  margin-bottom: 8px;
  margin-inline: auto;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.32)),
    linear-gradient(135deg, #9fbbd3, #536a54 46%, #d3a15f);
}

.broll-demo i {
  position: absolute;
  display: block;
  border-radius: 6px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.broll-demo i:nth-child(1) {
  inset: 8% auto auto 8%;
  width: 31%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 999px;
  animation: brollPulse 1.5s ease-in-out infinite;
}

.broll-demo i:nth-child(2) {
  right: 10%;
  top: 19%;
  width: 36%;
  height: 34%;
}

.broll-demo i:nth-child(3) {
  left: 13%;
  right: 13%;
  bottom: 9%;
  height: 4%;
  opacity: .74;
}

.demo-circle-right .broll-demo i:nth-child(1) {
  left: auto;
  right: 8%;
  top: auto;
  bottom: 8%;
}

.demo-fullscreen .broll-demo i:nth-child(1) {
  left: 12%;
  right: 12%;
  top: 28%;
  width: auto;
  height: 28%;
  border-radius: 7px;
}

.demo-right-top .broll-demo i:nth-child(1),
.demo-right-bottom .broll-demo i:nth-child(1) {
  width: 40%;
  height: 31%;
  border-radius: 7px;
  left: auto;
  right: 9%;
}

.demo-right-bottom .broll-demo i:nth-child(1) {
  top: auto;
  bottom: 9%;
}

.demo-bottom-strip .broll-demo i:nth-child(1) {
  left: 10%;
  right: 10%;
  bottom: 9%;
  top: auto;
  width: auto;
  height: 13%;
  border-radius: 7px;
}

@keyframes brollPulse {
  0%, 100% { transform: scale(.96); }
  50% { transform: scale(1.04); }
}

@media (max-width: 980px) {
  .filter-choice-row {
    grid-template-columns: repeat(3, minmax(112px, 1fr));
  }

  .template-first-layout,
  .simple-control-grid,
  .simple-control-grid.cover-grid,
  .video-editor-quick-grid {
    grid-template-columns: 1fr;
  }

  .template-first-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .quick-music-card,
  .quick-broll-layout-card {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .filter-choice-row,
  .visual-choice-grid,
  .music-preset-grid,
  .broll-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .font-choice-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-choice-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .filter-choice-card i {
    width: 34px;
    height: 46px;
  }

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

  .template-selected-card,
  .video-editor-quick-head {
    display: grid;
  }

  .simple-editor-section {
    padding: 14px;
  }

  .video-editor-quick-head .btn {
    width: 100%;
  }

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

.avatar-tool-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.avatar-tool-title b {
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: #2f261e;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 850;
}

.avatar-tool-title span {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.avatar-pip-switch {
  min-height: 36px;
  margin-bottom: 12px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,250,242,.76);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.avatar-pip-switch button {
  min-height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.avatar-pip-switch button.active {
  background: #2f261e;
  color: #fff;
  box-shadow: 0 6px 14px rgba(47,38,30,.16);
}

.avatar-tool-block.pip-disabled .upload,
.avatar-tool-block.pip-disabled .range-card,
.avatar-tool-block.pip-disabled .field {
  opacity: .48;
}

.avatar-tool-block.pip-disabled .upload,
.avatar-tool-block.pip-disabled .range-card {
  pointer-events: none;
}

.toggle-row {
  min-height: 34px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,250,242,.74);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 730;
}

.toggle-row input {
  accent-color: var(--primary);
}

.range-card.slim {
  margin-bottom: 13px;
  align-self: end;
}

.avatar-compose-workbench {
  padding: 14px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,250,242,.64));
  box-shadow: 0 14px 34px rgba(71,48,18,.06);
  display: grid;
  gap: 12px;
}

.avatar-output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  align-items: stretch;
}

.avatar-output-grid .motion-field,
.avatar-output-grid .motion-director-field {
  grid-column: 1 / -1;
}

.avatar-output-grid .motion-field {
  display: grid;
  grid-template-columns: minmax(160px, .32fr) minmax(0, 1fr);
  gap: 6px 12px;
  align-items: end;
}

.avatar-output-grid .motion-field label {
  grid-column: 1 / -1;
}

.avatar-output-grid .motion-field .field-note {
  margin: 0 0 2px;
}

.avatar-output-grid .motion-director-field .textarea {
  min-height: 96px;
}

.avatar-output-grid .motion-director-field .field-note {
  max-width: 760px;
}

.avatar-output-grid .motion-range-card {
  min-height: 78px;
  align-self: stretch;
}

.toggle-row.strong {
  color: var(--text);
  font-weight: 820;
}

.avatar-output-grid .field,
.avatar-tool-block .field {
  margin-bottom: 0;
}

.avatar-output-grid .avatar-control-field {
  min-width: 0;
  min-height: 88px;
  padding: 11px;
  border: 1px solid rgba(176,126,44,.14);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.74);
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 7px;
}

.avatar-output-grid .avatar-control-field label,
.avatar-title-field label {
  margin-bottom: 0;
}

.avatar-output-grid .avatar-control-field .select,
.avatar-title-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.avatar-title-field label span {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(204,140,29,.10);
  color: var(--primary-2);
  font-size: 11px;
  font-weight: 760;
}

.avatar-title-field .input {
  min-height: 40px;
  background: #fff;
}

.avatar-output-grid .avatar-control-field .select {
  align-self: end;
}

.avatar-title-field {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(176,126,44,.14);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.64);
  display: grid;
  gap: 7px;
}

.avatar-compose-hint {
  margin: 0;
  min-height: 36px;
  padding: 9px 11px;
  border: 1px solid rgba(176,126,44,.14);
  border-radius: var(--radius-sm);
  background: rgba(255,248,236,.74);
  color: #745415;
  display: flex;
  align-items: center;
}

.avatar-fixed-model .select {
  pointer-events: none;
  background: rgba(250,247,240,.88);
  color: var(--muted);
}

.avatar-generate-btn {
  min-height: 46px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.avatar-generate-btn small {
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
}

.avatar-generation-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 0;
}

.avatar-compose-status {
  display: grid;
  gap: 10px;
}

.avatar-compose-status .api-status {
  margin: 0;
}

.avatar-compose-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 150px);
  gap: 10px;
  align-items: stretch;
}

.avatar-post-video-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.avatar-post-video-actions .btn {
  min-height: 46px;
}

@media (max-width: 1320px) and (min-width: 981px) {
  .avatar-compose-actions {
    grid-template-columns: 1fr;
  }
}

.avatar-live-audio {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.avatar-live-audio span,
.avatar-capability-panel span {
  display: block;
  color: var(--muted);
}

.avatar-capability-panel {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.avatar-timeline-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: var(--radius);
  background: rgba(255,248,236,.62);
  display: grid;
  gap: 8px;
}

.avatar-timeline-head,
.avatar-track {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.avatar-timeline-head b {
  font-size: 13px;
}

.avatar-timeline-head span {
  color: var(--muted);
  font-size: 12px;
}

.avatar-track {
  min-height: 34px;
}

.avatar-track i {
  height: 28px;
  border-radius: var(--radius-sm);
  background: #2f261e;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 820;
}

.avatar-track span {
  min-height: 28px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(204,140,29,.18), rgba(255,255,255,.68));
  color: #6d4d1c;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 730;
}

.avatar-preview-summary {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.avatar-preview-summary span {
  min-height: 32px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.58);
  color: var(--muted);
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.35;
}

.avatar-step-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.avatar-step-head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}

.avatar-step-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.avatar-persona-toolbar {
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.avatar-searchbox {
  width: min(300px, 36vw);
}

.avatar-persona-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
}

.avatar-persona-card {
  position: relative;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  color: var(--text);
  display: grid;
  gap: 7px;
  text-align: left;
}

.avatar-persona-card:hover,
.avatar-persona-card.active {
  border-color: rgba(204,140,29,.36);
  background: rgba(255,248,236,.82);
}

.avatar-persona-card.active {
  box-shadow: inset 0 0 0 1px rgba(204,140,29,.24);
}

.avatar-persona-thumb {
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius) - 4px);
}

.avatar-persona-thumb .persona-source {
  left: 7px;
  bottom: 7px;
  min-height: 21px;
  padding: 0 7px;
  font-size: 11px;
}

.avatar-persona-check {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(42,33,24,.62);
  color: #fff;
  font-size: 11px;
  font-weight: 760;
}

.avatar-persona-card.active .avatar-persona-check {
  background: var(--primary);
}

.avatar-persona-card b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.avatar-persona-card em {
  min-height: 34px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.avatar-persona-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.avatar-persona-tags i {
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(204,140,29,.13);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(204,140,29,.08);
  color: var(--primary-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 740;
}

.avatar-selected-card {
  min-height: 74px;
  margin: 13px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.avatar-selected-card > b,
.avatar-selected-card > span {
  grid-column: 1 / -1;
}

.avatar-selected-card b {
  display: block;
  font-size: 14px;
}

.avatar-selected-card span,
.avatar-selected-card p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.avatar-selected-card.studio {
  min-height: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: 1fr;
}

.avatar-selected-card.studio .selected-avatar-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
}

.avatar-selected-card.studio > b,
.avatar-selected-card.studio > span {
  padding: 10px;
  border: 1px dashed rgba(176,126,44,.28);
  border-radius: var(--radius);
  background: rgba(255,255,255,.5);
}

.avatar-selected-card.studio > div {
  padding: 10px 2px 0;
}

.selected-avatar-thumb {
  width: 58px;
  aspect-ratio: 1;
  border-radius: 12px;
}

.selected-avatar-thumb .persona-source {
  display: none;
}

.phone-persona-thumb {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.phone-persona-thumb::after {
  inset: auto 9% 0;
}

.avatar-drive-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.avatar-drive-section {
  display: none;
}

.avatar-drive-section.active {
  display: block;
}

.avatar-dual-panel {
  display: grid;
  gap: 12px;
}

.avatar-dual-note {
  padding: 9px 11px;
  border: 1px solid rgba(204,140,29,.18);
  border-radius: var(--radius-sm);
  background: rgba(204,140,29,.08);
  color: var(--primary-2);
  font-size: 12px;
  font-weight: 760;
}

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

.avatar-speaker-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.56);
}

.avatar-speaker-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.3;
}

.avatar-audio-history {
  min-height: 82px;
  display: grid;
  gap: 8px;
}

.avatar-audio-history button {
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
  text-align: left;
}

.avatar-audio-history button.active {
  border-color: rgba(204,140,29,.34);
  background: rgba(204,140,29,.12);
}

.avatar-audio-history b {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.avatar-audio-history span {
  color: var(--muted);
  font-size: 12px;
}

.avatar-task-history-list,
.video-editor-history-list {
  display: grid;
  gap: 8px;
}

.avatar-history-modal .avatar-history-modal-toolbar {
  padding: 0 20px 14px;
  border-left: 1px solid rgba(176,126,44,.16);
  border-right: 1px solid rgba(176,126,44,.16);
  background: rgba(255,252,246,.96);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.avatar-history-modal .avatar-task-history-list {
  max-height: min(66vh, 680px);
  padding: 0 20px 20px;
  border: 1px solid rgba(176,126,44,.16);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background: rgba(255,252,246,.96);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  overflow: auto;
}

.avatar-history-panel {
  min-width: 0;
  grid-column: auto;
  display: grid;
  gap: 10px;
  align-self: stretch;
}

.avatar-history-summary {
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(176,126,44,.14);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,247,231,.72));
  color: var(--muted);
  display: grid;
  align-content: center;
  font-size: 12px;
  line-height: 1.55;
}

.avatar-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.avatar-history-head > div:first-child {
  display: grid;
  gap: 3px;
}

.avatar-history-head > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.avatar-history-head span {
  color: var(--muted);
  font-size: 11px;
}

.avatar-capability-panel.hidden {
  display: none;
}

.avatar-history-panel .primary-soft {
  border-color: rgba(204,140,29,.24);
  background: rgba(204,140,29,.10);
  color: var(--primary-2);
}

#avatarTaskHistoryList {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.avatar-video-history-item {
  width: 100%;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.68);
  color: var(--text);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-areas:
    "media copy"
    "media action";
  gap: 7px 10px;
  align-items: center;
  text-align: left;
}

.avatar-video-history-item:hover,
.avatar-video-history-item.active {
  border-color: rgba(204,140,29,.36);
  background: rgba(255,248,236,.86);
}

.avatar-video-history-media {
  grid-area: media;
  position: relative;
  width: 62px;
  height: 82px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,246,226,.96), rgba(236,205,145,.45));
  box-shadow: inset 0 0 0 1px rgba(176,126,44,.14);
}

.avatar-video-history-copy {
  grid-area: copy;
  min-width: 0;
}

.avatar-video-history-action {
  grid-area: action;
  width: fit-content;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(204,140,29,.10);
  color: var(--primary-2);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 850;
}

.avatar-video-history-item img,
.avatar-video-history-thumb,
.avatar-video-history-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.avatar-video-history-poster {
  display: grid;
  place-items: center;
  color: var(--primary-2);
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.avatar-video-history-poster i {
  max-width: 44px;
  font-style: normal;
  line-height: 1.25;
}

.avatar-video-history-thumb {
  background: transparent;
}

.avatar-video-history-item b,
.avatar-video-history-item em,
.avatar-video-history-item small {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-video-history-item b {
  font-size: 13px;
}

.avatar-video-history-item em,
.avatar-video-history-item small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

#avatarTaskHistoryList .avatar-video-history-item b,
#avatarTaskHistoryList .avatar-video-history-item em,
#avatarTaskHistoryList .avatar-video-history-item small {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

#avatarTaskHistoryList .avatar-video-history-item b {
  -webkit-line-clamp: 2;
}

#avatarTaskHistoryList .avatar-video-history-item em,
#avatarTaskHistoryList .avatar-video-history-item small {
  -webkit-line-clamp: 1;
}

.video-editor-history-list .avatar-video-history-item b,
.video-editor-history-list .avatar-video-history-item em,
.video-editor-history-list .avatar-video-history-item small {
  white-space: nowrap;
}

.video-editor-history-list .avatar-video-history-item {
  min-height: 64px;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas: "media copy";
}

.video-editor-history-list .avatar-video-history-media {
  width: 46px;
  height: 58px;
  border-radius: var(--radius-sm);
}

.video-editor-history-list .avatar-video-history-action {
  display: none;
}

.video-editor-history-list .avatar-video-history-copy {
  align-self: center;
}

.video-editor-history-panel {
  margin-top: 12px;
  display: grid;
  gap: 9px;
}

.video-editor-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.video-editor-history-head b {
  font-size: 14px;
}

.selected-avatar-thumb.history-video-thumb {
  overflow: hidden;
  background: rgba(47,38,30,.08);
}

.selected-avatar-thumb.history-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.range-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.range-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
}
.range-card span { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 760; }
.range-card.compact {
  min-height: 96px;
  padding: 10px 12px;
  display: grid;
  align-content: center;
  gap: 9px;
}

.range-card.compact span {
  align-items: center;
  gap: 6px;
}

.range-card.compact b {
  min-width: 38px;
  text-align: right;
}
input[type=range] { width: 100%; accent-color: var(--primary); }
.task-status { margin-top: 10px; color: var(--muted); font-size: 13px; }
.log-list { display: grid; gap: 7px; margin-top: 10px; }
.log-list div {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  color: var(--muted);
  font-size: 12px;
}
.commerce-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.table { width: 100%; border-collapse: collapse; }
.table th,
.table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
}
.table th { color: var(--muted); font-weight: 760; }
.table td { color: var(--muted); }
.membership-layout {
  display: grid;
  gap: 18px;
}
.membership-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 178px;
  padding: 28px;
  border: 1px solid rgba(204,140,29,.18);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255,253,249,.94), rgba(255,246,229,.88)),
    radial-gradient(circle at 88% 18%, rgba(204,140,29,.16), transparent 34%);
  box-shadow: var(--shadow);
}
.membership-hero-panel span {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
  color: var(--primary-2);
  font-size: 12px;
  font-weight: 760;
}
.membership-hero-panel h2 {
  margin: 14px 0 8px;
  font-size: 28px;
  letter-spacing: 0;
}
.membership-hero-panel p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.membership-balance-ring {
  display: grid;
  place-items: center;
  width: 154px;
  aspect-ratio: 1;
  border: 1px solid rgba(204,140,29,.2);
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 12px rgba(204,140,29,.08);
}
.membership-balance-ring strong {
  color: var(--text);
  font-size: 32px;
  line-height: 1;
}
.membership-balance-ring span {
  margin-top: -28px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.membership-metric-grid,
.membership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.membership-grid { grid-template-columns: 1.1fr .9fr; }
.membership-metric-grid article,
.membership-progress-panel,
.membership-cost-grid article,
.membership-ledger-list article,
.membership-plan-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.68);
  box-shadow: 0 10px 28px rgba(105,70,17,.05);
}
.membership-metric-grid article {
  display: grid;
  gap: 7px;
  padding: 18px;
}
.membership-metric-grid small,
.membership-metric-grid span,
.membership-ledger-list span,
.membership-ledger-list em,
.membership-plan-grid span,
.membership-plan-grid p,
.membership-plan-grid small,
.membership-plan-grid em,
.membership-cost-grid p,
.membership-cost-grid em {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.membership-metric-grid strong {
  color: var(--text);
  font-size: 24px;
}
.membership-progress-panel {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}
.membership-progress-panel div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.membership-progress-panel b { color: var(--text); }
.membership-progress-panel i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
}
.membership-progress-panel em {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.membership-panel { min-width: 0; }
.membership-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.membership-cost-grid article {
  display: grid;
  gap: 3px;
  padding: 14px;
}
.membership-cost-grid article.is-disabled {
  opacity: .58;
}
.membership-cost-grid span {
  color: var(--muted);
  font-size: 13px;
}
.membership-cost-grid b {
  color: var(--text);
  font-size: 24px;
}
.membership-cost-grid p {
  margin: 2px 0 0;
  color: #5a4631;
}
.membership-cost-grid small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.membership-ledger-list {
  display: grid;
  gap: 10px;
  max-height: 430px;
  overflow: auto;
}
.membership-ledger-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 13px 14px;
}
.membership-ledger-list b {
  display: block;
  color: var(--text);
  font-size: 13px;
}
.membership-ledger-list strong {
  color: var(--danger);
  font-size: 18px;
}
.membership-ledger-list .is-refund strong { color: var(--success); }
.membership-ledger-list em {
  grid-column: 2;
  font-style: normal;
}
.membership-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.membership-plan-grid article {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.membership-plan-grid article.active {
  border-color: rgba(204,140,29,.42);
  background: rgba(255,248,236,.88);
}
.membership-plan-grid b {
  color: var(--text);
  font-size: 16px;
}
.membership-plan-grid strong {
  color: var(--text);
  font-size: 24px;
}
.membership-plan-grid strong em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.membership-plan-grid small {
  display: block;
  min-height: 34px;
}
.membership-plan-grid article > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.membership-plan-grid article > div:last-child span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(204,140,29,.1);
}
.membership-plan-grid article > .btn {
  align-self: end;
}
.ops-billing-rule-table {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.ops-standard-unit-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.50);
}
.ops-image-resolution-price-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.50);
}
.ops-image-resolution-price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ops-image-resolution-price-grid label {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(36,30,24,.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.68);
}
.ops-image-resolution-price-grid span {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}
.ops-image-resolution-price-grid small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.ops-standard-unit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}
.ops-standard-unit-grid article {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(36,30,24,.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.68);
}
.ops-standard-unit-grid b {
  color: var(--text);
  font-size: 13px;
}
.ops-standard-unit-grid span,
.ops-standard-unit-grid em {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
}
.ops-standard-unit-grid span {
  color: #5a4631;
  font-weight: 720;
}
.ops-billing-rule-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}
.ops-billing-rule-head b {
  color: var(--text);
  font-size: 14px;
}
.ops-billing-rule-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 112px auto 42px;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.64);
}
.ops-billing-rule-row span {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}
.ops-billing-rule-row small {
  color: var(--muted);
  font-size: 12px;
}
.ops-billing-rule-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  justify-self: end;
}
.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.platforms button {
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  display: grid;
  align-content: center;
  gap: 2px;
}
.platforms button b,
.platforms button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platforms button b {
  color: inherit;
  font-size: 13px;
  line-height: 1.25;
}
.platforms button span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 620;
}
.platforms button.active span { color: #8f5b08; }
.platforms button:disabled {
  opacity: .56;
  cursor: not-allowed;
}
.platforms button.active { color: var(--primary-2); background: rgba(204,140,29,.12); border-color: rgba(204,140,29,.28); }
.publish-account-center.collapsed #publishAccountCollapsible {
  display: none;
}
.publish-account-center.collapsed .publish-list-head {
  margin-top: 0;
}
.publish-advanced-toggle {
  width: 100%;
  min-height: 38px;
  margin: 2px 0 12px;
  border: 1px dashed rgba(176,126,44,.30);
  border-radius: var(--radius);
  background: rgba(255,255,255,.55);
  color: var(--primary-2);
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
}
.publish-advanced-toggle:hover {
  border-color: rgba(204,140,29,.42);
  background: rgba(255,248,236,.76);
}
.publish-advanced-box {
  display: none;
  margin-bottom: 12px;
}
.publish-advanced-box.open {
  display: block;
}
.publish-list-head { margin-top: 18px; }
.publish-table th:nth-child(1) { width: 24%; }
.publish-table th:nth-child(2) { width: 18%; }
.publish-task-title,
.publish-task-desc {
  display: block;
  max-width: 260px;
}
.publish-task-title {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.publish-task-desc {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.publish-task-tags {
  display: block;
  max-width: 260px;
  margin-top: 5px;
  color: var(--primary-2);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 720;
}
.platform-account-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.platform-account-actions em {
  margin-right: auto;
  color: var(--primary-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}
.platform-account.needs-config {
  border-color: rgba(204,140,29,.24);
  background: rgba(255,248,236,.72);
}
.platform-account.needs-config .platform-account-actions em {
  color: #9a6a16;
}
.publish-video-preview {
  min-height: 184px;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
  overflow: hidden;
}
.publish-video-preview > span {
  min-height: 184px;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}
.publish-video-frame {
  aspect-ratio: 16 / 9;
  background: #1d1711;
}
.publish-video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.publish-video-meta {
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}
.publish-video-meta b { color: var(--text); font-size: 13px; }
.publish-video-meta span { color: var(--muted); font-size: 12px; }
.publish-table-video {
  display: flex;
  align-items: center;
  gap: 8px;
}
.publish-table-video img {
  width: 52px;
  height: 34px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: rgba(0,0,0,.08);
}
.publish-table-video a,
.publish-table-video span {
  color: var(--primary-2);
  font-size: 12px;
  font-weight: 740;
}
.publish-result-chips {
  display: grid;
  gap: 6px;
}
.publish-result-chip {
  max-width: 260px;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.62);
}
.publish-result-chip b {
  color: var(--text);
  font-size: 12px;
}
.publish-result-chip em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}
.publish-result-chip.ok { border-color: rgba(67,145,95,.28); background: rgba(235,248,239,.72); }
.publish-result-chip.warn { border-color: rgba(204,140,29,.32); background: rgba(255,247,229,.82); }
.publish-result-chip.wait { border-color: rgba(126,117,104,.22); }
.publish-task-detail-modal {
  width: min(1080px, calc(100vw - 36px));
  max-height: min(900px, calc(100vh - 32px));
  overflow: auto;
}
.publish-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr);
  gap: 10px;
  margin: 12px 0;
}
.publish-detail-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.68);
}
.publish-detail-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.publish-detail-summary b,
.publish-detail-summary a {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.publish-detail-summary a { color: var(--primary-2); }
.publish-detail-platforms {
  display: grid;
  gap: 12px;
}
.publish-detail-platform {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
}
.publish-detail-platform-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.publish-detail-platform-head b {
  display: block;
  color: var(--text);
  font-size: 15px;
}
.publish-detail-platform-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.publish-detail-platform-head em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
  color: var(--primary-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.publish-detail-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: 12px;
}
.publish-detail-frame {
  min-height: 310px;
}
.publish-detail-side {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}
.publish-detail-checks {
  display: grid;
  gap: 7px;
}
.publish-detail-checks span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.75);
  color: var(--muted);
  font-size: 12px;
  font-weight: 740;
}
.publish-detail-checks i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
}
.publish-detail-checks .ok { color: var(--success); border-color: rgba(67,145,95,.24); }
.publish-detail-checks .ok i { background: rgba(67,145,95,.13); }
.publish-detail-checks .warn { color: var(--warning); border-color: rgba(204,140,29,.26); }
.publish-detail-checks .warn i { background: rgba(204,140,29,.14); }
.publish-detail-fields {
  display: grid;
  gap: 8px;
  margin: 0;
}
.publish-detail-fields div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.68);
}
.publish-detail-fields dt {
  color: var(--muted);
  font-size: 12px;
}
.publish-detail-fields dd {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.publish-detail-fields a { color: var(--primary-2); }
.publish-detail-message {
  margin: 0;
  padding: 9px;
  border-radius: var(--radius-sm);
  background: rgba(255,247,229,.82);
  color: #6b4c1b;
  font-size: 12px;
  line-height: 1.55;
}
.publish-detail-steps {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.publish-detail-steps li {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.62);
}
.publish-detail-steps b,
.publish-detail-steps span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
}
.publish-detail-steps b { color: var(--text); }
.publish-detail-steps span { margin-top: 3px; color: var(--muted); }
.publish-detail-steps .ok { border-color: rgba(67,145,95,.25); }
.publish-detail-steps .warn { border-color: rgba(204,140,29,.32); background: rgba(255,247,229,.74); }
.publish-detail-steps .wait { border-color: rgba(126,117,104,.22); }
.publish-detail-steps .muted { opacity: .72; }
@media (max-width: 840px) {
  .publish-detail-summary,
  .publish-detail-proof-grid,
  .publish-detail-steps {
    grid-template-columns: 1fr;
  }
  .publish-detail-frame {
    min-height: 220px;
  }
}
.publish-account-modal { width: min(520px, 100%); }
.publish-account-modal .api-status { min-height: 34px; }
.publish-bind-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.publish-bind-summary > div {
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  display: grid;
  align-content: center;
  gap: 4px;
}
.publish-bind-summary span {
  color: var(--muted);
  font-size: 12px;
}
.publish-bind-summary b {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.publish-oauth-box {
  margin: 12px 0;
  display: grid;
  gap: 7px;
}
.publish-oauth-box span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.publish-oauth-qr:empty { display: none; }
.publish-qr-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.70);
}
.publish-qr-card img {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
  background: #fff;
}
.publish-qr-card b {
  display: block;
  color: var(--text);
  font-size: 14px;
}
.publish-qr-card span,
.publish-qr-card a {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.publish-qr-card a { color: var(--primary-2); font-weight: 760; }
.publish-web-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.70);
}
.publish-web-window-status {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(204,140,29,.24);
  border-radius: var(--radius-sm);
  background: rgba(255,247,229,.72);
}
.publish-web-window-status.ready {
  border-color: rgba(67,145,95,.28);
  background: rgba(232,246,236,.76);
}
.publish-web-window-status.failed {
  border-color: rgba(187,68,47,.28);
  background: rgba(255,238,234,.78);
}
.publish-web-window-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.publish-web-session-meta {
  display: grid;
  gap: 3px;
  padding-top: 2px;
}
.publish-web-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: #16110c;
  overflow: hidden;
  display: grid;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  position: relative;
}
.publish-web-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  grid-area: 1 / 1;
}
.publish-web-frame-status {
  grid-area: 1 / 1;
  place-self: center;
  display: grid;
  gap: 6px;
  width: min(86%, 380px);
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  background: rgba(22,17,12,.82);
  text-align: center;
  z-index: 1;
}
.publish-web-frame.is-loaded .publish-web-frame-status {
  display: none;
}
.publish-web-frame.is-error.is-loaded .publish-web-frame-status {
  display: grid;
}
.publish-web-frame.is-error img {
  opacity: .18;
}
.publish-web-frame-status b,
.publish-web-frame-status span,
.publish-web-frame-status a {
  margin: 0;
}
.publish-web-frame-status b {
  color: #fff7e8;
  font-size: 13px;
}
.publish-web-frame-status span {
  color: rgba(255,255,255,.72);
}
.publish-web-frame-status a {
  color: #f4bb55;
  font-weight: 760;
}
.publish-web-card b,
.publish-web-card span,
.publish-web-card a {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.55;
}
.publish-web-card b {
  color: var(--text);
  font-size: 14px;
}
.publish-web-card span { color: var(--muted); }
.publish-web-card a { color: var(--primary-2); font-weight: 760; }
@media (max-width: 560px) {
  .publish-bind-summary,
  .publish-qr-card {
    grid-template-columns: 1fr;
  }
  .publish-web-window-actions {
    display: grid;
  }
  .publish-qr-card img {
    width: 144px;
    height: 144px;
  }
}
.ops-publish-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ops-publish-config-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
}
.ops-publish-config-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ops-publish-config-head b { color: var(--text); font-size: 15px; }
.ops-publish-config-head span {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 780;
}
.ops-publish-config-head span.ok { color: var(--success); background: rgba(235,248,239,.9); }
.ops-publish-config-head span.wait { color: var(--warning); background: rgba(255,243,223,.9); }
.data-panel { margin-top: 14px; }
.bar-list { display: grid; gap: 12px; }
.bar-list div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.bar-list span { color: var(--text); font-size: 13px; }
.bar-list i { height: 10px; border-radius: 999px; background: #f3e5cd; overflow: hidden; position: relative; }
.bar-list i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--primary); }
.bar-list b { color: var(--muted); font-size: 12px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(42, 33, 24, .32);
}
.modal-backdrop.active { display: grid; }
.modal {
  width: min(560px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(105, 70, 17, .24);
  padding: 18px;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-head h3 { margin: 0; font-size: 18px; }
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: rgba(204,140,29,.10);
  color: var(--text);
  font-size: 20px;
}
.modal p { margin: 10px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.modal-field {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  color: #4c3927;
  font-size: 13px;
  font-weight: 720;
}
.modal-field input {
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 10px;
  outline: 0;
}
.settings-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.api-status.inline {
  margin-top: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.settings-row,
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.modal-actions { justify-content: flex-end; margin-top: 14px; }

.account-modal { width: min(620px, 100%); }
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.auth-tabs button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}
.auth-tabs button.active {
  border-color: rgba(204,140,29,.32);
  background: rgba(255,246,229,.84);
  color: var(--primary-2);
}
.auth-panel { display: none; }
.auth-panel.active {
  display: grid;
  gap: 10px;
}
.auth-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 122px;
  gap: 10px;
  align-items: end;
}
.wechat-login-box {
  display: grid;
  gap: 10px;
}
.wechat-login-qr {
  display: grid;
  place-items: center;
  min-height: 196px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.66);
}
.wechat-login-qr img {
  width: 168px;
  height: 168px;
  border-radius: var(--radius-sm);
  background: #fff;
}
.wechat-login-qr span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.membership-topup-grid article {
  border-color: rgba(204,140,29,.24);
}
.membership-topup-grid .btn {
  margin-top: 4px;
}

.avatar-template-modal-backdrop {
  background: rgba(24, 22, 20, .42);
  place-items: center;
}

.avatar-template-modal {
  width: min(1180px, calc(100vw - 36px));
  max-height: min(900px, calc(100vh - 32px));
  overflow: hidden;
  padding: 0;
  border-radius: 16px;
  background: #fbfaf8;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.avatar-template-modal-head {
  position: relative;
  min-height: 92px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid #e4e1dc;
  display: grid;
  place-items: center;
  text-align: center;
}

.avatar-template-modal-head .icon-btn {
  position: absolute;
  right: 18px;
  top: 16px;
  background: transparent;
  color: #8e949e;
}

.avatar-template-modal-head h3 {
  margin: 0;
  color: #282b31;
  font-size: 22px;
  font-weight: 900;
}

.avatar-template-modal-head p {
  margin: 7px 0 0;
  color: #858c98;
  font-size: 13px;
}

.avatar-template-toolbar {
  padding: 20px 28px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 14px;
  align-items: center;
}

.avatar-template-tabs {
  display: flex;
  gap: 10px;
}

.avatar-template-tabs button,
.avatar-template-categories button {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #e1e4ea;
  border-radius: 10px;
  background: #f5f6f8;
  color: #6e7480;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.avatar-template-tabs button.active {
  border-color: #b40707;
  background: #b40707;
  color: #fff;
}

.avatar-template-search {
  height: 42px;
  padding: 0 13px;
  border: 1px solid #d9dde5;
  border-radius: 9px;
  background: #fff;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  color: #9aa2ad;
}

.avatar-template-search input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #2d3138;
  font-size: 14px;
  font-weight: 760;
}

.avatar-template-search input::placeholder {
  color: #a5abb5;
}

.avatar-template-categories {
  padding: 0 28px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.avatar-template-categories button {
  min-height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  background: #fff;
}

.avatar-template-categories button.active {
  border-color: #252b35;
  color: #1f2530;
  background: #fff;
  box-shadow: inset 0 0 0 1px #252b35;
}

.avatar-template-grid {
  min-height: 0;
  overflow: auto;
  padding: 10px 28px 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 18px;
}

.avatar-template-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e0e4ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(40, 47, 58, .08);
}

.avatar-template-fav {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  color: #8f96a1;
  font-size: 19px;
  box-shadow: 0 8px 18px rgba(34, 40, 48, .14);
  cursor: pointer;
}

.avatar-template-fav.active {
  color: #b40707;
}

.avatar-template-art {
  position: relative;
  height: 276px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--template-accent) 26%, white), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--template-accent) 18%, white), #e9ecef);
}

.avatar-template-art.has-preview {
  background: #1f242b;
}

.avatar-template-preview-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-template-preview-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 850;
  pointer-events: none;
}

.avatar-template-art-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.28)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 2px, transparent 2px, transparent 20px);
}

.avatar-template-person {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 118px;
  height: 168px;
  transform: translateX(-50%);
  border-radius: 62px 62px 22px 22px;
  background:
    radial-gradient(circle at 50% 28px, #f5d2bc 0 25px, transparent 26px),
    linear-gradient(180deg, #fff 0 45%, color-mix(in srgb, var(--template-accent) 22%, #fff) 45% 100%);
  box-shadow: 0 14px 34px rgba(24,27,32,.22);
}

.avatar-template-person::before,
.avatar-template-person::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.avatar-template-person::before {
  top: 15px;
  width: 58px;
  height: 34px;
  border-radius: 999px 999px 18px 18px;
  background: #25211d;
}

.avatar-template-person::after {
  top: 54px;
  width: 78px;
  height: 50px;
  border-radius: 14px;
  background: rgba(255,255,255,.22);
  border: 2px solid rgba(255,255,255,.45);
}

.avatar-template-art strong {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 16px;
  color: #fff;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 930;
  text-shadow:
    0 3px 10px rgba(0,0,0,.58),
    1px 1px 0 rgba(0,0,0,.52),
    -1px 1px 0 rgba(0,0,0,.52);
}

.avatar-template-art span {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 42px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(20,22,26,.58);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 850;
}

.avatar-template-art div:last-child {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.avatar-template-art i,
.avatar-template-card-body i {
  font-style: normal;
}

.avatar-template-art i {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: #2b313a;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 850;
}

.avatar-template-card-body {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.avatar-template-card-body b {
  color: #2c3037;
  font-size: 15px;
  font-weight: 900;
}

.avatar-template-card-body span {
  min-height: 38px;
  color: #737b87;
  font-size: 12px;
  line-height: 1.55;
}

.avatar-template-card-body div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.avatar-template-card-body i {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f2f3f5;
  color: #68717d;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 820;
}

@media (max-width: 1120px) {
  .avatar-template-grid {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }

  .copy-inspiration-hero,
  .radar-rules-strip {
    grid-template-columns: 1fr;
  }

  .radar-rule-form {
    grid-template-columns: 130px minmax(0, 1fr) auto;
  }
}

@media (max-width: 860px) {
  .avatar-template-toolbar {
    grid-template-columns: 1fr;
  }

  .avatar-template-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .copy-inspiration-head,
  .radar-section-head {
    display: block;
  }

  .radar-filter-select select {
    width: 100%;
    margin-top: 12px;
  }

  .radar-search-card {
    min-height: auto;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .radar-search-card select,
  .radar-search-card input {
    width: 100%;
  }

  .radar-search-divider {
    display: none;
  }

  .radar-search-card input {
    grid-column: 1 / -1;
  }

  .radar-search-btn {
    margin-left: 0;
  }

  .radar-creator-card {
    min-height: auto;
    padding: 12px;
  }

  .radar-creator-card em {
    display: none;
  }

  .radar-rule-form {
    grid-template-columns: 1fr;
  }

  .radar-rank-tabs {
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .radar-rank-tabs::-webkit-scrollbar {
    display: none;
  }

  .radar-rank-tabs button {
    flex: 0 0 auto;
  }

  .radar-pagination {
    gap: 8px;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
  }
}

@media (max-width: 640px) {
  .avatar-template-modal {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
    border-radius: 12px;
  }

  .avatar-template-modal-head,
  .avatar-template-toolbar,
  .avatar-template-categories,
  .avatar-template-grid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .avatar-template-grid {
    grid-template-columns: 1fr;
  }

  .avatar-template-art {
    height: 240px;
  }
}

@media (max-width: 1120px) {
  #page-copy[data-active-panel="radar"] .copy-inspiration-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  #page-copy[data-active-panel="radar"] .copy-inspiration-page {
    gap: 12px;
  }

  #page-copy[data-active-panel="radar"] .copy-inspiration-head {
    display: grid;
    gap: 10px;
  }

  #page-copy[data-active-panel="radar"] .radar-quick-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-copy[data-active-panel="radar"] .radar-quick-actions button {
    justify-content: center;
  }

  #page-copy[data-active-panel="radar"] .radar-search-card {
    min-height: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  #page-copy[data-active-panel="radar"] .radar-search-card select,
  #page-copy[data-active-panel="radar"] .radar-search-card input {
    width: 100%;
  }

  #page-copy[data-active-panel="radar"] .radar-search-divider {
    display: none;
  }

  #page-copy[data-active-panel="radar"] .radar-search-card input {
    grid-column: 1 / -1;
  }

  #page-copy[data-active-panel="radar"] .radar-search-btn {
    margin-left: 0;
  }

  #page-copy[data-active-panel="radar"] .radar-rule-form {
    grid-template-columns: 1fr;
  }

  .inspiration-filters {
    padding: 9px;
  }

  .inspiration-filter-row,
  .inspiration-filter-row.compact {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .inspiration-filter-row b {
    min-height: 22px;
  }

  #page-copy[data-active-panel="radar"] .hot-radar-table {
    min-width: 0;
  }

  #page-copy[data-active-panel="radar"] .hot-radar-table th:first-child {
    width: auto;
  }

  #page-copy[data-active-panel="radar"] .hot-radar-table th:nth-child(2),
  #page-copy[data-active-panel="radar"] .hot-radar-table th:nth-child(3),
  #page-copy[data-active-panel="radar"] .hot-radar-table th:nth-child(4),
  #page-copy[data-active-panel="radar"] .hot-radar-table td:nth-child(2),
  #page-copy[data-active-panel="radar"] .hot-radar-table td:nth-child(3),
  #page-copy[data-active-panel="radar"] .hot-radar-table td:nth-child(4) {
    display: none;
  }

  #page-copy[data-active-panel="radar"] .hot-radar-table th:last-child {
    width: 118px;
  }

  #page-copy[data-active-panel="radar"] .hot-radar-table th,
  #page-copy[data-active-panel="radar"] .hot-radar-table td {
    padding-left: 12px;
    padding-right: 12px;
  }

  #page-copy[data-active-panel="radar"] .radar-table-actions {
    display: grid;
    gap: 6px;
  }

  #page-copy[data-active-panel="radar"] .radar-table-actions button {
    justify-content: center;
    padding: 0 8px;
  }

  .hot-preview-layout {
    grid-template-columns: 1fr;
  }

  .hot-preview-media {
    min-height: 320px;
  }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 200;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 13px;
  border-radius: var(--radius);
  background: rgba(42, 33, 24, .94);
  color: white;
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
  transition: .18s ease;
  font-size: 13px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

	@media (max-width: 1240px) {
	  .workspace-chip { display: none; }
	  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	  .hot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	  .workflow-strip,
    .workflow-guide,
	  .creative-capability-grid,
	  .platform-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	  .persona-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	  .persona-gallery { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
    .image-design-project-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	}

@media (max-width: 980px) {
  .video-works-layout,
  .asset-upload-grid,
  .asset-toolbar { grid-template-columns: 1fr; }
  .works-toolbar,
  .asset-upload-actions { align-items: stretch; flex-direction: column; }
	  .works-summary,
	  .asset-count { white-space: normal; }
	  .video-work-preview-panel { position: static; }
	  .video-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	  .employee-chat-shell {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .employee-chat-main,
  .employee-chat-side {
    margin-bottom: 14px;
  }

  .employee-chat-body {
    max-height: none;
    min-height: 360px;
  }

  .employee-chat-side {
    display: block;
    overflow: visible;
  }

  body { overflow: auto; }
  .app-shell { display: block; height: auto; }
  .sidebar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(204,140,29,.14);
  }
  .sidebar .brand,
  .sidebar .plan-card,
  .nav-section-title,
  .nav-flow-head,
  .nav-label {
    display: none;
  }
  .nav-section {
    display: contents;
  }
  .nav-parent {
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    padding: 0 10px;
    white-space: nowrap;
  }
  .nav-parent i { display: none; }
  .nav-subgroup {
    display: contents;
    margin: 0;
    padding: 0;
    border-left: 0;
  }
  .nav-subgroup.collapsed { display: none; }
  .nav {
    display: flex;
    gap: 6px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item {
    flex: 0 0 auto;
    width: auto;
    height: 36px;
    padding: 0 10px;
    white-space: nowrap;
  }
  .topbar { height: auto; flex-wrap: wrap; padding: 12px; }
  .account-chip { min-width: 122px; }
  .auth-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-inline,
  .settings-auth-grid { grid-template-columns: 1fr; }
  .search { max-width: none; order: 2; width: 100%; flex-basis: 100%; }
  .content { padding: 16px; }
	  .page-head,
			  .persona-library-head,
			  .avatar-step-head,
			  .avatar-step-actions,
			  .avatar-generation-actions,
			  .avatar-editor-header,
			  .avatar-studio-layout,
		  .home-layout,
		  .home-layout.secondary,
		  .workspace-grid,
  .creative-video-workbench,
  .employee-chat-shell,
	  .video-layout,
  .publish-layout,
  .voice-workbench,
  .voice-library-layout,
  .voice-clone-grid,
  .voice-grid,
  .radar-layout { display: block; }
  .publish-layout.accounts-collapsed { display: block; }
  .publish-table { min-width: 760px; }
  .page-head .btn { margin-top: 12px; }
  .ltx-size-grid,
  .ltx-param-grid,
  .ltx-param-grid.two {
    grid-template-columns: 1fr;
  }
  .creative-video-panel {
    min-height: auto;
    margin-top: 12px;
  }
  .creative-video-stage {
    min-height: 320px;
  }
  .creative-video-stage-head {
    align-items: stretch;
    flex-direction: column;
  }
  .creative-video-stage-actions {
    width: 100%;
    max-width: none;
    justify-content: stretch;
  }
  .creative-video-action {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 8px;
  }
  .creative-video-preview,
  .creative-video-preview.ratio-9-16,
  .creative-video-preview.ratio-16-9,
  .creative-video-preview.ratio-1-1,
  .creative-video-preview.ratio-4-3,
  .creative-video-preview.ratio-3-4 {
    width: 100%;
    height: auto;
    min-height: 280px;
    max-height: none;
  }
  .ltx-swap-btn {
    width: 100%;
  }
  .stat-grid,
	  .form-row,
	  .voice-control-row,
	  .settings-auth-grid,
  .range-grid,
  .avatar-edit-grid,
  .avatar-output-grid,
  .generated-asset-grid,
	  .radar-filter,
	  .asset-grid,
	  .hot-grid,
		  .work-grid,
  .employee-account-grid,
		  .voice-feature-row,
			  .voice-card-grid,
			  .avatar-stage-nav,
		  .workflow-strip,
		  .creative-capability-grid,
		  .platform-account-grid,
		  .rewrite-mode-tabs,
		  .rewrite-compare,
          .rewrite-strategy-grid,
		  .persona-hero-grid,
		  .persona-gallery,
      .creative-subnav,
      .image-entry-shell,
      .commerce-image-tool,
      .commerce-image-product-grid,
      .image-entry-form-grid,
      .image-entry-live-head,
      .image-entry-live-grid,
      .image-home-recent-shelf,
      .image-studio-layout,
      .image-inspiration-layout,
      .image-design-inspiration-grid,
      .image-project-summary,
      .ops-plan-editor,
      .ops-publish-config-grid,
		  .persona-create-grid { grid-template-columns: 1fr; }
      .image-entry-live-preview,
      .image-entry-live-output { min-height: 220px; }
			  .rewrite-actions { grid-template-columns: 1fr; }
	  .persona-library-actions { justify-content: flex-start; margin-top: 12px; }
	  .persona-searchbox { width: 100%; }
		  .persona-toolbar { align-items: flex-start; flex-direction: column; }
		  .avatar-persona-toolbar { align-items: flex-start; }
		  .avatar-searchbox { width: 100%; }
		  .avatar-persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		  .panel { margin-bottom: 14px; }
	  .persona-capability-card {
	    min-height: 86px;
	  }
	  .avatar-side-panel,
	  .avatar-preview-panel {
	    position: static;
	  }
	  .avatar-editor-header {
	    display: block;
	  }
	  .avatar-editor-header .tabs {
	    margin-top: 12px;
	  }
  .creative-subnav {
    position: static;
  }
  .image-design-library-head {
    display: block;
  }
  .image-design-library-head .btn {
    margin-top: 12px;
  }
  .image-design-project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

	  .commerce-result-stage-head {
	    display: grid;
	  }

	  .commerce-result-stage-actions {
	    justify-content: flex-start;
	  }

      .commerce-result-workbench {
        grid-template-columns: 1fr;
      }

      .commerce-result-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 360px;
      }

	  .commerce-result-canvas {
	    min-height: 260px;
	  }

  .commerce-status-output-list {
    grid-template-columns: 1fr;
  }
  .image-studio-control {
    max-height: none;
  }
	  .persona-card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    align-items: stretch;
  }
  .persona-portrait {
    aspect-ratio: auto;
    min-height: 156px;
  }
  .persona-head {
    font-size: 26px;
  }
  .persona-card-body {
    display: grid;
    align-content: center;
    padding: 12px;
  }
  .persona-card-body p {
    min-height: 0;
  }
  .persona-card-actions {
    flex-wrap: wrap;
  }
	}

/* Warm prototype theme overrides: keep the commercial interactions, restore the original visual language. */
body {
  background: linear-gradient(135deg, #fffdf9, #fff8ec 48%, #f7ecd9);
}

.sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,249,239,.56));
  border-right-color: rgba(204,140,29,.14);
}

.brand-mark,
.quick-action i {
  background: linear-gradient(145deg, #dba348, #b97714);
  color: #fff;
}

.topbar {
  background: rgba(255,250,242,.78);
  border-bottom-color: rgba(204,140,29,.12);
  backdrop-filter: blur(22px);
}

	.search,
	.workspace-chip,
	.btn,
	.status,
	.pill,
	.quick-action,
	.workflow-chip,
	.creative-capability-card,
	.platform-account,
	.calendar-list div,
	.voice-item,
.range-card,
.log-list div,
.platforms button,
.rule-list button,
.generated-copy,
.muted-box {
  background: rgba(255,255,255,.62);
  border-color: var(--line);
}

.panel,
.card {
  border-color: rgba(255,255,255,.85);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter: blur(20px);
}

.nav-item {
  color: rgba(42,33,24,.72);
}

.nav-icon {
  color: #b5760e;
}

.nav-item:hover,
.voice-item:hover,
.quick-action:hover {
  background: rgba(255,255,255,.82);
  border-color: rgba(204,140,29,.24);
}

.nav-item.active {
  color: #9a6209;
  background: linear-gradient(135deg, rgba(204,140,29,.14), rgba(255,255,255,.44));
}

.kicker,
.queue-item .type,
.mini-asset span,
.work-card span,
.plan-card span {
  color: #a36a0a;
}

.btn.primary {
  border-color: #cc8c1d;
  background: #cc8c1d;
  color: #fff;
  box-shadow: 0 10px 22px rgba(204,140,29,.18);
}

.btn.primary:hover {
  background: #b97714;
}

.avatar-badge {
  background: linear-gradient(145deg,#fff,#f4dfb5);
  border: 1px solid rgba(204,140,29,.16);
  color: #9a6209;
}

.plan-card {
  background: rgba(255,255,255,.58);
  border-color: rgba(255,255,255,.76);
  box-shadow: var(--shadow);
}

.plan-bar {
  background: rgba(204,140,29,.12);
}

.plan-bar i,
.bar-list i::before {
  background: #cc8c1d;
}

.field label,
.modal-field {
  color: #4c3927;
}

.input,
.textarea,
.select,
.modal-field input {
  background: rgba(255,255,255,.70);
  border-color: var(--line-strong);
}

.upload {
  border: 1.5px dashed rgba(176,126,44,.30);
  background: rgba(255,255,255,.46);
}

.upload:hover {
  border-color: rgba(204,140,29,.42);
  background: rgba(255,248,236,.72);
}

.seg.active,
.tab.active,
.voice-item.active,
.platforms button.active {
  color: #9a6209;
  background: rgba(204,140,29,.12);
  border-color: rgba(204,140,29,.28);
}

.media-preview {
  background:
    linear-gradient(135deg, rgba(204,140,29,.08), rgba(232,187,88,.12)),
    repeating-linear-gradient(45deg, #fffdf9 0, #fffdf9 10px, #fff5e4 10px, #fff5e4 20px);
}

.persona-copy em,
.tag {
  color: #9b650b;
  background: rgba(204,140,29,.09);
  border-color: rgba(204,140,29,.12);
}

/* Persona center: gallery-first commercial workflow. */
.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.persona-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.persona-capability-card {
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(204,140,29,.14);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,248,236,.62));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.72);
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}

.persona-capability-card:hover,
.persona-capability-card.active {
  border-color: rgba(204,140,29,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,244,220,.76));
}

.persona-capability-card i {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #dba348, #b97714);
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 820;
}

.persona-capability-card b {
  display: block;
  margin-top: 1px;
  font-size: 15px;
  line-height: 1.35;
}

.persona-capability-card em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
}

.persona-library-panel {
  padding: 18px;
}

.persona-library-head,
.persona-toolbar,
.persona-title-row,
.persona-card-actions,
.persona-library-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.persona-library-head {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.persona-library-head h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}

.persona-library-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.persona-library-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.persona-searchbox {
  width: min(340px, 36vw);
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.70);
  color: var(--soft);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
}

.persona-searchbox input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.persona-toolbar {
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.persona-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.persona-tabs button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  color: var(--muted);
  font-size: 13px;
  font-weight: 740;
}

.persona-tabs button.active {
  color: #9a6209;
  background: rgba(204,140,29,.12);
  border-color: rgba(204,140,29,.30);
}

.persona-sort {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.persona-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 14px;
}

.persona-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(204,140,29,.14);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,248,236,.54));
  box-shadow: 0 14px 34px rgba(105,70,17,.07);
}

.persona-card:hover {
  transform: translateY(-1px);
  border-color: rgba(204,140,29,.30);
  box-shadow: 0 18px 40px rgba(105,70,17,.10);
}

.persona-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.76), transparent 22%),
    linear-gradient(145deg, #f9e6bf, #e6b04f);
}

.persona-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0), rgba(255,255,255,.36), rgba(255,255,255,0));
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

.persona-portrait.has-media:not(.media-loaded)::before {
  opacity: .72;
  animation: persona-media-shimmer 1.2s ease-in-out infinite;
}

.persona-portrait::after {
  content: "";
  position: absolute;
  inset: auto 12% 0;
  height: 34%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(120,79,18,.16));
}

.persona-portrait.has-media::after {
  content: none;
}

.persona-portrait img,
.persona-portrait video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  background: rgba(38,30,21,.16);
}

.persona-portrait.has-media.media-loaded .persona-media-fallback {
  display: none;
}

.persona-portrait.media-failed img,
.persona-portrait.media-failed video {
  display: none;
}

.persona-portrait.media-failed .persona-media-fallback,
.persona-portrait.is-placeholder .persona-media-fallback {
  display: grid;
}

.persona-portrait.has-media:not(.media-failed) .persona-media-fallback {
  opacity: .38;
  pointer-events: none;
}

.persona-portrait.has-media:not(.media-failed) img,
.persona-portrait.has-media:not(.media-failed) video {
  z-index: 2;
}

.persona-media-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 8px;
  text-align: center;
}

.persona-fallback-label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  min-height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #9a6209;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 820;
}

@keyframes persona-media-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.persona-media-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(42,33,24,.66);
  color: #fff;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 820;
}

.persona-tone-amber { background: linear-gradient(145deg, #fff0ca, #d8982e); }
.persona-tone-cream { background: linear-gradient(145deg, #fff8e8, #d7b77b); }
.persona-tone-rose { background: linear-gradient(145deg, #fff1e7, #d98d66); }
.persona-tone-ivory { background: linear-gradient(145deg, #fffdf7, #c9ae80); }
.persona-tone-brown { background: linear-gradient(145deg, #f6dfbd, #9f6c31); }
.persona-tone-custom { background: linear-gradient(145deg, #fff5de, #c98925); }

.persona-figure {
  position: relative;
  z-index: 1;
  width: 72%;
  height: 78%;
  display: grid;
  place-items: center;
}

.persona-head {
  position: absolute;
  top: 10%;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,242,214,.80));
  color: #9a6209;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 840;
  box-shadow: 0 18px 38px rgba(105,70,17,.13);
}

.persona-neck {
  position: absolute;
  top: 45%;
  width: 16%;
  height: 18%;
  border-radius: 999px;
  background: rgba(255,245,224,.82);
}

.persona-body {
  position: absolute;
  bottom: 0;
  width: 74%;
  height: 44%;
  border-radius: 46% 46% 0 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.52), rgba(150,96,18,.18)),
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36);
}

.persona-fav {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.66);
  background: rgba(255,255,255,.70);
  color: rgba(99,65,14,.56);
  font-size: 17px;
  box-shadow: 0 8px 18px rgba(105,70,17,.10);
}

.persona-fav.active {
  color: #b97714;
  background: rgba(255,246,222,.92);
}

.persona-source {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(42,33,24,.48);
  color: #fff;
  font-size: 12px;
  font-weight: 720;
}

.persona-card-body {
  padding: 11px;
}

.persona-title-row {
  justify-content: space-between;
  gap: 8px;
}

.persona-title-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.persona-title-row span {
  color: var(--soft);
  font-size: 12px;
}

.persona-card-body p {
  min-height: 38px;
  margin: 5px 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.persona-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-bottom: 10px;
}

.persona-meta-row em {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(204,140,29,.12);
  background: rgba(204,140,29,.08);
  color: #9a6209;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.persona-card-actions {
  justify-content: space-between;
}

.persona-card-actions .btn {
  flex: 1;
}

.persona-empty {
  grid-column: 1 / -1;
  min-height: 260px;
  border: 1px dashed rgba(176,126,44,.26);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: rgba(255,255,255,.42);
  color: var(--muted);
  text-align: center;
}

.persona-empty b {
  color: var(--text);
  font-size: 16px;
}

.persona-create-modal {
  align-items: start;
  overflow: auto;
}

.persona-modal {
  width: min(1040px, calc(100vw - 28px));
  margin: 18px auto;
}

.persona-modal .modal-head {
  align-items: flex-start;
  margin-bottom: 14px;
}

.persona-modal .modal-head p {
  margin: 4px 0 0;
}

.persona-create-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: stretch;
}

.persona-asset-upload {
  min-height: 118px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,248,236,.72)),
    repeating-linear-gradient(45deg, rgba(204,140,29,.07) 0, rgba(204,140,29,.07) 8px, transparent 8px, transparent 18px);
}

.persona-save-status {
  min-height: 38px;
  align-items: center;
}

.persona-preview {
  height: 100%;
  align-content: start;
}

.persona-preview .media-preview.portrait {
  aspect-ratio: 3 / 4;
  min-height: 360px;
}

.persona-preview .media-preview.portrait img,
.persona-preview .media-preview.portrait video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-preview-tips {
  margin-top: 8px;
  display: grid;
  gap: 7px;
}

.persona-preview-tips span {
  min-height: 30px;
  padding: 7px 9px;
  border: 1px solid rgba(204,140,29,.14);
  border-radius: 8px;
  background: rgba(255,248,236,.62);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Operations admin. */
.file-btn {
  position: relative;
  overflow: hidden;
}

.file-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ops-page-head {
  align-items: flex-start;
}

.ops-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.ops-side-panel {
  position: sticky;
  top: 86px;
}

.ops-tabs {
  display: grid;
  gap: 8px;
}

.ops-tabs button {
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.52);
  color: var(--text);
  text-align: left;
}

.ops-tabs button.active {
  border-color: rgba(204,140,29,.34);
  background: rgba(204,140,29,.12);
  box-shadow: inset 3px 0 0 var(--primary);
}

.ops-tabs b {
  display: block;
  font-size: 14px;
}

.ops-tabs span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

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

.ops-env-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(204,140,29,.22);
  border-radius: var(--radius);
  background: rgba(255,244,220,.68);
  color: #6b4a1a;
  font-size: 13px;
  line-height: 1.55;
}

.ops-env-banner b {
  flex: 0 0 auto;
  color: var(--primary-2);
}

.admin-mode {
  background:
    radial-gradient(circle at 12% 0%, rgba(205,149,42,.18), transparent 28%),
    linear-gradient(180deg, #f9f5ec 0%, #eee4d4 100%);
}

.admin-mode .app-shell {
  grid-template-columns: 252px minmax(0, 1fr);
}

.admin-mode .sidebar {
  padding: 18px 14px;
  background: linear-gradient(180deg, rgba(30,24,18,.96), rgba(54,39,23,.94));
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 18px 0 58px rgba(54,39,23,.12);
}

.admin-mode .brand {
  border-bottom-color: rgba(255,255,255,.10);
  padding: 2px 4px 18px;
}

.admin-brand-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
}

.admin-brand-card i {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #e6c274, #a56e16);
  color: #19120a;
  font-style: normal;
  font-weight: 900;
}

.admin-brand-card b,
.admin-brand-card em {
  display: block;
}

.admin-brand-card b {
  color: #fff8ec;
  font-size: 15px;
}

.admin-brand-card em {
  margin-top: 2px;
  color: rgba(255,248,236,.58);
  font-size: 11px;
  font-style: normal;
}

.admin-mode .nav {
  gap: 10px;
  padding-top: 16px;
  margin-right: 0;
}

.admin-mode .nav-label {
  color: rgba(255,248,236,.44);
  font-size: 10px;
  letter-spacing: .12em;
}

.admin-mode .nav-section + .nav-section {
  border-top-color: rgba(255,255,255,.08);
}

.admin-mode .nav-item {
  height: 42px;
  color: rgba(255,248,236,.72);
  border: 1px solid transparent;
}

.admin-mode .nav-item span {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: #e9c980;
  font-size: 12px;
  font-weight: 880;
}

.admin-mode .nav-item b {
  color: inherit;
  font-size: 13px;
}

.admin-mode .nav-item.active,
.admin-mode .nav-item:hover {
  border-color: rgba(230,194,116,.26);
  background: linear-gradient(90deg, rgba(230,194,116,.20), rgba(255,255,255,.06));
  color: #fff7e8;
}

.admin-mode .nav-item.active span {
  background: linear-gradient(145deg, #f0d18a, #bd8b2d);
  color: #24170b;
}

.admin-mode .topbar {
  margin: 16px 22px 0;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: 22px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 18px 52px rgba(105,70,17,.08);
}

.admin-mode .plan-card {
  display: none;
}

.admin-mode .top-actions [data-page-jump],
.admin-mode .top-actions .btn.primary[data-page-jump] {
  display: none;
}

.admin-mode .content {
  padding: 28px 32px;
}

.admin-mode .ops-page-head {
  padding-bottom: 4px;
}

.admin-mode .ops-layout {
  grid-template-columns: minmax(0, 1fr);
}

.admin-mode .ops-side-panel {
  display: none;
}

.admin-mode .ops-tabs {
  display: none;
}

.admin-mode .ops-env-banner {
  border-color: rgba(63,45,24,.10);
  background: linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,246,226,.86));
  box-shadow: 0 16px 42px rgba(105,70,17,.07);
}

.admin-mode .panel,
.admin-mode .card,
.admin-mode .ops-form {
  border-color: rgba(176,126,44,.14);
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 48px rgba(105,70,17,.06);
}

.ops-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 14px;
  align-items: start;
}

.ops-dashboard-grid.secondary {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  margin-top: 14px;
}

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

.ops-kpi-card {
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.54);
  display: grid;
  align-content: space-between;
  gap: 6px;
  color: var(--text);
  text-align: left;
}

.ops-kpi-card:hover {
  border-color: rgba(204,140,29,.30);
  background: rgba(255,250,241,.82);
}

.ops-kpi-card span,
.ops-kpi-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ops-kpi-card b {
  font-size: 22px;
  line-height: 1.1;
}

.ops-funnel {
  display: grid;
  gap: 12px;
}

.ops-funnel button {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.ops-funnel button:hover span,
.ops-funnel button:hover b {
  color: var(--primary-2);
}

.ops-funnel i {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), rgba(232,187,88,.62));
  width: var(--w);
  min-width: 8px;
}

.ops-funnel b {
  color: var(--text);
  text-align: right;
}

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

.ops-action-center button {
  min-height: 82px;
  padding: 12px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,248,236,.58));
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.ops-action-center button:hover {
  border-color: rgba(204,140,29,.34);
  box-shadow: 0 14px 34px rgba(154,98,9,.10);
}

.ops-action-center i {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #dba348, #9a6209);
  color: #fff;
  font-style: normal;
  font-weight: 900;
}

.ops-action-center span {
  min-width: 0;
}

.ops-action-center b,
.ops-action-center em {
  display: block;
}

.ops-action-center b {
  font-size: 13px;
}

.ops-action-center em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.ops-trend-list {
  display: grid;
  gap: 11px;
}

.ops-trend-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 76px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.ops-trend-item i {
  height: 10px;
  border-radius: 999px;
  background: rgba(204,140,29,.12);
  overflow: hidden;
}

.ops-trend-item i::before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7b5519, #e6c274);
}

.ops-trend-item b {
  color: var(--text);
  text-align: right;
}

.ops-clickable-table tbody tr,
#opsTopUsersBody tr,
#opsTasksBody tr {
  cursor: pointer;
}

.ops-clickable-table tbody tr:hover td,
#opsTopUsersBody tr:hover td,
#opsTasksBody tr:hover td {
  background: rgba(255,246,229,.58);
}

.ops-table-wrap {
  width: 100%;
  overflow: auto;
}

.ops-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
}

.ops-table th {
  padding: 9px 10px;
  color: var(--soft);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.ops-table td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(176,126,44,.10);
  color: var(--text);
  vertical-align: middle;
}

.ops-table td b {
  display: block;
  font-size: 13px;
}

.ops-table td span:not(.status) {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.ops-table tr.active td {
  background: rgba(255, 246, 229, .58);
}

.ops-user-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 188px;
}

.ops-user-actions .btn.small {
  min-width: 52px;
}

.ops-alert-list {
  display: grid;
  gap: 8px;
}

.ops-alert {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.54);
}

.ops-alert b {
  display: block;
  font-size: 13px;
}

.ops-alert span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.ops-alert.warn {
  border-color: rgba(155,101,11,.25);
  background: rgba(255,243,216,.58);
}

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

.ops-plan-card {
  min-height: 190px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.54);
  display: grid;
  gap: 10px;
  color: var(--text);
  text-align: left;
}

.ops-plan-card.active {
  border-color: rgba(204,140,29,.38);
  background: rgba(204,140,29,.12);
  box-shadow: inset 3px 0 0 var(--primary);
}

.ops-plan-card b {
  display: block;
  font-size: 16px;
}

.ops-plan-card span,
.ops-plan-card p {
  color: var(--muted);
  font-size: 12px;
}

.ops-plan-card strong {
  font-size: 24px;
  line-height: 1.1;
}

.ops-plan-card strong em {
  margin-left: 2px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ops-quota-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ops-quota-list span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(204,140,29,.10);
  color: var(--primary-2);
  font-size: 12px;
  font-weight: 700;
}

.ops-section {
  display: none;
}

.ops-section.active {
  display: block;
}

.ops-editor-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.ops-plan-editor {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

.ops-module-editor {
  margin: 14px 0;
}

.ops-stacked-panels {
  display: grid;
  gap: 14px;
}

.ops-list {
  max-height: 680px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 4px;
}

.ops-list-item {
  min-height: 68px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.56);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.ops-list-item.active {
  border-color: rgba(204,140,29,.36);
  background: rgba(204,140,29,.12);
}

.ops-list-item i {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #dba348, #b97714);
  color: #fff;
  font-style: normal;
  font-size: 14px;
  font-weight: 820;
}

.ops-list-item span {
  min-width: 0;
}

.ops-list-item b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.ops-list-item em {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ops-form {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.50);
}

.ops-switch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.ops-switch-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ops-switch-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.switch-field {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.switch-field input,
.ops-plan-access-row input[type="checkbox"],
.ops-billing-rule-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.ops-plan-access-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.48);
}

.ops-plan-access-head,
.ops-plan-access-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 86px 70px;
  align-items: center;
  gap: 8px;
}

.ops-plan-access-head {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.ops-plan-access-list {
  display: grid;
  gap: 7px;
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
}

.ops-plan-access-row {
  padding: 9px;
  border: 1px solid rgba(36,30,24,.08);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.64);
}

.ops-plan-access-row span {
  min-width: 0;
}

.ops-plan-access-row b,
.ops-plan-access-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-plan-access-row b {
  color: var(--text);
  font-size: 12px;
}

.ops-plan-access-row em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.ops-plan-access-row .input {
  min-height: 34px;
  padding: 6px 8px;
}

.ops-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.ops-form-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ops-membership-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.ops-code-output {
  min-height: 78px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.48);
  color: var(--muted);
  display: grid;
  gap: 8px;
  align-content: start;
  font-size: 12px;
}

.ops-code-chip {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(204,140,29,.22);
  border-radius: var(--radius-sm);
  background: rgba(204,140,29,.10);
  color: var(--text);
  display: grid;
  gap: 3px;
  text-align: left;
}

.ops-code-chip b {
  font-size: 14px;
  letter-spacing: .04em;
}

.ops-code-chip span {
  color: var(--muted);
  font-size: 11px;
}

.ops-audio-preview {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
}

.ops-audio-preview audio {
  width: 100%;
  height: 36px;
}

.ops-audio-preview span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ops-detail-backdrop {
  z-index: 130;
  place-items: stretch end;
  padding: 0;
  background: rgba(31, 24, 18, .34);
  backdrop-filter: blur(6px);
}

.ops-detail-drawer {
  width: min(620px, 100vw);
  height: 100vh;
  height: 100dvh;
  background: #fbf8f0;
  border-left: 1px solid rgba(176,126,44,.18);
  box-shadow: -28px 0 80px rgba(54,39,23,.24);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.ops-detail-head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(176,126,44,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,248,236,.78));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ops-detail-head span {
  color: var(--primary-2);
  font-size: 11px;
  font-weight: 860;
  letter-spacing: .14em;
}

.ops-detail-head h3 {
  margin: 5px 0 4px;
  color: var(--text);
  font-size: 22px;
}

.ops-detail-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ops-detail-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
}

.ops-detail-card {
  padding: 14px;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 12px 36px rgba(105,70,17,.06);
}

.ops-detail-card h4 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 14px;
}

.ops-user-profile-hero {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.ops-user-profile-hero i {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #dba348, #8f5f12);
  color: #fff;
  font-style: normal;
  font-weight: 900;
}

.ops-user-profile-hero b,
.ops-user-profile-hero span {
  display: block;
}

.ops-user-profile-hero b {
  font-size: 16px;
}

.ops-user-profile-hero div span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

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

.ops-detail-metrics div {
  padding: 10px;
  border-radius: 14px;
  background: rgba(204,140,29,.09);
}

.ops-detail-metrics span,
.ops-detail-metrics b {
  display: block;
}

.ops-detail-metrics span {
  color: var(--muted);
  font-size: 11px;
}

.ops-detail-metrics b {
  margin-top: 4px;
  color: var(--text);
  font-size: 18px;
}

.ops-detail-fields {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.ops-detail-fields div {
  min-width: 0;
}

.ops-detail-fields dt,
.ops-detail-fields dd {
  margin: 0;
}

.ops-detail-fields dt {
  color: var(--soft);
  font-size: 11px;
  font-weight: 820;
}

.ops-detail-fields dd {
  margin-top: 3px;
  color: var(--text);
  font-size: 13px;
  word-break: break-word;
}

.ops-detail-list {
  display: grid;
  gap: 8px;
}

.ops-detail-list button,
.ops-ledger-row {
  width: 100%;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid rgba(176,126,44,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.ops-detail-list button:hover {
  border-color: rgba(204,140,29,.30);
  background: rgba(255,246,229,.72);
}

.ops-detail-list b,
.ops-detail-list em,
.ops-ledger-row b,
.ops-ledger-row em {
  display: block;
}

.ops-detail-list em,
.ops-ledger-row em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.ops-ledger-row strong.plus { color: #14763c; }
.ops-ledger-row strong.minus { color: #9c341c; }

.ops-task-detail-head {
  display: grid;
  gap: 5px;
}

.ops-task-detail-head b {
  color: var(--text);
  font-size: 17px;
}

.ops-task-detail-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ops-detail-error {
  margin: 12px 0 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(156,52,28,.08);
  color: #8d2f18;
  font-size: 12px;
  line-height: 1.5;
}

.ops-detail-actions div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ops-detail-card pre {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background: #201914;
  color: #fff4df;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.ops-detail-empty {
  padding: 12px;
  border-radius: 14px;
  background: rgba(204,140,29,.08);
  color: var(--muted);
  font-size: 12px;
}

/* Commercial SaaS workflow widgets shared across modules. */
.workflow-strip,
.creative-capability-grid,
.platform-account-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

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

.workflow-chip,
.creative-capability-card,
.platform-account {
  min-width: 0;
  border: 1px solid rgba(204,140,29,.14);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,248,236,.52));
  color: var(--text);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

.workflow-chip {
  min-height: 76px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.workflow-chip:hover,
.workflow-chip.active,
.creative-capability-card:hover,
.creative-capability-card.active,
.platform-account.active {
  border-color: rgba(204,140,29,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,244,220,.76));
}

.workflow-chip i {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #dba348, #b97714);
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 820;
}

.workflow-chip b,
.creative-capability-card b,
.platform-account b {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

.workflow-chip em,
.creative-capability-card span,
.platform-account span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
}

.mini-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.mini-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.mini-section-head b {
  font-size: 13px;
}

.mini-section-head span {
  color: var(--muted);
  font-size: 12px;
}

.compact-history {
  display: grid;
  gap: 7px;
}

.compact-history button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.58);
  color: var(--text);
  text-align: left;
}

.compact-history b,
.compact-history span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-history span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.rewrite-score-grid,
.asset-health {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

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

.rewrite-score-grid div,
.asset-health div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.55);
}

.rewrite-score-grid b,
.asset-health b {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rewrite-score-grid span,
.asset-health span {
  display: block;
  margin-top: 4px;
  color: #9a6209;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 820;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.template-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-pills button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.template-pills button:hover {
  color: #9a6209;
  border-color: rgba(204,140,29,.28);
}

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

.creative-capability-card {
  min-height: 92px;
  padding: 13px;
}

.creative-capability-card em {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  margin-top: 10px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(204,140,29,.10);
  color: #9a6209;
  font-style: normal;
  font-size: 12px;
  font-weight: 760;
}

.model-route-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  margin-top: 8px;
  padding: 0 9px;
  border: 1px solid rgba(204,140,29,.24);
  border-radius: 999px;
  background: rgba(255,244,220,.88);
  color: #8f5b08;
  font-size: 12px;
  font-weight: 840;
  line-height: 1.25;
}

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

.platform-account {
  min-height: 64px;
  padding: 10px;
}

.generated-copy {
  color: #4c3927;
}

.hot-cover {
  background: linear-gradient(135deg, #f7deb1, #e8bb58 48%, #fff8df);
  color: #9b6208;
}

.voice-item i {
  background: linear-gradient(145deg,#fff,#f4deaa);
  color: #9b650b;
}

.phone-preview {
  background: #1e1710;
  box-shadow: 0 22px 52px rgba(55,35,10,.22);
}

.phone-inner {
  background: #f5ead8;
}

.phone-caption {
  background: rgba(0,0,0,.42);
}

.table td {
  color: var(--muted);
}

.bar-list i {
  background: rgba(204,140,29,.12);
}

.modal-backdrop {
  background: rgba(42,33,24,.22);
}

.modal {
  background: #fffaf2;
  box-shadow: 0 24px 70px rgba(42,33,24,.22);
}

.icon-btn {
  background: rgba(204,140,29,.10);
  color: #9a6209;
}

.toast {
  background: rgba(42,33,24,.92);
}

.work-card {
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,248,236,.72));
}

.work-card span {
  color: #9a6209;
}

.stat span,
.status.ok,
.pill.ok {
  color: #8f6a1a;
}

.quick-action i {
  color: #fff;
}

.empty-video {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,248,236,.1));
}

.media-preview.product,
.media-preview.video-placeholder,
.media-preview.portrait,
.media-preview.poster {
  background:
    linear-gradient(135deg, rgba(204,140,29,.08), rgba(232,187,88,.12)),
    repeating-linear-gradient(45deg, #fffdf9 0, #fffdf9 10px, #fff5e4 10px, #fff5e4 20px);
}

@supports (backdrop-filter: blur(1px)) {
  .sidebar,
  .topbar,
  .panel,
  .card {
    backdrop-filter: blur(20px);
  }
}

/* Final responsive pass for components defined after the first media block. */
@media (max-width: 1240px) {
  .workflow-strip,
  .creative-capability-grid,
  .platform-account-grid,
  .persona-hero-grid,
  .avatar-studio-layout,
  .image-entry-shell,
  .image-entry-form-grid,
  .image-studio-layout,
  .image-inspiration-layout,
  .image-design-inspiration-grid,
  .image-home-recent-shelf,
  .avatar-persona-grid,
	  .voice-feature-row {
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	  }

  .avatar-studio-layout {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }

  #page-avatar .avatar-studio-layout {
    grid-template-columns: minmax(210px, 250px) minmax(380px, 1fr) minmax(280px, 320px);
  }

  #page-avatar .avatar-preview-panel {
    grid-template-columns: 1fr;
  }

  .image-design-project-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .image-entry-preview-panel {
    grid-column: 1 / -1;
  }

  .avatar-editor-panel {
    grid-column: auto;
  }

  .persona-gallery {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }

	  .ops-layout,
	  .ops-editor-grid,
	  .ops-module-editor,
	  .ops-dashboard-grid,
  .ops-dashboard-grid.secondary {
    grid-template-columns: 1fr;
  }

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

  .ops-side-panel {
    position: static;
  }

  .avatar-dual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .commerce-image-rail,
  .commerce-image-side {
    position: static;
    max-height: none;
    overflow: visible;
  }

	  .persona-library-head,
	  .image-design-library-head,
	  .avatar-step-head,
	  .avatar-step-actions,
	  .avatar-generation-actions,
	  .avatar-editor-header {
	    display: block;
	  }

  .persona-library-actions {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .persona-searchbox,
  .avatar-searchbox {
    width: 100%;
  }

  .persona-toolbar,
  .avatar-persona-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  #page-avatar .avatar-studio-layout,
  #page-avatar .avatar-preview-panel {
    display: block;
  }

  #page-avatar .avatar-preview-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .avatar-persona-picker-modal .avatar-inline-picker-toolbar,
  .avatar-history-modal .avatar-history-modal-toolbar {
    grid-template-columns: 1fr;
  }

  .avatar-persona-picker-modal .avatar-inline-persona-grid,
  .avatar-history-modal .avatar-task-history-list {
    grid-template-columns: 1fr;
  }

  #avatarTaskHistoryList {
    grid-template-columns: 1fr;
  }

  .creative-subnav {
    position: static;
    grid-template-columns: 1fr;
  }

  .image-studio-layout,
  .image-entry-shell,
  .commerce-image-tool,
  .commerce-result-workbench,
  .image-entry-form-grid,
  .image-entry-command-tools,
  .image-entry-command-actions,
  .image-selected-template-card,
  .image-reference-mode-row,
  .image-entry-live-head,
  .image-entry-live-grid,
  .image-inspiration-toolbar,
  .image-inspiration-layout,
  .image-inspiration-facts,
  .image-home-recent-shelf,
  .image-entry-preview-meta,
  .image-project-summary,
  .membership-hero-panel,
  .membership-grid,
  .membership-plan-grid,
  .image-resolution-row,
  .ops-image-resolution-price-grid,
  .ops-standard-unit-grid {
    grid-template-columns: 1fr;
  }

  .image-design-project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commerce-image-product-grid,
  .commerce-result-main-gallery,
  .commerce-result-gallery,
  .commerce-image-jobs,
  .commerce-image-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commerce-result-gallery {
    max-height: 360px;
  }

  #page-creative-commerce-image .commerce-studio-setting-grid,
  #page-creative-commerce-image .commerce-script-option-bank,
  #page-creative-commerce-image .commerce-studio-actions,
  #page-creative-commerce-image .commerce-resolution-row {
    grid-template-columns: 1fr;
  }
  .commerce-point-assist {
    grid-template-columns: 1fr;
  }

  .commerce-point-inline-assist {
    grid-template-columns: 1fr;
  }

  #page-creative-commerce-image .commerce-image-output-grid,
  #page-creative-commerce-image .commerce-script-option-grid,
  #page-creative-commerce-image .commerce-script-option-grid.compact,
  #page-creative-commerce-image .commerce-system-columns,
  #page-creative-commerce-image .commerce-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-preset-detail {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .image-preset-detail-visual {
    max-height: 46vh;
  }

  .image-preset-detail-body {
    max-height: 48vh;
    padding: 20px;
    padding-right: 46px;
  }

  .image-entry-live-preview,
  .image-entry-live-output {
    min-height: 220px;
  }

  .image-selected-template-media {
    width: 100%;
    max-width: 180px;
  }

  .image-entry-topline,
  .image-workbench-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .image-studio-control {
    max-height: none;
  }

  .avatar-side-panel,
  .avatar-preview-panel {
    position: static;
  }

		  .avatar-edit-grid,
		  .avatar-output-grid,
		  .voice-control-row,
      .voice-prosody-grid,
      .voice-advanced-grid,
		  .avatar-stage-nav {
		    grid-template-columns: 1fr;
		  }

	  .avatar-output-grid > * {
	    grid-column: 1 / -1 !important;
	  }

	  .avatar-preview-button {
	    width: 100%;
	    margin-bottom: 0;
	  }

  .avatar-editor-header .tabs {
    margin-top: 12px;
  }

  .voice-library-layout {
    display: block;
  }

  .voice-category-panel {
    position: static;
    margin-bottom: 14px;
  }

  .voice-feature-row,
  .voice-detail-meta,
  .voice-card-grid {
    grid-template-columns: 1fr;
  }

  .voice-mode-tabs {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

	  .workflow-strip,
    .workflow-guide,
	  .creative-capability-grid,
  .platform-account-grid,
  .persona-hero-grid,
  .image-design-inspiration-grid,
  .persona-gallery,
  .persona-create-grid,
  .avatar-persona-grid,
    .avatar-dual-grid,
    .rewrite-score-grid,
  .asset-health,
  .ops-two-col,
  .ops-membership-tools,
  .ops-kpi-grid,
  .ops-plan-grid,
  .membership-metric-grid,
	  .membership-cost-grid {
	    grid-template-columns: 1fr;
	  }

  .membership-balance-ring {
    width: 132px;
  }

  .image-preset-detail-meta {
    grid-template-columns: 1fr;
  }

  .commerce-result-workbench,
  .commerce-result-main-gallery,
  .commerce-result-gallery {
    grid-template-columns: 1fr;
  }

  .commerce-result-canvas {
    min-height: 260px;
  }

  .commerce-canvas-board img,
  .commerce-result-canvas img {
    max-height: 420px;
  }

  .ops-form-actions {
    justify-content: stretch;
  }

  .ops-form-actions .btn {
    flex: 1;
  }
}

@media (max-width: 640px) {
  .image-design-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-creative-commerce-image.commerce-step-input .commerce-image-tool {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .commerce-image-output-grid,
  .commerce-image-product-grid,
  #page-creative-commerce-image .commerce-studio-compact-grid,
  #page-creative-commerce-image .commerce-studio-setting-grid,
  #page-creative-commerce-image .commerce-script-option-grid,
  #page-creative-commerce-image .commerce-script-option-grid.compact,
  #page-creative-commerce-image .commerce-system-columns,
  #page-creative-commerce-image .commerce-system-grid,
  .commerce-image-jobs,
  .commerce-image-projects {
    grid-template-columns: 1fr;
  }
}

/* === Employee history side panel ======================================= */
.employee-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(201,143,53,.16);
}

.employee-section-stack,
.employee-topic-plan {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.employee-section-card,
.employee-topic-card {
  padding: 12px;
  border: 1px solid rgba(201,143,53,.2);
  border-radius: 12px;
  background: rgba(255,250,242,.7);
}

.employee-section-card h3,
.employee-topic-card b {
  margin: 0 0 8px;
  color: #2f2113;
  font-size: 15px;
}

.employee-section-card strong {
  display: block;
  margin-bottom: 8px;
  color: #8a5c16;
  font-size: 14px;
}

.employee-topic-card p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.55;
}

.employee-topic-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.employee-topic-card div {
  display: grid;
  gap: 2px;
}

.employee-topic-card dt {
  color: #8a5c16;
  font-size: 11px;
  font-weight: 820;
}

.employee-topic-card dd {
  margin: 0;
  color: #3c2a17;
  font-size: 12px;
  line-height: 1.45;
}

.employee-illustrations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.employee-illustrations img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(201,143,53,.2);
  background: #fff;
}

.employee-side-history {
  min-height: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ebe5d5;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.employee-side-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.employee-side-history-head b {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.employee-side-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.employee-side-history-empty {
  padding: 14px 12px;
  background: #fbf8f0;
  border-radius: 8px;
  font-size: 12.5px;
  color: #8a6b2a;
  text-align: center;
  line-height: 1.7;
}
.employee-history-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #ebe5d5;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.employee-history-item:hover {
  border-color: #c89432;
  background: #fff8e5;
}
.employee-history-row1 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.employee-history-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.employee-history-badge {
  flex-shrink: 0;
  font-size: 10.5px;
  padding: 2px 7px;
  background: #c89432;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
}
.employee-history-row2 {
  font-size: 11.5px;
  color: #8a6b2a;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.employee-history-meta {
  color: #8a6b2a;
}

/* === AI Tasks section on 作品库 page ================================= */
.ai-tasks-section {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #ebe5d5;
}
.ai-tasks-head { align-items: baseline; }
.ai-tasks-head h2 {
  margin: 4px 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
}
.ai-tasks-head .kicker {
  font-size: 11px;
  color: #c89432;
  letter-spacing: 2px;
}
.ai-tasks-head p {
  margin: 0;
  font-size: 13px;
  color: #6b4a22;
}
.ai-tasks-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 18px;
}
.ai-tasks-filter button {
  padding: 6px 14px;
  background: #fbf8f0;
  border: 1px solid #ebe5d5;
  border-radius: 999px;
  font-size: 12.5px;
  color: #6b4a22;
  cursor: pointer;
  transition: all 0.15s;
}
.ai-tasks-filter button:hover { background: #fff8e5; border-color: #c89432; }
.ai-tasks-filter button.active {
  background: #c89432;
  border-color: #c89432;
  color: #fff;
  font-weight: 600;
}
.ai-tasks-empty {
  padding: 32px 16px;
  background: #fbf8f0;
  border-radius: 10px;
  text-align: center;
  color: #8a6b2a;
  font-size: 13px;
}
.ai-tasks-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.ai-task-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ebe5d5;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ai-task-card:hover {
  border-color: #c89432;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200, 148, 50, 0.12);
}
.ai-task-card-cover {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #fbf8f0 0%, #fff8e5 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-task-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.ai-task-card-cover-empty span {
  color: #c89432;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 4px;
}
.ai-task-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ai-task-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-task-card-tag {
  font-size: 10.5px;
  padding: 2px 8px;
  background: #c89432;
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
}
.ai-task-card-tag.soft { background: #fbf8f0; color: #6b4a22; border: 1px solid #ebe5d5; font-weight: 500; }
.ai-task-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-task-card-deck {
  font-size: 12.5px;
  color: #6b4a22;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-task-card-meta {
  margin-top: auto;
  font-size: 11px;
  color: #8a6b2a;
  letter-spacing: 0.2px;
}

/* === Works library ===================================================== */
.works-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 16px;
}
.works-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.works-filter-tabs button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fbf8f0;
  color: #6b4a22;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.works-filter-tabs button.active {
  background: #c89432;
  border-color: #c89432;
  color: #fff;
  font-weight: 760;
}
.works-summary { color: var(--muted); font-size: 13px; white-space: nowrap; }
.video-works-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .55fr); gap: 14px; align-items: start; }
.video-work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.video-work-card {
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.78);
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-rows: 118px 68px;
}
.video-work-card:hover,
.video-work-card.active { border-color: #c89432; box-shadow: 0 8px 20px rgba(122,87,38,.10); }
.video-work-thumb { display: block; height: 118px; background: #f7f0e2; overflow: hidden; }
.video-work-thumb img,
.video-work-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-work-card-body { padding: 9px; display: grid; gap: 5px; align-content: start; min-width: 0; }
.video-work-card-top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.video-work-card-top b { flex: 1 1 auto; max-width: calc(100% - 46px); min-width: 0; color: var(--text); font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-work-card-top em {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #207044;
  font-style: normal;
  font-size: 11px;
  font-weight: 760;
}
.video-work-card-top em.running { background: #fff8df; color: #986800; }
.video-work-card-top em.failed { background: #fff1f1; color: #b42318; }
.video-work-card-body small { color: #8a6b2a; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-work-preview-panel { position: sticky; top: 18px; padding: 15px; }
.video-work-preview {
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #15120e;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.video-work-preview img,
.video-work-preview video { width: 100%; max-height: 420px; object-fit: contain; display: block; background: #15120e; }
.video-work-preview audio { width: calc(100% - 24px); }
.empty-video { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; color: #f8ead2; text-align: center; }
.empty-video b { font-size: 15px; }
.empty-video span { color: #dcc5a2; font-size: 12px; }
.video-work-detail { margin-top: 12px; display: grid; gap: 12px; }
.video-work-detail-head { display: grid; gap: 5px; }
.video-work-detail-head b { color: var(--text); font-size: 16px; }
.video-work-detail-head span { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.video-work-detail dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.video-work-detail dl div { padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbf8f0; }
.video-work-detail dt { color: var(--muted); font-size: 11px; }
.video-work-detail dd { margin: 3px 0 0; color: var(--text); font-size: 12px; font-weight: 680; overflow-wrap: anywhere; }
.video-work-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.video-work-no-file { color: var(--muted); font-size: 12px; align-self: center; }

@media (max-width: 980px) {
  .video-works-layout,
  .asset-upload-grid,
  .asset-toolbar { grid-template-columns: 1fr; }
  .works-toolbar,
  .asset-upload-actions { align-items: stretch; flex-direction: column; }
  .works-summary,
  .asset-count { white-space: normal; }
  .video-work-preview-panel { position: static; }
  .video-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .avatar-compose-workbench {
    padding: 12px;
  }

  .avatar-output-grid {
    grid-template-columns: 1fr;
  }

  .avatar-output-grid .motion-field {
    grid-template-columns: 1fr;
  }

  .avatar-compose-actions {
    grid-template-columns: 1fr;
  }

.avatar-post-video-actions,
  .avatar-generation-actions {
    display: grid;
  }
}

/* Restored commercial workbench for video editing and publishing. */
.avatar-content-draft-card {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius);
  background: rgba(255,250,242,.72);
  display: grid;
  gap: 6px;
}
.avatar-content-draft-card b,
.avatar-content-draft-card span,
.avatar-content-draft-card em {
  min-width: 0;
  overflow-wrap: anywhere;
}
.avatar-content-draft-card b {
  color: var(--text);
  font-size: 14px;
  font-weight: 860;
}
.avatar-content-draft-card span,
.avatar-content-draft-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}
.avatar-content-draft-card.empty {
  background: rgba(255,255,255,.58);
}

.video-source-upload-card {
  min-width: 0;
  overflow: hidden;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(204,140,29,.20);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,247,232,.72));
  display: grid;
  gap: 10px;
}
.video-source-upload-head {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.video-source-upload-head b {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}
.video-source-upload-head span,
.video-source-local-meta {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.video-source-upload {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-style: solid;
  background: rgba(255,255,255,.76);
}
.video-source-local-meta {
  min-height: 28px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(47,38,30,.05);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-editor-source-preview {
  width: 70px;
  height: 90px;
  overflow: hidden;
  border-radius: 10px;
  background: #221911;
  position: relative;
  flex: 0 0 auto;
}
.video-editor-source-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-editor-source-preview span {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  min-height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: #7b571e;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 850;
}
.video-editor-source-meta {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.video-editor-source-meta b,
.video-editor-source-meta span,
.video-editor-source-meta p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-editor-source-meta b {
  color: var(--text);
  font-size: 13px;
}
.video-editor-source-meta span,
.video-editor-source-meta p {
  color: var(--muted);
  font-size: 12px;
}

.video-editor-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,250,242,.70));
  box-shadow: 0 14px 34px rgba(71,48,18,.06);
}
.video-editor-console span,
.video-editor-console b {
  display: block;
}
.video-editor-console span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}
.video-editor-console b {
  margin-top: 4px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}
.video-editor-step-nav {
  display: flex;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius);
  background: rgba(255,255,255,.70);
  overflow-x: auto;
  scrollbar-width: thin;
}
.video-editor-step-nav button {
  flex: 1 0 118px;
  min-width: 118px;
  min-height: 52px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 5px);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 840;
  cursor: pointer;
}
.video-editor-step-nav button i {
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 9px;
  background: #f3eadb;
  color: #8a5605;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}
.video-editor-step-nav button.active {
  border-color: rgba(204,140,29,.24);
  background: #fff;
  color: var(--primary-2);
  box-shadow: 0 8px 20px rgba(105,70,17,.08);
}
.video-editor-step-nav button.active i {
  background: #2f261e;
  color: #fff;
}
.video-editor-step-grid,
.video-editor-layout .video-editor-step-grid {
  grid-template-columns: minmax(0, 1fr);
}
.video-editor-step-panel {
  display: none;
}
.video-editor-step-panel.active {
  display: grid;
  gap: 18px;
  animation: videoEditorPanelIn .18s ease-out both;
}
.video-editor-step-panel.avatar-tool-block {
  min-height: 260px;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,251,244,.72));
  box-shadow: 0 16px 38px rgba(71,48,18,.07);
}
.video-editor-step-panel .form-row {
  gap: 16px;
}
.video-editor-step-panel .upload,
.video-editor-step-panel .toggle-row,
.video-editor-step-panel .range-card {
  min-height: 54px;
}
.video-editor-step-panel .subtitle-control-row {
  align-items: stretch;
}

.video-editor-flow-guide {
  display: none;
}

.video-editor-simple-panel {
  display: grid;
  gap: 14px;
}

.simple-editor-intro,
.simple-editor-section {
  border: 1px solid rgba(176,126,44,.16);
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 34px rgba(71,48,18,.06);
}

.simple-editor-intro {
  padding: 13px 14px;
  border-radius: var(--radius);
  display: grid;
  gap: 4px;
}

.simple-editor-intro b {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.simple-editor-intro span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 720;
}

.simple-editor-section {
  padding: 16px;
  border-radius: 12px;
}

.simple-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.simple-section-head i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2f261e;
  color: #fffaf2;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 14px;
  font-weight: 920;
  flex: 0 0 auto;
}

.simple-section-head span,
.simple-section-head b,
.simple-section-head em {
  display: block;
  min-width: 0;
}

.simple-section-head b {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.simple-section-head em {
  margin-top: 2px;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 720;
}

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

.simple-control-grid.cover-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(180px, .95fr);
}

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

.simple-control-block h3 {
  margin: 0;
  color: #6f4a16;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}

.hidden-editor-defaults,
.hidden-editor-select {
  display: none !important;
}

.cover-preview-box {
  min-height: 320px;
  border: 1px dashed rgba(176,126,44,.32);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,250,242,.82), rgba(255,255,255,.76));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  overflow: visible;
}

.cover-preview-box b {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.cover-preview-box span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 720;
}

.cover-preview-image {
  width: min(100%, 240px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.cover-preview-image img {
  width: 100%;
  height: auto;
  max-height: min(420px, 62vh);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(47,38,30,.16);
}

.cover-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cover-action-row .btn {
  min-height: 44px;
  justify-content: center;
}

.cover-action-row .btn span {
  margin-left: 6px;
  font-size: 11px;
  opacity: .78;
  font-weight: 760;
}

.subtitle-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-start;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.subtitle-auto-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #9a6209;
}

.inline-font-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.inline-font-preview button {
  min-height: 34px;
  padding: 5px 6px;
  border: 1px solid rgba(176,126,44,.22);
  border-radius: 8px;
  background: #fffaf2;
  color: #322317;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.inline-font-preview.title-font-preview button {
  min-height: 38px;
  font-size: 14px;
}

.inline-font-preview button.active {
  border-color: rgba(152,95,12,.62);
  background: #2f2418;
  color: #fff8e8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.video-editor-quick-panel,
.video-editor-job-dock {
  padding: 14px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(71,48,18,.06);
}

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

.video-editor-quick-head b,
.quick-edit-card label {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.video-editor-quick-head span,
.quick-edit-card > span,
.quick-broll-count {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 720;
}

.field.is-soft-disabled label::after {
  content: " 自动模式会按文案动态调整";
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.broll-material-panel,
.broll-plan-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.broll-material-head,
.broll-plan-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.broll-material-head b,
.broll-plan-head b {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.broll-material-head span,
.broll-plan-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.broll-material-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  max-height: 186px;
  overflow: auto;
  padding-right: 2px;
}

.broll-material-chip {
  min-width: 0;
  border: 1px solid rgba(176,126,44,.16);
  border-radius: 10px;
  background: rgba(255,253,249,.82);
  padding: 7px;
  display: grid;
  gap: 5px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

.broll-material-chip.active {
  border-color: rgba(155,95,18,.64);
  background: #fff2d4;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.82);
}

.broll-material-chip > span {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: #2f271f;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.74);
  font-size: 11px;
  font-weight: 850;
}

.broll-material-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.broll-material-chip b,
.broll-material-chip em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broll-material-chip b {
  font-size: 11px;
  font-weight: 900;
}

.broll-material-chip em {
  color: #9b6416;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.broll-material-empty,
.broll-plan-empty {
  padding: 10px 12px;
  border: 1px dashed rgba(176,126,44,.24);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255,253,249,.62);
  font-size: 11px;
  font-weight: 760;
}

.broll-plan-preview {
  padding: 10px;
  border: 1px solid rgba(176,126,44,.14);
  border-radius: 10px;
  background: rgba(255,253,249,.70);
}

.broll-plan-row {
  display: grid;
  grid-template-columns: 22px minmax(0, .95fr) minmax(92px, 1.05fr);
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid rgba(176,126,44,.12);
}

.broll-plan-row:first-of-type {
  border-top: 0;
}

.broll-plan-row i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #2f261e;
  color: #fff5df;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.broll-plan-row span,
.broll-plan-row small {
  min-width: 0;
}

.broll-plan-row b,
.broll-plan-row em,
.broll-plan-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broll-plan-row b {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.broll-plan-row em,
.broll-plan-row small {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
}

.video-editor-quick-grid {
  display: grid;
  grid-template-columns: minmax(220px, .82fr) minmax(0, 1.35fr);
  gap: 12px;
}

.quick-edit-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(176,126,44,.14);
  border-radius: 10px;
  background: rgba(255,253,249,.76);
  display: grid;
  gap: 9px;
}

.quick-music-card,
.quick-broll-layout-card {
  grid-column: 2;
}

.quick-music-card {
  grid-row: span 2;
}

.music-preset-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  max-height: 292px;
  overflow: auto;
  padding-right: 2px;
}

.music-preset-grid.built-in-music-library {
  margin: 2px 0 10px;
  scrollbar-width: thin;
}

.music-preset-grid.compact .music-preset-card {
  min-height: 112px;
}

.music-preset-grid.compact .music-wave {
  height: 24px;
}

.avatar-music-preview.compact {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  gap: 8px;
  align-items: center;
}

.avatar-music-preview.compact span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.avatar-music-preview.compact audio {
  width: 100%;
  height: 34px;
}

.broll-layout-grid.compact {
  grid-template-columns: repeat(3, minmax(86px, 1fr));
}

.broll-layout-grid.compact .broll-layout-card {
  min-height: 190px;
  padding: 8px;
}

.broll-layout-grid.compact .broll-demo {
  width: min(82px, 100%);
}

.video-editor-advanced-controls {
  display: none;
  gap: 12px;
}

.video-editor-advanced-controls.open {
  display: grid;
}

.video-editor-job-dock .video-editor-job-panel {
  margin: 0;
}
@keyframes videoEditorPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.video-editor-advanced-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.advanced-editor-card {
  padding: 12px;
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(47,38,30,.94), rgba(103,70,24,.9));
  color: #fffaf2;
  display: grid;
  gap: 5px;
  box-shadow: 0 14px 30px rgba(47,38,30,.14);
}
.advanced-editor-card b {
  font-size: 14px;
}
.advanced-editor-card span {
  color: rgba(255,250,242,.76);
  font-size: 12px;
  line-height: 1.5;
}
.advanced-editor-frame {
  border: 1px solid rgba(176,126,44,.18);
  border-radius: var(--radius);
  overflow: hidden;
  background: #211911;
  min-height: 520px;
}
.advanced-editor-frame-head {
  height: 48px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fffaf2;
}
.advanced-editor-frame iframe {
  width: 100%;
  min-height: 640px;
  border: 0;
  background: #111;
}
.video-editor-legacy-timeline {
  display: none;
}

.video-editor-live-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.video-editor-filter-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.video-editor-live-layer.filter-warm .video-editor-filter-overlay {
  background: rgba(229, 146, 67, .18);
  mix-blend-mode: soft-light;
}
.video-editor-live-layer.filter-cool .video-editor-filter-overlay {
  background: rgba(76, 124, 156, .18);
  mix-blend-mode: soft-light;
}
.video-editor-live-layer.filter-contrast .video-editor-filter-overlay {
  background: rgba(255, 218, 99, .10);
  backdrop-filter: contrast(1.12) saturate(1.14);
}
.video-editor-live-layer.filter-soft .video-editor-filter-overlay {
  background: rgba(255, 214, 214, .16);
  backdrop-filter: saturate(.92) brightness(1.04);
}
.video-editor-live-layer.filter-story .video-editor-filter-overlay {
  background: rgba(33, 26, 21, .18);
  backdrop-filter: contrast(1.04) saturate(.86);
}
.video-editor-title-overlay {
  position: absolute;
  left: 18px;
  right: 18px;
  top: var(--title-preview-margin, 5.2%);
  min-height: 19%;
  padding: 0;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: start center;
  text-align: center;
  font-family: var(--title-preview-font, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif);
  z-index: 6;
}
.video-editor-title-overlay b {
  max-width: 94%;
  font-size: calc(var(--title-preview-size, 28px) * .92);
  line-height: 1.12;
  font-weight: 900;
  text-shadow:
    0 2px 12px rgba(0,0,0,.62),
    1px 1px 0 rgba(0,0,0,.55),
    -1px 1px 0 rgba(0,0,0,.55);
}
.video-editor-title-overlay.font-title-viral b {
  padding: 5px 10px;
  color: #fff7df;
  text-shadow:
    0 3px 0 rgba(39,31,24,.86),
    0 8px 20px rgba(0,0,0,.46);
  -webkit-text-stroke: 1px rgba(55,36,18,.72);
}
.video-editor-title-overlay.font-title-gold b {
  padding: 7px 12px;
  color: #ffde84;
  background: linear-gradient(135deg, rgba(35,24,15,.84), rgba(100,65,20,.76));
  border: 1px solid rgba(255,218,130,.54);
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.video-editor-title-overlay.font-title-hand b {
  color: #fff;
  transform: rotate(-1.5deg);
  text-shadow:
    0 3px 0 rgba(248,130,43,.86),
    0 9px 18px rgba(0,0,0,.38);
}
.video-editor-title-overlay.font-title-serif b {
  color: #fffdf5;
  font-weight: 900;
  text-shadow:
    0 2px 16px rgba(0,0,0,.62),
    0 0 1px rgba(255,255,255,.88);
}
.video-editor-title-overlay.font-title-rounded b {
  padding: 6px 12px;
  color: #273019;
  background: rgba(255,232,138,.92);
  border-radius: 8px;
  text-shadow: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.video-editor-title-overlay.font-title-tech b {
  color: #e7f5ff;
  text-shadow:
    0 0 10px rgba(63,185,255,.48),
    0 3px 12px rgba(0,0,0,.65);
  -webkit-text-stroke: 1px rgba(9,40,63,.72);
}
.video-editor-title-overlay.font-title-minimal b {
  padding: 6px 10px;
  color: #fff;
  border-bottom: 3px solid rgba(255,211,106,.92);
  text-shadow: 0 3px 16px rgba(0,0,0,.62);
}
.video-editor-title-overlay.font-title-bubble b {
  padding: 8px 14px;
  color: #ff70a0;
  background: rgba(255,244,156,.94);
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255,126,173,.86), 0 12px 26px rgba(0,0,0,.22);
  text-shadow: 0 2px 0 rgba(255,255,255,.9);
}
.video-editor-title-overlay.font-title-crayon b {
  padding: 8px 13px;
  color: #3674d6;
  background: rgba(255,247,220,.86);
  border-radius: 10px;
  text-shadow: 2px 2px 0 #fff08f, -1px 1px 0 #ff8474, 0 8px 16px rgba(0,0,0,.18);
}
.video-editor-title-overlay.font-title-sticker b {
  padding: 9px 13px;
  color: #483730;
  background: #fffff9;
  border-radius: 12px;
  box-shadow: 5px 6px 0 rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,195,76,.82);
  text-shadow: none;
}
.video-editor-title-overlay.title-hero {
  top: var(--title-preview-margin, 28%);
  min-height: 24%;
  place-items: center;
}
.video-editor-title-overlay.title-brand b {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.54);
  border-radius: 8px;
  background: rgba(20,18,15,.22);
}
.video-editor-title-overlay.title-vertical {
  inset: 70px auto auto 18px;
  width: 52px;
  min-height: 48%;
  writing-mode: vertical-rl;
  place-items: start center;
}
.video-editor-title-overlay.title-vertical b {
  max-height: 78%;
  font-size: min(calc(var(--title-preview-size, 28px) * .92), 34px);
}
.video-editor-title-overlay.title-lower {
  top: auto;
  bottom: var(--title-preview-margin, 17%);
  min-height: auto;
}
.video-editor-title-overlay.title-lower b {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(15,15,15,.58);
}
.video-editor-title-overlay.title-cover {
  top: var(--title-preview-margin, 58px);
}
.video-editor-title-overlay.is-center {
  top: var(--title-preview-margin, 28%);
  min-height: 24%;
  place-items: center;
}
.video-editor-title-overlay.is-lower {
  top: auto;
  bottom: var(--title-preview-margin, 17%);
  min-height: auto;
}
.video-editor-title-overlay.is-top {
  top: var(--title-preview-margin, 5.2%);
}
.video-editor-title-overlay.title-cover b {
  color: #ffe2a3;
  font-size: min(calc(var(--title-preview-size, 28px) * .92), 54px);
}
.video-editor-title-overlay.title-bubble,
.video-editor-title-overlay.title-crayon,
.video-editor-title-overlay.title-sticker {
  top: var(--title-preview-margin, 10.5%);
  min-height: 16%;
  place-items: start center;
}
.video-editor-title-overlay span {
  display: none;
}
.avatar-music-preview {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  gap: 8px 10px;
  align-items: center;
  margin: 8px 0 12px;
}
.avatar-music-preview audio {
  width: 100%;
  height: 32px;
}
.avatar-music-preview span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}
.video-editor-subtitle-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: var(--subtitle-preview-margin, 62px);
  max-width: calc(100% - 32px);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(25,19,13,.78);
  color: var(--subtitle-preview-color, #fff);
  font-family: var(--subtitle-preview-font, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif);
  text-align: center;
  font-size: calc(var(--subtitle-preview-size, 16px) * .96);
  line-height: 1.16;
  font-weight: var(--subtitle-preview-weight, 850);
  text-shadow: 0 1px 4px rgba(0,0,0,.42);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  box-sizing: border-box;
  z-index: 8;
}
.video-editor-subtitle-overlay.is-top {
  top: var(--subtitle-preview-margin, 78px);
  bottom: auto;
}
.video-editor-subtitle-overlay.is-center {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.video-editor-subtitle-overlay.is-center.style-pop {
  transform: translateY(-50%) rotate(-1deg);
}
.video-editor-subtitle-overlay.is-lower {
  bottom: var(--subtitle-preview-margin, 26px);
}
.video-editor-subtitle-overlay.style-brand {
  background: rgba(230, 158, 37, .92);
  color: var(--subtitle-preview-color, #271f18);
  text-shadow: none;
}
.video-editor-subtitle-overlay.style-note {
  background: rgba(255, 250, 232, .94);
  color: var(--subtitle-preview-color, #332820);
  text-shadow: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}
.video-editor-subtitle-overlay.style-pop {
  left: 26px;
  right: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(244,63,94,.92), rgba(251,191,36,.92));
  color: #fff;
  transform: rotate(-1deg);
  box-shadow: 0 12px 24px rgba(244,63,94,.18);
}
.video-editor-subtitle-overlay.style-clean {
  left: 22px;
  right: 22px;
  border-left: 5px solid #55a39a;
  border-radius: 8px;
  background: rgba(247,250,252,.92);
  color: var(--subtitle-preview-color, #17202b);
  text-shadow: none;
}
.video-editor-subtitle-overlay.style-plain,
.video-editor-subtitle-overlay.no-backdrop {
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  text-shadow:
    0 2px 8px rgba(0,0,0,.82),
    1px 1px 0 rgba(0,0,0,.74),
    -1px 1px 0 rgba(0,0,0,.74);
}
#avatarTitleDurationRow.is-disabled {
  opacity: .52;
}
.video-editor-broll-overlay {
  position: absolute;
  z-index: 4;
  right: 16px;
  top: 32%;
  width: 35%;
  aspect-ratio: 9 / 16;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(240,178,62,.76), rgba(80,52,13,.76)), repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,.14) 8px 16px);
  display: none;
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
}
.video-editor-live-layer.show-broll .video-editor-broll-overlay {
  display: grid;
}
.video-editor-broll-empty {
  position: absolute;
  z-index: 7;
  inset: auto 22px 94px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(25, 19, 13, .78);
  color: #fff;
  display: grid;
  gap: 4px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.video-editor-broll-empty b {
  font-size: 15px;
  font-weight: 900;
}
.video-editor-broll-empty span {
  color: rgba(255,255,255,.76);
  font-size: 12px;
  line-height: 1.35;
}
.video-editor-music-overlay {
  position: absolute;
  z-index: 7;
  left: 16px;
  right: 16px;
  bottom: 76px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(23, 20, 17, .76);
  color: #fffaf2;
  display: grid;
  align-content: center;
  gap: 3px;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.video-editor-music-overlay b,
.video-editor-music-overlay span {
  display: block;
}
.video-editor-music-overlay b {
  font-size: 13px;
  font-weight: 900;
}
.video-editor-music-overlay span {
  color: rgba(255,250,242,.78);
  font-size: 11px;
  font-weight: 760;
}
.live-cover-preview {
  position: absolute;
  z-index: 6;
  left: 14px;
  right: 14px;
  top: 52px;
  min-height: 92px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(20, 18, 15, .78), rgba(20, 18, 15, .22));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}
.live-cover-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.live-cover-copy span {
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 760;
}
.live-cover-copy b {
  max-width: 92%;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 930;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.live-cover-copy em {
  color: rgba(255,255,255,.82);
  font-style: normal;
  font-size: 11px;
  font-weight: 760;
}
.live-cover-points {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.live-cover-points i {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: #6d4d1c;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 10px;
  font-weight: 850;
}
.live-cover-points strong {
  color: #c98612;
  font-size: 10px;
}
.live-broll-fullscreen {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #17110c;
}
.live-broll-fullscreen img,
.live-broll-fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-broll-fullscreen > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
  color: rgba(255,255,255,.78);
  text-align: center;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px);
}
.live-broll-status {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 18px;
  z-index: 2;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(18, 15, 12, .74);
  color: #fff;
  display: grid;
  align-content: center;
  gap: 2px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.live-broll-status b,
.live-broll-status span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-broll-status b {
  font-size: 12px;
  font-weight: 900;
}
.live-broll-status span {
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 760;
}
.live-pip.circle-talk-pip {
  position: absolute;
  z-index: 5;
  width: 34%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: #111;
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.live-pip.circle-talk-pip video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 18%;
}
.live-pip.pip-left-top {
  left: 16px;
  top: 18px;
}
.live-pip.pip-right-bottom {
  right: 16px;
  bottom: 22px;
}

.publish-page-head {
  margin-bottom: 12px;
}
.publish-workbench-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, auto);
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(132, 92, 38, .12);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,250,240,.72));
  box-shadow: 0 18px 48px rgba(64, 42, 21, .07);
}
.publish-workbench-nav,
.publish-account-mode-tabs,
.publish-account-tabs,
.publish-type-tabs,
.publish-form-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.publish-workbench-nav button,
.publish-account-mode-tabs button,
.publish-account-tabs button,
.publish-type-tabs button,
.publish-form-tabs button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.66);
  color: var(--muted);
  font-weight: 780;
  cursor: pointer;
}
.publish-workbench-nav button.active,
.publish-account-mode-tabs button.active,
.publish-account-tabs button.active,
.publish-type-tabs button.active,
.publish-form-tabs button.active {
  color: var(--surface-solid);
  border-color: rgba(154,98,9,.42);
  background: #9a6209;
}
.publish-workbench-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 8px;
}
.publish-workbench-status div {
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.68);
}
.publish-workbench-status span,
.publish-workbench-status b {
  display: block;
}
.publish-workbench-status span {
  color: var(--muted);
  font-size: 11px;
}
.publish-workbench-status b {
  margin-top: 2px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}
.publish-dashboard-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.publish-dashboard-steps article {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(132, 92, 38, .12);
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  box-shadow: 0 12px 30px rgba(64, 42, 21, .05);
}
.publish-dashboard-steps b {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #2f261e;
  color: #fffaf2;
  display: grid;
  place-items: center;
  font-size: 12px;
}
.publish-dashboard-steps span {
  color: var(--text);
  font-weight: 900;
}
.publish-dashboard-steps em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
}
.publish-yxe-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr);
  grid-template-areas:
    "builder accounts"
    "records records";
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.publish-yxe-layout.accounts-collapsed {
  grid-template-columns: minmax(0, 1fr);
}
.publish-yxe-layout.accounts-collapsed .publish-account-center {
  display: none;
}
.publish-account-center,
.publish-task-builder,
.publish-record-panel {
  min-width: 0;
}
.publish-account-center {
  grid-area: accounts;
  position: relative;
  z-index: 2;
  padding: 18px;
  overflow: hidden;
}
.publish-task-builder {
  grid-area: builder;
  position: relative;
  z-index: 1;
}
.publish-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.05fr);
  gap: 16px;
}
.publish-builder-main,
.publish-builder-form {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}
.publish-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}
.publish-step-title b {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #2f261e;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
}
.publish-task-mode-grid {
  display: grid;
  gap: 8px;
}
.publish-radio-card,
.publish-check-row {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.66);
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  cursor: pointer;
}
.publish-radio-card span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.publish-radio-card b,
.publish-radio-card em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.publish-radio-card em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}
.publish-account-toolbar,
.publish-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.publish-account-list-head,
.publish-yxe-account {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(86px, .6fr) minmax(0, 1.1fr) auto;
  gap: 10px;
  align-items: center;
}
.publish-account-list-head {
  margin: 12px 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}
.publish-yxe-account {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.66);
}
.publish-yxe-account.active {
  border-color: rgba(67,145,95,.28);
  background: rgba(239,250,243,.86);
}
.publish-yxe-account.needs-helper,
.publish-yxe-account.needs-config {
  border-color: rgba(204,140,29,.26);
  background: rgba(255,248,236,.86);
}
.publish-yxe-account-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.publish-yxe-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #2f261e;
  color: #fffaf2;
  display: grid;
  place-items: center;
  font-weight: 820;
}
.publish-yxe-account-head b,
.publish-yxe-account-head em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.publish-yxe-account-head b {
  color: var(--text);
  font-size: 13px;
}
.publish-yxe-account-head em {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.publish-yxe-status {
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(204,140,29,.13);
  color: var(--primary-2);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
}
.publish-yxe-account.active .publish-yxe-status {
  background: rgba(67,145,95,.13);
  color: #3f8157;
}
.publish-yxe-line {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.publish-yxe-line span,
.publish-yxe-line em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.publish-yxe-line span {
  color: var(--text);
  font-size: 11px;
}
.publish-yxe-line em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.publish-platform-select-head,
.publish-advanced-head,
.publish-builder-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.publish-platform-select-head b,
.publish-platform-select-head span {
  display: block;
}
.publish-platform-select-head span {
  color: var(--muted);
  font-size: 12px;
}
.publish-form-panel {
  display: none;
}
.publish-form-panel.active {
  display: grid;
  gap: 12px;
}
.publish-record-panel {
  grid-area: records;
  margin-top: 0;
}
.publish-task-row td {
  vertical-align: top;
  background: rgba(255,255,255,.72);
  border-top: 10px solid var(--surface);
}
.publish-task-main-cell {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.publish-table-video {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}
.publish-table-video img {
  width: 58px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  background: #ece6db;
}
.publish-table-video div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.publish-table-video em,
.publish-time-chip {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 760;
}
.publish-time-chip {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(47, 38, 30, .07);
}

@media (max-width: 1240px) {
  .publish-workbench-shell {
    grid-template-columns: 1fr;
  }
  .publish-yxe-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "builder"
      "accounts"
      "records";
  }
  .publish-yxe-account {
    grid-template-columns: minmax(0, 1fr);
  }
  .publish-yxe-account-head,
  .publish-yxe-status,
  .publish-yxe-line,
  .platform-account-actions {
    grid-column: 1 / -1;
  }
}
@media (max-width: 980px) {
  .publish-yxe-layout,
  .publish-dashboard-steps,
  .publish-builder-grid,
  .video-editor-console,
  .video-editor-quick-head,
  .publish-account-toolbar,
  .publish-options-grid {
    grid-template-columns: 1fr;
  }
  .publish-workbench-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .video-editor-quick-head .btn {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .video-editor-step-nav {
    display: flex;
  }
  .publish-workbench-status {
    grid-template-columns: 1fr;
  }
  .publish-workbench-nav,
  .publish-account-mode-tabs,
  .publish-account-tabs,
  .publish-type-tabs,
  .publish-form-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* Image design studio refresh */
#page-creative-image {
  --image-studio-bg: #f6f8f7;
  --image-studio-surface: #ffffff;
  --image-studio-panel: #fbfcfb;
  --image-studio-line: #dde7e1;
  --image-studio-line-strong: #c9d8cf;
  --image-studio-text: #1f2b28;
  --image-studio-muted: #65736d;
  --image-studio-soft: #eff4f1;
  --image-studio-accent: #d7664f;
  --image-studio-accent-2: #247960;
  --image-studio-shadow: 0 18px 44px rgba(31, 43, 40, .08);
  max-width: 1480px;
  margin: 0 auto;
  color: var(--image-studio-text);
}

#page-creative-image .page-head {
  align-items: center;
  margin-bottom: 12px;
  padding: 4px 2px 16px;
  border-bottom: 1px solid var(--image-studio-line);
}

#page-creative-image .page-head h1 {
  font-size: 30px;
  letter-spacing: 0;
}

#page-creative-image .page-head p {
  max-width: 720px;
  color: var(--image-studio-muted);
  font-size: 13px;
}

#page-creative-image .kicker {
  color: var(--image-studio-accent-2);
  letter-spacing: .12em;
}

#page-creative-image .btn {
  min-height: 38px;
  border-color: var(--image-studio-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--image-studio-text);
  box-shadow: none;
}

#page-creative-image .btn:hover {
  border-color: #aebfb5;
  background: #f8fbf9;
}

#page-creative-image .btn.primary {
  border-color: var(--image-studio-text);
  background: var(--image-studio-text);
  color: #fff;
  box-shadow: 0 12px 26px rgba(31, 43, 40, .16);
}

#page-creative-image .btn.primary:hover {
  background: #17221f;
}

#page-creative-image .creative-subnav {
  position: sticky;
  top: 76px;
  width: fit-content;
  grid-template-columns: repeat(2, minmax(138px, 1fr));
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-color: var(--image-studio-line);
  border-radius: 999px;
  background: rgba(239, 244, 241, .92);
  box-shadow: none;
}

#page-creative-image .creative-subnav button {
  min-height: 42px;
  gap: 8px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--image-studio-muted);
}

#page-creative-image .creative-subnav button:hover,
#page-creative-image .creative-subnav button.active {
  background: #fff;
  color: var(--image-studio-text);
  box-shadow: 0 7px 18px rgba(31, 43, 40, .08);
}

#page-creative-image .creative-subnav i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--image-studio-soft);
  color: var(--image-studio-accent-2);
  font-size: 12px;
}

#page-creative-image .creative-subnav b {
  font-size: 12px;
}

#page-creative-image .creative-subnav em {
  display: none;
}

#page-creative-image .image-entry-shell {
  display: block;
}

#page-creative-image .image-entry-composer {
  gap: 20px;
  margin-bottom: 18px;
  padding: 24px;
  overflow: visible;
  border: 1px solid var(--image-studio-line);
  border-radius: 18px;
  background: var(--image-studio-surface);
  box-shadow: var(--image-studio-shadow);
}

#page-creative-image .image-entry-studio-head {
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--image-studio-line);
}

#page-creative-image .image-entry-studio-head h2 {
  font-size: 25px;
  letter-spacing: 0;
}

#page-creative-image .image-entry-studio-head p {
  max-width: 620px;
  color: var(--image-studio-muted);
}

#page-creative-image .image-entry-service {
  min-width: 218px;
  margin-top: 0;
  padding: 11px 13px;
  border: 1px solid var(--image-studio-line);
  border-radius: 12px;
  background: var(--image-studio-panel);
  box-shadow: none;
}

#page-creative-image .image-entry-service.ok {
  border-color: rgba(36, 121, 96, .22);
  background: #f2f8f5;
}

#page-creative-image .image-entry-service b {
  color: var(--image-studio-text);
}

#page-creative-image .image-entry-service span {
  color: var(--image-studio-muted);
}

#page-creative-image .image-entry-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  grid-template-areas:
    "template template"
    "prompt tools"
    "refs tools"
    "live live";
  gap: 16px 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#page-creative-image .image-selected-template-card {
  grid-area: template;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  padding: 10px;
  border-color: rgba(36, 121, 96, .20);
  border-radius: 14px;
  background: #f3faf6;
  box-shadow: none;
}

#page-creative-image .image-selected-template-media {
  width: 84px;
  border-radius: 10px;
}

#page-creative-image .image-selected-template-body span {
  color: var(--image-studio-accent-2);
}

#page-creative-image .image-entry-main-field {
  grid-area: prompt;
  min-width: 0;
  margin: 0;
}

#page-creative-image .image-entry-main-field label {
  color: var(--image-studio-text);
  font-size: 13px;
}

#page-creative-image .image-entry-main-field small {
  color: var(--image-studio-muted);
}

#page-creative-image .image-entry-textarea {
  min-height: 250px;
  padding: 16px;
  border-color: var(--image-studio-line-strong);
  border-radius: 14px;
  background: #fbfcfb;
  color: var(--image-studio-text);
  font-size: 15px;
  line-height: 1.7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

#page-creative-image .image-entry-textarea:focus,
#page-creative-image .input:focus,
#page-creative-image .textarea:focus,
#page-creative-image .select:focus {
  border-color: rgba(36, 121, 96, .42);
  box-shadow: 0 0 0 3px rgba(36, 121, 96, .10);
}

#page-creative-image .image-entry-command-tools {
  grid-area: tools;
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--image-studio-line);
  border-radius: 16px;
  background: var(--image-studio-panel);
}

#page-creative-image .image-entry-tool-card,
#page-creative-image .image-entry-tool-card.compact {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#page-creative-image .image-entry-card-head {
  margin-bottom: 8px;
}

#page-creative-image .image-entry-card-head b {
  color: var(--image-studio-text);
  font-size: 12px;
}

#page-creative-image .image-entry-card-head span {
  color: var(--image-studio-muted);
  font-size: 11px;
}

#page-creative-image .image-entry-upload,
#page-creative-image .image-entry-reference-picker {
  min-height: 88px;
  place-items: stretch;
  align-content: center;
  padding: 14px;
  border: 1px dashed #b8c8bf;
  border-radius: 14px;
  background: #fff;
  text-align: left;
}

#page-creative-image .image-entry-upload:hover,
#page-creative-image .image-entry-reference-picker:hover {
  border-color: var(--image-studio-accent-2);
  background: #f7fbf9;
}

#page-creative-image .image-entry-reference-picker strong {
  color: var(--image-studio-text);
  font-size: 13px;
}

#page-creative-image .image-entry-reference-picker span {
  color: var(--image-studio-muted);
  line-height: 1.45;
}

#page-creative-image .image-entry-size-row,
#page-creative-image .image-resolution-row {
  gap: 7px;
}

#page-creative-image .image-entry-size-row button,
#page-creative-image .image-resolution-row button,
#page-creative-image .image-option-grid button,
#page-creative-image .image-style-grid button,
#page-creative-image .image-reference-mode-row button {
  border-color: var(--image-studio-line);
  border-radius: 10px;
  background: #fff;
  color: var(--image-studio-muted);
  box-shadow: none;
}

#page-creative-image .image-entry-size-row button {
  min-height: 54px;
}

#page-creative-image .image-resolution-row button {
  min-height: 68px;
}

#page-creative-image .image-entry-size-row button:hover,
#page-creative-image .image-entry-size-row button.active,
#page-creative-image .image-resolution-row button:hover,
#page-creative-image .image-resolution-row button.active,
#page-creative-image .image-option-grid button:hover,
#page-creative-image .image-option-grid button.active,
#page-creative-image .image-style-grid button:hover,
#page-creative-image .image-style-grid button.active,
#page-creative-image .image-reference-mode-row button:hover,
#page-creative-image .image-reference-mode-row button.active {
  border-color: rgba(36, 121, 96, .34);
  background: #eef7f3;
  color: var(--image-studio-accent-2);
}

#page-creative-image .image-entry-size-row button.active,
#page-creative-image .image-resolution-row button.active {
  border-color: var(--image-studio-text);
  background: var(--image-studio-text);
  color: #fff;
}

#page-creative-image .image-entry-size-row button.active b,
#page-creative-image .image-entry-size-row button.active span,
#page-creative-image .image-resolution-row button.active b,
#page-creative-image .image-resolution-row button.active span,
#page-creative-image .image-resolution-row button.active em,
#page-creative-image .image-resolution-row button.active small {
  color: #fff;
}

#page-creative-image .image-resolution-row b {
  font-size: 14px;
}

#page-creative-image .image-resolution-row em {
  color: var(--image-studio-accent);
}

#page-creative-image .image-entry-command-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  align-self: stretch;
}

#page-creative-image .image-entry-command-actions .btn {
  min-height: 42px;
  padding-inline: 8px;
}

#page-creative-image .image-entry-command-actions .btn.primary {
  grid-column: 1 / -1;
  min-height: 48px;
}

#page-creative-image .image-reference-list.compact {
  grid-area: refs;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#page-creative-image .image-entry-live-workspace {
  grid-area: live;
  gap: 14px;
  padding: 16px;
  border-color: var(--image-studio-line);
  border-radius: 16px;
  background: #f8faf9;
  box-shadow: none;
}

#page-creative-image .image-entry-live-workspace.is-loading {
  border-color: rgba(215, 102, 79, .28);
  background: #fff8f5;
}

#page-creative-image .image-entry-live-workspace.has-result {
  border-color: rgba(36, 121, 96, .24);
  background: #f3faf6;
}

#page-creative-image .image-entry-live-head span {
  background: rgba(36, 121, 96, .10);
  color: var(--image-studio-accent-2);
}

#page-creative-image .image-entry-live-head b {
  color: var(--image-studio-text);
}

#page-creative-image .image-entry-live-head small {
  color: var(--image-studio-muted);
}

#page-creative-image .api-status,
#page-creative-image .api-status.inline {
  border-color: var(--image-studio-line);
  background: #fff;
  color: var(--image-studio-muted);
}

#page-creative-image .api-status.ok,
#page-creative-image .api-status.inline.ok {
  border-color: rgba(36, 121, 96, .22);
  background: #eef8f3;
  color: var(--image-studio-accent-2);
}

#page-creative-image .api-status.loading,
#page-creative-image .api-status.inline.loading {
  border-color: rgba(215, 102, 79, .24);
  background: #fff3ef;
  color: #aa4a36;
}

#page-creative-image .image-entry-live-preview,
#page-creative-image .image-design-canvas-preview {
  border-color: var(--image-studio-line);
  background-color: #fff;
}

#page-creative-image .image-entry-live-output,
#page-creative-image .image-design-output,
#page-creative-image .generated-copy {
  border-color: var(--image-studio-line);
  background: #fff;
  color: var(--image-studio-text);
}

#page-creative-image .image-entry-recent {
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#page-creative-image .image-entry-section-head {
  padding: 0 2px;
}

#page-creative-image .image-entry-section-head h3 {
  color: var(--image-studio-text);
  font-size: 17px;
}

#page-creative-image .image-home-recent-shelf {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

#page-creative-image .image-gallery-card,
#page-creative-image .image-home-recent-shelf > button {
  border-color: var(--image-studio-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 43, 40, .06);
}

#page-creative-image .image-gallery-thumb img,
#page-creative-image .image-gallery-thumb span,
#page-creative-image .image-home-recent-shelf > button > span {
  background: #eef4f1;
  color: var(--image-studio-accent-2);
}

#page-creative-image .image-gallery-body b,
#page-creative-image .image-home-recent-shelf b {
  color: var(--image-studio-text);
}

#page-creative-image .image-gallery-body span,
#page-creative-image .image-gallery-body p,
#page-creative-image .image-home-recent-shelf em {
  color: var(--image-studio-muted);
}

#page-creative-image .image-workbench-shell {
  margin-top: 18px;
}

#page-creative-image .image-workbench-head {
  margin-bottom: 12px;
  padding: 16px 18px;
  border-color: var(--image-studio-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

#page-creative-image .image-workbench-head h2,
#page-creative-image .panel-head h2 {
  color: var(--image-studio-text);
}

#page-creative-image .image-workbench-head p,
#page-creative-image .panel-head p {
  color: var(--image-studio-muted);
}

#page-creative-image .image-studio-layout {
  grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
  grid-template-areas:
    "control canvas"
    "brief canvas";
  gap: 12px;
}

#page-creative-image .image-studio-control {
  grid-area: control;
}

#page-creative-image .image-studio-canvas {
  grid-area: canvas;
}

#page-creative-image .image-studio-brief {
  grid-area: brief;
}

#page-creative-image .image-studio-control,
#page-creative-image .image-studio-canvas,
#page-creative-image .image-studio-brief,
#page-creative-image .image-inspiration-toolbar,
#page-creative-image .image-inspiration-wall,
#page-creative-image .image-inspiration-card,
#page-creative-image .image-project-card {
  border-color: var(--image-studio-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 43, 40, .06);
}

#page-creative-image .template-logic-note {
  border-color: var(--image-studio-line);
  border-radius: 12px;
  background: #f6faf8;
}

#page-creative-image .template-logic-note b,
#page-creative-image .image-brief-list b {
  color: var(--image-studio-accent-2);
}

#page-creative-image .image-prompt-panel,
#page-creative-image .image-advanced-settings,
#page-creative-image .image-reference-dropzone,
#page-creative-image .image-brief-list div,
#page-creative-image .image-brief-list p {
  border-color: var(--image-studio-line);
  border-radius: 12px;
  background: #fbfcfb;
}

#page-creative-image .image-reference-dropzone:hover,
#page-creative-image .image-reference-dropzone:focus-visible,
#page-creative-image .image-reference-dropzone.dragging {
  border-color: var(--image-studio-accent-2);
  background: #f5fbf8;
  box-shadow: none;
}

#page-creative-image .image-reference-dropzone em {
  background: rgba(36, 121, 96, .10);
  color: var(--image-studio-accent-2);
}

#page-creative-image .image-design-library-head {
  align-items: center;
  margin: 2px 0 14px;
  padding: 14px 2px 16px;
  border-bottom: 1px solid var(--image-studio-line);
}

#page-creative-image .image-design-library-head h2 {
  color: var(--image-studio-text);
  font-size: 24px;
}

#page-creative-image .image-design-library-head p {
  color: var(--image-studio-muted);
}

#page-creative-image .image-inspiration-toolbar {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  padding: 14px;
  box-shadow: none;
}

#page-creative-image .image-inspiration-search label {
  color: var(--image-studio-text);
}

#page-creative-image .image-design-filter-row button {
  border-color: var(--image-studio-line);
  background: #fff;
  color: var(--image-studio-muted);
}

#page-creative-image .image-design-filter-row button.active,
#page-creative-image .image-design-filter-row button:hover {
  border-color: rgba(36, 121, 96, .32);
  background: #eef7f3;
  color: var(--image-studio-accent-2);
}

#page-creative-image .image-inspiration-wall {
  padding: 16px;
  box-shadow: none;
}

#page-creative-image .image-inspiration-wall-head h3 {
  color: var(--image-studio-text);
}

#page-creative-image .image-inspiration-wall-head span {
  border-color: var(--image-studio-line);
  background: #f8faf9;
  color: var(--image-studio-muted);
}

#page-creative-image .image-inspiration-card {
  box-shadow: 0 10px 24px rgba(31, 43, 40, .07);
}

#page-creative-image .image-inspiration-card.image-only {
  border-color: var(--image-studio-line);
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 43, 40, .07);
}

#page-creative-image .image-inspiration-card.active,
#page-creative-image .image-inspiration-card.image-only.active {
  border-color: rgba(36, 121, 96, .46);
  box-shadow: 0 14px 32px rgba(36, 121, 96, .12), 0 0 0 3px rgba(36, 121, 96, .08);
}

#page-creative-image .image-inspiration-card.image-only .image-inspiration-card-actions .btn.primary {
  border-color: var(--image-studio-text);
  background: var(--image-studio-text);
  color: #fff;
}

#page-creative-image .empty-inline,
#page-creative-image .image-inspiration-loading {
  border-color: var(--image-studio-line);
  background: #fbfcfb;
  color: var(--image-studio-muted);
}

@media (max-width: 1240px) {
  #page-creative-image .image-entry-command-card {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
  }

  #page-creative-image .image-studio-layout {
    grid-template-columns: minmax(310px, 380px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  #page-creative-image .page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  #page-creative-image .page-head .btn {
    width: 100%;
  }

  #page-creative-image .creative-subnav {
    position: static;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #page-creative-image .image-entry-composer {
    padding: 18px;
  }

  #page-creative-image .image-entry-studio-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #page-creative-image .image-entry-service {
    width: 100%;
  }

  #page-creative-image .image-entry-command-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "template"
      "prompt"
      "tools"
      "refs"
      "live";
  }

  #page-creative-image .image-entry-textarea {
    min-height: 180px;
  }

  #page-creative-image .image-entry-live-grid,
  #page-creative-image .image-inspiration-toolbar,
  #page-creative-image .image-studio-layout {
    grid-template-columns: 1fr;
  }

  #page-creative-image .image-studio-layout {
    grid-template-areas:
      "control"
      "canvas"
      "brief";
  }

  #page-creative-image .image-studio-control {
    max-height: none;
  }

  #page-creative-image .image-selected-template-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  #page-creative-image .image-selected-template-card .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  #page-creative-image .page-head h1 {
    font-size: 25px;
  }

  #page-creative-image .creative-subnav button {
    justify-content: center;
    text-align: center;
  }

  #page-creative-image .creative-subnav i {
    display: none;
  }

  #page-creative-image .image-entry-command-tools {
    padding: 12px;
  }

  #page-creative-image .image-entry-size-row,
  #page-creative-image .image-resolution-row,
  #page-creative-image .image-entry-command-actions,
  #page-creative-image .image-reference-list.compact,
  #page-creative-image .image-reference-mode-row,
  #page-creative-image .image-option-grid,
  #page-creative-image .image-style-grid,
  #page-creative-image .image-home-recent-shelf {
    grid-template-columns: 1fr;
  }

  #page-creative-image .image-entry-live-head {
    grid-template-columns: 1fr;
  }

  #page-creative-image .image-entry-live-head .api-status.inline {
    justify-self: stretch;
    max-width: none;
  }

  #page-creative-image .image-design-library-head {
    display: block;
  }
}

/* Commerce image commercial workbench upgrade */
.commerce-result-command-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(29,122,95,.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(209,158,55,.16), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,250,244,.94));
  box-shadow: 0 18px 46px rgba(38,56,38,.08);
}
.commerce-result-command-bar[hidden] { display: none; }
.commerce-result-command-main { display: grid; gap: 6px; min-width: 0; }
.commerce-result-command-main > span {
  color: var(--commerce-accent);
  font-size: 11px;
  font-weight: 880;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.commerce-result-command-main > b { color: var(--commerce-text); font-size: 20px; line-height: 1.2; }
.commerce-result-command-main > div,
.commerce-result-command-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.commerce-result-command-actions { justify-content: flex-end; align-content: center; }
.commerce-result-stat-pill,
.commerce-result-main-meta i,
.commerce-result-inspect-meta span {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(29,122,95,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: var(--commerce-accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 840;
}
.commerce-result-main-gallery article {
  position: relative;
  gap: 12px;
  padding: 12px;
  border-color: rgba(84,108,84,.14);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, rgba(250,248,242,.96));
  box-shadow: 0 14px 34px rgba(43,35,25,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.commerce-result-main-gallery article:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(43,35,25,.10); }
.commerce-result-main-gallery article.active { border-color: rgba(29,122,95,.5); box-shadow: 0 20px 54px rgba(29,122,95,.16); }
.commerce-result-main-gallery article.active::after {
  content: "当前查看";
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(24,77,58,.92);
  color: #fff;
  font-size: 10px;
  font-weight: 860;
}
.commerce-result-thumb { border-radius: 14px; }
.commerce-result-thumb img { aspect-ratio: 4 / 5; transition: transform .24s ease; }
.commerce-result-thumb:hover img { transform: scale(1.025); }
.commerce-result-main-meta { margin-top: 2px; }
.commerce-result-card-actions { padding-top: 4px; }
.commerce-history-panel {
  border-color: rgba(29,122,95,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,246,238,.94)),
    radial-gradient(circle at top right, rgba(29,122,95,.10), transparent 42%) !important;
}
.commerce-history-toolbar { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 2px; }
.commerce-history-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(29,122,95,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
}
.commerce-history-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--commerce-muted);
  font-weight: 820;
  cursor: pointer;
}
.commerce-history-tabs button.active { background: var(--commerce-accent); color: #fff; box-shadow: 0 8px 22px rgba(29,122,95,.20); }
.commerce-history-search { width: 100%; }
.commerce-result-inspect-meta,
.commerce-result-nav-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.commerce-result-nav-actions .btn { flex: 1 1 110px; }
.commerce-lightbox-toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.commerce-lightbox-media .commerce-canvas-board.lightbox {
  width: max-content;
  max-width: none;
  transform: scale(var(--commerce-zoom, 1));
  transform-origin: center center;
  transition: transform .16s ease;
}
.commerce-lightbox-media .commerce-canvas-board.lightbox img { width: auto; max-width: min(86vw, 1180px); }
.commerce-image-jobs,
.commerce-image-projects { grid-template-columns: 1fr; }
.commerce-image-job-card,
.commerce-image-project-card {
  border-color: rgba(78,96,78,.14);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 28px rgba(38,42,33,.05);
}
.commerce-image-job-card > button {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.commerce-history-card-cover {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 86px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(29,122,95,.12), rgba(218,160,55,.12)),
    rgba(248,250,246,.92);
  color: var(--commerce-accent);
  font-size: 12px;
  font-weight: 860;
}
.commerce-history-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.commerce-history-card-body { display: grid !important; gap: 5px !important; min-width: 0; }
.commerce-history-card-body > div { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 8px; }
.commerce-history-card-body strong { justify-self: start; margin-top: 2px; color: var(--commerce-accent); font-size: 11px; font-weight: 860; }
.commerce-image-project-card { display: grid; gap: 10px; padding: 10px; }
.commerce-image-project-card > button:first-child {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 0;
}
.commerce-image-project-card > button:first-child .commerce-history-card-cover { margin: 0; }
.commerce-image-project-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.commerce-history-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.commerce-history-card-actions .icon-btn {
  margin-left: auto;
  width: 30px;
  height: 30px;
  background: rgba(42,33,24,.68);
  color: #fffaf1;
}
@media (max-width: 760px) {
  .commerce-result-command-bar { display: grid; }
  .commerce-result-command-actions { justify-content: stretch; }
  .commerce-result-command-actions .btn { flex: 1 1 130px; }
  .commerce-image-job-card > button,
  .commerce-image-project-card > button:first-child { grid-template-columns: 76px minmax(0, 1fr); }
}

/* Avatar modal commercial polish */
.avatar-history-modal .avatar-task-history-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.avatar-history-modal .avatar-video-history-item {
  min-height: 158px;
  padding: 12px;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "media copy"
    "media action";
  align-items: stretch;
  gap: 10px 12px;
}

.avatar-history-modal .avatar-video-history-media {
  width: 96px;
  height: 134px;
  border-radius: 18px;
}

.avatar-history-modal .avatar-video-history-item b {
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.avatar-history-modal .avatar-video-history-item em,
.avatar-history-modal .avatar-video-history-item small {
  margin-top: 5px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.avatar-history-modal .avatar-video-history-action {
  align-self: end;
}

/* Commercial three-column studio refinement */
#page-avatar .avatar-studio-layout,
#page-video-editor .video-editor-layout {
  grid-template-columns: minmax(230px, 280px) minmax(460px, 1fr) minmax(300px, 340px);
  gap: 14px;
}

#page-avatar .panel,
#page-video-editor .panel {
  border-color: rgba(196, 148, 72, .18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,241,.74)),
    radial-gradient(circle at 16% 0%, rgba(231, 182, 87, .12), transparent 34%);
  box-shadow: 0 18px 46px rgba(85, 58, 24, .08), inset 0 1px 0 rgba(255,255,255,.82);
}

#page-avatar .page-head,
#page-video-editor .page-head {
  margin-bottom: 10px;
}

#page-avatar .page-head p,
#page-video-editor .page-head p {
  max-width: 560px;
}

.avatar-quick-start {
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(47,38,30,.94), rgba(116, 78, 25, .88));
  color: rgba(255, 249, 238, .92);
  box-shadow: 0 16px 34px rgba(81, 52, 16, .18);
}

.avatar-quick-start b {
  color: #fff9ed;
  font-size: 14px;
}

.avatar-quick-start span {
  min-height: 28px;
  padding: 7px 10px 7px 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255, 249, 238, .88);
  position: relative;
}

.avatar-quick-start span::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #f5c469;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(245,196,105,.16);
}

.avatar-default-control,
#avatarVideoModelNote {
  display: none !important;
}

#page-avatar .avatar-output-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#page-avatar [data-avatar-motion-control] {
  grid-column: span 2;
}

#page-avatar .voice-prosody-panel,
#page-avatar .avatar-compose-workbench,
#page-video-editor .simple-editor-section {
  border: 1px solid rgba(196, 148, 72, .16);
  border-radius: 20px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 14px 32px rgba(71,48,18,.055);
}

#page-avatar .avatar-stage-nav,
#page-video-editor .video-editor-step-nav {
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 26px rgba(71,48,18,.055);
}

#page-avatar .avatar-stage-nav button.active,
#page-video-editor .video-editor-step-nav button.active {
  background: linear-gradient(135deg, #2f261e, #8f5e12);
  color: #fff8ec;
  box-shadow: 0 12px 24px rgba(91, 58, 14, .18);
}

#page-avatar .avatar-stage-nav button.active i,
#page-video-editor .video-editor-step-nav button.active i {
  background: rgba(255,255,255,.18);
  color: #fff8ec;
}

#page-video-editor .simple-editor-intro {
  display: none;
}

#page-video-editor .video-editor-history-panel {
  max-height: 340px;
  overflow: hidden;
}

#page-video-editor .video-editor-history-list {
  max-height: 292px;
  overflow: auto;
  padding-right: 3px;
}

#page-video-editor .video-editor-history-list .avatar-video-history-item {
  min-height: 86px;
  border-radius: 18px;
  background: rgba(255,255,255,.66);
}

#page-video-editor .video-editor-history-list .avatar-video-history-media {
  width: 54px;
  height: 72px;
  border-radius: 14px;
}

.avatar-history-modal {
  padding: min(3.8vh, 32px) max(24px, calc((100vw - 1180px) / 2));
}

.avatar-history-modal .avatar-inline-picker-head,
.avatar-history-modal .avatar-history-modal-toolbar,
.avatar-history-modal .avatar-task-history-list {
  width: min(1180px, calc(100vw - 48px));
}

.avatar-history-modal .avatar-inline-picker-head {
  padding: 20px 24px 16px;
  background: rgba(255,252,246,.98);
}

.avatar-history-modal .avatar-inline-picker-head b {
  font-size: 18px;
  letter-spacing: -.02em;
}

.avatar-history-modal .avatar-history-modal-toolbar {
  padding: 0 24px 16px;
}

.avatar-history-modal .avatar-task-history-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 0 24px 24px;
}

.avatar-history-modal .avatar-video-history-item {
  min-height: 148px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,249,238,.78));
  box-shadow: 0 16px 34px rgba(71,48,18,.07);
}

.avatar-history-modal .avatar-video-history-media {
  width: 92px;
  height: 124px;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff2d0, #e4c985);
}

.avatar-video-history-thumb {
  opacity: .96;
}

.avatar-video-history-poster {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.48), transparent 32%),
    linear-gradient(145deg, #fff3d4, #e6c374);
}

.avatar-video-history-item:has(video.avatar-video-history-thumb) .avatar-video-history-poster {
  opacity: .7;
}

@media (max-width: 1240px) {
  #page-avatar .avatar-studio-layout,
  #page-video-editor .video-editor-layout {
    grid-template-columns: minmax(220px, 250px) minmax(390px, 1fr) minmax(280px, 320px);
  }
}

/* Video editor sticky preview refinement */
#page-video-editor .avatar-preview-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 96px);
  overflow: auto;
  align-self: start;
}

#page-video-editor .avatar-preview-panel .phone-preview {
  width: min(236px, 100%);
  margin-bottom: 0;
}

@media (max-width: 980px) {
  #page-video-editor .avatar-preview-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Maiglow commercial loop polish */
#page-copy,
#page-avatar,
#page-video-editor,
#page-publish {
  --loop-ink: #15130f;
  --loop-muted: #756b5f;
  --loop-gold: #bd8b2d;
  --loop-gold-2: #e6c274;
  --loop-dark: #11100d;
  --loop-card: rgba(255,255,255,.76);
  position: relative;
  isolation: isolate;
}

#page-copy::before,
#page-avatar::before,
#page-video-editor::before,
#page-publish::before {
  content: "";
  position: absolute;
  inset: -24px -24px auto -24px;
  height: 310px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(230,194,116,.26), transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(139,220,255,.10), transparent 26%),
    linear-gradient(180deg, rgba(255,250,240,.96), rgba(255,250,240,0));
}

#page-copy .page-head,
#page-avatar .page-head,
#page-video-editor .page-head,
#page-publish .page-head {
  min-height: 168px;
  margin-bottom: 18px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(255,253,247,.90), rgba(255,248,235,.68)),
    radial-gradient(circle at 88% 4%, rgba(230,194,116,.22), transparent 36%);
  box-shadow: 0 28px 88px rgba(82,58,23,.11), inset 0 1px 0 rgba(255,255,255,.86);
  overflow: hidden;
}

#page-copy .page-head::after,
#page-avatar .page-head::after,
#page-video-editor .page-head::after,
#page-publish .page-head::after {
  content: "Maiglow AI";
  position: absolute;
  right: clamp(20px, 4vw, 54px);
  bottom: -8px;
  color: rgba(189,139,45,.07);
  font-family: Didot, Baskerville, STSong, Songti SC, serif;
  font-size: clamp(46px, 8vw, 116px);
  line-height: .9;
  letter-spacing: -.08em;
  pointer-events: none;
}

#page-copy .kicker,
#page-avatar .kicker,
#page-video-editor .kicker,
#page-publish .kicker {
  color: #7b5519;
  font-size: 11px;
  font-weight: 940;
  letter-spacing: .18em;
}

#page-copy .page-head h1,
#page-avatar .page-head h1,
#page-video-editor .page-head h1,
#page-publish .page-head h1 {
  max-width: 760px;
  margin-top: 8px;
  color: var(--loop-ink);
  font-family: Didot, Baskerville, STSong, Songti SC, serif;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.06em;
}

#page-copy .page-head p,
#page-avatar .page-head p,
#page-video-editor .page-head p,
#page-publish .page-head p {
  max-width: 600px;
  color: var(--loop-muted);
  font-size: 15px;
  line-height: 1.72;
}

#page-copy .btn.primary,
#page-avatar .btn.primary,
#page-video-editor .btn.primary,
#page-publish .btn.primary {
  border-color: rgba(21,19,15,.88);
  background: linear-gradient(135deg, #15130f, #7b5519 62%, #bd8b2d);
  color: #fff7df;
  box-shadow: 0 16px 36px rgba(82,58,23,.18);
}

#page-copy .tabs,
#page-publish .publish-workbench-nav,
#page-publish .publish-dashboard-steps,
#page-avatar .workflow-guide,
#page-video-editor .video-editor-step-nav {
  border: 1px solid rgba(189,139,45,.14);
  border-radius: 24px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 16px 48px rgba(82,58,23,.08), inset 0 1px 0 rgba(255,255,255,.82);
}

#page-copy .workspace-grid,
#page-copy .rewrite-workspace {
  grid-template-columns: minmax(420px, .92fr) minmax(360px, .72fr);
  gap: 18px;
  align-items: start;
}

#page-copy .form-panel,
#page-copy .result-panel,
#page-avatar .panel,
#page-video-editor .panel,
#page-publish .panel {
  border: 1px solid rgba(189,139,45,.15);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,250,241,.72)),
    radial-gradient(circle at 10% 0%, rgba(230,194,116,.10), transparent 34%);
  box-shadow: 0 22px 64px rgba(82,58,23,.09), inset 0 1px 0 rgba(255,255,255,.86);
}

#page-copy .generated-copy,
#page-copy .copy-field,
#page-avatar textarea,
#page-video-editor textarea,
#page-publish textarea,
#page-copy .input,
#page-avatar .input,
#page-video-editor .input,
#page-publish .input,
#page-copy .select,
#page-avatar .select,
#page-video-editor .select,
#page-publish .select {
  border-color: rgba(189,139,45,.18);
  background: rgba(255,253,248,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

#page-avatar .workflow-guide,
#page-video-editor .video-editor-step-nav {
  margin-bottom: 16px;
  padding: 8px;
}

#page-avatar .workflow-guide-step,
#page-video-editor .video-editor-step-nav button,
#page-publish .publish-dashboard-steps article {
  border-radius: 18px;
  background: rgba(255,253,248,.72);
}

#page-avatar .avatar-studio-layout,
#page-video-editor .video-editor-layout {
  grid-template-columns: minmax(248px, 292px) minmax(480px, 1fr) minmax(316px, 360px);
  gap: 16px;
}

#page-avatar .avatar-editor-panel,
#page-video-editor .avatar-editor-panel {
  padding: 18px;
}

#page-avatar .avatar-editor-header p,
#page-video-editor .avatar-editor-header p,
#page-avatar .voice-prosody-head span,
#page-video-editor .simple-section-head em,
#page-publish .panel-head p,
#page-publish .publish-dashboard-steps em {
  color: var(--loop-muted);
  font-size: 12px;
  line-height: 1.55;
}

#page-avatar .avatar-editor-header p {
  max-width: 430px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-avatar .voice-prosody-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#page-avatar .voice-advanced:not([open]) {
  opacity: .84;
}

#page-avatar .avatar-script-tools,
#page-avatar .voice-preview-hint,
#page-avatar .avatar-generated-audio,
#page-video-editor .video-editor-legacy-timeline {
  display: none !important;
}

#page-avatar .avatar-step-actions {
  margin-top: 12px;
  display: block;
}

#page-avatar .avatar-preview-panel,
#page-video-editor .avatar-preview-panel {
  background:
    linear-gradient(145deg, rgba(21,19,15,.96), rgba(48,34,16,.92));
  color: #fff7df;
  border-color: rgba(230,194,116,.20);
  box-shadow: 0 28px 80px rgba(18,14,9,.22);
}

#page-avatar .avatar-preview-panel .panel-head h2,
#page-video-editor .avatar-preview-panel .panel-head h2,
#page-avatar .avatar-preview-panel .panel-head p,
#page-video-editor .avatar-preview-panel .panel-head p {
  color: #fff7df;
}

#page-avatar .phone-preview,
#page-video-editor .phone-preview {
  filter: drop-shadow(0 28px 44px rgba(0,0,0,.28));
}

#page-video-editor .simple-control-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-video-editor .simple-control-block {
  border-radius: 22px;
  background: rgba(255,253,248,.76);
}

#page-publish .publish-workbench-shell {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

#page-publish .publish-dashboard-steps {
  margin-bottom: 16px;
  padding: 10px;
}

#page-publish .publish-yxe-layout {
  grid-template-columns: minmax(248px, 300px) minmax(0, 1fr);
  gap: 16px;
}

#page-publish .publish-account-center {
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

#page-publish .publish-account-mode-tabs,
#page-publish .publish-account-tabs,
#page-publish .publish-account-toolbar,
#page-publish .publish-account-list-head,
#page-publish .publish-type-tabs,
#page-publish .publish-task-mode-grid {
  display: none !important;
}

#page-publish .publish-builder-grid {
  grid-template-columns: minmax(300px, .78fr) minmax(360px, 1fr);
  gap: 16px;
}

#page-publish .publish-step-title {
  margin-top: 0;
}

#page-publish .publish-video-preview {
  min-height: 210px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(21,19,15,.94), rgba(48,34,16,.88));
  color: #fff7df;
}

#page-publish .publish-record-panel {
  margin-top: 16px;
  max-height: 520px;
  overflow: hidden;
}

#page-publish .publish-record-panel .table,
#page-publish .publish-record-panel thead,
#page-publish .publish-record-panel tbody,
#page-publish .publish-record-panel tr,
#page-publish .publish-record-panel td {
  display: block;
  width: 100%;
}

#page-publish .publish-record-panel thead {
  display: none;
}

#page-publish #publishTableBody {
  display: grid;
  gap: 10px;
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}

#page-publish .publish-task-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(189,139,45,.14);
  border-radius: 22px;
  background: rgba(255,253,248,.74);
  box-shadow: 0 12px 28px rgba(82,58,23,.055);
}

#page-publish .publish-task-row td {
  border: 0;
  padding: 0;
}

#page-publish .publish-task-row td:nth-child(2),
#page-publish .publish-task-row td:nth-child(4) {
  display: none;
}

#page-publish .publish-task-row td:nth-child(3) {
  grid-column: 1 / 2;
}

#page-publish .publish-task-row td:nth-child(5) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
}

#page-publish .publish-task-desc,
#page-publish .publish-task-tags {
  display: none;
}

#page-publish .publish-result-chips {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#page-publish .publish-result-chip {
  border-radius: 999px;
  padding: 6px 9px;
}

#page-publish .publish-result-chip b,
#page-publish .publish-result-chip em {
  display: inline;
  margin: 0;
}

@media (max-width: 1180px) {
  #page-avatar .avatar-studio-layout,
  #page-video-editor .video-editor-layout,
  #page-publish .publish-yxe-layout,
  #page-publish .publish-builder-grid,
  #page-copy .workspace-grid,
  #page-copy .rewrite-workspace {
    grid-template-columns: 1fr;
  }
  #page-publish .publish-account-center,
  #page-avatar .avatar-preview-panel,
  #page-video-editor .avatar-preview-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Commercial workstation v2: compact usable SaaS console */
#page-copy,
#page-avatar,
#page-video-editor,
#page-publish,
#page-membership {
  --mg-ink: #1c1711;
  --mg-muted: #716456;
  --mg-line: rgba(171, 126, 48, .16);
  --mg-line-strong: rgba(171, 126, 48, .28);
  --mg-card: rgba(255, 255, 255, .82);
  --mg-card-soft: rgba(255, 250, 241, .72);
  --mg-gold: #b98522;
  --mg-gold-deep: #7a4e08;
  --mg-dark: #17130f;
}

#page-copy .page-head,
#page-avatar .page-head,
#page-video-editor .page-head,
#page-publish .page-head,
#page-membership .page-head {
  min-height: 0 !important;
  margin-bottom: 12px !important;
  padding: 14px 18px !important;
  border: 1px solid var(--mg-line) !important;
  border-radius: 22px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,247,231,.70)),
    radial-gradient(circle at 94% 12%, rgba(219, 177, 92, .16), transparent 36%) !important;
  box-shadow: 0 14px 36px rgba(84, 58, 22, .07), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

#page-copy .page-head::after,
#page-avatar .page-head::after,
#page-video-editor .page-head::after,
#page-publish .page-head::after,
#page-membership .page-head::after {
  content: none !important;
}

#page-copy .page-head h1,
#page-avatar .page-head h1,
#page-video-editor .page-head h1,
#page-publish .page-head h1,
#page-membership .page-head h1 {
  margin: 2px 0 0 !important;
  max-width: none !important;
  font-family: STSong, Songti SC, Noto Serif SC, serif !important;
  font-size: clamp(22px, 2.1vw, 31px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  color: var(--mg-ink) !important;
}

#page-copy .page-head p,
#page-avatar .page-head p,
#page-video-editor .page-head p,
#page-publish .page-head p,
#page-membership .page-head p {
  max-width: 680px !important;
  margin-top: 4px !important;
  color: var(--mg-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#page-copy .kicker,
#page-avatar .kicker,
#page-video-editor .kicker,
#page-publish .kicker,
#page-membership .kicker {
  color: var(--mg-gold-deep) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
}

#page-copy .panel,
#page-avatar .panel,
#page-video-editor .panel,
#page-publish .panel,
#page-membership .panel,
#page-membership .membership-hero-panel,
#page-membership .membership-progress-panel,
#page-membership .membership-metric-grid article {
  border: 1px solid var(--mg-line) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, var(--mg-card), var(--mg-card-soft)),
    radial-gradient(circle at 12% 0%, rgba(220,177,92,.10), transparent 32%) !important;
  box-shadow: 0 14px 38px rgba(79, 54, 19, .065), inset 0 1px 0 rgba(255,255,255,.80) !important;
}

#page-copy .btn.primary,
#page-avatar .btn.primary,
#page-video-editor .btn.primary,
#page-publish .btn.primary,
#page-membership .btn.primary {
  border-color: rgba(21, 19, 15, .90) !important;
  background: linear-gradient(135deg, #16120e, #83570d 62%, #c8952e) !important;
  color: #fff7e6 !important;
  box-shadow: 0 12px 28px rgba(91, 60, 16, .16) !important;
}

#page-copy .input,
#page-copy .select,
#page-copy .textarea,
#page-avatar .input,
#page-avatar .select,
#page-avatar .textarea,
#page-video-editor .input,
#page-video-editor .select,
#page-video-editor .textarea,
#page-publish .input,
#page-publish .select,
#page-publish .textarea {
  min-height: 38px;
  border-color: var(--mg-line-strong) !important;
  background: rgba(255,253,248,.88) !important;
}

#page-copy .tabs,
#page-avatar .workflow-guide,
#page-video-editor .video-editor-step-nav,
#page-publish .publish-workbench-shell,
#page-publish .publish-dashboard-steps {
  margin-bottom: 12px !important;
  border-radius: 18px !important;
  border: 1px solid var(--mg-line) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 10px 28px rgba(79,54,19,.055), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

#page-copy .workspace-grid,
#page-copy .rewrite-workspace {
  grid-template-columns: minmax(430px, .95fr) minmax(420px, 1.05fr) !important;
  gap: 14px !important;
}

#page-copy .form-panel,
#page-copy .result-panel {
  padding: 18px !important;
}

#page-copy .textarea {
  min-height: 98px;
}

#page-copy .small-textarea {
  min-height: 72px;
}

#page-copy .generated-copy {
  min-height: 265px;
  border-radius: 16px;
  background: rgba(255,253,248,.82);
}

#page-avatar .workflow-guide {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px !important;
}

#page-avatar .workflow-guide-step {
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 14px !important;
}

#page-avatar .workflow-guide-step em {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-avatar .avatar-studio-layout,
#page-video-editor .video-editor-layout {
  display: grid !important;
  grid-template-columns: minmax(220px, 270px) minmax(330px, 430px) minmax(430px, 1fr) !important;
  grid-template-areas: "source preview controls" !important;
  align-items: start !important;
  gap: 14px !important;
}

#page-avatar .avatar-side-panel,
#page-video-editor .avatar-side-panel {
  grid-area: source;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 90px);
  overflow: auto;
}

#page-avatar .avatar-preview-panel,
#page-video-editor .avatar-preview-panel {
  grid-area: preview;
  position: sticky !important;
  top: 76px !important;
  max-height: calc(100vh - 90px) !important;
  overflow: auto !important;
  padding: 16px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(220,177,92,.18), transparent 32%),
    linear-gradient(145deg, #16130f, #36250f 58%, #0f0d0a) !important;
}

#page-avatar .avatar-editor-panel,
#page-video-editor .avatar-editor-panel {
  grid-area: controls;
  padding: 16px !important;
  max-height: calc(100vh - 90px);
  overflow: auto;
}

#page-avatar .phone-preview,
#page-video-editor .phone-preview {
  width: min(100%, 360px) !important;
  margin: 0 auto 10px !important;
}

#page-avatar .phone-inner,
#page-video-editor .phone-inner {
  min-height: 560px;
  border-radius: 24px;
}

#page-video-editor .avatar-editor-header,
#page-avatar .avatar-editor-header {
  margin-bottom: 10px;
}

#page-video-editor .avatar-editor-header h2,
#page-avatar .avatar-editor-header h2 {
  font-size: 18px;
}

#page-video-editor .simple-control-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#page-video-editor .simple-editor-section,
#page-avatar .voice-prosody-panel,
#page-avatar .avatar-compose-workbench {
  padding: 12px !important;
  border-radius: 16px !important;
}

#page-video-editor .simple-control-block {
  padding: 12px !important;
  border-radius: 16px !important;
}

#page-video-editor .video-editor-job-dock {
  margin-top: 10px;
}

#page-video-editor .avatar-timeline-panel.video-editor-legacy-timeline {
  display: grid !important;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--mg-line);
  border-radius: 16px;
  background: rgba(255,253,248,.74);
}

#page-video-editor .avatar-track {
  min-height: 28px;
  padding: 6px 8px;
}

#page-publish .publish-workbench-shell {
  padding: 8px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#page-publish .publish-workbench-nav {
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

#page-publish .publish-dashboard-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px !important;
}

#page-publish .publish-dashboard-steps article {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 14px !important;
}

#page-publish .publish-yxe-layout {
  display: grid !important;
  grid-template-columns: minmax(620px, 1fr) minmax(300px, 360px) !important;
  grid-template-areas: "builder accounts" !important;
  gap: 14px !important;
  align-items: start;
}

#page-publish .publish-task-builder {
  grid-area: builder;
}

#page-publish .publish-account-center {
  grid-area: accounts;
  position: sticky !important;
  top: 76px !important;
  max-height: calc(100vh - 90px) !important;
  overflow: auto !important;
}

#page-publish .publish-builder-grid {
  grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr) !important;
  gap: 12px !important;
}

#page-publish .publish-video-preview {
  min-height: 260px !important;
  border-radius: 18px !important;
}

#page-publish .platform-account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

#page-publish .platform-card,
#page-publish .platform-account-card,
#page-publish .publish-account-card {
  min-height: 64px;
  border-radius: 16px !important;
}

#page-publish .publish-record-panel {
  margin-top: 14px !important;
  max-height: 360px !important;
}

#page-membership .membership-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px !important;
}

#page-membership .membership-hero-panel {
  min-height: 0;
  padding: 16px 18px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  align-items: center;
  gap: 16px;
}

#page-membership .membership-hero-panel h2 {
  margin: 4px 0;
  font-size: 24px;
}

#page-membership .membership-hero-panel p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

#page-membership .membership-balance-ring {
  width: 118px;
  height: 118px;
}

#page-membership .membership-balance-ring strong {
  font-size: 25px;
}

#page-membership .membership-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#page-membership .membership-metric-grid article {
  padding: 14px 16px !important;
}

#page-membership .membership-metric-grid strong {
  font-size: 26px;
}

#page-membership .membership-progress-panel {
  padding: 14px 16px !important;
}

#page-membership .membership-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 12px;
}

#page-membership .membership-panel {
  padding: 16px !important;
}

#page-membership .membership-cost-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-membership .membership-ledger-list {
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

#page-membership .membership-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1440px) {
  #page-avatar .avatar-studio-layout,
  #page-video-editor .video-editor-layout {
    grid-template-columns: minmax(200px, 240px) minmax(300px, 380px) minmax(390px, 1fr) !important;
  }
  #page-avatar .phone-inner,
  #page-video-editor .phone-inner {
    min-height: 500px;
  }
  #page-publish .publish-yxe-layout {
    grid-template-columns: minmax(560px, 1fr) minmax(280px, 330px) !important;
  }
}

@media (max-width: 1180px) {
  #page-copy .page-head,
  #page-avatar .page-head,
  #page-video-editor .page-head,
  #page-publish .page-head,
  #page-membership .page-head {
    display: block;
  }
  #page-copy .workspace-grid,
  #page-copy .rewrite-workspace,
  #page-avatar .avatar-studio-layout,
  #page-video-editor .video-editor-layout,
  #page-publish .publish-yxe-layout,
  #page-publish .publish-builder-grid,
  #page-membership .membership-grid,
  #page-membership .membership-hero-panel {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }
  #page-avatar .avatar-side-panel,
  #page-video-editor .avatar-side-panel,
  #page-avatar .avatar-preview-panel,
  #page-video-editor .avatar-preview-panel,
  #page-publish .publish-account-center {
    position: static !important;
    max-height: none !important;
  }
  #page-avatar .workflow-guide,
  #page-publish .publish-dashboard-steps,
  #page-membership .membership-metric-grid,
  #page-membership .membership-plan-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Commercial workstation v2 density pass */
#page-copy .page-head,
#page-avatar .page-head,
#page-video-editor .page-head,
#page-publish .page-head,
#page-membership .page-head {
  padding: 10px 16px !important;
}

#page-copy .page-head h1,
#page-avatar .page-head h1,
#page-video-editor .page-head h1,
#page-publish .page-head h1,
#page-membership .page-head h1 {
  font-size: clamp(20px, 1.7vw, 26px) !important;
}

#page-copy .page-head p,
#page-avatar .page-head p,
#page-video-editor .page-head p,
#page-publish .page-head p,
#page-membership .page-head p {
  max-width: 620px !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-membership .membership-hero-panel {
  grid-template-columns: minmax(0, 1fr) 104px !important;
  padding: 12px 16px !important;
}

#page-membership .membership-balance-ring {
  width: 92px !important;
  height: 92px !important;
}

#page-membership .membership-balance-ring strong {
  font-size: 21px !important;
}

#page-membership .membership-metric-grid article {
  min-height: 86px;
  padding: 12px 14px !important;
}

#page-membership .membership-grid {
  align-items: start;
}

#page-membership .membership-cost-grid,
#page-membership .membership-ledger-list {
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}

#page-membership .membership-cost-grid article,
#page-membership .membership-cost-card,
#page-membership .membership-plan-grid article,
#page-membership .membership-plan-card {
  border-radius: 16px !important;
  padding: 12px !important;
}

#page-membership .membership-plan-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#page-publish .publish-record-panel {
  max-height: 300px !important;
}

#page-video-editor .avatar-editor-panel,
#page-video-editor .avatar-preview-panel,
#page-avatar .avatar-editor-panel,
#page-avatar .avatar-preview-panel {
  max-height: calc(100vh - 78px) !important;
}

/* Commercial workstation v3: dashboard-grade density */
#page-copy .page-head,
#page-avatar .page-head,
#page-video-editor .page-head,
#page-publish .page-head,
#page-membership .page-head {
  min-height: 64px !important;
  padding: 8px 14px !important;
  border-radius: 18px !important;
}

#page-copy .page-head .page-actions,
#page-avatar .page-head .page-actions,
#page-video-editor .page-head .page-actions,
#page-publish .page-head .page-actions,
#page-membership .page-head .page-actions {
  flex-shrink: 0;
}

#page-copy .page-head h1,
#page-avatar .page-head h1,
#page-video-editor .page-head h1,
#page-publish .page-head h1,
#page-membership .page-head h1 {
  font-size: clamp(18px, 1.45vw, 23px) !important;
}

#page-copy .kicker,
#page-avatar .kicker,
#page-video-editor .kicker,
#page-publish .kicker,
#page-membership .kicker {
  font-size: 9px !important;
}

#page-membership .membership-layout {
  display: grid !important;
  grid-template-columns: minmax(300px, .95fr) minmax(520px, 1.55fr) minmax(300px, .9fr) !important;
  grid-template-areas:
    "summary metrics metrics"
    "progress progress progress"
    "costs costs ledger"
    "plans plans topups" !important;
  gap: 10px !important;
  align-items: start !important;
}

#page-membership .membership-hero-panel {
  grid-area: summary;
  height: 132px;
  grid-template-columns: minmax(0, 1fr) 82px !important;
  gap: 10px !important;
}

#page-membership .membership-hero-panel h2 {
  font-size: 19px !important;
  line-height: 1.15;
}

#page-membership .membership-hero-panel p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-membership .membership-balance-ring {
  width: 74px !important;
  height: 74px !important;
}

#page-membership .membership-balance-ring strong {
  font-size: 17px !important;
}

#page-membership .membership-balance-ring span {
  font-size: 10px !important;
}

#page-membership .membership-metric-grid {
  grid-area: metrics;
  height: 132px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#page-membership .membership-metric-grid article {
  min-height: 0 !important;
  height: 132px;
  padding: 12px !important;
}

#page-membership .membership-metric-grid small {
  font-size: 11px;
}

#page-membership .membership-metric-grid strong {
  font-size: 24px !important;
  line-height: 1.05;
}

#page-membership .membership-metric-grid span {
  font-size: 11px;
}

#page-membership .membership-progress-panel {
  grid-area: progress;
  padding: 10px 14px !important;
  border-radius: 16px !important;
}

#page-membership .membership-progress-panel i {
  height: 10px;
}

#page-membership .membership-grid {
  display: contents !important;
}

#page-membership .membership-grid .membership-panel:first-child {
  grid-area: costs;
}

#page-membership .membership-grid .membership-panel:nth-child(2) {
  grid-area: ledger;
}

#page-membership .membership-layout > .membership-panel:nth-of-type(5) {
  grid-area: plans;
}

#page-membership .membership-layout > .membership-panel:nth-of-type(6) {
  grid-area: topups;
}

#page-membership .membership-panel .panel-head {
  margin-bottom: 10px;
}

#page-membership .membership-panel .panel-head h2 {
  font-size: 16px;
}

#page-membership .membership-panel .panel-head p {
  font-size: 11px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-membership .membership-cost-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-height: 330px !important;
}

#page-membership .membership-ledger-list {
  max-height: 330px !important;
}

#page-membership .membership-plan-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-height: 280px;
  overflow: auto;
}

#page-membership .membership-topup-grid {
  grid-template-columns: 1fr !important;
}

#page-video-editor .video-editor-step-nav {
  margin-bottom: 10px !important;
}

#page-video-editor .video-editor-step-nav button {
  min-height: 42px;
  padding: 7px 9px;
}

#page-video-editor .phone-inner,
#page-avatar .phone-inner {
  min-height: min(560px, calc(100vh - 300px));
}

#page-publish .publish-dashboard-steps article {
  min-height: 48px;
  padding: 8px 10px;
}

#page-publish .publish-builder-grid {
  align-items: start;
}

#page-publish .publish-task-builder,
#page-publish .publish-account-center {
  padding: 14px !important;
}

@media (max-width: 1180px) {
  #page-membership .membership-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }
  #page-membership .membership-hero-panel,
  #page-membership .membership-metric-grid,
  #page-membership .membership-progress-panel,
  #page-membership .membership-grid .membership-panel:first-child,
  #page-membership .membership-grid .membership-panel:nth-child(2),
  #page-membership .membership-layout > .membership-panel:nth-of-type(5),
  #page-membership .membership-layout > .membership-panel:nth-of-type(6) {
    grid-area: auto !important;
  }
  #page-membership .membership-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* Commercial workstation v4: include AI creative pages and tighter shell */
.main .content {
  padding-top: 18px !important;
}

.topbar {
  min-height: 62px !important;
}

#page-creative-image,
#page-creative-commerce-image {
  --mg-ink: #1c1711;
  --mg-muted: #716456;
  --mg-line: rgba(171, 126, 48, .16);
  --mg-line-strong: rgba(171, 126, 48, .28);
  --mg-card: rgba(255,255,255,.84);
  --mg-card-soft: rgba(255,250,241,.72);
  --mg-gold: #b98522;
  --mg-dark: #17130f;
  position: relative;
  isolation: isolate;
}

#page-creative-image .page-head,
#page-creative-commerce-image .page-head {
  min-height: 64px !important;
  margin-bottom: 12px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--mg-line) !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,247,231,.70)),
    radial-gradient(circle at 94% 12%, rgba(219,177,92,.16), transparent 36%) !important;
  box-shadow: 0 14px 36px rgba(84,58,22,.07), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

#page-creative-image .page-head h1,
#page-creative-commerce-image .page-head h1 {
  margin: 2px 0 0 !important;
  font-family: STSong, Songti SC, Noto Serif SC, serif !important;
  font-size: clamp(18px, 1.45vw, 23px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
  color: var(--mg-ink) !important;
}

#page-creative-image .page-head p,
#page-creative-commerce-image .page-head p {
  margin-top: 4px !important;
  max-width: 660px !important;
  color: var(--mg-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-creative-image .kicker,
#page-creative-commerce-image .kicker {
  color: #7a4e08 !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
}

#page-creative-image .btn.primary,
#page-creative-commerce-image .btn.primary {
  border-color: rgba(21,19,15,.90) !important;
  background: linear-gradient(135deg, #16120e, #83570d 62%, #c8952e) !important;
  color: #fff7e6 !important;
  box-shadow: 0 12px 28px rgba(91,60,16,.16) !important;
}

#page-creative-image .panel,
#page-creative-image .image-entry-composer,
#page-creative-image .image-entry-tool-card,
#page-creative-commerce-image .commerce-studio-panel,
#page-creative-commerce-image .commerce-image-side .panel,
#page-creative-commerce-image .commerce-studio-panel.commerce-image-stage,
#page-creative-commerce-image .commerce-product-panel {
  border: 1px solid var(--mg-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, var(--mg-card), var(--mg-card-soft)),
    radial-gradient(circle at 12% 0%, rgba(220,177,92,.10), transparent 32%) !important;
  box-shadow: 0 14px 38px rgba(79,54,19,.065), inset 0 1px 0 rgba(255,255,255,.80) !important;
}

#page-creative-image .input,
#page-creative-image .select,
#page-creative-image .textarea,
#page-creative-commerce-image .input,
#page-creative-commerce-image .select,
#page-creative-commerce-image .textarea {
  min-height: 38px !important;
  border-color: var(--mg-line-strong) !important;
  background: rgba(255,253,248,.88) !important;
}

#page-creative-image .creative-subnav {
  margin: 0 0 12px !important;
  padding: 6px !important;
  width: fit-content;
  border-radius: 18px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 10px 28px rgba(79,54,19,.055), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

#page-creative-image .image-entry-shell {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}

#page-creative-image .image-entry-composer {
  padding: 16px !important;
  min-height: 0 !important;
}

#page-creative-image .image-entry-command-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  grid-template-areas:
    "prompt tools"
    "refs tools"
    "live live" !important;
  gap: 12px !important;
  align-items: start !important;
}

#page-creative-image .image-entry-main-field {
  grid-area: prompt !important;
  grid-row: auto !important;
}

#page-creative-image .image-entry-command-tools {
  grid-area: tools !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  position: sticky;
  top: 78px;
}

#page-creative-image .image-reference-list.compact {
  grid-area: refs !important;
  min-height: 0 !important;
}

#page-creative-image .image-entry-live-workspace {
  grid-area: live !important;
  margin-top: 0 !important;
}

#page-creative-image .image-entry-textarea {
  min-height: 260px !important;
  max-height: 330px !important;
}

#page-creative-image .image-entry-live-grid {
  display: grid !important;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr) !important;
  gap: 12px !important;
}

#page-creative-image .image-entry-live-preview {
  min-height: 250px !important;
  border-radius: 18px !important;
}

#page-creative-image .image-entry-live-output {
  min-height: 250px !important;
  max-height: 250px !important;
  overflow: auto !important;
}

#page-creative-image .image-entry-recent {
  max-height: 190px !important;
  overflow: hidden !important;
}

#page-creative-image .image-home-recent-shelf {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 4px !important;
}

#page-creative-image .image-home-recent-shelf > * {
  flex: 0 0 180px !important;
}

#page-creative-image .image-workbench-shell {
  margin-top: 14px !important;
}

#page-creative-image .image-studio-layout {
  grid-template-columns: minmax(300px, 360px) minmax(420px, 1fr) minmax(260px, 320px) !important;
  gap: 12px !important;
}

#page-creative-image .image-studio-control,
#page-creative-image .image-studio-canvas,
#page-creative-image .image-studio-brief {
  max-height: calc(100vh - 92px) !important;
  overflow: auto !important;
}

#page-creative-image .image-design-canvas-preview {
  min-height: 420px !important;
}

@media (max-width: 1320px) {
  #page-creative-image .image-entry-command-card,
  #page-creative-image .image-entry-live-grid,
  #page-creative-image .image-studio-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }
  #page-creative-image .image-entry-main-field,
  #page-creative-image .image-entry-command-tools,
  #page-creative-image .image-reference-list.compact,
  #page-creative-image .image-entry-live-workspace {
    grid-area: auto !important;
    position: static !important;
  }
}


#page-creative-image .image-entry-studio-head {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
}

#page-creative-image .image-entry-studio-head h2 {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

#page-creative-image .image-entry-studio-head p {
  font-size: 12px !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-creative-image .image-entry-command-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px) !important;
  gap: 12px !important;
  align-items: start !important;
}

#page-creative-image .image-entry-main-field {
  grid-row: span 4;
}

#page-creative-image .image-entry-textarea {
  min-height: 360px !important;
}

#page-creative-image .image-entry-command-tools {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#page-creative-image .image-entry-upload,
#page-creative-image .image-entry-tool-card {
  min-height: 84px !important;
  padding: 12px !important;
  border-radius: 16px !important;
}

#page-creative-image .image-entry-live-workspace,
#page-creative-image .image-entry-recent {
  margin-top: 12px !important;
}

#page-creative-commerce-image .commerce-image-tool {
  display: grid !important;
  grid-template-columns: minmax(620px, 1fr) minmax(320px, 420px) !important;
  grid-template-areas: "brief preview" !important;
  gap: 14px !important;
  align-items: start !important;
}

#page-creative-commerce-image .commerce-image-rail {
  grid-area: brief !important;
}

#page-creative-commerce-image .commerce-studio-main {
  display: none !important;
}

#page-creative-commerce-image:has(.commerce-studio-panel.commerce-image-stage.active) .commerce-image-tool {
  grid-template-columns: minmax(320px, .78fr) minmax(460px, 1fr) minmax(310px, 360px) !important;
  grid-template-areas: "brief main preview" !important;
}

#page-creative-commerce-image:has(.commerce-studio-panel.commerce-image-stage.active) .commerce-studio-main {
  display: grid !important;
  grid-area: main !important;
}

#page-creative-commerce-image .commerce-image-side {
  grid-area: preview !important;
}

#page-creative-commerce-image .commerce-product-panel.active {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) !important;
  gap: 12px !important;
}

#page-creative-commerce-image .commerce-product-panel.active .commerce-studio-panel-head,
#page-creative-commerce-image .commerce-product-panel.active .api-status,
#page-creative-commerce-image .commerce-product-panel.active .commerce-image-actions {
  grid-column: 1 / -1 !important;
}

#page-creative-commerce-image .commerce-image-rail,
#page-creative-commerce-image .commerce-studio-main,
#page-creative-commerce-image .commerce-image-side {
  min-width: 0 !important;
}

#page-creative-commerce-image .commerce-image-rail,
#page-creative-commerce-image .commerce-image-side {
  position: sticky !important;
  top: 76px !important;
  max-height: calc(100vh - 88px) !important;
  overflow: auto !important;
}

#page-creative-commerce-image .commerce-studio-main {
  max-height: calc(100vh - 88px) !important;
  overflow: auto !important;
}

#page-creative-commerce-image .commerce-studio-panel,
#page-creative-commerce-image .commerce-image-side .panel {
  padding: 14px !important;
}

#page-creative-commerce-image .commerce-studio-panel-head {
  margin-bottom: 10px !important;
}

#page-creative-commerce-image .commerce-studio-panel-head b {
  font-size: 16px !important;
}

#page-creative-commerce-image .commerce-studio-panel-head span {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

#page-creative-commerce-image .commerce-image-upload {
  min-height: 126px !important;
  border-radius: 16px !important;
}

#page-creative-commerce-image .commerce-image-preview {
  min-height: 330px !important;
  border-radius: 18px !important;
}

#page-creative-commerce-image .commerce-studio-compact-grid,
#page-creative-commerce-image .commerce-studio-setting-grid {
  gap: 10px !important;
}

#page-creative-commerce-image .commerce-image-stepper {
  margin: 10px 0 !important;
  padding: 10px !important;
  border-radius: 16px !important;
}

#page-avatar .workflow-guide {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#page-avatar .workflow-guide-step {
  min-height: 46px !important;
  padding: 6px 8px !important;
}

#page-avatar .avatar-studio-layout,
#page-video-editor .video-editor-layout {
  grid-template-columns: minmax(210px, 250px) minmax(330px, 410px) minmax(420px, 1fr) !important;
}

#page-avatar .avatar-side-panel,
#page-video-editor .avatar-side-panel,
#page-avatar .avatar-editor-panel,
#page-video-editor .avatar-editor-panel,
#page-avatar .avatar-preview-panel,
#page-video-editor .avatar-preview-panel {
  padding: 14px !important;
}

#page-avatar .avatar-quick-start {
  padding: 12px !important;
  border-radius: 16px !important;
}

#page-avatar .avatar-quick-start span {
  min-height: 24px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

#page-membership .membership-layout {
  margin-top: 0 !important;
}

#page-membership .membership-cost-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  max-height: 300px !important;
}

#page-membership .membership-cost-grid > *,
#page-membership .membership-ledger-list > * {
  min-height: 0 !important;
}

#page-creative-commerce-image.commerce-step-input .commerce-image-tool {
  grid-template-columns: minmax(620px, 1fr) minmax(320px, 420px) !important;
  grid-template-areas: "brief preview" !important;
  max-width: none !important;
}

#page-creative-commerce-image.commerce-step-input .commerce-image-rail {
  grid-area: brief !important;
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
}

#page-creative-commerce-image.commerce-step-input .commerce-studio-main {
  display: none !important;
}

#page-creative-commerce-image.commerce-step-input .commerce-image-side {
  grid-area: preview !important;
  position: sticky !important;
  top: 76px !important;
}

#page-creative-commerce-image.commerce-step-input .commerce-product-panel {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) !important;
  gap: 12px !important;
}

#page-creative-commerce-image.commerce-step-input .commerce-product-panel .commerce-studio-panel-head,
#page-creative-commerce-image.commerce-step-input .commerce-product-panel .api-status,
#page-creative-commerce-image.commerce-step-input .commerce-product-panel .commerce-image-actions {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1320px) {
  #page-creative-commerce-image .commerce-image-tool,
  #page-creative-commerce-image.commerce-step-input .commerce-image-tool,
  #page-creative-image .image-entry-shell,
  #page-creative-image .image-entry-command-card {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
  }
  #page-creative-commerce-image .commerce-image-rail,
  #page-creative-commerce-image .commerce-studio-main,
  #page-creative-commerce-image .commerce-image-side,
  #page-creative-commerce-image.commerce-step-input .commerce-image-side {
    position: static !important;
    max-height: none !important;
  }
}

/* Premium Copy Workspace Theme - compact production workspace */
body:has(#page-copy.active) {
  --copy-bg: #fffdf8;
  --copy-panel: rgba(255, 255, 255, .76);
  --copy-panel-soft: rgba(255, 251, 244, .62);
  --copy-line: rgba(184, 132, 42, .14);
  --copy-line-strong: rgba(184, 132, 42, .24);
  --copy-gold: #c7891e;
  --copy-gold-deep: #9b640b;
  --copy-text: #29231c;
  --copy-muted: #7d7062;
  --copy-shadow: 0 20px 54px rgba(116, 78, 22, .095), 0 5px 16px rgba(116, 78, 22, .045);
  --copy-shadow-soft: 0 11px 26px rgba(116, 78, 22, .058);
  --copy-radius-shell: 19px;
  --copy-radius-card: 15px;
  --copy-radius-field: 10px;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(238, 207, 145, .18), transparent 44%),
    linear-gradient(135deg, #fffefa 0%, #fbf6ec 56%, #f8eedc 100%) !important;
  color: var(--copy-text);
}

body:has(#page-copy.active)::before { content: none !important; }

body:has(#page-copy.active) .app-shell,
body:has(#page-copy.active) .main,
body:has(#page-copy.active) .content,
body:has(#page-copy.active) .sidebar,
body:has(#page-copy.active) .topbar {
  position: relative;
  z-index: 1;
}

body:has(#page-copy.active) .app-shell { grid-template-columns: 190px minmax(0, 1fr); }
body:has(#page-copy.active) .content { padding: 8px 14px 14px !important; background: transparent !important; }

body:has(#page-copy.active) .sidebar {
  padding: 12px 11px !important;
  border-right: 1px solid rgba(184,132,42,.11) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,251,244,.52)) !important;
  backdrop-filter: blur(18px) saturate(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  box-shadow: 12px 0 32px rgba(116,78,22,.04), inset -1px 0 0 rgba(255,255,255,.66) !important;
}
body:has(#page-copy.active) .brand { min-height: 54px; padding: 0 7px 10px !important; border-bottom-color: rgba(184,132,42,.09) !important; }
body:has(#page-copy.active) .brand-logo { width: 128px; height: auto; object-fit: contain; }
body:has(#page-copy.active) .nav { gap: 1px; padding-top: 8px; }
body:has(#page-copy.active) .nav-section + .nav-section { margin-top: 7px; padding-top: 8px; border-top-color: rgba(184,132,42,.09) !important; }
body:has(#page-copy.active) .nav-section-title,
body:has(#page-copy.active) .nav-label { color: #a08c71 !important; font-size: 10px !important; font-weight: 650 !important; letter-spacing: .01em !important; padding-top: 2px; padding-bottom: 2px; }
body:has(#page-copy.active) .nav-item,
body:has(#page-copy.active) .nav-parent { height: 30px !important; padding: 0 9px !important; border-radius: 10px !important; color: rgba(41,35,28,.78) !important; font-size: 12px !important; font-weight: 600 !important; }
body:has(#page-copy.active) .nav-item b,
body:has(#page-copy.active) .nav-parent b { font-weight: 600 !important; }
body:has(#page-copy.active) .nav-icon,
body:has(#page-copy.active) .nav-step-index { color: rgba(154, 102, 14, .72) !important; }
body:has(#page-copy.active) .nav-step-index { width: 23px; height: 23px; border: 1px solid rgba(184,132,42,.14); border-radius: 999px; background: rgba(255,255,255,.54); display: inline-grid; place-items: center; font-size: 10px; }
body:has(#page-copy.active) .nav-item.active,
body:has(#page-copy.active) .nav-flow-step.active { border: 1px solid rgba(198,143,37,.17) !important; background: linear-gradient(180deg, rgba(255,250,238,.92), rgba(249,236,207,.58)) !important; color: #8b5f12 !important; box-shadow: 0 6px 16px rgba(159,106,19,.07), inset 0 1px 0 rgba(255,255,255,.82) !important; }
body:has(#page-copy.active) .nav-item.active::before,
body:has(#page-copy.active) .nav-flow-step.active::before { content: none !important; }
body:has(#page-copy.active) .plan-card { padding: 10px !important; border: 1px solid rgba(184,132,42,.13) !important; border-radius: 12px !important; background: rgba(255,255,255,.58) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important; }
body:has(#page-copy.active) .plan-card p { color: var(--copy-muted) !important; font-size: 11px; line-height: 1.35; }
body:has(#page-copy.active) .plan-card .btn { min-height: 28px !important; }

body:has(#page-copy.active) .topbar {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 22px !important;
  border-bottom: 1px solid rgba(184,132,42,.10) !important;
  background: linear-gradient(180deg, rgba(255,253,248,.68), rgba(255,250,241,.52)) !important;
  backdrop-filter: blur(16px) saturate(1.02);
  -webkit-backdrop-filter: blur(16px) saturate(1.02);
  box-shadow: 0 1px 0 rgba(255,255,255,.72) inset, 0 5px 16px rgba(116,78,22,.030) !important;
  gap: 10px !important;
}
body:has(#page-copy.active) .topbar,
body.is-copy-page .topbar {
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  padding: 0 14px !important;
  border-bottom: 1px solid rgba(184,132,42,.12) !important;
  background: linear-gradient(180deg, rgba(255,253,248,.70), rgba(255,250,241,.48)) !important;
  backdrop-filter: blur(16px) saturate(1.02);
  -webkit-backdrop-filter: blur(16px) saturate(1.02);
  box-shadow: 0 1px 0 rgba(255,255,255,.74) inset, 0 6px 18px rgba(116,78,22,.028) !important;
  gap: 8px !important;
}
body:has(#page-copy.active) .search,
body:has(#page-copy.active) .workspace-chip { display: none !important; }
body:has(#page-copy.active) .top-actions { margin-left: auto; gap: 8px !important; }
body:has(#page-copy.active) .account-chip { min-width: 92px !important; min-height: 26px !important; padding: 3px 9px !important; border: 1px solid rgba(184,132,42,.13) !important; border-radius: 999px !important; background: rgba(255,255,255,.64) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 3px 8px rgba(116,78,22,.025) !important; }
body:has(#page-copy.active) .account-chip b { color: var(--copy-text); font-size: 11px; font-weight: 660; }
body:has(#page-copy.active) .account-chip span { display: none !important; }
body:has(#page-copy.active) .top-actions .btn.primary { min-height: 28px !important; padding: 0 11px !important; border-radius: 999px !important; display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; }
body:has(#page-copy.active) .top-actions .btn.primary::before { content: "+"; position: relative; z-index: 1; width: 13px; height: 13px; display: inline-grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 12px; line-height: 1; }
body:has(#page-copy.active) .avatar-badge { width: 28px !important; height: 28px !important; border: 2px solid rgba(255,255,255,.78) !important; background: linear-gradient(145deg, #fff7e8, #edcf91) !important; box-shadow: 0 5px 12px rgba(116,78,22,.07), inset 0 1px 0 rgba(255,255,255,.68) !important; font-size: 12px; }

#page-copy { color: var(--copy-text); isolation: isolate; position: relative; }
#page-copy::before { content: none !important; }
#page-copy .copy-workbench-shell { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; padding: 12px 14px 14px; border: 1px solid rgba(184,132,42,.24); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,250,240,.64)); backdrop-filter: blur(18px) saturate(1.06); -webkit-backdrop-filter: blur(18px) saturate(1.06); box-shadow: 0 18px 46px rgba(116,78,22,.085), 0 5px 14px rgba(116,78,22,.038), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(176,126,44,.075); overflow: hidden; }
#page-copy .copy-workbench-shell::before { content: ""; position: absolute; inset: 1px; border-radius: 19px; border: 1px solid rgba(255,255,255,.66); box-shadow: inset 0 -1px 0 rgba(176,126,44,.052); pointer-events: none; }
#page-copy .copy-workbench-shell::after { content: ""; position: absolute; left: 14px; right: 14px; top: 58px; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,132,42,.16), transparent); pointer-events: none; }
#page-copy .copy-workbench-shell > * { position: relative; z-index: 1; }

#page-copy .copy-console-toolbar { min-height: 48px !important; margin: 0 !important; padding: 2px 4px 8px !important; border: 0 !important; border-radius: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; background: transparent !important; box-shadow: none !important; overflow: visible; }
#page-copy .copy-console-toolbar::after { content: none !important; }
#page-copy .copy-head-main,
#page-copy .copy-head-action { position: relative; z-index: 1; }
#page-copy .copy-head-main .kicker { display: none !important; }
#page-copy .copy-console-toolbar h1 { margin: 0 !important; color: #2c251e !important; font-family: STSong, Songti SC, Noto Serif SC, serif !important; font-size: 20px !important; line-height: 1.05 !important; font-weight: 680 !important; letter-spacing: -.04em !important; }
#page-copy .copy-console-toolbar p { margin: 4px 0 0 !important; max-width: 520px !important; color: #7b6f61 !important; font-size: 12px !important; line-height: 1.25 !important; display: block !important; }
#page-copy .copy-head-action { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; box-shadow: none; }
#page-copy .copy-head-action span,
#page-copy .copy-head-action i { display: none !important; }

body:has(#page-copy.active) .top-actions .btn.primary,
#page-copy .btn.primary { position: relative; overflow: hidden; border: 1px solid rgba(151,93,10,.50) !important; background: linear-gradient(180deg, #f9d98d 0%, #e5ad43 52%, #cf891f 100%) !important; color: #fffdf7 !important; box-shadow: 0 7px 14px rgba(170,103,9,.16), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(113,68,7,.22) !important; text-shadow: 0 1px 0 rgba(78,46,4,.24); font-weight: 660 !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
#page-copy .btn.primary:hover { transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 9px 16px rgba(170,103,9,.18), inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(113,68,7,.18) !important; }
#page-copy .btn.primary::after { content: none !important; }
#page-copy .copy-head-action .btn.primary { min-height: 34px !important; padding: 0 15px !important; border-radius: 10px !important; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
#page-copy .btn.primary b { position: relative; z-index: 1; font-weight: 640; }
#page-copy .btn-spark { display: none !important; }
#page-copy .btn.primary .cost-badge { position: relative; z-index: 1; padding: 3px 8px; border: 1px solid rgba(255,255,255,.20); border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.94); font-size: 11px; font-style: normal; font-weight: 620; }

#page-copy .copy-premium-tabs { width: auto; margin: -2px 0 0 !important; padding: 0 0 0 2px !important; gap: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(184,132,42,.13) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
#page-copy .tab { min-height: 29px; padding: 0 17px; border: 1px solid rgba(184,132,42,.10) !important; border-bottom: 0 !important; border-radius: 9px 9px 0 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,250,241,.34)) !important; color: #66594a !important; font-size: 12px; font-weight: 630; box-shadow: inset 0 1px 0 rgba(255,255,255,.68); }
#page-copy .tab + .tab { margin-left: -1px; }
#page-copy .tab:hover { color: var(--copy-gold-deep) !important; background: rgba(255,255,255,.50) !important; }
#page-copy .tab.active { position: relative; border-color: rgba(184,132,42,.14) !important; background: rgba(255,255,255,.68) !important; color: var(--copy-gold-deep) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important; }
#page-copy .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 999px; background: #c7891e; }

#page-copy .subpanel.active { min-width: 0; }
#page-copy .copy-production-workbench { grid-template-columns: minmax(360px, .82fr) minmax(500px, 1.18fr) !important; gap: 12px !important; align-items: stretch !important; padding-top: 0; }
#page-copy .rewrite-workspace { grid-template-columns: minmax(360px, .82fr) minmax(500px, 1.18fr) !important; gap: 12px !important; align-items: stretch !important; padding-top: 0; }
#page-copy .copy-input-studio,
#page-copy .copy-preview-studio { display: grid; gap: 9px; align-content: start; padding: 13px !important; border: 1px solid rgba(184,132,42,.13) !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,251,244,.58)) !important; backdrop-filter: blur(12px) saturate(1.03); -webkit-backdrop-filter: blur(12px) saturate(1.03); box-shadow: 0 12px 26px rgba(116,78,22,.055), inset 0 1px 0 rgba(255,255,255,.86) !important; position: relative; overflow: hidden; }
#page-copy .rewrite-input-panel,
#page-copy .rewrite-result-panel,
#page-copy .subpanel[data-panel="library"] .panel,
#page-copy .copy-inspiration-page { display: grid; gap: 7px; align-content: start; padding: 10px !important; border: 1px solid rgba(184,132,42,.105) !important; border-radius: 13px !important; background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,251,244,.54)) !important; backdrop-filter: blur(10px) saturate(1.02); -webkit-backdrop-filter: blur(10px) saturate(1.02); box-shadow: var(--copy-shadow-soft), inset 0 1px 0 rgba(255,255,255,.82) !important; position: relative; overflow: hidden; }
#page-copy .copy-input-studio::before,
#page-copy .copy-preview-studio::before,
#page-copy .rewrite-input-panel::before,
#page-copy .rewrite-result-panel::before,
#page-copy .subpanel[data-panel="library"] .panel::before,
#page-copy .copy-inspiration-page::before { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--copy-radius-card) - 1px); border: 1px solid rgba(255,255,255,.48); pointer-events: none; }
#page-copy .copy-input-studio::after,
#page-copy .copy-preview-studio::after,
#page-copy .rewrite-input-panel::after,
#page-copy .rewrite-result-panel::after,
#page-copy .subpanel[data-panel="library"] .panel::after,
#page-copy .copy-inspiration-page::after { content: none; }
#page-copy .copy-input-studio > *,
#page-copy .copy-preview-studio > *,
#page-copy .rewrite-input-panel > *,
#page-copy .rewrite-result-panel > *,
#page-copy .subpanel[data-panel="library"] .panel > *,
#page-copy .copy-inspiration-page > * { position: relative; z-index: 1; }
#page-copy .copy-card-heading { display: flex; align-items: center; justify-content: flex-start !important; gap: 10px; padding: 0 0 2px; border-bottom: 0; position: relative; z-index: 1; }
#page-copy .copy-card-heading > span { display: none !important; }
#page-copy .copy-card-heading p,
#page-copy .copy-section-block .field > label,
#page-copy .rewrite-strategy-head p,
#page-copy .rewrite-strategy-head span,
#page-copy .rewrite-asset-panel label,
#page-copy .simple-radar-copy p,
#page-copy .simple-radar-board-head em,
#page-copy .radar-table-title span,
#page-copy .copy-library-head p { display: none !important; }
#page-copy .copy-card-heading h2 { margin: 0; color: var(--copy-text) !important; font-size: 17px !important; line-height: 1.15; letter-spacing: -.02em; }

#page-copy .copy-section-block,
#page-copy .copy-preview-paper,
#page-copy .copy-history-studio { border: 1px solid rgba(184,132,42,.095) !important; border-radius: 13px !important; background: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,251,244,.30)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important; }
#page-copy .rewrite-strategy-panel,
#page-copy .rewrite-asset-panel,
#page-copy .rewrite-score-grid > div,
#page-copy .radar-rules-strip,
#page-copy .inspiration-filters,
#page-copy .radar-table-shell { border: 1px solid rgba(184,132,42,.09) !important; border-radius: 12px !important; background: rgba(255,255,255,.36) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.68) !important; }
#page-copy .copy-section-block { display: grid; gap: 7px; padding: 10px 11px; position: relative; z-index: 1; }
#page-copy .copy-section-title { display: flex; align-items: center; gap: 8px; color: #554b40; font-size: 13px; font-weight: 700; }
#page-copy .copy-section-title b { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 999px; border: 1px solid rgba(184,132,42,.16); background: rgba(255,255,255,.62); color: #ad7412; font-size: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.78); }
#page-copy .field { gap: 5px; }
#page-copy .field label,
#page-copy .rewrite-asset-panel label { color: #6f6253 !important; font-size: 11px !important; font-weight: 620 !important; letter-spacing: 0 !important; }
#page-copy .input,
#page-copy .select,
#page-copy .textarea,
#page-copy .copy-field,
#page-copy .radar-search-card input,
#page-copy .radar-search-card select { border: 1px solid rgba(184,132,42,.12) !important; border-radius: var(--copy-radius-field) !important; background: rgba(255,255,255,.60) !important; color: var(--copy-text) !important; box-shadow: inset 0 1px 1px rgba(92,60,15,.025), inset 0 1px 0 rgba(255,255,255,.70) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; font-size: 13px; }
#page-copy .textarea { min-height: 66px !important; padding: 9px 11px !important; line-height: 1.48 !important; resize: vertical; }
#page-copy .small-textarea { min-height: 56px !important; }
#page-copy .input,
#page-copy .select { min-height: 33px !important; padding-left: 11px !important; padding-right: 11px !important; }
#page-copy .input:focus,
#page-copy .select:focus,
#page-copy .textarea:focus,
#page-copy .radar-search-card input:focus,
#page-copy .radar-search-card select:focus { border-color: rgba(199,143,37,.38) !important; background: rgba(255,255,255,.76) !important; box-shadow: 0 0 0 3px rgba(232,202,145,.14), inset 0 1px 0 rgba(255,255,255,.82) !important; outline: none; }
#page-copy .form-row { gap: 12px !important; grid-template-columns: minmax(0, 1.35fr) minmax(150px, .65fr) !important; }
#page-copy .copy-submit-dock { padding-top: 0; position: relative; z-index: 1; }
#page-copy .copy-submit-dock .btn.primary.full { min-height: 38px !important; border-radius: 9px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; }

#page-copy .copy-preview-paper { display: grid; gap: 9px; padding: 10px; position: relative; z-index: 1; }
#page-copy .copy-preview-toolbar { display: flex; align-items: center; justify-content: space-between; color: #554b40; font-size: 13px; font-weight: 700; }
#page-copy .copy-preview-toolbar em { display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: transparent; color: #827565; font-style: normal; font-size: 12px; font-weight: 560; box-shadow: none; }
#page-copy .copy-preview-toolbar em i { width: 7px; height: 7px; border-radius: 999px; background: #75c767; box-shadow: 0 0 0 3px rgba(117,199,103,.12); }
#page-copy #copyResult,
#page-copy .generated-copy { min-height: 154px !important; padding: 14px !important; border: 1px solid rgba(184,132,42,.10) !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,252,246,.42)) !important; color: rgba(41,35,28,.88) !important; box-shadow: inset 0 1px 1px rgba(92,60,15,.025), inset 0 1px 0 rgba(255,255,255,.68) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#page-copy .copy-empty-state { min-height: 132px; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; color: #7f7263; }
#page-copy .copy-empty-state > i { width: 46px; height: 46px; margin-bottom: 4px; border: 1px solid rgba(184,132,42,.11); border-radius: 13px; background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(250,238,214,.56)); box-shadow: 0 8px 18px rgba(116,78,22,.06), inset 0 1px 0 rgba(255,255,255,.78); position: relative; }
#page-copy .copy-empty-state > i::before,
#page-copy .copy-empty-state > i::after { content: ""; position: absolute; left: 12px; right: 12px; height: 4px; border-radius: 999px; background: rgba(184,132,42,.14); }
#page-copy .copy-empty-state > i::before { top: 15px; box-shadow: 0 9px 0 rgba(184,132,42,.10); }
#page-copy .copy-empty-state > i::after { width: 20px; height: 7px; left: auto; right: 2px; bottom: 8px; transform: rotate(-44deg); background: #c7891e; }
#page-copy .copy-empty-state b { color: var(--copy-text); font-size: 16px; font-weight: 670; }
#page-copy .copy-empty-state span { max-width: 360px; font-size: 12px; line-height: 1.45; }
#page-copy .copy-action-dock { display: grid; grid-template-columns: .82fr 1.18fr; gap: 10px !important; margin-top: 0 !important; position: relative; z-index: 1; }
#page-copy .copy-action-dock .btn,
#page-copy .result-actions .btn,
#page-copy .rewrite-actions .btn,
#page-copy .radar-rule-form .btn,
#page-copy .radar-search-card .btn,
#page-copy .radar-quick-actions button { min-height: 36px !important; padding: 0 13px !important; border-radius: 9px !important; border: 1px solid rgba(184,132,42,.18) !important; background: rgba(255,255,255,.66) !important; color: #7e560f !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 5px 12px rgba(116,78,22,.026) !important; font-weight: 640; }
#page-copy .copy-action-dock .btn.primary,
#page-copy .result-actions .btn.primary,
#page-copy .rewrite-actions .btn.primary { background: linear-gradient(180deg, #f9d98d 0%, #e5ad43 52%, #cf891f 100%) !important; color: #fffdf7 !important; box-shadow: 0 7px 14px rgba(170,103,9,.16), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(113,68,7,.22) !important; }
#page-copy [data-use-copy-for-avatar]::before { content: "▶"; position: relative; z-index: 1; width: 16px; height: 16px; display: inline-grid; place-items: center; margin-right: 7px; border-radius: 4px; background: rgba(255,255,255,.18); color: rgba(255,255,255,.94); font-size: 10px; line-height: 1; }
#page-copy .copy-history-studio { margin-top: 0 !important; padding: 10px !important; position: relative; z-index: 1; }
#page-copy .compact-history { min-height: 60px !important; border: 1px solid rgba(184,132,42,.08) !important; border-radius: 10px !important; border-style: solid !important; background: rgba(255,255,255,.40) !important; }

#page-copy .rewrite-compact-workbench { min-height: 0; }
#page-copy .rewrite-panel-heading { padding-bottom: 0; }
#page-copy .rewrite-mode-tabs { margin-bottom: 0 !important; gap: 6px !important; padding: 3px; border: 1px solid rgba(184,132,42,.09); border-radius: 11px; background: rgba(255,255,255,.34); }
#page-copy .rewrite-mode-tabs button { min-height: 30px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #7b6e5f !important; font-size: 12px; font-weight: 630 !important; box-shadow: none !important; }
#page-copy .rewrite-mode-tabs button.active { background: rgba(255,255,255,.72) !important; color: var(--copy-gold-deep) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 3px 8px rgba(116,78,22,.035) !important; }
#page-copy .rewrite-source-block { margin: 0 !important; }
#page-copy .rewrite-textarea { min-height: 96px !important; }
#page-copy .compact-upload { min-height: 72px !important; padding: 12px !important; border-radius: 11px !important; border-color: rgba(184,132,42,.12) !important; background: rgba(255,255,255,.46) !important; }
#page-copy .rewrite-strategy-compact { margin: 0 !important; padding: 10px !important; gap: 8px !important; border-radius: 12px !important; }
#page-copy .rewrite-strategy-head { gap: 10px !important; align-items: center !important; }
#page-copy .rewrite-strategy-head span { margin-bottom: 3px !important; padding: 2px 7px !important; background: rgba(199,137,30,.10) !important; color: #9b6b17 !important; font-size: 10px !important; font-weight: 680 !important; }
#page-copy .rewrite-strategy-head strong { font-size: 13px !important; line-height: 1.25 !important; font-weight: 680 !important; }
#page-copy .rewrite-strategy-head p { margin-top: 2px !important; color: #7f7263 !important; font-size: 11px !important; line-height: 1.35 !important; display: none !important; }
#page-copy .rewrite-strategy-head .btn { min-height: 30px !important; padding: 0 10px !important; border-radius: 8px !important; flex: 0 0 auto; }
#page-copy .rewrite-strategy-controls { padding-top: 7px !important; border-top: 1px dashed rgba(184,132,42,.16) !important; }
#page-copy .rewrite-strategy-controls summary { color: #7d5a20 !important; font-size: 12px !important; font-weight: 650 !important; }
#page-copy .rewrite-strategy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 8px !important; }
#page-copy .rewrite-score-grid { gap: 7px !important; margin-bottom: 0 !important; }
#page-copy .rewrite-score-grid > div { padding: 8px 9px !important; border-radius: 10px !important; }
#page-copy .rewrite-score-grid b { font-size: 11px !important; font-weight: 620 !important; }
#page-copy .rewrite-score-grid span { margin-top: 2px !important; font-size: 13px !important; font-weight: 720 !important; }
#page-copy .rewrite-compare-compact { gap: 9px !important; }
#page-copy .rewrite-asset-panel { gap: 6px !important; padding: 10px !important; }
#page-copy .rewrite-asset-panel > b { margin: 0 !important; color: #4d4135 !important; font-size: 13px !important; font-weight: 700 !important; }
#page-copy .rewrite-asset-panel .copy-title-field { min-height: 38px !important; padding: 8px 10px !important; font-size: 12px; }
#page-copy .rewrite-asset-panel .copy-tags-field { min-height: 36px !important; padding: 8px 10px !important; font-size: 12px; }
#page-copy .rewrite-asset-panel .compact-copy { min-height: 154px !important; max-height: 250px !important; padding: 10px !important; font-size: 12px; line-height: 1.55; }
#page-copy [data-use-rewrite-for-avatar]::before { content: "▶"; position: relative; z-index: 1; width: 16px; height: 16px; display: inline-grid; place-items: center; margin-right: 7px; border-radius: 4px; background: rgba(255,255,255,.18); color: rgba(255,255,255,.94); font-size: 10px; line-height: 1; }

#page-copy .radar-compact-workbench { gap: 9px !important; min-height: 0; }
#page-copy .radar-console-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border: 1px solid rgba(184,132,42,.09); border-radius: 10px; background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.64); }
#page-copy .simple-radar-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
#page-copy .simple-radar-copy #radarApiStatus { width: fit-content; flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: rgba(117,199,103,.12); color: #4f7f3f; font-size: 11px; font-weight: 680; }
#page-copy .simple-radar-copy h2 { margin: 0; color: var(--copy-text); font-size: 13px; line-height: 1.15; letter-spacing: 0; white-space: nowrap; }
#page-copy .simple-radar-copy p { margin: 0; min-width: 0; color: var(--copy-muted); font-size: 11px; line-height: 1.32; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-copy .simple-radar-steps { display: none; }
#page-copy .simple-radar-steps b { min-height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid rgba(184,132,42,.10); border-radius: 999px; background: rgba(255,255,255,.52); color: #7b6e5f; font-size: 11px; font-weight: 620; white-space: nowrap; }
#page-copy .radar-search-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto auto; gap: 6px; align-items: center; padding: 6px; border: 1px solid rgba(184,132,42,.09); border-radius: 10px; background: rgba(255,255,255,.40); box-shadow: inset 0 1px 0 rgba(255,255,255,.66); }
#page-copy .radar-search-toolbar input:not(.hidden) { min-height: 32px; width: 100%; padding: 0 10px; border: 1px solid rgba(184,132,42,.12); border-radius: 8px; background: rgba(255,255,255,.66); color: var(--copy-text); font: inherit; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.70); outline: none; }
#page-copy .radar-search-toolbar input:not(.hidden):focus { border-color: rgba(199,143,37,.38); background: rgba(255,255,255,.78); box-shadow: 0 0 0 3px rgba(232,202,145,.14), inset 0 1px 0 rgba(255,255,255,.82); }
#page-copy .radar-search-toolbar .btn { min-height: 32px !important; padding: 0 10px !important; border-radius: 8px !important; border: 1px solid rgba(184,132,42,.16) !important; background: rgba(255,255,255,.62) !important; color: #81560d !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 4px 10px rgba(116,78,22,.022) !important; font-size: 12px; font-weight: 630 !important; white-space: nowrap; }
#page-copy .radar-search-toolbar .btn.primary { background: linear-gradient(180deg, #f7cf76 0%, #df9e2a 100%) !important; color: #fffefa !important; box-shadow: 0 6px 12px rgba(170,103,9,.14), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(113,68,7,.18) !important; }
#page-copy .radar-search-toolbar .btn.ghost { color: #7f7263 !important; }
#page-copy .radar-focus-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; align-items: center; padding: 6px 8px; border: 1px solid rgba(184,132,42,.09); border-radius: 10px; background: rgba(255,255,255,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.66); }
#page-copy .radar-focus-strip > div:first-child { display: contents; }
#page-copy .radar-focus-strip b { color: #554b40; font-size: 12px; font-weight: 700; white-space: nowrap; }
#page-copy .radar-focus-strip span { display: none; }
#page-copy .radar-focus-strip .rule-list { margin: 0; min-width: 0; gap: 5px; }
#page-copy .radar-focus-strip .rule-list button { min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; }
#page-copy .radar-focus-strip .api-note { grid-column: 1 / -1; margin: 0; color: #a47a37; font-size: 11px; line-height: 1.35; }
#page-copy .radar-result-board { min-height: 116px; }
#page-copy .simple-radar-empty { min-height: 108px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 14px; border: 1px dashed rgba(184,132,42,.16); border-radius: 12px; background: rgba(255,255,255,.36); text-align: center; }
#page-copy .simple-radar-empty b { color: var(--copy-text); font-size: 14px; }
#page-copy .simple-radar-empty p { max-width: 520px; margin: 0; color: var(--copy-muted); font-size: 12px; line-height: 1.45; }
#page-copy .simple-radar-recommendations { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(184,132,42,.09); border-radius: 12px; background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.68); }
#page-copy .simple-radar-board-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
#page-copy .simple-radar-board-head span { color: #9b6b17; font-size: 11px; font-weight: 680; }
#page-copy .simple-radar-board-head b { display: block; margin-top: 1px; color: var(--copy-text); font-size: 14px; }
#page-copy .simple-radar-board-head em { color: var(--copy-muted); font-size: 11px; font-style: normal; }
#page-copy .simple-radar-card-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
#page-copy .simple-radar-card { min-width: 0; display: grid; grid-template-rows: 1fr auto; border: 1px solid rgba(184,132,42,.09); border-radius: 10px; background: rgba(255,255,255,.52); box-shadow: inset 0 1px 0 rgba(255,255,255,.70); overflow: hidden; }
#page-copy .simple-radar-card-main { min-width: 0; display: grid; grid-template-columns: 20px 44px minmax(0, 1fr); gap: 7px; align-items: center; padding: 7px; border: 0; background: transparent; text-align: left; cursor: pointer; }
#page-copy .simple-radar-rank { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: rgba(199,137,30,.10); color: #a57119; font-size: 10px; font-weight: 760; }
#page-copy .simple-radar-cover { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, rgba(255,249,235,.96), rgba(239,226,200,.72)); color: #9a6b14; overflow: hidden; font-size: 11px; font-weight: 760; }
#page-copy .simple-radar-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
#page-copy .simple-radar-info { min-width: 0; display: grid; gap: 2px; }
#page-copy .simple-radar-info b { color: #332b23; font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#page-copy .simple-radar-info span,
#page-copy .simple-radar-info em { color: #827565; font-size: 11px; line-height: 1.3; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-copy .simple-radar-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 0 7px 7px; }
#page-copy .simple-radar-actions button { min-height: 26px; border: 1px solid rgba(184,132,42,.13); border-radius: 7px; background: rgba(255,255,255,.62); color: #81560d; font-size: 11px; font-weight: 650; cursor: pointer; }
#page-copy .simple-radar-actions .simple-radar-rewrite { border-color: rgba(158,96,6,.34); background: linear-gradient(180deg, #f7cf76 0%, #df9e2a 100%); color: #fffefa; box-shadow: 0 5px 10px rgba(170,103,9,.12), inset 0 1px 0 rgba(255,255,255,.28); }
#page-copy .simple-radar-actions .simple-radar-save { color: #8b5f12; background: rgba(255,247,230,.72); }
#page-copy .radar-table-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 0 2px; }
#page-copy .radar-table-title b { color: #554b40; font-size: 13px; }
#page-copy .radar-table-title span { color: var(--copy-muted); font-size: 11px; }
#page-copy .radar-table-shell { min-height: 126px !important; border-color: rgba(184,132,42,.09) !important; border-radius: 12px !important; background: rgba(255,255,255,.40) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.68) !important; }
#page-copy .hot-radar-table { min-width: 760px !important; }
#page-copy .hot-radar-table th { height: 34px !important; padding: 0 12px !important; background: rgba(255,255,255,.48) !important; color: #6f6253 !important; font-size: 12px !important; }
#page-copy .hot-radar-table td { height: 56px !important; padding: 7px 12px !important; font-size: 12px !important; }
#page-copy .inspiration-video-cell { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 9px !important; }
#page-copy .inspiration-thumb { width: 44px !important; height: 44px !important; border-radius: 8px !important; }
#page-copy .radar-topic-cell b { font-size: 12px !important; }
#page-copy .radar-topic-cell em { font-size: 11px !important; }
#page-copy .radar-table-actions a,
#page-copy .radar-table-actions button { min-height: 28px !important; padding: 0 9px !important; border-color: rgba(184,132,42,.13) !important; border-radius: 8px !important; background: rgba(255,255,255,.62) !important; color: #81560d !important; font-size: 11px !important; }

#page-copy .copy-library-panel { min-height: 0; }
#page-copy .copy-library-head { align-items: center; justify-content: space-between !important; }
#page-copy .copy-library-head .btn { min-height: 32px !important; padding: 0 12px !important; border-radius: 9px !important; border: 1px solid rgba(184,132,42,.16) !important; background: rgba(255,255,255,.60) !important; color: #81560d !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 4px 10px rgba(116,78,22,.022) !important; }
#page-copy .copy-library-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 9px; align-items: stretch; }
#page-copy .copy-library-grid .mini-asset { min-height: 122px; padding: 11px; border: 1px solid rgba(184,132,42,.09); border-radius: 12px; background: rgba(255,255,255,.46); box-shadow: inset 0 1px 0 rgba(255,255,255,.68); }
#page-copy .copy-library-grid .mini-asset b { color: var(--copy-text); font-size: 13px; line-height: 1.35; }
#page-copy .copy-library-grid .mini-asset span { color: #9b6b17; font-size: 11px; }
#page-copy .copy-library-grid .mini-asset p { color: var(--copy-muted); font-size: 11px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#page-copy .copy-library-grid .asset-actions { gap: 6px; margin-top: 2px; }
#page-copy .copy-library-grid .asset-actions .btn { min-height: 28px !important; padding: 0 9px !important; border-radius: 8px !important; font-size: 11px !important; }
#page-copy .copy-library-grid .empty-state { grid-column: 1 / -1; width: min(520px, 100%); min-height: 168px; justify-self: center; margin: 14px 0 4px; padding: 18px; border: 1px dashed rgba(184,132,42,.18); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,251,244,.38)); color: var(--copy-muted); box-shadow: inset 0 1px 0 rgba(255,255,255,.70); }
#page-copy .copy-library-grid .empty-state::before { content: ""; width: 38px; height: 38px; margin-bottom: 2px; border: 1px solid rgba(184,132,42,.12); border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(246,224,184,.58)); box-shadow: 0 8px 18px rgba(116,78,22,.055), inset 0 1px 0 rgba(255,255,255,.78); }
#page-copy .copy-library-grid .empty-state b { color: var(--copy-text); font-size: 15px; }
#page-copy .copy-library-grid .empty-state span { max-width: 360px; font-size: 12px; line-height: 1.45; }

@media (max-width: 1180px) {
  body:has(#page-copy.active) .app-shell { grid-template-columns: 1fr; }
  #page-copy .copy-production-workbench,
  #page-copy .rewrite-workspace { grid-template-columns: 1fr !important; }
  #page-copy .copy-premium-tabs { width: 100%; overflow-x: auto; }
  #page-copy .copy-console-toolbar { align-items: flex-start !important; flex-direction: column; padding-left: 0 !important; }
  #page-copy .copy-action-dock { grid-template-columns: 1fr; }
}

/* Premium Avatar Workspace Theme - high-fidelity compact production console */
body:has(#page-avatar.active) {
  --avatar-bg: #fffdf8;
  --avatar-panel: rgba(255,255,255,.78);
  --avatar-panel-soft: rgba(255,251,244,.60);
  --avatar-line: rgba(184,132,42,.14);
  --avatar-line-strong: rgba(184,132,42,.24);
  --avatar-gold: #d59525;
  --avatar-gold-soft: #f4d58d;
  --avatar-gold-deep: #95620d;
  --avatar-text: #2b251f;
  --avatar-muted: #7f7366;
  --avatar-green: #28a267;
  --avatar-radius-shell: 18px;
  --avatar-radius-card: 14px;
  --avatar-radius-field: 9px;
  --avatar-shadow: 0 18px 46px rgba(116,78,22,.075), 0 5px 14px rgba(116,78,22,.034);
  --avatar-shadow-soft: 0 10px 24px rgba(116,78,22,.052);
  background: radial-gradient(ellipse at 78% 0%, rgba(239,207,145,.18), transparent 42%), linear-gradient(135deg, #fffefa 0%, #fbf6ec 56%, #f8eedc 100%) !important;
  color: var(--avatar-text);
}

body:has(#page-avatar.active)::before { content: none !important; }
body:has(#page-avatar.active) .app-shell { grid-template-columns: 190px minmax(0, 1fr); }
body:has(#page-avatar.active) .content { padding: 8px 14px 14px !important; background: transparent !important; }

body:has(#page-avatar.active) .sidebar {
  padding: 12px 11px !important;
  border-right: 1px solid rgba(184,132,42,.11) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.77), rgba(255,251,244,.53)) !important;
  backdrop-filter: blur(18px) saturate(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  box-shadow: 12px 0 32px rgba(116,78,22,.04), inset -1px 0 0 rgba(255,255,255,.66) !important;
}
body:has(#page-avatar.active) .brand { min-height: 54px; padding: 0 7px 10px !important; border-bottom-color: rgba(184,132,42,.09) !important; }
body:has(#page-avatar.active) .brand-logo { width: 128px; height: auto; object-fit: contain; }
body:has(#page-avatar.active) .nav { gap: 1px; padding-top: 8px; }
body:has(#page-avatar.active) .nav-section + .nav-section { margin-top: 7px; padding-top: 8px; border-top-color: rgba(184,132,42,.09) !important; }
body:has(#page-avatar.active) .nav-section-title { color: #a08c71 !important; font-size: 10px !important; font-weight: 650 !important; letter-spacing: .01em !important; padding-top: 2px; padding-bottom: 2px; }
body:has(#page-avatar.active) .nav-item,
body:has(#page-avatar.active) .nav-parent { height: 30px !important; padding: 0 9px !important; border-radius: 10px !important; color: rgba(41,35,28,.78) !important; font-size: 12px !important; font-weight: 600 !important; }
body:has(#page-avatar.active) .nav-item b,
body:has(#page-avatar.active) .nav-parent b { font-weight: 600 !important; }
body:has(#page-avatar.active) .nav-icon,
body:has(#page-avatar.active) .nav-step-index { color: rgba(154,102,14,.72) !important; }
body:has(#page-avatar.active) .nav-step-index { width: 23px; height: 23px; border: 1px solid rgba(184,132,42,.14); border-radius: 999px; background: rgba(255,255,255,.54); display: inline-grid; place-items: center; font-size: 10px; }
body:has(#page-avatar.active) .nav-item.active,
body:has(#page-avatar.active) .nav-flow-step.active { border: 1px solid rgba(198,143,37,.17) !important; background: linear-gradient(180deg, rgba(255,250,238,.94), rgba(249,236,207,.60)) !important; color: #8b5f12 !important; box-shadow: 0 6px 16px rgba(159,106,19,.07), inset 0 1px 0 rgba(255,255,255,.82) !important; }
body:has(#page-avatar.active) .nav-item.active::before,
body:has(#page-avatar.active) .nav-flow-step.active::before { content: none !important; }
body:has(#page-avatar.active) .plan-card { padding: 10px !important; border: 1px solid rgba(184,132,42,.13) !important; border-radius: 12px !important; background: rgba(255,255,255,.58) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important; }
body:has(#page-avatar.active) .plan-card p { color: var(--avatar-muted) !important; font-size: 11px; line-height: 1.35; }
body:has(#page-avatar.active) .plan-card .btn { min-height: 28px !important; }

body:has(#page-avatar.active) .topbar {
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  padding: 0 14px !important;
  border-bottom: 1px solid rgba(184,132,42,.12) !important;
  background: linear-gradient(180deg, rgba(255,253,248,.70), rgba(255,250,241,.48)) !important;
  backdrop-filter: blur(16px) saturate(1.02);
  -webkit-backdrop-filter: blur(16px) saturate(1.02);
  box-shadow: 0 1px 0 rgba(255,255,255,.74) inset, 0 6px 18px rgba(116,78,22,.028) !important;
  gap: 8px !important;
}
body:has(#page-avatar.active) .search,
body:has(#page-avatar.active) .workspace-chip { display: none !important; }
body:has(#page-avatar.active) .top-actions { margin-left: auto; gap: 8px !important; }
body:has(#page-avatar.active) .account-chip { min-width: 92px !important; min-height: 26px !important; padding: 3px 9px !important; border: 1px solid rgba(184,132,42,.13) !important; border-radius: 999px !important; background: rgba(255,255,255,.64) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 3px 8px rgba(116,78,22,.025) !important; }
body:has(#page-avatar.active) .account-chip b { color: var(--avatar-text); font-size: 11px; font-weight: 660; }
body:has(#page-avatar.active) .account-chip span { display: none !important; }
body:has(#page-avatar.active) .top-actions .btn.primary { min-height: 28px !important; padding: 0 11px !important; border-radius: 999px !important; display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; }
body:has(#page-avatar.active) .top-actions .btn.primary::before { content: "+"; position: relative; z-index: 1; width: 13px; height: 13px; display: inline-grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 12px; line-height: 1; }
body:has(#page-avatar.active) .avatar-badge { width: 28px !important; height: 28px !important; border: 2px solid rgba(255,255,255,.78) !important; background: linear-gradient(145deg, #fff7e8, #edcf91) !important; box-shadow: 0 5px 12px rgba(116,78,22,.07), inset 0 1px 0 rgba(255,255,255,.68) !important; font-size: 12px; }

#page-avatar { color: var(--avatar-text); isolation: isolate; position: relative; }
#page-avatar .avatar-workbench-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(184,132,42,.22);
  border-radius: var(--avatar-radius-shell);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,250,240,.64));
  box-shadow: var(--avatar-shadow), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(176,126,44,.075);
  overflow: visible;
}
#page-avatar .avatar-console-head { min-height: 42px; margin: 0 !important; padding: 0 2px 8px !important; border-bottom: 1px solid rgba(184,132,42,.11); align-items: center !important; }
#page-avatar .avatar-console-head h1 { margin: 0 !important; color: #2c251e !important; font-family: STSong, Songti SC, Noto Serif SC, serif !important; font-size: 20px !important; line-height: 1.05 !important; font-weight: 680 !important; letter-spacing: -.04em !important; }
#page-avatar .avatar-console-head p { margin: 4px 0 0 !important; color: var(--avatar-muted) !important; font-size: 12px !important; line-height: 1.25 !important; }
#page-avatar .avatar-head-actions { display: inline-flex; align-items: center; gap: 8px; }
#page-avatar .avatar-status-pill,
#page-avatar .avatar-cost-pill { min-height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid rgba(184,132,42,.13); border-radius: 9px; background: rgba(255,255,255,.62); color: #6f6253; font-size: 12px; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.78); white-space: nowrap; }
#page-avatar .avatar-cost-pill { color: #9a6815; }

body:has(#page-avatar.active) .btn.primary,
#page-avatar .btn.primary { position: relative; overflow: hidden; border: 1px solid rgba(151,93,10,.44) !important; background: linear-gradient(180deg, #f9d98d 0%, #e4aa3b 52%, #cf891f 100%) !important; color: #fffdf7 !important; box-shadow: 0 7px 14px rgba(170,103,9,.15), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(113,68,7,.20) !important; text-shadow: 0 1px 0 rgba(78,46,4,.22); font-weight: 680 !important; }
#page-avatar .btn.primary::after { content: none !important; }
#page-avatar .btn,
body:has(#page-avatar.active) .btn:not(.primary) { border-color: rgba(184,132,42,.15) !important; background: rgba(255,255,255,.62) !important; color: #81560d !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 4px 10px rgba(116,78,22,.022) !important; font-weight: 640; }
#page-avatar .btn.primary-soft { background: linear-gradient(180deg, rgba(255,247,230,.92), rgba(247,230,196,.78)) !important; color: #9a6815 !important; }

#page-avatar .avatar-studio-layout {
  display: grid !important;
  grid-template-columns: minmax(210px, 250px) minmax(510px, 1fr) minmax(310px, 360px) !important;
  grid-template-areas: "source controls preview" !important;
  gap: 12px !important;
  align-items: start !important;
}
#page-avatar .avatar-side-panel { grid-area: source !important; }
#page-avatar .avatar-editor-panel { grid-area: controls !important; }
#page-avatar .avatar-preview-panel { grid-area: preview !important; }
#page-avatar .avatar-side-panel,
#page-avatar .avatar-editor-panel,
#page-avatar .avatar-preview-panel {
  min-width: 0;
  display: grid !important;
  gap: 9px !important;
  align-content: start !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  max-height: none !important;
}
#page-avatar .avatar-side-panel,
#page-avatar .avatar-preview-panel { position: sticky !important; top: 48px !important; }

#page-avatar .avatar-left-card,
#page-avatar .avatar-main-card,
#page-avatar .avatar-preview-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px !important;
  border: 1px solid rgba(184,132,42,.105) !important;
  border-radius: var(--avatar-radius-card) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,251,244,.56)) !important;
  box-shadow: var(--avatar-shadow-soft), inset 0 1px 0 rgba(255,255,255,.84) !important;
  overflow: hidden;
}
#page-avatar .avatar-card-title,
#page-avatar .avatar-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; color: #554b40; font-size: 13px; font-weight: 720; }
#page-avatar .avatar-section-title span { color: var(--avatar-muted); font-size: 11px; font-weight: 560; }

#page-avatar .workflow-guide { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; display: grid !important; grid-template-columns: 1fr !important; gap: 4px !important; }
#page-avatar .workflow-guide-step { min-height: 42px !important; padding: 4px 6px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; grid-template-columns: 24px minmax(0, 1fr) !important; gap: 7px !important; position: relative; }
#page-avatar .workflow-guide-step:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 30px; bottom: -8px; width: 1px; background: rgba(184,132,42,.16); }
#page-avatar .workflow-guide-step i { width: 22px !important; height: 22px !important; border: 1px solid rgba(184,132,42,.15); background: rgba(255,255,255,.70) !important; color: #b07917 !important; font-size: 10px !important; }
#page-avatar .workflow-guide-step.done i { border-color: rgba(40,162,103,.20); background: var(--avatar-green) !important; color: #fff !important; }
#page-avatar .workflow-guide-step.active i { border-color: rgba(213,149,37,.35); background: #fff4d9 !important; color: #a56c10 !important; box-shadow: 0 0 0 3px rgba(213,149,37,.10); }
#page-avatar .workflow-guide-step b { color: #3e352c !important; font-size: 12px !important; line-height: 1.15 !important; }
#page-avatar .workflow-guide-step em { color: #8d806f !important; font-size: 11px !important; line-height: 1.2 !important; }
#page-avatar .workflow-guide-step.done em { color: #438361 !important; }
#page-avatar .workflow-guide-step.pending { opacity: .70; }

#page-avatar .avatar-selected-card { min-height: 190px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: hidden; }
#page-avatar .avatar-selected-card img,
#page-avatar .avatar-selected-card video,
#page-avatar .selected-avatar-thumb { width: 100% !important; aspect-ratio: 1 / 1.05 !important; min-height: 0 !important; border-radius: 11px !important; object-fit: cover !important; display: block; border: 1px solid rgba(184,132,42,.10); background: #f4ead8; }
#page-avatar .avatar-selected-card > div { display: grid; gap: 3px; padding: 7px 1px 0; }
#page-avatar .avatar-selected-card b { color: #332b23; font-size: 13px; }
#page-avatar .avatar-selected-card span,
#page-avatar .avatar-selected-card p { margin: 0; color: #7f7366; font-size: 11px; line-height: 1.35; }
#page-avatar .avatar-side-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 7px !important; }
#page-avatar .avatar-side-actions .btn { min-height: 30px !important; padding: 0 8px !important; border-radius: 8px !important; font-size: 12px !important; }
#page-avatar .avatar-summary-list { display: grid; gap: 7px; margin: 0; }
#page-avatar .avatar-summary-list div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px; align-items: center; }
#page-avatar .avatar-summary-list dt { color: #8a7d6d; font-size: 12px; }
#page-avatar .avatar-summary-list dd { margin: 0; color: #3e352c; font-size: 12px; font-weight: 650; }

#page-avatar .avatar-stage-nav { display: none !important; }
#page-avatar .avatar-stage-card { display: grid !important; gap: 9px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; pointer-events: auto !important; }
#page-avatar .avatar-stage-card.locked:not(.active) { display: grid !important; opacity: 1 !important; pointer-events: auto !important; }
#page-avatar .avatar-stage-card + .avatar-stage-card { margin-top: 9px; }
#page-avatar .avatar-mode-card .tabs { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#page-avatar .avatar-mode-card .tab { min-height: 50px !important; display: grid !important; align-content: center; gap: 2px; padding: 8px 12px !important; border: 1px solid rgba(184,132,42,.12) !important; border-radius: 10px !important; background: rgba(255,255,255,.54) !important; color: #554b40 !important; text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
#page-avatar .avatar-mode-card .tab b { font-size: 13px; }
#page-avatar .avatar-mode-card .tab span { color: #8a7d6d; font-size: 11px; line-height: 1.25; }
#page-avatar .avatar-mode-card .tab.active { border-color: rgba(213,149,37,.34) !important; background: linear-gradient(180deg, rgba(255,248,232,.94), rgba(255,239,203,.62)) !important; color: #8b5f12 !important; }

#page-avatar .field { gap: 5px !important; }
#page-avatar .field label { color: #6f6253 !important; font-size: 11px !important; font-weight: 620 !important; letter-spacing: 0 !important; }
#page-avatar .input,
#page-avatar .select,
#page-avatar .textarea { border: 1px solid rgba(184,132,42,.12) !important; border-radius: var(--avatar-radius-field) !important; background: rgba(255,255,255,.62) !important; color: var(--avatar-text) !important; box-shadow: inset 0 1px 1px rgba(92,60,15,.025), inset 0 1px 0 rgba(255,255,255,.72) !important; font-size: 12px !important; }
#page-avatar .input,
#page-avatar .select { min-height: 31px !important; padding-left: 10px !important; padding-right: 10px !important; }
#page-avatar .textarea { min-height: 82px !important; padding: 9px 11px !important; line-height: 1.5 !important; resize: vertical; }
#page-avatar .avatar-script-box { min-height: 92px !important; }
#page-avatar .input:focus,
#page-avatar .select:focus,
#page-avatar .textarea:focus { border-color: rgba(213,149,37,.38) !important; background: rgba(255,255,255,.80) !important; box-shadow: 0 0 0 3px rgba(232,202,145,.14), inset 0 1px 0 rgba(255,255,255,.84) !important; outline: none; }
#page-avatar .avatar-content-draft-card { display: none !important; }
#page-avatar .avatar-content-tags-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
#page-avatar .avatar-content-tag-chips { display: flex; gap: 5px; flex-wrap: wrap; min-height: 0; }
#page-avatar .avatar-script-tools { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
#page-avatar .avatar-script-tools span { color: #6f6253; font-size: 12px; font-weight: 650; }
#page-avatar .avatar-script-tools .btn,
#page-avatar .btn.small { min-height: 28px !important; padding: 0 9px !important; border-radius: 8px !important; font-size: 11px !important; }

#page-avatar .voice-prosody-panel { display: grid; gap: 8px; padding: 10px !important; border: 1px solid rgba(184,132,42,.09) !important; border-radius: 12px !important; background: rgba(255,255,255,.38) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.68) !important; }
#page-avatar .voice-prosody-head { align-items: center !important; gap: 10px !important; }
#page-avatar .voice-prosody-head b { color: #554b40; font-size: 13px; }
#page-avatar .voice-prosody-head span { color: var(--avatar-muted); font-size: 11px; line-height: 1.3; }
#page-avatar .voice-control-row { display: grid !important; grid-template-columns: minmax(180px, 1fr) auto auto !important; gap: 7px !important; align-items: end !important; }
#page-avatar .voice-preview-hint,
#page-avatar .voice-ai-summary { padding: 6px 8px !important; border-radius: 8px !important; background: rgba(255,252,246,.58) !important; color: #8a7d6d !important; font-size: 11px !important; line-height: 1.35 !important; }
#page-avatar .voice-prosody-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 7px !important; }
#page-avatar .voice-advanced { padding: 0 !important; border: 0 !important; background: transparent !important; }
#page-avatar .voice-advanced summary,
#page-avatar .avatar-motion-advanced summary { min-height: 30px; display: flex; align-items: center; color: #6f6253; font-size: 12px; font-weight: 650; cursor: pointer; }
#page-avatar .voice-advanced-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; }
#page-avatar .range-card { min-height: 46px !important; padding: 7px 9px !important; border-radius: 9px !important; border-color: rgba(184,132,42,.10) !important; background: rgba(255,255,255,.44) !important; }
#page-avatar .range-card span { color: #66594a; font-size: 11px; }

#page-avatar .avatar-audio-card .avatar-step-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
#page-avatar .avatar-generated-audio,
#page-avatar .api-status,
#page-avatar .avatar-live-audio,
#page-avatar .task-status,
#page-avatar .avatar-history-summary { padding: 8px 10px !important; border: 1px solid rgba(184,132,42,.09) !important; border-radius: 10px !important; background: rgba(255,255,255,.45) !important; color: #7f7366 !important; font-size: 12px !important; line-height: 1.4 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.68) !important; }
#page-avatar .voice-progress { padding: 9px !important; border-radius: 10px !important; border-color: rgba(184,132,42,.10) !important; background: rgba(255,255,255,.46) !important; }
#page-avatar .voice-progress-bar { height: 5px !important; background: rgba(184,132,42,.10) !important; }
#page-avatar .voice-progress-bar i { background: linear-gradient(90deg, #f0c46a, #d59525) !important; }

#page-avatar .avatar-output-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; }
#page-avatar .avatar-default-control { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; }
#page-avatar .avatar-motion-advanced { margin-top: 2px; padding: 0; border: 0; background: transparent; }
#page-avatar .avatar-motion-advanced-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(120px, .8fr) minmax(120px, .8fr); gap: 7px; align-items: stretch; }
#page-avatar .avatar-compose-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; align-items: center; }
#page-avatar .avatar-generate-btn { width: 100%; min-height: 36px !important; border-radius: 9px !important; display: inline-flex !important; justify-content: center; align-items: center; gap: 8px; }
#page-avatar .avatar-generate-btn small { font-size: 11px; opacity: .86; }
#page-avatar .avatar-post-video-actions .btn { min-height: 36px !important; border-radius: 9px !important; }

#page-avatar .avatar-preview-panel { gap: 9px !important; }
#page-avatar .avatar-preview-card { padding: 10px !important; }
#page-avatar .avatar-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#page-avatar .avatar-preview-head b { color: #332b23; font-size: 13px; }
#page-avatar .avatar-preview-head p { margin: 2px 0 0; color: #8a7d6d; font-size: 11px; }
#page-avatar .avatar-preview-badges { display: inline-flex; align-items: center; gap: 5px; }
#page-avatar .avatar-preview-badges span { min-height: 24px; display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid rgba(184,132,42,.11); border-radius: 7px; background: rgba(255,255,255,.54); color: #7b6e5f; font-size: 11px; font-weight: 650; }
#page-avatar .phone-preview { width: min(100%, 244px) !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#page-avatar .phone-inner { width: 100% !important; min-height: 0 !important; aspect-ratio: 9 / 16 !important; border-radius: 10px !important; border: 1px solid rgba(184,132,42,.12) !important; background: linear-gradient(180deg, #f5ead8, #fff8ea) !important; box-shadow: 0 10px 22px rgba(116,78,22,.08), inset 0 1px 0 rgba(255,255,255,.72) !important; overflow: hidden !important; }
#page-avatar .phone-inner img,
#page-avatar .phone-inner video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
#page-avatar .empty-video { min-height: 100% !important; display: grid !important; place-items: center !important; align-content: center !important; gap: 6px; color: #8a7d6d !important; background: linear-gradient(180deg, #fff7e6, #f4ead8) !important; }
#page-avatar .empty-video b { color: #3e352c; font-size: 13px; }
#page-avatar .empty-video span { width: min(190px, 80%); font-size: 11px; line-height: 1.4; text-align: center; }
#page-avatar .avatar-preview-caption { margin: 0; text-align: center; color: #8a7d6d; font-size: 11px; }
#page-avatar .avatar-preview-summary { display: grid !important; gap: 5px !important; padding: 8px 10px !important; }
#page-avatar .avatar-preview-summary span { color: #7f7366 !important; font-size: 11px !important; }
#page-avatar .log-list { max-height: 72px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; overflow: auto !important; }
#page-avatar .avatar-history-panel { display: grid; gap: 7px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
#page-avatar .avatar-history-head { display: grid !important; gap: 7px !important; }
#page-avatar .avatar-history-head > div:last-child { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

#page-avatar .avatar-inline-picker { border-color: rgba(184,132,42,.16) !important; background: rgba(255,253,248,.96) !important; box-shadow: 0 22px 60px rgba(116,78,22,.14) !important; }

#page-avatar .avatar-hidden-flow-action { display: none !important; }
#page-avatar .avatar-side-hint,
#page-avatar .avatar-result-next-hint {
  padding: 8px 10px;
  border: 1px solid rgba(184,132,42,.09);
  border-radius: 10px;
  background: rgba(255,250,239,.56);
  color: #7f7366;
  font-size: 12px;
  line-height: 1.42;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}
#page-avatar .avatar-result-next-hint { display: grid; gap: 3px; }
#page-avatar .avatar-result-next-hint b { color: #8b5f12; font-size: 13px; }
#page-avatar .avatar-result-next-hint span { color: #7f7366; font-size: 11px; }
#page-avatar .avatar-deferred-action {
  border-color: rgba(184,132,42,.14) !important;
  background: linear-gradient(180deg, rgba(236,222,195,.70), rgba(218,199,163,.60)) !important;
  color: #8a7d6d !important;
  opacity: .78;
  filter: saturate(.55);
  cursor: not-allowed;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54) !important;
}
#page-avatar .avatar-deferred-action small { color: #9a8d7a; }
#page-avatar[data-workflow-state="needs_persona"] .avatar-audio-main-action,
#page-avatar[data-workflow-state="needs_persona"] #avatarGenerateBtn,
#page-avatar[data-workflow-state="needs_audio"] #avatarGenerateBtn {
  border-color: rgba(184,132,42,.14) !important;
  background: linear-gradient(180deg, rgba(236,222,195,.70), rgba(218,199,163,.60)) !important;
  color: #8a7d6d !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54) !important;
}
#page-avatar[data-workflow-state="needs_persona"] #avatarInlineChangePersonaBtn.primary,
#page-avatar[data-workflow-state="needs_audio"] .avatar-audio-main-action.primary {
  border: 1px solid rgba(151,93,10,.44) !important;
  background: linear-gradient(180deg, #f9d98d 0%, #e4aa3b 52%, #cf891f 100%) !important;
  color: #fffdf7 !important;
  box-shadow: 0 7px 14px rgba(170,103,9,.15), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(113,68,7,.20) !important;
  text-shadow: 0 1px 0 rgba(78,46,4,.22);
}
#page-avatar[data-workflow-state="needs_persona"] #avatarInlineChangePersonaBtn.primary { width: 100%; }
#page-avatar[data-workflow-state="needs_persona"] .avatar-side-actions { grid-template-columns: 1fr !important; }
#page-avatar[data-workflow-state="needs_persona"] #newPersonaFromAvatarBtn { display: none !important; }
#page-avatar[data-workflow-state="needs_audio"] #avatarInlineChangePersonaBtn { width: auto; }
#page-avatar[data-workflow-state="needs_audio"] .avatar-side-actions { grid-template-columns: 1fr 1fr !important; }
#page-avatar[data-workflow-state="needs_audio"] #newPersonaFromAvatarBtn { display: inline-flex !important; }

@media (max-width: 1460px) {
  #page-avatar .avatar-studio-layout { grid-template-columns: minmax(200px, 235px) minmax(470px, 1fr) minmax(290px, 330px) !important; gap: 10px !important; }
  #page-avatar .phone-preview { width: min(100%, 220px) !important; }
  #page-avatar .voice-prosody-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 1180px) {
  body:has(#page-avatar.active) .app-shell { grid-template-columns: 1fr; }
  #page-avatar .avatar-studio-layout { grid-template-columns: 1fr !important; grid-template-areas: none !important; }
  #page-avatar .avatar-side-panel,
  #page-avatar .avatar-preview-panel { position: static !important; }
  #page-avatar .avatar-output-grid,
  #page-avatar .voice-prosody-grid,
  #page-avatar .avatar-motion-advanced-grid { grid-template-columns: 1fr !important; }
}


/* studio header tweaks: hide kicker line for compact strip parity with avatar */
#page-creative-image .page-head .kicker,
#page-creative-commerce-image .page-head .kicker { display: none !important; }

/* commerce stepper inside left rail: vertical flow instead of cramped 4-col */
#page-creative-commerce-image .commerce-image-stepper {
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}
#page-creative-commerce-image .commerce-image-stepper button {
  padding: 8px 10px !important;
  position: relative;
}
#page-creative-commerce-image .commerce-image-stepper button + button::before {
  content: "";
  position: absolute;
  left: 19px;
  top: -4px;
  width: 1px;
  height: 6px;
  background: var(--studio-line);
}

/* commerce stepper default-state polish: even without JS-managed .active, the first step should look highlighted */
#page-creative-commerce-image .commerce-image-stepper:not(:has(button.active)) button:first-child {
  border-color: rgba(198,143,37,.32) !important;
  background: linear-gradient(180deg, rgba(255,250,238,.96), rgba(249,236,207,.62)) !important;
  color: var(--studio-gold-deep) !important;
  box-shadow: 0 6px 14px rgba(159,106,19,.07), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
#page-creative-commerce-image .commerce-image-stepper:not(:has(button.active)) button:first-child i {
  background: linear-gradient(180deg, #fff7e6, #f4d58d) !important;
  color: var(--studio-gold-deep) !important;
  border-color: var(--studio-gold) !important;
}

/* commerce-image two-column "input mode" polish: keep product panel readable, side preview clean */
#page-creative-commerce-image .commerce-image-tool:not(:has(.commerce-image-stage.active)) {
  grid-template-columns: minmax(560px, 1fr) minmax(300px, 380px) !important;
}
#page-creative-commerce-image .commerce-image-rail {
  display: grid; gap: 10px;
}
#page-creative-commerce-image .commerce-image-side {
  display: grid; gap: 10px; align-content: start;
}
#page-creative-commerce-image .commerce-image-side .panel { margin: 0 !important; }

/* fine-tune image-design entry: align upload card height with adjacent tool cards */
#page-creative-image .image-entry-upload { min-height: 76px; }

/* unify .upload (generic) inside commerce upload to use the same paper card */
#page-creative-commerce-image .upload {
  background: rgba(255,247,225,.5) !important;
  border: 1px dashed var(--studio-line-strong) !important;
  border-radius: var(--studio-radius-card) !important;
  padding: 16px !important;
}

/* commerce panel head: secondary action button on right should not collapse */
#page-creative-commerce-image .commerce-studio-panel-head .btn { min-height: 28px !important; padding: 0 11px !important; font-size: 11.5px !important; }

/* image-design "image-entry-recent" + "image-design-library-head": keep paddings consistent */
#page-creative-image .image-design-library-head {
  padding: 10px 14px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 10px;
  background: linear-gradient(180deg, rgba(255,251,242,.78), rgba(255,247,231,.46));
  border: 1px solid var(--studio-line);
  border-radius: var(--studio-radius-card);
}
#page-creative-image .image-design-library-head h2,
#page-creative-image .image-design-library-head h3 {
  margin: 0 !important;
  font-family: STSong, Songti SC, Noto Serif SC, serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
#page-creative-image .image-design-library-head .btn { flex-shrink: 0; }

/* sidebar nav inherits avatar's compact gold styling on these pages too */
body:has(#page-creative-image.active) .sidebar,
body:has(#page-creative-commerce-image.active) .sidebar {
  border-right: 1px solid rgba(184,132,42,.11) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.77), rgba(255,251,244,.53)) !important;
  backdrop-filter: blur(18px) saturate(1.04);
  box-shadow: 12px 0 32px rgba(116,78,22,.04), inset -1px 0 0 rgba(255,255,255,.66) !important;
}
body:has(#page-creative-image.active) .nav-item.active,
body:has(#page-creative-commerce-image.active) .nav-item.active {
  border: 1px solid rgba(198,143,37,.17) !important;
  background: linear-gradient(180deg, rgba(255,250,238,.94), rgba(249,236,207,.60)) !important;
  color: #8b5f12 !important;
  box-shadow: 0 6px 16px rgba(159,106,19,.07), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
/* ==================================================================
 * Unified studio theme for image-design + commerce-image pages
 * ALIGN with avatar workspace gold-paper aesthetic (high-priority overrides)
 * Scope: only #page-creative-image and #page-creative-commerce-image
 * ================================================================== */

body:has(#page-creative-image.active),
body:has(#page-creative-commerce-image.active) {
  --studio-line: rgba(184,132,42,.14);
  --studio-line-strong: rgba(184,132,42,.26);
  --studio-gold: #d59525;
  --studio-gold-deep: #95620d;
  --studio-text: #2b251f;
  --studio-muted: #7f7366;
  --studio-radius-shell: 18px;
  --studio-radius-card: 14px;
  --studio-radius-field: 9px;
  background: radial-gradient(ellipse at 78% 0%, rgba(239,207,145,.18), transparent 42%), linear-gradient(135deg, #fffefa 0%, #fbf6ec 56%, #f8eedc 100%) !important;
  color: var(--studio-text);
}
body:has(#page-creative-image.active)::before,
body:has(#page-creative-commerce-image.active)::before { content: none !important; }
body:has(#page-creative-image.active) .content,
body:has(#page-creative-commerce-image.active) .content {
  padding: 8px 14px 14px !important;
  background: transparent !important;
}
body.is-creative-image-page .topbar,
body:has(#page-creative-image.active) .topbar,
body:has(#page-creative-commerce-image.active) .topbar {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-bottom: 1px solid rgba(184,132,42,.12) !important;
  background: linear-gradient(180deg, rgba(255,253,248,.70), rgba(255,250,241,.48)) !important;
  backdrop-filter: blur(16px) saturate(1.02);
  box-shadow: 0 1px 0 rgba(255,255,255,.74) inset, 0 6px 18px rgba(116,78,22,.028) !important;
}

/* page-head: compact strip identical to avatar-console-head, override prior 20176 block */
body:has(#page-creative-image.active) #page-creative-image .page-head,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .page-head {
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 6px 4px 10px !important;
  border: none !important;
  border-bottom: 1px solid rgba(184,132,42,.10) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  overflow: visible !important;
}
body:has(#page-creative-image.active) #page-creative-image .page-head::after,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .page-head::after { content: none !important; }
body:has(#page-creative-image.active) #page-creative-image .page-head .kicker,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .page-head .kicker { display: none !important; }
body:has(#page-creative-image.active) #page-creative-image .page-head h1,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .page-head h1 {
  margin: 0 !important;
  color: #2c251e !important;
  font-family: STSong, Songti SC, Noto Serif SC, serif !important;
  font-size: clamp(17px, 1.5vw, 22px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body:has(#page-creative-image.active) #page-creative-image .page-head p,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .page-head p {
  max-width: none !important;
  margin: 3px 0 0 !important;
  color: #7f7366 !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* outer page wrapper: paper-card shell parity with avatar */
body:has(#page-creative-image.active) #page-creative-image .image-design-view.active,
body:has(#page-creative-image.active) #page-creative-image .image-entry-shell,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-tool {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(184,132,42,.22);
  border-radius: var(--studio-radius-shell);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,250,240,.64));
  box-shadow: 0 18px 46px rgba(116,78,22,.075), 0 5px 14px rgba(116,78,22,.034), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(176,126,44,.075);
}
body:has(#page-creative-image.active) #page-creative-image .image-design-view:not(.active) {
  display: none !important;
}

/* unify buttons */
body:has(#page-creative-image.active) .btn,
body:has(#page-creative-commerce-image.active) .btn {
  border-color: rgba(184,132,42,.16) !important;
  background: rgba(255,255,255,.66) !important;
  color: #81560d !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 4px 10px rgba(116,78,22,.028) !important;
  font-weight: 640;
  border-radius: 10px !important;
}
body:has(#page-creative-image.active) .btn.primary,
body:has(#page-creative-commerce-image.active) .btn.primary {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(151,93,10,.44) !important;
  background: linear-gradient(180deg, #f9d98d 0%, #e4aa3b 52%, #cf891f 100%) !important;
  color: #fffdf7 !important;
  box-shadow: 0 7px 14px rgba(170,103,9,.15), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(113,68,7,.20) !important;
  text-shadow: 0 1px 0 rgba(78,46,4,.22);
  font-weight: 680 !important;
}
body:has(#page-creative-image.active) .btn.primary::after,
body:has(#page-creative-commerce-image.active) .btn.primary::after { content: none !important; }
body:has(#page-creative-image.active) .btn.primary-soft,
body:has(#page-creative-commerce-image.active) .btn.primary-soft {
  background: linear-gradient(180deg, rgba(255,247,230,.92), rgba(247,230,196,.78)) !important;
  color: #9a6815 !important;
}

/* unified panels */
body:has(#page-creative-image.active) #page-creative-image .panel,
body:has(#page-creative-image.active) #page-creative-image .image-entry-composer,
body:has(#page-creative-image.active) #page-creative-image .image-studio-control,
body:has(#page-creative-image.active) #page-creative-image .image-studio-canvas,
body:has(#page-creative-image.active) #page-creative-image .image-studio-brief,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .panel,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-studio-panel,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-rail-card {
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius-card) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,241,.74)),
    radial-gradient(circle at 16% 0%, rgba(231,182,87,.10), transparent 38%) !important;
  box-shadow: 0 12px 28px rgba(85,58,24,.055), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* form fields */
body:has(#page-creative-image.active) #page-creative-image .input,
body:has(#page-creative-image.active) #page-creative-image .select,
body:has(#page-creative-image.active) #page-creative-image .textarea,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .input,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .select,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .textarea {
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius-field) !important;
  background: rgba(255,255,255,.86) !important;
  color: var(--studio-text) !important;
  font-size: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(184,132,42,.05) !important;
}
body:has(#page-creative-image.active) #page-creative-image .input:focus,
body:has(#page-creative-image.active) #page-creative-image .select:focus,
body:has(#page-creative-image.active) #page-creative-image .textarea:focus,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .input:focus,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .select:focus,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .textarea:focus {
  border-color: var(--studio-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(213,149,37,.18) !important;
}

/* image-design layout */
body:has(#page-creative-image.active) #page-creative-image {
  max-width: none !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-studio-layout {
  grid-template-columns: minmax(260px, 320px) minmax(440px, 1fr) minmax(280px, 320px) !important;
  gap: 12px !important;
}
body:has(#page-creative-image.active) #page-creative-image .creative-subnav {
  position: static !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  gap: 6px !important;
  margin: 0 0 10px !important;
  padding: 5px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.66) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}
body:has(#page-creative-image.active) #page-creative-image .creative-subnav button {
  min-height: 36px !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--studio-muted) !important;
  font-size: 12px !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
body:has(#page-creative-image.active) #page-creative-image .creative-subnav button.active,
body:has(#page-creative-image.active) #page-creative-image .creative-subnav button:hover {
  background: linear-gradient(180deg, #fff7e6 0%, #f4d58d 100%) !important;
  color: var(--studio-gold-deep) !important;
  box-shadow: 0 4px 10px rgba(159,106,19,.10), inset 0 1px 0 rgba(255,255,255,.74) !important;
}

/* commerce stepper as vertical flow inside left rail */
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  margin-bottom: 10px;
  padding: 6px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius-card) !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper button {
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 10px !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--studio-text) !important;
  text-align: left !important;
  cursor: pointer;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper button.active,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper:not(:has(button.active)) button:first-child {
  border-color: rgba(198,143,37,.32) !important;
  background: linear-gradient(180deg, rgba(255,250,238,.96), rgba(249,236,207,.62)) !important;
  color: var(--studio-gold-deep) !important;
  box-shadow: 0 6px 14px rgba(159,106,19,.07), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper button i {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  border: 1px solid var(--studio-line) !important;
  background: rgba(255,255,255,.78) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--studio-gold-deep) !important;
  font-style: normal;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper button.active i,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper:not(:has(button.active)) button:first-child i {
  background: linear-gradient(180deg, #fff7e6, #f4d58d) !important;
  border-color: var(--studio-gold) !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper button b {
  grid-row: 1; grid-column: 2;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: inherit !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper button span {
  grid-row: 2; grid-column: 2;
  font-size: 10.5px !important;
  color: var(--studio-muted) !important;
  font-style: normal !important;
  line-height: 1.3 !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-stepper button em { display: none !important; }

/* commerce stage panels: paper card with clear head */
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-studio-panel-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--studio-line) !important;
  background: linear-gradient(180deg, rgba(255,251,242,.78), rgba(255,247,231,.46)) !important;
  border-radius: var(--studio-radius-card) var(--studio-radius-card) 0 0 !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-studio-panel-head b {
  color: var(--studio-text) !important;
  font-family: STSong, Songti SC, Noto Serif SC, serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-studio-panel-head span {
  color: var(--studio-muted) !important;
  font-size: 11.5px !important;
}

/* commerce upload card */
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .upload {
  border: 1px dashed var(--studio-line-strong) !important;
  border-radius: var(--studio-radius-card) !important;
  background: rgba(255,247,225,.5) !important;
  padding: 18px !important;
  text-align: center;
  margin-bottom: 10px;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .upload strong { color: var(--studio-gold-deep); font-size: 13.5px; font-weight: 700; }
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .upload span { color: var(--studio-muted); font-size: 11px; }
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .upload:hover { border-color: var(--studio-gold) !important; background: rgba(255,247,225,.78) !important; }

/* image-design upload card */
body:has(#page-creative-image.active) #page-creative-image .image-entry-upload {
  border: 1px dashed var(--studio-line-strong) !important;
  border-radius: var(--studio-radius-card) !important;
  background: rgba(255,247,225,.5) !important;
  padding: 14px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-upload strong { color: var(--studio-gold-deep); font-size: 13px; font-weight: 700; }
body:has(#page-creative-image.active) #page-creative-image .image-entry-upload span { color: var(--studio-muted); font-size: 11px; }

/* api status pills */
body:has(#page-creative-image.active) #page-creative-image .api-status,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .api-status {
  padding: 5px 11px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--studio-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* compact field labels */
body:has(#page-creative-image.active) #page-creative-image .field > label,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .field > label {
  display: block;
  margin-bottom: 5px;
  color: var(--studio-text);
  font-size: 11.5px;
  font-weight: 660;
}

/* sidebar parity */
body:has(#page-creative-image.active) .sidebar,
body:has(#page-creative-commerce-image.active) .sidebar {
  border-right: 1px solid rgba(184,132,42,.11) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.77), rgba(255,251,244,.53)) !important;
  backdrop-filter: blur(18px) saturate(1.04);
  box-shadow: 12px 0 32px rgba(116,78,22,.04), inset -1px 0 0 rgba(255,255,255,.66) !important;
}
body:has(#page-creative-image.active) .nav-item.active,
body:has(#page-creative-commerce-image.active) .nav-item.active {
  border: 1px solid rgba(198,143,37,.17) !important;
  background: linear-gradient(180deg, rgba(255,250,238,.94), rgba(249,236,207,.60)) !important;
  color: #8b5f12 !important;
  box-shadow: 0 6px 16px rgba(159,106,19,.07), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

@media (max-width: 1180px) {
  body:has(#page-creative-image.active) .app-shell,
  body:has(#page-creative-commerce-image.active) .app-shell { grid-template-columns: 1fr; }
  body:has(#page-creative-image.active) #page-creative-image .image-studio-layout,
  body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-tool { grid-template-columns: 1fr !important; }
}

/* ========================================================
 * Round 2 fixes for image-design + commerce-image
 * - Hide page-head titles (user request)
 * - Fix image-design tab overlap (only .active visible)
 * - Restore template-selected card position
 * - Always show commerce-image stage 1 by default
 * ======================================================== */

/* HIDE the big "美图工作室 / 电商生图" page header, keep only top-bar context */
body:has(#page-creative-image.active) #page-creative-image > .page-head,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image > .page-head { display: none !important; }

/* Inspiration tab: ensure only active panel renders */
body:has(#page-creative-image.active) #page-creative-image .image-design-view { display: none; }
body:has(#page-creative-image.active) #page-creative-image .image-design-view.active { display: grid; }

/* Restore template-selected card to inline composer flow (no grid-area) */
body:has(#page-creative-image.active) #page-creative-image .image-selected-template-card {
  grid-area: auto !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 0 10px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius-card) !important;
  background: linear-gradient(180deg, rgba(255,253,247,.96), rgba(255,250,238,.78)) !important;
  box-shadow: 0 4px 10px rgba(116,78,22,.04), inset 0 1px 0 rgba(255,255,255,.84) !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-selected-template-card[hidden] { display: none !important; }
body:has(#page-creative-image.active) #page-creative-image .image-selected-template-media {
  width: 64px !important;
  aspect-ratio: 4/5 !important;
  border-radius: 8px !important;
  border: 1px solid var(--studio-line);
}
body:has(#page-creative-image.active) #page-creative-image .image-selected-template-body b {
  font-size: 12.5px !important;
  font-weight: 700 !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-selected-template-body span {
  color: var(--studio-muted) !important;
  font-size: 11px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-selected-template-body small {
  color: var(--studio-gold-deep) !important;
  font-size: 10.5px !important;
}

/* image-design composer: kill any grid-area positioning that legacy CSS imposes */
body:has(#page-creative-image.active) #page-creative-image .image-entry-command-card {
  display: block !important;
  grid-template-areas: none !important;
  grid-template-columns: none !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-main-field,
body:has(#page-creative-image.active) #page-creative-image .image-entry-command-tools,
body:has(#page-creative-image.active) #page-creative-image .image-entry-command-actions,
body:has(#page-creative-image.active) #page-creative-image .image-reference-list,
body:has(#page-creative-image.active) #page-creative-image .image-entry-live-workspace {
  grid-area: auto !important;
}

/* commerce-image: always show stage 1 panel even before JS init */
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-product-panel[data-commerce-image-stage="1"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}
/* Other stages: hidden until activated by JS */
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-studio-panel.commerce-image-stage:not(.active) {
  display: none !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-studio-panel.commerce-image-stage.active {
  display: grid !important;
}

/* Ensure upload card is the dominant element when entering commerce-image */
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-product-panel .commerce-image-upload,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-product-panel .upload {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 132px !important;
  padding: 24px 20px !important;
  border: 1.5px dashed var(--studio-line-strong) !important;
  border-radius: var(--studio-radius-card) !important;
  background:
    linear-gradient(180deg, rgba(255,253,247,.96), rgba(255,250,238,.78)),
    radial-gradient(circle at 50% 0%, rgba(245,196,105,.18), transparent 60%) !important;
  text-align: center !important;
  cursor: pointer !important;
  position: relative;
  overflow: hidden;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-product-panel .commerce-image-upload::before,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-product-panel .upload::before {
  content: "↑";
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7e6, #f4d58d);
  color: var(--studio-gold-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  margin-bottom: 4px;
  box-shadow: 0 4px 10px rgba(159,106,19,.10);
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-product-panel .commerce-image-upload strong,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-product-panel .upload strong {
  font-size: 14.5px !important;
  color: var(--studio-text) !important;
  font-weight: 700 !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-product-panel .commerce-image-upload span,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-product-panel .upload span {
  font-size: 11.5px !important;
  color: var(--studio-muted) !important;
}

/* commerce-image: hide unused cost/preview details that confuse users early */
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-image-side-summary { display: none !important; }

/* ========== ROUND 3: compact size + resolution rows in image-design entry ========== */

/* shrink the two tool cards' inner padding and label sizes */
body:has(#page-creative-image.active) #page-creative-image .image-entry-tool-card.compact {
  padding: 8px 10px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-tool-card.compact .image-entry-card-head {
  margin-bottom: 6px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-tool-card.compact .image-entry-card-head b {
  font-size: 11.5px !important;
  font-weight: 660 !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-tool-card.compact .image-entry-card-head span {
  font-size: 10.5px !important;
  color: var(--studio-muted) !important;
}

/* size row: small chips, no description visible by default */
body:has(#page-creative-image.active) #page-creative-image .image-entry-size-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-size-row button {
  min-height: 30px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--studio-text) !important;
  font-size: 11px !important;
  font-weight: 660 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  line-height: 1 !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-size-row button b {
  font-size: 11px !important;
  font-weight: 660 !important;
  color: inherit !important;
  margin: 0 !important;
  display: inline !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-size-row button span {
  display: none !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-size-row button.active,
body:has(#page-creative-image.active) #page-creative-image .image-entry-size-row button:hover {
  border-color: var(--studio-gold) !important;
  background: linear-gradient(180deg, #fff7e6, #f7e6c4) !important;
  color: var(--studio-gold-deep) !important;
}

/* resolution row in entry: chip-style, compact */
body:has(#page-creative-image.active) #page-creative-image .image-resolution-row.compact {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-resolution-row.compact button {
  min-height: 30px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--studio-text) !important;
  font-size: 11px !important;
  font-weight: 660 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  line-height: 1 !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-resolution-row.compact button b {
  font-size: 11px !important;
  font-weight: 660 !important;
  color: inherit !important;
  margin: 0 !important;
  display: inline !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-resolution-row.compact button span,
body:has(#page-creative-image.active) #page-creative-image .image-resolution-row.compact button em,
body:has(#page-creative-image.active) #page-creative-image .image-resolution-row.compact button small {
  display: none !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-resolution-row.compact button.active,
body:has(#page-creative-image.active) #page-creative-image .image-resolution-row.compact button:hover {
  border-color: var(--studio-gold) !important;
  background: linear-gradient(180deg, #fff7e6, #f7e6c4) !important;
  color: var(--studio-gold-deep) !important;
}

/* compact resolution row in commerce-image stage 3 should follow same scheme */
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-resolution-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important;
  gap: 4px !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-resolution-row button {
  min-height: 30px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 660 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  line-height: 1 !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-resolution-row button b {
  font-size: 11px !important;
  font-weight: 660 !important;
  color: inherit !important;
  margin: 0 !important;
  display: inline !important;
}
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-resolution-row button span,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-resolution-row button em,
body:has(#page-creative-commerce-image.active) #page-creative-commerce-image .commerce-resolution-row button small {
  display: none !important;
}

/* Also slim the command tool grid so size/resolution cards are about half their previous height */
body:has(#page-creative-image.active) #page-creative-image .image-entry-command-tools {
  align-items: start !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-command-actions .btn {
  min-height: 30px !important;
  font-size: 12px !important;
}

/* ========== ROUND 4: hide inner studio header, polish history shelf ========== */

/* Hide inner "IMAGE STUDIO / 美图工作室" header block - user request */
body:has(#page-creative-image.active) #page-creative-image .image-entry-studio-head {
  display: none !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-composer { padding-top: 12px !important; }

/* size row: now 7 chips, 4 cols on first row + 3 on second */
body:has(#page-creative-image.active) #page-creative-image .image-entry-size-row {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

/* Section head for history works - clearer */
body:has(#page-creative-image.active) #page-creative-image .image-entry-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius-card) !important;
  background: linear-gradient(180deg, rgba(255,251,242,.86), rgba(255,247,231,.62)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-section-head .kicker { display: none !important; }
body:has(#page-creative-image.active) #page-creative-image .image-entry-section-head h2,
body:has(#page-creative-image.active) #page-creative-image .image-entry-section-head h3 {
  margin: 0 !important;
  font-family: STSong, Songti SC, Noto Serif SC, serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--studio-text) !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-section-head .btn {
  min-height: 28px !important;
  padding: 0 11px !important;
  font-size: 11.5px !important;
}

/* Recent shelf cards: warmer borders, golden hover, clearer placeholder */
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 0 !important;
}
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf > button {
  padding: 8px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius-card) !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: 0 4px 10px rgba(116,78,22,.04), inset 0 1px 0 rgba(255,255,255,.78) !important;
  transition: all .15s;
}
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf > button:hover {
  border-color: var(--studio-gold) !important;
  background: rgba(255,250,238,.94) !important;
  box-shadow: 0 8px 18px rgba(159,106,19,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf > button > span {
  aspect-ratio: 4 / 5 !important;
  margin-bottom: 6px !important;
  border-radius: 10px !important;
  border: 1px solid var(--studio-line) !important;
  background: linear-gradient(180deg, rgba(255,250,238,.86), rgba(255,247,231,.66)) !important;
  color: var(--studio-gold-deep) !important;
  font-size: 12px !important;
  font-weight: 660 !important;
}
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf > button b {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--studio-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf > button em {
  font-size: 11px !important;
  color: var(--studio-muted) !important;
  margin-top: 2px !important;
}
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf > button img {
  border-radius: 10px !important;
}

/* Recent shelf empty state */
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf:empty::after {
  content: "暂无历史作品，点击上方“生成图片”开始创作";
  display: block;
  grid-column: 1 / -1;
  padding: 32px;
  border: 1px dashed var(--studio-line);
  border-radius: var(--studio-radius-card);
  background: rgba(255,247,225,.42);
  color: var(--studio-muted);
  font-size: 12.5px;
  text-align: center;
}

/* ========== IMAGE DESIGN FINAL LAYOUT FIX 2026-05-30 ========== */
body:has(#page-creative-image.active) #page-creative-image .image-design-view.active {
  align-items: stretch !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-shell,
body:has(#page-creative-image.active) #page-creative-image .image-entry-composer,
body:has(#page-creative-image.active) #page-creative-image .image-entry-command-card {
  min-width: 0 !important;
  overflow: visible !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-composer {
  display: grid !important;
  gap: 14px !important;
  padding: 14px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-command-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
  grid-template-areas:
    "prompt tools"
    "refs tools"
    "live live" !important;
  gap: 14px !important;
  align-items: start !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-main-field {
  grid-area: prompt !important;
  grid-row: auto !important;
  min-width: 0 !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-command-tools {
  grid-area: tools !important;
  position: static !important;
  top: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius-card) !important;
  background: rgba(255,253,248,.76) !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-textarea {
  min-height: 220px !important;
  max-height: none !important;
  height: clamp(220px, 30vh, 360px) !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-reference-list.compact {
  grid-area: refs !important;
  margin: 0 !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-live-workspace {
  grid-area: live !important;
  margin: 0 !important;
  scroll-margin-top: 76px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-live-grid {
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) !important;
  align-items: stretch !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-live-preview {
  min-height: 220px !important;
  max-height: 360px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-live-output {
  min-height: 220px !important;
  max-height: 360px !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-recent {
  margin-top: 0 !important;
  padding: 12px !important;
  overflow: visible !important;
}
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  max-height: none !important;
  overflow: visible !important;
}
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf > button {
  min-width: 0 !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-entry-size-row {
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)) !important;
}
body:has(#page-creative-image.active) #page-creative-image .image-resolution-row.compact {
  grid-template-columns: repeat(3, minmax(64px, 1fr)) !important;
}
@media (max-width: 1320px) {
  body:has(#page-creative-image.active) #page-creative-image .image-entry-command-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "prompt"
      "tools"
      "refs"
      "live" !important;
  }
  body:has(#page-creative-image.active) #page-creative-image .image-entry-command-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body:has(#page-creative-image.active) #page-creative-image .image-design-button-row.image-entry-command-actions {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 820px) {
  body:has(#page-creative-image.active) #page-creative-image .image-entry-command-tools,
  body:has(#page-creative-image.active) #page-creative-image .image-entry-live-grid {
    grid-template-columns: 1fr !important;
  }
  body:has(#page-creative-image.active) #page-creative-image .image-entry-textarea {
    height: auto !important;
    min-height: 180px !important;
  }
}

/* ========== IMAGE DESIGN HISTORY THUMBNAIL GRID 2026-05-30 ========== */
body.is-creative-image-page #page-creative-image .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-home-recent-shelf {
  display: grid !important;
  gap: 10px !important;
  margin-top: 0 !important;
  overflow: visible !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-grid,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(150px, 15vw) !important;
  gap: 10px !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-card,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-card {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: var(--studio-radius-card) !important;
  background: rgba(255,250,238,.72) !important;
  box-shadow: 0 6px 14px rgba(116,78,22,.05), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-thumb,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-thumb {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: block !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-thumb img,
body.is-creative-image-page #page-creative-image .image-gallery-thumb span,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-thumb img,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-thumb span {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  display: grid !important;
  place-items: center !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-overlay,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-overlay {
  position: absolute !important;
  inset: auto 0 0 !important;
  display: grid !important;
  gap: 7px !important;
  padding: 46px 10px 10px !important;
  background: linear-gradient(180deg, rgba(34,24,12,0), rgba(34,24,12,.78) 36%, rgba(34,24,12,.92)) !important;
  color: #fffaf1 !important;
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity .16s ease, transform .16s ease !important;
  pointer-events: none !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-card:hover .image-gallery-overlay,
body.is-creative-image-page #page-creative-image .image-gallery-card:focus-within .image-gallery-overlay,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-card:hover .image-gallery-overlay,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-card:focus-within .image-gallery-overlay {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-overlay b,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-overlay b {
  color: #fffaf1 !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-overlay p,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-overlay p {
  margin: 0 !important;
  color: rgba(255,250,241,.82) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-actions,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-actions .btn,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-actions .btn {
  min-height: 28px !important;
  padding: 0 9px !important;
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.90) !important;
  color: #81560d !important;
  font-size: 11px !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-more,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-more {
  justify-self: center !important;
  min-height: 34px !important;
  padding: 0 16px !important;
}
@media (max-width: 1320px) {
  body.is-creative-image-page #page-creative-image .image-gallery-grid,
  body:has(#page-creative-image.active) #page-creative-image .image-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 820px) {
  body.is-creative-image-page #page-creative-image .image-gallery-grid,
  body:has(#page-creative-image.active) #page-creative-image .image-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(140px, 42vw) !important;
  }
}

/* ========== IMAGE DESIGN TOPBAR PARITY 2026-05-30 ========== */
body.is-creative-image-page .topbar,
body:has(#page-creative-image.active) .topbar {
  height: 34px !important;
  min-height: 34px !important;
  display: flex !important;
  padding: 0 14px !important;
  border-bottom: 1px solid rgba(184,132,42,.12) !important;
  background: linear-gradient(180deg, rgba(255,253,248,.70), rgba(255,250,241,.48)) !important;
  backdrop-filter: blur(16px) saturate(1.02);
  -webkit-backdrop-filter: blur(16px) saturate(1.02);
  box-shadow: 0 1px 0 rgba(255,255,255,.74) inset, 0 6px 18px rgba(116,78,22,.028) !important;
}
body.is-creative-image-page .topbar .search,
body.is-creative-image-page .topbar .workspace-chip,
body.is-creative-image-page .topbar .top-actions,
body:has(#page-creative-image.active) .topbar .search,
body:has(#page-creative-image.active) .topbar .workspace-chip,
body:has(#page-creative-image.active) .topbar .top-actions {
  display: none !important;
}

/* ========== IMAGE DESIGN HISTORY WIDTH FIX 2026-05-30 ========== */
body.is-creative-image-page #page-creative-image .image-entry-recent .image-home-recent-shelf,
body:has(#page-creative-image.active) #page-creative-image .image-entry-recent .image-home-recent-shelf {
  display: block !important;
  width: 100% !important;
}
body.is-creative-image-page #page-creative-image .image-entry-recent .image-gallery-grid,
body:has(#page-creative-image.active) #page-creative-image .image-entry-recent .image-gallery-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(150px, 15vw) !important;
  gap: 10px !important;
}

/* ========== IMAGE DESIGN HISTORY + VIEWER REFINEMENT 2026-05-30 ========== */
body.is-creative-image-page #page-creative-image .image-entry-recent,
body:has(#page-creative-image.active) #page-creative-image .image-entry-recent {
  max-height: none !important;
  overflow: visible !important;
  padding: 12px !important;
}
body.is-creative-image-page #page-creative-image .image-entry-recent .image-gallery-grid,
body:has(#page-creative-image.active) #page-creative-image .image-entry-recent .image-gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 14px !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-card,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, auto) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border-color: rgba(183, 128, 39, .20) !important;
  background: linear-gradient(180deg, rgba(255,253,248,.96), rgba(255,248,236,.84)) !important;
  box-shadow: 0 12px 28px rgba(85, 57, 18, .075), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-thumb,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-thumb {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(183, 128, 39, .14) !important;
  cursor: zoom-in !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-thumb img,
body.is-creative-image-page #page-creative-image .image-gallery-thumb span,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-thumb img,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-thumb span {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform .22s ease !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-card:hover .image-gallery-thumb img,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-card:hover .image-gallery-thumb img {
  transform: scale(1.025) !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-body,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-body {
  display: grid !important;
  gap: 9px !important;
  padding: 12px !important;
  min-width: 0 !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-title-row,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-title-row {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-title-row b,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-title-row b {
  color: var(--studio-text) !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-title-row span,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-title-row span {
  color: var(--studio-muted) !important;
  font-size: 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-body p,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-body p {
  margin: 0 !important;
  color: rgba(69, 49, 23, .74) !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-actions,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-actions,
body.is-creative-image-page #page-creative-image .image-project-actions,
body:has(#page-creative-image.active) #page-creative-image .image-project-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}
body.is-creative-image-page #page-creative-image .image-gallery-actions .btn,
body:has(#page-creative-image.active) #page-creative-image .image-gallery-actions .btn,
body.is-creative-image-page #page-creative-image .image-project-actions .btn,
body:has(#page-creative-image.active) #page-creative-image .image-project-actions .btn {
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}
body.is-creative-image-page #page-creative-image .image-design-project-grid,
body:has(#page-creative-image.active) #page-creative-image .image-design-project-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}
body.is-creative-image-page #page-creative-image .image-project-card,
body:has(#page-creative-image.active) #page-creative-image .image-project-card {
  display: grid !important;
  border-radius: 18px !important;
  border-color: rgba(183, 128, 39, .20) !important;
  background: linear-gradient(180deg, rgba(255,253,248,.96), rgba(255,248,236,.84)) !important;
  box-shadow: 0 12px 28px rgba(85, 57, 18, .075), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
body.is-creative-image-page #page-creative-image .image-project-thumb,
body:has(#page-creative-image.active) #page-creative-image .image-project-thumb {
  aspect-ratio: 4 / 5 !important;
  border-bottom: 1px solid rgba(183, 128, 39, .14) !important;
}
body.is-creative-image-page #page-creative-image .image-project-body,
body:has(#page-creative-image.active) #page-creative-image .image-project-body {
  padding: 12px !important;
}
body.is-creative-image-page .image-lightbox-backdrop.active,
body:has(#page-creative-image.active) .image-lightbox-backdrop.active {
  display: grid !important;
  place-items: stretch !important;
  z-index: 240 !important;
  padding: 12px !important;
  background: rgba(16, 13, 10, .78) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}
body.is-creative-image-page .image-lightbox-modal,
body:has(#page-creative-image.active) .image-lightbox-modal {
  width: min(1760px, calc(100vw - 24px)) !important;
  height: calc(100vh - 24px) !important;
  max-height: none !important;
  padding: 14px !important;
  border-radius: 22px !important;
  border-color: rgba(255,255,255,.16) !important;
  background: linear-gradient(180deg, rgba(36, 29, 21, .96), rgba(20, 17, 13, .98)) !important;
  color: #fff8ea !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.42) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}
body.is-creative-image-page .image-lightbox-modal .modal-head,
body:has(#page-creative-image.active) .image-lightbox-modal .modal-head {
  align-items: flex-start !important;
  padding: 2px 2px 0 !important;
}
body.is-creative-image-page .image-lightbox-modal .modal-head h3,
body:has(#page-creative-image.active) .image-lightbox-modal .modal-head h3 {
  color: #fff8ea !important;
  font-size: 18px !important;
}
body.is-creative-image-page .image-lightbox-modal .modal-head p,
body:has(#page-creative-image.active) .image-lightbox-modal .modal-head p {
  margin: 5px 0 0 !important;
  color: rgba(255,248,234,.66) !important;
}
body.is-creative-image-page .image-lightbox-toolbar,
body:has(#page-creative-image.active) .image-lightbox-toolbar {
  margin: 12px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
body.is-creative-image-page .image-lightbox-toolbar .btn,
body:has(#page-creative-image.active) .image-lightbox-toolbar .btn,
body.is-creative-image-page .image-lightbox-modal .icon-btn,
body:has(#page-creative-image.active) .image-lightbox-modal .icon-btn {
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff8ea !important;
}
body.is-creative-image-page .image-lightbox-toolbar .btn.primary,
body:has(#page-creative-image.active) .image-lightbox-toolbar .btn.primary {
  background: linear-gradient(180deg, #f0c66a, #c88b22) !important;
  color: #2d1f0f !important;
}
body.is-creative-image-page .image-lightbox-media,
body:has(#page-creative-image.active) .image-lightbox-media {
  min-height: 0 !important;
  height: 100% !important;
  padding: 24px !important;
  display: block !important;
  overflow: auto !important;
  border-radius: 18px !important;
  border-color: rgba(255,255,255,.14) !important;
  background:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.06) 75%),
    #11100e !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0 !important;
  background-size: 24px 24px !important;
  cursor: zoom-in !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
body.is-creative-image-page .image-lightbox-media.can-pan,
body:has(#page-creative-image.active) .image-lightbox-media.can-pan {
  cursor: grab !important;
}
body.is-creative-image-page .image-lightbox-media.is-panning,
body:has(#page-creative-image.active) .image-lightbox-media.is-panning {
  cursor: grabbing !important;
}
body.is-creative-image-page .image-lightbox-frame,
body:has(#page-creative-image.active) .image-lightbox-frame {
  display: grid !important;
  justify-items: center !important;
  align-items: start !important;
  width: max-content !important;
  min-width: 100% !important;
  min-height: 100% !important;
  padding: 8px 0 42px !important;
}
body.is-creative-image-page .image-lightbox-media img,
body:has(#page-creative-image.active) .image-lightbox-media img {
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.46) !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
@media (max-width: 900px) {
  body.is-creative-image-page #page-creative-image .image-entry-recent .image-gallery-grid,
  body:has(#page-creative-image.active) #page-creative-image .image-entry-recent .image-gallery-grid,
  body.is-creative-image-page #page-creative-image .image-design-project-grid,
  body:has(#page-creative-image.active) #page-creative-image .image-design-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.is-creative-image-page .image-lightbox-backdrop.active,
  body:has(#page-creative-image.active) .image-lightbox-backdrop.active {
    padding: 6px !important;
  }
  body.is-creative-image-page .image-lightbox-modal,
  body:has(#page-creative-image.active) .image-lightbox-modal {
    width: calc(100vw - 12px) !important;
    height: calc(100vh - 12px) !important;
    padding: 10px !important;
  }
  body.is-creative-image-page .image-lightbox-media,
  body:has(#page-creative-image.active) .image-lightbox-media {
    padding: 12px !important;
  }
}

/* Maiglow Ops Console v2 — data-first SaaS admin workspace */
body.admin-mode,
body:has(#page-ops.active) {
  --ops-bg: #f6f2ea;
  --ops-surface: #fffffc;
  --ops-surface-soft: #fbf8f1;
  --ops-ink: #221f1a;
  --ops-muted: #746b5d;
  --ops-subtle: #9a8c77;
  --ops-line: rgba(54, 46, 35, .105);
  --ops-line-strong: rgba(54, 46, 35, .17);
  --ops-gold: #b98221;
  --ops-gold-dark: #7b5417;
  --ops-green: #24734d;
  --ops-red: #a13d32;
  --ops-shadow: 0 16px 36px rgba(60, 44, 21, .075);
  background: var(--ops-bg) !important;
  color: var(--ops-ink);
}

body.admin-mode .main,
body:has(#page-ops.active) .main {
  background: var(--ops-bg) !important;
}

body.admin-mode .content,
body:has(#page-ops.active) .content {
  padding: 18px 22px 30px !important;
  background:
    linear-gradient(90deg, rgba(54,46,35,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(54,46,35,.028) 1px, transparent 1px),
    var(--ops-bg) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
}

body.admin-mode .topbar,
body:has(#page-ops.active) .topbar {
  height: 54px !important;
  min-height: 54px !important;
  margin: 12px 18px 0 !important;
  border: 1px solid var(--ops-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 252, .86) !important;
  box-shadow: 0 8px 26px rgba(60,44,21,.045) !important;
  backdrop-filter: blur(14px) saturate(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(1.02);
}

body.admin-mode .search,
body:has(#page-ops.active) .search {
  max-width: 480px;
  height: 36px;
  border-color: var(--ops-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.admin-mode .workspace-chip,
body:has(#page-ops.active) .workspace-chip,
body.admin-mode .account-chip,
body:has(#page-ops.active) .account-chip {
  min-height: 36px !important;
  border-color: var(--ops-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.admin-mode #adminLogoutBtn {
  display: inline-flex;
  height: 36px;
  align-items: center;
  border-color: var(--ops-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ops-ink) !important;
  box-shadow: none !important;
}

.admin-auth-backdrop {
  z-index: 90;
  background: rgba(23, 27, 30, .46) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.admin-auth-modal {
  width: min(520px, calc(100vw - 32px));
  border-radius: 12px !important;
  border: 1px solid rgba(32, 42, 52, .14);
  background: #fffffc !important;
  box-shadow: 0 24px 70px rgba(18, 26, 34, .20);
}

.admin-auth-modal .modal-head {
  align-items: flex-start;
}

.admin-auth-modal .modal-head h3 {
  color: #1f2a33;
  font-size: 20px;
}

.admin-auth-modal .modal-head p {
  max-width: 430px;
  color: #65717b;
}

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

.admin-auth-modal .modal-field input {
  border-radius: 9px !important;
  border-color: rgba(32, 42, 52, .18) !important;
  background: #fff !important;
}

.admin-token-login {
  margin: 4px 0 8px;
  color: #65717b;
  font-size: 12px;
}

.admin-token-login summary {
  cursor: pointer;
  font-weight: 760;
}

.admin-token-login .modal-field {
  margin-top: 10px;
}

.admin-auth-modal .api-status {
  min-height: 38px;
}

#page-ops {
  color: var(--ops-ink);
}

#page-ops .ops-console-shell {
  display: grid;
  gap: 12px;
  max-width: none;
}

#page-ops .ops-command-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: 4px 2px 10px;
  border-bottom: 1px solid var(--ops-line);
}

#page-ops .ops-title-block .kicker {
  margin: 0 0 6px;
  color: var(--ops-gold-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .13em;
}

#page-ops .ops-title-block h1 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.04em;
}

#page-ops .ops-title-block p {
  max-width: 760px;
  margin: 7px 0 0;
  color: var(--ops-muted);
  font-size: 13px;
  line-height: 1.45;
}

#page-ops .ops-command-actions,
#page-ops .ops-command-bar .page-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

#page-ops .btn {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--ops-line-strong) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--ops-ink) !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 740;
}

#page-ops .btn:hover {
  border-color: rgba(185,130,33,.34) !important;
  background: #fffaf0 !important;
}

#page-ops .btn.primary {
  border-color: rgba(123,84,23,.55) !important;
  background: linear-gradient(180deg, #c89437, #a36c16) !important;
  color: #fffaf0 !important;
  box-shadow: 0 8px 18px rgba(123,84,23,.16) !important;
}

#page-ops .ops-status-strip {
  display: grid;
  grid-template-columns: minmax(280px, .55fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

#page-ops .ops-env-banner {
  min-height: 76px;
  margin: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid var(--ops-line) !important;
  border-left: 3px solid var(--ops-gold) !important;
  border-radius: 12px !important;
  background: var(--ops-surface) !important;
  color: var(--ops-muted) !important;
  box-shadow: none !important;
  display: grid;
  align-content: center;
  gap: 5px;
}

#page-ops .ops-env-banner b {
  color: var(--ops-ink) !important;
  font-size: 13px;
}

#page-ops .ops-env-banner span {
  font-size: 12px;
  line-height: 1.45;
}

#page-ops .ops-env-banner em {
  color: var(--ops-subtle);
  font-size: 11px;
  font-style: normal;
}

#page-ops .ops-env-banner.is-production {
  border-left-color: #d1493f !important;
  background: #fff7f6 !important;
}

#page-ops .ops-env-banner.is-production b {
  color: #9d3028 !important;
}

#page-ops .ops-env-banner.is-local {
  border-left-color: #8b99a8 !important;
}

#page-ops .ops-resource-metrics,
#page-ops .stat-grid.compact.ops-resource-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 !important;
}

#page-ops .stat.card,
#page-ops .card,
#page-ops .panel,
#page-ops .ops-form {
  border: 1px solid var(--ops-line) !important;
  border-radius: 12px !important;
  background: var(--ops-surface) !important;
  box-shadow: none !important;
}

#page-ops .stat.card {
  min-height: 76px;
  padding: 13px 14px !important;
  display: grid;
  align-content: center;
  gap: 4px;
}

#page-ops .stat.card small,
#page-ops .stat.card span {
  color: var(--ops-muted) !important;
  font-size: 12px;
}

#page-ops .stat.card strong {
  color: var(--ops-ink) !important;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.03em;
}

#page-ops .ops-workspace-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 7px;
  border: 1px solid var(--ops-line);
  border-radius: 12px;
  background: rgba(255,255,252,.90);
  box-shadow: 0 8px 22px rgba(60,44,21,.045);
  backdrop-filter: blur(14px) saturate(1.02);
  -webkit-backdrop-filter: blur(14px) saturate(1.02);
}

#page-ops .ops-workspace-nav button,
#page-ops .ops-tabs button {
  flex: 0 0 auto;
  min-height: 38px !important;
  padding: 0 13px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--ops-muted) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  text-align: left;
  box-shadow: none !important;
}

#page-ops .ops-workspace-nav button b,
#page-ops .ops-tabs button b {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 780;
}

#page-ops .ops-workspace-nav button span,
#page-ops .ops-tabs button span {
  margin: 0 !important;
  color: var(--ops-subtle) !important;
  font-size: 11px !important;
  line-height: 1;
}

#page-ops .ops-workspace-nav button.active,
#page-ops .ops-tabs button.active {
  border-color: rgba(185,130,33,.28) !important;
  background: #fff7e8 !important;
  color: var(--ops-gold-dark) !important;
  box-shadow: none !important;
}

#page-ops .ops-layout,
body.admin-mode #page-ops .ops-layout {
  display: block !important;
  margin-top: 0;
}

#page-ops .ops-side-panel,
body.admin-mode #page-ops .ops-side-panel {
  display: none !important;
}

#page-ops .ops-main {
  min-width: 0;
}

#page-ops .ops-section.active {
  display: block;
}

#page-ops .ops-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
  gap: 10px !important;
  align-items: stretch;
}

#page-ops .ops-dashboard-grid.secondary {
  grid-template-columns: minmax(360px, .9fr) minmax(320px, .7fr) minmax(420px, 1fr) minmax(300px, .65fr) !important;
  margin-top: 10px !important;
}

#page-ops .panel {
  padding: 0 !important;
  overflow: hidden;
}

#page-ops .panel-head {
  min-height: 54px;
  padding: 13px 16px 11px !important;
  border-bottom: 1px solid var(--ops-line);
  background: linear-gradient(180deg, #fff, #fdfaf4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#page-ops .panel-head h2 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 15px !important;
  line-height: 1.25;
  letter-spacing: -.01em;
}

#page-ops .panel-head p {
  margin: 3px 0 0;
  color: var(--ops-muted) !important;
  font-size: 12px !important;
  line-height: 1.35;
}

#page-ops .ops-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(116px, 1fr)) !important;
  gap: 0 !important;
  padding: 0;
}

#page-ops .ops-kpi-card {
  min-height: 116px !important;
  padding: 14px !important;
  border: 0 !important;
  border-right: 1px solid var(--ops-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  align-content: space-between;
}

#page-ops .ops-kpi-card:last-child {
  border-right: 0 !important;
}

#page-ops .ops-kpi-card:hover {
  background: #fffaf0 !important;
}

#page-ops .ops-kpi-card span,
#page-ops .ops-kpi-card em {
  color: var(--ops-muted) !important;
  font-size: 12px !important;
}

#page-ops .ops-kpi-card b {
  color: var(--ops-ink);
  font-size: 24px !important;
  letter-spacing: -.04em;
}

#page-ops .ops-funnel,
#page-ops .ops-trend-list,
#page-ops .ops-alert-list,
#page-ops .ops-action-center {
  padding: 14px 16px 16px;
}

#page-ops .ops-funnel button {
  grid-template-columns: 54px minmax(0, 1fr) 52px !important;
  min-height: 30px;
  color: var(--ops-muted) !important;
}

#page-ops .ops-funnel i {
  height: 7px !important;
  background: linear-gradient(90deg, var(--ops-gold-dark), #d0a046) !important;
}

#page-ops .ops-action-center {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
}

#page-ops .ops-action-center button {
  min-height: 64px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ops-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

#page-ops .ops-action-center button:last-child {
  border-bottom: 0 !important;
}

#page-ops .ops-action-center i {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: #f3eadc !important;
  color: var(--ops-gold-dark) !important;
  font-size: 12px !important;
}

#page-ops .ops-action-center b {
  font-size: 13px !important;
}

#page-ops .ops-action-center em {
  color: var(--ops-muted) !important;
  font-size: 12px !important;
}

#page-ops .ops-trend-item {
  grid-template-columns: 48px minmax(0, 1fr) 80px !important;
}

#page-ops .ops-trend-item i {
  height: 7px !important;
  background: #f0e7d8 !important;
}

#page-ops .ops-table-wrap {
  width: 100%;
  overflow: auto;
  background: #fff;
}

#page-ops .ops-table {
  min-width: 760px;
  border-collapse: separate !important;
  border-spacing: 0;
  font-size: 12px !important;
}

#page-ops .ops-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--ops-line-strong) !important;
  background: #fbf8f1 !important;
  color: var(--ops-muted) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  letter-spacing: .02em;
}

#page-ops .ops-table td {
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--ops-line) !important;
  color: var(--ops-ink) !important;
  background: #fff;
}

#page-ops .ops-table tbody tr:hover td,
#page-ops .ops-clickable-table tbody tr:hover td,
#page-ops #opsTopUsersBody tr:hover td,
#page-ops #opsTasksBody tr:hover td,
#page-ops .ops-table tr.active td {
  background: #fff9ec !important;
}

#page-ops .ops-table td b {
  color: var(--ops-ink);
  font-size: 12px !important;
  font-weight: 760;
}

#page-ops .ops-table td span:not(.status) {
  color: var(--ops-muted) !important;
  font-size: 11px !important;
}

#page-ops .status {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 780 !important;
}

#page-ops .ops-alert {
  border: 0 !important;
  border-bottom: 1px solid var(--ops-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 0 !important;
}

#page-ops .ops-alert:last-child {
  border-bottom: 0 !important;
}

#page-ops .ops-stacked-panels {
  gap: 10px !important;
}

#page-ops .ops-membership-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
}

#page-ops .ops-form {
  padding: 14px !important;
  gap: 10px !important;
  background: #fff !important;
}

#page-ops .field label,
#page-ops .modal-field {
  color: var(--ops-muted) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  letter-spacing: .02em;
}

#page-ops .input,
#page-ops .select,
#page-ops .textarea {
  border-color: var(--ops-line-strong) !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--ops-ink) !important;
}

#page-ops .textarea {
  min-height: 104px;
}

#page-ops .ops-editor-grid {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch;
}

#page-ops .ops-editor-grid > .ops-list,
#page-ops .ops-editor-grid > .ops-table-wrap,
#page-ops .ops-plan-grid {
  border-right: 1px solid var(--ops-line);
}

#page-ops .ops-plan-editor {
  grid-template-columns: minmax(360px, .78fr) minmax(420px, 1fr) !important;
}

#page-ops .ops-list,
#page-ops .ops-plan-grid {
  max-height: none !important;
  padding: 12px !important;
  gap: 8px !important;
  background: var(--ops-surface-soft);
}

#page-ops .ops-plan-grid {
  grid-template-columns: 1fr !important;
}

#page-ops .ops-list-item,
#page-ops .ops-plan-card {
  min-height: 62px !important;
  padding: 11px 12px !important;
  border: 1px solid var(--ops-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

#page-ops .ops-list-item.active,
#page-ops .ops-plan-card.active {
  border-color: rgba(185,130,33,.36) !important;
  background: #fff8e9 !important;
  box-shadow: inset 3px 0 0 var(--ops-gold) !important;
}

#page-ops .ops-list-item i {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: #f1e7d7 !important;
  color: var(--ops-gold-dark) !important;
}

#page-ops .ops-plan-card {
  min-height: 138px !important;
  gap: 8px !important;
}

#page-ops .ops-plan-card strong {
  font-size: 20px !important;
}

#page-ops .ops-quota-list span {
  background: #f1e7d7 !important;
  color: var(--ops-gold-dark) !important;
}

#page-ops .ops-plan-access-panel,
#page-ops .ops-billing-rule-table,
#page-ops .ops-standard-unit-panel,
#page-ops .ops-image-resolution-price-panel,
#page-ops .ops-audio-preview,
#page-ops .ops-code-output {
  border: 1px solid var(--ops-line) !important;
  border-radius: 10px !important;
  background: var(--ops-surface-soft) !important;
  box-shadow: none !important;
}

#page-ops .ops-form-actions {
  padding-top: 4px;
  justify-content: flex-end;
}

#page-ops .ops-two-col {
  gap: 12px !important;
  padding: 12px;
}

#page-ops [data-ops-panel="rules"] > .panel > .btn.primary,
#page-ops [data-ops-panel="membership"] > .panel > .btn.primary {
  margin: 0 12px 12px auto;
  display: flex;
}

@media (max-width: 1500px) {
  #page-ops .ops-dashboard-grid.secondary {
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  }
  #page-ops .ops-kpi-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
  }
  #page-ops .ops-kpi-card:nth-child(3n) {
    border-right: 0 !important;
  }
}

@media (max-width: 1100px) {
  #page-ops .ops-command-bar,
  #page-ops .ops-status-strip,
  #page-ops .ops-dashboard-grid,
  #page-ops .ops-dashboard-grid.secondary,
  #page-ops .ops-editor-grid,
  #page-ops .ops-plan-editor,
  #page-ops .ops-membership-tools {
    grid-template-columns: 1fr !important;
  }
  #page-ops .ops-editor-grid > .ops-list,
  #page-ops .ops-editor-grid > .ops-table-wrap,
  #page-ops .ops-plan-grid {
    border-right: 0;
    border-bottom: 1px solid var(--ops-line);
  }
  #page-ops .ops-resource-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .admin-auth-grid {
    grid-template-columns: 1fr;
  }
}