:root {
    --ink: #1f2933;
    --muted: #6b7785;
    --line: #d9dee4;
    --accent: #c0392b;
    font-family: system-ui, "Segoe UI", sans-serif;
    color: var(--ink);
}

body { margin: 0; }
main { padding: 1rem 1.5rem 3rem; }
h1 { font-size: 1.5rem; margin: .25rem 0; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.subtitle, .hint { color: var(--muted); }
.subtitle { margin: 0 0 1rem; }
.hint { font-size: .85rem; }
.error { color: var(--accent); }

.site-header { display: flex; align-items: center; gap: 1.5rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--line); }
.site-header .brand { font-weight: 600; color: inherit; text-decoration: none; }
.site-header nav a { margin-right: 1rem; }
.site-header nav a.active { font-weight: 600; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.toolbar .spacer { flex: 1; }
.toolbar a.preset { padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 4px; color: inherit; text-decoration: none; }
.toolbar a.preset.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.gantt { display: flex; border: 1px solid var(--line); font-size: 12px; }
.gantt svg { display: block; }
.gantt-labels { flex: none; border-right: 1px solid var(--line); }
.gantt-scroll { flex: 1; min-width: 0; overflow-x: auto; }
.gantt text { dominant-baseline: middle; fill: var(--ink); }
.gantt .stripe-0 { fill: #fff; }
.gantt .stripe-1 { fill: #f6f8fa; }
.gantt .label.wp, .gantt .label.milestones, .gantt .month-label { font-weight: 600; }
.gantt .range, .gantt .week-label, .gantt .period-label { fill: var(--muted); font-size: 10px; }
.gantt .week-label { text-anchor: middle; }
.gantt .month-line { stroke: var(--line); }
.gantt .header-line { stroke: var(--ink); stroke-width: .5; }
.gantt .period-line { stroke: var(--muted); stroke-dasharray: 4 3; }
.gantt .today-line { stroke: var(--accent); stroke-width: 1.5; }
.gantt .current-week { fill: var(--accent); opacity: .1; }
.gantt .week-label.current { fill: var(--accent); font-weight: 600; }
.gantt .bar.wp { opacity: .35; }
.gantt .bar.task { opacity: .9; }
.gantt .link { fill: none; stroke: #555; }
.gantt marker path { fill: #555; }
.gantt .marker.milestone { fill: var(--ink); }
.gantt .marker.deliverable { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.gantt .assignees { fill: var(--muted); font-size: 10px; }

.legend { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--muted); }
.legend b { color: var(--ink); margin-right: .3rem; }

table.list { border-collapse: collapse; margin-bottom: 1rem; font-size: .9rem; }
table.list th, table.list td { border-bottom: 1px solid var(--line); padding: .3rem .6rem; text-align: left; vertical-align: middle; }

.editor-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .75rem; padding: .5rem 0; margin-bottom: 1rem; background: #fff; border-bottom: 1px solid var(--line); }
.editor-bar .status { color: var(--muted); }
.problems { margin-bottom: 1rem; padding: .5rem 1rem; background: #fff4e5; border: 1px solid #f0c36d; }
.editor .fields { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.editor .fields label { display: flex; flex-direction: column; font-size: .85rem; }
.editor table input, .editor table select { font: inherit; box-sizing: border-box; }
.editor input.id { width: 5.5rem; }
.editor input.num { width: 4.5rem; }
.editor td.assignees label { margin-right: .5rem; white-space: nowrap; }
.editor td.depends .dep { display: inline-block; margin-right: .4rem; white-space: nowrap; }
.editor td.depends .dep button { margin-left: .15rem; padding: 0 .3rem; line-height: 1.2; }
.editor td.depends select { display: block; max-width: 14rem; }
.editor td.depends .dep ~ select { margin-top: .25rem; }
.editor button.contents.filled { font-weight: 600; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); }
.modal { width: min(40rem, 90vw); padding: 1rem 1.25rem; background: #fff; border-radius: 6px; box-shadow: 0 4px 20px rgba(0, 0, 0, .25); }
.modal h3 { margin: 0 0 .5rem; font-size: 1rem; }
.modal textarea { width: 100%; box-sizing: border-box; font: inherit; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: .6rem 1.25rem; background: #ffe; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); }
#blazor-error-ui .dismiss { position: absolute; right: .75rem; cursor: pointer; }

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    .site-header, .toolbar { display: none; }
    main { padding: 0; }
    .gantt-scroll { overflow: visible; }
}