/* Base UI styles.
   UI tokens (CSS variables) live in `assets/ui/tokens.css`. */

/* ── Bilingual data-lang show/hide ── */
/* :not(.lang-btn) ensures lang switcher buttons are never hidden */
[data-lang="zh"]:not(.lang-btn){ display:none !important; }
body.lang-zh [data-lang="ru"]:not(.lang-btn){ display:none !important; }
body.lang-zh [data-lang="zh"]:not(.lang-btn){ display:block !important; }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ height: calc(var(--vh, 1vh) * 100); min-height: calc(var(--vh, 1vh) * 100); }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background: var(--bg);
  overflow:hidden;
  overscroll-behavior: none;
}

.boot-screen{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--gap-4);
  background: var(--bg);
  z-index: var(--z-boot);
}

.boot-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--gap-1);
  padding: var(--gap-3);
  border-radius: var(--r);
  border:1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  min-width: 180px;
}

.boot-title{
  font-weight:700;
  font-size:16px;
}

.boot-sub{
  font-size:12px;
  color: var(--muted);
}

.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(700px 480px at 12% 10%, rgba(48,227,202,.16), transparent 60%),
    radial-gradient(620px 420px at 88% 18%, rgba(94,161,255,.18), transparent 60%),
    radial-gradient(760px 520px at 50% 120%, rgba(255,107,107,.10), transparent 70%);
  pointer-events:none;
}

a{ color:inherit; }
p{ margin:0; color:var(--muted); line-height:1.45; }
h1,h2{ margin:0; letter-spacing:.2px; }
h1{ font-size:18px; }
h2{ font-size:16px; }

button, input, textarea, select{ font: inherit; font-size:16px; }

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 0 var(--gap-2);
  line-height:1.3;
}

input, textarea, select{
  width:100%;
  border:1px solid var(--line);
  background-color: rgba(11,15,23,.55);
  color: var(--text);
  border-radius: var(--radius-field);
  padding: 12px 12px;
  font-size: 16px;
  outline:none;
  min-height: var(--control-h);
}
select{
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2378716c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}

textarea{ min-height:120px; resize: vertical; }

label > input,
label > textarea,
label > select{
  margin-top: var(--gap-1);
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(48,227,202,.45);
  box-shadow: 0 0 0 4px rgba(48,227,202,.12);
}

button{
  border:1px solid var(--line);
  background: rgba(17,28,47,.75);
  color: var(--text);
  padding: 11px 12px;
  border-radius: var(--radius-btn);
  cursor:pointer;
  font-size:16px;
  transition: transform var(--ease-default) ease, border-color var(--ease-default) ease, background var(--ease-default) ease;
  user-select:none;
  min-height: var(--btn-h);
}

button:hover{ transform: translateY(-1px); border-color: rgba(148,163,184,.35); }
button:active{ transform: translateY(0); }
button:disabled{ opacity:.65; cursor:default; transform:none; }
/* Generic form label (like inside <label> but as a div) */
.form-label{ font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:2px; }
/* Primary disabled: show as grey, not washed-out orange */
.btn.primary:disabled{
  background: rgba(148,163,184,.18);
  border-color: rgba(148,163,184,.25);
  color: var(--muted);
  opacity: 1;
}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn .material-symbols-outlined{ font-size:18px; line-height:1; }
.btn.primary{
  background: linear-gradient(135deg, rgba(48,227,202,.95), rgba(94,161,255,.75));
  border-color: rgba(48,227,202,.35);
  color:#061017;
  font-weight:800;
}
.btn.danger{ background: rgba(255,107,107,.15); border-color: rgba(255,107,107,.35); }
.btn.danger.soft{
  background: rgba(255,107,107,.08);
  border-color: rgba(255,107,107,.28);
  color: #de6b6b;
}
.btn.danger.soft:hover{
  border-color: rgba(255,107,107,.4);
}
.btn.ghost{ background: transparent; }

/* ── AI button ── */
.btn.ai{
  background: linear-gradient(135deg, rgba(255,140,0,.12), rgba(255,80,0,.08));
  border-color: rgba(255,140,0,.35);
  color: #e8930a;
  position: relative;
  overflow: hidden;
}
.btn.ai:hover{
  border-color: rgba(255,140,0,.55);
  background: linear-gradient(135deg, rgba(255,140,0,.20), rgba(255,80,0,.14));
}
.btn.ai .ai-icon{
  display: inline-flex;
  font-size: 15px;
  line-height: 1;
  filter: drop-shadow(0 0 3px rgba(255,160,0,.5));
}
/* Need-attention variant: brighter, stands out */
.btn.ai.ai-need{
  background: linear-gradient(135deg, rgba(255,140,0,.22), rgba(255,80,0,.16));
  border-color: rgba(255,140,0,.50);
  color: #f5a623;
  font-weight: 700;
}
.btn.ai.ai-need .ai-icon{
  filter: drop-shadow(0 0 6px rgba(255,160,0,.7));
}
/* Loading state */
.btn.ai.ai-loading{
  background: linear-gradient(135deg, rgba(255,140,0,.10), rgba(255,80,0,.06));
  border-color: rgba(255,140,0,.30);
  color: rgba(245,166,35,.75);
  pointer-events: none;
}
.btn.ai.ai-loading::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,160,0,.14) 50%, transparent 100%);
  animation: ai-shimmer 1.8s ease infinite;
}
@keyframes spin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}
@keyframes ai-shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}
/* Sparkle animation on the icon while loading */
.btn.ai.ai-loading .ai-icon{
  animation: ai-sparkle 1.2s ease-in-out infinite;
}
@keyframes ai-sparkle{
  0%,100%{ opacity:.5; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.2); }
}
/* Done flash */
.btn.ai.ai-done{
  background: linear-gradient(135deg, rgba(52,211,153,.15), rgba(255,140,0,.06));
  border-color: rgba(52,211,153,.40);
  color: #34d399;
}

/* AI status message chip (inline next to button or below) */
.ai-status-msg{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  animation: ai-msg-in .3s ease;
}
@keyframes ai-msg-in{
  from{ opacity:0; transform: translateY(4px); }
  to{ opacity:1; transform: translateY(0); }
}
.ai-status-msg.analyzing{ color: #f5a623; background: rgba(255,140,0,.10); }
.ai-status-msg.success{ color: #34d399; background: rgba(52,211,153,.10); }
.ai-status-msg.error{ color: #f87171; background: rgba(239,68,68,.10); }

/* Logistics AI button specific override */
.btn.ai.ai-lg{
  width: 100%;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}

/* A11y: visible keyboard focus across all interactive controls.
   Keep this global rule simple; component-specific focus can override it. */
:where(a, button, input, textarea, select, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-msg{
  font-size:12px;
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  background: rgba(94,161,255,.10);
  color: var(--text);
}
.auth-msg.error{
  background: rgba(255,107,107,.12);
  border-color: rgba(255,107,107,.35);
}
.auth-msg.success{
  background: rgba(48,227,202,.12);
  border-color: rgba(48,227,202,.35);
}
.auth-hints{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color: var(--muted);
}

.auth-role{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
.auth-role-btn{
  border-radius: 18px;
  padding: 10px 10px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
}
.auth-role-btn.active{
  border-color: rgba(48,227,202,.40);
  background: rgba(48,227,202,.10);
  color: var(--accent);
}

/* Segmented control (Products: Feed / Favorites) */
.seg{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.seg-btn{
  border-radius: 18px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.seg-btn.active{
  border-color: rgba(48,227,202,.40);
  background: rgba(48,227,202,.10);
  color: var(--accent);
}
.seg-count{
  display:inline-flex;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(48,227,202,.14);
  color: var(--accent);
  font-weight: 900;
  font-size: 12px;
}

.products-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-3);
}
.product-card{
  padding: var(--gap-3);
}
.product-photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.03);
}
.product-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.product-title{
  font-size: 13px;
  font-weight: 900;
  line-height: 1.22;
  margin-top: 10px;
  max-height: 2.44em;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.product-meta{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.product-price{
  font-weight: 900;
  font-size: 13px;
}
.product-actions{
  margin-top: 10px;
  display:flex;
  gap:10px;
}
.product-actions .btn{
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 14px;
}

.screen{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--gap-4) + var(--safe-top)) var(--gap-3) calc(var(--gap-4) + var(--safe-bot));
  position: relative;
  z-index: var(--z-base);
  min-height: calc(var(--vh, 1vh) * 100);
  height: calc(var(--vh, 1vh) * 100);
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

.screen-head{ margin-bottom: 14px; }

.brand-block{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 12px;
}

.logo{
  width:38px;
  height:38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(48,227,202,.95), rgba(94,161,255,.78));
  box-shadow: 0 14px 28px rgba(48,227,202,.20);
  flex:0 0 auto;
}

.brand{ font-size:16px; font-weight:700; letter-spacing:.6px; }
.brand-sub{ font-size:12px; color:var(--muted); }

.card{
  border:1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: var(--gap-3);
}

/* Spacing between cards should be controlled by parent containers (gap/margins),
   otherwise it becomes inconsistent (double-spacing) across screens. */

.stack{
  display:flex;
  flex-direction:column;
  gap: var(--gap-2);
}

.stack label{ margin-bottom: 0; }

.profile-card{
  display:flex;
  gap: var(--gap-2);
  align-items:flex-start;
  padding: var(--gap-2);
  border:1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel2);
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.profile-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background: rgba(15,23,42,.45);
  color: var(--muted);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 auto;
}

.profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.profile-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 2px;
  overflow: hidden;
}

.profile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--gap-1);
  min-width: 0;
}

.profile-name{
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-phone{
  font-size:12px;
  color: var(--muted);
}

.profile-badge{
  font-size:10px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(148,163,184,.12);
  color: var(--text);
  text-transform: lowercase;
  white-space:nowrap;
}

.profile-badge.role-client{
  border-color: rgba(94,161,255,.35);
  color:#cfe1ff;
  background: rgba(94,161,255,.12);
}

.profile-badge.role-buyer,
.profile-badge.role-cargo,
.profile-badge.role-cargo_admin{
  border-color: rgba(48,227,202,.35);
  color:#c6fff4;
  background: rgba(48,227,202,.12);
}

.profile-meta{
  margin-top: 4px;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  font-size:12px;
  color: var(--muted);
  width: 100%;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.client-card-link{
  cursor: pointer;
}

.client-card-link:focus{
  outline: 2px solid rgba(94,161,255,.45);
  outline-offset: 2px;
}

.client-card-disabled{
  opacity: 0.68;
  filter: grayscale(0.1);
}

.client-request-actions{
  margin-top: 8px;
  display:flex;
  gap: 8px;
}

.client-request-actions .btn{
  width: auto;
  min-height: 34px;
  padding: 8px 12px;
}

.buyer-profile-group{
  margin-top: 8px;
}

.form-msg-success{
  color:#14a44d;
}

.form-msg-error{
  color:#d9534f;
}

.profile-chip{
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(148,163,184,.10);
  color: var(--muted);
  white-space:nowrap;
}

/* Order type badges (Выкуп / Доставка / Самовыкуп) */
/* Order type badges (use .status-pill base class, inline with status) */
.status-pill.badge-purchase,
.status-pill.badge-delivery,
.status-pill.badge-self{
  margin: 0;
}
/* 3-color system: inactive (gray), active (orange), done (green) */
.badge-inactive{
  background:rgba(120,113,108,.10);
  color:#78716c;
  border-color:rgba(120,113,108,.20);
}
.badge-active{
  background:rgba(234,88,12,.12);
  color:#c2410c;
  border-color:rgba(234,88,12,.25);
}
.badge-done{
  background:rgba(22,163,74,.12);
  color:#15803d;
  border-color:rgba(22,163,74,.25);
}
/* Legacy aliases */
.badge-purchase{ background:rgba(22,163,74,.12); color:#15803d; border-color:rgba(22,163,74,.25); }
.badge-delivery{ background:rgba(37,99,235,.12); color:#1d4ed8; border-color:rgba(37,99,235,.25); }
.badge-self{ background:rgba(234,88,12,.12); color:#c2410c; border-color:rgba(234,88,12,.25); }

/* Client order tracking section */
.order-tracking-section{
  background: var(--card-bg, #fff);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #eee);
}
.order-track-icon{
  width:14px;height:14px;
  vertical-align:-2px;
  margin-right:4px;
  opacity:.6;
}
.order-track-hint{
  font-size:13px;
  color:var(--muted);
  padding:4px 0 2px;
}
.order-track-row{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 0;
}
.order-track-num{
  font-family:var(--mono, monospace);
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--text);
  word-break:break-all;
}

.delivery-meta-row{
  margin-top: 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 6px;
}

/* Tracking number row: number + carrier + refresh icon */
.delivery-track-row{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 2px 4px 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--divider, var(--line));
  background: var(--surface-2, var(--panel2));
  max-width: 100%;
  font-size: 13px;
}
.delivery-track-num{
  font-weight: 600;
  color: var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.delivery-track-com{
  font-size: 11px;
  color: var(--muted);
  white-space:nowrap;
}
.delivery-track-refresh{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.delivery-track-refresh:hover{
  background: var(--hover, rgba(0,0,0,.06));
  color: var(--brand, #FF5000);
}
.delivery-track-refresh:active{
  transform: rotate(180deg);
}
.delivery-track-refresh:disabled{
  opacity: .4;
  cursor: default;
  pointer-events: none;
}
.delivery-hint-edit{
  font-size: 12px;
  margin: 0;
}

.delivery-edit-grid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
  align-items:end;
}
.delivery-field{
  margin:0;
}
.delivery-field-wide{
  grid-column: auto;
}
.delivery-field-full{
  grid-column: 1 / -1;
}
.delivery-actions{
  grid-column: 1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}

@media (max-width: 420px){
  .delivery-edit-grid{
    grid-template-columns: 1fr;
  }
}

.profile-meta-text{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 100%;
}

.warehouse-photo-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.warehouse-photo{
  display:block;
  width:72px;
  height:72px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(148,163,184,.08);
}

.warehouse-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.profile-buyer-activity{
  border-top: 1px solid var(--line);
  padding-top: var(--gap-2);
  display:flex;
  flex-direction:column;
  gap: var(--gap-2);
}

#buyer-link-state{
  margin: 0;
}

#buyer-link-controls{
  margin-top: 0;
}

#buyer-link-controls .btn{
  flex: 1 1 180px;
}

#buyer-link-form{
  width: 100%;
}

#buyer-link-form .row .btn{
  flex: 1 1 160px;
}

#buyer-requests{
  margin: 0;
  font-size: 12px;
}

