@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..700;1,400..700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

@import url("./onboarding-guide.css");

:root {
  color-scheme: dark;
  /* Clean Dark Obsidian & Fine-Line Palette */
  --studio-bg: #070911;
  --bg-paper: #070911;
  --bg-paper-sub: #0D101C;
  --panel: rgba(16, 20, 34, 0.88);
  --panel-2: rgba(22, 28, 46, 0.88);
  --panel-hover: rgba(28, 36, 58, 0.95);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --muted: #8E9BAE;
  --text: #F0F4F8;
  --text-bright: #FFFFFF;

  /* Sophisticated Slate/Blue Clean Accents */
  --forest-deep: #161D2C;
  --forest-mid: #25334D;
  --forest-sage: #8A9CB8;
  --forest-mist: #D0DBEB;

  /* Storytelling Accents */
  --accent-mint: #38D9A9;
  --accent-mint-hover: #20C997;
  --accent-cyan: #00E5FF;
  --accent-amber: #FFB347;
  --accent-gold: #FFD66E;

  /* Product CTA Accent (Terracotta) */
  --accent-terracotta: #D8744F;
  --accent-terracotta-hover: #E58A66;
  --accent-terracotta-active: #C0512F;
  --accent: #7C66FF;

  /* Responsive card width ensuring bottom controls never get cut off on desktop/laptop screens */
  --studio-content-width: clamp(280px, min(42vw, calc((100dvh - 280px) * 5 / 7)), 440px);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --studio-bg: #f8fafc;
  --bg-paper: #f8fafc;
  --bg-paper-sub: #f1f5f9;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-2: rgba(243, 244, 246, 0.94);
  --panel-hover: rgba(235, 238, 242, 0.98);
  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(15, 23, 42, 0.24);
  --muted: #475569;
  --text: #0f172a;
  --text-bright: #020617;

  --forest-deep: #e2e8f0;
  --forest-mid: #cbd5e1;
  --forest-sage: #475569;
  --forest-mist: #1e293b;

  --accent-mint: #059669;
  --accent-mint-hover: #047857;
  --accent-cyan: #0284c7;
  --accent-amber: #d97706;
  --accent-gold: #b45309;

  --accent-terracotta: #c2410c;
  --accent-terracotta-hover: #9a3412;
  --accent-terracotta-active: #7c2d12;
}

html[data-theme="light"] body {
  color: var(--text);
  background:
    radial-gradient(circle at 50% -12%, rgba(124, 102, 255, 0.10), transparent 42rem),
    radial-gradient(circle at 10% 90%, rgba(56, 217, 169, 0.08), transparent 32rem),
    linear-gradient(165deg, #f8fafc 0%, #f1f5f9 80%);
}

/* ─── Light Mode Splash Screen (High Contrast) ─── */
html[data-theme="light"] .studio-splash-cover {
  background: #f8fafc;
}

html[data-theme="light"] .splash-backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(124, 102, 255, 0.10), transparent 40rem),
    linear-gradient(180deg, rgba(248, 250, 252, 0.90), #f8fafc);
}

html[data-theme="light"] .splash-topbar-brand .brand-title strong {
  color: #0f172a !important;
}

html[data-theme="light"] .splash-slogan-primary {
  color: #0f172a !important;
  font-weight: 700;
}

html[data-theme="light"] .splash-slogan-secondary {
  color: #475569 !important;
  opacity: 1;
  font-weight: 500;
}

html[data-theme="light"] .splash-enter-btn {
  background: rgba(15, 23, 42, 0.06);
  border: 1.5px solid rgba(15, 23, 42, 0.22);
  color: #0f172a !important;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .splash-enter-btn .splash-enter-dot {
  background: #0f172a;
  box-shadow: 0 0 6px rgba(15, 23, 42, 0.4);
}

html[data-theme="light"] .splash-enter-btn.ready {
  background: #dcfce7 !important;
  border-color: #059669 !important;
  color: #065f46 !important;
  font-weight: 700;
  box-shadow: 0 0 24px rgba(5, 150, 105, 0.35), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] .splash-enter-btn.ready .splash-enter-dot {
  background: #059669 !important;
  box-shadow: 0 0 8px #059669 !important;
}

html[data-theme="light"] .splash-enter-btn.ready .splash-enter-arrow {
  color: #047857 !important;
}

html[data-theme="light"] .splash-enter-btn.ready:hover {
  background: #bbf7d0 !important;
  border-color: #047857 !important;
  color: #064e3b !important;
  box-shadow: 0 0 30px rgba(5, 150, 105, 0.45) !important;
}

html[data-theme="light"] .splash-progress-track {
  background: rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .splash-progress-bar {
  background: #0f172a !important;
  box-shadow: 0 0 6px rgba(15, 23, 42, 0.4) !important;
}

html[data-theme="light"] .splash-statements {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .splash-statement-item {
  color: #1e293b;
}

html[data-theme="light"] .splash-statement-item.splash-statement-highlight {
  color: #0f172a;
  border-top-color: rgba(15, 23, 42, 0.12);
  font-weight: 700;
}

/* ─── Light Mode Studio Topbar ─── */
html[data-theme="light"] .studio-topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
}

html[data-theme="light"] .brand-title {
  color: #0f172a;
}

html[data-theme="light"] .brand-title strong {
  color: #0f172a !important;
}

html[data-theme="light"] .topbar-tab {
  color: #475569;
  font-weight: 600;
}

html[data-theme="light"] .topbar-tab:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .topbar-tab.active {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

html[data-theme="light"] .icon-btn {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: #334155;
}

html[data-theme="light"] .icon-btn:hover {
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.3);
  background: #f1f5f9;
}

html[data-theme="light"] .privacy-pill {
  background: rgba(5, 150, 105, 0.10);
  border: 1px solid rgba(5, 150, 105, 0.28);
  color: #065f46;
  font-weight: 700;
}

html[data-theme="light"] .google-login-header-btn {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .header-privacy-micro {
  color: #475569;
}

html[data-theme="light"] .google-user-pill {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.14);
}

/* ─── Light Mode Control Panels & Typography ─── */
html[data-theme="light"] .control-panel {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .panel-heading h2 {
  color: #0f172a;
  font-weight: 700;
}

html[data-theme="light"] .panel-heading p {
  color: #475569;
}

html[data-theme="light"] .sovereign-tag {
  color: #065f46;
  background: rgba(5, 150, 105, 0.10);
  border: 1px solid rgba(5, 150, 105, 0.24);
  font-weight: 700;
}

html[data-theme="light"] .kicker {
  color: #059669;
  font-weight: 700;
}

html[data-theme="light"] .section-title,
html[data-theme="light"] h3,
html[data-theme="light"] h4 {
  color: #0f172a;
}

html[data-theme="light"] label {
  color: #1e293b;
  font-weight: 600;
}

html[data-theme="light"] .field-note,
html[data-theme="light"] .help,
html[data-theme="light"] .hint {
  color: #475569;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: #059669;
  outline: 2px solid rgba(5, 150, 105, 0.25);
}

html[data-theme="light"] .placeholder-primary-text {
  color: #0f172a;
  font-weight: 600;
}

html[data-theme="light"] .placeholder-sub-text {
  color: #475569;
}

/* ─── Light Mode Buttons & Stage Docks ─── */
html[data-theme="light"] .btn.primary {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}

html[data-theme="light"] .btn.primary:hover {
  background: #1e293b;
  border-color: #1e293b;
}

html[data-theme="light"] .btn.secondary,
html[data-theme="light"] .btn.outline {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.2);
}

html[data-theme="light"] .btn.secondary:hover,
html[data-theme="light"] .btn.outline:hover {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.3);
}

html[data-theme="light"] .card-flip-bar {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .card-side-pill {
  color: #64748b;
}

html[data-theme="light"] .card-side-pill.is-active {
  color: #065f46;
  background: rgba(5, 150, 105, 0.14);
  font-weight: 700;
}

html[data-theme="light"] .style-bar-dock {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .growth-claim-banner {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.10), rgba(124, 102, 255, 0.08));
  border: 1px solid rgba(5, 150, 105, 0.25);
  color: #0f172a;
}

html[data-theme="light"] .growth-claim-banner strong {
  color: #065f46;
}

html[data-theme="light"] .growth-claim-banner p {
  color: #334155;
}

html[data-theme="light"] .creator-quest-dock,
html[data-theme="light"] .invitee-endorse-dock,
html[data-theme="light"] .twin-endorse-quest-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #0f172a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .quest-title {
  color: #0f172a;
  font-weight: 700;
}

html[data-theme="light"] .quest-desc {
  color: #475569;
}

html[data-theme="light"] .opportunity-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

html[data-theme="light"] .inbox-item {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: #0f172a;
}

html[data-theme="light"] .inbox-item:hover {
  background: #f8fafc;
}

html[data-theme="light"] .dao-logo-img {
  mix-blend-mode: multiply;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--studio-bg); scroll-padding-bottom: 96px; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -12%, rgba(105, 80, 255, 0.22), transparent 42rem),
    radial-gradient(circle at 10% 90%, rgba(0, 229, 255, 0.08), transparent 32rem),
    linear-gradient(165deg, #070911 0%, #040508 80%);
}

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

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--forest-sage);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.studio-topbar {
  min-height: 64px;
  padding: 12px clamp(16px, 3vw, 38px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 18, 12, 0.88);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.twin3-split-circle-logo,
.human-id-logo-mark {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 8px rgba(125, 220, 140, 0.35));
  animation: logo-spin-slow 20s linear infinite;
  transform-origin: center;
}
.human-id-logo-mark.has-motion-gif,
.human-id-logo-mark:has(.dao-logo-img),
.splash-emblem:has(.dao-logo-img),
.splash-emblem.has-motion-gif {
  animation: none !important;
  filter: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.dao-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  mix-blend-mode: screen;
  display: block;
  pointer-events: none;
}
@keyframes logo-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.brand-title { display: flex; align-items: baseline; gap: 6px; font-size: 15px; color: var(--text-bright); }
.brand-title strong { font-family: 'Cinzel', 'EB Garamond', serif; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-bright); }
.brand-sub { font-size: 12px; color: var(--forest-sage); font-weight: 500; }
.brand-kicker { display: block; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; margin-top: 1px; }

/* Desktop Topbar Navigation */
.topbar-nav {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(15, 24, 16, 0.85);
  border: 1px solid var(--line);
  padding: 4px 6px;
  border-radius: 999px;
}
/* Removed 2026-09-16: the @media (min-width: 768px) block — every width shows the phone layout now. */
.topbar-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.16s ease;
}
.topbar-tab:hover {
  color: var(--text-bright);
  background: rgba(141, 174, 154, 0.12);
}
.topbar-tab.active {
  color: #FAFAF5;
  background: var(--forest-deep);
  border: 1px solid var(--forest-mid);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.privacy-pill,
.render-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* Ensure privacy-pill does NOT have a dot, leaving only ONE status light on screen */
.privacy-pill::before {
  display: none !important;
}
.render-pill::before {
  display: none !important;
}

.studio-shell {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 12px clamp(10px, 1.4vw, 18px) calc(var(--md3-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.5vw, 18px);
}

.control-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.panel-heading {
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--line);
}
.panel-heading h2 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-bright);
}
.panel-heading p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.panel-section { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.panel-section:last-child { border-bottom: 0; }
.section-title {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9cfdb;
}
.section-title span { color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: none; }

.upload-drop {
  min-height: 116px;
  border: 1px dashed rgba(173, 159, 255, 0.34);
  border-radius: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(116, 90, 255, 0.12), rgba(44, 201, 255, 0.06));
  transition: 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .upload-drop:hover { border-color: #9c89ff; transform: translateY(-1px); }
}
.upload-drop input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.upload-drop b { display: block; font-size: 14px; }
.upload-drop small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.5; }
.media-layer-stack { display: grid; gap: 10px; }
.cutout-upload-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.upload-drop-cutout {
  min-height: 76px;
  grid-template-columns: 38px minmax(0, 1fr);
  place-items: center start;
  gap: 11px;
  padding: 11px 12px;
  text-align: left;
  border-style: solid;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}
.upload-drop-cutout .upload-icon { margin: 0; }
.upload-drop-cutout b { font-size: 12px; }
.upload-drop-cutout small { margin-top: 3px; font-size: 10px; }
.cutout-clear { min-width: 56px; padding-inline: 9px; }
.upload-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto 9px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  font-size: 21px;
}

