/* ===== comic.css — "Comic" visual theme =====
   Swap this file for a different look. structure.css handles layout. */

/* --- Theme color tokens --- */
:root {
  --ink: #17151b;
  --ink-deep: #131217;
  --ink-soft: #232027;
  --paper: #fff4cf;
  --pop: #ffd83d;
  --shock: #17c9ff;
  --punch: #ff315f;
  --cream: #fbf1e0;
  --cream-dim: #f3e7cf;
  --cream-bright: #fffdf7;
  --magenta: #ff315f;
  --cyan: #17c9ff;
  --yellow: #ffd83d;
  --muted: #6e6552;
  --placeholder: #9a93a8;
}

/* --- Base page --- */
html,
body {
  background: var(--paper);
}
body {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  background-image:
    radial-gradient(circle at 12% 6%, rgba(255, 216, 61, 0.45), transparent 22rem),
    radial-gradient(circle at 88% 3%, rgba(23, 201, 255, 0.3), transparent 24rem),
    radial-gradient(circle, rgba(7, 8, 13, 0.06) 1px, transparent 1.6px);
  background-size:
    auto,
    auto,
    14px 14px;
  background-attachment: fixed;
}
h1,
h2,
h3,
h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* --- Base elements --- */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='url'],
textarea,
select {
  background: var(--cream-bright) !important;
  color: var(--ink) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 4px !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 14px;
}
input::placeholder,
textarea::placeholder {
  color: var(--placeholder) !important;
}
select {
  cursor: pointer;
}
label {
  color: var(--ink);
  font-weight: 600;
}
p,
span,
li {
  color: var(--ink);
}
a {
  color: var(--pop);
}
a:hover {
  opacity: 0.85;
}
button {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  cursor: pointer;
}
small,
.text-xs {
  color: var(--muted);
}
hr {
  border-color: var(--cream-dim);
}

/* --- Comic display helpers --- */
.comic-ink {
  text-shadow:
    4px 4px 0 var(--ink),
    8px 8px 0 var(--punch),
    0 0 30px rgba(255, 216, 61, 0.35);
  -webkit-text-stroke: 2px var(--ink);
}
.comic-ink-soft {
  text-shadow: 2px 2px 0 var(--punch);
}
.comic-dot-fill {
  background:
    radial-gradient(circle, rgba(7, 8, 13, 0.8) 0 17%, transparent 19%) 0 0 / 10px 10px,
    linear-gradient(135deg, var(--pop), var(--punch));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.comic-hero-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 216, 61, 0.3), transparent 42%),
    radial-gradient(circle at 16% 22%, rgba(23, 201, 255, 0.22), transparent 32%),
    radial-gradient(circle at 86% 26%, rgba(255, 49, 95, 0.22), transparent 32%),
    repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 255, 255, 0.05) 0deg 6deg, transparent 6deg 12deg);
}
.comic-hero-burst::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1.7px);
  background-size: 12px 12px;
  mix-blend-mode: overlay;
}

/* --- Login screen visual --- */
#login-screen,
#rotate-gate {
  background: #17151b !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.login-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg at 50% 46%,
    rgba(248, 239, 206, 0.05) 0deg 7.5deg,
    transparent 7.5deg 15deg
  );
  animation: login-rays-spin 120s linear infinite;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}
