:root{--bg:var(--esim-white);--paper:var(--esim-paper);--surface:var(--esim-pale);--ink:var(--esim-ink);--sub:var(--esim-muted);--line:var(--esim-line);--control:var(--esim-controlLine);--action:var(--esim-brand);--action-text:#fff;--selected:var(--esim-selectedText);--shadow:0 16px 48px #1735300c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 Outfit,'Noto Sans SC',sans-serif;-webkit-font-smoothing:antialiased}
body[data-theme=dark]{--bg:#102620;--paper:#102620;--surface:#173530;--ink:#F1F8F5;--sub:#B2C9C1;--line:#3C5B51;--control:#8AA69B;--action:#63D8C6;--action-text:#102620;--selected:#63D8C6;--shadow:none}
button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:var(--action);text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--action);outline-offset:3px}
button:disabled{cursor:not-allowed;background:#E9EEEB!important;color:#5C706A!important;border-color:#CDDCD6!important;box-shadow:none!important}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1,h2,h3,p{margin:0}h1{font-size:28px;line-height:1.35;font-weight:600;letter-spacing:-.5px}h2{font-size:28px;line-height:1.4;font-weight:600;letter-spacing:-.3px}h3{font-size:22px;line-height:1.4;font-weight:600}strong{font-weight:600}small,.small{font-size:14px}ul,ol{padding-left:24px}li+li{margin-top:12px}.muted{color:var(--sub)}.eyebrow{color:var(--action);font-size:14px;font-weight:500;letter-spacing:.06em;margin-bottom:12px}.icon{width:24px;height:24px;object-fit:contain;flex:none}.flip{transform:rotate(180deg)}
body[data-theme=dark] .icon,body[data-theme=dark] .bottom-nav img,body[data-theme=dark] .header-help img{filter:brightness(0) saturate(100%) invert(90%)}
.review-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 24px;background:var(--bg);border-bottom:1px solid var(--line);color:var(--sub);font-size:14px}
.preview-label{display:flex;align-items:center;gap:8px}.preview-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--esim-brand)}.preview-note{font-size:12px}.review-actions{display:flex;gap:8px;align-items:center}.review-actions select,.review-toggle{height:44px;max-width:130px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);padding:0 12px;font-size:14px}.review-toggle{color:var(--action);white-space:nowrap}
.review-panel{max-width:1200px;margin:16px auto;padding:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;background:var(--bg);border:1px solid var(--line);border-radius:20px}.review-panel>div{grid-column:1/-1}.review-panel h2{font-size:22px}.review-panel p{font-size:14px;color:var(--sub);margin-top:8px}.review-panel .btn{align-self:end}
.shell{max-width:540px;min-height:calc(100vh - 70px);margin:24px auto 0;background:var(--bg);border:1px solid var(--line);border-radius:20px 20px 0 0;box-shadow:var(--shadow);padding-bottom:80px;overflow:clip}
.site-header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px;border-bottom:1px solid var(--line)}.logo-link{display:flex;align-items:center;min-height:48px;padding:8px 0}.logo{height:32px;width:auto;display:block}.logo-dark{display:none}body[data-theme=dark] .logo-light{display:none}body[data-theme=dark] .logo-dark{display:block}.header-help{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;text-decoration:none;min-height:44px}.header-help img{width:24px;height:24px}.desktop-nav{display:none}
#app{padding:24px;min-height:50vh;outline:none}.page-title{margin:12px 0 28px}.page-title p.muted{margin-top:12px}.back-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--sub);text-decoration:none;margin-bottom:12px;font-size:14px}.section{margin-top:32px}.section>h2{margin-bottom:20px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}.section-head h2{font-size:22px}.section-head a{font-size:14px;white-space:nowrap}.section p+p{margin-top:16px}
.hero{padding:28px 24px 24px;background:var(--surface) url(assets/arcs-light.svg) no-repeat right top;background-size:auto 100%;border-radius:20px;margin-bottom:24px}.hero h1{font-size:32px;line-height:1.25;letter-spacing:-.6px}.hero h1 em{font-style:normal;color:var(--action)}.hero>.muted{margin-top:16px;max-width:310px}.hero .eyebrow{margin-bottom:16px}body[data-theme=dark] .hero{background-image:url(assets/arcs-dark.svg)}
.search-form{display:flex;align-items:center;background:var(--bg);border:1px solid var(--control);border-radius:12px;padding-left:14px;gap:8px;margin-top:24px;min-height:56px}.search-form input{min-width:0;flex:1;width:100%;border:0;background:transparent;color:var(--ink);padding:12px 0;font-size:16px;outline:none}.search-form button{border:0;background:var(--action);color:var(--action-text);border-radius:10px;min-height:48px;margin:3px;min-width:52px;font-size:14px}.search-form input::placeholder{color:var(--sub)}
.purpose-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.purpose-card{display:flex;align-items:flex-start;flex-direction:column;gap:12px;padding:20px;background:var(--bg);border:1px solid var(--control);border-radius:20px;text-decoration:none;color:var(--ink);transition:background 180ms cubic-bezier(.2,0,0,1),border-color 180ms}.purpose-card:hover{background:var(--surface);border-color:var(--action)}.purpose-card strong{font-size:18px}.purpose-card small{color:var(--sub)}.purpose-card .purpose-code{font-size:14px;font-weight:500;color:var(--action);width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:var(--surface)}
.resume{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:12px;padding:16px;margin-bottom:24px;text-decoration:none;color:var(--ink)}.resume p{font-size:14px;color:var(--sub)}.resume>div{flex:1}.resume>.icon:last-child{width:18px}
.product-grid{display:grid;gap:20px}.product-card{padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--bg);display:flex;flex-direction:column;gap:16px}.card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--sub);font-size:14px}.card-meta .brand{font-weight:500;letter-spacing:.02em}.product-card h3 a{color:var(--ink);text-decoration:none}.product-card h3 a:hover{color:var(--action)}.offer-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.data-value{font-size:32px;line-height:1.15;font-weight:500;letter-spacing:-.6px}.data-value small{font-size:16px;margin-left:4px;letter-spacing:0}.offer-price{text-align:right;white-space:nowrap}.offer-price small{display:block;font-size:12px;color:var(--sub)}.offer-price strong{font-size:28px;font-weight:500;color:var(--action)}.offer-price .pending-price{font-size:16px;color:var(--sub)}.spec-caption{font-size:14px;color:var(--sub);margin-top:4px}.coverage-line{color:var(--sub);font-size:14px;min-height:44px}.card-bottom{display:flex;gap:12px;margin-top:auto;align-items:center}.card-bottom .btn{flex:1}.detail-link{min-height:48px;display:flex;align-items:center;padding:0 4px;white-space:nowrap;font-size:14px}.card-note{font-size:14px;color:var(--sub);border-top:1px solid var(--line);padding-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;background:var(--action);color:var(--action-text);border:1px solid var(--action);border-radius:12px;font-weight:500;text-decoration:none;text-align:center;transition:background 180ms cubic-bezier(.2,0,0,1),border-color 180ms;line-height:1.4}.btn:hover:not(:disabled){background:var(--esim-brandHover);border-color:var(--esim-brandHover);color:#fff}.btn.secondary{background:var(--bg);color:var(--ink);border-color:var(--control)}.btn.secondary:hover:not(:disabled){background:var(--surface);color:var(--ink);border-color:var(--action)}.btn.text-btn{background:transparent;color:var(--action);border-color:transparent}.btn.text-btn:hover{color:var(--ink);background:var(--surface)}.btn.full{width:100%}.btn-row{display:flex;gap:12px;flex-wrap:wrap}.btn-row>.btn{flex:1;min-width:120px}.spaced{margin-top:24px}
.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--surface);color:var(--selected);font-size:14px;line-height:1.5}.pill.success{color:#1C6F52;background:#EAF6EF}.pill.warning{color:#8A5300;background:#FFF4DB}.pill.info{color:#295E9B;background:#EDF3FC}.pill.muted{color:var(--sub);background:var(--surface)}.tag-row{display:flex;gap:8px;flex-wrap:wrap}.notice{display:flex;align-items:flex-start;gap:12px;background:var(--surface);color:var(--ink);padding:20px;border-radius:12px;font-size:14px;margin:20px 0}.notice .icon{width:20px;height:20px;margin-top:2px}.notice.warning{background:#FFF4DB;color:#8A5300}.notice.success{background:#EAF6EF;color:#1C6F52}.notice p{margin:0}.notice .icon{filter:none}
.filters-top{display:flex;gap:12px;align-items:center;margin:20px 0}.filters-top>.btn{flex:none}.result-count{color:var(--sub);font-size:14px;flex:1}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--ink);min-height:44px;padding:8px 14px;font-size:14px}.chip.active{border-color:var(--action);color:var(--selected)}.filter-fields{display:grid;gap:20px}.field{display:grid;gap:8px;font-size:14px;min-width:0}.field>span{font-weight:500}.field input,.field select,.field textarea{width:100%;min-height:48px;border:1px solid var(--control);border-radius:12px;padding:12px;background:var(--bg);color:var(--ink);font-size:16px}.field textarea{min-height:100px;resize:vertical}.error-text{font-size:14px;color:#B43B3B;margin:12px 0}
.detail-hero{padding:24px;background:var(--surface);border-radius:20px;margin:20px 0}.detail-hero .data-value{font-size:48px}.detail-hero .offer-row{margin:20px 0}.detail-hero h2{font-size:22px}.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:20px;border-top:1px solid var(--line)}.detail-meta span{font-size:14px;color:var(--sub);display:block}.detail-meta strong{font-size:18px}.key-row{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}.key-row:last-child{border-bottom:0}.key-row strong{text-align:right}.coverage-preview{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.country{border:1px solid var(--line);padding:8px 12px;border-radius:12px;font-size:14px}.country small{margin-left:8px;color:var(--sub);font-size:12px}.detail-actions{position:sticky;bottom:80px;background:var(--bg);border-top:1px solid var(--line);padding:20px 0 12px;margin-top:32px;z-index:2}.detail-actions .btn{width:100%}.detail-actions p{font-size:14px;color:var(--sub);margin-top:8px}
.summary-card{border:1px solid var(--line);border-radius:20px;padding:24px;background:var(--surface);margin:20px 0}.summary-card h2{font-size:22px}.summary-card>p{margin-top:8px}.check-list{display:grid;gap:20px;margin:24px 0}.check-row{display:flex;align-items:flex-start;gap:12px;font-size:16px}.check-row input{appearance:auto;accent-color:var(--action);width:22px;height:22px;min-width:22px;margin:2px 0 0}.check-row span{flex:1}.check-row small{display:block;color:var(--sub);margin-top:4px}.quote-price{font-size:32px;color:var(--action);line-height:1.4;margin-top:8px}.quote-price small{font-size:16px;color:var(--sub);margin-left:6px}
.payment-amount{text-align:center;background:var(--surface);border-radius:20px;padding:32px 20px;margin:24px 0}.payment-amount>p{font-size:14px;color:var(--sub)}.payment-amount strong{font-size:48px;font-weight:500;letter-spacing:-1px;display:block;line-height:1.3;margin:8px 0;color:var(--action)}.payment-amount strong small{font-size:18px;letter-spacing:0;margin-left:6px}.payment-amount .pill{margin-top:12px}.mono{font-family:Outfit,'Noto Sans SC',sans-serif;overflow-wrap:anywhere;letter-spacing:.02em}.copy-block{background:var(--surface);padding:20px;border-radius:12px;margin:16px 0}.copy-block .mono{margin:8px 0 16px;font-size:16px}.copy-block>.small{color:var(--sub)}.demo-qr{display:grid;place-items:center;min-height:160px;padding:24px;border:1px dashed var(--control);border-radius:12px;margin:20px auto;color:var(--sub);text-align:center;max-width:260px}.demo-qr strong{font-size:28px;color:var(--ink)}
.status-head{text-align:center;padding:32px 16px}.status-icon{display:grid;place-items:center;margin:0 auto 20px;width:64px;height:64px;border-radius:20px;background:var(--surface)}.status-icon .icon{width:32px;height:32px}.status-head h1{margin:16px 0 12px}.status-head p{color:var(--sub)}.timeline{padding:8px 0;margin:20px 0;list-style:none}.timeline li{position:relative;display:flex;gap:16px;padding:0 0 24px;margin:0}.timeline li:last-child{padding-bottom:0}.timeline .step-dot{width:24px;height:24px;border:1px solid var(--control);border-radius:50%;flex:none;display:grid;place-items:center;color:var(--sub);font-size:14px;background:var(--bg);z-index:1}.timeline li:not(:last-child):after{content:'';position:absolute;top:24px;left:11px;bottom:0;width:1px;background:var(--line)}.timeline .done .step-dot{background:var(--action);border-color:var(--action);color:var(--action-text)}.timeline p{font-size:14px;color:var(--sub);margin-top:4px}.order-card{padding:24px;border:1px solid var(--line);border-radius:20px;margin:20px 0}.order-card h3{margin:16px 0 8px}.order-card .card-meta{align-items:flex-start}.order-card .btn{margin-top:20px;width:100%}
.card-sample{padding:28px 24px;border-radius:20px;background:var(--surface);margin:20px 0}.card-sample h2{font-size:22px}.card-sample .demo-qr{background:var(--bg);margin:24px auto}.card-sample code{font-size:14px;word-break:break-all}.help-grid{display:grid;gap:16px}.help-card{display:flex;gap:16px;align-items:center;padding:20px;border:1px solid var(--line);border-radius:20px;color:var(--ink);text-decoration:none}.help-card>div{flex:1}.help-card p{color:var(--sub);font-size:14px;margin-top:4px}.article h2{font-size:22px;margin:28px 0 16px}.article p+p{margin-top:16px}.article p,.article li{line-height:1.85}.article a{display:inline-flex;min-height:44px;align-items:center}.empty{padding:40px 16px;text-align:center}.empty>.icon{width:40px;height:40px;margin-bottom:20px}.empty h2{font-size:22px}.empty p{margin:16px 0 24px}.empty .btn{margin-top:8px}
.site-footer{margin:24px 24px 0;padding:24px 0 32px;border-top:1px solid var(--line);font-size:14px;color:var(--sub);display:grid;gap:16px}.site-footer>div{display:flex;gap:20px;flex-wrap:wrap}.site-footer a{color:var(--sub);min-height:44px;display:flex;align-items:center}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(540px,100%);display:grid;grid-template-columns:repeat(3,1fr);padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);z-index:5}.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--sub);font-size:14px;padding:4px;min-height:56px;border-radius:12px}.bottom-nav a.active{color:var(--action);background:var(--surface)}.bottom-nav img{width:24px;height:24px}.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 40px);background:var(--ink);color:var(--bg);padding:14px 20px;border-radius:12px;box-shadow:var(--shadow);font-size:14px;z-index:30}
dialog{width:min(520px,calc(100vw - 32px));max-height:85dvh;padding:0;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:#10262080}#dialog-body{padding:24px;overflow:auto}.dialog-head{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:24px}.dialog-head h2{font-size:22px}.close-btn{width:44px;height:44px;flex:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:12px;font-size:24px;line-height:1}.country-list{max-height:45vh;overflow:auto;display:grid;gap:8px}.country-list .country{display:flex;justify-content:space-between}.dialog-actions{display:flex;gap:12px;margin-top:24px}.dialog-actions .btn{flex:1}.wallet-review{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.wallet-review .eyebrow{font-size:14px}.wallet-review p{font-size:14px;color:var(--sub);margin-bottom:16px}
body[data-mode=web] .shell{max-width:1200px;border-radius:0;border-left:0;border-right:0;box-shadow:none;margin-top:0}body[data-mode=web] .hero{padding:40px}body[data-mode=web] .product-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}body[data-mode=web] .site-header{padding:24px 40px}body[data-mode=web] #app{padding:32px 40px}body[data-mode=web] .site-footer{margin-left:40px;margin-right:40px}
@media(min-width:760px){body[data-mode=web] .desktop-nav{display:flex;gap:32px}body[data-mode=web] .desktop-nav a{min-height:48px;display:flex;align-items:center;text-decoration:none;color:var(--sub)}body[data-mode=web] .bottom-nav{display:none}body[data-mode=web] .shell{padding-bottom:0}body[data-mode=web] .hero h1{font-size:48px}body[data-mode=web] .purpose-grid{max-width:700px}body[data-mode=web] .checkout-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:40px}body[data-mode=web] .help-grid{grid-template-columns:1fr 1fr}body[data-mode=web] .detail-actions{bottom:0}body[data-mode=web] .prose-width{max-width:760px;margin-left:auto;margin-right:auto}}
@media(max-width:600px){.review-bar{padding:10px 16px;gap:8px;flex-wrap:wrap}.preview-label{width:100%;font-size:12px}.preview-note{font-size:12px}.review-actions{width:100%}.review-actions label{flex:1}.review-actions select{width:100%;max-width:none}.review-toggle{flex:1}.shell{margin:0;border:0;border-radius:0;box-shadow:none}.site-header{padding:16px 20px;gap:16px}#app{padding:20px}.hero{padding:24px 20px}.product-card{padding:20px}.site-footer{margin-left:20px;margin-right:20px}.review-panel{margin:12px 16px;padding:20px;grid-template-columns:1fr}.purpose-card{padding:20px 16px}.purpose-card strong{font-size:16px}.header-help{font-size:14px}.logo{height:32px}.card-bottom{gap:8px}.card-bottom .btn{padding-left:12px;padding-right:12px}.payment-amount strong{font-size:40px}body[data-mode=web] #app{padding:20px}body[data-mode=web] .site-header{padding:16px 20px}body[data-mode=web] .hero{padding:24px 20px}body[data-mode=web] .site-footer{margin-left:20px;margin-right:20px}.detail-hero .data-value{font-size:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* VI弧線限於留白，不穿過正文。 */
.hero{position:relative;background-image:none!important;overflow:hidden;padding-right:44px!important}.hero:after{content:"";position:absolute;pointer-events:none;right:0;top:0;width:24px;height:100%;background:url(assets/arcs-light.svg) center/auto 100%;opacity:.35}body[data-theme=dark] .hero:after{background-image:url(assets/arcs-dark.svg)}.coverage-line .icon{width:18px;height:18px;vertical-align:middle}.bottom-nav a[aria-current=page]{color:var(--action);background:var(--surface)}.prose p+p{margin-top:20px}.prose{margin:24px 0;line-height:1.85}.help-card{justify-content:space-between}.help-card>span{font-size:14px;white-space:nowrap;color:var(--sub)}