/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Instrument Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  /* Carry ALL device safe-area insets here (box-sizing:border-box), so the whole
     app column lives INSIDE 100dvh minus the insets. This guarantees the header
     clears the notch/Dynamic Island and the bottom nav clears the home indicator
     without any element being able to overflow the viewport and clip. Individual
     elements must NOT re-add these insets (that double-counts and clips). */
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
input, select, textarea, button { font-family: inherit; }
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ── HEADER ── */
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  height: var(--hdr-h);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 5px;
  color: var(--accent);
  line-height: 1;
  white-space: nowrap;
}
.logo-sub {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text2);
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
}
@media(max-width: 520px) {
  .logo-sub { display: none; }
  .logo { font-size: 24px; letter-spacing: 4px; }
}
@media(min-width: 768px) {
  .logo { font-size: 30px; }
  .logo-sub { font-size: 12px; }
}
.hdr-r { display: flex; align-items: center; gap: var(--sp-2); }
.date-chip {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  background: var(--s2);
  border: 1px solid var(--border2);
  padding: 7px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
@media(min-width: 768px) { .date-chip { font-size: 14px; padding: 8px 16px; } }
.ai-ask-btn {
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-ask-btn:hover { background: var(--acc-dim); }
.ai-ask-btn.active { background: var(--acc-dim); }
@media(max-width:520px){ .ai-ask-btn { font-size: 11px; padding: 5px 9px; } }
/* Mobile: drop the SYNC text + dot, icon color carries the status signal */
@media(max-width:520px){
  #forceSyncLabel { display: none; }
  #syncDot { display: none; }
  #forceSyncBtn { padding: 6px 8px; }
}
.qab {
  width: 40px; height: 40px;
  background: var(--accent);
  border: none;
  border-radius: var(--r-sm);
  color: #000;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, transform .1s;
  line-height: 1;
  flex-shrink: 0;
}
.qab:hover { opacity: .88; }
@keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,77,109,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255,77,109,0); }
}
.qab:active { transform: scale(.94); }
.user-btn {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.user-btn:hover { border-color: var(--border3); color: var(--text); }
@media(max-width: 520px) {
  .user-btn { font-size: 11px; padding: 5px 10px; }
  .date-chip { font-size: 11px; padding: 5px 10px; }
  .hdr-r { gap: 6px; }
}

/* ── VIEWS ── */
.views { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.view {
  position: absolute; inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--pad) var(--pad) 40px;
  display: none;
}
#v-shop.active {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding-top: 0;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: var(--sp-4);
}
.view.active { display: block; }

/* ── BOTTOM NAV ── */
.bnav {
  display: flex;
  border-top: 1px solid var(--border2);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--s1), var(--bg));
  overflow-x: auto;
  scrollbar-width: none;
  /* Home-indicator clearance is handled by body's padding-bottom (not here, to
     avoid double-counting). Small fixed padding keeps the icons off the edge. */
  padding-bottom: 4px;
  min-height: var(--nav-h);
  box-shadow: 0 -10px 28px rgba(0,0,0,.4);
}
.bnav::-webkit-scrollbar { display: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.ni {
  flex: 1;
  min-width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 4px 14px;
  cursor: pointer;
  border: none;
  background: none;
  color: rgba(255,255,255,.45);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  gap: 4px;
  position: relative;
  transition: color .25s ease;
}
.ni::before {
  content: '';
  position: absolute;
  inset: 4px 6px;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 100%, rgba(200,255,0,.18) 0%, transparent 70%);
  opacity: 0;
  transform: scaleY(0.6);
  transform-origin: bottom;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.ni:hover {
  color: rgba(255,255,255,.9);
}
.ni:hover::before {
  opacity: 1;
  transform: scaleY(1);
}
.ni:hover svg {
  filter: drop-shadow(0 0 6px rgba(200,255,0,.55));
  transform: translateY(-1px);
}
@keyframes niActivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,255,0,.4); }
  70%  { box-shadow: 0 0 0 8px rgba(200,255,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,255,0,0); }
}
@media(min-width:768px){
  .ni { font-size: 12px; gap: 6px; min-width: 56px; }
  .ni svg { width: 24px; height: 24px; }
}
.ni svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
}
.ni.active {
  color: var(--accent);
}
.ni.active svg {
  filter: drop-shadow(0 0 5px rgba(200,255,0,.6));
}
.ni.active::before {
  opacity: .7;
  transform: scaleY(1);
  background: radial-gradient(ellipse at 50% 100%, rgba(200,255,0,.22) 0%, transparent 65%);
}
.ni-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); display: none; box-shadow: 0 0 6px var(--accent); }
.ni.active .ni-dot { display: block; }

/* ── SHARED COMPONENTS ── */
.sec-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text2);
  text-transform: uppercase;
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
@media(min-width:768px){
  .sec-title { font-size: 14px; letter-spacing: 4px; }
}
.sec-title:first-child { margin-top: 0; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 55%), var(--s1);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
.row { display: flex; gap: var(--sp-2); align-items: stretch; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.row.nowrap { flex-wrap: nowrap; }
.inp {
  flex: 1;
  min-width: 0;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
  padding: 14px var(--sp-4);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--accent);
  font-size: 16px; /* 16px prevents iOS zoom */
  outline: none;
  transition: border-color .15s;
  min-height: 50px;
  -webkit-appearance: none;
  appearance: none;
}
.inp:focus { border-color: var(--accent); }
.inp::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); }
.inp.sm { max-width: 130px; font-size: 15px; }
.fsel {
  -webkit-text-fill-color: var(--text);
  cursor: pointer;
}
.sel {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px var(--sp-3);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  font-size: 14px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 40px;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.sel:focus { border-color: var(--accent); }
.btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--r);
  padding: 0 var(--sp-5);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s, transform .1s;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.97); }
/* Depth + glow on primary buttons only (ghost/danger keep their flat look). */
.btn:not(.ghost):not(.danger) {
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 70%), var(--accent);
  box-shadow: 0 4px 16px rgba(200,255,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.ghost {
  background: var(--s2);
  color: var(--text2);
  border: 1px solid var(--border);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
.btn.ghost:hover { color: var(--text); border-color: var(--border3); }
.btn.danger {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(255,77,109,.2);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.btn.danger:hover { background: rgba(255,77,109,.2); }
.hint {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}
@media(min-width:768px){ .hint { font-size: 14px; } }
.empty {
  text-align: center;
  padding: 60px var(--sp-5);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.empty .ei { font-size: 36px; margin-bottom: var(--sp-4); display: block; }

/* ── FILTER PILLS ── */
.frow { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); align-items: center; }
.cap-pill { padding:7px 14px; border-radius:20px; font-size:12px; font-weight:700; letter-spacing:.5px; cursor:pointer; border:1px solid var(--border); color:var(--text2); background:none; font-family:'Instrument Sans',sans-serif; transition:all .15s; white-space:nowrap; }
.cap-pill.active { border-color:var(--accent); background:rgba(200,255,0,.1); color:var(--accent); }
.fp {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  font-family: 'Instrument Sans', sans-serif;
  transition: all .15s;
  background: none;
  white-space: nowrap;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
@media(min-width:768px){
  .fp { font-size: 13px; padding: 7px 16px; min-height: 34px; }
}
.fp:hover { color: var(--text); background: rgba(255,255,255,.05); }
.fp.on { border-color: currentColor; color: var(--accent); background: var(--acc-dim); }
.fp.all.on { color: var(--text); border-color: currentColor; background: rgba(255,255,255,.06); }
.mgr-btn {
  margin-left: auto;
  font-size: 13px;
  color: var(--text2);
  background: none;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  min-height: 36px;
}
@media(min-width:768px){ .mgr-btn { font-size: 14px; padding: 9px 16px; min-height: 40px; } }
.mgr-btn:hover { color: var(--text); border-color: var(--border3); }

/* ── TODAY ── */
.t-greeting h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  letter-spacing: 2px;
  color: var(--text);
  line-height: 1;
}
@media(min-width:768px){ .t-greeting h1 { font-size: 46px; } }
.t-greeting p { font-size: 14px; color: var(--text2); margin-top: 4px; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 0;
}
.sbox {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 55%), var(--s1);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 12px 8px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
}
.snum {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  line-height: 1;
  color: var(--text);
}
@media(min-width:768px){ .snum { font-size: 40px; } }
.slbl {
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 4px;
  font-weight: 600;
}
@media(min-width:768px){ .slbl { font-size: 11px; } }
/* Today section wrapper — provides all vertical spacing */
#v-today .sec-title {
  margin: 0 0 10px;
  padding-bottom: 8px;
}
.tblock {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
@media(min-width:768px){ .tblock { padding: 14px 16px; gap: 14px; } }
.tblock:last-child { border-bottom: none; }
.tbar { width: 3px; height: 36px; border-radius: 2px; flex-shrink: 0; }
.tblock-info { flex: 1; min-width: 0; }
.tblock-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
@media(min-width:768px){ .tblock-name { font-size: 15px; } }
.tblock-meta { font-size: 12px; color: var(--text2); margin-top: 3px; }
.tblock-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}
.pin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
@media(min-width:768px){ .pin-row { padding: 14px 16px; } }
.pin-row:last-child { border-bottom: none; }
.chk {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.chk:hover { border-color: var(--accent); transform: scale(1.1); }
.chk.on {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.12);
  animation: chkPop .25s cubic-bezier(.34,1.56,.64,1);
}
.chk.on::after { content: '✓'; font-size: 12px; color: #000; font-weight: 800; }
@keyframes chkPop {
  0%   { transform: scale(0.8); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1.12); }
}
.ptxt { flex: 1; font-size: 15px; color: var(--text); line-height: 1.4; }
.ptxt.done { text-decoration: line-through; color: var(--muted); }
.tbadge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* ── TASKS ── */
.tl { display: flex; flex-direction: column; gap: var(--sp-2); }
.ti {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4);
  transition: border-color .15s, opacity .3s, transform .2s;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.ti:active { border-color: var(--border2); }
.ti.pinned { border-color: rgba(200,255,0,.3); background: rgba(200,255,0,.03); }
.ti.priority-task { border-color: rgba(200,255,0,.5); border-left: 3px solid var(--accent); background: rgba(200,255,0,.04); }
.ti.done { opacity: .38; }
.tdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.ttxt { font-size: 15px; min-width: 0; word-break: break-word; line-height: 1.55; color: var(--text); }
@media(min-width:768px){ .ttxt { font-size: 16px; } }
.ttxt.done { text-decoration: line-through; color: var(--muted); }
.tnotes { font-size: 13px; color: var(--text2); margin-top: var(--sp-1); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
@media(min-width:768px){ .tnotes { font-size: 14px; } }
.tdue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  margin-top: var(--sp-2);
  letter-spacing: .3px;
}
.tdue.ok { background: var(--grn-dim); color: var(--green); }
.tdue.soon { background: var(--org-dim); color: var(--orange); }
.tdue.overdue { background: var(--red-dim); color: var(--red); }
.tloc { display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); }
.tloc a { font-size: 13px; color: var(--blue); text-decoration: none; word-break: break-all; }
.tloc a:hover { text-decoration: underline; }
.ta { display: flex; gap: 2px; flex-shrink: 0; align-items: center; margin-top: 1px; }
.tb {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 17px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
  line-height: 1;
  min-width: 36px;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.tb:hover { color: var(--text); background: var(--s2); }
.tb.on { color: var(--accent); }

/* ── WEEK ── */
.wnav {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-4);
  gap: 0;
}
.wlbl {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--text);
}
.wbtns { display: flex; gap: var(--sp-1); }
.ibtn {
  background: var(--s1);
  border: 1px solid var(--border);
  color: var(--text);
  height: 40px;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0 var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  transition: border-color .15s;
  min-width: 40px;
}
.ibtn:hover { border-color: var(--accent); }
.wgrid { display: grid; grid-template-columns: repeat(7,1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
@media(max-width:640px) { .wgrid { grid-template-columns: repeat(2,1fr); } }
.dcol {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s;
}
/* Mobile: day columns grow with content (no fixed cap) */
.day-more-btn { display: none; }
@media(max-width:640px) {
  .dcol { min-height: 0; }
}
.dcol.today { border-color: rgba(200,255,0,.5); }
.dhd {
  padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--border);
  text-align: center;
  flex-shrink: 0;
}
.dname { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 2px; color: var(--text); }
.dcol.today .dname { color: var(--accent); }
.ddate { font-size: 11px; color: var(--muted); margin-top: 1px; font-weight: 500; }
.dbwrap { padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.blk {
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-2);
  font-size: 11px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  line-height: 1.4;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
.blk:hover { opacity: .85; }
.blk-time { font-size: 10px; opacity: .75; margin-top: 2px; }
.blk-rec { font-size: 10px; opacity: .6; margin-top: 2px; }
.bdel {
  position: absolute; top: 4px; right: 5px;
  background: none; border: none;
  color: inherit; opacity: .5;
  cursor: pointer; font-size: 13px;
  padding: 0; line-height: 1;
  min-width: 20px; min-height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.bdel:hover { opacity: 1; }
.blk-dup-btn {
  position: absolute; bottom: 4px; right: 5px;
  background: none; border: none;
  color: inherit; opacity: .4;
  cursor: pointer; font-size: 12px;
  padding: 0; line-height: 1;
}
.blk-dup-btn:hover { opacity: 1; }
.dadd {
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  margin-top: auto;
}
.dadd:hover { border-color: var(--accent); color: var(--accent); }
.leg { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.li { display: flex; align-items: center; gap: var(--sp-1); font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .4px; font-weight: 500; }
.ld { width: 8px; height: 8px; border-radius: 2px; }

/* ── FINANCES ── */
.fin-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.fin-box {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
}
.fin-num { font-family: 'Bebas Neue', sans-serif; font-size: 24px; line-height: 1; }
.fin-lbl { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; margin-top: var(--sp-2); font-weight: 600; }
.bill-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--s1);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: border-color .15s;
}
.bill-item:hover { border-color: var(--border2); }
.bill-left { flex: 1; min-width: 0; }
.bill-name { font-size: 15px; font-weight: 600; color: var(--text); }
@media(min-width:768px){ .bill-name { font-size: 16px; } }
.bill-meta { font-size: 13px; color: var(--text2); margin-top: 3px; }
@media(min-width:768px){ .bill-meta { font-size: 14px; } }
.bill-amount { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; flex-shrink: 0; }
.bill-amount.out { color: var(--red); }
.bill-amount.in { color: var(--green); }
.bill-status {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  font-family: 'Instrument Sans', sans-serif;
  transition: opacity .15s;
  min-height: 30px;
}
.bill-status:hover { opacity: .8; }
.bill-status.unpaid { background: var(--org-dim); color: var(--orange); }
.bill-status.paid { background: var(--grn-dim); color: var(--green); }
.bill-status.overdue { background: var(--red-dim); color: var(--red); }
.fin-filter { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }

/* ── SAVES ── */
.sv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media(min-width:600px){ .sv-grid { grid-template-columns: repeat(3,1fr); } }
@media(min-width:900px){ .sv-grid { grid-template-columns: repeat(4,1fr); } }

.sv-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .2s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.sv-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}
.sv-card:active { transform: scale(.97); transition-duration: .1s; }

/* Thumbnail */
.sv-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--s2);
  flex-shrink: 0;
}
.sv-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.sv-card:hover .sv-thumb img { transform: scale(1.06); }
.sv-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  background: linear-gradient(135deg, var(--s2) 0%, rgba(255,255,255,.03) 100%);
}
.sv-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}

