:root { --ink:#14213d; --ink2:#4b5568; --mute:#8a93a6; --line:#e4e7ee; --bg:#f6f7fb; --card:#fff; --acc:#f08a24; --acc2:#fff3e6; --ok:#2f8f5b; --okbg:#e8f6ee; --warn:#c2410c; --warnbg:#fdeee4; --blue:#2563eb; --bluebg:#e8efff; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
button,input,select,textarea { font:inherit; }
.boot { padding:40px; text-align:center; color:var(--mute); }
.shell { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
nav.side { background:var(--ink); color:#cfd6e6; padding:18px 12px; position:sticky; top:0; height:100vh; overflow:auto; }
nav.side .brand { color:#fff; font-weight:800; font-size:19px; padding:0 8px 4px; }
nav.side select { width:100%; margin:10px 0 14px; padding:8px; border-radius:8px; border:0; background:#22325a; color:#fff; }
nav.side a { display:flex; justify-content:space-between; color:#cfd6e6; text-decoration:none; padding:9px 10px; border-radius:8px; margin:2px 0; }
nav.side a.on, nav.side a:hover { background:#22325a; color:#fff; }
nav.side .who { margin-top:18px; padding:10px; border-top:1px solid #2c3b63; font-size:13px; }
nav.side .who b { color:#fff; display:block; }
.badge { background:var(--acc); color:#fff; border-radius:10px; padding:0 7px; font-size:12px; font-weight:700; }
main { padding:24px 28px 60px; max-width:1200px; }
h1 { margin:0 0 4px; font-size:26px; } .sub { color:var(--ink2); margin:0 0 20px; }
h2 { font-size:17px; margin:22px 0 10px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .sp { flex:1; }
.btn { border:0; background:var(--ink); color:#fff; padding:9px 14px; border-radius:9px; cursor:pointer; font-weight:600; }
.btn.acc { background:var(--acc); } .btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); } .btn.sm { padding:5px 10px; font-size:13px; }
.btn.danger { background:#fff; color:#b42318; border:1px solid #f1c4c0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer; }
.tile .n { font-size:30px; font-weight:800; } .tile .l { color:var(--ink2); font-size:13px; font-weight:600; }
.tile.warn .n { color:var(--warn); } .tile.ok .n { color:var(--ok); }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--mute); padding:10px 12px; border-bottom:1px solid var(--line); background:#fafbfd; }
td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; } tr.click:hover td { background:#fafbfd; cursor:pointer; }
.chip { display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:20px; margin:1px 3px 1px 0; background:#eef0f5; color:var(--ink2); white-space:nowrap; }
.chip.warn { background:var(--warnbg); color:var(--warn); } .chip.ok { background:var(--okbg); color:var(--ok); } .chip.blue { background:var(--bluebg); color:var(--blue); } .chip.acc { background:var(--acc2); color:#b45309; }
.muted { color:var(--mute); font-size:13px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.filters button { border:1px solid var(--line); background:#fff; border-radius:20px; padding:6px 12px; cursor:pointer; font-weight:600; color:var(--ink2); }
.filters button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
input,select,textarea { width:100%; padding:9px 10px; border:1px solid #d4d9e3; border-radius:9px; background:#fff; color:var(--ink); }
textarea { min-height:80px; }
label { display:block; font-size:12.5px; font-weight:700; color:var(--ink2); margin:10px 0 4px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px; }
fieldset { border:1px solid var(--line); border-radius:12px; padding:4px 14px 14px; margin:0 0 14px; background:#fff; }
legend { font-weight:800; padding:0 6px; }
#drawer { position:fixed; inset:0; background:rgba(15,23,42,.35); display:flex; justify-content:flex-end; z-index:20; }
#drawer[hidden] { display:none; }
#drawer .panel { width:min(620px,100%); height:100%; overflow:auto; background:var(--bg); padding:20px 22px 60px; }
#drawer .panel h1 { font-size:22px; }
.zone { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:0 0 12px; }
.zone h3 { margin:0 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--mute); }
dl { margin:0; display:grid; grid-template-columns:150px 1fr; gap:6px 10px; } dt { color:var(--ink2); font-size:13px; font-weight:600; } dd { margin:0; }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; z-index:30; }
.auth { max-width:400px; margin:9vh auto; } .auth .card { padding:24px; } .auth h1 { margin-bottom:12px; }
.err { color:#b42318; font-size:13px; margin-top:8px; }
.sched { overflow:auto; } .sched table { min-width:900px; } .sched td { min-width:110px; font-size:13px; } .sched td.store { font-weight:700; min-width:140px; }
.slot { border-radius:8px; padding:5px 7px; margin:0 0 5px; border:1px solid var(--line); background:#fff; cursor:pointer; }
.slot.open { border:1px dashed var(--warn); background:var(--warnbg); color:var(--warn); font-weight:700; }
.slot.filled { background:var(--okbg); border-color:#bfe3cd; }
.peak { font-size:11px; color:#b45309; font-weight:700; }
.tree ul { list-style:none; margin:0; padding-left:24px; border-left:2px solid var(--line); } .tree > ul { padding-left:0; border:0; }
.tree li { margin:8px 0; } .node { display:inline-flex; gap:8px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:7px 12px; }
.node.top { background:var(--ink); color:#fff; border-color:var(--ink); }
.empty { padding:26px; text-align:center; color:var(--mute); border:1px dashed #cfd5e0; border-radius:12px; background:#fff; }
@media (max-width:820px) { .shell { grid-template-columns:1fr; } nav.side { position:static; height:auto; } main { padding:16px; } .grid2,.grid3 { grid-template-columns:1fr; } dl { grid-template-columns:120px 1fr; } }