* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f2933; background: #f5f7fa; }
a { color: #1d4ed8; }
.topbar { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1.5rem; background: #111827; color: #fff; }
.topbar .brand { color: #fff; font-weight: 700; text-decoration: none; letter-spacing: 0.08em; }
.topbar nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.topbar nav a { color: #e5e7eb; text-decoration: none; }
.topbar nav a:hover { color: #fff; text-decoration: underline; }
.topbar .who { color: #9ca3af; }
.page { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
.narrow { max-width: 480px; margin: 0 auto; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; }
.input, select, input[type="date"] { width: 100%; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 4px; font: inherit; }
.input.invalid { border-color: #dc2626; }
.error { color: #b91c1c; font-size: 0.85rem; margin-top: 0.25rem; }
.muted { color: #6b7280; font-size: 0.9rem; }
.btn { display: inline-block; padding: 0.5rem 1rem; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #1f2933; font: inherit; cursor: pointer; text-decoration: none; }
.btn:hover { background: #f3f4f6; }
.btn.primary { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.btn.primary:hover { background: #1e40af; }
.btn.danger { border-color: #dc2626; color: #b91c1c; }
.btn.small { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
button.link { background: none; border: none; color: #e5e7eb; cursor: pointer; font: inherit; padding: 0; }
button.link:hover { text-decoration: underline; }
form.inline { display: inline; }
.flash { list-style: none; padding: 0; margin: 0 0 1rem; }
.flash li { padding: 0.6rem 0.9rem; border-radius: 4px; margin-bottom: 0.5rem; }
.flash-error { background: #fee2e2; color: #991b1b; }
.flash-success { background: #dcfce7; color: #166534; }
.flash-info { background: #dbeafe; color: #1e40af; }
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 1rem; }
.filter label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.filter input, .filter select { width: auto; min-width: 7rem; }
.legend { display: flex; gap: 1rem; align-items: center; font-size: 0.9rem; margin-bottom: 0.75rem; }
.dot { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; margin-right: 0.25rem; vertical-align: middle; }
.dot.free, .place.free { background: #dcfce7; border-color: #16a34a; }
.dot.busy, .place.busy { background: #fee2e2; border-color: #dc2626; }
.dot.blocked, .place.blocked { background: #e5e7eb; border-color: #9ca3af; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.place { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.75rem; border: 2px solid #cbd5e1; border-radius: 8px; background: #fff; text-align: left; font: inherit; cursor: pointer; min-height: 6rem; }
.place.loading { opacity: 0.6; }
.place:disabled { cursor: not-allowed; }
.place.free:hover { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25); }
.place .number { font-size: 1.4rem; font-weight: 700; }
.place .inv { font-size: 0.8rem; color: #6b7280; }
.place .equipment { font-size: 0.8rem; }
.place .who { font-size: 0.8rem; color: #991b1b; }
.place .state { font-size: 0.8rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.place .state:empty { display: none; }
.place.blocked { color: #6b7280; }
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1rem; }
.tab { padding: 0.5rem 1rem; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background: none; color: #6b7280; font: inherit; cursor: pointer; margin-bottom: -1px; }
.tab:hover { color: #1f2933; }
.tab.active { background: #fff; border-color: #e5e7eb; color: #1f2933; font-weight: 600; }
.nav-group { display: inline-flex; gap: 0.6rem; align-items: center; padding-left: 0.75rem; border-left: 1px solid #374151; }
.nav-label { color: #9ca3af; font-size: 0.85rem; }
.wp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.wp-card { display: flex; flex-direction: column; gap: 0.5rem; }
.wp-card.is-blocked { background: #f3f4f6; }
.wp-head { display: flex; align-items: center; justify-content: space-between; }
.wp-head .number { font-size: 1.4rem; font-weight: 700; }
.badge { font-size: 0.8rem; padding: 0.15rem 0.5rem; border-radius: 999px; }
.badge.free { background: #dcfce7; color: #166534; }
.badge.blocked { background: #e5e7eb; color: #374151; }
.wp-edit .field { margin-bottom: 0.5rem; }
.wp-block { display: flex; gap: 0.5rem; align-items: center; }
.bulk-filter { margin-bottom: 1.5rem; }
.places { border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.5rem 0.75rem; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.places legend { padding: 0 0.25rem; font-size: 0.9rem; display: flex; gap: 1rem; }
.checkbox-inline { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.9rem; }
.pager { display: flex; gap: 0.75rem; margin-top: 1rem; }
code.details { font-size: 0.8rem; word-break: break-word; }
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0 0 1rem; }
.summary dt { color: #6b7280; }
.summary dd { margin: 0; }
.checkbox { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 1rem; }
.actions { display: flex; gap: 0.75rem; }
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.table th { font-size: 0.85rem; color: #6b7280; font-weight: 600; }
@media (max-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page { padding: 1rem; } }