:root { --max: 860px; --fg: #111; --muted: #555; --bg:#fafafa; --card:#fff; --line:#e5e7eb; --accent:#0b5fff; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--fg); background:var(--bg); line-height:1.45}
header{background:#fff;border-bottom:1px solid var(--line)}
.wrap{max-width:var(--max); margin:0 auto; padding:18px 18px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#111,#444);}
h1{font-size:28px;margin:10px 0 6px}
h2{font-size:20px;margin:22px 0 10px}
p{margin:10px 0}
nav a{margin-right:14px;color:var(--accent);text-decoration:none}
nav a:hover{text-decoration:underline}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:14px 0}
.grid{display:grid;grid-template-columns:1fr; gap:14px}
@media (min-width:740px){ .grid{grid-template-columns:1fr 1fr} }
button,.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:12px 14px;font-weight:600;text-decoration:none;cursor:pointer}
button:hover,.btn:hover{filter:brightness(0.95)}
.btn.secondary{background:#111}
small,.muted{color:var(--muted)}
label{display:block;font-weight:600;margin:10px 0 6px}
input,textarea,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:16px}
textarea{min-height:120px;resize:vertical}
.row{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:740px){ .row{grid-template-columns:1fr 1fr} }
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
footer{border-top:1px solid var(--line); background:#fff}
.notice{font-size:14px;color:var(--muted)}
kbd{background:#111;color:#fff;padding:2px 6px;border-radius:6px;font-size:12px}