:root{
  --ss-bg-1:#1b0a2a; /* deep indigo */
  --ss-bg-2:#3b155e; /* purple */
  --ss-accent:#7c3aed; /* violet */
  --ss-accent-2:#22d3ee; /* cyan */
  --ss-lime:#84cc16; /* lime */
  --ss-lime-2:#22c55e; /* green */

  /* Filament sidebar variables */
  --sidebar-width: 16rem;
  --collapsed-sidebar-width: 4rem;
}

/* Frosted glass header */
.glass{
  backdrop-filter:saturate(160%) blur(14px);
  background:linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.12);
}

/* 3D gradient border */
.gradient-border{
  position:relative;
}
.gradient-border:before{
  content:"";position:absolute;inset:-1.5px;border-radius:9999px;z-index:-1;
  background:conic-gradient(from 180deg at 50% 50%, var(--ss-accent), var(--ss-accent-2), var(--ss-accent));
  filter:blur(6px);opacity:.7;
}
.border-3d{border:1px solid rgba(255,255,255,0.18)}

.hero-bg{
  background:radial-gradient(1200px 600px at 70% -10%, rgba(124,58,237,.6), transparent 50%),
             radial-gradient(900px 500px at 20% 20%, rgba(34,211,238,.45), transparent 60%),
             linear-gradient(180deg, var(--ss-bg-2), var(--ss-bg-1));
}