.micro-status { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.cutout-status { margin-top: 3px; }
.cutout-status[data-state="ready"] { color: #a5f5dc; }
.cutout-status[data-state="error"] { color: #ffb4ab; }

.range-stack { display: grid; gap: 11px; }
.range-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: #c7ccd7;
}
.range-row output { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: #8872ff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn,
.icon-btn,
.segmented button,
.recommendation-chip {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  min-height: 36px;
  padding: 8px 12px;
  cursor: pointer;
  transition: 150ms ease;
  font-weight: 700;
  font-size: 12px;
}
.btn:hover,
.icon-btn:hover,
.segmented button:hover,
.recommendation-chip:hover { border-color: var(--line-strong); background: rgba(45, 74, 53, 0.28); color: var(--text-bright); }
.btn.primary {
  background: var(--accent-terracotta);
  color: #FAFAF5;
  border: 1px solid var(--accent-terracotta-active);
  box-shadow: 0 4px 14px rgba(216, 116, 79, 0.28);
}
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover {
    background: var(--accent-terracotta-hover);
    border-color: var(--accent-terracotta-hover);
    transform: translateY(-1px);
  }
}
.btn.secondary,
.btn.outline {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--forest-mist);
}
.btn.secondary:hover,
.btn.outline:hover {
  background: rgba(45, 74, 53, 0.25);
  border-color: var(--forest-sage);
  color: var(--text-bright);
}
.btn.danger {
  color: #ff9b9b;
  background: rgba(216, 116, 79, 0.12);
  border-color: rgba(216, 116, 79, 0.28);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.vibe-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.vibe-chip { position: relative; }
.vibe-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vibe-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #bdc3d0;
  font-size: 11px;
  cursor: pointer;
}
.vibe-chip input:checked + span { color: #fff; border-color: #9b87ff; background: rgba(118, 90, 255, 0.22); }

.recommendation-box {
  margin-top: 11px;
  padding: 10px;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
}
.recommendation-list { display: grid; gap: 6px; }
.recommendation-chip { display: grid; grid-template-columns: 23px 1fr auto; align-items: center; text-align: left; }
.recommendation-chip b { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); }
.recommendation-chip em { font-style: normal; color: #a9f0dc; font-size: 11px; }

.harness-list { display: grid; gap: 7px; }
.harness-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #c7ccd8;
  font-size: 11px;
}
.harness-item::before { content: "⌁"; width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; background: rgba(90, 209, 175, 0.12); color: #81e3c7; }
.harness-item b { color: #7de1c4; font-size: 10px; }

.card-workspace { min-width: 0; display: grid; justify-items: center; gap: 14px; }
.workspace-bar {
  width: min(100%, 640px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.segmented { padding: 3px; border: 1px solid var(--line); border-radius: 14px; background: rgba(12, 14, 24, 0.76); display: flex; }
.segmented button { min-height: 32px; border: 0; border-radius: 10px; padding: 6px 14px; background: transparent; color: var(--muted); }
.segmented button[aria-pressed="true"] { background: rgba(255,255,255,.11); color: #fff; }

.card-scene {
  position: relative;
  width: min(100%, 640px);
  min-height: fit-content;
  display: grid;
  place-items: center;
  perspective: 1500px;
  touch-action: none;
}

/* 3D Breakout Allowed Range Indicator: Developer debug artifact, hidden in production */
.breakout-bounds-indicator {
  position: absolute;
  width: calc(clamp(310px, 36vw, 420px) + 96px);
  height: calc((clamp(310px, 36vw, 420px) * 7 / 5) + 48px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 24px));
  border: 1.5px dashed rgba(255, 255, 255, 0.14);
  border-bottom: 2px solid rgba(255, 255, 255, 0.04);
  border-radius: 28px 28px 15px 15px;
  pointer-events: none;
  z-index: 0;
  display: none !important;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8px;
  background: radial-gradient(ellipse at 50% 25%, rgba(255,255,255,0.018) 0%, transparent 68%);
}
[data-debug-mode="true"] .breakout-bounds-indicator,
body[data-debug-mode="true"] .breakout-bounds-indicator {
  display: flex !important;
}
.breakout-bounds-label {
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.38);
  text-transform: uppercase;
}

.flash-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --gloss-x: 50%;
  --gloss-y: 20%;
  --sparkle: 0.62;
  --gloss: 0.68;
  --theme-a: #6048ff;
  --theme-b: #32d7ff;
  --theme-c: #ff51c8;
  --ink: #ffffff;
  width: var(--studio-content-width, clamp(280px, min(42vw, calc((100dvh - 280px) * 5 / 7)), 440px)); border-radius: 20px;
  aspect-ratio: 5 / 7;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(calc(var(--tilt-y) + var(--flip, 0deg))) translateZ(0);
  transition: transform 650ms cubic-bezier(.2,.72,.2,1), filter 180ms ease;
  filter: drop-shadow(0 38px 52px rgba(0, 0, 0, 0.48));
}
.flash-card.tilt-off { --tilt-x: 0deg !important; --tilt-y: 0deg !important; }
.flash-card.is-flipped { --flip: 180deg; }

.flash-card[data-style="golden-memory"] { --theme-a: #8d5317; --theme-b: #f4c45f; --theme-c: #fff1bc; }
.flash-card[data-style="soft-pop"] { --theme-a: #e96aae; --theme-b: #9eb7ff; --theme-c: #fff0fa; }
.flash-card[data-style="nature-aura"] { --theme-a: #1a7657; --theme-b: #53d69b; --theme-c: #eaf8c7; }
.flash-card[data-style="neon-creator"] { --theme-a: #ef1aa2; --theme-b: #4b52ff; --theme-c: #2df7df; }
.flash-card[data-style="obsidian-titanium"] { --theme-a: #1e293b; --theme-b: #94a3b8; --theme-c: #f8fafc; }
.flash-card[data-style="cyber-matrix"] { --theme-a: var(--studio-card-surface, #12151c); --theme-b: var(--studio-card-accent, #65dfb4); --theme-c: var(--studio-card-accent, #65dfb4); }
.flash-card[data-style="deep-abyss"] { --theme-a: #0c4a6e; --theme-b: #0284c7; --theme-c: #38bdf8; }
.flash-card[data-style="carbon-stealth"] { --theme-a: #18181b; --theme-b: #ef4444; --theme-c: #fca5a5; }
.flash-card[data-style="industrial-steel"] { --theme-a: #27272a; --theme-b: #eab308; --theme-c: #fef08a; }
.flash-card[data-style="quantum-cosmos"] { --theme-a: #3b0764; --theme-b: #8b5cf6; --theme-c: #d8b4fe; }
.flash-card[data-style="nordic-monolith"] { --theme-a: #1f2937; --theme-b: #9ca3af; --theme-c: #f3f4f6; }
.flash-card[data-style="molten-core"] { --theme-a: #7c2d12; --theme-b: #f97316; --theme-c: #fed7aa; }

.card-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  isolation: isolate;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(10, 15, 25, 0.45) 100%);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -1px 2px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.card-holographic-rim {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 28%, rgba(255,255,255,0.06) 50%, transparent 70%, rgba(255,255,255,0.2) 100%);
  pointer-events: none;
  z-index: 18;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.15);
}

.card-portal-arch {
  display: none !important;
}

.card-front,
[data-card-front] {
  transform: rotateY(0deg);
  overflow: visible !important;
}
.card-back,
[data-card-back] {
  transform: rotateY(180deg);
  background: transparent;
  overflow: hidden;
}

.card-front::before,
[data-card-front]::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 11;
  border-radius: 8px;
  padding: 2px;
  background: conic-gradient(from 210deg, var(--theme-a), var(--theme-c), #fff, var(--theme-b), var(--theme-a));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--theme-b), transparent 60%);
}
.card-front::after,
[data-card-front]::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 12;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 6px;
  pointer-events: none;
}

.card-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: screen;
  opacity: 0.78;
  border-radius: inherit;
  transition: opacity 0.35s ease;
  display: none !important;
}
.flash-card[data-video-frame="on"] .card-video-frame {
  display: block !important;
}

/* Card Clipped Content: physical isolation boundary for rectangular photo, video, and background layers */
.card-clipped-content {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden !important;
  z-index: 1;
  pointer-events: auto;
}

.photo-drag-surface {
  position: absolute;
  inset: 14px;
  z-index: 1;
  cursor: grab;
  overflow: hidden;
  border-radius: 10px;
  background: #080c18;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.photo-drag-surface:active { cursor: grabbing; }
.photo-drag-surface.is-locked {
  cursor: pointer;
  touch-action: pan-y !important;
}
.photo-drag-surface.is-locked:active {
  cursor: pointer;
}
.photo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  -webkit-user-drag: none;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none;
}
.card-image-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}
.photo-layer[hidden],
.photo-layer:not([src]),
.photo-layer[src=""],
.photo-layer[src="about:blank"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.photo-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 270px);
  z-index: 15 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 18px;
  background: rgba(8, 14, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  pointer-events: auto !important;
  transition: background 0.25s ease, border-color 0.25s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.photo-placeholder:hover {
  background: rgba(12, 20, 36, 0.96);
  border-color: rgba(125, 220, 140, 0.35);
}
.photo-direct-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 25;
  display: block;
  -webkit-appearance: none;
  pointer-events: auto !important;
}
.flash-card:not(.has-media) .frame-world {
  opacity: 0;
  pointer-events: none;
}
.placeholder-upload-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(21, 36, 26, 0.85);
  border: 1px solid rgba(125, 220, 140, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 16px rgba(125, 220, 140, 0.25);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .photo-placeholder:hover .placeholder-upload-badge {
    transform: scale(1.08) translateY(-2px);
    border-color: rgba(125, 220, 140, 0.75);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 24px rgba(125, 220, 140, 0.45);
  }
}
.placeholder-primary-text {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.placeholder-sub-text {
  font-size: 11px;
  color: #86efac;
  margin-top: 4px;
  display: block;
  opacity: 0.95;
  font-weight: 500;
}

/* Step 1: Dedicated In-Card ID Selection Stage */
.card-id-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 290px);
  z-index: 15 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 18px;
  background: rgba(8, 14, 24, 0.96);
  border: 1px solid rgba(101, 223, 180, 0.36);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 28px rgba(101, 223, 180, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffffff;
  pointer-events: auto !important;
  user-select: none;
  box-sizing: border-box;
}

.card-id-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(101, 223, 180, 0.14);
  border: 1.5px solid rgba(125, 220, 140, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 0 16px rgba(101, 223, 180, 0.25);
}

.card-id-badge-icon {
  font-size: 14px;
  font-weight: 800;
  color: #7ddc8c;
  letter-spacing: 0.04em;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.card-id-headings {
  margin-bottom: 12px;
}

.card-id-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.card-id-desc {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.8);
  margin: 5px 0 0;
  line-height: 1.45;
  word-break: break-word;
}

.card-id-input-group {
  width: 100%;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 8px 12px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-id-input-group:focus-within {
  border-color: #65dfb4;
  box-shadow: 0 0 0 2px rgba(101, 223, 180, 0.3);
}

.card-id-prefix {
  font-size: 13px;
  font-weight: 600;
  color: rgba(101, 223, 180, 0.85);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
  user-select: none;
}

.card-id-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 0 0 0 2px;
  margin: 0;
  letter-spacing: 0.02em;
}

.card-id-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
}

.card-id-feedback {
  width: 100%;
  min-height: 18px;
  font-size: 11px;
  line-height: 1.35;
  margin: 6px 0 10px;
  color: rgba(255, 255, 255, 0.65);
  text-align: left;
  word-break: break-word;
}

.card-id-feedback.is-available {
  color: #86efac;
}

.card-id-feedback.is-error {
  color: #f87171;
}

.card-id-feedback.is-checking {
  color: #93c5fd;
}

.card-id-submit-btn {
  width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #65dfb4, #34d399);
  color: #042113;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(101, 223, 180, 0.35);
  transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .card-id-submit-btn:not(:disabled):hover {
    background: #7ddc8c;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(101, 223, 180, 0.45);
  }
}

.card-id-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.flash-card.is-step-1 .photo-placeholder,
.card-flip-controls[data-guide-step="1"] ~ * .photo-placeholder,
[data-guide-step="1"] ~ * .photo-placeholder {
  display: none !important;
}


/* When not in step 1, card-id-stage must never show */
.flash-card:not(.is-step-1) .card-id-stage {
  display: none !important;
}

.frame-world { position: absolute; inset: 14px; z-index: 5; pointer-events: none; background: none !important; border-radius: 8px; overflow: hidden; }
.frame-world::before,
.frame-world::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 0 22px color-mix(in srgb, var(--theme-b), transparent 34%);
}
.frame-world::before { width: 47%; aspect-ratio: 1; top: -8%; right: -12%; transform: rotate(22deg); }
.frame-world::after { width: 30%; aspect-ratio: 1; top: 20%; left: -17%; border-width: 7px; opacity: .55; }
.frame-spine {
  position: absolute;
  inset: 15% auto 24% 8px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--theme-b), #fff, var(--theme-c), transparent);
  box-shadow: 0 0 16px var(--theme-b);
}
.frame-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255,255,255,.9);
  opacity: .8;
}
.frame-corner.top { top: 18px; right: 18px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.frame-corner.bottom { bottom: 18px; left: 18px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }

/* 3D Breakout Stage: strictly enforces Top & Sides breakout, 0px cutoff at bottom */
.photo-breakout-stage {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  overflow: visible;
  clip-path: inset(-54px -54px 0px -54px round 24px 24px 15px 15px);
  -webkit-clip-path: inset(-54px -54px 0px -54px round 24px 24px 15px 15px);
}

.photo-cutout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
  display: block;
}
.photo-cutout[hidden] {
  display: none !important;
}
.photo-cutout[data-cutout-mode="same-photo-mask"] {
  filter: none;
}

.sparkle-layer { position: absolute; inset: 0; z-index: 14; pointer-events: none; opacity: var(--sparkle); }
.sparkle-layer i {
  position: absolute;
  font-style: normal;
  color: white;
  font-size: calc(13px * var(--s));
  text-shadow: 0 0 10px var(--theme-b), 0 0 22px var(--theme-c);
  animation: card-twinkle 2.8s ease-in-out var(--d) infinite;
}

@keyframes card-twinkle {
  0%, 100% { transform: scale(.66) rotate(0deg); opacity: .28; }
  48% { transform: scale(1.25) rotate(35deg); opacity: 1; }
}

.sticker-layer { position: absolute; inset: 0; z-index: 16; pointer-events: none; }
.card-sticker {
  position: absolute;
  width: 34px;
  height: 34px;
  translate: -50% -50%;
  transform: rotate(var(--sticker-rotate)) scale(var(--sticker-scale));
  transform-origin: center;
  padding: 0;
  border: 1.5px dashed transparent;
  background: transparent;
  color: var(--theme-b, #32d7ff);
  font-size: 24px;
  line-height: 1;
  cursor: grab;
  pointer-events: auto;
  filter: drop-shadow(0 0 6px var(--theme-b, #32d7ff)) drop-shadow(0 0 14px var(--theme-c, rgba(255,255,255,0.4))) drop-shadow(0 2px 5px rgba(0,0,0,0.55));
  transition: color 0.25s ease, filter 0.25s ease, border-color 0.2s ease;
}
.card-sticker.is-selected {
  border-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 12px var(--theme-b, rgba(50, 215, 255, 0.5));
}
.card-sticker.is-locked {
  cursor: default;
  pointer-events: none;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.card-sticker:active { cursor: grabbing; }

.sticker-delete-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  z-index: 25;
}
@media (hover: hover) and (pointer: fine) {
  .sticker-delete-badge:hover {
    transform: scale(1.25);
    background: #dc2626;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.85);
  }
}
.sticker-delete-badge:active {
  transform: scale(0.95);
}

.foil-gloss {
  position: absolute;
  inset: 14px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 17;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--gloss-x) var(--gloss-y), rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.4) 15%, transparent 45%),
    conic-gradient(from 180deg at var(--gloss-x) var(--gloss-y), rgba(255,75,205,0.3), rgba(75,215,255,0.35), rgba(125,255,140,0.3), rgba(255,215,75,0.35), rgba(255,75,205,0.3)),
    repeating-linear-gradient(117deg, transparent 0 6%, rgba(255, 79, 205, 0.15) 7%, rgba(70, 221, 255, 0.22) 11%, transparent 16% 22%);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  filter: contrast(1.15) brightness(1.1);
}
.flash-card:hover .foil-gloss,
.flash-card:active .foil-gloss {
  opacity: clamp(0.45, calc(var(--gloss) * 0.75), 0.88);
}

.burst-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: visible;
  clip-path: inset(-54px -54px 0px -54px round 24px 24px 15px 15px);
  -webkit-clip-path: inset(-54px -54px 0px -54px round 24px 24px 15px 15px);
  transform-style: preserve-3d;
  opacity: clamp(.62, var(--sparkle), .9);
  transition: opacity 180ms ease-out;
}
.burst-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
.burst-elem {
  position: absolute;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
  animation: burst-float 4.5s ease-in-out infinite;
  will-change: translate;
}
@keyframes burst-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
.burst-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.flash-card.burst-off .burst-elem,
.flash-card.burst-off .photo-cutout {
  display: none !important;
}

.front-harness {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.card-header-bar {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 22;
}

.card-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75));
}
.card-brand .brand-human {
  font-family: "Cormorant Garamond", "Cinzel", "Optima", "Didot", serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.card-brand .brand-x,
.identity-acrylic-badge .acrylic-logo .brand-x {
  font-family: "Plus Jakarta Sans", "Space Grotesk", -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: #e2e8f0;
  margin-right: 0.5px;
  line-height: 1;
  text-shadow: none;
}
.studio-topbar .card-brand .brand-x {
  font-size: 13.5px;
}
.card-brand .brand-id {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
  box-shadow: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.card-series-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(10, 16, 28, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card-series-tag:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(20, 28, 44, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
  }
}
.card-series-tag .series-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.65);
}
.card-series-tag .series-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.proof-state {
  display: none !important;
}

.identity-overlay {
  position: absolute;
  inset: auto 24px 24px 24px;
  padding-right: 60px;
  box-sizing: border-box;
  min-width: 0;
  max-height: calc(100% - 80px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  padding-top: 16px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(4, 7, 16, 0.08) 35%, rgba(4, 7, 16, 0.30) 75%, rgba(4, 7, 16, 0.46) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 22;
  pointer-events: none;
}
.identity-overlay h1 {
  margin: 0;
  font-size: clamp(18px, 3.2vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.75);
  pointer-events: auto !important;
}
.identity-overlay p {
  margin: 4px 0 0;
  font-size: clamp(10px, 1.8vw, 11px);
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.7);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto !important;
}

.identity-deck-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.identity-code {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(4, 7, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}
.identity-code small {
  color: var(--theme-b);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
}
.identity-code strong {
  font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  color: #ffffff;
}
.identity-code .card-number {
  font: 700 8px/1 ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.04em;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  padding-left: 6px;
}

.front-qr-wrapper {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto !important;
  cursor: pointer;
  user-select: none;
  transition: transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .front-qr-wrapper:hover {
    transform: scale(1.04);
  }
}
.front-qr-wrapper:hover .front-qr {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
}
.front-qr-wrapper:active {
  transform: scale(0.96);
}
.front-qr {
  width: 48px;
  height: 48px;
  padding: 3.5px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
.front-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}
.front-qr-url {
  display: none !important;
}
.front-qr-wrapper.just-copied .front-qr {
  border-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.6) !important;
}

.card-face.card-back.three-home-card-back {
  --back-ink: #183126;
  --back-muted: #536b5e;
  --back-accent: #236944;
  --back-code-bg: rgba(255, 255, 255, 0.7);
  transform: rotateY(180deg);
  position: absolute;
  inset: 0;
  padding: 16px 18px;
  color: var(--back-ink);
  background: linear-gradient(155deg, #f0f5f1 0%, #e3ece6 54%, #f7f8f5 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), inset 0 0 34px rgba(48, 105, 75, 0.06);
  cursor: default;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  border-radius: 18px;
  overflow: hidden;
  box-sizing: border-box;
}

.card-face.card-back.three-home-card-back::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(43, 91, 65, 0.18);
  border-radius: 11px;
  pointer-events: none;
}

/* Head */
.three-home-card-back-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 700 8.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 2;
}
.back-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.back-brand {
  font-weight: 800;
  color: var(--back-ink);
}
.back-card-no {
  color: var(--back-accent);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.back-agent-view-pill {
  padding: 3px 7px;
  border: 1px solid rgba(40, 117, 79, 0.35);
  border-radius: 5px;
  color: var(--back-accent);
  background: rgba(255, 255, 255, 0.6);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Record */
.three-home-card-back-record {
  padding: 1px 0 6px;
  border-bottom: 1px solid rgba(43, 91, 65, 0.14);
  display: grid;
  gap: 3px;
  position: relative;
  z-index: 2;
}
.back-record-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.back-record-kicker {
  color: var(--back-muted);
  font: 700 7.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.back-human-id {
  color: var(--back-accent);
  font: 650 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}
.back-display-name {
  max-width: 100%;
  font: 700 16px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--back-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.back-canonical-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(43, 91, 65, 0.16);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.55);
  max-width: 100%;
}
.back-canonical-code {
  flex: 1;
  font: 600 7.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--back-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.back-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: var(--back-accent);
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.back-copy-btn:hover {
  background: rgba(43, 91, 65, 0.1);
}
.back-record-axes {
  color: var(--back-muted);
  font-size: 7px;
  letter-spacing: 0.04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Score */
.three-home-card-back-score {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(43, 91, 65, 0.15);
  position: relative;
  z-index: 2;
}
.three-home-card-back-score b {
  font: 800 20px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--back-accent);
}
.three-home-card-back-score span {
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--back-muted);
}
.three-home-card-back-score small {
  margin-left: auto;
  font-size: 8px;
  line-height: 1.2;
  color: var(--back-muted);
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 4-Grid Rows */
.three-home-card-back-rows {
  display: grid;
  gap: 4px;
  font-size: 8px;
  position: relative;
  z-index: 2;
}
.three-home-card-back-rows div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border: none;
  border-bottom: 1px dashed rgba(43, 91, 65, 0.12);
  border-radius: 0;
  background: transparent;
  font: 600 8px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.three-home-card-back-rows span {
  color: var(--back-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.three-home-card-back-rows b {
  color: var(--back-ink);
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.three-home-card-back-rows .back-rights-attribution {
  margin: 0;
  color: var(--back-muted);
  font: 600 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Social */
.three-home-card-back-social {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.three-home-card-back-social span {
  margin-right: auto;
  color: var(--back-muted);
  font: 650 7px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.three-home-card-social-link {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(43, 91, 65, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: var(--back-ink);
}
@media (hover: hover) and (pointer: fine) {
  .three-home-card-social-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(28, 62, 44, 0.15);
  }
}
.three-home-card-social-link svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.three-home-card-social-link--x { color: #111; }
.three-home-card-social-link--instagram { color: #c13584; }
.three-home-card-social-link--threads { color: #101114; }
.three-home-card-social-link--linkedin { color: #0a66c2; }
.three-home-card-social-link--github { color: #24292e; }

/* Dynamic Neon Glow & Verified Linking State (MVP Polish) - kept subtle and consistent with light paper card back */
.three-home-card-social-link:not([aria-disabled="true"]) {
  border-color: rgba(43, 91, 65, 0.35);
  box-shadow: 0 1px 4px rgba(28, 62, 44, 0.12);
}
.three-home-card-social-link:not([aria-disabled="true"]):hover {
  border-color: var(--back-accent);
  box-shadow: 0 2px 8px rgba(35, 105, 68, 0.22);
}

/* Brand colour is the claim: only a verified reciprocal link keeps it. Any
   other state is dimmed, has no href and cannot be clicked. */
.three-home-card-social-link[aria-disabled="true"] {
  color: var(--back-muted);
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .three-home-card-social-link[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
}
.three-home-card-social-link[data-binding-status="lapsed_grace"] {
  opacity: 0.85;
  border-color: rgba(210, 161, 55, 0.72);
  box-shadow: 0 0 0 2px rgba(210, 161, 55, 0.14);
}
.three-home-card-social-link[data-binding-status="check_failed"] {
  opacity: 0.6;
  border-color: rgba(210, 161, 55, 0.45);
}

/* Tabs */
.three-home-card-agent-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  position: relative;
  z-index: 2;
}
.three-home-card-agent-tabs button {
  border: 1px solid rgba(43, 91, 65, 0.2);
  border-radius: 5px;
  padding: 4px;
  color: var(--back-muted);
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font: 700 7.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
  transition: all 0.15s ease;
}
.three-home-card-agent-tabs button:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--back-ink);
}
.three-home-card-agent-tabs button.is-active {
  border-color: var(--back-accent);
  color: #fff;
  background: var(--back-accent);
  box-shadow: 0 1px 4px rgba(35, 105, 68, 0.25);
}

/* Panel */
.three-home-card-agent-panel {
  position: relative;
  z-index: 2;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid rgba(43, 91, 65, 0.16);
  border-radius: 6px;
  background: var(--back-code-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.three-home-card-agent-panel[hidden] {
  display: none !important;
}
.three-home-card-agent-panel code {
  display: block;
  max-height: 42px;
  overflow: auto;
  color: var(--back-ink);
  font: 600 7.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.three-home-card-agent-panel small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--back-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 7px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Resources */
.three-home-card-agent-resources {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.three-home-card-agent-resources a {
  font: 700 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--back-accent);
  text-decoration: none;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(43, 91, 65, 0.08);
  border-bottom: none;
  transition: background 0.15s ease;
}
.three-home-card-agent-resources a:hover {
  background: rgba(43, 91, 65, 0.15);
  text-decoration: underline;
}

/* Footer: Note & Issued Date */
.three-home-card-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 6.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--back-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 1px solid rgba(43, 91, 65, 0.12);
  padding-top: 4px;
}
.three-home-card-public-note {
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.back-issued-date {
  color: var(--back-accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  margin-left: 4px;
}

.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.style-choice {
  min-height: 58px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  display: grid;
  grid-template-columns: 31px 1fr;
  gap: 8px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.style-choice[aria-pressed="true"] { border-color: #9c88ff; background: rgba(117, 88, 255, .16); box-shadow: 0 0 0 1px rgba(155,136,255,.22); }
.style-swatch { width: 31px; height: 42px; border-radius: 9px; background: linear-gradient(145deg, var(--swatch-a), var(--swatch-b) 55%, var(--swatch-c)); border: 1px solid rgba(255,255,255,.42); }
.style-choice strong { display: block; font-size: 10px; }
.style-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }

.sticker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sticker-choice { min-height: 58px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; }
.sticker-choice span { display: block; font-size: 24px; text-shadow: 0 0 10px #8f76ff; }
.sticker-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }

.form-grid { display: grid; gap: 11px; }
.field { display: grid; gap: 6px; color: #c9ced8; font-size: 10px; }
.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(0,0,0,.2);
  color: #fff;
  padding: 9px 10px;
}
.field textarea { min-height: 74px; resize: vertical; line-height: 1.45; }
.field small { color: var(--muted); line-height: 1.45; }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: #c9ced8; }
.check-row input { accent-color: #8268ff; }
.m3-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}
.m3-switch-row > span:first-child { display: grid; gap: 4px; }
.m3-switch-row strong { font-size: 12px; color: var(--text); }
.m3-switch-row small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.m3-switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
}
.m3-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.m3-switch > span {
  position: absolute;
  inset: 0;
  border: 2px solid #858795;
  border-radius: 999px;
  background: #3e404b;
  transition: background-color 180ms ease-out, border-color 180ms ease-out;
}
.m3-switch > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c7c7d2;
  translate: 0 -50%;
  transition: width 180ms ease-out, translate 180ms ease-out, background-color 180ms ease-out;
}
.m3-switch input:checked + span { border-color: var(--md3-primary, #a894ff); background: var(--md3-primary, #a894ff); }
.m3-switch input:checked + span::after { width: 20px; translate: 20px -50%; background: #24165d; }
.m3-switch input:focus-visible + span { outline: 2px solid #c9bcff; outline-offset: 3px; }
.m3-switch input:active + span::after { width: 22px; }

.machine-preview {
  width: min(1600px, calc(100% - 28px));
  margin: 0 auto 44px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(9, 11, 20, .78);
  overflow: hidden;
}
.machine-preview summary { padding: 15px 18px; cursor: pointer; font-weight: 800; font-size: 13px; }
.machine-preview pre { margin: 0; max-height: 420px; overflow: auto; padding: 18px; border-top: 1px solid var(--line); color: #bfe7da; background: rgba(0,0,0,.24); font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }

.helper-note { color: var(--muted); font-size: 11px; line-height: 1.55; text-align: center; max-width: 580px; }

/* Phone rule at every width (was a max-width: 780px media query); see the frame note at the end of studio-production-mobile.css. */
.studio-topbar { position: static; }
.privacy-pill { display: none; }
.studio-shell { padding-inline: 12px; }
.control-panel, .card-workspace { width: 100%; }
.card-scene { min-height: 570px; }
.flash-card { width: min(84vw, 340px); aspect-ratio: 5 / 7; border-radius: 15px; }

/* Phone rule at every width (was a max-width: 430px media query); see the frame note at the end of studio-production-mobile.css. */
.studio-topbar { padding: 10px 13px; }
.brand-lockup small { display: none; }
.studio-shell { padding-top: 12px; }
.card-scene { min-height: 520px; }
.flash-card { width: min(84vw, 330px); aspect-ratio: 5 / 7; border-radius: 15px; }
.workspace-bar { align-items: flex-start; }
.render-pill { display: none; }
.identity-overlay h1 { font-size: 31px; }
.style-grid { grid-template-columns: 1fr 1fr; }

/* The smallest phone still in service is 320x568, and there the card's flip
   controls ran 51px past the top of the bottom navigation — the dock sat behind
   the tab bar and could not be pressed. The scene's 520px floor is taller than
   568px of viewport can hold once the top bar and the nav have taken their
   share, so on a screen this small the floor and the card both come down. */
@media (max-width: 360px), (max-height: 600px) {
  .card-scene { min-height: 380px; }
  .flash-card { width: min(76vw, 240px); }
  /* The step guide's sentence had 76px of width here and wrapped to six lines,
     which is what pushed the dock behind the tab bar where it could not be
     pressed. Tighter spacing gives the sentence most of the row back, and it is
     clamped so a longer step cannot push the dock down there again. */
  .card-flip-controls { margin-top: 4px; padding: 2px 6px !important; gap: 6px !important; }
  .card-step-guide { gap: 6px !important; font-size: 11px !important; line-height: 1.2; }
  .card-step-guide .step-badge { font-size: 9px !important; padding: 2px 5px !important; }
  .card-step-guide .step-text {
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .flash-card { --tilt-x: 0deg !important; --tilt-y: 0deg !important; }
}

/* Material Design 3 Web App Enhancements & Tab Navigation */

:root {
  --md3-primary: #a894ff;
  --md3-primary-container: rgba(168, 148, 255, 0.16);
  --md3-on-primary: #1e0060;
  --md3-surface: #0f121d;
  --md3-surface-dim: #090b12;
  --md3-surface-variant: #1a1e2f;
  --md3-outline: rgba(255, 255, 255, 0.14);
  --md3-nav-height: 64px;
}

/* App Header with Audio & Status */
.app-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.owner-session-unknown {
  position: absolute;
  z-index: 30;
  inset-inline: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  margin: 0;
}

.studio-topbar { flex-wrap: wrap; }

.google-connection-exit-btn {
  flex: 1 0 100%;
  margin: 0;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--md3-surface-variant);
  border: 1px solid var(--md3-outline);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: rgba(168, 148, 255, 0.22);
  border-color: var(--md3-primary);
}

.icon-btn[data-active="true"] {
  background: var(--md3-primary);
  color: #0b0726;
  border-color: var(--md3-primary);
}

.header-language-control {
  position: relative;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: clip;
}

.header-language-current {
  white-space: nowrap;
}

.header-language-code {
  display: none;
  min-width: 2ch;
  text-align: center;
  text-transform: uppercase;
}

.header-language-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.header-language-control:focus-within {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--forest-sage);
}

/* Phone rule at every width (was a max-width: 430px media query); see the frame note at the end of studio-production-mobile.css. */
.studio-topbar { gap: 8px; }
.app-header-actions { gap: 6px; }
.header-language-control { gap: 4px; padding-inline: 8px; }
.header-language-control > svg:first-child,
.header-language-current { display: none; }
.header-language-code { display: inline; }

@media (max-width: 360px) {
  .studio-topbar { gap: 4px; padding-inline: 8px; }
  .app-header-actions { gap: 4px; }
  .app-header-actions > .icon-btn { min-height: 34px; padding-inline: 8px; }
}

/* Material 3 Bottom Navigation Bar */
.m3-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--md3-nav-height);
  background: rgba(15, 18, 29, 0.94);
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--md3-outline);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
}

.nav-tab .nav-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 28px;
  border-radius: 14px;
  transition: background 0.25s ease;
}

.nav-tab .nav-icon {
  font-size: 18px;
  line-height: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-unread-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #ef4444;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 0 4px;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #0f121d;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
  animation: badgePulse 2s ease-in-out infinite alternate;
}

@keyframes badgePulse {
  from { transform: scale(0.95); opacity: 0.9; }
  to { transform: scale(1.08); opacity: 1; }
}

.nav-tab.active {
  color: #ffffff;
}

.nav-tab.active .nav-pill {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

/* Tab Content Visibility Management */
[data-tab-content] {
  display: none;
}

[data-tab-content].active {
  display: block;
}

.card-workspace[data-tab-content].active {
  display: grid !important;
  justify-items: center;
  gap: 14px;
}

/* Mobile-First Single-Viewport Web App Container */
/* Phone rule at every width (was a max-width: 780px media query); see the frame note at the end of studio-production-mobile.css. */
body {
  padding-bottom: calc(var(--md3-nav-height) + 16px);
  overflow-x: hidden;
}

.studio-shell {
  display: flex;
  flex-direction: column;
  padding: 10px 12px calc(var(--md3-nav-height) + 24px);
}

.card-workspace {
  position: relative;
  z-index: 2;
  padding-bottom: 8px;
}

.card-scene {
  min-height: 480px;
}

.flash-card {
  width: min(84vw, 340px); aspect-ratio: 5 / 7; border-radius: 15px;
}

/* Sheet Drawer Pattern for Mobile */
.control-panel {
  background: rgba(22, 26, 42, 0.96);
  border-radius: 24px;
  margin-top: 12px;
  border: 1px solid var(--md3-outline);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.5);
}

/* Showcase and Binder Grid layouts */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

.deck-item {
  background: var(--md3-surface-variant);
  border: 1px solid var(--md3-outline);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .deck-item:hover {
    transform: translateY(-3px);
    border-color: var(--md3-primary);
  }
}

.deck-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deck-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(168, 148, 255, 0.2);
  color: var(--md3-primary);
}

/* Native SVG Icons for M3 Navigation and Controls */
.nav-icon svg,
.icon-btn svg,
.btn svg {
  display: block;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.sticker-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.sticker-svg {
  width: 22px;
  height: 22px;
  color: var(--text);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.card-sticker .sticker-svg {
  width: 100%;
  height: 100%;
}

/* Real Sample Portrait Switcher Bar: Developer fixtures, hidden in production */
.sample-picker-bar {
  display: none !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 12px;
  background: rgba(22, 26, 42, 0.85);
  border: 1px solid var(--md3-outline);
  border-radius: 999px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

[data-debug-mode="true"] .sample-picker-bar,
body[data-debug-mode="true"] .sample-picker-bar {
  display: flex !important;
}

.sample-picker-bar::-webkit-scrollbar { display: none; }

.sample-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10, 13, 24, 0.8);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sample-chip-btn img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.4);
}

.sample-chip-btn:hover {
  background: rgba(168, 148, 255, 0.18);
  border-color: var(--md3-primary);
  color: var(--text);
}

.sample-chip-btn.active {
  background: var(--md3-primary-container);
  border-color: var(--md3-primary);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(168, 148, 255, 0.3);
}

.sample-chip-btn.active img {
  border-color: var(--md3-primary);
}

.deck-item-thumb {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  margin-bottom: 6px;
  border: 1px solid var(--md3-outline);
}

/* ==========================================================================
   AI Thematic Breakout & Motion FX Generator Styles
   ========================================================================== */
.breakout-generator-section {
  position: relative;
  background: linear-gradient(160deg, rgba(26, 32, 54, 0.75), rgba(12, 16, 28, 0.9));
  border: 1px solid rgba(168, 148, 255, 0.28);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-title-row .section-title {
  margin-bottom: 0;
}
.regen-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(168, 148, 255, 0.18);
  border: 1px solid rgba(168, 148, 255, 0.45);
  color: #d1c4ff;
  letter-spacing: .02em;
}

/* Detected Theme Card */
.theme-detected-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 14px;
}
.theme-icon-box {
  font-size: 26px;
  line-height: 1;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.theme-info-box {
  flex: 1;
  min-width: 0;
}
.theme-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md3-primary);
  display: block;
  margin-bottom: 2px;
}
.theme-name {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.theme-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

/* 3 Preserved Variation Slots */
.variation-slot-group {
  margin-bottom: 14px;
}
.slot-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.slot-group-header small {
  color: rgba(255, 255, 255, 0.45);
}
.variation-slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.variation-slot-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 26, 0.7);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .variation-slot-btn:hover {
    border-color: rgba(168, 148, 255, 0.5);
    background: rgba(168, 148, 255, 0.08);
    transform: translateY(-1px);
  }
}
.variation-slot-btn.active {
  border-color: var(--md3-primary);
  background: linear-gradient(135deg, rgba(96, 72, 255, 0.25), rgba(50, 215, 255, 0.12));
  box-shadow: 0 0 16px rgba(96, 72, 255, 0.32);
}
.slot-letter {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 900;
  font-size: 13px;
  color: #ffffff;
  flex-shrink: 0;
}
.variation-slot-btn.active .slot-letter {
  background: var(--md3-primary);
  border-color: #ffffff;
  color: #0c0824;
  box-shadow: 0 0 8px var(--md3-primary);
}
.slot-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.slot-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}
.slot-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
}
.variation-slot-btn.active .slot-sub {
  color: rgba(255, 255, 255, 0.82);
}
.slot-check {
  font-size: 14px;
  font-weight: 900;
  color: var(--md3-primary);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s ease-out;
}
.variation-slot-btn.active .slot-check {
  opacity: 1;
  transform: scale(1);
}

/* Regenerate Action */
.regen-action-block {
  margin-top: 14px;
}
.regen-btn {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.regen-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.regen-hint {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  margin: 8px 0 0 0;
}

/* ==========================================================================
   Breakout Variations Styling on Card
   ========================================================================== */
/* Variation 0: Balanced · 和諧微破框 */
.flash-card[data-variation="0"] .burst-elem {
  scale: 0.88;
  animation-duration: 5.6s;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45));
}

/* Variation 1: Dynamic Burst · 奔放強溢出 */
.flash-card[data-variation="1"] .burst-elem {
  scale: 1.24;
  animation-duration: 3.8s;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.65)) drop-shadow(0 0 16px var(--theme-b));
}
.flash-card[data-variation="1"] .card-holographic-rim {
  box-shadow: 0 0 28px var(--theme-b), inset 0 0 18px var(--theme-c);
}

/* Variation 2: 3D Dimensional · 立體全息 */
.flash-card[data-variation="2"] .burst-elem {
  scale: 1.06;
  animation: burst-orbit 6.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5)) drop-shadow(0 0 20px var(--theme-c));
}
.flash-card[data-variation="2"] .frame-world {
  filter: drop-shadow(0 0 12px var(--theme-b));
}

@keyframes burst-orbit {
  0% { translate: 0 0; rotate: 0deg; }
  25% { translate: 3px -7px; rotate: 2deg; }
  50% { translate: -3px -11px; rotate: -2deg; }
  75% { translate: -5px -4px; rotate: 1deg; }
  100% { translate: 0 0; rotate: 0deg; }
}

/* ==========================================================================
   Twin3 SDK 7-Layer Symbiosis · Sovereign Panels & Design System
   ========================================================================== */
.card-workspace,
.sovereign-panel,
.control-panel[data-tab-content] {
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, sans-serif !important;
}

/* The workspace includes tool rails; page surfaces align with the card. */
.card-workspace {
  width: min(calc(var(--studio-content-width, 600px) + 100px), 100%) !important;
  max-width: calc(var(--studio-content-width, 600px) + 100px) !important;
}
.sovereign-panel,
.control-panel[data-tab-content] {
  width: min(var(--studio-page-width, 860px), 100%) !important;
  max-width: var(--studio-page-width, 860px) !important;
}

.sovereign-panel {
  background: linear-gradient(180deg, rgba(22, 27, 46, 0.96), rgba(12, 14, 24, 0.98));
  border: 1px solid rgba(168, 148, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.sovereign-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a894ff;
  background: rgba(168, 148, 255, 0.12);
  border: 1px solid rgba(168, 148, 255, 0.28);
  border-radius: 20px;
  padding: 3px 9px;
  margin-bottom: 8px;
}

/* Tab-context isolation: Card workspace only appears on card/id tab */
[data-flash-card-studio]:not([data-active-tab="card"]):not([data-active-tab="id"]) .card-workspace {
  display: none !important;
}

[data-flash-card-studio][data-active-tab="card"] .sovereign-panel,
[data-flash-card-studio][data-active-tab="id"] .sovereign-panel {
  display: none !important;
}

/* L5 Radar Container */
.radar-box {
  background: rgba(15, 18, 32, 0.85);
  border: 1px solid rgba(124, 248, 196, 0.2);
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.radar-box::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(124, 248, 196, 0.05), transparent 60%);
  pointer-events: none;
}
.radar-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.radar-box-header strong {
  font-size: 12.5px;
  color: #e2e8f0;
}
.radar-chip {
  font-size: 10px;
  font-weight: 700;
  color: #7cf8c4;
  background: rgba(124, 248, 196, 0.12);
  border: 1px solid rgba(124, 248, 196, 0.3);
  border-radius: 12px;
  padding: 2px 7px;
}
.radar-canvas-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
.radar-canvas {
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 280 / 200;
  filter: drop-shadow(0 0 10px rgba(124, 248, 196, 0.2));
}

/* Tolerance Controls */
.tolerance-box {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tolerance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  margin-bottom: 6px;
}
.tolerance-label { color: #94a3b8; }
.tolerance-val { color: #7cf8c4; font-family: monospace; font-size: 12px; }
.tolerance-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  -webkit-appearance: none;
  accent-color: #7cf8c4;
  cursor: pointer;
}
.tolerance-hint {
  display: block;
  font-size: 10.5px;
  color: #64748b;
  margin-top: 5px;
  line-height: 1.4;
}

/* Opportunity Cards */
.opportunity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.opportunity-card {
  background: rgba(20, 24, 40, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .opportunity-card:hover {
    background: rgba(25, 30, 50, 0.85);
    border-color: rgba(168, 148, 255, 0.35);
    transform: translateY(-2px);
  }
}
.opportunity-card.matched {
  border-color: rgba(124, 248, 196, 0.35);
  box-shadow: 0 4px 18px rgba(124, 248, 196, 0.08);
}
.opp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.opp-title-box strong {
  display: block;
  font-size: 13px;
  color: #f1f5f9;
  line-height: 1.35;
}
.opp-distance {
  font-size: 10.5px;
  color: #7cf8c4;
  font-family: monospace;
}
.opp-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  white-space: nowrap;
}
.opp-badge.verified {
  background: rgba(250, 204, 21, 0.15);
  color: #fde047;
  border: 1px solid rgba(250, 204, 21, 0.3);
}
.opp-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0 0 10px 0;
}
.opp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.opp-reward {
  font-size: 11.5px;
  color: #cbd5e1;
}
.opp-reward b {
  color: #38bdf8;
  font-size: 13px;
}
.btn-sm {
  padding: 6px 12px;
  font-size: 11.5px;
  border-radius: 8px;
}

/* L3/L6 Dashboard & Twin Asset Cards */
.sovereign-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Phone rule at every width (was a max-width: 480px media query); see the frame note at the end of studio-production-mobile.css. */
.sovereign-dashboard {
  grid-template-columns: 1fr;
}
.asset-card {
  background: linear-gradient(135deg, rgba(20, 26, 46, 0.9), rgba(14, 18, 34, 0.95));
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.asset-card.stripe-card {
  border-color: rgba(99, 102, 241, 0.3);
  background: linear-gradient(135deg, rgba(30, 26, 56, 0.9), rgba(18, 14, 38, 0.95));
}
.asset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.asset-title {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.asset-chip {
  font-size: 9.5px;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 2px 6px;
}
.pro-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 2px 6px;
}
.asset-main {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 4px 0;
}
.asset-currency {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.asset-amount {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}
.asset-unit {
  font-size: 11px;
  color: #94a3b8;
}
.pro-title {
  font-size: 18px;
  font-weight: 800;
  color: #e2e8f0;
}
.asset-meta {
  font-size: 10px;
  color: #64748b;
  line-height: 1.35;
}
.stripe-btn {
  margin-top: 8px;
  width: 100%;
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Inbox Task List & G0-G3 Priority */
.inbox-threshold-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: #fde047;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.25);
  border-radius: 12px;
  padding: 2px 8px;
}
.inbox-task-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inbox-task-item {
  background: rgba(20, 24, 40, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
}
.inbox-task-item.g3-priority {
  border-color: rgba(250, 204, 21, 0.4);
  box-shadow: 0 4px 20px rgba(250, 204, 21, 0.08);
  background: linear-gradient(180deg, rgba(35, 30, 20, 0.6), rgba(20, 24, 40, 0.8));
}
.inbox-task-item.g1-verified {
  border-color: rgba(56, 189, 248, 0.35);
}
.inbox-task-item.g0-pending {
  border-color: rgba(148, 163, 184, 0.15);
  opacity: 0.85;
}
.task-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.tier-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.tier-pill.g3 {
  background: rgba(250, 204, 21, 0.2);
  color: #fde047;
  border: 1px solid rgba(250, 204, 21, 0.4);
}
.tier-pill.g1 {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.tier-pill.g0 {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}
.task-time {
  font-size: 10.5px;
  color: #64748b;
}
.task-sender {
  display: block;
  font-size: 13px;
  color: #f1f5f9;
  margin-bottom: 4px;
}
.task-snippet {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
  margin: 0 0 8px 0;
}
.receipt-proof {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 10px;
}
.receipt-icon { font-size: 12px; }
.receipt-hash {
  font-size: 10.5px;
  color: #7cf8c4;
  font-family: monospace;
}
.task-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.waiting-tag {
  font-size: 11px;
  color: #f59e0b;
  font-style: italic;
}

/* ==========================================================================
   L2 Trust, L4 Shield, L7 Governance & New Mechanisms (Vault)
   twin3-design canonical Forest System: no side-stripes, no fake purple
   ========================================================================== */
.vault-card {
  background: rgba(15, 24, 16, 0.95);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.18s ease;
}
.vault-card:hover {
  border-color: var(--line-strong);
}
.vault-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.vault-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(45, 74, 53, 0.45);
  border: 1px solid rgba(141, 174, 154, 0.25);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--accent-mint);
  flex-shrink: 0;
}
.vault-title-box strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
}
.vault-status-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}
.vault-status-badge.active {
  color: var(--accent-mint);
}
.vault-card-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 12px 0;
}
.vault-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--forest-mist);
}
.switch-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(141, 174, 154, 0.12);
  color: var(--muted);
}
.switch-badge.on {
  background: rgba(45, 74, 53, 0.5);
  color: var(--accent-mint);
  border: 1px solid rgba(125, 220, 140, 0.3);
}

.wallet-field {
  background: rgba(10, 18, 12, 0.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.wallet-field small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--forest-sage);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.wallet-addr {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-bright);
  word-break: break-all;
}

/* 1. Social Media Bindings Grid */
.social-bindings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.social-binding-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(10, 18, 12, 0.7);
  border: 1px solid var(--line);
}
.social-binding-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-binding-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--forest-sage);
}
.social-binding-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.social-platform-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
}
.social-handle-text {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.binding-status-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(141, 174, 154, 0.12);
  color: var(--muted);
}
.binding-status-pill.verified {
  background: rgba(45, 74, 53, 0.5);
  color: var(--accent-mint);
  border: 1px solid rgba(125, 220, 140, 0.3);
}

