:root {
  color-scheme: dark;
  --bg: #12141e; --surface: #1a1d2e; --surface-2: #22263d; --text: #f4f6fc; --muted: #9aa5c4; --line: #304675; --acid: #7eb8f0; --green: #7eb8f0; --blue-electric: #2563eb; --blue-light: #7eb8f0; --danger: #ff6b81;
  --safe-top: 0px; --safe-bottom: 0px; --bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom)); --top: max(env(safe-area-inset-top, 0px), var(--safe-top));
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-padding-top: 90px; }
body { margin: 0; color: var(--text); background: var(--bg); min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button, a, input, select, textarea { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--blue-light); }
button { border: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { letter-spacing: -.045em; }
.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; }
.app { width: min(100%, 1120px); margin: auto; padding: 0 20px calc(164px + var(--bottom)); min-height: 100dvh; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 82px; padding: calc(14px + var(--top)) 0 14px; position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; background: none; text-align: left; font-size: 22px; font-weight: 800; letter-spacing: -.06em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, #2563eb, #7eb8f0); color: #ffffff; font-size: 24px; font-weight: 850; letter-spacing: -.09em; flex-shrink: 0; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; font-weight: 650; letter-spacing: .12em; }
.brand-dot, h1 > span, h2 > span { color: var(--blue-light); }
.header-actions { display: flex; gap: 8px; align-items: center; }
.icon-button, .avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); position: relative; flex-shrink: 0; }
.avatar { background: #202b4d; color: var(--blue-light); font-size: 14px; font-weight: 750; border: 1px solid var(--line); }
.notification-dot { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 50px; background: #2563eb; color: #fff; font-size: 14px; display: grid; place-items: center; }
.page { display: none; }
.page.active { display: block; animation: appear .2s ease; }
@keyframes appear { from { opacity: .5; transform: translateY(3px); } }
.welcome-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 22px 0 16px; font-size: 13px; font-weight: 650; }
#greeting { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telegram-label { flex-shrink: 0; }
.telegram-label { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muted); font-weight: 500; }
.tiny-dot { width: 7px; height: 7px; border-radius: 50%; background: #7eb8f0; box-shadow: 0 0 8px #7eb8f0; animation: pulse-glow 2.2s infinite ease-in-out; }
@keyframes pulse-glow {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(126, 184, 240, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(126, 184, 240, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(126, 184, 240, 0); }
}
.hero { position: relative; display: grid; grid-template-columns: 1.7fr 1fr; min-height: 290px; border-radius: 24px; background: linear-gradient(135deg, #18203c, #131728); border: 1px solid #304675; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); overflow: hidden; }
.hero::before { content: ""; position: absolute; top: -50px; right: -50px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(37, 99, 235, 0.35) 0%, transparent 70%); pointer-events: none; filter: blur(30px); }
.hero-content { padding: 30px 0 30px 28px; z-index: 2; }
.hero-tag { display: inline-block; font-size: 14px; letter-spacing: .14em; font-weight: 750; border: 1px solid #304675; padding: 7px 9px; border-radius: 50px; color: #7eb8f0; background: #2563eb18; }
.hero h1 { font-size: clamp(29px, 4.4vw, 48px); line-height: 1.08; margin: 16px 0 12px; font-weight: 750; }
.hero h1 span { color: #7eb8f0; }
.hero p { color: #b0bfdc; font-size: 14px; line-height: 1.65; }
.hero-link { display: flex; gap: 16px; align-items: center; background: linear-gradient(135deg, #2563eb, #7eb8f0); color: #ffffff; padding: 12px 18px; margin-top: 20px; border-radius: 50px; font-size: 14px; font-weight: 700; min-height: 44px; box-shadow: 0 4px 14px rgba(37,99,235,0.35); }
.hero-link span { color: #ffffff; font-size: 18px; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-circle { position: absolute; width: 88%; aspect-ratio: 1; border: 1px solid #304675; border-radius: 50%; box-shadow: 0 0 0 28px #1c2445, 0 0 0 29px #304675; opacity: .8; }
.hero-leaf { width: 110%; max-width: 330px; height: auto; flex-shrink: 0; transform: rotate(-12deg); filter: drop-shadow(0 16px 12px #2563eb22); z-index: 1; }
.hero-caption { position: absolute; right: 20px; bottom: 22px; font-size: 14px; color: #7eb8f0; font-weight: 650; letter-spacing: .2em; }
.benefits { display: flex; justify-content: space-between; gap: 4px; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.benefits span { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.benefits svg { width: 15px; height: 15px; color: var(--green); }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .16em; color: var(--muted); line-height: 1.5; margin-bottom: 7px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 26px 0 18px; }
.section-heading h2 { font-size: 29px; font-weight: 750; }
.count-pill { background: #1e2644; color: #7eb8f0; border: 1px solid #304675; border-radius: 50px; padding: 7px 11px; font-size: 14px; white-space: nowrap; }
.search-box { display: flex; align-items: center; gap: 10px; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; background: var(--surface); color: var(--muted); }
.search-box input { width: 100%; min-width: 0; border: 0; background: none; outline: none; color: var(--text); font-size: 16px; padding: 12px 0; }
.search-box input::placeholder { color: #9aa5c4; font-size: 14px; }
.search-box svg { width: 19px; height: 19px; color: #7eb8f0; }
.search-box kbd { font-size: 16px; font-family: inherit; background: var(--bg); padding: 2px 7px; border-radius: 5px; border: 1px solid #304675; }
.categories { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 8px; scrollbar-width: none; }
.categories::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; border: 1px solid var(--line); border-radius: 50px; min-height: 44px; padding: 10px 16px; color: var(--muted); background: var(--surface); font-size: 14px; font-weight: 650; }
.chip.active { color: #ffffff; background: #2563eb; border-color: #7eb8f0; }
.catalog-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0 17px; color: var(--muted); font-size: 14px; }
.stock-filter { display: flex; align-items: center; gap: 6px; min-height: 34px; }
input[type=checkbox] { accent-color: #2563eb; width: 16px; height: 16px; flex-shrink: 0; }
.sort-label select { max-width: 150px; font-size: 14px; color: var(--text); border: 0; background: none; padding: 10px 0; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-card { min-width: 0; background: linear-gradient(165deg, rgba(26, 29, 46, 0.95), rgba(18, 20, 30, 0.96)); border: 1px solid rgba(48, 70, 117, 0.7); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color .2s, box-shadow .2s; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-3px); border-color: #7eb8f0; box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25), 0 0 14px rgba(126, 184, 240, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.product-card:active { transform: scale(0.985); }
.product-open { width: 100%; background: none; display: block; text-align: left; padding: 0; }
.product-art { height: clamp(132px, 23vw, 190px); display: grid; place-items: center; background: var(--surface-2); position: relative; overflow: hidden; }
.product-art > svg { width: 90%; height: auto; max-height: 95%; stroke: none; transform: rotate(-10deg); filter: drop-shadow(0 10px 7px #2563eb22); position: relative; }
.product-art img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; padding: 12px; z-index: 1; }
.product-art.has-image > svg { opacity: 0; }
.custom-product-icon { position: absolute; font-size: 40px; line-height: 1; }
.product-art.has-image .custom-product-icon { opacity: 0; }
.product-body { padding: 13px 12px 0; }
.product-category { margin-bottom: 5px; font-size: 14px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.product-body h3 { font-size: 14px; letter-spacing: -.025em; font-weight: 750; overflow-wrap: anywhere; }
.product-description { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 7px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 31px; }
.product-bottom { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.price { font-size: 16px; letter-spacing: -.045em; font-weight: 750; white-space: nowrap; }
.price small { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; letter-spacing: 0; font-weight: 400; }
.add-button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; font-size: 24px; flex-shrink: 0; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4); border: 1px solid rgba(126, 184, 240, 0.4); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.add-button:hover { background: linear-gradient(135deg, #1d4ed8, #2563eb); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.55); }
.add-button:active { transform: scale(0.95); }
.add-button.in-cart { background: #202b4d; color: #7eb8f0; font-size: 15px; font-weight: 750; border: 1px solid #304675; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.shop-footer { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px 0 10px; color: var(--muted); font-size: 14px; }
.brand-mark.small { width: 32px; height: 32px; border-radius: 10px; font-size: 18px; background: #202b4d; color: #7eb8f0; border: 1px solid #304675; }
.shop-footer small { display: block; margin-top: 3px; font-size: 14px; }
.bottom-nav { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 600px); padding: 8px 14px calc(8px + var(--bottom)); min-height: calc(70px + var(--bottom)); display: flex; align-items: center; background: rgba(18, 20, 30, 0.92); backdrop-filter: blur(24px); border-top: 1px solid rgba(48, 70, 117, 0.8); border-left: 1px solid rgba(48, 70, 117, 0.4); border-right: 1px solid rgba(48, 70, 117, 0.4); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.bottom-nav button { flex: 1; display: grid; justify-items: center; gap: 5px; padding: 8px 3px; background: none; color: #9aa5c4; font-size: 13px; min-height: 52px; border-radius: 14px; transition: color .15s, background .15s, transform .15s; }
.bottom-nav button:active { transform: scale(0.95); }
.bottom-nav button.active { background: rgba(37, 99, 235, 0.22); color: #7eb8f0; font-weight: 750; box-shadow: inset 0 0 12px rgba(37, 99, 235, 0.28), 0 2px 8px rgba(37, 99, 235, 0.25); border: 1px solid rgba(126, 184, 240, 0.35); }
.bottom-nav svg { width: 21px; height: 21px; }
.cart-bar { position: fixed; z-index: 32; bottom: calc(84px + var(--bottom)); left: 50%; transform: translateX(-50%); width: min(calc(100% - 28px), 560px); display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-height: 64px; border-radius: 20px; color: var(--text); background: rgba(22, 28, 51, 0.88); backdrop-filter: blur(20px); border: 1px solid rgba(126, 184, 240, 0.35); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); transition: transform .2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cart-bar:active { transform: translateX(-50%) scale(0.985); }
.cart-count { width: 34px; height: 34px; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; border-radius: 10px; font-size: 13px; font-weight: 750; flex-shrink: 0; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.5); }
.cart-bar strong { flex: 1; text-align: left; font-size: 14px; }
.cart-bar small { display: block; color: #9aa5c4; font-size: 14px; margin-top: 4px; font-weight: 400; }
.cart-bar > span:last-of-type { font-weight: 650; font-size: 14px; white-space: nowrap; }
.cart-bar svg { width: 16px; height: 16px; }
.page-title { padding: 32px 0 22px; }
.page-title h1 { font-size: clamp(29px, 6vw, 40px); }
.page-title > p:last-of-type { font-size: 14px; color: var(--muted); line-height: 1.7; margin-top: 10px; }
.stack { display: grid; gap: 12px; }
.empty { grid-column: 1 / -1; padding: 38px 20px; text-align: center; border: 1px dashed #304675; border-radius: 18px; color: var(--muted); background: var(--surface); font-size: 14px; line-height: 1.65; }
.empty svg { width: 32px; height: 32px; margin-bottom: 12px; color: #7eb8f0; }
.empty b { display: block; color: var(--text); font-size: 18px; margin-bottom: 6px; }
.empty .text-button { margin: 12px auto 0; }
.order-card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 18px; }
.order-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.order-id { font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }
.order-date, .order-meta { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.6; overflow-wrap: anywhere; }
.status { flex-shrink: 0; padding: 6px 12px; border-radius: 50px; background: #1c2644; color: #7eb8f0; font-size: 13px; font-weight: 700; border: 1px solid #304675; }
.status.new { background: #3d301b; color: #fde68a; border-color: #634d23; }
.status.cancelled { color: #fca5a5; background: #3d1b24; border-color: #692936; }
.order-items { margin: 14px 0; padding: 12px 0; border-block: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.9; }
.order-total { display: flex; justify-content: space-between; font-size: 13px; gap: 10px; }
.order-note { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.order-actions { margin-top: 14px; }
.order-actions select { width: 100%; padding: 12px; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; color: var(--text); font-size: 16px; }
.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.stat { padding: 15px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; min-width: 0; }
.stat strong { display: block; font-size: 22px; letter-spacing: -.04em; }
.stat span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.admin-tabs { display: flex; gap: 4px; background: #141728; border: 1px solid var(--line); padding: 5px; border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.admin-tabs button { flex: 1; padding: 12px 9px; font-size: 14px; font-weight: 650; border-radius: 10px; background: none; color: var(--muted); white-space: nowrap; }
.admin-tabs button.active { background: #202b4d; color: #7eb8f0; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.admin-toolbar { display: flex; align-items: center; gap: 8px; padding: 23px 0 15px; }
.admin-toolbar > div { flex: 1; min-width: 0; }
.admin-toolbar h2 { font-size: 20px; }
.admin-toolbar span { font-size: 14px; color: var(--muted); }
.compact-button { border-radius: 50px; padding: 12px 16px; color: #ffffff; background: #2563eb; font-size: 14px; font-weight: 700; white-space: nowrap; min-height: 44px; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); }
.compact-button:hover { background: #1d4ed8; }
.compact-button.danger { background: #dc2626; color: #ffffff; }
.management-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 12px; }
.row-art { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.row-art .product-art { height: 60px; }
.row-info { min-width: 0; flex: 1; }
.row-info b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.row-info small { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: 3px; }
.row-actions button { width: 40px; height: 44px; background: none; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.row-actions svg { width: 17px; height: 17px; }
.row-actions .danger { color: var(--danger); }
.row-symbol { display: grid; place-items: center; width: 44px; height: 44px; background: #202b4d; color: #7eb8f0; border-radius: 12px; font-weight: 750; flex-shrink: 0; border: 1px solid #304675; }
.owner-label { font-size: 14px; color: #7eb8f0; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(10, 12, 22, 0.7); backdrop-filter: blur(8px); }
.sheet { position: fixed; z-index: 51; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 560px); max-height: calc(var(--tg-viewport-height, 100dvh) - var(--top) - 16px); background: var(--bg); border-radius: 26px 26px 0 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 22px calc(22px + var(--bottom)); box-shadow: 0 -10px 50px rgba(0,0,0,0.5); border: 1px solid var(--line); border-bottom: 0; }
.sheet-handle { width: 34px; height: 4px; background: #304675; border-radius: 5px; margin: 0 auto 22px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sheet h2 { font-size: 27px; line-height: 1.15; }
.close-button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 26px; color: var(--muted); flex-shrink: 0; }
.cart-lines { display: grid; gap: 10px; }
.cart-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.cart-line .row-art { width: 56px; height: 56px; }
.cart-line .product-art { height: 56px; }
.cart-line b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.cart-line small { display: block; font-size: 14px; color: var(--muted); margin-top: 5px; }
.qty { display: flex; align-items: center; gap: 5px; }
.qty button { display: grid; place-items: center; width: 32px; height: 44px; background: var(--surface-2); font-size: 17px; border-radius: 9px; }
.qty b { width: 16px; text-align: center; font-size: 14px; }
.cart-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 24px 0 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.cart-summary span { flex: 1; }
.cart-summary small { display: block; font-size: 14px; margin-top: 7px; line-height: 1.6; color: var(--muted); max-width: 230px; }
.cart-summary strong { font-size: 23px; letter-spacing: -.04em; white-space: nowrap; }
.primary-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 20px; min-height: 52px; border-radius: 14px; font-size: 15px; font-weight: 750; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; text-decoration: none; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35); }
.primary-button > span { color: #ffffff; }
.primary-button:hover { background: linear-gradient(135deg, #1d4ed8, #2563eb); }
.primary-button.danger { background: #dc2626; color: #fff; box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3); }
.text-button { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 0; background: none; color: #7eb8f0; font-size: 14px; font-weight: 650; }
.text-button:hover { color: #9ec9f5; }
.text-button svg { width: 15px; height: 15px; }
.centered { justify-content: center; margin: 8px auto 0; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0 0 22px; }
.choice-grid input { position: absolute; opacity: 0; }
.choice-grid label > span { display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 15px; padding: 16px; background: var(--surface); font-size: 14px; cursor: pointer; }
.choice-grid small { font-size: 14px; color: var(--muted); line-height: 1.5; }
.choice-grid input:checked + span { background: #1e2848; border-color: #7eb8f0; }
.choice-grid input:focus-visible + span { outline: 2px solid #7eb8f0; }
.field { display: grid; gap: 9px; margin: 17px 0; font-size: 14px; font-weight: 650; min-width: 0; }
.field small { font-size: 14px; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: var(--surface); color: var(--text); font-size: 16px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: #7eb8f0; outline: none; box-shadow: 0 0 0 2px rgba(126, 184, 240, 0.25); }
.field input[type=color] { padding: 5px; height: 48px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .field { margin: 0; }
.check-field { display: flex; gap: 9px; align-items: center; padding: 12px 0; font-size: 14px; color: var(--muted); }
.checkout-notice { display: flex; gap: 10px; padding: 13px; border-radius: 12px; background: #1a223f; color: #b0bfdc; border: 1px solid #304675; margin: 18px 0; }
.checkout-notice svg { width: 17px; height: 17px; margin-top: 2px; color: #7eb8f0; }
.checkout-notice p { font-size: 14px; line-height: 1.7; }
.form-error { background: #35161c; border: 1px solid #7f232d; padding: 12px; border-radius: 12px; font-size: 14px; color: #fca5a5; margin: 12px 0; line-height: 1.6; }
.editor-note { color: var(--muted); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; margin-bottom: 18px; }
.detail-art { border-radius: 18px; margin-bottom: 22px; overflow: hidden; }
.detail-art .product-art { height: 240px; }
.detail-art .product-art svg { width: 80%; max-height: 220px; }
.detail-description { color: var(--muted); font-size: 13px; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; margin-bottom: 22px; }
.detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; font-size: 14px; }
.detail-meta .price { font-size: 28px; }
.toast { position: fixed; z-index: 100; top: calc(16px + var(--top)); left: 50%; transform: translate(-50%, -16px); width: min(calc(100% - 32px), 460px); padding: 14px 18px; border-radius: 14px; background: var(--acid); color: var(--bg); font-size: 14px; line-height: 1.6; box-shadow: 0 10px 30px rgba(18, 20, 30, 0.5); opacity: 0; transition: .2s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.gate { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 28px; text-align: center; background: var(--bg); }
.gate > .brand-mark { width: 66px; height: 66px; font-size: 38px; border-radius: 22px; margin-bottom: 26px; }
.gate h1 { font-size: 40px; margin: 0 0 18px; }
.gate p { color: var(--muted); font-size: 13px; max-width: 290px; line-height: 1.8; }
.gate .primary-button { width: auto; margin-top: 20px; justify-content: center; min-width: 150px; }
.loader { width: 24px; height: 24px; margin-top: 26px; border: 2px solid #304675; border-top-color: var(--blue-light); border-radius: 50%; animation: spin .8s linear infinite; }
.gate.denied .loader { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 380px) {
  .app { padding-inline: 14px; } .brand { font-size: 20px; } .brand small { font-size: 14px; }
  .hero { min-height: 260px; grid-template-columns: 1.7fr 1fr; } .hero-content { padding: 24px 0 24px 18px; }
  .hero h1 { font-size: 27px; } .hero-tag { font-size: 14px; padding: 6px; } .hero p { font-size: 14px; } .hero-link { padding: 10px 12px; font-size: 14px; gap: 8px; }
  .benefits span { font-size: 14px; gap: 3px; } .product-grid { gap: 10px; } .product-body, .product-bottom { padding-inline: 10px; }
  .product-body h3 { font-size: 13px; } .price { font-size: 14px; } .sheet { padding-inline: 16px; } .cart-line { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px; padding: 8px; }
  .cart-line .row-art { width: 40px; height: 48px; } .qty { gap: 3px; } .qty button { width: 28px; }
  .management-row { gap: 8px; padding: 10px; } .management-row .row-art { width: 44px; } .row-actions button { width: 34px; }
  .admin-tabs button { font-size: 14px; padding-inline: 6px; } .stat { padding: 12px 9px; } .stat strong { font-size: 20px; }
}
@media (min-width: 650px) {
  .app { padding-inline: 32px; } .hero { min-height: 340px; } .hero-content { padding: 40px; } .hero p { font-size: 14px; } .hero-link { font-size: 13px; }
  .hero-tag { font-size: 14px; } .hero-circle { width: 65%; } .hero-leaf { width: 100%; } .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .benefits { justify-content: center; gap: 48px; } .benefits span { font-size: 14px; } .product-art { height: 190px; } .product-body h3 { font-size: 17px; }
  .product-body, .product-bottom { padding-inline: 18px; } .product-description { font-size: 14px; min-height: 37px; } .product-category { font-size: 14px; }
  .price { font-size: 19px; } .welcome-line { font-size: 14px; } .telegram-label { font-size: 14px; }
  .sheet { bottom: max(16px, var(--bottom)); border-radius: 24px; max-height: calc(var(--tg-viewport-height, 100dvh) - var(--top) - 32px); }
  .admin-stats { gap: 16px; } .stat { padding: 20px; } .stat strong { font-size: 30px; } .stat span { font-size: 14px; }
}
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hero h1 { font-size: 56px; } .hero-leaf { width: 85%; } .hero { min-height: 370px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* O’Market : Thème Bleu Nuit & Électrique (#12141e, #1a1d2e, #7eb8f0, #2563eb, #304675) */
body { font-size: 16px; line-height: 1.5; }
h1, h2, h3 { line-height: 1.16; }
.brand small { font-size: 10px; letter-spacing: .09em; }
.brand-mark { background: linear-gradient(135deg, #2563eb, #7eb8f0); color: #ffffff; }
.notification-dot { color: #ffffff; font-size: 12px; font-weight: 700; background: #2563eb; }
.avatar { background: #202b4d; color: #7eb8f0; border: 1px solid #304675; }
.brand-dot, h1 > span, h2 > span { color: #7eb8f0; }
.eyebrow { font-size: 11px; letter-spacing: .12em; }
.hero { border: 1px solid #304675; border-radius: 20px; background: linear-gradient(135deg, #18203c, #131728); }
.hero-content { padding: 28px 0 28px 24px; }
.hero-tag { font-size: 10px; letter-spacing: .09em; }
.hero h1 { letter-spacing: -.05em; }
.hero p { font-size: 15px; line-height: 1.7; color: #b0bfdc; }
.hero-monogram { position: relative; color: #7eb8f0; font-size: clamp(70px, 16vw, 140px); font-weight: 800; letter-spacing: -.12em; line-height: 1; transform: rotate(-8deg); }
.hero-monogram span { display: block; font-size: 10px; letter-spacing: .34em; padding-left: 10px; margin-top: 8px; }
.hero-caption { font-size: 9px; right: 14px; letter-spacing: .12em; color: #7eb8f0; }
.hero-circle { width: 75%; opacity: .4; }
.benefits { flex-wrap: wrap; gap: 12px; justify-content: center; }
.benefits span { font-size: 12px; }
.tiny-dot { width: 7px; height: 7px; background: #7eb8f0; }
.telegram-label { font-size: 12px; }
.welcome-line { gap: 12px; }
.count-pill { font-size: 12px; background: #1e2644; color: #7eb8f0; border: 1px solid #304675; }
.search-box input::placeholder { font-size: 15px; color: var(--muted); }
.chip { border-radius: 12px; font-size: 14px; }
.catalog-tools { font-size: 13px; flex-wrap: wrap; }
.sort-label select { max-width: 170px; font-size: 13px; }
.stock-filter { min-height: 44px; }
.product-card { border-radius: 16px; display: flex; flex-direction: column; }
.product-open { flex: 1; }
.product-art { height: 150px; background: var(--surface-2); }
.product-art img { object-fit: cover; padding: 0; }
.product-body h3 { font-size: 17px; line-height: 1.3; }
.product-category { font-size: 11px; line-height: 1.6; letter-spacing: .045em; }
.product-description { font-size: 14px; min-height: 44px; }
.product-bottom { flex-wrap: wrap; gap: 12px; padding: 14px 12px; }
.price { font-size: 21px; }
.price small { font-size: 12px; }
.price del { display: block; font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.add-button { width: 100%; height: 44px; border-radius: 10px; font-size: 14px; font-weight: 700; background: #2563eb; color: #ffffff; }
.add-button.in-cart { background: #202b4d; color: #7eb8f0; font-size: 14px; border: 1px solid #304675; }
.add-button:disabled { opacity: 1; background: #1a1d2e; color: #9aa5c4; border: 1px solid #304675; }
.bottom-nav button { font-size: 13px; color: var(--muted); gap: 6px; }
.bottom-nav button.active { color: #7eb8f0; background: #202b4d; }
.cart-bar { background: linear-gradient(135deg, #1c2546, #161c33); color: var(--text); border: 1px solid #304675; }
.cart-bar small { color: #9aa5c4; font-size: 12px; }
.cart-bar strong { font-size: 15px; }
.cart-count { background: #2563eb; color: #ffffff; }
.primary-button { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; font-size: 16px; justify-content: center; }
.primary-button > span { color: inherit; }
.compact-button { border-radius: 12px; }
.text-button { font-size: 14px; color: #7eb8f0; }
.page-title > p:last-of-type { font-size: 15px; }
.order-items { font-size: 15px; }
.order-id { font-size: 14px; }
.order-meta, .order-date { font-size: 13px; }
.order-note { font-size: 14px; }
.order-total { font-size: 16px; }
.status { font-size: 12px; }
.admin-tabs button { flex: 1 0 auto; font-size: 13px; min-height: 46px; }
.admin-tabs button.active { color: #7eb8f0; }
.row-info b { font-size: 15px; }
.row-info small { font-size: 13px; }
.row-actions button { min-width: 44px; }
.order-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.order-filters .field { margin: 0; }
.seen-row { margin-top: 16px; }
.seen-button { background: #202b4d; color: #7eb8f0; border: 1px solid #304675; border-radius: 12px; min-height: 46px; padding: 10px 16px; width: 100%; font-size: 15px; font-weight: 600; }
.seen-label { color: #7eb8f0; font-size: 13px; }
.field { font-size: 14px; }
.field small { font-size: 12px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input[type=file] { padding: 10px; font-size: 13px; }
.field input[type=file]::file-selector-button { background: #2563eb; color: #ffffff; border: 0; border-radius: 8px; min-height: 40px; margin-right: 10px; font: inherit; padding: 8px 12px; }
.media-fields { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; margin-top: 22px; background: var(--surface); }
.media-fields legend { font-size: 15px; font-weight: 700; padding-inline: 6px; }
.editor-note { font-size: 14px; }
.choice-grid small, .cart-summary small, .checkout-notice p { font-size: 13px; }
.choice-grid label > span { font-size: 15px; }
.cart-line b { font-size: 14px; }
.cart-line small { font-size: 13px; }
.cart-summary { font-size: 15px; }
.qty button { min-width: 36px; }
.detail-description { font-size: 16px; }
.detail-meta { font-size: 14px; }
.product-video { display: block; width: 100%; max-height: 420px; border-radius: 14px; background: #0c0e18; margin-bottom: 20px; }
.announcements { display: grid; gap: 14px; padding-top: 24px; }
.announcement { padding: 22px; background: #1a1d2e; border: 1px solid #304675; border-radius: 16px; }
.announcement h2 { font-size: 23px; }
.announcement-body { font-size: 15px; line-height: 1.7; color: #b0bfdc; white-space: pre-line; overflow-wrap: anywhere; margin-top: 10px; }
.announcement img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; margin-top: 16px; }
.announcement .product-video { margin: 16px 0 0; }
.toast { background: #1e284a; color: var(--text); border: 1px solid #304675; font-size: 15px; }
@media (max-width: 440px) {
  .app { padding-inline: 16px; }
  .hero { min-height: 280px; grid-template-columns: 1fr; }
  .hero-content { padding: 24px; }
  .hero h1 { font-size: 32px; position: relative; z-index: 2; }
  .hero-visual { position: absolute; right: -20px; bottom: -26px; width: 145px; height: 145px; pointer-events: none; opacity: .18; }
  .hero-monogram { font-size: 100px; }
  .hero-caption, .hero-monogram span, .hero-circle { display: none; }
  .hero p { font-size: 14px; }
  .hero-tag { font-size: 10px; }
  .hero-link { font-size: 15px; padding: 12px 18px; }
  .benefits { justify-content: flex-start; gap: 8px 14px; }
  .brand small { font-size: 9px; }
  .telegram-label { font-size: 11px; }
  .product-grid { gap: 12px; }
  .product-body h3 { font-size: 16px; }
  .product-category { font-size: 10px; }
  .price { font-size: 20px; }
  .product-description { font-size: 13px; }
  .sheet { padding-inline: 16px; }
  .admin-tabs button { font-size: 13px; padding-inline: 10px; }
  .stat span { font-size: 12px; }
  .stat strong { font-size: 24px; }
  .row-art { width: 44px; height: 48px; }
  .row-actions { gap: 0; }
  .row-info b { font-size: 14px; }
  .order-head { flex-wrap: wrap; }
}
@media (min-width: 650px) {
  .hero-content { padding: 40px; }
  .hero p { font-size: 16px; }
  .hero-tag { font-size: 12px; }
  .hero-link { font-size: 16px; }
  .benefits span { font-size: 14px; }
  .product-art { height: 190px; }
  .product-body h3 { font-size: 19px; }
  .product-description { font-size: 15px; min-height: 48px; }
  .product-category { font-size: 12px; }
}
@media (max-width: 340px) {
  .brand small, .telegram-label { display: none; }
  .product-grid { grid-template-columns: 1fr; }
  .catalog-tools { display: grid; }
  .hero-content { padding: 18px; }
  .hero h1 { font-size: 29px; }
  .form-grid, .order-filters { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: minmax(0, 1fr) auto; }
  .cart-line .row-art { display: none; }
}

/* Les feuilles restent derrière les contenus et n'interceptent aucun geste. */
body { position: relative; isolation: isolate; background: var(--bg); }
.app { position: relative; z-index: 1; }
.ambient-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; background: radial-gradient(ellipse at 8% 12%, rgba(37,99,235,0.15), transparent 52%), radial-gradient(ellipse at 95% 80%, rgba(126,184,240,0.12), transparent 50%), linear-gradient(145deg, #12141e, #161a29 45%, #0f111a); }
.ambient-background::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 25%, #0a0c1488 100%); }
.leaf-track { position: absolute; left: var(--x); top: -90px; width: var(--size); height: var(--size); opacity: var(--opacity); animation: leaf-fall var(--fall) var(--delay) linear infinite; will-change: transform; }
.falling-leaf { display: block; width: 100%; height: 100%; background: url('/leaf-white.svg') center / contain no-repeat; animation: leaf-sway 11s var(--delay) ease-in-out infinite alternate; }
.ambient-background.paused .leaf-track, .ambient-background.paused .falling-leaf { animation-play-state: paused; }
.gate { background: #12141ebd; backdrop-filter: blur(10px); }
@keyframes leaf-fall {
  from { transform: translate3d(0, -10vh, 0); }
  to { transform: translate3d(var(--drift), calc(110vh + 120px), 0); }
}
@keyframes leaf-sway {
  from { transform: translateX(-12px) rotate(calc(var(--angle) - 30deg)); }
  to { transform: translateX(12px) rotate(calc(var(--angle) + 40deg)); }
}
.announcement-management { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--surface); }
.announcement-management .management-row { padding: 0; border: 0; border-radius: 0; }
.announcement-post { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.announcement-post p { flex: 1; min-width: 140px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.post-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; min-width: 105px; border-radius: 12px; padding: 10px 16px; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; font-size: 15px; font-weight: 700; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.post-button:disabled { background: #1f2742; color: #7e8fb5; opacity: 1; box-shadow: none; }
.broadcast-note { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
  .leaf-track { animation: none !important; top: var(--rest-y); transform: none; will-change: auto; }
  .falling-leaf { animation: none !important; transform: rotate(var(--angle)); }
}

/* Images entières et informations séparées des visuels. */
.product-art { aspect-ratio: 4 / 3; height: auto; min-height: 0; position: relative; }
.product-art img { object-fit: contain; width: 100%; height: 100%; padding: 0; }
.product-art > svg { width: 100%; height: 100%; }
.product-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.status-badge { position: static; display: inline-flex; font-size: 10px; line-height: 1.3; font-weight: 700; padding: 5px 7px; border-radius: 6px; }
.badge-new { color: #d6e8ff; background: #1f2e52; }
.badge-popular { color: #e5d2ff; background: #41354f; }
.badge-promo { color: #ffe1b4; background: #54422e; }
.badge-low { color: #f5deb5; background: #463f31; }
.badge-empty { color: #c4cac6; background: #353a37; }
.detail-art .product-art { aspect-ratio: 4 / 3; }
.variant-choices { border: 0; padding: 0; margin: 18px 0; display: grid; gap: 9px; }
.variant-choices legend { font-weight: 700; padding-bottom: 10px; }
.variant-choices label { cursor: pointer; display: flex; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; align-items: center; }
.variant-choices label:has(input:checked) { border-color: var(--blue-light); background: rgba(37,99,235,0.12); }
.variant-choices label:has(input:disabled) { opacity: .5; }
.variant-choices small, .recommendation small, .client-card small { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.variant-choices input { accent-color: var(--blue-electric); }
.quantity-field { max-width: 160px; }
.quantity-total { font-size: 20px; font-weight: 650; margin: 16px 0; }
.quantity-price-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.format-label { width: 100%; margin: 0 0 4px; font-weight: 650; }
.cart-format-select { flex: 1; max-width: 210px; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--text); padding: 6px; font: inherit; font-size: 14px; }
.cart-line .qty { min-width: 0; max-width: 100%; }
.pack-contents { display: block; margin: 8px 0; color: var(--muted); line-height: 1.6; }
.badge-pack { color: var(--blue-light); background: #1f2e52; }
.bundle-editor-row { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.quantity-price-editor-row { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.quantity-price-editor .compact-button { white-space: normal; }
.danger-zone { border-color: #d885854d; }
.danger-zone .compact-button { white-space: normal; width: 100%; text-align: center; min-height: 48px; }
.cart-quantity-input { width: 72px; min-width: 0; min-height: 44px; padding: 6px; text-align: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; }
.cart-quantity-input::-webkit-inner-spin-button { appearance: none; }
@media (max-width: 420px) {
  .cart-line .qty { grid-column: 2 / -1; justify-self: end; }
  .cart-line { grid-template-columns: 44px minmax(0, 1fr); }
  .cart-line .row-art { width: 44px; height: 44px; }
  .cart-line .row-art .product-art { height: 44px; }
}
/* Panier Vide Haut de Gamme */
.empty-cart-container { display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 4px 0 16px; }
.empty-cart-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 29, 46, 0.95), rgba(18, 20, 30, 0.85));
  border: 1px solid #304675;
  border-radius: 20px;
  padding: 28px 20px 22px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.empty-cart-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.35) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}
.empty-cart-icon-wrap {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(126, 184, 240, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7eb8f0;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.25);
}
.empty-cart-icon-wrap svg { width: 28px; height: 28px; }
.empty-cart-title { font-size: 19px; font-weight: 750; color: #f4f6fc; margin: 0 0 6px; letter-spacing: -0.02em; }
.empty-cart-desc { font-size: 13.5px; color: #9aa5c4; margin: 0 0 18px; line-height: 1.5; max-width: 280px; margin-inline: auto; }
.empty-cart-shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
  border: 0;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.empty-cart-shop-btn:hover { background: linear-gradient(135deg, #1d4ed8, #2563eb); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55); }
.empty-cart-shop-btn .btn-arrow { font-size: 16px; transition: transform .15s; }
.empty-cart-shop-btn:hover .btn-arrow { transform: translateX(3px); }

/* Suggestions & Produits Populaires */
.recommendations { margin-top: 6px; display: flex; flex-direction: column; gap: 12px; }
.recommendations-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.recommendations-title-wrap { display: flex; align-items: center; gap: 8px; }
.recommendations-sparkle { color: #7eb8f0; font-size: 14px; }
.recommendations-header h3 { font-size: 15px; font-weight: 700; color: #f4f6fc; margin: 0; }
.recommendations-pill {
  font-size: 11px;
  font-weight: 700;
  color: #7eb8f0;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(126, 184, 240, 0.25);
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.recommendations-grid { display: flex; flex-direction: column; gap: 10px; }
.recommendation-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #181c2b;
  border: 1px solid #293652;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform .15s, border-color .15s, background .15s;
}
.recommendation-card:hover {
  background: #1d2235;
  border-color: #3b82f6;
  transform: translateY(-1px);
}
.recommendation-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.recommendation-thumb {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  overflow: hidden;
  background: #0f111a;
  border: 1px solid #304675;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recommendation-thumb .rec-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recommendation-thumb .product-art {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.rec-video-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(18, 20, 30, 0.9);
  border: 1px solid #304675;
  color: #7eb8f0;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.recommendation-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.recommendation-category {
  font-size: 11px;
  font-weight: 650;
  color: #7eb8f0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.recommendation-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #f4f6fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recommendation-price {
  font-size: 13.5px;
  font-weight: 750;
  color: #9aa5c4;
}
.recommendation-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
  border: 0;
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
  transition: transform .15s, background .15s;
  white-space: nowrap;
}
.recommendation-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  transform: translateY(-1px);
}
.row-art .card-video-pill { display: none !important; }
.empty { min-height: 180px; }
.access-form { width: min(100%, 360px); text-align: left; margin: 8px 0 20px; }
.gate .access-form .primary-button { width: 100%; }
.choice-grid legend { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.promo-section { margin: 18px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.promo-section summary { cursor: pointer; font-weight: 650; }
.promo-section .field { margin-top: 14px; }
.promo-section p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.promo-section h3 { margin: 0; font-size: 16px; }
.quote-details > div { display: flex; justify-content: space-between; gap: 16px; margin: 10px 0; font-size: 13px; }
.quote-details > p { font-size: 12px; color: var(--blue-light); }
.variant-editor-row, .settings-card, .client-card { padding: 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; background: var(--surface); }
.variant-editor-row .field { margin: 0 0 12px; }
.settings-card h3 { margin-top: 0; }
.settings-card p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.settings-card dl { font-size: 13px; margin: 18px 0; }
.settings-card dt { color: var(--muted); margin-top: 10px; }
.settings-card dd { margin: 4px 0 0; }
.client-card { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.client-card .status { display: inline-block; margin-top: 10px; }
.client-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.admin-tabs button { flex-shrink: 0; }
.status.preparing { color: #ffe1b4; background: #54422e; }
.status.shipped { color: #c6deff; background: #2f4054; }
.cart-added { animation: cart-pop .5s ease-out; }
@keyframes cart-pop { 40% { transform: scale(1.5); box-shadow: 0 0 0 8px rgba(37,99,235,0.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cart-added { animation: none; } }

.detail-art .product-art { height: auto; aspect-ratio: 4 / 3; }
.row-art .product-art { height: 100%; aspect-ratio: 1; }
.gate { overflow-y: auto; justify-content: safe center; }
.gate > * { flex-shrink: 0; }

/* Mise à jour : opérations et communauté */
.cart-line .cart-remove { grid-column: 2 / -1; justify-self: end; padding: 8px 4px; min-height: 40px; }
#community-content .settings-card p, #admin-content details p { overflow-wrap: anywhere; }
#community-content input[readonly], #editor-content input[readonly] { user-select: all; }
#job-orders .primary-button { margin-top: 16px; }
#admin-content details > summary { cursor: pointer; padding: 8px 0; line-height: 1.6; }
#admin-content details .order-card { margin-top: 16px; }
.variant-bundle { margin-block: 12px; }
#shop-availability { padding: 14px; border: 1px solid var(--line); border-radius: 12px; line-height: 1.6; }
@media (max-width: 540px) { .cart-line .cart-remove { grid-column: 1 / -1; } }

/* Navigation, lisibilité et espaces selon le rôle — version 10 */
:root { font-size: 16px; }
body { line-height: 1.55; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.2; }
button, input, select, textarea { font-size: 16px; }
button { transition: background-color .15s, border-color .15s; }
button:focus-visible, a:focus-visible { outline: 3px solid #7eb8f0; }
.primary-button { min-height: 50px; font-weight: 750; }
.compact-button { min-height: 44px; font-size: 15px; padding: 10px 16px; }
.text-button { min-height: 44px; font-size: 15px; }
.field > span { font-size: 15px; line-height: 1.45; }
.field input, .field select, .field textarea { min-height: 48px; border-color: var(--line); padding: 12px 14px; }
.field input[readonly] { background: #151828; color: #dce5fa; }
.editor-note, .broadcast-note { font-size: 14px; line-height: 1.7; color: var(--muted); }
.settings-card { padding: 22px; background: #1a1d2e; border-color: var(--line); }
.settings-card h2, .settings-card h3 { margin-bottom: 12px; }
.settings-card > p { margin-block: 10px; line-height: 1.65; }
.settings-card small { font-size: 13px; color: var(--muted); }
.settings-card > .primary-button { margin-top: 16px; }
.settings-card details { margin-top: 18px; }
.settings-card summary { cursor: pointer; padding: 10px 0; font-weight: 650; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block: 14px; }
.button-row > button { flex: 1 1 140px; margin: 0; }
.section-intro { border-left: 3px solid var(--acid); padding: 4px 0 4px 18px; margin-block: 12px 20px; }
.section-intro p { margin-block: 10px; color: var(--muted); }
.page-title { padding-block: 30px 24px; }
.page-title h1 { font-size: clamp(30px, 5vw, 42px); margin-block: 8px 12px; }
.page-title > p:last-of-type { color: var(--muted); font-size: 16px; line-height: 1.65; }
.status { font-size: 13px; font-weight: 750; line-height: 1.4; padding: 7px 12px; border-radius: 10px; }
.form-error { padding: 12px; border: 1px solid #965d60; border-radius: 10px; background: #38292b; line-height: 1.6; }
.success-notice { padding: 12px 16px; background: #182846; border: 1px solid #304675; border-radius: 10px; color: #d6e8ff; }
.reviews-hero { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 24px; min-height: 290px; padding: 26px; background: linear-gradient(135deg, #18203c, #131728); border-color: #304675; }
.reviews-hero .hero-content { padding: 0; }
.reviews-hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.08; }
.reviews-hero p { font-size: 16px; }
.hero-review { display: grid; gap: 12px; padding: 24px; background: #1a1d2ee8; border: 1px solid #304675; border-radius: 16px; min-width: 0; }
.review-stars { color: #7eb8f0; font-size: 23px; letter-spacing: .12em; }
.hero-review blockquote { margin: 0; color: #f4f6fc; font-size: 17px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hero-review small { color: var(--muted); font-size: 13px; }
.community-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-block: 18px 26px; }
.community-shortcuts button { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 0 14px; padding: 20px; min-height: 102px; text-align: left; border: 1px solid #304675; border-radius: 16px; background: #1a1d2e; }
.community-shortcuts button:hover { background: #22263d; border-color: #7eb8f0; }
.community-shortcuts button > span { grid-row: span 2; color: #7eb8f0; font-size: 30px; }
.community-shortcuts b { font-size: 18px; color: #f4f6fc; }
.community-shortcuts small { font-size: 14px; color: #9aa5c4; }
.latest-reviews { margin-top: 42px; }
.latest-reviews .section-heading { align-items: center; gap: 12px; }
.reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.reviews-grid .settings-card { margin: 0; }
.reviews-grid p, #community-content p { overflow-wrap: anywhere; }
.segmented-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; background: #161928; border: 1px solid var(--line); border-radius: 14px; margin-block: 10px 24px; }
.segmented-nav button { flex: 1 1 90px; padding: 12px 10px; min-height: 48px; color: var(--muted); border-radius: 10px; background: transparent; font-size: 15px; font-weight: 650; }
.segmented-nav button.active { color: #ffffff; background: linear-gradient(135deg, #2563eb, #3b82f6); box-shadow: 0 2px 8px rgba(37,99,235,0.4); }
.referral-hero { background: linear-gradient(145deg, #18203c, #131728); border-color: #304675; }
.referral-hero h2 { font-size: 30px; }
.referral-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-block: 22px; }
.referral-stats > div { display: grid; gap: 5px; border-radius: 12px; background: #22263d99; border: 1px solid #304675; padding: 16px 10px; text-align: center; }
.referral-stats b { font-size: 26px; color: #7eb8f0; }
.referral-stats span { font-size: 13px; color: #b0bfdc; }
.contest-prize { font-size: 22px; color: #7eb8f0; font-weight: 750; }
.admin-menu-toggle { width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid #304675; border-radius: 14px; background: #1a1d2e; margin-block: 12px 24px; text-align: left; font-weight: 750; }
.admin-menu-toggle > span:first-child { font-size: 28px; }
.admin-menu-toggle > span:last-child { margin-left: auto; }
.admin-menu-toggle small { display: block; font-size: 14px; color: #9aa5c4; font-weight: 500; }
.admin-menu-sheet { max-width: 560px; }
.admin-menu-groups { display: grid; gap: 24px; padding-bottom: 16px; }
.admin-menu-groups h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: #7eb8f0; margin-bottom: 10px; }
.admin-menu-groups button { display: block; width: 100%; border: 1px solid var(--line); background: #1f2338; text-align: left; border-radius: 12px; padding: 14px 16px; margin-top: 8px; font-size: 17px; font-weight: 650; }
.admin-menu-groups button.active { border-color: #7eb8f0; background: #2563eb2b; }
.admin-menu-groups button span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; font-weight: 450; }
.admin-toolbar { flex-wrap: wrap; gap: 12px; }
.management-row { gap: 14px; padding: 16px; border-radius: 12px; }
.row-info b { font-size: 16px; }
.row-info small { font-size: 14px; line-height: 1.55; }
.row-actions { gap: 8px; }
.row-actions button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #1f2338; }
.product-art.has-video { padding: 0; overflow: hidden; }
.product-art.has-video .product-video { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; object-fit: cover; background: #0f111a; margin: 0; pointer-events: none; }
.product-video { aspect-ratio: 4 / 3; object-fit: cover; background: #0f111a; }
.detail-art .product-art.has-video { height: 100%; min-height: 220px; }
.product-body h3 { font-size: 18px; line-height: 1.35; }
.product-description { font-size: 14px; line-height: 1.6; }
.mission-card h2 { font-size: 21px; overflow-wrap: anywhere; }
.mission-card .order-head { flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.mission-card .order-head p { color: var(--muted); font-size: 14px; margin-top: 7px; }
.mission-items { margin-block: 18px; padding: 16px; background: #151827; border: 1px solid #304675; border-radius: 12px; }
.mission-items p + p { margin-top: 10px; }
.mission-contact { border: 1px solid var(--line); padding: 18px; border-radius: 12px; margin-block: 18px; }
.mission-contact p { margin-top: 10px; }
.mission-actions { display: grid; gap: 12px; margin-top: 18px; }
.mission-actions > button { width: 100%; margin: 0; }
.schedule-banner { background: #1b2642; color: #d6e8ff; border: 1px solid #304675; border-radius: 10px; padding: 12px 16px; margin-top: 16px; }
.conversation-workspace { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 1.6fr); gap: 20px; align-items: start; }
.conversation-list { display: grid; gap: 10px; max-height: 70vh; overflow-y: auto; }
.conversation-preview { display: block; width: 100%; text-align: left; background: #1a1d2e; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.conversation-preview.active { border-color: #7eb8f0; background: #22263d; }
.conversation-preview > span { display: block; color: #b0bfdc; font-size: 13px; margin-block: 7px; overflow-wrap: anywhere; }
.conversation-preview p { font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.unread-badge { display: inline-block; background: #2563eb; color: #ffffff; padding: 3px 8px; border-radius: 8px; font-size: 12px; margin-top: 8px; font-weight: 700; }
.conversation-thread { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: #161928; overflow: hidden; }
.conversation-header { padding: 18px; border-bottom: 1px solid var(--line); }
.conversation-header h2 { font-size: 19px; margin-block: 10px; overflow-wrap: anywhere; }
.conversation-header p { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.conversation-messages { display: flex; flex-direction: column; gap: 14px; max-height: 56vh; min-height: 180px; overflow-y: auto; padding: 20px; overscroll-behavior: contain; }
.chat-bubble { padding: 14px 16px; border-radius: 14px; max-width: 90%; border: 1px solid #304675; }
.chat-bubble p { white-space: pre-wrap; overflow-wrap: anywhere; margin-block: 6px 9px; line-height: 1.6; }
.chat-bubble small { font-size: 12px; line-height: 1.6; color: #9aa5c4; }
.chat-bubble.courier { align-self: flex-end; background: #2563eb; color: #ffffff; border-color: #3b82f6; border-bottom-right-radius: 3px; }
.chat-bubble.courier small { color: #d0e1fd; }
.chat-bubble.customer { align-self: flex-start; background: #1e2238; border-color: #304675; border-bottom-left-radius: 3px; }
.chat-bubble.system { align-self: center; background: transparent; text-align: center; border: 0; max-width: 100%; font-size: 13px; color: var(--muted); }
.chat-composer { padding: 18px; border-top: 1px solid var(--line); background: #1a1d2e; }
.chat-composer .primary-button { width: 100%; }
.chat-composer textarea { background: #12141e; border-color: #304675; }
#conversation-older { display: block; margin: 10px auto 0; }

/* Multi-Médias & Galerie Carousel */
.detail-gallery-wrap { width: 100%; margin: 0 0 16px; }
.product-gallery-view { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #0f111a; border: 1px solid #304675; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; }
.product-gallery-view.single-item { cursor: pointer; }
.gallery-media-item { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; background: #0f111a; }
.product-video-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #000; }
.product-video-wrap .product-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; margin: 0; pointer-events: none; }
.carousel-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.carousel-track { display: flex; width: 100%; height: 100%; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
.carousel-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; background: #0f111a; }
.carousel-slide .gallery-media-item { width: 100%; height: 100%; object-fit: contain; display: block; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(18, 20, 30, 0.75); border: 1px solid #304675; color: #f4f6fc; font-size: 22px; display: flex; align-items: center; justify-content: center; z-index: 5; cursor: pointer; backdrop-filter: blur(8px); transition: background .15s, border-color .15s; }
.carousel-arrow:hover { background: rgba(37, 99, 235, 0.85); border-color: #7eb8f0; }
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }
.carousel-counter-pill { position: absolute; bottom: 10px; right: 10px; background: rgba(18, 20, 30, 0.8); border: 1px solid #304675; color: #7eb8f0; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(8px); pointer-events: none; z-index: 5; }
.gallery-zoom-pill { position: absolute; top: 10px; right: 10px; background: rgba(18, 20, 30, 0.8); border: 1px solid #304675; color: #f4f6fc; font-size: 11px; font-weight: 650; padding: 5px 10px; border-radius: 20px; backdrop-filter: blur(8px); cursor: pointer; z-index: 5; display: inline-flex; align-items: center; gap: 5px; transition: background .15s, border-color .15s; }
.gallery-zoom-pill:hover { background: #2563eb; border-color: #7eb8f0; }
.card-video-pill { position: absolute; bottom: 8px; right: 8px; background: rgba(18, 20, 30, 0.85); border: 1px solid #304675; color: #7eb8f0; font-size: 11px; font-weight: 750; padding: 3px 8px; border-radius: 12px; backdrop-filter: blur(8px); pointer-events: none; z-index: 3; }

/* Lightbox Plein Écran */
#media-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; background: rgba(10, 12, 20, 0.96); backdrop-filter: blur(16px); }
.lightbox-toolbar { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + var(--top)) 16px 12px; border-bottom: 1px solid #304675; background: rgba(18, 20, 30, 0.85); flex-shrink: 0; z-index: 10; }
.lightbox-counter { font-size: 13px; font-weight: 750; color: #7eb8f0; background: rgba(37,99,235,0.18); border: 1px solid #304675; padding: 4px 12px; border-radius: 20px; }
.lightbox-actions { display: flex; gap: 8px; align-items: center; }
.lightbox-tool { background: #1a1d2e; border: 1px solid #304675; color: #f4f6fc; border-radius: 9px; padding: 8px 12px; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s; }
.lightbox-tool:hover { background: #22263d; border-color: #7eb8f0; }
.lightbox-close { font-size: 16px; min-width: 40px; min-height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; }
.lightbox-viewport { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; touch-action: none; }
.lightbox-slide-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.lightbox-image-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox-img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.7); cursor: zoom-in; user-select: none; -webkit-user-drag: none; transition: transform .2s ease-out; }
.lightbox-img.zoomed { cursor: grab; }
.lightbox-img.zoomed:active { cursor: grabbing; }
.lightbox-video-stage { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; }
.lightbox-video-player { max-width: 100%; max-height: 75vh; border-radius: 12px; border: 1px solid #304675; box-shadow: 0 12px 40px rgba(0,0,0,0.8); background: #000; outline: none; }
.lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(26, 29, 46, 0.85); border: 1px solid #304675; color: #f4f6fc; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; backdrop-filter: blur(10px); transition: background .15s, border-color .15s; }
.lightbox-arrow:hover { background: #2563eb; border-color: #7eb8f0; }
#lightbox-prev { left: 14px; }
#lightbox-next { right: 14px; }
.lightbox-hint { position: absolute; bottom: calc(14px + var(--bottom)); left: 50%; transform: translateX(-50%); background: rgba(18, 20, 30, 0.8); border: 1px solid #304675; color: #9aa5c4; font-size: 12px; padding: 5px 12px; border-radius: 20px; pointer-events: none; backdrop-filter: blur(8px); }

/* Stock Masqué Côté Client */
.stock-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.stock-pill.in-stock { color: #7eb8f0; background: rgba(126, 184, 240, 0.12); border: 1px solid #304675; }
.stock-pill.in-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7eb8f0; box-shadow: 0 0 6px #7eb8f0; animation: pulse-glow 2s infinite ease-in-out; }
.stock-pill.out-of-stock { color: #ff8595; background: rgba(255, 107, 129, 0.12); border: 1px solid rgba(255, 107, 129, 0.35); }
.stock-pill.out-of-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff6b81; }

/* Contact 100% Telegram */
.telegram-contact-pill { display: inline-flex; align-items: center; gap: 6px; color: #7eb8f0; font-weight: 700; text-decoration: none; }
.admin-tg-action { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #ffffff; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; border: 1px solid #3b82f6; box-shadow: 0 2px 10px rgba(37,99,235,0.3); transition: transform .15s, background .15s; }
.admin-tg-action:hover { background: #3b82f6; transform: translateY(-1px); }
.telegram-error-banner { padding: 10px 14px; border-radius: 8px; background: rgba(255, 107, 129, 0.15); border: 1px solid #ff6b81; color: #ff9ea9; font-size: 13px; margin-top: 8px; display: flex; align-items: center; gap: 8px; }

/* Paramètres Avancés de Quantité */
.advanced-quantity-settings { margin-top: 14px; padding: 12px 14px; border: 1px dashed #304675; border-radius: 12px; background: rgba(26, 29, 46, 0.6); }
.advanced-quantity-settings > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; padding: 4px 0; outline: none; }
.advanced-quantity-settings[open] > summary { margin-bottom: 12px; color: #7eb8f0; }

@media (max-width: 640px) {
  .app { padding-inline: 16px; }
  .reviews-hero { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 24px; min-height: 0; }
  .reviews-hero h1 { font-size: 36px; }
  .hero-review { padding: 18px; }
  .hero-review blockquote { font-size: 16px; -webkit-line-clamp: 3; }
  .community-shortcuts { gap: 8px; }
  .community-shortcuts button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 14px 5px; }
  .community-shortcuts button > span { font-size: 26px; }
  .community-shortcuts b { font-size: 14px; }
  .community-shortcuts small { font-size: 12px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .settings-card { padding: 18px; }
  .referral-stats { gap: 7px; }
  .referral-stats span { font-size: 12px; }
  .conversation-workspace { grid-template-columns: 1fr; }
  .conversation-workspace:not(.has-selection) .conversation-thread { display: none; }
  .conversation-workspace.has-selection .conversation-list { display: none; }
  .chat-bubble { max-width: 95%; }
  .chat-composer, .conversation-header, .conversation-messages { padding: 16px; }
  .mission-card h2 { font-size: 18px; }
  .brand small { font-size: 10px; }
  .product-body h3 { font-size: 16px; }
  .bottom-nav button { font-size: 13px; }
  .lightbox-arrow { width: 38px; height: 38px; font-size: 20px; }
  #lightbox-prev { left: 8px; }
  #lightbox-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }