/* ================================================================
   base.css — Variables, Reset, Login Screen, App Shell
   nikahin.id Client Panel
   ================================================================ */
:root {
  --gold:#C9A96E;--gold-l:#E8D5B0;--gold-d:#9A7A45;
  --cream:#FAF7F2;--cream-d:#F0EBE0;
  --dark:#1A1614;--dark-2:#2C2420;
  --muted:#6B5E52;--muted-l:#9C8E84;
  --border:rgba(201,169,110,0.25);--border-s:rgba(201,169,110,0.15);
  --green:#2D6A2D;--green-bg:#F0F7F0;--green-b:#C3E0C3;
  --red:#8B2020;--red-bg:#FDF0F0;--red-b:#F0C0C0;
  --yellow:#856404;--yellow-bg:#FFFBEB;--yellow-b:#FFE08A;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Jost',sans-serif;background:var(--cream-d);color:var(--dark);min-height:100vh}

/* ── LOGIN ── */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--dark);position:relative;overflow:hidden}
#login-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(201,169,110,0.08),transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(201,169,110,0.05),transparent 60%)}
.login-card{background:var(--dark-2);border:1px solid rgba(201,169,110,0.2);width:100%;max-width:380px;position:relative;animation:fadeUp .7s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.login-card::before,.login-card::after{content:'';position:absolute;width:40px;height:40px;border-color:var(--gold);border-style:solid}
.login-card::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.login-card::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.login-header{padding:36px 32px 28px;text-align:center;border-bottom:1px solid rgba(201,169,110,0.15)}
.login-ornament{font-size:10px;letter-spacing:6px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;opacity:.8}
.login-title{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:400;color:white;letter-spacing:1px}
.login-sub{font-size:11px;color:var(--muted-l);margin-top:8px;font-weight:300;letter-spacing:1px}
.login-body{padding:28px 32px 32px}
.login-body label{display:block;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted-l);margin-bottom:10px}
.login-body input{width:100%;padding:14px 16px;border:1px solid rgba(201,169,110,0.2);background:rgba(255,255,255,0.04);font-family:'Jost',sans-serif;font-size:20px;color:white;outline:none;text-align:center;letter-spacing:5px;text-transform:uppercase;transition:border-color .3s}
.login-body input:focus{border-color:var(--gold);background:rgba(201,169,110,0.05)}
.login-body input::placeholder{color:rgba(255,255,255,0.15);font-size:16px;letter-spacing:3px}
.login-btn{width:100%;padding:14px;background:var(--gold);color:white;border:none;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:4px;text-transform:uppercase;cursor:pointer;transition:background .2s;margin-top:16px}
.login-btn:hover{background:var(--gold-d)}
.login-btn:disabled{opacity:.5;cursor:not-allowed}
.login-msg{margin-top:12px;padding:10px 14px;font-size:12px;text-align:center;display:none;border:1px solid var(--red-b);background:rgba(139,32,32,0.15);color:#F08080}

/* ── APP SHELL ── */
#app-screen{display:none}