* { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#f6f7f9; color:#1f2937; }
a { color:#1f6feb; text-decoration:none; }
a:hover { text-decoration:underline; }

.topnav { display:flex; gap:12px; padding:12px 16px; background:#111827; color:white; }
.topnav a { color:white; padding:6px 10px; border-radius:8px; }
.topnav a.right { margin-left:auto; }
.topnav a.danger { background:#b91c1c; }
.topnav a:hover { background:#374151; text-decoration:none; }

.hero { padding:24px 16px; background:linear-gradient(135deg,#e0f2fe,#fce7f3); border-bottom:1px solid #e5e7eb; }
.hero h1 { margin:0 0 4px 0; }

.layout { display:grid; grid-template-columns: 280px 1fr; gap:16px; padding:16px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.sidebar .card { margin-bottom:16px; }
.card { background:white; border-radius:12px; padding:16px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.card.small ul { margin:8px 0 0 18px; }

.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.price { font-weight:700; }

.table { width:100%; border-collapse: collapse; background:white; border-radius:12px; overflow:hidden; }
.table th, .table td { padding:12px; border-bottom:1px solid #e5e7eb; text-align:left; }
.table thead { background:#f3f4f6; }

.row { display:flex; gap:12px; align-items:center; }
button { border:0; background:#1f6feb; color:white; padding:10px 14px; border-radius:10px; cursor:pointer; }
button.ghost { background:#6b7280; }
button:hover { filter: brightness(0.95); }

.flash { padding: 8px 16px; }
.flash-item { background:#ecfccb; color:#3f6212; border:1px solid #bef264; padding:10px 14px; border-radius:10px; margin:8px 0; }

.totals { margin-top:16px; background:white; border-radius:12px; padding:16px; }
.totals .total { font-size: 1.2rem; }

.muted { color:#6b7280; }
.flags code { background:#111827; color:#fef3c7; padding:2px 6px; border-radius:6px; }

.footer { padding:16px; text-align:center; color:#6b7280; }
.badge { padding:2px 8px; border-radius:999px; font-size:.85rem; }
.badge.paid { background:#dcfce7; color:#166534; }
.badge.pending { background:#fee2e2; color:#991b1b; }
.btn-small { padding:6px 10px; font-size:.9rem; }