:root { --bg:#fff; --fg:#1f2328; --muted:#6b7280; --line:#e5e7eb; --soft:#f6f7f9; --accent:#2563eb; --sel:#eef4ff; --row:34px; --head:44px;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#16181d; --fg:#e6e6e6; --muted:#9aa0a6; --line:#2b2f36; --soft:#1d2027; --sel:#1f2a3d; --accent:#6ea8fe; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); height:100vh; display:flex; flex-direction:column; }
header { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
h1 { font-size:16px; font-weight:600; margin:0 8px 0 0; }
button, select, input, textarea { font:inherit; color:inherit; }
button { background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:5px 10px; cursor:pointer; }
button:hover { border-color:var(--muted); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.danger { color:#dc2626; }
.zoom { display:inline-flex; } .zoom button { border-radius:0; margin-left:-1px; } .zoom button:first-child { border-radius:6px 0 0 6px; } .zoom button:last-child { border-radius:0 6px 6px 0; }
.zoom button.on { background:var(--accent); color:#fff; border-color:var(--accent); position:relative; }
.chk { display:inline-flex; gap:6px; align-items:center; } .grow { flex:1; } .muted { color:var(--muted); font-size:12px; }
main { flex:1; display:flex; min-height:0; position:relative; }
#scroller { flex:1; display:flex; overflow-y:auto; min-width:0; }
#table { flex:none; width:520px; border-right:1px solid var(--line); }
.row { display:flex; align-items:center; height:var(--row); border-bottom:1px solid var(--line); cursor:pointer; }
.row.head { height:var(--head); font-weight:600; color:var(--muted); font-size:12px; cursor:default; background:var(--bg); }
.row:not(.head):hover { background:var(--soft); } .row.sel { background:var(--sel); }
.c-name { flex:1; min-width:0; display:flex; align-items:center; gap:4px; }
.c-name .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-status { width:100px; } .c-date { width:88px; font-variant-numeric:tabular-nums; color:var(--muted); font-size:12px; }
.tog { border:0; background:none; padding:0 2px; width:18px; } .tog-sp { display:inline-block; width:18px; }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; background:color-mix(in srgb, var(--c) 18%, transparent); color:color-mix(in srgb, var(--c) 75%, var(--fg)); }
#chartwrap { flex:1; overflow-x:auto; min-width:0; }
.chart { display:block; }
.chart .grid { stroke:var(--line); } .chart .wknd { fill:var(--soft); } .chart .today { stroke:#ef4444; stroke-width:1.5; }
.chart .tick { font-size:11px; fill:var(--muted); } .chart .month { font-size:12px; font-weight:600; fill:var(--fg); }
.chart .selrow { fill:var(--sel); } .chart .span { fill:var(--muted); opacity:.55; }
.chart .bar { cursor:grab; } .chart .bar:active { cursor:grabbing; } .chart .barlbl { font-size:12px; fill:#fff; pointer-events:none; } .chart .barlbl.out { fill:var(--fg); }
.chart .dep { fill:none; stroke:var(--muted); stroke-width:1.3; } .chart .ah { fill:var(--muted); }
#panel { flex:none; width:0; overflow:hidden; border-left:1px solid var(--line); background:var(--bg); transition:width .15s; }
#panel.open { width:360px; overflow-y:auto; }
#panel form { padding:14px; display:flex; flex-direction:column; gap:12px; width:360px; }
.ph { display:flex; align-items:start; gap:8px; } .ph h2 { font-size:15px; margin:0; flex:1; } .x { border:0; background:none; font-size:20px; line-height:1; }
#panel label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
#panel label > select, #panel label > input, #panel textarea { background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:6px 8px; color:var(--fg); font-size:14px; }
.deps { display:flex; flex-direction:column; gap:6px; } .dep-row { display:flex; gap:6px; align-items:center; color:var(--fg); font-size:13px; }
.dep-row .dn { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dep-row select, .deps > select { background:var(--soft); border:1px solid var(--line); border-radius:6px; padding:4px 6px; }
.rm { border:0; background:none; font-size:16px; padding:0 4px; }
.actions { display:flex; gap:8px; justify-content:space-between; }
#toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--fg); color:var(--bg); padding:8px 14px; border-radius:8px; transition:transform .2s; }
#toast.show { transform:translateX(-50%) translateY(0); } #toast.bad { background:#dc2626; color:#fff; }
.denied { margin:40px auto; max-width:480px; text-align:center; color:var(--muted); }
@media (max-width: 800px) { #table { width:300px; } .c-date { display:none; } #panel.open { position:absolute; right:0; top:0; bottom:0; width:100%; } #panel form { width:100%; } }