[v-cloak] { display: none !important; }
  body > .shell { display: none !important; }
  #vue-app .offer-title-link, #vue-app .offer-title-line, body > .shell .offer-title-link { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: inherit; text-decoration: none; }
  #vue-app a.offer-title-link:hover, #vue-app a.offer-title-line:hover { text-decoration: underline; }
  #vue-app .offer-period, body > .shell .offer-period { display: inline-block; padding: 0; border-radius: 0; color: var(--theme-muted); background: transparent; font-size: 11px; font-weight: 500; }
  #vue-app .offer-category-badge, #vue-app .offer-cashback-badge, #vue-app .offer-min-spend-badge, #vue-app .offer-welcome-badge, body > .shell .offer-cashback-badge, body > .shell .offer-min-spend-badge { display: inline-block; margin-right: 6px; padding: 2px 6px; border: 0; border-radius: 6px; font-size: 12px; line-height: 1.35; vertical-align: baseline; }
  #vue-app .offer-category-badge, body > .shell .offer-category-badge { color: var(--theme-label-category-ink); background: var(--theme-label-category-bg); font-weight: 600; }
  #vue-app .offer-cashback-badge, body > .shell .offer-cashback-badge { color: var(--theme-label-cashback-ink); background: var(--theme-label-cashback-bg); font-weight: 650; }
  #vue-app .offer-min-spend-badge, body > .shell .offer-min-spend-badge { color: var(--theme-label-min-spend-ink); background: var(--theme-label-min-spend-bg); font-weight: 650; }
  #vue-app .offer-welcome-badge { color: var(--theme-label-welcome-ink); background: var(--theme-label-welcome-bg); font-weight: 650; }
  body > .shell .offer-cashback-badge { margin-top: 4px; }
  body { margin: 0; background: var(--theme-canvas); color: var(--theme-ink); font-family:Roboto,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
  #vue-app { --ink: var(--theme-ink); --muted: var(--theme-muted); --line: var(--theme-line); --brand: var(--theme-primary); min-height: 100vh; font-size: 16px; line-height: 1.5; }
  #vue-app * { box-sizing: border-box; }
  #vue-app h1, #vue-app h2, #vue-app h3, #vue-app p { margin: 0; }
  #vue-app button, #vue-app input, #vue-app select { font: inherit; }
  #vue-app a { color: inherit; }
  .app-header { background: var(--theme-surface); border: 0; box-shadow: 0 3px 18px rgba(0, 0, 0, .04); }
  .app-header-inner { max-width: 1280px; min-height: 68px; margin: auto; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .app-header-inner nav a { text-decoration: none; }
  .app-header-inner nav [aria-current] { font-weight: 650; }
  .wordmark { font-size: 20px; font-weight: 700; letter-spacing: -.6px; text-decoration: none; }
  .wordmark span { margin-left: 9px; border: 0; padding-left: 12px; font-size: 13px; font-weight: 500; letter-spacing: .5px; color: var(--theme-muted); }
  .header-section { font-size: 14px; color: var(--theme-muted); }
  .app-main { max-width: 1280px; margin: auto; padding: 28px 36px 24px; }
  .data-state { font-size: 14px; white-space: nowrap; color: var(--muted); display: flex; align-items: center; gap: 8px; }
  .data-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--theme-muted); }
  .data-state.is-ready::before { background: var(--theme-primary); }
  .app-workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 24px; align-items: start; }
  #vue-app .search-panel { position: sticky; top: 24px; border: 0; border-radius: 28px; padding: 20px; background: var(--theme-surface); box-shadow: 0 8px 28px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .03); }
  #vue-app h2 { font-size: 20px; font-weight: 650; line-height: 1.4; letter-spacing: -.2px; }
  .purchase-form { display: grid; gap: 16px; margin-top: 20px; }
  .form-field { display: grid; align-content: start; gap: 6px; }
  .form-field label, .purchase-form legend { color: #D3D6E0; font-size: 14px; font-weight: 600; }
  #vue-app input:not([type=radio]), #vue-app select, #vue-app .category-trigger { width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 0; border-radius: 18px; color: var(--ink); background: var(--theme-surface); box-shadow: 0 6px 18px rgba(0, 0, 0, .12), 0 2px 5px rgba(0, 0, 0, .06); outline-offset: 2px; }
  #vue-app select { -webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23A7AAB8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
  #vue-app input:hover, #vue-app select:hover, #vue-app .category-trigger:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .15), 0 2px 6px rgba(0, 0, 0, .07); }
  #vue-app input:focus, #vue-app select:focus, #vue-app .category-trigger:focus { box-shadow: 0 0 0 3px #FFD40033, 0 8px 22px rgba(0, 0, 0, .13); }
  #vue-app :focus-visible { outline: 2px solid var(--theme-primary); outline-offset: 3px; }
  #vue-app input::placeholder { color: var(--theme-muted); }
  .amount-field { position: relative; }
  .amount-field span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }
  #vue-app #vue-amount { padding-left: 47px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .field-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
  .category-select { position: relative; }
  .category-trigger { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 38px !important; text-align: left; cursor: pointer; }
  .category-chevron { position: absolute; top: 50%; right: 16px; width: 8px; height: 8px; border-right: 2px solid %23294332; border-bottom: 2px solid %23294332; transform: translateY(-65%) rotate(45deg); transition: transform .15s ease; }
  .category-trigger[aria-expanded=true] .category-chevron { transform: translateY(-25%) rotate(225deg); }
  .category-menu { position: absolute; top: calc(100% + 8px); right: 0; left: 0; z-index: 10; max-height: 320px; overflow-y: auto; padding: 7px; border-radius: 16px; background: var(--theme-surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .16), 0 2px 7px rgba(0, 0, 0, .06); }
  .category-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 11px; color: var(--theme-muted); background: transparent; font-size: 14px; text-align: left; cursor: pointer; }
  .category-option:hover, .category-option[aria-selected=true] { color: var(--theme-accent); background: var(--theme-accent-soft); }
  .category-option-parent { color: #D3D6E0; font-weight: 650; background: var(--theme-canvas); }
  .category-option-child { padding-left: 24px; }
  .category-option-standalone { color: var(--theme-muted); }
  .category-check { flex: 0 0 auto; color:var(--theme-accent); font-weight: 700; }
  .optional { float: right; font-weight: 400; color: var(--theme-muted); }
  .compare-button { width: 100%; min-height: 44px; border: 0; border-radius: 18px; background: var(--theme-primary); color: var(--theme-on-primary); font-weight: 600 !important; cursor: pointer; box-shadow: 0 6px 16px rgba(255, 212, 0, .18); transition: background .15s; }
  .compare-button:hover { background: var(--theme-primary-hover); }
  .compare-button:disabled { opacity: .55; cursor: wait; }
  .form-footnote { margin-top: 19px !important; padding-top: 16px; border: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
  .results-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
  .sort-label { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
  #vue-app .sort-label select { width: 196px; font-size: 16px; }
  .result-count { color: #A7AAB8; margin-left: 6px; font-weight: 400; }
  .query-context { color: var(--muted); font-size: 14px; line-height: 1.6; }
  .results-note { margin: 12px 0 16px !important; font-size: 13px; color: var(--muted); }
  .app-notice { margin: 12px 0 !important; padding: 11px 13px; border: 0; background: var(--theme-accent-soft); border-radius: 16px; font-size: 14px; color:var(--theme-accent); }
  .app-notice.is-error { background: #fff0ef; color: #972e28; }
  #vue-app .result-cards { display: grid; gap: 18px; }
  #vue-app .result-card { position: relative; padding: 0; overflow: visible; background: var(--theme-surface); border: 0; border-radius: 28px; box-shadow: 0 8px 28px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .03); }
  #vue-app .result-card.is-best { box-shadow: 0 12px 36px rgba(0, 0, 0, .11), 0 3px 8px rgba(0, 0, 0, .04); }
  .best-banner { display: flex; justify-content: space-between; gap: 12px; padding: 8px 20px; border: 0; background: var(--theme-label-condition-bg); color:var(--theme-label-condition-ink); font-size: 13px; font-weight: 600; }
  .card-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 20px; }
  .card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
  .rank-number { position: absolute; top: -11px; left: -11px; z-index: 2; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--theme-on-primary); background: var(--theme-primary); font-size: 14px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 4px 10px rgba(255, 212, 0, .18); }
  #vue-app h3 { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.35px; overflow-wrap: anywhere; }
  .eligibility { display: grid; justify-items: start; align-items: start; gap: 7px; margin-top: 8px !important; color:var(--theme-accent); font-size: 13px; }
  .eligibility-label { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; color: var(--theme-label-condition-ink); background: var(--theme-label-condition-bg); font-weight: 650; line-height: 1.2; }
  .eligibility.is-ready .eligibility-label { color: var(--theme-label-cashback-ink); background: var(--theme-label-cashback-bg); }
  .eligibility.is-unavailable .eligibility-label { color: var(--theme-label-neutral-ink); background: var(--theme-label-neutral-bg); }
  .condition-merchants { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; }
  .merchant-name { display: inline-block; max-width: 100%; padding: 4px 8px; border-radius: 2px; color: var(--theme-label-neutral-ink); background: var(--theme-label-neutral-bg); font-size: 13px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
  .saving-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; text-align: right; font-variant-numeric: tabular-nums; }
  .saving-label { color: var(--muted); font-size: 13px; }
  .saving-amount { display: block; color:var(--theme-accent); font-size: 28px; font-weight: 650; line-height: 1.4; letter-spacing: -.9px; white-space: nowrap; }
  .saving-rate { order: -1; color: var(--theme-muted); font-size: 14px; }
  .applied-offers { margin: 0 20px 12px; padding: 8px; border: 0; border-radius: 16px; background: var(--theme-canvas); }
  .offer-table-label { color: var(--theme-muted); font-size: 13px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; margin-bottom: 10px !important; }
  .applied-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 10px 12px; margin-top: 6px; border: 0; border-radius: 4px; background: var(--theme-offer-row-bg); box-shadow: none; }
  .applied-offers > .applied-offer:first-child { margin-top: 0; }
  .applied-offer > div:first-child { min-width: 0; }
  .offer-label { min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--theme-muted); overflow-wrap: anywhere; }
  #vue-app .offer-value-details { margin: 3px 0 0 !important; color: var(--theme-muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
  .offer-merchants { display: flex; flex-wrap: wrap; min-width: 0; max-width: 100%; gap: 4px 10px; margin-top: 4px; color: var(--theme-muted); font-size: 11px; }
  .offer-merchant { display: inline-block; flex: 0 1 auto; padding: 0; border: 0; border-radius: 0; color: var(--theme-muted); background: transparent; font-size: inherit; font-weight: 500; line-height: 1.35; white-space: normal; }
  .offer-value { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
  .offer-rate { color: var(--theme-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #vue-app .unified-value { font-size: 15px; line-height: 1.35; }
  #vue-app .unified-value[data-kind="category"] { display: block; font-size: 13px; color: var(--theme-muted); margin-bottom: 2px; overflow-wrap: anywhere; }
  #vue-app .unified-value[data-kind="amount"] { color:var(--theme-accent); white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
  .calculation-text { margin-top: 10px !important; font-size: 13px; line-height: 1.7; color: var(--theme-muted); overflow-wrap: anywhere; }
  #vue-app .card-details { margin: 0 20px 10px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--theme-subtle); }
  #vue-app .card-details summary { padding: 12px 0; color: var(--theme-muted); font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #vue-app .card-details summary::-webkit-details-marker { display: none; }
  .disclosure-icon { font-size: 20px; line-height: 1; font-weight: 400; color: var(--theme-muted); }
  .card-details[open] .disclosure-icon { transform: rotate(45deg); }
  .details-content { padding: 0 0 16px; color: var(--theme-muted); font-size: 14px; }
  .details-content h4 { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--theme-muted); }
  .details-content ul { padding-left: 17px; margin: 0; }
  .details-content li { padding: 3px 0; line-height: 1.7; overflow-wrap: anywhere; }
  .inactive-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 10px 0; border: 0; }
  .inactive-reason { margin-top: 4px !important; font-size: 13px; line-height: 1.6; }
  .supplemental-card { display: flex; justify-content: space-between; gap: 20px; padding: 17px 20px; border: 0; border-radius: 16px; background: var(--theme-surface); box-shadow: 0 6px 22px rgba(0, 0, 0, .06); color: var(--theme-muted); font-size: 14px; }
  .supplemental-card small { display: block; margin-top: 3px; }
  .supplemental-card > span { flex-shrink: 0; font-size: 13px; }
  .empty-state { border: 0; border-radius: 28px; padding: 64px 24px; text-align: center; background: var(--theme-surface); box-shadow: 0 8px 28px rgba(0, 0, 0, .08); }
  .empty-state p { max-width: 340px; margin: 10px auto 0 !important; color: var(--muted); font-size: 14px; line-height: 1.7; }
  #vue-app .app-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 18px; border: 0; color: var(--theme-muted); font-size: 13px; }
  @media (min-width: 1500px) { .app-main { padding-top: 40px; } }
  @media (max-width: 900px) { .app-workspace { grid-template-columns: 280px minmax(0, 1fr); gap: 20px; } .app-main, .app-header-inner { padding-left: 24px; padding-right: 24px; } .card-heading { gap: 12px; } .saving-amount { font-size: 28px; } }
  @media (max-width: 720px) { .app-workspace { grid-template-columns: 1fr; gap: 20px; } #vue-app .search-panel { position: static; padding: 20px; } .app-main { padding: 24px 16px; } .app-header-inner { min-height: 58px; padding: 0 16px; } .header-section { display: none; } .purchase-form { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; } .compare-button { grid-column: 1 / -1; } .sort-label { font-size: 13px; } .results-heading { margin-top: 0; } .app-footer { flex-direction: column; gap: 5px !important; } }
  @media (max-width: 520px) { .app-header-inner { flex-wrap:nowrap; gap:12px; } .wordmark { white-space:nowrap; font-size:18px; } .wordmark span { display:none; } .app-header-inner nav { flex-shrink:0; white-space:nowrap; font-size:13px !important; } .purchase-form { grid-template-columns: 1fr; } .results-heading { align-items: stretch; flex-direction: column; gap: 10px; } .card-heading { grid-template-columns: 1fr; gap: 8px; padding: 16px; } .saving-total { justify-content: flex-start; text-align: left; } .applied-offers { margin-left: 16px; margin-right: 16px; } .best-banner { padding: 8px 16px; } }
  @media (max-width: 360px) { .app-header-inner { flex-wrap:wrap; justify-content:flex-start; gap:4px; padding-top:10px; padding-bottom:10px; } .app-header-inner nav { width:100%; } }

/* Vast.ai-inspired dark theme shared by both public pages. */
:root {
  color-scheme:dark;
  --theme-canvas:#0A0A0A;
  --theme-surface:#14151B;
  --theme-ink:#F5F7FF;
  --theme-muted:#A7AAB8;
  --theme-line:#2B2D36;
  --theme-primary:#FFD400;
  --theme-primary-hover:#E6BD00;
  --theme-accent:#FFD400;
  --theme-accent-soft:#30280B;
  --theme-accent-hover:#42360A;
  --theme-accent-muted:#A88100;
  --theme-subtle:#18170F;
  --theme-on-primary:#17140A;
  --theme-art-ink:#17140A;
  --theme-stage:#080805;
  --theme-rank-color:var(--theme-primary);
  --theme-rank-background:#211D10;
  --theme-offer-row-bg:#27271B;
  --theme-label-category-bg:#392A1F;
  --theme-label-category-ink:#F0C09A;
  --theme-label-cashback-bg:#28351F;
  --theme-label-cashback-ink:#C5DDA0;
  --theme-label-min-spend-bg:#3D291D;
  --theme-label-min-spend-ink:#F2B58D;
  --theme-label-welcome-bg:#392833;
  --theme-label-welcome-ink:#E7B9C8;
  --theme-label-period-bg:#3A3018;
  --theme-label-period-ink:#EAD98D;
  --theme-label-upcoming-bg:#2E3422;
  --theme-label-upcoming-ink:#D4DAB1;
  --theme-label-neutral-bg:#292A24;
  --theme-label-neutral-ink:#D1CFBE;
  --theme-label-review-bg:#3A2423;
  --theme-label-review-ink:#F0B1A1;
  --theme-label-condition-bg:#3B301A;
  --theme-label-condition-ink:#EAD58A;
}

/* Shared editorial design for the two public frontend pages. */
body { background:radial-gradient(circle at 78% 5%,rgba(255,212,0,.12),transparent 32rem),radial-gradient(circle at 10% 48%,rgba(200,150,0,.08),transparent 28rem),var(--theme-canvas); color:var(--theme-ink); }
#vue-app { --ink:var(--theme-ink); --muted:var(--theme-muted); --line:var(--theme-line); --brand:var(--theme-primary); color:var(--theme-ink); background:var(--theme-canvas); font-family:Roboto,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.5; }
.app-header { background:var(--theme-canvas); border-bottom:1px solid var(--theme-line); box-shadow:none; }
.app-header-inner { max-width:1280px; min-height:65px; padding:0 40px; }
.wordmark { font-size:23px; font-weight:900; letter-spacing:-1.7px; }
.wordmark span { color:var(--theme-muted); font-size:10px; font-weight:700; letter-spacing:.13em; }
.app-header nav { gap:22px !important; color:var(--theme-muted); font-size:16px !important; }
.app-header nav a { position:relative; padding:8px 0; color:var(--theme-muted); font-weight:600; }
.app-header nav a:hover,.app-header nav a[aria-current] { color:var(--theme-ink); }
.app-header nav a[aria-current]::after { position:absolute; right:0; bottom:1px; left:0; height:2px; background:var(--theme-ink); content:""; }
.app-main { max-width:1280px; padding:0 40px 40px; }
.editorial-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(400px, .85fr); min-height:520px; gap:40px; align-items:center; padding:80px 0; }
.editorial-hero-copy { min-width:0; padding:0 0 12px; }
.editorial-kicker { display:flex; align-items:center; gap:10px; color:var(--theme-muted); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.kicker-dot { width:8px; height:8px; border-radius:50%; background:var(--theme-ink); }
#vue-app .editorial-hero h1 { margin:31px 0 24px; font-size:clamp(42px,5.4vw,68px); font-weight:700; line-height:1.1; letter-spacing:-.045em; }
.editorial-hero h1 em { font-family:inherit; font-size:.96em; font-style:normal; font-weight:700; letter-spacing:inherit; white-space:nowrap; }
.editorial-intro { max-width:680px; color:var(--theme-ink); font-size:16px; line-height:26px; }
.editorial-jump { display:inline-flex; align-items:center; gap:48px; margin-top:32px; padding:14px 19px; border:1px solid transparent; border-radius:100px; color:var(--theme-on-primary) !important; background:var(--theme-primary); font-size:16px; font-weight:600; text-decoration:none; transition:background .18s,color .18s,transform .18s; }
.editorial-jump span { font-size:17px; line-height:1; }
.editorial-jump:hover { background:var(--theme-primary-hover); color:var(--theme-on-primary) !important; transform:translateY(-2px); }
.editorial-art { position:relative; min-height:440px; overflow:hidden; border-radius:8px; background:radial-gradient(circle at 72% 28%,rgba(255,212,0,.24),transparent 40%),radial-gradient(circle at 28% 76%,rgba(200,150,0,.16),transparent 38%),var(--theme-stage); isolation:isolate; }
.editorial-art::before { position:absolute; width:580px; height:580px; top:-250px; right:-190px; border:1px solid #302B17; border-radius:50%; content:""; }
.art-orbit { position:absolute; border:1px solid #383019; border-radius:50%; }
.art-orbit-one { width:400px; height:400px; left:-180px; bottom:-220px; }
.art-orbit-two { width:290px; height:290px; right:8%; bottom:-210px; }
.art-card { position:absolute; width:58%; height:44%; left:20%; top:25%; border-radius:15px; }
.art-card-back { transform:translate(35px,-36px) rotate(13deg); background:var(--theme-accent-muted); }
.art-card-front { display:flex; flex-direction:column; justify-content:space-between; padding:21px 24px; transform:rotate(-12deg); background:var(--theme-accent); color:var(--theme-art-ink); box-shadow:0 25px 45px #0007; }
.art-card-top,.art-card-bottom { display:flex; justify-content:space-between; gap:8px; font-size:10px; font-weight:800; letter-spacing:.1em; }
.art-card-top b { font-size:18px; line-height:.7; }
.art-card-center { font-size:clamp(30px,3.3vw,58px); font-weight:900; line-height:.84; letter-spacing:-.09em; }
.art-caption { position:absolute; right:24px; bottom:20px; left:24px; color:var(--theme-accent); font-size:11px; letter-spacing:.06em; text-align:right; }
.editorial-section-line { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid var(--theme-line); color:var(--theme-muted); font-size:11px; font-weight:800; letter-spacing:.13em; }
.app-workspace { grid-template-columns:320px minmax(0,1fr); gap:34px; margin-top:28px; }
.editorial-panel-index { margin-bottom:16px; color:var(--theme-muted); font-size:10px; font-weight:800; letter-spacing:.16em; }
#vue-app .search-panel { top:20px; border:1px solid var(--theme-line); border-radius:12px; padding:28px; background:var(--theme-surface); box-shadow:none; }
#vue-app .search-panel h2 { font-size:32px; font-weight:600; letter-spacing:-.04em; line-height:1.2; }
.purchase-form { gap:19px; margin-top:28px; }
.form-field label,.purchase-form legend { color:var(--theme-ink); font-size:14px; font-weight:600; }
#vue-app input:not([type=radio]),#vue-app select,#vue-app .category-trigger { min-height:48px; padding-inline:16px; border:1px solid var(--theme-line); border-radius:999px; background-color:var(--theme-surface); box-shadow:none; }
#vue-app input:hover,#vue-app select:hover,#vue-app .category-trigger:hover { border-color:#888; box-shadow:none; }
#vue-app input:focus,#vue-app select:focus,#vue-app .category-trigger:focus { border-color:var(--theme-ink); box-shadow:0 0 0 3px var(--theme-accent); }
#vue-app :focus-visible { outline:2px solid var(--theme-ink); outline-offset:3px; }
.category-menu { border:1px solid var(--theme-line); border-radius:4px; box-shadow:0 18px 35px #0002; }
.category-option { border-radius:2px; }
.category-option:hover,.category-option[aria-selected=true] { color:var(--theme-ink); background:var(--theme-accent-soft); }
.category-check { color:var(--theme-ink); }
.compare-button { min-height:48px; border-radius:999px; background:var(--theme-primary); color:var(--theme-on-primary); box-shadow:none; font-size:16px; font-weight:600 !important; letter-spacing:0; }
.compare-button:hover { background:var(--theme-primary-hover); }
.form-footnote { border-top:1px solid var(--theme-line); }
.results-heading { align-items:flex-start; margin-bottom:20px; padding:4px 0 17px; border-bottom:1px solid var(--theme-line); }
.query-context { color:var(--theme-muted); font-size:16px; }
#vue-app .sort-label select { width:185px; min-height:38px; font-size:13px; }
#vue-app .result-cards { gap:12px; }
#vue-app .result-card,#vue-app .empty-state { border:1px solid var(--theme-line); border-radius:12px; box-shadow:none; background:var(--theme-surface); }
#vue-app .result-card:hover { border-color:var(--theme-line); }
#vue-app .result-card.is-best { border-color:var(--theme-line); background:var(--theme-rank-background); box-shadow:none; }
#vue-app .result-card.is-best > .card-heading { background:var(--theme-rank-background); }
#vue-app .result-card.is-best .rank-number { display:inline-block; padding:2px 7px; border-radius:2px; color:var(--theme-on-primary); background:var(--theme-rank-color); font-size:11px; font-weight:800; }
#vue-app .result-card.is-best .rank-number::after { content:""; }
.best-banner { border-bottom:1px solid var(--theme-line); background:var(--theme-label-condition-bg); color:var(--theme-label-condition-ink); }
.card-heading { padding:25px 26px; }
.rank-number { position:static; display:inline; width:auto; height:auto; padding:0; border-radius:0; color:var(--theme-muted); background:transparent; box-shadow:none; font-size:12px; }
.rank-number::after { content:' /'; }
#vue-app h3 { font-size:24px; font-weight:700; letter-spacing:-.045em; }
.saving-amount { color:var(--theme-accent); font-size:32px; font-weight:750; }
.eligibility-label { border-radius:2px; }
.applied-offers,#vue-app .card-details { border-radius:3px; background:var(--theme-subtle); }
.applied-offer { border-radius:2px; }
.calculation-summary { border-radius:3px !important; }
.supplemental-card { border:1px solid var(--theme-line); border-radius:4px; box-shadow:none; }
#vue-app .app-footer { border-top:1px solid var(--theme-line); color:var(--theme-muted); }
#vue-app #savings-only:checked { background:var(--theme-primary); }
.pagination button { border:1px solid var(--theme-line); border-radius:3px; box-shadow:none; }
@media(max-width:1100px) { .editorial-hero { grid-template-columns:minmax(0,1fr) minmax(320px,.8fr); min-height:480px; gap:24px; } #vue-app .editorial-hero h1 { font-size:clamp(42px,5.4vw,68px); } .art-card { width:65%; left:17%; } }
@media(max-width:800px) { .app-header-inner,.app-main { padding-left:22px; padding-right:22px; } .editorial-hero { grid-template-columns:1fr; gap:22px; padding:60px 0; } .editorial-art { min-height:340px; } .art-card { width:48%; height:55%; left:26%; top:20%; } .app-workspace { grid-template-columns:1fr; gap:24px; } #vue-app .search-panel { position:static; max-height:none; overflow:visible; } }
@media(max-width:520px) { .app-header-inner { min-height:65px; padding-left:16px; padding-right:16px; } .app-main { padding-left:16px; padding-right:16px; } .app-header nav { gap:10px !important; } #vue-app .editorial-hero h1 { margin-top:22px; font-size:clamp(40px,10vw,54px); } .editorial-hero h1 em { white-space:normal; } .editorial-intro { font-size:15px; } .editorial-art { min-height:280px; } .art-card { width:65%; height:52%; left:18%; top:23%; padding:16px; } .art-card-center { font-size:36px; } .art-card-top,.art-card-bottom { font-size:8px; } .editorial-section-line { font-size:9px; } .card-heading { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .editorial-jump { transition:none; } }

/* Common navigation and result layout on both screens. */
#vue-app .app-header-inner { padding-top:0; padding-bottom:0; }
#vue-app .app-header nav { display:flex; align-items:center; white-space:nowrap; }
#vue-app .result-panel { min-width:0; scroll-margin-top:24px; }
#vue-app .search-panel { max-height:calc(100vh - 40px); overflow-y:auto; scrollbar-width:thin; scroll-margin-top:24px; }
#vue-app .results-heading { align-items:flex-end; gap:20px; }
#vue-app .results-heading h2 { margin:0 0 7px; font-size:clamp(32px,3.8vw,48px); line-height:1.2; font-weight:600; letter-spacing:-.04em; }
#vue-app .results-heading .editorial-panel-index { margin-bottom:10px; }
#vue-app .result-controls { display:flex; align-items:center; justify-content:flex-end; gap:18px; margin-left:auto; }
#vue-app .pagination button { border:1px solid var(--theme-line); border-radius:3px; box-shadow:none; color:var(--ink); }
#vue-app .offer-category-badge { color:var(--theme-label-category-ink); background:var(--theme-label-category-bg); border-radius:2px; }
#vue-app .merchant-name { color:var(--theme-label-neutral-ink); background:var(--theme-label-neutral-bg); }
#vue-app .offer-eligibility { color:var(--theme-label-review-ink); background:var(--theme-label-review-bg); border-radius:2px; }
#vue-app .saving-amount { color:var(--theme-accent); }
@media(max-width:800px) { #vue-app .search-panel { max-height:none; overflow:visible; } }
@media(max-width:720px) { #vue-app .result-controls { width:100%; justify-content:flex-start; flex-wrap:wrap; } #vue-app .results-heading { align-items:stretch; flex-direction:column; } }

/* Closed disclosures share one row; open sections use the card width. */
#vue-app .card-disclosures { display:flex; flex-wrap:wrap; gap:6px; margin:0 20px 16px; }
#vue-app .card-disclosures > .card-details { flex:1 1 0; min-width:0; margin:0; padding:0; border:1px solid var(--line); border-radius:3px; background:var(--theme-subtle); }
#vue-app .card-disclosures > .card-details > summary { min-height:46px; height:100%; padding:12px; gap:8px; color:var(--ink); font-size:12px; font-weight:600; line-height:1.4; }
#vue-app .card-disclosures > .card-details > summary:hover { background:var(--theme-accent-soft); }
#vue-app .card-disclosures > .card-details > summary::after { content:'+'; flex:0 0 auto; font-size:18px; line-height:1; font-weight:400; }
#vue-app .card-disclosures > .card-details > summary > .disclosure-icon { display:none; }
#vue-app .card-disclosures > .card-details > summary .result-count { display:inline-block; margin-left:4px; padding:1px 5px; border-radius:2px; color:var(--theme-accent); background:var(--theme-accent-soft); font-size:10px; }
#vue-app .card-disclosures > .card-details[open] { flex-basis:100%; order:1; background:var(--theme-surface); }
#vue-app .card-disclosures > .card-details[open] > summary { height:auto; border-bottom:1px solid var(--line); background:var(--theme-accent-soft); }
#vue-app .card-disclosures > .card-details[open] > summary:hover { background:var(--theme-accent-hover); }
#vue-app .card-disclosures > .card-details[open] > summary::after { content:'−'; }
#vue-app .card-disclosures > .card-details > .details-content { padding:16px; overflow-wrap:anywhere; }
@media(max-width:520px) {
  #vue-app .card-disclosures { margin:0 16px 16px; gap:4px; }
  #vue-app .card-disclosures > .card-details > summary { position:relative; display:block; min-height:76px; padding:8px 6px 22px; gap:4px; font-size:11px; }
  #vue-app .card-disclosures > .card-details > summary::after { position:absolute; right:6px; bottom:6px; font-size:15px; }
  #vue-app .card-disclosures > .card-details[open] > summary { display:flex; min-height:44px; padding:8px 12px; }
  #vue-app .card-disclosures > .card-details[open] > summary::after { position:static; }
}

/* Readable comparison rows and stable disclosure navigation. */
#vue-app h3 { font-size:22px; line-height:1.35; letter-spacing:-.025em; }
#vue-app .card-heading { padding:22px 20px; gap:20px; }
#vue-app .saving-total { flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:2px; }
#vue-app .saving-rate { order:0; font-size:13px; }
#vue-app .saving-amount { line-height:1.15; letter-spacing:-.035em; }
#vue-app .eligibility { display:flex; flex-wrap:wrap; gap:6px; }
#vue-app .applied-offers { margin:0 20px 16px; padding:0; background:transparent; }
#vue-app .applied-offer { padding:12px 14px; }
#vue-app .offer-title-link { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
#vue-app .offer-title-link > span:first-child { flex:0 1 auto; }
#vue-app .offer-period { font-size:12px; line-height:1.5; }
#vue-app .offer-value-details, #vue-app .offer-merchants { font-size:12px; line-height:1.5; }
#vue-app .offer-cap { margin-top:10px; padding-top:8px; padding-bottom:0; border:0; }
#vue-app .offer-cap-caption { display:flex; justify-content:space-between; gap:12px; margin-bottom:5px; font-size:12px; color:var(--theme-muted); font-variant-numeric:tabular-nums; }
#vue-app .offer-cap-chart { display:block; }
#vue-app .offer-cap-track { height:3px; border:0; background:var(--theme-line); }
#vue-app .card-disclosures { display:grid; grid-template-columns:repeat(var(--disclosure-count,4),minmax(0,1fr)); gap:6px; }
#vue-app .card-disclosures > .card-details { display:contents; }
#vue-app .card-disclosures > .card-details::details-content { display:contents; }
#vue-app .card-disclosures > .card-details > summary { grid-row:1; min-height:48px; height:auto; padding:10px; border:1px solid var(--theme-line); border-radius:4px; background:var(--theme-subtle); font-size:12px; }
#vue-app .card-disclosures > .card-details[open] > summary { color:var(--theme-on-primary); background:var(--theme-primary); border-color:var(--theme-primary); }
#vue-app .card-disclosures > .card-details[open] > summary:hover { background:var(--theme-primary-hover); }
#vue-app .card-disclosures > .card-details > .details-content { grid-column:1/-1; grid-row:2; padding:18px; border-radius:4px; background:var(--theme-surface); }
#vue-app .card-disclosures > .card-details:not([open]) > .details-content { display:none; }
@media(max-width:520px) {
  #vue-app h3 { font-size:20px; }
  #vue-app .card-heading { grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:14px; padding:18px 16px; }
  #vue-app .saving-amount { font-size:28px; }
  #vue-app .applied-offers { margin-inline:16px; }
  #vue-app .offer-label { display:block; }
  #vue-app .offer-category-badge, #vue-app .offer-welcome-badge { display:inline-block; margin-bottom:5px; }
  #vue-app .card-disclosures > .card-details > summary, #vue-app .card-disclosures > .card-details[open] > summary { display:flex; align-items:center; min-height:66px; padding:8px 6px; font-size:12px; }
  #vue-app .card-disclosures > .card-details > summary::after { position:static; font-size:16px; }
}

@media(max-width:720px) { #vue-app .purchase-form > .form-field:has(#vue-merchant) { grid-column:1/-1; } }

#vue-app .app-header nav .language-switch { width:auto; min-height:36px; padding:6px 30px 6px 10px; margin-left:8px; font-size:13px; border-radius:6px; }
html[lang="zh-Hant"] #vue-app { font-family:Roboto,"PingFang TC","Microsoft JhengHei",sans-serif; }
html[lang="zh-Hant"] #vue-app h1, html[lang="zh-Hant"] #vue-app h2, html[lang="zh-Hant"] #vue-app h3 { letter-spacing:0; }
@media(max-width:620px) { #vue-app .app-header-inner { flex-wrap:wrap; padding-block:12px; gap:10px; } #vue-app .app-header nav { flex:1 1 100%; justify-content:space-between; } #vue-app .wordmark span { display:none; } }

/* Card art uses trimmed card bodies; related promotion cards use 100px WebP files. */
#vue-app .card-identity { display:flex; align-items:center; justify-content:space-between; gap:18px; min-width:0; }
#vue-app .card-identity > div { flex:1; min-width:0; }
.credit-card-image { display:block; width:160px; max-width:35%; height:auto; object-fit:contain; flex-shrink:0; }
.result-top > .credit-card-image, .result-card > .credit-card-image { float:left; margin:0 18px 12px 0; }
.related-card-list { display:flex; flex-wrap:wrap; gap:12px; }
.related-card { display:flex; align-items:center; gap:10px; max-width:100%; }
.credit-card-thumb { display:block; width:100px; height:auto; object-fit:contain; flex-shrink:0; }
@media(max-width:520px) {
  #vue-app .card-identity { gap:12px; }
  .credit-card-image { width:120px; }
  #vue-app .supplemental-card { flex-wrap:wrap; }
  .related-card { width:100%; }
}

/* Keep card art beside the title, offers, and detail controls. */
#vue-app .result-card:has(> .credit-card-image) { display:grid; grid-template-columns:180px minmax(0,1fr); column-gap:18px; align-items:start; }
#vue-app .result-card > .credit-card-image { grid-column:1; grid-row:1 / span 3; float:none; width:160px; max-width:100%; margin:22px 0 0 20px; }
#vue-app .result-card:has(> .credit-card-image) > :not(.credit-card-image) { grid-column:2; min-width:0; }
#vue-app .result-card:has(> .credit-card-image) > .card-heading { padding-left:0; }
#vue-app .result-card:has(> .credit-card-image) > .applied-offers,
#vue-app .result-card:has(> .credit-card-image) > .card-disclosures { margin-left:0; }
@media(max-width:520px) {
  #vue-app .result-card:has(> .credit-card-image) { grid-template-columns:96px minmax(0,1fr); column-gap:12px; }
  #vue-app .result-card > .credit-card-image { width:80px; margin:18px 0 0 16px; grid-row:1 / span 2; }
  #vue-app .result-card:has(> .credit-card-image) > .card-heading { grid-template-columns:minmax(0,1fr); }
  #vue-app .result-card:has(> .credit-card-image) .saving-total { align-items:flex-start; text-align:left; }
  #vue-app .result-card:has(> .credit-card-image) .offer-row-summary { grid-template-columns:minmax(0,1fr); }
  #vue-app .result-card:has(> .credit-card-image) > .card-disclosures { grid-column:1 / -1; margin-left:16px; }
}