/* page-specific: gate (extracted from inline <style> per GRules) */
  /* override base body settings */
  html{overflow:auto}
  body{display:flex;height:100vh;overflow:hidden;background:var(--paper)}

  /* ── Split layout ── */
  .gate-wrap{display:flex;width:100%;height:100vh}

  /* Left brand panel */
  .gate-brand{
    flex:1;
    position:relative;
    background:linear-gradient(135deg,#1C3E4D 0%,#254F62 55%,#1E7A8A 120%);
    display:flex;flex-direction:column;justify-content:space-between;
    padding:48px 56px;
    color:#fff;
    overflow:hidden;
  }
  /* decorative orbs */
  .gate-brand::before,
  .gate-brand::after{
    content:'';position:absolute;border-radius:50%;
    background:radial-gradient(circle,rgba(43,158,179,.32) 0%,transparent 70%);
    pointer-events:none;
  }
  .gate-brand::before{width:540px;height:540px;top:-180px;right:-160px}
  .gate-brand::after{width:380px;height:380px;bottom:-140px;left:-120px;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%)}

  .gate-brand-top{display:flex;align-items:center;gap:14px;position:relative;z-index:2}
  .gate-brand-logo{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;padding:6px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
  .gate-brand-logo img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
  .gate-brand-name{font-size:1.6rem;font-weight:700;letter-spacing:.04em}
  .gate-brand-sub{font-size:1.1rem;color:rgba(255,255,255,.6);margin-top:2px;letter-spacing:.06em}

  .gate-brand-mid{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;max-width:480px}
  .gate-tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:1.05rem;font-weight:500;padding:5px 12px;border-radius:20px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}
  .gate-tag .ms-r{font-size:1.4rem;color:var(--teal-m)}
  .gate-headline{font-size:3.8rem;font-weight:700;line-height:1.15;letter-spacing:-.5px}
  .gate-headline span{background:linear-gradient(90deg,#7DD3DC 0%,#FFFFFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .gate-lead{font-size:1.4rem;line-height:1.7;color:rgba(255,255,255,.78);max-width:440px}

  .gate-brand-bot{position:relative;z-index:2;display:flex;gap:32px;font-size:1.1rem;color:rgba(255,255,255,.55)}
  .gate-brand-bot .item{display:flex;align-items:center;gap:6px}
  .gate-brand-bot .ms-r{font-size:1.4rem;color:var(--teal-m)}

  /* Right form panel */
  .gate-form-panel{
    width:480px;flex-shrink:0;
    background:var(--card);
    display:flex;flex-direction:column;justify-content:center;
    padding:64px 56px;
    box-shadow:-24px 0 48px rgba(0,0,0,.06);
  }
  .gate-form{display:flex;flex-direction:column;gap:24px;max-width:380px;width:100%}
  .gate-form-title{font-size:2.6rem;font-weight:700;color:var(--ink);letter-spacing:-.4px;line-height:1.2}
  .gate-form-sub{font-size:1.3rem;color:var(--ink3);line-height:1.5;margin-top:-12px}

  .gate-field{display:flex;flex-direction:column;gap:8px;margin-top:8px}
  .gate-field-lbl{font-size:1.15rem;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:6px}
  .gate-field-lbl .ms-r{font-size:1.4rem;color:var(--teal)}
  .gate-input-wrap{position:relative}
  .gate-input{
    width:100%;
    padding:14px 48px 14px 16px;
    border:1.5px solid var(--border2);
    border-radius:var(--r3);
    font-size:1.4rem;
    font-family:inherit;
    background:var(--paper);
    color:var(--ink);
    outline:none;
    transition:border-color .18s,box-shadow .18s,background .18s;
  }
  .gate-input:focus{border-color:var(--teal);background:var(--card);box-shadow:0 0 0 4px var(--teal-s)}
  .gate-input.has-err{border-color:var(--red);box-shadow:0 0 0 4px var(--red-s)}
  .gate-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ink3);border-radius:6px;transition:background .15s,color .15s}
  .gate-eye:hover{background:var(--paper);color:var(--ink)}
  .gate-eye .ms-r{font-size:1.8rem}

  .gate-btn{
    margin-top:4px;
    padding:14px 18px;
    background:var(--teal);
    color:#fff;border:none;
    border-radius:var(--r3);
    font-size:1.4rem;font-weight:700;
    font-family:inherit;
    cursor:pointer;
    transition:background .15s,transform .05s,box-shadow .2s;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:0 4px 14px rgba(43,158,179,.28);
  }
  .gate-btn:hover{background:var(--teal-d);box-shadow:0 6px 20px rgba(43,158,179,.38)}
  .gate-btn:active{transform:scale(.985)}
  .gate-btn .ms-r{font-size:1.6rem}

  .gate-err{
    display:none;
    align-items:center;gap:8px;
    padding:10px 14px;
    background:var(--red-s);
    color:var(--red);
    border-radius:var(--r3);
    font-size:1.2rem;font-weight:500;
    margin-top:-4px;
  }
  .gate-err.is-on{display:flex}
  .gate-err .ms-r{font-size:1.5rem}

  .gate-foot{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:1.05rem;color:var(--ink4)}
  .gate-foot a{color:var(--ink3);transition:color .15s}
  .gate-foot a:hover{color:var(--teal)}

  /* Material Symbols base */
  .ms-r{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}

  /* ── Responsive ── */
  @media (max-width:920px){
    body{overflow:auto}
    .gate-wrap{flex-direction:column;height:auto;min-height:100vh}
    .gate-brand{padding:40px 32px;min-height:340px}
    .gate-headline{font-size:2.8rem}
    .gate-form-panel{width:100%;padding:48px 32px;box-shadow:none}
    .gate-brand-bot{display:none}
  }
  @media (max-width:480px){
    .gate-brand{padding:32px 24px;min-height:260px}
    .gate-headline{font-size:2.4rem}
    .gate-lead{font-size:1.2rem}
    .gate-form-panel{padding:36px 24px}
  }

  /* Subtle entrance animation */
  @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  .gate-form>*{animation:fadeUp .5s ease both}
  .gate-form>*:nth-child(1){animation-delay:.05s}
  .gate-form>*:nth-child(2){animation-delay:.1s}
  .gate-form>*:nth-child(3){animation-delay:.15s}
  .gate-form>*:nth-child(4){animation-delay:.2s}
  .gate-form>*:nth-child(5){animation-delay:.25s}
  .gate-form>*:nth-child(6){animation-delay:.3s}