/* ═══════════════════════════════════════════════════════════════════════
   PepTek Trade Desk · Wholesale Platform Styles
   Inherits clay.css tokens · td- prefix
   Three views: public (td-pub-), client (td-cli-), admin (td-adm-)
   Rewritten 2026-05-10 to match actual JSX class names
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tier + status color tokens ─── */
:root {
  --tier-bronze:   #CD7F32;
  --tier-silver:   #C0C0C0;
  --tier-gold:     #FFD700;
  --tier-platinum: #E5E4E2;
  --tier-diamond:  #B9F2FF;

  --td-dark:       #0B0A14;
  --td-dark-2:     #1A0F1F;
  --td-dark-3:     #2A1632;
  --td-success:    #16A34A;
  --td-warn:       #F59E0B;
  --td-danger:     #DC2626;
  --td-info:       #3B82F6;
}


/* ═══════════════════════════════════════════════════════════════════════
   0. PORTAL HEADER (shared by client + admin views)
   ═══════════════════════════════════════════════════════════════════════ */

.td-portal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  height: 64px;
  background: linear-gradient(135deg, var(--td-dark) 0%, var(--td-dark-2) 100%);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 4px 20px rgba(11,10,20,0.4);
}

.td-portal-header__brand {
  display: flex; align-items: center; gap: 14px;
}
.td-portal-header__brand a {
  display: flex; align-items: center;
}
.td-portal-header__brand img {
  height: 28px; width: auto;
  filter: brightness(10);
}
.td-portal-header__tag {
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--pp-soft);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgba(157,39,169,0.2);
  text-transform: uppercase;
}
.td-portal-header__admin-tag {
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  text-transform: uppercase;
}

.td-portal-header__actions {
  display: flex; align-items: center; gap: 8px;
}
.td-portal-header__btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  border: none; cursor: pointer;
  transition: all 0.16s;
  text-decoration: none;
  position: relative;
}
.td-portal-header__btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.td-portal-badge {
  position: absolute; top: -2px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--pp); color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(157,39,169,0.5);
}

.td-portal-header__exit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: all 0.16s;
  margin-left: 4px;
}
.td-portal-header__exit:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

