:root{
  --bg:#05070C;
  --card:#0B1020;
  --muted:#9AA4B2;
  --text:#E6EAF2;
  --line:rgba(255,255,255,.08);
  --ok:#22C55E;
  --warn:#F59E0B;
  --bad:#EF4444;
  --blue:#3B82F6;
}
*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  min-height:100vh;
  position:relative;
  background:
    radial-gradient(1200px 520px at 15% -10%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(1000px 520px at 85% -10%, rgba(34,197,94,.18), transparent 60%),
    var(--bg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--text);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23n)'%20opacity='.55'/%3E%3C/svg%3E");
  background-size:220px 220px;
  mix-blend-mode:overlay;
  z-index:0;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1080px;margin:0 auto;padding:28px 18px 48px;position:relative;z-index:1}
header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:180px;max-width:42vw;height:auto;display:block}
.title{display:flex;flex-direction:column;gap:3px}
.title h1{margin:0;font-size:18px;font-weight:650;letter-spacing:.2px}
.title .sub{color:var(--muted);font-size:13px}

.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);border-radius:999px;font-size:13px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 4px rgba(34,197,94,.15)}
.dot.bad{background:var(--bad);box-shadow:0 0 0 4px rgba(239,68,68,.15)}

.card{background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%), var(--card);
  border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.card h2{margin:0 0 10px 0;font-size:14px;font-weight:650;color:#DDE4F3;letter-spacing:.2px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 14px;font-size:13px;line-height:1.35}
.k{color:var(--muted)}
.v{color:var(--text);word-break:break-word}

.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)}
.badge strong{color:var(--text);font-weight:650}
.badge.ok strong{color:var(--ok)}
.badge.bad strong{color:var(--bad)}
.list{display:flex;flex-wrap:wrap;gap:10px}

.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.hr{height:1px;background:var(--line);margin:12px 0}
.hint{color:var(--muted);font-size:12px;margin:8px 0 0}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:2px 6px}

pre{margin:12px 0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(0,0,0,.28);overflow:auto}
pre code{display:block;background:transparent;border:none;border-radius:0;padding:0;line-height:1.45}

/* Docs */
.page-docs .wrap{max-width:1220px}
.docsShell{display:grid;grid-template-columns:290px 1fr;gap:14px;align-items:start}
@media (max-width:980px){.docsShell{grid-template-columns:1fr}}

