/*
  Spotify Brand Governance Hub
  © Rare Standard GK / rarestandard.jp
  Author: Roy Husada (roy@rarestandard.jp)
*/

@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/SpaceGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS 1p";
  src: url("./assets/fonts/MPLUS1p-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS 1p";
  src: url("./assets/fonts/MPLUS1p-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS 1p";
  src: url("./assets/fonts/MPLUS1p-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   Neutral baseline theme — what every NEW client sees before it is branded.
   Dark #181818 chrome, Inter body, Space Grotesk display, vermillion accent.
   Client styles ([data-app-style="…"]) override tokens in client.css; the
   built-in "rs" and "spotify" styles below keep their historical look.
   ========================================================================== */
:root {
  --brand-color: #ff4506; /* the accent token — was --spotify-green */
  --rs-shuiro: #ff4506;
  --rs-gunjo: #2961d0;
  --rs-yamabuki: #f5c142;
  --rs-green: #669a2a;
  --rs-red-soft: #fff0ee;
  --rs-orange-soft: #fbe4d1;
  --neutral-0: #ffffff;
  --neutral-50: #f0f0f0;
  --neutral-100: #e6e6e6;
  --neutral-200: #d0d0d0;
  --neutral-400: #8a8a8a;
  --neutral-600: #5a5a5a;
  --neutral-800: #303030;
  --neutral-1000: #121212;
  --bg-base: var(--neutral-0);
  --bg-surface: var(--neutral-50); /* body = the #F0F0F0 primary background */
  --bg-elevated: var(--neutral-0);
  --fg-primary: var(--neutral-1000);
  --fg-secondary: var(--neutral-600);
  --fg-tertiary: var(--neutral-400);
  --fg-inverse: var(--neutral-0);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-800);
  --scroll-thumb: rgba(0, 0, 0, 0.18);
  --scroll-thumb-hover: rgba(0, 0, 0, 0.32);
  --radius: 6px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.08);
  --font-display: "Space Grotesk", "M PLUS 1p", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-sans: "Inter", "M PLUS 1p", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-ja: "M PLUS 1p", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-spotify: var(--font-display);
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --live-bg: #191414;
  --live-fg: #1ed760;
  /* Immersive tool chrome (Campaign Studio, Color Checker, lightboxes).
     Light in the baseline; the spotify style pins its original dark set. */
  --tool-chrome: #ffffff;
  --tool-chrome-border: rgba(0, 0, 0, 0.10);
  --tool-canvas: #e4e4e4;
  --tool-surface: #ffffff;
  --tool-surface-2: #ebebeb;
  --tool-text: #121212;
  --tool-text-dim: #5a5a5a;
  --tool-border-soft: rgba(0, 0, 0, 0.12);
  --tool-btn-primary-bg: #121212;
  --tool-btn-primary-fg: #ffffff;
  --copy-prev-bg: #f0f0f0; /* prior-build candidate cards (light grey) */
}

/* Display type: headings + tool titles use the display face. */
h1, h2, h3,
.brand-block strong {
  font-family: var(--font-display);
}

/* Baseline wordmark: BRAND OPS in caps at the heaviest weight. The rs style
   opts back out below. */
.brand-block strong {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 900;
}

:root[data-app-style="rs"] .brand-block strong {
  text-transform: none;
  letter-spacing: 0;
}

/* RS (Rare Standard) style — per the official RS Design System bundle:
   Shuiro accent, warm paper neutrals, 3px interactive radius, soft shadow
   ramp, Space Grotesk + M PLUS 1p. */
:root[data-app-style="rs"] {
  --brand-color: var(--rs-shuiro);
  --accent: var(--rs-shuiro); /* copy-tool controls fall back to green otherwise */
  --bg-surface: var(--neutral-50);
  --neutral-0: #ffffff;
  --neutral-50: #f8f5f1;
  --neutral-100: #efeae2;
  --neutral-200: #cbc8c2;
  --neutral-400: #888682;
  --neutral-600: #585654;
  --neutral-800: #31302f;
  --neutral-1000: #121212;
  --scroll-thumb: rgba(0, 0, 0, 0.18);
  --scroll-thumb-hover: rgba(0, 0, 0, 0.32);
  --radius: 3px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.12);
  --tool-canvas: #efeae2;
  --tool-surface-2: #f8f5f1;
  --copy-prev-bg: #f8f5f1;
  --font-display: "Space Grotesk", "M PLUS 1p", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-sans: "Space Grotesk", "M PLUS 1p", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

/* RS DS interaction + type signatures: Gunjo keyboard focus (2px, offset 2),
   Gunjo plain links, tight display tracking (-5% h1 / -4% h2). */
:root[data-app-style="rs"] :focus-visible { outline: 2px solid var(--rs-gunjo); outline-offset: 2px; }
:root[data-app-style="rs"] a:not([class]) { color: var(--rs-gunjo); }
:root[data-app-style="rs"] h1 { letter-spacing: -0.05em; }
:root[data-app-style="rs"] h2 { letter-spacing: -0.04em; }
/* DS button states: quiet 120ms standard easing; secondary/ghost hover fills
   neutral-100, primary (ink) deepens to pure black. Labels track at +4%. */
:root[data-app-style="rs"] .btn {
  transition: background-color 120ms cubic-bezier(0.2, 0, 0, 1), border-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
:root[data-app-style="rs"] .btn:not(:disabled):hover { background: var(--neutral-100); }
:root[data-app-style="rs"] .btn-primary:not(:disabled):hover { background: #000000; }
:root[data-app-style="rs"] .btn:disabled { opacity: 0.6; }
:root[data-app-style="rs"] .settings-eyebrow { letter-spacing: 0.04em; }
/* DS status palette on the validator chips (success / warning / error). */
:root[data-app-style="rs"] .copy-chip.ok { background: #c8e0a3; color: #4f7a1f; }
:root[data-app-style="rs"] .copy-chip.warn { background: var(--rs-orange-soft); color: #b85a10; }
:root[data-app-style="rs"] .copy-chip.bad { background: var(--rs-red-soft); color: #cc3605; }

/* Spotify Brand Ops style: Spotify-black theme. Invert the neutral ramp so every
   semantic token (and direct neutral usage) flips to dark, and switch to Spotify
   Mix. The color-checker --live-bg/--live-fg are left alone (they are the test
   colors, not app chrome). */
:root[data-app-style="spotify"] {
  --brand-color: #1ed760;
  --tool-chrome: #181818;
  --tool-chrome-border: rgba(255, 255, 255, 0.10);
  --tool-canvas: #0a0a0a;
  --tool-surface: #1f1f1f;
  --tool-surface-2: #282828;
  --tool-text: #ffffff;
  --tool-text-dim: #b3b3b3;
  --tool-border-soft: rgba(255, 255, 255, 0.12);
  --tool-btn-primary-bg: #ffffff;
  --tool-btn-primary-fg: #000000;
  --copy-prev-bg: #1a1a1a; /* dark-style equivalent of the grey prior-build card */
  --font-spotify: "Spotify Mix", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --neutral-0: #000000;
  --neutral-50: #191414;
  --neutral-100: #2a2424;
  --neutral-200: #3a3434;
  --neutral-400: #9b9b9b;
  --neutral-600: #b3b3b3;
  --neutral-800: #d4d4d4;
  --neutral-1000: #ffffff;
  --scroll-thumb: rgba(255, 255, 255, 0.20);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.36);
  --font-sans: "Spotify Mix", "M PLUS 1p", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-display: "Spotify Mix", "M PLUS 1p", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

:root[data-app-style="spotify"] .rs-logo {
  width: 34px;
}

/* Spotify style: lighter, regular-weight UI overall... */
:root[data-app-style="spotify"] * {
  font-weight: 400;
}

/* ...except the BRAND OPS wordmark: uppercase, Spotify Mix Wide Ultra. */
:root[data-app-style="spotify"] .brand-block strong {
  font-family: "Spotify Mix Wide Ultra", var(--font-sans);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Totally-black main area; remove the top-bar / sidebar strokes. */
:root[data-app-style="spotify"] body {
  background: #000000;
}

:root[data-app-style="spotify"] .topbar,
:root[data-app-style="spotify"] .sidebar {
  border-color: transparent;
}

* { box-sizing: border-box; }

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-surface);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

code {
  font-family: var(--font-mono);
}

.auth-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--neutral-100);
}

.auth-card {
  width: min(440px, 100%);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-2);
}

.auth-logo,
.rs-logo {
  width: 42px;
  height: auto;
}

.auth-card h1,
.auth-card p {
  margin: 0;
}

.auth-card h1 {
  margin-top: 20px;
  font-size: 28px;
  line-height: 1.08;
}

.auth-card p {
  margin-top: 12px;
  color: var(--fg-secondary);
}

.auth-foot {
  font-size: 12px;
}

.auth-error {
  padding: 10px 12px;
  background: var(--rs-red-soft);
  color: #b42318;
  border: 1px solid #f5b5ad;
  border-radius: var(--radius);
}

.btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 3px;
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--fg-primary);
  font-weight: 600;
  text-decoration: none;
}

.btn-primary {
  background: var(--fg-primary);
  color: var(--fg-inverse);
}

.auth-card .btn-primary {
  margin-top: 20px;
}

.btn-secondary:hover,
.nav-item:hover,
.lang-btn:hover {
  background: var(--neutral-100);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.is-loading {
  opacity: 1;
  cursor: progress;
}

.btn-spinner {
  width: 13px;
  height: 13px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.8s; }
}

.app-shell {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  transition: grid-template-columns 0.25s ease;
}

/* Collapsed sidebar: a narrow icon rail; pages stay reachable via the icons.
   Padding, item padding, and the toggle keep their expanded geometry so the
   icons sit in exactly the same spot in both states. */
.app-shell.is-collapsed {
  grid-template-columns: 78px minmax(0, 1fr);
}

.app-shell.is-collapsed .nav-text {
  display: none;
}

/* The "Tools" label becomes a simple horizontal divider when collapsed.
   Vertical spacing matches the expanded label (20 + 1 + 12 ≈ 20 + text) so
   the items below don't shift. */
.app-shell.is-collapsed .nav-label {
  height: 1px;
  margin: 20px 10px 12px;
  padding: 0;
  background: var(--border-default);
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

.app-shell.is-collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}

.sidebar {
  background: var(--bg-base);
  border-right: 1px solid var(--border-default);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

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

/* In the account popover: a quiet row above Sign out, navigating to the
   changelog page. Internal users only (applyAccessControl hides it). */
.user-popover .app-version {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
}

.user-popover .app-version:hover {
  background: var(--bg-surface);
  color: var(--fg-primary);
}

.changelog-page-body {
  max-width: 720px;
  margin-top: 18px;
}

.app-version {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-tertiary);
  letter-spacing: 0.02em;
  text-transform: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.18s ease;
}

.app-version:hover,
.app-version:focus-visible {
  color: var(--fg-secondary);
  outline: none;
}

/* Staging label inside the chip. Beats `.brand-block span { display: block }`
   so the chip stays on one line; size/font inherit from .app-version. */
.app-version .version-env {
  display: inline;
  font-size: inherit;
  color: #ff4506;
}

/* Per-feature version next to a tool's title (same grey monospace style). */
.tool-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.feature-version {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-tertiary);
  letter-spacing: 0.02em;
}

.changelog-dialog {
  width: min(560px, 92vw);
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg-primary);
  overflow: hidden;
}

.changelog-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.changelog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}

.changelog-head h2 {
  margin: 0;
  font-size: 18px;
}

.changelog-body {
  padding: 4px 20px 20px;
  max-height: calc(80vh - 62px);
  overflow: auto;
}

.changelog-entry {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-default);
}

.changelog-entry:last-child {
  border-bottom: 0;
}

.changelog-entry h3 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 14px;
}

.changelog-entry h3 span {
  margin-left: 10px;
  color: var(--fg-tertiary);
  font-weight: 400;
  font-size: 12px;
}

.changelog-entry ul {
  margin: 0;
  padding-left: 18px;
}

.changelog-entry li {
  margin: 5px 0;
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.brand-block strong,
.brand-block span {
  display: block;
}

.brand-block strong {
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 500;
}

.brand-block span {
  color: var(--fg-tertiary);
  font-size: 12px;
}

.nav {
  display: grid;
  align-content: start;
  gap: 8px;
}

.nav-label {
  margin-top: 20px;
  padding: 0 10px;
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.nav-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  /* Tools items: bright (fg-primary = white on the Spotify theme). */
  color: var(--fg-primary);
  text-align: left;
  padding: 10px;
  font-weight: 600;
  font-size: 16px;
  transition: background-color 0.6s ease, color 0.6s ease;
}

.nav-item:not(.is-active):hover {
  background: var(--brand-color);
  color: #000000;
}

/* Sidebar nav icons: Phosphor SVG (Overview) or currentColor mask (tool icons). */
.nav-icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
}

/* Collapse/expand control at the sidebar bottom. Sticky so it stays in view
   on tall pages (the sidebar stretches to the full content height there). */
.sidebar-toggle {
  position: sticky;
  bottom: 18px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-base);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: var(--neutral-100);
  color: var(--fg-primary);
  outline: none;
}

.sidebar-toggle-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.nav-item.is-active {
  background: var(--neutral-1000);
  color: var(--fg-inverse);
}

.main-shell {
  min-width: 0;
  /* clip, not hidden: hidden forces overflow-y:auto, making this a scroll
     container that breaks position:sticky descendants (the window scrolls). */
  overflow-x: clip;
}

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-default);
}

.topbar-brand {
  flex: none;
  /* Equalized corner spacing, +4px down/right nudge, then -1px up/left trim.
     RS: -12 + 4 - 1 = -9. */
  margin-left: -9px;
  margin-top: 3px;
}

/* Spotify bug (34px, 19px top gap): -9 + 4 - 1 = -6. */
:root[data-app-style="spotify"] .topbar-brand {
  margin-left: -6px;
}

.topbar h1,
.topbar p {
  margin: 0;
}

.topbar h1 {
  font-size: 20px;
  line-height: 1.2;
}

.top-kicker {
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

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

.language-toggle,
.segmented {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-elevated);
}

.lang-btn,
.segmented button {
  min-height: 32px;
  border: 0;
  border-right: 1px solid var(--border-default);
  background: transparent;
  padding: 6px 10px;
  color: var(--fg-secondary);
  font-weight: 700;
}

.lang-btn:last-child,
.segmented button:last-child {
  border-right: 0;
}

.lang-btn.is-active {
  background: var(--neutral-1000);
  color: var(--fg-inverse);
}

.segmented button.is-active {
  background: var(--brand-color);
  color: #000000;
}

/* Buttons with a leading inline SVG icon (e.g. the PDF download button). */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-icon .btn-svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Icon-only buttons (e.g. specimen Export JPG): square-ish, no label. */
.btn-icon-only {
  padding-inline: 10px;
}

/* --- User menu: avatar + email pill, opening an account popover --- */
.user-menu {
  position: relative;
}

.user-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--fg-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.user-chip-btn:hover,
.user-chip-btn:focus-visible {
  background: var(--neutral-200);
  outline: none;
}

.user-chip-email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-300);
  color: var(--fg-primary);
  font-weight: 700;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-avatar-lg {
  width: 56px;
  height: 56px;
  font-size: 22px;
}

.user-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 320px;
  padding: 22px 20px 18px;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--neutral-100);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.user-popover-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  color: var(--fg-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease;
}

.user-popover-close:hover {
  color: var(--fg-primary);
}

.user-popover-id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.user-popover-who {
  min-width: 0;
}

.user-popover-who b {
  display: block;
  color: var(--fg-primary);
  font-size: 17px;
}

.user-popover-who span {
  display: block;
  color: var(--fg-secondary);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Workspace navigation inside the account popover (rarestandard.jp only). */
.user-popover-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-default);
}

.user-popover-nav-label {
  margin-bottom: 6px;
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-popover-nav button {
  border: 0;
  background: none;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--fg-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.user-popover-nav button:hover,
.user-popover-nav button:focus-visible {
  background: var(--brand-color);
  color: #000000;
  outline: none;
}

.user-popover-action {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.user-popover-action:hover,
.user-popover-action:focus-visible {
  background: var(--brand-color);
  border-color: var(--brand-color);
  color: #000000;
  outline: none;
}

.user-popover-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--fg-tertiary);
  font-size: 13px;
}

.user-popover-links a,
.user-popover-links button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--fg-secondary);
  text-decoration: none;
  cursor: pointer;
}

.user-popover-links a:hover,
.user-popover-links button:hover {
  text-decoration: underline;
}

/* --- Legal pages (Terms of Service / Privacy Policy) --- */
.legal-page {
  max-width: 760px;
}

.legal-updated {
  color: var(--fg-tertiary);
  font-size: 13px;
}

.legal-section {
  margin-top: 22px;
}

.legal-section h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.legal-section p {
  margin: 0;
  color: var(--fg-secondary);
  line-height: 1.7;
}

/* --- First sign-in agreement dialog --- */
.tos-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: 28px 26px 24px;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--neutral-100);
  color: var(--fg-primary);
  overflow-y: auto;
}

.tos-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.tos-dialog h2 {
  margin: 0 0 8px;
}

.tos-dialog > p {
  margin: 0 0 14px;
  color: var(--fg-secondary);
}

.tos-bullets {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--fg-secondary);
  line-height: 1.7;
}

.tos-details {
  margin-bottom: 10px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 10px 14px;
}

.tos-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.tos-details .legal-section {
  margin-top: 14px;
}

.tos-agree-btn {
  width: 100%;
  margin-top: 14px;
}

/* Close (✕) on the Report sheet, top right. */
.report-close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
  border: 0;
  background: none;
  padding: 6px;
  color: var(--fg-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease;
}

.report-close-btn:hover,
.report-close-btn:focus-visible {
  color: var(--fg-primary);
  outline: none;
}

/* --- Report as a sheet layered above the Logo Checker --- */
/* The logo view stays active underneath; the reports view becomes a fixed
   scrim with the panel rising from the bottom edge as an elevated sheet. */
.view[data-view="reports"].is-active.is-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 40;
  justify-content: center;
  align-items: stretch;
  padding: 48px 28px 0;
  background: rgba(0, 0, 0, 0.55);
  animation: none;
  cursor: pointer; /* the scrim itself returns to the logo checker */
}

