/* ===================== Tokens ===================== */
:root{
  --bg: #F3F6F2;
  --surface: #FFFFFF;
  --surface-soft: #FAFBF8;
  --border: #E1E8DF;
  --border-soft: #EBF0E8;

  --ink: #16211B;
  --ink-soft: #4C594F;
  --ink-faint: #8D998F;

  --teal-900: #0A3E35;
  --teal-700: #0E6E5C;
  --teal-600: #128C74;
  --teal-500: #1AA98D;
  --teal-100: #E1F1EB;
  --teal-050: #F1F8F5;

  --rule: #DFE8DE;
  --rule-strong: #CFDCCE;
  --rule-header: #2E9C7F;

  --shadow-sm: 0 1px 2px rgba(13, 33, 26, 0.06);
  --shadow-md: 0 6px 20px rgba(13, 33, 26, 0.08);
  --shadow-lg: 0 16px 40px rgba(13, 33, 26, 0.10);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --sidebar-w: 232px;
  --topbar-h: 64px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; width:100%; }

body{
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }

/* ===================== Topbar ===================== */
.topbar{
  height: var(--topbar-h);
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar__left{ display:flex; align-items:center; gap:14px; }

.sidebar-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}

.logo{ display:flex; align-items:center; }
.logo__svg{
  height: 26px;
  width: auto;
  display:block;
}

.topnav{
  display:flex;
  align-items:center;
  gap:6px;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
}
.topnav__link{
  font-size:14px;
  font-weight:500;
  color: var(--ink-soft);
  padding:8px 14px;
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}
.topnav__link:hover{ background: var(--surface-soft); color: var(--ink); }
.topnav__link--active{
  color: var(--teal-700);
  background: var(--teal-050);
  font-weight:600;
}

.topbar__right{ display:flex; align-items:center; gap:10px; }