@media (max-width: 540px) {
  .td-portal-header { padding: 0 16px; }
  .td-portal-header__tag { display: none; }
  .td-portal-header__exit span { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   0b. PORTAL LAYOUT (sidebar + content)
   ═══════════════════════════════════════════════════════════════════════ */

.td-portal-layout {
  display: flex;
  min-height: calc(100vh - 64px);
  background: var(--bg, #F5F3EF);
}

/* ─── Sidebar ─── */
.td-sidebar {
  width: 260px;
  min-width: 260px;
  background: linear-gradient(180deg, var(--td-dark) 0%, #12091A 100%);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  z-index: 50;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.td-sidebar__profile {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.td-sidebar__avatar {
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pp, #9D27A9), var(--pp-2, #7B1FA2));
  display: grid; place-items: center;
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 18px;
  color: #fff;
  text-transform: uppercase;
}
.td-sidebar__profile-info {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.td-sidebar__company {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 13px;
  color: rgba(255,255,255,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.td-sidebar__nav {
  flex: 1;
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 2px;
}

.td-sidebar__link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
  position: relative;
}
.td-sidebar__link:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}
.td-sidebar__link--active {
  background: rgba(157,39,169,0.18);
  color: #F5D6FA;
  font-weight: 700;
}
.td-sidebar__link--active::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--pp, #9D27A9);
}

.td-sidebar__icon {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.td-sidebar__label {
  flex: 1;
}
.td-sidebar__badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  background: var(--pp, #9D27A9); color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

/* Catalog chevron */
.td-sidebar__chevron {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  margin-left: auto;
  transition: transform 0.2s ease;
  opacity: 0.5;
}
.td-sidebar__chevron--open {
  transform: rotate(180deg);
  opacity: 0.8;
}

/* Submenu */
.td-sidebar__submenu {
  display: flex; flex-direction: column;
  padding: 2px 0 4px 46px;
  gap: 1px;
}
.td-sidebar__sublink {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.td-sidebar__sublink:hover {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
}
.td-sidebar__sublink--active {
  background: rgba(157,39,169,0.12);
  color: #E8B4F0;
  font-weight: 700;
}
.td-sidebar__sublink--active::before {
  content: '';
  position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px;
  border-radius: 0 3px 3px 0;
  background: var(--pp, #9D27A9);
}

.td-sidebar__footer {
  padding: 16px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.td-sidebar__exit {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.4);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12px;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  transition: all 0.15s;
}
.td-sidebar__exit:hover {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.04);
}
.td-sidebar__exit svg {
  transform: rotate(180deg);
}

/* ─── Content area ─── */
.td-content {
  flex: 1;
  min-width: 0;
  padding: 32px 36px 48px;
  overflow-x: hidden;
}

/* ─── Mobile sidebar ─── */
.td-sidebar-toggle {
  display: none;
  position: fixed; bottom: 20px; left: 20px;
  z-index: 120;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pp, #9D27A9), var(--pp-2, #7B1FA2));
  border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(157,39,169,0.5);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.td-sidebar-toggle span {
  display: block; width: 20px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: all 0.2s;
}
.td-sidebar-toggle--open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.td-sidebar-toggle--open span:nth-child(2) { opacity: 0; }
.td-sidebar-toggle--open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.td-sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 49;
  background: rgba(0,0,0,0.5);
}

@media (max-width: 900px) {
  .td-sidebar-wrap { display: contents; }
  .td-sidebar {
    position: fixed; left: -280px;
    top: 64px; height: calc(100vh - 64px);
    width: 270px; min-width: 270px;
    transition: left 0.25s ease;
    z-index: 51;
    box-shadow: none;
  }
  .td-sidebar-toggle { display: flex; }
  .td-sidebar-overlay { display: block; }

  .td-sidebar-wrap--open .td-sidebar {
    left: 0;
    box-shadow: 8px 0 30px rgba(0,0,0,0.4);
  }

  .td-content { padding: 24px 18px 48px; }
}

@media (max-width: 540px) {
  .td-content { padding: 18px 14px 48px; }
}


/* ─── Content transition ─── */
@keyframes td-view-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.td-content > * {
  animation: td-view-in 0.25s ease-out;
}

/* ─── Shared view title ─── */
.td-cli-view-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 24px;
  color: var(--ink, #1A0F1F);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}


/* ═══════════════════════════════════════════════════════════════════════
   0c. DASHBOARD VIEW
   ═══════════════════════════════════════════════════════════════════════ */

.td-cli-dashboard-view {
  max-width: 1100px;
}

/* Welcome banner */
.td-cli-dash-welcome {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}
.td-cli-dash-welcome__title {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 28px;
  color: var(--ink, #1A0F1F);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.td-cli-dash-welcome__sub {
  font-family: "Montserrat", sans-serif;
  font-size: 14px; color: var(--ink-2, #6B6877);
  margin-top: 4px;
}

/* Stat cards grid */
.td-cli-dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.td-cli-dash-stat {
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  padding: 20px;
  box-shadow: var(--clay-card, 0 2px 8px rgba(0,0,0,0.06));
}
.td-cli-dash-stat--accent {
  background: linear-gradient(135deg, var(--td-dark) 0%, var(--td-dark-2) 100%);
  color: #fff;
}
.td-cli-dash-stat--accent .td-cli-dash-stat__label { color: rgba(255,255,255,0.6); }
.td-cli-dash-stat__value {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 24px;
  color: var(--ink, #1A0F1F);
  margin-bottom: 4px;
}
.td-cli-dash-stat--accent .td-cli-dash-stat__value { color: #fff; }
.td-cli-dash-stat__label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12px;
  color: var(--ink-2, #6B6877);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 700px) {
  .td-cli-dash-stats { grid-template-columns: repeat(2, 1fr); }
  .td-cli-dash-welcome__title { font-size: 22px; }
}

/* Tier progress */
.td-cli-dash-tier-progress {
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  padding: 24px;
  box-shadow: var(--clay-card, 0 2px 8px rgba(0,0,0,0.06));
  margin-bottom: 28px;
}
.td-cli-dash-tier-progress__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.td-cli-dash-tier-progress__header h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 16px;
  color: var(--ink, #1A0F1F);
}
.td-cli-dash-tier-progress__header span {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--pp, #9D27A9);
}
.td-cli-dash-tier-progress__tiers {
  position: relative;
  height: 24px;
  margin-top: 8px;
}
.td-cli-dash-tier-pip {
  position: absolute;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 10px;
  color: var(--ink-3, #999);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: translateX(-50%);
}
.td-cli-dash-tier-pip:first-child { transform: none; }
.td-cli-dash-tier-pip--current { color: var(--pp, #9D27A9); font-weight: 800; }
.td-cli-dash-tier-pip--reached { color: var(--ink, #1A0F1F); }

/* Quick actions + recent orders grid */
.td-cli-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
@media (max-width: 800px) {
  .td-cli-dash-grid { grid-template-columns: 1fr; }
}

.td-cli-dash-card {
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  padding: 24px;
  box-shadow: var(--clay-card, 0 2px 8px rgba(0,0,0,0.06));
}
.td-cli-dash-card__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.td-cli-dash-card__title {
  font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 16px;
  color: var(--ink, #1A0F1F);
  margin-bottom: 0;
}
.td-cli-dash-card__link {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 12px;
  color: var(--pp, #9D27A9);
}
.td-cli-dash-card__link:hover { text-decoration: underline; }
.td-cli-dash-card__empty {
  font-family: "Montserrat", sans-serif;
  font-size: 14px; color: var(--ink-2, #6B6877);
}

/* Quick action buttons */
.td-cli-dash-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.td-cli-dash-action {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg, #F5F3EF);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink, #1A0F1F);
  transition: all 0.15s;
}
.td-cli-dash-action:hover {
  border-color: var(--pp, #9D27A9);
  color: var(--pp, #9D27A9);
  background: rgba(157,39,169,0.04);
}
.td-cli-dash-action svg { flex-shrink: 0; color: var(--pp, #9D27A9); }

/* Recent orders mini table */
.td-cli-dash-recent-orders {
  display: flex; flex-direction: column; gap: 0;
}
.td-cli-dash-recent-order {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-family: "Montserrat", sans-serif; font-size: 13px;
}
.td-cli-dash-recent-order:last-child { border-bottom: none; }
.td-cli-dash-recent-order__id {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600; font-size: 12px;
  color: var(--pp, #9D27A9);
}
.td-cli-dash-recent-order__date { color: var(--ink-2, #6B6877); }
.td-cli-dash-recent-order__items { color: var(--ink-2, #6B6877); }
.td-cli-dash-recent-order__total {
  font-weight: 700; color: var(--ink, #1A0F1F);
}


/* ═══════════════════════════════════════════════════════════════════════
   0d. MESSAGES VIEW (inline panel)
   ═══════════════════════════════════════════════════════════════════════ */

.td-cli-messages-view {
  display: flex; flex-direction: column;
  height: calc(100vh - 64px - 64px);
  max-height: 700px;
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--clay-card, 0 2px 8px rgba(0,0,0,0.06));
  overflow: hidden;
}
.td-cli-messages-view__header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.td-cli-messages-view__header h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 20px;
  color: var(--ink, #1A0F1F);
  margin: 0;
}
.td-cli-messages-view__sub {
  font-family: "Montserrat", sans-serif;
  font-size: 13px; color: var(--ink-2, #6B6877);
}
.td-cli-messages-view__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.td-cli-messages-view__empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
}
.td-cli-messages-view__empty-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(157,39,169,0.08);
  color: var(--pp, #9D27A9);
  margin-bottom: 16px;
}
.td-cli-messages-view__empty-icon svg { width: 24px; height: 24px; }
.td-cli-messages-view__empty h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 16px;
  color: var(--ink, #1A0F1F);
  margin-bottom: 6px;
}
.td-cli-messages-view__empty p {
  font-family: "Montserrat", sans-serif;
  font-size: 14px; color: var(--ink-2, #6B6877);
}

.td-cli-messages-view__input {
  display: flex; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: var(--bg, #F5F3EF);
}
.td-cli-messages-view__input input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  font-family: "Montserrat", sans-serif; font-size: 14px;
  background: var(--card, #fff);
  color: var(--ink, #1A0F1F);
  outline: none;
}
.td-cli-messages-view__input input:focus {
  border-color: var(--pp, #9D27A9);
  box-shadow: 0 0 0 3px rgba(157,39,169,0.12);
}
.td-cli-messages-view__input button {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--pp, #9D27A9);
  color: #fff;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s;
}
.td-cli-messages-view__input button:hover { background: var(--pp-2, #7B1FA2); }
.td-cli-messages-view__input button:disabled {
  background: rgba(0,0,0,0.08); color: rgba(0,0,0,0.3); cursor: default;
}


/* ═══════════════════════════════════════════════════════════════════════
   0e. ACCOUNT VIEW
   ═══════════════════════════════════════════════════════════════════════ */

.td-cli-account-view {
  max-width: 700px;
}
.td-cli-account-view__card {
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--clay-card, 0 2px 8px rgba(0,0,0,0.06));
  padding: 4px 0;
  margin-bottom: 24px;
}
.td-cli-account-view__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.td-cli-account-view__row:last-child { border-bottom: none; }
.td-cli-account-view__label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-2, #6B6877);
}
.td-cli-account-view__value {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 14px;
  color: var(--ink, #1A0F1F);
}

/* ═══════════════════════════════════════════════════════════════════════
   0f. GETTING STARTED SECTION
   ═══════════════════════════════════════════════════════════════════════ */

.td-cli-getting-started {
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--clay-card, 0 2px 8px rgba(0,0,0,0.06));
  margin-bottom: 28px;
  overflow: hidden;
}
.td-cli-getting-started__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  transition: background 0.15s;
}
.td-cli-getting-started__header:hover {
  background: rgba(0,0,0,0.015);
}
.td-cli-getting-started__header-text h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 17px;
  color: var(--ink, #1A0F1F);
  margin: 0;
}
.td-cli-getting-started__header-text p {
  font-family: "Montserrat", sans-serif;
  font-size: 13px; color: var(--ink-2, #6B6877);
  margin: 2px 0 0;
}
.td-cli-getting-started__toggle {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink-2, #6B6877);
  transition: transform 0.2s, background 0.15s;
}
.td-cli-getting-started__toggle--open {
  transform: rotate(180deg);
}

.td-cli-getting-started__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 0 24px 24px;
}

.td-cli-feature-card {
  padding: 20px;
  border-radius: 12px;
  background: var(--bg, #F5F3EF);
  border: 1px solid rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.td-cli-feature-card:hover {
  border-color: rgba(157,39,169,0.15);
  box-shadow: 0 2px 12px rgba(157,39,169,0.06);
}
.td-cli-feature-card__icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(157,39,169,0.1);
  display: grid; place-items: center;
  color: var(--pp, #9D27A9);
  margin-bottom: 12px;
}
.td-cli-feature-card__title {
  font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 14px;
  color: var(--ink, #1A0F1F);
  margin: 0 0 8px;
}
.td-cli-feature-card__desc {
  font-family: "Montserrat", sans-serif;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2, #6B6877);
  margin: 0 0 12px;
}
.td-cli-feature-card__link {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 12px;
  color: var(--pp, #9D27A9);
  padding: 0;
}
.td-cli-feature-card__link:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .td-cli-getting-started__grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   0g. GUIDED TOUR
   ═══════════════════════════════════════════════════════════════════════ */

.td-tour-overlay {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.td-tour-backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 10, 20, 0.7);
  backdrop-filter: blur(3px);
}

.td-tour-dialog {
  position: relative;
  width: 90%;
  max-width: 480px;
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px 28px;
  box-shadow: 0 25px 60px rgba(11,10,20,0.5), 0 0 0 1px rgba(255,255,255,0.1);
  animation: td-tour-in 0.3s ease;
}
@keyframes td-tour-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.td-tour-dialog__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink-2, #6B6877);
  transition: background 0.15s;
}
.td-tour-dialog__close:hover { background: rgba(0,0,0,0.08); }

.td-tour-dialog__step-indicator {
  display: flex; gap: 6px;
  margin-bottom: 24px;
}
.td-tour-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  transition: all 0.2s;
}
.td-tour-dot--active {
  background: var(--pp, #9D27A9);
  width: 24px;
  border-radius: 4px;
}
.td-tour-dot--done {
  background: rgba(157,39,169,0.3);
}

.td-tour-dialog__title {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 22px;
  color: var(--ink, #1A0F1F);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.2;
}
.td-tour-dialog__body {
  font-family: "Montserrat", sans-serif;
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2, #6B6877);
  margin: 0 0 28px;
}

.td-tour-dialog__actions {
  display: flex; align-items: center; gap: 10px;
}
.td-tour-dialog__spacer { flex: 1; }

.td-tour-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 13px;
  border: none; cursor: pointer;
  transition: all 0.15s;
}
.td-tour-btn--primary {
  background: linear-gradient(135deg, var(--pp, #9D27A9), var(--pp-2, #7B1FA2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(157,39,169,0.3);
}
.td-tour-btn--primary:hover {
  box-shadow: 0 6px 20px rgba(157,39,169,0.4);
  transform: translateY(-1px);
}
.td-tour-btn--secondary {
  background: rgba(0,0,0,0.05);
  color: var(--ink, #1A0F1F);
}
.td-tour-btn--secondary:hover {
  background: rgba(0,0,0,0.08);
}

.td-tour-dialog__dismiss {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.td-tour-dismiss-label {
  display: flex; align-items: center; gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px; color: var(--ink-2, #6B6877);
  cursor: pointer;
}
.td-tour-dismiss-label input { display: none; }
.td-tour-dismiss-check {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 2px solid rgba(0,0,0,0.15);
  display: grid; place-items: center;
  transition: all 0.15s;
}
.td-tour-dismiss-label input:checked + .td-tour-dismiss-check {
  background: var(--pp, #9D27A9);
  border-color: var(--pp, #9D27A9);
  color: #fff;
}
.td-tour-skip {
  background: none; border: none; cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12px;
  color: var(--ink-2, #6B6877);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.td-tour-skip:hover { color: var(--ink, #1A0F1F); }


/* ─── Dropship view wrapper ─── */
.td-cli-dropship-view {
  max-width: 800px;
}

/* ═══════════════════════════════════════════════════════════════════════
   0h. LABELS VIEW
   ═══════════════════════════════════════════════════════════════════════ */

.td-cli-labels-view {
  max-width: 800px;
}
.td-cli-labels-view__intro {
  font-family: "Montserrat", sans-serif;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-2, #6B6877);
  margin-bottom: 24px;
  max-width: 600px;
}


/* ═══════════════════════════════════════════════════════════════════════
   1. PUBLIC VIEW  ( trade-public.jsx )
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Hero ─── */
.td-pub-hero { padding: 48px 0 24px; }

.td-pub-eyebrow {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pp);
  background: rgba(157,39,169,0.08);
  padding: 8px 16px; border-radius: var(--r-pill);
  margin-bottom: 18px;
}

.td-pub-headline {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 980px;
}
.td-pub-headline em {
  font-style: italic; font-weight: 800;
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.06em;
}

.td-pub-sub {
  margin-top: 16px; max-width: 640px;
  color: var(--ink-2);
  font-family: "Montserrat", sans-serif;
  font-size: 16px; line-height: 1.55;
}

/* ─── Sign-in gate ─── */
.td-pub-gate {
  background: linear-gradient(135deg, var(--td-dark-2) 0%, var(--td-dark-3) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 56px 48px;
  text-align: center;
  box-shadow: var(--clay-ink), 0 30px 60px -30px rgba(11,10,20,0.5);
  margin: 24px 0;
  position: relative; overflow: hidden;
}
.td-pub-gate::before {
  content: "";
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 80%; height: 160%;
  background: radial-gradient(ellipse, rgba(157,39,169,0.25), transparent 60%);
  pointer-events: none;
}
.td-pub-gate-icon {
  position: relative;
  display: inline-grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(157,39,169,0.2);
  color: #F5D6FA;
  margin-bottom: 22px;
  box-shadow: 0 0 40px rgba(157,39,169,0.4);
}
.td-pub-gate h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  position: relative;
}
.td-pub-gate p {
  max-width: 540px; margin: 0 auto 28px;
  color: rgba(255,255,255,0.75);
  font-size: 15px; line-height: 1.55;
  position: relative;
}
.td-pub-gate-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  position: relative;
}
.td-pub-gate-meta {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px; position: relative;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
}

/* ─── Public buttons ─── */
.td-pub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: none; border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  background: rgba(255,255,255,0.08); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
  transition: all 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.td-pub-btn:hover { background: rgba(255,255,255,0.16); }
.td-pub-btn.primary {
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(157,39,169,0.55);
}
.td-pub-btn.primary:hover {
  box-shadow: 0 18px 32px -10px rgba(157,39,169,0.7);
  transform: translateY(-1px);
}

/* ─── Application form ─── */
.td-pub-apply-grid {
  display: grid; grid-template-columns: 380px 1fr;
  gap: 28px; padding: 24px 0;
  align-items: flex-start;
}
@media (max-width: 980px) {
  .td-pub-apply-grid { grid-template-columns: 1fr; }
}

.td-pub-apply-side {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  box-shadow: var(--clay-w);
  position: sticky; top: 180px;
  align-self: start;
}
.td-pub-apply-side-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--pp);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.td-pub-apply-side h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 28px;
  letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 12px;
}
.td-pub-apply-side h3 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.18em;
}
.td-pub-apply-side p {
  font-size: 14px; color: var(--ink-3); line-height: 1.55;
  margin-bottom: 20px;
}
.td-pub-apply-bullets {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.td-pub-apply-bullets li {
  display: flex; align-items: center; gap: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-2);
}
.td-pub-apply-bullets li svg { color: var(--pp); flex-shrink: 0; }
.td-pub-apply-hint {
  background: rgba(157,39,169,0.06);
  border-radius: 12px; padding: 12px 14px;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.td-pub-apply-hint strong { color: var(--pp); font-weight: 700; }

.td-pub-apply-form {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  box-shadow: var(--clay-w);
}

.td-pub-form-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.td-pub-form-head h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 20px;
  letter-spacing: -0.01em;
}
.td-pub-form-meta {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12px;
  color: var(--ink-3);
}
.td-pub-form-error {
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--td-danger);
  margin-bottom: 16px;
}

/* Form grid — used by application form */
.td-pub-apply-form .form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 540px) {
  .td-pub-apply-form .form-grid { grid-template-columns: 1fr; }
  .td-pub-apply-form .form-grid .full { grid-column: 1; }
}
.td-pub-apply-form .form-grid .full { grid-column: 1 / -1; }

/* Field styling within application form */
.td-pub-apply-form .field {
  display: flex; flex-direction: column; gap: 6px;
}
.td-pub-apply-form .field label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.td-pub-apply-form .field input,
.td-pub-apply-form .field textarea {
  padding: 14px 16px;
  background: var(--surface);
  border: none; border-radius: 12px;
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 1px rgba(11,10,20,0.06);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 14px;
  color: var(--ink); outline: none;
  transition: box-shadow 0.16s;
  width: 100%;
}
.td-pub-apply-form .field input:focus,
.td-pub-apply-form .field textarea:focus {
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 2px var(--pp);
}
.td-pub-apply-form .field select {
  padding: 14px 16px;
  background: var(--surface);
  border: none; border-radius: 12px;
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 1px rgba(11,10,20,0.06);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 14px;
  color: var(--ink); outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239D27A9' stroke-width='2.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 40px;
  transition: box-shadow 0.16s;
  width: 100%;
}
.td-pub-apply-form .field select:focus {
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 2px var(--pp);
}

.td-pub-lbl-hint {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
  line-height: 1.4;
}

/* Chip row ("How did you hear") */
.td-pub-chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.td-pub-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(11,10,20,0.04);
  border: 1.5px solid transparent;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.16s;
}
.td-pub-chip:hover {
  background: rgba(157,39,169,0.06);
  border-color: rgba(157,39,169,0.2);
}
.td-pub-chip.on {
  background: rgba(157,39,169,0.1);
  border-color: var(--pp);
  color: var(--pp);
}

/* Fulfillment opt-in card */
.td-pub-fulfill {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  background: rgba(157,39,169,0.04);
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(11,10,20,0.07);
  transition: all 0.18s;
}
.td-pub-fulfill:hover { box-shadow: inset 0 0 0 1px rgba(157,39,169,0.35); }
.td-pub-fulfill.on {
  background: rgba(157,39,169,0.07);
  box-shadow: inset 0 0 0 2px var(--pp);
}
.td-pub-fulfill input { position: absolute; opacity: 0; pointer-events: none; }
.td-pub-fulfill-box {
  width: 22px; height: 22px; border-radius: 6px;
  background: #fff; flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(11,10,20,0.18);
  display: grid; place-items: center;
  color: #fff;
  transition: all 0.18s;
}
.td-pub-fulfill.on .td-pub-fulfill-box {
  background: var(--pp);
  box-shadow: 0 6px 14px -6px rgba(157,39,169,0.6);
}
.td-pub-fulfill-t {
  font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 15px;
  color: var(--ink); margin-bottom: 4px;
}
.td-pub-fulfill-t em {
  font-style: italic; color: var(--pp); padding-right: 0.18em;
}
.td-pub-fulfill-s {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--ink-3); line-height: 1.5;
}

/* TOS checkbox */
.td-pub-tos {
  display: flex; align-items: center; gap: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  margin-top: 8px;
}
.td-pub-tos input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--pp);
  flex-shrink: 0;
}
.td-pub-tos a {
  color: var(--pp); font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(157,39,169,0.3);
  text-underline-offset: 2px;
}
.td-pub-tos a:hover { text-decoration-color: var(--pp); }

/* Form footer */
.td-pub-form-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}

/* ─── Pending banner ─── */
.td-pub-pending {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(255,194,107,0.18), rgba(255,194,107,0.05));
  border-radius: var(--r-xl);
  box-shadow: var(--clay-w), inset 0 0 0 1px rgba(255,150,30,0.18);
  margin: 24px 0;
}
.td-pub-pending-l { display: flex; align-items: center; gap: 16px; }
.td-pub-pending-pulse {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,150,30,0.18);
  display: grid; place-items: center; flex-shrink: 0;
}
.td-pub-pending-pulse span {
  width: 14px; height: 14px; border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 0 0 rgba(245,158,11,0.6);
  animation: td-pulse 1.6s ease-out infinite;
}
@keyframes td-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(245,158,11,0); }
}
.td-pub-pending-k {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em;
  color: #B45309;
  text-transform: uppercase;
}
.td-pub-pending-n {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 18px;
  color: var(--ink); margin-top: 4px;
}
.td-pub-pending-meta {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 12px;
  color: var(--ink-3); margin-top: 4px;
}

/* ─── Denied banner ─── */
.td-pub-denied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(220,38,38,0.1), rgba(220,38,38,0.03));
  border-radius: var(--r-xl);
  box-shadow: var(--clay-w), inset 0 0 0 1px rgba(220,38,38,0.18);
  margin: 24px 0;
}
.td-pub-denied-l { display: flex; align-items: center; gap: 16px; }
.td-pub-denied-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(220,38,38,0.15);
  display: grid; place-items: center; flex-shrink: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 24px;
  color: var(--td-danger);
}
.td-pub-denied-k {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--td-danger);
  text-transform: uppercase;
}
.td-pub-denied-n {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 14px;
  color: var(--ink-2); margin-top: 4px;
  line-height: 1.5; max-width: 500px;
}
.td-pub-denied-meta {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 12px;
  color: var(--ink-3); margin-top: 4px;
}
.td-pub-denied-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* ─── Pillars marketing ─── */
.td-pub-pillars { padding: 40px 0; }
.td-pub-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 22px; padding: 0 4px;
}
.td-pub-section-head h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
}
.td-pub-section-head h2 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: 0.18em;
}
.td-pub-section-head span {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 14px;
  color: var(--ink-3); max-width: 480px;
}
.td-pub-pillar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.td-pub-pillar {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 26px 22px;
  box-shadow: var(--clay-w);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.td-pub-pillar:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 56px -28px rgba(157,39,169,0.35),
    inset 0 0 0 1px rgba(157,39,169,0.16);
}
.td-pub-pillar-k {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; color: var(--pp);
}
.td-pub-pillar-t {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 22px;
  letter-spacing: -0.01em; color: var(--ink);
}
.td-pub-pillar-s {
  font-size: 13px; color: var(--ink-3); line-height: 1.5;
}
@media (max-width: 980px) {
  .td-pub-pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .td-pub-pillar-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   2. CLIENT VIEW  ( trade-client.jsx )
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Loading screen ─── */
.td-cli-loading {
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #0B0A14 0%, #1A0F1F 60%, #2A1632 100%);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.td-cli-loading--fade {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.td-cli-loading__content {
  display: flex; flex-direction: column;
  align-items: center; gap: 28px;
  text-align: center;
}
.td-cli-loading__brand {
  font-family: "Poppins", sans-serif;
  font-weight: 900; font-size: 48px;
  letter-spacing: 0.18em;
  color: #fff; line-height: 1;
}
.td-cli-loading__sub {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--pp-soft);
}
.td-cli-loading__bar-track {
  width: 280px; height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.td-cli-loading__bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--pp), var(--pp-soft), var(--pp));
  background-size: 200% 100%;
  animation: td-load-shimmer 1.4s ease infinite;
  transition: width 0.15s ease;
}
@keyframes td-load-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.td-cli-loading__pillar {
  height: 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.td-cli-loading__pillar--in {
  opacity: 1;
}

/* ─── Notification badge ─── */
.td-cli-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--pp); color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 10px;
  position: absolute; top: -4px; right: -6px;
}

/* ─── Account bar ─── */
.td-cli-account-bar {
  background: linear-gradient(135deg, var(--td-dark-2) 0%, var(--td-dark-3) 100%);
  color: #fff;
  padding: 28px 0;
  position: relative; overflow: hidden;
}
.td-cli-account-bar::before {
  content: ""; position: absolute;
  top: -40%; right: -5%;
  width: 50%; height: 180%;
  background: radial-gradient(ellipse, rgba(232,181,239,0.15), transparent 70%);
  pointer-events: none;
}
.td-cli-account-bar__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  position: relative;
  margin-bottom: 20px;
}
.td-cli-account-bar__identity { position: relative; }
.td-cli-account-bar__company {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.td-cli-account-bar__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.td-cli-account-bar__contact {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: rgba(255,255,255,0.6);
}

.td-cli-tier-badge {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.td-cli-tier-badge--lg {
  padding: 6px 14px; font-size: 11px;
}
.td-cli-tier-badge--sm {
  padding: 3px 8px; font-size: 9px;
}

.td-cli-approved-badge {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(22,163,74,0.2); color: #4ADE80;
}

.td-cli-account-bar__spend {
  display: flex; flex-direction: column; align-items: flex-end;
  position: relative;
}
.td-cli-account-bar__spend-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: 4px;
}
.td-cli-account-bar__spend-value {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800; font-size: 24px;
  color: #fff;
}
.td-cli-account-bar__spend-orders {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 12px;
  color: rgba(255,255,255,0.5); margin-top: 2px;
}

.td-cli-account-bar__progress-section {
  position: relative;
  margin-bottom: 20px;
}
.td-cli-account-bar__progress-labels {
  display: flex; justify-content: space-between;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.td-cli-account-bar__progress-track {
  height: 8px; background: rgba(0,0,0,0.3);
  border-radius: var(--r-pill); overflow: hidden;
}
.td-cli-account-bar__progress-fill {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #E8B5EF, var(--pp-soft));
  transition: width 0.4s ease;
}

.td-cli-account-bar__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; position: relative;
}
.td-cli-account-bar__stat {
  display: flex; flex-direction: column; gap: 2px;
}
.td-cli-account-bar__stat-value {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 18px; color: #fff;
}
.td-cli-account-bar__stat-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

@media (max-width: 760px) {
  .td-cli-account-bar__top { flex-direction: column; }
  .td-cli-account-bar__spend { align-items: flex-start; }
  .td-cli-account-bar__stats { grid-template-columns: 1fr 1fr; }
}

/* ─── Dashboard layout ─── */
.td-cli-dashboard {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 28px; padding-top: 28px; padding-bottom: 28px;
  align-items: flex-start;
}
.td-cli-dashboard__main { min-width: 0; }
.td-cli-dashboard__sidebar {
  position: sticky; top: 110px;
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 980px) {
  .td-cli-dashboard { grid-template-columns: 1fr; }
  .td-cli-dashboard__sidebar { position: static; }
}

/* ─── Catalog section ─── */
.td-cli-catalog { }

.td-cli-catalog__tabs {
  display: inline-flex; padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(11,10,20,0.05);
  gap: 2px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.td-cli-catalog__tab {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: transparent; color: var(--ink-2);
  border: none;
  transition: all 0.16s;
  white-space: nowrap;
}
.td-cli-catalog__tab:hover { color: var(--ink); background: rgba(11,10,20,0.03); }
.td-cli-catalog__tab--active {
  background: var(--ink); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(11,10,20,0.5);
}

/* Toolbar: toggle + search */
.td-cli-catalog__toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.td-cli-catalog__toolbar .td-cli-catalog__search {
  flex: 1; min-width: 200px; margin-bottom: 0;
}

/* Warehouse toggle buttons */
.td-cli-catalog__wh-toggle {
  display: flex; gap: 0;
  background: rgba(11,10,20,0.04);
  border-radius: 10px; padding: 3px;
}
.td-cli-catalog__wh-btn {
  display: flex; align-items: center; gap: 6px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); background: transparent;
  border: none; border-radius: 8px;
  padding: 8px 14px; cursor: pointer;
  transition: all 0.18s ease; white-space: nowrap;
}
.td-cli-catalog__wh-btn:hover {
  color: var(--ink); background: rgba(255,255,255,0.5);
}
.td-cli-catalog__wh-btn.active {
  color: #fff; background: var(--pp, #9D27A9);
  box-shadow: 0 2px 8px rgba(157,39,169,0.25);
}
.td-cli-catalog__wh-btn.active svg { stroke: #fff; }
.td-cli-catalog__wh-btn svg {
  width: 14px; height: 14px; flex-shrink: 0;
}
.td-cli-catalog__wh-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  font-size: 10px; font-weight: 800;
  background: rgba(255,255,255,0.3);
  border-radius: 9px; padding: 0 5px;
  line-height: 1;
}
.td-cli-catalog__wh-btn.active .td-cli-catalog__wh-count {
  background: rgba(255,255,255,0.3);
}

/* Lead time inline badge */
.td-cli-catalog__lead-time {
  font-weight: 700; color: var(--pp, #9D27A9);
}

/* Empty warehouse message */
.td-cli-catalog__empty-wh {
  text-align: center; padding: 40px 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 14px;
  color: var(--ink-3);
  background: rgba(11,10,20,0.02);
  border-radius: 12px; margin-bottom: 16px;
}

@media (max-width: 640px) {
  .td-cli-catalog__toolbar { flex-direction: column; }
  .td-cli-catalog__wh-toggle { width: 100%; }
  .td-cli-catalog__wh-btn { flex: 1; justify-content: center; font-size: 10px; padding: 8px 8px; }
}

.td-cli-catalog__search {
  position: relative; display: flex; align-items: center;
  margin-bottom: 16px;
}
.td-cli-catalog__search svg {
  position: absolute; left: 14px;
  color: var(--ink-3); pointer-events: none;
}
.td-cli-catalog__search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  background: var(--surface);
  border: none; border-radius: var(--r-sm);
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 1px rgba(11,10,20,0.06);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink); outline: none;
  transition: box-shadow 0.16s;
}
.td-cli-catalog__search input::placeholder { color: var(--ink-3); font-weight: 500; }
.td-cli-catalog__search input:focus {
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 2px var(--pp);
}

/* Branded intro */
.td-cli-catalog__branded-intro {
  display: flex; align-items: center; gap: 28px;
  background: var(--card, #fff);
  border-radius: var(--r-lg, 16px);
  padding: 24px 28px;
  box-shadow: var(--clay-card, 0 2px 8px rgba(0,0,0,0.06));
  margin-bottom: 20px;
}
.td-cli-catalog__branded-intro-text {
  flex: 1; min-width: 0;
}
.td-cli-catalog__branded-intro-text p {
  font-family: "Montserrat", sans-serif;
  font-size: 14px; line-height: 1.65;
  color: var(--ink-2, #6B6877);
  margin: 0;
}
.td-cli-catalog__branded-intro-img {
  flex-shrink: 0;
  width: 120px; height: 120px;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.06);
  overflow: hidden;
  background: #FAFAFA;
  display: grid; place-items: center;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.td-cli-catalog__branded-intro-img:hover {
  border-color: var(--pp, #9D27A9);
  box-shadow: 0 4px 16px rgba(157,39,169,0.15);
  transform: scale(1.03);
}
.td-cli-catalog__branded-intro-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Lightbox */
.td-cli-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,10,20,0.8);
  backdrop-filter: blur(4px);
  animation: td-view-in 0.2s ease-out;
}
.td-cli-lightbox__inner {
  position: relative;
  max-width: 500px; width: 90%;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}
.td-cli-lightbox__inner img {
  display: block;
  width: 100%; height: auto;
}
.td-cli-lightbox__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s;
  z-index: 1;
}
.td-cli-lightbox__close:hover { background: rgba(0,0,0,0.7); }
.td-cli-lightbox__caption {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-2, #6B6877);
  text-align: center;
  padding: 14px 16px;
  margin: 0;
}

@media (max-width: 600px) {
  .td-cli-catalog__branded-intro {
    flex-direction: column-reverse; gap: 16px; text-align: center;
  }
  .td-cli-catalog__branded-intro-img { width: 100px; height: 100px; }
}

/* Kit info note */
.td-cli-catalog__kit-note {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3, #999);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Product group name header within table */
/* Alternating product group backgrounds */
.td-cli-catalog__product-group {
  border-left: 3px solid transparent;
  transition: background 0.15s ease;
}
.td-cli-catalog__product-group:nth-child(odd) {
  background: rgba(157,39,169,0.03);
  border-left-color: rgba(157,39,169,0.2);
}
.td-cli-catalog__product-group:nth-child(even) {
  background: rgba(11,10,20,0.015);
  border-left-color: rgba(11,10,20,0.1);
}
.td-cli-catalog__group-name {
  font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 14px;
  color: var(--ink, #1A0F1F);
  padding: 14px 12px 6px;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 4px;
}
.td-cli-catalog__product-group:first-child .td-cli-catalog__group-name {
  border-top: none;
  margin-top: 0;
}

.td-cli-catalog__note {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12px;
  color: var(--ink-3);
  background: rgba(157,39,169,0.05);
  padding: 10px 14px; border-radius: 10px;
  margin-bottom: 16px;
}

.td-cli-catalog__group {
  margin-bottom: 28px;
}
.td-cli-catalog__group-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.td-cli-catalog__empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
}

.td-cli-catalog__table {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--clay-w-sm);
  overflow: hidden;
}
.td-cli-catalog__header-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.8fr 1.5fr;
  gap: 8px; padding: 12px 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid rgba(11,10,20,0.06);
}
.td-cli-catalog__row {
  border-bottom: 1px solid rgba(11,10,20,0.04);
}
.td-cli-catalog__row:nth-child(odd) {
  background: rgba(255,255,255,0.5);
}
.td-cli-catalog__row:nth-child(even) {
  background: rgba(11,10,20,0.025);
}
.td-cli-catalog__row:last-child { border-bottom: none; }
.td-cli-catalog__row-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.8fr 1.5fr;
  gap: 8px; padding: 14px 16px;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--ink-2);
}
.td-cli-catalog__row:hover { background: rgba(157,39,169,0.06) !important; }
.td-cli-catalog__col-name {
  font-weight: 700; color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  background: rgba(157,39,169,0.08);
  padding: 3px 10px; border-radius: 16px;
  display: inline-block; white-space: nowrap;
}
.td-cli-catalog__col-sku {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--ink-3);
}
.td-cli-catalog__col-save {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  color: #3aaa55; letter-spacing: 0.03em;
}
.td-cli-catalog__your-price {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; color: var(--pp);
}
.td-cli-catalog__col-lead { font-size: 12px; color: var(--ink-3); }
.td-cli-catalog__col-stock {
  display: flex; align-items: center;
}
.td-cli-catalog__col-actions {
  display: flex; align-items: center; gap: 8px;
}
.td-cli-catalog__coa-row {
  padding: 8px 16px 14px;
}

.td-cli-stock-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}

/* Qty controls */
.td-cli-qty-control {
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  background: rgba(11,10,20,0.04);
  overflow: hidden;
}
.td-cli-qty-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent; border: none;
  cursor: pointer; color: var(--ink-2);
  transition: background 0.14s;
}
.td-cli-qty-btn:hover { background: rgba(11,10,20,0.06); }
.td-cli-qty-btn:disabled { opacity: 0.3; cursor: default; }
.td-cli-qty-input {
  width: 44px; text-align: center;
  border: none; background: transparent;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 13px;
  color: var(--ink); outline: none;
  -moz-appearance: textfield;
}
.td-cli-qty-input::-webkit-outer-spin-button,
.td-cli-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.td-cli-qty-display {
  width: 44px; text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 13px;
  color: var(--ink);
}
.td-cli-qty-input {
  width: 60px; text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 6px;
  background: var(--surface);
  -moz-appearance: textfield;
}
.td-cli-qty-input::-webkit-inner-spin-button,
.td-cli-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.td-cli-add-btn {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  color: #fff; border: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 12px;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(157,39,169,0.5);
  transition: all 0.16s;
}
.td-cli-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(157,39,169,0.6);
}
.td-cli-add-btn:disabled { opacity: 0.5; pointer-events: none; }

/* COA toggle */
.td-cli-coa-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12px;
  color: var(--ink-2); cursor: pointer;
}
.td-cli-coa-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.td-cli-coa-toggle__check {
  width: 18px; height: 18px; border-radius: 5px;
  background: #fff; flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(11,10,20,0.15);
  display: grid; place-items: center;
  color: #fff; transition: all 0.16s;
}
.td-cli-coa-toggle input:checked + .td-cli-coa-toggle__check {
  background: var(--pp);
  box-shadow: 0 4px 10px -4px rgba(157,39,169,0.5);
}

@media (max-width: 980px) {
  .td-cli-catalog__header-row,
  .td-cli-catalog__row-main {
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
  }
  .td-cli-catalog__col-sku { display: none; }
}
@media (max-width: 540px) {
  .td-cli-catalog__header-row,
  .td-cli-catalog__row-main {
    grid-template-columns: 1fr 1fr 1.2fr;
  }
  .td-cli-catalog__col-save { display: none; }
}

/* ─── Client buttons ─── */
.td-cli-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: none; border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(157,39,169,0.55);
  transition: all 0.18s;
  text-decoration: none;
  white-space: nowrap;
}
.td-cli-btn-primary:hover {
  box-shadow: 0 18px 32px -10px rgba(157,39,169,0.7);
  transform: translateY(-1px);
}
.td-cli-btn-primary:disabled { opacity: 0.5; pointer-events: none; }

.td-cli-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: none; border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  background: rgba(11,10,20,0.06); color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px rgba(11,10,20,0.1);
  transition: all 0.18s;
  text-decoration: none;
  white-space: nowrap;
}
.td-cli-btn-secondary:hover {
  background: rgba(11,10,20,0.1);
}

.td-cli-btn-block {
  display: flex; width: 100%;
  justify-content: center;
}

/* ─── Client form elements ─── */
.td-cli-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.td-cli-field label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.td-cli-field input,
.td-cli-field textarea,
.td-cli-field select {
  padding: 14px 16px;
  background: var(--surface);
  border: none; border-radius: 12px;
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 1px rgba(11,10,20,0.06);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 14px;
  color: var(--ink); outline: none;
  transition: box-shadow 0.16s;
  width: 100%;
}
.td-cli-field textarea { resize: vertical; min-height: 80px; }
.td-cli-field input:focus,
.td-cli-field textarea:focus,
.td-cli-field select:focus {
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 2px var(--pp);
}
.td-cli-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239D27A9' stroke-width='2.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 40px;
}
.td-cli-field small {
  font-size: 11px; color: var(--ink-3); font-weight: 500;
}

.td-cli-form-error {
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--td-danger);
  margin-bottom: 16px;
}

.td-cli-checkbox-label {
  display: flex; align-items: center; gap: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-2); cursor: pointer;
  margin-bottom: 16px;
}
.td-cli-checkbox-label input { position: absolute; opacity: 0; pointer-events: none; }
.td-cli-checkbox-box {
  width: 20px; height: 20px; border-radius: 6px;
  background: #fff; flex-shrink: 0;
  box-shadow: inset 0 0 0 1.5px rgba(11,10,20,0.15);
  display: grid; place-items: center;
  color: #fff; transition: all 0.16s;
}
.td-cli-checkbox-label input:checked + .td-cli-checkbox-box {
  background: var(--pp);
  box-shadow: 0 4px 10px -4px rgba(157,39,169,0.5);
}

/* ─── Drop shipping tab ─── */
.td-cli-dropship {
  padding: 8px 0;
}
.td-cli-dropship__intro {
  margin-bottom: 20px;
}
.td-cli-dropship__intro h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 22px;
  margin-bottom: 8px;
}
.td-cli-dropship__intro p {
  color: var(--ink-2); font-size: 14px; line-height: 1.55;
  max-width: 600px;
}
.td-cli-dropship__form {
  max-width: 560px;
}
.td-cli-dropship__success {
  text-align: center; padding: 32px 20px;
}
.td-cli-dropship__success h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 20px;
  color: var(--td-success); margin-bottom: 8px;
}
.td-cli-dropship__success p {
  color: var(--ink-2); font-size: 14px;
}

/* ─── Overlay (shared by cart + chat drawers) ─── */
.td-cli-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(11,10,20,0.5);
  backdrop-filter: blur(6px);
}