#buyer-requests-actions{
  gap: var(--gap-2);
}

.profile-avatar-preview{
  width:64px;
  height:64px;
  border-radius:50%;
  border:1px solid var(--line);
  background: rgba(15,23,42,.45);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.profile-avatar-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.item-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.item-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: var(--gap-1);
}

.item-title{
  font-weight:700;
  line-height:1.2;
}

.item-title-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}

.item-title-row > .item-title,
.item-title-row > .item-title-editor{
  flex:1;
  min-width:0;
}

/* ─── Favourite button — стиль идентичен .variant-remove (мусорка) ──────────
   Правило на будущее: все иконки-кнопки в карточке делаем по этому шаблону:
   • border:none; background:transparent  — никакого фона/обводки
   • color задаёт тон; SVG управляется через stroke/fill CSS, без inline-атрибутов
   • off → color:#c0c0c0 (светлее, outline)  on → color:#444 + fill (темнее)
   ─────────────────────────────────────────────────────────────────────────── */
.fav-btn{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c0c0c0;
  transition:color 0.18s, opacity 0.18s;
  opacity:0.9;
}

.fav-btn svg{
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* добавлено в избранное — темнее + залита */
.fav-btn.on{
  color:#444;
  opacity:1;
}

.fav-btn.on svg{
  fill:currentColor;
}

.fav-btn:active{
  opacity:0.35;
}

.item-title-editor{
  width:100%;
  min-width:0;
}

.item-title-editor .item-title-input{
  display:none;
}

.item-title-editor.is-editing .item-title-link{
  display:none;
}

.item-title-editor.is-editing .item-title-input{
  display:block;
}

.item-title-link{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  min-height:0;
  border-radius:0;
  width:100%;
  text-align:left;
  font-weight:700;
  line-height:1.2;
  color:var(--text);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(148,163,184,.45);
  text-underline-offset: 3px;
}

.item-title-link:hover,
.item-title-link:focus{
  transform:none;
  border-color:transparent;
  box-shadow:none;
  text-decoration-color: rgba(48,227,202,.75);
}

.item-title-input{
  width:100%;
  min-height:40px;
  padding: 8px 10px;
}

.item-market{
  margin-top: 2px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  min-width:0;
}

.market-badge{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(0,0,0,0.03);
}

.market-badge-1688{
  color: #1565c0;
  border-color: rgba(21,101,192,0.3);
  background: rgba(21,101,192,0.08);
}

.market-badge-taobao{
  color: #ff5000;
  border-color: rgba(255,80,0,0.35);
  background: rgba(255,80,0,0.1);
}

.market-badge-tmall{
  color: #d32f2f;
  border-color: rgba(211,47,47,0.3);
  background: rgba(211,47,47,0.08);
}

.market-badge-poizon{
  color: #6d28d9;
  border-color: rgba(109,40,217,0.3);
  background: rgba(109,40,217,0.1);
}

.market-badge-goofish{
  color: #0f766e;
  border-color: rgba(15,118,110,0.3);
  background: rgba(15,118,110,0.1);
}

.market-badge-alibaba{
  color: #ef6c00;
  border-color: rgba(239,108,0,0.35);
  background: rgba(239,108,0,0.1);
}

.market-badge-pinduoduo{
  color: #2e7d32;
  border-color: rgba(46,125,50,0.28);
  background: rgba(46,125,50,0.10);
}

.market-badge-temu{
  color: #00838f;
  border-color: rgba(0,131,143,0.28);
  background: rgba(0,131,143,0.10);
}

.market-badge-jd{
  color: #c62828;
  border-color: rgba(198,40,40,0.28);
  background: rgba(198,40,40,0.10);
}

.item-url{
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
}

.item-url-link{
  display:inline-block;
  max-width:100%;
  flex:1;
  min-width:0;
  color: var(--muted);
  text-decoration:none;
  font-size:12px;
  line-height:1.3;
  font-weight:400;
}

.item-url-link:hover,
.item-url-link:focus{
  color: var(--accent-2);
  text-decoration:underline;
}

.link-inline{
  appearance: none;
  border:0;
  background:transparent;
  padding:0;
  min-height: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  color: var(--accent-2);
  cursor:pointer;
  text-align:left;
  line-height: inherit;
  display: inline-block;
}

.link-inline:hover,
.link-inline:focus{
  transform: none;
  border-color: transparent;
  box-shadow: none;
  text-decoration:underline;
}

.history-toggle{
  margin-top:8px;
  font-size:12px;
}

.item-meta{
  line-height:1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.phone-filter-link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.phone-filter-link:hover{opacity:.7}

/* KPI chips (cart/order item cards) */
.item-kpis{
  display:grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.kpi-cell{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--bg-card, #f8f9fa);
  border: 1px solid var(--line);
  min-width: 0;
  white-space: nowrap;
}
.kpi-val{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.kpi-unit{
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.item-notes{
  display:flex;
  flex-direction:column;
  gap: var(--gap-1);
}

.item-ai-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--gap-2);
}


.status-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--status-pill-border);
  background: var(--status-pill-bg);
  font-size:11px;
  color: var(--status-pill-fg);
  margin: var(--gap-1) 0 var(--gap-2);
  width: fit-content;
  line-height: 1.2;
}

#order-view-list > .status-pill,
#buyer-order-items > .status-pill{
  margin-top: var(--gap-2);
}
.status-NEW{ background: var(--st-new-bg); border-color: var(--st-new-border); color: var(--st-new-fg); }
.status-VIEWED{ background: var(--st-viewed-bg); border-color: var(--st-viewed-border); color: var(--st-viewed-fg); }
.status-UPDATED{ background: var(--st-updated-bg); border-color: var(--st-updated-border); color: var(--st-updated-fg); }
.status-WAITING_PAYMENT{ background: var(--st-waitpay-bg); border-color: var(--st-waitpay-border); color: var(--st-waitpay-fg); }
.status-AWAITING_PAYMENT{ background: var(--st-waitpay-bg); border-color: var(--st-waitpay-border); color: var(--st-waitpay-fg); }
.status-PAID{ background: var(--st-paid-bg); border-color: var(--st-paid-border); color: var(--st-paid-fg); }
.status-PURCHASED{ background: var(--st-purchased-bg); border-color: var(--st-purchased-border); color: var(--st-purchased-fg); }
.status-DONE{ background: var(--st-done-bg); border-color: var(--st-done-border); color: var(--st-done-fg); }
.status-CANCELLED{ background: var(--st-cancelled-bg); border-color: var(--st-cancelled-border); color: var(--st-cancelled-fg); }

.item-photo{
  width:72px;
  height:72px;
  border-radius: 12px;
  object-fit: cover;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  flex:0 0 auto;
  overflow: hidden;
}
/* img внутри div-обёртки (PHP-рендеринг) */
.item-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.item-photo-btn{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  line-height:0;
  flex:0 0 auto;
  cursor:pointer;
}

.item-photo-btn:active{
  transform: scale(0.99);
}

.item-photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(148,163,184,.14), rgba(148,163,184,.08));
}

.item-photo-placeholder span{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--muted);
  user-select:none;
}
.item-photo-placeholder svg{
  width:28px;
  height:28px;
  stroke: var(--muted);
  opacity: .6;
}

.skeleton{
  position: relative;
  overflow: hidden;
}
.skeleton::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.05) 100%);
  transform: translateX(-100%);
  animation: shimmer 1.2s ease-in-out infinite;
}

@keyframes shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

.variant-block{
  margin-top: 10px;
}

.variant-label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.variant-input{
  width: 100%;
  border:1px solid var(--line);
  background: rgba(11,15,23,.55);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 16px;
  min-height: var(--control-h);
}

.item-actions{
  margin-top: var(--gap-3);
  display: flex;
  gap: var(--gap-2);
  flex-wrap: wrap;
}
.item-actions .btn{
  flex: 1 1 0;
  min-width: 0;
}

