:root {
    --client-sidebar: #252d38;
    --client-sidebar-dark: #1f2630;
    --client-blue: #1699e8;
    --client-navy: #17125d;
    --client-bg: #f5f7fb;
    --client-border: #e2e7ef;
    --client-text: #263548;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--client-text); background: var(--client-bg); font-family: Inter, "Segoe UI", Arial, sans-serif; }
.client-shell { min-height: 100vh; display: flex; }
.client-sidebar { width: 258px; position: fixed; inset: 0 auto 0 0; z-index: 1040; overflow-y: auto; background: linear-gradient(180deg,var(--client-sidebar),var(--client-sidebar-dark)); color: #fff; transition: transform .25s ease; }
.client-brand { height: 92px; padding: 15px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.client-brand img { width: 100%; max-height: 60px; object-fit: contain; object-position: left center; }
.client-nav { padding: 0 .9rem 1.25rem; }
.client-nav-title { padding: .9rem 1rem .35rem; color: rgba(255,255,255,.58); font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.client-nav a { color: rgba(255,255,255,.74); display: flex; align-items: center; gap: .85rem; text-decoration: none; padding: .72rem .8rem; border-radius: 7px; margin: .15rem 0; transition: .18s ease; }
.client-nav a i { width: 24px; font-size: 1.08rem; }
.client-nav a:hover, .client-nav a.active { color: #fff; background: var(--client-blue); }
.client-main { width: calc(100% - 258px); margin-left: 258px; min-height: 100vh; }
.client-topbar { height: 76px; position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem; padding: 0 1.35rem; background: #fff; border-bottom: 1px solid var(--client-border); }
.client-search { min-width: 300px; align-items: center; gap: .75rem; color: #a0aabc; }
.client-user { display: flex; align-items: center; gap: .65rem; padding-left: .8rem; border-left: 1px solid var(--client-border); }
.client-user small, .client-user strong { display: block; line-height: 1.15; }
.client-user small { color: #9aa4b4; }
.client-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #e9f5fd; color: var(--client-blue); font-weight: 800; }
.client-content { padding: 2rem 1.25rem; max-width: 1500px; margin: 0 auto; }
.client-page-title { font-size: 1.7rem; font-weight: 700; margin: 0; }
.client-card { border: 1px solid var(--client-border); border-radius: 12px; box-shadow: 0 5px 20px rgba(28,45,74,.04); }
.portal-stat { min-height: 172px; border-radius: 2px; padding: 1.6rem; display: flex; align-items: center; gap: 1.25rem; border: 1px solid; background: #fff; }
.portal-stat i { font-size: 3.2rem; }
.portal-stat .value { font-size: 2.45rem; line-height: 1; font-weight: 800; }
.portal-stat .label { font-size: 1.05rem; margin-bottom: .45rem; }
.portal-stat.blue { color:#2a65a5; background:#f2f7fd; border-color:#9cc0ed; }
.portal-stat.orange { color:#d46432; background:#fff5f0; border-color:#ffae8c; }
.portal-stat.purple { color:#6556c9; background:#f5f4ff; border-color:#b9b0ff; }
.portal-stat.green { color:#3b9b55; background:#f5fbf2; border-color:#9ad26a; }
.client-table-wrap { overflow:auto; }
.client-table thead th { white-space:nowrap; color:#fff; background:var(--client-navy); border-color:#29236e; }
.client-table td { vertical-align:middle; }
.status-pill { border-radius: 999px; padding: .35rem .65rem; font-size: .76rem; font-weight:700; display:inline-block; }
.message-bubble { max-width: 82%; border-radius: 14px; padding: .85rem 1rem; margin-bottom: .8rem; white-space: pre-line; }
.message-client { margin-left: auto; background: #eaf6ff; border:1px solid #b9def6; }
.message-admin { margin-right: auto; background:#fff; border:1px solid var(--client-border); }
.credential-box { background:#f6f8fb; border:1px dashed #bcc6d6; border-radius:10px; padding:1rem; }
.client-auth-body { min-height:100vh; background:linear-gradient(135deg,#0c0a39,#17125d 55%,#0d6f8d); }
.client-auth-wrap { min-height:100vh; display:grid; place-items:center; padding:1.25rem; }
.client-auth-card { width:100%; max-width:500px; background:#fff; border-radius:18px; padding:2rem; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.client-auth-logo { width:100%; max-width:280px; height:70px; object-fit:contain; }
.form-control,.form-select { border-radius:9px; padding:.72rem .8rem; }
.btn-client { background:var(--client-navy); color:#fff; border-color:var(--client-navy); }
.btn-client:hover { background:#2a2475; color:#fff; border-color:#2a2475; }
@media(max-width:991.98px){
 .client-sidebar{transform:translateX(-100%)} .client-sidebar.show{transform:translateX(0)}
 .client-main{margin-left:0;width:100%}.client-content{padding:1.25rem .85rem}.client-topbar{padding:0 .8rem}
}
@media(max-width:575.98px){.portal-stat{min-height:135px;padding:1.15rem}.portal-stat i{font-size:2.4rem}.portal-stat .value{font-size:2rem}.client-auth-card{padding:1.4rem}}
.validation-summary-valid{display:none}