:root{--ink:#06080f;--ink1:#090d18;--ink2:#0d1220;--ink3:#111826;--b0:#1a2740;--b1:#243856;--b2:#304a6e;
  --t0:#2e4464;--t1:#4e6888;--t2:#7a9ab8;--t3:#a8c4dc;--t4:#cde0f2;--t5:#e4f0fc;
  --ac:#111111;--ac2:#333333;--acg:color-mix(in oklch,#111111 12%,transparent);--acg2:color-mix(in oklch,#111111 6%,transparent);
  --green:var(--t2);--red:var(--t1);--orange:var(--t1);
  --ff:'Manrope',system-ui,sans-serif;--ffm:'JetBrains Mono',ui-monospace,monospace;--ffd:'Syne',var(--ff);
  --fxs:clamp(9px,.8vw,14px);--fsm:clamp(10px,.9vw,15px);--fb:clamp(11px,1vw,16px);
  --flg:clamp(14px,1.4vw,22px);--fxl:clamp(18px,2vw,32px);
  --sp1:clamp(3px,.3vw,5px);--sp2:clamp(5px,.5vw,8px);--sp3:clamp(8px,.8vw,13px);--sp4:clamp(11px,1.1vw,18px);
  --rad:clamp(5px,.5vw,8px);--rad2:clamp(3px,.3vw,5px)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}*{color-scheme:dark}
body{font-family:var(--ff);font-size:var(--fb);color:var(--t2);background:transparent;-webkit-font-smoothing:antialiased}
input,textarea,select,button{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;color-scheme:dark;background:transparent;border:none}
.lab{width:100%;max-width:none;min-height:min(72vh,900px);height:auto;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink);border:1px solid var(--b0);border-radius:clamp(8px,.8vw,14px);
  background-image:radial-gradient(ellipse 60% 40% at 15% -10%,rgba(74,222,128,.05) 0%,transparent 55%),
  radial-gradient(rgba(74,222,128,.02) 1px,transparent 1px);background-size:100% 100%,26px 26px}
.lab-top{flex-shrink:0;height:clamp(42px,6%,54px);display:flex;align-items:center;gap:var(--sp3);padding:0 var(--sp4);background:var(--ink1);border-bottom:1px solid var(--b0)}
.lab-brand{display:flex;align-items:center;gap:var(--sp2);flex-shrink:0}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac);animation:dp 2.5s ease-in-out infinite}
@keyframes dp{0%,100%{opacity:1}50%{opacity:.4}}
.brand-name{font-family:var(--ffd);font-size:var(--flg);font-weight:800;color:var(--t5);letter-spacing:-.03em}
.brand-name em{font-style:normal;color:var(--ac)}
.lab-nav{display:flex;gap:2px;margin:0 auto;background:var(--ink2);border:1px solid var(--b0);border-radius:calc(var(--rad) + 2px);padding:3px}
.nav-btn{background:transparent;border:none;border-radius:var(--rad);color:var(--t1);font-family:var(--ff);font-size:var(--fsm);font-weight:500;padding:var(--sp1) var(--sp3);cursor:pointer;transition:all .14s;white-space:nowrap}
.nav-btn:hover{color:var(--t4)}
.nav-btn.active{background:var(--ac);color:#050b14;font-weight:700;box-shadow:0 2px 12px rgba(74,222,128,.28)}
.lab-badge{font-size:var(--fxs);font-family:var(--ffm);color:var(--t0);border:1px solid var(--b0);padding:2px 8px;border-radius:20px;background:var(--ink2);flex-shrink:0}
.lab-stage{flex:1;min-height:0;position:relative;overflow:hidden}
.lab-panel{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column}
.lab-foot{flex-shrink:0;height:clamp(28px,3.5vh,40px);display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp4);background:var(--ink1);border-top:1px solid var(--b0);font-size:var(--fxs);color:var(--t0)}
.foot-r code{font-family:var(--ffm);font-size:var(--fxs);background:var(--ink2);border:1px solid var(--b0);padding:1px 5px;border-radius:3px}
.toast{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:var(--ac);color:#050b14;font-size:var(--fsm);font-weight:700;font-family:var(--ffm);padding:5px 16px;border-radius:var(--rad2);z-index:999;pointer-events:none;opacity:0;white-space:nowrap}
.toast.on{pointer-events:auto}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--b1);border-radius:2px}
::selection{background:var(--ac);color:#050b14}
code{font-family:var(--ffm);font-size:.9em;background:var(--ink2);padding:1px 5px;border-radius:3px;color:var(--ac)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--b1);background:var(--ink3);color:var(--t3);font-family:var(--ff);font-size:var(--fsm);font-weight:600;padding:clamp(4px,.4vw,7px) clamp(10px,1vw,16px);border-radius:var(--rad2);cursor:pointer;transition:all .12s;white-space:nowrap}
.btn:hover{border-color:var(--b2);color:var(--t5)}

