:root{
      --du-primary:#4c2b87;
      --du-blue:#0d6efd;
      --du-bg:#f7f6fb;
      --du-text:#222;
      --card:#fff;
      --muted:#666;
      --success:#198754;
      --warn:#fd7e14;
      --radius:20px;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{height:100%}
    body{
      font-family:system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial;
      background:linear-gradient(160deg,var(--du-primary) 0%,#2f1a54 60%);
      padding:20px;
      color:var(--du-text);
    }
    .header{
      text-align:center;color:#fff;margin-bottom:24px
    }
    .header img{width:120px;height:120px;object-fit:contain;margin-bottom:8px}
    .header h1{font-size:1.8rem;line-height:1.2}
    .header span{display:block;margin-top:6px;font-size:1rem;color:#e9e4f3}
    .container{
      display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:flex-start
    }
    .datesheet-box{
      background:var(--card);border-radius:var(--radius);
      box-shadow:0 10px 30px rgba(0,0,0,.18);
      padding:18px 18px 8px;flex:1;min-width:320px;max-width:48%;
      transition:transform .25s ease;
    }
    .datesheet-box:hover{transform:translateY(-4px)}
    .datesheet-box h2{
      color:var(--du-primary);margin-bottom:12px;text-align:center;
      font-size:1.25rem;border-bottom:2px solid #eee;padding-bottom:8px
    }
    .legend{margin:-4px 0 8px;text-align:center;color:var(--muted);font-size:.9rem}
    table{width:100%;border-collapse:collapse}
    th,td{
      padding:12px 12px;border:1px solid #e9e9e9;background:#fafafa;font-size:.95rem
    }
    th{
      background:var(--du-blue);color:#fff;text-transform:uppercase;
      letter-spacing:.02em;font-size:.85rem;position:sticky;top:0;z-index:1
    }
    tr:nth-child(even) td{background:#f4f4f8}
    tr:hover td{background:#e8f1ff}
    .badge{
      display:inline-block;padding:.25rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600;
      background:#eef; color:#222; border:1px solid #dde
    }
    .badge.mix{background:#eef7ff;border-color:#cfe5ff}
    .link{
      text-decoration:none;color:var(--du-blue);font-weight:600;display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;border-radius:10px;position:relative;transition:all .2s ease
    }
    .link i{font-size:1.05rem;transition:transform .2s ease}
    .link:hover{color:#fff;background:var(--du-blue)}
    .link:hover i{transform:rotate(12deg)}
    .link[data-tip]:hover::after{
      content:attr(data-tip);position:absolute;background:#222;color:#fff;font-size:.74rem;
      padding:6px 8px;border-radius:6px;top:-36px;left:50%;transform:translateX(-50%);
      white-space:nowrap
    }
    /* Mobile: turn rows into cards */
    @media (max-width: 768px){
      .container{flex-direction:column}
      .datesheet-box{max-width:100%}
      table, thead, tbody, th, td, tr{display:block}
      thead{display:none}
      tbody tr{background:#fafafa;border:1px solid #eee;border-radius:12px;margin:10px 0;overflow:hidden}
      tbody td{border:none;border-bottom:1px solid #eee}
      tbody td:last-child{border-bottom:none}
      tbody td::before{
        content:attr(data-label);
        display:block;font-size:.75rem;color:var(--muted);margin-bottom:4px;text-transform:uppercase
      }
    }
    /* Print (A4) */
    @media print{
      body{background:#fff;padding:0}
      .header{color:#000;margin:0 0 8mm}
      .header span{color:#333}
      .container{gap:10mm}
      .datesheet-box{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid}
      .datesheet-box h2{border-color:#ccc}
      .link{color:#000 !important;background:none !important}
    }
    .footer{
      text-align:center;color:#fff;margin-top:28px;font-size:.92rem;opacity:.9
    }