/* ============================================================
   HER JOURNEY — a complete life planner
   Modern, responsive, installable web app (PWA)
   ============================================================ */

:root{
  --font-head:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Jost','Segoe UI',system-ui,-apple-system,sans-serif;
  --bg:#f7f1f4;
  --bg-soft:#fdfafb;
  --surface:#ffffff;
  --surface-2:#fcf4f7;
  --ink:#3c2b36;
  --ink-2:#6f5a68;
  --ink-3:#a58fa0;
  --line:#f0e2e9;
  --rose:#c0527a;
  --rose-2:#a33d63;
  --rose-soft:#fbe9f0;
  --acc-1:#c0527a;
  --acc-2:#9c6bb2;
  --gold:#c1913f;
  --teal:#2f857b;
  --blue:#54789c;
  --green:#618f56;
  --danger:#cf4a4a;
  --grad:linear-gradient(135deg,var(--acc-1),var(--acc-2));
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 44px rgba(140,70,115,.13);
  --shadow-sm:0 6px 18px rgba(140,70,115,.09);
  --sidebar-w:266px;
  --topbar-h:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(201,82,122,.10),transparent 60%),
    radial-gradient(900px 500px at -10% 30%,rgba(156,107,178,.08),transparent 55%),
    var(--bg);
  color:var(--ink);
  font-size:15.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
}
::selection{background:var(--rose-soft);color:var(--rose-2)}
img,svg{display:block;max-width:100%}
a{color:var(--rose-2);text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:600;letter-spacing:.3px}
p{margin:0}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:4px}

#app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;min-height:100dvh}
#main{min-width:0;display:flex;flex-direction:column}

