:root {
  --bg: #f5f5f7;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #ffffff;
  --text: #171719;
  --muted: #6e6e73;
  --line: rgba(23, 23, 25, 0.1);
  --line-strong: rgba(23, 23, 25, 0.16);
  --green: #15803d;
  --green-dark: #0d5d2d;
  --green-soft: #e9f7ee;
  --orange: #ff7a1a;
  --orange-soft: #fff0e4;
  --red: #e5484d;
  --blue: #0a84ff;
  --yellow: #f4b400;
  --shadow-lg: 0 28px 70px rgba(31, 35, 32, 0.15), 0 8px 24px rgba(31, 35, 32, 0.08);
  --shadow-md: 0 14px 38px rgba(31, 35, 32, 0.12), 0 3px 12px rgba(31, 35, 32, 0.06);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 10% -10%, rgba(21, 128, 61, 0.09), transparent 34%),
    radial-gradient(circle at 95% 12%, rgba(255, 122, 26, 0.08), transparent 28%),
    var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid rgba(10,132,255,.35); outline-offset: 3px; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; padding-bottom: calc(88px + var(--safe-bottom)); }
.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(245, 245, 247, .74);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.62);
}
.brand-lockup { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; min-width:0; }
.brand-lockup > span:last-child { display:grid; line-height:1.08; }
.brand-lockup strong { font-size:14px; letter-spacing:-.01em; }
.brand-lockup small { color:var(--muted); font-size:11px; margin-top:3px; }
.brand-mark {
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(145deg, #169447, #0b622e); color:white; font-size:13px; font-weight:800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px rgba(21,128,61,.22);
}
.top-actions { display:flex; align-items:center; gap:10px; }
.live-status { border:0; background:rgba(255,255,255,.7); padding:9px 11px; border-radius:999px; display:flex; align-items:center; gap:7px; box-shadow:inset 0 0 0 1px var(--line); font-size:11px; cursor:pointer; }
.live-status strong { font-size:12px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#26c763; box-shadow:0 0 0 4px rgba(38,199,99,.12); animation:pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 7px rgba(38,199,99,0); } }
.icon-button { border:0; background:transparent; cursor:pointer; }
.profile-button { width:38px; height:38px; border-radius:50%; background:#242426; color:white; display:grid; place-items:center; font-size:12px; font-weight:700; }

.workspace { width:min(1440px, 100%); margin:0 auto; display:grid; grid-template-columns:1fr; }
.desktop-panel { display:none; }
.content-stage { min-width:0; }
.view { display:none; padding:16px 16px 28px; }
.view.is-active { display:block; animation:view-in .28s ease both; }
@keyframes view-in { from { opacity:0; transform:translateY(7px); } }

.mobile-section-head, .section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin:2px auto 14px; max-width:680px; }
.mobile-section-head h1, .section-head h1 { margin:2px 0 0; font-size:clamp(25px, 7vw, 36px); line-height:1.04; letter-spacing:-.045em; }
.section-head { max-width:1080px; align-items:flex-end; margin-bottom:22px; }
.section-head .muted { max-width:520px; margin-top:8px; }
.eyebrow { margin:0; color:var(--green); font-size:11px; line-height:1.2; font-weight:760; letter-spacing:.08em; text-transform:uppercase; }
.muted { color:var(--muted); }
.filter-button { width:42px; height:42px; flex:0 0 auto; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.75); display:grid; place-items:center; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.04); }
.filter-button svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }

.progress-row { max-width:680px; margin:0 auto 12px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; font-weight:650; }
.progress-track { height:5px; flex:1; border-radius:99px; background:rgba(23,23,25,.08); overflow:hidden; }
.progress-track span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, var(--green), #39b96a); transition:width .35s ease; }