/* ── Order cards (.card.order-row) — HTMX PHP render + legacy JS render ── */
.order-row{
  padding: var(--gap-3);
}
.order-row .item-row{
  gap: 10px;
  align-items: flex-start;
}
.order-row .item-body{
  gap: 4px;
}
.order-row .item-title{
  font-size: 13px;
  line-height: 1.2;
}
.order-row .item-meta{
  font-size: 12px;
  line-height: 1.25;
}
.order-pills{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
}
.order-row .status-pill{
  margin: 0;
}
.order-row .item-actions{
  margin-top: 8px;
  flex-wrap: nowrap;
}
.order-row .item-actions .btn{
  flex: 1 1 0;
  min-width: 0;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.variant-rows{
  display:flex;
  flex-direction:column;
  gap: var(--gap-1);
  margin-top: var(--gap-2);
}
.variant-header,
.variant-row{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr 0.7fr 0.9fr 28px;
  gap: var(--gap-2);
  align-items:center;
}
.variant-header{
  font-size:11px;
  color: var(--muted);
  padding: 0;
}

/* Center numeric headers (qty/price).
   - Classic header (5 columns): qty=3, price=4
   - Compact header (color/size spans 1/3 via inline style): center all following spans */
.variant-header span:nth-child(3),
.variant-header span:nth-child(4){
  text-align: center;
}
.variant-header span[style*="grid-column:1/3"] ~ span{
  text-align: center;
}
.variant-row input{
  min-width:0;
}
.variant-row [data-field="qty"],
.variant-row [data-field="price_y"]{
  text-align: center;
}
.variant-row.readonly input{
  background: transparent;
  cursor: default;
  color: var(--text);
  border-color: var(--line);
}
.variant-row.readonly input:read-only{
  background: transparent;
}
/* Readonly div cells (order-detail) — plain text like cart .item-title-link */
.variant-row.readonly > div{
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(148,163,184,.45);
  text-underline-offset: 3px;
}
.variant-row.readonly > div:nth-child(2){
  text-align: center;
  text-decoration: none;
}
.variant-row.readonly > div:nth-child(3){
  text-align: right;
  text-decoration: none;
}
/* Header: Цена ¥ column right-aligned in order detail */
.order-detail-htmx .variant-header span:nth-child(3){
  text-align: right;
}
/* Readonly: drop the 28px delete-button column so price aligns to card edge */
.variant-rows.readonly .variant-header,
.variant-rows.readonly .variant-row.readonly{
  grid-template-columns: 1.2fr 1.2fr 0.7fr 0.9fr;
}
.variant-rows.readonly .variant-row.readonly > div:nth-child(4),
.variant-rows.readonly .variant-header > span:nth-child(4){
  display: none;
}
@media (max-width: 560px){
  .variant-rows.readonly .variant-header,
  .variant-rows.readonly .variant-row.readonly{
    grid-template-columns: 1.1fr 1.0fr 0.6fr 0.8fr;
  }
}
.variant-spacer{
  display:block;
  width:100%;
  height:100%;
}
.variant-add{
  margin-top: var(--gap-2);
  padding:0;
  border:0;
  background: transparent;
  color: var(--accent-2);
  font-size:12px;
  text-align:left;
  cursor:pointer;
}
.variant-remove{
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  background-color: transparent;
  width: 28px;
  height: 28px;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0.75;
  flex-shrink: 0;
}
.variant-remove:active{ opacity: 0.35; }
@media (max-width: 560px){
  .variant-header,
  .variant-row{
    grid-template-columns: 1.1fr 1.0fr 0.6fr 0.8fr 24px;
    gap: var(--gap-1);
  }
}

/* ─── Variant Picker ──────────────────────────────── */
/* One unified bordered container */
.variant-picker{
  margin-top: var(--gap-2);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
/* Header / toggle button */
.variant-picker-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  background: var(--surface-2, rgba(0,0,0,0.03));
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
}
.variant-picker--collapsed .variant-picker-title{
  border-bottom: none;
}
.variant-picker-chevron{
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  opacity: 0.6;
}
/* Collapse footer */
.variant-picker-footer{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.variant-picker-footer:active{ opacity: 0.55; }
/* Chips row (colors, sizes, others) */
.variant-picker-chips-row{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
/* Legacy alias */
.variant-picker-colors-row{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
/* Universal text chip (color/size/other) */
.variant-chip{
  height: 32px;
  padding: 0 11px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.variant-chip.active{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(253,130,65,.18);
  color: var(--accent);
}
.variant-chip.bilingual{
  width: auto;
  min-width: 44px;
  height: auto;
  min-height: 36px;
  padding: 4px 8px;
  text-align: center;
  white-space: normal;
}
/* Text-based color pill: auto-width, no wrapping */
.variant-color-opt{
  height: 32px;
  padding: 0 11px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.variant-color-opt.active{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(253,130,65,.18);
  color: var(--accent);
}
/* Image-based color swatch: fixed square */
.variant-color-opt.has-image{
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 9px;
  border-width: 2px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
}
.variant-color-opt.has-image.active{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(253,130,65,.3);
}
/* Image inside swatch */
.variant-color-opt .vc-img{
  width:100%; height:100%; object-fit:cover; display:block;
  position:absolute; top:0; left:0; border-radius:inherit;
}
/* Text fallback: hidden when image present, shown on img-fail */
.variant-color-opt .vc-img-fb{
  display:none; font-size:9px; font-weight:600; color:var(--text);
  line-height:1.15; text-align:center; padding:2px;
  word-break:break-all; overflow:hidden;
}
.variant-color-opt.img-fail{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; min-width:36px; height:auto; min-height:32px; padding:2px 6px;
  background:transparent;
}
.variant-color-opt.img-fail .vc-img-fb{ display:block; font-size:11px; }
/* Hint inside container */
.variant-picker-hint{
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 14px 12px;
}
/* Old-style action row (color-only products) */
.variant-picker-action{
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 10px 12px;
}
.variant-picker-color-label{
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  flex: 0 1 auto;
}
.variant-picker-price{
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  flex: 1;
}
.btn.sm{
  padding: 6px 16px;
  font-size: 13px;
  min-height: 34px;
}
/* ─── Variant SKU Table (inside picker, no extra border) ─ */
.variant-sku-table{
  /* inherits container border — no extra border */
}
.variant-sku-header{
  display: grid;
  grid-template-columns: 1fr auto 32px;
  gap: 8px;
  padding: 5px 12px 4px;
}
.variant-sku-header span{
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.variant-sku-row{
  display: grid;
  grid-template-columns: 1fr auto 32px;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.variant-sku-row:last-child{ border-bottom: none; }
.variant-sku-row.oos{ opacity: 0.4; }
.variant-sku-name{
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.variant-sku-price{
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
/* Light outline circle "+" button */
.variant-sku-add-btn{
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.1s, transform 0.08s;
}
.variant-sku-add-btn:active{
  opacity: 0.6;
  transform: scale(0.88);
}
/* ── Bilingual labels (CN · RU) ─────────────────────────────────────────── */
/* In picker color swatches */
.vc-cn{ display:block; font-size:10px; color:var(--muted); line-height:1.2; opacity:0.75; }
.vc-ru{ display:block; font-size:12px; font-weight:600; line-height:1.3; }
/* Bilingual color swatch button: auto-width, no max-width cap */
.variant-color-opt.bilingual{ width:auto; min-width:44px; height:auto; min-height:44px; padding:4px 8px; text-align:center; }
/* In picker SKU name column */
.variant-sku-name .vc-cn{ font-size:11px; }
.variant-sku-name .vc-ru{ font-size:13px; }
/* In cart variant rows */
.vb-cn{ font-size:11px; color:var(--muted); font-weight:400; }
.vb-ru{ font-size:13px; font-weight:700; }
.vb-sep{ color:var(--muted); font-size:11px; }
/* ─────────────────────────────────────────────────── */

.kpi-section{
  background: linear-gradient(180deg, rgba(255,80,0,0.06), rgba(255,255,255,0.9));
  border: 1px solid rgba(255,80,0,0.12);
}
.kpi-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--gap-2);
}
.kpi-month-select{
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size:12px;
  background:#fff;
  color: var(--text);
}
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: var(--gap-2);
}
@media (min-width: 421px){
  .kpi-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}
.kpi-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(18, 18, 18, 0.06);
  cursor:pointer;
  transition: transform var(--ease-default) ease, box-shadow var(--ease-default) ease;
}
@media (hover: hover){
  .kpi-card:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 18, 18, 0.08);
  }
}
.kpi-top{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 8px;
}
.kpi-icon{
  width:20px;
  height:20px;
  border-radius:6px;
  background: rgba(255,80,0,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,80,0,0.18);
}
.kpi-value{
  font-size:20px;
  font-weight:700;
  color: var(--text);
}
.kpi-label{
  margin-top: 4px;
  font-size:12px;
  color: var(--muted);
}
.kpi-note{
  margin-top: 6px;
  font-size:11px;
  color: var(--muted);
}
.kpi-card.is-loading{
  pointer-events:none;
}
.kpi-card.is-loading .kpi-value,
.kpi-card.is-loading .kpi-label{
  color: transparent;
  background: #eee;
  border-radius: 8px;
}
.kpi-card.is-loading .kpi-value{
  height: 22px;
  width: 70%;
}
.kpi-card.is-loading .kpi-label{
  height: 12px;
  width: 85%;
  margin-top: 8px;
}

.order-history{
  margin-top: var(--gap-2);
  padding-top: var(--gap-2);
  border-top: 1px dashed var(--divider, var(--line));
}
.event-list{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-top: 8px;
}
.event-row{
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-2, var(--panel2));
  border: 1px solid var(--divider, var(--line));
}
.event-title{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.event-detail{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.event-time{
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.order-cancel{
  margin-top: var(--gap-2);
}
.order-cancel-note{
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,80,0,0.08);
  border: 1px solid rgba(255,80,0,0.18);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text);
}
.order-detail-htmx{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* ── Item groups inside order detail ── */
.order-item-group{
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.order-item-group:last-of-type{
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.order-item-group .item-row{
  gap: 10px;
}
.order-item-group .item-title{
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.order-item-group .item-meta{
  font-size: 12px;
}

/* ── Status hint under pill in orders list ── */
.order-status-hint{
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 4px;
  line-height: 1.3;
}

/* Typewriter cycling word inside the hint */
.cycle-word{
  color: var(--accent, #f60);
  font-weight: 500;
  border-right: 1.5px solid var(--accent, #f60);
  padding-right: 1px;
  animation: cycle-cursor 0.7s step-end infinite;
}
@keyframes cycle-cursor{
  0%, 100% { border-color: var(--accent, #f60); }
  50%       { border-color: transparent; }
}

/* ── Status context block at top of order detail ── */
.order-status-context{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--surface-2, rgba(0,0,0,0.04));
  border: 1px solid var(--divider, var(--line));
  font-size: 13px;
  color: var(--text);
}
.order-status-ctx-icon{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  opacity: 0.7;
}
.order-status-ctx-text{ line-height: 1.3; }
.ctx-avatar{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: rgba(15,23,42,.45);
  color: #fff;
}
.ctx-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per-status tint */
.status-ctx-NEW              { background: rgba(120,120,120,0.08); }
.status-ctx-VIEWED           { background: rgba(80,120,255,0.08);  }
.status-ctx-UPDATED          { background: rgba(255,160,0,0.10);   }
.status-ctx-AWAITING_PAYMENT { background: rgba(255,100,0,0.08);   }
.status-ctx-PAID             { background: rgba(40,180,80,0.08);   }
.status-ctx-PURCHASED        { background: rgba(40,180,80,0.10);   }
.status-ctx-DONE             { background: rgba(40,180,80,0.12);   }

/* ── AWAITING_PAYMENT: prominent payment prompt block ── */
.order-payment-prompt{
  margin: 12px 0;
  padding: 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(255,100,0,0.22);
  background: rgba(255,100,0,0.05);
}
.order-payment-details-label{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #888);
  margin-bottom: 4px;
}
.order-payment-details-text{
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 10px;
  line-height: 1.5;
}
.order-payment-amount{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.order-payment-btn{
  width: 100%;
  opacity: 0.55;
}
.cancel-form{
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,80,0,0.18);
  background: rgba(255,248,244,0.9);
}
.cancel-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.cancel-grid textarea{
  min-height: 70px;
  resize: vertical;
}

.payment-box{
  margin-top: var(--gap-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.payment-box .section-title{
  margin-bottom: 6px;
}
.payment-info{
  margin-top: 6px;
  display: grid;
  gap: 4px;
}
.payment-row{
  font-size: 12px;
  color: var(--text);
}
.payment-proof-preview{
  margin-top: 8px;
}
.payment-proof-list{
  display:grid;
  gap: 8px;
}
.payment-proof-item{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--divider, var(--line));
  background: var(--surface-2, var(--panel2));
}
.payment-proof-thumb{
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--divider, var(--line));
  background: var(--surface, var(--panel));
}
.payment-proof-thumb.pdf{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.payment-proof-meta{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width: 0;
}
.payment-proof-name{
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.payment-proof-links{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
}
.payment-proof-comment{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.payment-proof-link{
  color: var(--accent-2);
  text-decoration: none;
}
.payment-proof-list.compact .payment-proof-item{
  padding: 6px;
}
.payment-proof-list.compact .payment-proof-thumb{
  width: 48px;
  height: 48px;
}
.payment-form{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.payment-review{
  margin-top: 10px;
  gap: var(--gap-2);
}
.payments-inline{
  margin-top: 8px;
}
.payments-history{
  margin-top: var(--gap-2);
}
.payments-list{
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.payment-item{
  border: 1px solid var(--divider, var(--line));
  border-radius: 12px;
  padding: 10px;
  background: var(--surface, var(--panel));
}
.payment-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.payment-item-amount{
  font-weight: 600;
  font-size: 13px;
}
.payment-item-status{
  font-size: 11px;
  color: var(--muted);
}
.payment-item-time{
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}
.payment-item-note{
  margin-top: 6px;
  font-size: 12px;
  color: var(--text);
}
.payment-ocr{
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--divider, var(--line));
  border-radius: 12px;
  background: var(--surface-2, rgba(0,0,0,0.04));
  font-size: 13px;
  color: var(--text);
}
.payment-ocr-title{
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #888);
  margin-bottom: 4px;
}
.payment-ocr-body{
  font-size: 12px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow-y: auto;
}
.payment-ocr-fields{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.payment-ocr-fields .ocr-field{
  font-size: 13px;
  line-height: 1.4;
}
.payment-ocr-fields .ocr-field .muted{
  color: var(--muted);
}
.payment-ocr-raw{
  margin-top: 6px;
}
.payment-ocr-raw summary{
  cursor: pointer;
  font-size: 11px;
  user-select: none;
}
.payment-ocr-raw .payment-ocr-body{
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  max-height: 160px;
}

.filters-row{
  margin-top: var(--gap-2);
  display:flex;
  flex-wrap: wrap;
  gap: var(--gap-1);
}
.filters-row select,
.filters-row input{
  flex: 1 1 120px;
  min-width: 0;
}
.filters-row .btn{
  flex: 0 0 auto;
}
.token-input-wrap{
  flex: 1 1 100%;
  min-width: 0;
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: rgba(11,15,23,.55);
  padding: 6px 8px;
}
.token-input-wrap input{
  flex: 1 1 180px;
  min-width: 120px;
  border: 0;
  background: transparent;
  padding: 4px 2px;
  min-height: 32px;
}
.token-input-wrap input:focus{
  box-shadow: none;
}
.buyer-filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}
.buyer-filter-chips-below{
  margin: 6px 0 2px;
}
.buyer-filter-chip{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--text);
  padding: 0 2px 0 10px;
  min-height: 32px;
  gap: 4px;
}
.buyer-filter-chip-text{
  font-size: 12px;
  line-height: 1.2;
}
.buyer-filter-chip-remove{
  appearance:none;
  border:0;
  background:transparent;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.buyer-filter-chip-remove:hover,
.buyer-filter-chip-remove:focus{
  color: var(--text);
  background: rgba(148,163,184,.14);
  transform: none;
}
.load-more-btn{
  margin: 12px auto 0;
  display: block;
}

/* Cargo admin: read-only blocks */
.mono.pre{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.hint{
  color:var(--muted);
  font-size:12px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.muted{ color:var(--muted); }

.chips{
  display:flex;
  flex-wrap:wrap;
  gap: var(--gap-1);
  margin: var(--gap-1) 0 var(--gap-2);
}
.link-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size:12px;
  line-height:1.2;
}
.chip-kind{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.02em;
  color: var(--muted);
}
.chip-x{
  margin-left:4px;
  font-weight:700;
}
.chip-warn{
  border-color: rgba(255,80,0,.4);
  background: rgba(255,80,0,.08);
}

.btn-stack{
  display:flex;
  flex-direction:column;
  gap: var(--gap-2);
}
.btn.full{
  width:100%;
}

.section-title{
  font-weight:700;
}

.switch{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.switch input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.switch-slider{
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: rgba(148,163,184,.3);
  border:1px solid rgba(148,163,184,.4);
  cursor: pointer;
  position:relative;
  transition: background var(--ease-slow) ease, border-color var(--ease-slow) ease;
}
.switch-slider::after{
  content:'';
  width:22px;
  height:22px;
  border-radius:50%;
  background: #fff;
  position:absolute;
  top:2px;
  left:2px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform var(--ease-slow) ease;
}
.switch input:checked + .switch-slider{
  background: var(--brand, var(--accent));
  border-color: var(--brand, var(--accent));
}
.switch input:checked + .switch-slider::after{
  transform: translateX(20px);
}

.order-expand{
  margin-top: var(--gap-2);
  display:flex;
  flex-direction:column;
  gap: var(--gap-2);
}
/* Shared embedded order-details mode used inside expandable list cards.
   Use `.card.*` specificity so theme-level `.card` styles don't re-apply
   background/shadow and create an extra outer frame. */
.card.order-view-embed,
.card.buyer-order-embed{
  border:0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}
.cargo-order-expand > .order-view-embed > .summary-box,
.order-expand > .order-view-embed > .summary-box,
.buyer-order-expand > .buyer-order-embed > .summary-box{
  border:0;
  box-shadow:none;
  background: transparent;
  padding:0;
  margin-bottom: 0;
}
.cargo-order-expand #cargo-order-items > .item-card:first-child,
.cargo-order-expand #cargo-order-items > .buyer-item-card:first-child,
.buyer-order-expand #buyer-order-items > .buyer-item-card:first-child{
  margin-top: var(--gap-2);
}
.buyer-save-main-wrap{
  margin-top: var(--gap-2);
}
.buyer-save-main-wrap .btn{
  width: 100%;
}
.buyer-cancel-link-wrap{
  margin-top: 8px;
}
.btn-link-muted{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  min-height: 0;
  color: #8f8f95;
  font-size: 13px;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-color: rgba(143,143,149,0.55);
  cursor:pointer;
}
.btn-link-muted:hover,
.btn-link-muted:focus{
  color: #7d7d83;
  text-decoration-color: rgba(125,125,131,0.65);
}
.btn-link-muted:disabled{
  color: #b9b9bf;
  text-decoration: none;
  cursor: default;
}
/* Order item card: consistent vertical rhythm, no nested card borders.
   Applies to both client order-items and buyer cabinet cards. */
.order-item,
.cabinet-order-card .order-item{
  padding: var(--gap-3);
}
/* Thin separator before delivery section */
.order-item .delivery-group-box,
.cabinet-order-card .delivery-group-box{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.order-item .item-actions{
  margin-top: 12px;
}
.order-actions{ flex-wrap:wrap; }
.order-actions .btn{ flex:1 1 140px; }
.summary-box.compact{ margin-top: var(--gap-1); }

/* Delivery section inside order-item card: flat, no nested frame. */
.delivery-group-box.delivery-flat{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.delivery-title{
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  margin: 0;
}
/* Section card for delivery: label editor, warehouse photos */
.delivery-section-card{
  background: var(--card-bg, #fff);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #eee);
  margin-top: 12px;
}
.delivery-section-card .delivery-title{
  margin-bottom: 8px;
}
.delivery-section-card .delivery-edit-grid{
  margin-top: 0;
}
/* Tracking status card (styled like payment-proof-item) */
.delivery-status-card{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--divider, var(--line));
  background: var(--surface-2, var(--panel2));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.delivery-status-label{
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}
.delivery-status-text{
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.delivery-status-translated{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  font-style: italic;
  margin-top: 2px;
}
/* Edit grid: tighter top spacing since parent gap handles it */
.delivery-group-box .delivery-edit-grid{
  margin-top: 0;
}

/* Auth landing (login page as a sales landing) */
.auth-screen{
  max-width: 1180px;
  padding-top: calc(var(--gap-3) + var(--safe-top));
}
.auth-landing{
  display:flex;
  flex-direction:column;
  gap: calc(var(--gap-4) + 6px);
}

.auth-hero-card{
  position:relative;
  border: 1px solid var(--divider, var(--line));
  border-radius: calc(var(--r) + 18px);
  background: linear-gradient(180deg, var(--surface, var(--panel)), var(--surface-2, var(--panel2)));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.auth-hero-card::before{
  content:'';
  position:absolute;
  inset:-160px -160px -160px -160px;
  background:
    radial-gradient(620px 420px at 14% 18%, var(--brand-weak, rgba(48,227,202,.12)), transparent 62%),
    radial-gradient(560px 380px at 88% 12%, var(--accent-2-weak, rgba(94,161,255,.16)), transparent 60%),
    radial-gradient(620px 420px at 48% 120%, rgba(255,107,107,.10), transparent 65%);
  pointer-events:none;
  animation: auth-bg-float 12s ease-in-out infinite alternate;
}
.auth-hero-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 28px, var(--divider, var(--line)) 28px 29px),
    repeating-linear-gradient(0deg, transparent 0 28px, var(--divider, var(--line)) 28px 29px);
  opacity: 0.05;
  pointer-events:none;
}
@keyframes auth-bg-float{
  from{ transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  to{ transform: translate3d(24px,16px,0) rotate(6deg) scale(1.03); }
}

@keyframes auth-gradient{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

.auth-hero-inner{
  position:relative;
  z-index: var(--z-base);
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 18px;
}
@media (min-width: 940px){
  .auth-hero-inner{
    grid-template-columns: 1.12fr 0.88fr;
    gap: 26px;
    padding: 28px;
    align-items:start;
  }
}

.auth-kicker{
  display:inline-flex;
  align-items:center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--divider, var(--line));
  background: var(--surface, var(--panel));
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2, var(--muted));
}
.auth-hero-title{
  margin: 14px 0 0;
  font-size: clamp(38px, 6.6vw, 66px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--text);
}
.auth-hero-accent{
  display:block;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--brand, var(--accent)), var(--accent-2, var(--accent)));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: auth-gradient 7.5s ease-in-out infinite;
}
.auth-dynamic-line{
  margin-top: 14px;
  display:flex;
  align-items:baseline;
  gap: 10px;
  flex-wrap:wrap;
}
.auth-dynamic-label{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3, var(--muted));
}
.auth-dynamic{
  display:inline-flex;
  align-items:baseline;
  font-size: clamp(22px, 4.6vw, 44px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  background: linear-gradient(90deg, var(--brand, var(--accent)), var(--accent-2, var(--accent)));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.18));
  animation: auth-gradient 6.5s ease-in-out infinite;
}
.auth-dynamic .caret{
  color: var(--brand, var(--accent));
  -webkit-text-fill-color: var(--brand, var(--accent));
  background: none;
  filter:none;
  margin-left: 6px;
  font-size: 1.12em;
}
.auth-hero-sub{
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-2, var(--muted));
  max-width: 62ch;
}

.auth-proof{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 640px){
  .auth-proof{ grid-template-columns: 1fr 1fr; }
}
.auth-proof-item{
  position:relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-2, var(--muted));
}
.auth-proof-item::before{
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  color: var(--brand, var(--accent));
  font-weight: 900;
}

.auth-hero-form{
  position:relative;
}
.auth-form-card{
  border-color: var(--brand-weak, rgba(48,227,202,.12));
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 70%),
    var(--surface, var(--panel));
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
}
.auth-form-card:focus-within{
  border-color: var(--brand, var(--accent));
  box-shadow:
    0 26px 70px rgba(0,0,0,.22),
    0 0 0 4px var(--brand-weak, rgba(48,227,202,.12));
}
@media (min-width: 940px){
  .auth-form-card{
    transform: translateY(10px);
  }
}
.auth-form-head{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.auth-form-title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
}
.auth-form-subtitle{
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-2, var(--muted));
}
.auth-mini-note{
  margin-top: 10px;
}

.auth-hero-footer{
  position:relative;
  z-index: var(--z-base);
  padding: 0 18px 18px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.auth-hero-footer .auth-proof{
  margin-top: 0;
}
@media (min-width: 940px){
  .auth-hero-footer{
    padding: 0 28px 28px;
    display:grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items:end;
  }
  .auth-proof{
    max-width: 560px;
  }
  .auth-flow{ grid-column: 2; justify-content:flex-end; }
  .auth-mock{ grid-column: 2; justify-content:flex-end; }
}
.auth-flow{
  margin: 0;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}
.auth-flow-pill{
  display:inline-flex;
  align-items:center;
  padding: 7px 11px;
  border-radius: 999px;
  border:1px solid var(--divider, var(--line));
  background: var(--surface-2, var(--panel2));
  color: var(--text);
  font-size: 12px;
  letter-spacing: .02em;
}
.auth-flow-sep{
  color: var(--text-3, var(--muted));
  font-size: 12px;
}

.auth-mock{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.auth-mock-card{
  --rot: 0deg;
  width: 180px;
  max-width: 50vw;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--divider, var(--line));
  background:
    radial-gradient(220px 120px at 20% 20%, var(--brand-weak, rgba(48,227,202,.12)), transparent 60%),
    var(--surface, var(--panel));
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  backdrop-filter: saturate(140%) blur(10px);
  transform: rotate(var(--rot));
  animation: auth-float 7.5s ease-in-out infinite;
}
.auth-mock-a{ --rot: -2deg; animation-delay: 0s; }
.auth-mock-b{ --rot: 1.4deg; animation-delay: 1.2s; }
.auth-mock-c{ --rot: -1.2deg; animation-delay: 2.1s; }
@keyframes auth-float{
  0%, 100%{ transform: translateY(0) rotate(var(--rot)); }
  50%{ transform: translateY(-10px) rotate(var(--rot)); }
}
.auth-mock-k{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3, var(--muted));
}
.auth-mock-title{
  margin-top: 6px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--text);
}
.auth-mock-meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-2, var(--muted));
}

.auth-section{
  padding: 18px;
  border-radius: calc(var(--r) + 14px);
  border: 1px solid var(--divider, var(--line));
  background: var(--surface, var(--panel));
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
}
.auth-section::before{
  content:'';
  position:absolute;
  inset:-140px -140px -140px -140px;
  background:
    radial-gradient(520px 360px at 10% 10%, var(--accent-2-weak, rgba(94,161,255,.16)), transparent 60%),
    radial-gradient(520px 360px at 90% 30%, var(--brand-weak, rgba(48,227,202,.12)), transparent 60%);
  opacity: 0.45;
  pointer-events:none;
}
.auth-section > *{ position:relative; z-index: var(--z-base); }

.auth-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.auth-section-title{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}
.auth-section-sub{
  margin:0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-2, var(--muted));
  max-width: 70ch;
}

.auth-benefits{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px){
  .auth-benefits{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 940px){
  .auth-benefits{ grid-template-columns: 1fr 1fr 1fr; }
}
.auth-benefit{
  padding: 14px;
  border-radius: calc(var(--r2) + 6px);
  border: 1px solid var(--divider, var(--line));
  background: var(--surface-2, var(--panel2));
  transition: transform var(--ease-default) ease, border-color var(--ease-default) ease, box-shadow var(--ease-default) ease;
}
.auth-benefit:hover{
  transform: translateY(-2px);
  border-color: var(--brand-weak, rgba(48,227,202,.12));
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.auth-benefit-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--divider, var(--line));
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--brand, var(--accent));
  background:
    radial-gradient(260px 180px at 20% 20%, var(--brand-weak, rgba(48,227,202,.12)), transparent 55%),
    var(--surface, var(--panel));
}
.auth-icon{
  width: 22px;
  height: 22px;
}
.auth-benefit-title{
  margin-top: 10px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
}
.auth-benefit-text{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-2, var(--muted));
}

.auth-steps{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 760px){
  .auth-steps{ grid-template-columns: 1fr 1fr; }
}
.auth-step{
  position:relative;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: calc(var(--r2) + 6px);
  border: 1px solid var(--divider, var(--line));
  background: var(--surface-2, var(--panel2));
}
.auth-step::before{
  content:'';
  position:absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand, var(--accent)), var(--accent-2, var(--accent)));
  opacity: 0.25;
}
.auth-step-num{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 13px;
  font-weight: 900;
  color: var(--brand, var(--accent));
  border: 1px solid var(--divider, var(--line));
  background: var(--brand-weak, rgba(48,227,202,.12));
}
.auth-step-title{
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
}
.auth-step-text{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-2, var(--muted));
}

.auth-for{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 820px){
  .auth-for{ grid-template-columns: 1fr 1fr 1fr; }
}
.auth-for-card{
  position:relative;
  padding: 14px;
  border-radius: calc(var(--r2) + 6px);
  border: 1px solid var(--divider, var(--line));
  background: var(--surface-2, var(--panel2));
  overflow:hidden;
}
.auth-for-card::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, var(--brand-weak, rgba(48,227,202,.12)), transparent 55%);
  opacity: 0.9;
  pointer-events:none;
}
.auth-for-client::before{ background: linear-gradient(135deg, var(--accent-2-weak, rgba(94,161,255,.16)), transparent 55%); }
.auth-for-buyer::before{ background: linear-gradient(135deg, var(--brand-weak, rgba(48,227,202,.12)), transparent 55%); }
.auth-for-cargo::before{ background: linear-gradient(135deg, rgba(255,107,107,.10), transparent 55%); }
.auth-for-card > *{ position:relative; z-index: var(--z-base); }
.auth-for-role{
  font-size: 14px;
  font-weight: 900;
  color: var(--text);
}
.auth-for-text{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-2, var(--muted));
}

