:root {
  --cream:#f6efe3;--bone:#fbf7ef;--ink:#1d1f1b;--ink-soft:#7a7a72;
  --sage-deep:#3f4a37;--terracotta:#c5683e;--line:rgba(29,31,27,.08);
  --display:"Fraunces",serif;--body:"Manrope",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--body);background:linear-gradient(160deg,var(--cream),var(--bone));min-height:100vh;display:grid;place-items:center;padding:24px;color:var(--ink);}
.login-card{background:var(--bone);border-radius:24px;padding:40px 36px;max-width:420px;width:100%;border:1px solid var(--line);box-shadow:0 30px 60px -20px rgba(0,0,0,.08);}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;justify-content:center;}
.brand-name{font-family:var(--display);font-size:18px;font-weight:400;}
.brand-name em{font-style:italic;opacity:.6;font-size:.85em;}
h1{font-family:var(--display);font-size:28px;font-weight:400;text-align:center;margin-bottom:4px;}
.sub{text-align:center;font-size:14px;color:var(--ink-soft);margin-bottom:22px;}

.tabs{display:flex;gap:4px;margin-bottom:22px;background:var(--cream);border-radius:12px;padding:4px;}
.tab{flex:1;padding:10px;font:inherit;font-size:13px;font-weight:600;text-align:center;border-radius:10px;border:none;background:none;cursor:pointer;color:var(--ink-soft);transition:.2s;}
.tab.active{background:var(--bone);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.06);}

.auth-form{display:none;}.auth-form.active{display:block;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:5px;}
.field input{width:100%;font:inherit;font-size:15px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--cream);color:var(--ink);transition:.2s;}
.field input:focus{outline:0;border-color:var(--terracotta);background:#fff;}
.btn{width:100%;padding:14px;border:none;border-radius:12px;background:var(--ink);color:var(--cream);font:inherit;font-size:15px;font-weight:600;cursor:pointer;margin-top:10px;transition:.25s;}
.btn:hover{background:var(--terracotta);transform:translateY(-1px);}
.btn:disabled{opacity:.5;cursor:wait;transform:none;}
.error{margin-top:12px;padding:12px;background:rgba(197,104,62,.1);border:1px solid var(--terracotta);border-radius:8px;color:var(--ink);font-size:13px;display:none;}
.error:not(:empty){display:block;}
.note{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:16px;}
.note .link{background:none;border:none;color:var(--terracotta);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;}
.back{text-align:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);}
.back a{color:var(--terracotta);text-decoration:none;}