/* ============================================
   BEST FREE URL SHORTNER — Design System
   Based on DESIGN.md tokens (Vercel Geist)
   ============================================ */

/* --- CSS Custom Properties (Tokens) --- */
:root {
  /* Colors — Brand & Accent */
  --color-primary: #171717;
  --color-on-primary: #ffffff;
  --color-ink: #171717;
  --color-body: #4d4d4d;
  --color-mute: #8f8f8f;
  --color-faint: #a1a1a1;
  --color-hairline: #ebebeb;
  --color-hairline-soft: #f2f2f2;
  --color-canvas: #fafafa;
  --color-canvas-elevated: #ffffff;
  --color-link: #0070f3;
  --color-link-deep: #0761d1;
  --color-link-soft: #d3e5ff;
  --color-error: #ee0000;
  --color-error-deep: #c50000;
  --color-warning: #f5a623;
  --color-warning-soft: #ffefcf;
  --color-warning-deep: #ab570a;
  --color-violet: #7928ca;
  --color-cyan: #50e3c2;
  --color-pink: #ff0080;
  --color-magenta: #eb367f;

  /* Gradients */
  --gradient-develop-start: #007cf0;
  --gradient-develop-end: #00dfd8;
  --gradient-preview-start: #7928ca;
  --gradient-preview-end: #ff0080;
  --gradient-ship-start: #ff4d4d;
  --gradient-ship-end: #f9cb28;

  /* Spacing */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: 128px;

  /* Rounded */
  --rounded-none: 0px;
  --rounded-sm: 6px;
  --rounded-md: 12px;
  --rounded-lg: 16px;
  --rounded-pill-category: 64px;
  --rounded-pill: 100px;
  --rounded-full: 9999px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Elevation */
  --shadow-whisper: 0px 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-floating: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 8px 16px -4px rgba(0, 0, 0, 0.04);
}

/* --- Dark Theme Tokens --- */
[data-theme="dark"] {
  --color-primary: #ffffff;
  --color-on-primary: #000000;
  --color-ink: #ededed;
  --color-body: #999999;
  --color-mute: #666666;
  --color-faint: #555555;
  --color-hairline: #2a2a2a;
  --color-hairline-soft: #1f1f1f;
  --color-canvas: #0a0a0a;
  --color-canvas-elevated: #141414;
  --color-link: #3291ff;
  --color-link-deep: #5ba5ff;
  --color-link-soft: #1a2d4a;
  --color-error: #ee0000;
  --color-error-deep: #ff3333;
  --color-warning: #f5a623;
  --color-warning-soft: #3a2a10;
  --color-warning-deep: #ffcc66;

  --shadow-whisper: 0px 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-floating: 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 8px 16px -4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .hero-mesh {
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(0, 124, 240, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 55% 30%, rgba(121, 40, 202, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 70% 55%, rgba(255, 0, 128, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 45% 60%, rgba(80, 227, 194, 0.08) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 60% 70%, rgba(249, 203, 40, 0.05) 0%, transparent 55%);
}

[data-theme="dark"] .button-primary:active {
  background-color: #cccccc;
}

[data-theme="dark"] .upload-zone:hover,
[data-theme="dark"] .upload-zone.drag-over {
  background-color: var(--color-hairline-soft);
}

[data-theme="dark"] .qr-output img {
  background-color: var(--color-canvas-elevated);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--color-body);
  background-color: var(--color-canvas);
  transition: background-color 0.2s ease, color 0.2s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input {
  font-family: inherit;
  border: none;
  outline: none;
}

details summary {
  cursor: pointer;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

/* --- Typography Classes --- */
.mono-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-mute);
}

.heading-lg {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -1.28px;
  color: var(--color-ink);
}

.heading-md {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: var(--color-ink);
}

.label-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.28px;
  color: var(--color-ink);
}

.body-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.body-md {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
}

/* --- Layout --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* --- Buttons --- */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  border-radius: var(--rounded-pill);
  padding: 0 var(--space-md);
  height: 44px;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.button-primary:hover {
  background-color: var(--color-ink);
}

.button-primary:active {
  background-color: #000000;
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-canvas-elevated);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  border-radius: var(--rounded-pill);
  padding: 0 var(--space-md);
  height: 44px;
  border: 1px solid var(--color-hairline);
  transition: background-color 0.15s ease;
}

.button-secondary:hover {
  background-color: var(--color-hairline-soft);
}

.button-primary-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  border-radius: var(--rounded-sm);
  padding: 0 var(--space-sm);
  height: 40px;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.button-primary-sm:hover {
  background-color: var(--color-ink);
}

.button-ghost-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-canvas-elevated);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  border-radius: var(--rounded-sm);
  padding: 0 var(--space-sm);
  height: 40px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.button-ghost-sm:hover {
  background-color: var(--color-hairline-soft);
  border-color: var(--color-body);
}

/* --- Text Input --- */
.text-input {
  background-color: var(--color-canvas-elevated);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-sm);
  padding: var(--space-xs) var(--space-sm);
  width: 100%;
  height: 40px;
  transition: border-color 0.15s ease, background-color 0.2s ease, color 0.2s ease;
}

