/* Ultra-premium minimal UI (static) */
:root{
  --bg:#05060A;
  --card: rgba(255,255,255,.045);
  --border: rgba(255,255,255,.11);
  --muted: rgba(255,255,255,.72);
  --text: rgba(255,255,255,.93);
  --gold: #F7E796;
  --gold2:#D59E2C;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 20px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
}
.bg{
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(6,84,137,.26), transparent 60%),
    radial-gradient(circle at 78% 18%, rgba(213,158,44,.20), transparent 60%),
    radial-gradient(circle at 50% 92%, rgba(247,231,150,.11), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 35%);
  pointer-events:none;
}
.wrap{ position: relative; max-width: 1020px; margin: 0 auto; padding: 28px 16px 44px; }
.card{
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}
.hero{ padding: 20px 20px 16px; }
.brand{ display:flex; gap:14px; align-items:center; }
.logo{
  width: 86px; height: 86px; object-fit: contain;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 40px rgba(0,0,0,.40);
}
.brand-text{ flex:1; min-width: 0; }
.badge{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; color: rgba(255,255,255,.80);
  padding: 7px 11px; border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.hero h1{
  margin: 12px 0 0;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.sub{ margin: 10px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.muted{ color: var(--muted); }

.mini-note{ margin-top: 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12px; padding: 7px 11px;
  border-radius: 999px; border:1px solid rgba(255,255,255,.12);
  background: rgba(5,6,10,.55);
}

.form-card{ margin-top: 14px; padding: 18px; }
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.field{ grid-column: span 12; }
.hint{ margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.55); }
@media (min-width: 820px){
  .span6{ grid-column: span 6; }
  .span4{ grid-column: span 4; }
}

label{ display:block; font-size: 13px; color: rgba(255,255,255,.80); margin: 4px 0 7px; }
input, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,6,10,.55);
  color: var(--text);
  outline:none;
}
input::placeholder{ color: rgba(255,255,255,.44); }
input:focus, select:focus{
  border-color: rgba(247,231,150,.42);
  box-shadow: 0 0 0 3px rgba(247,231,150,.13);
}

.mini{ margin-top: 14px; padding: 14px; }
.mini-head h2{ margin: 0; font-size: 16px; letter-spacing:-0.01em; }
.mini-head p{ margin: 6px 0 0; font-size: 13px; }
.hidden{ display:none; }

.consent{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.check{ display:flex; gap: 10px; align-items:flex-start; font-size: 13px; color: rgba(255,255,255,.75); }
.check input{ width: 18px; height: 18px; margin-top: 2px; }

.actions{ margin-top: 14px; display:flex; flex-direction: column; gap: 10px; }
button{
  border: 0; border-radius: 16px;
  padding: 12px 16px;
  font-weight: 800;
  color: #0b0c10;
  cursor:pointer;
  background: linear-gradient(90deg, var(--gold2), var(--gold));
  box-shadow: 0 12px 40px rgba(213,158,44,.16);
}
button:hover{ opacity: .96; }
button:disabled{ opacity: .6; cursor:not-allowed; }

.status{ min-height: 20px; font-size: 13px; color: rgba(255,255,255,.78); }
.status.ok{ color: rgba(180,255,210,.90); }
.status.err{ color: rgba(255,170,170,.92); }

.foot{ margin-top: 16px; text-align:center; font-size: 12px; color: rgba(255,255,255,.56); }

@media (max-width: 520px){
  .brand{ align-items:flex-start; }
  .logo{ width:72px; height:72px; }
}