::-webkit-scrollbar { display: none !important; }

[data-theme="dark"]  { --bg:#181818; --bg2:#212121; --bg3:#1a1a1a; --bg4:#111; --border:#2E2E2E; --border2:#3a3a3a; --t1:#e5e7eb; --t2:#9ca3af; --t3:#6b7280; --t4:#4b5563; }
[data-theme="light"] { --bg:#f4f4f5; --bg2:#ffffff; --bg3:#f0f0f0; --bg4:#e8e8e8; --border:#e4e4e7; --border2:#d4d4d8; --t1:#18181b; --t2:#52525b; --t3:#71717a; --t4:#a1a1aa; }

body { background-color:var(--bg); color:var(--t1); position:relative; scroll-behavior:smooth; letter-spacing:.02em; }
body::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%; min-height:100vh; z-index:-1;
  background-image: linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
  background-size:40px 40px; pointer-events:none;
}

/* Sidebar */
#sidebar { background-color:var(--bg); border-color:var(--border); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
#overlay { transition:opacity 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s cubic-bezier(0.4,0,0.2,1); }
#overlay.show { opacity:1 !important; visibility:visible !important; }
@media (max-width: 767px) {
  #sidebar { transform:translateX(-100%); }
  #sidebar.open { transform:translateX(0); }
}
@media (min-width: 768px) {
  body { padding-left:16rem; }
  #sidebar { transform:translateX(0) !important; }
  #overlay { display:none !important; }
  #sidebarToggle, #sidebarClose { display:none !important; }
}

/* Nav */
.nav-item { color:var(--t2); transition:color .15s,background-color .15s; border-radius:.5rem; font-family:'Space Grotesk','system-ui',sans-serif !important; }
.nav-item:hover { color:var(--t1); background-color:var(--bg2); }
.nav-item.active { color:var(--t1); background-color:var(--bg2); }

/* Header */
.header-bar { background-color:var(--bg); border-bottom:1px solid var(--border); }

/* Cards */
.card { background-color:var(--bg2); border:1px solid var(--border); }
.card-inner { background-color:var(--bg3); border:1px solid var(--border); }
.card-dark { background-color:var(--bg4); }

/* Input */
.input-base { background-color:var(--bg3); border:1px solid var(--border); color:var(--t1); }
.input-base:focus { outline:none; border-color:var(--border2); }
.input-base::placeholder { color:var(--t3); }
select.input-base { background-image:none; }
select.input-base option { background-color:var(--bg2); color:var(--t1); }

/* Text utils */
.t1 { color:var(--t1); }
.t2 { color:var(--t2); }
.t3 { color:var(--t3); }
.t4 { color:var(--t4); }
.border-c { border-color:var(--border); }

/* Animations */
.fade-in { animation:fadeIn 0.25s ease-out forwards; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.slide-down { animation:slideDown 0.2s ease-out forwards; }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* Endpoint */
.endpoint-body { display:none; }
.endpoint-body.open { display:block; }
.endpoint-icon { transition:transform 0.2s ease; }
.endpoint-icon.rotated { transform:rotate(180deg); }
.folder-card { transition:border-color 0.15s, background-color 0.15s; }
.folder-card:hover { border-color:var(--border2) !important; }

/* Method badges */
.method-badge { display:inline-flex; align-items:center; padding:2px 8px; font-size:11px; font-weight:700; border-radius:4px; border:1px solid; flex-shrink:0; font-family:'Ubuntu Mono',monospace; }
[data-theme="dark"] .method-get   { color:#4ade80; background:#052e16; border-color:#14532d; }
[data-theme="dark"] .method-post  { color:#60a5fa; background:#0c1a3a; border-color:#1e3a5f; }
[data-theme="dark"] .method-other { color:#facc15; background:#1a1200; border-color:#3d2e00; }
[data-theme="light"] .method-get   { color:#15803d; background:#f0fdf4; border-color:#bbf7d0; }
[data-theme="light"] .method-post  { color:#1d4ed8; background:#eff6ff; border-color:#bfdbfe; }
[data-theme="light"] .method-other { color:#b45309; background:#fffbeb; border-color:#fde68a; }

/* Tab */
.tab-container { position:relative; }
.tab-indicator { position:absolute; bottom:0; height:1.5px; background-color:var(--t1); transition:all 0.2s cubic-bezier(0.4,0,0.2,1); }

/* hljs scoped */
pre code.hljs { display:block; overflow-x:auto; padding:0; }
code.hljs { padding:3px 5px; }
.hljs { background:transparent; color:#e6edf3; }
.hljs-comment,.hljs-punctuation { color:#8b949e; }
.hljs-attr,.hljs-keyword { color:#7ee787; }
.hljs-string,.hljs-title { color:#a5d6ff; }
.hljs-number,.hljs-literal { color:#79c0ff; }
.hljs-built_in { color:#ffa657; }

/* Toast */
#toast-container { position:fixed; bottom:1.25rem; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none; }
.toast { padding:.5rem 1rem; border-radius:.75rem; font-size:.75rem; font-weight:500; pointer-events:auto; animation:toastIn .2s ease-out forwards; opacity:0; white-space:nowrap; }
.toast.hide { animation:toastOut .2s ease-in forwards; }
.toast-success { background-color:#052e16; color:#4ade80; border:1px solid #14532d; }
.toast-info    { background-color:var(--bg2); color:var(--t1); border:1px solid var(--border); }
.toast-error   { background-color:#450a0a; color:#f87171; border:1px solid #7f1d1d; }
@keyframes toastIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(8px); } }

/* Empty state */
.empty-state { display:none; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1rem; text-align:center; }
.empty-state.show { display:flex; }