.text-input::placeholder {
  color: var(--color-faint);
}

.text-input:focus {
  border-color: var(--color-ink);
  outline: none;
}

/* --- Feature Card --- */
.feature-card {
  background-color: var(--color-canvas-elevated);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-md);
  padding: var(--space-lg);
  transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline);
  height: 56px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.nav-logo svg {
  flex-shrink: 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-body);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  border-radius: var(--rounded-full);
  padding: var(--space-xs) var(--space-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link:hover {
  color: var(--color-ink);
  background-color: var(--color-hairline-soft);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-ink);
  border-radius: var(--rounded-sm);
  transition: background-color 0.15s ease;
}

.nav-toggle:hover {
  background-color: var(--color-hairline-soft);
}

/* Theme Toggle Button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-ink);
  border-radius: var(--rounded-sm);
  transition: background-color 0.15s ease;
  position: relative;
}

.theme-toggle:hover {
  background-color: var(--color-hairline-soft);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

/* ============================================
   HERO
   ============================================ */
.hero-band {
  position: relative;
  overflow: hidden;
  padding: var(--space-section) var(--space-lg);
  padding-top: calc(var(--space-section) + 56px);
  text-align: center;
  background-color: var(--color-canvas);
  transition: background-color 0.2s ease;
}

.hero-mesh {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 140%;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(0, 124, 240, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 55% 30%, rgba(121, 40, 202, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 70% 55%, rgba(255, 0, 128, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 45% 60%, rgba(80, 227, 194, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 60% 70%, rgba(249, 203, 40, 0.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.hero-title {
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2.4px;
  color: var(--color-ink);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

.hero-subtitle {
  font-size: 18px;
  line-height: 28px;
  color: var(--color-body);
  margin-bottom: var(--space-xl);
}

.hero-input-group {
  display: flex;
  gap: var(--space-xs);
  max-width: 560px;
  margin: 0 auto;
}

.hero-input {
  flex: 1;
  height: 48px;
  font-size: 16px;
}

.hero-input-group .button-primary {
  height: 48px;
  padding: 0 var(--space-lg);
  flex-shrink: 0;
}

.hero-result {
  margin-top: var(--space-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-link);
  min-height: 20px;
}

.hero-explore-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  color: var(--color-mute);
  transition: color 0.2s ease;
  text-decoration: none;
}

.hero-explore-link:hover {
  color: var(--color-ink);
}

.hero-explore-text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}

.hero-explore-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-ink);
  border-radius: var(--rounded-full);
  background: var(--color-canvas-elevated);
  color: var(--color-ink);
  animation: bounce-down 2s ease-in-out infinite;
}

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============================================
   TOOLS SECTION
   ============================================ */
.tools-section {
  padding: var(--space-section) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.section-header .heading-lg {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.section-description {
  color: var(--color-body);
  max-width: 480px;
  margin: 0 auto;
}

/* Breadcrumbs. Marks up the position of a tool page in the site tree for readers
   and for crawlers, which is why the list is a real <ol> rather than a styled
   string of separators. Lives inside the hero band so it shares the gradient and
   lines up with the H1 instead of floating on the flat page background. */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs);
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-mute);
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
}

.breadcrumb-list li + li::before {
  content: "/";
  color: var(--color-hairline);
}

.breadcrumb-list a {
  color: var(--color-mute);
  text-decoration: none;
}

.breadcrumb-list a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.breadcrumb-list [aria-current="page"] {
  color: var(--color-ink);
}

/* Tool pages stack their panels directly under the hero band. The section only
   needs enough bottom padding to separate it from the article below. */
.tool-page-section {
  padding: var(--space-2xl) 0 0;
}

.tool-page-section .tool-panel {
  margin-bottom: 0;
}

/* Tool Tabs */
.tool-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.tool-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: var(--color-canvas-elevated);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  border-radius: var(--rounded-pill-category);
  padding: 0 var(--space-md);
  height: 40px;
  border: 1px solid var(--color-hairline);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.2s ease;
}

.tool-tab:hover {
  background-color: var(--color-hairline-soft);
}

.tool-tab.active {
  background-color: var(--color-ink);
  color: var(--color-on-primary);
  border-color: var(--color-ink);
}

.tool-tab svg {
  flex-shrink: 0;
}

/* Tool Panels */
.tool-panel {
  max-width: 640px;
  margin: 0 auto;
}

.tool-card {
  padding: var(--space-xl);
}

.tool-card-header {
  margin-bottom: var(--space-lg);
}

.tool-card-header .heading-md {
  margin-bottom: var(--space-xs);
}

.tool-card-desc {
  color: var(--color-body);
}

.tool-card-body {
  margin-bottom: var(--space-lg);
}

.tool-card-body .label-sm {
  display: block;
  margin-bottom: var(--space-xs);
}

.input-group {
  display: flex;
  gap: var(--space-xs);
  align-items: stretch;
}

.input-group .text-input {
  flex: 1;
}

.tool-result {
  margin-top: var(--space-md);
  min-height: 0;
}

.tool-card-footer {
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-md);
}

