:root{
  --bg:#f5f8fc;--sidebar:#111827;--sidebar2:#1f2937;--blue:#1f8fff;--green:#35c66b;--orange:#ffb020;--red:#ff5d5d;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#f7fbff 0,#eef4fa 100%);font-family:Inter,Segoe UI,Arial,sans-serif;color:#132238}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:280px;background:linear-gradient(180deg,var(--sidebar) 0,var(--sidebar2) 100%);padding:24px 18px;display:flex;flex-direction:column;box-shadow:18px 0 40px rgba(11,18,32,.16)}
.brand-wrap{display:flex;gap:14px;align-items:center;padding:8px 8px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:18px}
.brand-logo{width:64px;height:64px;object-fit:cover;border-radius:16px;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.brand-title{color:#fff;font-size:1.7rem;font-weight:800;line-height:1}
.brand-subtitle{color:#9fb3c8;font-size:.85rem;margin-top:6px}
.menu{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.menu a{color:#d7e0ea;text-decoration:none;padding:14px 16px;border-radius:16px;font-weight:600;display:flex;gap:12px;align-items:center;transition:.18s}
.menu a:hover,.menu a.active{background:linear-gradient(90deg,rgba(37,99,235,.28),rgba(53,198,107,.18));color:#fff;transform:translateX(2px)}
.sidebar-bottom{margin-top:auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:16px;border-radius:18px}
.main-content{flex:1;padding:24px 28px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}
.page-title{font-size:2rem;font-weight:800;margin:0}.page-subtitle{color:#637487}
.top-user{display:flex;gap:10px;flex-wrap:wrap}.pill-soft{background:#fff;border-radius:999px;padding:10px 14px;box-shadow:0 10px 24px rgba(22,34,51,.08);font-weight:700;color:#32465a}
.metrics .metric-card{border:0;border-radius:22px;color:#fff;padding:22px;box-shadow:0 16px 36px rgba(23,32,52,.12);min-height:124px}
.metric-blue{background:linear-gradient(135deg,#1185ff,#36a4ff)}.metric-green{background:linear-gradient(135deg,#25b55b,#53da82)}.metric-orange{background:linear-gradient(135deg,#ffac12,#ffc84d)}.metric-red{background:linear-gradient(135deg,#ff5b5b,#ff7f7f)}
.metric-label{opacity:.92;font-weight:700}.metric-value{font-size:2rem;font-weight:900}.metric-sub{opacity:.9}
.panel{background:#fff;border:0;border-radius:24px;box-shadow:0 16px 38px rgba(31,47,70,.08);padding:22px}
.panel-title{font-size:1.15rem;font-weight:800;margin-bottom:16px}
.table thead th{border:0;background:#f2f6fa;color:#5a6f85;font-size:.88rem}.table>:not(caption)>*>*{padding:14px 16px;vertical-align:middle}
.btn-brand{background:linear-gradient(90deg,#1789ff,#24c26a);border:0;color:#fff;font-weight:700;border-radius:14px;padding:10px 16px}.btn-brand:hover{color:#fff;opacity:.95}
.btn-soft{background:#eef5fb;border:1px solid #d6e3ef;color:#30506d;border-radius:12px}
.form-control,.form-select,.form-control:focus,.form-select:focus{border-radius:14px;padding:.78rem .95rem;border:1px solid #d7e2ed;box-shadow:none}.form-label{font-weight:700;color:#40586f}
.login-page{min-height:100vh;background:radial-gradient(circle at top left,#2d94ff 0,#1a2540 48%,#101827 100%);display:grid;place-items:center;padding:24px}.login-card{max-width:980px;width:100%;background:#fff;border-radius:30px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.login-left{background:linear-gradient(160deg,#12223d 0,#193b67 42%,#23ab66 100%);color:#fff;padding:42px;min-height:100%}.login-left img{width:150px;border-radius:24px;box-shadow:0 20px 34px rgba(0,0,0,.35)}
.login-right{padding:42px}.preview-image{width:100%;border-radius:18px;border:1px solid #e2ebf4}.chart-bars{display:flex;align-items:flex-end;gap:16px;height:240px;padding:18px 12px 0}.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}.bar{width:100%;max-width:72px;border-radius:16px 16px 0 0;background:linear-gradient(180deg,#1f8fff,#53da82);box-shadow:0 10px 18px rgba(31,143,255,.18)}
.kpi-list{display:flex;flex-direction:column;gap:12px}.kpi-item{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;background:#f7fbff;border:1px solid #e4edf6;border-radius:16px}.footer-note{margin-top:24px;color:#6b7c8f;text-align:center;font-size:.92rem}
@media (max-width: 992px){.sidebar{display:none}.main-content{padding:18px}.topbar{flex-direction:column}.login-left{display:none}}


.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.quick-link{display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;text-decoration:none;background:#f7fbff;border:1px solid #e4edf6;color:#19324d;font-weight:700}
.quick-link:hover{background:#eef6ff;color:#19324d}
.quick-link i{font-size:1.2rem}
.mini-stat{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border-radius:18px;background:#f7fbff;border:1px solid #e4edf6}
.mini-label{font-size:.9rem;color:#637487;font-weight:700}
.mini-value{font-size:1.6rem;font-weight:900}
.details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.details-grid>div{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:#f7fbff;border:1px solid #e4edf6}
.details-grid .span-2{grid-column:span 2}
.details-grid strong{color:#45607c;font-size:.9rem}
.mini-tile{background:#f7fbff;border:1px solid #e4edf6;border-radius:18px;padding:18px}
.receipt-page{background:#f2f5f9;padding:30px;font-family:Inter,Segoe UI,Arial,sans-serif}
.receipt-card{max-width:860px;margin:0 auto;background:#fff;border-radius:28px;padding:28px;box-shadow:0 16px 38px rgba(31,47,70,.08)}
.receipt-head{display:flex;gap:18px;align-items:center;border-bottom:1px solid #e5edf6;padding-bottom:18px;margin-bottom:20px}
.receipt-head img{width:84px;height:84px;border-radius:20px;object-fit:cover}
.receipt-head h1{margin:0;font-size:1.8rem}
.receipt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.receipt-grid>div{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:#f7fbff;border:1px solid #e4edf6}
.receipt-grid .full{grid-column:1/-1}
.receipt-note{margin-top:20px;color:#5b6e82}
@media print{.receipt-page{background:#fff;padding:0}.receipt-card{box-shadow:none;border-radius:0}.footer-note,.topbar,.sidebar,.btn,.alert{display:none!important}}

.hero-banner{display:flex;justify-content:space-between;gap:18px;align-items:center;background:linear-gradient(135deg,#10213b,#173d6d 52%,#20a864);color:#fff;padding:26px 28px;border-radius:26px;box-shadow:0 20px 44px rgba(16,33,59,.22)}
.hero-eyebrow{opacity:.85;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:800;margin-bottom:8px}
.hero-title{font-size:2rem;font-weight:900;margin:0 0 8px}
.hero-text{max-width:760px;opacity:.94}
.hero-meta{display:grid;gap:10px;min-width:260px}.hero-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);padding:12px 14px;border-radius:16px;backdrop-filter:blur(4px)}
@media (max-width: 992px){.hero-banner{flex-direction:column;align-items:flex-start}.hero-meta{min-width:0;width:100%}}