/* 星礼心选 · 从选礼到回访的服务流程 */
:root {
  --svc-ink: #242627;
  --svc-muted: #777a74;
  --svc-paper: #f4f3ef;
  --svc-card: #fbfbf8;
  --svc-line: #deded8;
  --svc-gold: #a18b68;
  --svc-serif: "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
}

[hidden] { display: none !important; }
body.service-mode #packaging-main,
body.service-mode .quote-bar,
body.packaging-mode #service-main { display: none !important; }

.site-header { min-height: 90px; height: auto; gap: 30px; position: relative; }
.site-header nav { gap: 4px; margin-left: 5px; }
.site-header nav [data-route] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 90px; padding: 16px 13px; border: 0;
  border-bottom: 2px solid transparent; background: transparent;
  color: #85877f; font-size: 12px; white-space: nowrap;
}
.site-header nav [data-route]:hover { color: var(--svc-ink); }
.site-header nav .svc-nav-active {
  color: var(--svc-ink); border-bottom-color: var(--svc-ink); font-weight: 500;
}
.site-header #my-designs {
  min-height: 40px; margin-left: 14px; padding: 8px 12px;
  border: 1px solid var(--svc-line); color: #686c64;
  font-size: 11px; white-space: nowrap;
}
.site-header .header-tag { line-height: 1.5; white-space: nowrap; }

#service-main.svc-shell {
  width: 100%; max-width: 1250px; margin: 0 auto; padding: 42px 5% 84px;
  font-size: 14px; line-height: 1.75;
}
.svc-shell *, .svc-bridge * { box-sizing: border-box; }
.svc-shell button, .svc-shell input, .svc-shell select, .svc-shell textarea,
.svc-bridge button { font-family: inherit; }
.svc-shell h2, .svc-shell h3, .svc-shell h4 { color: var(--svc-ink); font-weight: 500; }
.svc-shell h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.5; }
.svc-shell h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.55; }
.svc-shell h4 { margin: 0 0 8px; font-size: 14px; }
.svc-shell p { margin: 0 0 14px; }
.svc-shell p:last-child { margin-bottom: 0; }
.svc-shell button:focus-visible, .svc-shell a:focus-visible,
.svc-shell input:focus-visible, .svc-shell select:focus-visible,
.svc-shell textarea:focus-visible, .svc-bridge button:focus-visible {
  outline: 2px solid var(--svc-gold); outline-offset: 4px;
}
.svc-eyebrow, .svc-kicker {
  display: block; margin: 0 0 13px; color: var(--svc-gold);
  font-size: 11px; font-weight: 500; letter-spacing: 2.5px; line-height: 1.6;
}
.svc-kicker { margin-bottom: 7px; font-size: 10px; letter-spacing: 1.7px; }
.svc-page-title {
  margin: 0 0 18px; font-family: var(--svc-serif);
  font-size: clamp(32px, 3.5vw, 46px); font-weight: 400;
  letter-spacing: 1.5px; line-height: 1.4;
}
.svc-page-title > span { color: var(--svc-gold); }
.svc-lead { max-width: 650px; color: #767a72; font-size: 15px; line-height: 1.95; }
.svc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 10px;
  border: 1px solid #d8d0c0; color: #8c7857;
  font-size: 11px; font-weight: 400; letter-spacing: .5px;
}
.svc-page-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 30px;
}
.svc-page-top > :first-child { min-width: 0; }
.svc-page-top .svc-page-title { font-size: 34px; margin-bottom: 10px; }
.svc-page-top > button, .svc-page-top > a { flex: none; }
.svc-section-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin: 44px 0 20px;
}
.svc-section-heading h2 { margin-bottom: 0; font-family: var(--svc-serif); letter-spacing: 1px; }
.svc-section-heading p { color: var(--svc-muted); font-size: 12px; }

.svc-home-hero {
  display: grid; grid-template-columns: 1fr 1.05fr; align-items: center;
  min-height: 410px; gap: 42px; padding: 0 0 32px;
}
.svc-hero-copy { padding: 22px 0; }
.svc-hero-copy .svc-lead { max-width: 450px; }
.svc-hero-copy .svc-pill { margin-bottom: 23px; }
.svc-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.svc-hero-stage {
  min-width: 0; min-height: 360px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 54% 40%, #f5f4ef, #e8e8e1 80%);
  border: 1px solid #dedfd6;
}
.svc-hero-stage > svg { display: block; width: 100%; height: 330px; max-height: 340px; }
.svc-hero-stage #svc-home-scene {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 330px; min-width: 0; flex: none;
}
.svc-hero-stage #svc-home-scene > svg { width: 100%; height: 100%; max-height: 340px; }
.svc-hero-stage > .svc-kicker { width: auto; margin: 0 0 13px; text-align: center; }
.svc-hero-stage > .svc-pill { width: auto; max-width: 100%; flex: none; align-self: center; justify-content: center; margin-bottom: 10px; }

