*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       font-size: 14px; line-height: 1.6; color: #1a1a2e; background: #f7f9fc; }
a { color: #1565c0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* layout */
#app { display: flex; height: 100vh; overflow: hidden; }

/* sidebar */
#sidebar { width: 255px; min-width: 220px; flex-shrink: 0; background: #0f3460;
           color: #cdd8e4; display: flex; flex-direction: column; overflow: hidden; }
#sh { padding: 14px 13px 11px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
#sh h1 { font-size: .88rem; font-weight: 700; color: #fff; }
#sh p  { font-size: .68rem; color: rgba(255,255,255,.38); margin-top: 2px; }
#sw { padding: 7px 11px; flex-shrink: 0; }
#sw input { width: 100%; padding: 5px 9px; border-radius: 5px;
            border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07);
            color: #fff; font-size: .74rem; outline: none; }
#sw input::placeholder { color: rgba(255,255,255,.33); }
#nav { overflow-y: auto; flex: 1; padding-bottom: 12px; }
#nav::-webkit-scrollbar { width: 3px; }
#nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.st { font-size: .59rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .09em; color: rgba(255,255,255,.3); padding: 8px 13px 3px; }
.ni { display: flex; align-items: center; gap: 6px; padding: 5px 13px;
      text-decoration: none; font-size: .76rem; color: rgba(255,255,255,.66);
      border-left: 3px solid transparent; transition: background .1s, color .1s; line-height: 1.3; }
.ni:hover  { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.ni.active { background: rgba(255,255,255,.11); color: #fff; border-left-color: #4fc3f7; }

/* method badges */
.b { font-size: .56rem; font-weight: 700; padding: 1px 5px; border-radius: 3px;
     text-transform: uppercase; flex-shrink: 0; }
.bG  { background: #1b5e20; color: #a5d6a7; }
.bP  { background: #e65100; color: #ffe0b2; }
.bD  { background: #b71c1c; color: #ffcdd2; }
.bPu { background: #4a148c; color: #e1bee7; }
.bPa { background: #004d40; color: #b2dfdb; }
.bI  { background: #0d47a1; color: #bbdefb; }

/* topbar */
#tb { height: 40px; background: #fff; border-bottom: 1px solid #e0e6ed;
      display: flex; align-items: center; padding: 0 15px; gap: 10px; flex-shrink: 0; }
#pt { font-size: .83rem; font-weight: 600; flex: 1; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; }
.back { font-size: .75rem; color: #0f3460; flex-shrink: 0; }

/* content */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#viewer { flex: 1; overflow-y: auto; }
.wrap { max-width: 820px; margin: 0 auto; padding: 26px 22px 60px; }

/* endpoint header */
h1.ep-title { font-size: 1.45rem; font-weight: 700; margin-bottom: 10px; }
.ep-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
          background: #f0f4f8; border: 1px solid #dde3ea; border-radius: 8px;
          padding: 9px 13px; margin-bottom: 18px; }
.method { font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 4px;
          text-transform: uppercase; }
.GET    { background: #e8f5e9; color: #2e7d32; }
.POST   { background: #fff3e0; color: #e65100; }
.PUT    { background: #f3e5f5; color: #6a1b9a; }
.PATCH  { background: #e0f2f1; color: #00695c; }
.DELETE { background: #fce4ec; color: #c62828; }
.url    { font-family: "Cascadia Code", Consolas, monospace; font-size: .87rem; color: #1a1a2e; }
.desc { color: #444; margin-bottom: 22px; }
.desc p  { margin-bottom: 8px; }
.desc ul,.desc ol { margin: 6px 0 10px 22px; }
.desc li { margin-bottom: 4px; }
.desc h2 { margin: 18px 0 7px; font-size: 1.05rem; font-weight: 700; color: #1a1a2e; }
.desc h3 { margin: 14px 0 5px; font-size: .95rem; font-weight: 700; color: #1a1a2e; }
.desc h4 { margin: 10px 0 4px; font-size: .88rem; font-weight: 700; color: #1a1a2e; }
.desc code { background: #f0f4f8; border: 1px solid #dde3ea; border-radius: 3px;
             padding: 1px 5px; font-size: .8rem; color: #0f3460; }
.desc pre  { margin: 10px 0; }
.desc pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.desc a  { color: #1565c0; }
.desc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .8rem; }
.desc table th { background: #f0f4f8; padding: 6px 10px; border: 1px solid #dde3ea; text-align: left; }
.desc table td { padding: 6px 10px; border: 1px solid #e8edf2; }

/* section heading */
.sh { font-size: .95rem; font-weight: 700; margin: 24px 0 10px;
      padding-bottom: 5px; border-bottom: 2px solid #e0e6ed; }

/* auth note */
.auth-box { background: #e8f5e9; border-left: 4px solid #2e7d32; border-radius: 4px;
            padding: 10px 13px; font-size: .8rem; color: #1b5e20; margin-bottom: 16px; }

/* params table */
.pt { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: 18px; }
.pt th { background: #f0f4f8; text-align: left; padding: 6px 10px;
          border: 1px solid #dde3ea; font-weight: 600; color: #333; }
.pt td { padding: 6px 10px; border: 1px solid #e8edf2; vertical-align: top; }
.pt tr:nth-child(even) td { background: #fafbfc; }
.pn { font-family: "Cascadia Code", Consolas, monospace; font-weight: 600; color: #0f3460; }
.ty { color: #777; font-size: .73rem; }
.opt { color: #888; font-size: .7rem; }
.req { color: #c62828; font-size: .7rem; font-weight: 700; }
.ex  { font-family: "Cascadia Code", Consolas, monospace; font-size: .75rem; color: #555; }

/* responses */
.resp { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
        border-radius: 6px; margin-bottom: 7px; font-size: .82rem; }
.r2xx { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }
.r4xx { background: #fff8e1; color: #e65100; border: 1px solid #ffe082; }
.r5xx { background: #fce4ec; color: #c62828; border: 1px solid #f8bbd0; }
.rcode { font-weight: 700; font-size: .85rem; }

/* code blocks */
pre { background: #1e2638; color: #cdd8e4; border-radius: 8px; padding: 13px 15px;
      overflow-x: auto; font-size: .78rem; line-height: 1.55; margin: 8px 0 18px; }
code { font-family: "Cascadia Code", "Fira Code", Consolas, monospace; }

/* tabs */
.tab-bar { display: flex; gap: 3px; border-bottom: 2px solid #e0e6ed; margin-bottom: 0; }
.tb { padding: 5px 13px; font-size: .76rem; font-weight: 600; cursor: pointer;
      border: none; background: none; color: #777;
      border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tb.on, .tb:hover { color: #0f3460; border-bottom-color: #0f3460; }
.tp { display: none; }
.tp.on { display: block; }

/* index only */
.idx-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 7px; }
.card { display: flex; align-items: center; gap: 7px; padding: 9px 13px;
        background: #fff; border: 1px solid #e0e6ed; border-radius: 7px;
        text-decoration: none; color: #1a1a2e; font-size: .8rem; font-weight: 500;
        transition: border-color .12s, box-shadow .12s; }
.card:hover { border-color: #0f3460; box-shadow: 0 2px 7px rgba(15,52,96,.1); }