/* 2. Humanity Status Card */
.humanity-score-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(45, 74, 53, 0.25);
  border: 1px solid rgba(141, 174, 154, 0.22);
  border-radius: 10px;
  margin-bottom: 12px;
}
.humanity-score-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 600;
  color: var(--accent-mint);
}
.humanity-score-label {
  font-size: 11px;
  color: var(--forest-mist);
}

/* 3. Frame Backing & Peer Vouching */
.backing-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.backing-stat-box {
  background: rgba(10, 18, 12, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.backing-stat-box strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  color: var(--text-bright);
}
.backing-stat-box span {
  font-size: 11px;
  color: var(--muted);
}
.backing-friends-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.friend-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(45, 74, 53, 0.3);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--forest-mist);
}
.friend-badge-chip.mutual {
  border-color: rgba(125, 220, 140, 0.4);
  color: var(--accent-mint);
}

/* 4. Personal Agent Delegation */
.agent-policy-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.agent-policy-select {
  width: 100%;
  background: rgba(10, 18, 12, 0.9);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-bright);
  font-size: 12px;
}

/* L4 Differential Shield Log (Anti-Slop: NO border-left stripe) */
.shield-credit-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-mint);
  background: rgba(45, 74, 53, 0.4);
  border: 1px solid rgba(125, 220, 140, 0.3);
  border-radius: 999px;
  padding: 2px 10px;
}
.shield-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shield-log-item {
  background: rgba(15, 24, 16, 0.92);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.shield-log-item.orange-alert {
  border-color: rgba(255, 154, 60, 0.35);
  background: rgba(255, 154, 60, 0.07);
}
.shield-log-item.red-alert {
  border-color: rgba(216, 116, 79, 0.45);
  background: rgba(216, 116, 79, 0.1);
}
.shield-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.alert-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.alert-badge.orange {
  background: rgba(255, 154, 60, 0.22);
  color: var(--accent-amber);
}
.alert-badge.red {
  background: rgba(216, 116, 79, 0.25);
  color: #ff9b9b;
}
.alert-points {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--forest-mist);
}
.alert-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
}
.alert-detail {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* L7 Immutable Evidence Timeline */
.genesis-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--forest-sage);
}
.evidence-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 16px;
  position: relative;
  border-left: 1px solid var(--line-strong);
  margin: 10px 0;
}
.evidence-node {
  position: relative;
}
.node-dot {
  position: absolute;
  left: -21px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-mint);
  box-shadow: 0 0 8px rgba(125, 220, 140, 0.6);
}
.node-content strong {
  display: block;
  font-size: 12.5px;
  color: var(--text-bright);
}
.node-hash {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--forest-mist);
  margin-top: 3px;
  word-break: break-all;
}

/* Share Card Modal */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.share-modal[hidden] {
  display: none !important;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 11, 8, 0.85);
  backdrop-filter: blur(8px);
}
.modal-dialog {
  position: relative;
  width: min(540px, 100%);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
}
.og-card-preview-box {
  width: 100%;
  aspect-ratio: 1.91 / 1;
  background: rgba(10, 18, 12, 0.9);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  gap: 8px;
}
.og-card-preview-title {
  font-family: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-bright);
}
.og-card-preview-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--forest-sage);
}
.share-links-row {
  display: flex;
  gap: 10px;
}

/* Native Album & Share Button Styles */
.download-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ==========================================================================
   Viral Growth & Google Login Persistence Styles
   ========================================================================== */

/* Topbar Google Login Button & Pill */
.google-login-header-group {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.header-privacy-micro {
  font-size: 9.5px;
  color: #94a3b8;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.85;
}
.google-login-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .google-login-header-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 16px rgba(66, 133, 244, 0.3);
    transform: translateY(-1px);
  }
}
.google-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.35);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
}
.google-user-pill .user-avatar-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4285F4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.google-user-pill .user-handle-label {
  font-weight: 600;
  color: #2dd4bf;
}
.google-user-pill .user-saved-tag {
  font-size: 10px;
  background: rgba(45, 212, 191, 0.2);
  color: #5eead4;
  padding: 2px 6px;
  border-radius: 6px;
}

/* Credential Privacy Pill */
.credential-privacy-pill {
  display: inline-block;
  font-size: 10.5px;
  color: #5eead4;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.25);
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
}

