/* Flat dark theme.
   Layering comes from background lightness, not from borders and shadows --
   the previous design nested four levels of outlined boxes and the strokes
   competed with the content. Only one accent colour, reserved for things that
   are actionable or that report state. */

:root {
  --bg: #0e1014;
  --surface: #161a21;
  --surface-2: #1c212a;
  --field: #11141a;
  --line: #232935;
  --text: #e9edf5;
  --muted: #8b93a5;
  --faint: #656d7e;
  /* One vivid hue per feature. Gives the dark shell colour without turning
     random: the active mode, its primary button and its result frame all read
     as the same thing. --feature is swapped on the shell when the mode changes. */
  --c-image: #38bdf8;   /* sky   - 生成图片 */
  --c-dress: #a78bfa;   /* violet- 换装 */
  --c-face:  #2dd4bf;   /* teal  - 换脸 */
  --c-video: #fbbf24;   /* amber - 生成视频 */
  --feature: var(--c-image);

  --accent: var(--feature);
  --accent-ink: #0b0e13;
  --ok: #4ade80;
  --warn: #fbbf24;
  --danger: #fb7185;
  --r: 10px;
  --r-lg: 16px;

  font-family: "SF Pro Text", "PingFang SC", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.has-overlay { overflow: hidden; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* ---------- top bar ---------- */

.topbar {
  /* Sticky so the balance and the recharge entry stay reachable after the page
     scrolls; the popover is anchored to this bar. */
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: grid;
  gap: 2px;
  line-height: 1.2;
  flex: 0 1 auto;
  min-width: 0;
}
.brand-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 32px;
  max-width: min(220px, 52vw);
  object-fit: contain;
  object-position: left center;
}
.brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-ver {
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: 0.02em;
}

/* Line icons from /static/icons/. Mask keeps currentColor so a chip, a
   mode tab and a toast all tint the same mark. */
.ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  vertical-align: -0.2em;
}
.ico-lg { width: 18px; height: 18px; }
.ico-xl { width: 36px; height: 36px; }
.ico-undress { --ico: url("icons/icon-undress.svg"); }
.ico-faceswap { --ico: url("icons/icon-faceswap.svg"); }
.ico-txt2img { --ico: url("icons/icon-txt2img.svg"); }
.ico-img2video { --ico: url("icons/icon-img2video.svg"); }
.ico-image-add { --ico: url("icons/icon-image-add.svg"); }
.ico-image-clear { --ico: url("icons/icon-image-clear.svg"); }
.ico-ratio-portrait { --ico: url("icons/icon-ratio-portrait.svg"); }
.ico-ratio-landscape { --ico: url("icons/icon-ratio-landscape.svg"); }
.ico-ratio-square { --ico: url("icons/icon-ratio-square.svg"); }
.ico-wallet { --ico: url("icons/icon-wallet.svg"); }
.ico-gallery { --ico: url("icons/icon-gallery.svg"); }
.ico-login { --ico: url("icons/icon-login.svg"); }
.ico-back { --ico: url("icons/icon-back.svg"); }
.ico-download { --ico: url("icons/icon-download.svg"); }
.ico-refresh { --ico: url("icons/icon-refresh.svg"); }
.ico-collapse { --ico: url("icons/icon-collapse.svg"); }
.ico-close { --ico: url("icons/icon-close.svg"); }
.ico-empty-stage { --ico: url("icons/icon-empty-stage.svg"); }
.ico-check { --ico: url("icons/icon-check.svg"); }
.ico-warn { --ico: url("icons/icon-warn.svg"); }
.ico-error { --ico: url("icons/icon-error.svg"); }
.ico-admin { --ico: url("icons/icon-admin.svg"); }
.ico-search { --ico: url("icons/icon-search.svg"); }
.ico-filter { --ico: url("icons/icon-filter.svg"); }
.ico-overview { --ico: url("icons/icon-overview.svg"); }
.ico-users { --ico: url("icons/icon-users.svg"); }
.ico-orders { --ico: url("icons/icon-orders.svg"); }
.ico-tasks { --ico: url("icons/icon-tasks.svg"); }
.ico-audit { --ico: url("icons/icon-audit.svg"); }
.ico-settings { --ico: url("icons/icon-settings.svg"); }
.ico-ban { --ico: url("icons/icon-ban.svg"); }
.ico-credit { --ico: url("icons/icon-credit.svg"); }
.ico-gift { --ico: url("icons/icon-gift.svg"); }
.ico-hot { --ico: url("icons/icon-hot.svg"); }
.ico-tag { --ico: url("icons/icon-tag.svg"); }
.ico-crown { --ico: url("icons/icon-crown.svg"); }
.ico-play { --ico: url("icons/icon-play.svg"); }
.ico-checkin { --ico: url("icons/icon-checkin.svg"); }