.login-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 35%, rgba(54, 169, 225, 0.14), transparent 45%),
    radial-gradient(circle at 100% 35%, rgba(229, 9, 127, 0.1), transparent 45%),
    radial-gradient(rgba(248, 239, 206, 0.05) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    26px 26px;
}
@keyframes login-rays-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.login-cluster {
  animation: login-card-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes login-card-pop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.login-card {
  background: #fbf1e0;
  border: 3px solid #131217;
  border-radius: 4px;
  box-shadow: 14px 14px 0 #000;
}
.login-pill {
  border: 2.5px solid #17151b;
  border-radius: 999px;
  font-weight: 700;
}
.login-pill-step {
  top: -16px;
  left: -14px;
  background: #ffd83d;
  color: #17151b;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 7px 16px;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 #17151b;
}
.login-pill-click {
  top: -12px;
  right: -18px;
  background: #ff315f;
  color: #fbf1e0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  padding: 6px 14px;
  transform: rotate(5deg);
  box-shadow: 2px 2px 0 #17151b;
}
.login-wordmark {
  font-family: 'Archivo Black', sans-serif;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -1px;
  color: #ff315f;
  text-transform: lowercase;
}
.login-wordmark span {
  color: #17151b;
}
.login-wordmark.pop,
.builder-wordmark.pop,
.guide-wordmark.pop {
  color: var(--cream, #fbf1e0) !important;
  text-shadow:
    3px 3px 0 var(--magenta, #ff315f),
    -1.5px -1.5px 0 var(--ink, #17151b),
    1.5px -1.5px 0 var(--ink, #17151b),
    -1.5px 1.5px 0 var(--ink, #17151b),
    1.5px 1.5px 0 var(--ink, #17151b) !important;
}
.login-wordmark.pop span,
.builder-wordmark.pop span,
.guide-wordmark.pop span {
  color: var(--ink, #17151b) !important;
  text-shadow: none !important;
}
.login-tagline {
  margin-top: 4px;
  color: #6e6552;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.login-subline {
  margin: 12px auto 0;
  max-width: 300px;
  color: #8a8270;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.login-chip {
  display: inline-block;
  margin-top: 12px;
  background: #17c9ff;
  color: #0a3349;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  border: 2px solid #17151b;
  border-radius: 999px;
}
.login-btn {
  width: 100%;
  border: 3px solid #17151b;
  border-radius: 4px;
  box-shadow: 5px 5px 0 #17151b;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.login-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #17151b;
}
.login-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 #17151b;
}
.login-btn:focus-visible,
.login-input:focus-visible:not(.placeholder-input) {
  outline: 3px solid #17c9ff;
  outline-offset: 3px;
}
.login-btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  background: #fffdf7 !important;
  padding: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #17151b !important;
  text-transform: uppercase;
}
.login-btn-google svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.login-btn-send {
  margin-top: 18px;
  background: #ff315f !important;
  padding: 15px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: #fbf1e0 !important;
  text-transform: uppercase;
}
.welcome-session-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.welcome-session-actions .login-btn {
  margin-top: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: normal;
  text-transform: uppercase;
}
.login-btn-typing {
  background: #28bff2 !important;
  padding: 15px;
  color: #17151b !important;
}
.login-btn-verify {
  margin-top: 18px;
  background: #ffd83d !important;
  padding: 15px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: #17151b !important;
  text-transform: uppercase;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 3px;
  background: #17151b;
}
.login-divider span {
  color: #17151b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}
.login-field label {
  display: block;
  color: #17151b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.login-input {
  width: 100%;
  margin-top: 6px;
  background: #fffdf7 !important;
  border: 3px solid #17151b !important;
  border-radius: 4px !important;
  padding: 13px 14px !important;
  color: #17151b !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
}
.login-input::placeholder {
  color: #9a93a8;
}
.login-microcopy {
  margin-top: 14px;
  color: #8a8270;
  font-size: 12px;
  font-weight: 500;
}
.login-microcopy strong {
  color: #ff315f;
}
.login-error {
  margin-top: 10px;
  color: #ff315f;
  font-size: 12px;
  font-weight: 700;
}
.login-code-copy {
  margin-bottom: 16px;
  color: #6e6552;
  font-size: 13px;
  font-weight: 700;
}
.login-back {
  margin-top: 14px;
  width: 100%;
  color: rgba(23, 21, 27, 0.62);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.login-back:hover {
  color: #17151b;
}
.login-halftone {
  position: absolute;
  left: -52px;
  bottom: -34px;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(#17c9ff 2px, transparent 2px);
  background-size: 12px 12px;
  opacity: 0.45;
  pointer-events: none;
}
.login-wireframes {
  position: absolute;
  right: -56px;
  bottom: -22px;
  background: #fbf1e0;
  border: 2.5px solid #17151b;
  border-radius: 5px;
  padding: 7px;
  box-shadow: 4px 4px 0 #ff315f;
  transform: rotate(6deg);
  display: flex;
  gap: 5px;
}
.login-wireframes span {
  display: block;
  width: 24px;
}
.login-wireframes i {
  display: block;
  height: 14px;
  border: 1.5px solid #17151b;
}
.login-wireframes b {
  display: block;
  height: 5px;
  background: #17151b;
  margin-top: 2px;
}
.login-wireframes span:nth-child(1) i {
  background: #ff315f;
}
.login-wireframes span:nth-child(2) i {
  background: #17c9ff;
}
.login-wireframes span:nth-child(3) i {
  background: #ffd83d;
}
@media (max-width: 480px) {
  .login-wireframes {
    right: -10px;
  }
  .login-halftone {
    left: -20px;
  }
}
#rotate-gate .login-microcopy {
  margin-top: 24px;
}
#rotate-gate .rg-emoji {
  margin-bottom: 16px;
  font-size: 58px;
  line-height: 1;
  animation: rg-spin 2.4s ease-in-out infinite;
}
@keyframes rg-spin {
  0%,
  100% {
    transform: rotate(-15deg);
  }
  55% {
    transform: rotate(75deg);
  }
}

/* --- Share modal visual --- */
#share-modal {
  background: rgba(23, 21, 27, 0.86) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.share-card {
  background: #fbf1e0;
  border: 3px solid #131217;
  border-radius: 4px;
  box-shadow: 14px 14px 0 #000;
  color: #17151b;
  animation: login-card-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.share-pill {
  border: 2.5px solid #17151b;
  border-radius: 999px;
  background: #ffd83d;
  color: #17151b;
  box-shadow: 3px 3px 0 #17151b;
  padding: 7px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.share-close {
  border: 2.5px solid #17151b;
  border-radius: 999px;
  background: #ff315f;
  color: #fbf1e0;
  box-shadow: 2px 2px 0 #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transform: rotate(5deg);
}
.share-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #fbf1e0;
  text-align: center;
  text-transform: lowercase;
  text-shadow:
    3px 3px 0 #ff315f,
    -1.5px -1.5px 0 #17151b,
    1.5px -1.5px 0 #17151b,
    -1.5px 1.5px 0 #17151b,
    1.5px 1.5px 0 #17151b;
}
/* Share-modal weboom now uses the canonical .weboom-logo (see source of truth
   below). Only its left-alignment within .share-brand is kept here. */
.share-brand .weboom-logo,
.share-brand .share-tagline,
.share-brand .share-subline {
  text-align: left !important;
}
.share-brand .share-subline {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.share-tagline {
  margin-top: 8px;
  color: #6e6552;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.share-chip {
  display: inline-block;
  max-width: 100%;
  margin-top: 10px;
  background: #17c9ff;
  color: #0a3349;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  border: 2px solid #17151b;
  border-radius: 999px;
  white-space: nowrap;
}
.share-subline {
  margin: 12px auto 0;
  max-width: 300px;
  color: #8a8270;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.share-section {
  margin-top: 22px;
  text-align: left;
}
.share-label {
  display: block;
  color: #17151b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.share-input {
  width: 100%;
  min-width: 0;
  background: #fffdf7 !important;
  border: 3px solid #17151b !important;
  border-radius: 4px !important;
  padding: 13px 14px !important;
  color: #17151b !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
}
.share-copy,
.share-social,
.share-publish,
.share-open-link {
  border: 3px solid #17151b;
  border-radius: 4px;
  box-shadow: 5px 5px 0 #17151b;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.share-copy:hover,
.share-social:hover,
.share-publish:hover,
.share-open-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #17151b;
}
.share-copy:active,
.share-social:active,
.share-publish:active,
.share-open-link:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 #17151b;
}
.share-input:focus,
.share-copy:focus-visible,
.share-social:focus-visible,
.share-publish:focus-visible,
.share-open-link:focus-visible,
.share-built-link:focus-visible,
.share-close:focus-visible {
  outline: 3px solid #17c9ff;
  outline-offset: 3px;
}
.share-copy {
  background: #ff315f;
  color: #fbf1e0;
  padding: 13px 16px;
  font-size: 12px;
  letter-spacing: 1.5px;
}
.share-publish {
  background: #ffd83d;
  color: #17151b;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
}
.share-social {
  background: #fffdf7;
  color: #17151b;
  text-decoration: none !important;
}
.share-social:nth-child(2n) {
  background: #17c9ff;
}
.share-social:nth-child(3n) {
  background: #ffd83d;
}
.share-open-link {
  background: #ffd83d;
  color: #17151b;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none !important;
}
.share-built-link {
  color: #8a8270;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none !important;
}
.share-built-wordmark {
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: -0.4px;
  text-transform: lowercase;
}
.share-built-link:hover {
  color: #ff315f;
}
.share-halftone {
  position: absolute;
  left: -52px;
  bottom: -34px;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(#17c9ff 2px, transparent 2px);
  background-size: 12px 12px;
  opacity: 0.45;
  pointer-events: none;
}

/* QR code */
.share-qr-toggle {
  width: 100%;
  background: #fffdf7;
  border: 3px dashed #17151b;
  border-radius: 4px;
  padding: 11px 14px;
  color: #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 11px;
  cursor: pointer;
}
.share-qr-toggle:hover {
  background: #ffd83d;
}
.share-qr {
  margin-top: 12px;
  text-align: center;
}
.share-qr.hidden,
.share-social.hidden {
  display: none;
}
.share-qr-box {
  display: inline-flex;
  padding: 10px;
  background: #fffdf7;
  border: 3px solid #17151b;
  border-radius: 4px;
  box-shadow: 5px 5px 0 #17151b;
}
.share-qr-box svg {
  width: 160px;
  height: 160px;
  display: block;
}
.share-qr-hint {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #8a8270;
}

/* --- Credits shop visual --- */
#credits-shop-modal {
  background: rgba(23, 21, 27, 0.94) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow: auto;
}
.credits-shop-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #fbf1e0;
  animation: login-card-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.credits-shop-close {
  border: 2.5px solid #17151b;
  border-radius: 999px;
  background: #ff315f;
  color: #fbf1e0;
  box-shadow: 2px 2px 0 #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transform: rotate(5deg);
}
.credits-shop-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  margin: 16px 0 10px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.04;
  color: #fbf1e0;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  text-shadow: none !important;
}
.credits-shop-tagline {
  margin: 0;
  color: #fbf1e0;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}
.credits-shop-balance {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 12px 0 0;
  background: #17c9ff;
  border: 2px solid #17151b;
  border-radius: 999px;
  padding: 5px 14px;
  box-shadow: 3px 3px 0 #17151b;
  color: #0a3349;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.credits-shop-balance strong {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px;
  margin: 0 4px;
}
.credits-pack {
  background: #fbf1e0;
  border: 3px solid #131217;
  border-radius: 4px;
  box-shadow: 14px 14px 0 #000;
  color: #17151b;
}
.credits-pack--featured {
  background: #ffd83d;
  box-shadow: 14px 14px 0 #ff315f;
}
.credits-pack--setup {
  background: #17c9ff;
}
.credits-pack-badge {
  border: 2px solid #17151b;
  border-radius: 999px;
  background: #ff315f;
  color: #fbf1e0;
  padding: 4px 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}
.credits-pack-name {
  margin: 16px 0 6px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
}
.credits-pack-price {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 34px;
  line-height: 1.1;
}
.credits-pack-credits {
  font-size: 15px;
  font-weight: 700;
}
.credits-pack-credits strong {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 24px;
}
.credits-pack-meta,
.credits-pack-rate {
  font-size: 14px;
  color: #6e6552;
  font-weight: 600;
}
.credits-pack-buy::before {
  border-top: 3px dashed rgba(0, 0, 0, 0.2);
}
.credits-pack-link {
  border: 3px solid #17151b;
  border-radius: 4px;
  background: #17151b;
  color: #fbf1e0 !important;
  box-shadow: 5px 5px 0 #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 1.6px;
  text-decoration: none !important;
  text-transform: uppercase;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.credits-pack--featured .credits-pack-link {
  background: #ff315f;
  color: #fbf1e0 !important;
}
.credits-pack-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #17151b;
}
.credits-pack-link:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 #17151b;
}
.credits-pack-link:focus-visible {
  outline: 3px solid #17c9ff;
  outline-offset: 3px;
}
.credits-pack-soon {
  font-size: 12px;
  font-weight: 700;
  color: #8a8270;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.credits-shop-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: #fbf1e0;
  font-weight: 600;
}
@media (max-width: 860px) {
  .credits-shop-card {
    max-width: 720px;
  }
  .credits-shop-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Path screen visual --- */
#path-screen,
#full-speech-screen {
  background: #17151b !important;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
#path-screen .login-stage::before,
#full-speech-screen .login-stage::before {
  top: 58%;
}
.path-cluster {
  animation: login-card-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.path-pill {
  display: inline-block;
  background: #ffd83d;
  color: #17151b;
  border: 2.5px solid #17151b;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 7px 16px;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 #17151b;
  text-transform: uppercase;
}
.path-heading {
  margin: 16px 0 22px;
  color: #fbf1e0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.04;
  text-transform: none;
  letter-spacing: 0;
}
.path-card {
  border: 3px solid #131217;
  border-radius: 4px;
  box-shadow: 14px 14px 0 #000;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}
.path-sticker {
  border: 3px solid #17151b;
  border-radius: 999px;
  box-shadow: 4px 4px 0 #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(7deg);
}
.path-sticker--free {
  background: #ff315f;
  color: #fbf1e0;
  animation: sticker-bounce 1.05s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}
.path-sticker--rec {
  background: #ffd83d;
  color: #17151b;
  transform: rotate(-5deg);
}
.path-finger {
  transform: rotate(225deg);
  animation: finger-bounce 0.9s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}
@keyframes sticker-bounce {
  0%,
  100% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(9deg);
  }
}
@keyframes finger-bounce {
  0%,
  100% {
    transform: rotate(225deg) translate(0, 0);
  }
  50% {
    transform: rotate(225deg) translate(0, -10px);
  }
}
.path-card--creative {
  background: #ff315f;
  color: #fbf1e0;
}
.path-card--template {
  background: #fbf1e0;
  color: #17151b;
}
.path-card--talk {
  background: #17c9ff;
  color: #07080d;
}
.path-chip {
  display: inline-block;
  border: 2px solid #17151b;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  text-transform: uppercase;
}
.path-chip--light {
  background: #ffd83d;
  color: #17151b;
}
.path-chip--blue {
  background: #17c9ff;
  color: #0a3349;
}
.path-chip--pink {
  background: #ff315f;
  color: #fbf1e0;
}
.path-card h3 {
  margin: 16px 0 10px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
}
.path-card p {
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0.92;
}
.path-card .path-cta {
  position: relative;
  margin-top: auto;
}
.path-card .path-cta::before {
  content: '';
  position: absolute;
  top: -14px;
  left: -24px;
  right: -24px;
  border-top: 3px dashed rgba(0, 0, 0, 0.25);
}
.path-cta {
  border: 3px solid #17151b;
  border-radius: 4px;
  box-shadow: 5px 5px 0 #17151b;
  cursor: pointer;
  padding: 14px 22px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.path-cta--dark {
  background: #17151b;
  color: #fbf1e0;
}
.path-cta--pop {
  background: #ffd83d;
  color: #17151b;
}
.path-cta:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #17151b;
}
.path-cta:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 #17151b;
}
.path-cta:focus-visible {
  outline: 3px solid #17c9ff;
  outline-offset: 3px;
}
.path-cluster--voice .path-heading {
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 900;
  line-height: 0.98;
}
.path-voice-cta {
  border: 4px solid #17151b;
  border-radius: 7px;
  background: #ff315f;
  box-shadow: 10px 10px 0 #000;
  color: #fbf1e0;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(18px, 3vw, 27px);
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.path-voice-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 12px 12px 0 #000;
}
.path-voice-cta:active {
  transform: translate(7px, 7px);
  box-shadow: 3px 3px 0 #000;
}
.path-voice-cta:focus-visible {
  outline: 4px solid #17c9ff;
  outline-offset: 5px;
}
#full-speech-screen .sting-logo {
  position: relative;
  z-index: 2;
  margin: 0 0 clamp(26px, 5vh, 42px);
  display: block;
  width: clamp(260px, 48vw, 540px);
  max-width: calc(100vw - 56px);
  height: auto;
  filter: drop-shadow(0 0 3px rgba(251, 241, 224, 0.38)) drop-shadow(0 0 9px rgba(251, 241, 224, 0.14));
}
#full-speech-screen {
  background: #17151b !important;
}
#full-speech-screen .login-stage::before {
  animation-duration: 24s;
}
#full-speech-screen .sting-subheading {
  max-width: 520px;
  margin: -12px 0 28px;
  color: #fbf1e0;
  font-size: clamp(16px, 2.3vw, 21px);
  font-weight: 700;
  line-height: 1.4;
}
#full-speech-screen .cta-sting-wrap {
  position: relative;
  display: flex;
  isolation: isolate;
  transform-origin: 50% 70%;
  animation: realtime-cta-wobble 3.4s ease-in-out infinite;
}
#full-speech-screen .cta-sting-wrap:hover,
#full-speech-screen .cta-sting-wrap:focus-within {
  animation-play-state: paused;
}
#full-speech-screen .cta-sting-wrap .path-halftone {
  left: -84px;
  bottom: -80px;
}
#full-speech-screen .path-voice-cta {
  width: auto;
  min-width: 240px;
}
#full-speech-screen .cta-label-mobile {
  display: none;
}
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  #full-speech-screen .cta-label-desktop {
    display: none;
  }
  #full-speech-screen .cta-label-mobile {
    display: inline;
  }
}
@keyframes realtime-cta-wobble {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  20% {
    transform: rotate(-1.2deg) translateY(-2px);
  }
  40% {
    transform: rotate(1.2deg) translateY(0);
  }
  60% {
    transform: rotate(-0.8deg) translateY(-1px);
  }
  80% {
    transform: rotate(0.8deg) translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #full-speech-screen .cta-sting-wrap,
  #full-speech-screen .login-stage::before {
    animation: none;
  }
}
@media (max-width: 760px) and (orientation: portrait) {
  #full-speech-screen .path-cluster--voice {
    transform: translateY(-50%);
  }
}
.path-console-link,
.voice-console-link {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #8f887c;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-transform: lowercase;
}
.path-console-link:hover,
.voice-console-link:hover {
  color: #fbf1e0;
  text-decoration-color: currentColor;
}
.path-console-link:focus-visible,
.voice-console-link:focus-visible {
  outline: 2px solid #17c9ff;
  outline-offset: 3px;
}
.path-voice-error {
  border: 4px solid #17151b;
  border-radius: 7px;
  background: #fbf1e0;
  box-shadow: 10px 10px 0 #000;
  color: #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.path-voice-error-kicker {
  display: inline-block;
  border: 2px solid #17151b;
  border-radius: 999px;
  background: #ffd83d;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.path-voice-error-icon {
  border: 3px solid #17151b;
  border-radius: 50%;
  background: #ff315f;
  box-shadow: 4px 4px 0 #17151b;
  color: #fbf1e0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}
.path-voice-error h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 900;
  line-height: 1;
}
.path-voice-error-message {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
}
.path-voice-error-help {
  color: #625c51;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}
.path-voice-recovery-btn {
  border: 3px solid #17151b;
  border-radius: 4px;
  background: #17c9ff;
  box-shadow: 4px 4px 0 #17151b;
  color: #17151b;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.path-voice-recovery-btn--primary {
  background: #ff315f;
  color: #fbf1e0;
}
.path-voice-recovery-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #17151b;
}
.path-voice-recovery-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #17151b;
}
.path-voice-recovery-btn:focus-visible,
.path-voice-recovery-link:focus-visible {
  outline: 3px solid #17c9ff;
  outline-offset: 3px;
}
.path-voice-recovery-link {
  border: 0;
  background: transparent;
  color: #625c51;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.path-voice-recovery-link:hover {
  color: #17151b;
}
.path-halftone {
  position: absolute;
  z-index: -1;
  left: -30px;
  bottom: -30px;
  width: 132px;
  height: 132px;
  background-image: radial-gradient(#17c9ff 2px, transparent 2px);
  background-size: 13px 13px;
  opacity: 0.4;
  pointer-events: none;
}
@media (max-width: 720px) {
  .path-card h3 {
    font-size: 21px;
  }
  .path-sticker {
    font-size: 9px;
  }
  .path-finger {
    transform: rotate(225deg) scale(0.78);
  }
}

/* --- Templates window visual --- */
#templates-modal.tm-step3 {
  background: #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.tm-cluster {
  animation: login-card-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.tm-cluster.tm-draggable,
.tm-cluster.tm-draggable .tm-header,
.tm-cluster.tm-draggable > .path-pill,
.tm-cluster.tm-draggable > .path-heading {
  cursor: grab;
}
.tm-cluster.tm-dragging,
.tm-cluster.tm-dragging .tm-header,
.tm-cluster.tm-dragging > .path-pill,
.tm-cluster.tm-dragging > .path-heading {
  cursor: grabbing;
}
.tm-window {
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 8px;
  box-shadow: 10px 10px 0 #000;
}
.tm-header {
  background: var(--yellow);
  border-bottom: 4px solid var(--ink);
}
.tm-title {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 18px;
  text-transform: lowercase;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.tm-close {
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: var(--punch);
  color: var(--cream);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.tm-close:hover {
  transform: rotate(10deg);
}
.tm-toolbar {
  border-bottom: 3px solid var(--ink);
}
.tm-source-btn {
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream-bright);
  color: var(--ink);
  padding: 5px 11px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.tm-source-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.tm-source-btn.tm-source-active {
  background: var(--shock);
}
.tm-search {
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  background: var(--cream-bright);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  color: var(--ink);
}
.tm-search:focus {
  outline: none;
  box-shadow: 3px 3px 0 var(--shock);
}
.tm-empty {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* --- App screen visual (builder) --- */
body:has(#app-screen:not(.hidden)) {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  background-color: var(--ink) !important;
  background-image: radial-gradient(rgba(248, 239, 206, 0.05) 1px, transparent 1px) !important;
  background-size: 26px 26px !important;
  color: var(--cream) !important;
  overflow: hidden !important;
}
/* The weboom logo is exempt (:not(.weboom-logo)) so this in-app heading font
   NEVER overrides it — the wordmark stays Archivo Black everywhere. */
body:has(#app-screen:not(.hidden)) h1:not(.weboom-logo),
body:has(#app-screen:not(.hidden)) h2:not(.weboom-logo),
body:has(#app-screen:not(.hidden)) h3:not(.weboom-logo),
body:has(#app-screen:not(.hidden)) h4:not(.weboom-logo),
body:has(#app-screen:not(.hidden)) .font-display:not(.weboom-logo) {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}
body:has(#app-screen:not(.hidden)) #build-badge {
  color: rgba(251, 241, 224, 0.48) !important;
}
#app-screen:not(.hidden) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--cream) !important;
}

/* Top bar visual */
#url-bar:not(.hidden) {
  background: var(--cream) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--ink-deep) !important;
  color: var(--ink) !important;
}
#sidebar-toggle,
#preview-refresh,
#preview-open,
#publish-btn,
#preview-site-open,
#version-history-btn {
  background: var(--cream-bright) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
}
#sidebar-toggle:active,
#preview-refresh:active,
#preview-open:active,
#publish-btn:active,
#preview-site-open:active,
#version-history-btn:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 var(--ink) !important;
}
#preview-open.pointer-events-none,
#preview-site-open.pointer-events-none,
#publish-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
/* =====================================================================
   weboom LOGO base styles moved to their OWN file: weboom-logo.css
   (the single source of truth), so admin.html and any standalone page can
   load just the logo without all of comic.css. index.html loads
   weboom-logo.css *before* this theme. Edit the brand there.
   App/theme-specific logo tweaks (the #app-screen font exemption,
   #preview-empty / .share-brand context, responsive sizing) still live in
   this file, below.
   ===================================================================== */
#url-bar > .flex-1 {
  background: var(--cream-bright) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 4px !important;
  color: var(--ink) !important;
}
#url-bar > .flex-1 span {
  color: var(--muted) !important;
}
#site-link {
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-width: 0 !important;
}
#site-link:empty::before {
  content: 'landed';
  color: var(--ink);
}
#site-link:empty::after {
  content: '.weboom.site';
  color: var(--muted);
  font-weight: 500;
}
#subdomain-section:not(.hidden) {
  background: var(--cream-bright) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
}
#subdomain-set-btn:not(.hidden),
#subdomain-link:not(.hidden) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
#subdomain-set-btn:not(.hidden) {
  background: var(--magenta) !important;
  color: var(--cream) !important;
  border-left: 2.5px solid var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
