:root {
      --bg: #FF5722;
      --card: #FF9800;
      --ink: #ffffff;
      --muted: #f8d8b7;
      --accent: #6ea8fe;
      --glass: #02061a;
      --glass-2: rgb(2 33 71);
      --shadow: 20px 20px 20px rgba(0, 0, 0, 0.45);
      --radius: 18px;
      --radius-lg: 24px;
      --ring: 0 0 0 3px rgba(110, 168, 254, .35);
      --maxw: 1200px;
    }
    *{
      box-sizing:border-box;
    }

    body{
      margin:0;
      background: var(--bg);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--ink);
      display:grid;
      place-items:center;
      min-height:100svh;
      padding:24px;
      background: URL('../img/splash-bg.jpg');
      background-size: cover;
    }

    .backdrop {
      position: fixed;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .6)), radial-gradient(1200px 600px at 80% -10%, rgba(255, 152, 0, .25), transparent 60%), radial-gradient(800px 400px at 10% 110%, rgba(255, 87, 34, .25), transparent 60%);
      pointer-events: none;
      z-index: 0;
    }

    .card{
      z-index: 1;
      width:100%;
      max-width:840px;
      padding:24px 22px;
      box-shadow:0 10px 30px rgba(0,0,0,.25);
      background: linear-gradient(180deg, var(--glass-2), var(--glass));
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      opacity: 0.95;
    }

    .vl {
      border-left: 1px solid #4a4a4a;
      height: 500px;
    }

    h1{
      margin:0 0 14px;
      font-weight:700;
      letter-spacing:.2px;
    }
    p.sub{
      margin:0 0 18px;
      color:var(--muted);
      font-size:14px;
    }
    form{
      display:grid;
      gap:14px;
    }
    .grid{
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr 1px 1fr;
    }
    label{
      font-size:13px;
      color:#ffefd6;
    }
    input{
      width:100%;
      padding:12px 12px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.12);
      background:#554641;
      color:var(--ink);
      outline:none;
    }
    input.captcha{
      width:CALC(7% + 16px);
      padding:12px 12px;
      border-radius:3px;
      border:1px solid rgba(255,255,255,.12);
      background:#554641;
      color:var(--ink);
      outline:none;
      text-align:center;
    }
    input:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 3px rgba(110,168,254,.15);
    }
    .row{
      display:grid;
      gap:6px
    }
    .captcha-wrap{
      display: inline-block;
    }
    .cap-box{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      background:#0d1220;
      border:1px dashed rgba(255,255,255,.18);
      border-radius:10px;
      padding:10px 12px;
    }
    .cap-q{
      font-weight:600;
    }
    #capImg {
      display:block;
      max-width:100%;
      margin: auto;
    }
    button, .btn{
      cursor:pointer;
      border:0;
      padding:12px 14px;
      border-radius:10px;
      font-weight:700;
      background: linear-gradient(90deg, var(--card), var(--bg));
      color: #111;
      box-shadow: var(--shadow);
    }
    .btn-ghost{
      background:transparent;
      color:var(--ink);
      border:1px solid rgba(255,255,255,.18);
    }
    .errors{
      background:#d10027;
      border:1px solid #5a2630;
      color:#ffb4c0;
      padding:10px 12px;
      border-radius:10px;
      margin-bottom:10px;
    }
    .ok{
      background:#0f2a16;
      border:1px solid #1e5830;
      color:#b9ffcf;
      padding:10px 12px;
      border-radius:10px;
      margin-bottom:10px;
    }
    .content {
      background-color: RGBA(0, 0, 0, 0.5);
      padding: 10px 20px;
      height: 378px;
      border-radius: 10px;
      border: 1px solid;
      margin: 0 20px 0;
      place-content: center;
    }
    .no-center h3 {
      margin-top: 5px;
    }
    @media (max-width:820px) {
      .grid{
        grid-template-columns:1fr;
      }
      .vl {
	border-left: unset;
        border-bottom: 1px solid #4a4a4a;
        height: 1px;
      }
    }
    @media (max-width:460px) {
      .grid{
        grid-template-columns:1fr;
      }
      .vl {
        border-left: unset;
        border-bottom: 1px solid #4a4a4a;
        height: 1px;
      }
      .content {
         height: 450px;
      }
    }