/* Additions to the original 4K edition; inner-page structure and colors stay original. */
:root { --ui-body:16px; --ui-lead:17px; --ui-nav:16px; --ui-control:15px; --ui-category:15px; --ui-note:14px; --ui-input:16px; --ui-brand:32px; }
body,body.landing-mode { font-family:"Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif; font-size:var(--ui-body); isolation:isolate; }
html[lang=en] body,html[lang=en] body.landing-mode { font-family:Arial,Helvetica,"Microsoft YaHei","微软雅黑",sans-serif; }
button,input { font-family:inherit; }
body { transition:background-color .16s ease,color .14s ease; }
body.interior-mode { background:var(--bg); }
/* No black-hole image, video, or frozen frame is visible on inner routes. */
.landing-video-backdrop { opacity:0; visibility:hidden; transition:opacity .26s ease,visibility 0s .26s; }
.landing-mode .landing-video-backdrop { opacity:1; visibility:visible; transition:opacity .26s ease,visibility 0s; }
.header,.footer { transition:background-color .16s ease,border-color .16s ease; }

/* A static pearl backdrop provides actual color and detail for the glass to diffuse. */
.interior-mode::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 48% 68% at 5% 58%,#b4cdeac4,transparent 78%),
    radial-gradient(ellipse 48% 58% at 94% 35%,#d1bee5bf,transparent 78%),
    radial-gradient(ellipse 52% 55% at 71% 108%,#a8d2c6ad,transparent 78%),
    linear-gradient(126deg,#f6f7fb 19%,#d7e3ef 48%,#f3f0f8 71%,#eef5f4);
}
.interior-mode {
  --glass-fill:#ffffff61; --glass-edge:#fffffff2; --glass-line:#ffffffad;
  --glass-shadow:#344b7020; --glass-soft:#ffffff24;
  --glass-glint:#ffffff78; --glass-shade:#ffffff10; --glass-bottom:#8b9fb126;
  /* CSS-only grain keeps the frosted texture cheap to composite in Edge. */
  --glass-grain:repeating-linear-gradient(135deg,#ffffff00 0 3px,#ffffff0a 3px 4px);
}
html[data-theme=dark] .interior-mode {
  --glass-fill:#171d2b70; --glass-edge:#e8f1ff63; --glass-line:#e1ecff30;
  --glass-shadow:#00000029; --glass-soft:#b7d2f20c;
  --glass-glint:#d1e2ff19; --glass-shade:#07122515; --glass-bottom:#00000036;
}
html[data-theme=dark] .interior-mode::before {
  background:radial-gradient(ellipse 48% 68% at 5% 58%,#344962b3,transparent 78%),radial-gradient(ellipse 48% 58% at 94% 35%,#493a5ea6,transparent 78%),radial-gradient(ellipse 52% 55% at 71% 108%,#234e46a6,transparent 78%),#121722;
}
.interior-mode :is(.product-card,.compact-card,.empty-orders,.detail-workspace,.order-guide) {
  background-image:var(--glass-grain),linear-gradient(135deg,var(--glass-glint),var(--glass-shade) 52%,#ffffff05);
  background-color:var(--glass-fill);
  border:1px solid var(--glass-line); border-top-color:var(--glass-edge);
  border-bottom-color:var(--glass-bottom);
  box-shadow:inset 0 1px 0 var(--glass-edge),inset 1px 0 0 #ffffff26,inset 0 -1px 0 #ffffff33,0 12px 36px var(--glass-shadow);
  /* Keep the diffuse glass visible without forcing Edge to blur three large cards. */
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.interior-mode .header {
  background:linear-gradient(115deg,var(--glass-glint),#ffffff08),var(--glass-fill);
  border-bottom-color:var(--glass-line); box-shadow:0 4px 24px var(--glass-shadow),inset 0 -1px 0 var(--glass-edge);
  backdrop-filter:blur(4px) saturate(112%); -webkit-backdrop-filter:blur(4px) saturate(112%);
}
.interior-mode .search input,.interior-mode .plan,.interior-mode .categories button:not([aria-pressed=true]) {
  background:linear-gradient(135deg,var(--glass-glint),#ffffff03),var(--glass-soft);
  border:1px solid var(--glass-line); border-bottom-color:var(--glass-bottom);
  box-shadow:inset 0 1px 0 var(--glass-edge),0 4px 16px var(--glass-shadow);
  backdrop-filter:blur(2px) saturate(108%); -webkit-backdrop-filter:blur(2px) saturate(108%);
}
.interior-mode .categories { gap:8px; }
.interior-mode .categories button[aria-pressed=true] { box-shadow:inset 0 1px 0 #ffffff35,0 4px 14px #14233c20; }
.interior-mode .plan.selected { background:linear-gradient(135deg,var(--glass-glint),transparent),var(--tint); border-color:var(--blue); }
.interior-mode .summary { background:var(--glass-soft); }
.interior-mode .faq details {
  padding-inline:18px; border:1px solid var(--glass-line); border-top-color:var(--glass-edge); border-bottom-color:var(--glass-bottom); border-radius:14px; margin-bottom:12px;
  background:var(--glass-grain),linear-gradient(135deg,var(--glass-glint),transparent),var(--glass-fill);
  box-shadow:inset 0 1px 0 var(--glass-edge),0 8px 24px var(--glass-shadow);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.interior-mode dialog {
  background:linear-gradient(135deg,#ffffffe6,#ffffff94); border-color:var(--glass-line); border-top-color:var(--glass-edge);
  box-shadow:inset 0 1px 0 #fff,0 24px 80px #20354b33;
  backdrop-filter:blur(6px) saturate(112%); -webkit-backdrop-filter:blur(6px) saturate(112%);
}
html[data-theme=dark] .interior-mode dialog { background:linear-gradient(135deg,#283448df,#142031c4); box-shadow:inset 0 1px 0 var(--glass-edge),0 24px 80px #0005; }
.interior-mode .action { background-image:linear-gradient(145deg,#ffffff29,#ffffff00 60%); box-shadow:inset 0 1px 0 #ffffff58,0 4px 14px var(--glass-shadow); }
.interior-mode .action.soft { background:linear-gradient(135deg,var(--glass-glint),#ffffff0d),var(--glass-soft); border:1px solid var(--glass-line); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.interior-mode .footer { background:var(--glass-soft); border-top-color:var(--glass-line); }
.landing-mode dialog { background:#111a2bea; color:#f4f6ff; border-color:#e0e9ff40; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.landing-mode dialog p,.landing-mode .dialog-kicker { color:#c4cfdf; }
dialog::backdrop { backdrop-filter:none; background:#060b1659; }
dialog[open] { animation:glass-dialog-in .18s ease-out; }
@keyframes glass-dialog-in { from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none} }
.faq details[open] p { animation:glass-copy-in .17s ease-out; }
@keyframes glass-copy-in { from{opacity:0}to{opacity:1} }

/* Match type by role across the entrance and all inner pages. */
.landing-brand,body:not(.landing-mode) .header .brand { font-family:Arial,Helvetica,sans-serif; font-size:var(--ui-brand); font-weight:750; letter-spacing:-1.8px; }
.landing-nav-links>a,.nav a { font-size:var(--ui-nav); }
.landing-language,.lang-button { font-size:var(--ui-note); }
.landing-contact,.support,.landing-pill,.landing-text-link,.action,.order-guide a { font-size:var(--ui-control); }
.landing-categories button,.categories button,html[lang=en] .categories button { font-size:var(--ui-category); }
.landing-hero-aside>p,.intro>p,.page-title p,.detail-title p { font-size:var(--ui-lead); line-height:1.85; }
.landing-search-field input,.landing-search-field input::placeholder,.search input { font-size:var(--ui-input); }
.landing-search-form>label,.landing-eyebrow,.landing-panel-kicker,.landing-panel-status,.landing-video-toggle,.eyebrow,.service-line,.section-heading>span,.specs,.price small,.price-note,.detail-note,.breadcrumb { font-size:var(--ui-note); }
.description,.empty-orders p,.faq-intro p,.faq details p { font-size:var(--ui-body); line-height:1.85; }
.landing-footer-inner,.footer-bottom { font-size:12px; }
:is(.landing-pill,.landing-contact,.landing-categories button,.landing-search-submit,.landing-video-toggle,.action,.categories button,.compact-card,.support,.icon-button,.nav a,.landing-nav-links>a) { transition:background-color .16s,border-color .16s,color .16s,transform .12s; }
:is(.landing-pill,.landing-contact,.landing-categories button,.landing-search-submit,.action,.categories button,.compact-card):active { transform:translateY(1px); }
@media(max-width:1100px) { :root{--ui-brand:29px} }
@media(max-width:680px) { :root{--ui-brand:27px;--ui-nav:15px;--ui-lead:16px;--ui-category:14px} .landing-brand,body:not(.landing-mode) .header .brand{letter-spacing:-1.4px} }
@media(max-width:680px) { .interior-mode .categories{gap:4px} .interior-mode :is(.product-card,.compact-card,.empty-orders,.detail-workspace,.order-guide,.faq details){backdrop-filter:none;-webkit-backdrop-filter:none} }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .interior-mode{--glass-fill:#ffffffe6} html[data-theme=dark] .interior-mode{--glass-fill:#182130e8} }
@media(min-width:900px) and (min-height:600px) and (max-height:740px) { :root{--ui-category:14px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
