:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#101416;color:#e5efed}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px}a{color:#a9e6d4}.phone-card{width:min(100%,460px);padding:32px;background:#192024;border:1px solid #33423f;border-radius:20px;box-shadow:0 20px 60px #0004}.brand{font-size:32px;font-weight:800;text-decoration:none;color:#e5efed}.brand span{color:#9bdac5;font-size:16px;margin-left:4px}h1{font-size:26px;line-height:1.25;margin:28px 0 16px}p,small{line-height:1.6;color:#b3c5bd}label{display:block;margin:18px 0 8px}input,select{width:100%;padding:13px;border-radius:9px;border:1px solid #4a5b55;background:#101716;color:#fff;font:inherit}input:focus,select:focus{outline:2px solid #9bdac5;outline-offset:2px}button,.button{display:block;width:100%;margin:20px 0;padding:14px;border:0;border-radius:9px;background:#a7e4cd;color:#10241d;font:600 16px system-ui;cursor:pointer;text-align:center;text-decoration:none}button:disabled{opacity:.5;cursor:wait}.secondary{background:transparent;color:#a7e4cd;border:1px solid #536b61}.error{color:#ffb3ae;padding:12px;background:#482724;border-radius:8px}.success{color:#a7e4cd}nav{display:flex;justify-content:space-between;margin-top:24px}.languages{display:flex;gap:12px;align-items:center;margin-top:16px}.languages label{margin:0}.languages select{width:auto;max-width:210px}small{display:block;margin:8px 0}#code{font-size:28px;letter-spacing:8px;text-align:center}

/* One continuous phone field: fixed prefix, divider, editable seven digits. */
.phone-number{display:flex;flex-flow:row nowrap;align-items:stretch;width:100%;min-height:49px;border:1px solid #4a5b55;border-radius:9px;background:#101716;overflow:hidden}
.phone-number .phone-prefix{display:flex;flex:0 0 auto;align-items:center;justify-content:center;padding:0 12px;color:#fff;background:transparent;border-right:1px solid #4a5b55;font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}
.phone-number input{display:block;min-width:0;width:0;flex:1 1 0;padding:11px 13px;border:0;border-radius:0;background:transparent;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:2px}
.phone-number:focus-within{outline:2px solid #9bdac5;outline-offset:2px}.phone-number input:focus{outline:none}

.phone-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.phone-header .brand{flex:0 0 auto;white-space:nowrap}.phone-header .languages{margin:0 0 0 auto;display:block;min-width:0}.phone-header .languages select{display:block;width:100%;max-width:180px;margin:0;padding:10px;font-size:14px}@media(max-width:380px){.phone-card{padding:24px}.phone-header{gap:10px}.phone-header .languages select{max-width:145px;padding:9px 6px;font-size:13px}}

.password-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;margin-top:8px;border:1px solid #46534d;border-radius:5px;overflow:hidden}.password-rules span{display:flex;align-items:center;justify-content:center;min-height:32px;padding:6px 4px;background:#542a2a;color:#ffe5e5;font-size:13px;line-height:1.2}.password-rules span+span{border-left:1px solid #46534d}.password-rules span.is-met{background:#1e4934;color:#d6f5e2}.password-mismatch{color:#ff7777;margin:7px 0 0;font-size:13px}.password-mismatch[hidden]{display:none}



.password-rules #rule-length{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:stretch;justify-content:stretch;gap:3px;padding:3px;min-width:0;background:#192024}.password-length-meter .length-block{display:block;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:#2c3537}.password-length-meter .length-block.is-filled{background:#28794f}