: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-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  background: rgba(42,33,24,.58);
  color: #fffaf1;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.2;
  box-shadow: 0 8px 20px rgba(42,33,24,.18);
  backdrop-filter: blur(10px);
}

.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;
  gap: 10px;
  align-items: center;
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #dba348, #b97714);
  font-weight: 800;
}
.brand-title { font-size: 17px; font-weight: 780; letter-spacing: 0; }
.brand-sub { margin-top: 1px; color: var(--soft); font-size: 12px; }
.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-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-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-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-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(280px, 330px) minmax(0, 1fr) minmax(300px, 340px);
}
.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-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-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;
}
.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-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-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;
}
.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);
}
.image-edit-modal-backdrop.active {
  display: grid;
  z-index: 136;
}
.image-edit-modal {
  width: min(1100px, 96vw);
  max-height: 94vh;
  overflow: auto;
}
.image-edit-modal .modal-head p {
  margin: 4px 0 0;
}
.image-edit-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(62vh, 620px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #15120f;
  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: 12px;
}
.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: var(--muted);
  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-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(4, minmax(0, 1fr)); gap: 12px; }
.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; }

.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: 8px;
}

#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-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-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:not(.video-load-ready) .video-load-state,
.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-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: 236px minmax(0, 1fr) 300px;
  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,
.avatar-preview-panel {
  position: sticky;
  top: 86px;
  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-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: 360px;
  overflow: auto;
  padding-right: 2px;
}

.avatar-inline-persona-card {
  min-width: 0;
  min-height: 74px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.66);
  color: var(--text);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  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: 52px;
  aspect-ratio: 1;
  border-radius: 9px;
}

.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(3, 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) 120px 128px;
  align-items: end;
}

.avatar-preview-button {
  min-height: 38px;
  margin-bottom: 13px;
}

.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 {
  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;
}

.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;
}

.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-preset-card em {
  grid-column: 1 / -1;
}

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

.music-play-pill {
  justify-self: end;
  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 .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-video-history-item {
  width: 100%;
  min-height: 64px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.6);
  color: var(--text);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  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-item img,
.avatar-video-history-thumb {
  width: 46px;
  height: 58px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: rgba(47,38,30,.1);
}

.avatar-video-history-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-2);
  font-size: 12px;
  font-weight: 820;
}

.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;
  white-space: nowrap;
}

.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;
}

.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) {
  .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,
		  .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 .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-media-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
}

@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 .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;
}

.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: minmax(0, 1fr) minmax(320px, .8fr);
  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;
}

.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 div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.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-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-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;
}

/* 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));
	  }

  .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: 1 / -1;
  }

  .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;
  }

  .avatar-studio-layout {
    display: block;
  }

  .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-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;
  }

  #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-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-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-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;
}

@media (max-width: 980px) {
  .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: 230px;
  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: hidden;
}

.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-box img {
  width: 100%;
  max-height: 310px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(47,38,30,.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;
}

.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: 250px;
  overflow: auto;
  padding-right: 2px;
}

.music-preset-grid.compact .music-preset-card {
  min-height: 102px;
}

.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: 22px;
  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: var(--title-preview-size, 38px);
  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.title-hero {
  top: 28px;
  min-height: 24%;
  place-items: center;
}
.video-editor-title-overlay.title-brand b {
  padding: 7px 11px;
  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(var(--title-preview-size, 38px), 34px);
}
.video-editor-title-overlay.title-lower {
  top: auto;
  bottom: 118px;
  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: 58px;
}
.video-editor-title-overlay.title-cover b {
  color: #ffe2a3;
  font-size: min(var(--title-preview-size, 38px), 54px);
}
.video-editor-title-overlay span {
  margin-top: 7px;
  color: #ffd27a;
  font-size: 12px;
  font-weight: 780;
}
.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: 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: var(--subtitle-preview-size, 34px);
  line-height: 1.16;
  font-weight: var(--subtitle-preview-weight, 850);
  text-shadow: 0 1px 4px rgba(0,0,0,.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  z-index: 8;
}
.video-editor-subtitle-overlay.is-top {
  top: 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: 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: cover;
}
.live-pip.circle-talk-pip span {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  min-width: 64px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  color: rgba(255,255,255,.86);
  font-size: 10px;
  font-weight: 850;
  text-align: center;
  pointer-events: none;
}
.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) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.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-yxe-layout {
  display: grid;
  grid-template-columns: minmax(270px, 318px) minmax(0, 1fr);
  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 {
  position: relative;
  z-index: 2;
  padding: 18px;
  overflow: hidden;
}
.publish-task-builder {
  position: relative;
  z-index: 1;
}
.publish-builder-grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
  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 {
  margin-top: 16px;
}

@media (max-width: 1240px) {
  .publish-workbench-shell {
    grid-template-columns: 1fr;
  }
  .publish-yxe-layout {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  }
  .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-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;
  }
}