/* A colorful style with gradient header and playful cards. */
:root{
--accent1: #ff6b6b;
--accent2: #6bffb3;
--accent3: #6ba8ff;
--muted: #f7f7fb;
}
*{box-sizing:border-box;font-family:Inter, system-ui, Arial}
body{margin:0;background:linear-gradient(120deg,var(--muted),#ffffff);color:#222}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px 36px;background:linear-gradient(90deg,var(--accent1),var(--accent3));color:white}
.header h1{margin:0;font-size:22px;letter-spacing:0.6px}
.container{max-width:1100px;margin:28px auto;padding:16px}
.card{background:white;border-radius:12px;padding:18px;box-shadow:0 8px 30px rgba(20,20,40,0.06);margin-bottom:18px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none}
.btn-primary{background:linear-gradient(90deg,var(--accent2),var(--accent3));color:#023}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sidebar{width:240px;background:linear-gradient(180deg,#ffffff, #f2f9ff);padding:14px;border-right:1px solid #eee;height:100vh}
.navlink{display:block;padding:10px;border-radius:8px;text-decoration:none;color:#0b3}
.navlink:hover{background:rgba(0,0,0,0.04)}
.seat{width:34px;height:34px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;margin:6px;border:1px solid #ddd}
.seat.available{background:#f6fff7}
.seat.selected{background:linear-gradient(90deg,var(--accent1),var(--accent3));color:white}
.seat.taken{background:#ddd;color:#666}


/* responsive */
@media(max-width:900px){.grid{grid-template-columns:1fr}.sidebar{display:none}}