:root{--bg:#fff;--ink:#16181d;--mute:#626b78;--line:#e3e6ea;--acc:#4752c4;--on:#fff;--sk:#eef0f3}
@media(prefers-color-scheme:dark){:root{--bg:#121316;--ink:#eceef2;--mute:#9aa3b0;--line:#272a31;--acc:#8c97ff;--on:#0b0c10;--sk:#1c1e24}}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 17px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
header{display:flex;justify-content:flex-end;align-items:center;min-height:76px;padding:16px clamp(20px,5vw,64px);border-bottom:1px solid var(--line)}
header nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{font-weight:700;color:inherit;text-decoration:none;margin-right:auto}
main{padding:clamp(28px,7vw,80px) clamp(20px,5vw,64px);max-width:1000px}
#content{animation:fade .35s ease-out}
@keyframes fade{from{opacity:0}}
h1{font-size:clamp(34px,6vw,64px);line-height:1.1;margin:0 0 12px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.note{max-width:60ch;color:var(--mute);margin:0}
.count{display:flex;flex-wrap:wrap;gap:12px clamp(20px,5vw,48px);margin:36px 0}
.u b{display:block;font-size:clamp(40px,8vw,80px);line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.u small{color:var(--mute)}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.srv{display:flex;align-items:center;gap:14px;padding-top:24px;border-top:1px solid var(--line)}
.srv img,.srv .ph{width:56px;height:56px;border-radius:50%;flex:none;background:var(--sk);object-fit:cover}
.srv .ph{display:grid;place-items:center;font-weight:700;font-size:22px}
.srv b{display:block}.srv span{color:var(--mute);font-size:15px}
.btn{display:inline-block;background:var(--acc);color:var(--on);border:1px solid var(--acc);border-radius:8px;padding:9px 18px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.user{font-size:15px;color:var(--mute)}
.sk{background:linear-gradient(90deg,var(--sk) 30%,var(--line) 50%,var(--sk) 70%);background-size:220% 100%;animation:sh 1.2s linear infinite;border-radius:8px}
@keyframes sh{to{background-position:-220% 0}}
.tabs{display:flex;gap:6px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;color:var(--mute)}
.tabs button.on{color:var(--ink);border-color:var(--acc)}
.card{border:1px solid var(--line);border-radius:8px;padding:22px;margin-bottom:20px;max-width:760px}
.card h3{margin:0}.sub{color:var(--mute);margin:0 0 14px}
label{display:block;font-weight:600;font-size:15px;margin:16px 0 6px}
input,textarea,select{width:100%;font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.row{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
.row input{flex:1 1 160px;width:auto}.row span:first-child{flex:1}
.tag{color:var(--mute);font-size:14px}.msg{color:var(--acc);font-weight:600}
.form{max-width:760px}
@media(prefers-reduced-motion:reduce){.sk,#content{animation:none}}
.chk{display:flex;align-items:center;gap:8px}.chk input{width:auto}
input[type=color]{width:64px;height:40px;padding:2px}
.panel{border:1px solid var(--line);border-radius:8px;padding:6px 16px 14px;margin:14px 0}
.panel h4,.card h4{margin:14px 0 0}
.row select{flex:1 1 160px;width:auto}