:root { --ink:#17251f; --muted:#586a61; --green:#087843; --deep:#163a2b; --mint:#eaf5ed; --paper:#fbfcf9; --line:#dfe8e0; --warm:#fff4df; --blue:#edf4fb; }
* { box-sizing:border-box; }
html, body { overflow-x:hidden; }
body { margin:0; background:#eaf0eb; color:var(--ink); font-family:"Microsoft YaHei", "Noto Sans SC", sans-serif; }
a { color:inherit; }
button[data-page-href] { appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer; }
.deck { width:min(1600px, calc(100vw - 40px)); min-height:calc(100vh - 40px); margin:20px auto; background:var(--paper); border:1px solid #d9e4da; border-radius:8px; box-shadow:0 24px 70px rgba(27, 55, 40, .12); }
.eyebrow { display:inline-block; padding:5px 11px; border-radius:6px; background:var(--deep); color:#fff; font-size:20px; line-height:1.3; font-weight:900; }
.index .deck { padding:52px 62px 38px; display:grid; grid-template-rows:auto 1fr auto; gap:34px; }
.index header { position:relative; display:flex; justify-content:space-between; align-items:end; gap:36px; padding-bottom:22px; border-bottom:1px solid #c7ddcc; }
.index h1 { max-width:760px; margin:10px 0 0; font-size:58px; line-height:1.08; letter-spacing:0; }
.index .lead { max-width:470px; margin:0; color:#475b51; font-size:19px; font-weight:700; line-height:1.55; }
.index .cards { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; align-self:center; }
.index .cards.three-cards { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.module-card { min-height:clamp(320px, 42vh, 440px); height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:34px 36px; border:1.5px solid #bfd4c4; border-radius:18px; background:#fff; text-align:left; text-decoration:none; transition:transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, border-color .18s ease; }
.aftersales-index .module-card { border-width:2px; }
.module-card:hover { transform:translateY(-4px); border-color:#76ac85; box-shadow:0 16px 36px rgba(25, 54, 39, .12); }
.module-card:focus-visible { outline:3px solid rgba(8, 120, 67, .34); outline-offset:3px; transform:translateY(-4px); border-color:#9fc8aa; box-shadow:0 16px 36px rgba(25, 54, 39, .12); }
@keyframes module-card-spring { 0% { transform:translateY(0); } 42% { transform:translateY(-8px); } 68% { transform:translateY(-3px); } 100% { transform:translateY(-4px); } }
.module-card-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.module-card small { color:var(--green); font-size:18px; font-weight:900; }
.module-kind { flex:0 0 auto; padding:7px 11px; border-radius:8px; background:#eaf4ed; color:#3f624c; font-size:13px; font-weight:800; line-height:1; white-space:nowrap; }
.module-card-content { margin-top:auto; }
.module-card h2 { margin:0 0 10px; font-size:30px; line-height:1.22; }
.module-card p { margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.module-arrow { align-self:flex-end; margin-top:28px; color:var(--green); font-size:28px; font-weight:900; line-height:1; }
.tip { margin:0; padding:15px 18px; border-radius:8px; background:#f2f8f3; color:#486357; font-size:14px; line-height:1.55; }
.index footer, .case footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:15px; }
.case footer { border-top:0 !important; }
.crosssell-case .case-grid > .panel { min-height:0; overflow:hidden; }
.crosssell-case .case-grid > .panel:nth-child(2) { padding:15px; }
.crosssell-case .case-grid > .panel:nth-child(2) h2 { margin-bottom:8px; font-size:21px; }
.crosssell-case .case-grid > .panel:nth-child(2) .chat { gap:2px; }
.crosssell-case .case-grid > .panel:nth-child(2) .bubble { padding:4px 8px; font-size:12px; line-height:1.22; }
.crosssell-case .case-grid > .panel:nth-child(2) .role { margin-bottom:0; font-size:10px; }
.film-guide .case-grid > .panel:nth-child(2) { display:flex; flex-direction:column; padding:15px; }
.film-guide .case-grid > .panel:nth-child(2) h2 { margin-bottom:9px; font-size:21px; }
.film-grid { min-height:0; flex:1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.film-card { min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fbfdfb; }
.film-card h3 { min-height:20px; margin:0 0 4px; color:var(--deep); font-size:16px; line-height:1.25; }
.film-card p { margin:0; padding:7px 0; color:#405149; font-size:12px; line-height:1.42; }
.film-card p + p { border-top:1px solid #e4eee7; }
.film-card p b { display:inline-block; margin-right:4px; padding:2px 5px; border-radius:4px; background:#eaf4ed; color:var(--green); font-size:11px; line-height:1.2; vertical-align:baseline; }
.film-say { margin-top:8px; padding:8px; border-radius:7px; background:var(--mint); color:#1d5138; font-size:12px; line-height:1.4; }
.index footer { min-height:72px; box-sizing:border-box; }
.nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.index footer .nav { margin-left:auto; }
.nav a, .nav button { min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding:6px 11px; border:1.5px solid #b8d1bf; border-radius:7px; background:#fff; color:var(--green); font-size:14px; font-weight:900; line-height:1.25; text-decoration:none; transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.nav a:hover, .nav button:hover { transform:translateY(-1px); border-color:#76ac85; background:#f2f8f3; box-shadow:0 5px 12px rgba(25, 54, 39, .08); }
.nav a:focus-visible, .nav button:focus-visible { outline:3px solid rgba(8, 120, 67, .28); outline-offset:2px; border-color:#76ac85; background:#f2f8f3; }
.case .deck { padding:30px 50px 22px; display:grid; grid-template-rows:auto minmax(0, 1fr) auto; gap:14px; }
.case header { display:flex; justify-content:space-between; align-items:end; gap:30px; padding-bottom:14px; border-bottom:2px solid var(--green); }
.case h1 { margin:8px 0 0; font-size:44px; line-height:1.1; letter-spacing:0; }
.focus { max-width:430px; padding:14px 16px; border:1px solid #efddb8; border-radius:8px; background:var(--warm); color:#60492e; font-size:16px; font-weight:700; line-height:1.52; }
.case-grid { min-height:0; display:grid; grid-template-columns:.84fr 1.3fr .92fr; gap:20px; }
.panel { min-width:0; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:8px; background:#fff; padding:17px; }
.panel h2 { margin:0 0 12px; font-size:22px; line-height:1.2; }
.facts { display:grid; gap:11px; }
.fact { padding-bottom:11px; border-bottom:1px solid #edf1ed; }
.fact:last-child { padding-bottom:0; border-bottom:0; }
.fact b { display:block; margin-bottom:3px; color:var(--green); font-size:13px; }
.fact p { margin:0; color:#34473e; font-size:14px; line-height:1.52; }
.chat { display:grid; gap:6px; }
.bubble { width:fit-content; max-width:93%; padding:8px 11px; border-radius:8px; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.customer { justify-self:start; background:#f4f6f4; color:#33413c; }
.sales { justify-self:end; background:var(--mint); border:1px solid #cae4d1; color:#143d29; }
.role { display:block; margin-bottom:2px; color:var(--green); font-size:12px; font-weight:900; }
.customer .role { color:#6b7973; }
.moves { display:grid; gap:8px; }
.move { display:grid; grid-template-columns:28px 1fr; gap:9px; align-items:start; padding:7px 0; border-bottom:1px solid #edf1ed; }
.move:last-child { border-bottom:0; }
.num { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-size:12px; font-weight:900; }
.move b { display:block; margin-bottom:2px; color:#1d382a; font-size:14px; }
.move p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.guard { margin-top:10px; padding:11px 12px; border:1px solid #d6e4f1; border-radius:8px; background:var(--blue); color:#36536e; font-size:13px; line-height:1.48; }
.guard b { display:block; margin-bottom:3px; color:#315d83; }
.tag { color:var(--green); font-weight:900; }
@media (min-width:1181px) {
  .redirect-stock-case .panel { display:flex; flex-direction:column; }
  .redirect-stock-case .chat,
  .redirect-stock-case .moves { min-height:0; flex:1; align-content:space-between; }
  .redirect-stock-case .facts {
    min-height:0;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
  }
  .redirect-stock-case .fact {
    padding-bottom:18px;
  }
  .redirect-stock-case .fact b {
    margin-bottom:6px;
    font-size:16px;
  }
  .redirect-stock-case .fact p {
    font-size:17px;
    line-height:1.62;
  }
  .redirect-stock-case .fact:last-child {
    padding-bottom:0;
  }
  .case-background-emphasis .case-grid > .panel:first-child {
    display:flex;
    flex-direction:column;
  }
  .case-background-emphasis .case-grid > .panel:first-child .facts {
    min-height:0;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
  }
  .case-background-emphasis .case-grid > .panel:first-child .fact {
    padding-bottom:18px;
  }
  .case-background-emphasis .case-grid > .panel:first-child .fact b {
    margin-bottom:6px;
    font-size:16px;
  }
  .case-background-emphasis .case-grid > .panel:first-child .fact p {
    font-size:17px;
    line-height:1.62;
  }
  .case-background-emphasis .case-grid > .panel:first-child .fact:last-child {
    padding-bottom:0;
  }
  .crosssell-earbuds-case .case-grid > .panel:nth-child(2) {
    display:flex;
    flex-direction:column;
    padding:17px;
  }
  .crosssell-earbuds-case .case-grid > .panel:nth-child(2) h2 {
    margin-bottom:12px;
    font-size:22px;
  }
  .crosssell-earbuds-case .case-grid > .panel:nth-child(2) .chat {
    min-height:0;
    flex:1;
    align-content:center;
    gap:8px;
  }
  .crosssell-earbuds-case .case-grid > .panel:nth-child(2) .bubble {
    padding:7px 10px;
    font-size:13px;
    line-height:1.36;
  }
  .crosssell-earbuds-case .case-grid > .panel:nth-child(2) .role {
    margin-bottom:1px;
    font-size:11px;
  }
}
@media (min-width:1181px) { html, body { height:100%; overflow:hidden; } .deck { height:calc(100vh - 40px); min-height:0; overflow:hidden; } }
@media (max-width:1180px) { .index .deck, .case .deck { height:auto; min-height:calc(100vh - 40px); } .case-grid { grid-template-columns:1fr; } }
@media (max-width:1180px) { .film-grid { grid-template-columns:1fr; } }
@media (min-width:1181px) and (max-width:1350px) {
  .film-guide .case-grid > .panel:nth-child(2) { display:block; }
  .film-grid { flex:none; grid-template-columns:repeat(2, minmax(0, 1fr)); align-content:start; }
  .film-card { display:block; }
  .film-card:last-child { grid-column:1 / -1; }
  .film-card h3 { min-height:0; }
  .film-card p { padding:5px 0; }
  .film-say { margin-top:8px; }
}
@media (max-width:960px) { .index .cards.three-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.module-card:hover { animation:module-card-spring .42s ease-out both; }
@media (max-width:720px) { .deck { width:calc(100vw - 24px); margin:12px auto; } .index .deck, .case .deck { padding:28px 22px; } .index header, .case header { display:grid; grid-template-columns:1fr; align-items:start; } .eyebrow { font-size:18px; } .index h1 { font-size:42px; } .case h1 { font-size:36px; } .index .cards, .index .cards.three-cards { grid-template-columns:1fr; } .module-card { min-height:220px; } .focus { max-width:none; } footer { align-items:flex-start; flex-direction:column; } .index footer .nav { margin-left:0; } }