.view[data-view="reports"].is-overlay > .placeholder-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  margin: 0;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden; /* the list scrolls; the title block stays frozen */
  cursor: auto;
  animation: report-sheet-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Only the run list scrolls; the table header row sticks to its top. */
.view[data-view="reports"].is-overlay .log-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.view[data-view="reports"].is-overlay .log-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-base);
}

@keyframes report-sheet-rise {
  from { transform: translateY(48px); opacity: 0.4; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .view[data-view="reports"].is-overlay > .placeholder-panel {
    animation: none;
  }
}

.content {
  min-width: 0;
  padding: 30px 34px;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
  animation: view-slide-in 0.35s ease;
}

@keyframes view-slide-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .view.is-active {
    animation: none;
  }
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 16px;
}

.hero-panel,
.status-panel,
.placeholder-panel,
.pair-bar,
.palette-panel,
.decision-tree,
.upload-panel,
.report-panel {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.hero-panel {
  min-height: 300px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-panel h2 {
  margin: 0;
  max-width: 680px;
  font-size: 46px;
  line-height: 1;
}

/* Overview title: "HUB" at 72px */
.hero-panel h2.hero-hub-title {
  font-size: 72px;
}

.hero-panel p {
  max-width: 660px;
  color: var(--fg-secondary);
  font-size: 17px;
}

/* ---- Overview tool cards (color / logo / campaign) ----
   Geometry matches the Figma (SP282 HUB Home): a tall card whose top ~36.5% is
   the accent band (icon + version) and the rest is black, with the title and
   description set in the accent color. All metrics are container-query units
   (% of the card's own width, ref = Figma's 856px card) so they scale 1:1. */
.home-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.home-tool-card {
  container-type: inline-size;
  position: relative;
  display: block;
  aspect-ratio: 856 / 1159;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff; /* card body — baseline; spotify/rs pin black below */
  color: #000000;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-tool-card:hover,
.home-tool-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  outline: none;
}

/* Accent band across the top (312.63 / 856 = 36.52cqw tall). */
.home-tool-head {
  position: absolute;
  inset: 0 0 auto 0;
  height: 36.52cqw;
  background: var(--tool-accent);
}

.home-tool-icon {
  position: absolute;
  left: 7.32cqw;
  top: 12.68cqw;
  width: 13.18cqw;
  height: 13.18cqw;
  background: #000000; /* icon reads black on the accent band */
  -webkit-mask: var(--cta-icon) left center / contain no-repeat;
  mask: var(--cta-icon) left center / contain no-repeat;
}

.home-tool-version {
  position: absolute;
  top: 14cqw;
  right: 7.32cqw;
  color: #000000;
  font-family: var(--font-mono);
  font-size: 4.67cqw;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.home-tool-body { display: contents; }

.home-tool-title {
  position: absolute;
  left: 7.32cqw;
  right: 7.32cqw;
  top: 45cqw;
  margin: 0;
  font-family: var(--font-display);
  font-size: 9.35cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #000000;
}

.home-tool-desc {
  position: absolute;
  left: 7.55cqw;
  top: 91.68cqw;
  width: 75.87cqw;
  margin: 0;
  font-size: 4.67cqw;
  line-height: 1.51;
  color: #000000;
}

/* Baseline: every card carries the brand color; the spotify style keeps its
   original per-tool hues below. */
.tool-color, .tool-logo, .tool-campaign, .tool-studio, .tool-copy { --tool-accent: var(--brand-color); }

:root[data-app-style="spotify"] .tool-color { --tool-accent: #59A0F6; }
:root[data-app-style="spotify"] .tool-logo { --tool-accent: #FF7163; }
:root[data-app-style="spotify"] .tool-campaign { --tool-accent: #FFC862; }
:root[data-app-style="spotify"] .tool-studio { --tool-accent: #1ED760; }
:root[data-app-style="spotify"] .tool-copy { --tool-accent: #B19CFF; }

:root[data-app-style="spotify"] .home-tool-title {
  font-family: "Spotify Mix Wide Black", var(--font-display);
  font-weight: 900;
}

:root[data-app-style="spotify"] .home-tool-card {
  background: #000000;
  color: var(--tool-accent);
}

:root[data-app-style="spotify"] .home-tool-title,
:root[data-app-style="spotify"] .home-tool-desc {
  color: var(--tool-accent);
}

/* RS DS tool cards: flat white body with a hairline border and the DS shadow
   ramp; the accent band carries the Japanese palette (Gunjo / Shuiro /
   Yamabuki / Wakaba / Momo) with the icon inked black on it. */
:root[data-app-style="rs"] .home-tool-card {
  border-radius: 3px;
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-1);
}
:root[data-app-style="rs"] .home-tool-card:hover,
:root[data-app-style="rs"] .home-tool-card:focus-visible {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}
:root[data-app-style="rs"] .home-tool-title {
  font-weight: 700;
  letter-spacing: -0.04em;
}
:root[data-app-style="rs"] .home-tool-desc { color: var(--neutral-600); }
:root[data-app-style="rs"] .tool-color { --tool-accent: #2961D0; }
:root[data-app-style="rs"] .tool-logo { --tool-accent: #FF4506; }
:root[data-app-style="rs"] .tool-campaign { --tool-accent: #F5C142; }
:root[data-app-style="rs"] .tool-studio { --tool-accent: #669A2A; }
:root[data-app-style="rs"] .tool-copy { --tool-accent: #F093BC; }
/* DS logo rule: marks reverse to white on the darker fills (Gunjo / Shuiro /
   Wakaba); they stay ink on the light fills (Yamabuki / Momo). */
:root[data-app-style="rs"] .tool-color .home-tool-icon,
:root[data-app-style="rs"] .tool-logo .home-tool-icon,
:root[data-app-style="rs"] .tool-studio .home-tool-icon { background: #ffffff; }
:root[data-app-style="rs"] .tool-color .home-tool-version,
:root[data-app-style="rs"] .tool-logo .home-tool-version,
:root[data-app-style="rs"] .tool-studio .home-tool-version { color: #ffffff; }

/* Inline-SVG icon (Copy Crafter) — no PNG mask asset; renders black on the band. */
.home-tool-icon.is-svg {
  background: none;
  -webkit-mask: none;
  mask: none;
  display: grid;
  place-items: center;
}
.home-tool-icon.is-svg svg { width: 100%; height: 100%; fill: #000000; }

.status-panel,
.placeholder-panel {
  padding: 24px;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-color);
}

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

.tool-heading h2,
.tool-heading p {
  margin: 0;
}

.tool-heading h2 {
  font-size: 32px;
  line-height: 1.05;
}

.tool-heading p {
  color: var(--fg-secondary);
}

.logo-heading-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}

.inline-model-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inline-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
}

.heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.inline-model-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.inline-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 12px;
  padding: 5px 9px;
  color: var(--fg-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Report button in the logo header (right of the Quality selector). */
.inline-report-btn {
  font-size: 12px;
  padding: 5px 14px;
  min-height: 0;
  gap: 6px;
}

.inline-report-btn .btn-svg {
  width: 16px;
  height: 16px;
}

.inline-select:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 1px;
}

.pair-bar {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 52px minmax(220px, 260px) minmax(190px, 1fr);
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  margin-bottom: 20px;
}

.slot {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 2px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 14px;
  text-align: left;
  color: var(--fg-primary);
}

/* Hover/copy overlays on the active slot. */
.slot-cue {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.slot.is-active:hover .slot-hint {
  opacity: 1;
}

.slot.is-copied .slot-hint {
  opacity: 0;
}

.slot.is-copied .slot-copied {
  opacity: 1;
}

.slot.is-active {
  border-width: 2px;
  border-color: var(--brand-color);
}

.slot span {
  grid-column: 2;
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.slot b,
.slot code {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot code {
  color: var(--fg-secondary);
  font-size: 12px;
}

.slot i {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 54px;
  height: 54px;
  border-radius: 3px;
  border: 1px solid var(--border-default);
  background: currentColor;
}

.icon-btn {
  width: 52px;
  border: 1px solid var(--border-default);
  border-radius: 3px;
  background: var(--bg-elevated);
  color: var(--fg-primary);
  font-size: 20px;
}

.ratio-panel {
  min-width: 190px;
  display: grid;
  align-content: center;
  justify-items: end;
  text-align: right;
  margin-left: auto;
  padding: 4px 10px 4px 24px;
}

.ratio-panel span {
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.ratio-panel strong {
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 1;
}

.ratio-panel p {
  margin: 0;
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.ratio-panel p.pass {
  color: var(--brand-color);
}

.ratio-panel p.fail {
  color: #e22134;
}

.wcag-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.chip,
.status-badge,
.severity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  padding: 5px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.chip em {
  font-style: normal;
  font-weight: 600;
}

.chip.pass {
  color: #267a24;
  background: #e7f5df;
  border-color: #b9dfa6;
}

.chip.fail {
  color: var(--fg-tertiary);
  background: var(--neutral-50);
}

.color-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.specimens {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.specimen {
  background: transparent;
}

.specimen h3 {
  margin: 8px 0 0;
  color: var(--fg-primary);
  font-size: 16px;
  line-height: 1.2;
}

.sample-stage {
  position: relative;
  container-type: inline-size;
  min-height: clamp(420px, 52cqw, 610px);
  background: var(--live-bg);
  color: var(--live-fg);
  font-family: var(--font-spotify);
  padding: clamp(30px, 5cqw, 64px);
  border-radius: var(--radius);
  overflow: hidden;
}

.stage-digital-banner {
  --banner-window-x: 73.8021%;
  --banner-window-y: 50.1389%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--live-bg);
  isolation: isolate;
}

.banner-picture,
.banner-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.banner-picture {
  z-index: 0;
  inset: auto;
  top: var(--banner-window-y);
  left: var(--banner-window-x);
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
}

[data-specimen-photo].just-updated {
  animation: banner-photo-in 0.5s ease;
}

@keyframes banner-photo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-specimen-photo].just-updated {
    animation: none;
  }
}

.specimen-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* Specimen name row + its download button. */
.specimen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.specimen-head h3 {
  margin: 0;
}

/* Divider + photo controls between the logo specimen and the specimen columns. */
.specimen-divider {
  border: 0;
  height: 1px;
  margin: 24px 0 18px;
  background: var(--border-default);
}

.specimen-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}

/* The extra specimens share a three-column row below the logo specimen.
   The whole row is also the shared-photo drop target. */
.specimen-row {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: start;
  margin-top: 20px;
}

/* Drag-over: green overlay + label across the row (same style as the logo checker). */
.specimen-row.is-dragover::after {
  content: attr(data-drop-label);
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(30, 215, 96, 0.8);
  color: var(--tool-text);
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  pointer-events: none;
}

.specimen-row > .specimen {
  flex: 1;
  min-width: 0;
}

.stage-ig,
.stage-square,
.stage-ooh,
.stage-logo {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--live-bg);
  isolation: isolate;
}

.stage-ig {
  aspect-ratio: 1080 / 1920;
}

.stage-square {
  aspect-ratio: 1 / 1;
}

/* OOH poster mockup (705x960 native): uploaded photo sits in the poster's
   transparent window (sized/positioned by JS #sizeOoh), bg/content are tinted
   masks, and the street photo (with a translucent poster gloss) sits on top. */
.stage-ooh {
  aspect-ratio: 705 / 960;
}

.stage-ooh .specimen-photo {
  object-fit: cover;
}

/* Logo specimen: Spotify full logo (FG tint), 320px wide, centered in a 1920x1080 frame. */
.stage-logo {
  aspect-ratio: 1920 / 1080;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Banner + square stack in one column next to the IG specimen. */
.specimen-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.specimen-photo {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}

/* Square: anchor the photo's center ~760px down (of 1080). */
.stage-square .specimen-photo {
  top: 70.37%;
}

/* Instagram story: photo fills a 1000x950 cover box centered 740px down (of
   1080x1920). The box size/position is set in real px by JS (#sizeIg). */
.stage-ig .specimen-photo {
  object-fit: cover;
}

.layer-bg,
.layer-content,
.layer-ui {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.layer-bg {
  z-index: 1;
  background: var(--live-bg);
}

.layer-content {
  z-index: 2;
  background: var(--live-fg);
}

.layer-ui {
  z-index: 3;
  object-fit: cover;
}

.banner-layer {
  background: currentColor;
  pointer-events: none;
}

/* Smooth 0.6s crossfade when the checked color pair changes (specimen preview,
   inherited specimen text, and the two slot swatches). */
.sample-stage,
.sample-stage *,
#bg-swatch,
#fg-swatch {
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease, fill 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sample-stage,
  .sample-stage *,
  #bg-swatch,
  #fg-swatch {
    transition-duration: 0.01ms;
  }
}

.fail-flag {
  display: none;
  position: absolute;
  z-index: 20;
  right: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 5px 8px;
  border-radius: 3px;
  background: #ff4834;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.sample-stage.is-low-contrast .fail-flag {
  display: inline-flex;
}

.palette-panel {
  max-height: calc(100vh - 214px);
  overflow: auto;
  padding: 16px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

.palette-panel::-webkit-scrollbar {
  width: 10px;
}

.palette-panel::-webkit-scrollbar-track {
  background: transparent;
}

.palette-panel::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.palette-panel::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-thumb-hover);
}

.palette-head {
  position: sticky;
  top: -16px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -16px -18px 16px;
  padding: 16px 18px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-default);
}

.palette-head input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  background: var(--bg-elevated);
  color: var(--fg-primary);
  border: 1px solid var(--border-default);
  border-radius: 3px;
  padding: 8px 10px;
}

.palette-panel h3 {
  margin: 18px 0 8px;
  font-size: 13px;
}

.pairing-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pairing-preset {
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background: var(--neutral-50);
  padding: 8px;
  color: var(--fg-primary);
  text-align: left;
}

.pairing-preset:hover,
.pairing-preset:focus-visible {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}

.pairing-preset:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 1px;
}

.pairing-preset.is-selected {
  border-color: var(--brand-color);
  box-shadow: inset 0 0 0 1px var(--brand-color);
}

.pairing-dots {
  position: relative;
  display: block;
  width: 74px;
  height: 42px;
}

.pairing-dots i {
  position: absolute;
  top: 1px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.pairing-dots i:first-child {
  left: 0;
}

.pairing-dots i:last-child {
  left: 32px;
}

.pairing-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 8px;
  align-items: baseline;
}

.pairing-meta b,
.pairing-meta code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pairing-meta b {
  font-size: 11px;
  line-height: 1.2;
}

.pairing-meta code {
  color: var(--fg-tertiary);
  font-size: 10px;
}

/* Palette tabs (Focused / Refined / Modular / Tonal). */
.palette-tabs {
  position: relative;
  display: flex;
  gap: 4px;
  margin: 16px 0 12px;
  border-bottom: 1px solid var(--border-default);
}

/* Sliding green indicator: JS sets left/width to the active tab (#movePaletteTabIndicator). */
.palette-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-color);
  transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1), width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.palette-tab {
  flex: 1;
  min-width: 0;
  margin-bottom: -1px;
  padding: 8px 4px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-tertiary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.palette-tab.is-active {
  color: var(--fg-primary);
}

.palette-tab-panel[hidden] {
  display: none;
}

.palette-hint {
  margin: 0 0 10px;
  color: var(--fg-tertiary);
  font-size: 12px;
}

.refined-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
  gap: 5px;
}

.refined-grid .swatch {
  min-height: 0;
  aspect-ratio: 1;
  border-radius: 50%;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
}

/* Enhanced design system — gradient swatch picker (tall pills). */
.enhanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
}

.enhanced-swatch {
  min-height: 56px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  cursor: pointer;
}

.enhanced-swatch.is-selected {
  outline: 2px solid var(--fg-primary, #111);
  outline-offset: 1px;
}

.palette-matrix {
  display: grid;
  gap: 8px;
}

.palette-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.palette-row-label {
  color: var(--fg-secondary);
  font-size: 12px;
  font-weight: 700;
}

.palette-row-swatches {
  display: grid;
  grid-template-columns: repeat(8, minmax(24px, 1fr));
  gap: 4px;
}

.swatch {
  min-height: 30px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

.swatch.is-selected::after {
  content: attr(data-role);
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.swatch.empty {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.decision-tree {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

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

.decision-head h3,
.decision-question h4,
.decision-result h4,
.decision-question p,
.decision-result p {
  margin: 0;
}

.decision-kicker {
  display: block;
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.decision-head h3 {
  font-size: 18px;
  line-height: 1.2;
}

.decision-reset {
  flex: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding: 1px 0;
  background: transparent;
  color: var(--fg-secondary);
  font-size: 12px;
  font-weight: 700;
}

.decision-path {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.decision-path span {
  max-width: 100%;
  overflow-wrap: anywhere;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--neutral-50);
  color: var(--fg-secondary);
  font-size: 11px;
  font-weight: 700;
}

.decision-question {
  display: grid;
  gap: 4px;
}

.decision-question h4,
.decision-result h4 {
  font-size: 20px;
  line-height: 1.18;
}

.decision-question p,
.decision-result p,
.decision-result li {
  color: var(--fg-secondary);
  font-size: 13px;
}

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

.decision-options button {
  min-height: 112px;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  padding: 12px;
  background: var(--neutral-50);
  color: var(--fg-primary);
  text-align: left;
}

.decision-options button:hover,
.decision-options button:focus-visible {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}

.decision-options button:focus-visible,
.decision-reset:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

.decision-options strong {
  font-size: 13px;
  line-height: 1.2;
}

.decision-options span {
  color: var(--fg-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.decision-result {
  display: grid;
  gap: 10px;
  border-left: 3px solid var(--border-strong);
  padding: 4px 0 4px 14px;
}

.decision-result ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.logo-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  /* Fill the viewport (min 800px). The upload panel stretches to this height
     and the report sidebar scrolls within it. */
  height: max(800px, calc(100vh - 200px));
}

.upload-panel,
.report-panel {
  padding: 16px;
}

/* Left panel fills the height; the creative preview grows to take the slack
   while the upload controls stay pinned below it. */
.upload-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.report-panel {
  overflow-y: auto;
  min-height: 0;
}

.upload-zone {
  width: 100%;
  min-height: 150px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--neutral-50);
  color: var(--fg-secondary);
  text-align: center;
  padding: 20px;
}

/* file-arrow-up glyph above the grouped copy */
.upload-icon {
  width: 32px;
  height: 32px;
  color: #ffffff;
  flex: none;
}

/* keep the text lines as one tight group, centered in the area */
.upload-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.logo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* Digital / Print segmented toggle, left of the run button. */
.profile-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--neutral-100);
  border: 1px solid var(--border-default);
}

.profile-opt {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 16px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  color: var(--fg-tertiary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.profile-opt:hover:not(.is-active) { color: var(--fg-secondary); }

.profile-opt.is-active {
  background: #1ED760;
  color: #000000;
}

/* A selected "Off" reads as disabled — light grey, not green. */
.profile-opt.is-active[data-tool-value="off"] {
  background: #b3b3b3;
}

/* Settings → Tool availability: a labelled On/Off row per tool. */
.tool-toggle-list {
  display: grid;
  gap: 8px;
  margin: 4px 0 6px;
}

.tool-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tool-toggle-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-primary);
}

/* Color-proof recommendation shown when a Print file is analyzed. */
.print-note {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--rs-orange-soft, rgba(255, 180, 80, 0.12));
  border: 1px solid var(--border-default);
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-secondary);
}

.upload-zone strong,
.upload-zone b {
  color: var(--fg-primary);
}

.creative-preview {
  position: relative;
  min-height: 320px;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  /* no padding: the 30px breathing room is handled by the fit-to-view zoom */
  padding: 0;
  background: var(--neutral-100);
  border-radius: var(--radius);
  overflow: hidden;
  /* contains the panning of a zoomed-in creative; the cursor signals grab */
  touch-action: none;
  color: var(--fg-tertiary);
}

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

.creative-preview.is-dragging::after {
  content: attr(data-replace-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(30, 215, 96, 0.8);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  pointer-events: none;
}

.creative-meta {
  margin: 12px 0 0;
}

.creative-meta[hidden] {
  display: none;
}

.creative-meta-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 3px;
}

.creative-meta-box b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--fg-primary);
}

.creative-meta-box span {
  font-size: 11px;
  color: var(--fg-tertiary);
}

/* Verdict pill: tone-colored background with white, bold text + a state icon. */
.status-badge.verdict-pass {
  background: var(--brand-color);
  border-color: var(--brand-color);
  color: #ffffff;
  font-weight: 700;
}

.status-badge.verdict-fail {
  background: #e22134;
  border-color: #e22134;
  color: #ffffff;
  font-weight: 700;
}

.status-badge.verdict-warn {
  background: #f0b429;
  border-color: #f0b429;
  color: #ffffff;
  font-weight: 700;
}

.verdict-icon {
  font-style: normal;
  line-height: 1;
}

/* Drop zone (empty state): same green overlay + message on drag-over. */
.upload-zone {
  position: relative;
}

.upload-zone.is-dragging::after {
  content: attr(data-drop-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(30, 215, 96, 0.8);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  pointer-events: none;
}

/* Analyzing: a 20% black overlay + a gradient ring spinner that rises to center. */
.creative-preview.is-analyzing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.analyzing-spinner-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: spinner-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.analyzing-spinner {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  /* Black for two-thirds, then fading up to a sharp Spotify-green edge. */
  background: conic-gradient(from 0deg, #000000, #000000 66.67%, #1ed760);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: ring-spin 1s linear infinite;
}

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

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

/* Result cards ease in from the right, staggered via inline animation-delay. */
.card-enter {
  animation: card-enter 0.4s ease both;
}

@keyframes card-enter {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .analyzing-spinner-wrap,
  .card-enter {
    animation: none;
  }
}

.creative-preview img {
  display: block;
  /* fills the frame, which JS lays out at the fitted size */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  /* drag pans the view — never start a native image drag or text selection */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.rule-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 14px 0;
  list-style: none;
}

.report-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 14px 0 20px;
  list-style: none;
}

.report-empty {
  padding: 12px;
  border: 1px dashed var(--border-default);
  border-radius: 3px;
  color: var(--fg-tertiary);
}

.report-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px;
  background: var(--neutral-50);
  border: 1px solid var(--border-default);
  border-radius: 3px;
}

.report-item b,
.report-item p,
.logo-overall p {
  margin: 0;
}

.report-item p,
.logo-overall p {
  color: var(--fg-secondary);
  font-size: 13px;
}

.logo-overall {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 14px;
}

.run-meta {
  margin: 0;
  font-size: 12px;
  color: var(--fg-tertiary);
}

.run-meta b {
  color: var(--fg-secondary);
  font-weight: 700;
}

.log-list {
  overflow-x: auto;
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.log-table th,
.log-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.log-table th {
  font-weight: 700;
  color: var(--fg-secondary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.log-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Reports: rows with an archived report open it on click.
   Hover inverts the row (white bg, black text) with the same fade as the CTAs. */
.log-table tr.log-row-open {
  cursor: pointer;
}

.log-table tr.log-row-open td {
  transition: background-color 0.18s ease, color 0.18s ease;
}

.log-table tr.log-row-open:hover td {
  background: #ffffff;
  color: #000000;
}

.log-open-link {
  color: var(--fg-secondary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.18s ease;
}

/* Per-row delete (trash) button — removes the entry + its archived report. */
.log-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--fg-tertiary);
  cursor: pointer;
  transition: color 0.18s ease;
}

.log-delete-btn svg {
  width: 16px;
  height: 16px;
}

.log-delete-btn:hover,
.log-delete-btn:focus-visible {
  color: #e03131;
  outline: none;
}

.log-table tr.log-row-open:hover .log-delete-btn {
  color: #000000;
}

.log-table tr.log-row-open:hover .log-delete-btn:hover {
  color: #e03131;
}

/* "Don't archive this run" toggle in the logo header. */
.no-archive-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.no-archive-toggle input {
  margin: 0;
  accent-color: var(--brand-color);
  cursor: pointer;
}

.log-table tr.log-row-open:hover .log-open-link {
  color: #000000;
}

/* --- Templates: data-driven parts gallery --- */
.template-category {
  margin-top: 28px;
}

.template-category h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.template-card {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.template-preview {
  background: #888888; /* neutral gray: white and black art both stay visible */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  min-height: 120px;
}

.template-preview img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
}

.template-info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-info h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-download {
  font-size: 12px;
  padding: 6px 10px;
  text-decoration: none;
}

.template-coming-soon {
  color: var(--fg-secondary);
  border: 1px dashed var(--border-default);
  border-radius: 10px;
  padding: 18px;
  margin: 0;
}

/* --- Printable one-page PDF report (black text; only images keep color) --- */
.print-report {
  display: none;
}

/* Printable logo report layout. Inert on screen (#print-report stays
   display:none); applied when printing AND during the off-screen measure pass
   that positions the green leader lines. */
.print-header {
  border-bottom: 1.5px solid #000;
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.print-bug {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 0 6px;
}

.print-header h1 {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 700;
}

.print-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 10px;
}

.print-meta span {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 5px;
}

.print-body {
  position: relative;
  display: flex;
  gap: 8mm;
  align-items: flex-start;
}

.print-image {
  flex: 1.4 1 0;
  min-width: 0;
}

.print-image img {
  width: 100%;
  height: auto;
  max-height: 235mm;
  object-fit: contain;
  border: 1px solid #000;
}

/* Analysis verdict, shown large below the image. */
.print-verdict-big {
  margin: 10px 0 0;
  font-size: 22px;
  font-weight: 800;
}

.print-issues {
  flex: 1 1 0;
  min-width: 0;
  font-size: 10px;
}

.print-issues h2 {
  margin: 0 0 8px;
  font-size: 13px;
}

.print-logo {
  margin: 0 0 6px;
}

.print-logo-title {
  margin: 12px 0 6px;
  font-size: 15px;
  font-weight: 800;
}

.print-issue {
  border: 1px solid #000;
  border-radius: 3px;
  padding: 7px 9px;
  margin-bottom: 7px;
  break-inside: avoid;
}

.print-issue-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.print-sev {
  border: 1px solid #000;
  border-radius: 2px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.print-code {
  font-weight: 700;
  font-size: 10px;
}

.print-issue p {
  margin: 3px 0;
}

.print-fix {
  font-weight: 600;
}

.print-diagram {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 5px;
  border: 1px solid #000;
}

/* Green leader lines from each logo on the creative to its issue title. */
.print-leaders {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.print-leaders line {
  stroke: #1ED760;
  stroke-width: 2;
  stroke-linecap: round;
}

@media print {
  body > *:not(#print-report) { display: none !important; }

  .print-report {
    display: block !important;
    font-family: var(--font-sans);
    /* 5% gutter on all edges, controlled here so it holds even if the print
       dialog's margin is set to None. */
    box-sizing: border-box;
    padding: 5%;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }

  .print-report,
  .print-report * {
    color: #000 !important;
    border-color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Copy Crafter review report (PDF) — black text + lines only. */
  .cprint-brief { font-size: 10px; margin: 6px 0 0; }
  .cprint-cards { margin-top: 12px; }
  .cprint-card { border: 1px solid #000; padding: 12px 14px; margin: 0 0 12px; page-break-inside: avoid; }
  .cprint-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
  .cprint-jp .cc-lat { font-family: "Spotify Mix CB", sans-serif; font-weight: 400; font-size: 1.08em; }
  .cprint-card .copy-sub { font-size: 13px; margin: 4px 0 0; }
  .cprint-card .copy-cta { font-size: 12px; font-weight: 700; margin: 5px 0 0; }
  .cprint-verdict { border: 1px solid #000; padding: 3px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
  .cprint-bt { width: 100%; border-collapse: collapse; margin: 10px 0 0; font-size: 11px; }
  .cprint-bt th { text-align: left; width: 78px; vertical-align: top; padding: 2px 8px 2px 0; font-weight: 700; }
  .cprint-bt td { padding: 2px 0; vertical-align: top; }
  .cprint-scores { font-size: 10px; margin: 9px 0 0; border-top: 1px solid #000; padding-top: 6px; }
}

/* Analyzer "scanning" indicator: a Spotify-green light sweeping left/right
   with easing at each end, Knight Rider style. Shown while analysis runs. */
.scan-line {
  position: relative;
  height: 3px;
  width: 100%;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--border-default);
  overflow: hidden;
}

.scan-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 26%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(30, 215, 96, 0) 0%, #1ED760 50%, rgba(30, 215, 96, 0) 100%);
  box-shadow: 0 0 10px 1px rgba(30, 215, 96, 0.75);
  animation: scan-sweep 1.3s ease-in-out infinite alternate;
}

@keyframes scan-sweep {
  from { transform: translateX(0%); }
  to { transform: translateX(285%); }
}

@media (prefers-reduced-motion: reduce) {
  .scan-line::after {
    width: 100%;
    transform: none;
    animation: scan-pulse 1.6s ease-in-out infinite;
  }
  @keyframes scan-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
  }
}

.rule-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

/* Analyzer results: detection + violation cards on the report panel. */
.result-section {
  margin-top: 16px;
}

.result-section > h3 {
  margin: 0 0 10px;
}

.violations-list,
.detections-list {
  display: grid;
  gap: 12px;
}

.violation {
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--bg-base);
  padding: 12px;
}

.violation .row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

/* Top-right per-violation checkbox: on = printed in the PDF report. */
.violation .pdf-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-secondary);
  cursor: pointer;
  user-select: none;
}

.violation .pdf-toggle input {
  margin: 0;
  accent-color: var(--brand-color);
  cursor: pointer;
}

.violation .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--fg-tertiary);
}

.violation .desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-secondary); /* grey: the issue explanation */
  margin: 0;
}

.violation .fix {
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-primary); /* the fix text itself (white in the dark theme) */
  margin: 6px 0 0;
}

.violation .fix .fix-label {
  color: #1ED760; /* "推奨修正:" label in Spotify green */
}

.violation .rule {
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-tertiary);
  font-style: italic;
  margin: 6px 0 0;
}

.rule-diagram {
  margin: 10px 0 0;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-surface);
}

.rule-diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.violation .swatches {
  margin-top: 10px;
}

.swatches-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 6px;
}

.swatches-row {
  display: flex;
  gap: 8px;
}

.swatches-row .swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.swatches-row .chip {
  height: 30px;
  border-radius: 3px;
  border: 1px solid var(--border-default);
}

.sw-hex {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--fg-secondary);
  text-align: center;
}

