:root{
  --panel: rgba(10, 6, 26, 0.92);
  --panel2: rgba(8, 5, 20, 0.90);
  --border: rgba(255, 77, 196, 0.40);
  --border2: rgba(77, 201, 255, 0.35);
  --text: rgba(245, 245, 255, 0.95);
  --muted: rgba(245, 245, 255, 0.78);
  --hot: #ff4dc4;
  --cold: #4dc9ff;
  --ok: #66ffb3;
  --bad: #ff6b6b;
  --shadow: 0 16px 40px rgba(0,0,0,.55);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: url("/shbg.jpg") center/cover no-repeat fixed;
}

a{ color: var(--cold); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  width: 95%;
  max-width: none;
  margin: 0 auto;
  padding: 26px 0 42px 0;
}

.header{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(6,4,16,0.45);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.header h1{
  margin:0;
  font-size: 22px;
  letter-spacing: .6px;
}
.header .tagline{
  margin:0;
  font-size: 13px;
  color: var(--muted);
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.panel{
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel .panelInner{
  padding: 16px;
}

.panelTitle{
  margin: 0 0 10px 0;
  font-size: 15px;
  letter-spacing: .5px;
  color: var(--text);
}

.neonLine{
  height: 2px;
  background: linear-gradient(90deg, var(--hot), transparent, var(--cold));
  opacity: .85;
  margin: 10px 0 14px 0;
}

.welcomeText{
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  white-space: pre-line;
}

.formRow{
  display:flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}

label{
  font-size: 12px;
  color: var(--muted);
}

input[type="text"], input[type="email"], textarea{
  width: 100%;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  color: var(--text);
  outline: none;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus{
  border-color: rgba(255, 77, 196, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 77, 196, 0.15);
}

textarea{
  min-height: 130px;
  resize: vertical;
}

.charCount{
  display:flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.checkRow{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 10px;
}
.checkRow input{
  margin-top: 3px;
}

.btn{
  appearance:none;
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor:pointer;
  color: rgba(10,8,22,0.95);
  background: linear-gradient(90deg, var(--hot), var(--cold));
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}

.notice{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  font-size: 13px;
  color: var(--muted);
}
.notice.ok{
  border-color: rgba(102,255,179,0.28);
  color: rgba(215,255,235,0.9);
}
.notice.bad{
  border-color: rgba(255,107,107,0.30);
  color: rgba(255,230,230,0.9);
}

.embedWrap iframe{
  width: 100%;
  border: 0;
}

/* Mobile */
@media (max-width: 1020px){
  .grid{
    grid-template-columns: 1fr;
  }
  .header{
    flex-direction: column;
    align-items:flex-start;
  }
}

/* Equal width captcha fields */
.captchaRow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.captchaRow .captchaDisplay,
.captchaRow input{
  width: 100%;
}

/* Two column form row */
.formRowSplit{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 720px){
  .formRowSplit{
    grid-template-columns: 1fr;
  }
}