:root {
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2128;
  --border: #30363d; --border2: #21262d;
  --primary: #58a6ff; --primary-dim: #1f6feb;
  --success: #3fb950; --error: #f85149; --warning: #d29922;
  --info: #79c0ff; --text: #e6edf3; --text-dim: #8b949e; --text-muted: #484f58;
  --get: #3fb950; --post: #58a6ff; --put: #d29922; --patch: #bc8cff; --delete: #f85149;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:14px;height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* HEADER */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;height:52px;display:flex;align-items:center;gap:20px;flex-shrink:0;z-index:100}
.logo{font-size:18px;font-weight:700;color:var(--primary);letter-spacing:-0.5px;white-space:nowrap}
.logo span{color:var(--text)}
nav{display:flex;gap:4px;flex:1}
nav button{background:none;border:none;color:var(--text-dim);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;display:flex;align-items:center;gap:6px}
nav button:hover{background:var(--surface2);color:var(--text)}
nav button.active{background:var(--primary-dim);color:var(--primary)}
.prog-wrap{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:12px;white-space:nowrap}
.prog-track{width:100px;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:var(--success);border-radius:3px;transition:width .4s ease}

/* LAYOUT */
.main-layout{display:flex;flex:1;overflow:hidden}

/* SIDEBAR */
.sidebar{width:240px;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0}
.sidebar-section{padding:12px 0}
.sidebar-title{padding:4px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:4px}
.ch-item{display:flex;align-items:center;gap:10px;padding:7px 16px;cursor:pointer;border-left:2px solid transparent;transition:background .1s}
.ch-item:hover{background:var(--surface2)}
.ch-item.active{background:var(--surface2);border-left-color:var(--primary);color:var(--primary)}
.ch-item.done .ch-num{background:var(--success);color:#000}
.ch-num{width:22px;height:22px;border-radius:50%;background:var(--border);color:var(--text-dim);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ch-label{font-size:13px;line-height:1.3;flex:1}

/* CONTENT */
.content{flex:1;overflow-y:auto;padding:28px 32px}
.section{display:none}
.section.active{display:block}

/* LEARN */
.chapter-content h1{font-size:24px;font-weight:700;margin-bottom:8px}
.ch-meta{display:flex;gap:12px;margin-bottom:24px;color:var(--text-dim);font-size:12px}
.chapter-content h2{font-size:18px;font-weight:600;margin:28px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border2)}
.chapter-content h3{font-size:15px;font-weight:600;margin:20px 0 8px;color:var(--info)}
.chapter-content p{line-height:1.7;color:var(--text-dim);margin-bottom:12px}
.chapter-content ul,.chapter-content ol{padding-left:20px;margin-bottom:12px}
.chapter-content li{line-height:1.7;color:var(--text-dim);margin-bottom:4px}
code{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-family:'Consolas','Monaco',monospace;font-size:13px;color:var(--info)}
pre{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px;overflow-x:auto;margin:12px 0;position:relative}
pre code{background:none;border:none;padding:0;font-size:13px;color:var(--text);line-height:1.6}
.copy-btn{position:absolute;top:8px;right:8px;background:var(--border);border:none;color:var(--text-dim);padding:4px 8px;border-radius:4px;cursor:pointer;font-size:11px;transition:all .15s}
.copy-btn:hover{background:var(--primary-dim);color:var(--primary)}
.tip{background:rgba(88,166,255,.08);border:1px solid rgba(88,166,255,.2);border-radius:8px;padding:14px 16px;margin:16px 0;display:flex;gap:10px}
.tip.warn{background:rgba(210,153,34,.08);border-color:rgba(210,153,34,.3)}
.tip.ok{background:rgba(63,185,80,.08);border-color:rgba(63,185,80,.3)}
.tip-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.tip p{margin:0;color:var(--text);font-size:13px;line-height:1.5}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.5px}
.bg{background:rgba(63,185,80,.15);color:var(--get);border:1px solid rgba(63,185,80,.3)}
.bp{background:rgba(88,166,255,.15);color:var(--post);border:1px solid rgba(88,166,255,.3)}
.bu{background:rgba(210,153,34,.15);color:var(--put);border:1px solid rgba(210,153,34,.3)}
.bpa{background:rgba(188,140,255,.15);color:var(--patch);border:1px solid rgba(188,140,255,.3)}
.bd{background:rgba(248,81,73,.15);color:var(--delete);border:1px solid rgba(248,81,73,.3)}
.ch-nav{display:flex;justify-content:space-between;margin-top:40px;padding-top:20px;border-top:1px solid var(--border);gap:12px}
.btn{padding:8px 16px;border-radius:6px;border:1px solid var(--border);cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-p{background:var(--primary-dim);border-color:var(--primary-dim);color:var(--primary)}
.btn-p:hover{background:var(--primary);color:#000;border-color:var(--primary)}
.btn-s{background:var(--surface2);color:var(--text-dim)}
.btn-s:hover{background:var(--border);color:var(--text)}
.btn-ok{background:rgba(63,185,80,.15);border-color:rgba(63,185,80,.3);color:var(--success)}
.btn-ok:hover{background:rgba(63,185,80,.25)}
tbl{width:100%;border-collapse:collapse;margin-bottom:16px}

/* TESTER */
.tester-grid{display:grid;grid-template-columns:1fr 260px;gap:16px}
.tester-col{display:flex;flex-direction:column;gap:14px}
.req-bar{display:flex;gap:8px;align-items:center}
.method-sel{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;min-width:100px}
.url-inp{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:6px;font-size:13px;font-family:'Consolas',monospace;transition:border-color .15s}
.url-inp:focus{outline:none;border-color:var(--primary)}
.send-btn{background:var(--primary-dim);border:1px solid var(--primary);color:var(--primary);padding:8px 20px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:all .15s;white-space:nowrap}
.send-btn:hover{background:var(--primary);color:#000}
.send-btn:disabled{opacity:.5;cursor:not-allowed}
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tab-btn{background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim);padding:8px 16px;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;margin-bottom:-1px}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-pane{display:none;padding:14px 0}
.tab-pane.active{display:block}
.kv-editor{display:flex;flex-direction:column;gap:8px}
.kv-row{display:flex;gap:8px;align-items:center}
.kv-inp{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:7px 10px;border-radius:6px;font-size:12px;font-family:'Consolas',monospace}
.kv-inp:focus{outline:none;border-color:var(--primary)}
.kv-inp::placeholder{color:var(--text-muted)}
.kv-del{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:4px;font-size:18px;line-height:1;transition:color .1s}
.kv-del:hover{color:var(--error)}
.add-row{background:none;border:1px dashed var(--border);color:var(--text-muted);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;transition:all .15s;align-self:flex-start;margin-top:4px}
.add-row:hover{border-color:var(--primary);color:var(--primary)}
.body-ta{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:6px;font-family:'Consolas',monospace;font-size:13px;line-height:1.5;resize:vertical;min-height:150px}
.body-ta:focus{outline:none;border-color:var(--primary)}
.auth-sel{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:7px 10px;border-radius:6px;font-size:13px;width:100%;margin-bottom:10px}
.field-lbl{font-size:12px;color:var(--text-dim);margin-bottom:5px;font-weight:500}

/* RESPONSE */
.res-panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.res-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface2);border-bottom:1px solid var(--border)}
.s-badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700}
.s2{background:rgba(63,185,80,.15);color:var(--success);border:1px solid rgba(63,185,80,.3)}
.s3{background:rgba(210,153,34,.15);color:var(--warning);border:1px solid rgba(210,153,34,.3)}
.s4{background:rgba(248,81,73,.15);color:var(--error);border:1px solid rgba(248,81,73,.3)}
.s5{background:rgba(248,81,73,.15);color:var(--error);border:1px solid rgba(248,81,73,.3)}
.res-meta{color:var(--text-muted);font-size:12px}
.res-body{padding:16px;font-family:'Consolas',monospace;font-size:12px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;max-height:380px;overflow-y:auto}
.res-ph{padding:40px;text-align:center;color:var(--text-muted)}

