/* ==========================================================================
   Baab - iOS "liquid glass" theme (dark). Loaded AFTER styles.css.
   Pure restyle: colour, translucency, borders, shadows, type. It does not
   change layout, so it cannot move or hide anything.
   Palette = Apple system colours (dark): blue #0A84FF, indigo #5E5CE6,
   purple #BF5AF2, cyan #64D2FF, green #30D158, orange #FF9F0A, red #FF453A.
   ========================================================================== */
:root{
  --g-blue:#0A84FF; --g-indigo:#5E5CE6; --g-purple:#BF5AF2; --g-cyan:#64D2FF;
  --g-green:#30D158; --g-orange:#FF9F0A; --g-red:#FF453A; --g-gold:#D9B26B;
  --g-bg0:#05060d; --g-bg1:#0b1020;
  --g-fill:rgba(255,255,255,.07); --g-fill-2:rgba(255,255,255,.11); --g-fill-3:rgba(255,255,255,.16);
  --g-stroke:rgba(255,255,255,.14); --g-stroke-2:rgba(255,255,255,.22);
  --g-text:rgba(255,255,255,.94); --g-text-2:rgba(235,235,245,.62); --g-text-3:rgba(235,235,245,.38);
  --g-blur:blur(26px) saturate(180%);
  --g-shadow:0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  --g-radius:20px;
  --g-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI Variable","Segoe UI",Roboto,"Noto Sans","Noto Naskh Arabic","Noto Nastaliq Urdu","Noto Sans Devanagari",system-ui,sans-serif;
}
html{color-scheme:dark}
body{
  font-family:var(--g-font)!important; color:var(--g-text);
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(10,132,255,.30), transparent 60%),
    radial-gradient(800px 560px at 108% 8%, rgba(191,90,242,.24), transparent 58%),
    radial-gradient(900px 700px at 50% 112%, rgba(100,210,255,.16), transparent 60%),
    linear-gradient(180deg,var(--g-bg1),var(--g-bg0)) fixed !important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Headings: clean SF look instead of wide display type (keeps the class names). */
.font-futuristic{font-family:var(--g-font)!important; letter-spacing:-.01em; font-weight:700}
.font-logo{font-family:var(--g-font)!important}

/* ---- glass surfaces: every dark Tailwind card/panel becomes frosted glass ---- */
.glass-panel,
.bg-slate-900,.bg-slate-900\/90,.bg-slate-900\/80,.bg-slate-900\/70,.bg-slate-900\/60,
.bg-slate-950\/90,.bg-slate-950\/80,.bg-slate-950\/70,
.scope-result,.scope-file-card,.scope-question,.scope-thinking{
  background:var(--g-fill)!important;
  -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-stroke)!important;
  box-shadow:var(--g-shadow)!important;
}
.bg-slate-800,.bg-slate-800\/80,.bg-slate-800\/70,.bg-slate-800\/60,.bg-slate-800\/50{
  background:var(--g-fill-2)!important;
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border-color:var(--g-stroke);
}
.bg-slate-800:hover,.hover\:bg-slate-800:hover,.hover\:bg-slate-700:hover{background:var(--g-fill-3)!important}
.bg-slate-700{background:var(--g-fill-3)!important}
.bg-slate-950{background:rgba(5,6,13,.55)!important}
.rounded-2xl,.rounded-3xl{border-radius:var(--g-radius)}
input,textarea,select{
  background:rgba(255,255,255,.07)!important; border:1px solid var(--g-stroke)!important;
  color:var(--g-text)!important; border-radius:14px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder,textarea::placeholder{color:var(--g-text-3)!important}
input:focus,textarea:focus,select:focus{
  outline:none!important; border-color:var(--g-blue)!important;
  box-shadow:0 0 0 4px rgba(10,132,255,.28)!important; background:rgba(255,255,255,.10)!important;
}
/* ---- primary / accent buttons ---- */
.bg-indigo-600,.bg-indigo-700,.bg-blue-600{
  background:linear-gradient(180deg,#2F9BFF,#0A84FF 55%,#0071E3)!important; color:#fff!important;
  box-shadow:0 6px 18px rgba(10,132,255,.40), inset 0 1px 0 rgba(255,255,255,.35)!important;
  border:0!important;
}
.bg-indigo-600:hover,.hover\:bg-indigo-500:hover,.hover\:bg-indigo-700:hover{filter:brightness(1.08)}
.bg-purple-700,.bg-purple-600,.bg-violet-600{background:linear-gradient(180deg,#D17BFF,#BF5AF2 60%,#A340D6)!important;color:#fff!important;box-shadow:0 6px 18px rgba(191,90,242,.35), inset 0 1px 0 rgba(255,255,255,.3)!important}
.bg-emerald-700\/70,.bg-emerald-600,.bg-emerald-700{background:linear-gradient(180deg,#4BE070,#30D158 60%,#22B147)!important;color:#04210e!important}
.bg-rose-600,.bg-rose-700,.bg-rose-700\/70,.bg-rose-600\/80{background:linear-gradient(180deg,#FF6A60,#FF453A)!important;color:#fff!important}
.bg-amber-700\/70{background:linear-gradient(180deg,#FFB340,#FF9F0A)!important;color:#2b1700!important}
button{transition:transform .12s ease, filter .2s ease, background .2s ease}
button:active{transform:scale(.97)}
/* ---- text colours ---- */
.text-indigo-300,.text-indigo-400,.text-cyan-300,.text-cyan-400{color:var(--g-cyan)!important}
.text-slate-100,.text-slate-200{color:var(--g-text)!important}
.text-slate-300,.text-slate-400{color:var(--g-text-2)!important}
.text-slate-500,.text-slate-600{color:var(--g-text-3)!important}
.border-slate-700,.border-slate-800,.border-slate-600{border-color:var(--g-stroke)!important}
.border-indigo-500,.border-indigo-500\/30,.border-indigo-400{border-color:rgba(10,132,255,.55)!important}
/* ---- header + bottom nav as floating glass bars ---- */
header,nav{
  background:rgba(20,24,44,.52)!important;
  -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%);
  border-color:var(--g-stroke)!important;
}
nav{border-radius:26px; box-shadow:0 12px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14)}
/* ---- modals ---- */
.fixed.inset-0{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
/* ---- logo / brand ---- */
.baab-brand-mark{object-fit:contain!important; padding:6px; background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04)); border:1px solid var(--g-stroke-2); box-shadow:0 8px 28px rgba(10,132,255,.25), inset 0 1px 0 rgba(255,255,255,.3)}
/* ---- scope action tiles ---- */
.scope-action-btn{background:var(--g-fill)!important; border:1px solid var(--g-stroke)!important; box-shadow:var(--g-shadow)}
.scope-action-btn:hover{background:rgba(10,132,255,.22)!important; border-color:rgba(10,132,255,.6)!important; transform:translateY(-2px)}
/* ---- scrollbars ---- */
*{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent}
/* ---- accessibility / fallbacks ---- */
@media (prefers-reduced-transparency: reduce){
  .glass-panel,.bg-slate-900,.bg-slate-800,.scope-result,header,nav{background:#141a2e!important; -webkit-backdrop-filter:none; backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-panel,.bg-slate-900,.bg-slate-800,.scope-result,header,nav{background:rgba(20,26,46,.94)!important}
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms!important; transition-duration:.01ms!important} }