.card-3d{
  position:relative;border-radius:18px;border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(180deg, rgba(13,13,23,.7), rgba(13,13,23,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px rgba(0,0,0,.35);
}
.card-3d:after{
  content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(135deg, rgba(124,58,237,.8), rgba(34,211,238,.8));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.35;
}

.input-3d{
  border:1px solid rgba(255,255,255,0.25);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px rgba(0,0,0,.25);
}

.glow{
  box-shadow:0 0 0 2px rgba(124,58,237,.3), 0 0 40px rgba(124,58,237,.35);
}

.ticker{animation:ticker 24s linear infinite}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Light theme variants */
.hero-light{ 
  background:
    radial-gradient(900px 300px at 85% 0%, rgba(124,58,237,.08), transparent 60%),
    radial-gradient(700px 250px at 10% 0%, rgba(34,211,238,.08), transparent 60%),
    #ffffff;
}
.glass-light{
  backdrop-filter:saturate(140%) blur(12px);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(246,253,246,.85));
  border:1px solid rgba(17,24,39,.08);
}
.gradient-border-light{ position:relative; }
.gradient-border-light:before{
  content:"";position:absolute;inset:-1.5px;border-radius:9999px;z-index:-1;
  background:conic-gradient(from 180deg at 50% 50%, rgba(132,204,22,.5), rgba(34,197,94,.5), rgba(132,204,22,.5));
  filter:blur(8px);opacity:.5;
}
.border-3d-light{
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 10px 25px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
.card-3d-light{
  position:relative;border-radius:18px;border:1px solid rgba(17,24,39,.08);
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
  box-shadow:0 20px 60px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.card-3d-light:hover{ box-shadow:0 25px 70px rgba(17,24,39,.12), inset 0 1px 0 rgba(255,255,255,.95); }
.card-3d-light:after{
  content:"";position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(135deg, rgba(124,58,237,.3), rgba(34,211,238,.3));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.35; pointer-events:none;
}
.input-3d-light{
  border:1px solid rgba(17,24,39,.12);
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 30px rgba(17,24,39,.06);
}
.btn-ss{
  background:linear-gradient(135deg, var(--ss-lime), var(--ss-lime-2));
}
.text-gradient-ss{
  background:linear-gradient(135deg, var(--ss-lime), var(--ss-lime-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Hero rings illusion */
.rings{
  position:relative;
}
.rings:before, .rings:after{
  content:""; position:absolute; inset:-16px; border-radius:24px;
  border:1px solid rgba(132,204,22,.25);
}
.rings:after{ inset:-48px; border-color:rgba(34,197,94,.15); }
.rings .ring-3{ position:absolute; inset:-88px; border-radius:32px; border:1px solid rgba(132,204,22,.12); }

/* Do not block input selection */
.rings:before, .rings:after, .rings .ring-3{ pointer-events:none; }

/* Tilt effect */
.tilt{ transform-style:preserve-3d; transition:transform .2s ease, box-shadow .2s ease }
.tilt:hover{ transform:rotateX(2deg) rotateY(-2deg) translateY(-2px) }

/* Tiny spinner */
.spinner{ width:16px; height:16px; border:2px solid rgba(0,0,0,.15); border-top-color:rgba(0,0,0,.5); border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Feature cards */
.feature-card{
  position:relative; border-radius:20px; border:1px solid rgba(17,24,39,.08);
  background:
    radial-gradient(600px 120px at 20% -20%, rgba(34,197,94,.06), transparent 60%),
    radial-gradient(500px 120px at 90% 0%, rgba(132,204,22,.05), transparent 60%),
    linear-gradient(180deg, #fff, #fafafa);
  box-shadow: 0 24px 60px rgba(17,24,39,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.feature-card:after{
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  background:linear-gradient(135deg, rgba(132,204,22,.22), rgba(34,197,94,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding:1px; opacity:.35;
}
.feature-card:hover{ transform:translateY(-2px); box-shadow:0 30px 70px rgba(17,24,39,.12) }
.feature-title{ letter-spacing:-0.01em }
.feature-icon{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:9999px;
  background:radial-gradient(circle at 30% 30%, #111827, #111827 60%, #0b1220 100%);
  color:#fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 24px rgba(2,6,23,.25);
}
.feature-icon:after{ content:""; position:absolute; inset:-8px; border-radius:9999px; border:1px solid rgba(17,24,39,.12) }
.feature-icon svg{ width:22px; height:22px; color:#fff }

/* Code samples */
.code-card{
  position:relative; border-radius:14px; border:1px solid rgba(17,24,39,.08);
  background:linear-gradient(180deg,#ffffff,#fbfbfb);
  box-shadow:0 20px 50px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
.code-card pre{ background:#f7fafc; border:1px solid rgba(17,24,39,.06); border-radius:8px; padding:12px; overflow:auto }
.code-card .label{ font-size:12px; color:#64748b; margin-bottom:6px }

/* Header green bar */
.header-ss{
  background:linear-gradient(135deg, var(--ss-lime), var(--ss-lime-2));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 30px rgba(34,197,94,.28), inset 0 1px 0 rgba(255,255,255,.55);
}

/* Utilities for forms and overlays */
.ss-label{ font-size:.875rem; color:#111827 }
.ss-input{ border:1px solid rgba(17,24,39,.12); background:linear-gradient(180deg,#fff,#fafafa); border-radius:9999px; padding:.625rem 1rem; color:#111827; box-shadow: inset 0 1px 0 #fff }
.ss-input:focus{ outline:none; box-shadow:0 0 0 3px rgba(34,197,94,.25) }

.ss-dropdown{ background:#fff; border:1px solid rgba(17,24,39,.08); border-radius:14px; box-shadow:0 20px 50px rgba(17,24,39,.12) }
.ss-dropdown-item{ display:block; padding:.5rem .75rem; border-radius:.5rem; color:#111827 }
.ss-dropdown-item:hover{ background:#f6f8fb }

.ss-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.3) }
.ss-modal{ background:#fff; border-radius:16px; border:1px solid rgba(17,24,39,.08); box-shadow:0 30px 80px rgba(17,24,39,.2) }

.ss-badge{ display:inline-flex; align-items:center; padding:.125rem .5rem; border-radius:9999px; font-size:.75rem }
.ss-badge.gray{ background:#f3f4f6; color:#111827 }
.ss-badge.green{ background:rgba(34,197,94,.12); color:#166534 }

/* Tilt effect */
.tilt{ transform-style:preserve-3d; transition:transform .2s ease, box-shadow .2s ease }
.tilt:hover{ transform:rotateX(2deg) rotateY(-2deg) translateY(-2px) }

/* Tiny spinner */
.spinner{ width:16px; height:16px; border:2px solid rgba(0,0,0,.15); border-top-color:rgba(0,0,0,.5); border-radius:50%; animation:spin 1s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Filament Sidebar Fixes */
.fi-sidebar {
  z-index: 30;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
}

.fi-sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgb(203 213 225) transparent;
}

.fi-sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
  background: rgb(203 213 225);
  border-radius: 3px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgb(148 163 184);
}

/* Ensure sidebar displays properly on mobile */
@media (max-width: 1024px) {
  .fi-sidebar {
    transform: translateX(-100%);
  }

  .fi-sidebar.fi-sidebar-open {
    transform: translateX(0);
  }
}

/* Sidebar responsive fixes for large screens */
@media (min-width: 1024px) {
  .fi-sidebar {
    position: relative !important;
    transform: translateX(0) !important;
    z-index: auto !important;
  }

  .fi-sidebar.fi-sidebar-open {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
}

/* Main content area adjustments */
.fi-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding-top: 4rem; /* Ensure padding for fixed header */
}

@media (max-width: 1024px) {
  .fi-main {
    margin-left: 0;
    padding-top: 4rem; /* Maintain padding on mobile when sidebar is hidden */
  }
}

@media (min-width: 1024px) {
  .fi-main {
    padding-top: 0; /* No extra padding needed on desktop if header is not fixed */
  }
}

/* Filament Page specific fixes */
.fi-page {
  padding-top: 0; /* Remove default page padding, handled by fi-main */
}

/* Ensure the Filament header does not have conflicting fixed/absolute positioning */
.fi-header {
  position: relative; /* Override any potential fixed/absolute positioning */
  z-index: auto; /* Ensure it doesn't overlap other content */
}

/* Main content area adjustments for authenticated pages */
.fi-main-ctn {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: auto;
}

.fi-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

.fi-main {
  flex: 1;
  overflow-y: auto;
}

/* Ensure padding for header is applied */
.fi-main > .fi-page {
  padding-top: 1.5rem;
}