#subdomain-set-btn:not(.hidden):hover {
  background: #ff174c !important;
}
#subdomain-link:empty::before {
  content: 'yourname.weboom.ai';
  color: var(--muted);
}
#dialog-modal.dialog-subdomain > div {
  background: var(--cream) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 8px !important;
  box-shadow: 8px 8px 0 #000 !important;
}
#dialog-modal.dialog-subdomain #dialog-message {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
}
#dialog-modal.dialog-subdomain #dialog-input {
  height: 54px !important;
  padding: 0 13px !important;
  background: var(--cream-bright) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
#dialog-modal.dialog-subdomain #subdomain-input-wrap {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  margin-top: 12px !important;
  background: var(--cream-bright) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  overflow: hidden !important;
}
#dialog-modal.dialog-subdomain #subdomain-input-wrap #dialog-input {
  height: 54px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#dialog-modal.dialog-subdomain #dialog-input[type='search']::-webkit-search-decoration,
#dialog-modal.dialog-subdomain #dialog-input[type='search']::-webkit-search-cancel-button,
#dialog-modal.dialog-subdomain #dialog-input[type='search']::-webkit-search-results-button,
#dialog-modal.dialog-subdomain #dialog-input[type='search']::-webkit-search-results-decoration {
  display: none !important;
}
#dialog-modal.dialog-subdomain #subdomain-input-suffix {
  flex: 0 0 auto !important;
  padding: 0 13px 0 8px !important;
  color: var(--muted) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#dialog-modal.dialog-subdomain #dialog-input:focus,