/* Main layout */
.p-body{flex:1;min-height:0;display:grid;grid-template-columns:clamp(200px,34%,280px) 1fr;overflow:hidden}

/* List */
.list-col{display:flex;flex-direction:column;border-right:1px solid var(--b0);overflow:hidden}
.search-wrap{padding:var(--sp2) var(--sp3);border-bottom:1px solid var(--b0);flex-shrink:0}
.search-inp{width:100%;background:var(--ink2);border:1px solid var(--b0);border-radius:var(--rad2);color:var(--t5);font-family:var(--ffm);font-size:var(--fsm);padding:var(--sp1) var(--sp2);outline:none;transition:border-color .14s}
.search-inp:focus{border-color:var(--ac2);box-shadow:0 0 0 3px var(--acg)}
.search-inp::placeholder{color:var(--t0)}
.status-list{flex:1;min-height:0;overflow-y:auto;padding:var(--sp2) 0}
.cat-group{margin-bottom:var(--sp2)}
.cat-header{font-family:var(--ffd);font-size:var(--fxs);font-weight:700;padding:var(--sp1) var(--sp3);text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.status-item{display:flex;align-items:center;gap:var(--sp2);padding:var(--sp1) var(--sp3);cursor:pointer;transition:background .1s;border-left:2px solid transparent}
.status-item:hover{background:var(--ink2);border-left-color:var(--cat-color,var(--ac))}
.status-item.active{background:var(--ink2);border-left-color:var(--cat-color,var(--ac))}
.status-code{font-family:var(--ffm);font-weight:700;font-size:var(--fsm);min-width:36px}
.status-name{font-size:var(--fsm);color:var(--t2)}

/* Detail */
.detail-col{padding:var(--sp4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp3)}
.detail-empty{color:var(--t0);font-size:var(--fsm);margin:auto;text-align:center}
.detail-code{font-family:var(--ffd);font-size:clamp(48px,6vw,80px);font-weight:800;line-height:1;opacity:.9}
.detail-name{font-family:var(--ffd);font-size:var(--fxl);font-weight:700;color:var(--t5);line-height:1.2}
.detail-desc{font-size:var(--fsm);color:var(--t2);line-height:1.65;padding:var(--sp3);background:var(--ink2);border-radius:var(--rad);border:1px solid var(--b0)}
.detail-tip{font-size:var(--fsm);color:var(--t3);line-height:1.5;display:flex;gap:var(--sp2);align-items:flex-start}
.detail-curl{font-family:var(--ffm);font-size:var(--fsm);background:var(--ink1);border:1px solid var(--b0);border-radius:var(--rad);padding:var(--sp3);line-height:1.6}

/* Cheatsheet panel */
.cheat-body{flex:1;min-height:0;overflow-y:auto;padding:var(--sp3) var(--sp4)}
.cheat-table{width:100%;border-collapse:collapse;font-size:var(--fsm)}
.cheat-table th{text-align:left;padding:var(--sp2) var(--sp3);background:var(--ink2);color:var(--t3);font-family:var(--ffm);font-size:var(--fxs);text-transform:uppercase;letter-spacing:.06em}
.cheat-table td{padding:var(--sp2) var(--sp3);border-bottom:1px solid var(--b0);color:var(--t2);font-family:var(--ffm);font-size:var(--fxs)}
.cheat-table td:first-child{font-weight:700;font-size:var(--fsm)}
.cheat-table tr:last-child td{border-bottom:none}
@media(max-width:600px){.p-body{grid-template-columns:1fr}.detail-col{display:none}}