/* =========================================================
   Uti-Mate Spin The Wheel — isolated feature styles
   Scope: .spin-wheel-page only, so it will not collide with main tools.
   ========================================================= */

.spin-page-body {
  min-height: 100vh;
}

.spin-wheel-page {
  --sw-bg: #fff7ed;
  --sw-bg-2: #fef3c7;
  --sw-surface: rgba(255, 255, 255, 0.78);
  --sw-surface-strong: #ffffff;
  --sw-text: #171421;
  --sw-muted: #6f6078;
  --sw-border: rgba(86, 68, 105, 0.16);
  --sw-primary: #7c3aed;
  --sw-primary-2: #ec4899;
  --sw-accent: #f97316;
  --sw-good: #10b981;
  --sw-danger: #ef4444;
  --sw-shadow: 0 28px 90px rgba(31, 16, 54, 0.18);
  --sw-soft-shadow: 0 16px 50px rgba(31, 16, 54, 0.10);
  --sw-radius-xl: 30px;
  --sw-radius-lg: 22px;
  --sw-radius-md: 16px;
  color: var(--sw-text);
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--sw-primary), transparent 72%), transparent 30rem),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--sw-primary-2), transparent 74%), transparent 30rem),
    radial-gradient(circle at 40% 95%, color-mix(in srgb, var(--sw-accent), transparent 82%), transparent 34rem),
    linear-gradient(135deg, var(--sw-bg), var(--sw-bg-2));
  padding: 24px 0 76px;
}

html[data-theme="dark"] .spin-wheel-page {
  --sw-bg: #07020f;
  --sw-bg-2: #130722;
  --sw-surface: rgba(21, 13, 35, 0.72);
  --sw-surface-strong: #171124;
  --sw-text: #fff7ff;
  --sw-muted: #cdbfe0;
  --sw-border: rgba(255, 255, 255, 0.13);
  --sw-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  --sw-soft-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.spin-wheel-page * { box-sizing: border-box; }
.spin-wheel-page button,
.spin-wheel-page input,
.spin-wheel-page textarea,
.spin-wheel-page select { font: inherit; }

.sw-shell {
  width: min(1540px, calc(100% - 28px));
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.sw-studio-bar,
.sw-panel,
.sw-stage-card,
.sw-article-card,
.sw-modal-card {
  border: 1px solid var(--sw-border);
  background: linear-gradient(145deg, var(--sw-surface), color-mix(in srgb, var(--sw-surface), transparent 18%));
  box-shadow: var(--sw-shadow);
  backdrop-filter: blur(22px);
}

.sw-studio-bar {
  border-radius: var(--sw-radius-xl);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sw-title-block h1,
.sw-title-block p,
.sw-panel h2,
.sw-stage-toolbar h2,
.sw-article-card h2,
.sw-article-card h3 { margin: 0; }

.sw-title-block h1 {
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.06em;
}

.sw-title-block p:not(.sw-kicker) {
  margin-top: 7px;
  color: var(--sw-muted);
  line-height: 1.5;
}

.sw-kicker {
  margin: 0 0 7px;
  color: color-mix(in srgb, var(--sw-primary), var(--sw-primary-2) 45%);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 950;
}

.sw-status-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sw-status-strip span {
  border: 1px solid var(--sw-border);
  background: rgba(255, 255, 255, 0.20);
  color: var(--sw-muted);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 800;
}

.sw-status-strip strong { color: var(--sw-text); }

.sw-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 350px) minmax(420px, 1fr) minmax(260px, 360px);
  gap: 16px;
  align-items: start;
}

.sw-panel,
.sw-stage-card {
  border-radius: var(--sw-radius-xl);
  padding: 14px;
}

.sw-panel {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 112px);
  overflow: auto;
}

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

.sw-panel h2,
.sw-stage-toolbar h2 {
  font-size: 21px;
  letter-spacing: -0.04em;
}

.sw-panel-head-compact { align-items: center; }

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

.sw-template-btn {
  border: 1px solid var(--sw-border);
  background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  color: var(--sw-text);
  border-radius: 16px;
  padding: 10px;
  min-height: 70px;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.sw-template-btn:hover,
.sw-template-btn:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sw-primary), white 22%);
  outline: none;
}

.sw-template-btn strong { display: block; font-size: 14px; }
.sw-template-btn span { display: block; color: var(--sw-muted); font-size: 12px; margin-top: 4px; line-height: 1.35; }

.sw-label,
.sw-field,
.sw-range,
.sw-toggle-list label {
  color: var(--sw-muted);
  font-weight: 900;
  font-size: 13px;
}

.sw-label span { display: block; margin-top: 3px; font-weight: 700; opacity: .82; }

