.mobile-install-body { margin:0; background:#f3f6fa; color:#1e3045; font-family:'Sarabun',sans-serif; }
.mobile-install-header { max-width:1160px; margin:auto; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mobile-install-header a { color:#25466a; text-decoration:none; font-weight:600; }
.mobile-install-header a:first-child { font-size:24px; font-weight:800; }
.mobile-install-login { display:block; text-align:center; margin-top:22px; color:#245aa1; font-size:14px; }
.mobile-install { max-width:1160px; margin:0 auto; padding:16px 0 36px; color:#1e3045; font-family:'Sarabun',sans-serif; line-height:1.7; }
.mobile-install-body .mobile-install { padding:12px 28px 36px; }
.mobile-install * { box-sizing:border-box; }
.mobile-install .mi-hero { background:#173d60; color:#fff; border-radius:24px; padding:36px 40px; display:grid; grid-template-columns:1fr 230px; gap:28px; align-items:center; }
.mobile-install .mi-eyebrow { color:#96dfd8; letter-spacing:2px; font-size:12px; font-weight:700; }
.mobile-install h1 { color:inherit; font-size:clamp(28px,3.4vw,42px); line-height:1.35; margin:12px 0 16px; }
.mobile-install h2 { font-size:20px; line-height:1.5; margin:0 0 12px; color:inherit; }
.mobile-install h3 { font-size:17px; margin:0 0 7px; color:inherit; }
.mobile-install p { margin:0 0 14px; }
.mobile-install .mi-hero p { color:#dce8f4; }
.mobile-install .mi-button { display:inline-flex; justify-content:center; align-items:center; text-decoration:none; padding:12px 22px; border-radius:12px; font-weight:700; min-height:48px; text-align:center; }
.mobile-install .mi-primary { color:#153d42; background:#9aebe0; margin-top:8px; }
.mobile-install .mi-primary:hover { background:#b6f7ef; }
.mobile-install .mi-secondary { background:#ecf3fa; color:#245481; font-size:14px; }
.mobile-install .mi-meta { font-size:13px; color:#d2e0ed; margin-top:10px; }
.mobile-install .mi-qr { border-radius:18px; padding:18px; background:white; color:#20364d; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.mobile-install .mi-qr img { display:block; max-width:100%; height:auto; }
.mobile-install .mi-qr span { font-size:12px; color:#5c7187; }
.mobile-install button { font:inherit; font-size:13px; cursor:pointer; padding:10px 12px; border:1px solid #ccdbe8; background:#f3f7fb; color:#245481; border-radius:8px; min-height:44px; }
.mobile-install button:focus-visible,.mobile-install a:focus-visible,.mobile-install summary:focus-visible { outline:3px solid #e6a72c; outline-offset:3px; }
.mobile-install .mi-columns { display:grid; grid-template-columns:1.15fr 1fr; gap:22px; margin-top:24px; align-items:start; }
.mobile-install .mi-card { background:#fff; border:1px solid #e0e8f0; border-radius:18px; padding:26px; }
.mobile-install .mi-side { display:grid; gap:18px; }
.mobile-install .mi-steps { list-style:none; padding:0; margin:24px 0 0; counter-reset:steps; }
.mobile-install .mi-steps li { counter-increment:steps; display:flex; gap:14px; margin:0 0 26px; }
.mobile-install .mi-steps li:last-child { margin-bottom:0; }
.mobile-install .mi-steps li::before { content:counter(steps); background:#e5f2f1; color:#1d6b65; min-width:32px; height:32px; border-radius:50%; text-align:center; line-height:32px; font-weight:700; }
.mobile-install .mi-steps li>div { min-width:0; }
.mobile-install .mi-server { display:flex; flex-wrap:wrap; gap:10px; background:#f4f7fb; padding:12px; border-radius:10px; align-items:center; }
.mobile-install code { font-size:13px; overflow-wrap:anywhere; }
.mobile-install .mi-tag { display:inline-block; color:#27786e; background:#e7f4f1; padding:3px 10px; border-radius:6px; font-size:12px; margin-bottom:12px; }
.mobile-install .mi-muted { color:#65788a; font-size:13px; }
.mobile-install .mi-details { margin-top:22px; font-size:14px; }
.mobile-install summary { cursor:pointer; font-weight:600; }
.mobile-install details[open] summary { margin-bottom:16px; }
.mobile-install .mi-hash { display:block; }
.mobile-install .mi-feedback:not(:empty) { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); background:#173d60; color:white; padding:14px 20px; border-radius:12px; box-shadow:0 4px 20px #0003; overflow-wrap:anywhere; z-index:10000; }
@media(max-width:760px) { .mobile-install .mi-hero { grid-template-columns:1fr; padding:26px 22px; } .mobile-install .mi-qr { max-width:280px; width:100%; justify-self:center; } .mobile-install .mi-columns { grid-template-columns:1fr; } .mobile-install-body .mobile-install { padding:8px 14px 28px; } .mobile-install .mi-card { padding:22px 18px; } .mobile-install .mi-wide { display:none; } .mobile-install-header { padding:18px 16px; font-size:12px; } }