:root {
  --forest: #123d35;
  --forest-2: #1d5a4d;
  --forest-soft: #e2ece7;
  --ivory: #f7f2e8;
  --paper: #fffdf8;
  --coral: #ef6f5e;
  --coral-dark: #d95747;
  --warm-line: #e5e0d7;
  --customer-ink: #18312d;
  --customer-muted: #6c7d78;
  --customer-shadow: 0 16px 48px rgba(24,49,45,.13);
}

.customer-shell, .customer-shell * { min-width: 0; }
.customer-shell {
  width: min(100%,430px); height: 100vh; height: 100dvh; margin: 0 auto;
  background: var(--ivory); color: var(--customer-ink);
  display: grid; grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden; box-shadow: var(--customer-shadow);
}
.customer-shell.home-shell { grid-template-rows: auto 62px minmax(0,1fr) auto; }
.customer-shell.flow-shell, .customer-shell.auth-shell { grid-template-rows: minmax(0,1fr); }
.customer-top {
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(247,242,232,.97); border-bottom: 1px solid rgba(18,61,53,.08); z-index: 4;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-lockup > span:last-child { display: flex; flex-direction: column; }
.brand-lockup strong { font-size: 20px; line-height: 1.1; font-weight: 850; letter-spacing: -.03em; }
.brand-lockup small { margin-top: 3px; color: var(--customer-muted); font-size: 9px; font-weight: 750; letter-spacing: .11em; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: var(--coral); color: #fff; font-size: 23px; font-weight: 900; box-shadow: inset -8px -8px 0 rgba(18,61,53,.16); }
.customer-avatar { width: 44px; height: 44px; padding: 0; border: 3px solid #dce8e1; border-radius: 50%; background: var(--forest); color: #fff; font-weight: 850; }

.category-bar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; align-items: center; padding: 8px 10px 10px; background: var(--ivory); border-bottom: 1px solid rgba(18,61,53,.08); overflow: hidden; z-index: 3; }
.category-chip { width: 100%; min-height: 44px; padding: 0 2px; border: 1px solid var(--warm-line); border-radius: 999px; background: var(--paper); color: var(--customer-muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.category-chip.active { background: var(--forest); border-color: var(--forest); color: #fff; }
.customer-page { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(18,61,53,.38) transparent; padding: 18px 18px 28px; }
.customer-page::-webkit-scrollbar { width: 6px; }
.customer-page::-webkit-scrollbar-thumb { background: rgba(18,61,53,.38); border-radius: 99px; }
.bottom-nav { display: grid; grid-template-columns: repeat(3,1fr); padding: 8px 20px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,253,248,.98); border-top: 1px solid rgba(18,61,53,.1); z-index: 5; }
.nav-item { border: 0; background: transparent; color: #7b8985; display: grid; place-items: center; align-content: center; gap: 3px; min-height: 58px; padding: 4px; font-size: 11px; font-weight: 800; }
.nav-item svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; }
.nav-item.active { color: var(--forest); background: transparent; }

.section-kicker { color: var(--coral-dark); font-size: 11px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.home-hero h1, .page-intro h1 { margin: 5px 0 8px; color: var(--customer-ink); font-size: 28px; line-height: 1.08; letter-spacing: -.05em; }
.home-hero p, .page-intro p { margin: 0; color: var(--customer-muted); font-size: 14px; line-height: 1.65; }
.catalog-status { display: flex; align-items: center; gap: 9px; margin: 17px 0 18px; padding: 12px 14px; border-radius: 15px; background: #e6efe9; color: #27574d; font-size: 12px; font-weight: 750; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #45a67d; box-shadow: 0 0 0 4px rgba(69,166,125,.13); }
.template-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.template-card { display: block; padding: 0; overflow: hidden; border: 1px solid rgba(18,61,53,.07); border-radius: 21px; background: var(--paper); box-shadow: 0 8px 24px rgba(38,54,50,.07); text-align: left; }
.template-card:active:not(.unavailable-card) { transform: scale(.985); }
.template-image { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: linear-gradient(145deg,#f0ebe1,#fffdf8); overflow: hidden; }
.template-image > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: transparent; }
.template-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border-radius: 999px; background: rgba(18,61,53,.91); color: #fff; font-size: 10px; font-weight: 850; }
.template-badge.soft { background: rgba(29,90,77,.82); }
.template-badge.pending { background: rgba(105,113,111,.92); }
.template-meta { display: block; padding: 12px 12px 13px; }
.template-meta strong { display: block; font-size: 14px; line-height: 1.3; }
.template-meta small { display: block; margin-top: 4px; color: var(--customer-muted); font-size: 10px; line-height: 1.45; }
.unavailable-card { border-style: dashed; box-shadow: none; opacity: .83; cursor: default; }
.placeholder-symbol { font-size: 40px; color: var(--forest-2); }
.resume-strip { display: flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 8px 10px; border: 1px solid #d7e4de; border-radius: 13px; background: #edf3ef; color: var(--customer-muted); font-size: 11px; }
.resume-strip span { flex: 1; }
.resume-strip button { min-height: 34px; padding: 4px 8px; border-color: #d6ddd9; border-radius: 10px; font-size: 11px; }

.page-intro { margin-bottom: 16px; }
.filter-row { display: flex; gap: 8px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.filter-row button { flex: 0 0 auto; border-color: var(--warm-line); border-radius: 999px; }
.filter-row button.active { background: var(--forest); border-color: var(--forest); color: #fff; }
.work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.work-tile { min-width: 0; position: relative; }
.work-tile .work-card { width: 100%; height: 100%; display: block; }
.work-tile.has-share .work-meta time, .work-tile.has-share .work-meta small:last-child { padding-inline-end: 40px; }
.work-tile .work-share-icon {
  position: absolute; right: 4px; bottom: 4px; padding: 0;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--forest);
}
.work-share-icon svg { width: 19px; height: 19px; }
.work-card { padding: 0; overflow: hidden; border: 1px solid rgba(18,61,53,.07); border-radius: 19px; background: var(--paper); box-shadow: 0 8px 22px rgba(24,49,45,.07); text-align: left; }
.work-card > img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #eee8de; }
.work-placeholder { display: grid; place-items: center; aspect-ratio: 1; background: #edf1ed; color: var(--customer-muted); }
.work-meta { display: block; padding: 10px 11px 12px; }
.work-meta strong, .work-meta small { display: block; }
.work-meta small { margin-top: 3px; color: var(--customer-muted); font-size: 10px; line-height: 1.4; }
.full-span { grid-column: 1/-1; }

.profile-hero { padding: 23px 20px; border-radius: 26px; background: linear-gradient(140deg,var(--forest),#1c5e50); color: #fff; position: relative; overflow: hidden; }
.profile-hero::after { content: ""; position: absolute; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; right: -56px; top: -70px; box-shadow: 0 0 0 28px rgba(255,255,255,.05); }
.profile-person { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.profile-person > span:last-child { display: flex; flex-direction: column; }
.profile-person strong { font-size: 18px; }
.profile-person small { margin-top: 3px; opacity: .74; }
.profile-avatar { width: 54px; height: 54px; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.25); border-radius: 50%; background: var(--coral); font-size: 18px; font-weight: 900; }
.account-state { position: relative; z-index: 1; display: inline-flex; margin-top: 15px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.13); font-size: 11px; font-weight: 800; }
.profile-menu { margin-top: 15px; overflow: hidden; border: 1px solid rgba(18,61,53,.08); border-radius: 22px; background: var(--paper); }
.profile-menu > button { width: 100%; min-height: 61px; display: grid; grid-template-columns: 34px 1fr 24px; gap: 9px; align-items: center; padding: 8px 15px; border: 0; border-bottom: 1px solid #eeebe4; border-radius: 0; background: transparent; text-align: left; }
.profile-menu > button:last-child { border-bottom: 0; }
.profile-menu > button > span:nth-child(2) { display: flex; flex-direction: column; }
.profile-menu strong { font-size: 13px; }
.profile-menu small { color: var(--customer-muted); font-size: 10px; }
.profile-menu b { font-size: 22px; color: #9ba6a2; }
.menu-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: #edf2ef; color: var(--forest); font-size: 11px; font-weight: 850; }
.danger-link { width: 100%; margin-top: 15px; border-color: #f0ceca; background: #fff0ee; color: #a83d36; }
.profile-actions { display: grid; gap: 10px; }
.profile-actions button { width: 100%; }

.flow-page { padding: 0 18px calc(28px + env(safe-area-inset-bottom)); background: var(--ivory); }
.flow-head { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items: center; min-height: 72px; margin: 0 -18px 14px; padding: calc(12px + env(safe-area-inset-top)) 18px 12px; background: rgba(247,242,232,.97); border-bottom: 1px solid rgba(18,61,53,.08); backdrop-filter: blur(16px); }
.flow-head > span { display: flex; flex-direction: column; text-align: center; }
.flow-head strong { font-size: 16px; }
.flow-head small { margin-top: 2px; color: var(--customer-muted); font-size: 10px; }
.back-button { width: 44px; height: 44px; padding: 0; border-color: var(--warm-line); border-radius: 14px; background: var(--paper); font-size: 21px; }
.flow-page .template-summary { display: flex; gap: 12px; align-items: center; margin: 0 0 12px; padding: 10px 12px; border-radius: 16px; background: #edf3ef; }
.flow-page .template-summary > img { width: 58px; height: 58px; object-fit: contain; border-radius: 13px; background: #fff; }
.flow-page .template-summary > span { display: flex; flex-direction: column; }
.flow-page .template-summary small { color: var(--customer-muted); }
.flow-progress { margin: 0 0 14px; }
.flow-progress > span, .flow-progress > small { color: var(--customer-muted); font-size: 10px; font-weight: 800; }
.flow-progress > div { display: flex; gap: 6px; margin: 7px 0 5px; }
.flow-progress i { height: 4px; flex: 1; border-radius: 99px; background: #dedbd2; }
.flow-progress i.done { background: var(--coral); }
.flow-page .card { padding: 16px; border: 1px solid rgba(18,61,53,.08); border-radius: 22px; background: var(--paper); box-shadow: 0 10px 28px rgba(24,49,45,.06); }
.flow-page .card h1 { font-size: 22px; }
.flow-page .primary, .customer-shell .primary, .customer-shell .button.primary { background: var(--forest); border-color: var(--forest); color: #fff; box-shadow: 0 9px 18px rgba(18,61,53,.18); }
.flow-page .workflow-primary { position: static; min-height: 52px; border-radius: 16px; }
.upload-card h2 { margin-top: 4px; }
.upload-empty { min-height: 205px; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; }
.upload-empty > span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 20px; background: var(--forest); color: #fff; font-size: 28px; box-shadow: 0 12px 24px rgba(18,61,53,.18); }
.upload-empty small { color: var(--customer-muted); }
.flow-page .upload { padding: 14px; border-color: #b9c9c3; border-radius: 20px; background: linear-gradient(145deg,#edf3ef,#fffdf8); text-align: center; }
.flow-page .file-picker { border-color: var(--warm-line); background: var(--paper); color: var(--forest); }
.intent-options legend { font-weight: 850; }
.intent-card { display: grid; grid-template-columns: 22px 1fr 18px; gap: 10px; align-items: center; min-height: 72px; padding: 12px; border-color: var(--warm-line); border-radius: 17px; background: var(--paper); }
.intent-card:has(input:checked) { border-color: var(--forest); background: var(--forest-soft); }
.intent-card b { font-size: 20px; color: #84918d; }
.consent-line { padding: 12px; border-radius: 14px; background: #fff2dc; color: #71572b; }
.extract-review > p { color: var(--customer-muted); }
.sample-compare { gap: 9px; }
.sample-compare figure { padding: 6px; border-color: var(--warm-line); background: #faf7f0; }
.sample-compare img { height: 145px; }
.result-card > img { width: 100%; max-height: none; aspect-ratio: 1; object-fit: contain; background: #eee8de; }
.preview-button { border-radius: 18px; background: #f2ede4; overflow: hidden; }
.customer-shell .notice { border-radius: 15px; background: #fff2dc; color: #71572b; }
.customer-shell .error { border-radius: 14px; }
.customer-shell input, .customer-shell select, .customer-shell textarea { border-color: #d8d7d0; border-radius: 15px; }
.customer-shell .empty { border-color: #d7d3ca; border-radius: 20px; background: var(--paper); }

.auth-page { padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); background: linear-gradient(180deg,#123d35 0 31%,#f7f2e8 31%); }
.auth-page::before { content: "贴图工坊  ·  PATTERN MOCKUP LAB"; display: block; margin: 0 auto 24px; max-width: 460px; color: #fff; font-weight: 850; letter-spacing: .04em; }
.auth-page .auth { margin: 0 auto; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 28px; background: var(--paper); box-shadow: var(--customer-shadow); }
.auth-page .auth h1 { font-size: 25px; }
.auth-page .chips { margin-bottom: 14px; }
.auth-page .chips button.active { background: var(--forest); border-color: var(--forest); color: #fff; }

@media (min-width:720px) {
  body:has(.customer-shell) { padding: 24px; background: #d8ded9; }
  .customer-shell { height: calc(100dvh - 48px); border-radius: 32px; }
}
@media (max-width:340px) {
  .category-bar { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .category-chip { font-size: 11px; letter-spacing: -.02em; }
  .customer-page { padding-left: 14px; padding-right: 14px; }
}

/* Customer review and completion use the same two-button rhythm. */
:root { --forest: #24483c; --ivory: #f8f6ee; --warm-line: #deded0; }
.brand-mark { width: 50px; height: 50px; background: transparent; box-shadow: none; }
.category-chip { border-radius: 12px; }
.paired-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.paired-actions > button, .paired-actions > .button { width: 100%; min-width: 0; min-height: 45px; padding: 7px 4px; }
.paired-actions > .primary, #drawer .paired-actions > .primary {
  background: var(--forest); border-color: var(--forest); color: #fff; box-shadow: none;
}
.customer-shell .primary, .customer-shell .button.primary { box-shadow: none; }
.flow-page { overflow-anchor: none; }
.flow-page .card { box-shadow: none; }
.flow-page .extract-review { margin-top: 10px; }
.sample-compare { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sample-compare figcaption { text-align: center; font-weight: 700; }
.sample-compare figure > button { width: 100%; margin-top: 4px; padding-inline: 3px; }
.sample-compare img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.sample-compare figure > p { min-height: 125px; display: grid; place-items: center; text-align: center; }
.upload-source { width: 100%; max-height: 260px; aspect-ratio: 1.4; object-fit: contain; margin-bottom: 10px; }
.flow-page .intent-card { grid-template-columns: 22px 1fr; min-height: 48px; }
.flow-page .result-card { margin-top: 18px; }
.result-card .paired-actions { margin-top: 14px; }
.flow-page .text-button, .customer-shell .inline-text {
  background: transparent; border: 0; color: var(--forest); box-shadow: none; min-height: 44px; font-weight: 700;
}
.flow-page .text-button { display: block; margin: 4px auto 0; }
.customer-shell .inline-text { padding: 0 4px; }
.profile-hero { background: var(--paper); border: 1px solid var(--warm-line); color: var(--customer-ink); }
.profile-hero::after { content: none; }
.profile-avatar { background: #a7473d; border-color: #f1e2dd; color: #fff; }
.profile-avatar svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.profile-login, .profile-logout { width: 100%; margin-top: 15px; }
.profile-menu strong { font-size: 15px; }
.auth-page { background: var(--ivory); }
.auth-page::before { display: none; }
.auth-page .auth { box-shadow: none; border: 1px solid var(--warm-line); }
.auth-method { margin: 10px 0 16px; }
.auth-method .active { background: var(--forest-soft); border-color: var(--forest); }
.auth-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.auth-links button { background: transparent; border: 0; }
.verification-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; }
.work-card > img { object-fit: contain; }
#drawer.image-viewer .heading { justify-content: flex-end; }
#drawer .work-detail-image { width: 100%; max-height: 65dvh; object-fit: contain; }
.customer-top h1 { margin: 0; font-size: 21px; }
.profile-person small { overflow-wrap: anywhere; }
.auth-top { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
#drawer .button.primary { background: var(--forest); border-color: var(--forest); color: #fff; }
.works-search-panel { padding: 14px; margin: 0 0 14px; border: 1px solid var(--warm-line); border-radius: 18px; background: var(--paper); }
.works-search-panel[hidden] { display: none; }
.works-search-panel label { display: block; margin-bottom: 10px; }
.works-search-panel input { width: 100%; min-width: 0; }
.works-search-panel input[type=date] { padding-inline: 5px; font-size: 13px; }
.works-search-panel .paired-actions { gap: 8px; }
.search-toggle { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; background: var(--paper); border: 1px solid var(--warm-line); border-radius: 13px; }
.search-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.work-meta time { display: block; color: var(--customer-muted); font-size: 11px; line-height: 1.5; margin-top: 4px; }
.work-meta strong { overflow-wrap: anywhere; }
.works-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0; }
.works-pagination span { font-size: 12px; }
.works-pagination button { min-height: 44px; padding: 6px 8px; background: var(--paper); border-color: var(--warm-line); }

/* Navigation owns its full intrinsic height, including the device safe area. */
.customer-shell .bottom-nav { min-height: calc(82px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; }
.customer-shell .nav-item { line-height: 1.4; }
.result-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.result-heading h1 { margin:0; }
.result-heading button { flex:none; }

@media (max-width:719px) {
 body:has(.customer-shell) { overflow:hidden; }
 .customer-shell { height:var(--customer-viewport-height,100dvh); max-height:var(--customer-viewport-height,100dvh); }
 .customer-shell > .customer-page { min-height:0; }
}

@media (max-width:719px) {
 .customer-shell input, .customer-shell textarea, .customer-shell select,
 #drawer input, #drawer textarea, #drawer select { font-size:16px; }
}

.upload-image-actions > .button, .upload-image-actions > button { display:flex; align-items:center; justify-content:center; box-sizing:border-box; margin:0; height:48px; min-height:48px; padding:8px; background:var(--paper); color:var(--forest); border:1px solid var(--warm-line); border-radius:14px; font-size:16px; font-weight:500; line-height:1.3; }
.sample-compare figure > p[role="status"] { aspect-ratio:1; min-height:0; width:100%; margin:0; }

/* Product facts and quotations share the existing ivory and forest palette. */
.template-meta .quote-spec-line, .template-summary .quote-spec-line, .work-meta .quote-spec-line {
  display: block; margin-top: 4px; color: #536359; overflow-wrap: anywhere;
}
.template-meta .quote-price, .template-summary .quote-price, .work-meta .quote-price {
  display: block; margin-top: 4px; color: var(--forest); font-weight: 700; overflow-wrap: anywhere;
}
.customer-quote-block { margin: 14px 0; }
.quote-facts {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  padding: 12px 4px; margin: 0 0 12px; border: 1px solid var(--warm-line);
  border-radius: 16px; background: var(--paper);
}
.quote-facts div { padding-inline: 8px; min-width: 0; }
.quote-facts div + div { border-inline-start: 1px solid var(--warm-line); }
.quote-facts dt { color: #536359; font-size: 12px; }
.quote-facts dd { margin: 5px 0 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.quote-form, .quote-saved-card {
  padding: 12px; margin: 0 0 12px; border: 1px solid var(--warm-line);
  border-radius: 16px; background: var(--paper);
}
.quote-form h3, .quote-saved-card h3 { margin: 0 0 10px; font-size: 18px; }
.quote-saved-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.quote-saved-heading h3 { margin: 0; }
.quote-saved-heading .inline-text { color: var(--forest); }
.quote-form .quote-quantity { display: grid; gap: 4px; margin-bottom: 8px; font-weight: 700; }
.quote-form .quote-quantity input { box-sizing: border-box; width: 100%; min-height: 44px; font-size: 16px; }
.quote-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-bottom: 10px; }
.quote-presets button { min-height: 44px; min-width: 0; padding: 4px; }
.quote-presets button[aria-pressed="true"] { color: var(--forest); background: #e7efe3; border-color: #93ab9b; font-weight: 700; }
.quote-product-title { margin: 10px 0; color: var(--customer-ink); overflow-wrap: anywhere; }
.quote-total {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  flex-wrap: wrap; border-radius: 12px; background: #e7efe3; color: var(--forest);
  padding: 10px; margin: 0 0 10px; overflow-wrap: anywhere;
}
.quote-total span { min-width: 0; }
.quote-total small { display: block; margin-top: 3px; }
.quote-total b { min-width: 0; font-size: clamp(20px, 6vw, 27px); }
.quote-feedback, .quote-image-tip { color: #455c50; font-size: 13px; margin: 8px 0; }
.quote-feedback:empty, .quote-result:empty, .quote-image-tip:empty { display: none; }
#drawer [data-action="quote-native-share"]:disabled { cursor: not-allowed; }
#drawer .quote-image-preview { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto 12px; border-radius: 14px; }
#drawer .quote-image-preview ~ .paired-actions > a { display: grid; place-items: center; text-align: center; }
.quote-history time { display: block; margin-bottom: 8px; color: #536359; font-size: 13px; }