.sw-input,
.sw-textarea,
.sw-field select,
.sw-field input {
  width: 100%;
  border: 1px solid var(--sw-border);
  background: color-mix(in srgb, var(--sw-surface-strong), transparent 16%);
  color: var(--sw-text);
  border-radius: 16px;
  padding: 12px 13px;
  outline: none;
  margin-top: 7px;
}

.sw-input:focus,
.sw-textarea:focus {
  border-color: color-mix(in srgb, var(--sw-primary), white 18%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-primary), transparent 82%);
}

.sw-textarea {
  min-height: 230px;
  resize: vertical;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}

.sw-tool-row,
.sw-action-grid,
.sw-stage-actions,
.sw-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.sw-mini-btn,
.sw-btn,
.sw-icon-action,
.sw-file-label {
  border: 1px solid var(--sw-border);
  background: rgba(255,255,255,.16);
  color: var(--sw-text);
  border-radius: 999px;
  min-height: 40px;
  padding: 9px 13px;
  font-weight: 950;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sw-mini-btn:hover,
.sw-btn:hover,
.sw-icon-action:hover,
.sw-file-label:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--sw-primary), white 20%);
  background: rgba(255,255,255,.24);
}

.sw-btn-primary,
.sw-center-button {
  border-color: transparent;
  background: linear-gradient(135deg, var(--sw-primary), var(--sw-primary-2));
  color: white;
  box-shadow: 0 18px 55px color-mix(in srgb, var(--sw-primary), transparent 68%);
}

.sw-icon-action {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
}

.sw-import-box input { display: none; }
.sw-file-label { display: inline-flex; align-items: center; justify-content: center; width: 100%; }

.sw-stage-card {
  min-height: 760px;
  display: grid;
  grid-template-rows: auto minmax(420px, 1fr) auto auto;
  gap: 12px;
  overflow: hidden;
}

.sw-stage-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--sw-border);
  padding-bottom: 10px;
}

.sw-wheel-wrap {
  --sw-wheel-size: 660px;
  --sw-render-size: min(var(--sw-wheel-size), calc(100% - 28px));
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(72vw, 710px);
  overflow: hidden;
  border-radius: var(--sw-radius-xl);
  background:
    radial-gradient(circle, rgba(255,255,255,.22), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  border: 1px solid var(--sw-border);
  isolation: isolate;
}

.sw-wheel-frame {
  position: relative;
  width: var(--sw-render-size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.sw-wheel-canvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  filter: drop-shadow(0 28px 40px rgba(15, 8, 30, .25));
}

.sw-confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.sw-pointer {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: clamp(16px, 3.3vw, 24px) solid transparent;
  border-right: clamp(16px, 3.3vw, 24px) solid transparent;
  border-top: clamp(36px, 6vw, 52px) solid var(--sw-text);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.22));
  z-index: 5;
}

.sw-center-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(96px, 18%, 158px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: clamp(18px, 4vw, 30px);
  letter-spacing: -0.02em;
  font-weight: 1000;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 0;
  text-align: center;
  line-height: 1;
}

.sw-center-button:active { transform: translate(-50%, -50%) scale(.96); }

.sw-result-card {
  border: 1px solid var(--sw-border);
  border-radius: 22px;
  padding: 15px;
  background: color-mix(in srgb, var(--sw-surface-strong), transparent 20%);
  display: grid;
  gap: 3px;
}

.sw-result-card span {
  color: var(--sw-muted);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 11px;
  font-weight: 950;
}

.sw-result-card strong {
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.sw-result-card small { color: var(--sw-muted); }

.sw-action-grid .sw-btn { flex: 1 1 150px; }

.sw-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

.sw-slider-grid {
  display: grid;
  gap: 12px;
}

.sw-range input {
  display: block;
  width: 100%;
  margin-top: 8px;
  accent-color: var(--sw-primary);
}

.sw-toggle-list {
  display: grid;
  gap: 10px;
  border: 1px solid var(--sw-border);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.10);
}

.sw-toggle-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--sw-text);
}

.sw-toggle-list input { accent-color: var(--sw-primary); }

.sw-history-block {
  border-top: 1px solid var(--sw-border);
  padding-top: 12px;
}

.sw-history-list {
  display: grid;
  gap: 7px;
  max-height: 190px;
  overflow: auto;
}

.sw-history-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--sw-border);
  border-radius: 14px;
  padding: 9px;
  background: rgba(255,255,255,.12);
  font-size: 13px;
}

.sw-history-item strong { overflow-wrap: anywhere; }
.sw-history-item small { color: var(--sw-muted); white-space: nowrap; }