.docsNav{position:sticky;top:16px;align-self:start;padding:14px;border-radius:16px;border:1px solid var(--line);
  background:
    radial-gradient(600px 220px at 10% 0%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(520px 220px at 90% 0%, rgba(34,197,94,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 60%),
    rgba(11,16,32,.72);
  backdrop-filter: blur(10px);
  box-shadow:0 18px 60px rgba(0,0,0,.35)}
@media (max-width:980px){.docsNav{position:relative;top:auto}}
.docsNavTitle{font-size:13px;font-weight:650;letter-spacing:.2px;color:#DDE4F3}
.docsNavSub{margin-top:4px;color:var(--muted);font-size:12px;word-break:break-word}
.docsSearch{margin-top:12px}
.docsSearch input{
  width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);outline:none
}
.docsSearch input:focus{border-color:rgba(59,130,246,.6);box-shadow:0 0 0 4px rgba(59,130,246,.15)}

.docsToc{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.tocGroup{margin-top:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(154,164,178,.9)}
.tocLink{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:rgba(230,234,242,.88);
  border:1px solid transparent;background:transparent}
.tocLink:hover{background:rgba(255,255,255,.03);text-decoration:none;border-color:rgba(255,255,255,.06)}
.tocLink.active{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.28);color:var(--text)}
.tocLink::before{content:"";width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.18)}
.tocLink.active::before{background:rgba(59,130,246,.9);box-shadow:0 0 0 4px rgba(59,130,246,.18)}
.docsNavFooter{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

.docsMain{display:flex;flex-direction:column;gap:14px}
.docsHero{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(820px 280px at 0% 0%, rgba(59,130,246,.22), transparent 55%),
    radial-gradient(780px 260px at 100% 0%, rgba(34,197,94,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 62%),
    rgba(11,16,32,.55);
  box-shadow:0 20px 70px rgba(0,0,0,.35)}
.docsHeroTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.docsKicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(154,164,178,.95)}
.docsHeroTitle{margin-top:6px;font-size:22px;font-weight:760;letter-spacing:.2px;color:#F1F5FF}
.docsHeroSub{margin-top:6px;color:rgba(230,234,242,.82);font-size:13px;max-width:760px}
.docsHeroBadges{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.docsQuick{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;margin-top:14px}
@media (max-width:980px){.docsQuick{grid-template-columns:1fr}}
.docsQuickCard{display:block;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);color:rgba(230,234,242,.92);text-decoration:none}
.docsQuickCard:hover{text-decoration:none;border-color:rgba(59,130,246,.28);background:rgba(59,130,246,.08)}
.docsQuickLabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(154,164,178,.95)}
.docsQuickPath{margin-top:6px;font-size:13px;color:#EAF0FF}

.docsMain .card{position:relative}
.docSectionHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.docPermalink{opacity:.65;color:rgba(230,234,242,.85);padding:6px 10px;border-radius:10px;border:1px solid transparent}
.docPermalink:hover{opacity:1;text-decoration:none;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}

.docMeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.docProse{margin-top:10px}
.docProse h3{margin:14px 0 8px 0;font-size:13px;color:#DDE4F3;letter-spacing:.2px}
.docProse ul{margin:0;padding-left:18px;color:var(--text)}
.docProse li{margin:5px 0}

.docEndpointHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.docEndpointTitle{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.docEndpointTitle h2{margin:0;font-size:14px;font-weight:650;color:#DDE4F3;letter-spacing:.2px}

/* Endpoint accent line */
.docEndpoint::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;border-radius:18px 0 0 18px;
  background:rgba(255,255,255,.10)}
.docEndpoint[data-method="GET"]::before{background:linear-gradient(180deg, rgba(34,197,94,.95), rgba(34,197,94,.15))}
.docEndpoint[data-method="POST"]::before{background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(59,130,246,.15))}

.methodBadge{display:inline-flex;align-items:center;justify-content:center;min-width:54px;
  height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.methodBadge.get{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.10);color:rgba(220,252,231,.95)}
.methodBadge.post{border-color:rgba(59,130,246,.28);background:rgba(59,130,246,.10);color:rgba(219,234,254,.95)}

.endpointBadge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)}
.endpointBadge.admin{border-color:rgba(245,158,11,.30);background:rgba(245,158,11,.10);color:rgba(254,243,199,.92)}

.codeBlock{position:relative}
.codeToolbar{position:absolute;top:10px;right:10px;display:flex;gap:8px;align-items:center;z-index:2}
.codeBtn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(230,234,242,.9);
  border-radius:10px;padding:7px 10px;font-size:12px;cursor:pointer}
.codeBtn:hover{background:rgba(255,255,255,.06)}
.codeBtn[data-copied]{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.12);color:rgba(220,252,231,.95)}
.codeBlock pre{padding-top:46px}

.codeBlock pre{border-color:rgba(255,255,255,.10);background:
  radial-gradient(600px 180px at 0% 0%, rgba(59,130,246,.10), transparent 55%),
  rgba(0,0,0,.30)}

.callout{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.02)}
.calloutTitle{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:rgba(230,234,242,.9);margin-bottom:8px}
.callout.warn{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.06)}

.docDetails{margin-top:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.02);
  overflow:hidden}
.docDetails > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;background:rgba(255,255,255,.02)}
.docDetails > summary::-webkit-details-marker{display:none}
.docDetailsTitle{font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:rgba(230,234,242,.92)}
.docDetailsHint{font-size:12px;color:rgba(154,164,178,.95)}
.docDetails > summary::after{content:"▾";opacity:.75}
.docDetails[open] > summary::after{content:"▴";opacity:.9}
.docDetailsBody{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08)}

