/* ═══════════════════════════════════════════════════════════════════════════════
   CLAW.CSS  ·  "VOID" dark-tech redesign
   Converted from claw.scss — all variables, mixins, and nesting expanded.

   Color palette (for reference):
   bg-00 #03030a  bg-01 #07071a  bg-02 #0c0c22  bg-03 #11112e  bg-04 #18183a
   blue  #1d4ed8  blue-1 #3b82f6  blue-2 #60a5fa
   violet #6d28d9  violet-1 #8b5cf6
   rose  #be123c  rose-1 #f43f5e  rose-2 #fb7185
   green #047857  green-1 #10b981  green-2 #34d399
   amber #b45309  amber-1 #f59e0b  amber-2 #fcd34d
   cyan-1 #06b6d4
   tx-0 #f0f0ff  tx-1 #c4c4e0  tx-2 #8080a0  tx-3 #404060  tx-4 #22223a
   bd-0 #12122e  bd-1 #1a1a3a  bd-2 #26264a  bd-3 #34346a
   t 0.15s  ease cubic-bezier(0.4,0,0.2,1)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 3. DAISY UI TOKEN OVERRIDES ─────────────────────────────────────────────── */
:root {
  --color-primary:           #1d4ed8;
  --color-primary-content:   #f0f0ff;
  --color-secondary:         #6d28d9;
  --color-secondary-content: #f0f0ff;
  --color-accent:            #f43f5e;
  --color-accent-content:    #f0f0ff;
  --color-neutral:           #18183a;
  --color-neutral-content:   #f0f0ff;
  --color-base-100:          #07071a;
  --color-base-200:          #0c0c22;
  --color-base-300:          #11112e;
  --color-base-content:      #c4c4e0;
  --color-info:              #3b82f6;
  --color-info-content:      #f0f0ff;
  --color-success:           #10b981;
  --color-success-content:   #f0f0ff;
  --color-warning:           #f59e0b;
  --color-warning-content:   #1a0a00;
  --color-error:             #f43f5e;
  --color-error-content:     #f0f0ff;
  --radius-box:      4px;
  --radius-field:    4px;
  --radius-selector: 4px;
  --border:          1px;
  --depth:           0;
  --noise:           0;
}