.detection {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--bg-base);
  padding: 12px;
}

.det-thumb {
  border: 1px solid var(--border-default);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.det-thumb.is-empty {
  display: none;
}

.det-thumb canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.det-kv {
  display: grid;
  gap: 6px;
}

.kv {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.kv .k {
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.kv .v {
  font-size: 13px;
  color: var(--fg-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kv .v code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--fg-secondary);
}

.color-chip {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border-default);
  flex: none;
}

/* Bounding-box overlay drawn over the creative, linked to the result cards. */
.preview-frame {
  position: relative;
  display: inline-block;
  /* rendered at the image's natural size; the fit-to-view zoom scales it down
     (or up) so it sits in the preview with a 30px margin */
  line-height: 0;
  transform-origin: center center;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}

/* Zoom + pan controls pinned to the creative preview (above the spinner). */
.zoom-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}

.zoom-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease;
}

.zoom-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
.zoom-btn:disabled { opacity: 0.35; cursor: default; }
.zoom-reset { font-size: 14px; }

.zoom-level {
  min-width: 46px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* Per-logo result group: the detection card + its own issues, grouped. */
.logo-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-default);
}

.logo-group:first-child {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.logo-group > .group-title {
  /* ~50% larger than the old 13px, and bold */
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--fg-primary);
}

.group-violations {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.group-clean {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--fg-tertiary);
}

.image-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.obox {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 2px;
  transition: opacity 0.12s ease, box-shadow 0.12s ease;
}

.obox-detection {
  border: 2px solid #1ED760;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.obox-violation {
  border: 2px dashed #E81B00;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.obox:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.image-overlay.has-active .obox {
  opacity: 0.2;
}

.image-overlay.has-active .obox.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px #ffffff, 0 0 10px 3px rgba(0, 0, 0, 0.45);
}

.obox-clearspace {
  border: 1.5px dashed rgba(30, 215, 96, 0.7);
  background: rgba(30, 215, 96, 0.09);
  border-radius: 3px;
  pointer-events: none;
  cursor: default;
}

.image-overlay.has-active .obox-clearspace.is-active {
  opacity: 1;
  background: rgba(30, 215, 96, 0.16);
  border-color: #1ED760;
  box-shadow: none;
}

.detection.is-active,
.violation.is-active {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px var(--border-strong);
}

/* Solid warning markers (black icon + label on a saturated fill). */
.severity.critical { color: #000; background: #ff3b30; border-color: transparent; }
.severity.major { color: #000; background: #ffc04d; border-color: transparent; }
.severity.verify { color: #000; background: #8fd7f2; border-color: transparent; }
.severity.minor { color: #585654; background: #efeae2; border-color: #cbc8c2; }
.severity.pass { color: #267a24; background: #e7f5df; border-color: #b9dfa6; }

.severity .sev-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Hover connector line: marked region on the creative → its sidebar card. */
#highlight-leader {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  display: none;
}

.leader-line {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.75));
}

.guideline-rule-grid {
  display: grid;
  /* Cards up to 480px wide; as many columns as fit, capped at 3. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 480px));
  gap: 16px;
  margin-top: 18px;
  max-width: 1472px; /* 3 x 480 + 2 x 16px gap */
}

.guideline-card {
  border: 1px solid var(--border-default);
  border-radius: 3px;
  background: var(--neutral-50);
  padding: 14px;
}

.guideline-diagram {
  margin: 0 0 12px;
}

.guideline-diagram img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  border-radius: 3px;
  background: var(--neutral-0);
}

.guideline-card h3,
.guideline-card p,
.guideline-details dd {
  margin: 0;
}

.guideline-head {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.guideline-details {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.guideline-details dt {
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.guideline-details dd,
.guideline-card p {
  color: var(--fg-secondary);
  font-size: 13px;
}

.settings-grid dl {
  display: grid;
  gap: 12px;
}

.reports-summary {
  margin-top: 18px;
}

.report-summary-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.report-summary-list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border-default);
}

.report-summary-list dt {
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.report-summary-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.settings-grid div {
  display: grid;
  gap: 3px;
}

.settings-grid dt {
  color: var(--fg-tertiary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.settings-grid dd {
  margin: 0;
}

.settings-grid .settings-section {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--border-default);
  gap: 14px;
}

.settings-section h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--fg-primary);
}

.settings-grid .settings-field {
  gap: 6px;
}

.settings-field label,
.settings-field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-secondary);
}

.settings-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  max-width: 420px;
  padding: 9px 12px;
  font: inherit;
  color: var(--fg-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

.settings-select:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 1px;
}

/* Custom dropdown caret — the selects use appearance:none, so add a chevron that
   signals it's a dropdown. (Placed after the select rules so the background-image
   longhand wins over their `background` shorthand.) */
.inline-select,
.settings-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239b9b9b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.inline-select {
  background-position: right 9px center;
  padding-right: 26px;
}

.settings-select {
  background-position: right 13px center;
  padding-right: 34px;
}

/* Analyzer status badge sits at the right of the Run analyzer / Clear row. */
.logo-actions .status-badge {
  margin-left: auto;
}

.status-badge.is-offline .status-dot {
  background: #e22134;
}

/* Specimen lightbox: click a specimen to view it large + download. */
.sample-stage {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 56px 64px 24px;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

.lightbox-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5);
  transform: scale(0.97);
  transition: transform 0.3s ease;
}

.lightbox.is-open .lightbox-stage img {
  transform: scale(1);
}

/* Directional slide when stepping between specimens. */
.lightbox-stage img.slide-next {
  animation: lb-slide-next 0.32s ease;
}

.lightbox-stage img.slide-prev {
  animation: lb-slide-prev 0.32s ease;
}