/* Platform pill — bottom-left of thumb */
.sv-platform {
  position: absolute; bottom: 8px; left: 10px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: rgba(255,255,255,.95); text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.sv-plat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Icon-only action buttons — top-right of thumb, appear on hover */
.sv-actions {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: flex; gap: 5px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}
.sv-card:hover .sv-actions { opacity: 1; transform: translateY(0); }
.sv-act {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(12,12,12,.75); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
  flex-shrink: 0;
}
.sv-act:hover { background: rgba(200,255,0,.2); border-color: var(--accent); }
.sv-act:active { transform: scale(.88); }
/* Mobile has no hover state, so the edit/open/delete icons were
   invisible. Always show them on small screens. */
@media(max-width:520px){
  .sv-actions { opacity: 1; transform: none; }
}

/* Card body */
.sv-card-body { padding: 10px 12px 11px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sv-card-title {
  font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-card-note {
  font-size: 11px; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* Platform dot colours */
.pd-youtube   { background:#ff0000; }
.pd-twitter   { background:#1d9bf0; }
.pd-instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.pd-tiktok    { background:#ff004f; }
.pd-threads   { background:#fff; }
.pd-amazon    { background:#ff9900; }
.pd-spotify   { background:#1db954; }
.pd-default   { background:var(--accent); }
.sv-ph-ig { background: linear-gradient(135deg,#405de6,#833ab4,#e1306c,#fd1d1d,#fcaf45) !important; }
.sv-ph-x  { background: #000 !important; }

/* Legacy compat */
.sv-item { display:none; }
.sv-chip { display:none; }

/* ── HEALTH ── */
.health-checkin-card { background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 55%), var(--s1); border:1px solid var(--border2); border-radius:var(--r-lg); padding:var(--sp-5); margin-bottom:var(--sp-5); box-shadow:0 8px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05); }
.health-checkin-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); }
.health-metric { margin-bottom:var(--sp-4); }
/* Bigger touch target + smoother thumb on range sliders. Native thumb is
   ~12px on iOS which makes dragging jumpy next to adjacent elements. */
.sleek-range { -webkit-appearance:none; appearance:none; background:transparent; width:100%; height:28px; outline:none; margin:0; padding:0; }
.sleek-range::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:var(--border); }
.sleek-range::-moz-range-track { height:6px; border-radius:3px; background:var(--border); }
.sleek-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--accent); border:2px solid var(--s1); margin-top:-8px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.4); transition:transform .12s ease; }
.sleek-range::-webkit-slider-thumb:active { transform:scale(1.15); }
.sleek-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--accent); border:2px solid var(--s1); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.4); }

/* Notes folder grid. On mobile, force exactly 2 columns so folders stack
   vertically in pairs instead of horizontally scrolling. */
@media(max-width:520px){
  .folder-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.health-metric-lbl { font-size:13px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:var(--sp-2); }
.health-pill-row { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.health-pill { padding:8px 14px; border-radius:20px; border:1px solid var(--border); background:none; color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; min-height:36px; }
.health-pill:hover { border-color:var(--accent); color:var(--accent); }
.health-pill.on { background:var(--accent); border-color:var(--accent); color:#000; box-shadow:0 2px 10px rgba(200,255,0,.3); }
.health-section { margin-bottom:var(--sp-6); }
.health-section-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); padding-bottom:var(--sp-2); border-bottom:1px solid var(--border); }
.health-section-title { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; color:var(--text); }
.water-drop { font-size:28px; cursor:pointer; transition:transform .15s, opacity .15s; user-select:none; }
.water-drop:hover { transform:scale(1.15); }
.water-drop.empty { opacity:.2; }
.training-session-card { background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 60%),var(--s2); border:1px solid var(--border2); border-radius:14px; padding:var(--sp-4); margin-bottom:var(--sp-2); box-shadow:0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04); }

/* ── JOURNAL ──────────────────────────────────────────── */
.journal-lock {
  position: absolute;
  inset: 0;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 40px 32px;
}
.journal-pin-dots {
  display: flex;
  gap: 16px;
  margin: 32px 0 40px;
}
.journal-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: none;
  transition: all .15s;
}
.journal-pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(200,255,0,.4);
}
.journal-pin-dot.error {
  background: var(--red);
  border-color: var(--red);
}
.journal-numpad {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 12px;
}
.journal-num-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  transition: all .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
}
.journal-num-btn:active { background: rgba(200,255,0,.15); border-color: var(--accent); color: var(--accent); }
.journal-num-btn .sub { font-size: 8px; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.journal-num-btn.del { font-size: 18px; }

/* Journal writing area */
.journal-wrap {
  min-height: 100%;
  background: #0c0c0c;
}
.journal-entry-area {
  padding: 0 20px 120px;
}
.journal-textarea {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 17px;
  line-height: 1.8;
  font-family: 'Georgia', 'Times New Roman', serif;
  resize: none;
  min-height: 260px;
  box-sizing: border-box;
  caret-color: var(--accent);
  -webkit-text-fill-color: var(--text);
}
.journal-textarea::placeholder { color: rgba(255,255,255,.18); font-style: italic; }
.journal-past-entry {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}
.journal-past-entry:hover { background: rgba(255,255,255,.01); }
.journal-past-entry .entry-date {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 8px;
}
.journal-past-entry .entry-preview {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.55);
  font-family: 'Georgia', 'Times New Roman', serif;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* Today's earlier entries — rendered above the textarea with a time stamp.
   Similar visual language to .journal-past-entry but with a subtle accent
   stripe so they feel like part of the same day. */
.journal-today-entry {
  padding: 14px 14px 14px 16px;
  background: rgba(200,255,0,.02);
  border-left: 2px solid rgba(200,255,0,.35);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: background .15s;
}
.journal-today-entry:hover { background: rgba(200,255,0,.05); }
.journal-today-entry .entry-time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 8px;
  font-family: 'Bebas Neue', sans-serif;
}
.journal-today-entry .entry-preview {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  font-family: 'Georgia', 'Times New Roman', serif;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* ── JOURNAL BOOK VIEW ───────────────────────────────────── */

/* View toggle — sits in the header alongside the date */
.journal-view-toggle {
  display: flex;
  gap: 4px;
  background: #1a1a1a;
  border-radius: 999px;
  padding: 3px;
}
.journal-mode-pill {
  background: none;
  border: none;
  border-radius: 999px;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  transition: all .15s;
}
.journal-mode-pill.on {
  background: #c8ff00;
  color: #000;
}

/* Full-screen book mode — hide write-side chrome. The SAVE button and
   voice FAB live as siblings inside #journalContent, so they hide here. */
#journalContent.book-mode .journal-save-btn,
#journalContent.book-mode .journal-voice-btn {
  display: none !important;
}