#dialog-modal.dialog-subdomain #dialog-input:focus-visible {
  border-color: var(--ink) !important;
  outline: 3px solid var(--shock) !important;
  outline-offset: 3px !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
#dialog-modal.dialog-subdomain #subdomain-extras span {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
#dialog-modal.dialog-subdomain #subdomain-extras span:first-child {
  margin-top: 12px !important;
  color: #6f6758 !important;
}
#dialog-modal.dialog-subdomain .subdomain-actions a,
#dialog-modal.dialog-subdomain .subdomain-actions button {
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
#dialog-modal.dialog-subdomain .subdomain-actions button {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
}
#dialog-modal.dialog-subdomain #dialog-left-actions button {
  min-height: 40px !important;
  padding: 9px 14px !important;
  background: #cf1717 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
#dialog-modal.dialog-subdomain #dialog-cancel {
  background: transparent !important;
  border: 0 !important;
  color: #4b5563 !important;
  box-shadow: none !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
#dialog-modal.dialog-subdomain #dialog-ok {
  min-height: 44px !important;
  padding: 10px 18px !important;
  background: var(--yellow) !important;
  background-image: none !important;
  border: 3px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
#dialog-modal.dialog-subdomain #dialog-ok:disabled {
  background: #aaa49a !important;
  border-color: #aaa49a !important;
  box-shadow: none !important;
  color: #fffdf7 !important;
  opacity: 1 !important;
}
#dialog-modal.dialog-genius > div {
  position: relative !important;
  overflow: visible !important;
  background: linear-gradient(135deg, rgba(255, 216, 61, 0.72), rgba(255, 244, 207, 0.96) 54%), var(--cream) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 8px !important;
  box-shadow: 7px 7px 0 #000 !important;
}
#dialog-modal.dialog-genius > div::before {
  content: 'GENIUS MODE';
  position: absolute;
  left: 18px;
  top: -17px;
  z-index: 2;
  padding: 7px 14px;
  background: var(--punch);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--cream);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
#dialog-modal.dialog-genius > div::after {
  content: '3x';
  position: absolute;
  right: 18px;
  top: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background: var(--shock);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1;
}
#dialog-modal.dialog-genius #dialog-message {
  color: var(--ink) !important;
  max-width: 220px !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  text-transform: lowercase !important;
}
#dialog-modal.dialog-genius #dialog-cancel {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
#dialog-modal.dialog-genius #dialog-ok {
  padding: 9px 12px !important;
  background: var(--ink) !important;
  background-image: none !important;
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--punch) !important;
  color: var(--cream) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
}
#dialog-modal.dialog-genius #dialog-ok:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 var(--punch) !important;
}
.preview-toggles button {
  background: transparent !important;
  color: var(--muted) !important;
  border: 2.5px solid transparent !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.preview-toggles button:hover {
  color: var(--ink) !important;
}
.preview-toggles button.bg-violet-600,
.preview-toggles button.text-white {
  background: var(--cyan) !important;
  color: #0a3349 !important;
  border-color: var(--ink) !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
}

/* Credits display visual */
#credits-display:not(.hidden) {
  background: var(--yellow) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
}
#credits-display:not(.hidden):hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
#credits-display:not(.hidden):active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}
.credits-topup {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--pop);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1;
}
#credits-count {
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 14px !important;
}

/* Dock pill buttons — same pillbox as credits */
.dock-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 6px 14px !important;
  background: var(--cream-bright) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
}
.dock-pill-btn:hover:not(:disabled) {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
.dock-pill-btn:active:not(:disabled) {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}
.dock-pill-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
}
.dock-pill-btn--primary {
  background: var(--yellow) !important;
}
.dock-pill-btn--accent {
  background: var(--shock) !important;
}
.gallery-card-btn {
  min-height: 28px !important;
  padding: 5px 12px !important;
  font-size: 10px !important;
}

/* Sidebar visual */
#sidebar {
  background: var(--cream) !important;
  border: 0 !important;
  border-right: 3px solid var(--ink) !important;
  color: var(--ink) !important;
}
#app-screen:not(.hidden) aside#sidebar {
  border-right: 3px solid var(--ink) !important;
}
#sidebar > div:first-child {
  background: var(--cream-bright) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--ink) !important;
}
#sidebar > div:first-child span {
  color: var(--muted) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
}
#new-session-btn {
  background: var(--magenta) !important;
  color: var(--cream) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  flex: 0 0 auto !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}
#session-list > p {
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
#session-list .session-delete-check {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--cream);
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
}
#session-list .session-delete-check:checked {
  background: var(--pop);
}
#session-list .session-delete-check:checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
#session-list .session-delete-check:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}
#session-list .session-row-btn {
  background: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
#session-list .session-row-btn:hover {
  background: var(--cream-dim) !important;
  color: var(--ink) !important;
  border-color: var(--cyan) !important;
}
#session-list .session-row-btn.session-active {
  background: var(--yellow) !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  transform: rotate(-0.8deg) !important;
  font-weight: 700 !important;
}
#session-list .group > button:not(:first-child):not(.session-row-btn) {
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  background: var(--cream-bright) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
#session-list .group > button:not(:first-child):not(.session-row-btn):hover {
  background: var(--cyan) !important;
  border-color: var(--ink) !important;
  color: #0a3349 !important;
}
#session-list .group > button:last-child:not(.session-row-btn):hover {
  background: var(--magenta) !important;
  color: var(--cream) !important;
}
#sidebar-footer {
  border: 0 !important;
  border-top: 3px solid var(--ink) !important;
  background: var(--cream-bright) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
}
#user-email:not(.hidden),
#logout-btn:not(.hidden),
#admin-link:not(.hidden),
#tutorial-help {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
#admin-link {
  color: var(--cyan) !important;
  text-decoration: none !important;
}
/* Tour: a cool square comic button beneath the user/logout row. */
#tutorial-help {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 9px 12px !important;
  background: var(--cyan) !important;
  color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
}
#tutorial-help:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}
#tutorial-help:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}
#theme-switcher {
  background: var(--cream-bright) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 4px !important;
}

/* Sidebar resizer visual */
#sidebar-resizer {
  background: transparent !important;
}
#sidebar-resizer::after {
  content: '\25B6' !important;
  background: var(--yellow) !important;
  border: 2px solid var(--ink) !important;
  border-left: none !important;
  border-radius: 0 7px 7px 0 !important;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.4) !important;
  color: var(--ink) !important;
  font-size: 11px !important;
}
body.drawer-open #sidebar-resizer::after {
  content: '\25C0' !important;
}
#sidebar-backdrop {
  background: rgba(0, 0, 0, 0.42) !important;
}

