html { background: #E8E6F2; }
body { margin: 0; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 24px 16px; color: #1A1B2E; font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; }
main { box-sizing: border-box; inline-size: 100%; max-inline-size: 420px; background: #FEFEFE; border-radius: 10px; box-shadow: 0 1px 3px rgba(26,27,46,0.07); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
main > * { margin: 0; }
.wordmark { font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.35; color: #5B21B6; }
h1 { font-family: 'Fields', 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 600; line-height: 1.25; }
h2 { margin: 0; font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.35; }
.intro { font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; color: #5A5C72; }
.note { font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4; color: #5A5C72; }
.suggestion { display: flex; flex-direction: column; gap: 12px; border: 2px solid #7D30E5; border-radius: 10px; padding: 16px; }
.suggestion p { margin: 0; }
.reason { font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4; color: #5A5C72; }
.tag { align-self: flex-start; font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; background: #DECCF9; color: #5B21B6; border-radius: 9999px; padding: 4px 12px; }
.continue, .change { box-sizing: border-box; display: block; inline-size: 100%; text-align: center; border-radius: 8px; padding: 12px 16px; font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; font-weight: 700; cursor: pointer; text-decoration: none; }
.continue { background: #7D30E5; border: 1px solid #7D30E5; color: #FEFEFE; }
.change { background: #FEFEFE; border: 1px solid #7C7E95; color: #1A1B2E; }
.countries { list-style: none; margin: 0; padding: 0; border: 1px solid #CDCFDE; border-radius: 10px; }
.countries li + li { border-block-start: 1px solid #CDCFDE; }
.countries a { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: #1A1B2E; text-decoration: none; }
.countries .name { flex: 1; font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.35; }
.countries .tag { align-self: center; }
[dir="rtl"] .chevron { transform: scaleX(-1); }
#countries { display: flex; flex-direction: column; gap: 12px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #7D30E5; outline-offset: 2px; }