/* Book frame — perspective parent so page turns feel physical */
.journal-book-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 180px);
  padding: 0;
}
.journal-book-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 8px;
  width: 100%;
}
.journal-book {
  position: relative;
  width: min(380px, 92vw);
  height: min(560px, 68dvh);
  perspective: 1400px;
}
/* Clickable ribbon — hint at interaction */
.journal-ribbon { cursor: pointer; transition: transform .15s; }
.journal-ribbon:hover { transform: translateY(2px); }

/* Stacked pages behind — give the book weight without extra elements */
.journal-page-behind,
.journal-page-behind-2 {
  position: absolute;
  inset: 0;
  border-radius: 2px 12px 12px 2px;
  pointer-events: none;
}
.journal-page-behind {
  background: #ede8dc;
  transform: translate(3px, 3px);
  z-index: 0;
}
.journal-page-behind-2 {
  background: #e8e2d6;
  transform: translate(6px, 6px);
  z-index: -1;
}

/* Main page — cream, with subtle bevel */
.journal-page {
  position: absolute;
  inset: 0;
  background: #f5f0e8;
  border-radius: 2px 12px 12px 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 1px 0 0 rgba(0,0,0,.08);
  z-index: 1;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.645,.045,.355,1);
  overflow: hidden;
}
.journal-page.turning-left  { transform: rotateY(-8deg); }
.journal-page.turning-right { transform: rotateY(4deg); }

/* Spine — left strip giving it physical weight */
.journal-page-spine {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 18px;
  background: linear-gradient(to right, #2c2412 0%, #3a2f1c 60%, rgba(58,47,28,0) 100%);
  pointer-events: none;
}

/* Ribbon bookmark — accent, only on latest entry */
.journal-ribbon {
  position: absolute;
  top: 0;
  right: 22px;
  width: 12px;
  height: 48px;
  background: #c8ff00;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  z-index: 3;
}

.journal-page-inner {
  position: relative;
  padding: 24px 24px 20px 36px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Date header */
.journal-page-date {
  font-size: 11px;
  color: #8a7f68;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: 'Instrument Sans', -apple-system, sans-serif;
  font-weight: 600;
  margin-bottom: 10px;
}
.journal-page-rule {
  height: 1px;
  background: #d4c9b0;
  margin-bottom: 14px;
}

/* Decorative ruled lines behind the content */
.journal-page-lines {
  position: absolute;
  top: 60px;
  left: 36px;
  right: 24px;
  bottom: 36px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 25px,
    rgba(200,180,140,.18) 25px,
    rgba(200,180,140,.18) 26px
  );
  pointer-events: none;
  z-index: 0;
}

/* Entry body — serif ink on cream */
.journal-page-content {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 14px;
  line-height: 26px; /* match ruled-lines gradient */
  color: #2c2412;
  white-space: pre-wrap;
  padding-right: 4px;
}

/* Page number — italic, centred, muted */
.journal-page-num {
  position: absolute;
  bottom: 8px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  color: #bbb5a3;
  font-family: 'Georgia', serif;
  font-style: italic;
  pointer-events: none;
  z-index: 2;
}

/* Navigation row — arrows + indicator */
.journal-book-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 320px;
  max-width: 100%;
  margin-top: 20px;
  padding: 0 4px;
}
.journal-nav-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: #ccc;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.journal-nav-btn:hover { border-color: #3a3a3a; color: #fff; }
.journal-nav-btn.disabled {
  opacity: .2;
  pointer-events: none;
}
.journal-page-indicator {
  font-size: 12px;
  color: #666;
  font-family: 'Georgia', serif;
  font-style: italic;
}
.journal-voice-btn {
  position: fixed;
  bottom: calc(88px + var(--safe-bottom));
  right: calc(20px + var(--safe-right));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--s3);
  color: var(--text2);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
  transition: all .2s;
  z-index: 5;
}
.journal-voice-btn.recording {
  background: var(--red);
  color: #fff;
  animation: pulse-rec 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255,77,109,.4);
}
@keyframes pulse-rec {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,109,.4); }
  70%  { box-shadow: 0 0 0 12px rgba(255,77,109,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,109,0); }
}
.journal-save-btn {
  position: fixed;
  bottom: calc(88px + var(--safe-bottom));
  left: calc(20px + var(--safe-left));
  padding: 12px 24px;
  border-radius: 24px;
  border: none;
  background: var(--accent);
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(200,255,0,.25);
  transition: opacity .2s;
  z-index: 5;
}
.journal-save-btn:disabled { opacity: .3; pointer-events: none; }

/* Workout template cards */
.wt-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color .15s;
}
.wt-child { border-radius:0; margin-bottom:0; border-left:none; border-right:none; border-top:none; }
.wt-child:last-child { border-bottom:none; }
.wt-start-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  padding: 10px 16px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: opacity .15s;
}
.wt-start-btn:hover { opacity: .85; }
.wt-focus-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
/* Active session overlay */
.active-session-bar {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  border-radius: 20px;
  padding: 10px 20px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  letter-spacing: 1.5px;
  cursor: pointer;
  z-index: 200;
  box-shadow: 0 4px 24px rgba(200,255,0,.35);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
/* Exercise search sheet */
.ex-search-inp {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 16px;
  color: var(--text);
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.ex-search-inp:focus { border-color: var(--accent); }
.ex-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.ex-chip.on { border-color: var(--accent); background: var(--acc-dim); color: var(--accent); }
.ex-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  gap: 12px;
}
.ex-row:last-child { border-bottom: none; }
.ex-row:hover { background: rgba(255,255,255,.02); }
/* Session logging */
.sess-ex-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 10px;
}
.sess-set-row {
  display: grid;
  grid-template-columns: 24px 1fr 1fr 28px;
  gap: 4px;
  align-items: center;
  margin-bottom: 6px;
}
.sess-num-inp {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 10px 4px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  -webkit-text-fill-color: var(--text);
}
.sess-num-inp:focus { border-color: var(--accent); }

/* Stepper control */
.sess-stepper {
  display: flex;
  align-items: center;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  height: 40px;
  min-width: 0; /* allow shrinking for large text */
}
.sess-step-btn {
  width: 36px;
  min-width: 36px;
  height: 40px;
  background: none;
  border: none;
  color: var(--text2);
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, color .1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sess-step-btn:active { background: rgba(255,255,255,.08); color: var(--accent); }

/* Rest timer — floating centre-screen overlay */
#restOverlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: restFadeIn .2s ease-out;
}
@keyframes restFadeIn { from { opacity: 0; } to { opacity: 1; } }
.rest-card {
  background: var(--s1);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 32px 36px 28px;
  min-width: 260px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.rest-cap {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--muted);
  margin-bottom: 8px;
}
.rest-time {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  color: var(--accent);
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 14px;
}
.rest-bar-wrap {
  width: 100%;
  height: 4px;
  background: var(--s2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
}
.rest-bar {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 1s linear;
}
.rest-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.rest-btn {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s;
}
.rest-btn:hover { border-color: var(--accent); }
.rest-btn-stop {
  background: rgba(255,77,109,.08);
  border-color: rgba(255,77,109,.3);
  color: var(--red);
}
.rest-btn-stop:hover { border-color: var(--red); }

/* Legacy class — kept for back-compat, no longer used */
.sess-rest-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--s2);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  margin-bottom: 12px;
}
.sess-rest-time {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--accent);
  letter-spacing: 2px;
  min-width: 80px;
  text-align: center;
}
.sess-rest-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--text2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sess-rest-presets {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}
.sess-rest-preset {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.sess-rest-preset.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--acc-dim);
}

/* PR indicator */
.sess-pr-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.2;
}
.sess-pr-badge.up { background: rgba(34,197,94,.15); color: #22c55e; }
.sess-pr-badge.down { background: rgba(255,170,77,.12); color: var(--orange); }
.sess-pr-badge.pr { background: rgba(200,255,0,.2); color: var(--accent); }

/* Live session timer */
.sess-live-timer {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 1px;
}

/* RPE chip row */
.sess-rpe-row {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 4px;
}
.sess-rpe-chip {
  width: 22px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .1s;
}
.sess-rpe-chip.on {
  border-color: var(--orange);
  background: rgba(255,170,77,.15);
  color: var(--orange);
}

/* Warmup set */
.sess-set-row.warmup {
  opacity: 0.6;
}
.sess-warmup-tag {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--blue);
  text-align: center;
}

/* Superset connector */
.sess-superset-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
  margin: -6px 0;
}
.sess-superset-line {
  height: 24px;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* Exercise history mini */
.sess-ex-history {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
}
.sess-ex-history-chip {
  flex-shrink: 0;
  padding: 4px 8px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 10px;
  color: var(--text2);
  white-space: nowrap;
}

/* ── HABITS v2 (Brief 10 redesign) ───────────────────────── */

/* Top bar — mode toggle + cog */
.hab-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 8px;
  gap: 12px;
}
.hab-mode-pill {
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: all .15s;
}
.hab-mode-pill.on {
  background: var(--accent);
  color: #000;
}
.hab-cog {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--s2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Compact status row */
.hab-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px 16px;
  gap: 12px;
}
.hab-status-left {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.hab-ring-v2 {
  position: relative;
  width: 50px; height: 50px;
  flex-shrink: 0;
}
.hab-ring-v2 svg { position: absolute; top: 0; left: 0; }
.hab-ring-v2-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.hab-status-text { min-width: 0; }
.hab-status-score {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.hab-status-sub {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: 3px;
}
.hab-streak-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--s2);
  border-radius: 999px;
  padding: 6px 12px;
  flex-shrink: 0;
}
.hab-streak-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.hab-streak-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
}

