:root {
  --forest:  #0a2218; --green:   #14472e; --green-2: #1e6b42; --green-3: #3a9c66;
  --green-4: #72c896; --green-5: #aee4c3; --pale:    #dff0e8; --ghost:   #f2fbf6;
  --cream:   #fafaf7; --white:   #ffffff; --off-white: #f4f9f6;
  --ink:     #0d1f14; --ink-2:   #274033; --ink-3:   #5a7868; --ink-4:   #8fa99a;
  --border:  #dde8e0;
  --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:'Cabinet Grotesk',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;}

@keyframes rise {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin {to{transform:rotate(360deg)}}
@keyframes fadeIn {from{opacity:0}to{opacity:1}}
@keyframes float {
  0% { transform: translateY(0px) rotate(var(--rot)); }
  50% { transform: translateY(-12px) rotate(var(--rot)); }
  100% { transform: translateY(0px) rotate(var(--rot)); }
}

.topbar { height:72px;padding:0 40px; display:flex;align-items:center;justify-content:space-between; background:rgba(250,250,247,.95);backdrop-filter:blur(20px); border-bottom:1px solid var(--border); position:sticky;top:0;z-index:100;flex-shrink:0; animation:fadeIn .4s ease; }
.topbar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.tb-mark{ width:42px;height:42px;border-radius:12px; background:linear-gradient(135deg,var(--green-2),var(--green-4)); display:flex;align-items:center;justify-content:center;font-size:22px; box-shadow:0 4px 14px rgba(30,107,66,.3);transition:.25s; border: 2px solid var(--white); }
.tb-name{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--forest);font-weight:700;letter-spacing:-.01em; line-height: 1;}
.tb-tag{font-size:.55rem;color:var(--green-3);font-weight:600;letter-spacing:.15em;text-transform:uppercase;display:block;margin-top:4px;}
.tb-right{display:flex;align-items:center;gap:12px;}

.tb-link{ font-size:.8rem;color:var(--green-2);text-decoration:none;font-weight:700; padding:10px 20px;border:1.5px solid var(--green-5);background: var(--ghost);border-radius:var(--r-full);transition:.25s;letter-spacing:.02em; display: flex; align-items: center; gap: 6px;}
.tb-link:hover{border-color:var(--green-2);color:var(--white);background:var(--green-2); box-shadow: 0 4px 12px rgba(30,107,66,.2);}

.main{flex:1;display:grid;grid-template-columns:1fr 1.15fr;min-height:calc(100vh - 72px);}