/* ─── Cart drawer ─── */
.td-cli-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 90vw;
  background: var(--surface);
  box-shadow: -20px 0 60px rgba(11,10,20,0.3);
  z-index: 8500;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.td-cli-cart-drawer--open { transform: translateX(0); }

.td-cli-cart-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.td-cli-cart-drawer__header h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 18px;
}
.td-cli-cart-drawer__close {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,10,20,0.04);
  cursor: pointer; border: none;
  transition: background 0.14s;
}
.td-cli-cart-drawer__close:hover { background: rgba(11,10,20,0.1); }

.td-cli-cart-drawer__body {
  flex: 1; overflow-y: auto; padding: 20px 24px;
}
.td-cli-cart-drawer__empty {
  text-align: center; padding: 40px 16px;
  color: var(--ink-3); font-size: 14px;
}
.td-cli-cart-drawer__empty p { margin: 4px 0; }

.td-cli-cart-item {
  padding: 16px 0;
  border-bottom: 1px solid rgba(11,10,20,0.06);
  display: flex; flex-direction: column; gap: 8px;
}
.td-cli-cart-item:last-child { border-bottom: none; }
.td-cli-cart-item__info {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.td-cli-cart-item__name {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 14px; color: var(--ink);
}
.td-cli-cart-item__price {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--ink-3);
}
.td-cli-cart-item__controls {
  display: flex; align-items: center; gap: 12px;
}
.td-cli-cart-item__remove {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(220,38,38,0.06); color: var(--td-danger);
  cursor: pointer; border: none;
  transition: background 0.14s;
}
.td-cli-cart-item__remove:hover { background: rgba(220,38,38,0.12); }
.td-cli-cart-item__line-total {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 14px;
  color: var(--ink);
  text-align: right;
}
/* Service items in cart */
.td-cli-service-item { border-left: 3px solid var(--pp); }
.td-cli-cart-item__meta {
  font-size: 12px; color: var(--ink-3);
  margin-top: 2px;
}