/* Section labels */
.hab-section-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  padding: 4px 4px 6px;
}
.hab-cards-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hab-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--s1);
  border-radius: 12px;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin-top: 14px;
  cursor: pointer;
  width: 100%;
  transition: color .15s, border-color .15s;
}
.hab-add-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Habit card v2 — coloured bar | inner body | optional wash + fill */
.hab-v2 {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 60%), var(--s2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  min-height: 72px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s, border-color .15s;
}
.hab-v2:active { transform: scale(.995); }
.hab-v2.done { border-color: var(--border3); }
.hab-v2-bar {
  width: 4px;
  flex-shrink: 0;
}
.hab-v2-wash {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  pointer-events: none;
  border-radius: 14px;
}
.hab-v2-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 12px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.hab-v2-icon {
  font-size: 22px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.hab-v2-info {
  flex: 1;
  min-width: 0;
}
.hab-v2-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.hab-v2.done .hab-v2-name { color: var(--text2); }
.hab-v2-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.hab-v2.done .hab-v2-meta { color: var(--muted); opacity: .7; }
.hab-v2-streak {
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}
.hab-v2-action {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.hab-v2-cta {
  background: color-mix(in srgb, var(--hab-c, var(--accent)) 12%, transparent);
  border: 1px solid var(--hab-c, var(--accent));
  color: var(--hab-c, var(--accent));
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
}

/* Yes/No toggle (32px, colour-aware) */
.hab-v2-yn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .2s;
}
.hab-v2-yn.on {
  background: var(--hab-c, var(--accent));
  border-color: var(--hab-c, var(--accent));
}
@keyframes habCheckSpring {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.hab-check-anim { animation: habCheckSpring .35s cubic-bezier(.34,1.56,.64,1); }

/* Invisible tap layer — yesno cards tap anywhere. Must sit ABOVE the card
   content (.hab-v2-inner is z-index:1, .hab-v2-action z-index:2) or every tap
   is swallowed by the content and the check never toggles. yesno actions are
   visual-only, so a full-cover tap layer on top is correct. */
.hab-v2-tap {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 3;
}

/* Counter controls (compact) */
.hab-v2-counter {
  display: flex; align-items: center; gap: 8px;
}
.hab-v2-ctr-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--s2);
  border: none;
  color: var(--text);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hab-v2-ctr-btn:active { background: var(--s3); }
.hab-v2-ctr-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  min-width: 24px;
  text-align: center;
}

/* Number input */
.hab-v2-num-input {
  display: flex; align-items: center; gap: 6px;
}
.hab-v2-num-input input {
  width: 60px;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 4px;
  outline: none;
}
.hab-v2-unit {
  font-size: 10px;
  color: var(--muted);
}

/* Supplements inline rows */
.hab-v2-supps {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding-right: 10px;
}
.hab-v2-supp {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.hab-v2-supp:first-child { border-top: none; padding-top: 0; }
.hab-v2-supp-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
  transition: all .2s;
}
.hab-v2-supp-check.on {
  background: var(--hab-c, var(--accent));
  border-color: var(--hab-c, var(--accent));
}
.hab-v2-supp-name {
  font-size: 14px;
  color: var(--text);
}
.hab-v2-supp-name.taken {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* Bottom fill bar — offset 4px from left to sit right of the colour bar */
.hab-v2-fill {
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 0;
  height: 3px;
  background: var(--s2);
}
.hab-v2-fill-inner {
  height: 100%;
  transition: width .3s ease;
}

/* All-done celebrate wash on each card (replaces full-screen overlay) */
.hab-v2.hab-celebrate {
  transition: background .5s ease;
}
.hab-v2.hab-celebrate .hab-v2-wash {
  opacity: 0.15;
  background: var(--hab-celebrate-color, var(--accent)) !important;
}

/* Full-width semicircle arc */
.hab-arc-wrap {
  position: relative;
  width: 100%;
  padding: 4px 12px 12px;
  text-align: center;
}
.hab-arc {
  width: 100%;
  height: 120px;
  display: block;
}
.hab-arc-inner {
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  text-align: center;
  pointer-events: none;
}
.hab-arc-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 2px;
}
.hab-arc-of {
  font-size: 22px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-left: 2px;
}
.hab-arc-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 4px;
}
.hab-arc-alldone .hab-arc-score,
.hab-arc-alldone .hab-arc-of { color: var(--accent); }
@keyframes habArcPulse {
  0%   { transform: scale(1); filter: brightness(1); }
  50%  { transform: scale(1.02); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}
.hab-arc-pulse { animation: habArcPulse .9s ease; }

.hab-settings-cog {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}

/* Per-habit cards */
.hab-card {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 14px;
  padding: 14px 14px 0;
  min-height: 72px;
  transition: background .3s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.hab-card.hab-done { /* .done wash — inline background set via style attr */ }
.hab-card:active { transform: scale(.995); }
.hab-card.hab-celebrate {
  background: var(--hab-celebrate-color, var(--accent)) !important;
  background-color: color-mix(in srgb, var(--hab-celebrate-color, var(--accent)) 15%, transparent) !important;
  transition: background .5s ease;
}
@keyframes habCardPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--hab-c, #c8ff00) 40%, transparent); }
  50%  { transform: scale(1.03); box-shadow: 0 0 0 14px transparent; }
  100% { transform: scale(1); }
}
.hab-card.pulse { animation: habCardPulse .45s ease; }

.hab-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
}
.hab-icon { font-size: 24px; flex-shrink: 0; }
.hab-body { flex: 1; min-width: 0; }
.hab-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hab-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.hab-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.hab-streak-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}
.hab-big-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  line-height: 1;
  min-width: 48px;
  text-align: right;
  letter-spacing: 1px;
}

.hab-stepper { display: flex; gap: 8px; align-items: center; }
.hab-step-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--s2);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.hab-step-btn.on {
  border-color: var(--hab-c);
  background: color-mix(in srgb, var(--hab-c) 12%, transparent);
  color: var(--hab-c);
}
.hab-step-btn:active { transform: scale(.92); }

.hab-num-input { display: flex; align-items: center; gap: 6px; }
.hab-num-input input {
  width: 64px;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 4px;
  outline: none;
}
.hab-unit { font-size: 10px; color: var(--muted); }

.hab-cta {
  border: 1px solid var(--hab-c, var(--accent));
  background: color-mix(in srgb, var(--hab-c, var(--accent)) 12%, transparent);
  color: var(--hab-c, var(--accent));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
}

/* Yes/No toggle circle (colour-aware) */
.hab-toggle {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: all .2s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.hab-toggle.on {
  border-color: var(--hab-c, var(--accent));
  background: color-mix(in srgb, var(--hab-c, var(--accent)) 15%, transparent);
  color: var(--hab-c, var(--accent));
}
@keyframes habCheckSpring {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.hab-check-anim::before {
  /* checkmark appears via the toggle's innerHTML; animate the whole toggle */
}
.hab-check-anim { animation: habCheckSpring .35s cubic-bezier(.34,1.56,.64,1); }

/* Bottom fill bar */
.hab-fill {
  height: 4px;
  background: var(--s2);
  margin: 0 -14px;
  border-radius: 0 0 11px 11px;
  overflow: hidden;
}
.hab-fill-inner {
  height: 100%;
  background: var(--accent);
  border-radius: 0 0 11px 11px;
  transition: width .35s ease;
}

/* Supplements composite */
.hab-supps {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 0 0 12px 36px;
  margin-top: -6px;
}
.hab-supp-row {
  display: flex; align-items: center;
  gap: 10px;
  padding: 4px 0;
  cursor: pointer;
}
.hab-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hab-supp-name {
  font-size: 14px;
  color: var(--text);
}
.hab-supp-name.taken { color: var(--accent); opacity: .85; }

/* Quiet celebration line (replaces old full-screen overlay) */
.hab-celebration-line {
  position: fixed;
  left: 0; right: 0;
  top: calc(var(--hdr-h) + var(--safe-top) + 140px);
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--accent);
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hab-celebration-line.show { opacity: 1; }

/* Monthly tapestry */
.hab-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.hab-month-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
}
.hab-month-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--text);
}
.hab-month-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hab-month-header {
  display: flex;
  align-items: center;
}
.hab-month-header .hab-month-days { margin-top: 0; }
.hab-month-namecell {
  width: 96px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hab-month-namecell span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.hab-month-days {
  display: grid;
  grid-template-columns: repeat(var(--hab-days, 30), 1fr);
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.hab-month-daynum {
  font-size: 8px;
  color: var(--muted);
  text-align: center;
}
.hab-month-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--s2);
  cursor: pointer;
  transition: transform .1s, background .2s;
  min-height: 10px;
}
.hab-month-cell:hover { transform: scale(1.2); }
.hab-month-cell.future { opacity: .4; cursor: default; }
.hab-month-cell.future:hover { transform: none; }
.hab-month-cell.today {
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9);
}
.hab-month-row {
  position: relative;
}
.hab-month-row > .hab-month-namecell,
.hab-month-row > .hab-month-days {
  display: inline-block;
}
.hab-month-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hab-month-row .hab-month-namecell,
.hab-month-row .hab-month-days {
  display: inline-flex;
}
.hab-month-row .hab-month-days { display: grid; }
.hab-month-row > .hab-month-namecell + .hab-month-days,
.hab-month-header > .hab-month-namecell + .hab-month-days {
  /* row layout fix: header uses inline flex row */
}
.hab-month-header,
.hab-month-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 4px;
}
.hab-month-stats {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--muted);
  padding-left: 96px;
  padding-top: 2px;
}

/* Swatches in Edit Habit modal */
.hab-edit-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s;
}
.hab-edit-swatch:hover { transform: scale(1.1); }
.hab-edit-swatch.on { border-color: var(--text); transform: scale(1.12); }

/* ── HABITS (legacy classes kept for compat) ───────────────── */
.habit-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all .25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.habit-card.done {
  background: rgba(200,255,0,.04);
  border-color: rgba(200,255,0,.25);
}
.habit-card:active { transform: scale(.98); }
@keyframes habitPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(200,255,0,.3); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(200,255,0,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(200,255,0,0); }
}
.habit-card.pulse { animation: habitPulse .4s ease; }

/* Progress ring */
.habit-ring {
  width: 80px; height: 80px;
  position: relative;
  flex-shrink: 0;
}
.habit-ring svg { transform: rotate(-90deg); }
.habit-ring-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

/* Streak calendar */
.streak-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.streak-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--s2);
  transition: background .2s;
  cursor: pointer;
  position: relative;
}
.streak-cell.today { box-shadow: 0 0 0 1.5px var(--accent); }
.streak-cell.lv1 { background: rgba(200,255,0,.15); }
.streak-cell.lv2 { background: rgba(200,255,0,.35); }
.streak-cell.lv3 { background: rgba(200,255,0,.6); }
.streak-cell.lv4 { background: var(--accent); }

/* Celebration overlay */
.habits-celebration {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.85);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.habits-celebration.show { opacity: 1; pointer-events: auto; }

