@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#090e1b;--panel:#111a2c;--panel2:#172238;--line:#26344d;--text:#f3f6ff;--muted:#93a1bb;--purple:#7257f5;--blue:#35b6ff;--green:#35d99a;--amber:#f5c64d;--red:#ff6476}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#17203a 0,transparent 40%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:14px}.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;padding:27px 17px;background:linear-gradient(180deg,#151e33,#0e1628);border-right:1px solid #202d45;display:flex;flex-direction:column;z-index:3}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:22px;font-weight:800;padding:0 10px 48px}.brand-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#a58dff;background:#30245f;font-size:25px}.sidebar nav{display:grid;gap:9px}.sidebar nav a,.sidebar-bottom a{display:flex;align-items:center;gap:14px;color:#d4dced;text-decoration:none;padding:14px 16px;border-radius:11px;font-size:15px}.sidebar nav a:first-letter{font-size:20px}.sidebar nav a.active{background:linear-gradient(100deg,#5144bd,#3e368f);color:#fff;box-shadow:0 7px 22px #4535a733}.sidebar nav a:hover,.sidebar-bottom a:hover{background:#ffffff0c}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:18px}.main{margin-left:250px;padding:30px 34px;max-width:1700px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#8291ae;font-weight:700;margin-bottom:8px}h1{font-size:30px;margin:0;font-weight:800;letter-spacing:-1px}h2{font-size:20px;margin:0 0 7px}h3{font-size:16px;margin:0 0 8px}.user-chip{display:flex;align-items:center;gap:10px;color:#dce5f8;background:#151f33;border:1px solid var(--line);border-radius:30px;padding:7px 13px}.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#4c3db2;font-weight:700}.monthbar{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 25px}.month-label{min-width:220px;text-align:center;font-size:17px;font-weight:700;background:#172238;border:1px solid #34425c;border-radius:12px;padding:12px 18px}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;border:1px solid #34425c;background:#172238;color:white;text-decoration:none;font-size:28px}.today-link{color:#9c8aff;text-decoration:none;font-size:12px;margin-left:8px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:25px}.stat{min-height:110px;border-radius:16px;padding:19px;display:flex;align-items:center;gap:15px;border:1px solid}.stat span{display:block;color:#c2cee1;font-size:12px;margin-bottom:8px}.stat strong{font-size:23px;letter-spacing:-.5px}.stat-icon{width:49px;height:49px;border-radius:14px;display:grid;place-items:center;font-size:24px;font-weight:700;flex-shrink:0}.blue{background:linear-gradient(120deg,#142b4b,#12243d);border-color:#23456c}.blue .stat-icon{background:#1d4776;color:#48c3ff}.green{background:linear-gradient(120deg,#103b35,#112c32);border-color:#1a594b}.green .stat-icon{background:#145b4a;color:#42e7ae}.amber{background:linear-gradient(120deg,#3d3219,#302719);border-color:#655022}.amber .stat-icon{background:#624d1d;color:#ffd45d}.red{background:linear-gradient(120deg,#3c202d,#2d1e30);border-color:#633145}.red .stat-icon{background:#632c43;color:#ff8290}.panel{background:linear-gradient(145deg,#121c2e,#0f1727);border:1px solid #26354f;border-radius:17px;padding:22px;margin-bottom:22px;box-shadow:0 12px 35px #0002}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.muted{color:var(--muted);font-size:12px;line-height:1.6;margin:0}.btn{border:0;border-radius:10px;padding:11px 15px;font:600 12px Inter,sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.primary{background:linear-gradient(110deg,#7257f5,#5144d8);color:white;box-shadow:0 6px 18px #5c4be333}.primary:hover{filter:brightness(1.12)}.ghost{background:#1a263b;color:#dce5f5;border:1px solid #34425b}.small{padding:8px 10px;font-size:11px}.pay-btn{background:#213b55;color:#80d5ff;border:1px solid #2e5c7b}.danger-outline{background:#38202b;color:#ff9ba7;border:1px solid #653849}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:780px}th{text-align:left;color:#aab7ce;background:#1b2940;font-size:11px;font-weight:600;padding:13px 14px;white-space:nowrap}th:first-child{border-radius:9px 0 0 9px}th:last-child{border-radius:0 9px 9px 0}td{padding:14px;border-bottom:1px solid #243149;color:#e5ebf7;white-space:nowrap}td strong{font-size:13px}td small{display:block;color:#7888a4;font-size:10px;margin-top:5px}.category{display:inline-block;border-radius:20px;padding:5px 9px;background:#202d45;color:#b4c4df;font-size:10px}.amount{font-weight:700;color:#45dda0}.status{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:20px;font-size:10px;font-weight:700}.paid{color:#4be3ac;background:#124b3d}.pending{color:#f5d05b;background:#514019}.overdue{color:#ff8793;background:#542638}.inline{display:inline}.icon-delete{border:0;background:#40212d;color:#ff8997;border-radius:8px;width:29px;height:29px;font-size:19px;cursor:pointer;margin-left:5px}.empty{text-align:center;padding:48px 15px;color:var(--muted)}.empty h3{color:#e9effb;margin-top:13px}.empty-icon{font-size:35px;color:#8370ff}.footer{padding:12px 3px 25px;color:#75839d;font-size:11px}.footer span{color:#53617a}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.template-card{background:#172238;border:1px solid #2a3954;border-radius:13px;padding:17px}.template-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.template-symbol{font-size:23px;color:#a493ff}.template-card h3{font-size:16px}.template-card p{margin:5px 0}.template-card form{margin-top:14px}.form-panel{max-width:850px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.span2{grid-column:span 2}label{display:grid;gap:7px;color:#b9c6dc;font-size:12px;font-weight:600;margin-bottom:15px}input,select{width:100%;background:#0c1423;border:1px solid #34425b;border-radius:9px;padding:12px;color:#f3f6ff;font:13px Inter,sans-serif;outline:none}input:focus,select:focus{border-color:#816cff;box-shadow:0 0 0 3px #7257f522}.alert{padding:12px 15px;border-radius:10px;margin:0 0 18px;font-size:12px}.alert.success{background:#123d34;border:1px solid #236b56;color:#8af0c5}.alert.error{background:#4a202c;border:1px solid #79384a;color:#ffabb6}.modal-backdrop{position:fixed;inset:0;background:#050914c9;display:none;align-items:center;justify-content:center;padding:20px;z-index:10}.modal-backdrop.show{display:flex}.modal{width:min(100%,430px);background:#141f33;border:1px solid #394966;border-radius:17px;padding:25px;position:relative;box-shadow:0 25px 80px #0008}.modal h2{margin-bottom:8px}.modal form{margin-top:22px}.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:#b6c3d9;font-size:25px;cursor:pointer}.full{width:100%;padding:13px}.auth-bg{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 50% 0%,#25204d 0,transparent 50%),var(--bg)}.auth-card{width:min(100%,440px);background:linear-gradient(145deg,#172238,#101828);border:1px solid #34415d;border-radius:20px;padding:32px;box-shadow:0 25px 80px #0007}.auth-card .brand{padding:0 0 28px;font-size:21px}.auth-card h1{font-size:25px;margin-bottom:8px}.auth-card form{margin-top:25px}.auth-card h3{margin:23px 0 13px;color:#c8d3e7}.tiny{color:#71809b;font-size:10px;line-height:1.6;margin:18px 0 0}.auth-card label{margin-bottom:15px}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.main{padding:25px 22px}}
@media(max-width:760px){.sidebar{position:static;width:auto;height:auto;padding:12px 14px;display:block;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0 4px 12px;font-size:18px}.brand-icon{width:34px;height:34px}.sidebar nav{display:flex;overflow-x:auto;gap:5px}.sidebar nav a{padding:10px 12px;white-space:nowrap;font-size:12px}.sidebar nav a span{display:inline}.sidebar-bottom{display:none}.main{margin:0;padding:20px 14px}.topbar{align-items:flex-start}h1{font-size:25px}.user-chip{font-size:0;padding:5px}.avatar{font-size:12px}.stats{gap:9px}.stat{padding:13px;min-height:90px;gap:10px}.stat-icon{width:38px;height:38px;font-size:18px}.stat strong{font-size:17px}.stat span{font-size:10px}.monthbar{gap:7px}.month-label{min-width:0;flex:1;padding:11px 8px;font-size:13px}.icon-btn{width:38px;height:38px}.today-link{display:none}.panel{padding:15px 12px}.panel-head{align-items:flex-start;flex-direction:column}.panel-head .btn{width:100%}.template-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.table-wrap{margin:0 -3px}.footer{padding-bottom:18px}}