.sw-article-section {
  width: min(1060px, calc(100% - 28px));
  margin: 34px auto 0;
}

.sw-article-card {
  border-radius: var(--sw-radius-xl);
  padding: clamp(22px, 4vw, 44px);
  line-height: 1.75;
}

.sw-article-card h2 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  margin-bottom: 16px;
}

.sw-article-card h3 {
  margin: 26px 0 7px;
  font-size: 22px;
}

.sw-article-card p,
.sw-article-card li { color: var(--sw-muted); }
.sw-article-card strong { color: var(--sw-text); }

.sw-modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(8, 3, 20, .70);
  z-index: 2000;
}

.sw-modal.show { display: grid; }

.sw-modal-card {
  width: min(560px, 100%);
  border-radius: 32px;
  padding: 26px;
  position: relative;
  text-align: center;
  color: var(--sw-text);
}

.sw-modal-card h2 {
  font-size: 18px;
  color: var(--sw-muted);
  margin: 0;
}

.sw-modal-card strong {
  display: block;
  font-size: clamp(42px, 8vw, 78px);
  line-height: .95;
  letter-spacing: -0.07em;
  margin: 12px 0;
  overflow-wrap: anywhere;
}

.sw-modal-card p { color: var(--sw-muted); margin: 0 0 6px; }
.sw-modal-card small { color: var(--sw-muted); }

.sw-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sw-border);
  background: rgba(255,255,255,.18);
  color: var(--sw-text);
  font-size: 24px;
  cursor: pointer;
}

.sw-modal-actions { justify-content: center; margin-top: 18px; }

