:root{
  --bg:#f6f6fb;
  --card:#ffffff;
  --text:#1f1f29;
  --muted:#6b6b7a;
  --stroke:#e9e8f5;
  --brand:#6b49ff;
  --brand-weak:#ede9ff;
  --focus:#a28dff;
  --radius:16px;
  --shadow:0 8px 30px rgba(31, 31, 41, .08);
  --ok:#16a34a; --warn:#eab308; --err:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background:var(--bg);
  color:var(--text);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.world{
  position:fixed; inset:auto 0 -140px 0; width:min(1200px, 95vw);
  margin-inline:auto; opacity:0.35; filter:contrast(120%) brightness(90%);
  user-select:none; pointer-events:none;
}

.card{
  width:min(520px, 92vw);
  background:var(--card);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);
  padding:28px 24px 22px;
  border:1px solid var(--stroke);
  position:relative;
}

/* Status bar */
.status{
  position:absolute; top:-12px; left:16px; right:16px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  background:#fff; border:1px solid var(--stroke); box-shadow:var(--shadow);
  font-size:13px; color:#394150;
}
.dot{width:10px; height:10px; border-radius:50%;}
.loading .dot{background:var(--warn)}
.ok .dot{background:var(--ok)}
.error .dot{background:var(--err)}

.stack{display:grid; gap:16px; margin-top:18px;}

.option{
  display:flex; align-items:center; gap:16px; padding:16px;
  border:1.5px solid var(--stroke); border-radius:12px; background:#fff;
  transition:border-color .2s, box-shadow .2s, background .2s; cursor:pointer; position:relative;
}
.option img.flag{width:34px; height:34px; border-radius:999px; display:block; box-shadow:0 1px 0 rgba(0,0,0,.04)}
.option .label{font-weight:500; letter-spacing:.2px;}
.option .dot-radio{margin-left:auto; width:18px; height:18px; border-radius:50%; border:2px solid var(--muted); display:grid; place-items:center; transition:border-color .2s, background .2s; background:#fff}
.option .dot-radio::after{content:""; width:8px; height:8px; border-radius:50%; background:transparent; transition:background .2s}
.option input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.option:hover{border-color:#dcdaf3; box-shadow:0 0 0 4px var(--brand-weak)}
.option:has(input:focus-visible){outline:none; box-shadow:0 0 0 4px var(--focus)}
.option:has(input:checked){border-color:var(--brand); background:#faf9ff; box-shadow:0 0 0 4px var(--brand-weak)}
.option:has(input:checked) .dot-radio{border-color:var(--brand)}
.option:has(input:checked) .dot-radio::after{background:var(--brand)}
.option.primary{border-color:#dedafe; background:#f7f5ff}

.actions{margin-top:10px}
.btn{
  width:100%; appearance:none; border:none; padding:14px 18px;
  background:var(--brand); color:#fff; border-radius:10px; font-weight:600; letter-spacing:.2px; cursor:pointer;
  box-shadow:0 6px 14px rgba(107,73,255,.34); transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{background:#5f3bff}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.btn[disabled]{opacity:.6; cursor:not-allowed; box-shadow:none}
.hint{margin-top:8px; font-size:12px; color:#6b6b7a}