.docEmpty{padding:12px 14px;border-radius:14px;border:1px dashed rgba(255,255,255,.16);
  background:rgba(255,255,255,.02);color:rgba(230,234,242,.88)}

.apiTableWrap{margin-top:10px;border-radius:14px;border:1px solid var(--line);overflow:hidden;
  background:rgba(0,0,0,.18)}
.apiTableWrap{box-shadow:0 12px 45px rgba(0,0,0,.25)}
.apiTable{width:100%;border-collapse:collapse;font-size:12px}
.apiTable thead th{position:sticky;top:0;z-index:1;padding:10px 12px;text-align:left;color:rgba(230,234,242,.92);
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.10);font-weight:700}
.apiTable tbody td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top;color:rgba(230,234,242,.9)}
.apiTable tbody tr:last-child td{border-bottom:none}
.apiTable tbody tr:nth-child(2n) td{background:rgba(255,255,255,.01)}
.apiTable tbody tr:hover td{background:rgba(59,130,246,.06)}
.apiTable code{font-size:11px}

.reqBadge,.optBadge{display:inline-flex;align-items:center;justify-content:center;height:22px;min-width:44px;
  padding:0 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.reqBadge{border-color:rgba(245,158,11,.30);background:rgba(245,158,11,.10);color:rgba(254,243,199,.92)}
.optBadge{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.02);color:rgba(230,234,242,.75)}

.tryIt{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 220px at 0% 0%, rgba(59,130,246,.10), transparent 55%),
    rgba(255,255,255,.02)}
.tryIt{box-shadow:0 12px 45px rgba(0,0,0,.22)}
.tryHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tryTitle{font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:rgba(230,234,242,.9)}
.tryActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tryCheck{font-size:12px;color:rgba(230,234,242,.85);display:flex;align-items:center;gap:8px}
.trySend{border:1px solid rgba(59,130,246,.35);background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(59,130,246,.75));
  color:white;font-weight:650;letter-spacing:.2px;border-radius:12px;padding:9px 12px;cursor:pointer}
.trySend:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.7)}
.tryGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
@media (max-width:980px){.tryGrid{grid-template-columns:1fr}}
.tryLabel{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(154,164,178,.92);margin:0 0 6px}
.tryHeaders,.tryBody{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(8,12,24,.55) !important;color:rgba(234,240,255,.92) !important;outline:none;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;line-height:1.45;resize:vertical;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.tryHeaders::placeholder,.tryBody::placeholder{color:rgba(154,164,178,.8)}
.tryHeaders:focus,.tryBody:focus{border-color:rgba(59,130,246,.6);box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.tryRespMeta{display:flex;align-items:center;gap:10px;color:rgba(230,234,242,.85);font-size:12px;margin-bottom:8px}
.tryRespStatus{font-weight:650}
.tryResp{margin:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.28);overflow:auto;min-height:120px}

/* Public */
.page-public .grid{display:grid;grid-template-columns:1fr;gap:14px}

/* Admin */
.page-admin .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
@media (max-width:900px){.page-admin .grid{grid-template-columns:1fr}}

/* Login */
.page-login .wrap{max-width:520px;padding:38px 18px}
.page-login .card{padding:18px}
.page-login label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px}
.page-login input{
  width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);outline:none
}
.page-login input:focus{border-color:rgba(59,130,246,.6);box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.page-login .row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:14px}
.page-login button{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(59,130,246,.35);
  background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(59,130,246,.75));
  color:white;font-weight:650;letter-spacing:.2px;cursor:pointer
}
.page-login button:hover{filter:brightness(1.05)}
.page-login .err{margin-top:12px;color:#FCA5A5;font-size:13px}
.page-login .footer{margin-top:12px;color:var(--muted);font-size:12px}