:root{--dv-navy:#081321;--dv-blue:#153b6a;--dv-blue-2:#23538c;--dv-gold:#c9a247;--dv-ink:#0e1b2e;--dv-muted:#6c7890;--dv-bg:#f3f6fa;--dv-success:#1d8f63;--dv-danger:#b33a4a;--dv-radius:22px;--dv-shadow:0 18px 45px rgba(7,18,34,.1)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:"Cairo",sans-serif;color:var(--dv-ink);background:radial-gradient(circle at top right,rgba(201,162,71,.12),transparent 24%),linear-gradient(135deg,#eef3f9,#f8fafc)}
a{text-decoration:none}.client-auth-page{display:grid;place-items:center;padding:28px 16px}.auth-shell{width:min(100%,470px);overflow:hidden;border:1px solid rgba(16,34,58,.08);border-radius:30px;background:#fff;box-shadow:0 28px 70px rgba(7,18,34,.16)}
.auth-hero{padding:30px;color:#fff;text-align:center;background:radial-gradient(circle at top right,rgba(201,162,71,.3),transparent 28%),linear-gradient(135deg,var(--dv-navy),var(--dv-blue))}.auth-brand{display:inline-flex;align-items:center;gap:11px;font-size:26px;font-weight:900}.auth-brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;color:#172230;background:linear-gradient(135deg,var(--dv-gold),#f0d898)}.auth-hero p{margin:10px 0 0;color:rgba(255,255,255,.7)}
.auth-body{padding:28px}.form-label{font-weight:800;color:var(--dv-blue)}.form-control,.form-select{min-height:50px;border-radius:15px;border-color:rgba(16,34,58,.14);background:#f9fbfd}.form-control:focus,.form-select:focus{border-color:rgba(21,59,106,.4);box-shadow:0 0 0 .25rem rgba(21,59,106,.08)}.password-wrap{position:relative}.password-wrap .form-control{padding-left:48px}.password-toggle{position:absolute;left:7px;top:7px;width:36px;height:36px;border:0;border-radius:11px;color:var(--dv-blue);background:#eaf0f7}.btn-daimora{min-height:50px;border:0;border-radius:15px;color:#fff!important;font-weight:900;background:linear-gradient(135deg,var(--dv-blue),var(--dv-blue-2));box-shadow:0 14px 28px rgba(21,59,106,.2)}.auth-links{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:13px}.auth-links a{color:var(--dv-blue);font-weight:800}.form-message{display:none;padding:13px 15px;margin-bottom:18px;border-radius:14px;font-size:14px}.form-message.show{display:block}.form-message.success{color:#146b4b;background:#e9f8f1}.form-message.error{color:#8c2635;background:#fff0f2}
.client-sidebar{position:fixed;inset:14px auto 14px 14px;width:285px;z-index:40;padding:20px;overflow-y:auto;border-radius:28px;color:#fff;background:linear-gradient(180deg,#081321,#10213a);box-shadow:0 25px 60px rgba(4,10,20,.28)}.portal-brand{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:22px;color:#fff}.portal-brand strong{font-size:23px}.portal-brand small{display:block;color:rgba(255,255,255,.55)}.portal-nav{display:grid;gap:9px}.portal-nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:15px;color:rgba(255,255,255,.76);font-weight:700}.portal-nav a:hover,.portal-nav a.active{color:#fff;background:rgba(255,255,255,.1)}.portal-nav i{width:24px;text-align:center;color:#f1d48d}.portal-logout{margin-top:22px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
.client-main{min-height:100vh;margin-left:313px;padding:14px}.client-topbar{position:sticky;top:14px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;padding:14px 20px;margin-bottom:20px;border:1px solid rgba(255,255,255,.8);border-radius:25px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);box-shadow:0 12px 30px rgba(7,18,34,.07)}.client-topbar h1{margin:0;font-size:20px;font-weight:900}.client-topbar small{color:var(--dv-muted)}.menu-button{display:none;width:44px;height:44px;border:0;border-radius:13px;color:#fff;background:var(--dv-blue)}.client-avatar{display:flex;align-items:center;gap:11px}.client-avatar span{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--dv-blue),var(--dv-blue-2))}.client-content{padding:4px 2px 30px}.portal-hero{padding:26px;margin-bottom:20px;border-radius:28px;color:#fff;background:radial-gradient(circle at top right,rgba(201,162,71,.28),transparent 22%),linear-gradient(135deg,var(--dv-navy),var(--dv-blue));box-shadow:var(--dv-shadow)}.portal-hero h2{font-weight:900}.portal-hero p{margin:0;color:rgba(255,255,255,.72)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.metric-card,.portal-card{padding:20px;border:1px solid rgba(16,34,58,.08);border-radius:var(--dv-radius);background:linear-gradient(180deg,#fff,#f9fbfd);box-shadow:0 12px 30px rgba(7,18,34,.06)}.metric-card i{display:grid;place-items:center;width:44px;height:44px;margin-bottom:13px;border-radius:14px;color:var(--dv-blue);background:rgba(21,59,106,.08)}.metric-card strong{display:block;font-size:27px;font-weight:900}.metric-card span{color:var(--dv-muted);font-size:13px}.portal-card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.portal-card-title h3{margin:0;font-size:18px;font-weight:900}.portal-list{display:grid;gap:12px}.portal-list-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border-radius:16px;background:#f5f8fb}.portal-list-item strong{display:block}.portal-list-item small{color:var(--dv-muted)}.status-badge{display:inline-flex;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:800}.status-active,.status-paid,.status-in_progress{color:#146b4b;background:#e8f7f0}.status-pending,.status-new,.status-unpaid{color:#755716;background:#fff5d9}.status-expired,.status-cancelled,.status-inactive{color:#8c2635;background:#fff0f2}.status-suspended,.status-processing,.status-partial{color:#174f82;background:#eaf3fc}.table-responsive{border-radius:18px}.portal-table{min-width:760px;margin:0}.portal-table th{padding:13px;color:var(--dv-muted);font-size:12px;border:0;background:#f5f8fb}.portal-table td{padding:14px;border-color:#eef2f6;vertical-align:middle}.empty-state{padding:36px;text-align:center;color:var(--dv-muted)}.empty-state i{display:block;margin-bottom:12px;font-size:35px;color:#b9c4d1}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.detail-item{padding:14px;border-radius:16px;background:#f5f8fb}.detail-item small{display:block;margin-bottom:5px;color:var(--dv-muted)}.detail-item strong{word-break:break-word}.portal-alert{padding:14px 16px;margin-bottom:18px;border-radius:15px}.portal-alert.success{color:#146b4b;background:#e9f8f1}.portal-alert.error{color:#8c2635;background:#fff0f2}
.loading-backdrop{position:fixed;inset:0;z-index:2000;display:none;place-items:center;padding:20px;background:rgba(4,10,20,.6);backdrop-filter:blur(5px)}.loading-backdrop.show{display:grid}.loading-card{width:min(100%,360px);padding:28px;text-align:center;border-radius:24px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.25)}.loading-spinner{width:52px;height:52px;margin:0 auto 16px;border:4px solid rgba(21,59,106,.12);border-top-color:var(--dv-gold);border-radius:50%;animation:portalSpin .8s linear infinite}@keyframes portalSpin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.client-sidebar{transform:translateX(-115%);transition:.25s}.client-sidebar.show{transform:translateX(0)}.client-main{margin-left:0}.menu-button{display:grid;place-items:center}.sidebar-overlay{position:fixed;inset:0;z-index:35;display:none;background:rgba(4,10,20,.52)}.sidebar-overlay.show{display:block}}@media(max-width:600px){.metric-grid,.detail-grid{grid-template-columns:1fr}.client-main{padding:8px}.client-topbar{top:8px;border-radius:20px}.client-avatar div{display:none}.portal-hero{padding:22px}.auth-body{padding:22px}.auth-links{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important}}
body{direction:rtl}.client-sidebar{inset:14px 14px 14px auto}.client-main{margin-right:313px;margin-left:0}.client-avatar>div{text-align:right!important}.portal-modal{border:0;border-radius:24px;overflow:hidden;box-shadow:0 26px 70px rgba(7,18,34,.24)}.portal-modal .modal-header{color:#fff;background:linear-gradient(135deg,var(--dv-navy),var(--dv-blue))}.portal-modal .btn-close{filter:invert(1)}.portal-modal .modal-footer{gap:8px}
@media(max-width:900px){.client-sidebar{transform:translateX(115%)}.client-main{margin-right:0;margin-left:0}}