:root {
  --status-danger: #c53030;
  --status-warning: #a66b00;
  --status-success: #238348;
  --status-neutral: #808080;
  color-scheme: light;
  --ui-black: #111111;
  --ui-white: #ffffff;
  --ui-gray: #f2f2f2;
  --ui-text: var(--ui-black);
  --ui-price-text: var(--ui-black);
  --ui-link-text: var(--ui-black);
  --ui-text-secondary: rgba(17, 17, 17, 0.60);
  --ui-text-disabled: rgba(17, 17, 17, 0.35);
  --ui-border: rgba(17, 17, 17, 0.12);
  --ui-border-strong: rgba(17, 17, 17, 0.22);
  --ui-input-border: #cccccc;
  --ui-hover: var(--ui-gray);
  --ui-selected: var(--ui-gray);
  --ui-page-bg: var(--ui-white);
  --ui-overlay: rgba(17, 17, 17, 0.86);

  --bg: var(--ui-page-bg);
  --panel: var(--ui-white);
  --line: var(--ui-border);
  --text: var(--ui-text);
  --muted: var(--ui-text-secondary);
  --brand: var(--ui-black);
  --brand-weak: var(--ui-gray);
  --accent: var(--ui-black);
  --warn: var(--ui-black);
  --shadow: none;
}

html,
body,
#app {
  min-height: 100%;
  background: var(--ui-page-bg);
  color: var(--ui-text);
}

body,
button,
input,
select,
textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
  font-weight: 400;
}

button {
  color: var(--ui-text);
}

a,
a:visited,
a:hover,
a:active {
  color: var(--ui-link-text);
}

::selection {
  background: var(--ui-black);
  color: var(--ui-white);
}

button,
input,
select,
textarea {
  border-color: var(--ui-border);
  box-shadow: none;
}

button:focus-visible {
  outline: 2px solid var(--ui-black);
  outline-offset: 2px;
}

.app-shell,
.page {
  background: var(--ui-page-bg);
}

.topbar,
.bottom-nav,
.checkout-bar {
  border-color: var(--ui-border);
  background: var(--ui-white);
}

.topbar h1,
.section-title h2,
.list-card h3,
.form-card h2 {
  color: var(--ui-text);
  font-weight: 600;
}

.muted,
.field-label,
.store-selector-address,
.small,
.empty,
.pickup-store-state {
  color: var(--ui-text-secondary);
}

.primary-btn,
.secondary-btn,
.danger-btn,
.icon-btn,
.link-btn,
.tab,
.chip,
.bottom-nav button,
.store-selector-current,
.store-selector-option {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.primary-btn {
  border: 1px solid var(--ui-black);
  background: var(--ui-black);
  color: var(--ui-white);
  font-weight: 600;
}

.primary-btn:hover:not(:disabled) {
  background: rgba(17, 17, 17, 0.88);
}

.secondary-btn,
.danger-btn {
  border: 1px solid var(--ui-border);
  background: var(--ui-white);
  color: var(--ui-text);
  font-weight: 500;
}

.danger-btn {
  border-color: var(--ui-border-strong);
  font-weight: 600;
}

.secondary-btn:hover:not(:disabled),
.danger-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled) {
  background: var(--ui-hover);
}

.link-btn {
  color: var(--ui-text);
}

.link-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.icon-btn {
  border: 1px solid var(--ui-border);
  background: var(--ui-white);
  color: var(--ui-text);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  border-color: var(--ui-border);
  background: var(--ui-gray);
  color: var(--ui-text-disabled);
  opacity: 1;
}

.input,
.select,
.textarea,
.quantity-input,
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="hidden"])),
select,
textarea,
.product-page-selector-button,
.product-page-selector-button:hover,
.product-page-selector-button:focus-visible,
.product-page-selector-button[aria-expanded="true"] {
  border: 1px solid var(--ui-input-border);
  border-radius: 7px;
  background: var(--ui-white);
  color: var(--ui-text);
  box-shadow: none;
  outline: none;
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--ui-gray);
  color: var(--ui-text-disabled);
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--status-danger);
}

