:root{
  --bg:#04121a;
  --card:#0c2a2f;
  --accent:#0199a7;        /* UAM main */
  --accent-2:#2ad5cc;
  --muted:#b5dfe1;
  --muted-2:#98bdbf;
  --text:#eaf8f8;
  --glass: rgba(255,255,255,0.03);
  --ok:#48c774;
  --warn:#ffb020;
  --bad:#ff5c5c;
  --radius:12px;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:linear-gradient(180deg,#02131a 0%,#04121a 100%);color:var(--text);
  display:flex;flex-direction:column;gap:12px;font-size:15px;
}

/* SPLASH */
.splash{position:fixed;left:0;top:0;right:0;bottom:0;background:linear-gradient(180deg,#02121a,#04121a);display:flex;align-items:center;justify-content:center;z-index:9999}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
.logo{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:900;color:#012;box-shadow:0 12px 60px rgba(0,0,0,0.6)}
.splash-text{color:var(--muted)}
.spinner{width:48px;height:8px;border-radius:99px;background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));position:relative;overflow:hidden}
.spinner::after{content:"";position:absolute;left:-20%;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:spin 1.2s linear infinite}
@keyframes spin{to{left:120%}}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:linear-gradient(90deg, rgba(255,255,255,0.01), transparent);border-bottom:1px solid rgba(255,255,255,0.03)}
.brand{display:flex;align-items:center;gap:12px}
.brand-title{font-size:16px;margin:0;color:var(--text)}
.icon-btn{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer}
.top-right{display:flex;align-items:center;gap:10px}

/* user area badge */
.user-area{display:flex;align-items:center;gap:10px}
.user-badge{
  display:flex;flex-direction:column;align-items:flex-end;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);
}
.user-badge .name{font-weight:800;color:var(--text);font-size:13px}
.user-badge .role{font-size:12px;color:var(--muted)}

/* Buttons */
.btn{background:var(--accent);border:0;padding:8px 12px;border-radius:8px;color:#012;cursor:pointer;font-weight:800;box-shadow:0 6px 18px rgba(1,153,167,0.08)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.btn.small{padding:6px 8px;font-size:13px}

/* App layout */
.app{display:flex;flex:1;gap:12px;height:calc(100vh - 140px)}
.sidebar{width:220px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.03)}
.nav{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.nav-item{padding:10px;border-radius:8px;color:var(--muted);cursor:pointer;font-weight:700}
.nav-item:hover{background:rgba(1,153,167,0.04);color:var(--accent)}
.nav-item.active{background:linear-gradient(90deg, rgba(1,153,167,0.06), rgba(1,153,167,0.02));color:var(--accent);font-weight:900}
.sidebar-bottom{margin-top:auto;text-align:center;color:var(--muted)}

/* Main area */
.main{flex:1;overflow:auto;padding:12px}
.view{display:none}
.view.active{display:block}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.small-card{margin-top:12px}
.split{display:flex;gap:14px}
.left{flex:1}
.right{width:340px;display:flex;flex-direction:column;gap:12px}

/* Diagram */
.diagram-wrap{position:relative;height:420px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:8px;padding:12px;overflow:hidden}
.connectors{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.node{position:absolute;width:200px;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.03);box-shadow:0 12px 36px rgba(0,0,0,0.5)}
.node-title{font-weight:900;color:var(--text);font-size:15px}
.node-body{color:var(--muted);font-size:13px;margin-top:6px}
#node-oci{left:28px;top:20px}
#node-vcenter{left:340px;top:36px}
#node-esxi{left:340px;top:220px}
#node-ovd{left:660px;top:180px}
#node-clients{left:980px;top:340px}
.diagram-actions{position:absolute;left:12px;bottom:12px;display:flex;gap:8px}

/* Metrics */
.metrics{display:flex;flex-direction:column;gap:10px}
.metric{display:flex;align-items:center;gap:8px}
.metric span{width:90px;color:var(--muted)}
.bar{flex:1;height:14px;background:rgba(255,255,255,0.03);border-radius:8px;overflow:hidden}
.meter{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s ease}
.val{width:70px;text-align:right;color:var(--muted);font-weight:800}

/* dashboard */
.dash-grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:12px;margin-top:12px}
.dash-card{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:10px;border-radius:8px}
.summary{list-style:none;padding:0;margin:0}
.summary li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,0.02)}

/* tables and forms */
.table{width:100%;border-collapse:collapse;margin-top:8px}
.table th,.table td{padding:8px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.03);color:var(--text)}
.form-inline{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.form-row{display:flex;flex-direction:column;margin-bottom:6px}
.form-row label{font-size:13px;color:var(--muted);margin-bottom:6px}
.form-row input, .form-row select, .auth-right input, .auth-right select{
  padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text);
  outline-color: rgba(1,153,167,0.6);
}
.form-row input::placeholder{color:rgba(255,255,255,0.35)}

/* logs */
.logbox{height:340px;overflow:auto;padding:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:8px;font-family:monospace;font-size:13px;color:#d3eef0}
.log-entry{padding:6px;border-bottom:1px dashed rgba(255,255,255,0.02)}
.muted{color:var(--muted);font-size:13px}

/* AUTH SCREEN (professional) */
.auth-screen{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(2,6,8,0.6), rgba(2,6,8,0.6));z-index:9999}
.auth-screen.hidden{display:none}
.auth-card{display:flex;width:860px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-radius:12px;overflow:hidden;box-shadow:0 30px 120px rgba(0,0,0,0.7)}
.auth-left{background:linear-gradient(135deg,var(--accent),var(--accent-2));padding:28px;color:#012;display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center;width:46%}
.auth-logo{width:72px;height:72px;border-radius:10px;background:rgba(255,255,255,0.95);display:flex;align-items:center;justify-content:center;font-weight:900;color:#023}
.auth-right{padding:20px;display:flex;flex-direction:column;gap:8px;width:54%}

/* focus states for accessibility */
.auth-right input:focus, .auth-right select:focus, .form-row input:focus, .form-row select:focus {
  box-shadow: 0 0 0 4px rgba(1,153,167,0.12);
  border-color: rgba(1,153,167,0.65);
}

/* responsive */
@media (max-width:1024px){
  .app{flex-direction:column}
  .sidebar{width:100%;display:flex;overflow:auto}
  .dash-grid{grid-template-columns:1fr}
  .split{flex-direction:column}
  .right{width:100%}
  .diagram-wrap{height:520px}
  .auth-card{width:94%}
}