/* ═══════════════════════════════════════════
   PLANNING/AUTH.CSS — Auth overlay styles
   Scoped di bawah #auth-overlay
═══════════════════════════════════════════ */
#auth-overlay {
  position:fixed;inset:0;z-index:9999;
  background:#faf7f3;
  display:none;align-items:center;justify-content:center;
  padding:24px 16px;overflow-y:auto;
  font-family:'DM Sans',sans-serif;
  --a-bg:#faf7f3;--a-card:#ffffff;--a-border:#e8ddd2;
  --a-text:#2c1f14;--a-text2:#9b7d68;--a-text3:#c4a990;
  --a-accent:#c8906a;--a-accent2:#8b4f30;--a-gold:#c9a84c;
  --a-green:#4a7c5f;--a-red:#b83030;
  --a-shadow:0 4px 40px rgba(44,31,20,0.11);--a-radius:18px;
}
#auth-overlay .bg-deco{position:fixed;inset:0;pointer-events:none;z-index:0}
#auth-overlay .bg-deco::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 8% 18%,rgba(200,144,106,0.11) 0%,transparent 60%),radial-gradient(ellipse 45% 55% at 92% 82%,rgba(201,168,76,0.09) 0%,transparent 60%)}
#auth-overlay .ring{position:absolute;border-radius:50%;border:1px solid rgba(200,144,106,0.10)}
#auth-overlay .ring.a{width:520px;height:520px;top:-200px;left:-200px}
#auth-overlay .ring.b{width:300px;height:300px;top:-80px;left:-80px;border-color:rgba(200,144,106,0.17)}
#auth-overlay .ring.c{width:580px;height:580px;bottom:-240px;right:-200px}
#auth-overlay .ring.d{width:340px;height:340px;bottom:-110px;right:-100px;border-color:rgba(201,168,76,0.14)}
#auth-overlay .petal{position:absolute;opacity:.10;animation:auth-floatup 9s ease-in-out infinite}
#auth-overlay .petal:nth-child(1){top:12%;left:6%;font-size:1.1rem;animation-delay:0s}
#auth-overlay .petal:nth-child(2){top:72%;left:4%;font-size:.85rem;animation-delay:2.5s}
#auth-overlay .petal:nth-child(3){top:25%;right:5%;font-size:1rem;animation-delay:1s}
#auth-overlay .petal:nth-child(4){top:78%;right:7%;font-size:.8rem;animation-delay:3.5s}
@keyframes auth-floatup{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(10deg)}}
#auth-overlay .a-wrap{position:relative;z-index:1;width:100%;max-width:420px}
#auth-overlay .hdr{text-align:center;margin-bottom:26px;animation:auth-slideDown .55s cubic-bezier(.16,1,.3,1) both}
@keyframes auth-slideDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
#auth-overlay .hdr-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(200,144,106,0.10);border:1px solid rgba(200,144,106,0.22);border-radius:99px;padding:4px 13px;font-size:.70rem;color:var(--a-accent2);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:13px}
#auth-overlay .hdr h1{font-family:'Cormorant Garamond',serif;font-size:clamp(1.9rem,5.5vw,2.5rem);font-weight:600;color:var(--a-text);line-height:1.18;margin-bottom:7px}
#auth-overlay .hdr h1 em{font-style:italic;color:var(--a-accent)}
#auth-overlay .hdr p{font-size:.83rem;color:var(--a-text2);line-height:1.55}
#auth-overlay .auth-card{background:var(--a-card);border:1px solid var(--a-border);border-radius:var(--a-radius);box-shadow:var(--a-shadow);overflow:hidden;animation:auth-slideUp .55s cubic-bezier(.16,1,.3,1) .08s both}
@keyframes auth-slideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
#auth-overlay .tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--a-border)}
#auth-overlay .tab{padding:13px;border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:.84rem;font-weight:600;color:var(--a-text2);cursor:pointer;transition:all .2s;position:relative}
#auth-overlay .tab.on{color:var(--a-accent2);background:rgba(200,144,106,0.04)}
#auth-overlay .tab.on::after{content:'';position:absolute;bottom:-1px;left:18%;right:18%;height:2px;background:var(--a-accent);border-radius:2px 2px 0 0}
#auth-overlay .tab:not(.on):hover{color:var(--a-text);background:rgba(0,0,0,0.02)}
#auth-overlay .a-body{padding:26px 26px 22px}
@media(max-width:440px){#auth-overlay .a-body{padding:20px 16px 18px}}
#auth-overlay .panel{display:none}
#auth-overlay .panel.on{display:block;animation:auth-fadeIn .28s ease}
@keyframes auth-fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
#auth-overlay .field{margin-bottom:13px}
#auth-overlay .field-mb{margin-bottom:16px}
#auth-overlay .lbl{display:block;font-size:.74rem;font-weight:600;color:var(--a-text2);margin-bottom:5px;letter-spacing:.2px}
#auth-overlay .lbl-role-header{margin-bottom:7px}
#auth-overlay .label-optional{font-weight:400;color:var(--a-text3)}
#auth-overlay .inp-date{cursor:pointer}
#auth-overlay .alert-mb{margin-bottom:16px}
#auth-overlay .inp-wrap{position:relative}
#auth-overlay .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.88rem;pointer-events:none;line-height:1}
#auth-overlay .inp{width:100%;padding:10px 13px 10px 36px;border:1.5px solid var(--a-border);border-radius:10px;background:#faf8f5;color:var(--a-text);font-family:'DM Sans',sans-serif;font-size:.88rem;outline:none;transition:border .2s,box-shadow .2s}
#auth-overlay .inp:focus{border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(200,144,106,0.12);background:#fff}
#auth-overlay .inp.r{padding-right:40px}
#auth-overlay .inp::placeholder{color:var(--a-text3)}
#auth-overlay .eye{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--a-text3);padding:3px;line-height:1;transition:color .2s;display:flex;align-items:center;justify-content:center}
#auth-overlay .eye:hover{color:var(--a-accent)}
#auth-overlay .eye-svg{width:20px;height:20px;display:block}
#auth-overlay .hint{font-size:.69rem;color:var(--a-text3);margin-top:4px}
#auth-overlay .err{font-size:.70rem;color:var(--a-red);margin-top:4px;display:none}
#auth-overlay .err.on{display:block}
#auth-overlay .f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:360px){#auth-overlay .f2{grid-template-columns:1fr}}
#auth-overlay .alert{border-radius:10px;padding:9px 13px;font-size:.79rem;margin-bottom:13px;display:none;align-items:flex-start;gap:8px;line-height:1.45}
#auth-overlay .alert.on{display:flex}
#auth-overlay .alert.error{background:#fef0ef;border:1px solid #f5c0bc;color:#7a1c1c}
#auth-overlay .alert.success{background:#eef7f1;border:1px solid #b6ddc4;color:#1c5c35}
#auth-overlay .alert.info{background:#fff8ee;border:1px solid #f0d9a8;color:#7a4e10}
#auth-overlay .alert-ico{font-size:.95rem;flex-shrink:0;margin-top:1px}
#auth-overlay .div{display:flex;align-items:center;gap:9px;color:var(--a-text3);font-size:.70rem;letter-spacing:.3px;margin:16px 0 13px}
#auth-overlay .div::before,#auth-overlay .div::after{content:'';flex:1;height:1px;background:var(--a-border)}
#auth-overlay .roles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
#auth-overlay .role{border:1.5px solid var(--a-border);border-radius:10px;padding:10px 8px;cursor:pointer;background:#faf8f5;font-family:'DM Sans',sans-serif;transition:all .2s;text-align:center}
#auth-overlay .role span{display:block}
#auth-overlay .role .em{font-size:1.35rem;margin-bottom:3px}
#auth-overlay .role .nm{font-size:.77rem;font-weight:600;color:var(--a-text)}
#auth-overlay .role .sb{font-size:.65rem;color:var(--a-text2)}
#auth-overlay .role.on{border-color:var(--a-accent);background:rgba(200,144,106,0.07)}
#auth-overlay .role:hover:not(.on){background:rgba(200,144,106,0.04)}
#auth-overlay .steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:20px}
#auth-overlay .step{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
#auth-overlay .step-dot{width:27px;height:27px;border-radius:50%;border:2px solid var(--a-border);background:var(--a-card);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:var(--a-text2);transition:all .3s;z-index:1}
#auth-overlay .step.done .step-dot{background:var(--a-green);border-color:var(--a-green);color:#fff}
#auth-overlay .step.on .step-dot{background:var(--a-accent);border-color:var(--a-accent);color:#fff}
#auth-overlay .step-lbl{font-size:.59rem;color:var(--a-text3);white-space:nowrap}
#auth-overlay .step.on .step-lbl{color:var(--a-accent2);font-weight:600}
#auth-overlay .step.done .step-lbl{color:var(--a-green)}
#auth-overlay .step-line{width:36px;height:2px;background:var(--a-border);margin:0 4px 16px;transition:background .3s}
#auth-overlay .step-line.done{background:var(--a-green)}
#auth-overlay .auth-btn{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--a-accent),var(--a-accent2));color:#fff;font-family:'DM Sans',sans-serif;font-size:.90rem;font-weight:600;cursor:pointer;transition:all .2s;letter-spacing:.2px;position:relative;overflow:hidden}
#auth-overlay .auth-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(139,79,48,0.28)}
#auth-overlay .auth-btn:active{transform:translateY(0);box-shadow:none}
#auth-overlay .auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
#auth-overlay .auth-btn.ghost{background:var(--a-card);color:var(--a-text2);border:1.5px solid var(--a-border);box-shadow:none}
#auth-overlay .auth-btn.ghost:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,0.06)}
#auth-overlay .spin{display:none}
#auth-overlay .auth-btn.loading .lbl-btn{opacity:0}
#auth-overlay .auth-btn.loading .spin{display:inline-block;animation:auth-rot .8s linear infinite}
@keyframes auth-rot{to{transform:rotate(360deg)}}
#auth-overlay .btn-row{display:flex;gap:9px;margin-top:2px}
#auth-overlay .btn-row .auth-btn.ghost{flex:0 0 auto;width:auto;padding:12px 16px}
#auth-overlay .btn-row .auth-btn:not(.ghost){flex:1}
#auth-overlay .switch{text-align:center;margin-top:15px;font-size:.77rem;color:var(--a-text2)}
#auth-overlay .switch a{color:var(--a-accent2);font-weight:600;cursor:pointer;text-decoration:none}
#auth-overlay .switch a:hover{text-decoration:underline}
#auth-overlay .forgot{text-align:right;margin-top:4px}
#auth-overlay .forgot a{font-size:.71rem;color:var(--a-text3);cursor:pointer;transition:color .2s}
#auth-overlay .forgot a:hover{color:var(--a-accent2)}
#auth-overlay .flatpickr-calendar{font-family:'DM Sans',sans-serif}