/* Workspace Growth & Claim Banner */
.growth-claim-banner {
  width: min(100%, 640px);
  margin: 0 auto;
  box-sizing: border-box;
}
.banner-unclaimed, .banner-claimed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 16px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.45;
  box-sizing: border-box;
}
.banner-text-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.banner-privacy-micro {
  font-size: 11px;
  color: #fde68a;
  opacity: 0.85;
  letter-spacing: 0.01em;
}
.banner-unclaimed {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fde68a;
}
.banner-claimed {
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.3);
  color: #ccfbf1;
}
.banner-action-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.banner-action-btn:hover {
  background: #ffffff;
  color: #0f172a;
}
.banner-action-btn.primary {
  background: #2dd4bf;
  color: #042f2e;
  border-color: #2dd4bf;
}
.banner-action-btn.primary:hover {
  background: #5eead4;
}

/* Phone rule at every width (was a max-width: 600px media query); see the frame note at the end of studio-production-mobile.css. */
.banner-unclaimed, .banner-claimed {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
}
.banner-action-btn {
  align-self: flex-start;
}
.endorse-banner-content {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.endorse-action-btn {
  align-self: flex-start;
}

/* Public Endorsement Top Banner (視角 B) */
.public-endorse-banner {
  width: min(100%, 640px);
  margin: 0 auto;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0.15), rgba(45, 212, 191, 0.2));
  border: 1px solid rgba(129, 140, 248, 0.4);
  border-radius: 14px;
  padding: 8px 16px;
  animation: pulseEndorse 2.5s infinite alternate;
}
@keyframes pulseEndorse {
  0% { box-shadow: 0 0 10px rgba(129, 140, 248, 0.15); }
  100% { box-shadow: 0 0 20px rgba(45, 212, 191, 0.3); }
}
.endorse-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #e0e7ff;
}
.endorse-action-btn {
  background: linear-gradient(135deg, #6366f1, #2dd4bf);
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
  transition: transform 0.15s ease;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .endorse-action-btn:hover {
    transform: scale(1.03);
  }
}

/* Creator Core Quest Action Bar below dock */
.creator-quest-action-dock {
  margin-top: 14px;
  width: 100%;
}
.creator-quest-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(99, 102, 241, 0.15) 50%, rgba(56, 189, 248, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(16, 185, 129, 0.16);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .creator-quest-btn:hover {
    border-color: rgba(52, 211, 153, 0.7);
    box-shadow: 0 6px 30px rgba(52, 211, 153, 0.32);
    transform: translateY(-2px);
  }
}
.creator-quest-btn .quest-left-col {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.creator-quest-btn .sparkle-symbol {
  color: #34d399;
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.8));
  animation: pulseSparkle 2s ease-in-out infinite alternate;
}
@keyframes pulseSparkle {
  from { opacity: 0.75; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.15); }
}
.creator-quest-btn .quest-text-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.creator-quest-btn .quest-title {
  font-weight: 700;
  font-size: 13.5px;
  color: #f8fafc;
  letter-spacing: 0.01em;
}
.creator-quest-btn .quest-sub {
  font-size: 11.5px;
  color: #a7f3d0;
  font-weight: 500;
}
.creator-quest-btn .quest-right-col {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.creator-quest-btn .quest-cta-pill {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .creator-quest-btn:hover .quest-cta-pill {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.6);
  }
}

/* Invitee / Backer Action Bar below dock */
.invitee-endorse-dock {
  margin-top: 14px;
  width: 100%;
}
.endorse-card-banner {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(129, 140, 248, 0.4);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.endorse-badge-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(129, 140, 248, 0.2);
  color: #818cf8;
  margin-bottom: 8px;
}
.endorse-text {
  font-size: 13.5px;
  color: #cbd5e1;
  margin: 0 0 12px;
}
.endorse-note-box {
  margin: 0 0 14px;
  text-align: left;
}
.endorse-note-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 6px;
}
.endorse-note-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(129, 140, 248, 0.35);
  border-radius: 10px;
  padding: 0 12px;
  transition: all 0.2s ease;
}
.endorse-note-input-wrap:focus-within {
  border-color: #818cf8;
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.35);
  background: rgba(0, 0, 0, 0.6);
}
.endorse-note-icon {
  font-size: 13px;
  opacity: 0.8;
}
.endorse-note-input {
  width: 100%;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 12.5px;
  padding: 9px 0;
  outline: none;
}
.endorse-note-input::placeholder {
  color: #64748b;
  font-size: 12px;
}
.endorse-large-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  color: #ffffff;
  border: none;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .endorse-large-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 26px rgba(79, 70, 229, 0.7);
  }
}

/* Viral Social Share Hub Dialog */
.viral-share-dialog {
  width: min(580px, 95vw);
  background: #090d16;
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}
.modal-header-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.header-title-group {
  flex: 1;
}
.header-title-group h3 {
  margin: 0 0 4px;
  font-size: 16.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.35;
}
.share-modal-subheading {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
}
.modal-header-title .header-sparkle {
  color: #2dd4bf;
  font-size: 18px;
  margin-top: 1px;
}

/* Contextual Claim Gate Dialog */
.claim-gate-dialog {
  width: min(460px, 94vw);
  background: #0b0f19;
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 32px rgba(99, 102, 241, 0.2);
}
.claim-gate-emblem {
  font-size: 32px;
  color: #a894ff;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px rgba(168, 148, 255, 0.6));
}
.claim-gate-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}
.claim-gate-desc {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0 0 22px;
}
.claim-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.claim-gate-actions .btn.text {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  padding: 6px;
  transition: color 0.15s ease;
}
.claim-gate-actions .btn.text:hover {
  color: #f1f5f9;
  text-decoration: underline;
}
.share-invite-link-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 12px;
}
.share-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}
.share-input-group {
  display: flex;
  gap: 8px;
}
.share-link-input {
  flex: 1;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}
.share-copy-icon-btn {
  width: 44px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: #27272a !important;
  color: #e4e4e7 !important;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.share-copy-icon-btn:hover {
  background: #3f3f46 !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.social-channels-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #94a3b8;
  margin: 4px 0 8px;
}
.social-share-channels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
/* Phone rule at every width (was a max-width: 520px media query); see the frame note at the end of studio-production-mobile.css. */
.social-share-channels-grid {
  grid-template-columns: repeat(2, 1fr);
}
.social-channel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.16s ease;
}
.social-channel-btn.line {
  background: #007a33;
  color: #ffffff;
}
.social-channel-btn.instagram {
  background: #76284f;
  color: #ffffff;
}
.social-channel-btn.messenger {
  background: #0057a3;
  color: #ffffff;
}
.social-channel-btn.twitter {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.social-channel-btn.download-card {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
}
.social-channel-btn.preview-invitee {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}
@media (hover: hover) and (pointer: fine) {
  .social-channel-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
}

/* Endorsement Success & Conversion Modal (視角 B 閉環) */
.endorsement-dialog {
  background: #090d16;
  border: 1px solid rgba(99, 102, 241, 0.45);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
}
.celebration-emblem {
  font-size: 38px;
  margin-bottom: 8px;
  animation: bounceEmblem 1s ease;
}
@keyframes bounceEmblem {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
.endorse-celebration-head h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}
.celebration-meta {
  font-size: 13.5px;
  color: #94a3b8;
  margin: 0 0 14px;
}
.celebration-backer-note {
  background: rgba(129, 140, 248, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 16px;
  text-align: center;
}
.backer-note-badge {
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.backer-note-content {
  font-size: 13.5px;
  color: #f1f5f9;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.backer-note-content .quote-mark {
  color: #818cf8;
  font-size: 16px;
  font-weight: 700;
}
.growth-conversion-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.conversion-hook .hook-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #2dd4bf;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.conversion-hook h4 {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 6px;
  line-height: 1.4;
}
.conversion-hook p {
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}
.google-claim-hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #ffffff;
  color: #0f172a;
  border: none;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.25);
  transition: all 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .google-claim-hero-btn:hover {
    background: #f1f5f9;
    box-shadow: 0 6px 28px rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
  }
}
.conversion-sub {
  text-align: center;
  font-size: 11px;
  color: #64748b;
}
.conversion-privacy-note {
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  margin-top: -6px;
}
.modal-footer-row {
  margin-top: 14px;
}

/* ==========================================================================
   Card Action Bar (Preview-First Direct Interaction)
   ========================================================================== */
.card-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  max-width: 480px;
  width: 100%;
  margin: 16px auto 10px;
  padding: 0 8px;
}

.card-action-bar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.card-action-bar .btn.primary {
  flex: 1 1 140px;
  background: linear-gradient(135deg, #7c4dff, #651fff);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(124, 77, 255, 0.35);
}

.card-action-bar .btn.secondary {
  flex: 1 1 130px;
  background: rgba(255, 255, 255, 0.08);
  color: #f1f3f9;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.card-action-bar .btn.outline {
  flex: 1 1 90px;
  background: transparent;
  color: #b0b8d0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 12px;
  font-size: 13px;
}

@media (hover: hover) and (pointer: fine) {
  .card-action-bar .btn:hover {
    transform: translateY(-1px);
  }
}

.card-action-bar .btn:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Card Editor Bottom Sheet / Modal (Progressive Disclosure)
   ========================================================================== */
.card-editor-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.card-editor-sheet.active,
.card-editor-sheet:not([hidden]) {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.card-editor-sheet[hidden] {
  display: none !important;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.sheet-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #111422;
  border: 1px solid rgba(168, 148, 255, 0.25);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -16px 56px rgba(0, 0, 0, 0.75);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.card-editor-sheet.active .sheet-container {
  transform: translateY(0);
}

.sheet-drag-handle {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  margin: 10px auto 4px;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sheet-header-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.sheet-header-title .sheet-sub {
  font-size: 12px;
  color: #8c97b8;
}

.sheet-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #ccd2e8;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sheet-close-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* 5 Tab Navigation within Sheet */
.sheet-nav-bar {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(18, 22, 38, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  scrollbar-width: none;
}
.sheet-nav-bar::-webkit-scrollbar {
  display: none;
}

.sheet-tab-btn {
  flex: 1 0 auto;
  min-width: 64px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #8c97b8;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s ease, background 0.15s ease;
}

.sheet-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.sheet-tab-btn.active {
  color: #fff;
  background: rgba(124, 77, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(124, 77, 255, 0.45);
}

.sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  -webkit-overflow-scrolling: touch;
}

.sheet-content[hidden] {
  display: none !important;
}

.editor-toggle-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.editor-toggle-row .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12.5px;
}

.harness-spec-badge {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(124, 248, 196, 0.1);
  border: 1px solid rgba(124, 248, 196, 0.3);
  border-radius: 8px;
  color: #7cf8c4;
  font-size: 12px;
  font-weight: 600;
}

/* Sticky Footer inside Sheet */
.sheet-footer {
  display: flex;
  gap: 12px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #111422;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  justify-content: flex-end;
}

.sheet-footer .btn {
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
}

/* ==========================================================================
   Human ID Splash Screen & Sovereign Opening Ceremony
   ========================================================================== */
.studio-splash-cover {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080E09;
  background: radial-gradient(circle at 50% 38%, rgba(35, 62, 44, 0.7) 0%, rgba(8, 14, 9, 0.98) 75%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  visibility: visible;
  padding: 24px;
}

.studio-splash-cover.splash-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  display: none !important;
  transform: scale(1.03);
}
.splash-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(105, 80, 255, 0.18), transparent 38rem),
    linear-gradient(180deg, rgba(7, 9, 17, 0.95) 0%, rgba(4, 5, 8, 0.98) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.splash-topbar-brand {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 10;
}

.splash-content {
  position: relative;
  z-index: 1;
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: splashFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.splash-emblem-wrap {
  margin-bottom: 22px;
  position: relative;
}

.splash-portal-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  outline: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.splash-portal-btn.ready {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .splash-portal-btn.ready:hover {
    transform: scale(1.06);
  }
}

.splash-emblem {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  position: relative;
  transition: all 0.4s ease;
}

.splash-portal-btn.ready .splash-emblem {
  box-shadow: 0 0 36px rgba(255, 255, 255, 0.45), 0 0 16px rgba(0, 229, 255, 0.3);
  animation: portalPulse 2.4s ease-in-out infinite;
}

@keyframes portalPulse {
  0%, 100% {
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.3), 0 0 10px rgba(0, 229, 255, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 44px rgba(255, 255, 255, 0.65), 0 0 24px rgba(0, 229, 255, 0.5);
    transform: scale(1.04);
  }
}

.splash-emblem svg {
  width: 64px;
  height: 64px;
  animation: logo-spin-slow 20s linear infinite;
  transform-origin: center;
  filter: drop-shadow(0 4px 16px rgba(124, 102, 255, 0.45));
}

.splash-emblem .splash-orb-canvas {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(229, 227, 209, 0.25));
}

.splash-emblem .dao-logo-img {
  width: 96px;
  height: 96px;
  border-radius: 50% !important;
  clip-path: circle(50% at center);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: block;
  object-fit: contain;
}

/* White progress line placed right under button and above patent note */
.splash-progress-track {
  width: 100%;
  max-width: 180px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  box-shadow: none;
}

/* Splash Protocol Audit Component */
.splash-protocol-audit {
  width: 100%;
  max-width: min(380px, 92vw);
  margin: 0 auto 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.splash-protocol-audit .audit-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.splash-protocol-audit .audit-progress-bar {
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 999px;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.splash-protocol-audit .audit-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.splash-protocol-audit .audit-phase-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace, system-ui, sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.splash-protocol-audit .splash-skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

@media (hover: hover) and (pointer: fine) {
  .splash-protocol-audit .splash-skip-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
  }
}

.splash-protocol-audit .splash-skip-btn.ready {
  background: #ffffff;
  border-color: #ffffff;
  color: #090d16;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
@media (hover: hover) and (pointer: fine) {
  .splash-protocol-audit .splash-skip-btn.ready:hover {
    background: #f1f5f9;
    border-color: #ffffff;
    transform: translateY(-1px) scale(1.03);
  }
}

.splash-slogan-title {
  font-family: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.03em;
  margin: 0 auto 18px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.splash-progress-bar {
  height: 100%;
  width: 0%;
  background: #FFFFFF;
  border-radius: 999px;
  transition: width 0.08s linear;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.splash-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 1) 50%, transparent 100%);
  animation: progressShimmer 1.2s ease-in-out infinite;
}

@keyframes progressShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.splash-slogan-primary {
  font-family: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #FAFAF5;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: center;
}

.splash-slogan-secondary {
  font-size: 10.5px;
  color: var(--muted);
  margin: 0 auto;
  line-height: 1.6;
  max-width: 340px;
  letter-spacing: 0.02em;
  opacity: 0.75;
  text-align: center;
}

/* 核心身分主張與產品服務介紹 (5 Statements) */
.splash-statements {
  width: 100%;
  max-width: 440px;
  margin: 0 auto 20px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(10, 18, 12, 0.75);
  border: 1px solid rgba(125, 220, 140, 0.18);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
}

.splash-statement-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #D2DCD4;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}

.splash-statement-item .statement-bullet {
  color: #F4C45F;
  font-size: 10px;
  flex-shrink: 0;
  opacity: 0.9;
  text-shadow: 0 0 8px rgba(244, 196, 95, 0.5);
}

.splash-statement-item .statement-text {
  font-weight: 500;
  flex: 1;
}

.splash-statement-item.splash-statement-highlight {
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #FAFAF5;
  font-weight: 600;
}

.splash-statement-item.splash-statement-highlight .statement-bullet {
  color: #7DDC8C;
  text-shadow: 0 0 10px rgba(125, 220, 140, 0.6);
}

/* Phone rule at every width (was a max-width: 480px media query); see the frame note at the end of studio-production-mobile.css. */
.splash-statements {
  max-width: 330px;
  padding: 12px 14px;
  gap: 8px;
  margin-bottom: 16px;
}
.splash-statement-item {
  font-size: 12px;
  gap: 8px;
}

.splash-enter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 8px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  cursor: not-allowed;
  pointer-events: none;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 1;
  transform: translateY(0);
  min-width: 260px;
  max-width: min(440px, 92vw);
  user-select: none;
}

.splash-enter-btn .splash-enter-text {
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.splash-enter-btn.text-shifting .splash-enter-text {
  opacity: 0.3;
  transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
  .splash-enter-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  }
}

.splash-enter-btn .splash-enter-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px #FFFFFF;
  animation: enterDotPulse 1.2s ease-in-out infinite;
  display: inline-block;
  flex-shrink: 0;
}

.splash-enter-btn .splash-enter-arrow {
  display: none;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

@keyframes enterDotPulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  }
}

.splash-enter-btn.ready {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.85);
  color: #FFFFFF;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.42), 0 0 12px rgba(34, 197, 94, 0.25), inset 0 0 8px rgba(34, 197, 94, 0.12);
  animation: enterBtnGreenPulse 2.0s ease-in-out infinite;
}

.splash-enter-btn.ready .splash-enter-dot {
  display: inline-block;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e, 0 0 16px #22c55e;
  animation: greenDotGlow 1.5s ease-in-out infinite;
}

.splash-enter-btn.ready .splash-enter-arrow {
  display: inline-block;
  color: #4ade80;
  margin-left: 2px;
}

@keyframes enterBtnGreenPulse {
  0%, 100% {
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.35), 0 0 10px rgba(34, 197, 94, 0.2);
  }
  50% {
    border-color: rgba(74, 222, 128, 1);
    box-shadow: 0 0 32px rgba(34, 197, 94, 0.65), 0 0 18px rgba(74, 222, 128, 0.45), inset 0 0 12px rgba(34, 197, 94, 0.22);
  }
}

@keyframes greenDotGlow {
  0%, 100% {
    opacity: 0.85;
    box-shadow: 0 0 6px #22c55e, 0 0 12px #22c55e;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 10px #4ade80, 0 0 20px #4ade80;
  }
}

@media (hover: hover) and (pointer: fine) {
  .splash-enter-btn.ready:hover {
    background: rgba(34, 197, 94, 0.22);
    border-color: #4ade80;
    box-shadow: 0 0 36px rgba(34, 197, 94, 0.75), 0 0 20px rgba(74, 222, 128, 0.5), inset 0 0 14px rgba(34, 197, 94, 0.3);
    transform: translateY(-2px) scale(1.02);
  }
}

@media (hover: hover) and (pointer: fine) {
  .splash-enter-btn.ready:hover .splash-enter-arrow {
    transform: translateX(2px);
  }
}

@keyframes splashFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   STAGE CONTROLS: Centered Flip & Main-Stage Style Bar
   (Annotation 8, 9, 3 & Zero Clutter Specification)
   ========================================================= */

.card-stage-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 480px;
  margin: 2px auto 8px;
  z-index: 10;
}

.card-flip-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: min(94vw, 460px);
  margin: 0 auto;
  background: rgba(13, 17, 27, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 5px 6px 5px 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(100, 140, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
  gap: 12px;
}

.card-step-guide {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #f1f5f9;
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.card-step-guide .step-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  box-shadow: none;
}

.card-step-guide .step-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
  letter-spacing: -0.01em;
  line-height: 1.35;
  word-break: break-word;
}

.card-front-status-wrap {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 25;
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.card-front-status-wrap .render-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  height: 24px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.card-front-status-wrap .render-pill:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
  color: #f1f5f9;
}

.card-front:has(.front-qr-wrapper:not([hidden])) .card-front-status-wrap {
  display: none !important;
}

.card-front:has(.card-front-status-wrap) .card-acrylic-serial {
  right: auto !important;
  max-width: calc(100% - 150px) !important;
}

.side-flip-icon-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(20, 26, 40, 0.85);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

@media (hover: hover) and (pointer: fine) {
  .side-flip-icon-btn:hover {
    background: rgba(30, 41, 62, 0.95);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  }
}

.side-flip-icon-btn:active {
  transform: scale(0.95) rotate(180deg);
}

/* --- Inline Google Claim Button Under Card (Comment 1) --- */
.inline-google-claim-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #e2e8f0;
  padding: 5px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 14px rgba(66, 133, 244, 0.35);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: auto;
  user-select: none;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .inline-google-claim-btn:hover {
    background: #f8fafc;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 4px 14px rgba(66, 133, 244, 0.5);
    border-color: #4285f4;
  }
}
.inline-google-claim-btn:active {
  transform: translateY(0) scale(0.97);
}
.inline-google-claim-btn .google-btn-icon {
  flex-shrink: 0;
}