/* Preview area visual */
#preview-area {
  background: transparent !important;
}
#preview-container:not(.hidden),
#session-guide:not(.hidden),
#preview-empty:not(.hidden),
#no-credits-msg:not(.hidden) {
  background: var(--cream) !important;
  border: 3px solid var(--ink-deep) !important;
  border-radius: 6px !important;
  box-shadow: 14px 14px 0 #000 !important;
  color: var(--ink) !important;
}
#preview-container:not(.hidden),
#preview-empty:not(.hidden) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#preview-container::before,
#session-guide::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 30px !important;
  background:
    radial-gradient(circle, var(--magenta) 0 4.5px, transparent 5px) 12px 10px / 18px 12px no-repeat,
    radial-gradient(circle, var(--yellow) 0 4.5px, transparent 5px) 30px 10px / 18px 12px no-repeat,
    radial-gradient(circle, var(--cyan) 0 4.5px, transparent 5px) 48px 10px / 18px 12px no-repeat,
    var(--ink) !important;
  border-bottom: 3px solid #000 !important;
  z-index: 2 !important;
}
#preview-iframe {
  background: var(--cream-bright) !important;
}
#preview-resizer {
  display: block !important;
  background: var(--yellow) !important;
  border-color: var(--ink) !important;
}
.preview-chrome {
  display: flex !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 9px 12px !important;
  background: var(--ink) !important;
  border-bottom: 3px solid #000 !important;
}
.preview-chrome i {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
}
.preview-chrome i:nth-child(1) {
  background: var(--magenta) !important;
}
.preview-chrome i:nth-child(2) {
  background: var(--yellow) !important;
}
.preview-chrome i:nth-child(3) {
  background: var(--cyan) !important;
}
#progress {
  background: rgba(23, 21, 27, 0.72) !important;
  backdrop-filter: blur(2px);
}
#progress .progress-card,
#progress > div {
  position: relative;
  min-width: min(340px, calc(100vw - 48px));
  padding: 26px 30px 24px !important;
  background: var(--yellow) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 8px !important;
  box-shadow: 9px 9px 0 #000 !important;
  color: var(--ink) !important;
  overflow: visible;
}
#progress .progress-card::before,
#progress > div::before {
  content: 'POW!';
  position: absolute;
  right: -15px;
  top: -18px;
  padding: 6px 13px;
  background: var(--punch);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--cream);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1;
  transform: rotate(7deg);
}
#progress .progress-main,
#progress > div > .flex.items-center.gap-3 {
  gap: 12px !important;
}
#progress .progress-spinner,
#progress .animate-spin {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, var(--ink) 0 23%, transparent 24%),
    radial-gradient(circle, var(--yellow) 0 34%, transparent 35%),
    repeating-conic-gradient(from 0deg, var(--shock) 0deg 18deg, var(--ink) 18deg 26deg, transparent 26deg 45deg) !important;
  box-shadow:
    3px 3px 0 var(--ink),
    0 0 0 3px var(--ink) !important;
  animation: progress-speed-ring-spin 0.78s linear infinite !important;
}
#progress .progress-spinner::before,
#progress .animate-spin::before {
  content: '' !important;
  position: absolute !important;
  inset: -4px 10px auto auto !important;
  width: 22px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--punch) !important;
  border: 2px solid var(--ink) !important;
  box-shadow:
    -18px 15px 0 -2px var(--cream),
    -18px 15px 0 0 var(--ink) !important;
  transform: rotate(-18deg) !important;
}
#progress .progress-spinner::after,
#progress .animate-spin::after {
  content: '' !important;
  position: absolute !important;
  inset: 12px !important;
  border-radius: 50% !important;
  background: var(--cream) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: inset 2px 2px 0 rgba(23, 201, 255, 0.45) !important;
}
@keyframes progress-speed-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
#progress .progress-title,
#progress .font-medium.text-gray-800 {
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
#progress #progress-mode {
  background: var(--punch) !important;
  border: 2px solid var(--ink) !important;
  color: var(--cream) !important;
  box-shadow: 2px 2px 0 var(--ink);
}
#progress #progress-step {
  max-width: 280px !important;
  color: #4f4838 !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: center !important;
}
#no-credits-msg:not(.hidden) {
  background: #17151b !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#preview-empty h2,
#no-credits-msg h2 {
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  text-transform: uppercase !important;
}
#welcome-new-btn {
  background: var(--magenta) !important;
  color: var(--cream) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
}

/* Dock visual */
#panel-resizer {
  background: transparent !important;
}
/* Identical to #sidebar-resizer::after; structure.css rotates it -90deg, so the
   rounded-right edge becomes the top and ◀ renders as ▼ (retract). */
#panel-resizer::after {
  content: '\25C0' !important; /* ◀ -> ▼ after -90deg rotation: retract */
  background: var(--yellow) !important;
  border: 2px solid var(--ink) !important;
  border-left: none !important;
  border-radius: 0 7px 7px 0 !important;
  /* Offset is pre-rotation: -90deg maps (-3,2) -> (2,3) on screen, so the drop
     shadow still falls down-right like the sidebar tab instead of upward. */
  box-shadow: -3px 2px 0 rgba(0, 0, 0, 0.4) !important;
  color: var(--ink) !important;
  font-size: 11px !important;
}
body.dock-collapsed #panel-resizer::after {
  content: '\25B6' !important;
} /* ▶ -> ▲: bring back */
#bottom-panel:not(.hidden) {
  background: var(--cream) !important;
  border: 0 !important;
  border-top: 3px solid var(--ink-deep) !important;
  color: var(--ink) !important;
}
#bottom-panel > .flex.items-center.border-b {
  border: 0 !important;
  background: transparent !important;
}
.tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  background: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transform: rotate(-0.8deg) !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.08s ease,
    border-color 0.08s ease,
    color 0.08s ease !important;
}
.tab-btn:hover:not(.tab-btn-active) {
  transform: translate(-1px, -1px) rotate(-0.8deg) !important;
  box-shadow: none !important;
  color: var(--magenta) !important;
}
.tab-btn-active {
  background: var(--yellow) !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  transform: rotate(-0.8deg) !important;
  font-weight: 700 !important;
}
.tab-btn-active:hover {
  transform: translate(-1px, -1px) rotate(-0.8deg) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
.tab-btn-active:active {
  transform: translate(2px, 2px) rotate(-0.8deg) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}

/* Prompt area visual */
#prompt {
  background: var(--cream-bright) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
#prompt::placeholder {
  color: var(--placeholder) !important;
}
#build-btn {
  background: var(--magenta) !important;
  color: var(--cream) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
.build-power-row {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.build-power-row #build-btn {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  transform: rotate(-0.8deg) !important;
}
.build-power-pill {
  display: inline-flex !important;
  align-items: center !important;
  border: 2px solid var(--cream) !important;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  color: var(--cream) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}
#build-btn span {
  font-size: inherit !important;
  opacity: 1 !important;
}
#build-btn:hover {
  transform: translate(-1px, -1px) rotate(-0.8deg) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
#build-btn:active {
  transform: translate(2px, 2px) rotate(-0.8deg) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}
#build-btn:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
  transform: none !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
}
.ai-power-trigger {
  flex: 0 0 auto !important;
  justify-self: end !important;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  padding: 10px 12px !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
#mode-toggle.ai-power-trigger {
  min-height: 44px !important;
  padding: 8px 10px !important;
  font-size: 10px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  transform: rotate(-0.8deg) !important;
}
#mode-toggle.ai-power-trigger:hover {
  transform: translate(-1px, -1px) rotate(-0.8deg) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
.ai-power-summary {
  order: 4 !important;
  margin: 5px 0 0 !important;
  color: var(--muted) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}
.ai-power-help {
  order: 5 !important;
  margin-top: 6px !important;
  border: 2px dashed var(--ink) !important;
  background: rgba(245, 197, 24, 0.08) !important;
  color: #3f3a34 !important;
  padding: 8px 10px !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}
.ai-power-popover {
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 14px) !important;
  z-index: 80 !important;
  display: grid !important;
  gap: 10px !important;
  width: min(560px, calc(100vw - 32px)) !important;
  border: 3px solid var(--ink-deep) !important;
  border-radius: 4px !important;
  background: var(--cream) !important;
  box-shadow: 14px 14px 0 #000 !important;
  padding: 18px !important;
}
.ai-power-popover.hidden {
  display: none !important;
}
/* Keep the drag-to-resize handle behind the AI Power popover while it is open.
   The dock (#bottom-panel) is its own stacking context at z-index 28, so the
   popover inside it cannot out-paint the fixed #panel-resizer (z-index 31) from
   the outside — drop the handle below the dock while the popover is open. */
