*{box-sizing:border-box}body{margin:0;background:#0b0b0d;color:#f7f7f7;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif}.app{max-width:760px;margin:auto}header{position:sticky;top:0;padding:18px;background:#0b0b0df2;display:flex;justify-content:space-between;z-index:2}header b{font-size:22px}header small{display:block;color:#888}.hide{display:none!important}main{padding:8px 18px 50px}.hero{text-align:center;padding:45px 8px 28px}.hero.compact{padding:25px 8px}.hero h1{font-size:38px;line-height:1;letter-spacing:-.05em}.hero em{color:#f6d34b;font-style:normal}.hero p{color:#92929c}.orb{width:82px;height:82px;margin:auto;border-radius:50%;display:grid;place-items:center;background:#f6d34b;color:#151515;font-size:30px;box-shadow:0 0 50px #f6d34b40}.orb.sm{width:54px;height:54px;font-size:22px}.card,.quick button,.onboard-card{background:#151519;border:1px solid #27272e;border-radius:18px}.card{padding:17px}label{display:block;color:#aaa;margin:12px 0;font-size:13px}input,select{display:block;width:100%;margin-top:7px;padding:12px;border-radius:11px;border:1px solid #303038;background:#0e0e11;color:white;outline:0}input:focus,select:focus{border-color:#f6d34b}.primary{background:#f6d34b;color:#151515;border:0;border-radius:11px;padding:12px 16px;font-weight:750}.muted,.hint{color:#888}.small{font-size:12px}.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick button{color:white;padding:16px;min-height:105px;text-align:left}.quick strong{display:block;margin-bottom:8px}.quick small{color:#888}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stats .card:first-child{grid-column:1/-1}.stats small,.account-grid small{display:block;color:#888;margin-bottom:7px}.stats strong,.card>strong{font-size:23px}.title,h2{display:flex;align-items:center;justify-content:space-between}.title{margin:15px 0}h2{font-size:18px;margin:25px 0 12px}.back,.link{border:0;background:none;color:#f6d34b}.listitem{display:flex;justify-content:space-between;align-items:center;background:#151519;border:1px solid #27272e;border-radius:15px;padding:14px;margin:8px 0}.meta{font-size:12px;color:#777;margin-top:4px}.income{color:#8ee5a2}.expense{color:#ff9292}.habit{width:100%;color:white;text-align:left}.done{border-color:#75651f}.check{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid #444}.done .check{background:#f6d34b;color:#111}.add{display:flex;gap:8px;margin-top:12px}.add input{margin:0}.chatlog{min-height:55vh;display:grid;align-content:end;gap:10px;padding-bottom:15px}.bubble{padding:12px 14px;border-radius:17px;max-width:82%}.bubble.ai{background:#18181d}.bubble.user{background:#f6d34b;color:#111;justify-self:end}#chatForm{display:flex;gap:8px;position:sticky;bottom:8px;background:#0b0b0d;padding-top:8px}#chatForm input{margin:0}.dialog{background:#151519;color:white;border:1px solid #303038;border-radius:20px;padding:20px;width:min(92vw,430px)}dialog::backdrop{background:#000b}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.actions button{border:0;background:#29292f;color:white;border-radius:10px;padding:10px 14px}.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.account-grid .card strong{font-size:20px}.onboard-head{padding:32px 4px 18px}.onboard-head h1{font-size:36px;letter-spacing:-.05em;margin:8px 0}.onboard-head p{color:#92929c;line-height:1.5}.step,.section-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;color:#f6d34b}.onboard-card{padding:18px;margin:12px 0}.onboard-card h2{display:block;margin:8px 0;font-size:20px}.hint{font-size:13px;line-height:1.5}.habit-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0}.choice{margin:0;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #303038;border-radius:12px;background:#0e0e11;color:#eee;cursor:pointer}.choice input{width:18px;height:18px;margin:0;accent-color:#f6d34b}.choice:has(input:checked){border-color:#75651f;background:#201d0f}.balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-note{font-size:12px;color:#777;margin-top:10px}.big{width:100%;margin:10px 0 8px;font-size:16px}.error{color:#ff9292;font-size:13px;min-height:20px;margin:8px 2px}
.habit-card{margin:8px 0}
.habit-card .listitem.habit{display:flex;align-items:center;gap:8px;margin:0}
.habit-toggle{display:flex;flex:1;min-width:0;justify-content:space-between;align-items:center;background:none;border:0;color:white;text-align:left;padding:0}
.ket-toggle{flex:none;background:#f6d34b;color:#151515;border:0;border-radius:9px;padding:6px 12px;font-size:11px;font-weight:750;white-space:nowrap}
.ket-toggle:active{transform:scale(.96)}
.ket-box{margin:6px 0 0;display:flex;flex-direction:column;gap:8px}
.ket-box textarea{width:100%;min-height:60px;padding:10px;border-radius:10px;border:1px solid #303038;background:#0e0e11;color:#fff;font-family:inherit;font-size:13px;line-height:1.4;resize:vertical}
.ket-box textarea:focus{border-color:#f6d34b;outline:0}
.ket-save{align-self:flex-end;font-size:12px;padding:8px 14px}
.side-menu-item.danger{color:#ff9292}
.side-menu-item.danger .menu-icon{color:#ff9292}
.danger-dialog{border-color:#5a2323}
.danger-dialog .hint b{color:#ff9292}
.danger-btn{background:#ff5252!important;color:#1a0a0a!important}
.danger-btn:disabled{background:#3a2323!important;color:#7a5555!important;cursor:not-allowed}
.dialog.gold-form{background:linear-gradient(165deg,#ffe98a,#f6d34b 55%,#e6bb28);border-color:#caa61f;color:#1c1608}
.dialog.gold-form h2{color:#171205}
.dialog.gold-form label{color:#5a4a0e}
.dialog.gold-form input,.dialog.gold-form select{background:#fffaea;color:#171205;border-color:#c9a520}
.dialog.gold-form input::placeholder{color:#9c8940}
.dialog.gold-form input:focus,.dialog.gold-form select:focus{border-color:#171205}
.dialog.gold-form .hint{color:#5a4a0e}
.dialog.gold-form .dialog-x{color:#171205}
.dialog.gold-form .actions button{background:#1c1608;color:#f6d34b}
.dialog.gold-form .actions button.primary{background:#171205;color:#ffe98a}
.dialog.gold-form .actions button.primary:hover{box-shadow:0 8px 20px #0006}button{cursor:pointer;transition:transform .14s ease,opacity .14s ease,background .18s ease,box-shadow .18s ease}button:active{transform:scale(.96);opacity:.86}.primary:hover{box-shadow:0 8px 24px #f6d34b2b}@media(max-width:520px){.quick{grid-template-columns:1fr}.hero h1{font-size:33px}.stats{grid-template-columns:1fr}.stats .card:first-child{grid-column:auto}.habit-options,.balance-grid,.account-grid{grid-template-columns:1fr}}
.auth-card{max-width:430px;margin:0 auto 30px;background:#151519;border:1px solid #27272e;border-radius:20px;padding:18px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#0e0e11;border-radius:12px;padding:4px;margin-bottom:12px}.auth-tab{border:0;background:transparent;color:#888;border-radius:9px;padding:10px;font-weight:750}.auth-tab.active{background:#29292f;color:#f6d34b}.auth-card label{margin:12px 0}.auth-card .big{margin-top:8px}

.habit-inputs{display:grid;gap:12px}.secondary.full{width:100%;margin:4px 0 16px;padding:13px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:transparent;color:inherit}.primary.big:disabled{opacity:.65;transform:none}
/* DICHATAT HOME V9 */
.home-top{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 2px 20px}.home-top h1{font-size:30px;letter-spacing:-.04em;margin:5px 0 3px}.home-top p{margin:0;color:#85858f;font-size:13px}.eyebrow{font-size:10px;font-weight:850;letter-spacing:.18em;color:#f6d34b}.icon-btn{width:40px;height:40px;border:1px solid #29292f;background:#151519;color:#aaa;border-radius:13px;font-size:18px}.balance-hero{background:linear-gradient(145deg,#19191e,#111115);border:1px solid #29292f;border-radius:24px;padding:21px;margin-bottom:12px;box-shadow:0 18px 45px #0004}.balance-head{display:flex;justify-content:space-between;color:#888;font-size:12px;margin-bottom:8px}.live-dot{font-size:10px;color:#8ee5a2}.balance-hero>strong{display:block;font-size:34px;letter-spacing:-.04em;margin-bottom:20px}.balance-split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #29292f;padding-top:14px;gap:15px}.balance-split div+div{border-left:1px solid #29292f;padding-left:15px}.balance-split span{display:block;color:#777;font-size:11px;margin-bottom:5px}.balance-split b{font-size:14px}.ai-entry{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:13px;border:1px solid #35302a;background:#17171b;border-radius:18px;color:#fff;margin:4px 0 24px}.ai-orb{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:13px;background:#f6d34b;color:#171717;font-size:18px;box-shadow:0 0 22px #f6d34b22}.ai-entry span:nth-child(2){min-width:0;flex:1}.ai-entry b,.ai-entry small{display:block}.ai-entry b{font-size:13px}.ai-entry small{font-size:11px;color:#777;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arrow{color:#f6d34b;font-size:20px}.section-row{display:flex;justify-content:space-between;align-items:center;margin:20px 2px 10px}.section-row h2{font-size:16px;margin:0}.text-btn{border:0;background:none;color:#f6d34b;font-size:12px;padding:5px}.today-card{background:#151519;border:1px solid #27272e;border-radius:20px;padding:16px}.today-progress{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.today-progress b{font-size:18px}.today-progress span{font-size:12px;color:#777}.progress-ring{width:38px;height:38px;border:1px solid #3a382c;border-radius:50%;display:grid;place-items:center}.progress-ring span{color:#f6d34b;font-size:9px;font-weight:800}.home-habits{display:grid;gap:7px}.home-habit{width:100%;display:flex;align-items:center;gap:10px;border:1px solid #25252b;background:#0f0f12;color:#eee;border-radius:13px;padding:11px;text-align:left}.home-habit.done{border-color:#5b5125;background:#1a190f}.home-check{width:23px;height:23px;border-radius:8px;border:1px solid #414149;display:grid;place-items:center;flex:none;font-size:12px}.done .home-check{background:#f6d34b;color:#111;border-color:#f6d34b}.habit-status{margin-left:auto;color:#666;font-size:10px}.done .habit-status{color:#c8ad3e}.mini-finance{display:flex;align-items:center;justify-content:space-between;background:#151519;border:1px solid #27272e;border-radius:18px;padding:15px 16px}.mini-finance span{display:block;color:#777;font-size:11px;margin-bottom:5px}.mini-finance b{font-size:18px}.round-add{width:38px;height:38px;border:1px solid #3d3925;background:#211f15;color:#f6d34b;border-radius:12px;font-size:22px}.recent-list{display:grid;gap:7px}.recent-item{display:flex;align-items:center;gap:10px;background:#151519;border:1px solid #27272e;border-radius:15px;padding:12px}.tx-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#202026;font-weight:800}.tx-icon.income{color:#8ee5a2}.tx-icon.expense{color:#ff9292}.recent-main{min-width:0;flex:1}.recent-main b,.recent-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recent-main b{font-size:13px}.recent-main small{font-size:10px;color:#777;margin-top:3px}.recent-item>strong{font-size:12px}.home-nav{position:sticky;bottom:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:28px -2px 0;padding:6px;background:#121216ee;border:1px solid #2a2a30;border-radius:18px;backdrop-filter:blur(12px);z-index:4}.home-nav button{border:0;background:transparent;color:#777;border-radius:13px;padding:9px 4px;font-size:10px}.home-nav button span{display:block;font-size:15px;margin-bottom:3px}.home-nav button.active,.home-nav button:hover{color:#f6d34b;background:#1d1c16}.empty-inline{color:#666;font-size:12px;padding:10px 2px}
@media(min-width:521px){.home-habits{grid-template-columns:1fr 1fr}.home-nav{max-width:520px;margin-left:auto;margin-right:auto}}

/* DICHATAT HOME V10 - compact + AI orb + collapsible cards */
.collapse-head{width:100%;border:0;background:none;color:inherit;padding:0;display:flex;align-items:center;justify-content:space-between;text-align:left}.collapse-head small{display:block;color:#888;font-size:11px;font-weight:500}.balance-hero .collapse-head>span:first-child strong{display:block;font-size:34px;letter-spacing:-.04em;margin-top:3px}.chev{width:28px;height:28px;border-radius:9px;background:#222228;color:#aaa;display:grid;place-items:center;transition:transform .2s}.collapse-head.collapsed .chev{transform:rotate(-90deg)}.collapse-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .25s ease,opacity .2s ease;opacity:0}.collapse-body>*{min-height:0}.collapse-body.open{grid-template-rows:1fr;opacity:1}.balance-hero .collapse-body.open{padding-top:16px}.ai-orb-entry{width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:11px 13px;border:1px solid #3b3421;background:#17171b;border-radius:22px;color:#fff;margin:4px 0 18px;box-shadow:0 10px 30px #0004}.ai-orb-xl{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:50%;background:#f6d34b;color:#171717;font-size:25px;box-shadow:0 0 28px #f6d34b35}.ai-orb-entry>span:nth-child(2){flex:1;min-width:0}.ai-orb-entry b,.ai-orb-entry small{display:block}.ai-orb-entry b{font-size:14px}.ai-orb-entry small{color:#777;font-size:11px;margin-top:3px}.compact-row{margin:14px 2px 7px}.compact-card{margin-bottom:0}.today-card{padding:13px}.today-card .collapse-head{padding:2px}.today-card .collapse-body.open{padding-top:10px}.today-progress{margin:0}.home-habits{gap:6px}.home-habit{padding:9px}.mini-finance{padding:12px 14px}.recent-list{gap:5px}.recent-item{padding:9px 11px}.home-nav{margin-top:18px}.home-nav button{padding:8px 4px}.home-nav button:last-child{display:none}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#24242a;color:#fff;border:1px solid #3a3a42;border-radius:13px;padding:11px 15px;font-size:12px;z-index:50;transition:.2s ease;box-shadow:0 10px 30px #0008}#toast.show{opacity:1;transform:translate(-50%,0)}

/* v11 home refinement */
.ai-center{width:100%;border:0;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 8px 22px;margin:0;text-align:center}.ai-center .ai-orb-xl{width:82px;height:82px;border-radius:50%;font-size:31px;box-shadow:0 0 48px #f6d34b38;margin-bottom:12px}.ai-center b{font-size:15px;letter-spacing:-.01em}.ai-center small{color:#777;font-size:11px;margin-top:3px}.home-nav button:last-child{display:block}.home-nav .nav-icon{width:30px;height:24px;margin:0 auto 3px;display:grid;place-items:center;font-size:15px;font-weight:750}.home-nav button{min-width:0}.home-nav button.active,.home-nav button:hover{color:#f6d34b;background:#1d1c16}.balance-hero{padding:17px 18px}.balance-hero .collapse-body.open{padding-top:14px}.today-card{padding:12px 14px}.compact-row{margin-top:12px}.ai-center + .section-row{margin-top:0}

/* DICHATAT HOME V12 */
header{align-items:center;min-height:62px}
.brand b{font-size:22px}
.brand-mark{width:26px;height:26px;display:block;object-fit:contain}
.user-area{display:flex;align-items:center;gap:9px;min-width:0}
.user-area small{max-width:185px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8d8d96;font-size:11px}
.user-area #logout{border:0;background:transparent;color:#f6d34b;font-size:12px;font-weight:750;padding:5px 0}
.ai-center{padding-top:2px;padding-bottom:0}
.home-top{padding-bottom:12px}
@media(max-width:520px){.user-area small{max-width:145px}.user-area{gap:7px}.user-area #logout{font-size:11px}}
/* DICHATAT AI v13 */
#chat .title h2{margin:0}
#chatLog{scroll-behavior:smooth}
#chatForm input:disabled{opacity:.6}

.chatlog .bubble.ai{white-space:pre-line}
.chatlog .bubble.user{white-space:pre-line}

/* v15 home: compact two-column focus area */
.home-focus-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px;margin:0 0 10px;align-items:stretch}
.compact-balance,.compact-today{margin:0;min-width:0}
.compact-balance{padding:14px 15px;border-radius:20px;display:flex;flex-direction:column;justify-content:center}
.focus-label{font-size:11px;color:#85858f;margin-bottom:4px}
.compact-total{font-size:25px!important;line-height:1.05;letter-spacing:-.045em!important;margin:0 0 12px!important}
.compact-split{gap:0!important;padding-top:10px!important}
.compact-split div+div{padding-left:10px!important}
.compact-split span{font-size:10px!important;white-space:nowrap}
.compact-split b{font-size:12px!important;display:block;margin-top:2px}
.mini-icon{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:6px;background:#211f15;color:#f6d34b;border:1px solid #3d3925;font-style:normal;font-size:8px;font-weight:800;vertical-align:middle}
.compact-today{padding:13px 14px;border-radius:20px;display:flex;flex-direction:column}
.today-headline{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}
.today-headline b{font-size:18px}
.today-headline small{font-size:10px;color:#777}
.today-headline .progress-ring{width:32px;height:32px;flex:none}
.today-headline .progress-ring span{font-size:8px}
.compact-today .home-habits{gap:5px;max-height:128px;overflow:auto;padding-right:1px}
.compact-today .home-habit{padding:7px 8px;border-radius:11px;min-height:34px}
.compact-today .home-check{width:20px;height:20px;border-radius:7px;font-size:10px}
.compact-today .habit-status{font-size:9px}
.compact-today .empty-inline{padding:5px 0;font-size:10px}
@media(max-width:520px){.home-focus-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:8px}.compact-balance{padding:12px}.compact-today{padding:11px}.compact-total{font-size:22px!important}.compact-split span{font-size:9px!important}.compact-split b{font-size:11px!important}.compact-today .home-habits{max-height:120px}}
/* DICHATAT AI v16 - warmer, interactive chat */
.chat-status{color:#777;font-size:10px;font-weight:500;display:block;margin-top:-8px}.chat-status::first-letter{color:#8ee5a2}.chatlog{min-height:55vh;align-content:start;padding-top:10px}.bubble{position:relative;padding-bottom:22px}.bubble-time{position:absolute;right:12px;bottom:6px;color:#777;font-size:9px}.chat-suggestions{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 8px}.chat-suggestions button{border:1px solid #34343b;background:#151519;color:#d8d8dc;border-radius:999px;padding:8px 11px;font-size:11px}.chat-suggestions button:hover{border-color:#f6d34b;color:#f6d34b}.typing{display:flex;gap:5px;align-items:center;width:max-content;padding:14px 16px}.typing span{width:5px;height:5px;background:#8b8b93;border-radius:50%;animation:chatdot 1s infinite ease-in-out}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes chatdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* DICHATAT V17 - one-question-at-a-time onboarding */
.onboard-progress{height:4px;background:#1b1b20;border-radius:99px;overflow:hidden;margin:0 0 16px}.onboard-progress span{display:block;height:100%;width:33.333%;background:#f6d34b;border-radius:99px;transition:width .25s ease}.onboard-step{animation:onboardIn .2s ease}@keyframes onboardIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.onboard-actions{display:flex;gap:8px;margin-top:10px}.onboard-actions button{flex:1}.secret-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.secret-row button{min-width:78px}.help-link{display:block;color:#f6d34b;text-decoration:none;font-size:11px;margin-top:10px}.help-link:hover{text-decoration:underline}

/* DICHATAT V20 - hamburger menu, orb logo, glow animation */
.brand{display:flex;align-items:center;gap:11px}
.hamburger-btn{width:38px;height:38px;border:1px solid #29292f;background:#151519;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.hamburger-btn span{display:block;width:16px;height:2px;background:#f6d34b;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.hamburger-btn.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger-btn.open span:nth-child(2){opacity:0}
.hamburger-btn.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-overlay{position:fixed;inset:0;background:#000000b3;z-index:20;opacity:0;transition:opacity .22s ease}
.menu-overlay.hide{display:none}
.side-menu{position:fixed;top:0;left:0;bottom:0;width:min(78vw,300px);background:#131317;border-right:1px solid #27272e;z-index:21;padding:16px 12px;display:flex;flex-direction:column;gap:6px;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 60px #0008}
.side-menu.hide{display:flex!important;transform:translateX(-100%)}
.side-menu.open{transform:translateX(0)}
.side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 14px;border-bottom:1px solid #24242a;margin-bottom:6px}
.side-menu-head b{font-size:18px}
.chev-close{border:0;background:#1d1d22;color:#aaa;width:30px;height:30px;border-radius:10px}
.side-menu-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;color:#e8e8ec;padding:13px 10px;border-radius:12px;font-size:14px}
.side-menu-item span:first-child{font-size:16px}
.side-menu-item:hover,.side-menu-item:active{background:#1d1d22;color:#f6d34b}
.dialog-x{border:0;background:#1d1d22;color:#aaa;width:28px;height:28px;border-radius:9px;font-size:13px}
#aboutDialog h2,#creatorDialog h2,#balanceDialog h2,#geminiDialog h2,#nameDialog h2,#exchangeDialog h2{margin-top:0}
.orb-with-logo{position:relative;overflow:visible!important}
.orb-logo-img{width:52%;height:52%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 1px 1px #0002)}
.orb-glow-ring{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,#fff9df 0%,#f6d34b 38%,transparent 72%);opacity:0;transform:scale(.3);pointer-events:none;z-index:1}
.orb-glow-ring.play{animation:orbGlowOpen 1.15s cubic-bezier(.16,.8,.3,1) both}
@keyframes orbGlowOpen{
  0%{opacity:0;transform:scale(.25)}
  25%{opacity:.95;transform:scale(1.05)}
  55%{opacity:.55;transform:scale(1.35)}
  100%{opacity:0;transform:scale(1.9)}
}
.ai-center.flash .ai-orb-xl{animation:orbPulseIn 1.15s cubic-bezier(.16,.8,.3,1) both}
@keyframes orbPulseIn{
  0%{box-shadow:0 0 0 #f6d34b00;transform:scale(.92)}
  30%{box-shadow:0 0 46px #f6d34b90,0 0 110px #f6d34b55;transform:scale(1.04)}
  100%{box-shadow:0 0 28px #f6d34b55,0 0 72px #f6d34b30,0 0 120px #f6d34b18;transform:scale(1)}
}
@media(max-width:520px){.side-menu{width:min(82vw,280px)}}

/* DICHATAT V19 - focused home */
.home-top-minimal{height:4px;padding:0;margin:0}
.ai-home-stage{
  min-height:40vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4px 8px 24px;
}
.home-wordmark{
  margin:16px 0 5px;
  font-size:42px;
  line-height:1;
}
.home-wordmark .wordmark-accent{
  color:inherit;
}
.home-tagline{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:600;
  font-size:11px;
  color:#f6d34b;
}
.ai-home-stage .ai-center{
  width:auto;
  padding:0;
  margin:0;
}
.ai-home-stage .ai-orb-xl{
  width:104px;
  height:104px;
  margin:0;
  font-size:36px;
  background:#f6d34b;
  box-shadow:
    0 0 28px #f6d34b55,
    0 0 72px #f6d34b30,
    0 0 120px #f6d34b18;
}
.home-bottom-cards{
  margin:0 0 10px;
}
.home-bottom-cards .compact-balance,
.home-bottom-cards .compact-today{
  min-height:112px;
}
.home-bottom-cards .compact-balance{
  justify-content:center;
}
.home-bottom-cards .compact-today{
  justify-content:center;
}
.today-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.today-summary .focus-label{margin-bottom:5px}
.today-summary #progress{
  display:block;
  font-size:25px;
  line-height:1;
  letter-spacing:-.04em;
}
.today-percent{
  --pct:0;
  width:54px;
  height:54px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  position:relative;
  background:conic-gradient(#f6d34b calc(var(--pct) * 1%), #3a382c 0);
  padding:2px;
}
.today-percent::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:#151519;
}
.today-percent span{
  position:relative;
  z-index:1;
  color:#f6d34b;
  font-size:10px;
  font-weight:850;
}
.home-bottom-cards .balance-split{
  margin-top:2px;
}
.home-nav{
  margin-top:8px;
}
@media(max-width:520px){
  .ai-home-stage{
    min-height:37vh;
    padding-top:12px;
  }
  .home-wordmark{font-size:36px}
  .home-tagline{font-size:10.5px}
  .ai-home-stage .ai-orb-xl{
    width:96px;
    height:96px;
  }
  .home-bottom-cards{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:8px;
  }
  .home-bottom-cards .compact-balance,
  .home-bottom-cards .compact-today{
    min-height:104px;
  }
}

/* v21: menu detail dialogs */
.about-copy p{margin:0 0 12px;line-height:1.65;color:#c7c5cc}
.about-copy ul{margin:8px 0 14px;padding-left:20px;color:#c7c5cc}
.about-copy li{margin:8px 0;line-height:1.55}
.creator-card{display:flex;gap:14px;align-items:flex-start;margin-top:6px;padding:16px;border:1px solid #2b2a31;border-radius:18px;background:#151419}
.creator-mark{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:#f6d34b;color:#111;font-weight:900;font-size:21px}
.creator-card h3{margin:3px 0 5px;font-size:22px}
.creator-card .hint{margin:0;line-height:1.55}


/* DICHATAT V22 - floating global navigation + softer home orb */
main{padding-bottom:96px}
.global-nav{position:fixed;left:50%;right:auto;bottom:10px;transform:translateX(-50%);width:min(520px,calc(100vw - 28px));max-width:520px;margin:0;z-index:40;box-shadow:0 14px 42px #0009;box-sizing:border-box}
.global-nav.hide{display:none!important}
#home{min-height:calc(100dvh - 86px);display:flex;flex-direction:column}
#home .ai-home-stage{flex:1;min-height:0;padding-top:8px;padding-bottom:18px}
#home .home-bottom-cards{flex:none;margin-top:auto;margin-bottom:4px}
.home-nav button{min-height:48px}
@keyframes orbGlowOpen{
  0%{opacity:0;transform:scale(.45)}
  18%{opacity:.42;transform:scale(.82)}
  48%{opacity:.28;transform:scale(1.12)}
  78%{opacity:.13;transform:scale(1.38)}
  100%{opacity:0;transform:scale(1.65)}
}
.orb-glow-ring.play{animation:orbGlowOpen 3.4s cubic-bezier(.2,.55,.35,1) both}
.ai-center.flash .ai-orb-xl{animation:orbPulseIn 3.2s cubic-bezier(.2,.55,.35,1) both}
@keyframes orbPulseIn{
  0%{box-shadow:0 0 20px #f6d34b35,0 0 55px #f6d34b12;transform:scale(.98)}
  28%{box-shadow:0 0 34px #f6d34b55,0 0 82px #f6d34b24;transform:scale(1.015)}
  62%{box-shadow:0 0 30px #f6d34b48,0 0 76px #f6d34b20;transform:scale(1.008)}
  100%{box-shadow:0 0 28px #f6d34b42,0 0 70px #f6d34b1c,0 0 112px #f6d34b0d;transform:scale(1)}
}
@media(max-width:520px){
  main{padding-left:14px;padding-right:14px;padding-bottom:94px}
  #home{min-height:calc(100dvh - 78px)}
  #home .ai-home-stage{padding-top:4px;padding-bottom:14px}
  .global-nav{width:calc(100% - 20px);bottom:8px}
  .home-nav button{min-height:46px;padding-top:7px;padding-bottom:7px}
}

/* DICHATAT V23 - home fits one screen + sunrise glow */
@media(min-width:521px){
  #home{height:calc(100dvh - 72px - 96px);min-height:0;overflow:hidden}
}
@media(max-width:520px){
  #home{height:calc(100dvh - 72px - 94px);min-height:0;overflow:hidden}
}
#home .ai-home-stage{
  flex:1 1 auto;
  min-height:0;
  justify-content:center;
  padding-top:0;
  padding-bottom:10px;
}
#home .home-bottom-cards{
  flex:0 0 auto;
  margin-top:0;
  margin-bottom:8px;
}

/* Glow muncul perlahan dari nol, melebar seperti cahaya matahari terbit, lalu menetap lembut. */
.ai-home-stage .ai-orb-xl{
  box-shadow:0 0 0 rgba(246,211,75,0);
}
.orb-glow-ring{
  inset:-30px;
  background:radial-gradient(circle,
    rgba(255,250,220,.92) 0%,
    rgba(246,211,75,.58) 30%,
    rgba(246,211,75,.25) 52%,
    rgba(246,211,75,0) 74%);
  opacity:0;
  transform:scale(.28);
}
.orb-glow-ring.play{
  animation:orbSunriseGlow 5.2s cubic-bezier(.18,.62,.28,1) both;
}
.ai-center.flash .ai-orb-xl{
  animation:orbSunriseOrb 5s cubic-bezier(.18,.62,.28,1) both;
}
@keyframes orbSunriseGlow{
  0%{opacity:0;transform:scale(.28)}
  20%{opacity:.07;transform:scale(.48)}
  42%{opacity:.17;transform:scale(.72)}
  66%{opacity:.27;transform:scale(.96)}
  84%{opacity:.23;transform:scale(1.06)}
  100%{opacity:.20;transform:scale(1.1)}
}
@keyframes orbSunriseOrb{
  0%{transform:scale(.96);box-shadow:0 0 0 rgba(246,211,75,0),0 0 0 rgba(246,211,75,0)}
  28%{transform:scale(.982);box-shadow:0 0 18px rgba(246,211,75,.16),0 0 44px rgba(246,211,75,.06)}
  58%{transform:scale(1.008);box-shadow:0 0 28px rgba(246,211,75,.30),0 0 70px rgba(246,211,75,.12)}
  82%{transform:scale(1.002);box-shadow:0 0 32px rgba(246,211,75,.38),0 0 82px rgba(246,211,75,.15),0 0 118px rgba(246,211,75,.06)}
  100%{transform:scale(1);box-shadow:0 0 30px rgba(246,211,75,.34),0 0 78px rgba(246,211,75,.13),0 0 116px rgba(246,211,75,.05)}
}
@media(prefers-reduced-motion:reduce){
  .orb-glow-ring.play,.ai-center.flash .ai-orb-xl{animation:none}
  .orb-glow-ring{opacity:.20;transform:scale(1.1)}
  .ai-home-stage .ai-orb-xl{box-shadow:0 0 30px rgba(246,211,75,.34),0 0 78px rgba(246,211,75,.13)}
}

/* Tap feedback on the home orb button, separate from the slower arrival glow */
.ai-center.tap .ai-orb-xl{
  animation:orbTapBounce .38s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes orbTapBounce{
  0%{transform:scale(1)}
  35%{transform:scale(.88)}
  70%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.orb-glow-ring.tap-ring{
  animation:orbTapRing .6s ease-out both;
}
@keyframes orbTapRing{
  0%{opacity:0;transform:scale(.75)}
  40%{opacity:.35;transform:scale(1)}
  100%{opacity:0;transform:scale(1.15)}
}
@media(prefers-reduced-motion:reduce){
  .ai-center.tap .ai-orb-xl,.orb-glow-ring.tap-ring{animation:none}
}


/* DICHATAT V24 - mobile-safe menu/dialog surfaces + themed icons only */
dialog {
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  max-width: calc(100vw - 20px);
  max-height: calc(100dvh - 20px);
  overflow: visible;
}
dialog::backdrop { background: rgba(0,0,0,.72); }
dialog .dialog {
  width: min(430px, calc(100vw - 20px));
  max-width: 100%;
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.side-menu {
  width: min(82vw, 320px);
  max-width: calc(100vw - 18px);
}
.side-menu-item .menu-icon {
  width: 22px; height: 22px; flex: 0 0 22px;
  display: inline-grid; place-items: center;
  border: 1px solid #3d3925;
  background: #211f15; color: #f6d34b;
  border-radius: 7px;
  font-style: normal; font-size: 10px; font-weight: 800;
}
.info-icon { font-family: Georgia, serif; font-size: 14px !important; }
.user-icon { position: relative; font-size: 0 !important; }
.user-icon::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f6d34b; position: absolute; top: 4px; }
.user-icon::after { content: ''; width: 12px; height: 6px; border-radius: 8px 8px 5px 5px; background: #f6d34b; position: absolute; bottom: 3px; }
.key-icon { font-size: 9px !important; transform: rotate(45deg); }
.field-icon, .note-icon {
  display: inline-grid; place-items: center;
  width: 19px; height: 19px;
  margin-right: 5px;
  border-radius: 6px;
  border: 1px solid #3d3925;
  background: #211f15; color: #f6d34b;
  font-style: normal; font-size: 8px; font-weight: 800;
  vertical-align: -4px;
}
.note-icon { width: 16px; height: 16px; margin-right: 2px; font-size: 7px; vertical-align: -3px; }
@media(max-width:520px){
  dialog { max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  dialog .dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 20px); padding: 18px; border-radius: 18px; }
  .side-menu { width: min(84vw, 310px); }
}

/* DICHATAT V25 - solid dark menu/dialogs, soft yellow flat icons, cleaner chat typography */
dialog{
  background:#0b0b0d;
  color:#f7f7f7;
  border:1px solid #27272e;
  border-radius:22px;
  padding:0;
  overflow:hidden;
  max-width:min(92vw,520px);
  max-height:calc(100dvh - 28px);
}
dialog::backdrop{
  background:rgba(0,0,0,.68);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
dialog .dialog{
  width:min(92vw,520px);
  max-height:calc(100dvh - 28px);
  overflow:auto;
  background:#0b0b0d;
  border:0;
  border-radius:0;
  padding:22px;
}
dialog .dialog h2{
  gap:12px;
  align-items:center;
  margin:0 0 18px;
  line-height:1.2;
  font-size:20px;
}
dialog .dialog h2 .dialog-x{margin-left:auto;flex:none}
dialog .dialog .hint,
dialog .dialog .about-copy,
dialog .dialog .creator-card,
dialog .dialog label{line-height:1.6}
.dialog-x{background:#17171b;color:#f6d34b;border:1px solid #2a292f}
.menu-overlay{
  background:rgba(0,0,0,.58);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}
.side-menu{
  background:#0b0b0d;
  border-right:1px solid #27272e;
  box-shadow:18px 0 50px rgba(0,0,0,.55);
}
.side-menu-head{border-bottom-color:#222228}
.side-menu-item{color:#e9e9ed;min-height:50px}
.side-menu-item:hover,.side-menu-item:active{background:#151519;color:#f6d34b}
.menu-icon{
  width:28px;height:28px;flex:none;
  display:grid;place-items:center;
  color:#f6d34b;
}
.menu-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu-icon svg .fill{fill:currentColor;stroke:none}

/* Cleaner menu content cards */
.about-copy p{margin:0 0 14px;line-height:1.68;color:#c8c7ce}
.about-copy ul{margin:10px 0 16px;padding-left:20px}
.about-copy li{margin:9px 0;line-height:1.6}
.creator-card{background:#111114;border-color:#29292f}

/* Chat page: calmer hierarchy and cleaner text flow */
#chat .title{
  margin:12px 0 8px;
  padding:4px 0 12px;
  border-bottom:1px solid #202026;
}
#chat .title h2{font-size:21px;line-height:1.2;margin:0;display:block}
#chat .chat-status{margin-top:5px;font-size:10px;line-height:1.3}
#chatLog{
  min-height:calc(100dvh - 250px);
  max-height:none;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  padding:10px 0 18px;
}
#chatLog .bubble{
  max-width:min(86%,520px);
  padding:12px 14px 22px;
  border-radius:16px;
  font-size:13px;
  line-height:1.58;
  letter-spacing:0;
}
#chatLog .bubble.ai{align-self:flex-start;background:#151519;border:1px solid #25252b;color:#e8e8eb}
#chatLog .bubble.user{align-self:flex-end;background:#f6d34b;color:#151515;border:1px solid #f6d34b}
#chatLog .bubble-time{font-size:9px;line-height:1;bottom:6px;right:11px;opacity:.72}
.chat-suggestions{gap:7px;padding:0 0 10px}
.chat-suggestions button{
  padding:8px 11px;
  line-height:1.25;
  background:#111114;
  border-color:#2b2b31;
  color:#c9c9ce;
}
#chatForm{
  gap:8px;
  padding:8px 0 10px;
  background:#0b0b0d;
  border-top:1px solid #202026;
}
#chatForm input,#chatForm textarea{font-size:13px;line-height:1.45;padding:12px 13px}
#chatForm .primary{min-width:68px}
#chat .title-left{display:flex;align-items:center;gap:10px;min-width:0}
.chat-home-fab{
  position:static;
  flex:none;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid #2a2a30;
  background:#151519;
  color:#f6d34b;
  display:grid;
  place-items:center;
  font-size:17px;
  font-weight:750;
}
.chat-home-fab:active{transform:scale(.92)}
@media(max-width:520px){
  .chat-home-fab{width:34px;height:34px;font-size:16px}
}
@media(max-width:520px){
  dialog{max-width:calc(100vw - 10px);max-height:calc(100dvh - 10px);border-radius:18px}
  dialog .dialog{width:calc(100vw - 10px);max-height:calc(100dvh - 10px);padding:18px}
  .side-menu{width:min(84vw,310px)}
  #chat .title{margin-top:8px}
  #chatLog{min-height:calc(100dvh - 235px);gap:10px}
  #chatLog .bubble{max-width:89%;font-size:13px;line-height:1.55}
}

/* DICHATAT V29 - Catatan & Progress module */
#catatan{padding-bottom:18px}
.catatan-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:#121216;border:1px solid #28282e;border-radius:14px;margin:8px 0 16px}
.catatan-tab,.period-tab{border:0;background:transparent;color:#85858d;border-radius:10px;padding:10px 12px;font-size:12px;font-weight:750}
.catatan-tab.active,.period-tab.active{background:#f6d34b;color:#151515}
.note-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.period-tabs{display:flex;gap:4px;background:#121216;border:1px solid #29292f;border-radius:12px;padding:3px}.period-tab{padding:7px 10px;font-size:10px}.note-period-label{color:#777;font-size:11px;text-align:right}.excel-export-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(246,211,75,.28);background:rgba(246,211,75,.10);color:#f6d34b;border-radius:12px;padding:8px 10px;font-size:10px;font-weight:800;white-space:nowrap}.excel-export-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.excel-export-btn:hover{background:rgba(246,211,75,.16);box-shadow:0 7px 18px rgba(246,211,75,.10)}.export-period-label{margin:-3px 2px 10px}
.note-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.note-stat{min-height:86px;padding:13px}.note-stat:last-child{grid-column:1/-1}.note-stat small{display:block;color:#777;font-size:10px;margin-bottom:7px}.note-stat strong{display:block;font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.note-section-card{padding:14px;margin:10px 0}.note-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-bottom:12px}.note-card-head h3{margin:0;font-size:13px}.note-card-head small{color:#777;font-size:9px;text-align:right}.category-row{margin:10px 0}.category-main{display:flex;justify-content:space-between;gap:8px;font-size:12px}.category-main span{color:#e4e4e8}.category-main b{font-size:12px}.category-main b i{font-style:normal;font-weight:800;color:#f6d34b;margin-left:8px}.category-track{height:9px;background:#25252b;border-radius:99px;overflow:hidden;margin:6px 0 4px}.category-track span{display:block;height:100%;background:#f6d34b;border-radius:99px}.category-row>small{color:#777;font-size:9px}
.simple-note-list{display:grid;gap:7px}
.simple-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0f0f12;border:1px solid #25252b;border-radius:13px;padding:11px 12px}
.simple-row b{display:block;font-size:12px}
.simple-row small{display:block;color:#777;font-size:10px;margin-top:3px}
.simple-row strong{font-size:12px;flex:none}
.debt-item{display:flex;align-items:center;gap:11px;background:#151519;border:1px solid #27272e;border-radius:15px;padding:12px;margin:8px 0}
.debt-avatar{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:11px;background:#202026;font-weight:800;font-size:13px;color:#f6d34b}
.debt-main{min-width:0;flex:1}
.debt-main b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.debt-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.03em;padding:3px 8px;border-radius:99px;margin-top:5px}
.debt-badge.payable{background:#3a1414;color:#ff9292}
.debt-badge.receivable{background:#123321;color:#8ee5a2}
.debt-amount{text-align:right;flex:none}
.debt-amount b{display:block;font-size:13px}
.debt-amount.payable b{color:#ff9292}
.debt-amount.receivable b{color:#8ee5a2}
.debt-amount small{display:block;color:#777;font-size:9px;margin-top:2px}
.pay-btn{flex:none;border:1px solid #3d3925;background:#211f15;color:#f6d34b;border-radius:10px;padding:9px 13px;font-size:11px;font-weight:750;margin-left:2px}
.pay-btn:hover{background:#2a2718}
@media(max-width:520px){.debt-item{padding:10px}.debt-amount small{display:none}.pay-btn{padding:8px 10px}}

.habit-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.cal-head{font-size:9px;color:#666;text-align:center;padding:2px}.cal-empty{min-height:34px}.cal-day{min-height:34px;border:1px solid #28282e;background:#111114;color:#aaa;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px}.cal-day.has-log{border-color:#5b5127;color:#f6d34b;background:#1a1913}.cal-day span{font-size:10px}.cal-day small{font-size:8px;color:#b7a85a}.calendar-detail{margin-top:10px;padding:10px 11px;border:1px solid #25252b;background:#111114;border-radius:10px;color:#888;font-size:10px;line-height:1.5}
@media(max-width:520px){#catatan .title{margin-top:8px}.note-stat-grid{grid-template-columns:1fr 1fr}.note-stat strong{font-size:15px}}

/* V29 orb only: soft permanent glow + slow sunrise on first app entry */
.ai-home-stage .ai-orb-xl{position:relative;box-shadow:0 0 24px rgba(246,211,75,.20),0 0 62px rgba(246,211,75,.08),0 0 100px rgba(246,211,75,.035)}
.orb-glow-ring{inset:-34px;background:radial-gradient(circle,rgba(255,250,220,.55) 0%,rgba(246,211,75,.28) 28%,rgba(246,211,75,.12) 50%,rgba(246,211,75,0) 72%)}
.orb-glow-ring.play{animation:orbSunriseV29 6.8s cubic-bezier(.2,.58,.28,1) both}
.ai-center.flash .ai-orb-xl{animation:orbSunriseOrbV29 6.6s cubic-bezier(.2,.58,.28,1) both}
@keyframes orbSunriseV29{0%{opacity:0;transform:scale(.18)}18%{opacity:.035;transform:scale(.38)}40%{opacity:.08;transform:scale(.68)}62%{opacity:.14;transform:scale(.92)}80%{opacity:.18;transform:scale(1.04)}100%{opacity:.16;transform:scale(1.1)}}
@keyframes orbSunriseOrbV29{0%{transform:scale(.985);box-shadow:0 0 0 rgba(246,211,75,0),0 0 0 rgba(246,211,75,0)}24%{transform:scale(.992);box-shadow:0 0 10px rgba(246,211,75,.08),0 0 30px rgba(246,211,75,.025)}48%{transform:scale(1.004);box-shadow:0 0 20px rgba(246,211,75,.16),0 0 48px rgba(246,211,75,.05)}72%{transform:scale(1.006);box-shadow:0 0 27px rgba(246,211,75,.23),0 0 68px rgba(246,211,75,.075),0 0 100px rgba(246,211,75,.025)}100%{transform:scale(1);box-shadow:0 0 24px rgba(246,211,75,.20),0 0 62px rgba(246,211,75,.08),0 0 100px rgba(246,211,75,.035)}}
.home-nav{grid-template-columns:repeat(5,1fr)}
.nav-svg svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.orb-glow-ring.play,.ai-center.flash .ai-orb-xl{animation:none}.orb-glow-ring{opacity:.16;transform:scale(1.1)}}

/* DICHATAT V30 - orb glow wider + smoother sunrise */
.ai-home-stage .ai-orb-xl{
  box-shadow:
    0 0 28px rgba(246,211,75,.26),
    0 0 78px rgba(246,211,75,.12),
    0 0 135px rgba(246,211,75,.055);
}
.orb-glow-ring{
  inset:-58px;
  background:
    radial-gradient(circle,
      rgba(255,252,232,.52) 0%,
      rgba(246,211,75,.30) 22%,
      rgba(246,211,75,.16) 43%,
      rgba(246,211,75,.075) 58%,
      rgba(246,211,75,0) 74%);
  filter:blur(3px);
  transform:scale(.22);
  opacity:0;
}
.orb-glow-ring.play{
  animation:orbSunriseV30 9s cubic-bezier(.16,.72,.24,1) both;
}
.ai-center.flash .ai-orb-xl{
  animation:orbSunriseOrbV30 8.6s cubic-bezier(.16,.72,.24,1) both;
}
@keyframes orbSunriseV30{
  0%{opacity:0;transform:scale(.22);filter:blur(5px)}
  14%{opacity:.012;transform:scale(.38);filter:blur(5px)}
  30%{opacity:.035;transform:scale(.62);filter:blur(4px)}
  48%{opacity:.07;transform:scale(.88);filter:blur(3.5px)}
  66%{opacity:.105;transform:scale(1.10);filter:blur(3px)}
  82%{opacity:.135;transform:scale(1.28);filter:blur(2.5px)}
  100%{opacity:.18;transform:scale(1.42);filter:blur(2px)}
}
@keyframes orbSunriseOrbV30{
  0%{transform:scale(.988);box-shadow:0 0 0 rgba(246,211,75,0),0 0 0 rgba(246,211,75,0),0 0 0 rgba(246,211,75,0)}
  22%{transform:scale(.992);box-shadow:0 0 10px rgba(246,211,75,.06),0 0 30px rgba(246,211,75,.02),0 0 55px rgba(246,211,75,.01)}
  45%{transform:scale(1);box-shadow:0 0 19px rgba(246,211,75,.13),0 0 52px rgba(246,211,75,.05),0 0 90px rgba(246,211,75,.02)}
  68%{transform:scale(1.003);box-shadow:0 0 28px rgba(246,211,75,.20),0 0 78px rgba(246,211,75,.085),0 0 130px rgba(246,211,75,.035)}
  84%{transform:scale(1.004);box-shadow:0 0 31px rgba(246,211,75,.23),0 0 92px rgba(246,211,75,.10),0 0 150px rgba(246,211,75,.042)}
  100%{transform:scale(1);box-shadow:0 0 28px rgba(246,211,75,.26),0 0 78px rgba(246,211,75,.12),0 0 135px rgba(246,211,75,.055)}
}
@media(prefers-reduced-motion:reduce){
  .orb-glow-ring.play,.ai-center.flash .ai-orb-xl{animation:none}
  .orb-glow-ring{opacity:.18;transform:scale(1.42);filter:blur(2px)}
}

/* DICHATAT V32 - Chat composer stays fixed while conversation scrolls */
#chat{padding-bottom:118px}
#chatLog{padding-bottom:120px}
#chatForm{
  position:fixed;
  left:50%;
  bottom:78px;
  transform:translateX(-50%);
  width:min(calc(100% - 36px),724px);
  margin:0;
  padding:9px 0;
  background:#0b0b0df2;
  border-top:1px solid #202026;
  z-index:39;
  backdrop-filter:blur(10px);
}
@media(max-width:520px){
  #chatForm{
    bottom:76px;
    width:calc(100% - 24px);
  }
  #chat{padding-bottom:112px}
  #chatLog{padding-bottom:112px}
}

/* DICHATAT V33 - smooth touch feedback, no browser blue highlight */
button,
a,
[role="button"],
.clickable,
.side-menu-item,
.home-habit,
.listitem,
.cal-day,
.catatan-tab,
.period-tab,
.choice,
.quick button,
.home-nav button,
.text-btn,
.link,
.back,
.icon-btn,
.round-add,
.ai-entry,
.chat-suggestions button,
.chat-home-fab,
.dialog-x {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), opacity .16s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease, color .18s ease;
}
button:focus,
a:focus,
[role="button"]:focus { outline:none; }
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline:2px solid rgba(246,211,75,.72);
  outline-offset:2px;
}
button:active,
a:active,
[role="button"]:active,
.clickable:active {
  transform:scale(.965);
  opacity:.9;
}
.primary:active,
.home-nav button:active,
.catatan-tab:active,
.period-tab:active { transform:scale(.975); }
.tap-ripple {
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(246,211,75,.24);
  transform:translate(-50%,-50%) scale(0);
  animation:dichatatTapRipple .48s cubic-bezier(.2,.65,.3,1) forwards;
}
@keyframes dichatatTapRipple {
  0% { transform:translate(-50%,-50%) scale(0); opacity:.7; }
  55% { opacity:.28; }
  100% { transform:translate(-50%,-50%) scale(8); opacity:0; }
}
@media(prefers-reduced-motion:reduce){
  button,a,[role="button"],.clickable {transition:none}
  .tap-ripple{animation:none;display:none}
}

/* V34: Dichatat logo is a home shortcut with the same smooth tap feedback. */
.brand-home-btn{width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:13px;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.brand-home-btn:disabled{cursor:default;opacity:.45}
.brand-home-btn .brand-mark{pointer-events:none}
.brand-home-btn:focus{outline:none}
.brand-home-btn:focus-visible{outline:2px solid #f6d34b;outline-offset:2px}
.brand-home-btn:hover{background:#151519;border-color:#29292f}
.brand-home-btn:active{transform:scale(.96);opacity:.86}


/* V35: translucent yellow floating navbar */
.global-nav {
  background: rgba(246, 211, 75, .16);
  border-color: rgba(246, 211, 75, .34);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  box-shadow: 0 14px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.10);
}
.global-nav .home-nav button,
.global-nav button {
  color: rgba(255, 255, 255, .96);
}
.global-nav .nav-icon {
  color: inherit;
}
.global-nav button.active {
  color: #f6d34b;
  background: rgba(0,0,0,.20);
  box-shadow: inset 0 0 0 1px rgba(246,211,75,.18);
}
.global-nav button:hover {
  color: #f6d34b;
  background: rgba(0,0,0,.14);
}
.global-nav button:active {
  background: rgba(0,0,0,.22);
}

/* V36: creator story typography */
.creator-story{margin-top:14px;color:rgba(255,255,255,.88);font-size:14px;line-height:1.75}
.creator-story p{margin:0 0 13px}
.creator-story p:last-child{margin-bottom:0}
.creator-story b{color:#fff}
.creator-story .creator-signature{padding-top:5px;color:#fff;line-height:1.55}
.creator-story .creator-signature span{color:rgba(255,255,255,.65);font-size:13px}

/* V37 - clean mobile tap feedback + orb glow free from rectangular bounds */
button,
a,
[role="button"],
.clickable {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
button:focus,
a:focus,
[role="button"]:focus,
.clickable:focus { outline: none; }
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.clickable:focus-visible {
  outline:2px solid rgba(246,211,75,.72);
  outline-offset:2px;
}

.ai-center{
  position:relative;
  background:transparent !important;
  -webkit-tap-highlight-color:transparent !important;
  outline:none !important;
  overflow:visible;
  isolation:isolate;
  touch-action:manipulation;
}
.ai-center .ai-orb-xl{
  position:relative;
  overflow:visible !important;
  isolation:isolate;
  will-change:transform,box-shadow;
}
.ai-center .orb-glow-ring{
  position:absolute;
  inset:-92px;
  width:auto;
  height:auto;
  border-radius:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,253,235,.7) 0%,
    rgba(246,211,75,.40) 18%,
    rgba(246,211,75,.20) 34%,
    rgba(246,211,75,.09) 48%,
    rgba(246,211,75,.03) 58%,
    rgba(246,211,75,0) 66%,
    rgba(246,211,75,0) 100%);
  filter:blur(4px);
  -webkit-filter:blur(4px);
  pointer-events:none;
  z-index:-1;
  transform:scale(.7);
  opacity:0;
  will-change:transform,opacity;
}
.ai-center .orb-glow-ring.play{
  animation:orbGlowOpenFinal 2.2s cubic-bezier(.16,1,.3,1) both;
}
.ai-center.flash .ai-orb-xl{
  animation:orbGlowOrbOpenFinal 2.2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes orbGlowOpenFinal{
  0%{opacity:0;transform:scale(.7)}
  100%{opacity:.30;transform:scale(1.6)}
}
@keyframes orbGlowOrbOpenFinal{
  0%{transform:scale(.99);box-shadow:0 0 0 rgba(246,211,75,0),0 0 0 rgba(246,211,75,0),0 0 0 rgba(246,211,75,0)}
  100%{transform:scale(1);box-shadow:0 0 30px rgba(246,211,75,.27),0 0 80px rgba(246,211,75,.11),0 0 126px rgba(246,211,75,.04)}
}
@media(prefers-reduced-motion:reduce){
  .ai-center .orb-glow-ring.play,.ai-center.flash .ai-orb-xl{animation:none}
  .ai-center .orb-glow-ring{opacity:.30;transform:scale(1.6)}
}

/* V38: habit progress ring + ChatGPT-style multiline composer */
#chatForm textarea{
  display:block;
  width:100%;
  margin:0;
  min-height:44px;
  max-height:132px;
  resize:none;
  overflow-y:auto;
  border-radius:11px;
  border:1px solid #303038;
  background:#0e0e11;
  color:white;
  outline:0;
  font-family:inherit;
}
#chatForm textarea:focus{border-color:#f6d34b}
#chatForm textarea::placeholder{color:#777}


/* V39: image upload + refined Chat AI composer */
#chatLog .bubble.user{font-weight:600}
#chatForm{padding:8px 0 10px}
.chat-composer{width:100%;display:flex;flex-direction:column;gap:7px}
.chat-composer-row{display:flex;align-items:flex-end;gap:8px;width:100%}
.chat-composer-row #chatInput{flex:1;min-width:0}
@media(max-width:520px){.chat-composer-row{gap:6px}}


/* V42: Dichatat home wordmark */
.home-wordmark{
  font-family:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  font-style:normal;
  font-weight:700;
  letter-spacing:-.055em;
  background:linear-gradient(105deg,#ffffff 0%,#fffdf0 42%,#f9df73 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.home-wordmark .wordmark-accent{
  font-family:inherit;
  font-style:normal;
  font-weight:inherit;
  letter-spacing:inherit;
  background:linear-gradient(105deg,#fffdf0 0%,#ffed9a 55%,#f9df73 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.auth-logo-lockup{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0 0 14px;
}
.auth-logo-star{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}
.auth-logo-lockup .auth-logo-word{
  margin:0;
  font-size:27px;
  line-height:1;
}


/* Orb glow: final ring sizing handled by .ai-center .orb-glow-ring above */
.ai-home-stage{overflow:visible}
.ai-home-stage .ai-orb-xl{
  box-shadow:
    0 0 22px rgba(246,211,75,.24),
    0 0 42px rgba(246,211,75,.10),
    0 0 58px rgba(246,211,75,.035);
}

/* ===== Catatan: diagram v63 ===== */
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:11px;color:#b5b5bd}
.chart-legend i,.ch-readout i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend-income{background:#f6d34b}.legend-expense{background:#ff8a80}
.chart-box{min-width:0}
.ch{display:flex;align-items:flex-start}
.ch-y{position:relative;flex:none;width:38px;margin-top:20px;margin-right:6px}
.ch-y span{position:absolute;right:0;transform:translateY(50%);font-size:10px;color:#8a8a94;white-space:nowrap;line-height:1}
.ch-scroll{flex:1;min-width:0;overflow-x:auto;padding-top:20px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#33333a transparent}
.ch-inner{position:relative;width:max-content;min-width:100%}
.ch-grid{position:absolute;left:0;right:0;top:0;pointer-events:none}
.ch-line{position:absolute;left:0;right:0;height:1px;background:#26262d}
.ch-line.base{background:#4a4a54}
.ch-cols{position:relative;display:flex}
.ch-col{scroll-snap-align:start;flex:1 0 var(--cw);min-width:var(--cw);display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent}
.ch-col.on{background:#f6d34b12}
.ch-bars{height:140px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.ch-slot{display:flex;align-items:flex-end;justify-content:center;height:100%;width:22px}
.ch-bar{position:relative;display:block;width:100%;border-radius:5px 5px 0 0}
.ch-bar em{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:3px;font-style:normal;font-size:10px;font-weight:700;color:#e4e4e8;white-space:nowrap;line-height:1}
.ch-income{background:#f6d34b}.ch-expense{background:#ff8a80}
.ch-x{display:block;padding:7px 0 6px;font-size:11px;color:#8a8a94}
.ch-col.on .ch-x{color:#f6d34b;font-weight:800}
.ch-readout{margin-top:12px;padding:10px 12px;border:1px solid #25252b;background:#111114;border-radius:10px;font-size:11px;line-height:1.5;color:#c9c9ce;display:flex;flex-wrap:wrap;gap:3px 14px}
.ch-readout b{width:100%;color:#f7f7f7;font-size:12px}
.hb-row{margin:0 0 14px}.hb-row:last-child{margin-bottom:2px}
.hb-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px}
.hb-top span{color:#e4e4e8;min-width:0;overflow-wrap:anywhere}
.hb-top b{font-size:12px;white-space:nowrap}
.hb-track{height:14px;background:#202026;border-radius:99px;overflow:hidden;margin:7px 0 4px}
.hb-fill{display:block;height:100%;border-radius:99px}
.hb-income{background:#f6d34b}.hb-expense{background:#ff8a80}
.hb-row>small{display:block;color:#9a9aa2;font-size:10px}
@media(max-width:520px){.ch-y{width:34px}.ch-slot{width:20px}}

/* V65: logotype seragam Space Grotesk di semua tempat (beranda, halaman masuk, menu samping) */
.side-menu-head .home-wordmark{margin:0;font-size:24px;line-height:1}
.side-menu-head .home-wordmark,.side-menu-head .home-wordmark .wordmark-accent{font-family:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif}

/* v67 — Catat manual (transaksi & utang/piutang) mengikuti pola form baru, tema tetap Dichatat */
.dc-tabs{display:flex;gap:6px;margin:16px 0 18px;background:#111114;border:1px solid #23232a;border-radius:14px;padding:4px}
.dc-tab{flex:1;border:0;background:transparent;color:#888;padding:10px 6px;border-radius:11px;font-weight:750;font-size:12.5px}
.dc-tab.active{background:#1f1f24;color:#f6d34b}
.dc-tab-panel.hide{display:none}
.dc-segmented{display:flex;gap:8px;margin-bottom:16px}
.dc-seg-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 8px;border-radius:13px;border:1px solid #27272e;background:#151519;color:#999;font-weight:750;font-size:12.5px}
.dc-seg-btn svg{width:15px;height:15px;flex:none}
.dc-seg-btn.active.masuk{background:#123321;border-color:#1e6b3f;color:#8ee5a2}
.dc-seg-btn.active.keluar{background:#3a1414;border-color:#7a2626;color:#ff9292}
.dc-seg-btn.active.plain{background:#201d0f;border-color:#75651f;color:#f6d34b}
.dc-form{margin-top:2px}
.dc-field{margin-bottom:14px}
.dc-field label{display:block;color:#aaa;font-size:12.5px;margin-bottom:7px}
.dc-optional{font-weight:400;color:#666}
.dc-field input[type="text"],.dc-field input[type="date"],.dc-field select{width:100%;margin:0;padding:12px;border-radius:11px;border:1px solid #303038;background:#0e0e11;color:#fff;outline:0;font-size:14px}
.dc-field input:focus,.dc-field select:focus{border-color:#f6d34b}
.dc-date-row{display:flex;gap:8px}
.dc-date-row input{flex:1;min-width:0}
.dc-btn-today{flex:none;border:1px solid #303038;background:#1c1c21;color:#f6d34b;border-radius:11px;padding:0 14px;font-size:12.5px;font-weight:750}
.dc-method-toggle{display:flex;gap:8px}
.dc-method-toggle button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:11px;border:1px solid #303038;background:#0e0e11;color:#888;font-size:12.5px;font-weight:700}
.dc-method-toggle button svg{width:14px;height:14px;flex:none}
.dc-method-toggle button.active{border-color:#75651f;background:#201d0f;color:#f6d34b}
.dc-amount-wrap{position:relative}
.dc-rp-prefix{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#888;font-weight:750;font-size:14px;pointer-events:none}
.dc-amount-wrap input{padding-left:36px!important}
.dc-err{display:none;align-items:center;gap:5px;color:#ff9292;font-size:11.5px;margin:6px 2px 0}
.dc-err svg{width:12px;height:12px;flex:none}
.dc-field.has-error input,.dc-field.has-error select{border-color:#ff9292}
.dc-field.has-error .dc-err{display:flex}
.dc-btn-save{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:13px;padding:14px;font-weight:800;font-size:14px;margin-top:2px}
.dc-btn-save svg{width:16px;height:16px}
.dc-btn-save.masuk{background:linear-gradient(135deg,#34d399,#0ea5e9);color:#04140f}
.dc-btn-save.keluar{background:linear-gradient(135deg,#f87171,#fb923c);color:#2c0808}
.dc-btn-save.plain{background:linear-gradient(135deg,#f6d34b,#e6bb28);color:#171205}
@media(max-width:520px){.dc-segmented{gap:6px}.dc-seg-btn{font-size:11.5px;padding:10px 4px}}

/* Step 24 — manual save buttons: yellow-to-white gradient requested for income and debt/receivable forms. */
.dc-btn-save.masuk,.dc-btn-save.plain{background:linear-gradient(135deg,#f6d34b 0%,#ffe98a 48%,#ffffff 100%)!important;color:#151515!important;border-color:#f6d34b!important;box-shadow:0 8px 24px rgba(246,211,75,.16)}
.dc-btn-save.masuk svg,.dc-btn-save.plain svg{color:#151515}

/* ==========================================================================
   V79 — Gemini AI (onboarding, dialog pengaturan, label balasan)
   ========================================================================== */
.gm-choices{display:grid;gap:10px;margin:14px 0 4px}
.gm-choice{
  display:flex;flex-direction:column;gap:4px;text-align:left;min-width:0;
  background:#0f0f12;border:1px solid #2a2a31;border-radius:14px;padding:13px 14px;color:#f7f7f7;
}
.gm-choice-title{font-size:14px;font-weight:800}
.gm-choice-sub{font-size:12px;line-height:1.5;color:#8d8d96;font-weight:500}
.gm-choice.active{border-color:#f6d34b;background:#1c1a0e;box-shadow:inset 0 0 0 1px #f6d34b55}
.gm-choice.active .gm-choice-title{color:#f6d34b}
.gm-detail{margin-top:14px;padding-top:14px;border-top:1px solid #25252b}
.gm-privacy{line-height:1.55}

.gm-tutorial{background:#0f0f12;border:1px solid #25252b;border-radius:14px;padding:12px 14px;margin:12px 0}
.gm-tutorial summary{cursor:pointer;font-size:13px;font-weight:800;color:#f6d34b;list-style:none}
.gm-tutorial summary::-webkit-details-marker{display:none}
.gm-tutorial summary::after{content:"▾";float:right;color:#8d8d96;transition:transform .18s}
.gm-tutorial:not([open]) summary::after{transform:rotate(-90deg)}
.gm-tutorial ol{margin:12px 0 12px;padding-left:20px;font-size:13px;line-height:1.65;color:#d6d6db}
.gm-tutorial li{margin:2px 0;padding-left:2px}
.gm-tutorial li b{color:#fff}
.gm-link{
  display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 14px;
  background:#f6d34b;color:#151515;border-radius:12px;font-size:13px;font-weight:800;text-decoration:none;text-align:center;
}
.gm-link:active{transform:scale(.98)}
.gm-tip{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:#8d8d96}

.gm-keylabel{display:block;font-size:13px;margin-top:12px}
.gm-keyrow{display:flex;gap:8px;margin-top:6px;min-width:0}
.gm-keyrow input{flex:1;min-width:0;margin:0}
.gm-paste{
  flex:none;min-width:72px;padding:0 14px;border:1px solid #75651f;background:#201d0f;color:#f6d34b;
  border-radius:10px;font-size:12px;font-weight:800;
}

.gm-switch{display:flex;align-items:center;gap:12px;margin:14px 0 8px;cursor:pointer;min-height:44px}
.gm-switch input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.gm-track{
  flex:none;width:46px;height:26px;border-radius:99px;background:#2a2a31;position:relative;transition:background .18s;
}
.gm-track::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#8d8d96;transition:transform .18s,background .18s;
}
.gm-switch input:checked+.gm-track{background:#5c4f12}
.gm-switch input:checked+.gm-track::after{transform:translateX(20px);background:#f6d34b}
.gm-switch input:focus-visible+.gm-track{outline:2px solid #f6d34b;outline-offset:2px}
.gm-switch-text{font-size:13.5px;font-weight:700;min-width:0}

.gm-status{font-size:12.5px;line-height:1.5;border-radius:12px;padding:10px 12px;margin:4px 0 2px;border:1px solid #2a2a31;background:#111114;color:#a9a9b2}
.gm-status.ok{border-color:#1e6b3f;background:#0f1f16;color:#8ee5a2}
.gm-status.warn{border-color:#75651f;background:#1c1a0e;color:#f6d34b}
.gm-status.bad{border-color:#7a2626;background:#2a1212;color:#ff9292}

.gm-actions{justify-content:space-between;align-items:center}
.gm-actions .gm-clear{background:transparent;color:#ff9292;padding:10px 4px}
.gm-actions .primary{background:#f6d34b;color:#151515;font-weight:800;padding:12px 18px}
.gm-actions .primary:disabled{opacity:.6}

.bubble .bubble-src{position:absolute;left:14px;bottom:6px;font-size:9px;line-height:1;color:#b7a85a;opacity:.85}
.bubble.sys-note{background:#1c1a0e;border:1px solid #4b4116;color:#e9d98a;font-size:12px}

@media (max-width:520px){
  .gm-choice{padding:12px}
  .gm-tutorial{padding:11px 12px}
}
dialog .dialog label.gm-switch,.gm-switch .gm-switch-text{color:#f7f7f7}
.gm-keyrow input::placeholder{font-size:13px}

/* Kartu konfirmasi transaksi (hasil terjemahan Gemini) */
.bubble.tx-proposal{display:flex;flex-direction:column;gap:6px;padding-bottom:12px;min-width:0;max-width:89%;width:min(320px,89%)}
.txp-title{font-size:11px;font-weight:800;color:#8d8d96}
.txp-amount{font-size:20px;font-weight:800;letter-spacing:-.02em}
.txp-amount.income{color:#8ee5a2}.txp-amount.expense{color:#ff9292}
.txp-meta{font-size:13px;color:#d6d6db;overflow-wrap:anywhere}
.txp-chips{display:flex;gap:6px;margin-top:4px}
.txp-chip{flex:1;min-width:0;min-height:38px;border:1px solid #303038;background:#0f0f12;color:#a9a9b2;border-radius:10px;font-size:12px;font-weight:750}
.txp-chip.active{border-color:#f6d34b;background:#1c1a0e;color:#f6d34b}
.txp-actions{display:flex;gap:8px;margin-top:6px}
.txp-actions button{flex:1;min-height:42px;border-radius:11px;font-size:13px;font-weight:800;border:1px solid #303038}
.txp-cancel{background:transparent;color:#a9a9b2}
.txp-ok{background:#f6d34b;color:#151515;border-color:#f6d34b!important}
.txp-actions button:disabled{opacity:.6}
.bubble.tx-proposal.done{padding-bottom:22px;white-space:pre-line}

/* Multi-wallet balances */
.wallet-builder{margin-top:12px}
.wallet-builder-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:10px}
.wallet-builder-head span{font-size:.78rem;opacity:.65}
.wallet-builder-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(110px,.8fr) auto;gap:8px;align-items:end;margin-bottom:9px}
.wallet-builder-row label{min-width:0}
.wallet-platform-wrap{min-width:0}
.wallet-builder-row select,.wallet-builder-row input{width:100%}
.wallet-custom-name{margin-top:7px}
.wallet-remove{height:42px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.72);cursor:pointer}
.balance-details-scroll{margin-top:10px;border-top:1px solid rgba(255,255,255,.12);max-height:105px;overflow-y:auto;overscroll-behavior:contain;padding-top:4px;scrollbar-width:thin}
.balance-detail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;padding:4px 2px}
.balance-detail-row span{display:flex;align-items:center;gap:7px;min-width:0;font-size:.84rem}
.balance-detail-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balance-detail-row b{font-size:.88rem;white-space:nowrap}
.balance-detail-row+.balance-detail-row{border-top:1px solid rgba(255,255,255,.055)}
@media(max-width:520px){
 .wallet-builder-row{grid-template-columns:minmax(0,1fr) minmax(105px,.75fr);position:relative;padding-right:54px}
 .wallet-builder-row .wallet-remove{position:absolute;right:0;bottom:0;height:40px}
 .wallet-builder-head{align-items:flex-start;flex-direction:column;gap:2px}
 .balance-details-scroll{max-height:110px}
}

/* DICHATAT V31 - Riwayat transaksi Catatan: kartu penuh, tinggi mengikuti isi */
#noteTransactionNotes{width:100%;min-width:0;display:grid;gap:9px}
.note-tx-row{
  width:100%;min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;
  align-items:center;gap:11px;background:#151519;border:1px solid #27272e;border-radius:16px;
  padding:14px 13px;overflow:hidden;
}
.note-tx-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#202026;flex:none}
.note-tx-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.note-tx-icon.income{color:#8ee5a2;background:#173323}
.note-tx-icon.expense{color:#ff9292;background:#341719}
.note-tx-icon.transfer{color:#f6d34b;background:#292515}
.note-tx-main{min-width:0;align-self:center}
.note-tx-main>b{display:block;font-size:13px;line-height:1.45;color:#f4f4f6;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.note-tx-meta{display:flex;flex-wrap:wrap;gap:2px 7px;margin-top:5px;color:#8d8d96;font-size:10px;line-height:1.45;min-width:0}
.note-tx-meta span{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.note-tx-meta span+span::before{content:"·";margin-right:7px;color:#5e5e67}
.note-tx-amount{font-size:13px;line-height:1.3;text-align:right;white-space:nowrap;align-self:center}
.note-tx-amount.income{color:#62e79b}.note-tx-amount.expense{color:#ff4d4d}
.note-tx-row .tx-actions{align-self:center}
@media(max-width:767px){
  .note-tx-row{grid-template-columns:38px minmax(0,1fr) auto auto;gap:9px;padding:13px 11px;border-radius:15px}
  .note-tx-icon{width:36px;height:36px;border-radius:11px}.note-tx-icon svg{width:19px;height:19px}
  .note-tx-main>b{font-size:13px;line-height:1.42}
  .note-tx-meta{font-size:10px;line-height:1.5}
  .note-tx-amount{font-size:12px}
  .note-tx-row .tx-actions{gap:4px}
  .note-tx-row .tx-ic{width:34px;height:34px}
}
@media(min-width:768px){
  .note-tx-row{padding:15px 15px;min-height:72px}
  .note-tx-main>b{font-size:14px}
  .note-tx-meta{font-size:10.5px}
  .note-tx-amount{font-size:14px}
}
.note-row-actions{display:flex;align-items:center;gap:4px;flex:none}.note-row-actions .tx-ic{width:30px;height:30px}.note-row-actions .tx-ic svg{width:16px;height:16px}
@media(max-width:520px){.note-row-actions .tx-ic{width:28px;height:28px}.debt-item .tx-ic{width:30px;height:30px}.debt-item{flex-wrap:wrap}.debt-item .debt-main{min-width:0;flex:1}.debt-item .debt-amount{margin-left:auto}}

/* Riwayat keuangan: beri ruang baca pada teks di layar sempit, bukan memaksa kolom teks menjadi sangat kecil. */
.note-tx-row{box-sizing:border-box;width:100%;max-width:100%;min-width:0;grid-template-columns:38px minmax(0,1fr) auto auto;}
.note-tx-main,.note-tx-meta,.note-tx-meta span{min-width:0;max-width:100%;}
.note-tx-main>b,.note-tx-meta span{word-break:normal;overflow-wrap:anywhere;}
@media(max-width:520px){
  .note-tx-row{grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;row-gap:7px;align-items:start;padding:12px 11px;}
  .note-tx-icon{grid-column:1;grid-row:1;width:34px;height:34px;}
  .note-tx-main{grid-column:2;grid-row:1;align-self:start;width:100%;}
  .note-tx-main>b{font-size:13px;line-height:1.45;white-space:normal;word-break:normal;overflow-wrap:anywhere;}
  .note-tx-meta{display:flex;flex-wrap:wrap;gap:3px 7px;font-size:10px;line-height:1.5;white-space:normal;}
  .note-tx-meta span{white-space:normal;word-break:normal;overflow-wrap:anywhere;}
  .note-tx-amount{grid-column:2;grid-row:2;justify-self:start;text-align:left;font-size:13px;white-space:normal;overflow-wrap:anywhere;}
  .note-tx-row>.tx-actions,.note-tx-row>.note-row-actions{grid-column:2;grid-row:3;justify-self:start;display:flex;align-items:center;gap:6px;max-width:100%;}
  .note-tx-row .tx-ic{width:32px;height:32px;flex:none;}
  .note-tx-meta span+span::before{margin-right:5px;}
  .debt-item{box-sizing:border-box;width:100%;max-width:100%;min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start;gap:8px 10px;padding:11px;}
  .debt-avatar{grid-column:1;grid-row:1;width:34px;height:34px;}
  .debt-item .debt-main{grid-column:2;grid-row:1;min-width:0;width:100%;overflow-wrap:anywhere;}
  .debt-item .debt-main>b,.debt-item .debt-main span{white-space:normal;overflow-wrap:anywhere;word-break:normal;}
  .debt-item .debt-amount{grid-column:2;grid-row:2;justify-self:start;margin:0;text-align:left;min-width:0;}
  .debt-item .debt-actions{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;gap:6px;min-width:0;}
  .habit-calendar-entries{display:grid;gap:8px;margin-top:8px;}
  .habit-calendar-entry{padding:9px 10px;border:1px solid #2a2a31;border-radius:9px;background:#17171c;min-width:0;}
  .habit-calendar-entry strong{display:block;color:#f2f2f4;font-size:12px;line-height:1.45;overflow-wrap:anywhere;}
  .habit-calendar-entry p{margin:5px 0 0;color:#c5c5cd;font-size:11px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;}
  .habit-calendar-entry p.habit-calendar-no-note{color:#777;margin-top:3px;}
}
.habit-calendar-entries{display:grid;gap:8px;margin-top:8px;}
.habit-calendar-entry{padding:9px 10px;border:1px solid #2a2a31;border-radius:9px;background:#17171c;min-width:0;}
.habit-calendar-entry strong{display:block;color:#f2f2f4;font-size:12px;line-height:1.45;overflow-wrap:anywhere;}
.habit-calendar-entry p{margin:5px 0 0;color:#c5c5cd;font-size:11px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;}
.habit-calendar-entry p.habit-calendar-no-note{color:#777;margin-top:3px;}

/* ---- notifications: Chatat visual consistency ---- */
.notification-dialog{max-width:560px;background:#151519;border-color:#303038}.notification-dialog .hint{margin-bottom:14px}.notification-permission,.notification-test-row,.notification-master{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.025);border-radius:16px;padding:13px 14px;margin:10px 0}.notification-permission>div,.notification-test-row>span{display:grid;gap:4px;min-width:0}.notification-permission small,.notification-test-row small,.notification-setting-head small,.toggle-line small{color:rgba(255,255,255,.58);line-height:1.4}.notification-permission button:disabled{opacity:.55}.notification-settings{display:grid;gap:9px;margin-top:12px}.notification-setting{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.018);border-radius:16px;padding:13px}.notification-setting-head{display:flex;align-items:center;gap:10px}.notification-setting-head>span:nth-child(2){display:grid;gap:3px;min-width:0;flex:1}.notif-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(245,194,66,.09);color:#f5c64a;flex:none}.notif-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.mini-toggle input,.switch-input{position:absolute;opacity:0;pointer-events:none}.mini-toggle{display:inline-flex;flex:none}.mini-toggle span,.switch-ui{display:block;width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);position:relative;cursor:pointer;transition:.18s}.mini-toggle span:after,.switch-ui:after{content:"";position:absolute;width:18px;height:18px;top:2px;left:2px;border-radius:50%;background:rgba(255,255,255,.75);transition:.18s}.mini-toggle input:checked+span,.switch-input:checked+.switch-ui{background:rgba(245,194,66,.35);border-color:rgba(245,194,66,.55)}.mini-toggle input:checked+span:after,.switch-input:checked+.switch-ui:after{transform:translateX(18px);background:#f5c64a}.notification-time-row{display:flex;gap:10px;margin:12px 0 0 44px}.notification-time-row label{display:grid;gap:5px;font-size:12px;color:rgba(255,255,255,.62)}.notification-time-row input,.notification-time-row select{min-height:40px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);color:#fff;border-radius:11px;padding:8px 10px;outline:none}.notification-time-row input:focus,.notification-time-row select:focus{border-color:rgba(245,194,66,.55)}.notification-footnote{margin-top:12px}.toggle-line{display:flex;align-items:center;gap:12px;width:100%;cursor:pointer}.toggle-line>span:first-child{display:grid;gap:3px;flex:1}.notification-master .switch-ui{flex:none}
@media(max-width:520px){.notification-dialog{width:min(100%,560px)}.notification-permission,.notification-test-row,.notification-master{align-items:flex-start}.notification-time-row{margin-left:44px;flex-wrap:wrap}.notification-time-row label{flex:1;min-width:110px}.notification-time-row input,.notification-time-row select{width:100%}}

/* Notification controls use the same Chatat gold language as primary actions. */
.notification-test-button{min-width:78px;min-height:40px;padding:10px 15px;background:#f6d34b;color:#151515;border:0;border-radius:11px;font-weight:750;box-shadow:none}
.notification-test-button:hover{box-shadow:0 8px 20px #f6d34b2b}
.notification-test-button:active{transform:scale(.96)}
.notification-permission,.notification-test-row,.notification-master{border-color:#2b2b32;background:#17171b}
.notification-setting{border-color:#29292f;background:#151519}
.notification-master .switch-ui,.mini-toggle span{background:#24242a;border-color:#34343b}
.notification-master .switch-input:checked+.switch-ui,.mini-toggle input:checked+span{background:#f6d34b;border-color:#f6d34b}
.notification-master .switch-input:checked+.switch-ui:after,.mini-toggle input:checked+span:after{background:#151515}
.notification-time-row input,.notification-time-row select{background:#0e0e11;border-color:#303038}
.notification-time-row input:focus,.notification-time-row select:focus{border-color:#f6d34b;box-shadow:0 0 0 2px #f6d34b18}

/* V92 — per-habit reminder controls */
.habit-reminder{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px 10px;margin-top:-1px;border-top:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015);border-radius:0 0 14px 14px}
.habit-reminder-toggle{display:flex;align-items:center;gap:9px;font-size:12px;color:#d9d9de;cursor:pointer;user-select:none}
.habit-reminder-toggle input{position:absolute;opacity:0;pointer-events:none}
.habit-reminder-toggle .switch-ui{width:38px;height:22px;border-radius:999px;background:#292930;position:relative;transition:.2s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.habit-reminder-toggle .switch-ui:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#8f8f98;transition:.2s}
.habit-reminder-toggle input:checked + .switch-ui{background:#f6d34b;box-shadow:none}
.habit-reminder-toggle input:checked + .switch-ui:after{left:19px;background:#151519}
.habit-reminder-time{display:flex;align-items:center;gap:7px;font-size:12px;color:#9d9da5}
.habit-reminder-time input{width:92px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#151519;color:#f4f4f6;padding:7px 8px;font:inherit;outline:none}
.habit-reminder-time input:focus{border-color:#f6d34b}
.habit-add-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 12px}
.habit-add-form{padding-bottom:14px}

/* v95: dedicated Habit notification settings */
.habit-notification-settings-btn{width:100%;display:flex;align-items:center;gap:11px;text-align:left;padding:13px 14px;margin:10px 0 12px;border:1px solid rgba(245,194,66,.22);border-radius:16px;background:rgba(245,194,66,.055);color:#fff;cursor:pointer}
.habit-notification-settings-btn .notif-icon{width:36px;height:36px}
.habit-notification-settings-btn>span:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}.habit-notification-settings-btn small{color:rgba(255,255,255,.58);line-height:1.35}.habit-notification-settings-btn .arrow{font-size:28px;color:#f5c64a;line-height:1}
.habit-notification-intro{display:grid;gap:5px}.habit-notification-intro span{font-size:13px;color:rgba(255,255,255,.58);line-height:1.45}.habit-notification-master{margin:10px 0 12px}.habit-notification-list{display:grid;gap:10px}.habit-notification-card{padding:13px}.habit-notification-row{display:flex;align-items:center;gap:10px}.habit-notification-name{display:grid;gap:3px;flex:1;min-width:0}.habit-notification-name b{overflow-wrap:anywhere}.habit-notification-name small{color:rgba(255,255,255,.52)}.habit-notification-time{display:flex;margin:11px 0 0 44px}.habit-notification-time label{display:grid;gap:5px;font-size:12px;color:rgba(255,255,255,.62)}.habit-notification-time input{min-height:40px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);color:#fff;border-radius:11px;padding:8px 10px;outline:none}
.notification-setting-link .notification-setting-head{align-items:center}.notification-setting-link .secondary{flex:none}


/* V97 — Navbar disamakan persis dengan ukuran Beranda pada semua halaman.
   Pada viewport sempit, lebarnya selalu viewport - 28px; tidak boleh melebar ke samping. */
.global-nav{
  left:50%;
  right:auto;
  width:min(520px,calc(100vw - 28px));
  max-width:520px;
  margin:0;
  transform:translateX(-50%);
  box-sizing:border-box;
}
.global-nav .home-nav{
  width:100%;
  min-width:0;
}
.global-nav button{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* V99: Habit notification settings must stay locked to the mobile viewport. */
#habitNotificationSettings{min-width:0;max-width:100%;width:100%;overflow-x:hidden;}
#habitNotificationSettings .title,
#habitNotificationSettings .title-left,
#habitNotificationSettings .habit-notification-card,
#habitNotificationSettings .habit-notification-row,
#habitNotificationSettings .habit-notification-time{min-width:0;max-width:100%;}
#habitNotificationSettings .title-left{flex:1;}
#habitNotificationSettings .title-left h2,
#habitNotificationSettings .title-left .chat-status{min-width:0;overflow-wrap:anywhere;}
#habitNotificationSettings .habit-notification-name{min-width:0;max-width:100%;overflow:hidden;}
#habitNotificationSettings .habit-notification-time label{min-width:0;max-width:100%;}
@media(max-width:520px){
  #habitNotificationSettings{width:100%;max-width:100%;}
  #habitNotificationSettings .card,
  #habitNotificationSettings .habit-notification-list,
  #habitNotificationSettings .habit-notification-card{width:100%;max-width:100%;}
  #habitNotificationSettings .habit-notification-time{margin-left:44px;}
  #habitNotificationSettings input,
  #habitNotificationSettings select{max-width:100%;min-width:0;}
}

/* V100 — hard-lock mobile viewport width. The previous centering rule could
   still create a right-shifted fixed navbar on some Android WebViews. */
@media(max-width:520px){
  html,body{max-width:100%;overflow-x:hidden;}
  .global-nav{
    left:10px;
    right:10px;
    width:auto;
    max-width:none;
    margin:0;
    transform:none;
    box-sizing:border-box;
  }
  #habitNotificationSettings{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
  }
}

/* V101 — only the Habit Notification page: exact mobile content width.
   No visual redesign; every child is constrained to the available main width. */
@media(max-width:520px){
  #habitNotificationSettings{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow-x:clip !important;
  }
  #habitNotificationSettings > .title,
  #habitNotificationSettings > .card,
  #habitNotificationSettings > .habit-notification-list,
  #habitNotificationSettings > .error{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  #habitNotificationSettings .title{
    overflow:hidden;
  }
  #habitNotificationSettings .title-left{
    width:0 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  #habitNotificationSettings .title-left > div{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  #habitNotificationSettings .habit-notification-card,
  #habitNotificationSettings .habit-notification-row,
  #habitNotificationSettings .habit-notification-time,
  #habitNotificationSettings .habit-notification-time label{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  #habitNotificationSettings .habit-notification-time{
    width:auto !important;
  }
  #habitNotificationSettings input,
  #habitNotificationSettings select,
  #habitNotificationSettings button{
    box-sizing:border-box !important;
    max-width:100% !important;
  }
}

/* v106: tombol Kembali onboarding mengikuti tema gelap */
.onboard-actions{align-items:stretch}
.onboard-actions #onboardNext{margin:10px 0 8px}
.onboard-actions #onboardBack{flex:.7;margin:10px 0 8px;appearance:none;-webkit-appearance:none;background:transparent!important;background-image:none!important;color:#f0f0f2!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:11px;padding:12px 16px;font:inherit;font-size:16px;font-weight:650;cursor:pointer;box-shadow:none;transition:background .15s ease,border-color .15s ease}
.onboard-actions #onboardBack:hover{background:rgba(255,255,255,.06)!important;border-color:rgba(246,211,75,.45)!important}
.onboard-actions #onboardBack:active{background:rgba(255,255,255,.1)!important}
.onboard-actions #onboardBack:focus-visible{outline:2px solid #f6d34b;outline-offset:2px}

/* v107: input saklar tersembunyi tidak boleh melebar (penyebab halaman bisa digeser ke samping) */
.mini-toggle,.toggle-line{position:relative}
.mini-toggle input,.switch-input{width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;left:0;top:0;overflow:hidden}
.mini-toggle{flex:none}
#habitNotificationSettings{max-width:100%;overflow-x:clip}

/* v108: jaring pengaman - halaman tidak boleh bisa digeser ke samping */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* ===== Keterangan harian (Habit) ===== */
.habit-day-note{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.habit-day-note-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.habit-day-note-head b{font-size:14px}
.habit-day-note-head small{color:#8d8d96;font-size:11px}
.habit-day-note textarea{width:100%;min-height:96px;padding:11px 12px;border-radius:12px;border:1px solid #303038;background:#0e0e11;color:#fff;font-family:inherit;font-size:14px;line-height:1.5;resize:vertical}
.habit-day-note textarea:focus{border-color:#f6d34b;outline:0}
.habit-day-note-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.habit-day-note-status{color:#b7a85a;font-size:11px}
.habit-day-note-hint{color:#75757e;font-size:10.5px;line-height:1.5}
/* ===== Pengaturan Habit (sidebar) ===== */
.habit-settings-dialog{max-width:520px}
.habit-settings-list{display:grid;gap:8px;margin-top:12px}
.hs-row{display:flex;align-items:center;gap:8px}
.hs-name{flex:1;min-width:0}
.hs-save{flex:none;background:#f6d34b;color:#151515;border:0;border-radius:10px;padding:0 14px;height:36px;font-size:12px;font-weight:750}
.hs-save:disabled{opacity:.6}
@media (max-width:767px){.hs-save{height:42px}}
/* ===== Kalender Habit: penanda keterangan harian ===== */
.cal-day.has-note::after{content:"";width:4px;height:4px;border-radius:50%;background:#f6d34b;margin-top:1px}
.cal-day.has-note:not(.has-log){border-color:#3a3520}
.habit-calendar-daynote{margin-top:8px;padding:9px 10px;border:1px solid #5b5127;border-radius:9px;background:#1a1913;min-width:0}
.habit-calendar-daynote strong{display:block;color:#f6d34b;font-size:12px;line-height:1.45}
.habit-calendar-daynote p{margin:5px 0 0;color:#e6dfc0;font-size:11px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---- V114: jam & tanggal di header, akun + Keluar di dasar sidebar ---- */
header .head-clock{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;line-height:1.2;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.head-clock .hc-date{font-size:11px;font-weight:600;color:#b3b3bc;letter-spacing:.01em}
.head-clock .hc-time{font-size:12.5px;font-weight:750;color:#f6d34b;letter-spacing:.03em}
.side-menu{overflow-y:auto}
.side-menu .side-user{position:sticky;bottom:0;margin-top:auto;padding:10px 0 2px;background:inherit;display:flex;flex-direction:column;gap:8px;border-top:1px solid #24242a;z-index:1}
.side-menu .side-user.hide{display:none!important}
.side-user .su-row{display:flex;align-items:center;gap:10px;min-width:0;padding:2px 4px}
.side-user .su-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f6d34b;color:#15130a;font-weight:800;font-size:14px;text-transform:uppercase}
.side-user .su-info{display:flex;flex-direction:column;min-width:0}
.side-user .su-info small{font-size:10.5px;color:#7f7f89}
.side-user .su-email{font-size:12.5px;color:#e6e6ea;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user .su-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid #f6d34b55;background:#f6d34b1a;color:#f6d34b;font-size:13px;font-weight:750;cursor:pointer;transition:background .15s ease,color .15s ease}
.side-user .su-logout svg{width:16px;height:16px}
.side-user .su-logout:hover,.side-user .su-logout:active{background:#f6d34b;color:#15130a}

/* ---- V115: header HP lebih ramping + glow orb tidak terpotong ---- */
@media (max-width:1023px){
  header{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px}
  /* Beranda tidak di-scroll, jadi header boleh transparan agar cahaya orb tidak tertutup */
  body:has(#home:not(.hide)) header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* biarkan glow meluap ke atas/bawah; hanya sisi kiri-kanan yang dipotong agar tidak muncul scroll horizontal */
  #home{overflow-x:clip;overflow-y:visible}
  #home{height:calc(100dvh - 64px - env(safe-area-inset-top,0px) - 96px)}
}
@media (max-width:520px){
  #home{height:calc(100dvh - 64px - env(safe-area-inset-top,0px) - 94px)}
}

/* ---- V117: riwayat utang/piutang (jam otomatis, form bayar Penuh/Cicil, penanda belum lunas) ---- */
.tx-month-label{font-size:12px;font-weight:600;color:#9a9aa5;margin-left:6px}
.debt-card,.note-debt-card{background:#151519;border:1px solid #27272e;border-radius:16px;overflow:hidden}
.debt-card{margin:8px 0}
.debt-card .debt-item{margin:0;background:transparent;border:0;border-radius:0}
.note-debt-card .note-tx-row{background:transparent;border:0;border-radius:0}
.debt-card.is-unpaid,.note-debt-card.is-unpaid{background:#2a1316;border-color:#7a2a30}
.debt-extra{padding:12px 14px 14px;border-top:1px dashed rgba(255,255,255,.1)}
.is-unpaid .debt-extra{border-top-color:rgba(255,128,128,.3)}
.dh-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8d8d98}
.debt-history{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0;position:relative}
.debt-history li{display:flex;align-items:center;gap:10px;padding:8px 0;position:relative}
.debt-history li+li{border-top:1px solid rgba(255,255,255,.05)}
.dh-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#6c6c78;box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.dh-pay .dh-dot{background:#62e79b;box-shadow:0 0 0 3px rgba(98,231,155,.14)}
.dh-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dh-kind{font-size:13px;font-weight:750;color:#ececf1}
.dh-when{font-size:11.5px;color:#9a9aa5}
.debt-history b{flex:none;font-size:13px;font-weight:800;color:#f3f3f6;white-space:nowrap}
.debt-history .dh-pay b,.debt-history .dh-pay.is-full .dh-kind{color:#8ee5a2}
.debt-payform{margin-top:12px;padding:14px;border-radius:16px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.07)}
.dpf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dpf-head b{font-size:14px;font-weight:800;color:#f1f1f5}
.dpf-rem{font-size:11.5px;font-weight:800;color:#f6d34b;background:rgba(246,211,75,.1);border:1px solid rgba(246,211,75,.22);border-radius:999px;padding:4px 10px;white-space:nowrap}
.dpf-fields{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px}
.dpf-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0}
.dpf-cap{font-size:11px;font-weight:700;color:#9a9aa5}
.dpf-input{display:flex;align-items:center;gap:8px;height:48px;padding:0 12px;background:#0d0d10;border:1px solid #2e2e36;border-radius:12px}
.dpf-input:focus-within,.dpf-acc:focus{border-color:#f6d34b;box-shadow:0 0 0 3px rgba(246,211,75,.12)}
.dpf-input i{font-style:normal;font-size:13px;font-weight:800;color:#8d8d98}
.dpf-input input.dpf-amount{flex:1;min-width:0;width:100%;height:100%;min-height:0;padding:0;margin:0;background:transparent;border:0;outline:0;box-shadow:none;color:#f7f7f7;font:inherit;font-size:15px;font-weight:700}
.dpf-input input.dpf-amount::placeholder{color:#5f5f6a;font-weight:600}
select.dpf-acc{width:100%;height:48px;min-height:48px;padding:0 34px 0 12px;margin:0;background:#0d0d10 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9aa5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid #2e2e36;border-radius:12px;color:#f7f7f7;font:inherit;font-size:14px;font-weight:650;outline:0;-webkit-appearance:none;appearance:none}
.dpf-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dpf-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:54px;border-radius:13px;border:1px solid;font-family:inherit;cursor:pointer;padding:0 8px}
.dpf-btn span{font-size:14px;font-weight:800;line-height:1.2}
.dpf-btn small{font-size:11px;font-weight:700;opacity:.75;line-height:1.2}
.dpf-btn.full{background:#f6d34b;border-color:#f6d34b;color:#1a1608}
.dpf-btn.part{background:rgba(246,211,75,.08);border-color:rgba(246,211,75,.3);color:#f6d34b}
.dpf-btn:disabled{opacity:.55}
.dpf-msg{margin-top:10px;font-size:12px;line-height:1.4}.dpf-msg:empty{display:none}
@media(max-width:480px){
  .dpf-fields{grid-template-columns:1fr}
  .debt-extra{padding:12px 12px 12px}
  .debt-payform{padding:12px}
}
.habit-calendar-time{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#9a9aa5}

/* ---- V118: habit hari tertentu (hirarki di halaman Habit, pengaturan terpisah, onboarding) ---- */
.day-chips{display:flex;flex-wrap:wrap;gap:6px}
.day-chip{min-width:44px;padding:8px 10px;border-radius:999px;border:1px solid #2e2e36;background:#0f0f12;color:#9a9aa5;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
.day-chip.on{background:#f6d34b;border-color:#f6d34b;color:#1a1608}
.habit-group{margin:16px 0 6px}
.habit-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 2px}
.habit-group-title{display:flex;align-items:center;gap:8px;min-width:0}
.habit-group-title b{font-size:13px;font-weight:800;color:#e8e8ee}
.habit-group-head small{color:#9a9aa5;font-weight:700;font-size:12px}
.habit-day-pill{font-size:11px;font-weight:800;color:#1a1608;background:#f6d34b;border-radius:999px;padding:3px 9px;white-space:nowrap}
.habit-group-regular{margin-bottom:6px}
.habit-group-days{margin:28px 0 10px;padding:14px 12px 8px;background:linear-gradient(180deg,#19170d 0%,#121110 100%);border:1px solid #3d3925;border-radius:20px;box-shadow:inset 0 1px 0 rgba(246,211,75,.1)}
.habit-group-days .habit-group-head{padding:0 2px 10px;margin-bottom:6px;border-bottom:1px dashed rgba(246,211,75,.25)}
.habit-group-days .habit-group-title b{color:#f6d34b}
.habit-group-days .habit-card .listitem.habit{background:#1c1a10;border-color:#3d3925}
.habit-group-days .habit-card .listitem.habit.done{background:#262312;border-color:#6b5e1f}
.hs-section{margin-top:16px;padding:14px;border:1px solid #27272e;border-radius:16px;background:#121216}
.hs-section-days{border-color:#3d3925}
.hs-section-head{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.hs-section-head b{display:block;font-size:14px}
.hs-section-head small{color:#9a9aa5;font-size:12px}
.hs-badge{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#211f15;border:1px solid #3d3925;color:#f6d34b;font-size:12px;font-weight:800}
.habit-days-add{display:grid;gap:10px}
.habit-days-add input,.onb-day-row input{width:100%;box-sizing:border-box;background:#0f0f12;border:1px solid #2e2e36;border-radius:11px;color:#f7f7f7;font:inherit;font-size:14px;padding:11px 12px}
.hs-row.hs-row-days{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.hs-row-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.onb-habit-block{margin-top:14px}
.onb-habit-days{padding-top:14px;border-top:1px dashed rgba(255,255,255,.1)}
.onb-block-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.onb-block-head b{font-size:14px}
.onb-block-head small{color:#9a9aa5;font-size:12px}
.onb-day-row{display:grid;gap:8px;margin-bottom:10px;padding:12px;border:1px solid #27272e;border-radius:14px;background:#121216}

/* ---- V120: tombol ubah/hapus di baris cicilan ---- */
.debt-history li .tx-actions{flex:none;display:flex;gap:4px;margin-left:2px}
.debt-history li .tx-ic{width:30px;height:30px;min-width:30px;min-height:30px}
.debt-history li .tx-ic svg{width:15px;height:15px}

/* ---- V122: riwayat utang/piutang ringkas + tombol "Catat pengembalian" (Keuangan & Catatan) ---- */
.debt-extra{padding:8px 12px 10px}
.debt-hist-box>summary,.debt-pay-box>summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.debt-hist-box>summary::-webkit-details-marker,.debt-pay-box>summary::-webkit-details-marker{display:none}
.debt-hist-sum{display:flex;align-items:center;gap:10px;min-height:38px;padding:2px 2px}
.debt-hist-sum .dh-title{flex:none}
.dh-sum-info{flex:1;min-width:0;text-align:right;font-size:12px;font-weight:650;color:#b4b4be;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-chev{flex:none;width:8px;height:8px;border-right:2px solid #8d8d98;border-bottom:2px solid #8d8d98;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;margin:0 4px 0 2px}
.debt-hist-box[open] .dh-chev{transform:rotate(-135deg) translateY(-2px)}
.debt-history{margin:2px 0 4px}
.debt-history li{padding:5px 0;gap:8px}
.dh-kind{font-size:12.5px}.dh-when{font-size:11px}
.debt-history b{font-size:12.5px}
.dh-dot{width:7px;height:7px;box-shadow:0 0 0 2px rgba(255,255,255,.05)}
.debt-pay-box{margin-top:6px}
.dpf-open{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:12px;border:1px dashed rgba(246,211,75,.5);background:rgba(246,211,75,.08);color:#f6d34b;font-size:13px;font-weight:800}
.dpf-open svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dpf-open:active{background:rgba(246,211,75,.16)}
.dpf-open-opened{display:none}
.debt-pay-box[open] .dpf-open-closed{display:none}
.debt-pay-box[open] .dpf-open-opened{display:inline}
.debt-pay-box[open] .dpf-open svg{transform:rotate(45deg)}
.debt-pay-box .debt-payform{margin-top:8px;padding:12px}
.debt-pay-box .dpf-head{margin-bottom:8px}
.debt-pay-box .dpf-input,.debt-pay-box select.dpf-acc{height:44px;min-height:44px}
.debt-pay-box .dpf-btns{margin-top:10px}
.debt-pay-box .dpf-btn{height:46px}
@media(max-width:480px){.debt-extra{padding:6px 10px 10px}}

/* ---- V124: daftar utang/piutang di Keuangan, satu baris memanjang (tidak meninggi ke bawah) ---- */
.debt-card .debt-item{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto auto!important;grid-template-areas:"av main amt act"!important;grid-template-rows:auto!important;align-items:center!important;column-gap:10px!important;row-gap:0!important;padding:10px 12px!important}
.debt-card .debt-item>.debt-avatar{grid-area:av!important;width:34px;height:34px}
.debt-card .debt-item>.debt-main{grid-area:main!important;min-width:0;width:auto;display:flex;align-items:center;gap:8px;overflow:hidden}
.debt-card .debt-item .debt-main>b{display:block;flex:0 1 auto;min-width:0;font-size:13.5px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
.debt-card .debt-item .debt-main>span.debt-badge{flex:none;white-space:nowrap!important;font-size:10px;line-height:1;padding:4px 8px;border-radius:999px}
.debt-card .debt-item>.debt-amount{grid-area:amt!important;justify-self:end!important;margin:0!important;text-align:right!important;white-space:nowrap;display:flex;align-items:baseline;gap:4px}
.debt-card .debt-item>.debt-amount b{display:inline;font-size:13.5px}
.debt-card .debt-item>.debt-amount small{display:inline!important;margin:0;font-size:10px}
.debt-card .debt-item>.debt-actions{grid-area:act!important;width:auto!important;display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:flex-end;gap:6px}
.debt-card .debt-item .pay-btn{white-space:nowrap;padding:7px 12px}
.debt-card .debt-item .tx-ic{width:30px;height:30px;flex:none}
@media(max-width:520px){
  .debt-card .debt-item{column-gap:8px!important;padding:9px 10px!important}
  .debt-card .debt-item>.debt-amount small{display:none!important}
  .debt-card .debt-item .debt-main>span.debt-badge{display:none}
  .debt-card .debt-item .tx-ic{width:28px;height:28px}
  .debt-card .debt-item>.debt-actions{gap:4px}
  .debt-card .debt-item .pay-btn{padding:6px 9px;font-size:12px}
}

/* ---- V127: tombol sub-modul Keuangan: berdiri sendiri (tanpa kolom abu-abu), sudut membulat, Plus Jakarta Sans; aktif = hitam + outline kuning + ikon/tulisan kuning; tidak aktif = kuning penuh ---- */
#financeTabs.dc-tabs{gap:8px;padding:0;background:transparent;border:0;border-radius:0}
#financeTabs .dc-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;padding:11px 6px 10px;border-radius:13px;border:2px solid #f6d34b;background:#f6d34b;color:#0b0b0d;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;font-weight:800;font-size:11.5px;line-height:1.15;cursor:pointer;transition:background .18s ease,color .18s ease,transform .12s ease}
#financeTabs .dc-tab .dc-tab-ic{width:22px;height:22px;flex:none;stroke-width:2.2}
#financeTabs .dc-tab .dc-tab-lb{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#financeTabs .dc-tab:active{transform:scale(.97)}
#financeTabs .dc-tab.active{background:#000;color:#f6d34b;border-color:#f6d34b;box-shadow:none}
@media(max-width:360px){#financeTabs .dc-tab{font-size:10.5px;padding:10px 4px 9px}#financeTabs .dc-tab .dc-tab-ic{width:20px;height:20px}}
@media(min-width:768px){#financeTabs .dc-tab{gap:6px;padding:13px 10px 12px;font-size:13px}#financeTabs .dc-tab .dc-tab-ic{width:26px;height:26px}}
@media(min-width:1280px){#financeTabs.dc-tabs{gap:12px;padding:0}#financeTabs .dc-tab{gap:7px;padding:16px 12px 14px;font-size:14.5px;border-radius:15px}#financeTabs .dc-tab .dc-tab-ic{width:30px;height:30px}}

/* V129 finance split: four sub-modules, compact and responsive */
#financeTabs.dc-tabs{grid-template-columns:repeat(4,minmax(0,1fr));display:grid;gap:7px}
#financeTabs .dc-tab{width:100%;min-width:0;padding:10px 5px 9px}
#financeTabs .dc-tab .dc-tab-lb{font-size:11px;letter-spacing:-.01em}
.dc-finance-tab-heading{margin:2px 2px 15px}
.dc-finance-tab-heading h2{margin:0;font-size:17px;line-height:1.25}
.dc-finance-tab-heading small{display:block;color:#777;font-size:11px;margin-top:4px}
#txExpenseHistory.hide{display:none}
@media(max-width:380px){#financeTabs.dc-tabs{gap:5px}#financeTabs .dc-tab{padding:9px 3px 8px;border-radius:12px}#financeTabs .dc-tab .dc-tab-ic{width:19px;height:19px}#financeTabs .dc-tab .dc-tab-lb{font-size:9.5px}}
@media(min-width:768px){#financeTabs.dc-tabs{gap:9px}#financeTabs .dc-tab{padding:12px 8px 11px}#financeTabs .dc-tab .dc-tab-lb{font-size:12.5px}}
@media(min-width:1280px){#financeTabs.dc-tabs{gap:12px}#financeTabs .dc-tab{padding:15px 10px 13px}#financeTabs .dc-tab .dc-tab-lb{font-size:14px}}

/* ---- V132: rapikan layout sub-modul Pemasukan/Pengeluaran + batas ukuran minimum jendela di desktop ---- */
@media (min-width:1024px){
  #finTabCatat{grid-template-rows:auto 1fr;align-items:start}
  #finTabCatat>.dc-finance-tab-heading{grid-column:1;grid-row:1;margin:2px 2px 14px;min-height:40px}
  #finTabCatat>#txForm{grid-column:1;grid-row:2}
  #finTabCatat>#txIncomeHistoryBlock,#finTabCatat>#txExpenseHistoryBlock{grid-column:2;grid-row:1 / span 2;min-width:0}
  #finTabCatat>#txIncomeHistoryBlock>h2,#finTabCatat>#txExpenseHistoryBlock>h2{margin:2px 2px 14px;min-height:40px;align-items:flex-start;font-size:17px;line-height:1.25}
  #finTabCatat>#txIncomeHistoryBlock>h2 .tx-month-label,#finTabCatat>#txExpenseHistoryBlock>h2 .tx-month-label{margin-left:12px;padding-top:3px;white-space:nowrap}
  #finTabCatat #txIncomeList,#finTabCatat #txExpenseList{margin:0}
}
@media (hover:hover) and (pointer:fine){
  html{min-width:420px}
  body{min-height:640px}
}

/* ---- V134: tab Keuangan: yang tidak terpilih berdiri sendiri (kotak membulat, terpisah dari kartu); yang terpilih menyatu ke kartu dengan lengkungan halus di dasar; semua sudut kartu tumpul ---- */
#financeTabs.dc-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:8px;margin:16px 0 0;padding:0;background:transparent;border:0;border-radius:0;position:relative;z-index:2}
#financeTabs .dc-tab{border-radius:13px;border:2px solid #f6d34b;background:#f6d34b;color:#0b0b0d;box-shadow:none;margin-bottom:16px;transition:background .15s ease,color .15s ease}
#financeTabs .dc-tab{overflow:visible}
#financeTabs .dc-tab:active{transform:none}
#financeTabs .dc-tab.active{align-self:stretch;position:relative;z-index:3;margin-bottom:-2px;border-bottom:0;border-radius:14px 14px 0 0;background:#101013;color:#f6d34b}
/* lengkungan cekung (radius 14px) di kiri & kanan dasar tab terpilih, seperti tab Chrome */
#financeTabs .dc-tab.active::before,#financeTabs .dc-tab.active::after{content:"";display:block;position:absolute;bottom:0;width:18px;height:18px;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M0 17A17 17 0 0 0 17 0L60 0L60 60L0 60Z' fill='%23101013'/%3E%3Cpath d='M0 17A17 17 0 0 0 17 0' fill='none' stroke='%23f6d34b' stroke-width='2'/%3E%3C/svg%3E")}
#financeTabs .dc-tab.active::before{left:-18px}
#financeTabs .dc-tab.active::after{right:-18px;transform:scaleX(-1)}
#financeTabs .dc-tab.active:first-child::before,#financeTabs .dc-tab.active:last-child::after{display:none}
#finCard.fin-card{position:relative;z-index:1;background:#101013;border:2px solid #f6d34b;border-radius:18px;padding:16px 12px 18px;margin:0 0 18px;min-width:0}
/* kalau tab paling kiri/kanan yang terpilih, sisi kartu di sana lurus menyambung ke tab */
#finance:has(#financeTabs .dc-tab:first-child.active) #finCard.fin-card{border-top-left-radius:0}
#finance:has(#financeTabs .dc-tab:last-child.active) #finCard.fin-card{border-top-right-radius:0}
@media(min-width:768px){#finCard.fin-card{padding:20px 20px 24px}}
@media(min-width:1024px){#finCard.fin-card{padding:24px 28px 28px;border-radius:20px}#financeTabs.dc-tabs{gap:10px}}
@media(min-width:1280px){#financeTabs.dc-tabs{gap:12px}#financeTabs .dc-tab{border-radius:15px}#financeTabs .dc-tab.active{border-radius:16px 16px 0 0}}

/* ---- V136: penyesuaian tampilan HP untuk tab + kartu Keuangan (radius lengkungan 12px, jarak & ukuran lebih rapat) ---- */
@media(max-width:520px){
  #financeTabs.dc-tabs{gap:6px;margin-top:12px}
  #financeTabs .dc-tab{margin-bottom:14px;padding:10px 3px 9px;gap:4px}
  #financeTabs .dc-tab .dc-tab-ic{width:20px;height:20px}
  #financeTabs .dc-tab .dc-tab-lb{font-size:10.5px;letter-spacing:-.02em}
  #financeTabs .dc-tab.active{margin-bottom:-2px}
  #financeTabs .dc-tab.active::before,#financeTabs .dc-tab.active::after{width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 15A15 15 0 0 0 15 0L60 0L60 60L0 60Z' fill='%23101013'/%3E%3Cpath d='M0 15A15 15 0 0 0 15 0' fill='none' stroke='%23f6d34b' stroke-width='2'/%3E%3C/svg%3E")}
  #financeTabs .dc-tab.active::before{left:-16px}
  #financeTabs .dc-tab.active::after{right:-16px;transform:scaleX(-1)}
  #finCard.fin-card{padding:14px 12px 16px;border-radius:16px}
}
@media(max-width:380px){
  #financeTabs.dc-tabs{gap:5px}
  #financeTabs .dc-tab .dc-tab-lb{font-size:9.5px}
  #financeTabs .dc-tab .dc-tab-ic{width:19px;height:19px}
}

/* ---- V138: navbar bawah disembunyikan saat sidebar / jendela menu dibuka (kecuali desktop lebar >=1280px) ---- */
.global-nav{transition:opacity .18s ease,visibility .18s ease}
@media (max-width:1279px){
  body:has(#sideMenu:not(.hide)) .global-nav,
  body:has(#notificationDialog[open],#aboutDialog[open],#creatorDialog[open],#geminiDialog[open],#balanceDialog[open],#nameDialog[open],#exchangeDialog[open],#habitSettingsDialog[open],#resetDialog[open],#deleteAccountDialog[open],#pushTestDialog[open]) .global-nav{opacity:0;visibility:hidden;pointer-events:none}
}

/* ---- V139: riwayat Pemasukan/Pengeluaran lebih lega; tombol Ubah & Hapus muncul saat baris digeser ke kiri ---- */
.swipe-hint{margin:-6px 2px 10px;font-size:11px;color:#7d7d87}
.swipe-row{--sw-w:148px;position:relative;overflow:hidden;border-radius:15px;margin-bottom:8px}
.swipe-actions{position:absolute;top:0;right:0;bottom:0;width:var(--sw-w);display:flex;visibility:hidden;transition:visibility 0s linear .24s}
.swipe-row.is-open .swipe-actions,.swipe-row.is-dragging .swipe-actions{visibility:visible;transition-delay:0s}
.swipe-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;margin:0;padding:0;cursor:pointer;font:700 11.5px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:#15130a;background:#f6d34b}
.swipe-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.swipe-btn.del{background:#e0484f;color:#fff}
.swipe-btn:active{filter:brightness(.92)}
.swipe-front.recent-item{position:relative;z-index:1;margin:0;display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:10px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.swipe-front.recent-item:focus-visible{outline:2px solid #f6d34b;outline-offset:-2px}
.swipe-row.is-dragging .swipe-front{transition:none;cursor:grabbing}
.swipe-row.is-open .swipe-front{transform:translateX(calc(-1 * var(--sw-w)))}
.swipe-front .recent-main small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.swipe-front .recent-main b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}

/* ---- V140: tombol Ubah/Hapus berada DI DALAM kartu baris (nested), bulat dan berjarak, tidak terlihat terpotong ---- */
.swipe-row{background:#151519;border:1px solid #27272e;border-radius:15px}
.swipe-front.recent-item{background:#151519;border:0;border-radius:0}
.swipe-actions{box-sizing:border-box;padding:6px;gap:6px;align-items:stretch}
.swipe-btn{flex:1 1 0;min-width:0;border-radius:11px}

/* ---- V141: sub-modul Catatan (Keuangan & Habit) disamakan dengan sub-modul Keuangan: tab kuning berikon + card menyatu dengan tab aktif ---- */
#noteTabs.dc-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:8px;margin:12px 0 0;padding:0;background:transparent;border:0;border-radius:0;position:relative;z-index:2}
#noteTabs .dc-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0;padding:10px 5px 9px;border-radius:13px;border:2px solid #f6d34b;background:#f6d34b;color:#0b0b0d;box-shadow:none;margin-bottom:14px;overflow:visible;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;font-weight:800;font-size:11.5px;line-height:1.15;cursor:pointer;transition:background .15s ease,color .15s ease}
#noteTabs .dc-tab .dc-tab-ic{width:22px;height:22px;flex:none;stroke-width:2.2}
#noteTabs .dc-tab .dc-tab-lb{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;letter-spacing:-.01em}
#noteTabs .dc-tab:active{transform:none}
#noteTabs .dc-tab.active{align-self:stretch;position:relative;z-index:3;margin-bottom:-2px;border-bottom:0;border-radius:14px 14px 0 0;background:#101013;color:#f6d34b}
#noteTabs .dc-tab.active::before,#noteTabs .dc-tab.active::after{content:"";display:block;position:absolute;bottom:0;width:16px;height:16px;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 15A15 15 0 0 0 15 0L60 0L60 60L0 60Z' fill='%23101013'/%3E%3Cpath d='M0 15A15 15 0 0 0 15 0' fill='none' stroke='%23f6d34b' stroke-width='2'/%3E%3C/svg%3E")}
#noteTabs .dc-tab.active::before{left:-16px}
#noteTabs .dc-tab.active::after{right:-16px;transform:scaleX(-1)}
#noteTabs .dc-tab.active:first-child::before,#noteTabs .dc-tab.active:last-child::after{display:none}
#noteCard.fin-card{position:relative;z-index:1;background:#101013;border:2px solid #f6d34b;border-radius:16px;padding:14px 12px 16px;margin:0 0 18px;min-width:0}
#catatan:has(#noteTabs .dc-tab:first-child.active) #noteCard.fin-card{border-top-left-radius:0}
#catatan:has(#noteTabs .dc-tab:last-child.active) #noteCard.fin-card{border-top-right-radius:0}
@media(min-width:521px){#noteCard.fin-card{border-radius:18px}}
@media(min-width:768px){
  #noteTabs.dc-tabs{gap:9px;margin-top:16px}
  #noteTabs .dc-tab{gap:6px;padding:12px 8px 11px;margin-bottom:16px}
  #noteTabs .dc-tab .dc-tab-ic{width:26px;height:26px}
  #noteTabs .dc-tab .dc-tab-lb{font-size:12.5px}
  #noteTabs .dc-tab.active{margin-bottom:-2px}
  #noteTabs .dc-tab.active::before,#noteTabs .dc-tab.active::after{width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M0 17A17 17 0 0 0 17 0L60 0L60 60L0 60Z' fill='%23101013'/%3E%3Cpath d='M0 17A17 17 0 0 0 17 0' fill='none' stroke='%23f6d34b' stroke-width='2'/%3E%3C/svg%3E")}
  #noteTabs .dc-tab.active::before{left:-18px}
  #noteTabs .dc-tab.active::after{right:-18px}
  #noteCard.fin-card{padding:20px 20px 24px}
}
@media(min-width:1024px){#noteCard.fin-card{padding:24px 28px 28px;border-radius:20px}#noteTabs.dc-tabs{gap:10px}}
@media(min-width:1280px){#noteTabs.dc-tabs{gap:12px}#noteTabs .dc-tab{gap:7px;padding:15px 10px 13px;border-radius:15px}#noteTabs .dc-tab .dc-tab-ic{width:30px;height:30px}#noteTabs .dc-tab .dc-tab-lb{font-size:14px}#noteTabs .dc-tab.active{border-radius:16px 16px 0 0;margin-bottom:-2px}}
@media(max-width:520px){#noteTabs.dc-tabs{gap:6px}#noteTabs .dc-tab .dc-tab-ic{width:20px;height:20px}#noteTabs .dc-tab .dc-tab-lb{font-size:10.5px}}
/* isi di dalam card: panel tidak perlu jarak ekstra di atas */
#noteCard>.note-panel>.note-toolbar:first-child{margin-top:0}
#noteCard .note-section-card:last-child{margin-bottom:0}

/* ---- V142: Catatan > Keuangan: diagram donat (Perkembangan & Tabungan), card mendekati persegi, riwayat tabungan di bawahnya ---- */
.note-donut-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
.note-donut-row .note-section-card.note-donut-card{margin:0;padding:12px;align-self:stretch;display:flow-root;min-width:0;width:100%}
.note-donut-card::before{content:"";float:left;width:0;padding-top:100%}
.note-donut-card .note-card-head{margin-bottom:8px}
.note-donut{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.donut-wrap{position:relative;width:min(68%,168px);aspect-ratio:1/1;margin:0 auto}
.donut-svg{display:block;width:100%;height:100%}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.15;padding:0 18%}
.donut-center b{font-size:13px;font-weight:800;color:#f7f7f7;white-space:nowrap;max-width:100%}
.donut-center b.expense{color:#ff9292}
.donut-center small{font-size:9.5px;color:#777;font-weight:700}
.donut-legend{display:grid;gap:4px;margin-top:8px}
.dl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;font-size:10.5px;min-width:0}
.dl-row i{width:8px;height:8px;border-radius:50%;display:block}
.dl-row em{font-style:normal;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-row b{font-weight:800;color:#f7f7f7;white-space:nowrap}
.note-saving-pick{display:block;width:100%;margin:8px 0 0;padding:4px 22px 4px 9px;border:1px solid #2a2a31;border-radius:10px;background:#17171b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23f6d34b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;-webkit-appearance:none;appearance:none;color:#f6d34b;font:800 11px 'Plus Jakarta Sans',system-ui,sans-serif;text-overflow:ellipsis;cursor:pointer}
.note-saving-pick:focus-visible{outline:2px solid #f6d34b;outline-offset:1px}
.note-saving-name{margin-top:8px;text-align:center;font-size:12px;font-weight:800;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut-sub{display:none;flex-direction:column;align-items:center;gap:1px;margin-top:7px;text-align:center;min-width:0}
.donut-sub.keep{display:flex}
.donut-center small.ds{font-size:8.5px;margin-top:2px;white-space:nowrap}
.donut-sub b{font-size:12px;font-weight:800;color:#f7f7f7;white-space:nowrap}
.donut-sub span{font-size:10px;color:#777;white-space:nowrap}
.note-saving-history-card .note-card-head{margin-bottom:10px}
@media(min-width:521px){
  .note-donut-row{gap:14px}
  .donut-sub{display:flex}.donut-center small.ds{display:none}
  .donut-wrap{width:min(72%,168px)}
  .note-donut-row .note-section-card.note-donut-card{padding:16px}
  .donut-center b{font-size:15px}.donut-center small{font-size:10.5px}
  .dl-row{font-size:11.5px}.donut-sub b{font-size:13.5px}.donut-sub span{font-size:11px}
  .note-saving-pick{font-size:12.5px}
}
@media(min-width:768px){
  .note-panel>.note-donut-row{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:18px;margin:0}
  .note-panel>.note-saving-history-card{grid-column:1/-1}
  .note-donut-row .note-section-card.note-donut-card{padding:20px}
  .donut-center b{font-size:18px}
  .dl-row{font-size:12.5px}.donut-sub b{font-size:15px}
}

/* Sedekah piutang (ikhlaskan sisa piutang) */
.dpf-sedekah{margin-top:10px}
.dpf-sedekah-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;height:46px;border-radius:13px;border:1px dashed rgba(142,229,162,.45);background:rgba(142,229,162,.07);color:#8ee5a2;font-family:inherit;cursor:pointer;padding:0 8px}
.dpf-sedekah-btn span{font-size:14px;font-weight:800;line-height:1.2}
.dpf-sedekah-btn small{font-size:11px;font-weight:700;opacity:.8;line-height:1.2}
.dpf-sedekah-btn.is-open{background:rgba(142,229,162,.14);border-style:solid}
.dpf-sedekah-info{margin-top:8px;padding:12px;border-radius:13px;background:rgba(142,229,162,.06);border:1px solid rgba(142,229,162,.18)}
.dpf-sedekah-info p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:#cfd3d6}
.dpf-sedekah-info b{color:#f3f3f3}
.dpf-sedekah-confirm{width:100%;height:42px;border-radius:12px;border:0;background:#8ee5a2;color:#0e1a12;font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer}
.dpf-sedekah-confirm:disabled,.dpf-sedekah-btn:disabled{opacity:.55}
.debt-history .dh-pay.is-sedekah .dh-kind{color:#8ee5a2}
.debt-history .dh-pay.is-sedekah .tx-actions{margin-left:6px}
.nt-sedekah{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 7px;border-radius:99px;color:#8ee5a2;border:1px solid rgba(142,229,162,.4);background:transparent;line-height:1.4}

/* Tombol pintas Keuangan -> Catatan */
.goto-note{display:inline-flex;align-items:center;gap:6px;margin:2px 0 8px;padding:7px 12px;border-radius:99px;border:1px solid rgba(246,211,75,.35);background:rgba(246,211,75,.07);color:#f6d34b;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.goto-note svg{width:14px;height:14px}
.goto-note:active{background:rgba(246,211,75,.16)}
.note-flash{animation:noteFlash 1.8s ease-out}
@keyframes noteFlash{0%,35%{box-shadow:0 0 0 2px rgba(246,211,75,.7)}100%{box-shadow:0 0 0 2px rgba(246,211,75,0)}}

/* ---- V150: chip e-wallet bisa diketuk (tampilkan saldo); kartu beranda bisa diketuk tanpa mengubah tampilan ---- */
.acct-chip.acct-chip-btn{font:inherit;font-size:11.5px;font-weight:700;color:#d8d8de;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left}
.acct-chip-btn .acct-chip-bal{margin-left:2px;padding-left:7px;border-left:1px solid rgba(255,255,255,.14);color:#f6d34b;font-weight:800;white-space:nowrap}
.acct-chip-btn.is-open{border-color:rgba(246,211,75,.45)}
.acct-chip-btn:focus-visible{outline:2px solid #f6d34b;outline-offset:2px}
.home-link{cursor:pointer;-webkit-tap-highlight-color:transparent}
.home-link:focus-visible{outline:2px solid #f6d34b;outline-offset:3px}

/* ---- V152: animasi mengetik pada tulisan di bawah orb (beranda) ---- */
.home-tagline{position:relative}
.tw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tw-line{display:block}
.tw-rest{visibility:hidden}
.tw-cur{display:inline-block;width:0;height:1em;position:relative;vertical-align:text-bottom}
.tw-cur::after{content:"";position:absolute;left:1px;top:.08em;bottom:-.04em;width:2px;border-radius:1px;background:currentColor;animation:twblink 1s steps(1) infinite}
@keyframes twblink{50%{opacity:0}}
.home-tagline.tw-idle .tw-cur{display:none}

/* ---- V154: Catatan > Keuangan: Tabungan menyambung ke Riwayat tabungan (sudut lengkung, tidak lancip) + ukuran kartu donat di desktop ---- */
.note-savings-block{margin:10px 0;min-width:0}
.note-savings-block>.note-donut-row{--jr:10px;gap:var(--jr);margin:0}
.donut-side{display:contents}
/* Perkembangan berhenti sedikit lebih pendek; Tabungan turun terus menyentuh Riwayat tabungan */
.note-savings-block #noteFlowCard.note-donut-card{margin:0 0 var(--jr)}
.note-savings-block #noteSavingCard.note-donut-card{position:relative;z-index:2;margin:0 0 -1px;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
/* sudut dalam melengkung di sisi kiri sambungan */
.note-savings-block #noteSavingCard.note-donut-card::after{content:"";position:absolute;z-index:3;left:calc(var(--jr) * -1);bottom:0;width:var(--jr);height:var(--jr);pointer-events:none;background:radial-gradient(circle at 0 0,transparent calc(var(--jr) - 1px),#27272e calc(var(--jr) - 1px),#27272e var(--jr),#151519 var(--jr))}
.note-savings-block>.note-saving-history-card{position:relative;margin:0;border-top-right-radius:0}
@media(min-width:521px){.note-savings-block>.note-donut-row{--jr:14px}}
@media(min-width:768px){
  .note-panel>.note-savings-block{grid-column:1/-1;margin:0}
  .note-savings-block>.note-donut-row{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;--jr:12px}
}
@media(min-width:1024px){
  .note-savings-block>.note-donut-row{--jr:18px}
  /* desktop: kartu mengikuti lebar kolom seperti kartu di atasnya; donat di kiri, keterangan di kanan */
  .note-donut-card::before{display:none}
  .note-donut-row .note-section-card.note-donut-card{padding:22px 24px 24px;display:flex;flex-direction:column}
  .note-donut-card .note-card-head{margin-bottom:14px}
  .note-donut{flex:1;flex-direction:row;align-items:center;justify-content:center;gap:26px}
  .donut-wrap{width:clamp(130px,40%,190px);flex:none;margin:0}
  .donut-side{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;gap:12px}
  .donut-center b{font-size:20px}.donut-center small{font-size:11px}
  .donut-center small.ds{display:none}
  .donut-legend{margin-top:0;gap:12px}
  .dl-row{font-size:13.5px;gap:8px}.dl-row i{width:10px;height:10px}
  .note-saving-pick{margin:0;font-size:13px;padding:8px 28px 8px 12px}
  .note-saving-name{margin:0;text-align:left;font-size:15px}
  .donut-sub{align-items:flex-start;text-align:left;margin-top:0;gap:3px}
  .donut-sub b{font-size:19px}.donut-sub span{font-size:12.5px}
}

/* ---- V155: tulisan di bawah orb lebih ringan (tidak bold, tidak terlalu tipis) ---- */
#home .home-wordmark{font-weight:700}
#home .home-tagline{font-weight:400}

/* ---- V155: orb tampak sedikit membulat (cembung, cahaya dari kiri atas). Lapisan terpisah, jadi animasi glow orb tidak terganggu ---- */
.ai-home-stage .ai-orb-xl::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
  background:
    radial-gradient(34% 22% at 38% 17%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 72%),
    radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.50) 0%,rgba(255,250,220,.20) 22%,rgba(255,255,255,0) 46%),
    radial-gradient(100% 100% at 72% 82%,rgba(120,78,0,.30) 0%,rgba(120,78,0,0) 58%);
  box-shadow:
    inset 0 1.5px 2px rgba(255,255,255,.65),
    inset 0 -7px 12px rgba(128,82,0,.36),
    inset 5px 0 9px rgba(255,255,255,.10),
    inset -5px -2px 10px rgba(128,82,0,.16);
  transition:filter .15s ease;
}
.ai-center:active .ai-orb-xl::after{filter:brightness(.9)}

/* ---- V155: efek ketuk pada kartu beranda (saldo, habit, tabungan) ---- */
.home-link{position:relative;overflow:hidden;transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s ease}
.home-link::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(246,211,75,.10);opacity:0;pointer-events:none;transition:opacity .16s ease}
.home-link.is-pressed{transform:scale(.965);box-shadow:0 0 0 1px rgba(246,211,75,.42),0 0 22px rgba(246,211,75,.14)}
.home-link.is-pressed::after{opacity:1}
.home-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:3;transform:translate(-50%,-50%) scale(0);opacity:1;
  background:radial-gradient(circle,rgba(246,211,75,.42) 0%,rgba(246,211,75,.18) 42%,rgba(246,211,75,0) 70%);
  animation:homeRipple .6s ease-out forwards}
@keyframes homeRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.home-link,.home-link::after{transition:none}.home-link.is-pressed{transform:none}.home-ripple{display:none}}

/* ---- V156: rapikan efek ketuk khusus kartu "Habit hari ini" & "Tabungan" di Beranda ----
   Keduanya menyatu dalam satu kartu (today-card) dan saling bersisian tanpa jarak,
   jadi efek tekan TIDAK boleh mengecilkan (scale) elemennya sendiri — itu yang bikin
   celah/garis nongol sesaat di batas sambungan keduanya. Sudut dibulatkan hanya pada
   sisi yang memang bersentuhan dengan tepi kartu luar (atas untuk habit, bawah untuk
   tabungan), supaya sorot cahaya saat ditekan menyatu rapi dengan bentuk kartu. */
.today-summary.home-link{border-radius:14px 14px 0 0}
.savings-progress.home-link{border-radius:0 0 14px 14px}
.today-summary.home-link.is-pressed,
.savings-progress.home-link.is-pressed{
  transform:none;
  box-shadow:inset 0 0 0 1px rgba(246,211,75,.38), inset 0 0 20px rgba(246,211,75,.12);
}

/* ---- V159: sapaan "Selamat datang" + nama (lebih tebal) ---- */
.tw-vis{display:block;margin:0 auto;overflow-wrap:anywhere}
.tw-vis.tw-nowrap{white-space:nowrap}
.tw-b{font-weight:800}
.side-user .su-row{cursor:pointer}
.side-user .su-row:focus-visible{outline:2px solid #f6d34b;outline-offset:2px;border-radius:10px}
.side-user .su-info small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- V166: kartu habit — kuning 3D menonjol -> dicentang: kuning gelap cekung (tertekan), animasi halus ---- */
@property --hc1{syntax:"<color>";inherits:false;initial-value:#fde98c}
@property --hc2{syntax:"<color>";inherits:false;initial-value:#f6d34b}
@property --hc3{syntax:"<color>";inherits:false;initial-value:#e8bc2b}
#habitList .habit-card{margin:8px 0 14px}
#habitList .habit-card .listitem.habit{
  --hc1:#fde98c;--hc2:#f6d34b;--hc3:#e8bc2b;
  position:relative;isolation:isolate;border:1px solid #d9b02a;border-radius:16px;padding:15px 14px;color:#1a1403;
  background:linear-gradient(180deg,var(--hc1) 0%,var(--hc2) 48%,var(--hc3) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 7px rgba(150,98,0,.30),inset 0 9px 14px rgba(40,24,0,0),0 4px 0 #b08512,0 11px 18px rgba(0,0,0,.5);
  transform:translateY(0);
  transition:transform .34s cubic-bezier(.3,1.45,.5,1),box-shadow .34s cubic-bezier(.3,1.2,.5,1),--hc1 .3s ease,--hc2 .3s ease,--hc3 .3s ease,border-color .3s ease;
  -webkit-tap-highlight-color:transparent;will-change:transform;
}
#habitList .habit-card .listitem.habit:hover{border-color:#d9b02a}
#habitList .habit-card .listitem.habit .habit-toggle{color:inherit;position:relative;z-index:1;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;transition:none}
#habitList .habit-card .listitem.habit .habit-toggle:active{transform:none;opacity:1}
#habitList .habit-card .listitem.habit .habit-toggle b{font-weight:800;color:#1a1403;transition:color .3s ease}
#habitList .habit-card .listitem.habit .meta{color:rgba(26,20,3,.62);font-weight:600;transition:color .3s ease}
#habitList .habit-card .listitem.habit .check{
  background:rgba(70,48,0,.16);border:1px solid rgba(90,62,0,.38);color:#f6d34b;
  box-shadow:inset 0 2px 4px rgba(90,60,0,.5),0 1px 0 rgba(255,255,255,.5);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
/* ditekan jari: turun cepat */
#habitList .habit-card .listitem.habit:has(.habit-toggle:active){
  transform:translateY(3px);transition-duration:.08s,.08s,.3s,.3s,.3s,.3s;transition-timing-function:ease-out;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 5px rgba(150,98,0,.3),inset 0 9px 14px rgba(40,24,0,.08),0 1px 0 #b08512,0 4px 9px rgba(0,0,0,.45);
}
/* sudah dicentang: kuning lebih gelap & cekung masuk ke dalam */
#habitList .habit-card .listitem.habit.done{
  --hc1:#8a6908;--hc2:#a87f10;--hc3:#bd9419;
  border-color:#6b500a;transform:translateY(4px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0),inset 0 -2px 4px rgba(255,226,120,.22),inset 0 9px 14px rgba(40,24,0,.62),0 0 0 #b08512,0 1px 0 rgba(255,255,255,.07);
}
#habitList .habit-card .listitem.habit.done:hover{border-color:#6b500a}
#habitList .habit-card .listitem.habit.done:has(.habit-toggle:active){
  transform:translateY(6px);box-shadow:inset 0 2px 0 rgba(255,255,255,0),inset 0 -2px 4px rgba(255,226,120,.2),inset 0 11px 16px rgba(30,18,0,.7),0 0 0 #b08512,0 1px 0 rgba(255,255,255,.05);
}
#habitList .habit-card .listitem.habit.done .habit-toggle b{color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.55)}
#habitList .habit-card .listitem.habit.done .meta{color:rgba(255,255,255,.88);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}
#habitList .habit-card .listitem.habit.done .check{background:#1d1402;border-color:#1d1402;box-shadow:inset 0 2px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,226,120,.25);font-weight:800}
#habitList .habit-card .listitem.habit .check.pop{animation:habitCheckPop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes habitCheckPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
/* ---- geser kartu ke kiri: slot cekung berisi tombol Ket. ---- */
#habitList .habit-swipe{--sw-w:98px;margin:0;border:0;background:transparent;border-radius:16px;overflow:visible;clip-path:inset(-22px -10px -34px -10px)}
#habitList .habit-swipe .swipe-actions{padding:0 0 0 12px;gap:0;align-items:stretch;right:0}
#habitList .habit-swipe .swipe-btn{
  flex:1;border-radius:16px;gap:5px;font-size:11.5px;letter-spacing:.02em;
  background:linear-gradient(180deg,#1b1a12,#12110b);color:#f6d34b;border:1px solid rgba(246,211,75,.5);
  box-shadow:inset 0 1px 0 rgba(246,211,75,.18),inset 0 -3px 6px rgba(0,0,0,.45);
  opacity:0;transform:scale(.82);transition:opacity .2s ease,transform .26s cubic-bezier(.3,1.5,.5,1),filter .15s ease;
}
#habitList .habit-swipe .swipe-btn svg{width:20px;height:20px}
#habitList .habit-swipe.is-open .swipe-btn,#habitList .habit-swipe.is-dragging .swipe-btn{opacity:1;transform:scale(1)}
#habitList .habit-swipe .swipe-btn:active{transform:scale(.94);filter:brightness(1.15);opacity:1}
#habitList .habit-swipe .swipe-btn.has-note{background:linear-gradient(180deg,#fde98c,#e8bc2b);color:#1a1403;border-color:#d9b02a}
#habitList .habit-front{position:relative;z-index:1;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .3s cubic-bezier(.2,.9,.25,1)}
#habitList .habit-swipe.is-dragging .habit-front{transition:none}
#habitList .habit-front:focus-visible{outline:2px solid #f6d34b;outline-offset:2px;border-radius:16px}
#habitList .habit-front .listitem.habit{margin:0}
/* kotak keterangan */
#habitList .ket-box{margin:12px 2px 0;padding:10px;border:1px solid #2a2a31;border-radius:14px;background:#111114;gap:10px;animation:ketIn .26s cubic-bezier(.2,.9,.25,1)}
#habitList .ket-box textarea{background:#0b0b0d;border-radius:11px;min-height:70px}
@keyframes ketIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.habit-calendar-entry.is-done{border-color:#6b5e1f;background:#1c1a10}
.habit-done-mark{display:inline-grid;place-items:center;width:16px;height:16px;margin-right:7px;border-radius:50%;background:#f6d34b;color:#15130a;font-size:10px;font-weight:900;vertical-align:1px}
.habit-calendar-entry p.habit-calendar-forgot{color:#8a8a94;font-style:italic;margin-top:3px}
.habit-calendar-daynote.is-forgot{border-color:#2a2a31;background:#17171c}
.habit-calendar-daynote.is-forgot strong{color:#c5c5cd}
.habit-calendar-daynote .habit-calendar-forgot{margin:5px 0 0;color:#8a8a94;font-size:11px;font-style:italic}
@media (prefers-reduced-motion:reduce){#habitList .habit-card .listitem.habit,#habitList .habit-front,#habitList .habit-swipe .swipe-btn,#habitList .ket-box{transition:none;animation:none}#habitList .habit-card .listitem.habit .check.pop{animation:none}}

/* CHATAT LANDING WEBSITE */
#landing{max-width:1180px;margin:0 auto;padding:0 24px 40px;overflow:hidden}
.landing-page{min-height:100vh}
.landing-nav{height:76px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;background:rgba(11,11,13,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.045)}
.landing-brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}.landing-brand-mark{width:31px;height:31px;object-fit:contain}.landing-brand .home-wordmark{font-size:22px;font-weight:800;letter-spacing:-.045em}.landing-login{border:1px solid #33333b;background:#151519;color:#fff;border-radius:12px;padding:10px 17px;font:700 13px 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer}
.landing-hero{min-height:690px;display:grid;grid-template-columns:minmax(0,1fr) minmax(370px,520px);gap:58px;align-items:center;padding:68px 4vw 78px;position:relative}.landing-hero:before{content:"";position:absolute;width:560px;height:560px;right:0;top:70px;background:radial-gradient(circle,rgba(246,211,75,.13),transparent 68%);pointer-events:none}.landing-hero-copy{position:relative;z-index:2}.landing-kicker{font-size:10px;font-weight:850;letter-spacing:.17em;color:#f6d34b}.landing-hero h1{font-size:clamp(42px,5.2vw,70px);line-height:1.02;letter-spacing:-.065em;margin:18px 0 24px;max-width:760px}.landing-hero h1 em{font-style:normal;color:#f6d34b}.landing-hero-copy>p{max-width:590px;color:#a3a3ad;font-size:16px;line-height:1.75;margin:0}.landing-actions{display:flex;gap:11px;align-items:center;margin-top:30px;flex-wrap:wrap}.landing-primary{min-height:48px;padding:13px 20px;border-radius:13px;font-size:13.5px}.landing-install{min-height:48px;padding:12px 19px;border-radius:13px;border:1px solid #3a3a42;background:#151519;color:#fff;font:750 13.5px 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer}.landing-note{font-size:11px!important;color:#666!important;margin-top:12px!important}.landing-visual{position:relative;min-height:590px;display:grid;place-items:center}.phone-glow{position:absolute;width:390px;height:520px;background:radial-gradient(ellipse,rgba(246,211,75,.15),transparent 65%);filter:blur(8px)}.mock-phone{position:relative;width:min(330px,76vw);height:625px;border:7px solid #24242a;border-radius:42px;background:#0d0d10;box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px #3a3a40;overflow:hidden;padding:15px 14px 0;transform:rotate(2.2deg)}.mock-status{display:flex;justify-content:space-between;color:#777;font-size:8px;padding:0 8px}.mock-top{height:36px;display:flex;align-items:center;justify-content:space-between;color:#777}.mock-menu{font-size:16px}.mock-wordmark{font-weight:800;font-size:14px;color:#fff}.mock-wordmark span,.mock-chatat span{color:#f6d34b}.mock-dot{width:6px;height:6px;border-radius:50%;background:#f6d34b;box-shadow:0 0 12px #f6d34b}.mock-orb{width:76px;height:76px;border-radius:50%;background:#f6d34b;margin:32px auto 8px;display:grid;place-items:center;box-shadow:0 0 55px rgba(246,211,75,.35)}.mock-orb img{width:50px;height:50px;object-fit:contain}.mock-chatat{text-align:center;font-size:25px;font-weight:850;letter-spacing:-.06em}.mock-tagline{text-align:center;color:#777;font-size:9px;line-height:1.45;margin:6px 0 17px}.mock-balance,.mock-habit{background:#151519;border:1px solid #292930;border-radius:15px;padding:12px;margin-bottom:9px}.mock-balance small,.mock-habit small{color:#777;font-size:8px}.mock-balance>strong{display:block;font-size:18px;margin:3px 0 8px}.mock-balance>div{display:flex;justify-content:space-between;color:#888;font-size:8px;padding:3px 0}.mock-balance>div b{color:#ddd}.mock-habit>div{display:flex;align-items:center;gap:7px;font-size:8px;padding-top:8px}.mock-habit>div b{margin-left:auto;color:#f6d34b}.mock-check{width:17px;height:17px;border-radius:50%;background:#f6d34b;color:#111;display:grid;place-items:center;font-size:9px}.mock-nav{position:absolute;bottom:0;left:0;right:0;height:53px;background:rgba(18,18,21,.97);border-top:1px solid #292930;display:grid;grid-template-columns:repeat(5,1fr);text-align:center;padding-top:7px;color:#aaa;font-size:12px}.mock-nav i{font-style:normal;font-size:6px;color:#666}.mock-nav-active{color:#f6d34b}.landing-intro{text-align:center;max-width:750px;margin:15px auto 46px;padding:35px 20px}.landing-intro h2,.landing-ai-banner h2,.landing-install-section h2,.landing-final h2{font-size:clamp(28px,3.8vw,45px);line-height:1.08;letter-spacing:-.055em;margin:15px 0}.landing-intro p{color:#888;line-height:1.7;font-size:14px}.landing-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.landing-feature-card{min-height:430px;border:1px solid #27272e;background:linear-gradient(145deg,#151519,#101013);border-radius:25px;padding:28px;position:relative;overflow:hidden}.landing-feature-card:after{content:"";position:absolute;width:230px;height:230px;right:-100px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(246,211,75,.12),transparent 68%)}.feature-icon{width:43px;height:43px;border-radius:13px;background:#f6d34b;color:#151515;display:grid;place-items:center;font-weight:850;margin-bottom:22px}.landing-feature-card>span{font-size:10px;color:#666;letter-spacing:.12em}.landing-feature-card h3{font-size:23px;letter-spacing:-.04em;margin:9px 0}.landing-feature-card p{color:#8d8d96;line-height:1.65;font-size:13px;max-width:470px}.mini-screen{background:#0c0c0f;border:1px solid #27272e;border-radius:17px;margin-top:22px;padding:13px;max-width:470px}.mini-title{font-size:11px;font-weight:800;margin-bottom:10px}.mini-tabs{display:flex;gap:5px;margin-bottom:10px}.mini-tabs b{font-size:7px;background:#f6d34b;color:#111;border-radius:7px;padding:6px 7px}.mini-tabs b:not(:first-child){background:#222228;color:#777}.mini-row{display:grid;grid-template-columns:8px 1fr auto;gap:7px;align-items:center;padding:8px 2px;border-top:1px solid #202026;font-size:8px}.mini-row i{width:7px;height:7px;border-radius:50%;background:#8ee5a2}.mini-row:nth-child(3) i{background:#ff9292}.mini-row strong{font-size:8px}.habit-line{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #202026;font-size:9px}.habit-line em{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#f6d34b;color:#111}.habit-line b{margin-left:auto;color:#f6d34b;font-size:8px}.habit-line.off em{border:1px solid #444;background:transparent}.mini-chat{display:grid;gap:8px;margin-top:25px;max-width:430px}.mini-bubble{font-size:9px;line-height:1.5;padding:10px 12px;border-radius:13px;max-width:82%}.mini-bubble.user{justify-self:end;background:#f6d34b;color:#111}.mini-bubble.ai{background:#1b1b20;color:#aaa}.mini-chart{margin-top:25px;border:1px solid #25252c;border-radius:15px;background:#0c0c0f;padding:16px}.chart-bars{height:90px;display:flex;align-items:end;gap:8px;border-bottom:1px solid #27272e}.chart-bars i{display:block;flex:1;min-width:10px;border-radius:5px 5px 0 0;background:#f6d34b;opacity:.75}.mini-chart small{display:block;color:#777;font-size:8px;margin-top:8px}.landing-ai-banner{margin:14px 0 14px;border-radius:25px;border:1px solid #302f25;background:radial-gradient(circle at 20% 50%,rgba(246,211,75,.12),transparent 45%),#121214;padding:45px 7%;display:flex;align-items:center;gap:35px}.banner-orb{width:76px;height:76px;flex:0 0 76px;border-radius:50%;background:#f6d34b;display:grid;place-items:center;box-shadow:0 0 50px rgba(246,211,75,.2)}.banner-orb img{width:50px}.landing-ai-banner h2{margin:8px 0;font-size:38px}.landing-ai-banner p{color:#888;margin:0;line-height:1.6;font-size:13px}.landing-install-section{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:75px 7%;border-bottom:1px solid #222228}.landing-install-section h2{max-width:650px}.landing-install-section p{max-width:650px;color:#888;line-height:1.7;font-size:13px}.install-help{margin:16px auto 0;max-width:700px;border:1px solid #302f25;background:#151519;border-radius:15px;padding:16px;color:#ddd;font-size:12px}.install-help p{color:#888;line-height:1.6;margin:6px 0 0}.landing-final{text-align:center;padding:95px 20px 40px}.landing-final-mark{width:45px}.landing-final p{color:#888;line-height:1.7;font-size:13px;max-width:480px;margin:0 auto 22px}.landing-final small{display:block;color:#555;font-size:10px;margin-top:65px}
@media(max-width:820px){#landing{padding:0 15px 28px}.landing-nav{height:66px}.landing-hero{grid-template-columns:1fr;gap:12px;padding:55px 4px 45px;min-height:auto}.landing-hero h1{font-size:44px}.landing-visual{min-height:590px}.landing-feature-grid{grid-template-columns:1fr}.landing-feature-card{min-height:390px}.landing-ai-banner{align-items:flex-start}.landing-install-section{display:block}.landing-install-section .landing-primary{margin-top:20px}}
@media(max-width:520px){.landing-hero h1{font-size:38px}.landing-hero-copy>p{font-size:14px}.landing-actions{display:grid;grid-template-columns:1fr}.landing-actions button{width:100%}.landing-visual{min-height:545px}.mock-phone{height:555px;width:292px;border-radius:35px}.mock-orb{margin-top:22px;width:67px;height:67px}.mock-orb img{width:44px}.mock-balance{margin-top:4px}.landing-intro{padding:20px 7px;margin-bottom:28px}.landing-intro h2{font-size:29px}.landing-feature-card{padding:23px;border-radius:21px}.landing-ai-banner{display:block;padding:30px}.banner-orb{margin-bottom:22px}.landing-ai-banner h2{font-size:32px}.landing-install-section{padding:55px 3px}.landing-final{padding-top:75px}}

/* V170: geser dengan mouse di laptop: cegah seleksi teks/drag gambar saat menggeser */
.swipe-row{-webkit-user-select:none;user-select:none}
.swipe-row img,.swipe-row svg{-webkit-user-drag:none;user-drag:none}
.swipe-row .swipe-front{cursor:grab}
.swipe-row.is-dragging,.swipe-row.is-dragging *{cursor:grabbing!important}
#habitList .habit-front .habit-toggle{cursor:pointer}
.swipe-row .swipe-btn{cursor:pointer}

/* TUKAR UANG */
.exchange-btn{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;border:1px solid #3a3520;background:#17160f;color:#f6d34b;border-radius:14px;font:750 13.5px 'Plus Jakarta Sans',system-ui,sans-serif}
.exchange-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.exchange-btn:hover{border-color:#f6d34b66}
.ex-swap-row{display:flex;justify-content:center;margin:-4px 0}
.ex-swap{width:38px;height:38px;border-radius:50%;border:1px solid #303038;background:#0e0e11;color:#f6d34b;font-size:17px;line-height:1;padding:0}
.tx-icon.exchange{color:#f6d34b;background:#292515}
.recent-item strong.exchange,.note-tx-amount.exchange{color:#d8d4b8}
#exchangeDialog select:disabled{opacity:.6;cursor:not-allowed}