/* Habit toggle button */
.habit-toggle {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: all .2s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.habit-toggle.on {
  border-color: var(--accent);
  background: rgba(200,255,0,.15);
  color: var(--accent);
}

/* Habit stepper */
.habit-stepper-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.habit-stepper-btn:active { background: rgba(200,255,0,.1); border-color: var(--accent); }
.habit-stepper-btn.accent {
  border-color: var(--accent);
  background: rgba(200,255,0,.08);
  color: var(--accent);
}
.sess-step-val {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
  width: 0;
  min-width: 0;
  max-width: 100%;
  -webkit-text-fill-color: var(--text);
  -webkit-text-size-adjust: 100%;
  caret-color: var(--accent);
  padding: 0;
}
.sess-step-val::placeholder {
  color: var(--muted);
  opacity: .45;
  -webkit-text-fill-color: var(--muted);
}
.sess-step-val.sess-step-placeholder {
  -webkit-text-fill-color: var(--muted);
  color: var(--muted);
  opacity: .55;
}
.sess-step-val:focus { -webkit-text-fill-color: var(--accent); }
.training-item { background:var(--s1); border:1px solid var(--border); border-radius:var(--r); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2); display:flex; align-items:center; gap:var(--sp-3); }
.training-group { font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; flex-shrink:0; white-space:nowrap; }
.training-info { flex:1; min-width:0; }
.training-name { font-size:15px; font-weight:600; color:var(--text); }
.training-meta { font-size:12px; color:var(--muted); margin-top:2px; }
.body-item { background:var(--s1); border:1px solid var(--border); border-radius:var(--r); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2); display:flex; align-items:center; gap:var(--sp-3); }
.body-val { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--text); line-height:1; }
.body-unit { font-size:13px; color:var(--muted); }
.body-date { font-size:12px; color:var(--muted); margin-left:auto; }

/* ── WINS ── */
.win-item {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.win-em { font-size: 22px; flex-shrink: 0; }
.win-body { flex: 1; }
.win-txt { font-size: 15px; color: var(--text); line-height: 1.5; }
.win-date { font-size: 12px; color: var(--muted); margin-top: var(--sp-1); }
.win-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; padding: var(--sp-1); transition: color .15s; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; }
.win-del:hover { color: var(--red); }

/* ── WAITING ── */
.wait-item {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.wait-who { background: var(--org-dim); color: var(--orange); border-radius: var(--r-sm); padding: 5px 12px; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.wait-txt { flex: 1; font-size: 15px; color: var(--text); }
.wait-res { background: none; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text2); cursor: pointer; font-size: 13px; font-weight: 500; padding: 8px 14px; transition: all .15s; flex-shrink: 0; min-height: 38px; }
.wait-res:hover { border-color: var(--green); color: var(--green); }

/* ── ONBOARDING ── */
.ob-screen { display:none; flex-direction:column; min-height:100vh; padding:32px 24px 24px; }
.ob-screen.active { display:flex; }
.ob-progress { display:flex; gap:6px; margin-bottom:32px; }
.ob-pip { height:3px; border-radius:2px; flex:1; background:var(--border2); transition:background .3s; }
.ob-pip.done { background:var(--accent); }
.ob-pip.active { background:var(--accent); opacity:.5; }
.ob-icon { font-size:48px; margin-bottom:20px; }
.ob-title { font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:2px; color:var(--text); line-height:1.1; margin-bottom:12px; }
.ob-sub { font-size:15px; color:var(--text2); line-height:1.6; margin-bottom:28px; }
.ob-spacer { flex:1; }
.ob-btn { width:100%; background:var(--accent); border:none; border-radius:var(--r); color:#000; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; padding:16px; cursor:pointer; transition:opacity .15s; margin-bottom:10px; }
.ob-btn:hover { opacity:.9; }
.ob-btn-ghost { width:100%; background:none; border:none; color:var(--muted); font-size:13px; font-weight:600; padding:10px; cursor:pointer; letter-spacing:.5px; }
.ob-btn-ghost:hover { color:var(--text2); }
.ob-choice { display:flex; align-items:center; gap:14px; padding:16px; background:var(--s1); border:2px solid var(--border); border-radius:var(--r); cursor:pointer; margin-bottom:10px; transition:border-color .15s; }
.ob-choice:hover { border-color:var(--border2); }
.ob-choice.selected { border-color:var(--accent); background:rgba(200,255,0,.06); }
.ob-choice-icon { font-size:24px; flex-shrink:0; }
.ob-choice-text { font-size:14px; font-weight:600; color:var(--text); }
.ob-choice-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.ob-section-card { padding:16px; background:var(--s1); border:1px solid var(--border); border-radius:var(--r); margin-bottom:10px; display:flex; align-items:center; gap:14px; }
.ob-section-icon { font-size:22px; flex-shrink:0; }
.ob-section-name { font-size:14px; font-weight:700; color:var(--text); }
.ob-section-desc { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.5; }

/* ── STICKIES ── */
.stickies-section { margin-bottom: 32px; }
.stickies-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stickies-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:2px; color:var(--text); }
.stickies-sub { font-size:11px; color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; font-family:'Instrument Sans',sans-serif; margin-left:8px; }
.stickies-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
@media(min-width:520px){ .stickies-grid { grid-template-columns: repeat(3,1fr); } }
@media(min-width:900px){ .stickies-grid { grid-template-columns: repeat(4,1fr); } }

.sticky {
  position: relative;
  border-radius: 2px;
  padding: 12px 14px 32px;
  min-height: 110px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 2px 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  word-break: break-word;
  font-family: 'Kalam', cursive;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(0,0,0,.82);
}
.sticky:hover { transform: translateY(-2px) rotate(0.3deg); box-shadow: 4px 6px 16px rgba(0,0,0,.4); }
.sticky::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0,0,0,.08);
  border-radius: 2px 2px 0 0;
}
.sticky-from { font-size:10px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; opacity:0.6; margin-bottom:6px; }
.sticky-text { font-family:'Kalam',cursive; font-size:16px; color:rgba(0,0,0,.82); line-height:1.55; white-space:pre-wrap; }
.sticky-meta { position:absolute; bottom:8px; left:14px; right:8px; display:flex; align-items:center; justify-content:space-between; }
.sticky-date { font-size:10px; color:rgba(0,0,0,.4); font-weight:600; }
.sticky-actions { display:flex; gap:2px; opacity:0; transition:opacity .15s; }
.sticky:hover .sticky-actions { opacity:1; }
.sticky-btn { background:rgba(0,0,0,.1); border:none; border-radius:4px; width:22px; height:22px; cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; transition:background .1s; color:rgba(0,0,0,.6); }
.sticky-btn:hover { background:rgba(0,0,0,.2); }

/* Add sticky button */
.sticky-add {
  border: 2px dashed rgba(255,255,255,.4);
  border-radius: 4px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: rgba(255,255,255,.7);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.sticky-add:hover { border-color: var(--accent); color: var(--accent); background: rgba(200,255,0,.04); }
.sticky-add-icon { font-size:22px; opacity:.8; }

/* Crumple animation */
@keyframes stickycrumple {
  0%   { transform: scale(1) rotate(0deg); opacity:1; }
  30%  { transform: scale(1.08) rotate(-3deg); }
  60%  { transform: scale(.7) rotate(8deg); opacity:.6; }
  100% { transform: scale(0) rotate(15deg); opacity:0; }
}
.sticky-crumpling { animation: stickycrumple .35s cubic-bezier(.36,.07,.19,.97) forwards; pointer-events:none; }

/* ── CAPTURE / SHOPPING ── */
.shop-home-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.shop-home-title { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 3px; color: var(--text); }
.shop-list-hd { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.shop-back-btn { background: none; border: none; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; padding: var(--sp-2) 0; letter-spacing: .3px; min-height: 44px; display: flex; align-items: center; }
.shop-list-name { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 2px; color: var(--text); flex: 1; }
.shop-capture { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.shop-inp { font-size: 16px; }
.shop-toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.shop-tool-btn {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text2); font-size: 13px; font-weight: 500; padding: 10px var(--sp-4);
  cursor: pointer; transition: all .15s; white-space: nowrap; min-height: 40px;
}
.shop-tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.shop-tool-btn.accent { background: var(--acc-dim); color: var(--accent); border-color: rgba(200,255,0,.25); }
.shop-tool-btn.danger { color: var(--red); }
.shop-tool-btn.danger:hover { border-color: var(--red); }
.shop-count { font-size: 13px; color: var(--muted); margin-bottom: var(--sp-3); }
/* Legacy shop-item — kept for pantry */
.shop-item { display: flex; align-items: center; gap: var(--sp-4); background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-4); margin-bottom: var(--sp-2); transition: opacity .2s; }
.shop-item.got { opacity: .3; }
.shop-chk { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border2); flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.shop-chk:hover { border-color: var(--accent); }
.shop-chk.on { background: var(--accent); border-color: var(--accent); }
.shop-chk.on::after { content: '✓'; font-size: 13px; color: #000; font-weight: 700; }
.shop-txt { flex: 1; font-size: 16px; color: var(--text); font-weight: 400; }
.shop-txt.done { text-decoration: line-through; color: var(--muted); }
.shop-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 20px; padding: var(--sp-1) var(--sp-2); transition: color .15s; line-height: 1; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.shop-del:hover { color: var(--red); }

/* ── MY LISTS REDESIGN ── */
.ml-section { margin-bottom: 28px; }
.ml-section-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.ml-section-title { font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:2px; color:var(--muted); }
.ml-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:520px){ .ml-tiles { grid-template-columns:repeat(3,1fr); } }
@media(max-width:360px){ .ml-tiles { grid-template-columns:1fr; } }
.ml-tile {
  background:var(--s1); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:14px; cursor:pointer; transition:border-color .15s, background .15s;
  display:flex; flex-direction:column; gap:4px; min-height:90px; position:relative;
  min-width:0; overflow:hidden;
}
.ml-tile:hover { border-color:var(--accent); background:rgba(200,255,0,.02); }
.ml-tile-emoji { font-size:22px; line-height:1; margin-bottom:4px; }
.ml-tile-name { font-size:14px; font-weight:600; color:var(--text); letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-transform:capitalize; }
.ml-tile-count { font-size:12px; color:var(--muted); }
.ml-tile-note { font-size:12px; color:var(--muted); line-height:1.4; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* ── Note content links ── */
#notepadPreview a { color:var(--accent); text-decoration:none; word-break:break-all; }
#notepadPreview a:active { opacity:0.7; }
#notepadPreview { word-break:break-word; overflow-wrap:break-word; }

/* ── NOTEPAD INTERIOR (Notes/Reference) ── */
.notepad-wrap {
  background: #0c0c0c; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.06); margin-bottom: 16px; position: relative;
}
.notepad-wrap::before {
  content: ''; position: absolute; left: 42px; top: 0; bottom: 0;
  width: 1px; background: rgba(255,80,80,.1); pointer-events: none; z-index: 1;
}
.notepad-textarea {
  width: 100%; min-height: 320px; background: transparent;
  border: none; outline: none; resize: none;
  font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,.88); padding: 20px 20px 20px 56px;
  box-sizing: border-box;
  background-image: repeating-linear-gradient(transparent,transparent 31px,rgba(255,255,255,.04) 31px,rgba(255,255,255,.04) 32px);
  background-attachment: local; caret-color: var(--accent); letter-spacing: .2px;
}
.notepad-textarea::placeholder { color:rgba(255,255,255,.18); font-style:italic; }
/* Font classes for note editor */
.notepad-textarea.font-sans, .notepad-preview.font-sans { font-family: 'Instrument Sans', sans-serif; }
.notepad-textarea.font-serif, .notepad-preview.font-serif { font-family: Georgia, 'Times New Roman', serif; }
.notepad-textarea.font-handwriting, .notepad-preview.font-handwriting { font-family: 'Kalam', cursive; }
.notepad-footer { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; background:rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.06); }