.auth-left{ background: linear-gradient(180deg, #fdfefd 0%, #f4f9f6 100%); display:flex;flex-direction:column; position: relative; z-index: 10; box-shadow: 15px 0 40px rgba(0,0,0,0.04);}
.auth-content{ flex:1;display:flex;flex-direction:column; align-items:center;justify-content:center; padding:40px 56px; animation:rise .45s cubic-bezier(.22,1,.36,1); }
.auth-inner{width:100%;max-width:380px;}

.auth-eyebrow{ display:inline-flex;align-items:center;gap:7px; background:var(--white);border:1px solid var(--pale); box-shadow: 0 2px 8px rgba(0,0,0,0.02); border-radius:var(--r-full);padding:6px 16px; font-size:.65rem;font-weight:700;color:var(--green-2); letter-spacing:.1em;text-transform:uppercase; margin-bottom:20px; }
.auth-title{ font-family:'Cormorant Garamond',serif; font-size:2.6rem;font-weight:700;color:var(--forest); margin-bottom:10px;line-height:1.15;letter-spacing:-.01em; }
.auth-title em{font-style:italic;color:var(--green-2);}
.auth-sub{font-size:.9rem;color:var(--ink-3);line-height:1.6;margin-bottom:28px;}

.inline-register { display: inline-block; background: var(--pale); color: var(--green-2); padding: 4px 10px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: 0.2s; margin-left: 4px;}
.inline-register:hover { background: var(--green-2); color: var(--white); }

.soc-btn{ width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 20px; border:1.5px solid var(--border);border-radius:var(--r); background:var(--white);cursor:pointer; font-size:.9rem;font-weight:600;color:var(--ink-2); transition:.25s; margin-bottom:24px; box-shadow: 0 2px 10px rgba(0,0,0,0.02);}
.soc-btn:hover{border-color:var(--green-4); background:var(--white); box-shadow:0 6px 16px rgba(30,107,66,.08); transform: translateY(-1px);}
.s-icon{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}

.divider{display:flex;align-items:center;gap:12px;margin:24px 0;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.divider span{font-size:.68rem;color:var(--ink-4);letter-spacing:.12em;font-weight:700;text-transform:uppercase;}

.fl-wrap{position:relative;margin-bottom:16px;}
.fl-input{ width:100%;padding:22px 16px 10px; border:1.5px solid var(--border);border-radius:var(--r); font-size:.95rem;color:var(--ink); background:var(--white);outline:none;transition:.2s; box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);}
.fl-input:focus{border-color:var(--green-3);box-shadow:0 0 0 4px rgba(58,156,102,.1);}
.fl-label{ position:absolute;left:16px;top:50%;transform:translateY(-50%); font-size:.9rem;color:var(--ink-4);pointer-events:none;transition:.18s; font-weight: 500;}
.fl-input:focus ~ .fl-label, .fl-input:not(:placeholder-shown) ~ .fl-label{ top:11px;transform:none;font-size:.62rem;color:var(--green-2);font-weight:700;letter-spacing:.07em;text-transform:uppercase; }

.btn-signin{ width:100%;padding:16px;border:none;border-radius:var(--r); background:linear-gradient(135deg,var(--forest),var(--green-2)); color:var(--white); font-size:.95rem;font-weight:700;cursor:pointer; transition:.3s;box-shadow:0 6px 20px rgba(10,34,24,.2); display:flex;align-items:center;justify-content:center;gap:9px; margin-top: 10px;}
.btn-signin:hover { transform: translateY(-2px); box-shadow:0 8px 25px rgba(10,34,24,.35); background:linear-gradient(135deg,var(--ink),var(--forest));}
.btn-signin.loading .btn-spinner{display:block;}
.btn-spinner{ width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff;border-radius:50%; animation:spin .7s linear infinite;display:none; }

.ghost-back{ background:var(--white);border:1px solid var(--border);color:var(--ink-3); font-size:.8rem;font-weight:600; cursor:pointer;margin-bottom:24px;display:inline-flex;align-items:center;gap:6px; padding: 6px 14px; border-radius: var(--r-full); transition: 0.2s;}
.ghost-back:hover { color: var(--green-2); border-color: var(--green-3); background: var(--ghost); }

.otp-row{display:flex;gap:10px;margin-bottom:20px; justify-content:space-between;}
.otp-cell{ flex:1; max-width: 54px; height:64px;border:1.5px solid var(--border);border-radius:12px; text-align:center;font-family:'JetBrains Mono',monospace; font-size:1.8rem;font-weight:600;color:var(--forest); outline:none;transition:.2s; background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,0.02);}
.otp-cell:focus{border-color:var(--green-3); transform: translateY(-2px); box-shadow:0 6px 12px rgba(58,156,102,.15);}

.err-msg{ display:flex;align-items:center;gap:8px; background:#fef2f2;border:1px solid #fecaca;border-radius:var(--r); padding:12px 16px;font-size:.8rem;color:#dc2626;margin-bottom:16px; font-weight:600;display:none; }
.err-msg.show{display:flex;}

.auth-right{ background: var(--forest); display:flex;flex-direction:column;align-items:center;justify-content:center; position:relative;overflow:hidden; text-align:center;}
.ar-bg { position: absolute; top:0; left:0; width: 100%; height: 100%; background: radial-gradient(circle at top right, var(--green-2) 0%, transparent 60%), radial-gradient(circle at bottom left, #05140e 0%, transparent 60%); opacity: 0.8; z-index: 1;}
.collage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;}
.float-img { position: absolute; border-radius: var(--r-lg); box-shadow: 0 20px 40px rgba(0,0,0,0.4); border: 4px solid rgba(255,255,255,0.1); object-fit: cover; animation: float 6s ease-in-out infinite;}
.img-1 { top: 10%; left: 5%; width: 280px; height: 190px; --rot: -8deg; animation-delay: 0s;}
.img-2 { bottom: 8%; right: 5%; width: 260px; height: 180px; --rot: 6deg; animation-delay: -2s;}
.img-3 { top: 15%; right: 8%; width: 200px; height: 200px; --rot: 12deg; animation-delay: -4s; border-radius: 50%;}
.ar-inner { position: relative; z-index: 10; background: rgba(13, 31, 20, 0.65); backdrop-filter: blur(16px); padding: 44px; border-radius: var(--r-xl); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); max-width: 500px; margin: 0 40px; animation: fadeIn 1s ease;}
.ar-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(114, 200, 150, 0.15); color: var(--green-4); padding: 8px 16px; border-radius: var(--r-full); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; border: 1px solid rgba(114, 200, 150, 0.25);}
.ar-headline{ font-family:'Cormorant Garamond',serif;font-size:2.4rem; color:#fff;line-height:1.2;margin-bottom:14px;font-weight:700; }
.ar-headline em{color:var(--green-4); font-style: italic;}
.ar-body{font-size:.95rem;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:0;}

.admin-toggle { font-size: 0.8rem; color: var(--ink-4); text-align: center; margin-top: 24px; cursor: pointer; text-decoration: none; font-weight: 600; transition: 0.2s; display: block;}
.admin-toggle:hover { color: var(--green-2); text-decoration: underline;}

@media(max-width:1024px){ .main{grid-template-columns:1fr 1fr;} .img-1 {width:200px;} .img-2{width:200px;} .img-3{display:none;} }
@media(max-width:900px){ .main{grid-template-columns:1fr;} .auth-right{display:none;} }
@media(max-width:480px){ 
  .topbar { padding: 0 20px; height: 64px;}
  .tb-name { display: none; }
  .auth-content { padding: 40px 24px; }
  .otp-cell { height: 54px; font-size: 1.4rem; }
  .otp-row { gap: 6px; }
}