@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Pacifico&family=Quicksand:wght@400;500;600;700&display=swap');

:root{
  --navy-deep:#0f0d33;
  --navy:#12103a;
  --panel:#211c5c;
  --panel-border:#3a3480;
  --purple:#7b68ac;
  --gold-1:#f6d488;
  --gold-2:#e8b84b;
  --gold-3:#c98f2b;
  --ink:#e8e4f5;
  --ink-dim:#b7b0e0;
  --error:#e2725b;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:
    radial-gradient(1px 1px at 8% 12%, #fff5, transparent),
    radial-gradient(1px 1px at 22% 38%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 76% 18%, #fff6, transparent),
    radial-gradient(1px 1px at 88% 42%, #fff5, transparent),
    radial-gradient(1.5px 1.5px at 60% 72%, #fff7, transparent),
    radial-gradient(1px 1px at 34% 82%, #fff5, transparent),
    radial-gradient(1px 1px at 12% 64%, #fff4, transparent),
    radial-gradient(1.5px 1.5px at 92% 78%, #fff6, transparent),
    radial-gradient(1px 1px at 50% 8%, #fff4, transparent),
    radial-gradient(3px 3px at 14% 22%, #f6d488cc, transparent 70%),
    radial-gradient(2.5px 2.5px at 84% 30%, #f6d488bb, transparent 70%),
    radial-gradient(3px 3px at 78% 60%, #f6d488aa, transparent 70%),
    radial-gradient(2px 2px at 20% 90%, #f6d488aa, transparent 70%),
    radial-gradient(2.5px 2.5px at 90% 88%, #f6d488bb, transparent 70%),
    linear-gradient(180deg, var(--navy-deep), var(--navy) 40%, var(--navy-deep));
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Quicksand', sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.wrap{
  max-width:560px;
  margin:0 auto;
  padding:64px 28px 40px;
  flex:1;
  width:100%;
}

.brand-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:36px;
}

.brand-mark img{
  width:96px;
  height:96px;
  border-radius:24px;
  box-shadow:0 0 40px 6px #7b68ac55;
}

.brand-mark .wordmark{
  font-family:'Pacifico', cursive;
  font-weight:400;
  font-size:2.8rem;
  margin:18px 0 4px;
  background:linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:0.5px;
}

.brand-mark .tagline{
  color:var(--ink-dim);
  font-size:1rem;
  margin:0;
}

a{color:var(--gold-2);}

.card{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:20px;
  padding:32px 28px;
}

h1.page-title{
  font-family:'Baloo 2', cursive;
  color:var(--gold-1);
  font-size:1.7rem;
  text-align:center;
  margin:0 0 8px;
}

p.page-sub{
  text-align:center;
  color:var(--ink-dim);
  margin:0 0 28px;
  font-size:0.95rem;
  line-height:1.5;
}

label{
  display:block;
  font-size:0.9rem;
  color:var(--ink-dim);
  margin:0 0 6px;
}

input[type="password"],
input[type="email"],
input[type="text"]{
  width:100%;
  background:var(--navy-deep);
  border:1px solid var(--panel-border);
  color:var(--ink);
  border-radius:14px;
  padding:14px 16px;
  font-size:1rem;
  font-family:inherit;
  margin-bottom:20px;
}

input::placeholder{color:#8880c0;}

input:focus{
  outline:2px solid var(--gold-2);
  outline-offset:1px;
}

button, .btn{
  display:block;
  width:100%;
  border:none;
  border-radius:999px;
  padding:15px 20px;
  font-family:'Baloo 2', cursive;
  font-weight:600;
  font-size:1.05rem;
  color:#241a05;
  background:linear-gradient(180deg, var(--gold-1), var(--gold-3));
  cursor:pointer;
  text-align:center;
  text-decoration:none;
}

button:hover, .btn:hover{filter:brightness(1.05);}
button:disabled{opacity:0.5; cursor:not-allowed;}

.msg{
  border-radius:14px;
  padding:14px 16px;
  font-size:0.92rem;
  margin-bottom:20px;
  display:none;
}
.msg.show{display:block;}
.msg.success{background:#2e5a3e; color:#d6f5e0;}
.msg.error{background:#5a2e2e; color:#f5d6d6;}

footer{
  text-align:center;
  padding:28px 20px 36px;
  color:var(--ink-dim);
  font-size:0.85rem;
}

footer a{color:var(--ink-dim); text-decoration:underline; margin:0 8px;}

.legal h1{
  font-family:'Baloo 2', cursive;
  color:var(--gold-1);
  font-size:1.6rem;
}
.legal h2{
  color:var(--gold-2);
  font-size:1.1rem;
  margin-top:28px;
}
.legal p, .legal li{
  color:var(--ink);
  line-height:1.6;
  font-size:0.96rem;
}
.legal{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:20px;
  padding:32px 28px;
}