:root {
  --bg: #f2f1eb;
  --ink: #171a17;
  --muted: #757871;
  --line: #dedfd7;
  --panel: #fafaf6;
  --dark: #171a17;
  --lime: #d7f36b;
  --orange: #ff8b5d;
  --lavender: #b9a8e8;
  --blue: #9fc5e8;
  --shadow: 0 18px 50px rgba(27, 31, 25, .07);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "DM Sans", sans-serif; min-width: 320px; }
.server-status-banner { position:fixed; left:50%; top:12px; transform:translateX(-50%); z-index:100; max-width:620px; width:calc(100% - 32px); background:#ffe7de; color:#863d2e; border:1px solid #edb5a6; border-radius:12px; padding:11px 16px; text-align:center; font-size:11px; box-shadow:0 12px 30px rgba(90,40,28,.15); }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; }
.sidebar { background: var(--dark); color: white; padding: 32px 22px 24px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; color: white; text-decoration: none; font: 800 24px "Manrope"; letter-spacing: -.8px; padding: 0 12px; }
.brand-mark { width: 30px; height: 30px; border: 2px solid var(--lime); border-radius: 50%; display: grid; place-items: center; position: relative; }
.brand-mark:after { content:""; position:absolute; width: 38px; height: 12px; border: 1px solid var(--lime); border-radius: 50%; transform: rotate(-28deg); }
.brand-mark i { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; }
.main-nav { margin-top: 52px; display: grid; gap: 8px; }
.nav-item { width: 100%; border: 0; background: transparent; color: #92968f; display: flex; gap: 14px; align-items: center; padding: 13px 14px; border-radius: 12px; cursor: pointer; text-align: left; font-weight: 600; transition: .2s ease; }
.nav-item:hover { color: white; background: #212521; }
.nav-item.active { background: var(--lime); color: var(--dark); }
.nav-folder { display:grid; grid-template-columns:1fr 34px; gap:3px; align-items:center; }
.nav-folder-main { min-width:0; }
.folder-toggle { height:38px; border:0; border-radius:9px; background:transparent; color:#92968f; cursor:pointer; font-size:17px; transition:.2s ease; }
.folder-toggle:hover { color:white; background:#212521; }
.folder-toggle.collapsed { transform:rotate(-90deg); }
.nav-subgroup { display:grid; gap:4px; margin:-3px 0 2px 25px; padding-left:12px; border-left:1px solid #353a34; }
.nav-subgroup.collapsed { display:none; }
.nav-subitem { padding:9px 10px; font-size:11px; gap:10px; border-radius:9px; }
.nav-subitem.active { background:#30352f; color:var(--lime); }
.sub-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.nav-icon { width: 20px; height: 20px; display: grid; place-items: center; font-weight: 800; }
.grid-icon { background: linear-gradient(90deg,currentColor 42%,transparent 42%,transparent 58%,currentColor 58%), linear-gradient(0deg,currentColor 42%,transparent 42%,transparent 58%,currentColor 58%); border-radius: 4px; }
.pulse-icon:before { content:"⌁"; font-size: 24px; }
.coin-icon, .check-icon, .goal-icon { border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; }
.sidebar-bottom { margin-top: auto; }
.upgrade-card { height: 126px; background: #242824; border: 1px solid #353a34; border-radius: 17px; padding: 17px; position: relative; overflow: hidden; margin-bottom: 18px; }
.upgrade-card .spark { color: var(--lime); }
.upgrade-card p { font: 500 15px/1.4 "Manrope"; margin: 10px 0; color: #afb3ac; }
.upgrade-card strong { color: white; }
.mini-signal { position:absolute; width: 95px; height: 95px; border: 1px solid #4a5048; border-radius: 50%; right: -25px; bottom: -30px; }
.mini-signal:after { content:""; position:absolute; inset: 18px; border: 1px solid #4a5048; border-radius: 50%; }
.mini-signal i { position:absolute; width: 9px; height: 9px; background:var(--lime); border-radius:50%; top: 5px; left: 22px; }
.profile { border:0; border-top: 1px solid #30342f; background:transparent; color:white; display:grid; grid-template-columns: 36px 1fr auto; align-items:center; gap:10px; width:100%; padding:18px 4px 0; text-align:left; cursor:pointer; }
.sidebar-auth-btn { width:100%; margin-bottom:12px; justify-content:center; background:#d7f36b; color:#171a17; border-color:#d7f36b; }
.avatar { width:36px; height:36px; background:#e9dfd3; color:#3b3b36; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; }
.profile strong,.profile small { display:block; }
.profile strong { font-size:12px; }
.profile small { color:#777c76; font-size:10px; margin-top:2px; }
.more { color:#767b74; letter-spacing:1px; }
.legal-links { display:flex; gap:12px; padding:14px 4px 0; }
.legal-links a { color:#858b81; font-size:10px; text-decoration:none; }
.legal-links a:hover { color:white; }
main { min-width: 0; }
.topbar { height: 82px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:0 38px; background:rgba(242,241,235,.88); backdrop-filter:blur(14px); position:sticky; top:0; z-index:10; }
.time-navigator { display:flex; align-items:center; gap:7px; min-width:0; }
.period-search { display:flex; align-items:center; border:1px solid var(--line); background:#f8f8f4; border-radius:11px; overflow:hidden; height:39px; }
.period-search select,.period-search input { border:0; background:transparent; color:#555a53; outline:none; height:100%; font-size:11px; }
.period-search select { padding:0 8px 0 11px; font-weight:700; border-right:1px solid var(--line); cursor:pointer; }
.period-search input { width:126px; padding:0 9px; }
.period-arrow,.today-btn { height:39px; border:1px solid var(--line); background:#f8f8f4; border-radius:10px; cursor:pointer; }
.period-arrow { width:34px; font-size:22px; line-height:1; }
.today-btn { padding:0 11px; font-size:10px; font-weight:700; }
.period-arrow:hover,.today-btn:hover { background:white; border-color:#c9cbc3; }
.period-label { font-size:11px; color:#777b74; white-space:nowrap; margin-left:3px; }
.top-actions { display:flex; align-items:center; gap:9px; }
.keyword-search { height:39px; min-width:230px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:#f8f8f4; border-radius:11px; padding:0 11px; }
.keyword-search span { color:#878b84; font-size:16px; }
.keyword-search input { border:0; outline:0; background:transparent; width:100%; font-size:12px; color:var(--ink); }
.icon-btn { width:39px; height:39px; border:1px solid var(--line); background:#f8f8f4; border-radius:11px; cursor:pointer; position:relative; font-size:21px; }
.notification i { position:absolute; width:7px; height:7px; background:var(--orange); border-radius:50%; top:7px; right:7px; border:2px solid var(--bg); }
.primary-btn { border:0; background:var(--dark); color:white; border-radius:11px; padding:11px 17px; cursor:pointer; font-weight:600; font-size:13px; transition:.2s; }
.primary-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.15); }
.secondary-btn { border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:11px; padding:10px 14px; cursor:pointer; font-weight:700; font-size:12px; }
.secondary-btn:hover { background:white; }
.mobile-menu { display:none; }
.content { max-width: 1480px; margin: 0 auto; padding: 42px 38px 70px; }
.view { display:none; }
.auth-required { background:radial-gradient(circle at top left,#eef7c9 0,#f4f4ef 36%,#171a17 100%); min-height:100vh; }
.auth-required .server-status-banner { display:none; }
.auth-gate { min-height:100vh; display:grid; place-items:center; padding:32px; }
.auth-gate-card { width:min(520px,100%); background:rgba(250,250,246,.96); border:1px solid #e3e3dc; border-radius:28px; padding:38px; box-shadow:0 30px 90px rgba(0,0,0,.22); text-align:left; }
.auth-gate-card .brand-mark { margin-bottom:22px; }
.auth-gate-card h1 { font-size:38px; line-height:1.05; margin:8px 0 14px; }
.auth-gate-card p:not(.eyebrow) { color:var(--muted); line-height:1.6; margin-bottom:24px; }
.auth-gate-actions { display:flex; gap:10px; flex-wrap:wrap; }
.search-results-popover { position:fixed; right:172px; top:72px; z-index:45; width:min(390px,calc(100vw - 32px)); background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:12px; }
.keyword-results-head { display:flex; justify-content:space-between; align-items:center; padding:2px 4px 10px; }
.keyword-results-head strong { font-size:11px; }
.keyword-results-head button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:10px; font-weight:800; }
.keyword-results-list { display:grid; gap:8px; max-height:360px; overflow:auto; }
.keyword-result { border:1px solid var(--line); background:white; border-radius:12px; padding:10px 12px; display:grid; gap:3px; text-align:left; cursor:pointer; color:var(--ink); }
.keyword-result:hover { border-color:#c9cbc3; box-shadow:0 8px 18px rgba(25,29,23,.06); }
.keyword-result span { color:#6b8d23; font-size:8px; letter-spacing:1.1px; font-weight:800; text-transform:uppercase; }
.keyword-result strong { font-size:12px; }
.keyword-result small { color:var(--muted); font-size:9px; }
.view.active { display:block; animation:fadeIn .3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } }
.welcome-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; }
.eyebrow { margin:0 0 9px; letter-spacing:1.8px; font-size:10px; font-weight:800; color:#898c85; }
h1,h2,h3 { font-family:"Manrope",sans-serif; margin:0; }
h1 { font-size:31px; letter-spacing:-1.2px; line-height:1.2; }
h1 span { color:#a491df; }
.subtitle { margin:8px 0 0; color:var(--muted); font-size:14px; }
.streak-badge { display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:#f8f7f2; border-radius:14px; padding:10px 16px 10px 11px; }
.streak-badge > span { width:37px; height:37px; display:grid; place-items:center; background:#fff0e7; border-radius:10px; }
.streak-badge strong,.streak-badge small { display:block; }
.streak-badge strong { font:700 13px "Manrope"; }
.streak-badge small { font-size:10px; color:var(--muted); margin-top:2px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.metric-card { height:194px; border-radius:19px; padding:20px 21px; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.fitness-card { background:var(--lime); }
.finance-card { background:#ff9a70; }
.habits-card { background:#c5b8eb; }
.card-top,.metric-main,.metric-foot { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.metric-label { font-size:10px; font-weight:800; letter-spacing:1.5px; display:flex; align-items:center; gap:8px; }
.round-icon { width:23px; height:23px; border:1px solid rgba(0,0,0,.35); border-radius:50%; display:grid; place-items:center; letter-spacing:0; }
.ghost-more { border:0; background:transparent; cursor:pointer; font-weight:800; letter-spacing:1px; }
.metric-main { margin-top:25px; align-items:flex-end; }
.big-number { font:800 31px "Manrope"; letter-spacing:-1.2px; }
.unit { font-size:11px; margin-left:7px; color:rgba(0,0,0,.65); }
.trend { font-size:10px; font-weight:700; padding:5px 7px; border-radius:7px; }
.metric-card .trend { background:rgba(255,255,255,.42); }
.positive { color:#447623; }
.metric-foot { margin-top:20px; font-size:10px; }
.metric-foot strong { font-size:10px; }
.progress-track { height:5px; border-radius:99px; background:rgba(0,0,0,.12); overflow:hidden; margin-top:8px; }
.progress-track i { display:block; height:100%; border-radius:inherit; background:var(--dark); transition:width .45s ease; }
.card-art { position:absolute; right:-10px; bottom:-18px; opacity:.14; }
.rings { width:120px; height:120px; border:2px solid; border-radius:50%; }
.rings i { position:absolute; border:2px solid; border-radius:50%; inset:18px; }
.rings i:nth-child(2) { inset:38px; }
.rings i:nth-child(3) { inset:57px; }
.coin-stack { width:110px; height:90px; }
.coin-stack i { position:absolute; width:80px; height:30px; border:2px solid; border-radius:50%; right:0; bottom:0; }
.coin-stack i:nth-child(2) { bottom:15px; }
.coin-stack i:nth-child(3) { bottom:30px; }
.petals { width:110px; height:110px; }
.petals i { position:absolute; width:50px; height:70px; border:2px solid; border-radius:50%; left:28px; top:4px; }
.petals i:nth-child(2) { transform:rotate(90deg); }
.petals i:nth-child(3) { transform:rotate(45deg); }
.petals i:nth-child(4) { transform:rotate(-45deg); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,.8fr); gap:16px; margin-bottom:16px; }
.panel { background:var(--panel); border:1px solid #e3e3dc; border-radius:19px; padding:23px; box-shadow:0 8px 24px rgba(25,29,23,.025); }
.panel-header { display:flex; justify-content:space-between; align-items:flex-start; }
.panel h2 { font-size:18px; letter-spacing:-.5px; }
.segmented { background:#eeeee8; border-radius:9px; padding:3px; display:flex; }
.segmented button,.entry-type button { border:0; background:transparent; border-radius:7px; padding:7px 10px; font-size:10px; cursor:pointer; color:#777b74; }
.segmented button.active { background:var(--dark); color:white; }
.chart-summary { display:flex; align-items:center; gap:12px; margin-top:24px; }
.chart-summary div strong,.chart-summary div span { display:block; }
.chart-summary strong { font:800 27px "Manrope"; letter-spacing:-1px; }
.chart-summary div span { font-size:10px; color:var(--muted); }
.chart-summary .trend { background:#edf4e8; }
.chart-wrap { height:210px; margin-top:14px; display:flex; gap:12px; }
.y-labels { display:flex; flex-direction:column; justify-content:space-between; font-size:9px; color:#a0a39d; padding-bottom:1px; }
#mainChart { width:100%; height:100%; overflow:visible; }
.x-labels { display:grid; grid-template-columns:repeat(7,1fr); margin-left:38px; font-size:9px; color:#969a93; text-align:center; }
.text-btn { border:0; background:transparent; font-size:10px; color:#6d716a; cursor:pointer; padding:5px; }
.habit-list { margin-top:22px; display:grid; gap:8px; }
.category-habit-list { margin-top:18px; }
.empty-state { padding:24px 12px; border:1px dashed #d7d9d0; border-radius:12px; color:#92958e; font-size:11px; text-align:center; }
.habit-item { display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:10px; border:1px solid #e4e4dd; border-radius:12px; padding:9px 11px; transition:.2s; }
.habit-item.done { background:#f1f3eb; }
.habit-check { width:28px; height:28px; border:1.5px solid #c7cac2; border-radius:9px; background:white; cursor:pointer; }
.habit-item.done .habit-check { background:var(--dark); color:var(--lime); border-color:var(--dark); }
.habit-item strong,.habit-item small { display:block; }
.habit-item strong { font-size:11px; }
.habit-item small { font-size:9px; color:#90938d; margin-top:3px; }
.habit-streak { font-size:9px; color:#777b75; background:#efefe9; padding:5px 7px; border-radius:7px; }
.habit-completion { margin-top:18px; padding-top:15px; border-top:1px solid #e1e2db; }
.habit-completion > div:first-child { display:flex; justify-content:space-between; font-size:10px; }
.bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.activity-list { margin-top:18px; }
.activity-row { display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid #e7e7e0; }
.activity-row:first-child { border-top:0; }
.activity-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:#eff4d7; }
.activity-row:nth-child(2) .activity-icon { background:#eee7f7; }
.activity-row:nth-child(3) .activity-icon { background:#e6eff6; }
.activity-row strong,.activity-row small,.activity-value strong,.activity-value small { display:block; }
.activity-row strong { font-size:11px; }
.activity-row small { font-size:9px; color:#92958e; margin-top:3px; }
.activity-value { text-align:right; }
.activity-value strong { font-size:11px; }
.activity-value small { font-size:9px; color:#92958e; margin-top:3px; }
.spending-body { display:flex; align-items:center; justify-content:space-around; margin-top:22px; gap:25px; }
.donut { --spent:54.5; width:150px; height:150px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--orange) 0 calc(var(--spent)*1%), #f2c85f calc(var(--spent)*1%) 70%, #b7a4e5 70% 85%, #dcded6 85%); position:relative; }
.donut:after { content:""; position:absolute; inset:18px; border-radius:50%; background:var(--panel); }
.donut div { position:relative; z-index:1; text-align:center; }
.donut strong,.donut span { display:block; }
.donut strong { font:800 19px "Manrope"; }
.donut span { color:var(--muted); font-size:9px; margin-top:2px; }
.category-list { min-width:160px; display:grid; gap:13px; }
.category-row { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:8px; font-size:10px; }
.category-row i { width:7px; height:7px; border-radius:50%; }
.category-row strong { font-size:10px; }
.sub-overview-panel { margin-top:16px; }
.sub-overview-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:18px; }
.overview-group { border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden; }
.overview-group-head { width:100%; border:0; background:linear-gradient(135deg,#f8f8f3,#eef2dc); color:var(--ink); padding:17px 18px; display:flex; justify-content:space-between; align-items:center; text-align:left; cursor:pointer; }
.overview-group-head span small,.overview-group-head span strong,.overview-group-head span em { display:block; }
.overview-group-head span small { color:var(--muted); font-size:8px; letter-spacing:1.2px; font-weight:800; }
.overview-group-head span strong { font:800 22px "Manrope"; margin-top:4px; }
.overview-group-head span em { color:#73786f; font-style:normal; font-size:10px; margin-top:4px; }
.overview-group-head b { color:#4f5a3b; font-size:11px; }
.overview-group-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:12px; }
.sub-overview-card { border:1px solid var(--line); background:#fff; border-radius:16px; padding:14px; min-height:128px; text-align:left; cursor:pointer; color:var(--ink); display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:start; transition:.2s ease; }
.sub-overview-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#cdd0c5; }
.sub-overview-icon { width:42px; height:42px; border-radius:13px; background:#eef2dc; display:grid; place-items:center; font-size:17px; }
.sub-overview-card small,.sub-overview-card strong,.sub-overview-card em { display:block; }
.sub-overview-card small { color:var(--muted); font-size:8px; letter-spacing:1px; font-weight:800; text-transform:uppercase; }
.sub-overview-card strong { font:800 20px "Manrope"; margin-top:7px; letter-spacing:-.5px; }
.sub-overview-card em { color:var(--muted); font-style:normal; font-size:9px; line-height:1.35; margin-top:4px; }
.sub-overview-card b { color:#9a9f95; font-size:15px; }
.detail-view { min-height:700px; }
.detail-hero { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; }
.detail-hero h1 { margin-bottom:6px; }
.detail-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.stat-box { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:19px; }
.stat-box span { color:var(--muted); font-size:10px; }
.stat-box strong { display:block; font:800 23px "Manrope"; margin-top:8px; }
.detail-grid { display:grid; grid-template-columns:1.4fr .8fr; gap:16px; }
.large-list { margin-top:16px; }
.large-row { display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--line); }
.large-row:first-child { border-top:0; }
.large-row .activity-icon { width:43px; height:43px; }
.large-row > div:nth-child(2) { flex:1; }
.large-row strong,.large-row small { display:block; }
.large-row small { color:var(--muted); font-size:10px; margin-top:4px; }
.large-row > strong { font-size:12px; }
.goals-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:16px; }
.goal-list { display:grid; gap:12px; margin-top:18px; }
.goal-card { border:1px solid var(--line); border-radius:15px; padding:17px; background:white; }
.goal-card-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.goal-card h3 { font-size:14px; }
.goal-card p { margin:5px 0 0; font-size:10px; color:var(--muted); }
.goal-percent { font:800 16px "Manrope"; }
.goal-progress-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; margin-top:15px; }
.goal-progress-row .progress-track { margin:0; height:7px; }
.goal-progress-row span { font-size:10px; color:var(--muted); min-width:75px; text-align:right; }
.goal-actions { display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.goal-actions button { border:0; background:#efefe9; border-radius:8px; padding:7px 9px; font-size:10px; cursor:pointer; }
.goal-actions .goal-delete { color:#a24f3a; background:#fff0eb; }
.large-row .goal-delete { width:27px; height:27px; border:0; border-radius:8px; background:#fff0eb; color:#a24f3a; cursor:pointer; flex:0 0 auto; }
.goal-form { display:grid; gap:14px; margin-top:18px; }
.goal-form label { display:grid; gap:7px; color:var(--muted); font-size:10px; font-weight:700; }
.goal-form input,.goal-form select { width:100%; border:1px solid var(--line); background:white; border-radius:10px; padding:11px; outline:none; color:var(--ink); }
.goal-form input:focus,.goal-form select:focus { border-color:#9b9f94; }
.goal-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tracker-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(285px,.6fr); gap:16px; }
.tracker-form { display:grid; gap:13px; margin-top:18px; }
.tracker-form label { display:grid; gap:7px; color:var(--muted); font-size:10px; font-weight:700; }
.tracker-form input,.tracker-form select { width:100%; border:1px solid var(--line); background:white; border-radius:10px; padding:11px; outline:none; color:var(--ink); }
.tracker-form input:focus,.tracker-form select:focus { border-color:#9b9f94; }
.macro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.macro-box { padding:12px; border-radius:11px; background:#f0f0e9; text-align:center; }
.macro-box strong,.macro-box span { display:block; }
.macro-box strong { font:800 17px "Manrope"; }
.macro-box span { margin-top:3px; font-size:9px; color:var(--muted); }
.meal-tag { font-size:9px; padding:5px 7px; border-radius:7px; background:#eff4d7; color:#61762a; }
.weight-chart { height:230px; margin-top:20px; border-bottom:1px solid var(--line); position:relative; }
.weight-chart svg { width:100%; height:100%; overflow:visible; }
.weight-change.down { color:#4d7e2e; }
.weight-change.up { color:#a45a42; }
.budget-negative { color:#b3533b; }
.budget-meter { height:14px; border-radius:99px; background:#e9eae2; overflow:hidden; margin-top:28px; }
.budget-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d7f36b,#ff9a70); transition:width .4s ease; }
.budget-scale { display:flex; justify-content:space-between; margin-top:8px; color:var(--muted); font-size:9px; }
.form-note { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.finance-title-row { margin-bottom:22px; }
.finance-header-actions { display:flex; align-items:center; gap:9px; }
.bank-link-btn { border:1px solid #cdd0c5; background:var(--panel); color:var(--ink); border-radius:11px; padding:10px 14px; cursor:pointer; font-size:11px; font-weight:700; }
.bank-link-btn:hover { background:white; }
.bank-link-btn span { color:#6b8d23; font-size:14px; margin-right:3px; }
.finance-hero-card { min-height:205px; background:linear-gradient(135deg,#241f3f 0%,#171a25 62%,#202a1f 100%); color:white; border-radius:24px; padding:30px 34px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; position:relative; margin-bottom:14px; box-shadow:0 22px 55px rgba(26,24,43,.18); }
.finance-hero-card:before { content:""; position:absolute; width:330px; height:330px; border:1px solid rgba(215,243,107,.14); border-radius:50%; right:-100px; top:-150px; box-shadow:0 0 0 45px rgba(215,243,107,.035),0 0 0 90px rgba(215,243,107,.025); }
.finance-hero-copy { position:relative; z-index:1; }
.finance-hero-copy span,.finance-hero-copy strong,.finance-hero-copy small { display:block; }
.finance-hero-copy span { font-size:10px; letter-spacing:1.8px; color:#b8b6c6; font-weight:800; }
.finance-hero-copy strong { font:800 45px "Manrope"; letter-spacing:-2px; margin:11px 0 4px; }
.finance-hero-copy small { color:#aaaab3; font-size:11px; }
.finance-hero-ring { --budget-used:0; width:128px; height:128px; border-radius:50%; background:conic-gradient(var(--lime) calc(var(--budget-used)*1%),rgba(255,255,255,.12) 0); display:grid; place-items:center; position:relative; z-index:1; }
.finance-hero-ring:after { content:""; position:absolute; inset:12px; border-radius:50%; background:#1d2020; }
.finance-hero-ring div { position:relative; z-index:1; text-align:center; }
.finance-hero-ring strong,.finance-hero-ring span { display:block; }
.finance-hero-ring strong { font:800 22px "Manrope"; }
.finance-hero-ring span { font-size:8px; color:#aeb1aa; margin-top:2px; }
.cash-flow-strip { display:grid; grid-template-columns:repeat(4,1fr); background:var(--panel); border:1px solid var(--line); border-radius:18px; margin-bottom:16px; overflow:hidden; }
.cash-flow-strip > div { padding:17px 20px; border-left:1px solid var(--line); }
.cash-flow-strip > div:first-child { border-left:0; }
.cash-flow-strip span,.cash-flow-strip strong { display:block; }
.cash-flow-strip span { color:var(--muted); font-size:9px; }
.cash-flow-strip strong { font:700 16px "Manrope"; margin-top:6px; }
.connected-account-bar { display:flex; justify-content:space-between; align-items:center; background:#f8f8f3; border:1px solid var(--line); border-radius:13px; padding:11px 15px; margin:-5px 0 16px; }
.connected-account-bar > div { display:flex; align-items:center; gap:8px; }
.connected-account-bar strong { font-size:10px; }
.connected-account-bar button { border:0; background:transparent; color:#66704f; font-size:10px; font-weight:700; cursor:pointer; }
.connection-dot { width:8px; height:8px; border-radius:50%; background:#b9bcb5; }
.connection-dot.connected { background:#77a536; box-shadow:0 0 0 3px #e4efd4; }
.money-positive { color:#4f7d31 !important; }
.finance-command-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr); gap:16px; }
.finance-main-column,.finance-side-column { display:grid; gap:16px; align-content:start; }
.finance-category-list { display:grid; gap:18px; margin-top:24px; }
.finance-category-row { display:grid; grid-template-columns:35px 1fr auto; gap:11px; align-items:center; }
.category-symbol { width:35px; height:35px; border-radius:11px; display:grid; place-items:center; font-size:9px; }
.finance-category-row > div strong,.finance-category-row > div small { display:block; }
.finance-category-row > div strong { font-size:11px; }
.finance-category-row > div small { color:var(--muted); font-size:9px; margin-top:5px; }
.finance-category-row > strong { font-size:10px; }
.mini-budget-track { height:5px; background:#ecece6; border-radius:99px; overflow:hidden; margin-top:7px; }
.mini-budget-track i { display:block; height:100%; border-radius:inherit; }
.finance-settings { margin-top:22px; border-top:1px solid var(--line); padding-top:15px; }
.finance-settings summary { cursor:pointer; font-size:10px; font-weight:700; color:#6d716a; }
.category-budget-inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.finance-count { min-width:25px; height:25px; border-radius:50%; background:#edeee7; display:grid; place-items:center; font-size:9px; }
.transaction-list,.recurring-list { margin-top:14px; }
.transaction-row { display:grid; grid-template-columns:38px 1fr auto 25px; gap:11px; align-items:center; padding:13px 0; border-top:1px solid #e7e7e0; }
.transaction-row:first-child { border-top:0; }
.transaction-logo { width:38px; height:38px; border-radius:12px; background:#eeeee8; display:grid; place-items:center; font-weight:800; }
.transaction-row div strong,.transaction-row div small { display:block; }
.transaction-row div strong { font-size:11px; }
.transaction-row div small { font-size:9px; color:var(--muted); margin-top:3px; }
.transaction-row > strong { font-size:11px; }
.transaction-delete,.recurring-row button { border:0; background:transparent; color:#aaa; cursor:pointer; font-size:15px; }
.recurring-row { display:grid; grid-template-columns:34px 1fr auto 20px; gap:9px; align-items:center; padding:12px 0; border-top:1px solid #e7e7e0; }
.recurring-row:first-child { border-top:0; }
.recurring-row > span { width:34px; height:34px; border-radius:10px; background:#ede8f5; display:grid; place-items:center; font-size:11px; font-weight:800; color:#705f9e; }
.recurring-row div strong,.recurring-row div small { display:block; }
.recurring-row div strong,.recurring-row > strong { font-size:10px; }
.recurring-row div small { color:var(--muted); font-size:8px; margin-top:3px; }
.finance-insight-card { background:#e8f1c8; }
.insight-spark { color:#718c25; font-size:20px; }
.finance-insight-card h2 { margin-top:10px; line-height:1.3; }
.finance-insight-card > p:last-child { color:#626a53; font-size:10px; line-height:1.55; margin:9px 0 0; }
.transaction-search-panel { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:10px 14px; margin-bottom:16px; }
.transaction-search-panel > span { font-size:21px; color:#878b84; }
.transaction-search-panel input { border:0; outline:0; background:transparent; width:100%; padding:5px; color:var(--ink); font-size:13px; }
.transaction-search-panel small { color:var(--muted); font-size:9px; white-space:nowrap; }
.recurring-page-list .recurring-row { padding:16px 0; }
.bank-modal { text-align:center; }
.bank-shield { width:52px; height:52px; border-radius:16px; background:#e8f1c8; color:#708b27; display:grid; place-items:center; margin:0 auto 18px; font-size:20px; }
.bank-modal .eyebrow { text-align:center; }
.bank-modal-copy { color:var(--muted); font-size:12px; line-height:1.55; margin:-8px auto 20px; max-width:340px; }
.offline-bank-note { display:none; background:#fff3df; color:#8a6631; border-radius:10px; padding:10px; font-size:9px; line-height:1.5; }
.bank-security-note { text-align:left; background:#f0f1eb; border-radius:13px; padding:14px; margin-bottom:18px; }
.bank-security-note strong,.bank-security-note span { display:block; }
.bank-security-note strong { font-size:10px; }
.bank-security-note span { color:var(--muted); font-size:9px; line-height:1.5; margin-top:5px; }
.bank-setup-message { min-height:31px; color:#86714d; font-size:9px; line-height:1.5; margin:12px 0 0; }
.bank-sync-btn { width:100%; border:1px solid var(--line); background:transparent; border-radius:11px; padding:11px; margin-top:8px; cursor:pointer; font-size:10px; font-weight:700; }
.bank-config-form { display:grid; gap:11px; text-align:left; margin-bottom:12px; }
.bank-config-form label { display:grid; gap:6px; font-size:10px; color:var(--muted); font-weight:700; }
.bank-config-form input { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px; outline:none; background:white; }
.auth-modal .auth-name-field { display:none; }
.auth-modal.create-mode .auth-name-field { display:grid; }
.auth-modal .auth-reset-code-field { display:none; }
.auth-modal.reset-mode .auth-reset-code-field { display:grid; }
.auth-modal form { display:grid; gap:11px; text-align:left; }
.auth-modal label { display:grid; gap:6px; font-size:10px; color:var(--muted); font-weight:700; }
.auth-modal input { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px; outline:none; background:white; }
.auth-toggle,.auth-logout { width:100%; margin-top:10px; }
.hidden { display:none !important; }
.fitness-overview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
.fitness-overview-card { border:1px solid var(--line); background:var(--panel); border-radius:17px; padding:18px; display:grid; grid-template-columns:44px 1fr auto; gap:13px; align-items:center; text-align:left; cursor:pointer; color:var(--ink); transition:.2s ease; }
.fitness-overview-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#cdd0c5; }
.fitness-overview-card span:nth-child(2) small,.fitness-overview-card span:nth-child(2) strong,.fitness-overview-card span:nth-child(2) em { display:block; }
.fitness-overview-card small { font-size:8px; letter-spacing:1.3px; color:var(--muted); font-weight:800; }
.fitness-overview-card strong { font:700 13px "Manrope"; margin-top:4px; }
.fitness-overview-card em { font-style:normal; font-size:9px; color:var(--muted); margin-top:3px; }
.fitness-overview-card b { font-size:16px; }
.overview-card-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:18px; }
.meal-overview-icon { background:#fff0e7; }
.weight-overview-icon { background:#eee7f7; }
.workout-overview-icon { background:#eff4d7; }
.week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:20px; }
.day-cell { height:66px; border-radius:9px; background:#efefe9; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:9px; gap:7px; color:var(--muted); }
.day-cell i { width:22px; height:22px; border-radius:50%; background:#d9ddd2; display:grid; place-items:center; font-style:normal; color:white; }
.day-cell.done i { background:var(--dark); color:var(--lime); }
.modal-backdrop { position:fixed; inset:0; background:rgba(10,12,10,.52); backdrop-filter:blur(5px); z-index:50; display:none; place-items:center; padding:20px; }
.modal-backdrop.open { display:grid; }
.modal { width:min(440px,100%); background:var(--panel); border-radius:22px; padding:28px; position:relative; box-shadow:0 30px 90px rgba(0,0,0,.25); animation:pop .2s ease; }
@keyframes pop { from { transform:scale(.97); opacity:.5; } }
.modal h2 { font-size:24px; margin-bottom:20px; }
.modal-close { position:absolute; right:18px; top:17px; width:32px; height:32px; border:0; border-radius:50%; background:#ecece6; cursor:pointer; font-size:21px; }
.entry-type { display:grid; grid-template-columns:repeat(3,1fr); background:#ecece6; padding:4px; border-radius:10px; margin-bottom:20px; }
.entry-type button.active { background:var(--dark); color:white; }
#entryForm { display:grid; gap:15px; }
#entryForm label { font-size:10px; color:var(--muted); font-weight:700; display:grid; gap:7px; }
#entryForm input,#entryForm select { width:100%; background:white; border:1px solid var(--line); border-radius:10px; padding:12px; outline:none; color:var(--ink); }
#entryForm input:focus,#entryForm select:focus { border-color:#9b9f94; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.submit-btn { margin-top:6px; padding:13px; }
.toast { position:fixed; right:25px; bottom:25px; background:var(--dark); color:white; border-radius:12px; padding:13px 17px; font-size:12px; z-index:60; transform:translateY(100px); opacity:0; transition:.3s; }
.toast.show { transform:translateY(0); opacity:1; }

@media (max-width:1100px) {
  .app-shell { grid-template-columns:205px 1fr; }
  .sidebar { padding-left:16px; padding-right:16px; }
  .content { padding-left:24px; padding-right:24px; }
  .topbar { padding-left:24px; padding-right:24px; }
  .period-label { display:none; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .metric-card:last-child { grid-column:span 2; }
  .dashboard-grid,.detail-grid,.goals-layout,.tracker-layout { grid-template-columns:1fr; }
  .overview-group-cards { grid-template-columns:repeat(2,1fr); }
  .fitness-overview-grid { grid-template-columns:1fr; }
  .finance-command-grid { grid-template-columns:1fr; }
}
@media (max-width:780px) {
  .app-shell { display:block; }
  .sidebar { position:fixed; transform:translateX(-105%); transition:.25s; width:240px; }
  .sidebar.open { transform:translateX(0); }
  .mobile-menu { display:block; border:0; background:transparent; font-size:20px; cursor:pointer; }
  .time-navigator { flex:1; margin:0 10px; }
  .keyword-search { min-width:0; width:150px; }
  .period-search { flex:1; }
  .period-search input { width:100%; min-width:105px; }
  .today-btn { display:none; }
  .topbar { height:68px; }
  .content { padding:28px 16px 50px; }
  .welcome-row { align-items:flex-start; }
  .streak-badge { padding:8px; }
  .streak-badge div { display:none; }
  h1 { font-size:26px; }
  .metric-grid,.bottom-grid,.sub-overview-grid,.overview-group-cards { grid-template-columns:1fr; }
  .metric-card:last-child { grid-column:auto; }
  .detail-stats { grid-template-columns:1fr 1fr; }
  .cash-flow-strip { grid-template-columns:1fr 1fr; }
  .cash-flow-strip > div:nth-child(3) { border-left:0; border-top:1px solid var(--line); }
  .cash-flow-strip > div:nth-child(4) { border-top:1px solid var(--line); }
}
@media (max-width:520px) {
  .primary-btn { padding:10px 12px; }
  .icon-btn { display:none; }
  .period-search select { max-width:72px; }
  .keyword-search { display:none; }
  .search-results-popover { right:16px; top:64px; }
  .period-arrow { width:30px; }
  .welcome-row { display:block; }
  .streak-badge { display:inline-flex; margin-top:16px; }
  .streak-badge div { display:block; }
  .panel { padding:18px; }
  .panel-header { gap:12px; }
  .segmented button { padding:6px; }
  .chart-wrap { height:175px; }
  .spending-body { flex-direction:column; align-items:stretch; }
  .donut { margin:auto; }
  .detail-stats { grid-template-columns:1fr; }
  .finance-hero-card { padding:24px; }
  .finance-hero-copy strong { font-size:35px; }
  .finance-hero-ring { width:100px; height:100px; }
  .category-budget-inputs { grid-template-columns:1fr; }
  .finance-title-row { display:block; }
  .finance-header-actions { margin-top:16px; flex-wrap:wrap; }
  .detail-hero { align-items:flex-start; gap:16px; }
  .detail-hero .primary-btn { white-space:nowrap; }
}