/* GarageOS — Apple Product visual-only layer
   Applies the look of the provided design files without changing layout geometry. */

:root{
  --apple-surface: color-mix(in oklab, var(--panel, #141827) 82%, rgba(255,255,255,.06));
  --apple-surface-2: color-mix(in oklab, var(--panel2, #10131d) 80%, rgba(255,255,255,.08));
  --apple-line: rgba(255,255,255,.10);
  --apple-line-strong: rgba(255,255,255,.18);
  --apple-shadow: 0 30px 80px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.08);
  --apple-shadow-soft: 0 18px 48px rgba(2,6,23,.24), inset 0 1px 0 rgba(255,255,255,.06);
  --apple-blur: 14px;
  --apple-radius: 24px;
  --apple-radius-lg: 32px;
  --apple-ease: cubic-bezier(.22,1,.36,1);
  --apple-spring: cubic-bezier(.34,1.56,.64,1);
  --apple-smooth: cubic-bezier(.4,0,.2,1);
  --apple-text-soft: color-mix(in oklab, var(--text, #fff) 78%, rgba(255,255,255,.45));
}

html, body{
  scroll-behavior:smooth;
}

body{
  background:#070A12;
  isolation:isolate;
}

/* Exact landing-style background layers */
.landing-bg-base{
  position:fixed; inset:0; z-index:-5; pointer-events:none;
  background:
    radial-gradient(1400px 1000px at 10% 5%, rgba(124,58,237,.22), transparent 55%),
    radial-gradient(1000px 800px at 90% 15%, rgba(34,211,238,.15), transparent 50%),
    radial-gradient(800px 700px at 65% 85%, rgba(249,115,22,.12), transparent 55%),
    radial-gradient(600px 600px at 40% 55%, rgba(124,58,237,.08), transparent 50%),
    linear-gradient(180deg, #070A12, #090F22 40%, #060818);
}
.landing-bg-grid{
  position:fixed; inset:0; pointer-events:none; z-index:-4;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(65% 55% at 50% 35%, #000 50%, transparent 100%);
  -webkit-mask-image:radial-gradient(65% 55% at 50% 35%, #000 50%, transparent 100%);
}
.landing-bg-noise{
  position:fixed; inset:-25%; pointer-events:none; z-index:-3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  opacity:.04; mix-blend-mode:overlay;
}
.landing-bg-spot{
  position:fixed; inset:-18vmax; pointer-events:none; z-index:-2;
  background:
    radial-gradient(36vmax 36vmax at var(--spot-x, 50%) var(--spot-y, 25%),
      rgba(125,211,252,.14), rgba(139,92,246,.08) 32%, transparent 62%);
  opacity:.95;
  transition:opacity .25s ease;
}
.landing-blob{
  position:fixed; border-radius:999px; pointer-events:none; filter:blur(30px);
  mix-blend-mode:screen; z-index:-2; opacity:.34;
  animation: appleBlobFloat 18s ease-in-out infinite alternate;
}
.landing-blob--1{ width:340px; height:340px; left:-90px; top:18vh; background:radial-gradient(circle, rgba(34,211,238,.30), transparent 68%); animation-duration:20s; }
.landing-blob--2{ width:420px; height:420px; right:-120px; top:10vh; background:radial-gradient(circle, rgba(124,58,237,.26), transparent 68%); animation-duration:23s; }
.landing-blob--3{ width:360px; height:360px; left:34%; bottom:-120px; background:radial-gradient(circle, rgba(249,115,22,.22), transparent 68%); animation-duration:27s; }

@keyframes appleBlobFloat{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(12px,-18px,0) scale(1.04); }
  100%{ transform:translate3d(-10px,14px,0) scale(.98); }
}

/* Visual surfaces only — no width/layout changes */
.topbar,
.sidebar,
.menu,
.filepill,
.topbar-vehicle-pill,
.card,
.hero-card,
.modalbox,
.overlay-card,
.admin-topbar,
.admin-sidebar,
.admin-main .card,
.gos-chat-panel,
.gos-chat-messages,
.gos-chat-composer,
.gos-chat-fab{
  backdrop-filter: blur(var(--apple-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--apple-blur)) saturate(150%);
  box-shadow: var(--apple-shadow);
  border-color: var(--apple-line-strong) !important;
}

.card,
.hero-card,
.modalbox,
.overlay-card,
.kpi,
.item,
.envelope,
.fxDoc,
.tool-card{
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.08), transparent 46%),
    linear-gradient(168deg, rgba(255,255,255,.11), rgba(255,255,255,.04)) !important;
  box-shadow: var(--apple-shadow-soft);
  border-color: var(--apple-line) !important;
}

.topbar{
  background:linear-gradient(180deg, rgba(9,12,20,.88), rgba(9,12,20,.66)) !important;
}
.sidebar{
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(125,211,252,.07), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
}
.menu{
  background:
    radial-gradient(100% 100% at 0% 0%, rgba(125,211,252,.08), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
}
.filepill,
.topbar-vehicle-pill{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  border:1px solid var(--apple-line) !important;
}
.navitem.active{
  background:color-mix(in oklab, var(--brand) 14%, rgba(255,255,255,.05));
  border-color:color-mix(in oklab, var(--brand) 30%, transparent);
  box-shadow:0 0 20px rgba(99,102,241,.10);
}
.gos-chat-panel{
  background:
    radial-gradient(100% 100% at 0% 0%, rgba(125,211,252,.10), transparent 48%),
    radial-gradient(100% 100% at 100% 0%, rgba(167,139,250,.10), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
}

.modal .modalbox,
.overlay-card{
  background:
    radial-gradient(90% 80% at 10% 0%, rgba(125,211,252,.08), transparent 48%),
    radial-gradient(90% 80% at 100% 0%, rgba(167,139,250,.08), transparent 52%),
    linear-gradient(168deg, rgba(255,255,255,.11), rgba(255,255,255,.04)) !important;
  border:1px solid var(--apple-line-strong) !important;
  box-shadow:
    0 40px 100px rgba(2,6,23,.45),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}
.modal .modalback{
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background:rgba(0,0,0,.45);
}

/* Controls and inputs */
.btn, .iconbtn, .chip, .pill, .selectpill, .tab,
.navitem, .menuit, .fxDoc, .kpi, .item, .tool-card, .envelope,
.gos-chat-msg, input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  transition:
    transform .45s var(--apple-ease),
    box-shadow .45s var(--apple-ease),
    border-color .45s var(--apple-ease),
    background .45s var(--apple-ease),
    color .3s ease,
    opacity .35s ease !important;
}

.btn:hover, .iconbtn:hover, .chip:hover, .tab:hover, .navitem:hover,
.fxDoc:hover, .tool-card:hover, .kpi:hover{
  transform: translateY(-1px);
}
.btn:active, .iconbtn:active{
  transform: translateY(0) scale(.98);
  transition-duration: .08s !important;
}
.btn:not(.ghost):not(.danger):hover{
  box-shadow:0 0 20px rgba(99,102,241,.22), 0 8px 24px rgba(0,0,0,.15);
}
.gos-chat-msg:hover{ transform:translateY(-1px); }

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus{
  border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.14);
  outline:none;
}

/* Subtle inner highlights */
.card::before,
.hero-card::before,
.modalbox::before,
.overlay-card::before,
.tool-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%);
  opacity:.7;
}
.card, .hero-card, .modalbox, .overlay-card, .tool-card{
  position:relative;
  overflow:hidden;
}

/* Smooth reveal classes only */
.view{
  transition: opacity .35s var(--apple-smooth), transform .35s var(--apple-smooth);
}
.fx-reveal{
  opacity:0;
  transform:translateY(14px) scale(.985);
}
.fx-reveal.fx-on{
  opacity:1;
  transform:none;
  transition:
    opacity .6s var(--apple-ease),
    transform .6s var(--apple-ease);
}

/* Auth surface styling only */
#authOverlay .overlay-card{
  background:
    radial-gradient(90% 80% at 10% 0%, rgba(125,211,252,.08), transparent 48%),
    radial-gradient(90% 80% at 100% 0%, rgba(167,139,250,.08), transparent 52%),
    linear-gradient(168deg, rgba(255,255,255,.11), rgba(255,255,255,.04)) !important;
}
#authOverlay .panel{ background:transparent; }

/* Helper chips and doc insights */
.fxDocAnalysis{
  border:1px solid rgba(59,130,246,.20);
  background:linear-gradient(180deg, rgba(59,130,246,.10), rgba(59,130,246,.04));
}
.fxDocInsights{ display:flex; gap:8px; flex-wrap:wrap; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .landing-blob,
  .fx-reveal,
  .fx-reveal.fx-on,
  .btn, .iconbtn, .chip, .pill, .selectpill, .tab,
  .navitem, .menuit, .fxDoc, .kpi, .item, .tool-card, .envelope{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
  .landing-bg-spot{ display:none; }
}

.card::after,
.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(220px 180px at var(--mx, 50%) var(--my, 20%), rgba(255,255,255,.10), transparent 60%);
  opacity:.8;
}