:root { --bg:#f6f7f9; --card:#fff; --ink:#1d2330; --dim:#6b7280; --line:#e5e7eb; --accent:#2f5bea; --warn:#b45309; --bad:#b91c1c; --ok:#047857; }
  * { box-sizing:border-box; }
  body { margin:0; font:14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink); }
  header { display:flex; align-items:center; gap:16px; padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
  header h1 { font-size:16px; margin:0; }
  .tag { font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:10px; padding:1px 8px; }
  nav button { background:none; border:none; padding:6px 12px; font:inherit; cursor:pointer; border-radius:6px; color:var(--dim); }
  nav button.on { background:#eef2ff; color:var(--accent); font-weight:600; }
  .spacer { flex:1; }
  .btn { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:6px 12px; cursor:pointer; font:inherit; }
  .btn[disabled] { opacity:.6; cursor:default; }
  .filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 20px; }
  .filters label { font-size:12px; color:var(--dim); display:flex; gap:6px; align-items:center; }
  select, input[type=date] { font:inherit; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:#fff; }
  main { padding:0 20px 40px; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:14px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
  .card h3 { margin:0 0 4px; font-size:12px; color:var(--dim); font-weight:500; }
  .card .v { font-size:22px; font-weight:600; }
  .card .s { font-size:12px; color:var(--dim); }
  .card.warn { border-color:#f59e0b; background:#fffbeb; }
  .card.bad { border-color:#fca5a5; background:#fef2f2; }
  .section { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:14px; }
  .section h2 { font-size:14px; margin:0 0 10px; }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
  th { font-weight:600; color:var(--dim); font-size:12px; position:sticky; top:0; background:var(--card); }
  td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
  .scroll { max-height:460px; overflow:auto; }
  .gaps li { color:var(--warn); margin:2px 0; }
  .pill { font-size:11px; padding:1px 7px; border-radius:9px; background:#f3f4f6; color:var(--dim); white-space:nowrap; }
  .pill.customer { background:#ecfdf5; color:var(--ok); } .pill.internal { background:#eef2ff; color:var(--accent); } .pill.unattributed { background:#fff7ed; color:var(--warn); }
  tr.fail td { background:#fef2f2; } .err { color:var(--bad); }
  .muted { color:var(--dim); } .hidden { display:none; }
  .ne { color:#9ca3af; font-style:italic; font-size:12px; }
  .st { font-size:10px; padding:0 6px; border-radius:8px; } .st.Closed { background:#e5e7eb; } .st.MTD, .st.WTD { background:#dbeafe; color:#1d4ed8; } .st.Future { background:#f5f5f4; color:#a8a29e; }
  table.pl td, table.pl th { white-space:nowrap; } table.pl tr.tot td { font-weight:600; border-top:1px solid #9ca3af; } table.pl td:first-child { position:sticky; left:0; background:#fff; }
  .inp input { width:110px; font:inherit; padding:3px 5px; border:1px solid var(--line); border-radius:5px; } .inp input.w { width:170px; } .inp input.s { width:80px; }
  .btn.sec { background:#fff; color:var(--accent); border:1px solid var(--accent); }
  #chartWrap { height:280px; }
  #gate { max-width:520px; margin:60px auto; }