:root {
  color-scheme: light;
  --bg: #f2f0e8;
  --surface: #ffffff;
  --surface-2: #ebe6dc;
  --ink: #161513;
  --muted: #746f64;
  --line: #ded7c8;
  --accent: #0e7f73;
  --accent-2: #a84e3f;
  --gold: #c19a5b;
  --accent-soft: #dceee8;
  --nav: #12110f;
  --shadow: 0 24px 70px rgba(22, 21, 19, 0.12);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 88% 8%, rgba(193, 154, 91, 0.18), transparent 22vw),
    radial-gradient(circle at 28% 0%, rgba(14, 127, 115, 0.13), transparent 28vw),
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), transparent 300px),
    var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

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

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.customer-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(222, 215, 200, 0.82);
  padding: 14px 28px;
  background: rgba(242, 240, 232, 0.82);
  backdrop-filter: blur(18px);
}

.customer-nav .brand {
  color: var(--ink);
}

.customer-nav .brand span {
  color: var(--muted);
}

.nav-actions,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.credit-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(193, 154, 91, 0.42);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 253, 248, 0.74);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  max-width: 220px;
  overflow: hidden;
  border: 1px solid rgba(14, 127, 115, 0.22);
  border-radius: 999px;
  padding: 0 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 26px 0 42px;
}

.customer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.72fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 20px;
}

.hero-main,
.hero-preview {
  overflow: hidden;
  border: 1px solid rgba(222, 215, 200, 0.9);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.hero-main {
  padding: clamp(26px, 5vw, 52px);
  background:
    radial-gradient(circle at 85% 18%, rgba(193, 154, 91, 0.18), transparent 240px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 253, 248, 0.82));
}

.hero-main h1 {
  max-width: 720px;
  margin-top: 8px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.05;
}

.hero-main p {
  max-width: 640px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

.hero-actions {
  margin-top: 28px;
}

.hero-actions .primary-button {
  min-height: 48px;
  padding: 0 20px;
}

.hero-preview {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 360px;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(18, 17, 15, 0.96), rgba(45, 39, 31, 0.94)),
    #161513;
  color: #fbf8ef;
}

.login-modal,
.pricing-modal,
.generation-confirm-modal,
.history-modal,
.task-modal,
.account-center-modal,
.recharge-modal,
.announcement-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(18, 17, 15, 0.42);
  backdrop-filter: blur(12px);
}

.customer-service-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(18, 17, 15, 0.42);
  backdrop-filter: blur(12px);
}

.customer-service-modal[hidden] { display: none; }

.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 19, 18, 0.82);
  backdrop-filter: blur(14px);
}

.image-preview-modal[hidden] { display: none; }

.image-preview-card {
  width: min(1120px, 100%);
  max-height: calc(100vh - 36px);
  padding: 20px;
  background: #f7f4ef;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.38);
}

.image-preview-header {
  display: grid;
  grid-template-columns: 1fr auto 42px;
  align-items: center;
  gap: 16px;
  min-height: 42px;
}

.image-preview-header strong { display: block; margin-top: 2px; font-family: Georgia, "Songti SC", serif; font-size: 21px; font-weight: 500; }
.image-preview-count { color: #716861; font-size: 12px; font-weight: 800; }

.image-preview-stage {
  position: relative;
  display: grid;
  min-height: min(68vh, 720px);
  margin-top: 12px;
  place-items: center;
  overflow: hidden;
  background: #1f1d1b;
  touch-action: pan-y;
}

.image-preview-stage > img { display: block; max-width: 100%; max-height: min(68vh, 720px); object-fit: contain; }
.image-preview-download {
  display: block;
  margin: -42px auto 12px;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  padding: 9px 18px;
  background: rgba(20, 22, 25, 0.62);
  backdrop-filter: blur(8px);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.image-preview-download[hidden] { display: none; }
.image-preview-download:hover { background: rgba(20, 22, 25, 0.82); }

.image-preview-nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 44px;
  height: 52px;
  border: 0;
  background: rgba(255,255,255,0.88);
  color: #201f1d;
  font-size: 26px;
  transform: translateY(-50%);
}

.image-preview-nav.previous { left: 12px; }
.image-preview-nav.next { right: 12px; }
.image-preview-nav:disabled { opacity: 0; pointer-events: none; }

.image-preview-thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
.image-preview-thumb { flex: 0 0 52px; width: 52px; height: 70px; border: 1px solid #cfc7c0; padding: 0; overflow: hidden; background: #fff; }
.image-preview-thumb.active { border-color: #201f1d; box-shadow: inset 0 0 0 1px #201f1d; }
.image-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.history-preview-button { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.history-preview-button img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.preview-open { overflow: hidden; }

.customer-service-fab {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 35;
  display: grid;
  width: 84px;
  height: 96px;
  place-items: end center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  filter: drop-shadow(0 12px 14px rgba(14, 127, 115, .22));
  font-weight: 900;
  animation: service-float 3.2s ease-in-out infinite;
}

.customer-service-fab img { width: 84px; height: 84px; object-fit: contain; }
.customer-service-fab span { position: absolute; bottom: -4px; border: 1px solid rgba(14,127,115,.18); border-radius: 999px; padding: 3px 8px; background: rgba(255,253,248,.92); font-size: 11px; }
.customer-service-fab:hover { animation-play-state: paused; transform: translateY(-3px); }

@keyframes service-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.customer-service-card {
  position: relative;
  width: min(390px, 100%);
  border: 1px solid rgba(222,215,200,.94);
  border-radius: 18px;
  padding: 26px;
  background: #fffdf8;
  text-align: center;
  box-shadow: 0 30px 90px rgba(22,21,19,.26);
}

.customer-service-card h2 { margin-top: 6px; font-size: 28px; }
.customer-service-card p { margin: 8px 0 18px; color: var(--muted); }
.customer-service-card img { width: 100%; border-radius: 10px; }

.login-modal[hidden],
.pricing-modal[hidden],
.generation-confirm-modal[hidden],
.history-modal[hidden],
.task-modal[hidden],
.account-center-modal[hidden],
.recharge-modal[hidden],
.announcement-modal[hidden] {
  display: none;
}

.login-card,
.pricing-card,
.generation-confirm-card,
.history-card,
.task-card,
.account-center-card,
.recharge-card,
.announcement-card {
  position: relative;
  width: min(440px, 100%);
  border: 1px solid rgba(222, 215, 200, 0.94);
  border-radius: 22px;
  padding: 26px;
  background:
    radial-gradient(circle at 88% 0%, rgba(193, 154, 91, 0.18), transparent 180px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 248, 0.94));
  box-shadow: 0 30px 90px rgba(22, 21, 19, 0.26);
}

.pricing-card {
  width: min(860px, 100%);
}

.login-card {
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
}

.generation-confirm-card {
  position: relative;
  width: min(460px, 100%);
  border: 1px solid rgba(222, 215, 200, 0.94);
  border-radius: 22px;
  padding: 26px;
  background:
    radial-gradient(circle at 88% 0%, rgba(193, 154, 91, 0.18), transparent 180px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 248, 0.94));
  box-shadow: 0 30px 90px rgba(22, 21, 19, 0.26);
}

.generation-confirm-card h2 { margin: 6px 42px 6px 0; font-size: 26px; }
.generation-confirm-card > p { margin: 0; color: var(--muted); line-height: 1.6; }
.generation-confirm-list { display: grid; gap: 10px; margin: 22px 0 14px; }
.generation-confirm-list div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.generation-confirm-list dt { color: var(--muted); font-size: 14px; }
.generation-confirm-list dd { margin: 0; color: var(--ink); font-weight: 800; }
.generation-confirm-card .generation-confirm-assurance { color: var(--accent); font-weight: 800; }
.generation-confirm-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: 24px; }

.announcement-card {
  width: min(520px, 100%);
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(14, 127, 115, 0.12), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(193, 154, 91, 0.22), transparent 180px),
    #fffdf8;
}

