:root{
  --bg0:#0d0f12;
  --bg1:#111418;
  --bg2:#15181c;
  --bg3:#1b1f24;
  --bg4:#23272e;

  --line:rgba(255,255,255,.05);
  --line2:rgba(255,255,255,.085);
  --line3:rgba(255,255,255,.14);

  --card-line:rgba(255,255,255,.035);
  --card-shadow:0 1px 2px rgba(0,0,0,.2);
  --card-line-hover:rgba(255,255,255,.08);

  --t1:#e8eaed;
  --t2:#a2a8b0;
  --t3:#8b929b;
  --t4:#6b717a;

  --brand:#3b82f6;
  --brand-2:#60a5fa;
  --brand-deep:#2563eb;
  --brand-soft:rgba(59,130,246,.13);
  --brand-line:rgba(59,130,246,.28);
  --on-accent:#ffffff;

  --brand-fill:#2563eb;
  --brand-fill-hover:#1d4ed8;

  --ok:#22c55e;
  --err:#ef4444;
  --warn:#f59e0b;
  --info:#3b82f6;

  --ok-fg:#22c55e;
  --err-fg:#f26b6b;
  --warn-fg:#f59e0b;
  --brand-fg:#5a95f8;

  --err-fill:#dc2626;
  --err-fill-hover:#c81e1e;

  --code:#93c5fd;
  --shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.32);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --ring:rgba(59,130,246,.35);

  --shadow-pop:0 2px 4px -2px rgba(0,0,0,.28), 0 4px 12px -2px rgba(0,0,0,.34);
  --shadow-modal:0 4px 8px -4px rgba(0,0,0,.36), 0 16px 32px -12px rgba(0,0,0,.48);

  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:20px;
  --s6:24px;
  --s7:32px;
  --s8:48px;

  --fs-1:11px;  --lh-1:16px;
  --fs-2:12px;  --lh-2:16px;
  --fs-3:13px;  --lh-3:20px;
  --fs-4:14px;  --lh-4:20px;
  --fs-5:16px;  --lh-5:24px;
  --fs-6:20px;  --lh-6:28px;
  --fs-7:28px;  --lh-7:32px;
  --fs-8:40px;  --lh-8:44px;

  --ls-1:.4px;
  --ls-2:.32px;
  --ls-3:.16px;
  --ls-4:.16px;
  --ls-5:0;
  --ls-6:-.2px;
  --ls-7:-.4px;
  --ls-8:-.6px;

  --fw-normal:400;
  --fw-medium:500;
  --fw-semi:600;
  --fw-bold:700;

  --radius-sm:4px;
  --radius:6px;
  --radius-lg:12px;
  --radius-pill:9999px;
  --radius-xl:var(--radius-lg);
  --sidebar-w:262px;

  --ctl-xs:24px;
  --ctl-sm:28px;
  --ctl-md:32px;
  --ctl-lg:40px;
  --ctl-xl:48px;
  --ctl-pad-tight:8px;
  --ctl-pad:12px;
  --ctl-pad-wide:16px;

  --row-compact:32px;
  --row:40px;
  --row-tall:48px;

  --pad-card:var(--s5);
  --pad-card-dense:var(--s4);
  --pad-cell:var(--s4);
  --gap-btn-group:var(--s2);
  --gap-control:var(--s3);

  --grid-cols:12;
  --grid-gutter:24px;

  --lift:inset 0 1px 0 rgba(255,255,255,.045);
  --lift-hi:inset 0 1px 0 rgba(255,255,255,.08);

  --focus:0 0 0 3px var(--ring);

  --t-fast:.14s;
  --t:.22s;
  --ease:cubic-bezier(.2,.7,.25,1);

  --container:min(1400px, 91vw);
  --container-bar:min(1620px, 96vw);
  --container-wide:var(--container);
  --gutter:clamp(18px, 3vw, 44px);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --app-bar:min(1560px, 100%);
  --app-content:min(1440px, 100%);

  --c1:var(--brand);
  --c2:#8b5cf6;
  --c3:#14b8a6;

  --ac:var(--brand); --ac3:var(--brand-2);
  --gn:var(--ok); --rd:var(--err); --am:var(--warn);
  --t-main:var(--t1); --border:var(--line2); --b2:var(--bg3); --b4:var(--line2);
  --glass-bg:var(--bg3);
  --ac-glow:var(--ring);
  --ac-gradient:var(--brand);
  --gn-g:color-mix(in srgb,var(--ok) 12%,transparent);
  --gn-border:color-mix(in srgb,var(--ok) 34%,transparent);
  --am-g:color-mix(in srgb,var(--warn) 12%,transparent);
  --am-border:color-mix(in srgb,var(--warn) 34%,transparent);
}

