:root{
  --sidebar-w: 280px;
  --bg: #f7f8fb;
  --panel: #ffffff;
  --border: #e5e6eb;
  --muted: #f5f6f8;
  --text: #111827;
  --subtext: #6b7280;
  --primary: #7c3aed;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #ef4444;
  --chip: #eef2ff;
  --code-bg: #0b1220;
  --code-border: #0f172a;
  --radius: 12px;
  --topbar-display: none;
}
*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--text); }
h2 { font-size: 32px; }
a{ color:inherit; text-decoration:none; }
header.topbar { display: var(--topbar-display); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Link styles */
.content a.link {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(124, 58, 237, 0.3);
  text-underline-offset: 2px;
  transition: all 0.2s ease;
}

.content a.link:hover {
  color: #5b21b6;
  text-decoration-color: rgba(91, 33, 182, 0.6);
}

.content a.link:visited {
  color: #7c2d92;
}

.content a.link:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Top toolbar */
.topbar{
  position: sticky; top:0; z-index: 5;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand .logo{ width:24px; height:24px; border-radius:6px; background:#5b21b6; display:inline-block; }
.tabs{
  display:flex; gap:8px; align-items:center;
  padding:4px; background:var(--muted); border-radius:999px;
}
.tab{
  padding:6px 12px; border-radius:999px; color:#334155; cursor:pointer;
}
.tab.active{ background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); font-weight:600; }
.top-actions{ display:flex; gap:8px; align-items:center; margin: 8px 0 8px 8px; }
.btn{ padding:6px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; }
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* Main layout */
.layout{ display:flex; height: calc(100vh - 52px); background: var(--bg); }

/* Left sidebar */
.sidebar{
  width:var(--sidebar-w); background:#fff; border-right:1px solid var(--border);
  display:flex; flex-direction:column; min-width:0;
}
.side-scroll{ overflow:auto; padding:8px 6px 16px; }
.group{
  margin: 10px 8px 14px;
}
.group-title{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--subtext); margin:8px 6px 6px; text-transform:uppercase; letter-spacing:.04em;
}
.api-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; margin:4px 0; border-radius:8px; cursor:pointer; color:#374151;
}
.api-item:hover{ background: var(--muted); }
.api-item.active{ background: var(--muted); font-weight:600; }
.method{
  font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:#6b7280;
}
.method.GET, .http.GET{ color:#16a34a; border-color:#bbf7d0; background:#ecfdf5; }
.method.POST, .http.POST{ color:#ea580c; border-color:#fed7aa; background:#fff7ed; }
.method.PUT, .http.PUT{ color:#2563eb; border-color:#bfdbfe; background:#eff6ff; }
.method.PATCH, .http.PATCH{ color:#7c3aed; border-color:#e9d5ff; background:#faf5ff; }
.method.DELETE, .http.DELETE{ color:#ef4444; border-color:#fecaca; background:#fef2f2; }

/* Right content */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.content{
  flex:1; overflow:auto; padding:16px 20px 28px;
}
.path-row{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding:12px; display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.http{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.url{
  flex:1; min-width:0; padding:8px 12px; background:#f8fafc; border-radius:10px; border:1px dashed var(--border);
  overflow:auto; white-space:nowrap;
}
.try-btn{ margin-left:auto; }

.panel{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding:14px; margin-top:14px;
}
.panel h3{ margin:0 0 10px; font-size:18px; }
.kv{
  display:grid; grid-template-columns: 180px 1fr 120px; gap:10px 12px; align-items:center;
  padding:10px 0; border-bottom:1px dashed var(--border);
}
.kv:last-child{ border-bottom:none; }
.key{ color:var(--subtext); }
.badge{ font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:#fff; color:#64748b; }

/* Language tabs + code blocks */
.lang-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;
}
.chip{ padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--border); cursor:pointer; }
.chip.active{ background:var(--chip); border-color:#c7d2fe; color:#3730a3; font-weight:600; }

.code-block{
  background: var(--code-bg);
  color:#cbd5e1;
  border:1px solid var(--code-border);
  border-radius: var(--radius);
  overflow:auto;
  padding:16px;
}
.code-tabs{
  display:flex; gap:8px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid #111827;
  position: sticky; top:0; background: linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.9));
  border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);
}
.code-tab{ padding:6px 10px; border-radius:999px; background:#0f172a; color:#cbd5e1; border:1px solid #111827; }
.code-tab.active{ background:#1f2937; }

pre{ margin:0; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:13px; }

/* Table */
table{ width:100%; border-collapse: collapse; }
td, th{ padding:10px 12px; border-bottom:1px solid #eef2f7; vertical-align: top; }
thead th{ text-align:left; color:#64748b; font-weight:700; background:#f8fafc; }
tbody td code{ background:#f1f5f9; padding:2px 6px; border-radius:6px; }


/* Responsive: small screen sidebar folds to top */
@media (max-width: 980px){
  .layout{ flex-direction:column; height:auto; }
  .sidebar{ width:100%; border-right:none; border-bottom:1px solid var(--border); }
  .content{ height:auto; }
  .kv{ grid-template-columns: 140px 1fr 100px; }
}

/* Drawer: mobile fixed positioning + transition animation */
@media (max-width: 980px){
  .layout{ position: relative; } /* Maintain stacking context */

  .sidebar{
    position: fixed;
    top: 52px; /* Consistent with .topbar height */
    left: 0;
    height: calc(100vh - 52px);
    width: var(--sidebar-w);
    max-width: 86vw; /* Avoid being too wide on small screens */
    transform: translateX(-100%);
    transition: transform .24s ease;
    z-index: 20;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
  }

  body.drawer-open .sidebar{
    transform: translateX(0);
  }

  /* Content area can disable scrolling when drawer is expanded */
  body.drawer-open{
    overflow: hidden;
    touch-action: none;
  }

  /* Backdrop layer */
  .backdrop{
    position: fixed;
    inset: 52px 0 0 0; /* Leave space for topbar at top */
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 15;
  }
  body.drawer-open .backdrop{
    opacity: 1;
    visibility: visible;
  }
}

/* Desktop maintains current state, no backdrop */
@media (min-width: 981px){
  .backdrop{ display: none; }
  .top-actions{ display: none; }
}

/* main-panel show/hide switching */
.main-panel[hidden] { display: none; }

/* Universal: any element with hidden attribute is not displayed and takes no space */
[hidden] {
  display: none !important;
}

/* Callout */
.api-detail .callout {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid var(--cl-border);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--cl-bg);
  color: var(--cl-fg);
}

.api-detail .callout__icon {
  line-height: 0;
  margin-top: 2px; /* Better align icon with title */
}

.api-detail .callout:not(:has(.callout__icon)) {
  display: block;
}

.api-detail .callout__title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px 0;
}

.api-detail .callout__body {
  font-size: 14px;
  line-height: 1.6;
}

/* Code block fine-tuning in callout */
.api-detail .callout .code-block {
  margin-top: 8px;
}
.api-detail .callout .code-block pre {
  background: transparent;
  border: 1px dashed var(--cl-border);
  padding: 10px;
  border-radius: 6px;
}

.callout--tips {
  --cl-bg: rgba(16, 185, 129, 0.14);
  --cl-border: rgba(16, 185, 129, 0.55);
  --cl-fg: #064e3b;
  border-left-color: rgba(16, 185, 129, 1);
}

.api-detail .callout--note {
  --cl-bg: rgba(37, 99, 235, 0.06);   /* Light blue background */
  --cl-border: rgba(37, 99, 235, 0.35);
  --cl-fg: #0b3b8f;
  border-left-color: #2563eb;
}

/* Important/caution: amber orange */
.api-detail .callout--caution {
  --cl-bg: rgba(245, 158, 11, 0.08);     /* Background: light orange */
  --cl-border: rgba(245, 158, 11, 0.4);  /* Border: orange */
  --cl-fg: #92400e;                      /* Text color: dark orange brown */
  border-left-color: rgba(245, 158, 11, 0.9);
}

/* Severe warning (danger): red */
.api-detail .callout--danger,
.api-detail .callout--important {
  --cl-bg: rgba(239, 68, 68, 0.08);
  --cl-border: rgba(239, 68, 68, 0.4);
  --cl-fg: #7f1d1d;
  border-left-color: rgba(239, 68, 68, 0.9);
}

/* Dark mode optimization */
@media (prefers-color-scheme: dark) {
  .api-detail .callout--note {
    --cl-bg: rgba(37, 99, 235, 0.12);
    --cl-border: rgba(147, 197, 253, 0.35);
    --cl-fg: #cfe0ff;
  }
  .api-detail .callout--important {
    --cl-bg: rgba(234, 88, 12, 0.14);
    --cl-border: rgba(251, 146, 60, 0.35);
    --cl-fg: #ffd7bf;
  }
}