/* EXAMPLES SIDEBAR */
.ex-panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.ex-title{padding:10px 14px;font-size:12px;font-weight:600;color:var(--text-dim);background:var(--surface2);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px}
.ex-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border2);transition:background .1s}
.ex-item:hover{background:var(--surface2)}
.ex-item:last-child{border-bottom:none}
.ex-name{font-size:13px;color:var(--text);margin-bottom:2px;display:flex;align-items:center;gap:8px}
.ex-url{font-size:11px;color:var(--text-muted);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* LOG PANEL */
.log-panel{height:220px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;transition:height .2s ease}
.log-panel.collapsed{height:36px}
.log-hdr{display:flex;align-items:center;gap:8px;padding:0 12px;height:36px;background:var(--surface2);border-bottom:1px solid var(--border);flex-shrink:0;cursor:pointer;user-select:none}
.log-title{font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;flex:1}
.log-badge{background:var(--primary-dim);color:var(--primary);border-radius:10px;padding:1px 7px;font-size:11px;font-weight:600}
.log-ctrls{display:flex;gap:6px;align-items:center}
.log-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:3px 8px;border-radius:4px;font-size:11px;transition:all .1s}
.log-btn:hover{background:var(--border);color:var(--text)}
.log-entries{flex:1;overflow-y:auto;font-family:'Consolas',monospace}
.log-row{display:flex;align-items:center;gap:10px;padding:5px 12px;border-bottom:1px solid var(--border2);font-size:12px;cursor:pointer;transition:background .1s}
.log-row:hover{background:var(--surface2)}
.log-t{color:var(--text-muted);width:70px;flex-shrink:0}
.log-m{width:55px;text-align:center;border-radius:3px;padding:1px 0;font-size:11px;font-weight:700;flex-shrink:0}
.log-u{flex:1;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log-sc{width:40px;text-align:right;font-weight:600;flex-shrink:0}
.log-dur{width:60px;text-align:right;color:var(--text-muted);flex-shrink:0}
.log-detail{display:none;padding:8px 12px 12px;background:var(--bg);border-bottom:1px solid var(--border);font-size:11px;line-height:1.6}
.log-detail.show{display:block}
.log-detail pre{margin:4px 0;padding:8px;border-radius:4px;background:var(--surface);font-size:11px;max-height:120px;overflow-y:auto;white-space:pre-wrap}

/* DOCS */
.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:28px}
.doc-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;cursor:default;transition:border-color .15s}
.doc-card:hover{border-color:var(--primary-dim)}
.doc-card-icon{font-size:22px;margin-bottom:10px}
.doc-card h3{font-size:15px;font-weight:600;margin-bottom:6px}
.doc-card p{font-size:13px;color:var(--text-dim);line-height:1.5}
.search-inp{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:8px;font-size:14px;width:100%;margin-bottom:24px;transition:border-color .15s}
.search-inp:focus{outline:none;border-color:var(--primary)}
.section-hdr{margin-bottom:24px}
.section-hdr h1{font-size:24px;font-weight:700;margin-bottom:6px}
.section-hdr p{color:var(--text-dim);font-size:14px}
.docs-cat-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:14px;margin-top:4px}