@media (prefers-reduced-motion: reduce){
  .auth-hero-card::before{ animation: none; }
  .auth-mock-card{ animation: none; }
  .auth-hero-accent{ animation: none; }
  .auth-dynamic{ animation: none; }
  .caret{ animation: none; }
}

/* Legacy auth hero (typewriter). Kept for compatibility. */
.hero-title{
  margin: var(--gap-3) 0 var(--gap-2);
}
.hero-line{
  font-size: 28px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .4px;
  color: var(--text);
}
.hero-accent{
  color: var(--brand, #ff5000);
}
.caret{
  display: inline-block;
  margin-left: 4px;
  animation: blink 1s steps(1, end) infinite;
}
@keyframes blink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0; }
}
@media (max-width: 360px){
  .hero-line{ font-size: 24px; }
}

.row{ display:flex; gap:var(--gap-2); flex-wrap:wrap; align-items:center; width:100%; }
.row input{ flex:1; min-width:160px; }
.row > span{ display:block; }

#buyer-requests{ margin-top: 0; display:block; }
#buyer-requests-actions{
  margin-top: 0;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap: var(--gap-2);
}

.buyer-request-card{
  width:100%;
  display:flex;
  flex-direction:column;
  gap: var(--gap-2);
  padding: var(--gap-2);
  border:1px solid var(--line);
  border-radius: var(--r2);
  background: var(--panel2);
}
#buyer-requests-actions .row{ align-items:flex-start; }


