:root{
  --bg:#faf6f8; --card:#ffffff; --card2:#f5eef2; --ink:#3a2e38; --muted:#9b8b96; --faint:#c7b8c2;
  --accent:#b0578d; --accent2:#d97fb0; --accent-soft:#f7e6f0; --ok:#5e9d78; --warn:#e0913f; --danger:#d9636b;
  --border:#f0e5ec; --shadow:0 14px 34px rgba(120,60,100,.10); --r:20px; --r-sm:14px;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Quicksand',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--ink);min-height:100vh;display:flex;justify-content:center;padding:16px;padding-bottom:40px}
.app{width:100%;max-width:520px;display:flex;flex-direction:column;gap:15px}

.topbar{display:flex;justify-content:space-between;align-items:flex-start;padding-top:calc(env(safe-area-inset-top) + 4px)}
.brand h1{font-size:23px;font-weight:700;letter-spacing:-.02em}
.brand p{font-size:12.5px;color:var(--muted);margin-top:2px;font-weight:600}
.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--border);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s}
.icon-btn:hover{background:var(--card2)}
.icon-btn svg{width:20px;height:20px}

.budget-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px;display:flex;gap:18px;align-items:center;box-shadow:var(--shadow)}
.ring{position:relative;width:96px;height:96px;flex-shrink:0}
.ring svg{transform:rotate(-90deg);width:96px;height:96px}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring-bg{stroke:var(--card2)}
.ring-fg{stroke:var(--accent);transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),stroke .3s}
.ring-lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-lbl strong{font-size:20px;font-weight:700}
.ring-lbl span{font-size:10px;color:var(--muted)}
.budget-info{flex:1}
.b-lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.b-spent{font-size:30px;font-weight:700;display:block;margin:2px 0}
.b-of{font-size:12.5px;color:var(--muted);font-weight:600}
.b-bar{height:7px;background:var(--card2);border-radius:999px;overflow:hidden;margin-top:10px}
.b-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:999px;transition:width .5s}
.b-bar i.over{background:var(--danger)}

.insight{background:linear-gradient(135deg,var(--accent-soft),#fbeef5);border:1px solid var(--accent2);border-radius:var(--r-sm);padding:15px 16px;font-size:14px;line-height:1.5;color:#8a3c6a;font-weight:600;display:flex;gap:11px;align-items:flex-start}
.insight svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.insight b{font-weight:700}
.insight.good{background:linear-gradient(135deg,#e6f2ea,#eef7f1);border-color:var(--ok);color:#3f7a5a}

.add-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.amount-row{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--border);border-radius:13px;padding:8px 15px}
.amount-row .cur{font-size:22px;font-weight:700;color:var(--muted)}
.amount-row input{flex:1;border:none;background:none;outline:none;font-size:26px;font-weight:700;font-family:inherit;color:var(--ink);width:100%}
.add-card>input[type=text]{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:14.5px;font-family:inherit;color:var(--ink);outline:none}
.add-card>input[type=text]:focus{border-color:var(--accent)}
.cat-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cat-row::-webkit-scrollbar{display:none}
.cat{white-space:nowrap;border:1px solid var(--border);background:var(--card2);color:var(--muted);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.2s}
.cat.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.feel-label{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.feelings{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.feel{border:1px solid var(--border);background:var(--card2);border-radius:12px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:.2s}
.feel svg{width:24px;height:24px}
.feel span{font-size:10.5px;font-weight:600;color:var(--muted)}
.feel.sel{border-width:2px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.feel.sel span{color:var(--ink)}
.save-btn{border:none;border-radius:13px;padding:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));cursor:pointer;font-size:15px;font-family:inherit;transition:.2s}
.save-btn:hover{filter:brightness(1.05)}

.section{display:flex;flex-direction:column;gap:12px}
.section h3{font-size:16px;font-weight:700}
.sec-head{display:flex;justify-content:space-between;align-items:center}
.clear{font-size:12px;color:var(--accent);font-weight:600;cursor:pointer}
#emo-section:has(.emo-bars:empty){display:none}
.emo-bars{display:flex;flex-direction:column;gap:10px}
.emo-bar{display:flex;align-items:center;gap:11px}
.emo-bar .face{width:26px;height:26px;flex-shrink:0}
.emo-bar .eb-main{flex:1;min-width:0}
.emo-bar .eb-top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;margin-bottom:4px}
.emo-bar .eb-top .amt{font-weight:700}
.emo-bar .track{height:8px;background:var(--card2);border-radius:999px;overflow:hidden}
.emo-bar .track i{display:block;height:100%;border-radius:999px;transition:width .5s}

.log{display:flex;flex-direction:column;gap:9px}
.log-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 13px;box-shadow:var(--shadow)}
.log-item .face{width:30px;height:30px;flex-shrink:0}
.log-item .li-main{flex:1;min-width:0}
.li-desc{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.li-amt{font-size:15px;font-weight:700}
.log-item .rm{background:none;border:none;color:var(--faint);cursor:pointer;font-size:18px;padding:0 2px}
.log-item .rm:hover{color:var(--danger)}
.empty{text-align:center;color:var(--faint);padding:32px 20px;font-size:14px}

.backdrop{position:fixed;inset:0;background:rgba(58,46,56,.4);opacity:0;pointer-events:none;transition:.3s;z-index:40}
.backdrop.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,102%);width:100%;max-width:520px;background:var(--card);border-radius:24px 24px 0 0;border:1px solid var(--border);border-bottom:none;padding:22px 20px calc(26px + env(safe-area-inset-bottom));z-index:50;transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:0 -20px 50px rgba(120,60,100,.18)}
.sheet.on{transform:translate(-50%,0)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.sheet-head h2{font-size:19px;font-weight:700}
.icon-btn.close{width:34px;height:34px;font-size:15px}
.field{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.field span{font-size:13.5px;font-weight:600;color:var(--muted)}
.amount-row.big input{font-size:30px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:700;z-index:60;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow);max-width:90vw;text-align:center}
.toast.on{transform:translate(-50%,0)}