/* Theme variables */
.spin-wheel-page.sw-theme-neon { --sw-bg:#08051a; --sw-bg-2:#170b35; --sw-primary:#39ff14; --sw-primary-2:#ff00ff; --sw-accent:#00e5ff; }
.spin-wheel-page.sw-theme-bubblegum { --sw-bg:#fff1f8; --sw-bg-2:#e0f2fe; --sw-primary:#ff4ecd; --sw-primary-2:#22d3ee; --sw-accent:#facc15; }
.spin-wheel-page.sw-theme-galaxy { --sw-bg:#090115; --sw-bg-2:#1d0b3d; --sw-primary:#8b5cf6; --sw-primary-2:#ec4899; --sw-accent:#22d3ee; }
.spin-wheel-page.sw-theme-sunset { --sw-bg:#fff7ed; --sw-bg-2:#ffe4e6; --sw-primary:#f97316; --sw-primary-2:#f43f5e; --sw-accent:#facc15; }
.spin-wheel-page.sw-theme-ocean { --sw-bg:#eff6ff; --sw-bg-2:#ccfbf1; --sw-primary:#0ea5e9; --sw-primary-2:#14b8a6; --sw-accent:#38bdf8; }
.spin-wheel-page.sw-theme-arcade { --sw-bg:#09090b; --sw-bg-2:#18181b; --sw-primary:#22c55e; --sw-primary-2:#eab308; --sw-accent:#ef4444; }
.spin-wheel-page.sw-theme-luxury { --sw-bg:#100b07; --sw-bg-2:#1c1408; --sw-primary:#d4af37; --sw-primary-2:#f59e0b; --sw-accent:#fef3c7; }
.spin-wheel-page.sw-theme-ice { --sw-bg:#f8fafc; --sw-bg-2:#dbeafe; --sw-primary:#2563eb; --sw-primary-2:#7c3aed; --sw-accent:#06b6d4; }
.spin-wheel-page.sw-theme-forest { --sw-bg:#f0fdf4; --sw-bg-2:#ecfccb; --sw-primary:#16a34a; --sw-primary-2:#65a30d; --sw-accent:#f59e0b; }
.spin-wheel-page.sw-theme-mono { --sw-bg:#f8fafc; --sw-bg-2:#e2e8f0; --sw-primary:#0f172a; --sw-primary-2:#475569; --sw-accent:#94a3b8; }

/* Fullscreen/focus mode */
.sw-shell.sw-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1600;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 8%, color-mix(in srgb, var(--sw-primary), transparent 70%), transparent 28rem),
    radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--sw-primary-2), transparent 72%), transparent 28rem),
    linear-gradient(135deg, var(--sw-bg), var(--sw-bg-2));
}

.sw-shell.sw-fullscreen .sw-studio-bar {
  padding: 10px 12px;
  border-radius: 22px;
}

.sw-shell.sw-fullscreen .sw-title-block h1 { font-size: clamp(24px, 3vw, 42px); }
.sw-shell.sw-fullscreen .sw-title-block p:not(.sw-kicker) { display: none; }

.sw-shell.sw-fullscreen .sw-workspace {
  grid-template-columns: minmax(230px, 300px) minmax(420px, 1fr) minmax(230px, 310px);
  height: calc(100vh - 94px);
  align-items: stretch;
}

.sw-shell.sw-fullscreen .sw-panel,
.sw-shell.sw-fullscreen .sw-stage-card {
  position: relative;
  top: auto;
  max-height: none;
  height: 100%;
}

.sw-shell.sw-fullscreen .sw-stage-card {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 0;
}

.sw-shell.sw-fullscreen .sw-wheel-wrap {
  min-height: 0;
  height: 100%;
  --sw-wheel-size: min(78vh, 78vw);
  --sw-render-size: min(var(--sw-wheel-size), calc(100% - 24px));
}

.sw-shell.sw-fullscreen .sw-wheel-frame {
  width: var(--sw-render-size);
}

/* Responsive */
@media (max-width: 1220px) {
  .sw-workspace { grid-template-columns: minmax(240px, 330px) minmax(420px, 1fr); }
  .sw-custom-panel { grid-column: 1 / -1; position: static; max-height: none; }
  .sw-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .spin-wheel-page { padding-top: 14px; }
  .sw-studio-bar { flex-direction: column; align-items: stretch; }
  .sw-status-strip { justify-content: flex-start; }
  .sw-workspace,
  .sw-shell.sw-fullscreen .sw-workspace { grid-template-columns: 1fr; height: auto; }
  .sw-panel,
  .sw-stage-card,
  .sw-shell.sw-fullscreen .sw-panel,
  .sw-shell.sw-fullscreen .sw-stage-card { position: static; height: auto; max-height: none; }
  .sw-stage-card { order: 1; min-height: auto; }
  .sw-builder-panel { order: 2; }
  .sw-custom-panel { order: 3; }
  .sw-form-grid { grid-template-columns: 1fr; }
  .sw-wheel-wrap,
  .sw-shell.sw-fullscreen .sw-wheel-wrap { min-height: min(92vw, 680px); --sw-wheel-size: min(84vw, 680px); --sw-render-size: min(var(--sw-wheel-size), calc(100% - 22px)); }
  .sw-shell.sw-fullscreen { overflow: auto; position: fixed; }
}

@media (max-width: 560px) {
  .sw-shell { width: min(100% - 18px, 1540px); }
  .sw-studio-bar,
  .sw-panel,
  .sw-stage-card,
  .sw-article-card { border-radius: 22px; }
  .sw-template-grid { grid-template-columns: 1fr; }
  .sw-stage-toolbar { flex-direction: column; }
  .sw-stage-actions,
  .sw-action-grid { width: 100%; }
  .sw-action-grid .sw-btn { flex-basis: 100%; }
  .sw-wheel-wrap { min-height: 390px; --sw-wheel-size: min(86vw, 430px); --sw-render-size: min(var(--sw-wheel-size), calc(100% - 20px)); }
  .sw-pointer { border-left-width: 16px; border-right-width: 16px; border-top-width: 34px; }
  .sw-center-button { width: clamp(86px, 22%, 116px); font-size: clamp(16px, 5vw, 20px); }
  .sw-textarea { min-height: 200px; }
}

/* =========================================================
   Spin page nav isolation fix
   The Spin Wheel feature has its own design CSS, but the header must
   stay consistent with the main Uti-Mate layout. This fixes the More
   dropdown only on spin-the-wheel.html without touching other pages.
   ========================================================= */
@media (min-width: 901px) {
  body.spin-page-body .site-header {
    overflow: visible !important;
    z-index: 5000 !important;
  }

  body.spin-page-body .nav {
    position: relative !important;
    overflow: visible !important;
  }

  body.spin-page-body .nav-menu-item {
    position: static !important;
  }

  body.spin-page-body .nav-menu-item:hover > .mega-menu,
  body.spin-page-body .nav-menu-item:focus-within > .mega-menu,
  body.spin-page-body .nav-menu-item:hover > .more-tools-menu,
  body.spin-page-body .nav-menu-item:focus-within > .more-tools-menu {
    display: none !important;
  }

  body.spin-page-body .nav-menu-item.open > .mega-menu,
  body.spin-page-body .nav-menu-item.open > .more-tools-menu {
    display: grid !important;
  }

  body.spin-page-body .more-tools-menu {
    position: fixed !important;
    top: 76px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1120px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 96px) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 6000 !important;
  }

  body.spin-page-body .more-tools-group {
    max-height: calc(100vh - 190px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 900px) {
  body.spin-page-body .more-tools-menu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    grid-template-columns: 1fr !important;
  }
}