@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, fieldset { margin: 0; }
  button, input, select { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
}

@layer base {
  :root {
    --background: #f7f8fa;
    --surface: #ffffff;
    --surface-soft: #f1f4f7;
    --ink: #17202a;
    --muted: #687583;
    --line: #dfe4ea;
    --line-strong: #cbd3dc;
    --blue: #2563eb;
    --blue-soft: #eaf1ff;
    --green: #1c9b69;
    --green-soft: #e7f7f0;
    --orange: #e87924;
    --orange-soft: #fff1e6;
    --red: #d94f4f;
    --radius: 12px;
    --shadow: 0 14px 40px rgba(30, 45, 62, .08);
    color-scheme: light;
  }
  body {
    min-width: 320px;
    background: var(--background);
    color: var(--ink);
    font-family: "Noto Sans SC", sans-serif;
    font-size: 14px;
  }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  input, select, button { border-radius: 8px; }
}

@layer layout {
  .topbar {
    width: min(1480px, calc(100% - 40px));
    height: 74px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }
  main, footer { width: min(1480px, calc(100% - 40px)); margin: 0 auto; }
  .search-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 28px; }
  .metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 20px 0; border: 1px solid var(--line); background: var(--line); border-radius: var(--radius); overflow: hidden; }
  .catalog-layout { display: grid; grid-template-columns: 194px minmax(0, 1fr) 222px; gap: 16px; align-items: start; }
  .filters, .stores-panel { position: sticky; top: 18px; }
  .result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
  footer { min-height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--muted); font-size: 12px; }
  footer a { justify-self: end; color: var(--blue); }
}

