:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#0a1a5f;background:#e8e9ee;font-synthesis:none;letter-spacing:0;--navy-950: #0a1a5f;--navy-900: #0a1a5f;--navy-800: #0a1a5f;--blue-700: #1c62d5;--blue-500: #1c62d5;--blue-300: #6b94e8;--silver-400: #7d7c87;--silver-200: #e8e9ee;--ink: #0a1a5f;--muted: #65748e;--hybrid-gradient: linear-gradient(135deg, var(--navy-950) 0%, var(--blue-700) 72%, var(--silver-400) 100%);--surface-gradient: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(232, 233, 238, .96))}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{cursor:pointer}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 78% 24%,rgba(107,148,232,.44),transparent 29%),linear-gradient(135deg,#0a1a5ff5,#1c62d5e0 56%,#7d7c879e),linear-gradient(45deg,var(--navy-950),var(--blue-700))}.login-panel{width:min(440px,100%);background:#ffffffeb;border:1px solid rgba(125,124,135,.6);border-radius:18px;padding:32px;box-shadow:0 24px 70px #0a1a5f66}.brand-lockup{display:flex;gap:14px;align-items:center;margin-bottom:30px}.brand-mark{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;color:#fff;font-weight:800;background:var(--hybrid-gradient)}.brand-lockup h1{margin:0;font-size:30px}.brand-lockup p{margin:4px 0 0;color:#6b7891}.login-form{display:grid;gap:18px}.login-form label{display:grid;gap:8px;color:#2a3a55;font-weight:700}.login-form input,.search-box input{width:100%;border:1px solid #d1d6e0;border-radius:12px;background:#fff;color:#0a1a5f;outline:none}.login-form input{height:48px;padding:0 14px}.login-form input:focus,.search-box input:focus{border-color:var(--blue-700);box-shadow:0 0 0 4px #1c62d52e}.tenant-pill,.form-error{border-radius:12px;padding:11px 12px;font-size:14px}.tenant-pill{color:var(--navy-800);background:#e8e9ee}.form-error{color:#b42318;background:#fff0ed}.primary-button{height:50px;border:0;border-radius:13px;color:#fff;font-weight:800;background:var(--hybrid-gradient);box-shadow:0 12px 28px #0a1a5f57}.primary-button:disabled{opacity:.7}.primary-button.compact{width:fit-content;min-width:118px;height:44px;padding:0 18px;align-self:end}.app-shell{min-height:100vh;display:grid;grid-template-columns:292px 1fr;background:radial-gradient(circle at 82% 18%,rgba(107,148,232,.38),transparent 30%),linear-gradient(135deg,#0a1a5feb,#1c62d5b3 48%,#7d7c8785),var(--silver-200)}.sidebar{position:sticky;top:0;height:100vh;padding:28px 18px;background:linear-gradient(180deg,#0a1a5ff7,#0a1a5ff0 54%,#1c62d5e6);border-right:1px solid rgba(125,124,135,.2);transition:width .18s ease;overflow:hidden auto}.sidebar.collapsed{width:92px}.sidebar-profile{display:flex;gap:14px;align-items:center;min-height:74px;margin-bottom:32px}.avatar,.mini-avatar{display:grid;place-items:center;flex:0 0 auto;overflow:hidden;color:#fff;font-weight:800;background:var(--hybrid-gradient)}.avatar{width:62px;height:62px;border-radius:50%;box-shadow:0 12px 28px #0a1a5f66}.avatar img{width:100%;height:100%;object-fit:cover}.profile-text{display:grid;gap:5px;min-width:0}.profile-text strong,.topbar-user strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-text span,.topbar-user span{color:#7d7c87cc}.profile-text button{width:fit-content;padding:0;border:0;color:#7d7c87;background:transparent;font-weight:700}.collapse-button{position:absolute;top:112px;right:-17px;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--blue-700);box-shadow:0 10px 24px #0a1a5f59}.sidebar.collapsed .collapse-button svg{transform:rotate(180deg)}.menu-label-section{margin:16px 12px 14px;color:#7d7c87;font-weight:800}.menu-list{display:grid;gap:8px}.menu-button{min-height:46px;display:flex;align-items:center;gap:14px;width:100%;border:0;border-radius:12px;padding:0 14px;color:#7d7c87;background:transparent;text-align:left;font-weight:750}.menu-button svg{color:#7d7c87;flex:0 0 auto}.menu-button.active,.menu-button:hover{color:#fff;background:#1c62d538;box-shadow:inset 3px 0 0 var(--blue-300)}.sidebar.collapsed .profile-text,.sidebar.collapsed .menu-label-section,.sidebar.collapsed .menu-button span{display:none}.sidebar.collapsed .menu-button{justify-content:center;padding:0}.main-area{min-width:0}.topbar{position:sticky;top:0;z-index:10;min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 30px 12px 32px;background:#ffffffeb;border-bottom-left-radius:40px;box-shadow:0 14px 36px #0a1a5f26}.search-box{position:relative;width:min(420px,38vw)}.search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#7884a0}.search-box input{height:44px;padding:0 14px 0 42px}.topbar-actions{display:flex;align-items:center;gap:12px}.icon-button,.refresh-button{border:0;background:#fff;color:#2a3a55;box-shadow:0 8px 22px #0a1a5f1f}.icon-button{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center}.icon-button.badge span{position:absolute;top:-4px;right:-3px;min-width:18px;height:18px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#e54b55;font-size:11px;font-weight:800}.refresh-button{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;border-radius:12px;font-weight:800}.spin{animation:spin .9s linear infinite}.topbar-user{display:flex;align-items:center;gap:10px;padding-left:6px}.topbar-user div:last-child{display:grid;gap:2px}.mini-avatar{width:40px;height:40px;border-radius:50%}.page-content{padding:54px 34px 42px}.hero-band{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:26px;padding:34px 38px;min-height:250px;color:#fff;background:radial-gradient(circle at 86% 22%,rgba(107,148,232,.42),transparent 28%),linear-gradient(135deg,#0a1a5ff5,#1c62d5e6 52%,#1c62d5c7 78%,#7d7c87a3),linear-gradient(45deg,rgba(232,233,238,.24),transparent 46%);border:1px solid rgba(125,124,135,.25);border-radius:24px;box-shadow:0 24px 58px #0a1a5f4d}.hero-band h1{margin:0 0 8px;font-size:clamp(30px,4vw,46px);line-height:1.05}.hero-band p{margin:0;color:#7d7c87e6;font-weight:700}.hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.metric-card,.panel{background:#fffffff0;border:1px solid rgba(209,214,224,.6);box-shadow:0 18px 40px #0a1a5f24}.metric-card{min-height:126px;display:grid;gap:9px;padding:22px 24px;border-radius:18px;color:var(--ink)}.metric-card span{color:#7884a0;font-weight:700}.metric-card strong{color:var(--blue-700);font-size:30px;line-height:1}.metric-card p{color:var(--ink);font-size:18px}.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:26px}.quick-card{min-height:118px;border:0;border-radius:16px;padding:22px;display:grid;align-content:space-between;text-align:left;color:#fff;overflow:hidden;box-shadow:0 18px 36px #0a1a5f40}.quick-card span{font-weight:800}.quick-card strong{font-size:22px}.quick-card.deep-blue{background:linear-gradient(135deg,var(--navy-950),var(--navy-800) 58%,#1c62d5)}.quick-card.sky-blue{background:linear-gradient(135deg,var(--navy-900),var(--blue-700) 52%,var(--blue-300))}.quick-card.silver-blue{color:var(--ink);background:linear-gradient(135deg,#dddde4,var(--silver-400) 42%,#6b94e8 100%)}.quick-card.hybrid-blue{background:var(--hybrid-gradient)}.content-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(360px,.7fr);gap:24px}.dashboard-promo-section{display:grid}.panel{border-radius:18px;padding:26px}.wide-panel{min-height:520px}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:18px;border-bottom:1px solid #dde2eb}.panel-header h1,.panel-header h2{margin:0}.panel-header p{margin:8px 0 0;color:#6b7891}.panel-header button{border:1px solid #a8b0c4;border-radius:10px;height:38px;padding:0 14px;color:#1c62d5;background:#fff;font-weight:800}.favorite-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:18px;padding-top:26px}.favorite-menu button{min-height:104px;display:grid;justify-items:center;align-content:center;gap:12px;border:0;border-radius:16px;color:#2a3a55;background:transparent;font-weight:800;text-align:center}.favorite-menu button span{width:60px;height:60px;display:grid;place-items:center;border-radius:16px;color:var(--navy-800);background:linear-gradient(135deg,#eef3f9,var(--silver-400) 56%,var(--blue-300))}.promo-list{display:grid;gap:14px;padding-top:22px}.promo-list.horizontal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(320px,420px);overflow-x:auto;overflow-y:hidden;padding-bottom:10px;scroll-snap-type:x proximity}.promo-list.horizontal .promo-card{min-height:210px;scroll-snap-align:start}.promo-list.three{grid-template-columns:repeat(3,minmax(0,1fr))}.promo-card{min-height:112px;display:grid;align-content:center;gap:8px;padding:18px;border-radius:14px;color:#fff;background:radial-gradient(circle at 90% 10%,rgba(107,148,232,.42),transparent 34%),linear-gradient(135deg,#0a1a5ff5,#125bb0e0 58%,#7d7c87c7);overflow:hidden}.promo-card.tall{min-height:320px}.promo-card img{width:100%;max-height:180px;object-fit:cover;border-radius:10px}.promo-card strong{font-size:20px}.promo-card p{margin:0}.data-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}.data-strip div{min-height:100px;display:grid;gap:10px;padding:20px;border-radius:14px;border:1px solid rgba(125,124,135,.55);background:linear-gradient(135deg,#f9fbff,#e8e9ee)}.data-strip span{color:#7884a0;font-weight:700}.data-strip strong{font-size:22px}.empty-state{margin-top:24px;padding:24px;border-radius:14px;background:#f4f6fb;color:#5a6580}.skeleton-stack{display:grid;gap:14px;margin-top:22px}.skeleton-stack span{height:62px;border-radius:14px;background:linear-gradient(90deg,#dde2eb,#f0f2f8,#dde2eb);background-size:200% 100%;animation:loadingShimmer 1.2s ease-in-out infinite}.record-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:24px}.record-card{min-height:160px;display:grid;gap:16px;padding:22px;border:1px solid #d8dde8;border-radius:16px;background:var(--surface-gradient),#fff}button.record-card{width:100%;color:inherit;font:inherit;text-align:left}.clickable-card{cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.clickable-card:hover,.clickable-card.selected{transform:translateY(-2px);border-color:var(--blue-300);box-shadow:0 18px 38px #0a1a5f2e}.clickable-card.selected{background:linear-gradient(135deg,#f0f7fffa,#e1ebf7fa),#fff}.record-card.large{min-height:230px}.record-card h2,.deduction-card h2,.bank-list h2{margin:0;color:#0a1a5f;font-size:20px}.record-card p{margin:0;color:#6b7891}.field-list{display:grid;gap:10px}.field-list div{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid #dde2eb}.field-list span{color:#6b7891;font-weight:700}.field-list strong{min-width:0;text-align:right;color:#0a1a5f;overflow-wrap:anywhere}.filter-bar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(160px,240px) auto;gap:16px;align-items:end;margin-top:22px;padding:18px;border-radius:16px;background:#f0f2f8}.filter-bar.single{grid-template-columns:minmax(220px,320px)}.filter-bar.limit-filter{grid-template-columns:minmax(150px,220px) minmax(150px,220px) minmax(180px,260px)}.filter-bar label{display:grid;gap:8px;color:#2a3a55;font-weight:800}.filter-bar select,.filter-bar input{height:44px;border:1px solid #d1d6e0;border-radius:12px;padding:0 12px;background:#fff;color:#0a1a5f;outline:none}.filter-bar select:focus,.filter-bar input:focus{border-color:var(--blue-700);box-shadow:0 0 0 4px #1c62d52e}.compact-strip{margin-top:18px}.table-wrap{margin-top:22px;overflow-x:auto}table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px;background:#fff}th,td{padding:15px 16px;border-bottom:1px solid #dde2eb;text-align:left}th{color:#4a5a78;background:#f0f2f8;font-size:13px;text-transform:uppercase}td{color:#0a1a5f}.danger-text{color:#d14343;font-weight:800}.success-text{color:#1c62d5;font-weight:800}.transaction-detail-items{display:grid;gap:4px;margin-top:8px;color:#6b7891;font-size:13px;line-height:1.35}.transaction-detail-items span{display:block}.table-action-button{min-height:34px;border:1px solid #a8b0c4;border-radius:10px;padding:0 12px;color:var(--blue-700);background:#e8eaf2;font-weight:800}.transaction-detail-row td{background:#f4f6fb}.transaction-detail-row p{margin:8px 0 0;color:#6b7891}.nested-table-wrap{margin-top:12px;overflow-x:auto}.nested-table{min-width:640px;border:1px solid #d8dde8;border-radius:12px}.nested-table th,.nested-table td{padding:11px 12px}.nested-table th{background:#e8ebf2}.deduction-card{margin-top:24px;padding:24px;border:1px solid #d8dde8;border-radius:16px;background:#fff}.deduction-card>p{margin:6px 0 18px;color:#6b7891}.deduction-group{display:grid;gap:10px;padding:16px 0;border-top:1px solid #dde2eb}.deduction-group h3{margin:0;color:#1c62d5;font-size:14px}.deduction-group div{display:flex;justify-content:space-between;gap:18px}.deduction-group .subtotal{padding-top:10px;border-top:1px dashed #d1d6e0;font-weight:800}.bank-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.bank-list h2{flex-basis:100%}.bank-list span{padding:9px 12px;border:1px solid #7d7c87;border-radius:999px;color:#1c62d5;background:#eef1f7;font-weight:800}.limit-history-panel{margin-top:26px;padding-top:24px;border-top:1px solid #dde2eb}.profile-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}.avatar.big{width:106px;height:106px;font-size:28px}.profile-page{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:24px}.profile-hero-card{min-height:520px;display:grid;justify-items:center;align-content:start;gap:12px;padding:42px 28px;border-radius:22px;color:#fff;background:radial-gradient(circle at 82% 16%,rgba(107,148,232,.38),transparent 30%),linear-gradient(135deg,#0a1a5ff5,#1c62d5e6 62%,#7d7c87a8),var(--navy-900);box-shadow:0 22px 54px #0a1a5f59}.profile-avatar{width:118px;height:118px;margin-bottom:10px;font-size:30px;border:5px solid rgba(125,124,135,.5)}.profile-hero-card h1{margin:0;font-size:28px;text-align:center}.profile-hero-card p{margin:0 0 12px;color:#7d7c87d9;font-weight:800}.profile-hero-card button,.scanner-header button,.scanner-error button,.scanner-result button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid rgba(125,124,135,.5);border-radius:12px;padding:0 16px;color:#0a1a5f;background:#ffffffeb;font-weight:800}.profile-detail-panel{min-height:520px}.profile-list-web{display:grid;gap:12px;margin-top:22px}.profile-row-web{display:grid;grid-template-columns:34px minmax(150px,.6fr) minmax(0,1fr);align-items:center;gap:14px;min-height:58px;padding:12px 14px;border:1px solid #d8dde8;border-radius:14px;background:#f4f6fb}.profile-row-web svg{color:#1c62d5}.profile-row-web span{color:#4a5a78;font-weight:800}.profile-row-web strong{text-align:right;overflow-wrap:anywhere}.edit-profile-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px;padding-top:22px;border-top:1px solid #dde2eb}.edit-profile-form label{display:grid;gap:8px;color:#2a3a55;font-weight:800}.edit-profile-form label.wide{grid-column:1 / -1}.edit-profile-form input,.edit-profile-form textarea,.edit-profile-form select{width:100%;border:1px solid #d1d6e0;border-radius:12px;padding:11px 12px;color:#0a1a5f;background:#fff;outline:none}.edit-profile-form input:not([type=file]),.edit-profile-form select{height:44px}.edit-profile-form input:focus,.edit-profile-form textarea:focus,.edit-profile-form select:focus{border-color:var(--blue-700);box-shadow:0 0 0 4px #1c62d52e}.edit-profile-form .form-error,.edit-profile-form .success-alert,.edit-profile-form .primary-button{grid-column:1 / -1}.success-alert{border-radius:12px;padding:11px 12px;color:#1c62d5;background:#e8eaf2;font-size:14px;font-weight:800}.coming-soon{display:grid;place-items:center;align-content:center;gap:12px;text-align:center}.coming-soon-icon{width:76px;height:76px;display:grid;place-items:center;border-radius:20px;color:#fff;font-weight:900;font-size:24px;background:var(--hybrid-gradient)}.coming-soon h1{margin:0;font-size:34px}.coming-soon p{margin:0;color:#6b7891;font-weight:800}.scanner-page{min-height:calc(100vh - 160px);display:grid;grid-template-rows:auto 1fr;gap:18px}.scanner-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-radius:18px;background:#fffffff0;box-shadow:0 18px 40px #0a1a5f24}.scanner-header h1{margin:0}.scanner-wrapper-web{position:relative;min-height:560px;overflow:hidden;border-radius:20px;background:#0a1a5f;box-shadow:0 22px 54px #0a1a5f66}.scanner-video-web{width:100%;height:100%;min-height:560px;object-fit:cover}.scanner-overlay-web,.scanner-message,.scanner-error,.scanner-result{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:18px;color:#fff;text-align:center}.scanner-overlay-web{background:linear-gradient(180deg,#00000038,#0000005c)}.scan-frame-web{width:min(320px,64vw);aspect-ratio:1;border:4px solid #7d7c87;border-radius:28px;box-shadow:0 0 0 999px #00000047,0 0 28px #8b9bb480}.scanner-message,.scanner-error,.scanner-result{padding:24px;background:#0a1a5fcc}.scanner-error p,.scanner-result p{max-width:520px;margin:0;overflow-wrap:anywhere}@keyframes spin{to{transform:rotate(360deg)}}@keyframes loadingShimmer{to{background-position:-200% 0}}@media(max-width:1120px){.app-shell{grid-template-columns:92px 1fr}.sidebar{width:92px}.sidebar .profile-text,.sidebar .menu-label-section,.sidebar .menu-button span{display:none}.sidebar .menu-button{justify-content:center;padding:0}.content-grid,.quick-grid{grid-template-columns:1fr 1fr}.topbar-user div:last-child,.search-box{display:none}}@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;width:100%;height:auto;display:block;padding:16px}.sidebar-profile,.collapse-button,.menu-label-section{display:none}.menu-list{grid-auto-flow:column;grid-auto-columns:60px;overflow-x:auto}.topbar{border-radius:0;padding:12px 16px}.refresh-button{width:42px;padding:0;justify-content:center}.refresh-button{font-size:0}.page-content{padding:22px 16px 30px}.hero-band{padding:26px 20px}.hero-metrics,.quick-grid,.content-grid,.data-strip,.filter-bar,.profile-card,.profile-page,.promo-list.three{grid-template-columns:1fr}.field-list div,.deduction-group div{display:grid;gap:4px}.field-list strong,.deduction-group strong{text-align:left}.profile-row-web{grid-template-columns:28px 1fr}.profile-row-web strong{grid-column:2;text-align:left}.edit-profile-form{grid-template-columns:1fr}.scanner-wrapper-web,.scanner-video-web{min-height:460px}}
