/* =====================================================
   Rencana Kita v4 — akun, asisten, jurnal, galeri, travel, to-do, habit per seksi, mood, pengaturan
   ===================================================== */
:root {
  --acc-deep: #5E1209; --on-acc: #FFFFFF;
  --mood-5: #2E8B6E; --mood-4: #5E9FB8; --mood-3: #C9A867; --mood-2: #D98B4A; --mood-1: #C2566F; --mood-0: var(--bg2);
  --r: 16px;
  --sh: 0 1px 2px rgba(24,16,10,.04), 0 6px 20px rgba(24,16,10,.05);
}
[data-theme="dark"] { --mood-5: #4CC09A; --mood-4: #78B8D2; --mood-3: #D8BC7E; --mood-2: #E6A066; --mood-1: #E07F98; --sh: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.3); }

/* calmer base */
.page { gap: 20px; max-width: 1240px; margin: 0 auto; width: 100%; }
.page-narrow { max-width: 920px; }
.ph-title { text-wrap: balance; }
.btn-p, .own-btn.on, .seg button.on, .mt-btn.on, .day-b.on, .tgl.on, .yr-btn.on { color: var(--on-acc); }
.yr-btn.on { background: var(--acc); border-color: var(--acc); }
.primary-cntdn, .pc-hd, .gm-hd-bg { background: linear-gradient(135deg, var(--acc) 0%, var(--acc-deep) 100%); }
.boot-msg { padding: 60px; text-align: center; color: var(--fg3); }
.seg-wide { display: flex; flex-wrap: wrap; align-self: flex-start; }
.link-btn { border: none; background: none; color: var(--acc); font: 600 13px var(--fb); cursor: pointer; padding: 0; text-decoration: underline; }
.spacer { flex: 1; }

/* sidebar groups & account */
.nav-grp { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.nav-gh { display: flex; justify-content: space-between; align-items: center; border: none; background: none; padding: 8px 10px 4px; font: 700 10px var(--fb); letter-spacing: .12em; text-transform: uppercase; color: var(--fg3); cursor: pointer; }
.nav-gh:hover { color: var(--fg2); }
.nav-chev { font-size: 9px; }
.sb-footer { gap: 1px; }
.sb-acct { display: flex; align-items: center; gap: 8px; padding: 10px 8px 4px; margin-top: 6px; border-top: 1px solid var(--bdr2); }
.sb-acct-av { width: 30px; height: 30px; border-radius: 50%; background: var(--acc-bg); color: var(--acc); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.sb-acct-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-acct-tx b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct-tx small { font-size: 10.5px; color: var(--fg3); }
.sync-saved { color: var(--teal) !important; } .sync-offline, .sync-error { color: #B4321E !important; } .sync-saving { color: var(--amb) !important; }

/* auth */
.auth-ov { background: radial-gradient(circle at 20% 10%, var(--acc-bg), transparent 50%), radial-gradient(circle at 90% 90%, var(--amb-bg), transparent 45%), var(--bg); }
.auth-box { width: min(460px, 100%); align-items: stretch; text-align: left; }
.auth-brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.auth-title { font-family: var(--fd); font-size: 32px; font-weight: 600; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-go { justify-content: center; padding: 11px; font-size: 14px; }
.auth-err { background: rgba(180,50,30,.08); color: #A8281A; border-radius: var(--rs); padding: 9px 12px; font-size: 12.5px; font-weight: 600; }
[data-theme="dark"] .auth-err { color: #F09080; }
.auth-alt { text-align: center; font-size: 13px; color: var(--fg2); line-height: 1.8; }
.pw-wrap { position: relative; }
.pw-wrap .fi { padding-right: 40px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; font-size: 14px; opacity: .6; }

/* home widgets */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.hw { min-width: 0; display: flex; flex-direction: column; }
.hw > .card, .hw > .primary-cntdn, .hw > .season-card { flex: 1; }
.hw-full { grid-column: 1 / -1; }
.season-empty { border-style: dashed; color: var(--fg2); font: 600 13px var(--fb); text-align: left; }
.primary-cntdn.has-cover { padding-top: 0; }
.pc-cover { margin: 0 -32px 18px; height: 140px; overflow: hidden; position: relative; }
.pc-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, var(--acc) 100%); }
.pc-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jcard.has-cover { padding-top: 0; overflow: hidden; }
.jc-cover { width: calc(100% + 32px); height: 92px; object-fit: cover; margin: 0 -16px 10px; display: block; }
.mb-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mb-th { flex: 0 0 auto; width: 120px; height: 120px; border-radius: var(--rs); overflow: hidden; border: none; padding: 0; cursor: pointer; background: var(--bg2); }
.mb-th img { width: 100%; height: 100%; object-fit: cover; }
.tv-flags { font-size: 24px; display: flex; gap: 4px; flex-wrap: wrap; }

/* mini calendar */
.mc { display: flex; flex-direction: column; gap: 6px; }
.mc-hd { display: flex; align-items: center; justify-content: space-between; }
.mc-hd b { font-family: var(--fd); font-size: 18px; font-weight: 600; }
.mc-dow, .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mc-dow span { font-size: 10px; font-weight: 700; color: var(--fg3); }
.mc-cell { border: none; background: none; border-radius: 8px; padding: 4px 0 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: 600 12px var(--fb); color: var(--fg); min-height: 34px; }
.mc-cell:hover { background: var(--bg2); }
.mc-cell.out { color: var(--fg3); opacity: .55; }
.mc-cell.today span { background: var(--acc); color: var(--on-acc); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.mc-cell.sel { background: var(--amb-bg); }
.mc-cell i { display: flex; gap: 2px; height: 5px; }
.mc-cell em { width: 5px; height: 5px; border-radius: 50%; background: var(--cc); }
.mc-cell em.mc-r { background: var(--fg3); opacity: .5; }
.mc-day { border-top: 1px solid var(--bdr2); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cf-panel { background: none; border: none; padding: 0; }

/* year grid */
.yr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.yr-month { background: var(--sur2); border: 1px solid var(--bdr2); border-radius: var(--rs); padding: 10px; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.yr-month.now { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-bg); }
.yr-month.past { opacity: .7; }
.yr-mh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.yr-mh b { font-family: var(--fd); font-size: 18px; font-weight: 600; }
.yr-ev, .yr-focus { border: none; text-align: left; cursor: pointer; font: 500 12px var(--fb); color: var(--fg); padding: 4px 6px; border-radius: 6px; display: flex; gap: 6px; align-items: baseline; line-height: 1.35; }
.yr-ev { background: var(--cb); border-left: 3px solid var(--cc); }
.yr-ev.done { opacity: .5; text-decoration: line-through; }
.yr-focus { background: var(--amb-bg); font-weight: 600; }
.yr-d { font-weight: 700; color: var(--cc); min-width: 16px; font-variant-numeric: tabular-nums; }

/* goals */
.gcard.has-cover { padding-top: 0; overflow: hidden; }
.gcard-cover { margin: 0 -18px 4px; height: 120px; position: relative; overflow: hidden; }
.gcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcard-ms { font-size: 11.5px; color: var(--acc); font-weight: 600; }
.mini-date { border: 1px solid var(--bdr); background: var(--sur); color: var(--fg2); border-radius: 6px; padding: 2px 4px; font: 11px var(--fb); max-width: 128px; flex-shrink: 0; }
.gm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.gm-ph { aspect-ratio: 1; border: none; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--bg2); }
.gm-ph img { width: 100%; height: 100%; object-fit: cover; }

/* images */
.img-strip { display: inline-flex; gap: 4px; align-items: center; cursor: zoom-in; }
.img-s { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--bg2); }
.img-more { font-size: 11px; font-weight: 700; color: var(--fg2); }
.img-in { display: flex; flex-wrap: wrap; gap: 6px; }
.img-th { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: var(--bg2); }
.img-th img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.img-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; cursor: pointer; }
.img-add { width: 84px; height: 84px; border-radius: 8px; border: 1.5px dashed var(--bdr); background: var(--sur2); color: var(--fg2); font: 600 12px var(--fb); cursor: pointer; aspect-ratio: 1; }
.img-add:hover { border-color: var(--acc); color: var(--acc); }
.img-missing { opacity: .2; }
.lb-ov { position: fixed; inset: 0; background: rgba(8,6,4,.92); z-index: 950; display: flex; flex-direction: column; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: #fff; font-size: 13px; }
.lb-x { border: none; background: rgba(255,255,255,.12); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 16px 24px; min-height: 0; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: rgba(255,255,255,.12); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; z-index: 2; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }

/* gallery */
.gal-drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1.5px dashed var(--bdr); border-radius: var(--rs); padding: 10px 12px; }
.gal-drop.drop { border-color: var(--acc); background: var(--acc-bg); }
.gal-grid { columns: 4 200px; column-gap: 10px; }
.gal-card { break-inside: avoid; margin: 0 0 10px; background: var(--sur2); border: 1px solid var(--bdr2); border-radius: var(--rs); overflow: hidden; cursor: pointer; position: relative; transition: transform var(--trans), box-shadow var(--trans); }
.gal-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.gal-img { width: 100%; display: block; min-height: 80px; background: var(--bg2); }
.gal-ph { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: var(--bg2); }
.gal-card figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.gal-count { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 10.5px; padding: 2px 8px; border-radius: 100px; }
.gal-tags { font-size: 11px; color: var(--fg3); }

/* gratitude journal */
.jw-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.jw-side { display: flex; flex-direction: column; gap: 12px; }
.jw-stats { grid-template-columns: repeat(2, 1fr); }
.jc-form { display: flex; flex-direction: column; gap: 8px; }
.jc-line { display: flex; align-items: center; gap: 8px; }
.jc-num { width: 24px; height: 24px; border-radius: 50%; background: var(--rose-bg); color: var(--rose); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jc-moods, .mood-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.jc-mood, .mood-b { border: 1.5px solid var(--bdr); background: var(--sur2); border-radius: 12px; padding: 4px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-size: 18px; line-height: 1.1; min-width: 52px; }
.jc-mood small, .mood-b small { font: 600 9.5px var(--fb); color: var(--fg3); margin-top: 2px; }
.jc-mood.on, .mood-b.on { border-color: var(--acc); background: var(--acc-bg); }
.jc-mood:hover, .mood-b:hover { border-color: var(--amb); }
.jc-done { display: flex; flex-direction: column; gap: 8px; }
.jc-done-hd { display: flex; gap: 6px; flex-wrap: wrap; }
.jc-lines { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.jc-lines li::before { content: "🙏 "; }
.jc-story, .je-story { font-size: 12.5px; color: var(--fg2); line-height: 1.65; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.jw-filter { display: flex; flex-direction: column; gap: 8px; }
.hist-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hist-filter .fi { flex: 1; min-width: 180px; }
.je-list { display: flex; flex-direction: column; gap: 10px; }
.je-month { font-family: var(--fd); font-size: 20px; font-weight: 600; margin-top: 8px; display: flex; gap: 8px; align-items: center; }
.je { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; background: var(--sur2); border: 1px solid var(--bdr2); border-radius: var(--rs); padding: 12px; cursor: pointer; }
.je:hover { border-color: var(--amb); }
.je-date { display: flex; flex-direction: column; align-items: center; }
.je-date b { font-family: var(--fd); font-size: 28px; line-height: 1; }
.je-date span { font-size: 11px; color: var(--fg3); font-weight: 600; }
.je-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.je-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.je-hl { font-size: 12.5px; font-weight: 600; }

/* travel */
.tv-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tv-search { flex: 1; min-width: 160px; }
.tv-list { display: flex; flex-direction: column; gap: 10px; }
.tv-country { border: 1px solid var(--bdr2); border-radius: var(--r); background: var(--sur2); overflow: hidden; }
.tv-ch { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; flex-wrap: wrap; }
.tv-ch:hover { background: var(--bg2); }
.tv-flag { font-size: 28px; line-height: 1; }
.tv-cn { font-family: var(--fd); font-size: 21px; font-weight: 600; flex: 1; min-width: 120px; }
.tv-country:not(.open) .blk-chev { transform: rotate(-90deg); }
.tv-cities { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.tv-city { background: var(--sur); border: 1px solid var(--bdr2); border-radius: var(--rs); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.tv-cityh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tv-cityn { font-weight: 700; font-size: 14px; cursor: pointer; }
.tv-cnote { flex: 1; }
.tv-place { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.tv-place:hover { background: var(--amb-bg); }
.tv-place.visited .tv-pb b { text-decoration: line-through; opacity: .6; }
.tv-ic { font-size: 18px; width: 26px; text-align: center; }
.tv-pb { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tv-pb b { font-size: 13px; }
.tv-pb small { font-size: 11.5px; color: var(--fg3); }
.tv-empty { padding: 4px 8px; }

/* history */
.hist-card { gap: 0; }
.hist-day { font: 700 11px var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); padding: 12px 0 6px; border-bottom: 1px solid var(--bdr2); }
.hc-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px dashed var(--bdr2); flex-wrap: wrap; }
.hc-kind { font-size: 11px; font-weight: 700; white-space: nowrap; padding: 1px 8px; border-radius: 100px; background: var(--bg2); color: var(--fg2); }
.k-add, .k-done, .k-restore { background: var(--teal-bg); color: var(--teal); }
.k-delete { background: var(--acc-bg); color: var(--acc); }
.k-edit { background: var(--sky-bg); color: var(--sky); }
.k-assistant { background: var(--amb-bg); color: var(--amb); }
.hc-body { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.hc-diff { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; align-items: baseline; }
.hc-b { color: var(--fg3); text-decoration: line-through; white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-a { color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.hc-arrow { color: var(--fg3); }

/* settings */
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.th-card { border: 2px solid var(--bdr); background: var(--sur2); border-radius: var(--rs); padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; text-align: left; font: 600 12.5px var(--fb); color: var(--fg); }
.th-card.on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-bg); }
.th-sw { display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid var(--bdr2); }
.th-sw i { flex: 1; }
.th-custom { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }
.th-pick { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.th-pick input { width: 40px; height: 34px; border: none; background: none; padding: 0; cursor: pointer; }
.th-pick small { display: block; font-weight: 400; color: var(--fg3); font-size: 11px; }
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.font-card { position: relative; border: 2px solid var(--bdr); background: var(--sur2); border-radius: var(--rs); padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; color: var(--fg); }
.font-card.on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-bg); }
.fc-num { position: absolute; top: 8px; right: 10px; font: 700 10px var(--fb); color: var(--fg3); }
.fc-head { font-size: 22px; line-height: 1.15; }
.fc-body { font-size: 12.5px; color: var(--fg2); }
.font-card small { font: 11px var(--fb); color: var(--fg3); }
.help-list { padding-left: 18px; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }

/* admin */
.adm-tbl td { vertical-align: middle; }
.adm-tbl small { font-size: 11px; }

/* help */
.help-card { scroll-margin-top: 20px; }
.help-body { font-size: 13.5px; line-height: 1.7; display: flex; flex-direction: column; gap: 8px; max-width: 75ch; }
.help-body ol, .help-body ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.welcome-list { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; text-align: left; }

/* assistant */
.asst-fab { position: fixed; right: 20px; bottom: 20px; z-index: 480; border: none; border-radius: 100px; padding: 12px 18px; background: var(--acc); color: var(--on-acc); font: 700 13px var(--fb); box-shadow: var(--sh-lg); cursor: pointer; }
.asst-fab:hover { filter: brightness(1.1); }
.asst-panel { position: fixed; right: 20px; bottom: 20px; z-index: 490; width: min(420px, calc(100vw - 24px)); height: min(640px, calc(100vh - 40px)); background: var(--sur); border: 1px solid var(--bdr); border-radius: var(--r); box-shadow: var(--sh-lg); display: flex; flex-direction: column; overflow: hidden; }
.asst-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--bdr); background: var(--sur2); }
.asst-hd b { font-family: var(--fd); font-size: 19px; }
.asst-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; flex-direction: column; gap: 6px; max-width: 92%; }
.msg-user { align-self: flex-end; }
.msg-user .msg-tx { background: var(--acc); color: var(--on-acc); border-radius: 14px 14px 4px 14px; }
.msg-assistant .msg-tx { background: var(--sur2); border: 1px solid var(--bdr2); border-radius: 14px 14px 14px 4px; }
.msg-tx { padding: 9px 12px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.plan { background: var(--sur2); border: 1px solid var(--bdr); border-left: 3px solid var(--amb); border-radius: var(--rs); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.plan-hd { font: 700 10.5px var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
.plan-und { white-space: pre-wrap; line-height: 1.6; }
.plan-acts, .plan-q { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.plan-acts li.bad { color: #B4321E; }
.plan-acts-btn { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.plan-done { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; color: var(--teal); font-weight: 600; }
.plan-done .opt { cursor: pointer; border: none; }
.asst-in { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--bdr); }
.asst-in textarea { flex: 1; resize: none; border: 1.5px solid var(--bdr); border-radius: var(--rs); padding: 8px 10px; font: 13px var(--fb); background: var(--sur2); color: var(--fg); outline: none; }
.asst-in textarea:focus { border-color: var(--amb); }
.asst-empty { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: 13px; }
.asst-logo { font-size: 28px; color: var(--amb); }
.asst-sug { border: 1px solid var(--bdr); background: var(--sur2); border-radius: 12px; padding: 7px 10px; font: 12.5px var(--fb); color: var(--fg); text-align: left; cursor: pointer; }
.asst-sug:hover { border-color: var(--amb); }

/* section chip */
.o-sec { border: none; cursor: pointer; background: var(--cb, var(--bg2)); color: var(--cc, var(--fg2)); font-family: var(--fb); }

/* to-do hub */
.td-stats .st-late .st-n { color: #B4321E; }
.td-add { gap: 8px; }
.td-add-row { display: flex; gap: 6px; flex-wrap: wrap; }
.td-add-row .fi { flex: 1; min-width: 200px; }
.due-quick { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.due-quick button { border: 1px solid var(--bdr); background: var(--sur2); border-radius: 100px; padding: 3px 10px; font: 600 11.5px var(--fb); color: var(--fg2); cursor: pointer; }
.due-quick button.on { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.td-search { width: 180px; margin-left: auto; }
.td-list { display: flex; flex-direction: column; gap: 14px; }
.td-group { display: flex; flex-direction: column; gap: 4px; }
.td-gh { display: flex; align-items: center; gap: 8px; font: 700 12px var(--fb); color: var(--fg2); padding: 0 2px 4px; }
.g-late .td-gh { color: #B4321E; }
.g-today .td-gh { color: var(--acc); }
.td-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--sur); border: 1px solid var(--bdr2); border-left: 4px solid var(--cc, var(--bdr)); border-radius: var(--rs); flex-wrap: wrap; }
.td-row:hover { border-color: var(--amb); border-left-color: var(--cc, var(--amb)); }
.td-row.done .td-body b { text-decoration: line-through; opacity: .55; }
.td-body { flex: 1; min-width: 160px; display: flex; flex-direction: column; cursor: pointer; }
.td-body b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.td-body small { font-size: 11px; color: var(--fg3); overflow-wrap: anywhere; }
.due-wrap { position: relative; display: inline-flex; cursor: pointer; flex-shrink: 0; }
.due-in { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.due-in::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.due-chip { font: 600 11px var(--fb); padding: 3px 9px; border-radius: 100px; background: var(--bg2); color: var(--fg2); white-space: nowrap; }
.due-chip.none { background: none; border: 1px dashed var(--bdr); color: var(--fg3); }
.due-chip.soon { background: var(--amb-bg); color: var(--amb); }
.due-chip.late { background: rgba(180,50,30,.1); color: #B4321E; }
.due-chip.done { opacity: .6; }
.td-donebox summary { cursor: pointer; font: 700 13px var(--fb); }
.td-done-at { font-size: 10.5px; color: var(--fg3); margin: 6px 2px 2px; }
.todo-item .due-wrap { margin-left: auto; }

/* section link panel */
.sec-links summary { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-wrap: wrap; list-style: none; }
.sec-links summary::-webkit-details-marker { display: none; }
.sec-links summary::after { content: '▾'; margin-left: auto; color: var(--fg3); }
.sec-links:not([open]) summary::after { content: '▸'; }
.sl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.sl-grid.one { grid-template-columns: 1fr; }
.sl-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sl-hb { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--rs); background: var(--sur2); border: 1px solid var(--bdr2); }
.sl-dots { display: inline-flex; gap: 3px; }
.sl-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg2); }
.sl-dots i.exp { box-shadow: inset 0 0 0 1.5px var(--bdr); background: none; }
.sl-dots i.on { background: var(--teal); box-shadow: none; }

/* habit tracker overview */
.hb-over { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.hb-hero { display: flex; align-items: center; gap: 16px; background: var(--sur2); border: 1px solid var(--bdr2); border-radius: var(--r); padding: 14px; }
.hb-hero-tx { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hb-hero-tx b { font-family: var(--fd); font-size: 22px; font-weight: 600; }
.ring-bg { fill: none; stroke: var(--bg2); stroke-width: 9; }
.ring-fg { fill: none; stroke: var(--teal); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .5s; }
.ring-n { text-anchor: middle; font: 700 18px var(--fb); fill: var(--fg); }
.ring-l { text-anchor: middle; font: 600 9px var(--fb); fill: var(--fg3); }
.hb-week { background: var(--sur2); border: 1px solid var(--bdr2); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.hbars { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; min-height: 90px; }
.hbar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.hbar span { width: 100%; max-width: 26px; background: linear-gradient(to top, var(--teal), color-mix(in srgb, var(--teal) 55%, var(--sur))); border-radius: 6px 6px 3px 3px; }
.hbar small { font-size: 10px; color: var(--fg3); font-weight: 600; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.hs-card { border: 1.5px solid var(--bdr2); border-top: 4px solid var(--cc, var(--acc)); background: var(--sur); border-radius: var(--rs); padding: 10px 12px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; color: var(--fg); }
.hs-card.on { border-color: var(--cc, var(--acc)); box-shadow: 0 0 0 3px var(--cb, var(--acc-bg)); }
.hs-card .pbar-fill { background: var(--cc, var(--teal)); }
.hs-name { font-weight: 700; font-size: 13px; }
.hs-today { font-size: 12px; color: var(--fg2); }
.hs-today b { font-size: 16px; color: var(--fg); }
.hs-card small { font-size: 11px; color: var(--fg3); }
.hs-all { --cc: var(--acc); }
.hb-grp { border-left: 3px solid var(--cc, var(--bdr)); padding-left: 6px; margin-top: 6px; }
.hb-gh { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px; flex-wrap: wrap; }
.hb-gn { font-family: var(--fd); font-size: 18px; font-weight: 600; color: var(--cc, var(--fg)); }
.hh-dow, .hh-grid { grid-template-columns: repeat(7, 22px); }
.hh-c { width: 22px; height: 18px; }

/* daily journal & mood */
.dl-top-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ci-wrap { display: flex; flex-direction: column; gap: 10px; }
.ci-row { display: flex; flex-direction: column; gap: 6px; }
.ci-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.ci-grid > div { display: flex; flex-direction: column; gap: 3px; }
.mood-b { min-width: 58px; }
.mm { display: flex; flex-direction: column; gap: 6px; }
.mm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mm-c { height: 40px; border-radius: 8px; border: none; display: flex; align-items: center; justify-content: center; font: 600 12px var(--fb); color: var(--fg2); background: var(--bg2); cursor: pointer; }
.mm-c.empty { background: none; cursor: default; }
.mm-c.fut { opacity: .35; cursor: default; }
.mm-c.today { box-shadow: 0 0 0 2px var(--acc); }
.mm-c.mood-1, .mm-c.mood-2, .mm-c.mood-3, .mm-c.mood-4, .mm-c.mood-5 { font-size: 17px; }
.mood-5 { --mc: var(--mood-5); } .mood-4 { --mc: var(--mood-4); } .mood-3 { --mc: var(--mood-3); } .mood-2 { --mc: var(--mood-2); } .mood-1 { --mc: var(--mood-1); }
.mm-c[class*="mood-"]:not(.mood-0) { background: color-mix(in srgb, var(--mc) 30%, var(--sur)); }
.mm-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 10.5px; color: var(--fg3); }
.mm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--mc); margin-right: 4px; vertical-align: -1px; }
.trend { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; height: 90px; align-items: end; }
.tr-bar { border-radius: 4px 4px 2px 2px; background: var(--mc, var(--bg2)); min-height: 4px; }
.tr-bar.mood-0 { background: var(--bg2); }
.dl-list { display: flex; flex-direction: column; gap: 10px; }
.dl-day { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; background: var(--sur); border: 1px solid var(--bdr2); border-left: 5px solid var(--mc, var(--bdr)); border-radius: var(--r); padding: 12px 14px; cursor: pointer; box-shadow: var(--sh); }
.dl-day:hover { border-color: var(--amb); border-left-color: var(--mc, var(--amb)); }
.dl-date { display: flex; flex-direction: column; align-items: center; }
.dl-date b { font-family: var(--fd); font-size: 30px; line-height: 1; }
.dl-date span { font-size: 11.5px; font-weight: 700; color: var(--fg2); }
.dl-date small { font-size: 10px; color: var(--fg3); }
.dl-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dl-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dl-mood { font-weight: 700; font-size: 14px; }
.dl-count { margin-left: auto; font: 700 11.5px var(--fb); color: var(--teal); background: var(--teal-bg); padding: 2px 10px; border-radius: 100px; }
.dl-line { font-size: 12.5px; color: var(--fg2); line-height: 1.55; overflow-wrap: anywhere; }
.dl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dl-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 100px; background: var(--cb, var(--teal-bg)); color: var(--cc, var(--teal)); }
.dl-chip.hb { background: var(--teal-bg); color: var(--teal); }
.dl-chip.rt { background: var(--amb-bg); color: var(--amb); }
.dl-chip.more { background: var(--bg2); color: var(--fg2); }

@media (max-width: 960px) {
  .jw-grid, .dl-top-grid, .hb-over, .sl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .home-grid { grid-template-columns: 1fr; }
  .nav-gh { display: none; }
  .nav-grp { flex-direction: row; margin: 0; gap: 2px; }
  .sb-footer { display: none; }
  .asst-fab { bottom: 84px; right: 12px; padding: 10px 14px; }
  .asst-panel { right: 6px; left: 6px; width: auto; bottom: 6px; height: calc(100vh - 90px); }
  .pc-cover { margin: 0 -18px 14px; }
  .gal-grid { columns: 2 140px; }
  .ci-grid.two { grid-template-columns: 1fr; }
  .td-search { width: 100%; margin: 0; }
  .td-row { gap: 8px; }
  .dl-day { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .trend { gap: 1px; }
}