/* --- Spinning Google Icon & Pulsing Flip Button in Step 2 (Comments 2 & 3) --- */
@keyframes spinClaimGoogle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pulseClaimBtn {
  0% {
    border-color: rgba(66, 133, 244, 0.8);
    box-shadow: 0 0 12px rgba(66, 133, 244, 0.5), inset 0 0 6px rgba(66, 133, 244, 0.3);
  }
  50% {
    border-color: rgba(52, 168, 83, 0.9);
    box-shadow: 0 0 18px rgba(52, 168, 83, 0.65), inset 0 0 8px rgba(52, 168, 83, 0.35);
  }
  100% {
    border-color: rgba(251, 188, 5, 0.85);
    box-shadow: 0 0 14px rgba(251, 188, 5, 0.5), inset 0 0 6px rgba(251, 188, 5, 0.3);
  }
}
.side-flip-icon-btn.is-google-claim {
  background: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  animation: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .side-flip-icon-btn.is-google-claim:hover {
    background: #f8fafc !important;
    border-color: #ffffff !important;
    transform: scale(1.06) !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  }
}
.side-flip-icon-btn.is-google-claim:active {
  transform: scale(0.96) !important;
}
.side-flip-icon-btn.is-google-claim .flip-default-icon,
.side-flip-icon-btn.is-google-claim .next-step-icon {
  display: none !important;
}
.side-flip-icon-btn.is-google-claim .google-claim-spin-icon {
  display: block !important;
  animation: none !important;
}
.side-flip-icon-btn.is-google-claim {
  width: auto !important;
  max-width: min(136px, calc(100vw - 190px));
  min-width: 0;
  min-height: 44px;
  padding-inline: 8px;
  gap: 6px;
  border-radius: 999px;
  font-size: 11px;
  white-space: normal;
}
.side-flip-icon-btn.is-google-claim .google-claim-step-label { display: inline; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.side-flip-icon-btn.is-google-claim .google-claim-spin-icon { flex: 0 0 auto; width: 16px; height: 16px; }
.card-flip-controls:has(.side-flip-icon-btn.is-google-claim) .card-step-guide { min-width: 88px; }

/* --- Annotation 3: Step 1 Next Step Button State --- */
.side-flip-icon-btn .next-step-icon {
  display: none;
}
.side-flip-icon-btn.is-next-step {
  background: #65dfb4 !important;
  border-color: #7ddc8c !important;
  color: #04130d !important;
  box-shadow: 0 0 16px rgba(101, 223, 180, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  animation: nextStepPulse 2.2s ease-in-out infinite !important;
}
@media (hover: hover) and (pointer: fine) {
  .side-flip-icon-btn.is-next-step:hover {
    background: #7ddc8c !important;
    border-color: #a7f3d0 !important;
    transform: scale(1.08) !important;
    color: #04130d !important;
    box-shadow: 0 0 24px rgba(101, 223, 180, 0.8), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  }
}
.side-flip-icon-btn.is-next-step:active {
  transform: scale(0.96) !important;
}
.side-flip-icon-btn.is-next-step .flip-default-icon,
.side-flip-icon-btn.is-next-step .google-claim-spin-icon {
  display: none !important;
}
.side-flip-icon-btn.is-next-step .next-step-icon {
  display: block !important;
}

@keyframes nextStepPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(101, 223, 180, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 22px rgba(101, 223, 180, 0.75), 0 3px 12px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-flip-icon-btn.is-next-step {
    animation: none !important;
  }
}

/* --- Annotation 2: Left Frames and Right Stickers Sidebars --- */
.card-side-palette {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  background: rgba(14, 18, 28, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
  z-index: 25;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* The rails sit outside the card, and the floor keeps them on screen. The
   annotations pull them further out and stagger them — frames higher, stickers
   lower — so neither rail lines up with the card's own middle. Below 640px
   there is no room outside the scene, so the floor stays positive there. */
.card-side-palette.left-frames {
  left: max(6px, calc(50% - (var(--studio-content-width) / 2) - 75px));
  transform: translateY(-50%);
}

.card-side-palette.right-stickers {
  right: max(6px, calc(50% - (var(--studio-content-width) / 2) - 74px));
  transform: translateY(-50%) translateY(140px);
}

/* Removed 2026-09-16: the @media (min-width: 641px) block — every width shows the phone layout now. */

.card-side-palette[hidden] {
  display: none !important;
}

:root[data-theme="light"] .card-side-palette,
body[data-theme="light"] .card-side-palette {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.side-palette-track {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.side-palette-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

:root[data-theme="light"] .side-palette-btn,
body[data-theme="light"] .side-palette-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: #1f2937;
}

/* Specific styling for Left Frame Buttons showcasing each theme's unique signature color */
.side-palette-btn.style-choice-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 20, 32, 0.85);
  color: var(--style-hue, #cbd5e1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center center;
}

.side-palette-btn.style-choice-btn .palette-icon {
  color: var(--style-hue, #cbd5e1);
}

@media (hover: hover) and (pointer: fine) {
  .side-palette-btn.style-choice-btn:hover {
    transform: scale(1.18) translateX(4px);
    border-color: var(--style-hue, rgba(255, 255, 255, 0.6));
    background: color-mix(in srgb, var(--style-hue, #38bdf8) 24%, rgba(20, 26, 42, 0.95));
    color: #ffffff;
    box-shadow: 0 0 18px color-mix(in srgb, var(--style-hue, #38bdf8) 65%, transparent), 0 4px 14px rgba(0, 0, 0, 0.5);
  }
}

.side-palette-btn.style-choice-btn.active,
.side-palette-btn.style-choice-btn[aria-pressed="true"] {
  border-color: #ffffff !important;
  background: color-mix(in srgb, var(--style-hue, #38bdf8) 35%, rgba(15, 22, 38, 0.98)) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 20px color-mix(in srgb, var(--style-hue, #38bdf8) 80%, transparent), 0 6px 20px rgba(0, 0, 0, 0.6) !important;
  transform: scale(1.2) translateX(5px);
}

.side-palette-btn.style-choice-btn:active {
  transform: scale(0.94) translateX(2px);
  transition: transform 0.08s ease;
}

:root[data-theme="light"] .side-palette-btn.style-choice-btn,
body[data-theme="light"] .side-palette-btn.style-choice-btn {
  border-color: color-mix(in srgb, var(--style-hue, #0284c7) 48%, rgba(0, 0, 0, 0.14));
  background: color-mix(in srgb, var(--style-hue, #0284c7) 14%, rgba(255, 255, 255, 0.92));
  color: var(--style-hue, #0284c7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .side-palette-btn.style-choice-btn:hover,
body[data-theme="light"] .side-palette-btn.style-choice-btn:hover {
  background: color-mix(in srgb, var(--style-hue, #0284c7) 28%, rgba(255, 255, 255, 0.96));
  border-color: var(--style-hue, #0284c7);
  box-shadow: 0 0 14px color-mix(in srgb, var(--style-hue, #0284c7) 60%, transparent);
}

.side-palette-btn .palette-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.side-palette-btn .palette-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
  transform-origin: center center;
}

/* ==========================================================================
   Full Fluid Animation Keyframes & Bindings for Style Palette Icons
   ========================================================================== */

/* 1. Aurora Prism: Shimmering Gem Spin */
@keyframes iconPrismGem {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px #32d7ff); }
  50% { transform: rotate(24deg) scale(1.22); filter: drop-shadow(0 0 8px #32d7ff) brightness(1.25); }
  100% { transform: rotate(-16deg) scale(1.12); filter: drop-shadow(0 0 5px #32d7ff); }
}

/* 2. Golden Memory: Twinkling Star Flare */
@keyframes iconGoldenStar {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px #f08e45); }
  35% { transform: rotate(36deg) scale(1.25); filter: drop-shadow(0 0 10px #f08e45) brightness(1.3); }
  70% { transform: rotate(72deg) scale(1.1); filter: drop-shadow(0 0 4px #f08e45); }
  100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px #f08e45); }
}

/* 3. Soft Pop: Playful Floating Bubbles */
@keyframes iconBubbleFloat {
  0% { transform: translateY(1px) scale(0.96); filter: drop-shadow(0 0 2px #9eb7ff); }
  50% { transform: translateY(-3.5px) scale(1.2); filter: drop-shadow(0 0 8px #9eb7ff) brightness(1.2); }
  100% { transform: translateY(1px) scale(0.96); filter: drop-shadow(0 0 2px #9eb7ff); }
}

/* 4. Nature Aura: Organic Dewdrop Wave */
@keyframes iconDropletWave {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 2px #b8ef8b); }
  35% { transform: scaleX(1.22) scaleY(0.84) translateY(1.5px); filter: drop-shadow(0 0 6px #b8ef8b); }
  70% { transform: scaleX(0.86) scaleY(1.24) translateY(-3px); filter: drop-shadow(0 0 10px #b8ef8b) brightness(1.25); }
}

/* 5. Neon Creator: High-Velocity Neon Flare */
@keyframes iconNeonBurst {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px #4b52ff); }
  45% { transform: rotate(90deg) scale(1.28); filter: drop-shadow(0 0 12px #4b52ff) brightness(1.4); }
  85% { transform: rotate(180deg) scale(1.08); filter: drop-shadow(0 0 6px #4b52ff); }
  100% { transform: rotate(180deg) scale(1); filter: drop-shadow(0 0 2px #4b52ff); }
}

/* 6. Obsidian Titanium: Heavy Metallic Shield Guard */
@keyframes iconShieldArmor {
  0% { transform: scale(1) translateY(0) rotate(0deg); filter: drop-shadow(0 0 2px #94a3b8); }
  35% { transform: scale(1.18) translateY(-2px) rotate(-6deg); filter: drop-shadow(0 0 8px #cbd5e1) brightness(1.3); }
  70% { transform: scale(1.15) translateY(-1px) rotate(6deg); filter: drop-shadow(0 0 6px #cbd5e1); }
  100% { transform: scale(1) translateY(0) rotate(0deg); filter: drop-shadow(0 0 2px #94a3b8); }
}

/* 7. Cyber Matrix: Digital Matrix Quantum Scan */
@keyframes iconCyberMatrix {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px #65dfb4); }
  40% { transform: rotate(45deg) scale(1.22); filter: drop-shadow(0 0 10px #65dfb4) brightness(1.3); }
  80% { transform: rotate(90deg) scale(1.1); filter: drop-shadow(0 0 6px #65dfb4); }
  100% { transform: rotate(90deg) scale(1); filter: drop-shadow(0 0 2px #65dfb4); }
}

/* 8. Deep Abyss: Sonar Radar Ping */
@keyframes iconAbyssSonar {
  0% { transform: scale(1); opacity: 0.9; filter: drop-shadow(0 0 2px #0284c7); }
  50% { transform: scale(1.26); opacity: 1; filter: drop-shadow(0 0 10px #0284c7) brightness(1.35); }
  100% { transform: scale(1); opacity: 0.9; filter: drop-shadow(0 0 2px #0284c7); }
}

/* 9. Carbon Stealth: Dart Jet Thrust */
@keyframes iconCarbonDart {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 2px #ef4444); }
  50% { transform: translateY(-3px) scale(1.2); filter: drop-shadow(0 0 9px #ef4444) brightness(1.3); }
}

/* 10. Industrial Steel: Heavy Machinery Gear */
@keyframes iconIndustrialGear {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px #eab308); }
  50% { transform: rotate(120deg) scale(1.2); filter: drop-shadow(0 0 8px #eab308) brightness(1.25); }
  100% { transform: rotate(240deg) scale(1); filter: drop-shadow(0 0 2px #eab308); }
}

/* 11. Quantum Cosmos: Orbital Ellipse Spin */
@keyframes iconQuantumOrbit {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px #8b5cf6); }
  50% { transform: rotate(180deg) scale(1.22); filter: drop-shadow(0 0 10px #8b5cf6) brightness(1.35); }
  100% { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 2px #8b5cf6); }
}

/* 12. Nordic Monolith: Twin Pillar Elevation */
@keyframes iconMonolithLift {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 2px #9ca3af); }
  50% { transform: translateY(-2.5px) scale(1.18); filter: drop-shadow(0 0 7px #e5e7eb) brightness(1.25); }
}

/* 13. Molten Core: Solar Reactor Flare */
@keyframes iconMoltenCore {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px #f97316); }
  50% { transform: rotate(45deg) scale(1.26); filter: drop-shadow(0 0 12px #f97316) brightness(1.4); }
  100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 2px #f97316); }
}

/* Bindings for Style Choice Buttons */
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="aurora-prism"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="aurora-prism"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconPrismGem 2.2s ease-in-out infinite alternate;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="golden-memory"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="golden-memory"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconGoldenStar 2s ease-in-out infinite;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="soft-pop"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="soft-pop"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconBubbleFloat 1.8s ease-in-out infinite alternate;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="nature-aura"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="nature-aura"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconDropletWave 1.8s ease-in-out infinite;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="neon-creator"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="neon-creator"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconNeonBurst 1.8s ease-in-out infinite;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="obsidian-titanium"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="obsidian-titanium"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconShieldArmor 2.2s ease-in-out infinite alternate;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="cyber-matrix"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="cyber-matrix"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconCyberMatrix 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite alternate;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="deep-abyss"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="deep-abyss"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconAbyssSonar 1.8s ease-in-out infinite;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="carbon-stealth"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="carbon-stealth"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconCarbonDart 1.6s ease-in-out infinite;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="industrial-steel"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="industrial-steel"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconIndustrialGear 2.6s linear infinite;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="quantum-cosmos"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="quantum-cosmos"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconQuantumOrbit 3s linear infinite;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="nordic-monolith"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="nordic-monolith"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconMonolithLift 1.8s ease-in-out infinite;
}

:is(.side-palette-btn, .style-icon-btn)[data-style-choice="molten-core"]:hover :is(.palette-icon, .style-icon-symbol) svg,
:is(.side-palette-btn, .style-icon-btn)[data-style-choice="molten-core"]:is(.active, [aria-pressed="true"]) :is(.palette-icon, .style-icon-symbol) svg {
  animation: iconMoltenCore 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  :is(.side-palette-btn, .style-icon-btn) :is(.palette-icon, .style-icon-symbol) svg {
    animation: none !important;
  }
}

/* Right Sticker Rail Buttons */
.side-palette-btn.sticker-btn {
  color: var(--theme-b, rgba(255, 255, 255, 0.85));
  border-color: color-mix(in srgb, var(--theme-b, #7ddc8c) 35%, rgba(255, 255, 255, 0.12));
}

@media (hover: hover) and (pointer: fine) {
  .side-palette-btn.sticker-btn:hover {
    color: #ffffff;
    border-color: var(--theme-b, #7ddc8c);
    background: color-mix(in srgb, var(--theme-b, #7ddc8c) 25%, rgba(255, 255, 255, 0.12));
    box-shadow: 0 0 12px color-mix(in srgb, var(--theme-b, #7ddc8c) 60%, transparent);
    transform: scale(1.15);
  }
}

.side-palette-btn.sticker-btn:active {
  transform: scale(0.92);
}

/* Hide sidebars when card is showing back face */
.card-scene:has(.flash-card[data-side="back"]) .card-side-palette,
.flash-card[data-side="back"] ~ .card-side-palette {
  display: none !important;
}

.side-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(240, 244, 248, 0.65);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.side-pill-btn svg {
  stroke: currentColor;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.side-pill-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.side-pill-btn.active,
.side-pill-btn[aria-pressed="true"] {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(129, 140, 248, 0.28));
  border-color: rgba(147, 197, 253, 0.38);
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.side-pill-btn.active svg,
.side-pill-btn[aria-pressed="true"] svg {
  stroke: #93c5fd;
  opacity: 1;
}

/* --- Card Flip Auto-Hiding for Back Face (Comments 8 & 9) --- */
.card-stage-dock:has([data-show-side="back"].active) .card-style-bar,
.card-stage-dock:has([data-show-side="back"].active) .card-manipulation-hint,
.flash-card[data-side="back"] ~ .card-stage-dock .card-style-bar,
.flash-card[data-side="back"] ~ .card-stage-dock .card-manipulation-hint {
  display: none !important;
}

/* --- Card Style Bar (Main Stage) --- */
.card-style-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(10, 14, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.style-choice-track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 4px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.style-choice-track::-webkit-scrollbar {
  display: none;
}

/* Pure Geometric Icon Buttons (Comment 12) */
.style-icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--style-hue, rgba(255, 255, 255, 0.7));
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  transform-origin: center center;
}

@media (hover: hover) and (pointer: fine) {
  .style-icon-btn:hover {
    transform: translateY(-3px) scale(1.16);
    border-color: var(--style-hue, #ffffff);
    background: color-mix(in srgb, var(--style-hue, #38bdf8) 22%, rgba(255, 255, 255, 0.1));
    color: #ffffff;
    box-shadow: 0 0 14px color-mix(in srgb, var(--style-hue, #38bdf8) 55%, transparent), 0 4px 12px rgba(0, 0, 0, 0.45);
  }
}

.style-icon-btn.active,
.style-icon-btn[aria-pressed="true"] {
  border-color: #ffffff !important;
  background: color-mix(in srgb, var(--style-hue, #38bdf8) 32%, rgba(30, 42, 65, 0.98)) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 18px color-mix(in srgb, var(--style-hue, #38bdf8) 75%, transparent), 0 4px 14px rgba(0, 0, 0, 0.55) !important;
  transform: translateY(-2px) scale(1.18);
}

.style-icon-btn:active {
  transform: translateY(0) scale(0.94);
  transition: transform 0.08s ease;
}

.style-icon-symbol {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--style-hue, currentColor);
}

.style-icon-symbol svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease;
  transform-origin: center center;
}

/* --- Online Status Pill (Annotation 7) --- */
.stage-status-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  flex-shrink: 0;
}

.render-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.65);
  background: rgba(245, 158, 11, 0.15);
  color: #fde047;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

/* --- Connected / Online State (Green Border, Green Glow) --- */
.render-pill.online,
.render-pill.ready,
.render-pill.connected {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.16) !important;
  color: #a7f3d0 !important;
}
.render-pill.online .status-dot,
.render-pill.ready .status-dot,
.render-pill.connected .status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-online-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-online-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px #10b981; }
  50% { opacity: 0.55; transform: scale(0.85); box-shadow: 0 0 3px #10b981; }
}

/* --- Pending State (Calm Minimalist Titanium Border, Muted Amber Dot) --- */
.render-pill.pending {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}
.render-pill.pending:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
.render-pill.pending .status-dot,
.render-pill .status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: none;
  animation: none;
}
@keyframes pulse-pending-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px #f59e0b; }
  50% { opacity: 0.5; transform: scale(0.85); box-shadow: 0 0 2px #f59e0b; }
}

/* --- Error State (Red Border, Red Glow) --- */
.render-pill.error {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.16) !important;
  color: #fca5a5 !important;
}
.render-pill.error:hover {
  border-color: #f87171 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}
.render-pill.error .status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: pulse-error-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-error-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px #ef4444; }
  50% { opacity: 0.5; transform: scale(0.85); box-shadow: 0 0 2px #ef4444; }
}

/* --- Annotation 1: Manipulation Hint between Card and Step Bar --- */
.card-manipulation-hint {
  text-align: center;
  margin: 0 auto 10px auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #f1f5f9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(56, 189, 248, 0.35);
  user-select: none;
}
.card-manipulation-hint span {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(56, 189, 248, 0.6);
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
}
:root[data-theme="light"] .card-manipulation-hint,
body[data-theme="light"] .card-manipulation-hint {
  color: #0f172a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}
.card-manipulation-hint[hidden] {
  display: none !important;
}

/* --- Photo framing controls (zoom + reset), beside the drag hint --- */
.card-manipulation-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.manipulation-hint-text {
  white-space: nowrap;
}
.photo-zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.photo-zoom-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.photo-zoom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 108px;
  max-width: 34vw;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
.photo-zoom-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}
.photo-zoom-slider::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}
/* 14px so the handle clears the 44px-with-padding touch target the rest of
   the studio holds to, without the track growing to match. */
.photo-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--studio-card-accent, #65dfb4);
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.photo-zoom-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  background: var(--studio-card-accent, #65dfb4);
}
.photo-zoom-slider:focus-visible {
  outline: 2px solid var(--studio-card-accent, #65dfb4);
  outline-offset: 3px;
}
.photo-zoom-value {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
  opacity: 0.85;
}
.photo-reset-btn {
  font: inherit;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 11px;
  min-height: 26px;
  border-radius: 9999px;
  color: inherit;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .photo-reset-btn:hover {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(255, 255, 255, 0.32);
  }
}
:root[data-theme="light"] .photo-zoom-control,
:root[data-theme="light"] .photo-reset-btn,
body[data-theme="light"] .photo-zoom-control,
body[data-theme="light"] .photo-reset-btn {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .photo-zoom-slider::-webkit-slider-runnable-track,
body[data-theme="light"] .photo-zoom-slider::-webkit-slider-runnable-track {
  background: rgba(15, 23, 42, 0.28);
}

/* Card Edit Button in Completed State */
.card-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 5px 13px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: auto;
  user-select: none;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .card-edit-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}
.card-edit-btn.is-active {
  background: rgba(125, 220, 140, 0.2);
  border-color: #7ddc8c;
  color: #7ddc8c;
  box-shadow: 0 0 12px rgba(125, 220, 140, 0.35);
}
:root[data-theme="light"] .card-edit-btn,
body[data-theme="light"] .card-edit-btn {
  background: #ffffff;
  color: #1f2937;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .card-edit-btn:hover,
body[data-theme="light"] .card-edit-btn:hover {
  background: #f8fafc;
  border-color: #0284c7;
  color: #0284c7;
}

/* --- Card Front Score (0-255) Placed Above Name, Borderless --- */
.card-front-score-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  cursor: default;
  user-select: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
  pointer-events: auto !important;
}
.card-front-score-badge .score-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.70);
  text-transform: uppercase;
  line-height: 1;
}
.card-front-score-badge .score-val {
  color: #7ddc8c;
  font-weight: 800;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-shadow: 0 0 8px rgba(125, 220, 140, 0.45);
  line-height: 1;
}
.card-front-score-badge .score-max {
  font-size: 8.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  font-family: ui-monospace, monospace;
  line-height: 1;
}

.score-progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-top: 2px;
  margin-bottom: 5px;
  max-width: 140px;
}
.score-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #65dfb4);
  box-shadow: 0 0 10px #65dfb4;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Left-Bottom Acrylic Transparent Capsule (Aligned Left, Maximum Space for Handle) --- */
.identity-acrylic-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  box-sizing: border-box;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: rgba(10, 16, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none;
  white-space: nowrap !important;
  flex: 0 1 auto;
  width: fit-content;
  max-width: calc(100% - 60px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .identity-acrylic-badge:hover {
    background: rgba(20, 28, 44, 0.88);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
  }
}
.identity-acrylic-badge .acrylic-prefix {
  display: none;
}
.identity-acrylic-badge .acrylic-logo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.identity-acrylic-badge .acrylic-logo .brand-human {
  font-family: "Space Grotesk", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1;
}
.identity-acrylic-badge .acrylic-logo .brand-id {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #04140d;
  background: #65dfb4;
  border: 1px solid rgba(101, 223, 180, 0.6);
  padding: 1px 3.5px;
  border-radius: 2.5px;
  line-height: 1;
  box-shadow: none;
}
.identity-acrylic-badge .acrylic-slash {
  color: rgba(255, 255, 255, 0.35);
  font-size: 10px;
  font-weight: 300;
  margin: 0 1px;
  user-select: none;
  flex-shrink: 0;
}
.identity-acrylic-badge .acrylic-handle {
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  font-family: "Space Grotesk", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.01em;
  /* The handle is shown exactly as it was typed and as the URL resolves it.
     Upper-casing it made the card disagree with the field above it. */
  text-transform: none;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Dedicated Card Serial Number on Bottom-Left Inner Frame (Token Number Film) --- */
.card-acrylic-serial {
  position: absolute;
  bottom: 4px !important;
  left: 18px !important;
  right: auto;
  z-index: 26;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none;
  white-space: nowrap !important;
  line-height: 1;
  transition: opacity 0.2s ease;
}
.card-acrylic-serial:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  opacity: 1;
}
.card-acrylic-serial .acrylic-serial-prefix {
  color: rgba(255, 255, 255, 0.55);
  font-size: 9px;
  font-weight: 600;
  margin-right: 1px;
}
.card-acrylic-serial .acrylic-serial-num {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.card-acrylic-serial:hover .acrylic-serial-num {
  color: #ffffff;
}

/* --- Media Delete "X" Button (Top-Right of Photo Stage) --- */
.photo-delete-btn {
  position: absolute;
  top: 52px;
  right: 12px;
  z-index: 30;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  pointer-events: auto !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
.photo-delete-btn::before {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
  .photo-delete-btn:hover {
    background: rgba(239, 68, 68, 0.85);
    border-color: #f87171;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
  }
}
.photo-delete-btn[hidden] {
  display: none !important;
}

/* --- Media Replace Button (Top-Left of Photo Stage) --- */
.photo-replace-btn {
  position: absolute;
  top: 52px;
  left: 12px;
  z-index: 30;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
@media (hover: hover) and (pointer: fine) {
  .photo-replace-btn:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(125, 220, 140, 0.7);
    color: #86efac;
    transform: scale(1.04);
  }
}
.photo-replace-btn[hidden] {
  display: none !important;
}

.card-step-guide.is-clickable {
  cursor: pointer;
  pointer-events: auto !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.card-step-guide.is-clickable:hover {
  border-color: rgba(125, 220, 140, 0.6);
  box-shadow: 0 4px 16px rgba(125, 220, 140, 0.15);
}
.card-step-guide.is-clickable:active {
  transform: scale(0.98);
}

/* Quick-Edit Interactive Affordance */
[data-quick-edit] {
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
[data-quick-edit]:hover {
  opacity: 0.9;
}

.editable-tagline-text {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  cursor: pointer !important;
  pointer-events: auto !important;
  padding: 0;
  margin: 8px 0 0;
  border-radius: 0;
  border: 0;
  background: none;
  transition: color 150ms ease;
}

.card-front-score-badge {
  pointer-events: auto !important;
}

/* --- Quick Field Edit Modal --- */
.quick-edit-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 16, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFadeIn 0.2s ease-out;
}
.quick-edit-dialog {
  width: min(440px, 94vw);
  background: #0d111a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
  color: #f8fafc;
  font-family: system-ui, -apple-system, sans-serif;
  animation: modalSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.quick-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.quick-edit-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick-edit-header button {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.quick-edit-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 16px;
  line-height: 1.5;
}
.quick-edit-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 9px 12px;
  color: #ffffff;
  font-size: 14px;
  box-sizing: border-box;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.quick-edit-input:focus {
  border-color: #65dfb4 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(101, 223, 180, 0.18) !important;
}
.quick-edit-input-group {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quick-edit-input-group:focus-within {
  border-color: #65dfb4 !important;
  box-shadow: 0 0 0 2px rgba(101, 223, 180, 0.18) !important;
}
.quick-edit-input-group .quick-edit-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 10px 0 12px;
  background: rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}
.quick-edit-input-group .quick-edit-input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 9px 10px !important;
  flex: 1;
  min-width: 0;
  min-height: 40px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}
.quick-edit-feedback {
  min-height: 22px;
  font-size: 12px;
  margin-top: 6px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}
.quick-edit-feedback.validating {
  color: #38bdf8;
  font-weight: 600;
}
.quick-edit-feedback.validating .validating-spinner {
  display: inline-block;
  animation: spinClaimGoogle 1s linear infinite;
  font-weight: bold;
}
.quick-edit-feedback.error {
  color: #ef4444;
  font-weight: 600;
}
.quick-edit-feedback.success {
  color: #10b981;
  font-weight: 700;
}
.quick-edit-btn-save,
.quick-edit-btn-reclaim:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none !important;
  background: #334155 !important;
}
.quick-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.quick-edit-btn-cancel {
  background: transparent;
  border: 1px solid #475569;
  color: #94a3b8;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.quick-edit-btn-cancel:hover {
  border-color: #94a3b8;
  color: #ffffff;
}
.quick-edit-btn-save,
.quick-edit-btn-reclaim {
  background: #0284c7;
  border: none;
  color: #ffffff;
  font-weight: bold;
  padding: 7px 18px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.5);
  transition: all 0.18s ease;
}
.quick-edit-btn-save,
.quick-edit-btn-reclaim:hover {
  background: #0369a1;
  box-shadow: 0 0 16px rgba(2, 132, 199, 0.7);
}

/* ── Agent Name Inline Edit (Annotation 10) ── */
.agent-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.agent-name-wrap:hover {
  background: rgba(124, 102, 255, 0.15);
  border-color: rgba(124, 102, 255, 0.4);
}
.agent-name-wrap .agent-name-edit-icon {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.agent-name-wrap:hover .agent-name-edit-icon {
  opacity: 1;
  stroke: #00e5ff;
}

/* ── Me Account Profile Card (Requirement: Nav Me & Assets Transfer) ── */
.me-profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.08), transparent 60%),
              linear-gradient(180deg, rgba(20, 24, 38, 0.85) 0%, rgba(12, 15, 26, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.me-avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1e293b, #0f172a);
  border: 2px solid rgba(56, 189, 248, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  flex-shrink: 0;
}
.me-profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.me-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.me-handle {
  font-size: 12px;
  color: #94a3b8;
  font-family: monospace;
}
.me-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.me-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.me-badge.verified {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.me-badge.sbt {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Credential list */
.credential-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.credential-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  gap: 12px;
}
.credential-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.credential-icon.google {
  background: rgba(255, 255, 255, 0.08);
}
.credential-icon.passkey {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}
.credential-info {
  flex: 1;
}
.credential-name {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}
.credential-meta {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 1px;
}
.credential-status.ok {
  font-size: 11px;
  font-weight: 600;
  color: #10b981;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.12);
  border-radius: 6px;
}

/* ── Gmail Style Sovereign Inbox (Requirement: Gmail Style 2 Letters) ── */
.gmail-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 12px;
  color: #94a3b8;
}
.gmail-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 12.5px;
  outline: none;
}
.inbox-count-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 999px;
  white-space: nowrap;
}
.gmail-category-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  overflow-x: auto;
}
.gmail-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s ease;
}
.gmail-cat-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
.gmail-cat-tab.active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.gmail-mail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gmail-mail-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gmail-mail-card:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.gmail-mail-card.unread {
  background: rgba(22, 31, 56, 0.85);
  border-color: rgba(255, 255, 255, 0.18);
}
.mail-status-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}
.mail-star-btn {
  background: transparent;
  border: none;
  color: #eab308;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.mail-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}
.mail-body-col {
  flex: 1;
  min-width: 0;
}
.mail-header-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.mail-sender {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}
.mail-tag-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.mail-tag-pill.welcome {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.mail-tag-pill.proof {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.mail-time {
  margin-left: auto;
  font-size: 11px;
  color: #64748b;
}
.mail-subject {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.4;
}
.mail-snippet {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mail-expanded-content {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.mail-letter-view {
  font-size: 12.5px;
  line-height: 1.6;
  color: #cbd5e1;
}
.mail-letter-view p {
  margin: 0 0 8px;
}
.mail-letter-view ul {
  margin: 0 0 10px;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mail-action-box {
  margin-top: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
}
.invite-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #94a3b8;
  margin-bottom: 8px;
}
.invite-stat-row strong {
  color: #fbbf24;
}
.invite-link-row {
  display: flex;
  gap: 8px;
}
.invite-link-input {
  flex: 1;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 10px;
  color: #ffffff;
  font-size: 11.5px;
  font-family: monospace;
}

/* ── Matrix Materials Feed & Dialogue (Annotation 7) ── */
.matrix-dialogue-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
}
.matrix-dialogue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.matrix-dialogue-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #e2e8f0;
}
.matrix-privacy-chip {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.matrix-chat-stream {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 12px;
}
.matrix-chat-msg {
  display: flex;
}
.matrix-chat-msg.ai {
  justify-content: flex-start;
}
.matrix-chat-msg.user {
  justify-content: flex-end;
}
.chat-bubble {
  max-width: 90%;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
}
.chat-bubble.ai {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
.matrix-chat-msg.ai.error .chat-bubble {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.32);
  color: #fecaca;
}
.matrix-chat-retry {
  border: 1px solid rgba(252, 165, 165, 0.6);
  border-radius: 6px;
  padding: 4px 9px;
  background: rgba(127, 29, 29, 0.55);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.matrix-chat-retry:focus-visible {
  outline: 2px solid #fecaca;
  outline-offset: 2px;
}
.chat-bubble.user {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  font-weight: 500;
}
.matrix-sparkle {
  color: #94a3b8;
  margin-right: 4px;
}
.matrix-quick-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.matrix-opt-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 10px;
  color: #cbd5e1;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  transition: all 0.16s ease;
}
.matrix-opt-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.matrix-feed-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.matrix-feed-input {
  flex: 1;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 12px;
  outline: none;
}
.matrix-feed-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}
.matrix-feed-btn {
  background: #ffffff;
  border: none;
  border-radius: 8px;
  color: #0b0f19;
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.matrix-feed-btn:hover {
  background: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════
   Earth Journey & Twin Subtabs (Comment 3)
   ═══════════════════════════════════════════════════════════════════ */
.twin-subtab-bar {
  display: flex;
  gap: 6px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 12px;
}
.twin-subtab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.twin-subtab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.04);
}
.twin-subtab-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: none;
}
.twin-subtab-btn svg {
  stroke: currentColor;
  flex-shrink: 0;
}

/* Earth Journey Progress Bar */
.earth-journey-progress {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.journey-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: #94a3b8;
  margin-bottom: 6px;
}
.journey-progress-header strong {
  color: #f1f5f9;
}
.journey-progress-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.journey-progress-bar {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Conscious Chat Card */
.conscious-chat-card {
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(129, 140, 248, 0.25);
  border-radius: 12px;
  padding: 14px;
}
.conscious-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}
.conscious-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}
.conscious-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.conscious-chat-status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 6px #34d399;
}
.chat-toast {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 8px;
  animation: fadeInToast 0.3s ease;
}
@keyframes fadeInToast {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   ME Settings & Language Preference (Comment 3)
   ═══════════════════════════════════════════════════════════════════ */
.me-settings-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.setting-label-col {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #e2e8f0;
  font-weight: 500;
}
.setting-label-col svg {
  color: #38bdf8;
  flex-shrink: 0;
}
.sound-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #94a3b8;
  padding: 6px 10px;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.16s ease;
}
.sound-toggle-btn.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════
   Unified Icon Styles & Color Tone Harmony
   ═══════════════════════════════════════════════════════════════════ */
.custom-svg-icon {
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke: currentColor;
  display: inline-block;
  vertical-align: middle;
}
.m3-bottom-nav .nav-icon svg {
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.side-pill-btn svg {
  stroke-width: 1.8px;
}
.gmail-cat-tab svg {
  stroke-width: 1.8px;
}

/* ═══════════════════════════════════════════════════════════════════
   Twin Matrix: Social Humanity Endorsement Quest Card (Comment #8)
   ═══════════════════════════════════════════════════════════════════ */
.twin-endorse-quest-card {
  margin-top: 14px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}
.twin-endorse-quest-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.quest-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.quest-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.quest-header-pill .quest-sparkle {
  color: #94a3b8;
}
.quest-reward-tag {
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
  padding: 2px 8px;
  border-radius: 999px;
}
.quest-card-title {
  margin: 0 0 6px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.35;
}
.quest-card-desc {
  margin: 0 0 12px 0;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.5;
}
.quest-progress-row {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.quest-progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 6px;
}
.quest-progress-count {
  color: #e2e8f0;
  font-weight: 600;
}
.quest-progress-remaining {
  color: #cbd5e1;
  font-weight: 600;
}
.quest-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.quest-progress-bar-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.quest-trigger-share-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.16s ease;
}
.quest-trigger-share-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}
.quest-trigger-share-btn:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   Subtab 3: Human Verification & Social Proof Backers Pane
   ═══════════════════════════════════════════════════════════════════ */
.card-front-score-badge,
.three-home-card-back-score {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card-front-score-badge:hover,
  .three-home-card-back-score:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.15);
  }
}

.verification-score-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.verification-score-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.score-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  color: #cbd5e1;
  text-transform: uppercase;
}

.score-tier-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.verification-score-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.verification-score-number {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.score-big {
  font-size: 32px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1;
  letter-spacing: -0.02em;
}

.score-denom {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}

.verification-score-progress-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0;
}

.verification-score-bar {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.verification-score-bar.pending {
  background: rgba(148, 163, 184, 0.4);
}

.score-schedule-meta {
  font-size: 11px;
  color: #64748b;
  margin: 2px 0 6px;
}
.score-schedule-meta span {
  color: #e2e8f0;
  font-weight: 600;
}

.demo-tag-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  margin-right: 4px;
  vertical-align: middle;
}

.verification-score-desc {
  font-size: 11.5px;
  line-height: 1.5;
  color: #94a3b8;
  margin: 0 0 10px;
}

/* The one line that says why the ladder is dark. Calm by default — the state it
   reports most often resolves on its own — and amber only when waiting has
   stopped being the answer. */
.verification-identity-state {
  font-size: 11.5px;
  line-height: 1.5;
  color: #7dd3fc;
  margin: 0 0 10px;
}
.verification-identity-state.needs-attention {
  color: #fbbf24;
}

/* Formula Breakdown (HS-1.0) */
.score-formula-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
}
.formula-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: #94a3b8;
}
.formula-row strong {
  color: #f1f5f9;
  font-weight: 700;
}

/* Witness & Capacity Stats */
.score-witness-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.witness-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #cbd5e1;
}
.witness-stat-item strong {
  color: #e2e8f0;
}

/* Multi-Proof Dimensions Grid */
.verification-dimensions-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.verification-dim-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.verification-dim-item:hover {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(56, 189, 248, 0.2);
}

.dim-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.dim-content {
  flex: 1;
  min-width: 0;
}

.dim-title {
  font-size: 12px;
  font-weight: 650;
  color: #e2e8f0;
  margin-bottom: 2px;
}

.dim-meta {
  font-size: 11px;
  color: #64748b;
}

.dim-status-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
  white-space: nowrap;
}

.dim-status-pill.highlight {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}

.dim-status-pill.pending {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.3);
}

/* Social Proof Backers Section */
.verification-backers-section {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
}

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

.backers-title {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 2px;
}

.backers-subtitle {
  font-size: 11px;
  color: #64748b;
  margin: 0;
}

.backers-count-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.35);
  white-space: nowrap;
}

.verification-friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.verification-friend-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: background 0.16s ease;
}
.verification-friend-card:hover {
  background: rgba(30, 41, 59, 0.7);
}

.friend-avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.friend-card-info {
  flex: 1;
  min-width: 0;
}

.friend-name {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: #f1f5f9;
  line-height: 1.2;
}

.friend-handle {
  display: block;
  font-size: 10.5px;
  font-family: var(--font-mono, monospace);
  color: #64748b;
}

.friend-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.friend-relation-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  font-weight: 600;
}

.friend-relation-tag.mutual {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25);
}

.friend-score-tag {
  font-size: 10.5px;
  font-weight: 750;
  color: #cbd5e1;
}

.verification-invite-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.16s ease;
}
.verification-invite-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Light Theme Overrides */
html[data-theme="light"] .verification-score-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .score-big {
  color: #0f172a;
}
html[data-theme="light"] .score-denom {
  color: #64748b;
}
html[data-theme="light"] .score-tier-badge {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}
html[data-theme="light"] .score-schedule-meta {
  color: #475569;
}
html[data-theme="light"] .score-schedule-meta span {
  color: #0369a1;
}
html[data-theme="light"] .demo-tag-pill {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}
html[data-theme="light"] .verification-score-desc {
  color: #475569;
}
html[data-theme="light"] .verification-identity-state {
  color: #0369a1;
}
html[data-theme="light"] .verification-identity-state.needs-attention {
  color: #b45309;
}
html[data-theme="light"] .score-formula-breakdown {
  background: #f8fafc;
  border-color: #e2e8f0;
}
html[data-theme="light"] .formula-row {
  color: #475569;
}
html[data-theme="light"] .formula-row strong {
  color: #0369a1;
}
html[data-theme="light"] .score-witness-stats {
  background: #f5f3ff;
  border-color: #ddd6fe;
}
html[data-theme="light"] .witness-stat-item {
  color: #334155;
}
html[data-theme="light"] .witness-stat-item strong {
  color: #4338ca;
}
html[data-theme="light"] .verification-dim-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}
html[data-theme="light"] .dim-title {
  color: #0f172a;
}
html[data-theme="light"] .dim-meta {
  color: #64748b;
}
html[data-theme="light"] .dim-status-pill {
  background: #d1fae5;
  color: #047857;
  border-color: #a7f3d0;
}
html[data-theme="light"] .dim-status-pill.highlight {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}
html[data-theme="light"] .dim-status-pill.pending {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
html[data-theme="light"] .verification-backers-section {
  background: #f8fafc;
  border-color: #e2e8f0;
}
html[data-theme="light"] .backers-title {
  color: #0f172a;
}
html[data-theme="light"] .backers-subtitle {
  color: #64748b;
}
html[data-theme="light"] .backers-count-badge {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
}
html[data-theme="light"] .verification-friend-card {
  background: #ffffff;
  border-color: #e2e8f0;
}
html[data-theme="light"] .friend-name {
  color: #0f172a;
}
html[data-theme="light"] .friend-handle {
  color: #64748b;
}
html[data-theme="light"] .friend-score-tag {
  color: #0284c7;
}
html[data-theme="light"] .twin-subtab-bar {
  background: #f1f5f9;
  border-color: #e2e8f0;
}
html[data-theme="light"] .twin-subtab-btn {
  color: #64748b;
}
html[data-theme="light"] .twin-subtab-btn:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .twin-subtab-btn.active {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0284c7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .viral-share-dialog {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .header-title-group h3 {
  color: #0f172a;
}
html[data-theme="light"] .share-modal-subheading {
  color: #475569;
}
html[data-theme="light"] .share-field-label {
  color: #334155;
}
html[data-theme="light"] .share-link-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}
html[data-theme="light"] .social-channels-label {
  color: #334155;
}
html[data-theme="light"] .social-channel-btn.download-card {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
html[data-theme="light"] .social-channel-btn.preview-invitee {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0284c7;
}

/* ─── Studio Topbar & Splash Card Brand Lockup (Annotation 1: Logo 稍微大一點、置中、高 36px) ─── */
.studio-topbar .brand-lockup {
  display: flex;
  align-items: center;
  height: 36px;
  min-height: 36px;
}
.studio-topbar .card-brand,
.splash-topbar-brand .card-brand,
.site-header .card-brand {
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  min-height: 36px;
  height: 36px;
  line-height: 1;
}
.studio-topbar .card-brand .brand-human,
.splash-topbar-brand .card-brand .brand-human,
.site-header .card-brand .brand-human {
  font-family: "Cormorant Garamond", "Cinzel", "Optima", "Didot", serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-bright, #ffffff);
  line-height: 1;
}
.studio-topbar .card-brand .brand-id,
.splash-topbar-brand .card-brand .brand-id,
.site-header .card-brand .brand-id {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #04140d;
  background: #65dfb4;
  border: 1px solid rgba(101, 223, 180, 0.6);
  padding: 2px 5.5px;
  border-radius: 4px;
  line-height: 1;
  box-shadow: 0 0 10px rgba(101, 223, 180, 0.25);
}
html[data-theme="light"] .studio-topbar .card-brand .brand-human,
html[data-theme="light"] .splash-topbar-brand .card-brand .brand-human,
html[data-theme="light"] .site-header .card-brand .brand-human {
  color: #0f172a;
  text-shadow: none;
}
html[data-theme="light"] .studio-topbar .card-brand .brand-id,
html[data-theme="light"] .splash-topbar-brand .card-brand .brand-id,
html[data-theme="light"] .site-header .card-brand .brand-id {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: none;
}

/* Annotation 10: Google 綁定前人類分數禁止點擊 */
.card-front-score-badge.disabled {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.65;
  filter: grayscale(0.2);
}

/* Annotation 14: AInbox AI 兩字高亮強調 */
.inbox-ai-prefix {
  color: #ffffff;
  font-weight: 700;
}
html[data-theme="light"] .inbox-ai-prefix {
  color: #0284c7;
}

/* ─── AInbox Messaging Cards (LINE-style compact cards with accordion detail) ─── */
.ainbox-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ainbox-status-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #93c5fd;
}
.ainbox-status-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ainbox-card-item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ainbox-card-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}
.ainbox-card-item.is-expanded {
  border-color: rgba(101, 223, 180, 0.35);
  background: rgba(255, 255, 255, 0.04);
}
.ainbox-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
.ainbox-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(101, 223, 180, 0.12);
  border: 1px solid rgba(101, 223, 180, 0.3);
  color: var(--studio-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ainbox-card-avatar.is-alt {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}
.ainbox-card-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.ainbox-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ainbox-card-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(101, 223, 180, 0.15);
  color: var(--studio-accent);
}
.ainbox-card-tag.is-alt {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}
.ainbox-card-time {
  font-size: 10.5px;
  color: var(--muted);
}
.ainbox-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ainbox-card-arrow {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ainbox-card-item.is-expanded .ainbox-card-arrow {
  transform: rotate(180deg);
  color: var(--studio-accent);
}
.ainbox-card-body {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}
.ainbox-card-item.is-expanded .ainbox-card-body {
  display: flex;
}
.ainbox-steps-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ainbox-step-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #cbd5e1;
}
.ainbox-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--studio-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ainbox-link-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-family: monospace;
  font-size: 11.5px;
  color: var(--studio-accent);
  word-break: break-all;
  margin-top: 4px;
}
.ainbox-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--studio-accent);
  color: #0d1117;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.15s ease;
}
.ainbox-action-btn:hover {
  opacity: 0.9;
}
.ainbox-action-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ─── Human Verification User Header with Binding Pill ─── */
.verification-user-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
}
.verification-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.verification-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(125, 220, 140, 0.2));
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.verification-user-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.verification-user-name {
  font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright, #ffffff);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.verification-user-handle {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.2;
}
.verification-user-header .google-user-pill {
  flex-shrink: 0;
}
html[data-theme="light"] .verification-user-header {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .verification-user-avatar {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.12), rgba(16, 185, 129, 0.12));
  border-color: rgba(2, 132, 199, 0.3);
  color: #0284c7;
}
html[data-theme="light"] .verification-user-name {
  color: #0f172a;
}
html[data-theme="light"] .verification-user-handle {
  color: #64748b;
}

/* ═══════════════════════════════════════════════════════════════════
   Workflow Refactor: Card Hint, Warning Modal, Step 4 Social Verify, Subtab Lock
   ═══════════════════════════════════════════════════════════════════ */

/* Card Editor Step 1 Focus Hint (極簡低調沉穩框) */
.card-hint-active {
  outline: 1px solid var(--studio-accent, #65dfb4);
  outline-offset: -1px;
}
.identity-overlay .card-hint-active {
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

/* Annotation 6: Hide theme toggle for single dock obsidian experience */
[data-theme-toggle] {
  display: none !important;
}

/* Annotation 4: Status Row placed directly below the card, centered */
/* The note belongs to the card's lower-left corner, so the row it sits in is
   the width of the card. It used to be capped at 420px and centred, so on a
   wide screen "left" meant the row's left edge — 87px inside the card — and the
   note looked unchanged however far it was moved. */
.card-stage-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: min(var(--studio-content-width, 500px), 100%);
  max-width: min(var(--studio-content-width, 500px), 100%);
  margin: -4px auto 6px;
  padding: 0 8px;
  box-sizing: border-box;
}
.card-draft-status-hint.pending {
  display: none !important;
}
.card-draft-status-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  opacity: 0.9;
  letter-spacing: 0.02em;
  user-select: none;
}
.card-draft-status-hint .draft-status-dot {
  font-size: 8px;
  color: #94a3b8;
}

/* Annotation 1 & 2: Topmost Claim Gate Modal Guarantee */
.google-claim-gate-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000005 !important;
}
.google-claim-gate-modal[hidden] {
  display: none !important;
}
.google-claim-gate-modal:not([hidden]),
.google-claim-gate-modal.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Step 3 in flow. The scope, the consent box and the Google button are the
   step's own screen, so they sit under the card instead of behind a press that
   only opens them: a button carrying the Google mark now goes to Google. The
   overlay form is kept for the other ways in (the score badge, the step guide
   after the person has moved on). */
.google-claim-gate-modal.is-inline {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: block !important;
  background: none !important;
  padding: 0 0 calc(var(--md3-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
}
.google-claim-gate-modal.is-inline .modal-backdrop { display: none !important; }
.google-claim-gate-modal.is-inline .claim-gate-dialog {
  width: min(460px, calc(100vw - 28px));
  max-height: none !important;
  overflow: visible !important;
  margin: 14px auto 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.google-claim-gate-modal.is-inline [data-close-claim-gate] { display: none !important; }

/* Clean Obsidian Claim Gate Modal Styling */
.claim-gate-dialog {
  width: min(460px, calc(100vw - 28px));
  max-width: 460px;
  background: rgba(14, 18, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 24px 22px 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
  text-align: left;
}

/* The mark and the sentence read as one line: the icon introduces the sentence
   rather than sitting alone above it. */
.claim-gate-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.claim-gate-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: rgba(101, 223, 180, 0.08);
  border: 1px solid rgba(101, 223, 180, 0.22);
  color: #65dfb4;
  margin-bottom: 0;
  box-shadow: 0 0 16px rgba(101, 223, 180, 0.15);
}
.claim-gate-header h3 {
  margin: 0;
}

.claim-gate-header h3 {
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.claim-gate-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 16px;
}

/* Identity & Score Card */
.claim-identity-preview {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* Miniature Card Showcase & Trust Score 60/255 */
.claim-card-showcase {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(18, 24, 38, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.claim-card-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.claim-card-mini-art {
  position: relative;
  width: 48px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: #090d16;
  border: 1px solid rgba(101, 223, 180, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(101, 223, 180, 0.12);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.claim-card-mini-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.claim-card-mini-avatar {
  font-size: 20px;
  font-weight: 800;
  color: #65dfb4;
  text-shadow: 0 0 10px rgba(101, 223, 180, 0.6);
}

.claim-card-mini-series {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 7.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(6, 11, 8, 0.85);
  color: rgba(255, 255, 255, 0.85);
  padding: 1px 3px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1;
}

.claim-card-mini-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.claim-card-mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #94a3b8;
  font-family: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", sans-serif;
  line-height: 1.2;
}

.claim-card-mini-badge .mini-brand-x {
  color: #38bdf8;
  font-weight: 800;
}
.claim-card-mini-badge .mini-brand-h {
  color: #f1f5f9;
  font-weight: 700;
}
.claim-card-mini-badge .mini-brand-id {
  background: #65dfb4;
  color: #061510;
  font-size: 8px;
  font-weight: 900;
  padding: 0 3px;
  border-radius: 2px;
  margin-left: 2px;
}
.claim-card-mini-badge .mini-slash {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 1px;
}
.claim-card-mini-badge .mini-handle {
  color: #f8fafc;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claim-card-mini-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claim-card-mini-tagline {
  font-size: 10.5px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.claim-card-mini-url {
  font-size: 9.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claim-score-card {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.claim-score-label {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.2;
}

.claim-score-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1;
}

.claim-score-highlight {
  font-size: 18px;
  font-weight: 800;
  color: #65dfb4;
  text-shadow: 0 0 12px rgba(101, 223, 180, 0.4);
}

.claim-score-denom {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.preview-fixed-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(101, 223, 180, 0.12);
  border: 1px solid rgba(101, 223, 180, 0.28);
  color: #65dfb4;
  font-weight: 600;
  white-space: nowrap;
}

.claim-score-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  margin: 6px 0 8px;
  overflow: hidden;
}

.claim-score-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #65dfb4);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(101, 223, 180, 0.5);
}

.claim-binding-alert {
  font-size: 11.5px;
  line-height: 1.45;
  color: #cbd5e1;
}

.claim-binding-alert strong {
  color: #65dfb4;
  font-weight: 700;
}

/* Trust Section (What Happens Next / Peace of Mind) */
.claim-trust-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.claim-trust-heading {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 10px;
}

.claim-trust-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.claim-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.trust-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  margin-top: 1px;
}

.trust-item-title {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 2px;
}

.trust-item-desc {
  font-size: 11px;
  line-height: 1.45;
  color: #94a3b8;
}

.claim-trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 7px 10px;
  background: rgba(101, 223, 180, 0.06);
  border: 1px solid rgba(101, 223, 180, 0.16);
  border-radius: 8px;
  font-size: 10.5px;
  color: #65dfb4;
  line-height: 1.4;
}

.trust-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Consent Checkbox */
.claim-consent-wrap {
  margin-bottom: 16px;
}

.claim-consent-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 7px 0 0 26px;
  font-size: 12px;
}

.claim-consent-links a {
  color: #8de7c5;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.claim-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}

.claim-consent-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.claim-consent-custom-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.15s ease;
}

.claim-consent-checkbox:checked + .claim-consent-custom-box {
  background: #65dfb4;
  border-color: #65dfb4;
  box-shadow: 0 0 10px rgba(101, 223, 180, 0.35);
}

.claim-consent-checkbox:checked + .claim-consent-custom-box::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  border: solid #021a10;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.5px, -1px);
}

.claim-consent-text {
  font-size: 11.5px;
  line-height: 1.45;
  color: #cbd5e1;
}

/* Button Row & Pop-out Edge Polish */
.claim-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.claim-gate-btn-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.claim-confirm-hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .claim-confirm-hero-btn:hover:not(:disabled) {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 255, 255, 0.2);
  }
}

.claim-confirm-hero-btn:active:not(:disabled) {
  transform: translateY(0);
  background: #e2e8f0;
}

.claim-confirm-hero-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.08);
  color: #64748b;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transform: none;
}

.claim-confirm-hero-btn .google-g-logo {
  flex-shrink: 0;
}

.claim-back-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12.5px;
  cursor: pointer;
  padding: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.claim-back-btn:hover {
  color: #f1f5f9;
}

.claim-dev-fastlane {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.claim-dev-fastlane-btn {
  background: rgba(101, 223, 180, 0.08);
  border: 1px dashed rgba(101, 223, 180, 0.45);
  color: #65dfb4;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .claim-dev-fastlane-btn:hover {
    background: rgba(101, 223, 180, 0.16);
    border-color: #65dfb4;
    color: #a7f3d0;
    transform: translateY(-1px);
  }
}

/* Step 4 Social Verification Panel */
.social-verification-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin: 14px auto 40px;
  padding: 20px 22px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  animation: fadeInPanel 0.3s ease-out;
}
.social-verification-panel.in-twin-pane {
  margin: 16px 0 20px;
  max-width: 100%;
  padding: 18px 16px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}

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

.social-verify-header {
  text-align: center;
}

.social-verify-header .verify-step-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9999px;
  margin-bottom: 6px;
}

.social-verify-header .verify-step-title {
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 6px;
}

.social-verify-header .verify-step-desc {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}

.verify-section-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.verify-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
}

.section-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

.verify-copy-box {
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 6px 8px 6px 12px;
  box-sizing: border-box;
  gap: 6px;
}

.copy-url-prefix {
  font-size: 12px;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}

.copy-url-handle {
  font-size: 12.5px;
  color: #f1f5f9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin-right: auto;
}

.verify-handle-input {
  background: transparent;
  border: none;
  outline: none;
  color: #38bdf8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  flex: 1;
  min-width: 70px;
  margin: 0;
  padding: 2px 4px;
  border-bottom: 1.5px dashed rgba(56, 189, 248, 0.4);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.verify-handle-input:focus {
  border-bottom-color: #38bdf8;
  border-bottom-style: solid;
  background: rgba(56, 189, 248, 0.08);
  border-radius: 4px;
}

.verify-handle-input::placeholder {
  color: rgba(148, 163, 184, 0.7);
  font-weight: 400;
  font-size: 11.5px;
}

.copy-link-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.copy-link-action-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.verify-platform-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 6px;
  width: 100%;
}

.platform-chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  color: #cbd5e1;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.platform-chip-btn:hover {
  background: rgba(51, 65, 85, 0.8);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.platform-chip-btn.active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  font-weight: 600;
  box-shadow: none;
}

/* Colour is the claim. A platform whose reciprocal link the server can read
   draws its mark in its brand colour — an on-dark palette, since the print
   marks in shared/social_platform_marks.mjs are for the light public page —
   and one it cannot read stays in the neutral tone, whichever chip is active.
   data-placement-read is set from GET /api/social/capabilities. */
.platform-chip-btn[data-verify-platform="x"] { --chip-brand: #ffffff; }
.platform-chip-btn[data-verify-platform="instagram"] { --chip-brand: #e1306c; }
.platform-chip-btn[data-verify-platform="threads"] { --chip-brand: #ffffff; }
.platform-chip-btn[data-verify-platform="tiktok"] { --chip-brand: #25f4ee; }
.platform-chip-btn[data-verify-platform="linkedin"] { --chip-brand: #0a66c2; }
.platform-chip-btn[data-verify-platform="github"] { --chip-brand: #f0f6fc; }
.platform-chip-btn[data-verify-platform="youtube"] { --chip-brand: #ff0000; }
.platform-chip-btn svg {
  color: var(--chip-brand, currentColor);
  flex-shrink: 0;
}
.platform-chip-btn[data-placement-read="not_available"] {
  color: #64748b;
  border-style: dashed;
}
.platform-chip-btn[data-placement-read="not_available"] svg {
  color: #64748b;
}
.platform-chip-btn[data-placement-read="not_available"].active {
  color: #94a3b8;
  background: rgba(100, 116, 139, 0.15);
  border-color: rgba(148, 163, 184, 0.4);
}

/* The URL the check will read, under the field. */
.verify-target-preview {
  margin: 6px 0 0;
  font-size: 11px;
  color: #94a3b8;
  word-break: break-all;
}
.verify-target-preview code {
  color: #cbd5e1;
  font-size: 11px;
}

/* Step 3 Target Input Box */
.verify-target-input-box {
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(2, 6, 23, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 4px 10px;
  box-sizing: border-box;
  gap: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.verify-target-input-box:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.verify-target-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
}

.verify-profile-input {
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 12.5px;
  flex: 1;
  min-width: 120px;
  padding: 6px 0;
  box-sizing: border-box;
}

.verify-profile-input::placeholder {
  color: #64748b;
  font-size: 11.5px;
}

/* The owner's own declarations under step 3 (#602): every account declared for
   this Human ID with its state, several on one platform included. */
.verify-declared {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 0;
}

.verify-declared-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 5px 9px;
}

.verify-declared-who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verify-declared-platform {
  color: #94a3b8;
  margin-right: 6px;
}

.verify-declared-state {
  flex-shrink: 0;
  font-size: 10.5px;
  color: #94a3b8;
}

.verify-declared-row[data-binding-status="verified"] .verify-declared-state {
  color: #7dd3fc;
}

/* The line that says a check is still being confirmed (#658): same size as the
   hint it replaces, a touch brighter because it is the specific answer. */
.verify-confirming-note {
  color: #94a3b8;
  line-height: 1.5;
}

.verify-input-hint {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* The placement instructions, under the chip that was just chosen. Quiet
   enough to read as guidance rather than as another thing to press, with the
   one real action (the link that opens the platform's edit page) carrying the
   accent. */
.verify-placement-howto {
  background: rgba(101, 223, 180, 0.05);
  border: 1px solid rgba(101, 223, 180, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.placement-howto-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #86efac;
  letter-spacing: 0.02em;
}

.placement-howto-steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #cbd5e1;
}

.placement-howto-steps li::marker {
  color: #65dfb4;
  font-variant-numeric: tabular-nums;
}

.placement-howto-open {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #0b1220;
  background: #65dfb4;
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
}

.placement-howto-open:hover {
  background: #7ce9c4;
}

.placement-howto-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #94a3b8;
}

/* The requirement that still remains after the Google bind, stated before it. */
.claim-next-step {
  background: rgba(56, 189, 248, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.claim-next-step-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #7dd3fc;
  margin-bottom: 6px;
}

.claim-next-step-desc,
.claim-next-step-platforms {
  font-size: 11px;
  line-height: 1.45;
  color: #94a3b8;
  margin: 0;
}

.claim-next-step-platforms {
  margin-top: 5px;
  color: #64748b;
}

.verify-owner-status {
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0;
  color: #cbd5e1;
}
.verify-owner-status[data-owner-claim="owned"] { color: #6ee7b7; }
.verify-owner-status[data-owner-claim="unavailable"] { color: #cbd5e1; }
.verify-owner-status[data-owner-claim="unowned"],
.verify-owner-status[data-owner-claim="error"] { color: #fcd34d; }
.register-human-id-btn {
  margin-top: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.55);
  background: rgba(16, 185, 129, 0.12);
  color: #d1fae5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.register-human-id-btn:disabled { opacity: 0.6; cursor: default; }

.verify-result {
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
}
.verify-result[data-verify-outcome="verified"] { border-color: rgba(16, 185, 129, 0.6); color: #6ee7b7; }
.verify-result[data-verify-outcome="pending"] { border-color: rgba(245, 158, 11, 0.6); color: #fcd34d; }
.verify-result[data-verify-outcome="unavailable"] { border-color: rgba(148, 163, 184, 0.5); color: #cbd5e1; }
.verify-result[data-verify-outcome="owner_session_required"],
.verify-result[data-verify-outcome="error"] { border-color: rgba(239, 68, 68, 0.6); color: #fca5a5; }

.verify-input-hint code {
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 4px;
  border-radius: 4px;
  font-family: monospace;
}

.execute-social-verify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 10px;
  color: #0b0f19;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: all 0.15s ease;
  margin-top: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .execute-social-verify-btn:hover:not(:disabled) {
    background: #e2e8f0;
    transform: translateY(-1px);
  }
}

.execute-social-verify-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.execute-social-verify-btn.is-success {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

/* Human Verification Subtab Lock */
.twin-subtab-btn.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}

.twin-subtab-btn.is-locked:hover {
  background: transparent;
  color: inherit;
}

.subtab-lock-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  font-size: 11px;
}

.topbar-tab.is-locked,
.nav-tab.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.topbar-tab.is-locked:hover,
.nav-tab.is-locked:hover {
  color: var(--muted);
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   Me 頁面 14 項優化專屬樣式 (Annotations 104 - 117)
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Me Avatar Image Auto Crop (Annotation 13) */
.me-avatar-circle .me-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 2. Clock Quick Ledger Button & Meta Trigger (Annotation 2 & 8) */
.ledger-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}
.ledger-quick-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.asset-meta-ledger-trigger {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 4px 0;
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.asset-meta-ledger-trigger:hover {
  color: #ffffff;
}

/* 3. Three-Tier Subscription Plan Switcher (Annotation 4) */
.plan-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 6px 0 8px;
}
.plan-tier-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.16s ease;
}
.plan-tier-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}
.plan-tier-chip.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.06);
}
.tier-chip-name {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tier-chip-tokens {
  font-size: 9px;
  color: #94a3b8;
}
.plan-tier-chip.active .tier-chip-tokens {
  color: #e2e8f0;
}
.plan-tier-details {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.45;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin-bottom: 8px;
}
.tier-desc-highlight {
  color: #ffffff;
  font-weight: 700;
}

/* 4. Agent LLM Model Settings (Annotation 14) */
.agent-llm-settings-box {
  padding: 14px;
}
.llm-options-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.llm-choice-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.llm-choice-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
}
.llm-choice-card.active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}
.llm-choice-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.llm-choice-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.16s ease;
}
.llm-choice-card.active .llm-choice-radio {
  border-color: #ffffff;
}
.llm-choice-card.active .llm-choice-radio::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: none;
}
.llm-choice-title {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
}
.llm-choice-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.llm-choice-badge.recommended {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.llm-choice-badge.custom {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.llm-choice-desc {
  font-size: 11.5px;
  color: #94a3b8;
  margin: 3px 0 6px 22px;
  line-height: 1.45;
}
.llm-choice-tag {
  font-size: 10.5px;
  color: #64748b;
  margin-left: 22px;
}
.llm-choice-card.active .llm-choice-tag {
  color: #cbd5e1;
}

/* Token Quota Meter */
.token-quota-box {
  margin: 8px 0 2px 22px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.token-quota-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.token-quota-label {
  font-size: 11px;
  color: #94a3b8;
}
.token-remaining-val {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  font-family: monospace;
}
.token-max-val {
  font-size: 10px;
  color: #64748b;
  margin-left: auto;
}
.token-meter-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.token-meter-fill {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  box-shadow: none;
  transition: width 0.3s ease;
}
.token-meter-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #64748b;
}
.token-plan-tier-text {
  color: #cbd5e1;
  font-weight: 600;
}

/* Custom API Drawer */
.custom-api-drawer {
  margin: 8px 0 0 22px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.custom-api-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.custom-api-label {
  font-size: 10.5px;
  color: #94a3b8;
}
.custom-api-input {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #ffffff;
  font-family: monospace;
  outline: none;
}
.custom-api-input:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}

/* 5. Sovereign Revenue Ledger Modal (Annotations 2 & 8) */
.ledger-dialog {
  max-width: 540px;
}
.ledger-summary-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  margin-bottom: 16px;
}
.ledger-sub {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ledger-balance-val {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 2px;
}
.ledger-balance-val .curr {
  font-size: 16px;
  font-weight: 700;
  color: #cbd5e1;
}
.ledger-balance-val strong {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
}
.ledger-balance-val small {
  font-size: 11px;
  color: #94a3b8;
}
.ledger-chip.verified {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 999px;
}
.ledger-records-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 16px;
  padding-right: 4px;
}
.ledger-record-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  align-items: flex-start;
}
.record-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.record-icon.attention {
  background: rgba(255, 255, 255, 0.08);
}
.record-icon.consensus {
  background: rgba(255, 255, 255, 0.08);
}
.record-icon.action {
  background: rgba(16, 185, 129, 0.12);
}
.record-details {
  flex: 1;
  min-width: 0;
}
.record-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.record-title {
  font-size: 13px;
  color: #f1f5f9;
  font-weight: 600;
}
.record-amount.positive {
  font-size: 13px;
  font-weight: 700;
  color: #10b981;
  font-family: monospace;
}
.record-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #94a3b8;
  margin-bottom: 4px;
}
.record-receipt-hash {
  font-size: 10px;
  color: #64748b;
}
.receipt-code {
  font-family: monospace;
  color: #94a3b8;
}
.ledger-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ledger-footnote {
  font-size: 10.5px;
  color: #64748b;
}

/* 6. Crypto Wallet Modal (Annotation 7) */
.wallet-dialog {
  max-width: 480px;
}
.wallet-status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 14px;
}
.wallet-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wallet-status-indicator.pending {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}
.wallet-status-indicator.connected {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.wallet-status-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wallet-status-text strong {
  font-size: 12.5px;
  color: #f1f5f9;
}
.wallet-status-text span {
  font-size: 11px;
  color: #94a3b8;
}
.wallet-providers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.wallet-provider-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .wallet-provider-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-1px);
  }
}
.wallet-provider-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-manual-input-box {
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 14px;
}
.wallet-input-label {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 6px;
}
.wallet-input-group {
  display: flex;
  gap: 8px;
}
.wallet-address-input {
  flex: 1;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: #ffffff;
  font-family: monospace;
  outline: none;
}
.wallet-address-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}
.wallet-dialog-footer {
  font-size: 10.5px;
  color: #64748b;
  text-align: center;
  padding-top: 6px;
}

/* Shared Studio tokens and chrome: studio-production-mobile.css.
   Cyber Matrix artwork: flash-card-studio-families.css. */

/* Failures during the claim have to be readable where the claim happens: the
   gate is above the toast layer. */
.claim-create-status {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #ff9d9d;
  text-align: center;
}

/* Step 4 asks the person to copy their link and post it, so its control looks
   like the action it performs rather than the card-flip it replaces. */
.side-flip-icon-btn.is-copy-link {
  background: #12362b !important;
  border: 1.5px solid #2f7f63 !important;
  color: #7ee2b8 !important;
  box-shadow: 0 0 16px rgba(101, 223, 180, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  animation: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .side-flip-icon-btn.is-copy-link:hover {
    background: #17453a !important;
    transform: scale(1.06) !important;
  }
}
.side-flip-icon-btn .copy-link-icon { display: none !important; }
.side-flip-icon-btn.is-copy-link .copy-link-icon { display: block !important; }
.side-flip-icon-btn.is-copy-link .flip-default-icon,
.side-flip-icon-btn.is-copy-link .next-step-icon,
.side-flip-icon-btn.is-copy-link .google-claim-spin-icon { display: none !important; }

/* The gate states the score this step grants: what it is now, and what binding
   makes it. Two numbers, so neither is mistaken for the other. */
.claim-score-num .claim-score-current {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}
.claim-score-num .claim-score-arrow {
  margin: 0 4px;
  color: rgba(255, 255, 255, 0.35);
}
/* The agreement belongs with the button it gates, not floating above the list. */
.claim-consent-wrap {
  margin-top: 18px !important;
  margin-bottom: 6px !important;
}
/* The caption explains the arrow; it sits with the number, not beside it. */
.claim-score-caption {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
  white-space: nowrap;
}
/* A published card says so in the colour of something that is done, not in the
   amber of something still pending. */
.card-draft-status-hint.published,
.card-draft-status-hint.published .draft-status-dot {
  color: #65dfb4;
}

/* ═══════════════════════════════════════════════════════════════════
   Border Beam Effect (Libraries.dev inspired hardware-accelerated beam)
   ═══════════════════════════════════════════════════════════════════ */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes borderBeamRotate {
  to {
    --beam-angle: 360deg;
  }
}

.border-beam-container {
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  pointer-events: none;
  overflow: hidden;
  z-index: 25;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.border-beam-line {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 280deg,
    rgba(56, 189, 248, 0.4) 310deg,
    rgba(236, 72, 153, 0.8) 335deg,
    rgba(255, 255, 255, 1) 350deg,
    rgba(56, 189, 248, 0.9) 360deg
  );
  animation: borderBeamRotate 6s linear infinite;
  transform-origin: center center;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
}

/* Color variants aligned with active card styles */
.flash-card[data-style="golden-memory"] .border-beam-line {
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 280deg,
    rgba(217, 119, 6, 0.4) 310deg,
    rgba(245, 158, 11, 0.8) 335deg,
    rgba(255, 255, 255, 1) 350deg,
    rgba(252, 211, 77, 0.95) 360deg
  );
}

.flash-card[data-style="nature-aura"] .border-beam-line {
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 280deg,
    rgba(16, 185, 129, 0.4) 310deg,
    rgba(52, 211, 153, 0.8) 335deg,
    rgba(255, 255, 255, 1) 350deg,
    rgba(167, 243, 208, 0.95) 360deg
  );
}

.flash-card[data-style="neon-creator"] .border-beam-line {
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 280deg,
    rgba(99, 102, 241, 0.4) 310deg,
    rgba(236, 72, 153, 0.8) 335deg,
    rgba(255, 255, 255, 1) 350deg,
    rgba(56, 189, 248, 0.95) 360deg
  );
}

.flash-card[data-style="cyber-matrix"] .border-beam-line {
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 280deg,
    rgba(6, 182, 212, 0.4) 310deg,
    rgba(101, 223, 180, 0.85) 335deg,
    rgba(255, 255, 255, 1) 350deg,
    rgba(101, 223, 180, 0.95) 360deg
  );
}

.flash-card[data-style="deep-abyss"] .border-beam-line {
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 280deg,
    rgba(2, 132, 199, 0.4) 310deg,
    rgba(56, 189, 248, 0.8) 335deg,
    rgba(255, 255, 255, 1) 350deg,
    rgba(186, 230, 253, 0.95) 360deg
  );
}

.flash-card[data-style="obsidian-titanium"] .border-beam-line {
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 280deg,
    rgba(148, 163, 184, 0.3) 310deg,
    rgba(203, 213, 225, 0.7) 335deg,
    rgba(255, 255, 255, 1) 350deg,
    rgba(241, 245, 249, 0.9) 360deg
  );
}

/* Fallback for browsers that do not support @property: transform rotate */
@supports not (background: paint(something)) {
  @keyframes borderBeamRotateFallback {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .border-beam-line {
    animation: borderBeamRotateFallback 6s linear infinite;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Metal FX (Libraries.dev metal liquid chromatic preset)
   Applied to card-flip-controls pill, step-badge, and next button
   ═══════════════════════════════════════════════════════════════════ */
@keyframes metalSheenWander {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes metalHaloRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 1. Main Guide Container Capsule (Liquid Metal Rim with Wandering Halo) */
.card-flip-controls {
  position: relative;
  background: radial-gradient(circle at 50% 0%, rgba(30, 41, 62, 0.95), rgba(10, 14, 24, 0.96) 85%) !important;
  border: 1px solid transparent !important;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.65),
    0 0 20px rgba(56, 189, 248, 0.15),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6) !important;
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

/* Chromatic liquid metal wandering border */
.card-flip-controls::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1.2px;
  background: linear-gradient(
    95deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(147, 197, 253, 0.6) 20%,
    rgba(244, 114, 182, 0.6) 40%,
    rgba(56, 189, 248, 0.8) 60%,
    rgba(255, 255, 255, 0.85) 80%,
    rgba(167, 139, 250, 0.6) 100%
  );
  background-size: 250% 250%;
  animation: metalSheenWander 8s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Inner shadow & specular reflection bar */
.card-flip-controls::after {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  pointer-events: none;
  z-index: 2;
}

/* 2. Step Badge (Brushed Titanium / Silver Metal Badge) */
.card-step-guide .step-badge {
  position: relative;
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #f8fafc !important;
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 0, 0, 0.5) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
}

/* 3. Next Action Button (Chromatic / Mint Liquid Metal Circle) */
.side-flip-icon-btn.is-next-step {
  position: relative;
  background: radial-gradient(circle at 35% 30%, #7ddc8c 0%, #34d399 45%, #059669 85%, #022c22 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 
    0 4px 16px rgba(16, 185, 129, 0.55),
    0 0 12px rgba(125, 220, 140, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.85),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5) !important;
  color: #032014 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .side-flip-icon-btn.is-next-step:hover {
    transform: scale(1.1) translateY(-1px) !important;
    box-shadow: 
      0 6px 22px rgba(16, 185, 129, 0.75),
      0 0 20px rgba(125, 220, 140, 0.85),
      inset 0 2px 6px rgba(255, 255, 255, 0.95),
      inset 0 -2px 6px rgba(0, 0, 0, 0.6) !important;
  }
}

/* Specular rotating halo shine inside the circle */
.side-flip-icon-btn.is-next-step::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 280deg,
    rgba(255, 255, 255, 0.8) 320deg,
    transparent 360deg
  );
  animation: metalHaloRotate 4s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* Top dent rim reflection */
.side-flip-icon-btn.is-next-step::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 15%;
  right: 15%;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  filter: blur(0.4px);
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   Twin Verification Micro-Icon Grid & Global Header Avatar
   ═══════════════════════════════════════════════════════════════════ */

/* Global Authenticated User Avatar Button in Header */
.global-user-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .global-user-avatar-btn:hover {
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
  }
}

.global-user-avatar-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(125, 220, 140, 0.15));
}

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

.global-user-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #0b0f19;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

/* Micro-Icon Verification Section */
.verification-micro-section {
  margin: 14px 0;
}

.micro-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.micro-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.01em;
  margin: 0;
}

.micro-section-hint {
  font-size: 11px;
  color: #94a3b8;
}

/* Micro-Icon Grid Layout */
/* Micro-Icon Grid Layout (Compact Horizontal Row per Category) */
.verification-icon-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* MengTo Tactile 3D Skeuomorphic Button Aesthetic (Compact & Space-efficient) */
.micro-verify-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px 5px;
  min-width: 64px;
  border-radius: 12px;
  /* Multi-layer gradient & 3D bevel effect */
  background: linear-gradient(180deg, #242b3d 0%, #161a26 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 2px 5px -1px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
  text-align: center;
  position: relative;
  overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
  .micro-verify-card:hover {
    background: linear-gradient(180deg, #2d364c 0%, #1c2132 100%);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1.5px);
    box-shadow: 
      0 1px 0 rgba(255, 255, 255, 0.25) inset,
      0 -1px 0 rgba(0, 0, 0, 0.4) inset,
      0 4px 10px -2px rgba(0, 0, 0, 0.6),
      0 2px 4px rgba(0, 0, 0, 0.4);
  }
}

.micro-verify-card:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #161a26 0%, #202636 100%);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.6) inset,
    0 1px 2px rgba(0, 0, 0, 0.4);
}

/* 綠燈已啟用狀態 (Active with Glowing Green LED) */
.micro-verify-card.is-active {
  border-color: rgba(52, 211, 153, 0.35);
  background: linear-gradient(180deg, #1c2e2c 0%, #131f20 100%);
  box-shadow: 
    0 1px 0 rgba(52, 211, 153, 0.25) inset,
    0 -1px 0 rgba(0, 0, 0, 0.5) inset,
    0 3px 8px -1px rgba(16, 185, 129, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.4);
}

.micro-verify-card.is-active .micro-icon-badge {
  color: #34d399;
}

/* 核心基礎二選一錨點強調 */
.micro-verify-card.is-anchor-method {
  border-color: rgba(56, 189, 248, 0.28);
}
.micro-verify-card.is-anchor-method.is-active {
  border-color: rgba(52, 211, 153, 0.4);
}

/* 未開放 / 規劃中 (Disabled / Non-clickable) */
.micro-verify-card.is-future {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.85);
  background: linear-gradient(180deg, #171b26 0%, #0f131a 100%);
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 1px 2px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.05);
}

/* 3D Tactile Icon Well / Inset (Enlarged to 44x44px for high visual presence) */
.micro-icon-badge {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.4) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: #cbd5e1;
  transition: all 0.2s ease;
}

.micro-icon-badge svg {
  width: 22px;
  height: 22px;
}

.micro-verify-card:hover .micro-icon-badge {
  color: #ffffff;
}

/* Tactile Physical LED Indicator Light (Top-Left) */
.micro-led-dot {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #475569;
  border: 1.5px solid #0f172a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: all 0.25s ease;
  z-index: 3;
}

/* 綠燈亮起 (Lit Green LED with High-Intensity Glow) */
.micro-verify-card.is-active .micro-led-dot {
  background: #34d399;
  border-color: #064e3b;
  box-shadow: 
    0 0 0 1px rgba(52, 211, 153, 0.4),
    0 0 6px 1.5px #34d399,
    0 0 12px 2px rgba(16, 185, 129, 0.6);
}

/* 未開放 / 未啟用灰燈 (Extinguished Grey LED) */
.micro-verify-card:not(.is-active) .micro-led-dot {
  background: #475569;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}

/* 右上角分數 Badge (Corner Score Badge without "分") */
.micro-score-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  padding: 1px 5px;
  border-radius: 6px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1.2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 3;
  white-space: nowrap;
}

.micro-verify-card.is-active .micro-score-badge {
  border-color: rgba(52, 211, 153, 0.5);
  color: #34d399;
  background: #06281e;
}

.micro-score-badge.is-highlight {
  border-color: rgba(56, 189, 248, 0.6);
  background: #0c2b42;
  color: #7dd3fc;
  font-weight: 800;
}

.micro-score-badge.is-future-badge {
  border-color: rgba(148, 163, 184, 0.25);
  background: #1e293b;
  color: #94a3b8;
}

.micro-score-badge.is-matrix-badge {
  border-color: rgba(168, 85, 247, 0.5);
  background: #25123d;
  color: #c084fc;
}

/* L6 Twin Matrix 專屬 3D 亮紫按鈕 */
.micro-verify-card.is-matrix-entry {
  border-color: rgba(168, 85, 247, 0.4);
  background: linear-gradient(180deg, #2a1f47 0%, #17122a 100%);
  box-shadow: 
    0 1px 0 rgba(216, 180, 254, 0.3) inset,
    0 -1px 0 rgba(0, 0, 0, 0.5) inset,
    0 3px 8px -1px rgba(168, 85, 247, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.4);
}

@media (hover: hover) and (pointer: fine) {
  .micro-verify-card.is-matrix-entry:hover {
    background: linear-gradient(180deg, #372861 0%, #1e1738 100%);
    border-color: rgba(192, 132, 252, 0.6);
    transform: translateY(-2px);
    box-shadow: 
      0 1px 0 rgba(216, 180, 254, 0.4) inset,
      0 5px 14px -1px rgba(168, 85, 247, 0.5);
  }
}

.micro-verify-card.is-matrix-entry .micro-led-dot {
  background: #a855f7;
  border-color: #581c87;
  box-shadow: 
    0 0 0 1px rgba(192, 132, 252, 0.4),
    0 0 6px 1.5px #a855f7,
    0 0 12px 2px rgba(168, 85, 247, 0.6);
}

.micro-name {
  font-size: 10.5px;
  font-weight: 650;
  color: #cbd5e1;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Categorized Evidence Sections (Row by Row, Space-efficient) */
.verification-evidence-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.evidence-category-block {
  padding: 6px 10px 8px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.evidence-category-block.category-l6-block {
  border-color: rgba(168, 85, 247, 0.25);
  background: linear-gradient(180deg, rgba(30, 20, 50, 0.4) 0%, rgba(15, 23, 42, 0.5) 100%);
}

.evidence-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  flex-wrap: wrap;
  gap: 4px;
}

.category-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-size: 9.5px;
  font-weight: 750;
  font-family: var(--font-mono, monospace);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.category-l6-block .category-step-num {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.35);
}

.category-title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  line-height: 1.25;
}

.tier-prefix {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.02em;
}

.category-l6-block .tier-prefix {
  color: #c084fc;
}

.academic-tag {
  font-size: 9.5px;
  font-weight: 650;
  font-family: var(--font-mono, monospace);
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
}

.category-l6-block .academic-tag {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.28);
}

.category-desc {
  font-size: 10px;
  color: #94a3b8;
}

/* Privacy & Zero-Retention Note */
.privacy-zero-retention-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 14px;
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.note-shield-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(52, 211, 153, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.note-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.note-text strong {
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
}

.note-text span {
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.35;
}

/* Primary Anchor Box (Google / Passkey shared basis) */
.primary-anchor-box {
  background: rgba(2, 6, 23, 0.45);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 11px;
  padding: 8px;
  margin-bottom: 6px;
}

.primary-anchor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 4px;
}

.anchor-tag {
  font-size: 10px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.anchor-note {
  font-size: 10.5px;
  color: #cbd5e1;
}

.anchor-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Sovereign Credential Banner (SBT as independent result) */
.sovereign-credential-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  margin-top: 16px;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sovereign-credential-banner:hover {
    border-color: rgba(245, 158, 11, 0.6);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    transform: translateY(-1px);
  }
}

.credential-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.credential-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  flex-shrink: 0;
}

.credential-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.credential-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.credential-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

.credential-chip {
  font-size: 10px;
  font-weight: 650;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.credential-chip.verified {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
}

.credential-desc {
  margin: 0;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
}

.credential-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.credential-action-btn:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fef3c7;
}

/* Reclaim (#604): when the Google account that came back from the personal
   page holds other Human IDs than the one on that page, they are listed in the
   step guide's pill shape, in the guide pill's place. Only the <select> reset is new. */
.card-reclaim-human-id .card-reclaim-human-id-select {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #f1f5f9;
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Flow overhaul (F01–F13): locked tabs, step icons, quiet sign-in,
   signed-out Me, desktop side-by-side layout.
   ═══════════════════════════════════════════════════════════════════════ */

/* A tab that opens only once a Human ID exists says so instead of bouncing
   the person back with a toast: dimmed, a lock beside the label, and no
   pointer affordance. */
.nav-tab.is-locked,
.topbar-tab.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.nav-tab.is-locked .nav-pill,
.topbar-tab.is-locked {
  filter: grayscale(1);
}
.nav-tab.is-locked > span:last-child::after,
.topbar-tab.is-locked::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>") center / contain no-repeat;
}

/* The step button shows what it opens: camera on step 1, pencil on step 2. */
.side-flip-icon-btn .step-photo-icon,
.side-flip-icon-btn .step-edit-icon { display: none !important; }
.side-flip-icon-btn.is-next-step.is-step-photo .next-step-icon,
.side-flip-icon-btn.is-next-step.is-step-edit .next-step-icon { display: none !important; }
.side-flip-icon-btn.is-next-step.is-step-photo .step-photo-icon,
.side-flip-icon-btn.is-next-step.is-step-edit .step-edit-icon { display: block !important; }

/* One primary action per screen. Before a claim the step rail owns the
   Google action, so the header's sign-in reads as the quiet text link it is
   for returning owners. */
.google-login-header-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.google-login-header-btn:hover { color: var(--text) !important; }

/* Me, signed out. */
.me-signed-out-card {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 6px 2px 2px;
}
.me-signed-out-card h3 { margin: 0; font-size: 16px; font-weight: 700; }
.me-signed-out-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 46ch; }
.me-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.me-sign-out-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.me-sign-out-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.header-account {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.header-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border-radius: 12px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.header-account-menu[hidden] {
  display: none;
}

.header-account-menu-item {
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e2e8f0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.header-account-menu-item[hidden] {
  display: none;
}

.header-account-menu-item:hover,
.header-account-menu-item:focus-visible {
  background: rgba(56, 189, 248, 0.12);
}

.header-account-menu-item:disabled {
  opacity: 0.6;
  cursor: progress;
}

html[data-theme="light"] .header-account-menu {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .header-account-menu-item {
  color: #0f172a;
}

.claim-gate-sign-out-btn {
  margin-left: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.claim-gate-sign-out-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Desktop: the card stays put and the pages open beside it. One navigation
   (the top tabs); the phone's bottom bar is not drawn here. */
/* Removed 2026-09-16: the @media (min-width: 1024px) block — every width shows the phone layout now. */

/* Idle release. Four decorations run forever — the border beam (transform +
   drop-shadow), the metal sheen (background-position, a repaint every frame on
   top of a blur(24px) backdrop), the next-step pulse (box-shadow) and the halo
   — and a WebGL orb draws to an off-screen canvas at ~43 frames a second. On a
   laptop with many tabs that was "the page froze my computer". Nothing leaked;
   the page just never stopped moving. After 20 seconds without input, when the
   tab is hidden, or when the person asked their OS for less motion, they pause;
   the first pointer or key brings them back. */
html.studio-idle .border-beam-line,
html.studio-idle .card-flip-controls::before,
html.studio-idle .side-flip-icon-btn.is-next-step,
html.studio-idle .side-flip-icon-btn.is-next-step::before {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .border-beam-line,
  .card-flip-controls::before,
  .side-flip-icon-btn.is-next-step,
  .side-flip-icon-btn.is-next-step::before {
    animation: none !important;
  }
}

.side-flip-icon-btn.is-google-claim { flex-shrink: 0; }
.side-flip-icon-btn .google-claim-step-label { display: none; }
.card-flip-controls:has([data-toggle-card-flip].is-google-claim) .card-edit-btn:not(.is-active) { display: none !important; }
[data-front-name]:focus-visible,
[data-front-tagline]:focus-visible {
  outline: 2px solid var(--studio-accent, #65dfb4) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px rgba(2, 6, 23, 0.9);
}

html[dir="rtl"] .card-id-input-group,
html[dir="rtl"] .identity-acrylic-badge,
html[dir="rtl"] .card-brand {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .card-id-input-group {
  flex-direction: row;
  text-align: left;
}

html[dir="rtl"] .card-id-prefix,
html[dir="rtl"] .card-id-input,
html[dir="rtl"] .identity-acrylic-badge .acrylic-handle {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}