/* Daily Planner — shared styles */
:root{
  --bg:#f5f7fb; --card:#fff; --ink:#1e293b; --muted:#64748b; --faint:#94a3b8;
  --line:#eef1f6; --line2:#e5e9f0;
  --blue:#3b82f6; --blue-soft:#e8effe; --indigo:#6366f1; --indigo-soft:#ecebfe;
  --green:#22c55e; --green-soft:#e6f8ee; --amber:#f59e0b; --amber-soft:#fef3e2;
  --orange:#f97316; --orange-soft:#feede1; --rose:#f43f5e; --rose-soft:#feeaed;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Inter",system-ui,sans-serif;background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
.display,h1,h2,h3{font-family:"Space Grotesk","Inter",sans-serif}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;flex:0 0 240px;background:var(--card);border-right:1px solid var(--line);
  padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px 6px}
.brand .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#5b8def,#6366f1);
  display:grid;place-items:center;color:#fff;box-shadow:0 6px 14px rgba(99,102,241,.35)}
.brand h1{font-size:16px;margin:0;line-height:1.1;font-weight:700}
.brand h1 span{display:block;font-weight:800}
.nav{margin-top:22px;display:flex;flex-direction:column;gap:4px}
.nav-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  color:var(--muted);font-weight:600;font-size:14px;transition:.15s}
.nav-link:hover{background:var(--bg);color:var(--ink)}
.nav-link.active{background:var(--blue-soft);color:var(--blue)}
.nav-link.logout{margin-top:10px;color:#b91c1c}
.nav-link.logout:hover{background:var(--rose-soft)}
.sidebar .quote{margin-top:auto;background:linear-gradient(160deg,#eef3ff,#f6f0ff);
  border-radius:16px;padding:16px;color:#475569}
.sidebar .quote .peak{font-size:26px}
.sidebar .quote p{margin:8px 0 0;font-size:13px;font-weight:600;line-height:1.4}

.main{flex:1;padding:26px 30px 40px;min-width:0}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.greet h2{font-size:26px;margin:0;font-weight:700}
.greet p{margin:5px 0 0;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:12px}
.datepill{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line2);
  padding:10px 14px;border-radius:12px;font-weight:600;color:#334155;box-shadow:var(--shadow)}

.btn{background:var(--blue);color:#fff;padding:11px 16px;border-radius:12px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 18px rgba(59,130,246,.28);transition:.15s}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.ghost{background:var(--card);color:#334155;border:1px solid var(--line2);box-shadow:var(--shadow)}
.btn.ghost:hover{background:var(--bg);transform:none}
.btn.danger{background:var(--rose);box-shadow:0 8px 18px rgba(244,63,94,.25)}
.btn.sm{padding:8px 12px;font-size:13px}

/* ---------- flash ---------- */
.flash{padding:13px 17px;border-radius:12px;font-weight:600;margin-bottom:18px}
.flash-ok{background:var(--green-soft);color:#15803d}
.flash-err{background:var(--rose-soft);color:#be123c}

/* ---------- cards & grids ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow);display:flex;gap:16px;align-items:center}
.stat .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:0 0 52px;font-size:24px}
.stat .lbl{color:var(--muted);font-weight:600;font-size:13px}
.stat .big{font-family:"Space Grotesk";font-size:28px;font-weight:700;margin:3px 0 2px}
.stat .sub{font-size:12.5px;font-weight:600}

.grid{display:grid;gap:18px;margin-bottom:18px}
.g-3{grid-template-columns:1.05fr 1fr 1fr}
.g-cal{grid-template-columns:1.15fr 1.3fr 1fr}
.g-2{grid-template-columns:1fr 1.4fr}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);min-width:0}
.panel h3{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:9px}
.panel .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.link{color:var(--blue);font-weight:600;font-size:13px}

/* ---------- plan list ---------- */
.plan-item{display:flex;align-items:center;gap:13px;padding:11px 0;border-top:1px solid var(--line)}
.plan-item:first-of-type{border-top:none;padding-top:2px}
.check{width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);flex:0 0 24px;
  display:grid;place-items:center;transition:.15s;color:#fff;padding:0}
.check.done{background:var(--green);border-color:var(--green)}
.check.prog{border-color:var(--blue)}
.plan-item .body{flex:1;min-width:0}
.plan-item .t{font-weight:600}
.plan-item .tm{color:var(--faint);font-size:12.5px;margin-top:1px}
.plan-item.strike .t{text-decoration:line-through;color:var(--faint)}
.badge{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:20px;white-space:nowrap}
.b-done{background:var(--green-soft);color:#15803d}
.b-prog{background:var(--blue-soft);color:#1d4ed8}
.b-pend{background:#f1f5f9;color:#64748b}

/* Official / Home section headers */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin:14px 0 4px;
  padding:8px 12px;border-radius:10px;background:var(--sec-soft,#f1f5f9);
  font-weight:700;font-size:13px;color:var(--sec,#334155)}
.sec-head:first-of-type,.panel .head + .sec-head{margin-top:0}
.sec-head small{font-weight:600;font-size:11.5px;opacity:.75}
.sec-empty{color:var(--faint);font-size:12.5px;font-weight:500;padding:8px 12px 4px}
.cat-chip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px}

/* timeline */
.tl-item{display:grid;grid-template-columns:70px 22px 1fr;align-items:center;gap:8px;padding:9px 6px;border-radius:12px}
.tl-item.now{background:var(--blue-soft)}
.tl-time{font-size:12.5px;color:var(--muted);font-weight:600}
.tl-dot{width:11px;height:11px;border-radius:50%;justify-self:center}
.tl-title{font-weight:600}
.tl-item.now .tl-title{color:#1d4ed8}

/* donut */
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.donut{position:relative;width:150px;height:150px;flex:0 0 150px}
.donut .center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.donut .center b{font-family:"Space Grotesk";font-size:26px;display:block}
.donut .center small{color:var(--muted);font-size:12px;font-weight:600}
.legend{display:flex;flex-direction:column;gap:12px}
.legend .row{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px}
.legend .row .d{width:11px;height:11px;border-radius:4px}
.legend .row .n{margin-left:auto;font-weight:700;padding-left:18px}
.note-tip{margin-top:16px;background:var(--green-soft);border-radius:12px;padding:13px 15px;
  display:flex;gap:10px;color:#15803d;font-size:13px}
.note-tip b{color:#166534}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head .m{font-family:"Space Grotesk";font-weight:700;font-size:16px}
.cal-nav{display:flex;gap:6px}
.cal-nav a{width:32px;height:32px;border-radius:10px;border:1px solid var(--line2);
  display:grid;place-items:center;color:#475569}
.cal-nav a:hover{background:var(--bg)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cal-grid .dow{color:var(--faint);font-size:11.5px;font-weight:700;padding:6px 0}
.cal-cell{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:11px;
  font-size:13px;font-weight:600;color:#334155}
.cal-cell.mut{color:#cbd5e1}
a.cal-cell:hover{background:var(--bg)}
.cal-cell.today{background:var(--blue);color:#fff;box-shadow:0 6px 12px rgba(59,130,246,.35)}
.cal-cell.sel{outline:2px solid var(--blue);outline-offset:-2px}
.cal-cell .dot{position:absolute;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--amber)}
.cal-cell.today .dot{background:#fff}

/* habits */
.habit-row{display:grid;grid-template-columns:1fr repeat(7,26px);align-items:center;gap:6px;padding:9px 0;border-top:1px solid var(--line)}
.habit-row.h{border-top:none;color:var(--faint);font-size:11.5px;font-weight:700;text-align:center}
.habit-row .name{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13.5px}
.hd{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;justify-self:center;
  border:2px solid var(--line2);color:#fff}
.hd.on{background:var(--green);border-color:var(--green)}

/* motivation */
.quote-card{background:linear-gradient(160deg,#fef7e2,#fdf1cf);border-radius:14px;padding:18px}
.quote-card .q{font-size:16px;font-weight:600;line-height:1.5;color:#7c5a10}
.prio{margin-top:16px}
.prio .lbl{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:#334155}
.prio .box{margin-top:9px;background:var(--orange-soft);border-radius:11px;padding:12px 14px;font-weight:600;color:#9a3412}
.footer-band{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;text-align:center;font-family:"Space Grotesk";font-weight:600;font-size:16px}

/* ---------- toolbars / filters ---------- */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.search-box{flex:1;min-width:230px;display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line2);border-radius:12px;padding:11px 15px;box-shadow:var(--shadow);color:var(--muted)}
.search-box input{border:none;outline:none;width:100%;background:none;font-size:15px;color:var(--ink)}
.fil{background:var(--card);border:1px solid var(--line2);border-radius:11px;
  padding:10px 12px;box-shadow:var(--shadow);outline:none;color:#334155;font-weight:600}
.count-note{color:var(--muted);font-weight:600;margin:2px 0 14px}

/* ---------- routine cards ---------- */
.rlist{display:flex;flex-direction:column;gap:11px}
.rcard{background:var(--card);border:1px solid var(--line);border-left-width:4px;border-radius:14px;
  padding:15px 17px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:flex-start}
.rcard .tag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px}
.rcard .h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rcard .title{font-weight:700;font-size:15px}
.rcard .meta{color:var(--muted);font-size:13px;margin-top:6px;display:flex;gap:16px;flex-wrap:wrap}
.rcard .meta span{display:inline-flex;align-items:center;gap:6px}
.rcard .notes{margin-top:9px;font-size:13px;color:#475569;background:var(--bg);border-radius:9px;padding:9px 11px}
.rcard .acts{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line2);display:grid;place-items:center;color:#64748b;background:var(--card)}
.icon-btn:hover{background:var(--bg);color:var(--ink)}
.icon-btn.del:hover{background:var(--rose-soft);color:var(--rose);border-color:#fecdd3}
mark{background:#fef08a;border-radius:3px;padding:0 2px}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.day-group{margin-bottom:24px}
.day-group .dh{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-weight:700;color:#334155}
.day-group .dh .dcount{color:var(--faint);font-weight:600;font-size:13px}

/* ---------- forms ---------- */
.form-panel{max-width:560px}
.field{margin-bottom:15px}
.field label{display:block;font-weight:600;font-size:13px;margin-bottom:6px;color:#334155}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line2);border-radius:11px;
  padding:11px 13px;outline:none;background:#fbfcfe;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-soft)}
.field textarea{resize:vertical;min-height:70px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.type-pick{display:flex;gap:8px;flex-wrap:wrap}
.type-pick label{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;
  border:1.5px solid var(--line2);font-weight:600;font-size:13px;color:#475569;cursor:pointer;margin:0}
.type-pick input{display:none;width:auto}
.type-pick label:has(input:checked){border-color:currentColor;background:var(--bg)}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(140deg,#eef3ff,#f6f0ff 55%,#fdf3e7)}
.login-card{background:var(--card);border-radius:22px;box-shadow:0 24px 60px rgba(16,24,40,.14);
  padding:34px;width:100%;max-width:400px}
.login-card .brand{padding:0 0 18px;justify-content:center}
.login-card h2{text-align:center;margin:0 0 4px}
.login-card .sub{text-align:center;color:var(--muted);margin:0 0 22px}

/* ---------- mobile ---------- */
.mobile-nav{display:none}
@media(max-width:1100px){.g-3,.g-cal{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.g-2{grid-template-columns:1fr}}
@media(max-width:820px){
  .sidebar{display:none}
  .main{padding:18px 16px 96px}
  .g-3,.g-cal,.stats{grid-template-columns:1fr}
  .greet h2{font-size:22px}
  .mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);
    border-top:1px solid var(--line);padding:8px 6px;justify-content:space-around;z-index:40;align-items:center}
  .mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;
    font-weight:600;color:var(--muted);padding:6px 10px;border-radius:10px}
  .mobile-nav a.active{color:var(--blue);background:var(--blue-soft)}
  .mobile-nav .add-fab{background:var(--blue);color:#fff;border-radius:50%;width:46px;height:46px;
    justify-content:center;box-shadow:0 8px 18px rgba(59,130,246,.35);margin-top:-18px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===================== Money Manager additions ===================== */
.logo-money{background:linear-gradient(135deg,#22c55e,#0ea5e9)!important;box-shadow:0 6px 14px rgba(34,197,94,.35)!important}
.btn-money{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 8px 18px rgba(34,197,94,.3)}
.login-wrap-money{background:linear-gradient(140deg,#e8f9ef,#e6f4fd 55%,#fdf3e7)}
.nav-link.active{background:var(--green-soft);color:#16a34a}
.mobile-nav a.active{color:#16a34a;background:var(--green-soft)}
.mobile-nav .add-fab{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 8px 18px rgba(34,197,94,.35)}

/* amount colors */
.amt-in{color:#16a34a;font-weight:700}
.amt-ex{color:#e11d48;font-weight:700}
.amt-bal-pos{color:#16a34a}
.amt-bal-neg{color:#e11d48}

/* txn row */
.txn-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-left-width:4px;border-radius:14px;padding:13px 16px;box-shadow:var(--shadow)}
.txn-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:0 0 42px}
.txn-row .body{flex:1;min-width:0}
.txn-row .t{font-weight:700;font-size:14.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.txn-row .m{color:var(--muted);font-size:12.5px;margin-top:2px;display:flex;gap:12px;flex-wrap:wrap}
.txn-row .amt{font-family:"Space Grotesk";font-size:16px;white-space:nowrap}
.txn-row .acts{display:flex;gap:6px}
.chip{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:#f1f5f9;color:#475569}

/* bar chart (monthly trend) */
.bars{display:flex;align-items:flex-end;gap:14px;height:180px;padding:8px 4px 0}
.bar-g{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bar-pair{display:flex;align-items:flex-end;gap:5px;height:150px;width:100%;justify-content:center}
.bar{width:16px;border-radius:6px 6px 3px 3px;min-height:3px;position:relative}
.bar.in{background:linear-gradient(180deg,#4ade80,#22c55e)}
.bar.ex{background:linear-gradient(180deg,#fb7185,#f43f5e)}
.bar-lbl{font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}
.bar[title]:hover{filter:brightness(1.1)}
.chart-legend{display:flex;gap:18px;justify-content:center;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:11px;height:11px;border-radius:4px;display:inline-block}

/* category bars (analysis) */
.cat-line{display:grid;grid-template-columns:170px 1fr 90px 52px;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.cat-line:first-of-type{border-top:none}
.cat-line .nm{font-weight:600;font-size:13.5px;display:flex;gap:8px;align-items:center;min-width:0}
.cat-line .track{height:10px;border-radius:6px;background:#f1f5f9;overflow:hidden}
.cat-line .fill{height:100%;border-radius:6px}
.cat-line .val{text-align:right;font-weight:700;font-family:"Space Grotesk";font-size:13px;white-space:nowrap}
.cat-line .pc{text-align:right;color:var(--muted);font-weight:600;font-size:12.5px}
@media(max-width:640px){.cat-line{grid-template-columns:1fr 80px;grid-template-rows:auto auto}.cat-line .track{grid-column:1/3}}

/* report table */
.rep-table{width:100%;border-collapse:collapse}
.rep-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);
  text-align:right;padding:10px 12px;border-bottom:1.5px solid var(--line2)}
.rep-table th:first-child{text-align:left}
.rep-table td{padding:11px 12px;text-align:right;font-weight:600;border-bottom:1px solid var(--line);
  font-family:"Space Grotesk";font-size:13.5px}
.rep-table td:first-child{text-align:left;font-family:"Inter";font-weight:700}
.rep-table tr:hover td{background:#fafbfe}
.rep-table tfoot td{border-top:2px solid var(--line2);border-bottom:none;font-weight:700;background:#f8fafc}
.rate-pill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:14px}
.rate-good{background:var(--green-soft);color:#15803d}
.rate-mid{background:var(--amber-soft);color:#b45309}
.rate-bad{background:var(--rose-soft);color:#be123c}

/* insight cards */
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.insight{background:linear-gradient(160deg,#f8fafc,#f1f5f9);border:1px solid var(--line);
  border-radius:14px;padding:15px}
.insight .k{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.insight .v{font-family:"Space Grotesk";font-size:19px;font-weight:700;margin-top:5px}
.insight .s{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500}