*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --color-bg: #090909;
  --color-surface: #151515;
  --color-surface-raised: #202020;
  --color-text: #f7f5f5;
  --color-muted: #a8a1a1;
  --color-red: #ff254f;
  --color-orange: #ff7a18;
  --color-border: rgba(255, 255, 255, .11);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-control: 12px;
  --radius-card: 18px;
  --control-height: 48px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --glow: 0 0 28px rgba(255, 37, 79, .22);
}

html { min-width: 0; background: var(--color-bg); }
body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-bg);
  font: 16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
}
button, input, textarea, select { min-height: var(--control-height); border-radius: var(--radius-control); font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(255, 122, 24, .7); outline-offset: 2px; }

.app-shell { min-height: 100vh; padding: var(--space-4) var(--space-4) calc(88px + var(--safe-bottom)); }
.app-header, .section-heading, .product-row, .bottom-nav { display: flex; align-items: center; }
.app-header, .section-heading { justify-content: space-between; gap: var(--space-4); }
.app-header { margin-bottom: var(--space-6); }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(28px, 9vw, 42px); letter-spacing: -.05em; }
h2 { font-size: 20px; letter-spacing: -.025em; }
.eyebrow { color: var(--color-red); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.muted { color: var(--color-muted); font-size: 13px; }
.icon-button { width: var(--control-height); padding: 0; color: var(--color-text); background: var(--color-surface-raised); }
.app-content { display: grid; gap: var(--space-6); }
.hero { position: relative; display: grid; gap: var(--space-2); overflow: hidden; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: linear-gradient(135deg, #241015, #151515 55%, #25170d); box-shadow: var(--glow); }
.hero::after { position: absolute; inset: auto -20% -65% 30%; height: 180%; content: ""; background: radial-gradient(circle, rgba(255, 37, 79, .3), transparent 60%); animation: neon-pulse 6s ease-in-out infinite alternate; pointer-events: none; }
.hero p:last-child { color: var(--color-muted); }
.search-field { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 0 var(--space-4); color: var(--color-muted); background: var(--color-surface); border: 1px solid var(--color-border); }
.search-field input { flex: 1; min-width: 0; padding: 0; color: var(--color-text); background: transparent; border: 0; outline: 0; }
.category-rail { display: flex; gap: var(--space-3); overflow-x: auto; padding: var(--space-3) 0 var(--space-2); scrollbar-width: none; }
.category-rail::-webkit-scrollbar { display: none; }
.category-button { flex: 0 0 auto; display: grid; gap: var(--space-2); justify-items: center; min-width: 72px; padding: 0; color: var(--color-muted); background: transparent; }
.category-avatar { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface-raised); }
.category-button.is-active { color: var(--color-text); }
.category-button.is-active .category-avatar { border-color: var(--color-red); box-shadow: var(--glow); }
.product-list { display: grid; gap: var(--space-3); }
.product-row { gap: var(--space-3); min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.product-image { flex: 0 0 76px; width: 76px; height: 92px; object-fit: cover; border-radius: var(--radius-control); background: var(--color-surface-raised); }
.product-info { display: grid; flex: 1; min-width: 0; gap: var(--space-2); }
.product-name, .product-description { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.product-name { -webkit-line-clamp: 2; }
.product-description { color: var(--color-muted); font-size: 13px; -webkit-line-clamp: 3; }
.product-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.price { font-weight: 800; white-space: nowrap; }
.primary-button { min-height: 44px; padding: 0 var(--space-4); color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--color-red), var(--color-orange)); }
.primary-button:active { transform: translateY(1px); }
.content-panel { display: grid; gap: var(--space-4); }
.order-list { display: grid; gap: var(--space-3); }
.order-card, .profile-card { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.order-card-header, .order-card-total { display: flex; justify-content: space-between; gap: var(--space-3); }
.status-pill { width: fit-content; padding: var(--space-1) var(--space-2); color: #ffd1d9; border-radius: 99px; background: rgba(255, 37, 79, .2); font-size: 12px; }
.profile-row { display: flex; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.chat-messages { display: grid; gap: var(--space-3); max-height: 50vh; overflow-y: auto; padding: var(--space-2); }
.chat-message { max-width: 88%; padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-raised); overflow-wrap: anywhere; }
.chat-message.is-customer { justify-self: end; border: 1px solid rgba(255, 37, 79, .4); }
.chat-message.is-admin { justify-self: start; }
.chat-form { display: grid; gap: var(--space-3); }
.chat-form textarea { width: 100%; min-width: 0; min-height: 96px; padding: var(--space-3); color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border); resize: vertical; }
.cart-panel { display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.text-button { min-height: 44px; padding: 0 var(--space-3); color: var(--color-muted); background: transparent; }
.cart-list { display: grid; gap: var(--space-3); }
.cart-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.cart-item-info { min-width: 0; }
.cart-item-name { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.quantity-controls { display: flex; align-items: center; gap: var(--space-2); }
.quantity-button { width: 44px; min-height: 44px; color: var(--color-text); background: var(--color-surface-raised); }
.cart-total { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); }
.checkout-form { display: grid; gap: var(--space-4); }
.checkout-form label, .checkout-form fieldset { display: grid; gap: var(--space-2); min-width: 0; }
.checkout-form input[type="tel"] { width: 100%; min-width: 0; padding: 0 var(--space-4); color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.checkout-form fieldset { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.choice { display: flex !important; grid-template-columns: none !important; align-items: center; min-height: 44px; }
.choice input { accent-color: var(--color-red); }
.form-error { padding: var(--space-3); color: #ffb4bd; border: 1px solid var(--color-red); border-radius: var(--radius-control); }
.bottom-nav { position: fixed; right: var(--space-3); bottom: var(--space-3); left: var(--space-3); z-index: 10; justify-content: space-around; gap: var(--space-2); padding: var(--space-2); padding-bottom: calc(var(--space-2) + var(--safe-bottom)); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: rgba(21, 21, 21, .92); backdrop-filter: blur(16px); }
.nav-button { position: relative; flex: 1; min-height: 44px; padding: 0 var(--space-2); color: var(--color-muted); background: transparent; font-size: 12px; }
.nav-button.is-active { color: var(--color-text); }
.nav-badge { display: inline-grid; place-items: center; min-width: 18px; min-height: 18px; padding: 0 4px; color: #fff; background: var(--color-red); border-radius: 99px; font-size: 11px; }
@keyframes neon-pulse { from { transform: translateX(-5%); opacity: .55; } to { transform: translateX(8%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
.chat-panel { display: grid; gap: var(--space-3); min-height: min(70vh, 620px); }
.chat-messages { display: flex; flex-direction: column; gap: var(--space-2); min-height: 260px; max-height: 52vh; overflow-y: auto; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); overscroll-behavior: contain; }
.chat-message { max-width: 86%; padding: var(--space-3); border-radius: 16px; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-message.customer { align-self: flex-end; color: #fff; background: linear-gradient(135deg, var(--color-red), #b3163a); border-bottom-right-radius: 4px; }
.chat-message.admin { align-self: flex-start; background: var(--color-surface-raised); border-bottom-left-radius: 4px; }
.chat-time { display: block; margin-top: 4px; color: rgba(255,255,255,.65); font-size: 11px; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); padding-bottom: var(--safe-bottom); }
.chat-form textarea { width: 100%; min-height: 48px; max-height: 140px; resize: none; padding: 12px; color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.chat-error { padding: var(--space-3); color: #ffb4bd; border: 1px solid var(--color-red); border-radius: var(--radius-control); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 420px) { .bottom-nav { gap: 0; } .nav-button { padding: 0 2px; font-size: 10px; } .chat-form { grid-template-columns: 1fr; } .chat-form .primary-button { width: 100%; } }