/* Mirzz API — Ultra Premium v2 | Optimized, Non-Boring */
:root{
  --bg-0:#030712;
  --bg-1:#0a0f1d;
  --bg-2:#111827;
  --bg-3:#1f2937;
  --bg-card:#111827;
  --bg-card-hover:#1f2937;
  --bg-input:#070b14;
  --bg-sidebar:#070b14;
  --bg-modal:#111827;
  --bg-code:#070b14;
  --border:#374151;
  --border-2:#4b5563;
  --border-active:#6366f1;
  --text-1:#f9fafb;
  --text-2:#9ca3af;
  --text-3:#6b7280;
  --text-code:#a5b4fc;
  --accent:#4f46e5;
  --accent-2:#6366f1;
  --accent-3:#a855f7;
  --accent-glow:rgba(99,102,241,0.15);
  --accent-soft:rgba(99,102,241,0.08);
  --success:#10b981;
  --success-soft:rgba(16,185,129,0.08);
  --warning:#f59e0b;
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,0.08);
  --sidebar-w:300px;
  --topbar-h:64px;
  --radius:12px;
  --radius-sm:8px;
  --radius-xs:6px;
  --radius-full:999px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow-md:0 8px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset;
  --shadow-lg:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05) inset;
  --shadow-glow:0 0 40px var(--accent-glow);
  --font-sans:'Geist',Inter,system-ui,sans-serif;
  --font-mono:'Geist Mono',JetBrains Mono,monospace;
  --ease:out 0.22s cubic-bezier(.16,1,.3,1);
  --ease-bounce:0.5s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="light"]{
  --bg-0:#fcfcfd;
  --bg-1:#f4f4f8;
  --bg-2:#ffffff;
  --bg-3:#f0f0f5;
  --bg-card:#ffffff;
  --bg-card-hover:#fafafc;
  --bg-input:#ffffff;
  --bg-sidebar:#fcfcfd;
  --bg-modal:#ffffff;
  --bg-code:#f8f8fc;
  --border:#e6e6ef;
  --border-2:#d8d8e8;
  --text-1:#11111d;
  --text-2:#666680;
  --text-3:#9999b0;
  --accent-soft:rgba(99,102,241,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--font-sans);
  background:var(--bg-0);
  color:var(--text-1);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
/* BG LAYER */
.bg-layer{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.orb-1{width:700px;height:700px;background:radial-gradient(circle at 30% 30%, #6366f1, #8b5cf6 40%, transparent 70%);top:-200px;left:-150px;animation:orbFloat1 18s ease-in-out infinite}
.orb-2{width:600px;height:600px;background:radial-gradient(circle at 40% 40%, #ec4899, #8b5cf6 50%, transparent 70%);top:30%;right:-200px;animation:orbFloat2 22s ease-in-out infinite}
.orb-3{width:800px;height:500px;background:radial-gradient(circle at 50% 50%, #06b6d4, #6366f1 60%, transparent 75%);bottom:-200px;left:20%;animation:orbFloat3 25s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.05)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.08)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-30px) scale(1.03)}}
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:50px 50px;
  opacity:.08;
  mask-image:radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.bg-noise{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  opacity:.3;
  mix-blend-mode:soft-light;
}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 60%, var(--bg-0) 100%)}
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  z-index:9999;width:0%;transition:width .1s linear;box-shadow:0 0 10px var(--accent-glow)
}
/* SIDEBAR */
.sidebar{
  position:fixed;top:0;left:0;width:var(--sidebar-w);height:100dvh;
  background:color-mix(in srgb, var(--bg-sidebar) 85%, transparent);
  backdrop-filter:blur(24px) saturate(1.2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:100;
  transition:transform var(--ease);
}
.sidebar-header{
  padding:22px 20px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg, var(--bg-2) 0%, transparent 100%);
}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{position:relative;width:32px;height:32px;flex-shrink:0}
.logo-glow{
  position:absolute;inset:-6px;
  background:linear-gradient(135deg,var(--accent),var(--accent-3));
  border-radius:12px;filter:blur(12px);opacity:.4;z-index:-1;
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}
.logo-name{font-size:17px;font-weight:800;letter-spacing:-.02em}
.logo-version{
  font-size:10px;font-family:var(--font-mono);font-weight:600;
  color:var(--accent-2);background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  padding:2px 7px;border-radius:99px;display:inline-block;margin-top:2px;
}
.sidebar-close{display:none;color:var(--text-2);padding:6px;border-radius:8px}
.sidebar-close:hover{background:var(--bg-2);color:var(--text-1)}
.sidebar-search-wrap{padding:14px 16px;border-bottom:1px solid var(--border)}
.sidebar-search{
  position:relative;display:flex;align-items:center;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:12px;padding:0 12px;height:40px;gap:10px;
  transition:border-color var(--ease), box-shadow var(--ease), transform var(--ease);
  cursor:text;
}
.sidebar-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 0 20px var(--accent-glow);transform:translateY(-1px)}
.search-icon{color:var(--text-3);flex-shrink:0}
.sidebar-search input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text-1);font-size:13.5px;font-family:var(--font-sans);
}
.sidebar-search input::placeholder{color:var(--text-3)}
.search-kbd{display:flex;gap:3px;flex-shrink:0}
.search-kbd kbd{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  background:var(--bg-3);border:1px solid var(--border);border-bottom-width:2px;
  padding:2px 6px;border-radius:6px;color:var(--text-3);
}
.sidebar-nav{flex:1;overflow-y:auto;padding:12px 12px 20px;scrollbar-width:thin}
.nav-category{margin-bottom:18px;content-visibility:auto;contain-intrinsic-size:0 120px}
.nav-category-header{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;margin-bottom:4px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);cursor:pointer;user-select:none;
  border-radius:8px;transition:background var(--ease),color var(--ease);
}
.nav-category-header:hover{background:var(--bg-2);color:var(--text-2)}
.nav-category-header svg{transition:transform var(--ease);opacity:.6}
.nav-category-header.collapsed svg{transform:rotate(-90deg)}
.cat-count{
  margin-left:auto;background:var(--bg-3);border:1px solid var(--border);
  color:var(--text-3);font-size:10px;font-family:var(--font-mono);
  padding:2px 7px;border-radius:99px;min-width:20px;text-align:center;
}
.nav-items{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s cubic-bezier(.16,1,.3,1);overflow:hidden}
.nav-category-header.collapsed + .nav-items{grid-template-rows:0fr}
.nav-items-inner{overflow:hidden;display:flex;flex-direction:column;gap:2px;min-height:0}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;font-size:13px;font-weight:500;
  color:var(--text-2);border-radius:10px;text-decoration:none;
  border:1px solid transparent;transition:all var(--ease);
  position:relative;overflow:hidden;
}
.nav-item::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, var(--accent-soft), transparent);
  opacity:0;transition:opacity var(--ease);
}
.nav-item:hover{background:var(--bg-2);color:var(--text-1);border-color:var(--border);transform:translateX(2px)}
.nav-item:hover::before{opacity:1}
.nav-item.active{
  background:linear-gradient(135deg, var(--accent-soft), rgba(139,92,246,.08));
  color:var(--text-1);border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  font-weight:600;box-shadow:0 0 0 1px var(--accent-soft) inset, 0 2px 10px var(--accent-glow);
}
.method-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}
.method-dot.get{background:var(--success);color:var(--success)}
.method-dot.post{background:var(--warning);color:var(--warning)}
.sidebar-footer{
  padding:16px;border-top:1px solid var(--border);
  background:linear-gradient(0deg, var(--bg-2), transparent);
  display:flex;flex-direction:column;gap:12px;
}
.server-status{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--text-2);
  background:var(--bg-2);border:1px solid var(--border);
  padding:8px 12px;border-radius:99px;
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);position:relative}
.status-dot.online{background:var(--success);box-shadow:0 0 10px var(--success)}
.status-dot.offline{background:var(--danger);box-shadow:0 0 10px var(--danger)}
.status-ping{
  margin-left:auto;width:6px;height:6px;border-radius:50%;
  background:var(--success);animation:ping 1.8s ease-in-out infinite;
}
@keyframes ping{0%{transform:scale(1);opacity:1}100%{transform:scale(2.5);opacity:0}}
.sidebar-stats{display:flex;flex-direction:column;gap:4px}
.stats{font-size:11px;font-family:var(--font-mono);color:var(--text-3)}
.stats-hint{font-size:11px;color:var(--text-3);opacity:.7}
.stats-hint kbd{
  font-family:var(--font-mono);font-size:10px;background:var(--bg-3);
  border:1px solid var(--border);padding:1px 5px;border-radius:4px;
}
/* MAIN */
.main{margin-left:var(--sidebar-w);min-height:100vh;position:relative}
.topbar{
  position:sticky;top:0;height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;
  background:color-mix(in srgb, var(--bg-0) 75%, transparent);
  backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--border);
  z-index:50;
}
.menu-toggle{display:none;color:var(--text-1);padding:8px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border)}
.topbar-left{display:flex;align-items:center;gap:18px}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--text-3)}
.breadcrumb-item.active{color:var(--text-1);font-weight:700}
.base-url{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  background:var(--bg-2);border:1px solid var(--border);
  padding:6px 12px;border-radius:99px;color:var(--text-2);
}
.base-url-dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.6}}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-btn{
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--border);
  color:var(--text-2);font-size:13px;font-weight:600;
  transition:all var(--ease);
}
.topbar-btn:hover{background:var(--bg-3);color:var(--text-1);border-color:var(--border-2);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.topbar-btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border-color:transparent;box-shadow:0 4px 15px var(--accent-glow);
}
.topbar-btn.primary:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 6px 20px var(--accent-glow)}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:10px;color:var(--text-2);transition:all var(--ease);
}
.icon-btn:hover{background:var(--bg-3);color:var(--text-1);transform:rotate(15deg)}
.theme-icon-wrap{position:relative;width:18px;height:18px}
.sun-icon,.moon-icon{position:absolute;inset:0;transition:all .4s cubic-bezier(.16,1,.3,1)}
[data-theme="dark"] .sun-icon{opacity:0;transform:rotate(90deg) scale(0)}
[data-theme="dark"] .moon-icon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .sun-icon{opacity:1;transform:rotate(0) scale(1)}
[data-theme="light"] .moon-icon{opacity:0;transform:rotate(-90deg) scale(0)}
/* HERO */
.hero{
  position:relative;padding:48px 28px 36px;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.hero-inner{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg, var(--accent-soft), rgba(236,72,153,.08));
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color:var(--text-1);padding:7px 14px;border-radius:99px;
  position:relative;overflow:hidden;margin-bottom:18px;
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px var(--success);animation:dotPulse 1.5s infinite}
.badge-shine{
  position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation:shine 3s ease-in-out infinite;
}
@keyframes shine{0%{left:-100%}50%,100%{left:200%}}
.hero-title{
  font-size:clamp(32px, 5vw, 52px);font-weight:900;line-height:.95;
  letter-spacing:-.04em;margin-bottom:16px;
}
.gradient-text{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  position:relative;
}
.title-emoji{display:inline-block;animation:emojiFloat 3s ease-in-out infinite;margin-left:4px}
@keyframes emojiFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(8deg)}}
.hero-desc{
  font-size:16px;line-height:1.6;color:var(--text-2);
  max-width:560px;margin-bottom:24px;
}
.hero-desc strong{color:var(--text-1);font-weight:700}
.hero-actions{display:flex;gap:12px;margin-bottom:28px;flex-wrap:wrap}
.btn-hero{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:12px;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  transition:all var(--ease);position:relative;overflow:hidden;
  border:1px solid var(--border);
}
.btn-hero.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border-color:transparent;box-shadow:0 8px 24px var(--accent-glow);
}
.btn-hero.primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.2), transparent);
  opacity:0;transition:opacity var(--ease);
}
.btn-hero.primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 30px var(--accent-glow)}
.btn-hero.primary:hover::before{opacity:1}
.btn-hero.secondary{background:var(--bg-card);color:var(--text-1);border-color:var(--border-2)}
.btn-hero.secondary:hover{background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat-card{
  background:linear-gradient(180deg, var(--bg-card), color-mix(in srgb, var(--bg-card) 90%, transparent));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;position:relative;overflow:hidden;
  transition:all var(--ease);cursor:default;
  box-shadow:var(--shadow-sm);
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0;transition:opacity var(--ease);
}
.stat-card:hover{transform:translateY(-3px) scale(1.02);border-color:var(--border-2);box-shadow:var(--shadow-md), 0 0 20px var(--accent-glow)}
.stat-card:hover::before{opacity:1}
.stat-icon{font-size:18px;margin-bottom:8px;width:32px;height:32px;display:grid;place-items:center;background:var(--bg-2);border-radius:8px;border:1px solid var(--border)}
.stat-content{display:flex;flex-direction:column}
.stat-number{font-size:22px;font-weight:800;line-height:1;letter-spacing:-.02em}
.stat-label{font-size:11px;color:var(--text-3);font-weight:600;margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.stat-sparkle{
  position:absolute;top:10px;right:10px;width:4px;height:4px;
  background:var(--accent);border-radius:50%;box-shadow:0 0 10px var(--accent);
  animation:sparkle 2s ease-in-out infinite;
}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}
/* CODE WINDOW */
.hero-right{position:relative}
.code-window{
  background:var(--bg-code);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.03) inset;
  position:relative;transform:rotate(-1deg);
  transition:transform var(--ease);
}
.code-window:hover{transform:rotate(0) scale(1.01)}
.code-window-header{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:var(--bg-2);
  border-bottom:1px solid var(--border);
}
.window-dots{display:flex;gap:6px}
.dot{width:10px;height:10px;border-radius:50%}
.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}
.window-title{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-2);
}
.window-badge{
  font-size:10px;font-weight:800;letter-spacing:.05em;
  background:var(--success-soft);color:var(--success);
  border:1px solid color-mix(in srgb, var(--success) 20%, transparent);
  padding:3px 8px;border-radius:99px;
}
.window-actions{margin-left:auto}
.code-window-body{position:relative;padding:20px;overflow:auto}
.code-content{
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  color:var(--text-2);white-space:pre-wrap;word-break:break-word;
}
.c-key{color:#c084fc}.c-var{color:#60a5fa}.c-fn{color:#fbbf24}.c-str{color:#34d399}.c-prop{color:#a5b4fc}.c-comment{color:var(--text-3);font-style:italic}
.code-glow{
  position:absolute;bottom:-20px;right:-20px;width:200px;height:200px;
  background:radial-gradient(circle, var(--accent-glow), transparent 70%);
  pointer-events:none;filter:blur(20px);
}
.code-window-footer{
  display:flex;justify-content:space-between;
  padding:10px 16px;background:var(--bg-2);
  border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:11px;color:var(--text-3);
}
.footer-stat{display:flex;align-items:center;gap:6px}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);animation:dotPulse 1.5s infinite}
.floating-card{
  position:absolute;background:var(--bg-card);
  border:1px solid var(--border);border-radius:12px;
  padding:10px 14px;display:flex;align-items:center;gap:8px;
  box-shadow:var(--shadow-md);font-size:12px;font-weight:600;
  animation:floatCard 4s ease-in-out infinite;
}
.floating-card.card-1{top:-12px;right:20px;animation-delay:0s}
.floating-card.card-2{bottom:20px;left:-20px;animation-delay:1.5s}
.fc-icon{width:28px;height:28px;display:grid;place-items:center;background:var(--accent-soft);border-radius:8px;font-size:14px}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* FILTER BAR */
.filter-bar{
  position:sticky;top:var(--topbar-h);z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:color-mix(in srgb, var(--bg-0) 80%, transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--border);
  gap:16px;flex-wrap:wrap;
}
.filter-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.filter-tabs::-webkit-scrollbar{display:none}
.filter-tab{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:99px;
  background:var(--bg-2);border:1px solid var(--border);
  color:var(--text-2);font-size:13px;font-weight:600;
  white-space:nowrap;transition:all var(--ease);cursor:pointer;
}
.filter-tab:hover{background:var(--bg-3);color:var(--text-1);transform:translateY(-1px)}
.filter-tab.active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border-color:transparent;box-shadow:0 4px 12px var(--accent-glow);
}
.tab-count{
  font-family:var(--font-mono);font-size:11px;
  background:rgba(255,255,255,.15);padding:2px 7px;border-radius:99px;min-width:20px;text-align:center;
}
.filter-tab:not(.active) .tab-count{background:var(--bg-3);color:var(--text-3)}
.filter-right{font-size:12px;color:var(--text-3)}
/* LOADING */
.loading-container{padding:40px 28px;max-width:1280px;margin:0 auto}
.loading-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:32px}
.skeleton-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
  position:relative;overflow:hidden;
}
.skeleton-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform:translateX(-100%);animation:shimmer 1.5s infinite;
}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-line{height:12px;background:var(--bg-3);border-radius:6px;margin-bottom:12px}
.skeleton-line.w-30{width:30%}.w-40{width:40%}.w-35{width:35%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-80{width:80%}.w-90{width:90%}
.loading-text{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-2)}
.loading-spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ERROR */
.error-container{
  text-align:center;padding:80px 28px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.error-icon{font-size:48px;animation:shake .5s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.btn-retry{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;background:var(--accent);color:#fff;
  border-radius:10px;font-weight:700;font-size:13px;
  box-shadow:0 4px 12px var(--accent-glow);transition:all var(--ease);
}
.btn-retry:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--accent-glow)}
/* CONTENT */
.content{padding:28px;max-width:1280px;margin:0 auto}
.endpoint-section{margin-bottom:40px;content-visibility:auto;contain-intrinsic-size:0 500px;animation:fadeIn .6s var(--ease) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.section-header{
  display:flex;align-items:center;gap:12px;
  margin-bottom:20px;padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.section-icon{
  width:36px;height:36px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:10px;font-size:16px;
}
.section-icon.ai{background:linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.15));border-color:rgba(99,102,241,.3)}
.section-icon.dl{background:linear-gradient(135deg, rgba(16,185,129,.15), rgba(6,182,212,.15));border-color:rgba(16,185,129,.3)}
.section-icon.ul{background:linear-gradient(135deg, rgba(245,158,11,.15), rgba(236,72,153,.15));border-color:rgba(245,158,11,.3)}
.section-icon.tools{background:linear-gradient(135deg, rgba(139,92,246,.15), rgba(99,102,241,.15));border-color:rgba(139,92,246,.3)}
.section-header h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.section-count{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-3);background:var(--bg-2);border:1px solid var(--border);padding:4px 10px;border-radius:99px}
.endpoint-list{display:grid;gap:14px}
.endpoint-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  transition:all var(--ease);position:relative;
  box-shadow:var(--shadow-sm);
}
.endpoint-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(600px circle at var(--mouse-x,0) var(--mouse-y,0), var(--accent-soft), transparent 40%);
  opacity:0;transition:opacity .3s;pointer-events:none;z-index:0;
}
.endpoint-card:hover::before{opacity:1}
.endpoint-card:hover{border-color:var(--border-2);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card-header{
  position:relative;z-index:1;
  padding:16px 18px;display:flex;align-items:center;gap:12px;
  cursor:pointer;user-select:none;
}
.method-badge{
  font-family:var(--font-mono);font-size:10px;font-weight:800;
  padding:5px 9px;border-radius:6px;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid;
}
.method-badge.get{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb, var(--success) 30%, transparent)}
.method-badge.post{background:rgba(245,158,11,.12);color:var(--warning);border-color:rgba(245,158,11,.3)}
.endpoint-url{font-family:var(--font-mono);font-size:13.5px;font-weight:600;color:var(--text-1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-actions{display:flex;gap:8px;margin-left:auto;flex-shrink:0}
.btn-sm{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;font-size:12px;font-weight:600;
  border-radius:8px;border:1px solid var(--border);
  background:var(--bg-2);color:var(--text-2);transition:all var(--ease);
  position:relative;overflow:hidden;
}
.btn-sm:hover{background:var(--bg-3);color:var(--text-1);border-color:var(--border-2);transform:translateY(-1px)}
.btn-sm.try{
  background:linear-gradient(135deg,var(--accent-soft), rgba(139,92,246,.12));
  color:var(--accent-2);border-color:color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-sm.try:hover{background:var(--accent);color:#fff;box-shadow:0 4px 12px var(--accent-glow)}
.caret{color:var(--text-3);transition:transform var(--ease);flex-shrink:0}
.endpoint-card.expanded .caret{transform:rotate(180deg)}
.card-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1);
}
.endpoint-card.expanded .card-body{grid-template-rows:1fr}
.card-body-inner{
  overflow:hidden;min-height:0;
  padding:0 18px;background:color-mix(in srgb, var(--bg-0) 50%, var(--bg-card));
  border-top:1px solid var(--border);
}
.card-body-inner > div{padding:20px 0}
.detail-section{margin-bottom:22px}
.detail-section:last-child{margin-bottom:0}
.detail-section h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.detail-section h4::before{content:'';width:3px;height:12px;background:var(--accent);border-radius:99px}
.params-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.params-table th{
  text-align:left;padding:10px 14px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);
  background:var(--bg-2);border-bottom:1px solid var(--border);
}
.params-table td{padding:12px 14px;font-size:13px;border-bottom:1px solid var(--border);color:var(--text-2)}
.params-table tr:last-child td{border-bottom:none}
.param-name{color:var(--text-code);font-family:var(--font-mono);font-weight:700}
.param-type{font-size:11px;font-family:var(--font-mono);background:var(--bg-3);padding:2px 7px;border-radius:5px;color:var(--text-3)}
.param-required{font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px}
.param-required.yes{background:var(--danger-soft);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 20%, transparent)}
.param-required.no{background:var(--bg-3);color:var(--text-3);border:1px solid var(--border)}
.code-block{background:var(--bg-code);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.code-block-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--bg-2);border-bottom:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase;
}
.code-block pre{padding:14px;overflow-x:auto;font-family:var(--font-mono);font-size:12.5px;line-height:1.6}
.code-key{color:#a78bfa}.code-str{color:#34d399}.code-num{color:#fbbf24}
/* FOOTER */
.footer{padding:24px 28px;border-top:1px solid var(--border);margin-top:40px}
.footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-3);flex-wrap:wrap;gap:10px}
.footer-links a{color:var(--text-3);transition:color var(--ease)}.footer-links a:hover{color:var(--accent)}
/* MODAL */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  backdrop-filter:blur(16px) saturate(1.2);
  display:none;align-items:center;justify-content:center;
  z-index:200;padding:20px;
}
.modal-overlay.active{display:flex;animation:modalFade .3s var(--ease)}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:640px;max-height:90dvh;overflow:auto;
  background:var(--bg-modal);border:1px solid var(--border-2);
  border-radius:18px;box-shadow:var(--shadow-lg);
  animation:modalPop .4s var(--ease-bounce);
}
@keyframes modalPop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{
  position:sticky;top:0;z-index:1;
  padding:20px 24px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  background:color-mix(in srgb, var(--bg-modal) 90%, transparent);
  backdrop-filter:blur(12px);
}
.modal-header-left{display:flex;align-items:center;gap:12px}
.modal-icon{width:36px;height:36px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);border-radius:10px;color:var(--accent)}
.modal-header h3{font-size:16px;font-weight:800;letter-spacing:-.01em}
.modal-subtitle{font-size:12px;color:var(--text-3)}
.modal-close{width:36px;height:36px;display:grid;place-items:center;font-size:20px;color:var(--text-3);background:var(--bg-2);border:1px solid var(--border);border-radius:10px;transition:all var(--ease)}
.modal-close:hover{background:var(--bg-3);color:var(--text-1);transform:rotate(90deg)}
.modal-body{padding:22px 24px}
.modal-url{
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  background:var(--bg-code);border:1px solid var(--border);
  padding:12px 14px;border-radius:10px;color:var(--accent-2);
  margin-bottom:18px;word-break:break-all;
}
.modal-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:18px;margin-bottom:18px}
.modal-params h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.modal-param-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.modal-param-row label{font-size:12px;font-weight:600;color:var(--text-2)}
.modal-param-row input,.modal-param-row select{
  width:100%;padding:10px 12px;background:var(--bg-input);
  border:1px solid var(--border);border-radius:10px;
  color:var(--text-1);font-size:13px;outline:none;
  transition:border-color var(--ease), box-shadow var(--ease);
}
.modal-param-row input:focus,.modal-param-row select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.modal-param-row select option{background:var(--bg-modal)}
.side-info{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:14px}
.side-info h4{font-size:12px;font-weight:700;margin-bottom:8px}
.side-info ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-3)}
.side-info li::before{content:'•';color:var(--accent);margin-right:6px;font-weight:800}
.btn-send{
  width:100%;padding:13px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border-radius:12px;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 20px var(--accent-glow);transition:all var(--ease);
  position:relative;overflow:hidden;
}
.btn-send:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--accent-glow)}
.btn-send.loading{opacity:.7;pointer-events:none}
.btn-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);animation:shine 2s infinite}
.modal-response{margin-top:20px;background:var(--bg-code);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.response-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--bg-2);border-bottom:1px solid var(--border)}
.response-header h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.modal-response pre{padding:14px;max-height:300px;overflow:auto;font-family:var(--font-mono);font-size:12px;line-height:1.6}
/* CMD PALETTE */
.cmd-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(12px);display:none;align-items:flex-start;
  justify-content:center;padding-top:20vh;z-index:300;
}
.cmd-overlay.active{display:flex;animation:modalFade .2s var(--ease)}
.cmd-palette{
  width:100%;max-width:560px;background:var(--bg-modal);
  border:1px solid var(--border-2);border-radius:18px;
  box-shadow:var(--shadow-lg);overflow:hidden;
  animation:modalPop .35s var(--ease-bounce);
}
.cmd-search{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--border);
}
.cmd-search input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text-1);font-size:15px;font-family:var(--font-sans);
}
.cmd-search kbd{font-family:var(--font-mono);font-size:11px;background:var(--bg-3);border:1px solid var(--border);padding:3px 7px;border-radius:6px;color:var(--text-3)}
.cmd-list{max-height:360px;overflow:auto;padding:8px}
.cmd-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;
  cursor:pointer;transition:all var(--ease);
  border:1px solid transparent;
}
.cmd-item:hover,.cmd-item.active{background:var(--bg-2);border-color:var(--border);color:var(--text-1)}
.cmd-item-icon{width:32px;height:32px;display:grid;place-items:center;background:var(--bg-3);border-radius:8px;font-size:14px}
.cmd-item-text{flex:1}
.cmd-item-name{font-size:13px;font-weight:600;color:var(--text-1)}
.cmd-item-desc{font-size:11px;color:var(--text-3)}
.cmd-empty{padding:40px 20px;text-align:center;color:var(--text-3);font-size:13px}
.cmd-footer{
  display:flex;gap:16px;padding:12px 18px;
  background:var(--bg-2);border-top:1px solid var(--border);
  font-size:11px;color:var(--text-3);
}
.cmd-footer kbd{font-family:var(--font-mono);background:var(--bg-3);border:1px solid var(--border);padding:2px 6px;border-radius:4px;margin-right:4px}
/* TOAST */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:400;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-lg);font-size:13px;font-weight:600;
  color:var(--text-1);pointer-events:auto;
  animation:toastIn .4s var(--ease-bounce);
  min-width:260px;max-width:400px;
}
.toast.removing{animation:toastOut .3s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px) scale(.98)}}
.toast.success{border-left:3px solid var(--success)}
.toast.error{border-left:3px solid var(--danger)}
.toast.info{border-left:3px solid var(--accent)}
/* UTIL */
.hidden{display:none !important}
.hide-mobile{display:inline}
@media (max-width:1100px){
  .hero-inner{grid-template-columns:1fr;gap:28px}
  .hero-right{order:-1}
  .code-window{transform:rotate(0)}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  :root{--sidebar-w:100vw}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .sidebar-close{display:grid}
  .sidebar-overlay.active{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:99;display:block}
  .main{margin-left:0}
  .menu-toggle{display:grid}
  .topbar{padding:0 16px}
  .hide-mobile{display:none !important}
  .hero{padding:28px 16px}
  .filter-bar{padding:12px 16px;top:var(--topbar-h)}
  .content{padding:16px}
  .modal-grid{grid-template-columns:1fr}
  .floating-card{display:none}
  .hero-stats{grid-template-columns:1fr 1fr}
  .code-window-body{padding:14px}
  .code-content{font-size:12px}
}
@media (max-width:480px){
  .hero-stats{grid-template-columns:1fr}
  .hero-actions{flex-direction:column}
  .btn-hero{justify-content:center}
}
/* Focus visible */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════════════════════
   RESIZE COMPATIBLE ENHANCEMENTS — Mobile + PC
   Keep UI same, only add compatibility layer
   ═══════════════════════════════════════════════════════════ */

