/* ---------- NEXT APPOINTMENT BANNER ---------- */
    .next-banner {
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--panel);
      border-radius: var(--radius-m);
      padding: 16px 16px 18px;
      box-shadow: var(--shadow-card);
    }

    .next-banner.hidden {
      display: none;
    }

    .nb-icon {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      flex: 0 0 auto;
      background: var(--brass-soft);
      color: var(--brass);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nb-icon svg {
      width: 16px;
      height: 16px;
    }

    .nb-title {
      max-width: 120px;
      overflow: hidden;
    }

    .next-banner .nb-title {
      font-size: 14.5px;
      font-weight: 600;
      flex: 1;
      min-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .next-banner .nb-title b {
      font-weight: 700;
    }

    .nb-prefix {
      text-transform: uppercase;
      color: var(--brass);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.04em;
    }

    .nb-time {
      font-size: 0.86em;
      color: var(--ink-dim);
      opacity: 0.6;
      font-weight: 400;
    }

    .nb-timer {
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #fff;
      white-space: nowrap;
      background: var(--brass);
      padding: 7px 8px;
      border-radius: var(--radius-s);
      overflow: hidden;
    }

    /* ---------- LAYOUT ---------- */
    .layout {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 18px;
      align-items: start;
    }

    @media (max-width:1180px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }

    .dash-sidebar {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* ---------- MINI CALENDAR ---------- */
    .mini-cal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .mini-cal-head button {
      background: none;
      border: 1px solid var(--line-strong);
      color: var(--ink-dim);
      width: 24px;
      height: 24px;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1;
    }

    .mini-cal-head button:hover {
      border-color: var(--brass);
      color: var(--brass);
    }

    .mini-month-label {
      cursor: default;
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      text-transform: capitalize;
    }

    .mini-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
    }

    .mini-dow {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--muted);
      text-align: center;
      padding-bottom: 4px;
      letter-spacing: 0.05em;
    }

    .mini-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      border-radius: 6px;
      color: var(--ink-dim);
      position: relative;
      background: transparent;
      border: 1px solid transparent;
    }

    .mini-day.out {
      color: #C9C5DE;
    }

    .mini-day.clickable {
      cursor: pointer;
    }

    .mini-day.clickable:hover {
      border-color: var(--line-strong);
      background: var(--panel-alt);
    }

    .mini-day.today {
      color: var(--brass);
      font-weight: 700;
      border-color: var(--brass);
    }

    .mini-day.in-week {
      background: var(--brass-soft);
    }

    .mini-day .dot {
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--teal);
    }

    /* ---------- WEATHER ---------- */
    .wx-current {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
    }

    .wx-current-icon {
      width: 32px;
      flex: 0 0 auto;
    }

    .wx-current-info {
      flex: 1;
      min-width: 0;
    }

    .wx-current-desc {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }

    .wx-current-wind {
      display: flex;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--muted);
      margin-top: 6px;
      align-items: center;
    }

    .wx-current-wind svg {
      width: 16px;
      color: var(--muted);
      margin-right: 6px;
    }

    .wind-strong,
    .wind-strong svg {
      color: var(--coral);
    }

    .wx-current-temp {
      font-family: var(--font-mono);
      font-size: 26px;
      font-weight: 700;
      color: var(--ink);
      flex: 0 0 auto;
    }

    .wx-forecast-row {
      display: flex;
      gap: 8px;
    }

    .wx-chip {
      flex: 1;
      min-width: 0;
      text-align: center;
      padding: 8px 4px;
    }

    .wx-chip .wx-dow {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--muted);
      text-transform: uppercase;
    }

    .wx-chip .wx-icon {
      font-size: 18px;
      margin: 4px 0;
    }

    .wx-icon svg {
      width: 32px;
    }

    .wx-chip .wx-temp {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--ink);
    }

    .wx-chip .wx-temp .lo {
      color: var(--muted);
    }

    .wx-loading {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--muted);
    }

    /* ---------- HABITS ---------- */
    .habit-row {
      margin-bottom: 12px;
    }

    .habit-row:last-child {
      margin-bottom: 0;
    }

    .habit-row-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .habit-name {
      font-size: 12.5px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .habit-swatch {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex: 0 0 auto;
    }

    .habit-streak {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--brass);
      background: var(--brass-soft);
      padding: 1px 6px;
      border-radius: 20px;
    }

    .habit-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
      max-width: 168px;
    }

    .habit-cell {
      aspect-ratio: 1;
      border-radius: 4px;
      border: 1px solid var(--line-strong);
      background: var(--panel-alt);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-mono);
      font-size: 7px;
      color: var(--muted);
    }

    .habit-cell.clickable {
      cursor: pointer;
    }

    .habit-cell.clickable:hover {
      border-color: var(--ink-dim);
    }

    .habit-cell.done {
      border-color: transparent;
      color: #fff;
      font-weight: 700;
    }

    .habit-cell.is-today {
      box-shadow: 0 0 0 1px var(--brass);
    }

    .add-habit-row {
      display: flex;
      gap: 6px;
      margin-top: 12px;
    }

    .add-habit-row input {
      flex: 1;
      background: var(--panel-alt);
      border: 1px solid var(--line-strong);
      color: var(--ink);
      border-radius: 6px;
      padding: 6px 8px;
      font-size: 12px;
      min-width: 0;
    }

    .add-habit-row button {
      background: none;
      border: 1px solid var(--line-strong);
      color: var(--ink-dim);
      border-radius: 6px;
      padding: 0 10px;
      font-size: 14px;
    }

    .add-habit-row button:hover {
      border-color: var(--brass);
      color: var(--brass);
    }

    /* ---------- MEAL PLAN (week grid footer row) ---------- */
    .day-meal-chip {
      font-size: 9px;
      font-weight: 600;
      padding: 4px 4px;
      border-radius: 5px;
      line-height: 1.2;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 2px;
      width: 100%;
      min-width: 0;
      background: var(--panel-raised);
      border: 2px solid var(--line-strong);
      color: var(--ink-dim);
      height: 80px;
    }

    .day-meal-chip:hover {
      border-color: var(--amber);
      color: var(--ink);
    }

    .day-meal-chip.empty {
      justify-content: center;
      border-style: dashed;
      color: var(--muted);
      font-size: 30px;
    }

    .day-meal-chip .dm-emoji {
      font-size: 30px;
      line-height: 1;
      flex: 0 0 auto;
      min-height: 50px;
    }

    .day-meal-chip .dm-name {
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      max-width: 100%;
    }

    .meal-plan-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 5px;
    }

    .meal-plan-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    .meal-plan-dow {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--muted);
    }

    .meal-plan-box {
      width: 100%;
      aspect-ratio: 0.8;
      border-radius: 9px;
      cursor: pointer;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .meal-plan-box.empty {
      border: 1.5px dashed var(--line-strong);
      background: var(--panel-alt);
      color: var(--muted);
      font-size: 15px;
    }

    .meal-plan-box.empty:hover {
      border-color: var(--brass);
      color: var(--brass);
    }

    .meal-plan-box.filled {
      border: 1px solid var(--line);
      background: var(--panel-alt);
      padding: 4px 2px;
      gap: 2px;
    }

    .meal-plan-box.filled:hover {
      border-color: var(--brass);
    }

    .meal-plan-emoji {
      font-size: 16px;
      line-height: 1;
    }

    .meal-plan-name {
      font-size: 8px;
      line-height: 1.15;
      font-weight: 600;
      color: var(--ink);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
    }

    .meal-picker-list {
      max-height: 260px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 6px 0 12px;
    }

    .meal-picker-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      cursor: pointer;
      background: var(--panel-alt);
    }

    .meal-picker-item:hover {
      border-color: var(--brass);
    }

    .meal-picker-item .mp-emoji {
      font-size: 20px;
      flex: 0 0 auto;
    }

    .meal-picker-item .mp-name {
      font-size: 13px;
      font-weight: 500;
    }

    .meal-picker-empty {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      padding: 12px 0;
    }

    /* ---------- SLEEP ---------- */
    .sleep-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
      align-items: end;
      margin-bottom: 6px;
    }

    .sleep-bar-track {
      height: 52px;
      width: 100%;
      display: flex;
      align-items: flex-end;
      background: var(--panel-alt);
      border-radius: 5px;
      border: 1px solid var(--line-strong);
      overflow: hidden;
    }

    .sleep-bar-fill {
      width: 100%;
      background: linear-gradient(180deg, var(--sky), var(--violet));
    }

    .sleep-cell input {
      width: 100%;
      background: var(--panel-alt);
      border: 1px solid var(--line-strong);
      color: var(--ink);
      border-radius: 5px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 10px;
      padding: 3px 0;
    }

    .sleep-dow {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--muted);
    }

    /* ---------- MOOD ---------- */
    .mood-face-track {
      height: 34px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--panel-alt);
      border-radius: 5px;
      border: 1px solid var(--line-strong);
      font-size: 17px;
      cursor: pointer;
      position: relative;
    }

    .mood-face-track.is-set {
      border-color: var(--line-strong);
    }

    .mood-face-track.is-today {
      box-shadow: 0 0 0 1px var(--brass);
    }

    .mood-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 0 0 4px 4px;
    }

    .mood-popover {
      position: absolute;
      z-index: 20;
      background: var(--panel-raised);
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      padding: 6px;
      display: flex;
      gap: 3px;
      box-shadow: 0 10px 26px rgba(48, 38, 99, 0.16);
      transform: translate(-30%, -110%);
      left: 50px;
    }

    .mood-popover button {
      background: none;
      border: none;
      font-size: 18px;
      padding: 4px;
      border-radius: 6px;
      line-height: 1;
    }

    .mood-popover button svg {
      width: 18px;
      height: 18px;
    }

    .mood-popover button:hover {
      background: var(--brass-soft);
    }

    /* ---------- PROTON CALENDAR ---------- */
    .proton-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 10px;
    }

    .proton-field label {
      font-family: var(--font-body);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--muted);
      font-weight: 600;
    }

    .proton-field input {
      background: var(--panel-alt);
      border: 1px solid var(--line-strong);
      color: var(--ink);
      border-radius: 7px;
      padding: 7px 9px;
      font-size: 11.5px;
      font-family: var(--font-mono);
    }

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

    .proton-status {
      font-size: 11px;
      color: var(--muted);
      margin-top: 9px;
      line-height: 1.4;
    }

    .proton-status.ok {
      color: var(--good);
    }

    .proton-status.error {
      color: var(--coral);
    }

    .proton-upload-row {
      margin-top: 10px;
    }

    .proton-upload-row.is-hidden {
      display: none;
    }

    .appt-block.external {
      background: var(--proton);
      border-left-color: var(--proton);
    }

    .allday-chip.external {
      background: rgba(109, 74, 255, 0.10);
      color: var(--proton);
    }

    .ext-icon {
      width: 11px;
      height: 11px;
      flex: 0 0 auto;
      vertical-align: -1px;
      margin-right: 3px;
      display: inline-block;
    }

    /* ---------- WEEK MAIN ---------- */
    .week-main {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }

    .week-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-l);
      padding: 12px 14px;
      box-shadow: var(--shadow-card);
    }

    .week-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .week-nav button {
      background: none;
      border: 1px solid var(--line-strong);
      color: var(--ink-dim);
      height: 26px;
      border-radius: 6px;
      font-size: 14px;
    }

    .week-nav button:hover {
      border-color: var(--brass);
      color: var(--brass);
    }

    .week-label {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      min-width: 150px;
      cursor: default;
    }

    .btn-today {
      background: none;
      border: 1px solid var(--line-strong);
      color: var(--ink-dim);
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 11px;
      font-family: var(--font-mono);
    }

    #weekNext,
    #weekPrev {
      width: 24px;
    }

    .btn-today:hover {
      border-color: var(--brass);
      color: var(--brass);
    }

    .category-filters {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      flex: 1;
    }

    .cat-toggle {
      display: flex;
      align-items: center;
      gap: 5px;
      background: var(--panel-alt);
      border: 1px solid var(--line-strong);
      border-radius: 20px;
      padding: 4px 10px 4px 8px;
      font-size: 11px;
      color: var(--ink-dim);
      opacity: 0.45;
    }

    .cat-toggle.active {
      opacity: 1;
      border-color: var(--line-strong);
    }

    .cat-toggle .sw {
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }

    .week-grid-wrap {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-l);
      overflow: hidden;
      box-shadow: var(--shadow-card);
    }

    .week-head {
      display: grid;
      grid-template-columns: 52px repeat(7, 1fr);
      border-bottom: 1px solid var(--line);
      background: var(--panel-alt);
    }

    .week-head .wh-gutter {}

    .week-head .wh-day {
      text-align: center;
      padding: 12px 4px 10px;
      border-left: 1px solid var(--line-strong);
    }

    .week-head .wh-day .dow {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .week-head .wh-day .dnum {
      font-family: var(--font-display);
      font-size: 19px;
      font-weight: 600;
      margin-top: 2px;
    }

    .week-head .wh-day.is-today .dnum {
      color: var(--brass);
    }

    .week-head .wh-day.is-today {
      background: var(--brass-soft);
    }

    .week-allday,
    .week-meals {
      border-bottom: 1px solid var(--line);
    }

    .week-allday .wh-gutter,
    .week-meals .wh-gutter {
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 6px;
      text-align: right;
    }

    .week-allday .wh-day,
    .week-meals .wh-day {
      text-align: left;
      padding: 6px 5px;
      border-left: 1px solid var(--line-strong);
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-height: 26px;
      min-width: 0;
    }

    .week-allday.is-empty,
    .week-meals.is-empty {
      display: none;
    }

    .allday-chip {
      font-size: 10px;
      font-weight: 600;
      padding: 3px 7px;
      border-radius: 5px;
      line-height: 1.2;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      max-width: 100%;
    }

    .allday-chip:hover {
      filter: brightness(0.97);
    }

    .allday-chip.external {
      cursor: default;
    }

    .allday-chip.external:hover {
      filter: none;
    }

    .chip-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      flex: 1;
    }

    .meal-chip {
      font-size: 10px;
      padding: 2px 7px;
      border-radius: 20px;
      line-height: 1.3;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      width: fit-content;
      border: 1px solid var(--line-strong);
      color: var(--ink-dim);
      cursor: pointer;
    }

    .meal-chip:hover {
      border-color: var(--amber);
      color: var(--ink);
    }

    .meal-chip .m-time {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--muted);
    }

    .week-body {
      display: grid;
      grid-template-columns: 52px repeat(7, 1fr);
      max-height: 440px;
      overflow-y: auto;
      position: relative;
    }

    .hour-gutter {
      display: flex;
      flex-direction: column;
    }

    .hour-gutter .hr {
      height: 44px;
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--muted);
      text-align: right;
      padding-right: 6px;
      transform: translateY(-6px);
    }

    .day-all {
      padding: 4px 4px;
      min-height: 26px;
    }

    .day-col {
      position: relative;
      border-left: 1px solid var(--line-strong);
      background-image: repeating-linear-gradient(to bottom, transparent, transparent 43px, var(--line) 44px);
    }

    .day-col.is-today {
      background-color: rgba(124, 92, 252, 0.05);
    }

    .now-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      border-top: 2px solid var(--coral);
      z-index: 5;
      pointer-events: none;
    }

    .now-line::before {
      content: '';
      position: absolute;
      left: -4px;
      top: -4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--coral);
    }

    .appt-block {
      position: absolute;
      left: 3px;
      right: 3px;
      border-radius: 6px;
      padding: 4px 6px;
      font-size: 10.5px;
      line-height: 1.25;
      overflow: hidden;
      cursor: pointer;
    }

    .appt-block .a-title {
      font-weight: 600;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .appt-block .a-time {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--ink-dim);
    }

    .appt-block:hover {
      filter: brightness(1.15);
      z-index: 4;
    }

    .appt-block.external {
      cursor: default;
    }

    .appt-block.external:hover {
      filter: none;
    }

    .day-habits {
      border-left: 1px solid var(--line-strong);
      padding: 6px 5px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-content: flex-start;
      background: var(--panel-alt);
      border-top: 1px solid var(--line);
      min-width: 0;
    }

    .day-tools-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .day-mood-btn {
      width: 32px;
      aspect-ratio: 1;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      cursor: pointer;
      flex: 0 0 auto;
      padding: 0;
      color: var(--ink-dim);
      border: none;
      background: none;
    }

    .day-mood-btn svg {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }

    .day-tag-dot {
      width: 32px;
      font-size: 20px;
      aspect-ratio: 1;
      border-radius: 5px;
      flex: 0 0 auto;
      cursor: pointer;
      padding: 0;
      border: 2px solid var(--line-strong);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .day-tag-dot:hover {
      filter: brightness(0.9);
      border-color: var(--brass);
      color: var(--brass);
    }

    .day-tag-dot svg {
      width: 16px;
      height: 16px;
    }

    .tag-popover-item svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    .day-tag-add-btn {
      width: 32px;
      aspect-ratio: 1;
      border-radius: 5px;
      border: 2px dashed var(--line-strong);
      background: transparent;
      cursor: pointer;
      padding: 0;
      color: var(--muted);
      flex: 0 0 auto;
      font-size: 24px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .day-tag-add-btn:hover {
      border-color: var(--brass);
      color: var(--brass);
    }

    .tag-popover {
      position: absolute;
      z-index: 20;
      background: var(--panel-raised);
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 10px 26px rgba(48, 38, 99, 0.16);
      min-width: 170px;
      transform: translate(-10%, -100%) translateY(-8px);
    }

    .tag-popover-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 7px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      background: var(--panel-alt);
      border: none;
      color: var(--ink);
      text-align: left;
      width: 100%;
    }

    .tag-popover-item:hover {
      background: var(--brass-soft);
    }

    .tag-popover-empty {
      font-size: 11px;
      color: var(--muted);
      padding: 4px 6px;
    }

    .tag-popover-new-row button:hover {
      border-color: var(--brass);
      color: var(--brass);
    }

    .day-habits-gutter {
      border-top: 1px solid var(--line);
      background: var(--panel-alt);
    }

    .day-habits-label {
      font-family: var(--font-mono);
      font-size: 8px;
      color: var(--muted);
      padding: 6px 4px;
      text-align: right;
    }

    @media (max-width: 1400px) {
      .week-body {
        max-height: 340px;
      }

      .day-mood-btn,
      .day-tag-dot,
      .day-tag-add-btn {
        width: 22px;
        font-size: 14px;
      }
    }

    /* ---------- TODOS ---------- */
    .dash-right-col {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: sticky;
      top: 20px;
    }

    .todos-panel {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    #todoForm {
      display: flex;
      flex-direction: row;
      gap: 6px;
    }

    #todoForm input[type=text] {
      background: var(--panel-alt);
      border: 1px solid var(--line-strong);
      color: var(--ink);
      border-radius: 6px;
      padding: 8px 9px;
      font-size: 12.5px;
      width: 110px;
    }

    .todo-form-row {
      display: flex;
      gap: 6px;
    }

    .todo-form-row select,
    .todo-form-row input[type=date] {
      flex: 1;
      background: var(--panel-alt);
      border: 1px solid var(--line-strong);
      color: var(--ink-dim);
      border-radius: 6px;
      padding: 6px 6px;
      font-size: 11px;
      min-width: 0;
      width: 30px;
    }

    #todoForm button {
      width: 30px;
      aspect-ratio: 1;
      background: var(--brass);
      border: none;
      color: #fff;
      font-weight: 600;
      border-radius: 6px;
      padding: 7px 0;
      font-size: 16px;
      margin-top: 2px;
    }

    .todo-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-right: 2px;
    }

    .todo-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      border-radius: 8px;
    }

    .todo-check {
      width: 16px;
      height: 16px;
      border-radius: 5px;
      border: 1px solid var(--line-strong);
      flex: 0 0 auto;
      margin-top: 1px;
      cursor: pointer;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      color: transparent;
      font-size: 11px;
    }

    .todo-check:hover {
      border-color: var(--brass);
    }

    .todo-item.done {
      background: none;
      border: none;
    }

    .todo-item.done .todo-check {
      background: var(--good);
      border-color: var(--good);
      color: #fff;
    }

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

    .todo-main {
      flex: 1;
      min-width: 0;
    }

    .t-title {
      font-size: 12.5px;
      font-weight: 500;
    }

    .t-meta {
      display: flex;
      gap: 6px;
      margin-top: 3px;
      flex-wrap: wrap;
    }

    .t-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      padding: 1px 6px;
      border-radius: 10px;
      background: var(--panel-raised);
      color: var(--ink-dim);
      border: 1px solid var(--line-strong);
    }

    .t-tag.due-today {
      color: var(--coral);
      border-color: var(--coral);
    }

    .t-tag.recurring {
      color: var(--teal);
      border-color: var(--teal);
    }

    .todo-del {
      background: none;
      border: none;
      color: var(--muted);
      font-size: 18px;
      padding: 0 2px;
      flex: 0 0 auto;
      line-height: 1;
    }

    .todo-del:hover {
      color: var(--coral);
    }

    .todo-empty {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--muted);
      text-align: center;
      padding: 14px 0;
    }