:root { --ink:#18212f; --muted:#667085; --paper:#fbfaf7; --line:#e6e1d8; --teal:#117f7a; --shadow:0 18px 55px rgba(24,33,47,.1); }
* { box-sizing: border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:linear-gradient(180deg,rgba(251,250,247,.94),rgba(251,250,247,.99)),var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:calc(100% - 48px); max-width:1120px; margin:0 auto; }
.topbar { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(230,225,216,.78); background:rgba(251,250,247,.9); backdrop-filter:blur(18px); }
.nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:950; }
.brand img { width:36px; height:36px; object-fit:contain; }
.nav-links { display:flex; gap:20px; color:var(--muted); font-weight:850; }
main { padding:58px 0 70px; }
.hero { display:flex; justify-content:space-between; gap:22px; align-items:end; margin-bottom:26px; }
h1 { margin:0; font-size:clamp(2.6rem,6vw,5rem); line-height:.95; }
p { margin:0; color:#4e5b6d; line-height:1.65; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--line); border-radius:8px; padding:0 15px; background:#fff; color:var(--ink); font-weight:900; cursor:pointer; }
.button.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card { display:grid; gap:13px; border:1px solid var(--line); border-radius:8px; padding:18px; background:rgba(255,255,255,.86); box-shadow:var(--shadow); }
.card h2 { margin:0; font-size:1.15rem; }
.card p { display:-webkit-box; min-height:3.2em; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.meta { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:.86rem; font-weight:850; }
.vote { display:flex; align-items:center; gap:8px; }
.vote-count { color:var(--teal); font-weight:950; }
.empty { border:1px solid var(--line); border-radius:8px; padding:24px; background:rgba(255,255,255,.84); }
.toast { position:fixed; right:22px; bottom:22px; transform:translateY(18px); opacity:0; pointer-events:none; border-radius:8px; padding:12px 14px; background:rgba(24,33,47,.94); color:#fff; font-weight:900; transition:opacity 180ms ease,transform 180ms ease; }
.toast.visible { opacity:1; transform:translateY(0); }
@media (max-width:860px) { .hero { align-items:start; flex-direction:column; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .shell { width:calc(100% - 28px); } .nav-links { display:none; } .grid { grid-template-columns:1fr; } }