:root{
  --border:#e5e7eb;
  --muted:#6b7280;
  --bg:#ffffff;
  --card:#ffffff;
  --shadow: 0 8px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:#f6f7fb;
  color:#111827;
}
.container{max-width:1100px;margin:0 auto;padding:14px}

/* Topbar */
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.topbar-left{min-width:0}
.title-row{display:flex;align-items:center;gap:10px}
.topbar h1{
  font-size:16px;
  line-height:1.2;
  margin:0;
  font-weight:800;
  letter-spacing:-0.2px;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  background:#fff;
  white-space:nowrap;
}
.subline{margin-top:6px;color:var(--muted);font-size:12px}

/* Progress */
.progress-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.progress-label{font-size:12px;color:var(--muted);white-space:nowrap}
.progress-bar{
  flex:1;
  height:10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  overflow:hidden;
}
.progress-bar > div{
  height:100%;
  width:0%;
  background:#16a34a;
}

/* Buttons */
.actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--border);
  background:#fff;
  color:#0f172a;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{
  border-color:#cbd5e1;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.btn:active{transform:translateY(0);box-shadow:none}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-primary{border-color:#16a34a;background:#16a34a;color:#fff}
.btn-ghost{background:#fff;border-color:var(--border);color:var(--muted)}
.btn-danger{border-color:#ef4444;background:#ef4444;color:#fff}
.icon{width:16px;height:16px;display:inline-block}

/* Topbar mobile */
@media (max-width: 520px){
  .topbar{flex-direction:column;align-items:stretch;}
  .actions{justify-content:space-between;}
}

/* Desktop table */
.table-wrap{
  margin-top:12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:auto;
  box-shadow:var(--shadow);
}
.grid{
  min-width:920px;
  display:grid;
  grid-template-columns: 90px 1.1fr 1.1fr 1.1fr 1.1fr 1.1fr 1.1fr;
}
.hdr,.cell,.date{
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  padding:10px;
  font-size:13px;
  line-height:1.2;
  background:#fff;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.hdr{
  position:sticky;
  top:0;
  z-index:3;
  background:#111827;
  color:#fff;
  font-weight:700;
}
.date{font-weight:700}
.cell{cursor:pointer}
.cell small{color:var(--muted)}
.cell:last-child,.hdr:last-child{border-right:none}

/* Today highlight */
.today{
  outline:2px solid #facc15;
  outline-offset:-2px;
}

/* DONE state (table cells) */
@keyframes donePop{
  0%{transform:scale(1)}
  40%{transform:scale(1.02)}
  100%{transform:scale(1)}
}
.cell.done{
  background: linear-gradient(180deg, #ecfdf5, #dcfce7);
  box-shadow: inset 4px 0 0 #16a34a;
  position:relative;
  border-radius:6px;
  font-weight:700;
  animation: donePop .18s ease-out;
}
.cell.done::after{
  content:"✓";
  position:absolute;
  right:8px;
  bottom:8px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#16a34a;
  color:#fff;
  font-size:12px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.modal{
  width:min(520px, 100%);
  background:#fff;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modal .mhead{padding:14px 14px 10px;border-bottom:1px solid var(--border)}
.modal .mhead .meta{color:var(--muted);font-size:12px;margin-top:6px}
.modal .mbody{padding:14px;white-space:pre-wrap}
.modal .mfoot{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  box-shadow:var(--shadow);
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-6px);
}

/* Responsive view switch */
.desktop-only{display:block}
.mobile-only{display:none}

@media (max-width: 900px){
  .desktop-only{display:none}
  .mobile-only{display:block;padding-bottom:16px}

  /* Mobile cards */
  .day-card{
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
    border:1px solid rgba(229,231,235,.9);
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    padding:14px;
    margin-top:12px;
    backdrop-filter: blur(6px);
    overflow:hidden;
  }

  /* Modern single-line header */
  .day-card .day-head{
    background: linear-gradient(90deg, rgba(99,102,241,.10), rgba(34,197,94,.08));
    border-radius:14px;
    padding:10px 12px;
    margin:0 0 12px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  .day-line{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .day-date{
    font-weight:950;
    font-size:15px;
    letter-spacing:-0.2px;
    color:#0f172a;
  }

  .day-sep{
    color: rgba(15,23,42,.35);
    font-weight:900;
  }

  .day-dow{
    font-size:13px;
    color: rgba(15,23,42,.70);
    font-weight:800;
  }

  .today-chip{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background: linear-gradient(180deg, #fff7ed, #fef3c7);
    border:1px solid #fde68a;
    color:#92400e;
    font-weight:900;
    font-size:12px;
    white-space:nowrap;
  }

  /* Items */
  .item{
    padding:12px;
    border:1px solid rgba(229,231,235,.9);
    border-radius:16px;
    margin-bottom:10px;
    background: rgba(255,255,255,.92);
    position:relative;
    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .item:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    border-color: rgba(203,213,225,.95);
  }

  .item .lbl{
    font-size:12px;
    color:var(--muted);
    font-weight:900;
    margin-bottom:7px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .lbl .dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#cbd5e1;
    flex:0 0 auto;
  }
  .item .val{
    font-size:14px;
    line-height:1.25;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    padding-right:22px;
  }

  .item.done{
    background: linear-gradient(180deg, #ecfdf5, #dcfce7);
    border-color: rgba(34,197,94,.35);
    box-shadow: inset 4px 0 0 #16a34a, 0 12px 30px rgba(22,163,74,.10);
  }
  .item.done .lbl .dot{background:#16a34a}

  .item.done::after{
    content:"✓";
    position:absolute;
    right:10px;
    bottom:10px;
    width:20px;
    height:20px;
    border-radius:999px;
    background:#16a34a;
    color:#fff;
    font-size:12px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .item:last-child{margin-bottom:0}
}