:root{
  --ubn-bg:#0f172a;
  --ubn-card:#ffffff;
  --ubn-text:#0f172a;
  --ubn-muted:#64748b;
  --ubn-primary:#0ea5e9;
  --ubn-primary-2:#2563eb;
  --ubn-border:#e2e8f0;
  --ubn-success:#166534;
  --ubn-success-bg:#dcfce7;
  --ubn-error:#991b1b;
  --ubn-error-bg:#fee2e2;
}
*{box-sizing:border-box}
body.ubn-portal-page{margin:0;background:linear-gradient(135deg,#e0f2fe,#eef2ff 55%,#f8fafc);font-family:Inter,Arial,sans-serif}
.ubn-login-wrap{min-height:100vh;display:flex;align-items:stretch;justify-content:center;padding:24px}
.ubn-login-grid{display:grid;grid-template-columns:1fr 1fr;max-width:1380px;width:100%;background:rgba(255,255,255,.48);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.55);border-radius:28px;overflow:hidden;box-shadow:0 25px 60px rgba(15,23,42,.15)}
.ubn-login-form-side{padding:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72)}
.ubn-login-card{width:100%;max-width:560px}
.ubn-badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:12px;font-weight:700;letter-spacing:.08em}
.ubn-login-brand h1{margin:14px 0 8px;font-size:38px;line-height:1.05;color:var(--ubn-text)}
.ubn-login-brand p{margin:0 0 24px;color:var(--ubn-muted);font-size:16px}
.ubn-alert{padding:12px 14px;border-radius:14px;margin:0 0 16px;font-weight:600}
.ubn-alert.success{background:var(--ubn-success-bg);color:var(--ubn-success)}
.ubn-alert.error{background:var(--ubn-error-bg);color:var(--ubn-error)}
.ubn-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.ubn-tab{appearance:none;border:1px solid var(--ubn-border);background:#fff;color:#0f172a;padding:12px 14px;border-radius:14px;font-weight:700;cursor:pointer;transition:.2s ease}
.ubn-tab.is-active{background:linear-gradient(135deg,var(--ubn-primary),var(--ubn-primary-2));color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(37,99,235,.2)}
.ubn-panel{display:none}
.ubn-panel.is-active{display:block}
.ubn-form{display:grid;gap:12px}
.ubn-form label{font-size:14px;font-weight:700;color:#0f172a}
.ubn-form input,.ubn-form select{width:100%;padding:14px 15px;border-radius:14px;border:1px solid var(--ubn-border);background:#fff;font-size:15px;outline:none;transition:border-color .2s, box-shadow .2s}
.ubn-form input:focus,.ubn-form select:focus{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.18)}
.ubn-checkbox{display:flex;align-items:center;gap:10px;color:var(--ubn-muted)!important;font-weight:600!important}
.ubn-checkbox input{width:auto;padding:0}
.ubn-btn{margin-top:8px;appearance:none;border:0;background:linear-gradient(135deg,var(--ubn-primary),var(--ubn-primary-2));color:#fff;border-radius:16px;padding:15px 18px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 18px 34px rgba(37,99,235,.28)}
.ubn-login-visual-side{position:relative;min-height:760px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(circle at top right,#38bdf8,transparent 28%),linear-gradient(135deg,#0f172a,#1e3a8a 55%,#0c4a6e);overflow:hidden}
.ubn-visual-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.2),rgba(15,23,42,.55))}
.ubn-visual-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;width:100%;height:100%;padding:46px;color:#fff}
.ubn-visual-text{display:none;max-width:440px}
.ubn-visual-text.is-active{display:block}
.ubn-role-chip{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ubn-visual-text h2{margin:14px 0 10px;font-size:42px;line-height:1.05}
.ubn-visual-text p{margin:0;color:rgba(255,255,255,.86);font-size:17px;line-height:1.55}
.ubn-visual-image{align-self:center;max-width:min(92%,560px);max-height:54vh;filter:drop-shadow(0 24px 40px rgba(0,0,0,.25))}
.ubn-login-visual-side[data-role-visual="client"] .ubn-visual-image{content:url('../img/client.svg')}
.ubn-login-visual-side[data-role-visual="pr"] .ubn-visual-image{content:url('../img/pr.svg')}
.ubn-login-visual-side[data-role-visual="employee"] .ubn-visual-image{content:url('../img/employee.svg')}
.ubn-login-visual-side[data-role-visual="admin"] .ubn-visual-image{content:url('../img/admin.svg')}
@media (max-width: 1080px){
  .ubn-login-grid{grid-template-columns:1fr}
  .ubn-login-visual-side{min-height:420px;order:-1}
  .ubn-login-form-side{padding:28px}
  .ubn-login-brand h1{font-size:32px}
  .ubn-visual-text h2{font-size:34px}
}
@media (max-width: 640px){
  .ubn-login-wrap{padding:12px}
  .ubn-login-form-side,.ubn-visual-content{padding:20px}
  .ubn-login-grid{border-radius:22px}
  .ubn-tabs{display:grid;grid-template-columns:1fr}
}