.btn{
  font-size:14px;
  font-weight:600;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn--login{
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
.btn--login:hover{ border-color: var(--teal-600); color: var(--teal-700); }

/* ===================== Shell / Layout ===================== */
.shell{
  display:flex;
  width:100%;
  min-height: calc(100vh - var(--topbar-h));
}

/* ===================== Sidebar ===================== */
.sidebar{
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}

.sidebar__nav{ display:flex; flex-direction:column; gap:2px; }

.sidebar__link{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size:14px;
  font-weight:500;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.sidebar__link .ic{ width:18px; height:18px; flex-shrink:0; }
.sidebar__link:hover{ background: var(--surface-soft); color: var(--ink); }
.sidebar__link--active{
  background: var(--teal-700);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.sidebar__link--active:hover{ background: var(--teal-700); color:#fff; }

.sidebar__footer{ padding-top: 16px; border-top: 1px solid var(--border-soft); }

/* ===================== Main ===================== */
.main{
  flex: 1 1 auto;
  min-width: 0;
  padding: 32px 40px 60px;
}

.journal{ max-width: 880px; margin: 0 auto; }

.journal__head{ margin-bottom: 20px; }
.journal__month{ display:flex; align-items:center; }
.journal__month h1{
  font-size: 20px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
}

.month-dropdown{ position:relative; }

.month-dropdown__trigger{
  display:flex;
  align-items:center;
  gap:8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.month-dropdown__trigger:hover{ border-color: var(--teal-500); }
.month-dropdown__trigger[aria-expanded="true"]{
  border-color: var(--teal-600);
  box-shadow: var(--shadow-md);
}

.month-dropdown__chevron{
  width:16px; height:16px;
  color: var(--ink-faint);
  transition: transform .15s ease;
  flex-shrink:0;
}
.month-dropdown__trigger[aria-expanded="true"] .month-dropdown__chevron{
  transform: rotate(180deg);
  color: var(--teal-700);
}

.month-dropdown__panel{
  position:absolute;
  top: calc(100% + 8px);
  left:50%;
  transform: translateX(-50%);
  width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  z-index: 50;
}

.month-dropdown__year{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}
.month-dropdown__year span{
  font-size:14px;
  font-weight:700;
  color: var(--ink);
}
.month-dropdown__year button{
  width:24px; height:24px;
  border-radius:50%;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.month-dropdown__year button svg{ width:12px; height:12px; }
.month-dropdown__year button:hover{ background: var(--teal-700); border-color: var(--teal-700); color:#fff; }

.month-dropdown__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:6px;
}
.month-dropdown__grid button{
  padding: 8px 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface-soft);
  font-size:13px;
  font-weight:500;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.month-dropdown__grid button:hover{ background: var(--teal-050); color: var(--teal-700); }
.month-dropdown__grid button.month-dropdown__grid-item--active{
  background: var(--teal-700);
  color: #fff;
}

/* ===================== Date strip ===================== */
.datestrip-wrap{
  position: relative;
  margin-bottom: 6px;
}

.datestrip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding: 4px 6px 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.datestrip::-webkit-scrollbar{ display:none; }

.strip-fade{
  position:absolute;
  top:0;
  bottom:14px;
  width:44px;
  display:flex;
  align-items:center;
  border:0;
  background:transparent;
  color: var(--ink-faint);
  z-index:5;
  opacity:1;
  transition: opacity .15s ease, color .15s ease;
}
.strip-fade svg{ width:16px; height:16px; }
.strip-fade:hover{ color: var(--teal-700); }
.strip-fade--left{
  left:0;
  justify-content:flex-start;
  padding-left:2px;
  background: linear-gradient(to right, var(--bg) 45%, transparent);
}
.strip-fade--right{
  right:0;
  justify-content:flex-end;
  padding-right:2px;
  background: linear-gradient(to left, var(--bg) 45%, transparent);
}
.strip-fade--hidden{ opacity:0; pointer-events:none; }

.date-tab{
  flex: 0 0 auto;
  width: 52px;
  padding: 9px 0 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
}
.date-tab__dow{ font-size:10.5px; font-weight:600; letter-spacing:.04em; color: var(--ink-faint); text-transform:uppercase; }
.date-tab__num{ font-size:16px; font-weight:700; color: var(--ink); }
.date-tab:hover{ border-color: var(--teal-500); transform: translateY(-1px); }
.date-tab--today{ position:relative; }
.date-tab--today .date-tab__num{ color: var(--teal-700); }
.date-tab--today::after{
  content:"";
  position:absolute;
  bottom:6px;
  left:50%;
  transform: translateX(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background: var(--teal-600);
}
.date-tab--active.date-tab--today::after{ background: #fff; }
.date-tab--active{
  background: var(--teal-700);
  border-color: var(--teal-700);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.date-tab--active .date-tab__dow{ color: var(--teal-100); }
.date-tab--active .date-tab__num{ color: #fff; }

/* ===================== Notepad ===================== */
.notepad{ position: relative; }

.notepad__paper{
  display:flex;
  align-items:stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
}

.notepad__ring{
  flex: 0 0 26px;
  width: 26px;
  background-image: radial-gradient(circle, var(--bg) 5px, transparent 5.5px);
  background-size: 26px 34px;
  background-position: 0 14px;
  background-repeat: repeat-y;
  border-right: 1px dashed var(--border-soft);
}

.notepad__content{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:column;
}

/* ---- Diary header section (date + title), replaces the old floating stamp ---- */
.notepad__header{
  position:relative;
  padding: 20px 32px 20px 36px;
  background: var(--surface);
}
.notepad__header::after{
  content:"";
  position:absolute;
  left:36px;
  right:32px;
  bottom:0;
  height:2px;
  border-radius:1px;
  background: var(--rule-header);
}

.notepad__header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.notepad__dateline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform: uppercase;
  color: var(--teal-700);
}
.notepad__dateline svg{ width:15px; height:15px; flex-shrink:0; }

.day-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.today-btn{
  font-size:12px;
  font-weight:600;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.today-btn:hover{ border-color: var(--teal-600); color: var(--teal-700); }
.today-btn--hidden{
  display: none;
}
.day-nav__btn{
  position:relative;
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.day-nav__btn svg{ width:13px; height:13px; }
.day-nav__btn:hover{ background: var(--teal-700); border-color: var(--teal-700); color:#fff; }

/* Small tooltip showing the target date on hover */
.day-nav__btn[data-tooltip]::before{
  content: attr(data-tooltip);
  position:absolute;
  bottom: calc(100% + 9px);
  left:50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--surface);
  color: var(--ink);
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  padding:5px 9px;
  border-radius:6px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-md);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index:25;
}
.day-nav__btn[data-tooltip]::after{
  content:"";
  position:absolute;
  bottom: calc(100% + 5px);
  left:50%;
  width:8px;
  height:8px;
  background: var(--surface);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .15s ease, visibility .15s ease;
  z-index:24;
}
.day-nav__btn[data-tooltip]:hover::before{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.day-nav__btn[data-tooltip]:hover::after{ opacity:1; visibility:visible; }

.notepad__title{
  display:block;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font-family:'DM Sans', sans-serif;
  font-size:23px;
  font-weight:700;
  letter-spacing:-0.01em;
  color: var(--ink);
  padding:0;
}
.notepad__title::placeholder{ color: var(--ink-faint); font-weight:600; }

.title-field{
  position:relative;
}
.title-typewriter{
  display:none;
  align-items:center;
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  font-family:'DM Sans', sans-serif;
  font-size:23px;
  font-weight:600;
  letter-spacing:-0.01em;
  color: var(--ink-faint);
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
}
.title-typewriter__text{
  white-space:pre;
  overflow:hidden;
  text-overflow:clip;
}
.title-typewriter__cursor{
  display:inline-block;
  width:2px;
  height:1.05em;
  margin-left:2px;
  border-radius:1px;
  background: var(--ink-faint);
  animation: title-caret-blink 1s ease-in-out infinite;
}
@keyframes title-caret-blink{
  0%, 45%{ opacity:1; }
  50%, 95%{ opacity:0; }
  100%{ opacity:1; }
}

.notepad__body{
  padding: 12px 32px 26px 36px;
}

.notepad__textarea{
  display:block;
  width:100%;
  min-height: 532px; /* 14 ruled lines at 38px */
  border:0;
  outline:0;
  resize:none;
  overflow:hidden;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px);
  background-size: 100% 38px;
  background-position: 0 37px;
  font-family:'DM Sans', sans-serif;
  font-size:15.5px;
  line-height:38px;
  color: var(--ink);
  padding: 0 2px;
}
.notepad__textarea::placeholder{ color: var(--ink-faint); font-weight:400; }

.notepad__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 6px 0;
  font-size:12.5px;
  color: var(--ink-faint);
}

/* ===================== To-do page ===================== */
.todo-page{ max-width: 880px; margin: 0 auto; }

.todo-page__head{ margin-bottom: 20px; }
.todo-page__head h1{
  font-size: 24px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
}
.todo-page__sub{ margin:4px 0 0; font-size:14px; color: var(--ink-faint); }

.todo-tabs{
  display:inline-flex;
  gap:4px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding:4px;
  margin-bottom: 22px;
}
.todo-tab{
  border:0;
  background:transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-size:13.5px;
  font-weight:600;
  color: var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.todo-tab:hover{ color: var(--ink); }
.todo-tab--active{
  background: var(--teal-700);
  color:#fff;
  box-shadow: var(--shadow-sm);
}
.todo-tab--active:hover{ color:#fff; }

.todo-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px;
  overflow: hidden;
}

.todo-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 18px;
}
.todo-card__head h2{
  font-size:17px;
  font-weight:700;
  margin:0 0 3px;
  color: var(--ink);
}
.todo-card__date{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform: uppercase;
  color: var(--teal-700);
}

/* Left dateline + right day-nav header variant (Daily view) — mirrors the journal notepad header */
.todo-card__head--nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--rule-header);
  border-radius: 1px;
}
.todo-card__dateline{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.todo-card__dateline > svg{
  width:16px;
  height:16px;
  flex-shrink:0;
  color: var(--teal-700);
  padding:7px;
  border: 1.5px solid var(--border);
  border-radius:50%;
  box-sizing: content-box;
}
.todo-card__dateline-text{ min-width:0; }
.todo-daily-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.todo-daily-title-row h2{
  font-size:17px;
  font-weight:700;
  margin:0;
  color: var(--ink);
  line-height:1.2;
}

.todo-card__dateline-text h2{
  font-size:17px;
  font-weight:700;
  margin:0 0 2px;
  color: var(--ink);
  line-height:1.2;
}

.todo-card__subhead{
  display: flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-bottom: 18px;
}

.todo-progress{
  flex-shrink:0;
  font-size:12.5px;
  font-weight:600;
  color: var(--ink-faint);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  white-space:nowrap;
}

.todo-progress-bar{
  height:6px;
  background: var(--surface-soft);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:18px;
}
.todo-progress-bar__fill{
  height:100%;
  width:0%;
  background: var(--teal-600);
  border-radius:999px;
  transition: width .25s ease;
}

.todo-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
}
.todo-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.todo-item:last-child{ border-bottom:0; }

.todo-item__handle{
  flex-shrink:0;
  width:18px; height:20px;
  border:0;
  padding:0;
  background:transparent;
  color: var(--ink-faint);
  display:flex; align-items:center; justify-content:center;
  cursor: grab;
  touch-action: none;
  -webkit-user-select:none; user-select:none;
  opacity:.35;
  transition: opacity .12s ease, color .15s ease;
}
.todo-item__handle svg{ width:14px; height:14px; }
.todo-item:hover .todo-item__handle,
.todo-item__handle:focus-visible{ opacity:1; }
.todo-item__handle:hover{ color: var(--ink-soft); }
.todo-item__handle:active{ cursor: grabbing; }

/* Row currently being dragged — tracks the pointer 1:1, so it must NOT
   have a transform transition (any lag here would fight the pointer). */
.todo-item--dragging{
  position: relative;
  z-index: 5;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
  transform-origin: center;
  transition: box-shadow .15s ease;
}
.todo-item--dragging .todo-item__handle{ opacity:1; cursor: grabbing; }

/* Other rows in the same list while a drag is active — these DO get a
   transition, since their transform only ever changes when the drop
   target changes, and that's exactly when we want them to glide
   (Google Keep–style) into the gap instead of jumping. */
.todo-item--settling{
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}

/* While any row in this list is being dragged, other rows' text fields
   shouldn't react to the pointer passing over them (no hover flash, no
   accidental focus/caret placement mid-drag). */
.todo-list--dragging .todo-item:not(.todo-item--dragging) .todo-item__text{
  pointer-events: none;
}

.todo-item__check{
  flex-shrink:0;
  width:20px;
  height:20px;
  border-radius:6px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  position:relative;
  transition: background .15s ease, border-color .15s ease;
}
.todo-item__check:hover{ border-color: var(--teal-500); }
.todo-item__check svg{
  position:absolute; top:50%; left:50%;
  width:12px; height:12px;
  transform: translate(-50%,-50%) scale(0);
  color:#fff;
  transition: transform .12s ease;
}
.todo-item--done .todo-item__check{ background: var(--teal-700); border-color: var(--teal-700); }
.todo-item--done .todo-item__check svg{ transform: translate(-50%,-50%) scale(1); }

.todo-item__text{
  flex:1 1 auto;
  min-width:0;
  box-sizing: border-box;
  font-family:'DM Sans', sans-serif;
  font-size:14.5px;
  line-height: 1.3;
  color: var(--ink);
  word-break: break-word;
  white-space: pre-wrap;
  transition: color .15s ease, background .15s ease;
  cursor: text;
  border-radius: 4px;
  outline: none;

  /* The field's own padding matches the row's padding, cancelled out by
     an equal negative margin — so the click/hover/caret target reaches
     all the way to the row's edges (nothing lands in a "dead" strip
     above or below), while the rendered text sits in exactly the same
     spot as before. */
  padding: 11px 4px;
  margin: -11px -4px;
}
.todo-item__text:hover{ background: var(--surface-soft); }

/* Soft fill only — no extra ring/border on top of the row, so focus
   never flashes a mismatched outline while the field settles. */
.todo-item__text:focus{
  background: var(--surface-soft);
}
.todo-item__text--empty:before{
  content: attr(data-placeholder);
  color: var(--ink-faint);
  pointer-events: none;
}
.todo-item--done .todo-item__text{
  color: var(--ink-faint);
  text-decoration: line-through;
}

.todo-item__delete{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  border:0;
  background:transparent;
  color: var(--ink-faint);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition: opacity .12s ease, background .15s ease, color .15s ease;
}
.todo-item__delete svg{ width:14px; height:14px; }
.todo-item:hover .todo-item__delete{ opacity:1; }
.todo-item__delete:hover{ background:#FBEAEA; color:#C24444; }

.todo-empty{
  text-align:center;
  font-size:13.5px;
  color: var(--ink-faint);
  padding: 18px 0 4px;
  display:none;
}
.todo-empty--visible{ display:block; }

.todo-add-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  margin-top:10px;
  padding:9px 12px;
  border-radius: var(--radius-sm);
  border:1.5px dashed var(--rule-strong);
  background: transparent;
  color: var(--ink-faint);
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.todo-add-more svg{ width:14px; height:14px; flex-shrink:0; }
.todo-add-more:hover{ border-color: var(--teal-500); border-style:solid; color: var(--teal-700); background: var(--surface-soft); }
.todo-add-more:active{ transform: scale(.99); }

.todo-card--wide{ padding: 26px 30px 30px 56px; }

/* ===================== Responsive ===================== */
@media (max-width: 900px){
  .topnav{ display:none; }
  .main{ padding: 24px 20px 48px; }
  .todo-card{ padding: 20px 20px 24px 46px; }
  .todo-card::before{ width:18px; }
  .notepad__ring{ flex-basis: 18px; width:18px; }
  .notepad__header{ padding: 18px 22px 18px 26px; }
  .notepad__header::after{ left:26px; right:22px; }
  .notepad__body{ padding: 12px 22px 22px 26px; }
}

@media (max-width: 760px){
  .sidebar-toggle{ display:flex; }
  .sidebar{
    position:fixed;
    left:0; top: var(--topbar-h);
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index:30;
    box-shadow: var(--shadow-lg);
  }
  .sidebar--open{ transform: translateX(0); }
  .month-dropdown__panel{ left:0; transform:none; }
  .notepad__ring{ flex-basis: 14px; width:14px; }
  .notepad__header{ padding: 16px 18px 16px 20px; }
  .notepad__header::after{ left:20px; right:18px; }
  .notepad__header-top{ flex-wrap: wrap; }
  .notepad__title{ font-size:19px; }
  .title-typewriter{ font-size:19px; }
  .notepad__body{ padding: 10px 18px 20px 20px; }
  .todo-card{ padding: 20px 18px 24px 18px; }
  .todo-card::before{ width:14px; }
  .todo-card__head--nav{ gap:6px; }
}

/* ===================== Dashboard ===================== */
.dashboard{ max-width: 1000px; margin: 0 auto; }

.dashboard__head{ margin-bottom: 24px; }
.dashboard__head h1{
  margin:0 0 4px;
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.01em;
  color: var(--ink);
}
.dashboard__sub{
  margin:0;
  font-size:14px;
  color: var(--ink-faint);
}

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}

.kpi-card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 22px 22px 20px;
  display:flex;
  flex-direction:column;
}

.kpi-card__icon{
  width:40px;
  height:40px;
  border-radius: var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}
.kpi-card__icon svg{ width:20px; height:20px; }

.kpi-card__icon--teal{ background: var(--teal-100); color: var(--teal-700); }
.kpi-card__icon--amber{ background: #FDF1DF; color: #B5730E; }
.kpi-card__icon--rose{ background: #FBE7E9; color: #C23B4C; }
.kpi-card__icon--violet{ background: #EDE7FA; color: #6C4FCE; }

.kpi-card__label{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  color: var(--ink-faint);
  margin-bottom:6px;
}

.kpi-card__value{
  font-size:32px;
  font-weight:700;
  letter-spacing:-0.02em;
  color: var(--ink);
  line-height:1.1;
}
.kpi-card__value-of{
  font-size:16px;
  font-weight:600;
  color: var(--ink-faint);
}

.kpi-card__sub{
  margin-top:6px;
  font-size:13px;
  font-weight:500;
  color: var(--ink-faint);
}

@media (max-width: 1080px){
  .kpi-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .kpi-grid{ grid-template-columns: 1fr; }
  .dashboard__head h1{ font-size:22px; }
}