.svc-primary, .svc-secondary, .svc-text-btn, .svc-danger, .svc-small {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 11px 19px; border: 1px solid transparent;
  border-radius: 0; font-size: 13px; font-weight: 400; line-height: 1.5;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.svc-primary { background: var(--svc-ink); border-color: var(--svc-ink); color: #fff; }
.svc-primary:hover { background: #454b45; border-color: #454b45; color: #fff; }
.svc-secondary { background: transparent; border-color: #cfd1c6; color: var(--svc-ink); }
.svc-secondary:hover { border-color: var(--svc-gold); background: #ecebe3; }
.svc-text-btn { padding: 9px 2px; background: transparent; color: #777b70; border: 0; }
.svc-text-btn:hover { color: #8d744d; }
.svc-danger { color: #9a5149; background: transparent; border-color: #dbc6be; }
.svc-danger:hover { background: #f4e9e3; border-color: #b88b7c; }
.svc-small { min-height: 40px; padding: 8px 12px; font-size: 12px; }
.svc-small:not(.svc-primary):not(.svc-secondary):not(.svc-danger):not(.svc-text-btn) {
  background: transparent; border-color: #d4d6ca; color: var(--svc-ink);
}
.svc-primary svg, .svc-secondary svg, .svc-text-btn svg, .svc-small svg {
  width: 16px; height: 16px; flex: none;
}
.svc-primary:disabled, .svc-secondary:disabled, .svc-text-btn:disabled,
.svc-danger:disabled, .svc-small:disabled { pointer-events: none; opacity: .42; }

.svc-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svc-mode-card {
  position: relative; min-width: 0; min-height: 206px; padding: 27px 28px;
  border: 1px solid var(--svc-line); background: var(--svc-card);
  color: var(--svc-ink); text-align: left; font: inherit;
  transition: border-color .18s, background-color .18s;
}
.svc-mode-card[data-action] { cursor: pointer; }
.svc-mode-card[data-action]:hover { border-color: #b3a58b; background: #fff; }
.svc-mode-card h3 { margin: 15px 0 10px; font-family: var(--svc-serif); font-size: 22px; letter-spacing: .7px; }
.svc-mode-card p { color: var(--svc-muted); font-size: 13px; line-height: 1.9; }
.svc-mode-card > .svc-text-btn { margin-top: 8px; }
.svc-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 10px;
  border: 1px solid #dedbd0; background: #f0eee6; color: var(--svc-gold);
}
.svc-card-icon svg { width: 100%; height: 100%; }
.svc-flow-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.svc-step-card { min-width: 0; padding: 20px 16px; border: 1px solid var(--svc-line); background: #f7f7f2; }
.svc-step-card .svc-qno { margin-bottom: 20px; }
.svc-step-card h3 { font-size: 13px; margin-bottom: 8px; }
.svc-step-card p { color: #83867c; font-size: 12px; line-height: 1.75; }

.svc-card { min-width: 0; border: 1px solid var(--svc-line); background: var(--svc-card); padding: 28px; }
.svc-card > :first-child { margin-top: 0; }
.svc-card > :last-child { margin-bottom: 0; }
.svc-card > h2 { font-size: 21px; }
.svc-card > h3 { font-size: 17px; }
.svc-card + .svc-card { margin-top: 20px; }
.svc-form { display: grid; gap: 26px; }
.svc-form > .svc-card + .svc-card { margin-top: 0; }
.svc-question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.svc-question {
  position: relative; min-width: 0; padding: 24px;
  border: 1px solid var(--svc-line); background: var(--svc-card);
}
.svc-question > :last-child { margin-bottom: 0; }
.svc-question h3, .svc-question > .svc-label { margin-bottom: 14px; font-size: 15px; font-weight: 500; }
.svc-qno { display: block; margin: 0 0 12px; color: var(--svc-gold); font-size: 11px; line-height: 1.3; letter-spacing: 2px; }
.svc-field { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.svc-field + .svc-field { margin-top: 18px; }
.svc-fields > .svc-field + .svc-field { margin-top: 0; }
.svc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.svc-label { display: block; margin: 0; color: #4e534a; font-size: 12px; line-height: 1.6; }
.svc-help { display: block; margin: 6px 0 0; color: #8a8d82; font-size: 12px; line-height: 1.75; }
.svc-field > .svc-help { margin-top: 0; }
.svc-input, .svc-select, .svc-textarea {
  display: block; width: 100%; min-width: 0; min-height: 46px; padding: 11px 13px;
  border: 1px solid #d2d5c8; border-radius: 0; background: #fff; color: var(--svc-ink);
  font-size: 14px; font-weight: 400; line-height: 1.6;
  transition: border-color .18s, box-shadow .18s;
}
.svc-input::placeholder, .svc-textarea::placeholder { color: #a0a397; opacity: 1; }
.svc-input:focus, .svc-select:focus, .svc-textarea:focus { border-color: var(--svc-gold); box-shadow: 0 0 0 2px #a18b6812; }
.svc-input[aria-invalid="true"], .svc-select[aria-invalid="true"], .svc-textarea[aria-invalid="true"] { border-color: #b37765; }
.svc-select { padding-right: 30px; cursor: pointer; }
.svc-textarea { min-height: 120px; resize: vertical; }
.svc-choice-group { display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch; }
.svc-chip {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 40px; padding: 9px 14px; border: 1px solid #d6d8cd;
  border-radius: 0; background: #fff; color: #777c6e;
  font-size: 13px; line-height: 1.5; text-align: center;
  transition: background-color .18s, border-color .18s, color .18s;
}
.svc-chip:hover { border-color: #a69b82; color: var(--svc-ink); }
.svc-chip[aria-pressed="true"], .svc-chip.active { background: var(--svc-ink); border-color: var(--svc-ink); color: #fff; }
.svc-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.svc-inline > .svc-field { flex: 1; min-width: 150px; }
.svc-inline > .svc-field + .svc-field { margin-top: 0; }
.svc-toggle-label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #5f6657; font-size: 14px; cursor: pointer; }
.svc-toggle-label input { width: 17px; height: 17px; margin: 0; accent-color: #7b806c; flex: none; }
.svc-section-rule { width: 100%; height: 1px; border: 0; margin: 28px 0; background: var(--svc-line); }
.svc-form-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid var(--svc-line); }
.svc-form-footer > .svc-note { flex: 1; margin: 0 20px 0 0; }
.svc-note { margin: 18px 0 0; padding: 13px 16px; border-left: 2px solid #bcad91; background: #eeede5; color: #858979; font-size: 12px; line-height: 1.85; }
.svc-note strong { color: #626957; font-weight: 500; }

.svc-progress {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0; margin: 0 0 30px; border: 1px solid var(--svc-line); background: #eeeee7;
}
.svc-progress-step {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; min-height: 62px; padding: 14px 9px;
  border: 0; border-top: 2px solid transparent; border-right: 1px solid var(--svc-line);
  background: transparent; color: #94978b; font-size: 12px; line-height: 1.5; white-space: nowrap;
}
.svc-progress-step:last-child { border-right: 0; }
.svc-progress-step > span:first-child { flex: none; min-width: 18px; padding-right: 2px; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .8px; }
.svc-progress-step .svc-qno { display: inline; margin: 0; font-size: 10px; color: inherit; letter-spacing: .3px; }
.svc-progress-step.active { background: #fbfbf7; border-top-color: var(--svc-ink); color: var(--svc-ink); font-weight: 500; }
.svc-progress-step.done { color: #82785f; }

.svc-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svc-gift-card {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--svc-line); background: var(--svc-card); color: var(--svc-ink);
  text-align: left; position: relative; font: inherit;
  transition: border-color .18s, background-color .18s;
}
.svc-gift-card:hover { border-color: #aaa78f; }
.svc-gift-card.svc-selected, .svc-selected {
  border-color: var(--svc-gold); box-shadow: inset 0 0 0 1px var(--svc-gold); background-color: #fff;
}
.svc-gift-art {
  display: flex; align-items: center; justify-content: center; gap: 0;
  min-height: 160px; padding: 16px 10px; overflow: hidden;
  border-bottom: 1px solid #e1e2d8; background: #eaece4;
}
.svc-gift-art > svg { width: min(34%, 112px); height: 130px; flex: 1; min-width: 0; }
.svc-gift-art > div { flex: 1; min-width: 0; max-width: 115px; }
.svc-gift-art > div > svg { width: 100%; height: 130px; }
.svc-gift-content { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 22px; }
.svc-gift-content h3 { margin: 0 0 10px; font-size: 18px; }
.svc-gift-content > p { color: var(--svc-muted); font-size: 13px; }
.svc-gift-content > .svc-primary, .svc-gift-content > .svc-secondary { margin-top: auto; width: 100%; }
.svc-gift-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 17px 0; color: var(--svc-ink); font-size: 22px; line-height: 1.4; }
.svc-gift-price small, .svc-gift-price span { color: #93968a; font-size: 11px; font-weight: 400; }
.svc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 14px; }
.svc-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; background: #eeeee6; color: #838672; font-size: 11px; line-height: 1.5; }
.svc-reasons { margin: 0 0 20px; padding: 0 0 0 16px; color: #7d8373; font-size: 12px; line-height: 1.9; }
.svc-reasons li + li { margin-top: 4px; }
.svc-extras-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.svc-extra-option {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  min-width: 0; min-height: 126px; gap: 7px; padding: 18px 16px;
  border: 1px solid var(--svc-line); background: #fafbf5; color: var(--svc-ink);
  font: inherit; text-align: left;
}
.svc-extra-option svg { width: 26px; height: 26px; margin-bottom: 5px; color: var(--svc-gold); }
.svc-extra-option strong { font-size: 13px; font-weight: 500; }
.svc-extra-option small, .svc-extra-option p { color: #8a917e; font-size: 12px; line-height: 1.7; }
.svc-extra-option[aria-pressed="true"], .svc-extra-option.active { border-color: var(--svc-gold); background: #f0eee4; box-shadow: inset 0 0 0 1px var(--svc-gold); }
.svc-letter-preview {
  min-height: 260px; padding: 34px 32px; border: 1px solid #d8cbb1;
  background: linear-gradient(135deg, #f6f0e3, #ece3d0); color: #786b56;
  font-family: var(--svc-serif); font-size: 17px; line-height: 2.1;
  white-space: pre-line; overflow-wrap: anywhere;
  box-shadow: 0 12px 24px #776c4b0a;
}
.svc-letter-preview::before { content: ""; display: block; width: 28px; height: 1px; margin-bottom: 19px; background: #b19a70; }
.svc-letter-preview small { display: block; font-size: 13px; color: #9c8e76; }

.svc-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; gap: 24px; }
.svc-split > * { min-width: 0; }
.svc-order-summary { border: 1px solid var(--svc-line); background: #fbfbf7; padding: 25px; }
.svc-order-summary h3 { margin-bottom: 20px; font-family: var(--svc-serif); font-size: 20px; }
.svc-summary-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.8; }
.svc-summary-list dt { color: var(--svc-muted); }
.svc-summary-list dd { margin: 0; }
.svc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-size: 13px; line-height: 1.8; }
.svc-line > :first-child { color: #8b9080; }
.svc-line > :last-child { max-width: 70%; text-align: right; overflow-wrap: anywhere; }
.svc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--svc-line); font-size: 13px; }
.svc-total strong { color: var(--svc-ink); font-size: 23px; font-weight: 500; white-space: nowrap; }
.svc-total small { font-size: 12px; color: var(--svc-muted); }
.svc-order-summary > .svc-primary, .svc-order-summary > .svc-secondary { width: 100%; margin-top: 20px; }
.svc-order-summary > .svc-primary + .svc-secondary { margin-top: 8px; }
.svc-sticky-summary { position: sticky; top: 24px; }

.svc-message-tabs { display: flex; align-items: stretch; overflow-x: auto; border-bottom: 1px solid var(--svc-line); gap: 16px; scrollbar-width: thin; }
.svc-message-tabs button {
  min-height: 46px; padding: 12px 3px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: #8a8f7f; font-size: 13px; white-space: nowrap;
}
.svc-message-tabs .active, .svc-message-tabs [aria-selected="true"], .svc-message-tabs [aria-pressed="true"] { border-bottom-color: var(--svc-ink); color: var(--svc-ink); }
.svc-message-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--svc-line); font-size: 13px; }
.svc-message-head strong { font-weight: 500; }
.svc-message-head > span { color: #8b9180; font-size: 12px; }
.svc-message-body { margin-top: 20px; padding: 22px; border: 1px solid #e1e3d8; background: #f1f3eb; color: #5e6854; font-size: 14px; line-height: 1.95; white-space: pre-line; overflow-wrap: anywhere; }
.svc-message-body p { margin: 0 0 14px; }
.svc-guide-list { margin: 0; padding-left: 22px; color: #7e8772; font-size: 14px; line-height: 1.9; }
.svc-guide-list li { padding-left: 4px; }
.svc-guide-list li + li { margin-top: 16px; }
.svc-guide-list strong { color: #4f5b43; font-weight: 500; }

.svc-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svc-profile-card { min-width: 0; padding: 25px; background: var(--svc-card); border: 1px solid var(--svc-line); }
.svc-profile-card h3 { margin-bottom: 8px; font-size: 20px; font-family: var(--svc-serif); }
.svc-profile-card > p { color: #858c7a; font-size: 13px; }
.svc-profile-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin: 18px 0; color: #8b9280; font-size: 12px; line-height: 1.8; }
.svc-profile-meta p, .svc-profile-meta dt, .svc-profile-meta dd { margin: 0; }
.svc-profile-meta strong { color: #5c6652; font-weight: 400; }
.svc-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--svc-line); }
.svc-order-card { padding: 27px; margin-bottom: 20px; border: 1px solid var(--svc-line); background: var(--svc-card); }
.svc-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--svc-line); }
.svc-order-head h3 { margin: 0 0 7px; font-size: 18px; }
.svc-order-head p { margin: 0; color: #8a9180; font-size: 12px; line-height: 1.8; }
.svc-status { display: inline-flex; justify-content: center; align-items: center; flex: none; min-height: 28px; padding: 3px 10px; border: 1px solid #d2d8c6; background: #eef1e6; color: #74815f; font-size: 11px; line-height: 1.5; }
.svc-status.pending { border-color: #d9cdb8; background: #f4eee2; color: #9e865a; }
.svc-timeline { display: grid; gap: 0; margin: 24px 0; padding: 0; list-style: none; }
.svc-timeline-item { position: relative; margin-left: 5px; padding: 0 0 23px 25px; border-left: 1px solid #d8ddcc; color: #969e89; font-size: 13px; line-height: 1.8; }
.svc-timeline-item::before { content: ""; position: absolute; width: 9px; height: 9px; left: -5px; top: 6px; border: 1px solid #ccd3bf; background: var(--svc-card); border-radius: 50%; }
.svc-timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.svc-timeline-item strong { display: block; font-size: 13px; font-weight: 500; }
.svc-timeline-item p, .svc-timeline-item time, .svc-timeline-item small { margin: 4px 0 0; font-size: 12px; color: #99a08e; }
.svc-timeline-item.done { color: #7d836e; }
.svc-timeline-item.done::before { border-color: #b3a17e; background: #b3a17e; }
.svc-timeline-item.current { color: var(--svc-ink); }
.svc-timeline-item.current::before { border-color: var(--svc-ink); background: var(--svc-ink); box-shadow: 0 0 0 4px #2426270b; }
.svc-timeline-item.current strong { font-weight: 500; }
.svc-order-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--svc-line); }
.svc-feedback-stars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 18px; }
.svc-star { display: inline-flex; justify-content: center; align-items: center; width: 42px; min-height: 42px; border: 0; padding: 0; background: transparent; color: #d4d7cb; font-size: 29px; line-height: 1; }
.svc-star.active, .svc-star[aria-pressed="true"], .svc-star:hover { color: #b09a70; }
.svc-empty { padding: 64px 24px; border: 1px dashed #d2d7c6; background: #f7f8f1; color: #909b7f; text-align: center; }
.svc-empty > svg { width: 44px; height: 44px; margin: 0 auto 22px; color: #a6af94; }
.svc-empty h2, .svc-empty h3 { font-family: var(--svc-serif); font-size: 24px; font-weight: 400; }
.svc-empty p { max-width: 460px; margin: 0 auto 22px; color: #919c81; font-size: 14px; }
.svc-error { padding: 13px 16px; margin: 14px 0; border: 1px solid #dbc4b9; background: #f6ebe5; color: #a36653; font-size: 13px; line-height: 1.8; }
.svc-error:empty, .studio-validation:empty, .shop-status:empty { display: none !important; }
.svc-bridge { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 18px; margin: 24px 0 0; border: 1px solid #d9d7c9; background: #ecece1; color: #7c826d; font-size: 12px; line-height: 1.8; }
.svc-bridge strong { color: #5a634b; font-weight: 500; }
.svc-bridge .svc-text-btn, .svc-bridge .svc-small { min-height: 40px; font-size: 12px; }

@media (min-width: 1450px) {
  #service-main.svc-shell { padding-left: 30px; padding-right: 30px; }
  .svc-home-hero { gap: 60px; }
}
@media (max-width: 1100px) {
  .site-header { gap: 20px; }
  .site-header nav { margin-left: 0; gap: 0; }
  .site-header nav [data-route] { padding-left: 10px; padding-right: 10px; }
  .site-header .header-tag { display: none; }
  .site-header #my-designs { margin-left: 10px; }
  .svc-home-hero { gap: 24px; }
  .svc-hero-stage { min-height: 320px; }
  .svc-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-results-grid { gap: 12px; }
  .svc-gift-content { padding: 19px; }
  .svc-split { grid-template-columns: minmax(0, 1.65fr) minmax(250px, 1fr); gap: 18px; }
}
@media (max-width: 760px) {
  .site-header { min-height: 0; height: auto; margin: 0 20px; padding-top: 13px; gap: 0; flex-wrap: wrap; }
  .site-header .brand { min-height: 40px; }
  .site-header nav { order: 3; flex: 0 0 100%; width: 100%; align-self: auto; justify-content: flex-start; margin: 7px 0 0; padding: 0; gap: 0; }
  .site-header nav [data-route] { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 12px 7px; font-size: 12px; }
  .site-header #my-designs { position: absolute; top: 13px; right: 0; min-height: 40px; margin: 0; padding: 6px 10px; font-size: 11px; }
  .site-header #my-designs span { margin-left: 3px; }
  #service-main.svc-shell { padding: 29px 20px 54px; font-size: 14px; }
  .svc-shell h2 { font-size: 21px; }
  .svc-eyebrow { margin-bottom: 12px; font-size: 10px; letter-spacing: 2px; }
  .svc-page-title { margin-bottom: 16px; font-size: 34px; line-height: 1.45; letter-spacing: 1px; }
  .svc-lead { font-size: 14px; line-height: 1.9; }
  .svc-page-top { gap: 14px; margin-bottom: 24px; }
  .svc-page-top .svc-page-title { font-size: 29px; }
  .svc-page-top > .svc-secondary, .svc-page-top > .svc-primary { padding: 9px 12px; min-height: 40px; font-size: 12px; }
  .svc-section-heading { align-items: flex-start; gap: 12px; margin: 32px 0 16px; }
  .svc-section-heading h2 { font-size: 21px; }
  .svc-section-heading p { max-width: 125px; text-align: right; font-size: 12px; }
  .svc-home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 24px; padding-bottom: 8px; }
  .svc-hero-copy { padding: 5px 0 0; }
  .svc-hero-copy .svc-pill { margin-bottom: 20px; }
  .svc-hero-actions { gap: 10px; margin-top: 23px; }
  .svc-hero-actions > .svc-primary { flex: 1; }
  .svc-hero-stage { min-height: 255px; padding: 7px 14px 16px; }
  .svc-hero-stage #svc-home-scene { height: 220px; }
  .svc-hero-stage > svg, .svc-hero-stage #svc-home-scene > svg { max-height: 220px; }
  .svc-hero-stage > .svc-kicker { margin-bottom: 10px; font-size: 9px; letter-spacing: 1.4px; }
  .svc-hero-stage > .svc-pill { margin-bottom: 3px; }
  .svc-primary, .svc-secondary, .svc-text-btn, .svc-danger { min-height: 44px; font-size: 13px; padding: 11px 16px; }
  .svc-text-btn { padding-left: 2px; padding-right: 2px; }
  .svc-small { min-height: 40px; font-size: 12px; padding: 8px 12px; }
  .svc-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .svc-mode-card { min-height: 220px; padding: 20px 16px; }
  .svc-mode-card h3 { font-size: 19px; line-height: 1.55; }
  .svc-mode-card p { font-size: 14px; line-height: 1.85; }
  .svc-card-icon { width: 38px; height: 38px; padding: 9px; }
  .svc-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .svc-step-card { padding: 19px 17px; }
  .svc-step-card h3 { font-size: 14px; }
  .svc-step-card p { font-size: 14px; line-height: 1.85; }
  .svc-step-card .svc-qno { margin-bottom: 17px; }
  .svc-card { padding: 22px 19px; }
  .svc-card + .svc-card { margin-top: 16px; }
  .svc-card > h2 { font-size: 20px; }
  .svc-form { gap: 20px; }
  .svc-question-grid, .svc-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .svc-question { padding: 22px 19px; }
  .svc-question h3, .svc-question > .svc-label { font-size: 15px; }
  .svc-label { font-size: 12px; line-height: 1.65; }
  .svc-help { font-size: 12px; line-height: 1.8; }
  .svc-input, .svc-select, .svc-textarea { min-height: 46px; font-size: 14px; padding: 11px 12px; }
  .svc-textarea { min-height: 128px; }
  .svc-chip { min-height: 42px; padding: 9px 13px; font-size: 13px; }
  .svc-choice-group { gap: 8px; }
  .svc-inline { gap: 10px; }
  .svc-inline > .svc-field { min-width: 130px; }
  .svc-toggle-label { font-size: 14px; }
  .svc-section-rule { margin: 24px 0; }
  .svc-form-footer { justify-content: space-between; gap: 10px; padding-top: 20px; }
  .svc-form-footer > .svc-note { flex: 1 0 100%; margin: 0 0 8px; }
  .svc-form-footer > .svc-primary { margin-left: auto; }
  .svc-note { padding: 12px 14px; font-size: 12px; line-height: 1.85; }
  .svc-progress { display: flex; overflow-x: auto; margin: 0 -20px 24px; border-left: 0; border-right: 0; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .svc-progress-step { flex: 0 0 105px; min-height: 56px; padding: 12px 9px; font-size: 12px; scroll-snap-align: start; }
  .svc-results-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .svc-gift-art { min-height: 154px; padding: 13px 20px; }
  .svc-gift-art > svg { height: 130px; max-width: 110px; }
  .svc-gift-content { padding: 23px; }
  .svc-gift-content h3 { font-size: 20px; }
  .svc-gift-content > p { font-size: 14px; }
  .svc-gift-price { margin: 15px 0 18px; font-size: 24px; }
  .svc-gift-price small, .svc-gift-price span { font-size: 12px; }
  .svc-tag { font-size: 11px; }
  .svc-reasons { font-size: 14px; line-height: 1.95; margin-bottom: 22px; }
  .svc-extras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .svc-extra-option { min-height: 127px; padding: 17px 15px; }
  .svc-extra-option strong { font-size: 14px; }
  .svc-extra-option small, .svc-extra-option p { font-size: 12px; }
  .svc-letter-preview { padding: 28px 24px; min-height: 250px; font-size: 17px; line-height: 2; }
  .svc-split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .svc-order-summary { padding: 23px 21px; }
  .svc-order-summary h3 { font-size: 21px; }
  .svc-line, .svc-summary-list { font-size: 14px; }
  .svc-sticky-summary { position: static; }
  .svc-message-tabs { gap: 18px; }
  .svc-message-tabs button { min-height: 46px; font-size: 13px; }
  .svc-message-head { gap: 12px; font-size: 13px; }
  .svc-message-head > span { font-size: 12px; }
  .svc-message-body { margin-top: 18px; padding: 19px 16px; font-size: 14px; line-height: 1.95; }
  .svc-guide-list { font-size: 14px; }
  .svc-profile-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .svc-profile-card { padding: 24px 21px; }
  .svc-profile-card h3 { font-size: 22px; }
  .svc-profile-card > p { font-size: 14px; }
  .svc-profile-meta { font-size: 12px; }
  .svc-profile-actions { gap: 8px; }
  .svc-order-card { padding: 23px 20px; margin-bottom: 18px; }
  .svc-order-head { gap: 12px; padding-bottom: 18px; }
  .svc-order-head h3 { font-size: 17px; }
  .svc-order-head p { font-size: 12px; }
  .svc-status { font-size: 11px; padding: 3px 8px; }
  .svc-timeline { margin: 23px 0; }
  .svc-timeline-item { padding-left: 23px; font-size: 14px; }
  .svc-timeline-item strong { font-size: 14px; }
  .svc-order-actions { justify-content: flex-start; gap: 8px; }
  .svc-order-actions > button { flex: 1; }
  .svc-empty { padding: 48px 22px; }
  .svc-empty h2, .svc-empty h3 { font-size: 23px; }
  .svc-empty p { font-size: 14px; line-height: 1.9; }
  .svc-error { font-size: 13px; padding: 12px 14px; }
  .svc-bridge { margin-top: 18px; padding: 12px 14px; font-size: 12px; }
  .svc-bridge > :first-child { flex: 1; min-width: 170px; }
}
@media (max-width: 380px) {
  .site-header { margin-left: 16px; margin-right: 16px; }
  .site-header nav [data-route] { padding-left: 4px; padding-right: 4px; font-size: 11px; }
  #service-main.svc-shell { padding-left: 16px; padding-right: 16px; }
  .svc-page-title { font-size: 31px; }
  .svc-mode-card { padding: 19px 13px; }
  .svc-mode-card h3 { font-size: 18px; }
  .svc-progress { margin-left: -16px; margin-right: -16px; }
  .svc-card, .svc-question { padding-left: 16px; padding-right: 16px; }
  .svc-gift-content { padding: 21px; }
  .svc-profile-actions .svc-small { padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-shell *, .svc-bridge *, .site-header nav * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Employee welfare collection */
.welfare-home-entry{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0 6px;padding:25px 30px;background:#eae7de;border:1px solid #d8d1c1}.welfare-home-entry h2{font-family:'Songti SC','SimSun',serif;font-weight:400;font-size:24px;margin:10px 0}.welfare-home-entry p{font-size:12px;color:#777267;margin:0}.site-header nav .welfare-nav{color:#907447}.welfare-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;padding:55px 22px 35px}.welfare-hero .svc-page-title{margin:24px 0 20px;font-size:56px;line-height:1.25}.welfare-price{font-size:76px;font-weight:400;letter-spacing:-4px;color:#a08254;line-height:1.1;margin-bottom:25px}.welfare-price>span{font-size:31px;vertical-align:top;line-height:1.8;letter-spacing:0}.welfare-price>small{font-size:14px;letter-spacing:1px;color:#767365;margin-left:15px}.welfare-stack{display:flex;justify-content:center;align-items:center;min-height:320px;padding:15px 0}.welfare-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:145px;height:190px;border:1px dashed #bcb6a6;background:#efede6;box-shadow:0 12px 25px #413a2810;transform:rotate(-9deg) translate(18px,14px);animation:welfare-in .45s ease-out}.welfare-slot:nth-child(2){transform:rotate(3deg) translate(0,-15px);z-index:2}.welfare-slot:nth-child(3){transform:rotate(11deg) translate(-18px,20px)}.welfare-slot.filled{border-style:solid;background:#fff}.welfare-slot img,.welfare-slot svg{width:90%;height:120px;object-fit:contain}.welfare-slot small{font-size:10px;color:#767264;padding:10px;text-align:center;line-height:1.5;max-width:100%;overflow:hidden}.welfare-slot-num{position:absolute;top:10px;left:12px;font-size:10px;color:#a18b68}.welfare-plus{font-size:27px;color:#b6ac98;padding:34px 0}.welfare-art-caption{text-align:center;font-size:9px;letter-spacing:3px;color:#9a917e}.welfare-step-line{display:flex;align-items:center;justify-content:center;gap:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 10px;font-size:12px;color:#969289}.welfare-step-line i{width:45px;height:1px;background:#d0c9ba}.welfare-step-line .active{color:#8c7148}.welfare-catalog{margin:44px 0}.welfare-filters{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:25px 0}.welfare-filters>label{max-width:340px;flex:1}.welfare-filters .svc-label{display:block;margin-bottom:10px}.welfare-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.welfare-product[hidden]{display:none}.welfare-product{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}.welfare-product-image{position:relative;display:flex;align-items:center;justify-content:center;background:#ecebe5;height:205px;padding:27px}.welfare-product-image img,.welfare-product-image svg{width:100%;height:100%;object-fit:contain}.welfare-tag{position:absolute;top:12px;left:12px;font-size:10px;color:#80673f;background:#f9f6ee;padding:5px 8px}.welfare-product-body{padding:23px;flex:1;display:flex;flex-direction:column}.welfare-product-body h3{font-size:19px;font-weight:500;margin:0 0 13px}.welfare-product-body p{font-size:12px;color:#858178;line-height:1.8;margin:0 0 15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.welfare-reference{font-size:12px;color:#8a8170;margin-top:auto}.welfare-product-body>small{font-size:10px;color:#99948a;margin-top:8px}.welfare-counter{display:flex;align-items:center;justify-content:space-between;margin-top:18px;background:#f5f4f0}.welfare-counter button{width:42px;height:38px;border:0;background:transparent;font-size:22px;cursor:pointer}.welfare-counter button:disabled{opacity:.25;cursor:default}.welfare-counter strong{font-weight:400;font-size:14px}.welfare-selection{display:grid;grid-template-columns:1fr 290px;gap:45px;border:1px solid #cfc7b7;background:#eae7df;padding:30px;margin:35px 0}.welfare-selection h2{font-size:26px;font-weight:400;margin:0 0 18px}.welfare-selection h2>span{color:#9b7b48}.welfare-selected-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.welfare-selected-list>span{font-size:12px;background:#fff;padding:8px 10px;display:flex;align-items:center;gap:12px}.welfare-selected-list button{background:none;border:0;cursor:pointer;color:#9b8866}.welfare-checkout .svc-input{max-width:110px}.welfare-checkout p>strong{font-size:30px;color:#8e7246;font-weight:400}.welfare-checkout p>small{font-size:10px;color:#8d877a}.welfare-checkout .svc-primary{width:100%}.welfare-checkout .svc-primary:disabled{opacity:.4;cursor:default}.welfare-checkout .svc-help{min-height:20px}.welfare-nav.svc-nav-active{background:#eae4d7!important;color:#866a3c!important}@keyframes welfare-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media(max-width:900px){.welfare-products{grid-template-columns:repeat(2,minmax(0,1fr))}.welfare-hero .svc-page-title{font-size:43px}.welfare-slot{width:112px;height:164px}.welfare-slot img,.welfare-slot svg{height:95px}.welfare-selection{gap:22px;grid-template-columns:1fr 250px}.welfare-filters{flex-wrap:wrap}.welfare-home-entry{padding:22px}.welfare-home-entry h2{font-size:21px}}
@media(max-width:600px){.welfare-home-entry{margin-top:18px;padding:22px 18px;display:block}.welfare-home-entry .svc-primary{margin-top:20px;width:100%}.welfare-home-entry .svc-eyebrow{font-size:7px;letter-spacing:1px}.welfare-hero{padding:30px 5px 25px;gap:0;grid-template-columns:1fr}.welfare-hero .svc-page-title{font-size:41px;margin:17px 0 15px}.welfare-price{font-size:65px;margin-bottom:16px}.welfare-hero .svc-lead{font-size:13px;line-height:1.9}.welfare-stack{min-height:235px;padding-top:25px}.welfare-slot{width:110px;height:150px}.welfare-art-caption{font-size:8px;margin-top:0}.welfare-step-line{gap:8px;justify-content:space-between;padding:16px 0;font-size:10px}.welfare-step-line i{width:10px}.welfare-catalog{margin-top:30px}.welfare-catalog .svc-section-heading{align-items:start;gap:12px}.welfare-catalog .svc-section-heading h2{font-size:21px}.welfare-catalog .svc-text-btn{font-size:10px;white-space:nowrap;padding-top:25px}.welfare-filters{display:block}.welfare-filters>label{display:block;max-width:100%}.welfare-filters .svc-choice-group{margin-top:16px}.welfare-products{gap:12px}.welfare-product-image{height:150px;padding:19px}.welfare-tag{font-size:8px;top:8px;left:8px;padding:4px 6px}.welfare-product-body{padding:14px 12px}.welfare-product-body .svc-eyebrow{font-size:8px;letter-spacing:1px}.welfare-product-body h3{font-size:14px;line-height:1.6;margin-bottom:8px}.welfare-product-body p{font-size:10px;line-height:1.6;margin-bottom:10px}.welfare-reference{font-size:10px}.welfare-selection{display:block;padding:23px 20px}.welfare-checkout{border-top:1px solid #d4ccbb;padding-top:20px;margin-top:23px}.welfare-checkout .svc-field{display:flex;align-items:center;justify-content:space-between}.welfare-checkout .svc-field .svc-label{margin:0}.welfare-checkout .svc-help{font-size:11px}.welfare-counter button{height:34px;width:34px}}

@media(max-width:760px){.site-header nav [data-route]{white-space:normal;line-height:1.4;padding:10px 4px;min-height:52px;font-size:11px}.site-header nav .welfare-nav{flex-direction:column}.welfare-nav-detail{font-size:9px;display:block;line-height:1.6}}

.welfare-browse{margin-top:12px}#welfare-catalog{scroll-margin-top:20px}
.site-header .brand{white-space:nowrap;flex-shrink:0}.site-header .brand svg{flex-shrink:0}
@media(min-width:761px) and (max-width:1100px){.site-header{flex-wrap:wrap;row-gap:0;padding-top:12px;gap:18px}.site-header nav{order:4;flex:0 0 100%;width:100%;margin:0}.site-header nav [data-route]{min-height:56px;flex:1}.site-header .shop-links{margin-left:auto;white-space:nowrap}.site-header #my-designs{margin-left:auto}}