:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    body { margin: 0; padding: 24px; background: #0b0d12; color: #e9eefc; }
    .card {
      max-width: 1180px; margin: 0 auto; padding: 20px;
      background: #121726; border: 1px solid #26304a; border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }

    h1 { margin: 0 0 10px; font-size: 18px; }
    h2 { margin: 0; font-size: 30px; }
    p { margin: 6px 0 14px; color: #b9c3df; line-height: 1.35; }

    .btnRow { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    button {
      cursor: pointer; border: 0; border-radius: 10px;
      padding: 12px 14px; font-weight: 800;
      background: #4b7dff; color: #081022;
    }
    button.secondary { background: #26304a; color: #e9eefc; border: 1px solid #3a476a; }
    button.ghost {
      background: transparent; color: #e9eefc; border: 1px solid #3a476a;
      padding: 8px 10px; border-radius: 10px; font-weight: 800;
    }
    button:disabled { opacity: .6; cursor: not-allowed; }

    .dateCtrl{
      margin-left: auto;
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .dateInput{
      background: #0d1220;
      color: #e9eefc;
      border: 1px solid #26304a;
      border-radius: 10px;
      padding: 8px 10px;
    }

    .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
    select, .pill {
      background: #0d1220; color: #e9eefc;
      border: 1px solid #26304a; border-radius: 10px;
      padding: 10px 12px;
    }
    select { min-width: 460px; }
    .pill { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
    .tag { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid #26304a; background:#0b1020; color:#b9c3df; font-size:12px; }

    .status {
      margin-top: 12px; padding: 10px 12px; border-radius: 10px;
      background: #0d1220; border: 1px solid #26304a; color: #b9c3df;
      white-space: pre-wrap;
    }
    .danger { color: #ffb3b3; }

    .sectionHeader {
      margin-top: 20px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
    }
    .sectionActions { display: flex; gap: 8px; align-items: center; }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      margin-top: 14px;
      overflow: hidden;
      border: 1px solid #26304a;
      border-radius: 12px;
      background: #0d1220;
    }
    thead th {
      text-align: left;
      padding: 12px 12px;
      color: #ecfff7;
      font-weight: 900;
      border-bottom: 1px solid #26304a;
      white-space: nowrap;
    }
    .thead-green th { background: #1a7f5a; }
    .thead-blue  th { background: #2a4cff; }

    tbody td {
      padding: 10px 12px;
      border-bottom: 1px solid #1c2438;
      color: #e9eefc;
      white-space: nowrap;
    }
    tbody tr:last-child td { border-bottom: 0; }
    .right { text-align: right; }
    .muted { color: #b9c3df; font-size: 13px; }
    .totalRow td { background: #10182a; font-weight: 900; }

    /* Hour cell coloring (ONLY hour column) */
    .hourCell {
      font-weight: 900;
      color: #ffffff;
      text-align: center;
      width: 70px;
      border-right: 1px solid #1c2438;
    }
    .h0_5   { background: #FF6D01; }
    .h6_11  { background: #BF9000; }
    .h12_17 { background: #4385F4; }
    .h18_23 { background: #A78EF3; }

    /* Charts */
    .chartsWrap { margin-top: 18px; display: grid; gap: 14px; }
    .chartHolder {
      position: relative;
      border-radius: 12px; overflow: hidden;
      border: 1px solid #26304a; background: #0d1220;
    }
    .chartActions {
      position: absolute;
      top: 10px; right: 10px;
      z-index: 2;
      display: flex; gap: 8px;
    }
    .chartMount svg { display:block; width:100%; height:auto; }

    /* Print / PDF */
    @media print {
      body { background: #ffffff !important; color: #000 !important; padding: 0 !important; }
      .card { max-width: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background:#fff !important; }
      .btnRow, .row, .sectionActions, .chartActions, .status { display: none !important; }
      table { border-color: #cfcfcf !important; background: #fff !important; }
      thead th { color: #000 !important; }
      tbody td { color: #000 !important; border-bottom-color: #e6e6e6 !important; }
      .totalRow td { background: #f3f3f3 !important; }
      .muted { color: #444 !important; }
      .chartHolder { border-color: #cfcfcf !important; background: #fff !important; }
      .chartHolder svg rect[fill="#ffffff"] { fill: #ffffff !important; }
      .chartsWrap { gap: 10px !important; }
      .printBreak { break-before: page; page-break-before: always; }
    }