@keyframes lb-slide-next {
  from { opacity: 0.25; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes lb-slide-prev {
  from { opacity: 0.25; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-stage img {
    transition: none;
  }
  .lightbox-stage img.slide-next,
  .lightbox-stage img.slide-prev {
    animation: none;
  }
}

/* Fix Direction modal — reuses the .lightbox overlay + nav. */
.fix-panel {
  display: flex;
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 1120px;
  max-height: 100%;
  min-height: 0;
}

.fix-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  overflow: hidden;
}

.fix-stage img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5);
}

.fix-working {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.fix-working .analyzing-spinner-wrap { position: static; }
.fix-working-label { color: #fff; font-size: 14px; }

.fix-side {
  flex: 0 0 300px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  overflow-y: auto;
}

.fix-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fix-side-head h3 { margin: 0; font-size: 16px; }
.fix-counter { color: rgba(255, 255, 255, 0.7); font-size: 12px; font-variant-numeric: tabular-nums; }

.fix-instructions {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.fix-error { margin: 0; color: #ff9e95; font-size: 13px; }
.fix-note { margin: auto 0 0; color: rgba(255, 255, 255, 0.55); font-size: 11px; line-height: 1.5; }
.fix-actions { display: flex; gap: 8px; }

@media (max-width: 760px) {
  .fix-panel { flex-direction: column; }
  .fix-side { flex: 0 0 auto; max-width: none; }
  .fix-stage img { max-height: 50vh; }
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  background: none;
  border: 0;
  color: var(--tool-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--tool-text);
  font-size: 48px;
  line-height: 1;
  padding: 12px 16px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

.lightbox-close:hover,
.lightbox-nav:hover {
  opacity: 1;
}

.lightbox-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: none;
}

.lightbox-foot .btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--tool-text);
}

.lightbox-foot .btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Per-specimen image framing controls (zoom + pan) inside the campaign lightbox. */
.cb-adjust {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
}
.cb-adjust[hidden] { display: none; }
.cb-adjust-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.cb-adjust-btn:hover { background: rgba(255, 255, 255, 0.22); }
.cb-adjust-btn:active { background: rgba(255, 255, 255, 0.34); }
.cb-adjust-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 2px;
}

/* Template lightbox footer: name on the left, download button on the right. */
.tpl-lightbox-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: min(1100px, 92vw);
}

.tpl-lightbox-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-lightbox-foot .btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.tpl-lightbox-foot .btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-thumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.lightbox-thumb {
  display: block;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  line-height: 0;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lightbox-thumb img {
  height: 54px;
  width: auto;
  display: block;
}

.lightbox-thumb:hover {
  opacity: 0.9;
}

.lightbox-thumb.is-active {
  opacity: 1;
  border-color: var(--brand-color);
}

/* --- Settings page (key + model, mockup layout) --- */
.settings-page {
  display: block;
  max-width: 1000px;
}

.settings-page h2 {
  margin: 0 0 4px;
}

/* Two columns: everything on the left, the API keys on the right. */
.settings-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 60px;
  align-items: start;
  margin-top: 8px;
}

.settings-col {
  min-width: 0;
}

.settings-col > .settings-eyebrow:first-child {
  margin-top: 4px;
}

@media (max-width: 860px) {
  .settings-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.settings-eyebrow {
  margin: 26px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.settings-desc {
  margin: 0 0 12px;
  color: var(--fg-secondary);
  line-height: 1.5;
}

.settings-desc a {
  color: var(--rs-gunjo);
}

.settings-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

.settings-input:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 1px;
}

.settings-key-status {
  margin-top: 8px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}
.settings-key-status.is-warn {
  color: #e0245e;
  border-color: rgba(224, 36, 94, 0.4);
  background: rgba(224, 36, 94, 0.08);
}

.settings-page .settings-select {
  max-width: none;
}

.settings-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--fg-tertiary);
  line-height: 1.5;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
}

.settings-help {
  margin: 0;
  font-size: 12px;
  color: var(--fg-tertiary);
  max-width: 560px;
}

.settings-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: var(--fg-secondary);
  max-width: 560px;
}

.settings-status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1ED760;
}

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

  .sidebar {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }

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

  .nav-label {
    display: none;
  }

  .color-workspace,
  .logo-workspace,
  .overview-grid,
  .home-tools,
  .guideline-rule-grid,
  .decision-options {
    grid-template-columns: 1fr;
  }

  /* Stacked layout: drop the fixed height so panels flow naturally. */
  .logo-workspace {
    height: auto;
  }

  .report-panel {
    overflow-y: visible;
  }

  .creative-preview {
    min-height: 60vh;
  }

  .palette-panel {
    max-height: none;
  }
}

@media (max-width: 1320px) {
  .pair-bar,
  .color-workspace {
    grid-template-columns: 1fr;
  }

  .ratio-panel {
    margin-left: 0;
    padding-left: 10px;
  }

  .wcag-chips {
    justify-content: flex-start;
  }

  .palette-panel {
    max-height: 520px;
  }
}

@media (max-width: 720px) {
  .topbar,
  .tool-heading,
  .top-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .content {
    padding: 16px;
  }

  .hero-panel h2 {
    font-size: 34px;
  }

  .hero-panel h2.hero-hub-title {
    font-size: 48px;
  }

  .specimens,
  .nav,
  .pairing-presets,
  .creative-meta {
    grid-template-columns: 1fr;
  }

  .ratio-panel {
    margin-left: 0;
  }

  .decision-head {
    flex-direction: column;
  }

  .decision-options button {
    min-height: auto;
  }
}

.campaign-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campaign-field-label {
  display: block;
  margin: 12px 0 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
}

.campaign-field {
  display: block;
  min-width: 0;
}

#campaign-cta {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font: 12px/1.4 var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

.campaign-select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
}

.campaign-main {
  min-width: 0;
  position: relative;
}

/* Drag-over: green overlay + label across the specimen panel (same treatment as
   the Color Checker specimen row). */
.campaign-main.is-dragover::after {
  content: attr(data-drop-label);
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(30, 215, 96, 0.8);
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  pointer-events: none;
}

/* Save / load dialogs */
.campaign-dialog {
  width: min(420px, 92vw);
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--fg-primary);
}

.campaign-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.campaign-dialog h3 {
  margin: 0;
  font-size: 15px;
}

#campaign-name-dialog {
  padding: 20px;
}

#campaign-name-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 9px 10px;
  font: 13px/1.4 var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

.campaign-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.campaign-saves-list {
  max-height: 60vh;
  overflow: auto;
  padding: 8px;
}

.campaign-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--fg-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.campaign-save-row:hover {
  background: var(--bg-surface);
}

.campaign-save-row b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

.campaign-save-row time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-tertiary);
}

.campaign-save-del {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--fg-tertiary);
  cursor: pointer;
}

.campaign-save-del:hover {
  color: var(--fg-primary);
  background: var(--bg-surface);
}

.campaign-saves-empty {
  padding: 24px 16px;
  font-size: 12px;
  color: var(--fg-tertiary);
  text-align: center;
}

/* ============================================================
   Banner Template editor (admin)
   ============================================================ */
.bannertpl-status {
  font-size: 12px;
  color: var(--fg-tertiary);
}

.bannertpl-status.is-error {
  color: var(--rs-shuiro);
}

.tpl-workspace {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tpl-list-col {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 14px;
}

.tpl-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tpl-list-head h3 {
  margin: 0;
  font-size: 14px;
}

.btn-small {
  padding: 5px 10px;
  font-size: 12px;
}

/* Four design systems don't fit one segmented row in the narrow sidebar — lay
   them out as a 2×2 grid of pills so Modular is always visible. */
.tpl-system-filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  margin-bottom: 10px;
}

.tpl-system-filter button {
  flex: none;
  font-size: 12px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg-secondary);
  font-weight: 700;
  cursor: pointer;
}

.tpl-system-filter button:not(.is-active):hover {
  border-color: var(--fg-tertiary);
  color: var(--fg-primary);
}

/* Selected design system reads white (not the segmented default green). */
.tpl-system-filter button.is-active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.tpl-list {
  display: grid;
  gap: 4px;
}

.tpl-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--fg-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tpl-list-item:hover {
  background: var(--bg-surface);
}

.tpl-list-item.is-active {
  border-color: var(--brand-color);
  background: var(--bg-surface);
}

.tpl-list-item b {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-list-item span {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-tertiary);
}

.tpl-edit-col {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 16px 18px;
  min-width: 0;
}

.tpl-empty {
  color: var(--fg-tertiary);
  font-size: 13px;
  padding: 40px 0;
  text-align: center;
}

.tpl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-default);
}

.tpl-meta-name { flex: 1 1 160px; }
.tpl-meta-dim { width: 84px; }
.tpl-meta-copy { width: 130px; }

.tpl-meta input,
.tpl-meta select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font: 13px/1.4 var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

.tpl-meta-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.tpl-delete {
  color: var(--rs-shuiro);
}

.tpl-edit-body {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 20px;
  margin-top: 16px;
  align-items: start;
}

.tpl-stage-wrap {
  min-width: 0;
}

.tpl-stage-toolbar {
  display: flex;
  margin-bottom: 8px;
}

/* Template editor as a Color-Checker-style workspace: full-bleed pannable
   canvas + chrome sidebar; the stage lives on a zoomable world. */
.tpl-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.tpl-body .tpl-side { flex: 0 0 var(--tpl-side-w, 320px); max-width: 640px; }

/* Figma-style segmented alignment control + pixel gap inputs (headline card). */
.tpl-seg-row { display: flex; gap: 10px; margin: 2px 0 10px; }
.tpl-seg-row.is-disabled { opacity: 0.45; pointer-events: none; }
.tpl-seg-group { display: inline-flex; gap: 2px; background: var(--neutral-100); border-radius: 8px; padding: 3px; }
.tpl-seg-btn {
  display: grid; place-items: center; width: 30px; height: 26px; border: none; border-radius: 6px;
  background: transparent; color: var(--fg-tertiary); cursor: pointer;
}
.tpl-seg-btn svg { width: 14px; height: 14px; }
.tpl-seg-btn:hover { color: var(--fg-primary); }
.tpl-seg-btn.is-active { background: var(--bg-elevated); color: var(--fg-primary); box-shadow: var(--shadow-1); }
.tpl-gap-input { display: flex; align-items: center; gap: 6px; }
.tpl-gap-input svg { flex: none; width: 14px; height: 14px; color: var(--fg-tertiary); }
.tpl-gap-input input { min-width: 0; }
.tpl-body .tpl-side-resizer { flex: 0 0 6px; align-self: stretch; }
.color-topbar .tpl-name { color: var(--tool-text); }
.color-topbar .bannertpl-status { color: var(--tool-text-dim); }
.color-side .tpl-stage-hint { margin: 0; font-size: 11px; color: var(--tool-text-dim); }

/* The editor stage: scaled banner canvas + draggable slot overlays. */
.tpl-stage {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 4px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.tpl-canvas-host,
.tpl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tpl-stage-hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--fg-tertiary);
  max-width: 380px;
}

/* Overlay chrome divides out the viewport zoom (--tpl-ui-scale = 1/zoom, set by
   applyTplView) so guide borders, labels and handles keep a constant screen size.
   The guide border lives on a counter-scaled child: laid out at 100%/scale with a
   real 1px border, then transformed back down — Chrome clamps border-widths below
   half a device pixel, so a calc()'d sub-pixel border on the overlay itself would
   paint too thick at high zoom. */
.tpl-overlay {
  position: absolute;
  box-sizing: border-box;
  background: rgba(30, 215, 96, 0.08);
  cursor: move;
  z-index: 2;
}

.tpl-guide {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / var(--tpl-ui-scale, 1));
  height: calc(100% / var(--tpl-ui-scale, 1));
  transform: scale(var(--tpl-ui-scale, 1));
  transform-origin: top left;
  box-sizing: border-box;
  border: 1px solid var(--brand-color);
  pointer-events: none;
}

.tpl-overlay-headline { background: rgba(74, 163, 255, 0.08); }
.tpl-overlay-headline .tpl-guide { border-color: #4aa3ff; }
.tpl-overlay-cta { background: rgba(245, 193, 66, 0.10); }
.tpl-overlay-cta .tpl-guide { border-color: var(--rs-yamabuki); }
.tpl-overlay-image { background: rgba(224, 112, 208, 0.08); }
.tpl-overlay-image .tpl-guide { border-style: dashed; border-color: #e070d0; }

#tpl-viewport.tpl-guides-off .tpl-overlay { display: none; }

/* Ranking Info: interactive row editor. */
.ranking-info-modal { width: min(760px, 92vw); }
.ri-toolbar { display: flex; gap: 8px; margin: 10px 0 4px; }
.ri-sections { display: flex; flex-direction: column; gap: 16px; margin: 10px 0; max-height: 55vh; overflow-y: auto; }
.ri-sec-title { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-tertiary); }
.ri-row2 { display: grid; grid-template-columns: 16px 22px 1fr 130px 130px 24px; gap: 6px; align-items: center; padding: 2px 0; }
.ri-row2.ri-colhead { font-size: 10px; color: var(--fg-tertiary); padding-bottom: 0; }
.ri-row2 input { font: inherit; font-size: 12px; padding: 6px 8px; background: var(--bg-elevated); color: var(--fg-primary); border: 1px solid var(--border-default); border-radius: 6px; min-width: 0; }
.ri-grip { display: grid; place-items: center; width: 16px; height: 26px; color: var(--fg-tertiary); opacity: 0; cursor: grab; }
.ri-grip svg { width: 8px; height: 14px; }
.ri-row2:hover .ri-grip { opacity: 1; }
.ri-row2.is-dragging { opacity: 0.45; }
.ri-pos { font-size: 11px; color: var(--fg-tertiary); text-align: right; }
.ri-del { border: none; background: transparent; color: var(--fg-tertiary); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 6px; padding: 4px; }
.ri-del:hover { color: #DC2626; background: var(--bg-elevated); }
.ri-add { border: 1px dashed var(--border-default); background: transparent; color: var(--fg-secondary); font: inherit; font-size: 11px; padding: 5px 10px; border-radius: 6px; cursor: pointer; margin-top: 4px; }
.ri-add:hover { color: var(--fg-primary); border-color: var(--fg-tertiary); }

/* Manage Design Systems modal (reuses the ranking-info dialog chrome). */
.ds-manage-modal { width: min(760px, 92vw); }
.ds-manage-list { display: flex; flex-direction: column; gap: 14px; margin: 12px 0; max-height: 55vh; overflow-y: auto; }
.ds-block { border: 1px solid var(--border-default); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ds-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--fg-tertiary); }
.ds-field input, .ds-field textarea { font: inherit; font-size: 12px; padding: 6px 8px; background: var(--bg-elevated); color: var(--fg-primary); border: 1px solid var(--border-default); border-radius: 6px; resize: vertical; }
.ds-name input { font-weight: 700; }
.ds-name-row { display: flex; align-items: flex-end; gap: 10px; }
.ds-name-row .ds-name { flex: 1; }
.ds-del { font: inherit; font-size: 11px; padding: 6px 12px; background: none; color: var(--fg-tertiary); border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer; }
.ds-del:hover { color: #c0392b; border-color: #c0392b; }
.ds-copy-label { font-size: 10px; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
/* Quick-start format toggles: checked = the format starts on for this system. */
.ds-fmt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; }
.ds-fmt { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-primary); cursor: pointer; min-width: 0; }
.ds-fmt input { accent-color: var(--brand-color); margin: 0; flex: 0 0 auto; }
.ds-fmt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-fmt small { color: var(--fg-tertiary); font-size: 11px; flex: 0 0 auto; }
.ds-copy-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ds-status { margin-right: auto; font-size: 11px; color: var(--fg-tertiary); }

/* Parametric mask controls (type / side chips + depth/curve sliders). */
.tpl-mask-label {
  display: block;
  margin: 10px 0 5px;
  font-size: 10px;
  color: var(--fg-tertiary);
}

.tpl-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tpl-chip {
  flex: 1 1 auto;
  min-width: 54px;
  padding: 7px 8px;
  font-size: 12px;
  color: var(--fg-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.tpl-chip-side { flex-basis: 0; min-width: 44px; }

.tpl-chip:hover { color: var(--fg-primary); }

.tpl-chip.is-active {
  color: var(--fg-primary);
  border-color: var(--brand-color);
  box-shadow: inset 0 0 0 1px var(--brand-color);
}

.tpl-range {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.tpl-range span {
  font-size: 11px;
  color: var(--fg-tertiary);
}

.tpl-range input[type="range"] {
  width: 100%;
  accent-color: var(--brand-color);
}

.tpl-overlay-label {
  position: absolute;
  top: -2px;
  left: -2px;
  transform: scale(var(--tpl-ui-scale, 1));
  transform-origin: top left;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
  color: #000;
  background: var(--brand-color);
  border-radius: 0 0 3px 0;
  pointer-events: none;
  white-space: nowrap;
}

.tpl-overlay-headline .tpl-overlay-label { background: #4aa3ff; color: #fff; }
.tpl-overlay-cta .tpl-overlay-label { background: var(--rs-yamabuki); }
.tpl-overlay-image .tpl-overlay-label { background: #e070d0; color: #fff; }

/* The -6px offsets center the 12px handle on the box corner; that stays true at
   any zoom, and scaling about the center keeps it there while the counter-scale
   holds its visual size (real 1.5px border avoids Chrome's sub-pixel clamp). */
.tpl-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  transform: scale(var(--tpl-ui-scale, 1));
  transform-origin: center;
  background: #fff;
  border: 1.5px solid var(--fg-primary);
  border-radius: 2px;
  cursor: nwse-resize;
  z-index: 3;
}
/* Handle sits at the corner opposite the anchored edge(s), so resizing grows the
   element away from its pinned edge. */
.tpl-overlay.is-anchor-right .tpl-handle { right: auto; left: -6px; cursor: nesw-resize; }
.tpl-overlay.is-anchor-bottom .tpl-handle { bottom: auto; top: -6px; cursor: nesw-resize; }
.tpl-overlay.is-anchor-right.is-anchor-bottom .tpl-handle { cursor: nwse-resize; }

.tpl-controls {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.tpl-slot-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.tpl-hint {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg-muted, #8a8f98);
}

.tpl-slot-card h4 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.tpl-slot-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.tpl-slot-toggle input { accent-color: var(--brand-color); }

.tpl-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--fg-secondary);
  cursor: pointer;
}

.tpl-check input { accent-color: var(--brand-color); }

.tpl-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tpl-field {
  display: grid;
  gap: 3px;
  flex: 1 1 60px;
  min-width: 56px;
}

.tpl-field span {
  font-size: 10px;
  color: var(--fg-tertiary);
}

/* A field the current layout overrides — greyed out so it's clear it won't apply. */
.tpl-field.is-disabled,
.tpl-meta-dim.is-disabled { opacity: 0.4; }
.tpl-field.is-disabled input,
.tpl-field.is-disabled select,
.tpl-meta-dim.is-disabled input { cursor: not-allowed; }

.tpl-field input,
.tpl-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font: 12px/1.3 var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}

@media (max-width: 1100px) {
  .tpl-workspace { grid-template-columns: 1fr; }
  .tpl-edit-body { grid-template-columns: 1fr; }
}

/* ============================ Copy Crafter ============================ */
.copy-brand-banner {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid var(--border-default);
}
.copy-brand-banner.is-generic { background: rgba(255, 200, 98, 0.12); color: var(--fg-secondary); }
.copy-brand-banner.is-brand { background: rgba(30, 215, 96, 0.12); color: var(--fg-secondary); }

.copy-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  list-style: none;
  padding: 14px 0 6px;
  margin: 0;
  flex-wrap: wrap;
}
.copy-step { display: flex; align-items: center; gap: 16px; }
/* Arrow between step cards. */
.copy-step + .copy-step::before {
  content: "→";
  color: var(--fg-tertiary);
  font-size: 20px;
  line-height: 1;
}
.copy-step-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 170px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--fg-primary); /* accessible: solid line in the theme's ink */
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
/* Not built yet: solid grey, no affordance. */
.copy-step.is-locked .copy-step-btn {
  background: var(--neutral-100);
  border-color: transparent;
  color: var(--fg-tertiary);
  cursor: default;
}
.copy-step-btn:disabled { cursor: default; }
.copy-step:not(.is-locked) .copy-step-btn:not(:disabled):hover { border-color: var(--brand-color); }
/* Selected: the brand color carries the card. */
.copy-step.is-active .copy-step-btn {
  border-width: 2px;
  border-color: var(--brand-color);
  color: var(--brand-color);
}
.copy-step-n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 800;
}
.copy-step.is-active .copy-step-n { background: var(--brand-color); color: #fff; }

.copy-panel {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-1);
}
.copy-panel h3 { margin: 0 0 6px; font-size: 16px; }
.copy-hint { color: var(--fg-secondary); font-size: 13px; margin: 0 0 16px; }
.copy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.copy-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--fg-secondary); }
.copy-field input, .copy-field select, .copy-field textarea {
  padding: 9px 11px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--fg-primary);
  font: inherit;
  font-size: 14px;
}
.copy-field textarea { resize: vertical; }
.copy-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.copy-error { color: #e0245e; font-size: 13px; margin: 8px 0 0; }
.copy-halt { background: rgba(224, 36, 94, 0.1); border: 1px solid rgba(224, 36, 94, 0.3); border-radius: 8px; padding: 14px; margin-bottom: 14px; }

.copy-cand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.copy-cand {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 12px 32px 12px 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-elevated);
}
.copy-cand.fail { opacity: 0.6; }
/* Cards left over from an earlier build recede to grey; the latest batch stays
   on the elevated (white) surface. */