.announcement-card h2 { margin: 6px 42px 4px 0; font-size: 28px; }
.announcement-card time { display: block; color: var(--gold); font-size: 13px; font-weight: 800; }
.announcement-card > p { margin: 18px 0 24px; color: var(--ink); line-height: 1.8; white-space: pre-wrap; }
.announcement-history-card { max-height: calc(100vh - 36px); overflow: auto; }
.announcement-list { display: grid; gap: 10px; margin-top: 18px; }
.announcement-list-item { border: 1px solid var(--line); border-radius: 10px; padding: 15px; background: rgba(255,255,255,.72); }
.announcement-list-title { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; border: 0; padding: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.announcement-list-title span { font-size: 16px; font-weight: 800; }
.announcement-list-title time { flex: 0 0 auto; color: var(--gold); font-size: 12px; font-weight: 800; }
.announcement-list-title:hover span { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.announcement-content-field { grid-column: 1 / -1; }
.announcement-content-field textarea { width: 100%; min-height: 100px; resize: vertical; }

.history-card {
  width: min(940px, 100%);
  max-height: calc(100vh - 42px);
  overflow: auto;
}

.task-card {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 42px);
  overflow: auto;
}

.task-header { padding-right: 42px; }
.task-header h2 { margin-top: 6px; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; }
.task-header p { margin-top: 10px; color: var(--muted); line-height: 1.6; }
.task-empty {
  margin-top: 20px;
  border: 1px dashed #c7c1b1;
  border-radius: 14px;
  padding: 28px 18px;
  color: var(--muted);
  text-align: center;
}
.task-empty[hidden] { display: none; }
.task-list { display: grid; gap: 10px; margin-top: 20px; }

.list-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.list-pagination button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(14, 127, 115, 0.24); border-radius: 8px; background: #fff; color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }
.list-pagination button:disabled { cursor: not-allowed; opacity: .45; }
.task-notice { position: fixed; z-index: 30; right: 20px; bottom: 20px; width: min(340px, calc(100vw - 40px)); padding: 14px 16px; border: 1px solid rgba(14, 127, 115, .24); border-radius: 12px; background: #fff; box-shadow: 0 16px 44px rgba(31, 45, 61, .18); color: var(--ink); font-size: 14px; font-weight: 800; }
.task-notice[data-kind="failed"] { border-color: rgba(177, 63, 49, .34); color: #9f3125; }
.task-notice[data-kind="cancelled"] { border-color: rgba(139, 111, 55, .34); color: #765b23; }
.terms-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; }
.terms-consent input { width: auto; margin-top: 3px; }
.remember-login { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.remember-login input { width: auto; }
.text-button { border: 0; padding: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.terms-card { max-height: min(760px, calc(100vh - 48px)); overflow: auto; }
.terms-content { color: var(--muted); font-size: 14px; line-height: 1.7; }
.terms-content h3 { margin: 18px 0 5px; color: var(--ink); font-size: 15px; }
.terms-content p { margin: 0 0 10px; }
.task-item {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(222, 215, 200, 0.94);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 253, 248, 0.84);
}
.task-item.status-processing { border-left-color: var(--accent); }
.task-item.status-completed { border-left-color: #3d7b57; }
.task-item.status-cancelled { border-left-color: #8b6f37; }
.task-item.status-failed { border-left-color: var(--accent-2); }
.task-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-item-heading strong { color: var(--ink); }
.task-item-heading span { color: var(--accent); font-size: 13px; font-weight: 800; }
.task-item.status-failed .task-item-heading span { color: var(--accent-2); }
.task-item small,
.task-item time,
.task-item p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.task-item .task-elapsed { color: var(--accent); font-weight: 800; }
.task-item p { margin: 0; }
.task-channel-badge,
.task-cancel-pending {
  color: #765b23;
  font-weight: 800;
}
.task-cancel-button {
  justify-self: start;
  margin-top: 4px;
  border: 1px solid rgba(177, 63, 49, 0.34);
  border-radius: 8px;
  padding: 7px 10px;
  background: rgba(255, 239, 235, 0.78);
  color: #9f3125;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.task-cancel-button:disabled { cursor: wait; opacity: .58; }
.task-toggle,
.task-history-button,
.task-progress-entry {
  justify-self: start;
  margin-top: 4px;
  border: 1px solid rgba(14, 127, 115, 0.34);
  border-radius: 8px;
  padding: 7px 10px;
  background: rgba(220, 238, 232, 0.7);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.task-details-wrap { margin-top: 4px; }
.task-details { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.task-stage { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.task-stage strong { color: var(--ink); font-size: 13px; }
.task-stage span { color: var(--muted); font-size: 12px; }
.task-channel-detail { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.task-channel-detail strong { color: #765b23; }
.task-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.task-result-thumb { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; padding: 0; background: var(--surface); color: var(--ink); text-align: left; }
.task-result-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.task-result-thumb span { display: block; overflow: hidden; padding: 6px 7px; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.task-result-empty,
.task-failure-summary,
.task-failed-count,
.task-cancellation-summary { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.task-failure-summary,
.task-failed-count { color: var(--accent-2); }
.task-cancellation-summary { color: #765b23; }
.task-progress-entry { margin: 12px 0 0; }

.series-continuation-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -2px 0 14px;
  border: 1px solid rgba(14, 127, 115, 0.36);
  border-radius: 14px;
  padding: 14px;
  background: rgba(14, 127, 115, 0.08);
}
.series-continuation-notice[hidden] { display: none; }
.series-continuation-notice span,
.series-continuation-notice strong { display: block; }
.series-continuation-notice span { color: var(--accent); font-size: 12px; font-weight: 900; }
.series-continuation-notice strong { margin-top: 3px; color: var(--ink); font-size: 14px; }
.series-continuation-notice p { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.account-center-card {
  width: min(920px, 100%);
  max-height: calc(100vh - 42px);
  overflow: auto;
}

.account-center-header,
.account-section-head,
.account-ledger-row,
.account-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-center-header {
  padding-right: 46px;
}

.account-center-header h2 {
  margin-top: 6px;
  font-size: 30px;
}

.account-center-header p {
  margin-top: 8px;
  color: var(--muted);
}

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 24px 0;
}

.account-summary-grid article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px;
  background: rgba(255, 253, 248, 0.72);
}

.account-summary-grid span,
.account-ledger-row span,
.account-order-row span,
.account-change small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.account-summary-grid strong {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-center-section + .account-center-section {
  margin-top: 20px;
}

.account-section-head {
  margin-bottom: 10px;
}

.account-section-head h3 {
  font-size: 16px;
}

.account-section-head > span {
  color: var(--muted);
  font-size: 12px;
}

.account-ledger,
.account-orders {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.account-ledger-row,
.account-order-row {
  min-width: 620px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}

.account-ledger-row:last-child,
.account-order-row:last-child {
  border-bottom: 0;
}

.account-ledger-row strong,
.account-order-row strong {
  font-size: 14px;
}

.account-ledger-row span,
.account-order-row span {
  margin-top: 4px;
}

.account-change {
  text-align: right;
  font-weight: 900;
}

.account-change.plus { color: var(--accent); }
.account-change.minus { color: #b2432f; }

.account-empty {
  padding: 22px;
  color: var(--muted);
  font-size: 14px;
}

.recharge-card {
  width: min(460px, 100%);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.login-card h2 {
  margin-top: 6px;
  font-size: 28px;
}

.login-card p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.login-form {
  display: grid;
  flex: 1 1 auto;
  gap: 14px;
  margin-top: 22px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 6px;
}

.auth-mode-tabs,
.history-actions,
.account-password-form {
  display: flex;
  gap: 8px;
}

.auth-mode {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 10px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.auth-mode.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.watermark-preview {
  min-width: 150px;
}

.watermark-preview > span { color: var(--muted); font-size: 12px; font-weight: 800; }

.watermark-preview-frame {
  display: flex;
  min-height: 92px;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(135deg, #e8e2d5, #fdfbf5);
}

.watermark-preview-frame strong { border-radius: 6px; padding: 5px 7px; background: rgba(22,21,19,.72); color: #fff; font-size: 11px; }

.recharge-form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.login-hint {
  min-height: 38px;
  border: 1px solid rgba(193, 154, 91, 0.28);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 253, 248, 0.78);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.login-submit {
  min-height: 46px;
}

.pricing-header {
  max-width: 620px;
}

.pricing-header h2 {
  margin-top: 6px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
}

.pricing-header p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.plan-card {
  position: relative;
  display: grid;
  gap: 18px;
  border: 1px solid rgba(222, 215, 200, 0.95);
  border-radius: 20px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(251, 248, 240, 0.92));
}

.plan-card.pro {
  border-color: rgba(14, 127, 115, 0.48);
  background:
    radial-gradient(circle at 85% 0%, rgba(14, 127, 115, 0.18), transparent 160px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(241, 250, 246, 0.92));
  box-shadow: 0 24px 58px rgba(14, 127, 115, 0.16);
}

.plan-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.plan-top span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.plan-top strong {
  display: block;
  margin-top: 8px;
  font-size: 42px;
  line-height: 1;
}

.plan-top p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.55;
}

.plan-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-card li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: 14px;
}

.plan-card li::before {
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent);
  content: "✓";
  font-weight: 900;
}

.plan-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 900;
}

.plan-button.primary-plan {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent), #10594f);
  color: #fff;
  box-shadow: 0 14px 28px rgba(14, 127, 115, 0.2);
}

.pricing-note {
  margin-top: 16px;
  border: 1px solid rgba(193, 154, 91, 0.28);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 253, 248, 0.72);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-right: 42px;
}

.history-header h2 {
  margin-top: 6px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
}

.history-header p {
  max-width: 560px;
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.history-empty {
  display: grid;
  place-items: center;
  min-height: 210px;
  margin-top: 22px;
  border: 1px dashed #c7c1b1;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(14, 127, 115, 0.08), rgba(193, 154, 91, 0.12)),
    rgba(255, 253, 248, 0.76);
  color: var(--muted);
  text-align: center;
}

.history-empty[hidden] {
  display: none;
}

.history-empty strong {
  color: var(--ink);
  font-size: 18px;
}

.history-empty span {
  margin-top: 6px;
  font-size: 13px;
}

.history-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.history-item {
  display: grid;
  grid-template-columns: 144px 1fr;
  gap: 14px;
  min-width: 0;
  border: 1px solid rgba(222, 215, 200, 0.94);
  border-radius: 18px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(251, 248, 240, 0.92));
}

.history-thumb {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 14px;
  background:
    radial-gradient(circle at 42% 24%, rgba(255, 255, 255, 0.92) 0 10%, transparent 34%),
    linear-gradient(155deg, rgba(14, 127, 115, 0.22), transparent 52%),
    #e7dfd2;
}

.history-thumb img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
}

.history-thumb img:only-child {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.history-meta {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.history-meta span {
  display: block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.history-meta strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 20px;
}

.history-meta p,
.history-meta small {
  overflow: hidden;
  color: var(--muted);
  line-height: 1.45;
  text-overflow: ellipsis;
}

.history-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(222, 215, 200, 0.94);
}
.history-actions .table-action-button { min-height: 38px; padding: 8px 12px; }
body:has(.customer-workbench-layout) .history-actions .history-action-download {
  background: #23262a;
  color: #fff;
}
body:has(.customer-workbench-layout) .history-actions .history-action-continuation {
  border-color: #aeb4ba;
  background: #fff;
  color: #34383d;
}
body:has(.customer-workbench-layout) .history-actions .history-action-delete {
  border-color: transparent;
  background: transparent;
  color: #9a5146;
}
@media (max-width: 680px) {
  .history-actions { grid-template-columns: 1fr auto; }
  .history-actions .history-action-download { grid-column: 1 / -1; }
  .history-actions .history-action-continuation { min-width: 0; }
}

.account-password-form { flex-wrap: wrap; }

.account-password-form input { min-width: 150px; flex: 1; }

.history-meta p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 13px;
}

.history-meta small {
  white-space: nowrap;
}

.preview-phone {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 178px;
  height: 258px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 34px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.32);
  transform: rotate(-6deg);
}

.phone-shot {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: end start;
  border-radius: 26px;
  padding: 14px;
  background:
    radial-gradient(circle at 64% 30%, rgba(255, 255, 255, 0.9), transparent 18%),
    linear-gradient(155deg, rgba(14, 127, 115, 0.78), transparent 54%),
    linear-gradient(25deg, rgba(193, 154, 91, 0.66), transparent 55%),
    #e9e1d4;
}

.phone-shot span {
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(22, 21, 19, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.preview-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-self: end;
}

.preview-stack div {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.preview-stack span {
  display: block;
  color: rgba(251, 248, 239, 0.58);
  font-size: 11px;
}

.preview-stack strong {
  display: block;
  margin-top: 5px;
  font-size: 14px;
}

.customer-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.flow-step {
  border: 1px solid rgba(222, 215, 200, 0.9);
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 253, 248, 0.75);
}

.flow-step span {
  color: var(--gold);
  font-weight: 900;
  font-size: 12px;
}

.flow-step strong {
  display: block;
  margin-top: 7px;
  font-size: 16px;
}

.flow-step p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.account-watermark {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  padding: 18px;
}

.account-watermark-copy p {
  max-width: 520px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.account-watermark-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.switch-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  background: linear-gradient(180deg, #fffefa, #fbf8f0);
  color: var(--ink);
  font-weight: 800;
}

.switch-row input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--accent);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 22px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 240px),
    var(--nav);
  color: #f8f6ef;
}

.brand,
.account-panel {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent),
    linear-gradient(135deg, #0e7f73, #c19a5b 54%, #a84e3f);
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(15, 139, 120, 0.24);
}

.brand strong,
.account-panel strong {
  display: block;
}

.brand span,
.account-panel span {
  display: block;
  margin-top: 3px;
  color: rgba(248, 246, 239, 0.62);
  font-size: 12px;
}

.nav-list {
  display: grid;
  gap: 5px;
}

.nav-item {
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 12px 13px;
  background: transparent;
  color: rgba(248, 246, 239, 0.68);
  text-align: left;
}

.nav-item.active,
.nav-item:hover {
  background:
    linear-gradient(90deg, rgba(193, 154, 91, 0.18), transparent),
    rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

.account-panel {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #55d799;
}

.workspace {
  min-width: 0;
  padding: 28px;
}

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

h1,
h2,
p {
  margin: 0;
}

h1 {
  margin-top: 4px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0;
}

h2 {
  font-size: 17px;
  letter-spacing: 0;
}

.topbar p {
  max-width: 760px;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.55;
}

.eyebrow,
.section-kicker {
  display: block;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.studio-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgba(222, 215, 200, 0.9);
  border-radius: 18px;
  padding: 20px 22px;
  background:
    linear-gradient(110deg, rgba(18, 17, 15, 0.95), rgba(34, 31, 26, 0.9)),
    #161513;
  color: #fbf8ef;
  box-shadow: 0 24px 70px rgba(22, 21, 19, 0.18);
}

.studio-hero::before {
  width: 160px;
  height: 160px;
  border: 1px solid rgba(193, 154, 91, 0.26);
  border-radius: 50%;
  margin-left: -86px;
  content: "";
}

.hero-copy {
  flex: 1;
}

.hero-copy span,
.hero-stats span {
  display: block;
  color: rgba(251, 248, 239, 0.58);
  font-size: 12px;
}

.hero-copy strong {
  display: block;
  margin-top: 4px;
  font-size: 24px;
}

.hero-copy p {
  margin-top: 8px;
  color: rgba(251, 248, 239, 0.68);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 88px);
  gap: 10px;
}

.hero-stats div {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.07);
}

.hero-stats strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
}

.top-actions,
.panel-heading,
.prompt-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-actions {
  flex-shrink: 0;
}

.primary-button,
.secondary-button,
.icon-button,
.tab {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 14px;
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}

.primary-button {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent), #10594f);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(14, 127, 115, 0.24);
}

.primary-button.compact {
  min-height: 38px;
}

.secondary-button:hover,
.icon-button:hover,
.tab:hover {
  border-color: #b9c4bd;
}

.icon-button {
  width: 40px;
  padding: 0;
  font-size: 18px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.78fr) minmax(560px, 1.45fr);
  gap: 20px;
  align-items: start;
}

.panel {
  border: 1px solid rgba(222, 215, 200, 0.92);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 253, 248, 0.9)),
    #fffdf8;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.upload-panel,
.result-panel {
  padding: 20px;
}

.panel-heading {
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-heading span {
  color: var(--muted);
  font-size: 13px;
}

.dropzone {
  display: grid;
  min-height: 188px;
  place-items: center;
  gap: 7px;
  border: 1.5px dashed #c7c1b1;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(14, 127, 115, 0.075), rgba(193, 154, 91, 0.12)),
    #fffdf8;
  text-align: center;
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.dropzone:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 42px rgba(15, 139, 120, 0.12);
  transform: translateY(-1px);
}

.dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.upload-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(14, 127, 115, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(220, 238, 232, 0.9));
  color: var(--accent);
  font-size: 26px;
}

.dropzone small {
  max-width: 260px;
  color: var(--muted);
  line-height: 1.45;
}

.reference-upload-tip,
.reference-upload-status {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.reference-upload-status {
  min-height: 20px;
  color: var(--ink);
}

.reference-mode-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.reference-mode-option {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.reference-mode-option.active {
  background: var(--ink);
  color: #fff;
}

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

.reference-slot {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 13px;
}

.reference-slot-heading {
  display: flex;
  align-items: center;
  gap: 7px;
}

.reference-slot-heading > span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
}

.reference-slot-heading strong {
  flex: 1;
  font-size: 14px;
}

.reference-slot-heading em {
  color: var(--accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.reference-slot p {
  min-height: 32px;
  margin: 7px 0 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.reference-detail-focus {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin: -1px 0 9px;
  color: var(--muted);
  font-size: 11px;
}

.reference-detail-focus select {
  min-height: 30px;
  padding: 0 8px;
  font-size: 12px;
}

.reference-slot-action {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.reference-slot-action input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.reference-slot-preview {
  position: absolute;
  inset: auto 10px 10px auto;
  width: 68px;
  height: 68px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.reference-slot-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-slot-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}

.result-empty { grid-column: 1 / -1; margin: 0; padding: 24px; color: #697386; border: 1px dashed #c8cdd6; text-align: center; }
.task-progress { display: block; margin-top: 6px; color: #28364d; font-weight: 700; }

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

.preview-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  aspect-ratio: 1;
  background: var(--surface-2);
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-item span {
  position: absolute;
  left: 6px;
  top: 6px;
  border-radius: 5px;
  padding: 3px 6px;
  background: rgba(31, 37, 35, 0.72);
  color: #fff;
  font-size: 11px;
}

.preview-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  padding: 0;
  background: rgba(22, 21, 19, 0.42);
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1;
  opacity: 0.72;
  transition: opacity 160ms ease, background 160ms ease;
}

.preview-remove:hover {
  background: rgba(168, 78, 63, 0.82);
  opacity: 1;
}

.watermark-panel,
.channel-panel {
  margin-top: 16px;
  border: 1px solid rgba(222, 215, 200, 0.9);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 253, 248, 0.68);
}

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

.watermark-heading h3 {
  margin: 3px 0 0;
  font-size: 16px;
}

.watermark-heading > span {
  color: var(--muted);
  font-size: 12px;
}

.watermark-grid {
  display: grid;
  gap: 11px;
}

.channel-options {
  display: grid;
  gap: 10px;
}

.channel-option {
  position: relative;
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px 12px 42px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
}

.channel-option input {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 16px;
  min-height: 16px;
  accent-color: var(--accent);
}

.channel-option strong {
  font-size: 14px;
}

.channel-option span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.channel-option.active {
  border-color: rgba(14, 127, 115, 0.44);
  background: linear-gradient(180deg, rgba(220, 238, 232, 0.78), rgba(255, 253, 248, 0.86));
}

.channel-option.locked {
  opacity: 0.58;
}

.channel-option.locked::after {
  position: absolute;
  right: 12px;
  top: 12px;
  border-radius: 999px;
  padding: 4px 8px;
  background: #fff0d8;
  color: #8b5d17;
  content: "Pro";
  font-size: 11px;
  font-weight: 900;
}

.logo-upload {
  min-height: 44px;
  place-content: center;
  border: 1px dashed #c7c1b1;
  border-radius: 10px;
  padding: 0 12px;
  background: linear-gradient(180deg, #fffefa, #fbf8f0);
  color: var(--ink);
  font-weight: 800;
}

.logo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

select,
input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 11px;
  background:
    linear-gradient(180deg, #fffefa, #fbf8f0);
  color: var(--ink);
}

.segmented {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: #fffdf8;
}

.tab {
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.tab.active {
  background: linear-gradient(135deg, var(--ink), #302a22);
  color: #fff;
}

.tab-view {
  display: none;
}

.tab-view.active {
  display: block;
}

.campaign-board {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(222, 215, 200, 0.92);
  border-radius: 16px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(22, 21, 19, 0.96), rgba(49, 43, 34, 0.92)),
    #161513;
  color: #fbf8ef;
}

.board-visual {
  position: relative;
  min-height: 220px;
}

.phone-frame {
  position: absolute;
  left: 34px;
  top: 4px;
  width: 128px;
  height: 196px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 26px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
  transform: rotate(-6deg);
}

.phone-shot {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: end start;
  border-radius: 20px;
  padding: 12px;
  background:
    radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.88), transparent 18%),
    linear-gradient(155deg, rgba(14, 127, 115, 0.75), transparent 54%),
    linear-gradient(25deg, rgba(193, 154, 91, 0.64), transparent 55%),
    #e9e1d4;
}

.phone-shot span {
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(22, 21, 19, 0.75);
  color: #fff;
  font-size: 11px;
}

.floating-note {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(251, 248, 239, 0.76);
  font-size: 11px;
  backdrop-filter: blur(10px);
}

.floating-note.top {
  right: 0;
  top: 38px;
}

.floating-note.bottom {
  left: 0;
  bottom: 20px;
}

.board-copy {
  align-self: center;
}

.board-copy h3 {
  margin: 6px 0 8px;
  font-size: 22px;
  letter-spacing: 0;
}

.board-copy p {
  max-width: 520px;
  color: rgba(251, 248, 239, 0.68);
  line-height: 1.65;
}

.identity-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.identity-strip div,
.metric,
.api-panel,
.progress-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(250, 247, 238, 0.9));
}

.identity-strip span,
.metric span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
}

.identity-strip strong,
.metric strong {
  display: block;
  font-size: 15px;
}

.api-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.api-panel strong {
  display: block;
  margin-top: 5px;
  font-size: 15px;
}

.api-panel p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.api-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.api-status.ready {
  background: var(--accent-soft);
  color: var(--accent);
}

.api-status.missing {
  background: #fae3dd;
  color: var(--accent-2);
}

.api-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.generate-count-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 62px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.generate-count-button.featured {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent), #10594f);
  color: #fff;
  box-shadow: 0 14px 28px rgba(14, 127, 115, 0.18);
}

.progress-panel {
  margin-bottom: 14px;
}

.progress-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.progress-text strong {
  font-size: 14px;
}

.progress-text span {
  color: var(--muted);
  font-size: 12px;
}

.progress-track {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
}

.progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 200ms ease;
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.shot-card {
  overflow: hidden;
  border: 1px solid rgba(222, 215, 200, 0.94);
  border-radius: 16px;
  background: #fff;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.shot-card:hover {
  border-color: #cfc7b6;
  box-shadow: 0 18px 40px rgba(23, 23, 23, 0.11);
  transform: translateY(-2px);
}

.shot-image {
  position: relative;
  display: grid;
  aspect-ratio: 3 / 4;
  place-items: center;
  background:
    radial-gradient(circle at 38% 22%, rgba(255, 255, 255, 0.96) 0 10%, transparent 32%),
    linear-gradient(155deg, rgba(14, 127, 115, 0.24), transparent 48%),
    linear-gradient(20deg, rgba(193, 154, 91, 0.24), transparent 58%),
    #e7dfd2;
}

.watermark-badge {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 22px);
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 7px 9px;
  background: rgba(22, 21, 19, 0.46);
  color: rgba(255, 255, 255, 0.92);
  font-size: 10px;
  line-height: 1.1;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.watermark-badge img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  filter: none;
}

.watermark-badge div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.watermark-badge strong,
.watermark-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watermark-badge strong {
  font-size: 10px;
}

.watermark-badge span {
  opacity: 0.75;
}

.watermark-badge.bottom-right {
  right: 10px;
  bottom: 10px;
}

.watermark-badge.bottom-left {
  left: 10px;
  bottom: 10px;
}

.watermark-badge.top-right {
  right: 10px;
  top: 10px;
}

.watermark-badge.center {
  left: 50%;
  top: 50%;
  border-radius: 14px;
  opacity: 0.38;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.shot-image::after {
  position: absolute;
  right: 18%;
  bottom: 18%;
  width: 48%;
  height: 12%;
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.14);
  content: "";
  filter: blur(14px);
}

.shot-image img {
  position: relative;
  z-index: 1;
  width: 74%;
  max-height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 22px 20px rgba(23, 23, 23, 0.24));
}

.shot-pending {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(32, 36, 44, 0.2);
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.58);
  color: #5e6674;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.shot-number {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(31, 37, 35, 0.78);
  color: #fff;
  font-size: 12px;
}

.shot-card div:last-child {
  min-height: 112px;
  padding: 12px;
}

.shot-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.shot-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.shot-card.generated .shot-image {
  background: #111;
}

.shot-card.generated .shot-image::after {
  display: none;
}

.shot-card.generated .shot-image > img {
  width: 100%;
  max-height: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.shot-card.failed {
  border-color: #e4b6aa;
}

.prompt-toolbar {
  justify-content: flex-end;
  margin-bottom: 12px;
}

pre {
  overflow: auto;
  min-height: 520px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(193, 154, 91, 0.08), transparent 220px),
    #171717;
  color: #f3efe4;
  white-space: pre-wrap;
  line-height: 1.65;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

th,
td {
  padding: 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  background: #f2f5f1;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}

td {
  font-size: 14px;
}

tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .nav-list,
  .account-panel {
    display: none;
  }

  .workspace {
    padding: 16px;
  }

  .customer-nav {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 16px;
  }

  .nav-actions {
    width: 100%;
  }

  .nav-actions button {
    flex: 1;
  }

  .user-pill {
    width: 100%;
    max-width: none;
    justify-content: center;
  }

  .customer-hero,
  .customer-flow,
  .account-watermark,
  .account-watermark-controls {
    grid-template-columns: 1fr;
  }

  .watermark-preview { width: 100%; }

  .topbar,
  .content-grid {
    grid-template-columns: 1fr;
    display: grid;
  }

  .top-actions {
    justify-content: stretch;
  }

  .primary-button {
    width: 100%;
  }

  .content-grid {
    gap: 14px;
  }

  .identity-strip,
  .admin-grid,
  .campaign-board {
    grid-template-columns: 1fr;
  }

  .api-panel,
  .progress-text {
    align-items: stretch;
    flex-direction: column;
  }

  .api-actions {
    width: 100%;
  }

  .api-actions button {
    flex: 1;
  }

  .studio-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-hero::before {
    display: none;
  }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .board-visual {
    min-height: 180px;
  }
}

@media (max-width: 680px) {
  .customer-shell {
    width: min(100% - 20px, 1180px);
    padding-top: 14px;
  }

  .credit-pill {
    width: 100%;
    justify-content: center;
  }

  .nav-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-actions .user-pill,
  .nav-actions .credit-pill {
    grid-column: 1 / -1;
  }

  .nav-actions button {
    min-width: 0;
    padding-inline: 8px;
  }

  .code-row {
    grid-template-columns: 1fr;
  }

  .account-password-form { display: grid; grid-template-columns: 1fr; }

  .history-actions .table-action-button { flex: 1; }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card {
    max-height: calc(100vh - 28px);
    overflow: auto;
    padding: 22px;
  }

  .history-card {
    max-height: calc(100vh - 28px);
    padding: 22px;
  }

  .task-card {
    max-height: calc(100vh - 28px);
    padding: 22px;
  }

  .account-center-card {
    max-height: calc(100vh - 28px);
    padding: 22px;
  }

  .account-center-header {
    display: grid;
    padding-right: 36px;
  }

  .account-center-header .secondary-button {
    width: fit-content;
  }

  .account-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .history-header {
    display: grid;
    padding-right: 36px;
  }

  .history-list {
    grid-template-columns: 1fr;
  }

  .history-item {
    grid-template-columns: 118px 1fr;
  }

  .series-continuation-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .series-continuation-notice .secondary-button { width: 100%; }

  .hero-main {
    padding: 24px;
  }

  .hero-main h1 {
    font-size: 34px;
  }

  .hero-preview {
    min-height: 320px;
  }

  .preview-stack {
    grid-template-columns: 1fr;
  }

  .workspace {
    padding: 12px;
  }

  .upload-panel,
  .result-panel {
    padding: 14px;
  }

  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .segmented {
    width: 100%;
  }

  .tab {
    flex: 1;
  }

  .preview-grid,
  .shot-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reference-slot-grid {
    grid-template-columns: 1fr;
  }

  .topbar h1 {
    font-size: 24px;
  }
}

/* 后台运营结构：保留既有控件与接口，只压缩入口层级。 */
.admin-workspace-item,
.admin-mobile-nav-toggle {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 0 13px;
  background: transparent;
  color: rgba(248, 246, 239, 0.92);
  text-align: left;
  font: inherit;
  font-weight: 900;
}

.admin-workspace-item.active,
.admin-workspace-item:hover,
.admin-workspace-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.admin-nav-group { display: grid; gap: 4px; }
.admin-subnav { display: grid; gap: 3px; padding-left: 10px; }
.admin-subnav .admin-nav-item { min-height: 36px; font-size: 13px; }
.admin-mobile-nav-toggle { display: none; }

@media (max-width: 1080px) {
  .admin-nav { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .admin-sidebar { gap: 12px; padding: 14px; }
  .admin-brand { display: flex; align-items: center; justify-content: space-between; }
  .admin-mobile-nav-toggle { display: block; border: 1px solid rgba(255, 255, 255, 0.24); }
  .admin-nav { display: none; grid-template-columns: 1fr; }
  body.admin-mobile-nav-open .admin-nav { display: grid; }
  .admin-back-link { display: none; }
  .admin-topbar { gap: 12px; }
  .admin-topbar > div:first-child p { display: none; }
  .admin-top-actions { grid-template-columns: 1fr 1fr; }
  .admin-date-filter { min-width: 0; }
}

.admin-page {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
  background:
    radial-gradient(circle at 86% 6%, rgba(14, 127, 115, 0.13), transparent 28vw),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 320px),
    var(--bg);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  padding: 22px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 260px),
    var(--nav);
  color: #f8f6ef;
}

.admin-brand {
  color: #f8f6ef;
}

.admin-nav {
  display: grid;
  gap: 6px;
}

.admin-nav-item,
.admin-back-link {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 0 13px;
  background: transparent;
  color: rgba(248, 246, 239, 0.68);
  text-align: left;
  text-decoration: none;
}

.admin-nav-item.active,
.admin-nav-item:hover,
.admin-back-link:hover {
  background:
    linear-gradient(90deg, rgba(193, 154, 91, 0.18), transparent),
    rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

.admin-back-link {
  display: flex;
  align-items: center;
  margin-top: auto;
}

.admin-main {
  min-width: 0;
  padding: 28px;
}

.admin-topbar,
.admin-panel-head,
.admin-top-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-inline-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-inline-controls input,
.admin-inline-controls select {
  width: 140px;
  min-height: 36px;
}

.admin-topbar {
  margin-bottom: 20px;
}

.admin-topbar p {
  max-width: 760px;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.admin-top-actions {
  align-items: center;
  flex-shrink: 0;
}

.admin-api-state {
  display: grid;
  max-width: 360px;
  gap: 5px;
}

.admin-api-state small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.admin-date-filter {
  display: grid;
  min-width: 170px;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-date-filter input {
  min-height: 38px;
  border-radius: 999px;
  padding-inline: 12px;
}

.section-date-line {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(193, 154, 91, 0.3);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 253, 248, 0.78);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.section-date-line strong {
  color: var(--ink);
}

.admin-section {
  display: none;
}

.admin-section.active {
  display: grid;
  gap: 18px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.admin-metric-card,
.admin-panel,
.admin-plan-card {
  border: 1px solid rgba(222, 215, 200, 0.92);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 253, 248, 0.9)),
    #fffdf8;
  box-shadow: var(--shadow);
}

.admin-metric-card {
  padding: 18px;
}

.admin-metric-card span {
  color: var(--muted);
  font-size: 13px;
}

.admin-metric-card strong {
  display: block;
  margin-top: 8px;
  font-size: 34px;
  line-height: 1;
}

.admin-metric-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
}

.admin-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
}

.admin-panel {
  min-width: 0;
  padding: 20px;
}

.admin-panel-head {
  align-items: center;
  margin-bottom: 16px;
}

.admin-work-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.admin-recent-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.admin-recent-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--surface-2);
}

.admin-recent-card div {
  padding: 10px;
}

.admin-recent-card strong,
.admin-recent-card span {
  display: block;
}

.admin-recent-card span {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-task-list {
  display: grid;
  gap: 10px;
}

.admin-task {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(255, 253, 248, 0.72);
  color: var(--ink);
  font-weight: 800;
}

.admin-task input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--accent);
}

