:root { --bg:#f5f6f8; --card:#fff; --ink:#1c2430; --muted:#6b7686; --line:#e3e7ee; --accent:#2f5bea; --bad:#c62828; --good:#2e7d32; font-size:15px; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height:1.45; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
code { background:#eef1f6; padding:1px 5px; border-radius:4px; font-size:.9em; }
h1 { font-size:1.5rem; margin:.4rem 0 1rem; } h2 { font-size:1.1rem; margin:.2rem 0 .8rem; } h3 { font-size:.95rem; margin:1.1rem 0 .4rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.top { display:flex; justify-content:space-between; align-items:center; padding:.7rem 1.4rem; background:#101828; color:#fff; }
.top a { color:#fff; } .brand { font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:.5rem; }
.mark { width:14px; height:14px; background:linear-gradient(135deg,#6ea8ff,#2f5bea); border-radius:4px; display:inline-block; }
.top nav { display:flex; gap:1.2rem; align-items:center; font-size:.9rem; }
main { padding:1.2rem 1.4rem 3rem; max-width:1500px; margin:0 auto; }
.inline { display:inline; } button.link { background:none; border:0; color:#cbd5e1; cursor:pointer; font:inherit; padding:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; margin:1rem 0; }
.card.narrow { max-width:380px; margin:3rem auto; } .card.warn { border-color:#f2c1bd; background:#fff7f6; }
.card.warn ul { margin:0; padding-left:1.1rem; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:1rem; }
.row { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; }
.btn { display:inline-block; background:#fff; border:1px solid #cdd4df; border-radius:7px; padding:.4rem .8rem; font:inherit; cursor:pointer; color:var(--ink); }
.btn:hover { background:#f0f3f8; text-decoration:none; } .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .btn.primary:hover { background:#2449c4; } .btn:disabled { opacity:.5; cursor:not-allowed; }
input, select { font:inherit; padding:.35rem .5rem; border:1px solid #cdd4df; border-radius:6px; background:#fff; max-width:100%; }
.head { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.6rem; } .actions { display:flex; gap:.5rem; }
.tabs { display:flex; gap:.2rem; border-bottom:1px solid var(--line); margin-bottom:1rem; }
.tabs a { padding:.5rem 1rem; color:var(--muted); border-bottom:2px solid transparent; } .tabs a.on { color:var(--accent); border-color:var(--accent); font-weight:600; } .tabs a:hover { text-decoration:none; }
.badge { font-size:.7rem; padding:2px 8px; border-radius:999px; vertical-align:middle; background:#eceff4; color:#475467; font-weight:600; }
.badge.published { background:#dff3e4; color:var(--good); }
.msg { padding:.6rem .9rem; border-radius:8px; margin-bottom:.8rem; background:#e8f0fe; } .msg.success { background:#e2f4e6; } .msg.error { background:#fdeaea; }
.muted { color:var(--muted); } .small { font-size:.85rem; } .num { text-align:right; font-variant-numeric:tabular-nums; } .off { color:var(--bad); font-weight:600; }
.kpis { display:flex; gap:.8rem; flex-wrap:wrap; align-items:stretch; margin-bottom:1rem; }
.kpis > div { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.6rem 1rem; min-width:130px; display:flex; flex-direction:column; }
.kpis b { font-size:1.4rem; } .kpis span { color:var(--muted); font-size:.8rem; }
.resolve { margin-left:auto; display:flex; gap:.5rem; align-items:center; } .resolve input { width:90px; }
.table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.table th, .table td { padding:.5rem .8rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .table th { background:#f8f9fb; font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.table.small td { padding:.3rem .6rem; } .table .total td { font-weight:700; }
.card .table { border:0; }
.scroll { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.grid { border-collapse:collapse; width:100%; min-width:980px; }
.grid th, .grid td { border:1px solid var(--line); padding:4px; vertical-align:top; }
.grid thead th { background:#f8f9fb; font-size:.8rem; } .grid .who { text-align:left; width:150px; background:#fbfcfd; font-size:.9rem; padding:6px 8px; }
.grid .who small { display:block; color:var(--muted); font-weight:400; font-size:.75rem; }
.grid td { min-width:118px; height:44px; }
.unfilled-row td, .unfilled-row th { background:#fff7f6; }
.chip { --c:#3b82f6; display:flex; align-items:stretch; background:color-mix(in srgb, var(--c) 16%, white); border:1px solid color-mix(in srgb, var(--c) 55%, white); border-left:4px solid var(--c); border-radius:6px; margin-bottom:3px; font-size:.75rem; }
.chip form { flex:1; margin:0; } .chip.locked { border-style:solid; box-shadow: inset 0 0 0 1px var(--c); background:color-mix(in srgb, var(--c) 28%, white); }
.chip.bad { outline:2px solid var(--bad); }
.lockbtn { all:unset; box-sizing:border-box; display:block; width:100%; padding:3px 5px; cursor:pointer; line-height:1.25; } .lockbtn:disabled { cursor:default; }
.lockbtn span { color:#3b4657; } .lockbtn i { color:var(--muted); font-style:normal; display:block; } .lockbtn em { font-style:normal; font-size:.65rem; background:#101828; color:#fff; border-radius:3px; padding:0 4px; }
.chip .edit { padding:3px 5px; color:var(--muted); font-size:.65rem; align-self:flex-start; }
.heat { border-collapse:collapse; background:var(--card); } .heat th, .heat td { border:1px solid var(--line); padding:3px 8px; text-align:center; min-width:70px; font-size:.8rem; font-variant-numeric:tabular-nums; }
.heat td.none { background:#fafbfc; color:#c4cbd6; } .heat td.full, .legend .full { background:#d9f0df; } .heat td.short, .legend .short { background:#f9c9c4; font-weight:700; } .heat td.over, .legend .over { background:#fdebb9; }
.legend span { padding:2px 10px; margin-right:6px; border-radius:4px; font-size:.8rem; }
.bar { background:#eceff4; height:8px; width:120px; border-radius:4px; overflow:hidden; margin-top:6px; } .bar i { display:block; height:100%; background:var(--accent); }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
.printpage { background:#fff; padding:1rem; } .pchip { --c:#999; border-left:4px solid var(--c); padding:1px 4px; margin:2px 0; font-size:.72rem; } .printpage .grid { min-width:0; } .printpage .grid td { height:auto; }
@media print { .noprint, .top { display:none; } body { background:#fff; } main { padding:0; } .printpage { padding:0; } }