/* ════════════════════════════════════════════════════════════════
   ORBIT tool skin v2 — modern, forceful overrides for /tools/* apps.
   Loaded AFTER the tool's Tailwind/DaisyUI so these win (with !important
   where Tailwind utilities would otherwise clobber layout).
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --o-mag: #C312EC; --o-ind: #5B1BFF; --o-vio: #8B5CF6;
  --o-bg: #05060D; --o-bg2: #0A0B16; --o-panel: #11132A; --o-panel2: #0E1020;
  --o-line: rgba(255,255,255,.09); --o-line2: rgba(255,255,255,.05);
  --o-ink: #F4F3FF; --o-ink2: #B8B5D0; --o-ink3: #847FA6;
  --o-grad: linear-gradient(98deg, var(--o-mag), var(--o-ind));
  --o-glow: 0 24px 60px -28px rgba(195,18,236,.55);
}

html, body {
  background: var(--o-bg) !important;
  color: var(--o-ink) !important;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}
body {
  background:
    radial-gradient(1200px 700px at 82% -8%, rgba(91,27,255,.18), transparent 58%),
    radial-gradient(1000px 600px at 8% 4%, rgba(195,18,236,.12), transparent 55%),
    var(--o-bg) !important;
  min-height: 100vh; margin: 0;
}

/* ════ NAV — forced horizontal bar, proper spacing ════ */
.o-tool-nav {
  position: sticky !important; top: 0; z-index: 100;
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: space-between !important;
  gap: 24px !important; padding: 16px clamp(18px, 5vw, 56px) !important;
  background: color-mix(in srgb, var(--o-bg) 78%, transparent) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--o-line) !important;
  width: 100% !important; box-sizing: border-box;
}
.o-tool-nav .brand { display: inline-flex !important; align-items: center; flex-shrink: 0; }
.o-tool-nav .brand img { height: 32px !important; width: auto !important; }
.o-tool-nav .o-tool-links {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 30px !important; flex-wrap: nowrap !important;
}
.o-tool-nav .o-tool-links a {
  color: var(--o-ink2) !important; text-decoration: none !important;
  font-size: 14.5px !important; font-weight: 500 !important; white-space: nowrap;
  transition: color .2s; letter-spacing: .01em;
}
.o-tool-nav .o-tool-links a:hover { color: #fff !important; }
.o-tool-nav .o-tool-cta {
  padding: 10px 20px !important; border-radius: 999px !important;
  background: var(--o-grad) !important; color: #fff !important; font-weight: 700 !important;
  box-shadow: var(--o-glow);
}
@media (max-width: 760px) {
  .o-tool-nav .o-tool-links { gap: 18px !important; }
  .o-tool-nav .o-tool-links a:not(.o-tool-cta) { display: none !important; }
}

/* ════ HERO — give the page top a real treatment ════ */
h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important; letter-spacing: -.02em !important;
  font-size: clamp(34px, 5vw, 56px) !important; line-height: 1.04 !important;
}
h2, h3 { font-family: 'Space Grotesk', sans-serif !important; letter-spacing: -.01em; }
.o-tool-grad, h1 span, h2 span {
  background: linear-gradient(98deg, #FF7DF2, var(--o-mag) 42%, var(--o-ind)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* ════ CARDS / PANELS — modern glass with hover lift ════ */
[class*="rounded"][class*="border"],
[class*="bg-["][class*="rounded"],
.card, .glass-card, .panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--o-panel) 80%, transparent), color-mix(in srgb, var(--o-panel2) 50%, transparent)) !important;
  border: 1px solid var(--o-line) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s !important;
}
[class*="rounded"][class*="border"]:hover, .card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--o-mag) 40%, var(--o-line)) !important;
  box-shadow: var(--o-glow) !important;
}

/* accent text/icons */
[class*="text-purple"], [class*="text-pink"], [class*="text-primary"], .accent { color: var(--o-mag) !important; }

/* buttons → brand gradient */
button[class*="bg-"], .btn-primary, .o-tool-btn, a[class*="bg-purple"], a[class*="bg-primary"] {
  background-image: var(--o-grad) !important; border: none !important; color: #fff !important;
  border-radius: 12px !important; font-weight: 700 !important;
  box-shadow: 0 14px 34px -16px rgba(195,18,236,.6);
}
button[class*="bg-"]:hover, .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* code/mono */
code, pre, .mono, [class*="font-mono"] { font-family: 'Space Mono', monospace !important; }

/* range sliders → brand */
input[type="range"] { accent-color: var(--o-mag); }
input[type="range"]::-webkit-slider-thumb { background: var(--o-mag) !important; border: 2px solid #fff2 !important; box-shadow: 0 0 16px rgba(195,18,236,.7) !important; }
input[type="range"]::-moz-range-thumb { background: var(--o-mag) !important; }

/* form controls */
input[type="text"], input[type="email"], input[type="number"], select, textarea {
  background: var(--o-panel2) !important; border: 1px solid var(--o-line) !important;
  color: var(--o-ink) !important; border-radius: 12px !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--o-mag) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(195,18,236,.18) !important; }

/* checkboxes */
input[type="checkbox"] { accent-color: var(--o-mag); }

/* ════ FOOTER ════ */
.o-tool-foot {
  margin-top: 72px !important; padding: 32px clamp(18px,5vw,56px) !important;
  border-top: 1px solid var(--o-line) !important;
  display: flex !important; flex-wrap: wrap; gap: 14px 30px;
  align-items: center; justify-content: space-between;
  color: var(--o-ink3) !important; font-size: 13px !important;
}
.o-tool-foot a { color: var(--o-ink2) !important; text-decoration: none !important; }
.o-tool-foot a:hover { color: #fff !important; }
.o-tool-foot .o-tool-foot-links { display: flex; gap: 20px; flex-wrap: wrap; }