:root{
    --paper:#EDEEE9; --paper-alt:#E3E5DC; --ink:#14213D; --ink-soft:#4A5A78;
    --ink-faint:#8A93A6; --rule:#C9CCC3; --accent:#3E7C74; --accent-dark:#2C5850;
    --accent-pale:#DCE9E5; --danger:#A3432F; --white:#FFFFFF;
  }
  *{box-sizing:border-box;}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; font-size:14px;}
  .serif{font-family:'Fraunces',serif;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .wrap{max-width:1000px; margin:0 auto; padding:32px 20px;}
  header{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px;
    padding-bottom:20px; margin-bottom:24px; border-bottom:2px solid var(--ink);}
  h1{font-size:34px; font-weight:600; margin:0; letter-spacing:-0.02em;}
  header p{margin:4px 0 0; color:var(--ink-soft);}
  .grand-label{font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); text-align:right; margin:0;}
  .grand-total{font-size:26px; font-weight:500; color:var(--accent-dark); margin:0; text-align:right;}
  .grid{display:grid; grid-template-columns:1fr; gap:24px;}
  @media(min-width:900px){ .grid{grid-template-columns:1fr 2fr;} }
  .col{display:flex; flex-direction:column; gap:24px;}
  .card{background:var(--white); border:1px solid var(--rule); border-radius:10px; padding:20px;}
  .card h2{font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); margin:0 0 16px; display:flex; align-items:center; gap:6px; font-weight:600;}
  label{font-size:12px; color:var(--ink-soft); display:block; margin-bottom:4px;}
  input, select{width:100%; padding:8px 10px; border:1px solid var(--rule); border-radius:6px; font-size:14px; font-family:inherit; color:var(--ink); background:var(--white);}
  input:focus, select:focus{outline:2px solid var(--accent-pale); border-color:var(--accent);}
  .field{margin-bottom:12px;}
  .row2{display:flex; gap:12px;}
  .row2 > div{flex:1;}
  button{cursor:pointer; font-family:inherit;}
  .btn-primary{width:100%; margin-top:4px; background:var(--accent); color:#fff; border:none; border-radius:6px; padding:10px; font-size:14px; font-weight:500; display:flex; align-items:center; justify-content:center; gap:8px;}
  .btn-primary:disabled{opacity:0.4; cursor:not-allowed;}
  .btn-icon{background:none; border:none; color:var(--ink-faint); padding:4px; border-radius:4px;}
  .btn-icon:hover{background:var(--paper-alt);}
  .error-text{color:var(--danger); font-size:12px; margin:6px 0 0;}
  .banner-error{background:#F5E3DE; color:var(--danger); padding:10px 14px; border-radius:6px; margin-bottom:20px; font-size:13px;}
  .group-row{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0;}
  .group-row .left{display:flex; align-items:center; gap:8px; min-width:0;}
  .dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
  .group-name{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .add-group-row{display:flex; gap:8px; margin-top:8px;}
  .add-group-row button{background:var(--accent-pale); color:var(--accent-dark); border:none; border-radius:6px; padding:0 12px;}
  .pills{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
  .pill{padding:6px 12px; border-radius:999px; font-size:13px; border:none; background:var(--paper-alt); color:var(--ink-soft); text-transform:capitalize;}
  .pill.active{background:var(--ink); color:#fff;}
  .pill-round{padding:5px 10px; border-radius:999px; font-size:12px; border:none; background:var(--paper-alt); color:var(--ink-soft);}
  .pill-round.active{color:#fff;}
  .filters-bottom{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px;}
  .filter-label{font-size:12px; color:var(--ink-faint);}
  .bar-track{flex:1; height:8px; background:var(--paper-alt); border-radius:999px; overflow:hidden;}
  .bar-fill{height:100%;}
  .breakdown-row{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
  .breakdown-name{width:96px; flex-shrink:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .breakdown-val{width:64px; flex-shrink:0; text-align:right; font-size:12px; color:var(--ink-soft);}
  .empty-state{background:var(--white); border:1px dashed var(--rule); border-radius:10px; padding:36px; text-align:center; color:var(--ink-soft);}
  .day-card{background:var(--white); border:1px solid var(--rule); border-radius:10px; overflow:hidden; margin-bottom:16px;}
  .day-head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px 0;}
  .day-total{color:var(--accent-dark); font-size:14px;}
  .stripe{display:flex; height:6px; margin:8px 16px 0; border-radius:999px; overflow:hidden;}
  .entries{padding:8px 16px 12px;}
  .entry-row{display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--rule);}
  .entry-row:first-child{border-top:none;}
  .entry-group{width:80px; flex-shrink:0; font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .entry-dur{width:64px; flex-shrink:0; font-size:12px;}
  .entry-comment{flex:1; min-width:0; font-size:12px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .hidden{display:none !important;}