:root[data-theme="light"]{
  --bg0:#f1f3f6;
  --bg1:#ffffff;
  --bg2:#ffffff;
  --bg3:#f1f3f5;
  --bg4:#e6e9ee;

  --line:rgba(15,18,24,.07);
  --line2:rgba(15,18,24,.115);
  --line3:rgba(15,18,24,.19);

  --card-line:rgba(15,18,24,.055);
  --card-shadow:0 1px 2px rgba(16,18,22,.045);
  --card-line-hover:rgba(15,18,24,.11);

  --lift:0 1px 2px rgba(16,18,22,.05);
  --lift-hi:0 2px 6px rgba(16,18,22,.07);

  --t1:#14171c;
  --t2:#4c525c;
  --t3:#616872;
  --t4:#79808b;

  --brand:#2563eb;
  --brand-2:#3b82f6;
  --brand-deep:#1d4ed8;
  --brand-soft:rgba(37,99,235,.09);
  --brand-line:rgba(37,99,235,.24);
  --on-accent:#ffffff;

  --brand-fill:#2563eb;
  --brand-fill-hover:#1d4ed8;

  --ok:#178a42;
  --err:#dc2626;
  --warn:#bd6404;
  --info:#2563eb;

  --ok-fg:#0d7032;
  --err-fg:#c31f1f;
  --warn-fg:#8a5200;
  --brand-fg:#1c5cea;

  --err-fill:#dc2626;
  --err-fill-hover:#c81e1e;

  --code:#1d4ed8;
  --c2:#7c3aed;
  --c3:#0d9488;
  --shadow:0 1px 2px rgba(16,18,22,.05), 0 8px 24px rgba(16,18,22,.07);
  --shadow-sm:0 1px 2px rgba(16,18,22,.06);
  --ring:rgba(37,99,235,.28);

  --shadow-pop:0 2px 4px -2px rgba(16,18,22,.10), 0 4px 12px -2px rgba(16,18,22,.12);
  --shadow-modal:0 4px 8px -4px rgba(16,18,22,.12), 0 16px 32px -12px rgba(16,18,22,.20);
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;overflow-x:hidden;scroll-behavior:smooth}
body{
  min-height:100%;
  font-family:var(--font);
  background:var(--bg0);
  color:var(--t1);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%}
::selection{background:color-mix(in srgb,var(--brand) 30%,transparent)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:var(--radius-pill);border:2px solid var(--bg0)}
*::-webkit-scrollbar-thumb:hover{background:var(--line3)}

.theme-seg{
  display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;
  background:var(--bg2);border:1px solid var(--line2);
  border-radius:var(--radius-pill);padding:3px;
}
:root[data-theme="light"] .theme-seg{background:var(--bg3)}
.theme-seg button{
  width:var(--ctl-sm);height:var(--ctl-sm);border-radius:var(--radius-pill);cursor:pointer;
  background:transparent;border:none;color:var(--t3);
  display:grid;place-items:center;
  transition:color .16s,background .16s;
}
.theme-seg button:hover{color:var(--t1)}
.theme-seg button.on{background:var(--bg4);color:var(--t1)}
:root[data-theme="light"] .theme-seg button.on{background:#fff;box-shadow:var(--shadow-sm)}
.theme-seg button svg{width:14px;height:14px}
.theme-seg button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.theme-seg-label{font-size:11.5px;color:var(--t3);margin-right:9px;letter-spacing:.2px}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.32s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
  mix-blend-mode:normal;
}
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after{
  transition:background-color .32s ease,
             color .32s ease,
             border-color .32s ease,
             fill .32s ease,
             stroke .32s ease,
             box-shadow .32s ease !important;
  transition-delay:0s !important;
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html.theme-anim,html.theme-anim *,
  html.theme-anim *::before,html.theme-anim *::after{transition:none !important}
}

.nav-burger{
  display:none;
  width:var(--ctl-lg);height:var(--ctl-lg);flex:0 0 auto;
  border-radius:var(--radius);cursor:pointer;
  background:transparent;border:1px solid var(--line2);color:var(--t2);
  place-items:center;
  transition:color .14s,background .14s,border-color .14s;
}
.nav-burger:hover{color:var(--t1);background:var(--bg3);border-color:var(--line3)}
.nav-burger svg{width:18px;height:18px}

