/* ============================================================
   dua9-theme.css — Universal Tool Theme Override
   Maps every tool's CSS variables → dua9.online design system
   index.html tokens: --bg-0 #060710 / --accent #FF2D63 / --cyan #6EE7F9
   ============================================================ */

/* ── Import Geist + JetBrains Mono (dua9 font stack) ─────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');


/* ── dua9 CRITICAL INTERACTION FIXES ─────────────────────────────── */

/* BODY: push all tool content below the 60px sticky nav */
body > .wrap,
body > main,
body > .app,
body > .container,
body > div:not(.d9-header):first-of-type {
  margin-top: 0 !important;
}

/* Ensure all interactive card-style divs are always clickable */
.style-card, .model-card, .layout-card,
.cat-btn, .section-toggle, .niche-btn,
.pin-card, .style-card *, .model-card *,
[onclick]:not(a):not(button) {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Model card selected state — dark dua9 theme */
.model-card {
  background: var(--d9-bg-2, #11121E) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: border-color .15s, background .15s !important;
}
.model-card:hover {
  border-color: rgba(255,45,99,0.4) !important;
  background: rgba(255,45,99,0.05) !important;
}
.model-card.selected {
  border-color: #FF2D63 !important;
  background: rgba(255,45,99,0.12) !important;
  box-shadow: 0 0 0 1px rgba(255,45,99,0.3) !important;
}

/* Style card */
.style-card {
  cursor: pointer !important;
  pointer-events: auto !important;
  background: var(--d9-bg-1, #0A0B16) !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
  transition: border-color .15s !important;
}
.style-card:hover { border-color: rgba(255,255,255,0.20) !important; }
.style-card.selected {
  border-color: #FF2D63 !important;
  background: rgba(255,45,99,0.08) !important;
}

/* Layout card */
.layout-card {
  cursor: pointer !important;
  pointer-events: auto !important;
}
.layout-card:hover { border-color: rgba(255,255,255,0.20) !important; }
.layout-card.selected {
  border-color: #FF2D63 !important;
  background: rgba(255,45,99,0.10) !important;
}

/* Cat buttons */
.cat-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}
.cat-btn.active {
  background: #FF2D63 !important;
  border-color: #FF2D63 !important;
  color: white !important;
}

/* Tab buttons */
.tab {
  cursor: pointer !important;
  pointer-events: auto !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--d9-ink-3, #8589A0) !important;
  box-shadow: none !important;
}
.tab.active {
  color: #FF2D63 !important;
  border-bottom-color: #FF2D63 !important;
}

/* Tool-internal tab buttons (content-humanisor style) */
.tab-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
  background: var(--d9-bg-2, #11121E) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
  color: var(--d9-ink-3, #8589A0) !important;
  box-shadow: none !important;
}
.tab-btn.active {
  background: rgba(255,45,99,0.10) !important;
  border-color: rgba(255,45,99,0.35) !important;
  color: #FF6B9A !important;
}
.tab-btn:hover:not(.active) {
  background: rgba(255,255,255,0.05) !important;
  color: var(--d9-ink, #ECEDF3) !important;
}

/* Section toggle */
.section-toggle {
  cursor: pointer !important;
  pointer-events: auto !important;
  background: var(--d9-bg-3, #181A28) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 10px !important;
  color: var(--d9-ink-2, #B6B8C8) !important;
}
.section-toggle.on {
  background: rgba(255,45,99,0.08) !important;
  border-color: rgba(255,45,99,0.28) !important;
}
/* ── END CRITICAL INTERACTION FIXES ──────────────────────────────── */

/* ============================================================
   1. ROOT DESIGN TOKENS — dua9 system
   ============================================================ */
:root {
  /* Core palette */
  --d9-bg-0:      #060710;
  --d9-bg-1:      #0A0B16;
  --d9-bg-2:      #11121E;
  --d9-bg-3:      #181A28;
  --d9-bg-4:      #1E2030;
  --d9-line:      rgba(255,255,255,0.07);
  --d9-line-2:    rgba(255,255,255,0.12);
  --d9-line-3:    rgba(255,255,255,0.20);
  --d9-ink:       #ECEDF3;
  --d9-ink-2:     #B6B8C8;
  --d9-ink-3:     #8589A0;
  --d9-ink-4:     #5A5E76;
  --d9-accent:    #FF2D63;
  --d9-accent-2:  #FF6B9A;
  --d9-accent-g:  rgba(255,45,99,0.45);
  --d9-accent-dim:rgba(255,45,99,0.10);
  --d9-cyan:      #6EE7F9;
  --d9-cyan-dim:  rgba(110,231,249,0.10);
  --d9-violet:    #A78BFA;
  --d9-green:     #4ADE80;
  --d9-amber:     #FACC15;
  --d9-radius:    16px;
  --d9-radius-sm: 10px;
  --d9-radius-lg: 22px;
  --d9-font:      'Geist', ui-sans-serif, system-ui, sans-serif;
  --d9-mono:      'JetBrains Mono', ui-monospace, monospace;
  --d9-shadow:    0 8px 32px rgba(0,0,0,0.6);

  /* ── Map every tool's variables to dua9 tokens ── */

  /* content-humanisor / tool-content-generator tokens */
  --bg:       var(--d9-bg-0);
  --surface:  var(--d9-bg-2);
  --card:     var(--d9-bg-3);
  --border:   var(--d9-line-2);
  --accent:   var(--d9-accent);
  --accent2:  var(--d9-cyan);
  --accent3:  var(--d9-accent-2);
  --text:     var(--d9-ink);
  --muted:    var(--d9-ink-3);
  --glow:     var(--d9-accent-dim);
  --highlight: var(--d9-amber);

  /* squish-it tokens */
  --bg2:       var(--d9-bg-1);
  --bg3:       var(--d9-bg-2);
  --text2:     var(--d9-ink-2);
  --text3:     var(--d9-ink-3);
  --danger:    #FF6B9A;
  --warn:      var(--d9-amber);
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
  --shadow:    var(--d9-shadow);
  --font-body: var(--d9-font);
  --font-head: var(--d9-font);
  --radius:    var(--d9-radius);
  --radius-sm: var(--d9-radius-sm);

  /* pincraft-ai tokens */
  --border-light: var(--d9-line-3);
  --accent-glow:  var(--d9-accent-g);
  --gold:      var(--d9-amber);
  --text-muted: var(--d9-ink-3);
  --text-dim:  var(--d9-ink-4);
  --success:   var(--d9-green);
  --error:     #FF6B9A;
  --warning:   var(--d9-amber);
  --groq:      #FF2D63;
  --surface2:  var(--d9-bg-3);

  /* promptcraft tokens */
  --ink:         var(--d9-ink);
  --ink-2:       var(--d9-ink-2);
  --ink-3:       var(--d9-ink-3);
  --ink-4:       var(--d9-ink-4);
  --parchment:   var(--d9-bg-2);
  --parchment-2: var(--d9-bg-3);
  --parchment-3: var(--d9-bg-4);
  --amber:       var(--d9-accent);
  --amber-soft:  var(--d9-accent-2);
  --copper:      var(--d9-accent);
  --copper-soft: var(--d9-accent-2);
  --sage:        var(--d9-green);
  --sky:         var(--d9-cyan);
  --bg-raised:   var(--d9-bg-1);
  --bg-float:    var(--d9-bg-2);
  --bg-overlay:  var(--d9-bg-3);
  --border-2:    var(--d9-line-2);
  --border-3:    var(--d9-line-3);
  --glow-amber:  var(--d9-accent-dim);
  --glow-amber-strong: var(--d9-accent-g);
  --glow-copper: var(--d9-accent-dim);

  /* smart-article-generator tokens */
  --bg-p:  var(--d9-bg-1);
  --bg-s:  var(--d9-bg-2);
  --bg-t:  var(--d9-bg-0);
  --tx-p:  var(--d9-ink);
  --tx-s:  var(--d9-ink-2);
  --tx-t:  var(--d9-ink-3);
  --bd-l:  var(--d9-line);
  --bd-m:  var(--d9-line-2);
  --ac:    var(--d9-accent);
  --ac-d:  #CC1A4A;
  --ac-l:  rgba(255,45,99,0.12);
  --ok:    var(--d9-green);
  --ok-b:  rgba(74,222,128,0.08);
  --warn-b: rgba(250,204,21,0.08);
  --info:  var(--d9-cyan);
  --info-b: rgba(110,231,249,0.08);
  --err:   #FF6B9A;
  --err-b: rgba(255,107,154,0.08);
  --pink:  var(--d9-accent-2);
  --pink-b: rgba(255,107,154,0.08);
  --r-m:   var(--d9-radius-sm);
  --r-l:   var(--d9-radius);

  /* pin-intelligence (light theme) → force dark */
  --red:       var(--d9-accent);
  --red-light: var(--d9-accent-dim);
  --dark:      var(--d9-ink);
  --border-pi: var(--d9-line-2);
  --surface-pi: var(--d9-bg-2);
  --bg-pi:     var(--d9-bg-0);

  /* ultra-pin-design tokens */
  --accent-upd:  var(--d9-accent);
  --accent2-upd: var(--d9-accent-2);
  --bg-upd:      var(--d9-bg-0);
  --surface-upd: var(--d9-bg-2);
  --surface2-upd:var(--d9-bg-3);
  --text-upd:    var(--d9-ink);
  --muted-upd:   var(--d9-ink-3);
  --border-upd:  var(--d9-line);
  --border2-upd: var(--d9-line-2);
}

/* ============================================================
   2. GLOBAL RESET & BODY
   ============================================================ */
html, body {
  background: var(--d9-bg-0) !important;
  color: var(--d9-ink) !important;
  font-family: var(--d9-font) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility;
}

/* Aurora background — matches index.html exactly */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background:
    radial-gradient(60% 40% at 80% 0%, rgba(255,45,99,0.18), transparent 60%),
    radial-gradient(50% 40% at 10% 30%, rgba(110,231,249,0.10), transparent 60%),
    radial-gradient(50% 50% at 50% 100%, rgba(167,139,250,0.10), transparent 60%) !important;
  z-index: -2 !important;
  pointer-events: none !important;
  animation: d9Aurora 24s ease-in-out infinite alternate !important;
}

/* Grid overlay — matches index.html */
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

@keyframes d9Aurora {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-2%,1%,0); }
  100% { transform: translate3d(2%,-1%,0); }
}

/* ============================================================
   3. TYPOGRAPHY — Force Geist everywhere
   ============================================================ */
body, input, select, textarea, button,
.wrap, .app, main, .container, .content,
p, span, div, label, h1, h2, h3, h4 {
  font-family: var(--d9-font) !important;
}

/* Headings */
h1, h2, h3, h4, h5 {
  font-family: var(--d9-font) !important;
  letter-spacing: -0.025em;
  color: var(--d9-ink) !important;
}

/* ============================================================
   4. HIDE TOOL-SPECIFIC HEADERS (replaced by dua9 nav)
   ============================================================ */
/* content-humanisor */
body > .wrap > header,
body > header.site-header:not(.d9-header),
/* squish-it */
body > header:not(.d9-header),
/* pin-intelligence */
.site-header:not(.d9-header),
/* promptcraft */
header.site-header:not(.d9-header),
/* pincraft-ai */
header:not(.d9-header) {
  display: none !important;
}

/* ============================================================
   5. TOOL PAGE WRAPPER — push content below d9 sticky nav
   ============================================================ */
/* All common wrapper patterns */
body > .wrap,
body > .app,
body > main,
body > .container,
.tool-root {
  padding-top: 0 !important;
}

/* ============================================================
   6. CARDS & SURFACES
   ============================================================ */
/* Generic card surface */
.card,
[class*="card"]:not(.d9-footer-brand-col):not(.d9-footer-col):not(.style-card):not(.model-card):not(.layout-card):not(.scard):not(.pbox):not([class*="section-card"]):not([class*="niche-card"]):not([class*="pin-card"]) {
  background: var(--d9-bg-2) !important;
  border-color: var(--d9-line-2) !important;
  border-radius: var(--d9-radius) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}

/* Interactive click-cards must keep pointer-events and cursor */
.style-card, .model-card, .layout-card, .cat-btn,
.section-toggle, .niche-btn, .filter-btn,
[class*="style-card"], [class*="model-card"], [class*="layout-card"] {
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
}
.style-card:hover { border-color: rgba(255,255,255,0.25) !important; }
.style-card.selected { border-color: var(--d9-accent) !important; background: rgba(255,45,99,0.08) !important; }
.model-card.selected { border-color: var(--d9-accent) !important; background: rgba(255,45,99,0.10) !important; box-shadow: 0 0 0 1px rgba(255,45,99,0.3) !important; }

/* Surface / elevated panels */
.surface, .panel, .box, .section-box, .output-box,
.step, .phase, .result, .output-panel {
  background: var(--d9-bg-2) !important;
  border: 1px solid var(--d9-line-2) !important;
  border-radius: var(--d9-radius) !important;
}

/* ============================================================
   7. INPUTS, SELECTS, TEXTAREAS
   ============================================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  background: var(--d9-bg-2) !important;
  border: 1px solid var(--d9-line-2) !important;
  border-radius: var(--d9-radius-sm) !important;
  color: var(--d9-ink) !important;
  font-family: var(--d9-font) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: var(--d9-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(255,45,99,0.12) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--d9-ink-4) !important;
}

select option {
  background: var(--d9-bg-2) !important;
  color: var(--d9-ink) !important;
}

/* Range inputs */
input[type="range"] {
  background: var(--d9-line-2) !important;
  border: none !important;
  box-shadow: none !important;
}

input[type="range"]::-webkit-slider-thumb {
  background: var(--d9-accent) !important;
  border: 2px solid var(--d9-bg-0) !important;
  box-shadow: 0 0 0 1px var(--d9-accent) !important;
}

/* ============================================================
   8. BUTTONS
   ============================================================ */
/* Primary / CTA buttons */
button[class*="gen"],
button[class*="primary"],
button[class*="submit"],
button[class*="humanise"],
button[class*="compress"],
button[class*="generate"],
.btn-primary,
.gen-btn,
.btn-generate,
.submit-btn,
.humanise-btn,
.go-btn,
.run-btn {
  background: linear-gradient(135deg, var(--d9-accent), var(--d9-accent-2)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--d9-font) !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 24px -8px var(--d9-accent-g) !important;
  transition: filter 0.2s ease, transform 0.15s ease !important;
  cursor: pointer !important;
}

button[class*="gen"]:hover,
button[class*="primary"]:hover,
.gen-btn:hover,
.btn-primary:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

/* Secondary ghost buttons — only actual <button> elements, not divs */
button:not([class*="gen"]):not([class*="primary"]):not([class*="submit"]):not([class*="humanise"]):not([class*="compress"]):not([class*="run"]):not([class*="tab"]):not([class*="cat"]):not([class*="model"]):not([class*="style"]):not([class*="layout"]):not([disabled]) {
  font-family: var(--d9-font) !important;
  transition: border-color 0.18s, background 0.18s !important;
}

/* ============================================================
   9. LABELS / SECTION HEADINGS
   ============================================================ */
label,
.lbl,
.field-label,
.form-label,
.option-label {
  color: var(--d9-ink-3) !important;
  font-family: var(--d9-font) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   10. TOOL-SPECIFIC FIXES
   ============================================================ */

/* ── smart-article-generator: sidebar layout ── */
.app {
  background: var(--d9-bg-0) !important;
}
.sidebar {
  background: var(--d9-bg-1) !important;
  border-right: 1px solid var(--d9-line) !important;
}
.main {
  background: var(--d9-bg-0) !important;
}
/* Active provider tab */
.ptab.on {
  background: var(--d9-accent) !important;
  border-color: var(--d9-accent) !important;
  color: #fff !important;
}
.ptab {
  border-color: var(--d9-line-2) !important;
  background: transparent !important;
  color: var(--d9-ink-3) !important;
  border-radius: var(--d9-radius-sm) !important;
}
/* Notice boxes */
.notice {
  border-radius: var(--d9-radius-sm) !important;
}
.n-claude  { background: rgba(255,45,99,0.08) !important; border-color: rgba(255,45,99,0.2) !important; color: var(--d9-accent-2) !important; }
.n-groq    { background: rgba(74,222,128,0.07) !important; border-color: rgba(74,222,128,0.2) !important; color: var(--d9-green) !important; }
.n-openai  { background: rgba(250,204,21,0.07) !important; border-color: rgba(250,204,21,0.2) !important; color: var(--d9-amber) !important; }
.n-openrouter { background: rgba(110,231,249,0.07) !important; border-color: rgba(110,231,249,0.2) !important; color: var(--d9-cyan) !important; }
/* Generate button */
.gen-btn {
  padding: 11px 16px !important;
  border-radius: var(--d9-radius-sm) !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
}
/* Output area */
.output-wrap, .prose-out, .output {
  background: var(--d9-bg-1) !important;
  border: 1px solid var(--d9-line) !important;
  color: var(--d9-ink-2) !important;
  font-family: var(--d9-font) !important;
}
.toolbar, .topbar {
  background: var(--d9-bg-1) !important;
  border-bottom: 1px solid var(--d9-line) !important;
}

/* ── content-humanisor specific ── */
.wrap { position: relative; z-index: 1; }
.logo-text { color: var(--d9-ink) !important; }
.api-card { background: var(--d9-bg-2) !important; border-color: var(--d9-line-2) !important; border-radius: var(--d9-radius) !important; }
.api-logo.claude { background: linear-gradient(135deg, var(--d9-accent), var(--d9-accent-2)) !important; }
.api-logo.openai { background: linear-gradient(135deg, var(--d9-cyan), #3a8fbf) !important; }
.tab { background: transparent !important; color: var(--d9-ink-3) !important; }
.tab.active { background: var(--d9-bg-3) !important; color: var(--d9-ink) !important; border-color: var(--d9-line-2) !important; }
.badge, .pill, .tag { border-radius: 999px !important; }
.sec-btn.humanise { background: rgba(255,45,99,0.08) !important; color: var(--d9-accent-2) !important; border-color: rgba(255,45,99,0.25) !important; }
.sec-btn.humanise:hover { background: rgba(255,45,99,0.15) !important; }
/* Output sections */
.out-box, .output-section, .section-content { background: var(--d9-bg-1) !important; border-color: var(--d9-line) !important; color: var(--d9-ink-2) !important; }

/* ── promptcraft-ai specific ── */
[data-theme="light"] body,
[data-theme="light"] {
  background: var(--d9-bg-0) !important;
  color: var(--d9-ink) !important;
}
.hero { background: transparent !important; }
.hero-title, .hero h1 { color: var(--d9-ink) !important; }
.api-badge { border-radius: 999px !important; }
.api-badge.active { border-color: rgba(74,222,128,0.3) !important; color: var(--d9-green) !important; }
.niche-btn { background: var(--d9-bg-2) !important; border-color: var(--d9-line-2) !important; color: var(--d9-ink-2) !important; border-radius: var(--d9-radius-sm) !important; }
.niche-btn.active, .niche-btn:hover { background: var(--d9-bg-3) !important; border-color: var(--d9-accent) !important; color: var(--d9-ink) !important; }
.prompt-output, .result-box { background: var(--d9-bg-2) !important; border-color: var(--d9-line-2) !important; color: var(--d9-ink-2) !important; border-radius: var(--d9-radius) !important; }
.model-btn { background: var(--d9-bg-2) !important; border-color: var(--d9-line-2) !important; color: var(--d9-ink-2) !important; border-radius: var(--d9-radius-sm) !important; }
.model-btn.active { border-color: var(--d9-accent) !important; color: var(--d9-accent-2) !important; background: var(--d9-accent-dim) !important; }

/* ── pincraft-ai specific ── */
.hero-tag { background: var(--d9-accent-dim) !important; border-color: rgba(255,45,99,0.2) !important; color: var(--d9-accent-2) !important; }
.logo-badge { background: var(--d9-accent-dim) !important; border-color: rgba(255,45,99,0.25) !important; color: var(--d9-accent-2) !important; }
.btn-groq, .btn-primary-pin {
  background: linear-gradient(135deg, var(--d9-accent), var(--d9-accent-2)) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px -8px var(--d9-accent-g) !important;
}
.ci.red { background: var(--d9-accent-dim) !important; border-color: rgba(255,45,99,0.2) !important; }
.ci.purple { background: rgba(167,139,250,0.1) !important; border-color: rgba(167,139,250,0.2) !important; }
.ci.gold { background: rgba(250,204,21,0.08) !important; border-color: rgba(250,204,21,0.2) !important; }
.ci.teal { background: rgba(110,231,249,0.08) !important; border-color: rgba(110,231,249,0.2) !important; }
.ci.groq { background: var(--d9-accent-dim) !important; border-color: rgba(255,45,99,0.2) !important; }
.card-step { background: var(--d9-bg-4) !important; border-color: var(--d9-line-2) !important; color: var(--d9-ink-3) !important; border-radius: 999px !important; }
.style-tag, .preset-tag { background: var(--d9-accent-dim) !important; color: var(--d9-accent-2) !important; border-radius: 999px !important; }
.canvas-wrap, .pin-preview { border-color: var(--d9-line-2) !important; background: var(--d9-bg-1) !important; border-radius: var(--d9-radius) !important; }
.saved-section { background: var(--d9-bg-1) !important; border-color: var(--d9-line) !important; }

/* ── squish-it specific ── */
.hero h1, .site-title { color: var(--d9-ink) !important; }
.hero .badge { background: var(--d9-accent-dim) !important; color: var(--d9-accent-2) !important; border-radius: 999px !important; }
.drop-zone {
  background: var(--d9-bg-1) !important;
  border: 2px dashed var(--d9-line-2) !important;
  border-radius: var(--d9-radius) !important;
  transition: border-color 0.2s !important;
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--d9-accent) !important;
  background: var(--d9-accent-dim) !important;
}
.stats-bar, .summary-bar { background: var(--d9-bg-2) !important; border-color: var(--d9-line-2) !important; border-radius: var(--d9-radius) !important; }
.file-row, .file-item { background: var(--d9-bg-2) !important; border-color: var(--d9-line) !important; border-radius: var(--d9-radius-sm) !important; }
.file-row:hover { border-color: var(--d9-line-2) !important; }
.size-bar-fill { background: linear-gradient(90deg, var(--d9-accent), var(--d9-cyan)) !important; }
.btn-compress, .btn-download-all {
  background: linear-gradient(135deg, var(--d9-accent), var(--d9-accent-2)) !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 24px -8px var(--d9-accent-g) !important;
}
.format-btn { background: var(--d9-bg-3) !important; border-color: var(--d9-line-2) !important; color: var(--d9-ink-2) !important; border-radius: var(--d9-radius-sm) !important; }
.format-btn.active { background: var(--d9-accent-dim) !important; border-color: var(--d9-accent) !important; color: var(--d9-accent-2) !important; }
.setting-group { background: var(--d9-bg-2) !important; border-color: var(--d9-line-2) !important; border-radius: var(--d9-radius) !important; }

/* ── ultra-pin-design specific ── */
body.ultra-pin {
  padding-top: 0 !important;
}
.ultra-pin .wrap { max-width: 760px !important; }
.ultra-pin .card {
  background: var(--d9-bg-2) !important;
  border: 1px solid var(--d9-line-2) !important;
  border-radius: var(--d9-radius) !important;
  padding: 24px !important;
}
.ultra-pin .cat-btn {
  background: var(--d9-bg-2) !important;
  border: 1px solid var(--d9-line-2) !important;
  color: var(--d9-ink-3) !important;
  border-radius: 999px !important;
}
.ultra-pin .cat-btn.active {
  background: var(--d9-accent) !important;
  border-color: var(--d9-accent) !important;
  color: #fff !important;
}
.ultra-pin .style-card {
  background: var(--d9-bg-2) !important;
  border-color: var(--d9-line) !important;
  border-radius: var(--d9-radius-sm) !important;
}
.ultra-pin .style-card.selected {
  border-color: var(--d9-accent) !important;
  background: var(--d9-accent-dim) !important;
}
.ultra-pin .note-bar {
  background: rgba(250,204,21,0.08) !important;
  border-color: rgba(250,204,21,0.2) !important;
  color: var(--d9-amber) !important;
  border-radius: var(--d9-radius-sm) !important;
}
.ultra-pin .style-preview {
  background: var(--d9-bg-1) !important;
  border-color: var(--d9-line-2) !important;
  border-radius: var(--d9-radius-sm) !important;
}

/* ── pin-intelligence specific ── */
/* Force dark for the light-only pin-intelligence */
body.pin-int {
  background: var(--d9-bg-0) !important;
  color: var(--d9-ink) !important;
}
.pin-int .content { background: transparent !important; }
.pin-int .api-banner {
  background: var(--d9-bg-2) !important;
  border: 1px solid var(--d9-line-2) !important;
  border-radius: var(--d9-radius) !important;
  color: var(--d9-ink-2) !important;
}
.pin-int .api-banner-text { color: var(--d9-ink-2) !important; }
.pin-int .api-banner-text strong { color: var(--d9-ink) !important; }
.pin-int .api-key-input {
  background: var(--d9-bg-1) !important;
  border-color: var(--d9-line-2) !important;
  color: var(--d9-ink) !important;
  border-radius: var(--d9-radius-sm) !important;
}
.pin-int .niche-btn, .pin-int .filter-btn {
  background: var(--d9-bg-2) !important;
  border: 1px solid var(--d9-line-2) !important;
  color: var(--d9-ink-2) !important;
  border-radius: 999px !important;
}
.pin-int .niche-btn.active, .pin-int .filter-btn.active {
  background: var(--d9-accent) !important;
  border-color: var(--d9-accent) !important;
  color: #fff !important;
}
.pin-int .pin-card {
  background: var(--d9-bg-2) !important;
  border-color: var(--d9-line-2) !important;
  border-radius: var(--d9-radius) !important;
  color: var(--d9-ink-2) !important;
}
.pin-int .pin-card:hover { border-color: var(--d9-line-3) !important; }
.pin-int .tag, .pin-int .badge { background: var(--d9-accent-dim) !important; color: var(--d9-accent-2) !important; border-radius: 999px !important; }
.pin-int .stat-label { color: var(--d9-ink-3) !important; }
.pin-int .stat-value { color: var(--d9-ink) !important; }
.pin-int .section-title { color: var(--d9-ink) !important; border-color: var(--d9-line) !important; }
.pin-int .logo-circle { background: var(--d9-accent) !important; }
.pin-int .site-title { color: var(--d9-ink) !important; }
/* Override the light bg */
.pin-int * { border-color: inherit; }

/* ============================================================
   11. SCROLLBARS — dark themed
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--d9-bg-1); }
::-webkit-scrollbar-thumb { background: var(--d9-bg-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--d9-ink-4); }

/* ============================================================
   12. LINKS
   ============================================================ */
a { color: var(--d9-ink-2); transition: color 0.15s; }
a:hover { color: var(--d9-accent-2); }

/* ============================================================
   13. SELECTION
   ============================================================ */
::selection { background: var(--d9-accent); color: #fff; }

/* ============================================================
   14. TOOL HERO SECTION
   ============================================================ */
/* Unified tool page hero / title area */
.tool-hero, .page-hero-inner, .hero-inner, .hero-content {
  text-align: center;
}
.tool-hero h1, .hero h1, .page-h1 {
  font-family: var(--d9-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  color: var(--d9-ink) !important;
}

/* ============================================================
   15. TOASTS / ALERTS
   ============================================================ */
.toast, .alert, .flash {
  border-radius: var(--d9-radius-sm) !important;
  font-family: var(--d9-font) !important;
}
.toast-success, .alert-success { background: rgba(74,222,128,0.10) !important; border-color: rgba(74,222,128,0.25) !important; color: var(--d9-green) !important; }
.toast-error, .alert-error { background: rgba(255,45,99,0.10) !important; border-color: rgba(255,45,99,0.25) !important; color: var(--d9-accent-2) !important; }

/* ============================================================
   16. PROGRESS / LOADING STATES
   ============================================================ */
.progress-bar, .loading-bar { background: linear-gradient(90deg, var(--d9-accent), var(--d9-cyan)) !important; }
.spinner, .loader { border-top-color: var(--d9-accent) !important; }

/* ============================================================
   17. RESPONSIVE — ensure tools don't break on mobile
   ============================================================ */
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr !important; height: auto !important; }
  .sidebar { height: auto !important; max-height: 50vh; overflow-y: auto; }
}

/* ============================================================
   18. FORCE HIDE ALL TOOL-INTERNAL HEADERS
   ============================================================ */
header:not(.d9-header),
.site-header:not(.d9-header) {
  display: none !important;
}
/* Never hide the dua9 header */
header.d9-header,
.d9-header {
  display: block !important;
}

/* ============================================================
   19. TOOL PAGE TOP SPACING
   Ensures content starts below the 60px dua9 sticky nav
   ============================================================ */

/* squish-it wraps content in .container inside header+main */
body > main:first-of-type,
body > .container:first-of-type,
body > .wrap:first-of-type {
  padding-top: 12px !important;
}

/* For tools that use full-height grid layout (smart-article-generator) */
body > .app {
  height: calc(100vh - 60px) !important;
  margin-top: 0 !important;
}

/* ============================================================
   20. SQUISH-IT HERO — remove excessive top padding
   ============================================================ */
.hero {
  padding-top: 40px !important;
}

/* ============================================================
   21. ACCENT COLOR CONSISTENCY — any remaining purple/teal accents
   ============================================================ */
/* SVG strokes and fills */
svg [stroke="#7c5cfc"], svg [stroke="#e60023"], svg [stroke="#4fffb0"] {
  stroke: #FF2D63 !important;
}
svg [fill="#7c5cfc"], svg [fill="#e60023"], svg [fill="#4fffb0"] {
  fill: #FF2D63 !important;
}

/* Gradient text hits */
.gradient-accent,
[class*="gradient"] {
  background: linear-gradient(135deg, #FF2D63, #FF6B9A) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   22. COPY BUTTON / ACTION BUTTON CONSISTENCY
   ============================================================ */
.copy-btn, .action-btn, .icon-btn, [class*="copy"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #B6B8C8 !important;
  border-radius: 8px !important;
  font-family: 'Geist', sans-serif !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.copy-btn:hover, .action-btn:hover {
  border-color: rgba(255,45,99,0.4) !important;
  color: #FF6B9A !important;
}

/* ============================================================
   23. STATUS BADGES — live / beta / new
   ============================================================ */
.badge-live, [class*="live-badge"] { color: #4ADE80 !important; }
.badge-beta, [class*="beta-badge"] { color: #FACC15 !important; }
.badge-new,  [class*="new-badge"]  { color: #FF2D63 !important; }

/* ============================================================
   24. CODE / MONO BLOCKS
   ============================================================ */
code, pre, .mono, [class*="code"] {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: #FF6B9A !important;
}