.td-cli-cart-drawer__promo {
  background: rgba(157,39,169,0.06);
  border-radius: 12px; padding: 14px 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--pp);
  margin-top: 12px;
}
.td-cli-cart-drawer__promo-emoji { margin-right: 6px; }

.td-cli-cart-drawer__footer {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.td-cli-cart-drawer__line {
  display: flex; justify-content: space-between;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-2);
}
.td-cli-cart-drawer__line--discount {
  color: var(--pp);
}
.td-cli-cart-drawer__line--total {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 16px;
  color: var(--ink);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* ─── Tier card (sidebar) ─── */
.td-cli-tier-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 24px;
  box-shadow: var(--clay-w-sm);
}
.td-cli-tier-card__header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.td-cli-tier-card__discount {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-2);
}
.td-cli-tier-card__progress {
  margin-bottom: 16px;
}
.td-cli-tier-card__progress-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 11px;
  color: var(--ink-3); margin-top: 8px;
}
.td-cli-tier-card__perks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.td-cli-tier-card__perks li {
  display: flex; align-items: center; gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 12px;
  color: var(--ink-2);
}
.td-cli-tier-card__perks li svg { color: var(--pp); flex-shrink: 0; }

/* ─── Chat drawer ─── */
.td-cli-chat-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 90vw;
  background: var(--surface);
  box-shadow: -20px 0 60px rgba(11,10,20,0.3);
  z-index: 8500;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.td-cli-chat-drawer--open { transform: translateX(0); }