.store-selector {
  border-color: var(--ui-input-border);
  border-radius: 7px;
}

.store-selector .store-selector-current:is(:hover, :focus-visible, :active) {
  background: var(--ui-white);
  box-shadow: none;
  outline: none;
}

@media (max-width: 767px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ui-black);
}

select option {
  background: var(--ui-white);
  color: var(--ui-text);
}

select option:checked,
select option:not(:disabled):hover,
select option:not(:disabled):focus {
  background: var(--ui-selected);
  color: var(--ui-text);
}

select option:disabled {
  background: var(--ui-white);
  color: var(--ui-text-disabled);
}

.list-card,
.form-card,
.profile-head,
.store-selector,
.radio-card,
.empty,
.inline-state,
.pickup-location-static,
.pickup-store-state {
  border-color: var(--ui-border);
  background: var(--ui-white);
  box-shadow: none;
}

.list-card,
.form-card,
.profile-head {
  border: 1px solid var(--ui-border);
}

.list-card:hover {
  border-color: var(--ui-border-strong);
}

.price,
.order-detail-item-amount,
.payment-record-amount,
.checkout-summary strong {
  color: var(--ui-price-text);
  font-weight: 600;
}

.price-stack .muted {
  color: var(--ui-price-text);
}

.store-selector-current:hover,
.store-selector-option:not(:disabled):hover,
.store-selector-option:not(:disabled):focus-visible,
.product-page-option:not(:disabled):hover,
.product-page-option:not(:disabled):focus-visible {
  background: var(--ui-hover);
  color: var(--ui-text);
}

.store-selector-option.selected,
.product-page-option.selected,
[role="listbox"] [role="option"][aria-selected="true"] {
  background: var(--ui-selected);
  color: var(--ui-text);
  font-weight: 600;
}

.store-selector-chevron,
.store-selector-check {
  color: var(--ui-text);
}

.tab,
.chip {
  border-color: var(--ui-border);
  background: var(--ui-white);
  color: var(--ui-text-secondary);
}

.tab:hover,
.chip:hover,
.tab.active,
.chip.active {
  border-color: var(--ui-border-strong);
  background: var(--ui-selected);
  color: var(--ui-text);
}

.tab.active,
.chip.active {
  font-weight: 600;
}

.radio-card.active {
  border-color: var(--ui-black);
  background: var(--ui-selected);
}

.order-status {
  border: 1px solid var(--ui-border);
  background: var(--ui-gray);
  color: var(--ui-text);
  font-weight: 600;
}

.order-status:has(.semantic-status) {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-weight: 400;
}

.error-state,
.pickup-store-state.error {
  border: 2px solid var(--ui-border-strong);
  background: var(--ui-white);
  color: var(--ui-text);
}

.bottom-nav button {
  background: var(--ui-white);
  color: var(--ui-text-secondary);
  font-weight: 400;
}

.bottom-nav button:hover,
.bottom-nav button.active {
  background: var(--ui-hover);
  color: var(--ui-text);
}

.bottom-nav button.active {
  font-weight: 600;
}

.image-lightbox {
  background: var(--ui-overlay);
}

.image-lightbox-toolbar button,
.image-lightbox-close,
.image-lightbox-nav,
.image-lightbox-counter {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(17, 17, 17, 0.78);
  color: var(--ui-white);
}

.product-image,
.image-frame img,
.cart-item-image img,
.checkout-item-image img,
.order-detail-item-image img,
.image-lightbox-stage > img {
  filter: none !important;
}

.semantic-status { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; color: var(--ui-black, #111); }
.semantic-status__dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--status-neutral); }
.semantic-status--danger .semantic-status__dot { background: var(--status-danger); }
.semantic-status--warning .semantic-status__dot { background: var(--status-warning); }
.semantic-status--success .semantic-status__dot { background: var(--status-success); }

@media (max-width: 760px) {
  .page {
    padding: 12px;
  }
}