/* Mio88 — Mobile-First App Experience
   purple #7C3AED · teal #14B8A6 · white · dark navy #0F172A
   移动优先：17px 基准、44px 触控目标、底部标签栏、横滑卡 */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif;color:#1E1B2E;background:#FAFAFE;line-height:1.75;font-size:17px}
img,svg{max-width:100%;height:auto;display:block}
a{color:#6D28D9;text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
.mi-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
p{margin:0 0 14px}

/* header (slim) */
.mi-head{background:#FFFFFF;border-bottom:1px solid #E9E5F8;position:sticky;top:0;z-index:60}
.mi-head-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 20px}
.mi-logo{display:flex;align-items:center;gap:9px;color:#1E1B2E;margin-right:auto}
.mi-logo:hover{text-decoration:none}
.mi-logo-word{font-size:22px;font-weight:800}
.mi-logo-word span{color:#7C3AED}
.mi-head-badge{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0D9488;background:#CCFBF1;border-radius:999px;padding:5px 12px}
.mi-navbtn,.mi-navtog{display:none}
.mi-nav{display:flex;flex-wrap:wrap;gap:2px 4px}
.mi-navlink{display:block;font-size:13.5px;color:#3F3A5A;padding:8px 12px;border-radius:999px}
.mi-navlink:hover{background:#F1EDFE;text-decoration:none}
.mi-navlink.active{background:#7C3AED;color:#fff}

/* hero */
.mi-hero{background:linear-gradient(150deg,#F1EDFE 0%,#E7FBF7 60%,#FFFFFF 100%);overflow:hidden}
.mi-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding-top:48px;padding-bottom:52px}
.mi-hero-kicker{font-size:14px;font-weight:600;color:#0D9488;margin-bottom:10px}
.mi-hero h1{font-size:38px;line-height:1.25;color:#201A3C;margin-bottom:16px}
.mi-hero-lead{font-size:17px;color:#4B4568;margin-bottom:24px}
.mi-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.mi-btn{display:inline-block;background:#7C3AED;color:#fff;font-weight:700;font-size:15.5px;padding:14px 28px;border-radius:14px;box-shadow:0 8px 20px rgba(124,58,237,.28)}
.mi-btn:hover{text-decoration:none;background:#6D28D9}
.mi-btn-g{background:#0D9488;box-shadow:0 8px 20px rgba(13,148,136,.24)}
.mi-btn-g:hover{background:#0B7A70}
.mi-phone{position:relative;border-radius:34px;background:#0F172A;padding:12px;box-shadow:0 24px 50px rgba(32,26,60,.25)}
.mi-phone-notch{width:110px;height:7px;border-radius:99px;background:#334155;margin:2px auto 12px}
.mi-phone img{border-radius:22px}

/* scroller */
.mi-scrollsec{padding:30px 0 8px;background:#FAFAFE}
.mi-scroller{display:flex;gap:14px;overflow-x:auto;padding:12px 20px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;max-width:1080px;margin:0 auto;scrollbar-width:thin}
.mi-hcard{flex:0 0 250px;scroll-snap-align:start;display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid #EBE8F8;border-radius:18px;padding:18px;color:#1E1B2E;transition:transform .15s}
.mi-hcard:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 10px 24px rgba(60,40,120,.14);border-color:#C4B5FD}
.mi-hcard-k{font-size:11px;font-weight:800;letter-spacing:.2em;color:#7C3AED}
.mi-hcard-t{font-size:16px;font-weight:700;line-height:1.4}
.mi-hcard-d{font-size:12.5px;color:#6F6A8A}

/* sections */
.mi-sec{padding:40px 0;background:#FFFFFF}
.mi-sec.alt{background:#F6F4FE}
.mi-sec-h{font-size:25px;color:#201A3C;margin-bottom:14px}
.mi-sec-body{max-width:840px}
.mi-sec-body h3,.mi-art-body h3{font-size:19px;margin:20px 0 8px;color:#6D28D9}
.mi-sec-body ul.md,.mi-sec-body ol.md,.mi-art-body ul.md,.mi-art-body ol.md{margin:0 0 14px;padding-left:0}
.mi-sec-body ul.md li,.mi-art-body ul.md li{position:relative;padding-left:26px;margin-bottom:8px}
.mi-sec-body ul.md li::before,.mi-art-body ul.md li::before{content:"→";position:absolute;left:2px;color:#0D9488;font-weight:700}
.mi-sec-body ol.md,.mi-art-body ol.md{counter-reset:miol}
.mi-sec-body ol.md li,.mi-art-body ol.md li{position:relative;padding-left:38px;margin-bottom:9px;counter-increment:miol}
.mi-sec-body ol.md li::before,.mi-art-body ol.md li::before{content:counter(miol);position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:8px;background:#7C3AED;color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* tables */
.tbl-wrap{overflow-x:auto;margin:16px 0}
table{border-collapse:collapse;width:100%;min-width:500px;background:#fff;font-size:14.5px;border-radius:14px;overflow:hidden;border:1px solid #E4E0F4}
thead th{background:#201A3C;color:#99F6E4;text-align:left;padding:11px 15px;font-size:13px}
tbody td{padding:11px 15px;border-bottom:1px solid #EFEDF9}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:#F8F7FE}

/* figures */
.fig{margin:22px 0;background:#fff;border-radius:18px;padding:16px;border:1px solid #E9E6F6;box-shadow:0 4px 14px rgba(60,40,120,.06)}
.fig figcaption{font-size:13px;color:#6F6A8A;margin-top:9px;text-align:center}

/* article */
.mi-main{padding:28px 0 10px}
.mi-crumb{font-size:13px;margin-bottom:14px}
.mi-crumb ol{display:flex;flex-wrap:wrap;gap:6px;color:#6F6A8A}
.mi-crumb li+li::before{content:"›";margin-right:6px;color:#7C3AED}
.mi-artcard{background:#fff;border-radius:22px;border:1px solid #EBE8F8;box-shadow:0 8px 26px rgba(60,40,120,.08);padding:30px 32px}
.mi-art-h1{font-size:31px;line-height:1.3;color:#201A3C;margin-bottom:12px}
.mi-meta{display:inline-flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:#6F6A8A;background:#F6F4FE;border-radius:999px;padding:8px 16px;margin-bottom:22px}
.toc{background:#F6F4FE;border-radius:16px;padding:16px 20px;margin-bottom:24px}
.toc-title{font-size:14px;font-weight:800;color:#6D28D9;margin-bottom:5px}
.toc ol{counter-reset:mitoc}
.toc ol li{counter-increment:mitoc;padding:4px 0 4px 30px;position:relative;font-size:14.5px}
.toc ol li::before{content:counter(mitoc);position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:8px;background:#7C3AED;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.mi-art-body{font-size:17px}
.mi-art-body h2{font-size:23px;margin:28px 0 10px;color:#201A3C}
blockquote.md{border-left:4px solid #14B8A6;background:#EFFCF9;border-radius:0 12px 12px 0;padding:12px 16px;margin:14px 0}
.mi-artfaq h2,.mi-faqsec h2{font-size:23px;color:#201A3C;margin-bottom:12px}
.mi-faqitem{background:#F8F7FE;border:1px solid #E4E0F4;border-radius:14px;margin-bottom:10px}
.mi-faqitem summary{cursor:pointer;padding:13px 18px;font-weight:700;font-size:15.5px;color:#201A3C;list-style:none;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mi-faqitem summary::-webkit-details-marker{display:none}
.mi-faqitem summary::after{content:"+";color:#7C3AED;font-size:22px;font-weight:800;flex:none}
.mi-faqitem[open] summary::after{content:"–"}
.mi-fanswer{padding:0 18px 13px;font-size:15.5px}
.mi-faqsec{margin-top:20px}

/* related */
.related{background:#EFFCF9;border:1px solid #B2F0E5;border-radius:16px;padding:18px 20px;margin-top:26px}
.related-title{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0D9488;margin-bottom:6px}
.related ul li{padding:7px 0;border-top:1px solid #CBF3EA;font-size:15px}

/* hub */
.mi-hubhead{padding:6px 0 18px}
.mi-hubhead h1{font-size:32px;color:#201A3C;margin-bottom:10px}
.mi-plsec{margin-bottom:22px}
.mi-plsec h2{font-size:22px;color:#201A3C;margin-bottom:10px}
.mi-helprow{padding-top:34px;padding-bottom:34px}

/* 404 */
.e404{text-align:center;padding:70px 20px}
.e404-code{font-size:82px;font-weight:800;color:#7C3AED;line-height:1}
.e404-h1{font-size:28px;margin:6px 0 14px;color:#201A3C}
.e404-p{max-width:520px;margin:0 auto 22px}
.e404-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.p404 .mi-hero,.p404 .mi-scrollsec,.p404 .mi-sec{display:none}

/* footer */
.mi-foot{margin-top:48px;background:#0F172A;color:#94A3B8;border-top:4px solid #14B8A6}
.mi-fgrid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:34px 20px 4px}
.mi-fh{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#2DD4BF;margin-bottom:10px;font-weight:700}
.mi-fcol ul li{padding:5px 0;font-size:14px}
.mi-fcol a{color:#C7CDE3}
.mi-fcol a:hover{color:#2DD4BF}
.mi-flegal{max-width:1080px;margin:0 auto;padding:14px 20px 28px;border-top:1px solid #1E293B;margin-top:14px}
.mi-flegal p{font-size:12px;color:#64748B;margin-bottom:7px}
.mi-flegal p:first-child{color:#2DD4BF;letter-spacing:.06em}

/* bottom tabbar (mobile only) */
.mi-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#FFFFFF;border-top:1px solid #E5E1F5;box-shadow:0 -6px 20px rgba(60,40,120,.10);padding:6px 8px calc(8px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr)}
.mi-tab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:#6F6A8A;padding:6px 4px;border-radius:12px;min-height:44px;justify-content:center}
.mi-tab.active{color:#7C3AED;background:#F1EDFE}

/* responsive */
@media (max-width:900px){
 .mi-hero-in{grid-template-columns:1fr;gap:28px}
 .mi-fgrid{grid-template-columns:1fr 1fr}
 .mi-hero h1{font-size:31px}
 .mi-phone{max-width:340px;margin:0 auto}
}
@media (max-width:768px){
 body{font-size:17px}
 .mi-navbtn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1.5px solid #DCD6F7;border-radius:12px;cursor:pointer;background:#fff}
 .mi-navbtn span{display:block;width:20px;height:2.5px;background:#7C3AED;margin:0 auto;border-radius:2px}
 .mi-head-badge{display:none}
 .mi-menu{display:none;width:100%;background:#fff;border-top:1px solid #F0EDFB}
 .mi-navtog:checked ~ .mi-menu{display:block}
 .mi-nav{flex-direction:column;gap:2px;padding:10px 14px 14px}
 .mi-navlink{padding:12px 14px;border-radius:12px;font-size:16px}
 .mi-head-in{flex-wrap:wrap}
 .mi-tabbar{display:grid}
 body{padding-bottom:74px}   /* 底栏不遮内容 */
 .mi-artcard{padding:22px 18px;border-radius:18px}
 .mi-art-h1{font-size:25px}
 .mi-hubhead h1{font-size:26px}
 .mi-hero h1{font-size:27px}
 .mi-sec-h{font-size:21px}
}
@media (max-width:420px){
 .mi-hero h1{font-size:24px}
 .mi-hero-lead{font-size:15.5px}
 .mi-btn{padding:13px 20px;font-size:14.5px}
 .mi-art-h1{font-size:22px}
 .mi-fgrid{grid-template-columns:1fr}
}