.copy-cand.is-prev { background: var(--copy-prev-bg, #f0f0f0); }
.copy-cand-del {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--fg-tertiary); font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
}
.copy-cand-del:hover { background: var(--bg-surface); color: var(--fg-primary); }
/* Unviewed badge: cleared the first time the card is opened in the lightbox. */
.copy-cand-dot {
  position: absolute; top: 12px; right: 31px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #1ED760; pointer-events: none;
}
.copy-cand-body { min-width: 0; }
.copy-jp .cc-lat { font-family: "Spotify Mix CB", var(--font-sans); font-weight: 400; font-size: 1.08em; }
.copy-packet .copy-jp { font-size: 32px; line-height: 1.3; margin-bottom: 16px; }
.copy-meta { font-size: 11px; color: var(--fg-tertiary); margin: 0 0 8px; }
.copy-gen { font-family: var(--font-mono); }
.copy-reason { font-size: 12px; color: var(--fg-secondary); margin: 8px 0 0; }
.copy-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.copy-chip { font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 600; }
.copy-chip.ok { background: rgba(30, 215, 96, 0.16); color: #1a7f43; }
.copy-chip.warn { background: rgba(245, 166, 35, 0.18); color: #b9740a; }
.copy-chip.bad { background: rgba(224, 36, 94, 0.16); color: #c01f4f; }

/* Generate step: 2-column top — title/hint (1/3) left, output controls (2/3) right */
.copy-gen-top { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; align-items: start; margin-bottom: 12px; }
.copy-gen-info h3 { margin: 0 0 6px; }
.copy-gen-info .copy-hint { margin: 0; }
@media (max-width: 720px) { .copy-gen-top { grid-template-columns: 1fr; } }

/* Output-element controls (step 3) — compact */
.copy-outputs {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--bg-subtle, var(--bg-elevated));
}
.copy-out-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-tertiary); margin: 0 0 4px; }
.copy-out-sub { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.8; }
.copy-out-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.copy-out-row + .copy-out-row { border-top: 1px solid var(--border-subtle, var(--border-default)); }
.copy-out-toggle { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.copy-out-row:not(.is-on) .copy-out-toggle { color: var(--fg-tertiary); }
.copy-out-fields { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.copy-out-field { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--fg-tertiary); }
.copy-out-field input.copy-out-num { width: 44px; padding: 3px 5px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-elevated); color: var(--fg-primary); font-family: var(--font-mono); font-size: 12px; text-align: center; }
.copy-out-field input.copy-out-slider { width: 72px; accent-color: var(--accent, #1ED760); }
.copy-out-field input:disabled { opacity: 0.4; }

/* Candidate select toolbar */
.copy-cand-toolbar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.copy-sel-count { font-size: 11px; color: var(--fg-tertiary); margin-left: auto; }

/* Custom circular selection checkbox. The label carries padding so the click
   target is ~50% larger than the 20px circle (negative margin keeps layout). */
.copy-cand-pick { display: inline-flex; padding: 5px; margin: -5px; cursor: pointer; }
.copy-cand-pick input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 0; border-radius: 50%;
  border: 2px solid #fff; background: transparent; cursor: pointer;
  position: relative; flex: 0 0 auto;
}
.copy-cand-pick input[type="checkbox"]:checked { background: #fff; border-color: #fff; }
.copy-cand-pick input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #000;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.copy-cand-pick input[type="checkbox"]:disabled { opacity: 0.4; cursor: default; }

/* Run-calibration button: spinning circle outline while the judges run. */
.copy-calib-btn { display: inline-flex; align-items: center; gap: 7px; }
.copy-spin { width: 12px; height: 12px; flex: 0 0 auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: copyCalibSpin 0.8s linear infinite; }
@keyframes copyCalibSpin { to { transform: rotate(360deg); } }
/* Calibration result popup */
.copy-calib-pop { border: 1px solid var(--border-default); border-radius: 14px; background: var(--bg-surface); color: var(--fg-primary); padding: 26px 30px; max-width: 420px; text-align: center; }
.copy-calib-pop::backdrop { background: rgba(0, 0, 0, 0.45); }
.copy-calib-pop-icon { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #fff; }
.copy-calib-pop-icon.is-ok { background: #16A34A; }
.copy-calib-pop-icon.is-fail { background: #DC2626; }
.copy-calib-pop h3 { margin: 0 0 8px; font-size: 16px; }
.copy-calib-pop p { margin: 0 0 16px; font-size: 13px; color: var(--fg-secondary); line-height: 1.55; }
.copy-calib-pop .btn { min-width: 90px; }

/* Trust Layer: calibration banner */
.copy-trust-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; margin: 0 0 12px; border: 1px solid var(--border-default); }
.copy-trust-banner.is-ok { background: rgba(30, 215, 96, 0.12); color: #1a7f43; border-color: rgba(30, 215, 96, 0.4); }
.copy-trust-banner.is-warn { background: rgba(245, 166, 35, 0.14); color: #b9740a; border-color: rgba(245, 166, 35, 0.45); }
.copy-trust-note { font-weight: 500; opacity: 0.8; }

/* Trust Layer: calibration diagnostics panel */
.copy-calib-diag { border: 1px solid var(--border-default); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; background: var(--bg-elevated); font-size: 12px; }
.copy-calib-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.copy-calib-metrics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.copy-calib-metric { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.copy-calib-metric.ok { background: rgba(30, 215, 96, 0.16); color: #1a7f43; }
.copy-calib-metric.bad { background: rgba(224, 36, 94, 0.16); color: #c01f4f; }
.copy-calib-note { font-size: 10px; color: var(--fg-tertiary); }
.copy-calib-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .copy-calib-cols { grid-template-columns: 1fr; } }
.copy-calib-col-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-tertiary); margin: 0 0 4px; }
.copy-calib-cols ul { list-style: none; margin: 0; padding: 0; }
.copy-calib-cols li { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; border-top: 1px solid var(--border-subtle, var(--border-default)); }
.copy-calib-cols li b { font-family: var(--font-mono); min-width: 22px; }
.copy-calib-reason { font-size: 10px; color: var(--fg-tertiary); font-family: var(--font-mono); }

/* Trust Layer: per-card transparency */
.copy-trust { margin: 10px 0 0; padding: 8px 10px; border: 1px dashed var(--border-default); border-radius: 8px; font-size: 11px; color: var(--fg-secondary); }
.copy-trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.copy-trust-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; }
.copy-trust-badge.ok { background: rgba(30, 215, 96, 0.16); color: #1a7f43; }
.copy-trust-badge.warn { background: rgba(245, 166, 35, 0.18); color: #b9740a; }
.copy-trust-band { font-family: var(--font-mono); }
.copy-trust-place { margin-left: auto; opacity: 0.8; }
.copy-trust-judges { margin-top: 3px; }
.copy-judge { display: inline-block; font-family: var(--font-mono); padding: 0 5px; }
.copy-judge.not-indep { color: #c01f4f; }
.copy-override-by { display: block; width: 100%; font-size: 10px; opacity: 0.7; margin-top: 3px; }

/* Review: dated report-set history */
.copy-report { margin: 0 0 22px; }
.copy-report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-default); }
.copy-report-title { font-size: 13px; font-weight: 700; margin: 0; }
.copy-report-meta { font-size: 11px; color: var(--fg-tertiary); margin: 2px 0 0; }

/* Optional subcopy / CTA under the main copy */
.copy-sub { font-size: 13px; color: var(--fg-secondary); margin: 4px 0 0; line-height: 1.5; }
.copy-cta { font-size: 12px; font-weight: 700; color: var(--accent, #1ED760); margin: 6px 0 0; letter-spacing: 0.01em; }
.copy-packet .copy-sub { font-size: 15px; margin-top: 8px; }
.copy-packet .copy-cta { font-size: 13px; margin-top: 8px; }

/* Card entrance + typewriter (Copy Crafter animations) */
@keyframes copyReveal { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.copy-reveal { animation: copyReveal 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .copy-reveal { animation: none; } }
.copy-type-caret::after { content: "▍"; margin-left: 1px; color: var(--accent, #1ED760); animation: copyCaret 0.9s steps(1) infinite; }
@keyframes copyCaret { 50% { opacity: 0; } }

/* Per-candidate tools (edit / revert / variations) */
.copy-cand.is-editing { border-color: var(--accent, #1ED760); }
.copy-cand-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle, var(--border-default)); }
.copy-tool-btn { font-size: 11px; font-weight: 600; padding: 3px 9px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-elevated); color: var(--fg-secondary); cursor: pointer; }
.copy-tool-btn:hover:not(:disabled) { border-color: var(--accent, #1ED760); color: var(--fg-primary); }
.copy-tool-btn:disabled { opacity: 0.4; cursor: default; }
.copy-vary { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.copy-vary-end { font-size: 10px; color: var(--fg-tertiary); }
.copy-vary input[type="range"] { width: 84px; accent-color: var(--accent, #1ED760); }
.copy-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; background: rgba(120,120,120,0.16); color: var(--fg-secondary); }

/* Inline copy editor (custom add / edit) */
.copy-editor { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.copy-editor .copy-field { margin: 0; }
.copy-editor-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Review reclassification (green / yellow / red) */
.copy-reclass { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--fg-tertiary); margin: 12px 0 6px; }
.copy-class-text { font-weight: 700; }
.copy-class-text.green { color: #1a7f43; }
.copy-class-text.yellow { color: #8a6a12; }
.copy-class-text.red { color: #c01f4f; }
.copy-class-btn { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 7px; border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--fg-tertiary); cursor: pointer; letter-spacing: 0.03em; }
.copy-class-btn:hover { color: var(--fg-primary); }
.copy-class-btn.is-current.class-green { background: rgba(30, 215, 96, 0.18); color: #1a7f43; border-color: #1ED760; }
.copy-class-btn.is-current.class-yellow { background: rgba(255, 200, 98, 0.22); color: #8a6a12; border-color: #FFC862; }
.copy-class-btn.is-current.class-red { background: rgba(224, 36, 94, 0.16); color: #c01f4f; border-color: #e0245e; }

/* Each packet is a full-width row: a thin PDF-toggle column + a 3-column grid. */
.copy-packets { display: flex; flex-direction: column; gap: 14px; }
.copy-packet {
  position: relative;
  display: flex;
  gap: 10px;
  border: 1px solid var(--border-default);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 16px;
  background: var(--bg-elevated);
}
.copy-packet.label-green { border-left-color: #1ED760; }
.copy-packet.label-yellow { border-left-color: #FFC862; }
.copy-packet.label-red { border-left-color: #e0245e; }
.copy-packet-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.1fr 1fr 1.15fr; gap: 20px; }
@media (max-width: 900px) { .copy-packet-grid { grid-template-columns: 1fr; gap: 14px; } }
.copy-col { min-width: 0; }
.copy-col-meaning, .copy-col-analysis { border-left: 1px solid var(--border-subtle, var(--border-default)); padding-left: 20px; }
@media (max-width: 900px) { .copy-col-meaning, .copy-col-analysis { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-subtle, var(--border-default)); padding-top: 12px; } }

/* Thin PDF-include column (left edge, just wide enough for the checkbox) */
.copy-pdf-col { flex: 0 0 22px; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; cursor: pointer; }
.copy-pdf-col input { accent-color: var(--accent, #1ED760); width: 16px; height: 16px; cursor: pointer; }

.copy-bt { font-size: 13px; color: var(--fg-secondary); }
.copy-bt p { margin: 2px 0; }
/* Score readouts as outline pills — transparent fill, outline = text colour. */
.copy-scores { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--fg-tertiary); align-items: center; margin-bottom: 8px; }
.copy-scores > span:not(.copy-chip) { padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; background: transparent; white-space: nowrap; }
.copy-packet-actions { display: flex; gap: 8px; margin-top: 10px; }
.copy-col-copy .copy-reclass { margin-top: 10px; }

/* Analysing placeholder: dim overlay + the logo-checker green scanner. */
.copy-packet.is-analysing { min-height: 150px; }
.copy-analysing-overlay { position: absolute; inset: 0; z-index: 5; border-radius: 10px; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; }
.copy-analysing-overlay .analyzing-spinner-wrap { position: static; }

/* Review header + criteria glossary modal */
.copy-review-head { display: flex; align-items: center; gap: 10px; }
.copy-help-btn { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--fg-secondary); font-weight: 700; cursor: pointer; line-height: 1; }
.copy-help-btn:hover { border-color: var(--accent, #1ED760); color: var(--fg-primary); }
.copy-help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.copy-help-modal { background: var(--bg-base, var(--bg-elevated)); border: 1px solid var(--border-default); border-radius: 12px; max-width: 680px; width: 100%; max-height: 80vh; overflow: auto; padding: 18px 20px; }
.copy-help-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; position: sticky; top: -18px; background: var(--bg-base, var(--bg-elevated)); padding: 4px 0; }
.copy-help-list { margin: 0; display: grid; gap: 10px; }
.copy-help-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: start; }
@media (max-width: 560px) { .copy-help-row { grid-template-columns: 1fr; gap: 2px; } }
.copy-help-row dt { font-weight: 700; font-size: 12px; font-family: var(--font-mono); color: var(--fg-primary); }
.copy-help-row dd { margin: 0; font-size: 12px; color: var(--fg-secondary); line-height: 1.5; }

/* ===================== Copy Brand Pack editor ===================== */
.brandpack-editor { display: grid; gap: 16px; max-width: 760px; }
.bp-card {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-1);
}
.bp-card h3 { margin: 0 0 12px; font-size: 14px; }
.bp-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.bp-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--fg-primary);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.bp-axes { display: grid; gap: 10px; margin-bottom: 14px; }
.bp-axis { display: grid; grid-template-columns: 200px 1fr 40px; gap: 10px; align-items: center; font-size: 12px; color: var(--fg-secondary); }
.bp-axis output { font-family: var(--font-mono); text-align: right; }
.bp-card .copy-field { margin-top: 10px; }
.bp-card .copy-field textarea { padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-elevated); color: var(--fg-primary); font: inherit; font-size: 13px; resize: vertical; }
.bp-presets { display: grid; gap: 8px; }
.bp-preset { display: flex; gap: 8px; }
.bp-preset input { padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-elevated); color: var(--fg-primary); font: inherit; font-size: 13px; flex: 1; }

/* Copy Crafter project bar (save / save-as / load / new) */
.copy-project-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-project-name {
  font-size: 13px;
  color: var(--fg-secondary);
  margin-right: 4px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-save-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-tertiary); }

/* Full ToV markdown editor — monospace for readability of the document. */
.bp-tov-md { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }

/* Overview — AI connections list (provider + status dot) */
.provider-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border-default);
}
.provider-row:last-child { border-bottom: 0; }
.provider-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.provider-name b { font-size: 14px; }
.provider-name small { font-size: 11px; color: var(--fg-tertiary); font-family: var(--font-mono); }
.provider-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-tertiary);
}
.provider-dot.is-on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); } /* semantic: connected = green for every client */
.provider-dot.is-off { background: #e0245e; box-shadow: 0 0 0 3px rgba(224, 36, 94, 0.16); }
.provider-dot.is-unknown { background: transparent; border: 1.5px solid var(--fg-tertiary); }
.provider-dot.is-checking { background: var(--fg-tertiary); animation: provider-pulse 1s ease-in-out infinite; }
@keyframes provider-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ===================== API Usage page ===================== */
.apiusage-summary { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.apiusage-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  min-width: 120px;
}
.apiusage-stat span { font-size: 11px; color: var(--fg-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.apiusage-stat b { font-size: 18px; }
.apiusage-stat.is-total b { color: var(--brand-color); }
.apiusage-table { overflow-x: auto; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.usage-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.usage-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); vertical-align: top; }
.usage-table tr:hover td { background: var(--bg-elevated); }
.apiusage-time { color: var(--fg-secondary); white-space: nowrap; }
.apiusage-model { font-family: var(--font-mono); font-size: 11px; color: var(--fg-secondary); }
.apiusage-num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.apiusage-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.apiusage-tag.tag-logo { background: rgba(255, 113, 99, 0.16); color: #c0392b; }
.apiusage-tag.tag-copy { background: rgba(177, 156, 255, 0.18); color: #6a4fce; }

/* Copy Crafter — stage progress bar */
.copy-progress {
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.copy-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 8px;
}
.copy-progress-head span:first-child { font-weight: 600; }
.copy-progress-head em { font-family: var(--font-mono); font-style: normal; color: var(--fg-tertiary); }
.copy-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.copy-progress-bar i {
  display: block;
  height: 100%;
  background: var(--brand-color);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.copy-progress-bar.is-indeterminate i {
  width: 40% !important;
  animation: copy-indeterminate 1.1s ease-in-out infinite;
}
@keyframes copy-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* Copy Crafter — review packet extras */
.copy-packet .copy-meta { font-size: 11px; color: var(--fg-tertiary); margin: 0 0 10px; font-family: var(--font-mono); }
.copy-flags { font-size: 12px; color: #c89b3c; margin: 8px 0 0; }

/* Settings — environment indicator (which env's keys you're editing). */
.settings-env-note { font-size: 13px; color: var(--fg-secondary); margin: -4px 0 18px; padding: 10px 14px; border-radius: var(--radius); background: var(--bg-surface); border: 1px solid var(--border-default); }
.settings-env-note.is-staging { color: #ff4506; border-color: rgba(255, 69, 6, 0.4); background: rgba(255, 69, 6, 0.08); }

/* =====================================================================
   Campaign Studio — home (theme-aware) + editor (always dark, per the
   SP282 studio design: #121212 app / #181818 panels / #282828 controls).
   ===================================================================== */

/* ---- Home: quick start ---- */
.studio-quickstart { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 26px; }
.studio-quickstart-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-tertiary); }
.studio-quickstart-row { display: flex; gap: 10px; flex-wrap: wrap; }
.studio-qs-card { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-surface); color: var(--fg-primary); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.studio-qs-card:hover { border-color: var(--brand-color); }
.studio-qs-chip { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 26px; }
.qs-focused .studio-qs-chip { background: linear-gradient(135deg, #400073 62%, #FF7439 62%); }
.qs-enhanced .studio-qs-chip { background: linear-gradient(180deg, #9691FF, #F47E00); }
.qs-refined .studio-qs-chip { background: linear-gradient(135deg, #1D2B3A 62%, #CFF56A 62%); }
.qs-modular .studio-qs-chip { background: linear-gradient(135deg, #073116 62%, #91EEDA 62%); }

.btn-capsule { border-radius: 999px; padding-left: 20px; padding-right: 22px; }

/* Design tab: Solid BG toggle (Enhanced). */
.studio-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.studio-switch { position: relative; width: 38px; height: 22px; flex: 0 0 38px; border: none; border-radius: 99px; background: #4d4d4d; cursor: pointer; padding: 0; transition: background-color 0.2s ease; }
.studio-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; }
.studio-switch.is-on { background: var(--brand-color); }
.studio-switch.is-on::after { transform: translateX(16px); }

/* Design tab: contrast ratio of the two selected colors. */
.studio-contrast-row { display: flex; align-items: center; justify-content: space-between; background: var(--tool-surface-2); border-radius: 6px; padding: 9px 12px; }
.studio-contrast-verdict { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
.studio-contrast-verdict.is-pass { color: var(--brand-color); }
.studio-contrast-verdict.is-fail { color: #ff6b5e; }
.studio-contrast-value { font-size: 13px; color: #d6d6d6; font-variant-numeric: tabular-nums; }

/* ---- Home: team rail + campaign grid ---- */
.studio-home-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.studio-teams { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 20px; }
.studio-team-btn { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; border: none; background: transparent; color: var(--fg-secondary); cursor: pointer; font: inherit; font-size: 14px; text-align: left; }
.studio-team-btn:hover { background: var(--bg-surface); color: var(--fg-primary); }
.studio-team-btn.is-active { background: var(--bg-elevated); color: var(--fg-primary); font-weight: 700; }
.studio-team-count { font-size: 11px; color: var(--fg-tertiary); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 99px; padding: 1px 8px; }
.studio-cat-manage {
  margin-top: 10px; padding: 7px 12px; border: 1px dashed var(--border-default); border-radius: 6px;
  background: transparent; color: var(--fg-tertiary); cursor: pointer; font: inherit; font-size: 12px; text-align: left;
}
.studio-cat-manage:hover { color: var(--fg-primary); border-color: var(--fg-tertiary); }
.studio-cat-editor { display: flex; flex-direction: column; gap: 8px; }
.studio-cat-row { display: flex; gap: 6px; align-items: center; }
.studio-cat-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 6px;
  border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--fg-primary);
}
.studio-cat-del { border: none; background: transparent; color: var(--fg-tertiary); cursor: pointer; font-size: 13px; padding: 4px; }
.studio-cat-del:hover { color: #e0245e; }
.studio-cat-add {
  padding: 7px 10px; border: 1px dashed var(--border-default); border-radius: 6px; background: transparent;
  color: var(--fg-secondary); cursor: pointer; font: inherit; font-size: 12px; text-align: left;
}
.studio-cat-actions { display: flex; gap: 8px; margin-top: 4px; }
.studio-cat-actions button { flex: 1; font-size: 13px; padding: 8px 10px; }
.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.studio-empty { color: var(--fg-tertiary); font-size: 14px; padding: 24px 4px; }
.studio-card { position: relative; border: 1px solid var(--border-default); background: var(--bg-surface); border-radius: 10px; overflow: hidden; transition: border-color 0.15s ease; }
/* Home grid: cards fade in one after another. */
.studio-card-enter { opacity: 0; animation: studio-card-in 0.45s ease forwards; }
@keyframes studio-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-card-enter { animation-duration: 0.01s; }
}
.studio-card:hover { border-color: var(--border-strong); }
.studio-card-open { display: block; width: 100%; border: none; background: transparent; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.studio-card-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--bg-elevated); position: relative; overflow: hidden; }
.studio-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-card-thumb i { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; }
.studio-card-thumb i + i { left: 50%; }
.studio-card-pending {
  position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 99px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  background: rgba(245, 158, 11, 0.92); color: #231a02;
}
.studio-card-name { display: block; padding: 12px 14px 4px; font-size: 14px; color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 12px; }
.studio-card-team { font-size: 11px; border-radius: 99px; border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--fg-secondary); padding: 2px 8px; }
.studio-card-meta time { font-size: 11px; color: var(--fg-tertiary); }
.studio-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s ease; }
.studio-card:hover .studio-card-actions, .studio-card:focus-within .studio-card-actions { opacity: 1; }
.studio-card-act { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; border: none; background: rgba(0, 0, 0, 0.55); color: var(--tool-text); cursor: pointer; }
.studio-card-act svg { width: 14px; height: 14px; }
.studio-card-act:hover { background: rgba(0, 0, 0, 0.8); }
.studio-card-del:hover { background: #c0392b; }

/* ---- Immersive editor shell: hide the hub sidebar, go edge-to-edge ----
   The sidebar is display:none, so it leaves the grid flow entirely — the shell
   must switch to a SINGLE column or main-shell auto-places into a 0-width track. */
body.studio-immersive .app-shell { grid-template-columns: minmax(0, 1fr); }
body.studio-immersive .sidebar { display: none; }
body.studio-immersive .content { padding: 0; }
body.studio-immersive .view[data-view="studio"].is-active { animation: none; }

/* ---- Editor chrome ---- */
.studio-editor { display: flex; flex-direction: column; height: calc(100vh - 72px); background: #121212; color: var(--tool-text); overflow: hidden; }
.studio-toolbar { flex: 0 0 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 20px; background: var(--tool-chrome); border-bottom: 1px solid var(--tool-chrome-border); }
.studio-tb-left { display: flex; align-items: center; gap: 16px; }
.studio-tb-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.studio-tb-btn { display: flex; align-items: center; gap: 8px; border: none; background: transparent; color: var(--tool-text); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; padding: 6px 8px; border-radius: 6px; }
.studio-tb-btn svg { width: 16px; height: 16px; }
.studio-tb-btn:hover { background: rgba(255, 255, 255, 0.08); }
.studio-tb-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.studio-history { display: flex; gap: 2px; }
.studio-zoom { position: relative; display: flex; align-items: center; gap: 2px; }
.studio-zoom-pill { display: flex; align-items: center; gap: 6px; background: var(--tool-surface-2); color: var(--tool-text); border: none; border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.studio-zoom-pill svg { width: 12px; height: 12px; }
.studio-zoom-menu { position: absolute; top: calc(100% + 8px); left: 30px; background: var(--tool-surface-2); border: 1px solid var(--tool-chrome-border); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; min-width: 92px; z-index: 40; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.studio-zoom-menu button { border: none; background: transparent; color: var(--tool-text); text-align: left; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 5px; cursor: pointer; }
.studio-zoom-menu button:hover { background: rgba(255, 255, 255, 0.1); }
.studio-tb-center { min-width: 0; display: flex; justify-content: center; align-items: center; gap: 10px; }
.studio-tb-center .dd-wrap { flex: 0 0 auto; }
.studio-team-select { background: var(--tool-surface-2); color: var(--tool-text-dim); border: none; border-radius: 99px; font: inherit; font-size: 11px; font-weight: 700; padding: 6px 12px; width: auto; }
.studio-team-select:hover { color: var(--tool-text); }
.studio-name { border: none; background: transparent; color: var(--tool-text); font: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; cursor: text; padding: 6px 12px; border-radius: 6px; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-name:hover { background: rgba(255, 255, 255, 0.08); }
.studio-name-input { background: var(--tool-surface-2); border: 1px solid var(--brand-color); color: var(--tool-text); border-radius: 6px; font: inherit; font-size: 14px; font-weight: 700; padding: 6px 12px; width: 320px; text-align: center; }
.studio-save-state { font-size: 11px; color: #808080; white-space: nowrap; }
.studio-save-state.is-error { color: #ff6b5e; }
.studio-pending-badge {
  padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em; white-space: nowrap;
  background: rgba(245, 158, 11, 0.18); color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.45);
}
.studio-export { background: var(--brand-color); color: #000; border: none; border-radius: 88px; font: inherit; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 26px; cursor: pointer; }
.studio-export:hover { filter: brightness(1.08); }
.studio-export:disabled { opacity: 0.6; cursor: default; }
/* Export: circular loading state (shown for at least 2s before the download). */
.studio-export { position: relative; }
.studio-export.is-loading span { visibility: hidden; }
.studio-export.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2.5px solid rgba(0, 0, 0, 0.25); border-top-color: #000; animation: studio-spin 0.7s linear infinite; }
@keyframes studio-spin { to { transform: rotate(360deg); } }

/* ---- Inspector panel ---- */
.studio-editor-body { flex: 1; display: flex; min-height: 0; }
.studio-panel { width: 260px; flex: 0 0 260px; background: var(--tool-chrome); border-right: 1px solid var(--tool-chrome-border); display: flex; flex-direction: column; min-height: 0; }
.studio-tabs { position: relative; display: flex; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.studio-tab { flex: 0 0 auto; text-align: center; border: none; background: transparent; color: var(--tool-text-dim); font: inherit; font-size: 13px; font-weight: 700; padding: 15px 0 13px; cursor: pointer; transition: color 0.2s ease; }
.studio-tab:hover { color: var(--tool-text); }
.studio-tab.is-active { color: var(--tool-text); }
.studio-tab-ind { position: absolute; bottom: -1px; height: 2px; background: var(--brand-color); border-radius: 2px; transition: left 0.28s ease, width 0.28s ease; }
.studio-tab-ind.no-anim { transition: none; }
.studio-tab-content { padding: 0; overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.studio-tab-fixed { flex: 0 0 auto; padding: 18px 20px 12px; display: flex; flex-direction: column; gap: 16px; }
.studio-tab-scroll { flex: 1; min-height: 0; padding: 12px 20px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.studio-tab-fixed:first-child + .studio-tab-scroll { border-top: 1px solid rgba(255, 255, 255, 0.06); }
/* Figma-style overlay scrollbar: track matches the sidebar, the slim rounded
   thumb only appears while hovering the sidebar area. */
.studio-tab-scroll { scrollbar-width: none; }
.studio-panel:hover .studio-tab-scroll { scrollbar-width: thin; scrollbar-color: #4d4d4d transparent; }
.studio-tab-scroll::-webkit-scrollbar { width: 8px; }
.studio-tab-scroll::-webkit-scrollbar-track { background: transparent; }
.studio-tab-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.studio-panel:hover .studio-tab-scroll::-webkit-scrollbar-thumb { background: #4d4d4d; }
.studio-section { display: flex; flex-direction: column; gap: 8px; }
.studio-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tool-text-dim); }
.studio-select { background: var(--tool-surface-2); color: var(--tool-text); border: none; border-radius: 6px; height: 36px; padding: 0 10px; font: inherit; font-size: 13px; width: 100%; }
/* Segmented control — a sliding pill indicator (green; grey for text variants)
   moves under the buttons instead of the active button being painted. */
.studio-seg { position: relative; display: flex; gap: 6px; background: var(--tool-surface-2); border-radius: 8px; padding: 3px; }
.studio-seg-ind { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; background: var(--brand-color); border-radius: 6px; transition: left 0.28s ease, width 0.28s ease; }
.studio-seg-ind.no-anim { transition: none; }
.studio-seg-grey .studio-seg-ind { background: #4a4a4a; }
.studio-seg-btn { position: relative; z-index: 1; flex: 1; border: none; background: transparent; color: var(--tool-text-dim); font: inherit; font-size: 13px; padding: 7px 4px; border-radius: 6px; cursor: pointer; transition: color 0.2s ease; }
.studio-seg-btn:hover { color: var(--tool-text); }
.studio-seg-btn.is-active { color: #181818; font-weight: 700; }
.studio-seg-grey .studio-seg-btn { font-size: 12px; }
.studio-seg-grey .studio-seg-btn.is-active { color: var(--tool-text); }
.studio-seg-plain .studio-seg-btn { font-size: 13px; }
.studio-seg-plain .studio-seg-btn.is-active { font-weight: 400; }
.studio-color-row { display: flex; align-items: center; }
.studio-color-chip { position: relative; flex: 1; height: 36px; border: 0.5px solid #b3b3b3; border-radius: 6px; display: grid; place-items: center; font: inherit; font-size: 13px; cursor: pointer; overflow: hidden; transition: transform 0.28s ease, background-color 0.3s ease, color 0.3s ease; }
.studio-color-chip.is-swapping { z-index: 1; }
.studio-color-chip input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.studio-color-chip span { pointer-events: none; }
.studio-color-row .studio-color-chip + .studio-color-chip { margin-left: 8px; }
.studio-color-gap { width: 8px; flex: 0 0 8px; }
.studio-swap { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border: none; background: transparent; color: var(--tool-text-dim); cursor: pointer; border-radius: 6px; }
.studio-swap svg { width: 14px; height: 14px; }
.studio-swap:hover { color: var(--tool-text); background: rgba(255, 255, 255, 0.08); }
.studio-preset-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; border: 1.5px solid transparent; background: transparent; cursor: pointer; width: 100%; text-align: left; font: inherit; }
.studio-preset-row:hover { background: rgba(255, 255, 255, 0.05); }
.studio-preset-row.is-active { border-color: var(--brand-color); background: rgba(255, 255, 255, 0.08); }
.studio-preset-dots { display: flex; flex: 0 0 33px; }
.studio-preset-dots i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); }
.studio-preset-dots i + i { margin-left: -7px; }
.studio-preset-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.studio-preset-col b { font-size: 10px; font-weight: 500; color: #c7c7c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-preset-col small { font-size: 9px; color: #808080; }
.studio-input { background: var(--tool-surface-2); border: 1px solid transparent; color: var(--tool-text); border-radius: 6px; font: inherit; font-size: 13px; padding: 8px 10px; width: 100%; resize: vertical; }
.studio-input:focus { outline: none; border-color: var(--brand-color); }
.studio-note { font-size: 11px; color: #808080; margin: 0; }

/* Text tab (SP282): WIDTH/WEIGHT dropdowns side by side, then Headline /
   Subtext / CTA each with a grey variant switcher over one textarea. */
.studio-typo-row { display: flex; gap: 10px; }
.studio-typo-col { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.studio-mini-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6c6c6c; }
.studio-field-label { font-size: 13px; font-weight: 700; color: #9a9a9a; }

/* Image tab (SP282): hero preview + Clear / Upload (white pill), then the
   shared tag-filtered gallery grid. */
.studio-hero-preview { border: 1px solid #333; border-radius: 12px; overflow: hidden; background: #1e1e1e; aspect-ratio: 1 / 1; }
.studio-hero-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.studio-hero-preview.is-default img { opacity: 0.55; }
.studio-hero-actions { display: flex; gap: 10px; margin-top: 2px; }
.studio-btn-dark { flex: 1; border: 1px solid var(--tool-border-soft); background: transparent; color: var(--tool-text); font: inherit; font-size: 13px; font-weight: 700; padding: 11px 10px; border-radius: 99px; cursor: pointer; transition: border-color 0.15s ease; }
.studio-btn-dark:hover { border-color: var(--tool-text-dim); }
.studio-btn-dark:disabled { opacity: 0.4; cursor: default; border-color: var(--tool-border-soft); }
.studio-btn-white { flex: 1; border: none; background: var(--tool-btn-primary-bg); color: var(--tool-btn-primary-fg); font: inherit; font-size: 13px; font-weight: 700; padding: 11px 10px; border-radius: 99px; cursor: pointer; }
.studio-btn-white:hover { filter: brightness(0.92); }
/* Album UI preview — with the toggle on, the HERO thumbnail becomes the album
   card: still a 1:1 box, black background, white ink, 40px padding, with the
   card scaled to fit. All metrics are relative to the artwork (--art): text
   row = play = 15.7%, gap = 8%, title glyph height ≈ 9%, artist bottom-aligns
   with the play button. */
.studio-hero-preview.is-album { aspect-ratio: 1 / 1; background: #000; padding: 40px; display: block; }
.studio-album-frame { width: 100%; height: 100%; container-type: size; display: flex; align-items: center; justify-content: center; }
.studio-album-card { --art: calc(100cqmin / 1.197); width: var(--art); display: flex; flex-direction: column; gap: calc(var(--art) * 0.04); }
.studio-album-art { display: block; width: var(--art); height: var(--art); background: #1ED760; overflow: hidden; }
.studio-album-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-album-row { height: calc(var(--art) * 0.157); display: flex; align-items: stretch; justify-content: space-between; gap: calc(var(--art) * 0.06); }
.studio-album-text { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.studio-album-title { font-family: "Spotify Mix Narrow CB", var(--font-sans); font-weight: 900; font-size: calc(var(--art) * 0.106); line-height: 0.9; text-transform: uppercase; color: var(--tool-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; top: calc(var(--art) * -0.01); }
.studio-album-artist { font-family: "Spotify Mix CB", var(--font-sans); font-weight: 400; font-size: calc(var(--art) * 0.049); line-height: 1; color: var(--tool-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The play button SVG — 15.7% of the artwork width. */
img.studio-album-play { width: calc(var(--art) * 0.157); height: calc(var(--art) * 0.157); flex: 0 0 auto; display: block; }

.studio-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.studio-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.studio-gallery-tile { position: relative; aspect-ratio: 1 / 1; border: none; border-radius: 8px; overflow: hidden; background: var(--tool-surface-2); cursor: pointer; padding: 0; }
.studio-gallery-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.studio-gallery-tile.is-active { outline: 2px solid var(--brand-color); outline-offset: 1px; }
/* Hover rollover — a large preview of the gallery image beside the panel. */
.studio-gallery-tip { position: fixed; z-index: 210; background: var(--tool-surface); border: 1px solid var(--tool-border-soft); border-radius: 12px; padding: 8px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6); pointer-events: none; }
.studio-gallery-tip img { display: block; width: 300px; max-height: 400px; object-fit: contain; border-radius: 6px; }

/* Design tab preset grids (Enhanced gradients / Refined hue rows). */
.studio-grad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.studio-grad-tile { aspect-ratio: 1 / 1; border: none; border-radius: 8px; cursor: pointer; padding: 0; }
.studio-grad-tile.is-active { outline: 0.5px solid #b3b3b3; outline-offset: 1.5px; }
.studio-hue-row { display: flex; gap: 4px; }
/* Refined palette — full-width level grid (SP282 reference): rounded-square
   tiles, 8 level columns, fluorescents in a 5-column grid beneath. */
.studio-refined-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; width: 100%; }
.studio-fl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; width: 100%; margin-top: 12px; }
.studio-sq-swatch { position: relative; aspect-ratio: 1 / 1; width: 100%; border-radius: 6px; border: none; padding: 0; cursor: pointer; transition: transform 0.12s ease; }
.studio-sq-swatch:hover { transform: scale(1.12); }
.studio-sq-swatch.is-active { box-shadow: inset 0 0 0 2px var(--brand-color); }
.studio-sq-badge { position: absolute; inset: 3px; display: grid; place-items: center; font-size: 8px; font-weight: 800; letter-spacing: 0.04em; color: var(--tool-text); background: rgba(0, 0, 0, 0.55); border-radius: 4px; pointer-events: none; }
.studio-hue-swatch { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border: 1px solid var(--tool-chrome-border); padding: 0; cursor: pointer; transition: transform 0.12s ease; }
.studio-hue-swatch:hover { transform: scale(1.18); }
.studio-hue-swatch.is-active { outline: 0.5px solid #b3b3b3; outline-offset: 1.5px; }

/* Spotify palette popup — the only way to pick colors in the Studio. */
.studio-palette-pop .studio-hue-row { flex-wrap: wrap; }
.studio-palette-pop { position: fixed; z-index: 200; width: 246px; background: var(--tool-surface); border: 1px solid var(--tool-border-soft); border-radius: 12px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); padding: 12px; }
.studio-palette-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tool-text-dim); margin-bottom: 10px; }
.studio-palette-body { display: flex; flex-direction: column; gap: 5px; max-height: 56vh; overflow-y: auto; scrollbar-width: none; }
.studio-palette-pop:hover .studio-palette-body { scrollbar-width: thin; scrollbar-color: #4d4d4d transparent; }
.studio-palette-body::-webkit-scrollbar { width: 8px; }
.studio-palette-body::-webkit-scrollbar-track { background: transparent; }
.studio-palette-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.studio-palette-pop:hover .studio-palette-body::-webkit-scrollbar-thumb { background: #4d4d4d; }
/* Hover rollover: the color large, with name + hex. */
.studio-palette-tip { position: absolute; z-index: 210; display: flex; align-items: center; gap: 10px; background: var(--tool-surface-2); border: 1px solid var(--tool-border-soft); border-radius: 10px; padding: 8px 12px 8px 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); pointer-events: none; white-space: nowrap; }
.studio-palette-tip i { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--tool-border-soft); flex: 0 0 44px; }
.studio-palette-tip span { display: flex; flex-direction: column; gap: 2px; }
.studio-palette-tip b { font-size: 12px; color: var(--tool-text); font-weight: 700; }
.studio-palette-tip small { font-size: 11px; color: #9a9a9a; }
.studio-formats-bulk { display: flex; gap: 8px; margin-bottom: 2px; }
.studio-mini-btn { border: none; background: var(--tool-surface-2); color: var(--tool-text-dim); font: inherit; font-size: 11px; padding: 5px 10px; border-radius: 99px; cursor: pointer; }
.studio-mini-btn:hover { color: var(--tool-text); }
/* Formats tab — grouped rows with a green rounded checkbox, name, and a
   size · platform subline (per the SP282 reference). */
.studio-format-row2 { display: flex; align-items: flex-start; gap: 12px; padding: 8px 8px; border-radius: 8px; cursor: pointer; }
.studio-format-row2:hover { background: rgba(255, 255, 255, 0.05); }
.studio-format-row2 input { position: absolute; opacity: 0; pointer-events: none; }
.studio-checkbox { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; border: 1.5px solid #4d4d4d; border-radius: 7px; display: grid; place-items: center; color: transparent; background: transparent; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.studio-checkbox svg { width: 13px; height: 13px; }
.studio-format-row2 input:checked + .studio-checkbox { background: var(--brand-color); border-color: var(--brand-color); color: var(--tool-text); }
.studio-format-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.studio-format-info b { font-size: 15px; font-weight: 600; color: #e8e8e8; }
.studio-format-info small { font-size: 12px; color: var(--tool-text-dim); }

/* =====================================================================
   Guidelines — live control surface (admin toggles + custom rules).
   ===================================================================== */
.guideline-admin-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-surface); }
.guideline-admin-bar p { margin: 0; flex: 1; color: var(--fg-tertiary); font-size: 13px; }
.guideline-card.is-off { opacity: 0.45; }
.guideline-card .guideline-head { align-items: center; }
.guideline-switch { margin-left: auto; flex: 0 0 auto; width: 36px; height: 20px; border-radius: 10px; border: none; background: var(--border-strong); position: relative; cursor: pointer; transition: background 0.15s ease; }
.guideline-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.guideline-switch.is-on { background: var(--brand-color); }
.guideline-switch.is-on::after { left: 18px; }
.guideline-custom-badge { margin-left: auto; flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-tertiary); border: 1px solid var(--border-default); border-radius: 999px; padding: 2px 8px; }
.guideline-custom .guideline-custom-actions, .guideline-form .guideline-custom-actions { display: flex; gap: 8px; margin-top: 12px; }
.guideline-form { display: flex; flex-direction: column; gap: 10px; }
.guideline-form textarea { resize: vertical; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-base); color: var(--fg-primary); width: 100%; }

/* =====================================================================
   Banner Templates — format-first shell (formats span all 4 systems).
   ===================================================================== */
.tplfmt-list { display: flex; flex-direction: column; gap: 8px; max-width: 760px; flex: 1; min-width: 0; }
/* Home: format list on the left, actions column (Design Systems / Export / Import)
   on the right with a separator between the groups. */
.tplfmt-body { display: flex; align-items: flex-start; gap: 24px; max-width: 1000px; }
.tplfmt-side { flex: 0 0 200px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
.tplfmt-side .btn { width: 100%; }
.tplfmt-sep { width: 100%; border: 0; border-top: 1px solid var(--border-default); margin: 4px 0; }
.tplfmt-row { position: relative; display: flex; align-items: center; border: 1px solid var(--border-default); background: var(--bg-surface); border-radius: 10px; transition: border-color 0.15s ease; }
.tplfmt-row:hover { border-color: var(--border-strong); }
.tplfmt-row.is-dragging { opacity: 0.55; border-color: var(--border-strong); }
/* Reorder grip: revealed on hover; drives the format order (list + Studio). */
.tplfmt-grip { display: flex; align-items: center; padding: 0 2px 0 10px; margin-right: -6px; color: var(--fg-tertiary); opacity: 0; cursor: grab; transition: opacity 0.15s ease; }
.tplfmt-grip svg { width: 10px; height: 16px; }
.tplfmt-row:hover .tplfmt-grip { opacity: 1; }
.tplfmt-grip:active { cursor: grabbing; }
.tplfmt-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; border: none; background: transparent; color: var(--fg-primary); font: inherit; padding: 14px 16px; cursor: pointer; }
.tplfmt-open b { font-size: 15px; }
.tplfmt-open small { color: var(--fg-tertiary); font-size: 12px; }
.tplfmt-actions { display: flex; gap: 6px; padding-right: 12px; opacity: 0; transition: opacity 0.15s ease; }
.tplfmt-row:hover .tplfmt-actions, .tplfmt-row:focus-within .tplfmt-actions { opacity: 1; }

.tpl-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: var(--tool-chrome); border: 1px solid var(--tool-chrome-border); border-radius: 10px; margin-bottom: 20px; }
.tpl-tb-left { display: flex; align-items: center; gap: 4px; }
.tpl-tb-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.tpl-tb-btn { display: flex; align-items: center; gap: 8px; border: none; background: transparent; color: var(--fg-primary); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; padding: 6px 8px; border-radius: 6px; }
.tpl-tb-btn svg { width: 16px; height: 16px; }
.tpl-tb-btn:hover { background: var(--bg-surface); }
.tpl-tb-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.tpl-tb-center { display: flex; justify-content: center; min-width: 0; }
/* The template name, centered, with the green highlight underneath. */
.tpl-name { position: relative; border: none; background: transparent; color: var(--fg-primary); font: inherit; font-size: 16px; font-weight: 800; padding: 6px 4px 12px; cursor: text; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-name::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; border-radius: 2px; background: var(--brand-color); }
.tpl-name-input { background: var(--bg-surface); border: 1px solid var(--brand-color); color: var(--fg-primary); border-radius: 6px; font: inherit; font-size: 15px; font-weight: 700; padding: 6px 12px; width: 300px; text-align: center; }

/* Editor: specimen canvas fills the left half; controls in the right panel. */
.tpl-editor-grid { --tpl-side-w: 25%; display: grid; grid-template-columns: minmax(0, 1fr) 6px minmax(220px, var(--tpl-side-w)); gap: 0 14px; align-items: start; }

.tpl-side-resizer { align-self: stretch; width: 6px; border-radius: 3px; background: var(--border-default); cursor: col-resize; touch-action: none; }
.tpl-side-resizer:hover { background: var(--brand-color); }

.tpl-system-select { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tpl-stage-col { position: sticky; top: 16px; min-width: 0; }
.tpl-side { min-width: 0; }
.tpl-side .tpl-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 14px; }
.tpl-side .tpl-meta-actions { margin-top: 16px; }
.tpl-range { display: flex; align-items: center; gap: 10px; }
.tpl-range input[type="range"] { flex: 1; min-width: 0; }
.tpl-range-num { width: 66px; flex: 0 0 66px; }

/* =====================================================================
   Custom dropdowns (hub-wide). The trigger inherits the select's classes;
   the floating menu shows the selected option in Spotify green + a check.
   ===================================================================== */
.dd-wrap { position: relative; display: block; min-width: 0; flex: 1; }
.dd-wrap select.dd-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0 !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.dd-trigger { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; text-align: left; appearance: none; }
.dd-chev { width: 12px; height: 12px; flex: 0 0 12px; opacity: 0.7; transition: transform 0.2s ease; }
.dd-wrap.is-open .dd-chev { transform: rotate(180deg); }
.dd-label { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 120; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); padding: 6px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.dd-option { display: flex; align-items: center; gap: 10px; border: none; background: transparent; color: var(--fg-primary); font: inherit; font-size: 13px; font-weight: 500; padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left; white-space: nowrap; }
.dd-option:hover { background: rgba(127, 127, 127, 0.16); }
.dd-option-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-check { width: 14px; height: 14px; flex: 0 0 14px; opacity: 0; color: var(--brand-color); }
.dd-option.is-selected { color: var(--brand-color); font-weight: 700; }
.dd-option.is-selected .dd-check { opacity: 1; }
.dd-img-chip { background: #191414; border-radius: 6px; padding: 4px 8px; display: inline-flex; align-items: center; flex: 0 0 auto; }
.dd-img-chip img { height: 14px; width: auto; display: block; }
/* The Studio's always-dark editor pins the menu surface to its own greys. */
.studio-editor .dd-menu { background: var(--tool-surface-2); border-color: rgba(255, 255, 255, 0.12); }
.studio-editor .dd-option { color: var(--tool-text); }
.studio-editor .dd-option:hover { background: rgba(255, 255, 255, 0.1); }
.studio-editor .dd-option.is-selected { color: var(--brand-color); }
/* Compact pill contexts (studio home cards). */
.studio-card-team.dd-trigger { width: auto; }

/* ---- Image Gallery manager (admin workspace view) ---- */
.gallerymgr-tags-input { background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--fg-primary); border-radius: var(--radius); font: inherit; font-size: 13px; padding: 9px 12px; width: 280px; }
.gallerymgr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; }
.gallerymgr-card { position: relative; border: 1px solid var(--border-default); background: var(--bg-surface); border-radius: 10px; overflow: hidden; }
.gallerymgr-card > img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gallerymgr-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; }
.gallerymgr-tagrow { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.gallerymgr-tag { font-size: 10px; color: var(--fg-secondary); background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 99px; padding: 2px 8px; white-space: nowrap; }
.gallerymgr-tag.is-empty { opacity: 0.5; font-style: italic; }
.gallerymgr-by { font-size: 10px; color: var(--fg-tertiary); flex: 0 0 auto; }
.gallerymgr-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s ease; }
.gallerymgr-card:hover .gallerymgr-actions { opacity: 1; }

/* ---- Canvas ---- */
.studio-canvas { flex: 1; position: relative; overflow: hidden; background: var(--tool-canvas); cursor: grab; touch-action: none; }
.studio-canvas.is-panning { cursor: grabbing; }
.studio-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 1; transition: opacity 0.28s ease; }
.studio-world:not(.is-ready) { opacity: 0; transition: none; }
.studio-item { position: absolute; top: 0; }
.studio-item-canvas { display: block; width: 100%; height: 100%; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
/* Crossfade overlay while a banner re-renders (color/image/text edits). */
.studio-item-canvas.studio-fade { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; }
.studio-item-canvas.studio-fade.is-in { opacity: 1; }
/* Labels + separators counter-scale so they stay constant-size on screen. */
/* Format name above each specimen: left-aligned, bottom-anchored (keeps its
   screen size at any zoom) and ellipsized to the specimen's on-screen width. */
.studio-item-label { position: absolute; left: 0; top: -10px; padding-bottom: 2px; font-size: 12px; color: var(--tool-text); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--item-w, 600) * var(--studio-zoom, 1) * 1px); transform: scale(calc(1 / var(--studio-zoom, 1))) translateY(-100%); transform-origin: top left; }
/* Category heading above each group box (bottom-anchored so it keeps its
   screen size at any zoom, like the labels). */
.studio-group-title { position: absolute; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--tool-text); white-space: nowrap; transform: scale(calc(1 / var(--studio-zoom, 1))) translateY(-100%); transform-origin: top left; }
/* Outlined rectangle around each category group — a light hairline that stays
   1px on screen at any zoom. */
.studio-group-box { position: absolute; border: calc(1px / var(--studio-zoom, 1)) solid rgba(140, 140, 140, 0.45); border-radius: calc(12px / var(--studio-zoom, 1)); pointer-events: none; }
.studio-sep { position: absolute; top: 0; width: calc(1px / var(--studio-zoom, 1)); background: rgba(255, 255, 255, 0.14); }
.studio-world-empty { position: absolute; left: 40px; top: 40px; color: #666; font-size: 14px; white-space: nowrap; }

/* ---- Specimen lightbox (per-format image fine-tuning) ---- */
.studio-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; }
.studio-lightbox-panel { display: flex; background: var(--tool-chrome); border: 1px solid var(--tool-border-soft); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); max-width: calc(100vw - 80px); max-height: calc(100vh - 110px); }
.studio-lightbox-stage { flex: 1; min-width: 380px; background: var(--tool-canvas); display: grid; place-items: center; padding: 24px; cursor: grab; overflow: hidden; touch-action: none; }
.studio-lightbox-stage.is-dragging { cursor: grabbing; }
.studio-lb-canvas { display: block; max-width: min(720px, calc(100vw - 460px)); max-height: calc(100vh - 190px); width: auto; height: auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.studio-lightbox-side { width: 240px; flex: 0 0 240px; padding: 20px; display: flex; flex-direction: column; gap: 12px; color: var(--tool-text); border-left: 1px solid rgba(255, 255, 255, 0.08); }
.studio-lightbox-name { font-size: 14px; }
.studio-lightbox-controls { display: flex; align-items: center; gap: 6px; }
.studio-lightbox-zoom { font-size: 12px; color: var(--tool-text-dim); min-width: 44px; text-align: center; }
.studio-lightbox-side .studio-btn-white { margin-top: auto; flex: 0 0 auto; }
.studio-lb-extras { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 10px; }
.studio-lb-section { display: flex; flex-direction: column; gap: 6px; }
.studio-lb-section .studio-toggle-row { display: flex; align-items: center; justify-content: space-between; }
/* Per-canvas copy-size slider (100% → 10%, 5% steps). */
.studio-lb-sizerow { display: flex; align-items: center; gap: 8px; }
.studio-lb-sizerow input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brand-color); }
.studio-lb-sizepct { font-size: 12px; color: var(--tool-text-dim); flex: 0 0 38px; text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   Color checker v2 — Studio-style immersive canvas
   ============================================================ */
body.studio-immersive .view[data-view="color"].is-active { animation: none; }
.color-editor { display: flex; flex-direction: column; height: calc(100vh - 72px); background: #121212; color: var(--tool-text); overflow: hidden; }
.color-topbar { flex: 0 0 56px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 0 20px; background: var(--tool-chrome); border-bottom: 1px solid var(--tool-chrome-border); }
.color-tb-left { display: flex; align-items: center; gap: 12px; }
.color-zoom { display: flex; align-items: center; gap: 2px; }
.color-zoom #color-zoom-pct { font-size: 12px; color: var(--tool-text-dim); min-width: 40px; text-align: center; }
.color-tb-center { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.color-tb-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.14); margin: 0 4px; }
.color-tb-right { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.color-tb-right #ratio-value { font-size: 16px; font-weight: 800; }
.wcag-report { display: flex; align-items: center; gap: 6px; }
.wcag-chip { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #f15e6c; }
.wcag-group { display: flex; align-items: center; gap: 6px; }
.wcag-group + .wcag-group { margin-left: 12px; }
.wcag-group-label { font-size: 12px; font-weight: 700; color: var(--tool-text-dim); margin-right: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.wcag-chip.is-pass { color: var(--brand-color); }
.wcag-chip b { color: var(--tool-text); font-weight: 700; }

/* Design-system trigger + preset dropdown */
.color-system { position: relative; }
.color-system-trigger { display: flex; align-items: center; gap: 8px; border: 1px solid var(--tool-border-soft); background: var(--tool-surface-2); color: var(--tool-text); font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.color-system-trigger svg { width: 14px; height: 14px; }
.color-preset-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 220; width: 300px; max-height: 480px; overflow: auto; background: var(--tool-surface); border: 1px solid var(--tool-border-soft); border-radius: 12px; padding: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6); }
.color-menu-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.color-menu-tab { flex: 1; border: none; background: transparent; color: var(--tool-text-dim); font: inherit; font-size: 11px; font-weight: 700; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.color-menu-tab.is-active { background: rgba(255, 255, 255, 0.1); color: var(--tool-text); }
.color-menu-body { display: flex; flex-direction: column; gap: 4px; }
.color-menu-pair { display: flex; align-items: center; gap: 8px; border: none; background: transparent; color: var(--tool-text); font: inherit; font-size: 12px; padding: 7px 8px; border-radius: 8px; cursor: pointer; text-align: left; }
.color-menu-pair:hover { background: rgba(255, 255, 255, 0.08); }
.color-menu-pair.is-active { background: rgba(30, 215, 96, 0.14); }
.color-menu-pair i { width: 18px; height: 18px; border-radius: 5px; flex: 0 0 18px; border: 1px solid var(--tool-border-soft); }
.color-menu-pair span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-menu-seg { display: flex; gap: 4px; margin-bottom: 8px; }
.color-menu-seg-btn { flex: 1; border: 1px solid var(--tool-border-soft); background: transparent; color: var(--tool-text-dim); font: inherit; font-size: 11px; font-weight: 800; padding: 5px; border-radius: 6px; cursor: pointer; }
.color-menu-seg-btn.is-active { background: #fff; color: #000; border-color: var(--tool-text); }

/* Pair chips */
.color-pair-chip { position: relative; display: flex; align-items: center; gap: 8px; border: 1px solid var(--tool-border-soft); background: var(--tool-surface-2); color: var(--tool-text); font: inherit; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.color-pair-chip i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--tool-border-soft); }
.color-chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.color-chip-text b { font-size: 11px; font-weight: 700; }
.color-chip-text code { font-size: 10px; color: var(--tool-text-dim); }
.color-pair-chip .slot-copied { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.82); border-radius: 8px; font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.color-pair-chip.is-copied .slot-copied { opacity: 1; }
.color-swap { border: none; background: transparent; color: var(--tool-text); cursor: pointer; padding: 6px; border-radius: 6px; }
.color-swap svg { width: 16px; height: 16px; }
.color-swap:hover { background: rgba(255, 255, 255, 0.08); }

/* Canvas world */
.color-canvas { flex: 1; position: relative; overflow: hidden; background: var(--tool-canvas); cursor: grab; touch-action: none; }
.color-canvas.is-panning { cursor: grabbing; }
.color-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 1920px; height: 1360px; }
.color-item { position: absolute; }
.color-item .sample-stage { width: 100%; }
.color-item-label { display: block; padding-top: 12px; font-size: 22px; color: var(--tool-text); opacity: 0.8; white-space: nowrap; }

/* Top-bar compression: chips ellipsize, and below 1200px drop the color names
   (swatch + hex only) so the bar never overlaps. */
.color-tb-center { min-width: 0; }
.color-pair-chip { flex: 0 0 auto; }
.color-chip-text b { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-system, .color-tb-sep, .color-tb-center .studio-tb-btn, .color-swap { flex: 0 0 auto; }
@media (max-width: 1200px) {
  .color-chip-text b { display: none; }
  .color-tb-center { gap: 6px; }
}

/* Color checker v3: right sidebar + floating zoom pill + big centered ratio */
.color-body { flex: 1; display: flex; min-height: 0; }
.color-canvas { height: auto; }
.color-side { flex: 0 0 264px; background: var(--tool-chrome); border-left: 1px solid var(--tool-chrome-border); padding: 16px 20px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; scrollbar-width: none; }
.color-side:hover { scrollbar-width: thin; scrollbar-color: #4d4d4d transparent; }
.color-side-actions { display: flex; gap: 8px; }
.color-ratio-center { display: flex; align-items: center; justify-content: center; gap: 14px; }
.color-ratio-center #ratio-value { font-family: "Spotify Mix Wide CB", var(--font-sans); font-size: 22px; font-weight: 700; letter-spacing: 0.01em; }
.color-editor .dd-menu { background: var(--tool-surface-2); border-color: rgba(255, 255, 255, 0.12); }
.color-editor .dd-option { color: var(--tool-text); }
.color-editor .dd-option:hover { background: rgba(255, 255, 255, 0.1); }
.color-editor .dd-option.is-selected { color: var(--brand-color); }

/* Floating zoom pill — pinned bottom-right of the canvas (per reference). */
.color-zoombar { position: absolute; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--tool-surface); border: 1px solid var(--tool-border-soft); border-radius: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
.color-zoom-btn { display: grid; place-items: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--tool-text); font: inherit; font-size: 15px; border-radius: 8px; cursor: pointer; }
.color-zoom-btn:hover { background: rgba(255, 255, 255, 0.1); }
.color-zoom-btn svg { width: 15px; height: 15px; }
.color-zoom-chip { display: flex; align-items: center; gap: 5px; border: none; background: var(--tool-surface-2); color: var(--tool-text); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.color-zoom-chip svg { width: 12px; height: 12px; }
.color-zoom-menu { position: absolute; right: 0; bottom: calc(100% + 8px); background: var(--tool-surface); border: 1px solid var(--tool-border-soft); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
.color-zoom-menu button { border: none; background: transparent; color: var(--tool-text); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 18px; border-radius: 6px; cursor: pointer; text-align: left; }
.color-zoom-menu button:hover { background: rgba(255, 255, 255, 0.1); }

/* Guidelines pill (template editor, bottom-left): mirrors the zoombar pill. */
.tpl-guides-pill { right: auto; left: 20px; }
.tpl-guides-pill label { display: flex; align-items: center; gap: 7px; padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--tool-text); cursor: pointer; user-select: none; }
.tpl-guides-pill input { accent-color: var(--brand-color); margin: 0; }

/* Copy Crafter: saved-project home + sticky editor header */
.copy-home-list { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.copy-home-list .campaign-save-row { width: 100%; }
.copy-sticky { position: sticky; top: 0; z-index: 30; background: var(--bg-base); margin: -30px -34px 0; padding: 24px 34px 12px; border-bottom: 1px solid var(--border-default); }
.copy-sticky .copy-steps { margin-bottom: 0; }
#copy-stage { padding-top: 22px; }

/* Generate-step slide lightbox: large copy in Tazugane Gothic Regular,
   details in the footer, slide-in animations. */
.copy-lightbox .copy-lb-stage { display: flex; align-items: center; justify-content: center; width: min(1080px, 86vw); }
.copy-lb-slide { width: 100%; background: var(--tool-surface); border: 1px solid var(--tool-border-soft); border-radius: 18px; padding: 56px 64px 28px; display: flex; flex-direction: column; gap: 36px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.copy-lb-main { min-height: 220px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.copy-lb-footer { border-top: 1px solid var(--tool-chrome-border); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.copy-lb-foot-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.copy-lb-foot-row .copy-meta { margin: 0; }
.copy-lb-foot-row .copy-reason { margin: 0; }
.copy-lb-pick { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--tool-text); cursor: pointer; }
.copy-lb-count { font-size: 12px; color: var(--tool-text-dim); font-weight: 700; }
.copy-lb-tools { justify-content: space-between; }
@keyframes copyLbEnter { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes copyLbNext { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } }
@keyframes copyLbPrev { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } }
.copy-lb-slide.slide-enter { animation: copyLbEnter 0.28s ease; }
.copy-lb-slide.slide-next { animation: copyLbNext 0.26s ease; }
.copy-lb-slide.slide-prev { animation: copyLbPrev 0.26s ease; }
.copy-cand[data-copy-open] { cursor: pointer; }
.copy-cand[data-copy-open]:hover { border-color: rgba(255, 255, 255, 0.28); }
@media (prefers-reduced-motion: reduce) {
  .copy-lb-slide.slide-enter, .copy-lb-slide.slide-next, .copy-lb-slide.slide-prev { animation: none; }
}


/* Campaign Templates editor: every checkbox renders as a switch (the inputs
   and their change events are unchanged). The Guidelines pill on the canvas
   uses the same switch. */
.tpl-side input[type="checkbox"],
.tpl-guides-pill input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 38px;
  margin: 0 6px 0 0;
  border: none;
  border-radius: 99px;
  background: var(--neutral-200);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.2s ease;
}

.tpl-side input[type="checkbox"]::after,
.tpl-guides-pill input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.tpl-side input[type="checkbox"]:checked,
.tpl-guides-pill input[type="checkbox"]:checked { background: var(--brand-color); }
.tpl-side input[type="checkbox"]:checked::after,
.tpl-guides-pill input[type="checkbox"]:checked::after { transform: translateX(16px); }

.tpl-slot-toggle label, .tpl-check { display: flex; align-items: center; gap: 4px; cursor: pointer; }


/* Copy Crafter home: project list + the brand/Trust info box. */
.copy-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.copy-home-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px;
}

.copy-home-side .copy-brand-banner { margin: 0; }

/* The editor toolbar rides the Studio chrome (tpl-topbar); the sticky wrapper
   keeps its background through scroll. */
.copy-sticky .copy-toolbar { margin-bottom: 12px; }


/* Copy References (the Trainer). */
.copy-refs-form { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 16px 0 20px; }
.copy-refs-form textarea, .copy-refs-form input[type="text"] {
  font: inherit; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--fg-primary);
}
.copy-refs-form-row { display: flex; gap: 10px; align-items: stretch; }
.copy-refs-form-row input { flex: 1; }
.copy-ref-verdict { display: flex; gap: 4px; background: var(--neutral-100); border-radius: 8px; padding: 3px; }
.copy-ref-verdict button { border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 6px; cursor: pointer; color: var(--fg-tertiary); }
.copy-ref-verdict button.is-active { background: var(--bg-elevated); color: var(--fg-primary); box-shadow: var(--shadow-1); }
.copy-refs-list { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.copy-ref-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-elevated); }
.copy-ref-verdict-chip { flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 99px; margin-top: 2px; }
.copy-ref-row.is-good .copy-ref-verdict-chip { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.copy-ref-row.is-bad .copy-ref-verdict-chip { background: rgba(224, 36, 94, 0.12); color: #be123c; }
.copy-ref-main { flex: 1; min-width: 0; }
.copy-ref-copy { margin: 0 0 4px; font-weight: 700; }
.copy-ref-reason { margin: 0 0 4px; color: var(--fg-secondary); font-size: 13px; }
.copy-ref-meta { margin: 0; color: var(--fg-tertiary); font-size: 12px; }
.copy-ref-edit-btn {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: none; border-radius: 6px; background: transparent; color: var(--fg-tertiary); cursor: pointer;
}
.copy-ref-edit-btn:hover { background: var(--neutral-100); color: var(--fg-primary); }
.copy-ref-edit-btn svg { width: 14px; height: 14px; }
.copy-ref-row.is-editing { display: block; }
.copy-ref-edit { display: flex; flex-direction: column; gap: 10px; }
.copy-ref-edit textarea, .copy-ref-edit input[type="text"] {
  font: inherit; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--fg-primary);
}


/* Intake form (/logo-checker). */
.intake-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin-top: 20px; }
.intake-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 220px; padding: 20px; border: 2px dashed var(--border-default); border-radius: 14px;
  background: var(--bg-elevated); cursor: pointer; text-align: center; color: var(--fg-secondary);
}
.intake-drop:hover { border-color: var(--brand-color); }
.intake-drop img { max-width: 100%; max-height: 320px; border-radius: 8px; }
.intake-form textarea {
  font: inherit; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--fg-primary);
}
.intake-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.intake-done { max-width: 640px; margin-top: 28px; padding: 24px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--bg-elevated); }
.intake-done h3 { margin: 0 0 6px; color: var(--brand-color); }
.log-intake-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 99px; background: rgba(34, 197, 94, 0.14); color: #15803d; }
.log-intake-context { color: var(--fg-tertiary); font-size: 12px; margin-top: 2px; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Studio banner: the client's licensed local()-only canvas font is missing. */
.studio-font-warn {
  padding: 8px 20px; font-size: 12px; font-weight: 700;
  background: rgba(245, 158, 11, 0.16); color: #b45309;
  border-bottom: 1px solid rgba(245, 158, 11, 0.4);
}

/* Brand Colors (Brand Assets section) */
.bc-list { display: flex; flex-wrap: wrap; gap: 10px; }
.bc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border-default); border-radius: 99px; background: var(--bg-elevated); font-size: 13px; }
.bc-chip small { color: var(--fg-tertiary); }
.bc-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-default); flex: none; }
.bc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; max-width: 480px; }
.bc-row input { font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--fg-primary); }
.bc-row .bc-name { flex: 1; min-width: 0; }
.bc-row .bc-hex { width: 96px; }
#brand-colors-section .studio-cat-manage, #brand-colors-section .studio-cat-add { display: block; margin-top: 10px; }
#brand-colors-section .studio-cat-actions { max-width: 300px; margin-top: 10px; }
.studio-brandcolor-row .studio-preset-dots i { width: 90px; height: 18px; border-radius: 8px; border: 1px solid #999999; }
.studio-brandcolor-row.is-active { border-color: #121016; background: rgba(18, 16, 22, 0.06); }
.bl-default { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-secondary); cursor: pointer; }

/* Logos (Brand Assets section) */
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.bl-card { position: relative; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-elevated); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.bl-img { display: grid; place-items: center; height: 90px; border-radius: 6px;
  background: repeating-conic-gradient(var(--neutral-100) 0% 25%, var(--bg-elevated) 0% 50%) 0 0 / 16px 16px; }
.bl-img img { max-width: 90%; max-height: 80px; }
.bl-card .bl-name { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--fg-primary); }
.bl-name-ro { font-size: 13px; }
.bl-del { position: absolute; top: 6px; right: 6px; }

/* Ranking Info modal (Ranking design system) */
.ranking-info-modal { width: min(720px, 92vw); border: none; border-radius: 14px; padding: 24px; background: var(--bg-elevated); color: var(--fg-primary); box-shadow: 0 24px 64px rgba(0,0,0,0.35); }
.ranking-info-modal::backdrop { background: rgba(0,0,0,0.5); }
.ranking-info-modal h3 { margin: 0 0 6px; }
.ri-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; flex: 1; }
.ri-field span { font-size: 12px; font-weight: 700; color: var(--fg-secondary); }
.ri-field textarea { font: inherit; font-size: 13px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--fg-primary); resize: vertical; }
.ri-row { display: flex; gap: 12px; }
.ri-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.studio-ranking-info-btn { align-self: flex-start; flex: 0 0 auto; padding: 10px 18px; }

/* Corner-radius control (Figma reference): icon+number box beside a slider. */
.tpl-radius { margin: 10px 0 4px; }
.tpl-radius-row { display: flex; align-items: center; gap: 10px; }
.tpl-radius-num { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-surface); }
.tpl-radius-num svg { width: 14px; height: 14px; color: var(--fg-tertiary); flex: none; }
.tpl-radius-num input { width: 44px; border: none; background: transparent; font: inherit; font-size: 13px; color: var(--fg-primary); }
.tpl-radius-num input:focus { outline: none; }
.tpl-radius-row input[type="range"] { flex: 1; accent-color: var(--brand-color); }
.tpl-overlay-rank .tpl-guide { border-color: #7b5ea7; }
.tpl-overlay-rank .tpl-overlay-label { background: #7b5ea7; }