/* SYNTAX */
.jk{color:#79c0ff}.js{color:#a5d6ff}.jn{color:#ffa657}.jb{color:#ff7b72}.jnu{color:#8b949e}

/* MISC */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.page-title{font-size:24px;font-weight:700;margin-bottom:6px}
.page-sub{color:var(--text-dim);font-size:14px;margin-bottom:24px}
table.ref{width:100%;border-collapse:collapse;margin-top:12px;font-size:12px}
table.ref td{padding:5px 8px;border-bottom:1px solid var(--border2)}
table.ref td:first-child{color:var(--primary);font-family:monospace}
table.ref td:last-child{color:var(--text-muted)}
/* Example groups */
.ex-group-hdr{padding:5px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);background:var(--bg);border-bottom:1px solid var(--border2);border-top:1px solid var(--border2)}
/* Doc card rich content */
.doc-card pre{background:var(--bg);border:1px solid var(--border2);border-radius:6px;padding:10px 12px;margin:8px 0;font-family:'Consolas',monospace;font-size:12px;overflow-x:auto;white-space:pre-wrap;line-height:1.5}
.doc-card pre code{background:none;border:none;padding:0;color:var(--text);font-size:12px}
.doc-card h4{font-size:12px;font-weight:700;color:var(--info);margin:14px 0 5px;text-transform:uppercase;letter-spacing:.4px}
.doc-card ul{padding-left:16px;margin:6px 0}
.doc-card li{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:3px}
.doc-card table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12px}
.doc-card table td{padding:5px 8px;border-bottom:1px solid var(--border2);color:var(--text-dim)}
.doc-card table td:first-child{color:var(--primary);font-family:monospace;white-space:nowrap}
.doc-card.wide{grid-column:1/-1}
/* Try buttons */
.try-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border2)}
.try-lbl{font-size:11px;color:var(--text-muted);align-self:center;white-space:nowrap}
.try-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;transition:all .15s;font-family:inherit;display:inline-flex;align-items:center;gap:4px}
.try-btn:hover{background:var(--primary-dim);border-color:var(--primary);color:var(--primary)}
/* Status colors in doc */
.c2{color:var(--success);font-weight:600}.c4{color:var(--error);font-weight:600}.c3{color:var(--warning);font-weight:600}
/* Doc section wide grid */
.docs-grid-wide{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:28px}


