
:root{--navy:#12344a;--navy-2:#1c5367;--teal:#3aa6a0;--mint:#eaf7f5;--sky:#eef5fa;--ink:#183044;--muted:#6c8190;--line:#e4edf1;--white:#fff;--shadow:0 12px 35px rgba(18,52,74,.08)}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#f5fafb 0%,#eef5f8 100%);color:var(--ink);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;min-height:100vh}aside{width:255px;background:linear-gradient(180deg,var(--navy),#0e293b);color:#fff;padding:25px 17px;display:flex;flex-direction:column;box-shadow:8px 0 28px rgba(18,52,74,.08)}.brand{font-weight:800;font-size:20px;letter-spacing:.5px;margin:0 9px 32px}.brand-logo{display:block;width:92px;height:92px;object-fit:contain;background:#fff;border-radius:18px;padding:5px;margin:0 auto 12px;box-shadow:0 8px 20px #06182633}.brand span{display:block;text-align:center;font-size:10px;letter-spacing:2px;color:#bfe6e2}nav{display:grid;gap:5px}nav a{color:#d9eef0;text-decoration:none;padding:11px 13px;border-radius:11px;transition:.2s}nav a:hover,nav a:focus{background:#ffffff18;color:#fff;transform:translateX(2px)}.user{margin-top:auto;color:#b9d1d7;font-size:12px;border-top:1px solid #ffffff22;padding:17px 10px}.user a{display:block;color:#fff;margin-top:9px}main{flex:1;padding:34px;max-width:1500px}.top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:23px}.top h1{margin:8px 0 0;font-size:30px;line-height:1.15;letter-spacing:-.5px;color:var(--navy)}.back-btn{border:1px solid #d7e6eb;background:#fff;color:var(--navy);border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:700;box-shadow:0 3px 10px #12344a0c;transition:.2s}.back-btn:hover{background:var(--mint);border-color:#9ed7d1}.badge{background:var(--mint);color:#18766f;border-radius:999px;padding:8px 14px;font-weight:800;border:1px solid #c9ebe7}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:24px}.card,.panel{background:rgba(255,255,255,.92);border:1px solid rgba(219,233,238,.9);border-radius:18px;padding:23px;box-shadow:var(--shadow)}.card{position:relative;overflow:hidden}.card:after{content:"";position:absolute;right:-22px;top:-25px;width:90px;height:90px;border-radius:50%;background:#3aa6a010}.card small{color:var(--muted);font-weight:650}.card strong{display:block;font-size:26px;margin-top:10px;color:var(--navy)}.green{border-left:4px solid #34a879}.red{border-left:4px solid #dd6a78}.blue{border-left:4px solid #438bd6}.panel{overflow:auto}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}.panel h2{margin:0;color:var(--navy);font-size:19px}.button,button{background:linear-gradient(135deg,#2f958f,#3aa6a0);color:#fff;border:0;border-radius:10px;padding:10px 15px;text-decoration:none;cursor:pointer;font-weight:750;box-shadow:0 6px 15px #2f958f25;transition:.2s}.button:hover,button:hover{filter:brightness(.96);transform:translateY(-1px)}table{border-collapse:collapse;width:100%;min-width:650px}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)}th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#78909d}tr:hover td{background:#f8fcfc}.pill{padding:4px 9px;border-radius:999px;font-size:11px;font-weight:750}.income,.paid{background:#dcf7eb;color:#087444}.expense,.due{background:#ffe7ea;color:#b4232f}.partial{background:#fff3d6;color:#996400}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}label{display:grid;gap:7px;font-weight:700;margin-bottom:17px;color:#395362}input,select,textarea{border:1px solid #d4e2e8;border-radius:10px;padding:11px 12px;font:inherit;background:#fff;color:var(--ink);outline:none;transition:.2s}input:focus,select:focus,textarea:focus{border-color:#61b9b1;box-shadow:0 0 0 4px #3aa6a018}textarea{resize:vertical}.formpanel{max-width:900px}.login{align-items:center;justify-content:center;background:radial-gradient(circle at 20% 10%,#58b8ae55,transparent 30%),linear-gradient(135deg,#12344a,#287d8b)}.loginbox{background:rgba(255,255,255,.98);border-radius:22px;padding:38px;width:min(430px,92vw);box-shadow:0 25px 70px #06132645}.login-logo{display:block;width:150px;height:150px;object-fit:contain;margin:0 auto 18px}.loginbox h1{color:var(--navy);margin:0;text-align:center;font-size:25px}.loginbox p{text-align:center;color:var(--muted);margin:7px 0 25px}.loginbox button{width:100%;margin-top:8px}.error{background:#ffe7ea;color:#b4232f;padding:10px;border-radius:9px;margin-bottom:15px}.receipt{max-width:760px;margin:40px auto;background:#fff;padding:40px;border-radius:20px;box-shadow:var(--shadow)}.receipt-logo{display:block;width:120px;height:120px;object-fit:contain;margin-bottom:12px}.print{float:right}@media(max-width:820px){body{display:block}aside{width:100%;padding:18px}.brand{margin-bottom:17px}nav{display:flex;overflow:auto;gap:5px}nav a{white-space:nowrap}.user{margin-top:15px}main{padding:20px}.grid{grid-template-columns:1fr}.top h1{font-size:25px}}@media print{.print{display:none}body{background:#fff}}
/* Advanced dashboard and receipt polish */
.welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:4px 0 28px}.eyebrow{font-size:11px;letter-spacing:2px;color:#3a9e98;font-weight:800}.welcome h2{font-size:28px;margin:4px 0;color:#12344a}.welcome p,.muted{color:#78909d;margin:0}.primary-action{padding:13px 18px}.card-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#edf8f6;color:#2f958f;font-weight:900;font-size:19px;float:right}.red .card-icon{background:#fff0f2;color:#d86372}.blue .card-icon{background:#edf4ff;color:#438bd6}.card-note{display:block;color:#91a2ac;font-size:12px;margin-top:8px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:20px;margin-bottom:22px}.chart-period{font-size:12px;color:#56817e;background:#edf8f6;padding:7px 11px;border-radius:999px}.chart-area{height:210px;display:flex;align-items:flex-end;border-bottom:1px solid #dfeaec;background:repeating-linear-gradient(to top,transparent 0,transparent 51px,#edf3f5 52px);padding:0 26px 0 30px}.chart-y{height:190px;display:flex;flex-direction:column;justify-content:space-between;color:#a0b0b7;font-size:11px;margin:0 14px 18px 0}.bar-chart{height:190px;flex:1;display:flex;align-items:flex-end;justify-content:center;gap:65px}.bar-group{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;color:#718793;font-size:12px}.bar{width:56px;min-height:12px;border-radius:13px 13px 4px 4px;position:relative;transition:height .5s ease;box-shadow:0 8px 18px #12344a18}.bar b{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#48606d;font-weight:700}.income-bar{background:linear-gradient(180deg,#56c7bb,#2f958f)}.expense-bar{background:linear-gradient(180deg,#f49aa4,#d86372)}.legend{display:flex;gap:18px;margin-top:15px;color:#718793;font-size:12px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}.income-dot{background:#3aa6a0}.expense-dot{background:#dc6978}.quick-panel{display:flex;flex-direction:column}.quick-link{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #edf2f3;color:var(--ink);text-decoration:none}.quick-link:last-child{border-bottom:0}.quick-link>span{width:35px;height:35px;border-radius:10px;background:#edf8f6;color:#2f958f;display:grid;place-items:center;font-weight:900}.quick-link div{flex:1}.quick-link b,.quick-link small{display:block}.quick-link small{color:#8a9ba4;font-size:12px;margin-top:2px}.quick-link em{font-style:normal;color:#9aadb6;font-size:23px}.text-link{color:#2f958f;text-decoration:none;font-weight:750;font-size:13px}.amount{font-weight:750;color:#234557}.empty{text-align:center;color:#91a2ac;padding:30px}.receipt{border-top:8px solid #2f958f}.receipt h1{letter-spacing:.5px}.receipt .line{padding:15px 0}.receipt .line:last-of-type{background:#edf8f6;border-radius:10px;padding:15px;margin-top:10px}.receipt button{background:#12344a}.receipt p{color:#718793}.receipt-logo{background:#fff;border-radius:14px;padding:4px;box-shadow:0 5px 16px #12344a12}@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}}@media(max-width:620px){.welcome{align-items:flex-start;flex-direction:column}.bar-chart{gap:35px}.bar{width:44px}.chart-area{padding-right:10px}.welcome h2{font-size:24px}}
