*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:500 15px/1.55 var(--fb);overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
body>main,body>.page{flex:1}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--topsolid)}
h1,h2,h3{font-family:var(--fh);margin:0;text-wrap:balance;line-height:1.12}
p{margin:0}
a{color:var(--acc)}
button,select,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--pri);color:var(--pri-fg);padding:10px 16px;border-radius:var(--rb);font-weight:800;text-decoration:none}
.skip:focus{top:8px}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.sec{padding-block:34px}
.sec h2{font-size:clamp(1.5rem,3vw,2.15rem);font-weight:800}
.sec .hint,.hint{color:var(--muted);margin-top:6px}
/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--topsolid);color:var(--top-fg);border-bottom:var(--bdw) solid var(--bd)}
.bar{display:flex;align-items:center;gap:12px;padding-block:10px}
.brand{display:flex;align-items:center;gap:9px;font:800 1.3rem var(--fh);color:inherit;text-decoration:none;white-space:nowrap}
.brand b{color:var(--brandb)}
.logo-a{color:var(--logo-a)}.logo-b{color:var(--logo-b)}
.nav{display:flex;gap:2px;margin-inline:auto}
.nav a,.nav button{background:none;border:0;padding:8px 13px;border-radius:var(--rb);font:700 .95rem var(--fh);cursor:pointer;color:inherit;text-decoration:none}
.nav a:hover,.nav button:hover{background:var(--ghost-h)}
.right{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.lang{min-height:42px;padding:6px 12px;border:var(--bdw) solid var(--btnbd);border-radius:var(--rb);background:var(--ghost-bg);font-weight:700;cursor:pointer}
.lang option{color:#000;background:#fff}
.right .menu-btn{display:none}
.nav-auth{display:none;gap:8px;padding:8px 13px;flex-wrap:wrap}
.sub{background:var(--sub);color:var(--sub-fg);border-bottom:var(--bdw) solid var(--bd);font:700 .85rem var(--fb)}
.sub .wrap{display:flex;gap:6px 22px;flex-wrap:wrap;justify-content:center;padding-block:8px}
/* footer */
.foot{background:var(--foot);color:var(--foot-fg);border-top:var(--bdw) solid var(--bd);margin-top:34px;font:600 .9rem var(--fb)}
.foot .wrap{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding-block:18px}
/* generic layout */
.panel{border:var(--bdw) solid var(--bd);border-radius:var(--r);background:var(--surface);padding:clamp(16px,3vw,26px);box-shadow:var(--sh)}
.panel+.panel{margin-top:16px}
.grid2{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.grid2>*,.dgrid>*{min-width:0}
.stack{display:flex;flex-direction:column;gap:16px}
.stack>.panel+.panel{margin-top:0}
.dgrid{display:grid;grid-template-columns:230px 1fr;gap:20px;padding-block:26px}
.side{display:flex;flex-direction:column;gap:6px;border:var(--bdw) solid var(--bd);border-radius:var(--r);padding:12px;background:var(--surface);align-self:start}
.side a{text-align:start;padding:10px 14px;border-radius:12px;font:700 .95rem var(--fh);color:var(--fg);text-decoration:none}
.side a:hover{background:var(--ghost-h)}
.side a[aria-current="page"]{background:var(--pri);color:var(--pri-fg)}
.dtop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.dtop h1{font-size:1.7rem;margin:0}
.bal{border:var(--bdw) solid var(--bd);border-radius:var(--rb);padding:7px 16px;font-weight:700;background:var(--surface)}
.bal b{font:800 1.05rem var(--fh);margin-inline:6px}
.authbox{max-width:460px;margin:40px auto}
.authbox h1{font-size:1.8rem;margin-bottom:6px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:start;padding:10px 12px;border-bottom:var(--bdw) solid var(--bd);white-space:nowrap}
th{font:700 .78rem var(--fb);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88rem;background:var(--surface2);border:max(1px,calc(var(--bdw) - 1px)) solid var(--bd);border-radius:12px;padding:12px 14px;overflow-x:auto;white-space:pre;display:block}
.sidebtn{display:none}
@media(max-width:900px){
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--topsolid);padding:10px 16px;border-bottom:var(--bdw) solid var(--bd)}
  .right .menu-btn{display:inline-flex}
  .dgrid{grid-template-columns:1fr}
  .side{flex-direction:row;overflow-x:auto}
  .side a{white-space:nowrap}
  .grid2{grid-template-columns:1fr}
}
@media(max-width:520px){
  #authlinks{display:none}
  .nav.open .nav-auth{display:flex}
  .brand{font-size:.98rem;gap:5px}
  .bar{gap:8px}.right{gap:6px}
  .menu-btn{padding:6px 12px}
  .brand svg{width:30px;height:28px}
  .lang{padding:6px 8px;max-width:92px;text-overflow:ellipsis}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media(max-width:380px){
  .brand{font-size:.86rem;gap:4px}
  .brand svg{width:26px;height:24px}
  .lang{max-width:78px;padding:6px 6px}
  .menu-btn{padding:6px 10px}
}