/* Fluid root — sidebar width is now dynamic */
:root{
  --sidebar-w-min:260px;
  --sidebar-w-max:420px;
  --sidebar-w-default:300px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-top:env(safe-area-inset-top, 0px);
}

/* Edge swipe area for mobile drawer */
.edge-swipe{
  position:fixed;top:0;left:0;width:20px;height:100dvh;
  z-index:98;touch-action:pan-y;
  display:none;
}
@media (max-width:768px){
  .edge-swipe{display:block}
}

/* Sidebar resize handle — PC only */
.sidebar-resize-handle{
  position:absolute;top:0;right:-6px;width:12px;height:100%;
  cursor:col-resize;z-index:10;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;
}
.sidebar-resize-handle .resize-line{
  width:2px;height:100%;background:transparent;
  transition:background var(--ease), width var(--ease);
  border-radius:2px;
}
.sidebar:hover .sidebar-resize-handle .resize-line,
.sidebar-resize-handle.dragging .resize-line{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  width:3px;box-shadow:0 0 12px var(--accent-glow);
}
.sidebar-resize-handle .resize-tooltip{
  position:absolute;left:16px;top:50%;transform:translateY(-50%) translateX(-8px);
  background:var(--bg-card);border:1px solid var(--border);
  color:var(--text-2);font-size:11px;font-weight:600;
  padding:6px 10px;border-radius:8px;white-space:nowrap;
  box-shadow:var(--shadow-md);opacity:0;pointer-events:none;
  transition:opacity var(--ease), transform var(--ease);
}
.sidebar-resize-handle:hover .resize-tooltip{
  opacity:1;transform:translateY(-50%) translateX(0);
}
@media (max-width:1024px){
  .sidebar-resize-handle{display:none}
}

