:root{
  --base:#0d0f14;
  --panel:#14171f;
  --panel2:#1a1e28;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.20);
  --text:#e7e5df;
  --muted:#9aa0b0;
  --dim:#666c7c;
  --clay:#d2734a;
  --clay2:#dd8a67;
  --ok:#5a9e7a;
  --danger:#e0707a;
  --r:4px;
  --maxw:1080px;
  --font-sans:system-ui,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--base);color:var(--text);font-family:var(--font-sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em;line-height:1.2}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--panel2);border-radius:var(--r);border:2px solid var(--base)}
::-webkit-scrollbar-track{background:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:var(--r)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.mono{font-family:var(--font-mono)}
.accent{color:var(--clay)}
.ok{color:var(--ok)}
.danger{color:var(--danger)}
.center{text-align:center}

.nav{display:flex;align-items:center;gap:24px;height:64px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--base);position:sticky;top:0;z-index:20}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.03em;font-size:1rem}
.nav .mark{height:28px;width:auto;display:block}
.nav .links{display:flex;gap:22px;margin-left:8px}
.nav .links a{color:var(--muted);font-size:.92rem;font-weight:500}
.nav .links a:hover{color:var(--text)}
.nav .sp{flex:1}
@media (max-width:680px){
  .nav{flex-wrap:wrap;height:auto;padding:12px 16px;gap:10px}
  .nav .links{order:3;width:100%;margin-left:0}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:var(--r);padding:10px 18px;font-size:.9rem;font-weight:600;font-family:var(--font-sans);background:var(--panel);color:var(--text);transition:background .15s,border-color .15s}
.btn:hover{background:var(--panel2);border-color:var(--line2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:16px;height:16px}
.btn-accent{background:var(--clay);color:#1a1206;border-color:var(--clay)}
.btn-accent:hover{background:var(--clay2);border-color:var(--clay2)}
.btn-danger{border-color:rgba(224,112,122,.4);color:var(--danger)}
.btn-danger:hover{background:rgba(224,112,122,.08);border-color:rgba(224,112,122,.6)}
.btn-sm{padding:6px 12px;font-size:.82rem}
.btn-block{width:100%}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:.8rem;color:var(--muted)}
.input{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;color:var(--text);font:inherit;font-size:.94rem;outline:none;transition:border-color .15s;width:100%}
.input:focus{border-color:var(--clay)}
.input[readonly]{color:var(--muted);cursor:not-allowed}
textarea.input{resize:vertical;min-height:120px;line-height:1.6}
select.input{appearance:none;cursor:pointer}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card:hover{border-color:var(--line2)}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;padding:10px 16px;border-bottom:1px solid var(--line)}
td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:.88rem;vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.02)}

.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}

.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r);border:1px solid var(--line);color:var(--muted)}
.chip-accent{color:var(--clay);border-color:rgba(210,115,74,.4)}
.chip-ok{color:var(--ok);border-color:rgba(90,158,122,.4)}
.chip-danger{color:var(--danger);border-color:rgba(224,112,122,.4)}

.toggle{width:40px;height:22px;border-radius:20px;background:var(--panel);border:1px solid var(--line);position:relative;cursor:pointer;flex:none;display:inline-block}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--dim);transition:left .15s,background .15s}
.toggle.on{background:rgba(210,115,74,.15);border-color:var(--clay)}
.toggle.on::after{left:20px;background:var(--clay)}

.avatar{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;font-weight:700;font-size:1.2rem;background:var(--panel2);border:1px solid var(--line);color:var(--clay);flex:none}

footer{border-top:1px solid var(--line);padding:34px 0;margin-top:40px}
.foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--dim);font-size:.85rem;text-align:center}
.foot .brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.03em;color:var(--text)}
.foot .mark{height:20px;width:auto;display:block}
.foot a{color:var(--clay)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}