/* App shell */
#app{
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  z-index: var(--z-base);
  min-height: calc(var(--vh, 1vh) * 100);
  display:flex;
  flex-direction:column;
  height: calc(var(--vh, 1vh) * 100);
}

#topbar{
  position: static;
  z-index: var(--z-base);
  padding: calc(var(--gap-3) + var(--safe-top)) var(--gap-3) var(--gap-2);
  background: transparent;
  border-bottom: 0;
}

#topbar-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap-2); row-gap: var(--gap-2); flex-wrap:nowrap; }

.brand-block{
  display:flex;
  align-items:center;
  gap: var(--gap-2);
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  flex:1 1 auto;
  min-width:0;
}
#logo-home{ cursor: pointer; }
.brand-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-row{ display:flex; align-items:center; gap:8px; }
.brand-sub{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap: var(--gap-2);
  flex-wrap:nowrap;
  min-width: 0;
  flex:0 0 auto;
}
.topbar-rates{
  display:flex;
  flex-direction: column;
  gap: 2px;
  align-items:flex-start;
  font-size:12px;
  color: var(--muted);
  background: transparent;
  border:0;
  border-radius: 0;
  padding:0;
}
.topbar-rates b{
  color: var(--text);
}

@media (max-width: 420px){
  #topbar{ padding: calc(var(--gap-2) + var(--safe-top)) var(--gap-2) var(--gap-2); }
  .logo{ width:34px; height:34px; border-radius: 10px; }
  .brand{ font-size:15px; }
  .version-pill{ padding:4px 8px; font-size:10px; }
  .topbar-rates{ font-size:11px; }
  .bell{ padding:4px 8px; }
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(15,23,42,.55);
  color: var(--muted);
  font-size: 12px;
}

.version-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(94,161,255,.12);
  font-size:11px;
  color: var(--muted);
}

/* Language switcher */
.lang-switcher{
  display:flex;
  align-items:center;
  gap:2px;
  background:var(--surface,rgba(255,255,255,.08));
  border:1px solid var(--border,var(--line));
  border-radius:999px;
  padding:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.lang-btn{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  min-height:0 !important;
  color:var(--text-2);
  font-size:11px;
  font-weight:700;
  line-height:1;
  padding:4px 10px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s,color .15s;
  letter-spacing:.02em;
  transform:none !important;
}
.lang-btn.active{
  background:var(--brand,#FF5000) !important;
  color:#fff !important;
}
.lang-btn:not(.active):hover{
  color:var(--text);
  background:rgba(0,0,0,.06) !important;
}

.bell{
  border:1px solid var(--line);
  background: rgba(15,23,42,.55);
  color: var(--text);
  padding:6px 10px;
  border-radius: 999px;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.bell .material-symbols-outlined{
  font-size:20px;
  line-height:1;
}

.bell.has-new{
  border-color: rgba(255,80,0,.45);
  box-shadow: 0 0 0 2px rgba(255,80,0,.15);
  position: relative;
}
.bell.has-new::after{
  content:'';
  position:absolute;
  top:2px;
  right:2px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff5000;
  box-shadow: 0 0 0 2px var(--panel);
}

.debug-panel{
  position: fixed;
  top: calc(var(--gap-3) + var(--safe-top));
  right: var(--gap-3);
  left: var(--gap-3);
  z-index: var(--z-overlay);
  width: min(92vw, var(--maxw));
  max-height: 60vh;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px;
  overflow: hidden;
  margin: 0 auto;
}

.debug-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: var(--gap-2);
  gap: var(--gap-2);
}
.debug-head .row{ gap: var(--gap-1); }
#debug-close{
  width:32px;
  height:32px;
  padding:0;
  font-size:18px;
  line-height:1;
}

.debug-list{
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  max-height: 45vh;
  font-size: 12px;
  color: var(--text);
}

.debug-item{
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,107,107,.08);
  border: 1px solid rgba(255,107,107,.25);
  margin-bottom: 6px;
  word-break: break-word;
}

.notice-item{
  background: rgba(94,161,255,.12);
  border-color: rgba(94,161,255,.35);
}

.notice-item.notice-request{
  background: rgba(48,227,202,.12);
  border-color: rgba(48,227,202,.35);
}

.notice-item.notice-status{
  background: rgba(255,138,101,.12);
  border-color: rgba(255,138,101,.35);
}

.notice-item.notice-debug{
  background: rgba(255,107,107,.08);
  border-color: rgba(255,107,107,.25);
}

.notice-time{
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

#rates{
  display:grid;
  gap:var(--gap-2);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items:stretch;
}

.rate-card{
  display:flex;
  align-items:center;
  gap:var(--gap-1);
  border:1px solid var(--line);
  border-radius: var(--radius-field);
  background: rgba(15,23,42,.55);
  padding: 6px 10px;
  box-shadow: none;
}

.rate-card > div:first-child{ font-size:12px; color:var(--muted); }
.rate-value{ margin:0; }
.rate-value b{ font-size:14px; }
.rate-card input{
  width: 90px;
  padding: 6px 8px;
  font-size: 16px;
}

#main{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--gap-3) calc(var(--nav-h) + var(--safe-bot) + var(--gap-4));
}

#main > section{
  margin-bottom: var(--gap-4);
}

#main > section:last-child{
  margin-bottom: var(--gap-3);
}

/* Default vertical rhythm for every cabinet tab. */
#main > section[data-tab]{
  display:flex;
  flex-direction:column;
  gap: var(--gap-3);
}

#main > section[data-tab] > .section-head{
  margin-bottom: 0;
}

#main > section[data-tab] > .load-more-btn{
  margin-top: 0;
}

.section-head{
  margin-bottom: var(--gap-2);
  display:flex;
  flex-direction:column;
  gap: var(--gap-1);
}
.section-head.row{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.section-head h2{
  margin-bottom: var(--gap-1);
}
.section-head p{ margin-top: var(--gap-1); }

#cart-list,
#favorites-list,
#orders-list,
#orders-list-container,
#order-view-list,
#preview-list,
#buyer-order-items,
#cargo-order-items,
#buyer-orders-list,
#buyer-clients-list,
#cargo-orders-list,
#cargo-clients-list,
#cargo-buyers-list,
#delivery-orders-list{
  display:flex;
  flex-direction:column;
  gap: var(--gap-3);
}

#buyer-clients-list{
  margin-top: 0;
}


#cart-totals{
  display:flex;
  flex-direction:column;
  gap: var(--gap-2);
}

.totals{
  display:flex;
  gap:var(--gap-2);
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  width:100%;
}

.totals-main{ font-size:16px; }
.totals label{ flex:1; min-width:180px; }

.summary-box{
  border:1px solid var(--line);
  border-radius: var(--r2);
  background: rgba(11,15,23,.45);
  padding: var(--gap-2);
  margin-bottom: var(--gap-2);
  width:100%;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: var(--gap-2);
  font-size: 13px;
}
.summary-row + .summary-row{ margin-top: var(--gap-1); }
.summary-row.total .totals-main{ font-size: 18px; }

.summary-value-btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  min-height:0;
  color: inherit;
  cursor:pointer;
  text-decoration: underline;
  text-decoration-color: rgba(127,127,127,0.45);
  text-underline-offset: 2px;
}

