:root {
  --bg:      #0d1117;
  --bg2:     #161b22;
  --bg3:     #1c2230;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.14);
  --text:    #e6edf3;
  --muted:   #8b949e;
  --yellow:  #ffd700;
  --green:   #39d353;
  --blue:    #58a6ff;
  --red:     #ff4757;
  --purple:  #a78bfa;
  --orange:  #ff7043;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; line-height:1.6; }

/* -- HEADER -- */
header {
  position:sticky; top:0; z-index:100;
  background:rgba(13,17,23,0.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  height:60px;
}
.hdr { max-width:1280px; margin:0 auto; padding:0 1.5rem; height:100%; display:flex; align-items:center; gap:1.5rem; }
.logo { display:flex; align-items:center; gap:0.6rem; text-decoration:none; flex-shrink:0; }
.logo-box { background:var(--yellow); color:#0d1117; font-family:'Press Start 2P',monospace; font-size:0.5rem; padding:0.35rem 0.5rem; border-radius:3px; line-height:1; }
.logo-name { font-family:'Press Start 2P',monospace; font-size:0.65rem; color:var(--text); line-height:1.4; }
.logo-name em { color:var(--yellow); font-style:normal; }
nav { display:flex; align-items:center; gap:0.1rem; margin-left:auto; }
nav a { font-size:0.84rem; font-weight:500; color:var(--muted); text-decoration:none; padding:0.38rem 0.75rem; border-radius:5px; transition:all .15s; }
nav a:hover { color:var(--text); background:rgba(255,255,255,.06); }
.nav-rand { background:var(--yellow); color:#0d1117 !important; font-weight:700; margin-left:.3rem; }
.nav-rand:hover { background:#ffe333 !important; }
.hdr-search { position:relative; display:flex; align-items:center; }
.hdr-search input { background:var(--bg2); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:.83rem; padding:.38rem 2.2rem .38rem .8rem; width:190px; outline:none; transition:border-color .2s, width .25s; }
.hdr-search input:focus { border-color:var(--yellow); width:240px; }
.hdr-search input::placeholder { color:var(--muted); }
.hdr-search svg { position:absolute; right:.6rem; width:14px; color:var(--muted); pointer-events:none; }
.ham { display:none; flex-direction:column; gap:5px; width:36px; height:36px; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:6px; cursor:pointer; padding:0 9px; margin-left:auto; flex-shrink:0; transition:border-color .15s; justify-content:center; }
.ham:hover { border-color:var(--yellow); }
.ham span { height:2px; background:var(--text); border-radius:2px; transition:all .22s; display:block; }
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.drawer { display:none; position:fixed; top:60px; left:0; right:0; background:rgba(13,17,23,.97); backdrop-filter:blur(18px); border-bottom:1px solid var(--border); z-index:99; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s, transform .18s; }
.drawer.open { opacity:1; transform:translateY(0); pointer-events:all; }
.drawer-in { max-width:1280px; margin:0 auto; padding:.9rem 1.25rem 1.25rem; display:flex; flex-direction:column; gap:.25rem; }
.drawer-in a { display:flex; align-items:center; color:var(--muted); text-decoration:none; font-size:.95rem; font-weight:500; padding:.65rem .75rem; border-radius:7px; transition:all .12s; }
.drawer-in a:hover { color:var(--text); background:rgba(255,255,255,.05); }
.drawer-cta { background:var(--yellow) !important; color:#0d1117 !important; font-weight:700; font-family:'Press Start 2P',monospace; font-size:.55rem; justify-content:center; border-radius:7px; margin-top:.4rem; }
.drawer-div { height:1px; background:var(--border); margin:.4rem .75rem; }

/* -- BREADCRUMB -- */
.bc-bar { border-bottom:1px solid var(--border); padding:.45rem 1.5rem; }
.bc { max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--muted); }
.bc a { color:var(--muted); text-decoration:none; }
.bc a:hover { color:var(--yellow); }
.bc .sep { color:var(--border2); }

/* -- PAGE LAYOUT -- */
.page { max-width:1280px; margin:0 auto; padding:2.5rem 1.5rem 5rem; display:grid; grid-template-columns:1fr 320px; gap:2.5rem; align-items:start; }

/* -- FORM CARD -- */
.form-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.form-card-hd {
  padding:1.5rem 1.75rem 1.25rem;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:1rem;
}
.form-card-icon {
  width:42px; height:42px;
  background:var(--yellow);
  color:#0d1117;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Press Start 2P',monospace;
  font-size:.7rem;
  flex-shrink:0;
  box-shadow:0 4px 0 rgba(180,140,0,.4);
}
.form-card-hd h1 {
  font-family:'Press Start 2P',monospace;
  font-size:.85rem;
  color:var(--text);
  line-height:1.5;
  letter-spacing:.05em;
}
.form-card-hd p {
  font-size:.83rem;
  color:var(--muted);
  margin-top:.2rem;
}
.form-body { padding:1.75rem; }

/* -- FIELD GROUPS -- */
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field:last-of-type { margin-bottom:0; }

.field label {
  font-size:.78rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.03em;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.field label .req { color:var(--yellow); font-size:.85em; }
.field label .field-hint {
  margin-left:auto;
  font-size:.72rem;
  font-weight:400;
  color:var(--muted);
  opacity:.6;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:7px;
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:.92rem;
  padding:.62rem .85rem;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  width:100%;
}
.field input:focus {
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(255,215,0,.08);
}
.field input::placeholder { color:rgba(255,255,255,.2); }
.field input.valid   { border-color:var(--green); }
.field input.invalid { border-color:var(--red); }

/* Inline status message below a field */
.field-msg {
  font-size:.74rem;
  min-height:1rem;
  display:flex;
  align-items:center;
  gap:.3rem;
}
.field-msg.ok  { color:var(--green); }
.field-msg.err { color:var(--red); }
.field-msg.checking { color:var(--muted); }

/* Password strength bar */
.strength-wrap { display:flex; align-items:center; gap:.6rem; margin-top:.25rem; }
.strength-bar { flex:1; height:4px; background:var(--border2); border-radius:2px; overflow:hidden; }
.strength-fill { height:100%; border-radius:2px; width:0; transition:width .3s, background .3s; }
.strength-label { font-size:.7rem; color:var(--muted); min-width:3rem; text-align:right; }

/* -- CAPTCHA -- */
.captcha-wrap {
  display:flex;
  align-items:center;
  gap:.85rem;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:7px;
  padding:.6rem .85rem;
  margin-bottom:.5rem;
}
.captcha-img {
  background:#fff;
  border-radius:4px;
  overflow:hidden;
  flex-shrink:0;
  line-height:0;
}
.captcha-img img { display:block; width:120px; height:40px; }
.captcha-refresh {
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  color:var(--blue);
  text-decoration:none;
  cursor:pointer;
  transition:color .12s;
  white-space:nowrap;
  flex-shrink:0;
}
.captcha-refresh:hover { color:var(--yellow); }
.captcha-refresh svg { width:14px; transition:transform .4s; }
.captcha-refresh:hover svg { transform:rotate(180deg); }

/* -- DIVIDER -- */
.form-divider {
  height:1px;
  background:var(--border);
  margin:1.5rem 0;
}

/* -- AGREE CHECKBOX -- */
.agree-row {
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.9rem 1rem;
  background:rgba(255,215,0,.04);
  border:1px solid rgba(255,215,0,.12);
  border-radius:8px;
  margin-bottom:1.5rem;
  cursor:pointer;
}
.agree-row input[type="checkbox"] {
  appearance:none;
  -webkit-appearance:none;
  width:18px; height:18px;
  border:2px solid var(--border2);
  border-radius:4px;
  background:var(--bg);
  flex-shrink:0;
  margin-top:2px;
  cursor:pointer;
  transition:all .15s;
  position:relative;
}
.agree-row input[type="checkbox"]:checked {
  background:var(--yellow);
  border-color:var(--yellow);
}
.agree-row input[type="checkbox"]:checked::after {
  content:'';
  position:absolute;
  top:1px; left:4px;
  width:6px; height:10px;
  border:2px solid #0d1117;
  border-top:none; border-left:none;
  transform:rotate(45deg);
}
.agree-label {
  font-size:.84rem;
  color:var(--muted);
  line-height:1.5;
  cursor:pointer;
}
.agree-label a { color:var(--blue); text-decoration:none; }
.agree-label a:hover { color:var(--yellow); text-decoration:underline; }

/* -- SUBMIT ROW -- */
.submit-row {
  display:flex;
  gap:.75rem;
  align-items:center;
}
.btn-submit {
  flex:1;
  background:var(--yellow);
  color:#0d1117;
  border:none;
  border-radius:7px;
  font-family:'Press Start 2P',monospace;
  font-size:.55rem;
  padding:.85rem 1.25rem;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.08em;
  box-shadow:0 4px 0 rgba(180,140,0,.5);
  transition:all .15s;
  text-transform:uppercase;
}
.btn-submit:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 0 rgba(180,140,0,.4); }
.btn-submit:active:not(:disabled) { transform:translateY(1px); box-shadow:0 2px 0 rgba(180,140,0,.4); }
.btn-submit:disabled {
  background:var(--bg3);
  color:var(--muted);
  cursor:not-allowed;
  box-shadow:none;
}
.btn-reset {
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border2);
  border-radius:7px;
  font-family:'DM Sans',sans-serif;
  font-size:.85rem;
  font-weight:500;
  padding:.82rem 1.1rem;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.btn-reset:hover { color:var(--text); border-color:var(--border2); background:rgba(255,255,255,.04); }

.required-note {
  font-size:.75rem;
  color:var(--muted);
  margin-top:1rem;
  text-align:right;
}
.required-note em { color:var(--yellow); font-style:normal; }

/* -- SUCCESS STATE -- */
.success-state {
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:3rem 1.75rem;
  gap:1rem;
}
.success-icon {
  width:64px; height:64px;
  background:rgba(57,211,83,.1);
  border:2px solid var(--green);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
}
.success-state h2 { font-family:'Press Start 2P',monospace; font-size:.75rem; color:var(--green); line-height:1.7; }
.success-state p { font-size:.88rem; color:var(--muted); max-width:320px; line-height:1.6; }
.success-state a { color:var(--yellow); text-decoration:none; font-weight:600; }

/* -- SIDEBAR -- */
.sidebar { position:sticky; top:76px; display:flex; flex-direction:column; gap:1rem; }
.sb { background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.sb-hd { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-bottom:1px solid var(--border); }
.sb-pip { width:6px; height:6px; border-radius:1px; flex-shrink:0; }
.sb-hd h3 { font-family:'Press Start 2P',monospace; font-size:.46rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.sb-bd { padding:.8rem .9rem; }
.sb-bd p { font-size:.83rem; color:var(--muted); line-height:1.65; }
.sb-bd p + p { margin-top:.7rem; }
.sb-bd a { color:var(--blue); text-decoration:none; }
.sb-bd a:hover { color:var(--yellow); }

.perk-list { display:flex; flex-direction:column; gap:.55rem; }
.perk { display:flex; align-items:flex-start; gap:.65rem; }
.perk-icon { font-size:1rem; flex-shrink:0; margin-top:.05rem; }
.perk-text { font-size:.82rem; color:var(--muted); line-height:1.5; }
.perk-text strong { color:var(--text); font-weight:600; }

.login-prompt {
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.login-prompt input {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:.83rem;
  padding:.45rem .65rem;
  outline:none;
  width:100%;
  transition:border-color .15s;
}
.login-prompt input:focus { border-color:var(--yellow); }
.login-prompt input::placeholder { color:rgba(255,255,255,.2); }
.login-btn {
  background:var(--yellow);
  color:#0d1117;
  font-family:'Press Start 2P',monospace;
  font-size:.48rem;
  padding:.6rem;
  border:none;
  border-radius:5px;
  cursor:pointer;
  width:100%;
  font-weight:700;
  letter-spacing:.06em;
  box-shadow:0 3px 0 rgba(180,140,0,.45);
  transition:all .12s;
}
.login-btn:hover { transform:translateY(-1px); }
.lf-links { display:flex; justify-content:space-between; }
.lf-links a { font-size:.73rem; color:var(--blue); text-decoration:none; }
.lf-links a:hover { color:var(--yellow); }

/* -- FOOTER -- */
footer { background:var(--bg2); border-top:1px solid var(--border); padding:2rem 1.5rem; }
.ftr { max-width:1280px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.ftr-logo { font-family:'Press Start 2P',monospace; font-size:.62rem; color:var(--muted); }
.ftr-logo em { color:var(--yellow); font-style:normal; }
.ftr-links { display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; }
.ftr-links a { font-size:.8rem; color:var(--muted); text-decoration:none; transition:color .12s; }
.ftr-links a:hover { color:var(--text); }
.ftr-copy { font-size:.72rem; color:rgba(255,255,255,.15); font-family:'DM Mono',monospace; text-align:center; }

/* -- RESPONSIVE -- */
@media(max-width:860px) {
  .page { grid-template-columns:1fr; gap:1.5rem; }
  .sidebar { position:static; }
}
@media(max-width:640px) {
  .ham { display:flex; }
  .drawer { display:block; }
  nav, .hdr-search { display:none; }
  .page { padding:1.5rem 1rem 4rem; }
  .field-row { grid-template-columns:1fr; }
  .form-body { padding:1.25rem; }
  .form-card-hd { padding:1.1rem 1.25rem 1rem; }
}