/* ── 4. BASE RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

*, ::after, ::before, ::backdrop, ::file-selector-button {
  border-color: #1a1a3a !important;
}

html { scroll-behavior: smooth; color-scheme: dark; }

body {
  background-color: #03030a !important;
  color: #c4c4e0 !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Syne', system-ui, sans-serif !important; }

/* ── 5. ATMOSPHERIC OVERLAY ──────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 140% 100% at 50% -20%, rgba(29,78,216,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,20,0.025) 3px, rgba(0,0,20,0.025) 4px);
  pointer-events: none;
  z-index: 9999;
}

/* ── 6. SCROLLBAR ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #07071a; }
::-webkit-scrollbar-thumb { background: #26264a; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

/* ── 7. SELECTION ────────────────────────────────────────────────────────────── */
::selection { background: rgba(29,78,216,0.38); color: #f0f0ff; }

/* ── 8. TYPOGRAPHY ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: #f0f0ff !important;
  font-family: 'Syne', system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
p { color: #c4c4e0; line-height: 1.7; }
strong, b { color: #f0f0ff; }

code, pre, kbd, samp {
  font-family: 'Fira Code', 'Cascadia Code', ui-monospace, monospace !important;
  background: #11112e;
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.875em;
  color: #06b6d4;
  font-variant-ligatures: contextual;
}
pre { padding: 1.25rem; overflow-x: auto; border: 1px solid #1a1a3a; }
pre code { background: none; padding: 0; }
ul, ol { color: #c4c4e0; }
li { line-height: 1.75; }

/* ── 9. LINKS ────────────────────────────────────────────────────────────────── */
a { color: #3b82f6 !important; transition: color 0.15s cubic-bezier(0.4,0,0.2,1); }
a:hover { color: #60a5fa !important; }

.link, .link-hover {
  color: #3b82f6 !important;
  text-decoration-color: rgba(59,130,246,0.35) !important;
  transition: color 0.15s cubic-bezier(0.4,0,0.2,1), text-decoration-color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.link:hover, .link-hover:hover {
  color: #60a5fa !important;
  text-decoration-color: #3b82f6 !important;
}

/* ── 10. TAILWIND GRAY CLASS OVERRIDES ───────────────────────────────────────── */
.text-gray-50,
.text-gray-100  { color: #f0f0ff !important; }
.text-gray-200  { color: #26264a !important; }
.text-gray-300  { color: #34346a !important; }
.text-gray-400  { color: #404060 !important; }
.text-gray-500,
.text-gray-600,
.text-gray-700  { color: #8080a0 !important; }
.text-gray-800  { color: #404060 !important; }
.text-gray-900  { color: #22223a !important; }

.border-gray-200 { border-color: #1a1a3a !important; }
.border-gray-300 { border-color: #26264a !important; }
.border-gray-400 { border-color: #34346a !important; }

.bg-white, .bg-gray-50, .bg-gray-100 { background: #0c0c22 !important; }
.bg-gray-200 { background: #11112e !important; }

.text-red-500, .text-red-600, .text-red-700 { color: #fb7185 !important; }
.text-green-500, .text-green-600 { color: #10b981 !important; }

/* ── 11. SHADOW OVERRIDES ────────────────────────────────────────────────────── */
.shadow-sm  { box-shadow: 0 1px 6px  rgba(0,0,0,0.50) !important; }
.shadow     { box-shadow: 0 2px 12px rgba(0,0,0,0.55) !important; }
.shadow-md  { box-shadow: 0 4px 20px rgba(0,0,0,0.55) !important; }
.shadow-lg  { box-shadow: 0 8px 32px rgba(0,0,0,0.60) !important; }
.shadow-xl  { box-shadow: 0 12px 48px rgba(0,0,0,0.65) !important; }
.shadow-2xl { box-shadow: 0 24px 80px rgba(0,0,0,0.70) !important; }

/* ── 12. NAVBAR ──────────────────────────────────────────────────────────────── */
.navbar {
  background: rgba(7,7,26,0.9) !important;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid #1a1a3a !important;
  position: sticky !important;
  top: 0;
  z-index: 50;
  padding-inline: 1.5rem;
}
.navbar .btn-ghost {
  color: #f0f0ff !important;
  border-radius: 4px;
  transition: background 0.15s cubic-bezier(0.4,0,0.2,1), color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.navbar .btn-ghost:hover {
  background: rgba(29,78,216,0.1) !important;
  color: #60a5fa !important;
}
.navbar .menu { gap: 2px; }
.navbar .menu a {
  color: #8080a0 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  transition: background 0.15s cubic-bezier(0.4,0,0.2,1), color 0.15s cubic-bezier(0.4,0,0.2,1);
  text-shadow: none !important;
}
.navbar .menu a:hover {
  color: #f0f0ff !important;
  background: rgba(29,78,216,0.12) !important;
}
.navbar .btn-circle {
  color: #8080a0 !important;
  transition: background 0.15s cubic-bezier(0.4,0,0.2,1), color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.navbar .btn-circle:hover {
  background: rgba(29,78,216,0.1) !important;
  color: #f0f0ff !important;
}

/* ── 13. DROPDOWN MENUS ──────────────────────────────────────────────────────── */
.dropdown-content {
  background: #0c0c22;
  border: 1px solid #26264a !important;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7) !important;
}
.dropdown-content.menu { gap: 2px; }
.dropdown-content.menu li > a {
  color: #8080a0 !important;
  font-size: 0.875rem;
  border-radius: 4px;
  transition: background 0.15s cubic-bezier(0.4,0,0.2,1), color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.dropdown-content.menu li > a:hover {
  background: rgba(29,78,216,0.1) !important;
  color: #f0f0ff !important;
}

/* ── 14. HERO SECTION ────────────────────────────────────────────────────────── */
.hero-home { background: #03030a; position: relative; }

.hero-home .hero {
  position: relative !important;
  overflow: hidden;
  min-height: 60vh;
}
.hero-home .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% -5%,  rgba(29,78,216,0.26) 0%, transparent 60%),
    radial-gradient(ellipse  60% 50% at 85% 70%,  rgba(109,40,217,0.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(3,3,10,0.70) 0%, rgba(3,3,10,0.55) 50%, rgba(3,3,10,0.85) 100%);
  z-index: 0;
  pointer-events: none;
}
.hero-home .hero .hero-content {
  position: relative;
  z-index: 1;
}
.hero-home .hero .hero-content div[style*='line-height'] {
  background: linear-gradient(140deg, #f0f0ff, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: headline-shimmer 8s ease infinite alternate;
}
.hero-home .hero .hero-content div[class*='mt-'] { color: #8080a0 !important; }

.hero-home .py-8 { background: #03030a; }

.hero-home .max-w-5xl { color: #8080a0 !important; }
.hero-home .max-w-5xl strong,
.hero-home .max-w-5xl b   { color: #f0f0ff !important; }
.hero-home .max-w-5xl a.underline {
  color: #3b82f6 !important;
  text-decoration-color: rgba(29,78,216,0.4) !important;
}
.hero-home .max-w-5xl a.underline:hover {
  color: #60a5fa !important;
  text-decoration-color: #3b82f6 !important;
}

@keyframes headline-shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ── 15. FEATURE CARDS ───────────────────────────────────────────────────────── */
.card {
  background: #0c0c22 !important;
  border: 1px solid #1a1a3a !important;
  border-radius: 6px !important;
  transition: border-color 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1), transform 0.15s cubic-bezier(0.4,0,0.2,1);
}
.card.bg-white { background: #11112e !important; }
.card:hover {
  border-color: rgba(59,130,246,0.45) !important;
  box-shadow: 0 0 0 1px rgba(29,78,216,0.2), 0 0 20px rgba(29,78,216,0.14), 0 0 60px rgba(29,78,216,0.042);
  transform: translateY(-3px);
}
.card.card-bordered         { border: 1px solid #26264a !important; }
.card.card-bordered.border-primary  { border-color: rgba(29,78,216,0.6) !important; }
.card.card-bordered.border-gray-200 { border-color: #1a1a3a !important; }
.card .card-title { color: #f0f0ff !important; font-weight: 700; }
.card .card-body  { color: #c4c4e0 !important; }

.card svg path[stroke],
.card svg circle[stroke],
.card svg rect[stroke] { stroke: #3b82f6 !important; }
.card svg path[fill='#1C274C'] { fill: #3b82f6 !important; }

/* ── 16. PRICING CARDS ───────────────────────────────────────────────────────── */
.text-4xl.font-bold { color: #f0f0ff !important; }
.list-disc li { color: #c4c4e0 !important; }
.text-sm.text-gray-600,
.text-sm.text-gray-500 { color: #8080a0 !important; }
a[href='/account'][style] {
  color: #3b82f6 !important;
  background: transparent !important;
  border-color: #26264a !important;
}
a[href='/account'][style]:hover {
  background: rgba(29,78,216,0.08) !important;
  border-color: #3b82f6 !important;
}

/* ── 17. BUTTONS ─────────────────────────────────────────────────────────────── */
.btn {
  font-family: 'Syne', system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px !important;
  transition: background 0.15s cubic-bezier(0.4,0,0.2,1), border-color 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1), transform 0.15s cubic-bezier(0.4,0,0.2,1), color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.btn:active { transform: scale(0.97); }

.btn.btn-primary {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #f0f0ff !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 1px rgba(29,78,216,0.2), 0 0 20px rgba(29,78,216,0.15), 0 0 60px rgba(29,78,216,0.045);
}

.btn.btn-secondary {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #f0f0ff !important;
}
.btn.btn-secondary:hover {
  background: #8b5cf6 !important;
  box-shadow: 0 0 0 1px rgba(109,40,217,0.2), 0 0 20px rgba(109,40,217,0.15), 0 0 60px rgba(109,40,217,0.045);
}

.btn.btn-outline { background: transparent !important; }

.btn.btn-outline.btn-primary {
  border-color: rgba(59,130,246,0.5) !important;
  color: #3b82f6 !important;
}
.btn.btn-outline.btn-primary:hover {
  background: rgba(29,78,216,0.12) !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
  box-shadow: 0 0 0 1px rgba(29,78,216,0.2), 0 0 20px rgba(29,78,216,0.09), 0 0 60px rgba(29,78,216,0.027);
}

.btn.btn-outline.btn-success {
  border-color: rgba(16,185,129,0.5) !important;
  color: #10b981 !important;
}
.btn.btn-outline.btn-success:hover {
  background: rgba(4,120,87,0.12) !important;
  border-color: #10b981 !important;
  color: #34d399 !important;
}

.btn.btn-outline.btn-error {
  border-color: rgba(244,63,94,0.5) !important;
  color: #f43f5e !important;
}
.btn.btn-outline.btn-error:hover {
  background: rgba(190,18,60,0.12) !important;
  border-color: #f43f5e !important;
  color: #fb7185 !important;
}

.btn.btn-outline:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-error) {
  border-color: #26264a !important;
  color: #8080a0 !important;
}
.btn.btn-outline:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-error):hover {
  background: rgba(29,78,216,0.08) !important;
  border-color: #3b82f6 !important;
  color: #f0f0ff !important;
}

.btn.btn-ghost { background: transparent !important; color: #8080a0 !important; }
.btn.btn-ghost:hover { background: rgba(240,240,255,0.05) !important; color: #f0f0ff !important; }

.btn.btn-xs   { font-size: 0.7rem; letter-spacing: 0.05em; }
.btn.btn-sm   { font-size: 0.8rem; }
.btn.btn-wide { min-width: 200px; }
.btn.rounded-full { border-radius: 999px !important; }
.btn:disabled, .btn.btn-disabled { opacity: 0.35 !important; cursor: not-allowed; }

.loading { color: #8080a0 !important; }

/* ── 18. FORM FIELDS ─────────────────────────────────────────────────────────── */
.input, .textarea, .select, .file-input {
  background: #07071a !important;
  border: 1px solid #26264a !important;
  color: #f0f0ff !important;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  transition: border-color 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
}
.input:focus, .input:focus-within,
.textarea:focus, .textarea:focus-within,
.select:focus, .select:focus-within,
.file-input:focus, .file-input:focus-within {
  border-color: #3b82f6 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(29,78,216,0.2) !important;
}
.input::placeholder, .textarea::placeholder, .select::placeholder { color: #404060 !important; }
.input.input-error, .input[aria-invalid='true'],
.textarea.input-error, .textarea[aria-invalid='true'] {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 3px rgba(190,18,60,0.18) !important;
}

.input-bordered, .textarea-bordered { border-color: #26264a !important; }
.input-sm  { height: 2rem; font-size: 0.875rem; }
.input-lg  { height: 3.25rem; font-size: 1.05rem; }

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']):not([type='button']),
textarea,
select {
  background: #07071a !important;
  border: 1px solid #26264a !important;
  color: #f0f0ff !important;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  transition: border-color 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
  width: 100%;
}
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']):not([type='button']):focus,
textarea:focus,
select:focus {
  border-color: #3b82f6 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(29,78,216,0.2) !important;
}
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']):not([type='button'])::placeholder,
textarea::placeholder { color: #404060 !important; }

input[type='checkbox'],
input[type='radio']   { accent-color: #3b82f6 !important; }
input[type='range']   { accent-color: #3b82f6; }

label {
  color: #8080a0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
label > span.text-sm,
label > div.text-base.font-bold { color: #c4c4e0 !important; }
label > span.text-gray-500      { color: #8080a0 !important; }

p.text-red-700,
p.text-red-600,
.text-red-600 { color: #fb7185 !important; font-size: 0.8rem; }

/* ── 19. SETTINGS MODULE ─────────────────────────────────────────────────────── */
.form-widget { gap: 2px; }
.form-widget .text-lg.mb-3 {
  color: #f0f0ff !important;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.35rem 0;
  border-bottom: 1px solid #1a1a3a;
  margin-bottom: 0.75rem !important;
}
.form-widget .text-xl.font-bold { color: #f0f0ff !important; }

.card.p-6.pb-7 {
  background: #0c0c22 !important;
  border-color: #1a1a3a !important;
}
.card.p-6.pb-7:hover {
  border-color: #26264a !important;
  transform: none;
  box-shadow: none !important;
}

/* ── 20. ALERTS / BANNERS ────────────────────────────────────────────────────── */
.alert {
  background: #11112e !important;
  border: 1px solid #26264a !important;
  border-radius: 6px !important;
  color: #c4c4e0 !important;
}
.alert svg { flex-shrink: 0; }
.alert.alert-info    { border-left: 3px solid #3b82f6 !important; background: rgba(29,78,216,0.08) !important; color: #60a5fa !important; }
.alert.alert-success { border-left: 3px solid #10b981 !important; background: rgba(4,120,87,0.08)   !important; color: #34d399 !important; }
.alert.alert-warning { border-left: 3px solid #f59e0b !important; background: rgba(180,83,9,0.08)  !important; color: #fcd34d !important; }
.alert.alert-error   { border-left: 3px solid #f43f5e !important; background: rgba(190,18,60,0.08)  !important; color: #fb7185 !important; }

/* ── 21. BADGES ──────────────────────────────────────────────────────────────── */
.badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 3px; }
.badge.badge-primary { background: rgba(29,78,216,0.18) !important; color: #60a5fa !important; border-color: rgba(29,78,216,0.35) !important; }
.badge.badge-success { background: rgba(4,120,87,0.18)  !important; color: #34d399 !important; border-color: rgba(4,120,87,0.35)  !important; }
.badge.badge-error   { background: rgba(190,18,60,0.18) !important; color: #fb7185 !important; border-color: rgba(190,18,60,0.35) !important; }

/* ── 22. ADMIN SIDEBAR / DRAWER ──────────────────────────────────────────────── */
.drawer-side .menu {
  background: #07071a !important;
  border-right: 1px solid #1a1a3a !important;
  padding-top: 1.5rem;
  gap: 2px;
}
.drawer-side .menu .menu-title,
.drawer-side .menu li > div.normal-case { color: #f0f0ff !important; }

.drawer-side .menu li > a {
  color: #8080a0 !important;
  font-size: 0.84rem;
  font-weight: 500;
  border-radius: 4px;
  gap: 0.6rem;
  transition: background 0.15s cubic-bezier(0.4,0,0.2,1), color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.drawer-side .menu li > a svg {
  opacity: 0.5;
  transition: opacity 0.15s cubic-bezier(0.4,0,0.2,1);
  color: #8080a0 !important;
  stroke: currentColor !important;
}
.drawer-side .menu li > a svg path,
.drawer-side .menu li > a svg circle,
.drawer-side .menu li > a svg rect { stroke: currentColor !important; }

.drawer-side .menu li > a:hover { background: rgba(29,78,216,0.1) !important; color: #f0f0ff !important; }
.drawer-side .menu li > a:hover svg { opacity: 0.9; color: #3b82f6 !important; }

.drawer-side .menu li > a.active { background: rgba(29,78,216,0.15) !important; color: #60a5fa !important; }
.drawer-side .menu li > a.active svg { opacity: 1; color: #60a5fa !important; }

.drawer-side .menu li.mt-auto > a {
  color: #404060 !important;
  font-size: 0.8rem;
  margin-top: 1rem;
  border-top: 1px solid #1a1a3a;
  border-radius: 0;
  padding-top: 1rem;
}
.drawer-side .menu li.mt-auto > a:hover {
  color: #fb7185 !important;
  background: rgba(190,18,60,0.07) !important;
}

.drawer-side .drawer-overlay {
  background: rgba(3,3,10,0.75) !important;
  backdrop-filter: blur(6px);
}
.drawer-content { background: #03030a !important; }

/* ── 23. FOOTER ──────────────────────────────────────────────────────────────── */
footer.footer {
  background: #07071a;
  border-top: 1px solid #1a1a3a;
  color: #8080a0 !important;
}
footer.footer nav a,
footer.footer aside a {
  color: #8080a0 !important;
  transition: color 0.15s cubic-bezier(0.4,0,0.2,1);
}
footer.footer nav a:hover,
footer.footer aside a:hover { color: #f0f0ff !important; }
footer.footer .font-medium   { color: #c4c4e0 !important; }
footer.footer .font-light    { color: #404060 !important; font-size: 0.8rem; }

.border-t { border-top-color: #1a1a3a !important; }

/* ── 24. PAGE-LEVEL CONTAINERS ───────────────────────────────────────────────── */
.bg-base-100 { background: #07071a !important; }
.bg-base-200 { background: #0c0c22 !important; }
.bg-base-300 { background: #11112e !important; }
.container, [class~='container'] { background: transparent !important; }

/* ── 25. CONTACT PAGE ────────────────────────────────────────────────────────── */
.min-h-\[70vh\]    { color: #c4c4e0 !important; }
.min-h-\[70vh\] h1 { color: #f0f0ff !important; }
.min-h-\[70vh\] p  { color: #c4c4e0 !important; }
.min-h-\[70vh\] li { color: #c4c4e0 !important; }

/* ── 26. LOGIN / AUTH PAGES ──────────────────────────────────────────────────── */
.authBtn {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #f0f0ff !important;
  font-family: 'Syne', system-ui, sans-serif !important;
  border-radius: 4px !important;
  font-weight: 600;
}
.authBtn:hover {
  background: #3b82f6 !important;
  box-shadow: 0 0 0 1px rgba(29,78,216,0.2), 0 0 20px rgba(29,78,216,0.14), 0 0 60px rgba(29,78,216,0.042);
}
[data-supabase-auth-ui] input,
.supabase-auth-ui_ui-input {
  background: #07071a !important;
  border: 1px solid #26264a !important;
  color: #f0f0ff !important;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  transition: border-color 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
}
[data-supabase-auth-ui] input:focus,
.supabase-auth-ui_ui-input:focus {
  border-color: #3b82f6 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(29,78,216,0.2) !important;
}
[data-supabase-auth-ui] input::placeholder,
.supabase-auth-ui_ui-input::placeholder { color: #404060 !important; }

/* ── 27. PROSE / BLOG / TOS / PRIVACY ───────────────────────────────────────── */
.prose                         { color: #c4c4e0 !important; max-width: 70ch; }
.prose h1, .prose h2,
.prose h3, .prose h4,
.prose h5, .prose h6           { color: #f0f0ff !important; letter-spacing: -0.03em; }
.prose a                       { color: #3b82f6 !important; }
.prose strong, .prose b        { color: #f0f0ff !important; }
.prose code                    { background: #11112e !important; color: #06b6d4 !important; border-radius: 3px; padding: 0.1em 0.35em; }
.prose blockquote              { border-left: 3px solid #1d4ed8 !important; color: #8080a0 !important; background: rgba(29,78,216,0.05); padding: 0.5rem 1rem; border-radius: 0 4px 4px 0; }
.prose hr                      { border-color: #1a1a3a !important; }
.prose ul > li::marker,
.prose ol > li::marker         { color: #3b82f6 !important; }
.prose table thead             { background: #11112e !important; color: #8080a0 !important; }
.prose table tbody tr          { border-bottom: 1px solid #1a1a3a !important; }
.prose table td, .prose table th { color: #c4c4e0 !important; }

/* ── 28. TABLES ──────────────────────────────────────────────────────────────── */
.table { color: #c4c4e0 !important; background: #0c0c22 !important; border-radius: 6px; overflow: hidden; }
.table thead tr { background: #11112e !important; color: #8080a0 !important; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; }
.table tbody tr { border-bottom: 1px solid #12122e !important; transition: background 0.15s cubic-bezier(0.4,0,0.2,1); }
.table tbody tr:hover          { background: rgba(29,78,216,0.04) !important; }
.table tbody tr:last-child     { border-bottom: none !important; }
.table td, .table th           { color: #c4c4e0 !important; }

/* ── 29. TABS ────────────────────────────────────────────────────────────────── */
.tabs { border-bottom: 1px solid #1a1a3a; }
.tabs .tab {
  color: #8080a0 !important;
  border-color: transparent !important;
  transition: color 0.15s cubic-bezier(0.4,0,0.2,1), border-color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.tabs .tab.tab-active { color: #3b82f6 !important; border-color: #1d4ed8 !important; }
.tabs .tab:hover      { color: #f0f0ff !important; }

/* ── 30. STEPS ───────────────────────────────────────────────────────────────── */
.step::before                  { background: #18183a !important; }
.step::after                   { background: #18183a !important; color: #8080a0 !important; }
.step.step-primary::before     { background: #1d4ed8 !important; }
.step.step-primary::after      { background: #1d4ed8 !important; color: #f0f0ff !important; }

/* ── 31. MODAL ───────────────────────────────────────────────────────────────── */
.modal-box {
  background: #0c0c22;
  border: 1px solid #1a1a3a;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8) !important;
  color: #c4c4e0 !important;
}
.modal-box .modal-action { border-top: 1px solid #1a1a3a; margin-top: 1.5rem; }
.modal-backdrop,
.modal::backdrop { background: rgba(3,3,10,0.8) !important; backdrop-filter: blur(8px); }

/* ── 32. TOOLTIP ─────────────────────────────────────────────────────────────── */
.tooltip::before {
  background: #18183a !important;
  color: #f0f0ff !important;
  border: 1px solid #26264a;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* ── 33. DIVIDERS ────────────────────────────────────────────────────────────── */
.divider { color: #404060; }
.divider::before, .divider::after { background: #1a1a3a; }

/* ── 34. PROGRESS BAR ────────────────────────────────────────────────────────── */
.bg-primary { background: linear-gradient(90deg, #1d4ed8 0%, #8b5cf6 55%, #60a5fa 100%) !important; }

/* ── 35. MENU ────────────────────────────────────────────────────────────────── */
.menu li > a,
.menu li > button,
.menu li > label {
  color: #8080a0 !important;
  border-radius: 4px;
  transition: background 0.15s cubic-bezier(0.4,0,0.2,1), color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.menu li > a:hover,
.menu li > button:hover,
.menu li > label:hover { background: rgba(29,78,216,0.09) !important; color: #f0f0ff !important; }
.menu li > a.active,
.menu li > a[aria-current],
.menu li > button.active { background: rgba(29,78,216,0.15) !important; color: #60a5fa !important; }
.menu .menu-title { color: #404060 !important; font-size: 0.7rem; letter-spacing: 0.1em; }

/* ── 36. MCP PAGE ────────────────────────────────────────────────────────────── */
.mcp-page pre, .mcp-page code,
[class*='mcp'] pre, [class*='mcp'] code,
[class*='copy'] pre, [class*='copy'] code { background: #11112e !important; color: #06b6d4 !important; }

/* ── 37. SELECT PLAN / CREATE PROFILE ────────────────────────────────────────── */
.min-h-\[70vh\].pb-8 { background: #03030a !important; }

/* ── 38. OAUTH ───────────────────────────────────────────────────────────────── */
[class*='oauth'],
[class*='authorize'] { background: #03030a !important; color: #c4c4e0 !important; }

/* ── 39. ERROR PAGE ──────────────────────────────────────────────────────────── */
.error-page, .error, [data-sveltekit-error] { background: #03030a !important; color: #c4c4e0 !important; }
.error-page h1, .error-page h2,
.error h1, .error h2           { color: #f0f0ff !important; }
.error-page p, .error p        { color: #8080a0 !important; }

/* ── 40. KEYBOARD FOCUS RING ─────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid #3b82f6 !important; outline-offset: 2px !important; }

/* ── 41. RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar              { padding-inline: 0.75rem; }
  .card                { border-radius: 4px !important; }
  .hero-content        { padding-inline: 1rem; }
  footer.footer        { padding: 2rem 1.25rem !important; gap: 2rem !important; }
}

/* ── 42. PRINT ───────────────────────────────────────────────────────────────── */
@media print {
  body                 { background: #fff !important; color: #000 !important; }
  .navbar, footer, .drawer-side { display: none !important; }
}

/* ── 43. REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── 44. LOGO INVERSION ──────────────────────────────────────────────────────── */
.navbar      img,
.drawer-side img,
footer       img,
aside        img,
.btn-ghost   img { filter: invert(1) brightness(1.15) !important; }

/* ── 45. ELEMENT ORDER RESEQUENCING ──────────────────────────────────────────── */
/* 45a. Navbar: nav links LEFT, logo RIGHT */
.navbar > .flex-1    { order: 2; }
.navbar > .flex-none { order: 1; }

/* 45b. Footer: brand aside LEFT, nav links RIGHT */
footer.footer nav   { order: 2; }
footer.footer aside { order: 1; }

/* 45c. Feature cards: reverse visual order */
.hero-home [class*='flex'][class*='gap-'] { flex-direction: row-reverse; }

/* 45d. Pricing cards: highlighted plan first */
[class*='flex'][class*='gap-10'] { flex-direction: row-reverse; }

/* 45e. Settings module: content LEFT, title RIGHT on md+ */
@media (min-width: 768px) {
  .card.p-6.pb-7                   { flex-direction: row-reverse !important; }
  .card.p-6.pb-7 > div.w-48        { text-align: right; padding-right: 0 !important; padding-left: 2rem; }
}

/* 45f. Admin sidebar: column-reverse so sign-out floats top */
.drawer-side .menu {
  display: flex !important;
  flex-direction: column-reverse;
  padding-bottom: 1.5rem;
  padding-top: 0.5rem;
}
.drawer-side .menu li.mt-auto {
  margin-top: 0 !important;
  margin-bottom: auto;
  border-top: none;
  border-bottom: 1px solid #1a1a3a;
  padding-bottom: 1rem;
}
.drawer-side .menu li:last-child { margin-bottom: 0; }

/* ── 46. BOLDER VISUAL TREATMENTS ───────────────────────────────────────────── */

/* 46a. Body background dot-grid */
body {
  background-image: radial-gradient(circle, rgba(26,26,58,0.8) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  background-attachment: fixed !important;
}
/* Suppress dot-grid on solid panels */
.navbar,
.drawer-side .menu,
footer.footer,
.modal-box,
.dropdown-content { background-image: none !important; }

/* 46b. Cards: left-accent stripe */
.card {
  border: none !important;
  border-left: 3px solid #1d4ed8 !important;
  border-radius: 0 6px 6px 0 !important;
  background: rgba(12,12,34,0.96) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.45), inset 1px 0 0 rgba(59,130,246,0.12) !important;
}
.card:hover {
  border-left-color: #3b82f6 !important;
  box-shadow: 0 0 0 0 transparent, 0 8px 40px rgba(29,78,216,0.22), inset 1px 0 0 rgba(59,130,246,0.25) !important;
  transform: translateX(3px) !important;
}
.card.card-bordered {
  border-right:  1px solid #1a1a3a !important;
  border-top:    1px solid #1a1a3a !important;
  border-bottom: 1px solid #1a1a3a !important;
}
.card.card-bordered.border-primary { border-left-color: #3b82f6 !important; }

/* 46c. Heading monospace prefix */
h1::before,
h2::before {
  content: '// ';
  font-family: 'Fira Code', 'Cascadia Code', ui-monospace, monospace !important;
  font-weight: 400;
  font-size: 0.65em;
  letter-spacing: 0;
  color: #404060;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
}
.navbar h1::before, .navbar h2::before,
.drawer-side h1::before, .drawer-side h2::before,
footer h1::before, footer h2::before,
.btn::before, .card-title::before { content: none; }

/* 46d. Primary CTA: neon glow pulse on hover */
.btn.btn-primary { position: relative; overflow: visible; }
.btn.btn-primary::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(59,130,246,0);
  transition: box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  z-index: -1;
}
.btn.btn-primary:hover::after {
  box-shadow: 0 0 20px 2px rgba(59,130,246,0.35), 0 0 50px 4px rgba(29,78,216,0.18);
}

/* 46e. Navbar: underline sweep on hover */
.navbar .menu a {
  position: relative;
  border-radius: 0 !important;
  padding-bottom: 0.5rem;
}
.navbar .menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  background: #3b82f6;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.15s cubic-bezier(0.4,0,0.2,1);
  border-radius: 1px;
}
.navbar .menu a:hover                { background: transparent !important; color: #f0f0ff !important; }
.navbar .menu a:hover::after         { transform: scaleX(1); }

/* 46f. Footer: vertical grid lines */
footer.footer {
  background:
    repeating-linear-gradient(90deg, rgba(18,18,46,0.6) 0, rgba(18,18,46,0.6) 1px, transparent 1px, transparent 80px),
    #07071a !important;
  background-image: none; /* cancel dot-grid from body */
}

/* 46g. Hero: taller, bigger headline */
.hero-home .hero { min-height: 72vh !important; }
.hero-home .hero .hero-content div[style*='line-height'] {
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  letter-spacing: -0.055em;
}

/* 46h. Inputs: terminal left-border style */
.input, .textarea, .select,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']):not([type='button']),
textarea, select {
  border-left:   3px solid #1d4ed8 !important;
  border-right:  none !important;
  border-top:    none !important;
  border-bottom: 1px solid #26264a !important;
  border-radius: 0 !important;
  background: rgba(7,7,26,0.7) !important;
  padding-left: 0.9rem !important;
}
.input:focus, .input:focus-within,
.textarea:focus, .textarea:focus-within,
.select:focus, .select:focus-within,
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']):not([type='button']):focus,
textarea:focus, select:focus {
  border-left-color:   #3b82f6 !important;
  border-bottom-color: #3b82f6 !important;
  box-shadow: none !important;
  background: rgba(12,12,34,0.9) !important;
}

/* 46i. Page-wide left gutter line */
html::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #1d4ed8 20%, #6d28d9 80%, transparent 100%);
  opacity: 0.35;
  pointer-events: none;
  z-index: 100;
}

/* ── 47. HERO IMAGE REPLACEMENT ──────────────────────────────────────────────── */
/* !important overrides the scoped Svelte style (which has no !important) */
.hero {
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 39px, rgba(29,78,216,0.08) 39px, rgba(29,78,216,0.08) 40px),
    repeating-linear-gradient(90deg,  transparent, transparent 79px, rgba(29,78,216,0.05) 79px, rgba(29,78,216,0.05) 80px),
    radial-gradient(ellipse 80% 65% at 50% 40%, rgba(29,78,216,0.18) 0%, rgba(109,40,217,0.08) 45%, transparent 75%),
    radial-gradient(ellipse 40% 40% at 75% 25%, rgba(6,182,212,0.10) 0%, transparent 60%),
    #03030a !important;
  background-size: 40px 40px, 80px 80px, 100% 100%, 100% 100%, 100% 100% !important;
  background-position: 0 0, 0 0, center, center, center !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
}

/* ── 48. ICON TREATMENT ──────────────────────────────────────────────────────── */

/* 48a. Feature-card icon frames */
.card .card-body > div:has(svg) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(59,130,246,0.22), rgba(24,24,58,0.9) 70%);
  border: 1px solid rgba(59,130,246,0.35);
  box-shadow: 0 0 0 4px rgba(29,78,216,0.08), 0 0 20px rgba(29,78,216,0.2), inset 0 1px 0 rgba(96,165,250,0.15);
  margin-bottom: 0.5rem;
  transition: box-shadow 0.15s cubic-bezier(0.4,0,0.2,1), border-color 0.15s cubic-bezier(0.4,0,0.2,1);
}
.card:hover .card-body > div:has(svg) {
  border-color: rgba(59,130,246,0.7);
  box-shadow: 0 0 0 4px rgba(29,78,216,0.15), 0 0 36px rgba(29,78,216,0.4), inset 0 1px 0 rgba(96,165,250,0.3);
}

/* Card SVGs: neon cyan filter */
.card .card-body svg {
  filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(400%) hue-rotate(180deg) brightness(1.4) !important;
  width: 38px !important;
  height: 38px !important;
}

/* 48b. Sidebar nav icons */
.drawer-side .menu li > a svg {
  width: 18px !important;
  height: 18px !important;
  filter: brightness(0) saturate(100%) invert(55%) sepia(50%) saturate(500%) hue-rotate(185deg) brightness(1.3) !important;
  flex-shrink: 0;
  opacity: 1 !important;
}
.drawer-side .menu li > a.active svg {
  filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(600%) hue-rotate(155deg) brightness(1.6) !important;
}

/* 48c. Navbar hamburger */
.navbar svg:not(img svg) {
  filter: brightness(0) invert(0.75) !important;
  transition: filter 0.15s cubic-bezier(0.4,0,0.2,1);
}
.navbar .btn:hover svg {
  filter: brightness(0) saturate(100%) invert(55%) sepia(60%) saturate(500%) hue-rotate(185deg) brightness(1.4) !important;
}

/* ── 49. TYPOGRAPHY POLISH WITH NEW FONTS ────────────────────────────────────── */
h1 { font-size: clamp(2rem, 5vw, 3.5rem);    font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-weight: 700; }

body { letter-spacing: -0.01em; }
p    { font-size: 0.9375rem; line-height: 1.8; }

/* Nav links: Syne for crispness */
.navbar .menu a {
  font-family: 'Syne', system-ui, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}
/* Sidebar: monospace */
.drawer-side .menu li > a {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
/* Card titles: Syne */
.card-title, .card .text-xl, .card .font-bold {
  font-family: 'Syne', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EOF · CLAW.CSS
   ═══════════════════════════════════════════════════════════════════════════════ */