.esim-page {
    --esim-ink: #effcff;
    --esim-muted: #97b4bf;
    --esim-line: rgba(119, 223, 225, .19);
    --esim-panel: #0a2431;
    background: radial-gradient(circle at 92% 14%, rgba(32, 152, 156, .17), transparent 31%), radial-gradient(circle at 2% 43%, rgba(156, 129, 57, .11), transparent 32%), #06121c;
    color: var(--esim-ink);
}
.esim-page [hidden] { display: none !important; }
.esim-shell { margin: 0 auto; max-width: 1240px; min-height: calc(100vh - 205px); padding: clamp(28px, 5vw, 68px) 24px 90px; }
.esim-hero { align-items: center; background: linear-gradient(121deg, #0d303b, #09202e 64%, #0b1c29); border: 1px solid rgba(126, 225, 222, .26); border-radius: 30px 9px 30px 9px; display: grid; gap: 20px; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); min-height: 370px; overflow: hidden; padding: clamp(28px, 5vw, 62px); position: relative; }
.esim-hero::before { background: repeating-linear-gradient(0deg, rgba(190, 247, 232, .035) 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, rgba(190, 247, 232, .035) 0 1px, transparent 1px 36px); content: ''; inset: 0; mask-image: linear-gradient(90deg, transparent, #000); pointer-events: none; position: absolute; }
.esim-hero-copy { position: relative; z-index: 1; }
.esim-kicker { align-items: center; color: #92e1cc; display: flex; font-family: Consolas, 'Lucida Console', monospace; font-size: .72rem; font-weight: 800; gap: 10px; letter-spacing: .14em; margin: 0; }
.esim-signal { background: #b1e8a1; border-radius: 50%; box-shadow: 0 0 0 5px rgba(164, 233, 173, .12), 0 0 20px rgba(164, 233, 173, .5); height: 7px; width: 7px; }
.esim-hero h1 { color: #fff; font-family: Bahnschrift, 'Arial Narrow', sans-serif; font-size: clamp(2.55rem, 5.5vw, 5.2rem); letter-spacing: -.055em; line-height: 1.04; margin: 27px 0 18px; overflow-wrap: anywhere; text-align: left; }
.esim-hero h1 span { color: #b7e0bb; }
.esim-lead { color: #b0c8cd; font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.65; margin: 0 0 26px; max-width: 570px; }
.esim-status { background: rgba(185, 232, 169, .09); border: 1px solid rgba(185, 232, 169, .35); border-radius: 999px; color: #d5f2c8; display: inline-flex; font-size: .77rem; font-weight: 800; letter-spacing: .05em; padding: 10px 14px; text-transform: uppercase; }
.esim-art { aspect-ratio: 1; display: grid; justify-self: end; max-width: 340px; place-items: center; position: relative; width: 100%; }
.esim-orbit { border: 1px dashed rgba(169, 220, 201, .32); border-radius: 50%; inset: 4%; position: absolute; transform: rotate(-22deg) scaleY(.72); }
.esim-orbit-two { border-style: solid; inset: 17%; opacity: .62; transform: rotate(29deg) scaleY(.8); }
.esim-art-center { align-items: flex-start; background: linear-gradient(145deg, #1c4b55, #0b2838 65%); border: 1px solid rgba(206, 239, 213, .64); border-radius: 22px; box-shadow: 0 25px 75px rgba(0, 0, 0, .3), inset 0 0 42px rgba(159, 222, 184, .07); color: #e9fff1; display: flex; flex-direction: column; font-family: Bahnschrift, 'Arial Narrow', sans-serif; font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 800; height: 61%; justify-content: space-between; letter-spacing: -.05em; padding: 25px; position: relative; transform: rotate(-8deg); width: 61%; }
.esim-art-center::after { border: 1px solid rgba(215, 245, 227, .45); border-radius: 5px; content: ''; height: 18px; position: absolute; right: 23px; top: 27px; width: 28px; }
.esim-art-center span { color: #a9cbb9; font-family: Consolas, 'Lucida Console', monospace; font-size: .66rem; font-weight: 700; letter-spacing: .15em; }
.esim-point { background: #bde4b1; border: 5px solid #173c42; border-radius: 50%; box-shadow: 0 0 0 1px rgba(206, 239, 213, .7); height: 16px; position: absolute; width: 16px; }
.esim-point-a { left: 7%; top: 29%; }
.esim-point-b { bottom: 16%; right: 7%; }
.esim-gate { align-items: flex-start; background: rgba(10, 35, 47, .94); border: 1px solid var(--esim-line); border-radius: 18px; display: flex; gap: 22px; margin-top: 22px; padding: clamp(23px, 4vw, 38px); }
.esim-gate-mark { align-items: center; background: #143f45; border: 1px solid #4f9996; border-radius: 13px; color: #d2f3d1; display: inline-flex; flex: 0 0 50px; font-size: 1.65rem; height: 50px; justify-content: center; }
.esim-gate h2, .esim-dashboard h2, .esim-dashboard h3 { color: #f3fefa; font-family: Bahnschrift, 'Arial Narrow', sans-serif; text-align: left; }
.esim-gate h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 7px; }
.esim-gate p { color: var(--esim-muted); line-height: 1.6; margin: 0; }
.esim-button { background: #b8e3b7; border-radius: 10px 3px 10px 3px; color: #0b2931; display: inline-block; font-weight: 900; margin-top: 22px; padding: 12px 18px; text-decoration: none; }
.esim-button:hover, .esim-button:focus-visible { background: #d4f3d2; }
.esim-dashboard { margin-top: 22px; }
.esim-dashboard-bar { align-items: center; border-bottom: 1px solid var(--esim-line); display: flex; justify-content: space-between; margin-bottom: 20px; padding: 6px 2px 22px; }
.esim-dashboard-bar h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.04em; margin: 8px 0 5px; }
.esim-account-email { color: var(--esim-muted); margin: 0; overflow-wrap: anywhere; }
.esim-dashboard-bar button { background: transparent; border: 1px solid #527a81; border-radius: 9px; color: #e2f8f4; cursor: pointer; font: inherit; font-weight: 800; min-height: 44px; padding: 10px 16px; }
.esim-dashboard-bar button:hover, .esim-dashboard-bar button:focus-visible { border-color: #bee6bf; color: #fff; }
.esim-dashboard-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.esim-empty-card, .esim-info-card { background: linear-gradient(145deg, rgba(13, 43, 53, .97), rgba(8, 28, 41, .97)); border: 1px solid var(--esim-line); border-radius: 19px; padding: clamp(23px, 3.5vw, 38px); }
.esim-empty-card { display: flex; flex-direction: column; min-height: 390px; }
.esim-card-index { color: #93d2c4; font-family: Consolas, 'Lucida Console', monospace; font-size: .69rem; font-weight: 800; letter-spacing: .15em; }
.esim-empty-symbol { align-items: center; border: 1px solid rgba(174, 229, 196, .34); border-radius: 18px; color: #b7e6bb; display: inline-flex; font-size: 3.3rem; height: 83px; justify-content: center; margin: auto 0 18px; transform: rotate(-5deg); width: 83px; }
.esim-empty-card h3, .esim-info-card h3 { font-size: clamp(1.45rem, 2.8vw, 2.15rem); letter-spacing: -.025em; margin: 0 0 9px; }
.esim-empty-card p, .esim-info-card p { color: var(--esim-muted); line-height: 1.65; margin: 0; max-width: 590px; }
.esim-card-foot { align-items: center; border-top: 1px solid var(--esim-line); color: #849da8; display: flex; font-family: Consolas, 'Lucida Console', monospace; font-size: .68rem; gap: 12px; justify-content: space-between; letter-spacing: .08em; margin-top: 32px; padding-top: 18px; }
.esim-card-foot strong { color: #c8e5b6; }
.esim-side-stack { display: grid; gap: 18px; grid-template-rows: 1fr 1fr; }
.esim-info-card { display: flex; flex-direction: column; }
.esim-info-card h3 { margin-top: 28px; }
.esim-muted-tag { align-self: flex-start; border: 1px solid #506f73; border-radius: 999px; color: #b3c7c7; font-size: .72rem; font-weight: 800; margin-top: auto; padding: 7px 11px; text-transform: uppercase; }
.esim-info-card a { color: #ccecc9; font-weight: 800; margin-top: auto; overflow-wrap: anywhere; padding-top: 12px; text-decoration-color: rgba(204, 236, 201, .5); text-underline-offset: 4px; }
.esim-plan-preview { border-top: 1px solid var(--esim-line); margin-top: 30px; padding-top: 29px; }
.esim-plan-preview-heading { align-items: end; display: flex; gap: 30px; justify-content: space-between; margin-bottom: 20px; }
.esim-plan-preview-heading h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: -.035em; margin: 8px 0 0; }
.esim-plan-preview-heading > p { color: var(--esim-muted); line-height: 1.6; margin: 0; max-width: 390px; }
.esim-destination-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.esim-destination-grid article { background: rgba(14, 41, 50, .8); border: 1px solid var(--esim-line); border-radius: 12px 3px 12px 3px; min-width: 0; padding: 20px; }
.esim-destination-grid article > span { color: #8dd3bf; font-family: Consolas, 'Lucida Console', monospace; font-size: .7rem; }
.esim-destination-grid h3 { font-size: 1.26rem; margin: 16px 0 11px; }
.esim-destination-grid p { color: #a7bfc1; font-size: .78rem; line-height: 1.6; margin: 0; }
.esim-destination-grid b { color: #6a9b92; font-weight: 500; padding: 0 2px; }
.esim-disclaimer { color: #85a3aa; font-size: .82rem; line-height: 1.5; margin: 18px 2px 0; }
.esim-noscript { color: #e1efde; margin: 24px 0; }
@media (max-width: 820px) { .esim-hero { grid-template-columns: 1fr; } .esim-art { grid-row: 1; justify-self: center; max-width: 260px; } .esim-dashboard-grid { grid-template-columns: 1fr; } .esim-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; } .esim-destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .esim-shell { padding: 24px 13px 65px; } .esim-hero { border-radius: 20px 6px 20px 6px; gap: 6px; padding: 24px; } .esim-art { max-width: 210px; } .esim-hero h1 { margin-top: 18px; } .esim-gate { gap: 13px; } .esim-gate-mark { flex-basis: 38px; font-size: 1.25rem; height: 38px; } .esim-dashboard-bar { align-items: flex-start; gap: 18px; } .esim-dashboard-bar button { flex: 0 0 auto; } .esim-side-stack { grid-template-columns: 1fr; } .esim-empty-card { min-height: 340px; } .esim-info-card { min-height: 205px; } .esim-plan-preview-heading { align-items: flex-start; flex-direction: column; gap: 11px; } }
@media (max-width: 390px) { .esim-dashboard-bar { flex-direction: column; } .esim-hero h1 { font-size: 2.45rem; } }
@media (prefers-reduced-motion: no-preference) { .esim-hero-copy { animation: esim-rise .55s ease both; } .esim-art { animation: esim-rise .7s .12s ease both; } @keyframes esim-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } }

/* Purchased-plan telemetry keeps the storefront's restrained signal-console look. */
.esim-dashboard-grid { grid-template-columns: minmax(0, 1.35fr) minmax(285px, .65fr); align-items: start; }
.esim-orders-panel, .esim-prepaid-help { background: linear-gradient(145deg, rgba(13, 43, 53, .97), rgba(8, 28, 41, .97)); border: 1px solid var(--esim-line); border-radius: 19px; padding: clamp(22px, 3.5vw, 36px); }
.esim-orders-header { align-items: end; display: flex; gap: 20px; justify-content: space-between; }
.esim-orders-header h3 { font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.035em; margin: 10px 0 0; }
.esim-panel-intro { color: var(--esim-muted); line-height: 1.6; margin: 14px 0 26px; }
.esim-secondary-button, .esim-usage-button { align-items: center; background: rgba(160, 228, 187, .1); border: 1px solid rgba(160, 228, 187, .58); border-radius: 9px 3px 9px 3px; color: #ddf8e6; cursor: pointer; display: inline-flex; font: 800 .83rem/1.25 Bahnschrift, 'Arial Narrow', sans-serif; justify-content: center; min-height: 42px; padding: 10px 14px; text-align: center; transition: background .2s, border-color .2s, transform .2s; }
.esim-secondary-button:hover, .esim-usage-button:hover { background: rgba(160, 228, 187, .2); border-color: #c9f1d0; transform: translateY(-1px); }
.esim-secondary-button:focus-visible, .esim-usage-button:focus-visible, .esim-prepaid-help a:focus-visible { outline: 2px solid #ffe287; outline-offset: 3px; }
.esim-secondary-button:disabled, .esim-usage-button:disabled { cursor: wait; opacity: .64; transform: none; }
.esim-list-state { border: 1px dashed rgba(154, 217, 204, .38); border-radius: 13px; color: #c3d9d7; line-height: 1.65; margin: 0; padding: 25px; }
.esim-list-state p { margin: 0 0 14px; }
.esim-list-error { border-color: rgba(239, 188, 136, .5); color: #ffdcc1; }
.esim-list-empty { text-align: left; }
.esim-list-empty .esim-empty-symbol { display: flex; height: 58px; margin: 0 0 15px; width: 58px; font-size: 2.2rem; }
.esim-list-empty h4 { color: #f3fefa; font: 800 1.4rem Bahnschrift, 'Arial Narrow', sans-serif; margin: 0 0 7px; }
.esim-list-empty p { color: var(--esim-muted); margin: 0; }
.esim-list-note { color: #a9c6c9; font-size: .8rem; line-height: 1.5; margin: 17px 0 0; }
.esim-orders-list { display: grid; gap: 14px; }
.esim-order-card { background: linear-gradient(120deg, rgba(14, 49, 57, .96), rgba(9, 32, 44, .95)); border: 1px solid rgba(121, 217, 215, .25); border-left: 3px solid #a4ddb2; border-radius: 10px 16px 16px 10px; min-width: 0; padding: clamp(18px, 2.5vw, 24px); }
.esim-order-head { align-items: flex-start; display: flex; gap: 14px; justify-content: space-between; }
.esim-order-head h4 { color: #f5fff7; font: 800 clamp(1.2rem, 2.2vw, 1.5rem)/1.2 Bahnschrift, 'Arial Narrow', sans-serif; margin: 5px 0; overflow-wrap: anywhere; }
.esim-order-date { color: var(--esim-muted); font-size: .77rem; margin: 0; }
.esim-unit-list { display: grid; gap: 8px; list-style: none; margin: 19px 0 0; padding: 0; }
.esim-unit-row { align-items: center; border-top: 1px solid rgba(119, 223, 225, .15); display: flex; gap: 10px; justify-content: space-between; padding-top: 11px; }
.esim-unit-name { color: #cee3e1; font-size: .86rem; }
.esim-state-chip { border: 1px solid #537b76; border-radius: 999px; color: #bfd9ca; flex: 0 0 auto; font: 800 .67rem/1.3 Consolas, 'Lucida Console', monospace; letter-spacing: .04em; padding: 6px 9px; text-transform: uppercase; }
.esim-state-chip--delivered { background: rgba(176, 231, 172, .1); border-color: #7dbe8e; color: #ccf2d0; }
.esim-state-chip--review { background: rgba(237, 187, 127, .1); border-color: #d2a870; color: #ffdca7; }
.esim-usage-actions { align-items: center; display: flex; gap: 12px; margin-top: 20px; }
.esim-usage-actions .esim-usage-button { flex: 0 0 auto; }
.esim-usage-note { color: var(--esim-muted); font-size: .77rem; line-height: 1.45; margin: 0; }
.esim-usage-alert { color: #ffd4b7; font-size: .83rem; line-height: 1.5; margin: 14px 0 0; }
.esim-usage-card { background: rgba(5, 20, 31, .62); border: 1px solid rgba(151, 215, 199, .26); border-radius: 13px; margin-top: 18px; padding: 18px; }
.esim-usage-card h5 { color: #e4fce5; font: 800 1rem Bahnschrift, 'Arial Narrow', sans-serif; letter-spacing: .03em; margin: 0 0 14px; }
.esim-usage-stats { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.esim-usage-stats div { min-width: 0; }
.esim-usage-stats dt { color: #a7c5c7; font: 700 .66rem Consolas, 'Lucida Console', monospace; letter-spacing: .06em; text-transform: uppercase; }
.esim-usage-stats dd { color: #f0fff0; font: 800 clamp(1.05rem, 2vw, 1.55rem) Bahnschrift, 'Arial Narrow', sans-serif; margin: 5px 0 0; overflow-wrap: anywhere; }
.esim-usage-meter { background: #21434d; border-radius: 999px; height: 7px; margin: 18px 0 9px; overflow: hidden; }
.esim-usage-meter span { background: linear-gradient(90deg, #a6e6ae, #75dfd5); border-radius: inherit; display: block; height: 100%; max-width: 100%; transition: width .4s ease; }
.esim-usage-timestamp { color: #a9c6c9; font-size: .76rem; line-height: 1.5; margin: 11px 0 0; }
.esim-order-lookup { border-top: 1px solid var(--esim-line); margin-top: 28px; padding-top: 24px; }
.esim-order-lookup h4 { color: #eaf9ed; font: 800 1.3rem/1.3 Bahnschrift, 'Arial Narrow', sans-serif; margin: 9px 0 12px; }
.esim-lookup-form { align-items: end; display: flex; gap: 12px; margin-top: 18px; }
.esim-lookup-field { flex: 1 1 auto; min-width: 0; }
.esim-lookup-field label { color: #c7e4d7; display: block; font-size: .79rem; font-weight: 800; margin-bottom: 7px; }
.esim-lookup-field input { background: #061c28; border: 1px solid #547e80; border-radius: 9px 3px 9px 3px; box-sizing: border-box; color: #effcff; font: .86rem/1.4 Consolas, 'Lucida Console', monospace; min-height: 44px; padding: 10px 12px; width: 100%; }
.esim-lookup-field input::placeholder { color: #8aadb7; }
.esim-lookup-field input:focus-visible { border-color: #c9f1d0; outline: 2px solid #ffe287; outline-offset: 3px; }
.esim-lookup-field input[aria-invalid="true"] { border-color: #ffc18f; }
.esim-lookup-field input:disabled { opacity: .65; }
.esim-lookup-form .esim-secondary-button { flex: 0 0 auto; min-height: 44px; }
.esim-lookup-identity { color: #caeddd; font: 800 .8rem/1.5 Consolas, 'Lucida Console', monospace; margin: 0 0 12px; overflow-wrap: anywhere; }
.esim-prepaid-help { margin-top: 22px; }
.esim-prepaid-help h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); letter-spacing: -.03em; margin: 8px 0 18px; }
.esim-help-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.esim-help-grid p { border-left: 1px solid rgba(149, 222, 188, .4); color: #acc8c9; line-height: 1.55; margin: 0; padding-left: 14px; }
.esim-help-grid strong, .esim-help-grid span { display: block; }
.esim-help-grid strong { color: #eaf9ed; margin-bottom: 7px; }
.esim-help-grid a { color: #c7edd4; display: inline-block; margin-top: 5px; text-underline-offset: 3px; }
.esim-help-grid p:last-child span:last-child { display: inline; }
@media (max-width: 980px) { .esim-dashboard-grid { grid-template-columns: 1fr; } .esim-side-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; } }
@media (max-width: 720px) { .esim-side-stack, .esim-help-grid { grid-template-columns: 1fr; } .esim-info-card { min-height: 0; } .esim-info-card h3 { margin-top: 18px; } }
@media (max-width: 540px) { .esim-orders-header, .esim-order-head { align-items: flex-start; flex-direction: column; } .esim-usage-stats { grid-template-columns: 1fr 1fr; } .esim-usage-actions { align-items: flex-start; flex-direction: column; } .esim-lookup-form { align-items: stretch; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .esim-secondary-button, .esim-usage-button, .esim-usage-meter span { transition: none; } }