.tool-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.tool-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--color-mute);
}

.tool-meta-item svg {
  color: var(--color-link);
  flex-shrink: 0;
}

/* Upload Zone */
.upload-zone {
  position: relative;
  border: 2px dashed var(--color-hairline);
  border-radius: var(--rounded-md);
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* A file input that still has to be able to open the camera.

   iOS Safari ignores activation of a file input that computes to display: none,
   which is exactly what the `hidden` attribute means, so neither the picker nor the
   camera ever appears. So the input stays rendered and is taken out of the way
   instead: opacity hides it and 1px keeps it out of the layout. Neither display nor
   visibility may be set here, or iOS goes back to ignoring it. pointer-events is
   deliberately left alone, because a file input that cannot be hit-tested is one
   more thing iOS refuses to activate. */
.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--color-ink);
  background-color: var(--color-hairline-soft);
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-body);
  pointer-events: none;
}

.upload-content svg {
  color: var(--color-mute);
}

.upload-hint {
  color: var(--color-faint);
}

.upload-alt {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.upload-alt-text {
  color: var(--color-faint);
  flex-shrink: 0;
}

.upload-alt .button-ghost-sm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Live camera viewfinder, opened by Take Photo.

   Deliberately near-black in both themes: the only thing on screen should be the
   camera image, and a light panel around it makes the frame harder to line up a QR
   code against. The controls stay in the site's own tokens so they do not glare. */
.camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: rgba(0, 0, 0, 0.92);
}

.camera-frame {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  border-radius: var(--rounded-lg);
  overflow: hidden;
  background: #000;
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* A square guide to put the code inside. It is only a guide, so it is drawn in
   corners rather than a full box: a full box sits over the very modules being read. */
.camera-reticle {
  position: absolute;
  inset: 12%;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--rounded-md);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}

.camera-status {
  color: #f2f2f2;
  text-align: center;
  min-height: 1.5em;
}

.camera-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.camera-actions .button-ghost-sm {
  background-color: #1f1f1f;
  color: #f2f2f2;
  border-color: #3a3a3a;
  cursor: pointer;
}

/* ============================================
   FEATURES SECTION
   ============================================ */
.features-section {
  padding: var(--space-section) 0;
  background-color: var(--color-canvas);
  transition: background-color 0.2s ease;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-md);
  margin-bottom: var(--space-md);
  color: var(--color-ink);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.feature-card .heading-md {
  margin-bottom: var(--space-xs);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.feature-card .body-md {
  color: var(--color-body);
}

/* ============================================
   CTA BAND
   ============================================ */
.cta-band {
  padding: var(--space-4xl) var(--space-lg);
  text-align: center;
  background-color: var(--color-canvas);
  transition: background-color 0.2s ease;
}

.cta-container {
  max-width: 640px;
}

.cta-desc {
  color: var(--color-body);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xl);
}

/* ============================================
   SEO CONTENT
   ============================================ */
.seo-section {
  padding: var(--space-section) 0;
  background-color: var(--color-canvas);
  transition: background-color 0.2s ease;
}

.seo-body {
  max-width: 760px;
  margin: 0 auto;
}

.seo-body .heading-md {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
}

.seo-body .heading-md:first-child {
  margin-top: 0;
}

.seo-body .body-md {
  color: var(--color-body);
  font-size: 15px;
  line-height: 26px;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.seo-body strong {
  color: var(--color-ink);
  font-weight: 600;
}

.seo-code {
  font-family: var(--font-mono);
  font-size: 13px;
  background-color: var(--color-canvas-elevated);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-sm);
  padding: 1px 6px;
  color: var(--color-ink);
  white-space: nowrap;
}

.seo-list {
  margin: 0 0 var(--space-lg);
  padding-left: 22px;
}

.seo-list .body-md {
  margin-bottom: var(--space-sm);
  padding-left: 4px;
}

.seo-list .body-md:last-child {
  margin-bottom: 0;
}

.seo-list::marker {
  color: var(--color-mute);
}

.seo-table-wrap {
  margin: var(--space-lg) 0 0;
  overflow-x: auto;
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-md);
  background-color: var(--color-canvas-elevated);
}

.seo-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.seo-table-caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-mute);
}

.seo-table th,
.seo-table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  border-top: 1px solid var(--color-hairline-soft);
}

.seo-table thead th {
  font-weight: 600;
  color: var(--color-ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background-color: var(--color-canvas);
  border-top: none;
}

.seo-table tbody th {
  font-weight: 500;
  color: var(--color-ink);
}

.seo-table td {
  color: var(--color-body);
}

.seo-table tbody tr:hover td,
.seo-table tbody tr:hover th {
  color: var(--color-ink);
}

/* ============================================
   FAQ
   ============================================ */
.faq-section {
  padding: var(--space-section) 0;
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-hairline);
}

.faq-question {
  padding: var(--space-lg) 0;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-question::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--color-mute);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}

.faq-item[open] .faq-question::after {
  content: '−';
}

