:root{
  --bg:#07111f;--panel:#0d1a2b;--panel2:#111f32;--line:#1e3148;
  --text:#f5f7fb;--muted:#8ea1b8;--blue:#1787ff;--blue2:#0869d8;
  --green:#20c77a;--amber:#ffb020;--danger:#ff5e6c;--shadow:0 24px 70px rgba(0,0,0,.32)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:.14em;font-weight:800;color:#6f8eae}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:
 radial-gradient(circle at 18% 22%,rgba(23,135,255,.23),transparent 32%),
 linear-gradient(135deg,#07111f 0%,#091522 52%,#0b1727 100%)}
.brand-card{display:flex;align-items:center;gap:16px;padding:46px 58px;align-self:start}
.brand-mark{width:64px;height:64px;border-radius:18px;background:linear-gradient(145deg,var(--blue),#0057ba);display:grid;place-items:center;font-weight:900;font-size:22px;box-shadow:0 18px 44px rgba(23,135,255,.28)}
.brand-mark.small{width:42px;height:42px;border-radius:12px;font-size:15px}
.brand-copy,.sidebar-brand>div:last-child{display:flex;flex-direction:column}
.brand-copy strong{font-size:24px}.brand-copy span,.sidebar-brand span{color:var(--muted);font-size:13px}
.login-card{width:min(480px,calc(100% - 40px));align-self:center;justify-self:center;background:rgba(13,26,43,.96);border:1px solid var(--line);border-radius:24px;padding:42px;box-shadow:var(--shadow);margin:40px}
.login-card h1{font-size:34px;margin:10px 0 8px}
.login-card p{line-height:1.55;margin-bottom:28px}
label{display:block;font-size:13px;color:#b8c7d9;margin:17px 0 8px}
input,select{width:100%;background:#081320;border:1px solid #233851;color:white;border-radius:12px;padding:14px 15px;outline:none}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,135,255,.13)}
.password-wrap{position:relative}.password-wrap input{padding-right:70px}
.ghost-icon{position:absolute;right:8px;top:8px;border:0;background:transparent;color:#9db5d0;padding:7px 10px;cursor:pointer}
.primary{width:100%;border:0;border-radius:12px;background:linear-gradient(180deg,var(--blue),var(--blue2));color:white;padding:14px 18px;font-weight:800;cursor:pointer;margin-top:20px}
.primary:hover{filter:brightness(1.08)}
.login-footer{border-top:1px solid var(--line);margin-top:28px;padding-top:20px;text-align:center;color:#6f839a;font-size:12px}
.error{margin-top:14px;padding:11px 12px;border-radius:10px;background:rgba(255,94,108,.1);border:1px solid rgba(255,94,108,.25);color:#ff9ca6;font-size:13px}
.dashboard{min-height:100vh;display:grid;grid-template-columns:238px 1fr}
.sidebar{border-right:1px solid var(--line);background:#081421;padding:24px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar-brand{display:flex;align-items:center;gap:11px;padding:2px 8px 24px}.sidebar-brand strong{font-size:16px}
nav{display:flex;flex-direction:column;gap:5px}
.nav-item,.logout{border:0;background:transparent;color:#8fa7c1;text-align:left;padding:12px 14px;border-radius:10px;cursor:pointer}
.nav-item.active,.nav-item:hover{background:#10243b;color:white}.logout{margin-top:auto;color:#ff8e98}.logout:hover{background:rgba(255,94,108,.08)}
.main{min-width:0}.topbar{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:rgba(7,17,31,.86);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
.topbar h2{margin:2px 0 0;font-size:19px}.top-actions{display:flex;align-items:center;gap:14px}.top-actions select{width:200px;padding:10px 12px}
.user-chip{display:flex;align-items:center;gap:10px;border-left:1px solid var(--line);padding-left:14px}.user-chip>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#163150;color:#8ec4ff;font-weight:900}.user-chip div{display:flex;flex-direction:column}.user-chip small{color:var(--muted)}
#content{padding:32px 34px}.hero-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.hero-row h1{font-size:28px;margin:0 0 6px}
.status-badge{border:1px solid var(--line);background:#0c1a2b;color:#99aec6;border-radius:99px;padding:8px 12px;font-size:12px;font-weight:800}
.status-badge.online{color:#6ee7a8;border-color:rgba(32,199,122,.32);background:rgba(32,199,122,.08)}
.status-badge.offline{color:#ff9ca6;border-color:rgba(255,94,108,.3);background:rgba(255,94,108,.08)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.metric{background:linear-gradient(180deg,#0d1b2d,#0b1727);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,.14)}
.metric span,.metric small{color:var(--muted)}.metric strong{display:block;font-size:27px;margin:9px 0 5px}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.panel{background:#0c192a;border:1px solid var(--line);border-radius:16px;padding:22px}.panel h3{margin:5px 0 0;font-size:17px}
.connection-card{display:flex;align-items:center;gap:14px;background:#091522;border:1px solid #182b40;border-radius:14px;padding:18px;margin-top:18px}.connection-card p{margin:5px 0 0;color:var(--muted);font-size:13px}
.pulse{width:13px;height:13px;border-radius:50%;background:var(--green);box-shadow:0 0 0 7px rgba(32,199,122,.1)}
.snapshot-list{margin-top:16px;display:grid;gap:9px}.snapshot-item{display:flex;justify-content:space-between;padding:11px 12px;background:#091522;border-radius:10px;color:#b7c7d9;font-size:13px}
.banner{margin:18px 34px 0;border-radius:12px;padding:14px 16px}.banner.warning{background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.28);color:#ffd487}.banner button{float:right;background:none;border:0;color:#fff;font-weight:800;cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.66);display:grid;place-items:center;z-index:50;padding:20px}.modal-card{width:min(440px,100%);background:#0d1a2b;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}.modal-card h3{margin:0 0 6px}
@media(max-width:900px){.login-shell{grid-template-columns:1fr}.brand-card{padding:26px 28px}.login-card{margin-top:0}.dashboard{grid-template-columns:74px 1fr}.sidebar{padding:18px 10px}.sidebar-brand>div:last-child,.nav-item{font-size:0}.nav-item:before{font-size:12px;content:attr(data-section)}.metric-grid{grid-template-columns:1fr 1fr}.panel-grid{grid-template-columns:1fr}.topbar{padding:0 18px}#content{padding:24px 18px}.user-chip div{display:none}}
@media(max-width:620px){.login-card{padding:28px}.brand-card{display:none}.login-shell{display:flex;align-items:center}.metric-grid{grid-template-columns:1fr}.top-actions select{width:130px}.hero-row{align-items:flex-start;gap:12px}.dashboard{grid-template-columns:1fr}.sidebar{display:none}.banner{margin:14px 16px 0}}

/* OAS_BACKOFFICE_FUNCTIONAL_V1 */
.bo-table-wrap{overflow:auto;margin-top:14px;border:1px solid var(--line);border-radius:12px}
.bo-table{width:100%;border-collapse:collapse;font-size:13px}
.bo-table th,.bo-table td{padding:11px 12px;border-bottom:1px solid #172a3e;text-align:left;white-space:nowrap}
.bo-table th{color:#8098b2;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:#091522;position:sticky;top:0}
.bo-table td.right,.bo-table th.right{text-align:right}.bo-table tr:last-child td{border-bottom:0}
.bo-table .empty{text-align:center;color:var(--muted);padding:28px}.danger{color:#ff7d89!important}
.big-number{font-size:34px;font-weight:900;margin:20px 0}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-grid span{background:#091522;border-radius:10px;padding:12px;color:var(--muted);font-size:12px}.mini-grid strong{display:block;color:white;font-size:18px;margin-top:6px}
.alerts{display:grid;gap:10px;margin-top:18px}.alerts div{display:flex;justify-content:space-between;background:#091522;border:1px solid #172a3e;border-radius:10px;padding:13px}.wide-panel{margin-top:16px}.pill{display:inline-block;border-radius:99px;padding:4px 8px;font-size:11px}.pill.open{background:rgba(32,199,122,.12);color:#64dfa0}.mt{margin-top:24px!important}