:root{
  --fgs-blue:#0056A0;
  --fgs-blue-dark:#00468C;
  --fgs-blue-soft:#eaf3fb;
  --fgs-grey:#f4f6f8;
  --fgs-text:#243447;
  --fgs-muted:#6b7280;
  --fgs-success:#198754;
  --fgs-warning:#f59e0b;
  --fgs-danger:#dc3545;
  --radius-xl:22px;
  --shadow-soft:0 10px 35px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body.portal-body{font-family:Calibri,Arial,sans-serif;color:var(--fgs-text);background:linear-gradient(180deg,#f7fafc 0%,#eef4f9 100%);min-height:100vh}
.portal-shell{min-height:100vh;display:flex;flex-direction:column}
.portal-main{flex:1 1 auto;padding:1.5rem 0 2rem}
.portal-navbar{background:#fff;border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 6px 24px rgba(0,0,0,.04)}
.portal-brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--fgs-text);font-weight:700}
.portal-brand img{height:42px;width:auto}
.portal-brand small{display:block;font-weight:400;color:var(--fgs-muted)}
.portal-card{background:#fff;border:none;border-radius:var(--radius-xl);box-shadow:var(--shadow-soft)}
.portal-card .card-body{padding:1.5rem}
.portal-hero{padding:1.5rem;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--fgs-blue) 0%,#1f78c8 100%);color:#fff;box-shadow:var(--shadow-soft)}
.portal-title{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:700;margin:0}
.portal-subtitle{color:rgba(255,255,255,.88);margin:.5rem 0 0}
.portal-kpi{border-radius:18px;background:#fff;padding:1rem 1.1rem;box-shadow:var(--shadow-soft);height:100%}
.portal-kpi-label{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--fgs-muted)}
.portal-kpi-value{font-size:1.55rem;font-weight:700;color:var(--fgs-blue)}
.page-section-title{font-size:1.15rem;font-weight:700;margin-bottom:.35rem}
.page-section-help{color:var(--fgs-muted);margin-bottom:0}
.form-label{font-weight:600;color:#334155}
.form-control,.form-select{min-height:46px;border-radius:14px;border:1px solid #d7dee6}
.form-control:focus,.form-select:focus{border-color:#7fb5e5;box-shadow:0 0 0 .2rem rgba(0,86,160,.12)}
.btn{border-radius:14px;padding:.75rem 1rem;font-weight:600}
.btn-primary{background:var(--fgs-blue);border-color:var(--fgs-blue)}
.btn-primary:hover{background:var(--fgs-blue-dark);border-color:var(--fgs-blue-dark)}
.btn-light-border{background:#fff;border:1px solid #dbe4ec;color:var(--fgs-text)}
.badge-status{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .8rem;border-radius:999px;font-weight:700;font-size:.78rem}
.badge-status.success{background:rgba(25,135,84,.12);color:#10683e}
.badge-status.warning{background:rgba(245,158,11,.14);color:#9a6700}
.badge-status.danger{background:rgba(220,53,69,.13);color:#9f1d2c}
.badge-status.secondary{background:#eef2f7;color:#4b5563}
.portal-table-wrap{border-radius:18px;overflow:hidden}
.table.portal-table{margin-bottom:0;min-width:980px}
.table.portal-table thead th{background:#f6f9fc;color:#35526e;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid #dde7f1;white-space:nowrap}
.table.portal-table td,.table.portal-table th{vertical-align:middle;padding:.85rem .9rem}
.table.portal-table tbody tr:hover{background:#f8fbfe}
.portal-mobile-cards{display:none}
.invoice-card{border:1px solid #e6edf4;border-radius:18px;padding:1rem;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.invoice-card+.invoice-card{margin-top:.9rem}
.invoice-card h6{font-size:1rem;font-weight:700;margin:0 0 .55rem}
.invoice-meta{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .8rem}
.invoice-meta span{display:block;font-size:.78rem;color:var(--fgs-muted)}
.invoice-meta strong{display:block;font-size:.92rem;color:var(--fgs-text);font-weight:600}
.portal-footer{padding:1.5rem 0;color:var(--fgs-muted);font-size:.92rem}
.portal-footer .card{border:none;border-radius:18px;box-shadow:var(--shadow-soft)}
.auth-wrapper{min-height:100vh;display:flex;align-items:center;padding:2rem 0;background:radial-gradient(circle at top left,#dcecff 0,#eef5fb 45%,#f7fafc 100%)}
.auth-card{border:none;border-radius:28px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.12)}
.auth-side{background:linear-gradient(145deg,var(--fgs-blue) 0%,#0b74c8 100%);color:#fff;padding:2rem}
.auth-side img{max-width:180px;height:auto;margin-bottom:1.25rem}
.auth-form{padding:2rem}
.auth-title{font-size:2rem;font-weight:700;margin-bottom:.35rem}
.auth-help{color:#64748b;margin-bottom:1.5rem}
.privacy-box{background:#f7fafc;border:1px solid #dce6f0;border-radius:16px;padding:1rem}
.privacy-box p:last-child{margin-bottom:0}
.top-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.alert-inline{border-radius:16px;padding:.85rem 1rem;border:1px solid transparent}
.alert-inline.success{background:#edf9f1;color:#166534;border-color:#cdeed6}
.alert-inline.error{background:#fff1f2;color:#9f1239;border-color:#ffd0d7}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{border:1px solid #d7dee6;border-radius:10px;padding:.35rem .6rem;background:#fff}
.dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:10px !important}
.dataTables_wrapper .dt-buttons{margin-bottom:.75rem}
.dataTables_wrapper .dt-button{background:#fff !important;border:1px solid #d7dee6 !important;border-radius:12px !important;color:var(--fgs-text) !important}
.privacy-link{font-weight:600;text-decoration:none}
.privacy-link:hover{text-decoration:underline}
@media (max-width:991.98px){
  .portal-main{padding-top:1rem}
  .portal-hero{margin-bottom:1rem}
}
@media (max-width:767.98px){
  .auth-side{display:none}
  .auth-form{padding:1.35rem}
  .portal-card .card-body{padding:1rem}
  .portal-table-wrap{display:none}
  .portal-mobile-cards{display:block}
  .top-actions .btn{width:100%}
  .invoice-meta{grid-template-columns:1fr}
}