.faq-answer {
  color: var(--color-body);
  padding-bottom: var(--space-lg);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  border-top: 1px solid var(--color-hairline);
  padding: var(--space-3xl) 0;
  transition: border-color 0.2s ease;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-brand {
  max-width: 280px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: var(--space-xs);
}

.footer-tagline {
  color: var(--color-mute);
}

.footer-links {
  display: flex;
  gap: var(--space-3xl);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-col-title {
  color: var(--color-ink);
  margin-bottom: var(--space-xxs);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
}

.footer-link {
  color: var(--color-body);
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: var(--color-ink);
}

.footer-bottom {
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-lg);
}

.footer-copyright {
  color: var(--color-mute);
}

/* ============================================
   LEGAL PAGES
   ============================================ */
.legal-page {
  padding-top: calc(56px + var(--space-3xl));
  padding-bottom: var(--space-section);
}

.legal-container {
  max-width: 720px;
}

.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--color-mute);
  margin-bottom: var(--space-lg);
  transition: color 0.15s ease;
}

.legal-back-link:hover {
  color: var(--color-ink);
}

.legal-title {
  margin-bottom: var(--space-xs);
}

.legal-updated {
  color: var(--color-mute);
  margin-bottom: var(--space-2xl);
}

.legal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.legal-section .heading-md {
  margin-bottom: var(--space-sm);
  font-size: 18px;
  line-height: 26px;
}

.legal-section .body-md {
  color: var(--color-body);
}

.legal-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.legal-list li {
  color: var(--color-body);
  padding-left: var(--space-lg);
  position: relative;
}

.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: var(--rounded-full);
  background-color: var(--color-mute);
}

.legal-link {
  color: var(--color-link);
  transition: color 0.15s ease;
}

.legal-link:hover {
  color: var(--color-link-deep);
}

/* ============================================
   ERROR PAGES (404 / 500)
   ============================================ */
.error-page {
  padding-top: calc(56px + var(--space-3xl));
  padding-bottom: var(--space-section);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.error-container {
  max-width: 640px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-code {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 500;
  line-height: 72px;
  letter-spacing: -2.56px;
  color: var(--color-mute);
  margin-bottom: var(--space-md);
  user-select: none;
}

.error-code-warn {
  color: var(--color-error);
  opacity: 0.85;
}

.error-title {
  margin-bottom: var(--space-sm);
}

.error-text {
  color: var(--color-body);
  margin-bottom: var(--space-xl);
  max-width: 520px;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-3xl);
}

.error-links {
  width: 100%;
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.error-links-title {
  color: var(--color-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: var(--space-md);
}

.error-link-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
}

.error-link {
  color: var(--color-link);
  transition: color 0.15s ease;
}

.error-link:hover {
  color: var(--color-link-deep);
  text-decoration: underline;
}

.error-footnote {
  color: var(--color-mute);
  max-width: 520px;
}

@media (max-width: 768px) {
  .error-code {
    font-size: 48px;
    line-height: 56px;
  }

  .error-actions {
    flex-direction: column;
    align-self: stretch;
  }

  .error-actions .button-primary,
  .error-actions .button-secondary {
    width: 100%;
  }
}

/* ============================================
   RESULT DISPLAYS
   ============================================ */
.result-success {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-canvas-elevated);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-sm);
  padding: var(--space-sm) var(--space-md);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.result-success .result-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-link);
  word-break: break-all;
  min-width: 0;
}

.result-success .copy-btn {
  flex-shrink: 0;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  border-radius: var(--rounded-sm);
  padding: var(--space-xxs) var(--space-xs);
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.result-success .copy-btn:hover {
  background-color: var(--color-ink);
}

.result-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-mute);
  font-size: 18px;
  line-height: 1;
  border-radius: var(--rounded-sm);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.result-close:hover {
  color: var(--color-error);
  background-color: var(--color-hairline-soft);
}

.result-error {
  color: var(--color-error);
  font-size: 14px;
  padding: var(--space-xs) 0;
}

/* ============================================
   GAME BANNER (inline below result)
   ============================================ */
.game-banner {
  margin-top: var(--space-md);
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
  border-radius: var(--rounded-md);
  padding: var(--space-md) var(--space-lg);
  animation: banner-slide-up 0.5s ease-out;
}

.game-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.game-banner-text {
  color: #ffffff;
}

.game-banner-text .heading-md {
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 2px;
}

.game-banner-text .body-sm {
  color: rgba(255, 255, 255, 0.8);
}

.game-banner-btn {
  background-color: #ffffff !important;
  color: #0070f3 !important;
  flex-shrink: 0;
  font-weight: 600;
}

.game-banner-btn:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

@keyframes banner-slide-up {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.qr-output {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--color-canvas-elevated);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-md);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.qr-output .result-close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
}

.qr-output img {
  width: 300px;
  height: 300px;
  image-rendering: pixelated;
}

.qr-actions {
  display: flex;
  gap: var(--space-xs);
}

