/* Login theme matched to the Bindu logo: deep espresso base, gold / bronze accents */
:root{
  --bg-1:#03140A; --bg-2:#07290F; --bg-3:#0B4D19; --green:#0B4D19;
  --gold-1:#FAE98A; --gold-2:#E7C666; --gold-3:#C9A24D; --bronze:#A67C3F; --bronze-d:#8B5E2E;
  --text:#F4FBF3; --muted:#C3D8C6; --ink:#2A1A06;
  --glass:rgba(255,255,255,.09); --glass-border:rgba(231,198,102,.32); --danger:#F87171;
}
*{box-sizing:border-box}
html,body{height:100%}
body.auth-body{
  margin:0; min-height:100vh; color:var(--text);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:linear-gradient(135deg,var(--bg-1) 0%,var(--bg-2) 55%,var(--bg-3) 100%);
  overflow-x:hidden; position:relative;
}
/* ---------- background ---------- */
.bg{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; animation:drift 28s ease-in-out infinite alternate}
.o1{width:560px;height:560px;right:-160px;top:-160px;background:radial-gradient(circle,var(--gold-2),transparent 70%)}
.o2{width:480px;height:480px;left:-140px;bottom:-140px;background:radial-gradient(circle,#23A04A,transparent 70%);animation-duration:34s;opacity:.5}
.o3{width:380px;height:380px;right:30%;bottom:-160px;background:radial-gradient(circle,var(--gold-1),transparent 70%);animation-duration:40s;opacity:.18}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,30px,0) scale(1.1)}}
.grid{position:absolute; inset:0;
  background-image:linear-gradient(rgba(231,198,102,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(231,198,102,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 70%); mask-image:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 70%)}
.shape{position:absolute; border:1px solid rgba(231,198,102,.2); border-radius:18px; transform:rotate(18deg)}
.s1{width:200px;height:200px;right:8%;top:62%}
.s2{width:120px;height:120px;right:6%;top:10%;transform:rotate(-14deg);border-color:rgba(250,233,138,.22)}
.s3{width:300px;height:300px;left:34%;bottom:-100px;transform:rotate(32deg);border-color:rgba(255,255,255,.07)}

/* ---------- split layout ---------- */
.split{position:relative; z-index:1; min-height:100vh; display:flex; align-items:stretch; gap:28px; padding:28px}
.showcase{
  position:relative; flex:1 1 55%; min-width:0; min-height:520px; border-radius:28px; overflow:hidden;
  border:1px solid var(--glass-border); box-shadow:0 30px 70px rgba(0,0,0,.5); background:var(--bg-2);
}
.track{display:flex; height:100%; transition:transform .9s cubic-bezier(.65,0,.25,1)}
.slide{flex:0 0 100%; height:100%; margin:0; position:relative; overflow:hidden}
.slide img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04)}
.slide.ph{display:flex; align-items:center; padding:12%}
.ph1{background:radial-gradient(600px 400px at 20% 20%,rgba(250,233,138,.35),transparent 60%),linear-gradient(140deg,#052A0E,#0B4D19 55%,#1B7A33)}
.ph2{background:radial-gradient(600px 400px at 80% 25%,rgba(231,198,102,.38),transparent 60%),linear-gradient(140deg,#04200B,#0B4D19 50%,#2A8A44)}
.ph3{background:radial-gradient(600px 400px at 30% 80%,rgba(250,233,138,.3),transparent 60%),linear-gradient(140deg,#031209,#093F15 55%,#136B2A)}
.slide.ph::before{content:""; position:absolute; inset:0; opacity:.25;
  background:repeating-linear-gradient(115deg,transparent 0 42px,rgba(255,255,255,.07) 42px 44px)}
.ph-text{position:relative; max-width:440px}
.ph-text h2{margin:0 0 12px; font-size:clamp(28px,3.4vw,44px); line-height:1.1; font-weight:800; letter-spacing:-.5px; color:var(--gold-1)}
.ph-text p{margin:0; color:var(--text); opacity:.9; font-size:16px; line-height:1.6}
.showcase-shade{position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,rgba(3,20,10,.88) 0%,rgba(3,20,10,0) 42%)}
.showcase-cap{position:absolute; left:32px; bottom:60px; right:32px; display:flex; flex-direction:column; gap:4px}
.showcase-cap strong{font-size:22px; font-weight:800; color:var(--gold-1)}
.showcase-cap span{color:var(--muted); font-size:13.5px}
.dots{position:absolute; left:32px; bottom:26px; display:flex; gap:8px}
.dots button{width:9px; height:9px; padding:0; border-radius:99px; border:0; cursor:pointer; background:rgba(255,248,231,.4); transition:width .3s, background .3s}
.dots button.on{width:28px; background:var(--gold-2)}
.dots button:focus-visible{outline:2px solid #fff; outline-offset:3px}

.auth-side{flex:0 0 auto; width:min(500px,100%); display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto}

/* ---------- card ---------- */
.glass-card{
  width:100%; padding:32px 32px 28px; border-radius:26px;
  background:var(--glass); border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,200,.22);
}
.brand-block{text-align:center; margin-bottom:20px}
.logo{display:block; margin:0 auto 10px; width:auto; height:auto; max-width:180px; max-height:140px; object-fit:contain}
.company{margin:0; font-size:18px; font-weight:800; letter-spacing:.2px; color:var(--gold-1)}
.app-title{margin:5px 0 0; color:var(--muted); font-size:12.5px}
.lead{color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 18px; text-align:center}

/* ---------- form ---------- */
.field{margin-bottom:16px}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:7px}
.control{position:relative}
.control .icon{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--gold-2); font-size:15px; pointer-events:none}
.control .caret{position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:12px; pointer-events:none}
.control input,.control select{
  width:100%; height:50px; padding:0 46px 0 44px; font:inherit; font-size:15px; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(231,198,102,.32); border-radius:13px; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s; appearance:none; -webkit-appearance:none;
}
.control select option{background:var(--bg-3); color:#fff}
.control select:invalid{color:#9DB8A2}
.control input::placeholder{color:#9DB8A2}
.control input:focus,.control select:focus{border-color:var(--gold-2); background:rgba(255,255,255,.13); box-shadow:0 0 0 3px rgba(231,198,102,.25)}
.control input:-webkit-autofill{-webkit-text-fill-color:#fff; box-shadow:0 0 0 40px #0B4D19 inset}
.field.invalid .control input,.field.invalid .control select{border-color:var(--danger)}
.err{display:block; color:#FCA5A5; font-size:12px; margin-top:5px}
.err:empty{display:none}
.toggle-pw{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:10px}
.toggle-pw:hover{color:#fff; background:rgba(255,255,255,.08)}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 20px; font-size:13px}
.check{display:flex; align-items:center; gap:9px; color:var(--muted); cursor:pointer}
.check input{width:17px; height:17px; accent-color:var(--gold-3)}
.link{color:var(--gold-2); text-decoration:none; font-weight:600}
.link:hover{text-decoration:underline; color:var(--gold-1)}
.center{text-align:center; margin:18px 0 0; font-size:13px}

.btn-signin{
  position:relative; width:100%; height:52px; border:0; border-radius:14px; cursor:pointer; color:var(--ink);
  font:inherit; font-weight:800; letter-spacing:1.2px; font-size:14px;
  background:linear-gradient(90deg,var(--bronze) 0%,var(--gold-2) 55%,var(--gold-1) 100%);
  box-shadow:0 10px 26px rgba(166,124,63,.4); transition:transform .2s, box-shadow .2s, filter .2s;
}
.btn-signin:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(231,198,102,.38); filter:brightness(1.06)}
.btn-signin:active{transform:translateY(0)}
.btn-signin:focus-visible,.link:focus-visible,.toggle-pw:focus-visible{outline:2px solid var(--gold-1); outline-offset:2px}
.btn-signin .spinner{display:none; position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border:3px solid rgba(42,26,6,.3); border-top-color:var(--ink); border-radius:50%; animation:spin .8s linear infinite}
.btn-signin.is-loading{cursor:wait; pointer-events:none}
.btn-signin.is-loading .label{visibility:hidden}
.btn-signin.is-loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.alert{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; margin-bottom:16px; font-size:13.5px; line-height:1.5; border:1px solid}
.alert i{margin-top:2px}
.alert.error{background:rgba(248,113,113,.15); border-color:rgba(248,113,113,.5); color:#FECACA}
.alert.success{background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.5); color:#A7F3D0}
.alert.info{background:rgba(231,198,102,.15); border-color:rgba(231,198,102,.5); color:#FDE9A8}
.auth-footer{margin-top:20px; color:var(--muted); font-size:12.5px; text-align:center; opacity:.85}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .split{padding:16px}
  .showcase{display:none}
  .auth-side{min-height:calc(100vh - 32px)}
}
@media (max-width:480px){
  .glass-card{padding:26px 20px 24px; border-radius:22px}
  .logo{max-width:150px}
  .row-between{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.orb{animation:none}.track{transition:none}.btn-signin{transition:none}}

/* ---------- theme toggle ---------- */
.theme-fab{position:fixed; top:16px; right:16px; z-index:10; width:42px; height:42px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  color:var(--gold-1); background:var(--glass); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:15px}
.theme-fab:hover{background:rgba(255,255,255,.16)}
.theme-fab:focus-visible{outline:2px solid var(--gold-1); outline-offset:2px}
.theme-toggle .fa-sun{display:inline} .theme-toggle .fa-moon{display:none}
[data-theme="light"] .theme-toggle .fa-sun{display:none} [data-theme="light"] .theme-toggle .fa-moon{display:inline}

/* ---------- light mode ---------- */
[data-theme="light"]{
  color-scheme:light;
  --bg-1:#F4F9F2; --bg-2:#E8F2E5; --bg-3:#D9EAD3; --text:#10281A; --muted:#4F6B57;
  --glass:rgba(255,255,255,.7); --glass-border:rgba(11,77,25,.3);
}
[data-theme="light"] .orb{opacity:.4}
[data-theme="light"] .o3{opacity:.28}
[data-theme="light"] .grid{background-image:linear-gradient(rgba(11,77,25,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(11,77,25,.07) 1px,transparent 1px)}
[data-theme="light"] .shape{border-color:rgba(11,77,25,.22)}
[data-theme="light"] .showcase{box-shadow:0 24px 54px rgba(11,77,25,.3)}
[data-theme="light"] .glass-card{box-shadow:0 24px 56px rgba(11,77,25,.2), inset 0 1px 0 rgba(255,255,255,.9)}
[data-theme="light"] .logo{filter:drop-shadow(0 0 .6px rgba(90,62,27,.9)) drop-shadow(0 1px 1px rgba(90,62,27,.35))}
[data-theme="light"] .company{color:#0B4D19}
[data-theme="light"] .app-title,[data-theme="light"] .lead,[data-theme="light"] .field label,[data-theme="light"] .auth-footer{color:#4F6B57}
[data-theme="light"] .control .icon{color:#0B4D19}
[data-theme="light"] .control input,[data-theme="light"] .control select{color:#10281A; background:#fff; border-color:rgba(11,77,25,.35)}
[data-theme="light"] .control input::placeholder{color:#7E9484}
[data-theme="light"] .control select:invalid{color:#7E9484}
[data-theme="light"] .control select option{background:#fff; color:#10281A}
[data-theme="light"] .control input:focus,[data-theme="light"] .control select:focus{background:#fff; border-color:#0B4D19; box-shadow:0 0 0 3px rgba(11,77,25,.22)}
[data-theme="light"] .control input:-webkit-autofill{-webkit-text-fill-color:#10281A; box-shadow:0 0 0 40px #fff inset}
[data-theme="light"] .toggle-pw{color:#4F6B57} [data-theme="light"] .toggle-pw:hover{color:#10281A; background:rgba(11,77,25,.08)}
[data-theme="light"] .link{color:#0B4D19} [data-theme="light"] .link:hover{color:#146B27}
[data-theme="light"] .check{color:#3D5A46} [data-theme="light"] .check input{accent-color:#0B4D19}
[data-theme="light"] .btn-signin{background:linear-gradient(90deg,#0B4D19,#17782E); color:#fff; box-shadow:0 10px 26px rgba(11,77,25,.35)}
[data-theme="light"] .btn-signin:hover{box-shadow:0 14px 32px rgba(11,77,25,.42)}
[data-theme="light"] .btn-signin .spinner{border-color:rgba(255,255,255,.4); border-top-color:#fff}
[data-theme="light"] .btn-signin:focus-visible,[data-theme="light"] .link:focus-visible{outline-color:#0B4D19}
[data-theme="light"] .alert.error{color:#B91C1C; background:rgba(239,68,68,.1)}
[data-theme="light"] .alert.success{color:#047857; background:rgba(16,185,129,.12)}
[data-theme="light"] .alert.info{color:#7A5614; background:rgba(201,162,77,.18)}
[data-theme="light"] .err{color:#B91C1C}
[data-theme="light"] .theme-fab{color:#0B4D19; background:rgba(255,255,255,.8)}
[data-theme="light"] .theme-fab:hover{background:#fff}
[data-theme="light"] .ph-text h2{color:#FAE98A} [data-theme="light"] .ph-text p{color:#F4FBF3}