/* Format toolbar */
.notepad-toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 10px 6px 52px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: nowrap; overflow-x: auto;
}
.fmt-btn {
  background: none; border: none; color: rgba(255,255,255,.45);
  font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 5px 8px; border-radius: 6px; line-height: 1;
  transition: all .15s; white-space: nowrap; flex-shrink: 0;
  font-family: 'Instrument Sans', sans-serif;
}
.fmt-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.fmt-btn.active { background: rgba(200,255,0,.1); color: var(--accent); }
.fmt-sep { width: 1px; height: 16px; background: rgba(255,255,255,.1); margin: 0 4px; flex-shrink:0; }

/* Preview mode */
.notepad-preview {
  min-height: 320px; padding: 20px 20px 20px 56px; color: rgba(255,255,255,.88);
  font-family: 'Kalam', cursive; font-size: 16px; line-height: 32px;
  color: rgba(255,255,255,.88); cursor: text;
  background-image: repeating-linear-gradient(transparent,transparent 31px,rgba(255,255,255,.06) 31px,rgba(255,255,255,.06) 32px);
  background-attachment: local;
}
.notepad-preview h1 { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:2px; color:var(--accent); line-height:1.2; margin:8px 0 4px; }
.notepad-preview h2 { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:1.5px; color:var(--text); line-height:1.2; margin:6px 0 2px; }
.notepad-preview h3 { font-size:16px; font-weight:700; color:var(--text); line-height:1.4; margin:4px 0 2px; }
.notepad-preview strong { font-weight:700; color:#fff; }
.notepad-preview em { font-style:italic; color:rgba(255,255,255,.65); }
.notepad-preview hr { border:none; border-top:1px solid rgba(255,255,255,.1); margin:12px 0; }
.notepad-preview ul { list-style:none; padding:0; margin:0; }
.notepad-preview ul li::before { content:'• '; color:var(--accent); }
.notepad-preview ol { list-style:none; padding:0; margin:0; counter-reset:ol; }
.notepad-preview ol li { counter-increment:ol; }
.notepad-preview ol li::before { content:counter(ol)'. '; color:var(--accent); }
.notepad-preview p { margin:0; min-height:32px; }
.notepad-preview .np-empty { color:rgba(255,255,255,.18); }
.notepad-saved { font-size:11px; color:var(--muted); letter-spacing:.3px; }

/* ── LIST NOTEPAD (action list) ── */
.list-notepad {
  background: #161610; border-radius: 12px; border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 16px; overflow: hidden; position: relative;
}
.list-notepad::before {
  content: ''; position: absolute; left: 52px; top: 0; bottom: 0;
  width: 1px; background: rgba(255,80,80,.15); pointer-events: none;
}
.list-item-row {
  display: flex; align-items: center; padding: 0 12px 0 0;
  min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.05); transition: opacity .2s;
}
.list-item-row:last-child { border-bottom: none; }
.list-item-row.got { opacity: .35; }
.list-item-num { width:52px; flex-shrink:0; font-family:'Bebas Neue',sans-serif; font-size:14px; color:rgba(255,80,80,.35); text-align:center; letter-spacing:.5px; }
.list-item-chk { width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.2); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; margin-right:12px; }
.list-item-chk:hover { border-color:var(--accent); }
.list-item-chk.on { background:var(--accent); border-color:var(--accent); }
.list-item-chk.on::after { content:'✓'; font-size:11px; color:#000; font-weight:700; }
.list-item-txt { flex:1; font-family:'Kalam',cursive; font-size:16px; color:rgba(255,255,255,.88); line-height:1.4; padding:12px 0; }
.list-item-txt.done { text-decoration:line-through; color:rgba(255,255,255,.28); }
.list-item-del { background:none; border:none; color:rgba(255,255,255,.15); cursor:pointer; font-size:18px; padding:4px 6px; line-height:1; transition:color .15s; flex-shrink:0; }
.list-item-del:hover { color:var(--red); }
.list-add-row { display:flex; align-items:center; padding:0 12px 0 0; border-top:1px solid rgba(255,255,255,.05); background:rgba(255,255,255,.02); }
.list-add-inp { flex:1; background:none; border:none; outline:none; font-family:'Kalam',cursive; font-size:16px; color:rgba(255,255,255,.88); padding:12px 12px 12px 56px; caret-color:var(--accent); }
.list-add-inp::placeholder { color:rgba(255,255,255,.2); }
.list-done-toggle { font-size:12px; color:var(--muted); cursor:pointer; padding:8px 14px; text-align:center; border-top:1px solid rgba(255,255,255,.05); background:none; border-left:none; border-right:none; border-bottom:none; width:100%; letter-spacing:.3px; }
.list-done-toggle:hover { color:var(--text2); }

/* ── FAVOURITES SECTION ── */
.favs-title { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; color:var(--accent); display:flex; align-items:center; gap:8px; }

/* ── REFERENCE LIST (no checkboxes, expandable items) ── */
.ref-item {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: var(--sp-2);
  overflow: hidden;
  transition: border-color .15s;
}
.ref-item:hover { border-color: var(--border2); }
.ref-item-hd {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  cursor: pointer;
  user-select: none;
}
.ref-item-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  color: var(--accent);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.ref-item-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.ref-item-chevron {
  font-size: 12px;
  color: var(--muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.ref-item.open .ref-item-chevron { transform: rotate(90deg); }
.ref-item-body {
  display: none;
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: 14px;
  color: var(--text2);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  margin-top: 0;
  white-space: pre-wrap;
}
.ref-item.open .ref-item-body { display: block; }
.ref-mode-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--pur-dim);
  color: var(--purple);
  margin-left: 8px;
}
.pantry-mode-badge { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:2px 7px; border-radius:4px; background:rgba(255,165,0,.15); color:orange; margin-left:8px; }
.pantry-item { display:flex; align-items:center; gap:var(--sp-3); background:var(--s1); border:1px solid var(--border); border-radius:var(--r); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2); transition:all .2s; cursor:pointer; }
.pantry-item:hover { border-color:var(--border2); }
.pantry-item.out { opacity:.4; }
.pantry-dot { width:12px; height:12px; border-radius:50%; background:var(--accent); flex-shrink:0; transition:all .15s; }
.pantry-item.out .pantry-dot { background:var(--muted); }
.pantry-name { flex:1; font-size:15px; color:var(--text); }
.pantry-item.out .pantry-name { text-decoration:line-through; color:var(--muted); }

/* Quantity controls */
.pantry-qty-wrap { display:flex; align-items:center; gap:0; flex-shrink:0; }
.pantry-qty-btn {
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
  background:var(--s2); color:var(--text); font-size:16px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s; flex-shrink:0; line-height:1;
}
.pantry-qty-btn:hover { border-color:var(--accent); color:var(--accent); }
.pantry-qty-btn.minus:hover { border-color:var(--orange); color:var(--orange); }
.pantry-qty-num {
  min-width:36px; text-align:center;
  font-family:'Bebas Neue',sans-serif; font-size:22px;
  color:var(--text); line-height:1;
}
.pantry-qty-num.low { color:var(--orange); }
.pantry-qty-num.out-num { color:var(--red); }

/* ── MODAL ── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 1000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.overlay.open { display: flex; }
@media(min-width:520px) {
  .overlay { align-items: center; padding: var(--sp-5); }
  .modal { border-radius: var(--r-xl) !important; max-width: 480px; }
}
.modal {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 35%), var(--s1);
  border: 1px solid var(--border2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-6) var(--sp-6) max(40px, env(safe-area-inset-bottom, 40px));
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slideUp .2s cubic-bezier(.32,0,.67,0);
  will-change: transform;
  box-shadow: 0 -16px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mhandle {
  width: 36px; height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 0 auto var(--sp-5);
}
.mtitle {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: var(--sp-5);
}
@media(min-width:768px){ .mtitle { font-size: 30px; } }
.fld { margin-bottom: var(--sp-4); }
.flbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text2);
  margin-bottom: var(--sp-2);
  display: block;
  font-weight: 700;
}
@media(min-width:768px){ .flbl { font-size: 12px; letter-spacing: 2px; } }
.finp, .fsel {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
  padding: 14px var(--sp-4);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--accent);
  font-size: 16px;
  outline: none;
  transition: border-color .15s;
  min-height: 50px;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}
/* Date/time inputs — all instances, not just .finp */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  cursor: pointer;
}
/* Show native picker indicator, make it white */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  cursor: pointer;
  opacity: 1;
  width: 20px;
  height: 20px;
}
.finp:focus, .fsel:focus { border-color: var(--accent); }
.finp::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); }
textarea.finp {
  resize: vertical;
  min-height: 88px;
  font-size: 15px;
  line-height: 1.6;
  padding-top: var(--sp-3);
}
.frow2 { display: flex; gap: var(--sp-3); flex-direction: column; }
.frow2 .fld { flex: 1; min-width: 0; }
@media(min-width: 520px) {
  .frow2 { flex-direction: row; }
}
.mactions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.mactions .btn { flex-shrink: 1; }

/* ── MORE SECTIONS ── */
.more-section { margin-bottom: var(--sp-8); overflow: hidden; word-break: break-word; }
/* Register entries */
.reg-entry { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); align-items:flex-start; }
.reg-num { font-family:'Bebas Neue',sans-serif; font-size:20px; color:var(--muted); min-width:24px; padding-top:2px; }
.reg-name { font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px; }
.reg-contact { font-size:13px; color:var(--text2); margin-bottom:6px; }
.reg-fields { display:flex; flex-direction:column; gap:3px; margin-bottom:6px; }
.reg-field { font-size:13px; color:var(--text2); }
.reg-field-label { color:var(--muted); margin-right:4px; }
.reg-medical { font-size:13px; color:var(--orange); font-weight:600; margin-top:4px; }

