/* ========= MimWise Dark Theme (non-destructive) ========= */
.theme-mimwise {
  --mw-bg: #050807;            /* near-black */
  --mw-fg: #E9E4D6;            /* text */
  --mw-green: #0E3B2D;         /* primary */
  --mw-green-2: #184E3E;       /* soft green */
  --mw-gold: #D9A441;          /* accent */
  --mw-gold-2: #B8862C;        /* accent (hover) */
  --mw-card: rgba(14,59,45,0.25);
  --mw-border: rgba(24,78,62,0.55);
  --mw-muted: rgba(233,228,214,0.75);

  /* Remap your existing tokens so all components reuse gold + dark */
  --bg: var(--mw-bg);
  --ink: var(--mw-fg);
  --muted: var(--mw-muted);
  --card: var(--mw-card);
  --border: var(--mw-border);
  --accent: var(--mw-gold);
  --accent-d: var(--mw-gold-2);
  --soft: rgba(255,255,255,0.04);
  --soft-2: rgba(217,164,65,0.10);
  --cta-grad: linear-gradient(90deg, #D9A441, #0E3B2D);
}

/* Base */
.theme-mimwise,
.theme-mimwise body {
  background: var(--mw-bg) !important;
  color: var(--mw-fg) !important;
}
.theme-mimwise a { color: var(--mw-gold); }

/* Cards / panels / forms that currently assume white */
.theme-mimwise form,
.theme-mimwise .mw-card,
.theme-mimwise .picker,
.theme-mimwise .picker-panel,
.theme-mimwise .preview,
.theme-mimwise .editor-shell,
.theme-mimwise .modal-card,
.theme-mimwise .practice-bar,
.theme-mimwise .time-card,
.theme-mimwise #scaffoldText,
.theme-mimwise .ai-hl {
  background: var(--mw-card) !important;
  border: 1px solid var(--mw-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(6px);
  color: var(--mw-fg) !important;
}

/* Hero strip */
.theme-mimwise .hero,
.theme-mimwise #exNudgeHero {
  background: linear-gradient(180deg, rgba(24,78,62,.30), rgba(24,78,62,.18)) !important;
  border: 1px solid var(--mw-border) !important;
}

/* Inputs */
.theme-mimwise select,
.theme-mimwise input[type="text"],
.theme-mimwise textarea,
.theme-mimwise .picker-input,
.theme-mimwise .picker-filter {
  background: rgba(5,8,7,0.6) !important;
  color: var(--mw-fg) !important;
  border: 1px solid var(--mw-border) !important;
}
.theme-mimwise select:focus,
.theme-mimwise input:focus,
.theme-mimwise textarea:focus,
.theme-mimwise .picker-input:focus {
  border-color: var(--mw-gold) !important;
  box-shadow: 0 0 0 3px rgba(217,164,65,.25) !important;
  outline: none;
}

/* Lists + hover */
.theme-mimwise .picker-item { border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.theme-mimwise .picker-item:hover { background: rgba(217,164,65,.10) !important; }
.theme-mimwise .picker-item[aria-selected="true"] { background: rgba(217,164,65,.18) !important; }

/* Buttons */
.theme-mimwise .btn { background: var(--mw-gold) !important; color: #111 !important; border: none !important; }
.theme-mimwise .btn:hover { filter: brightness(1.03); }
.theme-mimwise .btn-ghost,
.theme-mimwise .picker-clear,
.theme-mimwise .tb-btn,
.theme-mimwise .tab-btn,
.theme-mimwise .ex-audio,
.theme-mimwise .btn-soft {
  background: transparent !important;
  color: var(--mw-fg) !important;
  border: 1px solid var(--mw-border) !important;
}
.theme-mimwise .btn-cta,
.theme-mimwise .btn-cta-mini { background: var(--cta-grad) !important; color: #111 !important; border: none !important; }
.theme-mimwise .mode-btn[aria-pressed="true"],
.theme-mimwise .tab-btn[aria-pressed="true"] {
  background: rgba(217,164,65,.16) !important;
  border-color: var(--mw-gold) !important;
}

/* Badges / chips */
.theme-mimwise .badge {
  background: rgba(217,164,65,.14) !important;
  color: var(--mw-gold) !important;
  border-color: rgba(217,164,65,.35) !important;
}

/* Editor panes */
.theme-mimwise .editor-bar { background: rgba(14,59,45,.18) !important; border-bottom: 1px solid var(--mw-border) !important; }
.theme-mimwise .pane-write textarea { background: transparent !important; color: var(--mw-fg) !important; }
/* Keep code editor dark theme for preview even in MimWise theme */
.theme-mimwise .pane-preview { background: #1e1e1e !important; border-left: 1px solid #3e3e42 !important; }
.theme-mimwise .pane-preview pre[class*="language-"] { background: #1e1e1e !important; color: #d4d4d4 !important; }

/* Modal & overlays */
.theme-mimwise .modal { background: rgba(5,8,7,.60) !important; }
.theme-mimwise .time-overlay { background: rgba(5,8,7,.55) !important; }

/* Alerts & states */
.theme-mimwise .error { color: #f87171 !important; }
.theme-mimwise .success { color: #34d399 !important; }

/* Spinner + code blocks + math */
.theme-mimwise .spinner { border-color: rgba(255,255,255,.18) !important; border-top-color: var(--mw-gold) !important; }
/* Code blocks outside preview pane keep theme styling */
.theme-mimwise pre[class*="language-"]:not(.pane-preview pre[class*="language-"]) {
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--mw-fg) !important;
}
/* Code editor preview pane overrides - always use VS Code dark theme */
.theme-mimwise .pane-preview pre[class*="language-"] {
  background: #1e1e1e !important;
  border: none !important;
  color: #d4d4d4 !important;
}
.theme-mimwise .katex,
.theme-mimwise .katex-display { color: var(--mw-fg) !important; }

/* Preview header & buttons area */
.theme-mimwise .preview-hd { border-bottom: 1px solid var(--mw-border) !important; }
.theme-mimwise .preview-bd { color: var(--mw-fg) !important; }

/* Persona tooltip */
.theme-mimwise .persona-info { background: rgba(14,59,45,.18) !important; color: var(--mw-fg) !important; border-color: var(--mw-border) !important; }
.theme-mimwise .persona-tooltip { background: rgba(14,59,45,.9) !important; color: var(--mw-fg) !important; }
.theme-mimwise .persona-tooltip::after { border-color: transparent transparent rgba(14,59,45,.9) transparent !important; }

/* Timer ring color (uses --accent already) */
.theme-mimwise #timerProg { stroke: var(--mw-gold) !important; }

/* Light-only remnants to neutralize */
.theme-mimwise .btn-amber { background: var(--mw-gold) !important; color: #111 !important; }
.theme-mimwise #schemeClear { color: var(--mw-gold) !important; background: transparent !important; border: 1px solid var(--mw-border) !important; border-radius: 8px !important; }
.theme-mimwise #schemeClear:hover { color: #fff !important; background: rgba(217,164,65,.18) !important; }

/* Focus ring unified */
.theme-mimwise :focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(217,164,65,.35), 0 0 22px rgba(217,164,65,.22) !important;
}

/* Optional: caption/notes tint */
.theme-mimwise .note { color: var(--mw-muted) !important; }

/* ==== Beta Mode: calm, minimal UI ==== */
body.beta { --beta-surface: rgba(14,59,45,0.18); }

/* Step header */
.beta-steps{display:flex;gap:.6rem;align-items:center;font-weight:600;margin:.25rem 0 .75rem;color:var(--muted)}
.beta-steps .pill{padding:.25rem .5rem;border-radius:999px;border:1px solid var(--border);background:var(--soft)}
.theme-mimwise .beta-steps .pill{background:rgba(255,255,255,.06)}

/* Hide distractions */
body.beta #openGenModalBtnTop,
body.beta #practiceBar,
body.beta #exNudgeHero, body.beta #exOverlay, body.beta #exBtn, body.beta #exMute,
body.beta .toolbar-group,
body.beta #tabSplit,
body.beta #rag-block,
body.beta #persona-tooltip, body.beta .persona-info{display:none!important}

/* Keep only Write & Preview tabs */
body.beta #editorTabs .tab-btn{padding:.35rem .65rem}
body.beta #editorTabs .tab-btn:not(#tabWrite):not(#tabPreview){display:none!important}

/* Picker polish */
body.beta .picker-panel{max-height:260px;box-shadow:none}
body.beta .picker-item{border-bottom:1px solid var(--border)}
body.beta .picker-item:hover{background:var(--soft)}
body.beta .picker-status{padding:.5rem .75rem}

/* Clear (✕) button — minimal circular */
body.beta #schemeClear{
  width:28px!important;height:28px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:50%!important;border:1px solid var(--border)!important;background:transparent!important;color:var(--muted)!important;
  font-size:14px!important;font-weight:600!important;line-height:1!important;cursor:pointer;transition:all .2s ease-in-out
}
body.beta #schemeClear:hover, body.beta #schemeClear:focus-visible{
  color:var(--mw-gold)!important;border-color:var(--mw-gold)!important;background:rgba(217,164,65,.08)!important;box-shadow:0 0 6px rgba(217,164,65,.15)
}

/* Preview + editor chrome */
body.beta .preview{background:var(--card);box-shadow:none}
body.beta .editor-shell{border-radius:12px}
body.beta .editor-bar{background:var(--soft)}
.theme-mimwise body.beta .editor-bar{background:rgba(14,59,45,.18)!important}

/* Submit row: no white box */
body.beta .submit-row{position:sticky;bottom:.25rem;background:transparent;padding-top:.25rem;z-index:10}
.theme-mimwise .submit-row .btn:focus,
.theme-mimwise .submit-row .btn:focus-visible{box-shadow:0 0 0 2px rgba(217,164,65,.35)!important;outline:none!important}

/* ===== Header: logo + title (centered, sane size) ===== */
.mw-heading{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;margin:0 0 .75rem}
.mw-heading>.mw-logo{
  width:80px!important;height:80px!important;aspect-ratio:1/1;object-fit:cover;object-position:50% 35%;
  flex-shrink:0;filter:none!important;-webkit-filter:none!important
}
.mw-title{margin:0;line-height:1.15;font-weight:800;font-size:clamp(20px,1.1vw + 18px,30px)}

/* ===== Elegant selects (modal or anywhere) ===== */
.theme-mimwise .form-select,
.theme-mimwise select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:rgba(14,59,45,.35)!important;color:var(--mw-fg)!important;border:1px solid var(--mw-border)!important;
  border-radius:10px;padding:.7rem 2.2rem .7rem .9rem;font-size:1rem;font-family:inherit;cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;box-shadow:inset 0 0 8px rgba(0,0,0,.2)
}
.theme-mimwise .form-select:focus,
.theme-mimwise select:focus{border-color:var(--mw-gold)!important;box-shadow:0 0 0 3px rgba(217,164,65,.25)!important;outline:none}
.theme-mimwise select,
.theme-mimwise .form-select{
  background-image:
    linear-gradient(45deg,transparent 50%,var(--mw-gold) 50%),
    linear-gradient(135deg,var(--mw-gold) 50%,transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 11px) calc(50% - 3px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat
}
.theme-mimwise select option{background:#0b0f0e;color:var(--mw-fg)}
.theme-mimwise select option:hover,
.theme-mimwise select option:checked{background:rgba(217,164,65,.18);color:var(--mw-fg)}
.theme-mimwise select:hover{background:rgba(14,59,45,.45)!important}

/* ===== Scheme Picker filter selects specifically ===== */
.theme-mimwise .picker .picker-filter{ /* inherits from the generic select styles above */
  border-radius:10px!important;
}

/* ===== If you keep Subject/Level as text inputs in the modal, style them too ===== */
.theme-mimwise input[type="text"].nice{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:rgba(14,59,45,.35)!important;color:var(--mw-fg)!important;border:1px solid var(--mw-border)!important;
  border-radius:10px;padding:.7rem .9rem;font-size:1rem;font-family:inherit;box-shadow:inset 0 0 8px rgba(0,0,0,.2)
}
.theme-mimwise input[type="text"].nice:focus{border-color:var(--mw-gold)!important;box-shadow:0 0 0 3px rgba(217,164,65,.25)!important;outline:none}

  /* === Fix 3: white rectangle near the Submit buttons (focus mode) === */
body.focus-mode .submit-row,
body.focus-mode .submit-row::before,
body.focus-mode .submit-row::after {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* In case the white box is coming from a ghost button/background */
.theme-mimwise .submit-row .btn-ghost {
  background: transparent !important;
  color: var(--mw-fg) !important;
  border: 1px solid var(--mw-border) !important;
}
.theme-mimwise .submit-row .btn-ghost:hover {
  background: rgba(217,164,65,.10) !important;
  border-color: var(--mw-gold) !important;
}
.theme-mimwise .submit-row .btn:focus,
.theme-mimwise .submit-row .btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(217,164,65,.35) !important;
}

/* Safety: remove any accidental white bg on the sticky row globally */
.submit-row { background: transparent !important; }

/* === Fix 4: "Generate from hint" looks dull (segmented control) === */
.modal .seg .seg-btn {
  border: 1px solid var(--mw-border) !important;
  background: transparent !important;
  color: var(--mw-fg) !important;
  border-radius: 999px !important;
  padding: .38rem .75rem !important;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.modal .seg .seg-btn:hover {
  background: rgba(217,164,65,.10) !important;
  border-color: var(--mw-gold) !important;
}
.modal .seg .seg-btn[aria-pressed="true"] {
  background: var(--mw-gold) !important;
  border-color: var(--mw-gold) !important;
  color: #111 !important;        /* crisp contrast on gold */
  font-weight: 700;
}

  /* --- Softer active state for segmented buttons ("Generate from hint") --- */
.modal .seg .seg-btn {
  border: 1px solid var(--mw-border) !important;
  background: transparent !important;
  color: var(--mw-fg) !important;
  border-radius: 999px !important;
  padding: .38rem .75rem !important;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.modal .seg .seg-btn:hover {
  background: rgba(217,164,65,.10) !important;
  border-color: var(--mw-gold) !important;
  color: var(--mw-gold) !important;
}

/* active (aria-pressed="true") = soft gold border + gentle tint */
.modal .seg .seg-btn[aria-pressed="true"] {
  background: rgba(217,164,65,.15) !important;   /* translucent gold tint */
  border-color: var(--mw-gold) !important;
  color: var(--mw-gold) !important;              /* gold text, not black */
  font-weight: 700 !important;
  box-shadow: 0 0 6px rgba(217,164,65,.25) !important; /* soft glow */
}
:root {
  --mw-bg: #02040a;
  --mw-bg-soft: #071018;
  --mw-gold: #f6d365;
  --mw-gold-soft: rgba(246, 211, 101, 0.4);
  --mw-gold-faint: rgba(246, 211, 101, 0.16);
  --mw-text-main: #fdf5ce;
  --mw-text-muted: #c1d2c5;
}

/* ===== HERO WRAPPER ===== */

.mw-hero {
  width: 100%;
  background:
    radial-gradient(circle at top left, rgba(246, 211, 101, 0.14), transparent 55%),
    radial-gradient(circle at top right, rgba(111, 231, 219, 0.1), transparent 60%),
    linear-gradient(to bottom, #02040a, #050709);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mw-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

/* ===== LOGO CARD (GLASS PANEL) ===== */

.mw-logo-card {
  position: relative;
  padding: 1.4rem 1.6rem 1.1rem;
  border-radius: 1.7rem;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 55%)
              border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  transform: translateY(0);
  animation: mw-float 9s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
}

/* Ambient glow behind logo */
.mw-logo-glow {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 30% 0%, rgba(246, 211, 101, 0.26), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(88, 255, 207, 0.18), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}

/* Decorative sparkles (golden magic) */
.mw-logo-card::before,
.mw-logo-card::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--mw-gold-soft) 0, transparent 60%);
  opacity: 0.0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: scale(0.7) translate3d(0, 0, 0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.mw-logo-card::before {
  top: -40px;
  left: -35px;
}

.mw-logo-card::after {
  bottom: -45px;
  right: -30px;
}

/* Hover: lift + golden flares */
.mw-logo-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 22px 45px rgba(0, 0, 0, 0.95),
    0 0 22px var(--mw-gold-faint);
}

.mw-logo-card:hover::before,
.mw-logo-card:hover::after {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}

/* Logo image itself */
.mw-logo-img {
  position: relative;
  width: auto;
  max-height: 120px;
  display: block;
  filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.9));
  animation: mw-logo-glow-pulse 5.5s ease-in-out infinite;
}

/* Brand text under logo */
.mw-brand-text {
  position: relative;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mw-gold);
  text-shadow:
    0 0 16px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(246, 211, 101, 0.34);
}

/* ===== HERO TEXT ===== */

.mw-hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mw-kicker {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mw-gold);
  opacity: 0.9;
}

.mw-title {
  margin: 0;
  font-size: 2.6rem;
  line-height: 1.15;
  font-weight: 800;
  color: var(--mw-text-main);
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.95);
}

.mw-subtitle {
  margin: 0;
  max-width: 28rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--mw-text-muted);
}

/* Optional CTA button style (if you use .mw-cta-btn) */
.mw-cta-btn {
  margin-top: 1.1rem;
  align-self: flex-start;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #261a01;
  background-image: linear-gradient(120deg, #f6d365, #fda085);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(246, 211, 101, 0.55);
  cursor: pointer;
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    filter 0.18s ease-out;
}

.mw-cta-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(246, 211, 101, 0.9);
  filter: brightness(1.03);
}

.mw-cta-btn:active {
  transform: translateY(0) scale(0.99);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(246, 211, 101, 0.6);
}

/* ===== ANIMATIONS ===== */

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

@keyframes mw-logo-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 6px rgba(246, 211, 101, 0.18));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(0, 0, 0, 1))
            drop-shadow(0 0 16px rgba(246, 211, 101, 0.38));
  }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {
  .mw-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.3rem 1.25rem 2.6rem;
  }

  .mw-hero-text {
    align-items: center;
  }

  .mw-subtitle {
    max-width: 32rem;
  }

  .mw-cta-btn {
    align-self: center;
  }
}

@media (max-width: 550px) {
  .mw-title {
    font-size: 2.1rem;
  }

  .mw-logo-img {
    max-height: 100px;
  }

  .mw-logo-card {
    padding: 1.1rem 1.3rem 0.9rem;
  }
}