:root { --ink:#1f2a37; --muted:#5b6675; --accent:#1d5c8f; --line:#dde3ea; --bg:#f6f8fa; --card:#fff; --warn:#a4372b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.top { background:var(--card); border-bottom:1px solid var(--line); }
.top .in { max-width:960px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.logo { font-weight:700; font-size:1.15rem; color:var(--ink); }
.logo span { color:var(--accent); }
nav { display:flex; gap:18px; flex-wrap:wrap; font-size:.95rem; }
nav .login { margin-left:auto; }
main { max-width:960px; margin:0 auto; padding:28px 20px 48px; }
.hero h1 { margin:0 0 8px; font-size:1.7rem; line-height:1.25; }
.hero p { margin:0 0 6px; color:var(--muted); max-width:720px; }
.stats { display:flex; gap:28px; flex-wrap:wrap; margin:18px 0 28px; padding:0; list-style:none; font-size:.92rem; color:var(--muted); }
.stats b { display:block; font-size:1.3rem; color:var(--ink); }
.grid { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:28px; }
@media (max-width:760px) { .grid { grid-template-columns:1fr; } }
h2.sec { font-size:1.1rem; margin:0 0 12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:14px; }
.card h3 { margin:0 0 2px; font-size:1.05rem; }
.meta { font-size:.82rem; color:var(--muted); }
.tags { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; padding:0; list-style:none; }
.tags li { font-size:.78rem; background:#eef3f8; color:#30506d; border-radius:4px; padding:1px 7px; }
.tags li.bad { background:#f8ecea; color:var(--warn); }
.score { font-size:.88rem; color:var(--muted); margin:6px 0 0; }
.score b { color:var(--ink); }
.card p { margin:8px 0 0; }
.foot { font-size:.82rem; color:var(--muted); margin-top:10px; }
aside .card h3 { font-size:.98rem; }
aside .card p, aside .card li { font-size:.9rem; color:var(--muted); }
aside ul { margin:8px 0 0; padding-left:18px; }
.more { text-align:center; margin:18px 0 0; font-size:.95rem; }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
footer .in { max-width:960px; margin:0 auto; padding:18px 20px 32px; }
.auth { max-width:380px; margin:30px auto; }
.auth h1 { font-size:1.35rem; margin:0 0 16px; }
.auth label { display:block; font-size:.9rem; margin:12px 0 4px; }
.auth input { width:100%; padding:9px 10px; border:1px solid #c5ced8; border-radius:6px; font:inherit; background:#fff; }
.auth button { margin-top:18px; width:100%; padding:10px; border:0; border-radius:6px; background:var(--accent); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
.auth .err { background:#f8ecea; color:var(--warn); border:1px solid #ecc9c3; border-radius:6px; padding:9px 12px; font-size:.92rem; margin-bottom:6px; }
.auth .note { font-size:.88rem; color:var(--muted); margin-top:16px; }