:root{
    --overlay:rgba(0,0,0,.66);
    --cardTop:#1a1a1a;
    --cardBottom:#121212;
    --line:rgba(255,255,255,.08);
    --text:#fff;
    --muted:rgba(255,255,255,.60);
    --muted2:rgba(255,255,255,.46);
    --inputBg:#0e0e0e;
    --inputBorder:rgba(255,255,255,.14);
    --inputGlow:rgba(255,255,255,.08);
    --danger:#ff6b6b;
    --dangerBorder:rgba(255,107,107,.72);
    --dangerGlow:rgba(255,107,107,.12);
    --topbarWhite:#fff;
    --topbarDark:#242424;
    --ghostHover:rgba(255,255,255,.06);
    --h:68px;
    --padX:clamp(14px,2.2vw,26px);
  }

  *{
    box-sizing:border-box;
  }

  html,
  body{
    min-height:100%;
  }

  body{
    margin:0;
    font-family:'Montserrat',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif;
    color:var(--text);
    background:#000;
  }

  button,
  input,
  textarea,
  select,
  a{
    font-family:'Montserrat',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif;
  }

  .pageBackground{
    position:fixed;
    inset:0;
    z-index:-1;
    background:
      linear-gradient(var(--overlay),var(--overlay)),
      url('https://cdn.midwesternroleplay.com/images/background-1.png') center / cover no-repeat;
  }

  a{
    color:inherit;
    text-decoration:none;
  }

  .loginWrap{
    min-height:calc(100vh - var(--h));
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px var(--padX) 54px;
  }

  .authCard{
    width:100%;
    max-width:560px;
    border-radius:22px;
    overflow:visible;
    border:1px solid var(--line);
    background:linear-gradient(180deg,var(--cardTop),var(--cardBottom));
    backdrop-filter:blur(6px);
    box-shadow:0 18px 60px rgba(0,0,0,.35);
  }

  .authForm{
    padding:26px 24px 24px;
  }

  .authHeader{
    margin-bottom:18px;
  }

  .authTitle{
    margin:0 0 3px;
    font-size:24px;
    font-weight:900;
    line-height:1.1;
    text-align:left;
  }

  .authSub{
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
    text-align:left;
    font-weight:600;
  }

  .supportGrid{
    display:block;
  }

  .formRow{
    margin-top:12px;
  }

  .formRow:first-child{
    margin-top:0;
  }

  .formLabel{
    display:block;
    margin:0 0 5px;
    color:#fff;
    font-size:11px;
    font-weight:800;
  }

  .discordUserIdLabel{
    display:flex;
    align-items:center;
    gap:5px;
  }

  .discordUserIdHelp{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    cursor:default;
    outline:none;
  }

  .discordUserIdHelpIcon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:15px;
    height:15px;
    border:1px solid rgba(255,255,255,.62);
    border-radius:999px;
    color:rgba(255,255,255,.88);
    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1;
  }

  .discordUserIdTooltip{
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    z-index:60;
    width:min(240px,calc(100vw - 70px));
    padding:9px 10px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:9px;
    background:rgba(14,14,14,.98);
    box-shadow:0 14px 36px rgba(0,0,0,.38);
    color:rgba(255,255,255,.84);
    font-size:11px;
    font-weight:650;
    line-height:1.4;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,4px);
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
  }

  .discordUserIdHelp:hover .discordUserIdTooltip,
  .discordUserIdHelp:focus .discordUserIdTooltip{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
    transition-delay:0s;
  }

  input,
  textarea,
  .nativeSelect{
    width:100%;
    border-radius:8px;
    border:1px solid var(--inputBorder);
    background:var(--inputBg);
    color:#fff;
    font-size:13px;
    font-weight:650;
    outline:none;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  }

  input,
  .nativeSelect{
    height:42px;
    padding:0 12px;
  }

  textarea{
    min-height:120px;
    max-height:210px;
    padding:12px;
    resize:vertical;
    line-height:1.45;
  }

  input::placeholder,
  textarea::placeholder{
    color:rgba(255,255,255,.35);
  }

  input:focus,
  textarea:focus,
  .nativeSelect:focus{
    border-color:var(--inputBorder);
    box-shadow:none;
  }

  input.isInvalid,
  textarea.isInvalid,
  .nativeSelect.isInvalid,
  .cselectBtn.isInvalid{
    border-color:var(--dangerBorder) !important;
    box-shadow:0 0 0 3px var(--dangerGlow) !important;
  }

  .nativeSelect{
    appearance:none;
    cursor:pointer;
  }

  .hintRow{
    margin-top:7px;
    color:var(--muted2);
    font-size:11px;
    line-height:1.35;
    font-weight:650;
  }

  .fieldErr{
    display:none;
    margin-top:7px;
    color:var(--danger);
    font-size:11px;
    line-height:1.35;
    font-weight:750;
  }

  .fieldErr.show{
    display:block;
  }

  .emailMatchHint{
    display:none;
  }

  .emailMatchHint.bad{
    display:block;
    color:var(--danger);
  }

  .turnstileRow{
    margin-top:14px;
  }

  .legalText{
    margin-top:12px;
    color:rgba(255,255,255,.54);
    font-size:10.5px;
    line-height:1.45;
    font-weight:600;
  }

  .legalText a{
    color:rgba(255,255,255,.88);
    text-decoration:underline;
    text-underline-offset:2px;
  }

  .primaryBtn{
    position:relative;
    width:100%;
    height:44px;
    margin-top:16px;
    border-radius:8px;
    border:1px solid var(--topbarWhite);
    background:var(--topbarWhite);
    color:var(--topbarDark);
    font-weight:900;
    font-size:13px;
    letter-spacing:.005em;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    overflow:hidden;
    transition:transform .16s ease,filter .16s ease,opacity .16s ease;
  }

  .primaryBtn:hover:not(:disabled){
    transform:translateY(-1px);
    filter:brightness(.96);
  }

  .primaryBtn:active:not(:disabled){
    transform:translateY(0);
  }

  .primaryBtn:disabled{
    opacity:.46;
    cursor:not-allowed;
  }

  .primaryBtn.isLoading:disabled{
    opacity:1;
    pointer-events:none;
  }

  .formButtonLabel{
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
    transform:translateY(0);
    transition:opacity .22s ease,transform .22s ease;
  }

  .primaryBtn.isLoading .formButtonLabel{
    opacity:0;
    transform:translateY(-6px);
  }

  .formButtonLoader{
    position:absolute;
    width:24px;
    height:24px;
    border:3px solid rgba(0,0,0,.16);
    border-top-color:#111;
    border-radius:999px;
    opacity:0;
    transform:scale(.8);
    transition:opacity .22s ease,transform .22s ease;
  }

  .primaryBtn.isLoading .formButtonLoader{
    opacity:1;
    transform:scale(1);
    animation:formButtonSpinLoader .75s linear infinite;
  }

  @keyframes formButtonSpinLoader{
    to{transform:scale(1) rotate(360deg);}
  }

  .divider{
    margin:15px 0 0;
    width:100%;
    min-height:36px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.60);
    background:transparent;
    font-size:12px;
    font-weight:750;
    letter-spacing:.005em;
    text-align:center;
  }

  .subRow.isHidden{
    display:none;
  }

  .subRow.isShown{
    display:block;
  }

  .cselect{
    position:relative;
    width:100%;
  }

  .cselectBtn{
    width:100%;
    height:42px;
    padding:0 12px;
    border-radius:8px;
    background:var(--inputBg);
    border:1px solid var(--inputBorder);
    color:#fff;
    text-align:left;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:13px;
    font-weight:650;
    outline:none;
    transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  }

  .cselectBtn:focus{
    border-color:var(--inputBorder);
    box-shadow:none;
  }

  .cselectValue{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .cselectChevron{
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:6px solid rgba(255,255,255,.70);
    flex:0 0 auto;
  }

  .cselectMenu{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    background:rgba(14,14,14,.98);
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    box-shadow:0 22px 70px rgba(0,0,0,.70);
    padding:6px;
    max-height:220px;
    overflow:auto;
    display:none;
    z-index:50;
    backdrop-filter:blur(10px);
  }

  .cselect.open .cselectMenu{
    display:block;
  }

  .cselectMenu:focus{
    outline:none;
  }

  .cselectOpt{
    padding:10px 10px;
    border-radius:8px;
    cursor:pointer;
    color:rgba(255,255,255,.88);
    font-size:13px;
    font-weight:650;
    user-select:none;
  }

  .cselectOpt:hover{
    background:var(--ghostHover);
  }

  .cselectOpt[aria-selected="true"]{
    background:rgba(255,255,255,.10);
  }

  .cselectOptMuted{
    color:rgba(255,255,255,.45);
  }

  .nativeSelect{
    display:none;
  }

  .toastWrap{
    position:fixed;
    right:18px;
    top:calc(var(--h) + 18px);
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
  }

  .toast{
    pointer-events:auto;
    width:min(420px, calc(100vw - 36px));
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(14,14,14,.94);
    box-shadow:0 22px 70px rgba(0,0,0,.70);
    backdrop-filter:blur(10px);
    padding:12px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    transform:translateX(16px);
    opacity:0;
    transition:transform .18s ease, opacity .18s ease;
  }

  .toast.show{
    transform:translateX(0);
    opacity:1;
  }

  .toastIcon{
    width:18px;
    height:18px;
    border-radius:999px;
    margin-top:2px;
    flex:0 0 auto;
  }

  .toastIcon.ok{
    background:rgba(80,255,160,.18);
    border:1px solid rgba(80,255,160,.28);
  }

  .toastIcon.bad{
    background:rgba(255,80,80,.18);
    border:1px solid rgba(255,80,80,.35);
  }

  .toastTitle{
    font-weight:900;
    font-size:13px;
    line-height:1.2;
  }

  .toastMsg{
    margin-top:2px;
    color:rgba(255,255,255,.72);
    font-size:13px;
    line-height:1.35;
    font-weight:600;
  }

  .toastClose{
    margin-left:auto;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.65);
    font-size:16px;
    line-height:1;
    cursor:pointer;
    padding:2px 6px;
    outline:0;
  }

  .toastClose:hover{
    color:rgba(255,255,255,.92);
  }

  @media(max-width:900px){
    .loginWrap{
      min-height:calc(100svh - var(--h));
      align-items:flex-start;
      justify-content:center;
      padding:28px 14px 34px;
    }

    .authCard{
      max-width:500px;
      border-radius:18px;
    }

    .authForm{
      padding:24px 20px 22px;
    }

    input,
    .nativeSelect,
    .cselectBtn{
      height:44px;
      font-size:14px;
    }

    .nativeSelect{
      display:block;
    }

    .cselect{
      display:none;
    }

    .primaryBtn{
      height:45px;
    }
  }

  @media(max-width:480px){
    .loginWrap{
      align-items:flex-start;
      padding-top:18px;
      padding-left:12px;
      padding-right:12px;
    }

    .authCard{
      max-width:none;
      border-radius:16px;
    }

    .authForm{
      padding:22px 18px 20px;
    }

    .authTitle{
      font-size:22px;
    }

    .authSub{
      font-size:12px;
      line-height:1.45;
    }

    textarea{
      min-height:115px;
    }

    .legalText{
      font-size:10px;
    }

    .toastWrap{
      right:12px;
      top:calc(var(--h) + 12px);
    }

    .toast{
      width:calc(100vw - 24px);
    }
  }

  @media(max-width:360px){
    .loginWrap{
      padding-left:10px;
      padding-right:10px;
    }

    .authForm{
      padding:20px 14px 18px;
    }

    .authTitle{
      font-size:21px;
    }

    input,
    .nativeSelect,
    .cselectBtn,
    .primaryBtn{
      height:43px;
    }
  }