@font-face { font-family: "DM Sans"; src: url("/vendor/dm-sans/dm-sans.ttf") format("truetype"); font-style: normal; font-weight: 100 1000; font-display: swap; }
/* Map both Apple's standard names and the installed Windows PingFang names. */
@font-face { font-family: "Kutu PingFang"; src: local("PingFangSC-Ultralight"), local(".PingFang-SC-UltraLight"); font-style: normal; font-weight: 100; font-display: swap; }
@font-face { font-family: "Kutu PingFang"; src: local("PingFangSC-Thin"), local(".PingFang-SC-Thin"); font-style: normal; font-weight: 200; font-display: swap; }
@font-face { font-family: "Kutu PingFang"; src: local("PingFangSC-Light"), local(".PingFang-SC-Light"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "Kutu PingFang"; src: local("PingFangSC-Regular"), local(".PingFang-SC-Regular"), local("PingFang SC"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Kutu PingFang"; src: local("PingFangSC-Medium"), local(".PingFang-SC-Medium"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Kutu PingFang"; src: local("PingFangSC-Semibold"), local(".PingFang-SC-Semibold"); font-style: normal; font-weight: 600 1000; font-display: swap; }
/* Awesomic-inspired editorial theme. Shared by the studio and admin console.
   Loaded after legacy component styles; geometry and business state stay intact. */
:root {
  --bg: #f4f4f5;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --card-soft: #fafafa;
  --field: #f4f4f5;
  --text: #09090b;
  --text-soft: #18181b;
  --muted: #71717a;
  --muted-strong: #52525b;
  --border: #ececee;
  --border-strong: #d4d4d8;
  --accent: #a16207;
  --accent-strong: #854d0e;
  --accent-soft: #fef3c7;
  --accent-rgb: 161, 98, 7;
  --action: #a16207;
  --action-hover: #854d0e;
  --action-pressed: #713f12;
  --on-action: #ffffff;
  --highlight: #a16207;
  --highlight-soft: #fef3c7;
  --highlight-text: #854d0e;
  --on-highlight: #ffffff;
  --badge-accent: #d4a94f;
  --signal-blue: #a16207;
  --brand-50: #fffbeb;
  --brand-100: #fef3c7;
  --brand-200: #fde68a;
  --brand-400: #d4a94f;
  --brand-500: #a16207;
  --brand-600: #854d0e;
  --brand-700: #713f12;
  --ink-950: #09090b;
  --ink-900: #18181b;
  --ink-700: #3f3f46;
  --ink-500: #71717a;
  --ink-300: #d4d4d8;
  --ink-200: #ececee;
  --ink-100: #f4f4f5;
  --ink-50: #fafafa;
  --radius-xs: 12px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 36px;
  --radius-xl: 36px;
  --radius-compact: 12px;
  --radius-control: 14px;
  --radius-action: 14px;
  --radius-group: 36px;
  --radius-surface: 36px;
  --radius-modal: 36px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-accent: none;
  --studio-dot: transparent;
  /* Keep the infinite canvas distinct from cards without exposing a heavy
     gray slab in light mode. The surface matches the editor shell (#eef0f2).
     Dots stay subordinate so the artwork remains the visual focus. */
  --canvas-bg: #f9f9f9;
  --canvas-dot: rgba(82, 82, 91, .14);
  --font-sans: "DM Sans", "Kutu PingFang", "PingFang SC", ".PingFang SC", sans-serif;
}
:root[data-theme="dark"] {
  --canvas-bg: #202023;
  --canvas-dot: rgba(255, 255, 255, .105);
  --highlight: #d4a94f;
  --highlight-soft: #2a2216;
  /* Keep highlighted copy aligned with the primary action color in dark mode. */
  --highlight-text: #d4a94f;
  --on-highlight: #111111;
  --bg: #09090b;
  --bg-elevated: #18181b;
  --card: #18181b;
  --card-soft: #202023;
  --field: #27272a;
  --text: #fafafa;
  --text-soft: #ececee;
  --muted: #a1a1aa;
  --muted-strong: #d4d4d8;
  --border: #303034;
  --border-strong: #52525b;
  --accent: #d4a94f;
  --accent-strong: #e0b75d;
  --accent-soft: #2a2216;
  --accent-rgb: 212, 169, 79;
  --action: #d4a94f;
  --action-hover: #e0b75d;
  --action-pressed: #c28b27;
  --on-action: #111111;
  --badge-accent: #d4a94f;
  --signal-blue: #d4a94f;
  --brand-50: #2a2216;
  --brand-100: #382b16;
  --brand-200: #4f3a18;
  --brand-400: #e0b75d;
  --brand-500: #d4a94f;
  --brand-600: #c28b27;
  --brand-700: #f3d690;
  --ink-950: #fafafa;
  --ink-900: #ececee;
  --ink-700: #d4d4d8;
  --ink-500: #a1a1aa;
  --ink-300: #52525b;
  --ink-200: #303034;
  --ink-100: #27272a;
  --ink-50: #202023;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-accent: none;
}
body { background: var(--bg); letter-spacing: normal; }
body.studio-upload-active { background: var(--bg); }
body .ambient { display: none !important; }
body > .appbar {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--card);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body > .appbar::before { display: none; }
body > .appbar .primary-nav { background: transparent; box-shadow: none; }
body > .appbar .primary-nav-item.active { color: var(--highlight-text); background: transparent; font-weight: 600; }
body > .appbar .primary-nav-item:hover { background: transparent; }
.hero h1 { font-size: clamp(36px, 4.4vw, 64px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.hero h1 span { color: var(--text); background: none; -webkit-text-fill-color: currentColor; }
.hero p { color: var(--muted-strong); font-size: 15px; line-height: 1.65; }
.card-title, .utility-page-title h1, .account-page-title h1 { font-weight: 600; letter-spacing: normal; }
.card, .panel, .metric-card, .login-card, .recharge-plan, .faq details {
  border-color: var(--border); border-radius: 36px; background: var(--card); box-shadow: var(--shadow-sm);
}
.card:hover, .panel:hover, .metric-card:hover { border-color: var(--border); box-shadow: none; }
body.studio-upload-active #dropzone.upload {
  border: 1px dashed var(--border-strong); border-radius: 36px;
  background: var(--card); box-shadow: none; animation: none;
}
body.studio-upload-active #dropzone.upload:hover,
body.studio-upload-active #dropzone.upload.dragging {
  border-color: var(--text); background: var(--card-soft); box-shadow: none; transform: none;
}
.drop-title { color: var(--text); font-size: 18px; font-weight: 600; }
.drop-hint { color: var(--muted-strong); font-size: 14px; }
.drop-icon { color: var(--muted-strong); }
.primary, .primary-button, .points-recharge-button,
.appbar #accountBtn.account-action.is-guest,
#studioView[data-stage="create"] .generation-action #generateBtn {
  color: var(--on-action); background: var(--action); border: 1px solid var(--action);
  border-radius: 14px; box-shadow: none; font-weight: 500; text-shadow: none;
}
.primary:hover:not(:disabled), .primary-button:hover:not(:disabled),
.points-recharge-button:hover:not(:disabled),
.appbar #accountBtn.account-action.is-guest:hover,
#studioView[data-stage="create"] .generation-action #generateBtn:hover:not(:disabled) {
  color: var(--on-action); background: var(--action-hover); border-color: var(--action-hover);
  box-shadow: none; transform: none;
}
.primary:disabled, .primary-button:disabled,
#studioView[data-stage="create"] .generation-action #generateBtn:disabled {
  background: var(--field); border-color: var(--border); color: var(--muted);
  opacity: 1; box-shadow: none; cursor: not-allowed;
}
.appbar #accountBtn.account-action.is-guest {
  width: auto; min-width: 76px; min-height: 44px; padding: 0 20px;
  aspect-ratio: auto; clip-path: none; border-radius: 999px !important;
}
#accountBtn.account-action.is-guest > #accountLabel { display: inline !important; color: inherit; font-size: 14px; }
#accountBtn.account-action.is-guest > #accountGuestIcon,
#accountBtn.account-action.is-guest > #accountBtnAvatar { display: none !important; }
.ghost, .secondary-button, .filter-trigger, .config-action, .open-all-editable {
  color: var(--text-soft); background: var(--card-soft); border: 1px solid var(--border); border-radius: 14px; box-shadow: none;
}
.ghost:hover:not(:disabled), .secondary-button:hover:not(:disabled), .open-all-editable:hover {
  color: var(--text); background: var(--field); border-color: var(--border-strong); box-shadow: none; transform: none;
}
.account-form input, .field input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.field select, .field textarea, .more-desc, .remix-prompt, .login-card input {
  color: var(--text); background-color: var(--card); border: 1px solid var(--border-strong); border-radius: 14px;
}
.account-modal, .text-editor-modal, .config-drawer, .newcomer-modal, .modal, .drawer {
  border: 1px solid var(--border); border-radius: 36px; background: var(--card); box-shadow: var(--shadow-md);
}
:root[data-theme="dark"] .account-modal { box-shadow: var(--shadow-md); border-color: var(--border); }
.account-modal::before { display: none; }
.account-tabs { border-radius: 16px; }
.account-tabs button { border-radius: 12px; font-weight: 500; }
.account-tabs button.active { box-shadow: none; }
.credit-overview { background: #18181b; border-radius: 36px; box-shadow: none; }
.credit-overview::after { display: none; }
.recharge-tier, .recharge-records-page-card { border-radius: 36px; border-color: var(--border); box-shadow: none; }
.recharge-tier-heading {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; min-height: 34px;
}
.recharge-tier-heading:has(> .recharge-tier-badge) { padding-right: 112px; }
.recharge-tier .recharge-tier-heading > .recharge-tier-name {
  min-height: 0; padding: 0; line-height: 1.5; overflow-wrap: anywhere;
}
.recharge-tier-heading > .recharge-tier-badge {
  position: absolute; top: 0; right: 36px; display: inline-flex; align-items: center;
  justify-content: center; min-height: 28px; margin: 0; padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 0 0 12px 12px; color: #09090b; background: var(--badge-accent);
  font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.recharge-tier-points-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recharge-tier-points-row > span { white-space: nowrap; }
.recharge-tier-bonus { flex-shrink: 0; padding: 4px 9px; border-radius: 999px; color: var(--highlight-text); background: var(--highlight-soft); font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.recharge-tier-price .recharge-tier-limit { margin-left: auto; align-self: center; }
.recharge-tier > button:not(.points-recharge-button) { border-radius: 14px; }
.recharge-tier.featured > button:not(.points-recharge-button),
.recharge-tier > button:not(.points-recharge-button):hover,
.generation-steps li.active > span { color: var(--on-action); background: var(--action); border-color: var(--action); }
.recharge-tier > button[data-purchase-locked="true"] { color: var(--muted); background: var(--field); }
.account-menu, .points-popover, .notification-popover, .filter-popover, .primary-nav-menu {
  background: var(--card); border-color: var(--border); border-radius: 20px; box-shadow: var(--shadow-md);
}
.type-tag, .status-pill { border-radius: 12px; }
.newcomer-badge { color: var(--on-highlight); background: var(--badge-accent); }
#studioView[data-stage="create"] #inputPanel,
#studioView[data-stage="create"] #remixCard,
:root[data-theme="dark"] #studioView[data-stage="create"] #inputPanel,
:root[data-theme="dark"] #studioView[data-stage="create"] #remixCard {
  background: var(--card) !important; border: 1px solid var(--border) !important;
  border-radius: 36px; box-shadow: none !important;
}
#studioView[data-stage="create"] .same-style-action-bar,
:root[data-theme="dark"] #studioView[data-stage="create"] .same-style-action-bar {
  background: var(--card) !important; border-color: var(--border) !important; border-radius: 20px; box-shadow: none !important;
}
#studioView[data-stage="create"] .preview,
:root[data-theme="dark"] #studioView[data-stage="create"] .preview {
  background-color: var(--card-soft);
  background-image: radial-gradient(color-mix(in srgb, var(--border-strong) 62%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  border-radius: 24px;
}
:root[data-theme="dark"] #studioView[data-stage="create"] .preview {
  background-image: radial-gradient(rgba(255,255,255,.105) 1px, transparent 1px);
}
#studioView[data-stage="create"] .canvas-zoom-controls { background: var(--card); border-color: var(--border); box-shadow: var(--shadow-md); }
#studioView[data-stage="create"] #remixCard .context-title { font-size: 20px; font-weight: 600; letter-spacing: normal; }
#studioView[data-stage="create"] .same-style-action-bar .overall-adjust { border-radius: 14px; }
.context-empty-visual { background: var(--card-soft); border-color: var(--border); }
.context-empty-image-icon, :root[data-theme="dark"] .context-empty-image-icon {
  background: var(--card); border-color: var(--border-strong); box-shadow: none; transform: none;
}
.context-empty-cursor-icon { color: var(--accent); filter: none; }
.context-empty-copy h3 { font-weight: 600; letter-spacing: normal; }
#previewWrap > #toggleEditableRegions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  color: var(--text-soft);
  background: var(--card);
  box-shadow: var(--shadow-md);
}
#previewWrap > #toggleEditableRegions[aria-pressed="true"] {
  border-color: var(--highlight);
  color: var(--highlight-text);
  background: var(--highlight-soft);
}
#previewWrap > #toggleEditableRegions span:last-child { display: inline; }
/* Artwork geometry stays square even when surrounding UI uses rounded cards. */
#studioView .generation-canvas-node,
#studioView .generation-canvas-pending,
#studioView .generation-canvas-image { border-radius: 0; }
.artwork-card, .inspiration-card { border-radius: 36px; box-shadow: none; }
.inspiration-search, body > .appbar .appbar-search .inspiration-search { background: var(--card); border-color: var(--border); box-shadow: none; }
.login-view { background: var(--bg); }
.login-card { padding: 28px; border-radius: 36px; }
.sidebar, .topbar { background: var(--card); border-color: var(--border); box-shadow: none; }
.nav-item.active { background: var(--highlight-soft); color: var(--highlight-text); }
.metric-card { padding: 24px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
#accountBtn.account-action:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none;
}
.reference-modified-status { display: none; }
#studioView[data-stage="create"] .reference-hotspot.is-applied:not(.is-deleted) {
  border: 2px solid var(--highlight);
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.85);
  outline: none;
}
#studioView[data-stage="create"] .reference-hotspot.is-applied:not(.is-deleted) > .reference-hotspot-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  top: 100%;
  padding: 7px 10px;
  border: 1px solid #3f3f42;
  border-radius: 7px;
  color: #f5f5f5;
  background: #18181b;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  font-size: 14px;
  font-weight: 600;
  transform: scale(var(--canvas-inverse-scale, 1)) translateY(5px);
}
#studioView[data-stage="create"] .reference-hotspot.is-applied:not(.is-deleted) .reference-modified-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid #626267;
  color: #e4bd63;
  font-style: normal;
  flex-shrink: 0;
}
.reference-modified-status .ri-icon { width: 15px; height: 15px; }
#studioView .element-inventory-status.is-replace { color: var(--highlight-text, var(--accent)); }
#studioView .element-inventory-status.is-replace .element-inventory-status-label { color: inherit; }
/* Gold is functional: reserve it for actions, focus and meaningful selection. */
body.studio-upload-active #dropzone.upload.dragging {
  border-color: var(--highlight); background: var(--highlight-soft);
  box-shadow: inset 0 0 0 1px var(--highlight);
}
body.studio-upload-active #dropzone.upload.dragging .drop-icon { color: var(--highlight-text); }
#studioView[data-stage="create"] .reference-hotspot.is-selected,
#studioView[data-stage="create"] .reference-hotspot.is-peeking,
#studioView[data-stage="create"] .reference-hotspot:focus-visible {
  border: 2px solid var(--highlight);
  background: color-mix(in srgb, var(--highlight) 8%, transparent);
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #09090b;
}
#studioView[data-stage="create"] .reference-hotspot.is-selected span,
#studioView[data-stage="create"] .reference-hotspot.is-peeking span,
#studioView[data-stage="create"] .reference-hotspot:focus-visible span {
  color: var(--on-highlight); background: var(--highlight);
  border-color: var(--highlight); box-shadow: 0 0 0 1px #fff, 0 0 0 2px #09090b;
}
#studioView[data-stage="create"] #remixCard .element-inventory-item.is-selected,
#studioView[data-stage="create"] #remixCard .element-inventory-item.is-peeking {
  border-color: var(--highlight); background: var(--highlight-soft);
  box-shadow: inset 3px 0 0 var(--highlight);
}
#remixCard .element-inventory-item.is-selected .element-inventory-edit > .ri-icon,
#remixCard .element-inventory-item.is-peeking .element-inventory-edit > .ri-icon,
#remixCard .quick-element-editor.is-selected > label { color: var(--highlight-text); }
#remixCard .quick-element-editor.is-selected > input,
#remixCard .quick-element-editor.is-selected .element-reference-upload {
  border-color: var(--highlight); box-shadow: 0 0 0 1px var(--highlight);
}
.newcomer-banner-icon { color: var(--on-highlight); background: var(--highlight); }
.newcomer-modal-eyebrow { color: var(--highlight-text); }
.newcomer-welcome .newcomer-welcome-gift { color: var(--highlight-text); background: var(--highlight-soft); }
.newcomer-banner > button { color: var(--on-action); background: var(--action); border-color: var(--action); }
.notification-badge { color: var(--on-highlight); background: var(--highlight); border-color: var(--card); }
.notification-unread-dot { background: var(--highlight); }
.notification-entry-title { transition: color 150ms ease; }
.notification-entry:hover .notification-entry-title,
.notification-entry:focus-within .notification-entry-title { color: var(--accent); }
.notification-item-meta { display: flex; align-items: center; gap: 8px; }
.notification-item-meta .notification-unread-dot { flex: 0 0 7px; margin-top: 0; }
.notification-item-date { color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.notification-detail-links { justify-items: start; gap: 10px; }
.notification-detail-links .notification-link { box-sizing: border-box; justify-content: center; max-width: 100%; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-action); color: var(--on-action); background: var(--action); font-size: 13px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background-color 150ms ease; }
.notification-detail-links .notification-link:hover { background: var(--action-hover); }
.notification-detail-links .notification-link:active { background: var(--action-pressed); }
.notification-detail-links .notification-link:disabled { opacity: .6; cursor: wait; }
.points-expiry-notice { border-left-color: var(--highlight); background: var(--highlight-soft); color: var(--text-soft); }
.credit-expiry { padding-left: 10px; border-left: 3px solid var(--highlight); }
.credit-expiry:empty { display: none; }
.artwork-star { box-shadow: none; }
.artwork-star.active, .artwork-star.active:hover { color: var(--highlight); background: #18181b; }
.artwork-star:hover:not(.active) { color: #fff; background: #18181b; }
.artwork-star:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #09090b; }
.artwork-star:disabled { cursor: wait; }
@media (max-width: 820px) {
  body > .appbar { border-radius: 20px; }
  body.studio-upload-active #dropzone.upload { border-radius: 36px; }
  #studioView[data-stage="create"] #inputPanel, #studioView[data-stage="create"] #remixCard { border-radius: 22px; }
  .account-modal, .text-editor-modal { border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Focused studio entry. Uses the shared theme tokens in both color modes. */
.studio-example, .studio-entry-note { display: none; }
#studioView[data-stage="upload"] .hero { max-width: 1100px; margin: 52px auto 36px; text-align: center; padding: 0; }
#studioView[data-stage="upload"] .hero h1 { margin: 0; font-size: clamp(32px, 3.8vw, 56px); font-weight: 650; line-height: 1.25; letter-spacing: -.035em; }
.hero h1 .hero-title-line { display: block; text-align: center; }
#studioView[data-stage="upload"] .hero p { margin: 14px 0 0; font-size: 17px; }
body.studio-upload-active #studioView .workspace { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); max-width: 1200px; width: 100%; margin: 0 auto; gap: 16px 24px; align-items: start; }
body.studio-upload-active #studioView #inputPanel { grid-column: 1; grid-row: 1; width: 100%; margin: 0; }
body.studio-upload-active #studioView #dropzone.upload { width: 100%; height: 420px; min-height: 0; aspect-ratio: auto; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-group); background: var(--card); }
body.studio-upload-active #dropInner { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 24px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-control); }
body.studio-upload-active .drop-icon { color: var(--text); margin: 0 0 20px; width: 48px; height: 48px; background: none; border: 0; box-shadow: none; }
body.studio-upload-active .drop-icon .ri-icon { width: 42px; height: 42px; }
body.studio-upload-active .drop-title { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 600; }
body.studio-upload-active .drop-hint { margin: 10px 0 0; font-size: 15px; color: var(--muted-strong); }
body.studio-upload-active .upload-select { margin: 30px 0 12px; min-height: 52px; width: min(240px, 100%); padding: 12px 24px; font-size: 17px; }
.upload-formats { margin: 0; color: var(--muted-strong); font-size: 13px; }
#studioView[data-stage="upload"] .studio-example { display: flex; flex-direction: column; align-items: center; grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.studio-example-images { display: grid; position: relative; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 18px 18px 12px; width: 100%; height: 420px; border: 1px solid var(--border); border-radius: var(--radius-group); background: var(--card); }
.studio-example figure { display: flex; flex-direction: column; min-width: 0; margin: 0; min-height: 0; }
.studio-example img { display: block; width: 100%; height: 0; flex: 1; min-height: 0; object-fit: cover; border-radius: var(--radius-xs); background: var(--field); }
.studio-example figcaption { padding-top: 12px; text-align: center; color: var(--text-soft); font-size: 14px; }
.studio-example-arrow { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--text); }
.studio-text-action { min-height: 44px; margin: 8px 0 0; padding: 8px 10px; display: inline-flex; gap: 14px; align-items: center; font: inherit; font-size: 14px; background: none; color: var(--text); border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.studio-text-action:hover { color: var(--muted-strong); }
.studio-text-action:disabled { opacity: .6; cursor: wait; }
.studio-example-status { margin: 0; font-size: 13px; color: var(--muted-strong); }
.studio-example-status:empty { display: none; }
body.studio-upload-active #newcomerBanner {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--highlight) 24%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--highlight-soft) 38%, var(--card));
  box-shadow: none;
}
body.studio-upload-active #newcomerBanner.hidden { display: none; }
body.studio-upload-active #newcomerBanner .newcomer-banner-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--highlight) 28%, var(--border));
  border-radius: 12px;
  color: var(--highlight-text);
  background: var(--card);
}
body.studio-upload-active #newcomerBanner .newcomer-banner-icon .ri-icon { width: 20px; height: 20px; }
body.studio-upload-active #newcomerBanner strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
body.studio-upload-active #newcomerBanner p { margin-top: 3px; font-size: 12px; line-height: 1.45; }
body.studio-upload-active #newcomerBanner > button {
  min-height: 44px;
  width: auto;
  padding: 6px 10px;
  border: 0;
  border-radius: 12px;
  color: var(--highlight-text);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
body.studio-upload-active #newcomerBanner > button::after { content: " →"; }
body.studio-upload-active #newcomerBanner > button:hover { background: var(--highlight-soft); }
#studioView[data-stage="upload"] .studio-entry-note { display: block; grid-column: 1 / -1; margin: 24px 0 36px; text-align: center; font-size: 17px; color: var(--muted-strong); letter-spacing: .08em; }
.points-trigger-label { font-size: 13px; font-weight: 500; }
.upload-select:focus-visible, .studio-text-action:focus-visible, #newcomerBannerAction:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.upload-select:active { transform: scale(.98); }
body.studio-upload-active #dropzone.upload.dragging #dropInner { border-color: var(--highlight); background: var(--highlight-soft); }
@media (max-width: 820px) {
  #studioView[data-stage="upload"] .hero { margin: 32px auto 28px; }
  body.studio-upload-active #studioView .workspace { gap: 14px; }
  body.studio-upload-active #studioView #dropzone.upload, .studio-example-images { height: 350px; padding: 12px; }
  body.studio-upload-active #dropInner { padding: 20px 8px; }
  body.studio-upload-active .drop-title { font-size: 20px; }
  body.studio-upload-active .drop-hint { font-size: 13px; }
}
@media (max-width: 600px) {
  #studioView[data-stage="upload"] .hero { margin: 28px auto 24px; }
  #studioView[data-stage="upload"] .hero h1 { font-size: 30px; text-wrap: balance; }
  #studioView[data-stage="upload"] .hero p { font-size: 14px; }
  body.studio-upload-active #studioView .workspace { grid-template-columns: minmax(0,1fr); gap: 12px; }
  body.studio-upload-active #studioView #dropzone.upload { height: 310px; }
  #studioView[data-stage="upload"] .studio-example { grid-column: 1; grid-row: 3; margin-top: 12px; }
  .studio-example-images { height: auto; padding: 12px; }
  .studio-example img { flex: none; height: auto; aspect-ratio: 4 / 5; }
  #studioView[data-stage="upload"] .studio-entry-note { margin: 8px 0 28px; font-size: 14px; }
  body.studio-upload-active #newcomerBanner {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 12px;
  }
  body.studio-upload-active #newcomerBanner > button {
    grid-column: 2;
    justify-self: start;
    margin-top: -6px;
  }
}
@media (prefers-reduced-motion: reduce) { .upload-select:active { transform: none; } }
/* Override the legacy single-card :has() geometry only in the entry state. */
body.studio-upload-active #studioView:not(:has(#remixCard:not(.hidden))) .workspace { max-width: 1200px; }
body.studio-upload-active #studioView:not(:has(#remixCard:not(.hidden))) #inputPanel { width: 100%; grid-column: 1; margin: 0; }
#studioView[data-stage="upload"] .studio-entry-note { grid-row: 3; }
@media (max-width: 600px) { #studioView[data-stage="upload"] .studio-entry-note { grid-row: 4; } }

/* Shared selected and hover states. */
body > .appbar .primary-nav-item.active::after { background: var(--accent); }
.account-tabs button.active,
#remixCard .edit-mode-switch button[aria-pressed="true"],
.tone-opt:has(input:checked), .style-opt:has(input:checked) {
  color: var(--highlight-text); background: var(--highlight-soft); border-color: var(--accent);
}
.points-trigger b, [data-theme="dark"] .points-trigger b,
body.studio-upload-active .drop-icon,
body.studio-upload-active #newcomerBanner .newcomer-banner-icon,
body.studio-upload-active #newcomerBanner > button { color: var(--highlight-text); }
body.studio-upload-active #dropzone.upload:hover { border-color: var(--accent); }
body.studio-upload-active #dropzone.upload:hover #dropInner { border-color: var(--accent); background: var(--highlight-soft); }
.primary:not(:disabled), .primary-button:not(:disabled), .points-recharge-button,
#studioView[data-stage="create"] .generation-action #generateBtn:not(:disabled) {
  box-shadow: inset 0 .5px 0 rgb(255 255 255 / 25%);
}