.td-cli-chat-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.td-cli-chat-drawer__header h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 18px;
}
.td-cli-chat-drawer__close {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,10,20,0.04);
  cursor: pointer; border: none;
  transition: background 0.14s;
}
.td-cli-chat-drawer__close:hover { background: rgba(11,10,20,0.1); }

.td-cli-chat-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.td-cli-chat-drawer__empty {
  text-align: center; padding: 40px 16px;
  color: var(--ink-3); font-size: 13px;
}

.td-cli-chat-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px; line-height: 1.5;
}
.td-cli-chat-bubble--client {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.td-cli-chat-bubble--admin {
  align-self: flex-start;
  background: rgba(11,10,20,0.06);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.td-cli-chat-bubble__text { }
.td-cli-chat-bubble__time {
  font-size: 10px; margin-top: 4px;
  opacity: 0.6;
}

.td-cli-chat-drawer__input {
  display: flex; gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}
.td-cli-chat-drawer__input input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(11,10,20,0.04);
  border: none; border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink); outline: none;
}
.td-cli-chat-drawer__input input::placeholder { color: var(--ink-3); }
.td-cli-chat-drawer__input button {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(157,39,169,0.5);
  transition: all 0.14s;
}
.td-cli-chat-drawer__input button:hover { transform: scale(1.05); }
.td-cli-chat-drawer__input button:disabled { opacity: 0.4; pointer-events: none; }

/* ─── Order history ─── */
.td-cli-orders {
  padding: 28px 0;
}
.td-cli-section-title {
  display: flex; align-items: center; gap: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 22px;
  margin-bottom: 20px;
}
.td-cli-orders__loading,
.td-cli-orders__empty {
  text-align: center; padding: 32px;
  color: var(--ink-3);
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 14px;
}
.td-cli-orders__table {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--clay-w-sm);
  overflow: hidden;
}
.td-cli-orders__header {
  display: grid; grid-template-columns: 30px 1fr 1fr 1.1fr 1fr 1.2fr 0.9fr;
  gap: 8px; padding: 12px 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid rgba(11,10,20,0.06);
}
.td-cli-orders__group { border-bottom: 1px solid rgba(11,10,20,0.04); }
.td-cli-orders__group:last-child { border-bottom: none; }
.td-cli-orders__row {
  display: grid; grid-template-columns: 30px 1fr 1fr 1.1fr 1fr 1.2fr 0.9fr;
  gap: 8px; padding: 14px 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--ink-2);
  align-items: center;
}
.td-cli-orders__row--clickable { cursor: pointer; }
.td-cli-orders__row:hover { background: rgba(157,39,169,0.02); }
.td-cli-orders__toggle { color: var(--ink-3); font-size: 11px; user-select: none; }
.td-cli-orders__status {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.td-cli-orders__coa-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 10px;
  background: #FFF1D0; color: #8A5A00;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.td-cli-orders__tracking { color: #9D27A9; text-decoration: underline; word-break: break-all; }
.td-cli-orders__muted { color: var(--ink-3); }

.td-cli-orders__detail {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px;
  padding: 18px 22px 22px;
  background: rgba(157,39,169,0.025);
}
@media (max-width: 900px) {
  .td-cli-orders__detail { grid-template-columns: 1fr; }
}
.td-cli-orders__detail-section h4 {
  font-family: "Montserrat", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 10px;
}
.td-cli-orders__items {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border-radius: var(--r-sm);
  overflow: hidden; font-size: 13px;
}
.td-cli-orders__items th, .td-cli-orders__items td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid rgba(11,10,20,0.05);
  vertical-align: top;
}
.td-cli-orders__items th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-3); font-weight: 700; background: rgba(11,10,20,0.025);
}
.td-cli-orders__items tr:last-child td { border-bottom: none; }
.td-cli-orders__item-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 10px;
  background: #E8DFFF; color: #4A2E8A;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.td-cli-orders__item-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.td-cli-orders__totals {
  margin-top: 10px; padding: 10px 12px;
  background: var(--surface); border-radius: var(--r-sm);
  font-size: 13px;
}
.td-cli-orders__totals > div {
  display: flex; justify-content: space-between; padding: 3px 0;
}
.td-cli-orders__totals-grand {
  border-top: 1px solid rgba(11,10,20,0.08);
  margin-top: 6px; padding-top: 8px !important;
  font-weight: 700; font-size: 14px;
}
.td-cli-orders__tracking-list { display: flex; flex-direction: column; gap: 6px; }
.td-cli-orders__tracking-row {
  background: var(--surface); border-radius: var(--r-sm);
  padding: 8px 12px; font-size: 13px;
}
.td-cli-orders__tracking-row a { color: #9D27A9; text-decoration: underline; word-break: break-all; }

@media (max-width: 760px) {
  .td-cli-orders__header,
  .td-cli-orders__row { grid-template-columns: 20px 1fr 1fr 1fr 1fr; }
  .td-cli-orders__header span:nth-child(6),
  .td-cli-orders__row span:nth-child(6),
  .td-cli-orders__header span:nth-child(7),
  .td-cli-orders__row span:nth-child(7) { display: none; }
}

/* ─── Modal (stock request etc) ─── */
.td-cli-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(11,10,20,0.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
}
.td-cli-modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-w), 0 40px 80px -30px rgba(11,10,20,0.5);
  max-width: 560px; width: 100%;
  max-height: 85vh; overflow-y: auto;
}
.td-cli-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
}
.td-cli-modal__header h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 18px;
}
.td-cli-modal__close {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,10,20,0.04);
  cursor: pointer; border: none;
}
.td-cli-modal__close:hover { background: rgba(11,10,20,0.1); }
.td-cli-modal__body {
  padding: 24px 28px;
}
.td-cli-modal__desc {
  color: var(--ink-2); font-size: 14px; line-height: 1.5;
  margin-bottom: 16px;
}

/* ─── Label section (white-label tab) ─── */
.td-cli-label-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.td-cli-label-section__title {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 20px;
  margin-bottom: 6px;
}
.td-cli-label-section__desc {
  color: var(--ink-2); font-size: 14px;
  margin-bottom: 16px;
}
.td-cli-label-section__options {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.td-cli-label-option {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  background: rgba(11,10,20,0.04);
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-2); cursor: pointer;
  transition: all 0.16s;
}
.td-cli-label-option:hover {
  background: rgba(157,39,169,0.06);
  border-color: rgba(157,39,169,0.2);
}
.td-cli-label-option--active {
  background: rgba(157,39,169,0.08);
  border-color: var(--pp);
  color: var(--pp);
}

.td-cli-label-form {
  max-width: 480px;
}
.td-cli-label-form__success {
  background: rgba(22,163,74,0.06);
  border-radius: 12px; padding: 20px;
  color: var(--td-success);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 14px;
}
.td-cli-label-form__fee {
  background: rgba(157,39,169,0.06);
  border-radius: 10px; padding: 12px 16px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 14px;
  color: var(--ink);
  margin-bottom: 16px;
}
.td-cli-label-form__fee strong {
  color: var(--pp); font-weight: 800;
}
.td-cli-label-form__fee-breakdown {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--ink-3);
  font-weight: 500;
}

/* ─── Label Collection ─── */
.td-cli-label-collection__toolbar {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap;
}
.td-cli-label-collection__toolbar .td-cli-search {
  flex: 1; min-width: 200px;
}
.td-cli-label-collection__loading,
.td-cli-label-collection__empty {
  text-align: center; padding: 40px 20px;
  color: var(--ink-3); font-size: 14px;
}
.td-cli-label-collection__empty p { margin: 8px 0; }
.td-cli-label-collection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.td-cli-label-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.td-cli-label-card__preview {
  display: flex; align-items: center; justify-content: center;
  height: 100px; border-radius: 8px;
  background: rgba(11,10,20,0.03); overflow: hidden;
}
.td-cli-label-card__preview img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.td-cli-label-card__info { flex: 1; }
.td-cli-label-card__name {
  font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 14px;
  color: var(--ink);
}
.td-cli-label-card__dose {
  font-size: 12px; color: var(--ink-3); margin-top: 2px;
}
.td-cli-label-card__meta {
  display: flex; gap: 8px; margin-top: 6px; align-items: center;
}
.td-cli-label-card__source {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
}
.td-cli-label-card__source--upload {
  background: rgba(59,130,246,0.1); color: #3b82f6;
}
.td-cli-label-card__source--design {
  background: rgba(157,39,169,0.1); color: var(--pp);
}
.td-cli-label-card__actions {
  display: flex; gap: 8px; align-items: center;
}

/* ─── Label Upload Zone ─── */
.td-cli-label-upload-zone {
  border: 2px dashed var(--line);
  border-radius: 12px; padding: 32px;
  text-align: center; cursor: pointer;
  transition: all 0.2s; margin-bottom: 20px;
  color: var(--ink-3);
}
.td-cli-label-upload-zone:hover,
.td-cli-label-upload-zone--active {
  border-color: var(--pp);
  background: rgba(157,39,169,0.04);
}
.td-cli-label-upload-zone--has-file {
  border-style: solid; border-color: rgba(22,163,74,0.4);
  background: rgba(22,163,74,0.04);
}
.td-cli-label-upload-zone p {
  margin: 8px 0 4px; font-weight: 600; font-size: 14px; color: var(--ink-2);
}
.td-cli-label-upload-zone small { font-size: 12px; }
.td-cli-label-upload-zone__file {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 14px; color: var(--ink);
}
.td-cli-label-upload-zone__clear {
  background: none; border: none; cursor: pointer; color: var(--ink-3);
  padding: 4px;
}
.td-cli-label-upload-zone__clear:hover { color: #dc2626; }

/* ─── Design Service Tiers ─── */
.td-cli-design-tiers {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 12px;
}
.td-cli-design-tier {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 12px; gap: 4px;
  background: rgba(11,10,20,0.04);
  border: 2px solid transparent;
  border-radius: 10px; cursor: pointer;
  transition: all 0.16s;
}
.td-cli-design-tier:hover {
  background: rgba(157,39,169,0.06);
  border-color: rgba(157,39,169,0.2);
}
.td-cli-design-tier--active {
  background: rgba(157,39,169,0.08);
  border-color: var(--pp);
}
.td-cli-design-tier__label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px; color: var(--ink-2);
}
.td-cli-design-tier--active .td-cli-design-tier__label { color: var(--ink); }
.td-cli-design-tier__fee {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800; font-size: 18px; color: var(--pp);
}

