/* ===== Anbo journey: language > intro > home > account  (phone-style column, also nice on laptop) ===== */
body.flowp{background:linear-gradient(160deg,#ecfdf3,#f4f6f9 55%);min-height:100vh;margin:0}
.shell{max-width:480px;margin:0 auto;min-height:100vh;background:#fff;display:flex;flex-direction:column;position:relative;box-shadow:0 0 0 1px #e7eaf0,0 20px 60px rgba(11,61,36,.12)}
@media(min-width:560px){.shell{margin:24px auto;min-height:calc(100vh - 48px);border-radius:30px;overflow:hidden}}
.fh{background:linear-gradient(135deg,var(--primary),var(--dark));color:#fff;padding:calc(14px + env(safe-area-inset-top)) 20px 26px;border-radius:0 0 34px 34px;text-align:center}
.fh-top{display:flex;justify-content:space-between;align-items:center;min-height:34px}
.fh-b{color:#fff;font-size:22px;line-height:1;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.14)}
.fh-lang{color:#fff;font-weight:600;font-size:13px;background:rgba(255,255,255,.16);padding:6px 12px;border-radius:99px}
.fh-logo{display:flex;justify-content:center;margin:10px 0 4px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:14px}.dots i{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.4)}.dots i.on{width:24px;background:#fff}
.fm{flex:1;display:flex;flex-direction:column}
.fm .wrap{padding:0 18px;margin-top:12px}
.pad{padding:26px 22px 28px;flex:1;display:flex;flex-direction:column}
.ft{font-size:26px;line-height:1.3;margin:4px 0 8px;color:#0f172a}
.fs{color:var(--muted);margin:0 0 18px;font-size:15px}
.hi{margin:0 0 12px;color:#334155}
.fbtn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#fff;font-weight:700;font-size:17px;padding:16px;border-radius:16px;box-shadow:0 8px 20px rgba(var(--primary-rgb),.28)}
.fbtn:hover{filter:brightness(1.06)}
.pad>.fbtn{margin-top:28px}
/* language */
.langs{display:grid;gap:12px;margin:18px 0 8px}
.lopt{display:flex;align-items:center;gap:14px;border:1.5px solid #e2e8f0;border-radius:16px;padding:16px 18px;cursor:pointer;margin:0;font-size:17px;transition:.15s}
.lopt input{position:absolute;opacity:0;pointer-events:none}
.lopt .flag{font-size:26px}.lopt b{flex:1;font-weight:700;color:#0f172a}
.lopt .tick{width:26px;height:26px;border-radius:50%;border:2px solid #cbd5e1;color:transparent;display:grid;place-items:center;font-style:normal;font-size:15px}
.lopt.on{border-color:var(--primary);background:rgba(var(--primary-rgb),.07)}.lopt.on .tick{background:var(--primary);border-color:var(--primary);color:#fff}
/* intro checks */
.checks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:11px}
.checks li{display:flex;align-items:center;gap:14px;border:1px solid #e5e7eb;border-radius:18px;padding:15px 16px;font-weight:700;color:#0f172a;box-shadow:0 1px 2px rgba(15,23,42,.03)}
.checks i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-style:normal;font-size:15px}
/* home cards */
.cards{display:grid;gap:14px;margin-top:6px}
.scard{display:flex;align-items:center;gap:16px;border-radius:22px;padding:18px;border:1.5px solid transparent;color:inherit;position:relative;transition:.15s}
.scard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.1)}
.scard .sic{flex:none;width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:#fff}
.scard .stx{flex:1;display:flex;flex-direction:column;gap:2px}.scard b{font-size:20px;color:#0f172a;font-weight:800}.scard small{color:#475569;font-size:13.5px}
.scard .arr{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.scard .soon{position:absolute;top:10px;right:12px;background:#fef3c7;color:#92400e;font-style:normal;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px}
.t-green{background:#ecfdf3;border-color:#bbf7d0}.t-green .sic{background:linear-gradient(135deg,#22a55a,#0f7a3d)}.t-green .arr{color:#15803d}
.t-blue{background:#eef5ff;border-color:#c7dcfb}.t-blue .sic{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.t-blue .arr{color:#1d4ed8}
.t-violet{background:#f5f0ff;border-color:#ddd0fb}.t-violet .sic{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.t-violet .arr{color:#6d28d9}
.ftabs{position:sticky;bottom:0;display:flex;background:#fff;border-top:1px solid #e5e7eb;padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
.ftabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:#64748b;font-weight:600}.ftabs a.on{color:var(--primary)}
/* account page */
.acct-tabs{display:flex;gap:6px;background:#f1f5f9;padding:5px;border-radius:16px;margin:4px 0 18px}
.acct-tabs button{flex:1;border:0;background:transparent;font:inherit;font-weight:700;font-size:14px;color:#475569;padding:11px 6px;border-radius:12px;cursor:pointer;line-height:1.2}
.acct-tabs button.on{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(15,23,42,.08)}
.acct-pane{display:none}.acct-pane.on{display:block}
.fld2{margin:0 0 12px}.fld2 label{margin:0 0 5px}
.geo-grid{display:grid;gap:0 12px}
.hint{font-size:12.5px;color:#64748b;margin-top:4px}
.skip{display:block;text-align:center;margin-top:16px;color:#64748b;font-size:14px}

/* order step: four ways to give the list */
.methods{display:grid;gap:10px;margin:12px 0}
.meth{border:1.5px solid #e2e8f0;border-radius:16px;overflow:hidden;background:#fff}.meth.open{border-color:var(--primary)}
.meth .mh{width:100%;display:flex;align-items:center;gap:12px;border:0;background:none;font:inherit;padding:14px 16px;cursor:pointer;text-align:left}
.meth .mi{width:44px;height:44px;border-radius:14px;background:rgba(var(--primary-rgb),.1);display:grid;place-items:center;font-size:20px}
.meth .mt{flex:1;font-size:16px}.meth .mt small{color:#64748b;font-weight:500}.meth .mc{font-size:20px;color:var(--primary)}
.meth .mb{padding:4px 16px 16px}
.numrows{counter-reset:it}.numrows .irow{counter-increment:it;position:relative;padding-left:34px}
.numrows .irow::before{content:counter(it);position:absolute;left:0;top:10px;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center}

/* ---- premium polish: points, bold labels, password eye ---- */
.pts{display:grid;gap:10px;margin-top:20px}
.pt{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#fff,#f3fbf6);border:1px solid #d9efe2;border-radius:18px;padding:13px 15px;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.pt-i{flex:none;width:44px;height:44px;border-radius:14px;background:rgba(var(--primary-rgb),.12);display:grid;place-items:center;font-size:22px}
.pt-t{display:flex;flex-direction:column;gap:2px}.pt-t b{font-size:15.5px;color:#0f172a;font-weight:800}.pt-t small{color:#64748b;font-size:13px}
.fld2 label,.acct-pane label{font-weight:800;color:#0f172a;font-size:14.5px}
.fld2 input,.fld2 select{border-radius:14px;padding:13px 14px;border:1.5px solid #dbe5df;font-size:16px}
.fld2 input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.12);outline:0}
.pw{position:relative}.pw input{width:100%;padding-right:48px}.pw .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:19px;cursor:pointer;padding:8px}
.ft{font-weight:900;letter-spacing:-.3px}