/* Resizing state */
body.resizing{user-select:none !important;cursor:col-resize !important}
body.resizing .sidebar{transition:none !important}
body.resizing .main{transition:none !important;pointer-events:none}
body.resizing *{cursor:col-resize !important}

/* Mobile Bottom Bar — only mobile */
.mobile-bottom-bar{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(64px + var(--safe-bottom));
  padding:8px 8px calc(8px + var(--safe-bottom));
  background:color-mix(in srgb, var(--bg-sidebar) 88%, transparent);
  backdrop-filter:blur(24px) saturate(1.4);
  border-top:1px solid var(--border);
  display:none;align-items:center;justify-content:space-around;
  z-index:90;gap:4px;
}
.mbb-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 6px;border-radius:12px;
  background:transparent;border:1px solid transparent;
  color:var(--text-3);font-size:10px;font-weight:700;
  transition:all var(--ease);
}
.mbb-btn svg{transition:transform var(--ease)}
.mbb-btn:hover,.mbb-btn.active{background:var(--bg-2);color:var(--text-1);border-color:var(--border)}
.mbb-btn:active{transform:scale(.96)}
.mbb-btn.active{color:var(--accent-2);background:var(--accent-soft);border-color:color-mix(in srgb, var(--accent) 20%, transparent)}

