:root { --fg:#111; --bg:#fff; --muted:#666; --card:#f6f6f6; }
*{box-sizing:border-box} body{font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;color:var(--fg);background:var(--bg)}
header{padding:20px;border-bottom:1px solid #eee}
nav a{margin-right:12px;color:#06c;text-decoration:none}
nav a:hover{text-decoration:underline}
main{padding:24px}
.card{background:var(--card);padding:16px;border-radius:12px}
label{display:block;margin:8px 0 4px}
input,button{font:inherit;padding:8px}
button{cursor:pointer}
code{background:#f0f0f0;padding:2px 4px;border-radius:4px}
footer{padding:20px;border-top:1px solid #eee;color:var(--muted)}

.btn{background:var(--vk-accent,#3b82f6);color:#fff;border:0;border-radius:8px;padding:10px 14px}
.btn:hover{filter:brightness(0.95)}
textarea,select{width:100%;max-width:900px}
pre{overflow:auto}

/* chips + copy buttons */
.chip{display:inline-block;padding:3px 8px;border-radius:999px;font:12px/1 system-ui;background:#ddd;color:#222;vertical-align:middle}
.chip.ok{background:#16a34a;color:#fff}          /* green */
.chip.err{background:#dc2626;color:#fff}         /* red  */
.btn.small{padding:6px 10px;border-radius:6px;font-size:12px}
pre.wrap{white-space:pre-wrap}
.copy-wrap{position:relative}
.copy-btn{position:absolute;top:8px;right:8px}