*{box-sizing:border-box;margin:0;padding:0}
input,textarea,select,button{font-family:inherit;font-size:inherit;-webkit-appearance:none;appearance:none;border-radius:0}
:root{
  --bg:#faf9f7;--surface:#fff;--surface2:#fff8f3;
  --accent:#E8620A;--al:#FEF0E7;--am:#F5A872;--ad:#B84A06;
  --text:#1a1410;--muted:#6b5e55;--subtle:#a89890;
  --border:rgba(232,98,10,0.12);--border2:rgba(232,98,10,0.22);
  --fh:'DM Sans',sans-serif;--fb:'DM Sans',sans-serif;
  --r:14px;
}
[data-theme="dark"]{
  --bg:#191510;--surface:#231e18;--surface2:#2c261f;
  --accent:#E8620A;--al:rgba(232,98,10,0.14);--am:#C4520A;--ad:#FF7A2F;
  --text:#f0ebe6;--muted:#b09888;--subtle:#5a4e48;
  --border:rgba(232,98,10,0.15);--border2:rgba(232,98,10,0.28);
}
*:focus{outline:none}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
input:focus-visible,textarea:focus-visible{outline:none}

html,body{overflow-x:hidden}
body{
  transition:background-color .3s ease,color .3s ease;
  background:url('bg-grey.jpg') center/cover fixed;
  background-color:#c9cacc;
  color:var(--text);
  font-family:var(--fb);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:24px 0 0;
}
[data-theme="dark"] body{background-image:none;background-color:var(--bg)}

/* Background pattern */
.bg-pattern{display:none}

/* Theme toggle */
.theme-btn{
  position:fixed;top:18px;right:18px;z-index:10;
  width:38px;height:38px;border-radius:50%;
  border:1.5px solid var(--border2);
  background:var(--surface);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  transition:all .18s;
  box-shadow:0 2px 12px rgba(26,20,16,.08);
}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
.theme-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}

/* Card */
.card{
  position:relative;z-index:1;
  width:400px;max-width:92vw;
  background:var(--surface);
  border-radius:24px;
  padding:40px 36px;
  border:1px solid rgba(255,255,255,0.9);
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.10),
    0 32px 72px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,1);
  animation:cardIn .35s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Logo */
.logo-wrap{text-align:center;margin-bottom:28px}
.logo-text{font-size:26px;font-weight:700;letter-spacing:.12em;color:var(--text)}
.logo-text .dot{display:inline-block;width:.22em;height:.22em;background:#ff7a00;vertical-align:0;margin:0 .1em;border-radius:1px}
.logo-sub{font-size:12px;color:var(--subtle);margin-top:4px;letter-spacing:.3px}

/* Tabs */
.tabs{
  display:flex;
  gap:8px;
  margin-bottom:28px;
}
.tab{
  flex:1;padding:9px 0;border-radius:100px;
  font-size:13px;font-weight:600;cursor:pointer;
  border:1.5px solid var(--border2);background:transparent;
  color:var(--muted);
  transition:all .2s;
}
.tab.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 3px 10px rgba(232,98,10,.3);
}

/* Forms */
.forms-wrap{position:relative;min-height:420px}
.form{
  display:flex;flex-direction:column;gap:16px;
  position:absolute;top:0;left:0;width:100%;
  opacity:0;pointer-events:none;
  transition:opacity .38s cubic-bezier(.4,0,.2,1),transform .38s cubic-bezier(.4,0,.2,1);
  transform:translateY(8px);
}
.form.active{
  opacity:1;pointer-events:auto;
  transform:translateY(0);
}
.form.leaving{
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  position:absolute;
}

.field{display:flex;flex-direction:column;gap:5px}
.field label{
  font-size:11px;font-weight:600;
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;
}
.field-input-wrap{position:relative}
.field input{
  width:100%;
  border:1.5px solid var(--border2);
  border-radius:11px;
  padding:11px 14px;
  font-size:14px;
  background:var(--bg);
  color:var(--text);
  outline:none;
  transition:border-color .18s,box-shadow .18s;
}
@media(max-width:640px){
  .field input{font-size:16px;padding:12px 14px}
  .card{padding:32px 22px}
  .theme-btn{top:12px;right:12px;width:34px;height:34px}
}
.field input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,98,10,.1);
}
.field input.error{border-color:#DC2626}
.pwd-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  color:var(--subtle);padding:4px;
  display:flex;align-items:center;
  transition:color .15s;
}
.pwd-toggle:hover{color:var(--accent)}
.pwd-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.field input[type="password"],.field input.has-toggle{padding-right:42px}

.field-err{
  font-size:11px;color:#DC2626;
  display:none;margin-top:1px;
}
.field-err.show{display:block}

/* Forgot password + Remember me */
.forgot-remember-row{display:flex;justify-content:space-between;align-items:center;margin-top:-6px}
.forgot-link{font-size:12px;color:var(--muted);text-decoration:none;transition:color .15s}
.forgot-link:hover{color:var(--accent)}
.remember-label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;color:var(--muted);user-select:none}
.remember-label input[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;margin:0}

/* Submit button */
.submit-btn{
  width:100%;padding:13px;
  border-radius:100px;
  border:none;
  background:var(--accent);
  color:#fff;
  font-size:15px;font-weight:700;
  cursor:pointer;
  transition:all .2s;
  margin-top:4px;
  letter-spacing:.1px;
}
.submit-btn:hover{
  background:var(--ad);
  box-shadow:0 8px 24px rgba(232,98,10,.38);
  transform:translateY(-1px);
}
.submit-btn:active{transform:translateY(0)}

/* Divider */
.divider{
  display:flex;align-items:center;gap:12px;
  color:var(--subtle);font-size:11px;
  margin:4px 0;
}
.divider::before,.divider::after{
  content:'';flex:1;height:1px;
  background:var(--border);
}

/* Social login */
.social-btn{
  width:100%;padding:11px;
  border-radius:100px;
  border:1.5px solid var(--border2);
  background:transparent;
  color:var(--text);
  font-size:13px;font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:all .18s;
}
.social-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--al)}
.social-btn svg{width:18px;height:18px;flex-shrink:0}

/* Bottom note */
.bottom-note{
  text-align:center;
  font-size:12px;color:var(--subtle);
  margin-top:22px;
  line-height:1.5;
}
.bottom-note a{color:var(--accent);text-decoration:none;font-weight:600}
.bottom-note a:hover{text-decoration:underline}

/* Site-wide legal footer */
.site-footer{border-top:1px solid var(--border);margin-top:40px;padding:20px 16px;background:transparent}
.site-footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;font-size:13px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--accent)}
.site-footer-copy{color:var(--muted);margin-left:auto}
@media (max-width:640px){.site-footer-inner{justify-content:center;gap:12px}.site-footer-copy{margin-left:0;width:100%;text-align:center}}

/* Auth page: stick footer to bottom, full width */
body > .site-footer{
  width:100%;
  margin-top:auto;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(8px);
}
[data-theme="dark"] body > .site-footer{background:rgba(0,0,0,0.3)}