:root {
    color-scheme: dark;
    --bg: #0b1220;
    --panel: rgba(255,255,255,.06);
    --text: #eaf0ff;
    --muted: rgba(234,240,255,.7);
    --line: rgba(255,255,255,.14);
    --ok: #3ddc97;
    --busy: #ff6b6b;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(900px 560px at 20% 10%, rgba(76,110,245,.2), transparent 60%), var(--bg); color: var(--text); font: 16px/1.5 system-ui, Segoe UI, Arial, sans-serif; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
header, nav, .actions, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
header { margin-bottom: 24px; }
h1 { margin: 0; font-size: 28px; }
h2 { margin: 0 0 12px; font-size: 21px; }
p { color: var(--muted); margin: 8px 0 20px; }
header p { margin: 0; }
a, summary { color: #acc3ff; text-underline-offset: 3px; }
a:hover, summary:hover { color: var(--text); }
.card { padding: 24px; margin-bottom: 24px; background: linear-gradient(180deg, rgba(255,255,255,.10), var(--panel)); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.login { max-width: 480px; margin: 48px auto; }
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wide { grid-column: span 2; }
label { display: block; font-weight: 650; margin-bottom: 6px; }
label span, td span { color: var(--muted); font-weight: 400; }
input, select, button { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
input, select { width: 100%; min-width: 0; background: #101b2e; color: var(--text); }
button { background: var(--ok); color: #071d14; cursor: pointer; font-weight: 750; }
button:hover { filter: brightness(1.1); }
button.secondary { background: transparent; color: var(--text); }
button.danger { background: rgba(255,107,107,.14); color: #ffaaaa; border-color: rgba(255,107,107,.5); margin-top: 8px; }
:focus-visible { outline: 3px solid #acc3ff; outline-offset: 3px; }
.actions { justify-content: flex-start; margin-top: 22px; }
.login button { margin-top: 20px; }
.message { padding: 14px 18px; border: 1px solid; border-radius: 12px; margin-bottom: 20px; overflow-wrap: anywhere; }
.error { color: #ffc0c0; border-color: var(--busy); background: rgba(255,107,107,.08); }
.success { color: #b0f5d8; border-color: var(--ok); background: rgba(61,220,151,.08); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 14px; }
td:first-child { white-space: nowrap; }
.customer { min-width: 160px; max-width: 400px; overflow-wrap: anywhere; }
.delete-form { margin-top: 10px; }
summary { cursor: pointer; }
.empty { padding: 12px 0; }
footer { color: var(--muted); font-size: 13px; }
@media (max-width: 720px) {
    .wrap { padding: 14px; }
    .card { padding: 18px; }
    .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
    .fields { grid-template-columns: minmax(0, 1fr); }
    .wide { grid-column: auto; }
}