:root{
  --bg:#fafaf9;
  --surface:#ffffff;
  --text:#0b0a09;
  --muted:#6b7280;
  --line:#ece7e4;

  --focus:#ea5848;      --focusTint:#fff1ef;
  --routine:#3b82f6;    --routineTint:#eef5ff;
  --todo:#16a34a;       --todoTint:#eefaf1;
  --projects:#7c3aed;   --projectsTint:#f3edff;

  --calendar:#0ea5a4;    --calendarTint:#e8fbfb;

  --radius2:18px;
  --shadow: 0 10px 26px rgba(11,10,9,0.08);
  --pad:16px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px var(--pad);
  background: rgba(250,250,249,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:900;}
.brand__dot{width:10px; height:10px; border-radius:99px; background:var(--focus);}
.brand__name{letter-spacing:0.2px;}

.iconbtn{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  font-size:20px;
  cursor:pointer;
}
.iconbtn:active{transform:translateY(1px);}
.iconbtn[disabled]{opacity:0.45; cursor:not-allowed;}

.btn{
  border:1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}
.btn--accent{
  border-color: rgba(234,88,72,0.35);
  background: #ffe7e3;
  color: #b42318;
}
.btn:active{transform:translateY(1px);}

.main{
  max-width: 860px;
  margin: 0 auto;
  padding: var(--pad);
  padding-bottom: 90px;
}

.banner{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(234,88,72,0.25);
  background: #fff3f1;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.banner__title{font-weight:950;}
.banner__text{color:var(--muted); font-size:12px;}
.banner__btn{
  border:1px solid rgba(234,88,72,0.35);
  background: #ffe7e3;
  color: #b42318;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight:950;
  cursor:pointer;
}

.section{margin-bottom:16px;}
.section__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin: 8px 2px 8px 2px;
}
.h2{font-size:17px; margin:0; font-weight:950; letter-spacing:0.2px;}
.muted{color:var(--muted); font-size:12px;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}

.badge{
  font-size:12px; font-weight:950;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: var(--surface);
}

.sectionCard{
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.sectionCard::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:4px;
  background: var(--focus);
}
.sectionCard--focus{background: var(--focusTint);}
.sectionCard--focus::before{background: var(--focus);}

.sectionCard--routine{background: var(--routineTint);}
.sectionCard--routine::before{background: var(--routine);}

.sectionCard--todo{background: var(--todoTint);}
.sectionCard--todo::before{background: var(--todo);}

.sectionCard--projects{background: var(--projectsTint);}
.sectionCard--projects{background: var(--projectsTint);}
.sectionCard--projects::before{background: var(--projects);}

.sectionCard--calendar{background: var(--calendarTint);} 
.sectionCard--calendar::before{background: var(--calendar);}

.cardInner{background: rgba(255,255,255,0.72);}

.list{list-style:none; margin:0; padding:0;}
.item{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
}
.item + .item{border-top:1px solid rgba(236,231,228,0.85);}
.item.dragOver{outline:2px dashed rgba(11,10,9,0.2); outline-offset:-4px;}

.left{display:flex; align-items:center; gap:10px; min-width:0;}

.drag{
  width:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0.55;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.drag:active{cursor:grabbing;}
.dragText{font-size:16px; font-weight:900; line-height:14px;}


.title{
  font-weight:500;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  cursor:pointer;
}


.title.done{color:var(--muted); text-decoration: line-through;}

.actions{display:flex; align-items:center; gap:8px; flex: 0 0 auto;}

.chk{
  width:22px; height:22px;
  border-radius:7px;
  border:2px solid #d1d5db;
  display:grid; place-items:center;
  cursor:pointer;
  flex:0 0 auto;
  background:#fff;
}
.chk.checked{border-color: var(--focus); background: var(--focus); color:white;}
.chk[aria-disabled="true"]{opacity:0.5; cursor:not-allowed;}

.star, .xbtn, .chev{
  border:none; background:transparent;
  cursor:pointer;
  font-size:16px;
  opacity:0.9;
}
.xbtn{font-size:18px;}

.projectHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  background: rgba(255,255,255,0.72);
}
.projectLeft{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.projectName{font-weight:950; font-size:15px;}
.projectMeta{display:flex; align-items:center; gap:10px;}

.small{font-size:12px; font-weight:850; color:var(--muted);}

.addRow{cursor:text; color: var(--muted);}
.addRow .title{font-weight:500; color: var(--muted);}
.addRowActive .title{color: var(--text);}
.addInput{
  width:100%;
  border:1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  outline:none;
  font-size:14px;
  padding: 9px 10px;
}

.days{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:2px;
}
.daychip{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  font-weight:850;
  cursor:pointer;
  background: var(--surface);
  font-size:11px;
  white-space:nowrap;
  flex: 0 0 auto;
}
.daychip.active{border-color: rgba(234,88,72,0.35); background: #ffe7e3; color:#b42318;}

.bottomnav{
  position:fixed; left:0; right:0; bottom:0;
  height: 76px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  display:flex; justify-content:space-around; align-items:center;
  padding: 8px 10px;
}
.navbtn{
  border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--muted);
  font-weight: 950;
  min-width: 70px;
}
.navbtn.active{
  background: #fff7f6;
  color: var(--text);
  border:1px solid rgba(234,88,72,0.18);
}
.navicon{font-size:18px;}
.navlabel{font-size:11px;}

.modalRoot{
  position:fixed; inset:0;
  background: rgba(11,10,9,0.35);
  display:flex; align-items:flex-end; justify-content:center;
  padding: 16px;
  pointer-events:auto;
  z-index: 40;
}
.modalRoot[hidden]{display:none !important; pointer-events:none !important;}
.sheet{
  width:100%;
  max-width:640px;
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 12px;
}
.field{display:flex; flex-direction:column; gap:6px; margin:10px 0;}
select, textarea, input{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}
textarea{min-height:76px; resize:vertical;}
.hr{height:1px; background: var(--line); margin: 12px 0;}


/* Tomorrow button */
.tbtn{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  opacity:0.75;
  padding: 0 2px;
}
.tbtn:hover{opacity:0.95;}
.tbtn[disabled]{opacity:0.35; cursor:not-allowed;}

/* Notes */
.notesDetails{
  padding: 10px 12px;
}
.notesSummary{
  cursor:pointer;
  font-weight:950;
  font-size:14px;
  list-style:none;
}
.notesSummary::-webkit-details-marker{display:none;}
.notesBody{margin-top:10px;}
.notesBody textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size:14px;
  background: rgba(255,255,255,0.9);
  min-height: 90px;
}


/* Calendar */
.calWrap{padding:12px;}
.calHead{display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 8px 8px 10px 8px;}
.calTitle{font-weight:950; font-size:16px;}
.calNavBtn{border:1px solid var(--line); background:var(--surface); border-radius:12px; width:38px; height:38px; cursor:pointer; font-weight:950;}
.calGrid{display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; padding: 0 8px 10px 8px;}
.calDow{font-size:11px; color:var(--muted); font-weight:850; text-align:center; padding: 6px 0;}
.calCell{border:1px solid rgba(236,231,228,0.85); border-radius:12px; background: rgba(255,255,255,0.75); padding: 8px 6px; min-height:44px; cursor:pointer; position:relative;}
.calCell.muted{opacity:0.45;}
.calCell.today{outline:2px solid rgba(14,165,164,0.25);}
.calCell.selected{border-color: rgba(14,165,164,0.45); background: rgba(232,251,251,0.9);}
.calNum{font-weight:900; font-size:12px;}
.calDots{position:absolute; left:8px; bottom:6px; display:flex; gap:3px;}
.calDot{width:6px; height:6px; border-radius:99px; background: rgba(14,165,164,0.7);}
.calListHead{display:flex; align-items:center; justify-content:space-between; padding: 10px 12px 6px 12px;}
.calEventMeta{font-size:11px; color:var(--muted); margin-top:2px;}

/* Manual page */
.manual{
  padding: 12px;
}
.manual h2{
  font-weight: 950;
  margin: 0 0 10px 0;
}
.manual h3{
  margin-top: 18px;
  font-weight: 900;
}
.manual p,
.manual li{
  font-size: 14px;
  line-height: 1.5;
}
.manual ul{
  padding-left: 18px;
}