.account {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

.who {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  background: var(--surface-2);
  color: var(--text);
  white-space: nowrap;
  transition: background 0.15s;
}
.chip:hover { background: #232935; }
.chip strong { color: var(--feature); font-variant-numeric: tabular-nums; }

.chip.primary { background: var(--feature); color: var(--accent-ink); font-weight: 600; }
.chip.primary:hover { filter: brightness(1.12); }
a.chip { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; }
.chip-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 2px var(--surface-2);
}
.chip.danger { background: #3a1c22; color: var(--danger); }
.chip.danger:hover { background: #4a222a; }

/* ---------- recharge popover ---------- */

.wallet-pop {
  position: absolute;
  top: 58px;
  right: 24px;
  z-index: 20;
  width: 328px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.wallet-pop-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  margin-bottom: 4px;
}
.wallet-pop-promo {
  margin: 0 0 12px;
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.packages { display: grid; gap: 8px; }
.pkg {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--field);
  color: var(--text);
  text-align: left;
}
.pkg:hover { background: #1a1f28; }
.pkg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pkg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #2a3140;
  color: #d7deea;
}
.pkg-badge .ico { width: 11px; height: 11px; }
.pkg-off {
  font-size: 11px;
  font-weight: 700;
  color: #fb7185;
}
.pkg-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.pkg-price b { font-size: 18px; letter-spacing: -0.03em; }
.pkg-price s {
  color: var(--faint);
  font-size: 12px;
}
.pkg-credits {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.pkg-save { color: #4ade80; font-weight: 600; }
.pkg-pitch { color: var(--muted); font-size: 11px; }

.pkg-p9 { border-color: #5a3d12; }
.pkg-p9 .pkg-badge { background: #fbbf24; color: #1a1206; }
.pkg-p9 .pkg-off { color: #fbbf24; }

.pkg-p99 .pkg-badge { background: #7f1d1d; color: #fecaca; }

.pkg-p199 { border-color: #134e4a; }
.pkg-p199 .pkg-badge { background: #134e4a; color: #5eead4; }

.pkg-hot,
.pkg-p299 {
  background: linear-gradient(180deg, #2a2112 0%, #16130c 100%);
  border-color: #8a6a28;
}
.pkg-hot:hover,
.pkg-p299:hover { background: linear-gradient(180deg, #332818 0%, #1c170e 100%); }
.pkg-p299 .pkg-badge { background: #fbbf24; color: #1a1206; }

.pkg.sold { opacity: 0.45; cursor: not-allowed; }
.pkg.sold:hover { background: var(--field); }
.wallet-pop-note { margin-top: 10px; color: var(--faint); font-size: 12px; line-height: 1.6; }

/* ---------- layout ---------- */

.studio {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px;
}

.composer { display: grid; gap: 16px; }

/* ---------- mode switch ---------- */

.modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: var(--r);
  background: var(--surface);
}
.mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 7px;
  padding: 8px 6px;
  font-size: 13px;
  background: transparent;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.mode:hover { color: var(--text); }
.mode.active,
.mode.active:hover {
  background: var(--mode-color, var(--feature));
  color: var(--accent-ink);
  font-weight: 700;
}
.mode[data-tab="txt2img"]   { --mode-color: var(--c-image); }
.mode[data-tab="undress"]   { --mode-color: var(--c-dress); }
.mode[data-tab="faceswap"]  { --mode-color: var(--c-face); }
.mode[data-tab="img2video"] { --mode-color: var(--c-video); }

/* ---------- panels & fields ---------- */

.panel { display: none; gap: 16px; }
.panel.active { display: grid; }

.field { display: grid; gap: 8px; }
.field > span {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.field > span em { color: var(--faint); font-style: normal; font-size: 12px; }

/* Same job as .drop: the control has to look like a place you put something.
   A transparent edge on --field (almost the page colour) made the prompt
   boxes read as labels. */
textarea,
input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #2c3340;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  resize: vertical;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
textarea::placeholder, input::placeholder { color: var(--muted); }
textarea:hover,
input[type="text"]:hover,
input[type="number"]:hover {
  border-color: #3d4656;
}
textarea:focus, input:focus {
  outline: none;
  border-color: var(--feature);
  background: #141821;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--feature) 22%, transparent);
}

/* ---------- segmented control ---------- */

.segmented {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r);
  background: var(--field);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 7px;
  padding: 7px 8px;
  font-size: 13px;
  background: transparent;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface-2); color: var(--feature); font-weight: 600; }

/* ---------- image picker ---------- */

/* Reads as a control, not as a text field: dashed outline, an explicit
   button-looking affordance, and a filled state that shows the thumbnail. */
.drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--field);
  color: var(--muted);
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}
.drop:hover { border-color: var(--feature); background: #141821; }
.drop:focus-within { border-color: var(--feature); }
.drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.drop .pick {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--feature);
  font-size: 20px;
  line-height: 1;
}
/* The slot keeps its box; only its contents change between picks. */
.drop .pick.has-thumb {
  background: transparent;
  overflow: hidden;
  padding: 0;
}
.drop .thumb {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}
.drop .drop-text { display: grid; gap: 2px; min-width: 0; }
.drop .drop-text b { font-weight: 600; color: var(--text); font-size: 13px; }
.drop .drop-text span {
  color: var(--faint);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop.filled { border-style: solid; border-color: var(--line); }
.drop-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  background: var(--surface-2);
  color: var(--muted);
  z-index: 1;
}
.drop-clear:hover { color: var(--text); }

/* ---------- submit ---------- */

.submit { display: grid; gap: 8px; justify-items: start; }
.consent { margin: 0; font-size: 12px; color: var(--faint); }
.go {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--r);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--feature);
  color: var(--accent-ink);
  transition: filter 0.15s, opacity 0.15s;
}
.go.priced { justify-content: space-between; }
.go:hover:not(:disabled) { filter: brightness(1.12); }
.go:disabled { opacity: 0.5; cursor: not-allowed; }
.go.locked { background: var(--surface-2); color: var(--text); opacity: 1; cursor: pointer; }
.go-cost {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(11, 13, 18, 0.22);
  letter-spacing: 0;
}
.go.locked .go-cost { background: rgba(255, 255, 255, 0.08); }

.tip { margin: -4px 0 0; font-size: 12px; color: var(--faint); line-height: 1.6; }

/* ---------- stage ---------- */

.stage {
  min-height: 460px;
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.stage-empty {
  min-height: 428px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--faint);
}
.stage-empty .ico-empty-stage {
  width: 44px;
  height: 44px;
  color: var(--feature);
  opacity: 0.55;
}
.stage-empty p { margin: 0; font-size: 13px; }

.result-media {
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--field);
  overflow: hidden;
}
.result-media img,
.result-media video {
  max-width: 100%;
  max-height: 70vh;
  display: block;
}

.result-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.handoff {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.go.waiting { background: var(--surface-2); color: var(--muted); opacity: 1; }
.result-meta { color: var(--faint); font-size: 12px; margin-right: auto; }
.result-meta b { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- history ---------- */

.history { display: grid; gap: 10px; }
.history-title { font-size: 12px; color: var(--faint); }
.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.history-item {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--field);
}
.history-item img, .history-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.history-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.history-item:hover::after { box-shadow: inset 0 0 0 2px var(--feature); }
.history-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  color: #fff;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.history-item .kind {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(11, 14, 19, 0.78);
  color: var(--text);
}

/* ---------- progress ---------- */

.skeleton {
  position: relative;
  min-height: 320px;
  border-radius: var(--r);
  background: var(--field);
  overflow: hidden;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--muted);
}
.skeleton .hint {
  max-width: 22em;
  padding: 0 16px;
  text-align: center;
  line-height: 1.55;
  font-size: 12px;
  color: var(--faint);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.06) 50%, transparent 80%);
  animation: sweep 1.5s linear infinite;
}
@keyframes sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.skeleton .elapsed { font-variant-numeric: tabular-nums; font-size: 22px; color: var(--text); }

.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(14, 16, 20, 0.35);
  border-top-color: var(--accent-ink);
  display: inline-block;
  vertical-align: -2px;
  margin-right: 8px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- icon motion ---------- */

.anim-empty-breathe {
  animation: ico-breathe 4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes ico-breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.78; transform: scale(1.06); }
}

.anim-drop-pulse .ico-image-add {
  animation: ico-pulse 2.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes ico-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.mode.anim-tab-busy .ico {
  animation: ico-busy 1.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes ico-busy {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.anim-go-spin {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
}
.anim-go-spin .ico { width: 11px; height: 11px; }
.anim-go-spin::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(14, 16, 20, 0.28);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.stage-wait-mark {
  position: relative;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.stage-wait-mark .ico {
  width: 36px;
  height: 36px;
  color: var(--feature);
}
.stage-wait-ring {
  position: absolute;
  inset: 0;
  width: 88px;
  height: 88px;
  animation: wait-ring 1.4s linear infinite;
}
.stage-wait-ring circle {
  fill: none;
  stroke: var(--feature);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 50 126;
  opacity: 0.85;
}
@keyframes wait-ring { to { transform: rotate(360deg); } }
.stage-wait[data-feature="undress"] .anim-stage-wait {
  animation: wait-undress 2.4s ease-in-out infinite;
  transform-origin: center top;
}
.stage-wait[data-feature="faceswap"] .anim-stage-wait {
  animation: wait-faceswap 2s ease-in-out infinite;
  transform-origin: center;
}
.stage-wait[data-feature="txt2img"] .anim-stage-wait {
  animation: wait-txt2img 2.6s ease-in-out infinite;
  transform-origin: center;
}
.stage-wait[data-feature="img2video"] .anim-stage-wait {
  animation: wait-video 1.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes wait-undress {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
@keyframes wait-faceswap {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(-1); opacity: 0.7; }
}
@keyframes wait-txt2img {
  0%, 100% { transform: scale(0.94); opacity: 0.65; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes wait-video {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

.ico-svg {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
  overflow: visible;
}
.anim-toast-draw .draw-circle {
  stroke-dasharray: 53;
  stroke-dashoffset: 53;
  animation: draw-line 0.32s ease-out forwards;
}
.anim-toast-draw .draw-tick {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: draw-line 0.24s ease-out 0.16s forwards;
}
.anim-toast-draw .draw-tri {
  stroke-dasharray: 52;
  stroke-dashoffset: 52;
  animation: draw-line 0.3s ease-out forwards;
}
.anim-toast-draw .draw-bang {
  stroke-dasharray: 8;
  stroke-dashoffset: 8;
  animation: draw-line 0.2s ease-out 0.18s forwards;
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }

.toast-paid .anim-paid-in {
  animation: paid-pop 0.4s ease-out;
  transform-origin: center;
}
@keyframes paid-pop {
  0% { transform: scale(0.7) translateY(4px); opacity: 0; }
  60% { transform: scale(1.12) translateY(-1px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.gallery-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.anim-gallery-load {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 16px;
  height: 16px;
  flex: none;
}
.anim-gallery-load i {
  display: block;
  border-radius: 2px;
  background: currentColor;
  animation: gallery-cell 1.2s ease-in-out infinite;
}
.anim-gallery-load i:nth-child(2) { animation-delay: 0.15s; }
.anim-gallery-load i:nth-child(3) { animation-delay: 0.3s; }
.anim-gallery-load i:nth-child(4) { animation-delay: 0.45s; }
@keyframes gallery-cell {
  0%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .anim-empty-breathe,
  .anim-drop-pulse .ico-image-add,
  .mode.anim-tab-busy .ico,
  .anim-go-spin::after,
  .stage-wait-ring,
  .stage-wait .anim-stage-wait,
  .anim-toast-draw .draw-circle,
  .anim-toast-draw .draw-tick,
  .anim-toast-draw .draw-tri,
  .anim-toast-draw .draw-bang,
  .toast-paid .anim-paid-in,
  .anim-gallery-load i,
  .spinner {
    animation: none !important;
  }
  .anim-toast-draw [class^="draw-"] { stroke-dashoffset: 0; }
  .anim-empty-breathe { opacity: 0.55; }
}

/* ---------- notices ---------- */

.notice {
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  background: var(--surface-2);
}
.notice.warn { color: var(--warn); }
.notice.error { color: var(--danger); }
.notice.ok { color: var(--ok); }
.notice .row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.toasts {
  position: fixed;
  top: 68px;
  right: 16px;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}
.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: auto;
  padding-right: 40px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.toast > .ico { margin-top: 2px; }
.toast > div { flex: 1; min-width: 0; }
.toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 4px;
}
.toast-close:hover { color: var(--text); }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.overlay[hidden] { display: none; }
.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.72);
}
.overlay-sheet {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 16px 18px 20px;
}
.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
  padding-bottom: 8px;
}
.overlay-head h2 { margin: 0; font-size: 16px; }
.overlay-close { flex: none; }

.lightbox-sheet { width: min(720px, 100%); }
.lightbox-media {
  display: grid;
  place-items: center;
  background: var(--field);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 12px;
}
.lightbox-media img,
.lightbox-media video {
  max-width: 100%;
  max-height: min(72vh, 760px);
  display: block;
}

/* ---------- footer ---------- */

.foot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 24px 32px;
  font-size: 12px;
  color: var(--faint);
  text-align: center;
}
.foot a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--faint);
  text-decoration: none;
}
.foot a:hover {
  color: var(--muted);
  text-decoration: underline;
}
.foot .ico {
  width: 13px;
  height: 13px;
  vertical-align: 0;
}

/* ---------- mobile ---------- */

@media (max-width: 959px) {
  .studio {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 12px 12px 24px;
  }
  .foot { padding: 4px 14px 28px; }
  .topbar { padding: 12px 14px; gap: 10px; }
  .brand-logo { max-height: 24px; max-width: min(168px, 46vw); }
  .brand-name { font-size: 14px; }
  .account { overflow-x: auto; scrollbar-width: none; }
  .account::-webkit-scrollbar { display: none; }
  .stage { min-height: 200px; padding: 12px; }
  .stage-empty { min-height: 160px; }
  .wallet-pop { right: 12px; left: 12px; width: auto; top: 54px; }

  /* Horizontal scroll beats four cramped 2-line labels on a 360px screen. */
  .modes {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .modes::-webkit-scrollbar { display: none; }
  .mode { flex: 0 0 auto; padding: 10px 16px; font-size: 14px; white-space: nowrap; }

  /* Comfortable touch targets: 44px is the smallest reliably tappable size. */
  textarea, input[type="text"], input[type="number"] { font-size: 16px; padding: 12px; }
  .segmented button { padding: 11px 8px; font-size: 14px; }
  .drop { min-height: 76px; }
  .chip { padding: 9px 14px; }

  .submit {
    justify-items: stretch;
    margin-top: 4px;
  }
  .go { padding: 14px 16px; font-size: 15px; }
  .result-media img, .result-media video { max-height: 56vh; }
  .history-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .toasts { top: auto; bottom: 16px; right: 12px; left: 12px; width: auto; }
  .overlay { padding: 0; align-items: stretch; }
  .overlay-sheet {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
  }
  .lightbox-media img,
  .lightbox-media video { max-height: 70vh; }
}

@media (max-width: 400px) {
  .mode { padding: 10px 12px; }
}

/* Recharge gets its own sheet. Keeping it outside the compact toast prevents
   package cards from becoming a narrow flex sibling on mobile. */
.recharge-sheet { width: min(920px, 100%); }
.recharge-head { align-items: flex-start; }
.recharge-head h2 { line-height: 1.3; }
.recharge-promo {
  margin: 3px 0 0;
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
}
.recharge-body { min-width: 0; }
.recharge-sheet .packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.recharge-sheet .pkg {
  min-width: 0;
  min-height: 132px;
}
.recharge-note {
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 959px) {
  .overlay:has(.recharge-sheet),
  .overlay:has(.checkin-sheet) {
    align-items: end;
    padding: 12px;
  }
  .overlay-sheet.recharge-sheet,
  .overlay-sheet.checkin-sheet {
    align-self: end;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 24px);
    border-radius: var(--r-lg);
    padding: 16px 14px calc(18px + env(safe-area-inset-bottom));
  }
  .recharge-sheet .packages { grid-template-columns: minmax(0, 1fr); }
  .recharge-sheet .pkg { min-height: 0; }
}

.checkin-sheet { width: min(440px, 100%); }
.checkin-head h2 { line-height: 1.3; }
.checkin-sub {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.checkin-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.checkin-day {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  border-radius: var(--r);
  background: var(--field);
  color: var(--muted);
  border: 1px solid transparent;
  min-width: 0;
}
.checkin-day.is-today {
  border-color: var(--feature);
  color: var(--text);
  background: var(--surface-2);
}
.checkin-day.is-done { color: var(--ok); }
.checkin-day.is-max { border-color: var(--warn); }
.checkin-day .label { font-size: 11px; }
.checkin-day .amt {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--warn);
}
.checkin-day.is-done .amt { color: var(--ok); }
.checkin-badge {
  position: absolute;
  top: -7px;
  right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
}
.checkin-summary {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text);
}
.checkin-summary strong { color: var(--warn); }
.checkin-go {
  width: 100%;
  margin-top: 12px;
}
.checkin-note {
  margin: 10px 0 0;
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}

/* ------------------------------------------------------------- gallery */

.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.link-btn {
  border: 0;
  background: none;
  color: var(--feature);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
}
.link-btn:hover { text-decoration: underline; }

.gallery-loading,
.gallery-empty {
  color: var(--faint);
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.gallery-item {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
}
.gallery-view {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: var(--field);
  cursor: pointer;
  overflow: hidden;
}
.gallery-view img,
.gallery-view video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-gone {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--faint);
  font-size: 12px;
}
.gallery-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
}
.gallery-actions {
  display: flex;
  gap: 6px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  background: var(--field);
  color: var(--text);
  text-decoration: none;
}
.icon-btn:hover { background: var(--feature); color: #0b0d12; }
.icon-btn.danger:hover { background: #f2555a; color: #fff; }

/* Touch targets stay comfortable, and two per row keeps them legible. */
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .icon-btn { padding: 8px 10px; font-size: 13px; }
  /* Drop chip words, keep the mark and the balance. Stops the header
     turning 「我的作品」 into a vertical oval. */
  .account .chip:not(.primary) .chip-label { display: none; }
  .account .chip:not(.primary) { padding: 8px 10px; gap: 0; }
  .account .chip strong { margin-left: 6px; }
}

/* ---------- admin console ---------- */

.admin-forbid {
  max-width: 480px;
  margin: 72px auto;
  padding: 0 24px;
  color: var(--muted);
}

/* ---------- usage policy ---------- */

.policy-shell {
  max-width: 40rem;
  margin: 0 auto;
  padding: 36px 24px 80px;
}

.policy-doc {
  color: #d7dce8;
  font-size: 15px;
  line-height: 1.75;
}

.policy-doc h1 {
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--text);
}

.policy-doc h2 {
  margin: 2.1em 0 0.7em;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--text);
}

.policy-doc h3 {
  margin: 1.6em 0 0.5em;
  font-size: 14px;
  color: var(--text);
}

.policy-doc p {
  margin: 0 0 0.95em;
}

.policy-doc p:last-child,
.policy-doc ul:last-child,
.policy-doc ol:last-child {
  margin-bottom: 0;
}

.policy-doc ul,
.policy-doc ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

.policy-doc li {
  margin: 0.35em 0;
  padding-left: 0.15em;
}

.policy-doc li::marker {
  color: var(--faint);
}

.policy-doc strong {
  color: var(--text);
  font-weight: 620;
}

.policy-doc em {
  color: var(--muted);
  font-style: normal;
}

.policy-doc code {
  font: 12.5px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--muted);
}

.policy-doc hr {
  border: 0;
  height: 1px;
  margin: 1.8em 0;
  background: var(--line);
}

@media (max-width: 720px) {
  .policy-shell { padding: 24px 16px 64px; }
  .policy-doc h1 { font-size: 22px; }
}

.admin-body {
  --admin-bg: #0a0d11;
  --admin-panel: #0f141a;
  --admin-panel-2: #121820;
  --admin-line: #222a33;
  --admin-accent: #5eead4;
  --admin-accent-ink: #071513;
  --feature: var(--admin-accent);
  background: var(--admin-bg);
  font-family: "Avenir Next", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

.admin-body [hidden] { display: none !important; }

.admin-topbar {
  min-height: 58px;
  padding: 8px 20px;
  border-color: var(--admin-line);
  background: #0c1015;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.admin-brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #12201f;
  color: var(--admin-accent);
}

.admin-brand-mark .ico { width: 17px; height: 17px; }

.admin-brand-copy {
  display: grid;
  gap: 1px;
  line-height: 1.18;
}

.admin-brand-overline,
.admin-eyebrow,
.admin-section-head span,
.admin-nav-head span {
  color: #718090;
  font: 600 9px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.14em;
}

.admin-brand .brand-name { font-size: 15px; }

.admin-brand .brand-ver {
  align-self: flex-end;
  margin-bottom: 1px;
  padding-left: 2px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.admin-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
  color: #8e9aa8;
  font-size: 12px;
}

.admin-live > span,
.admin-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgb(74 222 128 / 9%);
}

.admin-shell {
  display: flex;
  min-height: calc(100vh - 58px);
}

.admin-nav {
  position: sticky;
  top: 58px;
  width: 190px;
  height: calc(100vh - 58px);
  flex-shrink: 0;
  padding: 21px 12px 16px;
  border-right: 1px solid var(--admin-line);
  background: #0d1117;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-nav-head {
  display: grid;
  gap: 3px;
  margin: 0 8px 14px;
}

.admin-nav-head strong { font-size: 14px; letter-spacing: -0.02em; }

.admin-nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 0;
  border-radius: 0;
  padding: 5px 8px;
  text-align: left;
  background: transparent;
  color: #7f8a99;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.admin-nav-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-nav-copy { display: grid; }
.admin-nav-copy strong { color: inherit; font-size: 13px; font-weight: 600; }
.admin-nav-copy small,
.admin-nav-index { display: none; }

.admin-nav-index {
  color: #46515f;
  font: 500 9px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.admin-nav-item:hover {
  background: transparent;
  color: #d8e0e9;
}

.admin-nav-item.active {
  background: transparent;
  color: #f1f7f6;
}

.admin-nav-item.active::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--admin-accent);
  content: "";
}

.admin-nav-item.active .admin-nav-icon {
  color: var(--admin-accent);
}

.admin-nav-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: auto 8px 0;
  color: #596575;
  font-size: 10px;
}

.admin-nav-foot .ico { width: 13px; height: 13px; color: #72988f; }

.admin-main {
  width: 100%;
  max-width: 1540px;
  min-width: 0;
  margin: 0 auto;
  padding: 22px 30px 52px;
}

.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-panel.active > * { animation: admin-rise 320ms both; }
.admin-panel.active > *:nth-child(2) { animation-delay: 35ms; }
.admin-panel.active > *:nth-child(3) { animation-delay: 70ms; }
.admin-panel.active > *:nth-child(4) { animation-delay: 105ms; }
.admin-panel.is-loading { cursor: progress; }
.admin-panel.is-loading .admin-refresh .ico { animation: admin-spin 800ms linear infinite; }
.admin-panel.is-loading .admin-table-wrap,
.admin-panel.is-loading .admin-sales-grid,
.admin-panel.is-loading .stat-grid,
.admin-panel.is-loading .admin-feature-grid { opacity: 0.52; }

@keyframes admin-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.admin-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
  margin-bottom: 18px;
}

.admin-page-head h1 {
  margin: 2px 0 3px;
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 650;
  letter-spacing: -0.035em;
}

.admin-sub { color: #7e8998; font-size: 12px; margin: 0; }

.admin-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-updated {
  color: #5d6877;
  font: 500 10px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  white-space: nowrap;
}

.admin-refresh { border: 1px solid var(--admin-line); background: #11171e; }
.admin-refresh:disabled { cursor: wait; opacity: 0.65; }

.admin-section {
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--admin-line);
}

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

.admin-section-head > div { display: grid; gap: 3px; }
.admin-section-head > div > span,
.admin-eyebrow { display: none; }
.admin-section-head h2 { margin: 0; font-size: 13px; font-weight: 620; }
.admin-section-head p { margin: 0; color: #626e7d; font-size: 10px; }

.admin-sales-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid #1d252e;
}

.admin-metric {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-sales-card {
  display: grid;
  gap: 5px;
  min-height: 88px;
  padding: 11px 13px;
  border-right: 1px solid #1d252e;
  transition: background 150ms ease;
}

.admin-sales-card:last-child { border-right: 0; }
.admin-sales-card:hover { background: #0e1419; }
.admin-sales-card.featured { background: #0f1c1a; box-shadow: inset 0 2px var(--admin-accent); }

.admin-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8f9aa8;
  font-size: 11px;
}

.admin-sales-card > strong {
  align-self: end;
  overflow: hidden;
  font: 650 clamp(17px, 1.55vw, 23px)/1.05 "SF Pro Display", "PingFang SC", sans-serif;
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-sales-card > strong small {
  margin-right: 3px;
  color: #718090;
  font-size: 11px;
  font-weight: 500;
}

.admin-metric-meta { color: #657181; font-size: 10px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid #1d252e;
}

.admin-kpi {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  min-height: 74px;
  padding: 10px 12px;
  border-right: 1px solid #1d252e;
}

.admin-kpi:last-child { border-right: 0; }

.admin-kpi-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: #91a0b0;
}

.admin-kpi.ok .admin-kpi-icon { background: transparent; color: var(--ok); }
.admin-kpi.warn .admin-kpi-icon { background: transparent; color: var(--warn); }
.admin-kpi.danger .admin-kpi-icon { background: transparent; color: var(--danger); }
.admin-kpi > div:last-child { display: grid; align-content: start; }
.admin-kpi span { color: #768292; font-size: 10px; }
.admin-kpi strong { margin-top: 2px; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.admin-kpi small { margin-top: 4px; color: #566271; font-size: 9px; }

.admin-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid #1d252e;
}

.admin-feature {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #1d252e;
  border-radius: 0;
  background: transparent;
}

.admin-feature:nth-child(odd) { border-right: 1px solid #1d252e; }
.admin-feature:nth-last-child(-n + 2) { border-bottom: 0; }

.admin-feature-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: none;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: #98a5b5;
}

.admin-feature[data-feature="undress"] .admin-feature-icon { color: var(--c-dress); }
.admin-feature[data-feature="faceswap"] .admin-feature-icon { color: var(--c-face); }
.admin-feature[data-feature="txt2img"] .admin-feature-icon { color: var(--c-image); }
.admin-feature[data-feature="img2video"] .admin-feature-icon { color: var(--c-video); }
.admin-feature > div:last-child { display: grid; gap: 3px; }
.admin-feature strong { font-size: 12px; }
.admin-feature span { color: #687585; font-size: 10px; }
.admin-feature b { color: #dce4ed; font-size: 12px; font-weight: 600; }

.admin-toolbar,
.admin-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.admin-toolbar {
  margin: 0 0 14px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--admin-line);
  border-radius: 0;
  background: transparent;
}

.admin-toolbar > .chip,
.admin-action-card > .chip { min-height: 38px; }

.admin-field {
  display: grid;
  gap: 5px;
  min-width: 132px;
}

.admin-field > span {
  color: #6f7c8b;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.admin-field-grow { flex: 1 1 240px; }

.admin-field input,
.admin-field select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #252e3a;
  border-radius: 6px;
  outline: 0;
  background: #0a0e13;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  transition: border-color 150ms ease, background 150ms ease;
}

.admin-field input::placeholder { color: #46515e; }
.admin-field input:focus,
.admin-field select:focus { border-color: #477b73; background: #0c1217; }

.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin: 4px 0 16px;
}
.admin-settings-item {
  display: grid;
  gap: 6px;
}
.admin-settings-item > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #8b93a0;
  font-size: 11px;
}
.admin-settings-item em {
  color: #5b6673;
  font-style: normal;
  font-size: 10px;
}
.admin-settings-item input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #252e3a;
  border-radius: 6px;
  outline: 0;
  background: #0a0e13;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
}
.admin-settings-item input:focus {
  border-color: #477b73;
  background: #0c1217;
}
.admin-settings-actions { padding-top: 4px; }

.admin-split {
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  gap: 20px;
}

.admin-list { display: grid; gap: 0; align-content: start; border-top: 1px solid #1d252e; }

.admin-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid #1d252e;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
  transition: border-color 150ms ease, background 150ms ease;
}

.admin-row:hover { background: var(--admin-panel-2); }
.admin-row.active { box-shadow: inset 2px 0 var(--admin-accent); background: #101b1a; }

.admin-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #18212a;
  color: #aab8c7;
  font-size: 12px;
  font-weight: 650;
}

.admin-avatar.large { width: 48px; height: 48px; border-radius: 12px; color: var(--admin-accent); font-size: 17px; }
.admin-row-copy { display: grid; min-width: 0; }
.admin-row-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.admin-row-copy small { overflow: hidden; color: #697686; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-row-arrow { color: #4d5967; font-size: 18px; }

.admin-card {
  border: 0;
  border-block: 1px solid var(--admin-line);
  border-radius: 0;
  background: transparent;
  padding: 14px 0;
  margin-bottom: 16px;
}

.admin-profile-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--admin-line);
}

.admin-profile-copy h2 { margin: 3px 0 2px; font-size: 17px; }
.admin-profile-copy p { margin: 0; color: #6e7a89; font-size: 10px; }
.admin-balance { display: grid; justify-items: end; gap: 3px; }
.admin-balance > span { color: #6e7a89; font-size: 9px; }
.admin-balance > strong { font-size: 23px; font-variant-numeric: tabular-nums; }

.admin-restriction {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-left: 2px solid var(--danger);
  background: #25151a;
  color: #e899a7;
  font-size: 11px;
}

.admin-action-grid { display: grid; gap: 9px; margin-top: 14px; }

.admin-action-card {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid #1d252e;
  border-radius: 0;
  background: transparent;
}

.admin-action-copy { display: grid; align-self: center; min-width: 150px; margin-right: auto; }
.admin-action-copy strong { font-size: 11px; }
.admin-action-copy span { color: #647181; font-size: 9px; }
.admin-action-locked { justify-content: space-between; }

.admin-empty { color: #5f6b7a; font-size: 11px; padding: 18px 4px; }

.admin-empty-state {
  display: grid;
  min-height: 260px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border-block: 1px solid #1d252e;
  border-radius: 0;
  text-align: center;
}

.admin-empty-state > .ico { width: 25px; height: 25px; margin-bottom: 3px; color: #536070; }
.admin-empty-state strong { color: #8f9baa; font-size: 12px; }
.admin-empty-state span:last-child { max-width: 280px; color: #566271; }

.admin-notice {
  position: sticky;
  top: 80px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 9px 48px 9px 12px;
  border: 1px solid #542630;
  border-radius: 9px;
  background: #2c181e;
  color: #f19aaa;
  box-shadow: 0 8px 28px rgb(0 0 0 / 26%);
}

.admin-notice[data-kind="ok"] { border-color: #234c32; background: #14251a; color: #7ee2a0; }

.admin-table-wrap {
  overflow: auto;
  max-width: 100%;
  border: 0;
  border-block: 1px solid #202833;
  border-radius: 0;
  background: transparent;
}

.admin-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.admin-table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
}

.admin-table th,
.admin-table td {
  padding: 9px 11px;
  border-bottom: 1px solid #1e2630;
  text-align: left;
  white-space: nowrap;
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #121820;
  color: #6f7b89;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tr.clickable { cursor: pointer; }
.admin-table tr.clickable:hover td { background: #141b23; }

.admin-number {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.admin-code,
.admin-date {
  color: #8793a2;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 2px 7px;
  background: #171e27;
  color: #8995a4;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
}

.pill.ok { background: #13251a; color: #6fdc92; }
.pill.warn { background: #28220f; color: #e8c75e; }
.pill.danger { background: #2b171d; color: #eb8da0; }
.pill.info { background: #122622; color: #75d8ca; }

.admin-detail { margin-top: 14px; }
.admin-detail-card { box-shadow: none; }

.admin-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--admin-line);
}

.admin-detail-head h2 { margin: 4px 0 0; font-size: 15px; overflow-wrap: anywhere; }

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: 14px;
  overflow: hidden;
  border-block: 1px solid #202833;
  border-radius: 0;
  background: transparent;
}

.admin-detail-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-detail-grid > div { display: grid; gap: 5px; padding: 10px; border-right: 1px solid #202833; background: transparent; }
.admin-detail-grid > div:last-child { border-right: 0; }
.admin-detail-grid > div > span { color: #687585; font-size: 9px; }
.admin-detail-grid > div > strong { font-size: 11px; }

.admin-detail-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 12px 0 0;
  color: #647181;
  font-size: 10px;
}

.admin-detail-actions { margin-top: 12px; }

.admin-preview {
  display: block;
  width: min(100%, 420px);
  max-height: 420px;
  margin: 14px 0;
  border: 1px solid #252e3a;
  border-radius: 6px;
  background: #080b0f;
  object-fit: contain;
}

@media (max-width: 1250px) {
  .admin-sales-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-sales-card { border-bottom: 1px solid #1d252e; }
  .admin-sales-card:nth-child(3n) { border-right: 0; }
  .admin-sales-card:nth-last-child(-n + 3) { border-bottom: 0; }
  .admin-sales-card.featured { grid-column: auto; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-kpi { border-bottom: 1px solid #1d252e; }
  .admin-kpi:nth-child(3n) { border-right: 0; }
  .admin-kpi:nth-last-child(-n + 2) { border-bottom: 0; }
  .admin-kpi:last-child { grid-column: auto; }
  .admin-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-detail-grid > div:nth-child(3n) { border-right: 0; }
}

@media (max-width: 959px) {
  .admin-topbar { min-height: 62px; }
  .admin-shell { flex-direction: column; }
  .admin-nav {
    position: sticky;
    top: 62px;
    z-index: 25;
    width: auto;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--admin-line);
  }
  .admin-nav-head,
  .admin-nav-foot,
  .admin-nav-copy small,
  .admin-nav-index { display: none; }
  .admin-nav-item { grid-template-columns: 26px auto; min-width: max-content; min-height: 40px; padding: 4px 10px; }
  .admin-nav-item.active::before { top: auto; right: 10px; bottom: 0; left: 10px; width: auto; height: 2px; }
  .admin-nav-icon { width: 26px; height: 26px; border: 0; background: transparent; }
  .admin-main { padding: 24px 22px 56px; }
  .admin-notice { top: 116px; }
  .admin-split { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .admin-topbar { padding: 9px 13px; }
  .admin-brand-mark { width: 34px; height: 34px; }
  .admin-brand-overline,
  .admin-live,
  .admin-topbar .who { display: none; }
  .admin-brand .brand-ver { align-self: center; }
  .admin-main { padding: 20px 14px 48px; }
  .admin-page-head { align-items: flex-start; margin-bottom: 21px; }
  .admin-page-actions { display: grid; justify-items: end; }
  .admin-updated { font-size: 9px; }
  .admin-sales-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-sales-card { border-right: 1px solid #1d252e; border-bottom: 1px solid #1d252e; }
  .admin-sales-card:nth-child(2n) { border-right: 0; }
  .admin-sales-card:nth-last-child(-n + 2) { border-bottom: 0; }
  .admin-sales-card.featured { grid-column: auto; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-kpi { border-right: 1px solid #1d252e; border-bottom: 1px solid #1d252e; }
  .admin-kpi:nth-child(2n) { border-right: 0; }
  .admin-kpi:nth-last-child(-n + 2) { border-bottom: 0; }
  .admin-kpi:last-child { grid-column: span 2; border-right: 0; }
  .admin-feature-grid { grid-template-columns: 1fr; }
  .admin-feature:nth-child(odd) { border-right: 0; }
  .admin-feature:nth-last-child(-n + 2) { border-bottom: 1px solid #1d252e; }
  .admin-feature:last-child { border-bottom: 0; }
  .admin-toolbar { align-items: stretch; }
  .admin-toolbar .admin-field { flex: 1 1 calc(50% - 8px); }
  .admin-toolbar .admin-field-grow { flex-basis: 100%; }
  .admin-settings-grid { grid-template-columns: 1fr; }
  .admin-toolbar > .chip { justify-content: center; flex: 1 1 100px; }
  .admin-profile-head { grid-template-columns: auto 1fr; }
  .admin-balance { grid-column: 1 / -1; grid-template-columns: 1fr auto auto; align-items: center; justify-items: start; width: 100%; padding-top: 10px; border-top: 1px solid var(--admin-line); }
  .admin-detail-grid,
  .admin-detail-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-detail-grid > div { border-right: 1px solid #202833; border-bottom: 1px solid #202833; }
  .admin-detail-grid > div:nth-child(2n) { border-right: 0; }
  .admin-detail-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
  .admin-action-card { align-items: stretch; }
  .admin-action-card > * { flex: 1 1 100%; }
  .admin-action-card > .chip { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-panel.active > *,
  .admin-panel.is-loading .admin-refresh .ico { animation: none; }
  .admin-nav-item,
  .admin-sales-card { transition: none; }
}