/* ==========================================================================
   OBECapsule unified login experience (student / employee / admin)
   Shared stylesheet - keep in sync across the three login views.
   ========================================================================== */
:root{
  --ink:#0E1F3C;
  --ink-2:#16305C;
  --ink-soft:#33456B;
  --deep:#08162E;
  --paper:#F5F3EE;
  --paper-line:#E3DECF;
  --accent:#2F7D5C;
  --accent-2:#2BAC76;
  --brick:#C9522F;
  --slate:#5B6472;
  --white:#FFFFFF;
  --radius:12px;
  --shadow:0 24px 60px rgba(8,22,46,.18);
}
#oblogin *{ box-sizing:border-box; }
html,body{ height:100%; overflow:hidden; }
body{
  margin:0;
  background:var(--paper);
  font-family:'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
#oblogin a{ color:inherit; text-decoration:none; }
#oblogin a:focus-visible, #oblogin button:focus-visible,
#oblogin input:focus-visible, #oblogin label:focus-visible{
  outline:2px solid var(--ink-soft); outline-offset:2px;
}

#oblogin{
  height:100vh;
  display:grid;
  grid-template-columns:44% 56%;
  overflow:hidden;
}

/* ================= LEFT / BRAND PANEL ================= */
.ob-brand{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:44px 46px 34px;
  color:#F7F4EC;
  background:
    radial-gradient(1100px 520px at -10% -10%, rgba(46,126,255,.18), transparent 60%),
    radial-gradient(900px 500px at 110% 115%, rgba(43,172,118,.22), transparent 55%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--deep) 78%);
  overflow:hidden;
}
.ob-brand::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 42px, rgba(247,244,236,.045) 43px);
  pointer-events:none;
}
.ob-brand::after{
  content:"";
  position:absolute; right:-60px; bottom:-60px;
  width:360px; height:360px; border-radius:50%;
  background:rgba(43,172,118,.08);
  pointer-events:none;
}
.ob-brand-top{ position:relative; z-index:1; }
.ob-brand-logo{ display:flex; align-items:center; }
.ob-brand-logo img{ width:350px; max-width:100%; height:auto; filter:drop-shadow(0 6px 16px rgba(0,0,0,.25)); }

.ob-brand-copy{ position:relative; z-index:1; max-width:420px; }
.ob-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#B9CDEA; margin-bottom:18px;
}
.ob-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 4px rgba(43,172,118,.25); }
.ob-brand-copy h1{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:600; font-size:34px; line-height:1.22;
  margin:0 0 16px; color:#FFFFFF;
}
.ob-brand-copy .lead{
  font-size:14.5px; line-height:1.7; color:#C7D2E6; margin:0 0 26px; max-width:400px;
}

