:root {
  --cream:#fbf8f2; --cream-2:#f1ece0; --cream-3:#e2dac8;
  --navy:#1e2d27; --navy-2:#141f1a;
  --gold:#d4a843; --gold-lt:#e8cd8f; --gold-bg:#fbf3e1;
  --sage:#3d6b5e; --sage-lt:#e8f2ef;
  --rust:#a03025; --rust-lt:#faeae8;
  --ink:#1c1c1a; --ink-2:#3a3835; --ink-3:#6b6760; --ink-4:#9a9590;
  --white:#fff;
  --ff:'DM Sans',system-ui,sans-serif;
  --ff-display:'Playfair Display',Georgia,serif;
  --radius:14px; --radius-lg:22px;
  --shadow-lg:0 12px 40px rgba(30,45,39,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff);background:var(--cream);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
button{font-family:var(--ff)}

.topbar{background:var(--navy);padding:22px 32px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;text-decoration:none;transition:opacity .15s}
a.topbar:hover{opacity:.88}
.topbar-brand{display:flex;flex-direction:column;gap:6px}
.topbar-cpt{font-family:var(--ff-display);font-size:26px;font-weight:700;letter-spacing:.06em;color:var(--cream);text-transform:uppercase}
.topbar-logo{font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--gold-lt)}
.topbar-logo span{color:rgba(251,248,242,.6);font-weight:400}
.topbar-sub{font-size:12px;color:rgba(251,248,242,.5);padding-bottom:3px}

@media (max-width:480px) {
  .topbar{padding:16px 20px 14px}
  .topbar-cpt{font-size:19px;letter-spacing:.03em}
  .topbar-logo{font-size:12px}
}

.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:40px}

.btn{padding:13px 26px;background:var(--navy);color:var(--cream);border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;transition:all .18s}
.btn:hover:not(:disabled){background:var(--navy-2);transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-secondary{background:var(--cream-2);color:var(--ink-2)}
.btn-secondary:hover:not(:disabled){background:var(--cream-3)}

input[type=text],input[type=email],input[type=password]{
  width:100%;padding:13px 16px;border:1.5px solid var(--cream-3);border-radius:var(--radius);
  font-family:var(--ff);font-size:15px;color:var(--ink);background:var(--white);
}
input:focus{outline:none;border-color:var(--navy)}
label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);margin-bottom:6px}
.field{margin-bottom:18px}
.error-msg{color:var(--rust);font-size:13px;margin-top:10px;display:none}
.error-msg.show{display:block}

.spin{width:36px;height:36px;border:3px solid var(--cream-3);border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}