/* RESPONSIVE LAYOUT ----------------------------------------------------- */
img, svg { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
.content, .tester-grid > *, .tester-col, .res-panel { min-width: 0; }

@media (max-width: 1100px) {
  .tester-grid { grid-template-columns: 1fr; }
  .ex-panel { margin-bottom: 16px; }
  .docs-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 820px) {
  html, body { min-height: 100%; }
  body { height: auto; min-height: 100vh; overflow: auto; }
  header { height: auto; min-height: 52px; flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  .logo { flex: 1 1 auto; }
  nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  nav button { white-space: nowrap; flex: 0 0 auto; }
  .prog-wrap { margin-left: auto; }
  .main-layout { flex-direction: column; overflow: visible; }
  .sidebar { width: 100%; max-height: 230px; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar-section { padding: 10px 0; }
  .content { padding: 20px 16px 28px; overflow: visible; }
  .chapter-content h1, .page-title, .section-hdr h1 { font-size: 22px; }
  .tester-grid { grid-template-columns: 1fr; }
  .req-bar { flex-wrap: wrap; }
  .method-sel { flex: 0 0 110px; }
  .url-inp { flex: 1 1 calc(100% - 118px); min-width: 0; }
  .send-btn { flex: 1 1 100%; justify-content: center; }
  .tabs { overflow-x: auto; }
  .tab-btn { white-space: nowrap; }
  .res-header { flex-wrap: wrap; }
  .docs-grid { grid-template-columns: 1fr; }
  .doc-card.wide { grid-column: auto; }
  .ch-nav { flex-direction: column; align-items: stretch; }
  .ch-nav > div:last-child { flex-wrap: wrap; justify-content: flex-start; }
  .log-panel { height: 260px; }
}

@media (max-width: 520px) {
  header { align-items: flex-start; }
  .prog-wrap { width: 100%; justify-content: space-between; }
  .prog-track { flex: 1; width: auto; }
  .sidebar { max-height: 190px; }
  .content { padding: 16px 12px 24px; }
  .req-bar { gap: 8px; }
  .method-sel, .url-inp, .send-btn { flex: 1 1 100%; width: 100%; }
  .kv-row { flex-wrap: wrap; }
  .kv-inp { flex: 1 1 calc(50% - 8px); min-width: 120px; }
  .kv-del { margin-left: auto; }
  .res-body { padding: 12px; max-height: 320px; }
  .log-row { gap: 6px; padding: 7px 10px; }
  .log-t { display: none; }
  .log-m { width: 50px; }
  .log-sc { width: 34px; }
  .log-dur { width: 52px; }
  pre { padding: 14px 12px; }
}


/* ACCESSIBILITY --------------------------------------------------------- */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}