*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--navy: #1A237E;--navy-deep: #0C102D;--navy-mid: #283593;--bg: #F8F9FF;--ink: #1a1a2e;--muted: #6b7280;--line: #e5e7eb;--ok: #15803d;--bad: #b91c1c}body{font-family:Inter,system-ui,sans-serif;font-size:14px;color:var(--ink);background:var(--bg);line-height:1.5}button,input,select,textarea{font:inherit}a{color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:248px;flex-shrink:0;background:linear-gradient(180deg,#1a237e,#0c102d);color:#c9d1d9;display:flex;flex-direction:column}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 18px;color:#fff;font-weight:700;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-nav{flex:1;padding:12px 0;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 18px;color:#a5b4fc;text-decoration:none;font-size:13.5px;border-left:3px solid transparent}.nav-item:hover{background:#ffffff0f;color:#fff}.nav-item.active{background:#ffffff1a;color:#fff;border-left-color:#c7d2fe}.nav-group{padding:14px 18px 6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#818cf8}.sidebar-footer{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08)}.admin-info{display:flex;align-items:center;gap:10px;margin-bottom:10px}.admin-avatar{width:32px;height:32px;border-radius:50%;background:#6366f1;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}.admin-name{font-size:13px;font-weight:500;color:#fff}.admin-phone{font-size:11px;color:#a5b4fc}.btn-logout{width:100%;padding:7px 12px;background:#f851491f;color:#fca5a5;border:1px solid rgba(248,81,73,.3);border-radius:6px;cursor:pointer}.main-content{flex:1;overflow-y:auto;padding:28px 32px}.page{max-width:1100px}.page-header{display:flex;justify-content:space-between;gap:14px;margin-bottom:24px;flex-wrap:wrap}.page-header h2{font-size:22px;font-weight:700;color:var(--navy)}.page-header p{font-size:13px;color:var(--muted);margin-top:2px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.stat-card,.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}.stat-card.clickable,.clickable{cursor:pointer;transition:box-shadow .15s,transform .15s}.stat-card.clickable:hover,.clickable:hover{box-shadow:0 8px 20px #1a237e1f;transform:translateY(-1px)}.stat-value{font-size:24px;font-weight:700;color:var(--navy)}.stat-label{font-size:12px;color:var(--muted)}.card-title{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}.cell-primary{font-weight:600}.cell-secondary{font-size:12px;color:var(--muted);margin-top:2px}.empty,.empty-state,.loading{text-align:center;color:#9ca3af;padding:28px}.toolbar{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}.search-input,select,textarea,.field{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;outline:none;background:#fff}.search-input:focus,select:focus,textarea:focus,.field:focus{border-color:var(--navy);box-shadow:0 0 0 3px #1a237e1a}label{font-size:13px;font-weight:600;color:#374151;display:block;margin-bottom:6px}.form-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}.span-2{grid-column:1 / -1}.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px}.data-table{width:100%;border-collapse:collapse}.data-table th{text-align:left;padding:10px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:#f9fafb;border-bottom:1px solid var(--line)}.data-table td{padding:12px 14px;border-bottom:1px solid #f3f4f6}.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600}.badge-green{background:#dcfce7;color:var(--ok)}.badge-yellow{background:#fef9c3;color:#a16207}.badge-red{background:#fee2e2;color:var(--bad)}.badge-gray{background:#f3f4f6;color:#6b7280}.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-link,.btn-back{border-radius:8px;cursor:pointer;font-weight:600}.btn-primary{padding:10px 18px;background:var(--navy);color:#fff;border:none}.btn-primary:hover:not(:disabled){background:var(--navy-mid)}.btn-primary:disabled{opacity:.55;cursor:not-allowed}.btn-secondary{padding:10px 18px;background:#fff;color:#374151;border:1px solid #d1d5db}.btn-ghost{padding:8px 12px;background:transparent;color:var(--navy);border:none}.btn-sm{padding:6px 12px;font-size:12.5px}.btn-link{background:none;border:none;color:var(--navy);text-decoration:underline;padding:0}.btn-back{background:none;border:none;color:var(--muted);padding:0}.btn-danger{padding:10px 18px;background:#dc2626;color:#fff;border:none}.btn-full{width:100%}.alert-error,.alert-success,.form-error{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}.alert-error,.form-error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}.alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac}.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1a237e,#0c102d 70%);padding:24px}.login-card{background:#fff;border-radius:16px;padding:40px 36px;width:100%;max-width:400px;box-shadow:0 20px 60px #00000047}.login-logo{text-align:center;margin-bottom:24px}.login-logo h1{font-size:22px;font-weight:700;color:var(--navy);margin-top:10px}.login-logo p{font-size:13px;color:var(--muted);margin-top:4px}.logo-badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(180deg,#283593,#0c102d);color:#fff;font-size:22px;font-weight:700}.logo-badge.sm{width:28px;height:28px;border-radius:8px;font-size:13px}.login-form{display:flex;flex-direction:column;gap:12px}.pin-input{letter-spacing:8px;font-size:22px!important;text-align:center;font-weight:700}.otp-hint{font-size:13px;color:var(--muted);padding:8px 12px;background:#f9fafb;border-radius:8px}.phone-row{display:flex;align-items:center;border:1px solid #d1d5db;border-radius:8px;overflow:hidden}.phone-prefix{padding:10px 12px;background:#f3f4f6;font-weight:700}.phone-row input{border:none;flex:1;padding:10px 12px;outline:none}.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.action-item{text-align:center;cursor:pointer}.action-icon{width:60px;height:60px;margin:0 auto 8px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#283593,#0c102d);color:#fff;font-size:22px;box-shadow:0 6px 14px #1a237e38}.action-item span{display:block;font-size:11px;font-weight:500;white-space:pre-line}.wallet-card{color:#fff;border-radius:16px;padding:22px;min-height:150px;background:linear-gradient(135deg,#0288d1,#01579b);margin-bottom:12px}.wallet-card.red{background:linear-gradient(135deg,#e53935,#7b1113)}.wallet-card.orange{background:linear-gradient(135deg,#ff9800,#5d4037)}.wallet-card.teal{background:linear-gradient(135deg,#009688,#004d40)}.wallet-top{display:flex;justify-content:space-between;font-size:12px;opacity:.9}.wallet-number{font-size:20px;letter-spacing:2px;margin:28px 0 10px;font-weight:600}.wallet-name{font-size:13px}.freq-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px}.freq-item{width:72px;text-align:center;flex-shrink:0;cursor:pointer}.freq-avatar{width:56px;height:56px;border-radius:50%;margin:0 auto 6px;background:#ec4899;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}.freq-avatar img{width:100%;height:100%;object-fit:cover}.ad-banner{background:var(--navy);color:#fff;border-radius:12px;padding:16px 20px;margin-bottom:20px;cursor:pointer}.dotted-card{border:2px dashed #cbd5e1;border-radius:16px;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:#475569;margin-bottom:20px}.upload-box{border:1.5px solid #e5e7eb;background:#f9fafb;border-radius:16px;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.upload-box img{max-height:140px;width:100%;object-fit:cover;border-radius:16px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}.info-box{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}.section-h{font-size:16px;font-weight:700;color:var(--navy);margin:28px 0 14px}.row-between{display:flex;justify-content:space-between;align-items:center;gap:8px}.welcome{color:var(--muted);font-size:12px}@media (max-width: 860px){.app-shell{flex-direction:column}.sidebar{width:100%}.sidebar-nav{display:flex;overflow-x:auto;padding:0}.nav-item{border-left:none;border-bottom:3px solid transparent;white-space:nowrap}.nav-item.active{border-left:none;border-bottom-color:#c7d2fe}.nav-group,.sidebar-footer{display:none}.main-content{padding:18px 16px}.form-grid,.action-grid{grid-template-columns:1fr 1fr}}