.summary-value-btn:hover,
.summary-value-btn:focus{
  text-decoration-color: rgba(127,127,127,0.75);
}

.summary-inline-edit{
  margin-top: 6px;
  margin-bottom: 4px;
}

.summary-inline-edit input{
  width: 100%;
}

.summary-inline-edit-inline{
  margin: 0;
  width: min(160px, 44vw);
  margin-left: auto;
}

.summary-inline-edit-inline input{
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  text-align: right;
}

#order-view .totals,
#order-preview .totals{
  margin-top: var(--gap-2);
}

#order-view .row,
#order-preview .row{
  margin-top: var(--gap-2);
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap-2);
}

#order-view .row .btn,
#order-preview .row .btn{
  width: 100%;
}

#buyer-order-view .row{
  margin-top: var(--gap-2);
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap-2);
}

#cargo-order-view .row{
  margin-top: var(--gap-2);
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap-2);
}

#buyer-order-view .row .btn,
#cargo-order-view .row .btn{
  width: 100%;
}

#bottom-nav{
  position: fixed;
  left:50%;
  transform: translateX(-50%);
  bottom:0;
  width: min(100%, var(--maxw));
  height: calc(var(--nav-h) + var(--safe-bot));
  display:flex;
  justify-content:space-between;
  gap: 4px;
  padding: 6px 10px calc(6px + var(--safe-bot));
  background: rgba(12,18,28,.88);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.25);
  z-index: var(--z-nav);
}

.progress{
  margin-top: 8px;
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}

.progress .bar{
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, rgba(48,227,202,.9), rgba(94,161,255,.9));
  animation: progress-move 1.2s ease-in-out infinite;
}

@keyframes progress-move{
  0%{ transform: translateX(-80%); }
  50%{ transform: translateX(10%); }
  100%{ transform: translateX(120%); }
}

.nav-btn{
  flex: 1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 3px;
  padding: 6px 4px;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nav-inactive);
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .1px;
  transition: background var(--ease-default) ease, color var(--ease-default) ease, transform var(--ease-fast) ease;
}

.nav-btn:hover{
  transform: none;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}

.nav-btn:active{
  transform: translateY(1px);
}

.nav-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,80,0,.22);
}

.nav-btn.active{
  color: var(--nav-active);
  background: var(--nav-active-bg);
  border-color: rgba(255,80,0,.16);
}

.nav-ico{
  position: relative;
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-ico svg{
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-label{
  font-weight: 700;
  font-size: 11px;
}

.nav-count{
  position: absolute;
  top: -8px;
  right: -14px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--nav-active);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 2px solid var(--surface);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.cart-item.flash{
  animation: cart-flash 1.1s ease-out 1;
}

.cart-item{
  /* Keep item card spacing consistent with other cards. */
  padding: var(--gap-3);
  background: var(--panel);
  border-color: var(--line);
}

/* Cart item actions: keep 2-3 buttons in one row (v1.90 layout). */
.cart-item .item-actions{
  flex-wrap: nowrap;
}

.cart-item .item-actions .btn{
  flex: 1 1 0;
  min-width: 0;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item.ai-done{
  border-color: rgba(48,227,202,.35);
}

.cart-item.ai-loading{
  border-color: rgba(94,161,255,.35);
}

.cart-item.ai-error{
  border-color: rgba(255,107,107,.35);
}

.cart-items-head{
  margin-top: var(--gap-3);
}

@keyframes cart-flash{
  0%{ box-shadow: 0 0 0 0 rgba(255,80,0,0); }
  25%{ box-shadow: 0 0 0 4px rgba(255,80,0,.25); }
  100%{ box-shadow: 0 0 0 0 rgba(255,80,0,0); }
}

#tab-profile .card{ margin-bottom: 0; }
#btn-logout{ margin-top: 0; width: 100%; }

.invite-actions .btn{
  flex: 1 1 180px;
}

.invite-url{
  margin-top: 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-field);
  background: var(--panel2);
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.logistics-code-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--gap-2);
  flex-wrap:wrap;
}

.logistics-code-badge{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(148,163,184,.10);
  font-size:12px;
}

.logistics-address{
  white-space:pre-line;
}

.logistics-warehouse-compact{
  padding: 0;
  margin: 0;
}

.logistics-warehouse-compact .hint{
  font-size: 11px;
  line-height: 1.35;
}

.logistics-warehouse-compact .invite-url{
  padding: 8px 10px;
  font-size: 11px;
}

.logistics-warehouse-details summary{
  cursor: pointer;
  user-select: none;
}

.logistics-draft-actions .btn{
  width: 100%;
}

.logistics-ai-preview{
  border: 1px solid rgba(255,140,0,.25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,140,0,.04), rgba(255,80,0,.02));
  padding: 12px;
}
.logistics-ai-preview .ai-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.logistics-ai-preview .ai-title{
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e8930a;
}
.logistics-ai-preview .ai-title .ai-icon{
  font-size: 15px;
  filter: drop-shadow(0 0 4px rgba(255,160,0,.6));
}
.logistics-ai-preview .ai-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.logistics-ai-preview .ai-row{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.65);
}
.logistics-ai-preview .ai-row .ai-tr{
  font-weight: 700;
}
.logistics-ai-preview .ai-row .ai-meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.logistics-ai-preview .ai-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
}

.logistics-photo-preview{
  border:1px dashed var(--line);
  border-radius: var(--radius-field);
  background: var(--panel2);
  padding: var(--gap-2);
}

.logistics-photo-preview img{
  display:block;
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius: var(--radius-field);
}

.logistics-photo-preview-actions{
  margin-top: var(--gap-2);
  display:flex;
  justify-content:flex-end;
}

.logistics-item{
  display:flex;
  flex-direction:column;
  gap: var(--gap-2);
}

.logistics-item-head{
  display:flex;
  gap: var(--gap-2);
  align-items:flex-start;
}

.logistics-item-photo{
  width:72px;
  height:72px;
  border:1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel2);
  overflow:hidden;
  flex: 0 0 72px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logistics-item-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.logistics-item-photo-fallback{
  font-weight:700;
  font-size:24px;
  color: var(--muted);
}

.logistics-item-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.logistics-item-title{
  font-weight:700;
  line-height:1.25;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.logistics-pill-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.logistics-status-pill{
  border-color: rgba(255,80,0,.28);
  color: var(--accent);
}

.logistics-status-tracking{
  border-color: rgba(58,125,214,.35);
  color: #3a7dd6;
}

.logistics-status-delivered_cn{
  border-color: rgba(20,164,77,.35);
  color: #14a44d;
}

.logistics-status-not_found,
.logistics-status-error{
  border-color: rgba(217,83,79,.35);
  color: #d9534f;
}

.logistics-item-link{
  color: var(--muted);
  text-decoration:none;
  word-break: break-word;
  overflow-wrap:anywhere;
}

.logistics-item-link:hover{
  text-decoration: underline;
}

.logistics-meta-grid{
  display:grid;
  gap: var(--gap-2);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.logistics-meta-cell{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.logistics-meta-cell b{
  font-size:14px;
  line-height:1.25;
  word-break: break-word;
  overflow-wrap:anywhere;
}

.logistics-note{
  color: var(--muted);
  line-height:1.35;
  word-break: break-word;
  overflow-wrap:anywhere;
}

.logistics-item-actions{
  margin-top: 2px;
}

.logistics-item-actions .btn{
  flex:1 1 140px;
}

.logistics-soon .btn{
  width:100%;
}

.logistics-subtab-row{
  display:flex;
  gap: var(--gap-2);
}

.logistics-subtab-btn{
  flex:1 1 140px;
}

.logistics-subtab-btn.active{
  background: var(--accent);
  border-color: rgba(255,80,0,.35);
  color: #fff;
}

#logistics-draft-tracks{
  min-height: 112px;
  resize: vertical;
}

#cart-empty,
#orders-empty{
  margin: var(--gap-2) 0;
}

[hidden]{
  display:none !important;
}

/* Auto-translate setting row inside cart-add card */
#cart-add .row{
  flex-wrap: nowrap;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: var(--gap-2);
  margin-top: var(--gap-1);
}
#cart-add .row > .stack{
  flex: 1;
  gap: 3px;
}
#cart-add .row .section-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
#cart-add .row .hint{
  font-size: 12px;
  margin-top: 0;
}
/* Paste + Add main row (side by side) */
.cart-add-main-row{
  display: flex;
  gap: var(--gap-2);
}
/* Inline loading progress (replaces old card-style loading block) */
.cart-add-progress{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cart-add-progress-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-add-progress-label{
  font-size: 13px;
  color: var(--muted);
}
.cart-add-progress-count{
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
/* "Добавленные товары" header — h2 left, Очистить right */
.cart-items-head h2{ margin-bottom: 0; }
.cart-add-main-row .btn{
  flex: 1;
}
/* Clear — text link */
.btn-text-muted{
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 0;
  cursor: pointer;
  text-align: right;
  transition: color 0.15s;
}
.btn-text-muted:active{ opacity: 0.5; }
#tab-add .row{
  margin-top: var(--gap-2);
}

#add-loading{
  margin-top: var(--gap-2);
}

#tab-add .hint{
  margin-top: var(--gap-2);
  display:block;
}

/* ── Clickable order card ── */
.order-card-toggle{
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.order-card-toggle:active{
  transform: none; /* override button:active translateY */
}
/* Chevron indicator */
.order-chevron{
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.2s ease;
}
.order-chevron.open{
  transform: rotate(180deg);
}
.order-chevron-icon{
  width: 18px;
  height: 18px;
  stroke: var(--muted);
  opacity: 0.5;
}

/* Copy ID icon button */
.order-copy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  margin-left: 4px;
  cursor: pointer;
  vertical-align: middle;
  min-height: auto;
  border-radius: 4px;
  transition: opacity 0.15s;
  opacity: 0.4;
}
.order-copy-btn:hover{ opacity: 0.7; }
.order-copy-btn:active{ transform: none; }
.order-copy-btn.copied{ opacity: 1; }
.order-copy-icon{
  width: 13px;
  height: 13px;
  stroke: var(--text);
}

