
:root{
  --ink:#0c1722; --muted:#6b7280; --bg:#f6f8fb; --card:#fff; --line:#e6ebf2; --accent:#0f172a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:14px Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:18px}
.header{position:sticky;top:0;background:#ffffffd6;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line);z-index:10}
.nav{display:flex;gap:16px;align-items:center;padding:12px 18px}
.nav a{padding:8px 10px;border-radius:10px}
.nav a.active, .nav a:hover{background:#eef2f7}
.nav .grow{flex:1}
.nav .admin{margin-left:auto; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:#fff}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow: 0 3px 16px rgba(8,15,31,.04);}
.grid{display:grid; gap:12px}
@media (min-width: 900px){ .grid.cols-2{ grid-template-columns: 1fr 1fr } }
h1{font-size:22px;margin:0 0 6px;font-weight:900;letter-spacing:.3px}
h2{font-size:16px;margin:0 0 6px}
.small{color:var(--muted); font-size:12px}
.btn{display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; border:0; border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:700}
.btn.secondary{background:#eef2f7;color:#0f172a}
.pill{display:inline-block; padding:4px 8px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:12px; color:#475569}
.kv{display:grid; grid-template-columns: 140px 1fr; gap:6px; align-items:start}
.hero{display:grid; gap:10px; align-items:center}
.hero img{width:100%; border-radius:12px; border:1px solid var(--line)}
input[type='text'], textarea{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; outline:none}
textarea{min-height:120px; resize:vertical}
.footer{padding:18px; text-align:center; color:#64748b}
.notice{font-size:12px; color:#6b7280}
kbd{font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#0f172a; color:#fff; padding:2px 6px; border-radius:6px}