.more-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.more-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 3px;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
@media(min-width:768px){ .more-section-title { font-size: 28px; letter-spacing: 4px; } }
.more-section-title svg { color: var(--accent); stroke: var(--accent); width: 18px; height: 18px; }
.more-add-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 4px;
  color: #fff;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: all .15s;
  min-height: 34px;
  white-space: nowrap;
}
@media(min-width:768px){ .more-add-btn { font-size: 13px; padding: 9px 16px; } }
.more-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── VOICE ── */
.mic-btn {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text2);
  cursor: pointer;
  width: 50px; height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all .2s;
}
.mic-btn:hover { border-color: var(--accent); color: var(--accent); }
.mic-btn.listening { background: var(--red-dim); border-color: var(--red); color: var(--red); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,77,109,.35); } 50% { box-shadow: 0 0 0 10px rgba(255,77,109,0); } }
.voice-preview { background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); font-size: 15px; color: var(--text); min-height: 56px; line-height: 1.5; margin-bottom: var(--sp-3); font-style: italic; }
.voice-preview.has-text { font-style: normal; border-color: var(--accent); }
.voice-status { font-size: 13px; color: var(--text2); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.voice-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; animation: pulse-dot 1s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── AREAS / BLOCK TYPES ── */
.ami { display: flex; align-items: center; gap: var(--sp-3); background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }
.ami-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ami-name { flex: 1; font-size: 15px; color: var(--text); }
.ami-edit { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: var(--sp-2); transition: color .15s; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.ami-edit:hover { color: var(--accent); }
.ami-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 17px; padding: var(--sp-2); transition: color .15s; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.ami-del:hover { color: var(--red); }
.swatches { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.sw { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, transform .1s; }
.sw:hover { transform: scale(1.12); }
.sw.on { border-color: #fff; }

/* ── BLOCK TASK ASSIGNMENT ── */
.blk-tasks { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: 3px; }
.blk-task-item { font-size: 10px; color: inherit; opacity: .75; display: flex; align-items: center; gap: var(--sp-1); line-height: 1.4; }
.blk-task-item.done { opacity: .4; text-decoration: line-through; }
.blk-task-item::before { content: '·'; flex-shrink: 0; }
.assign-task-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 220px; overflow-y: auto; margin-top: var(--sp-2); }
.assign-task-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); background: var(--s2); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: border-color .15s; min-height: 44px; }
.assign-task-row:hover { border-color: var(--accent); }
.assign-task-row.selected { border-color: var(--accent); background: var(--acc-dim); }
.assign-task-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.assign-task-txt { flex: 1; font-size: 14px; color: var(--text); }

/* ── CAL VIEW SWITCHER ── */
.cal-view-btn { background: none; border: none; color: var(--text); font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 600; padding: 7px 12px; border-radius: var(--r-sm); cursor: pointer; transition: all .15s; white-space: nowrap; }
.cal-view-btn.on { background: var(--accent); color: #000; }
/* Hover affordance only on true-hover (mouse) devices. On touch screens the
   :hover state sticks to the last-tapped tab, which left tapped tabs brighter
   than untapped ones — that's why the Food tab looked dimmed. Scoping to
   (hover:hover) means every unselected tab renders identically on touch. */
@media (hover: hover) { .cal-view-btn:not(.on):hover { background: var(--s2); } }
/* Health-specific tab buttons — larger and white so they're clearly visible */
#hvOverview, #hvTraining, #hvRecovery, #hvBody, #hvHabits, #hvMindset { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: .5px; }
#hvOverview.on, #hvTraining.on, #hvRecovery.on, #hvBody.on, #hvHabits.on, #hvMindset.on { color: #000; }

/* ── MONTH GRID ── */
.mgrid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: var(--sp-2); }
.mgrid-hd { text-align: center; font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; padding: var(--sp-2) 0; }
@media(min-width:768px){ .mgrid-hd { font-size: 12px; } }
.mday { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-sm); min-height: 72px; padding: var(--sp-2); cursor: pointer; transition: border-color .15s; }
.mday:hover { border-color: var(--border2); }
.mday.today { border-color: rgba(200,255,0,.4); }
.mday.other-month { opacity: .3; }
.mday-num { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: var(--sp-1); }
.mday.today .mday-num { color: var(--accent); }
.mday-dots { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.mday-dot { height: 14px; border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; padding: 0 4px; font-size: 8px; font-weight: 700; color: rgba(0,0,0,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .2px; }
.mday-event { font-size: 9px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
@media(max-width:480px) { .mday { min-height: 56px; padding: var(--sp-1); } .mday-num { font-size: 11px; } .mday-dot { font-size: 7px; height: 12px; } }

/* ── UPCOMING TIMELINE ── */
.upcoming-group { margin-bottom: var(--sp-6); }
.upcoming-month-hd { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 2px; color: var(--accent); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.upcoming-item { display: flex; gap: var(--sp-4); padding: var(--sp-4); background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: var(--sp-2); cursor: pointer; transition: border-color .15s; }
.upcoming-item:hover { border-color: var(--border2); }
.upcoming-date-col { text-align: center; min-width: 40px; flex-shrink: 0; }
.upcoming-day { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--text); line-height: 1; }
.upcoming-dow { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.upcoming-body { flex: 1; min-width: 0; }
.upcoming-title { font-size: 15px; font-weight: 600; color: var(--text); }
.upcoming-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.upcoming-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-top: var(--sp-2); letter-spacing: .3px; }

/* ── KEY DATES ── */
.date-chip-grid { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); }
.date-chip-grid-item { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; cursor: pointer; }
.kd-item { display: flex; align-items: center; gap: var(--sp-3); background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-4); margin-bottom: var(--sp-2); cursor: pointer; transition: border-color .15s; }
.kd-item:hover { border-color: var(--border2); }
.kd-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kd-body { flex: 1; min-width: 0; }
.kd-name { font-size: 15px; color: var(--text); font-weight: 600; }
.kd-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.kd-soon { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: var(--org-dim); color: var(--orange); margin-top: var(--sp-2); display: inline-block; letter-spacing: .3px; }
.kd-today { background: var(--acc-dim); color: var(--accent); }

/* ── DAY PICKER ── */
.day-picker { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.dp-day {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: none;
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.dp-day:hover { border-color: var(--accent); color: var(--accent); }
.dp-day.on { background: var(--accent); border-color: var(--accent); color: #000; }

/* ── LOADER ── */
#loader { position: fixed; inset: 0; background: #0a0a0a; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .7s ease; }
#loader.fade { opacity: 0; pointer-events: none; }
#loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader-content { position: relative; z-index: 2; text-align: center; pointer-events: none; }
.loader-logo { font-family: 'Bebas Neue', sans-serif; font-size: 60px; letter-spacing: 12px; color: var(--accent); line-height: 1; text-shadow: 0 0 60px rgba(200,255,0,.5), 0 0 120px rgba(200,255,0,.2); }
.loader-tag { font-size: 11px; letter-spacing: 3px; color: var(--text2); text-transform: uppercase; margin-top: var(--sp-3); opacity: 0; animation: fuIn .6s ease .9s forwards; }
.loader-bar { width: 180px; height: 2px; background: rgba(255,255,255,.06); border-radius: 2px; margin: var(--sp-8) auto 0; overflow: hidden; }
.loader-fill { height: 100%; background: var(--accent); width: 0; transition: width 2.2s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 16px rgba(200,255,0,.7); }
@keyframes fuIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes forYouPulse { 0% { transform:translateX(-100%); opacity:.4; } 100% { transform:translateX(100%); opacity:.4; } }

/* ── LOGIN ── */
#loginScreen { position: fixed; inset: 0; background: #0a0a0a; z-index: 8000; display: none; align-items: center; justify-content: center; padding: var(--sp-6); flex-direction: column; }
#loginScreen.show { display: flex; }
.login-box { width: 100%; max-width: 380px; }
.login-logo { font-family: 'Bebas Neue', sans-serif; font-size: 44px; letter-spacing: 7px; color: var(--accent); line-height: 1; margin-bottom: var(--sp-1); }
.login-tag { font-size: 11px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; margin-bottom: var(--sp-8); font-weight: 500; }
.login-tabs { display: flex; margin-bottom: var(--sp-5); background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: 3px; }
.login-tab { flex: 1; padding: 11px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: var(--r-sm); transition: all .15s; border: none; background: none; }
.login-tab.on { background: var(--accent); color: #000; }
.login-field { margin-bottom: var(--sp-4); }
.login-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text2); display: block; margin-bottom: var(--sp-2); font-weight: 700; }
.login-input {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 15px var(--sp-4);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--accent);
  font-size: 16px;
  outline: none;
  transition: border .15s;
  min-height: 52px;
  -webkit-appearance: none;
  appearance: none;
}
/* Override browser autofill white background */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus,
.login-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 60px var(--s2) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--accent);
  border-color: var(--border);
  background-color: var(--s2) !important;
}
.login-input:focus { border-color: var(--accent); }
.login-input::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); }
.login-btn { width: 100%; background: var(--accent); color: #000; border: none; border-radius: var(--r); padding: 16px; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 3px; cursor: pointer; margin-top: var(--sp-2); transition: opacity .15s; min-height: 54px; }
.login-btn:hover { opacity: .88; }
.login-btn:disabled { opacity: .9; cursor: default; }
.login-spinner { display:inline-block; width:15px; height:15px; border:2px solid rgba(0,0,0,.28); border-top-color:#000; border-radius:50%; vertical-align:-2px; margin-right:9px; animation:loginspin .7s linear infinite; }
@keyframes loginspin { to { transform:rotate(360deg); } }
#authTransition { position:fixed; inset:0; z-index:9998; background:#0a0a0a; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; opacity:0; transition:opacity .4s ease; }
#authTransition.in { opacity:1; }
#authTransition .at-logo { font-family:'Bebas Neue',sans-serif; font-size:clamp(40px,11vw,64px); letter-spacing:7px; color:var(--accent); text-shadow:0 0 28px rgba(200,255,0,.45); animation:atPulse 1.8s ease-in-out infinite; }
@keyframes atPulse { 0%,100%{opacity:.85} 50%{opacity:1} }
#authTransition .at-spin { width:30px; height:30px; border:3px solid rgba(200,255,0,.18); border-top-color:var(--accent); border-radius:50%; animation:loginspin .8s linear infinite; }

/* ═══════════════════════════════════════════════════════════
   HEALTH DESIGN LANGUAGE — shared primitives
   North star: the Overview dashboard. Every Health surface is
   built from these so the whole area reads as one product.
═══════════════════════════════════════════════════════════ */
.h-surface { background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 58%),var(--s1); border:1px solid var(--border2); border-radius:18px; box-shadow:0 12px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); }
.h-tile { background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 58%),var(--s2); border:1px solid var(--border2); border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06); }
/* ── TYPE SYSTEM ──────────────────────────────────────────────
   Two voices, each kept strictly in its lane:
   • Bebas Neue      — display ONLY: big numbers, section titles,
                       wordmark. Uppercase, one tracking value.
                       Never body, never small text.
   • Instrument Sans — all reading + UI text. Weight ladder:
                       400 body · 500 secondary · 600 labels/titles.
   Modular size scale (px): 10 · 11 · 12 · 14 · 16 · 20 · 24 · 32 · 40
─────────────────────────────────────────────────────────────── */
/* Bebas — display + data */
.h-display { font-family:'Bebas Neue',sans-serif; font-size:40px; line-height:.92; letter-spacing:.5px; color:var(--text); }
.h-hero    { font-family:'Bebas Neue',sans-serif; font-size:32px; line-height:.95; letter-spacing:.5px; color:var(--text); }
.h-stat    { font-family:'Bebas Neue',sans-serif; font-size:20px; line-height:.95; letter-spacing:.5px; color:var(--text); }
/* Instrument — reading + UI */
.h-title   { font-family:'Instrument Sans',sans-serif; font-size:16px; font-weight:600; line-height:1.3;  color:var(--text); }
.h-body    { font-family:'Instrument Sans',sans-serif; font-size:14px; font-weight:400; line-height:1.55; color:var(--text2); }
.h-cap     { font-family:'Instrument Sans',sans-serif; font-size:11px; font-weight:500; line-height:1.4;  color:var(--muted); }
.h-eyebrow { font-family:'Instrument Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
.h-eyebrow.accent { color:var(--accent); }
.h-micro   { font-family:'Instrument Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); }
/* Delta / status chip */
.h-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--s3); color:var(--muted); }
.h-chip.good { background:var(--grn-dim); color:var(--green); }
.h-chip.bad { background:var(--red-dim); color:var(--red); }
/* Progress / trend bar */
.h-bar { height:8px; border-radius:5px; background:var(--s1); overflow:hidden; }
.h-bar > i { display:block; height:100%; border-radius:5px; transition:width .9s cubic-bezier(.34,.8,.25,1); }
/* List row + filter pill */
.h-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--border); }
.h-pill { padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:none; color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; min-height:36px; }
.h-pill:hover { border-color:var(--accent); color:var(--accent); }
.h-pill.on { background:var(--accent); border-color:var(--accent); color:#000; }
@media(min-width:768px){ .h-display { font-size:48px; } .h-hero { font-size:40px; } }

/* ═══════════════════════════════════════════════════════════
   SIMPLICITY TEST — temporary feature hides (2026-06-26).
   Nothing is removed; these are just hidden so the app can be
   judged simpler. DELETE THIS WHOLE BLOCK to restore everything.
═══════════════════════════════════════════════════════════ */
#nav-shop,                /* bottom-nav: Capture tab */
#moreFinanceSection,      /* More → Finance (+ Spending) */
#moreGoalsSection,        /* More → Goals (relocated into Mindset) */
#moreIntegrationsSection, /* More → Integrations / Browse integrations */
#moreBackupSection,       /* More → Full Backup */
#recoverySection          /* More → Data Recovery */
{ display: none !important; }

.login-err { font-size: 13px; color: var(--red); margin-top: var(--sp-3); text-align: center; min-height: 20px; line-height: 1.5; }
.login-footer { font-size: 13px; color: var(--muted); text-align: center; margin-top: var(--sp-4); }

/* ── ANIMATIONS ── */
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes taskComplete { 0%{transform:scale(1)} 40%{transform:scale(1.03)} 100%{transform:scale(1)} }
@keyframes taskSlideOut { 0%{opacity:1;transform:translateX(0)} 100%{opacity:0;transform:translateX(60px)} }
@keyframes taskPromote { 0%{transform:scale(1);box-shadow:none} 50%{transform:scale(1.04);box-shadow:0 0 20px rgba(200,255,0,.35)} 100%{transform:scale(1);box-shadow:none} }
@keyframes pulseAccent { 0%,100%{box-shadow:0 0 0 0 rgba(200,255,0,0)} 50%{box-shadow:0 0 0 6px rgba(200,255,0,.2)} }
.task-completing { animation: taskComplete .35s ease; }
.task-promoting  { animation: taskPromote .5s ease; }

/* ── QUICK CAPTURE MENU ITEMS ── */
.qc-option {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  width: 100%;
}
.qc-option:hover { border-color: var(--accent); background: rgba(200,255,0,.03); }
.qc-option-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 2px; color: var(--accent); margin-bottom: 4px; }
.qc-option-sub { font-size: 13px; color: var(--text2); }