/* Fluid typography & spacing — keep UI but make it resize compatible */
.hero{padding:clamp(24px, 5vw, 48px) clamp(16px, 3vw, 28px) clamp(28px, 4vw, 36px)}
.content{padding:clamp(16px, 3vw, 28px)}
.topbar{padding:0 clamp(12px, 2.5vw, 28px)}
.filter-bar{padding:clamp(10px, 1.5vw, 14px) clamp(12px, 2.5vw, 28px)}
.hero-title{font-size:clamp(28px, 6vw, 52px)}
.hero-desc{font-size:clamp(14px, 1.8vw, 16px)}

/* Container query-like fluid grids */
.hero-inner{
  gap:clamp(20px, 4vw, 36px);
}
.hero-stats{
  gap:clamp(8px, 1.5vw, 12px);
}
.endpoint-list{
  gap:clamp(10px, 1.5vw, 14px);
}

/* Card header fluid — prevents overflow on resize */
.card-header{
  gap:clamp(8px, 1.2vw, 12px);
  padding:clamp(12px, 1.8vw, 16px) clamp(12px, 1.8vw, 18px);
  flex-wrap:wrap;
}
.endpoint-url{
  min-width:0;flex:1 1 120px;
}
.card-actions{
  flex-shrink:0;
}
@media (max-width:480px){
  .card-header{flex-wrap:nowrap}
  .endpoint-url{max-width:40vw}
}

