/* Hallmark · macrostructure: Mobile task flow · tone: warm retail utility · anchor hue: flash orange */
@import url("./tokens.css");
:root {
  --c-paper: oklch(99% 0.006 80);
  --c-canvas: oklch(95.8% 0.012 210);
  --c-ink: oklch(21% 0.028 255);
  --c-muted: oklch(55% 0.018 255);
  --c-line: oklch(91% 0.015 80);
  --c-soft: oklch(97% 0.011 70);
  --c-orange: oklch(70% 0.19 45);
  --c-orange-deep: oklch(61% 0.21 35);
  --c-red: oklch(64% 0.21 28);
  --c-peach: oklch(95% 0.042 55);
  --c-blue: oklch(43% 0.12 255);
  --c-green: oklch(66% 0.15 150);
  --font-body: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --font-display: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --radius-card: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 7px 22px oklch(35% 0.03 65 / .07);
  --shadow-float: 0 14px 38px oklch(35% 0.03 65 / .13);
  --ease-out: cubic-bezier(.22,.72,.24,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--c-canvas); color: var(--c-ink); font-family: var(--font-body); overflow-x: clip; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid oklch(65% .14 245 / .6); outline-offset: 2px; }
.app-canvas { width: min(390px, 100vw); min-height: 100vh; margin: 0 auto; background: var(--c-paper); }
.page { position: relative; min-height: 100vh; padding: 9px 12px 94px; background: linear-gradient(180deg, var(--c-paper) 0 48%, oklch(98% .008 225) 100%); }
.status-bar { height: 25px; padding: 0 3px; display: flex; align-items: center; justify-content: space-between; color: var(--c-ink); font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.location-arrow { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 2px; border-radius: 50%; background: oklch(61% .2 245); color: #fff; font-style: normal; font-size: 11px; transform: rotate(-35deg); }
.status-right { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.status-right b { letter-spacing: -.16em; font-size: 11px; }
.status-right strong { min-width: 30px; padding: 2px 5px; border-radius: 8px; background: var(--c-ink); color: #fff; text-align: center; font-size: 10px; }
.home-head { display: flex; align-items: center; height: 56px; }
.location { padding: 0; border: 0; background: transparent; color: var(--c-ink); font-size: 17px; font-weight: 900; letter-spacing: -.05em; }
.location span { margin-right: 4px; font-size: 20px; }
.location b { margin-left: 4px; font-size: 15px; }
.search-bar { display: flex; align-items: center; height: 50px; padding: 4px; border: 2px solid var(--c-orange-deep); border-radius: 16px; background: #fff; box-shadow: 0 2px 0 oklch(77% .1 45 / .12); }
.scan-glyph { display: grid; place-items: center; width: 43px; color: var(--c-orange-deep); font-size: 27px; font-weight: 900; transform: rotate(-20deg); }
.search-bar input { min-width: 0; flex: 1; height: 100%; border: 0; color: var(--c-ink); background: transparent; font-size: 15px; font-weight: 800; }
.search-bar input::placeholder { color: oklch(60% .01 255); font-weight: 500; }
.search-bar button { height: 40px; min-width: 74px; border: 0; border-radius: 12px; background: var(--c-orange-deep); color: #fff; font-size: 15px; font-weight: 900; }
.category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 17px 5px; margin: 21px 0 19px; }
.category-item { min-width: 0; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--c-ink); }
.category-item b { overflow: hidden; max-width: 100%; font-size: 10px; font-weight: 800; white-space: nowrap; }
.category-icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; font-size: 25px; font-weight: 900; box-shadow: inset -6px -8px 0 oklch(28% .05 65 / .08); }
.category-icon:after { content: ""; position: absolute; inset: 7px; border: 2px solid oklch(100% 0 0 / .33); border-radius: 50%; }
.category-icon.food { background: linear-gradient(145deg, oklch(91% .11 75), oklch(68% .18 43)); color: oklch(57% .18 43); }
.category-icon.market { background: linear-gradient(145deg, oklch(87% .11 205), oklch(68% .14 225)); color: oklch(45% .11 225); }
.category-icon.medicine { background: linear-gradient(145deg, oklch(86% .13 180), oklch(58% .16 170)); }
.category-icon.fresh { background: linear-gradient(145deg, oklch(82% .12 220), oklch(60% .16 240)); }
.category-icon.flower { background: linear-gradient(145deg, oklch(88% .1 350), oklch(73% .18 15)); }
.category-icon.drink { background: linear-gradient(145deg, oklch(94% .08 90), oklch(78% .17 73)); color: oklch(55% .17 55); }
.category-icon.red, .category-icon.group { background: linear-gradient(145deg, oklch(73% .21 28), oklch(58% .2 18)); }
.category-icon.fruit { background: linear-gradient(145deg, oklch(83% .19 145), oklch(61% .18 145)); }
.category-icon.run { background: linear-gradient(145deg, oklch(89% .13 90), oklch(70% .19 65)); color: oklch(56% .18 55); }
.category-icon em { position: absolute; z-index: 1; top: -4px; right: -10px; padding: 3px 5px; border-radius: 8px; background: var(--c-red); color: #fff; font-size: 8px; font-style: normal; white-space: nowrap; }
.ready-card { display: grid; grid-template-columns: 49px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 76px; margin: 0 0 11px; padding: 11px 13px; border-radius: 15px; background: #fff; box-shadow: var(--shadow-card); }
.ready-thumb, .merchant-image, .result-image, .menu-image { position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg, oklch(93% .08 62), oklch(73% .17 41)); }
.ready-thumb { height: 50px; }
.ready-thumb span { position: absolute; left: 4px; top: 4px; padding: 2px 3px; border-radius: 3px; background: oklch(22% .04 65 / .82); color: #fff; font-size: 7px; }
.ready-card strong, .ready-card small { display: block; }
.ready-card strong { font-size: 16px; letter-spacing: -.04em; }
.ready-card small { margin-top: 5px; color: var(--c-muted); font-size: 10px; }
.ready-card button { padding: 10px 14px; border: 0; border-radius: 11px; background: var(--c-peach); color: var(--c-orange-deep); font-size: 12px; font-weight: 900; }
.deal-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.deal-card { position: relative; display: flex; min-height: 114px; padding: 11px 9px; overflow: hidden; border-radius: 13px; background: #fff; box-shadow: var(--shadow-card); }
.deal-copy strong, .deal-copy span, .deal-copy small { display: block; }
.deal-copy strong { font-size: 16px; letter-spacing: -.06em; }
.deal-copy span { width: max-content; max-width: 100%; margin-top: 4px; padding: 3px 6px; border-radius: 5px; background: var(--c-red); color: #fff; font-size: 9px; font-weight: 800; }
.deal-copy small { margin-top: 9px; color: var(--c-red); font-size: 10px; }
.food-visual { position: absolute; right: 8px; bottom: 7px; width: 66px; height: 64px; }
.food-visual i { position: absolute; right: 3px; bottom: 11px; width: 31px; height: 50px; border-radius: 10px 10px 16px 16px; background: linear-gradient(160deg, oklch(88% .14 75), oklch(65% .2 38)); box-shadow: -13px 4px 0 oklch(90% .07 66), inset -5px -7px 0 oklch(32% .05 60 / .1); transform: rotate(9deg); }
.food-visual i:after { content: ""; position: absolute; left: 3px; top: 9px; width: 24px; height: 6px; border-radius: 99px; background: oklch(100% 0 0 / .6); }
.food-visual.food-1 i { width: 52px; height: 42px; right: 6px; bottom: 12px; border-radius: 53% 39% 38% 48%; background: linear-gradient(150deg, oklch(83% .14 145), oklch(58% .14 145)); transform: rotate(-8deg); }
.food-visual b { position: absolute; bottom: 0; left: 0; color: var(--c-red); font-size: 12px; }
.deal-arrow { position: absolute; top: 45px; right: 6px; color: oklch(50% .02 255); font-size: 20px; }
.filter-tabs, .quick-filters { display: flex; gap: 7px; margin-top: 12px; overflow: hidden; }
.filter-tabs button, .quick-filters button { flex: 0 0 auto; padding: 9px 13px; border: 1px solid oklch(94% .01 255); border-radius: 10px; background: #fff; color: var(--c-ink); font-size: 12px; white-space: nowrap; box-shadow: 0 1px 6px oklch(30% .02 255 / .03); }
.filter-tabs button.is-active { border-color: oklch(86% .1 65); background: oklch(97% .05 70); color: var(--c-orange-deep); font-weight: 900; }
.quick-filters { gap: 18px; padding: 10px 3px 0; margin-top: 0; border-top: 1px solid oklch(96% .01 255); }
.quick-filters button { padding: 7px 0; border: 0; box-shadow: none; color: var(--c-muted); font-size: 10px; }
.section-line { display: flex; align-items: baseline; justify-content: space-between; margin: 13px 3px 9px; }
.section-line strong { font-size: 16px; letter-spacing: -.05em; }
.section-line span { color: var(--c-muted); font-size: 10px; }
.merchant-list { display: grid; gap: 10px; }
.merchant-card { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 11px; padding: 10px 0; border-bottom: 1px solid oklch(94% .01 255); }
.merchant-image { height: 112px; }
.merchant-image:after, .result-image:after, .menu-image:after { content: ""; position: absolute; left: 12px; right: 11px; bottom: 15px; height: 26px; border-radius: 55% 48% 32% 41%; background: oklch(100% 0 0 / .5); transform: rotate(-8deg); }
.merchant-image span { position: absolute; z-index: 1; top: 6px; left: 5px; padding: 3px 4px; border-radius: 3px; background: oklch(25% .04 65 / .84); color: #fff; font-size: 8px; }
.image-0 { background: linear-gradient(145deg, oklch(91% .12 75), oklch(70% .19 40)); }
.image-1 { background: linear-gradient(145deg, oklch(88% .09 205), oklch(63% .14 220)); }
.image-2 { background: linear-gradient(145deg, oklch(92% .08 350), oklch(73% .17 25)); }
.image-3 { background: linear-gradient(145deg, oklch(87% .14 145), oklch(61% .14 145)); }
.merchant-body { min-width: 0; }
.merchant-title { display: flex; align-items: center; gap: 5px; }
.merchant-title h3 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; letter-spacing: -.05em; }
.close-mark { margin-left: auto; color: oklch(70% .01 255); font-size: 18px; }
.merchant-meta, .merchant-delivery, .merchant-rating { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; color: var(--c-muted); font-size: 9px; white-space: nowrap; }
.merchant-meta b { color: var(--c-green); }
.merchant-delivery { gap: 9px; }
.merchant-rating strong { color: var(--c-orange-deep); font-size: 12px; }
.merchant-rating span { padding: 3px 5px; border: 1px solid oklch(87% .08 55); border-radius: 4px; color: var(--c-orange-deep); }
.merchant-feature { display: block; margin-top: 7px; overflow: hidden; color: var(--c-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.voice-entry { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 17px 0 9px; padding: 11px 13px; border: 1px solid oklch(79% .08 275); border-radius: 12px; background: #fff; box-shadow: var(--shadow-card); color: var(--c-red); }
.voice-mark { font-size: 24px; }
.voice-entry strong { font-size: 13px; }
.voice-more { color: var(--c-muted); font-size: 10px; }
.bottom-nav { position: fixed; z-index: 10; left: 50%; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); width: min(390px, 100vw); min-height: 67px; transform: translateX(-50%); border-top: 1px solid oklch(92% .01 255); background: oklch(100% 0 0 / .96); box-shadow: 0 -9px 28px oklch(30% .02 255 / .08); backdrop-filter: blur(14px); }
.bottom-nav button { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; border: 0; background: transparent; color: var(--c-ink); }
.bottom-nav button b { font-size: 10px; font-weight: 600; }
.bottom-nav button.is-active { color: var(--c-orange-deep); }
.nav-glyph { position: relative; font-size: 24px; line-height: 22px; }
.nav-glyph em { position: absolute; right: -17px; top: -5px; padding: 2px 4px; border-radius: 8px; background: var(--c-red); color: #fff; font-size: 8px; font-style: normal; }
.ai-nav { transform: translateY(-6px); }
.ai-nav .ai-glyph { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: -5px; border-radius: 17px 17px 19px 19px; background: linear-gradient(145deg, oklch(86% .15 350), oklch(67% .22 28) 52%, oklch(68% .19 295)); color: #fff; font-size: 27px; box-shadow: 0 8px 15px oklch(63% .18 25 / .25); }
.ai-nav b { color: var(--c-ink); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 82px; max-width: min(350px, calc(100vw - 28px)); padding: 10px 14px; border-radius: 11px; transform: translate(-50%, 14px); opacity: 0; pointer-events: none; background: oklch(22% .03 255 / .92); color: #fff; font-size: 11px; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* Search, merchant and checkout surfaces */
.page-header { display: grid; grid-template-columns: 45px minmax(0, 1fr) 45px; align-items: center; height: 58px; }
.page-header h1 { margin: 0; text-align: center; font-size: 22px; letter-spacing: -.07em; }
.back-button, .header-right { display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: transparent; color: var(--c-ink); font-size: 31px; line-height: 1; }
.header-right { justify-self: end; font-size: 22px; }
.search-inline { margin: 0 -1px; }
.search-inline .search-bar { height: 46px; border-width: 1px; }
.search-inline .search-bar button { height: 36px; font-size: 13px; }
.search-summary { display: flex; justify-content: space-between; align-items: center; margin: 15px 3px 9px; }
.search-summary strong { font-size: 14px; }
.search-summary span { color: var(--c-muted); font-size: 10px; }
.result-filters { margin: 0 0 12px; }
.result-filters button { padding: 7px 11px; font-size: 10px; }
.ai-banner { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 7px; width: 100%; margin: 0 0 13px; padding: 10px 12px; border: 1px solid oklch(87% .1 45); border-radius: 13px; background: linear-gradient(100deg, oklch(97% .048 55), oklch(98% .015 30)); color: var(--c-ink); text-align: left; }
.ai-banner .ai-glyph, .solution-intro .ai-glyph { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 11px; background: linear-gradient(145deg, oklch(75% .2 30), oklch(72% .16 310)); color: #fff; font-size: 18px; }
.ai-banner strong, .ai-banner small { display: block; }
.ai-banner strong { font-size: 11px; }
.ai-banner small { margin-top: 3px; color: var(--c-muted); font-size: 9px; }
.ai-banner b { color: var(--c-orange-deep); font-size: 10px; }
.result-list { display: grid; gap: 9px; }
.result-card { display: grid; grid-template-columns: 63px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 0; border-bottom: 1px solid oklch(94% .01 255); }
.result-image { width: 63px; height: 70px; }
.result-info { min-width: 0; }
.result-info > div { display: flex; align-items: center; gap: 4px; }
.result-info h3 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.result-info > div span { flex: 0 0 auto; padding: 2px 4px; border-radius: 4px; background: var(--c-red); color: #fff; font-size: 7px; }
.result-info p, .result-info small { display: block; margin: 5px 0 0; overflow: hidden; color: var(--c-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.result-info small { color: var(--c-orange-deep); }
.result-info > strong { display: block; margin-top: 5px; color: var(--c-red); font-size: 16px; }
.result-info > strong i { margin-left: 2px; color: var(--c-muted); font-size: 8px; font-style: normal; font-weight: 500; }
.result-card > button { padding: 7px 8px; border: 0; border-radius: 8px; background: var(--c-peach); color: var(--c-orange-deep); font-size: 9px; font-weight: 900; white-space: nowrap; }
.merchant-hero { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 11px; align-items: center; min-height: 106px; padding: 16px; border-radius: 15px; background: linear-gradient(135deg, oklch(95% .06 75), oklch(98% .02 40)); }
.merchant-hero .hero-logo { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 15px; background: #fff; box-shadow: var(--shadow-card); color: var(--c-orange-deep); font-size: 22px; font-weight: 900; }
.merchant-hero small, .merchant-hero p { display: block; margin: 0; color: var(--c-muted); font-size: 9px; }
.merchant-hero h2 { margin: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; letter-spacing: -.06em; }
.coupon-line { display: flex; align-items: center; gap: 6px; margin: 10px 0; padding: 10px; border: 1px solid oklch(88% .1 48); border-radius: 10px; background: oklch(98% .03 45); font-size: 9px; }
.coupon-line > span { padding: 3px 5px; border-radius: 4px; background: var(--c-red); color: #fff; font-weight: 900; }
.coupon-line strong { color: var(--c-red); }
.coupon-line button { margin-left: auto; border: 0; background: transparent; color: var(--c-orange-deep); font-size: 9px; font-weight: 900; }
.merchant-tabs { display: flex; gap: 24px; margin-bottom: 13px; padding: 0 4px; border-bottom: 1px solid var(--c-line); }
.merchant-tabs button { position: relative; padding: 0 0 9px; border: 0; background: transparent; color: var(--c-muted); font-size: 11px; }
.merchant-tabs button.is-active { color: var(--c-ink); font-weight: 900; }
.merchant-tabs button.is-active:after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 22px; height: 3px; transform: translateX(-50%); border-radius: var(--radius-pill); background: var(--c-orange); }
.menu-section .section-line { margin-top: 0; }
.menu-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 32px; gap: 10px; align-items: center; padding: 9px 3px; border-bottom: 1px solid oklch(94% .01 255); }
.menu-image { width: 62px; height: 62px; }
.menu-copy { min-width: 0; }
.menu-copy h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.menu-copy p { margin: 5px 0 7px; overflow: hidden; color: var(--c-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.menu-copy strong { color: var(--c-red); font-size: 16px; }
.add-button { width: 29px; height: 29px; border: 0; border-radius: 50%; background: var(--c-orange); color: #fff; font-size: 22px; line-height: 1; }
.cart-bar { position: sticky; z-index: 5; bottom: 75px; display: flex; align-items: center; justify-content: space-between; margin: 16px -1px 0; padding: 10px 12px; border: 1px solid oklch(88% .04 50); border-radius: 13px; background: oklch(100% 0 0 / .97); box-shadow: var(--shadow-float); backdrop-filter: blur(12px); }
.cart-bar small, .cart-bar strong { display: block; }
.cart-bar small { color: var(--c-muted); font-size: 9px; }
.cart-bar strong { margin-top: 2px; color: var(--c-red); font-size: 18px; }
.cart-bar button, .primary-button, .return-checkout { padding: 10px 17px; border: 0; border-radius: 10px; background: var(--c-orange); color: #fff; font-size: 11px; font-weight: 900; }
.cart-bar button:disabled { background: oklch(91% .01 255); color: var(--c-muted); }
.address-card, .checkout-card { margin-bottom: 10px; padding: 12px; border: 1px solid oklch(93% .01 255); border-radius: 13px; background: #fff; box-shadow: 0 4px 15px oklch(30% .02 255 / .03); }
.address-card { display: flex; align-items: center; gap: 9px; }
.address-card > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--c-peach); color: var(--c-orange-deep); }
.address-card div { min-width: 0; flex: 1; }
.address-card strong, .address-card small { display: block; }
.address-card strong { font-size: 11px; }
.address-card small { margin-top: 4px; color: var(--c-muted); font-size: 9px; }
.address-card > b { color: var(--c-muted); font-size: 19px; font-weight: 400; }
.card-title, .checkout-item, .checkout-line, .checkout-total { display: flex; justify-content: space-between; align-items: center; }
.card-title { padding-bottom: 9px; border-bottom: 1px solid oklch(94% .01 255); }
.card-title strong { font-size: 12px; }
.card-title span { color: var(--c-orange-deep); font-size: 9px; }
.checkout-item, .checkout-line { padding: 6px 0; color: var(--c-muted); font-size: 10px; }
.checkout-item { color: var(--c-ink); }
.checkout-item b, .checkout-line b { color: var(--c-ink); font-weight: 700; }
.checkout-line.discount, .checkout-line.discount b { color: var(--c-red); }
.checkout-total { margin-top: 4px; padding-top: 9px; border-top: 1px solid oklch(94% .01 255); font-size: 12px; font-weight: 900; }
.checkout-total strong { color: var(--c-red); font-size: 21px; }
.ai-check-card { margin-bottom: 10px; padding: 12px; border: 1px solid oklch(87% .1 45); border-radius: 13px; background: linear-gradient(100deg, oklch(98% .045 55), oklch(99% .01 30)); }
.ai-check-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ai-check-head > .ai-glyph { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(145deg, oklch(75% .2 30), oklch(72% .16 310)); color: #fff; }
.ai-check-head strong, .ai-check-head small { display: block; }
.ai-check-head strong { font-size: 11px; }
.ai-check-head small { margin-top: 3px; color: var(--c-muted); font-size: 8px; }
.ai-check-head button { padding: 6px 4px; border: 0; background: transparent; color: var(--c-orange-deep); font-size: 9px; font-weight: 900; }
.checkout-note, .solver-boundary { display: flex; gap: 6px; margin: 8px 2px 13px; color: var(--c-muted); font-size: 9px; line-height: 1.55; }
.checkout-note span, .solver-boundary span { color: var(--c-orange-deep); }
.checkout-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; }
.secondary-button { padding: 11px 8px; border: 1px solid oklch(86% .1 50); border-radius: 10px; background: oklch(99% .02 50); color: var(--c-orange-deep); font-size: 10px; font-weight: 900; }

/* AI chat and solution */
.page-ai, .page-solution { background: var(--c-paper); }
.page-ai .page-header, .page-solution .page-header { margin-bottom: 10px; }
.chat-stream { display: grid; gap: 18px; padding: 12px 3px 13px; }
.chat-row { display: flex; }
.chat-row.from-user { justify-content: flex-end; }
.chat-bubble { max-width: 85%; padding: 12px 14px; border-radius: 13px; font-size: 13px; line-height: 1.68; }
.from-user .chat-bubble { background: var(--c-peach); color: var(--c-ink); }
.from-ai .chat-bubble { max-width: 100%; padding: 0; background: transparent; }
.from-ai h2 { margin: 13px 0 9px; font-size: 21px; letter-spacing: -.06em; }
.from-ai p { margin: 0; color: oklch(39% .02 255); font-size: 14px; line-height: 1.78; }
.analysis-label { display: block; color: var(--c-muted); font-size: 14px; }
.suggestion-links { display: grid; gap: 5px; margin-top: 5px; }
.suggestion-links button { width: max-content; padding: 2px 0; border: 0; background: transparent; color: var(--c-blue); font-size: 13px; }
.coupon-result { display: grid; grid-template-columns: 85px minmax(0, 1fr); align-items: center; gap: 3px 10px; margin: 0 0 2px; padding: 16px 15px; border-radius: 9px; background: linear-gradient(100deg, oklch(99% .02 20), oklch(98% .04 30)); }
.coupon-result strong { grid-row: 1 / 3; color: var(--c-red); font-size: 27px; letter-spacing: -.06em; }
.coupon-result span { font-size: 15px; font-weight: 900; }
.coupon-result small { color: var(--c-muted); font-size: 9px; }
.plan-preview { padding: 13px; border: 1px solid oklch(89% .08 45); border-radius: 13px; background: #fff; box-shadow: var(--shadow-card); }
.plan-preview span, .plan-preview strong, .plan-preview small { display: block; }
.plan-preview span { color: var(--c-orange-deep); font-size: 10px; font-weight: 900; }
.plan-preview strong { margin-top: 6px; font-size: 16px; }
.plan-preview small { margin-top: 7px; color: var(--c-muted); font-size: 10px; }
.plan-preview button { margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--c-blue); font-size: 11px; font-weight: 900; }
.chat-shortcuts { display: flex; gap: 8px; overflow: hidden; margin: 0 -1px 13px; }
.chat-shortcuts button { flex: 0 0 auto; padding: 9px 12px; border: 1px solid oklch(91% .02 255); border-radius: 9px; background: #fff; color: var(--c-ink); font-size: 10px; }
.chat-input { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 5px; min-height: 48px; padding: 4px 10px; border: 1px solid oklch(91% .01 255); border-radius: 15px; background: #fff; box-shadow: 0 3px 15px oklch(30% .02 255 / .04); }
.chat-input > span { font-size: 22px; }
.chat-input input { min-width: 0; border: 0; background: transparent; color: var(--c-ink); font-size: 12px; }
.chat-input button { padding: 7px 8px; border: 0; border-radius: 8px; background: var(--c-orange); color: #fff; font-size: 9px; font-weight: 900; }
.ai-generated { display: block; margin: 9px 0; color: oklch(75% .01 255); text-align: center; font-size: 8px; }
.solution-intro { display: grid; grid-template-columns: 39px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 2px 17px; }
.solution-intro .ai-glyph { width: 36px; height: 36px; }
.solution-intro small { color: var(--c-muted); font-size: 10px; }
.solution-intro h2 { margin: 7px 0 5px; font-size: 20px; letter-spacing: -.06em; }
.solution-intro p { margin: 0; color: var(--c-muted); font-size: 10px; }
.baseline-row { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; padding: 12px; border-radius: 12px; background: oklch(97% .02 255); }
.baseline-row small, .baseline-row strong { display: block; }
.baseline-row small { color: var(--c-muted); font-size: 9px; }
.baseline-row strong { margin-top: 3px; font-size: 22px; }
.baseline-row > span { color: var(--c-green); font-size: 9px; font-weight: 800; }
.plans { display: grid; gap: 10px; }
.plan-card { padding: 13px; border: 1px solid oklch(92% .01 255); border-radius: 14px; background: #fff; box-shadow: var(--shadow-card); }
.plan-card.is-recommended { border-color: oklch(79% .13 45); box-shadow: 0 8px 26px oklch(70% .15 45 / .15); }
.plan-top, .plan-price, .plan-meta { display: flex; justify-content: space-between; align-items: center; }
.plan-top > span { color: var(--c-orange-deep); font-size: 11px; font-weight: 900; }
.plan-top > b { padding: 3px 6px; border-radius: 5px; background: var(--c-red); color: #fff; font-size: 8px; }
.plan-price { margin-top: 8px; }
.plan-price strong { color: var(--c-red); font-size: 23px; }
.plan-price small { color: var(--c-green); font-size: 9px; font-weight: 800; }
.plan-meta { margin-top: 6px; color: var(--c-muted); font-size: 9px; }
.plan-reasons { margin: 8px 0; padding-top: 7px; border-top: 1px solid oklch(94% .01 255); }
.plan-reasons p { margin: 3px 0; color: var(--c-muted); font-size: 9px; line-height: 1.45; }
.plan-card button { width: 100%; padding: 10px; border: 0; border-radius: 9px; background: var(--c-orange); color: #fff; font-size: 10px; font-weight: 900; }
.plan-card:not(.is-recommended) button { border: 1px solid oklch(85% .1 50); background: #fffaf5; color: var(--c-orange-deep); }
.solver-boundary { margin-top: 13px; padding: 8px 10px; border-radius: 8px; background: oklch(97% .02 255); }
.return-checkout { display: block; width: 100%; margin: 5px 0; text-align: center; }
.order-status { display: flex; align-items: center; gap: 10px; margin: 8px 0 11px; padding: 13px; border: 1px solid oklch(84% .11 145); border-radius: 13px; background: oklch(97% .03 145); }
.order-check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-green); color: #fff; font-weight: 900; }
.order-status strong, .order-status small { display: block; }
.order-status strong { color: oklch(45% .13 145); font-size: 12px; }
.order-status small { margin-top: 4px; color: var(--c-muted); font-size: 8px; }
.order-boundary { margin: 12px 2px 14px; padding: 11px; border-radius: 10px; background: oklch(97% .018 255); }
.order-boundary strong { font-size: 10px; }
.order-boundary p { margin: 5px 0 0; color: var(--c-muted); font-size: 9px; line-height: 1.55; }

@media (min-width: 700px) {
  .app-canvas { box-shadow: 0 0 0 1px oklch(85% .01 255 / .4); }
}
@media (max-width: 350px) {
  .page { padding-left: 9px; padding-right: 9px; }
  .category-icon { width: 47px; height: 47px; }
  .category-item b { font-size: 9px; }
  .merchant-card { grid-template-columns: 84px minmax(0, 1fr); }
  .merchant-image { height: 105px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}