html { scroll-behavior: smooth; }
  body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #ffffff; color: #09090b; transition: background-color 0.3s, color 0.3s; }
  
  /* Disable all transitions during theme switch to prevent jank */
  html.theme-switching,
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after {
    transition-duration: 0s !important;
  }
  /* But keep the clip-path transition on the snapshot overlay */
  html.theme-switching .theme-transition-snapshot {
    transition: clip-path 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  
  /* Dark Mode Baseline Variables */
  .dark body { background-color: #0f0f12; color: #f0f0f3; }
  
  /* Shadcn UI Scrollbar */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #d4d4d8; }
  .dark ::-webkit-scrollbar-thumb { background: #3a3a42; }
  .dark ::-webkit-scrollbar-thumb:hover { background: #4a4a54; }

  /* Hide scrollbar for sidebar */
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* ═══════════════════════════════════════════════════════════════════════
     SIDEBAR — Unified Responsive System
     ═══════════════════════════════════════════════════════════════════════ */
  
  /* Navigation Items */
  .nav-item { display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:8px; font-size:13px; font-weight:500; color:#71717a; text-decoration:none; transition:all .2s cubic-bezier(0.4, 0, 0.2, 1); white-space:nowrap; position: relative; overflow:hidden; }
  .nav-item:hover { background:#f4f4f5; color:#18181b; }
  .nav-item.active { background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%); color:#09090b; font-weight:600; }
  .nav-item.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:60%; border-radius:0 3px 3px 0; background:#18181b; }
  .dark .nav-item { color: #9d9da6; }
  .dark .nav-item:hover { background:#252529; color:#f0f0f3; }
  .dark .nav-item.active { background: linear-gradient(135deg, #1f1f25 0%, #2a2a30 100%); color:#f0f0f3; }
  .dark .nav-item.active::before { background:#f0f0f3; }
  .nav-item .nav-icon { width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; opacity:0.7; transition:opacity .2s; }
  .nav-item:hover .nav-icon, .nav-item.active .nav-icon { opacity:1; }
  .nav-item .nav-text { transition: opacity .2s, width .2s; overflow:hidden; }

  /* Sidebar Overlay (mobile & tablet) */
  .sidebar-overlay { position:fixed; inset:0; background:rgba(9,9,11,0.6); backdrop-filter:blur(4px); z-index:60; opacity:0; pointer-events:none; transition:opacity .3s cubic-bezier(0.4, 0, 0.2, 1); }
  .sidebar-overlay.active { opacity:1; pointer-events:auto; }

  /* Sidebar Panel */
  .sidebar-panel { position:fixed; top:0; left:0; bottom:0; width:260px; max-width:85vw; background:#ffffff; border-right:1px solid #e4e4e7; z-index:70; display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1), width .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s; box-shadow:none; }
  .sidebar-panel.open { transform:translateX(0); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
  .dark .sidebar-panel { background:#0f0f12; border-right-color:#2a2a30; }

  /* Desktop: sidebar becomes sticky */
  @media (min-width: 1024px) {
    .sidebar-panel { position:sticky; top:0; height:100vh; transform:translateX(0); z-index:auto; max-width:none; width:260px; box-shadow:none; transition: width .3s cubic-bezier(0.4, 0, 0.2, 1); }
    .sidebar-overlay { display:none; }

    /* Collapsed state: icon-only */
    .sidebar-panel.lg-collapsed { width:68px; }
    .sidebar-panel.lg-collapsed .sidebar-header { padding:16px 12px 12px; justify-content:center; }
    .sidebar-panel.lg-collapsed .sidebar-header-content { opacity:0; width:0; height:0; overflow:hidden; position:absolute; }
    .sidebar-panel.lg-collapsed .sidebar-nav-label { opacity:0; height:0; margin:0; padding:0; overflow:hidden; }
    .sidebar-panel.lg-collapsed .nav-item { justify-content:center; padding:12px; border-radius:10px; margin-bottom:6px; overflow:visible; }
    .sidebar-panel.lg-collapsed .nav-item .nav-text { opacity:0; width:0; position:absolute; }
    .sidebar-panel.lg-collapsed .nav-item .nav-icon { opacity:1; width:22px; height:22px; font-size:16px; }
    .sidebar-panel.lg-collapsed .nav-item.active::before { display:none; }
    .sidebar-panel.lg-collapsed .nav-item.active { background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%); }
    .dark .sidebar-panel.lg-collapsed .nav-item.active { background: linear-gradient(135deg, #1f1f25 0%, #2a2a30 100%); }
    .sidebar-panel.lg-collapsed .sidebar-nav-section { padding:0 10px; overflow:visible; }
    .sidebar-panel.lg-collapsed .sidebar-nav-group { margin-bottom:6px; }
    .sidebar-panel.lg-collapsed .sidebar-footer { flex-direction:column; padding:8px; gap:4px; overflow:visible; }
    .sidebar-panel.lg-collapsed .sidebar-footer-btn { padding:8px; }
    .sidebar-panel.lg-collapsed .sidebar-footer-btn .footer-text { display:none; }
  }

  /* Sidebar Header */
  .sidebar-header { display:flex; align-items:flex-start; justify-content:space-between; padding:24px 20px 20px; border-bottom:1px solid #e4e4e7; flex-shrink:0; gap:8px; }
  .dark .sidebar-header { border-bottom-color:#2a2a30; }
  .sidebar-header-content { min-width:0; transition: opacity .2s, width .2s; }
  .sidebar-header-title { font-size:18px; font-weight:700; color:#09090b; letter-spacing:-0.02em; margin:0; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .dark .sidebar-header-title { color:#f0f0f3; }
  .sidebar-header-version { font-size:12px; color:#71717a; font-weight:400; margin-top:3px; white-space:nowrap; }

  /* Collapse icon rotates 180° when sidebar is collapsed (becomes angles-right) */
  .sidebar-collapse-icon { transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1); }
  .sidebar-panel.lg-collapsed .sidebar-collapse-icon { transform: rotate(180deg); }

  /* Sidebar Collapse Button (desktop only, in footer) — removed */

  /* Sidebar Close/Toggle Button */
  .sidebar-close-btn { width:32px; height:32px; border-radius:8px; border:1px solid #e4e4e7; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#71717a; transition:all .2s; flex-shrink:0; }
  .sidebar-close-btn:hover { background:#f4f4f5; color:#09090b; border-color:#d4d4d8; transform:scale(1.05); }
  .dark .sidebar-close-btn { background:#1a1a1f; border-color:#2a2a30; color:#9d9da6; }
  .dark .sidebar-close-btn:hover { background:#252529; color:#f0f0f3; }

  /* Sidebar Nav */
  .sidebar-nav-section { padding:0 12px; transition: padding .3s; }
  .sidebar-nav-group { margin-bottom:16px; }
  .sidebar-nav-label { padding:4px 14px; margin-bottom:4px; font-size:11px; font-weight:600; color:#a1a1aa; text-transform:uppercase; letter-spacing:0.06em; transition: opacity .2s, height .2s, margin .2s, padding .2s; overflow:hidden; }
  .dark .sidebar-nav-label { color:#4a4a54; }

  /* Sidebar Footer */
  .sidebar-footer { padding:20px 12px; border-top:1px solid #e4e4e7; flex-shrink:0; display:flex; align-items:center; gap:8px; transition: flex-direction .3s, padding .3s; margin-top:auto; }
  .dark .sidebar-footer { border-top-color:#2a2a30; }
  .sidebar-footer-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:500; color:#71717a; background:transparent; border:1px solid #e4e4e7; cursor:pointer; transition:all .2s; text-decoration:none; }
  .sidebar-footer-btn:hover { background:#f4f4f5; color:#18181b; }
  .dark .sidebar-footer-btn { color:#9d9da6; border-color:#2a2a30; }
  .dark .sidebar-footer-btn:hover { background:#252529; color:#f0f0f3; }

  /* Tooltip for collapsed icons — only on desktop with hover capability */
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .sidebar-panel.lg-collapsed .nav-item { position:relative; }
    .sidebar-panel.lg-collapsed .nav-item::after { content:attr(data-tooltip); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); background:#1a1a1f; color:#f0f0f3; font-size:12px; font-weight:500; padding:6px 12px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
    .dark .sidebar-panel.lg-collapsed .nav-item::after { background:#f0f0f3; color:#0f0f12; }
    .sidebar-panel.lg-collapsed .nav-item:hover::after { opacity:1; }

    .sidebar-panel.lg-collapsed .sidebar-footer-btn[data-tooltip] { position:relative; overflow:visible; }
    .sidebar-panel.lg-collapsed .sidebar-footer-btn[data-tooltip]::after { content:attr(data-tooltip); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); background:#1a1a1f; color:#f0f0f3; font-size:12px; font-weight:500; padding:6px 12px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
    .dark .sidebar-panel.lg-collapsed .sidebar-footer-btn[data-tooltip]::after { background:#f0f0f3; color:#0f0f12; }
    .sidebar-panel.lg-collapsed .sidebar-footer-btn[data-tooltip]:hover::after { opacity:1; }

    /* Collapse toggle button tooltip — always visible (both expanded & collapsed) */
    .sidebar-collapse-toggle[data-tooltip] { position:relative; }
    .sidebar-collapse-toggle[data-tooltip]::after { content:attr(data-tooltip); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); background:#1a1a1f; color:#f0f0f3; font-size:12px; font-weight:500; padding:6px 12px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,0.15); }
    .dark .sidebar-collapse-toggle[data-tooltip]::after { background:#f0f0f3; color:#0f0f12; }
    .sidebar-collapse-toggle[data-tooltip]:hover::after { opacity:1; }
  }

  /* Theme button icon size when collapsed — match nav icons */
  @media (min-width: 1024px) {
    .sidebar-panel.lg-collapsed .sidebar-footer-btn i { font-size:16px; }
  }

  /* Top Bar (mobile/tablet) */
  .topbar { position:fixed; top:0; left:0; right:0; height:56px; background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); border-bottom:1px solid #e4e4e7; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:0 16px; transition:transform .3s, box-shadow .3s; }
  .dark .topbar { background:rgba(15,15,18,0.85); border-bottom-color:#2a2a30; }
  .topbar-hidden { transform:translateY(-100%); }
  @media (min-width: 1024px) { .topbar { display:none; } }
  
  /* Method Badges */
  .badge-get  { display:inline-flex; align-items:center; padding:3px 10px; border-radius:4px; font-size:11px; font-weight:700; background:#2563eb; color:#ffffff; text-transform: uppercase; letter-spacing: 0.04em; font-family: ui-monospace, monospace; }
  .badge-post { display:inline-flex; align-items:center; padding:3px 10px; border-radius:4px; font-size:11px; font-weight:700; background:#16a34a; color:#ffffff; text-transform: uppercase; letter-spacing: 0.04em; font-family: ui-monospace, monospace; }
  .dark .badge-get  { background:#3b82f6; color:#ffffff; }
  .dark .badge-post { background:#22c55e; color:#ffffff; }
  
  /* Cards & Containers */
  .code-container { margin-top: 24px; display: none; }
  .card-wrap { border-radius: 0.75rem; border: 1px solid #e4e4e7; background-color: #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.3s; }
  .dark .card-wrap { border-color: #2a2a30; background-color: #13131a; }
  .dark .card-header { border-color: #2a2a30; background-color: #1a1a1f; }
  
  /* JSON Code Box */
  .code { background:#09090b; color:#f4f4f5; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:13px; line-height:1.6; padding:20px; overflow-x:auto; white-space:pre; border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; max-height: 500px; overflow-y: auto;}
  .k  { color:#818cf8; } /* Key */
  .s  { color:#a3e635; } /* String */
  .n  { color:#f87171; } /* Number */
  .b  { color:#c084fc; } /* Boolean */
  
  /* Modern Table with Sticky Header */
  .code-table-container { background:#ffffff; font-size:13px; line-height:1.6; overflow-x:auto; border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; padding: 0; max-height: 500px; overflow-y: auto; transition: background-color 0.3s;}
  .dark .code-table-container { background:#13131a; }
  .ctable { width: 100%; border-collapse: collapse; text-align: left; }
  .ctable th, .ctable td { padding: 12px 16px; border-bottom: 1px solid #e4e4e7; vertical-align: middle; transition: background-color 0.2s ease, border-color 0.3s; }
  .dark .ctable th, .dark .ctable td { border-bottom-color: #2a2a30; }
  .ctable th { color: #71717a; font-weight: 500; white-space: nowrap; position: sticky; top: 0; background: rgba(250, 250, 250, 0.9); backdrop-filter: blur(8px); z-index: 10; box-shadow: 0 1px 0 #e4e4e7; transition: all 0.3s;}
  .dark .ctable th { background: rgba(26, 26, 31, 0.9); box-shadow: 0 1px 0 #2a2a30; color: #9d9da6; }
  .ctable tr { transition: transform 0.2s ease, background-color 0.2s; }
  .ctable tr:hover { background-color: #f4f4f5; }
  .dark .ctable tr:hover { background-color: #1a1a1f; }
  .dark .ctable td { color: #d4d4d8; }
  .ctable tr:last-child td { border-bottom: 0; }

  /* Colors for Table Values */
  .ts { color: #15803d; } .dark .ts { color: #4ade80; }
  .tn { color: #c2410c; } .dark .tn { color: #fb923c; }
  .tb { color: #b91c1c; } .dark .tb { color: #f87171; }

  /* Shadcn Buttons */
  .btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#18181b; color:#fafafa; border:none; padding:0 16px; height: 38px; font-size:14px; font-weight:500; border-radius:6px; cursor:pointer; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
  .btn-primary:hover { background:#27272a; transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
  .btn-primary:active { transform: scale(0.98); }
  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
  .dark .btn-primary { background:#f0f0f3; color:#0f0f12; }
  .dark .btn-primary:hover { background:#d4d4d8; }
  
  .btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#ffffff; color:#18181b; border:1px solid #e4e4e7; padding:0 16px; height: 38px; font-size:14px; font-weight:500; border-radius:6px; cursor:pointer; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); }
  .btn-outline:hover { background:#f4f4f5; color:#18181b; transform: translateY(-1px); }
  .dark .btn-outline { background:#0f0f12; color:#f0f0f3; border-color:#2a2a30; }
  .dark .btn-outline:hover { background:#1a1a1f; color:#f0f0f3; }

  .btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; color:#71717a; border:none; padding:0 12px; height: 32px; font-size:13px; font-weight:500; border-radius:6px; cursor:pointer; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); }
  .btn-ghost:hover { background:#f4f4f5; color:#18181b; }
  .dark .btn-ghost { color:#9d9da6; }
  .dark .btn-ghost:hover { background:#252529; color:#f0f0f3; }

  /* Dark Ghost Buttons for Snippet Header */
  .btn-ghost-dark { display:inline-flex; align-items:center; justify-content:center; background:transparent; color:#a1a1aa; border:none; padding:0 8px; height: 32px; font-size:13px; border-radius:6px; cursor:pointer; transition:all .2s; }
  .btn-ghost-dark:hover { background:rgba(255,255,255,0.05); color:#f4f4f5; }

  /* Shadcn Tabs */
  .tabs-list { display: inline-flex; height: 36px; align-items: center; justify-content: center; border-radius: 8px; background-color: #f4f4f5; padding: 4px; transition: background-color 0.3s;}
  .dark .tabs-list { background-color: #1a1a1f; }
  .tab-trigger { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border-radius: 6px; padding: 2px 12px; font-size: 13px; font-weight: 500; color: #71717a; transition: all 0.2s; cursor: pointer; border: none; background: transparent; }
  .dark .tab-trigger { color: #9d9da6; }
  .tab-trigger:hover { color: #18181b; }
  .dark .tab-trigger:hover { color: #f0f0f3; }
  .tab-trigger[data-state="active"] { background-color: #ffffff; color: #09090b; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .dark .tab-trigger[data-state="active"] { background-color: #252529; color: #f0f0f3; }

  /* API Parameter Table — scrollable on mobile */
  .ptable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 24px; border-radius: 0.5rem; border: 1px solid #e4e4e7; transition: border-color 0.3s; }
  .dark .ptable-wrap { border-color: #2a2a30; }
  .ptable { width:100%; border-collapse:collapse; font-size:13px; margin-bottom: 0; min-width: 420px; }
  .ptable th { text-align:left; padding:10px 14px; color:#71717a; font-weight:500; border-bottom:1px solid #e4e4e7; background:#fafafa; transition: border-color 0.3s; white-space: nowrap; }
  .ptable td { padding:10px 14px; border-bottom:1px solid #f4f4f5; color:#27272a; transition: border-color 0.3s; vertical-align: top; }
  .ptable tr:last-child td { border-bottom: 0; }
  .ptable code { font-family: ui-monospace, monospace; background: #f4f4f5; padding: 2px 6px; border-radius: 4px; color:#18181b; font-size:12px; border: 1px solid #e4e4e7; white-space: nowrap; }
  .dark .ptable th { border-bottom-color: #2a2a30; color: #9d9da6; background: #1a1a1f; }
  .dark .ptable td { border-bottom-color: #2a2a30; color: #d4d4d8; }
  .dark .ptable code { background: #252529; color: #f0f0f3; border-color: #3a3a42; }
  
  .req { display:inline-flex; align-items:center; margin-left:6px; font-size:10px; font-weight:600; color:#dc2626; background:#fef2f2; border:1px solid #fecaca; border-radius:3px; padding:0 5px; height:16px; white-space:nowrap; vertical-align:middle; }
  .opt { display:inline-flex; align-items:center; margin-left:6px; font-size:10px; font-weight:600; color:#71717a; background:#f4f4f5; border:1px solid #e4e4e7; border-radius:3px; padding:0 5px; height:16px; white-space:nowrap; vertical-align:middle; }
  .dark .req { color:#f87171; background:#2a1215; border-color:#5c1d1d; }
  .dark .opt { color:#9d9da6; background:#252529; border-color:#3a3a42; }
  .ptable td:first-child { white-space: nowrap; }
  
  /* Layout specific */
  .sec-label { font-size:20px; font-weight:600; letter-spacing:-0.025em; color:#09090b; margin-bottom:8px; border-bottom: 1px solid #e4e4e7; padding-bottom: 12px; transition: border-color 0.3s, color 0.3s;}
  .dark .sec-label { border-bottom-color: #2a2a30; color: #f0f0f3; }
  .ep-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; margin-top:28px; flex-wrap: wrap; }
  .ep-path { font-family: ui-monospace, monospace; font-size:14px; font-weight:600; color:#09090b; transition: color 0.3s; word-break: break-all; }
  @media (min-width: 640px) { .ep-path { font-size:16px; } }
  .dark .ep-path { color: #f0f0f3; }
  .ep-desc { font-size:14px; color:#71717a; line-height:1.6; margin-bottom:20px; transition: color 0.3s;}
  .dark .ep-desc { color: #9d9da6; }

  /* card-header responsive */
  .card-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #e4e4e7; background-color: #fafafa; flex-wrap: wrap; gap: 6px; transition: all 0.3s; }
  .dark .card-header { border-color: #2a2a30; background-color: #1a1a1f; }
  
  /* Inputs */
  .input-container { border: 1px solid #e4e4e7; border-radius: 0.75rem; padding: 0; background-color: #ffffff; margin-bottom: 24px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04); transition: all 0.3s ease; overflow: hidden; }
  .dark .input-container { background-color: #13131a; border-color: #2a2a30; }
  .playground-header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background-color: #fafafa; border-bottom: 1px solid #e4e4e7; }
  .dark .playground-header { background-color: #18181b; border-bottom-color: #2a2a30; }
  .playground-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; }
  .dark .playground-title { color: #9d9da6; }
  .playground-body { padding: 20px; }
  .input-container.has-body > .playground-body { padding: 20px; }
  .input-field { display: flex; height: 38px; width: 100%; border-radius: 6px; border: 1px solid #e4e4e7; background-color: #ffffff; padding: 8px 12px; font-size: 14px; transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); outline: none; color: #09090b; }
  .dark .input-field { background-color: #0f0f12; border-color: #3a3a42; color: #f0f0f3; }
  .input-field:focus { outline: none; border-color: #18181b; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 0 0 1px #18181b; transform: translateY(-1px); }
  .dark .input-field:focus { border-color: #6b6b76; box-shadow: 0 0 0 1px #6b6b76; }
  select.input-field option { background-color: #ffffff; color: #09090b; }
  .dark select.input-field option { background-color: #0f0f12; color: #f0f0f3; }

  /* Skeletons */
  .skeleton-wrapper { display: none; margin-top: 24px; }
  .skel-card { border-radius: 0.75rem; border: 1px solid #e4e4e7; padding: 24px; background-color: #ffffff; }
  .dark .skel-card { background-color: #1a1a1f; border-color: #2a2a30; }
  .pulse-line { height: 16px; border-radius: 4px; background-color: #e4e4e7; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; margin-bottom: 12px; }
  .dark .pulse-line { background-color: #3a3a42; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

  /* Status Badges within code box */
  .status-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 4px; font-family: ui-monospace, monospace; display:inline-flex; align-items: center; letter-spacing: 0.04em; }
  .status-ok   { background: #16a34a; color: #ffffff; }
  .status-warn { background: #d97706; color: #ffffff; }
  .status-err  { background: #dc2626; color: #ffffff; }
  .dark .status-ok   { background: #22c55e; color: #ffffff; }
  .dark .status-warn { background: #f59e0b; color: #ffffff; }
  .dark .status-err  { background: #ef4444; color: #ffffff; }

  /* Toasts */
  .toast { pointer-events: auto; background-color: #ffffff; border: 1px solid #e4e4e7; color: #09090b; padding: 16px; border-radius: 8px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; }
  .dark .toast { background-color: #1a1a1f; color: #f0f0f3; border-color: #2a2a30; }
  .toast-icon { color: #18181b; font-size: 16px; }

  /* Top Progress Bar */
  #top-progress { position: fixed; top: 0; left: 0; height: 3px; background-color: #18181b; z-index: 100; transition: width 0.3s ease, opacity 0.3s ease; width: 0; opacity: 0; pointer-events: none; }
  .dark #top-progress { background-color: #f0f0f3; }

  /* Code Snippets Section */
  .snip-wrap { background-color: #09090b; border-radius: 0.75rem; border: 1px solid #27272a; margin-bottom: 24px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
  .snip-header { display: flex; align-items: center; justify-content: space-between; background-color: #18181b; padding: 8px 16px; border-bottom: 1px solid #27272a; }
  
  .snip-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; flex-wrap: nowrap; }
  .snip-tabs::-webkit-scrollbar { display: none; }
  .snip-tab { font-size: 13px; font-weight: 500; color: #a1a1aa; padding: 6px 14px; border-radius: 6px; cursor: pointer; transition: all 0.2s; border: none; background: transparent; white-space: nowrap; flex-shrink: 0; }
  .snip-tab:hover { color: #f4f4f5; background-color: rgba(255,255,255,0.05); }
  .snip-tab.active { color: #f4f4f5; background-color: #27272a; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }

  /* Mobile dropdown for snippet language selection */
  .snip-select { display: none; appearance: none; -webkit-appearance: none; background-color: #27272a; color: #f4f4f5; border: 1px solid #3f3f46; border-radius: 6px; padding: 6px 32px 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; min-width: 120px; }
  .snip-select:focus { border-color: #52525b; }

  @media (max-width: 639px) {
    .snip-tabs { display: none; }
    .snip-select { display: block; }
  }
  .snip-body { padding: 16px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: #d4d4d8; line-height: 1.6; }
  .snip-content { display: none; white-space: pre; }
  .snip-content.active { display: block; }

  /* ═══════════════════════════════════════════════════════════════════════
     THEME TRANSITION — Telegram-style circle reveal
     ═══════════════════════════════════════════════════════════════════════ */
  .theme-transition-snapshot {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 99999;
    pointer-events: none;
    transition: clip-path 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* View Transitions API styles for modern browsers */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
  /* Default (Light→Dark): new dark view expands from button */
  ::view-transition-new(root) {
    z-index: 9999;
    animation: theme-circle-expand 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  ::view-transition-old(root) {
    z-index: 1;
    animation: none;
  }
  /* Dark→Light: old dark view shrinks to button, revealing light underneath */
  html.transitioning-to-light::view-transition-old(root) {
    z-index: 9999;
    animation: theme-circle-shrink 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  html.transitioning-to-light::view-transition-new(root) {
    z-index: 1;
    animation: none;
  }
  @keyframes theme-circle-expand {
    0% { clip-path: circle(0px at var(--tx, 50%) var(--ty, 50%)); }
    100% { clip-path: circle(var(--tr, 100%) at var(--tx, 50%) var(--ty, 50%)); }
  }
  @keyframes theme-circle-shrink {
    0% { clip-path: circle(var(--tr, 100%) at var(--tx, 50%) var(--ty, 50%)); }
    100% { clip-path: circle(0px at var(--tx, 50%) var(--ty, 50%)); }
  }

  /* Highlight.js overrides */
  .hljs { background: transparent !important; padding: 0 !important; font-size: 13px; line-height: 1.6; }
  /* Chat action buttons (copy, edit, like, dislike, regenerate) */
  .chat-action-btn { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:4px; border:none; background:transparent; color:#a1a1aa; cursor:pointer; transition:all .2s; position:relative; margin:0 -1px; }
  .chat-action-btn:hover { background:#f4f4f5; color:#52525b; }
  .dark .chat-action-btn { color:#71717a; }
  .dark .chat-action-btn:hover { background:#27272a; color:#d4d4d8; }
  /* Custom tooltip for chat action buttons */
  .chat-action-btn[data-tip]::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#18181b; color:#fafafa; font-size:11px; font-weight:500; padding:4px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; z-index:50; }
  .dark .chat-action-btn[data-tip]::after { background:#f4f4f5; color:#18181b; }
  .chat-action-btn[data-tip]:hover::after { opacity:1; }