/* ============================================
   RESPONSIVE — Tablet (≤768px)
   ============================================ */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-title {
    font-size: 36px;
    line-height: 36px;
    letter-spacing: -1.8px;
  }

  .heading-lg {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -1.12px;
  }

  .footer-container {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .tool-card {
    padding: var(--space-lg);
  }

  .tools-section {
    padding: var(--space-3xl) 0;
  }

  .features-section {
    padding: var(--space-3xl) 0;
  }

  .faq-section {
    padding: var(--space-3xl) 0;
  }

  .seo-section {
    padding: var(--space-3xl) 0;
  }
}

/* ============================================
   RESPONSIVE — Mobile (≤640px)
   ============================================ */
@media (max-width: 640px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background-color: var(--color-canvas);
    border-bottom: 1px solid var(--color-hairline);
    flex-direction: column;
    padding: var(--space-sm) var(--space-lg);
    gap: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--rounded-sm);
  }

  .nav-toggle {
    display: flex;
  }

  .hero-band {
    padding: var(--space-3xl) var(--space-lg);
    padding-top: calc(var(--space-3xl) + 56px);
  }

  .hero-title {
    font-size: 32px;
    line-height: 32px;
    letter-spacing: -1.6px;
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  .hero-subtitle {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: var(--space-lg);
  }

  .hero-input-group {
    flex-direction: column;
  }

  .hero-explore-link {
    margin-top: 4px;
  }

  .hero-explore-text {
    font-size: 14px;
  }

  .hero-explore-arrow {
    width: 40px;
    height: 40px;
  }

  .hero-input-group .button-primary {
    align-self: center;
    width: auto;
    min-width: 150px;
    padding: 0 var(--space-md);
  }

  .tool-tabs {
    flex-wrap: wrap;
  }

  .tool-tab {
    font-size: 13px;
    padding: 0 var(--space-sm);
    height: 36px;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .tool-card {
    padding: var(--space-lg);
  }

  .input-group {
    flex-direction: column;
  }

  .input-group .button-primary-sm {
    width: 100%;
  }

  .cta-band {
    padding: var(--space-3xl) var(--space-lg);
  }

  .cta-band .button-primary {
    width: 100%;
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .legal-page {
    padding-top: calc(56px + var(--space-xl));
    padding-bottom: var(--space-3xl);
  }

  .upload-zone {
    padding: var(--space-2xl) var(--space-md);
  }

  .qr-output img {
    width: 240px;
    height: 240px;
  }

  .result-success {
    flex-wrap: wrap;
  }

  .result-success .result-url {
    width: 100%;
    margin-bottom: var(--space-xs);
  }

  .result-success .copy-btn {
    margin-left: auto;
  }
}

/* ============================================
   RESPONSIVE — Small phones (≤375px)
   ============================================ */
@media (max-width: 375px) {
  :root {
    --space-lg: 20px;
    --space-xl: 28px;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .hero-band {
    padding: var(--space-3xl) var(--space-md);
    padding-top: calc(var(--space-3xl) + 56px);
  }

  .hero-title {
    font-size: 28px;
    line-height: 30px;
    letter-spacing: -1.4px;
  }

  .hero-subtitle {
    font-size: 15px;
    line-height: 22px;
  }

  .heading-lg {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.96px;
  }

  .heading-md {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.36px;
  }

  .tool-tabs {
    gap: 6px;
  }

  .tool-tab {
    font-size: 12px;
    padding: 0 10px;
    height: 34px;
    gap: 4px;
  }

  .tool-tab svg {
    width: 14px;
    height: 14px;
  }

  .tool-card {
    padding: var(--space-md);
  }

  .feature-card {
    padding: var(--space-md);
  }

  .qr-output img {
    width: 200px;
    height: 200px;
  }

  .upload-zone {
    padding: var(--space-xl) var(--space-sm);
  }

  .upload-content svg {
    width: 32px;
    height: 32px;
  }

  .faq-question {
    font-size: 15px;
    line-height: 22px;
  }

  .nav-logo {
    font-size: 12px;
    letter-spacing: 0.3px;
  }
}

/* ============================================
   RESPONSIVE — Very small phones (≤320px)
   ============================================ */
@media (max-width: 320px) {
  .hero-title {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -1.2px;
  }

  .hero-subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  .tool-tab {
    font-size: 12px;
    padding: 0 8px;
    height: 32px;
  }

  .mono-eyebrow {
    font-size: 12px;
  }

  .feature-icon {
    width: 40px;
    height: 40px;
  }

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

  .nav-logo {
    font-size: 12px;
    letter-spacing: 0.2px;
  }
}

/* ============================================
   TOUCH & MOBILE UX
   ============================================ */

/* Prevent text selection on interactive elements */
.tool-tab,
.button-primary,
.button-primary-sm,
.button-secondary,
.button-ghost-sm,
.copy-btn,
.nav-toggle,
.theme-toggle,
.upload-zone,
.slug-random-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Prevent double-tap zoom on buttons */
button,
a,
input {
  touch-action: manipulation;
}

/* Better tap target sizes for mobile */
@media (hover: none) and (pointer: coarse) {
  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .tool-tab {
    min-height: 44px;
  }

  .copy-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Comfortable thumb targets */
  .nav-toggle,
  .theme-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
  }

  .text-input,
  .button-primary-sm,
  .button-ghost-sm {
    min-height: 44px;
  }

  .footer-link,
  .footer-logo,
  .legal-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-logo {
    min-height: 44px;
  }

  .result-close {
    min-width: 44px;
    min-height: 44px;
  }

  .faq-question {
    min-height: 56px;
  }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: calc(var(--space-3xl) + env(safe-area-inset-bottom));
  }

  .nav-bar {
    padding-top: env(safe-area-inset-top);
  }

  .cta-band {
    padding-bottom: calc(var(--space-4xl) + env(safe-area-inset-bottom));
  }
}

/* Prevent overscroll bounce on iOS */
html {
  overscroll-behavior: none;
}

/* Smooth momentum scrolling on iOS */
.tool-panel,
.tool-card-body,
.upload-zone,
.faq-list {
  -webkit-overflow-scrolling: touch;
}

/* Mobile keyboard adjustments */
@media (max-width: 640px) {
  input:focus,
  textarea:focus {
    font-size: 16px !important;
  }
}

/* Prevent zoom on input focus for mobile */
@media (max-width: 640px) {
  input[type="url"],
  input[type="text"],
  input[type="email"] {
    font-size: 16px;
  }
}

/* Mobile-first order: theme toggle before hamburger */
@media (max-width: 640px) {
  .nav-container {
    order: 0;
  }

  .theme-toggle {
    order: 2;
  }

  .nav-toggle {
    order: 3;
  }
}

/* Wrap the tool tabs on phones so every tool stays reachable without
   sideways scrolling — QR Decoder and QR Artist used to sit off-screen. */
@media (max-width: 520px) {
  .tool-tabs {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-xs);
  }

  .tool-tab {
    flex-shrink: 0;
  }
}

