:root { --ink:#18323a; --muted:#5f7377; --brand:#087f8c; --accent:#f4a261; --paper:#f7fbfa; --line:#d5e3e1; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:system-ui,-apple-system,Segoe UI,sans-serif; line-height:1.55; }
a { color:var(--brand); }
.nav { background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem max(1rem,calc((100% - 1100px)/2)); }
.brand { color:var(--ink); font-weight:800; text-decoration:none; }
.nav-links { display:flex; flex-wrap:wrap; gap:1rem; }
.nav-links a { text-decoration:none; font-weight:650; }
.container { width:min(1100px,calc(100% - 2rem)); margin:0 auto; }
.hero { padding:4rem 0 3rem; background:#dff3ef; }
.hero h1 { max-width:720px; font-size:clamp(2rem,5vw,4rem); line-height:1.05; margin:0 0 1rem; }
.hero p { max-width:650px; color:var(--muted); font-size:1.1rem; }
.section { padding:2.5rem 0; }
.toolbar, .form-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); align-items:end; }
label { display:grid; gap:.35rem; font-weight:650; }
input, select, textarea { width:100%; padding:.7rem .8rem; border:1px solid #b8cfcc; border-radius:6px; background:#fff; font:inherit; }
button, .button { display:inline-block; border:0; border-radius:6px; background:var(--brand); color:#fff; cursor:pointer; font:inherit; font-weight:700; padding:.7rem 1rem; text-decoration:none; }
button.secondary, .button.secondary { background:#e6f0ef; color:var(--ink); }
button.danger { background:#b83232; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.card img { width:100%; aspect-ratio:16/9; object-fit:cover; background:#d9ece9; }
.card-body { padding:1rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card-body .button { margin-top:auto; align-self:flex-start; }
.muted { color:var(--muted); }
.status { display:inline-block; width:max-content; border-radius:999px; padding:.2rem .55rem; background:#e6f0ef; font-size:.85rem; }
.panel { background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.25rem; }
.detail-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:1.5rem; }
.detail-grid img { width:100%; border-radius:8px; aspect-ratio:16/9; object-fit:cover; }
.registration-list { list-style:none; padding:0; display:grid; gap:.6rem; }
.registration-list li { border-bottom:1px solid var(--line); padding:.6rem 0; }
.notice { padding:.8rem 1rem; border-left:4px solid var(--accent); background:#fff7ed; }
.error { color:#a61b1b; }
footer { padding:2rem 0; color:var(--muted); border-top:1px solid var(--line); margin-top:2rem; }
@media (max-width:720px) { .nav { align-items:flex-start; flex-direction:column; } .detail-grid { grid-template-columns:1fr; } .hero { padding:3rem 0 2rem; } }