/* DESIGN.md: shared editorial geometry, typography and page rhythm. */
:root {
  --page-max-width: 1200px;
  --card-padding: 28px;
  --section-gap: 80px;
  --color-obsidian: #09090b;
  --color-ember: #a16207;
}
body { font-family: var(--font-sans); font-size: 14px; min-height: 100dvh; }
button, input, textarea, select, kbd, code, pre { font-family: var(--font-sans); }
button { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
::selection { color: var(--card); background: var(--text); }
body > .appbar { background: var(--card); border-color: transparent; border-radius: 24px; }
body > .appbar .primary-nav-item { font-size: 14px; border-radius: 14px; }
body > .appbar .primary-nav-item.active { color: var(--text); }
body > .appbar .primary-nav-item:hover { background: var(--field); }
#studioView[data-stage="upload"] .hero {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  max-width: var(--page-max-width); margin: 64px auto 48px; text-align: center;
}
#studioView[data-stage="upload"] .hero h1 {
  max-width: 960px; margin-inline: auto; font-size: clamp(36px, 4.4vw, 64px); font-weight: 600;
  line-height: 1.2; letter-spacing: normal; text-wrap: balance;
}
#studioView[data-stage="upload"] .hero p {
  flex: 0 1 245px; margin: 0 0 8px; color: var(--muted-strong); font-size: 15px; line-height: 1.7;
}
body.studio-upload-active #studioView #dropzone.upload { border-radius: 36px; corner-shape: round; padding: 28px; }
body.studio-upload-active #dropInner { border-radius: 20px; }
body.studio-upload-active .upload-select { font-size: 14px; min-height: 48px; width: min(220px, 100%); }
.studio-example-images { border-radius: 36px; padding: 0; gap: 0; overflow: hidden; }
/* Keep the example image grid within the same height as the upload panel. */
body.studio-upload-active { --studio-entry-height: 420px; }
body.studio-upload-active #studioView #dropzone.upload,
body.studio-upload-active #studioView .studio-example-images {
  box-sizing: border-box;
  height: var(--studio-entry-height);
  min-height: var(--studio-entry-height);
  max-height: var(--studio-entry-height);
  flex-shrink: 0;
}
body.studio-upload-active #studioView .studio-example-images {
  grid-template-rows: minmax(0, 1fr);
}
body.studio-upload-active #studioView .studio-example figure { overflow: hidden; }
body.studio-upload-active #studioView .studio-example img {
  flex: 1 1 0;
  height: 0;
  min-height: 0;
  aspect-ratio: auto;
}
@media (max-width: 820px) { body.studio-upload-active { --studio-entry-height: 350px; } }
@media (max-width: 600px) { body.studio-upload-active { --studio-entry-height: 310px; } }
.studio-example figure { padding-bottom: 28px; }
.studio-example figure + figure { border-left: 1px solid var(--border); }
.studio-example img { border-radius: 0; background: var(--field); }
.studio-example figcaption { padding-top: 20px; font-size: 14px; }
.studio-example-arrow { border: 1px solid var(--border); }
#studioView[data-stage="upload"] .studio-entry-note { margin: 32px 0 48px; font-size: 14px; letter-spacing: normal; }
.account-view, .utility-view { max-width: var(--page-max-width); }
.account-page-head, .utility-page-head { margin-bottom: 32px; }
.account-page-title h1, .utility-page-title h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.28; }
.account-page-title p, .utility-page-title p { color: var(--muted-strong); font-size: 14px; line-height: 1.6; }
.utility-card, .account-profile-card, .records-card, .help-center-card { padding: 28px; }
.artwork-card, .inspiration-card, .recharge-tier, .recharge-records-page-card,
.studio-generation-view, .studio-result-view { border-radius: 36px; border-color: var(--border); box-shadow: none; }
.recharge-tier { background: var(--card); padding: 28px; }
.recharge-tier.featured { border-color: var(--accent); box-shadow: none; }