/* ─── Print on Demand ─── */
.td-cli-pod-selector {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px;
}
.td-cli-pod-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(11,10,20,0.03);
  border: 1.5px solid transparent;
  border-radius: 10px;
  transition: all 0.14s;
}
.td-cli-pod-row--selected {
  background: rgba(157,39,169,0.06);
  border-color: rgba(157,39,169,0.2);
}
.td-cli-pod-row__info {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
.td-cli-pod-row__name {
  font-weight: 700; font-size: 14px; color: var(--ink);
}
.td-cli-pod-row__dose {
  font-size: 12px; color: var(--ink-3);
}
.td-cli-pod-row__type {
  font-size: 10px; font-weight: 700;
  background: rgba(11,10,20,0.08); padding: 2px 6px;
  border-radius: 3px; color: var(--ink-3);
}
.td-cli-pod-row__qty {
  display: flex; align-items: center; gap: 6px;
}
.td-cli-pod-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; margin-bottom: 16px;
  background: rgba(157,39,169,0.06);
  border-radius: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.td-cli-pod-total strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px; font-weight: 800; color: var(--pp);
}

/* ─── Button variants ─── */
.td-cli-btn-sm {
  padding: 6px 12px !important; font-size: 12px !important;
  display: inline-flex; align-items: center; gap: 5px;
}
.td-cli-btn-secondary {
  background: rgba(11,10,20,0.06); color: var(--ink-2);
  border: none; border-radius: 6px; padding: 8px 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: all 0.14s;
}
.td-cli-btn-secondary:hover { background: rgba(11,10,20,0.12); }
.td-cli-btn-danger {
  background: rgba(220,38,38,0.08); color: #dc2626;
  border: none; border-radius: 6px; padding: 6px 10px;
  cursor: pointer; transition: all 0.14s;
}
.td-cli-btn-danger:hover { background: rgba(220,38,38,0.16); }

@media (max-width: 600px) {
  .td-cli-label-collection__grid { grid-template-columns: 1fr; }
  .td-cli-design-tiers { grid-template-columns: 1fr; }
  .td-cli-pod-row { flex-direction: column; gap: 10px; align-items: stretch; }
  .td-cli-pod-row__qty { justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════════
   3. ADMIN VIEW  ( trade-admin.jsx )
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Loading screen ─── */
.td-adm-loading {
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #0B0A14 0%, #1A0F1F 60%, #2A1632 100%);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.td-adm-loading.fade-out {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.td-adm-loading-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 24px;
  text-align: center;
}
.td-adm-loading-brand {
  font-family: "Poppins", sans-serif;
  font-weight: 900; font-size: 36px;
  letter-spacing: 0.18em;
  color: #fff; line-height: 1;
}
.td-adm-loading-sub {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--pp-soft);
}
.td-adm-loading-bar-wrap {
  width: 280px; height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-pill); overflow: hidden;
}
.td-adm-loading-bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--pp), var(--pp-soft), var(--pp));
  background-size: 200% 100%;
  animation: td-load-shimmer 1.4s ease infinite;
  transition: width 0.3s ease;
}
.td-adm-loading-pillar {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  min-height: 20px;
}

/* ─── Admin layout ─── */
.td-adm-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 80px);
}
@media (max-width: 980px) {
  .td-adm-layout { grid-template-columns: 1fr; }
}

/* ─── Sidebar ─── */
.td-adm-sidebar {
  background: linear-gradient(180deg, var(--td-dark-2), var(--td-dark-3));
  padding: 24px 0;
  position: sticky; top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}
@media (max-width: 980px) {
  .td-adm-sidebar {
    position: static; height: auto;
    display: flex; flex-wrap: wrap;
    padding: 12px;
    gap: 4px;
  }
}
.td-adm-sidebar-head {
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.4);
  padding: 0 20px 16px;
}
@media (max-width: 980px) {
  .td-adm-sidebar-head { padding: 8px 12px; }
}
.td-adm-sidebar-nav {
  display: flex; flex-direction: column; gap: 2px;
}
@media (max-width: 980px) {
  .td-adm-sidebar-nav {
    flex-direction: row; flex-wrap: wrap; gap: 4px;
    width: 100%;
  }
}
.td-adm-sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: transparent; border: none;
  color: rgba(255,255,255,0.6);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: all 0.14s;
  text-align: left;
  width: 100%;
  position: relative;
}
@media (max-width: 980px) {
  .td-adm-sidebar-item { width: auto; padding: 8px 14px; border-radius: var(--r-pill); }
}
.td-adm-sidebar-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.td-adm-sidebar-item.active {
  color: #fff;
  background: rgba(157,39,169,0.2);
  border-left: 3px solid var(--pp);
}
@media (max-width: 980px) {
  .td-adm-sidebar-item.active { border-left: none; }
}
.td-adm-sidebar-icon {
  display: flex; align-items: center;
  width: 20px;
  flex-shrink: 0;
}
.td-adm-sidebar-label { white-space: nowrap; }
.td-adm-sidebar-badge {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pp); color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 10px;
}

/* ─── Main content area ─── */
.td-adm-main {
  padding: 28px var(--pad);
  min-width: 0;
}

/* ─── Pane (each tab's content wrapper) ─── */
.td-adm-pane { }
.td-adm-pane-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 24px;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.td-adm-pane-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-bottom: 20px;
}
.td-adm-pane-header .td-adm-pane-title { margin-bottom: 0; }

/* ─── Shared admin elements ─── */
.td-adm-loader {
  text-align: center; padding: 40px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 14px;
  color: var(--ink-3);
}
.td-adm-error {
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.15);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--td-danger);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
}
.td-adm-empty {
  text-align: center; padding: 32px;
  color: var(--ink-3);
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 14px;
}
.td-adm-empty-cell {
  text-align: center; padding: 24px !important;
  color: var(--ink-3) !important;
}
.td-adm-success-msg {
  padding: 12px 16px; border-radius: 10px;
  background: rgba(22,163,74,0.08);
  color: var(--td-success);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  margin-top: 12px;
}

/* ─── Admin buttons ─── */
.td-adm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px;
  border: none; border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  background: var(--ink); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(11,10,20,0.5);
  transition: all 0.16s;
  text-decoration: none;
  white-space: nowrap;
}
.td-adm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(11,10,20,0.6);
}
.td-adm-btn:disabled { opacity: 0.4; pointer-events: none; }

.td-adm-btn.primary {
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  box-shadow: 0 10px 22px -8px rgba(157,39,169,0.5);
}
.td-adm-btn.primary:hover {
  box-shadow: 0 14px 28px -8px rgba(157,39,169,0.65);
}
.td-adm-btn.secondary {
  background: rgba(11,10,20,0.06); color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px rgba(11,10,20,0.1);
}
.td-adm-btn.secondary:hover {
  background: rgba(11,10,20,0.1);
  transform: none; box-shadow: inset 0 0 0 1.5px rgba(11,10,20,0.15);
}
.td-adm-btn.danger {
  background: var(--td-danger);
  box-shadow: 0 8px 18px -8px rgba(220,38,38,0.5);
}
.td-adm-btn.danger:hover {
  background: #B91C1C;
}
.td-adm-btn.small { padding: 7px 14px; font-size: 12px; }
.td-adm-btn.tiny { padding: 5px 10px; font-size: 11px; }

/* ─── Admin form inputs ─── */
.td-adm-input {
  padding: 10px 14px;
  background: var(--surface);
  border: none; border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 1px rgba(11,10,20,0.06);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink); outline: none;
  transition: box-shadow 0.16s;
}
.td-adm-input:focus {
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 2px var(--pp);
}
.td-adm-input-sm {
  padding: 6px 10px; font-size: 12px;
  width: 100px;
}

.td-adm-select {
  padding: 10px 14px;
  background: var(--surface);
  border: none; border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 1px rgba(11,10,20,0.06);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink); outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239D27A9' stroke-width='2.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.td-adm-select:focus {
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 2px var(--pp);
}

.td-adm-textarea {
  padding: 12px 14px;
  background: var(--surface);
  border: none; border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 1px rgba(11,10,20,0.06);
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink); outline: none;
  resize: vertical; width: 100%;
  transition: box-shadow 0.16s;
}
.td-adm-textarea:focus {
  box-shadow: inset 0 2px 6px rgba(11,10,20,0.06), inset 0 0 0 2px var(--pp);
}

.td-adm-field-label {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 12px 0 6px;
}

/* ─── KPI grid (overview) ─── */
.td-adm-kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 28px;
}
@media (max-width: 980px) {
  .td-adm-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .td-adm-kpi-grid { grid-template-columns: 1fr; }
}
.td-adm-kpi-tile {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  box-shadow: var(--clay-w-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.td-adm-kpi-value {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 24px;
  color: var(--ink); letter-spacing: -0.02em;
}
.td-adm-kpi-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ─── Section title ─── */
.td-adm-section-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 18px;
  margin-bottom: 14px;
}

/* ─── Tier chart (overview) ─── */
.td-adm-tier-chart {
  display: flex; flex-direction: column; gap: 10px;
}
.td-adm-tier-row {
  display: flex; align-items: center; gap: 12px;
}
.td-adm-tier-row-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 12px;
  color: var(--ink-2);
  width: 80px; flex-shrink: 0;
}
.td-adm-tier-row-bar-wrap {
  flex: 1; height: 10px;
  background: rgba(11,10,20,0.06);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.td-adm-tier-row-bar {
  height: 100%; border-radius: var(--r-pill);
  transition: width 0.4s ease;
}
.td-adm-tier-row-count {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 13px;
  color: var(--ink);
  width: 36px; text-align: right;
}

/* ─── Tier badge (admin) ─── */
.td-adm-tier-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff;
}

/* ─── Status badge ─── */
.td-adm-status-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* ─── Applications ─── */
.td-adm-app-list {
  display: flex; flex-direction: column; gap: 16px;
}
.td-adm-app-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 20px 24px;
  box-shadow: var(--clay-w-sm);
}
.td-adm-app-card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.td-adm-app-company {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 18px;
  color: var(--ink);
}
.td-adm-app-meta {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--ink-3); margin-top: 2px;
}
.td-adm-app-date {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 12px;
  color: var(--ink-3);
}
.td-adm-app-card-details {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-bottom: 14px;
}
.td-adm-app-detail {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--ink-2);
}
.td-adm-app-detail strong { font-weight: 700; color: var(--ink); }
.td-adm-app-fulfill-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(157,39,169,0.1);
  color: var(--pp);
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.td-adm-app-card-actions {
  display: flex; gap: 8px;
}

/* ─── Modal ─── */
.td-adm-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(11,10,20,0.6);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
}
.td-adm-modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-w), 0 40px 80px -30px rgba(11,10,20,0.5);
  max-width: 560px; width: 100%;
  max-height: 85vh; overflow-y: auto;
}
.td-adm-modal-lg { max-width: 800px; }
.td-adm-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
}
.td-adm-modal-head h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 18px;
}
.td-adm-modal-close {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,10,20,0.04);
  cursor: pointer; border: none;
  transition: background 0.14s;
}
.td-adm-modal-close:hover { background: rgba(11,10,20,0.1); }
.td-adm-modal-body {
  padding: 24px 28px;
}
.td-adm-modal-body p {
  color: var(--ink-2); font-size: 14px;
  line-height: 1.5; margin-bottom: 12px;
}
.td-adm-modal-foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 28px;
  border-top: 1px solid var(--line);
}

