:root{
  --bg:#0e0f13;
  --bg-raised:#16181f;
  --card-border:#272a34;
  --text:#e9e9ee;
  --text-faint:#8a8d99;
  --matin:#e08a3e;
  --aprem:#2f9c93;
  --soiree:#c2447e;
  --danger:#c2447e;
  --mono:'IBM Plex Mono', monospace;
  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg);color:var(--text);font-family:var(--body);
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:var(--aprem);}
.wrap{max-width:960px;margin:0 auto;padding:0 24px;}
button, input, select, textarea{font-family:inherit;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--card-border);background:var(--bg-raised);color:var(--text);
  padding:10px 18px;border-radius:8px;transition:filter .15s;
}
.btn:hover{filter:brightness(1.15);}
.btn.primary{background:var(--aprem);border-color:var(--aprem);color:#08130f;}
.btn.danger{color:var(--danger);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn.block{width:100%;}

.card{
  border:1px solid var(--card-border);background:var(--bg-raised);
  border-radius:12px;padding:22px;
}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--text-faint);margin-bottom:6px;font-family:var(--mono);letter-spacing:.03em;}
.field input, .field select{
  width:100%;background:var(--bg);border:1px solid var(--card-border);
  color:var(--text);border-radius:7px;padding:10px 12px;font-size:14.5px;
}
.field input:focus, .field select:focus{outline:none;border-color:var(--aprem);}

.hint{font-size:12.5px;color:var(--text-faint);margin-top:6px;}
.error-box{
  background:rgba(194,68,126,.12);border:1px solid rgba(194,68,126,.4);
  color:#f0b8cf;border-radius:8px;padding:10px 14px;font-size:13.5px;margin-bottom:14px;
}
.success-box{
  background:rgba(47,156,147,.12);border:1px solid rgba(47,156,147,.4);
  color:#a9e6df;border-radius:8px;padding:10px 14px;font-size:13.5px;margin-bottom:14px;
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;border-bottom:1px solid var(--card-border);margin-bottom:32px;
}
.topbar .brand{font-family:var(--display);font-weight:700;font-size:18px;display:flex;align-items:center;gap:12px;}
.topbar .brand .accent{color:var(--aprem);}
.topbar .brand img{height:38px;width:auto;display:block;}

.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--card-border);border-top-color:var(--aprem);
  animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

.hidden{display:none !important;}