:root {
  --ink: #111113;
  --mute: #6B6B70;
  --faint: #8E8E93;
  --line: #EDEDF0;
  --soft: #F6F6F7;
  --green: #1A8A52;
  --red: #D93038;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; }
body {
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; cursor: pointer; color: inherit; }
input { font-family: inherit; color: var(--ink); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 32px) 20px calc(108px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.date { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; min-height: 22px; }
.label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--mute); text-transform: uppercase; }
.hint { font-size: 12px; color: var(--mute); }
svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- log hours ---- */
.logger { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.ring { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.ring-fill {
  position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px));
}
.ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.ring-mid b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ring-mid span { font-size: 12px; color: var(--mute); }
.rows { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row { position: relative; height: 44px; border-radius: 12px; overflow: hidden; }
.act {
  position: absolute; top: 0; width: 96px; height: 44px; border: 0; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 600; visibility: hidden;
}
.act.add { left: 0; background: var(--green); }
.act.rem { right: 0; background: var(--red); }
.fg {
  position: relative; width: 100%; height: 44px; padding: 0 10px; border: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; text-align: left;
  background: #fff; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: transform 0.2s ease;
}
.row.sel .fg { background: #F5F5F7; }
.lbl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lbl i { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.lbl b { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.sel .lbl b { font-weight: 600; }
.val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.add-cat {
  height: 44px; margin-top: 2px; border: 1.5px dashed #D9D9DD; border-radius: 12px; background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--mute);
}

/* ---- streaks ---- */
.sec-actions { display: flex; align-items: center; margin: -10px -10px -10px 0; }
.text-btn { height: 44px; padding: 0 10px; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--mute); }
.icon-btn { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.empty {
  width: 100%; height: 76px; margin-top: 12px; border: 1.5px dashed #D9D9DD; border-radius: 20px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.empty b { font-size: 15px; font-weight: 600; }
.empty span { font-size: 12px; color: var(--mute); }
.streaks { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
.streak { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.circle {
  width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid transparent;
  display: flex; align-items: center; justify-content: center;
}
.del {
  position: absolute; top: -10px; right: calc(50% - 46px); width: 36px; height: 36px; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.del span { width: 22px; height: 22px; border-radius: 11px; background: var(--red); display: flex; align-items: center; justify-content: center; }
.nm { max-width: 80px; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct { font-size: 12px; color: var(--mute); }

/* ---- this month (Today) and Mountain rows ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff;
  border-radius: 14px; padding: 6px 12px; font-size: 12px; font-weight: 500;
}
.prow {
  width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 0;
  border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left;
}
.prow .l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prow .bar { width: 4px; height: 34px; border-radius: 2px; flex-shrink: 0; }
.prow .col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prow .p { font-size: 12px; color: var(--mute); }
.prow .t { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .t.ph { color: var(--faint); }
.prow .r { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; padding-left: 10px; }
.prow .b { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; }
.prow .b.ph { color: var(--faint); }
.prow .m { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mute); }
.prow .m.hit { color: var(--ink); }
.link-empty {
  height: 76px; border: 1.5px dashed #D9D9DD; border-radius: 20px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%;
}
.link-empty b { font-size: 15px; font-weight: 600; }
.link-empty span { font-size: 12px; color: var(--mute); }

/* ---- mountain ---- */
.m-head { display: flex; align-items: flex-end; justify-content: space-between; }
.m-head h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.m-head .yr { font-size: 15px; font-weight: 600; color: var(--mute); padding-bottom: 4px; }
.months { display: flex; gap: 6px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
.months::-webkit-scrollbar { display: none; }
.mchip { flex-shrink: 0; height: 44px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; }
.mchip span { height: 34px; padding: 0 14px; border-radius: 17px; display: flex; align-items: center; font-size: 14px; font-weight: 500; background: #F2F2F4; }
.mchip.on span { background: var(--ink); color: #fff; }
.mchip.future span { color: var(--mute); }
.mchip.on.future span { color: #fff; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; height: 44px; border-radius: 22px; border: 0; background: var(--soft); font-size: 15px; font-weight: 600; }
.seg button.on { background: var(--ink); color: #fff; }
.fl { display: flex; flex-direction: column; gap: 6px; }

/* ---- calendar (Week tab): day view ---- */
.pl { display: flex; flex-direction: column; }
.pl-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.pl-month { font-size: 13px; color: var(--mute); }
.pl-nav { display: flex; align-items: center; margin-right: -10px; }
.pl-nav button { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.pl-nav .today { width: auto; padding: 0 12px; border-radius: 22px; background: var(--soft); font-size: 13px; font-weight: 600; margin: 0 4px; }
.pl-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pl-title { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.pl-btns { display: flex; align-items: center; gap: 6px; }
.pl-pill { height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: var(--soft); display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.pl-ic { width: 40px; height: 40px; border: 0; border-radius: 20px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.pl-strip { display: grid; grid-template-columns: repeat(7, 1fr); margin: 10px -8px 0; }
.pl-day { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 64px; padding: 0; }
.pl-day .l { font-size: 11px; color: var(--mute); font-weight: 500; }
.pl-day .n { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; }
.pl-day.sel .n { background: var(--ink); color: #fff; }
.pl-day.today:not(.sel) .n { box-shadow: 0 0 0 1.5px var(--ink); }
.pl-day .load { width: 20px; height: 3px; border-radius: 2px; background: #E9E9EC; overflow: hidden; }
.pl-day .load i { display: block; height: 100%; background: var(--ink); }
.pl-day .load.over i { background: var(--red); }
.pl-now { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); min-height: 22px; margin-top: 2px; }
.pl-now i { width: 7px; height: 7px; border-radius: 4px; flex-shrink: 0; }
.pl-list { margin-top: 12px; padding-bottom: 96px; }
.pl-sec { width: 100%; border: 0; text-align: left; background: var(--soft); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.pl-sec.r-all { border-radius: 20px; margin-bottom: 12px; }
.pl-sec.r-top { border-radius: 20px 20px 0 0; }
.pl-sec .row1 { display: flex; align-items: center; gap: 12px; width: 100%; }
.pl-sec .bar { width: 3px; height: 38px; border-radius: 2px; flex-shrink: 0; }
.pl-sec .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-sec .nm { font-size: 17px; font-weight: 600; }
.pl-sec .rg { font-size: 12px; color: var(--mute); }
.pl-sec .rt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pl-sec .fill { font-size: 13px; font-weight: 600; }
.pl-sec .sub { font-size: 12px; color: var(--mute); min-height: 14px; }
.pl-sec .meter { height: 3px; border-radius: 2px; background: #E4E4E7; overflow: hidden; width: 100%; }
.pl-sec .meter i { display: block; height: 100%; }
.pl-item { display: flex; align-items: center; gap: 4px; background: var(--soft); padding: 0 16px 0 8px; min-height: 52px; border-top: 1px solid #E9E9EC; }
.pl-item .chk { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pl-item .ring { width: 24px; height: 24px; border-radius: 12px; box-sizing: border-box; border: 1.8px solid; display: flex; align-items: center; justify-content: center; }
.pl-item .body { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 6px 0; min-height: 44px; justify-content: center; }
.pl-item .t { font-size: 15px; font-weight: 500; }
.pl-item .t.done { color: var(--faint); text-decoration: line-through; }
.pl-item .at { font-size: 12px; color: var(--mute); }
.pl-item .dur { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.pl-len { display: flex; align-items: center; justify-content: space-between; background: var(--soft); border-top: 1px solid #E9E9EC; min-height: 56px; padding: 0 12px 0 16px; }
.pl-len .tx { display: flex; flex-direction: column; gap: 1px; }
.pl-len .tx b { font-size: 14px; font-weight: 500; }
.pl-len .tx span { font-size: 12px; color: var(--mute); }
.pl-len .step { display: flex; align-items: center; background: #fff; border-radius: 22px; height: 44px; }
.pl-len .step button { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.pl-len .step .v { min-width: 62px; text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-add { width: 100%; border: 0; background: var(--soft); border-radius: 0 0 20px 20px; border-top: 1px solid #E9E9EC; height: 48px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--mute); font-size: 14px; font-weight: 500; }
.pl-un {
  position: fixed; z-index: 4; bottom: calc(69px + env(safe-area-inset-bottom) + 18px); left: max(20px, calc((100vw - 430px) / 2 + 20px));
  height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(17, 17, 19, 0.25);
}
.pl-un i { width: 8px; height: 8px; border-radius: 4px; background: #F5A524; }
.pl-fab {
  position: fixed; z-index: 4; bottom: calc(69px + env(safe-area-inset-bottom) + 14px); right: max(20px, calc((100vw - 430px) / 2 + 20px));
  width: 56px; height: 56px; border-radius: 28px; border: 0; background: var(--ink); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(17, 17, 19, 0.25);
}

/* ---- calendar: week view ---- */
.pw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pw-sub { font-size: 12px; color: var(--mute); }
.pw-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.pw-status .tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pw-status .tx b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.pw-status .tx span { font-size: 12px; line-height: 1.25; }
.solid { height: 36px; padding: 0 16px; border-radius: 18px; border: 0; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.solid.wide { width: 100%; height: 44px; border-radius: 22px; font-size: 15px; }
.soft { height: 36px; padding: 0 14px; border-radius: 18px; border: 0; background: var(--soft); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.pw-heads { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 4px; }
.pw-h { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 50px; }
.pw-h .l { font-size: 11px; color: var(--mute); font-weight: 500; }
.pw-h .n { width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.pw-h .n.now { background: var(--ink); color: #fff; }
.pw-body { display: flex; flex-shrink: 0; }
.pw-axis { position: relative; width: 48px; flex-shrink: 0; }
.pw-ax { position: absolute; left: 0; right: 4px; text-align: right; line-height: 1.15; }
.pw-ax b { display: block; font-size: 10px; font-weight: 700; }
.pw-ax span { display: block; font-size: 10px; color: var(--mute); font-variant-numeric: tabular-nums; }
.pw-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.pw-cell { border: 0; padding: 0; border-radius: 7px; outline-offset: -2px; }
.pw-tray { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pw-trayh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pw-trayh span:first-child { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--mute); }
.pw-trayh span:last-child { font-size: 12px; color: var(--mute); text-align: right; }
.pw-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pw-chip { flex-shrink: 0; height: 44px; border-radius: 22px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--soft); border: 2px solid transparent; font-size: 14px; font-weight: 500; white-space: nowrap; }
.pw-chip.sel { background: #fff; border-color: var(--ink); }
.pw-chip em { font-style: normal; font-size: 12px; color: var(--mute); }
.pw-chips .none { height: 44px; display: flex; align-items: center; font-size: 14px; color: var(--mute); }

/* ---- calendar: add / edit and settings sheets ---- */
.pl-titlef { position: relative; }
.pl-titlef .field { padding-right: 96px; }
.pl-read { position: absolute; right: 10px; top: 12px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; display: none; align-items: center; }
.pl-daysel { display: grid; grid-template-columns: repeat(7, 1fr); }
.pl-daysel button { border: 0; background: transparent; height: 60px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pl-daysel .l { font-size: 11px; color: var(--mute); font-weight: 500; }
.pl-daysel .n { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; }
.pl-daysel .sel .n { background: var(--ink); color: #fff; }
.pl-daysel .today:not(.sel) .n { box-shadow: 0 0 0 1.5px var(--ink); }
.pl-seg { display: flex; background: #F2F2F4; border-radius: 22px; padding: 4px; gap: 2px; align-self: flex-start; }
.pl-seg button { height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: transparent; font-size: 14px; font-weight: 600; color: var(--mute); }
.pl-seg button.on { background: #fff; color: var(--ink); }
.pl-secs { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-secs button { height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--soft); font-size: 15px; font-weight: 600; }
.pl-secs button.on { background: var(--ink); color: #fff; }
.pl-time { display: flex; align-items: center; background: var(--soft); border-radius: 22px; height: 44px; align-self: flex-start; }
.pl-time button { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.pl-time .v { min-width: 84px; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-info { font-size: 13px; line-height: 1.35; min-height: 36px; }
.pl-durs { display: flex; gap: 8px; }
.pl-durs button { flex: 1; height: 44px; border-radius: 22px; border: 0; background: var(--soft); font-size: 14px; font-weight: 600; }
.pl-durs button.on { background: var(--ink); color: #fff; }
.pl-rdays { display: flex; gap: 6px; }
.pl-rdays button { flex: 1; height: 44px; border-radius: 22px; border: 0; background: var(--soft); font-size: 14px; font-weight: 600; }
.pl-rdays button.on { background: var(--ink); color: #fff; }
.pl-two { display: flex; gap: 8px; }
.pl-two .field { flex: 1; min-width: 0; }
.pl-adj { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl-adj label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.pl-adj label span { width: 58px; flex-shrink: 0; }
.pl-adj .field { flex: 1; min-width: 0; }
.soft-btn { height: 48px; border: 0; border-radius: 14px; background: var(--soft); display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 14px; font-size: 15px; font-weight: 500; }
select.field { appearance: none; -webkit-appearance: none; }

/* ---- tab bar ---- */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid var(--line);
  padding: 8px 32px calc(8px + env(safe-area-inset-bottom));
}
#tabs div { max-width: 366px; margin: 0 auto; display: flex; justify-content: space-between; }
.tab {
  width: 72px; height: 52px; border: 0; background: transparent; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; font-size: 11px; color: var(--mute);
}
.tab svg { stroke: var(--mute); stroke-width: 1.9; }
.tab.on { color: var(--ink); font-weight: 600; }
.tab.on svg { stroke: var(--ink); }

/* ---- sheets ---- */
#overlay:empty { display: none; }
.backdrop { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(17, 17, 19, 0.4); }
.sheet {
  position: fixed; z-index: 21; left: 50%; bottom: 0; width: 100%; max-width: 430px; transform: translateX(-50%);
  background: #fff; border-radius: 28px 28px 0 0; padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 18px; max-height: 92dvh; overflow-y: auto;
  animation: rise 0.22s ease;
}
@keyframes rise { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: #D9D9DD; flex-shrink: 0; }
.sh-head { display: flex; align-items: center; justify-content: space-between; }
.sh-title { display: flex; align-items: center; gap: 10px; }
.sh-title .t { font-size: 18px; font-weight: 600; }
.sh-title .s { font-size: 13px; color: var(--mute); }
.dot { width: 12px; height: 12px; border-radius: 6px; display: inline-block; }
.round { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.round.big { width: 56px; height: 56px; }
.amount { display: flex; align-items: center; justify-content: space-between; }
.hm { display: flex; align-items: center; gap: 6px; }
.hm input {
  width: 72px; height: 64px; border: 0; border-radius: 16px; background: var(--soft); text-align: center;
  font-size: 36px; font-weight: 600; font-variant-numeric: tabular-nums; outline-offset: 2px;
  -moz-appearance: textfield; appearance: textfield;
}
.hm input::-webkit-outer-spin-button, .hm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hm span { font-size: 15px; font-weight: 500; color: var(--mute); }
.hm span:first-of-type { margin-right: 6px; }
.chips { display: flex; gap: 8px; }
.chip { flex: 1; height: 44px; border-radius: 22px; border: 0; background: var(--soft); font-size: 15px; font-weight: 600; }
.chip.on { color: #fff; }
.preview-line { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-variant-numeric: tabular-nums; }
.preview-line .mute { color: var(--mute); }
.cta { height: 56px; border-radius: 28px; border: 0; background: var(--ink); color: #fff; font-size: 17px; font-weight: 600; }
.cta:disabled { background: #E4E4E7; color: var(--mute); }
.danger { height: 44px; border: 0; background: transparent; font-size: 14px; font-weight: 500; color: var(--red); }
.field { height: 52px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--soft); font-size: 16px; font-weight: 500; width: 100%; }
.field.sm { height: 48px; font-size: 16px; border-radius: 14px; }
.swatches, .icons { display: flex; align-items: center; justify-content: space-between; }
.sw { width: 40px; height: 40px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.sw span { width: 26px; height: 26px; border-radius: 13px; }
.sw.on span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.ic { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--soft); display: flex; align-items: center; justify-content: center; }

/* ---- login + toast ---- */
.login { position: fixed; inset: 0; z-index: 30; background: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.login-card h1 { margin: 0 0 6px; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.err { margin: 0; min-height: 18px; font-size: 13px; color: var(--red); }
#toast {
  position: fixed; z-index: 40; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: 340px; padding: 12px 18px; border-radius: 22px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500;
}
#toast:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fg, .blk { transition: none; }
  .sheet { animation: none; }
}

/* ---- calendar: exact times, prayer anchors, place picker ---- */
.pl-lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--mute); text-transform: uppercase; }
.pl-hm { display: flex; align-items: center; gap: 6px; }
.pl-hm input { width: 72px; height: 48px; border: 0; border-radius: 14px; background: var(--soft); text-align: center; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.pl-hm input::-webkit-outer-spin-button, .pl-hm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pl-hm span { font-size: 15px; color: var(--mute); margin-right: 6px; }
.pl-off { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mute); }
.pl-off input { width: 84px; height: 44px; border: 0; border-radius: 14px; background: var(--soft); text-align: center; font-size: 16px; font-weight: 600; flex-shrink: 0; }
.pl-secs.two button { height: 56px; min-width: 76px; padding: 0 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.pl-secs.two small { font-size: 11px; font-weight: 500; opacity: 0.7; }
.pl-daysel button:disabled { cursor: default; }

.chips.pils { flex-wrap: wrap; }
.chip.pil { flex: 0 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 8px; }
.chip.pil i { width: 8px; height: 8px; border-radius: 4px; display: inline-block; }
.chip.pil.on i { background: #fff !important; }

/* ---- mountain: monthly cards ---- */
.mt-list { display: flex; flex-direction: column; gap: 12px; }
.mt-card { width: 100%; border: 0; border-radius: 20px; background: var(--soft); padding: 16px; display: flex; flex-direction: column; gap: 12px; text-align: left; color: var(--ink); }
.mt-top { display: flex; align-items: center; gap: 12px; }
.mt-top .bar { width: 4px; height: 36px; border-radius: 2px; background: var(--c); flex-shrink: 0; }
.mt-top .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mt-top .who b { font-size: 17px; font-weight: 600; }
.mt-top .who em { font-style: normal; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-top .th { font-size: 14px; font-weight: 500; text-align: right; max-width: 45%; }
.mt-top .th.ph { color: var(--faint); }
.mt-base { font-size: 14px; color: var(--mute); }
.mt-days { display: grid; gap: 2px; width: 100%; }
.mt-days i { aspect-ratio: 1; border-radius: 50%; background: var(--c); min-width: 0; }
.mt-days i.fut { background: #E4E4E7; }
.mt-days i.miss { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); opacity: 0.45; }
.mt-days i.now { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.mt-count { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; min-height: 14px; }
.mt-none { font-size: 13px; color: var(--faint); }
.mt-md { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: #fff; }
.mt-md.hit { background: color-mix(in srgb, var(--c) 14%, #fff); }
.mt-md .mdx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-md .mdx b { font-size: 15px; font-weight: 600; }
.mt-md .mdx em { font-style: normal; font-size: 12px; color: var(--mute); }
.mt-md.hit .mdx em { color: var(--ink); font-weight: 600; }

/* weekly / monthly / yearly things, and the Sunday card */
.pw-chip.rh i { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; }
.pl-wk { display: flex; align-items: center; justify-content: space-between; }
.pl-wk span { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-wk button { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.pl-sun { margin: 4px 0 14px; border-radius: 20px; background: #fff; border: 1px solid #E9E9EC; padding: 6px 6px 10px; display: flex; flex-direction: column; }
.pl-sun .sun-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px 12px; }
.pl-sun .sun-h span { font-size: 17px; font-weight: 600; }
.sun-row { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 6px 0 12px; border: 0; background: transparent; text-align: left; width: 100%; border-top: 1px solid #F2F2F4; }
.sun-row .t { flex: 1; font-size: 15px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sun-row .d { font-size: 13px; color: var(--mute); margin-right: 4px; white-space: nowrap; }
.sun-row .dot { width: 8px; height: 8px; border-radius: 4px; margin-right: 8px; flex-shrink: 0; }
.sun-row.pick { padding-right: 12px; gap: 0; }
.sun-row.pick .d { margin-right: 8px; }
.sun-row button { width: 40px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.sun-go { display: flex; gap: 8px; padding: 10px 8px 0; }
.sun-go .solid, .sun-go .soft { flex: 1; height: 48px; border-radius: 24px; border: 0; font-size: 15px; font-weight: 600; }
.sun-go .solid { background: var(--ink); color: #fff; }
.sun-go .soft { background: var(--soft); color: var(--ink); }
.pl-sun.ok { flex-direction: row; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 0; background: var(--soft); width: 100%; font-size: 15px; font-weight: 600; text-align: left; }
.pl-sun.ok .tick { width: 24px; height: 24px; border-radius: 12px; background: #2FA36B; display: flex; align-items: center; justify-content: center; }
.rh-g { display: flex; flex-direction: column; gap: 4px; }
.rh-row { display: flex; align-items: center; min-height: 52px; border: 0; background: var(--soft); border-radius: 14px; padding: 0 14px; text-align: left; margin-bottom: 4px; }
.rh-row .dot { width: 8px; height: 8px; border-radius: 4px; margin-right: 10px; flex-shrink: 0; }
.rh-row .t { flex: 1; font-size: 15px; font-weight: 500; }
.rh-row .d { font-size: 13px; color: var(--mute); }

/* =====================================================================
   LIFE LAYER: warm paper, soft cards, and motion (2026-10-12)
   ===================================================================== */
:root {
  --bg: #F5F2EC;
  --soft: #F3EFE8;
  --line: #ECE7DE;
  --card-shadow: 0 0 0 1px rgba(110, 90, 50, 0.05), 0 1px 2px rgba(80, 60, 20, 0.05), 0 12px 28px -12px rgba(90, 60, 20, 0.16);
  --pop-shadow: 0 0 0 1px rgba(110, 90, 50, 0.06), 0 1px 3px rgba(80, 60, 20, 0.10);
  --ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  --spring: cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
html, body { background: var(--bg); }
body::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; height: 380px; pointer-events: none; z-index: 0;
  background: radial-gradient(95% 100% at 50% 0%, var(--glow, #FFE6CC) 0%, rgba(245, 242, 236, 0) 72%);
  opacity: 0.75; transition: background 1.2s ease;
}
#app { position: relative; z-index: 1; gap: 18px; }

/* every button settles smoothly; a press gives a little */
button { transition: transform 0.2s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.3s var(--ease); }
button:not(.fg):not(.backdrop):not(.pw-cell):not(.pl-sec):active { transform: scale(0.96); }
.pl-sec:active, .mt-card:active { transform: scale(0.99); }
.fg { transition: transform 0.2s ease, background-color 0.3s var(--ease); }

/* Today: each block is a soft white card */
#app > section { background: #fff; border-radius: 26px; padding: 18px 16px 16px; box-shadow: var(--card-shadow); }
#app > section .sec-head { padding: 0 2px; }
.ring { filter: drop-shadow(0 8px 14px rgba(140, 100, 40, 0.14)); }
.row.sel .fg { background: var(--soft); }
.add-cat, .empty, .link-empty { border-color: #E3DCCD; }
.prow { border-top-color: var(--line); }
.circle { transition: transform 0.25s var(--spring), background-color 0.35s var(--ease), border-color 0.35s var(--ease); }
.circle:active { transform: scale(0.9); }

/* controls on the page: white, lifted */
.pl-pill, .pl-ic, .pl-nav .today, .pw-chip, .soft, .mchip span { background: #fff; box-shadow: var(--pop-shadow); }
.mchip.on span { background: var(--ink); box-shadow: 0 4px 12px rgba(17, 17, 19, 0.22); }
.pw-chip.sel { border-color: var(--ink); }
.pl-sun .pl-ic, .sheet .pl-ic, .sheet .soft { background: var(--soft); box-shadow: none; }

/* calendar day view */
.pl-sec { background: #fff; box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.05), 0 10px 20px -14px rgba(90, 60, 20, 0.28); }
.pl-sec.r-all { border-radius: 22px; }
.pl-sec.r-top { border-radius: 22px 22px 0 0; }
.pl-item, .pl-len { background: #fff; border-top-color: var(--line); box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.05); }
.pl-add { background: #fff; border-top-color: var(--line); border-radius: 0 0 22px 22px; box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.05), 0 10px 20px -14px rgba(90, 60, 20, 0.28); }
.pl-len .step { background: var(--soft); }
.pl-sec .meter { background: #EEE8DC; }
.pl-day .load { background: #E8E2D6; }
.pl-day .n, .pw-h .n { transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.pl-sun { background: #fff; border: 0; box-shadow: var(--card-shadow); border-radius: 24px; }
.pl-sun.ok { background: color-mix(in srgb, #2FA36B 13%, #fff); box-shadow: none; }
.sun-row { border-top-color: var(--line); }
.pl-un, .pl-fab { box-shadow: 0 10px 24px -6px rgba(17, 17, 19, 0.32); }

/* segmented controls glide */
.seg button, .pl-seg button, .chip, .pl-durs button, .pl-secs button, .pl-daysel button, .pl-wk button { transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.2s var(--ease); }
.pl-seg { background: var(--soft); }
.pl-seg button.on { background: #fff; box-shadow: var(--pop-shadow); }
.seg button { box-shadow: none; }
.seg button.on { box-shadow: 0 4px 12px rgba(17, 17, 19, 0.2); }

/* Mountain: each pillar's card carries a wash of its own colour */
.mt-card { background: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 11%, #fff) 0%, #fff 62%); box-shadow: var(--card-shadow); border-radius: 24px; }
.mt-days i { transition: transform 0.3s var(--spring); }
.mt-days i.fut { background: #E9E3D6; }
.mt-days i.now { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.mt-md { box-shadow: var(--pop-shadow); }
.mt-md.hit { box-shadow: 0 0 0 1.5px var(--c), 0 8px 18px -8px var(--c); }

/* tab bar: frosted, with a soft pill behind the current tab */
#tabs { background: rgba(252, 250, 246, 0.78); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border-top: 1px solid rgba(120, 100, 60, 0.12); }
.tab { position: relative; }
.tab::before { content: ''; position: absolute; top: 4px; left: 50%; width: 52px; height: 30px; margin-left: -26px; border-radius: 15px; background: rgba(17, 17, 19, 0); transition: background-color 0.35s var(--ease), transform 0.35s var(--spring); transform: scale(0.7); }
.tab.on::before { background: rgba(17, 17, 19, 0.075); transform: scale(1); }
.tab svg, .tab span { position: relative; transition: stroke 0.3s var(--ease), color 0.3s var(--ease), transform 0.35s var(--spring); }
.tab.on svg { transform: translateY(-1px) scale(1.06); }

/* sheets spring up over a softly blurred page */
.backdrop { background: rgba(40, 30, 15, 0.38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade 0.28s ease; }
.sheet { background: #FCFAF7; animation: rise 0.42s var(--spring); box-shadow: 0 -20px 50px -20px rgba(60, 40, 10, 0.3); }
.grab { background: #DAD3C4; }
.sw span { transition: box-shadow 0.25s var(--ease), transform 0.25s var(--spring); }
.sw.on span { transform: scale(1.1); }
.login { background: var(--bg); }
#toast { box-shadow: 0 12px 28px -8px rgba(17, 17, 19, 0.4); }

/* arriving on a screen: blocks rise in one after another */
@keyframes lift { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(0.8); opacity: 0.3; } 55% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
#app.enter > * { animation: lift 0.6s var(--ease) both; }
#app.enter > *:nth-child(2) { animation-delay: 0.06s; }
#app.enter > *:nth-child(3) { animation-delay: 0.12s; }
#app.enter > *:nth-child(4) { animation-delay: 0.18s; }
#app.enter > *:nth-child(5) { animation-delay: 0.24s; }
/* moving around inside a screen: the content settles, the chosen day / month pops */
.pl.nav, .mt-list.nav { animation: fade 0.32s ease; }
.pl.nav .pl-day.sel .n, .months.nav .mchip.on span { animation: pop 0.42s var(--spring); }

@media (prefers-reduced-motion: reduce) {
  #app.enter > *, .pl.nav, .mt-list.nav, .pl.nav .pl-day.sel .n, .months.nav .mchip.on span, .backdrop { animation: none; }
  button, .tab::before { transition: none; }
}
.months { padding-top: 4px; padding-bottom: 14px; margin-bottom: -10px; }

/* =====================================================================
   TODAY (Waqti-style hours, block you are in, journal) and Mountain squares
   ===================================================================== */
.dnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dmid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.dnav .date { font-size: 24px; text-align: center; }
.dn { width: 40px; height: 40px; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--pop-shadow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dtoday { border: 0; background: transparent; font-size: 13px; font-weight: 600; color: #E5603F; height: 24px; padding: 0 8px; }

/* the block you are in */
.nb { padding: 6px 6px 8px !important; display: flex; flex-direction: column; }
.nb-head { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; padding: 10px 12px 6px; width: 100%; flex-wrap: wrap; }
.nb-name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.nb-sub { flex: 1; min-width: 0; font-size: 13px; color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; }
.nb-meter { display: block; height: 4px; border-radius: 2px; background: #EEE8DC; margin: 2px 12px 6px; overflow: hidden; }
.nb-meter i { display: block; height: 100%; background: var(--ink); border-radius: 2px; transition: width 0.8s var(--ease); }
.nb-list { display: flex; flex-direction: column; }
.nb-item { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 14px 0 4px; border-top: 1px solid var(--line); }
.nb-item .chk { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nb-item .ring2 { width: 24px; height: 24px; border-radius: 12px; border: 1.8px solid; display: flex; align-items: center; justify-content: center; }
.nb-item .t { flex: 1; font-size: 15px; font-weight: 500; min-width: 0; }
.nb-item .t.done { color: var(--faint); text-decoration: line-through; }
.nb-item .dur { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }

/* hours, in Waqti's layout at a smaller scale */
.hrs { display: flex; flex-direction: column; align-items: center; padding-top: 22px !important; }
.ring.sm { width: 132px; height: 132px; margin: 0 auto; }
.ring.sm .ring-fill { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); }
.ring.sm .ring-mid b { font-size: 23px; }
.ring.sm .ring-mid span { font-size: 11px; }
.hr-status { margin-top: 12px; font-size: 14px; font-weight: 600; color: #E5603F; }
.hr-status.ok { color: var(--green); }
.hr-status.over { color: var(--red); }
.hr-details { margin-top: 2px; height: 36px; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: #E5603F; display: flex; align-items: center; gap: 4px; padding: 0 10px; }
.hr-lab { align-self: flex-start; margin: 10px 4px 2px; }
.hr-list { width: 100%; display: flex; flex-direction: column; }
.hr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 4px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; }
.hr:first-child { border-top: 0; }
.hr > i { width: 9px; height: 9px; border-radius: 5px; flex-shrink: 0; }
.hr .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hr .mid b { font-size: 15px; font-weight: 500; }
.hr .mid small { font-size: 11.5px; color: var(--mute); }
.hr .mid small.met { color: var(--green); }
.hr .val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hr .val.none { color: var(--faint); font-weight: 500; }
.hrs .add-cat { width: 100%; margin-top: 8px; }

/* journal */
.jr { display: flex; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line); }
.jr.jh { border-top: 0; margin-top: 2px; }
.jr .jp { width: 9px; height: 9px; border-radius: 5px; flex-shrink: 0; margin-left: 4px; }
.jr .jstar { width: 22px; display: flex; justify-content: center; flex-shrink: 0; margin-left: 2px; }
.jt { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 15px; font-weight: 500; padding: 0; }
.jt::placeholder { color: #B8B1A2; font-weight: 500; }
.jt:focus { outline: none; }
.jk { width: 32px; height: 32px; border-radius: 16px; border: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.3s var(--ease), transform 0.3s var(--spring); }

/* log time + day details sheets */
.sh-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.sh-nav .t { font-size: 16px; font-weight: 600; text-align: center; }
.sh-nav .nv { border: 0; background: transparent; font-size: 15px; font-weight: 500; color: var(--mute); text-align: left; height: 44px; padding: 0; }
.lg-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lg-cat .n { font-size: 15px; font-weight: 600; color: var(--mute); }
.lg-cat .s { font-size: 13px; color: var(--mute); min-height: 16px; }
.lg-cat .dot { width: 14px; height: 14px; border-radius: 7px; }
.label2 { font-size: 13px; color: var(--mute); }
.lg-ent { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; min-height: 56px; padding: 6px 8px 6px 16px; box-shadow: var(--pop-shadow); margin-bottom: 8px; }
.lg-ent > b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-ent .tgs { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.lg-ent button { width: 40px; height: 40px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.tg { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: #fff; box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.14); font-size: 13px; font-weight: 600; }
.notags { font-size: 13px; color: #B8B1A2; }
.lg-hm { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 6px 0; }
.lg-hm input { width: 84px; border: 0; background: transparent; text-align: right; font-size: 52px; font-weight: 600; color: #8E8E93; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; padding: 0; }
.lg-hm input:focus { outline: none; color: var(--ink); }
.lg-hm input::-webkit-outer-spin-button, .lg-hm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lg-hm span { font-size: 22px; font-weight: 500; color: var(--mute); margin-right: 14px; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tgc { height: 38px; padding: 0 14px; border-radius: 19px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.16); font-size: 14px; font-weight: 600; }
.tgc.on { background: var(--ink); color: #fff; box-shadow: none; }
.lg-tag { display: flex; gap: 8px; }
.lg-tag .field { flex: 1; background: #fff; box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.14); }
.coral { width: 76px; height: 48px; border: 0; border-radius: 14px; background: #FF5B45; color: #fff; font-size: 15px; font-weight: 600; flex-shrink: 0; }
.lg-another { height: 44px; align-self: flex-start; padding: 0 16px; border-radius: 22px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.16); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.lg-un { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 16px; min-height: 52px; padding: 0 16px; box-shadow: var(--pop-shadow); font-size: 14px; color: var(--mute); }
.lg-un b { font-size: 15px; font-weight: 700; color: var(--ink); }
.lg-un b.over { color: #FF5B45; }
.lg-goal { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.lg-goal input { width: 110px; border: 0; background: transparent; text-align: right; font-size: 40px; font-weight: 700; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.lg-goal input:focus { outline: none; }
.lg-goal input::-webkit-outer-spin-button, .lg-goal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lg-goal span { font-size: 18px; color: var(--mute); }
.dd-top { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dd-top .d { font-size: 17px; font-weight: 700; }
.dd-top .s { font-size: 13px; color: var(--mute); }
.dd-bar { display: flex; gap: 3px; height: 8px; border-radius: 4px; overflow: hidden; }
.dd-bar.big { height: 12px; border-radius: 6px; }
.dd-bar i { display: block; min-width: 4px; }
.dd-card { background: #fff; border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--card-shadow); }
.dd-h { display: flex; align-items: center; gap: 10px; }
.dd-h b { flex: 1; font-size: 16px; }
.dd-h span { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dd-h .dot { width: 10px; height: 10px; border-radius: 5px; }
.dd-row { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.dd-row > b { width: 62px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dd-row .tgs { display: flex; flex-wrap: wrap; gap: 6px; }
.dd-empty { text-align: center; color: var(--mute); font-size: 14px; padding: 20px 0; }
.dd-j { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.dd-j .jp { width: 9px; height: 9px; border-radius: 5px; margin-top: 6px; flex-shrink: 0; }
.dd-j .k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; flex-shrink: 0; width: 34px; }
.dd-j .k.win { color: #2FA36B; }
.dd-j .k.loss { color: #E5484D; }
.dd-j .x { flex: 1; line-height: 1.4; }
.dd-j .jstar2 { margin-top: 2px; width: 19px; flex-shrink: 0; display: flex; }

/* Mountain: two by two squares */
.mt-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt-card { aspect-ratio: 1 / 1; padding: 16px 14px 14px; gap: 7px; align-items: stretch; justify-content: flex-start; border-radius: 26px; min-width: 0; overflow: hidden; }
.mq-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--c); }
.mq-name i { width: 8px; height: 8px; border-radius: 4px; background: var(--c); }
.mq-theme { font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mq-theme.ph { color: #C7C0B2; font-weight: 600; }
.mq-md, .mq-base { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.25; color: var(--mute); min-width: 0; }
.mq-md svg, .mq-base svg { flex-shrink: 0; margin-top: 0; }
.mq-md span, .mq-base span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.mq-md { color: var(--ink); font-weight: 600; margin-top: auto; }
.mq-md.hit span { color: var(--c); }
.mq-md.miss span { color: var(--faint); text-decoration: line-through; }
.mq-bar { display: block; height: 4px; border-radius: 2px; background: rgba(110, 90, 50, 0.1); overflow: hidden; flex-shrink: 0; }
.mq-bar i { display: block; height: 100%; border-radius: 2px; background: var(--c); transition: width 0.8s var(--ease); }

/* Profile */
textarea.field.ta { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.4; resize: none; font-family: inherit; }
.tab { width: 64px; }
#tabs { padding-left: 20px; padding-right: 20px; }
.pf-id { display: flex; align-items: center; gap: 14px; border: 0; background: transparent; text-align: left; padding: 4px 0 2px; }
.pf-id .av { width: 64px; height: 64px; border-radius: 32px; background: var(--ink); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px -8px rgba(17, 17, 19, 0.4); flex-shrink: 0; }
.pf-id .who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-id .who b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.pf-id .who em { font-style: normal; font-size: 14px; color: var(--mute); line-height: 1.35; }
.pf-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; padding: 13px 2px; }
.pf-row:first-of-type { border-top: 0; }
.pf-row .no { width: 24px; height: 24px; border-radius: 12px; background: var(--soft); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: -1px; }
.pf-row .tx { font-size: 15px; font-weight: 500; line-height: 1.4; }
.pf-val { display: flex; flex-direction: column; gap: 2px; width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; padding: 12px 2px; }
.pf-val:first-of-type { border-top: 0; }
.pf-val b { font-size: 16px; font-weight: 700; }
.pf-val span { font-size: 13px; color: var(--mute); line-height: 1.35; }
.pf-skills { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pf-skill { display: flex; flex-direction: column; gap: 9px; width: 100%; border: 0; text-align: left; padding: 14px; border-radius: 20px; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 10%, #fff) 0%, #fff 70%); box-shadow: var(--pop-shadow); }
.pf-skill .top { display: flex; align-items: center; gap: 10px; }
.pf-skill .d { width: 9px; height: 9px; border-radius: 5px; background: var(--c); flex-shrink: 0; }
.pf-skill b { flex: 1; font-size: 16px; font-weight: 700; }
.pf-skill em { font-style: normal; font-size: 12px; color: var(--mute); }
.pf-skill .mo { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.pf-skill .mo i { height: 6px; border-radius: 3px; background: rgba(110, 90, 50, 0.12); }
.pf-skill .mo i.on { background: var(--c); }
.pf-skill .lt { font-size: 12.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mv { display: flex; align-items: flex-start; gap: 12px; border-top: 1px solid var(--line); padding: 10px 0 10px 2px; }
.pf-mv .dt { width: 52px; font-size: 12.5px; font-weight: 600; color: var(--mute); padding-top: 2px; flex-shrink: 0; }
.pf-mv .tx { flex: 1; font-size: 14px; line-height: 1.4; }
.pf-mv button { width: 36px; height: 36px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; margin-top: -6px; }
.pg { padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pg + .pg { border-top: 1px solid var(--line); margin-top: 14px; }
.pg-h { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; font-weight: 600; }
.pg-h b { font-size: 22px; font-weight: 700; }
.mg { display: flex; flex-direction: column; gap: 6px; }
.mg-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.mg-row i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(110, 90, 50, 0.15); }
.mg-row i.on { background: var(--c); box-shadow: 0 4px 10px -3px var(--c); }
.mg-m { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; font-size: 10px; color: var(--faint); text-align: center; }
.bs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bs .b { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 16px; background: color-mix(in srgb, var(--c) 10%, #fff); }
.bs .b b { font-size: 26px; font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
.bs .b span { font-size: 11px; color: var(--mute); }
.wl { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.wl > i { width: 9px; height: 9px; border-radius: 5px; flex-shrink: 0; }
.wl .bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wl .bars .w, .wl .bars .l { display: block; height: 6px; border-radius: 3px; min-width: 3px; }
.wl .bars .w { background: #2FA36B; }
.wl .bars .l { background: #E5484D; }
.wl .n { width: 22px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.wl .n.w { color: #2FA36B; }
.wl .n.l { color: #E5484D; }
.hb { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.hb .n { width: 78px; font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(110, 90, 50, 0.08); overflow: hidden; }
.hb .bar i { display: block; height: 100%; border-radius: 4px; }
.hb b { width: 44px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---- CALENDAR ZOOM: year, month ---- */
.pl-month.up { display: inline-flex; align-items: center; gap: 2px; background: none; border: 0; padding: 8px 8px 8px 0; font: inherit; font-size: 13px; color: var(--mute); cursor: pointer; }
.pl-month.up svg { stroke: var(--mute); }
button.pl-title.up { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; text-align: left; cursor: pointer; font-size: 28px; }
.pl.zin { animation: zin 0.42s var(--spring); }
.pl.zout { animation: zout 0.42s var(--spring); }
@keyframes zin { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes zout { from { opacity: 0; transform: scale(1.16); } to { opacity: 1; transform: none; } }
.py-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.py-m { background: #fff; border: 0; border-radius: 18px; padding: 12px 12px 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: var(--card-shadow); transition: transform 0.2s var(--spring); }
.py-m:active { transform: scale(0.96); }
.py-m b { font-size: 14px; font-weight: 700; display: block; margin-bottom: 6px; }
.py-m.cur b { color: #E5484D; }
.py-g { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; font-size: 8.5px; text-align: center; color: var(--mute); }
.py-g span, .py-g i { height: 12px; line-height: 12px; }
.py-g span.has { color: #111113; font-weight: 700; }
.py-g span.tdy { background: #E5484D; color: #fff; border-radius: 50%; font-weight: 700; }
.pm-h, .pm-r { display: grid; grid-template-columns: repeat(7, 1fr) 28px; }
.pm-h { margin-top: 14px; font-size: 11px; color: var(--mute); text-align: center; padding-bottom: 6px; }
.pm-b { display: flex; flex-direction: column; gap: 4px; }
.pm-d { background: none; border: 0; font: inherit; color: inherit; height: 64px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; padding-top: 8px; gap: 5px; cursor: pointer; transition: background 0.2s, transform 0.2s var(--spring); }
.pm-d:active { transform: scale(0.92); }
.pm-d.out { opacity: 0.28; }
.pm-d .n { font-size: 16px; font-weight: 600; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; }
.pm-d.tdy .n { background: #E5484D; color: #fff; }
.pm-d.sel:not(.tdy) { background: rgba(17, 17, 19, 0.06); }
.pm-d .dt { display: flex; gap: 3px; height: 5px; }
.pm-d .dt i { width: 5px; height: 5px; border-radius: 50%; }
.pm-w { background: none; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; }
.pm-w:active { background: rgba(17, 17, 19, 0.06); }
@media (prefers-reduced-motion: reduce) { .pl.zin, .pl.zout { animation: none; } }

/* ---- streak history ---- */
.hs-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
.hc { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 18px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; background: var(--soft); color: #111113; }
.hc i { width: 8px; height: 8px; border-radius: 50%; }
.hc.on i { background: #fff !important; }
.hs-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 6px 0 14px; }
.hs-stats b { display: block; font-size: 26px; font-weight: 700; }
.hs-stats span { font-size: 12px; color: var(--mute); }
.hs-mo { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.hs-mo button { width: 44px; height: 44px; border: 0; background: none; display: flex; align-items: center; justify-content: center; }
.hs-wd, .hs-g { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.hs-wd { font-size: 11px; color: var(--mute); padding-bottom: 6px; }
.hs-g { gap: 6px 0; padding-bottom: 12px; }
.hd { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; border: 0; background: var(--soft); font: inherit; font-size: 14px; font-weight: 600; color: #111113; transition: transform 0.2s var(--spring); }
.hd:active { transform: scale(0.88); }
.hd.tdy:not(.on) { box-shadow: inset 0 0 0 2px #E5484D; }
.hd:disabled { opacity: 0.3; }

/* ---- procrastinating ---- */
.pcs { display: flex; flex-direction: column; gap: 8px; }
.pc { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 6px 14px 6px 8px; box-shadow: var(--card-shadow); }
.pc .tk { flex: none; width: 28px; height: 28px; margin: 8px; border-radius: 50%; border: 2px solid; background: transparent; display: flex; align-items: center; justify-content: center; transition: transform 0.2s var(--spring); }
.pc .tk:active { transform: scale(0.84); }
.pc .tx { flex: 1; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; text-align: left; color: #111113; padding: 10px 0; }
.pc em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--mute); background: var(--soft); border-radius: 10px; padding: 3px 8px; }
.pc.done .tx { text-decoration: line-through; color: var(--mute); font-weight: 500; }

/* ---- Track ---- */
.tk-go { margin-top: 16px; height: 52px; padding: 0 28px; border: 0; border-radius: 26px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 600; box-shadow: 0 10px 24px -10px rgba(17, 17, 19, 0.5); transition: transform 0.2s var(--spring); }
.tk-go:active { transform: scale(0.94); }
.tk-in { animation: fade 0.26s ease; }
.tk-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.tk-row { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--card-shadow); font: inherit; color: inherit; text-align: left; transition: transform 0.2s var(--spring); }
button.tk-row:active { transform: scale(0.97); }
.tk-row b { flex: 1; font-size: 16px; font-weight: 600; }
.tk-row em { font-style: normal; font-size: 13px; color: var(--mute); }
.tk-row .dot, .tk-sub .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.tk-row.ed { padding: 0 8px 0 16px; }
.tk-nm { flex: 1; display: flex; align-items: center; gap: 12px; border: 0; background: none; font: inherit; height: 100%; text-align: left; }
.tk-nm b { font-size: 16px; font-weight: 600; }
.tk-mv { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.tk-mv:disabled { opacity: 0.3; }
.sh-nav .nv.r { text-align: right; justify-self: end; color: #E5603F; font-weight: 600; }
.sh-nav .nv.bk { display: flex; align-items: center; }
.tk-sub { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; min-height: 24px; }
.tk-since { width: 100%; display: flex; align-items: center; gap: 14px; border: 0; border-radius: 22px; padding: 14px 16px; background: var(--ink); color: #fff; font: inherit; text-align: left; margin-top: 4px; }
.tk-since .ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; }
.tk-since b { display: block; font-size: 22px; font-weight: 700; }
.tk-since small { font-size: 12px; opacity: 0.7; }
.tk-man { width: 100%; height: 56px; margin-top: 10px; border: 0; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.16); font: inherit; font-size: 16px; font-weight: 600; }
.tk-hm { margin: 16px 0; justify-content: center; }
.dd-h { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.dd-goal { font-size: 12px; color: var(--mute); margin: 2px 0 8px 22px; }
.dd-goal.met { color: var(--green); }
.tk-in .cta { width: 100%; margin-top: 14px; }
.tk-in .lg-tag { margin-top: 14px; }

/* =====================================================================
   PROFILE: every category is a closed card until you press it
   ===================================================================== */
#app > section.acc { padding: 0; }
.acc-h { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 16px; border: 0; background: transparent; text-align: left; font: inherit; color: #111113; }
.acc-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.acc-tt { flex: 1; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.acc-cv { display: flex; transition: transform 0.35s var(--ease); }
.acc.open .acc-cv { transform: rotate(90deg); }
.acc-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.35s var(--ease), visibility 0s 0.35s; }
.acc.open .acc-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.35s var(--ease), visibility 0s; }
.acc-in { overflow: hidden; min-height: 0; }
.acc-pad { padding: 2px 16px 16px; }
.pf-row .no.dot { width: 24px; background: transparent; }
.pf-row .no.dot::after { content: ''; width: 7px; height: 7px; border-radius: 4px; background: #111113; }
.pf-new { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 10px; border: 1.5px dashed #E3DCCD; border-radius: 16px; background: transparent; }
.acc-pad > .pf-new:first-child { margin-top: 0; }
.pf-stmt { display: block; width: 100%; border: 0; background: transparent; padding: 4px 2px; text-align: left; font: inherit; font-size: 16px; line-height: 1.5; font-weight: 500; color: #111113; white-space: pre-wrap; }
.pf-year { text-align: right; font-size: 12px; color: var(--mute); }
.pf-up { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; border-radius: 22px; background: var(--soft); font-size: 15px; font-weight: 600; color: #111113; }

/* people: five slots per tab */
.pf-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 12px; }
.pf-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 52px; padding: 0 2px; border: 0; border-radius: 16px; background: var(--soft); font-size: 12px; font-weight: 650; color: #111113; }
.pf-tab i { width: 8px; height: 8px; border-radius: 4px; background: var(--c); }
.pf-tab.on { background: var(--c); color: #fff; }
.pf-tab.on i { background: #fff; }
.pf-pps { display: flex; flex-direction: column; gap: 8px; }
.pf-pp { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 14px 8px 10px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--pop-shadow); text-align: left; font: inherit; color: #111113; }
.pf-pp .rk { width: 18px; font-size: 12px; font-weight: 700; color: var(--mute); text-align: center; flex-shrink: 0; }
.pf-pp .av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.pf-pp .nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-pp .nm b { font-size: 16px; font-weight: 650; }
.pf-pp .nm em { font-style: normal; font-size: 12.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-pp.vac { background: transparent; box-shadow: none; border: 1.5px dashed #E3DCCD; }
.pf-pp.vac .av { background: transparent; }
@media (prefers-reduced-motion: reduce) { .acc-body, .acc-cv { transition: none; } }

/* ---- profile v3: north star, branches, pills, tiles, faces ---- */
.pf-card { background: #fff; border: 0; border-radius: 26px; box-shadow: var(--card-shadow); text-align: left; font: inherit; color: #111113; width: 100%; }
.pf-card .pf-hd { display: flex; align-items: center; gap: 8px; }
.pf-card .pf-hd b { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.pf-card .plus { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 36px; border: 1.5px dashed #E3DCCD; border-radius: 16px; }
.pf-hero { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 22px; background: linear-gradient(155deg, #fff 45%, color-mix(in srgb, var(--glow, #FFE6CC) 60%, #fff)); }
.pf-hero .big { font-size: 23px; line-height: 1.3; font-weight: 650; letter-spacing: -0.02em; white-space: pre-wrap; }
.pf-hero .plus { min-height: 56px; }
.pf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-duo-c { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; min-height: 124px; }
.pf-duo-c .sm { font-size: 14.5px; line-height: 1.4; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pf-vals { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pf-vals .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-pill { height: 38px; padding: 0 16px; border: 0; border-radius: 19px; background: var(--soft); font-size: 15px; font-weight: 600; color: #111113; }
.pf-pill.add { width: 38px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px dashed #E3DCCD; }
.pf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 104px; }
.pf-tile .ic2 { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.pf-tile b { font-size: 16px; font-weight: 650; }
.pf-tile em { position: absolute; top: 16px; right: 16px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--mute); }
.pf-people { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pf-people .pf-tabs { margin-bottom: 0; }
.pf-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pf-face { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; min-width: 0; font: inherit; color: #111113; }
.pf-face .av { width: 100%; max-width: 56px; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.pf-face .n { max-width: 100%; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-face.vac .av { background: transparent; border: 1.5px dashed #E3DCCD; }
.pf-face.vac .n { color: var(--mute); }
.pf-list { display: flex; flex-direction: column; max-height: 60dvh; overflow-y: auto; }
.pf-duo-c { position: relative; }
.pf-duo-c em { position: absolute; top: 16px; right: 14px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--mute); }
.pf-tabs.two { grid-template-columns: 1fr 1fr; }
.acc-pad > .pf-tabs.two { margin-bottom: 12px; }
.pf-lg { display: flex; align-items: flex-start; gap: 12px; width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; padding: 13px 2px; font: inherit; color: #111113; }
.pf-lg:first-child { border-top: 0; }
.pf-lg .dt { width: 52px; font-size: 12.5px; font-weight: 600; color: var(--mute); padding-top: 2px; flex-shrink: 0; }
.pf-lg .tx { flex: 1; font-size: 15px; font-weight: 500; line-height: 1.4; }
.pf-tabs.three { grid-template-columns: repeat(3, 1fr); margin: 4px 0 6px; }

/* ---- calendar v2: calm colours, named blocks, no header overlap ---- */
.pl-title-row { align-items: center; margin-top: 6px; }
.pl-top { min-height: 40px; }
.pl-nav button { height: 40px; }
.pl-nav .today { height: 36px; }
.pw-cell { position: relative; overflow: hidden; }
.pw-b { position: absolute; left: 1px; right: 1px; box-sizing: border-box; margin-top: 0.5px; border-radius: 4px; overflow: hidden; pointer-events: none;
  background: color-mix(in srgb, var(--c) 22%, #fff); border-left: 2.5px solid color-mix(in srgb, var(--c) 70%, #fff); }
.pw-b span { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; padding: 1px 2px 0 2px; text-align: left;
  font-size: 8.5px; line-height: 1.12; font-weight: 650; letter-spacing: -0.01em; word-break: break-word; color: color-mix(in srgb, var(--c) 52%, #1c1c1e); }
.pl-title-row .pl-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 28px; }
.pw-b span { font-size: 8px; letter-spacing: -0.02em; padding: 1px 1px 0 2px; word-break: normal; overflow-wrap: break-word; hyphens: manual; }
.pw-b span.one { display: block; white-space: nowrap; text-overflow: ellipsis; }

/* =====================================================================
   MUHASABA
   ===================================================================== */
.mh-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 10px 14px 10px 12px; border: 0; border-radius: 22px; background: #fff; box-shadow: var(--card-shadow); text-align: left; font: inherit; color: #111113; }
.mh-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mh-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mh-mid b { font-size: 16px; font-weight: 650; }
.mh-mid span { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #111113; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mh-top { display: flex; align-items: center; gap: 12px; }
.mh-title { flex: 1; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.mh-sum { display: flex; align-items: center; gap: 12px; }
.mh-fl { display: flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 700; }
.mh-ring { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }
.mh-ring svg { position: absolute; inset: 0; fill: none; }
.mh-ring b { font-size: 12px; font-weight: 700; }
.acc-meta { display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--mute); margin-right: 2px; }
.mh-due { display: inline-block; width: 7px; height: 7px; border-radius: 4px; background: #E5484D; margin-left: 8px; vertical-align: middle; }
.mh-q { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 8px 0; }
.mh-q:first-child { border-top: 0; }
.mh-qt { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; border: 0; background: transparent; padding: 6px 0; text-align: left; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.35; color: #111113; }
.mh-qt i { width: 7px; height: 7px; border-radius: 4px; margin-top: 7px; flex-shrink: 0; }
.mh-yn { display: flex; gap: 8px; flex-shrink: 0; }
.yn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.yn.yes.on { background: #111113; }
.yn.no.on { background: #8E8E93; }
.mh-addq { margin-top: 2px; }
.mh-p { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 6px 0; }
.mh-p:first-child { border-top: 0; }
.mh-p .tk { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid; background: transparent; display: flex; align-items: center; justify-content: center; margin: 4px; }
.mh-p .tx { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
.mh-p .tx.done { color: var(--mute); text-decoration: line-through; }
.mh-chip { height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--soft); font-size: 13px; font-weight: 600; color: #111113; flex-shrink: 0; }
.mh-chip.on { background: #111113; color: #fff; }
.mh-empty { padding: 6px 2px; color: var(--mute); font-size: 14px; }
.mh-f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mh-f .lb { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.mh-f .lb svg { stroke: var(--mute) !important; }
.acc-pad > .cta { width: 100%; }

/* ---- subtasks inside a block ---- */
.pl-item .sbc { height: 26px; min-width: 38px; padding: 0 9px; border: 0; border-radius: 13px; background: #fff; box-shadow: var(--pop-shadow); font-size: 12px; font-weight: 700; color: #111113; flex-shrink: 0; margin-right: 6px; }
.pl-subs { background: var(--soft); padding: 0 16px 8px 52px; display: flex; flex-direction: column; }
.pl-sub { display: flex; align-items: center; gap: 4px; min-height: 36px; }
.pl-sub .sk, .sb-row .sk { width: 32px; height: 32px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: -6px; }
.r2 { width: 18px; height: 18px; border-radius: 9px; box-sizing: border-box; border: 1.6px solid; display: flex; align-items: center; justify-content: center; }
.pl-sub .st { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; text-align: left; font: inherit; font-size: 14px; color: #111113; padding: 6px 0; }
.pl-sub .st span.done { color: var(--faint); text-decoration: line-through; }
.pl-sub .st i, .sb-td { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--mute); background: #fff; border-radius: 8px; padding: 2px 6px; }
.pl-sub .sm { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.sb-row { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding: 4px 0; }
.sb-row:first-child { border-top: 0; }
.sb-t { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 500; color: #111113; }
.sb-m { width: 44px; height: 36px; border: 0; border-radius: 10px; background: var(--soft); text-align: center; font: inherit; font-size: 15px; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.sb-m::-webkit-outer-spin-button, .sb-m::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb-u { font-size: 13px; color: var(--mute); }
.sb-x { width: 36px; height: 36px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.soft-btn .sb-n { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 700; color: var(--mute); }

/* ---- life map: pillars in priority order, each with its sub-categories ---- */
.pf-life { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.lf-row { position: relative; padding-left: 14px; display: flex; flex-direction: column; gap: 8px; }
.lf-row::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--c); }
.lf-head { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0; border: 0; background: transparent; font: inherit; color: #111113; text-align: left; }
.lf-head .rk { width: 26px; height: 26px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); font-size: 14px; font-weight: 750; }
.lf-head b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.lf-subs { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-sub { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px; border: 0; border-radius: 18px; background: var(--soft); font: inherit; font-size: 15px; font-weight: 600; color: #111113; }
.lf-sub i { font-style: normal; width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; font-size: 12px; font-weight: 700; color: var(--mute); }
.lf-sub.add { width: 36px; padding: 0; justify-content: center; background: transparent; border: 1.5px dashed #E3DCCD; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }

/* ---- horizons: one line per pillar, for each horizon ---- */
.pf-hz { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pf-tabs.four { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.hz-tabs .pf-tab { height: 40px; flex-direction: row; }
.hz-list { display: flex; flex-direction: column; gap: 12px; }
.hz-row { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 2px 0 2px 14px; border: 0; background: transparent; font: inherit; color: #111113; text-align: left; }
.hz-row::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--c); }
.hz-name { font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); }
.hz-tx { font-size: 15.5px; line-height: 1.4; font-weight: 500; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.hz-plus { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 30px; border: 1.5px dashed #E3DCCD; border-radius: 14px; }
.lf-head { height: auto; min-height: 32px; }
.lf-head .tt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.lf-fut { font-style: normal; font-size: 13px; font-weight: 500; color: var(--mute); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-head.sec { margin-top: 6px; }
.m-head.sec h2 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }

/* ---- pillars: openable sub-categories, any depth ---- */
.lf-list { display: flex; flex-direction: column; gap: 6px; }
.nd-r { display: flex; align-items: center; gap: 2px; }
.nd-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 4px; border: 0; border-radius: 12px; background: transparent; font: inherit; color: #111113; text-align: left; }
.nd[data-d="1"] > .nd-r .nd-t { height: 44px; padding-left: 10px; border-radius: 15px; background: var(--soft); }
.nd-no { flex: none; width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #fff; font-style: normal; font-size: 12px; font-weight: 700; color: var(--mute); }
.nd-dot { flex: none; width: 6px; height: 6px; margin: 0 8px; border-radius: 3px; background: var(--c); }
.nd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 600; }
.nd-ct { font-style: normal; font-size: 13px; font-weight: 700; color: var(--mute); }
.nd-cv { display: flex; transition: transform 0.2s ease; }
.nd.open > .nd-r .nd-cv { transform: rotate(90deg); }
.nd-e { flex: none; width: 38px; height: 38px; border: 0; border-radius: 19px; background: transparent; display: flex; align-items: center; justify-content: center; }
.nd-kids { margin: 2px 0 4px 20px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--c) 28%, #fff); display: flex; flex-direction: column; gap: 2px; }
.nd-add { height: 34px; margin: 2px 0; border: 1.5px dashed #E3DCCD; border-radius: 12px; background: transparent; display: flex; align-items: center; justify-content: center; }
.pf-tiles.three { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pf-tiles.three .pf-tile { padding: 12px; }
.pf-tiles.three .pf-tile b { font-size: 15px; }
.pf-tiles.three .pf-tile em { top: 12px; right: 12px; }

/* ---- pillars: the year view of the Mountain ---- */
.my-tots { display: flex; gap: 10px; padding-bottom: 4px; }
.my-t { display: flex; align-items: center; gap: 4px; }
.my-t b { font-size: 14px; font-weight: 700; color: var(--c); }
.my-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.my-m { display: flex; flex-direction: column; gap: 6px; padding: 12px; min-width: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow); font: inherit; color: #111113; text-align: left; }
.my-m.cur { box-shadow: 0 0 0 2px #111113, var(--card-shadow); }
.my-m > b { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.my-r { display: flex; align-items: center; gap: 6px; min-width: 0; height: 18px; }
.my-r > i { flex: none; width: 6px; height: 6px; border-radius: 3px; background: var(--c); }
.my-r .th { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; }
.my-r .th.ph { background: #F1ECE2; height: 6px; border-radius: 3px; }
.my-pk { flex: none; width: 14px; height: 14px; display: flex; }
.my-pk.miss { opacity: 0.45; }

/* ---- pillars: 2 x 2 tiles; the full tree lives in a sheet ---- */
.pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 124px; padding: 14px; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--card-shadow); font: inherit; color: #111113; text-align: left; }
.pt-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-n { font-size: 16px; font-weight: 700; color: var(--c); }
.pt .rk, .sh-title .rk { flex: none; width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); font-size: 13px; font-weight: 750; }
.sh-title .rk.big { width: 34px; height: 34px; border-radius: 17px; font-size: 16px; margin-right: 12px; }
.pt-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pt-s { font-size: 13.5px; font-weight: 550; color: #3A3A3F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-more { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.pt-plus { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 54px; border: 1.5px dashed #E3DCCD; border-radius: 14px; }
.pd-tree { display: flex; flex-direction: column; gap: 6px; }
.pd-rank { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd-rank.one { grid-template-columns: 1fr; }
.pd-rank .pf-up { height: 40px; }
.m-head.sec { margin-top: 10px; }

.pl-mt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mute); }
.pl.mp { margin-top: 4px; }

/* Review, backups, streak sub-categories */
.m-head .rv-open { height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: var(--soft); font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.nd-sk { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; }
.sub-l { margin: 14px 0 8px; }
.pf-bk { width: 100%; margin: 18px 0 8px; justify-content: center; color: var(--mute); }
.bk-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.bk-r b { font-size: 16px; font-weight: 600; display: block; }
.bk-r em { font-size: 13px; font-style: normal; color: var(--mute); }
.bk-r .pf-up { padding: 0 18px; }
#bk-now { margin-top: 12px; }
#bk-all { margin-top: 8px; justify-content: center; }

.rv-top { display: flex; align-items: center; gap: 12px; }
.rv-top h1 { margin: 0; flex: 1; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.rv-seg { margin: 16px 0 4px; }
.rv-nav { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 4px; }
.rv-nav .lbl { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.rv-nav button { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.rv-nav button:disabled { opacity: 0.3; }
.rv-big { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 2px; }
.rv-big b { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; }
.rv-big span { font-size: 15px; color: var(--mute); }
.rv-d { font-size: 14px; font-weight: 600; }
.rv-d.up { color: #2FA36B; } .rv-d.dwn { color: #E5484D; } .rv-d.eq { color: var(--mute); }
.rv-p { margin-top: 14px; padding: 14px 16px; border-radius: 20px; background: var(--soft); }
.rv-ph { display: flex; align-items: center; gap: 10px; }
.rv-ph i { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.rv-ph b { font-size: 17px; font-weight: 600; flex: 1; }
.rv-ph span { font-size: 14px; color: var(--mute); }
.rv-sg { margin: 12px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.rv-s { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; }
.rv-s .nm { width: 38%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rv-s .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(17, 17, 19, 0.08); overflow: hidden; }
.rv-s .bar span { display: block; height: 100%; border-radius: 4px; }
.rv-s .n { width: 44px; text-align: right; font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rv-h { margin: 22px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.rv-t { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; }
.rv-t i { width: 8px; height: 8px; border-radius: 4px; }
.rv-t b { flex: 1; font-weight: 500; }
.rv-t span { font-variant-numeric: tabular-nums; }
.rv-hl { padding: 8px 0; font-size: 15px; line-height: 1.4; }
.rv-hl em { font-style: normal; color: var(--mute); font-size: 13px; margin-right: 8px; }
.rv-m { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(17, 17, 19, 0.08); }
.rv-m .lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); margin: 0 0 8px; }
.rv-res { display: flex; gap: 8px; margin-bottom: 12px; }
.rv-res button { flex: 1; height: 40px; border: 0; border-radius: 20px; background: #fff; font-size: 14px; font-weight: 600; }
.rv-res button.on { color: #fff; }
.rv-empty { padding: 30px 0; text-align: center; color: var(--mute); font-size: 15px; }

/* Goals */
.gl { margin: 18px 0 6px; }
.gl-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.gl-plus { width: 36px; height: 36px; border: 0; border-radius: 18px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.gl-r { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t ch" "b b"; gap: 8px 10px; align-items: center; width: 100%; text-align: left; border: 0; background: var(--soft); border-radius: 18px; padding: 12px 14px; margin-bottom: 8px; color: var(--ink); }
.gl-t { grid-area: t; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gl-t b { font-size: 16px; font-weight: 600; line-height: 1.25; }
.gl-t em { font-style: normal; font-size: 12px; color: var(--mute); }
.gl-ch { grid-area: ch; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; background: #fff; white-space: nowrap; }
.gl-ch.up, .gl-ch.ahead, .gl-ch.done { color: #2FA36B; } .gl-ch.behind { color: #E5484D; } .gl-ch.on, .gl-ch.later, .gl-ch.plan { color: var(--mute); }
.gl-bar { grid-area: b; position: relative; height: 8px; border-radius: 4px; background: rgba(17, 17, 19, 0.08); }
.gl-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--c); }
.gl-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: 0.55; border-radius: 1px; text-decoration: none; }
.gl-empty { width: 100%; height: 56px; border: 1.5px dashed rgba(17, 17, 19, 0.2); border-radius: 18px; background: transparent; font-size: 15px; font-weight: 600; color: var(--mute); }
.rv-goals .gl-r { background: var(--soft); }

.gd-sec { margin: 18px 0 8px; }
.gd-big { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.gd-big b { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; }
.gd-big span { font-size: 15px; color: var(--mute); }
.gd-bar { height: 10px; border-radius: 5px; background: rgba(17, 17, 19, 0.08); overflow: hidden; margin: 4px 0 8px; }
.gd-bar i { display: block; height: 100%; background: var(--ink); border-radius: 5px; }
.gd-note { font-size: 14px; font-weight: 500; color: var(--mute); }
.gd-note.ahead, .gd-note.done { color: #2FA36B; } .gd-note.behind { color: #E5484D; }
.gd-log { display: flex; gap: 8px; margin-top: 14px; }
.gd-log .field { flex: 1; min-width: 0; }
.gd-log .pf-up { padding: 0 22px; }
.gd-pace { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gd-pace > div { background: var(--soft); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.gd-pace b { font-size: 20px; font-weight: 600; } .gd-pace span { font-size: 11px; color: var(--mute); }
.gd-cp { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; }
.gd-cp .gd-m { width: 18px; display: flex; justify-content: center; }
.gd-dotf { width: 6px; height: 6px; border-radius: 3px; background: #C8C8CE; display: inline-block; }
.gd-cp .gd-d { flex: 1; color: var(--mute); }
.gd-cp.past .gd-d { color: var(--ink); }
.gd-in { width: 92px; height: 38px; border: 0; border-radius: 12px; background: var(--soft); text-align: right; padding: 0 12px; font-size: 16px; font-weight: 600; }
.gd-v { font-size: 16px; padding-right: 12px; }
.gd-rs { width: 28px; height: 28px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.gd-st { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.gd-tk { width: 26px; height: 26px; border-radius: 13px; border: 2px solid #C8C8CE; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.gd-tk.on { background: var(--ink); border-color: var(--ink); }
.gd-sn { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 16px; color: var(--ink); }
.gd-sn em { font-style: normal; font-size: 13px; color: var(--mute); white-space: nowrap; } .gd-sn em.late { color: #E5484D; }
.gd-st.done .gd-sn span { text-decoration: line-through; color: var(--mute); }
.gd-back { width: 100%; margin-top: 10px; display: flex; align-items: center; gap: 12px; text-align: left; border: 1.5px dashed rgba(17, 17, 19, 0.22); background: transparent; border-radius: 16px; padding: 12px 14px; color: var(--ink); }
.gd-back b { display: block; font-size: 14px; font-weight: 600; } .gd-back em { font-style: normal; font-size: 14px; color: var(--mute); }
.gd-cnt { font-style: normal; font-size: 12px; opacity: 0.7; margin-left: 6px; }
.gd-hint { margin-top: 8px; }
.gd-why { font-size: 15px; line-height: 1.45; }
.gd-acts { margin-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.gf-kind { margin: 14px 0 10px; }
.gf-prev { min-height: 16px; margin: 6px 0 2px; }
.mt-hint { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; margin-top: 6px; border: 0; background: var(--soft); border-radius: 12px; padding: 8px 12px; text-align: left; color: var(--ink); }
.mt-hint span { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.mt-hint em { font-style: normal; font-size: 14px; }

/* Goal actions on Home, names and checklists */
.ga { margin-top: 22px; }
.ga-r { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--soft); margin-bottom: 8px; }
.ga-ck { width: 34px; height: 34px; border-radius: 17px; border: 2.5px solid var(--c); background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.ga-ck.on { background: var(--c); }
.ga-t { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 0; color: var(--ink); display: flex; flex-direction: column; gap: 1px; }
.ga-t b { font-size: 16px; font-weight: 600; line-height: 1.25; }
.ga-t em { font-style: normal; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-w { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.ga-w i { width: 7px; height: 7px; border-radius: 4px; background: rgba(17, 17, 19, 0.14); }
.ga-w i.on { background: var(--c); } .ga-w i.td { box-shadow: 0 0 0 1.5px var(--ink); }
.ga-w b { font-size: 12px; font-weight: 600; margin-left: 6px; color: var(--mute); font-variant-numeric: tabular-nums; }
.gl-now { color: var(--ink) !important; font-weight: 500; }
.rv-act { margin: -2px 4px 10px; padding: 0 10px; font-size: 13px; line-height: 1.45; color: var(--mute); }
.rv-act b { color: var(--ink); font-weight: 600; margin-right: 4px; }

.gd-add { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.gd-addbtn { height: 48px; border-radius: 24px; font-size: 16px; }
.gd-en { margin-top: 10px; }
.gd-e { width: 100%; display: flex; justify-content: space-between; gap: 12px; text-align: left; border: 0; background: transparent; padding: 9px 0; border-bottom: 1px solid rgba(17, 17, 19, 0.07); color: var(--ink); }
.gd-e span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-e b { font-size: 16px; font-weight: 600; } .gd-e em { font-style: normal; font-size: 13px; color: var(--mute); }
.gd-e i { font-style: normal; font-size: 12px; color: var(--mute); white-space: nowrap; padding-top: 3px; }
.gd-il { display: flex; flex-direction: column; }
.gd-i { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 9px 0; border-bottom: 1px solid rgba(17, 17, 19, 0.07); text-align: left; font-size: 16px; color: var(--ink); }
.gd-i span { flex: 1; font-weight: 500; }
.gd-i em { font-style: normal; font-size: 12px; color: var(--mute); }
.gd-id { width: 12px; height: 12px; border-radius: 6px; border: 2px solid #C8C8CE; flex-shrink: 0; }
.gd-i.solid .gd-id { background: var(--ink); border-color: var(--ink); }
.gd-i.shaky .gd-id { background: #F5A524; border-color: #F5A524; }
.gd-i:not(.solid) span { color: var(--mute); }
.it-solid.on { background: var(--ink); color: #fff; }
.it-rv { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; }
.it-rv b { font-weight: 600; } .it-rv b.shaky { color: #D98A0B; } .it-rv b.solid { color: #2FA36B; }
.gd-ac { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.gd-ac.now .gd-sn span { font-weight: 600; }
.gd-ac.done .gd-sn span { text-decoration: line-through; color: var(--mute); }
.gd-ac:not(.now):not(.done) .gd-sn span { color: #55555B; }
.gd-no { display: inline-flex; width: 20px; height: 20px; border-radius: 10px; background: rgba(17, 17, 19, 0.08); align-items: center; justify-content: center; font-size: 11px; font-weight: 600; margin-right: 8px; vertical-align: 1px; }
.gd-no.rp { font-size: 13px; }
.gd-sn small { display: block; font-size: 12px; color: var(--mute); margin-top: 1px; }
.gd-sn span small.gd-no { display: inline-flex; margin-top: 0; color: var(--ink); }
.gd-mv { display: flex; gap: 8px; margin-top: 10px; } .gd-mv .pf-up { flex: 1; }
.gl-sub { margin-top: 14px; }
.gl-r.lt { grid-template-areas: "t ch"; background: transparent; border: 1.5px dashed rgba(17, 17, 19, 0.2); }
.gl-r.lt .gl-ch { background: var(--soft); color: var(--ink); }
.gf-later { width: 100%; justify-content: center; margin-top: 8px; }
.gf-fc { margin-top: 8px; }
.gf-fc .chip { height: 34px; font-size: 13px; }

/* ---- motion polish (2026-10-24): press, sheet, key numbers. Rings and bars are driven by js/fx.js ---- */
:root { --out: cubic-bezier(0.22, 1, 0.36, 1); }
button { transition: transform 0.12s var(--out), background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), opacity 0.3s var(--ease); }
button:not(.fg):not(.backdrop):not(.pw-cell):not(.pl-sec):active { transform: scale(0.97); }
.pl-sec:active, .mt-card:active, .gl-r:active, a:active, [role="button"]:active { transform: scale(0.97); }
.pl-sec, .mt-card, .gl-r, a, [role="button"] { transition: transform 0.12s var(--out); }
.py-m, .pm-d, .hd, .tk-go, .tk-row, .circle, .pc .tk { transition: transform 0.12s var(--out), background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.py-m:active, button.tk-row:active, .tk-go:active { transform: scale(0.97); }
.pm-d:active, .hd:active, .circle:active, .pc .tk:active { transform: scale(0.94); }
.tab:active { transform: scale(0.97); }

@keyframes sheetUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.sheet { animation: sheetUp 0.3s var(--out) both; }
.backdrop { animation: fade 0.3s ease; }

@keyframes numIn { from { opacity: 0.4; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.fx-pop { animation: numIn 0.32s var(--out) both; }

@media (prefers-reduced-motion: reduce) {
  .sheet, .backdrop, .fx-pop { animation: none; }
  button, .pl-sec, .mt-card, .gl-r, a { transition: none; }
}

/* ---- calendar rows: quiet; focus line + goal actions inside a block ---- */
.pl-sec .rt .sub { font-size: 13px; color: var(--mute); }
.pl-ga { display: flex; align-items: center; gap: 10px; background: #fff; padding: 2px 16px 2px 20px; min-height: 36px; box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.05); }
.pl-ga .gak { width: 22px; height: 22px; border-radius: 11px; border: 1.8px solid var(--c); background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.pl-ga .gak.on { background: var(--c); }
.pl-ga .gat { flex: 1; min-width: 0; font-size: 14px; color: #3a3a3f; }
.pl-ga i { font-style: normal; font-size: 12px; color: var(--mute); }

/* ---- habits: living tiles ---- */
.hb-lbl { margin: 14px 2px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.hb-lbl + .streaks { margin-top: 8px; }
.hb-hint { font-size: 13px; color: var(--mute); margin-top: -6px; }
.streak.hb2 { display: block; }
.hb2 .circle { width: 100%; height: auto; border-radius: 20px; padding: 12px 4px 10px; flex-direction: column; gap: 8px; border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, #fff) 0%, color-mix(in srgb, var(--c) 6%, #fff) 100%); box-shadow: 0 6px 14px -10px var(--c); transition: transform 0.12s var(--out), background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.hb2 .hb-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--c) 45%, transparent); transition: background 0.3s var(--ease); }
.hb2 .hb-nm { max-width: 100%; padding: 0 4px; font-size: 12px; font-weight: 600; color: #111113; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb2.done .circle { background: linear-gradient(160deg, var(--c) 0%, var(--cd) 100%); border-color: transparent; box-shadow: 0 10px 20px -10px var(--c); }
.hb2.done .hb-ic { background: rgba(255, 255, 255, 0.22); box-shadow: none; }
.hb2.done .hb-nm { color: #fff; }
.hb2.just .hb-ic svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: hbDraw 0.32s var(--out) 0.05s forwards; }
.hb2.just .circle { animation: hbFill 0.35s var(--out); }
@keyframes hbDraw { to { stroke-dashoffset: 0; } }
@keyframes hbFill { from { filter: saturate(0.6) brightness(1.06); } to { filter: none; } }
@media (prefers-reduced-motion: reduce) { .hb2.just .hb-ic svg path, .hb2.just .circle { animation: none; stroke-dashoffset: 0; } }
.hb2 .circle:active { transform: scale(0.97); }
.hb2 .del { top: -8px; right: -6px; }

/* ---- habits, calmer (habits-2): flat cards, no gradients or badges ---- */
.hb2 .circle { border-radius: 14px; padding: 12px 4px 10px; gap: 6px; background: #fff; border: 1px solid rgba(17, 17, 19, 0.09); box-shadow: none; }
.hb2 .hb-ic { width: 28px; height: 28px; border-radius: 0; background: none; box-shadow: none; }
.hb2 .hb-nm { font-weight: 500; }
.hb2.done .circle { background: color-mix(in srgb, var(--c) 11%, #fff); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: none; }
.hb2.done .hb-ic { background: none; }
.hb2.done .hb-ic svg { stroke: var(--cd) !important; }
.hb2.done .hb-nm { color: #111113; }
.hb2.just .circle { animation: none; }
.streaks { gap: 10px 8px; }

/* ---- habits, round again (habits-3): the original circles, crisper. No cards, gradients or tint ---- */
.hb2 .circle { width: 100%; padding: 0; gap: 7px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.hb2.done .circle { background: none; border: 0; box-shadow: none; }
.hb2 .hb-ic { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1.8px solid color-mix(in srgb, var(--c) 60%, #fff); box-shadow: none; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.hb2 .hb-ic svg { width: 26px; height: 26px; }
.hb2.done .hb-ic { background: var(--c); border-color: var(--c); box-shadow: none; }
.hb2.done .hb-ic svg { stroke: #fff !important; }
.hb2 .hb-nm, .hb2.done .hb-nm { font-size: 12px; font-weight: 500; color: #111113; }
.hb2 .circle:active { transform: scale(0.97); }

/* ---- Mountain year view: goals by quarter and month ---- */
.yg-wrap { margin: 0 0 18px; }
.yg { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 20px; padding: 14px; margin-top: 10px; box-shadow: var(--card-shadow); }
.yg-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.yg-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yg-t b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yg-t em { font-style: normal; font-size: 13px; color: var(--mute); }
.yg .gl-bar { display: block; position: relative; height: 8px; }
.yg-q, .yg-m { display: grid; gap: 6px; }
.yg-q { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yg-m { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 2px; }
.yg-c { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border-radius: 12px; background: var(--soft); min-width: 0; }
.yg-c em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.yg-c b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.yg-c i { font-style: normal; font-size: 11px; color: var(--mute); min-height: 14px; white-space: nowrap; }
.yg-c.ok i { color: #2FA36B; font-weight: 600; }
.yg-c.miss i { color: #E5484D; font-weight: 600; }
.yg-c.cur { background: #fff; box-shadow: inset 0 0 0 1.5px var(--c); }
.yg-c.fut b { color: #6B6B70; }
.yg-c.na b { color: var(--faint, #A0A0A8); }
.yg-f { display: flex; justify-content: space-between; }
.yg-more, .yg-open { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 600; color: #6B6B70; }

/* ---- Pillars page: one goals list, plan editor, folded months ---- */
.pg2 { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pg2-h { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; font: inherit; color: inherit; text-align: left; }
.pg2-h i { width: 10px; height: 10px; border-radius: 5px; background: var(--c); }
.pg2-h b { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.pg2-add { display: flex; align-items: center; gap: 8px; border: 1.5px dashed rgba(17, 17, 19, 0.16); background: none; border-radius: 16px; padding: 12px 14px; font: inherit; font-size: 14px; color: var(--mute); text-align: left; }
.pg2-none { margin-top: 6px; font-size: 13px; color: var(--mute); }
.gl-plan { color: #111113 !important; font-weight: 500; }
.mt-fold { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 22px 0 8px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--soft); font: inherit; font-size: 15px; font-weight: 600; color: inherit; }
.mt-fold i { font-style: normal; font-size: 20px; color: var(--mute); }
.pq { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--soft); margin-top: 10px; }
.pq.cur { box-shadow: inset 0 0 0 1.5px #111113; }
.pq-h { display: flex; align-items: center; gap: 8px; }
.pq-h b { font-size: 15px; font-weight: 600; }
.pq-h em { flex: 1; font-style: normal; font-size: 12px; color: var(--mute); }
.pq-ck { width: 28px; height: 28px; flex-shrink: 0; border-radius: 14px; border: 1.5px solid rgba(17, 17, 19, 0.18); background: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }
.pq-ck.on { background: #2FA36B; border-color: #2FA36B; }
.pm2 { display: flex; align-items: center; gap: 8px; }
.pm2-n { width: 30px; font-size: 12px; font-weight: 600; color: var(--mute); text-transform: uppercase; }
.pm2 .field { flex: 1; min-width: 0; }
.pm2.cur .pm2-n { color: #111113; }

/* ---- year view: goals under the months ---- */
.yg-wrap { margin: 18px 0 0; }
.yg { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 20px; padding: 14px; margin-top: 10px; box-shadow: var(--card-shadow); }
.yg-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.yg-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yg-t b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yg-t em { font-style: normal; font-size: 13px; color: var(--mute); }
.yg .gl-bar { display: block; position: relative; height: 8px; }
.yg-q, .yg-m { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.yg-c { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border-radius: 12px; background: var(--soft); min-width: 0; }
.yg-c em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
.yg-c b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.yg-c i { font-style: normal; font-size: 11px; color: var(--mute); min-height: 14px; white-space: nowrap; }
.yg-c.ok i { color: #2FA36B; font-weight: 600; }
.yg-c.miss i { color: #E5484D; font-weight: 600; }
.yg-c.cur { background: #fff; box-shadow: inset 0 0 0 1.5px var(--c); }
.yg-c.fut b { color: #6B6B70; }
.yg-c.na b { color: #A0A0A8; }
.yg-w { display: flex; gap: 8px; font-size: 13px; }
.yg-w b { width: 24px; color: var(--mute); font-weight: 600; }
.yg-w.ok span { color: #2FA36B; }
.yg-more { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 600; color: #6B6B70; }

/* ---- year view: plain yearly goals under the months ---- */
.yp-wrap { margin: 22px 0 0; display: flex; flex-direction: column; gap: 2px; }
.yp-h { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.yp { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: #fff; padding: 14px 16px; text-align: left; font: inherit; color: inherit; box-shadow: var(--card-shadow); }
.yp:first-of-type { border-radius: 18px 18px 0 0; }
.yp:last-of-type { border-radius: 0 0 18px 18px; }
.yp:only-of-type { border-radius: 18px; }
.yp + .yp { box-shadow: var(--card-shadow); border-top: 1px solid rgba(17, 17, 19, 0.06); }
.yp i { width: 10px; height: 10px; border-radius: 5px; background: var(--c); flex-shrink: 0; }
.yp-t { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; }
.yp em { font-style: normal; font-size: 13px; color: var(--mute); white-space: nowrap; }

/* Pillars title opens the pillar tiles */
.m-title { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; color: inherit; }

/* Mountain cards: the month's days, with a spike on the Mountain Day */
.mq-days { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 12px 3px; padding-top: 10px; width: 100%; }
.mq-days i { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--c); min-width: 0; }
.mq-days i.fut { background: rgba(110, 90, 50, 0.14); }
.mq-days i.miss { background: transparent; box-shadow: inset 0 0 0 1.4px var(--c); opacity: 0.45; }
.mq-days i.now { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--ink); opacity: 1; }
.mq-days i.md::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 1px); width: 11px; height: 13px; margin-left: -5.5px; background: var(--c); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.m-title h1 { margin: 0; }

/* ---- big goals with smaller goals inside (goals-1) ---- */
.gb { background: var(--soft); border-radius: 22px; padding: 14px 14px 12px; margin-bottom: 12px; }
.gb-top { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "p p" "t t" "s ch" "b b"; gap: 4px 10px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; padding: 2px 2px 4px; color: var(--ink); }
.gb-p { grid-area: p; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); }
.gb-p i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.gb-top b { grid-area: t; font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.gb-top em { grid-area: s; font-style: normal; font-size: 13px; color: var(--mute); }
.gb-top .gl-bar { grid-area: b; margin-top: 6px; }
.gb-top .gl-ch { grid-area: ch; background: #fff; }
.gk { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: #fff; border-radius: 14px; padding: 11px 12px; margin-top: 8px; font-size: 14px; color: var(--ink); }
.gk-c { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(17,17,19,.2); flex: none; display: grid; place-items: center; }
.gk.done .gk-c { background: var(--c); border-color: var(--c); }
.gk-t { flex: 1; min-width: 0; font-weight: 500; }
.gk.done .gk-t { color: var(--faint); text-decoration: line-through; }
.gk em { font-style: normal; font-size: 12px; color: var(--mute); white-space: nowrap; }
.gk em.bh { color: #E5484D; }
.gb-add { display: block; width: 100%; margin-top: 10px; padding: 9px; border: 1.5px dashed rgba(17,17,19,.18); border-radius: 14px; background: transparent; font-size: 13px; font-weight: 600; color: var(--mute); }
#gf-p:empty, #gf-s:empty { display: none; }

/* ---- guided flows (goals-2) ---- */
.bf-dots { display: flex; gap: 6px; margin: 4px 0 12px; }
.bf-dots i { flex: 1; height: 4px; border-radius: 2px; background: rgba(17,17,19,.1); }
.bf-dots i.a { background: var(--ink); }
.bf-q { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
#bf, #kf { display: flex; flex-direction: column; gap: 12px; }
.bf-hint { font-size: 13px; color: var(--mute); background: var(--soft); border-radius: 14px; padding: 11px 13px; }
.bf-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.bpl { border: 0; border-radius: 99px; background: var(--soft); padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.bpl.on { background: var(--ink); color: #fff; }
.bf-kid { display: grid; grid-template-columns: 1fr auto 30px; gap: 8px; align-items: center; }
.bf-kid em { font-style: normal; font-size: 12px; color: var(--mute); white-space: nowrap; }
.bf-x { width: 30px; height: 30px; border: 0; border-radius: 15px; background: var(--soft); display: grid; place-items: center; }
.bf-n { flex-wrap: nowrap; gap: 6px; } .bf-n .bpl { flex: 1; padding: 10px 0; text-align: center; }

/* ---- home-1: compact hours card so the habits show on the first screen (CSS only) ---- */
.hrs { display: grid !important; grid-template-columns: 104px 1fr; grid-template-rows: auto auto auto; align-items: center; justify-items: start; column-gap: 18px; row-gap: 2px; padding: 16px 18px 12px !important; }
.hrs .ring.sm { width: 104px; height: 104px; margin: 0; grid-row: 1 / span 3; }
.hrs .ring.sm .ring-fill { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); }
.hrs .ring.sm .ring-mid b { font-size: 19px; }
.hrs .ring.sm .ring-mid span { font-size: 10px; }
.hrs .hr-status { margin: 0; font-size: 14px; }
.hrs .tk-go { margin-top: 8px; height: 44px; padding: 0 22px; font-size: 15px; }
.hrs .hr-details { margin: 0; padding: 0; height: 32px; }

/* ---- cue-1: habit cue (Atomic Habits). Cue line on tiles, soft ring when it is time, After block + pinned Save in the habit sheet ---- */
.hb-cue { display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; margin-top: -3px; padding: 0 2px; font-size: 10.5px; font-weight: 500; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-cue svg { flex: none; fill: none; stroke: #8E8E93; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb2.due:not(.done) .hb-ic { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.cue-box { display: flex; flex-direction: column; gap: 12px; }
.cue-pv { justify-content: flex-start; font-size: 15px; min-height: 22px; }
.cue-pv span { display: block; }
.sheet .cta.pin { position: sticky; bottom: 0; flex: none; box-shadow: 0 0 0 12px #FCFAF7, 0 80px 0 12px #FCFAF7; }
.sheet .cta.pin ~ .danger { position: relative; }

/* ---- pillars-3: month cards grow to fit the theme instead of clipping it (CSS only) ---- */
.mt-card { aspect-ratio: auto; min-height: 164px; overflow: visible; }
.mq-theme { -webkit-line-clamp: unset; display: block; overflow: visible; }

/* ---- pillars-4: the month cards show a line graph instead of one dot per day ---- */
.mq-days { display: block; padding-top: 6px; }
.mq-graph { display: block; width: 100%; height: 44px; overflow: visible; }
.mq-graph path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mq-graph .gl-axis { stroke: rgba(110, 90, 50, 0.22); stroke-width: 1; }
.mq-graph .gl-pace { stroke: rgba(110, 90, 50, 0.22); stroke-width: 1.4; stroke-dasharray: 1 4; }
.mq-graph .gl-on { stroke: var(--c); stroke-width: 2.6; }
.mq-graph .gl-bump { stroke: color-mix(in srgb, var(--c) 40%, #fff); stroke-width: 2.4; }
.mq-graph .gl-bump.hit { stroke: var(--c); }
.mq-graph .gl-now { fill: #fff; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* ---- spacing-1: the Muhasaba card uses the same 26px corners as every other Home card ---- */
.mh-card { border-radius: 26px; }

/* ---- tiny-1: a day kept alive with the two-minute version is a lighter fill, still done ---- */
.hb2.done.tiny .hb-ic { background: color-mix(in srgb, var(--c) 52%, #fff); border-color: color-mix(in srgb, var(--c) 52%, #fff); }
.hb2 .circle { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* ---- focus-1: big goal flow gains "What will you ignore" and "What will it cost you" ---- */
.bf-cost { display: flex; flex-direction: column; gap: 4px; }
.bf-cr { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--soft); text-align: left; font: inherit; }
.bf-cr .n { width: 92px; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-cr .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(110, 90, 50, 0.08); overflow: hidden; }
.bf-cr .bar i { display: block; height: 100%; border-radius: 4px; }
.bf-cr b { width: 52px; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bf-cr.on { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.bf-h { display: flex; align-items: center; justify-content: center; gap: 22px; }
.bf-h > div { display: flex; align-items: baseline; gap: 6px; min-width: 96px; justify-content: center; }
.bf-h b { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bf-h span { font-size: 14px; color: var(--mute); }
.gd-ig + .gd-ig { margin-top: 4px; }

/* ---- focus-2: Ignoring / It costs rows on every big goal's detail, with their own edit sheets ---- */
.gd-edrow { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--soft); text-align: left; font: inherit; font-size: 15px; }
.gd-edrow > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-edrow i { display: flex; flex: none; }


/* ---- ring-2: one smooth ring with rounded ends, a little bolder number, Track centred (CSS + markup) ---- */
.ring-fill[data-svg] { -webkit-mask: none; mask: none; background: none; }
.ring-fill[data-svg] svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ring-fill[data-svg] svg path { fill: none; stroke-width: 11; stroke-linecap: round; }
.ring-fill[data-svg] svg .rt { fill: none; stroke: #F0ECE4; stroke-width: 11; }
.hrs .ring.sm { width: 112px; height: 112px; }
.hrs { grid-template-columns: 112px 1fr; justify-items: center; text-align: center; }
.hrs .ring.sm { justify-self: start; }
.hrs .ring.sm .ring-mid b { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.hrs .ring.sm .ring-mid span { font-size: 10px; font-weight: 500; }
.hrs .hr-status { display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; }
.hrs .hr-status svg { margin-right: 0 !important; flex: none; }

/* ---- tabbar-2: floating bar like Waqti (no colour: ink icon on a soft grey slider) ---- */
#tabs { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 6px; border: 0; border-radius: 32px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.06), 0 2px 6px rgba(80, 60, 20, 0.06), 0 18px 36px -14px rgba(60, 40, 10, 0.28); }
#tabs div { position: relative; max-width: none; justify-content: space-between; }
.tab { width: 25%; height: 56px; gap: 4px; font-size: 11.5px; font-weight: 500; position: relative; z-index: 1; }
.tab::before { display: none; }
.tab svg { stroke: #7C7C80; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tab.on { color: var(--ink); font-weight: 650; }
.tab.on svg { stroke: var(--ink); transform: none; animation: tabpop 0.5s var(--spring); }
.tab-ind { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 26px; background: #ECEBE5; z-index: 0; pointer-events: none; opacity: 0; }
.tab-ind.ready { opacity: 1; transition: transform 0.45s var(--spring), width 0.3s var(--ease); }
@keyframes tabpop { 0% { transform: scale(0.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
#app { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .tab-ind.ready { transition: none; } .tab.on svg { animation: none; } }
/* tabbar-3: on wide screens the bar matches the app column (430px) and stays centred */
#tabs { max-width: 406px; margin: 0 auto; }

/* ---- habit-pack-1: never miss twice, identity, quit habits, goal link ---- */
.hb2 .hb-ic { position: relative; }
.hb2 .circle { position: relative; }
.hb2 .hb-bd { position: absolute; top: -3px; right: -3px; z-index: 2; box-shadow: 0 0 0 2px #fff; width: 18px; height: 18px; border-radius: 9px; background: #D97706; display: flex; align-items: center; justify-content: center; font-style: normal; }
.hb2 .hb-bd svg { stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hb2.back .circle { border-color: rgba(217, 119, 6, 0.55); }
.hb2 .hb-back { font-size: 10.5px; font-weight: 600; color: #B45309; line-height: 1.1; margin-top: -3px; }
.hb2.quit:not(.done) .circle { border-style: dashed; border-color: rgba(17, 17, 19, 0.22); background: transparent; }
.hb2.quit:not(.done) .hb-nm { color: var(--mute); }
.hb2 .hb-sw { font-size: 10.5px; font-weight: 600; color: var(--green); line-height: 1.1; margin-top: -3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg.kd { margin: 2px 0; }
.seg.kd button { height: 38px; font-size: 14px; }
.qrows { display: flex; flex-direction: column; gap: 8px; }
.qrow { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: var(--pop-shadow); }
.qrow .qi { width: 32px; height: 32px; border-radius: 16px; background: var(--soft); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.qrow .qi svg { stroke: #111113; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.qrow .qb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qrow .qb b { font-size: 13.5px; font-weight: 600; }
.qrow .field.sm { background: var(--soft); }
.gd-lks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.gd-lk { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: var(--soft); border-radius: 16px; padding: 11px 12px; }
.gd-lk .dot { width: 10px; height: 10px; border-radius: 5px; flex: none; }
.gd-lk span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gd-lk b { font-size: 14.5px; font-weight: 600; }
.gd-lk em { font-style: normal; font-size: 12px; color: var(--mute); }
.gd-lk u { text-decoration: none; font-size: 11px; font-weight: 600; color: var(--mute); background: #fff; border-radius: 10px; padding: 3px 9px; flex: none; }
.gd-lk u.on { color: var(--green); background: #E6F3EC; }

/* ---- life-1: more life across Calendar, Pillars and Me (soft tinted icons, thicker progress, press feedback) ---- */
:root { --ico-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E"); --ico-rise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18h20M6 18a6 6 0 0 1 12 0M12 4v3M4.9 8.4l1.8 1.8M19.1 8.4l-1.8 1.8'/%3E%3C/svg%3E"); --ico-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M3 12h2M19 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4'/%3E%3C/svg%3E"); --ico-set: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 19h20M6 19a6 6 0 0 1 12 0M12 9v3M7 12l1.5 1.5M17 12l-1.5 1.5'/%3E%3C/svg%3E"); }
/* Calendar: each prayer block gets a soft tinted icon instead of the grey bar */
.pl-sec .row1 .bar { width: 38px; height: 38px; border-radius: 19px; flex: none; position: relative; align-self: center; background: var(--t, #E7E5EE) !important; }
.pl-sec .row1 .bar::after { content: ''; position: absolute; inset: 9px; background: var(--tk, #55557A); -webkit-mask: var(--ic, var(--ico-moon)) center / contain no-repeat; mask: var(--ic, var(--ico-moon)) center / contain no-repeat; }
.pl-sec[data-key$="fajr"] { --t: #E4E4F6; --tk: #4A4A9A; --ic: var(--ico-moon); }
.pl-sec[data-key$="sunrise"] { --t: #FFE6D2; --tk: #C2631F; --ic: var(--ico-rise); }
.pl-sec[data-key$="duha"] { --t: #FFF0C2; --tk: #A87A00; --ic: var(--ico-sun); }
.pl-sec[data-key$="dhuhr"] { --t: #FFE9A8; --tk: #9A6B00; --ic: var(--ico-sun); }
.pl-sec[data-key$="asr"] { --t: #FFDDBF; --tk: #B8570F; --ic: var(--ico-sun); }
.pl-sec[data-key$="maghrib"] { --t: #FAD3D0; --tk: #B5413A; --ic: var(--ico-set); }
.pl-sec[data-key$="isha"] { --t: #DCDCF3; --tk: #4B4B8F; --ic: var(--ico-moon); }
.pl-sec .meter { height: 5px; border-radius: 3px; }
.pl-sec .meter i { background: var(--tk, #8E8E93) !important; opacity: 0.85; border-radius: 3px; transform-origin: left; }
#app.enter .pl-sec .meter i, #app.enter .gl-bar i { animation: lifegrow 0.9s var(--ease) both; }
@keyframes lifegrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pl-sec:active, .gb-top:active, .pf-card:active { transform: scale(0.985); }
.pl-sec, .gb-top, .pf-card { transition: transform 0.25s var(--spring); }
/* Pillars: goal cards take their pillar's colour */
.gb { background: linear-gradient(165deg, color-mix(in srgb, var(--c) 11%, #fff) 0%, #fff 70%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent), 0 10px 22px -16px var(--c); }
.gb-top { background: transparent !important; }
.gb .gl-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--c) 14%, #fff); }
.gb .gl-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); border-radius: 4px; transform-origin: left; box-shadow: 0 0 10px -2px var(--c); }
.gb .gk-c { border-color: var(--c); }
.gb-p { background: color-mix(in srgb, var(--c) 16%, #fff); color: var(--c); border-radius: 12px; padding: 3px 10px 3px 8px; width: fit-content; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
/* Me: header icons sit in a soft circle, avatar gets a ring */
.pf-hd svg { box-sizing: content-box; padding: 7px; border-radius: 50%; background: #F1EDE5; }
.pf-hero .pf-hd svg { background: rgba(255, 255, 255, 0.7); }
.pf-id .av { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #D9D3C6, 0 14px 26px -10px rgba(17, 17, 19, 0.45); }
.pf-tile { background: linear-gradient(165deg, #fff 0%, #FAF7F1 100%); }

/* ---- story-1: story bank on Me ---- */
.pf-story { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 16px; }
.pf-story .pf-hd { flex: none; }
.pf-story .sm { flex: 1; min-width: 0; font-size: 14px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-story em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--mute); background: var(--soft); padding: 2px 10px; border-radius: 10px; flex: none; }
.pf-story .plus { margin-left: auto; display: flex; }
.st-list { display: flex; flex-direction: column; padding-bottom: 8px; }
.st-mo { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin: 16px 2px 6px; }
.st-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: var(--soft); border-radius: 16px; padding: 12px; margin-bottom: 6px; }
.st-d { width: 42px; text-align: center; flex: none; }
.st-d b { display: block; font-size: 21px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.st-d i { font-style: normal; font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--mute); letter-spacing: 0.06em; }
.st-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-t b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-t em { font-style: normal; font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.st-ta { min-height: 170px; }
.st-names { margin-top: 8px; }

/* fit-1: no scrollbar, no stray zoom */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
html { touch-action: manipulation; }
input, textarea, select { font-size: max(16px, 1em); }

/* notify-1 */
.pf-notif { padding: 16px 18px 6px; display: block; }
.pf-notif .pf-hd { margin-bottom: 4px; }
.nt-row { display: flex; align-items: center; gap: 14px; min-height: 54px; border-top: 1px solid var(--line); }
.nt-row:first-of-type { border-top: 0; }
.nt-ic { width: 34px; height: 34px; border-radius: 17px; background: var(--soft); display: flex; align-items: center; justify-content: center; flex: none; }
.nt-t { flex: 1; font-size: 16px; font-weight: 600; }
.nt-at { border: 0; background: var(--soft); border-radius: 12px; padding: 7px 11px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); }
.nt-sw { position: relative; width: 51px; height: 31px; border: 0; border-radius: 16px; background: #E3DCCD; flex: none; transition: background 0.25s var(--ease); padding: 0; }
.nt-sw i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.25s var(--spring); }
.nt-sw.on { background: var(--ink); }
.nt-sw.on i { transform: translateX(20px); }

/* header-1: Home header (month button, profile button), month sheet, notes page */
.dnav .dline { display: flex; align-items: center; justify-content: center; gap: 2px; }
.dnav .date { font-size: 22px; white-space: nowrap; }
.dc { width: 28px; height: 40px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; }
.dn { width: 44px; height: 44px; border-radius: 22px; }
.mvd { width: 40px; height: 40px; margin: 0 auto; border: 0; border-radius: 20px; background: transparent; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.mvd:disabled { color: #C9C4B8; }
.mvd.tdy { box-shadow: inset 0 0 0 1.5px var(--ink); }
.mvd.sel { background: var(--ink); color: #fff; }
.pf-top { display: flex; padding-bottom: 12px; }
.nt-page { padding-top: 6px; }

/* khatwa-1 */
.kh-hd { display: flex; align-items: center; justify-content: space-between; min-height: 50px; }
.kh-card { background: #fff; border-radius: 26px; box-shadow: var(--card-shadow); padding: 18px 20px 8px; margin-top: 14px; }
.kh-lb { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.kh-name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 8px; }
.kh-name.rest { color: var(--faint); }
.kh-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; color: var(--ink); text-align: left; padding: 0; }
.kh-row b { flex: 1; font-size: 17px; font-weight: 600; }
.kh-row em { font-style: normal; font-size: 14px; color: var(--faint); font-weight: 500; }
.kh-c { width: 30px; height: 30px; border-radius: 15px; border: 2px solid #2F80ED; display: flex; align-items: center; justify-content: center; flex: none; transition: background 0.2s var(--ease), transform 0.25s var(--spring); }
.kh-row.on .kh-c { background: var(--ink); border-color: var(--ink); transform: scale(1.06); }
.kh-row.on b { color: var(--faint); }
.kh-row:disabled { opacity: 0.5; }
.kh-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 150px; margin-top: 14px; border: 1.5px dashed #E3DCCD; border-radius: 26px; background: transparent; }
.kh-week { background: #fff; border-radius: 26px; box-shadow: var(--card-shadow); padding: 10px; margin-top: 14px; }
.kh-strip { display: flex; gap: 6px; }
.kh-dy { flex: 1; border: 0; border-radius: 16px; background: transparent; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; color: var(--faint); font-size: 11px; font-weight: 600; }
.kh-dy b { font-size: 16px; color: var(--ink); }
.kh-dy i { width: 5px; height: 5px; border-radius: 3px; background: transparent; }
.kh-dy i.on { background: #C9C4B8; }
.kh-dy.sel { background: var(--ink); color: #A8A8AE; }
.kh-dy.sel b { color: #fff; }
.kh-dy.sel i.on { background: #fff; }
.kh-len { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 0 4px; }
.kh-len .ch { border: 0; padding: 8px 14px; border-radius: 18px; background: #fff; font: inherit; font-weight: 600; font-size: 14px; box-shadow: 0 0 0 1px rgba(110, 90, 50, 0.14); color: var(--ink); }
.kh-len .ch.s { background: var(--ink); color: #fff; }
.kh-day { display: block; width: 100%; text-align: left; border: 0; background: #fff; border-radius: 20px; padding: 12px 16px; margin-top: 10px; font: inherit; color: var(--ink); box-shadow: var(--card-shadow); }
.kh-day .kh-dl { display: block; font-size: 12px; font-weight: 600; color: var(--mute); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; }
.kh-day b { display: block; font-size: 16px; font-weight: 600; }
.kh-day em { display: block; font-style: normal; font-size: 14px; color: var(--faint); font-weight: 500; margin-top: 1px; }
.kh-day em.rest { font-size: 16px; }
.kd-items { margin-top: 10px; }
.kd-it { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.kd-it .field { margin: 0; flex: 1; min-width: 0; }
.kd-it .kd-m { flex: none; width: 74px; text-align: center; }
.kd-x { width: 36px; height: 36px; border: 0; background: transparent; flex: none; display: flex; align-items: center; justify-content: center; }
.kh-add { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 10px; border: 1.5px dashed #E3DCCD; border-radius: 16px; background: transparent; }
#kh-day .cta { width: 100%; margin-top: 16px; }
.kh-here { display: block; width: 100%; height: 44px; margin-top: 6px; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--mute); }

/* walk-1 */
.kh-walk { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 26px; box-shadow: var(--card-shadow); padding: 16px 20px; margin-top: 14px; }
.kw-ring { position: relative; width: 64px; height: 64px; flex: none; }
.kw-ring svg { position: absolute; inset: 0; width: 64px; height: 64px; }
.kw-ck { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.kw-km { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.kw-km small { font-size: 15px; color: var(--faint); font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.kw-rg { font-size: 13px; color: var(--faint); font-weight: 600; margin-top: 2px; }
.kh-conn { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; border: 0; background: #fff; border-radius: 20px; padding: 12px 16px; font: inherit; color: var(--ink); box-shadow: var(--card-shadow); text-align: left; }
.kh-conn b { flex: 1; font-size: 16px; font-weight: 600; }
.kh-conn em { font-style: normal; font-size: 13px; color: var(--faint); font-weight: 600; }
.kc-ic { width: 34px; height: 34px; border-radius: 17px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.kc-row { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 10px 10px 10px 16px; margin-top: 10px; box-shadow: var(--card-shadow); }
.kc-t { flex: 1; min-width: 0; }
.kc-t span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.kc-t code { display: block; font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); word-break: break-all; margin-top: 2px; user-select: all; -webkit-user-select: all; }
.kc-cp { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--soft); display: flex; align-items: center; justify-content: center; flex: none; }
.kc-cp.ok { background: var(--ink); }
.kc-sync { text-align: center; font-size: 13px; color: var(--faint); font-weight: 600; margin-top: 12px; }
#kh-hl .cta { width: 100%; margin-top: 16px; }
.kc-new { display: block; width: 100%; height: 44px; margin-top: 10px; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--mute); }

/* khatwa-2: training + nature cards */
.kh-nat { width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kh-nat:disabled { opacity: .55; cursor: default; }
.kw-nt { font-size: 26px; }

/* khatwa-3: small tiles */
.kh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.kh-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.kh-tiles .kh-walk { margin-top: 0; padding: 12px 14px; gap: 12px; border-radius: 22px; min-width: 0; }
.kh-tiles .kw-ring, .kh-tiles .kw-ring svg { width: 44px; height: 44px; }
.kh-tiles .kw-km { font-size: 22px; line-height: 1.1; }
.kh-tiles .kw-km small { font-size: 12px; margin-left: 2px; }
.kh-tiles .kw-rg { font-size: 12px; margin-top: 1px; }
.kh-tiles .kw-nt { font-size: 17px; }