.admin-operations-list,
.admin-failure-list {
  display: grid;
  gap: 10px;
}

.admin-failure-block {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.admin-failure-block h3 { margin: 0; font-size: 16px; }

.admin-operation-item {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 253, 248, 0.72);
}

.admin-operation-item span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.admin-operation-item.warning { border-color: rgba(140, 93, 77, 0.45); background: rgba(140, 93, 77, 0.07); }

.admin-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.admin-data-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.cost-table {
  min-width: 1120px;
}

.credit-table {
  min-width: 980px;
}

.admin-login-card {
  width: min(440px, calc(100vw - 32px));
}

.admin-data-table th,
.admin-data-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.admin-data-table th {
  background: #f4f0e8;
  color: var(--muted);
  font-size: 12px;
}

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

.admin-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.admin-status.paid {
  background: #fff0d8;
  color: #8b5d17;
}

.table-action-button {
  min-height: 34px;
  border: 1px solid rgba(14, 127, 115, 0.28);
  border-radius: 9px;
  padding: 0 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.cost-note {
  border: 1px solid rgba(193, 154, 91, 0.3);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 253, 248, 0.78);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.cost-metrics .admin-metric-card:nth-child(4) strong {
  color: var(--accent);
}

.cost-usage-filters { margin-top: 16px; }
.cost-usage-order-list { display: grid; gap: 12px; }
.cost-usage-order { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.cost-usage-order > summary { display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(260px, 1.5fr) auto; gap: 14px; align-items: center; padding: 16px; cursor: pointer; }
.cost-usage-order > summary span { display: grid; gap: 4px; min-width: 0; }
.cost-usage-order small { color: var(--muted); }
.cost-channel-badge { display: inline-flex !important; width: fit-content; border-radius: 999px; padding: 6px 10px; background: #eceeef; font-weight: 800; }
.cost-pipeline { color: #765b23; font-weight: 800; overflow-wrap: anywhere; }
.cost-usage-table { min-width: 1080px; }
.cost-usage-order .admin-table-wrap { border-width: 1px 0 0; border-radius: 0; }
.admin-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }

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

.channel-health-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.channel-health-card.historical { border-color: rgba(116, 111, 100, 0.45); }

.channel-health-head,
.series-operations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.channel-health-badge,
.series-operations-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(116, 111, 100, 0.12);
  color: #625c57;
  font-size: 11px;
  font-weight: 800;
}

.channel-health-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.channel-health-metrics div { min-width: 0; }
.channel-health-metrics dt { color: var(--muted); font-size: 12px; }
.channel-health-metrics dd { margin: 3px 0 0; font-size: 13px; font-weight: 800; }
.channel-health-empty,
.channel-health-failure { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.channel-health-failure.has-failure { color: #8c5d4d; }

.series-operations {
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: 3px;
}

.series-operations small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.series-processing .series-operations-badge { background: rgba(193, 154, 91, 0.16); color: #8a651e; }
.series-completed .series-operations-badge { background: rgba(14, 127, 115, 0.13); color: #0e7f73; }
.series-failed .series-operations-badge { background: rgba(140, 93, 77, 0.13); color: #8c5d4d; }

.admin-plan-grid,
.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.payment-collection-warning {
  max-width: 920px;
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  background: rgba(193, 154, 91, 0.1);
}

.payment-collection-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.payment-channel-setting-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
}

.payment-channel-setting-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.payment-channel-setting-head > div {
  display: grid;
  gap: 5px;
}

.payment-channel-setting-head strong {
  font-size: 16px;
}

.payment-channel-setting-head [data-payment-setting-status] {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.payment-setting-meta,
.payment-setting-message {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.payment-setting-message.is-error { color: #8c5d4d; }
.payment-setting-message.is-success { color: #0e7f73; }

.payment-application-refresh {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-application-refresh span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.admin-channel-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-channel-source {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
}

.admin-channel-source strong {
  font-size: 14px;
}

.admin-channel-source span,
.admin-channel-source small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-plan-card {
  padding: 18px;
}

.admin-plan-card.pro {
  border-color: rgba(14, 127, 115, 0.48);
  background:
    radial-gradient(circle at 90% 0%, rgba(14, 127, 115, 0.16), transparent 170px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 250, 246, 0.9));
}

.admin-plan-card span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.admin-plan-card strong {
  display: block;
  margin-top: 8px;
  font-size: 34px;
}

.admin-plan-card p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.admin-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.admin-work-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.admin-work-image {
  background: var(--surface-2);
}

.admin-work-image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.admin-work-info {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.admin-work-info span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.admin-work-info p,
.admin-work-info small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 1px dashed #c7c1b1;
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.72);
  color: var(--muted);
  text-align: center;
}

.admin-compact-list { display: none; }
.admin-compact-card {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}
.admin-compact-card p,
.admin-compact-card small,
.admin-compact-card em { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.admin-compact-card em { color: #8c5d4d; font-style: normal; }
.admin-compact-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.admin-empty-inline { margin: 0; color: var(--muted); text-align: center; }
.admin-subsection-title { margin: 0 0 14px; font-size: 16px; }
.admin-detail-modal,
.admin-confirm-modal { position: fixed; inset: 0; z-index: 30; display: grid; justify-content: end; background: rgba(23, 25, 30, 0.42); }
.admin-confirm-modal { place-items: center; }
.admin-detail-sheet { width: min(460px, 100%); min-height: 100%; padding: 22px; background: #fffdf8; box-shadow: -20px 0 60px rgba(0,0,0,.18); }
.admin-detail-sheet > .secondary-button { margin-left: auto; display: flex; }
.admin-detail-sheet h2 { margin: 14px 0; }
.admin-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.admin-detail-grid div { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.admin-detail-grid dt { color: var(--muted); font-size: 12px; }
.admin-detail-grid dd { margin: 5px 0 0; font-weight: 800; overflow-wrap: anywhere; }
.admin-confirm-card { width: min(460px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: #fffdf8; box-shadow: var(--shadow); }
.admin-confirm-card h2 { margin: 0 0 10px; }
.admin-confirm-card p { line-height: 1.6; }
.admin-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 1080px) {
  .admin-page {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
  }

  .admin-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .admin-nav-item {
    text-align: center;
  }

  .admin-metrics,
  .admin-gallery,
  .admin-work-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .admin-main {
    padding: 16px;
  }

  .admin-topbar,
  .admin-panel-head,
  .admin-top-actions {
    display: grid;
  }

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

  .admin-metrics,
  .admin-plan-grid,
  .admin-settings-grid,
  .payment-collection-settings-grid,
  .admin-channel-sources,
  .channel-health-list,
  .admin-gallery,
  .admin-work-strip {
    grid-template-columns: 1fr;
  }

  .admin-table-wrap.admin-desktop-only { display: none; }
  .admin-compact-list { display: grid; gap: 10px; }
  .admin-detail-sheet { width: 100%; }
  .admin-detail-grid { grid-template-columns: 1fr; }
}

/* Lvpai customer visual system: keeps existing DOM and JavaScript intact. */
body:has(.customer-shell) {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #edf0f4;
  --ink: #17191e;
  --muted: #626a78;
  --line: #20242c;
  --accent: #28364d;
  --accent-2: #d94a64;
  --accent-soft: #eef1f5;
  --gold: #596579;
  --shadow: none;
  background: #f3f4f6;
  color: #17191e;
}

body:has(.customer-shell) .customer-nav {
  border-bottom: 1px solid #20242c;
  padding: 13px 28px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}

body:has(.customer-shell) .brand-mark {
  border: 1px solid #20242c;
  border-radius: 6px;
  background: #28364d;
  color: #fff;
}

body:has(.customer-shell) .customer-nav .brand strong {
  font-size: 16px;
  letter-spacing: 0;
}

body:has(.customer-shell) .customer-nav .brand span,
body:has(.customer-shell) .section-kicker,
body:has(.customer-shell) .eyebrow {
  color: #596579;
  font-weight: 800;
  letter-spacing: 0.1em;
}

body:has(.customer-shell) .customer-shell {
  width: min(1220px, calc(100% - 32px));
  padding: 28px 0 52px;
}

body:has(.customer-shell) .customer-hero {
  gap: 0;
  margin-bottom: 0;
  border: 1px solid #20242c;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

body:has(.customer-shell) .hero-main,
body:has(.customer-shell) .hero-preview {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body:has(.customer-shell) .hero-main {
  padding: clamp(30px, 5vw, 58px);
  border-right: 1px solid #20242c;
  background: #fff;
}

body:has(.customer-shell) .hero-main h1 {
  max-width: 650px;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.04;
}

body:has(.customer-shell) .hero-main p {
  max-width: 550px;
  color: #5d6572;
}

body:has(.customer-shell) .hero-preview {
  min-height: 380px;
  background:
    linear-gradient(rgba(40, 54, 77, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 54, 77, 0.07) 1px, transparent 1px),
    #edf0f4;
  background-size: 26px 26px;
  color: #17191e;
}

body:has(.customer-shell) .preview-phone {
  border: 1px solid #20242c;
  border-radius: 24px;
  background: #fff;
  box-shadow: 7px 8px 0 #20242c;
}

body:has(.customer-shell) .phone-shot {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(189, 201, 218, 0.8)), #dce3ed;
}

body:has(.customer-shell) .preview-stack div {
  border: 1px solid #20242c;
  border-radius: 7px;
  background: #fff;
  color: #17191e;
}

body:has(.customer-shell) .customer-flow {
  gap: 0;
  margin: 0;
  border: 1px solid #20242c;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fff;
}

body:has(.customer-shell) .flow-step {
  min-height: 126px;
  border: 0;
  border-right: 1px solid #20242c;
  border-radius: 0;
  background: transparent;
}

body:has(.customer-shell) .flow-step:last-child { border-right: 0; }
body:has(.customer-shell) .flow-step > span { color: #28364d; }

body:has(.customer-shell) .account-watermark,
body:has(.customer-shell) .panel,
body:has(.customer-shell) .login-card,
body:has(.customer-shell) .pricing-card,
body:has(.customer-shell) .generation-confirm-card,
body:has(.customer-shell) .history-card,
body:has(.customer-shell) .task-card,
body:has(.customer-shell) .account-center-card,
body:has(.customer-shell) .recharge-card,
body:has(.customer-shell) .announcement-card,
body:has(.customer-shell) .customer-service-card {
  border: 1px solid #20242c;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

body:has(.customer-shell) .account-watermark {
  margin: 20px 0;
  background: #fff;
}

body:has(.customer-shell) .watermark-preview,
body:has(.customer-shell) .watermark-preview-frame {
  border-color: #20242c;
  border-radius: 7px;
  background: #edf0f4;
}

body:has(.customer-shell) .content-grid { gap: 18px; }
body:has(.customer-shell) .upload-panel,
body:has(.customer-shell) .result-panel { padding: 22px; }

body:has(.customer-shell) .primary-button,
body:has(.customer-shell) .generate-count-button.featured,
body:has(.customer-shell) .plan-button.primary-plan {
  border-color: #20242c;
  border-radius: 6px;
  background: #28364d;
  box-shadow: none;
}

body:has(.customer-shell) .primary-button:hover,
body:has(.customer-shell) .generate-count-button.featured:hover,
body:has(.customer-shell) .plan-button.primary-plan:hover {
  background: #1d293b;
  transform: translateY(-1px);
}

body:has(.customer-shell) .secondary-button,
body:has(.customer-shell) .icon-button,
body:has(.customer-shell) .tab,
body:has(.customer-shell) .generate-count-button,
body:has(.customer-shell) select,
body:has(.customer-shell) input,
body:has(.customer-shell) textarea,
body:has(.customer-shell) .segmented,
body:has(.customer-shell) .dropzone,
body:has(.customer-shell) .watermark-panel,
body:has(.customer-shell) .channel-panel,
body:has(.customer-shell) .channel-option,
body:has(.customer-shell) .identity-strip div,
body:has(.customer-shell) .api-panel,
body:has(.customer-shell) .progress-panel,
body:has(.customer-shell) .shot-card,
body:has(.customer-shell) .logo-upload {
  border-color: #20242c;
  border-radius: 7px;
  background: #fff;
}

body:has(.customer-shell) .dropzone {
  min-height: 196px;
  background: #f7f8fa;
}

body:has(.customer-shell) .dropzone:hover {
  border-color: #28364d;
  box-shadow: 5px 5px 0 rgba(40, 54, 77, 0.18);
}

body:has(.customer-shell) .upload-icon {
  border-color: #20242c;
  border-radius: 8px;
  background: #28364d;
  color: #fff;
}

body:has(.customer-shell) .channel-option.active,
body:has(.customer-shell) .tab.active {
  border-color: #20242c;
  background: #28364d;
  color: #fff;
}

body:has(.customer-shell) .api-status.ready,
body:has(.customer-shell) .api-status {
  background: #eef1f5;
  color: #28364d;
}

body:has(.customer-shell) .progress-track span { background: #28364d; }

body:has(.customer-shell) .shot-card:hover {
  border-color: #28364d;
  box-shadow: 5px 5px 0 rgba(40, 54, 77, 0.16);
}

body:has(.customer-shell) .modal-close {
  border: 1px solid #20242c;
  border-radius: 5px;
  background: #fff;
  color: #20242c;
}

body:has(.customer-shell) .login-modal,
body:has(.customer-shell) .pricing-modal,
body:has(.customer-shell) .history-modal,
body:has(.customer-shell) .task-modal,
body:has(.customer-shell) .account-center-modal,
body:has(.customer-shell) .recharge-modal,
body:has(.customer-shell) .announcement-modal,
body:has(.customer-shell) .customer-service-modal {
  background: rgba(23, 25, 30, 0.32);
}

body:has(.customer-shell) .plan-card,
body:has(.customer-shell) .account-summary-grid article,
body:has(.customer-shell) .announcement-list-item {
  border-color: #20242c;
  border-radius: 7px;
  background: #fff;
}

body:has(.customer-shell) .plan-card.pro { background: #eef1f5; }
body:has(.customer-shell) .plan-badge { background: #28364d; }

body:has(.customer-shell) .customer-service-fab {
  filter: drop-shadow(4px 5px 0 rgba(40, 54, 77, 0.2));
}

body:has(.customer-shell) button:focus-visible,
body:has(.customer-shell) input:focus-visible,
body:has(.customer-shell) select:focus-visible,
body:has(.customer-shell) textarea:focus-visible {
  outline: 3px solid rgba(40, 54, 77, 0.28);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  body:has(.customer-shell) .hero-main { border-right: 0; border-bottom: 1px solid #20242c; }
  body:has(.customer-shell) .flow-step { border-right: 0; border-bottom: 1px solid #20242c; }
  body:has(.customer-shell) .flow-step:last-child { border-bottom: 0; }
}

@media (max-width: 680px) {
  body:has(.customer-shell) .customer-nav { padding: 12px 14px; }
  body:has(.customer-shell) .customer-shell { width: min(100% - 20px, 1220px); }
  body:has(.customer-shell) .hero-main { padding: 27px 22px; }
  body:has(.customer-shell) .hero-main h1 { font-size: 39px; }
  body:has(.customer-shell) .customer-flow { border-top: 0; }
}

/* Match the approved ink-white mockup: editorial workbench, not a recolored legacy hero. */
body:has(.customer-shell) .nav-actions {
  gap: 7px;
}

body:has(.customer-shell) .nav-actions .secondary-button,
body:has(.customer-shell) .nav-actions .primary-button,
body:has(.customer-shell) .credit-pill {
  min-height: 36px;
  padding-inline: 11px;
  font-size: 12px;
}

body:has(.customer-shell) .credit-pill {
  border-color: #d4dae3;
  border-radius: 999px;
  background: #fff;
  color: #28364d;
}

body:has(.customer-shell) .hero-preview {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 18px;
}

.hero-preview-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #596579;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero-preview-topline strong {
  border: 1px solid #20242c;
  border-radius: 999px;
  padding: 4px 7px;
  background: #fff;
  color: #28364d;
  font-size: 9px;
}

.hero-shoe-stage {
  position: relative;
  display: grid;
  min-height: 220px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #20242c;
  border-radius: 7px;
  background:
    linear-gradient(rgba(40, 54, 77, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 54, 77, 0.1) 1px, transparent 1px),
    #f8fafc;
  background-size: 18px 18px;
}

.hero-shoe-stage::before,
.hero-shoe-stage::after {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(40, 54, 77, 0.34);
  border-radius: 50%;
  content: "";
}

.hero-shoe-stage::before { box-shadow: 0 0 0 20px rgba(40, 54, 77, 0.05); }
.hero-shoe-stage::after { transform: scale(1.58); opacity: 0.46; }

.hero-shoe-photo {
  position: relative;
  z-index: 1;
  width: min(76%, 270px);
  height: min(84%, 250px);
  border: 1px solid #20242c;
  border-radius: 5px;
  object-fit: cover;
  object-position: 52% 67%;
  box-shadow: 7px 8px 0 rgba(32, 36, 44, 0.92);
}

.hero-stage-label {
  position: absolute;
  left: 10px;
  bottom: 9px;
  z-index: 1;
  color: #596579;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

body:has(.customer-shell) .preview-stack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body:has(.customer-shell) .preview-stack div {
  min-width: 0;
  padding: 9px;
}

body:has(.customer-shell) .preview-stack span {
  overflow: hidden;
  color: #6b7483;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.customer-shell) .preview-stack strong {
  overflow: hidden;
  margin-top: 3px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.customer-shell) .customer-flow {
  grid-template-columns: 0.8fr 1fr 1fr;
}

body:has(.customer-shell) .flow-step {
  min-height: 104px;
  padding: 14px 16px;
}

body:has(.customer-shell) .flow-step strong { font-size: 14px; }
body:has(.customer-shell) .flow-step p { font-size: 12px; }

@media (max-width: 680px) {
  body:has(.customer-shell) .nav-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:has(.customer-shell) .nav-actions .secondary-button,
  body:has(.customer-shell) .nav-actions .primary-button {
    padding-inline: 6px;
    font-size: 11px;
  }

  .hero-shoe-stage { min-height: 190px; }
  .hero-shoe-photo { width: 68%; height: 82%; }
}

/* B: Luxury editorial layout for the functional customer application. */
body:has(.customer-shell) {
  background: #f4f3f0;
}

body:has(.customer-shell) .customer-shell {
  display: flex;
  width: min(1320px, calc(100% - 44px));
  flex-direction: column;
  gap: 0;
  padding-top: 20px;
}

body:has(.customer-shell) .customer-hero { order: 1; grid-template-columns: 39% 61%; min-height: 610px; border: 0; border-radius: 0; }
body:has(.customer-shell) .customer-flow { order: 2; margin: 0; border: 0; border-radius: 0; background: transparent; }
body:has(.customer-shell) .content-grid { order: 3; margin-top: 52px; }
body:has(.customer-shell) .account-watermark { order: 4; margin: 44px 0 0; }

body:has(.customer-shell) .customer-nav {
  width: min(1320px, calc(100% - 44px));
  margin: 0 auto;
  border: 0;
  padding: 14px 0;
  background: transparent;
}

body:has(.customer-shell) .brand-mark {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #1c1b1a;
  font-family: Georgia, serif;
}

body:has(.customer-shell) .customer-nav .brand strong { font-family: Georgia, "Songti SC", serif; font-size: 20px; font-weight: 500; letter-spacing: 0.06em; }
body:has(.customer-shell) .customer-nav .brand span { color: #77716b; font-size: 9px; letter-spacing: 0.14em; }

body:has(.customer-shell) .nav-actions { gap: 16px; }
body:has(.customer-shell) .nav-actions .secondary-button {
  min-height: auto;
  border: 0;
  border-radius: 0;
  padding: 4px 0;
  background: transparent;
  color: #625c57;
  font-size: 11px;
  font-weight: 700;
}
body:has(.customer-shell) .nav-actions .primary-button { min-height: auto; border: 1px solid #2a2826; border-radius: 999px; padding: 8px 13px; background: #fff; color: #2a2826; font-size: 11px; }
body:has(.customer-shell) .credit-pill { min-height: auto; border: 0; padding: 4px 0; background: transparent; color: #625c57; font-size: 11px; font-weight: 700; }

body:has(.customer-shell) .hero-main {
  min-height: 610px;
  padding: 60px 48px 36px;
  border: 0;
  background: #f8f7f4;
}
body:has(.customer-shell) .hero-main .eyebrow { color: #8c5d4d; font-size: 9px; letter-spacing: 0.15em; }
body:has(.customer-shell) .hero-main h1 { margin-top: 18px; font-family: Georgia, "Songti SC", serif; font-size: clamp(44px, 5vw, 65px); font-weight: 500; line-height: 1.02; }
body:has(.customer-shell) .hero-main p { max-width: 310px; margin-top: 24px; color: #69625c; font-size: 13px; line-height: 1.85; }
body:has(.customer-shell) .hero-main .hero-value { margin-top: 16px; color: #8c5d4d; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5; }
body:has(.customer-shell) .hero-actions { margin-top: 30px; }
body:has(.customer-shell) .hero-actions .primary-button { min-height: 42px; border: 0; border-radius: 0; padding: 0 17px; background: #201f1d; font-size: 12px; }
body:has(.customer-shell) .hero-actions .icon-button { width: 42px; height: 42px; min-height: 42px; border: 1px solid #302e2c; border-radius: 0; background: transparent; }

body:has(.customer-shell) .hero-preview { position: relative; display: block; min-height: 610px; padding: 0; overflow: hidden; background: #b8aea5; }
body:has(.customer-shell) .hero-shoe-stage { position: absolute; inset: 0; display: block; min-height: 0; border: 0; border-radius: 0; background: transparent; }
body:has(.customer-shell) .hero-shoe-stage::before,
body:has(.customer-shell) .hero-shoe-stage::after { display: none; }
body:has(.customer-shell) .hero-shoe-photo { width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; object-position: center; box-shadow: none; filter: saturate(0.78) contrast(0.98); }
body:has(.customer-shell) .hero-preview-topline { position: absolute; top: 18px; left: 20px; right: 20px; z-index: 2; color: #fff; font-size: 9px; text-shadow: 0 1px 8px rgba(0,0,0,0.48); }
body:has(.customer-shell) .hero-preview-topline strong { border: 1px solid rgba(255,255,255,0.68); background: transparent; color: #fff; }
body:has(.customer-shell) .hero-stage-label { left: 20px; bottom: 18px; color: #fff; font-size: 9px; text-shadow: 0 1px 8px rgba(0,0,0,0.58); }
body:has(.customer-shell) .preview-stack { position: absolute; right: 18px; bottom: 18px; z-index: 2; width: min(370px, calc(100% - 36px)); grid-template-columns: 1fr 1fr 1fr; padding: 12px; background: rgba(28, 27, 26, 0.94); }
body:has(.customer-shell) .preview-stack div { border: 0; border-radius: 0; padding: 7px; background: transparent; color: #fff; }
body:has(.customer-shell) .preview-stack span { color: #bcb6b0; }
body:has(.customer-shell) .preview-stack strong { color: #fff; }

body:has(.customer-shell) .customer-flow { grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 28px 0 0; }
body:has(.customer-shell) .flow-step { min-height: 0; padding: 13px 0; border: 0; border-top: 1px solid #bdb5ad; }
body:has(.customer-shell) .flow-step > span { color: #877d76; font-size: 9px; letter-spacing: 0.1em; }
body:has(.customer-shell) .flow-step strong { margin-top: 8px; font-family: Georgia, "Songti SC", serif; font-size: 21px; font-weight: 500; }
body:has(.customer-shell) .flow-step p { margin-top: 7px; color: #6f6761; font-size: 12px; }

.mobile-nav-actions { display: none; }

body:has(.customer-shell) .compact-flow {
  grid-template-columns: repeat(3, auto);
  gap: 0;
  padding-top: 18px;
  border-top: 1px solid #bdb5ad;
}

body:has(.customer-shell) .compact-flow .flow-step {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 56px;
  padding: 8px 18px;
  border: 0;
  border-right: 1px solid #d3ccc5;
}

body:has(.customer-shell) .compact-flow .flow-step:first-child { padding-left: 0; }
body:has(.customer-shell) .compact-flow .flow-step:last-child { border-right: 0; }
body:has(.customer-shell) .compact-flow .flow-step strong { margin: 0; font-size: 15px; }
body:has(.customer-shell) .compact-flow .flow-step p { margin: 0; font-size: 11px; line-height: 1.4; }
body:has(.customer-shell) .compact-flow .flow-step > span { align-self: start; padding-top: 2px; }

body:has(.customer-shell) .content-grid { grid-template-columns: 34% 66%; gap: 0; min-height: 610px; overflow: hidden; background: #fff; }
body:has(.customer-shell) .panel { border: 0; border-radius: 0; background: transparent; }
body:has(.customer-shell) .upload-panel { padding: 40px 32px; border-right: 1px solid #d7d1ca; background: #f3eee7; }
body:has(.customer-shell) .result-panel { padding: 40px 34px; background: #fff; }
body:has(.customer-shell) .panel-heading h2 { font-family: Georgia, "Songti SC", serif; font-size: 32px; font-weight: 500; }
body:has(.customer-shell) .dropzone { min-height: 170px; border: 1px solid #bfb5ab; border-radius: 0; background: #faf7f2; }
body:has(.customer-shell) .upload-icon { border: 0; border-radius: 50%; background: #201f1d; }
body:has(.customer-shell) .reference-mode-option,
body:has(.customer-shell) .reference-slot { border-radius: 0; border-color: #bfb5ab; background: #faf7f2; }
body:has(.customer-shell) .reference-mode-option.active { background: #28364d; color: #fff; }
body:has(.customer-shell) .reference-slot-heading em { color: #28364d; }
body:has(.customer-shell) .watermark-panel,
body:has(.customer-shell) .channel-panel { border: 0; border-top: 1px solid #d6cfc7; border-radius: 0; padding: 16px 0 0; background: transparent; }
body:has(.customer-shell) select,
body:has(.customer-shell) input,
body:has(.customer-shell) textarea { border-color: #cfc7c0; border-radius: 0; background: #fff; }
body:has(.customer-shell) .identity-strip div,
body:has(.customer-shell) .api-panel,
body:has(.customer-shell) .progress-panel,
body:has(.customer-shell) .channel-option,
body:has(.customer-shell) .generate-count-button,
body:has(.customer-shell) .shot-card { border-color: #d0c9c2; border-radius: 0; }
body:has(.customer-shell) .generate-count-button.featured { background: #201f1d; }

body:has(.customer-shell) .account-watermark { padding: 34px; border: 0; border-top: 1px solid #c9c1b9; border-radius: 0; background: transparent; }

@media (max-width: 980px) {
  body:has(.customer-shell) .customer-hero { grid-template-columns: 1fr; }
  body:has(.customer-shell) .hero-main { min-height: 390px; }
  body:has(.customer-shell) .hero-preview { min-height: 500px; }
  body:has(.customer-shell) .content-grid { grid-template-columns: 1fr; }
  body:has(.customer-shell) .upload-panel { border-right: 0; border-bottom: 1px solid #d7d1ca; }
}

@media (max-width: 680px) {
  body:has(.customer-shell) .customer-shell,
  body:has(.customer-shell) .customer-nav { width: min(100% - 28px, 1320px); }
  body:has(.customer-shell) .nav-actions { gap: 9px; }
  body:has(.customer-shell) .nav-actions .secondary-button { font-size: 10px; }
  body:has(.customer-shell) .hero-main { padding: 40px 28px 30px; }
  body:has(.customer-shell) .hero-preview { min-height: 440px; }
  body:has(.customer-shell) .customer-flow:not(.compact-flow) { grid-template-columns: 1fr; gap: 0; }
  body:has(.customer-shell) .flow-step { padding: 16px 0; }
  body:has(.customer-shell) .content-grid { margin-top: 38px; }
}

/* Editorial buttons and controls inside opened dialogs. */
body:has(.customer-shell) .login-card,
body:has(.customer-shell) .pricing-card,
body:has(.customer-shell) .generation-confirm-card,
body:has(.customer-shell) .history-card,
body:has(.customer-shell) .account-center-card,
body:has(.customer-shell) .announcement-card,
body:has(.customer-shell) .customer-service-card,
body:has(.customer-shell) .watermark-settings-card {
  border: 0;
  border-radius: 0;
  box-shadow: 0 22px 70px rgba(22, 18, 15, 0.22);
}

body:has(.customer-shell) .modal-close {
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 27px;
}

body:has(.customer-shell) .auth-mode-tabs {
  border-bottom: 1px solid #cbc4bc;
  padding-bottom: 8px;
}

body:has(.customer-shell) .auth-mode {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  padding: 0 3px;
  background: transparent;
  color: #7d746d;
  font-family: Georgia, "Songti SC", serif;
  font-size: 15px;
  font-weight: 500;
}

body:has(.customer-shell) .auth-mode.active {
  background: transparent;
  color: #1f1d1b;
  text-decoration: underline;
  text-underline-offset: 6px;
}

body:has(.customer-shell) .login-submit,
body:has(.customer-shell) .plan-button,
body:has(.customer-shell) .table-action-button,
body:has(.customer-shell) .history-actions .secondary-button,
body:has(.customer-shell) .account-password-form .secondary-button,
body:has(.customer-shell) .announcement-card .secondary-button,
body:has(.customer-shell) .account-center-header .secondary-button {
  min-height: 42px;
  border: 0;
  border-radius: 0;
  background: #201f1d;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* Account-bound watermark lives behind a light header entry, keeping the studio surface focused. */
.watermark-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(30, 27, 24, 0.38);
  backdrop-filter: blur(10px);
}

.watermark-settings-modal[hidden] { display: none; }

body:has(.customer-shell) .watermark-settings-card {
  position: relative;
  width: min(600px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 38px;
  background: #f8f7f4;
}

body:has(.customer-shell) .watermark-settings-card h2 {
  margin: 7px 42px 6px 0;
  font-family: Georgia, "Songti SC", serif;
  font-size: 35px;
  font-weight: 500;
}

body:has(.customer-shell) .watermark-settings-card .account-watermark-copy > p {
  max-width: 430px;
  margin: 0;
  color: #6b645e;
  font-size: 13px;
  line-height: 1.75;
}

body:has(.customer-shell) .watermark-settings-card .account-watermark-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

body:has(.customer-shell) .watermark-settings-card .switch-row,
body:has(.customer-shell) .watermark-settings-card .logo-upload {
  grid-column: 1 / -1;
}

body:has(.customer-shell) .watermark-settings-card .watermark-preview {
  margin-top: 24px;
  border-top: 1px solid #d7d0c9;
  padding-top: 18px;
  background: transparent;
}

body:has(.customer-shell) .watermark-settings-card .watermark-preview-frame {
  min-height: 130px;
  border-radius: 0;
  background: #e9e4dd;
}

@media (max-width: 680px) {
  body:has(.customer-shell) .watermark-settings-card { padding: 30px 22px; }
  body:has(.customer-shell) .watermark-settings-card .account-watermark-controls { grid-template-columns: 1fr; }
  body:has(.customer-shell) .watermark-settings-card h2 { font-size: 31px; }
}

body:has(.customer-shell) .plan-button.primary-plan { background: #201f1d; }

body:has(.customer-shell) .plan-card,
body:has(.customer-shell) .plan-card.pro {
  gap: 16px;
  border: 0;
  border-top: 1px solid #c9c0b7;
  border-radius: 0;
  padding: 20px 0;
  background: transparent;
  box-shadow: none;
}

body:has(.customer-shell) .plan-card.pro { border-top-color: #6d6259; }
body:has(.customer-shell) .plan-badge { top: 18px; right: 0; border-radius: 0; background: #8c5d4d; }
body:has(.customer-shell) .plan-top span,
body:has(.customer-shell) .history-meta span { color: #8c5d4d; }
body:has(.customer-shell) .plan-top strong { font-family: Georgia, "Songti SC", serif; font-size: 38px; font-weight: 500; }
body:has(.customer-shell) .plan-card li::before { color: #8c5d4d; }

body:has(.customer-shell) .credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body:has(.customer-shell) .credit-symbol {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(99, 116, 139, 0.72);
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(205, 218, 234, 0.58));
  box-shadow: 2px 2px 5px rgba(66, 79, 96, 0.12), inset 1px 1px 1px rgba(255, 255, 255, 0.9);
  transform: rotate(45deg);
}

body:has(.customer-shell) .credit-symbol::before,
body:has(.customer-shell) .credit-symbol::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(255, 255, 255, 0.78);
  content: "";
  transform: translate(-50%, -50%) rotate(-45deg);
}

body:has(.customer-shell) .credit-symbol::after {
  width: 1px;
  height: 8px;
  background: rgba(106, 124, 149, 0.28);
  transform: translate(-50%, -50%) rotate(-45deg);
}

body:has(.customer-shell) #creditValue {
  display: inline-block;
  min-width: 2ch;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

body:has(.customer-shell) .api-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

body:has(.customer-shell) .api-actions .generate-now-button {
  min-height: 38px;
  padding-inline: 15px;
  white-space: nowrap;
}

@media (max-width: 680px) {
  body:has(.customer-shell) .api-actions .generate-now-button { flex-basis: 100%; }
}

@media (min-width: 981px) {
  body:has(.customer-shell) .content-grid { overflow: visible; }
  body:has(.customer-shell) .upload-panel { position: sticky; top: 78px; }
}

body:has(.customer-shell) .pricing-card,
body:has(.customer-shell) .pricing-card * {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body:has(.customer-shell) .pricing-card .pricing-header h2,
body:has(.customer-shell) .pricing-card .plan-top strong {
  font-family: inherit;
  font-weight: 700;
}

body:has(.customer-shell) .pricing-card .pricing-header .pricing-value-note {
  margin: 12px 0 4px;
  color: #8c5d4d;
  font-size: 16px;
  font-weight: 700;
}

body:has(.customer-shell) .login-hint,
body:has(.customer-shell) .pricing-note {
  border: 0;
  border-left: 2px solid #8c5d4d;
  border-radius: 0;
  background: #f4f0eb;
}

body:has(.customer-shell) .history-item,
body:has(.customer-shell) .task-item,
body:has(.customer-shell) .account-center-section,
body:has(.customer-shell) .announcement-list-item {
  border-radius: 0;
}

body:has(.customer-shell) .task-item,
body:has(.customer-shell) .series-continuation-notice {
  border-color: #20242c;
  border-radius: 0;
  background: #f7f8fa;
}

body:has(.customer-shell) .task-item { border-left-color: #28364d; }
body:has(.customer-shell) .task-item.status-failed { border-left-color: #8c5d4d; }
body:has(.customer-shell) .task-item-heading span,
body:has(.customer-shell) .series-continuation-notice span { color: #28364d; }

@media (max-width: 720px) {
  .customer-hero { padding-block: 22px; }
  .hero-preview { display: none; }
  .customer-flow.compact-flow { margin-block: 12px; }
  .compact-flow .flow-step p { display: none; }
  body:has(.customer-shell) .customer-nav {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  body:has(.customer-shell) .customer-nav .nav-actions { display: none; }

  body:has(.customer-shell) .mobile-nav-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  body:has(.customer-shell) .mobile-nav-actions > button {
    min-height: 30px;
    border: 0;
    padding: 5px 7px;
    background: transparent;
    color: #625c57;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  body:has(.customer-shell) .mobile-nav-actions > button[aria-expanded="true"] {
    color: #201f1d;
    text-decoration: underline;
    text-underline-offset: 5px;
  }

  body:has(.customer-shell) .mobile-more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    display: grid;
    width: 158px;
    overflow: hidden;
    border: 1px solid #d2cbc4;
    background: #faf8f5;
    box-shadow: 0 14px 32px rgba(38, 31, 26, 0.14);
  }

  body:has(.customer-shell) .mobile-more-menu button {
    min-height: 40px;
    border: 0;
    border-bottom: 1px solid #e0dad3;
    padding: 0 13px;
    background: transparent;
    color: #302d29;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
  }

  body:has(.customer-shell) .mobile-more-menu button:last-child { border-bottom: 0; }
  body:has(.customer-shell) .mobile-more-menu button:active { background: #eee9e2; }

  body:has(.customer-shell) .compact-flow {
    grid-template-columns: 1fr;
    padding-top: 10px;
  }

  body:has(.customer-shell) .compact-flow .flow-step,
  body:has(.customer-shell) .compact-flow .flow-step:first-child {
    grid-template-columns: auto auto 1fr;
    min-height: 48px;
    padding: 9px 0;
    border-right: 0;
    border-bottom: 1px solid #d3ccc5;
  }

  body:has(.customer-shell) .compact-flow .flow-step:last-child { border-bottom: 0; }
}

/* Lvpai production workbench */
body:has(.customer-workbench-layout) {
  --workbench-ink: #171819;
  --workbench-paper: #f2efe9;
  --workbench-panel: #fbfaf7;
  --workbench-muted: #77746f;
  --workbench-line: #d4cfc7;
  --workbench-accent: #a65e43;
  min-width: 0;
  background: var(--workbench-paper);
  color: var(--workbench-ink);
}

body:has(.customer-workbench-layout) .customer-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  min-height: 66px;
  border: 0;
  border-bottom: 1px solid #303236;
  padding: 0 24px;
  background: #181a1d;
  color: #f6f3ed;
}

body:has(.customer-workbench-layout) .customer-nav .brand { gap: 11px; }
body:has(.customer-workbench-layout) .customer-nav .brand-mark {
  width: 31px;
  height: 31px;
  border: 1px solid #706d67;
  background: transparent;
  color: #f6f3ed;
  font-family: Georgia, "Songti SC", serif;
  font-size: 16px;
}
body:has(.customer-workbench-layout) .customer-nav .brand strong {
  color: #f8f5ef;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.08em;
}
body:has(.customer-workbench-layout) .customer-nav .brand span { color: #96938d; }
body:has(.customer-workbench-layout) .customer-nav .nav-actions { gap: 8px; }
body:has(.customer-workbench-layout) .customer-nav .nav-actions .secondary-button {
  border: 0;
  padding: 7px 8px;
  color: #aaa7a1;
  font-size: 11px;
}
body:has(.customer-workbench-layout) .customer-nav .nav-actions .secondary-button:hover { color: #fff; }
body:has(.customer-workbench-layout) .customer-nav .nav-actions .primary-button {
  border-color: #f4f0e9;
  background: #f4f0e9;
  color: #1a1b1d;
}
body:has(.customer-workbench-layout) .customer-nav .credit-pill {
  border-right: 1px solid #3d3f43;
  padding-right: 14px;
  color: #f3f0e9;
}

.customer-workbench-layout {
  display: grid;
  grid-template-columns: 216px minmax(560px, 1fr) 300px;
  width: 100%;
  min-height: calc(100vh - 66px);
}

.customer-workbench-sidebar { grid-column: 1; grid-row: 1; }
body:has(.customer-workbench-layout) .customer-shell,
.workbench-stage { grid-column: 2; grid-row: 1; }
.customer-workbench-rail { grid-column: 3; grid-row: 1; }
.workbench-stage {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 18px 0;
  border: 1px solid var(--titanium-line, #c9cdd0);
  border-radius: 6px;
  padding: 26px 30px 42px;
  background: var(--titanium-panel, #fff);
  color: var(--titanium-ink, #151719);
}
.workbench-stage > .history-card,
.workbench-stage > .task-card,
.workbench-stage > .account-center-card {
  width: 100%;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.workbench-stage .modal-close { position: static; margin-left: auto; }

.customer-workbench-sidebar,
.customer-workbench-rail {
  position: sticky;
  top: 66px;
  align-self: start;
  height: calc(100vh - 66px);
  overflow-y: auto;
  background: #ebe7e0;
}

.customer-workbench-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--workbench-line);
  padding: 28px 18px 20px;
}

.workbench-nav-group { display: grid; gap: 4px; margin-bottom: 25px; }
.workbench-nav-label {
  margin: 0 10px 8px;
  color: #96918a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.workbench-nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  border: 0;
  border-left: 2px solid transparent;
  padding: 0 14px;
  background: transparent;
  color: #54514d;
  text-align: left;
  text-decoration: none;
  font: 650 12px/1.2 Inter, "PingFang SC", sans-serif;
  cursor: pointer;
}
.workbench-nav-item:hover { background: #e3ded6; color: var(--workbench-ink); }
.workbench-nav-item.active {
  border-left-color: var(--workbench-accent);
  background: #ddd7ce;
  color: var(--workbench-ink);
}
.workbench-usage-card {
  margin-top: auto;
  border-top: 1px solid #cbc4ba;
  padding: 18px 10px 2px;
}
.workbench-usage-card > span { color: #8d8881; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; }
.workbench-usage-card strong { display: block; margin-top: 7px; font-size: 13px; }
.workbench-usage-card p { margin: 7px 0 14px; color: #78736c; font-size: 10px; line-height: 1.55; }
.workbench-usage-card button {
  width: 100%;
  min-height: 34px;
  border: 1px solid #292a2c;
  background: transparent;
  color: #292a2c;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

body:has(.customer-workbench-layout) .customer-shell {
  display: flex;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0 30px 56px;
}
body:has(.customer-workbench-layout) .customer-hero {
  order: 1;
  display: block;
  min-height: 0;
  border-bottom: 1px solid var(--workbench-line);
  padding: 19px 0 18px;
}
body:has(.customer-workbench-layout) .hero-main {
  min-height: 0;
  padding: 0;
  background: transparent;
}
body:has(.customer-workbench-layout) .hero-main .eyebrow { color: var(--workbench-accent); font-size: 9px; }
body:has(.customer-workbench-layout) .hero-main h1 {
  max-width: none;
  margin: 8px 0 0;
  font-family: Inter, "PingFang SC", sans-serif;
  font-size: clamp(24px, 2.2vw, 31px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.16;
}
body:has(.customer-workbench-layout) .hero-main p { margin-top: 10px; color: #625e59; font-size: 12px; }
body:has(.customer-workbench-layout) .hero-main .hero-value { margin-top: 7px; color: #88827b; font-size: 11px; }
body:has(.customer-workbench-layout) .hero-actions { position: absolute; top: 82px; right: 330px; margin: 0; }
body:has(.customer-workbench-layout) .hero-actions .primary-button {
  min-height: 36px;
  border: 1px solid #222426;
  background: #222426;
  font-size: 11px;
}
body:has(.customer-workbench-layout) .hero-preview { display: none; }

body:has(.customer-workbench-layout) .customer-flow {
  order: 2;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  background: transparent;
}
body:has(.customer-workbench-layout) .compact-flow .flow-step,
body:has(.customer-workbench-layout) .compact-flow .flow-step:first-child {
  grid-template-columns: auto 1fr;
  min-height: 66px;
  border: 0;
  border-right: 1px solid var(--workbench-line);
  border-bottom: 1px solid var(--workbench-line);
  padding: 16px 17px;
}
body:has(.customer-workbench-layout) .compact-flow .flow-step:first-child { padding-left: 0; }
body:has(.customer-workbench-layout) .compact-flow .flow-step:last-child { border-right: 0; }
body:has(.customer-workbench-layout) .compact-flow .flow-step > span { color: var(--workbench-accent); font-size: 9px; }
body:has(.customer-workbench-layout) .compact-flow .flow-step strong { font-size: 12px; }
body:has(.customer-workbench-layout) .compact-flow .flow-step p { grid-column: 2; color: #8b857e; font-size: 9px; }

body:has(.customer-workbench-layout) .content-grid {
  order: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  min-height: 0;
  margin-top: 24px;
  overflow: visible;
  background: transparent;
}
body:has(.customer-workbench-layout) .panel {
  border: 1px solid var(--workbench-line);
  border-radius: 0;
  background: var(--workbench-panel);
  box-shadow: none;
}
body:has(.customer-workbench-layout) .upload-panel,
body:has(.customer-workbench-layout) .result-panel {
  position: static;
  padding: 24px;
  border: 1px solid var(--workbench-line);
}
body:has(.customer-workbench-layout) .panel-heading { align-items: flex-start; margin-bottom: 17px; }
body:has(.customer-workbench-layout) .panel-heading h2 {
  margin-top: 5px;
  font-family: Inter, "PingFang SC", sans-serif;
  font-size: 20px;
  font-weight: 720;
  letter-spacing: -0.02em;
}
body:has(.customer-workbench-layout) .section-kicker { color: var(--workbench-accent); font-size: 8px; letter-spacing: 0.16em; }
body:has(.customer-workbench-layout) .reference-upload-tip { color: #76716a; font-size: 11px; }
body:has(.customer-workbench-layout) .reference-mode-picker { max-width: 330px; }
body:has(.customer-workbench-layout) .reference-mode-option { min-height: 34px; border-radius: 0; font-size: 10px; }
body:has(.customer-workbench-layout) .reference-mode-option.active { background: #222426; }
body:has(.customer-workbench-layout) .reference-slot-grid { grid-template-columns: repeat(5, minmax(105px, 1fr)); gap: 9px; }
body:has(.customer-workbench-layout) .reference-slot { min-height: 122px; border-radius: 0; background: #f4f1eb; }
body:has(.customer-workbench-layout) .watermark-panel,
body:has(.customer-workbench-layout) .channel-panel {
  border: 0;
  border-top: 1px solid var(--workbench-line);
  border-radius: 0;
  padding: 18px 0 0;
  background: transparent;
}
body:has(.customer-workbench-layout) .watermark-panel { margin-top: 21px; }
body:has(.customer-workbench-layout) .channel-panel { margin-top: 22px; }
body:has(.customer-workbench-layout) .channel-option { min-height: 68px; border-radius: 0; background: #f3f0ea; }
body:has(.customer-workbench-layout) .channel-option.active { border-color: #222426; background: #222426; color: #fff; }
body:has(.customer-workbench-layout) .api-panel {
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 18px;
  background: #ece8e1;
}
body:has(.customer-workbench-layout) .api-actions { justify-content: flex-end; }
body:has(.customer-workbench-layout) .generate-count-button { min-width: 52px; min-height: 36px; border-radius: 0; }
body:has(.customer-workbench-layout) .generate-count-button.featured { background: var(--workbench-accent); }
body:has(.customer-workbench-layout) .api-actions .generate-now-button { background: #202225; }

.customer-workbench-rail {
  border-left: 1px solid var(--workbench-line);
  padding: 28px 22px;
  background: #f7f4ee;
}
.workbench-rail-section + .workbench-rail-section { margin-top: 34px; }
.workbench-rail-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.workbench-rail-heading span { color: var(--workbench-accent); font-size: 8px; font-weight: 800; letter-spacing: 0.16em; }
.workbench-rail-heading h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -0.02em; }
.workbench-rail-heading button {
  border: 0;
  border-bottom: 1px solid #8f8981;
  padding: 0 0 3px;
  background: transparent;
  color: #67625c;
  font-size: 9px;
  cursor: pointer;
}
.workbench-queue-card { border: 1px solid var(--workbench-line); padding: 18px; background: #ebe7df; }
.workbench-queue-card > span { color: #8a857e; font-size: 9px; font-weight: 800; }
.workbench-queue-card strong { display: block; margin-top: 12px; font-size: 12px; line-height: 1.55; }
.workbench-queue-card p { margin: 8px 0 0; color: #7d7871; font-size: 10px; line-height: 1.65; }
.workbench-queue-card[data-state="processing"] { border-left: 3px solid #5d7793; }
.workbench-queue-card[data-state="queued"],
.workbench-queue-card[data-state="blocked"] { border-left: 3px solid #8e8b86; }
.workbench-queue-card[data-state="empty"] { background: #f2f3f3; }
.workbench-queue-card[data-state="empty"] strong { color: #67625c; }
.workbench-recent-card {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  width: 100%;
  border: 1px solid var(--workbench-line);
  padding: 0;
  overflow: hidden;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.workbench-recent-card img { width: 78px; height: 86px; object-fit: cover; filter: saturate(0.72); }
.workbench-recent-card > span { display: grid; gap: 6px; padding: 12px; }
.workbench-recent-card strong { font-size: 11px; }
.workbench-recent-card small { color: #8b857e; font-size: 9px; }
.workbench-recent-card.is-empty { display: block; min-height: 86px; cursor: default; }
.workbench-recent-card.is-empty > span { min-height: 86px; align-content: center; }
.workbench-rail-note { margin-top: 16px; border-top: 1px solid var(--workbench-line); padding-top: 14px; }
.workbench-rail-note span { color: var(--workbench-accent); font-size: 8px; font-weight: 800; letter-spacing: 0.12em; }
.workbench-rail-note p { margin: 7px 0 0; color: #777169; font-size: 10px; line-height: 1.7; }

/* Shared operations-tool finish for the administrator */
.admin-page {
  --admin-bg: #f1eee8;
  --admin-panel: #fbfaf7;
  --admin-ink: #18191b;
  --admin-line: #d0cbc3;
  --admin-muted: #77736d;
  --admin-accent: #a65e43;
  background: var(--admin-bg);
  color: var(--admin-ink);
}
.admin-page .admin-sidebar { border-right: 1px solid #323438; background: #191b1e; }
.admin-page .admin-brand .brand-mark { border: 1px solid #696b6e; background: transparent; }
.admin-page .admin-brand strong { color: #fff; }
.admin-page .admin-brand span { color: #8f9194; }
.admin-page .admin-workspace-item,
.admin-page .admin-nav-item { border-radius: 0; color: #a9aaac; }
.admin-page .admin-workspace-item:hover,
.admin-page .admin-nav-item:hover { background: #24272b; color: #fff; }
.admin-page .admin-workspace-item.active,
.admin-page .admin-nav-item.active { border-left: 2px solid var(--admin-accent); background: #292b2f; color: #fff; }
.admin-page .admin-back-link { border-color: #414348; border-radius: 0; color: #bbbcbf; }
.admin-page .admin-main { padding: 26px 30px 50px; }
.admin-page .admin-topbar { border-bottom: 1px solid var(--admin-line); padding-bottom: 22px; }
.admin-page .admin-topbar h1 { font-size: 29px; letter-spacing: -0.03em; }
.admin-page .admin-topbar p { color: var(--admin-muted); }
.admin-page .admin-panel,
.admin-page .admin-metric-card,
.admin-page .admin-plan-card { border: 1px solid var(--admin-line); border-radius: 0; background: var(--admin-panel); box-shadow: none; }
.admin-page .admin-metric-card { border-top: 2px solid #26282b; }
.admin-page .admin-metric-card strong { color: var(--admin-ink); font-size: 27px; }
.admin-page .admin-panel-head { border-bottom: 1px solid var(--admin-line); }
.admin-page .admin-data-table th { background: #ebe7e0; color: #69645e; }
.admin-page .admin-data-table th,
.admin-page .admin-data-table td { border-bottom-color: #ded9d2; }
.admin-page .admin-data-table tbody tr:hover { background: #f1ede7; }
.admin-page .primary-button,
.admin-page .table-action-button { border-radius: 0; background: #222428; }
.admin-page .secondary-button,
.admin-page input,
.admin-page select,
.admin-page textarea { border-radius: 0; }
.admin-page .section-kicker { color: var(--admin-accent); }

@media (min-width: 901px) {
  body:has(.customer-workbench-layout) .customer-flow { display: none; }
  body:has(.customer-workbench-layout) .content-grid { margin-top: 18px; }
  body:has(.customer-workbench-layout) .reference-slot p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 1200px) {
  .customer-workbench-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .customer-workbench-rail { display: none; }
  body:has(.customer-workbench-layout) .hero-actions { right: 30px; }
  body:has(.customer-workbench-layout) .reference-slot-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}

@media (max-width: 900px) {
  .customer-workbench-layout { display: block; }
  .customer-workbench-sidebar { display: none; }
  body:has(.customer-workbench-layout) .customer-shell { padding-inline: 22px; }
  body:has(.customer-workbench-layout) .hero-actions { top: 82px; right: 22px; }
}

@media (max-width: 720px) {
  body:has(.customer-workbench-layout) .customer-nav { min-height: 58px; padding: 0 14px; }
  body:has(.customer-workbench-layout) .customer-nav .brand-mark { width: 28px; height: 28px; }
  body:has(.customer-workbench-layout) .customer-nav .brand span { display: none; }
  body:has(.customer-workbench-layout) .mobile-nav-actions > button { color: #c3c0ba; }
  body:has(.customer-workbench-layout) .mobile-nav-actions > button[aria-expanded="true"] { color: #fff; }
  body:has(.customer-workbench-layout) .customer-shell { padding: 0 14px 40px; }
  body:has(.customer-workbench-layout) .customer-hero { padding: 24px 0 20px; }
  body:has(.customer-workbench-layout) .hero-main h1 { max-width: 290px; font-size: 27px; }
  body:has(.customer-workbench-layout) .hero-main p { margin-top: 8px; }
  body:has(.customer-workbench-layout) .hero-actions { position: static; margin-top: 18px; }
  body:has(.customer-workbench-layout) .hero-actions .primary-button { width: 100%; }
  body:has(.customer-workbench-layout) .customer-flow { grid-template-columns: 1fr; }
  body:has(.customer-workbench-layout) .compact-flow .flow-step,
  body:has(.customer-workbench-layout) .compact-flow .flow-step:first-child {
    grid-template-columns: 26px 1fr;
    min-height: 48px;
    border-right: 0;
    padding: 11px 0;
  }
  body:has(.customer-workbench-layout) .compact-flow .flow-step p { display: none; }
  body:has(.customer-workbench-layout) .content-grid { margin-top: 16px; }
  body:has(.customer-workbench-layout) .upload-panel,
  body:has(.customer-workbench-layout) .result-panel { padding: 18px 14px; }
  body:has(.customer-workbench-layout) .panel-heading h2 { font-size: 19px; }
  body:has(.customer-workbench-layout) .reference-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:has(.customer-workbench-layout) .reference-slot { min-height: 138px; }
  body:has(.customer-workbench-layout) .api-panel { align-items: stretch; padding: 14px; }
  body:has(.customer-workbench-layout) .api-actions { justify-content: stretch; }
  body:has(.customer-workbench-layout) .generate-count-button { flex: 1; min-width: 0; }
  body:has(.customer-workbench-layout) .api-actions .generate-now-button { flex-basis: 100%; }
  body:has(.customer-workbench-layout) .customer-service-fab { right: 8px; bottom: 10px; width: 56px; height: 62px; }
  body:has(.customer-workbench-layout) .customer-service-fab img { width: 54px; height: 54px; }
  body:has(.customer-workbench-layout) .customer-service-fab span { bottom: 0; padding: 2px 7px; font-size: 9px; }
}

/* Titanium monochrome workbench */
body:has(.customer-workbench-layout) {
  --titanium-black: #111214;
  --titanium-black-soft: #191b1e;
  --titanium-side-active: #2b2e32;
  --titanium-paper: #f6f7f7;
  --titanium-panel: #ffffff;
  --titanium-panel-soft: #f0f1f1;
  --titanium-line: #c9cdd0;
  --titanium-line-dark: #34383d;
  --titanium-ink: #151719;
  --titanium-muted: #686d72;
  --titanium-silver: #e8ebee;
  --titanium-silver-muted: #aeb4ba;
  background: var(--titanium-paper);
  color: var(--titanium-ink);
}

body:has(.customer-workbench-layout) .customer-nav {
  border-bottom-color: #32353a;
  background: var(--titanium-black);
  color: var(--titanium-silver);
}

body:has(.customer-workbench-layout) .customer-nav .brand-mark {
  border-color: #777d83;
  background: #151719;
  color: #f4f5f6;
}

body:has(.customer-workbench-layout) .customer-nav .brand span { color: #a4a9ae; }
body:has(.customer-workbench-layout) .customer-nav .nav-actions .secondary-button { color: #d6d9dc; }
body:has(.customer-workbench-layout) .customer-nav .nav-actions .secondary-button:hover { color: #ffffff; }
body:has(.customer-workbench-layout) .customer-nav .nav-actions .primary-button {
  border-color: #686d72;
  background: #34383d;
  color: #f7f8f8;
}
body:has(.customer-workbench-layout) .customer-nav .credit-pill {
  border-right-color: #3d4146;
  color: #eef0f2;
}
body:has(.customer-workbench-layout) .credit-symbol {
  border-color: #c9cdd0;
  background: rgba(225, 229, 233, 0.42);
}

body:has(.customer-workbench-layout) .customer-nav .brand strong,
body:has(.customer-workbench-layout) .customer-nav .nav-actions,
body:has(.customer-workbench-layout) .customer-nav .mobile-nav-actions,
body:has(.customer-workbench-layout) .customer-workbench-sidebar,
body:has(.customer-workbench-layout) .customer-workbench-sidebar button,
body:has(.customer-workbench-layout) .customer-workbench-sidebar a {
  color: var(--titanium-silver);
  text-shadow: 0 -1px 0 rgba(255,255,255,0.58), 0 1px 0 rgba(15,17,19,0.88);
}

body:has(.customer-workbench-layout) .customer-workbench-sidebar {
  border-right-color: #34373b;
  background: var(--titanium-black-soft);
}
body:has(.customer-workbench-layout) .workbench-nav-label { color: #8f9499; }
body:has(.customer-workbench-layout) .workbench-nav-item {
  border-left-color: transparent;
  color: #d9dcdf;
}
body:has(.customer-workbench-layout) .workbench-nav-item span { color: #9ca1a6; }
body:has(.customer-workbench-layout) .workbench-nav-item:hover { background: #24272a; color: #ffffff; }
body:has(.customer-workbench-layout) .workbench-nav-item.active {
  border-left-color: #d9dde0;
  background: var(--titanium-side-active);
  color: #ffffff;
}
body:has(.customer-workbench-layout) .workbench-nav-item.active span { color: #f0f2f3; }
body:has(.customer-workbench-layout) .workbench-usage-card { border-top-color: #44484d; }
body:has(.customer-workbench-layout) .workbench-usage-card > span,
body:has(.customer-workbench-layout) .workbench-usage-card p { color: #aeb3b8; }
body:has(.customer-workbench-layout) .workbench-usage-card .credit-pill {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  justify-content: center;
  margin: 0 0 12px;
  border: 1px solid #555a60;
  border-radius: 4px;
  padding: 7px 10px;
  background: #24272b;
  color: #f0f2f3;
}
body:has(.customer-workbench-layout) .workbench-usage-card .credit-pill .credit-symbol {
  border-color: #c9cdd0;
  background: rgba(225, 229, 233, 0.42);
}
body:has(.customer-workbench-layout) .workbench-usage-card button {
  border-color: #aeb3b8;
  background: transparent;
  color: #f0f2f3;
}
body:has(.customer-workbench-layout) .workbench-usage-card button:hover { background: #303338; }

body:has(.customer-workbench-layout) .workbench-entitlement-grid {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}

body:has(.customer-workbench-layout) .workbench-entitlement-grid > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #34383d;
}

body:has(.customer-workbench-layout) .workbench-entitlement-grid > div > span:first-child {
  color: #aeb3b8;
  font-size: 9px;
  letter-spacing: 0.05em;
}

body:has(.customer-workbench-layout) .workbench-entitlement-grid strong {
  margin: 0;
  color: #f1f3f4;
  font-size: 10px;
  text-align: right;
}

body:has(.customer-workbench-layout) .workbench-entitlement-grid .credit-pill {
  width: auto;
  justify-content: flex-end;
  padding: 0;
}

body:has(.customer-workbench-layout) .customer-shell,
body:has(.customer-workbench-layout) .customer-workbench-rail {
  color: var(--titanium-ink);
  text-shadow: none;
}
body:has(.customer-workbench-layout) .customer-shell *,
body:has(.customer-workbench-layout) .customer-workbench-rail * { text-shadow: none; }
body:has(.customer-workbench-layout) .customer-shell { background: var(--titanium-paper); }
body:has(.customer-workbench-layout) .customer-hero {
  border-bottom-color: var(--titanium-line);
  background: var(--titanium-panel);
}
body:has(.customer-workbench-layout) .hero-main .eyebrow,
body:has(.customer-workbench-layout) .section-kicker { color: #555b61; }
body:has(.customer-workbench-layout) .hero-main h1 { color: #0f1113; }
body:has(.customer-workbench-layout) .hero-main p { color: #4f5459; }
body:has(.customer-workbench-layout) .hero-main .hero-value { color: #686d72; }
body:has(.customer-workbench-layout) .hero-actions .primary-button,
body:has(.customer-workbench-layout) .api-actions .generate-now-button {
  border-color: #202327;
  background: #202327;
  color: #ffffff;
}
body:has(.customer-workbench-layout) .compact-flow .flow-step,
body:has(.customer-workbench-layout) .compact-flow .flow-step:first-child {
  border-color: var(--titanium-line);
}
body:has(.customer-workbench-layout) .compact-flow .flow-step > span { color: #555b61; }
body:has(.customer-workbench-layout) .compact-flow .flow-step p { color: #74797e; }

body:has(.customer-workbench-layout) .panel,
body:has(.customer-workbench-layout) .upload-panel,
body:has(.customer-workbench-layout) .result-panel {
  border-color: var(--titanium-line);
  background: var(--titanium-panel);
}
body:has(.customer-workbench-layout) .panel-heading > span,
body:has(.customer-workbench-layout) .reference-upload-tip,
body:has(.customer-workbench-layout) .reference-upload-status { color: var(--titanium-muted); }
body:has(.customer-workbench-layout) .reference-mode-option {
  border-color: var(--titanium-line);
  background: #ffffff;
  color: #272a2e;
}
body:has(.customer-workbench-layout) .reference-mode-option.active {
  border-color: #25282c;
  background: #25282c;
  color: #ffffff;
}
body:has(.customer-workbench-layout) .reference-slot {
  border-color: var(--titanium-line);
  background: #fafafa;
}
body:has(.customer-workbench-layout) .reference-slot:hover { border-color: #777d83; background: #f4f5f5; }
body:has(.customer-workbench-layout) .reference-slot-heading em,
body:has(.customer-workbench-layout) .reference-slot-upload { color: #34383d; }
body:has(.customer-workbench-layout) .reference-slot p { color: #666b70; }
body:has(.customer-workbench-layout) .reference-slot {
  display: flex;
  min-height: 198px;
  flex-direction: column;
}
body:has(.customer-workbench-layout) .reference-slot-heading {
  min-height: 44px;
  align-items: flex-start;
}
body:has(.customer-workbench-layout) .reference-slot p {
  min-height: 48px;
  margin-bottom: 10px;
}
body:has(.customer-workbench-layout) .reference-slot-footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
}
body:has(.customer-workbench-layout) .reference-slot-footer .reference-detail-focus {
  min-height: 32px;
  margin: 0;
}
body:has(.customer-workbench-layout) .reference-slot-footer .reference-slot-action {
  min-height: 32px;
}
body:has(.customer-workbench-layout) .watermark-panel,
body:has(.customer-workbench-layout) .channel-panel { border-top-color: var(--titanium-line); }
body:has(.customer-workbench-layout) input,
body:has(.customer-workbench-layout) select,
body:has(.customer-workbench-layout) textarea {
  border-color: var(--titanium-line);
  background: #ffffff;
  color: var(--titanium-ink);
}
body:has(.customer-workbench-layout) input:focus,
body:has(.customer-workbench-layout) select:focus,
body:has(.customer-workbench-layout) textarea:focus { border-color: #555b61; outline-color: rgba(85,91,97,0.16); }
body:has(.customer-workbench-layout) .channel-option {
  border-color: var(--titanium-line);
  background: #ffffff;
  color: #222529;
}
body:has(.customer-workbench-layout) .channel-option.active {
  border-color: #2b2e32;
  background: #ffffff;
  color: #17191c;
  box-shadow: inset 3px 0 0 #34383d;
}
body:has(.customer-workbench-layout) .channel-option span { color: #6d7277; }
body:has(.customer-workbench-layout) .generate-count-button {
  border-color: var(--titanium-line);
  background: #ffffff;
  color: #34383d;
}
body:has(.customer-workbench-layout) .generate-count-button.featured {
  border-color: #34383d;
  background: #34383d;
  color: #ffffff;
}
body:has(.customer-workbench-layout) .api-panel,
body:has(.customer-workbench-layout) .identity-strip div,
body:has(.customer-workbench-layout) .progress-panel {
  border-color: var(--titanium-line);
  background: var(--titanium-panel-soft);
}
body:has(.customer-workbench-layout) .api-status.ready { color: #34383d; }
body:has(.customer-workbench-layout) .progress-track { background: #dfe2e4; }
body:has(.customer-workbench-layout) .progress-track span { background: #34383d; }

body:has(.customer-workbench-layout) .customer-workbench-rail {
  border-left-color: var(--titanium-line);
  background: #f5f6f6;
}
body:has(.customer-workbench-layout) .workbench-rail-heading span { color: #555b61; }
body:has(.customer-workbench-layout) .workbench-rail-heading button { border-bottom-color: #777d83; color: #555b61; }
body:has(.customer-workbench-layout) .workbench-queue-card {
  border-color: var(--titanium-line);
  background: #eef0f0;
}
body:has(.customer-workbench-layout) .workbench-queue-card > span,
body:has(.customer-workbench-layout) .workbench-queue-card p,
body:has(.customer-workbench-layout) .workbench-recent-card small,
body:has(.customer-workbench-layout) .workbench-rail-note p { color: #6d7277; }
body:has(.customer-workbench-layout) .workbench-recent-card {
  border-color: var(--titanium-line);
  background: #ffffff;
}
body:has(.customer-workbench-layout) .workbench-recent-card img { filter: grayscale(0.12) saturate(0.72); }
body:has(.customer-workbench-layout) .workbench-rail-note { border-top-color: var(--titanium-line); }
body:has(.customer-workbench-layout) .workbench-rail-note span { color: #555b61; }

body:has(.customer-workbench-layout) .login-modal,
body:has(.customer-workbench-layout) .pricing-modal,
body:has(.customer-workbench-layout) .generation-confirm-modal,
body:has(.customer-workbench-layout) .history-modal,
body:has(.customer-workbench-layout) .task-modal,
body:has(.customer-workbench-layout) .account-center-modal,
body:has(.customer-workbench-layout) .recharge-modal,
body:has(.customer-workbench-layout) .announcement-modal,
body:has(.customer-workbench-layout) .watermark-settings-modal,
body:has(.customer-workbench-layout) .customer-service-modal { background: rgba(15,17,19,0.54); }
body:has(.customer-workbench-layout) .login-card,
body:has(.customer-workbench-layout) .pricing-card,
body:has(.customer-workbench-layout) .generation-confirm-card,
body:has(.customer-workbench-layout) .history-card,
body:has(.customer-workbench-layout) .task-card,
body:has(.customer-workbench-layout) .account-center-card,
body:has(.customer-workbench-layout) .recharge-card,
body:has(.customer-workbench-layout) .announcement-card,
body:has(.customer-workbench-layout) .watermark-settings-card,
body:has(.customer-workbench-layout) .customer-service-card {
  border-color: var(--titanium-line);
  background: #ffffff;
  color: var(--titanium-ink);
  box-shadow: 0 28px 80px rgba(12,14,16,0.24);
  text-shadow: none;
}
body:has(.customer-workbench-layout) .login-hint,
body:has(.customer-workbench-layout) .pricing-note { border-left-color: #555b61; background: #f0f1f1; }

body:has(.customer-workbench-layout) .access-center-card {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

body:has(.customer-workbench-layout) .access-status-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 20px 0;
  border: 1px solid #c9cdcf;
  background: #c9cdcf;
}

body:has(.customer-workbench-layout) .access-membership-state-note {
  margin: -2px 0 20px;
  padding: 12px 14px;
  border-left: 3px solid #555b61;
  background: #f0f1f1;
  color: #4f555a;
  font-size: 12px;
  line-height: 1.6;
}

body:has(.customer-workbench-layout) .access-status-summary article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 15px;
  background: #f7f8f8;
}

body:has(.customer-workbench-layout) .access-status-summary span,
body:has(.customer-workbench-layout) .access-status-summary strong {
  overflow-wrap: anywhere;
}

body:has(.customer-workbench-layout) .access-status-summary span {
  color: #71777c;
  font-size: 10px;
}

body:has(.customer-workbench-layout) .access-status-summary strong {
  font-size: 14px;
}

body:has(.customer-workbench-layout) .access-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:has(.customer-workbench-layout) .recharge-application-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr) auto;
  align-items: end;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #c9cdcf;
  background: #f7f8f8;
}

body:has(.customer-workbench-layout) .recharge-application-form p {
  margin: 6px 0 0;
  color: #71777c;
  font-size: 11px;
  line-height: 1.6;
}

body:has(.customer-workbench-layout) .recharge-application-form .recharge-application-hint {
  color: #4f555a;
  font-weight: 700;
}

body:has(.customer-workbench-layout) .recharge-application-form .recharge-application-hint[hidden] {
  display: none;
}

body:has(.customer-workbench-layout) .recharge-application-form .primary-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

body:has(.customer-workbench-layout) .recharge-application-form label {
  display: grid;
  gap: 6px;
  color: #4f555a;
  font-size: 11px;
}

body:has(.customer-workbench-layout) .payment-collection-panel {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #bfc4c8;
  background: #f5f6f6;
}

body:has(.customer-workbench-layout) .payment-collection-panel[hidden] {
  display: none;
}

body:has(.customer-workbench-layout) .payment-collection-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body:has(.customer-workbench-layout) .payment-collection-heading h3 {
  margin: 4px 0 0;
  font-size: 19px;
}

body:has(.customer-workbench-layout) .payment-collection-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(160px, 0.5fr);
  gap: 1px;
  margin: 0;
  border: 1px solid #ccd0d2;
  background: #ccd0d2;
}

body:has(.customer-workbench-layout) .payment-collection-summary div {
  min-width: 0;
  padding: 12px 14px;
  background: #ffffff;
}

body:has(.customer-workbench-layout) .payment-collection-summary dt {
  color: #747a7f;
  font-size: 10px;
}

body:has(.customer-workbench-layout) .payment-collection-summary dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 700;
}

body:has(.customer-workbench-layout) .payment-channel-tabs {
  display: flex;
  gap: 8px;
}

body:has(.customer-workbench-layout) .payment-channel-tab {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid #b8bdc1;
  background: #ffffff;
  color: #444a4f;
  cursor: pointer;
}

body:has(.customer-workbench-layout) .payment-channel-tab.active {
  border-color: #23262a;
  background: #23262a;
  color: #ffffff;
}

body:has(.customer-workbench-layout) .payment-qr-layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

body:has(.customer-workbench-layout) .payment-qr-frame {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 14px;
  border: 1px solid #c7cbce;
  background: #ffffff;
  color: #747a7f;
  text-align: center;
}

body:has(.customer-workbench-layout) .payment-qr-frame img {
  display: block;
  width: min(100%, 280px);
  height: auto;
  max-height: 280px;
  object-fit: contain;
}

body:has(.customer-workbench-layout) .payment-qr-frame img[hidden] {
  display: none;
}

body:has(.customer-workbench-layout) .payment-qr-copy {
  display: grid;
  gap: 7px;
}

body:has(.customer-workbench-layout) .payment-qr-copy span {
  color: #747a7f;
  font-size: 10px;
}

body:has(.customer-workbench-layout) .payment-qr-copy strong {
  font-size: 18px;
}

body:has(.customer-workbench-layout) .payment-qr-copy p {
  margin: 8px 0 0;
  color: #555b60;
  font-size: 12px;
  line-height: 1.75;
}

body:has(.customer-workbench-layout) .payment-declaration-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
}

body:has(.customer-workbench-layout) .payment-declaration-form label {
  display: grid;
  gap: 6px;
  color: #4f555a;
  font-size: 11px;
}

body:has(.customer-workbench-layout) .payment-declaration-form input {
  min-width: 0;
}

body:has(.customer-workbench-layout) .payment-collection-empty {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid #777d82;
  color: #5c6267;
  font-size: 11px;
  line-height: 1.65;
}

body:has(.customer-workbench-layout) .payment-application-section {
  margin-top: 22px;
}

body:has(.customer-workbench-layout) .payment-application-list {
  display: grid;
  gap: 8px;
}

body:has(.customer-workbench-layout) .payment-application-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 18px;
  padding: 13px 0;
  border-bottom: 1px solid #d7dadd;
}

body:has(.customer-workbench-layout) .payment-application-row > div {
  display: grid;
  gap: 4px;
}

body:has(.customer-workbench-layout) .payment-application-row > div:last-of-type {
  text-align: right;
}

body:has(.customer-workbench-layout) .payment-application-row span {
  color: #747a7f;
  font-size: 10px;
}

body:has(.customer-workbench-layout) .payment-application-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: #8b4f43;
  font-size: 11px;
}

body:has(.customer-workbench-layout) .payment-application-row .payment-declaration-summary {
  color: #4f6660;
}

body:has(.customer-workbench-layout) .payment-application-row .payment-application-pay {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 34px;
  padding: 0 13px;
}

body:has(.customer-workbench-layout) .payment-application-row .status-pending { color: #805e19; }
body:has(.customer-workbench-layout) .payment-application-row .status-approved { color: #2c6f50; }
body:has(.customer-workbench-layout) .payment-application-row .status-rejected { color: #9b453b; }

@media (max-width: 720px) {
  body:has(.customer-workbench-layout) .access-status-summary,
  body:has(.customer-workbench-layout) .access-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:has(.customer-workbench-layout) .recharge-application-form {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body:has(.customer-workbench-layout) .payment-collection-summary,
  body:has(.customer-workbench-layout) .payment-qr-layout,
  body:has(.customer-workbench-layout) .payment-declaration-form {
    grid-template-columns: 1fr;
  }

  body:has(.customer-workbench-layout) .payment-qr-frame {
    width: min(100%, 300px);
    justify-self: center;
  }
}
body:has(.customer-workbench-layout) .auth-mode.active { border-bottom-color: #23262a; color: #17191c; }
body:has(.customer-workbench-layout) .plan-button.primary-plan,
body:has(.customer-workbench-layout) .login-submit,
body:has(.customer-workbench-layout) .table-action-button { background: #23262a; color: #ffffff; }
body:has(.customer-workbench-layout) .plan-card,
body:has(.customer-workbench-layout) .history-item,
body:has(.customer-workbench-layout) .task-item,
body:has(.customer-workbench-layout) .account-center-section,
body:has(.customer-workbench-layout) .announcement-list-item { border-color: var(--titanium-line); background: #ffffff; }
body:has(.customer-workbench-layout) .customer-service-fab { filter: grayscale(1) drop-shadow(0 12px 14px rgba(20,22,24,0.18)); }
body:has(.customer-workbench-layout) .customer-service-fab span { border-color: #bfc4c8; background: rgba(255,255,255,0.95); color: #202327; }
body:has(.customer-workbench-layout) .site-filing-footer {
  padding: 18px 18px 24px;
  text-align: center;
  color: #7d8388;
  font-size: 12px;
  line-height: 1.6;
}
body:has(.customer-workbench-layout) .site-filing-footer a {
  color: inherit;
  text-decoration: none;
}
body:has(.customer-workbench-layout) .site-filing-footer a:hover {
  color: #23262a;
  text-decoration: underline;
}

.admin-page {
  --admin-bg: #f2f3f3;
  --admin-panel: #ffffff;
  --admin-ink: #151719;
  --admin-line: #c9cdd0;
  --admin-muted: #686d72;
  --admin-accent: #34383d;
  background: var(--admin-bg);
  color: var(--admin-ink);
}
.admin-page .admin-sidebar { border-right-color: #34373b; background: #191b1e; }
.admin-page .admin-brand strong,
.admin-page .admin-brand span,
.admin-page .admin-workspace-item,
.admin-page .admin-nav-item,
.admin-page .admin-back-link {
  color: #e8ebee;
  text-shadow: 0 -1px 0 rgba(255,255,255,0.52), 0 1px 0 rgba(15,17,19,0.88);
}
.admin-page .admin-brand .brand-mark { border-color: #777d83; color: #ffffff; }
.admin-page .admin-workspace-item:hover,
.admin-page .admin-nav-item:hover { background: #24272a; }
.admin-page .admin-workspace-item.active,
.admin-page .admin-nav-item.active { border-left-color: #e1e4e6; background: #2b2e32; }
.admin-page .admin-back-link { border-color: #777d83; }
.admin-page .admin-main,
.admin-page .admin-main * { text-shadow: none; }
.admin-page .admin-topbar { border-bottom-color: var(--admin-line); }
.admin-page .admin-topbar p,
.admin-page .cost-note { color: var(--admin-muted); }
.admin-page .admin-panel,
.admin-page .admin-metric-card,
.admin-page .admin-plan-card,
.admin-page .admin-auth-card {
  border-color: var(--admin-line);
  background: var(--admin-panel);
  box-shadow: none;
}
.admin-page .admin-metric-card { border-top-color: #34383d; }
.admin-page .admin-panel-head { border-bottom-color: var(--admin-line); }
.admin-page .admin-data-table th { background: #eceeef; color: #555b61; }
.admin-page .admin-data-table th,
.admin-page .admin-data-table td { border-bottom-color: #dde0e2; }
.admin-page .admin-data-table tbody tr:hover { background: #f1f2f2; }
.admin-page .primary-button,
.admin-page .table-action-button { background: #23262a; color: #ffffff; }
.admin-page .secondary-button,
.admin-page input,
.admin-page select,
.admin-page textarea { border-color: var(--admin-line); background: #ffffff; color: var(--admin-ink); }
.admin-page .section-kicker { color: #555b61; }

.admin-page .admin-panel-head > div:first-child {
  min-width: 0;
}

.admin-page .admin-panel-head .form-hint,
.admin-page .cost-note,
.admin-page .admin-api-state small {
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.admin-page .admin-api-state {
  width: min(380px, 100%);
  max-width: 380px;
}

.admin-page .admin-api-boundary {
  color: #8a5f4d;
}

.admin-page .admin-filter-bar {
  display: grid;
  width: min(780px, 100%);
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  align-items: center;
  justify-content: stretch;
  gap: 8px;
}

.admin-page .admin-filter-bar > * {
  width: 100%;
  min-width: 0;
}

.admin-page .admin-filter-bar input[type="search"] {
  grid-column: span 2;
}

.admin-page .admin-table-wrap {
  max-width: 100%;
  overscroll-behavior-inline: contain;
}

.admin-page .admin-data-table th,
.admin-page .admin-data-table td {
  vertical-align: top;
  line-height: 1.45;
  white-space: normal;
  word-break: normal;
}

.admin-page .admin-data-table td {
  overflow-wrap: anywhere;
}

.admin-page .task-table {
  min-width: 1320px;
}

.admin-page .task-table th:nth-child(1),
.admin-page .task-table td:nth-child(1) { min-width: 150px; }
.admin-page .task-table th:nth-child(2),
.admin-page .task-table td:nth-child(2) { min-width: 210px; }
.admin-page .task-table th:nth-child(10),
.admin-page .task-table td:nth-child(10) { min-width: 260px; max-width: 360px; }

.admin-page .admin-compact-card,
.admin-page .admin-detail-grid dd {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 680px) {
  .admin-page .admin-nav { display: none; }
  body.admin-mobile-nav-open .admin-nav { display: grid; }

  .admin-page .admin-panel {
    padding: 16px;
  }

  .admin-page .admin-inline-controls,
  .admin-page .admin-filter-bar {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .admin-page .admin-inline-controls > *,
  .admin-page .admin-filter-bar input[type="search"] {
    width: 100%;
    grid-column: auto;
  }

  .admin-page .admin-api-state {
    width: 100%;
    max-width: none;
  }

  .admin-page .cost-note {
    border-radius: 0;
  }

  .cost-usage-order > summary { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body:has(.customer-workbench-layout) .mobile-nav-actions > button { color: #e2e5e7; }
  body:has(.customer-workbench-layout) .mobile-more-menu { border-color: #4a4e53; background: #1b1d20; }
  body:has(.customer-workbench-layout) .mobile-more-menu button { border-bottom-color: #34373b; color: #e5e8ea; }
  body:has(.customer-workbench-layout) .mobile-more-menu button:active { background: #2b2e32; }
}

/* Titanium canvas breathing room */
@media (min-width: 901px) {
  body:has(.customer-workbench-layout) .customer-shell {
    width: calc(100% - 36px);
    margin: 18px;
    overflow: hidden;
    border: 1px solid #d2d5d7;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(17, 18, 20, 0.055);
  }

  body:has(.customer-workbench-layout) .customer-hero {
    border-radius: 6px 6px 0 0;
  }
}

@media (max-width: 900px) {
  body:has(.customer-workbench-layout) .customer-shell {
    width: 100%;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}