\
:root { --b:#e5e7eb; --t:#111827; --m:#6b7280; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--t); background:#fafafa; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1000px; margin: 0 auto; padding: 16px; }

.topbar { background:#fff; border-bottom:1px solid var(--b); position: sticky; top:0; z-index:10; }
.topbar__inner { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand a { font-weight: 700; }
.nav { display:flex; gap:12px; flex-wrap: wrap; }
.nav a { padding:8px 10px; border-radius:10px; }
.nav a:hover { background:#f3f4f6; }

.footer { margin-top: 24px; padding: 24px 0; border-top:1px solid var(--b); color:var(--m); background:#fff; }

.card { background:#fff; border:1px solid var(--b); border-radius:16px; padding:16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.form { max-width: 520px; margin: 0 auto; display:flex; flex-direction:column; gap:12px; }
label { display:flex; flex-direction:column; gap:6px; font-size: 14px; }
input { padding:10px 12px; border:1px solid var(--b); border-radius:12px; font-size: 16px; }
.btn { cursor:pointer; border:1px solid var(--b); background:#111827; color:#fff; padding:10px 14px; border-radius:14px; font-size: 16px; }
.btn:hover { filter: brightness(1.05); }
.btn--like { background:#0f766e; }
.btn--shit { background:#b45309; }

.flash { padding:12px 14px; border-radius:14px; margin: 12px 0; border:1px solid var(--b); background:#fff; }
.flash--success { border-color:#86efac; }
.flash--error { border-color:#fca5a5; }

.muted { color: var(--m); }
.small { font-size: 12px; }
.center { text-align:center; }

.viewer { display:flex; flex-direction:column; gap:14px; align-items:center; }
.viewer__imagewrap { width: 100%; display:flex; justify-content:center; }
.viewer__img {
  max-width: 92vw;
  max-height: 72vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--b);
  background:#fff;
}
.viewer__actions { display:flex; gap:12px; justify-content:space-between; width: min(560px, 100%); }
.viewer__actions .btn { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; }

.grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 650px) { .grid { grid-template-columns: repeat(2, 1fr); } }

.tile { padding:10px; }
.tile__img { width:100%; aspect-ratio: 1/1; object-fit: cover; border-radius:14px; border:1px solid var(--b); }
.tile__meta { margin-top: 8px; display:flex; flex-direction:column; gap:3px; }