:root{
      --primary:#c23b1a;
      --primary-dark:#151616;
      --accent:#ffb37b;
      --text:#0f172a;
      --muted:#64748b;
      --line:#e5e7eb;
      --soft:#f6f8fb;
      --radius:18px;
      --shadow:0 20px 60px rgba(15,23,42,.12);
    }

    *{box-sizing:border-box;margin:0;padding:0;}
    body{
      font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      min-height:100vh;
      background:
        radial-gradient(1200px 500px at 85% -10%, #dff8f5 0%, transparent 55%),
        radial-gradient(900px 400px at -10% 0%, #fff3e8 0%, transparent 60%),
        var(--soft);
      display:grid;
      place-items:center;
      padding:28px;
    }

    .auth-wrap{
      width:min(980px, 98%);
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:16px;
      align-items:stretch;
    }

    /* panel branding */
    .brand-panel{
      position:relative;
      border-radius:24px;
      padding:28px;
      overflow:hidden;
      background:
        linear-gradient(145deg, #0b1220 0%, #5e6464ff 55%, #aaafafff 100%);
      color:#fff;
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:460px;
    }
    .brand-panel::after{
      content:"";
      position:absolute; inset:-30% -20% auto auto;
      width:380px; height:380px; border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.22), transparent 60%);
      transform:translate(30px,-30px);
      pointer-events:none;
    }

    .brand-top{
      display:flex; align-items:center; gap:12px;
    }
    .brand-logo{
      width:56px; height:56px; border-radius:14px;
      background:rgba(255,255,255,.12);
      display:grid; place-items:center;
      overflow:hidden;
    }
    .brand-logo img{width:100%; height:100%; object-fit:contain;}
    .brand-top h2{font-size:20px; letter-spacing:.2px;}
    .brand-top p{font-size:15px; opacity:.9;}

    .brand-mid h1{
      font-size:clamp(22px,3vw,35px);
      margin:18px 0 8px;
      line-height:1.2;
    }
    .brand-mid p{
      font-size:15px; opacity:.95; max-width:420px;
    }
    .brand-list{
      margin-top:15px; display:grid; gap:10px; font-size:18px;
    }
    .brand-list span{display:flex; gap:10px; align-items:center;}
    .dot{
      width:8px; height:8px; border-radius:50%;
      background:#fff; opacity:.9;
    }

    /* register card */
    .register-card{
      background:rgba(255,255,255,.9);
      border:1px solid var(--line);
      border-radius:24px;
      padding:22px;
      box-shadow:var(--shadow);
      backdrop-filter: blur(8px);
      min-height:460px;
      display:flex; flex-direction:column; justify-content:center;
    }

    .head{
      margin-bottom:10px;
    }
    .head h3{font-size:22px; margin-bottom:4px;}
    .head p{color:var(--muted); font-size:14.5px;}

    .error{
      background:#fee2e2; color:#991b1b;
      padding:10px 12px; border-radius:12px;
      font-size:14px; margin:10px 0 12px;
      border:1px solid #fecaca;
    }
    .msg{
      background:#ecfdf5; color:#065f46;
      padding:10px 12px; border-radius:12px;
      font-size:14px; margin:10px 0 12px;
      border:1px solid #bbf7d0;
    }

    .field{display:grid; gap:6px; margin-bottom:12px;}
    .field label{font-weight:600; font-size:14px;}

    .input-wrap{position:relative;}
    .input-wrap input{
      width:100%;
      padding:12px 12px 12px 40px;
      border:1px solid var(--line);
      border-radius:12px;
      font-size:15px;
      outline:none;
      background:#fff;
      transition:.18s ease;
    }
    .input-wrap input:focus{
      border-color:#403f44;
      box-shadow:0 0 0 4px rgba(13,148,136,.12);
    }
    .icon{
      position:absolute; left:12px; top:50%; transform:translateY(-50%);
      width:18px; height:18px; opacity:.6;
    }

    .btn{
      width:100%;
      padding:12px;
      border:none;
      border-radius:12px;
      background:var(--primary);
      color:#fff;
      font-weight:800;
      font-size:15px;
      cursor:pointer;
      transition:.18s ease;
      box-shadow:0 10px 24px rgba(11,183,167,.25);
      margin-top:2px;
    }
    .btn:hover{background:var(--primary-dark); transform:translateY(-1px);}

    .links{
      text-align:center; margin-top:10px; font-size:14px;
    }
    .links a{
      color:#0a0a0a; font-weight:600; text-decoration:none;
    }
    .links a:hover{text-decoration:underline;}

    .hint{
      font-size:12.5px; color:var(--muted); text-align:center; margin-top:10px;
    }

    @media (max-width:900px){
      .auth-wrap{grid-template-columns:1fr;}
      .brand-panel{min-height:240px;}
      .register-card{min-height:auto;}
    }