/*
 * Static Tailwind Replacement — generated from dashboard.html class audit.
 * Replaces the 300KB+ cdn.tailwindcss.com JIT compiler with ~6KB of actual CSS.
 * This eliminates the #1 iOS Safari crash cause: synchronous JIT compilation
 * that spikes memory by 50–100 MB and blocks the main thread for 1–2 s.
 */

/* ── Reset / Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Layout ─────────────────────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-1      { flex: 1 1 0%; }
.hidden      { display: none !important; }
.block       { display: block; }
.relative    { position: relative; }
.absolute    { position: absolute; }
.fixed       { position: fixed; }
.inset-0     { inset: 0; }
.top-0       { top: 0; }
.top-2       { top: 0.5rem; }
.left-0      { left: 0; }
.left-2      { left: 0.5rem; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.self-end    { align-self: flex-end; }

.shrink-0    { flex-shrink: 0; }
.min-h-0     { min-height: 0; }
.min-w-0     { min-width: 0; }

.gap-0\.5    { gap: 0.125rem; }
.gap-1       { gap: 0.25rem; }
.gap-2       { gap: 0.5rem; }
.gap-3       { gap: 0.75rem; }

.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.pointer-events-none { pointer-events: none; }

/* ── Sizing ─────────────────────────────────────────────────────── */
.h-screen  { height: 100vh; }
.h-full    { height: 100%; }
.h-11      { height: 2.75rem; }
.h-16      { height: 4rem; }
.h-4       { height: 1rem; }
.h-3       { height: 0.75rem; }
.w-full    { width: 100%; }
.w-16      { width: 4rem; }
.w-9       { width: 2.25rem; }
.w-px      { width: 1px; }
.max-w-md  { max-width: 28rem; }

/* ── Spacing ────────────────────────────────────────────────────── */
.p-0\.5  { padding: 0.125rem; }
.p-2     { padding: 0.5rem; }
.p-3     { padding: 0.75rem; }
.p-4     { padding: 1rem; }
.p-8     { padding: 2rem; }
.px-2    { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3    { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-4    { padding-top: 1rem; padding-bottom: 1rem; }
.pr-1    { padding-right: 0.25rem; }
.pt-11   { padding-top: 2.75rem; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-8    { margin-bottom: 2rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mx-1    { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* ── Typography ─────────────────────────────────────────────────── */
.font-sans   { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }
.text-xs     { font-size: 0.75rem; line-height: 1rem; }
.text-sm     { font-size: 0.875rem; line-height: 1.25rem; }
.text-2xl    { font-size: 1.5rem; line-height: 2rem; }
.text-4xl    { font-size: 2.25rem; line-height: 2.5rem; }
.text-6xl    { font-size: 3.75rem; line-height: 1; }
.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-center { text-align: center; }
.uppercase   { text-transform: uppercase; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }
.leading-none  { line-height: 1; }
.leading-tight { line-height: 1.25; }

/* ── Colors ─────────────────────────────────────────────────────── */
.text-white       { color: #fff; }
.text-slate-300   { color: #cbd5e1; }
.text-slate-400   { color: #94a3b8; }
.text-slate-500   { color: #64748b; }
.text-sky-400     { color: #38bdf8; }
.text-sky-500     { color: #0ea5e9; }
.text-emerald-400 { color: #34d399; }
.text-emerald-500 { color: #10b981; }
.text-amber-400   { color: #fbbf24; }
.text-amber-500   { color: #f59e0b; }
.text-rose-500    { color: #f43f5e; }
.text-cyan-400    { color: #22d3ee; }
.text-lime-400    { color: #a3e635; }

/* ── Backgrounds ────────────────────────────────────────────────── */
.bg-\[\#06090f\]    { background-color: #06090f; }
.bg-sky-500          { background-color: #0ea5e9; }
.bg-sky-500\/10      { background-color: rgba(14, 165, 233, 0.1); }
.bg-slate-700        { background-color: #334155; }
.bg-slate-800        { background-color: #1e293b; }
.bg-slate-900\/90    { background-color: rgba(15, 23, 42, 0.9); }
.bg-slate-950\/60    { background-color: rgba(2, 6, 23, 0.6); }
.bg-transparent      { background-color: transparent; }
.bg-black\/40        { background-color: rgba(0, 0, 0, 0.4); }

/* ── Borders ────────────────────────────────────────────────────── */
.border          { border-width: 1px; border-style: solid; }
.border-none     { border-style: none; }
.border-slate-700 { border-color: #334155; }
.border-slate-800 { border-color: #1e293b; }
.rounded         { border-radius: 0.25rem; }
.rounded-lg      { border-radius: 0.5rem; }
.rounded-xl      { border-radius: 0.75rem; }
.rounded-2xl     { border-radius: 1rem; }
.rounded-3xl     { border-radius: 1.5rem; }

/* ── Shadows ────────────────────────────────────────────────────── */
.shadow-lg           { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.shadow-2xl          { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.shadow-sky-500\/20  { --tw-shadow-color: rgba(14,165,233,.2); box-shadow: 0 10px 15px -3px var(--tw-shadow-color); }

/* ── Opacity / Visibility ───────────────────────────────────────── */
.opacity-20 { opacity: 0.2; }

/* ── Transforms ─────────────────────────────────────────────────── */
.transform           { transform: var(--tw-transform, none); }
.-translate-x-full   { transform: translateX(-100%); }

/* ── Transitions ────────────────────────────────────────────────── */
.transition          { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-colors   { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-opacity  { transition-property: opacity; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.ease-in-out  { transition-timing-function: cubic-bezier(0.4,0,0.2,1); }

/* ── Cursors ────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.outline-none   { outline: 2px solid transparent; outline-offset: 2px; }

/* ── Z-Index ────────────────────────────────────────────────────── */
.z-0      { z-index: 0; }
.z-20     { z-index: 20; }
.z-40     { z-index: 40; }
.z-50     { z-index: 50; }
.z-\[60\]  { z-index: 60; }
.z-\[100\] { z-index: 100; }
.z-\[300\] { z-index: 300; }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .5; } }
.animate-spin  { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ── Interactive States ─────────────────────────────────────────── */
.hover\:bg-sky-400:hover { background-color: #38bdf8; }
.focus\:border-sky-500:focus { border-color: #0ea5e9; }
.active\:scale-95:active { transform: scale(0.95); }

/* ── Responsive: lg (≥1024px) ───────────────────────────────────── */
@media (min-width: 1024px) {
    .lg\:hidden     { display: none; }
    .lg\:flex       { display: flex; }
    .lg\:block      { display: block; }
    .lg\:relative   { position: relative; }
    .lg\:translate-x-0 { transform: translateX(0); }
    .lg\:z-10       { z-index: 10; }
}

/* ── REMOVED: backdrop-blur-md ──────────────────────────────────
   This was the Tailwind class on #setup-overlay that created a
   full-screen GPU blur texture (~107 MB at 3× DPR).
   The inline CSS in dashboard.html already has its own
   backdrop-filter which the ≤1023px media query disables.
   We do NOT generate this class at all.                        */