.ob-benefit{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.ob-benefit li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:13.5px; line-height:1.5; color:#E7EEF9;
}
.ob-benefit .ico{
  flex-shrink:0; width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(247,244,236,.09);
  border:1px solid rgba(247,244,236,.14);
  color:var(--accent-2);
}
.ob-benefit b{ display:block; font-size:13.8px; font-weight:600; color:#fff; margin-bottom:1px; }
.ob-benefit small{ font-size:12.3px; color:#A9B8D2; }

.ob-brand-foot{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:#93A5C4;
  border-top:1px solid rgba(247,244,236,.14);
  padding-top:16px;
}

/* ================= RIGHT / FORM PANEL ================= */
.ob-form{
  display:flex;
  padding:40px 28px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.ob-card{ width:100%; max-width:404px; margin:auto; }

.ob-mobile-logo{ display:none; text-align:center; margin-bottom:20px; }
.ob-mobile-logo img{ width:256px; height:auto; }

.ob-role-toggle{
  display:inline-flex; gap:4px;
  background:#fff; border:1px solid var(--paper-line); border-radius:999px; padding:4px;
  margin-bottom:30px;
}
.ob-role-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.ob-role-toggle label{
  position:relative;
  padding:8px 22px; font-size:13.5px; font-weight:500; color:var(--slate);
  border-radius:999px; cursor:pointer; transition:color .15s ease, background .15s ease;
}
.ob-role-toggle input:checked + label{
  background:var(--ink); color:#fff;
}

.ob-card h2{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:600; font-size:25px; color:var(--ink); margin:0 0 6px;
}
.ob-card .ob-sub{ font-size:13.5px; color:var(--slate); margin:0 0 24px; line-height:1.55; }

.ob-alert{
  font-size:13px; padding:11px 14px; border-radius:9px; margin:0 0 18px; line-height:1.5;
}
.ob-alert-error{ background:#FCEAE3; color:#9C3A1E; border:1px solid #F2C4B0; }
.ob-alert-success{ background:#E7F4EC; color:#1F5E42; border:1px solid #BBDEC9; }

.ob-field{ margin-bottom:18px; }
.ob-field > label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }
.ob-input-row{ position:relative; }
.ob-input-row input{
  width:100%; padding:12px 14px; font-size:15px; letter-spacing:.02em;
  border:1.5px solid var(--paper-line); border-radius:var(--radius);
  background:#fff; color:var(--ink); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ob-input-row input::placeholder{ color:#A9AEBB; }
.ob-input-row input:focus{
  border-color:var(--ink-soft);
  box-shadow:0 0 0 3px rgba(22,48,92,.08);
}
.ob-input-row.has-action input{ padding-right:118px; }
.ob-input-row.has-eye input{ padding-right:44px; }

.ob-eye-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:none; background:none; cursor:pointer;
  color:#8A93A6; display:flex; align-items:center; justify-content:center;
  border-radius:8px; transition:color .15s ease, background .15s ease;
}
.ob-eye-btn:hover{ color:var(--ink-soft); background:#F0F1F5; }

.ob-otp-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:var(--accent-2); color:#fff; border:none;
  font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:8px;
  cursor:pointer; white-space:nowrap; transition:background .15s ease;
}
.ob-otp-btn:hover:not(:disabled){ background:#249664; }
.ob-otp-btn:disabled{ background:#C9CCC8; color:#F2F4F2; cursor:not-allowed; }
.ob-otp-btn .spinner{
  display:inline-block; width:11px; height:11px;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%;
  animation:obspin .7s linear infinite; vertical-align:-1px; margin-right:5px;
}
@keyframes obspin{ to{ transform:rotate(360deg); } }

.ob-hint{ font-size:12.2px; color:var(--slate); margin:7px 2px 0; min-height:15px; }
.ob-hint.is-error{ color:#C0392B; }
.ob-hint.is-success{ color:var(--accent); }

.ob-submit{
  width:100%; margin-top:8px; padding:13px; font-size:15px; font-weight:600;
  color:#fff; background:linear-gradient(135deg, var(--ink-2), var(--ink));
  border:none; border-radius:var(--radius); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:transform .06s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow:0 10px 22px rgba(14,31,60,.22);
}
.ob-submit:hover{ box-shadow:0 14px 28px rgba(14,31,60,.3); }
.ob-submit:active{ transform:translateY(1px); }
.ob-submit:disabled{ opacity:.65; cursor:not-allowed; }
.ob-submit .spin{
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:obspin .7s linear infinite;
}

.ob-card-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:22px; font-size:12px; color:var(--slate);
}
.ob-card-foot .ob-help{ display:inline-flex; align-items:center; gap:6px; }

.ob-features-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:26px;
}
.ob-feature{
  background:#fff; border:1px solid var(--paper-line); border-radius:10px;
  padding:11px 10px; text-align:center;
}
.ob-feature .f-ico{ color:var(--accent); margin-bottom:5px; display:flex; justify-content:center; }
.ob-feature span{ display:block; font-size:11.2px; font-weight:600; color:var(--ink-soft); line-height:1.35; }

@media (prefers-reduced-motion: reduce){
  .ob-otp-btn .spinner, .ob-submit .spin{ animation:none; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  #oblogin{ grid-template-columns:1fr; display:block; }
  .ob-brand{ display:none; }
  .ob-form{ padding:34px 20px 40px; }
  .ob-mobile-logo{ display:block; }
  .ob-card{ max-width:420px; }
}
@media (max-width: 380px){
  .ob-role-toggle label{ padding:7px 15px; font-size:12.5px; }
  .ob-input-row.has-action input{ padding-right:104px; }
}