@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@600;700;800;900&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Cairo',Tahoma,Arial,sans-serif;color:#12304a;background:#eaf4ff;min-height:100vh}.denim-bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.9),transparent 28%),radial-gradient(circle at 85% 8%,rgba(80,164,230,.26),transparent 30%),linear-gradient(135deg,#f9fcff 0%,#dceefe 42%,#c8e2f7 100%)}.denim-bg:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(35deg,rgba(16,70,119,.035) 0 1px,transparent 1px 8px),repeating-linear-gradient(-35deg,rgba(16,70,119,.028) 0 1px,transparent 1px 8px);opacity:.95}.shell{width:min(1180px,100%);margin:auto;padding:18px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:18px;border:1px solid rgba(35,108,171,.22);border-radius:30px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(229,244,255,.96));box-shadow:0 22px 55px rgba(29,92,146,.16),inset 0 0 0 1px rgba(255,255,255,.8)}.brand{display:flex;align-items:center;gap:16px}.logo-wrap{width:94px;height:94px;border:2px solid rgba(26,100,164,.35);border-radius:28px;background:linear-gradient(135deg,#fff,#d8efff);display:grid;place-items:center;box-shadow:0 15px 30px rgba(28,95,153,.18)}.logo-wrap img{width:80%;height:80%;object-fit:contain;filter:invert(22%) sepia(89%) saturate(1126%) hue-rotate(181deg) brightness(86%) contrast(93%) drop-shadow(0 4px 10px rgba(0,88,160,.2));opacity:1}h1{font-size:clamp(32px,5.5vw,70px);line-height:1;margin:0;font-weight:900;letter-spacing:-1px;color:#174f86;text-shadow:0 3px 0 #ffffff,0 9px 22px rgba(37,108,169,.22)}.brand-line{font-size:18px;color:#9b6726;font-weight:900;margin-top:8px}.clock-card{min-width:178px;text-align:center;border-radius:22px;padding:14px;background:linear-gradient(135deg,#ffffff,#e6f5ff);border:1px solid rgba(41,114,176,.16);box-shadow:inset 0 0 18px rgba(66,155,224,.12),0 10px 24px rgba(39,102,157,.12)}.clock-card strong{display:block;font-size:25px;color:#0f497c}.clock-card span{color:#557189;font-size:13px;font-weight:800}.tabs{display:flex;gap:10px;overflow-x:auto;padding:8px 0 14px}.tab{white-space:nowrap;border:1px solid rgba(35,108,171,.18);background:linear-gradient(135deg,#ffffff,#dff1ff);color:#174f86;border-radius:18px;padding:13px 18px;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 8px 18px rgba(25,85,140,.12)}.tab.active,.tab:hover,.home-tab{background:linear-gradient(135deg,#1b75bc,#26a7df);border-color:#1b75bc;color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.stat{padding:18px;border-radius:24px;background:linear-gradient(145deg,#ffffff,#eaf7ff);border:1px solid rgba(35,108,171,.15);box-shadow:0 14px 35px rgba(31,103,164,.12)}.stat span{color:#5d7890;font-size:14px;font-weight:900}.stat strong{display:block;font-size:30px;margin-top:6px;color:#0f497c}.grid-layout{display:grid;grid-template-columns:360px 1fr;gap:14px}.panel{border-radius:28px;padding:18px;background:rgba(255,255,255,.92);border:1px solid rgba(35,108,171,.14);box-shadow:0 20px 50px rgba(31,103,164,.13)}.panel-title,.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}h2{margin:0;font-size:25px;color:#174f86}.toolbar span,#viewHint{color:#668197;font-weight:800}form{display:grid;gap:12px}label{display:grid;gap:7px;color:#284d69;font-size:15px;font-weight:900}input,select,textarea{width:100%;border:1px solid rgba(35,108,171,.18);border-radius:17px;background:#f9fdff;color:#17324a;padding:14px;font-size:17px;font-family:inherit;outline:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.7)}input:focus,select:focus,textarea:focus{border-color:#2196d3;box-shadow:0 0 0 4px rgba(33,150,211,.13)}button{font-family:inherit}.primary,#refreshBtn,#clearBtn,.action{border:0;border-radius:16px;padding:13px 16px;font-size:16px;font-weight:900;cursor:pointer;color:#fff;background:linear-gradient(135deg,#1b75bc,#28aadc);box-shadow:0 10px 22px rgba(31,117,188,.22)}#clearBtn{background:linear-gradient(135deg,#7d96aa,#5d7184);padding:9px 12px;font-size:14px}.status{min-height:24px;margin:0;font-weight:900}.status.ok{color:#139a57}.status.err{color:#d43c3c}.search-box{display:flex;gap:10px;align-items:center;background:#f8fcff;border:1px solid rgba(35,108,171,.16);border-radius:18px;padding:0 14px;margin-bottom:14px}.search-box input{border:0;background:transparent;box-shadow:none}.content{display:grid;gap:9px}.record{display:grid;grid-template-columns:1.25fr .65fr .65fr 1fr auto;gap:10px;align-items:center;border-radius:18px;padding:13px;background:linear-gradient(135deg,#ffffff,#eaf6ff);border:1px solid rgba(35,108,171,.13);box-shadow:0 8px 18px rgba(31,103,164,.08)}.record strong,.client-row strong{font-size:18px}.muted{color:#668197;font-size:13px;font-weight:800}.note-out{font-size:14px;color:#8b5b1f;background:#fff7e7;border:1px solid rgba(189,128,46,.24);border-radius:12px;padding:8px 10px;line-height:1.5}.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 12px;font-weight:900;background:#e9f4ff;color:#1266a6}.pill.wallet{background:#e7fff3;color:#129656}.pill.instapay{background:#e9f2ff;color:#1b75bc}.actions{display:flex;gap:6px}.icon-btn{border:1px solid rgba(35,108,171,.16);background:#ffffff;color:#174f86;border-radius:13px;padding:9px 10px;cursor:pointer;font-weight:900;box-shadow:0 6px 13px rgba(31,103,164,.09)}.empty{text-align:center;color:#668197;padding:30px;font-weight:900}.clients-list{display:grid;gap:7px}.client-row{display:grid;grid-template-columns:42px 1.2fr .9fr .7fr .7fr .9fr;gap:8px;align-items:center;padding:10px 12px;border-radius:16px;background:linear-gradient(135deg,#fff,#edf8ff);border:1px solid rgba(35,108,171,.13);cursor:pointer;box-shadow:0 6px 14px rgba(31,103,164,.08)}.client-row:hover{transform:translateY(-1px);border-color:#1b75bc}.client-avatar{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#1b75bc,#2eb1e8);color:#fff;display:grid;place-items:center;font-size:22px;border:1px solid rgba(255,255,255,.9)}.full-page{min-height:520px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(35,108,171,.14)}.home-btn{border:0;border-radius:16px;padding:11px 16px;font-size:15px;font-weight:900;cursor:pointer;color:#fff;background:linear-gradient(135deg,#1b75bc,#26a7df);box-shadow:0 8px 18px rgba(31,117,188,.18)}.client-profile{display:grid;gap:12px}.client-head{display:flex;align-items:center;gap:14px}.details-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0}.detail-box{background:#f7fcff;border:1px solid rgba(35,108,171,.14);border-radius:16px;padding:12px}.detail-box span{color:#668197;font-size:13px;font-weight:900}.detail-box strong{display:block;font-size:20px;color:#174f86}.mini-list{display:grid;gap:8px}.mini-item{padding:12px;border-radius:14px;background:#ffffff;border:1px solid rgba(35,108,171,.12);display:grid;grid-template-columns:.7fr .7fr 1fr;gap:10px;align-items:center}.modal[hidden]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}@media(max-width:950px){.topbar{align-items:flex-start}.grid-layout{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.record{grid-template-columns:1fr}.client-row{grid-template-columns:42px 1fr 1fr}.client-row .hide-sm{display:none}.clock-card{min-width:145px}.logo-wrap{width:74px;height:74px}.details-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.shell{padding:10px}.topbar{flex-direction:column}.brand{align-items:flex-start}.stats-grid{grid-template-columns:1fr 1fr}.stat{padding:13px}.stat strong{font-size:23px}.tab{font-size:14px;padding:11px 13px}h1{font-size:34px}.brand-line{font-size:15px}.panel{padding:14px}.details-grid{grid-template-columns:1fr}.mini-item{grid-template-columns:1fr}.client-row{grid-template-columns:36px 1fr}.client-row .hide-xs{display:none}.record{font-size:14px}}