/* ── BULK IMPORT ── */
.bulk-row { background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); }

/* ── PARTNER / KD EXTRAS ── */
.kd-soon.kd-today { background: var(--acc-dim); color: var(--accent); }

/* ── SAFE AREA ──
   All device safe-area insets are applied once, on `body` (see the RESET
   block). Elements must NOT re-add env(safe-area-inset-*) or they double-count
   and clip the bottom nav. The only exceptions are position:fixed elements
   (Maya panel input, floating buttons), which sit outside body's padding and
   carry their own --safe-bottom offset. */

/* ── RESPONSIVE ── */
@media (max-width: 400px) {
  :root { --pad: 16px; }
  .logo { font-size: 24px; }
  .stat-grid { grid-template-columns: repeat(2,1fr); }
  .fin-summary { grid-template-columns: repeat(2,1fr); }
  .shop-tiles { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 768px) {
  :root { --pad: 32px; --hdr-h: 68px; --nav-h: 64px; }
  .view { padding: 28px 32px 48px; }
  .modal { padding: 32px 36px 40px; max-width: 520px; }
  .ti { padding: var(--sp-4) var(--sp-5); }
  .tblock-name { font-size: 16px; }
  .tblock-meta { font-size: 14px; }
  .ptxt { font-size: 16px; }
  .pin-row { padding: var(--sp-4) var(--sp-5); }
  .sv-title { font-size: 16px; }
  .sv-source { font-size: 13px; }
  .win-txt { font-size: 16px; }
  .win-date { font-size: 13px; }
  .kd-name { font-size: 16px; }
  .kd-meta { font-size: 13px; }
  .upcoming-title { font-size: 16px; }
  .upcoming-meta { font-size: 13px; }
  .snum { font-size: 44px; }
  .stat-grid { gap: 12px; }
  .health-metric-lbl { font-size: 14px; }
  .health-pill { font-size: 14px; padding: 9px 18px; }
  .training-name { font-size: 16px; }
  .training-meta { font-size: 13px; }
  .body-val { font-size: 32px; }
  .shop-tile { padding: 24px 20px; min-height: 120px; }
  .shop-txt { font-size: 17px; }
  .fin-num { font-size: 28px; }
  .bill-amount { font-size: 22px; }
}

/* === ONBOARDING ============================================================= */
#ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--s1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: obFadeIn .4s ease-out;
}
@keyframes obFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ob-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px 48px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  animation: obStepIn .35s ease-out;
}
@keyframes obStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ob-wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  letter-spacing: 6px;
  color: var(--accent);
  margin-bottom: 28px;
  line-height: 1;
}
.ob-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--text);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.2;
}
.ob-sub {
  font-size: 15px;
  color: var(--text2);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 480px;
}
.ob-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 12px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 700;
  padding: 16px 32px;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  min-width: 200px;
  -webkit-tap-highlight-color: transparent;
}
.ob-btn:hover { opacity: .88; }
.ob-btn:active { transform: scale(.98); }
.ob-btn:disabled { opacity: .4; cursor: not-allowed; }
.ob-btn.ghost {
  background: none;
  color: var(--text2);
  border: 1px solid var(--border);
}
.ob-textarea-wrap { width: 100%; max-width: 600px; position: relative; }
.ob-textarea {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  padding: 16px 18px;
  min-height: 220px;
  outline: none;
  resize: vertical;
  -webkit-text-fill-color: var(--text);
  box-sizing: border-box;
}
.ob-textarea:focus { border-color: var(--accent); }
.ob-voice-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--s1);
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ob-voice-btn.listening {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(200,255,0,.1);
  animation: obMicPulse 1.2s ease-in-out infinite;
}
@keyframes obMicPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,255,0,.4); }
  50%     { box-shadow: 0 0 0 10px rgba(200,255,0,0); }
}
.ob-char-count {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  margin-top: 6px;
  width: 100%;
  max-width: 600px;
}
.ob-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px;
}
.ob-pulse {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  animation: obPulse 1.6s ease-in-out infinite;
}
@keyframes obPulse {
  0%,100% { transform: scale(1); opacity: .5; }
  50%     { transform: scale(1.6); opacity: 1; }
}
.ob-loading-text {
  font-size: 14px;
  color: var(--text2);
  letter-spacing: .5px;
}
/* Areas grid */
.ob-areas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin-bottom: 16px;
}
.ob-area-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.ob-area-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
  transition: transform .15s;
}
.ob-area-dot:active { transform: scale(.92); }
.ob-area-name {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Instrument Sans', sans-serif;
  outline: none;
  -webkit-text-fill-color: var(--text);
  padding: 4px 0;
}
.ob-area-name:focus { color: var(--accent); }
.ob-area-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.ob-area-remove:disabled { opacity: .25; cursor: not-allowed; }
.ob-add-area {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 12px;
  cursor: pointer;
  width: 100%;
  max-width: 480px;
  margin-bottom: 24px;
}
/* Colour swatch picker */
.ob-swatch-picker {
  position: absolute;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 28px);
  gap: 8px;
  z-index: 100001;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
.ob-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s;
}
.ob-swatch:hover { transform: scale(1.1); }
.ob-swatch.selected { border-color: #fff; }
/* Work types grid */
.ob-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 16px;
}
@media (min-width: 600px) { .ob-work-grid { grid-template-columns: repeat(3, 1fr); } }
.ob-work-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ob-work-card:active { transform: scale(.98); }
.ob-work-card.selected {
  border-color: var(--accent);
  background: rgba(200,255,0,.08);
}
.ob-work-icon { font-size: 26px; line-height: 1; }
.ob-work-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.ob-work-card.selected .ob-work-label { color: var(--accent); }
.ob-input {
  width: 100%;
  max-width: 480px;
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
  -webkit-text-fill-color: var(--text);
  box-sizing: border-box;
  margin-bottom: 24px;
}
.ob-input:focus { border-color: var(--accent); }
/* Step nav */
.ob-nav {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
/* Mirror reveal */
.ob-mirror-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 96px;
  letter-spacing: 4px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}
.ob-mirror-cap {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ob-mirror-line {
  font-size: 16px;
  color: var(--text2);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 32px;
  max-width: 440px;
}
.ob-mirror-divider {
  width: 60px;
  height: 1px;
  background: var(--border);
  margin: 12px auto 28px;
}
.ob-mirror-foot {
  font-size: 14px;
  color: var(--text);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 440px;
}
.ob-error {
  color: var(--red);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  min-height: 18px;
}
.ob-skip-link {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 18px;
  padding: 8px 12px;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.15);
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.ob-skip-link:hover { color: var(--text2); }
@media (max-width: 480px) {
  .ob-wordmark { font-size: 44px; letter-spacing: 4px; }
  .ob-h1 { font-size: 22px; }
  .ob-sub { font-size: 14px; }
  .ob-mirror-num { font-size: 72px; }
}