@layer components {
  .brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
  .brand-symbol { width: 34px; height: 34px; position: relative; }
  .brand-symbol i { position: absolute; inset: 4px; border: 2px solid var(--ink); border-radius: 50%; }
  .brand-symbol i:last-child { inset: 8px 0 0 8px; border-color: var(--blue); }
  .brand strong { font: 700 20px/1 "Bricolage Grotesque", "Noto Sans SC", sans-serif; }
  .brand small { color: var(--blue); font: 700 8px/1 "Bricolage Grotesque", sans-serif; letter-spacing: .18em; margin-left: 5px; }
  nav { display: flex; align-items: center; gap: 28px; }
  nav a, nav button { border: 0; background: transparent; padding: 8px 0; color: var(--muted); cursor: pointer; font-size: 13px; }
  nav a:hover, nav button:hover { color: var(--ink); }
  .connection { justify-self: end; display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 12px; }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); flex: 0 0 auto; }
  .search-form { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-strong); padding: 8px 8px 8px 18px; box-shadow: var(--shadow); }
  .search-mark { width: 16px; height: 16px; border: 2px solid var(--blue); border-radius: 50%; position: relative; }
  .search-mark::after { content: ""; position: absolute; width: 6px; height: 2px; background: var(--blue); right: -5px; bottom: -2px; transform: rotate(45deg); }
  .search-form input { border: 0; outline: 0; min-width: 0; padding: 13px 10px; font-size: 16px; background: transparent; }
  .search-form button, .wide-button, .card-actions .primary { border: 1px solid var(--blue); background: var(--blue); color: white; cursor: pointer; font-weight: 600; }
  .search-form button { padding: 12px 22px; }
  .outline-button { border: 1px solid var(--line-strong); background: var(--surface); padding: 0 20px; cursor: pointer; font-weight: 600; color: var(--ink); }
  .outline-button:hover { border-color: var(--blue); color: var(--blue); }
  .outline-button.loading .sync-icon { display: inline-block; animation: rotate .8s linear infinite; }
  @keyframes rotate { to { transform: rotate(360deg); } }
  .syntax-note { padding: 10px 4px 0; color: var(--muted); font-size: 11px; }
  .syntax-note b { color: var(--blue); }
  .metrics article { min-height: 96px; padding: 16px 18px; background: var(--surface); }
  .metrics span, .metrics small { display: block; color: var(--muted); font-size: 10px; }
  .metrics strong { display: block; font: 700 26px/1 "Bricolage Grotesque", sans-serif; margin: 10px 0 8px; }
  .sync-progress { background: var(--blue-soft); border: 1px solid #cbdcff; border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
  .sync-progress > div:first-child { display: flex; align-items: center; gap: 10px; }
  .sync-progress small { margin-left: auto; color: var(--muted); }
  .progress-track { height: 3px; margin-top: 11px; background: rgba(37, 99, 235, .15); }
  .progress-track i { display: block; height: 100%; background: var(--blue); transition: width .3s; }
  .filters, .stores-panel, .results { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .filters, .stores-panel { padding: 16px; }
  .results { padding: 20px; min-width: 0; }
  .section-label, .results-header { display: flex; align-items: center; justify-content: space-between; }
  .section-label > span, .results-header > div > span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
  .section-label button { border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 11px; }
  fieldset { border: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
  fieldset legend { font-size: 12px; font-weight: 700; margin-bottom: 12px; }
  fieldset label { display: flex; align-items: center; gap: 9px; color: var(--muted); padding: 7px 0; cursor: pointer; font-size: 12px; }
  fieldset input { accent-color: var(--blue); }
  .toggle-option input { position: absolute; opacity: 0; pointer-events: none; }
  .toggle-track { width: 34px; height: 19px; padding: 2px; border-radius: 999px; background: var(--line-strong); transition: background .2s; }
  .toggle-track::after { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(20, 32, 45, .18); transition: transform .2s; }
  .toggle-option input:checked + .toggle-track { background: var(--blue); }
  .toggle-option input:checked + .toggle-track::after { transform: translateX(15px); }
  .toggle-option input:focus-visible + .toggle-track { outline: 2px solid var(--blue); outline-offset: 2px; }
  .choice-list { display: grid; gap: 5px; }
  .choice-list button { border: 0; background: transparent; color: var(--muted); text-align: left; padding: 8px 9px; cursor: pointer; font-size: 12px; }
  .choice-list button.selected { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
  .freshness-key { padding: 16px 0; display: grid; gap: 8px; }
  .freshness-key p { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; }
  .freshness-key i { width: 7px; height: 7px; border-radius: 50%; }
  .freshness-key i.live { background: var(--green); }
  .freshness-key i.catalog { background: var(--orange); }
  .scheduler-card { background: var(--surface-soft); border-radius: 9px; padding: 13px; }
  .scheduler-card span, .scheduler-card strong, .scheduler-card small { display: block; }
  .scheduler-card span { color: var(--blue); font-size: 9px; font-weight: 700; }
  .scheduler-card strong { font-size: 11px; margin: 8px 0 5px; line-height: 1.5; }
  .scheduler-card small { color: var(--muted); font-size: 9px; line-height: 1.5; word-break: break-word; }
  .results-header h2 { font-size: 14px; margin-top: 7px; }
  .results-header h2 b { font: 700 27px/1 "Bricolage Grotesque", sans-serif; }
  .results-header label { color: var(--muted); font-size: 11px; }
  .results-header select { margin-left: 8px; border: 1px solid var(--line); background: var(--surface); padding: 8px 10px; outline: 0; }
  .quality-notice { margin-top: 15px; padding: 10px 12px; border-radius: 8px; background: var(--blue-soft); color: #4c5e75; font-size: 10px; line-height: 1.6; }
  .quality-notice b { color: var(--blue); }
  .category-strip { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow: visible; padding: 18px 0 14px; }
  .category-strip::-webkit-scrollbar { display: none; }
  .category-strip button { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 7px 10px; cursor: pointer; font-size: 10px; }
  .category-strip button.selected { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
  .product-card { min-height: 310px; border: 1px solid var(--line); border-radius: 11px; padding: 16px; display: flex; flex-direction: column; background: var(--surface); animation: card-in .3s both; transition: border-color .2s, box-shadow .2s, transform .2s; }
  @keyframes card-in { from { opacity: 0; transform: translateY(7px); } }
  .product-card:hover { border-color: #b7c3d0; box-shadow: 0 12px 30px rgba(30, 45, 62, .08); transform: translateY(-2px); }
  .card-meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
  .card-meta > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .card-meta time { color: #8a96a3; font-size: 9px; white-space: nowrap; }
  .fresh-badge { padding: 4px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 700; }
  .fresh-badge.catalog { background: var(--orange-soft); color: var(--orange); }
  .stock { color: var(--muted); font-size: 9px; white-space: nowrap; }
  .stock.sold { color: var(--red); }
  .product-card h3 { min-height: 48px; margin: 14px 0 9px; font-size: 14px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .product-context { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 9px; }
  .product-context span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .product-context span:first-child { min-width: 0; }
  .product-context span:last-child { flex: 0 0 auto; padding-left: 7px; border-left: 1px solid var(--line); }
  .commerce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 14px; align-items: end; margin-top: auto; padding: 18px 0 14px; }
  .price small, .seller small { display: block; color: var(--muted); font-size: 8px; margin-bottom: 7px; }
  .price p { display: flex; align-items: baseline; gap: 7px; }
  .price strong { font: 700 25px/1 "Bricolage Grotesque", sans-serif; }
  .price del { color: #9aa4ae; font-size: 10px; }
  .seller { min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }
  .seller b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; }
  .card-actions { padding-top: 11px; border-top: 1px solid var(--line); }
  .card-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .card-tools button { border: 0; background: transparent; padding: 0; color: var(--muted); cursor: pointer; font-size: 9px; }
  .card-tools button:hover { color: var(--blue); }
  .card-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .card-links a { min-width: 0; border: 1px solid var(--line-strong); background: var(--surface); padding: 8px 7px; cursor: pointer; text-align: center; font-size: 10px; font-weight: 600; }
  .card-links a:hover { border-color: var(--blue); color: var(--blue); }
  .card-links .primary { border-color: var(--blue); background: var(--blue); color: white; }
  .card-links .primary:hover { color: white; background: #174fc6; }
  .empty-state { grid-column: 1 / -1; min-height: 340px; display: grid; place-content: center; text-align: center; background: var(--surface-soft); border-radius: 9px; }
  .empty-state h3 { font-size: 16px; }
  .empty-state p { color: var(--muted); font-size: 11px; margin-top: 8px; }
  .pagination { justify-content: center; align-items: center; gap: 12px; margin-top: 22px; }
  .pagination button { border: 1px solid var(--line-strong); background: var(--surface); padding: 8px 14px; cursor: pointer; }
  .pagination button:disabled { opacity: .35; cursor: default; }
  .pagination span { color: var(--muted); font-size: 11px; }
  .store-rank { display: grid; margin-top: 12px; }
  .rank-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .rank-item > span { color: var(--blue); font: 700 11px/1 "Bricolage Grotesque", sans-serif; }
  .rank-item b, .rank-item small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rank-item b { font-size: 11px; }
  .rank-item small { color: var(--muted); font-size: 9px; margin-top: 4px; }
  .rank-item a { color: var(--blue); font-size: 10px; }
  .wide-button { width: 100%; display: flex; justify-content: space-between; padding: 10px 12px; margin-top: 16px; cursor: pointer; font-size: 11px; }
  .data-note { color: var(--muted); font-size: 9px; line-height: 1.7; margin-top: 18px; }
  .skeleton { height: 48px; background: linear-gradient(90deg, var(--surface-soft), white, var(--surface-soft)); background-size: 200%; animation: shimmer 1.3s infinite; }
  @keyframes shimmer { to { background-position: -200% 0; } }
  footer strong { font-family: "Bricolage Grotesque", sans-serif; color: var(--ink); font-size: 16px; }
  .dialog { width: min(880px, calc(100vw - 28px)); max-height: 84vh; border: 1px solid var(--line-strong); border-radius: 14px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 30px 90px rgba(20, 32, 45, .24); }
  .dialog::backdrop { background: rgba(20, 32, 45, .42); backdrop-filter: blur(3px); }
  .dialog > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
  .dialog header small { color: var(--blue); font: 700 9px/1 "Bricolage Grotesque", sans-serif; letter-spacing: .11em; }
  .dialog header h2 { font-size: 21px; margin-top: 7px; max-width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dialog header button { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 20px; }
  .dialog-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  .range-control { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; white-space: nowrap; }
  .range-control select { border: 1px solid var(--line-strong); background: var(--surface); padding: 8px 28px 8px 9px; color: var(--ink); font-size: 10px; }
  .dialog-search { display: flex; align-items: center; gap: 12px; padding: 13px 24px; border-bottom: 1px solid var(--line); }
  .dialog-search input { flex: 1; min-width: 0; border: 1px solid var(--line); padding: 10px 12px; outline: 0; }
  .dialog-search span { color: var(--muted); font-size: 11px; }
  .dialog-store-list { max-height: 60vh; overflow: auto; display: grid; grid-template-columns: repeat(2, 1fr); }
  .dialog-store { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .dialog-store h3 { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dialog-store p { color: var(--muted); font-size: 9px; margin-top: 6px; }
  .dialog-store a { border: 1px solid var(--blue); color: var(--blue); padding: 7px 9px; font-size: 9px; font-weight: 600; }
  .history-body { padding: 22px 24px 26px; overflow: auto; max-height: 68vh; }
  .history-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .history-summary article { background: var(--surface-soft); border-radius: 9px; padding: 13px; }
  .history-summary span, .history-summary strong { display: block; }
  .history-summary span { color: var(--muted); font-size: 9px; }
  .history-summary strong { font: 700 20px/1 "Bricolage Grotesque", sans-serif; margin-top: 9px; }
  .history-chart { margin-top: 18px; }
  .history-chart > header { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
  .history-chart > header > div:first-child span, .history-chart > header > div:first-child b { display: block; }
  .history-chart > header > div:first-child span { color: var(--blue); font: 700 8px/1 "Bricolage Grotesque", sans-serif; letter-spacing: .14em; }
  .history-chart > header > div:first-child b { margin-top: 6px; font-size: 12px; }
  .chart-legend { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 9px; }
  .chart-legend span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 999px; background: var(--blue); }
  .chart-legend span.stock::before { background: var(--green); }
  .chart-wrap { position: relative; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
  .chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
  .chart-axis { stroke: var(--line); stroke-width: 1; }
  .chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 6; }
  .chart-axis-title { fill: var(--muted); font-size: 9px; font-weight: 700; }
  .chart-axis-title.price, .chart-label.price { fill: var(--blue); }
  .chart-axis-title.stock, .chart-label.stock { fill: var(--green); }
  .chart-label, .chart-date { fill: var(--muted); font-size: 8px; }
  .chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
  .chart-line.price { stroke: var(--blue); }
  .chart-line.stock { stroke: var(--green); }
  .chart-point { fill: white; stroke-width: 2; pointer-events: none; transition: r .15s; }
  .chart-point.price { stroke: var(--blue); }
  .chart-point.stock { stroke: var(--green); }
  .chart-guide { stroke: var(--line-strong); stroke-width: 1; opacity: 0; pointer-events: none; }
  .chart-hitbox { fill: transparent; cursor: crosshair; }
  .chart-sample:hover .chart-guide { opacity: 1; }
  .chart-sample:hover .chart-point { r: 6; }
  .chart-tooltip { position: absolute; z-index: 2; min-width: 145px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255, 255, 255, .97); box-shadow: 0 12px 30px rgba(30, 45, 62, .16); transform: translate(-50%, -100%); pointer-events: none; }
  .chart-tooltip[hidden] { display: none; }
  .chart-tooltip time, .chart-tooltip b, .chart-tooltip span { display: block; }
  .chart-tooltip time { color: var(--muted); font-size: 8px; margin-bottom: 8px; }
  .chart-tooltip b, .chart-tooltip span { font-size: 10px; line-height: 1.8; }
  .chart-tooltip i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--blue); }
  .chart-tooltip i.stock { background: var(--green); }
  .history-list { margin-top: 14px; border-top: 1px solid var(--line); }
  .history-list p { display: grid; grid-template-columns: 1fr auto 90px; gap: 15px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 10px; }
  .history-list time, .history-list span { color: var(--muted); }
  .history-list span { text-align: right; }
  .history-loading, .history-empty { min-height: 280px; display: grid; place-content: center; text-align: center; color: var(--muted); }
  .history-empty h3 { color: var(--ink); font-size: 16px; }
  .history-empty p { margin-top: 8px; font-size: 11px; }
  .update-notice { position: fixed; right: 22px; bottom: 22px; z-index: 48; display: flex; align-items: center; gap: 18px; min-width: 280px; padding: 14px 15px 14px 17px; border: 1px solid #bed0f5; border-radius: 11px; background: rgba(255, 255, 255, .98); box-shadow: 0 18px 48px rgba(30, 45, 62, .18); }
  .update-notice[hidden] { display: none; }
  .update-notice div { min-width: 0; flex: 1; }
  .update-notice small, .update-notice strong { display: block; }
  .update-notice small { color: var(--blue); font-size: 8px; font-weight: 700; letter-spacing: .1em; }
  .update-notice strong { margin-top: 6px; font-size: 12px; }
  .update-notice button { border: 1px solid var(--blue); border-radius: 7px; background: var(--blue); color: white; padding: 9px 13px; cursor: pointer; font-size: 10px; font-weight: 700; }
  .update-notice button:disabled { opacity: .55; cursor: wait; }
  .toast { position: fixed; right: 22px; bottom: 22px; background: var(--ink); color: white; padding: 12px 16px; border-radius: 9px; font-size: 11px; opacity: 0; transform: translateY(20px); pointer-events: none; transition: .25s; z-index: 50; }
  .update-notice:not([hidden]) + .toast { bottom: 98px; }
  .toast.show { opacity: 1; transform: translateY(0); }
}

@layer responsive {
  @media (max-width: 1180px) {
    .catalog-layout { grid-template-columns: 200px minmax(0, 1fr); }
    .stores-panel { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 140px 1fr 180px 220px; gap: 16px; align-items: center; }
    .store-rank { grid-template-columns: repeat(3, 1fr); margin: 0; }
    .rank-item { padding: 8px 10px; border-bottom: 0; border-right: 1px solid var(--line); }
    .wide-button, .data-note { margin: 0; }
    .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 820px) {
    .topbar, main, footer { width: min(100% - 28px, 1480px); }
    .topbar { grid-template-columns: 1fr auto; }
    nav { display: none; }
    .search-panel { grid-template-columns: 1fr; }
    .outline-button { min-height: 50px; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .metrics article:last-child { grid-column: 1 / -1; }
    .catalog-layout { grid-template-columns: 1fr; }
    .filters { position: static; }
    .choice-list { grid-template-columns: repeat(3, 1fr); }
    .stores-panel { grid-column: auto; grid-template-columns: 1fr; }
    .store-rank { grid-template-columns: 1fr; }
    .rank-item { border-right: 0; border-bottom: 1px solid var(--line); }
    footer { grid-template-columns: 1fr auto; }
    footer span { display: none; }
  }
  @media (max-width: 540px) {
    .topbar, main, footer { width: min(100% - 20px, 1480px); }
    .connection span:last-child { display: none; }
    .search-form { grid-template-columns: 22px minmax(0, 1fr); padding: 8px 12px; }
    .search-form button { grid-column: 1 / -1; }
    .metrics article { min-height: 94px; padding: 15px; }
    .metrics strong { font-size: 24px; }
    .choice-list { grid-template-columns: repeat(2, 1fr); }
    .results { padding: 16px 10px; }
    .results-header { align-items: end; }
    .results-header label { text-align: right; }
    .results-header select { display: block; margin: 5px 0 0; max-width: 118px; }
    .result-grid { grid-template-columns: 1fr; }
    .product-card { min-height: 280px; }
    .dialog-store-list { grid-template-columns: 1fr; }
    .dialog-store { border-right: 0; }
    .history-dialog > header { align-items: flex-start; gap: 12px; padding: 16px 14px; }
    .history-dialog .dialog-actions { align-items: flex-end; }
    .history-dialog .range-control { display: grid; gap: 4px; }
    .history-summary { grid-template-columns: repeat(2, 1fr); }
    .history-body { padding: 16px 12px 20px; }
    .history-list p { grid-template-columns: 1fr auto; }
    .history-list span { grid-column: 1 / -1; text-align: left; }
    .update-notice { right: 10px; bottom: 10px; left: 10px; min-width: 0; }
    .update-notice:not([hidden]) + .toast { right: 10px; bottom: 86px; left: 10px; text-align: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  }
}