/* Loading state for mobile */
@media (max-width: 640px) {
  .qr-output {
    margin: var(--space-md) 0;
  }
}

/* Print styles */
@media print {
  .nav-bar,
  .hero-band,
  .cta-band,
  .footer {
    display: none;
  }

  .tools-section,
  .features-section,
  .faq-section {
    padding: var(--space-lg) 0;
  }
}

/* ============================================
   CONFETTI EXPLOSION
   ============================================ */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  animation: confetti-fall 3s ease-out forwards;
}

.confetti-piece.square {
  border-radius: 2px;
}

.confetti-piece.circle {
  border-radius: 50%;
}

.confetti-piece.strip {
  width: 4px;
  height: 14px;
  border-radius: 2px;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotateZ(0deg) rotateX(0deg) scale(1);
  }
  25% {
    opacity: 1;
    transform: translateY(25vh) rotateZ(180deg) rotateX(180deg) scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: translateY(50vh) rotateZ(360deg) rotateX(360deg) scale(0.8);
  }
  75% {
    opacity: 0.5;
    transform: translateY(75vh) rotateZ(540deg) rotateX(540deg) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotateZ(720deg) rotateX(720deg) scale(0.4);
  }
}

@keyframes confetti-sway {
  0%, 100% {
    margin-left: 0;
  }
  25% {
    margin-left: 30px;
  }
  75% {
    margin-left: -30px;
  }
}

.confetti-piece.sway-1 { animation: confetti-fall 2.8s ease-out forwards, confetti-sway 1.2s ease-in-out infinite; }
.confetti-piece.sway-2 { animation: confetti-fall 3.2s ease-out forwards, confetti-sway 1.5s ease-in-out infinite; }
.confetti-piece.sway-3 { animation: confetti-fall 2.6s ease-out forwards, confetti-sway 0.9s ease-in-out infinite; }

/* Success bounce animation */
@keyframes success-bounce {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.result-success-animated {
  animation: success-bounce 0.4s ease-out;
}

/* ============================================
   QR CODE ARTIST
   ============================================ */
.artist-controls {
  margin-top: var(--space-lg);
}

.artist-row {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.artist-field {
  flex: 1;
}

.artist-field-full {
  flex: 2;
}

.artist-field .label-sm {
  display: block;
  margin-bottom: var(--space-xxs);
}

.color-picker-group {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.color-picker {
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-hairline);
  border-radius: var(--rounded-sm);
  cursor: pointer;
  padding: 3px;
  background: var(--color-canvas-elevated);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.color-picker:hover {
  border-color: var(--color-body);
}

.color-picker:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15);
  outline: none;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

.color-picker::-moz-color-swatch {
  border: none;
  border-radius: 3px;
}

.color-hex-input {
  width: 90px !important;
  font-family: var(--font-mono);
  font-size: 13px !important;
  text-align: center;
  text-transform: uppercase;
}

.color-separator {
  color: var(--color-mute);
  font-size: 12px;
}

.artist-select {
  width: 100%;
  cursor: pointer;
  appearance: auto;
}

.artist-notice {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-warning-soft);
  border: 1px solid var(--color-warning);
  border-radius: var(--rounded-sm);
  margin-bottom: var(--space-md);
  color: var(--color-warning-deep);
}

/* ============================================
   CUSTOM URL SHORTENER
   ============================================ */
.slug-field {
  margin-top: var(--space-md);
}

.slug-field .label-sm {
  display: block;
  margin-bottom: var(--space-xxs);
}

.slug-input-group {
  display: flex;
  align-items: stretch;
  background-color: var(--color-canvas-elevated);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-sm);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.slug-input-group:focus-within {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15);
}