/* ─── Filters / search bar ─── */
.td-adm-filters {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.td-adm-search-wrap {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 200px;
}
.td-adm-search-wrap .td-adm-input { flex: 1; }

/* ─── Table ─── */
.td-adm-table-wrap { overflow-x: auto; }
.td-adm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--clay-w-sm);
  overflow: hidden;
}
.td-adm-table thead th {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(11,10,20,0.08);
  white-space: nowrap;
}
.td-adm-table tbody td {
  padding: 12px 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--ink-2);
  border-bottom: 1px solid rgba(11,10,20,0.05);
  vertical-align: middle;
}
.td-adm-table tbody tr:last-child td { border-bottom: none; }
.td-adm-table-row { cursor: pointer; }
.td-adm-table tbody tr:hover { background: rgba(157,39,169,0.02); }
.td-adm-table-compact thead th { padding: 8px 10px; }
.td-adm-table-compact tbody td { padding: 8px 10px; font-size: 12px; }
.td-adm-cell-bold {
  font-weight: 700 !important; color: var(--ink) !important;
}

/* ─── Unread dot ─── */
.td-adm-unread-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--pp); color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 10px;
}

/* ─── Pagination ─── */
.td-adm-pagination {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.td-adm-page-info {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-3);
}

/* ─── Client detail modal ─── */
.td-adm-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) {
  .td-adm-detail-grid { grid-template-columns: 1fr; }
}
.td-adm-detail-section {
  background: rgba(11,10,20,0.02);
  border-radius: 12px;
  padding: 20px;
}
.td-adm-detail-section h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 15px;
  margin-bottom: 12px;
  color: var(--ink);
}
.td-adm-detail-full { grid-column: 1 / -1; }
.td-adm-detail-row {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.td-adm-detail-row strong { font-weight: 700; color: var(--ink); }

.td-adm-suspended-banner {
  background: rgba(220,38,38,0.1);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--td-danger);
  text-align: center;
}
.td-adm-override-tag {
  display: inline-flex;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(245,158,11,0.12);
  color: #B45309;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-left: 8px;
}
.td-adm-tier-controls {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0;
}
.td-adm-toggle {
  display: flex; align-items: center; gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-2); cursor: pointer;
  margin-top: 8px;
}
.td-adm-toggle input {
  width: 18px; height: 18px; accent-color: var(--pp);
}

/* ─── Chat pane ─── */
.td-adm-pane-chat { }
.td-adm-chat-layout {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 0;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--clay-w-sm);
  overflow: hidden;
  min-height: 500px;
}
@media (max-width: 760px) {
  .td-adm-chat-layout { grid-template-columns: 1fr; min-height: auto; }
}

.td-adm-chat-contacts {
  border-right: 1px solid var(--line);
  overflow-y: auto; max-height: 600px;
}
.td-adm-chat-contact {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border: none; background: transparent;
  text-align: left; width: 100%;
  cursor: pointer;
  border-bottom: 1px solid rgba(11,10,20,0.04);
  transition: background 0.14s;
}
.td-adm-chat-contact:hover { background: rgba(157,39,169,0.04); }
.td-adm-chat-contact.active {
  background: rgba(157,39,169,0.08);
  border-left: 3px solid var(--pp);
}
.td-adm-chat-contact-name {
  display: flex; align-items: center; justify-content: space-between;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 13px;
  color: var(--ink);
}
.td-adm-chat-unread {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--pp); color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.td-adm-chat-contact-preview {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.td-adm-chat-conversation {
  display: flex; flex-direction: column;
}
.td-adm-chat-empty {
  flex: 1; display: grid; place-items: center;
  color: var(--ink-3);
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 14px;
}
.td-adm-chat-messages {
  flex: 1; overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 500px;
}
.td-adm-chat-bubble {
  max-width: 75%; padding: 12px 16px;
  border-radius: 14px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px; line-height: 1.5;
}
.td-adm-chat-bubble.admin {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--pp), var(--pp-2));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.td-adm-chat-bubble.client {
  align-self: flex-start;
  background: rgba(11,10,20,0.06);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.td-adm-chat-bubble-text { }
.td-adm-chat-bubble-time {
  font-size: 10px; margin-top: 4px;
  opacity: 0.6;
}

.td-adm-chat-input-wrap {
  display: flex; gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.td-adm-chat-input {
  flex: 1;
}
.td-adm-chat-input-wrap .td-adm-btn {
  flex-shrink: 0;
}

/* ─── Card list (stock/label/coa/dropship requests) ─── */
.td-adm-card-list {
  display: flex; flex-direction: column; gap: 14px;
}
.td-adm-request-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 18px 22px;
  box-shadow: var(--clay-w-sm);
}
.td-adm-request-card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.td-adm-request-product {
  font-family: "Poppins", sans-serif;
  font-weight: 700; font-size: 16px;
  color: var(--ink);
}
.td-adm-request-meta {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--ink-3); margin-top: 2px;
}
.td-adm-request-meta strong { font-weight: 700; color: var(--ink-2); }

.td-adm-respond-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.td-adm-respond-form .td-adm-select,
.td-adm-respond-form .td-adm-textarea,
.td-adm-respond-form .td-adm-input {
  width: 100%; margin-bottom: 10px;
}
.td-adm-respond-actions {
  display: flex; gap: 8px; margin-top: 8px;
}

/* Label management tabs */
.td-adm-label-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 2px solid rgba(11,10,20,0.08);
  padding-bottom: 0;
}
.td-adm-label-tab {
  padding: 10px 20px;
  background: none; border: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--ink-3); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all 0.16s;
}
.td-adm-label-tab:hover { color: var(--ink-2); }
.td-adm-label-tab--active {
  color: var(--pp); border-bottom-color: var(--pp);
}
/* Label grid for admin */
.td-adm-label-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.td-adm-label-card {
  background: var(--surface);
  border: 1px solid rgba(11,10,20,0.08);
  border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.td-adm-label-card__preview {
  display: flex; align-items: center; justify-content: center;
  height: 80px; border-radius: 6px;
  background: rgba(11,10,20,0.03); overflow: hidden;
}
.td-adm-label-card__preview img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.td-adm-label-card__pdf {
  font-family: "JetBrains Mono", monospace;
  font-weight: 800; font-size: 20px; color: var(--ink-3);
}
.td-adm-label-card__info { flex: 1; }
.td-adm-label-card__name {
  font-weight: 700; font-size: 13px; color: var(--ink);
}
.td-adm-label-card__dose { font-size: 11px; color: var(--ink-3); }
.td-adm-label-card__meta {
  font-size: 11px; color: var(--ink-3); margin-top: 4px;
}
.td-adm-toolbar__count {
  font-size: 12px; color: var(--ink-3); font-weight: 600;
}
/* Label request edit */
.td-adm-request-edit {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(11,10,20,0.06);
  display: flex; flex-direction: column; gap: 10px;
}
.td-adm-edit-row { display: flex; flex-direction: column; gap: 4px; }
.td-adm-edit-row label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.td-adm-edit-row select,
.td-adm-edit-row textarea,
.td-adm-edit-row input[type="file"] {
  font-size: 13px; padding: 6px 10px;
  border: 1px solid rgba(11,10,20,0.12);
  border-radius: 6px; background: var(--surface);
}
.td-adm-edit-actions { flex-direction: row !important; gap: 8px !important; }
.td-adm-request-actions { margin-top: 10px; }

/* ─── Settings ─── */
.td-adm-settings-section {
  margin-bottom: 28px;
}
.td-adm-settings-section h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 800; font-size: 18px;
  margin-bottom: 14px;
}
.td-adm-settings-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 760px) {
  .td-adm-settings-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .td-adm-settings-grid { grid-template-columns: 1fr; }
}
.td-adm-settings-field {
  display: flex; flex-direction: column; gap: 6px;
}
.td-adm-settings-field label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.td-adm-settings-field .td-adm-input {
  width: 100%;
}

.td-adm-settings-actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 20px;
}
.td-adm-settings-msg {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--td-success);
}
.td-adm-settings-msg.error {
  color: var(--td-danger);
}

/* ═══════════════════════════════════════════════════════════
   ADMIN 8: INVENTORY MANAGEMENT
   ═══════════════════════════════════════════════════════════ */

/* KPI row */
.td-adm-inv-kpis {
  display: flex; gap: 16px; margin-bottom: 20px;
}
.td-adm-inv-kpi {
  flex: 1; text-align: center;
  background: #f7f4f9; border-radius: 10px;
  padding: 16px 12px;
}
.td-adm-inv-kpi-val {
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 28px;
  color: #0B0A14;
}
.td-adm-inv-kpi-lbl {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 4px;
}

/* Group blocks — alternating card tints */
.td-adm-inv-groups {
  display: flex; flex-direction: column; gap: 20px;
}
.td-adm-inv-group {
  border-radius: 12px;
  padding: 16px 18px; overflow: hidden;
  border-left: 4px solid rgba(157,39,169,0.3);
}
.td-adm-inv-group:nth-child(odd) {
  background: #f8f5fa;
}
.td-adm-inv-group:nth-child(even) {
  background: #f0edf4;
}
.td-adm-inv-group-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 15px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #0B0A14; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

/* Alternating rows inside inventory tables */
.td-adm-inv-group .td-adm-table tbody tr:nth-child(odd) {
  background: rgba(11,10,20,0.025);
}
.td-adm-inv-group .td-adm-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.6);
}
.td-adm-inv-group .td-adm-table tbody tr:hover {
  background: rgba(157,39,169,0.07) !important;
}

