:root{
  --ink:#172033;--ink2:#34415a;--paper:#f4f6f9;--card:rgba(255,255,255,.96);--line:#e4e8ef;
  --muted:#748096;--gold:#c48a36;--goldsoft:#f7ead6;--pos:#16815f;--neg:#c34f45;
  --posbg:#e8f5f0;--negbg:#fbeceb;--shadow:0 1px 2px rgba(20,32,51,.04),0 12px 32px rgba(20,32,51,.08);
  --radius:18px;--radius-sm:13px;
}
html{background:#e9edf3}
body{background:linear-gradient(180deg,#f8f9fb 0,#f3f5f8 38%,#eef2f6 100%);box-shadow:0 0 80px rgba(20,32,51,.08)}
#auth{background:radial-gradient(900px 520px at 50% -15%,#35496e 0,#1d2942 48%,#11192b 100%)}
.logo .mk{width:78px;height:78px;border-radius:24px;background:linear-gradient(145deg,#243554,#101a2d);border:1px solid rgba(232,188,116,.72);box-shadow:0 16px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)}
.logo h1{letter-spacing:-.02em}.logo p{color:#b7c1d1}
.authcard{border:1px solid rgba(255,255,255,.72);border-radius:24px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.32),inset 0 1px 0 #fff}
input,select{border-color:#dfe4ec;border-radius:13px;padding:13px 14px;transition:border-color .18s,box-shadow .18s,background .18s}
input:hover,select:hover{border-color:#ccd3df}
input:focus,select:focus{border-color:#c48a36;box-shadow:0 0 0 4px rgba(196,138,54,.13)}
.btn{min-height:46px;border-radius:14px;box-shadow:0 6px 18px rgba(23,32,51,.12);transition:transform .15s,box-shadow .15s,opacity .15s}
.btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(23,32,51,.12)}
.btn.gold{background:linear-gradient(135deg,#d39a47,#b87825)}
.btn.ghost,.btn.danger{box-shadow:none}
header{background:rgba(23,32,51,.94);backdrop-filter:blur(20px) saturate(1.25);-webkit-backdrop-filter:blur(20px) saturate(1.25);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px rgba(15,24,40,.14)}
.brand h1{letter-spacing:-.02em}.rolechip{border-radius:999px;padding:2px 7px;background:#d6a151;color:#172033}
.monthbar button,.bell{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08);transition:background .15s,transform .15s}
.monthbar button:active,.bell:active{background:rgba(255,255,255,.18);transform:scale(.96)}
main{padding:18px 14px 108px}
.hero{border-radius:22px;padding:20px;border-color:#e3e7ee;box-shadow:var(--shadow);background:linear-gradient(145deg,#fff,#fbfcfd)}
.hero .big{font-size:35px;letter-spacing:-1.2px}.hero .lab{letter-spacing:.11em}
.stat,.card,.twrap{border-color:#e3e7ee;box-shadow:var(--shadow)}
.stat{border-radius:17px;padding:14px;background:linear-gradient(145deg,#fff,#fcfdfe)}
.stat .val{font-size:19px;letter-spacing:-.35px}.card{border-radius:17px;padding:15px}.twrap{border-radius:17px}
.section-t{font-size:16px;margin-top:23px;letter-spacing:-.01em}.section-t .n{border-radius:999px;padding:3px 7px}
th{background:#f8fafc;color:#758198;letter-spacing:.035em}th,td{padding:10px 12px}td:first-child{background:#fff}th:first-child{background:#f8fafc}
tr.tot td{background:#fffaf2}tr.uk td{background:#fff7f2}
.chip,.pill,.ntag{border-radius:999px}.paidbtn{border-radius:9px;padding:6px 10px}
.subtabs{gap:8px;padding:1px 1px 3px}.subtabs button{border-color:#dfe4eb;padding:9px 15px;transition:background .15s,color .15s,border-color .15s}.subtabs button.on{background:#172033;border-color:#172033;box-shadow:0 5px 14px rgba(23,32,51,.16)}
.banner{border-radius:14px;background:#fff8ed;border-color:#f0dfc4}
.nitem{padding:13px 4px}.nitem.unread{background:linear-gradient(90deg,#fff9ec,transparent)}
.tabbar{background:rgba(255,255,255,.88);backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);border-top:1px solid rgba(216,222,232,.9);padding-top:7px;box-shadow:0 -10px 32px rgba(24,34,52,.08)}
.tabbar button{min-height:52px;border-radius:13px;transition:background .15s,color .15s,transform .15s}.tabbar button .ic{font-size:21px;line-height:1}.tabbar button.on{color:#b77724;background:rgba(196,138,54,.09)}.tabbar button:active{transform:scale(.97)}
.toast{background:rgba(23,32,51,.94);backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(15,24,40,.22)}
/* Reports 2.0: denser controls, clearer totals, easier horizontal financial scanning. */
.subtabs{scrollbar-width:none;position:relative}.subtabs::-webkit-scrollbar{display:none}.subtabs button{white-space:nowrap;min-height:40px}
.twrap{position:relative;background:#fff;box-shadow:0 1px 2px rgba(20,32,51,.04),0 14px 36px rgba(20,32,51,.07)}
.twrap table{font-size:12px}.twrap th{position:sticky;top:0;z-index:2;background:#f7f9fc;border-bottom:1px solid #dfe4ec;color:#66738a;font-size:10px;letter-spacing:.055em}.twrap th:first-child{z-index:4;background:#f7f9fc}
.twrap td{height:42px}.twrap tbody tr{transition:background .12s}.twrap tbody tr:hover td{background:#fafbfd}.twrap tbody tr:hover td:first-child{background:#fafbfd}
.twrap td.num{font-weight:500;color:#26344c}.twrap tr.tot td{position:sticky;bottom:0;z-index:2;background:#fff7e8;border-top:2px solid #e3bb79;font-weight:700;color:#172033}.twrap tr.tot td:first-child{z-index:3;background:#fff7e8}
.twrap tr.uk td{background:#fff8f4}.twrap tr.uk td:first-child{background:#fff8f4}
.section-t+.grid2 .stat{min-height:86px;display:flex;flex-direction:column;justify-content:center}.section-t+.grid2 .stat .lab{text-transform:uppercase;letter-spacing:.045em;font-size:10px}.section-t+.grid2 .stat .val{font-size:20px;margin-top:6px}
.hint+.twrap{margin-top:12px}.twrap+.addwrap,.twrap+.btn{margin-top:12px}
@media (min-width:681px){body{border-left:1px solid #dde2e9;border-right:1px solid #dde2e9}.tabbar{border-left:1px solid #dde2e9;border-right:1px solid #dde2e9}}
@media (max-width:420px){main{padding-left:11px;padding-right:11px}.hero{padding:17px}.hero .big{font-size:30px}.grid2{gap:8px}.stat{padding:12px}.stat .val{font-size:17px}.row{align-items:flex-start;flex-direction:column;gap:5px}.row label{flex:auto}.tabbar button{font-size:10px}.tabbar button .ic{font-size:19px}.subtabs{margin:0 -11px 14px;padding:2px 11px 5px;gap:7px}.subtabs button{padding:9px 13px;font-size:12px}.section-t{margin-top:17px}.twrap{margin-left:-11px;margin-right:-11px;border-radius:0;border-left:0;border-right:0}.twrap table{font-size:11.5px}.twrap th,.twrap td{padding:9px 10px}.twrap td:first-child,.twrap th:first-child{box-shadow:5px 0 10px rgba(20,32,51,.04)}.section-t+.grid2{grid-template-columns:1fr 1fr}.section-t+.grid2 .stat{min-height:78px}.section-t+.grid2 .stat .val{font-size:16px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}