body:has(#ai-power-popover:not(.hidden)) #panel-resizer {
  z-index: 27 !important;
}
.ai-power-popover::before {
  content: 'AI POWER' !important;
  justify-self: start !important;
  width: auto !important;
  height: auto !important;
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  padding: 7px 16px !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  transform: rotate(-3deg) !important;
}
.ai-power-choice {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  border: 3px solid var(--ink) !important;
  border-radius: 4px !important;
  background: var(--cream-bright) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  color: var(--ink) !important;
  padding: 12px !important;
  text-align: left !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
}
.ai-power-choice:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}
.ai-power-choice.active {
  background: var(--yellow) !important;
}
.ai-power-number {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 3px solid var(--ink) !important;
  border-radius: 999px !important;
  background: var(--cyan) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 18px !important;
}
.ai-power-copy strong,
.ai-power-cost {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  text-transform: uppercase !important;
}
.ai-power-copy strong {
  display: block !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.ai-power-copy small {
  display: block !important;
  margin-top: 4px !important;
  color: var(--muted) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.ai-power-cost {
  border: 2.5px solid var(--ink) !important;
  border-radius: 4px !important;
  background: var(--cream-bright) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  padding: 9px 11px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
/* Edit / Rebuild removed — keep #rebuild-btn hidden (it stays in the DOM as a no-op for JS refs). */
#rebuild-btn {
  display: none !important;
}
#mode-toggle {
  background: var(--cream-bright) !important;
  color: var(--muted) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: none !important;
}
#mode-toggle.ai-power-trigger {
  background: var(--yellow) !important;
  color: var(--ink) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}
#rebuild-btn {
  background: var(--yellow) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  color: var(--muted) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: none !important;
}
#tab-templates,
#tab-free,
#tab-uploads,
#tab-files,
#tab-history,
#tab-usage {
  color: var(--muted) !important;
  font-size: 13px !important;
}
#error:not(.hidden) {
  color: var(--magenta) !important;
}

/* Prompt field visual */
#tab-prompt:not(.hidden) > div:first-child {
  background: var(--cream-bright) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 5px !important;
}
#tab-prompt:not(.hidden) > div:first-child > #prompt {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
#tab-prompt #prompt-record-btn {
  background: var(--shock) !important;
  color: var(--ink) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
}
#tab-prompt #prompt-record-btn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
#tab-prompt #prompt-record-btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
}
#tab-prompt #prompt-record-btn.recording {
  background: var(--punch) !important;
  color: var(--paper) !important;
}
#tab-prompt #prompt-record-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.usage-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.usage-summary-grid > div,
.usage-day-row {
  background: var(--cream-bright) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  color: var(--ink) !important;
}

.usage-summary-grid > div {
  min-height: 58px !important;
  padding: 8px 10px !important;
}

.usage-summary-grid span,
.usage-summary-grid small {
  display: block !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.usage-summary-grid strong {
  display: block !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
}

.usage-day-row {
  display: grid !important;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
}

/* Slider toggles visual */
#tab-prompt #rebuild-btn.wb-toggle,
#tab-prompt #mode-toggle.wb-toggle {
  background: var(--cream-bright) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  cursor: pointer !important;
  text-transform: none !important;
  transform: none !important;
}
.wb-toggle .wb-knob {
  border-radius: 999px !important;
  background: var(--magenta) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 1px 1px 0 var(--ink) !important;
  transition:
    left 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.18s !important;
}
.wb-toggle[data-state='quick'] .wb-knob {
  background: var(--cyan) !important;
}
.wb-toggle[data-state='genius'] .wb-knob {
  background: var(--yellow) !important;
}
.wb-toggle .wb-opt {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--muted) !important;
  transition: color 0.15s !important;
}
.wb-toggle[data-state='edit'] .wb-opt-a,
.wb-toggle[data-state='rebuild'] .wb-opt-b,
#mode-toggle.wb-toggle[data-state='quick'] .wb-opt-a,
#mode-toggle.wb-toggle[data-state='pro'] .wb-opt-b {
  color: var(--cream) !important;
}
#mode-toggle.wb-toggle[data-state='genius'] .wb-opt-c {
  color: var(--ink) !important;
}
.wb-toggle:disabled,
.wb-toggle.opacity-50 {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Human help visual */
body:has(#app-screen:not(.hidden)) #human-help-button {
  background: var(--magenta) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 50% !important;
  box-shadow: 4px 4px 0 #000 !important;
  color: var(--cream) !important;
  animation: none !important;
  cursor: pointer !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
}
body:has(#app-screen:not(.hidden)) #human-help-button::before {
  content: none !important;
}
body:has(#app-screen:not(.hidden)) #human-help-button::after {
  content: none !important;
}
body:has(#app-screen:not(.hidden)) #human-help-button:hover {
  transform: rotate(-4deg) scale(1.05) !important;
}
body:has(#app-screen:not(.hidden)) #human-help-button:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0 #000 !important;
}
body:has(#app-screen:not(.hidden)) .human-help-label {
  position: static !important;
  display: block !important;
  color: var(--cream) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: 1px 1px 0 var(--ink) !important;
}
#human-help-modal {
  background:
    radial-gradient(circle at 12% 28%, rgba(23, 201, 255, 0.18), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(255, 49, 95, 0.16), transparent 32%), rgba(23, 21, 27, 0.86) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
#human-help-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(248, 239, 206, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.human-help-window {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(560px, 95vw);
  height: min(700px, 90vh);
  overflow: hidden;
  background: var(--cream) !important;
  border: 4px solid var(--ink) !important;
  border-radius: 8px !important;
  box-shadow: 10px 10px 0 #000 !important;
}
.human-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px 12px 18px;
  background: var(--yellow) !important;
  border-bottom: 4px solid var(--ink) !important;
}
.human-help-title {
  margin: 0;
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 20px;
  line-height: 1;
  text-transform: lowercase;
}
.human-help-close {
  flex: none;
  width: 38px;
  height: 38px;
  font-size: 1.25rem;
}
.human-help-frame-wrap {
  flex: 1;
  min-height: 0;
  padding: 10px;
  background: var(--cream);
}
.human-help-frame,
#human-help-iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 3px solid var(--ink) !important;
  border-radius: 6px;
  background: #fff !important;
}

/* Dialogs and modals visual */
#dialog-modal > div,
#template-modal > div,
#version-modal > div {
  background: var(--cream) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: 8px 8px 0 #000 !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Inner toolbar + buttons — comic theme (was default gray/violet Tailwind). */
#version-modal > div > div:first-child {
  background: var(--cream-bright) !important;
  border-bottom: 3px solid var(--ink) !important;
}
#version-prev,
#version-next,
#version-close {
  color: var(--ink) !important;
  font-weight: 900 !important;
}
#version-close:hover,
#version-prev:not(:disabled):hover,
#version-next:not(:disabled):hover {
  color: var(--magenta) !important;
}
#version-title {
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
#version-prompt-text,
#version-date {
  color: var(--muted) !important;
}
/* primary (restore) + secondary (duplicate) comic action buttons */
#version-restore,
#version-duplicate {
  border: 2px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  padding: 6px 12px !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease !important;
}
#version-restore {
  background: var(--magenta) !important;
  color: var(--cream) !important;
}
#version-duplicate {
  background: var(--pop) !important;
  color: var(--ink) !important;
}
#version-restore:hover,
#version-duplicate:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
#dialog-ok {
  background: var(--ink) !important;
  color: var(--cream) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
#dialog-ok:hover {
  background: var(--pop) !important;
  border-color: var(--pop) !important;
}
:focus-visible {
  outline: 3px solid var(--cyan) !important;
  outline-offset: 2px !important;
}

/* --- Guide/session-guide visual --- */
.guide-nav {
  border-bottom: 3px solid var(--ink);
}
.guide-wordmark {
  font-family: 'Archivo Black', sans-serif;
  font-weight: 900;
}
#url-bar > .flex-1::before,
#url-bar > .flex-1::after {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 900;
}
.guide-wordmark {
  font-size: 23px;
  line-height: 1;
  color: var(--magenta);
}
.guide-wordmark span {
  color: var(--ink);
}
.guide-wordmark i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 1px;
  border-radius: 999px;
  background: var(--ink);
  vertical-align: baseline;
}
.guide-nav nav button {
  border: 0;
  background: transparent;
  color: #777067;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.guide-nav nav button.is-active {
  color: var(--ink);
  font-weight: 900;
}
.guide-signup {
  height: 46px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--pop);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}
