:root {
  --ink: #14110f;
  --text: #5e4f49;
  --muted: #8a766e;
  --paper: #fbf7f2;
  --cream: #fffaf5;
  --line: #ead7cb;
  --brand-a: #ff9a3c;
  --brand-b: #ff4757;
  --brand: linear-gradient(135deg, var(--brand-a), var(--brand-b));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}
.mobile-label { display: none; }

.shop-section { padding: 110px 0; background: #fff; }
.shop-inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.shop-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.shop-heading h2 { max-width: 720px; margin: 14px 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; }
.shop-heading p { max-width: 680px; color: var(--text); line-height: 1.8; }
.shop-promise { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-promise span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-weight: 700; font-size: 13px; }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.product-card { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--cream); box-shadow: 0 20px 60px rgba(61, 36, 24, .08); }
.product-visual { position: relative; min-height: 280px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff 0, #f7e7dc 70%); }
.product-visual > b { position: absolute; top: 20px; left: 20px; padding: 7px 11px; border-radius: 999px; background: #171210; color: #fff; font-size: 12px; }
.product-visual img { width: 100%; height: 280px; object-fit: cover; }
.device-art { display: grid; place-items: center; align-content: center; color: #241a16; box-shadow: 0 28px 50px rgba(51, 31, 21, .18); }
.device-art.scale { width: 210px; height: 210px; border-radius: 42px; border: 10px solid #ece5df; background: linear-gradient(145deg,#fff,#e5ddd8); }
.device-art.tape { width: 180px; height: 180px; border-radius: 50%; border: 10px solid #ff8a45; background: #fff; }
.device-art span { font-size: 34px; font-weight: 900; }.device-art small { color: #9a8175; font-weight: 800; }
.product-body { padding: 28px; }.product-body > small { color: #a68d82; font-weight: 800; }.product-body h3 { margin: 8px 0; font-size: 27px; }.product-body > p { color: var(--text); line-height: 1.65; }
.product-subtitle { color: #ff6535 !important; font-weight: 800; }
.product-meta { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 24px 0 18px; }
.product-meta strong { color: #e94b26; font-size: 29px; }.product-meta del { margin-left: 8px; color: #aaa; }.product-meta span { color: #6f5b51; font-size: 13px; }
.buy-button,.order-query button,.checkout-actions button,.shop-error button { border: 0; border-radius: 12px; padding: 14px 20px; background: var(--brand); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; }
.nav-account { border: 1px solid rgba(255,255,255,.62); border-radius: 999px; padding: 11px 16px; background: rgba(255,255,255,.9); color: var(--ink); box-shadow: 0 10px 30px rgba(20,17,15,.08); font: inherit; font-weight: 800; cursor: pointer; }
.product-details { margin: 0 0 18px; border-top: 1px solid var(--line); padding-top: 14px; }.product-details summary { color: #ff6535; font-weight: 800; cursor: pointer; }.product-details > p { white-space: pre-line; line-height: 1.75; color: var(--text); }
.product-media { display: grid; gap: 10px; margin-top: 12px; }.product-media img,.product-media video { width: 100%; max-height: 420px; object-fit: contain; border-radius: 12px; background: #f3ebe6; }
.buy-button { width: 100%; }.buy-button:disabled { filter: grayscale(1); opacity: .55; cursor: not-allowed; }
.shop-loading,.shop-error { grid-column: 1/-1; padding: 60px; text-align: center; color: var(--muted); }
.order-query { margin-top: 30px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: #fffaf7; display: grid; gap: 16px; }
.order-query > div:first-child { display: flex; gap: 12px; align-items: baseline; }.order-query > div:first-child span { color: var(--muted); }
.order-query form { display: flex; gap: 10px; }.order-query input,.checkout-grid input,.checkout-grid textarea { width: 100%; border: 1px solid #dbc9be; border-radius: 10px; padding: 12px; font: inherit; background: #fff; }
.query-card { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 16px; border-radius: 12px; background: #fff; }.query-card strong { color: #ff6535; }
.checkout-dialog { width: min(680px, calc(100% - 28px)); border: 0; border-radius: 24px; padding: 0; box-shadow: 0 40px 100px rgba(20,17,15,.3); }
.account-dialog { width: min(860px, calc(100% - 28px)); max-height: 88vh; border: 0; border-radius: 24px; padding: 0; box-shadow: 0 40px 100px rgba(20,17,15,.3); }
.account-dialog::backdrop,.address-dialog::backdrop { background: rgba(20,17,15,.55); backdrop-filter: blur(4px); }
.account-shell { position: relative; padding: 34px; min-height: 400px; }.account-kicker { color: #ff6535; font-weight: 800; }.account-shell h2 { margin: 7px 0; }.account-shell > section > p { color: var(--muted); }
#web-login-form { display: grid; gap: 16px; max-width: 430px; margin-top: 25px; }#web-login-form label { display: grid; gap: 7px; font-weight: 700; }#web-login-form input,.aftersale-form select,.aftersale-form textarea { width: 100%; border: 1px solid #dbc9be; border-radius: 10px; padding: 12px; font: inherit; }
.code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.code-row button,.account-head button,.address-list button,.order-actions button { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background: #fff; cursor: pointer; }
.account-primary { border: 0; border-radius: 12px; padding: 13px 18px; background: var(--brand); color: #fff; font-weight: 800; cursor: pointer; }
.account-head { display: flex; justify-content: space-between; align-items: start; }.account-tabs { display: flex; gap: 8px; margin: 24px 0 18px; border-bottom: 1px solid var(--line); }.account-tabs button { border: 0; padding: 12px 16px; background: transparent; font-weight: 800; cursor: pointer; }.account-tabs button.active { color: #ff6535; border-bottom: 3px solid #ff6535; }
#account-content { min-height: 220px; }.account-empty { padding: 50px 20px; text-align: center; color: var(--muted); }.account-order,.address-list article { display: grid; grid-template-columns: 1fr auto; gap: 9px 18px; margin-bottom: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }.account-order div:first-child { display: grid; gap: 5px; }.account-order small,.account-order span { color: var(--muted); }.account-order > div:nth-child(2) { display: grid; justify-items: end; gap: 5px; }.account-order em { color: #ff6535; font-style: normal; font-weight: 800; }.account-order > p,.order-actions,.inline-action { grid-column: 1/-1; }.order-actions { display: flex; gap: 8px; }
.address-list { margin-top: 15px; }.address-list article { display: block; }.address-list b { margin-left: 10px; color: #ff6535; }.address-list p { color: var(--text); }.address-list button { margin-right: 7px; }
.aftersale-form { display: grid; gap: 9px; padding: 12px 0; }.aftersale-form button { justify-self: start; }
.address-dialog { width: min(640px, calc(100% - 28px)); border: 0; border-radius: 22px; padding: 0; }.address-dialog form { position: relative; padding: 30px; }.check-label { display: flex !important; grid-template-columns: auto 1fr; justify-content: start; }.check-label input { width: auto !important; }
.checkout-dialog::backdrop { background: rgba(20,17,15,.55); backdrop-filter: blur(4px); }.checkout-dialog form { padding: 32px; position: relative; }
.dialog-close { position: absolute; right: 18px; top: 14px; border: 0; background: transparent; font-size: 28px; cursor: pointer; }
.checkout-title span { color: #ff6535; font-weight: 800; }.checkout-title h2 { margin: 6px 0; }.checkout-title p { color: var(--muted); }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }.checkout-grid label { display: grid; gap: 7px; color: var(--text); font-weight: 700; }.checkout-grid .wide { grid-column: 1/-1; }
.checkout-actions { display: flex; justify-content: space-between; align-items: center; }.checkout-actions span { color: #e94b26; font-size: 22px; font-weight: 900; }
.order-success { display: grid; gap: 6px; margin-top: 20px; padding: 18px; border-radius: 14px; background: #eefaf1; color: #256a38; }
.online-payment { display: grid; gap: 12px; margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.online-payment > div { display: flex; gap: 10px; flex-wrap: wrap; }.online-payment small { color: var(--muted); }
.pay-channel { flex: 1; min-width: 150px; border: 1px solid #d7c3b7; border-radius: 12px; padding: 13px; background: #fff; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.pay-channel:not(:disabled):hover { border-color: #ff6535; color: #ff6535; }.pay-channel:disabled { opacity: .5; cursor: not-allowed; }
.payment-qr { display: grid !important; place-items: center; gap: 7px !important; padding-top: 12px; }.payment-qr img { width: 220px; height: 220px; border-radius: 12px; }.payment-qr span { color: var(--muted); font-size: 13px; }
@media (max-width: 720px) { .shop-heading { display: block; }.shop-promise { margin-top: 20px; }.product-grid { grid-template-columns: 1fr; }.order-query form { flex-direction: column; }.checkout-grid { grid-template-columns: 1fr; }.checkout-grid .wide { grid-column: auto; } }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
}

.nav {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand,
.nav-link {
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 30px rgba(20, 17, 15, 0.08);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 999px;
}

.brand img,
.footer-brand img {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.brand span,
.footer-brand span {
  display: grid;
  gap: 2px;
}

.brand strong,
.footer-brand strong {
  font-size: 14px;
}

.brand small,
.footer-brand small {
  font-size: 12px;
  color: #7d6d66;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-link,
.nav-download,
.primary-cta {
  border-radius: 999px;
  font-weight: 700;
}

.nav-link {
  padding: 10px 16px;
  color: #3b2c26;
}
.nav-support { font: inherit; cursor: pointer; }

.nav-download {
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 16px 38px rgba(20, 17, 15, 0.18);
}

.hero {
  position: relative;
  overflow: hidden;
  background: #f8efe7;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(251, 247, 242, 0.2), rgba(248, 239, 231, 0.86) 48%, var(--paper)),
    url("./assets/splash.png") center / cover;
  opacity: 0.98;
}

.hero-inner {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 112px 0 64px;
  display: flex;
  flex-direction: column;
}

.hero-copy {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow,
.section-badge,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.eyebrow,
.section-badge {
  border: 1px solid #ffd8c9;
  background: rgba(255, 255, 255, 0.88);
  color: #ff6b35;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 800;
}

.badge {
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.84);
  color: #6d5d57;
  padding: 10px 18px;
  font-size: 14px;
  box-shadow: 0 12px 30px rgba(20, 17, 15, 0.06);
}

.hero h1 {
  margin: 28px 0 0;
  font-size: clamp(56px, 7vw, 92px);
  line-height: 1.05;
  font-weight: 800;
}

.vision {
  margin: 16px 0 0;
  color: #2f2420;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.32;
  font-weight: 800;
}

.tags {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.tags span {
  border: 1px solid #f3d8c9;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  color: #5e4f49;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
}

.primary-cta {
  margin-top: 34px;
  display: inline-flex;
  padding: 14px 28px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 20px 50px rgba(255, 107, 53, 0.28);
}

.phone-grid {
  margin-top: auto;
  padding-top: 56px;
  display: grid;
  grid-template-columns: 1.2fr 0.68fr 0.68fr;
  align-items: end;
  gap: 22px;
}

.phone {
  position: relative;
  margin: 0;
  aspect-ratio: 430 / 932;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background: #120f12;
  box-shadow: 0 28px 90px rgba(20, 17, 15, 0.25);
}

.phone::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 50%;
  width: 80px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.phone-large {
  transform: translateY(24px);
}

.intro,
.story,
.download {
  padding: 96px 0;
}

.intro-inner,
.story-inner,
.download-inner,
.feature-strip-inner,
.footer-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.intro-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.intro h2,
.story h2,
.download h2 {
  margin: 18px 0 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.22;
}

.intro p,
.story-copy > p,
.download p {
  margin: 18px 0 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.8;
}

.intro-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.intro-cards article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(20, 17, 15, 0.05);
  padding: 22px;
}

.intro-cards span {
  display: block;
  font-size: 18px;
  font-weight: 800;
}

.intro-cards p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
}

.feature-strip {
  border-block: 1px solid #f0e0d4;
  background: var(--cream);
  padding: 72px 0;
}

.feature-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.feature-strip article {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.feature-strip strong {
  display: block;
  font-size: 20px;
}

.feature-strip p {
  color: var(--text);
  line-height: 1.8;
  font-size: 14px;
}

.story {
  background: var(--paper);
}

.story-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 58px;
}

.story-list {
  display: grid;
  gap: 28px;
  margin-top: 44px;
}

.story-list article {
  border-bottom: 1px solid #eee0d7;
  padding-bottom: 28px;
}

.story-list h3 {
  margin: 0;
  font-size: 24px;
}

.story-list p {
  color: var(--text);
  font-size: 16px;
  line-height: 1.9;
}

.story-phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.story-phones .offset {
  margin-top: 64px;
}

.download {
  background: var(--cream);
  text-align: center;
}

.download-inner {
  max-width: 760px;
}

.download-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(255, 107, 53, 0.18);
}

.download-buttons {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.download-buttons a {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  padding: 18px 22px;
  text-align: left;
}

.download-buttons small,
.download-note {
  color: var(--muted);
}

.download-buttons strong {
  display: block;
  margin-top: 5px;
  font-size: 20px;
}

.download-ios {
  background: var(--ink);
  color: #fff;
}

.download-ios small {
  color: rgba(255, 255, 255, 0.62);
}

.download-android {
  border: 1px solid #e8cfc1;
  background: #fff;
}

.download-android b {
  color: #ff6b35;
}

.download-note {
  display: block;
  margin: 22px auto 0;
  max-width: 540px;
  font-size: 14px;
  line-height: 1.7;
}

.footer {
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: #fff;
}

.footer-inner {
  padding: 48px 0;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 48px;
}

.footer-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-brand img {
  width: 44px;
  height: 44px;
}

.footer-brand small {
  color: rgba(255, 255, 255, 0.58);
}

.footer p,
.footer a,
.footer span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 14px;
  line-height: 1.8;
}

.footer h3 {
  margin: 0 0 14px;
  font-size: 14px;
}

.footer a,
.footer span {
  display: block;
  margin-top: 10px;
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 20px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  font-size: 12px;
}

@media (max-width: 900px) {
  .nav-link:not(.nav-shop-link):not(.nav-support),
  .hide-mobile {
    display: none;
  }

  .hero-inner {
    width: min(100% - 40px, 520px);
    padding-top: 104px;
  }

  .phone-grid {
    grid-template-columns: 1fr;
  }

  .phone-large {
    transform: none;
  }

  .intro-inner,
  .story-inner,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .feature-strip-inner,
  .intro-cards,
  .download-buttons {
    grid-template-columns: 1fr;
  }

  .story-phones {
    grid-template-columns: 1fr;
  }

  .story-phones .offset {
    margin-top: 0;
  }

  .hide-tablet {
    display: none;
  }
}

@media (max-width: 520px) {
  .nav {
    width: calc(100% - 32px);
    flex-wrap: wrap;
    gap: 8px;
  }

  .nav-actions {
    width: 100%;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-actions > * {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 12px;
  }

  .brand small {
    display: block;
  }

  .nav-download {
    padding-inline: 14px;
  }

  .hero h1 {
    font-size: 56px;
  }

  .hero-inner {
    padding-top: 164px;
  }

  .account-shell,
  .checkout-dialog form,
  .address-dialog form {
    padding: 24px 18px;
  }

  .account-order {
    grid-template-columns: 1fr;
  }

  .account-order > div:nth-child(2) {
    justify-items: start;
  }

  .vision {
    font-size: 28px;
  }

  .badge {
    max-width: 100%;
    font-size: 13px;
  }

  .intro,
  .story,
  .download {
    padding: 76px 0;
  }
}

.legal-page {
  background: linear-gradient(180deg, #fbf7f2 0%, #fffaf5 100%);
}

.legal-header .nav-link {
  display: inline-flex;
}

/* Store account and checkout — calm, product-first, Apple-inspired surfaces. */
#auth-panel[hidden],
#account-panel[hidden] {
  display: none !important;
}
.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 24px rgba(20, 17, 15, .1);
  backdrop-filter: blur(20px) saturate(150%);
  font-weight: 650;
}
.nav-account i { color: #8a7f79; font-size: 12px; font-style: normal; font-weight: 500; }
.account-icon { display: none; }
.account-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.account-avatar { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #171717; color: #fff; font-size: 12px; }
.account-dialog { width: min(980px, calc(100% - 28px)); max-height: 92vh; border-radius: 30px; background: #f5f5f7; box-shadow: 0 40px 120px rgba(0, 0, 0, .34); }
.account-dialog::backdrop,.checkout-dialog::backdrop,.address-dialog::backdrop { background: rgba(0, 0, 0, .42); backdrop-filter: blur(12px); }
.account-shell { min-height: 530px; padding: 0; }
.account-shell > #account-panel { padding: 42px; }
.auth-layout { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 560px; }
.auth-brand-panel { display: flex; flex-direction: column; justify-content: center; padding: 56px; border-radius: 30px 0 0 30px; background: linear-gradient(145deg, #1d1d1f, #353538); color: #fff; }
.auth-brand-panel img { width: 54px; height: 54px; margin-bottom: 22px; border-radius: 16px; }
.auth-brand-panel > span { color: rgba(255,255,255,.64); font-size: 13px; font-weight: 650; letter-spacing: .12em; }
.auth-brand-panel h2 { margin: 20px 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.12; letter-spacing: -.04em; }
.auth-brand-panel p { max-width: 330px; color: rgba(255,255,255,.65); line-height: 1.7; }
.auth-form-panel { display: flex; flex-direction: column; justify-content: center; padding: 54px 64px; background: #fff; border-radius: 0 30px 30px 0; }
.auth-form-panel h2 { margin: 8px 0; font-size: 34px; letter-spacing: -.03em; }
.auth-form-panel > p { margin: 0; color: #86868b; }
#web-login-form { max-width: none; margin-top: 28px; }
#web-login-form label { color: #515154; font-size: 13px; }
#web-login-form input,.checkout-grid input,.checkout-grid textarea { min-height: 48px; border: 1px solid #d2d2d7; border-radius: 12px; background: #fff; transition: border .2s, box-shadow .2s; }
#web-login-form input:focus,.checkout-grid input:focus,.checkout-grid textarea:focus { outline: 0; border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,.12); }
.code-row button { border-color: #d2d2d7; border-radius: 12px; color: #0066cc; font-weight: 650; }
.agreement-check { display: flex !important; flex-direction: row; align-items: flex-start; gap: 9px; color: #6e6e73 !important; font-size: 12px !important; line-height: 1.6; }
.agreement-check input { flex: 0 0 auto; width: 16px !important; min-height: 16px !important; margin-top: 2px; }
.agreement-check a { color: #0066cc; }
.account-primary,.button-primary { border: 0 !important; border-radius: 999px !important; background: #0071e3 !important; color: #fff !important; font-weight: 650 !important; }
#auth-message { min-height: 22px; margin-top: 14px; color: #d70015; font-size: 13px; }
.dialog-close { z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: rgba(0,0,0,.06); color: #6e6e73; font-size: 22px; }
.auth-layout + * .dialog-close { color: #fff; }
.account-head { align-items: center; }
.account-identity { display: flex; align-items: center; gap: 16px; }
.account-avatar-large { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#1d1d1f,#515154); color: #fff; font-size: 20px; font-weight: 700; }
.account-identity h2 { margin: 3px 0; font-size: 30px; letter-spacing: -.03em; }
.account-name-row { display: flex; align-items: center; gap: 10px; }
.account-name-row button { border: 0; background: transparent; color: #0066cc; font-size: 12px; cursor: pointer; }
.account-identity p { margin: 0; color: #86868b; }
.account-head > button { border: 0; background: transparent; color: #86868b; }
.account-tabs { gap: 4px; overflow-x: auto; margin: 32px 0 24px; padding: 5px; border: 0; border-radius: 14px; background: #e8e8ed; scrollbar-width: none; }
.account-tabs button { flex: 0 0 auto; padding: 9px 14px; border-radius: 10px; color: #515154; font-weight: 600; }
.account-tabs button.active { border: 0; background: #fff; color: #1d1d1f; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
#account-content { min-height: 300px; }
.account-order { display: block; padding: 0; overflow: hidden; border: 1px solid #e5e5ea; border-radius: 18px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.04); }
.order-card-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid #f0f0f2; }
.order-card-head > div { display: flex; gap: 12px; }
.order-card-head small,.order-card-head span { color: #86868b; font-size: 12px; }
.status-pill { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 650; }
.status-pill.orange { background: #fff2e8; color: #b54708; }.status-pill.blue { background: #eaf4ff; color: #0066cc; }
.status-pill.purple { background: #f3edff; color: #6e36c9; }.status-pill.green { background: #eaf8ee; color: #1d732f; }
.status-pill.gray { background: #f2f2f4; color: #6e6e73; }
.order-product-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 22px 20px; }
.order-product-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 15px; background: #f5f5f7; color: #ff5a36; font-weight: 750; }
.order-product-row > div:nth-child(2) { display: grid; gap: 4px; }
.order-product-row span,.order-product-row small { color: #86868b; }
.order-product-row b { font-size: 17px; }
.order-logistics { display: flex; justify-content: space-between; margin: 0 20px 18px; padding: 13px 15px; border-radius: 12px; background: #f5f5f7; font-size: 13px; }
.order-logistics span { color: #86868b; }
.logistics-progress { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 20px 18px; padding: 18px; border-radius: 14px; background: #f5f5f7; }
.logistics-progress > div { position: relative; display: grid; justify-items: center; gap: 6px; color: #a1a1a6; text-align: center; }
.logistics-progress > div:not(:last-child)::after { content: ""; position: absolute; top: 13px; left: 63%; width: 74%; height: 2px; background: #d2d2d7; }
.logistics-progress > div.done:not(:last-child)::after { background: #34c759; }
.logistics-progress i { z-index: 1; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #d2d2d7; color: #fff; font-size: 12px; font-style: normal; }
.logistics-progress .done i { background: #34c759; }.logistics-progress .done span { color: #1d1d1f; font-weight: 650; }
.logistics-progress small { min-height: 16px; font-size: 10px; }
.order-actions { justify-content: flex-end; padding: 0 20px 20px; }
.order-actions button { min-width: 94px; border-radius: 999px; padding: 9px 16px; }
.button-secondary { border: 1px solid #d2d2d7 !important; background: #fff !important; color: #1d1d1f !important; }
.account-empty { display: grid; place-items: center; gap: 10px; padding: 70px 20px; border-radius: 18px; background: #fff; }
.account-empty > div { font-size: 34px; color: #86868b; }.account-empty strong { color: #1d1d1f; font-size: 18px; }
.account-empty button { margin-top: 8px; border: 0; background: transparent; color: #0066cc; font-weight: 650; cursor: pointer; }
.address-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.address-toolbar > div { display: grid; gap: 4px; }.address-toolbar span { color: #86868b; font-size: 13px; }
.address-list article { display: flex; justify-content: space-between; align-items: center; border-color: #e5e5ea; border-radius: 16px; background: #fff; }
.address-list article strong span { color: #86868b; font-weight: 500; }.address-list article b { padding: 4px 7px; border-radius: 6px; background: #fff2e8; font-size: 11px; }
.checkout-dialog { width: min(720px, calc(100% - 28px)); max-height: 92vh; border-radius: 28px; background: #fff; }
.checkout-dialog form { padding: 38px; }
.checkout-title span { color: #0066cc; font-size: 13px; }.checkout-title h2 { font-size: 30px; letter-spacing: -.03em; }
.checkout-product-summary { display: flex; justify-content: space-between; margin-top: 22px; padding: 17px 18px; border-radius: 15px; background: #f5f5f7; }
.checkout-product-summary span { color: #86868b; }
.checkout-actions { padding-top: 18px; border-top: 1px solid #e5e5ea; }
.checkout-actions > div { display: grid; gap: 2px; }.checkout-actions small { color: #86868b; }.checkout-actions span { color: #1d1d1f; font-size: 26px; }
.checkout-actions button { border-radius: 999px; background: #0071e3; font-weight: 650; }
.order-success { grid-template-columns: auto 1fr auto; align-items: center; background: #eef8f1; }.order-success > span { font-size: 22px; }.order-success > div { display: grid; }
.support-dialog,.aftersale-dialog { width: min(520px, calc(100% - 28px)); border: 0; border-radius: 28px; padding: 0; background: #fff; box-shadow: 0 40px 120px rgba(0,0,0,.3); }
.support-dialog::backdrop,.aftersale-dialog::backdrop { background: rgba(0,0,0,.42); backdrop-filter: blur(12px); }
.support-card,.aftersale-dialog form { position: relative; display: grid; gap: 14px; padding: 42px; text-align: center; }
.support-card h2,.aftersale-dialog h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.support-card p,.aftersale-dialog p { margin: 0; color: #86868b; line-height: 1.65; }
.support-qr { display: grid; width: 260px; min-height: 260px; place-items: center; margin: 8px auto; padding: 14px; border-radius: 20px; background: #f5f5f7; color: #86868b; }
.support-qr img { width: 100%; border-radius: 12px; }
.support-card > small { color: #86868b; }
.aftersale-dialog form { text-align: left; }
.aftersale-dialog label { display: grid; gap: 7px; color: #515154; font-size: 13px; font-weight: 650; }
.aftersale-dialog select,.aftersale-dialog textarea,.aftersale-dialog input[type=file] { width: 100%; border: 1px solid #d2d2d7; border-radius: 12px; padding: 12px; background: #fff; font: inherit; }
#aftersale-message { min-height: 20px; color: #0066cc; font-size: 13px; }
.aftersale-body { display: grid; gap: 8px; padding: 20px; }.aftersale-body > span,.aftersale-body > small { color: #86868b; }
.aftersale-body p { margin: 0; line-height: 1.6; }.aftersale-body > div { padding: 14px; border-radius: 12px; background: #f5f5f7; }
.aftersale-shipment { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(180px,1fr) auto; gap: 10px; padding: 14px 18px; margin: 0 18px 14px; border-radius: 14px; background: #fff8f3; }
.aftersale-shipment select,.aftersale-shipment input { min-width: 0; padding: 10px 12px; border: 1px solid #eadfd8; border-radius: 10px; background: #fff; font: inherit; }
.aftersale-detail { margin: 0 18px 14px; padding: 14px 16px; border: 1px solid #f0e2da; border-radius: 16px; background: #fffdfa; }
.aftersale-detail summary { cursor: pointer; font-weight: 750; color: #2b211d; }
.aftersale-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.aftersale-detail section,.aftersale-timeline,.aftersale-notes { padding: 12px; border-radius: 14px; background: #f7f7f8; }
.aftersale-detail h4 { margin: 0 0 8px; font-size: 14px; }
.aftersale-detail p { margin: 4px 0; color: #555; line-height: 1.55; }
.aftersale-timeline,.aftersale-notes { margin-top: 12px; }
.aftersale-timeline ol,.aftersale-notes ol { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.aftersale-timeline li,.aftersale-notes li { display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid #ff6b4a; }
.aftersale-timeline span,.aftersale-notes span { color: #86868b; font-size: 12px; }
.nickname-dialog { width: min(440px, calc(100% - 28px)); border: 0; border-radius: 26px; padding: 0; background: #fff; box-shadow: 0 40px 120px rgba(0,0,0,.3); }
.nickname-dialog::backdrop { background: rgba(0,0,0,.42); backdrop-filter: blur(12px); }
.nickname-dialog form { position: relative; display: grid; gap: 14px; padding: 40px; }
.nickname-dialog h2 { margin: 0; font-size: 28px; }.nickname-dialog p { margin: 0; color: #86868b; }
.nickname-dialog label { display: grid; gap: 7px; color: #515154; font-size: 13px; font-weight: 650; }
.nickname-dialog input { min-height: 48px; border: 1px solid #d2d2d7; border-radius: 12px; padding: 12px; font: inherit; }
#nickname-message { min-height: 20px; color: #0066cc; font-size: 13px; }
.logistics-detail { margin-top: 0; padding: 20px; border-top: 1px solid #f0f0f2; background: #fafafa; }
.logistics-detail.loading,.logistics-detail > p { color: #86868b; text-align: center; }
.logistics-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.logistics-detail-head > div { display: grid; gap: 3px; }.logistics-detail-head span,.logistics-detail-head small { color: #86868b; font-size: 12px; }
.logistics-detail ol { margin: 0; padding: 0; list-style: none; }
.logistics-detail li { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding-bottom: 18px; color: #6e6e73; }
.logistics-detail li:not(:last-child)::before { content: ""; position: absolute; top: 12px; bottom: 0; left: 5px; width: 1px; background: #d2d2d7; }
.logistics-detail li i { z-index: 1; width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: #c7c7cc; }
.logistics-detail li.latest i { background: #34c759; box-shadow: 0 0 0 4px rgba(52,199,89,.14); }
.logistics-detail li > div { display: grid; gap: 5px; }.logistics-detail li strong { font-size: 13px; font-weight: 600; line-height: 1.55; }
.logistics-detail li span { color: #a1a1a6; font-size: 11px; }

@media (max-width: 760px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .auth-form-panel { min-height: 560px; padding: 42px 26px; border-radius: 28px; }
  .account-shell > #account-panel { padding: 34px 18px; }
  .account-tabs { margin-inline: -4px; }
  .order-card-head > div { display: grid; gap: 3px; }
  .order-product-row { grid-template-columns: auto 1fr; }
  .order-product-row > b { grid-column: 2; }
  .address-list article { align-items: flex-start; gap: 18px; }
  .checkout-dialog form { padding: 34px 20px; }
  .checkout-actions { align-items: flex-end; gap: 18px; }
  .logistics-progress small { display: none; }
  .support-card,.aftersale-dialog form { padding: 36px 22px; }
  .aftersale-shipment { grid-template-columns: 1fr; }
  .aftersale-detail-grid { grid-template-columns: 1fr; }
  .support-qr { width: min(260px, 100%); min-height: 220px; }
}

@media (max-width: 520px) {
  .site-header { background: rgba(251,247,242,.88); backdrop-filter: blur(18px) saturate(150%); }
  .nav { width: calc(100% - 24px); min-height: 64px; padding: 9px 0; flex-wrap: nowrap; gap: 8px; }
  .brand { flex: 0 0 auto; padding: 5px; border: 0; background: transparent; box-shadow: none; }
  .brand img { width: 38px; height: 38px; }
  .brand span { display: none; }
  .nav-actions { width: auto; min-width: 0; margin-left: auto; justify-content: flex-end; overflow: visible; gap: 6px; }
  .nav-actions .nav-link { display: inline-flex !important; padding: 8px 10px; border-color: #e8ddd5; background: #fff; font-size: 12px; font-weight: 400; }
  .nav-actions .nav-download { display: inline-flex; padding: 8px 10px; background: #1d1d1f; font-size: 12px; font-weight: 400; }
  .desktop-label { display: none; }
  .mobile-label { display: inline; }
  .nav-account { min-width: 38px; min-height: 38px; justify-content: center; padding: 5px; overflow: hidden; font-weight: 400; }
  .nav-account .account-icon { display: inline-flex; }
  .nav-account .account-label { display: none; }
  .nav-account i { display: none; }
  .hero-inner { padding-top: 88px; }
  .nickname-dialog form { padding: 36px 22px; }
}

.legal-shell {
  padding: 120px 0 96px;
}

.legal-hero,
.legal-layout {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.legal-hero {
  display: grid;
  gap: 28px;
}

.legal-hero-copy {
  max-width: 760px;
}

.legal-hero h1,
.legal-card h2 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.18;
}

.legal-hero p,
.legal-card p,
.legal-card li {
  color: var(--text);
  font-size: 16px;
  line-height: 1.9;
}

.legal-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.legal-entry-card,
.legal-card,
.legal-aside-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(20, 17, 15, 0.06);
}

.legal-entry-card {
  display: grid;
  gap: 8px;
  padding: 22px;
}

.legal-entry-card strong,
.legal-contact-grid strong {
  font-size: 18px;
}

.legal-entry-card span,
.legal-meta,
.legal-contact-grid span {
  color: var(--muted);
  font-size: 14px;
}

.legal-layout {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.legal-aside {
  position: sticky;
  top: 110px;
}

.legal-aside-card {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.legal-aside-card span {
  color: #ff6b35;
  font-size: 13px;
  font-weight: 800;
}

.legal-aside-card a {
  color: #3b2c26;
  font-size: 15px;
  font-weight: 700;
}

.legal-main {
  display: grid;
  gap: 20px;
}

.legal-card {
  padding: 32px;
}

.legal-meta {
  margin: 10px 0 0;
}

.legal-meta span {
  margin-left: 14px;
}

.legal-highlight {
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 4px solid #ff6b35;
  background: #fff5ee;
  color: #5f453c;
  font-size: 15px;
  line-height: 1.85;
}

.legal-section {
  margin-top: 30px;
}

.legal-section h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.35;
}

.legal-section ol {
  margin: 0;
  padding-left: 22px;
}

.legal-section li + li,
.legal-section p + p {
  margin-top: 10px;
}

.legal-contact-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.legal-contact-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fffaf7;
}

.legal-contact-grid span {
  display: block;
  margin-bottom: 8px;
}

.legal-footer {
  margin-top: 0;
}

@media (max-width: 900px) {
  .legal-entry-grid,
  .legal-contact-grid,
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-aside {
    position: static;
  }
}

@media (max-width: 520px) {
  .legal-shell {
    padding: 104px 0 72px;
  }

  .legal-hero,
  .legal-layout {
    width: calc(100% - 32px);
  }

  .legal-card {
    padding: 24px 18px;
  }

  .legal-section h3 {
    font-size: 20px;
  }
}