/* ── Step-action buttons panel inside order detail ── */
.order-step-actions{
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.order-step-btn{
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.order-step-icon{
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
/* Active step button — brand orange palette */
.order-step-btn.step-active{
  background: var(--brand-weak, rgba(255,80,0,0.12));
  border-color: rgba(255,80,0,0.45);
  color: var(--brand, #FF5000);
  opacity: 1;
}
.order-step-btn.step-active:hover{
  border-color: rgba(255,80,0,0.6);
}
/* Dimmed step button */
.order-step-btn.step-dimmed{
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  opacity: 0.4;
  cursor: default;
}
.order-step-btn.step-dimmed:hover{
  transform: none;
  border-color: var(--line);
}

/* ── Inline cancel form ── */
.order-cancel-form{
  flex-basis: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,107,107,.2);
  background: rgba(255,107,107,.04);
}
.order-cancel-form label{
  margin-bottom: 8px;
}
.order-cancel-form select,
.order-cancel-form textarea{
  margin-top: 4px;
}
.order-cancel-form-actions{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.order-cancel-form-actions .btn{
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  padding: 10px 8px;
  border-radius: 12px;
}

/* ── Delivery detail (HTMX partial) ── */
.delivery-detail-htmx{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* Two status pills side-by-side in collapsed delivery card */
.delivery-card-statuses{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* Delivery stage context block tints (parallels status-ctx-* for orders) */
.status-ctx-delivery-CREATED      { background: rgba(120,120,120,0.08); }
.status-ctx-delivery-IN_PROGRESS  { background: rgba(58,125,214,0.08); }
.status-ctx-delivery-READY        { background: rgba(20,164,77,0.08); }
/* "Refresh tracks" inline button inside status-context block */
.delivery-refresh-all-btn-inline{
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.delivery-refresh-all-btn-inline:hover{ color: var(--text); border-color: var(--text-2); }
.delivery-refresh-all-btn-inline:disabled{ opacity: .5; pointer-events: none; }
.delivery-stage-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.delivery-stage-actions .order-step-btn{
  flex: 1 1 0;
  min-width: 0;
}
.order-step-btn.step-danger{
  background: rgba(255,59,48,0.10);
  border-color: rgba(255,59,48,0.35);
  color: #ff3b30;
  opacity: 1;
  font-weight: 700;
}
.delivery-label-section{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #eee);
  background: var(--card-bg, #fff);
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.delivery-warehouse-photos{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.delivery-wh-photo{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--divider, var(--line));
  cursor: pointer;
}
.delivery-warehouse-section{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #eee);
  background: var(--card-bg, #fff);
}
/* ── Track-box: compact tracking container (spec: TRACK_CONTAINER_SPEC.md) ── */
/* Override Google Fonts default .material-symbols-outlined { font-size:24px } */
.track-box .material-symbols-outlined{
  font-variation-settings: "FILL" 0, "wght" 250, "GRAD" 0, "opsz" 24;
}
.track-box{
  margin-top: 8px;
  border: 1px solid #dddddd;
  border-radius: 14px;
  background: #fbfbfb;
  padding: 8px 10px;
}
.track-box__row{
  display: flex;
  align-items: center;
  gap: 8px;
}
.track-box__content{
  min-width: 0;
  flex: 1;
}
.track-box__header{
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: #8b8b8b;
}
.track-box__leading-icon{
  flex: 0 0 auto;
  font-size: 14px !important;
}
.track-box__label{
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  line-height: 1;
}
.track-box__number{
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #161616;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.track-box__status{
  margin-top: 4px;
  font-size: 11px;
  color: #888;
  line-height: 1.3;
}
/* Track event history list */
.track-events{
  margin-top: 4px;
}
.track-event{
  margin: 0;
  font-size: 11px;
  color: #aaa;
  line-height: 1.3;
}
.track-event--latest{
  color: #555;
}
.track-event + .track-event{
  margin-top: 2px;
}
/* Reset global button styles (padding:11px 12px, min-height:44px, border, etc.) */
.track-box__icon-button{
  display: inline-flex;
  height: 22px;
  width: 22px;
  min-height: 0;
  padding: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #b0b0b0;
  font-size: inherit;
  cursor: pointer;
  transform: none;
  box-shadow: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.track-box__icon-button:hover{
  background: #f2f2f2;
  color: #868686;
  transform: none;
}
.track-box__icon-button:active{
  transform: none;
}
.track-box__icon-button--refresh{
  align-self: center;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  color: #aaaaaa;
}
.track-box__icon-button--refresh:hover{
  background: #ffffff;
  color: #7f7f7f;
}
.track-box__icon-button--refresh:disabled{
  opacity: .4;
  cursor: default;
  transform: none;
}
.track-box__icon{
  font-size: 13px !important;
}
/* Hint state (pre-purchase / awaiting track) */
.track-box--hint{
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8b8b8b;
  font-size: 11px;
}
.track-box--hint .material-symbols-outlined{
  font-size: 14px !important;
}

@media (max-width: 360px){
  #rates{ grid-template-columns: 1fr; }
}

/* ===== Chat Tab ===== */
#tab-chat {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.chat-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  flex-shrink: 0;
}

.chat-header-ico {
  width: 36px;
  height: 36px;
  background: #ec5b13;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}

.chat-header-ico svg {
  width: 18px;
  height: 18px;
  stroke: white;
  fill: none;
}

.chat-header-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
}

.chat-header-sub {
  font-size: 12px;
  color: #888;
  margin-top: 1px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  /* extra bottom padding so last message isn't hidden behind fixed chat-bar */
  padding: 12px 14px calc(72px + var(--nav-h) + var(--safe-bot));
  display: flex;
  flex-direction: column;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

/* Row = avatar + bubble side by side */
.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 88%;
}

.chat-row-user {
  align-self: flex-end;
}

.chat-row-assistant {
  align-self: flex-start;
}

/* Avatar */
.chat-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.chat-ava svg {
  width: 15px;
  height: 15px;
}

.chat-ava-assistant {
  background: var(--brand, #ec5b13);
  color: white;
  font-size: 16px;
  line-height: 1;
}

.chat-ava-user {
  background: #e0e0e0;
  color: #555;
}

.dark .chat-ava-user {
  background: #444;
  color: #ccc;
}

/* Wrap holds image + bubble */
.chat-msg-wrap {
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

.chat-row-user .chat-msg-wrap {
  align-items: flex-end;
}

.chat-row-assistant .chat-msg-wrap {
  align-items: flex-start;
}

.chat-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.chat-bubble code {
  font-size: 12px;
  background: rgba(0,0,0,0.08);
  padding: 1px 4px;
  border-radius: 3px;
}

.chat-row-user .chat-bubble {
  background: #ec5b13;
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-row-assistant .chat-bubble {
  background: white;
  color: #1a1a1a;
  border: 1px solid #eee;
  border-bottom-left-radius: 4px;
}

.dark .chat-row-assistant .chat-bubble {
  background: var(--color-surface-dark);
  color: #f5f5f5;
  border-color: #333;
}

.chat-bubble-img {
  max-width: 180px;
  border-radius: 10px;
  margin-bottom: 4px;
  display: block;
}

/* Typing animation */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px !important;
}

.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #bbb;
  display: inline-block;
  animation: chat-bounce 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

/* Image preview — inside chat-bar, stacks above input row */
.chat-image-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #fff8f5;
  border-bottom: 1px solid #ffe8da;
}

.dark .chat-image-preview {
  background: #2a1800;
  border-bottom-color: #5c2e00;
}

.chat-image-preview img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.chat-img-remove {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

/* Input bar — fixed above nav, inherits nav visual style */
.chat-bar {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-bot));
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--maxw));
  z-index: 50;
  background: rgba(12,18,28,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.08));
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.25);
}

.dark .chat-bar {
  background: rgba(12,18,28,.95);
}

/* When chat-bar is visible, nav loses top radius so they merge into one block */
.chat-bar:not([hidden]) ~ #bottom-nav {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none;
}

/* Inner row with attach + textarea + send */
.chat-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}

.chat-attach {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: #999;
  flex-shrink: 0;
  transition: color 0.15s;
}

.chat-attach:hover { color: #ec5b13; }

.chat-attach svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.chat-input {
  flex: 1;
  border: 1.5px solid #d0d0d0;
  border-radius: 20px;
  padding: 9px 16px;
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  outline: none;
  background: #fff;
  color: var(--text, #222);
  min-height: 38px;
  max-height: 120px;
  overflow-y: auto;
  vertical-align: bottom;
  transition: border-color 0.15s;
}

.chat-input::placeholder { color: #999; }

.chat-input:focus {
  border-color: #ec5b13;
}

.dark .chat-input {
  background: #2a2a2a;
  border-color: #444;
  color: #f5f5f5;
}
.dark .chat-input::placeholder { color: rgba(255,255,255,0.4); }

.chat-send {
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: opacity 0.15s;
}

.chat-send:hover { opacity: 0.75; }
.chat-send:disabled { opacity: 0.3; cursor: default; }

.chat-send svg {
  width: 24px;
  height: 24px;
  stroke: #ec5b13;
  fill: none;
  margin-left: 0;
}

/* Chat query row (text links, no box) */
.src-qrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; flex-wrap: nowrap; }
.src-q-tb { color: #e4520a; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.src-q-tb:hover { text-decoration: underline; }
.src-q-sep { color: #ccc; flex-shrink: 0; }
.src-q-cn { color: #aaa; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-q-1688 { color: #e4090d; font-size: 11px; font-weight: 600; text-decoration: none; padding: 2px 6px; border: 1px solid #e4090d; border-radius: 4px; flex-shrink: 0; white-space: nowrap; }
.src-q-1688:hover { background: #fff0f0; }

/* Chat search grid */
.chat-bubble-search { padding: 10px 10px 6px; box-sizing: border-box; width: 100%; }
.src-header { font-size: 12px; font-weight: 600; color: var(--color-text-muted, #888); margin-bottom: 8px; }
.src-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.src-gc { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: var(--color-card, #fff); border: 1px solid var(--color-border, #e5e5e5); }
.src-gc-hidden { display: none; }
.src-gc-img-wrap { width: 100%; aspect-ratio: 1 / 1; background: #f0f0f0; overflow: hidden; }
.src-gc-img-wrap.src-gc-nophoto { background: #e8e8e8; }
.src-gc-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.src-gc-body { padding: 7px 7px 6px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.src-gc-title { font-size: 11px; line-height: 1.35; color: var(--color-text, #111); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.src-gc-price { font-size: 14px; font-weight: 700; color: #e4520a; }
.src-gc-sales { font-size: 10px; color: var(--color-text-muted, #999); }
.src-gc-btns { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.src-gc-add { width: 100%; padding: 6px 4px; background: #e4520a; color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; box-sizing: border-box; }
.src-gc-open { width: 100%; padding: 5px 4px; background: transparent; color: var(--color-text-muted, #777); border: 1px solid var(--color-border, #ddd); border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; text-align: center; display: block; box-sizing: border-box; }
.src-gc-add:hover, .src-gc-open:hover { opacity: 0.82; }
.src-more-btn { display: block; width: 100%; margin-top: 8px; padding: 7px; background: var(--color-bg, #f5f5f5); border: 1px solid var(--color-border, #e0e0e0); border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--color-text-muted, #666); cursor: pointer; text-align: center; box-sizing: border-box; }
.src-more-btn:hover { background: var(--color-border, #e8e8e8); }

/* ─── Scanner ─── */
.scanner-upload-btn{ display:block; cursor:pointer; }
.scanner-upload-btn .btn{ width:100%; justify-content:center; }
.scanner-actions{ display:flex; gap:8px; margin-top:8px; }
.scanner-actions .btn.primary{ flex:1; justify-content:center; }
.scanner-progress{ text-align:center; margin-top:8px; }
.scanner-thumbs{
  display:flex; gap:8px; flex-wrap:wrap; padding:10px 0 4px;
}
.scanner-thumb-wrap{
  position:relative; width:64px; height:64px;
}
.scanner-thumb-wrap img{
  width:64px; height:64px; object-fit:cover; border-radius:8px;
  border:2px solid var(--line);
}
.scanner-thumb-del{
  position:absolute; top:-4px; right:-4px;
  width:20px; height:20px; border-radius:50%;
  background:var(--danger,#e53935); color:#fff;
  font-size:11px; line-height:20px; text-align:center;
  cursor:pointer;
}
.scanner-row{ margin-bottom:8px; }
.scanner-row .item-row{ align-items:flex-start; gap:10px; }
.scanner-thumb{
  width:48px; height:48px; object-fit:cover; border-radius:6px;
  flex-shrink:0; border:1px solid var(--line);
}
.scanner-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.scanner-overlay img{
  max-width:95vw; max-height:90vh; object-fit:contain; border-radius:8px;
}
.status-pill.status-arrived{
  background:#e6f9e6; color:#1a7a1a; border-color:#b0e6b0;
  margin-top:4px;
}

/* ════════════════════════════════════════
   NEW AUTH LANDING (v3.88)
   Full-page landing + centered form below
   ════════════════════════════════════════ */

/* Reset screen padding — we control layout internally */
.auth-screen{
  padding: 0 !important;
  max-width: 100% !important;
  background: var(--bg);
}

/* Sticky topbar inside auth screen */
.auth-topbar-new{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: rgba(246,247,249,.92);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--divider, rgba(0,0,0,.06));
}
.auth-topbar-new .brand-block{
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 17px; letter-spacing: -.4px; color: var(--brand, #FF5000);
  background: none; border: none; padding: 0; cursor: default;
}

/* Auth new landing wrapper */
.auth-new-wrap{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Hero */
.auth-new-hero{
  text-align: center;
  padding: 48px 0 36px;
}
.auth-new-badge{
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--brand, #FF5000);
  background: rgba(255,80,0,.12);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 18px;
}
.auth-new-h1{
  font-size: clamp(26px, 6.5vw, 44px);
  font-weight: 800; line-height: 1.18; letter-spacing: -.6px;
  margin-bottom: 14px;
  color: var(--text, rgba(0,0,0,.88));
}
.auth-new-h1 span{ color: var(--brand, #FF5000); }
.auth-new-sub{
  font-size: clamp(14px, 3.5vw, 17px);
  color: var(--text-2, rgba(0,0,0,.60));
  line-height: 1.6; max-width: 480px;
  margin: 0 auto;
}

/* Stats row */
.auth-new-stats{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-bottom: 44px;
}
.auth-new-stat{
  background: var(--surface, #fff);
  border: 1px solid var(--divider, rgba(0,0,0,.06));
  border-radius: 18px;
  padding: 18px 12px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.auth-new-stat-val{
  font-size: 22px; font-weight: 800; color: var(--brand, #FF5000);
  letter-spacing: -.5px; line-height: 1; margin-bottom: 4px;
}
.auth-new-stat-lbl{ font-size: 11px; color: var(--text-2, rgba(0,0,0,.60)); font-weight: 500; }

/* Feature grid */
.auth-new-section-title{
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 800; letter-spacing: -.3px;
  text-align: center; margin-bottom: 5px;
}
.auth-new-section-sub{
  font-size: 14px; color: var(--text-2, rgba(0,0,0,.60));
  text-align: center; margin-bottom: 24px;
  max-width: 420px; margin-left: auto; margin-right: auto;
}
.auth-new-feats{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 12px;
  margin-bottom: 44px;
}
.auth-new-feat{
  background: var(--surface, #fff);
  border: 1px solid var(--divider, rgba(0,0,0,.06));
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  display: flex; flex-direction: column; gap: 10px;
}
.auth-new-feat-icon{
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.auth-new-feat-icon.c-orange{ background: rgba(255,80,0,.12); }
.auth-new-feat-icon.c-blue  { background: rgba(0,122,255,.10); }
.auth-new-feat-icon.c-green { background: rgba(52,199,89,.12); }
.auth-new-feat-icon.c-purple{ background: rgba(175,82,222,.12); }
.auth-new-feat-icon.c-amber { background: rgba(255,140,0,.12); }
.auth-new-feat-icon.c-teal  { background: rgba(0,199,190,.12); }
.auth-new-feat h3{ font-size: 15px; font-weight: 700; line-height: 1.3; }
.auth-new-feat p{ font-size: 13px; color: var(--text-2, rgba(0,0,0,.60)); line-height: 1.55; }

/* Steps */
.auth-new-steps{
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 44px;
}
.auth-new-step{
  display: grid; grid-template-columns: 44px 1fr; gap: 0 14px;
  padding-bottom: 28px; position: relative;
}
.auth-new-step:last-child{ padding-bottom: 0; }
.auth-new-step-nw{ display: flex; flex-direction: column; align-items: center; }
.auth-new-step-n{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand, #FF5000); color: #fff;
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1;
}
.auth-new-step-line{
  flex: 1; width: 2px; background: var(--divider, rgba(0,0,0,.06)); margin-top: 6px;
}
.auth-new-step:last-child .auth-new-step-line{ display: none; }
.auth-new-step-body{ padding-top: 6px; }
.auth-new-step-body h3{ font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.auth-new-step-body p{ font-size: 13px; color: var(--text-2, rgba(0,0,0,.60)); line-height: 1.55; }

/* Form section */
.auth-new-form-section{
  padding: 0 0 48px;
  display: flex; flex-direction: column; align-items: center;
}
.auth-new-form-title{
  font-size: 20px; font-weight: 800; text-align: center;
  margin-bottom: 6px; letter-spacing: -.3px;
}
.auth-new-form-sub{
  font-size: 14px; color: var(--text-2, rgba(0,0,0,.60));
  text-align: center; margin-bottom: 20px;
}
.auth-new-form-section .auth-form-card{
  width: 100%; max-width: 420px;
}

/* Footer */
.auth-new-footer{
  border-top: 1px solid var(--divider, rgba(0,0,0,.06));
  padding: 20px 16px;
  text-align: center;
  font-size: 12px; color: var(--text-3, rgba(0,0,0,.38));
}

/* Divider between landing and form */
.auth-new-divider{
  height: 1px;
  background: var(--divider, rgba(0,0,0,.06));
  margin: 0 0 40px;
  max-width: 760px; margin-left: auto; margin-right: auto;
}

/* ── Hero 2-column grid ── */
.auth-hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 36px 0 40px;
}
@media (min-width: 580px){
  .auth-hero-grid{
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
    gap: 32px;
    padding: 40px 0 48px;
  }
}
.auth-hero-copy-new{
  display: flex; flex-direction: column; gap: 16px;
}
.auth-hero-form-new{
  display: flex; flex-direction: column; gap: 10px;
}
.auth-hero-form-new .auth-form-card{
  width: 100%;
}
.auth-new-form-label{
  font-size: 13px; font-weight: 700;
  color: var(--text-2, rgba(0,0,0,.60));
  text-align: center; letter-spacing: .01em;
}
/* Feature pills */
.auth-feat-pills{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.auth-feat-pill{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  color: var(--text-2, rgba(0,0,0,.60));
  background: var(--surface, #fff);
  border: 1px solid var(--divider, rgba(0,0,0,.06));
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

@media (max-width: 520px){
  .auth-new-hero{ padding: 36px 0 28px; }
  .auth-new-feats{ grid-template-columns: 1fr; }
  .auth-new-stats{ gap: 8px; }
  .auth-new-stat-val{ font-size: 18px; }
}

/* ════════════════════════════════════════
   ALC — Auth Landing Centered (v3.88)
   Selling, emoji-rich, bilingual
   ════════════════════════════════════════ */

/* Centered content wrapper */
.alc-wrap{
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* ── Hero section ── */
.alc-hero-section{
  padding: 44px 20px 48px;
}
.alc-eyebrow{
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--brand, #FF5000);
  background: rgba(255,80,0,.10);
  border-radius: 999px; padding: 6px 16px;
  margin-bottom: 20px;
}
.alc-h1{
  font-size: clamp(26px, 6vw, 42px);
  font-weight: 800; line-height: 1.15; letter-spacing: -.6px;
  color: var(--text, rgba(0,0,0,.88));
  margin-bottom: 16px;
}
.alc-h1 span{ color: var(--brand, #FF5000); }
.alc-sub{
  font-size: clamp(15px, 3.5vw, 17px);
  color: var(--text-2, rgba(0,0,0,.60));
  line-height: 1.65; margin-bottom: 24px;
  max-width: 520px; margin-left: auto; margin-right: auto;
}

/* Feature pills */
.alc-pills{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-bottom: 28px;
}
.alc-pill{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  color: var(--text-2, rgba(0,0,0,.60));
  background: var(--surface, #fff);
  border: 1px solid var(--divider, rgba(0,0,0,.06));
  border-radius: 999px; padding: 5px 12px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* Stats */
.alc-stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 32px;
}
.alc-stat{
  background: var(--surface, #fff);
  border: 1px solid var(--divider, rgba(0,0,0,.06));
  border-radius: 16px; padding: 14px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.alc-stat-val{
  font-size: 20px; font-weight: 800;
  color: var(--brand, #FF5000); line-height: 1;
  margin-bottom: 4px;
}
.alc-stat-lbl{ font-size: 10px; color: var(--text-2, rgba(0,0,0,.60)); font-weight: 500; line-height: 1.3; }
@media (max-width: 480px){
  .alc-stats{ grid-template-columns: repeat(2,1fr); }
  .alc-stat-val{ font-size: 18px; }
}

/* ── Form wrap ── */
.alc-form-wrap{
  max-width: 420px; margin: 0 auto;
}
.alc-form-title{
  font-size: 15px; font-weight: 700;
  color: var(--text-2, rgba(0,0,0,.60));
  margin-bottom: 10px;
}
.alc-form-wrap .auth-form-card{ width: 100%; }

/* ── Pain band ── */
.alc-band{ background: var(--surface, #fff); padding: 44px 0; margin: 8px 0; }
.alc-pain-band{ background: linear-gradient(135deg, rgba(255,80,0,.04) 0%, rgba(255,140,0,.06) 100%); }
.alc-pains{
  display: flex; flex-direction: column; gap: 10px;
  margin: 20px auto; max-width: 520px; text-align: left;
}
.alc-pain{
  background: var(--surface, #fff);
  border: 1px solid var(--divider, rgba(0,0,0,.06));
  border-radius: 14px; padding: 12px 16px;
  font-size: 14px; color: var(--text, rgba(0,0,0,.80));
  line-height: 1.5;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.alc-pain-close{
  font-size: 15px; font-weight: 700; margin-top: 16px;
  color: var(--brand, #FF5000);
}

/* ── Section headings ── */
.alc-section-h{
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 800; letter-spacing: -.3px;
  margin-bottom: 6px;
}
.alc-section-sub{
  font-size: 15px; color: var(--text-2, rgba(0,0,0,.60));
  margin-bottom: 28px; max-width: 440px;
  margin-left: auto; margin-right: auto;
}

/* ── Features grid ── */
.alc-feats{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; text-align: left;
  margin-bottom: 8px;
}
.alc-feat{
  background: var(--surface, #fff);
  border: 1px solid var(--divider, rgba(0,0,0,.06));
  border-radius: 18px; padding: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  display: flex; flex-direction: column; gap: 8px;
}
.alc-feat-em{ font-size: 28px; line-height: 1; }
.alc-feat h3{ font-size: 15px; font-weight: 700; line-height: 1.3; }
.alc-feat p{ font-size: 13px; color: var(--text-2, rgba(0,0,0,.60)); line-height: 1.55; }

/* ── Quote band ── */
.alc-quote-band{
  background: linear-gradient(135deg, #FF5000 0%, #FF8C00 100%) !important;
  padding: 40px 0 !important;
}
.alc-quote-band .alc-wrap{ max-width: 520px; }
.alc-quote{ color: #fff; }
.alc-quote-text{
  font-size: clamp(15px, 3.5vw, 18px);
  font-style: italic; line-height: 1.6;
  margin-bottom: 12px; opacity: .95;
}
.alc-quote-text::before{ content: '"'; }
.alc-quote-text::after{ content: '"'; }
.alc-quote-author{ font-size: 13px; opacity: .75; font-weight: 600; }

/* ── Final CTA ── */
.alc-final-cta{ padding: 48px 20px 16px; }
.alc-final-em{ font-size: 48px; margin-bottom: 16px; }
.alc-final-h{
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 800; letter-spacing: -.4px; margin-bottom: 10px;
}
.alc-final-sub{
  font-size: 15px; color: var(--text-2, rgba(0,0,0,.60));
  margin-bottom: 24px;
}
.alc-cta-btns{ display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.alc-btn-primary{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand, #FF5000); color: #fff;
  font-size: 15px; font-weight: 700;
  padding: 14px 28px; border-radius: 18px;
  box-shadow: 0 4px 20px rgba(255,80,0,.35);
  transition: transform .12s, box-shadow .12s;
  text-decoration: none;
}
.alc-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 6px 28px rgba(255,80,0,.45); }

/* ── Mobile adjustments ── */
@media (max-width: 480px){
  .alc-feats{ grid-template-columns: 1fr; }
  .alc-hero-section{ padding: 32px 16px 36px; }
  .alc-final-cta{ padding: 36px 16px 16px; }
}


/* ══════════════════════════════════════════════
   CLEAN AUTH SCREEN (v3.96)
   Replaces old alc-* promo layout
══════════════════════════════════════════════ */

/* Full-screen scrollable container */
.auth-page-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 16px 40px;
  min-height: calc(100% - 56px); /* topbar ~56px */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Auth card max width */
.auth-page-body .auth-form-card{
  width: 100%;
  max-width: 440px;
}

/* Legal checkboxes block */
.auth-legal{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}
.auth-check-row{
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.auth-check{
  width: 16px !important; height: 16px !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  accent-color: var(--brand, #FF5000);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.auth-check-text{
  font-size: 13px;
  color: var(--text-2, rgba(0,0,0,.58));
  line-height: 1.3;
}
.auth-legal-link{
  color: var(--brand, #FF5000);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-legal-link:hover{ opacity: .8; }

/* Back to landing link */
.auth-back-link{
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
}
.auth-back-link a{
  color: var(--text-3, rgba(0,0,0,.36));
  text-decoration: none;
}
.auth-back-link a:hover{ color: var(--brand, #FF5000); }

/* Footer copyright + legal links */
.auth-legal-footer{
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-3, rgba(0,0,0,.36));
  line-height: 1.8;
}
.auth-legal-footer a{
  color: var(--text-3, rgba(0,0,0,.36));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-legal-footer a:hover{ color: var(--brand, #FF5000); }

/* Override auth-screen to be scrollable when using new layout */
.auth-screen.screen{
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}