/* Variant label pill */
.td-adm-inv-variant {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 12px;
  color: #5a2d6a;
  background: rgba(157,39,169,0.12);
  padding: 4px 12px; border-radius: 20px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Stock value badges */
.td-adm-inv-stock-val {
  display: inline-block; min-width: 32px; text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700; font-size: 14px;
  padding: 2px 8px; border-radius: 6px;
}
.td-adm-inv-stock-val.has {
  background: rgba(58, 170, 85, 0.15); color: #3aaa55;
}
.td-adm-inv-stock-val.none {
  background: #eae7ed; color: #999;
}

/* International badge */
.td-adm-inv-intl-yes {
  font-family: "Montserrat", sans-serif;
  font-weight: 600; font-size: 11px;
  color: #3a8fd6; background: rgba(58, 143, 214, 0.12);
  padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Mono cell for SKU */
.td-adm-cell-mono {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--ink-2);
}

/* Row with US stock highlight */
tr.td-adm-inv-has-stock td:first-child {
  border-left: 3px solid #3aaa55;
}

/* Inline edit controls */
.td-adm-inv-edit {
  display: flex; align-items: center; gap: 4px;
}
.td-adm-select-xs {
  padding: 4px 6px !important; font-size: 11px !important;
  min-width: 60px;
}
.td-adm-input-xs {
  padding: 4px 6px !important; font-size: 12px !important;
  width: 60px !important; text-align: center;
  font-family: "JetBrains Mono", monospace;
}

/* Responsive */
@media (max-width: 768px) {
  .td-adm-inv-kpis { flex-direction: column; }
  .td-adm-inv-edit { flex-wrap: wrap; }
}

/* ─── Admin Orders pane — expandable rows + detail ─── */
.td-adm-orders-table .td-adm-order-row:hover { background: rgba(0,0,0,0.02); }
.td-adm-order-toggle {
  font-size: 12px; color: #555; text-align: center;
  user-select: none;
}
.td-adm-order-detail-row > td { background: #FAFAFA; padding: 18px 22px; }
.td-adm-order-detail__grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px;
}
@media (max-width: 900px) {
  .td-adm-order-detail__grid { grid-template-columns: 1fr; }
}
.td-adm-order-detail__h {
  font-family: "Montserrat", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #888; margin: 0 0 10px;
}
.td-adm-order-items {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: #fff; border: 1px solid #E5E5E5; border-radius: 4px;
}
.td-adm-order-items th, .td-adm-order-items td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid #EEE;
  vertical-align: top;
}
.td-adm-order-items th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #777; background: #F5F5F5; font-weight: 600;
}
.td-adm-order-items tr:last-child td { border-bottom: none; }
.td-adm-order-items__service td { background: #FFF9F0; }
.td-adm-order-items__meta { padding-top: 4px; }
.td-adm-order-items__meta strong { color: #555; }
.td-adm-order-detail__totals {
  margin-top: 12px; padding: 10px 12px; background: #fff;
  border: 1px solid #E5E5E5; border-radius: 4px; font-size: 13px;
}
.td-adm-order-detail__totals > div {
  display: flex; justify-content: space-between; padding: 4px 0;
}
.td-adm-order-detail__total {
  border-top: 1px solid #DDD; margin-top: 6px; padding-top: 8px !important;
  font-weight: 700; font-size: 15px;
}
.td-adm-order-detail__addr { font-size: 13px; line-height: 1.6; }
.td-adm-order-detail__tracking { font-size: 13px; }
.td-adm-order-detail__tracking-row {
  background: #fff; border: 1px solid #E5E5E5; border-radius: 4px;
  padding: 8px 12px; margin-bottom: 6px;
}
.td-adm-tracking { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.td-adm-tracking a { color: #1A4E8A; text-decoration: underline; }
.td-adm-muted { color: #999; font-size: 13px; }
.td-adm-cell-sub { font-size: 11px; color: #888; }
.td-adm-badge {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.td-adm-badge--coa { background: #FFF1D0; color: #8A5A00; }
.td-adm-badge--service { background: #E8DFFF; color: #4A2E8A; }

/* ─── MF-16: Catalog row mobile reflow ≤540px ─── */
@media (max-width: 540px) {
  .td-cli-catalog__table .td-cli-catalog__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .td-cli-catalog__row .td-cli-catalog__col-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .td-cli-qty-btn {
    width: 44px;
    height: 44px;
  }
}

/* === Mobile UI hardening pass — 2026-05-16 === */

/* ─── P4: Hide hardcoded hero <br> on small screens ─── */
@media (max-width: 640px) {
  .td-pub-headline .td-pub-headline-br,
  .td-pub-hero h1 br { display: none; }
}

/* ─── P5: Apply form sticky side panel — make static when stacked ─── */
@media (max-width: 980px) {
  .td-pub-apply-side {
    position: static;
    top: auto;
    padding: 24px 20px;
  }
}

/* ─── P3, P6, P7, P8: Public view tightening at ≤540px ─── */
@media (max-width: 540px) {
  /* P3 — Sign-in gate padding */
  .td-pub-gate {
    padding: 36px 22px;
  }
  /* P3 + P7 — Stack gate action buttons full-width */
  .td-pub-gate-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .td-pub-gate-actions .td-pub-btn {
    width: 100%;
    justify-content: center;
  }
  /* P6 — Form footer: stack hint above full-width submit */
  .td-pub-form-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .td-pub-form-foot .save-btn,
  .td-pub-form-foot button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
  /* P8 — Pillar card padding */
  .td-pub-pillar {
    padding: 22px 18px;
  }
}

/* ─── C1: Floating sidebar toggle — safe-area + raised z-index ─── */
.td-sidebar-toggle {
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
  z-index: 7500;
}
@media (max-width: 540px) {
  /* Nudge further up on small screens so it doesn't sit over catalog action rows */
  .td-sidebar-toggle {
    bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
    left: 16px;
    width: 52px;
    height: 52px;
  }
}

/* ─── C2: Account bar stats single column at very narrow widths ─── */
@media (max-width: 480px) {
  .td-cli-account-bar__stats {
    grid-template-columns: 1fr;
  }
}

/* ─── C7: Loading screen brand size responsive ─── */
.td-cli-loading__brand {
  font-size: clamp(32px, 10vw, 48px);
}

/* ─── C3: Catalog row — show name/price/save/lead/stock as a stacked card ─── */
@media (max-width: 540px) {
  /* Override prior rule that hid the save badge */
  .td-cli-catalog__col-save {
    display: inline-block !important;
  }
  /* Keep SKU hidden on very narrow widths (existing ≤980px rule continues) */
  .td-cli-catalog__col-sku {
    display: none;
  }
  /* Make the row a stacked card with a clear vertical reading order */
  .td-cli-catalog__table .td-cli-catalog__row,
  .td-cli-catalog__row-main {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px 14px 16px;
  }
  .td-cli-catalog__row .td-cli-catalog__col-name {
    order: 1;
    align-self: flex-start;
  }
  .td-cli-catalog__row .td-cli-catalog__col-price,
  .td-cli-catalog__row .td-cli-catalog__your-price {
    order: 2;
    font-size: 16px;
  }
  .td-cli-catalog__row .td-cli-catalog__col-save {
    order: 3;
    align-self: flex-start;
  }
  .td-cli-catalog__row .td-cli-catalog__col-lead {
    order: 4;
  }
  .td-cli-catalog__row .td-cli-catalog__col-stock {
    order: 5;
  }
  .td-cli-catalog__row .td-cli-catalog__col-actions {
    order: 6;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(11,10,20,0.06);
  }
  /* Hide the header row entirely on mobile — labels live inline in each card */
  .td-cli-catalog__header-row {
    display: none !important;
  }
}

/* ─── C4: Cart + chat drawers full-width on small screens ─── */
@media (max-width: 540px) {
  .td-cli-cart-drawer,
  .td-cli-chat-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ─── C5: Orders table — convert to stacked cards with inline labels ─── */
@media (max-width: 760px) {
  .td-cli-orders__header { display: none; }
  .td-cli-orders__row,
  .td-cli-orders__row.td-cli-orders__row--clickable {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 4px 12px;
    padding: 14px 16px;
    align-items: start;
  }
  .td-cli-orders__row > span:first-child {
    grid-column: 1;
    grid-row: 1;
  }
  .td-cli-orders__row > span:not(:first-child) {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
  }
  .td-cli-orders__row > span:not(:first-child)::before {
    content: attr(data-label);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    min-width: 70px;
    flex-shrink: 0;
  }
  /* Provide labels via :nth-child since markup doesn't include data-label */
  .td-cli-orders__row > span:nth-child(2)::before { content: "Date"; }
  .td-cli-orders__row > span:nth-child(3)::before { content: "Order"; }
  .td-cli-orders__row > span:nth-child(4)::before { content: "Items"; }
  .td-cli-orders__row > span:nth-child(5)::before { content: "Status"; }
  .td-cli-orders__row > span:nth-child(6)::before { content: "Tracking"; }
  .td-cli-orders__row > span:nth-child(7)::before { content: "Total"; }
  /* Re-enable columns 6 + 7 that the existing ≤760px rule had hidden */
  .td-cli-orders__row > span:nth-child(6),
  .td-cli-orders__row > span:nth-child(7) { display: flex !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   A1 — Admin sidebar drawer + hamburger (CRITICAL)
   ═════════════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop, shown on mobile */
.td-adm-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-right: 4px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.16s;
}
.td-adm-hamburger:hover { background: rgba(255,255,255,0.14); }
.td-adm-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.2s;
}
.td-adm-hamburger--open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.td-adm-hamburger--open span:nth-child(2) { opacity: 0; }
.td-adm-hamburger--open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Sidebar overlay (mobile only) */
.td-adm-sidebar-overlay {
  display: none;
}

@media (max-width: 980px) {
  .td-adm-hamburger { display: inline-flex; }

  /* Layout becomes a single column; the sidebar is positioned as a drawer */
  .td-adm-layout {
    grid-template-columns: 1fr;
    position: relative;
  }

  /* Override the existing chip-strip behavior — turn sidebar into a slide-in drawer */
  .td-adm-sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    height: calc(100vh - 64px);
    width: min(320px, 88vw);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    overflow-y: auto;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }
  .td-adm-layout--open .td-adm-sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 30px rgba(0,0,0,0.4);
  }

  /* Sidebar nav inside drawer — restore vertical list layout */
  .td-adm-sidebar-head {
    padding: 0 20px 16px;
  }
  .td-adm-sidebar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    width: 100%;
  }
  .td-adm-sidebar-item {
    width: 100%;
    padding: 10px 20px;
    border-radius: 0;
    text-align: left;
  }
  .td-adm-sidebar-item.active {
    border-left: 3px solid var(--pp);
  }

  /* Overlay shown when drawer is open */
  .td-adm-sidebar-overlay {
    display: block;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 55;
    animation: td-fade-in 0.18s ease;
  }
}

@keyframes td-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═════════════════════════════════════════════════════════════════════
   A2 — Admin tables converted to stacked cards on mobile
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .td-adm-table-wrap {
    overflow-x: visible;
  }
  .td-adm-table {
    display: block;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .td-adm-table thead {
    display: none;
  }
  .td-adm-table tbody {
    display: block;
  }
  .td-adm-table tbody tr,
  .td-adm-table-row {
    display: block;
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--clay-w-sm);
    margin-bottom: 12px;
    padding: 6px 4px;
  }
  .td-adm-table tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(11,10,20,0.04);
    font-size: 13px;
    word-break: break-word;
  }
  .td-adm-table tbody tr td:last-child {
    border-bottom: none;
  }
  .td-adm-table tbody td::before {
    content: attr(data-label);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    min-width: 90px;
    flex-shrink: 0;
  }
  .td-adm-table tbody td:empty::before,
  .td-adm-table tbody td:not([data-label])::before {
    display: none;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   A3 — Admin chat — mobile contacts/conversation view-machine
   ═════════════════════════════════════════════════════════════════════ */
.td-adm-chat-conv-head {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(157,39,169,0.04);
}
.td-adm-chat-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(157,39,169,0.12);
  color: var(--pp);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s;
}
.td-adm-chat-back:hover { background: rgba(157,39,169,0.2); }
.td-adm-chat-conv-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

@media (max-width: 760px) {
  .td-adm-chat-layout {
    display: block;
    min-height: 60vh;
  }
  .td-adm-chat-contacts {
    display: block;
    max-height: none;
    border-right: none;
  }
  .td-adm-chat-conversation {
    display: none;
  }
  /* When a contact is selected: hide list, show conversation only */
  .td-adm-chat-layout--has-selected .td-adm-chat-contacts {
    display: none;
  }
  .td-adm-chat-layout--has-selected .td-adm-chat-conversation {
    display: flex;
  }
  .td-adm-chat-layout--has-selected .td-adm-chat-conv-head {
    display: flex;
  }
  .td-adm-chat-messages {
    max-height: none;
    min-height: 50vh;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   A4 — Admin modal footer wrap on small screens
   ═════════════════════════════════════════════════════════════════════ */
.td-adm-modal-foot {
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .td-adm-modal-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .td-adm-modal-foot > button,
  .td-adm-modal-foot .td-adm-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   A6 — Admin filters bar stacks vertically on small screens
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .td-adm-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .td-adm-search-wrap {
    width: 100%;
    min-width: 0;
  }
  .td-adm-filters > select,
  .td-adm-filters > .td-adm-select,
  .td-adm-filters > .td-adm-input {
    width: 100%;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   A8 — Inventory inline editors usable on mobile (CSS fallback)
   ═════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .td-adm-inv-edit {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  .td-adm-inv-edit .td-adm-input-xs,
  .td-adm-input-xs {
    width: 100% !important;
    min-width: 0;
    font-size: 14px !important;
    padding: 8px 10px !important;
    text-align: left;
  }
  .td-adm-inv-edit .td-adm-select-xs,
  .td-adm-select-xs {
    width: 100%;
    min-width: 0;
    font-size: 14px !important;
    padding: 8px 10px !important;
  }
  .td-adm-inv-edit .td-adm-btn,
  .td-adm-inv-edit button {
    width: 100%;
  }
}

/* === end Mobile UI hardening pass === */