.guide-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 17px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--shock);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.guide-copy h2 {
  margin: 18px 0 14px;
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(44px, 5.1vw, 58px);
  line-height: 0.86;
  letter-spacing: 0;
}
.guide-copy h2 span {
  color: #ff315f;
}
.guide-copy p {
  margin: 0 0 24px;
  color: #5f5851;
  font-size: 20px;
  font-weight: 700;
}
.guide-actions button {
  height: 52px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 0 26px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
}
.guide-primary {
  background: #ff315f;
  color: var(--paper);
  box-shadow: 7px 7px 0 var(--ink);
}
.guide-secondary {
  background: transparent;
  color: var(--ink);
}
.guide-boom {
  background: var(--pop);
  border: 0;
  clip-path: polygon(
    50% 0,
    62% 29%,
    91% 14%,
    76% 43%,
    100% 52%,
    75% 63%,
    89% 91%,
    61% 78%,
    50% 100%,
    40% 77%,
    11% 91%,
    25% 62%,
    0 52%,
    25% 42%,
    9% 14%,
    38% 29%
  );
  filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(4px 4px 0 var(--ink));
}
.guide-boom::before {
  content: none;
}
.guide-boom::after {
  content: '';
  position: absolute;
  left: 48px;
  bottom: 20px;
  width: 118px;
  height: 60px;
  background-image: radial-gradient(circle, rgba(54, 169, 225, 0.35) 0 3px, transparent 3.2px);
  background-size: 16px 16px;
}
.guide-boom span {
  position: relative;
  z-index: 1;
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.site {
  padding: 0 !important;
  color: var(--ink) !important;
  background: var(--cream) !important;
}
.site-nav {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 22px !important;
  border-bottom: 3px solid var(--ink) !important;
}
.site-nav .logo {
  font-family: 'Archivo Black', sans-serif !important;
  font-size: 15px !important;
}
.site-nav .links {
  margin-left: auto !important;
  display: flex !important;
  gap: 14px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}
.site-nav .cta {
  padding: 7px 14px !important;
  background: var(--magenta) !important;
  color: var(--cream) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 5px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 11px !important;
}
.site-hero {
  padding: 34px 26px 30px !important;
}
.site-hero .dots {
  position: absolute !important;
  right: 16px !important;
  top: 16px !important;
  width: 110px !important;
  height: 110px !important;
  background-image: radial-gradient(var(--magenta) 2px, transparent 2px) !important;
  background-size: 11px 11px !important;
  opacity: 0.35 !important;
}
.site-hero h2 {
  max-width: 430px !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: clamp(24px, 4.5vw, 38px) !important;
  line-height: 1.04 !important;
  text-transform: none !important;
}
.site-hero h2 .pop {
  color: var(--cream) !important;
  text-shadow:
    3px 3px 0 var(--magenta),
    -1.5px -1.5px 0 var(--ink),
    1.5px -1.5px 0 var(--ink),
    -1.5px 1.5px 0 var(--ink),
    1.5px 1.5px 0 var(--ink) !important;
}
.site-hero p {
  max-width: 380px !important;
  margin-top: 12px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
}
.stickers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
.sticker {
  padding: 6px 14px !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.sticker--cyan {
  background: var(--cyan) !important;
  transform: rotate(-2deg) !important;
}
.sticker--yellow {
  background: var(--yellow) !important;
  transform: rotate(1.5deg) !important;
}
.sticker--magenta {
  background: var(--magenta) !important;
  color: var(--cream) !important;
  transform: rotate(-1deg) !important;
}

/* --- Tour visual --- */
#tour-highlight {
  border: 4px solid var(--pop);
  border-radius: 4px;
  box-shadow:
    0 0 0 9999px rgba(7, 8, 13, 0.74),
    0 0 0 2px var(--ink);
  transition: all 0.18s ease;
}
#tour-card {
  border: 4px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  transition:
    top 0.18s ease,
    left 0.18s ease;
}
#tour-card h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}
#tour-card p {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 0.9rem;
}
#tour-card .tour-count {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.7rem;
  opacity: 0.6;
}
#tour-card button {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  font-size: 0.72rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 0.4rem 0.7rem;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.08s ease;
}
#tour-card button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
#tour-card .tour-next {
  background: var(--punch);
  color: var(--paper);
}
#tour-card .tour-back {
  background: var(--paper);
  color: var(--ink);
}
#tour-card .tour-skip {
  border: 0;
  box-shadow: none;
  background: none;
  text-decoration: underline;
  padding: 0.4rem 0.2rem;
}

/* --- Build badge visual --- */
#build-badge {
  color: rgba(251, 241, 224, 0.62);
  font:
    800 10px/1 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}

/* --- Comic burst clip-path --- */
.comic-burst {
  clip-path: polygon(
    50% 0,
    59% 32%,
    91% 12%,
    72% 45%,
    100% 56%,
    68% 64%,
    88% 95%,
    55% 78%,
    44% 100%,
    35% 69%,
    0 84%,
    24% 55%,
    0 36%,
    35% 33%
  );
}

/* --- Free source buttons visual --- */
.free-source-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* --- Brief modal visual --- */
#brief-modal {
  background: #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
#placeholder-form-modal {
  background: #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
#placeholder-form-modal .brief-kicker {
  background: #ffd83d !important;
  color: #17151b !important;
}
.brief-window {
  background: #fbf1e0;
  border: 4px solid #17151b;
  border-radius: 8px;
  box-shadow: 14px 14px 0 #000;
  animation: login-card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.brief-header {
  background: #ffd83d;
  border-bottom: 4px solid #17151b;
}
.brief-kicker {
  border: 2.5px solid #17151b;
  border-radius: 999px;
  background: #17c9ff;
  color: #17151b;
  box-shadow: 3px 3px 0 #17151b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.brief-close {
  border: 3px solid #17151b;
  border-radius: 4px;
  background: #ff315f;
  color: #fbf1e0;
  box-shadow: 3px 3px 0 #17151b;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.brief-title {
  margin: 0 0 8px;
  color: #17151b;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
}
.brief-help {
  margin: 0 0 14px;
  color: #4c4740;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.brief-answer {
  border: 3px solid #17151b;
  border-radius: 6px;
  background: #fffdf7;
  box-shadow: 5px 5px 0 #17151b;
  color: #17151b;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}
.brief-answer:focus,
.brief-mini-btn:focus-visible,
.brief-btn:focus-visible,
.brief-close:focus-visible,
.brief-mode-choice:has(input:focus-visible) {
  outline: 3px solid #17c9ff;
  outline-offset: 3px;
}
.brief-status {
  color: #71695e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.brief-mini-btn,
.brief-btn {
  border: 3px solid #17151b;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #17151b;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  text-transform: uppercase;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.brief-mini-btn {
  background: #fbf1e0;
  color: #17151b;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 1.3px;
}
.brief-mini-btn--primary,
.brief-btn--primary {
  background: #ff315f;
  color: #fbf1e0;
}
.brief-mini-btn.recording {
  background: #17c9ff;
  color: #17151b;
}
.brief-btn--secondary {
  background: #fbf1e0;
  color: #17151b;
}
.brief-mini-btn:hover,
.brief-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #17151b;
}
.brief-mini-btn:active,
.brief-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #17151b;
}
.brief-mini-btn:disabled,
.brief-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.brief-effect-card {
  border: 3px solid #17151b;
  border-radius: 6px;
  background: #fffdf7;
  box-shadow: 5px 5px 0 #17151b;
  padding: 12px;
}
.brief-effect-card strong {
  display: block;
  margin-bottom: 6px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.1;
}
.brief-effect-card span {
  display: block;
  color: #514b43;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.brief-mode-choice {
  border: 3px solid #17151b;
  border-radius: 6px;
  background: #fffdf7;
  box-shadow: 4px 4px 0 #17151b;
  cursor: pointer;
}
.brief-mode-choice input {
  margin-top: 4px;
  accent-color: #ff315f;
}
.brief-mode-choice strong {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
}
.brief-mode-choice small {
  margin-top: 4px;
  color: #5f574f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.brief-image-card {
  border: 3px solid #17151b;
  border-radius: 6px;
  background: #fffdf7;
  box-shadow: 5px 5px 0 #17151b;
}
.brief-image-card img {
  border: 2.5px solid #17151b;
  border-radius: 4px;
  background: #fbf1e0;
}
.brief-image-card textarea {
  border: 2.5px solid #17151b;
  border-radius: 4px;
  background: #fffdf7;
  color: #17151b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.brief-footer {
  border-top: 4px solid #17151b;
  background: #17c9ff;
}
.brief-btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 1.5px;
}

/* --- Automatic voice brief visual --- */
.voice-brief-window {
  background: radial-gradient(circle at 50% 42%, rgba(23, 201, 255, 0.13), transparent 42%), #17151b;
  border: 4px solid #fbf1e0;
  border-radius: 9px;
  box-shadow: 14px 14px 0 #000;
  color: #fbf1e0;
  animation: login-card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.voice-brief-window::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.14;
  background-image: radial-gradient(#fbf1e0 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.voice-brief-step {
  border: 2.5px solid #17151b;
  border-radius: 999px;
  background: #ffd83d;
  box-shadow: 3px 3px 0 #000;
  color: #17151b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.voice-brief-title {
  color: #fbf1e0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1;
  text-transform: none;
}
.voice-scope {
  border: 4px solid #fbf1e0;
  border-radius: 8px;
  background:
    linear-gradient(rgba(23, 201, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 201, 255, 0.08) 1px, transparent 1px), #07080d;
  background-size: 24px 24px;
  box-shadow: 8px 8px 0 #000;
  animation: voice-scope-glow 2.8s ease-in-out infinite;
}
@keyframes voice-scope-glow {
  0%,
  100% {
    box-shadow:
      8px 8px 0 #000,
      0 0 4px rgba(251, 241, 224, 0.7),
      0 0 18px rgba(251, 241, 224, 0.4),
      0 0 22px rgba(229, 9, 127, 0.28);
  }
  50% {
    box-shadow:
      8px 8px 0 #000,
      0 0 6px rgba(251, 241, 224, 1),
      0 0 30px rgba(251, 241, 224, 0.7),
      0 0 34px rgba(229, 9, 127, 0.44);
  }
}
.voice-scope::after {
  content: 'LIVE';
  position: absolute;
  top: 12px;
  right: 14px;
  color: #ff315f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.6px;
}
.voice-scope-line {
  background: rgba(23, 201, 255, 0.25);
  box-shadow: 0 0 12px rgba(23, 201, 255, 0.45);
}
.voice-brief-status {
  color: #c9c1b4;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.voice-brief-action {
  border: 2.5px solid #fbf1e0;
  border-radius: 4px;
  background: transparent;
  box-shadow: 3px 3px 0 #000;
  color: #fbf1e0;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    opacity 0.08s ease;
}
.voice-brief-action--cancel {
  border-color: #ff315f;
  color: #ff8ca7;
}
.voice-brief-action--proceed {
  border-color: #17151b;
  background: #17c9ff;
  box-shadow: 4px 4px 0 #000;
  color: #17151b;
}
.voice-brief-action:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}
.voice-brief-action:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}
.voice-brief-action:focus-visible {
  outline: 3px solid #17c9ff;
  outline-offset: 3px;
}
.voice-brief-action:disabled {
  opacity: 0.28;
  cursor: default;
}