.slug-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-sm);
  background-color: var(--color-hairline-soft);
  border-right: 1px solid var(--color-hairline);
  color: var(--color-mute);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  user-select: none;
}

.slug-input.text-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  font-family: var(--font-mono);
}

.slug-input.text-input:focus {
  box-shadow: none;
}

.slug-random-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  background-color: var(--color-canvas-elevated);
  color: var(--color-mute);
  border: none;
  border-left: 1px solid var(--color-hairline);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.slug-random-btn:hover {
  background-color: var(--color-hairline-soft);
  color: var(--color-ink);
}

.slug-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xxs);
}

.slug-hint {
  color: var(--color-mute);
}

.slug-counter {
  color: var(--color-faint);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.slug-input-group.is-invalid {
  border-color: var(--color-error);
}

.slug-input-group.is-invalid:focus-within {
  box-shadow: 0 0 0 3px rgba(238, 0, 0, 0.12);
}

.slug-input-group.is-invalid ~ .slug-meta .slug-hint,
.slug-hint.is-error {
  color: var(--color-error);
}

.slug-input-group.is-valid .slug-hint {
  color: var(--color-link-deep);
}

.slug-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-hairline-soft);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-sm);
}

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

.slug-preview-label {
  color: var(--color-mute);
}

.slug-preview-url {
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
}

.slug-actions {
  margin-top: var(--space-md);
}

.slug-actions .button-primary-sm {
  flex-shrink: 0;
}

.slug-actions .button-primary-sm[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .slug-input-group {
    flex-wrap: wrap;
  }

  .slug-prefix {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-hairline);
    padding: var(--space-xxs) var(--space-sm);
  }

  .slug-random-btn {
    width: 44px;
  }

  .slug-actions .button-primary-sm {
    width: 100%;
  }
}

/* ============================================
   SNAKE GAME MODAL
   ============================================ */
.game-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.game-container {
  position: relative;
  background: var(--color-canvas-elevated);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-lg);
  width: 360px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: game-slide-up 0.3s ease-out;
  pointer-events: auto;
}

@keyframes game-slide-up {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-hairline);
}

.game-title {
  margin: 0;
  font-size: 18px;
}

.game-close {
  width: 32px;
  height: 32px;
}

.game-body {
  padding: var(--space-lg);
}

.game-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.game-start-icon {
  color: var(--color-link);
  margin-bottom: var(--space-md);
}

.game-instruction {
  font-size: 16px;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
  font-weight: 500;
}

.game-controls-hint {
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
  border-radius: var(--rounded-sm);
  margin-bottom: var(--space-lg);
  color: #ffffff;
  font-weight: 500;
  font-size: 13px;
}

.game-start-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
}

.game-hud {
  display: flex;
  justify-content: space-between;
  width: 300px;
  margin-bottom: var(--space-sm);
}

.game-score, .game-highscore {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}

.game-highscore {
  color: var(--color-mute);
}

#game-canvas {
  border: 2px solid var(--color-hairline);
  border-radius: var(--rounded-sm);
  background: #1a1a2e;
  display: block;
}

.game-mobile-controls {
  margin-top: var(--space-md);
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .game-mobile-controls {
    display: block;
  }
}

.game-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.game-dpad-mid {
  display: flex;
  align-items: center;
  gap: 2px;
}

.game-dpad-center {
  width: 56px;
  height: 56px;
}

.game-arrow-btn {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-canvas-elevated);
  border: 2px solid var(--color-hairline);
  border-radius: var(--rounded-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color 0.1s ease, border-color 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.game-arrow-btn:active {
  background: var(--color-link);
  border-color: var(--color-link);
  color: white;
}

.game-over-icon {
  color: var(--color-warning);
  margin-bottom: var(--space-md);
}

.game-over-text {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.game-over-score {
  font-size: 18px;
  color: var(--color-link);
  margin-bottom: var(--space-sm);
}

.game-over-stats {
  color: var(--color-mute);
  margin-bottom: var(--space-lg);
}

.game-over-actions {
  display: flex;
  gap: var(--space-sm);
  width: 100%;
}

.game-over-actions .button-primary,
.game-over-actions .button-ghost-sm {
  flex: 1;
  height: 44px;
}

@media (max-width: 640px) {
  .game-container {
    width: 95vw;
    max-width: 360px;
  }

  #game-canvas {
    width: 260px;
    height: 260px;
  }

  .game-hud {
    width: 260px;
  }

  .game-modal {
    padding: var(--space-sm);
  }

  .game-banner-content {
    flex-direction: column;
    text-align: center;
  }

  .game-banner-btn {
    width: 100%;
  }
}

.logo-upload-zone {
  border: 2px dashed var(--color-hairline);
  border-radius: var(--rounded-sm);
  padding: var(--space-md);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.logo-upload-zone:hover {
  border-color: var(--color-ink);
  background-color: var(--color-hairline-soft);
}

.logo-upload-text {
  color: var(--color-mute);
}

.logo-preview {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs);
  border: 1px solid var(--color-hairline);
  border-radius: var(--rounded-sm);
  background: var(--color-canvas-elevated);
}

.logo-preview img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--rounded-sm);
}

