:root { --bg:#0f1115; --panel:#151922; --grid:#1d2330; --text:#e6e6e6; --muted:#9aa0aa; --accent:#4CAF50; --line:#2b3247; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell; }
.hidden { display:none !important; }
.muted { color: var(--muted); }

.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--panel); border-bottom:1px solid #202636; position:sticky; top:0; z-index:10; }
.brand { font-weight:700; letter-spacing:0.3px; }
.topbar button { background:#273148; color:#fff; border:0; padding:6px 10px; border-radius:8px; cursor:pointer; }

.filters { display:flex; justify-content:space-between; gap:12px; padding:10px 14px; background:#121621; border-bottom:1px solid #202636; flex-wrap:wrap; }
.filters .range button { margin-right:6px; }
.filters input, .filters select, .filters button { background:#1a2030; color:#fff; border:1px solid #283043; padding:6px 8px; border-radius:8px; }

.board-wrap { padding:12px 14px; }
.nav { margin-bottom:8px; display:flex; gap:8px; }
.nav button { background:#273148; border:0; color:#fff; padding:6px 10px; border-radius:8px; }

.board { position:relative; width:100%; height:70vh; background:var(--panel); border:1px solid #202636; overflow:auto; border-radius:12px; }

/* Layers */
.board .canvas { position:relative; min-width:1200px; min-height:1200px; }
.board .hours { position:sticky; top:0; display:grid; grid-auto-flow:column; background:#111623; z-index:3; border-bottom:1px solid var(--line); }
.board .hour { padding:6px 8px; white-space:nowrap; border-left:1px solid var(--line); font-size:12px; color:#cbd3e1; text-align:center; }

.board .grid { position:relative; }
.board .row { position:relative; border-bottom:1px dashed var(--line); height:40px; }
.board .row-label { position:absolute; left:0; top:0; width:80px; height:100%; border-right:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:#cbd3e1; font-size:12px; background:#121622; z-index:2; }
.board .row-track { margin-left:80px; height:100%; position:relative; background-image: linear-gradient(to right, transparent 0, transparent calc(100% - 1px), var(--line) calc(100% - 1px)); background-size: 120px 100%; }

.event { position:absolute; top:4px; height:32px; padding:6px 8px; border-radius:8px; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.event .title { font-weight:600; font-size:13px; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; }
.modal-content { width:520px; background:#0f1422; border:1px solid #273148; border-radius:12px; padding:16px; }
.modal-content label { display:block; margin:8px 0; }
.modal-content input, .modal-content textarea, .modal-content select { width:100%; background:#151c2c; color:#fff; border:1px solid #273148; border-radius:8px; padding:8px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.modal-actions .danger { background:#b33; }
.footer { padding:10px 14px; color:#8f97a8; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Mobile */
@media (max-width: 640px) {
  body { font-size: 13px; }
  .topbar { padding:8px 10px; }
  .topbar .brand { font-size: 14px; }
  .filters { flex-direction:column; gap:8px; }
  .filters .range, .filters .actions { display:flex; gap:6px; flex-wrap:wrap; }
  .filters input[type="date"], .filters #search { flex:1 1 140px; min-width:140px; }
  .board { height: calc(100svh - 190px); }
  .board .canvas { min-width: 800px; }
  .board .hour { padding:4px 6px; font-size:11px; }
  .board .row { height:28px; }
  .board .row-label { width:56px; font-size:11px; }
  .board .row-track { margin-left:56px; background-size: 80px 100%; }
  .event { height:22px; padding:4px 6px; }
  .event .title { font-size:12px; }
  .modal-content { width:92vw; max-width:520px; }
  .grid2 { grid-template-columns:1fr; }
}