:root { --bg:#f7fafc; --card:#ffffff; --ink:#0f172a; --muted:#5b6472; --line:#e5e7eb; --accent:#2563eb; --accent-2:#0ea5e9; }

* { box-sizing:border-box }

html,
body { margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif }

a { color:var(--accent); text-decoration:none }
a:hover { text-decoration:underline }

.wrap { max-width:1100px; margin:0 auto; padding:24px }

/* Header */
header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,0.92); backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid var(--line) }
.head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px }
.brand { display:flex; align-items:center; gap:12px }
.brand img { width:44px; height:44px; border-radius:8px; object-fit:cover; background:#eee }
nav a { margin:0 10px; font-weight:600 }
header nav a[data-active="true"] { text-decoration:underline }

/* Banner */
.banner { background:linear-gradient(90deg,#fff7ed,#e0f2fe); border-bottom:1px solid #fed7aa; color:#111827; overflow:hidden }
.banner a { color:inherit; text-decoration:none; display:block }
.marquee { position:relative; width:100%; overflow:hidden; height:46px }
.marquee__track { display:inline-flex; align-items:center; gap:48px; white-space:nowrap; will-change:transform; animation:marquee-slide 18s linear infinite; padding:10px 16px; font-weight:800; font-size:18px }
.marquee__item { display:inline-flex; align-items:center; gap:10px }
@keyframes marquee-slide { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation:none } }

/* Layout helpers */
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.hero { padding:40px 24px }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.04) }
.card.clickable:hover { box-shadow:0 6px 18px rgba(0,0,0,.08) }
.muted { color:#6b7280 }
.badge { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; background:#eef2ff; border:1px solid #c7d2fe; border-radius:999px; color:#1e3a8a; font-size:12px }
.note { font-size:13px; color:var(--muted) }

/* Inputs */
input,
select,
button { background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:14px }
button { cursor:pointer }

/* Tables */
table { width:100%; border-collapse:collapse }
th,
td { padding:10px; border-bottom:1px solid var(--line); text-align:left }
tr:last-child td { border-bottom:none }
.price { font-variant-numeric:tabular-nums; font-weight:700 }
.pill { display:inline-block; padding:2px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:#6b7280 }

/* Thumb utilities (index/galerie) */
.thumb { width:100%; height:180px; border-radius:10px; object-fit:cover; background:#f1f5f9; display:block }

/* Sponsors grid */
.sponsors { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px }
.sponsors a,
.sponsors span { display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px }
.sponsors img { max-width:100%; max-height:70px; object-fit:contain }

/* Popup modal */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:50 }
.modal .box { background:#fff; border-radius:16px; border:1px solid var(--line); padding:20px; max-width:520px; margin:16px }
.modal .box h3 { margin-top:0 }

/* Footer */
.footer { color:#6b7280; font-size:14px; padding:24px }

/* Print */
@media print {
  header,
  .modal,
  .banner { display:none }
  body { background:#fff; color:#000 }
  .card { border:1px solid #ccc }
  .price { color:#000 }
}