:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --muted-surface: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15,23,42,.10);
  --shadow: 0 16px 40px rgba(2,6,23,.10);

  --blue: #8fd3ff;
  --pink: #ffb6d5;

  --radius: 18px;
  --max: 1120px;

  --ring: 0 0 0 4px rgba(143,211,255,.22);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(143,211,255,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,182,213,.25), transparent 60%),
    linear-gradient(180deg, #ffffff, #ffffff);
}
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.92; }

.container{ max-width:var(--max); margin:0 auto; padding:22px 16px 60px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 2px 18px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:-0.3px; font-size:18px; }
.brand-badge{ width:38px; height:38px; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--pink)); box-shadow:var(--shadow); }
.sub{ margin-top:4px; color:var(--muted); font-size:13px; }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.section{ padding:18px; }

.hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.h1{ margin:0; font-size:28px; letter-spacing:-0.7px; }
.small{ color:var(--muted); font-size:13px; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(143,211,255,.14), rgba(255,182,213,.14));
  color:var(--muted); font-size:13px;
}

.grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:980px){ .grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:720px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .grid{ grid-template-columns:1fr;} }

.entry{
  overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  transition:transform .12s ease;
}
.entry:hover{ transform:translateY(-2px); }
.entry img{
  width:100%; height:230px; object-fit:cover; display:block;
  background:var(--muted-surface);
}
.entry .meta{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:10px; }
.entry .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.entry .name{ font-weight:800; }
.entry .votes{ color:var(--muted); font-size:13px; }

.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:14px;
  border:1px solid transparent;
  cursor:pointer; font-weight:800;
  background:#fff;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:linear-gradient(135deg, rgba(143,211,255,.95), rgba(255,182,213,.95));
  color:#0b1220;
  box-shadow:0 12px 28px rgba(2,6,23,.12);
}
.btn-ghost{ background:#fff; border-color:var(--border); color:var(--text); }
.icon-btn{ width:44px; height:44px; padding:0; border-radius:16px; }
.icon{ width:18px; height:18px; }
.icon-lg{ width:20px; height:20px; }

.table{
  width:100%;
  border-collapse:collapse;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
}
.table th,.table td{ text-align:left; padding:12px 12px; border-bottom:1px solid var(--border); font-size:14px; }
.table th{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.table tr:last-child td{ border-bottom:none; }

.input, select{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  outline:none;
}
.input:focus, select:focus{ box-shadow:var(--ring); border-color:rgba(143,211,255,.9); }

.notice{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  color:var(--muted);
}
.notice.ok{ border-color:rgba(34,197,94,.35); }
.notice.err{ border-color:rgba(239,68,68,.35); }

.rank{ display:flex; align-items:center; gap:10px; }
.avatar{
  width:34px; height:34px; border-radius:12px;
  object-fit:cover; background:var(--muted-surface);
  border:1px solid var(--border);
}