/* Approved A storefront, blue/white edition. Base components retain their API hooks. */
:root{--bg:#f5f7fa;--panel:#fff;--panel-2:#f8faff;--panel-3:#edf2fa;--ink-1:#172033;--ink-2:#526079;--ink-3:#657187;--ink-4:#8894a8;--line:#dfe5ee;--line-2:#ccd5e4;--accent:#2859d8;--accent-dark:#204bb8;--accent-tint:#edf2ff;--accent-tint-2:#e5edff;--appbar-h:84px;--radius:10px}
html,body{height:auto;min-height:100%;scroll-behavior:smooth;scroll-padding-top:115px}
body.commerce{display:block;overflow:auto;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}
.commerce #app{display:block;min-height:100vh}
.commerce .appbar{height:84px;position:sticky;top:0;padding:0 max(26px,calc((100vw - 1200px)/2));overflow:visible;gap:24px;flex-wrap:nowrap;z-index:40}
.commerce .brand .logo{background:var(--accent);width:34px;height:34px;border-radius:9px}
.commerce .brand .logo svg{width:23px;height:23px}
.commerce .brand-text strong{font-size:20px;letter-spacing:-.6px}
.brand-store{font-size:10px;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.commerce .brand-text small{font-size:9px;letter-spacing:1px;margin-top:3px}
.commerce .appbar-context,.commerce .dashes{display:none!important}
.commerce-nav{display:flex;align-items:center;gap:8px;margin:auto}
.commerce-nav button{background:none;color:var(--ink-3);border:0;padding:12px 15px;min-height:44px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.commerce-nav button.is-active{color:var(--accent);font-weight:650}
.commerce .appbar-actions{margin-left:0}
.commerce #mobile-auth-trigger{display:inline-flex;margin-left:0}
.commerce .app[data-view="app"] #mobile-auth-trigger{display:none}
.commerce .page{display:block;overflow:visible;height:auto;min-height:0;padding:0}
.commerce .app[data-view="app"] .page{overflow:visible}
.commerce .page,.commerce .main{overscroll-behavior:auto}
.commerce .app[data-view="app"] #view-app,.commerce .app[data-view="app"] .shell{height:auto;min-height:0}
.commerce .shell{display:block;height:auto}
.commerce .side{display:none!important}
.commerce .main,.commerce .landing,.commerce .cko{max-width:1200px;width:100%;margin:auto;padding:34px 26px 0;overflow:visible;height:auto;min-width:0}
.commerce .main{padding-top:30px}
.commerce .landing{padding-bottom:0}
.commerce .crumb{display:none}
.commerce .btn{min-height:44px;padding:11px 19px;border-radius:8px;font-weight:600;box-shadow:none;transition:background .15s,color .15s}
.commerce .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.commerce .btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.commerce .btn-link{border:0;background:transparent;color:var(--accent)}
.commerce .btn-sm{min-height:36px;padding:7px 13px}
.commerce .iconbtn{min-width:36px;min-height:36px}
.commerce .btn:focus-visible,.commerce button:focus-visible,.commerce a:focus-visible{outline:3px solid var(--accent-light);outline-offset:3px}
.commerce .card{box-shadow:none;border-radius:10px;border-color:var(--line)}
.commerce .card-head{padding:20px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:10px}
.commerce .card-head h2{font-size:17px}
.commerce .card-body{padding:24px}
.commerce .card-body-flush{padding:0}
.commerce-hero{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--line);background:var(--panel);border-radius:14px;overflow:hidden}
.commerce-hero-copy{padding:50px 42px}
.commerce .eyebrow{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:1.8px}
.commerce-badge{display:inline-block;margin-left:12px;padding:4px 9px;background:var(--accent-tint);border-radius:4px;letter-spacing:0}
.commerce-hero h1{font-size:clamp(36px,4.2vw,62px);font-weight:650;line-height:1.18;letter-spacing:-2px;margin-top:26px}
.commerce-hero h1 span{color:var(--accent)}
.commerce-hero .lead{font-size:14px;color:var(--ink-3);max-width:410px;margin:22px 0 27px;line-height:1.9}
.commerce-hero-note{font-size:11px;color:var(--ink-3);margin-top:22px}
.commerce-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:310px;background:#edf2fa;color:#446bba}
.commerce-art svg{width:100%;max-width:420px;stroke-width:1;stroke-linecap:butt}
.commerce-art>span{position:absolute;bottom:24px;left:24px;font-size:10px;letter-spacing:2px}
.commerce-platforms{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:25px 0;margin-top:34px;color:var(--ink-3);font-size:12px}
.commerce-platforms>div{display:flex;flex-wrap:wrap;gap:9px}
.commerce-platforms span{padding:6px 12px;border:1px solid var(--line);border-radius:5px;font-size:11px}
.commerce .section{padding:0;margin-top:40px}
.commerce .section-heading{margin-bottom:20px;display:flex;align-items:end;justify-content:space-between;gap:20px}
.commerce .section-heading h2{font-size:26px;letter-spacing:-.6px;margin-top:8px}
.commerce .section-heading>p{color:var(--ink-3);max-width:430px;font-size:12px;text-align:right}
.commerce #plan-grid,.commerce #buy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;background:none;border:0;overflow:visible}
.commerce #plan-grid .plan,.commerce #buy-grid .plan{padding:26px 22px;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:18px;min-width:0;position:relative;box-shadow:none}
.commerce #plan-grid .plan.is-featured,.commerce #buy-grid .plan.is-featured{border-color:var(--accent);background:#f8faff;box-shadow:0 0 0 1px var(--accent)}
.commerce .plan-copy{padding:0;min-height:120px;flex:none}
.commerce .plan-title-line{display:block}
.commerce .plan-name{font-size:18px;line-height:1.5}
.commerce .plan-desc{font-size:12px;color:var(--ink-3);line-height:1.8;margin-top:8px;min-height:0}
.commerce .plan-flags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.commerce .plan-flag{color:var(--accent);background:var(--accent-tint);border:0;border-radius:4px;padding:3px 8px;font-size:10px}
.commerce .plan.is-featured .plan-flag:first-child{position:absolute;right:15px;top:-14px;background:var(--accent);color:#fff}
.commerce #plan-grid .plan-price,.commerce #buy-grid .plan-price{padding:0;border:0;min-height:54px;margin:0;display:block}
.commerce #plan-grid .plan-price .plan-cell-label{display:none}
.commerce .price-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px}
.commerce .price-line>.num{font:650 36px/1.2 "Segoe UI",sans-serif;letter-spacing:-1px}
.commerce .price-line>.cur{font:500 16px "Segoe UI",sans-serif}
.commerce .price-was,.commerce .price-off{font-size:10px;letter-spacing:0;margin-left:3px}
.commerce .plan-unit{font-size:11px;color:var(--ink-3);margin-top:6px;display:block}
.commerce .commerce-plan-perks{margin:0;padding:0;list-style:none;color:var(--ink-3);font-size:12px;line-height:2.1}
.commerce-plan-perks li:before{content:'✓';color:var(--accent);margin-right:9px}
.commerce #plan-grid .plan-foot,.commerce #buy-grid .plan-foot{padding:0;border:0;margin-top:auto;background:transparent;display:grid;gap:8px}
.commerce #plan-grid .plan-foot .btn,.commerce #buy-grid .plan-foot .btn{width:100%}
.commerce .commerce-product-details{color:var(--accent);background:none;border:0;padding:9px 0;min-height:36px;cursor:pointer;font:inherit;font-size:12px}
.commerce .plan-picker,.commerce .plan-detail,.commerce .plan-others,.commerce .plan-buybar{display:none!important}
.commerce .plan-footnote{font-size:11px;color:var(--ink-3);margin-top:15px;padding:0}
.commerce-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.commerce-steps li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px}
.commerce-steps li>span{font-size:11px;letter-spacing:1.8px;color:var(--accent)}
.commerce-steps h3{font-size:18px;margin:14px 0 10px}
.commerce-steps p{font-size:12px;line-height:1.9;color:var(--ink-3)}
.commerce .store-footer{border-top:1px solid var(--line);margin-top:44px;padding:28px 0;gap:30px;background:none}
.commerce .store-footer p,.commerce .store-footer span,.commerce .store-footer a{font-size:11px;color:var(--ink-3)}
.commerce-service-tabs{display:flex;gap:25px;max-width:1148px;margin:0 auto;padding:20px 0 0;border-bottom:1px solid var(--line);overflow-x:auto}
.commerce-service-tabs button{border:0;border-bottom:2px solid transparent;padding:14px 0;background:none;color:var(--ink-3);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}
.commerce-service-tabs button.is-active{border-color:var(--accent);color:var(--accent)}
.commerce #app[data-commerce-page="orders"] .commerce-service-tabs{display:none}
.commerce .pane{display:block;min-width:0}
.commerce .pane[hidden]{display:none!important}
.commerce [data-page="orders"]>.card+.card{margin-top:20px}
.commerce .pagehead,.commerce .commerce-pagehead{margin:0 0 27px;display:flex;gap:18px;align-items:center;justify-content:space-between}
.commerce .pagehead h1,.commerce .commerce-pagehead h1{font-size:34px;font-weight:650;letter-spacing:-1px;line-height:1.3}
.commerce .pagehead p,.commerce .commerce-pagehead p{color:var(--ink-3);font-size:13px;margin-top:8px}
.commerce #view-help .commerce-pagehead{display:block;margin-top:6px}
.commerce #view-help .commerce-pagehead h1{margin-top:10px}
.commerce .ov-grid,.commerce .ov-main{display:block}
.commerce .ov-main>*{margin-bottom:22px}
.commerce .ov-side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:22px}
.commerce .ov-side>.card{grid-column:auto;min-width:0}
.commerce .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:0;border:0;background:none}
.commerce .kpis>.kpi,.commerce .kpis>.usage{border:1px solid var(--line);border-radius:10px;background:#fff;padding:22px;min-width:0}
.commerce .kpi-value{font-size:30px;margin:10px 0}
.commerce .kpi-value .num{font-family:"Segoe UI",sans-serif}
.commerce .cols{display:grid;gap:20px;margin-bottom:22px}
.commerce .cols-2,.commerce .cols-2b{grid-template-columns:repeat(2,minmax(0,1fr))}
.commerce .commerce-import{background:#fff;border-color:#cbd9fb}
.commerce .commerce-import .card-head{border-bottom:0;padding-bottom:0}
.commerce .commerce-import .card-body{padding-top:16px}
.commerce .coderow{gap:10px;flex-wrap:wrap}
.commerce .coderow input{min-width:100px;flex:1;border-radius:6px;padding:12px;font-size:12px;background:#f8faff}
.commerce .rail-fill,.commerce .bar>i{background:var(--accent)}
.commerce-diagnostics{margin:24px 0}
.commerce-diagnostics>summary{cursor:pointer;padding:18px 0;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.commerce-diagnostics>summary>span{float:right;color:var(--accent)}
.commerce-diagnostics>div{padding-top:18px}
.commerce .main-foot{font-size:11px;margin:20px 0 30px}
.commerce .cko{padding-top:30px;padding-bottom:40px}
.commerce .cko-grid{grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr);gap:24px}
.commerce .cko-nav{margin-bottom:24px}
.commerce .cko-nav b{font-size:25px;letter-spacing:-.7px}
.commerce .cko-steps{margin-bottom:30px}
.commerce-summary-price{margin:18px 0}
.commerce-summary-price .num{font-size:34px}
.commerce .cko-side .card{position:static}
.commerce .commerce-checkout-summary{position:sticky!important;top:106px}
.commerce-agreement{display:flex;align-items:flex-start;gap:10px;color:var(--ink-3);font-size:12px;margin-top:18px;cursor:pointer}
.commerce-agreement input{accent-color:var(--accent);margin-top:4px;flex:none}
.commerce .auth-card{display:block;position:static;width:auto;max-height:none;margin:0;padding:26px;background:var(--panel);border:0;box-shadow:none;transform:none;overflow:visible}
.commerce .mobile-auth-close{display:flex}
.commerce .auth-card-title{margin-bottom:20px}
.commerce .auth-card-title h2{font-size:24px}
.commerce #modal-login .modal-card{max-width:500px;width:100%}
.commerce .modal{background:rgba(13,24,44,.52);backdrop-filter:blur(5px);z-index:100;padding:20px}
.commerce .modal-card{border-radius:14px;max-height:90vh;overflow:auto;box-shadow:0 24px 90px #14274940}
.commerce .modal-head,.commerce .modal-body{padding:24px}
.commerce .app.is-auth-open .appbar{display:flex}
.commerce .auth-scrim,.commerce .sheet,.commerce .sheet-scrim{display:none!important}
.commerce-order-tabs{display:flex;gap:25px;border-bottom:1px solid var(--line);margin:0 0 24px}
.commerce-order-tabs button{font:inherit;background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-3);padding:14px 0;cursor:pointer}
.commerce-order-tabs .is-active{color:var(--accent);border-bottom-color:var(--accent)}
.commerce-pending{display:grid;gap:15px;margin-bottom:20px}
.commerce-pending:empty{display:none}
.commerce-pending-item{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;padding:22px;border:1px solid var(--line);border-radius:10px}
.commerce-pending-item p{font-size:12px;color:var(--ink-3);margin-top:6px}
.commerce .commerce-detail-note{padding:14px;border-radius:6px;background:var(--accent-tint);color:var(--ink-2);font-size:12px;line-height:1.8;margin:20px 0}
.commerce .commerce-order-action{white-space:nowrap}
.commerce .toast-stack{bottom:24px;top:auto}
@media(max-width:1050px){.commerce .appbar{gap:15px;padding:0 25px}.commerce-nav{gap:2px}.commerce-nav button{padding:10px}.commerce-hero-copy{padding:35px 30px}.commerce #plan-grid,.commerce #buy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.commerce-service-tabs{margin:0 26px}.commerce .user-chip #user-name{max-width:100px;overflow:hidden;text-overflow:ellipsis}.commerce .appbar-actions .iconbtn{display:none}}
@media(max-width:720px){html{scroll-padding-top:150px}.commerce .appbar{height:auto;min-height:110px;flex-wrap:wrap;gap:8px;padding:14px 18px;align-content:center}.commerce .brand-text strong{font-size:17px}.commerce .brand .logo{width:30px;height:30px}.commerce #mobile-auth-trigger,.commerce .appbar-actions{margin-left:auto}.commerce-nav{order:3;width:100%;justify-content:space-between;margin:0}.commerce-nav button{padding:9px 5px;font-size:12px;min-height:38px}.commerce .main,.commerce .landing,.commerce .cko{padding:22px 18px 0}.commerce .landing{padding-bottom:0}.commerce-hero{grid-template-columns:1fr}.commerce-hero-copy{padding:30px 25px}.commerce-hero h1{font-size:38px;letter-spacing:-1.2px;margin-top:20px}.commerce-hero .lead{font-size:13px}.commerce-hero .acts{display:grid;gap:10px}.commerce-art{min-height:200px}.commerce-art svg{max-width:270px}.commerce-art>span{font-size:9px;bottom:16px;left:20px}.commerce-platforms{align-items:flex-start;flex-direction:column;gap:14px;padding:22px 0;margin-top:25px}.commerce .section-heading{align-items:flex-start}.commerce .section-heading h2{font-size:23px}.commerce .section-heading>p{display:none}.commerce #plan-grid,.commerce #buy-grid{gap:17px 12px}.commerce #plan-grid .plan,.commerce #buy-grid .plan{padding:22px 14px;gap:15px}.commerce .plan-copy{min-height:105px}.commerce .plan-name{font-size:17px}.commerce .plan-desc{font-size:11px}.commerce .price-line>.num{font-size:28px}.commerce .commerce-plan-perks{font-size:11px}.commerce .plan-foot .btn{font-size:12px;padding:11px 8px}.commerce .commerce-product-details{font-size:11px}.commerce-steps{grid-template-columns:1fr;gap:14px}.commerce-steps li{padding:22px}.commerce-service-tabs{margin:0 18px;padding-top:4px;gap:24px}.commerce .pagehead,.commerce .commerce-pagehead{display:block;margin-bottom:22px}.commerce .pagehead .acts{margin-top:18px;display:flex}.commerce .pagehead h1,.commerce .commerce-pagehead h1{font-size:28px}.commerce .kpis,.commerce .ov-side,.commerce .cols-2,.commerce .cols-2b{grid-template-columns:1fr;gap:14px}.commerce .kpis>.kpi,.commerce .kpis>.usage{padding:20px}.commerce .card-head,.commerce .card-body{padding:20px}.commerce .card-body-flush{padding:0}.commerce .coderow input{width:100%;flex-basis:100%;max-width:100%}.commerce .coderow .btn{flex:1}.commerce .store-footer{grid-template-columns:1fr 1fr;gap:24px}.commerce .cko-grid{grid-template-columns:1fr;gap:20px}.commerce .cko-side{grid-row:1}.commerce .commerce-checkout-summary{position:static!important}.commerce .cko-side .card:not(.commerce-checkout-summary){order:0}.commerce .cko-side #cko-paycard{order:1}.commerce .cko-steps{font-size:11px;gap:8px;margin-bottom:24px}.commerce .cko-steps li+li:before{margin:0 6px;width:15px}.commerce .cko-nav b{font-size:23px}.commerce .cko{padding-bottom:30px}.commerce .modal{padding:14px}.commerce .modal-head,.commerce .modal-body,.commerce .auth-card{padding:22px}.commerce-pending-item{align-items:flex-start;flex-direction:column;gap:14px}.commerce-order-tabs{gap:22px;font-size:12px}.commerce .matrix{font-size:11px;overflow:auto}.commerce .main-foot{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.commerce *{transition:none!important}}

/* Mobile is the primary shopping surface: persistent, thumb-reachable navigation. */
.commerce-mobile-nav,.commerce-mobile-help{display:none}
@media(max-width:720px){
  html{scroll-padding-top:90px}
  body.commerce{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .commerce .appbar{height:68px;min-height:68px;flex-wrap:nowrap;gap:8px;padding:10px 16px}
  .commerce .commerce-nav{display:none}
  .commerce .brand-text strong{font-size:16px}
  .commerce .brand-text small{font-size:9px;letter-spacing:0}
  .commerce .brand{gap:7px}
  .commerce .commerce-mobile-help{display:inline-flex;margin-left:auto;min-height:40px;width:36px;flex:none}
  .commerce #mobile-auth-trigger,.commerce .appbar-actions{margin-left:0;flex:none}
  .commerce #mobile-auth-trigger{min-height:40px;padding:9px 11px;font-size:12px}
  .commerce .appbar-actions .user-chip{max-width:112px;font-size:12px;padding-right:6px;gap:5px}
  .commerce .user-chip #user-name{max-width:48px}
  .commerce .commerce-mobile-nav{position:fixed;inset:auto 0 0;z-index:50;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 18px #17203308}
  .commerce-mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);font:inherit;font-size:11px;line-height:1.4;cursor:pointer;touch-action:manipulation}
  .commerce-mobile-nav button svg{width:21px;height:21px;stroke-width:1.7}
  .commerce-mobile-nav button.is-active{color:var(--accent);background:var(--accent-tint);font-weight:650}
  .commerce #app[data-view="loading"] .commerce-mobile-nav,.commerce #app[data-checkout="true"] .commerce-mobile-nav{display:none}
  .commerce .toast-stack{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .commerce #app[data-checkout="true"] .toast-stack{bottom:24px}
}
@media(max-width:360px){
  .commerce-hero h1{font-size:32px;letter-spacing:-1px}
  .commerce-hero-copy>.eyebrow{font-size:10px;letter-spacing:1px}
}