:root{
    --bg:#f6f5f2;
    --panel:#ffffff;
    --border:#e1ded6;
    --border-strong:#c9c5ba;
    --text:#25241f;
    --muted:#7a766c;
    --in:#2f8f5b;
    --in-dark:#256e46;
    --out:#c1503a;
    --out-dark:#9c3f2e;
    --today:#3a5a8f;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.4;
  }
  .app{
    max-width:760px;
    margin:0 auto;
    padding:28px 20px 60px;
  }
  h1{
    font-size:1.4rem;
    font-weight:600;
    margin:0 0 4px;
  }
  .subtitle{
    color:var(--muted);
    font-size:0.9rem;
    margin:0 0 24px;
  }
  .mono{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  section.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:18px;
    margin-bottom:18px;
  }
  .punch-zone{
    display:flex;
    gap:12px;
    margin-bottom:18px;
  }
  .punch{
    flex:1;
    padding:22px 10px;
    font-size:1.15rem;
    font-weight:600;
    border:none;
    border-radius:10px;
    color:#fff;
    cursor:pointer;
    letter-spacing:0.2px;
  }
  .punch:active{ transform:translateY(1px); }
  .punch-in{ background:var(--in); }
  .punch-in:hover{ background:var(--in-dark); }
  .punch-out{ background:var(--out); }
  .punch-out:hover{ background:var(--out-dark); }
  .punch:disabled{ opacity:0.28; cursor:not-allowed; transform:none; }
  .punch-in:disabled:hover{ background:var(--in); }
  .punch-out:disabled:hover{ background:var(--out); }
  .lbl-in{ color:var(--in-dark); font-weight:600; font-size:0.88rem; }
  .lbl-out{ color:var(--out-dark); font-weight:600; font-size:0.88rem; }
  .cal-cell .warn{ font-size:0.68rem; color:#b7791f; }
  .cal-cell .warn.live{ color:var(--in-dark); }
  .status{
    text-align:center;
    color:var(--muted);
    font-size:0.9rem;
    margin-bottom:20px;
    min-height:1.2em;
  }
  .cal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
  }
  .cal-header h2{
    font-size:1.05rem;
    font-weight:600;
    text-transform:capitalize;
    margin:0;
  }
  .cal-header button{
    background:none;
    border:1px solid var(--border-strong);
    border-radius:6px;
    width:32px;
    height:32px;
    font-size:1rem;
    cursor:pointer;
    color:var(--text);
  }
  .cal-header button:hover{ background:var(--bg); }
  .dow-row, .cal-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr) 62px;
    gap:5px;
  }
  .wk-cell{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg);
    border-radius:7px;
    font-size:0.8rem;
    font-weight:600;
  }
  .wk-cell.zero{ color:var(--muted); font-weight:400; }
  .wk-sub{ flex-basis:100%; font-size:0.78rem; color:var(--muted); margin-top:2px; }
  ul.week-list li.sum{ font-weight:600; border-top:1px solid var(--border-strong); }
  ul.week-list li.sum-first{ margin-top:8px; }
  .target-line{ font-size:0.88rem; margin-bottom:10px; }
  #targetInput{ width:72px; font-family:inherit; font-size:0.88rem; padding:4px 6px; border:1px solid var(--border-strong); border-radius:5px; }
  .bal-row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--border); font-size:0.9rem; }
  .bal-row:last-child{ border-bottom:none; }
  .bal-row .hint{ display:block; font-size:0.76rem; color:var(--muted); }
  .bal-row .val{ font-weight:600; white-space:nowrap; }
  .pos{ color:var(--in-dark); }
  .neg{ color:var(--out-dark); }
  .dow-row{
    margin-bottom:6px;
  }
  .dow-row div{
    text-align:center;
    font-size:0.72rem;
    color:var(--muted);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.03em;
  }
  .cal-cell{
    min-height:58px;
    border:1px solid var(--border);
    border-radius:7px;
    padding:5px 6px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .cal-cell:hover{ border-color:var(--border-strong); }
  .cal-cell .num{
    font-size:0.85rem;
  }
  .cal-cell .tot{
    font-size:0.72rem;
    color:var(--in-dark);
    font-weight:600;
  }
  .cal-cell.other-month{ opacity:0.35; }
  .cal-cell.today .num{ color:var(--today); font-weight:700; }
  .cal-cell.selected{ border-color:var(--today); border-width:2px; padding:4px 5px; background:#f0f4fa; }
  .month-total{
    margin-top:12px;
    font-size:0.9rem;
    text-align:right;
    color:var(--muted);
  }
  .month-total strong{ color:var(--text); }
  #dayTitle{
    font-size:1rem;
    font-weight:600;
    text-transform:capitalize;
    margin:0 0 12px;
  }
  table.day-table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:12px;
  }
  table.day-table th{
    text-align:left;
    font-size:0.72rem;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.03em;
    font-weight:600;
    padding-bottom:6px;
    border-bottom:1px solid var(--border);
  }
  table.day-table td{
    padding:5px 4px;
    border-bottom:1px solid var(--border);
  }
  table.day-table input[type=date],
  table.day-table input[type=time],
  table.day-table select{
    font-family:inherit;
    font-size:0.85rem;
    padding:4px 5px;
    border:1px solid var(--border-strong);
    border-radius:5px;
    background:#fff;
    color:var(--text);
  }
  .del-btn{
    background:none;
    border:none;
    color:var(--out);
    font-size:1.1rem;
    cursor:pointer;
    line-height:1;
    padding:2px 6px;
  }
  .del-btn:hover{ color:var(--out-dark); }
  .empty-day{
    color:var(--muted);
    font-size:0.88rem;
    padding:8px 0;
  }
  .add-row-btn{
    background:none;
    border:1px dashed var(--border-strong);
    border-radius:7px;
    padding:8px 12px;
    font-size:0.85rem;
    color:var(--text);
    cursor:pointer;
    width:100%;
  }
  .add-row-btn:hover{ background:var(--bg); }
  .day-total{
    margin-top:12px;
    text-align:right;
    font-size:0.9rem;
    color:var(--muted);
  }
  .day-total strong{ color:var(--text); }
  ul.week-list{
    list-style:none;
    margin:0;
    padding:0;
    font-size:0.88rem;
  }
  ul.week-list li{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:6px 0;
    border-bottom:1px solid var(--border);
  }
  ul.week-list li:last-child{ border-bottom:none; }
  ul.week-list .wk-total{ font-weight:600; }
  footer{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-top:8px;
  }
  footer button{
    background:var(--panel);
    border:1px solid var(--border-strong);
    border-radius:7px;
    padding:8px 14px;
    font-size:0.85rem;
    cursor:pointer;
    color:var(--text);
  }
  footer button:hover{ background:var(--bg); }
  footer .note{
    flex-basis:100%;
    color:var(--muted);
    font-size:0.78rem;
    margin:6px 0 0;
  }
  h3{ font-size:0.95rem; font-weight:600; margin:0 0 10px; }

  .app.narrow{ max-width:420px; }
  .userbar{ display:flex; justify-content:flex-end; align-items:center; gap:12px; font-size:0.85rem; color:var(--muted); margin-bottom:12px; }
  .userbar a{ color:var(--today); text-decoration:none; }
  .userbar button, .btn{ background:var(--panel); border:1px solid var(--border-strong); border-radius:6px; padding:5px 10px; font-size:0.82rem; cursor:pointer; color:var(--text); }
  .btn-primary{ background:var(--today); border-color:var(--today); color:#fff; padding:9px 14px; font-size:0.9rem; }
  .field{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; font-size:0.86rem; }
  .field input, .field select{ font-family:inherit; font-size:0.95rem; padding:8px; border:1px solid var(--border-strong); border-radius:6px; }
  .msg{ color:var(--out-dark); font-size:0.85rem; min-height:1.2em; margin-bottom:8px; }
  table.admin{ width:100%; border-collapse:collapse; font-size:0.86rem; }
  table.admin th{ text-align:left; color:var(--muted); font-size:0.72rem; text-transform:uppercase; padding-bottom:6px; border-bottom:1px solid var(--border); }
  table.admin td{ padding:7px 4px; border-bottom:1px solid var(--border); }
  table.admin td .btn{ margin-right:4px; }