/* --- Placeholder form (ingested template) visual --- */
.placeholder-form-lead {
  margin: 0 0 16px;
  color: #4c4740;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.placeholder-form-help {
  margin: 0;
  color: #71695e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.placeholder-form-fields .login-field {
  text-align: left;
}
.placeholder-form-fields .placeholder-field-label {
  display: block;
  color: #17151b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.placeholder-form-fields .login-input,
.placeholder-form-fields .placeholder-input {
  margin-top: 6px;
  outline: none !important;
}
.placeholder-form-fields .login-input:focus,
.placeholder-form-fields .login-input:focus-visible,
.placeholder-form-fields .placeholder-input:focus,
.placeholder-form-fields .placeholder-input:focus-visible {
  outline: none !important;
  border-color: #17151b !important;
  box-shadow: 5px 5px 0 #17151b !important;
}
.placeholder-form-fields .login-input:-webkit-autofill,
.placeholder-form-fields .login-input:-webkit-autofill:hover,
.placeholder-form-fields .login-input:-webkit-autofill:focus,
.placeholder-form-fields .placeholder-input:-webkit-autofill,
.placeholder-form-fields .placeholder-input:-webkit-autofill:hover,
.placeholder-form-fields .placeholder-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fffdf7 inset;
  -webkit-text-fill-color: #17151b;
  transition: background-color 99999s ease-out 0s;
}
.placeholder-form-footer {
  background: #fbf1e0 !important;
}
.placeholder-form-error {
  margin: 4px 0 0;
  color: #ff315f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}
/* Bitwarden / password-manager overlays inherit page styles — keep them off template fields */
#placeholder-form-modal .login-field {
  isolation: isolate;
}
/* Bitwarden injects its inline menu as a body-level [popover] iframe — hide while modal is open */
body:has(#placeholder-form-modal:not(.hidden)) > [popover] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --- Human help button (non-app / standalone) --- */
#human-help-button {
  position: fixed;
  right: -18px;
  bottom: -18px;
  z-index: 55;
  width: 92px;
  height: 92px;
  border: 4px solid #07080d;
  border-radius: 50%;
  background: repeating-conic-gradient(#ffd83d 0deg 15deg, #07080d 15deg 30deg);
  box-shadow: -5px -3px 0 rgba(7, 8, 13, 0.4);
  color: #fff4cf;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 120ms ease,
    filter 120ms ease;
  animation: human-help-throb 3.2s ease-in-out infinite;
}
#human-help-button::before {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: 0;
  border: 3px solid #570604;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 26%, #ffd0cc 0 4%, #ff645b 12%, #e51d15 44%, #b20d08 72%, #770704 100%);
  box-shadow:
    inset 5px 6px 0 rgba(255, 255, 255, 0.16),
    inset -6px -9px 0 rgba(79, 0, 0, 0.22),
    0 6px 0 #570604,
    0 9px 0 #07080d;
}
#human-help-button::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 27px;
  z-index: 1;
  width: 20px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(-25deg);
  pointer-events: none;
}
#human-help-button:hover {
  filter: saturate(1.15) brightness(1.06);
  transform: rotate(-4deg) scale(1.06);
}
#human-help-button:focus-visible {
  outline: 3px solid #17c9ff;
  outline-offset: 3px;
}
#human-help-button:active {
  transform: scale(0.93) translateY(4px);
}
.human-help-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #fff4cf;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    1px 1px 0 #07080d,
    -1px -1px 0 #07080d,
    1px -1px 0 #07080d,
    -1px 1px 0 #07080d;
}
@keyframes human-help-throb {
  0%,
  88%,
  100% {
    box-shadow: -5px -3px 0 rgba(7, 8, 13, 0.4);
  }
  93% {
    box-shadow:
      -5px -3px 0 rgba(7, 8, 13, 0.4),
      0 0 0 9px rgba(229, 29, 21, 0.18);
  }
}
@media (max-width: 767px) {
  #human-help-button {
    right: -16px;
    bottom: -16px;
    width: 80px;
    height: 80px;
  }
  .human-help-label {
    font-size: 0.62rem;
  }
  body:has(#app-screen:not(.hidden)) .human-help-label {
    font-size: 8px !important;
  }
}

/* --- Responsive visual tweaks --- */
@media (max-height: 430px) and (orientation: landscape) {
  .weboom-logo {
    font-size: clamp(21px, 5vw, 30px) !important;
  }
  .preview-toggles button {
    font-size: 10px !important;
  }
  #build-btn {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }
  #mode-toggle {
    font-size: 10px !important;
  }
  #rebuild-btn {
    font-size: 10px !important;
  }
  body:has(#app-screen:not(.hidden)) .human-help-label {
    font-size: 7.5px !important;
  }
  .tab-btn {
    font-size: 10px !important;
  }
  #version-history-btn {
    font-size: 0 !important;
  }
  #version-history-btn::before {
    content: 'V';
    font-size: 11px;
  }
  #preview-open,
  #publish-btn,
  #preview-site-open {
    font-size: 14px !important;
  }
  .site-nav {
    padding: 9px 14px !important;
  }
  .site-nav .links {
    display: none !important;
  }
  .site-hero {
    padding: 16px 18px 18px !important;
  }
  .site-hero h2 {
    font-size: clamp(21px, 5vw, 30px) !important;
    max-width: 330px !important;
  }
  .site-hero p {
    margin-top: 7px !important;
    font-size: 12px !important;
  }
  .stickers {
    margin-top: 9px !important;
  }
  .site-hero .dots {
    width: 74px !important;
    height: 74px !important;
  }
  #preview-container:not(.hidden),
  #session-guide:not(.hidden),
  #preview-empty:not(.hidden),
  #no-credits-msg:not(.hidden) {
    box-shadow: 8px 8px 0 #000 !important;
  }
}

/* --- JS-generated element overrides --- */

/* Toasts */
#toast-container > div {
  background: var(--cream) !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 #000 !important;
}

/* Template gallery cards */
.tm-window [class*='bg-white'] {
  background: var(--cream) !important;
}
.tm-window [class*='bg-gray-100'] {
  background: var(--cream-dim) !important;
}
.tm-window [class*='text-gray-800'] {
  color: var(--ink) !important;
}
.tm-window [class*='text-gray-500'] {
  color: var(--muted) !important;
}
.tm-window [class*='text-gray-400'] {
  color: var(--muted) !important;
}
.tm-window [class*='border-gray-300'] {
  border-color: var(--ink) !important;
}
.tm-window [class*='text-gray-600'] {
  color: var(--ink) !important;
}
.tm-window [class*='from-violet-600'] {
  background: var(--yellow) !important;
  background-image: none !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
}
.tm-window [class*='hover\\:border-violet-400']:hover {
  border-color: var(--pop) !important;
}
.tm-window [class*='hover\\:shadow-md']:hover {
  box-shadow: 4px 4px 0 #000 !important;
}

/* Prompt history */
#prompt-history-list > div {
  background: var(--cream-dim) !important;
  border: 2px solid var(--ink) !important;
  color: var(--ink) !important;
  border-radius: 4px !important;
}
#prompt-history-list [class*='text-gray-800'] {
  color: var(--ink) !important;
}
#prompt-history-list [class*='text-gray-400'] {
  color: var(--muted) !important;
}
#prompt-history-list [class*='bg-violet-100'] {
  background: rgba(224, 64, 251, 0.15) !important;
}
#prompt-history-list [class*='text-violet-700'] {
  color: var(--pop) !important;
}
#prompt-history-list [class*='bg-gray-200'] {
  background: var(--cream-dim) !important;
  border: 1px solid var(--ink) !important;
}
#prompt-history-list [class*='text-gray-600'] {
  color: var(--ink) !important;
}
#prompt-history-list > p {
  color: var(--muted) !important;
}

/* File list */
#files-list > div {
  border-color: var(--ink) !important;
}
#files-list [class*='text-gray-700'] {
  color: var(--ink) !important;
}
#files-list [class*='text-gray-400'],
#files-list > p {
  color: var(--muted) !important;
}

/* Media upload drop zone */
#drop-zone {
  border: 2.5px dashed var(--ink) !important;
  border-radius: 12px !important;
  background: var(--cream-bright) !important;
  color: var(--muted) !important;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    border-color 0.08s ease !important;
}
#drop-zone:hover {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
}
#drop-zone span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
  padding: 4px 10px !important;
  background: var(--yellow) !important;
  border: 2.5px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
  color: var(--ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Media cards */
.media-card {
  background: var(--cream-dim) !important;
  border: 2px solid var(--ink) !important;
}

/* Session list overrides */
#session-list [class*='text-gray-400'] {
  color: var(--muted) !important;
}