.deck-wrap { min-height:min(61vh, 620px); max-width:680px; margin:0 auto; position:relative; }
.deck { width:100%; height:min(61vh, 620px); min-height:490px; position:relative; perspective:1200px; }
.offer-card {
  position:absolute; inset:0; overflow:hidden; border-radius:var(--radius-xl); background:var(--surface-solid);
  box-shadow:var(--shadow-lg); transform-origin:50% 95%; user-select:none; touch-action:none; cursor:grab;
  transition:transform .28s cubic-bezier(.22,.8,.23,1), opacity .25s ease;
}
.offer-card:active { cursor:grabbing; }
.offer-card:nth-last-child(2) { transform:translateY(8px) scale(.972); opacity:.94; }
.offer-card:nth-last-child(3) { transform:translateY(15px) scale(.944); opacity:.78; }
.offer-card.is-dragging { transition:none; }
.offer-card.exit-left { transform:translate(-140%, 28px) rotate(-16deg) !important; opacity:0; }
.offer-card.exit-right { transform:translate(140%, 28px) rotate(16deg) !important; opacity:0; }
.card-media { position:absolute; inset:0; background:var(--product-bg, #e7f3ea); overflow:hidden; }
.card-media::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 34%, rgba(255,255,255,.8), transparent 30%), linear-gradient(to bottom, transparent 52%, rgba(0,0,0,.06)); }
.card-media img { position:absolute; width:74%; height:58%; object-fit:contain; left:13%; top:8%; filter:drop-shadow(0 24px 18px rgba(22,30,25,.17)); transition:transform .4s ease; }
.offer-card:hover .card-media img { transform:translateY(-4px) scale(1.015); }
.media-top { position:absolute; left:16px; right:16px; top:16px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; z-index:2; }
.badge-row { display:flex; gap:7px; flex-wrap:wrap; }
.glass-badge { padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.72), 0 4px 14px rgba(0,0,0,.06); font-size:11px; font-weight:760; }
.glass-badge.discount { color:var(--green-dark); }
.glass-badge.urgent { color:#a33c00; }
.card-more { width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.72); backdrop-filter:blur(18px); display:grid; place-items:center; cursor:pointer; font-size:19px; line-height:1; }
.swipe-stamp { position:absolute; top:92px; z-index:4; border:4px solid; border-radius:12px; padding:7px 11px; font-size:24px; font-weight:900; letter-spacing:.08em; opacity:0; pointer-events:none; }
.swipe-stamp.no { left:24px; color:var(--red); transform:rotate(-10deg); }
.swipe-stamp.yes { right:24px; color:var(--green); transform:rotate(10deg); }
.card-info {
  position:absolute; z-index:3; left:12px; right:12px; bottom:12px; border-radius:24px;
  padding:18px 18px 16px; background:rgba(255,255,255,.88); backdrop-filter:saturate(140%) blur(30px); -webkit-backdrop-filter:saturate(140%) blur(30px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.74), 0 10px 28px rgba(0,0,0,.1);
}
.card-brand-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand-name { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.085em; }
.offer-rating { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:750; }
.offer-rating svg { width:14px; fill:var(--yellow); stroke:var(--yellow); }
.card-info h2 { margin:5px 0 11px; max-width:92%; font-size:clamp(23px, 6.2vw, 34px); line-height:1.02; letter-spacing:-.045em; }
.card-specs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px; }
.card-specs span { padding:6px 8px; border-radius:9px; background:rgba(23,23,25,.055); font-size:10px; color:#4e4e53; font-weight:650; }
.remaining-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:7px; }
.remaining-head strong { font-size:13px; }
.remaining-head span { color:var(--orange); font-weight:700; }
.remaining-track { height:7px; border-radius:99px; background:#ebebed; overflow:hidden; }
.remaining-track span { display:block; width:var(--remaining); height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--green), var(--orange)); }
.card-social-proof { margin-top:11px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:10px; }
.avatar-stack { display:flex; align-items:center; }
.avatar-stack span { width:22px; height:22px; margin-right:-6px; border-radius:50%; display:grid; place-items:center; background:#e3e3e8; border:2px solid white; color:#555; font-size:8px; font-weight:800; }
.avatar-stack + span { margin-left:8px; }
.live-viewers { color:#9a3c00; font-weight:700; white-space:nowrap; }

.swipe-actions { max-width:540px; margin:17px auto 0; display:flex; align-items:center; justify-content:center; gap:16px; }
.swipe-button { border:0; background:white; box-shadow:var(--shadow-md); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .16s ease, box-shadow .16s ease; }
.swipe-button:active { transform:scale(.94); box-shadow:0 6px 14px rgba(0,0,0,.12); }
.swipe-button svg { fill:none; stroke:currentColor; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round; }
.swipe-no, .swipe-yes { width:112px; height:58px; border-radius:22px; gap:7px; font-size:13px; font-weight:750; }
.swipe-no { color:var(--red); }
.swipe-yes { color:var(--green); }
.swipe-no svg, .swipe-yes svg { width:22px; }
.swipe-save { width:50px; height:50px; border-radius:18px; color:#57575d; }
.swipe-save svg { width:20px; }
.swipe-helper { text-align:center; color:#98989d; font-size:10px; margin:11px 0 0; }

.bottom-nav {
  position:fixed; z-index:40; left:50%; bottom:max(10px, var(--safe-bottom)); transform:translateX(-50%);
  width:min(420px, calc(100% - 24px)); height:68px; padding:7px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px;
  border:1px solid rgba(255,255,255,.75); background:rgba(248,248,250,.78); backdrop-filter:saturate(180%) blur(28px); -webkit-backdrop-filter:saturate(180%) blur(28px);
  border-radius:23px; box-shadow:0 18px 50px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.03);
}
.nav-item { position:relative; border:0; border-radius:17px; background:transparent; color:#75757b; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:9px; font-weight:670; cursor:pointer; }
.nav-item svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-item.is-active { background:#202022; color:white; box-shadow:0 5px 13px rgba(0,0,0,.18); }
.nav-item-subtle { opacity:.72; }
.nav-badge { position:absolute; z-index:2; top:4px; right:24%; min-width:17px; height:17px; padding:0 4px; border-radius:9px; display:grid; place-items:center; background:var(--orange); color:white; font-size:9px; border:2px solid #f8f8fa; }

.primary-button, .secondary-button, .text-button { border:0; cursor:pointer; font-weight:750; }
.primary-button { min-height:50px; padding:0 18px; border-radius:16px; background:#1d1d1f; color:white; box-shadow:0 8px 18px rgba(0,0,0,.15); }
.primary-button:hover { background:#000; }
.secondary-button { min-height:44px; padding:0 16px; border-radius:14px; background:white; box-shadow:inset 0 0 0 1px var(--line), 0 4px 11px rgba(0,0,0,.05); }
.secondary-button.compact { font-size:12px; }
.text-button { background:transparent; color:var(--muted); min-height:42px; }
.full { width:100%; }
.empty-state { height:min(61vh,620px); min-height:490px; padding:34px; border-radius:var(--radius-xl); background:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow-md); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.empty-state h2 { margin:7px 0 6px; font-size:30px; letter-spacing:-.04em; }
.empty-state p:not(.eyebrow) { color:var(--muted); max-width:380px; line-height:1.5; }
.empty-state .primary-button { margin-top:15px; }
.empty-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:22px; background:var(--green-soft); color:var(--green); font-size:30px; margin-bottom:20px; }

.saved-summary { max-width:1080px; margin:0 auto 18px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.summary-card { padding:16px; border-radius:18px; background:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.9); box-shadow:0 6px 18px rgba(0,0,0,.05); }
.summary-card span { display:block; color:var(--muted); font-size:10px; }
.summary-card strong { display:block; margin-top:4px; font-size:22px; letter-spacing:-.03em; }
.saved-list { max-width:1080px; margin:0 auto; display:grid; gap:12px; }
.saved-card { display:grid; grid-template-columns:92px 1fr; gap:14px; padding:12px; border-radius:22px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.95); box-shadow:0 9px 24px rgba(0,0,0,.06); }
.saved-image { border-radius:16px; overflow:hidden; background:var(--product-bg); display:grid; place-items:center; min-height:112px; }
.saved-image img { width:88%; height:92px; object-fit:contain; filter:drop-shadow(0 10px 10px rgba(0,0,0,.12)); }
.saved-main { min-width:0; }
.saved-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.saved-top h3 { margin:3px 0 0; font-size:17px; line-height:1.08; letter-spacing:-.025em; }
.update-pill { flex:0 0 auto; padding:6px 8px; border-radius:999px; background:var(--orange-soft); color:#a14300; font-size:9px; font-weight:800; }
.saved-meta { margin:9px 0; display:flex; flex-wrap:wrap; gap:6px; color:var(--muted); font-size:10px; }
.change-line { display:flex; align-items:flex-start; gap:7px; padding:8px 10px; border-radius:12px; background:#f6f6f8; font-size:10px; line-height:1.35; }
.change-line strong { color:var(--green-dark); }
.saved-actions { margin-top:10px; display:flex; gap:8px; }
.saved-actions button { min-height:37px; padding:0 12px; border:0; border-radius:11px; font-size:10px; font-weight:760; cursor:pointer; }
.saved-actions .primary-mini { background:#1d1d1f; color:white; }
.saved-actions .secondary-mini { background:#ededf0; }
.empty-saved { padding:40px 24px; border-radius:24px; background:rgba(255,255,255,.75); text-align:center; color:var(--muted); }
.empty-saved h2 { color:var(--text); }

.grid-toolbar { max-width:1080px; margin:0 auto 14px; display:flex; align-items:center; gap:8px; overflow:auto; scrollbar-width:none; }
.grid-toolbar::-webkit-scrollbar { display:none; }
.grid-toolbar > span { margin-right:auto; color:var(--muted); font-size:12px; font-weight:650; white-space:nowrap; }
.filter-chip { border:1px solid var(--line); background:rgba(255,255,255,.7); border-radius:999px; padding:8px 11px; font-size:10px; cursor:pointer; white-space:nowrap; }
.filter-chip.is-active { background:#1d1d1f; color:white; border-color:#1d1d1f; }
.offer-grid { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.grid-card { position:relative; min-width:0; overflow:hidden; border-radius:20px; background:white; box-shadow:0 8px 25px rgba(0,0,0,.07); cursor:pointer; }
.grid-card-image { height:150px; background:var(--product-bg); display:grid; place-items:center; position:relative; }
.grid-card-image img { width:82%; height:125px; object-fit:contain; filter:drop-shadow(0 12px 12px rgba(0,0,0,.15)); }
.grid-discount { position:absolute; left:8px; top:8px; padding:6px 7px; border-radius:9px; background:rgba(255,255,255,.8); backdrop-filter:blur(14px); color:var(--green-dark); font-size:9px; font-weight:800; }
.grid-card-body { padding:12px; }
.grid-card-body h3 { margin:3px 0 9px; font-size:14px; line-height:1.1; letter-spacing:-.02em; }
.grid-card-meta { display:flex; justify-content:space-between; gap:5px; color:var(--muted); font-size:9px; }
.grid-card-meta strong { color:var(--orange); }

.scrim { position:fixed; inset:0; z-index:70; background:rgba(13,13,15,.32); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); animation:fade-in .2s ease; }
@keyframes fade-in { from { opacity:0; } }
.sheet { position:fixed; z-index:80; left:0; right:0; bottom:0; max-height:92vh; overflow:auto; padding:18px 18px calc(22px + var(--safe-bottom)); border-radius:28px 28px 0 0; background:rgba(252,252,253,.96); backdrop-filter:blur(35px); -webkit-backdrop-filter:blur(35px); box-shadow:0 -20px 60px rgba(0,0,0,.2); animation:sheet-in .28s cubic-bezier(.22,.8,.23,1); }
@keyframes sheet-in { from { transform:translateY(104%); } }
.sheet-handle { width:38px; height:5px; border-radius:99px; background:#d4d4d8; margin:0 auto 15px; }
.sheet-close { position:absolute; right:15px; top:14px; width:32px; height:32px; border:0; border-radius:50%; background:#ededf0; color:#666; font-size:22px; line-height:1; cursor:pointer; }
.sheet-heading h2, .filter-sheet h2 { margin:5px 0 16px; font-size:27px; letter-spacing:-.04em; }
.decision-product { margin:4px 35px 16px 0; display:grid; grid-template-columns:54px 1fr; gap:11px; align-items:center; }
.decision-product img { width:54px; height:54px; padding:4px; border-radius:14px; object-fit:contain; background:var(--product-bg); }
.decision-product h3 { margin:2px 0 0; font-size:15px; }
.mode-segment { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; margin-bottom:18px; border-radius:14px; background:#ebebee; }
.mode-segment button { min-height:41px; border:0; border-radius:11px; background:transparent; color:var(--muted); font-size:12px; font-weight:700; cursor:pointer; }
.mode-segment button.is-active { background:white; color:var(--text); box-shadow:0 3px 9px rgba(0,0,0,.08); }
.field-label { display:block; margin:0 0 7px; font-size:11px; font-weight:760; }
.quantity-control { height:54px; display:grid; grid-template-columns:48px 52px 1fr 48px; align-items:center; border-radius:15px; background:white; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.quantity-control button { height:100%; border:0; background:transparent; font-size:23px; cursor:pointer; }
.quantity-control input { width:100%; border:0; outline:0; background:transparent; text-align:center; font-size:18px; font-weight:750; -moz-appearance:textfield; }
.quantity-control input::-webkit-inner-spin-button { -webkit-appearance:none; }
.quantity-control span { color:var(--muted); font-size:12px; }
.field-help { margin:6px 2px 17px; color:var(--muted); font-size:10px; }
.currency-input { height:54px; display:flex; align-items:center; gap:7px; padding:0 16px; border-radius:15px; background:white; box-shadow:inset 0 0 0 1px var(--line); }
.currency-input span { color:var(--muted); }
.currency-input input { flex:1; border:0; outline:0; font-size:18px; font-weight:700; background:transparent; }
.checkbox-row { display:flex; gap:11px; align-items:flex-start; padding:12px 0 17px; cursor:pointer; }
.checkbox-row input { width:19px; height:19px; accent-color:var(--green); }
.checkbox-row span { display:grid; }
.checkbox-row strong { font-size:12px; }
.checkbox-row small { color:var(--muted); font-size:10px; margin-top:3px; }
.secure-note { display:flex; justify-content:center; gap:6px; color:var(--muted); font-size:9px; text-align:center; }
.secure-note span { color:var(--green); }

.feedback-sheet { z-index:85; background:rgba(252,252,253,.93); }
.feedback-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.feedback-head h2 { margin:4px 0 16px; font-size:23px; letter-spacing:-.035em; }
.skip-countdown { border:0; background:transparent; color:var(--muted); font-size:10px; cursor:pointer; }
.reason-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.reason-grid button { min-height:46px; border:1px solid var(--line); border-radius:13px; background:white; font-size:11px; font-weight:650; cursor:pointer; }
.reason-grid button:active { background:var(--green-soft); color:var(--green-dark); border-color:rgba(21,128,61,.25); }

.details-hero { min-height:235px; margin:-18px -18px 18px; padding:25px; border-radius:28px 28px 20px 20px; display:grid; place-items:center; background:var(--product-bg); position:relative; overflow:hidden; }
.details-hero img { width:72%; height:210px; object-fit:contain; filter:drop-shadow(0 17px 14px rgba(0,0,0,.16)); }
.details-body h2 { margin:5px 0 10px; font-size:29px; line-height:1.04; letter-spacing:-.04em; }
.details-badges { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.details-badges span { padding:7px 9px; border-radius:9px; background:#f0f0f2; font-size:10px; font-weight:650; }
.details-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:15px 0; }
.details-stats article { padding:12px 8px; border-radius:14px; background:#f4f4f6; text-align:center; }
.details-stats strong { display:block; font-size:15px; }
.details-stats span { color:var(--muted); font-size:9px; }
.details-copy { color:var(--muted); font-size:12px; line-height:1.5; }
.details-actions { position:sticky; bottom:0; padding-top:12px; background:linear-gradient(transparent, rgba(252,252,253,.98) 25%); display:grid; grid-template-columns:1fr 2fr; gap:8px; }
.details-actions button { min-height:50px; border:0; border-radius:15px; font-weight:750; cursor:pointer; }
.details-actions .details-save { background:#ededf0; }
.details-actions .details-interest { background:#1d1d1f; color:white; }
.filter-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0 22px; }
.filter-options label { padding:13px; border-radius:13px; background:white; box-shadow:inset 0 0 0 1px var(--line); font-size:11px; display:flex; align-items:center; gap:8px; }
.filter-options input { accent-color:var(--green); }

.toast { position:fixed; z-index:100; left:50%; bottom:calc(92px + var(--safe-bottom)); transform:translateX(-50%); width:min(390px,calc(100% - 28px)); padding:12px 14px; border-radius:15px; background:rgba(29,29,31,.93); color:white; box-shadow:0 15px 35px rgba(0,0,0,.22); text-align:center; font-size:11px; font-weight:650; animation:toast-in .25s ease; }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,10px); } }

@media (max-width: 390px) {
  .deck, .empty-state { min-height:460px; }
  .deck-wrap { min-height:460px; }
  .card-media img { height:54%; top:7%; }
  .card-info { padding:15px; }
  .card-info h2 { font-size:23px; margin-bottom:9px; }
  .card-specs { margin-bottom:9px; }
  .swipe-actions { margin-top:13px; }
}

@media (min-width: 700px) {
  .topbar { padding-inline:32px; }
  .view { padding:24px 28px 40px; }
  .offer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .grid-card-image { height:190px; }
  .grid-card-image img { height:160px; }
  .saved-summary { grid-template-columns:repeat(4,1fr); }
  .saved-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sheet { left:50%; right:auto; width:min(560px, calc(100% - 30px)); bottom:14px; transform:translateX(-50%); border-radius:28px; padding-bottom:24px; }
  @keyframes sheet-in { from { transform:translate(-50%,50px); opacity:0; } }
  .feedback-sheet { width:min(580px,calc(100% - 30px)); }
  .scrim { z-index:70; }
}

@media (min-width: 1100px) {
  .app-shell { padding-bottom:30px; }
  .topbar { height:78px; position:relative; border-bottom:0; background:transparent; }
  .brand-mark { width:42px; height:42px; }
  .workspace { grid-template-columns:255px minmax(480px, 680px) 255px; justify-content:center; gap:28px; padding:18px 30px 40px; }
  .desktop-panel { display:block; position:sticky; top:24px; align-self:start; padding:23px; border-radius:25px; background:rgba(255,255,255,.57); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.86); box-shadow:0 12px 35px rgba(0,0,0,.055); }
  .desktop-panel h2 { margin:6px 0 8px; font-size:25px; line-height:1.06; letter-spacing:-.04em; }
  .desktop-panel > .muted { font-size:12px; line-height:1.5; }
  .metric-stack { display:grid; gap:9px; margin-top:22px; }
  .metric-stack article { padding:14px; border-radius:16px; background:rgba(255,255,255,.7); }
  .metric-stack span, .metric-stack small { display:block; color:var(--muted); font-size:9px; }
  .metric-stack strong { display:block; margin:4px 0 2px; font-size:21px; }
  .keyboard-hint { display:flex; gap:10px; margin-top:20px; color:var(--muted); font-size:9px; }
  kbd { padding:3px 6px; border-radius:6px; background:white; box-shadow:0 2px 5px rgba(0,0,0,.08); color:var(--text); }
  .signal-list { display:grid; gap:17px; margin-top:17px; }
  .signal-list article, .trust-card { display:flex; gap:10px; align-items:flex-start; }
  .signal-list strong, .signal-list small, .trust-card strong, .trust-card small { display:block; }
  .signal-list strong, .trust-card strong { font-size:11px; }
  .signal-list small, .trust-card small { color:var(--muted); font-size:9px; line-height:1.45; margin-top:3px; }
  .signal-icon { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; background:#ededf0; font-weight:800; }
  .signal-icon.hot { background:var(--orange-soft); color:#a14300; }
  .signal-icon.green { background:var(--green-soft); color:var(--green-dark); }
  .trust-card { margin-top:22px; padding:13px; border-radius:15px; background:#eaf7ee; color:var(--green-dark); }
  .trust-card > span { font-weight:900; }
  .view { padding:0; }
  .mobile-section-head { display:none; }
  .progress-row { margin-top:0; }
  .deck-wrap, .deck { height:min(72vh,680px); min-height:590px; }
  .swipe-helper { margin-bottom:0; }
  .bottom-nav { position:fixed; left:50%; bottom:14px; width:330px; height:64px; }
  .saved-view, .grid-view { grid-column:1 / -1; }
  .saved-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .offer-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}