html.nav-open{overflow:hidden}

.nav-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility 0s linear .2s;
}
html.nav-open .nav-scrim{
  opacity:1;visibility:visible;
  transition:opacity .2s ease,visibility 0s linear 0s;
}

.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(330px,86vw);
  display:flex;flex-direction:column;
  background:var(--bg1);border-left:1px solid var(--line2);
  box-shadow:var(--shadow);
  transform:translateX(100%);visibility:hidden;
  transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s linear .24s;
  overscroll-behavior:contain;
}
html.nav-open .nav-drawer{
  transform:none;visibility:visible;
  transition:transform .24s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;
}
@media(prefers-reduced-motion:reduce){
  .nav-drawer,.nav-scrim,
  html.nav-open .nav-drawer,html.nav-open .nav-scrim{transition-delay:0s !important}
}

.nd-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 14px 14px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.nd-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--t1)}
.nd-brand img{width:27px;height:27px;object-fit:contain;display:block}
.nd-close{
  width:var(--ctl-md);height:var(--ctl-md);flex:0 0 auto;
  border-radius:var(--radius);cursor:pointer;
  background:transparent;border:1px solid var(--line2);color:var(--t2);
  display:grid;place-items:center;
  transition:color .14s,background .14s,border-color .14s;
}
.nd-close:hover{color:var(--t1);background:var(--bg3);border-color:var(--line3)}
.nd-close svg{width:17px;height:17px}

.nd-scroll{flex:1 1 auto;overflow-y:auto;padding:12px 12px 16px}
.nd-sec{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--t3);padding:12px 10px 8px}
.nd-links{display:flex;flex-direction:column;gap:2px}
.nd-links a{
  display:flex;align-items:center;gap:13px;
  padding:11px 12px;border-radius:var(--radius-sm);
  font-size:14.5px;font-weight:500;color:var(--t2);
  transition:color .14s,background .14s;
}
.nd-links a:hover{color:var(--t1);background:var(--bg3)}
.nd-links a.on{color:var(--brand);background:var(--brand-soft);font-weight:600}
.nd-links a svg{width:17px;height:17px;flex:0 0 auto}
.nd-links a .ext{margin-left:auto;width:14px;height:14px;color:var(--t3)}

[data-brand]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.brand-svg{width:1em;height:1em;display:block}
.nd-links [data-brand] .brand-svg{width:17px;height:17px}
.info-row .k [data-brand] .brand-svg{width:15px;height:15px}
.af-links [data-brand] .brand-svg,
.foot [data-brand] .brand-svg{width:14px;height:14px}

.nd-foot{
  flex:0 0 auto;display:grid;gap:9px;
  padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.nd-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:var(--ctl-lg);padding:0 var(--ctl-pad-wide);border-radius:var(--radius);
  font-size:14px;font-weight:600;font-family:inherit;
  border:1px solid transparent;background:var(--brand-fill);color:var(--on-accent);
  cursor:pointer;transition:background .14s,border-color .14s,color .14s;
}
.nd-btn:hover{background:var(--brand-fill-hover)}
.nd-btn.ghost{background:transparent;border-color:var(--line2);color:var(--t1)}
.nd-btn.ghost:hover{background:var(--bg3);border-color:var(--line3)}
.nd-btn svg{width:16px;height:16px}

@media(max-width:1120px){.nav-burger{display:grid}}
@media(min-width:1121px){.nav-drawer,.nav-scrim{display:none}}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg0) inset !important;
  -webkit-text-fill-color: var(--t1) !important;
  transition: background-color 5000s ease-in-out 0s;
}

:root[data-theme="light"] input:-webkit-autofill,
:root[data-theme="light"] input:-webkit-autofill:hover,
:root[data-theme="light"] input:-webkit-autofill:focus,
:root[data-theme="light"] input:-webkit-autofill:active,
:root[data-theme="light"] textarea:-webkit-autofill,
:root[data-theme="light"] textarea:-webkit-autofill:hover,
:root[data-theme="light"] textarea:-webkit-autofill:focus,
:root[data-theme="light"] textarea:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--bg1) inset !important;
  -webkit-text-fill-color: var(--t1) !important;
}

.dot-ok{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);
  margin-right:6px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent);
}
.pulse-dot{
  width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);
  animation:pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}