/* Filter tabs — scroll snap for mobile */
.filter-tabs{
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.filter-tab{
  scroll-snap-align:start;
  flex-shrink:0;
}

/* Code window fluid */
.code-window-body{
  padding:clamp(12px, 2vw, 20px);
}
.code-content{
  font-size:clamp(11px, 1.4vw, 13px);
}

/* Modal fluid + safe area */
.modal-overlay{
  padding:clamp(12px, 3vw, 20px);
  padding-bottom:calc(clamp(12px, 3vw, 20px) + var(--safe-bottom));
}
.modal{
  max-height:calc(90dvh - var(--safe-bottom) - var(--safe-top));
  max-height:calc(90svh - var(--safe-bottom) - var(--safe-top));
  width:min(640px, 96vw);
}

/* Topbar breadcrumb hide on very small */
@media (max-width:380px){
  .breadcrumb{display:none}
}

/* Sidebar overlay enhanced for touch */
.sidebar-overlay{
  touch-action:pan-y;
  overscroll-behavior:contain;
}

/* Improve sidebar nav for resize */
.sidebar-nav{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Main margin adapts to sidebar width variable */
.main{
  margin-left:var(--sidebar-w);
  transition:margin-left 0s;
}
body.resizing .main{transition:none}

/* When sidebar is overlay on mobile, main margin 0 */
@media (max-width:1024px){
  .main{margin-left:0 !important}
}

/* Fluid footer */
.footer{padding:clamp(16px, 2.5vw, 24px) clamp(12px, 2.5vw, 28px) calc(clamp(16px, 2.5vw, 24px) + var(--safe-bottom))}

/* Fix 100dvh fallback for older browsers */
@supports not (height:100dvh){
  .sidebar{height:100vh}
  .edge-swipe{height:100vh}
  .modal{max-height:90vh}
}

/* Orientation handling */
@media (orientation:landscape) and (max-height:500px){
  .hero{padding:20px 16px}
  .hero-inner{grid-template-columns:1fr 1fr;gap:20px}
  .hero-right{display:block}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
  .mobile-bottom-bar{height:56px;padding:6px 8px}
}

/* Ultra-wide support */
@media (min-width:1536px){
  .hero-inner,.content,.footer-inner{max-width:1440px}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
}

/* Small mobile tweaks */
@media (max-width:360px){
  .hero-badge{font-size:11px;padding:6px 10px}
  .btn-hero{padding:10px 16px;font-size:13px}
  .stat-card{padding:12px}
  .stat-number{font-size:18px}
}

/* Touch improvements */
@media (pointer:coarse){
  .btn-sm,.topbar-btn,.filter-tab,.mbb-btn{min-height:40px}
  .card-header{min-height:56px}
  .nav-item{min-height:44px}
}

/* Resize observer visual feedback */
.sidebar.width-saved .resize-line{
  background:var(--success);width:3px;
  animation:savedFlash 1s ease;
}
@keyframes savedFlash{0%{box-shadow:0 0 0 0 var(--success)}50%{box-shadow:0 0 20px var(--success)}100%{box-shadow:0 0 0 0 transparent}}

/* Prevent horizontal overflow on resize */
body{overflow-x:hidden}
.main,.hero,.content,.filter-bar{max-width:100vw;overflow-x:clip}

/* Smooth resize transition for content when sidebar changes */
@media (min-width:1025px){
  .main{transition:margin-left .22s cubic-bezier(.16,1,.3,1)}
}

/* Mobile bottom bar visible only on mobile */
@media (max-width:768px){
  .mobile-bottom-bar{display:flex}
  body{padding-bottom:calc(64px + var(--safe-bottom))}
  .toast-container{bottom:calc(72px + var(--safe-bottom))}
  .filter-bar{top:var(--topbar-h)}
}

/* Sidebar swipe open hint */
@media (max-width:768px){
  .sidebar{will-change:transform;transition:transform .32s cubic-bezier(.16,1,.3,1)}
}

/* High contrast for resize handle focus */
.sidebar-resize-handle:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}