:root{
  --blue:#2f78a8;
  --bg:#ffffff;
  --text:#2b2b2b;
  --shadow-soft: 0 8px 14px rgba(0,0,0,.14);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  background:
    linear-gradient(#ffffff 0 78%, rgba(220,235,245,.0) 78% 86%, rgba(220,235,245,.7) 86% 100%);
}
.page{ min-height:100%; display:flex; flex-direction:column; }

.header{
  height: 92px;
  background: linear-gradient(#2f78a8, #2a6f9d);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  padding: 0 34px;
  color:#fff;
  position:relative;
}
.brand{ display:flex; align-items:center; gap:16px; }
.brand svg{ width:78px; height:48px; flex:none; }
.brand-title{ line-height:1.08; font-size:22px; font-weight:700; }
.brand-sub{ font-size:20px; font-weight:700; }
.header-spacer{ flex:1; }
.header-right{ font-size:24px; font-weight:700; opacity:.98; }

.header-actions{
  position:absolute;
  right: 34px;
  top: 104px;
  display:flex;
  gap:10px;
  align-items:center;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.16);
  color:#fff;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
}
.chip svg{ width:16px; height:16px; }

.main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 40px 20px 120px;
}
.center{
  width: min(1100px, 92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 22px;
  margin-top: 10px;
}

.h1{
  font-size: 26px;
  font-weight: 500;
  color:#3a3a3a;
  text-align:center;
}

.panel{
  width: min(1200px, 92vw);
  background: #d0d0d0;
  border-radius: 44px;
  padding: 34px 46px;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
  color:#3a3a3a;
  font-size: 22px;
}
.panel strong{ font-weight: 800; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 160px;
  padding: 12px 26px;
  border-radius: 16px;
  background: linear-gradient(#2f78a8, #2a6f9d);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,.12);
  user-select:none;
}
.btn:hover{ filter: brightness(1.03); }
.btn:active{ transform: translateY(1px); }

.btn-lg{ min-width: 190px; padding: 13px 30px; border-radius: 18px; font-size: 18px; }
.btn-home{ min-width: 220px; padding: 14px 36px; border-radius: 18px; font-size: 18px; margin-top: 44px; }

.form{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top: 4px; }
.label{ font-size: 20px; color:#3a3a3a; }
.input{
  width: 280px;
  height: 48px;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,.30);
  background:#fff;
  box-shadow: 0 8px 14px rgba(0,0,0,.18);
  padding: 8px 14px;
  font-size:18px;
  outline:none;
}
.footer-pad{ height: 46px; }

@media (max-width: 900px){
  .header{ padding: 0 18px; height: 84px; }
  .brand-title,.brand-sub{ font-size: 18px; }
  .header-right{ font-size: 20px; }
  .header-actions{ right:18px; top: 96px; }
  .panel{ font-size: 18px; padding: 24px 26px; }
}