/* ============ SIDEBAR ============ */
#sidebar{
  position:sticky;top:0;height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:linear-gradient(168deg,#4b2b3c 0%,#6d3f57 55%,#8a4a6d 120%);
  color:#ffeef5;
  overflow-y:auto;overflow-x:hidden;
  padding:20px 14px 18px;
}
#sidebar::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:4px}
.sb-logo{display:flex;align-items:center;gap:11px;padding:2px 8px 16px}
.sb-logo .mark{
  width:40px;height:40px;border-radius:14px;flex:0 0 auto;
  background:linear-gradient(135deg,#ffd9e6,#e79ab8);
  display:grid;place-items:center;color:#7d2b4c;
  box-shadow:0 6px 14px rgba(0,0,0,.22);
}
.sb-logo .title{font-family:var(--font-head);font-size:1.28rem;color:#fff;line-height:1.1}
.sb-logo .sub{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:#f0c6d8;margin-top:2px}
.sb-user{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:10px 12px;margin:2px 4px 14px;
}
.sb-user .avatar{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:var(--grad);display:grid;place-items:center;
  color:#fff;font-weight:600;font-size:.95rem;letter-spacing:.5px;
}
.sb-user .nm{font-weight:500;color:#fff;font-size:.92rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .dt{font-size:.68rem;color:#f2c6d9;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-nav{display:flex;flex-direction:column;gap:1px;flex:1 1 auto}
.sb-group{margin-top:14px}
.sb-group-label{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#eab6cd;padding:2px 12px 6px;opacity:.9}
.sb-link{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:12px;color:#f6e0ea;
  text-decoration:none;font-size:.95rem;font-weight:400;
  transition:background .15s,color .15s;position:relative;
}
.sb-link svg{width:19px;height:19px;opacity:.9;flex:0 0 auto}
.sb-link:hover{background:rgba(255,255,255,.10)}
.sb-link.active{background:rgba(255,255,255,.16);color:#fff;font-weight:500}
.sb-link.active::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;
  border-radius:4px;background:linear-gradient(#ffd9e6,#ec9cc2);
}
.sb-count{margin-left:auto;font-size:.7rem;background:rgba(255,255,255,.18);border-radius:20px;padding:1px 8px;min-width:20px;text-align:center}
.sb-foot{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.sb-install{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,#ffd9e6,#eea3c6);color:#6f2547;
  border:none;border-radius:12px;padding:9px;font-weight:600;font-size:.85rem;
}
.sb-install:hover{filter:brightness(1.05)}

/* ============ TOPBAR ============ */
#topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  height:var(--topbar-h);
  padding:0 clamp(14px,3vw,34px);
  background:rgba(247,241,244,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
#menu-btn{display:none;border:none;background:var(--surface);width:40px;height:40px;border-radius:12px;box-shadow:var(--shadow-sm);color:var(--ink-2)}
#menu-btn:active{transform:scale(.96)}
#page-title{font-size:1.28rem;font-family:var(--font-head)}
#page-sub{font-size:.7rem;color:var(--ink-3);margin-top:-2px;display:block}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
#install-btn{
  border:none;background:var(--grad);color:#fff;border-radius:20px;
  padding:8px 16px;font-weight:500;font-size:.84rem;display:flex;align-items:center;gap:7px;
  box-shadow:var(--shadow-sm);
}
#install-btn svg{width:15px;height:15px}
.top-avatar{width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.85rem;flex:0 0 auto}
#backup-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(97,143,86,.2)}

#scrim{position:fixed;inset:0;background:rgba(40,20,30,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
body.nav-open #scrim{opacity:1;pointer-events:auto}

/* ============ VIEW ============ */
#view{flex:1 1 auto;width:100%;max-width:1180px;margin:0 auto;padding:26px clamp(14px,3.4vw,40px) 130px;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.m-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.m-head h2{font-size:1.62rem;line-height:1.2}
.m-head .lede{color:var(--ink-2);font-size:.94rem;margin-top:3px;max-width:560px}
.m-head.spread{justify-content:space-between}

.grid{display:grid;gap:16px}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.g3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.stack{display:flex;flex-direction:column;gap:14px}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:18px 18px;
}
.card.tight{padding:12px 14px}
.card.hero{background:var(--grad);color:#fff;border:none;box-shadow:var(--shadow)}
.card.hero .card-title{color:#fff}
.card-soft{background:var(--surface-2)}
.card-title{font-size:1.06rem;display:flex;align-items:center;gap:9px;margin-bottom:12px;font-family:var(--font-body);font-weight:600;letter-spacing:.2px}
.card-title .ico{color:var(--rose)}
.card-title .side{margin-left:auto;display:flex;gap:6px;align-items:center}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat .lbl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.stat .val{font-size:1.85rem;font-family:var(--font-head);font-weight:600;margin-top:6px;line-height:1}
.stat .sub{font-size:.78rem;color:var(--ink-2);margin-top:6px}
.stat .glow{position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:var(--rose-soft);opacity:.55}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:12px;padding:9px 15px;font-size:.88rem;font-weight:500;
  transition:all .15s;white-space:nowrap;
}
.btn svg{width:16px;height:16px}
.btn:hover{border-color:#e0cdd8;color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--grad);border:none;color:#fff;box-shadow:0 8px 20px rgba(192,82,122,.32)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.soft{background:var(--rose-soft);border:none;color:var(--rose-2);font-weight:600}
.btn.soft:hover{background:#f8dde8}
.btn.danger{color:var(--danger);border-color:#f2c9c9}
.btn.danger:hover{background:#fdeeee}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:#52354a}
.btn.sm{padding:6px 11px;font-size:.8rem;border-radius:10px}
.btn.icon{padding:8px;border-radius:11px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:4px 11px;font-size:.78rem;color:var(--ink-2)}
.chip.on{background:var(--rose-soft);border-color:transparent;color:var(--rose-2);font-weight:500}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:5px;box-shadow:var(--shadow-sm);width:fit-content;max-width:100%;overflow-x:auto}
.tab{border:none;background:transparent;color:var(--ink-2);padding:7px 15px;border-radius:10px;font-size:.86rem;font-weight:500;white-space:nowrap}
.tab.on{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(192,82,122,.3)}

/* fields */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field-label{font-size:.78rem;font-weight:500;color:var(--ink-2);letter-spacing:.4px}
.field .req{color:var(--rose)}
.input,.select,.textarea{
  width:100%;border:1px solid #e8d8e0;background:#fff;
  border-radius:12px;padding:10px 12px;font-size:.92rem;transition:border .15s,box-shadow .15s;
  color:var(--ink);
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-soft)}
.textarea{resize:vertical;min-height:92px;line-height:1.55}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a58fa0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1 1 auto;min-width:0}
.muted{color:var(--ink-2)}
.small{font-size:.8rem}
.hint{font-size:.74rem;color:var(--ink-3)}

/* list items */
.li{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .12s}
.li:hover{transform:translateX(2px)}
.li .drag{color:var(--ink-3);cursor:grab;opacity:.5}
.li .li-body{flex:1 1 auto;min-width:0}
.li .li-title{font-weight:550;font-size:.95rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.li .li-sub{font-size:.78rem;color:var(--ink-2);margin-top:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.li .li-actions{display:flex;gap:4px;align-items:center;flex:0 0 auto}
.icon-btn{border:none;background:transparent;color:var(--ink-3);border-radius:9px;padding:5px;display:grid;place-items:center}
.icon-btn:hover{background:var(--rose-soft);color:var(--rose-2)}
.icon-btn svg{width:16px;height:16px}
.icon-btn.danger:hover{background:#fdecec;color:var(--danger)}

.check{
  width:24px;height:24px;border-radius:50%;border:2px solid #e3cfda;flex:0 0 auto;
  display:grid;place-items:center;cursor:pointer;background:#fff;color:transparent;transition:all .15s;
}
.check:hover{border-color:var(--rose)}
.check.done{background:var(--grad);border-color:transparent;color:#fff}
.check.done svg{width:13px;height:13px}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;border-radius:20px;padding:2px 9px;font-weight:500}
.tag.rose{background:var(--rose-soft);color:var(--rose-2)}
.tag.teal{background:#e2f2ef;color:var(--teal)}
.tag.blue{background:#e8eef6;color:var(--blue)}
.tag.gold{background:#f6ecda;color:#a37c2c}
.tag.green{background:#e9f1e5;color:var(--green)}
.tag.lav{background:#ece3f4;color:#7a5a96}
.tag.gray{background:#f2ecf0;color:var(--ink-2)}
.tag.red{background:#fae7e7;color:var(--danger)}

/* progress */
.progress{height:8px;border-radius:8px;background:var(--rose-soft);overflow:hidden;flex:1 1 auto;min-width:60px}
.progress>span{display:block;height:100%;border-radius:8px;background:var(--grad);transition:width .35s ease}
.progress.thin{height:5px}

/* empty state */
.empty{text-align:center;padding:52px 20px;color:var(--ink-3)}
.empty svg{width:74px;height:74px;margin:0 auto 14px;opacity:.85}
.empty .t{font-family:var(--font-head);font-size:1.15rem;color:var(--ink-2);margin-bottom:4px}
.empty .s{font-size:.86rem;max-width:380px;margin:0 auto 18px}
.empty .btn{margin-top:4px}

/* table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;min-width:560px}
th{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
td{padding:11px 14px;border-bottom:1px solid #f6edf1;font-size:.9rem;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fdf9fb}
tr.done-row td{opacity:.55}
.money{font-variant-numeric:tabular-nums;font-weight:550}
.pos{color:var(--green)}.neg{color:var(--danger)}.zero{color:var(--ink-3)}

/* bars */
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:150px;padding:6px 2px 0}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.bar-col .bar{width:100%;max-width:38px;border-radius:8px 8px 3px 3px;background:var(--grad);opacity:.85;min-height:3px}
.bar-col .bar:hover{opacity:1}
.bar-col:nth-child(3n+2) .bar{background:linear-gradient(180deg,#a98cc9,#7d5fa3)}
.bar-col:nth-child(3n+3) .bar{background:linear-gradient(180deg,#7fb7b0,#4f8f87)}
.bar-col .bl{font-size:.62rem;color:var(--ink-3);white-space:nowrap;transform:rotate(-30deg) translateY(6px)}
.bar-col .bv{font-size:.62rem;color:var(--ink-3)}

/* dots tracker */
.dots{display:flex;gap:5px;align-items:center}
.dots .d{width:13px;height:13px;border-radius:6px;background:#f1e3ea}
.dots .d.on{background:var(--grad);box-shadow:0 2px 6px rgba(192,82,122,.35)}
.dots .d.todayring{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--rose)}
.dots .dl{font-size:.66rem;color:var(--ink-3);margin-left:3px}

/* calendar */
.cal-wrap{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.cal-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.cal-head .t{font-family:var(--font-head);font-size:1.1rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{text-align:center;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:9px 2px;border-bottom:1px solid var(--line)}
.cal-day{min-height:92px;padding:6px;border-right:1px solid #f6edf1;border-bottom:1px solid #f6edf1;position:relative;cursor:pointer;transition:background .15s}
.cal-day:nth-child(7n){border-right:none}
.cal-day:hover{background:var(--surface-2)}
.cal-day .num{font-size:.78rem;font-weight:500;color:var(--ink-2);width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.cal-day.out .num{color:#d8c6d0}
.cal-day.wknd{background:#fdfafb}
.cal-day.today .num{background:var(--grad);color:#fff;box-shadow:0 3px 8px rgba(192,82,122,.4)}
.cal-events{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.cal-evt{font-size:.62rem;border-radius:6px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;border:none;text-align:left;color:#7a2c4c}
.cal-extra{font-size:.6rem;color:var(--ink-3);padding-left:2px}
#day-panel{max-width:430px;width:100%}

/* switch */
.switch{position:relative;width:42px;height:24px;flex:0 0 auto;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;border-radius:20px;background:#e6d4de;transition:.2s}
.switch .thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.switch input:checked + .track{background:var(--grad)}
.switch input:checked + .track + .thumb{transform:translateX(18px)}

/* modal */
#modal-root{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;background:rgba(46,26,38,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s}
#modal-root.open{opacity:1;pointer-events:auto}
.modal{background:var(--bg-soft);border-radius:22px;box-shadow:0 30px 80px rgba(30,10,25,.4);max-width:560px;width:100%;max-height:calc(100dvh - 40px);display:flex;flex-direction:column;overflow:hidden;animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{transform:scale(.94) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal.wide{max-width:760px}
.modal-head{display:flex;align-items:center;gap:12px;padding:18px 22px 0}
.modal-head h3{font-size:1.25rem;font-family:var(--font-head)}
.modal-body{padding:18px 22px 8px;overflow-y:auto}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px 20px;flex-wrap:wrap}

/* toast */
#toast-root{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,400px)}
.toast{
  background:var(--ink);color:#fff;border-radius:14px;padding:11px 18px;font-size:.86rem;
  box-shadow:0 14px 34px rgba(0,0,0,.28);display:flex;gap:9px;align-items:center;
  animation:toastIn .25s ease;max-width:100%;
}
.toast svg{width:16px;height:16px;flex:0 0 auto}
.toast.good{background:#2c5e4a}
.toast.err{background:#9c3232}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* range with value */
.range-row{display:flex;align-items:center;gap:12px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:6px;background:var(--rose-soft);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--grad);cursor:pointer;box-shadow:0 2px 8px rgba(192,82,122,.4)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--grad);cursor:pointer}

/* planner cells (meals) */
.week-grid{display:grid;grid-template-columns:repeat(7,minmax(128px,1fr));gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-sm);position:sticky;top:calc(var(--topbar-h) + 8px);z-index:5}
.week-grid .cg{border-right:1px solid var(--line)}
.week-grid .cg:last-child{border-right:none}
.cg-head{text-align:center;font-size:.72rem;font-weight:600;padding:9px 4px;background:var(--surface-2);border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.06em}
.cg-head small{display:block;font-weight:400;color:var(--ink-3);letter-spacing:normal;text-transform:none}
.cg-row{border-bottom:1px dashed #f0e2e9;padding:7px}
.cg-row:last-child{border-bottom:none}
.cg-row .ml{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.meal-cell{border:none;background:#fff;border-radius:8px;padding:6px 7px;font-size:.74rem;text-align:left;width:100%;color:var(--ink-2);line-height:1.35;border:1px dashed #e9d7e0;transition:all .12s;min-height:34px}
.meal-cell:hover{border-color:var(--rose);background:var(--rose-soft);color:var(--rose-2)}
.meal-cell.filled{background:var(--rose-soft);border-color:transparent;color:#8c3556;font-weight:500}
.meal-cell .cales{color:var(--ink-3);font-size:.62rem;display:block}

/* habit card */
.habit-card .dots{justify-content:flex-start;flex-wrap:wrap}
.habit-days{display:flex;gap:4px;flex-wrap:wrap}
.habit-days .hd{width:26px;height:30px;border-radius:8px;background:#f3e7ee;display:grid;place-items:center;font-size:.6rem;color:var(--ink-3);position:relative}
.habit-days .hd.on{background:var(--grad);color:#fff;font-weight:600}
.habit-days .hd.today{box-shadow:0 0 0 2px var(--rose)}

/* search */
.searchbar{position:relative;flex:1 1 auto;min-width:180px;max-width:340px}
.searchbar svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-3)}
.searchbar input{padding-left:36px}

/* mood emoji picker */
.moods{display:flex;gap:8px;flex-wrap:wrap}
.mood{font-size:1.35rem;width:44px;height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;display:grid;place-items:center;transition:all .12s;padding:0}
.mood.sel{border-color:var(--rose);background:var(--rose-soft);transform:scale(1.08)}

/* quick add line */
.quick-add{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:8px 8px 8px 16px;box-shadow:var(--shadow-sm)}
.quick-add input{border:none;outline:none;flex:1;background:transparent;min-width:80px;font-size:.93rem}

.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed #f0e2e9;font-size:.9rem}
.kv:last-child{border-bottom:none}
.kv b{font-weight:600}

.divider{height:1px;background:var(--line);margin:18px 0}

.avatar-round{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.85rem;flex:0 0 auto}

.quote-block{position:relative;padding:4px 8px}
.quote-block .q{font-family:var(--font-head);font-size:1.05rem;font-style:italic;color:var(--ink-2);line-height:1.6}
.quote-block .qa{margin-top:8px;font-size:.78rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}

.tracker-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.tracker-card .ico{width:40px;height:40px;border-radius:12px;background:var(--rose-soft);color:var(--rose-2);display:grid;place-items:center;flex:0 0 auto}
.tracker-card .ico svg{width:20px;height:20px}
.tracker-card .val{font-size:1.25rem;font-weight:600;font-family:var(--font-head)}
.tracker-card .lbl{font-size:.72rem;color:var(--ink-3)}

.section-label{display:flex;align-items:center;gap:8px;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:22px 0 10px}
.section-label::after{content:"";height:1px;background:var(--line);flex:1}

/* FAB */
#fab{position:fixed;right:22px;bottom:24px;z-index:50;display:none}
#fab button{
  width:54px;height:54px;border-radius:50%;border:none;background:var(--grad);color:#fff;
  box-shadow:0 12px 30px rgba(192,82,122,.45);display:grid;place-items:center;font-size:1.5rem;transition:transform .15s;
}
#fab button:active{transform:scale(.92)}
#fab button svg{width:22px;height:22px}

/* install banner on mobile */
.install-banner{display:none}

@media (max-width:960px){
  #app{grid-template-columns:1fr}
  #sidebar{position:fixed;top:0;left:0;bottom:0;width:min(300px,84vw);z-index:70;transform:translateX(-104%);transition:transform .28s cubic-bezier(.2,.8,.2,1);box-shadow:20px 0 60px rgba(30,10,20,.35)}
  body.nav-open #sidebar{transform:none}
  #menu-btn{display:grid;place-items:center}
  #page-sub{display:none}
  #backup-dot{display:none}
  #fab{display:block}
  .cal-day{min-height:66px}
  #view{padding-bottom:96px;padding-top:18px}
}

@media (max-width:560px){
  .m-head h2{font-size:1.35rem}
  .stat{grid-template-columns:1fr 1fr}
  .li .li-actions .icon-btn.hide-sm{display:none}
  .cal-grid{grid-template-columns:repeat(7,minmax(34px,1fr));overflow-x:auto}
}

/* print */
@media print{
  #sidebar,#topbar,#fab,#scrim{display:none!important}
  #app{display:block}
  body{background:#fff}
  .card,.li{box-shadow:none;break-inside:avoid}
}