.newcomer-badge { background: var(--badge-accent); color: #09090b; font-weight: 600; }
.account-modal, .newcomer-modal, .text-editor-modal { border-radius: 36px; box-shadow: none; }
.account-menu, .points-popover, .notification-popover { border-radius: 28px; box-shadow: none; }
.account-tabs { background: var(--field); padding: 4px; }
.account-tabs button.active { color: var(--highlight-text); background: var(--highlight-soft); border-color: var(--accent); }
.account-form input, .login-card input { min-height: 48px; padding: 12px 16px; }
.account-form input::placeholder, .field input::placeholder, textarea::placeholder { color: var(--muted-strong); opacity: 1; }
.account-menu-item:hover, .account-menu-item:focus-visible { background: var(--field); }
.utility-page-icon, .account-menu-item-icon { color: var(--muted-strong); background: var(--field); }
.status-pill, .type-tag, .status { border-radius: 12px; }
/* Keep source images, selection bounds and the editor's dock geometry intact. */
#studioView.focused-editor[data-stage="create"] #inputPanel,
#studioView.focused-editor[data-stage="create"] #remixCard { border-radius: 36px; box-shadow: none; }
#studioView.focused-editor[data-stage="create"] #previewWrap { border-radius: 0; background-image: none; }
#studioView.focused-editor[data-stage="create"] #sameStyleActionBar { border-radius: 0; box-shadow: none; border: 0; }
.editor-panel-nav { border-radius: 14px; }
.editor-panel-nav button { border-radius: 12px; min-height: 40px; }
.editor-panel-nav button[aria-pressed="true"], .editor-panel-nav button[aria-expanded="true"] { box-shadow: none; }
#studioView.focused-editor[data-stage="create"] .style-opt, .context-scope select { border-radius: 14px; }
#studioView.focused-editor[data-stage="create"] #sameStyleActionBar .generation-action > button { border-radius: 14px; }
/* Shared compact size for creation and download actions in every state. */
#studioView.focused-editor[data-stage="create"] #sameStyleActionBar .generation-action > #generateBtn,
#studioView.focused-editor[data-stage="create"] #sameStyleActionBar .generation-action > #editorDownloadBtn,
#studioResultView #resultRegenerateBtn {
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}
/* Keep the generation action recognizable while idle, with cost subordinate to the verb. */
#studioView #sameStyleActionBar {
  --generation-idle-bg: color-mix(in srgb, var(--highlight-soft) 72%, var(--field));
  --generation-idle-border: color-mix(in srgb, var(--highlight) 16%, var(--border));
  --generation-idle-text: color-mix(in srgb, var(--highlight-text) 40%, var(--muted));
}
#studioView #sameStyleActionBar .generation-action > #generateBtn:disabled:not(.is-loading) {
  background: var(--generation-idle-bg); border-color: var(--generation-idle-border);
  color: var(--generation-idle-text); opacity: 1; box-shadow: none;
}
#studioView #sameStyleActionBar #generateButtonLabel { font-weight: 600; }
#studioView #sameStyleActionBar #generateButtonCost { font-size: 12px; font-weight: 400; white-space: nowrap; }
#studioView #sameStyleActionBar .generation-action > #editorDownloadBtn {
  color: var(--text-soft); background: var(--card-soft); border-color: var(--border-strong);
  font-weight: 500; box-shadow: none;
}
#studioView #sameStyleActionBar .generation-action > #editorDownloadBtn:hover:not(:disabled) {
  color: var(--text); background: var(--field); border-color: var(--border-strong);
}
#studioView #sameStyleActionBar .generation-action > #editorDownloadBtn:active:not(:disabled) { transform: scale(.98); }
#studioView #sameStyleActionBar #changeCount {
  color: var(--muted-strong); background: var(--card-soft); border-color: var(--border); font-weight: 500;
}
#studioView #sameStyleActionBar #changeCount:is(:hover, :focus-visible) {
  color: var(--text); background: var(--field); border-color: var(--border-strong);
}
#studioView #sameStyleActionBar .generation-action > #generateBtn:active:not(:disabled),
#studioResultView #resultRegenerateBtn:active:not(:disabled) {
  background: var(--action-pressed);
  border-color: var(--action-pressed);
  transform: scale(.98);
  opacity: 1;
}
#studioView #sameStyleActionBar .generation-action > #generateBtn:focus-visible,
#studioResultView #resultRegenerateBtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
#studioView #sameStyleActionBar .generation-action > #generateBtn.is-loading:disabled {
  color: var(--highlight-text);
  background: var(--highlight-soft);
  border-color: var(--accent);
  cursor: progress;
}
@media (prefers-reduced-motion: reduce) {
  #studioView.focused-editor[data-stage="create"] #sameStyleActionBar .generation-action > #generateBtn,
  #studioView.focused-editor[data-stage="create"] #sameStyleActionBar .generation-action > #editorDownloadBtn,
  #studioResultView #resultRegenerateBtn { transition: none; }
  #studioView #sameStyleActionBar .generation-action > #generateBtn:active:not(:disabled),
  #studioView #sameStyleActionBar .generation-action > #editorDownloadBtn:active:not(:disabled),
  #studioResultView #resultRegenerateBtn:active:not(:disabled) { transform: none; }
  #studioView #sameStyleActionBar .generation-action > #generateBtn.is-loading::before { animation: none; }
}
#studioView.focused-editor[data-stage="create"] #resetEditsBtn:not(.hidden) { border-radius: 14px; box-shadow: none; }
.primary:focus-visible, .primary-button:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
/* All admin routes share these surfaces, filters, tables and detail dialogs. */
.admin-app .page-content { max-width: 1440px; margin-inline: auto; padding: 28px; }
.admin-app .panel, .admin-app .metric-card, .login-card { border: 1px solid var(--border); border-radius: 36px; box-shadow: none; }
.admin-app .panel-head { padding: 24px 28px; }
.admin-app .metric-card { padding: 28px; }
.metric-value, .metric-card > strong { font-size: 40px; font-weight: 600; line-height: 1.28; letter-spacing: normal; }
.nav-item { border-radius: 14px; }
.nav-item.active { color: var(--highlight-text); background: var(--highlight-soft); }
.nav-item.active::before { background: var(--accent); }
.toolbar input, .toolbar select, .modal input, .modal select, .modal textarea,
.drawer input, .drawer select, .drawer textarea { border-radius: 14px; background-color: var(--card); border-color: var(--border-strong); }
.data-table { font-size: 13px; }
.data-table th { color: var(--muted-strong); background: var(--card-soft); font-weight: 500; }
.data-table td { border-color: var(--border); }
.data-table tbody tr:hover { background: var(--card-soft); }
.data-table .secondary-button, .data-table .danger-button, .data-table .text-button { border-radius: 12px; }
.admin-app .topbar { background: var(--card); box-shadow: none; }
.login-view { background: var(--bg); }
.login-view::before, .login-view::after { display: none; }
.login-heading h1 { font-size: 40px; font-weight: 600; line-height: 1.28; }
.login-brand .brand-mark { background: #09090b; color: #fff; box-shadow: none; }
.login-heading .eyebrow { color: var(--muted-strong); }
.drawer { border-radius: 36px 0 0 36px; }
.code-block { background: #18181b; color: #f4f4f5; }
@media (max-width: 900px) {
  #studioView[data-stage="upload"] .hero { display: block; margin: 40px auto 32px; }
  #studioView[data-stage="upload"] .hero p { margin: 16px 0 0; }
  .admin-app .topbar { height: auto; min-height: 80px; flex-wrap: wrap; gap: 16px; padding-block: 20px; }
  .admin-app .top-actions { flex-wrap: wrap; }
  .admin-app .page-content { padding: 20px; }
}
@media (max-width: 600px) {
  #studioView[data-stage="upload"] .hero { margin: 28px auto; }
  /* Fit the twelve-character opening line without changing desktop type. */
  #studioView[data-stage="upload"] .hero h1 { font-size: min(36px, calc((100vw - 32px) / 12)); }
  #studioView[data-stage="upload"] .hero p { font-size: 14px; }
  body.studio-upload-active #studioView #dropzone.upload { padding: 20px; }
  .studio-example figure { padding-bottom: 20px; }
  .studio-example figcaption { padding-top: 14px; font-size: 13px; }
  .utility-card, .account-profile-card, .records-card, .help-center-card, .recharge-tier { padding: 20px; }
  .admin-app .page-content { padding: 16px; }
  .admin-app .panel-head, .admin-app .metric-card { padding: 20px; }
  .account-modal, .newcomer-modal, .text-editor-modal { border-radius: 28px; }
}

/* Editor review: consistent outer spacing and a continuous dotted canvas.
   The sticky app bar is offset 12px from its normal flow position. */
body.studio-active:has(#studioView.focused-editor[data-stage="create"]) #mainContent.page {
  padding-top: 32px;
}
#studioView.focused-editor[data-stage="create"] #inputPanel { gap: 0; }
#studioView.focused-editor[data-stage="create"] .reference-toolbar { margin-bottom: 0; }
#studioView.focused-editor[data-stage="create"] #dropzone { margin: 0; padding: 0; }
#studioView.focused-editor[data-stage="create"] #previewWrap {
  margin: 0; border-radius: 0;
  background-color: var(--canvas-bg);
  background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}

/* Logged-in avatars should sit cleanly in the navigation without a halo. */
.appbar #accountBtn.account-action:not(.is-guest) {
  padding: 0;
  background: transparent;
}
.appbar #accountBtn.account-action:not(.is-guest):hover:not(:disabled),
.appbar #accountBtn.account-action:not(.is-guest)[aria-expanded="true"] {
  background: transparent;
}