/* ─── Design tokens ─── */
:root {
  --bg: #f5efe6;
  --text: #2b1f14;
  --muted: #8a7060;
  --panel: rgba(255,255,255,.93);
  --panel-soft: #f9f2e8;
  --border: #e8d8c0;
  --input: #ffffff;
  --accent: #c8955a;
  --accent-2: #e8b47a;
  --accent-text: #fff;
  --shadow: 0 8px 32px rgba(80, 50, 20, 0.13);
  --radius: 28px;
  --radius-sm: 16px;
  --radius-xs: 12px;
}
body.dark {
  --bg: #0d0c0b;
  --text: #f2e9df;
  --muted: #a89b8d;
  --panel: rgba(28,24,22,.97);
  --panel-soft: rgba(32,28,25,.96);
  --border: rgba(210,170,120,.15);
  --input: rgba(24,21,19,.96);
  --accent: #c8955a;
  --accent-2: #e8b47a;
  --accent-text: #fff;
  --shadow: 0 12px 40px rgba(0,0,0,.52);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.36);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .25s, color .25s;
  font-size: 15px;
}
button, input, select, textarea { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 900; }
h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); line-height: 1.1; font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 800; }
.hidden { display: none !important; }

/* ─── Background orbs ─── */
.bg-orb { position: fixed; border-radius: 999px; filter: blur(70px); z-index: 0; pointer-events: none; }
.orb-1 { width: 380px; height: 380px; top: -120px; left: -100px; background: rgba(200,149,90,.15); animation: drift 14s ease-in-out infinite; }
.orb-2 { width: 420px; height: 420px; bottom: -140px; right: -120px; background: rgba(80,200,190,.1); animation: drift2 18s ease-in-out infinite; }
@keyframes drift { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(30px,-20px) scale(1.06); } }
@keyframes drift2 { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-20px,24px) scale(1.04); } }

/* ─── Layout ─── */
.page { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; padding: 20px; }
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }

/* ─── Card ─── */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.glass { backdrop-filter: blur(18px); }

/* ─── Pills ─── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 800;
}
.brand-pill { background: var(--accent); color: var(--accent-text); }
.muted-pill { background: rgba(34,197,94,.12); color: #16a34a; border: 1px solid rgba(34,197,94,.22); }

/* ─── Auth ─── */
.auth-card { width: min(1100px, 100%); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.auth-hero { padding: 48px 40px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 28px; }
.auth-panel { padding: 48px 40px; display: flex; flex-direction: column; gap: 0; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { font-size: 2rem; }
.hero-desc { line-height: 1.6; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.hero-stats .mini-card:last-child { grid-column: 1 / -1; }
.auth-actions-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-actions-top-single { justify-content: flex-end; }
.auth-inline-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-form { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
.auth-footer { font-size: 13px; margin-top: 16px; text-align: center; }
.auth-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #dc2626; padding: 10px 14px; border-radius: var(--radius-xs); font-size: 14px; font-weight: 600; }

/* ─── Form elements ─── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 14px; font-weight: 700; color: var(--text); }
input, select, textarea {
  width: 100%; height: 48px; background: var(--input); color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--radius-xs); padding: 0 14px;
  outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { height: auto; padding: 12px 14px; resize: vertical; }
.section-label { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 10px; }

/* ─── Tabs ─── */
.tabs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  background: rgba(0,0,0,.04); padding: 6px; border-radius: 20px; margin-top: 0;
}
body.dark .tabs { background: #1a1a1a; }
.board-tabs { grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; }
.tab {
  height: 42px; border: none; background: transparent; border-radius: var(--radius-xs);
  cursor: pointer; color: var(--muted); font-weight: 700; font-size: 14px; transition: all .2s;
}
.tab.active { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
body.dark .tab.active { background: #262626; color: var(--text); }

/* ─── Buttons ─── */
.btn, .icon-btn { border: none; cursor: pointer; transition: transform .15s, opacity .2s, background .2s; font-weight: 700; }
.btn { height: 48px; padding: 0 22px; border-radius: var(--radius-xs); font-size: 15px; }
.btn-full { width: 100%; }
.btn-sm { height: 38px; padding: 0 14px; font-size: 13px; }
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--accent); transform: translateY(-1px); }
.icon-btn {
  width: 44px; height: 44px; background: var(--panel); color: var(--text);
  border-radius: var(--radius-xs); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ─── Mini cards ─── */
.mini-card {
  background: var(--panel-soft); border: 1px solid var(--border); border-radius: 22px; padding: 18px;
}
.mini-title { font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
.mini-text { font-size: 13px; color: var(--muted); line-height: 1.5; }
.big-metric { font-size: 1.5rem; font-weight: 900; margin-top: 4px; }

/* ─── Dashboard layout ─── */
.top-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.top-bar-right { display: flex; gap: 10px; align-items: center; }
.simple-top { margin-bottom: 24px; }
.dashboard-brand { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 800; }
.brand-text { font-size: 1.1rem; font-weight: 900; }
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin-bottom: 16px; }
.content-grid { display: grid; grid-template-columns: 1fr .95fr; gap: 16px; }
.left-col, .right-col { display: grid; gap: 16px; align-content: start; }

/* ─── Hero card ─── */
.hero-card { overflow: hidden; }
.hero-main { display: flex; gap: 20px; align-items: center; padding: 24px 24px 16px; }
.avatar-box {
  width: 88px; height: 88px; flex: none; border-radius: 24px;
  display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
  background: var(--panel-soft); border: 1.5px solid var(--border); overflow: hidden;
}
.avatar-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.hero-copy { flex: 1; min-width: 0; }
.hero-name-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.muted { color: var(--muted); }
.xp-wrap { margin-top: 14px; }
.progress-track { width: 100%; height: 10px; background: var(--panel-soft); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .4s ease; }
.split-line { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 0 24px 24px; }
.section-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 800; margin-bottom: 16px; padding: 24px 24px 0; }
.card > .section-title:first-child { padding-top: 24px; }
.card > .tabs { margin: 0 24px 18px; }
.card > #boardContent { padding: 0 24px 24px; }
.card > .two-cards, .card > .stack-cards { padding: 0 24px 24px; }
.card > #reviewGrid { padding: 0 24px; }
.card > .two-cards:not(:first-child) { padding-top: 0; }

/* ─── Board content spacing ─── */
.board-toolbar { margin-bottom: 14px; }
.habit-add { display: grid; grid-template-columns: 1fr 130px 100px; gap: 10px; }
.todo-add { display: grid; grid-template-columns: 1fr 130px 150px 100px; gap: 10px; }
.task-list { display: grid; gap: 10px; margin-top: 14px; }
.weekly-bonus-wrap { margin-top: 14px; }

/* ─── Task rows ─── */
.task-row {
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  padding: 16px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--panel-soft);
  transition: border-color .2s, background .2s;
}
.task-row.done { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); }
.task-left { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1; }
.check-btn {
  width: 40px; height: 40px; flex: none; border-radius: 999px; border: 1.5px solid var(--border);
  background: var(--input); color: var(--muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; transition: all .2s;
}
.task-row.done .check-btn { background: #22c55e; color: #fff; border-color: #22c55e; }
.task-meta { min-width: 0; flex: 1; }
.task-title { font-weight: 700; font-size: .95rem; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.task-row.done .task-title-main { color: #16a34a; text-decoration: line-through; opacity: .8; }
.task-sub { margin-top: 4px; font-size: 12px; color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--border); font-size: 11px; font-weight: 700; background: var(--panel-soft);
}
.chip.streak { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.3); color: #ea580c; }
.chip.chip-total { background: rgba(200,149,90,.14); border-color: rgba(200,149,90,.38); color: var(--accent); }
.chip.due { background: rgba(14,165,233,.12); border-color: rgba(14,165,233,.3); color: #0284c7; }
.task-actions { display: flex; gap: 8px; flex: none; }
.task-actions .btn { min-width: 90px; height: 40px; font-size: 13px; }
.task-actions .icon-btn { width: 40px; height: 40px; }

/* ─── Review grid ─── */
.review-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.review-cell { text-align: center; }
.review-day { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.review-date { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 700; }
.review-box { height: 38px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--panel-soft); margin-top: 6px; transition: background .3s; }
.review-box.green  { background: rgba(34,197,94,.7);  border-color: rgba(34,197,94,.4); }
.review-box.yellow { background: rgba(250,204,21,.7); border-color: rgba(250,204,21,.4); }
.review-box.red    { background: rgba(239,68,68,.55); border-color: rgba(239,68,68,.35); }
.review-box.today  { box-shadow: 0 0 0 2px var(--accent); }

/* ─── Two/stack cards container ─── */
.two-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stack-cards { display: grid; gap: 12px; }

/* ─── Hydration Panel ─── */
.hydration-panel {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 14px;
  overflow: visible;
}
.hydration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.hydration-title { font-weight: 800; font-size: 1rem; color: var(--text); }
.hydration-pct {
  font-size: 1.7rem; font-weight: 900;
  background: linear-gradient(135deg, #0e7fd4, #55c8ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hydration-body { display: flex; gap: 20px; align-items: flex-start; }

/* Liquid tank */
.liquid-tank-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.liquid-tank {
  position: relative; width: 72px; height: 220px;
  border-radius: 16px 16px 20px 20px;
  border: 2px solid var(--border);
  background: var(--panel-soft);
  overflow: hidden;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.07), 0 6px 24px rgba(0,0,0,.07);
}
body.dark .liquid-tank { box-shadow: inset 0 3px 10px rgba(0,0,0,.35), 0 6px 24px rgba(0,0,0,.25); }
.liquid-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  transition: height 1s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
/* Individual liquid layers — each has its own color and waves */
.liquid-layer {
  position: absolute; left: 0; right: 0;
  overflow: hidden;
  transition: height .9s cubic-bezier(.4,0,.2,1), bottom .9s cubic-bezier(.4,0,.2,1);
}
.liquid-layer-juice  { background: linear-gradient(180deg, #ffb833, #e07a00); }
.liquid-layer-tea    { background: linear-gradient(180deg, #c8895a, #7a4f2e); }
.liquid-layer-water  { background: linear-gradient(180deg, #55c8ff, #0e7fd4); }

.liquid-waves { position: absolute; top: -16px; left: 0; right: 0; height: 18px; pointer-events: none; }
.lwave { position: absolute; top: 0; left: -100%; width: 300%; height: 18px; }

/* Juice waves — slowest, warm */
.lwave-juice-1 { animation: waveJuice1 4.5s linear infinite; }
.lwave-juice-2 { animation: waveJuice2 6.2s linear infinite; }
@keyframes waveJuice1 { from{transform:translateX(0)} to{transform:translateX(33.33%)} }
@keyframes waveJuice2 { from{transform:translateX(0)} to{transform:translateX(-33.33%)} }

/* Tea waves — medium speed, earthy */
.lwave-tea-1 { animation: waveTea1 3.4s linear infinite; }
.lwave-tea-2 { animation: waveTea2 5.0s linear infinite; }
@keyframes waveTea1 { from{transform:translateX(0)} to{transform:translateX(-33.33%)} }
@keyframes waveTea2 { from{transform:translateX(0)} to{transform:translateX(33.33%)} }

/* Water waves — fastest, crisp */
.lwave-water-1 { animation: waveWater1 2.8s linear infinite; }
.lwave-water-2 { animation: waveWater2 4.1s linear infinite; }
.lwave-water-3 { animation: waveWater3 5.6s linear infinite; }
@keyframes waveWater1 { from{transform:translateX(0)} to{transform:translateX(33.33%)} }
@keyframes waveWater2 { from{transform:translateX(0)} to{transform:translateX(-33.33%)} }
@keyframes waveWater3 { from{transform:translateX(0)} to{transform:translateX(25%)} }

.tank-markers { position: absolute; inset: 0; pointer-events: none; }
.tank-marker { position: absolute; left: 0; right: 0; display: flex; align-items: center; }
.tank-marker::before { content:''; flex:1; height:1px; background:var(--border); opacity:.4; }
.tank-marker span { font-size:.55rem; font-weight:700; color:var(--muted); padding:0 3px; opacity:.7; }
.tank-total { font-size:.88rem; font-weight:800; color:var(--text); text-align:center; white-space:nowrap; }
.tank-goal { color:var(--muted); font-weight:600; font-size:.78rem; }

/* Hydration legend + cards */
.hydration-details { flex:1; display:flex; flex-direction:column; gap:12px; min-width:0; }
.hydration-legend { display:flex; flex-direction:column; gap:8px; }
.legend-item { display:grid; grid-template-columns:26px 1fr; grid-template-rows:auto auto; gap:2px 8px; align-items:center; }
.legend-icon { font-size:1rem; grid-row:1/3; display:flex; align-items:center; justify-content:center; }
.legend-info { display:flex; justify-content:space-between; align-items:baseline; }
.legend-name  { font-size:.78rem; font-weight:700; color:var(--text); }
.legend-amount{ font-size:.74rem; font-weight:700; color:var(--muted); }
.legend-bar-wrap { background:var(--panel-soft); border:1px solid var(--border); border-radius:999px; height:5px; overflow:hidden; grid-column:2; }
.legend-bar { height:100%; border-radius:999px; transition:width .8s cubic-bezier(.4,0,.2,1); min-width:2px; }
.drink-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.drink-card-water { border-top:3px solid #1a9fe8; }
.drink-card-tea   { border-top:3px solid #7a4f2e; }
.drink-card-juice { border-top:3px solid #e07a00; }

@keyframes sway { 0%,100%{transform:translateX(-6px)} 50%{transform:translateX(8px)} }

@media (max-width:600px) {
  .hydration-body { flex-direction:column; align-items:center; }
  .liquid-tank-wrap { flex-direction:row; gap:14px; }
  .liquid-tank { width:56px; height:150px; }
  .drink-grid { grid-template-columns:1fr; }
}


/* ─── Overlays & dialogs ─── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; backdrop-filter: blur(4px); }
.dialog { width: min(540px, 100%); padding: 28px; }
.dialog-title { font-size: 1.4rem; font-weight: 900; margin-bottom: 8px; }
.dialog-sub { font-size: 13px; margin-bottom: 16px; }
.dialog-row { display: flex; gap: 10px; margin-top: 8px; }
.center { text-align: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chips .btn { height: 36px; padding: 0 14px; font-size: 13px; }

/* ─── Level up ─── */
.levelup-dialog { position: relative; overflow: hidden; text-align: center; padding: 40px 28px 28px; }
.level-ring { position: absolute; inset: calc(50% - 70px); width: 140px; height: 140px; border-radius: 999px; border: 1px solid rgba(200,149,90,.4); animation: pulseRing 2s infinite; }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(1.3); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
.level-emoji { font-size: 5rem; margin: 10px 0 16px; position: relative; z-index: 2; animation: popFloat 1.6s ease; }
@keyframes popFloat { 0% { transform: scale(.8) translateY(10px); } 60% { transform: scale(1.15) translateY(-5px); } 100% { transform: scale(1) translateY(0); } }
.level-particles { position: absolute; inset: 0; pointer-events: none; }
.particle { position: absolute; left: 50%; top: 50%; color: #fde68a; animation: burst 1.4s ease forwards; }
@keyframes burst { 0% { transform: translate(0,0) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(.9) rotate(200deg); opacity: 0; } }

/* ─── Avatar picker ─── */
.onboarding-grid { display: grid; grid-template-columns: 260px 1fr 1fr; gap: 28px; padding: 28px; }
.avatar-setup-col { display: flex; flex-direction: column; gap: 12px; }
.avatar-preview-wrap { display: flex; justify-content: center; margin: 6px 0; }
.avatar-preview {
  width: 90px; height: 90px; font-size: 3rem; border-radius: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--panel-soft); border: 2px solid var(--border); overflow: hidden;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.avatar-type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(0,0,0,.04); padding: 5px; border-radius: 16px; }
body.dark .avatar-type-tabs { background: #1a1a1a; }
.avatar-tab { height: 36px; border: none; background: transparent; border-radius: 12px; cursor: pointer; color: var(--muted); font-weight: 700; font-size: 13px; transition: all .2s; }
.avatar-tab.active { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
body.dark .avatar-tab.active { background: #262626; }
.emoji-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.emoji-btn { height: 40px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--panel-soft); cursor: pointer; font-size: 1.3rem; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.emoji-btn:hover, .emoji-btn.selected { border-color: var(--accent); background: rgba(200,149,90,.12); transform: scale(1.08); }
.custom-emoji-row { display: flex; gap: 8px; }
.custom-emoji-row input { flex: 1; height: 38px; }
.photo-upload-area {
  border: 2px dashed var(--border); border-radius: 16px; padding: 24px 16px; text-align: center; cursor: pointer; transition: border-color .2s;
}
.photo-upload-area:hover { border-color: var(--accent); }
.photo-upload-icon { font-size: 2rem; margin-bottom: 6px; }
.photo-upload-text { font-size: 13px; color: var(--muted); font-weight: 600; }
.onboarding-header { display: flex; flex-direction: column; gap: 6px; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.form-card { overflow: hidden; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }

/* ─── Profile edit dialog ─── */
.profile-edit-dialog { display: flex; flex-direction: column; gap: 14px; max-height: 90vh; overflow-y: auto; }
.profile-edit-avatar-section { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; background: var(--panel-soft); border-radius: 20px; border: 1px solid var(--border); }
.profile-edit-avatar-section .avatar-preview { width: 80px; height: 80px; font-size: 2.5rem; }
.profile-edit-avatar-section .avatar-type-tabs { width: 100%; }
.profile-edit-avatar-section .emoji-grid { grid-template-columns: repeat(6, 1fr); }
.profile-edit-actions { margin-top: 4px; }

/* ─── Tutorial ─── */
.tutorial-card {
  width: min(520px, 100%); padding: 32px; text-align: center;
  animation: fadeUp .4s ease;
}
.tutorial-progress-track { width: 100%; height: 6px; background: var(--panel-soft); border-radius: 999px; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--border); }
.tutorial-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .4s ease; }
.tutorial-step-label { font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 16px; letter-spacing: .05em; text-transform: uppercase; }
.tutorial-icon { font-size: 3.5rem; margin-bottom: 14px; animation: popFloat 1.2s ease; }
.tutorial-title { font-size: 1.4rem; font-weight: 900; margin-bottom: 10px; }
.tutorial-body { color: var(--muted); line-height: 1.65; font-size: 15px; margin-bottom: 20px; }
.tutorial-features { display: grid; gap: 10px; margin-bottom: 20px; text-align: left; }
.tutorial-feature { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--panel-soft); border-radius: 16px; border: 1px solid var(--border); }
.tutorial-feature-icon { font-size: 1.6rem; flex: none; }
.tutorial-feature-content { }
.tutorial-feature-title { font-weight: 800; font-size: 14px; margin-bottom: 3px; }
.tutorial-feature-text { font-size: 13px; color: var(--muted); line-height: 1.4; }
.tutorial-actions { display: flex; gap: 10px; justify-content: center; }
.tutorial-actions .btn { flex: 1; max-width: 200px; }

/* ─── Animations ─── */
.fade-in { animation: fadeIn .38s ease both; }
.fade-up { animation: fadeUp .45s ease both; }
.delay-1 { animation-delay: .06s; }
.delay-2 { animation-delay: .12s; }
.delay-3 { animation-delay: .18s; }
.delay-4 { animation-delay: .24s; }
.floating { animation: floatY 5s ease-in-out infinite; }
.floating.delay-1 { animation-delay: .8s; }
.floating.delay-2 { animation-delay: 1.6s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .hero-grid, .content-grid { grid-template-columns: 1fr; }
  .onboarding-grid { grid-template-columns: 220px 1fr; }
  .onboarding-grid > .form-stack:last-child { grid-column: 2; }
  .avatar-setup-col { grid-row: 1 / 3; }
}
@media (max-width: 860px) {
  .auth-card { grid-template-columns: 1fr; }
  .auth-hero { border-right: none; border-bottom: 1px solid var(--border); padding: 32px 28px; }
  .auth-panel { padding: 32px 28px; }
  .onboarding-grid { grid-template-columns: 1fr; }
  .avatar-setup-col { grid-row: auto; }
}
@media (max-width: 700px) {
  .hero-stats, .two-cards, .drink-grid, .stats-grid { grid-template-columns: 1fr; }
  .hero-stats .mini-card:last-child { grid-column: auto; }
  .habit-add, .todo-add { grid-template-columns: 1fr; }
  .water-content { flex-direction: column; text-align: center; }
  .task-row { flex-direction: column; align-items: stretch; }
  .task-actions { justify-content: space-between; }
  .dialog-row { flex-direction: column; }
  .profile-edit-actions { flex-direction: column; }
  .review-grid { gap: 4px; }
  .review-box { height: 32px; }
  .review-day { font-size: 9px; }
}
@media (max-width: 500px) {
  .page { padding: 12px; }
  .card { border-radius: 22px; }
  .auth-hero, .auth-panel { padding: 24px 20px; }
  .hero-main { padding: 20px 20px 12px; }
  .stats-grid { padding: 0 20px 20px; }
  .section-title { padding: 20px 20px 0; }
  .card > .tabs { margin: 0 20px 14px; }
  .card > #boardContent { padding: 0 20px 20px; }
  .card > .two-cards, .card > .stack-cards { padding: 0 20px 20px; }
  .card > #reviewGrid { padding: 0 20px; }
  .onboarding-grid { padding: 20px; gap: 20px; }
  .tutorial-card { padding: 24px 20px; }
  .task-actions .btn { min-width: unset; flex: 1; }
}

/* Time planning dual-row */
.tp-row { display:flex; justify-content:space-between; align-items:center; gap:6px; margin-top:5px; }
.tp-label { font-size:.76rem; color:var(--muted); font-weight:600; white-space:nowrap; }
.tp-val { font-size:.76rem; color:var(--text); font-weight:700; text-align:right; }

/* ─── Completed todos section ─── */
.completed-section { margin-top: 16px; }
.completed-toggle {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .88rem;
  color: var(--muted); padding: 8px 4px;
  transition: color .2s;
}
.completed-toggle:hover { color: var(--text); }
.completed-toggle-icon { font-size: .65rem; transition: transform .2s; display:inline-block; }
.completed-count {
  background: var(--panel-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
  font-size: .75rem; font-weight: 700; color: var(--muted);
}
.completed-list { margin-top: 8px; }
.completed-actions {
  display: flex; justify-content: flex-end; margin-bottom: 10px;
}
.btn-sm { height: 34px; padding: 0 14px; font-size: .8rem; }
.empty-state {
  text-align: center; color: var(--muted);
  padding: 28px 16px; font-size: .9rem; font-weight: 600;
}

/* ─── Settings Drawer ─── */
.settings-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px); z-index: 900;
  opacity: 0; transition: opacity .3s ease;
}
.settings-backdrop.open { opacity: 1; }

.settings-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  background: var(--panel);
  border-left: 1.5px solid var(--border);
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
  z-index: 901;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.settings-drawer.open { transform: translateX(0); }

.settings-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 22px 16px;
  border-bottom: 1.5px solid var(--border);
  position: sticky; top: 0;
  background: var(--panel);
  z-index: 2;
}
.settings-title { font-size: 1.1rem; font-weight: 900; }

.settings-section {
  padding: 20px 22px;
  border-bottom: 1.5px solid var(--border);
}
.settings-section:last-child { border-bottom: none; }
.settings-section-label {
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 14px;
}

/* Avatar row */
.settings-avatar-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.settings-avatar-preview {
  width: 62px; height: 62px; border-radius: 18px;
  background: var(--panel-soft); border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; overflow: hidden; flex: none;
}
.settings-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.settings-avatar-tabs { display: flex; gap: 6px; flex-wrap: wrap; }

/* Theme toggle row */
.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
}
.settings-row-label { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.settings-row-icon { font-size: 1.1rem; }

/* Toggle switch */
.toggle-switch {
  width: 44px; height: 24px; border-radius: 999px;
  background: var(--border); border: none; cursor: pointer;
  position: relative; transition: background .25s ease;
  flex: none;
}
.toggle-switch.on { background: var(--accent); }
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch.on .toggle-thumb { transform: translateX(20px); }

/* Account info */
.settings-account-info { margin-bottom: 12px; }
.account-badge {
  font-size: .88rem; font-weight: 700;
  padding: 8px 12px;
  background: var(--panel-soft); border: 1.5px solid var(--border);
  border-radius: 10px; word-break: break-all;
}
.account-sub { font-size: .78rem; color: var(--muted); margin-top: 6px; }

/* Action buttons */
.settings-action-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px; margin-bottom: 8px;
  background: var(--panel-soft); border: 1.5px solid var(--border);
  border-radius: 12px; cursor: pointer; font: inherit;
  font-weight: 700; font-size: .9rem; color: var(--text);
  transition: background .2s, border-color .2s, transform .15s;
  text-align: left;
}
.settings-action-btn:hover { background: var(--border); transform: translateY(-1px); }
.settings-action-btn-danger { color: #ef4444; border-color: rgba(239,68,68,.3); }
.settings-action-btn-danger:hover { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.5); }

/* App info footer */
.settings-footer { margin-top: auto; }
.settings-app-info {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; font-weight: 700; color: var(--muted);
  margin-bottom: 12px;
}
.settings-version { font-size: .75rem; }

/* Settings gear spin on hover */
.settings-btn { transition: transform .4s ease !important; }
.settings-btn:hover { transform: rotate(60deg) translateY(-1px) !important; }

/* ─── Tag input (goals / bad habits) ─── */
.tag-input-wrap {
  min-height: 52px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  background: var(--input);
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  transition: border-color .2s;
}
.tag-input-wrap:focus-within { border-color: var(--accent); }
.tag-input-field {
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: .88rem;
  color: var(--text);
  min-width: 120px;
  flex: 1;
  padding: 2px 0;
}
.goal-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-soft);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px 3px 12px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.goal-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .7rem;
  color: var(--muted);
  padding: 0;
  line-height: 1;
  transition: color .15s;
}
.goal-tag-remove:hover { color: #ef4444; }

/* ─── Settings goals display ─── */
.settings-goals-title {
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.settings-goals-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-goal-item {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-soft);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  line-height: 1.4;
}
.settings-goal-empty {
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}



/* ─── Goals card (full-width between hero and content) ─── */
.goals-dashboard-card {
  margin-bottom: 16px;
  overflow: hidden;
  min-width: 0;
}
.goals-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}
.goals-card-header .section-title { margin-bottom: 0; gap: 8px; flex: 1; min-width: 0; }
.goals-edit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1.5px solid var(--border);
  border-radius: 10px; padding: 5px 12px;
  font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--muted); cursor: pointer; transition: all .2s;
  white-space: nowrap; flex: none;
}
.goals-edit-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(200,149,90,.08); }
.goals-view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-width: 0;
}
.goals-col { min-width: 0; overflow: hidden; }
.goals-block-label {
  font-size: .68rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.goals-chip-list {
  display: flex; flex-wrap: wrap; gap: 7px; min-height: 28px;
}
.dash-goal-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  font-size: .83rem; font-weight: 700;
  border: 1.5px solid transparent;
  transition: transform .15s, box-shadow .15s;
  cursor: default;
  max-width: 100%;
  word-break: break-word;
}
.dash-goal-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.dash-goal-chip-green {
  background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.28); color: #15803d;
}
body.dark .dash-goal-chip-green { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.32); color: #4ade80; }
.dash-goal-chip-red {
  background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #b91c1c;
}
body.dark .dash-goal-chip-red { background: rgba(239,68,68,.13); border-color: rgba(239,68,68,.32); color: #f87171; }
.dash-goal-empty { font-size: .82rem; color: var(--muted); font-style: italic; line-height: 1.5; }

.goals-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
  min-width: 0;
}
.goals-edit-actions {
  grid-column: 1 / -1;
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ─── Shop ─── */
.shop-header {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 0 18px;
}
.shop-gem-balance {
  display: flex; align-items: center; gap: 8px;
}
.shop-gem-icon { font-size: 1.5rem; }
.shop-gem-count { font-size: 1.5rem; font-weight: 900; color: var(--text); }
.shop-sub { font-size: .82rem; color: var(--muted); }

.shop-grid {
  display: flex; flex-direction: column; gap: 10px;
}
.shop-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--panel-soft);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  transition: border-color .2s, transform .15s;
}
.shop-item:hover:not(.shop-item-locked) { border-color: var(--accent); transform: translateY(-1px); }
.shop-item-owned { opacity: .7; }
.shop-item-locked { opacity: .55; }
.shop-item-icon { font-size: 1.8rem; flex: none; width: 44px; text-align: center; }
.shop-item-body { flex: 1; min-width: 0; }
.shop-item-name { font-weight: 800; font-size: .93rem; color: var(--text); margin-bottom: 2px; }
.shop-item-desc { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.shop-item-action { flex: none; }
.shop-buy-btn {
  height: 36px; padding: 0 14px; font-size: .82rem; font-weight: 800;
  white-space: nowrap;
}
.shop-buy-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
.shop-owned-badge {
  background: rgba(34,197,94,.12); border: 1.5px solid rgba(34,197,94,.3);
  color: #16a34a; border-radius: 999px;
  padding: 5px 12px; font-size: .78rem; font-weight: 800;
  white-space: nowrap;
}
body.dark .shop-owned-badge { color: #4ade80; }

/* ─── Board tabs — 4 tabs ─── */
.board-tabs { grid-template-columns: repeat(4, 1fr); }

/* ─── Mobile-first responsive overhaul ─── */
/* ─── Comprehensive mobile layout ─── */
@media (max-width: 900px) {
  /* Auth page — stack vertically, full width */
  .auth-card {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    border-radius: 0 !important;
    min-height: 100dvh;
  }
  .auth-hero {
    padding: 32px 22px 22px;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .auth-panel { padding: 24px 22px 36px; }
  .auth-page { padding: 0; align-items: flex-start; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .page { padding: 12px 12px 80px; }
  .hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .content-grid { grid-template-columns: 1fr; gap: 12px; }
  .goals-view-grid { grid-template-columns: 1fr; gap: 14px; }
  .goals-edit-grid { grid-template-columns: 1fr; }
  .hero-main { flex-direction: row; gap: 14px; padding: 18px 16px 14px; }
  .avatar-box { width: 60px; height: 60px; font-size: 1.7rem; border-radius: 16px; flex: none; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .two-cards { grid-template-columns: 1fr 1fr; }
  .board-tabs { grid-template-columns: repeat(4, 1fr); gap: 3px; }
  .tab { font-size: .72rem; height: 36px; padding: 0 2px; }
  .task-row { flex-wrap: wrap; gap: 10px; }
  .task-actions { width: 100%; justify-content: flex-end; }

  /* Habit add — show all fields stacked vertically on mobile */
  .habit-add {
    grid-template-columns: 1fr auto !important;
    gap: 8px;
  }
  .habit-add .habit-duration-input {
    grid-column: 1;
    width: 100%;
  }

  /* Todo add — stacked */
  .todo-add {
    grid-template-columns: 1fr auto !important;
    gap: 8px;
    grid-template-rows: auto auto;
  }

  .settings-drawer { width: 100vw; }
  .drink-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .hydration-body { flex-direction: column; align-items: center; gap: 16px; }
  .liquid-tank-wrap { flex-direction: row; gap: 20px; align-items: center; }
  .liquid-tank { width: 60px; height: 160px; }
  .hydration-details { width: 100%; }
  .shop-item { gap: 10px; padding: 12px; }
  .shop-item-icon { width: 36px; font-size: 1.5rem; }
  .completed-section { margin-top: 12px; }
  h2 { font-size: 1.4rem; }
  .card { border-radius: 18px; padding: 16px; }
  .review-grid { gap: 5px; }
  .review-box { height: 32px; border-radius: 9px; }
  .onboarding-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .two-cards { grid-template-columns: 1fr; }
  .drink-grid { grid-template-columns: 1fr; }
  .shop-buy-btn { padding: 0 10px; font-size: .78rem; }
  .top-bar { padding: 0 0 8px; }
  .hero-name-row h2 { font-size: 1.2rem; }
  .mini-card { padding: 12px; }
  .big-metric { font-size: 1.15rem; }
  .cat-filter-bar { gap: 5px; }
  .cat-filter-btn { padding: 5px 10px; font-size: .74rem; }
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .page { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ─── Todo category filter bar ─── */
.cat-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.cat-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.cat-filter-btn:hover { border-color: var(--accent); color: var(--text); }
.cat-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.cat-count {
  background: rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: .72rem;
  font-weight: 900;
}
.cat-filter-btn:not(.active) .cat-count {
  background: var(--border);
  color: var(--muted);
}

/* ─── Todo add row with category ─── */
.todo-add {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
}
.todo-cat-select {
  height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--input);
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  width: auto;
}

/* ─── Category group headers ─── */
.cat-group {
  margin-bottom: 12px;
}
.cat-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  text-align: left;
  font: inherit;
  color: var(--text);
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 8px;
  transition: color .15s;
}
.cat-group-header:hover { color: var(--accent); }
.cat-group-arrow {
  font-size: .65rem;
  transition: transform .2s ease;
  color: var(--muted);
}
.cat-group-name {
  font-weight: 800;
  font-size: .9rem;
  flex: 1;
}
.cat-group-count {
  background: var(--panel-soft);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted);
}
.cat-group-body { margin-bottom: 4px; }

@media (max-width: 600px) {
  .todo-add { grid-template-columns: 1fr auto; }
  .todo-add input[type="number"],
  .todo-add input[type="date"] { display: none; }
  .cat-filter-bar { gap: 4px; }
  .cat-filter-btn { padding: 5px 10px; font-size: .74rem; }
}

/* ─── Add category button ─── */
.cat-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px dashed var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.cat-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(200,149,90,.06);
}

/* ─── Inline category add ─── */
.cat-inline-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  animation: fadeUp .2s ease;
}
.cat-name-input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid var(--accent);
  background: var(--input);
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  outline: none;
  max-width: 240px;
}

/* ─── Support banner ─── */
.support-banner {
  position: sticky;
  top: 0;
  z-index: 500;
  background: linear-gradient(135deg, #c8955a 0%, #d4a96a 50%, #c0854a 100%);
  box-shadow: 0 2px 12px rgba(160,100,40,.25);
  animation: bannerSlideDown .4s cubic-bezier(.4,0,.2,1);
}
@keyframes bannerSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.banner-hiding {
  animation: bannerSlideUp .35s cubic-bezier(.4,0,.2,1) forwards !important;
}
@keyframes bannerSlideUp {
  to { transform: translateY(-100%); opacity: 0; }
}
.support-banner-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  position: relative;
}
.support-emoji {
  font-size: 1.3rem;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.support-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.support-main {
  font-weight: 800;
  font-size: .9rem;
  color: #fff;
  letter-spacing: -.01em;
}
.support-sub {
  font-size: .78rem;
  color: rgba(255,255,255,.82);
  font-weight: 500;
}
.support-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.95);
  color: #8b5e1a;
  font-weight: 800;
  font-size: .82rem;
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  flex: none;
  transition: background .2s, transform .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  white-space: nowrap;
}
.support-cta:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.support-close {
  background: rgba(255,255,255,.2);
  border: none;
  color: rgba(255,255,255,.9);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .2s;
}
.support-close:hover { background: rgba(255,255,255,.35); }

@media (max-width: 500px) {
  .support-sub { display: none; }
  .support-cta { font-size: .78rem; padding: 6px 12px; }
  .support-banner-inner { padding: 10px 14px; gap: 8px; }
}

/* ─── Clickable goal chips ─── */
.dash-goal-clickable {
  cursor: pointer;
  background: none;
  border: 1.5px solid rgba(34,197,94,.28);
  font: inherit;
  position: relative;
  transition: all .2s ease;
}
.dash-goal-clickable:hover {
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(34,197,94,.2);
}
.goal-achieve-hint {
  font-size: .7rem;
  opacity: 0;
  transition: opacity .2s;
  margin-left: 2px;
}
.dash-goal-clickable:hover .goal-achieve-hint { opacity: 1; }
.goals-hint {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
  opacity: .7;
}

/* ─── Achievements section ─── */
.achieve-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.5px solid var(--border);
}
.achieve-section-label {
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 10px;
}
.achieve-list { display: flex; flex-direction: column; gap: 7px; }
.achieve-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: linear-gradient(135deg, rgba(250,204,21,.08), rgba(34,197,94,.08));
  border: 1.5px solid rgba(250,204,21,.3);
  border-radius: 12px;
  animation: achieveIn .35s cubic-bezier(.4,0,.2,1);
}
@keyframes achieveIn { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
.achieve-star { font-size: 1rem; flex: none; }
.achieve-text { flex: 1; font-weight: 700; font-size: .88rem; color: var(--text); }
.achieve-date { font-size: .72rem; color: var(--muted); flex: none; }

/* ─── Achievement celebration popup ─── */
.achieve-pop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .3s ease;
}
.achieve-pop-visible { opacity: 1; }
.achieve-pop-card {
  background: var(--panel);
  border-radius: 28px;
  padding: 40px 32px 32px;
  text-align: center;
  width: min(400px, 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
  animation: popBounce .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popBounce { from{transform:scale(.7)} to{transform:scale(1)} }
.achieve-pop-emoji {
  font-size: 4.5rem;
  margin-bottom: 12px;
  animation: starSpin .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes starSpin { from{transform:scale(0) rotate(-90deg)} to{transform:scale(1) rotate(0)} }
.achieve-pop-title { font-family:var(--font,inherit); font-size:1.6rem; font-weight:900; margin-bottom:6px; }
.achieve-pop-goal {
  font-size:1rem; font-weight:700; color:var(--accent);
  margin:10px 0 8px; font-style:italic;
}
.achieve-pop-sub { color:var(--muted); font-size:.88rem; margin-bottom:24px; line-height:1.5; }
.achieve-pop-close { width:100%; height:50px; font-size:1rem; }

/* Confetti particles */
.achieve-confetti {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--c);
  top: 50%; left: 50%;
  pointer-events: none;
  animation: confettiBurst .9s ease forwards;
}
@keyframes confettiBurst {
  0%  { transform:translate(0,0) rotate(0) scale(1); opacity:1; }
  100%{ transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.4); opacity:0; }
}

/* ─── Perfect week bonus button ─── */
.btn-weekly-bonus {
  width: 100%;
  background: linear-gradient(135deg, #c8955a, #e8b96a);
  color: #fff;
  font-weight: 900;
  font-size: .9rem;
  height: 50px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(200,149,90,.35);
  transition: transform .2s, box-shadow .2s;
  letter-spacing: -.01em;
}
.btn-weekly-bonus:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,149,90,.45); }

/* ─── Toast notification ─── */
.hq-toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  z-index: 9998;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.hq-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Birthday confetti around avatar ─── */
.avatar-box {
  position: relative !important;
  overflow: visible !important;
}
.bday-confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--c);
  pointer-events: none;
  z-index: 10;
  transform-origin: center;
  animation: confettiFly 1.8s ease-in-out infinite alternate;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
@keyframes confettiFly {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.4);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(360deg) scale(1);
    opacity: 0.85;
  }
}

/* ─── Settings support card ─── */
.settings-support-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(200,149,90,.12), rgba(232,185,106,.10));
  border: 1.5px solid rgba(200,149,90,.3);
  border-radius: 16px;
  text-decoration: none;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  cursor: pointer;
}
.settings-support-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(200,149,90,.18);
}
.settings-support-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.settings-support-icon {
  font-size: 1.7rem;
  flex: none;
  animation: coffeeWobble 3s ease-in-out infinite;
}
@keyframes coffeeWobble {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}
.settings-support-copy { min-width: 0; }
.settings-support-title { font-weight: 800; font-size: .88rem; color: var(--text); }
.settings-support-sub { font-size: .76rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.settings-support-cta {
  font-size: .78rem;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
  flex: none;
}

/* ─── All tasks filter button styling ─── */
.cat-filter-btn[data-cat="__all__"] {
  border-style: solid;
  background: var(--panel-soft);
}
.cat-filter-btn[data-cat="__all__"].active {
  background: #1e293b;
  border-color: #1e293b;
  color: #fff;
}
body.dark .cat-filter-btn[data-cat="__all__"].active {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #1e293b;
}

/* ─── Habit add mobile — show duration on its own row ─── */
@media (max-width: 768px) {
  .habit-add {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .habit-add #newHabitTitle { grid-column: 1 / 3; }
  .habit-add .habit-duration-input { grid-column: 1; }
  .habit-add #addHabitBtn { grid-column: 2; grid-row: 2; }

  .todo-add {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .todo-add #newTodoTitle { grid-column: 1 / 3; }
  .todo-add #newTodoDuration { grid-column: 1; }
  .todo-add #newTodoCategory { grid-column: 1; }
  .todo-add #addTodoBtn { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}

/* ─── Routine Meter brand identity ─── */
.dashboard-brand .brand-text {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--accent) 0%, #d4884a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Goals card redesign ─── */
.goals-card { overflow: hidden; min-width: 0; margin-bottom: 16px; }
.goals-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; gap: 12px;
}
.goals-card-header .section-title { margin-bottom: 0; flex: 1; min-width: 0; }
.goals-edit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 5px 12px; font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--muted); cursor: pointer; transition: all .2s; white-space: nowrap; flex: none;
}
.goals-edit-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(200,149,90,.08); }
.goals-section { margin-bottom: 4px; }
.goals-section-label {
  font-size: .7rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); margin-bottom: 10px;
}
.goals-section-label-gold { color: var(--accent); }
.goals-divider { height: 1px; background: var(--border); margin: 14px 0; }
.goals-row-list { display: flex; flex-direction: column; gap: 7px; }

/* Goal rows — themed with the app style */
.goal-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 14px;
  background: var(--panel-soft); border: 1.5px solid var(--border);
  transition: all .2s ease; min-width: 0;
}
.goal-row:hover { border-color: rgba(34,197,94,.3); }
.goal-row-bad:hover { border-color: rgba(239,68,68,.3); }
.goal-row-done {
  background: rgba(34,197,94,.07);
  border-color: rgba(34,197,94,.25);
}
.goal-row-bad.goal-row-done {
  background: rgba(239,68,68,.07);
  border-color: rgba(239,68,68,.22);
}
.goal-row-done .goal-row-text { text-decoration: line-through; opacity: .6; }

.goal-check-btn {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 2px solid var(--border); background: var(--panel);
  cursor: pointer; font-size: .8rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease; color: transparent;
}
.goal-check-btn:hover { border-color: #22c55e; background: rgba(34,197,94,.1); color: #22c55e; }
.goal-check-bad:hover { border-color: #ef4444; background: rgba(239,68,68,.1); color: #ef4444; }
.goal-check-done {
  background: #22c55e; border-color: #16a34a; color: #fff !important;
}
.goal-check-bad.goal-check-done {
  background: #ef4444; border-color: #b91c1c; color: #fff !important;
}
.goal-row-text {
  flex: 1; font-size: .9rem; font-weight: 600;
  color: var(--text); line-height: 1.4; min-width: 0;
}
.goal-achieve-btn {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  padding: 0 2px; opacity: .7; transition: opacity .15s, transform .15s; flex: none;
}
.goal-achieve-btn:hover { opacity: 1; transform: scale(1.2); }
.goal-empty-state { font-size: .83rem; color: var(--muted); font-style: italic; padding: 4px 0; }

.goals-edit-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px;
}
.goals-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ─── Skill badge on tasks ─── */
.skill-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 800;
  white-space: nowrap;
}
.skill-btn { font-size: .85rem; opacity: .7; }
.skill-btn:hover { opacity: 1; }

/* ─── Skill picker popup ─── */
.skill-picker-pop {
  position: fixed; z-index: 9990;
  background: var(--panel); border: 1.5px solid var(--border);
  border-radius: 18px; padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  width: 240px;
  animation: fadeUp .2s ease;
}
.skill-picker-title { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.skill-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.skill-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--panel-soft);
  cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--text); transition: all .15s ease;
}
.skill-opt:hover { border-color: var(--accent); background: rgba(200,149,90,.08); }
.skill-opt.active { border-color: var(--accent); background: rgba(200,149,90,.15); color: var(--accent); }
.skill-opt-label { font-size: .78rem; }
.skill-opt-clear { grid-column: 1 / -1; justify-content: center; color: var(--muted); }

/* ─── Skipped tasks ─── */
.task-row.skipped { opacity: .55; background: var(--panel-soft); }
.task-row.skipped .task-title-main { text-decoration: line-through; }
.skip-btn { font-size: .9rem; opacity: .6; }
.skip-btn:hover { opacity: 1; }
.skip-active { background: rgba(234,179,8,.12) !important; border-color: rgba(234,179,8,.4) !important; color: #a16207 !important; opacity: 1 !important; }
.skipped-count { background: rgba(234,179,8,.15); color: #92400e; border-radius: 999px; padding: 1px 8px; }

@media (max-width: 768px) {
  .goals-edit-cols { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   HYDRATION CARD — Full rework
════════════════════════════════════════ */
.hydration-card {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}

/* Top summary bar */
.hyd-top {
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, rgba(14,127,212,.08), rgba(85,200,255,.06));
  border-bottom: 1.5px solid var(--border);
}
body.dark .hyd-top { background: linear-gradient(135deg, rgba(14,127,212,.15), rgba(85,200,255,.08)); }
.hyd-title-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.hyd-title { font-weight: 900; font-size: 1rem; color: var(--text); }
.hyd-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hyd-pct {
  font-size: 1.4rem; font-weight: 900;
  background: linear-gradient(135deg, #0e7fd4, #55c8ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hyd-vol { font-size: .82rem; font-weight: 700; color: var(--muted); }
.hyd-cal {
  background: rgba(249,115,22,.1); border: 1.5px solid rgba(249,115,22,.25);
  color: #c2410c; border-radius: 999px; padding: 3px 10px;
  font-size: .75rem; font-weight: 800;
}
body.dark .hyd-cal { color: #fb923c; }

/* Segmented progress bar */
.hyd-progress-bar-wrap {
  position: relative; height: 10px;
  background: var(--panel-soft); border-radius: 999px; overflow: hidden;
  border: 1px solid var(--border); margin-bottom: 12px;
}
.hyd-progress-bar {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, #0e7fd4, #55c8ff);
  border-radius: 999px;
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
.hyd-pbar-tea { background: linear-gradient(90deg, #7a4f2e, #b87a50); z-index: 2; }
.hyd-pbar-juice { background: linear-gradient(90deg, #e07a00, #ffaa33); z-index: 1; }

/* Legend */
.hyd-legend-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.hyd-leg-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.hyd-leg-label { font-size: .76rem; font-weight: 700; color: var(--muted); }

/* Tank + cards row */
.hyd-tank-row {
  display: flex; gap: 0; align-items: stretch;
}
.hyd-tank {
  position: relative; width: 56px; flex: none;
  background: var(--panel-soft);
  border-right: 1.5px solid var(--border);
  overflow: hidden;
}
/* Reuse liquid-layer classes from existing CSS */

.tank-markers {
  position: absolute; inset: 0; pointer-events: none;
}
.tank-marker {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center;
}
.tank-marker::before { content: ''; flex: 1; height: 1px; background: var(--border); opacity: .4; }
.tank-marker span { font-size: .5rem; font-weight: 700; color: var(--muted); padding: 0 3px; opacity: .6; }

/* Drink cards grid */
.hyd-drink-cards {
  flex: 1; padding: 14px 14px 14px 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  align-content: start;
}
.mini-card.drink-card-water { border-top: 3px solid #1a9fe8; }
.mini-card.drink-card-tea   { border-top: 3px solid #7a4f2e; }
.mini-card.drink-card-juice { border-top: 3px solid #e07a00; }
.mini-card.drink-card-custom { border-top: 3px solid #a78bfa; }

.drink-cal-badge {
  display: inline-block; margin-top: 4px;
  font-size: .72rem; font-weight: 700; color: #c2410c;
  background: rgba(249,115,22,.1); border-radius: 999px;
  padding: 2px 8px;
}
.custom-drink-add-btn {
  grid-column: 1 / -1;
  background: none; border: 1.5px dashed var(--border);
  border-radius: 14px; padding: 10px;
  font: inherit; font-size: .82rem; font-weight: 700;
  color: var(--muted); cursor: pointer; transition: all .2s;
}
.custom-drink-add-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(200,149,90,.05); }

/* Custom drink form */
.custom-drink-form {
  margin-top: 10px; padding: 16px; border-radius: 16px;
  animation: fadeUp .25s ease;
}
.custom-drink-title { font-weight: 800; font-size: .9rem; margin-bottom: 12px; }
.custom-drink-row  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.custom-drink-row2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.custom-drink-color-row label { font-size: .76rem; font-weight: 700; color: var(--muted); display: block; margin-bottom: 6px; }
.color-wheel-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.color-dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s, border-color .15s; padding: 0;
}
.color-dot:hover { transform: scale(1.2); border-color: var(--text); }
.color-preview { width: 24px; height: 24px; border-radius: 50%; margin-top: 6px; border: 2px solid var(--border); }
.custom-drink-actions { display: flex; gap: 8px; }

/* ════════════════════════════════════════
   GOALS — deadline badge + date btn
════════════════════════════════════════ */
.goal-row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.goal-row-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.goal-deadline-badge {
  font-size: .68rem; font-weight: 800;
  background: rgba(34,197,94,.1); border: 1.5px solid rgba(34,197,94,.3);
  color: #15803d; border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}
body.dark .goal-deadline-badge { color: #4ade80; }
.deadline-urgent {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.35) !important;
  color: #b91c1c !important;
  animation: urgentPulse 1.5s ease-in-out infinite;
}
@keyframes urgentPulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.goal-date-btn {
  background: none; border: none; cursor: pointer; font-size: .85rem;
  opacity: .45; padding: 0 2px; transition: opacity .15s;
}
.goal-date-btn:hover { opacity: 1; }
.goal-date-input {
  height: 30px; padding: 0 8px; border-radius: 8px;
  border: 1.5px solid var(--accent); background: var(--input);
  color: var(--text); font: inherit; font-size: .8rem;
}
.goal-achieve-btn { background: none; border: none; cursor: pointer; font-size: .9rem; padding: 0 2px; transition: transform .15s; }
.goal-achieve-btn:hover { transform: scale(1.25); }

@media (max-width: 600px) {
  .hyd-drink-cards { grid-template-columns: 1fr 1fr; padding: 10px; }
  .hyd-tank { width: 40px; }
  .custom-drink-row { grid-template-columns: 1fr 1fr; }
  .custom-drink-row input:last-child { grid-column: 1 / -1; }
}



/* ════════════════════════════════════════
   GOALS — dropdowns + remove actions
════════════════════════════════════════ */
.goal-dropdown-wrap {
  margin-top: 10px;
}
.goal-dropdown-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 800;
  transition: all .2s ease;
}
.goal-dropdown-toggle:hover {
  border-color: rgba(34,197,94,.3);
  transform: translateY(-1px);
}
.goal-dropdown-toggle-bad:hover {
  border-color: rgba(239,68,68,.3);
}
.goal-dropdown-toggle-left {
  display: inline-flex; align-items: center; gap: 10px;
}
.goal-dropdown-icon {
  font-size: .78rem;
  opacity: .7;
}
.goal-dropdown-count {
  min-width: 26px; height: 26px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,.1);
  color: #15803d;
  font-size: .74rem;
  font-weight: 900;
  padding: 0 8px;
}
.goal-dropdown-toggle-bad .goal-dropdown-count {
  background: rgba(239,68,68,.1);
  color: #b91c1c;
}
body.dark .goal-dropdown-count { color: #4ade80; }
body.dark .goal-dropdown-toggle-bad .goal-dropdown-count { color: #f87171; }
.goal-dropdown-list {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 10px;
}
.goal-action-btn {
  background: none; border: none; cursor: pointer;
  font-size: .9rem; line-height: 1;
  padding: 0 2px; opacity: .55;
  transition: transform .15s ease, opacity .15s ease;
}
.goal-action-btn:hover {
  opacity: 1;
  transform: scale(1.12);
}
.goal-remove-btn:hover { color: #ef4444; }
.goal-row-inline {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
}
.goal-row-inline .goal-row-text {
  flex: 1;
}

/* ════════════════════════════════════════
   SETTINGS — Supabase block
════════════════════════════════════════ */
.settings-note {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--muted);
}
.settings-checkbox-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
}
.settings-checkbox-row input {
  width: 16px; height: 16px;
}
.supabase-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.settings-inline-status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--muted);
}
.settings-inline-status.error {
  color: #b91c1c;
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.08);
}
body.dark .settings-inline-status.error {
  color: #fca5a5;
}

/* ════════════════════════════════════════
   Publishable UI polish — cleaner dashboard spacing
   Keeps all existing features; only improves layout/visuals.
════════════════════════════════════════ */
:root {
  --bg: #f7f1e8;
  --panel: rgba(255, 253, 249, .96);
  --panel-soft: #fbf4ea;
  --border: #eadac4;
  --shadow: 0 18px 55px rgba(73, 45, 19, .10);
  --shadow-soft: 0 10px 32px rgba(73, 45, 19, .07);
}

body {
  line-height: 1.45;
  background:
    radial-gradient(circle at top left, rgba(200,149,90,.16), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(102,174,148,.12), transparent 34rem),
    var(--bg);
}

.bg-orb { opacity: .55; }

.page {
  max-width: 1180px;
  padding: 28px 24px 88px;
}

.page.dashboard {
  max-width: 1180px;
}

.card {
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.dashboard .card {
  overflow: hidden;
}

.top-bar {
  margin-bottom: 26px;
  min-height: 48px;
}

.dashboard-brand {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 253, 249, .82);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.top-bar-right .icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 253, 249, .88);
}

.hero-grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, .86fr);
  gap: 24px;
  margin-bottom: 24px;
}

.content-grid {
  grid-template-columns: minmax(0, 1fr) minmax(390px, .96fr);
  gap: 24px;
}

.left-col, .right-col {
  gap: 24px;
}

.hero-card {
  min-height: 260px;
}

.hero-main {
  padding: 34px 34px 24px;
  gap: 24px;
  align-items: flex-start;
}

.avatar-box {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: linear-gradient(180deg, #fffaf2, var(--panel-soft));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--shadow-soft);
}

.avatar-box img {
  border-radius: 26px;
}

.hero-name-row {
  gap: 12px;
  margin-bottom: 6px;
}

.hero-name-row h2 {
  font-size: clamp(2rem, 3vw, 2.7rem);
  letter-spacing: -.04em;
}

#heroMeta {
  font-size: 1rem;
}

.xp-wrap {
  margin-top: 18px;
}

.progress-track {
  height: 11px;
  background: #fff8ef;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 34px 34px;
}

.stats-grid .mini-card {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mini-card {
  border-radius: 22px;
  padding: 20px;
  background: linear-gradient(180deg, var(--panel-soft), rgba(255,255,255,.58));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.mini-title {
  font-size: .87rem;
  margin-bottom: 8px;
}

.big-metric {
  font-size: 1.65rem;
  letter-spacing: -.03em;
}

.section-title {
  padding: 28px 28px 0;
  margin-bottom: 18px;
  font-size: 1.08rem;
  letter-spacing: -.01em;
}

.card > .tabs {
  margin: 0 28px 22px;
}

.card > #boardContent {
  padding: 0 28px 30px;
}

.card > #reviewGrid {
  padding: 0 28px;
}

.card > .two-cards,
.card > .stack-cards {
  padding: 0 28px 30px;
}

.two-cards {
  gap: 16px;
}

.tp-row {
  gap: 14px;
  align-items: flex-start;
}

.tp-val {
  text-align: right;
  line-height: 1.35;
}

.tabs {
  padding: 7px;
  gap: 7px;
  border-radius: 22px;
}

.tab {
  height: 46px;
  border-radius: 16px;
  font-size: .93rem;
}

.tab.active {
  box-shadow: 0 8px 22px rgba(36, 24, 14, .08);
}

input, select, textarea {
  height: 52px;
  border-radius: 15px;
  background: rgba(255,255,255,.88);
}

input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(200,149,90,.12);
}

.btn {
  height: 52px;
  border-radius: 15px;
}

.btn-primary {
  box-shadow: 0 10px 22px rgba(200,149,90,.24);
}

/* Goals spacing */
.goals-card {
  margin-bottom: 24px;
}

.goals-card-header {
  padding: 28px 28px 0;
  margin-bottom: 20px;
}

.goals-card-header .section-title {
  padding: 0 !important;
}

.goals-edit-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
}

#dashGoalsView,
#dashGoalsEdit {
  padding: 0 28px 30px;
}

.goals-section-label {
  font-size: .76rem;
  letter-spacing: .105em;
  margin-bottom: 12px;
}

.goals-row-list {
  gap: 10px;
}

.goal-row {
  padding: 13px 16px;
  border-radius: 17px;
  background: linear-gradient(180deg, var(--panel-soft), rgba(255,255,255,.68));
}

.goal-check-btn {
  width: 32px;
  height: 32px;
}

.goal-row-text {
  font-size: .95rem;
}

.goals-divider {
  margin: 20px 0;
}

.goal-dropdown-wrap {
  margin-top: 12px;
}

.goal-dropdown-toggle {
  border-radius: 16px;
  padding: 12px 14px;
}

.goal-dropdown-list {
  padding-top: 10px;
}

/* Mission board spacing */
.habit-add {
  grid-template-columns: minmax(0, 1fr) 150px 112px;
  gap: 12px;
}

.todo-add {
  grid-template-columns: minmax(0, 1fr) 132px 148px 112px;
  gap: 12px;
}

.task-list {
  gap: 12px;
  margin-top: 18px;
}

.task-row {
  border-radius: 20px;
  padding: 17px;
}

.check-btn {
  width: 42px;
  height: 42px;
}

/* Review calendar */
.review-grid {
  gap: 10px;
  margin-bottom: 18px;
}

.review-box {
  height: 42px;
  border-radius: 14px;
  background: #fff8ef;
}

.review-day {
  font-size: .72rem;
}

.review-date {
  font-size: .82rem;
}

/* Auth page polish */
.auth-card {
  max-width: 1060px;
  border-radius: 34px;
}

.auth-hero,
.auth-panel {
  padding: 54px 46px;
}

.auth-form {
  gap: 16px;
}

.auth-footer {
  line-height: 1.55;
}

.hero-stats {
  gap: 16px;
}

/* Dark mode cascade handled in consolidated block at end of file */

@media (max-width: 1100px) {
  .page, .page.dashboard { max-width: 980px; }
  .hero-grid { grid-template-columns: 1fr; }
  .content-grid { grid-template-columns: 1fr; }
  .hero-grid > .card:not(.hero-card) .two-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .page { padding: 16px 14px 86px; }
  .card { border-radius: 24px; }
  .dashboard .card { padding: 0; }
  .top-bar { margin-bottom: 16px; }
  .dashboard-brand { padding: 9px 13px; }
  .hero-grid, .content-grid, .left-col, .right-col { gap: 16px; }
  .hero-main { padding: 22px 20px 18px; align-items: center; }
  .avatar-box { width: 68px; height: 68px; border-radius: 20px; }
  .hero-name-row h2 { font-size: 1.55rem; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 20px 22px; gap: 10px; }
  .stats-grid .mini-card { min-height: 82px; }
  .section-title { padding: 22px 20px 0; margin-bottom: 15px; }
  .card > .tabs { margin: 0 20px 18px; }
  .card > #boardContent { padding: 0 20px 22px; }
  .card > #reviewGrid { padding: 0 20px; }
  .card > .two-cards, .card > .stack-cards { padding: 0 20px 22px; }
  .two-cards, .hero-grid > .card:not(.hero-card) .two-cards { grid-template-columns: 1fr; }
  .goals-card { margin-bottom: 16px; }
  .goals-card-header { padding: 22px 20px 0; }
  #dashGoalsView, #dashGoalsEdit { padding: 0 20px 22px; }
  .board-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .board-tabs::-webkit-scrollbar { display: none; }
  .board-tabs .tab { min-width: 116px; flex: 1; }
  .habit-add { grid-template-columns: 1fr; }
  .habit-add #newHabitTitle,
  .habit-add .habit-duration-input,
  .habit-add #addHabitBtn { grid-column: auto; grid-row: auto; }
  .todo-add { grid-template-columns: 1fr; }
  .todo-add #newTodoTitle,
  .todo-add #newTodoDuration,
  .todo-add #newTodoCategory,
  .todo-add #addTodoBtn { grid-column: auto; grid-row: auto; }
  .task-row { padding: 14px; }
}

@media (max-width: 520px) {
  .page { padding-inline: 12px; }
  .hero-main { align-items: flex-start; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .mini-card { padding: 15px; }
  .big-metric { font-size: 1.35rem; }
  .review-grid { gap: 6px; }
  .review-box { height: 34px; border-radius: 10px; }
  .review-day { font-size: .62rem; }
  .review-date { font-size: .72rem; }
  .auth-hero, .auth-panel { padding: 30px 22px; }
}

/* ════════════════════════════════════════
   MOBILE OPTIMIZATION ONLY
   Desktop remains unchanged. These rules apply only below 768px.
════════════════════════════════════════ */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
  }

  .bg-orb {
    opacity: .65;
  }

  /* Auth screen: keep the same content, make it fit mobile properly */
  .auth-page {
    min-height: 100dvh;
    display: block;
    padding: 12px;
  }

  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    border-radius: 28px !important;
    overflow: hidden;
  }

  .auth-hero {
    padding: 24px 22px 14px !important;
    gap: 16px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .auth-brand .brand-pill {
    padding: 7px 14px;
    font-size: .82rem;
  }

  .auth-hero h1 {
    font-size: clamp(2.05rem, 9.5vw, 2.75rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em;
  }

  .hero-desc {
    font-size: .94rem;
    line-height: 1.45;
    max-width: 28rem;
  }

  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  .hero-stats .mini-card:last-child {
    grid-column: auto !important;
  }

  .hero-stats .mini-card {
    min-height: 86px;
    padding: 10px 9px !important;
    border-radius: 16px !important;
  }

  .hero-stats .mini-title {
    font-size: .73rem !important;
    line-height: 1.18;
    margin-bottom: 4px;
  }

  .hero-stats .mini-text {
    font-size: .68rem !important;
    line-height: 1.25;
  }

  .auth-panel {
    padding: 16px 22px 24px !important;
    gap: 0 !important;
  }

  .auth-actions-top {
    margin-bottom: 10px !important;
  }

  .auth-form {
    gap: 12px !important;
  }

  .auth-footer {
    margin-top: 10px;
    font-size: .8rem;
    line-height: 1.4;
  }

  .settings-inline-status,
  .auth-error {
    font-size: .8rem;
    line-height: 1.35;
  }

  input,
  select,
  textarea {
    height: 48px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }

  .btn {
    height: 48px !important;
    border-radius: 14px !important;
  }

  /* Dashboard shell */
  .page.dashboard {
    width: 100% !important;
    max-width: none !important;
    padding: 16px 14px calc(34px + env(safe-area-inset-bottom)) !important;
  }

  .top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .dashboard-brand {
    max-width: calc(100% - 104px) !important;
    padding: 9px 14px !important;
    border-radius: 999px;
  }

  .brand-text {
    max-width: 100%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem !important;
  }

  .top-bar-right {
    flex: none;
    gap: 8px !important;
  }

  .icon-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  .hero-grid,
  .content-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    align-items: start !important;
  }

  .left-col,
  .right-col {
    display: grid !important;
    gap: 14px !important;
  }

  .dashboard .card,
  .card {
    max-width: 100%;
    border-radius: 24px !important;
  }

  .dashboard .card {
    padding: 0 !important;
  }

  /* Profile card */
  .hero-main {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 18px 18px 14px !important;
  }

  .avatar-box {
    width: 64px !important;
    height: 64px !important;
    border-radius: 18px !important;
    font-size: 2rem !important;
  }

  .avatar-box img {
    border-radius: 17px !important;
  }

  .hero-copy {
    min-width: 0;
  }

  .hero-name-row {
    gap: 8px !important;
    margin-bottom: 5px !important;
  }

  .hero-name-row h2 {
    font-size: 1.58rem !important;
    line-height: 1.05 !important;
  }

  .pill.brand-pill {
    padding: 5px 11px;
    font-size: .76rem;
  }

  .xp-wrap {
    margin-top: 10px !important;
  }

  .progress-track {
    height: 8px !important;
  }

  .split-line {
    font-size: .72rem !important;
    gap: 8px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0 18px 18px !important;
    gap: 10px !important;
  }

  .stats-grid .mini-card {
    min-height: 88px;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .big-metric {
    font-size: 1.45rem !important;
    line-height: 1.1;
  }

  .mini-title {
    font-size: .78rem !important;
  }

  /* Section cards */
  .section-title,
  .card > .section-title:first-child,
  .hero-grid > .card:not(.hero-card) .section-title,
  .left-col > .card .section-title,
  .right-col > .card .section-title {
    padding: 20px 18px 0 !important;
    margin-bottom: 14px !important;
    font-size: 1rem !important;
  }

  .hero-grid > .card:not(.hero-card) .two-cards,
  .two-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-grid > .card:not(.hero-card) .two-cards,
  .card > .two-cards,
  .card > .stack-cards {
    padding: 0 18px 18px !important;
  }

  .hero-grid > .card:not(.hero-card) .mini-card,
  .right-col .mini-card {
    padding: 15px !important;
    border-radius: 18px !important;
  }

  .tp-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
  }

  .tp-label {
    min-width: 0;
  }

  .tp-val {
    max-width: 138px !important;
    text-align: right !important;
    line-height: 1.25 !important;
    word-break: normal !important;
  }

  /* Goals */
  .goals-card {
    margin-bottom: 14px !important;
  }

  .goals-card-header {
    padding: 20px 18px 0 !important;
    margin-bottom: 14px !important;
  }

  .goals-card-header .section-title {
    padding: 0 !important;
    margin: 0 !important;
  }

  .goals-edit-btn {
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
  }

  #dashGoalsView,
  #dashGoalsEdit {
    padding: 0 18px 20px !important;
  }

  .goals-section-label {
    font-size: .72rem !important;
    line-height: 1.25;
    margin-bottom: 9px !important;
  }

  .goals-divider {
    margin: 14px 0 !important;
  }

  .goal-empty-state,
  .dash-goal-empty {
    line-height: 1.45;
  }

  .goals-edit-cols {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Mission board */
  .card > .tabs {
    margin: 0 18px 16px !important;
  }

  .card > #boardContent {
    padding: 0 18px 20px !important;
  }

  .board-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow: visible !important;
    gap: 4px !important;
    padding: 5px !important;
    border-radius: 18px !important;
  }

  .board-tabs .tab {
    min-width: 0 !important;
    width: 100% !important;
    height: 42px !important;
    padding: 0 4px !important;
    font-size: .78rem !important;
    border-radius: 13px !important;
  }

  .habit-add,
  .todo-add {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .habit-add > *,
  .todo-add > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
  }

  #addHabitBtn,
  #addTodoBtn {
    width: 100% !important;
  }

  .task-list {
    margin-top: 14px !important;
    gap: 10px !important;
  }

  .task-row {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .task-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Review */
  .card > #reviewGrid {
    padding: 0 18px !important;
  }

  .review-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }

  .review-box {
    height: 34px !important;
    border-radius: 10px !important;
  }

  .review-day {
    font-size: .62rem !important;
  }

  .review-date {
    font-size: .68rem !important;
    margin-top: 2px !important;
  }

  /* Onboarding/mobile forms */
  .onboarding-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .form-card {
    padding: 18px !important;
  }
}

@media (max-width: 420px) {
  .page.dashboard {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .auth-page {
    padding: 10px;
  }

  .auth-hero {
    padding: 22px 18px 12px !important;
  }

  .auth-panel {
    padding: 14px 18px 22px !important;
  }

  .hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .hero-stats .mini-card {
    padding: 9px 7px !important;
  }

  .hero-stats .mini-title {
    font-size: .68rem !important;
  }

  .hero-stats .mini-text {
    font-size: .63rem !important;
  }

  .hero-main {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .avatar-box {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.75rem !important;
  }

  .hero-name-row h2 {
    font-size: 1.42rem !important;
  }

  .stats-grid {
    gap: 9px !important;
  }

  .stats-grid .mini-card {
    padding: 13px !important;
  }

  .big-metric {
    font-size: 1.32rem !important;
  }

  .tp-val {
    max-width: 116px !important;
  }
}

@media (max-width: 360px) {
  .hero-stats {
    grid-template-columns: 1fr !important;
  }

  .hero-stats .mini-card {
    min-height: 0;
  }

  .board-tabs .tab {
    font-size: .7rem !important;
  }
}

/* ════════════════════════════════════════
   MOBILE DRAFT UI — mobile-only redesign
   Desktop remains unchanged above 768px.
════════════════════════════════════════ */
.mobile-bottom-nav,
.mobile-coffee-link,
.mobile-water-draft { display: none; }

@media (max-width: 768px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at top left, rgba(200,149,90,.16), transparent 34%),
      radial-gradient(circle at bottom right, rgba(80,200,190,.10), transparent 34%),
      var(--bg);
  }

  .bg-orb { display: none; }

  /* Auth: make login usable instead of a huge landing page on phone */
  .auth-page {
    min-height: 100dvh !important;
    padding: 12px !important;
    align-items: flex-start !important;
  }

  .auth-card {
    width: 100% !important;
    min-height: auto !important;
    display: block !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .auth-hero {
    padding: 26px 22px 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    gap: 14px !important;
  }

  .auth-hero h1 {
    font-size: clamp(2rem, 12vw, 2.65rem) !important;
    line-height: 1.02 !important;
  }

  .hero-desc {
    font-size: .95rem !important;
    line-height: 1.45 !important;
  }

  .auth-hero .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .auth-hero .hero-stats .mini-card {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .auth-hero .hero-stats .mini-card:last-child {
    grid-column: 1 / -1 !important;
  }

  .auth-hero .mini-text {
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .auth-panel {
    padding: 18px 22px 24px !important;
  }

  .auth-actions-top { margin-bottom: 12px !important; }
  .auth-form { gap: 12px !important; }

  /* Mobile app shell */
  .page.dashboard {
    width: 100% !important;
    max-width: none !important;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .dashboard .top-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 12px !important;
    margin-bottom: 8px !important;
    backdrop-filter: blur(14px);
  }

  .dashboard-brand {
    min-width: 0;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.82) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 8px 22px rgba(80,50,20,.08) !important;
  }

  .brand-text {
    font-size: .96rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-coffee-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-weight: 900;
    font-size: .78rem;
    box-shadow: 0 8px 22px rgba(80,50,20,.08);
  }

  .top-bar-right {
    gap: 7px !important;
  }

  .dashboard .icon-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.84) !important;
    box-shadow: 0 8px 20px rgba(80,50,20,.07) !important;
  }

  .dashboard .card {
    width: 100%;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(80,50,20,.10) !important;
    background: rgba(255,255,255,.92) !important;
  }

  .hero-grid,
  .content-grid,
  .left-col,
  .right-col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    align-items: start !important;
  }

  /* Draft page behavior: Home = profile/schedule/goals. Other tabs = schedule + current page. */
  .dashboard[data-mobile-view="home"] .content-grid {
    display: none !important;
  }

  .dashboard[data-mobile-view="home"] .hero-card,
  .dashboard[data-mobile-view="home"] .schedule-card,
  .dashboard[data-mobile-view="home"] .goals-card {
    display: block !important;
  }

  .dashboard:not([data-mobile-view="home"]) .hero-card,
  .dashboard:not([data-mobile-view="home"]) .goals-card,
  .dashboard:not([data-mobile-view="home"]) .right-col {
    display: none !important;
  }

  .dashboard:not([data-mobile-view="home"]) .content-grid,
  .dashboard:not([data-mobile-view="home"]) .left-col,
  .dashboard:not([data-mobile-view="home"]) .left-col > .card {
    display: block !important;
  }

  .dashboard:not([data-mobile-view="home"]) .schedule-card {
    display: block !important;
  }

  /* Profile card like the first sketch */
  .hero-main {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: center !important;
    padding: 22px 20px 16px !important;
  }

  .avatar-box {
    width: 70px !important;
    height: 70px !important;
    border-radius: 22px !important;
    font-size: 2.1rem !important;
  }

  .hero-name-row {
    gap: 8px !important;
    margin-bottom: 5px !important;
  }

  .hero-name-row h2 {
    font-size: 1.85rem !important;
    line-height: 1 !important;
  }

  .hero-name-row .pill {
    padding: 5px 11px !important;
    font-size: .75rem !important;
  }

  #heroMeta { font-size: .92rem !important; }
  .xp-wrap { margin-top: 10px !important; }
  .progress-track { height: 8px !important; }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0 20px 20px !important;
    gap: 10px !important;
  }

  .stats-grid .mini-card {
    padding: 15px !important;
    border-radius: 18px !important;
    min-height: 94px !important;
  }

  .mini-title { font-size: .82rem !important; }
  .big-metric { font-size: 1.45rem !important; }

  /* Today's schedule block from the sketch */
  .schedule-card .section-title,
  .left-col > .card .section-title,
  .right-col > .card .section-title {
    padding: 20px 20px 0 !important;
    margin-bottom: 14px !important;
    font-size: 1.02rem !important;
  }

  .schedule-card .two-cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 20px 20px !important;
  }

  .schedule-card .mini-card {
    padding: 16px !important;
    border-radius: 19px !important;
  }

  .tp-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    align-items: start !important;
    margin-top: 9px !important;
  }

  .tp-label { min-width: 0 !important; }
  .tp-val {
    max-width: 170px !important;
    text-align: right !important;
    line-height: 1.25 !important;
    word-break: normal !important;
  }

  /* Goals compact home block */
  .goals-card {
    margin-bottom: 14px !important;
  }

  .goals-card-header {
    padding: 20px 20px 0 !important;
    margin-bottom: 14px !important;
  }

  .goals-card-header .section-title {
    padding: 0 !important;
    margin: 0 !important;
  }

  #dashGoalsView,
  #dashGoalsEdit {
    padding: 0 20px 20px !important;
  }

  .goals-divider { margin: 14px 0 !important; }
  .goals-section-label { font-size: .72rem !important; }
  .goal-empty-state { line-height: 1.45 !important; }

  /* Bottom nav as the draft's three/box navigation, with Shop preserved */
  .mobile-bottom-nav {
    position: fixed;
    left: max(12px, env(safe-area-inset-left, 12px));
    right: max(12px, env(safe-area-inset-right, 12px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border-radius: 24px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(232,216,192,.95);
    box-shadow: 0 18px 44px rgba(80,50,20,.18);
    backdrop-filter: blur(18px);
  }

  .mobile-nav-item {
    min-width: 0;
    height: 54px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: 900;
    cursor: pointer;
  }

  .mobile-nav-item span { font-size: 1.05rem; line-height: 1; }
  .mobile-nav-item small { font-size: .64rem; line-height: 1; }
  .mobile-nav-item.active {
    background: var(--accent);
    color: var(--accent-text);
    box-shadow: 0 8px 20px rgba(200,149,90,.26);
  }

  /* Current page body */
  .board-tabs {
    display: none !important;
  }

  .card > #boardContent {
    padding: 0 20px 20px !important;
  }

  .board-toolbar { margin-bottom: 12px !important; }

  .habit-add,
  .todo-add {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .habit-add > *,
  .todo-add > * {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .habit-add #addHabitBtn,
  .todo-add #addTodoBtn {
    width: 100% !important;
  }

  .task-list {
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .task-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .task-left {
    width: 100% !important;
    min-width: 0 !important;
  }

  .task-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 42px 42px 1fr 42px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .task-actions .btn,
  .task-actions .icon-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
  }

  .cat-filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }

  .cat-filter-bar::-webkit-scrollbar { display: none; }
  .cat-filter-btn, .cat-add-btn { flex: 0 0 auto !important; }

  /* Water page based on your second sketch */
  .mobile-water-draft {
    display: grid !important;
    gap: 12px;
    margin-top: 14px;
  }

  .mobile-water-progress-card,
  .mobile-weight-card,
  .mobile-water-statbar {
    border: 1.5px solid var(--border);
    background: rgba(255,255,255,.72);
    border-radius: 18px;
    padding: 13px;
  }

  .mobile-water-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: .82rem;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 12px;
  }

  .mobile-water-progress-head strong {
    color: var(--text);
    font-size: .9rem;
  }

  .mobile-water-circles {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
  }

  .mobile-water-day {
    display: grid;
    justify-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: .65rem;
    font-weight: 900;
  }

  .mobile-water-circle {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid var(--border);
    background: var(--panel-soft);
    display: block;
  }

  .mobile-water-circle.low { background: rgba(239,68,68,.32); border-color: rgba(239,68,68,.38); }
  .mobile-water-circle.half { background: rgba(250,204,21,.48); border-color: rgba(250,204,21,.5); }
  .mobile-water-circle.filled { background: rgba(34,197,94,.68); border-color: rgba(34,197,94,.55); }

  .mobile-water-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mobile-weight-card {
    display: grid;
    gap: 8px;
    font-weight: 900;
    color: var(--muted);
    font-size: .82rem;
  }

  .mobile-weight-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .mobile-weight-row input {
    height: 44px !important;
  }

  .mobile-add-drink-btn {
    width: 100% !important;
  }

  .mobile-water-statbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
    text-align: center;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
  }

  .hyd-top {
    padding: 18px !important;
    border-bottom: 0 !important;
  }

  .hyd-title-row {
    margin-bottom: 10px !important;
  }

  .hyd-progress-bar-wrap {
    height: 12px !important;
    margin-bottom: 12px !important;
  }

  .hyd-legend-row {
    gap: 7px 10px !important;
  }

  .hyd-tank-row {
    display: block !important;
  }

  .hyd-tank {
    display: none !important;
  }

  .hyd-drink-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 18px 18px !important;
  }

  .hyd-drink-cards .mini-card {
    padding: 15px !important;
    border-radius: 18px !important;
  }

  .custom-drink-form {
    margin: 10px 18px 18px !important;
    padding: 14px !important;
  }

  .custom-drink-row {
    grid-template-columns: 1fr !important;
  }

  .custom-drink-row2 {
    align-items: stretch !important;
  }

  .custom-drink-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  /* Review kept compact if shown elsewhere */
  .review-grid {
    gap: 5px !important;
  }

  .review-box {
    height: 30px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 390px) {
  .page.dashboard { padding-left: 10px !important; padding-right: 10px !important; }
  .dashboard .top-bar { grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 6px !important; }
  .mobile-coffee-link { padding: 0 9px; font-size: .7rem; }
  .dashboard .icon-btn { width: 38px !important; height: 38px !important; }
  .hero-main { grid-template-columns: 62px minmax(0,1fr) !important; gap: 12px !important; }
  .avatar-box { width: 62px !important; height: 62px !important; }
  .hero-name-row h2 { font-size: 1.62rem !important; }
  .stats-grid { gap: 9px !important; }
  .stats-grid .mini-card { min-height: 86px !important; padding: 13px !important; }
  .task-actions { grid-template-columns: 40px 40px 1fr 40px !important; gap: 7px !important; }
  .mobile-bottom-nav { gap: 4px; padding: 7px; }
  .mobile-nav-item { height: 50px; border-radius: 15px; }
  .mobile-nav-item small { font-size: .58rem; }
}

/* ════════════════════════════════════════
   FINAL PUBLISHABLE UI FIXES
   - iPhone Dynamic Island safe header
   - usable mobile habit/task cards
   - unified add-drink flow
   - desktop footer nav
════════════════════════════════════════ */

@media (min-width: 769px) {
  .page.dashboard {
    padding-bottom: 116px !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 80;
    width: min(560px, calc(100vw - 40px));
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border-radius: 26px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(232,216,192,.95);
    box-shadow: 0 22px 56px rgba(80,50,20,.18);
    backdrop-filter: blur(18px);
  }

  .mobile-nav-item {
    height: 56px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
  }

  .mobile-nav-item:hover {
    transform: translateY(-1px);
    background: rgba(200,149,90,.10);
  }

  .mobile-nav-item span { font-size: 1.05rem; line-height: 1; }
  .mobile-nav-item small { font-size: .68rem; line-height: 1; }
  .mobile-nav-item.active {
    background: var(--accent);
    color: var(--accent-text);
    box-shadow: 0 8px 20px rgba(200,149,90,.26);
  }

  body.dark .mobile-bottom-nav {
    background: rgba(22,22,22,.88);
  }
}

@media (max-width: 768px) {
  .page.dashboard {
    padding-top: calc(50px + env(safe-area-inset-top, 0px)) !important;
  }

  .dashboard .top-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 10px !important;
    margin: -42px 0 12px !important;
    background: linear-gradient(180deg, rgba(245,239,230,.98), rgba(245,239,230,.88));
    backdrop-filter: blur(18px);
  }

  body.dark .dashboard .top-bar {
    background: linear-gradient(180deg, rgba(12,12,12,.98), rgba(12,12,12,.86));
  }

  .dashboard-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: max-content !important;
    max-width: min(190px, 100%) !important;
  }

  .top-bar-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .mobile-coffee-link {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    height: 34px !important;
    padding: 0 16px !important;
    max-width: calc(100vw - 80px) !important;
    white-space: nowrap !important;
  }

  .dashboard .icon-btn {
    width: 38px !important;
    height: 38px !important;
  }

  /* Show the task time field on phones instead of hiding it. */
  .todo-add input[type="number"],
  .todo-add #newTodoDuration {
    display: block !important;
  }

  .todo-add #newTodoDuration::placeholder {
    font-size: .95rem;
  }

  /* Better mobile task/habit cards. */
  .task-row {
    overflow: hidden !important;
  }

  .task-left {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .task-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.25 !important;
  }

  .task-title-main {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .task-sub {
    line-height: 1.35 !important;
  }

  .task-actions {
    grid-template-columns: 44px minmax(122px, 1fr) 44px !important;
    gap: 8px !important;
  }

  .task-actions:has(.skip-btn) {
    grid-template-columns: 44px 44px minmax(112px, 1fr) 44px !important;
  }

  .task-actions .btn {
    font-size: .84rem !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }

  .task-actions .icon-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Water tab: keep one clean Add drink flow, hide large individual add cards on mobile. */
  .mobile-water-actions {
    grid-template-columns: 1fr !important;
  }

  .mobile-add-drink-btn {
    height: 52px !important;
    font-size: 1rem !important;
  }

  .hyd-drink-cards {
    display: none !important;
  }

  .dialog.card {
    width: min(92vw, 430px) !important;
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
  }

  #drinkQuickChips .btn {
    height: 38px !important;
    padding: 0 12px !important;
    font-size: .82rem !important;
  }
}

@media (max-width: 390px) {
  .page.dashboard {
    padding-top: calc(54px + env(safe-area-inset-top, 0px)) !important;
  }

  .dashboard .top-bar {
    margin-top: -46px !important;
  }

  .dashboard-brand {
    max-width: 142px !important;
  }

  .mobile-coffee-link {
    max-width: calc(100vw - 100px) !important;
    font-size: .72rem !important;
  }

  .task-actions {
    grid-template-columns: 40px minmax(104px, 1fr) 40px !important;
  }

  .task-actions:has(.skip-btn) {
    grid-template-columns: 40px 40px minmax(96px, 1fr) 40px !important;
  }
}

/* ════════════════════════════════════════
   FINAL STATS + DESKTOP WATER / DOCK PATCH
════════════════════════════════════════ */

/* Desktop board tabs should match the polished dock language, just scaled into the card. */
.board-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 24px !important;
  background: rgba(36, 24, 14, .045) !important;
}

.board-tabs .tab {
  height: 52px !important;
  border-radius: 18px !important;
  font-weight: 900 !important;
  font-size: .96rem !important;
}

.board-tabs .tab.active {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  box-shadow: 0 12px 26px rgba(200,149,90,.26) !important;
}

/* Desktop footer nav now includes Stats too. */
@media (min-width: 769px) {
  .mobile-bottom-nav {
    width: min(680px, calc(100vw - 40px)) !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .mobile-nav-item {
    height: 58px !important;
    border-radius: 18px !important;
  }

  .mobile-nav-item small {
    font-size: .66rem !important;
  }

  /* Give desktop content room above the dock. */
  .page.dashboard {
    padding-bottom: 126px !important;
  }
}

/* Water tab copied into a clean mobile-style layout for desktop too. */
.water-clean-board {
  display: grid;
  gap: 16px;
}

.water-clean-card {
  border: 1.5px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,248,239,.72));
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 28px rgba(80,50,20,.06);
}

.water-main-card {
  background: linear-gradient(135deg, rgba(14,165,233,.09), rgba(255,248,239,.82));
}

.water-clean-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.water-clean-title {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--text);
}

.water-clean-sub {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  margin-top: 3px;
}

.water-clean-percent {
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 900;
  color: #1d9fe8;
  white-space: nowrap;
}

.water-clean-progress {
  height: 14px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 14px;
}

.water-clean-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1d9fe8, #5ac8ff);
  transition: width .4s ease;
}

.water-clean-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
  margin-bottom: 16px;
}

.water-clean-meta span,
.water-breakdown-grid div {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(232,216,192,.86);
  border-radius: 14px;
  padding: 9px 10px;
}

.water-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.water-breakdown-grid div {
  display: grid;
  gap: 4px;
}

.water-breakdown-grid b {
  font-size: 1rem;
  color: var(--text);
}

.water-breakdown-grid span {
  font-size: .76rem;
  font-weight: 800;
  color: var(--muted);
}

.water-weight-card-clean {
  display: grid;
  gap: 12px;
}

.water-main-add {
  width: 100% !important;
  height: 56px !important;
  border-radius: 18px !important;
  font-size: 1.02rem !important;
}

.mobile-water-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: .86rem;
  color: var(--muted);
  font-weight: 900;
}

.mobile-water-progress-head strong {
  color: var(--text);
}

.mobile-water-circles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.mobile-water-day {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 900;
}

.mobile-water-circle {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--panel-soft);
}

.mobile-water-circle.low { background: rgba(239,68,68,.30); border-color: rgba(239,68,68,.45); }
.mobile-water-circle.half { background: rgba(250,204,21,.48); border-color: rgba(250,204,21,.55); }
.mobile-water-circle.filled { background: rgba(34,197,94,.68); border-color: rgba(34,197,94,.58); }

/* Monthly Stats tab */
.stats-board {
  display: grid;
  gap: 16px;
}

.stats-hero-card,
.monthly-calendar-card,
.monthly-stat-card {
  border: 1.5px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,248,239,.72));
  box-shadow: 0 10px 28px rgba(80,50,20,.06);
}

.stats-hero-card {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.stats-eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: .72rem;
  margin-bottom: 5px;
}

.stats-overall-pill {
  flex: none;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
}

.monthly-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.monthly-stat-card {
  padding: 18px;
}

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

.monthly-stat-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.monthly-stat-pct {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--accent);
}

.monthly-stat-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 10px;
}

.monthly-stat-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.monthly-stat-sub {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.4;
}

.monthly-calendar-card {
  padding: 18px;
}

.monthly-calendar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .82rem;
  margin-bottom: 14px;
}

.monthly-calendar-head strong {
  color: var(--text);
  font-size: .96rem;
}

.monthly-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.monthly-day-cell {
  min-height: 54px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--panel-soft);
  display: grid;
  place-items: center;
  gap: 2px;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 900;
}

.monthly-day-cell strong {
  color: var(--text);
  font-size: .94rem;
}

.monthly-day-cell.great { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.35); }
.monthly-day-cell.ok { background: rgba(250,204,21,.16); border-color: rgba(250,204,21,.36); }
.monthly-day-cell.low { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.28); }

.stats-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 16px;
  background: var(--panel-soft);
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

body.dark .water-clean-card,
body.dark .stats-hero-card,
body.dark .monthly-calendar-card,
body.dark .monthly-stat-card {
  background: linear-gradient(180deg, #211f1c, #181818);
}

body.dark .water-clean-meta span,
body.dark .water-breakdown-grid div {
  background: rgba(255,255,255,.04);
}

@media (max-width: 768px) {
  .board-tabs {
    display: none !important;
  }

  .mobile-bottom-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: min(96vw, 390px) !important;
    gap: 4px !important;
  }

  .mobile-nav-item {
    height: 52px !important;
    border-radius: 16px !important;
  }

  .mobile-nav-item span {
    font-size: .98rem !important;
  }

  .mobile-nav-item small {
    font-size: .55rem !important;
  }

  .water-clean-board,
  .stats-board {
    gap: 12px;
  }

  .water-clean-card,
  .stats-hero-card,
  .monthly-calendar-card,
  .monthly-stat-card {
    border-radius: 18px;
    padding: 14px;
  }

  .water-clean-head,
  .stats-hero-card,
  .monthly-calendar-head {
    flex-direction: column;
    align-items: stretch;
  }

  .water-clean-percent {
    font-size: 1.6rem;
  }

  .water-clean-meta,
  .monthly-stats-grid {
    grid-template-columns: 1fr;
  }

  .water-breakdown-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-water-circle {
    width: 26px;
    height: 26px;
  }

  .monthly-day-grid {
    gap: 6px;
  }

  .monthly-day-cell {
    min-height: 44px;
    border-radius: 12px;
    font-size: .62rem;
  }
}

@media (max-width: 390px) {
  .mobile-bottom-nav {
    width: calc(100vw - 20px) !important;
    gap: 3px !important;
    padding: 7px !important;
  }

  .mobile-nav-item small {
    font-size: .5rem !important;
  }
}

/* ════════════════════════════════════════
   HOME-ONLY SCHEDULE + COFFEE BANNER PATCH
   Keeps Home as the dashboard. Other dock pages become focused feature pages.
════════════════════════════════════════ */

/* Replace the tiny coffee button with a real banner on all screen sizes. */
.mobile-coffee-link {
  display: none !important;
}

.coffee-banner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 24px;
  border: 1px solid rgba(232,216,192,.96);
  background: linear-gradient(135deg, rgba(200,149,90,.20), rgba(255,255,255,.82));
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 14px 38px rgba(80,50,20,.10);
  backdrop-filter: blur(18px);
}

.coffee-banner:hover {
  transform: translateY(-1px);
  border-color: rgba(200,149,90,.7);
  box-shadow: 0 18px 46px rgba(80,50,20,.14);
}

.coffee-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(232,216,192,.9);
  font-size: 1.28rem;
}

.coffee-banner-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.coffee-banner-copy strong {
  font-size: .98rem;
  font-weight: 900;
}

.coffee-banner-copy small {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.3;
}

.coffee-banner-cta {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 900;
  font-size: .82rem;
  white-space: nowrap;
}

/* Home shows the actual dashboard. Feature pages only show their own board. */
.dashboard[data-mobile-view="home"] .content-grid {
  display: none !important;
}

.dashboard:not([data-mobile-view="home"]) .hero-grid,
.dashboard:not([data-mobile-view="home"]) .goals-card,
.dashboard:not([data-mobile-view="home"]) #reviewSection,
.dashboard:not([data-mobile-view="home"]) .right-col {
  display: none !important;
}

.dashboard:not([data-mobile-view="home"]) .content-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
}

.dashboard:not([data-mobile-view="home"]) .left-col {
  display: block !important;
  width: 100% !important;
}

.dashboard:not([data-mobile-view="home"]) .left-col > .card {
  min-height: min(760px, calc(100dvh - 260px));
  border-radius: 32px;
  overflow: hidden;
}

.dashboard:not([data-mobile-view="home"]) #boardContent {
  min-height: 420px;
}

/* The bottom dock is the tab switcher now, so the inside card tabs stay hidden. */
.board-tabs {
  display: none !important;
}

/* Focused feature page polish */
.dashboard:not([data-mobile-view="home"]) .left-col > .card > .section-title {
  padding: 30px 30px 0 !important;
  margin-bottom: 20px !important;
  font-size: 1.18rem !important;
}

.dashboard:not([data-mobile-view="home"]) .card > #boardContent {
  padding: 0 30px 30px !important;
}

.dashboard:not([data-mobile-view="home"]) .habit-add,
.dashboard:not([data-mobile-view="home"]) .todo-add {
  padding: 0;
}

/* Make water page use the clean mobile-style layout strongly on desktop too. */
.dashboard[data-current-tab="water"] .water-clean-board {
  max-width: 760px;
  margin: 0 auto;
}

.dashboard[data-current-tab="water"] .water-clean-card,
.dashboard[data-current-tab="stats"] .stats-hero-card,
.dashboard[data-current-tab="stats"] .monthly-calendar-card,
.dashboard[data-current-tab="stats"] .monthly-stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,239,.78));
}

.dashboard[data-current-tab="stats"] .stats-board {
  max-width: 980px;
  margin: 0 auto;
}

/* Dock: six options on desktop and mobile. */
@media (min-width: 769px) {
  .mobile-bottom-nav {
    width: min(760px, calc(100vw - 40px)) !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .page.dashboard {
    padding-top: calc(58px + env(safe-area-inset-top, 0px)) !important;
  }

  .coffee-banner {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0 0 14px;
    padding: 12px 13px;
    border-radius: 20px;
    gap: 11px;
  }

  .coffee-banner-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .coffee-banner-copy strong {
    font-size: .88rem;
  }

  .coffee-banner-copy small {
    font-size: .72rem;
  }

  .coffee-banner-cta {
    grid-column: 1 / -1;
    text-align: center;
    padding: 8px 12px;
  }

  .dashboard[data-mobile-view="home"] .content-grid {
    display: none !important;
  }

  .dashboard:not([data-mobile-view="home"]) .left-col > .card {
    min-height: calc(100dvh - 230px);
    border-radius: 24px !important;
  }

  .dashboard:not([data-mobile-view="home"]) .left-col > .card > .section-title {
    padding: 22px 20px 0 !important;
    margin-bottom: 16px !important;
    font-size: 1.05rem !important;
  }

  .dashboard:not([data-mobile-view="home"]) .card > #boardContent {
    padding: 0 20px 22px !important;
  }

  .dashboard:not([data-mobile-view="home"]) #boardContent {
    min-height: 360px;
  }

  .dashboard[data-current-tab="water"] .water-clean-board,
  .dashboard[data-current-tab="stats"] .stats-board {
    max-width: none;
  }
}

@media (max-width: 420px) {
  .coffee-banner {
    padding: 11px 12px;
  }

  .coffee-banner-copy small {
    display: none;
  }
}



/* ════════════════════════════════════════════════════════
   DARK MODE — UNIFIED AESTHETIC SYSTEM
   Warm, deep, amber-tinted dark palette.
   Covers desktop + mobile, all components, in one place.
════════════════════════════════════════════════════════ */

/* ── Page background & ambient orbs ── */
body.dark {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(200,149,90,.13) 0%, transparent 30%),
    radial-gradient(ellipse at 100% 100%, rgba(91,160,255,.08) 0%, transparent 30%),
    linear-gradient(180deg, #0e0d0c 0%, #131210 50%, #111110 100%);
  color: var(--text);
}

body.dark .orb-1 {
  background: rgba(200,149,90,.16);
  filter: blur(80px);
}
body.dark .orb-2 {
  background: rgba(91,160,255,.09);
  filter: blur(90px);
}
body.dark .page.dashboard { background: transparent; }

/* ── Cards & surfaces ── */
body.dark .card,
body.dark .dialog,
body.dark .hero-card,
body.dark .schedule-card,
body.dark .goals-card,
body.dark .left-col > .card,
body.dark .right-col > .card,
body.dark .water-clean-card,
body.dark .water-main-card,
body.dark .stats-hero-card,
body.dark .monthly-calendar-card,
body.dark .monthly-stat-card {
  background: linear-gradient(160deg, rgba(30,26,23,.97) 0%, rgba(19,17,16,.98) 100%);
  border-color: rgba(210,170,120,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.03) inset,
    0 20px 44px rgba(0,0,0,.38),
    0 1px 3px rgba(0,0,0,.22);
}

body.dark .mini-card {
  background: linear-gradient(160deg, rgba(34,29,26,.96) 0%, rgba(24,21,19,.97) 100%);
  border-color: rgba(210,170,120,.13);
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
}

body.dark .goal-row {
  background: linear-gradient(160deg, rgba(32,27,24,.96) 0%, rgba(22,19,17,.97) 100%);
  border-color: rgba(210,170,120,.13);
}

/* ── Typography ── */
body.dark h2,
body.dark h3,
body.dark strong,
body.dark .big-metric,
body.dark .section-title,
body.dark .goals-section-label,
body.dark .dialog-title,
body.dark .hyd-title,
body.dark .water-clean-title,
body.dark .shop-item-name,
body.dark .hero-name-row h2,
body.dark .task-title-main,
body.dark .task-title,
body.dark .goal-title,
body.dark .goal-row-text,
body.dark .shop-gem-count,
body.dark .tp-val,
body.dark .water-breakdown-grid b {
  color: #f5ede4;
}

body.dark .muted,
body.dark .mini-title,
body.dark .mini-text,
body.dark .hero-copy .muted,
body.dark .task-sub,
body.dark .shop-sub,
body.dark .shop-item-desc,
body.dark .water-clean-sub,
body.dark .coffee-banner-copy small,
body.dark .monthly-calendar-head span,
body.dark .water-breakdown-grid span,
body.dark .hyd-leg-label,
body.dark .tp-label,
body.dark .stats-empty {
  color: #b2a396;
}

/* ── Brand bar ── */
body.dark .dashboard-brand {
  background: linear-gradient(160deg, rgba(38,32,28,.97) 0%, rgba(24,20,18,.97) 100%);
  border: 1px solid rgba(210,170,120,.22);
  color: #f0e7dd;
  border-radius: 18px;
  padding: 11px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.04) inset;
}
body.dark .dashboard-brand .brand-text {
  color: #e8b47a;
  text-shadow: 0 0 16px rgba(232,180,122,.22);
}

/* ── Inputs, selects, textareas ── */
body.dark input,
body.dark select,
body.dark textarea {
  background: rgba(20,17,15,.95);
  border-color: rgba(210,170,120,.20);
  color: #f2e9df;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.28);
}
body.dark input::placeholder,
body.dark textarea::placeholder { color: #8a7d71; }
body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
  border-color: rgba(232,180,122,.60);
  box-shadow: 0 0 0 3px rgba(200,149,90,.12), inset 0 1px 3px rgba(0,0,0,.20);
}

/* ── Buttons & icon buttons ── */
body.dark .icon-btn,
body.dark .goals-edit-btn {
  background: linear-gradient(160deg, rgba(30,26,24,.96) 0%, rgba(20,17,16,.97) 100%);
  border-color: rgba(210,170,120,.20);
  color: #f0e7dd;
  box-shadow: 0 6px 16px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
body.dark .icon-btn:hover,
body.dark .goals-edit-btn:hover {
  border-color: rgba(232,180,122,.55);
  box-shadow: 0 0 0 3px rgba(200,149,90,.10), 0 8px 20px rgba(0,0,0,.28);
}

body.dark .btn-outline {
  background: rgba(255,255,255,.03);
  border-color: rgba(210,170,120,.22);
  color: #f0e7dd;
}
body.dark .btn-outline:hover {
  border-color: rgba(232,180,122,.55);
  background: rgba(200,149,90,.08);
}

body.dark .top-bar-right .icon-btn {
  background: linear-gradient(160deg, rgba(30,26,24,.96) 0%, rgba(20,17,16,.97) 100%);
  border-color: rgba(210,170,120,.20);
}

/* ── Tabs ── */
body.dark .tabs { background: rgba(16,14,13,.80); }
body.dark .tab.active {
  background: linear-gradient(160deg, rgba(46,38,32,.98) 0%, rgba(30,25,22,.98) 100%);
  color: #f0e7dd;
  box-shadow: 0 2px 10px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
}
body.dark .avatar-type-tabs { background: rgba(16,14,13,.80); }
body.dark .avatar-tab.active {
  background: linear-gradient(160deg, rgba(46,38,32,.98) 0%, rgba(30,25,22,.98) 100%);
  color: #f0e7dd;
}

/* ── Task / habit rows ── */
body.dark .task-row,
body.dark .habit-row,
body.dark .todo-item,
body.dark .habit-item {
  background: linear-gradient(160deg, rgba(30,26,23,.94) 0%, rgba(21,18,17,.95) 100%);
  border-color: rgba(210,170,120,.14);
}
body.dark .task-row:hover {
  border-color: rgba(210,170,120,.26);
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}
body.dark .task-row.done {
  background: linear-gradient(160deg, rgba(18,40,26,.92) 0%, rgba(14,28,20,.95) 100%);
  border-color: rgba(34,197,94,.26);
}
body.dark .task-row.skipped {
  background: linear-gradient(160deg, rgba(30,26,23,.72) 0%, rgba(21,18,17,.72) 100%);
  border-color: rgba(210,170,120,.09);
  opacity: .82;
}

/* ── Check buttons & action buttons ── */
body.dark .check-btn,
body.dark .task-actions .icon-btn {
  background: rgba(255,255,255,.04);
  border-color: rgba(210,170,120,.16);
  color: #a89b8d;
}

/* ── Progress bars ── */
body.dark .progress-track,
body.dark .water-clean-progress {
  background: rgba(255,255,255,.06);
  border-color: rgba(210,170,120,.12);
}
body.dark .progress-bar,
body.dark .water-clean-progress span {
  box-shadow: 0 0 12px rgba(200,149,90,.30);
}
body.dark .review-box {
  background: rgba(255,255,255,.05);
  border-color: rgba(210,170,120,.14);
}

/* ── Chips, pills, tags ── */
body.dark .tag-chip,
body.dark .cat-filter-btn,
body.dark .goal-chip,
body.dark .streak-chip,
body.dark .completed-header {
  background: rgba(255,255,255,.05);
  border-color: rgba(210,170,120,.16);
  color: #c8b8a8;
}
body.dark .pill {
  background: rgba(255,255,255,.06);
  border-color: rgba(210,170,120,.18);
}
body.dark .cat-filter-btn[data-cat="__all__"].active {
  background: linear-gradient(135deg, #c8955a, #e8b47a);
  border-color: transparent;
  color: #fff;
}

/* ── Goal chips (coloured) ── */
body.dark .dash-goal-chip-green {
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.30);
  color: #4ade80;
}
body.dark .dash-goal-chip-red {
  background: rgba(239,68,68,.13);
  border-color: rgba(239,68,68,.30);
  color: #f87171;
}
body.dark .goal-deadline-badge { color: #4ade80; }
body.dark .goal-dropdown-count { color: #4ade80; }
body.dark .goal-dropdown-toggle-bad .goal-dropdown-count { color: #f87171; }

/* ── Water / hydration ── */
body.dark .water-main-card {
  background: linear-gradient(135deg, rgba(14,60,98,.36) 0%, rgba(20,17,16,.97) 100%);
}
body.dark .hyd-top {
  background: linear-gradient(135deg, rgba(14,127,212,.15), rgba(85,200,255,.07));
}
body.dark .hyd-cal { color: #fb923c; }
body.dark .water-clean-meta span,
body.dark .water-breakdown-grid div {
  background: rgba(255,255,255,.04);
  border-color: rgba(210,170,120,.14);
}
body.dark .water-clean-percent { color: #5ec4ff; }
body.dark .liquid-tank {
  box-shadow: inset 0 3px 12px rgba(0,0,0,.40), 0 6px 24px rgba(0,0,0,.28);
}

/* ── Coffee banner (upgrade prompt) ── */
body.dark .coffee-banner {
  border-color: rgba(210,170,120,.22);
  background:
    radial-gradient(circle at top left, rgba(232,180,122,.16) 0%, transparent 40%),
    linear-gradient(135deg, rgba(44,34,28,.97) 0%, rgba(22,19,17,.97) 100%);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
body.dark .coffee-banner-icon {
  background: rgba(255,255,255,.05);
  border-color: rgba(210,170,120,.20);
}
body.dark .coffee-banner-copy strong { color: #f5ede4; }
body.dark .coffee-banner-copy small { color: #b2a396; }
body.dark .coffee-banner-cta {
  background: linear-gradient(135deg, #c8955a, #b07a40);
  box-shadow: 0 8px 22px rgba(200,149,90,.26);
}

/* ── Shop ── */
body.dark .shop-header { padding: 6px 0 18px; }
body.dark .shop-gem-balance {
  display: inline-flex;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(210,170,120,.16);
}
body.dark .shop-item {
  background: linear-gradient(160deg, rgba(36,30,27,.97) 0%, rgba(24,20,18,.97) 100%);
  border-color: rgba(210,170,120,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 26px rgba(0,0,0,.18);
}
body.dark .shop-item:hover:not(.shop-item-locked) {
  border-color: rgba(210,170,120,.30);
  background: linear-gradient(160deg, rgba(44,36,31,.98) 0%, rgba(30,24,21,.98) 100%);
  box-shadow: 0 14px 32px rgba(0,0,0,.24);
}
body.dark .shop-item-icon {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(210,170,120,.14);
  border-radius: 14px;
  padding: 8px 0;
}
body.dark .shop-item-owned {
  border-color: rgba(74,222,128,.24);
  background: linear-gradient(160deg, rgba(22,36,26,.97) 0%, rgba(16,24,20,.97) 100%);
}
body.dark .shop-owned-badge { color: #4ade80; }
body.dark .shop-buy-btn.btn-primary {
  background: linear-gradient(135deg, #c8955a, #b07a40);
  color: #fff;
  box-shadow: 0 6px 18px rgba(200,149,90,.24);
}
body.dark .shop-buy-btn.btn-outline {
  background: rgba(255,255,255,.03);
  border-color: rgba(210,170,120,.20);
}
body.dark .shop-buy-btn:disabled {
  opacity: .7;
  background: rgba(255,255,255,.04);
  border-color: rgba(210,170,120,.12);
  color: #8a7d71;
  box-shadow: none;
}

/* ── Settings ── */
body.dark .settings-inline-status.error {
  color: #f87171;
}
body.dark .toggle-switch {
  background: rgba(255,255,255,.08);
  border-color: rgba(210,170,120,.16);
}
body.dark .toggle-switch.on { background: var(--accent); }

/* ── Stats / calendar ── */
body.dark .monthly-day-cell {
  background: linear-gradient(160deg, rgba(30,26,23,.94) 0%, rgba(21,18,17,.95) 100%);
  border-color: rgba(210,170,120,.12);
}
body.dark .monthly-day-cell.great { background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.26); }
body.dark .monthly-day-cell.ok   { background: rgba(250,204,21,.14); border-color: rgba(250,204,21,.24); }
body.dark .monthly-day-cell.low  { background: rgba(239,68,68,.14);  border-color: rgba(239,68,68,.24); }
body.dark .stats-overall-pill {
  background: rgba(255,255,255,.06);
  border-color: rgba(210,170,120,.16);
}

/* ── Mobile bottom nav ── */
body.dark .mobile-bottom-nav {
  background: linear-gradient(0deg, rgba(14,12,11,.98) 0%, rgba(20,17,15,.96) 100%) !important;
  border-top: 1px solid rgba(210,170,120,.16) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.36) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
body.dark .mobile-nav-item { color: #b2a396; }
body.dark .mobile-nav-item:hover { background: rgba(210,170,120,.07); }
body.dark .mobile-nav-item.active {
  background: linear-gradient(135deg, #c8955a, #b07a40);
  color: #fff;
  box-shadow: 0 8px 22px rgba(200,149,90,.28);
}

/* ════════════════════
   MOBILE OVERRIDES (≤768px)
════════════════════ */
@media (max-width: 768px) {
  body.dark .page.dashboard {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent;
  }

  body.dark .dashboard .top-bar {
    top: 0 !important;
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 12px !important;
    margin: -50px 0 14px !important;
    border-bottom: 1px solid rgba(210,170,120,.10);
    background:
      linear-gradient(180deg, rgba(10,9,8,.98) 0%, rgba(16,14,13,.90) 70%, transparent 100%);
    box-shadow: 0 10px 28px rgba(0,0,0,.20);
    backdrop-filter: blur(12px);
  }

  body.dark .dashboard-brand {
    max-width: 180px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }

  body.dark .top-bar-right { gap: 8px !important; }

  body.dark .dashboard .icon-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    background: linear-gradient(160deg, rgba(30,26,24,.97) 0%, rgba(19,16,15,.97) 100%) !important;
    border-color: rgba(210,170,120,.20) !important;
  }

  body.dark .left-col > .card,
  body.dark .right-col > .card,
  body.dark .goals-card,
  body.dark .hero-card,
  body.dark .schedule-card {
    border-radius: 24px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.32) !important;
  }

  body.dark .section-title,
  body.dark .card > .section-title:first-child,
  body.dark .hero-grid > .card:not(.hero-card) .section-title,
  body.dark .left-col > .card .section-title,
  body.dark .right-col > .card .section-title {
    padding-top: 22px !important;
  }

  /* Coffee banner — mobile */
  body.dark .coffee-banner {
    padding: 14px;
    border-radius: 22px;
    gap: 12px;
    margin-bottom: 16px;
  }
  body.dark .coffee-banner-icon { width: 40px; height: 40px; border-radius: 14px; }
  body.dark .coffee-banner-copy strong { font-size: .92rem; }
  body.dark .coffee-banner-copy small { display: block; font-size: .74rem; }
  body.dark .coffee-banner-cta {
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 14px;
  }

  /* Shop — mobile */
  body.dark .shop-header { gap: 8px; }
  body.dark .shop-gem-balance {
    width: 100%;
    justify-content: flex-start;
    border-radius: 16px;
  }
  body.dark .shop-gem-count { font-size: 1.35rem; }
  body.dark .shop-grid { gap: 12px; }
  body.dark .shop-item {
    align-items: flex-start;
    border-radius: 18px;
    padding: 14px;
    gap: 12px;
  }
  body.dark .shop-item-icon { width: 42px; min-width: 42px; font-size: 1.35rem; }
  body.dark .shop-item-body { display: grid; gap: 4px; }
  body.dark .shop-item-name { font-size: .96rem; }
  body.dark .shop-item-desc { font-size: .78rem; line-height: 1.45; }
  body.dark .shop-item-action { width: 100%; margin-top: 4px; }
  body.dark .shop-buy-btn,
  body.dark .shop-owned-badge {
    width: 100%;
    justify-content: center;
    min-height: 38px;
    border-radius: 12px;
    text-align: center;
  }

  /* Stats cards — mobile */
  body.dark .water-clean-card,
  body.dark .stats-hero-card,
  body.dark .monthly-calendar-card,
  body.dark .monthly-stat-card { border-radius: 22px; }

  /* Non-home views — darker board bg */
  body.dark .dashboard:not([data-mobile-view="home"]) .left-col > .card {
    background: linear-gradient(160deg, rgba(22,19,17,.99) 0%, rgba(14,13,12,.99) 100%);
  }
  body.dark .dashboard:not([data-mobile-view="home"]) #boardContent {
    padding-bottom: 30px !important;
  }
}


/* ═══════════════════════════════════════════════════
   DARK MODE — NUCLEAR OVERRIDE PATCH
   Fixes hardcoded white/cream backgrounds that resist
   dark mode. Uses !important to match the specificity
   of light-mode !important rules.
═══════════════════════════════════════════════════ */

/* ── Dark background for cards that have hardcoded white gradients ── */
body.dark .water-clean-card,
body.dark .water-main-card,
body.dark .stats-hero-card,
body.dark .monthly-calendar-card,
body.dark .monthly-stat-card {
  background: linear-gradient(160deg, rgba(26,22,20,.98) 0%, rgba(17,15,14,.99) 100%) !important;
  border-color: rgba(210,170,120,.15) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.38) !important;
}

/* ── High-specificity tab overrides ── */
body.dark .dashboard[data-current-tab="water"] .water-clean-card,
body.dark .dashboard[data-current-tab="stats"] .stats-hero-card,
body.dark .dashboard[data-current-tab="stats"] .monthly-calendar-card,
body.dark .dashboard[data-current-tab="stats"] .monthly-stat-card {
  background: linear-gradient(160deg, rgba(26,22,20,.98) 0%, rgba(17,15,14,.99) 100%) !important;
  border-color: rgba(210,170,120,.15) !important;
}

/* ── Mobile: override the !important card/brand/icon whites ── */
@media (max-width: 768px) {
  body.dark .dashboard-brand {
    background: linear-gradient(160deg, rgba(38,32,28,.97) 0%, rgba(24,20,18,.97) 100%) !important;
    border-color: rgba(210,170,120,.22) !important;
    color: #f0e7dd !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.04) inset !important;
  }

  body.dark .dashboard .icon-btn {
    background: linear-gradient(160deg, rgba(30,26,24,.97) 0%, rgba(20,17,16,.97) 100%) !important;
    border-color: rgba(210,170,120,.20) !important;
    color: #f0e7dd !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.03) inset !important;
  }

  body.dark .dashboard .card {
    background: linear-gradient(160deg, rgba(28,24,22,.98) 0%, rgba(18,16,15,.98) 100%) !important;
    border-color: rgba(210,170,120,.14) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 42px rgba(0,0,0,.38) !important;
  }

  body.dark .mobile-water-progress-card,
  body.dark .mobile-weight-card,
  body.dark .mobile-water-statbar {
    background: linear-gradient(160deg, rgba(28,24,22,.97) 0%, rgba(18,16,15,.98) 100%) !important;
    border-color: rgba(210,170,120,.14) !important;
  }

  body.dark .mobile-coffee-link {
    background: linear-gradient(160deg, rgba(38,32,28,.97) 0%, rgba(24,20,18,.97) 100%) !important;
    border-color: rgba(210,170,120,.20) !important;
    color: #f0e7dd !important;
  }

  /* Mobile bottom nav - override the hardcoded nav background */
  body.dark .mobile-bottom-nav {
    background: linear-gradient(0deg, rgba(12,11,10,.99) 0%, rgba(19,16,15,.97) 100%) !important;
    border-top: 1px solid rgba(210,170,120,.16) !important;
    box-shadow: 0 -6px 30px rgba(0,0,0,.40) !important;
  }

  /* Water section mobile cards */
  body.dark .water-clean-card,
  body.dark .stats-hero-card,
  body.dark .monthly-calendar-card,
  body.dark .monthly-stat-card {
    background: linear-gradient(160deg, rgba(26,22,20,.98) 0%, rgba(17,15,14,.99) 100%) !important;
    border-color: rgba(210,170,120,.14) !important;
  }
}

/* ── Desktop hero card & mini-cards (non-mobile) ── */
@media (min-width: 769px) {
  body.dark .hero-card,
  body.dark .schedule-card,
  body.dark .goals-card {
    background: linear-gradient(160deg, rgba(28,24,22,.98) 0%, rgba(18,16,15,.98) 100%) !important;
    border-color: rgba(210,170,120,.14) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 46px rgba(0,0,0,.36) !important;
  }
}

/* ─── Bugfix polish: goals input + smoother dashboard updates ─── */
.tag-input-wrap .tag-input-field,
#dashGoalsTagWrap .tag-input-field,
#dashBadHabitsTagWrap .tag-input-field,
#goalsTagWrap .tag-input-field,
#badHabitsTagWrap .tag-input-field {
  height: auto !important;
  min-height: 28px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 3px 0 !important;
}

.tag-input-wrap .tag-input-field:focus,
#dashGoalsTagWrap .tag-input-field:focus,
#dashBadHabitsTagWrap .tag-input-field:focus,
#goalsTagWrap .tag-input-field:focus,
#badHabitsTagWrap .tag-input-field:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.tag-input-wrap:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(200,149,90,.10);
}

body.rm-soft-update .fade-in,
body.rm-soft-update .fade-up {
  animation: none !important;
}

body.rm-soft-update .card,
body.rm-soft-update .task-row,
body.rm-soft-update .goal-row,
body.rm-soft-update .mini-card {
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease, background .18s ease;
}

body.rm-soft-update .task-row {
  animation: none !important;
}

@keyframes rmItemIn {
  from { opacity: .72; transform: translateY(5px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0s !important;
  animation-timing-function: step-end !important;
}

/* ════════════════════════════════════════
   POMODORO FEATURE PATCH
   Adds Focus/Pomodoro tab after Tasks.
════════════════════════════════════════ */
.pomodoro-board {
  display: grid;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}
.pomodoro-setup-card,
.pomodoro-timer-card,
.pomodoro-note-card {
  border: 1.5px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,239,.78));
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 12px 34px rgba(80,50,20,.08);
}
.pomodoro-card-label {
  font-weight: 900;
  font-size: 1rem;
  margin-bottom: 16px;
  color: var(--text);
}
.pomodoro-form-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr .65fr;
  gap: 12px;
  align-items: end;
}
.pomodoro-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 900;
  font-size: .78rem;
}
.pomodoro-field span { padding-left: 2px; }
.pomodoro-plan-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.pomodoro-plan-strip span {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(200,149,90,.10);
  border: 1px solid rgba(200,149,90,.20);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
}
.pomodoro-timer-card {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  background: radial-gradient(circle at 22% 20%, rgba(200,149,90,.18), transparent 36%), linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,248,239,.78));
}
.pomodoro-ring-wrap {
  display: grid;
  place-items: center;
}
.pomodoro-ring {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 12px solid rgba(200,149,90,.18);
  background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(255,246,234,.9));
  display: grid;
  place-items: center;
  align-content: center;
  box-shadow: inset 0 0 0 1px rgba(200,149,90,.20), 0 18px 42px rgba(80,50,20,.12);
}
.pomodoro-clock {
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -.06em;
  color: var(--text);
}
.pomodoro-phase {
  margin-top: 10px;
  font-weight: 900;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
}
.pomodoro-session-info {
  min-width: 0;
  display: grid;
  gap: 14px;
}
.pomodoro-selected {
  font-size: 1.1rem;
  font-weight: 1000;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pomodoro-progress-track {
  height: 14px;
  border-radius: 999px;
  background: rgba(200,149,90,.14);
  overflow: hidden;
  border: 1px solid rgba(200,149,90,.22);
}
.pomodoro-progress-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .35s ease;
}
.pomodoro-progress-text {
  color: var(--muted);
  font-weight: 800;
  font-size: .88rem;
}
.pomodoro-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.pomodoro-note-card {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}
.pomodoro-note-card strong {
  color: var(--text);
  font-size: .95rem;
}

/* Update tab/dock counts now that Pomodoro exists. */
.board-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
@media (min-width: 769px) {
  .mobile-bottom-nav {
    width: min(900px, calc(100vw - 40px)) !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
  .mobile-nav-item small {
    font-size: .62rem !important;
  }
}
@media (max-width: 768px) {
  .mobile-bottom-nav {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: min(98vw, 430px) !important;
    gap: 3px !important;
    padding: 7px !important;
  }
  .mobile-nav-item {
    height: 50px !important;
    border-radius: 14px !important;
    padding: 0 2px !important;
  }
  .mobile-nav-item span { font-size: .92rem !important; }
  .mobile-nav-item small { font-size: .49rem !important; }
  .pomodoro-board {
    gap: 13px;
  }
  .pomodoro-setup-card,
  .pomodoro-timer-card,
  .pomodoro-note-card {
    border-radius: 22px;
    padding: 16px;
  }
  .pomodoro-form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pomodoro-plan-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pomodoro-timer-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pomodoro-ring {
    width: min(230px, 72vw);
    height: min(230px, 72vw);
    border-width: 10px;
  }
  .pomodoro-clock {
    font-size: clamp(2.6rem, 16vw, 3.7rem);
  }
  .pomodoro-actions {
    grid-template-columns: 1fr;
  }
  .pomodoro-selected {
    white-space: normal;
    line-height: 1.25;
  }
}
@media (max-width: 380px) {
  .mobile-nav-item small { font-size: .46rem !important; }
  .mobile-nav-item span { font-size: .86rem !important; }
}

body.dark .pomodoro-setup-card,
body.dark .pomodoro-timer-card,
body.dark .pomodoro-note-card {
  background: linear-gradient(160deg, rgba(26,22,20,.98) 0%, rgba(17,15,14,.99) 100%) !important;
  border-color: rgba(210,170,120,.15) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.38) !important;
}
body.dark .pomodoro-timer-card {
  background: radial-gradient(circle at 20% 18%, rgba(200,149,90,.16), transparent 34%), linear-gradient(160deg, rgba(26,22,20,.98) 0%, rgba(17,15,14,.99) 100%) !important;
}
body.dark .pomodoro-ring {
  background: linear-gradient(160deg, rgba(35,30,27,.98), rgba(18,16,15,.98));
  border-color: rgba(200,149,90,.25);
  box-shadow: inset 0 0 0 1px rgba(210,170,120,.12), 0 18px 42px rgba(0,0,0,.32);
}
body.dark .pomodoro-plan-strip span,
body.dark .pomodoro-progress-track {
  background: rgba(255,255,255,.05);
  border-color: rgba(210,170,120,.14);
}

/* ─── Functional shop polish ─── */
.shop-item-status {
  display: inline-flex;
  width: fit-content;
  margin-top: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(200,149,90,.10);
  border: 1px solid rgba(200,149,90,.20);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 900;
}
.shop-active-boost {
  margin-top: 10px;
  padding: 9px 12px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(234,179,8,.13);
  border: 1px solid rgba(234,179,8,.28);
  color: #a16207;
  font-size: .78rem;
  font-weight: 900;
}
.shop-item-owned {
  opacity: 1 !important;
  background: linear-gradient(135deg, rgba(34,197,94,.08), var(--panel-soft));
  border-color: rgba(34,197,94,.28) !important;
}
body.dark .shop-item-status {
  background: rgba(200,149,90,.16);
  border-color: rgba(200,149,90,.32);
  color: #f0c48c;
}
body.dark .shop-active-boost {
  background: rgba(234,179,8,.16);
  border-color: rgba(234,179,8,.28);
  color: #facc15;
}
body.dark .shop-item-owned {
  background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(24,24,24,.94));
  border-color: rgba(34,197,94,.28) !important;
}
@media (max-width: 768px) {
  .shop-item-status { font-size: .68rem; }
  .shop-active-boost { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════
   ANIMATED GUIDED TUTORIAL — replayable tour
════════════════════════════════════════ */
#tutorialOverlay.tutorial-overlay {
  z-index: 12000 !important;
  display: none;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(200,149,90,.16), transparent 30%),
    radial-gradient(circle at 80% 90%, rgba(80,200,190,.12), transparent 32%),
    rgba(18, 13, 8, .66) !important;
  backdrop-filter: blur(7px) saturate(1.1) !important;
}
body.dark #tutorialOverlay.tutorial-overlay {
  background:
    radial-gradient(circle at 18% 8%, rgba(200,149,90,.22), transparent 32%),
    radial-gradient(circle at 85% 90%, rgba(56,189,248,.13), transparent 34%),
    rgba(0,0,0,.72) !important;
}
.tutorial-spotlight {
  position: fixed;
  z-index: 12001;
  pointer-events: none;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.38),
    0 0 0 8px rgba(200,149,90,.24),
    0 18px 54px rgba(200,149,90,.32);
  background: rgba(255,255,255,.025);
  animation: tutorialSpotPulse 1.35s ease-in-out infinite alternate;
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease, border-radius .35s ease;
}
@keyframes tutorialSpotPulse {
  from { box-shadow: 0 0 0 9999px rgba(0,0,0,.38), 0 0 0 7px rgba(200,149,90,.18), 0 16px 45px rgba(200,149,90,.24); }
  to   { box-shadow: 0 0 0 9999px rgba(0,0,0,.42), 0 0 0 12px rgba(200,149,90,.32), 0 22px 70px rgba(200,149,90,.36); }
}
.tutorial-pointer {
  position: fixed;
  z-index: 12003;
  pointer-events: none;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 2px solid rgba(255,255,255,.76);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  animation: tutorialPointerNudge .85s ease-in-out infinite alternate;
  transition: left .35s ease, top .35s ease, transform .35s ease;
}
@keyframes tutorialPointerNudge {
  from { margin-left: 0; }
  to { margin-left: 8px; }
}
#tutorialCard.tutorial-card {
  position: fixed;
  z-index: 12004;
  width: min(390px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  pointer-events: auto;
  padding: 22px !important;
  text-align: left !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.56) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,242,.92)) !important;
  box-shadow: 0 24px 80px rgba(33,22,12,.34), inset 0 1px 0 rgba(255,255,255,.75) !important;
  backdrop-filter: blur(22px) saturate(1.2);
  transition: left .35s ease, top .35s ease, bottom .35s ease, transform .35s ease;
}
body.dark #tutorialCard.tutorial-card {
  border-color: rgba(226,196,150,.20) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(200,149,90,.18), transparent 32%),
    linear-gradient(180deg, rgba(32,27,24,.98), rgba(15,14,13,.98)) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.tutorial-card-pop { animation: tutorialCardPop .32s cubic-bezier(.2,.9,.2,1); }
@keyframes tutorialCardPop {
  from { opacity: .25; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tutorial-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tutorial-badge,
.tutorial-step-label {
  margin: 0 !important;
  width: fit-content;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(200,149,90,.12);
  border: 1px solid rgba(200,149,90,.25);
  color: var(--accent);
  font-size: .72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tutorial-mini-skip {
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}
.tutorial-progress-track {
  margin: 0 0 18px !important;
  height: 8px !important;
  background: rgba(200,149,90,.12) !important;
}
.tutorial-progress-bar {
  background: linear-gradient(90deg, var(--accent), #f1c17e, #55c8ff) !important;
  box-shadow: 0 0 18px rgba(200,149,90,.45);
}
.tutorial-hero-line {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 14px;
  align-items: start;
}
.tutorial-icon {
  width: 54px;
  height: 54px;
  margin: 0 !important;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.85rem !important;
  background: linear-gradient(135deg, rgba(200,149,90,.18), rgba(232,180,122,.12));
  border: 1px solid rgba(200,149,90,.24);
  animation: tutorialIconFloat 1.7s ease-in-out infinite alternate !important;
}
@keyframes tutorialIconFloat {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-4px) rotate(2deg); }
}
.tutorial-title {
  margin: 0 0 7px !important;
  font-size: 1.26rem !important;
  line-height: 1.12;
}
.tutorial-body {
  margin: 0 !important;
  color: var(--muted);
  line-height: 1.52 !important;
  font-size: .93rem !important;
}
.tutorial-tip {
  margin: 16px 0 0;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(85,200,255,.08);
  border: 1px solid rgba(85,200,255,.18);
  color: var(--text);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.4;
}
body.dark .tutorial-tip {
  background: rgba(85,200,255,.09);
  border-color: rgba(85,200,255,.16);
}
.tutorial-features {
  margin: 14px 0 0 !important;
}
.tutorial-feature {
  background: rgba(200,149,90,.08) !important;
}
.tutorial-actions {
  display: grid !important;
  grid-template-columns: .9fr 1.1fr;
  gap: 10px !important;
  margin-top: 18px;
}
.tutorial-actions .btn {
  max-width: none !important;
  width: 100%;
}
#tutorialPrevBtn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.tutorial-target-active {
  animation: tutorialTargetGlow 1.15s ease-in-out infinite alternate !important;
}
@keyframes tutorialTargetGlow {
  from { filter: saturate(1); }
  to { filter: saturate(1.08) brightness(1.03); }
}
body.dark .tutorial-feature {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(226,196,150,.12) !important;
}
.settings-footer #replayTutorialBtn {
  background: linear-gradient(135deg, rgba(200,149,90,.12), rgba(85,200,255,.08));
  border-color: rgba(200,149,90,.28);
}
.settings-footer #replayTutorialBtn span:first-child {
  animation: tutorialIconFloat 1.5s ease-in-out infinite alternate;
}
@media (max-width: 760px) {
  #tutorialOverlay.tutorial-overlay {
    background:
      radial-gradient(circle at 30% 6%, rgba(200,149,90,.22), transparent 32%),
      rgba(15,10,6,.68) !important;
  }
  #tutorialCard.tutorial-card {
    border-radius: 26px 26px calc(26px + env(safe-area-inset-bottom,0px)) calc(26px + env(safe-area-inset-bottom,0px)) !important;
    padding: 18px !important;
    max-height: min(62vh, 520px);
  }
  .tutorial-hero-line {
    grid-template-columns: 48px minmax(0,1fr);
    gap: 12px;
  }
  .tutorial-icon {
    width: 48px;
    height: 48px;
    font-size: 1.6rem !important;
    border-radius: 16px;
  }
  .tutorial-title { font-size: 1.12rem !important; }
  .tutorial-body { font-size: .86rem !important; }
  .tutorial-tip { font-size: .8rem; padding: 10px 11px; }
  .tutorial-actions { margin-top: 14px; }
  .tutorial-pointer {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

/* ════════════════════════════════════════
   AUTH + GOAL DEADLINE + TUTORIAL POLISH PATCH
════════════════════════════════════════ */
.password-strength {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
.password-strength-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  border: 1px solid var(--border);
  overflow: hidden;
}
body.dark .password-strength-track { background: rgba(255,255,255,.06); }
.password-strength-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  transition: width .25s ease, background .25s ease;
  background: #ef4444;
}
.password-strength-track span[data-strength="2"] { background: #f59e0b; }
.password-strength-track span[data-strength="3"] { background: #eab308; }
.password-strength-track span[data-strength="4"] { background: #22c55e; }
.password-strength-track span[data-strength="5"] { background: linear-gradient(90deg, #22c55e, #14b8a6); }
.password-strength-label {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.35;
}

.goal-deadline-editor {
  margin-top: 12px;
  border: 1.5px solid rgba(200,149,90,.18);
  background: rgba(200,149,90,.055);
  border-radius: 16px;
  padding: 12px;
}
.goal-deadline-editor-title {
  font-size: .78rem;
  font-weight: 950;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.goal-deadline-editor-list {
  display: grid;
  gap: 8px;
}
.goal-deadline-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 10px;
  align-items: center;
  color: var(--text);
  font-size: .86rem;
  font-weight: 850;
}
.goal-deadline-edit-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goal-deadline-edit-row input {
  height: 38px;
  border-radius: 12px;
  padding: 0 10px;
  font-size: .82rem;
}
.goal-deadline-empty {
  color: var(--muted);
  font-style: italic;
  font-size: .82rem;
}
.goal-save-pulse {
  animation: goalSavePulse .52s ease;
}
@keyframes goalSavePulse {
  0% { box-shadow: var(--shadow); transform: translateY(0); }
  45% { box-shadow: 0 20px 70px rgba(200,149,90,.28); transform: translateY(-2px); }
  100% { box-shadow: var(--shadow); transform: translateY(0); }
}
body.dark .goal-deadline-editor {
  background: rgba(200,149,90,.08);
  border-color: rgba(226,196,150,.16);
}
@media (max-width: 640px) {
  .goal-deadline-edit-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .goal-deadline-edit-row input { width: 100%; }
}

/* Make tutorial spotlight a real clear window: target stays visible, outside dims. */
#tutorialOverlay.tutorial-overlay.tutorial-has-target {
  background: transparent !important;
  backdrop-filter: none !important;
}
#tutorialOverlay.tutorial-overlay.tutorial-has-target::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
}
.tutorial-spotlight {
  background: transparent !important;
  outline: 2px solid rgba(255,255,255,.96);
  outline-offset: 0;
  box-shadow:
    0 0 0 9999px rgba(10,7,4,.66),
    0 0 0 8px rgba(200,149,90,.26),
    0 18px 56px rgba(200,149,90,.34) !important;
}
@keyframes tutorialSpotPulse {
  from { box-shadow: 0 0 0 9999px rgba(10,7,4,.62), 0 0 0 7px rgba(200,149,90,.18), 0 16px 45px rgba(200,149,90,.24); }
  to   { box-shadow: 0 0 0 9999px rgba(10,7,4,.70), 0 0 0 12px rgba(200,149,90,.32), 0 22px 70px rgba(200,149,90,.36); }
}
body.dark .tutorial-spotlight {
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.74),
    0 0 0 8px rgba(200,149,90,.28),
    0 18px 60px rgba(200,149,90,.32) !important;
}
.tutorial-target-active {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════
   XP cap / habit slots / overhydration polish
════════════════════════════════════════ */
.water-main-card.overhydrated {
  border-color: rgba(239, 68, 68, .42) !important;
  background:
    radial-gradient(circle at top right, rgba(248,113,113,.22), transparent 38%),
    linear-gradient(135deg, rgba(255,241,242,.92), rgba(255,248,239,.86)) !important;
}

.water-main-card.overhydrated .water-clean-percent {
  color: #dc2626 !important;
}

.water-main-card.overhydrated .water-clean-progress {
  border-color: rgba(239,68,68,.32) !important;
  background: rgba(254,226,226,.85) !important;
}

.water-main-card.overhydrated .water-clean-progress span {
  background: linear-gradient(90deg, #1d9fe8 0%, #5ac8ff 38%, #fb923c 68%, #ef4444 100%) !important;
  box-shadow: 0 0 18px rgba(239,68,68,.28);
}

.overhydration-warning {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1.5px solid rgba(239,68,68,.26);
  border-radius: 16px;
  background: rgba(254,226,226,.72);
  color: #b91c1c;
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.45;
}

body.dark .water-main-card.overhydrated {
  border-color: rgba(248,113,113,.38) !important;
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.18), transparent 42%),
    linear-gradient(135deg, rgba(74,20,20,.42), rgba(18,14,14,.97)) !important;
}

body.dark .water-main-card.overhydrated .water-clean-percent {
  color: #f87171 !important;
}

body.dark .water-main-card.overhydrated .water-clean-progress {
  border-color: rgba(248,113,113,.28) !important;
  background: rgba(127,29,29,.25) !important;
}

body.dark .water-main-card.overhydrated .water-clean-progress span {
  background: linear-gradient(90deg, #38bdf8 0%, #60a5fa 35%, #fb923c 66%, #f87171 100%) !important;
  box-shadow: 0 0 22px rgba(248,113,113,.34);
}

body.dark .overhydration-warning {
  background: rgba(127,29,29,.22);
  border-color: rgba(248,113,113,.30);
  color: #fecaca;
}

/* ════════════════════════════════════════
   Habit skip + edit polish
════════════════════════════════════════ */
.edit-habit-btn { font-size: .9rem; }
.task-row.skipped {
  opacity: .72;
  background: color-mix(in srgb, var(--panel-soft) 78%, transparent);
}
.task-row.skipped .task-title-main {
  text-decoration: line-through;
}
.skip-btn.skip-active {
  opacity: 1;
  background: rgba(245,158,11,.16) !important;
  border-color: rgba(245,158,11,.42) !important;
  color: #d97706 !important;
}
body.dark .skip-btn.skip-active {
  background: rgba(245,158,11,.18) !important;
  color: #fbbf24 !important;
}
.habit-edit-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 24px;
}
.habit-edit-dialog .dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .task-actions {
    grid-template-columns: 42px 42px 42px minmax(96px, 1fr) 42px !important;
  }
  .task-actions:not(:has(.edit-habit-btn)):has(.skip-btn) {
    grid-template-columns: 42px 42px minmax(112px, 1fr) 42px !important;
  }
  .task-actions:not(:has(.skip-btn)):not(:has(.edit-habit-btn)) {
    grid-template-columns: 42px minmax(122px, 1fr) 42px !important;
  }
  .task-actions .btn,
  .task-actions .icon-btn {
    height: 42px !important;
  }
}
@media (max-width: 390px) {
  .task-actions {
    grid-template-columns: 38px 38px 38px minmax(82px, 1fr) 38px !important;
    gap: 6px !important;
  }
  .task-actions:not(:has(.edit-habit-btn)):has(.skip-btn) {
    grid-template-columns: 38px 38px minmax(90px, 1fr) 38px !important;
  }
}

/* ─── Forgot password / recovery flow ─── */
.auth-forgot-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 900;
  text-align: right;
  width: max-content;
  align-self: flex-end;
  cursor: pointer;
  padding: 2px 4px;
  margin-top: -4px;
}
.auth-forgot-link:hover { text-decoration: underline; }
.auth-reset-overlay {
  z-index: 220;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-reset-dialog {
  width: min(440px, 100%);
  padding: 24px;
}
.auth-reset-message {
  min-height: 20px;
  font-size: .88rem;
  line-height: 1.45;
}
.auth-reset-error {
  color: #dc2626;
  font-weight: 800;
}
.auth-reset-success {
  color: #16a34a;
  font-weight: 800;
}
body.dark .auth-forgot-link { color: var(--accent-2); }
body.dark .auth-reset-dialog {
  background: rgba(20, 16, 13, .96);
  border-color: rgba(200,149,90,.26);
}
body.dark .auth-reset-error { color: #fca5a5; }
body.dark .auth-reset-success { color: #86efac; }

/* Goal deadline editor: robust day/month/year controls */
.goal-deadline-selects {
  display: grid;
  grid-template-columns: 76px 92px 92px auto;
  gap: 7px;
  align-items: center;
}
.goal-deadline-selects select {
  height: 38px;
  border-radius: 12px;
  padding: 0 9px;
  font-size: .82rem;
  background: var(--input);
  color: var(--text);
  border: 1.5px solid var(--border);
  outline: none;
}
.goal-deadline-selects select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200,149,90,.12);
}
.goal-deadline-clear {
  height: 38px;
  padding: 0 11px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}
.goal-deadline-clear:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239,68,68,.07);
}
body.dark .goal-deadline-selects select {
  background: rgba(20,20,20,.92);
  color: var(--text);
  border-color: rgba(226,196,150,.16);
}
@media (max-width: 760px) {
  .goal-deadline-edit-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .goal-deadline-selects {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .goal-deadline-clear {
    grid-column: 1 / -1;
  }
}

/* ════════════════════════════════════════
   GOAL DEADLINE UI FIX + CAR METER STATS
════════════════════════════════════════ */
.goal-deadline-editor {
  margin-top: 14px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(200,149,90,.22) !important;
  background: linear-gradient(180deg, rgba(255,248,239,.86), rgba(255,255,255,.68)) !important;
  overflow: visible !important;
}
body.dark .goal-deadline-editor {
  background: linear-gradient(180deg, rgba(42,35,28,.86), rgba(24,22,20,.82)) !important;
  border-color: rgba(226,196,150,.18) !important;
}
.goal-deadline-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
.goal-deadline-editor-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.35;
}
.goal-deadline-editor-list {
  display: grid !important;
  gap: 10px !important;
}
.goal-deadline-edit-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, .75fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(232,216,192,.72) !important;
}
body.dark .goal-deadline-edit-row {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(226,196,150,.12) !important;
}
.goal-deadline-goal-name {
  color: var(--text);
  font-size: .92rem;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goal-deadline-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.goal-deadline-controls input[type="date"] {
  height: 44px !important;
  min-width: 0 !important;
  width: 100% !important;
  border-radius: 14px !important;
  padding: 0 12px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--input) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.goal-deadline-controls input[type="date"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(200,149,90,.12) !important;
}
.goal-deadline-clear {
  height: 44px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  border-radius: 14px;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
}
.goal-deadline-clear:hover {
  color: var(--text);
  border-color: var(--accent);
}
@media (max-width: 820px) {
  .goal-deadline-edit-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .goal-deadline-controls {
    grid-template-columns: 1fr !important;
  }
  .goal-deadline-clear {
    width: 100%;
  }
}

/* Stats: car meter dashboard */
.stats-meter-board {
  gap: 18px !important;
}
.car-progress-card,
.stats-dashboard-card,
.stats-meter-board .monthly-calendar-card {
  border: 1.5px solid var(--border);
  border-radius: 28px;
  background: radial-gradient(circle at 12% 0%, rgba(200,149,90,.18), transparent 32%), linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,248,239,.72));
  box-shadow: 0 18px 46px rgba(80,50,20,.09);
  overflow: hidden;
}
body.dark .car-progress-card,
body.dark .stats-dashboard-card,
body.dark .stats-meter-board .monthly-calendar-card {
  background: radial-gradient(circle at 15% 0%, rgba(200,149,90,.18), transparent 34%), linear-gradient(180deg, #211d19, #121111);
  border-color: rgba(226,196,150,.15);
  box-shadow: 0 18px 52px rgba(0,0,0,.46);
}
.car-progress-card {
  padding: 22px;
}
.car-progress-top,
.stats-dashboard-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  margin-bottom: 18px;
}
.car-progress-top h3,
.stats-dashboard-head h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1.05;
}
.car-progress-top p {
  color: var(--muted);
  font-weight: 850;
  margin-top: 6px;
  line-height: 1.35;
}
.car-stage-pill {
  flex: none;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(200,149,90,.13);
  border: 1px solid rgba(200,149,90,.24);
  color: var(--accent);
  font-weight: 950;
}
.car-visual-wrap {
  position: relative;
  min-height: 150px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(40,38,36,.05), rgba(40,38,36,.02));
  border: 1px solid rgba(232,216,192,.72);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 16px;
}
body.dark .car-visual-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border-color: rgba(226,196,150,.12);
}
.car-road-line {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 34px;
  height: 7px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(200,149,90,.35) 0 24px, transparent 24px 42px);
  opacity: .75;
}
.car-visual {
  position: relative;
  width: min(520px, 92%);
  height: 110px;
  transform: translateY(-3px);
}
.car-visual-wrap.car-running .car-visual {
  animation: carCruise 1.25s ease-in-out infinite alternate;
}
@keyframes carCruise {
  from { transform: translate(-5px, -3px); }
  to { transform: translate(7px, -5px); }
}
.car-body,
.car-engine,
.car-tire,
.car-motion {
  position: absolute;
  display: grid;
  place-items: center;
  filter: grayscale(1);
  opacity: .22;
  transition: opacity .28s ease, filter .28s ease, transform .28s ease;
}
.car-body.unlocked,
.car-engine.unlocked,
.car-tire.unlocked,
.car-motion.unlocked {
  filter: none;
  opacity: 1;
}
.car-body {
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  font-size: 4.8rem;
  z-index: 2;
}
.car-engine {
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  font-size: 2rem;
  z-index: 3;
  text-shadow: 0 3px 14px rgba(0,0,0,.12);
}
.car-engine.unlocked { animation: engineSpin 3.5s linear infinite; }
@keyframes engineSpin { to { transform: translateX(-50%) rotate(360deg); } }
.car-tire {
  bottom: 8px;
  font-size: 2rem;
  z-index: 4;
}
.car-tire.unlocked { animation: tireWobble 1.5s ease-in-out infinite alternate; }
@keyframes tireWobble { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.tire-one { left: 18%; }
.tire-two { left: 35%; }
.tire-three { right: 35%; }
.tire-four { right: 18%; }
.car-motion {
  right: 6%;
  top: 44px;
  font-size: 2rem;
  transform: translateX(16px);
}
.car-motion.unlocked { animation: smokeTrail .9s ease-in-out infinite alternate; }
@keyframes smokeTrail { from { opacity: .4; transform: translateX(8px); } to { opacity: 1; transform: translateX(22px); } }
.car-build-bar {
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  overflow: hidden;
  margin-bottom: 14px;
}
.car-build-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c8955a, #e8b47a, #38bdf8);
  transition: width .5s ease;
}
.car-milestones {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.car-milestone {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  opacity: .54;
  text-align: center;
}
body.dark .car-milestone { background: rgba(255,255,255,.035); }
.car-milestone.done {
  opacity: 1;
  border-color: rgba(200,149,90,.45);
  background: rgba(200,149,90,.12);
}
.car-milestone span { font-size: 1.1rem; }
.car-milestone strong { font-size: .72rem; color: var(--text); }
.car-milestone small { font-size: .62rem; color: var(--muted); font-weight: 900; }
.stats-dashboard-card {
  padding: 22px;
}
.meter-gauge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.meter-gauge-card {
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 18px 16px 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(250,246,238,.72) 100%);
  box-shadow: 0 4px 24px rgba(60,40,10,.07), 0 1px 0 rgba(255,255,255,.8) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
.meter-gauge-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 24px 24px 0 0;
  background: var(--active-color, #f59e0b);
  opacity: .80;
}
.meter-gauge-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(60,40,10,.12); }
body.dark .meter-gauge-card {
  background: linear-gradient(160deg, rgba(38,32,22,.85) 0%, rgba(24,20,12,.78) 100%);
  border-color: rgba(226,196,150,.14);
  box-shadow: 0 4px 24px rgba(0,0,0,.30);
}
.meter-gauge {
  position: relative;
  width: 100%;
  aspect-ratio: 1.8;
  min-height: 108px;
  max-height: 130px;
  display: grid;
  place-items: end center;
  overflow: hidden;
}
/* Dial tick marks background ring */
.meter-gauge::before {
  content: '';
  position: absolute;
  width: 94%;
  aspect-ratio: 1;
  bottom: -48%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    rgba(239,68,68,.18)  0    25%,
    rgba(245,158,11,.18) 25%  52%,
    rgba(34,197,94,.18)  52%  75%,
    transparent          75%  100%
  );
  -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 74%, transparent 75%);
          mask: radial-gradient(circle, transparent 0 54%, #000 55% 74%, transparent 75%);
}
.meter-arc {
  position: absolute;
  width: 86%;
  aspect-ratio: 1;
  bottom: -43%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--arc-bg);
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58% 73%, transparent 74%);
          mask: radial-gradient(circle, transparent 0 57%, #000 58% 73%, transparent 74%);
  filter: drop-shadow(0 0 6px var(--active-color, #f59e0b));
  transition: background .4s ease;
}
/* Needle pivot shadow circle */
.meter-gauge::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #c8b090 60%, #8a6840 100%);
  bottom: calc(25% - 7px);
  left: calc(50% - 7px);
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.meter-needle {
  position: absolute;
  width: 42%;
  height: 3.5px;
  border-radius: 999px 999px 999px 0;
  background: linear-gradient(90deg, #6b4c2a 0%, #c09050 40%, #e8b860 100%);
  left: 50%;
  bottom: 25%;
  transform-origin: left center;
  transform: rotate(var(--needle-rotation));
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  z-index: 3;
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}
.meter-center {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(248,244,234,.90));
  border: 2px solid rgba(200,175,130,.35);
  display: grid;
  place-items: center;
  align-content: center;
  box-shadow: 0 6px 20px rgba(80,50,10,.14), 0 1px 0 rgba(255,255,255,.9) inset;
  gap: 1px;
}
body.dark .meter-center {
  background: linear-gradient(160deg, rgba(48,40,24,.92), rgba(32,26,12,.88));
  border-color: rgba(200,165,100,.22);
}
.meter-center span { font-size: 1.25rem; line-height: 1; }
.meter-center strong { font-size: 1rem; line-height: 1.1; font-weight: 900; }
.meter-center small { font-size: .70rem; color: var(--muted); font-weight: 800; line-height: 1; }
.meter-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  width: 100%;
}
.meter-copy strong {
  font-size: .94rem;
  font-weight: 900;
}
.meter-copy span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.35;
}
/* Accent colour strip per gauge type */
.meter-gold  { --active-color: #f59e0b; }
.meter-green { --active-color: #22c55e; }
.meter-blue  { --active-color: #38bdf8; }
.stats-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.stats-quick-grid div {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  padding: 13px;
  display: grid;
  gap: 6px;
}
body.dark .stats-quick-grid div { background: rgba(255,255,255,.04); border-color: rgba(226,196,150,.12); }
.stats-quick-grid span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
}
.stats-quick-grid strong {
  font-size: 1.38rem;
  line-height: 1;
}
@media (max-width: 980px) {
  .meter-gauge-grid,
  .stats-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .car-milestones {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .car-progress-card,
  .stats-dashboard-card,
  .stats-meter-board .monthly-calendar-card {
    border-radius: 22px;
    padding: 16px;
  }
  .car-progress-top,
  .stats-dashboard-head {
    flex-direction: column;
    align-items: stretch;
  }
  .car-stage-pill,
  .stats-overall-pill { width: max-content; }
  .car-visual-wrap { min-height: 132px; }
  .car-body { font-size: 3.7rem; }
  .car-engine { font-size: 1.6rem; top: 42px; }
  .car-tire { font-size: 1.5rem; }
  .meter-gauge-grid,
  .stats-quick-grid {
    grid-template-columns: 1fr;
  }
  .car-milestones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* FINAL PATCH: stable goal deadlines + true red-zero meters + locked car parts */
.goal-deadline-controls {
  grid-template-columns: 1fr !important;
}
.goal-deadline-selects {
  display: grid !important;
  grid-template-columns: minmax(70px,.7fr) minmax(92px,1fr) minmax(92px,1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
}
.goal-deadline-selects select {
  height: 44px !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--input) !important;
  color: var(--text) !important;
  padding: 0 10px !important;
  font-weight: 850 !important;
  min-width: 0 !important;
  outline: none !important;
}
.goal-deadline-selects select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(200,149,90,.14) !important;
}
.goal-deadline-selects .goal-deadline-clear {
  height: 44px !important;
  white-space: nowrap !important;
}
body.dark .goal-deadline-selects select {
  background: rgba(18,16,15,.95) !important;
  color: var(--text) !important;
  border-color: rgba(226,196,150,.18) !important;
}
.goal-date-btn,
.goal-date-input {
  display: none !important;
}

.meter-arc {
  background: var(--arc-bg, conic-gradient(from 210deg, #ef4444 0 76%, transparent 76% 100%)) !important;
  opacity: 1 !important;
}
.meter-gauge-card .meter-needle {
  transition: transform .45s ease !important;
}
.car-body,
.car-engine,
.car-tire,
.car-motion {
  opacity: 1;
  filter: none;
}
.car-milestone.locked span {
  display: none;
}
.car-milestone.locked {
  opacity: .42;
}
.car-milestone.locked small,
.car-milestone.locked strong {
  opacity: .7;
}
@media (max-width: 820px) {
  .goal-deadline-selects {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .goal-deadline-selects .goal-deadline-clear {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}


#dashGoalsEdit .goals-edit-cols {
  align-items: start;
}
#dashGoalsEdit > .goal-deadline-editor {
  margin-top: 16px;
  width: 100%;
}
.goal-deadline-editor {
  max-width: none !important;
}
.goal-deadline-editor-list {
  display: grid !important;
  gap: 10px !important;
}
.goal-deadline-edit-row {
  display: grid !important;
  grid-template-columns: minmax(160px, .7fr) minmax(0, 1.3fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.56) !important;
  border: 1px solid rgba(232,216,192,.9) !important;
}
.goal-deadline-goal-name {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
  color: var(--text) !important;
}
.goal-deadline-controls {
  width: 100% !important;
  min-width: 0 !important;
}
.goal-deadline-selects {
  display: grid !important;
  grid-template-columns: minmax(72px, .7fr) minmax(100px, 1fr) minmax(108px, 1fr) minmax(82px, auto) !important;
  gap: 8px !important;
  width: 100% !important;
  align-items: center !important;
}
.goal-deadline-selects select,
.goal-deadline-clear {
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
}
.goal-deadline-clear {
  border: 1.5px solid var(--border) !important;
  border-radius: 14px !important;
  background: var(--panel) !important;
  color: var(--muted) !important;
  font-weight: 900 !important;
  padding: 0 12px !important;
}
body.dark .goal-deadline-edit-row {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(226,196,150,.14) !important;
}

.meter-arc { background: var(--arc-bg) !important; }
.meter-needle {
  transform: rotate(var(--needle-rotation)) !important;
  transform-origin: left center !important;
}
.meter-gauge-card { transition: transform .18s ease, border-color .2s ease; }
.meter-gauge-card:hover { transform: translateY(-2px); }

.habit-consistency-card {
  border: 1.5px solid var(--border);
  border-radius: 26px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,248,239,.54));
  box-shadow: 0 16px 38px rgba(80,50,20,.08);
}
body.dark .habit-consistency-card {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border-color: rgba(226,196,150,.14);
}
.habit-consistency-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.habit-consistency-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .5fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.58);
}
body.dark .habit-consistency-row {
  background: rgba(255,255,255,.035);
  border-color: rgba(226,196,150,.12);
}
.habit-consistency-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.habit-consistency-main strong {
  font-size: .98rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.habit-consistency-main span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}
.habit-consistency-meter {
  display: grid;
  gap: 5px;
  justify-items: end;
}
.habit-consistency-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(239,68,68,.16);
  border: 1px solid rgba(239,68,68,.18);
  overflow: hidden;
}
.habit-consistency-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  min-width: 4px;
  transition: width .4s ease;
}
.habit-consistency-meter small {
  color: var(--muted);
  font-weight: 900;
  font-size: .74rem;
}
.habit-consistency-row.done { border-color: rgba(34,197,94,.34); }
.habit-consistency-row.skipped { border-color: rgba(245,158,11,.34); }
.habit-consistency-row.pending { border-color: rgba(239,68,68,.22); }

@media (max-width: 900px) {
  #dashGoalsEdit .goals-edit-cols {
    grid-template-columns: 1fr !important;
  }
  .goal-deadline-edit-row {
    grid-template-columns: 1fr !important;
  }
  .goal-deadline-goal-name {
    white-space: normal !important;
  }
}
@media (max-width: 640px) {
  .goal-deadline-selects {
    grid-template-columns: 1fr 1fr !important;
  }
  .goal-deadline-selects [data-deadline-year],
  .goal-deadline-selects .goal-deadline-clear {
    grid-column: span 1 !important;
  }
  .habit-consistency-row {
    grid-template-columns: 1fr !important;
  }
  .habit-consistency-meter {
    justify-items: stretch;
  }
}

/* ════════════════════════════════════════
   FINAL FIX: Goals editor + real car-style gauges
════════════════════════════════════════ */

/* Keep the goals editor contained and readable on desktop/mobile. */
#dashGoalsEdit {
  padding-bottom: 92px !important;
}

#dashGoalsEdit > .goal-deadline-editor {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 8px !important;
  overflow: visible !important;
}

.goal-deadline-editor-list {
  display: grid !important;
  gap: 12px !important;
}

.goal-deadline-edit-row {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) minmax(460px, 2.1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  overflow: visible !important;
}

.goal-deadline-goal-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.goal-deadline-controls,
.goal-deadline-selects {
  width: 100% !important;
  min-width: 0 !important;
}

.goal-deadline-selects {
  display: grid !important;
  grid-template-columns: minmax(80px, .8fr) minmax(118px, 1.1fr) minmax(118px, 1.1fr) minmax(82px, .75fr) !important;
  gap: 10px !important;
}

.goal-deadline-selects select,
.goal-deadline-clear {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  border-radius: 14px !important;
}

.goals-edit-actions {
  position: relative !important;
  z-index: 3 !important;
  padding-bottom: 8px !important;
}

@media (max-width: 900px) {
  .goal-deadline-edit-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .goal-deadline-goal-name {
    white-space: normal !important;
  }

  .goal-deadline-selects {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .goal-deadline-clear {
    grid-column: auto !important;
  }
}

@media (max-width: 560px) {
  .goal-deadline-selects {
    grid-template-columns: 1fr !important;
  }
}

/* Car-meter gauges: 0 is red/left, 10 is green/right. */
.meter-gauge {
  min-height: 178px !important;
  aspect-ratio: 1.7 !important;
  overflow: visible !important;
  place-items: center !important;
  padding-top: 12px !important;
}

.meter-arc {
  width: 92% !important;
  aspect-ratio: 1 !important;
  bottom: -43% !important;
  left: 4% !important;
  background: var(--arc-bg) !important;
  opacity: 1 !important;
  -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57% 72%, transparent 73%) !important;
          mask: radial-gradient(circle, transparent 0 56%, #000 57% 72%, transparent 73%) !important;
}

.meter-numbers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.meter-number {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: .72rem;
  font-weight: 1000;
  color: var(--muted);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(232,216,192,.9);
  border-radius: 999px;
  min-width: 26px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(80,50,20,.06);
}

body.dark .meter-number {
  background: rgba(20,16,13,.85);
  border-color: rgba(226,196,150,.16);
}

.meter-needle {
  position: absolute !important;
  z-index: 4 !important;
  width: 39% !important;
  height: 5px !important;
  left: 50% !important;
  bottom: 23% !important;
  background: var(--text) !important;
  border-radius: 999px !important;
  transform-origin: left center !important;
  transform: rotate(var(--needle-rotation)) !important;
  transition: transform .5s cubic-bezier(.2,.9,.2,1) !important;
}

.meter-needle::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--active-color, #ef4444);
  box-shadow: 0 0 0 3px rgba(255,255,255,.55);
}

.meter-center {
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 86px !important;
  height: 86px !important;
}

.meter-center strong {
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

.meter-center small {
  display: block;
  margin-top: -5px;
  font-size: .68rem;
  font-weight: 900;
  color: var(--muted);
}

.meter-copy {
  margin-top: -4px !important;
}

@media (max-width: 720px) {
  .meter-gauge {
    min-height: 148px !important;
  }
  .meter-number {
    font-size: .62rem;
    min-width: 22px;
    height: 19px;
  }
  .meter-center {
    width: 74px !important;
    height: 74px !important;
  }
}

/* ════════════════════════════════════════
   FINAL USER-BASED GAUGES + REMADE GOAL DEADLINES
════════════════════════════════════════ */

/* Goals editor rebuilt into a cleaner full-width layout */
#dashGoalsEdit {
  padding-bottom: 150px !important;
}

#dashGoalsEdit .goals-edit-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  align-items: start !important;
}

#dashGoalsEdit > .goal-deadline-editor {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 16px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(200,149,90,.24) !important;
  background: linear-gradient(180deg, rgba(255,250,243,.96), rgba(255,255,255,.74)) !important;
  box-shadow: 0 14px 34px rgba(80,50,20,.06) !important;
}

body.dark #dashGoalsEdit > .goal-deadline-editor {
  background: linear-gradient(180deg, rgba(31,27,23,.96), rgba(16,15,14,.88)) !important;
  border-color: rgba(226,196,150,.16) !important;
}

.goal-deadline-editor-head {
  margin-bottom: 14px !important;
}

.goal-deadline-editor-title {
  font-size: .92rem !important;
  font-weight: 1000 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

.goal-deadline-editor-sub {
  font-size: .86rem !important;
  line-height: 1.45 !important;
  color: var(--muted) !important;
}

.goal-deadline-editor-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.goal-deadline-edit-row {
  display: grid !important;
  grid-template-columns: minmax(180px, .9fr) minmax(0, 2.2fr) !important;
  gap: 16px !important;
  align-items: center !important;
  width: 100% !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1.5px solid rgba(232,216,192,.82) !important;
  background: rgba(255,255,255,.66) !important;
  overflow: visible !important;
}

body.dark .goal-deadline-edit-row {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(226,196,150,.12) !important;
}

.goal-deadline-goal-name {
  font-size: .96rem !important;
  font-weight: 1000 !important;
  color: var(--text) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.goal-deadline-controls {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

.goal-deadline-selects {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(90px, .8fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(84px, .75fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

.goal-deadline-selects select,
.goal-deadline-clear {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  border-radius: 14px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
}

.goals-edit-actions {
  margin-top: 18px !important;
  padding-bottom: 24px !important;
}

@media (max-width: 900px) {
  #dashGoalsEdit .goals-edit-cols,
  .goal-deadline-edit-row {
    grid-template-columns: 1fr !important;
  }
  .goal-deadline-goal-name {
    white-space: normal !important;
  }
  .goal-deadline-selects {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  #dashGoalsEdit {
    padding-bottom: 120px !important;
  }
  .goal-deadline-selects {
    grid-template-columns: 1fr !important;
  }
}

/* Clean user-based gauges: no fixed 0-10 speedometer labels */
.meter-gauge-card {
  padding: 18px 16px 14px !important;
}

.meter-gauge {
  min-height: 128px !important;
  aspect-ratio: 1.8 !important;
  overflow: visible !important;
  place-items: end center !important;
  padding: 0 !important;
}

.meter-numbers,
.meter-number {
  display: none !important;
}

.meter-arc {
  width: 86% !important;
  aspect-ratio: 1 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: -43% !important;
  background: var(--arc-bg) !important;
  opacity: 1 !important;
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58% 73%, transparent 74%) !important;
          mask: radial-gradient(circle, transparent 0 57%, #000 58% 73%, transparent 74%) !important;
  filter: drop-shadow(0 0 6px var(--active-color, #f59e0b)) !important;
}

.meter-needle {
  width: 42% !important;
  height: 3.5px !important;
  left: 50% !important;
  bottom: 25% !important;
  transform-origin: left center !important;
  transform: rotate(var(--needle-rotation)) !important;
  background: linear-gradient(90deg, #6b4c2a 0%, #c09050 40%, #e8b860 100%) !important;
  border-radius: 999px 999px 999px 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
  transition: transform .6s cubic-bezier(.34,1.56,.64,1) !important;
  z-index: 3 !important;
}

.meter-center {
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  bottom: 0px !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  min-width: 80px !important;
  height: 80px !important;
  border-radius: 999px !important;
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(248,244,234,.90)) !important;
  border: 2px solid rgba(200,175,130,.35) !important;
  box-shadow: 0 6px 20px rgba(80,50,10,.14), 0 1px 0 rgba(255,255,255,.9) inset !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 1px !important;
}
body.dark .meter-center {
  background: linear-gradient(160deg, rgba(48,40,24,.92), rgba(32,26,12,.88)) !important;
  border-color: rgba(200,165,100,.22) !important;
}

.meter-center span {
  font-size: 1.2rem !important;
  line-height: 1 !important;
}

.meter-center strong {
  font-size: 1rem !important;
  line-height: 1.05 !important;
  text-align: center !important;
  max-width: 76px !important;
  overflow-wrap: anywhere !important;
}

.meter-center small {
  display: block !important;
  margin-top: 0 !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  color: var(--muted) !important;
}

.meter-copy {
  margin-top: 4px !important;
  align-items: center !important;
  text-align: center !important;
}

.meter-copy strong {
  font-size: .96rem !important;
}

.meter-copy span {
  font-size: .78rem !important;
}

@media (max-width: 720px) {
  .meter-gauge {
    min-height: 118px !important;
  }
  .meter-center {
    width: 70px !important;
    min-width: 70px !important;
    height: 70px !important;
  }
  .meter-center strong {
    font-size: .84rem !important;
  }
}

/* ════════════════════════════════════════
   FINAL PATCH: clean goals editor, centered gauges, shop themes
════════════════════════════════════════ */
.rm-goals-editor-shell {
  display: grid;
  gap: 18px;
  padding: 4px 0 110px;
}
.rm-goals-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.rm-goals-editor-head h3 {
  font-size: 1.35rem;
  font-weight: 1000;
  margin: 0 0 4px;
}
.rm-goals-editor-head p {
  color: var(--muted);
  font-weight: 800;
  font-size: .92rem;
}
.rm-goals-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 18px;
  align-items: start;
}
.rm-goals-panel {
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,250,243,.9), rgba(255,255,255,.68));
  box-shadow: 0 14px 34px rgba(80,50,20,.055);
  min-width: 0;
}
body.dark .rm-goals-panel {
  background: linear-gradient(180deg, rgba(28,24,21,.92), rgba(15,14,13,.84));
  border-color: rgba(226,196,150,.16);
}
.rm-panel-title {
  font-size: .95rem;
  font-weight: 1000;
  margin-bottom: 14px;
  color: var(--text);
}
.rm-goals-rows,
.rm-bad-rows {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.rm-goal-edit-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(360px, 1.55fr) 46px;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,.66);
  min-width: 0;
}
body.dark .rm-goal-edit-row,
body.dark .rm-bad-edit-row {
  background: rgba(255,255,255,.035);
  border-color: rgba(226,196,150,.12);
}
.rm-goal-edit-main,
.rm-goal-edit-date {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.rm-goal-edit-main label,
.rm-goal-edit-date label {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 1000;
}
.rm-goal-date-grid {
  display: grid;
  grid-template-columns: .82fr 1.12fr 1.12fr;
  gap: 8px;
  min-width: 0;
}
.rm-goal-date-grid select,
.rm-goal-text,
.rm-bad-text {
  height: 48px !important;
  min-width: 0 !important;
  border-radius: 15px !important;
  background: var(--input) !important;
}
.rm-goal-remove,
.rm-bad-remove {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.66);
  cursor: pointer;
  font-weight: 900;
}
body.dark .rm-goal-remove,
body.dark .rm-bad-remove {
  background: rgba(255,255,255,.045);
  color: var(--text);
  border-color: rgba(226,196,150,.14);
}
.rm-bad-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,.66);
}
.rm-goals-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0;
}
#dashGoalsEdit {
  overflow: visible !important;
}
#dashGoalsEdit .goals-edit-cols,
#dashGoalsEdit > .goal-deadline-editor {
  display: none !important;
}
@media (max-width: 980px) {
  .rm-goals-editor-grid,
  .rm-goal-edit-row {
    grid-template-columns: 1fr;
  }
  .rm-goal-remove {
    width: 100%;
  }
}
@media (max-width: 560px) {
  .rm-goal-date-grid {
    grid-template-columns: 1fr;
  }
  .rm-goals-panel { padding: 14px; }
}

/* Center and simplify user-based gauges */
.meter-gauge-grid {
  align-items: stretch !important;
}
.meter-gauge-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
  overflow: visible !important;
}
.meter-gauge {
  width: min(100%, 260px) !important;
  max-width: 260px !important;
  min-height: 128px !important;
  margin: 0 auto 4px !important;
  position: relative !important;
  display: grid !important;
  place-items: end center !important;
  aspect-ratio: 1.8 !important;
}
.meter-arc {
  width: 86% !important;
  max-width: 86% !important;
  aspect-ratio: 1 !important;
  left: 50% !important;
  bottom: -43% !important;
  transform: translateX(-50%) !important;
  background: var(--arc-bg) !important;
  filter: drop-shadow(0 0 6px var(--active-color, #f59e0b)) !important;
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58% 73%, transparent 74%) !important;
          mask: radial-gradient(circle, transparent 0 57%, #000 58% 73%, transparent 74%) !important;
}
.meter-numbers,
.meter-number { display: none !important; }
.meter-needle {
  left: 50% !important;
  bottom: 25% !important;
  width: 42% !important;
  height: 3.5px !important;
  transform-origin: left center !important;
  transform: rotate(var(--needle-rotation)) !important;
  background: linear-gradient(90deg, #6b4c2a 0%, #c09050 40%, #e8b860 100%) !important;
  border-radius: 999px 999px 999px 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28) !important;
  z-index: 3 !important;
}
.meter-center {
  left: 50% !important;
  bottom: 0px !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 999px !important;
}
.meter-center strong {
  font-size: 1rem !important;
  line-height: 1 !important;
  text-align: center !important;
}
.meter-copy {
  width: 100% !important;
  margin-top: 6px !important;
  align-self: end !important;
}
.gauge-cyberpunk .meter-gauge-card {
  border-color: rgba(34,211,238,.42) !important;
  box-shadow: 0 0 28px rgba(34,211,238,.14), inset 0 0 0 1px rgba(236,72,153,.14) !important;
  background: linear-gradient(160deg, rgba(16,24,39,.95), rgba(35,14,45,.78)) !important;
  color: #ecfeff !important;
}
.gauge-cyberpunk .meter-gauge-card::before { background: #22d3ee !important; }
.gauge-cyberpunk .meter-arc { filter: drop-shadow(0 0 10px var(--active-color)) !important; }
.gauge-cyberpunk .meter-center {
  background: linear-gradient(160deg, rgba(10,20,35,.90), rgba(35,14,45,.85)) !important;
  border-color: rgba(34,211,238,.40) !important;
}
.gauge-digital .meter-gauge-card {
  border-radius: 18px !important;
  background: linear-gradient(160deg, rgba(15,23,42,.96), rgba(2,6,23,.92)) !important;
  color: #d1fae5 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}
.gauge-digital .meter-gauge-card::before { background: #10b981 !important; }
.gauge-digital .meter-center { border-radius: 18px !important; background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.35) !important; }
.gauge-oldcar .meter-gauge-card {
  background: linear-gradient(160deg, #f5e6cc, #e0c38a) !important;
  border-color: #9a6539 !important;
  box-shadow: inset 0 0 28px rgba(80,45,15,.15), 0 4px 18px rgba(80,45,10,.18) !important;
}
.gauge-oldcar .meter-gauge-card::before { background: #9a6539 !important; }
.gauge-oldcar .meter-arc { filter: sepia(.35) !important; }
.gauge-oldcar .meter-needle { background: linear-gradient(90deg, #5c3010, #a06020 40%, #c07820 100%) !important; }
.gauge-oldcar .meter-center { background: linear-gradient(160deg, #fffdf4, #fff0d0) !important; border-color: #9a6539 !important; box-shadow: inset 0 2px 8px rgba(154,101,57,.12) !important; }

/* Website themes bought from shop */
body.theme-navy {
  --bg: #07111f;
  --text: #e5f0ff;
  --muted: #9cb3d0;
  --panel: rgba(13, 25, 43, .94);
  --panel-soft: #101d31;
  --border: rgba(118, 156, 205, .24);
  --input: rgba(8, 18, 32, .92);
  --accent: #3b82f6;
  --accent-2: #60a5fa;
  --shadow: 0 20px 58px rgba(0,0,0,.42);
}
body.theme-pink {
  --bg: #fff1f7;
  --text: #351827;
  --muted: #94687b;
  --panel: rgba(255,255,255,.94);
  --panel-soft: #fff7fb;
  --border: #f3bfd6;
  --input: #fff;
  --accent: #ec7aa9;
  --accent-2: #f9a8c9;
  --shadow: 0 20px 58px rgba(190,80,125,.15);
}
body.theme-glass {
  --bg: #dceeff;
  --text: #0f1f35;
  --muted: #4a6480;
  --panel: rgba(255,255,255,.58);
  --panel-soft: rgba(255,255,255,.38);
  --border: rgba(255,255,255,.75);
  --input: rgba(255,255,255,.72);
  --accent: #3b82f6;
  --accent-2: #93c5fd;
  --accent-text: #ffffff;
  --shadow: 0 20px 60px rgba(60,100,180,.18);
  background:
    radial-gradient(ellipse at 18% 14%, rgba(147,197,253,.55) 0%, transparent 42%),
    radial-gradient(ellipse at 82% 78%, rgba(196,181,253,.45) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(224,242,254,.80) 0%, transparent 70%),
    linear-gradient(145deg, #cce4ff 0%, #dceeff 40%, #ede9fe 100%) !important;
}
body.theme-glass .bg-orb.orb-1 { background: rgba(96,165,250,.30) !important; }
body.theme-glass .bg-orb.orb-2 { background: rgba(167,139,250,.22) !important; }
body.theme-glass .card,
body.theme-glass .mini-card,
body.theme-glass .goals-card,
body.theme-glass .shop-item,
body.theme-glass .mobile-bottom-nav {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(28px) saturate(1.5) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(1.04) !important;
  border: 1.5px solid rgba(255,255,255,.70) !important;
  box-shadow: 0 8px 32px rgba(60,100,200,.10), 0 1.5px 0 rgba(255,255,255,.90) inset !important;
}
body.theme-glass .card:hover {
  background: rgba(255,255,255,.65) !important;
}
body.theme-glass input,
body.theme-glass select,
body.theme-glass textarea {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(180,210,250,.55) !important;
  color: var(--text) !important;
}
body.theme-glass .btn-primary {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(99,102,241,.35) !important;
}
body.theme-glass .mobile-bottom-nav {
  background: rgba(255,255,255,.68) !important;
  border-top: 1.5px solid rgba(255,255,255,.75) !important;
}
body.theme-navy input,
body.theme-navy select,
body.theme-navy textarea {
  color: var(--text) !important;
}

/* ════════════════════════════════════════
   PATCH: polished themes, settings picker, clean goals planner
════════════════════════════════════════ */
.theme-selector-box {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.32));
}
body.dark .theme-selector-box { background: rgba(255,255,255,.04); }
.theme-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-selector-box select { height: 46px; font-weight: 900; }
.theme-selector-note { margin-top: 10px; line-height: 1.35; }

/* Navy theme polish */
body.theme-navy {
  --bg: #071326;
  --text: #eef6ff;
  --muted: #9bb3cf;
  --panel: rgba(11, 25, 46, .92);
  --panel-soft: rgba(17, 38, 68, .9);
  --border: rgba(134, 176, 228, .28);
  --input: rgba(6, 18, 35, .92);
  --accent: #4f9cff;
  --accent-2: #93c5fd;
  --accent-text: #ffffff;
  --shadow: 0 24px 70px rgba(0, 7, 20, .48);
  background:
    radial-gradient(circle at 12% 8%, rgba(74,144,255,.22), transparent 34%),
    radial-gradient(circle at 84% 74%, rgba(45,212,191,.14), transparent 36%),
    linear-gradient(145deg, #050b17 0%, #071326 45%, #0b1f38 100%) !important;
}
body.theme-navy .bg-orb.orb-1 { background: rgba(79,156,255,.18) !important; }
body.theme-navy .bg-orb.orb-2 { background: rgba(45,212,191,.12) !important; }
body.theme-navy .card,
body.theme-navy .mini-card,
body.theme-navy .goals-card,
body.theme-navy .settings-drawer,
body.theme-navy .dialog,
body.theme-navy .shop-item,
body.theme-navy .stats-dashboard-card,
body.theme-navy .car-progress-card,
body.theme-navy .monthly-calendar-card,
body.theme-navy .habit-consistency-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(79,156,255,.13), transparent 38%),
    linear-gradient(180deg, rgba(14,31,56,.96), rgba(8,18,34,.94)) !important;
  border-color: rgba(147,197,253,.28) !important;
  color: var(--text) !important;
  box-shadow: 0 24px 70px rgba(0, 7, 20, .46) !important;
}
body.theme-navy .mobile-bottom-nav,
body.theme-navy .coffee-banner,
body.theme-navy .support-banner,
body.theme-navy .dashboard-brand {
  background: rgba(9, 23, 43, .86) !important;
  border-color: rgba(147,197,253,.32) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(18px) saturate(1.2);
}
body.theme-navy .btn-primary,
body.theme-navy .tab.active,
body.theme-navy .mobile-nav-item.active,
body.theme-navy .goals-edit-btn,
body.theme-navy .brand-pill {
  background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
  color: white !important;
  border-color: rgba(147,197,253,.44) !important;
  box-shadow: 0 14px 34px rgba(37,99,235,.28) !important;
}
body.theme-navy .btn-outline,
body.theme-navy input,
body.theme-navy select,
body.theme-navy textarea,
body.theme-navy .tag-input-wrap {
  background: rgba(7, 20, 38, .82) !important;
  color: var(--text) !important;
  border-color: rgba(147,197,253,.3) !important;
}
body.theme-navy input::placeholder,
body.theme-navy textarea::placeholder { color: rgba(220,235,255,.58) !important; }
body.theme-navy .muted,
body.theme-navy .mini-title,
body.theme-navy .settings-note,
body.theme-navy .shop-item-desc,
body.theme-navy .shop-item-status { color: var(--muted) !important; }
body.theme-navy .meter-arc { filter: drop-shadow(0 0 12px rgba(56,189,248,.28)); }
body.theme-navy .meter-center { background: rgba(7, 20, 38, .94) !important; border-color: rgba(147,197,253,.32) !important; }

/* Clean rebuilt goals planner */
#dashGoalsEdit { padding: 0 28px 118px !important; overflow: visible !important; }
#dashGoalsEdit .rm3-goals-editor { display: grid; gap: 22px; }
#dashGoalsEdit .rm3-goals-hero {
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(200,149,90,.12), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.48));
}
body.dark #dashGoalsEdit .rm3-goals-hero,
body.theme-navy #dashGoalsEdit .rm3-goals-hero { background: rgba(255,255,255,.045); }
#dashGoalsEdit .rm3-goals-hero h3 { margin: 4px 0 6px; font-size: clamp(1.7rem, 2.2vw, 2.35rem); letter-spacing: -.04em; }
#dashGoalsEdit .rm3-goals-hero p { max-width: 720px; color: var(--muted); font-weight: 800; line-height: 1.45; }
#dashGoalsEdit .rm3-goals-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 18px; align-items: start; }
#dashGoalsEdit .rm3-panel {
  min-width: 0;
  border: 1.5px solid var(--border);
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,252,247,.95), rgba(255,255,255,.72));
  box-shadow: 0 18px 42px rgba(80,50,20,.06);
}
body.dark #dashGoalsEdit .rm3-panel { background: rgba(255,255,255,.045); }
#dashGoalsEdit .rm3-panel-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
#dashGoalsEdit .rm3-panel-title span { font-weight:1000; font-size:1.1rem; }
#dashGoalsEdit .rm3-panel-title small { color:var(--muted); font-weight:900; }
#dashGoalsEdit .rm3-list { display:grid; gap:14px; }
#dashGoalsEdit .rm3-goal-row {
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:24px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.64);
}
body.dark #dashGoalsEdit .rm3-goal-row,
body.theme-navy #dashGoalsEdit .rm3-goal-row { background: rgba(255,255,255,.035); }
#dashGoalsEdit .rm3-row-head { display:grid; grid-template-columns:42px minmax(0,1fr) 48px; gap:12px; align-items:center; }
#dashGoalsEdit .rm3-number { width:42px; height:42px; display:grid; place-items:center; border-radius:16px; background:rgba(200,149,90,.14); color:var(--accent); font-weight:1000; border:1px solid rgba(200,149,90,.22); }
#dashGoalsEdit .rm3-goal-input,
#dashGoalsEdit .rm3-bad-input { height:52px; border-radius:18px; font-weight:900; }
#dashGoalsEdit .rm3-remove { height:48px; min-width:48px; border-radius:16px; border:1px solid rgba(239,68,68,.22); background:rgba(239,68,68,.07); color:#dc2626; cursor:pointer; font-weight:1000; }
#dashGoalsEdit .rm3-date-box { display:grid; grid-template-columns: minmax(160px,.62fr) minmax(0,1.38fr); align-items:end; gap:14px; padding:14px; border-radius:20px; background:rgba(200,149,90,.055); border:1px dashed rgba(200,149,90,.26); }
#dashGoalsEdit .rm3-date-box strong { display:block; font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; }
#dashGoalsEdit .rm3-date-box small { display:block; color:var(--muted); margin-top:3px; font-weight:800; line-height:1.25; }
#dashGoalsEdit .rm3-date-grid { display:grid; grid-template-columns: minmax(90px,.8fr) minmax(120px,1fr) minmax(112px,1fr); gap:10px; }
#dashGoalsEdit .rm3-date-select { height:48px; min-width:0; border-radius:16px; font-weight:900; }
#dashGoalsEdit .rm3-bad-row { display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:12px; align-items:center; padding:14px; border:1px solid var(--border); border-radius:22px; background:rgba(255,255,255,.6); }
body.dark #dashGoalsEdit .rm3-bad-row,
body.theme-navy #dashGoalsEdit .rm3-bad-row { background: rgba(255,255,255,.035); }
#dashGoalsEdit .rm3-add { height:50px; border-style:dashed; width:100%; margin-top:16px; border-radius:18px; font-weight:1000; }
#dashGoalsEdit .rm3-actions {
  position: sticky;
  bottom: 106px;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding: 14px 0 0;
  background: linear-gradient(180deg, transparent, var(--panel) 54%);
  z-index: 10;
}
#dashGoalsEdit .rm3-actions .btn { min-width:130px; height:54px; border-radius:18px; }

/* Center and clean stats gauges */
.meter-gauge-card { text-align: center !important; }
.meter-gauge-card .meter-gauge { margin-left: auto !important; margin-right: auto !important; }
.meter-gauge-card .meter-copy { align-items: center !important; text-align: center !important; }
.meter-gauge-grid { align-items: stretch !important; }

@media (max-width: 980px) {
  #dashGoalsEdit .rm3-goals-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .theme-select-grid { grid-template-columns: 1fr; }
  #dashGoalsEdit { padding: 0 20px 104px !important; }
  #dashGoalsEdit .rm3-goals-hero,
  #dashGoalsEdit .rm3-panel { padding: 16px; border-radius: 24px; }
  #dashGoalsEdit .rm3-row-head,
  #dashGoalsEdit .rm3-bad-row { grid-template-columns: 1fr; }
  #dashGoalsEdit .rm3-number { display:none; }
  #dashGoalsEdit .rm3-remove { width:100%; }
  #dashGoalsEdit .rm3-date-box { grid-template-columns: 1fr; }
  #dashGoalsEdit .rm3-date-grid { grid-template-columns: 1fr; }
  #dashGoalsEdit .rm3-actions { bottom: 88px; }
  #dashGoalsEdit .rm3-actions .btn { flex: 1; min-width: 0; }
}

/* ════════════════════════════════════════
   FINAL GOAL DEADLINE INPUT FIX
   Replaces fragile dropdown behavior with reliable number boxes.
════════════════════════════════════════ */
#dashGoalsEdit .rm3-date-grid {
  display: grid !important;
  grid-template-columns: minmax(86px, .75fr) minmax(96px, .85fr) minmax(116px, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
}
#dashGoalsEdit .rm3-date-input,
#dashGoalsEdit .rm-goal-day,
#dashGoalsEdit .rm-goal-month,
#dashGoalsEdit .rm-goal-year {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  border-radius: 16px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--input) !important;
  color: var(--text) !important;
  padding: 0 14px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}
#dashGoalsEdit .rm3-date-input::placeholder {
  color: var(--muted) !important;
  opacity: .78 !important;
}
#dashGoalsEdit .rm3-date-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(200,149,90,.14) !important;
  outline: none !important;
}
#dashGoalsEdit .rm3-date-box {
  grid-template-columns: minmax(140px, .55fr) minmax(0, 1.45fr) !important;
  overflow: visible !important;
}
@media (max-width: 760px) {
  #dashGoalsEdit .rm3-date-box,
  #dashGoalsEdit .rm3-date-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════
   FINAL THEME POLISH PATCH
   Stronger Pink & White theme + premium Navy theme.
════════════════════════════════════════ */

body.theme-pink {
  --bg: #ffd9eb !important;
  --text: #34101f !important;
  --muted: #92516e !important;
  --panel: rgba(255, 250, 253, .90) !important;
  --panel-soft: #ffeaf4 !important;
  --border: rgba(232, 118, 165, .34) !important;
  --input: rgba(255, 255, 255, .92) !important;
  --accent: #e85597 !important;
  --accent-2: #ff9ac8 !important;
  --accent-text: #ffffff !important;
  --shadow: 0 24px 70px rgba(224, 79, 139, .20) !important;
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 107, 170, .34), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(255, 194, 219, .72), transparent 34%),
    radial-gradient(circle at 52% 98%, rgba(255, 118, 178, .24), transparent 36%),
    linear-gradient(145deg, #ffe1ef 0%, #fff7fb 42%, #ffd0e5 100%) !important;
}
body.theme-pink .bg-orb.orb-1 { background: rgba(255, 90, 164, .28) !important; }
body.theme-pink .bg-orb.orb-2 { background: rgba(255, 183, 214, .42) !important; }
body.theme-pink .card,
body.theme-pink .mini-card,
body.theme-pink .hero-card,
body.theme-pink .schedule-card,
body.theme-pink .goals-card,
body.theme-pink .left-col > .card,
body.theme-pink .right-col > .card,
body.theme-pink .settings-drawer,
body.theme-pink .dialog,
body.theme-pink .shop-item,
body.theme-pink .stats-dashboard-card,
body.theme-pink .car-progress-card,
body.theme-pink .monthly-calendar-card,
body.theme-pink .habit-consistency-card,
body.theme-pink #dashGoalsEdit .rm3-panel,
body.theme-pink #dashGoalsEdit .rm3-goals-hero,
body.theme-pink #dashGoalsEdit .rm4-panel,
body.theme-pink #dashGoalsEdit .rm4-hero,
body.theme-pink .water-clean-card,
body.theme-pink .water-main-card,
body.theme-pink .pomodoro-card,
body.theme-pink .focus-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 118, 178, .18), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,245,250,.84)) !important;
  border-color: rgba(232, 118, 165, .34) !important;
  color: var(--text) !important;
  box-shadow: 0 22px 60px rgba(224, 79, 139, .16) !important;
}
body.theme-pink .dashboard-brand,
body.theme-pink .coffee-banner,
body.theme-pink .support-banner,
body.theme-pink .mobile-bottom-nav,
body.theme-pink .tabs {
  background: rgba(255, 246, 251, .90) !important;
  border-color: rgba(232, 118, 165, .36) !important;
  box-shadow: 0 16px 44px rgba(224, 79, 139, .14) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
body.theme-pink .btn-primary,
body.theme-pink .tab.active,
body.theme-pink .mobile-nav-item.active,
body.theme-pink .mobile-nav-btn.active,
body.theme-pink .goals-edit-btn,
body.theme-pink .brand-pill,
body.theme-pink .shop-buy-btn,
body.theme-pink .coffee-banner .btn,
body.theme-pink .support-banner .btn {
  background: linear-gradient(135deg, #e85597, #ff8fbd) !important;
  border-color: rgba(255, 145, 192, .58) !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(232, 85, 151, .25) !important;
}
body.theme-pink .btn-outline,
body.theme-pink input,
body.theme-pink select,
body.theme-pink textarea,
body.theme-pink .tag-input-wrap,
body.theme-pink .theme-selector-box,
body.theme-pink #dashGoalsEdit .rm3-goal-row,
body.theme-pink #dashGoalsEdit .rm3-bad-row,
body.theme-pink #dashGoalsEdit .rm3-date-box,
body.theme-pink #dashGoalsEdit .rm4-row,
body.theme-pink #dashGoalsEdit .rm4-bad-row,
body.theme-pink #dashGoalsEdit .rm4-deadline {
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(232, 118, 165, .34) !important;
  color: var(--text) !important;
}
body.theme-pink input::placeholder,
body.theme-pink textarea::placeholder { color: rgba(146, 81, 110, .72) !important; }
body.theme-pink .muted,
body.theme-pink .mini-title,
body.theme-pink .settings-note,
body.theme-pink .shop-item-desc,
body.theme-pink .shop-item-status,
body.theme-pink .hero-subtitle,
body.theme-pink .goal-empty-state,
body.theme-pink .dash-goal-empty { color: var(--muted) !important; }
body.theme-pink .meter-arc { filter: drop-shadow(0 0 12px rgba(232, 85, 151, .16)); }
body.theme-pink .meter-center { background: rgba(255,250,253,.96) !important; border-color: rgba(232,118,165,.34) !important; }

body.theme-navy {
  --bg: #07111f !important;
  --text: #f4f8ff !important;
  --muted: #a9bdd7 !important;
  --panel: rgba(9, 22, 39, .88) !important;
  --panel-soft: rgba(17, 36, 62, .82) !important;
  --border: rgba(116, 173, 232, .24) !important;
  --input: rgba(5, 16, 31, .88) !important;
  --accent: #46b7ff !important;
  --accent-2: #7dd3fc !important;
  --accent-text: #03111f !important;
  --shadow: 0 28px 80px rgba(0, 5, 15, .55) !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(37, 99, 235, .30), transparent 36%),
    radial-gradient(circle at 86% 18%, rgba(14, 165, 233, .18), transparent 36%),
    radial-gradient(circle at 54% 96%, rgba(20, 184, 166, .14), transparent 38%),
    linear-gradient(145deg, #030711 0%, #071426 45%, #0b2743 100%) !important;
}
body.theme-navy .bg-orb.orb-1 { background: rgba(37, 99, 235, .24) !important; }
body.theme-navy .bg-orb.orb-2 { background: rgba(14, 165, 233, .16) !important; }
body.theme-navy .card,
body.theme-navy .mini-card,
body.theme-navy .hero-card,
body.theme-navy .schedule-card,
body.theme-navy .goals-card,
body.theme-navy .left-col > .card,
body.theme-navy .right-col > .card,
body.theme-navy .settings-drawer,
body.theme-navy .dialog,
body.theme-navy .shop-item,
body.theme-navy .stats-dashboard-card,
body.theme-navy .car-progress-card,
body.theme-navy .monthly-calendar-card,
body.theme-navy .habit-consistency-card,
body.theme-navy #dashGoalsEdit .rm3-panel,
body.theme-navy #dashGoalsEdit .rm3-goals-hero,
body.theme-navy #dashGoalsEdit .rm4-panel,
body.theme-navy #dashGoalsEdit .rm4-hero,
body.theme-navy .water-clean-card,
body.theme-navy .water-main-card,
body.theme-navy .pomodoro-card,
body.theme-navy .focus-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(70, 183, 255, .12), transparent 38%),
    linear-gradient(180deg, rgba(12, 29, 52, .94), rgba(6, 17, 33, .92)) !important;
  border-color: rgba(125, 211, 252, .24) !important;
  color: var(--text) !important;
  box-shadow: 0 26px 78px rgba(0, 5, 15, .50), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
body.theme-navy .dashboard-brand,
body.theme-navy .coffee-banner,
body.theme-navy .support-banner,
body.theme-navy .mobile-bottom-nav,
body.theme-navy .tabs {
  background: rgba(5, 17, 32, .82) !important;
  border-color: rgba(125, 211, 252, .27) !important;
  box-shadow: 0 18px 56px rgba(0, 5, 15, .48), inset 0 1px 0 rgba(255,255,255,.05) !important;
  color: var(--text) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
body.theme-navy .btn-primary,
body.theme-navy .tab.active,
body.theme-navy .mobile-nav-item.active,
body.theme-navy .mobile-nav-btn.active,
body.theme-navy .goals-edit-btn,
body.theme-navy .brand-pill,
body.theme-navy .shop-buy-btn,
body.theme-navy .coffee-banner .btn,
body.theme-navy .support-banner .btn {
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  border-color: rgba(125, 211, 252, .42) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 44px rgba(37, 99, 235, .32), 0 0 26px rgba(56, 189, 248, .12) !important;
}
body.theme-navy .btn-outline,
body.theme-navy input,
body.theme-navy select,
body.theme-navy textarea,
body.theme-navy .tag-input-wrap,
body.theme-navy .theme-selector-box,
body.theme-navy #dashGoalsEdit .rm3-goal-row,
body.theme-navy #dashGoalsEdit .rm3-bad-row,
body.theme-navy #dashGoalsEdit .rm3-date-box,
body.theme-navy #dashGoalsEdit .rm4-row,
body.theme-navy #dashGoalsEdit .rm4-bad-row,
body.theme-navy #dashGoalsEdit .rm4-deadline {
  background: rgba(5, 16, 31, .72) !important;
  color: var(--text) !important;
  border-color: rgba(125, 211, 252, .24) !important;
}
body.theme-navy input:focus,
body.theme-navy select:focus,
body.theme-navy textarea:focus {
  border-color: rgba(56, 189, 248, .74) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .13) !important;
}
body.theme-navy input::placeholder,
body.theme-navy textarea::placeholder { color: rgba(201, 221, 246, .58) !important; }
body.theme-navy h1,
body.theme-navy h2,
body.theme-navy h3,
body.theme-navy strong,
body.theme-navy .section-title,
body.theme-navy .hero-name-row h2,
body.theme-navy .big-metric,
body.theme-navy .shop-item-name,
body.theme-navy .task-title,
body.theme-navy .task-title-main,
body.theme-navy .goal-title,
body.theme-navy label { color: var(--text) !important; }
body.theme-navy .muted,
body.theme-navy .mini-title,
body.theme-navy .settings-note,
body.theme-navy .shop-item-desc,
body.theme-navy .shop-item-status,
body.theme-navy .hero-subtitle,
body.theme-navy .goal-empty-state,
body.theme-navy .dash-goal-empty { color: var(--muted) !important; }
body.theme-navy .meter-arc { filter: drop-shadow(0 0 16px rgba(56, 189, 248, .24)); }
body.theme-navy .meter-center { background: rgba(5, 16, 31, .94) !important; border-color: rgba(125, 211, 252, .25) !important; color: var(--text) !important; }
body.theme-navy .goal-deadline-badge,
body.theme-navy .pill,
body.theme-navy .shop-owned-badge { border-color: rgba(125, 211, 252, .22) !important; }

@media (max-width: 720px) {
  body.theme-pink,
  body.theme-navy {
    background-attachment: fixed !important;
  }
}


.car-milestones {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
.car-visual-wrap {
  min-height: 176px !important;
}
.car-road-line {
  bottom: 35px !important;
}
.car-visual-css {
  width: min(620px, 94%) !important;
  height: 142px !important;
  transform: translateY(0) !important;
}
.car-visual-wrap.car-running .car-visual-css {
  animation: carCruiseFixed 1.05s ease-in-out infinite alternate !important;
}
@keyframes carCruiseFixed {
  from { transform: translateX(-10px); }
  to { transform: translateX(12px); }
}
.car-chassis {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: min(360px, 76%);
  height: 76px;
  transform: translateX(-50%);
  border-radius: 34px 44px 24px 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.45), transparent 35%),
    linear-gradient(180deg, #d89a4f, #b87535);
  border: 3px solid rgba(75, 45, 20, .22);
  box-shadow: 0 18px 36px rgba(80,45,15,.20), inset 0 -12px 0 rgba(80,45,20,.13);
  opacity: 1;
  filter: none;
  z-index: 3;
}
.car-chassis::before {
  content: "";
  position: absolute;
  left: 60px;
  top: -36px;
  width: 155px;
  height: 62px;
  border-radius: 56px 60px 12px 14px;
  background: linear-gradient(180deg, #eab978, #ce8744);
  border: 3px solid rgba(75,45,20,.18);
  border-bottom: 0;
}
.car-chassis::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 24px;
  width: 38px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,246,210,.72);
  box-shadow: -280px 3px 0 rgba(255,90,70,.52);
}
.car-window {
  position: absolute;
  top: -25px;
  z-index: 4;
  height: 32px;
  background: linear-gradient(135deg, rgba(224,244,255,.95), rgba(93,173,226,.78));
  border: 2px solid rgba(255,255,255,.62);
  box-shadow: inset 0 0 14px rgba(255,255,255,.48);
}
.car-window-one { left: 88px; width: 50px; border-radius: 24px 6px 6px 8px; }
.car-window-two { left: 145px; width: 58px; border-radius: 6px 24px 8px 6px; }
.car-cabin,
.car-hood,
.car-engine,
.car-body,
.car-tire {
  display: none !important;
}
.car-wheel-slot {
  position: absolute;
  bottom: 18px;
  width: 48px;
  height: 48px;
  z-index: 5;
  border-radius: 999px;
  background: rgba(40,34,28,.08);
  border: 2px dashed rgba(95,70,45,.20);
  display: grid;
  place-items: center;
}
.car-wheel-slot:empty::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(60,55,48,.10);
}
.car-wheel-slot.wheel-one { left: calc(50% - 172px); }
.car-wheel-slot.wheel-two { left: calc(50% - 96px); }
.car-wheel-slot.wheel-three { left: calc(50% + 48px); }
.car-wheel-slot.wheel-four { left: calc(50% + 124px); }
.car-wheel {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #f8fafc 0 13%, #323232 14% 24%, transparent 25%),
    repeating-conic-gradient(from 0deg, #111827 0 16deg, #4b5563 16deg 34deg),
    #111827;
  border: 4px solid #262626;
  box-shadow: 0 8px 14px rgba(0,0,0,.20);
}
.car-wheel.unlocked {
  animation: wheelRollTest 1.4s linear infinite;
}
.car-visual-wrap:not(.car-running) .car-wheel.unlocked {
  animation-duration: 4s;
}
@keyframes wheelRollTest { to { transform: rotate(360deg); } }
.car-motion {
  right: 1% !important;
  top: 58px !important;
  font-size: 2.35rem !important;
  z-index: 1;
}
.car-motion.unlocked {
  animation: smokeTrailFixed .75s ease-in-out infinite alternate !important;
}
@keyframes smokeTrailFixed {
  from { opacity: .35; transform: translateX(0) scale(.9); }
  to { opacity: 1; transform: translateX(22px) scale(1.08); }
}
body.theme-navy .car-chassis {
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 35%),
    linear-gradient(180deg, #38bdf8, #1d4ed8);
  box-shadow: 0 18px 40px rgba(56,189,248,.18), inset 0 -12px 0 rgba(15,23,42,.18);
}
body.theme-pink .car-chassis {
  background:
    linear-gradient(135deg, rgba(255,255,255,.38), transparent 35%),
    linear-gradient(180deg, #fb7185, #ec4899);
}
body.theme-glass .car-chassis {
  background:
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(180,220,255,.30)),
    linear-gradient(180deg, rgba(145,200,255,.62), rgba(255,255,255,.28));
  backdrop-filter: blur(16px);
}
@media (max-width: 720px) {
  .car-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .car-visual-wrap { min-height: 148px !important; }
  .car-visual-css { width: 100% !important; height: 122px !important; }
  .car-chassis { width: 250px; height: 58px; bottom: 31px; }
  .car-chassis::before { left: 42px; top: -29px; width: 116px; height: 48px; }
  .car-window { top: -20px; height: 24px; }
  .car-window-one { left: 61px; width: 38px; }
  .car-window-two { left: 105px; width: 44px; }
  .car-wheel-slot { width: 38px; height: 38px; bottom: 18px; }
  .car-wheel { width: 34px; height: 34px; border-width: 3px; }
  .car-wheel-slot.wheel-one { left: calc(50% - 121px); }
  .car-wheel-slot.wheel-two { left: calc(50% - 66px); }
  .car-wheel-slot.wheel-three { left: calc(50% + 31px); }
  .car-wheel-slot.wheel-four { left: calc(50% + 86px); }
}

/* === S-Class inspired habit build car (custom vector, no image asset) === */
.sclass-wrap {
  min-height: 230px !important;
  padding: 18px 12px 8px;
  isolation: isolate;
}
.sclass-wrap .car-road-line {
  bottom: 31px !important;
  height: 5px;
  background: repeating-linear-gradient(90deg, rgba(120,90,62,.30) 0 32px, transparent 32px 56px);
  opacity: .65;
}
.sclass-car-svg {
  position: relative;
  z-index: 2;
  width: min(780px, 96%);
  height: auto;
  max-height: 230px;
  overflow: visible;
  display: block;
  margin: 0 auto;
  transform-origin: 50% 82%;
}
.sclass-car-svg.is-running {
  animation: sclassCruise 1.2s ease-in-out infinite alternate;
}
.sclass-car-svg.is-running .sclass-wheel-group.unlocked {
  animation: sclassWheelRoll .72s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes sclassCruise {
  from { transform: translateX(-6px) translateY(0px)  rotate(-0.3deg); }
  to   { transform: translateX( 9px) translateY(-3px) rotate( 0.3deg); }
}
@keyframes sclassWheelRoll { to { transform: rotate(360deg); } }

.sclass-ground-shadow {
  fill: rgba(10,14,22,.22);
  filter: blur(2px);
}
.sclass-road-dashes line {
  stroke: rgba(148,163,184,.38);
  stroke-width: 4;
  stroke-dasharray: 40 26;
  stroke-linecap: round;
}
/* Body parts */
.sclass-body { transition: opacity .4s ease, filter .4s ease; }
.sclass-body.locked { filter: grayscale(1) brightness(.92); }

.sclass-main-body, .sclass-lower-body, .sclass-flank-lower {
  fill: url(#sClassBodyGrad);
  stroke: rgba(45,52,62,.38);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.sclass-hood {
  fill: url(#sClassBodyGrad);
  stroke: rgba(45,52,62,.32);
  stroke-width: 1.8;
}
.sclass-front-bumper {
  fill: url(#sClassBodyGrad);
  stroke: rgba(50,58,68,.35);
  stroke-width: 1.6;
}
.sclass-front-bumper-lower {
  fill: #cdd4da;
  stroke: rgba(50,58,68,.30);
  stroke-width: 1.4;
}
.sclass-lower-body {
  fill: #d4dce4;
}
.sclass-flank-lower {
  fill: url(#sClassBodyGrad);
}
/* Cabin roof */
.sclass-cabin-shell {
  fill: url(#sClassRoofGrad);
  stroke: rgba(40,46,56,.42);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
/* Windows */
.sclass-window {
  fill: url(#sClassGlassGrad);
  stroke: rgba(200,220,235,.55);
  stroke-width: 1.5;
}
.sclass-glass-sheen {
  fill: none;
  stroke: rgba(255,255,255,.40);
  stroke-width: 1.8;
  stroke-linecap: round;
}
/* Pillars */
.sclass-b-pillar {
  fill: #1c2228;
  stroke: rgba(0,0,0,.5);
  stroke-width: 0.8;
}
.sclass-c-pillar {
  fill: none;
  stroke: rgba(30,38,48,.55);
  stroke-width: 3;
  stroke-linecap: round;
}
/* Character / crease lines */
.sclass-char-line {
  fill: none;
  stroke: rgba(255,255,255,.52);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.sclass-sill-chrome {
  fill: none;
  stroke: rgba(220,228,238,.78);
  stroke-width: 2.8;
  stroke-linecap: round;
}
/* Door lines */
.sclass-door-split {
  fill: none;
  stroke: rgba(38,44,54,.38);
  stroke-width: 1.6;
  stroke-linecap: round;
}
/* Door handles (flush) */
.sclass-door-handle {
  fill: rgba(200,210,220,.90);
  stroke: rgba(60,70,82,.30);
  stroke-width: 1;
}
/* Headlights — slim W223 DRL */
.sclass-hl-housing {
  fill: rgba(220,230,240,.60);
  stroke: rgba(180,195,210,.50);
  stroke-width: 1.2;
}
.sclass-hl-drl-outer {
  fill: none;
  stroke: #fffbe0;
  stroke-width: 2.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px #ffe97a);
}
.sclass-hl-drl-inner {
  fill: none;
  stroke: rgba(255,240,180,.65);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.sclass-hl-glow {
  fill: url(#sClassHLGlow);
  opacity: .35;
}
/* Taillights — L-shaped W223 */
.sclass-taillight-housing {
  fill: rgba(160,32,32,.20);
  stroke: rgba(200,50,50,.35);
  stroke-width: 1.2;
}
.sclass-tl-bar-h, .sclass-tl-bar-v {
  fill: none;
  stroke: #dc2626;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px #ef4444);
}
.sclass-tl-inner {
  fill: rgba(185,28,28,.65);
  stroke: rgba(255,255,255,.15);
  stroke-width: 1;
}
/* Grille area */
.sclass-grille-area {
  fill: #1a1f26;
  stroke: rgba(80,90,100,.40);
  stroke-width: 1;
}
.sclass-grille-slat {
  stroke: rgba(100,115,128,.60);
  stroke-width: 1.2;
  stroke-linecap: round;
}
/* Hood badge */
.sclass-hood-badge-bg {
  fill: rgba(255,255,255,.90);
  stroke: rgba(180,192,204,.60);
  stroke-width: 1;
}
.sclass-hood-badge-star {
  fill: #2c333c;
  stroke: rgba(255,255,255,.30);
  stroke-width: .4;
}
/* Plate recess */
.sclass-plate-recess {
  fill: rgba(255,255,255,.75);
  stroke: rgba(120,130,142,.30);
  stroke-width: 1;
}
/* Wheels */
.sclass-wheel-group {
  opacity: .15;
  filter: grayscale(1);
  transition: opacity .35s ease, filter .35s ease;
}
.sclass-wheel-group.unlocked {
  opacity: 1;
  filter: none;
}
.sclass-tire {
  fill: url(#sClassTyreGrad);
  stroke: rgba(0,0,0,.75);
  stroke-width: 3.5;
}
.sclass-rim {
  fill: url(#sClassRimGrad);
  stroke: rgba(30,36,44,.45);
  stroke-width: 1.6;
}
.sclass-rim-ring {
  stroke: rgba(180,195,210,.55);
  stroke-width: 1.8;
}
/* AMG 5-spoke design */
.sclass-spokes { opacity: .20; }
.sclass-wheel-group.spokes-on .sclass-spokes { opacity: 1; }
.sclass-amg-spoke {
  fill: url(#sClassRimGrad);
  stroke: rgba(20,26,34,.50);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.sclass-spoke-gap {
  stroke: #111318;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.sclass-hub {
  fill: url(#sClassHubGrad);
  stroke: rgba(255,255,255,.22);
  stroke-width: 1.5;
}
.sclass-hub-inner {
  fill: rgba(200,210,220,.85);
  stroke: rgba(100,115,130,.40);
  stroke-width: .8;
}
/* Motion / speed lines */
.sclass-motion line {
  stroke: rgba(148,163,184,.55);
  stroke-width: 5;
  stroke-linecap: round;
  animation: sclassSpeedLine .9s ease-in-out infinite alternate;
}
.sclass-motion line:nth-child(1) { animation-delay: 0s; }
.sclass-motion line:nth-child(2) { animation-delay: .12s; }
.sclass-motion line:nth-child(3) { animation-delay: .22s; }
.sclass-motion line:nth-child(4) { animation-delay: .08s; }
@keyframes sclassSpeedLine {
  from { opacity: .25; transform: scaleX(.6) translateX(4px); }
  to   { opacity: .90; transform: scaleX(1)  translateX(0px); }
}

/* Dark / navy / glass overrides */
body.dark .sclass-ground-shadow,
body.theme-navy .sclass-ground-shadow { fill: rgba(0,0,0,.42); }
body.theme-navy .sclass-main-body,
body.theme-navy .sclass-flank-lower,
body.theme-navy .sclass-cabin-shell { fill: url(#sClassBodyGrad); opacity: .92; }
body.theme-pink .sclass-tl-bar-h,
body.theme-pink .sclass-tl-bar-v    { stroke: #fb7185; filter: drop-shadow(0 0 3px #fb7185); }
body.theme-glass .sclass-main-body,
body.theme-glass .sclass-flank-lower { opacity: .88; }

@media (max-width: 720px) {
  .sclass-wrap { min-height: 160px !important; padding: 10px 2px 2px; }
  .sclass-car-svg { width: 110%; max-width: 110%; margin-left: -5%; }
  .sclass-wrap .car-road-line { bottom: 26px !important; }
}

/* ─── FINAL mobile polish + task subtasks/edit UI ─── */
.rm-soft-update * { transition: background-color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease; }

.todo-edit-dialog,
.habit-edit-dialog {
  max-width: 620px;
  width: min(92vw, 620px);
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.subtask-editor {
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px;
  background: var(--panel-soft);
  margin-top: 12px;
}
.subtask-editor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.edit-subtask-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.edit-subtask-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}
.edit-subtask-row input[type="text"],
.edit-subtask-title {
  min-width: 0;
}
.edit-subtask-check {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  justify-self: center;
}
.subtask-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.subtask-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-soft) 80%, transparent);
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  max-width: 100%;
}
.subtask-pill input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}
.subtask-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.subtask-pill.done {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 36%, transparent);
  background: color-mix(in srgb, var(--good) 10%, transparent);
}
.subtask-pill.done span {
  text-decoration: line-through;
}
.subtask-more {
  font-size: .76rem;
  font-weight: 800;
  color: var(--muted);
  align-self: center;
}

@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .page.dashboard {
    padding-bottom: calc(118px + env(safe-area-inset-bottom)) !important;
  }
  .dashboard[data-mobile-view]:not([data-mobile-view="home"]) .left-col > .card {
    min-height: auto !important;
  }
  .card > #boardContent {
    padding: 0 16px 22px !important;
  }
  .todo-add {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .todo-add #addTodoBtn,
  .habit-add #addHabitBtn {
    width: 100% !important;
    min-height: 52px;
  }
  .task-list {
    gap: 14px !important;
  }
  .task-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 16px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .task-left {
    display: contents !important;
  }
  .check-btn {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
  }
  .task-meta {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .task-title {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  .task-title-main {
    flex: 1 0 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    line-height: 1.15 !important;
  }
  .task-sub {
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }
  .task-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    margin-top: 2px !important;
  }
  .task-actions .icon-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    border-radius: 16px !important;
  }
  .task-actions .task-complete-btn,
  .task-actions .btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 46px !important;
    grid-column: span 2 !important;
    border-radius: 17px !important;
    font-size: .9rem !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }
  .mobile-bottom-nav {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  .mobile-nav-item {
    min-width: 0 !important;
  }
  .mobile-nav-item small {
    white-space: nowrap;
  }
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
  .todo-edit-dialog,
  .habit-edit-dialog {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 42px);
    overflow: auto;
    padding: 18px !important;
  }
  .subtask-editor-head {
    display: block;
  }
  .subtask-pill span {
    max-width: 220px;
  }
}

@media (max-width: 390px) {
  .task-row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .check-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
  .task-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .task-actions .btn,
  .task-actions .task-complete-btn {
    grid-column: 1 / -1 !important;
  }
}

/* ─── Task modal scroll + dropdown subtasks fix ─── */
#todoEditOverlay {
  align-items: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: max(18px, env(safe-area-inset-top)) 18px calc(130px + env(safe-area-inset-bottom)) !important;
}
#todoEditOverlay .todo-edit-dialog {
  margin: 0 auto !important;
  max-height: calc(100dvh - 44px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  box-sizing: border-box !important;
}
#todoEditOverlay .dialog-actions {
  position: sticky;
  bottom: -1px;
  z-index: 3;
  margin: 18px -6px -6px;
  padding: 12px 6px 6px;
  background: linear-gradient(180deg, transparent, var(--panel) 28%);
}

.subtask-preview { display: none !important; }
.subtask-dropdown {
  margin-top: 12px;
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-soft) 82%, transparent);
  overflow: hidden;
}
.subtask-dropdown summary {
  list-style: none;
  cursor: pointer;
  min-height: 46px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 900;
  color: var(--text);
}
.subtask-dropdown summary::-webkit-details-marker { display: none; }
.subtask-dropdown summary::after {
  content: '⌄';
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--input);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: transform .18s ease;
}
.subtask-dropdown[open] summary::after { transform: rotate(180deg); }
.subtask-dropdown summary strong {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--input);
  border: 1px solid var(--border);
  font-size: .78rem;
  white-space: nowrap;
}
.subtask-dropdown-list {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}
.subtask-dropdown-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  font-weight: 750;
}
.subtask-dropdown-item input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.subtask-dropdown-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.subtask-dropdown-item.done {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 38%, var(--border));
  background: color-mix(in srgb, var(--good) 9%, var(--panel));
}
.subtask-dropdown-item.done span { text-decoration: line-through; }

@media (max-width: 768px) {
  #todoEditOverlay {
    padding: max(12px, env(safe-area-inset-top)) 12px calc(120px + env(safe-area-inset-bottom)) !important;
  }
  #todoEditOverlay .todo-edit-dialog {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 24px !important;
  }
  .subtask-dropdown {
    border-radius: 16px;
  }
  .subtask-dropdown summary {
    min-height: 44px;
    padding: 11px 12px;
  }
}

/* ─── Final subtask time + skill picker + joined settings patch ─── */
.edit-subtask-row {
  grid-template-columns: 34px minmax(160px, 1fr) 96px 42px !important;
}
.edit-subtask-row .edit-subtask-title,
.edit-subtask-row .edit-subtask-duration {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.edit-subtask-row .edit-subtask-duration {
  text-align: center;
  font-weight: 800;
  padding-left: 10px;
  padding-right: 10px;
}
.subtask-dropdown-item {
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
}
.subtask-dropdown-item .subtask-time {
  justify-self: end;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 900;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--input);
  border-radius: 999px;
  padding: 4px 8px;
}
.skill-picker-pop {
  position: fixed !important;
  z-index: 999999 !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
.settings-joined-card {
  margin-top: 12px;
  padding: 12px 13px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--panel-soft);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  align-items: center;
}
.settings-joined-card span {
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.settings-joined-card strong {
  font-size: .95rem;
  color: var(--text);
  text-align: right;
}
.settings-joined-card em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: .82rem;
  font-weight: 800;
  color: var(--accent);
}

@media (max-width: 768px) {
  .edit-subtask-row {
    grid-template-columns: 30px minmax(0, 1fr) 76px 38px !important;
    gap: 6px !important;
  }
  .edit-subtask-row .edit-subtask-duration {
    padding-left: 7px;
    padding-right: 7px;
    font-size: .85rem;
  }
  .subtask-dropdown-item {
    grid-template-columns: 22px minmax(0, 1fr) !important;
  }
  .subtask-dropdown-item .subtask-time {
    grid-column: 2;
    justify-self: start;
    margin-top: -2px;
  }
  .skill-picker-pop {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(420px, calc(100dvh - 110px)) !important;
  }
  .skill-picker-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ─── Polish patch: dark category active state, due dates, and motion ─── */
body.dark .cat-filter-btn.active {
  background: linear-gradient(135deg, #c8955a 0%, #e8b47a 100%) !important;
  border-color: rgba(232,180,122,.72) !important;
  color: #24160c !important;
  box-shadow: 0 10px 24px rgba(200,149,90,.26), inset 0 1px 0 rgba(255,255,255,.35);
}
body.dark .cat-filter-btn.active .cat-count {
  background: rgba(36,22,12,.15) !important;
  color: #24160c !important;
}
body.dark .cat-filter-btn.active:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(200,149,90,.32), inset 0 1px 0 rgba(255,255,255,.42);
}

.todo-add {
  grid-template-columns: minmax(0, 1fr) 130px 150px 150px 100px;
  align-items: center;
}
.todo-due-input {
  min-width: 0;
  color-scheme: light;
}
body.dark .todo-due-input,
body.dark input[type="date"],
body.dark .edit-subtask-due {
  color-scheme: dark;
}
.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.chip.due {
  background: rgba(14,165,233,.12);
  border-color: rgba(14,165,233,.30);
  color: #0284c7;
}
.chip.due.today {
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.34);
  color: #b45309;
}
.chip.due.soon {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.30);
  color: #4f46e5;
}
.chip.due.overdue {
  background: rgba(239,68,68,.13);
  border-color: rgba(239,68,68,.34);
  color: #dc2626;
}
body.dark .chip.due {
  background: rgba(56,189,248,.12);
  border-color: rgba(56,189,248,.24);
  color: #7dd3fc;
}
body.dark .chip.due.today { color: #fbbf24; border-color: rgba(251,191,36,.30); }
body.dark .chip.due.soon { color: #c4b5fd; border-color: rgba(196,181,253,.30); }
body.dark .chip.due.overdue { color: #fca5a5; border-color: rgba(252,165,165,.34); }
.subtask-dropdown-item .subtask-due {
  grid-column: auto;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(14,165,233,.10);
  color: #0284c7;
  font-size: .72rem;
  font-weight: 900;
}
.subtask-dropdown-item .subtask-due.overdue {
  background: rgba(239,68,68,.12);
  color: #dc2626;
}
.subtask-dropdown-item .subtask-due.today {
  background: rgba(245,158,11,.12);
  color: #b45309;
}
body.dark .subtask-dropdown-item .subtask-due {
  background: rgba(56,189,248,.10);
  color: #7dd3fc;
}
body.dark .subtask-dropdown-item .subtask-due.overdue { color: #fca5a5; background: rgba(239,68,68,.14); }
body.dark .subtask-dropdown-item .subtask-due.today { color: #fbbf24; background: rgba(245,158,11,.14); }

.edit-subtask-row {
  grid-template-columns: 34px minmax(140px, 1fr) 82px 142px 42px !important;
}
.edit-subtask-row .edit-subtask-due,
.edit-subtask-row .edit-subtask-duration,
.edit-subtask-row .edit-subtask-title {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.edit-subtask-row .edit-subtask-due {
  font-size: .82rem;
  padding-left: 9px;
  padding-right: 9px;
}

#boardContent.board-anim-in,
#boardContent.board-anim-filter,
#boardContent.board-anim-action {
  animation: boardSoftIn .24s ease both;
}
#boardContent.board-anim-filter { animation-name: boardFilterIn; }
#boardContent.board-anim-action { animation-name: boardActionIn; }
.stagger-in {
  animation: itemPolishIn .36s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--stagger, 0ms);
}
.task-row {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}
.task-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(100,72,44,.08);
}
.task-click-pop {
  animation: taskClickPop .18s cubic-bezier(.2,.9,.2,1) both;
}
.mobile-nav-item,
.tab,
.cat-filter-btn,
.btn,
.icon-btn {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.mobile-nav-item:active,
.tab:active,
.cat-filter-btn:active,
.btn:active,
.icon-btn:active {
  transform: scale(.975);
}
.pomodoro-progress-bar {
  min-width: 0;
  background-size: 180% 100%;
  animation: progressShimmer 2.4s ease-in-out infinite;
}

@keyframes boardSoftIn {
  from { opacity: .72; transform: translateY(8px) scale(.997); filter: blur(1px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes boardFilterIn {
  from { opacity: .78; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes boardActionIn {
  from { opacity: .82; transform: scale(.996); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes itemPolishIn {
  from { opacity: 0; transform: translateY(7px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes taskClickPop {
  0% { transform: scale(1); }
  50% { transform: scale(.985); }
  100% { transform: scale(1.005); }
}
@keyframes progressShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 980px) {
  .todo-add { grid-template-columns: 1fr 1fr; }
  .todo-add #newTodoTitle,
  .todo-add #addTodoBtn { grid-column: 1 / -1; }
  .form-grid-3 { grid-template-columns: 1fr; }
  .edit-subtask-row { grid-template-columns: 30px minmax(0, 1fr) 76px 38px !important; }
  .edit-subtask-row .edit-subtask-due {
    grid-column: 2 / 4;
    font-size: .8rem;
  }
  .edit-subtask-row .edit-subtask-remove { grid-column: 4; grid-row: 1; }
}
@media (max-width: 640px) {
  .todo-add { grid-template-columns: 1fr; }
  .todo-add #newTodoTitle,
  .todo-add #addTodoBtn { grid-column: auto; }
  .subtask-dropdown-item .subtask-due { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  #boardContent.board-anim-in,
  #boardContent.board-anim-filter,
  #boardContent.board-anim-action,
  .stagger-in,
  .task-click-pop,
  .pomodoro-progress-bar {
    animation: none !important;
  }
  .task-row:hover { transform: none; }
}

/* Subtask rows with both time + due badge */
.subtask-dropdown-item {
  grid-template-columns: 22px minmax(0, 1fr) auto auto !important;
}
.subtask-dropdown-item .subtask-due {
  justify-self: end;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .subtask-dropdown-item {
    grid-template-columns: 22px minmax(0, 1fr) !important;
  }
  .subtask-dropdown-item .subtask-time,
  .subtask-dropdown-item .subtask-due {
    grid-column: 2;
    justify-self: start;
  }
}

/* ─── Final patch: inline subtask add + emoji item picker ─── */
.task-emoji-btn {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--input);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.task-emoji-btn:hover,
.task-emoji-btn:focus-visible {
  transform: translateY(-1px) scale(1.04);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(200,149,90,.16), 0 0 0 4px rgba(200,149,90,.10);
  outline: none;
}
.task-row.done .task-emoji-btn {
  border-color: rgba(34,197,94,.32);
  background: color-mix(in srgb, var(--panel) 82%, rgba(34,197,94,.22));
}
.add-subtask-inline-btn {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
}
.task-emoji-pop {
  width: 294px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(42,27,12,.22);
}
.task-emoji-current {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 800;
}
.task-emoji-current strong { color: var(--text); font-size: 1.15rem; }
.task-emoji-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}
.task-emoji-opt {
  width: 100%;
  height: 42px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--panel-soft);
  font-size: 1.34rem;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.task-emoji-opt:hover,
.task-emoji-opt.active {
  transform: translateY(-1px) scale(1.04);
  border-color: var(--accent);
  background: rgba(200,149,90,.14);
  box-shadow: 0 8px 18px rgba(200,149,90,.12);
}
.task-emoji-custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}
.task-emoji-custom input {
  height: 42px;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
}
.task-emoji-custom .btn { height: 42px; padding: 0 14px; }
.quick-subtask-dialog {
  width: min(92vw, 520px);
  max-width: 520px;
}
.quick-subtask-grid input[type="date"] { min-width: 0; }
body.dark .task-emoji-btn {
  background: rgba(25,21,18,.92);
  color: #fff7ec;
  border-color: rgba(232,180,122,.24);
}
body.dark .task-emoji-pop {
  background: rgba(18,15,13,.98);
  border-color: rgba(232,180,122,.28);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}
body.dark .task-emoji-opt {
  background: rgba(255,255,255,.045);
  border-color: rgba(232,180,122,.22);
}
body.dark .task-emoji-opt:hover,
body.dark .task-emoji-opt.active {
  background: rgba(200,149,90,.18);
  border-color: rgba(232,180,122,.64);
}

@media (max-width: 768px) {
  .task-emoji-btn {
    width: 40px;
    height: 40px;
    font-size: 1.22rem;
  }
  .task-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(38px, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }
  .task-actions .icon-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
  .task-actions .task-complete-btn,
  .task-actions .btn {
    grid-column: span 2;
    width: 100% !important;
    min-width: 0 !important;
  }
  .task-actions [data-delete-id] {
    grid-column: span 2;
    width: 100% !important;
  }
  .task-emoji-pop {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
  .quick-subtask-grid { grid-template-columns: 1fr !important; }
}

/* ─── Final polish: clearer due dates + estimated times ─── */
.habit-add {
  grid-template-columns: minmax(0, 1fr) 150px 150px 100px !important;
  align-items: center;
}
.todo-add {
  grid-template-columns: minmax(0, 1fr) 130px 150px 150px 100px !important;
  align-items: center;
}
.quick-input-wrap {
  position: relative;
  display: block;
  min-width: 0;
}
.quick-input-wrap > span {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 14px;
  pointer-events: none;
  font-size: .62rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 900;
  color: var(--muted);
  opacity: .86;
}
.quick-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 54px;
  box-sizing: border-box;
  padding-top: 21px !important;
  padding-bottom: 8px !important;
}
.quick-input-wrap input::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}
.task-meta {
  min-width: 0;
}
.task-detail-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}
.detail-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 86%, var(--accent) 7%);
  color: var(--text);
  font-size: .76rem;
  line-height: 1;
  white-space: nowrap;
}
.detail-pill > span {
  color: var(--muted);
  font-weight: 800;
}
.detail-pill > strong {
  color: inherit;
  font-weight: 950;
}
.detail-pill.time-pill {
  border-color: rgba(200,149,90,.34);
  background: rgba(200,149,90,.12);
  color: var(--text);
}
.detail-pill.total-time-pill {
  border-color: rgba(200,149,90,.52);
  background: rgba(200,149,90,.18);
  color: var(--accent);
}
.detail-pill.due {
  background: rgba(14,165,233,.11);
  border-color: rgba(14,165,233,.30);
  color: #0284c7;
}
.detail-pill.due.today {
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.34);
  color: #b45309;
}
.detail-pill.due.soon {
  background: rgba(99,102,241,.12);
  border-color: rgba(99,102,241,.30);
  color: #4f46e5;
}
.detail-pill.due.overdue {
  background: rgba(239,68,68,.13);
  border-color: rgba(239,68,68,.34);
  color: #dc2626;
}
.detail-pill.muted-pill {
  border-style: dashed;
  background: color-mix(in srgb, var(--panel) 92%, var(--muted) 5%);
  color: var(--muted);
}
.detail-pill.done-pill {
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
  color: #16a34a;
}
.detail-pill.streak-pill {
  border-color: rgba(249,115,22,.30);
  background: rgba(249,115,22,.10);
  color: #ea580c;
}
.task-sub.no-estimate-note {
  color: var(--muted);
  opacity: .85;
}
.subtask-dropdown-item .subtask-time.empty,
.subtask-dropdown-item .subtask-due.empty {
  opacity: .72;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body.dark .quick-input-wrap > span {
  color: rgba(246,238,226,.64);
}
body.dark .detail-pill {
  background: rgba(255,255,255,.045);
  border-color: rgba(200,149,90,.22);
  color: #f6eee2;
}
body.dark .detail-pill > span {
  color: rgba(246,238,226,.62);
}
body.dark .detail-pill.time-pill {
  background: rgba(200,149,90,.12);
  border-color: rgba(200,149,90,.28);
}
body.dark .detail-pill.total-time-pill {
  background: rgba(200,149,90,.18);
  border-color: rgba(200,149,90,.42);
  color: #f3bd77;
}
body.dark .detail-pill.due {
  background: rgba(56,189,248,.12);
  border-color: rgba(56,189,248,.24);
  color: #7dd3fc;
}
body.dark .detail-pill.due.today {
  background: rgba(245,158,11,.13);
  border-color: rgba(251,191,36,.30);
  color: #fbbf24;
}
body.dark .detail-pill.due.soon {
  background: rgba(167,139,250,.12);
  border-color: rgba(196,181,253,.30);
  color: #c4b5fd;
}
body.dark .detail-pill.due.overdue {
  background: rgba(239,68,68,.13);
  border-color: rgba(252,165,165,.34);
  color: #fca5a5;
}
body.dark .detail-pill.muted-pill {
  color: rgba(246,238,226,.56);
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
}
body.dark .detail-pill.done-pill {
  color: #86efac;
  background: rgba(34,197,94,.12);
  border-color: rgba(134,239,172,.24);
}
body.dark .detail-pill.streak-pill {
  color: #fdba74;
  background: rgba(249,115,22,.12);
  border-color: rgba(253,186,116,.24);
}
body.dark .subtask-dropdown-item .subtask-time.empty,
body.dark .subtask-dropdown-item .subtask-due.empty {
  color: rgba(246,238,226,.56);
  border-color: rgba(255,255,255,.12);
}
@media (max-width: 980px) {
  .habit-add,
  .todo-add {
    grid-template-columns: 1fr 1fr !important;
  }
  .habit-add #newHabitTitle,
  .todo-add #newTodoTitle,
  .habit-add #addHabitBtn,
  .todo-add #addTodoBtn {
    grid-column: 1 / -1 !important;
  }
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .habit-add,
  .todo-add {
    grid-template-columns: 1fr !important;
  }
  .habit-add #newHabitTitle,
  .todo-add #newTodoTitle,
  .habit-add #addHabitBtn,
  .todo-add #addTodoBtn,
  .quick-input-wrap {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .todo-add input[type="number"],
  .todo-add input[type="date"],
  .habit-add input[type="number"],
  .habit-add input[type="date"] {
    display: block !important;
  }
  .detail-pill {
    white-space: normal;
  }
}

/* ─── Patch: completed subtasks are clean and removable ─── */
.subtask-delete-btn {
  justify-self: end;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.subtask-delete-btn:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .12);
  color: #ef4444;
}
.subtask-dropdown-item.done {
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
}
.subtask-dropdown-item.done .subtask-time,
.subtask-dropdown-item.done .subtask-due {
  display: none !important;
}
@media (max-width: 640px) {
  .subtask-dropdown-item.done {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
  }
  .subtask-dropdown-item.done .subtask-delete-btn {
    grid-column: 3;
    grid-row: 1;
  }
}

/* ─── Task tab management controls ─── */
.cat-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.cat-manage-btn:hover,
.cat-manage-btn.active {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(200,149,90,.12);
}
.cat-manage-btn.active {
  background: linear-gradient(135deg, rgba(200,149,90,.20), rgba(232,180,122,.10));
}
.cat-manage-panel {
  margin: -2px 0 16px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
  box-shadow: 0 14px 34px rgba(80, 48, 18, .08);
  animation: fadeUp .2s ease;
}
.cat-manage-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cat-manage-head strong {
  display: block;
  font-size: .9rem;
  color: var(--text);
}
.cat-manage-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}
.cat-manage-pinned {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.cat-manage-fixed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px dashed var(--border);
  color: var(--muted);
  background: rgba(255,255,255,.28);
  font-size: .78rem;
  font-weight: 800;
}
.cat-manage-fixed small {
  opacity: .75;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .62rem;
}
.cat-manage-list {
  display: grid;
  gap: 8px;
}
.cat-manage-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cat-manage-row:hover,
.cat-manage-row.drag-over {
  border-color: var(--accent);
  box-shadow: 0 10px 20px rgba(200,149,90,.12);
  transform: translateY(-1px);
}
.cat-manage-row.dragging {
  opacity: .55;
  transform: scale(.98);
}
.cat-manage-row.editing {
  grid-template-columns: minmax(160px, 1fr) auto;
  border-color: var(--accent);
}
.cat-drag-handle {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--muted);
  cursor: grab;
  font-weight: 900;
  line-height: 1;
}
.cat-drag-handle:active { cursor: grabbing; }
.cat-manage-name {
  color: var(--text);
  font-size: .88rem;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-manage-count {
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}
.cat-manage-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.cat-mini-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--input);
  color: var(--text);
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.cat-mini-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.cat-mini-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.cat-mini-btn.danger:hover:not(:disabled) {
  border-color: #ef4444;
  color: #ef4444;
}
.cat-mini-btn.save {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.cat-rename-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--accent);
  background: var(--input);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  outline: none;
}
.cat-manage-empty {
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  color: var(--muted);
  font-weight: 800;
  font-size: .86rem;
}
body.dark .cat-manage-panel {
  background: rgba(20, 16, 12, .82);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}
body.dark .cat-manage-fixed,
body.dark .cat-drag-handle,
body.dark .cat-manage-count {
  background: rgba(255,255,255,.045);
}
body.dark .cat-manage-row {
  background: rgba(18, 15, 12, .92);
}
body.dark .cat-manage-btn.active {
  background: linear-gradient(135deg, #c8955a 0%, #e8b47a 100%);
  color: #24160c;
  border-color: rgba(232,180,122,.72);
}

@media (max-width: 700px) {
  .cat-manage-panel { padding: 12px; }
  .cat-manage-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }
  .cat-manage-count { display: none; }
  .cat-manage-actions { grid-column: 2 / -1; justify-self: stretch; }
  .cat-mini-btn { flex: 1; min-width: 0; }
  .cat-manage-row.editing { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   FINAL MOBILE-ONLY POLISH
   Desktop is untouched: all rules are scoped to phone/tablet widths.
════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --mobile-gap: 12px; }

  html, body, #app {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body { touch-action: manipulation; }

  .page,
  .page.dashboard {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
  }

  .card,
  .form-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px !important;
  }

  .top-bar,
  .simple-top {
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  .top-bar .icon-btn,
  .simple-top .icon-btn {
    flex: 0 0 44px !important;
  }

  /* Signup / onboarding: no side overflow on phones */
  .onboarding-header {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .onboarding-header h2 {
    font-size: 1.45rem !important;
    line-height: 1.12 !important;
  }

  .onboarding-header .muted {
    font-size: .9rem !important;
    line-height: 1.35 !important;
  }

  .form-card {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .onboarding-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    padding: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .onboarding-grid > *,
  .avatar-setup-col,
  .form-stack,
  .form-group,
  .tag-input-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .avatar-setup-col {
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 22px !important;
    background: var(--panel-soft) !important;
  }

  .avatar-preview-wrap {
    display: flex !important;
    justify-content: center !important;
  }

  .avatar-preview,
  .profile-edit-avatar-section .avatar-preview {
    width: 78px !important;
    height: 78px !important;
    border-radius: 22px !important;
    font-size: 2.3rem !important;
  }

  .avatar-type-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 5px !important;
  }

  .avatar-tab { min-width: 0 !important; }

  .emoji-grid,
  .profile-edit-avatar-section .emoji-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
    max-height: 248px !important;
    overflow-y: auto !important;
    padding: 2px 2px 6px !important;
    scrollbar-width: thin !important;
  }

  .emoji-option,
  .task-emoji-option {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }

  .custom-emoji-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .custom-emoji-row input { min-width: 0 !important; }
  .custom-emoji-row .btn { padding-inline: 14px !important; }

  .form-stack {
    display: grid !important;
    gap: 12px !important;
  }

  .form-stack .two-cards,
  .two-cards,
  .stack-cards {
    grid-template-columns: 1fr !important;
  }

  input, select, textarea, .quick-input-wrap {
    max-width: 100% !important;
  }

  /* Tasks page: make controls breathe on mobile */
  .card > #boardContent,
  .card > .section-title,
  .card > .tabs,
  .card > #reviewGrid,
  .card > .two-cards,
  .card > .stack-cards {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section-title {
    font-size: 1.05rem !important;
    margin-bottom: 12px !important;
  }

  .board-toolbar { margin-bottom: 12px !important; }

  .todo-add,
  .habit-add {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .todo-add > *,
  .habit-add > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .todo-add .btn,
  .habit-add .btn {
    height: 50px !important;
    font-size: 1rem !important;
  }

  .quick-input-wrap {
    min-height: 54px !important;
    border-radius: 16px !important;
  }

  .quick-input-wrap span {
    font-size: .68rem !important;
    letter-spacing: .06em !important;
  }

  .quick-input-wrap input {
    height: 26px !important;
    padding: 0 !important;
  }

  .cat-filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 2px 2px 8px !important;
    margin-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .cat-filter-bar::-webkit-scrollbar { display: none !important; }

  .cat-filter-btn,
  .cat-add-btn,
  .cat-manage-btn {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    padding: 7px 11px !important;
    font-size: .78rem !important;
  }

  .cat-count { min-width: 20px !important; }

  .cat-manage-panel {
    margin: 0 0 12px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .cat-manage-head {
    display: block !important;
  }

  .cat-manage-row {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .cat-manage-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .cat-mini-btn { min-width: 0 !important; }

  .task-list,
  #todoGroupList {
    display: grid !important;
    gap: 12px !important;
  }

  .task-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .task-left {
    width: 100% !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .check-btn,
  .task-emoji-btn {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .task-meta {
    min-width: 0 !important;
    width: 100% !important;
  }

  .task-title {
    font-size: .95rem !important;
    line-height: 1.28 !important;
  }

  .task-title-main {
    overflow-wrap: anywhere !important;
  }

  .task-sub {
    font-size: .78rem !important;
    line-height: 1.45 !important;
  }

  .task-schedule-note {
    display: block !important;
    line-height: 1.45 !important;
    margin-top: 6px !important;
  }

  .chip-row,
  .task-title .chip,
  .chip {
    max-width: 100% !important;
  }

  .task-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(42px, 1fr)) minmax(82px, 1.5fr) minmax(42px, 1fr) !important;
    gap: 8px !important;
    justify-content: stretch !important;
  }

  .task-actions .btn,
  .task-actions .icon-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding-inline: 8px !important;
  }

  .subtasks-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .subtasks-header,
  .subtask-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .subtask-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .subtask-title {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .subtask-meta,
  .subtask-badges {
    grid-column: 2 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .mobile-bottom-nav {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    padding: 7px !important;
    gap: 4px !important;
  }

  .mobile-bottom-nav .nav-item,
  .bottom-nav .nav-item {
    min-width: 0 !important;
    padding: 7px 5px !important;
  }

  .mobile-bottom-nav .nav-label,
  .bottom-nav .nav-label {
    font-size: .62rem !important;
  }
}

@media (max-width: 420px) {
  .page,
  .page.dashboard {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .onboarding-grid { padding: 12px !important; }
  .emoji-grid,
  .profile-edit-avatar-section .emoji-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  .card > #boardContent,
  .card > .section-title,
  .card > .tabs,
  .card > #reviewGrid,
  .card > .two-cards,
  .card > .stack-cards {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .task-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .task-actions .btn {
    grid-column: span 2 !important;
  }
}

/* ─── Mobile-only fix: readable task/habit estimate inputs ───
   Keeps desktop untouched. This overrides the earlier mobile squeeze rule
   that made the Est. time / Due date labels overlap their values. */
@media (max-width: 768px) {
  .habit-add .quick-input-wrap,
  .todo-add .quick-input-wrap {
    position: relative !important;
    display: block !important;
    min-height: 56px !important;
    height: 56px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .habit-add .quick-input-wrap > span,
  .todo-add .quick-input-wrap > span {
    position: absolute !important;
    top: 7px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .64rem !important;
    line-height: 1 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  .habit-add .quick-input-wrap input,
  .todo-add .quick-input-wrap input,
  .habit-add #newHabitDuration,
  .todo-add #newTodoDuration,
  .todo-add #newTodoDueDate {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    padding: 23px 14px 8px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    line-height: 1.2 !important;
    font-size: .98rem !important;
    overflow: visible !important;
  }

  .habit-add .quick-input-wrap input::placeholder,
  .todo-add .quick-input-wrap input::placeholder {
    opacity: .9 !important;
  }

  .todo-add #newTodoDueDate {
    -webkit-appearance: auto !important;
    appearance: auto !important;
  }
}

@media (max-width: 420px) {
  .habit-add .quick-input-wrap,
  .todo-add .quick-input-wrap,
  .habit-add .quick-input-wrap input,
  .todo-add .quick-input-wrap input,
  .habit-add #newHabitDuration,
  .todo-add #newTodoDuration,
  .todo-add #newTodoDueDate {
    height: 58px !important;
    min-height: 58px !important;
  }

  .habit-add .quick-input-wrap input,
  .todo-add .quick-input-wrap input,
  .habit-add #newHabitDuration,
  .todo-add #newTodoDuration,
  .todo-add #newTodoDueDate {
    padding-top: 24px !important;
    font-size: .96rem !important;
  }
}


/* Mobile-only tutorial bottom-sheet centering fix. Desktop rules stay unchanged. */
@media (max-width: 760px) {
  #tutorialCard.tutorial-card {
    width: min(360px, calc(100vw - 28px)) !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ════════════════════════════════════════
   FINAL PATCH: welcome-back home card + fixed stats meters
════════════════════════════════════════ */
.welcome-back-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 16px;
  padding: 14px 15px;
  border: 1.5px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(200,149,90,.14), rgba(255,255,255,.72));
  box-shadow: 0 10px 28px rgba(80,50,20,.08);
}
body.dark .welcome-back-notice {
  background: linear-gradient(135deg, rgba(200,149,90,.16), rgba(255,255,255,.045));
  border-color: rgba(226,196,150,.15);
}
.welcome-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(80,50,20,.08);
}
body.dark .welcome-icon { background: rgba(255,255,255,.055); border-color: rgba(226,196,150,.14); }
.welcome-copy { min-width: 0; display: grid; gap: 3px; }
.welcome-copy strong { font-size: .98rem; line-height: 1.2; }
.welcome-copy span { color: var(--text); font-weight: 850; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.welcome-copy span b { font-weight: 950; }
.welcome-copy span em { color: var(--muted); font-style: normal; font-weight: 850; }
.welcome-copy small { color: var(--muted); font-weight: 800; line-height: 1.2; }
.stats-dashboard-sub {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
  max-width: 560px;
  line-height: 1.35;
}
.stats-no-car-board .stats-dashboard-card-main {
  overflow: hidden !important;
}
.stats-no-car-board .meter-gauge-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
.stats-no-car-board .meter-gauge-card {
  overflow: hidden !important;
  min-height: 252px !important;
  padding: 16px 14px 14px !important;
  justify-content: space-between !important;
}
.stats-no-car-board .meter-gauge {
  width: min(100%, 214px) !important;
  max-width: 214px !important;
  min-height: 116px !important;
  height: 116px !important;
  aspect-ratio: auto !important;
  margin: 0 auto 2px !important;
  overflow: hidden !important;
  place-items: end center !important;
  padding-top: 0 !important;
}
.stats-no-car-board .meter-gauge::before {
  width: 78% !important;
  bottom: -38% !important;
}
.stats-no-car-board .meter-arc {
  width: 76% !important;
  max-width: 76% !important;
  bottom: -36% !important;
  filter: drop-shadow(0 0 4px var(--active-color, #f59e0b)) !important;
}
.stats-no-car-board .meter-needle {
  width: 38% !important;
  bottom: 23% !important;
}
.stats-no-car-board .meter-gauge::after {
  bottom: calc(23% - 7px) !important;
}
.stats-no-car-board .meter-center {
  width: 72px !important;
  height: 72px !important;
  bottom: 2px !important;
}
.stats-no-car-board .meter-center strong {
  font-size: .88rem !important;
  max-width: 62px;
  overflow-wrap: anywhere;
}
.stats-no-car-board .meter-copy {
  margin-top: 2px !important;
  align-self: center !important;
}
.monthly-day-cell.no-activity,
.monthly-day-cell.future {
  background: rgba(120,120,120,.09) !important;
  border-color: rgba(120,120,120,.18) !important;
  color: var(--muted) !important;
  opacity: .78;
}
body.dark .monthly-day-cell.no-activity,
body.dark .monthly-day-cell.future {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.monthly-day-cell.future { opacity: .42; }
.monthly-day-cell[title] { cursor: help; }
.stats-quick-grid-better div strong { font-size: 1.2rem; }
@media (max-width: 980px) {
  .stats-no-car-board .meter-gauge-grid { grid-template-columns: 1fr !important; }
  .stats-no-car-board .meter-gauge-card { min-height: 230px !important; }
}
@media (max-width: 760px) {
  .welcome-back-notice {
    margin: 0 0 14px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }
  .welcome-icon { width: 38px; height: 38px; border-radius: 14px; font-size: 1.15rem; }
  .welcome-copy strong { font-size: .9rem; }
  .welcome-copy span, .welcome-copy small { font-size: .78rem; }
  .stats-no-car-board .meter-gauge-card { min-height: 216px !important; }
  .stats-no-car-board .meter-gauge { height: 108px !important; min-height: 108px !important; }
  .stats-quick-grid-better { grid-template-columns: 1fr 1fr !important; }
}

/* FINAL POLISH: custom water/stat hover popups + centered stat meters */
.has-rm-tooltip {
  position: relative !important;
  isolation: isolate;
}
.has-rm-tooltip::before,
.has-rm-tooltip::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px) scale(.96);
  transition: opacity .16s ease, transform .16s ease;
  z-index: 80;
}
.has-rm-tooltip::before {
  content: '';
  top: calc(100% + 8px);
  width: 12px;
  height: 12px;
  background: linear-gradient(145deg, rgba(255,252,246,.98), rgba(245,231,211,.96));
  border-left: 1px solid rgba(210,176,126,.45);
  border-top: 1px solid rgba(210,176,126,.45);
  transform: translate(-50%, 8px) rotate(45deg) scale(.96);
  box-shadow: -3px -3px 12px rgba(80,50,20,.08);
}
.has-rm-tooltip::after {
  content: attr(data-tip);
  top: calc(100% + 14px);
  width: max-content;
  max-width: min(260px, 78vw);
  white-space: pre-line;
  text-align: left;
  color: var(--text);
  font-size: .74rem;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: .01em;
  padding: 11px 13px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(200,149,90,.18), transparent 36%),
    linear-gradient(145deg, rgba(255,252,246,.98), rgba(245,231,211,.96));
  border: 1px solid rgba(210,176,126,.45);
  box-shadow: 0 18px 38px rgba(48,32,18,.18), 0 1px 0 rgba(255,255,255,.85) inset;
}
.has-rm-tooltip:hover::before,
.has-rm-tooltip:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0) rotate(45deg) scale(1);
}
.has-rm-tooltip:hover::after,
.has-rm-tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
body.dark .has-rm-tooltip::before {
  background: linear-gradient(145deg, rgba(43,34,24,.98), rgba(22,19,16,.98));
  border-color: rgba(226,196,150,.20);
}
body.dark .has-rm-tooltip::after {
  background:
    radial-gradient(circle at 18% 0%, rgba(200,149,90,.18), transparent 38%),
    linear-gradient(145deg, rgba(43,34,24,.98), rgba(22,19,16,.98));
  border-color: rgba(226,196,150,.20);
  box-shadow: 0 18px 42px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.05) inset;
}
.monthly-day-cell.has-rm-tooltip::after,
.monthly-day-cell.has-rm-tooltip::before {
  top: auto;
  bottom: calc(100% + 14px);
  transform: translate(-50%, -8px) scale(.96);
}
.monthly-day-cell.has-rm-tooltip::before {
  bottom: calc(100% + 8px);
  transform: translate(-50%, -8px) rotate(225deg) scale(.96);
}
.monthly-day-cell.has-rm-tooltip:hover::after,
.monthly-day-cell.has-rm-tooltip:focus-visible::after {
  transform: translate(-50%, 0) scale(1);
}
.monthly-day-cell.has-rm-tooltip:hover::before,
.monthly-day-cell.has-rm-tooltip:focus-visible::before {
  transform: translate(-50%, 0) rotate(225deg) scale(1);
}
.mobile-water-day.has-rm-tooltip::after {
  text-align: center;
}
.monthly-calendar-head-clean {
  justify-content: flex-start !important;
}
.monthly-calendar-head-clean span {
  display: none !important;
}
.stats-dashboard-sub {
  max-width: 560px;
}
.meter-gauge-grid {
  justify-items: center !important;
  align-items: stretch !important;
}
.meter-gauge-card {
  width: 100% !important;
  max-width: 330px !important;
  justify-content: space-between !important;
}
.meter-gauge {
  width: min(100%, 244px) !important;
  height: 152px !important;
  min-height: 152px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  place-items: unset !important;
}
.meter-gauge::before {
  width: 226px !important;
  bottom: -107px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.meter-arc {
  width: 208px !important;
  bottom: -98px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.meter-gauge::after {
  bottom: 34px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.meter-needle {
  width: 98px !important;
  left: 50% !important;
  bottom: 40px !important;
  transform-origin: left center !important;
  transform: rotate(var(--needle-rotation)) !important;
}
.meter-center {
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}
@media (max-width: 640px) {
  .has-rm-tooltip::after {
    max-width: min(240px, 82vw);
    font-size: .70rem;
  }
  .meter-gauge-card {
    max-width: 100% !important;
  }
  .meter-gauge {
    width: min(100%, 228px) !important;
    height: 144px !important;
    min-height: 144px !important;
  }
  .meter-gauge::before { width: 214px !important; bottom: -101px !important; }
  .meter-arc { width: 198px !important; bottom: -93px !important; }
  .meter-needle { width: 92px !important; bottom: 39px !important; }
}

/* ════════════════════════════════════════
   SMART ROUTINE METER DASHBOARD REDESIGN
   Stats-only upgrade. Existing app styles/data remain intact.
════════════════════════════════════════ */
.dashboard[data-current-tab="stats"] .stats-board.rm-dashboard-board {
  max-width: 1060px !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 18px !important;
  padding-bottom: 10px;
}
.rm-hero-card,
.rm-breakdown-card,
.rm-trend-card,
.rm-consistency-card,
.rm-calendar-card,
.rm-insights-card {
  border: 1.5px solid var(--border);
  border-radius: 30px;
  background:
    radial-gradient(circle at 14% 0%, rgba(200,149,90,.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,248,239,.76));
  box-shadow: 0 18px 46px rgba(80,50,20,.08), inset 0 1px 0 rgba(255,255,255,.65);
}
body.dark .rm-hero-card,
body.dark .rm-breakdown-card,
body.dark .rm-trend-card,
body.dark .rm-consistency-card,
body.dark .rm-calendar-card,
body.dark .rm-insights-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(200,149,90,.16), transparent 36%),
    linear-gradient(180deg, rgba(33,28,24,.96), rgba(17,16,15,.96));
  border-color: rgba(226,196,150,.15);
  box-shadow: 0 22px 58px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.04);
}
.rm-hero-card {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 32px);
  min-height: 376px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .75fr);
  align-items: center;
  gap: clamp(18px, 4vw, 46px);
}
.rm-hero-card::before {
  content: '';
  position: absolute;
  inset: -25% -10% auto auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,149,90,.22), transparent 68%);
  pointer-events: none;
}
.rm-hero-copy { position: relative; z-index: 1; display: grid; gap: 14px; }
.rm-hero-copy h3 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.rm-hero-copy h3 span {
  display: block;
  color: var(--accent);
  text-shadow: 0 10px 30px rgba(200,149,90,.18);
}
.rm-hero-copy p {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.45;
}
.rm-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.rm-hero-stats div,
.rm-day-detail div,
.rm-consistency-summary div {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.54);
  padding: 12px 13px;
  display: grid;
  gap: 4px;
}
body.dark .rm-hero-stats div,
body.dark .rm-day-detail div,
body.dark .rm-consistency-summary div { background: rgba(255,255,255,.04); border-color: rgba(226,196,150,.12); }
.rm-hero-stats span,
.rm-day-detail span,
.rm-consistency-summary span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rm-hero-stats strong,
.rm-day-detail strong,
.rm-consistency-summary strong { font-size: 1rem; line-height: 1.15; }
.rm-hero-stats .up, .rm-trend-pill.up { color: #16a34a; }
.rm-hero-stats .down, .rm-trend-pill.down { color: #ef4444; }
.rm-hero-stats .flat, .rm-trend-pill.flat { color: var(--muted); }
.rm-meter-shell {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 24px 48px rgba(80,50,20,.16));
}
.rm-meter-glow {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: conic-gradient(from -135deg, rgba(239,68,68,.18), rgba(245,158,11,.18), rgba(34,197,94,.22), rgba(200,149,90,.14));
  filter: blur(20px);
  opacity: .85;
  animation: rmPulse 3.8s ease-in-out infinite alternate;
}
@keyframes rmPulse { from { transform: scale(.95); opacity: .62; } to { transform: scale(1.04); opacity: .95; } }
.rm-meter-ring {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    conic-gradient(from -135deg,
      #ef4444 0deg,
      #f97316 68deg,
      #f59e0b 135deg,
      #84cc16 203deg,
      #22c55e 270deg,
      rgba(120,120,120,.13) 270deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58% 73%, transparent 74%);
          mask: radial-gradient(circle, transparent 0 57%, #000 58% 73%, transparent 74%);
}
.rm-meter-ring::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: conic-gradient(from -135deg, rgba(255,255,255,.55) 0 var(--rm-score-deg, 0deg), rgba(255,255,255,.12) 0 270deg, transparent 270deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 56% 60%, transparent 61%);
          mask: radial-gradient(circle, transparent 0 55%, #000 56% 60%, transparent 61%);
}
.rm-meter-ticks {
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  background: repeating-conic-gradient(from -135deg, rgba(255,255,255,.8) 0 1deg, transparent 1deg 13.5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 77%, #000 78% 81%, transparent 82%);
          mask: radial-gradient(circle, transparent 0 77%, #000 78% 81%, transparent 82%);
  opacity: .55;
}
body.dark .rm-meter-ticks { opacity: .28; }
.rm-meter-needle {
  position: absolute;
  width: 39%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #523818, #e7b76c 72%, #fff0c7);
  left: 50%;
  top: 50%;
  transform-origin: left center;
  transform: rotate(var(--rm-needle));
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
  transition: transform .8s cubic-bezier(.2,1,.2,1);
}
.rm-meter-center {
  position: relative;
  width: 154px;
  height: 154px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.98), rgba(246,237,223,.92));
  border: 2px solid rgba(200,149,90,.32);
  box-shadow: 0 18px 46px rgba(80,50,20,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
body.dark .rm-meter-center { background: radial-gradient(circle at 50% 20%, rgba(48,39,29,.98), rgba(23,20,18,.96)); border-color: rgba(226,196,150,.18); }
.rm-meter-center span { font-size: 1.5rem; line-height: 1; }
.rm-meter-center strong { font-size: 3.1rem; line-height: .9; letter-spacing: -.06em; }
.rm-meter-center small { color: var(--muted); font-weight: 950; }
.rm-meter-labels {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 9%;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 950;
}
.rm-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.rm-breakdown-card {
  padding: 16px;
  display: grid;
  gap: 12px;
  min-height: 190px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rm-breakdown-card:hover { transform: translateY(-2px); border-color: rgba(200,149,90,.42); box-shadow: 0 22px 54px rgba(80,50,20,.12); }
.rm-breakdown-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rm-breakdown-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(200,149,90,.13);
  border: 1px solid rgba(200,149,90,.22);
  font-size: 1.25rem;
  flex: none;
}
.rm-breakdown-top div { min-width: 0; display: grid; gap: 1px; }
.rm-breakdown-top strong { font-size: 1.02rem; }
.rm-breakdown-top small { color: var(--muted); font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-breakdown-score { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rm-breakdown-score b { font-size: 2rem; line-height: 1; letter-spacing: -.035em; }
.rm-trend-pill {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  padding: 6px 8px;
  font-size: .68rem;
  font-weight: 950;
  white-space: nowrap;
}
body.dark .rm-trend-pill { background: rgba(255,255,255,.045); border-color: rgba(226,196,150,.13); }
.rm-breakdown-card p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 850; line-height: 1.35; }
.rm-spark-bars {
  height: 42px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 5px;
  padding: 7px 0 2px;
}
.rm-spark-bars span {
  border-radius: 999px 999px 4px 4px;
  min-height: 6px;
  background: linear-gradient(180deg, var(--spark-hi, var(--accent-2)), var(--spark-lo, var(--accent)));
  opacity: .86;
}
.rm-spark-green { --spark-hi: #86efac; --spark-lo: #22c55e; }
.rm-spark-blue { --spark-hi: #93c5fd; --spark-lo: #38bdf8; }
.rm-spark-aqua { --spark-hi: #67e8f9; --spark-lo: #06b6d4; }
.rm-trends-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.rm-trend-card { padding: 18px; min-height: 214px; display: grid; gap: 12px; overflow: hidden; }
.rm-trend-wide { grid-row: span 2; }
.rm-section-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
}
.rm-section-head div { display: grid; gap: 3px; }
.rm-section-head strong { font-size: 1.02rem; }
.rm-section-head span { color: var(--muted); font-size: .8rem; font-weight: 850; line-height: 1.3; }
.rm-section-head b {
  flex: none;
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  font-size: .8rem;
}
body.dark .rm-section-head b { background: rgba(255,255,255,.04); border-color: rgba(226,196,150,.12); }
.rm-line-chart { width: 100%; height: 150px; display: block; }
.rm-line-grid { fill: none; stroke: rgba(140,110,80,.22); stroke-width: 2; }
.rm-line-area { fill: rgba(200,149,90,.15); }
.rm-line-stroke { fill: none; stroke: var(--line-color, var(--accent)); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rm-line-chart circle { fill: #fff8ed; stroke: var(--line-color, var(--accent)); stroke-width: 3; }
.rm-line-green { --line-color: #22c55e; }
.rm-line-blue { --line-color: #38bdf8; }
body.dark .rm-line-chart circle { fill: #171514; }
.rm-chart-labels { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; color: var(--muted); font-size: .64rem; font-weight: 900; text-align: center; }
.rm-trend-bars { height: 142px; display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 6px; padding-top: 12px; }
.rm-trend-bars span { border-radius: 999px 999px 5px 5px; min-height: 6px; background: linear-gradient(180deg, #93c5fd, #38bdf8); box-shadow: 0 8px 18px rgba(56,189,248,.12); }
.rm-consistency-card,
.rm-calendar-card,
.rm-insights-card { padding: 18px; display: grid; gap: 14px; }
.rm-consistency-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rm-habit-list { display: grid; gap: 10px; }
.rm-habit-row {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(190px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,.48);
}
body.dark .rm-habit-row { background: rgba(255,255,255,.035); border-color: rgba(226,196,150,.12); }
.rm-habit-info { min-width: 0; display: grid; gap: 2px; }
.rm-habit-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-habit-info span { color: var(--muted); font-size: .8rem; font-weight: 850; }
.rm-habit-heat { display: grid; grid-template-columns: repeat(14, minmax(10px, 1fr)); gap: 5px; }
.rm-habit-heat span {
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(140,110,80,.18);
  background: rgba(140,110,80,.08);
}
.rm-habit-heat span.done { background: linear-gradient(180deg, rgba(34,197,94,.85), rgba(200,149,90,.72)); border-color: rgba(34,197,94,.26); }
.rm-habit-heat span.missed { background: rgba(239,68,68,.13); border-color: rgba(239,68,68,.18); }
.rm-habit-rate { text-align: right; display: grid; gap: 0; }
.rm-habit-rate b { font-size: 1.25rem; }
.rm-habit-rate small { color: var(--muted); font-weight: 850; }
.rm-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; }
.rm-calendar-day {
  border: 1px solid var(--border);
  border-radius: 17px;
  min-height: 64px;
  padding: 8px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  cursor: pointer;
  color: var(--text);
  background: rgba(255,255,255,.44);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  font-family: inherit;
}
.rm-calendar-day strong { font-size: .98rem; }
.rm-calendar-day span { color: var(--muted); font-size: .75rem; font-weight: 950; }
.rm-calendar-day:hover,
.rm-calendar-day.selected { transform: translateY(-2px); border-color: rgba(200,149,90,.58); box-shadow: 0 12px 26px rgba(80,50,20,.12); }
.rm-calendar-day.flow { background: linear-gradient(145deg, rgba(34,197,94, var(--day-alpha, .24)), rgba(200,149,90,.08)); }
.rm-calendar-day.consistent { background: linear-gradient(145deg, rgba(132,204,22, var(--day-alpha, .22)), rgba(200,149,90,.08)); }
.rm-calendar-day.building { background: linear-gradient(145deg, rgba(245,158,11, var(--day-alpha, .20)), rgba(200,149,90,.08)); }
.rm-calendar-day.off { background: linear-gradient(145deg, rgba(239,68,68, var(--day-alpha, .18)), rgba(200,149,90,.06)); }
.rm-calendar-day.empty,
.rm-calendar-day.future { background: rgba(120,120,120,.08); color: var(--muted); }
.rm-calendar-day.future { opacity: .45; }
body.dark .rm-calendar-day { background-color: rgba(255,255,255,.035); border-color: rgba(226,196,150,.12); }
.rm-day-detail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rm-insights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rm-insight {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255,255,255,.45);
}
body.dark .rm-insight { background: rgba(255,255,255,.035); border-color: rgba(226,196,150,.12); }
.rm-insight span {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(200,149,90,.13);
  border: 1px solid rgba(200,149,90,.22);
}
.rm-insight p { margin: 0; color: var(--text); font-weight: 850; line-height: 1.35; }
@media (max-width: 980px) {
  .rm-hero-card { grid-template-columns: 1fr; text-align: center; min-height: auto; }
  .rm-hero-copy p { margin: 0 auto; }
  .rm-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
  .rm-breakdown-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-trends-grid { grid-template-columns: 1fr; }
  .rm-trend-wide { grid-row: auto; }
  .rm-consistency-summary, .rm-day-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dashboard[data-current-tab="stats"] .stats-board.rm-dashboard-board { gap: 14px !important; }
  .rm-hero-card,
  .rm-breakdown-card,
  .rm-trend-card,
  .rm-consistency-card,
  .rm-calendar-card,
  .rm-insights-card { border-radius: 24px; }
  .rm-hero-card { padding: 18px; gap: 18px; }
  .rm-hero-copy h3 { font-size: 2.15rem; }
  .rm-hero-stats, .rm-breakdown-grid, .rm-consistency-summary, .rm-day-detail, .rm-insights-grid { grid-template-columns: 1fr; }
  .rm-meter-shell { width: min(286px, 100%); }
  .rm-meter-center { width: 126px; height: 126px; }
  .rm-meter-center strong { font-size: 2.45rem; }
  .rm-breakdown-card { min-height: auto; }
  .rm-trend-card { min-height: 190px; }
  .rm-chart-labels { font-size: .56rem; }
  .rm-habit-row { grid-template-columns: 1fr; gap: 10px; }
  .rm-habit-info strong { white-space: normal; }
  .rm-habit-rate { text-align: left; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
  .rm-calendar-grid { gap: 6px; }
  .rm-calendar-day { min-height: 52px; border-radius: 14px; padding: 7px 4px; }
  .rm-calendar-day strong { font-size: .86rem; }
  .rm-calendar-day span { font-size: .68rem; }
  .rm-section-head { display: grid; }
  .rm-section-head b { justify-self: start; }
}

/* ════════════════════════════════════════
   DAILY REVIEW + TASK ANALYTICS UI
   Additive, stats-only. Keeps existing warm Routine Meter aesthetic.
════════════════════════════════════════ */
.rm-task-analytics-card {
  border: 1.5px solid var(--border);
  border-radius: 30px;
  padding: 18px;
  display: grid;
  gap: 14px;
  background:
    radial-gradient(circle at 16% 0%, rgba(34,197,94,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,248,239,.76));
  box-shadow: 0 18px 46px rgba(80,50,20,.08), inset 0 1px 0 rgba(255,255,255,.65);
}
body.dark .rm-task-analytics-card {
  background:
    radial-gradient(circle at 16% 0%, rgba(34,197,94,.12), transparent 38%),
    linear-gradient(180deg, rgba(33,28,24,.96), rgba(17,16,15,.96));
  border-color: rgba(226,196,150,.15);
  box-shadow: 0 22px 58px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.04);
}
.rm-task-metrics-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.rm-task-metrics-grid > div,
.rm-review-snapshot-grid > div,
.rm-review-task-strip > div,
.rm-review-component-grid > article {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 13px;
  background: rgba(255,255,255,.50);
  display: grid;
  gap: 4px;
  min-width: 0;
}
body.dark .rm-task-metrics-grid > div,
body.dark .rm-review-snapshot-grid > div,
body.dark .rm-review-task-strip > div,
body.dark .rm-review-component-grid > article { background: rgba(255,255,255,.04); border-color: rgba(226,196,150,.12); }
.rm-task-metrics-grid span,
.rm-review-snapshot-grid span,
.rm-review-task-strip span,
.rm-review-component-grid span {
  color: var(--muted);
  font-size: .70rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rm-task-metrics-grid strong,
.rm-review-snapshot-grid strong,
.rm-review-task-strip strong,
.rm-review-component-grid strong { font-size: 1.08rem; line-height: 1.16; overflow-wrap: anywhere; }
.rm-review-component-grid em { color: var(--muted); font-style: normal; font-size: .78rem; font-weight: 850; }
.rm-task-chart-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
}
.rm-task-chart-grid article {
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 13px;
  background: rgba(255,255,255,.38);
  display: grid;
  gap: 8px;
  min-width: 0;
}
body.dark .rm-task-chart-grid article { background: rgba(255,255,255,.035); border-color: rgba(226,196,150,.12); }
.rm-task-chart-grid article > strong { font-size: .95rem; }
.rm-task-chart-grid small { color: var(--muted); font-weight: 850; }
.rm-due-done-bars {
  height: 148px;
  display: grid;
  grid-template-columns: repeat(14, minmax(4px, 1fr));
  align-items: end;
  gap: 6px;
  padding: 10px 2px 0;
}
.rm-due-done-bars span {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 2px;
}
.rm-due-done-bars i,
.rm-due-done-bars em {
  display: block;
  min-height: 6px;
  border-radius: 999px 999px 4px 4px;
}
.rm-due-done-bars i { background: linear-gradient(180deg, #86efac, #22c55e); box-shadow: 0 10px 22px rgba(34,197,94,.15); }
.rm-due-done-bars em { background: linear-gradient(180deg, #f8d8a1, var(--accent)); box-shadow: 0 10px 22px rgba(200,149,90,.13); }
.rm-calendar-day { position: relative; overflow: hidden; }
.rm-calendar-day::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(239,68,68,.75), rgba(245,158,11,.78), rgba(34,197,94,.82));
  opacity: calc(var(--day-intensity, 0) / 120);
}
.rm-day-review-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(31,24,18,.46);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
          backdrop-filter: blur(18px) saturate(1.12);
  animation: rmReviewFade .18s ease both;
}
@keyframes rmReviewFade { from { opacity: 0; } to { opacity: 1; } }
.rm-day-review-modal {
  width: min(1120px, 100%);
  max-height: min(90vh, 980px);
  overflow: auto;
  position: relative;
  border: 1.5px solid rgba(200,149,90,.30);
  border-radius: 34px;
  padding: clamp(18px, 2.6vw, 30px);
  background:
    radial-gradient(circle at 14% 0%, rgba(200,149,90,.18), transparent 38%),
    radial-gradient(circle at 85% 7%, rgba(34,197,94,.10), transparent 30%),
    linear-gradient(180deg, rgba(255,251,245,.97), rgba(246,237,223,.94));
  box-shadow: 0 34px 120px rgba(41,28,16,.42), inset 0 1px 0 rgba(255,255,255,.80);
  animation: rmReviewRise .24s cubic-bezier(.2,1,.2,1) both;
}
body.dark .rm-day-review-modal {
  background:
    radial-gradient(circle at 14% 0%, rgba(200,149,90,.16), transparent 38%),
    radial-gradient(circle at 85% 7%, rgba(34,197,94,.10), transparent 30%),
    linear-gradient(180deg, rgba(33,28,24,.98), rgba(15,14,13,.98));
  border-color: rgba(226,196,150,.18);
  box-shadow: 0 38px 130px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.05);
}
@keyframes rmReviewRise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.rm-day-review-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.74);
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(80,50,20,.12);
}
body.dark .rm-day-review-close { background: rgba(255,255,255,.06); border-color: rgba(226,196,150,.14); }
.rm-day-review-close:hover { transform: translateY(-1px); border-color: rgba(200,149,90,.48); }
.rm-day-review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-right: 52px;
  margin-bottom: 18px;
}
.rm-day-review-header h3 {
  margin: 3px 0 5px;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: .95;
  letter-spacing: -.055em;
}
.rm-day-review-header p { margin: 0; color: var(--muted); font-weight: 850; max-width: 680px; line-height: 1.45; }
.rm-review-state {
  flex: none;
  border-radius: 999px;
  padding: 11px 14px;
  border: 1px solid rgba(200,149,90,.28);
  background: rgba(200,149,90,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.rm-day-review-hero {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 18px;
  background: rgba(255,255,255,.44);
  margin-bottom: 14px;
}
body.dark .rm-day-review-hero { background: rgba(255,255,255,.035); border-color: rgba(226,196,150,.12); }
.rm-review-meter .rm-meter-shell { width: min(310px, 100%); margin: 0 auto; }
.rm-review-snapshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rm-review-snapshot-grid .up { color: #16a34a; }
.rm-review-snapshot-grid .down { color: #ef4444; }
.rm-review-snapshot-grid .flat { color: var(--muted); }
.rm-review-component-grid,
.rm-review-task-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.rm-review-component-grid > article { background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.32)); }
body.dark .rm-review-component-grid > article { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)); }
.rm-review-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.rm-review-list-card,
.rm-review-timeline,
.rm-review-insights {
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 16px;
  background: rgba(255,255,255,.42);
}
body.dark .rm-review-list-card,
body.dark .rm-review-timeline,
body.dark .rm-review-insights { background: rgba(255,255,255,.035); border-color: rgba(226,196,150,.12); }
.rm-review-list-card h4,
.rm-review-timeline h4,
.rm-review-insights h4 { margin: 0 0 10px; font-size: 1rem; }
.rm-review-list-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rm-review-list-card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(140,110,80,.16);
  border-radius: 17px;
  padding: 10px;
  background: rgba(255,255,255,.34);
}
body.dark .rm-review-list-card li { background: rgba(255,255,255,.025); border-color: rgba(226,196,150,.10); }
.rm-review-list-card li > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(200,149,90,.20);
  background: rgba(200,149,90,.11);
}
.rm-review-list-card li div { min-width: 0; display: grid; gap: 2px; }
.rm-review-list-card li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-review-list-card li small { color: var(--muted); font-weight: 850; }
.rm-review-list-card li b {
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(200,149,90,.12);
  border: 1px solid rgba(200,149,90,.18);
  font-size: .78rem;
}
.rm-review-list-card li.empty { opacity: .78; }
.rm-review-timeline { margin-bottom: 14px; }
.rm-review-timeline > div { display: grid; gap: 9px; }
.rm-timeline-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(140,110,80,.16);
  background: rgba(255,255,255,.36);
}
body.dark .rm-timeline-event { background: rgba(255,255,255,.025); border-color: rgba(226,196,150,.10); }
.rm-timeline-event > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(200,149,90,.22), rgba(255,255,255,.20));
  border: 1px solid rgba(200,149,90,.24);
}
.rm-timeline-event div { min-width: 0; display: grid; gap: 2px; }
.rm-timeline-event small { color: var(--muted); font-weight: 850; }
.rm-timeline-event em {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-style: normal;
  font-size: .78rem;
  font-weight: 950;
  color: var(--accent);
  background: rgba(200,149,90,.12);
}
.rm-review-insights { display: grid; gap: 8px; }
.rm-review-insights p {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-weight: 850;
  line-height: 1.4;
}
.rm-review-insights p span { flex: none; }
@media (max-width: 980px) {
  .rm-task-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rm-task-chart-grid { grid-template-columns: 1fr; }
  .rm-day-review-hero { grid-template-columns: 1fr; }
  .rm-review-snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-review-component-grid,
  .rm-review-task-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rm-task-analytics-card { border-radius: 24px; padding: 14px; }
  .rm-task-metrics-grid,
  .rm-review-snapshot-grid,
  .rm-review-component-grid,
  .rm-review-task-strip,
  .rm-review-two-col { grid-template-columns: 1fr; }
  .rm-day-review-backdrop { padding: 10px; align-items: end; }
  .rm-day-review-modal {
    max-height: 92vh;
    border-radius: 28px 28px 20px 20px;
    padding: 16px;
  }
  .rm-day-review-header { display: grid; padding-right: 0; }
  .rm-review-state { justify-self: start; }
  .rm-day-review-header h3 { font-size: 2.15rem; }
  .rm-day-review-hero { padding: 14px; border-radius: 22px; }
  .rm-review-meter .rm-meter-shell { width: min(276px, 100%); }
  .rm-review-list-card li { grid-template-columns: auto minmax(0, 1fr); }
  .rm-review-list-card li b { grid-column: 2; justify-self: start; }
  .rm-review-list-card li strong { white-space: normal; }
  .rm-timeline-event { grid-template-columns: auto minmax(0, 1fr); }
  .rm-timeline-event em { grid-column: 2; justify-self: start; }
}

/* Accuracy patch: small subtask/stat labels without changing the design system */
.rm-task-metrics-grid em,
.rm-review-task-strip em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
  font-style: normal;
  font-weight: 850;
}
.rm-subtask-history-item > span {
  background: rgba(201, 149, 90, .14);
  border-color: rgba(201, 149, 90, .24);
}
body.dark .rm-subtask-history-item > span {
  background: rgba(217, 160, 94, .14);
  border-color: rgba(217, 160, 94, .22);
}

/* ─────────────────────────────────────────────────────────────
   Premium Habits / Tasks / Water UX refresh
   Visual-only layer: keeps existing data, routing, and persistence intact.
───────────────────────────────────────────────────────────── */
.board-toolbar {
  position: relative;
  z-index: 2;
}
.board-toolbar::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(200,149,90,.08), rgba(255,255,255,.22), rgba(85,189,180,.07));
  border: 1px solid rgba(200,149,90,.10);
  z-index: -1;
  pointer-events: none;
}
body.dark .board-toolbar::before {
  background: linear-gradient(135deg, rgba(200,149,90,.12), rgba(255,255,255,.025), rgba(85,189,180,.08));
  border-color: rgba(226,196,150,.08);
}
.habit-add,
.todo-add {
  align-items: stretch;
}
.habit-add input,
.todo-add input,
.todo-add select,
.quick-input-wrap {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 20px rgba(70,45,25,.05);
}
body.dark .habit-add input,
body.dark .todo-add input,
body.dark .todo-add select,
body.dark .quick-input-wrap {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 24px rgba(0,0,0,.16);
}
.rm-section-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(150px, .45fr) minmax(230px, .8fr);
  gap: 16px;
  align-items: center;
  margin: 14px 0 16px;
  padding: 18px;
  border: 1px solid rgba(200,149,90,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.62), transparent 32%),
    linear-gradient(135deg, rgba(255,248,237,.90), rgba(255,255,255,.74));
  box-shadow: 0 16px 44px rgba(84, 52, 23, .10);
}
.rm-section-hero::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  top: -100px;
  border-radius: 50%;
  background: rgba(200,149,90,.13);
  filter: blur(2px);
  pointer-events: none;
}
body.dark .rm-section-hero {
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.055), transparent 32%),
    linear-gradient(135deg, rgba(39,31,25,.96), rgba(26,23,21,.96));
  border-color: rgba(226,196,150,.12);
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
}
.rm-section-copy { min-width: 0; display: grid; gap: 6px; }
.rm-kicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(200,149,90,.12);
  border: 1px solid rgba(200,149,90,.16);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rm-section-copy h3 {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  letter-spacing: -.02em;
}
.rm-section-copy p {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.45;
}
.rm-section-score,
.rm-task-progress-panel {
  position: relative;
  min-height: 132px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(200,149,90,.14);
}
body.dark .rm-section-score,
body.dark .rm-task-progress-panel { background: rgba(255,255,255,.035); border-color: rgba(226,196,150,.10); }
.rm-section-score strong,
.rm-task-progress-panel strong { font-size: 2rem; font-weight: 950; letter-spacing: -.04em; }
.rm-section-score span,
.rm-task-progress-panel small { color: var(--muted); font-weight: 900; }
.rm-section-ring {
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  background: conic-gradient(var(--accent) var(--score), rgba(200,149,90,.14) 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
          mask: radial-gradient(circle, transparent 58%, #000 60%);
  animation: rmRingIn .7s ease both;
}
@keyframes rmRingIn { from { transform: rotate(-15deg) scale(.94); opacity: .3; } to { transform: rotate(0) scale(1); opacity: 1; } }
.rm-section-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rm-section-stats article {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.46);
  border: 1px solid rgba(200,149,90,.12);
}
body.dark .rm-section-stats article { background: rgba(255,255,255,.03); border-color: rgba(226,196,150,.09); }
.rm-section-stats span { color: var(--muted); font-size: .78rem; font-weight: 900; }
.rm-section-stats strong { font-size: 1.05rem; font-weight: 950; }
.rm-section-heat-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(200,149,90,.10);
  color: var(--muted);
  font-weight: 900;
}
body.dark .rm-section-heat-row { background: rgba(255,255,255,.025); }
.rm-mini-heatmap { display: inline-flex; align-items: center; gap: 5px; }
.rm-heat {
  width: 18px;
  height: 18px;
  border-radius: 7px;
  border: 1px solid rgba(120,85,50,.10);
  background: rgba(136,118,99,.16);
  transform: scale(.94);
  animation: rmHeatPop .45s ease both;
}
.rm-heat.low { background: rgba(239, 122, 82, .26); }
.rm-heat.warm { background: rgba(245, 180, 83, .42); }
.rm-heat.good { background: rgba(102, 194, 130, .52); }
.rm-heat.hot { background: linear-gradient(135deg, rgba(34,197,94,.78), rgba(200,149,90,.45)); box-shadow: 0 0 0 3px rgba(34,197,94,.08); }
.rm-heat.empty { opacity: .52; background: rgba(148,130,112,.12); }
@keyframes rmHeatPop { to { transform: scale(1); } }
.premium-task-row {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  border-color: rgba(200,149,90,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,248,238,.66)),
    var(--panel);
  box-shadow: 0 12px 32px rgba(72, 45, 22, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.premium-task-row::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--accent), rgba(85,189,180,.75));
  opacity: .75;
}
.premium-task-row::after {
  content: '';
  position: absolute;
  inset: auto 14px 0 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,149,90,.24), transparent);
  opacity: .8;
}
.premium-task-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(72,45,22,.12);
  border-color: rgba(200,149,90,.28);
}
body.dark .premium-task-row {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    var(--panel-soft);
  border-color: rgba(226,196,150,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
body.dark .premium-task-row:hover { border-color: rgba(226,196,150,.20); }
.task-title { align-items: center; flex-wrap: wrap; row-gap: 6px; }
.rm-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 950;
  border: 1px solid rgba(200,149,90,.14);
  background: rgba(200,149,90,.10);
  color: var(--accent);
}
.rm-priority-badge.danger { color: #dc2626; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.20); }
.rm-priority-badge.today { color: #b7791f; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.22); }
.rm-priority-badge.soon { color: #0f766e; background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.20); }
.rm-priority-badge.done { color: #16a34a; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.20); }
.rm-priority-badge.soft { color: var(--muted); background: rgba(150,130,110,.10); }
.task-row-progress {
  position: relative;
  overflow: hidden;
  height: 8px;
  margin: 8px 0 2px;
  border-radius: 999px;
  background: rgba(140,110,80,.12);
  border: 1px solid rgba(140,110,80,.08);
}
.task-row-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #66c28d);
  transition: width .35s ease;
}
.habit-card-heat {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 900;
}
.habit-card-heat .rm-heat { width: 14px; height: 14px; border-radius: 5px; }
.subtask-dropdown {
  background: rgba(255,255,255,.30);
  border-color: rgba(200,149,90,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32);
}
body.dark .subtask-dropdown { background: rgba(255,255,255,.025); border-color: rgba(226,196,150,.09); }
.subtask-dropdown summary {
  min-height: 42px;
}
.subtask-dropdown-item {
  border-radius: 14px;
  transition: background .18s ease, transform .18s ease;
}
.subtask-dropdown-item:hover { background: rgba(200,149,90,.08); transform: translateX(2px); }
.task-actions .btn,
.task-actions .icon-btn,
.task-emoji-btn {
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.task-actions .btn:active,
.task-actions .icon-btn:active,
.task-emoji-btn:active { transform: scale(.96); }
.cat-filter-bar {
  padding: 6px;
  border: 1px solid rgba(200,149,90,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.36);
}
body.dark .cat-filter-bar { background: rgba(255,255,255,.025); border-color: rgba(226,196,150,.08); }
.cat-filter-btn,
.cat-add-btn,
.cat-manage-btn {
  min-height: 38px;
  border-radius: 15px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.cat-filter-btn:hover,
.cat-add-btn:hover,
.cat-manage-btn:hover { transform: translateY(-1px); }
.cat-filter-btn.active {
  box-shadow: 0 10px 24px rgba(200,149,90,.16);
}
.rm-task-progress-panel { gap: 6px; overflow: hidden; }
.rm-large-progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(140,110,80,.14);
}
.rm-large-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #64c2b9, #66c28d);
  transition: width .35s ease;
}
.rm-spark {
  width: 100%;
  height: 34px;
  margin-top: 2px;
}
.rm-spark polygon { fill: rgba(200,149,90,.12); }
.rm-spark polyline { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.water-clean-board {
  gap: 16px;
}
.water-clean-card {
  position: relative;
  overflow: hidden;
}
.water-clean-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 10% 0%, rgba(96,165,250,.13), transparent 36%);
  opacity: .75;
}
.rm-hydration-visual {
  --water-fill: 0%;
  position: relative;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin: 16px 0;
  padding: 14px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(255,255,255,.34));
  border: 1px solid rgba(96,165,250,.16);
}
body.dark .rm-hydration-visual { background: linear-gradient(135deg, rgba(96,165,250,.10), rgba(255,255,255,.025)); border-color: rgba(125,190,255,.14); }
.rm-water-orb {
  position: relative;
  width: 122px;
  height: 122px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(96,165,250,.12);
  border: 1px solid rgba(96,165,250,.24);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.42), 0 14px 28px rgba(96,165,250,.12);
}
body.dark .rm-water-orb { box-shadow: inset 0 0 0 10px rgba(255,255,255,.035), 0 16px 30px rgba(0,0,0,.22); }
.rm-water-orb span {
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: 0;
  height: var(--water-fill);
  min-height: 4px;
  border-radius: 45% 45% 0 0;
  background: linear-gradient(180deg, rgba(125,211,252,.85), rgba(59,130,246,.72));
  transition: height .55s cubic-bezier(.2,.8,.2,1);
}
.rm-water-orb span::before,
.rm-water-orb span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -18px;
  width: 150px;
  height: 38px;
  border-radius: 45%;
  background: rgba(255,255,255,.48);
  animation: rmWave 5s ease-in-out infinite;
}
.rm-water-orb span::after { background: rgba(255,255,255,.28); animation-duration: 7s; animation-direction: reverse; }
.rm-water-orb i {
  position: absolute;
  inset: 18px 24px auto auto;
  width: 18px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  transform: rotate(32deg);
}
@keyframes rmWave { 0%,100% { transform: translateX(-50%) translateY(0) rotate(0deg); } 50% { transform: translateX(-42%) translateY(5px) rotate(5deg); } }
.rm-water-orb-copy { display: grid; gap: 4px; }
.rm-water-orb-copy strong { font-size: clamp(1.6rem, 4vw, 2.35rem); font-weight: 950; letter-spacing: -.05em; }
.rm-water-orb-copy small { color: var(--muted); font-weight: 900; }
.rm-hydration-celebration {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 16px;
  color: #15803d;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.20);
  font-weight: 900;
}
body.dark .rm-hydration-celebration { color: #86efac; }
.rm-water-actions-card { display: grid; gap: 12px; }
.rm-water-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.rm-water-preset-grid button {
  min-height: 46px;
  border: 1px solid rgba(96,165,250,.20);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(96,165,250,.12), rgba(255,255,255,.26));
  color: var(--text);
  font-weight: 950;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.rm-water-preset-grid button:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(96,165,250,.14); }
.rm-water-preset-grid button.clicked { animation: rmPresetClick .32s ease; }
@keyframes rmPresetClick { 50% { transform: scale(.96); } }
body.dark .rm-water-preset-grid button { background: rgba(96,165,250,.08); border-color: rgba(125,190,255,.14); color: var(--text); }
.mobile-water-circles { align-items: center; }
.mobile-water-day { transition: transform .16s ease; }
.mobile-water-day:hover { transform: translateY(-2px); }
.mobile-water-circle {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 14px rgba(59,130,246,.10);
}
.mobile-water-circle.filled { animation: rmHydroPulse 2.8s ease-in-out infinite; }
@keyframes rmHydroPulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 0 rgba(59,130,246,.18); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 7px rgba(59,130,246,.06); } }
.completed-section {
  border-radius: 22px;
}
.completed-toggle {
  border-radius: 18px;
  border: 1px solid rgba(200,149,90,.12);
  background: rgba(255,255,255,.36);
}
body.dark .completed-toggle { background: rgba(255,255,255,.025); border-color: rgba(226,196,150,.09); }
.empty-state {
  border: 1px dashed rgba(200,149,90,.24);
  background: linear-gradient(135deg, rgba(200,149,90,.08), rgba(255,255,255,.18));
  border-radius: 24px;
}
body.dark .empty-state { background: rgba(255,255,255,.025); border-color: rgba(226,196,150,.12); }
@media (max-width: 980px) {
  .rm-section-hero {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .rm-section-score,
  .rm-task-progress-panel { min-height: auto; }
  .rm-section-ring { display: none; }
  .rm-section-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-hydration-visual { grid-template-columns: 112px minmax(0, 1fr); }
  .rm-water-orb { width: 104px; height: 104px; }
}
@media (max-width: 640px) {
  .board-toolbar::before { inset: -5px; border-radius: 22px; }
  .rm-section-hero { margin: 12px 0; border-radius: 22px; gap: 12px; }
  .rm-section-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rm-section-stats article { padding: 10px; border-radius: 15px; }
  .rm-section-heat-row { align-items: flex-start; flex-direction: column; }
  .premium-task-row { border-radius: 21px; }
  .premium-task-row:hover { transform: none; }
  .task-title { gap: 6px; }
  .rm-priority-badge { font-size: .68rem; padding: 4px 8px; }
  .habit-card-heat { display: grid; gap: 6px; }
  .rm-hydration-visual {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 12px;
  }
  .rm-water-preset-grid { grid-template-columns: 1fr; }
  .rm-water-preset-grid button { min-height: 44px; }
}

/* === Final polish: slimmer task overview + aligned habit toolbar/manager === */
.habit-add {
  grid-template-columns: minmax(0, 1fr) 154px 100px 124px !important;
  align-items: stretch !important;
}
.habit-add > input,
.habit-add > .quick-input-wrap,
.habit-add > button,
.todo-add > input,
.todo-add > select,
.todo-add > .quick-input-wrap,
.todo-add > button {
  min-height: 56px;
}
.habit-add #addHabitBtn,
.habit-add #manageHabitsBtn {
  height: 56px;
  align-self: stretch;
  white-space: nowrap;
}
.habit-manage-toggle {
  font-weight: 950;
  border-style: solid;
  background: rgba(255,255,255,.46);
}
body.dark .habit-manage-toggle { background: rgba(255,255,255,.035); }

.rm-tasks-hero-slim {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr) minmax(270px, .85fr);
  padding: 14px 18px;
  gap: 14px;
  margin: 12px 0 14px;
}
.rm-tasks-hero-slim .rm-section-copy {
  gap: 8px;
}
.rm-tasks-hero-slim .rm-section-copy h3 {
  font-size: clamp(1.12rem, 1.7vw, 1.42rem);
}
.rm-tasks-hero-slim .rm-task-progress-panel,
.rm-habits-hero-v2 .rm-task-progress-panel {
  min-height: 104px;
  padding: 12px;
}
.rm-tasks-hero-slim .rm-task-progress-panel strong,
.rm-habits-hero-v2 .rm-task-progress-panel strong {
  font-size: 1.85rem;
}
.rm-tasks-hero-slim .rm-section-stats article {
  padding: 10px 12px;
}
.rm-tasks-hero-slim .rm-section-stats span {
  font-size: .74rem;
}
.rm-task-progress-panel .rm-spark,
.rm-task-progress-panel .task-spark {
  display: none !important;
}

.rm-habits-hero-v2 {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .42fr) minmax(270px, .85fr);
  padding: 16px 18px;
}
.rm-habits-hero-v2 .rm-section-score,
.rm-habits-hero-v2 .rm-section-ring {
  display: none !important;
}
.rm-habit-progress-panel .rm-large-progress {
  height: 11px;
}
.rm-habit-progress-panel .rm-large-progress span {
  background: linear-gradient(90deg, var(--accent), #64c2b9, #66c28d);
}
.habit-completed-at {
  color: #16a34a !important;
  font-weight: 900;
}
body.dark .habit-completed-at { color: #86efac !important; }

.habit-manage-panel {
  margin: 10px 0 14px;
}
.habit-manage-list {
  display: grid;
  gap: 10px;
}
.habit-manage-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(200,149,90,.14);
  background: rgba(255,255,255,.56);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
body.dark .habit-manage-row {
  background: rgba(255,255,255,.035);
  border-color: rgba(226,196,150,.10);
}
.habit-manage-row:hover,
.habit-manage-row.drag-over {
  transform: translateY(-1px);
  border-color: rgba(200,149,90,.32);
  background: rgba(200,149,90,.09);
}
.habit-manage-row.dragging { opacity: .6; }
.habit-manage-emoji {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: rgba(200,149,90,.12);
  border: 1px solid rgba(200,149,90,.16);
}
.habit-manage-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 950;
}
.habit-manage-row small {
  color: var(--muted);
  font-weight: 850;
}

@media (max-width: 900px) {
  .rm-tasks-hero-slim,
  .rm-habits-hero-v2 {
    grid-template-columns: 1fr 1fr;
  }
  .rm-tasks-hero-slim .rm-section-copy,
  .rm-habits-hero-v2 .rm-section-copy {
    grid-column: 1 / -1;
  }
  .rm-tasks-hero-slim .rm-section-stats,
  .rm-habits-hero-v2 .rm-section-stats {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .habit-add {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .habit-add #newHabitTitle {
    grid-column: 1 / -1 !important;
  }
  .habit-add .quick-input-wrap {
    grid-column: 1 / -1 !important;
  }
  .habit-add #addHabitBtn,
  .habit-add #manageHabitsBtn {
    grid-column: auto !important;
    width: 100%;
  }
  .rm-tasks-hero-slim,
  .rm-habits-hero-v2 {
    grid-template-columns: 1fr;
    padding: 14px;
    border-radius: 22px;
  }
  .rm-tasks-hero-slim .rm-task-progress-panel,
  .rm-habits-hero-v2 .rm-task-progress-panel {
    min-height: 92px;
  }
  .habit-manage-row {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .habit-manage-row small,
  .habit-manage-row .cat-manage-actions {
    grid-column: 3;
  }
  .habit-manage-row .cat-manage-actions {
    justify-content: start;
  }
}

/* === Cohesive task metadata + task tab arrangement polish === */
.todo-card-row .task-detail-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, max-content));
  gap: 8px;
  align-items: stretch;
  margin-top: 10px;
}
.task-meta-chip {
  min-width: 128px;
  display: inline-grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 16px;
  border: 1px solid rgba(200,149,90,.16);
  background: rgba(255,255,255,.48);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.task-meta-chip i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(200,149,90,.12);
  font-style: normal;
  line-height: 1;
}
.task-meta-chip > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.task-meta-chip em {
  color: var(--muted);
  font-size: .66rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.task-meta-chip strong {
  font-size: .86rem;
  font-weight: 950;
  color: var(--text);
  line-height: 1.15;
}
.task-meta-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.15;
}
.task-meta-chip.time {
  border-color: rgba(200,149,90,.28);
  background: linear-gradient(180deg, rgba(200,149,90,.14), rgba(255,255,255,.42));
}
.task-meta-chip.due.today {
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.12);
}
.task-meta-chip.due.soon {
  border-color: rgba(99,102,241,.26);
  background: rgba(99,102,241,.10);
}
.task-meta-chip.due.overdue {
  border-color: rgba(239,68,68,.30);
  background: rgba(239,68,68,.10);
}
.task-meta-chip.muted {
  border-style: dashed;
  background: rgba(255,255,255,.28);
}
.task-meta-chip.done {
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.10);
}
body.dark .task-meta-chip {
  background: rgba(255,255,255,.035);
  border-color: rgba(226,196,150,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
body.dark .task-meta-chip i { background: rgba(200,149,90,.12); }
body.dark .task-meta-chip.time { background: rgba(200,149,90,.10); border-color: rgba(200,149,90,.24); }
body.dark .task-meta-chip.due.today { background: rgba(245,158,11,.11); border-color: rgba(245,158,11,.25); }
body.dark .task-meta-chip.due.soon { background: rgba(99,102,241,.11); border-color: rgba(167,139,250,.24); }
body.dark .task-meta-chip.due.overdue { background: rgba(239,68,68,.11); border-color: rgba(252,165,165,.24); }
body.dark .task-meta-chip.muted { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.11); }
body.dark .task-meta-chip.done { background: rgba(34,197,94,.10); border-color: rgba(134,239,172,.20); }

.cat-manage-toggle {
  font-weight: 950;
  border-style: solid !important;
  background: rgba(255,255,255,.46) !important;
}
.cat-manage-toggle.active {
  color: #fff !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 10px 24px rgba(200,149,90,.18);
}
body.dark .cat-manage-toggle {
  background: rgba(255,255,255,.035) !important;
}
body.dark .cat-manage-toggle.active {
  color: #1f160d !important;
  background: #d29a55 !important;
  border-color: #d29a55 !important;
}
.cat-manage-panel {
  animation: rmManagerIn .18s ease both;
}
@keyframes rmManagerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cat-manage-head strong::before {
  content: '↕ ';
  color: var(--accent);
}

@media (max-width: 900px) {
  .todo-card-row .task-detail-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-meta-chip {
    min-width: 0;
  }
}
@media (max-width: 640px) {
  .todo-card-row .task-detail-pills {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .task-meta-chip {
    padding: 8px;
    border-radius: 14px;
  }
  .task-meta-chip small {
    white-space: normal;
  }
  .cat-manage-toggle {
    min-width: max-content;
  }
}

/* =========================================================
   FINAL POLISH: alignment, category movement, and focus timer
   - Visual-only except for classes added in app.js
   - Keeps desktop/mobile responsive and uses existing tokens
========================================================= */
.btn,
.icon-btn,
.cat-filter-btn,
.cat-add-btn,
.cat-manage-btn,
.completed-toggle,
.mobile-nav-item,
.tab,
.avatar-tab,
.task-emoji-btn,
.cat-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
}
.btn,
.icon-btn,
.cat-filter-btn,
.cat-add-btn,
.cat-manage-btn,
.completed-toggle,
.cat-mini-btn {
  line-height: 1;
}
.mobile-bottom-nav,
.bottom-nav {
  align-items: center;
  justify-items: center;
}
.mobile-nav-item {
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.mobile-nav-item span,
.mobile-nav-item small,
.nav-label,
.badge,
.chip,
.pill,
.cat-count,
.rm-priority-badge,
.detail-pill,
.task-meta-chip,
.subtask-time,
.subtask-due,
.subtask-category {
  text-align: center;
  line-height: 1.15;
}
.form-group > label,
.quick-input-wrap > span,
.pomodoro-field > span {
  display: block;
  line-height: 1.15;
  letter-spacing: .025em;
}
input,
select,
textarea,
.quick-input-wrap,
.pomodoro-field input,
.pomodoro-field select {
  line-height: 1.2;
}

/* Cleaner task metadata: compact, readable, and not visually noisy. */
.todo-card-row .task-detail-pills {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}
.todo-card-row .task-meta-chip {
  min-width: 0 !important;
  max-width: 100%;
  width: auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow: none;
}
.todo-card-row .task-meta-chip i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: .82rem;
}
.todo-card-row .task-meta-chip > span {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.todo-card-row .task-meta-chip em {
  font-size: .66rem;
  letter-spacing: .035em;
}
.todo-card-row .task-meta-chip strong {
  font-size: .82rem;
  line-height: 1;
  white-space: nowrap;
}
.todo-card-row .task-meta-chip small {
  display: none;
}
.todo-card-row .task-row-progress {
  margin-top: 10px;
  max-width: min(100%, 720px);
}
.subtask-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(200,149,90,.25);
  background: rgba(200,149,90,.10);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
}
body.dark .subtask-category {
  color: rgba(246,238,226,.72);
  background: rgba(200,149,90,.12);
  border-color: rgba(200,149,90,.26);
}

/* Task edit modal: subtask category dropdown is a safe override; blank inherits parent. */
.todo-edit-dialog {
  width: min(94vw, 760px);
}
.edit-subtask-row {
  grid-template-columns: 34px minmax(160px, 1fr) 84px minmax(126px, .75fr) 142px 42px !important;
  gap: 8px;
}
.edit-subtask-row .edit-subtask-category,
.edit-subtask-row .edit-subtask-due,
.edit-subtask-row .edit-subtask-duration,
.edit-subtask-row .edit-subtask-title {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.edit-subtask-row .edit-subtask-category {
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 850;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
}
body.dark .edit-subtask-row .edit-subtask-category {
  background: rgba(255,255,255,.035);
  color: #f6eee2;
  border-color: rgba(226,196,150,.16);
}

/* Cohesive Arrange panel for task tabs to match the Habits rearrange experience. */
.cat-filter-bar .cat-manage-toggle {
  gap: 6px;
  min-height: 42px;
}
.cat-manage-panel {
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,248,239,.48));
  border: 1px solid rgba(200,149,90,.18);
  box-shadow: 0 18px 38px rgba(90,58,28,.08);
}
.cat-manage-head {
  align-items: center;
}
.cat-manage-head strong,
.habit-manage-row,
.cat-manage-row,
.cat-manage-fixed {
  text-align: left;
}
.cat-manage-row,
.habit-manage-row {
  min-height: 60px;
}
.cat-manage-actions {
  align-items: center;
  justify-content: end;
}
body.dark .cat-manage-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  border-color: rgba(226,196,150,.12);
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

/* Premium Pomodoro redesign */
.pomodoro-shell {
  width: min(100%, 980px);
  max-width: 980px;
  margin: 0 auto;
  padding-bottom: clamp(34px, 8vh, 92px);
}
.pomodoro-card-premium,
.pomodoro-focus-dashboard {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(200,149,90,.18);
  background:
    radial-gradient(circle at 10% 0%, rgba(200,149,90,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,248,239,.72));
  box-shadow: 0 24px 60px rgba(86,54,25,.10), inset 0 1px 0 rgba(255,255,255,.62);
}
.pomodoro-card-premium::after,
.pomodoro-focus-dashboard::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -90px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: rgba(200,149,90,.10);
  pointer-events: none;
}
.pomodoro-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.pomodoro-card-head h3 {
  margin: 4px 0 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.1;
}
.pomodoro-live-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(200,149,90,.22);
  background: rgba(255,255,255,.62);
  color: var(--muted);
  font-weight: 950;
  font-size: .78rem;
  white-space: nowrap;
}
.pomodoro-form-grid-premium {
  position: relative;
  z-index: 1;
}
.pomodoro-field {
  align-content: start;
}
.pomodoro-field input,
.pomodoro-field select {
  min-height: 54px;
  border-radius: 17px;
}
.pomodoro-plan-strip-premium {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  z-index: 1;
}
.pomodoro-focus-dashboard {
  display: grid;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 42px);
  align-items: center;
  padding: clamp(22px, 4vw, 34px);
}
.premium-focus-ring {
  --pomodoro-pct: 0;
  width: clamp(220px, 24vw, 280px);
  height: clamp(220px, 24vw, 280px);
  padding: 12px;
  border: 0;
  background:
    conic-gradient(from -90deg, var(--accent) calc(var(--pomodoro-pct) * 1%), rgba(200,149,90,.16) 0),
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.98), rgba(255,246,234,.88));
  box-shadow: 0 22px 54px rgba(86,54,25,.16), inset 0 0 0 1px rgba(200,149,90,.22);
  animation: focusRingBreath 4.8s ease-in-out infinite;
}
.pomodoro-ring-core {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.88), rgba(255,248,239,.94));
  box-shadow: inset 0 0 0 1px rgba(200,149,90,.14), inset 0 10px 30px rgba(200,149,90,.08);
  text-align: center;
}
.pomodoro-clock,
.pomodoro-phase,
.pomodoro-selected,
.pomodoro-progress-text,
.pomodoro-mini-status {
  text-align: left;
}
.pomodoro-ring-core .pomodoro-clock,
.pomodoro-ring-core .pomodoro-phase {
  text-align: center;
}
.pomodoro-clock {
  font-size: clamp(3rem, 5.8vw, 4.45rem);
  letter-spacing: -.07em;
}
.pomodoro-session-info {
  position: relative;
  z-index: 1;
  gap: 12px;
}
.pomodoro-selected {
  font-size: clamp(1.25rem, 2.3vw, 1.8rem);
  line-height: 1.12;
  white-space: normal;
}
.pomodoro-progress-track {
  height: 12px;
  border-radius: 999px;
}
.pomodoro-focus-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-weight: 850;
}
.pomodoro-mini-status {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(200,149,90,.18);
  background: rgba(255,255,255,.42);
  font-size: .78rem;
  white-space: nowrap;
}
.pomodoro-actions-premium {
  margin-top: 4px;
}
.pomodoro-actions-premium .btn {
  min-height: 48px;
  border-radius: 16px;
}
@keyframes focusRingBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}
body.dark .pomodoro-card-premium,
body.dark .pomodoro-focus-dashboard {
  background:
    radial-gradient(circle at 10% 0%, rgba(200,149,90,.14), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border-color: rgba(226,196,150,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
body.dark .pomodoro-live-pill,
body.dark .pomodoro-mini-status {
  background: rgba(255,255,255,.045);
  border-color: rgba(226,196,150,.13);
  color: rgba(246,238,226,.72);
}
body.dark .premium-focus-ring {
  background:
    conic-gradient(from -90deg, #d29a55 calc(var(--pomodoro-pct) * 1%), rgba(226,196,150,.12) 0),
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.10), rgba(255,255,255,.025));
  box-shadow: 0 22px 54px rgba(0,0,0,.28), inset 0 0 0 1px rgba(226,196,150,.12);
}
body.dark .pomodoro-ring-core {
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(226,196,150,.11), inset 0 10px 30px rgba(0,0,0,.16);
}

@media (max-width: 980px) {
  .edit-subtask-row {
    grid-template-columns: 30px minmax(0, 1fr) 78px 38px !important;
  }
  .edit-subtask-row .edit-subtask-category,
  .edit-subtask-row .edit-subtask-due {
    grid-column: 2 / 4;
  }
  .edit-subtask-row .edit-subtask-remove { grid-column: 4; grid-row: 1; }
  .pomodoro-focus-dashboard {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .pomodoro-ring-wrap { justify-items: center; }
  .pomodoro-session-info .rm-kicker,
  .pomodoro-selected,
  .pomodoro-progress-text,
  .pomodoro-mini-status {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .pomodoro-shell {
    width: 100%;
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
  .pomodoro-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .pomodoro-live-pill { width: 100%; }
  .pomodoro-plan-strip-premium { grid-template-columns: 1fr; }
  .premium-focus-ring {
    width: min(74vw, 245px);
    height: min(74vw, 245px);
  }
  .pomodoro-focus-row {
    flex-direction: column;
    justify-content: center;
  }
  .pomodoro-mini-status { width: 100%; }
  .pomodoro-actions-premium { grid-template-columns: 1fr; }
  .todo-card-row .task-detail-pills {
    gap: 6px;
  }
  .todo-card-row .task-meta-chip {
    padding: 7px 9px;
  }
}
@media (max-width: 520px) {
  .edit-subtask-row {
    grid-template-columns: 28px minmax(0, 1fr) 38px !important;
  }
  .edit-subtask-row .edit-subtask-duration,
  .edit-subtask-row .edit-subtask-category,
  .edit-subtask-row .edit-subtask-due {
    grid-column: 2 / 3;
  }
  .edit-subtask-row .edit-subtask-remove { grid-column: 3; grid-row: 1; }
  .todo-card-row .task-meta-chip em { display: none; }
}


/* === Final polish: remove habit weekly rhythm row + decorative corner blobs === */
/* Habit weekly rhythm UI was removed from cards for a cleaner habit list. */
.habit-card-heat {
  display: none !important;
}

/* Remove the large decorative semi-circle corner overlays from premium cards while
   keeping the warm gradients, borders, shadows, and layout intact. */
.rm-section-hero::after,
.pomodoro-card-premium::after,
.pomodoro-focus-dashboard::after {
  content: none !important;
  display: none !important;
}

/* ════════════════════════════════════════
   RM5 FINAL PRODUCT POLISH PATCH
   Calendar, shop previews, bottom dock, Pomodoro, water/gauge cleanup
════════════════════════════════════════ */
:root {
  --rm-nav-height: 76px;
  --rm-dock-bottom: 18px;
}
.page.dashboard {
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
}
.mobile-bottom-nav {
  display: grid !important;
  position: fixed !important;
  left: 50% !important;
  bottom: calc(var(--rm-dock-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  z-index: 80 !important;
  width: min(900px, calc(100vw - 32px)) !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: clamp(5px, 1vw, 10px) !important;
  padding: 9px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(200,149,90,.22) !important;
  background: rgba(255, 251, 244, .88) !important;
  box-shadow: 0 22px 60px rgba(80,50,20,.22), inset 0 1px 0 rgba(255,255,255,.70) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  overflow: visible !important;
}
.mobile-nav-item {
  min-width: 0 !important;
  height: 58px !important;
  padding: 7px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 19px !important;
  background: transparent !important;
  color: var(--muted) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.mobile-nav-item span,
.mobile-nav-item small {
  width: 100% !important;
  text-align: center !important;
  line-height: 1 !important;
}
.mobile-nav-item span { font-size: 1.08rem !important; }
.mobile-nav-item small { font-size: .66rem !important; letter-spacing: .01em !important; }
.mobile-nav-item:hover,
.mobile-nav-item:focus-visible {
  transform: translateY(-2px) !important;
  background: rgba(200,149,90,.10) !important;
  border-color: rgba(200,149,90,.16) !important;
  outline: none !important;
}
.mobile-nav-item.active {
  min-width: 0 !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: var(--accent-text) !important;
  border-color: rgba(255,255,255,.26) !important;
  box-shadow: 0 14px 28px rgba(200,149,90,.30), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body.dark .mobile-bottom-nav,
body.theme-navy .mobile-bottom-nav {
  background: rgba(18, 15, 13, .88) !important;
  border-color: rgba(226,196,150,.16) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.theme-pink .mobile-bottom-nav {
  background: rgba(255, 245, 250, .90) !important;
  border-color: rgba(232,118,165,.24) !important;
}
@media (max-width: 700px) {
  .page.dashboard { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important; }
  .mobile-bottom-nav {
    width: min(96vw, 456px) !important;
    gap: 4px !important;
    padding: 7px !important;
    border-radius: 24px !important;
  }
  .mobile-nav-item {
    height: 52px !important;
    padding: 6px 2px !important;
    border-radius: 16px !important;
  }
  .mobile-nav-item span { font-size: .94rem !important; }
  .mobile-nav-item small { font-size: clamp(.48rem, 2.35vw, .58rem) !important; }
}
@media (max-width: 370px) {
  .mobile-bottom-nav { width: calc(100vw - 12px) !important; gap: 2px !important; padding: 6px !important; }
  .mobile-nav-item { height: 50px !important; }
  .mobile-nav-item span { font-size: .86rem !important; }
  .mobile-nav-item small { font-size: .45rem !important; }
}

/* Home weekly calendar */
.rm-home-calendar-card {
  position: relative;
  overflow: hidden;
  padding: clamp(16px, 2.4vw, 24px);
  margin: 18px 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(200,149,90,.15), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,248,239,.74));
}
body.dark .rm-home-calendar-card,
body.theme-navy .rm-home-calendar-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(200,149,90,.12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border-color: rgba(226,196,150,.13);
}
body.theme-pink .rm-home-calendar-card {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,240,248,.72));
  border-color: rgba(232,118,165,.18);
}
.rm-weekly-calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.rm-weekly-calendar-head h3 {
  margin: 5px 0 4px;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  letter-spacing: -.02em;
}
.rm-weekly-calendar-head p {
  color: var(--muted);
  font-weight: 850;
  line-height: 1.4;
}
.rm-weekly-calendar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.rm-weekly-calendar-controls .btn {
  min-height: 36px;
  border-radius: 14px;
}
.rm-weekly-overdue-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(239,68,68,.20);
  border-radius: 16px;
  background: rgba(239,68,68,.10);
  color: #b91c1c;
  font-weight: 900;
}
.rm-weekly-overdue-strip span {
  min-width: 0;
  color: var(--text);
  opacity: .82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dark .rm-weekly-overdue-strip,
body.theme-navy .rm-weekly-overdue-strip { color: #fca5a5; background: rgba(239,68,68,.09); }
.rm-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}
.rm-week-day {
  min-width: 0;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(200,149,90,.14);
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36);
}
.rm-week-day.today {
  border-color: rgba(200,149,90,.45);
  background: linear-gradient(180deg, rgba(200,149,90,.16), rgba(255,255,255,.44));
  box-shadow: 0 12px 28px rgba(200,149,90,.12), inset 0 1px 0 rgba(255,255,255,.45);
}
.rm-week-day.past:not(.today) { opacity: .86; }
body.dark .rm-week-day,
body.theme-navy .rm-week-day { background: rgba(255,255,255,.035); border-color: rgba(226,196,150,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.rm-week-day header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 8px;
  margin-bottom: 8px;
}
.rm-week-day header span { color: var(--muted); font-size: .76rem; font-weight: 950; text-transform: uppercase; letter-spacing: .04em; }
.rm-week-day header strong { font-size: 1.2rem; font-weight: 1000; line-height: 1; }
.rm-week-day header em {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-width: 34px;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(200,149,90,.11);
  text-align: center;
  font-style: normal;
  font-weight: 950;
  font-size: .72rem;
}
.rm-week-day-list { display: grid; gap: 7px; }
.rm-week-task {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
  text-align: left;
  padding: 8px;
  border: 1px solid rgba(200,149,90,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.50);
  color: var(--text);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.rm-week-task:hover { transform: translateY(-1px); border-color: rgba(200,149,90,.30); background: rgba(200,149,90,.08); }
.rm-week-task span { grid-row: 1 / span 2; }
.rm-week-task b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 950;
}
.rm-week-task small { color: var(--muted); font-size: .68rem; font-weight: 850; }
.rm-week-task.done { opacity: .65; text-decoration: line-through; }
.rm-week-task.overdue { border-color: rgba(239,68,68,.24); background: rgba(239,68,68,.08); }
.rm-week-task.overdue small { color: #dc2626; }
body.dark .rm-week-task,
body.theme-navy .rm-week-task { background: rgba(255,255,255,.035); border-color: rgba(226,196,150,.09); }
.rm-week-empty,
.rm-week-more {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(200,149,90,.16);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(150,130,110,.06);
  font-weight: 900;
  font-size: .74rem;
  text-align: center;
}
.rm-week-more { cursor: pointer; color: var(--accent); }
@media (max-width: 980px) {
  .rm-week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .rm-weekly-calendar-head { flex-direction: column; }
  .rm-weekly-calendar-controls { width: 100%; justify-content: stretch; }
  .rm-weekly-calendar-controls .btn { flex: 1 1 auto; }
  .rm-week-grid { grid-template-columns: 1fr; }
  .rm-week-day { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }
  .rm-week-day header { margin: 0; align-content: start; }
  .rm-week-day-list { min-width: 0; }
}

/* Shop previews */
.rm-shop-preview-banner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(59,130,246,.22);
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(200,149,90,.10));
  font-weight: 900;
}
.rm-shop-preview-banner > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.shop-grid-polished { align-items: stretch; }
.shop-item-previewing { outline: 2px solid rgba(59,130,246,.35); box-shadow: 0 18px 42px rgba(59,130,246,.16) !important; }
.shop-item-action-polished { display: grid; gap: 8px; min-width: 120px; }
.shop-preview-btn { min-height: 38px; border-radius: 14px; }
.shop-visual-preview {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.shop-visual-preview span {
  width: 34px;
  height: 20px;
  border-radius: 9px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.shop-gauge-preview {
  position: relative;
  width: 72px;
  height: 38px;
  margin-top: 10px;
  border-radius: 72px 72px 12px 12px;
  overflow: hidden;
  background: conic-gradient(from 220deg, var(--accent) 0 62%, rgba(200,149,90,.16) 0 100%);
  border: 1px solid rgba(200,149,90,.20);
}
.shop-gauge-preview span {
  position: absolute;
  inset: 10px 12px 0;
  border-radius: 60px 60px 10px 10px;
  background: var(--panel);
}
.shop-gauge-preview i {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left center;
  transform: rotate(-18deg);
}
.shop-gauge-preview b {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent);
}
body.rm-shop-previewing::before {
  content: 'Preview mode';
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 120;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(59,130,246,.90);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(37,99,235,.28);
  pointer-events: none;
}
@media (max-width: 640px) {
  .rm-shop-preview-banner { align-items: stretch; flex-direction: column; }
  .rm-shop-preview-banner > div { justify-content: stretch; }
  .rm-shop-preview-banner .btn { flex: 1; }
  .shop-item-action-polished { width: 100%; }
}

/* Pomodoro cleanup */
.rm5-pomodoro-shell { max-width: 980px; }
.pomodoro-helper-text {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}
.pomodoro-apply-plan {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  min-height: 46px;
  border-radius: 16px;
}
.premium-focus-ring,
body.dark .premium-focus-ring,
body.theme-navy .premium-focus-ring,
body.theme-pink .premium-focus-ring {
  border: 0 !important;
  background:
    conic-gradient(from -90deg, var(--accent) calc(var(--pomodoro-pct) * 1%), rgba(200,149,90,.14) 0) !important;
  padding: 12px !important;
}
.pomodoro-ring-core,
body.dark .pomodoro-ring-core,
body.theme-navy .pomodoro-ring-core,
body.theme-pink .pomodoro-ring-core {
  background: var(--panel) !important;
  box-shadow: inset 0 0 0 1px rgba(200,149,90,.16), inset 0 10px 28px rgba(200,149,90,.06) !important;
}
.pomodoro-clock,
.pomodoro-phase { width: 100%; text-align: center !important; }
.pomodoro-focus-dashboard { overflow: hidden !important; }
.pomodoro-card-premium::after,
.pomodoro-focus-dashboard::after { content: none !important; display: none !important; }

/* Water gauge cleanup + purchasable gauge effects */
.rm-water-orb i,
.liquid-tank::after,
.rm-hydration-visual::after {
  display: none !important;
  content: none !important;
}
.rm-water-orb {
  box-shadow: inset 0 0 0 8px rgba(255,255,255,.32), 0 14px 28px rgba(96,165,250,.12) !important;
}
.gauge-cyberpunk .premium-focus-ring,
.gauge-cyberpunk .rm-water-orb,
.gauge-cyberpunk .progress-bar,
.gauge-cyberpunk .water-clean-progress span {
  --accent: #22d3ee;
  --accent-2: #a855f7;
}
.gauge-cyberpunk .rm-water-orb {
  border-color: rgba(34,211,238,.42) !important;
  background: radial-gradient(circle at 50% 30%, rgba(168,85,247,.16), rgba(34,211,238,.08)) !important;
  box-shadow: 0 0 28px rgba(34,211,238,.18), inset 0 0 0 8px rgba(34,211,238,.05) !important;
}
.gauge-cyberpunk .rm-water-orb span { background: linear-gradient(180deg, rgba(34,211,238,.90), rgba(168,85,247,.72)) !important; }
.gauge-digital .premium-focus-ring,
.gauge-digital .rm-water-orb,
.gauge-digital .progress-bar,
.gauge-digital .water-clean-progress span {
  --accent: #10b981;
  --accent-2: #6ee7b7;
}
.gauge-digital .rm-water-orb {
  border-radius: 28px !important;
  border-color: rgba(16,185,129,.35) !important;
  background: linear-gradient(180deg, rgba(16,185,129,.12), rgba(255,255,255,.20)) !important;
}
.gauge-digital .rm-water-orb span { border-radius: 16px 16px 0 0 !important; background: linear-gradient(180deg, rgba(110,231,183,.88), rgba(16,185,129,.74)) !important; }
.gauge-oldcar .premium-focus-ring,
.gauge-oldcar .rm-water-orb,
.gauge-oldcar .progress-bar,
.gauge-oldcar .water-clean-progress span {
  --accent: #b7793f;
  --accent-2: #f2c078;
}
.gauge-oldcar .rm-water-orb {
  background: radial-gradient(circle at 50% 35%, #fff8e7, #f3dfb9) !important;
  border: 2px solid rgba(113,74,36,.45) !important;
  box-shadow: inset 0 0 0 8px rgba(113,74,36,.08), 0 14px 28px rgba(113,74,36,.14) !important;
}
.gauge-oldcar .rm-water-orb span { background: linear-gradient(180deg, rgba(102,178,214,.78), rgba(35,113,157,.70)) !important; }

/* ════════════════════════════════════════
   RM6 follow-up fixes
   - robust long-subtask editor rows
   - Home-only weekly calendar
   - Stats-only gauge preview panel
   - truly clean Pomodoro timer ring
════════════════════════════════════════ */
.dashboard:not([data-mobile-view="home"]) #homeWeeklyCalendarCard,
#homeWeeklyCalendarCard.hidden {
  display: none !important;
}

/* Make the task edit modal wide enough for category + date controls and prevent row overflow. */
#todoEditOverlay {
  justify-content: center !important;
  align-items: flex-start !important;
  overflow-x: hidden !important;
}
#todoEditOverlay .todo-edit-dialog {
  width: min(94vw, 860px) !important;
  max-width: 860px !important;
  overflow-x: hidden !important;
}
#todoEditOverlay .form-grid-3 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(160px, .9fr) !important;
}
#todoEditOverlay .subtask-editor {
  max-width: 100% !important;
  overflow: hidden !important;
}
#todoEditOverlay .subtask-editor-head {
  align-items: flex-start !important;
}
#todoEditOverlay .subtask-editor-head .muted {
  text-align: right;
  max-width: 440px;
}
#todoEditOverlay .edit-subtask-list {
  max-width: 100% !important;
  overflow: visible !important;
}
#todoEditOverlay .edit-subtask-row {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 2fr) 86px minmax(112px, .95fr) 154px 40px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#todoEditOverlay .edit-subtask-row .edit-subtask-title,
#todoEditOverlay .edit-subtask-row .edit-subtask-duration,
#todoEditOverlay .edit-subtask-row .edit-subtask-category,
#todoEditOverlay .edit-subtask-row .edit-subtask-due {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 46px !important;
  box-sizing: border-box !important;
}
#todoEditOverlay .edit-subtask-row .edit-subtask-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#todoEditOverlay .edit-subtask-row .edit-subtask-duration {
  text-align: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#todoEditOverlay .edit-subtask-row .edit-subtask-category {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
#todoEditOverlay .edit-subtask-row .edit-subtask-remove {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  justify-self: end !important;
}
@media (max-width: 900px) {
  #todoEditOverlay .todo-edit-dialog {
    width: min(96vw, 720px) !important;
  }
  #todoEditOverlay .form-grid-3 {
    grid-template-columns: 1fr !important;
  }
  #todoEditOverlay .subtask-editor-head {
    display: grid !important;
    gap: 4px !important;
  }
  #todoEditOverlay .subtask-editor-head .muted {
    max-width: none !important;
    text-align: left !important;
  }
  #todoEditOverlay .edit-subtask-row {
    grid-template-columns: 30px minmax(0, 1fr) 82px 40px !important;
    padding: 10px !important;
    border: 1px solid rgba(200,149,90,.14) !important;
    border-radius: 18px !important;
    background: rgba(200,149,90,.045) !important;
  }
  #todoEditOverlay .edit-subtask-row .edit-subtask-category,
  #todoEditOverlay .edit-subtask-row .edit-subtask-due {
    grid-column: 2 / 5 !important;
  }
  #todoEditOverlay .edit-subtask-row .edit-subtask-remove {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }
}
@media (max-width: 560px) {
  #todoEditOverlay {
    padding: 10px 10px calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #todoEditOverlay .todo-edit-dialog {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }
  #todoEditOverlay .edit-subtask-row {
    grid-template-columns: 28px minmax(0, 1fr) 40px !important;
  }
  #todoEditOverlay .edit-subtask-row .edit-subtask-duration,
  #todoEditOverlay .edit-subtask-row .edit-subtask-category,
  #todoEditOverlay .edit-subtask-row .edit-subtask-due {
    grid-column: 2 / 4 !important;
  }
  #todoEditOverlay .edit-subtask-row .edit-subtask-remove {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}

/* Calendar: compact cards only show 3 items; expand controls appear only when a day has >3 items. */
.rm-week-grid.collapsed .rm-week-task:nth-of-type(n+4) {
  display: none !important;
}
.rm-week-day header {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}
.rm-week-day header span:nth-of-type(2) {
  display: none !important;
}

/* Shop gauge previews: show real stat meter samples locally instead of recoloring the page. */
.rm-gauge-preview-panel {
  margin: 14px 0 18px;
  padding: clamp(14px, 2vw, 20px);
  border-radius: 24px;
  border: 1px solid rgba(200,149,90,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,248,239,.42));
  box-shadow: 0 18px 44px rgba(80,50,20,.08);
}
body.dark .rm-gauge-preview-panel,
body.theme-navy .rm-gauge-preview-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border-color: rgba(226,196,150,.13);
}
.rm-gauge-preview-copy {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}
.rm-gauge-preview-copy h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}
.rm-gauge-preview-copy p {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.4;
}
.rm-gauge-preview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.rm-gauge-preview-panel.gauge-cyberpunk .meter-gauge-card,
.rm-gauge-preview-panel.gauge-digital .meter-gauge-card,
.rm-gauge-preview-panel.gauge-oldcar .meter-gauge-card {
  min-height: 214px !important;
}
@media (max-width: 760px) {
  .rm-gauge-preview-grid { grid-template-columns: 1fr !important; }
}

/* Gauge purchases/previews are not app themes: keep generic app progress bars in the active theme. */
.gauge-cyberpunk .xp-wrap .progress-bar,
.gauge-digital .xp-wrap .progress-bar,
.gauge-oldcar .xp-wrap .progress-bar,
.gauge-cyberpunk .car-build-bar span,
.gauge-digital .car-build-bar span,
.gauge-oldcar .car-build-bar span {
  --accent: #c8955a !important;
  --accent-2: #f0c987 !important;
}
body.theme-navy.gauge-cyberpunk .xp-wrap .progress-bar,
body.theme-navy.gauge-digital .xp-wrap .progress-bar,
body.theme-navy.gauge-oldcar .xp-wrap .progress-bar {
  --accent: #38bdf8 !important;
  --accent-2: #14b8a6 !important;
}
body.theme-pink.gauge-cyberpunk .xp-wrap .progress-bar,
body.theme-pink.gauge-digital .xp-wrap .progress-bar,
body.theme-pink.gauge-oldcar .xp-wrap .progress-bar {
  --accent: #e85597 !important;
  --accent-2: #ff9fc9 !important;
}

/* Clean Pomodoro ring: no central pill/oval, no decorative pseudo-shapes. */
.premium-focus-ring,
body.dark .premium-focus-ring,
body.theme-navy .premium-focus-ring,
body.theme-pink .premium-focus-ring {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(200,149,90,.18) !important;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(255,255,255,.08) 61% 62%, transparent 63%),
    conic-gradient(from -90deg, var(--accent) calc(var(--pomodoro-pct) * 1%), rgba(200,149,90,.16) 0) !important;
}
.premium-focus-ring::before,
.premium-focus-ring::after,
.pomodoro-ring-core::before,
.pomodoro-ring-core::after {
  content: none !important;
  display: none !important;
}
.pomodoro-ring-core,
body.dark .pomodoro-ring-core,
body.theme-navy .pomodoro-ring-core,
body.theme-pink .pomodoro-ring-core {
  position: absolute !important;
  inset: 14px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: linear-gradient(160deg, rgba(255,248,239,.96), rgba(244,229,207,.92)) !important;
  box-shadow: inset 0 0 0 1px rgba(200,149,90,.14), inset 0 12px 30px rgba(200,149,90,.06) !important;
}
body.dark .pomodoro-ring-core,
body.theme-navy .pomodoro-ring-core {
  background: linear-gradient(160deg, rgba(35,30,27,.96), rgba(18,16,15,.96)) !important;
  box-shadow: inset 0 0 0 1px rgba(226,196,150,.11), inset 0 12px 30px rgba(0,0,0,.16) !important;
}
body.theme-pink .pomodoro-ring-core {
  background: linear-gradient(160deg, rgba(255,246,250,.98), rgba(255,232,242,.94)) !important;
}
.pomodoro-ring-core .pomodoro-clock,
.pomodoro-ring-core .pomodoro-phase {
  max-width: 88% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.pomodoro-ring-core .pomodoro-clock {
  letter-spacing: -.06em !important;
}


/* RM7 water quick amount polish */
.rm-water-preset-grid.rm-water-preset-grid-six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rm-theme-select-grid-single {
  grid-template-columns: minmax(0, 1fr) !important;
}
@media (max-width: 560px) {
  .rm-water-preset-grid.rm-water-preset-grid-six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* TASK STAR / CLEAN TASK UI PATCH */
.todo-add.todo-add-clean {
  grid-template-columns: minmax(240px, 1.25fr) minmax(135px, .55fr) minmax(160px, .65fr) auto !important;
  align-items: stretch !important;
  gap: 12px !important;
}
.todo-add-actions {
  display: inline-flex;
  align-items: stretch;
  gap: 10px;
  min-width: max-content;
}
.todo-add-actions .btn,
.todo-add-actions .cat-manage-btn {
  height: 100%;
  min-height: 52px;
  white-space: nowrap;
}
.todo-add-actions .cat-manage-toggle.active {
  background: rgba(200,149,90,.18);
  border-color: rgba(200,149,90,.38);
  color: var(--accent);
  box-shadow: 0 12px 24px rgba(200,149,90,.12);
}
.todo-card-row .task-left {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0 !important;
}
.todo-card-row .task-meta {
  min-width: 0;
  width: 100%;
}
.todo-card-row .task-title-main {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.todo-card-row.starred::before {
  background: linear-gradient(180deg, #f8c85d, var(--accent));
  opacity: .95;
}
.task-star-btn {
  font-size: 1.08rem !important;
  color: var(--muted) !important;
  background: rgba(255,255,255,.38) !important;
}
.task-star-btn.active,
.task-star-btn:hover,
.task-star-btn:focus-visible {
  color: #d99a22 !important;
  background: rgba(248,200,93,.18) !important;
  border-color: rgba(248,200,93,.38) !important;
  box-shadow: 0 10px 24px rgba(248,200,93,.14);
}
body.dark .task-star-btn {
  background: rgba(255,255,255,.04) !important;
}
body.dark .task-star-btn.active,
body.dark .task-star-btn:hover,
body.dark .task-star-btn:focus-visible {
  color: #ffd36b !important;
  background: rgba(248,200,93,.14) !important;
}
.starred-filter-btn.active {
  border-color: rgba(248,200,93,.42) !important;
  box-shadow: 0 12px 24px rgba(248,200,93,.12) !important;
}
.rm-total-left-card {
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 16px;
  border: 1px solid rgba(200,149,90,.16);
  background: rgba(200,149,90,.075);
  display: grid;
  gap: 2px;
  text-align: center;
}
.rm-total-left-card span {
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rm-total-left-card strong {
  font-size: 1.08rem !important;
  line-height: 1.1;
  color: var(--text);
}
.rm-total-left-card small {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}
body.dark .rm-total-left-card {
  background: rgba(226,196,150,.07);
  border-color: rgba(226,196,150,.12);
}
#todoEditOverlay .subtask-editor-head .muted {
  max-width: 540px !important;
}
#todoEditOverlay .edit-subtask-row {
  grid-template-columns: 32px minmax(0, 2fr) 82px minmax(120px, .95fr) minmax(132px, .9fr) 40px !important;
  gap: 9px !important;
}
#todoEditOverlay .edit-subtask-row .edit-subtask-title {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#todoEditOverlay .edit-subtask-row:focus-within .edit-subtask-title {
  white-space: normal !important;
}
#todoEditOverlay .edit-subtask-row .edit-subtask-category,
#todoEditOverlay .edit-subtask-row .edit-subtask-due {
  min-width: 0 !important;
}
@media (max-width: 1040px) {
  .todo-add.todo-add-clean {
    grid-template-columns: minmax(0, 1fr) minmax(130px, .5fr) minmax(150px, .55fr) !important;
  }
  .todo-add-actions {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .todo-add-actions .btn,
  .todo-add-actions .cat-manage-btn {
    flex: 1 1 0;
  }
}
@media (max-width: 760px) {
  .todo-add.todo-add-clean {
    grid-template-columns: 1fr 1fr !important;
  }
  .todo-add.todo-add-clean #newTodoTitle,
  .todo-add.todo-add-clean .todo-add-actions {
    grid-column: 1 / -1 !important;
  }
  .todo-add.todo-add-clean .quick-input-wrap,
  .todo-add.todo-add-clean #newTodoDuration,
  .todo-add.todo-add-clean #newTodoDueDate {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .todo-add-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .premium-task-row.todo-card-row {
    padding-left: 18px;
  }
  .task-actions {
    gap: 8px !important;
  }
  #todoEditOverlay .edit-subtask-row {
    grid-template-columns: 30px minmax(0, 1fr) 76px 40px !important;
  }
  #todoEditOverlay .edit-subtask-row .edit-subtask-category,
  #todoEditOverlay .edit-subtask-row .edit-subtask-due {
    grid-column: 2 / 5 !important;
  }
}
@media (max-width: 520px) {
  .todo-add.todo-add-clean {
    grid-template-columns: 1fr !important;
  }
  .todo-add.todo-add-clean #newTodoTitle,
  .todo-add.todo-add-clean .quick-input-wrap,
  .todo-add.todo-add-clean .todo-add-actions,
  .todo-add.todo-add-clean #addTodoBtn {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .todo-add-actions {
    grid-template-columns: 1fr !important;
  }
  .todo-add-actions .btn,
  .todo-add-actions .cat-manage-btn {
    width: 100%;
  }
  .task-star-btn {
    order: -5;
  }
  #todoEditOverlay .edit-subtask-row {
    grid-template-columns: 28px minmax(0, 1fr) 38px !important;
  }
  #todoEditOverlay .edit-subtask-row .edit-subtask-duration,
  #todoEditOverlay .edit-subtask-row .edit-subtask-category,
  #todoEditOverlay .edit-subtask-row .edit-subtask-due {
    grid-column: 2 / 4 !important;
  }
  #todoEditOverlay .edit-subtask-row .edit-subtask-remove {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}

/* RM8 Tasks difficulty, organizer, daily XP, and mobile polish */
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
}
.difficulty-easy { color: #bbf7d0; background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.35); }
.difficulty-medium { color: #fde68a; background: rgba(201,149,90,.18); border-color: rgba(201,149,90,.42); }
.difficulty-hard { color: #fed7aa; background: rgba(249,115,22,.16); border-color: rgba(249,115,22,.38); }
.difficulty-veryHard { color: #fecaca; background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.40); }
body:not(.dark):not(.theme-navy):not(.theme-pink):not(.theme-glass) .difficulty-badge { color: #3b2a1f; }
.task-organizer-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.task-organizer-bar label,
.todo-add .quick-input-wrap,
.task-edit-grid .form-group {
  min-width: 0;
}
.task-organizer-bar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.task-organizer-bar select,
.todo-add select,
.todo-edit-dialog select {
  width: 100%;
  min-width: 0;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 0 12px;
  font-weight: 800;
  outline: none;
}
.task-organizer-bar select:focus,
.todo-add select:focus,
.todo-edit-dialog select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,149,90,.16);
}
.todo-add.todo-add-clean {
  grid-template-columns: minmax(180px, 1.3fr) minmax(130px,.75fr) minmax(120px,.65fr) minmax(150px,.8fr) auto;
  align-items: end;
}
.todo-add-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  min-width: 190px;
}
.todo-add-actions .btn { min-height: 44px; }
.form-grid-4.task-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.premium-task-row .task-title {
  flex-wrap: wrap;
  gap: 8px;
}
.premium-task-row .task-left,
.premium-task-row .task-meta { min-width: 0; }
.premium-task-row .task-title-main {
  min-width: 0;
  overflow-wrap: anywhere;
}
.premium-task-row .task-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.daily-xp-cap-note {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(201,149,90,.14);
  border: 1px solid rgba(201,149,90,.25);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.overlay .todo-edit-dialog {
  max-width: min(760px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
  overflow: auto;
}
.edit-subtask-row {
  grid-template-columns: 34px minmax(150px, 1fr) 86px minmax(130px,.75fr) 145px 42px;
  align-items: center;
  min-width: 0;
}
.edit-subtask-row > * { min-width: 0; }
.edit-subtask-title { overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .todo-add.todo-add-clean { grid-template-columns: 1fr 1fr; }
  .todo-add.todo-add-clean #newTodoTitle { grid-column: 1 / -1; }
  .todo-add-actions { min-width: 0; justify-content: stretch; }
  .todo-add-actions .btn { flex: 1; }
  .task-organizer-bar { grid-template-columns: 1fr; }
  .form-grid-4.task-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .dashboard, .board, .board-content, .content, main { max-width: 100%; min-width: 0; }
  .todo-add.todo-add-clean {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .todo-add.todo-add-clean > *,
  .todo-add.todo-add-clean #newTodoTitle,
  .todo-add.todo-add-clean #newTodoDuration,
  .todo-add.todo-add-clean #newTodoDueDate,
  .todo-add.todo-add-clean .difficulty-wrap,
  .todo-add-actions {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
  }
  .todo-add-actions { flex-direction: row; }
  .cat-filter-bar {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .cat-filter-bar > * { flex: 0 0 auto; }
  .premium-task-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    overflow: hidden;
  }
  .premium-task-row .task-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(42px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: stretch !important;
  }
  .premium-task-row .task-actions .task-complete-btn {
    grid-column: span 2;
  }
  .premium-task-row .task-actions .btn,
  .premium-task-row .task-actions .icon-btn {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 42px !important;
  }
  .subtask-dropdown-item {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .subtask-dropdown-item small,
  .subtask-dropdown-item button { grid-column: 2; justify-self: start; }
  .form-grid-4.task-edit-grid { grid-template-columns: 1fr; }
  .edit-subtask-row {
    display: grid !important;
    grid-template-columns: 34px 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .edit-subtask-row .edit-subtask-title { grid-column: 2; }
  .edit-subtask-row .edit-subtask-duration,
  .edit-subtask-row .edit-subtask-category,
  .edit-subtask-row .edit-subtask-due,
  .edit-subtask-row .edit-subtask-remove { grid-column: 1 / -1; width: 100%; }
  .mobile-bottom-nav { max-width: calc(100vw - 18px); }
  body { padding-bottom: max(116px, env(safe-area-inset-bottom)); }
}
@media (max-width: 430px) {
  .todo-add-actions { flex-direction: column; }
  .premium-task-row .task-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .premium-task-row .task-actions .task-complete-btn { grid-column: 1 / -1; }
  .task-title .chip,
  .task-title .difficulty-badge,
  .task-title .rm-priority-badge { font-size: 10px; padding: 5px 8px; }
}

/* ════════════════════════════════════════
   RM9 Habits + Tasks premium redesign for current zip
════════════════════════════════════════ */
:root {
  --rm-green: #22c55e;
  --rm-yellow: #facc15;
  --rm-orange: #fb923c;
  --rm-red: #ef4444;
  --rm-gray: rgba(148, 163, 184, .55);
}

#boardContent {
  --rm-card-bg: rgba(255, 251, 244, .86);
  --rm-card-border: rgba(120, 83, 45, .14);
}
body.dark #boardContent,
body.theme-navy #boardContent {
  --rm-card-bg: rgba(24, 21, 18, .82);
  --rm-card-border: rgba(226, 196, 150, .13);
}

/* Keep add flow inside the dock: hide the old inline add fields, preserve manage/arrange controls. */
#boardContent .board-toolbar {
  margin: 0 0 12px !important;
}
#boardContent .habit-add,
#boardContent .todo-add-clean {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#newHabitTitle,
#newHabitDuration,
#newHabitDifficulty,
#newHabitCategory,
#addHabitBtn,
#newTodoTitle,
#newTodoDuration,
#newTodoDueDate,
#newTodoDifficulty,
#addTodoBtn,
#boardContent .habit-add > .quick-input-wrap,
#boardContent .todo-add-clean > .quick-input-wrap {
  display: none !important;
}
#manageHabitsBtn,
#manageCategoriesBtn {
  border-radius: 999px !important;
  min-height: 40px !important;
  padding-inline: 16px !important;
  background: rgba(255,255,255,.66) !important;
  border: 1px solid rgba(200,149,90,.22) !important;
  box-shadow: 0 10px 26px rgba(80,50,20,.08) !important;
}
body.dark #manageHabitsBtn,
body.dark #manageCategoriesBtn,
body.theme-navy #manageHabitsBtn,
body.theme-navy #manageCategoriesBtn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(226,196,150,.15) !important;
}

/* Modern top progress bar */
.rm-progress-overview {
  position: relative;
  overflow: hidden;
  border-radius: clamp(22px, 3vw, 32px);
  padding: clamp(18px, 2.7vw, 26px);
  margin: 12px 0 18px;
  border: 1px solid var(--rm-card-border);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rm-progress-color, var(--rm-gray)) 22%, transparent), transparent 34rem),
    linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,248,238,.64));
  box-shadow: 0 22px 58px rgba(80,50,20,.12), inset 0 1px 0 rgba(255,255,255,.72);
  animation: rmCardIn .34s cubic-bezier(.2,.8,.2,1) both;
}
body.dark .rm-progress-overview,
body.theme-navy .rm-progress-overview {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rm-progress-color, var(--rm-gray)) 20%, transparent), transparent 30rem),
    linear-gradient(145deg, rgba(36,30,24,.86), rgba(20,18,16,.72));
  box-shadow: 0 22px 58px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.rm-progress-gray { --rm-progress-color: var(--rm-gray); }
.rm-progress-warming { --rm-progress-color: color-mix(in srgb, var(--rm-red) 48%, var(--rm-gray)); }
.rm-progress-red { --rm-progress-color: var(--rm-red); }
.rm-progress-orange { --rm-progress-color: var(--rm-orange); }
.rm-progress-yellow { --rm-progress-color: var(--rm-yellow); }
.rm-progress-green { --rm-progress-color: var(--rm-green); }
.rm-progress-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.rm-progress-kicker {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.rm-progress-overview h3 {
  margin: 0;
  font-size: clamp(1.15rem, 3.8vw, 1.65rem);
  letter-spacing: -.04em;
  color: var(--text);
}
.rm-progress-overview-head > strong {
  min-width: 72px;
  text-align: center;
  border-radius: 999px;
  padding: 10px 13px;
  background: color-mix(in srgb, var(--rm-progress-color) 14%, rgba(255,255,255,.72));
  border: 1px solid color-mix(in srgb, var(--rm-progress-color) 28%, transparent);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
}
.rm-progress-track {
  width: 100%;
  height: 15px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(148,163,184,.34), rgba(148,163,184,.22));
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: inset 0 2px 7px rgba(72,54,33,.12);
}
.rm-progress-track > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rm-progress-color) 80%, white), var(--rm-progress-color));
  box-shadow: 0 0 22px color-mix(in srgb, var(--rm-progress-color) 36%, transparent);
  transition: width .72s cubic-bezier(.2,.8,.2,1), background .24s ease;
}
.rm-progress-overview-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 9px;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 800;
}
.rm-progress-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.rm-progress-stat-row article {
  min-width: 0;
  border-radius: 18px;
  padding: 11px 12px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(120,83,45,.10);
}
body.dark .rm-progress-stat-row article,
body.theme-navy .rm-progress-stat-row article { background: rgba(255,255,255,.045); border-color: rgba(226,196,150,.10); }
.rm-progress-stat-row article span {
  display: block;
  font-size: .69rem;
  font-weight: 950;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.rm-progress-stat-row article strong { font-size: .98rem; color: var(--text); }

/* Premium cards */
.premium-task-row.rm-redesigned-card {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: clamp(12px, 2vw, 18px) !important;
  align-items: stretch !important;
  padding: clamp(14px, 2.2vw, 20px) !important;
  margin-bottom: 12px !important;
  border-radius: clamp(21px, 3vw, 28px) !important;
  background:
    linear-gradient(145deg, var(--rm-card-bg), rgba(255,245,232,.72)) !important;
  border: 1px solid var(--rm-card-border) !important;
  box-shadow: 0 16px 42px rgba(80,50,20,.10), inset 0 1px 0 rgba(255,255,255,.66) !important;
  overflow: hidden !important;
  transform-origin: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease !important;
}
.premium-task-row.rm-redesigned-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: transparent;
  opacity: .85;
}
.premium-task-row.rm-redesigned-card.todo-card-row.due-overdue::before { background: var(--rm-red); }
.premium-task-row.rm-redesigned-card.todo-card-row.due-today::before { background: var(--rm-orange); }
.premium-task-row.rm-redesigned-card.done::before { background: var(--rm-green); }
.premium-task-row.rm-redesigned-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 60px rgba(80,50,20,.14), inset 0 1px 0 rgba(255,255,255,.72) !important;
  border-color: rgba(200,149,90,.26) !important;
}
.premium-task-row.rm-redesigned-card.done {
  opacity: .82;
  background: linear-gradient(145deg, rgba(229, 255, 238, .75), var(--rm-card-bg)) !important;
}
body.dark .premium-task-row.rm-redesigned-card.done,
body.theme-navy .premium-task-row.rm-redesigned-card.done { background: linear-gradient(145deg, rgba(34,197,94,.11), rgba(255,255,255,.035)) !important; }
.premium-task-row.rm-redesigned-card.skipped { opacity: .68; }
.rm-redesigned-main,
.rm-redesigned-meta,
.rm-title-stack { min-width: 0 !important; }
.rm-redesigned-meta { display: grid; gap: 11px; }
.rm-redesigned-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.premium-task-row.rm-redesigned-card .task-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 !important;
}
.premium-task-row.rm-redesigned-card .task-title-main {
  font-size: clamp(.99rem, 2.6vw, 1.14rem) !important;
  font-weight: 950 !important;
  letter-spacing: -.025em !important;
  color: var(--text) !important;
  overflow-wrap: anywhere;
}
.premium-task-row.rm-redesigned-card .task-emoji-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(200,149,90,.18) !important;
  box-shadow: 0 8px 18px rgba(80,50,20,.07) !important;
}
.rm-card-status-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.rm-card-badge-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.rm-card-badge {
  min-height: 42px;
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(120,83,45,.10);
  color: var(--text);
}
body.dark .rm-card-badge,
body.theme-navy .rm-card-badge { background: rgba(255,255,255,.045); border-color: rgba(226,196,150,.10); }
.rm-card-badge i { grid-row: 1 / 3; font-style: normal; }
.rm-card-badge span { font-size: .64rem; color: var(--muted); font-weight: 950; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
.rm-card-badge strong { font-size: .86rem; line-height: 1.1; max-width: 145px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-card-badge.due.overdue { color: var(--rm-red); background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.20); }
.rm-card-badge.due.today { color: var(--rm-orange); background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.22); }
.rm-schedule-note { color: var(--muted) !important; font-size: .82rem !important; font-weight: 800; }
.premium-task-row.rm-redesigned-card .task-row-progress {
  height: 7px !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.20) !important;
  overflow: hidden !important;
}
.premium-task-row.rm-redesigned-card .task-row-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--rm-green));
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}
.premium-task-row.rm-redesigned-card .task-actions.rm-redesigned-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(42px, auto)) !important;
  gap: 8px !important;
  align-content: center !important;
  justify-items: stretch !important;
  min-width: 154px;
}
.premium-task-row.rm-redesigned-card .task-actions .btn,
.premium-task-row.rm-redesigned-card .task-actions .icon-btn {
  min-height: 38px !important;
  border-radius: 14px !important;
  justify-content: center !important;
}
.premium-task-row.rm-redesigned-card .task-actions .task-complete-btn {
  grid-column: 1 / -1;
  font-weight: 950 !important;
}

/* Difficulty must be readable, not color-only. */
.difficulty-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: .75rem !important;
  font-weight: 950 !important;
  border: 1px solid transparent !important;
}
.difficulty-badge.difficulty-easy,
.difficulty-easy { background: rgba(34,197,94,.13) !important; border-color: rgba(34,197,94,.24) !important; color: #16803f !important; }
.difficulty-badge.difficulty-medium,
.difficulty-medium { background: rgba(250,204,21,.16) !important; border-color: rgba(250,204,21,.28) !important; color: #8a6400 !important; }
.difficulty-badge.difficulty-hard,
.difficulty-hard,
.difficulty-badge.difficulty-veryHard { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.26) !important; color: #b91c1c !important; }
body.dark .difficulty-badge.difficulty-easy,
body.theme-navy .difficulty-badge.difficulty-easy { color: #86efac !important; }
body.dark .difficulty-badge.difficulty-medium,
body.theme-navy .difficulty-badge.difficulty-medium { color: #fde68a !important; }
body.dark .difficulty-badge.difficulty-hard,
body.theme-navy .difficulty-badge.difficulty-hard { color: #fca5a5 !important; }

/* Subtasks nest into the parent task clearly. */
.rm-subtask-nest {
  margin-top: 2px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(120,83,45,.12) !important;
  background: rgba(255,255,255,.50) !important;
  overflow: hidden;
}
body.dark .rm-subtask-nest,
body.theme-navy .rm-subtask-nest { background: rgba(255,255,255,.035) !important; border-color: rgba(226,196,150,.10) !important; }
.rm-subtask-nest summary {
  min-height: 42px;
  padding: 10px 12px !important;
  font-weight: 950;
}
.rm-subtask-item {
  grid-template-columns: 24px minmax(0, 1fr) auto auto auto 32px !important;
  gap: 8px !important;
  align-items: center !important;
  border-radius: 14px !important;
  animation: rmSubtaskIn .22s ease both;
}
.rm-subtask-item .subtask-delete-btn {
  min-width: 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
}

/* Organizer/filter UI: opaque, spacious, and coherent. */
.task-organizer-bar,
.cat-filter-bar {
  border-radius: 22px !important;
  padding: 10px !important;
  background: rgba(255, 251, 244, .92) !important;
  border: 1px solid rgba(200,149,90,.18) !important;
  box-shadow: 0 12px 32px rgba(80,50,20,.08), inset 0 1px 0 rgba(255,255,255,.60) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}
body.dark .task-organizer-bar,
body.dark .cat-filter-bar,
body.theme-navy .task-organizer-bar,
body.theme-navy .cat-filter-bar {
  background: rgba(24, 21, 18, .92) !important;
  border-color: rgba(226,196,150,.12) !important;
}
.task-organizer-bar label,
.task-organizer-bar select,
.cat-filter-btn,
.cat-add-btn {
  border-radius: 999px !important;
}
.task-organizer-bar select {
  min-height: 38px !important;
  background: rgba(255,255,255,.70) !important;
}
body.dark .task-organizer-bar select,
body.theme-navy .task-organizer-bar select { background: rgba(255,255,255,.055) !important; }
.cat-filter-btn { min-height: 38px !important; }
.completed-section {
  border-radius: 22px !important;
  background: rgba(255,251,244,.58) !important;
  border: 1px solid rgba(200,149,90,.14) !important;
  overflow: hidden !important;
}
.completed-toggle { min-height: 48px !important; }
.completed-list {
  animation: rmAccordionIn .24s ease both;
}

/* Floating dock add button */
.mobile-bottom-nav { overflow: visible !important; }
.rm-dock-add-btn {
  position: absolute !important;
  left: 50% !important;
  top: -28px !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255,255,255,.78) !important;
  background: linear-gradient(135deg, #2bd86f, #0fac55) !important;
  color: white !important;
  display: grid !important;
  place-items: center !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 18px 40px rgba(34,197,94,.36), 0 6px 18px rgba(0,0,0,.16) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(12px) scale(.75) rotate(-18deg) !important;
  transition: opacity .24s ease, transform .34s cubic-bezier(.18,1.2,.3,1), box-shadow .2s ease !important;
  z-index: 3 !important;
}
.rm-dock-add-btn.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) rotate(0deg) !important;
}
.rm-dock-add-btn:hover,
.rm-dock-add-btn:focus-visible {
  transform: translateX(-50%) translateY(-3px) scale(1.06) !important;
  box-shadow: 0 22px 48px rgba(34,197,94,.44), 0 8px 22px rgba(0,0,0,.18) !important;
  outline: none !important;
}
.rm-dock-add-btn span { transform: translateY(-1px); }

/* Add modal */
.rm-add-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(42, 28, 18, .18);
  backdrop-filter: blur(0px);
  opacity: 0;
  transition: opacity .22s ease, backdrop-filter .22s ease;
}
.rm-add-overlay.open {
  opacity: 1;
  backdrop-filter: blur(14px) saturate(1.05);
}
.rm-add-sheet {
  position: relative;
  width: min(560px, 100%);
  max-height: min(84dvh, 760px);
  overflow: auto;
  border-radius: 32px;
  padding: clamp(18px, 3vw, 26px);
  background:
    radial-gradient(circle at top left, rgba(200,149,90,.18), transparent 32rem),
    linear-gradient(145deg, rgba(255,251,244,.96), rgba(246,231,210,.92));
  border: 1px solid rgba(200,149,90,.22);
  box-shadow: 0 34px 110px rgba(42,28,18,.28), inset 0 1px 0 rgba(255,255,255,.74);
  transform: translateY(30px) scale(.96);
  transition: transform .28s cubic-bezier(.2,.95,.25,1);
}
.rm-add-overlay.open .rm-add-sheet { transform: translateY(0) scale(1); }
body.dark .rm-add-sheet,
body.theme-navy .rm-add-sheet {
  background:
    radial-gradient(circle at top left, rgba(226,196,150,.10), transparent 28rem),
    linear-gradient(145deg, rgba(35,30,25,.96), rgba(18,16,14,.94));
  border-color: rgba(226,196,150,.16);
}
.rm-add-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(120,83,45,.12);
  background: rgba(255,255,255,.62);
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.rm-add-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 38px;
  margin-bottom: 18px;
}
.rm-add-header > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(200,149,90,.20), rgba(255,255,255,.52));
  font-size: 1.6rem;
}
.rm-add-header h3 { margin: 0; font-size: clamp(1.28rem, 4vw, 1.7rem); letter-spacing: -.04em; }
.rm-add-header p { margin: 4px 0 0; color: var(--muted); font-weight: 750; line-height: 1.4; }
.rm-add-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rm-add-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.rm-add-field-full,
.rm-add-subtasks { grid-column: 1 / -1; }
.rm-add-field > span,
.rm-add-subtasks-head strong {
  font-size: .74rem;
  font-weight: 950;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.rm-add-field input,
.rm-add-field select,
.rm-add-subtask-row input {
  min-height: 48px;
  width: 100%;
  border-radius: 17px;
  border: 1px solid rgba(120,83,45,.15);
  background: rgba(255,255,255,.72);
  color: var(--text);
  padding: 0 14px;
  font: inherit;
  font-weight: 850;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
body.dark .rm-add-field input,
body.dark .rm-add-field select,
body.dark .rm-add-subtask-row input,
body.theme-navy .rm-add-field input,
body.theme-navy .rm-add-field select,
body.theme-navy .rm-add-subtask-row input {
  background: rgba(255,255,255,.055);
  border-color: rgba(226,196,150,.12);
}
.rm-add-field input:focus,
.rm-add-field select:focus,
.rm-add-subtask-row input:focus {
  border-color: rgba(200,149,90,.42);
  box-shadow: 0 0 0 4px rgba(200,149,90,.13);
}
.rm-difficulty-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.rm-difficulty-option {
  min-height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(120,83,45,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 950;
  cursor: pointer;
  color: var(--text) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rm-difficulty-option span { font-size: 1.2rem; }
.rm-difficulty-option:hover { transform: translateY(-2px); }
.rm-difficulty-option.active {
  border-color: currentColor !important;
  box-shadow: 0 14px 28px rgba(80,50,20,.12), inset 0 1px 0 rgba(255,255,255,.60);
}
.rm-add-subtasks {
  border-radius: 20px;
  padding: 12px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(120,83,45,.10);
}
body.dark .rm-add-subtasks,
body.theme-navy .rm-add-subtasks { background: rgba(255,255,255,.035); border-color: rgba(226,196,150,.09); }
.rm-add-subtasks-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#rmAddSubtaskList { display: grid; gap: 8px; }
.rm-add-subtask-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 38px;
  gap: 8px;
  animation: rmSubtaskIn .22s ease both;
}
.rm-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.rm-add-actions .btn { min-height: 46px; border-radius: 16px; }

@keyframes rmCardIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rmSubtaskIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rmAccordionIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
  .premium-task-row.rm-redesigned-card {
    grid-template-columns: 1fr !important;
  }
  .premium-task-row.rm-redesigned-card .task-actions.rm-redesigned-actions {
    min-width: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .premium-task-row.rm-redesigned-card .task-actions .task-complete-btn {
    grid-column: auto;
  }
}
@media (max-width: 640px) {
  .rm-progress-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-progress-overview { padding: 16px; border-radius: 24px; }
  .premium-task-row.rm-redesigned-card { padding: 14px !important; border-radius: 22px !important; }
  .rm-card-badge { flex: 1 1 calc(50% - 8px); }
  .premium-task-row.rm-redesigned-card .task-actions.rm-redesigned-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .premium-task-row.rm-redesigned-card .task-actions .task-complete-btn { grid-column: 1 / -1; }
  .rm-add-form { grid-template-columns: 1fr; }
  .rm-difficulty-picker { gap: 8px; }
  .rm-difficulty-option { min-height: 54px; flex-direction: column; gap: 3px; font-size: .78rem; }
  .rm-add-overlay { align-items: end; padding: 12px; }
  .rm-add-sheet { width: 100%; max-height: 88dvh; border-radius: 28px; }
  .rm-add-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .task-organizer-bar { grid-template-columns: 1fr !important; }
  .cat-filter-bar { gap: 7px !important; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .cat-filter-bar::-webkit-scrollbar { display: none; }
}
@media (max-width: 420px) {
  .rm-progress-overview-head { align-items: center; }
  .rm-progress-overview-head > strong { min-width: 62px; padding: 8px 10px; }
  .rm-card-badge { flex-basis: 100%; }
  .premium-task-row.rm-redesigned-card .task-actions.rm-redesigned-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .premium-task-row.rm-redesigned-card .task-actions .task-complete-btn { grid-column: 1 / -1; }
  .rm-add-subtask-row { grid-template-columns: minmax(0, 1fr) 72px 34px; }
  .rm-dock-add-btn { width: 54px !important; height: 54px !important; top: -27px !important; }
}

/* ════════════════════════════════════════
   RM10 user-requested fixes: compact accordions, PDF-style cards, inline habit drag, centered dock add
════════════════════════════════════════ */
/* Remove the separate habit rearrange panel/header. Habit sorting now lives on each habit card. */
#boardContent .board-toolbar:has(.habit-add),
#habitManagePanel,
.habit-manage-panel {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Expanded completed/skipped sections should open tightly with no giant empty space. */
.completed-section {
  padding: 10px !important;
  margin: 12px 0 !important;
  border-radius: 22px !important;
  background: rgba(255, 251, 244, .72) !important;
  border: 1px solid rgba(200,149,90,.16) !important;
  overflow: visible !important;
  min-height: 0 !important;
}
.completed-toggle {
  width: auto !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(200,149,90,.18) !important;
  box-shadow: none !important;
}
.completed-list {
  margin-top: 10px !important;
  padding: 0 !important;
  min-height: 0 !important;
  animation: rmAccordionIn .18s ease both !important;
}
.completed-list.hidden { display: none !important; }
.completed-actions {
  min-height: 0 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
}
.completed-list .task-list {
  display: grid !important;
  gap: 10px !important;
}
.completed-list .task-row:last-child,
.completed-section .task-row:last-child { margin-bottom: 0 !important; }
body.dark .completed-section,
body.theme-navy .completed-section { background: rgba(255,255,255,.04) !important; border-color: rgba(226,196,150,.12) !important; }
body.dark .completed-toggle,
body.theme-navy .completed-toggle { background: rgba(255,255,255,.05) !important; border-color: rgba(226,196,150,.13) !important; }

/* Reference/PDF-style task and habit cards. */
.premium-task-row.rm-reference-card {
  --rm-ref-brown: #ad7d59;
  --rm-ref-brown-2: #bb8962;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(12px, 2vw, 18px) !important;
  min-height: 112px !important;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2.4vw, 22px) !important;
  margin-bottom: 12px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, var(--rm-ref-brown), var(--rm-ref-brown-2)) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 16px 34px rgba(88, 52, 25, .16), inset 0 1px 0 rgba(255,255,255,.18) !important;
  overflow: hidden !important;
  color: #fff !important;
}
.premium-task-row.rm-reference-card::before {
  width: 0 !important;
  background: none !important;
}
.premium-task-row.rm-reference-card.todo-card-row.due-overdue {
  box-shadow: 0 16px 34px rgba(88,52,25,.16), inset 5px 0 0 rgba(239,68,68,.90) !important;
}
.premium-task-row.rm-reference-card.done {
  background: linear-gradient(135deg, #5fb383, #69ba8a) !important;
  opacity: 1 !important;
}
.premium-task-row.rm-reference-card.skipped {
  opacity: .72 !important;
  filter: saturate(.85);
}
.premium-task-row.rm-reference-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 42px rgba(88,52,25,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.rm-reference-main,
.rm-reference-meta { min-width: 0 !important; }
.rm-reference-meta {
  display: grid !important;
  gap: 8px !important;
}
.rm-reference-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.rm-reference-card .task-title-main {
  color: #fff !important;
  font-size: clamp(1.1rem, 2.6vw, 1.55rem) !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.rm-reference-card .task-emoji-btn {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 8px 16px rgba(70,40,18,.14) !important;
}
.rm-reference-info-line,
.rm-reference-metrics {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.rm-reference-card .difficulty-badge,
.rm-reference-card .rm-priority-badge,
.rm-streak-pill,
.rm-category-pill,
.rm-due-pill {
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  font-size: .75rem !important;
  line-height: 1 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.rm-streak-pill,
.rm-category-pill,
.rm-due-pill,
.rm-reference-card .rm-priority-badge {
  color: #3d291b !important;
  background: rgba(255,255,255,.82) !important;
}
.rm-due-pill.overdue { color: #b91c1c !important; background: #fee2e2 !important; }
.rm-due-pill.today { color: #9a4b00 !important; background: #ffedd5 !important; }
.rm-estimate-bar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(260px, 42vw) !important;
  min-height: 24px !important;
  padding: 3px 14px !important;
  border-radius: 999px !important;
  background: rgba(248,250,252,.90) !important;
  color: #2b2018 !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.10);
}
.rm-xp-circle {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  align-content: center !important;
  flex: 0 0 46px !important;
  background: rgba(255,255,255,.88) !important;
  color: #20150f !important;
  border: 2px solid rgba(31,21,15,.65) !important;
  line-height: 1 !important;
  box-shadow: 0 8px 16px rgba(60,35,18,.14);
}
.rm-xp-circle strong { font-size: .9rem !important; }
.rm-xp-circle small { font-size: .62rem !important; font-weight: 950 !important; text-transform: lowercase; }
.rm-reference-card .task-row-progress {
  max-width: min(560px, 58vw) !important;
  height: 7px !important;
  background: rgba(248,250,252,.62) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.rm-reference-card .task-row-progress > span {
  background: linear-gradient(90deg, #fef3c7, #34d399) !important;
}
.rm-reference-subtask-bar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(260px, 42vw) !important;
  min-height: 24px !important;
  padding: 2px 12px !important;
  border-radius: 999px !important;
  background: rgba(248,250,252,.90) !important;
  color: #20150f !important;
  font-weight: 950 !important;
}
.rm-subtask-plus {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 1.1rem;
  font-weight: 950;
  cursor: pointer;
}
.rm-reference-subtasks {
  max-width: min(720px, 100%) !important;
  margin-top: 0 !important;
  background: rgba(255,255,255,.28) !important;
  border-color: rgba(255,255,255,.24) !important;
}
.rm-reference-subtasks summary { color: #fff !important; }
.rm-reference-schedule { color: rgba(255,255,255,.82) !important; }
.rm-reference-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: min(390px, 38vw) !important;
  max-width: 420px !important;
}
.rm-reference-actions .icon-btn,
.rm-reference-actions .btn {
  min-width: 48px !important;
  width: auto !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  background: rgba(248,250,252,.88) !important;
  color: #3b291d !important;
  box-shadow: 0 10px 20px rgba(65,38,18,.13), inset 0 1px 0 rgba(255,255,255,.55) !important;
  font-weight: 950 !important;
}
.rm-reference-actions .icon-btn:hover,
.rm-reference-actions .btn:hover { transform: translateY(-2px) !important; }
.rm-reference-actions .task-complete-btn {
  width: 132px !important;
  padding-inline: 16px !important;
  background: #38a970 !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(22,163,74,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.rm-reference-actions .task-complete-btn.btn-outline {
  background: rgba(255,255,255,.90) !important;
  color: #2c7a4c !important;
}
.rm-habit-drag-handle {
  cursor: grab !important;
  touch-action: none;
  font-size: 1.25rem !important;
}
.rm-habit-drag-handle:active,
.rm-habit-draggable-card.rm-inline-dragging { cursor: grabbing !important; }
.rm-habit-draggable-card.rm-inline-dragging {
  opacity: .58 !important;
  transform: scale(.985) !important;
}
.rm-habit-draggable-card.rm-inline-drag-over {
  outline: 3px solid rgba(34,197,94,.55) !important;
  outline-offset: 3px !important;
}
body.dark .premium-task-row.rm-reference-card,
body.theme-navy .premium-task-row.rm-reference-card {
  --rm-ref-brown: #8a6246;
  --rm-ref-brown-2: #a17450;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Put + inside the dock flow instead of floating over another nav item. */
.mobile-bottom-nav.has-dock-add {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  align-items: center !important;
  width: min(980px, calc(100vw - 32px)) !important;
}
.rm-dock-add-btn {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  justify-self: center !important;
  align-self: center !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255,255,255,.82) !important;
  background: linear-gradient(135deg, #24d66d, #10a957) !important;
  color: #fff !important;
  display: none !important;
  place-items: center !important;
  font-size: 2rem !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 34px rgba(34,197,94,.34), 0 5px 16px rgba(0,0,0,.13) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease, transform .22s cubic-bezier(.18,1.2,.3,1), box-shadow .18s ease !important;
  z-index: 1 !important;
}
.rm-dock-add-btn.is-visible {
  display: grid !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: rmDockAddPop .28s cubic-bezier(.18,1.25,.3,1) both;
}
.rm-dock-add-btn:hover,
.rm-dock-add-btn:focus-visible {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 20px 44px rgba(34,197,94,.42), 0 7px 20px rgba(0,0,0,.16) !important;
  outline: none !important;
}
.rm-dock-add-btn span { transform: translateY(-1px); }
@keyframes rmDockAddPop { from { transform: scale(.76); } to { transform: scale(1); } }

@media (max-width: 900px) {
  .premium-task-row.rm-reference-card {
    grid-template-columns: 1fr !important;
  }
  .rm-reference-actions {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .rm-reference-actions .task-complete-btn {
    flex: 1 1 150px !important;
  }
  .rm-estimate-bar,
  .rm-reference-subtask-bar { width: min(100%, 280px) !important; }
}
@media (max-width: 700px) {
  .mobile-bottom-nav.has-dock-add {
    width: min(98vw, 520px) !important;
    gap: 3px !important;
    padding: 7px !important;
  }
  .rm-dock-add-btn {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    font-size: 1.75rem !important;
  }
  .premium-task-row.rm-reference-card {
    border-radius: 22px !important;
    min-height: 0 !important;
  }
  .rm-reference-card .task-title-main {
    font-size: 1.14rem !important;
  }
  .rm-reference-actions .icon-btn,
  .rm-reference-actions .btn {
    height: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    border-radius: 15px !important;
  }
}
@media (max-width: 430px) {
  .mobile-bottom-nav.has-dock-add .mobile-nav-item small { font-size: .45rem !important; }
  .mobile-bottom-nav.has-dock-add .mobile-nav-item span { font-size: .82rem !important; }
  .rm-dock-add-btn { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; }
  .rm-reference-actions { gap: 6px !important; }
  .rm-reference-actions .task-complete-btn { flex-basis: 100% !important; }
}

/* ════════════════════════════════════════
   RM11 polish: restore Routine Meter palette, centered dock +, task drag, cleaner status chips
════════════════════════════════════════ */
/* Keep the PDF-inspired layout, but return cards to the original cozy cream/accent theme. */
.premium-task-row.rm-reference-card {
  --rm-ref-brown: transparent;
  --rm-ref-brown-2: transparent;
  background:
    radial-gradient(circle at 12% 0%, rgba(200,149,90,.10), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(249,242,232,.88)) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 16px 34px rgba(80,50,20,.10), inset 0 1px 0 rgba(255,255,255,.76) !important;
}
.premium-task-row.rm-reference-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 42px rgba(80,50,20,.13), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.premium-task-row.rm-reference-card.todo-card-row.due-overdue {
  box-shadow: 0 16px 34px rgba(80,50,20,.10), inset 5px 0 0 rgba(239,68,68,.86), inset 0 1px 0 rgba(255,255,255,.76) !important;
}
.premium-task-row.rm-reference-card.done {
  background:
    radial-gradient(circle at 12% 0%, rgba(34,197,94,.13), transparent 34%),
    linear-gradient(135deg, rgba(236,253,245,.94), rgba(255,251,244,.88)) !important;
  color: var(--text) !important;
}
body.dark .premium-task-row.rm-reference-card,
body.theme-navy .premium-task-row.rm-reference-card {
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.028)) !important;
  border-color: rgba(226,196,150,.14) !important;
  color: var(--text) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.dark .premium-task-row.rm-reference-card.done,
body.theme-navy .premium-task-row.rm-reference-card.done {
  background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(255,255,255,.035)) !important;
}
.rm-reference-card .task-title-main {
  color: var(--text) !important;
  text-shadow: none !important;
}
.rm-reference-card .rm-priority-badge,
.rm-streak-pill,
.rm-category-pill,
.rm-due-pill {
  color: var(--text) !important;
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(200,149,90,.16) !important;
}
body.dark .rm-reference-card .rm-priority-badge,
body.dark .rm-streak-pill,
body.dark .rm-category-pill,
body.dark .rm-due-pill,
body.theme-navy .rm-reference-card .rm-priority-badge,
body.theme-navy .rm-streak-pill,
body.theme-navy .rm-category-pill,
body.theme-navy .rm-due-pill {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(226,196,150,.14) !important;
}
.rm-reference-card .task-row-progress {
  display: none !important;
}
.rm-reference-subtasks {
  background: rgba(255,255,255,.56) !important;
  border-color: rgba(200,149,90,.14) !important;
}
.rm-reference-subtasks summary,
.rm-reference-schedule {
  color: var(--muted) !important;
}
.rm-reference-actions .icon-btn,
.rm-reference-actions .btn {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(200,149,90,.20) !important;
  color: var(--text) !important;
}
body.dark .rm-reference-actions .icon-btn,
body.dark .rm-reference-actions .btn,
body.theme-navy .rm-reference-actions .icon-btn,
body.theme-navy .rm-reference-actions .btn {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(226,196,150,.16) !important;
  color: var(--text) !important;
}
.rm-reference-actions .task-complete-btn {
  background: linear-gradient(135deg, #2fb56f, #22a260) !important;
  color: #fff !important;
}
.rm-reference-actions .task-complete-btn.btn-outline {
  background: rgba(255,255,255,.84) !important;
  color: #238553 !important;
}
.rm-reference-actions .icon-btn:hover,
.rm-reference-actions .btn:hover {
  transform: translateY(-1px) !important;
}
.rm-todo-drag-handle,
.rm-habit-drag-handle {
  cursor: grab !important;
  font-size: 1.12rem !important;
}
.rm-todo-drag-handle:active,
.rm-habit-drag-handle:active,
.todo-card-row.rm-inline-dragging,
.rm-habit-draggable-card.rm-inline-dragging {
  cursor: grabbing !important;
}
.todo-card-row.rm-inline-dragging {
  opacity: .58 !important;
  transform: scale(.985) !important;
}
.todo-card-row.rm-inline-drag-over,
.rm-habit-draggable-card.rm-inline-drag-over {
  outline: 3px solid rgba(34,197,94,.44) !important;
  outline-offset: 3px !important;
}
#manageCategoriesBtn,
.todo-add-actions .cat-manage-btn,
.cat-manage-toggle {
  display: none !important;
}

/* Center the + as a real dock item and stop the hover twitch. */
.mobile-bottom-nav.has-dock-add {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(4px, 1vw, 10px) !important;
  width: min(980px, calc(100vw - 32px)) !important;
  overflow: visible !important;
}
.mobile-bottom-nav.has-dock-add .mobile-nav-item,
.mobile-bottom-nav.has-dock-add .rm-dock-add-spacer {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.rm-dock-add-spacer {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.rm-dock-add-spacer.is-visible {
  display: block !important;
}
.rm-dock-add-btn {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  display: none !important;
  place-items: center !important;
  z-index: 2 !important;
  animation: none !important;
  transition: opacity .18s ease, box-shadow .18s ease, filter .18s ease !important;
  will-change: opacity, box-shadow, filter !important;
}
.rm-dock-add-btn.is-visible {
  display: grid !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  animation: none !important;
}
.rm-dock-add-btn:hover,
.rm-dock-add-btn:focus-visible {
  transform: none !important;
  filter: brightness(1.04) !important;
  box-shadow: 0 18px 42px rgba(34,197,94,.40), 0 7px 20px rgba(0,0,0,.15) !important;
}
.rm-dock-add-btn span { transform: translateY(-1px) !important; }

/* Clean habit edit alignment. */
.habit-edit-dialog {
  width: min(720px, calc(100vw - 28px)) !important;
  max-width: 720px !important;
}
.habit-edit-dialog .form-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}
.habit-edit-dialog .form-group { min-width: 0 !important; }
.habit-edit-dialog label {
  white-space: normal !important;
  line-height: 1.18 !important;
}
.habit-edit-dialog input,
.habit-edit-dialog select {
  height: 54px !important;
  min-width: 0 !important;
}
.habit-edit-dialog .dialog-actions {
  gap: 12px !important;
}

@media (max-width: 760px) {
  .habit-edit-dialog .form-grid-3 { grid-template-columns: 1fr !important; }
  .mobile-bottom-nav.has-dock-add {
    width: min(98vw, 560px) !important;
    gap: 3px !important;
    padding: 7px !important;
  }
  .rm-dock-add-btn {
    flex-basis: 54px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    font-size: 1.7rem !important;
  }
}
@media (max-width: 430px) {
  .mobile-bottom-nav.has-dock-add .rm-dock-add-spacer { flex-basis: 22px !important; flex-grow: .35 !important; }
  .rm-dock-add-btn {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}
#catManagePanel { display: none !important; }


/* ════════════════════════════════════════
   RM12 task/habit polish from user screenshot
════════════════════════════════════════ */
/* Remove the empty bar above task categories created by the hidden inline add area. */
#boardContent .board-toolbar:has(.todo-add-clean),
#boardContent .board-toolbar:has(.todo-add) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep task cards to two clean content rows: title/status + three metrics. */
.premium-task-row.rm-reference-card.rm12-todo-card {
  min-height: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}
.rm12-card .rm-reference-meta,
.rm12-card .rm12-meta {
  gap: 8px !important;
}
.rm12-todo-card .rm-reference-title-line,
.rm12-todo-card .rm12-title-line {
  margin-bottom: 2px !important;
}
.rm12-todo-card .rm-reference-info-line,
.rm12-todo-card .rm12-info-line {
  margin: 0 !important;
}
.rm12-todo-card .rm-reference-metrics,
.rm12-todo-card .rm12-metrics {
  display: grid !important;
  grid-template-columns: minmax(118px, 1.2fr) 54px minmax(112px, 1fr) !important;
  align-items: center !important;
  width: min(100%, 520px) !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
.rm12-todo-card .rm-estimate-bar,
.rm12-todo-card .rm-category-pill {
  width: 100% !important;
  max-width: none !important;
  min-height: 28px !important;
}
.rm12-todo-card .task-row-progress,
.rm12-todo-card .rm-reference-subtask-bar,
.rm12-todo-card .rm-schedule-note {
  display: none !important;
}
.rm12-subtasks {
  margin-top: 8px !important;
}

/* Dock: tighter, centered, polished, and no plus-button jump. */
.mobile-bottom-nav.has-dock-add {
  width: fit-content !important;
  max-width: calc(100vw - 36px) !important;
  padding: 8px 12px !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 24px !important;
}
.mobile-bottom-nav.has-dock-add .mobile-nav-item {
  flex: 0 0 74px !important;
  width: 74px !important;
  height: 54px !important;
  padding: 0 6px !important;
  border-radius: 16px !important;
}
.mobile-bottom-nav.has-dock-add .rm-dock-add-spacer {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
}
.mobile-bottom-nav.has-dock-add .rm-dock-add-btn {
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  margin: 0 4px !important;
  transform: none !important;
  transition: filter .16s ease, box-shadow .16s ease !important;
}
.mobile-bottom-nav.has-dock-add .rm-dock-add-btn:hover,
.mobile-bottom-nav.has-dock-add .rm-dock-add-btn:focus-visible {
  transform: none !important;
  filter: brightness(1.05) !important;
}
.mobile-bottom-nav.has-dock-add .rm-dock-add-btn span {
  transform: translateY(-1px) !important;
}

@media (max-width: 760px) {
  .mobile-bottom-nav.has-dock-add {
    width: calc(100vw - 18px) !important;
    padding: 7px !important;
    gap: 3px !important;
  }
  .mobile-bottom-nav.has-dock-add .mobile-nav-item {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 50px !important;
    padding: 0 2px !important;
  }
  .mobile-bottom-nav.has-dock-add .rm-dock-add-btn {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    margin: 0 2px !important;
  }
  .rm12-todo-card .rm-reference-metrics,
  .rm12-todo-card .rm12-metrics {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 8px !important;
  }
}
@media (max-width: 430px) {
  .mobile-bottom-nav.has-dock-add .mobile-nav-item span { font-size: .78rem !important; }
  .mobile-bottom-nav.has-dock-add .mobile-nav-item small { font-size: .43rem !important; }
  .mobile-bottom-nav.has-dock-add .rm-dock-add-btn {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    font-size: 1.55rem !important;
  }
}

/* RM12: combine task title/status into one compact first row. */
.rm12-title-status-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.rm12-title-status-row .rm12-title-line {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.rm12-title-status-row .rm12-info-line {
  flex: 0 0 auto !important;
  margin: 0 !important;
  justify-content: flex-end !important;
}
@media (max-width: 620px) {
  .rm12-title-status-row { align-items: flex-start !important; flex-direction: column !important; gap: 7px !important; }
  .rm12-title-status-row .rm12-info-line { justify-content: flex-start !important; }
}

/* ════════════════════════════════════════
   RM13 compact task-card/action-grid polish
   Makes the task buttons a true 2-row × 3-column grid and slims cards down.
════════════════════════════════════════ */
.premium-task-row.rm-reference-card.rm13-slim-card {
  min-height: 94px !important;
  padding: 13px 18px !important;
  gap: 14px !important;
  align-items: center !important;
}
.premium-task-row.rm-reference-card.rm13-todo-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 92px !important;
}
.rm13-meta {
  gap: 6px !important;
}
.rm13-title-status-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}
.rm13-title-line {
  min-width: 0 !important;
  gap: 8px !important;
}
.rm13-slim-card .task-title-main {
  font-size: clamp(1rem, 2vw, 1.28rem) !important;
  line-height: 1.08 !important;
}
.rm13-info-line {
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.rm13-slim-card .difficulty-badge,
.rm13-slim-card .rm-priority-badge,
.rm13-slim-card .rm-streak-pill,
.rm13-slim-card .rm-category-pill {
  min-height: 25px !important;
  padding: 5px 9px !important;
  font-size: .69rem !important;
}
.rm13-metrics {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) 42px minmax(112px, .8fr) !important;
  width: min(100%, 470px) !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 2px !important;
}
.rm13-metrics .rm-estimate-bar,
.rm13-metrics .rm-category-pill,
.rm13-metrics .rm-streak-pill {
  width: 100% !important;
  min-height: 25px !important;
  max-width: none !important;
}
.rm13-metrics .rm-xp-circle {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
}
.rm13-metrics .rm-xp-circle strong { font-size: .82rem !important; }
.rm13-metrics .rm-xp-circle small { font-size: .55rem !important; }
.rm13-schedule-note {
  margin-top: 0 !important;
  font-size: .76rem !important;
}
.rm13-title-star {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.44) !important;
  background: rgba(255,255,255,.86) !important;
  color: #3b291d !important;
  font-size: 1rem !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 14px rgba(65,38,18,.12), inset 0 1px 0 rgba(255,255,255,.55) !important;
  transition: filter .16s ease, box-shadow .16s ease !important;
}
.rm13-title-star.active {
  background: #f7c56f !important;
  color: #3b291d !important;
}
.rm13-title-star:hover { filter: brightness(1.04) !important; }

.premium-task-row.rm-reference-card .task-actions.rm13-actions {
  display: grid !important;
  grid-template-columns: 44px 44px 92px !important;
  grid-template-rows: repeat(2, 40px) !important;
  gap: 7px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  align-content: center !important;
  justify-content: end !important;
  min-width: 194px !important;
  max-width: 194px !important;
  width: 194px !important;
  flex-wrap: nowrap !important;
}
.premium-task-row.rm-reference-card .task-actions.rm13-actions .icon-btn,
.premium-task-row.rm-reference-card .task-actions.rm13-actions .btn,
.premium-task-row.rm-reference-card .task-actions.rm13-actions .rm-action-empty {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 !important;
  transform: none !important;
}
.premium-task-row.rm-reference-card .task-actions.rm13-actions .btn:hover,
.premium-task-row.rm-reference-card .task-actions.rm13-actions .icon-btn:hover {
  transform: none !important;
  filter: brightness(1.04) !important;
}
.rm13-actions .rm-action-drag { grid-column: 1 !important; grid-row: 1 !important; }
.rm13-actions .rm-action-skip { grid-column: 2 !important; grid-row: 1 !important; }
.rm13-actions .rm-action-complete {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 100% !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
}
.rm13-actions .rm-action-edit { grid-column: 1 !important; grid-row: 2 !important; }
.rm13-actions .rm-action-add,
.rm13-actions .rm-action-empty { grid-column: 2 !important; grid-row: 2 !important; }
.rm13-actions .rm-action-delete { grid-column: 3 !important; grid-row: 2 !important; }
.rm13-actions .rm-action-empty {
  opacity: 0 !important;
  pointer-events: none !important;
}
.rm13-subtasks {
  margin-top: 6px !important;
}
.rm13-subtasks summary {
  min-height: 34px !important;
  padding: 8px 12px !important;
}

@media (max-width: 900px) {
  .premium-task-row.rm-reference-card.rm13-slim-card {
    grid-template-columns: 1fr !important;
    padding: 13px !important;
  }
  .premium-task-row.rm-reference-card .task-actions.rm13-actions {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 42px) !important;
    gap: 8px !important;
    justify-content: stretch !important;
  }
  .premium-task-row.rm-reference-card .task-actions.rm13-actions .icon-btn,
  .premium-task-row.rm-reference-card .task-actions.rm13-actions .btn,
  .premium-task-row.rm-reference-card .task-actions.rm13-actions .rm-action-empty {
    height: 42px !important;
    min-height: 42px !important;
  }
  .rm13-actions .rm-action-complete {
    font-size: .78rem !important;
  }
}
@media (max-width: 620px) {
  .rm13-title-status-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .rm13-info-line { justify-content: flex-start !important; }
  .rm13-metrics {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
    width: 100% !important;
  }
}
@media (max-width: 420px) {
  .premium-task-row.rm-reference-card.rm13-slim-card {
    padding: 12px !important;
    border-radius: 20px !important;
  }
  .rm13-slim-card .task-title-main {
    font-size: .98rem !important;
  }
  .premium-task-row.rm-reference-card .task-actions.rm13-actions {
    grid-template-rows: repeat(2, 39px) !important;
    gap: 6px !important;
  }
  .premium-task-row.rm-reference-card .task-actions.rm13-actions .icon-btn,
  .premium-task-row.rm-reference-card .task-actions.rm13-actions .btn {
    height: 39px !important;
    min-height: 39px !important;
    border-radius: 12px !important;
  }
  .rm13-actions .rm-action-complete { font-size: .68rem !important; }
}


/* ════════════════════════════════════════
   RM14 habit-only polish requested by user
   - keep task cards unchanged
   - put habit actions in one straight line
   - improve XP/text visibility
   - remove habit title visual truncation
════════════════════════════════════════ */
.rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  overflow: visible !important;
}
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-empty {
  display: none !important;
}
.rm-habit-draggable-card .task-actions.rm13-habit-actions .icon-btn,
.rm-habit-draggable-card .task-actions.rm13-habit-actions .btn {
  flex: 0 0 auto !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-drag { order: 1 !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-skip { order: 2 !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-edit { order: 3 !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-delete { order: 4 !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-complete {
  order: 5 !important;
  width: 98px !important;
  min-width: 98px !important;
  padding: 0 12px !important;
  font-size: .76rem !important;
  white-space: nowrap !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Better readability without touching the task logic/layout. */
.rm-reference-card .task-title-main,
.rm-redesigned-card .task-title-main {
  color: var(--text) !important;
  text-shadow: none !important;
}
body.dark .rm-reference-card .task-title-main,
body.theme-navy .rm-reference-card .task-title-main {
  color: #fff7ed !important;
}
.rm-habit-draggable-card .task-title-main {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: inline !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.rm-habit-draggable-card .rm-reference-title-line,
.rm-habit-draggable-card .rm12-title-line,
.rm-habit-draggable-card .rm13-title-line {
  min-width: 0 !important;
  overflow: visible !important;
}
.rm-reference-card .rm-xp-circle,
.rm13-metrics .rm-xp-circle {
  background: rgba(255, 250, 242, .96) !important;
  color: #1f140c !important;
  border-color: rgba(226, 196, 150, .72) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.76) !important;
}
.rm-reference-card .rm-xp-circle strong,
.rm-reference-card .rm-xp-circle small,
.rm13-metrics .rm-xp-circle strong,
.rm13-metrics .rm-xp-circle small {
  color: #1f140c !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.rm-reference-card .rm-estimate-bar,
.rm-reference-card .rm-streak-pill,
.rm-reference-card .rm-category-pill,
.rm-reference-card .rm-priority-badge {
  color: #24170f !important;
  text-shadow: none !important;
}
body.dark .rm-reference-card .rm-estimate-bar,
body.theme-navy .rm-reference-card .rm-estimate-bar {
  background: rgba(255, 250, 242, .94) !important;
  color: #21160f !important;
}
body.dark .rm-reference-card .rm-streak-pill,
body.theme-navy .rm-reference-card .rm-streak-pill,
body.dark .rm-reference-card .rm-category-pill,
body.theme-navy .rm-reference-card .rm-category-pill,
body.dark .rm-reference-card .rm-priority-badge,
body.theme-navy .rm-reference-card .rm-priority-badge {
  background: rgba(255, 250, 242, .14) !important;
  color: #fff7ed !important;
  border-color: rgba(226,196,150,.22) !important;
}

@media (max-width: 900px) {
  .rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions::-webkit-scrollbar { display: none !important; }
}
@media (max-width: 430px) {
  .rm-habit-draggable-card .task-actions.rm13-habit-actions .icon-btn,
  .rm-habit-draggable-card .task-actions.rm13-habit-actions .btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
  }
  .rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-complete {
    width: 88px !important;
    min-width: 88px !important;
    font-size: .68rem !important;
  }
}


/* ════════════════════════════════════════
   RM15 habit action alignment + no title limits
   Keep layout changes isolated to Habits and text wrapping.
════════════════════════════════════════ */
.premium-task-row.rm-reference-card.rm-habit-draggable-card.rm13-slim-card {
  grid-template-columns: minmax(0, 1fr) 268px !important;
  column-gap: 18px !important;
  align-items: center !important;
}
.rm-habit-draggable-card .rm13-main,
.rm-habit-draggable-card .rm13-meta {
  min-width: 0 !important;
  width: 100% !important;
}
.rm-habit-draggable-card .rm13-title-status-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
}
.rm-habit-draggable-card .rm13-metrics {
  width: min(100%, 490px) !important;
  grid-template-columns: minmax(132px, 1fr) 42px minmax(124px, .82fr) !important;
  gap: 8px !important;
}
.rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
  display: grid !important;
  grid-template-columns: 38px 38px 38px 38px 86px !important;
  grid-template-rows: 36px !important;
  gap: 7px !important;
  width: 268px !important;
  min-width: 268px !important;
  max-width: 268px !important;
  justify-content: end !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  align-content: center !important;
  margin-left: auto !important;
  overflow: visible !important;
}
.rm-habit-draggable-card .task-actions.rm13-habit-actions .icon-btn,
.rm-habit-draggable-card .task-actions.rm13-habit-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  font-size: .86rem !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 !important;
  transform: none !important;
}
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-complete {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-drag { grid-column: 1 !important; grid-row: 1 !important; order: initial !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-skip { grid-column: 2 !important; grid-row: 1 !important; order: initial !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-edit { grid-column: 3 !important; grid-row: 1 !important; order: initial !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-delete { grid-column: 4 !important; grid-row: 1 !important; order: initial !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-complete { grid-column: 5 !important; grid-row: 1 !important; order: initial !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-empty { display: none !important; }

/* Improve XP/text visibility without changing task/habit logic. */
.rm-reference-card .rm-xp-circle,
.rm13-metrics .rm-xp-circle {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255, 250, 242, .98) !important;
  color: #1d120b !important;
  border-color: rgba(255,255,255,.78) !important;
}
.rm-reference-card .rm-xp-circle strong,
.rm-reference-card .rm-xp-circle small,
.rm13-metrics .rm-xp-circle strong,
.rm13-metrics .rm-xp-circle small {
  color: #1d120b !important;
  opacity: 1 !important;
  line-height: .92 !important;
}
.rm-reference-card .rm-estimate-bar,
.rm-reference-card .rm-streak-pill,
.rm-reference-card .rm-category-pill,
.rm-reference-card .rm-priority-badge {
  font-weight: 950 !important;
}

/* Remove visual word limits/truncation on task and habit titles. */
.task-title-main,
.rm-reference-card .task-title-main,
.rm-redesigned-card .task-title-main,
.todo-card-row .task-title-main,
.rm-habit-draggable-card .task-title-main {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  display: inline !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
.rm-reference-title-line,
.rm12-title-line,
.rm13-title-line,
.rm13-title-status-row {
  min-width: 0 !important;
  overflow: visible !important;
}

@media (max-width: 900px) {
  .premium-task-row.rm-reference-card.rm-habit-draggable-card.rm13-slim-card {
    grid-template-columns: 1fr !important;
  }
  .rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: repeat(4, 42px) minmax(96px, 1fr) !important;
    grid-template-rows: 40px !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }
  .rm-habit-draggable-card .task-actions.rm13-habit-actions .icon-btn,
  .rm-habit-draggable-card .task-actions.rm13-habit-actions .btn {
    height: 40px !important;
    min-height: 40px !important;
  }
}
@media (max-width: 520px) {
  .rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
    grid-template-columns: repeat(4, 38px) minmax(86px, 1fr) !important;
    gap: 6px !important;
  }
  .rm-habit-draggable-card .rm13-metrics {
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
  }
}


/* ════════════════════════════════════════
   RM16 Habits — difficulty inline with action controls
   Scope: habit cards only. Tasks and logic remain unchanged.
════════════════════════════════════════ */
.premium-task-row.rm-reference-card.rm-habit-draggable-card.rm13-slim-card {
  grid-template-columns: minmax(0, 1fr) 358px !important;
}
.rm-habit-draggable-card .rm13-title-status-row {
  grid-template-columns: minmax(0, 1fr) !important;
}
.rm-habit-draggable-card .rm13-info-line:empty {
  display: none !important;
}
.rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
  grid-template-columns: 82px 38px 38px 38px 38px 86px !important;
  width: 358px !important;
  min-width: 358px !important;
  max-width: 358px !important;
  gap: 7px !important;
  align-items: center !important;
}
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-difficulty {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 82px !important;
  max-width: 82px !important;
  min-height: 30px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: .72rem !important;
}
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-drag { grid-column: 2 !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-skip { grid-column: 3 !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-edit { grid-column: 4 !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-delete { grid-column: 5 !important; }
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-complete { grid-column: 6 !important; }

@media (max-width: 900px) {
  .premium-task-row.rm-reference-card.rm-habit-draggable-card.rm13-slim-card {
    grid-template-columns: 1fr !important;
  }
  .rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: 82px repeat(4, 40px) minmax(90px, 1fr) !important;
    gap: 7px !important;
  }
}
@media (max-width: 520px) {
  .rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
    grid-template-columns: 76px repeat(4, 36px) minmax(78px, 1fr) !important;
    gap: 5px !important;
  }
  .rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-difficulty {
    width: 76px !important;
    max-width: 76px !important;
    font-size: .67rem !important;
  }
}

/* ════════════════════════════════════════
   RM17 Habits — centred controls + compact detail pills
   Scope: habit cards only; tasks and behaviour remain unchanged.
════════════════════════════════════════ */
.premium-task-row.rm-reference-card.rm-habit-draggable-card.rm13-slim-card {
  align-items: center !important;
}
.rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
  align-self: center !important;
  place-self: center end !important;
  align-items: center !important;
  align-content: center !important;
}
.rm-habit-draggable-card .task-actions.rm13-habit-actions .icon-btn,
.rm-habit-draggable-card .task-actions.rm13-habit-actions .btn,
.rm-habit-draggable-card .task-actions.rm13-habit-actions .rm-action-difficulty {
  align-self: center !important;
}

/* The habit metrics are short values, so they should read as compact chips. */
.rm-habit-draggable-card .rm13-metrics {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: auto !important;
  max-width: 100% !important;
  gap: 8px !important;
  margin-top: 9px !important;
}
.rm-habit-draggable-card .rm13-metrics .rm-estimate-bar,
.rm-habit-draggable-card .rm13-metrics .rm-streak-pill,
.rm-habit-draggable-card .rm13-metrics .rm-xp-circle {
  min-height: 28px !important;
  height: 28px !important;
  width: auto !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.rm-habit-draggable-card .rm13-metrics .rm-estimate-bar {
  min-width: 82px !important;
  max-width: max-content !important;
}
.rm-habit-draggable-card .rm13-metrics .rm-streak-pill {
  min-width: 0 !important;
  max-width: max-content !important;
  padding-inline: 11px !important;
}
.rm-habit-draggable-card .rm13-metrics .rm-xp-circle {
  min-width: 55px !important;
  max-width: max-content !important;
  gap: 3px !important;
  flex-direction: row !important;
  background: rgba(255,250,242,.14) !important;
  color: #fff7ed !important;
  border: 1px solid rgba(226,196,150,.22) !important;
  box-shadow: none !important;
}
.rm-habit-draggable-card .rm13-metrics .rm-xp-circle strong,
.rm-habit-draggable-card .rm13-metrics .rm-xp-circle small {
  display: inline !important;
  color: inherit !important;
  opacity: 1 !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
}
.rm-habit-draggable-card .rm13-metrics .rm-xp-circle small {
  font-size: .64rem !important;
}

body:not(.dark):not(.theme-navy):not(.theme-pink):not(.theme-glass) .rm-habit-draggable-card .rm13-metrics .rm-xp-circle {
  background: rgba(255,250,242,.92) !important;
  color: #24170f !important;
  border-color: rgba(200,149,90,.26) !important;
}
body.dark .rm-habit-draggable-card .rm13-metrics .rm-estimate-bar,
body.theme-navy .rm-habit-draggable-card .rm13-metrics .rm-estimate-bar {
  background: rgba(255,250,242,.94) !important;
  color: #21160f !important;
}
body.dark .rm-habit-draggable-card .rm13-metrics .rm-streak-pill,
body.theme-navy .rm-habit-draggable-card .rm13-metrics .rm-streak-pill,
body.dark .rm-habit-draggable-card .rm13-metrics .rm-xp-circle,
body.theme-navy .rm-habit-draggable-card .rm13-metrics .rm-xp-circle {
  background: rgba(255,250,242,.12) !important;
  color: #fff7ed !important;
  border-color: rgba(226,196,150,.22) !important;
}

@media (max-width: 900px) {
  .rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
    place-self: center stretch !important;
    justify-content: end !important;
  }
}
@media (max-width: 520px) {
  .rm-habit-draggable-card .rm13-metrics {
    gap: 6px !important;
  }
  .rm-habit-draggable-card .rm13-metrics .rm-estimate-bar,
  .rm-habit-draggable-card .rm13-metrics .rm-streak-pill,
  .rm-habit-draggable-card .rm13-metrics .rm-xp-circle {
    height: 27px !important;
    min-height: 27px !important;
    padding-inline: 10px !important;
  }
}

/* ════════════════════════════════════════
   RM18 Habits — vertically center the right-side control strip
   Scope: desktop/tablet habit card controls only; sizes, shapes and logic unchanged.
════════════════════════════════════════ */
@media (min-width: 901px) {
  .rm-habit-draggable-card .task-actions.rm13-actions.rm13-habit-actions {
    position: relative !important;
    top: 18px !important;
  }
}

/* ════════════════════════════════════════
   RM19 Tasks — match compact habit metric pills + green Complete CTA
   Scope: task card metric visuals and active Complete color only.
   Task card layout and action button positions are intentionally unchanged.
════════════════════════════════════════ */
.rm13-todo-card .rm13-metrics {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: auto !important;
  max-width: 100% !important;
  gap: 8px !important;
  margin-top: 9px !important;
}
.rm13-todo-card .rm13-metrics .rm-estimate-bar,
.rm13-todo-card .rm13-metrics .rm-category-pill,
.rm13-todo-card .rm13-metrics .rm-xp-circle {
  min-height: 28px !important;
  height: 28px !important;
  width: auto !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.rm13-todo-card .rm13-metrics .rm-estimate-bar {
  min-width: 82px !important;
  max-width: max-content !important;
}
.rm13-todo-card .rm13-metrics .rm-category-pill {
  min-width: 0 !important;
  max-width: max-content !important;
  padding-inline: 11px !important;
}
.rm13-todo-card .rm13-metrics .rm-xp-circle {
  min-width: 55px !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  gap: 3px !important;
  flex-direction: row !important;
  background: rgba(255,250,242,.14) !important;
  color: #fff7ed !important;
  border: 1px solid rgba(226,196,150,.22) !important;
  box-shadow: none !important;
}
.rm13-todo-card .rm13-metrics .rm-xp-circle strong,
.rm13-todo-card .rm13-metrics .rm-xp-circle small {
  display: inline !important;
  color: inherit !important;
  opacity: 1 !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-transform: lowercase !important;
}
.rm13-todo-card .rm13-metrics .rm-xp-circle small {
  font-size: .64rem !important;
}
body:not(.dark):not(.theme-navy):not(.theme-pink):not(.theme-glass) .rm13-todo-card .rm13-metrics .rm-xp-circle {
  background: rgba(255,250,242,.92) !important;
  color: #24170f !important;
  border-color: rgba(200,149,90,.26) !important;
}
body.dark .rm13-todo-card .rm13-metrics .rm-estimate-bar,
body.theme-navy .rm13-todo-card .rm13-metrics .rm-estimate-bar {
  background: rgba(255,250,242,.94) !important;
  color: #21160f !important;
}
body.dark .rm13-todo-card .rm13-metrics .rm-category-pill,
body.theme-navy .rm13-todo-card .rm13-metrics .rm-category-pill,
body.dark .rm13-todo-card .rm13-metrics .rm-xp-circle,
body.theme-navy .rm13-todo-card .rm13-metrics .rm-xp-circle {
  background: rgba(255,250,242,.12) !important;
  color: #fff7ed !important;
  border-color: rgba(226,196,150,.22) !important;
}

/* Preserve the existing task action grid; change only the active Complete button colour. */
.rm13-todo-card .task-actions.rm13-todo-actions .task-complete-btn.btn-primary {
  background: #32ad6f !important;
  border-color: rgba(71, 210, 133, .45) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(34, 197, 94, .24), inset 0 1px 0 rgba(255,255,255,.19) !important;
}
.rm13-todo-card .task-actions.rm13-todo-actions .task-complete-btn.btn-primary:hover {
  filter: brightness(1.06) !important;
  background: #32ad6f !important;
}

@media (max-width: 520px) {
  .rm13-todo-card .rm13-metrics {
    gap: 6px !important;
  }
  .rm13-todo-card .rm13-metrics .rm-estimate-bar,
  .rm13-todo-card .rm13-metrics .rm-category-pill,
  .rm13-todo-card .rm13-metrics .rm-xp-circle {
    height: 27px !important;
    min-height: 27px !important;
    padding-inline: 10px !important;
  }
}


/* ════════════════════════════════════════
   RM20 mobile-only PDF reference layout
   All overrides are constrained to phone widths so desktop styling is unchanged.
════════════════════════════════════════ */
@media (max-width: 768px) {
  .page.dashboard {
    width: 100% !important;
    max-width: none !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
  }

  .dashboard .top-bar {
    min-height: 42px !important;
    margin: 0 0 4px !important;
    padding: 0 3px !important;
    align-items: center !important;
  }
  .dashboard .dashboard-brand .brand-text {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(200,149,90,.14) !important;
    font-size: .82rem !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
  }
  .dashboard .top-bar-right {
    gap: 6px !important;
  }
  .dashboard .top-bar-right .icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 11px !important;
    font-size: .88rem !important;
  }

  /* Mobile home: the PDF-inspired stack. */
  .dashboard[data-mobile-view="home"] .mobile-coffee-link,
  .dashboard[data-mobile-view="home"] .coffee-banner {
    display: none !important;
  }
  .dashboard[data-mobile-view="home"] .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  .dashboard[data-mobile-view="home"] .hero-card {
    order: 1 !important;
    padding: 14px !important;
    border-radius: 22px !important;
    min-height: 158px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .dashboard[data-mobile-view="home"] .hero-main {
    gap: 10px !important;
    align-items: center !important;
  }
  .dashboard[data-mobile-view="home"] .avatar-box {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 18px !important;
    font-size: 1.65rem !important;
  }
  .dashboard[data-mobile-view="home"] .hero-copy h2 {
    font-size: 1.1rem !important;
    margin: 0 !important;
  }
  .dashboard[data-mobile-view="home"] .hero-name-row {
    gap: 7px !important;
  }
  .dashboard[data-mobile-view="home"] .hero-name-row .pill {
    padding: 4px 8px !important;
    font-size: .62rem !important;
  }
  .dashboard[data-mobile-view="home"] #heroMeta {
    font-size: .66rem !important;
  }
  .dashboard[data-mobile-view="home"] .xp-wrap {
    margin-top: 6px !important;
  }
  .dashboard[data-mobile-view="home"] .xp-wrap .progress-track {
    height: 6px !important;
  }
  .dashboard[data-mobile-view="home"] .xp-wrap .split-line {
    font-size: .6rem !important;
    margin-top: 4px !important;
  }
  .dashboard[data-mobile-view="home"] .stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 !important;
  }
  .dashboard[data-mobile-view="home"] .stats-grid .mini-card {
    min-height: 48px !important;
    padding: 6px 2px !important;
    border-radius: 12px !important;
    text-align: center !important;
    box-shadow: none !important;
  }
  .dashboard[data-mobile-view="home"] .stats-grid .mini-title {
    font-size: .47rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .dashboard[data-mobile-view="home"] .stats-grid .big-metric {
    font-size: .7rem !important;
    margin-top: 3px !important;
  }

  .dashboard[data-mobile-view="home"] .schedule-card {
    order: 2 !important;
    padding: 10px !important;
    border-radius: 21px !important;
    display: grid !important;
    gap: 8px !important;
  }
  .dashboard[data-mobile-view="home"] .schedule-card > .section-title {
    display: none !important;
  }
  .rm20-mobile-schedule-heading {
    display: none;
  }
  .dashboard[data-mobile-view="home"] .rm20-mobile-schedule-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1px 4px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-mobile-schedule-heading strong {
    font-size: .82rem !important;
    font-weight: 950 !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-mobile-schedule-heading small {
    color: var(--muted) !important;
    font-size: .59rem !important;
    font-weight: 800 !important;
  }
  .dashboard[data-mobile-view="home"] .schedule-card .two-cards {
    gap: 7px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .dashboard[data-mobile-view="home"] .schedule-card .mini-card {
    padding: 9px 8px !important;
    min-height: 86px !important;
    border-radius: 15px !important;
  }
  .dashboard[data-mobile-view="home"] .schedule-card .mini-title {
    font-size: .61rem !important;
  }
  .dashboard[data-mobile-view="home"] .schedule-card .big-metric {
    margin: 5px 0 4px !important;
    font-size: 1rem !important;
  }
  .dashboard[data-mobile-view="home"] .schedule-card .tp-row {
    display: flex !important;
    gap: 3px !important;
    justify-content: space-between !important;
    font-size: .5rem !important;
    line-height: 1.2 !important;
  }
  .dashboard[data-mobile-view="home"] .schedule-card .tp-label {
    display: none !important;
  }
  .dashboard[data-mobile-view="home"] .schedule-card .tp-val {
    max-width: 100% !important;
    font-size: .53rem !important;
  }

  .dashboard[data-mobile-view="home"] .rm-home-calendar-card.rm20-mobile-calendar {
    margin: 0 !important;
    padding: 11px !important;
    border-radius: 21px !important;
    min-height: 116px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-calendar-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-calendar-head .rm-kicker {
    font-size: .53rem !important;
    letter-spacing: .08em !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-calendar-head h3 {
    font-size: .9rem !important;
    margin: 2px 0 !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-calendar-head p {
    font-size: .55rem !important;
    line-height: 1.3 !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-calendar-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    max-width: 136px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-calendar-controls .btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: .57rem !important;
    border-radius: 9px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-week-grid.day-only {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-week-grid.day-only .rm-week-day {
    min-height: 58px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-week-grid.expanded {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-week-grid .rm-week-day {
    padding: 7px !important;
    border-radius: 12px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-week-grid .rm-week-day header {
    margin-bottom: 5px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-week-grid .rm-week-day header span,
  .dashboard[data-mobile-view="home"] .rm20-week-grid .rm-week-day header em {
    font-size: .53rem !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-week-grid .rm-week-day header strong {
    font-size: .72rem !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-week-grid .rm-week-task {
    min-height: 30px !important;
    padding: 5px !important;
    gap: 4px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-week-grid .rm-week-task b,
  .dashboard[data-mobile-view="home"] .rm20-week-grid .rm-week-task small,
  .dashboard[data-mobile-view="home"] .rm20-week-grid .rm-week-empty {
    font-size: .52rem !important;
  }

  .dashboard[data-mobile-view="home"] #goalsCard {
    margin: 0 !important;
  }
  .dashboard[data-mobile-view="home"] #goalsCard:not(.rm20-mobile-goals-expanded) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .dashboard[data-mobile-view="home"] #goalsCard:not(.rm20-mobile-goals-expanded) > :not(.rm20-goal-shortcuts) {
    display: none !important;
  }
  .rm20-goal-shortcuts {
    display: none;
  }
  .dashboard[data-mobile-view="home"] .rm20-goal-shortcuts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-goal-tile {
    border: 1px solid var(--border) !important;
    border-radius: 17px !important;
    min-height: 70px !important;
    padding: 10px !important;
    background: var(--card) !important;
    color: var(--text) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    font-family: inherit !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-goal-tile span {
    font-size: .78rem !important;
    font-weight: 950 !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-goal-tile small {
    font-size: .56rem !important;
    color: var(--muted) !important;
    font-weight: 800 !important;
  }
  .dashboard[data-mobile-view="home"] #goalsCard.rm20-mobile-goals-expanded {
    padding: 12px !important;
    border-radius: 20px !important;
  }
  .dashboard[data-mobile-view="home"] #goalsCard.rm20-mobile-goals-expanded .rm20-goal-tile {
    display: none !important;
  }
  .dashboard[data-mobile-view="home"] .rm20-goal-collapse {
    display: none !important;
    grid-column: 1 / -1 !important;
  }
  .dashboard[data-mobile-view="home"] #goalsCard.rm20-mobile-goals-expanded .rm20-goal-collapse {
    display: inline-flex !important;
    min-height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--border) !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--muted) !important;
    font: 800 .65rem/1 inherit !important;
    margin-bottom: 3px !important;
  }

  /* The dock keeps the same controls, with phone-size proportions. */
  .mobile-bottom-nav,
  .mobile-bottom-nav.has-dock-add {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 20px) !important;
    max-width: 460px !important;
    padding: 6px !important;
    gap: 3px !important;
    border-radius: 18px !important;
  }
  .mobile-bottom-nav .mobile-nav-item,
  .mobile-bottom-nav.has-dock-add .mobile-nav-item {
    height: 45px !important;
    min-height: 45px !important;
    border-radius: 13px !important;
    padding: 3px 1px !important;
  }
  .mobile-bottom-nav .mobile-nav-item span,
  .mobile-bottom-nav.has-dock-add .mobile-nav-item span {
    font-size: .78rem !important;
  }
  .mobile-bottom-nav .mobile-nav-item small,
  .mobile-bottom-nav.has-dock-add .mobile-nav-item small {
    font-size: .43rem !important;
  }
  .mobile-bottom-nav.has-dock-add .rm-dock-add-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 1px !important;
    font-size: 1.38rem !important;
  }

  /* Mobile habits: compact stacked screen and gesture-driven action rails. */
  .dashboard[data-mobile-view="habits"] .coffee-banner {
    display: flex !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    margin: 0 0 7px !important;
    border-radius: 12px !important;
  }
  .dashboard[data-mobile-view="habits"] .coffee-banner-copy strong {
    font-size: .62rem !important;
  }
  .dashboard[data-mobile-view="habits"] .coffee-banner-copy small,
  .dashboard[data-mobile-view="habits"] .coffee-banner-icon {
    display: none !important;
  }
  .dashboard[data-mobile-view="habits"] .coffee-banner-cta {
    font-size: .58rem !important;
    padding: 5px 8px !important;
  }
  .dashboard[data-mobile-view="habits"] .content-grid,
  .dashboard[data-mobile-view="habits"] .left-col,
  .dashboard[data-mobile-view="habits"] .left-col > .card,
  .dashboard[data-mobile-view="habits"] #boardContent {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .dashboard[data-mobile-view="habits"] .left-col > .card > .section-title,
  .dashboard[data-mobile-view="habits"] #boardTabs,
  .dashboard[data-mobile-view="habits"] #boardContent > .board-toolbar,
  .dashboard[data-mobile-view="habits"] #habitManagePanel {
    display: none !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-overview {
    padding: 12px !important;
    margin: 0 0 9px !important;
    border-radius: 18px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-overview-head h3 {
    font-size: .92rem !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-kicker {
    font-size: .54rem !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-overview-head > strong {
    font-size: .86rem !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-track {
    height: 7px !important;
    margin: 8px 0 5px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-overview-meta {
    font-size: .56rem !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-stat-row {
    margin-top: 8px !important;
    gap: 5px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-stat-row article {
    padding: 6px 4px !important;
    border-radius: 9px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-stat-row span {
    font-size: .48rem !important;
  }
  .dashboard[data-mobile-view="habits"] .rm-progress-stat-row strong {
    font-size: .67rem !important;
  }
  .dashboard[data-mobile-view="habits"] #habitList,
  .dashboard[data-mobile-view="habits"] .completed-list .task-list {
    display: grid !important;
    gap: 7px !important;
  }

  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit {
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    min-height: 68px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(200,149,90,.16) !important;
    touch-action: pan-y !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-main {
    position: relative !important;
    z-index: 2 !important;
    min-height: 68px !important;
    width: 100% !important;
    padding: 10px 9px !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(200,149,90,.10), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(249,242,232,.95)) !important;
    transform: translateX(var(--rm20-swipe-offset, 0px)) !important;
    transition: transform .23s cubic-bezier(.2,.75,.28,1) !important;
  }
  body.dark .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-main,
  body.theme-navy .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-main {
    background: linear-gradient(135deg, rgba(37,31,26,.98), rgba(22,18,16,.98)) !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-swiping .rm13-main {
    transition: none !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-meta {
    gap: 5px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-title-status-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-title-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .task-emoji-btn {
    display: none !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .task-title-main {
    font-size: .78rem !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-difficulty-marker {
    width: 5px !important;
    min-width: 5px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    overflow: hidden !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-difficulty-marker.difficulty-easy {
    background: #22c55e !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-difficulty-marker.difficulty-medium {
    background: #eab308 !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-difficulty-marker.difficulty-hard {
    background: #ef4444 !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-front-complete {
    min-height: 27px !important;
    height: 27px !important;
    min-width: 63px !important;
    width: auto !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: .55rem !important;
    line-height: 1 !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-metrics {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    margin: 3px 0 0 11px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-metrics .rm-estimate-bar,
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-metrics .rm-xp-circle,
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-metrics .rm-streak-pill {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 7px !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: .5rem !important;
    box-shadow: none !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-metrics .rm-xp-circle strong,
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-metrics .rm-xp-circle small {
    font-size: .5rem !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-schedule-note {
    display: none !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-actions.rm13-habit-actions {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 13px 8px !important;
    background: transparent !important;
    pointer-events: none !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-actions .icon-btn {
    position: absolute !important;
    top: 14px !important;
    display: grid !important;
    pointer-events: auto !important;
    width: 39px !important;
    min-width: 39px !important;
    height: 39px !important;
    min-height: 39px !important;
    border-radius: 11px !important;
    font-size: .74rem !important;
    background: rgba(255,255,255,.84) !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm-action-skip {
    left: 8px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm-action-edit {
    left: 53px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm-action-drag {
    right: 53px !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm-action-delete {
    right: 8px !important;
  }
  .dashboard[data-mobile-view="habits"] .completed-section {
    margin-top: 8px !important;
    border-radius: 14px !important;
  }
  .dashboard[data-mobile-view="habits"] .completed-toggle {
    min-height: 39px !important;
    padding: 0 10px !important;
    font-size: .65rem !important;
  }
}

@media (max-width: 360px) {
  .dashboard[data-mobile-view="home"] .stats-grid .mini-title {
    font-size: .42rem !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-metrics .rm-streak-pill {
    padding-inline: 5px !important;
  }
}

@media (max-width: 768px) {
  .dashboard[data-mobile-view="habits"] .mobile-coffee-link { display: none !important; }
}


/* RM20 desktop guard: mobile helper nodes injected while crossing breakpoints must not alter desktop layout. */
.rm20-mobile-schedule-heading,
.rm20-goal-shortcuts {
  display: none !important;
}

@media (max-width: 768px) {
  .dashboard[data-mobile-view="home"] .rm20-mobile-schedule-heading {
    display: flex !important;
  }

  .dashboard[data-mobile-view="home"] .rm20-goal-shortcuts {
    display: grid !important;
  }
}


/* RM20 fit-and-swipe corrections: keep mobile home content above the dock and keep habit rails hidden until a swipe. */
@media (max-width: 768px) {
  .dashboard[data-mobile-view="home"] .schedule-card .welcome-back-notice {
    display: none !important;
  }

  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-main {
    display: block !important;
    box-sizing: border-box !important;
  }
}


/* RM20 opened-left rail polish: keep the habit name readable while the right-side controls are exposed. */
@media (max-width: 768px) {
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-open-left .rm13-main {
    overflow: hidden !important;
  }

  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-open-left .rm13-meta {
    width: calc(100% - 104px) !important;
    transform: translateX(104px) !important;
  }

  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-open-left .rm-streak-pill {
    display: none !important;
  }
}

/* ════════════════════════════════════════
   RM21 mobile Tasks screen - mirror the PDF-inspired Habits treatment
   Scope: phone-width Tasks view only. Desktop and stored data remain untouched.
════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Focused tasks screen: compact banner, clean page surface, dock remains unchanged. */
  .dashboard[data-mobile-view="todos"] .mobile-coffee-link { display: none !important; }
  .dashboard[data-mobile-view="todos"] .coffee-banner {
    display: flex !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    margin: 0 0 7px !important;
    border-radius: 12px !important;
  }
  .dashboard[data-mobile-view="todos"] .coffee-banner-copy strong {
    font-size: .62rem !important;
  }
  .dashboard[data-mobile-view="todos"] .coffee-banner-copy small,
  .dashboard[data-mobile-view="todos"] .coffee-banner-icon {
    display: none !important;
  }
  .dashboard[data-mobile-view="todos"] .coffee-banner-cta {
    font-size: .58rem !important;
    padding: 5px 8px !important;
  }
  .dashboard[data-mobile-view="todos"] .content-grid,
  .dashboard[data-mobile-view="todos"] .left-col,
  .dashboard[data-mobile-view="todos"] .left-col > .card,
  .dashboard[data-mobile-view="todos"] #boardContent {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .dashboard[data-mobile-view="todos"] .left-col > .card > .section-title,
  .dashboard[data-mobile-view="todos"] #boardTabs,
  .dashboard[data-mobile-view="todos"] #boardContent > .board-toolbar {
    display: none !important;
  }

  /* The same compact completion block used on Habits, now for Tasks. */
  .dashboard[data-mobile-view="todos"] .rm-progress-overview {
    padding: 12px !important;
    margin: 0 0 8px !important;
    border-radius: 18px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm-progress-overview-head h3 {
    font-size: .92rem !important;
  }
  .dashboard[data-mobile-view="todos"] .rm-progress-kicker {
    font-size: .54rem !important;
  }
  .dashboard[data-mobile-view="todos"] .rm-progress-overview-head > strong {
    font-size: .86rem !important;
  }
  .dashboard[data-mobile-view="todos"] .rm-progress-track {
    height: 7px !important;
    margin: 8px 0 5px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm-progress-overview-meta {
    font-size: .56rem !important;
  }
  .dashboard[data-mobile-view="todos"] .rm-progress-stat-row {
    margin-top: 8px !important;
    gap: 5px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm-progress-stat-row article {
    padding: 6px 4px !important;
    border-radius: 9px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm-progress-stat-row span {
    font-size: .48rem !important;
  }
  .dashboard[data-mobile-view="todos"] .rm-progress-stat-row strong {
    font-size: .67rem !important;
  }

  /* Keep every task organiser feature, but size it for the narrow layout. */
  .dashboard[data-mobile-view="todos"] .cat-filter-bar {
    min-height: 38px !important;
    margin: 0 0 6px !important;
    padding: 5px !important;
    gap: 5px !important;
    border-radius: 14px !important;
  }
  .dashboard[data-mobile-view="todos"] .cat-filter-btn,
  .dashboard[data-mobile-view="todos"] .cat-add-btn {
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 9px !important;
    font-size: .58rem !important;
  }
  .dashboard[data-mobile-view="todos"] .cat-count {
    font-size: .53rem !important;
    min-height: 16px !important;
    min-width: 16px !important;
    padding-inline: 4px !important;
  }
  .dashboard[data-mobile-view="todos"] .task-organizer-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin: 0 0 8px !important;
    padding: 6px !important;
    gap: 5px !important;
    border-radius: 14px !important;
  }
  .dashboard[data-mobile-view="todos"] .task-organizer-bar label {
    gap: 3px !important;
    font-size: .48rem !important;
  }
  .dashboard[data-mobile-view="todos"] .task-organizer-bar select {
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 5px !important;
    font-size: .53rem !important;
    border-radius: 9px !important;
  }
  .dashboard[data-mobile-view="todos"] #catManagePanel {
    margin: 0 0 8px !important;
    border-radius: 14px !important;
  }
  .dashboard[data-mobile-view="todos"] #todoGroupList .task-list,
  .dashboard[data-mobile-view="todos"] .completed-list .task-list {
    display: grid !important;
    gap: 7px !important;
    margin-top: 0 !important;
  }

  /* Default task card face: task, complete button, time / XP / category. */
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task {
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    min-height: 70px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(200,149,90,.16) !important;
    touch-action: pan-y !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-main {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    box-sizing: border-box !important;
    min-height: 70px !important;
    width: 100% !important;
    padding: 10px 9px !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(200,149,90,.10), transparent 34%),
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(249,242,232,.95)) !important;
    transform: translateX(var(--rm21-swipe-offset, 0px)) !important;
    transition: transform .23s cubic-bezier(.2,.75,.28,1) !important;
  }
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-main,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-main {
    background: linear-gradient(135deg, rgba(37,31,26,.98), rgba(22,18,16,.98)) !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-swiping .rm13-main {
    transition: none !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-meta {
    gap: 5px !important;
    min-width: 0 !important;
    transition: width .23s cubic-bezier(.2,.75,.28,1), transform .23s cubic-bezier(.2,.75,.28,1) !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-title-status-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-title-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .task-title-main {
    font-size: .78rem !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-title-star {
    min-width: 23px !important;
    width: 23px !important;
    min-height: 23px !important;
    height: 23px !important;
    font-size: .68rem !important;
    flex: 0 0 23px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-difficulty-marker {
    width: 5px !important;
    min-width: 5px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    overflow: hidden !important;
    flex: 0 0 5px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-difficulty-marker.difficulty-easy { background: #22c55e !important; }
  .dashboard[data-mobile-view="todos"] .rm21-difficulty-marker.difficulty-medium { background: #eab308 !important; }
  .dashboard[data-mobile-view="todos"] .rm21-difficulty-marker.difficulty-hard,
  .dashboard[data-mobile-view="todos"] .rm21-difficulty-marker.difficulty-veryHard { background: #ef4444 !important; }
  .dashboard[data-mobile-view="todos"] .rm21-front-complete {
    min-height: 27px !important;
    height: 27px !important;
    min-width: 63px !important;
    width: auto !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: .55rem !important;
    line-height: 1 !important;
    background: #32ad6f !important;
    color: #fff !important;
    border-color: rgba(71,210,133,.45) !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.done .rm21-front-complete {
    background: rgba(255,255,255,.72) !important;
    color: var(--muted) !important;
    border-color: var(--border) !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-info-line {
    display: none !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-metrics {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    margin: 3px 0 0 11px !important;
    min-width: 0 !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-metrics .rm-estimate-bar,
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-metrics .rm-xp-circle,
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-metrics .rm-category-pill {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 7px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 35vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .5rem !important;
    box-shadow: none !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-metrics .rm-xp-circle strong,
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-metrics .rm-xp-circle small {
    font-size: .5rem !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-subtasks {
    margin: 6px 0 0 11px !important;
    border-radius: 10px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-subtasks summary {
    min-height: 26px !important;
    padding: 5px 8px !important;
    font-size: .56rem !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-actions.rm13-todo-actions {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 13px 8px !important;
    background: transparent !important;
    pointer-events: none !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-actions .icon-btn {
    position: absolute !important;
    top: 15px !important;
    display: grid !important;
    pointer-events: auto !important;
    width: 39px !important;
    min-width: 39px !important;
    height: 39px !important;
    min-height: 39px !important;
    border-radius: 11px !important;
    font-size: .74rem !important;
    background: rgba(255,255,255,.84) !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-skip { left: 8px !important; }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-edit { left: 53px !important; }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-drag { right: 98px !important; }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-add { right: 53px !important; }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-delete { right: 8px !important; }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left .rm13-main {
    overflow: hidden !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left .rm13-meta {
    width: calc(100% - 143px) !important;
    transform: translateX(143px) !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left .rm13-subtasks {
    display: none !important;
  }
  .dashboard[data-mobile-view="todos"] .completed-section {
    margin-top: 8px !important;
    border-radius: 14px !important;
  }
  .dashboard[data-mobile-view="todos"] .completed-toggle {
    min-height: 39px !important;
    padding: 0 10px !important;
    font-size: .65rem !important;
  }
}

@media (max-width: 360px) {
  .dashboard[data-mobile-view="todos"] .task-organizer-bar select {
    font-size: .49rem !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-metrics .rm-category-pill {
    max-width: 29vw !important;
  }
}

/* ════════════════════════════════════════
   RM22 mobile fit + shared header/banner repair
   User fix: phone pages must never exceed the viewport; logo and coffee banner
   remain clean and visible across mobile views. Desktop stays unchanged.
════════════════════════════════════════ */
@media (max-width: 768px) {
  /* A single predictable mobile canvas. */
  html, body, #app,
  .page.dashboard,
  .dashboard .hero-grid,
  .dashboard .content-grid,
  .dashboard .left-col,
  .dashboard .right-col {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page.dashboard {
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  /* Repair the mobile header: no negative positioning or empty/truncated logo pill. */
  .dashboard .top-bar,
  body.dark .dashboard .top-bar,
  body.theme-navy .dashboard .top-bar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-height: 43px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .dashboard .dashboard-brand,
  body.dark .dashboard .dashboard-brand,
  body.theme-navy .dashboard .dashboard-brand {
    width: fit-content !important;
    max-width: min(180px, calc(100vw - 106px)) !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    gap: 0 !important;
    border-radius: 14px !important;
  }

  .dashboard .dashboard-brand .brand-text,
  body.dark .dashboard .dashboard-brand .brand-text,
  body.theme-navy .dashboard .dashboard-brand .brand-text {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .dashboard .top-bar-right,
  body.dark .dashboard .top-bar-right,
  body.theme-navy .dashboard .top-bar-right {
    grid-column: 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .dashboard .top-bar-right .icon-btn,
  body.dark .dashboard .top-bar-right .icon-btn,
  body.theme-navy .dashboard .top-bar-right .icon-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  /* Restore one readable, correctly-sized coffee banner on every phone page. */
  .dashboard .mobile-coffee-link { display: none !important; }
  .dashboard .coffee-banner,
  .dashboard[data-mobile-view="home"] .coffee-banner,
  .dashboard[data-mobile-view="habits"] .coffee-banner,
  .dashboard[data-mobile-view="todos"] .coffee-banner,
  body.dark .dashboard .coffee-banner,
  body.theme-navy .dashboard .coffee-banner {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    gap: 8px !important;
    padding: 7px 8px !important;
    margin: 0 0 9px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .dashboard .coffee-banner-icon,
  .dashboard[data-mobile-view="habits"] .coffee-banner-icon,
  .dashboard[data-mobile-view="todos"] .coffee-banner-icon,
  body.dark .dashboard .coffee-banner-icon,
  body.theme-navy .dashboard .coffee-banner-icon {
    display: grid !important;
    place-items: center !important;
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    border-radius: 9px !important;
    font-size: .8rem !important;
  }

  .dashboard .coffee-banner-copy {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .dashboard .coffee-banner-copy strong,
  .dashboard[data-mobile-view="habits"] .coffee-banner-copy strong,
  .dashboard[data-mobile-view="todos"] .coffee-banner-copy strong,
  body.dark .dashboard .coffee-banner-copy strong,
  body.theme-navy .dashboard .coffee-banner-copy strong {
    display: block !important;
    min-width: 0 !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dashboard .coffee-banner-copy small,
  .dashboard[data-mobile-view="habits"] .coffee-banner-copy small,
  .dashboard[data-mobile-view="todos"] .coffee-banner-copy small,
  body.dark .dashboard .coffee-banner-copy small,
  body.theme-navy .dashboard .coffee-banner-copy small {
    display: none !important;
  }

  .dashboard .coffee-banner-cta,
  .dashboard[data-mobile-view="habits"] .coffee-banner-cta,
  .dashboard[data-mobile-view="todos"] .coffee-banner-cta,
  body.dark .dashboard .coffee-banner-cta,
  body.theme-navy .dashboard .coffee-banner-cta {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: auto !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: .56rem !important;
    line-height: 1 !important;
  }

  /* Stop Tasks/Habits/feature pages expanding past the phone width. */
  .dashboard:not([data-mobile-view="home"]) .content-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .dashboard:not([data-mobile-view="home"]) .left-col,
  .dashboard:not([data-mobile-view="home"]) .left-col > .card,
  .dashboard:not([data-mobile-view="home"]) #boardContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dashboard:not([data-mobile-view="home"]) .left-col > .card,
  .dashboard:not([data-mobile-view="home"]) #boardContent {
    overflow-x: hidden !important;
  }

  .dashboard[data-mobile-view="habits"] #boardContent > *,
  .dashboard[data-mobile-view="todos"] #boardContent > *,
  .dashboard[data-mobile-view="todos"] #todoGroupList,
  .dashboard[data-mobile-view="todos"] #todoGroupList .task-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dashboard[data-mobile-view="todos"] .cat-filter-bar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .dashboard[data-mobile-view="todos"] .task-organizer-bar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .dashboard[data-mobile-view="todos"] .task-organizer-bar label,
  .dashboard[data-mobile-view="todos"] .task-organizer-bar select {
    min-width: 0 !important;
    width: 100% !important;
  }

  .dashboard[data-mobile-view="todos"] .rm-progress-stat-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .dashboard[data-mobile-view="todos"] .rm21-swipe-task,
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 380px) {
  .dashboard .dashboard-brand,
  body.dark .dashboard .dashboard-brand,
  body.theme-navy .dashboard .dashboard-brand {
    height: 39px !important;
    min-height: 39px !important;
    padding-inline: 10px !important;
  }
  .dashboard .dashboard-brand .brand-text { font-size: .72rem !important; }
  .dashboard .top-bar-right .icon-btn { width: 37px !important; height: 37px !important; min-width: 37px !important; min-height: 37px !important; }
}

@media (max-width: 768px) {
  .dashboard .dashboard-brand .brand-text,
  body.dark .dashboard .dashboard-brand .brand-text,
  body.theme-navy .dashboard .dashboard-brand .brand-text,
  body.theme-pink .dashboard .dashboard-brand .brand-text {
    color: var(--text) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    background-image: none !important;
  }
  body.dark .dashboard .dashboard-brand .brand-text {
    color: #f5ede4 !important;
  }
}

/* ════════════════════════════════════════
   RM23 mobile Shop layout repair
   Scope: Shop page at phone widths only. Keeps desktop presentation untouched.
════════════════════════════════════════ */
@media (max-width: 768px) {
  .dashboard[data-mobile-view="shop"] .mobile-coffee-link { display: none !important; }

  /* Remove the wide desktop board chrome on mobile Shop, matching the compact feature pages. */
  .dashboard[data-mobile-view="shop"] .content-grid,
  .dashboard[data-mobile-view="shop"] .left-col,
  .dashboard[data-mobile-view="shop"] .left-col > .card,
  .dashboard[data-mobile-view="shop"] #boardContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .dashboard[data-mobile-view="shop"] .content-grid,
  .dashboard[data-mobile-view="shop"] .left-col,
  .dashboard[data-mobile-view="shop"] .left-col > .card,
  .dashboard[data-mobile-view="shop"] #boardContent {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .dashboard[data-mobile-view="shop"] .left-col > .card,
  .dashboard[data-mobile-view="shop"] #boardContent {
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  .dashboard[data-mobile-view="shop"] .left-col > .card > .section-title,
  .dashboard[data-mobile-view="shop"] #boardTabs,
  .dashboard[data-mobile-view="shop"] #boardContent > .board-toolbar {
    display: none !important;
  }

  /* Header is readable and takes one compact block rather than a desktop-sized intro. */
  .dashboard[data-mobile-view="shop"] .shop-header {
    display: grid !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 12px !important;
    margin: 0 0 9px !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    background: var(--card) !important;
    box-sizing: border-box !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-gem-balance {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: rgba(200,149,90,.12) !important;
    border: 1px solid rgba(200,149,90,.22) !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-gem-icon { font-size: .94rem !important; }
  .dashboard[data-mobile-view="shop"] .shop-gem-count {
    font-size: .84rem !important;
    font-weight: 950 !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-sub {
    font-size: .65rem !important;
    line-height: 1.38 !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-active-boost {
    width: 100% !important;
    margin: 1px 0 0 !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
    font-size: .63rem !important;
    box-sizing: border-box !important;
  }
  .dashboard[data-mobile-view="shop"] .rm-shop-preview-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 12px !important;
    font-size: .63rem !important;
  }
  .dashboard[data-mobile-view="shop"] .rm-shop-preview-banner > div {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .dashboard[data-mobile-view="shop"] .rm-shop-preview-banner .btn {
    min-width: 0 !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 5px !important;
    font-size: .58rem !important;
  }

  /* Products are full-width compact cards. Buttons sit below content instead of crushing text. */
  .dashboard[data-mobile-view="shop"] .shop-grid,
  .dashboard[data-mobile-view="shop"] .shop-grid-polished {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-item {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon body"
      "actions actions" !important;
    align-items: start !important;
    column-gap: 9px !important;
    row-gap: 9px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 11px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-item-icon {
    grid-area: icon !important;
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 11px !important;
    font-size: 1.05rem !important;
    background: rgba(200,149,90,.10) !important;
    border: 1px solid rgba(200,149,90,.18) !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-item-body {
    grid-area: body !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-item-name {
    font-size: .82rem !important;
    line-height: 1.18 !important;
    margin: 1px 0 4px !important;
    word-break: break-word !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-item-desc {
    font-size: .64rem !important;
    line-height: 1.38 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-item-status {
    margin-top: 7px !important;
    padding: 3px 8px !important;
    font-size: .57rem !important;
    line-height: 1.15 !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-visual-preview {
    gap: 5px !important;
    margin-top: 8px !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-visual-preview span {
    height: 17px !important;
    min-width: 27px !important;
    border-radius: 8px !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-item-action,
  .dashboard[data-mobile-view="shop"] .shop-item-action-polished {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .dashboard[data-mobile-view="shop"] .shop-item-action .btn,
  .dashboard[data-mobile-view="shop"] .shop-buy-btn,
  .dashboard[data-mobile-view="shop"] .shop-owned-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    font-size: .61rem !important;
    white-space: nowrap !important;
  }

  body.dark .dashboard[data-mobile-view="shop"] .shop-header,
  body.theme-navy .dashboard[data-mobile-view="shop"] .shop-header {
    background: linear-gradient(160deg, rgba(28,24,22,.97), rgba(18,16,15,.98)) !important;
    border-color: rgba(210,170,120,.16) !important;
  }
  body.dark .dashboard[data-mobile-view="shop"] .shop-item-icon,
  body.theme-navy .dashboard[data-mobile-view="shop"] .shop-item-icon {
    background: rgba(200,149,90,.12) !important;
    border-color: rgba(210,170,120,.18) !important;
  }
}

@media (max-width: 380px) {
  .dashboard[data-mobile-view="shop"] .shop-header { padding: 10px !important; }
  .dashboard[data-mobile-view="shop"] .shop-item { padding: 10px !important; }
  .dashboard[data-mobile-view="shop"] .shop-item-action,
  .dashboard[data-mobile-view="shop"] .shop-item-action-polished {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  }
}

/* ════════════════════════════════════════
   RM24 mobile Tasks concealed swipe-rail repair
   Keep action buttons fully hidden on the resting card face so no blank
   squares bleed through; only expose the intended rail after a swipe.
   Scope is mobile Tasks only, leaving desktop and all other pages unchanged.
════════════════════════════════════════ */
@media (max-width: 768px) {
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-actions.rm13-todo-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .14s ease, visibility 0s linear .14s !important;
  }

  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-actions.rm13-todo-actions .icon-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .14s ease, visibility 0s linear .14s !important;
  }

  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left .rm13-actions.rm13-todo-actions,
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-right .rm13-actions.rm13-todo-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transition-delay: 0s !important;
  }

  /* Swipe left: show only the three controls on the exposed right-hand rail. */
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left .rm13-actions.rm13-todo-actions .rm-action-drag,
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left .rm13-actions.rm13-todo-actions .rm-action-add,
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left .rm13-actions.rm13-todo-actions .rm-action-delete,
  /* Swipe right: show only the two controls on the exposed left-hand rail. */
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-right .rm13-actions.rm13-todo-actions .rm-action-skip,
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-right .rm13-actions.rm13-todo-actions .rm-action-edit {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }
}

/* ════════════════════════════════════════
   RM26 supplied logo lock-up + deployment icons
   Text stays live and crisp in League Spartan; the mark uses the supplied art.
════════════════════════════════════════ */
.site-logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.site-logo-mark {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  aspect-ratio: 1;
}
.site-logo-text {
  font-family: "League Spartan", "Arial Black", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}
.auth-brand.site-logo {
  width: max-content;
  gap: 11px;
  padding: 8px 15px 8px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(80,50,20,.07);
}
.auth-brand .site-logo-mark {
  width: 42px;
  height: 42px;
}
.auth-brand .site-logo-text {
  font-size: 1.15rem;
  color: var(--text);
}
.dashboard-brand.site-logo {
  gap: 9px;
}
.dashboard-brand .site-logo-mark {
  width: 30px;
  height: 30px;
}
.dashboard-brand .site-logo-text {
  font-size: 1.08rem;
}
body.dark .auth-brand.site-logo,
body.theme-navy .auth-brand.site-logo {
  background: linear-gradient(160deg, rgba(38,32,28,.97), rgba(24,20,18,.97));
  border-color: rgba(210,170,120,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
}
body.dark .auth-brand .site-logo-text,
body.theme-navy .auth-brand .site-logo-text {
  color: #f0e7dd;
}

@media (max-width: 768px) {
  .dashboard-brand.site-logo {
    gap: 7px !important;
    padding: 7px 11px 7px 8px !important;
    max-width: 166px !important;
  }
  .dashboard-brand .site-logo-mark {
    width: 25px !important;
    height: 25px !important;
  }
  .dashboard-brand .site-logo-text {
    font-size: .88rem !important;
    letter-spacing: -.045em !important;
  }
  .auth-brand.site-logo {
    gap: 9px;
    padding: 7px 13px 7px 8px;
  }
  .auth-brand .site-logo-mark {
    width: 36px;
    height: 36px;
  }
  .auth-brand .site-logo-text {
    font-size: 1rem;
  }
}
@media (max-width: 380px) {
  .dashboard-brand.site-logo {
    max-width: 144px !important;
    gap: 6px !important;
    padding-right: 9px !important;
  }
  .dashboard-brand .site-logo-mark {
    width: 23px !important;
    height: 23px !important;
  }
  .dashboard-brand .site-logo-text {
    font-size: .82rem !important;
  }
}


/* ════════════════════════════════════════
   RM24 Water tooltip visibility repair
   Tooltip opens above the weekly dots and is not clipped by feature cards/dock.
════════════════════════════════════════ */
.dashboard[data-current-tab="water"] .left-col > .card,
.dashboard[data-current-tab="water"] #boardContent,
.dashboard[data-current-tab="water"] .water-clean-board,
.dashboard[data-current-tab="water"] .rm-water-week-card {
  overflow: visible !important;
}
.rm-water-week-card {
  position: relative;
  z-index: 10;
}
.rm-water-week-card .mobile-water-circles {
  position: relative;
  z-index: 12;
}
.rm-water-week-card .mobile-water-day.has-rm-tooltip:hover,
.rm-water-week-card .mobile-water-day.has-rm-tooltip:focus-visible {
  z-index: 90;
}
.rm-water-week-card .mobile-water-day.has-rm-tooltip::after {
  top: auto;
  bottom: calc(100% + 14px);
  transform: translate(-50%, -8px) scale(.96);
}
.rm-water-week-card .mobile-water-day.has-rm-tooltip::before {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translate(-50%, -8px) rotate(225deg) scale(.96);
}
.rm-water-week-card .mobile-water-day.has-rm-tooltip:hover::after,
.rm-water-week-card .mobile-water-day.has-rm-tooltip:focus-visible::after {
  transform: translate(-50%, 0) scale(1);
}
.rm-water-week-card .mobile-water-day.has-rm-tooltip:hover::before,
.rm-water-week-card .mobile-water-day.has-rm-tooltip:focus-visible::before {
  transform: translate(-50%, 0) rotate(225deg) scale(1);
}
@media (max-width: 768px) {
  .dashboard[data-mobile-view="water"] .left-col > .card,
  .dashboard[data-mobile-view="water"] #boardContent {
    overflow: visible !important;
  }
  .rm-water-week-card .mobile-water-day:first-child.has-rm-tooltip::after {
    left: 0;
    transform: translate(0, -8px) scale(.96);
  }
  .rm-water-week-card .mobile-water-day:first-child.has-rm-tooltip:hover::after,
  .rm-water-week-card .mobile-water-day:first-child.has-rm-tooltip:focus-visible::after {
    transform: translate(0, 0) scale(1);
  }
  .rm-water-week-card .mobile-water-day:last-child.has-rm-tooltip::after {
    left: auto;
    right: 0;
    transform: translate(0, -8px) scale(.96);
  }
  .rm-water-week-card .mobile-water-day:last-child.has-rm-tooltip:hover::after,
  .rm-water-week-card .mobile-water-day:last-child.has-rm-tooltip:focus-visible::after {
    transform: translate(0, 0) scale(1);
  }
}


/* ════════════════════════════════════════
   RM25 Full-canvas theme + overscroll repair
   Keeps the browser/document canvas in the active site theme so scrolling past
   content never reveals the default white document background.
════════════════════════════════════════ */
html {
  min-height: 100%;
  background-color: #f5efe6;
  overscroll-behavior-y: auto;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  overscroll-behavior-y: auto;
}
html:has(body.dark) { background-color: #0d0c0b; }
html:has(body.theme-navy) { background-color: #071326; }
html:has(body.theme-pink) { background-color: #ffd9eb; }
html:has(body.theme-glass) { background-color: #dceeff; }
#app { min-height: 100vh; min-height: 100dvh; }


/* ════════════════════════════════════════
   RM26 Mobile vertical-scroll recovery
   Restores normal document panning on phones while keeping the full-canvas
   theme background from RM25. Horizontal swipe cards remain functional.
════════════════════════════════════════ */
@media (max-width: 768px) {
  html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  body {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #app,
  .page,
  .page.dashboard {
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
    overflow-y: visible !important;
  }

  .dashboard .content-grid,
  .dashboard .left-col,
  .dashboard #boardContent {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* Keep vertical page scrolling available when a gesture begins on a swipe card. */
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit,
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task {
    touch-action: pan-y !important;
  }
}


/* ════════════════════════════════════════
   RM27 Mobile Tasks usability + dock stability patch
   - category-scoped completed clears are wired in app.js
   - due dates remain visible on task cards on phone screens
   - longer task names wrap instead of being clipped
   - swipe rails have high contrast in dark/mobile themes
   - dock remains above content at the bottom of a long scroll
════════════════════════════════════════ */
.rm13-due-mobile-pill { display: none; }

@media (max-width: 768px) {
  /* A fixed, composited dock remains on-screen even at the document end/overscroll boundary. */
  .page.dashboard {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-bottom-nav,
  .mobile-bottom-nav.has-dock-add {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - 20px), 460px) !important;
    transform: translate3d(-50%, 0, 0) !important;
    -webkit-transform: translate3d(-50%, 0, 0) !important;
    z-index: 2147483000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    isolation: isolate !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform !important;
  }

  /* Categories now include a visible Manage control for rearrange/delete/rename. */
  .dashboard[data-mobile-view="todos"] .cat-filter-bar {
    align-items: center !important;
    padding-bottom: 2px !important;
  }
  .dashboard[data-mobile-view="todos"] #manageCategoriesBtn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-height: 29px !important;
    height: 29px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: .57rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }
  .dashboard[data-mobile-view="todos"] #catManagePanel {
    max-height: min(58vh, 460px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 10px !important;
  }
  .dashboard[data-mobile-view="todos"] #catManagePanel .cat-manage-actions {
    gap: 5px !important;
  }
  .dashboard[data-mobile-view="todos"] #catManagePanel .cat-mini-btn {
    min-height: 32px !important;
    min-width: 36px !important;
  }

  /* The task card grows for longer titles instead of cutting text away. */
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task,
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-main {
    height: auto !important;
    min-height: 76px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-title-status-row {
    align-items: start !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .task-title-main {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.32 !important;
    padding-top: 2px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-metrics {
    flex-wrap: wrap !important;
    row-gap: 5px !important;
  }

  /* Mobile task due-date chip; add/edit date fields already write to this value. */
  .dashboard[data-mobile-view="todos"] .rm13-due-mobile-pill {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    min-height: 20px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(99,102,241,.18) !important;
    background: rgba(99,102,241,.10) !important;
    color: var(--text) !important;
    font-size: .5rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
  }
  .dashboard[data-mobile-view="todos"] .rm13-due-mobile-pill.today {
    background: rgba(234,179,8,.16) !important;
    border-color: rgba(234,179,8,.32) !important;
  }
  .dashboard[data-mobile-view="todos"] .rm13-due-mobile-pill.overdue {
    background: rgba(239,68,68,.14) !important;
    border-color: rgba(239,68,68,.34) !important;
    color: #b91c1c !important;
  }

  /* Clear button is category-specific; let its longer label wrap cleanly. */
  .dashboard[data-mobile-view="todos"] #clearCompletedBtn {
    white-space: normal !important;
    line-height: 1.2 !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
  }

  /* Exposed task action rails: clear contrast instead of fading into dark cards. */
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left,
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-right,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-right {
    background: #171c26 !important;
    border: 1px solid rgba(242,194,120,.28) !important;
  }
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left .rm13-actions,
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-right .rm13-actions,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-left .rm13-actions,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task.rm21-open-right .rm13-actions {
    background: linear-gradient(90deg, rgba(20,25,34,.98), rgba(35,27,23,.98)) !important;
  }
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-actions .icon-btn,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-actions .icon-btn {
    color: #fff !important;
    background: #283241 !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 6px 15px rgba(0,0,0,.3) !important;
  }
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-edit,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-edit { background: #735325 !important; border-color: #e3ad59 !important; }
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-add,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-add { background: #095c59 !important; border-color: #34d0c7 !important; }
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-delete,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-delete { background: #752c34 !important; border-color: #fb7185 !important; }
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-skip,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-skip { background: #53421d !important; border-color: #facc15 !important; }
  body.dark .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-drag,
  body.theme-navy .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm-action-drag { background: #233e6b !important; border-color: #60a5fa !important; }
}


/* ════════════════════════════════════════
   RM28 Task cards + category management layout repair
   Fixes mobile star/Complete collision, centres category counts, and makes the
   category manager an always-visible control on desktop and mobile.
════════════════════════════════════════ */
.rm28-category-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 10px;
  min-width: 0;
}
.rm28-category-control-label {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .02em;
}
.rm28-category-control-row #manageCategoriesBtn {
  margin-left: auto;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: fit-content;
}
.cat-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.cat-filter-btn .cat-count,
.cat-count {
  display: inline-grid !important;
  place-items: center !important;
  align-self: center !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

@media (max-width: 768px) {
  .dashboard[data-mobile-view="todos"] .rm28-category-control-row {
    margin: 3px 0 8px !important;
    padding: 0 2px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm28-category-control-label {
    font-size: .58rem !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }
  .dashboard[data-mobile-view="todos"] .rm28-category-control-row #manageCategoriesBtn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: .62rem !important;
  }
  .dashboard[data-mobile-view="todos"] .cat-filter-btn .cat-count,
  .dashboard[data-mobile-view="todos"] .cat-count {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    flex-basis: 18px !important;
    font-size: .52rem !important;
  }

  /* Reserve fixed spaces for title, star, and Complete so they can never collide. */
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-title-status-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-title-line {
    display: grid !important;
    grid-template-columns: 5px minmax(0, 1fr) 24px !important;
    align-items: start !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm21-difficulty-marker {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    margin-top: 2px !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .task-title-main {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: auto !important;
    padding-right: 0 !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-title-star {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    margin: 0 !important;
    justify-self: end !important;
    align-self: start !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm21-front-complete {
    position: static !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
    flex: none !important;
  }
  .dashboard[data-mobile-view="todos"] #catManagePanel {
    margin: 0 0 9px !important;
  }
}


/* ════════════════════════════════════════
   RM29 final Tasks controls repair
   - Perfectly centers the star control on phone task cards.
   - Provides a visible, functional Rename/Delete-only category manager on desktop and mobile.
════════════════════════════════════════ */
.rm13-title-star {
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
}
.rm13-title-star .rm29-star-glyph {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  transform: translateY(-0.5px) !important;
  pointer-events: none !important;
}
.rm28-category-control-row #manageCategoriesBtn.rm29-category-manage-button {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  background: var(--panel-soft) !important;
  cursor: pointer !important;
}
.rm28-category-control-row #manageCategoriesBtn.rm29-category-manage-button.active {
  color: #24160c !important;
  border-color: rgba(232,180,122,.78) !important;
  background: linear-gradient(135deg, #c8955a, #e8b47a) !important;
}
body.dark .rm28-category-control-row #manageCategoriesBtn.rm29-category-manage-button,
body.theme-navy .rm28-category-control-row #manageCategoriesBtn.rm29-category-manage-button {
  color: #f2e9df !important;
  border-color: rgba(226,196,150,.28) !important;
  background: rgba(255,255,255,.07) !important;
}
body.dark .rm28-category-control-row #manageCategoriesBtn.rm29-category-manage-button.active,
body.theme-navy .rm28-category-control-row #manageCategoriesBtn.rm29-category-manage-button.active {
  color: #24160c !important;
  border-color: rgba(232,180,122,.82) !important;
  background: linear-gradient(135deg, #c8955a, #e8b47a) !important;
}
#catManagePanel .rm29-cat-manage-head strong::before { content: none !important; }
#catManagePanel .rm29-cat-manage-head small { max-width: 54ch; }
#catManagePanel .rm29-cat-manage-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 58px !important;
}
#catManagePanel .rm29-cat-details {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#catManagePanel .rm29-cat-actions {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  grid-column: auto !important;
  gap: 7px !important;
}
#catManagePanel .rm29-rename-btn,
#catManagePanel .rm29-delete-btn {
  min-width: 70px !important;
  padding: 0 11px !important;
}
#catManagePanel .rm29-delete-btn.confirming {
  min-width: 112px !important;
  background: rgba(239,68,68,.14) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
body.dark #catManagePanel .rm29-rename-btn,
body.theme-navy #catManagePanel .rm29-rename-btn {
  background: rgba(200,149,90,.16) !important;
  border-color: rgba(232,180,122,.42) !important;
  color: #f6eee2 !important;
}
body.dark #catManagePanel .rm29-delete-btn,
body.theme-navy #catManagePanel .rm29-delete-btn {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(251,113,133,.40) !important;
  color: #fda4af !important;
}
@media (max-width: 768px) {
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-title-star {
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  .dashboard[data-mobile-view="todos"] .rm21-swipe-task .rm13-title-star .rm29-star-glyph {
    font-size: .88rem !important;
    transform: translateY(-0.4px) !important;
  }
  #catManagePanel .rm29-cat-manage-row {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 9px !important;
    padding: 10px !important;
  }
  #catManagePanel .rm29-cat-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  #catManagePanel .rm29-rename-btn,
  #catManagePanel .rm29-delete-btn {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 35px !important;
  }
}

/* ════════════════════════════════════════
   RM30 completed-habit rail + reliable category manager UI
════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Completed habit rows keep the Undo face clean until the user actually swipes. */
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-actions.rm13-habit-actions {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .14s ease, visibility 0s linear .14s !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-actions.rm13-habit-actions .icon-btn,
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit .rm13-actions.rm13-habit-actions .rm-action-empty {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .14s ease, visibility 0s linear .14s !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-open-left .rm13-actions.rm13-habit-actions,
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-open-right .rm13-actions.rm13-habit-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transition-delay: 0s !important;
  }
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-open-left .rm13-actions.rm13-habit-actions .rm-action-drag,
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-open-left .rm13-actions.rm13-habit-actions .rm-action-delete,
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-open-right .rm13-actions.rm13-habit-actions .rm-action-skip,
  .dashboard[data-mobile-view="habits"] .rm20-swipe-habit.rm20-open-right .rm13-actions.rm13-habit-actions .rm-action-edit {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s !important;
  }
}

/* Category manager button stays readable and tappable in all themes. */
.rm28-category-control-row #manageCategoriesBtn.rm30-manage-trigger {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  min-height: 40px !important;
  padding: 0 15px !important;
  gap: 7px !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  background: var(--panel-soft) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
}
body.dark .rm28-category-control-row #manageCategoriesBtn.rm30-manage-trigger,
body.theme-navy .rm28-category-control-row #manageCategoriesBtn.rm30-manage-trigger {
  color: #f6eee2 !important;
  border-color: rgba(232,180,122,.34) !important;
  background: rgba(255,255,255,.09) !important;
}
.rm28-category-control-row #manageCategoriesBtn.rm30-manage-trigger:hover {
  border-color: rgba(200,149,90,.72) !important;
  background: rgba(200,149,90,.14) !important;
}

body.rm30-modal-open { overflow: hidden !important; }
.rm30-category-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10080;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.rm30-category-overlay.open { display: flex; }
.rm30-category-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 9, 7, .62);
  backdrop-filter: blur(5px);
}
.rm30-category-sheet {
  position: relative;
  z-index: 1;
  width: min(580px, 100%);
  max-height: min(78vh, 680px);
  overflow-y: auto;
  padding: 22px;
  border-radius: 25px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 25px 70px rgba(0,0,0,.28);
}
body.dark .rm30-category-sheet,
body.theme-navy .rm30-category-sheet {
  background: #181513;
  border-color: rgba(226,196,150,.22);
  box-shadow: 0 28px 78px rgba(0,0,0,.58);
}
.rm30-category-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.rm30-category-header h3 {
  margin: 0 0 5px;
  font-size: 1.18rem;
  line-height: 1.2;
}
.rm30-category-header p {
  margin: 0;
  max-width: 45ch;
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.45;
}
.rm30-close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.rm30-category-section + .rm30-category-section { margin-top: 18px; }
.rm30-category-section h4 {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: .70rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rm30-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 11px 12px;
  margin-bottom: 8px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
}
body.dark .rm30-category-row,
body.theme-navy .rm30-category-row {
  background: rgba(255,255,255,.045);
  border-color: rgba(226,196,150,.15);
}
.rm30-fixed-category { opacity: .94; }
.rm30-category-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.rm30-category-icon {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(200,149,90,.13);
  border: 1px solid rgba(200,149,90,.22);
}
.rm30-category-name strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: .91rem;
  line-height: 1.2;
}
.rm30-category-name small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
}
.rm30-fixed-pill {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: .7rem;
  font-weight: 800;
}
.rm30-category-actions {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 7px;
}
.rm30-action {
  min-width: 70px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 800;
  font-size: .76rem;
  cursor: pointer;
}
.rm30-action.rm30-edit {
  border-color: rgba(200,149,90,.38);
  background: rgba(200,149,90,.12);
}
.rm30-action.rm30-save {
  color: #fff;
  border-color: rgba(34,197,94,.5);
  background: #22a861;
}
.rm30-action.rm30-delete {
  color: #e34854;
  border-color: rgba(227,72,84,.28);
  background: rgba(227,72,84,.08);
}
.rm30-action.rm30-delete.confirming {
  min-width: 88px;
  color: #fff;
  border-color: #e34854;
  background: #d83948;
}
body.dark .rm30-action.rm30-edit,
body.theme-navy .rm30-action.rm30-edit {
  color: #f5eadb;
  border-color: rgba(232,180,122,.43);
  background: rgba(200,149,90,.18);
}
body.dark .rm30-action.rm30-delete,
body.theme-navy .rm30-action.rm30-delete {
  color: #fda4af;
  border-color: rgba(251,113,133,.4);
  background: rgba(239,68,68,.13);
}
.rm30-edit-row { align-items: end; }
.rm30-edit-field { display: grid; gap: 5px; flex: 1 1 auto; min-width: 0; }
.rm30-edit-field span { color: var(--muted); font-size: .68rem; font-weight: 800; }
.rm30-category-input {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg, var(--panel-soft));
  color: var(--text);
  font: inherit;
}
.rm30-empty {
  padding: 17px 14px;
  border: 1px dashed var(--border);
  border-radius: 15px;
  color: var(--muted);
  text-align: center;
  font-size: .82rem;
}
@media (max-width: 768px) {
  .dashboard[data-mobile-view="todos"] .rm28-category-control-row #manageCategoriesBtn.rm30-manage-trigger {
    min-height: 35px !important;
    height: 35px !important;
    padding-inline: 12px !important;
    font-size: .65rem !important;
  }
  .rm30-category-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .rm30-category-sheet {
    width: 100%;
    max-height: min(82vh, 640px);
    padding: 17px 14px calc(17px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }
  .rm30-category-header { margin-bottom: 15px; gap: 10px; }
  .rm30-category-header h3 { font-size: 1.02rem; }
  .rm30-category-header p { font-size: .72rem; }
  .rm30-close { flex-basis: 36px; width: 36px; height: 36px; }
  .rm30-category-row { min-height: 58px; padding: 10px; gap: 9px; border-radius: 13px; }
  .rm30-category-name { gap: 8px; }
  .rm30-category-icon { width: 34px; min-width: 34px; height: 34px; border-radius: 10px; }
  .rm30-category-name strong { font-size: .8rem; }
  .rm30-category-name small { font-size: .63rem; }
  .rm30-fixed-pill { font-size: .62rem; padding: 6px 9px; }
  .rm30-category-actions { gap: 5px; }
  .rm30-action { min-width: 56px; min-height: 34px; padding: 0 9px; font-size: .66rem; border-radius: 9px; }
  .rm30-edit-row { display: grid; align-items: stretch; }
  .rm30-edit-row .rm30-category-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rm30-edit-row .rm30-action { width: 100%; }
}


/* RM final UI polish: focused Pomodoro header and centred Daily XP card. */
#statsGrid .daily-xp-metric {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#statsGrid .daily-xp-metric .mini-title,
#statsGrid .daily-xp-metric .big-metric {
  display: block;
  width: 100%;
  text-align: center !important;
}
#statsGrid .daily-xp-metric .big-metric {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* RM About / Contact footer + page */
.auth-footer-links {
  margin-top: 10px;
  text-align: center;
}
.auth-footer-links a,
.rm-site-footer-links a,
.rm-back-home-link,
.rm-contact-link {
  color: var(--accent-2);
  font-weight: 900;
  text-decoration: none;
}
.auth-footer-links a:hover,
.rm-site-footer-links a:hover,
.rm-back-home-link:hover,
.rm-contact-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rm-site-footer {
  margin: 18px 0 108px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(35, 28, 22, .92), rgba(21, 17, 14, .96));
  border: 1px solid rgba(200, 149, 90, .22);
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
}
.rm-site-footer-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.rm-site-footer-brand {
  justify-content: flex-start;
  gap: 10px;
}
.rm-site-footer-main p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}
.rm-site-footer-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.rm-site-footer-links a,
.rm-back-home-link,
.rm-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(200,149,90,.24);
  background: rgba(200,149,90,.10);
  white-space: nowrap;
}

.rm-static-page {
  min-height: 100dvh;
  background: radial-gradient(ellipse at 0% 0%, rgba(200, 149, 90, .13) 0%, transparent 30%),
              radial-gradient(ellipse at 100% 100%, rgba(91, 160, 255, .08) 0%, transparent 30%),
              linear-gradient(180deg, #0d0c0b 0%, #131210 52%, #111110 100%);
}
.rm-about-page {
  max-width: 1040px;
  padding-bottom: 64px;
}
.rm-about-topbar {
  margin-bottom: 18px;
}
.rm-about-brand {
  color: var(--text);
}
.rm-about-hero {
  padding: clamp(24px, 5vw, 44px);
  border-radius: 34px;
  overflow: hidden;
}
.rm-about-hero h1 {
  margin: 14px 0 12px;
  max-width: 780px;
  font-size: clamp(2.15rem, 5vw, 4.2rem);
  line-height: .93;
  letter-spacing: -0.04em;
}
.rm-about-hero p,
.rm-about-card p {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.55;
}
.rm-about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.rm-about-card {
  padding: 22px;
  border-radius: 28px;
}
.rm-about-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(200,149,90,.14);
  border: 1px solid rgba(200,149,90,.24);
  margin-bottom: 14px;
  font-size: 1.35rem;
}
.rm-about-card h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}
.rm-contact-card {
  background: linear-gradient(135deg, rgba(200,149,90,.12), rgba(255,255,255,.04));
}
.rm-contact-link {
  margin-top: 6px;
  width: fit-content;
}

@media (max-width: 768px) {
  .dashboard:not([data-mobile-view="home"]) .rm-site-footer {
    display: none !important;
  }
  .rm-site-footer {
    margin: 14px 0 calc(104px + env(safe-area-inset-bottom, 0px));
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr;
    text-align: left;
  }
  .rm-site-footer-links {
    justify-content: flex-start;
    gap: 8px;
  }
  .rm-site-footer-links a {
    min-height: 36px;
    padding: 8px 11px;
    font-size: .9rem;
  }
  .rm-about-page {
    padding: 16px 16px 42px;
  }
  .rm-about-topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .rm-about-hero {
    padding: 24px 18px;
    border-radius: 28px;
  }
  .rm-about-grid {
    grid-template-columns: 1fr;
  }
}


/* RM footer CTA text update */
.rm-site-footer-cta {
  gap: 2px;
}
.rm-site-footer-heading,
.rm-site-footer-subheading {
  margin: 0;
  color: var(--text);
  font-family: 'League Spartan', 'Nunito', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.rm-site-footer-heading {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
}
.rm-site-footer-subheading {
  color: var(--accent-2);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}

@media (max-width: 768px) {
  .rm-site-footer-cta {
    text-align: left;
  }
  .rm-site-footer-heading {
    font-size: 1.18rem;
  }
  .rm-site-footer-subheading {
    font-size: 1.02rem;
  }
}


/* RM mobile footer and settings age polish */
.dashboard .rm-site-footer {
  display: none !important;
}
.dashboard[data-mobile-view="home"] .rm-site-footer {
  display: flex !important;
}
.rm-site-footer,
.rm-site-footer * {
  box-sizing: border-box;
  min-width: 0;
}
.rm-settings-age-field .settings-note {
  margin-top: 6px;
  font-size: .88rem;
}

@media (max-width: 768px) {
  .dashboard[data-mobile-view="home"] .rm-site-footer {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 18px 16px !important;
    overflow: hidden !important;
  }
  .dashboard:not([data-mobile-view="home"]) .rm-site-footer {
    display: none !important;
  }
  .rm-site-footer-heading,
  .rm-site-footer-subheading {
    overflow-wrap: anywhere;
    line-height: 1.05;
  }
  .rm-site-footer-links {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
  }
  .rm-site-footer-links a {
    max-width: 100%;
  }
  .settings-drawer .rm-settings-age-field input[type="date"] {
    width: 100%;
    min-height: 46px;
  }
}


/* RM fix: Habits do not expose a category field; category management stays Tasks-only. */
#editHabitCategory,
.field-group:has(#editHabitCategory) {
  display: none !important;
}


/* RM hard fix: keep the mobile dock visible after long/swipe scrolling on iOS/Android. */
@media (max-width: 768px) {
  :root { --rm-mobile-dock-height: 78px; --rm-mobile-dock-bottom: 18px; }
  html, body {
    min-height: 100%;
    overflow-x: hidden !important;
  }
  .page.dashboard {
    padding-bottom: calc(var(--rm-mobile-dock-height) + 72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-bottom-nav {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--rm-mobile-dock-bottom) + env(safe-area-inset-bottom, 0px)) !important;
    transform: translate3d(0, 0, 0) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 9999 !important;
    will-change: transform !important;
    contain: layout paint !important;
    overflow: visible !important;
  }
  .mobile-bottom-nav::before {
    content: '';
    position: absolute;
    inset: -8px -6px calc(-1 * (var(--rm-mobile-dock-bottom) + env(safe-area-inset-bottom, 0px))) -6px;
    border-radius: inherit;
    pointer-events: none;
    background: transparent;
  }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .mobile-bottom-nav {
      bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    }
  }
}