body { font-family: Arial, sans-serif; background: #f2f6f9; padding: 20px; }
    h2 { text-align: center; margin-bottom: 10px; }
    h3 { margin-top: 20px; text-align: center; }
    .kode-limits {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin: 15px 0;
    }
    .kode-box {
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 6px;
      text-align: center;
      font-size: 13px;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      margin: 20px auto;
      background: white;
    }
    th, td {
      border: 1px solid #555555;
      text-align: center;
      padding: 6px;
      font-size: 13px;
    }
    th { background: #fbfd75; }
    td.jam-cell {
      background: pink;
      font-weight: bold;
      width: 40px;
    }
    .istirahat td {
      background: #ffe5b4;
      font-weight: bold;
      text-align: center;
    }
    .piket-row td {
      background: #c2f0c2;
      font-weight: bold;
      text-align: center;
    }
    button {
      padding: 6px 12px;
      margin: 3px;
      background: teal;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
    }
    button:hover { background: darkcyan; }
    .footer {
      margin-top: 15px;
      font-weight: bold;
      text-align: center;
    }
    .rekap {
      margin-top: 20px;
      border: 1px solid #aaaaaa;
      padding: 10px;
      background: #59cbff;
    }
    .rekap h4 { margin: 5px 0; text-align: center; }
    .rekap table { width: auto; margin: auto; border-collapse: collapse; }
    .rekap th, .rekap td { border: 1px solid #555555; padding: 4px 8px; }