:root{--ink:#183238;--muted:#6b7e82;--line:#e3ebea;--paper:#f4f7f6;--teal:#176b63;--navy:#123c43;--red:#b94b4b}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px}
button,input,select{font:inherit}
a{color:var(--teal);font-weight:700}

.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(320px,1fr) minmax(380px,520px)}
.auth-brand{background:var(--navy);color:#fff;padding:40px 48px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-brand::after{content:"";position:absolute;right:-140px;bottom:-140px;width:420px;height:420px;border-radius:50%;border:60px solid rgba(134,203,182,.07)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:43px;height:43px;border-radius:13px;background:#d7eee5;color:#13574f;display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
.brand strong{display:block;font-size:17px;font-weight:800}
.brand span{display:block;color:#b6ceca;font-size:11px;margin-top:3px}
.brand-copy{margin:auto 0;max-width:470px;position:relative;z-index:1}
.eyebrow{font-size:10px;letter-spacing:1.3px;color:#86cbb6;font-weight:800;margin-bottom:12px}
.brand-copy h1{font-size:30px;line-height:1.25;margin:0 0 14px;letter-spacing:-.5px}
.brand-copy p{color:#c4d8d4;line-height:1.65;margin:0 0 22px}
.brand-points{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.brand-points li{display:flex;align-items:center;gap:10px;color:#dbe8e5;font-size:13px}
.brand-points span{width:22px;height:22px;border-radius:7px;background:#24555a;color:#86cbb6;display:grid;place-items:center;font-size:12px;font-weight:800}
.brand-foot{color:#91b0ac;font-size:10px;position:relative;z-index:1}

.auth-panel{display:flex;align-items:center;justify-content:center;padding:32px 24px;background:#fff}
.auth-card{width:100%;max-width:400px}
.mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:26px}
.mobile-brand strong{font-size:16px}
.auth-card h2{font-size:24px;margin:0 0 6px;letter-spacing:-.4px}
.auth-sub{color:var(--muted);margin:0 0 22px;font-size:13px}

.role-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.role-tab{position:relative;cursor:pointer}
.role-tab input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.role-tab span{display:block;border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;transition:.15s;background:#fff}
.role-tab b{display:block;font-size:13px}
.role-tab small{display:block;color:var(--muted);font-size:10.5px;margin-top:3px}
.role-tab:hover span{border-color:#9dbdb5}
.role-tab input:checked + span{border-color:var(--teal);background:#e5f3ef;box-shadow:inset 0 0 0 1px var(--teal)}
.role-tab input:focus-visible + span{outline:3px solid rgba(49,143,122,.3);outline-offset:2px}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-size:12px;font-weight:700;color:#52696c}
.field input{border:1px solid #dce6e3;border-radius:8px;padding:11px 12px;background:#fff;color:var(--ink);outline:none;width:100%;font-size:14px}
.field input:focus{border-color:#62a99b;box-shadow:0 0 0 3px rgba(49,143,122,.12)}
.field small{font-size:11px;color:#879698}
.password-wrap{position:relative}
.password-wrap input{padding-right:96px}
.toggle-pass{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:#edf4f2;color:var(--navy);border-radius:6px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer}

.btn-primary{width:100%;border:0;background:var(--teal);color:#fff;border-radius:8px;padding:12px 14px;font-weight:700;font-size:14px;cursor:pointer;margin-top:4px}
.btn-primary:hover{background:#125a53}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}

.alert{border-radius:8px;padding:11px 13px;font-size:12.5px;line-height:1.5;margin-bottom:16px;border:1px solid;border-left-width:4px}
.alert.ok{background:#edf6f3;border-color:#d6eae3;border-left-color:#4b9a83;color:#2f5f52}
.alert.bad{background:#fff0f0;border-color:#f0d7d7;border-left-color:#c45c5c;color:#834848}
.alert.warn{background:#fff8eb;border-color:#f3e2c4;border-left-color:#d49a42;color:#7b602e}
.alert ul{margin:6px 0 0;padding-left:18px}
.auth-help{color:var(--muted);font-size:11.5px;line-height:1.55;margin:18px 0 0;text-align:center}

/* Halaman setup memakai kartu yang lebih lebar */
.setup-card{max-width:520px}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.setup-grid .full{grid-column:1/-1}

@media(max-width:860px){
  .auth-shell{grid-template-columns:1fr}
  .auth-brand{display:none}
  .mobile-brand{display:flex}
  .auth-panel{min-height:100vh;align-items:flex-start;padding-top:48px}
}
@media(max-width:480px){
  .setup-grid{grid-template-columns:1fr}
  .role-tab small{display:none}
}