.logo-preview .result-close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  font-size: 14px;
  background: var(--color-error);
  color: white;
  border-radius: 50%;
}

@media (max-width: 640px) {
  .artist-row {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .color-picker-group {
    width: 100%;
  }

  .color-hex-input {
    flex: 1;
    width: auto !important;
  }
}

/* ============================================
   SCROLL PROGRESS / BACK TO TOOLS
   ============================================
   A fixed circle in the bottom-right corner. The ring is how far down the page you are;
   clicking it takes you back up to the tools, so the readout and the shortcut are the
   same 48 pixels.

   The position is deliberately not a hard-coded corner left to chance. The Resources
   footer is the bottom of the page, which is precisely where a fixed bottom-right
   control lives, and the number that decides whether the circle lands on the last Legal
   link, the copyright row or the CTA band above them is not knowable from a stylesheet:
   it moves with the viewport, with whether the device counts as a coarse pointer (that
   alone gives every footer link a 44px target), and with Inter finally loading. So the
   button measures the interactive elements in the two bottom bands against its own
   rectangle and lifts out of the way. app.js owns the arithmetic.

   It is split into a fixed anchor and a face that takes the lift. The anchor is what the
   script measures, and because it never moves its rectangle is the resting corner every
   time -- measuring the face instead would mean measuring a transform mid-animation and
   re-solving from a position the previous frame had already changed. The visible circle
   is the one that travels. */
.scroll-progress {
  /* Lift is written by app.js as a positive number, and the sign is applied here so the
     stylesheet stays the only place that knows the circle travels upwards. */
  --fab-lift: 0px;

  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  /* Second declaration wins wherever env() resolves. The first one is there so a browser
     that cannot parse env() keeps a sane offset instead of dropping to the edge. */
  right: calc(var(--space-lg) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));

  /* Under the nav on purpose. The nav is 100 and this is 90, which keeps the circle
     behind the nav and behind the mobile nav panel that drops out of it -- and safely
     under the 9999 confetti layer and the 10000 game modal, both of which are meant to
     own the whole screen while they are up. */
  z-index: 90;

  /* Past 44px on its own, so this clears the touch-target floor in the coarse-pointer
     block above without needing a second size to keep in sync. */
  width: 48px;
  height: 48px;
}

.scroll-progress-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-ink);
  background-color: var(--color-canvas-elevated);
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  box-shadow: var(--shadow-floating);
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, calc(-1 * var(--fab-lift)), 0);
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hovering the anchor, not the face, and that difference is the point: once the circle
   has lifted out of the way the pointer is no longer over it, so it stops lighting up
   instead of glowing at a spot the visitor has moved away from. */
.scroll-progress:hover .scroll-progress-face {
  background-color: var(--color-hairline-soft);
}

/* The only explicit focus ring in the sheet. The rest of the file drops outlines on text
   inputs, where the border change stands in for one; a button has nothing else to change,
   so the ring stays. On the face, so it travels with the circle. */
.scroll-progress:focus-visible .scroll-progress-face {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* Dormant: not scrolled far enough to be worth the corner yet.
   Blocked: something is underneath and no lift short enough would clear it, so covering
   a link is not an option and the circle goes away instead.
   Idle and shifted need no rule of their own -- they differ only by the number in
   --fab-lift, and restating a number the script writes buys nothing. */
.scroll-progress[data-state='dormant'],
.scroll-progress[data-state='blocked'] {
  pointer-events: none;
}

.scroll-progress[data-state='dormant'] .scroll-progress-face,
.scroll-progress[data-state='blocked'] .scroll-progress-face {
  opacity: 0;
  transform: scale(0.8);
}

.scroll-progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* SVG arcs start at 3 o'clock. Without this the ring fills from the right instead of
     from the top, which reads as a loading spinner rather than as a position. */
  transform: rotate(-90deg);
  pointer-events: none;
}

.scroll-progress-track,
.scroll-progress-value {
  fill: none;
  stroke-width: 2;
}

.scroll-progress-track {
  stroke: var(--color-hairline);
}

.scroll-progress-value {
  stroke: var(--color-ink);
  stroke-linecap: round;
  /* pathLength="100" on the circle means 100 is the whole ring in every browser, so the
     script writes one number between 0 and 100 and never has to know pi. dashoffset is
     deliberately left to the script's inline style, which outranks this declaration. */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.1s linear;
}

.scroll-progress-arrow {
  position: relative;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress-face,
  .scroll-progress-value {
    transition: none;
  }
}

/* Declared here rather than added to the print block earlier in the file, because this
   section comes later and would win a tie on specificity. */
@media print {
  .scroll-progress {
    display: none;
  }
}