:root {
  --bg: #f9fbfe;
  --navy: #12214e;
  --blue: #2b76bd;
  --tab: #252525;
  --text: #324253;
  --muted: #7b8794;
  --line: #e2e8f0;
  --danger: #e93455;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, sans-serif;
  font-size: 16px;
}

a { color: #2b82d8; text-decoration: none; font-weight: 700; }

.app-shell { min-height: 100vh; display: flex; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 270px;
  background: linear-gradient(#12214e, #12214e, #0866ff);
  color: #fff;
  padding: 20px;
  transform: translateX(-270px);
}

.sidebar-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: #fff; text-decoration: none; }
.sidebar-logo strong { font-size: 26px; text-transform: capitalize; }
.brand-logo {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: #0b1838;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.brand-logo.compact {
  width: 62px;
  height: 62px;
  border-color: #d8a943;
}
.coin-mark {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffd21f;
  color: #fff;
  font-weight: 900;
  box-shadow: 14px 0 0 -8px #ffd21f, 25px 0 0 -16px #ffd21f;
}
.coin-mark.small { width: 52px; height: 52px; font-size: 30px; }

.side-link { display: block; padding: 13px 14px; color: #fff; border-radius: 5px; font-weight: 700; }
.side-link.active, .side-link:hover { background: rgba(255,255,255,.14); }

.main { width: 100%; min-width: 0; overflow: hidden; }
.customer-content { min-width: 0; min-height: calc(100vh - 93px); }

.topbar {
  height: 93px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 20px 24px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(18, 33, 78, .06);
  position: sticky;
  top: 0;
  z-index: 30;
}

.hamburger {
  width: 43px;
  height: 43px;
  display: grid;
  gap: 5px;
  place-content: center;
  border: 0;
  background: transparent;
  margin-right: 18px;
  flex-shrink: 0;
}
.hamburger span { display: block; width: 30px; height: 3px; background: #8c9bae; border-radius: 2px; }

.wallet-btn, .login-btn {
  min-height: 51px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid #2b76bd;
  border-radius: 6px;
  background: #fff;
  color: #2b76bd;
  font-weight: 900;
  box-shadow: 0 5px 11px rgba(0,0,0,.03);
}
.login-btn { border-color: #d94966; color: #e93455; margin-left: 0; font-size: 18px; }
.customer-chip {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 900;
  text-decoration: none;
}
.customer-chip.active { color: #fff; background: #2b76bd; }

.intro-box {
  width: calc(100% - 40px);
  margin: 20px 20px 30px;
  padding: 20px 30px 20px;
  background: #fff;
  border: 2px solid #2b76bd;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1.4;
  color: #2b2f37;
}

.brand-stamp {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 20px;
  color: #15223a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.intro-box h1 {
  margin: 0 0 24px;
  text-align: center;
  font-size: 24px;
  line-height: 1.22;
  white-space: nowrap;
  font-weight: 900;
}

.intro-box h2 {
  margin: 72px 0 22px;
  font-size: 24px;
}
.intro-box p { margin: 20px 0; }
.intro-box .links { margin-top: 70px; }

.product-tabs { width: calc(100% - 40px); margin: 0 20px 60px; }
.tabs-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; width: 940px; max-width: none; }
.product-catalog-toolbar { margin-bottom: 18px; }

.nav-tab {
  height: 61px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 5px;
  background: var(--tab);
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  font: 900 22px/1 Roboto, sans-serif;
  box-shadow: 0 5px 10px rgba(0,0,0,.22);
  cursor: pointer;
  text-decoration: none;
}
.nav-tab:first-child { min-width: 343px; }
.nav-tab img { width: 25px; height: 25px; object-fit: cover; }
.nav-tab > span:not(.category-nav-icon) { min-width: 0; display: grid; gap: 4px; }
.nav-tab b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-tab small {
  color: #6f8198;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.category-nav-icon { flex: 0 0 auto; font-size: 24px; }
.nav-tab.active {
  background: rgba(180,180,180,.38);
  color: #3a6b8f;
  box-shadow: 0 5px 10px rgba(0,0,0,.12);
}

.product-pane { display: none; }
.product-pane.active { display: block; }
.product-groups { display: grid; gap: 28px; }
.product-category-section {
  min-width: 0;
  scroll-margin-top: 238px;
}
.product-category-head {
  --category-accent: #1d67d7;
  --category-accent-end: #174b9a;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(120deg, var(--category-accent), var(--category-accent-end));
  color: #fff;
  box-shadow: 0 14px 30px rgba(17, 50, 99, .14);
}
.category-tiktok .product-category-head {
  --category-accent: #111827;
  --category-accent-end: #020617;
}
.category-facebook .product-category-head {
  --category-accent: #1877f2;
  --category-accent-end: #0c4eaa;
}
.category-instagram .product-category-head {
  background: linear-gradient(120deg, #7c3aed, #db2777 58%, #f59e0b);
}
.product-category-title { min-width: 0; display: flex; align-items: center; gap: 13px; }
.product-category-title > div { min-width: 0; display: grid; gap: 3px; }
.product-category-title small {
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}
.product-category-title h3 {
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: 19px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-category-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  font-size: 24px;
}
.product-category-icon img { width: 30px; height: 30px; object-fit: cover; border-radius: 7px; }
.product-category-stats { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.product-category-stats span,
.product-category-stats a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}
.product-category-stats b { font-size: 14px; }
.product-category-stats em { font-style: normal; }
.product-empty-catalog {
  padding: 36px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #fff;
  color: #64748b;
  text-align: center;
}

.table-wrap { width: 100%; overflow-x: auto; }
.product-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  background: #fff;
}
.product-table.sold-column-hidden th:nth-child(4),
.product-table.sold-column-hidden .sold-cell { display: none !important; }
.product-table th {
  height: 69px;
  background: #102052;
  color: #fff;
  border-right: 2px solid rgba(255,255,255,.9);
  padding: 12px 20px;
  text-align: center;
  font-size: 21px;
  font-weight: 900;
}
.product-table th img { width: 30px; height: 33px; vertical-align: middle; margin-right: 9px; object-fit: cover; }
.product-table .name-head { text-align: left; width: 54%; }
.product-table tr:nth-child(odd) { background: var(--bg); }
.product-table td {
  min-height: 112px;
  padding: 14px 20px;
  color: #000;
  vertical-align: middle;
  border-bottom: 1px solid #eef2f7;
}
.product-name { display: flex; gap: 16px; align-items: center; line-height: 1.35; }
.product-name > img { width: 40px; max-height: 55px; object-fit: cover; flex: 0 0 auto; }
.name-product { font-weight: 400; }
.product-name span { display: block; margin-top: 7px; }
.flag-emoji {
  width: 30px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
}
.flag-image {
  position: relative;
  width: 30px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6dee8;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  color: #475569;
  font-size: 10px;
  font-weight: 900;
}
.flag-image-emoji {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}
.flag-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.flag-fallback { letter-spacing: 0; }
.buy-btn {
  width: 112px;
  height: 31px;
  border: 0;
  border-radius: 4px;
  background: #0d6efd;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.buy-btn.disabled { background: #d13c4b; cursor: not-allowed; }
.empty { text-align: center; padding: 40px; }

.admin-body { background: #eef3f8; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); max-width: 100%; overflow-x: hidden; }
.admin-sidebar { background: #102052; color: #fff; padding: 24px 18px; }
.admin-sidebar h1 { font-size: 22px; margin: 0 0 24px; display: flex; align-items: center; gap: 10px; }
.admin-sidebar h1 .brand-logo { width: 46px; height: 46px; }
.admin-sidebar a { display: block; color: #fff; padding: 11px 12px; border-radius: 5px; font-weight: 700; }
.admin-sidebar a:hover, .admin-sidebar a.active {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 900;
  box-shadow: inset 4px 0 0 #ffd21f;
}
.admin-main { min-width: 0; max-width: 100%; padding: 24px; overflow-x: hidden; }
.admin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.admin-top h2 { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 16px; margin-bottom: 18px; }
.stats div, .admin-panel, .login-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(18,33,78,.05);
}
.stats div { padding: 20px; }
.stats b { display: block; font-size: 30px; color: #102052; }
.stats span { color: var(--muted); }
.admin-panel { max-width: 100%; padding: 18px; margin-bottom: 18px; overflow-x: auto; }
.admin-panel.priority-panel { border: 1px solid #bfdbfe; box-shadow: 0 10px 26px rgba(37,99,235,.10); }
.admin-panel h3 { margin-top: 0; }
.admin-form { display: grid; gap: 10px; }
.admin-form.inline { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
.admin-form.grid { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.admin-form .wide-field { grid-column: 1 / -1; }
.admin-form > *, .admin-form label { min-width: 0; }
.admin-form input, .admin-form select, .admin-form textarea, .login-card input {
  min-height: 42px;
  border: 1px solid #cad5e1;
  border-radius: 6px;
  padding: 0 12px;
  font: inherit;
}
.admin-form input:not([type="checkbox"]):not([type="radio"]),
.admin-form select,
.admin-form textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.admin-form textarea {
  min-height: 92px;
  padding: 10px 12px;
  resize: vertical;
}
.admin-form label { display: grid; gap: 6px; font-weight: 700; }
.admin-form .searchable-select span { font-size: 13px; }
.admin-form .searchable-select input,
.admin-form .searchable-select select { width: 100%; }
.admin-form button, .login-card button, .admin-button {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: #0d6efd;
  color: #fff;
  padding: 0 16px;
  font-weight: 900;
}
.admin-button { display: inline-flex; align-items: center; justify-content: center; }
.muted-button { background: #64748b; color: #fff; }
.danger-button { background: #dc3545 !important; }
.danger-row { margin-top: 10px; }
.danger-row button { background: #dc3545; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-table th, .admin-table td { padding: 12px; border-bottom: 1px solid #e8edf3; text-align: left; }
.admin-table small { display: block; color: var(--muted); margin-top: 4px; }
.admin-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nested-panel { margin-top: 18px; box-shadow: none; background: #f8fafc; }
.admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; }
.admin-pagination > div { display: flex; gap: 8px; }
.check-field { display: inline-flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 5px; font-weight: 600 !important; white-space: nowrap; }
.check-field input { width: auto !important; min-height: 0 !important; }
.success-box { padding: 12px; margin: 12px 0; border-radius: 6px; background: #dcfce7; color: #166534; }
.admin-product-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(18,33,78,.05);
  padding: 18px;
  margin-bottom: 18px;
  max-width: 100%;
  overflow: hidden;
}
.admin-product-card.country-picker-open { position: relative; z-index: 25; overflow: visible; }
.product-edit-grid {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  align-items: end;
  max-width: 100%;
  overflow: hidden;
}
.product-edit-grid > * { min-width: 0; max-width: 100%; overflow: hidden; }
.category-edit-form {
  grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1.2fr) 90px 90px 80px;
  align-items: center;
}
.upload-field {
  min-height: 42px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  min-width: 0;
  flex-wrap: wrap;
  overflow: hidden;
}
.upload-field img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid #d6dee8;
}
.upload-field input[type="file"] {
  min-height: 0;
  padding: 7px;
}
.product-edit-grid .wide { grid-column: span 3; }
.inventory-state {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.inventory-state b { font-size: 24px; color: #102052; }
.inventory-state span, .inventory-state small { color: var(--muted); }
.country-field,
.product-edit-grid > .country-field { position: relative; overflow: visible; z-index: 12; }
.country-picker { position: relative; display: block; min-width: 0; font-weight: 400; }
.admin-form .country-combobox-trigger {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #cad5e1;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.country-combobox-trigger:focus-visible,
.country-picker.is-open .country-combobox-trigger {
  outline: 2px solid rgba(13, 110, 253, .2);
  border-color: #0d6efd;
}
.country-combobox-trigger [data-country-current] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.country-current { display: inline-flex; align-items: center; gap: 8px; }
.country-current-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-option-flag { width: 24px; height: 18px; flex: 0 0 24px; }
.country-chevron { flex: 0 0 auto; color: #64748b; transition: transform .16s ease; }
.country-picker.is-open .country-chevron { transform: rotate(180deg); }
.country-combobox-panel {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 310px);
  max-width: min(420px, calc(100vw - 36px));
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .22);
}
.country-combobox-panel[hidden] { display: none; }
.admin-form .country-combobox-panel input[data-country-search] {
  width: 100%;
  min-height: 40px;
  margin: 0 0 7px;
  border-color: #94a3b8;
}
.country-combobox-options {
  display: grid;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.admin-form .country-combobox-option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #334155;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.admin-form .country-combobox-option:hover,
.admin-form .country-combobox-option:focus-visible { outline: 0; background: #eaf2ff; color: #0b5ed7; }
.admin-form .country-combobox-option[aria-selected="true"] { background: #dbeafe; color: #0b5ed7; }
.country-combobox-empty { display: block; padding: 12px 10px; color: #64748b; text-align: center; }
.country-combobox-empty[hidden] { display: none; }
.admin-form select.country-native-select {
  position: absolute;
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  height: 1px;
  min-height: 1px;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.dashboard-period-panel { overflow: visible; }
.dashboard-period-head,
.dashboard-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.dashboard-period-head h3,
.dashboard-chart-head h3 { margin-bottom: 5px; }
.dashboard-period-head p { margin: 0; }
.dashboard-period-tabs {
  max-width: min(100%, 920px);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px;
  border-radius: 8px;
  background: #e8eef7;
  scrollbar-width: none;
}
.dashboard-period-tabs::-webkit-scrollbar { display: none; }
.dashboard-period-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 6px;
  color: #334155;
  font-weight: 800;
  white-space: nowrap;
}
.dashboard-period-tab:hover,
.dashboard-period-tab.active { background: #0d6efd; color: #fff; }
.dashboard-period-form {
  grid-template-columns: minmax(180px, 280px) minmax(130px, 180px) auto;
  align-items: end;
  margin-top: 16px;
}
.dashboard-period-form input[type="hidden"] { display: none; }
.dashboard-report-actions,
.seller-report-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
  color: #64748b;
  font-size: 12px;
}
.dashboard-report-actions > span,
.seller-report-actions > span { margin-right: auto; }
.finance-trend { display: block; margin-top: 7px; font-size: 10px; font-weight: 850; }
.finance-trend.is-up { color: #087744; }
.finance-trend.is-down { color: #c52b3d; }
.finance-trend.is-neutral { color: #71809b; }
.dashboard-period-stats { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.dashboard-period-stats b { font-size: 24px; }
.dashboard-chart-panel { overflow: hidden; }
.dashboard-chart-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0 10px;
  scrollbar-gutter: stable;
}
.revenue-chart {
  width: 100%;
  min-width: var(--chart-min-width, 620px);
  height: 300px;
  display: grid;
  grid-template-columns: repeat(var(--chart-columns, 7), minmax(76px, 1fr));
  gap: 12px;
  align-items: end;
}
.chart-bar {
  height: 270px;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(150px, 1fr) auto auto auto;
  gap: 4px;
  text-align: center;
  color: #334155;
  font-size: 12px;
}
.chart-bars {
  min-height: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid #cbd5e1;
}
.chart-fill {
  width: min(18px, 28%);
  min-height: 3px;
  border-radius: 5px 5px 0 0;
}
.chart-gross { background: linear-gradient(180deg, #3b82f6, #0d6efd); }
.chart-refund { background: linear-gradient(180deg, #fb7185, #dc3545); }
.chart-net { background: linear-gradient(180deg, #34d399, #15803d); }
.chart-net-negative { background: linear-gradient(180deg, #f59e0b, #c2410c); }
.chart-zero { opacity: .25; }
.chart-bar b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #102052;
  font-size: 11px;
  white-space: nowrap;
}
.chart-bar small { color: var(--muted); }
.chart-bar > span { font-weight: 800; }
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  color: #475569;
  font-size: 13px;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend span::before {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  content: "";
}
.legend-gross::before { background: #0d6efd; }
.legend-refund::before { background: #dc3545; }
.legend-net::before { background: #15803d; }
.positive-value { color: #15803d; font-weight: 800; }
.negative-value { color: #dc3545 !important; font-weight: 800; }
.dashboard-detail-table { min-width: 1260px; }
.dashboard-daily-table-wrap,
.seller-daily-table-wrap { max-height: 620px; overflow: auto; border: 1px solid #e3ebf5; border-radius: 13px; }
.dashboard-daily-table-wrap .admin-table,
.seller-daily-table-wrap .admin-table { margin: 0; }
.dashboard-daily-table-wrap thead th,
.seller-daily-table-wrap thead th { position: sticky; top: 0; z-index: 1; background: #f5f8fc; box-shadow: 0 1px #dbe5f1; }
.dashboard-detail-table tr.is-empty-day { opacity: .6; }
.daily-detail-link { color: #1268d8; font-size: 11px; font-weight: 850; text-decoration: none; white-space: nowrap; }
.daily-detail-link:hover { text-decoration: underline; }
.inventory-import {
  grid-template-columns: 1fr 150px;
  align-items: end;
  margin-top: 12px;
}
.inventory-panel { display: grid; gap: 14px; }
.inventory-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.inventory-toolbar p { margin: 6px 0 0; }
.inventory-toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.inventory-action-form {
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
}
.inventory-action-form select,
.inventory-action-form button {
  min-height: 36px;
}
.inventory-manager {
  display: grid;
  gap: 14px;
}
.inventory-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.inventory-page-head h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  font-weight: 500;
}
.inventory-page-head div {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #64748b;
}
.inventory-page-head a {
  color: #0d6efd;
  text-decoration: none;
}
.inventory-page-head b { font-weight: 500; }
.inventory-product-picker {
  display: flex;
  gap: 10px;
  align-items: end;
  justify-content: flex-start;
}
.inventory-product-picker label {
  display: grid;
  gap: 5px;
  min-width: min(620px, 100%);
  font-weight: 700;
}
.inventory-product-picker select,
.inventory-product-picker button {
  min-height: 38px;
  border: 1px solid #cad5e1;
  border-radius: 5px;
  padding: 0 10px;
  font: inherit;
}
.inventory-product-picker button,
.btn-cyan {
  border: 0;
  background: #17a2b8;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.inventory-card {
  background: #fff;
  border: 1px solid #d5dce6;
  border-top: 3px solid #22c55e;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(15,23,42,.14);
  overflow: hidden;
}
.inventory-card-red { border-top-color: #ff3154; }
.inventory-card-yellow { border-top-color: #ffc107; }
.inventory-card-head {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #e5eaf0;
}
.inventory-card-head h3 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
  font-weight: 900;
}
.inventory-card-tools {
  display: flex;
  gap: 6px;
}
.inventory-card-tools button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.inventory-card-tools button:nth-child(1) { background: #16a34a; }
.inventory-card-tools button:nth-child(2) { background: #ffc107; color: #111827; }
.inventory-card-tools button:nth-child(3) { background: #dc3545; }
.inventory-card-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.inventory-card-body label {
  display: grid;
  gap: 8px;
  font-weight: 800;
}
.inventory-card-body select,
.inventory-card-body input,
.inventory-card-body textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 10px 12px;
  font: inherit;
}
.inventory-card-body select {
  min-height: 42px;
  background: #e9edf2;
}
.inventory-card-body textarea {
  min-height: 150px;
  resize: vertical;
}
.inventory-card-body textarea[readonly] {
  min-height: 230px;
  background: #e8ecf1;
  font: 14px/1.45 Consolas, monospace;
}
.inventory-external-form {
  border-top: 1px solid #fecdd3;
  background: #fff8f9;
}
.inventory-external-form h4 {
  margin: 0;
  color: #be123c;
  font-size: 16px;
}
.inventory-numbered-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  min-width: 0;
}
.inventory-numbered-list pre {
  min-width: 48px;
  height: 230px;
  margin: 0;
  padding: 10px 9px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #dbe3ec;
  color: #64748b;
  font: 14px/1.45 Consolas, monospace;
  text-align: right;
  user-select: none;
}
.inventory-card-body .inventory-numbered-list textarea[readonly] {
  min-width: 0;
  height: 230px;
  min-height: 230px;
  border-radius: 0 5px 5px 0;
  resize: vertical;
  white-space: pre;
}
.inventory-export-modal textarea {
  width: 100%;
  min-height: 280px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  background: #eef4fb;
  font: 14px/1.45 Consolas, monospace;
  resize: vertical;
}
.inventory-export-history .table-scroll { overflow-x: auto; }
.check-row {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 9px !important;
}
.check-row input { margin-top: 3px; }
.inventory-card-foot {
  margin: 0 -18px -18px;
  padding: 14px 18px;
  background: #f7f7f7;
}
.btn-cyan {
  min-height: 38px;
  border-radius: 5px;
  padding: 0 14px;
}
.count-badge {
  display: inline-flex;
  min-width: 22px;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  padding: 0 5px;
}
.count-badge.green { background: #22c55e; }
.count-badge.red { background: #dc3545; }
.count-badge.yellow { background: #ffc107; color: #111827; }
.inventory-detail-link {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #0d6efd;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}
.inventory-card.is-collapsed .inventory-card-body { display: none; }
.inventory-card.is-hidden { display: none; }
.inventory-card.is-maximized {
  position: fixed;
  z-index: 50;
  inset: 14px;
  overflow: auto;
}
.sr-label { font-size: 0; }
.sr-label textarea { font-size: 14px; }
.recharge-box {
  text-align: left;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
}
.muted { color: var(--muted); }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(420px, 100%); padding: 26px; }
.login-card label { display: grid; gap: 7px; margin-bottom: 13px; font-weight: 700; }
.control-login-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 36px 22px;
  background:
    radial-gradient(circle at 10% 12%, rgba(39, 130, 255, .20), transparent 28%),
    radial-gradient(circle at 92% 86%, rgba(73, 83, 255, .16), transparent 27%),
    linear-gradient(145deg, #edf4ff 0%, #f8fbff 45%, #e8f1ff 100%);
}
.control-login-page::before,
.control-login-page::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(37, 105, 213, .12);
  pointer-events: none;
}
.control-login-page::before { width: 560px; height: 560px; left: -290px; top: -330px; box-shadow: 0 0 0 70px rgba(255,255,255,.18); }
.control-login-page::after { width: 420px; height: 420px; right: -230px; bottom: -250px; box-shadow: 0 0 0 54px rgba(255,255,255,.24); }
.control-login-shell {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr);
  overflow: hidden;
  border: 1px solid rgba(118, 151, 202, .22);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(16, 43, 86, .19), 0 8px 24px rgba(16, 43, 86, .08);
}
.control-login-showcase {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 48px 52px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 16%, rgba(69, 151, 255, .40), transparent 31%),
    radial-gradient(circle at 18% 88%, rgba(38, 211, 255, .20), transparent 31%),
    linear-gradient(145deg, #071b42 0%, #0b3479 52%, #1264c8 100%);
}
.control-login-page--mother .control-login-showcase {
  background:
    radial-gradient(circle at 78% 12%, rgba(120, 113, 255, .32), transparent 30%),
    radial-gradient(circle at 10% 92%, rgba(20, 184, 255, .24), transparent 32%),
    linear-gradient(145deg, #07152f 0%, #112b63 54%, #173f8f 100%);
}
.control-login-page--seller .control-login-showcase {
  background:
    radial-gradient(circle at 82% 14%, rgba(99, 188, 255, .38), transparent 30%),
    radial-gradient(circle at 12% 90%, rgba(46, 220, 186, .18), transparent 32%),
    linear-gradient(145deg, #071b42 0%, #0b3f83 56%, #0874cf 100%);
}
.control-login-showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 390px;
  height: 390px;
  right: -185px;
  bottom: -205px;
  border: 54px solid rgba(255,255,255,.055);
  border-radius: 50%;
}
.control-login-showcase::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom right, #000, transparent 72%);
}
.control-login-brand {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  text-decoration: none;
}
.control-login-brand .brand-logo,
.control-login-mobile-brand .brand-logo {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(2, 13, 39, .25);
}
.control-login-brand strong { max-width: 310px; font-size: 22px; line-height: 1.15; }
.control-login-showcase-copy { margin: auto 0; padding: 38px 0; }
.control-login-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(151, 207, 255, .28);
  border-radius: 999px;
  background: rgba(93, 170, 255, .12);
  color: #a9d4ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
}
.control-login-showcase h2 { max-width: 500px; margin: 18px 0 16px; font-size: clamp(34px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.035em; }
.control-login-showcase-copy > p { max-width: 520px; margin: 0; color: rgba(232, 242, 255, .76); font-size: 15px; line-height: 1.7; }
.control-login-benefits { display: grid; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; }
.control-login-benefits li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.9); font-size: 14px; }
.control-login-benefits li span { flex: 0 0 auto; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(62, 217, 147, .16); color: #75efb8; font-weight: 900; }
.control-login-store-link { width: fit-content; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 800; text-decoration: none; }
.control-login-store-link:hover { color: #fff; }
.control-login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 58px;
  background: rgba(255,255,255,.98);
}
.control-login-mobile-brand { display: none; }
.control-login-role {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid #cfe0f8;
  border-radius: 999px;
  background: #f1f7ff;
  color: #1761bd;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.control-login-role i { width: 8px; height: 8px; border-radius: 50%; background: #2680eb; box-shadow: 0 0 0 4px rgba(38,128,235,.12); }
.control-login-card h1 { margin: 20px 0 9px; color: #0d2348; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -.035em; }
.control-login-intro { margin: 0 0 28px; color: #708097; font-size: 14px; line-height: 1.55; }
.control-login-card > label,
.control-login-label-row label { color: #213a60; font-size: 13px; font-weight: 850; }
.control-login-card > label { margin: 0 0 8px; }
.control-login-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 8px; }
.control-login-label-row small { color: #8a98aa; font-size: 11px; }
.control-login-field {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  padding: 0 15px;
  border: 1px solid #cbd8ea;
  border-radius: 12px;
  background: #f8fbff;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.control-login-field:focus-within { border-color: #3483e9; background: #fff; box-shadow: 0 0 0 4px rgba(52,131,233,.12); }
.control-login-field > span { width: 20px; color: #7d92af; font-size: 11px; text-align: center; }
.control-login-field input {
  min-width: 0;
  width: 100%;
  height: 52px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #122b50;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
}
.control-login-field input::placeholder { color: #9aa9bc; font-weight: 500; }
.control-login-field--otp input { letter-spacing: .24em; font-variant-numeric: tabular-nums; }
.control-login-hint { display: block; margin: -9px 0 22px; color: #8492a5; font-size: 11px; line-height: 1.45; }
.control-login-alert { margin: -7px 0 20px; border: 1px solid #fecdd5; border-radius: 10px; font-size: 13px; }
.control-login-submit {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 5px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #1670e8, #0758bf);
  color: #fff;
  box-shadow: 0 13px 26px rgba(15, 103, 217, .24);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.control-login-submit:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 16px 30px rgba(15, 103, 217, .3); }
.control-login-submit span { font-size: 19px; }
.control-login-card-back { display: none; margin: 18px auto 0; color: #1764c2; font-size: 13px; font-weight: 800; text-decoration: none; }
.control-login-security { display: flex; align-items: flex-start; gap: 9px; margin-top: 24px; padding-top: 19px; border-top: 1px solid #e5edf7; color: #8190a3; font-size: 11px; line-height: 1.45; }
.control-login-security > span:first-child { color: #25806a; font-size: 16px; line-height: 1; }
@media (max-width: 860px) {
  .control-login-page { padding: 22px 14px; }
  .control-login-shell { width: min(560px, 100%); min-height: 0; grid-template-columns: 1fr; border-radius: 22px; }
  .control-login-showcase { min-height: 164px; padding: 26px 28px; }
  .control-login-brand { margin-bottom: 24px; }
  .control-login-showcase-copy { margin: 0; padding: 0; }
  .control-login-eyebrow { min-height: 26px; font-size: 9px; }
  .control-login-showcase h2 { max-width: 410px; margin: 11px 0 0; font-size: 27px; }
  .control-login-showcase-copy > p,
  .control-login-benefits,
  .control-login-store-link { display: none; }
  .control-login-card { padding: 34px 30px 30px; }
  .control-login-card-back { display: block; }
}
@media (max-width: 520px) {
  .control-login-page { place-items: start center; padding: 0; background: #f5f8fd; }
  .control-login-page::before,
  .control-login-page::after { display: none; }
  .control-login-shell { width: 100%; min-height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  .control-login-showcase { min-height: 138px; padding: 22px 20px 25px; border-radius: 0 0 24px 24px; }
  .control-login-brand { margin-bottom: 18px; }
  .control-login-brand .brand-logo { width: 40px; height: 40px; border-radius: 11px; }
  .control-login-brand strong { font-size: 18px; }
  .control-login-eyebrow { padding: 0; border: 0; background: transparent; }
  .control-login-showcase h2 { margin-top: 7px; font-size: 23px; line-height: 1.13; }
  .control-login-card { justify-content: flex-start; padding: 30px 20px 26px; }
  .control-login-role { min-height: 28px; font-size: 10px; }
  .control-login-card h1 { margin-top: 17px; font-size: 29px; }
  .control-login-intro { margin-bottom: 23px; }
  .control-login-field { min-height: 52px; margin-bottom: 16px; }
  .control-login-field input { height: 50px; font-size: 16px; }
  .control-login-submit { min-height: 52px; }
  .control-login-security { margin-top: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .control-login-field,
  .control-login-submit { transition: none; }
}
.alert { padding: 10px 12px; background: #ffe8ec; color: #b4233b; border-radius: 6px; margin: 12px 0; }
pre { white-space: pre-wrap; background: #0b1220; color: #d8f0ff; border-radius: 6px; padding: 14px; }

@media (min-width: 1100px) {
  .sidebar { transform: none; }
  .main { width: calc(100% - 270px); margin-left: 270px; }
  .intro-box { margin-top: 42px; }
  .hamburger { display: none; }
}

@media (max-width: 700px) {
  .topbar { height: 82px; padding: 15px 20px; }
  .wallet-btn, .login-btn { min-height: 46px; font-size: 15px; padding: 0 12px; }
  .login-btn { font-size: 16px; }
  .customer-chip { display: none; }
  .intro-box {
    width: calc(100% - 28px);
    margin: 20px 14px 20px;
    padding: 20px 20px 20px;
    font-size: 16px;
  }
  .brand-stamp { justify-content: center; margin-bottom: 34px; }
  .intro-box h1 { font-size: 20px; white-space: normal; }
  .intro-box h2 { font-size: 21px; }
  .product-tabs { width: calc(100% - 28px); margin-left: 14px; margin-right: 14px; }
  .tabs-grid { gap: 10px; width: 100%; }
  .nav-tab { flex-basis: 100%; font-size: 18px; padding: 0 18px; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; }
  .stats, .admin-form.inline, .admin-form.grid { grid-template-columns: 1fr; }
  .admin-two-column { grid-template-columns: 1fr; }
  .admin-main { padding: 14px; }
  .dashboard-period-head, .dashboard-chart-head { display: grid; }
  .dashboard-period-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-period-tab { padding: 0 8px; white-space: normal; text-align: center; }
  .dashboard-period-form { grid-template-columns: 1fr; }
  .chart-legend { justify-content: flex-start; }
  .revenue-chart { height: 280px; }
  .chart-bar { height: 250px; }
  .admin-pagination { align-items: flex-start; flex-direction: column; }
  .profile-grid, .api-docs-grid, .api-endpoints { grid-template-columns: 1fr; }
  .profile-head, .api-docs-hero { display: grid; }
  .inventory-grid { grid-template-columns: 1fr; }
  .inventory-page-head { display: grid; }
  .inventory-product-picker { display: grid; }
  .product-edit-grid, .inventory-import { grid-template-columns: 1fr; }
  .category-edit-form { grid-template-columns: 1fr; }
  .product-edit-grid .wide { grid-column: auto; }

  /* Responsive Tables as Cards */
  .product-table, .order-history-table { min-width: 0; display: block; border: none; background: transparent; }
  .product-table thead, .order-history-table thead { display: none; }
  .product-table tbody, .order-history-table tbody { display: block; }
  
  .product-table tr, .order-history-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(18, 33, 78, 0.05);
  }
  .product-table td, .order-history-table td {
    display: block;
    width: 100%;
    padding: 6px 0;
    min-height: 0;
    border: 0;
  }
  
  /* Product Table (Cart) */
  .product-table td:nth-child(1) { margin-bottom: 8px; }
  .product-table td:nth-child(2),
  .product-table td:nth-child(3) {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .product-table td:nth-child(2)::before { content: "Quốc gia:"; color: var(--muted); font-size: 14px; }
  .product-table td:nth-child(3)::before { content: "Tồn kho:"; color: var(--muted); font-size: 14px; }
  .product-table td:nth-child(4) {
    margin-top: 10px;
    font-size: 20px;
    text-align: left;
  }
  .product-table td:nth-child(4)::before { content: "Giá: "; font-size: 16px; font-weight: normal; color: var(--muted); }
  .product-table td:nth-child(5) { margin-top: 12px; }
  .buy-btn { width: 100%; height: 46px; font-size: 16px; border-radius: 6px; }

  /* Order History Table */
  .order-history-table tr { align-items: flex-start; }
  .order-history-table td { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px dashed #e2e8f0; }
  .order-history-table td:last-child { border-bottom: none; }
  .order-history-table td:nth-child(1)::before { content: "Mã giao dịch:"; color: var(--muted); font-size: 13px; font-weight: 700; }
  .order-history-table td:nth-child(2)::before { content: "Sản phẩm:"; color: var(--muted); font-size: 13px; font-weight: 700; }
  .order-history-table td:nth-child(3)::before { content: "Số lượng:"; color: var(--muted); font-size: 13px; font-weight: 700; }
  .order-history-table td:nth-child(4)::before { content: "Tổng tiền:"; color: var(--muted); font-size: 13px; font-weight: 700; }
  .order-history-table td:nth-child(5)::before { content: "Trạng thái:"; color: var(--muted); font-size: 13px; font-weight: 700; }
  .order-history-table td:nth-child(6) { flex-direction: row; gap: 10px; margin-top: 10px; }
  .order-history-table td:nth-child(6) .btn-primary, .order-history-table td:nth-child(6) .btn-secondary { flex: 1; min-height: 42px; }
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 18, 34, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 40;
}
.sidebar { z-index: 50; overflow-y: auto; transition: transform .24s ease; }
.sidebar,
.admin-sidebar,
.admin-navigation,
.seller-sidebar,
.seller-nav-menu {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar,
.admin-navigation::-webkit-scrollbar,
.seller-sidebar::-webkit-scrollbar,
.seller-nav-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
body.menu-open .sidebar { transform: translateX(0); }
body.menu-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
.side-select, .side-balance {
  min-height: 38px;
  display: grid;
  gap: 3px;
  align-content: center;
  padding: 7px 14px;
  color: rgba(255,255,255,.88);
  border-radius: 5px;
}
.side-select span { font-size: 12px; opacity: .75; }
.side-select b, .side-balance { font-size: 14px; }
.side-balance { margin: 10px 0; background: rgba(255,255,255,.12); font-weight: 900; }
.side-link { width: 100%; border: 0; background: transparent; text-align: left; font: 700 15px/1.2 Roboto, sans-serif; cursor: pointer; }
.side-heading { margin: 18px 14px 8px; font-size: 12px; opacity: .68; font-weight: 900; letter-spacing: .5px; }
.side-submenu { display: none; padding: 0 0 4px 18px; }
.side-submenu.open { display: block; }
.side-sublink { display: block; color: rgba(255,255,255,.88); padding: 8px 12px; font-size: 14px; font-weight: 500; border-radius: 5px; }
.side-sublink:hover { background: rgba(255,255,255,.1); color: #fff; }
.site-footer { padding: 30px 20px 50px; text-align: center; color: #7b8794; }
.site-footer a { color: #526273; margin: 0 8px; }

.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(17, 24, 39, .45);
  z-index: 100;
}
.modal.show { display: grid; }
body.modal-open { overflow: hidden; }
.modal-dialog { width: min(520px, 100%); }
.notification-dialog { width: min(560px, 100%); }
.bought-dialog { width: min(620px, 100%); }
.modal-card {
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 20px 55px rgba(0,0,0,.25);
  overflow: hidden;
  color: #243142;
}
.modal-header {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #edf1f5;
}
.modal-header h3 { margin: 0; font-size: 20px; color: #102052; }
.modal-close { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #5d6876; }
.modal-body { padding: 18px; display: grid; gap: 12px; }
.modal-body.compact { gap: 6px; }
.modal-body label { display: grid; gap: 6px; font-weight: 700; }
.danger-text { color: #b4233b; font-weight: 700; }
.form-control, .simple-form input {
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 0 12px;
  font: inherit;
  width: 100%;
}
.coupon-row { display: none !important; }
.coupon-row.show { display: grid !important; }
.pay-total { padding: 12px; background: #f7fafc; border-radius: 5px; font-weight: 700; }
.pay-total b { color: #e93455; font-size: 22px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 18px; flex-wrap: wrap; }
.btn-primary, .btn-danger, .btn-secondary {
  min-height: 31px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  padding: 7px 14px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary { background: #0d6efd; }
.btn-danger { background: #dc3545; }
.btn-secondary { background: #6c757d; color: #fff; }
.btn-block { width: 100%; min-height: 42px; }
.btn-sm { min-height: 30px; font-size: 14px; }
.success-dialog { width: min(1000px, calc(100% - 16px)); }
.success-dialog .modal-card { position: relative; border-radius: 6px; }
.success-close {
  position: absolute;
  right: -16px;
  top: -18px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
  font-size: 25px;
  cursor: pointer;
}
.success-body { justify-items: center; padding: 30px 30px 8px; }
.success-check {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #b8f0cf;
  background: #ecfff4;
  color: #22b86a;
  font-size: 34px;
  font-weight: 900;
}
.success-body h3 { margin: 6px 0 2px; color: #263142; font-size: 20px; }
.success-order-pill {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #8ef0bd;
  background: #edfff5;
  color: #08965a;
  font-size: 13px;
}
#orderAccounts {
  width: 100%;
  min-height: 228px;
  resize: vertical;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  background: #f8f8f9;
  font: 15px/1.55 Consolas, monospace;
  white-space: pre;
  overflow: auto;
}
.success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 30px 34px;
}
.success-actions > * { min-height: 43px; border-radius: 10px; }
.blue-action { background: #18a8dc; }
.light-action { background: #f0f1f4; color: #111827; }
.status-pill {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eafaf1;
  color: #13804b;
  font-weight: 900;
}
.order-history-shell { display: grid; gap: 14px; text-align: left; }
.order-history-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.order-history-head h2 { margin: 0; color: #102052; }
.order-history-table small { display: block; color: #64748b; margin-top: 4px; }
.order-detail-page {
  min-height: calc(100vh - 93px);
  width: min(1340px, 100%);
  margin: 0 auto;
  padding: 28px 24px 44px;
  background: #f4f4f5;
  color: #0f1f2f;
}
.order-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.order-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.transaction-line { margin: 8px 0 16px; }
.order-product-card, .order-detail-card {
  background: #fff;
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}
.order-product-card h1 { margin: 0 0 8px; font-size: 22px; font-weight: 500; }
.qty-badge, .pay-badge {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  padding: 2px 7px;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.qty-badge { background: #2b76bd; }
.pay-badge { background: #00a6c8; }
.order-product-card p { margin: 26px 0 0; font-size: 40px; line-height: 1.15; }
.order-section-title {
  margin: 56px 0 12px;
  padding: 13px 18px;
  border-radius: 7px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(90deg, #2b76bd, #0f172a);
  box-shadow: 0 4px 10px rgba(0,0,0,.22);
}
.order-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-bottom: 8px;
}
.show-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 8px 0 20px; }
.show-row select { min-width: 140px; min-height: 34px; border: 1px solid #cbd5e1; border-radius: 4px; }
.account-table { width: 100%; border-collapse: collapse; }
.account-table th {
  background: #2b76bd;
  color: #fff;
  padding: 10px;
  text-align: center;
}
.account-table td {
  border-bottom: 1px solid #202020;
  padding: 8px;
  vertical-align: middle;
  text-align: center;
}
.account-table textarea {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 4px;
  background: #ececec;
  padding: 8px;
  font: 12px/1.35 Consolas, monospace;
}

.auth-page, .simple-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px 18px;
}
.auth-page {
  position: relative;
  overflow: hidden;
  padding: 36px 22px;
  background:
    radial-gradient(circle at 10% 12%, rgba(39, 130, 255, .20), transparent 28%),
    radial-gradient(circle at 92% 86%, rgba(73, 83, 255, .16), transparent 27%),
    linear-gradient(145deg, #edf4ff 0%, #f8fbff 45%, #e8f1ff 100%);
}
.auth-page::before,
.auth-page::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(37, 105, 213, .12);
  pointer-events: none;
}
.auth-page::before { width: 560px; height: 560px; left: -290px; top: -330px; box-shadow: 0 0 0 70px rgba(255,255,255,.18); }
.auth-page::after { width: 420px; height: 420px; right: -230px; bottom: -250px; box-shadow: 0 0 0 54px rgba(255,255,255,.24); }
.auth-page .auth-shell { position: relative; z-index: 1; }
.simple-page { background: linear-gradient(120deg, rgba(18,33,78,.08), rgba(8,102,255,.08)), #f9fbfe; }
.customer-content .simple-page { min-height: calc(100vh - 93px); }
.auth-card, .simple-panel {
  width: min(512px, 100%);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 44px 40px 36px;
  box-shadow: 0 18px 42px rgba(8,18,39,.22);
}
.simple-panel { width: min(980px, 100%); }
.customer-content .simple-panel { overflow-x: auto; }
.profile-panel { display: grid; gap: 18px; }
.profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.profile-head h1 { margin-bottom: 4px; }
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.profile-grid section,
.profile-alert {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px;
  background: #f8fafc;
}
.profile-grid h3 { margin-top: 0; }
.profile-grid p { margin: 8px 0; }
.profile-api, .api-status, .profile-alert { display: grid; gap: 10px; }
.profile-alert { background: #ecfdf5; border-color: #86efac; }
.profile-alert textarea {
  width: 100%;
  min-height: 84px;
  border: 1px solid #86efac;
  border-radius: 5px;
  padding: 10px;
  font: 13px/1.4 Consolas, monospace;
}
.api-docs-page {
  min-height: calc(100vh - 93px);
  padding: 28px;
  background: #f3f7fb;
  color: #172033;
}
.api-docs-hero,
.api-docs-grid,
.api-endpoints,
.api-errors {
  width: min(1180px, 100%);
  margin: 0 auto 18px;
}
.api-errors { overflow-x: auto; }
.api-docs-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.api-docs-hero h1 { margin: 0 0 6px; font-size: 32px; }
.api-docs-hero p { margin: 0; color: var(--muted); }
.api-docs-grid,
.api-endpoints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.api-docs-page article,
.api-errors {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(18,33,78,.05);
}
.api-docs-page h2 { margin-top: 0; font-size: 19px; }
.api-docs-page pre {
  max-height: 360px;
  overflow: auto;
  font-size: 13px;
}
.deposit-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 220px;
  gap: 16px;
  align-items: start;
}
.qr-image {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border: 1px solid #d6dee8;
  border-radius: 6px;
  background: #fff;
}
code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #edf2f7;
  color: #102052;
  overflow-wrap: anywhere;
}
.bank-page {
  min-height: calc(100vh - 93px);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 18px;
  padding: 22px 18px 46px;
  background: #fff;
  border-top: 1px solid #d8d8d8;
}
.bank-contact {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  color: #000;
  font-size: 15px;
}
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}
.bank-card {
  width: min(768px, 100%);
  display: grid;
  grid-template-columns: 252px 1fr;
  border-radius: 5px;
  box-shadow: 0 14px 34px rgba(15,23,42,.14);
  overflow: hidden;
  background: #fff;
}
.bank-info-panel {
  background: #242424;
  color: #fff;
  padding: 58px 24px 30px;
}
.bank-brand-card {
  display: grid;
  place-items: center;
  min-height: 94px;
  margin-bottom: 16px;
  padding: 10px;
  background: #fff;
  overflow: hidden;
}
.bank-brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-decoration: none;
  color: #101828;
}
.bank-brand-card .brand-logo {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-color: #d7dde5;
  box-shadow: 0 5px 12px rgba(15, 23, 42, .2);
}
.bank-brand-name {
  min-width: 0;
  font-size: 16px;
  line-height: 1.15;
  text-transform: capitalize;
  white-space: nowrap;
}
.bank-info-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.bank-info-item:first-of-type { border-top: 0; }
.bank-info-item > span {
  text-align: center;
  filter: grayscale(1) brightness(2);
}
.bank-info-item b {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 5px;
}
.bank-info-item strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.green-text { color: #9dff18 !important; }
.cyan-text { color: #00f3ff !important; }
.yellow-text { color: #fff500 !important; }
.copy-mini {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0 2px;
  cursor: pointer;
  font-size: 14px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f6b037;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.bank-qr-panel {
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 22px 34px 28px;
  text-align: center;
}
.bank-qr-panel h1 {
  margin: 0 0 10px;
  color: #2490a6;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
}
.bank-qr-panel p {
  width: min(430px, 100%);
  margin: 0 0 4px;
  color: #111;
  font-size: 16px;
  line-height: 1.35;
}
.vietqr-logo {
  margin: 4px 0 10px;
  color: #e51f30;
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
}
.vietqr-logo b { color: #2260a8; }
.bank-qr-image {
  width: min(335px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  border: 2px solid #234377;
  background: #fff;
}
.bank-network {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
  color: #157e73;
  font-size: 34px;
}
.bank-network b:first-child {
  color: #1f5591;
  font-size: 25px;
  font-style: italic;
}
.bank-network span { color: #273d6d; }
.bank-note {
  margin: 0;
  color: #64748b;
  font-weight: 900;
  text-align: center;
}
.bank-auto-note {
  margin: -4px 0 0;
  color: #64748b;
  font-weight: 700;
  text-align: center;
}
.bank-cancel-actions {
  display: flex;
  justify-content: center;
  margin-top: -2px;
}
.bank-cancel-button {
  min-width: 210px;
  min-height: 42px;
  box-shadow: 0 6px 14px rgba(220, 53, 69, .18);
}
.recharge-cancel-dialog { width: min(540px, 100%); }
.recharge-cancel-summary {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
}
.recharge-cancel-summary p {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}
.recharge-cancel-summary span { color: #64748b; }
.recharge-cancel-summary code { overflow-wrap: anywhere; }
.recharge-cancel-warning {
  margin: 0;
  padding: 13px 14px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff1f2;
  color: #9f1239;
  line-height: 1.5;
}
.invoice-action-cell { min-width: 112px; text-align: right; }
.invoice-cancel-button {
  min-width: 76px;
  min-height: 36px;
  border: 1px solid #f1aeb8;
  border-radius: 8px;
  background: #fff;
  color: #c6283d;
  padding: 7px 13px;
  font: 900 13px/1 Roboto, sans-serif;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.invoice-cancel-button:hover {
  border-color: #dc3545;
  background: #fff1f2;
  transform: translateY(-1px);
}
.invoice-cancel-button:focus-visible {
  outline: 3px solid rgba(220, 53, 69, .2);
  outline-offset: 2px;
}
.invoice-action-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.invoice-action-state.is-cancelled { background: #fff0f2; color: #b4233b; }
.bank-actions {
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.bank-actions input {
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 0 12px;
  font: inherit;
}
.bank-history {
  width: min(980px, 100%);
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  overflow-x: auto;
}
.bank-history summary {
  cursor: pointer;
  font-weight: 900;
  color: #102052;
}
.bank-back {
  color: #c01875;
  font-weight: 500;
}
.auth-brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.auth-brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 26px;
  color: #17325c;
  text-decoration: none;
}
.auth-brand-link .brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 9px 22px rgba(15, 35, 75, .18);
}
.auth-brand-link strong {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  text-transform: capitalize;
}
.auth-back-link {
  width: fit-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 24px;
  padding: 0 12px;
  border: 1px solid #d5e3f5;
  border-radius: 999px;
  background: #f4f8fe;
  color: #1a67cd;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.auth-back-link:hover {
  border-color: #9fc6f6;
  background: #eaf3ff;
}
.coin-badge {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffd21f;
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}
.coin-badge::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 9px;
  width: 30px;
  height: 14px;
  border-top: 3px solid #ffd21f;
  border-bottom: 3px solid #ffd21f;
}
.auth-social {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #374151;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}
.social-mark {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
.fb-mark { background: #2f66bd; font-family: Georgia, serif; }
.tk-mark { background: #111827; color: #fff; }
.auth-card h1, .simple-panel h1 { margin: 0 0 18px; color: #102052; }
.auth-card h1 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 31px;
  line-height: 1.1;
  letter-spacing: 0;
}
.auth-card label {
  display: grid;
  gap: 9px;
  color: #8a98b8;
  font-weight: 500;
  margin-bottom: 16px;
}
.auth-card label a { justify-self: end; font-size: 16px; font-weight: 500; }
.auth-card p { text-align: center; margin: 18px 0 0; color: #102052; }
.auth-card .form-control {
  min-height: 46px;
  border-color: #bcc8d6;
  border-radius: 5px;
  color: #475569;
  padding: 0 20px;
}
.auth-card .form-control::placeholder { color: #5f6f86; opacity: 1; }
.auth-card .btn-block {
  min-height: 46px;
  margin-top: 24px;
  border-radius: 5px;
  font-size: 16px;
}
.label-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.terms-row {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  gap: 14px !important;
  margin: 28px 0 6px !important;
  color: #102052 !important;
  font-weight: 400 !important;
}
.terms-row input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: #0d6efd;
}
.terms-row a { font-size: 16px !important; justify-self: auto !important; }
.simple-form { display: grid; gap: 10px; margin: 16px 0; }
.simple-panel pre { text-align: left; }
.toast-host { position: fixed; top: 18px; right: 18px; z-index: 200; display: grid; gap: 8px; }
.toast {
  min-width: 260px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(-8px);
  transition: .2s ease;
  font-weight: 700;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #198754; }
.toast.error { background: #dc3545; }
.toast.warning { background: #f59e0b; }

@media (min-width: 1100px) {
  body:not(.menu-open) .sidebar-backdrop { display: none; }
}

@media (max-width: 700px) {
  .customer-content,
  .customer-content .simple-page,
  .api-docs-page,
  .bank-page,
  .order-detail-page { min-height: calc(100vh - 82px); }
  .toast-host { left: 12px; right: 12px; }
  .toast { min-width: 0; max-width: none; }
  .modal-actions { justify-content: stretch; }
  .modal-actions > * { flex: 1 1 auto; }
  .deposit-grid { grid-template-columns: 1fr; }
  .qr-image { width: 100%; height: auto; max-height: 280px; }
  .bank-card { grid-template-columns: 1fr; }
  .bank-info-panel { padding: 24px; }
  .bank-qr-panel { padding: 22px 18px 26px; }
  .bank-qr-panel h1 { font-size: 21px; }
  .bank-network { font-size: 25px; gap: 12px; }
  .bank-network b:first-child { font-size: 19px; }
  .bank-actions { grid-template-columns: 1fr; }
  .success-actions, .order-filter-row { grid-template-columns: 1fr; }
  .success-body { padding-left: 16px; padding-right: 16px; }
  .success-actions { padding-left: 16px; padding-right: 16px; }
  .order-detail-page { padding: 14px; }
  .order-toolbar, .order-history-head { align-items: stretch; flex-direction: column; }
  .order-product-card p { font-size: 28px; }
}
.mini-form { display: flex; gap: 6px; align-items: center; }
.mini-form input, .mini-form select { width: 110px; min-height: 34px; border: 1px solid #cad5e1; border-radius: 5px; padding: 0 8px; }
.mini-form button { min-height: 34px; border: 0; border-radius: 5px; background: #0d6efd; color: #fff; font-weight: 900; padding: 0 10px; }
.wrap-form { flex-wrap: wrap; align-items: flex-start; }
.wrap-form input { width: 150px; }
.wrap-form select { width: 120px; }
.admin-table .mini-form { margin-bottom: 8px; }
.admin-table .mini-form:last-child { margin-bottom: 0; }
.provider-manual-resolve { min-width: 250px; margin-top: 8px; }
.provider-manual-resolve summary { color: #1d4ed8; cursor: pointer; font-weight: 800; }
.provider-manual-resolve .admin-form {
  min-width: 280px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #dbe6f5;
  border-radius: 10px;
  background: #f8fbff;
}
.provider-manual-resolve .danger-row { border-color: #fecaca; background: #fff7f7; }

.inventory-cost-stats { margin: 0 0 18px; }
.inventory-cost-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid #cfe1ff;
  border-radius: 7px;
  background: #f4f8ff;
}
.inventory-cost-preview span { color: #64748b; }
.inventory-cost-preview b { display: block; color: #102052; margin-top: 3px; }
.cost-unknown { color: #b45309; font-weight: 800; }
.chart-fill.chart-cost { background: #8b5cf6; }
.chart-fill.chart-profit { background: #16a34a; }
.chart-fill.chart-profit.chart-net-negative { background: #b91c1c; }
.legend-cost::before { background: #8b5cf6 !important; }
.legend-profit::before { background: #16a34a !important; }
.dashboard-period-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.investment-summary div { align-content: start; }
.investment-summary small { display: block; margin-top: 5px; color: #64748b; }
.investment-debts { display: grid; gap: 10px; }
.investment-debt {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.investment-debt strong { color: #c2410c; font-size: 22px; }
.investment-debt.settled { background: #f0fdf4; border-color: #bbf7d0; }
.investment-debt.settled strong { color: #15803d; }
.investment-chart { display: grid; gap: 10px; margin-top: 18px; }
.investment-chart-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(180px, 1fr) minmax(110px, auto);
  gap: 12px;
  align-items: center;
}
.investment-chart-row > div { height: 14px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
.investment-chart-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0d6efd, #22c55e); }
.investment-chart-row b { text-align: right; }

@media (max-width: 700px) {
  .country-combobox-panel { width: min(360px, calc(100vw - 48px)); max-width: calc(100vw - 48px); }
  .country-combobox-options { max-height: min(300px, 44vh); }
  .inventory-cost-preview { grid-template-columns: 1fr; }
  .investment-chart-row { grid-template-columns: 1fr; gap: 5px; }
  .investment-chart-row b { text-align: left; }
  .investment-debt { align-items: flex-start; flex-direction: column; }
}

/* Mobile-first customer experience refresh */
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mobile-brand,
.mobile-bottom-nav,
.sidebar-close,
.admin-menu-toggle,
.admin-sidebar-close,
.admin-sidebar-backdrop { display: none; }
.sidebar-head { position: relative; }
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  gap: 24px;
  align-items: center;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef6ff, #fff);
  box-shadow: 0 10px 30px rgba(18, 33, 78, .07);
}
.home-hero h1 { white-space: normal; text-align: left; margin: 5px 0 10px; }
.home-hero-copy > p { margin: 0; color: #64748b; }
.eyebrow {
  display: inline-block;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}
.notice-details {
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: rgba(255,255,255,.85);
  overflow: hidden;
}
.notice-details summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #102052;
  cursor: pointer;
  font-weight: 900;
}
.notice-details summary::after { content: "⌄"; font-size: 18px; }
.notice-details[open] summary::after { transform: rotate(180deg); }
.notice-details > div { padding: 0 16px 12px; }
.notice-details p { margin: 9px 0; font-size: 14px; }
@media (min-width: 901px) {
  .notice-details[data-desktop-open] summary { cursor: default; pointer-events: none; }
  .notice-details[data-desktop-open] summary::after { display: none; }
  .notice-details[data-desktop-open]:not([open]) > div { display: block !important; }
}
.product-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.product-search { flex: 1; }
.product-search input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 15px 0 42px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")
    14px center / 18px no-repeat;
  color: #172033;
  font: inherit;
}
.support-link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 10px;
  background: #eef6ff;
  color: #1d4ed8;
}
.product-result-note { min-height: 0; margin: 0 0 8px; color: #64748b; font-size: 14px; }
.buy-product-summary {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fbff;
}
.buy-product-summary span,
.buy-product-summary small { color: #64748b; }
.buy-product-summary strong { color: #102052; line-height: 1.4; }
.quantity-stepper {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 8px;
}
.quantity-stepper button {
  min-height: 48px;
  border: 1px solid #bfdbfe;
  border-radius: 9px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 25px;
  cursor: pointer;
}
.quantity-stepper input { min-height: 48px; text-align: center; font-weight: 900; }
.content-page {
  width: min(920px, calc(100% - 40px));
  min-height: calc(100dvh - 180px);
  margin: 24px auto;
  padding: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(18, 33, 78, .08);
}
.content-page-head { max-width: 680px; margin-bottom: 24px; }
.content-page-head h1 { margin: 6px 0 8px; color: #102052; font-size: 34px; }
.content-page-head p { margin: 0; color: #64748b; line-height: 1.6; }
.contact-grid { display: grid; gap: 12px; }
.contact-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fbff;
  color: #172033;
}
.contact-card:hover { border-color: #60a5fa; background: #eff6ff; }
.contact-card > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.contact-card small { color: #64748b; overflow-wrap: anywhere; }
.contact-card em { color: #2563eb; font-style: normal; }
.contact-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
}
.support-tip {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #fde68a;
  border-radius: 12px;
  background: #fffbeb;
}
.support-tip p { margin: 6px 0 0; line-height: 1.55; }
.security-steps { display: grid; gap: 12px; padding: 0; list-style: none; }
.security-steps li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.security-steps li > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #102052;
  color: #fff;
  font-weight: 900;
}
.security-steps p { margin: 5px 0 0; color: #64748b; line-height: 1.5; }
.content-page-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.content-page-actions > * { min-height: 46px; }
.api-code-block { position: relative; }
.api-code-block pre { margin: 0 0 12px; padding-top: 44px; white-space: pre; }
.api-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 30px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 6px;
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 0 10px;
  cursor: pointer;
}
.api-endpoint-toggle {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: #102052;
  padding: 0;
  text-align: left;
  font: 900 19px/1.3 Roboto, sans-serif;
}
.api-endpoint-toggle b { display: none; }
.admin-menu-toggle {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  place-content: center;
  gap: 4px;
}
.admin-menu-toggle span { width: 22px; height: 2px; display: block; background: #102052; }
.orders-page {
  width: min(1120px, calc(100% - 40px));
  min-height: calc(100dvh - 210px);
  margin: 24px auto 40px;
}
.orders-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}
.orders-page-head h1 {
  margin: 5px 0 6px;
  color: #102052;
  font-size: 34px;
  line-height: 1.15;
}
.orders-page-head p { margin: 0; color: #64748b; }
.wallet-summary {
  min-width: 180px;
  min-height: 66px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #102052;
}
.wallet-summary span { color: #64748b; font-size: 13px; }
.wallet-summary b { color: #0d6efd; font-size: 21px; }
.order-retention-note {
  display: flex;
  gap: 8px 18px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  color: #854d0e;
}
.order-retention-note span { color: #713f12; }
.order-list-panel {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(18, 33, 78, .07);
}
.order-empty-state {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 30px 16px;
  text-align: center;
}
.order-empty-state > span { color: #93a4b8; font-size: 40px; }
.order-empty-state > b { color: #102052; font-size: 20px; }
.order-empty-state p { max-width: 440px; margin: 0 0 8px; color: #64748b; line-height: 1.5; }
.order-empty-state .btn-primary { min-height: 44px; padding-inline: 22px; }

@media (min-width: 701px) and (max-width: 900px) {
  .product-table { min-width: 700px; }
  .product-table th,
  .product-table td { padding-left: 10px; padding-right: 10px; }
  .product-table th { font-size: 15px; }
  .product-table .name-head { width: 45%; }
}

@media (max-width: 900px) {
  .admin-shell { display: block; overflow: visible; }
  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: min(86vw, 320px);
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .22s ease;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 18px 0 45px rgba(15,23,42,.28);
  }
  body.admin-menu-open .admin-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(15,23,42,.48);
  }
  body.admin-menu-open .admin-sidebar-backdrop { display: block; }
  .admin-sidebar-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 28px;
  }
  .admin-menu-toggle { display: grid; flex: 0 0 auto; }
  .admin-top {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 62px;
    margin: -14px -14px 16px;
    padding: 9px 14px;
    background: rgba(238,243,248,.96);
    border-bottom: 1px solid #dce4ee;
    backdrop-filter: blur(8px);
  }
  .admin-top h2 { flex: 1; font-size: 20px; }
  .admin-main { padding: 14px; }
  .admin-panel { -webkit-overflow-scrolling: touch; }
  .admin-body .admin-table { min-width: 700px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats div { padding: 14px; }
  .stats b { font-size: 24px; }
  .admin-form.inline,
  .admin-form.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  body { font-size: 15px; }
  .main { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .customer-content { min-height: calc(100dvh - 62px); }
  .topbar {
    height: 62px;
    gap: 7px;
    padding: 9px 12px;
  }
  .hamburger {
    width: 44px;
    height: 44px;
    margin-right: 0;
    border-radius: 9px;
  }
  .hamburger span { width: 24px; }
  .mobile-brand {
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #102052;
    overflow: hidden;
  }
  .mobile-brand .brand-logo { width: 36px; height: 36px; flex: 0 0 36px; }
  .mobile-brand strong { display: none; }
  .wallet-btn {
    min-height: 44px;
    margin-left: auto;
    padding: 0 9px;
    font-size: 13px;
    white-space: nowrap;
  }
  .login-btn {
    min-height: 44px;
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
  }
  .sidebar {
    width: min(86vw, 320px);
    padding: 16px;
    transform: translateX(-105%);
  }
  .sidebar-head { min-height: 52px; padding-right: 50px; }
  .sidebar-logo { margin: 0 0 16px; }
  .sidebar-logo .brand-logo { width: 44px; height: 44px; }
  .sidebar-logo strong { font-size: 21px; }
  .sidebar-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 28px;
  }
  .side-select { display: none; }
  .side-link,
  .side-sublink { min-height: 44px; display: flex; align-items: center; }
  .side-heading { margin-top: 12px; }
  .mobile-bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 45;
    min-height: calc(62px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 5px 8px env(safe-area-inset-bottom);
    border-top: 1px solid #dbe3ed;
    background: rgba(255,255,255,.96);
    box-shadow: 0 -8px 24px rgba(18,33,78,.10);
    backdrop-filter: blur(12px);
  }
  .mobile-bottom-nav a {
    min-height: 52px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border-radius: 10px;
    color: #64748b;
    font-size: 18px;
  }
  .mobile-bottom-nav a b { font-size: 11px; }
  .mobile-bottom-nav a.active { color: #0d6efd; background: #eff6ff; }
  .site-footer { padding: 20px 12px 28px; }
  .site-footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
  }
  .intro-box.home-hero {
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
    gap: 13px;
    margin: 12px 12px 14px;
    padding: 16px;
    font-size: 15px;
  }
  .home-hero h1 { margin: 4px 0 7px; font-size: 20px; line-height: 1.25; }
  .home-hero-copy > p { font-size: 14px; line-height: 1.45; }
  .notice-details summary { min-height: 44px; padding: 0 12px; }
  .notice-details > div { padding: 0 12px 8px; }
  .product-tabs {
    width: calc(100% - 24px);
    margin: 0 12px 24px;
  }
  .product-tools { margin-bottom: 8px; }
  .product-search input,
  .support-link { min-height: 44px; }
  .support-link { padding: 0 12px; }
  .tabs-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
    overflow: visible;
  }
  .nav-tab,
  .nav-tab:first-child {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 52px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    box-shadow: none;
  }
  .nav-tab img { width: 21px; height: 21px; }
  .product-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(108px, auto);
    gap: 5px 10px;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 12px;
  }
  .product-table td {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 2px 0;
    border: 0;
  }
  .product-table td.product-name {
    grid-column: 1 / -1;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 5px !important;
  }
  .product-name > img { width: 36px; height: 36px; max-height: 36px; border-radius: 8px; }
  .name-product {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #172033;
    font-weight: 700;
    line-height: 1.4;
  }
  .product-name span { margin-top: 3px; color: #64748b; font-size: 12px; }
  .product-table .country-cell {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
  }
  .product-table .stock-cell {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    color: #475569;
    font-size: 13px;
  }
  .product-table .stock-cell b { display: none; }
  .product-table .stock-cell::before { content: "Còn "; margin-right: 3px; }
  .product-table .sold-cell { display: none !important; }
  .product-table .price-cell {
    grid-column: 1 / 3;
    grid-row: 3;
    align-self: center;
    color: #dc2626;
    font-size: 20px;
    font-weight: 900;
  }
  .product-table .price-cell::before { content: none; }
  .product-table .action-cell {
    grid-column: 3;
    grid-row: 2 / 4;
    align-self: stretch;
    display: flex;
    align-items: stretch;
  }
  .buy-btn {
    width: 100%;
    min-width: 108px;
    height: auto;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
  }
  .modal {
    align-items: end;
    padding: 0;
  }
  .modal-dialog { width: 100%; max-height: 92dvh; }
  .modal-card {
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
  }
  .modal-header { position: sticky; top: 0; z-index: 2; min-height: 58px; background: #fff; }
  .modal-close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: -8px -10px -8px 0;
    border-radius: 50%;
  }
  .modal-body { padding: 16px; }
  .modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #edf1f5;
  }
  .modal-actions > *,
  .btn-primary,
  .btn-danger,
  .btn-secondary { min-height: 44px; }
  .success-dialog { width: 100%; }
  .success-close { top: 8px; right: 8px; width: 44px; height: 44px; z-index: 3; }
  #orderAccounts { min-height: 160px; }
  .auth-page,
  .simple-page { min-height: 100dvh; padding: 14px 12px; align-content: start; }
  .auth-card,
  .simple-panel { padding: 22px 16px; border-radius: 12px; }
  .auth-brand { margin-bottom: 18px; }
  .auth-card h1 { font-size: 26px; }
  .auth-card label { margin-bottom: 12px; }
  .auth-card .form-control,
  .auth-card .btn-block { min-height: 48px; }
  .terms-row input { width: 24px; height: 24px; }
  .customer-content .simple-page { min-height: auto; }
  .customer-content .simple-panel { overflow: visible; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-grid section { padding: 13px; }
  .orders-page {
    width: calc(100% - 24px);
    min-height: calc(100dvh - 160px);
    margin: 14px 12px 24px;
  }
  .orders-page-head {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
  }
  .orders-page-head h1 { margin-top: 4px; font-size: 27px; }
  .orders-page-head p { line-height: 1.45; }
  .wallet-summary {
    width: 100%;
    min-height: 58px;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .wallet-summary b { font-size: 19px; }
  .order-retention-note {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    font-size: 13px;
    line-height: 1.4;
  }
  .order-list-panel {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .order-history-table,
  .order-history-table tbody { width: 100%; min-width: 0; }
  .order-history-table tr:not(.order-empty-row) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    margin-bottom: 10px;
  }
  .order-history-table tr:not(.order-empty-row) td:nth-child(1),
  .order-history-table tr:not(.order-empty-row) td:nth-child(2),
  .order-history-table tr:not(.order-empty-row) td:nth-child(5),
  .order-history-table tr:not(.order-empty-row) td:nth-child(6) { grid-column: 1 / -1; }
  .order-history-table td { width: 100%; min-width: 0; padding: 6px 0; overflow-wrap: anywhere; }
  .order-history-table td:nth-child(6) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-history-table td:nth-child(6) > * { min-width: 0; min-height: 44px !important; }
  .order-history-table tr.order-empty-row {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .order-history-table tr.order-empty-row td {
    display: block;
    width: 100%;
    padding: 0;
  }
  .order-history-table tr.order-empty-row td::before { content: none; }
  .order-empty-state {
    min-height: 240px;
    padding: 24px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(18,33,78,.06);
  }
  .order-detail-page { padding: 12px; }
  .order-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .order-toolbar-actions > *:first-child { grid-column: 1 / -1; }
  .order-product-card,
  .order-detail-card { padding: 16px; border-radius: 12px; box-shadow: 0 5px 16px rgba(15,23,42,.08); }
  .order-product-card h1 { font-size: 18px; }
  .order-product-card .order-hint { margin-top: 14px; font-size: 14px; line-height: 1.5; }
  .order-section-title { margin-top: 22px; }
  .account-table,
  .account-table tbody { display: block; }
  .account-table thead { display: none; }
  .account-table tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
  }
  .account-table td { padding: 0; border: 0; text-align: left; }
  .account-table td:nth-child(1) { grid-row: 1 / 3; align-self: start; }
  .account-table td:nth-child(3),
  .account-table td:nth-child(4) { grid-column: 2; }
  .account-table textarea { min-height: 70px; }
  .account-table .btn-secondary { width: 100%; }
  .invoice-history-table,
  .invoice-history-table tbody { display: block; min-width: 0; }
  .invoice-history-table thead { display: none; }
  .invoice-history-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 12px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }
  .invoice-history-table td { padding: 0; border: 0; }
  .invoice-history-table td:nth-child(1) { font-weight: 900; }
  .invoice-history-table td:nth-child(2) { color: #64748b; text-align: right; }
  .invoice-history-table td:nth-child(3)::before { content: "Số tiền: "; color: #64748b; }
  .invoice-history-table td:nth-child(4) { grid-column: 1 / -1; }
  .invoice-history-table td:nth-child(5) { font-weight: 900; color: #15803d; }
  .invoice-history-table td:nth-child(6) { text-align: right; color: #64748b; }
  .invoice-history-table td:nth-child(7) { grid-column: 1 / -1; }
  .invoice-history-table .invoice-action-cell {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    padding-top: 5px;
  }
  .invoice-history-table .invoice-action-cell:has(.invoice-action-state) { display: none; }
  .invoice-history-table .invoice-cancel-button { width: 100%; min-height: 44px; }
  .bank-page { padding: 12px 12px 24px; gap: 12px; }
  .bank-page > div[style] { width: 100%; margin-bottom: 0 !important; }
  .bank-contact { display: none; }
  .bank-card { border-radius: 14px; }
  .bank-qr-panel { order: -1; padding: 18px 14px; }
  .bank-qr-panel h1 { font-size: 18px; }
  .vietqr-logo { font-size: 34px; }
  .bank-qr-image { width: min(250px, 78vw); }
  .bank-info-panel { padding: 16px; }
  .bank-info-item { padding: 11px 0; }
  .copy-mini { min-width: 44px; min-height: 44px; }
  .bank-history { padding: 12px; }
  .content-page {
    width: calc(100% - 24px);
    min-height: auto;
    margin: 12px;
    padding: 18px 14px;
    border-radius: 14px;
  }
  .content-page-head { margin-bottom: 16px; }
  .content-page-head h1 { font-size: 27px; }
  .contact-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 11px;
  }
  .contact-card em { grid-column: 2; font-size: 13px; }
  .security-steps li { padding: 13px; }
  .content-page-actions { display: grid; grid-template-columns: 1fr; }
  .api-docs-page { padding: 14px 12px; }
  .api-docs-hero,
  .api-docs-grid,
  .api-endpoints {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .api-docs-grid > *,
  .api-endpoints > *,
  .api-code-block { min-width: 0; max-width: 100%; }
  .api-code-block { overflow: hidden; }
  .api-docs-hero h1 { font-size: 27px; }
  .api-docs-page article,
  .api-errors { padding: 13px; }
  .api-docs-page pre { width: 100%; max-width: 100%; overflow-x: auto; white-space: pre; font-size: 12px; }
  .api-endpoint-toggle {
    width: 100%;
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: #102052;
    padding: 0;
    text-align: left;
    font: 900 15px/1.35 Roboto, sans-serif;
    cursor: pointer;
  }
  .api-endpoint-toggle b { display: block; font-size: 20px; transition: transform .2s; }
  .api-endpoints article:not(.is-collapsed) .api-endpoint-toggle b { transform: rotate(180deg); }
  .api-endpoints article.is-collapsed > :not(.api-endpoint-toggle) { display: none; }
  .api-errors .admin-table { min-width: 560px; }
  .recharge-cancel-summary p { grid-template-columns: 1fr; gap: 3px; }
  .admin-top > span { display: none; }
  .admin-body .admin-table { min-width: 640px; }
  .admin-form.inline,
  .admin-form.grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div { min-width: 0; }
  .stats b { font-size: clamp(20px, 6vw, 27px); overflow-wrap: anywhere; }
  .admin-pagination > div { width: 100%; }
  .admin-pagination a { flex: 1; min-height: 44px; }
}

@media (max-width: 370px) {
  .topbar { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .mobile-brand { display: none; }
  .wallet-btn { margin-left: 0; }
  .product-table tr { grid-template-columns: auto minmax(0, 1fr); }
  .product-table .action-cell { grid-column: 1 / -1; grid-row: 4; min-height: 46px; }
  .product-table .price-cell { grid-column: 1 / -1; }
  .buy-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Desktop customer storefront */
:root {
  --surface: #ffffff;
  --surface-soft: #f4f7fb;
  --brand-950: #071a45;
  --brand-900: #0d245a;
  --brand-800: #123678;
  --brand-600: #1769e0;
  --brand-500: #2583ff;
  --brand-100: #dbeafe;
  --brand-50: #eff6ff;
  --success: #159447;
  --warning: #d97706;
  --shadow-sm: 0 8px 24px rgba(20, 42, 88, .07);
  --shadow-md: 0 18px 48px rgba(20, 42, 88, .12);
}

html { scroll-behavior: smooth; }
button, input, select, textarea { font-family: inherit; }
a, button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(37, 131, 255, .32);
  outline-offset: 2px;
}

.topbar-context {
  display: grid;
  gap: 3px;
  margin-right: auto;
}
.topbar-context span {
  color: #7b8ba5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.topbar-context strong { color: var(--brand-950); font-size: 20px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.side-locale {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 14px;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  font-weight: 700;
}
.side-locale i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.38); }
.side-balance {
  display: grid;
  gap: 4px;
  padding: 15px 16px;
  color: #fff;
  text-decoration: none;
}
.side-balance span, .side-balance small { color: rgba(255,255,255,.68); }
.side-balance span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.side-balance strong { color: #fff; font-size: 24px; }
.side-balance small { font-size: 12px; }

.hero-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.hero-primary, .hero-secondary, .hero-notice-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 900;
}
.hero-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  box-shadow: 0 10px 24px rgba(23,105,224,.24);
}
.hero-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(23,105,224,.3); }
.hero-secondary { color: var(--brand-800); border: 1px solid #bfd5f6; background: rgba(255,255,255,.78); }
.hero-secondary:hover { background: #fff; border-color: #80acf0; }
.hero-notice-button {
  border: 0;
  color: #7c4a03;
  background: #fff6db;
  cursor: pointer;
}
.hero-notice-button span { color: #f59e0b; font-size: 11px; }
.hero-trust { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; color: #526273; font-size: 13px; font-weight: 700; }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust b { color: var(--success); }
.hero-side { display: grid; gap: 14px; }
.hero-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hero-proof-grid div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 13px 10px;
  border: 1px solid rgba(191,219,254,.78);
  border-radius: 11px;
  background: rgba(255,255,255,.78);
  text-align: center;
}
.hero-proof-grid b { color: var(--brand-800); font-size: 22px; }
.hero-proof-grid span { color: #64748b; font-size: 11px; line-height: 1.3; }

.product-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.product-section-head h2 { margin: 4px 0 0; color: var(--brand-950); font-size: 28px; }
.product-section-head > p { margin: 0; color: #64748b; }
.support-link span {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
}
.nav-tab i { margin-left: auto; color: #8aa1bb; font-style: normal; }
.product-platform {
  display: block;
  margin-bottom: 4px;
  color: #6b7d96;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.product-name p { margin: 5px 0 8px; color: #617089; font-size: 13px; line-height: 1.4; }
.format-chip {
  display: inline-flex !important;
  width: fit-content;
  margin: 0 !important;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #5a687c;
  font-size: 11px;
}
.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.stock-badge i { width: 7px; height: 7px; border-radius: 50%; }
.stock-ready { background: #eaf8ef; color: #13733a; }
.stock-ready i { background: #22a655; box-shadow: 0 0 0 4px rgba(34,166,85,.12); }
.stock-low { background: #fff4dc; color: #a15505; }
.stock-low i { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.13); }
.stock-out { background: #fff0f2; color: #b4233b; }
.stock-out i { background: #e93455; }
.sold-metric { display: grid; justify-items: center; gap: 2px; }
.sold-metric b { color: #334155; font-size: 16px; }
.sold-metric small { color: #8794a8; font-size: 11px; }
.status-pill[data-status="pending"],
.status-pill[data-status="processing"],
.status-pill[data-status="manual_review"] { background: #fff4dc; color: #9a5708; }
.status-pill[data-status="completed"],
.status-pill[data-status="paid"],
.status-pill[data-status="manual_paid"] { background: #eaf8ef; color: #13733a; }
.status-pill[data-status="cancelled"],
.status-pill[data-status="expired"],
.status-pill[data-status="refunded"] { background: #fff0f2; color: #b4233b; }

.buy-checkout-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.buy-checkout-summary > div {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #e0e8f2;
  border-radius: 9px;
  background: #f8fafc;
}
.buy-checkout-summary span { color: #64748b; font-size: 12px; }
.buy-checkout-summary b { color: var(--brand-950); font-size: 18px; }
.buy-checkout-summary .pay-total {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--brand-50);
  border-color: #bfdbfe;
}
.buy-checkout-summary .pay-total b { color: var(--brand-600); font-size: 24px; }
.buy-assurance {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0;
  padding: 11px 12px;
  border-radius: 9px;
  background: #effbf3;
  color: #526273;
  font-size: 12px;
}
.buy-assurance b { color: #13733a; }
.buy-actions > * { min-width: 150px; }

.auth-shell {
  width: min(1080px, 100%);
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr);
  overflow: hidden;
  border: 1px solid rgba(118, 151, 202, .22);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(16, 43, 86, .19), 0 8px 24px rgba(16, 43, 86, .08);
}
.auth-showcase {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  padding: 48px 52px;
  border-radius: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(69,151,255,.4), transparent 34%),
    linear-gradient(145deg, var(--brand-950), var(--brand-800));
  color: #fff;
  box-shadow: none;
}
.auth-showcase::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -130px;
  bottom: -150px;
  border: 40px solid rgba(255,255,255,.06);
  border-radius: 50%;
}
.auth-showcase-brand { display: flex; align-items: center; gap: 12px; align-self: start; margin-bottom: 56px; color: #fff; font-size: 23px; text-transform: capitalize; }
.auth-showcase-brand .brand-logo { width: 48px; height: 48px; }
.auth-showcase .eyebrow { color: #8fc2ff; }
.auth-showcase h2 { max-width: 500px; margin: 10px 0 14px; font-size: 36px; line-height: 1.17; }
.auth-showcase > p { max-width: 510px; margin: 0; color: rgba(255,255,255,.74); line-height: 1.6; }
.auth-showcase ul { display: grid; gap: 13px; margin: 28px 0; padding: 0; list-style: none; }
.auth-showcase li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.9); }
.auth-showcase li b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(34,197,94,.2); color: #86efac; }
.auth-showcase-link { width: fit-content; color: #fff; }
.auth-showcase-link:hover { color: #b7d8ff; }
.auth-shell .auth-card { width: 100%; padding: 52px 58px; border: 0; border-radius: 0; box-shadow: none; }
.auth-shell .customer-control-login-card { width: 100%; padding: 52px 58px; border: 0; border-radius: 0; box-shadow: none; }
.customer-control-login-card .control-login-mobile-brand {
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  color: #17325c;
  text-decoration: none;
}
.customer-control-login-card .control-login-mobile-brand strong { font-size: 23px; line-height: 1.15; }
.customer-control-login-card .control-login-label-row a { color: #1768ca; font-size: 13px; font-weight: 800; text-decoration: none; }
.customer-control-login-card .control-login-label-row a:hover { color: #0b4fa3; }
.customer-login-register { margin: 19px 0 0; color: #53657b; text-align: center; font-size: 13px; }
.customer-login-register a { color: #1768ca; font-weight: 900; text-decoration: none; }
.control-login-terms {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  margin: 1px 0 20px !important;
  color: #53657b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.45;
}
.control-login-terms input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: #1670e8; }
.control-login-terms a { color: #1768ca; font-weight: 850; text-decoration: none; }
.customer-register-card { padding-top: 38px !important; padding-bottom: 38px !important; }
.customer-register-card h1 { font-size: 34px; }
.customer-register-card .control-login-intro { margin-bottom: 19px; }
.customer-register-card .control-login-field { margin-bottom: 13px; }
.customer-forgot-card .control-login-submit { text-decoration: none; }
.control-login-help-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid #cfe1fa;
  border-radius: 13px;
  background: #f4f8ff;
  color: #355274;
}
.control-login-help-card > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #dcecff; color: #1768ca; font-weight: 900; }
.control-login-help-card b { color: #17345b; font-size: 13px; }
.control-login-help-card p { margin: 5px 0 0; color: #6d7e93; font-size: 12px; line-height: 1.55; }
.control-login-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.control-login-contact-actions .btn-secondary { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 12px; text-align: center; }
.auth-intro { margin: -10px 0 22px !important; color: #73839a !important; font-size: 14px; line-height: 1.5; }

.api-docs-nav {
  position: sticky;
  top: 82px;
  z-index: 10;
  width: min(1180px, 100%);
  display: flex;
  gap: 6px;
  margin: 0 auto 18px;
  padding: 7px;
  border: 1px solid #dce6f2;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}
.api-docs-nav a { padding: 9px 13px; border-radius: 8px; color: #526273; font-size: 13px; }
.api-docs-nav a:hover { color: var(--brand-600); background: var(--brand-50); }
.site-footer-inner {
  width: min(1380px, 100%);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 28px;
  margin: 0 auto;
  text-align: left;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand .brand-logo { width: 42px; height: 42px; }
.footer-brand div { display: grid; gap: 3px; }
.footer-brand strong { color: var(--brand-950); font-size: 17px; text-transform: capitalize; }
.footer-brand span { color: #7b8794; font-size: 12px; }
.site-footer nav, .footer-legal { display: flex; gap: 16px; align-items: center; }
.site-footer nav a, .footer-legal a { margin: 0; color: #526273; font-size: 13px; }
.site-footer nav a:hover, .footer-legal a:hover { color: var(--brand-600); }
.footer-legal { padding-left: 22px; border-left: 1px solid #dde5ef; }

@media (min-width: 1100px) {
  body { background: #f3f6fb; color: #26364d; }
  .sidebar {
    width: 256px;
    padding: 22px 16px;
    background:
      radial-gradient(circle at 15% 92%, rgba(37,131,255,.32), transparent 28%),
      linear-gradient(180deg, var(--brand-950), var(--brand-900) 68%, #123f91);
    box-shadow: 12px 0 40px rgba(7,26,69,.14);
  }
  .main { width: calc(100% - 256px); margin-left: 256px; }
  .sidebar-logo { margin: 0 5px 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .sidebar-logo strong { font-size: 23px; }
  .sidebar-logo .brand-logo { width: 48px; height: 48px; }
  .side-balance {
    margin: 0 4px 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }
  .side-balance:hover { color: #fff; border-color: rgba(143,194,255,.55); transform: translateY(-1px); }
  .side-link { min-height: 43px; margin-bottom: 3px; border-radius: 9px; padding: 11px 12px; }
  .side-link.active, .side-link:hover { background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 #5ca6ff; }
  .side-heading { margin-top: 19px; color: #83a4d2; opacity: 1; }
  .side-sublink { position: relative; padding: 8px 10px 8px 18px; color: #adc1df; }
  .side-sublink::before { content: ""; position: absolute; left: 4px; top: 16px; width: 5px; height: 5px; border-radius: 50%; background: #5475a2; }
  .side-sublink:hover { background: rgba(255,255,255,.08); }

  .topbar {
    height: 74px;
    padding: 12px clamp(22px, 3vw, 42px);
    border-bottom: 1px solid rgba(218,227,239,.8);
    box-shadow: 0 8px 30px rgba(28,54,96,.05);
  }
  .wallet-btn, .login-btn, .customer-chip { min-height: 44px; border-radius: 10px; }
  .wallet-btn { background: var(--brand-50); box-shadow: none; }
  .wallet-btn:hover { border-color: var(--brand-500); transform: translateY(-1px); }
  .customer-chip { border: 1px solid #e1e8f1; background: #fff; }
  .login-btn { padding: 0 14px; font-size: 14px; background: #fff7f8; box-shadow: none; }
  .customer-content { min-height: calc(100vh - 74px); }

  .customer-home {
    padding: 1px 0 20px;
    background:
      radial-gradient(circle at 78% 2%, rgba(83,154,255,.09), transparent 24%),
      #f3f6fb;
  }
  .home-hero {
    width: min(1380px, calc(100% - 56px));
    min-height: 310px;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    margin: 28px auto 38px;
    padding: 40px clamp(34px, 4vw, 62px);
    border: 1px solid rgba(191,219,254,.7);
    border-radius: 20px;
    background:
      radial-gradient(circle at 10% 110%, rgba(37,131,255,.18), transparent 34%),
      linear-gradient(125deg, #fafdff 0%, #eef6ff 56%, #e7f1ff 100%);
    box-shadow: 0 22px 54px rgba(31,73,125,.1);
  }
  .home-hero-copy { max-width: 760px; }
  .home-hero h1 { max-width: 750px; margin: 8px 0 12px; color: var(--brand-950); font-size: clamp(30px, 2.7vw, 43px); line-height: 1.14; letter-spacing: -.025em; }
  .home-hero-copy > p { max-width: 650px; font-size: 17px; line-height: 1.6; }
  .notice-details { border-color: rgba(147,190,244,.7); background: rgba(255,255,255,.88); box-shadow: 0 10px 25px rgba(37,75,123,.06); }

  .product-tabs { width: min(1380px, calc(100% - 56px)); margin: 0 auto 58px; }
  .product-section-head { margin-bottom: 18px; }
  .product-tools {
    position: sticky;
    top: 86px;
    z-index: 12;
    margin-bottom: 14px;
    padding: 8px;
    border: 1px solid #dde6f0;
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 30px rgba(28,54,96,.06);
    backdrop-filter: blur(10px);
  }
  .product-search input { min-height: 48px; border: 0; background-color: #f6f8fb; }
  .product-search input:focus { box-shadow: inset 0 0 0 2px rgba(37,131,255,.32); outline: 0; }
  .support-link { min-height: 48px; border-radius: 10px; padding: 0 17px; }
  .product-catalog-toolbar {
    position: sticky;
    top: 82px;
    z-index: 12;
    margin-bottom: 24px;
    padding: 8px;
    border: 1px solid #dde6f0;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 34px rgba(28,54,96,.09);
    backdrop-filter: blur(12px);
  }
  .product-catalog-toolbar .product-tools {
    position: static;
    z-index: auto;
    margin-bottom: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .tabs-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 0; }
  .nav-tab, .nav-tab:first-child {
    width: 100%;
    min-width: 0;
    min-height: 66px;
    height: auto;
    justify-content: flex-start;
    padding: 11px 15px;
    border: 1px solid #dde5ef;
    border-radius: 13px;
    background: #fff;
    color: #2c3e56;
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
  }
  .nav-tab:hover { border-color: #a9c9f5; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(24,75,140,.11); }
  .nav-tab.active { border-color: #7fb4fb; background: linear-gradient(135deg, var(--brand-50), #fff); color: var(--brand-700, #174d9b); box-shadow: inset 0 0 0 1px rgba(37,131,255,.2), var(--shadow-sm); }
  .nav-tab img { width: 30px; height: 30px; border-radius: 7px; }
  .product-category-section .table-wrap {
    border-top: 0;
    border-radius: 0 0 16px 16px;
  }

  .table-wrap { overflow: visible; border: 1px solid #dfe7f1; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(23,52,94,.08); }
  .product-table { min-width: 0; border-collapse: separate; border-spacing: 0; border-radius: inherit; overflow: hidden; }
  .product-table th {
    height: 54px;
    border: 0;
    border-bottom: 1px solid #dbe5f0;
    background: #f4f7fb;
    color: #586980;
    padding: 11px 16px;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .product-table th + th { border-left: 1px solid #e6edf5; }
  .product-table .name-head { width: 48%; color: var(--brand-800); font-size: 13px; }
  .product-table .name-head img { width: 26px; height: 26px; border-radius: 6px; }
  .product-table tbody tr { background: #fff; }
  .product-table tbody tr:nth-child(odd) { background: #fbfcfe; }
  .product-table tbody tr:hover { background: #f6faff; box-shadow: inset 4px 0 0 var(--brand-500); }
  .product-table td { min-height: 98px; padding: 16px; border-bottom-color: #e9eef5; }
  .product-name { gap: 14px; }
  .product-name > img { width: 44px; height: 44px; max-height: none; border-radius: 10px; box-shadow: 0 7px 16px rgba(18,33,78,.13); }
  .product-name > div { min-width: 0; }
  .name-product { color: #14284a; font-size: 16px; font-weight: 900; }
  .country-cell, .stock-cell, .sold-cell, .price-cell, .action-cell { text-align: center; }
  .country-cell .flag-image, .country-cell .flag-emoji { transform: scale(1.06); }
  .price-cell b { color: #e02046; font-size: 20px; white-space: nowrap; }
  .buy-btn { width: auto; min-width: 112px; height: 42px; padding: 0 17px; border-radius: 9px; background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); box-shadow: 0 8px 18px rgba(23,105,224,.2); }
  .buy-btn:hover:not(.disabled) { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(23,105,224,.28); }
  .buy-btn.disabled { background: #e6eaf0; color: #8794a8; box-shadow: none; }
  .product-result-note:not(:empty) { margin: 0 0 10px; padding: 8px 11px; border-radius: 8px; background: var(--brand-50); color: var(--brand-800); }

  .modal { padding: 28px; background: rgba(5,16,39,.58); backdrop-filter: blur(5px); }
  .modal-dialog { width: min(560px, 100%); }
  .modal-card { border: 1px solid rgba(255,255,255,.72); border-radius: 17px; box-shadow: 0 28px 80px rgba(4,15,38,.28); }
  .modal-header { min-height: 66px; padding: 16px 22px; }
  .modal-header h3 { font-size: 22px; }
  .modal-body { padding: 20px 22px; }
  .modal-actions { padding: 14px 22px 22px; }
  .buy-dialog { width: min(620px, 100%); }
  .buy-product-summary { padding: 16px; }
  .quantity-stepper { grid-template-columns: 52px minmax(0, 1fr) 52px; }
  .buy-actions { display: grid; grid-template-columns: .7fr 1.3fr; }

  .orders-page { width: min(1240px, calc(100% - 56px)); margin-top: 30px; }
  .orders-page-head { padding: 22px 24px; border: 1px solid #dfe7f1; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
  .order-retention-note { margin-top: 14px; border-radius: 12px; }
  .order-list-panel { border-radius: 16px; box-shadow: var(--shadow-sm); }
  .order-history-table th { background: #f4f7fb; color: #526273; font-size: 12px; text-transform: uppercase; }
  .order-history-table tbody tr:hover { background: #f7faff; }
  .status-pill { padding: 6px 10px; }
  .order-detail-page { min-height: calc(100vh - 74px); padding: 32px clamp(28px, 4vw, 56px) 54px; background: #f3f6fb; }
  .order-product-card, .order-detail-card { border: 1px solid #dfe7f1; border-radius: 16px; box-shadow: var(--shadow-sm); }
  .order-product-card h1 { margin-top: 8px; color: var(--brand-950); font-size: 26px; font-weight: 900; }
  .order-product-card p { margin-top: 18px; color: #64748b; font-size: 14px; }
  .order-section-title { margin-top: 28px; border-radius: 11px; background: linear-gradient(100deg, var(--brand-900), var(--brand-600)); }
  .order-filter-row { grid-template-columns: minmax(280px, 1fr) auto auto; gap: 9px; }
  .account-table th { background: var(--brand-800); }
  .account-table td { border-bottom-color: #e3e9f1; }
  .account-table textarea { border: 1px solid #dce4ee; background: #f5f7fa; }

  .customer-content .simple-page { min-height: calc(100vh - 74px); padding: 32px; }
  .simple-panel, .content-page { border-radius: 18px; box-shadow: var(--shadow-sm); }
  .profile-panel { width: min(1180px, 100%); padding: 30px; }
  .profile-head { padding-bottom: 20px; border-bottom: 1px solid #e6ebf2; }
  .profile-head h1 { margin: 6px 0 4px; font-size: 32px; }
  .profile-head .btn-primary { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 10px; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .profile-grid section { min-height: 180px; padding: 20px; border-radius: 14px; background: #f8fafc; }
  .profile-account-card { background: linear-gradient(135deg, var(--brand-900), var(--brand-800)) !important; color: #fff; }
  .profile-account-card h3, .profile-account-card p, .profile-account-card b { color: #fff; }
  .profile-stats-card { background: linear-gradient(145deg, #eff6ff, #f8fbff) !important; border-color: #bfdbfe !important; }
  .profile-api-card, .profile-password-card { min-height: 250px !important; }
  .profile-grid h3 { color: var(--brand-950); }

  .bank-page { min-height: calc(100vh - 74px); padding: 30px 30px 54px; background: #f3f6fb; border: 0; }
  .bank-page > div[style] { width: min(1100px, 100%); }
  .bank-card { width: min(980px, 100%); grid-template-columns: 340px minmax(0, 1fr); border-radius: 18px; box-shadow: var(--shadow-md); }
  .bank-info-panel { padding: 30px; background: linear-gradient(160deg, var(--brand-950), #122f68); }
  .bank-qr-panel { padding: 30px 42px 34px; }
  .bank-history { border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }

  .content-page { width: min(1040px, calc(100% - 56px)); margin: 32px auto; padding: 34px; }
  .content-page-head { max-width: 760px; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card { min-height: 90px; padding: 16px 18px; }
  .contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .security-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .security-steps li { grid-template-columns: 1fr; align-content: start; }

  .api-docs-page { min-height: calc(100vh - 74px); padding: 32px; background: #f3f6fb; }
  .api-docs-hero h1 { color: var(--brand-950); font-size: 36px; }
  .api-docs-page article, .api-errors { border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm); }
  .api-docs-page article:hover { border-color: #bfd5f6; }
  .api-endpoint-toggle { color: var(--brand-800); }
  .api-errors { border-radius: 14px; }

  .site-footer { margin-top: 0; padding: 26px 20px 34px; border-top: 1px solid #dde5ef; background: #fff; }
}

@media (min-width: 1440px) {
  .tabs-grid { grid-template-columns: repeat(4, minmax(210px, 1fr)); }
}

@media (max-width: 1099px) {
  .topbar-context { display: none; }
  .topbar-actions { display: contents; }
  .side-locale { display: none; }
  .auth-shell {
    width: min(460px, 100%);
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .auth-showcase { display: none; }
  .auth-shell .auth-card { border-radius: 20px; }
  .auth-shell .customer-control-login-card { border-radius: 20px; box-shadow: 0 24px 58px rgba(3, 17, 40, .22); }
  .auth-shell .customer-control-login-card .control-login-mobile-brand { display: flex; }
  .api-docs-nav { position: static; overflow-x: auto; white-space: nowrap; }
  .site-footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .footer-legal { padding-left: 0; border-left: 0; }
}

@media (max-width: 700px) {
  .auth-page {
    min-height: 100svh;
    align-content: center;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  }
  .auth-page::before { left: -430px; top: -410px; }
  .auth-page::after { right: -330px; bottom: -320px; }
  .auth-shell { width: min(430px, 100%); }
  .auth-shell .auth-card,
  .auth-shell .customer-control-login-card {
    width: 100%;
    padding: 24px 20px 22px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 20px;
    box-shadow: 0 24px 58px rgba(3, 17, 40, .28);
  }
  .auth-back-link {
    min-height: 36px;
    margin-bottom: 20px;
    padding: 0 11px;
    font-size: 12px;
  }
  .auth-brand-link {
    gap: 10px;
    margin: 0 0 18px;
  }
  .auth-brand-link .brand-logo {
    width: 46px;
    height: 46px;
    border-radius: 11px;
  }
  .auth-brand-link strong { font-size: 23px; }
  .customer-register-card { padding-top: 24px !important; padding-bottom: 24px !important; }
  .customer-register-card h1 { font-size: 29px; }
  .customer-register-card .control-login-field { margin-bottom: 11px; }
  .control-login-contact-actions { grid-template-columns: 1fr; }
  .auth-card h1 {
    margin-bottom: 9px;
    font-size: 28px;
  }
  .auth-intro {
    max-width: 340px;
    margin: 0 auto 22px !important;
    font-size: 13px;
    text-align: center;
  }
  .auth-card label {
    gap: 7px;
    margin-bottom: 14px;
    color: #687995;
    font-size: 14px;
    font-weight: 700;
  }
  .auth-card label a { font-size: 14px; }
  .auth-card .form-control {
    min-height: 50px;
    padding: 0 15px;
    border-color: #cad8e9;
    border-radius: 11px;
    background: #f7faff;
  }
  .auth-card .btn-block {
    min-height: 50px;
    margin-top: 20px;
    border-radius: 11px;
  }
  .auth-card > p:last-child {
    margin-top: 16px;
    font-size: 14px;
  }
  .auth-card .terms-row {
    margin: 18px 0 4px !important;
    font-size: 13px;
    line-height: 1.45;
  }
  .hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 16px; }
  .hero-primary, .hero-secondary, .hero-notice-button { width: 100%; min-height: 44px; }
  .hero-trust { display: grid; gap: 7px; margin-top: 14px; }
  .hero-side { gap: 10px; }
  .hero-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-proof-grid div { padding: 9px 5px; }
  .hero-proof-grid b { font-size: 18px; }
  .hero-proof-grid span { font-size: 9px; }
  .product-section-head { display: grid; gap: 5px; margin-bottom: 12px; }
  .product-section-head h2 { font-size: 23px; }
  .product-section-head > p { font-size: 13px; }
  .product-catalog-toolbar { position: static; margin-bottom: 16px; }
  .product-category-section { scroll-margin-top: 96px; }
  .product-category-section .table-wrap {
    overflow-x: hidden;
    scrollbar-width: none;
  }
  .product-category-section .table-wrap::-webkit-scrollbar { display: none; }
  .product-groups { gap: 22px; }
  .product-category-head {
    position: relative;
    overflow: hidden;
    min-height: 0;
    display: grid;
    gap: 11px;
    padding: 14px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--category-accent), var(--category-accent-end));
    color: #fff;
    box-shadow: 0 12px 28px rgba(15, 35, 75, .16);
  }
  .product-category-head::before { display: none; }
  .category-tiktok .product-category-head {
    --category-accent: #111827;
    --category-accent-end: #020617;
  }
  .category-facebook .product-category-head {
    --category-accent: #1877f2;
    --category-accent-end: #0c4eaa;
  }
  .category-instagram .product-category-head {
    --category-accent: #c13584;
    --category-accent-end: #f59e0b;
    background: linear-gradient(120deg, #7c3aed, #db2777 58%, #f59e0b);
  }
  .product-category-title {
    gap: 11px;
    padding-left: 2px;
  }
  .product-category-title > div { gap: 2px; }
  .product-category-title small {
    color: rgba(255,255,255,.74);
    font-size: 8px;
    letter-spacing: .14em;
  }
  .product-category-title h3 {
    color: #fff;
    font-size: 16px;
    line-height: 1.25;
    white-space: normal;
  }
  .product-category-icon {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    background: rgba(255,255,255,.13);
    box-shadow: none;
  }
  .product-category-icon img { width: 26px; height: 26px; }
  .product-category-stats {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 9px 0 0 2px;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  .product-category-stats span,
  .product-category-stats a {
    min-height: 30px;
    justify-content: center;
    padding: 5px 9px;
    border-color: rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    color: #fff;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .product-category-stats b {
    color: #fff;
    font-size: 13px;
  }
  .product-category-stats a {
    margin-left: auto;
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.16);
    color: #fff;
    font-weight: 800;
  }
  .nav-tab > span:not(.category-nav-icon) { text-align: left; }
  .nav-tab b { white-space: normal; }
  .nav-tab small { font-size: 9px; }
  .nav-tab i { display: none; }
  .product-platform { font-size: 9px; }
  .product-name p { display: none; }
  .format-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stock-badge { min-height: 26px; padding: 0 8px; font-size: 11px; }
  .product-table .stock-cell::before { content: none; }
  .sold-metric { display: inline; }
  .buy-checkout-summary { grid-template-columns: 1fr 1fr; }
  .buy-actions { display: grid; grid-template-columns: 1fr; }
  .auth-intro { font-size: 13px; }
  .api-docs-nav { width: 100%; margin-bottom: 12px; border-radius: 10px; }
  .footer-brand { display: none; }
  .site-footer nav { display: none; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 10px; }
}

/* Admin workspace refresh */
.admin-body {
  --admin-navy: #071a45;
  --admin-navy-soft: #0d2c69;
  --admin-blue: #1769e0;
  --admin-blue-bright: #2b86ff;
  --admin-surface: #ffffff;
  --admin-surface-soft: #f5f8fd;
  --admin-border: #dfe8f3;
  --admin-copy: #26364d;
  --admin-muted: #718096;
  --admin-shadow: 0 14px 38px rgba(21, 49, 101, .08);
  min-width: 320px;
  background:
    radial-gradient(circle at 86% 2%, rgba(59, 130, 246, .09), transparent 27rem),
    #f2f6fc;
  color: var(--admin-copy);
}

.admin-body .admin-shell {
  grid-template-columns: 280px minmax(0, 1fr);
  background: transparent;
}

.admin-shell .admin-sidebar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 92%, rgba(43, 134, 255, .35), transparent 27%),
    radial-gradient(circle at 90% 8%, rgba(73, 146, 255, .17), transparent 26%),
    linear-gradient(180deg, var(--admin-navy), var(--admin-navy-soft) 74%, #12489d);
  box-shadow: 14px 0 42px rgba(7, 26, 69, .16);
}

.admin-sidebar-brand {
  flex: 0 0 auto;
  margin: 0 5px 15px;
  padding: 0 3px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.admin-sidebar-brand a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  color: #fff;
  text-decoration: none;
}

.admin-sidebar-brand a:hover {
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}

.admin-sidebar-brand .brand-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.admin-sidebar-brand span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-sidebar-brand b {
  overflow: hidden;
  color: #fff;
  font-size: 21px;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.admin-sidebar-brand small {
  color: rgba(255, 255, 255, .59);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.admin-navigation {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.admin-nav-section {
  display: grid;
  gap: 3px;
  margin: 0 0 14px;
}

.admin-nav-section > p {
  margin: 0 10px 5px;
  color: #83a4d2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.admin-sidebar .admin-nav-link,
.admin-sidebar-footer a {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #b9cae4;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: none;
}

.admin-sidebar .admin-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: none;
  transform: translateX(2px);
}

.admin-sidebar .admin-nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(73, 146, 255, .34), rgba(255, 255, 255, .13));
  border-color: rgba(146, 197, 255, .27);
  box-shadow: inset 3px 0 0 #5ca6ff, 0 7px 20px rgba(0, 0, 0, .1);
}

.admin-nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.admin-sidebar-footer {
  flex: 0 0 auto;
  display: grid;
  gap: 4px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.admin-sidebar-footer a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09);
  box-shadow: none;
}

.admin-sidebar-footer a > b {
  margin-left: auto;
  font-size: 15px;
}

.admin-sidebar-footer .admin-sidebar-logout {
  color: #ffbec8;
}

.admin-shell .admin-main {
  min-height: 100vh;
  padding: 0;
  overflow: visible;
}

.admin-shell .admin-top {
  position: sticky;
  top: 0;
  z-index: 45;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 13px 28px;
  border-bottom: 1px solid rgba(214, 225, 239, .9);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 28px rgba(25, 55, 105, .045);
  backdrop-filter: blur(14px);
}

.admin-top-context {
  min-width: 0;
  display: grid;
  gap: 3px;
  margin-right: auto;
}

.admin-top-context > span {
  color: #7b8ba5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.admin-shell .admin-top h2 {
  overflow: hidden;
  margin: 0;
  color: var(--admin-navy);
  font-size: 23px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-top-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-system-link,
.admin-storefront-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: #fff;
  color: #526273;
  font-size: 12px;
  font-weight: 800;
}

.admin-system-link:hover,
.admin-storefront-link:hover {
  color: var(--admin-blue);
  border-color: #b8d3f7;
  background: #f7fbff;
}

.admin-system-link i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20a85a;
  box-shadow: 0 0 0 4px rgba(32, 168, 90, .12);
}

.admin-account {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
}

.admin-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--admin-blue), var(--admin-blue-bright));
  color: #fff;
  box-shadow: 0 8px 18px rgba(23, 105, 224, .23);
  font-size: 15px;
  font-weight: 900;
}

.admin-account-copy {
  display: grid;
  gap: 2px;
}

.admin-account-copy b {
  color: #26364d;
  font-size: 13px;
}

.admin-account-copy small {
  color: #8794a8;
  font-size: 10px;
}

.admin-page-content {
  width: min(1760px, 100%);
  margin: 0 auto;
  padding: 26px 28px 44px;
}

.admin-shell .admin-security-notice {
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px solid #fecdd3;
  border-radius: 13px;
  background: linear-gradient(135deg, #fff1f3, #fff8f8);
  color: #b4233b;
  box-shadow: 0 10px 28px rgba(190, 24, 57, .07);
}

.admin-security-notice:hover {
  color: #9f1239;
  border-color: #fda4af;
  transform: translateY(-1px);
}

.admin-notice-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ffe0e5;
  font-size: 18px;
  font-weight: 900;
}

.admin-security-notice > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-security-notice small {
  color: #9f5260;
  font-size: 12px;
}

.admin-notice-action {
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.admin-shell .admin-panel,
.admin-shell .admin-product-card {
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}

.admin-shell .admin-panel {
  padding: 21px;
  margin-bottom: 20px;
}

.admin-shell .admin-panel.priority-panel {
  border-color: #bcd7fa;
  box-shadow: 0 16px 38px rgba(23, 105, 224, .1);
}

.admin-shell .admin-panel h3 {
  margin: 0 0 15px;
  color: var(--admin-navy);
  font-size: 19px;
  line-height: 1.3;
}

.admin-shell .nested-panel {
  background: #f8fbff;
  border-color: #e2eaf4;
  box-shadow: none;
}

.admin-shell .admin-form {
  gap: 12px;
}

.admin-shell .admin-form label {
  gap: 7px;
  color: #3d4c62;
  font-size: 13px;
}

.admin-shell .admin-form input,
.admin-shell .admin-form select,
.admin-shell .admin-form textarea {
  min-height: 44px;
  border: 1px solid #ccd8e7;
  border-radius: 10px;
  background: #fbfdff;
  color: #26364d;
  box-shadow: inset 0 1px 2px rgba(18, 43, 82, .025);
}

.admin-shell input[type="checkbox"],
.admin-shell input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 18px;
  padding: 0;
  accent-color: var(--admin-blue);
  cursor: pointer;
}

.admin-shell .check-field,
.admin-shell .check-row {
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid #e0e8f2;
  border-radius: 10px;
  background: #f8fbff;
}

.admin-shell .admin-form input:hover,
.admin-shell .admin-form select:hover,
.admin-shell .admin-form textarea:hover {
  border-color: #abc7eb;
}

.admin-shell .admin-form input:focus,
.admin-shell .admin-form select:focus,
.admin-shell .admin-form textarea:focus {
  outline: 3px solid rgba(37, 131, 255, .14);
  border-color: #4f98ef;
  background: #fff;
}

.admin-shell .admin-form button,
.admin-shell .admin-button {
  min-height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-blue-bright));
  box-shadow: 0 8px 18px rgba(23, 105, 224, .17);
  cursor: pointer;
}

.admin-shell .admin-form button:hover,
.admin-shell .admin-button:hover {
  color: #fff;
  box-shadow: 0 11px 23px rgba(23, 105, 224, .24);
  transform: translateY(-1px);
}

.admin-shell .admin-form .danger-button,
.admin-shell .admin-form .danger-row button,
.admin-shell .danger-button {
  background: linear-gradient(135deg, #d92d4d, #ef4d68) !important;
  box-shadow: 0 8px 18px rgba(217, 45, 77, .16);
}

.admin-shell .muted-button {
  background: #6c7e95;
}

.admin-shell .admin-table {
  border-collapse: separate;
  border-spacing: 0;
  color: #334155;
}

.admin-shell .admin-table th,
.admin-shell .admin-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #e8eef5;
  line-height: 1.4;
  vertical-align: middle;
}

.admin-shell .admin-table th {
  background: #f5f8fc;
  color: #607089;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.admin-shell .admin-table thead th:first-child {
  border-radius: 10px 0 0;
}

.admin-shell .admin-table thead th:last-child {
  border-radius: 0 10px 0 0;
}

.admin-shell .admin-table tbody tr {
  transition: background-color .16s ease;
}

.admin-shell .admin-table tbody tr:hover {
  background: #f8fbff;
}

.admin-shell .admin-table tbody tr:last-child td {
  border-bottom-color: transparent;
}

.admin-shell .admin-table small {
  color: #7b8ba1;
}

.admin-shell .status-pill {
  min-height: 28px;
  align-items: center;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-source-pill {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 7px;
  background: #eef3f8;
  color: #607089;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.admin-source-pill[data-source="api"] {
  background: #eeeafe;
  color: #6d3ddb;
}

.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.admin-row-actions a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #d8e5f5;
  border-radius: 8px;
  background: #f6faff;
  color: #1769e0;
  font-size: 11px;
  font-weight: 900;
}

.admin-row-actions a:hover {
  border-color: #9fc6f4;
  background: #eaf4ff;
}

.admin-shell .table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5ecf4;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: #b7c7da transparent;
}

.admin-shell .table-wrap .admin-table {
  border-radius: 12px;
}

.admin-shell .success-box {
  border: 1px solid #a7e7bf;
  border-radius: 11px;
  background: #effbf3;
}

.admin-shell .admin-pagination {
  margin-top: 3px;
}

.admin-shell .admin-pagination a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid #d8e3f0;
  border-radius: 9px;
  background: #fff;
  color: #526273;
}

.admin-shell .admin-pagination a:hover {
  color: var(--admin-blue);
  border-color: #aacaf1;
  background: #f4f9ff;
}

/* Dashboard */
.admin-dashboard-hero {
  position: relative;
  isolation: isolate;
  min-height: 260px;
  display: grid;
  grid-template-columns: minmax(360px, .8fr) minmax(560px, 1.2fr);
  gap: 30px;
  align-items: center;
  margin: 0 0 24px;
  padding: 32px 34px;
  overflow: hidden;
  border: 1px solid #bfdbfe;
  border-radius: 21px;
  background:
    radial-gradient(circle at 88% 16%, rgba(82, 157, 255, .22), transparent 30%),
    linear-gradient(135deg, #eaf4ff, #f8fbff 58%, #e9f3ff);
  box-shadow: 0 22px 55px rgba(23, 75, 145, .1);
}

.admin-dashboard-hero::after {
  position: absolute;
  z-index: -1;
  right: -92px;
  bottom: -155px;
  width: 290px;
  height: 290px;
  border: 45px solid rgba(255, 255, 255, .52);
  border-radius: 50%;
  content: "";
}

.dashboard-hero-copy {
  min-width: 0;
}

.admin-shell .eyebrow {
  color: #2874db;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
}

.dashboard-hero-copy h1 {
  margin: 7px 0 10px;
  color: var(--admin-navy);
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1.08;
}

.dashboard-hero-copy > p {
  max-width: 530px;
  margin: 0;
  color: #65758c;
  line-height: 1.55;
}

.dashboard-hero-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.dashboard-hero-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid #b9d4f6;
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  color: var(--admin-navy-soft);
  font-weight: 900;
}

.dashboard-hero-actions a:first-child {
  border-color: transparent;
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-blue-bright));
  color: #fff;
  box-shadow: 0 10px 23px rgba(23, 105, 224, .22);
}

.dashboard-hero-actions a:hover {
  transform: translateY(-1px);
}

.dashboard-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-hero-metric {
  --metric-color: #1769e0;
  min-width: 0;
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 19px;
  border: 1px solid rgba(191, 219, 254, .9);
  border-radius: 15px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 28px rgba(32, 73, 133, .07);
  backdrop-filter: blur(8px);
}

.dashboard-hero-metric::before {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: var(--metric-color);
  content: "";
}

.dashboard-hero-metric > span {
  color: #6b7d96;
  font-size: 11px;
  font-weight: 800;
}

.dashboard-hero-metric strong {
  overflow-wrap: anywhere;
  color: var(--admin-navy);
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1.08;
}

.dashboard-hero-metric small {
  color: #8492a6;
  font-size: 10px;
  line-height: 1.35;
}

.tone-blue { --metric-color: #1769e0; --stat-tint: #eaf3ff; }
.tone-cyan { --metric-color: #0891b2; --stat-tint: #e8fbff; }
.tone-green { --metric-color: #159447; --stat-tint: #eaf9ef; }
.tone-purple { --metric-color: #7c3aed; --stat-tint: #f2edff; }
.tone-orange { --metric-color: #d97706; --stat-tint: #fff5e5; }
.tone-red { --metric-color: #d92d4d; --stat-tint: #fff0f3; }

.dashboard-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 13px;
}

.dashboard-section-heading > div {
  min-width: 0;
}

.admin-shell .dashboard-section-heading h3 {
  margin: 3px 0 0;
}

.dashboard-section-heading > span {
  color: #7b8ba1;
  font-size: 12px;
}

.dashboard-section-heading > a {
  color: var(--admin-blue);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-alert-center {
  margin-bottom: 25px;
}

.dashboard-alert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 11px;
}

.dashboard-alert-card {
  --alert-color: #c46807;
  --alert-bg: #fff8e8;
  --alert-border: #f5d899;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--alert-border);
  border-radius: 13px;
  background: var(--alert-bg);
  color: var(--alert-color);
  box-shadow: 0 9px 24px rgba(130, 84, 12, .055);
}

.dashboard-alert-card.is-danger {
  --alert-color: #b4233b;
  --alert-bg: #fff2f4;
  --alert-border: #fecdd3;
}

.dashboard-alert-card:hover {
  color: var(--alert-color);
  border-color: var(--alert-color);
  transform: translateY(-2px);
  box-shadow: 0 13px 28px rgba(79, 48, 13, .09);
}

.dashboard-alert-symbol {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--alert-color) 12%, #fff);
  font-size: 17px;
  font-weight: 900;
}

.dashboard-alert-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dashboard-alert-copy b {
  color: #4b3428;
  font-size: 13px;
  line-height: 1.35;
}

.dashboard-alert-card.is-danger .dashboard-alert-copy b {
  color: #7f1d31;
}

.dashboard-alert-copy small {
  color: #856d5f;
  font-size: 11px;
  line-height: 1.4;
}

.dashboard-alert-arrow {
  font-size: 18px;
  font-weight: 900;
}

.dashboard-overview-heading {
  margin: 0 0 13px;
}

.admin-shell .stats {
  gap: 13px;
  margin-bottom: 20px;
}

.admin-shell .stats > div {
  position: relative;
  min-width: 0;
  padding: 19px;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 11px 28px rgba(25, 55, 105, .065);
}

.admin-shell .dashboard-overview-stats {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

.admin-shell .admin-finance-split {
  padding: 21px;
}

.admin-finance-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 11px;
}

.admin-finance-split-grid article {
  position: relative;
  min-width: 0;
  min-height: 125px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--metric-color, var(--admin-blue)) 22%, #dbe7f5);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, var(--stat-tint, #eef6ff));
}

.admin-finance-split-grid article::after {
  position: absolute;
  right: -27px;
  bottom: -34px;
  width: 100px;
  height: 100px;
  border: 18px solid color-mix(in srgb, var(--metric-color, var(--admin-blue)) 10%, transparent);
  border-radius: 50%;
  content: "";
}

.admin-finance-split-grid span,
.admin-finance-split-grid b,
.admin-finance-split-grid small {
  position: relative;
  z-index: 1;
}

.admin-finance-split-grid span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-finance-split-grid b {
  overflow-wrap: anywhere;
  color: var(--admin-navy);
  font-size: clamp(24px, 2vw, 31px);
}

.admin-finance-split-grid small {
  color: #76869b;
  font-size: 10px;
  line-height: 1.5;
}

.admin-stat-card::after {
  position: absolute;
  right: -22px;
  bottom: -29px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--stat-tint, #eef6ff);
  content: "";
}

.admin-stat-card > .admin-nav-icon {
  width: 39px;
  height: 39px;
  display: block;
  margin-bottom: 18px;
  padding: 9px;
  border-radius: 11px;
  background: var(--stat-tint, #eef6ff);
  color: var(--metric-color, var(--admin-blue));
}

.admin-shell .admin-stat-card > b {
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
  color: var(--admin-navy);
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.08;
}

.admin-shell .admin-stat-card > span {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
  color: #4f6077;
  font-size: 13px;
  font-weight: 800;
}

.admin-stat-card > small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 5px;
  color: #8996a9;
  font-size: 10px;
  line-height: 1.4;
}

.admin-shell .dashboard-period-panel {
  margin-bottom: 12px;
  padding: 20px 21px;
  overflow: visible;
}

.admin-shell .dashboard-period-head h3,
.admin-shell .dashboard-chart-head h3 {
  margin: 3px 0 5px;
}

.admin-shell .dashboard-period-tabs {
  padding: 5px;
  border: 1px solid #e0e8f2;
  border-radius: 11px;
  background: #f1f5fa;
}

.admin-shell .dashboard-period-tab {
  min-height: 39px;
  border-radius: 8px;
  color: #5a6b82;
  font-size: 12px;
}

.admin-shell .dashboard-period-tab:hover,
.admin-shell .dashboard-period-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-blue-bright));
  box-shadow: 0 7px 17px rgba(23, 105, 224, .2);
}

.admin-shell .dashboard-period-stats {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--admin-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--admin-shadow);
}

.admin-shell .dashboard-period-stats > div {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 13px 14px 13px 17px;
  border: 0;
  border-radius: 10px;
  background: var(--admin-surface-soft);
  box-shadow: none;
}

.admin-shell .dashboard-period-stats > div::before {
  position: absolute;
  inset: 13px auto 13px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--metric-color, var(--admin-blue));
  content: "";
}

.admin-shell .dashboard-period-stats b {
  overflow-wrap: anywhere;
  color: var(--admin-navy);
  font-size: 20px;
}

.admin-shell .dashboard-period-stats span {
  color: #73839a;
  font-size: 11px;
}

.admin-shell .dashboard-chart-panel {
  padding: 23px;
  overflow: hidden;
}

.dashboard-chart-head {
  align-items: flex-end;
  margin-bottom: 8px;
}

.admin-shell .chart-legend {
  padding: 8px 10px;
  border-radius: 9px;
  background: #f6f9fc;
  color: #5d6e84;
  font-size: 11px;
}

.admin-shell .revenue-chart {
  height: 320px;
  padding-top: 14px;
  background:
    repeating-linear-gradient(to top, transparent 0, transparent 59px, #eef2f7 60px);
}

.admin-shell .chart-bar {
  height: 292px;
}

.admin-shell .chart-bars {
  border-bottom-color: #cbd8e7;
}

.admin-shell .chart-fill {
  border-radius: 6px 6px 2px 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr);
  gap: 20px;
}

.dashboard-bottom-grid > .admin-panel {
  min-width: 0;
  margin-bottom: 0;
}

.dashboard-quick-grid {
  display: grid;
  gap: 9px;
}

.dashboard-quick-action {
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e1e9f3;
  border-radius: 11px;
  background: #f8fbff;
  color: #405168;
}

.dashboard-quick-action:hover {
  color: var(--admin-blue);
  border-color: #b7d4f7;
  background: #f2f8ff;
  transform: translateX(2px);
}

.dashboard-quick-action > .admin-nav-icon {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 10px;
  background: #e8f3ff;
  color: var(--admin-blue);
}

.dashboard-quick-action > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dashboard-quick-action b {
  color: var(--admin-navy-soft);
  font-size: 12px;
}

.dashboard-quick-action small {
  overflow: hidden;
  color: #8391a5;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-quick-action > i {
  color: #7ba8e3;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 1280px) {
  .admin-dashboard-hero {
    grid-template-columns: 1fr;
  }

  .admin-shell .dashboard-overview-stats {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }

  .dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .admin-top-actions .admin-system-link,
  .admin-top-actions .admin-storefront-link {
    display: none;
  }

  .admin-shell .dashboard-overview-stats {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 900px) {
  .admin-body .admin-shell {
    display: block;
  }

  .admin-shell .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: min(88vw, 320px);
    height: 100dvh;
    padding: 18px 14px 14px;
    overflow: hidden;
    transform: translateX(-105%);
  }

  .admin-shell .admin-sidebar-close {
    top: 13px;
    right: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  .admin-shell .admin-top {
    min-height: 70px;
    margin: 0;
    padding: 10px 16px;
  }

  .admin-shell .admin-menu-toggle {
    flex: 0 0 44px;
  }

  .admin-page-content {
    padding: 18px 16px 34px;
  }

  .admin-dashboard-hero {
    min-height: 0;
    padding: 26px;
  }

  .dashboard-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .admin-shell .admin-top {
    gap: 10px;
  }

  .admin-top-context > span,
  .admin-account-copy {
    display: none;
  }

  .admin-shell .admin-top h2 {
    font-size: 19px;
  }

  .admin-account {
    min-height: 40px;
    padding-left: 0;
  }

  .admin-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .admin-page-content {
    padding: 14px 12px 28px;
  }

  .admin-shell .admin-security-notice {
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 14px;
  }

  .admin-notice-action {
    display: none;
  }

  .admin-dashboard-hero {
    gap: 22px;
    margin-bottom: 19px;
    padding: 21px 17px;
    border-radius: 17px;
  }

  .dashboard-hero-copy h1 {
    font-size: 29px;
  }

  .dashboard-hero-copy > p {
    font-size: 13px;
  }

  .dashboard-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 17px;
  }

  .dashboard-hero-actions a {
    min-width: 0;
    padding: 0 9px;
    font-size: 12px;
    text-align: center;
  }

  .dashboard-hero-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-hero-metric {
    min-height: 112px;
    padding: 15px;
  }

  .dashboard-hero-metric strong {
    font-size: 25px;
  }

  .dashboard-section-heading {
    align-items: flex-start;
  }

  .dashboard-section-heading > span {
    max-width: 125px;
    text-align: right;
  }

  .dashboard-alert-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-alert-card {
    min-height: 76px;
  }

  .admin-shell .dashboard-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .admin-shell .stats > div {
    padding: 14px;
  }

  .admin-stat-card > .admin-nav-icon {
    width: 35px;
    height: 35px;
    margin-bottom: 13px;
    padding: 8px;
  }

  .admin-shell .admin-stat-card > b {
    font-size: clamp(20px, 6vw, 26px);
  }

  .admin-shell .admin-stat-card > span {
    font-size: 11px;
  }

  .admin-shell .admin-stat-card > small {
    display: none;
  }

  .admin-shell .admin-panel {
    padding: 15px;
    border-radius: 13px;
  }

  .admin-shell .dashboard-period-head,
  .admin-shell .dashboard-chart-head {
    display: grid;
  }

  .admin-shell .dashboard-period-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-shell .dashboard-period-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 6px;
  }

  .admin-shell .dashboard-period-stats > div {
    min-height: 76px;
    padding: 11px 10px 11px 14px;
  }

  .admin-shell .dashboard-period-stats b {
    font-size: 17px;
  }

  .admin-shell .dashboard-chart-panel {
    padding: 16px 13px;
  }

  .admin-shell .chart-legend {
    justify-content: flex-start;
  }

  .dashboard-quick-grid {
    grid-template-columns: 1fr;
  }

  .admin-shell .admin-body .admin-table,
  .admin-body .admin-table {
    min-width: 620px;
  }

  .admin-shell .dashboard-users-panel .admin-table {
    min-width: 560px;
  }

  .admin-shell .admin-form button,
  .admin-shell .admin-button,
  .admin-shell .mini-form button {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .product-category-stats {
    gap: 4px;
  }

  .product-category-stats span,
  .product-category-stats a {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 4px 6px;
    font-size: 8.5px;
    white-space: nowrap;
  }

  .product-category-stats .stock-available-label {
    display: none;
  }

  .product-category-stats b {
    font-size: 12px;
  }

  .admin-shell .dashboard-overview-stats {
    grid-template-columns: 1fr;
  }

  .dashboard-hero-actions {
    grid-template-columns: 1fr;
  }

  .admin-shell .dashboard-period-stats {
    grid-template-columns: 1fr;
  }
}

/* Swagger-style API reference */
.customer-api-docs {
  background:
    radial-gradient(circle at 88% 3%, rgba(46, 139, 255, .08), transparent 28%),
    #f5f7fa;
}

.api-docs-page.api-reference {
  width: min(1240px, 100%);
  min-height: calc(100vh - 74px);
  margin: 0 auto;
  padding: 30px;
  background: transparent;
  color: #344054;
}

.api-reference-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  margin-bottom: 20px;
  padding: 28px;
  border: 1px solid #e1e7ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(18, 44, 78, .07);
}

.api-reference-title {
  min-width: 0;
}

.api-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.api-title-line h1 {
  margin: 0;
  color: #263142;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.08;
}

.api-version,
.api-oas {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.api-version { background: #667085; }
.api-oas { background: #85c400; }

.api-openapi-link {
  width: fit-content;
  display: inline-flex;
  margin-top: 7px;
  color: #1683d8;
  font-size: 13px;
  text-decoration: none;
}

.api-reference-title > p {
  max-width: 760px;
  margin: 16px 0 0;
  color: #667085;
  font-size: 15px;
  line-height: 1.6;
}

.api-reference-actions {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.api-authorize-button,
.api-profile-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.api-authorize-button {
  border: 2px solid #49cc90;
  background: #fff;
  color: #288b61;
}

.api-authorize-button.is-authorized {
  background: #eafaf2;
}

.api-profile-link {
  border: 1px solid #d7e0eb;
  background: #f8fafc;
  color: #344054;
}

.api-reference-guide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.api-reference-guide section {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e7ebf1;
  border-radius: 10px;
  background: #fafbfd;
}

.api-reference-guide section > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e9f4ff;
  color: #1670c5;
  font-weight: 900;
}

.api-reference-guide div {
  display: grid;
  gap: 2px;
}

.api-reference-guide b {
  color: #344054;
  font-size: 13px;
}

.api-reference-guide small {
  color: #7a8798;
  font-size: 11px;
  line-height: 1.35;
}

.api-server-row {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dce4ee;
  border-radius: 9px;
  background: #f7f9fc;
}

.api-server-row > span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.api-server-row code {
  overflow: hidden;
  color: #344054;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-server-row button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #cdd8e5;
  border-radius: 7px;
  background: #fff;
  color: #176fc1;
  font-weight: 800;
  cursor: pointer;
}

.api-reference-toolbar {
  position: sticky;
  top: 82px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 18px;
  padding: 9px;
  border: 1px solid #dce3ec;
  border-radius: 11px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 22px rgba(18, 44, 78, .07);
  backdrop-filter: blur(12px);
}

.api-reference-toolbar label,
.api-reference-toolbar input {
  width: 100%;
}

.api-reference-toolbar input {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #cfd8e5;
  border-radius: 8px;
  background: #fff;
  color: #344054;
}

.api-reference-toolbar > div {
  display: flex;
  gap: 7px;
}

.api-reference-toolbar button {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #cfd8e5;
  border-radius: 8px;
  background: #fff;
  color: #475467;
  font-weight: 800;
  cursor: pointer;
}

.api-filter-empty {
  margin-bottom: 16px;
  padding: 28px;
  border: 1px dashed #cdd8e5;
  border-radius: 12px;
  background: #fff;
  color: #667085;
  text-align: center;
}

.api-tag-list {
  display: grid;
  gap: 18px;
}

.api-tag-section {
  min-width: 0;
}

.api-tag-header {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #d8dee8;
  background: transparent;
  color: #344054;
  text-align: left;
  cursor: pointer;
}

.api-tag-header > span:first-child {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.api-tag-header b {
  color: #344054;
  font-size: 23px;
}

.api-tag-header small {
  color: #667085;
  font-size: 13px;
  font-weight: 500;
}

.api-tag-header i {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2f6;
  color: #667085;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.api-chevron {
  color: #667085;
  font-size: 19px;
  font-weight: 900;
  transition: transform .2s ease;
}

.api-tag-section.is-collapsed .api-tag-operations {
  display: none;
}

.api-tag-section.is-collapsed .api-tag-header .api-chevron {
  transform: rotate(180deg);
}

.api-tag-operations {
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

.api-docs-page.api-reference .api-operation {
  --method-color: #61affe;
  --method-soft: rgba(97, 175, 254, .1);
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--method-color);
  border-radius: 7px;
  background: var(--method-soft);
  box-shadow: none;
}

.api-docs-page.api-reference .api-operation.method-post {
  --method-color: #49cc90;
  --method-soft: rgba(73, 204, 144, .1);
}

.api-docs-page.api-reference .api-operation:hover {
  border-color: var(--method-color);
  box-shadow: 0 7px 18px rgba(18, 44, 78, .07);
}

.api-operation-summary {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 74px minmax(190px, auto) minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 12px;
  padding: 7px;
  border: 0;
  background: transparent;
  color: #344054;
  text-align: left;
  cursor: pointer;
}

.api-method {
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--method-color);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
}

.api-operation-summary code {
  overflow-wrap: anywhere;
  color: #253347;
  font-size: 14px;
  font-weight: 800;
}

.api-operation-summary-text {
  overflow: hidden;
  color: #536174;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-auth-badge {
  padding: 5px 8px;
  border: 1px solid rgba(52, 64, 84, .12);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.api-operation:not(.is-collapsed) .api-operation-summary {
  border-bottom: 1px solid rgba(52, 64, 84, .12);
}

.api-operation:not(.is-collapsed) .api-operation-summary .api-chevron {
  transform: rotate(180deg);
}

.api-operation.is-collapsed .api-operation-panel {
  display: none;
}

.api-operation-panel {
  padding: 20px;
  background: rgba(255,255,255,.76);
}

.api-operation-description {
  margin: 0 0 18px;
  color: #475467;
  line-height: 1.6;
}

.api-purchase-warning {
  display: grid;
  gap: 3px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #f2c45c;
  border-radius: 8px;
  background: #fff8e7;
  color: #8a5a00;
}

.api-purchase-warning span {
  font-size: 12px;
}

.api-operation-detail,
.api-try-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #dfe5ed;
}

.api-operation-detail h4,
.api-try-panel h4 {
  margin: 0;
  color: #344054;
  font-size: 14px;
}

.api-operation-detail h4 > span {
  color: #7a8798;
  font-size: 11px;
  font-weight: 500;
}

.api-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.api-detail-heading > div {
  display: grid;
  gap: 3px;
}

.api-detail-heading p {
  margin: 0;
  color: #7a8798;
  font-size: 12px;
}

.api-detail-heading > span {
  padding: 4px 7px;
  border-radius: 5px;
  background: #e9edf3;
  color: #667085;
  font-size: 10px;
  font-weight: 800;
}

.api-empty-detail {
  margin: 10px 0 0;
  padding: 11px;
  background: rgba(255,255,255,.66);
  color: #667085;
  font-size: 13px;
}

.api-detail-table-wrap {
  width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid #dfe5ed;
  border-radius: 8px;
  background: #fff;
}

.api-detail-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.api-detail-table th,
.api-detail-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf0f4;
  color: #475467;
  font-size: 12px;
  text-align: left;
  vertical-align: top;
}

.api-detail-table th {
  background: #f7f9fb;
  color: #667085;
  font-size: 11px;
  text-transform: uppercase;
}

.api-detail-table tr:last-child td {
  border-bottom: 0;
}

.api-response-table {
  min-width: 420px;
}

.api-docs-page.api-reference pre {
  width: 100%;
  max-width: 100%;
  margin: 10px 0 0;
  overflow-x: auto;
  border-radius: 7px;
  background: #101828;
  color: #e5f0ff;
  font: 12px/1.6 Consolas, monospace;
  white-space: pre;
}

.api-docs-page.api-reference .api-code-block {
  position: relative;
  min-width: 0;
}

.api-docs-page.api-reference .api-copy-button {
  top: 16px;
  right: 8px;
  border-color: #475467;
  background: #344054;
  color: #fff;
}

.api-example-tabs {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  border-bottom: 1px solid #dfe5ed;
}

.api-example-tabs button {
  padding: 8px 11px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.api-example-tabs button.active {
  border-bottom-color: var(--method-color);
  color: #344054;
}

.api-try-panel {
  padding: 16px;
  border: 1px solid #dbe3ed;
  border-radius: 9px;
  background: #fff;
}

.api-try-auth-state {
  white-space: nowrap;
}

.api-try-auth-state.is-authorized {
  background: #e8f8ef;
  color: #257a54;
}

.api-try-panel form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}

.api-try-panel label {
  display: grid;
  gap: 6px;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
}

.api-try-panel input {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid #cfd8e5;
  border-radius: 7px;
  background: #fff;
}

.api-try-button {
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--method-color);
  border-radius: 7px;
  background: #fff;
  color: #344054;
  font-weight: 900;
  cursor: pointer;
}

.api-try-button:hover {
  background: var(--method-soft);
}

.api-try-button:disabled {
  cursor: wait;
  opacity: .65;
}

.api-live-response {
  margin-top: 14px;
}

.api-live-response > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.api-live-response > div button {
  border: 0;
  background: transparent;
  color: #176fc1;
  cursor: pointer;
}

.api-response-ok { color: #247d55; }
.api-response-error { color: #b4233b; }

.api-schema-section {
  margin-top: 22px;
  border: 1px solid #dce3ec;
  border-radius: 10px;
  background: #fff;
}

.api-schema-section summary {
  min-height: 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  cursor: pointer;
}

.api-schema-section summary > span {
  display: grid;
  gap: 2px;
}

.api-schema-section summary b {
  color: #344054;
  font-size: 20px;
}

.api-schema-section summary small {
  color: #667085;
}

.api-schema-section summary i {
  color: #667085;
  font-size: 11px;
  font-style: normal;
}

.api-schema-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.api-schema-links a {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  color: #344054;
  text-decoration: none;
}

.api-schema-links span {
  color: #1683d8;
  font-size: 10px;
}

.api-docs-page.api-reference .api-errors {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #dce3ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.api-docs-page.api-reference .api-errors h2 {
  margin: 0;
  color: #344054;
}

.api-authorize-modal .modal-dialog {
  width: min(540px, 100%);
}

.api-authorize-modal .modal-header > div {
  display: grid;
  gap: 3px;
}

.api-authorize-modal .modal-header h3 {
  margin: 0;
}

.api-authorize-modal .modal-body {
  display: grid;
  gap: 14px;
}

.api-authorize-modal .modal-body > p {
  margin: 0;
  color: #667085;
  line-height: 1.55;
}

.api-authorize-modal label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-weight: 800;
}

.api-authorize-modal input {
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #cfd8e5;
  border-radius: 9px;
}

.api-authorize-modal .api-auth-help {
  padding: 10px;
  border-radius: 7px;
  background: #f4f7fb;
  font-size: 12px;
}

@media (max-width: 900px) {
  .api-reference-hero {
    grid-template-columns: 1fr;
  }

  .api-reference-actions {
    grid-row: 2;
  }

  .api-reference-guide {
    grid-column: auto;
  }

  .api-server-row {
    grid-column: auto;
  }

  .api-operation-summary {
    grid-template-columns: 64px minmax(160px, auto) minmax(0, 1fr) 22px;
  }

  .api-auth-badge {
    display: none;
  }

  .api-schema-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .api-docs-page.api-reference {
    min-height: auto;
    padding: 14px 12px 34px;
  }

  .api-reference-hero {
    gap: 16px;
    margin-bottom: 12px;
    padding: 18px 14px;
    border-radius: 12px;
  }

  .api-title-line h1 {
    font-size: 28px;
  }

  .api-reference-title > p {
    margin-top: 12px;
    font-size: 13px;
  }

  .api-reference-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .api-authorize-button,
  .api-profile-link {
    min-height: 44px;
    padding: 0 10px;
  }

  .api-reference-guide {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .api-reference-guide section {
    padding: 9px 10px;
  }

  .api-server-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .api-server-row button {
    grid-column: 1 / -1;
  }

  .api-reference-toolbar {
    position: static;
    grid-template-columns: 1fr;
    margin-bottom: 12px;
  }

  .api-reference-toolbar > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .api-tag-list {
    gap: 13px;
  }

  .api-tag-header {
    min-height: 56px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 9px 3px;
  }

  .api-tag-header > span:first-child {
    display: grid;
    gap: 2px;
  }

  .api-tag-header b {
    font-size: 19px;
  }

  .api-tag-header small {
    font-size: 11px;
  }

  .api-tag-header i {
    display: none;
  }

  .api-operation-summary {
    min-height: 50px;
    grid-template-columns: 56px minmax(0, 1fr) 20px;
    gap: 8px;
    padding: 6px;
  }

  .api-method {
    min-height: 34px;
    font-size: 11px;
  }

  .api-operation-summary code {
    font-size: 12px;
  }

  .api-operation-summary-text,
  .api-auth-badge {
    display: none;
  }

  .api-operation-panel {
    padding: 14px 11px;
  }

  .api-operation-description {
    font-size: 13px;
  }

  .api-detail-heading {
    display: grid;
  }

  .api-detail-heading > span {
    width: fit-content;
  }

  .api-detail-table {
    min-width: 520px;
  }

  .api-response-table {
    min-width: 360px;
  }

  .api-docs-page.api-reference pre {
    font-size: 11px;
  }

  .api-try-panel {
    padding: 12px 10px;
  }

  .api-try-panel form {
    grid-template-columns: 1fr;
  }

  .api-schema-links {
    grid-template-columns: 1fr;
  }

  .api-docs-page.api-reference .api-errors {
    padding: 14px 11px;
  }
}
/* Multi-tenant seller administration */
.tenant-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.tenant-detail-panel .admin-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.tenant-brand-editor{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr);gap:20px;margin-top:20px;padding:18px;border:1px solid #cfe0f5;border-radius:18px;background:#f6faff}
.tenant-brand-preview{display:flex;flex-direction:column;justify-content:center;min-height:230px;padding:24px;border-radius:15px;color:#fff;background:linear-gradient(145deg,#071a43,#1057be);box-shadow:0 14px 32px #0b34752b}
.tenant-brand-preview>.eyebrow{color:#8dc4ff}.tenant-brand-preview>div{display:flex;align-items:center;gap:14px;margin:18px 0 10px}.tenant-brand-preview img{width:58px;height:58px;object-fit:cover;border-radius:13px;box-shadow:0 8px 20px #0004}.tenant-brand-preview strong{font-size:24px;line-height:1.2}.tenant-brand-preview p{margin:0;color:#d9e9ff}
.tenant-brand-form{margin:0;background:#fff;border:1px solid #dce8f7;border-radius:15px;padding:18px}.tenant-brand-form small{color:#70819c}
.metric-accent{font-size:28px;color:#1677ff}.compact-form{gap:8px;align-items:end}.compact-form label{min-width:115px}
.seller-shell{min-height:100vh;background:#f1f6fd;color:#102a56;display:grid;grid-template-columns:270px minmax(0,1fr)}
.seller-sidebar{background:linear-gradient(180deg,#071a43,#0d3c91);color:#fff;padding:24px 18px;display:flex;flex-direction:column;gap:10px;min-height:100vh;position:sticky;top:0;height:100vh}
.seller-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:20px;padding:0 8px 20px;border-bottom:1px solid #ffffff24;margin-bottom:8px}.seller-brand img{width:44px;height:44px;border-radius:10px}
.seller-sidebar nav{display:grid;gap:7px;flex:1}.seller-sidebar>a:not(.seller-brand),.seller-nav-link{color:#dce9ff;text-decoration:none;padding:12px 14px;border-radius:10px;font-weight:700}.seller-nav-link:hover,.seller-nav-link.active{background:#ffffff1c;color:#fff;box-shadow:inset 3px 0 #58a8ff}
.seller-nav-menu{display:flex;flex:1;min-height:0;flex-direction:column}.seller-nav-menu summary{display:none}.seller-nav-menu:not([open])>nav{display:grid}.seller-sidebar-actions{display:grid;gap:7px}.seller-sidebar-actions a{color:#dce9ff;text-decoration:none;padding:12px 14px;border-radius:10px;font-weight:700}.seller-sidebar-actions a:hover{background:#ffffff1c;color:#fff}
.seller-main{min-width:0}.seller-top{min-height:90px;background:#fff;border-bottom:1px solid #dce6f4;padding:18px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px}.seller-top h1{margin:4px 0 0}.seller-top>div:last-child{display:grid;text-align:right;gap:4px}.seller-top span,.seller-top small{color:#71809b}.seller-content{padding:28px;display:grid;gap:22px}
.seller-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.seller-metrics article{background:#fff;border:1px solid #dbe7f6;border-radius:16px;padding:20px;box-shadow:0 10px 25px #1232600d}.seller-metrics span{display:block;color:#71809b;margin-bottom:10px}.seller-metrics b{font-size:25px;color:#0d3475}
.seller-alert{display:grid;gap:4px;padding:15px 18px;border:1px solid;border-radius:14px;background:#fff}.seller-alert b{font-size:15px}.seller-alert span{font-size:13px;line-height:1.45}.seller-alert.is-success{border-color:#b8e8cd;background:#effbf4;color:#126a3b}.seller-alert.is-warning{border-color:#f6d48a;background:#fff9e9;color:#875400}.seller-alert.is-danger{border-color:#ffc6cb;background:#fff1f2;color:#a51d2d}
.seller-price-form{display:grid;grid-template-columns:minmax(110px,1fr) auto;align-items:center;gap:6px 9px}.seller-price-form input{min-width:0}.seller-profit-preview{grid-column:1/-1;color:#60718c}.seller-profit-preview b{color:#0a8a4c}.seller-report-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.seller-report-filter .admin-form{align-items:end}.seller-order-filter{align-items:end;margin-bottom:16px}
.seller-brand-readonly{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#071a43,#1057be);box-shadow:0 14px 34px #123a7629}.seller-brand-identity{display:flex;align-items:center;gap:16px;min-width:0}.seller-brand-identity img{width:62px;height:62px;object-fit:cover;border-radius:14px;box-shadow:0 8px 22px #0004}.seller-brand-identity span{font-size:11px;font-weight:800;letter-spacing:.08em;color:#8dc4ff}.seller-brand-identity h2{margin:5px 0 3px;color:#fff}.seller-brand-identity p{margin:0;color:#d9e9ff}.seller-brand-lock{display:grid;gap:4px;max-width:300px;padding:13px 16px;border:1px solid #ffffff30;border-radius:12px;background:#ffffff12;text-decoration:none}.seller-brand-lock:hover{background:#ffffff1d}.seller-brand-lock b{color:#fff}.seller-brand-lock span{color:#d9e9ff;font-size:13px}
.seller-login-screen .login-card{border-top:5px solid #1677ff}.grid-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.grid-form button{align-self:end}

/* Mother admin: tenant directory and dedicated tenant workspace */
.tenant-directory-hero{overflow:hidden;background:linear-gradient(125deg,#eef7ff 0,#e2efff 60%,#d4e7ff 100%)}
.tenant-directory-stats,.tenant-manager-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tenant-directory-stats article,.tenant-manager-stats article{position:relative;overflow:hidden;display:grid;gap:7px;min-height:128px;padding:20px;border:1px solid #d7e5f6;border-radius:18px;background:#fff;box-shadow:0 12px 30px #143b700d}
.tenant-directory-stats article::after,.tenant-manager-stats article::after{content:"";position:absolute;right:-24px;top:-24px;width:86px;height:86px;border-radius:50%;background:#1677ff12}
.tenant-directory-stats span,.tenant-manager-stats span{color:#71809b;font-size:12px;font-weight:750}
.tenant-directory-stats b,.tenant-manager-stats b{color:#0a2a5d;font-size:27px;letter-spacing:-.03em}
.tenant-directory-stats small,.tenant-manager-stats small{color:#8a98ac;font-size:11px}
.tenant-manager-stats .is-balance{border-color:#bad9ff;background:linear-gradient(145deg,#edf7ff,#fff)}
.tenant-manager-stats .is-balance b{color:#0867dd}
.tenant-create-panel{padding:0!important;overflow:hidden}
.tenant-create-panel>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;cursor:pointer;list-style:none}
.tenant-create-panel>summary::-webkit-details-marker{display:none}
.tenant-create-panel>summary h3{margin:3px 0 4px}.tenant-create-panel>summary p{margin:0;color:#71809b}
.tenant-create-panel[open]>summary{border-bottom:1px solid #e2ebf6;background:#f8fbff}
.tenant-create-form{padding:22px}.tenant-directory-panel{overflow:hidden}.tenant-directory-panel .admin-section-head{margin-bottom:15px}
.tenant-directory-table .tenant-manage-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none}
.tenant-back-link{width:max-content;display:inline-flex;align-items:center;gap:7px;color:#2869bd;font-size:13px;font-weight:850;text-decoration:none}
.tenant-back-link:hover{color:#0b5fca}
.tenant-manager-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;padding:28px 30px;border:1px solid #b9d8ff;border-radius:24px;background:linear-gradient(125deg,#eef7ff 0,#e1efff 58%,#d7e9ff 100%);box-shadow:0 18px 48px #174b8d16}
.tenant-manager-hero::after{content:"";position:absolute;right:-100px;bottom:-190px;width:350px;height:350px;border:55px solid #4c9bff12;border-radius:50%}
.tenant-manager-brand,.tenant-manager-actions,.tenant-manager-meta{position:relative;z-index:1}
.tenant-manager-brand{display:flex;align-items:center;gap:17px;min-width:0}.tenant-manager-brand>img{width:70px;height:70px;flex:0 0 auto;object-fit:cover;border-radius:17px;box-shadow:0 10px 26px #0e37652c}
.tenant-manager-brand h1{margin:4px 0;color:#071f4c;font-size:31px;letter-spacing:-.03em}.tenant-manager-brand p{margin:0;color:#667a98}.tenant-manager-brand code{padding:3px 7px;border-radius:7px;background:#ffffff9c;color:#174b89}
.tenant-manager-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.tenant-manager-actions a{text-decoration:none}
.tenant-manager-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:16px;border-top:1px solid #bfd8f66b}.tenant-manager-meta>div{display:flex;flex-wrap:wrap;gap:7px}
.tenant-domain-badge,.tenant-seller-badge{display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;border:1px solid #c6ddf7;border-radius:9px;color:#2f5685;background:#ffffffa6;font-size:11px;font-weight:800}.tenant-seller-badge{border-color:#c8ead8;color:#197047;background:#f1fbf6}.tenant-domain-badge.is-empty,.tenant-seller-badge.is-empty{color:#8a98aa;border-style:dashed;background:transparent}
.tenant-manager-tabs{display:flex;gap:6px;overflow-x:auto;padding:7px;border:1px solid #d8e5f5;border-radius:15px;background:#fff;box-shadow:0 9px 26px #173b6b0c;scrollbar-width:thin}
.tenant-manager-tabs a{min-height:40px;display:inline-flex;align-items:center;justify-content:center;flex:1 0 auto;padding:9px 14px;border-radius:10px;color:#627591;font-size:12px;font-weight:850;text-decoration:none;white-space:nowrap}
.tenant-manager-tabs a:hover,.tenant-manager-tabs a:focus-visible{color:#0d66d8;background:#edf6ff;outline:none}
.tenant-manager-section{scroll-margin-top:100px;padding:25px;border:1px solid #d9e6f5;border-radius:21px;background:#fff;box-shadow:0 14px 36px #123b700c}
.tenant-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}.tenant-section-heading h2{margin:3px 0 5px;color:#092659;font-size:23px}.tenant-section-heading p{margin:0;color:#71809b}.tenant-section-count{flex:0 0 auto;padding:8px 11px;border-radius:10px;color:#176bd6;background:#edf6ff;font-size:11px;font-weight:850}
.tenant-balance-workspace{display:grid;grid-template-columns:minmax(340px,.85fr) minmax(360px,1.15fr);gap:20px}.tenant-balance-form{margin:0;padding:21px;border:1px solid #d9e7f7;border-radius:17px;background:#f8fbff}.tenant-balance-form button{min-height:46px}
.tenant-balance-summary{display:flex;flex-direction:column;padding:24px;border-radius:18px;color:#fff;background:linear-gradient(145deg,#071a43,#105fc9);box-shadow:0 15px 36px #0b34752b}.tenant-balance-summary>span{color:#86bfff;font-size:10px;font-weight:950;letter-spacing:.13em}.tenant-balance-summary>b{margin:8px 0 4px;font-size:34px}.tenant-balance-summary>p{margin:13px 0 5px;color:#cfe4ff;font-size:12px;font-weight:800}.tenant-balance-summary ul{display:grid;gap:0;margin:0;padding:0;list-style:none}.tenant-balance-summary li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #ffffff18}.tenant-balance-summary li>span{display:grid;gap:3px;min-width:0}.tenant-balance-summary li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:12px}.tenant-balance-summary li small{color:#9ec3f1;font-size:10px}.tenant-balance-summary li strong{flex:0 0 auto;font-size:12px}.tenant-balance-summary .is-positive{color:#63e6a4}.tenant-balance-summary .is-negative{color:#ff9eaa}.tenant-balance-summary li.is-empty{color:#bcd7fa}.tenant-balance-summary>a{margin-top:auto;padding-top:16px;color:#fff;font-size:12px;font-weight:850;text-decoration:none}
.tenant-manager-section .tenant-brand-editor{margin-top:0}.tenant-settings-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.tenant-settings-form fieldset{display:grid;align-content:start;gap:12px;min-width:0;margin:0;padding:18px;border:1px solid #dbe7f5;border-radius:16px;background:#f8fbff}.tenant-settings-form legend{padding:0 7px;color:#163f78;font-size:13px;font-weight:900}.tenant-settings-form small{color:#73839b}.tenant-settings-submit{grid-column:1/-1;justify-self:end;min-width:240px}
.tenant-access-card{position:relative;margin:0;padding:21px!important;border:1px solid #d9e7f7;border-radius:17px;background:#f8fbff}.tenant-access-card h3{margin:1px 0}.tenant-access-card p{margin:0 0 7px;color:#71809b}.tenant-card-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(145deg,#2586f8,#1261d1);box-shadow:0 8px 17px #176dd32e}
.tenant-product-table .tenant-pricing-form{min-width:390px}.tenant-ledger-table .is-positive{color:#0b8a4d}.tenant-ledger-table .is-negative{color:#c52b3d}

@media(max-width:1100px){.tenant-directory-stats,.tenant-manager-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.tenant-settings-form{grid-template-columns:repeat(2,minmax(0,1fr))}.tenant-settings-form fieldset:last-of-type{grid-column:1/-1}.tenant-balance-workspace{grid-template-columns:1fr}}
@media(max-width:760px){.tenant-create-panel>summary{align-items:flex-start}.tenant-create-panel>summary .btn-primary{padding:9px 11px;font-size:11px}.tenant-manager-hero{grid-template-columns:1fr;padding:21px 18px}.tenant-manager-actions{justify-content:flex-start;flex-wrap:wrap}.tenant-manager-meta{display:grid}.tenant-manager-brand>img{width:58px;height:58px}.tenant-manager-brand h1{font-size:25px}.tenant-manager-tabs{margin-inline:-2px}.tenant-manager-tabs a{flex:0 0 auto}.tenant-manager-section{padding:19px 14px}.tenant-section-heading{align-items:flex-start;flex-direction:column;margin-bottom:16px}.tenant-section-heading h2{font-size:20px}.tenant-settings-form{grid-template-columns:1fr}.tenant-settings-form fieldset:last-of-type{grid-column:auto}.tenant-settings-submit{width:100%;min-width:0}.tenant-brand-editor{grid-template-columns:1fr}.tenant-action-grid{grid-template-columns:1fr}.tenant-balance-summary{padding:20px}.admin-shell .tenant-directory-table,.admin-shell .tenant-product-table,.admin-shell .tenant-ledger-table{width:100%;min-width:0!important;border:0}.admin-shell .tenant-directory-table thead,.admin-shell .tenant-product-table thead,.admin-shell .tenant-ledger-table thead{display:none}.admin-shell .tenant-directory-table tbody,.admin-shell .tenant-directory-table tr,.admin-shell .tenant-directory-table td,.admin-shell .tenant-product-table tbody,.admin-shell .tenant-product-table tr,.admin-shell .tenant-product-table td,.admin-shell .tenant-ledger-table tbody,.admin-shell .tenant-ledger-table tr,.admin-shell .tenant-ledger-table td{display:block;width:100%}.admin-shell .tenant-directory-table tr,.admin-shell .tenant-product-table tr,.admin-shell .tenant-ledger-table tr{margin-bottom:12px;padding:8px 12px;border:1px solid #dbe7f6;border-radius:14px;background:#fff;box-shadow:0 7px 18px #1232600d}.admin-shell .tenant-directory-table td,.admin-shell .tenant-product-table td,.admin-shell .tenant-ledger-table td{min-height:40px;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:10px;padding:8px 0;border:0;border-bottom:1px solid #edf2f8;text-align:left}.admin-shell .tenant-directory-table td:last-child,.admin-shell .tenant-product-table td:last-child,.admin-shell .tenant-ledger-table td:last-child{border-bottom:0}.admin-shell .tenant-directory-table td::before,.admin-shell .tenant-product-table td::before,.admin-shell .tenant-ledger-table td::before{content:attr(data-label);color:#71809b;font-size:10px;font-weight:900;text-transform:uppercase}.tenant-product-table .tenant-pricing-form{min-width:0;display:grid!important;grid-template-columns:1fr}.tenant-manage-button{width:100%}}
@media(max-width:480px){.tenant-directory-stats,.tenant-manager-stats{grid-template-columns:1fr}.tenant-directory-stats article,.tenant-manager-stats article{min-height:105px}.tenant-create-panel>summary{display:grid}.tenant-manager-brand{align-items:flex-start}.tenant-manager-brand p{line-height:1.55}.tenant-manager-actions .btn-secondary{width:100%;justify-content:center}.tenant-balance-summary li{align-items:flex-start}.admin-shell .tenant-directory-table td,.admin-shell .tenant-product-table td,.admin-shell .tenant-ledger-table td{grid-template-columns:94px minmax(0,1fr)}}

/* Seller command center */
.seller-shell{background:radial-gradient(circle at 92% 0,#dbeaff 0,transparent 28%),linear-gradient(180deg,#f4f8fe 0,#edf4fc 100%)}
.seller-sidebar{overflow-y:auto;scrollbar-width:none;background:linear-gradient(180deg,#061839 0,#0a2c68 56%,#0e58bd 100%);box-shadow:14px 0 35px #0a2e6617;z-index:3}.seller-sidebar::-webkit-scrollbar{display:none}
.seller-brand{padding:3px 8px 22px}.seller-brand span{display:grid;gap:2px;min-width:0}.seller-brand small{color:#7db8ff;font-size:9px;font-weight:900;letter-spacing:.14em}.seller-brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:19px}
.seller-store-status{display:flex;align-items:center;gap:10px;margin:0 4px 10px;padding:12px;border:1px solid #ffffff1e;border-radius:13px;background:#ffffff0d}.seller-store-status>i{width:10px;height:10px;border-radius:50%;background:#38d77f;box-shadow:0 0 0 5px #38d77f20;flex:0 0 auto}.seller-store-status>span{display:grid;gap:3px}.seller-store-status b{font-size:12px;color:#fff}.seller-store-status small{font-size:10px;color:#9fbde9}
.seller-nav-link{position:relative;transition:.2s ease}.seller-nav-link:hover,.seller-nav-link.active{transform:translateX(2px);background:linear-gradient(90deg,#ffffff20,#ffffff0d);box-shadow:inset 3px 0 #55b1ff,0 7px 20px #00183d30}.seller-sidebar-actions{padding-top:12px;border-top:1px solid #ffffff18}.seller-sidebar-actions a{display:flex;justify-content:space-between;gap:12px}
.seller-top{position:sticky;top:0;z-index:2;min-height:96px;padding:17px 32px;background:#fffffff2;backdrop-filter:blur(14px);box-shadow:0 8px 28px #183d7010}.seller-top-title small{font-size:10px;font-weight:900;letter-spacing:.14em;color:#2574dd}.seller-top-title h1{font-size:27px;color:#071f4c}.seller-top-account{display:flex!important;align-items:center;gap:11px;text-align:left!important}.seller-top-balance{display:grid;gap:3px;margin-right:8px;padding:9px 14px;border:1px solid #cfe1fa;border-radius:12px;background:#f4f8ff}.seller-top-balance small{font-size:9px;font-weight:900;letter-spacing:.08em}.seller-top-balance b{font-size:17px;color:#1266d5}.seller-avatar{width:42px;height:42px;display:grid!important;place-items:center;border-radius:13px;color:#fff!important;font-weight:900;background:linear-gradient(145deg,#2788ff,#1158c5);box-shadow:0 8px 18px #176cd13b}.seller-account-copy{display:grid!important;gap:2px}.seller-account-copy b{font-size:13px}.seller-account-copy small{font-size:11px}.seller-content{max-width:1780px;width:100%;margin:0 auto;padding:30px 32px 42px;gap:24px}
.seller-dashboard-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.55fr);gap:34px;align-items:center;padding:38px 40px;border:1px solid #bcdcff;border-radius:25px;background:linear-gradient(125deg,#eef7ff 0,#e5f1ff 55%,#d8eaff 100%);box-shadow:0 22px 55px #174b8d17}.seller-dashboard-hero::after{content:"";position:absolute;right:-90px;bottom:-165px;width:330px;height:330px;border:54px solid #4c9bff12;border-radius:50%}.seller-dashboard-hero>div{position:relative;z-index:1}.seller-dashboard-eyebrow,.seller-section-heading>div>span,.seller-chart-panel header>div>span,.seller-recent-panel header>div>span,.seller-operation-panel>span{display:block;margin-bottom:8px;color:#1871e7;font-size:10px;font-weight:950;letter-spacing:.14em}.seller-dashboard-hero h2{max-width:760px;margin:0;color:#061d4a;font-size:38px;line-height:1.08;letter-spacing:-.035em}.seller-dashboard-hero p{max-width:720px;margin:15px 0 0;color:#617491;line-height:1.6}.seller-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.seller-hero-actions a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}.seller-hero-balance{display:grid;gap:6px;align-content:center;min-height:190px;padding:25px;border:1px solid #ffffffb8;border-radius:19px;background:#ffffffb5;box-shadow:0 14px 35px #1b64b21c;backdrop-filter:blur(9px)}.seller-hero-balance>span{color:#72839d;font-size:10px;font-weight:900;letter-spacing:.1em}.seller-hero-balance>b{color:#0b5fcf;font-size:35px;letter-spacing:-.03em}.seller-hero-balance>small{color:#71809b}.seller-hero-balance>a{margin-top:16px;color:#146bd8;font-size:12px;font-weight:850;text-decoration:none}
.seller-alert-stack{display:grid;gap:10px}.seller-alert{position:relative;padding-left:20px;box-shadow:0 8px 20px #1d3e6b0b}
.seller-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:2px}.seller-section-heading h2{margin:0;color:#071f4c;font-size:25px}.seller-section-heading p{margin:7px 0 0;color:#7a8ba4;font-size:12px}.seller-period-tabs{max-width:min(100%,850px);display:flex;gap:4px;overflow-x:auto;padding:5px;border:1px solid #d8e5f5;border-radius:13px;background:#fff;box-shadow:0 8px 24px #173b6b0c;scrollbar-width:none}.seller-period-tabs::-webkit-scrollbar{display:none}.seller-period-tabs a{min-width:76px;padding:9px 13px;border-radius:9px;color:#657793;font-size:12px;font-weight:850;text-align:center;text-decoration:none;white-space:nowrap}.seller-period-tabs a:hover{color:#1268d8;background:#f2f7ff}.seller-period-tabs a.active{color:#fff;background:linear-gradient(135deg,#2585f7,#1261d1);box-shadow:0 7px 16px #176dd33a}
.seller-dashboard-filter{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:15px 17px;border:1px solid #d7e6f7;border-radius:15px;background:#fff;box-shadow:0 9px 26px #173b6b0b}.seller-dashboard-filter label{display:grid;gap:6px;color:#304764;font-size:11px;font-weight:850}.seller-dashboard-filter input,.seller-dashboard-filter select{min-width:160px;padding:10px 12px;border:1px solid #cad9eb;border-radius:10px;color:#17355f;background:#f8fbff;font:inherit}.seller-report-actions{margin-top:-10px;padding:0 2px}.seller-dashboard-grid--single{grid-template-columns:1fr}.seller-dashboard-grid--single .seller-operation-list{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}.seller-daily-panel>header p{margin:5px 0 0;color:#8391a7;font-size:11px}.seller-daily-table-wrap{margin:0 15px 15px!important}.seller-daily-table-wrap .seller-dashboard-table{min-width:1220px}
.seller-finance-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.seller-finance-metrics article{position:relative;overflow:hidden;min-height:148px;padding:21px 22px;border:1px solid #d9e7f7;border-radius:18px;background:#fff;box-shadow:0 12px 30px #143b700e}.seller-finance-metrics article::after{content:"";position:absolute;right:-16px;top:-16px;width:72px;height:72px;border-radius:50%;background:var(--metric-color,#1677ff);opacity:.08}.seller-finance-metrics article>span{display:block;color:#71809b;font-size:12px;font-weight:750}.seller-finance-metrics article>b{display:block;margin:13px 0 12px;color:#092659;font-size:29px;letter-spacing:-.035em}.seller-finance-metrics article>small{display:inline-flex;padding:5px 8px;border-radius:8px;color:#71809b;background:#f3f6fa;font-size:10px;font-weight:800}.seller-finance-metrics article>small.is-up{color:#087744;background:#eaf9f1}.seller-finance-metrics article>small.is-down{color:#b12c3b;background:#fff0f2}.seller-finance-metrics .is-profit{--metric-color:#13a05f}.seller-finance-metrics .is-cost{--metric-color:#f59e0b}.seller-finance-metrics .is-margin{--metric-color:#8b5cf6}
.seller-chart-panel,.seller-recent-panel,.seller-operation-panel{border:1px solid #d9e6f5;border-radius:20px;background:#fff;box-shadow:0 14px 36px #123b700e}.seller-chart-panel{padding:24px}.seller-chart-panel>header,.seller-recent-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.seller-chart-panel h3,.seller-recent-panel h3,.seller-operation-panel h3{margin:0;color:#092659;font-size:19px}.seller-chart-panel header p{margin:6px 0 0;color:#8391a7;font-size:12px}.seller-chart-legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px;color:#64748b;font-size:11px;font-weight:800}.seller-chart-legend span{display:flex;align-items:center;gap:7px}.seller-chart-legend span::before{content:"";width:9px;height:9px;border-radius:50%;background:#1677ff}.seller-chart-legend .is-cost::before{background:#f59e0b}.seller-chart-legend .is-profit::before{background:#13a05f}.seller-chart-scroll-hint{display:none;margin:12px 0 0;color:#657793;font-size:11px;font-weight:800;text-align:center}.seller-chart-canvas{position:relative;overflow-x:auto;margin-top:12px;scrollbar-width:thin}.seller-chart-canvas:focus-visible{outline:3px solid #87bfff;outline-offset:4px;border-radius:8px}.seller-chart-canvas svg{display:block;width:100%;min-width:720px;height:auto;overflow:visible}.seller-chart-grid line{stroke:#e7eef7;stroke-width:1}.seller-chart-grid text{fill:#8a99af;font-size:10px;font-weight:650}.seller-chart-grid .seller-chart-zero{stroke:#b9c9dc;stroke-width:1.3;stroke-dasharray:5 5}.seller-chart-line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 4px 5px #1a5b9f1a)}.seller-chart-point{stroke:#fff;stroke-width:2}.seller-chart-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);min-width:310px;padding:11px 14px;border:1px solid #dce8f6;border-radius:11px;color:#71809b;background:#ffffffeb;text-align:center;font-size:11px;font-weight:700}
.seller-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.45fr);gap:18px;align-items:stretch}.seller-recent-panel{overflow:hidden}.seller-recent-panel>header{padding:22px 23px 14px}.seller-recent-panel>header>a{color:#176bd6;font-size:12px;font-weight:850;text-decoration:none}.seller-recent-panel .table-wrap{margin:0 15px 15px}.seller-dashboard-table b{color:#11814c}.seller-dashboard-table b.is-negative{color:#c52b3d}.seller-operation-panel{padding:23px}.seller-operation-list{display:grid;gap:3px;margin-top:16px}.seller-operation-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 2px;border-bottom:1px solid #edf2f8;color:#60718c;text-decoration:none}.seller-operation-list a:hover span{color:#126bd9}.seller-operation-list b{color:#102d5c}.seller-operation-total{display:grid;gap:5px;margin-top:18px;padding:16px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#0a2d68,#1471db)}.seller-operation-total span{font-size:11px;color:#bcd9ff}.seller-operation-total b{font-size:25px}.seller-operation-total small{color:#d7e9ff;line-height:1.45}.seller-permission-note{display:flex;align-items:center;gap:13px;padding:16px 18px;border:1px solid #cfe3fa;border-radius:15px;background:#f5faff}.seller-permission-note>div{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;color:#fff;background:#1677e9}.seller-permission-note p{margin:0;color:#637590;font-size:12px;line-height:1.55}.seller-permission-note b{color:#17355f}
.seller-settings-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.5fr);align-items:center;gap:28px;padding:34px 38px;border:1px solid #bfdcff;border-radius:24px;background:linear-gradient(125deg,#edf7ff,#dcecff);box-shadow:0 18px 45px #174b8d13}.seller-settings-hero::after{content:"";position:absolute;right:-90px;bottom:-145px;width:310px;height:310px;border:48px solid #378bff12;border-radius:50%}.seller-settings-hero-copy,.seller-settings-preview{position:relative;z-index:1}.seller-settings-hero-copy>span,.seller-settings-card>header>div>span{color:#1871e7;font-size:10px;font-weight:950;letter-spacing:.14em}.seller-settings-hero h2{margin:7px 0 10px;color:#071f4c;font-size:31px;letter-spacing:-.03em}.seller-settings-hero p{max-width:760px;margin:0;color:#617491;line-height:1.6}.seller-settings-preview{display:grid;grid-template-columns:58px minmax(0,1fr);gap:3px 14px;align-items:center;padding:18px;border:1px solid #ffffffc9;border-radius:17px;background:#ffffffbc;box-shadow:0 12px 30px #1b64b217}.seller-settings-preview img{grid-row:1/4;width:58px;height:58px;object-fit:cover;border-radius:13px}.seller-settings-preview>span{color:#7a8ba5;font-size:9px;font-weight:900;letter-spacing:.08em}.seller-settings-preview>strong{overflow:hidden;color:#0a2e66;font-size:17px;text-overflow:ellipsis;white-space:nowrap}.seller-settings-preview>a{color:#176bd6;font-size:11px;font-weight:850;text-decoration:none}.seller-settings-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.seller-settings-card{padding:23px;border:1px solid #d8e6f6;border-radius:20px;background:#fff;box-shadow:0 13px 34px #123b700d}.seller-settings-card--brand{grid-column:1/-1}.seller-settings-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #e9f0f8}.seller-settings-card>header>div{display:flex;align-items:center;gap:9px}.seller-settings-card h3{margin:0;color:#092659;font-size:19px}.seller-settings-card>header p{max-width:470px;margin:0;color:#7a8ba4;font-size:12px;line-height:1.5;text-align:right}.seller-settings-brand-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px}.seller-settings-logo-preview{min-height:210px;display:grid;place-items:center;align-content:center;gap:14px;padding:22px;border:1px dashed #bfd6f1;border-radius:16px;background:linear-gradient(145deg,#f5faff,#e9f3ff);color:#70819b;font-size:11px;font-weight:800;text-align:center}.seller-settings-logo-preview img{width:96px;height:96px;object-fit:cover;border-radius:21px;box-shadow:0 12px 28px #15427f28}.seller-settings-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.seller-settings-fields--two{grid-template-columns:repeat(2,minmax(0,1fr))}.seller-settings-fields label{display:grid;align-content:start;gap:7px;color:#233a5d;font-size:12px;font-weight:850}.seller-settings-fields input,.seller-settings-fields select,.seller-settings-fields textarea{width:100%;min-width:0;padding:12px 13px;border:1px solid #cad9eb;border-radius:11px;color:#122a52;background:#f9fbfe;font:inherit;font-weight:650}.seller-settings-fields input:focus,.seller-settings-fields select:focus,.seller-settings-fields textarea:focus{outline:3px solid #89bdff52;border-color:#4c9dff;background:#fff}.seller-settings-fields textarea{resize:vertical;line-height:1.55}.seller-settings-fields .wide-field{grid-column:1/-1}.seller-settings-fields small{grid-column:1/-1;color:#7789a3;font-size:11px;line-height:1.5}.seller-settings-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 22px;border:1px solid #cfe3fa;border-radius:17px;background:#f5faff}.seller-settings-actions>div{display:grid;gap:4px}.seller-settings-actions b{color:#153b70}.seller-settings-actions span{color:#6b7e99;font-size:12px;line-height:1.5}.seller-settings-actions button{min-width:230px;min-height:46px}
.seller-content,.seller-dashboard-grid,.seller-chart-panel,.seller-recent-panel,.seller-operation-panel{min-width:0}.seller-chart-canvas{max-width:100%}.seller-recent-panel .table-wrap{max-width:100%;overflow-x:auto}
@media(max-width:1280px){.seller-finance-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.seller-dashboard-grid{grid-template-columns:1fr}.seller-operation-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}
@media(max-width:720px){.seller-store-status{display:none}.seller-top{position:static;flex-wrap:wrap;padding:14px}.seller-top-account{width:100%;justify-content:space-between}.seller-top-balance{margin:0;flex:1}.seller-account-copy{display:none!important}.seller-content{padding:12px 10px 28px;gap:16px}.seller-dashboard-hero{grid-template-columns:1fr;padding:24px 20px;gap:20px;border-radius:19px}.seller-dashboard-hero h2{font-size:29px}.seller-dashboard-hero br{display:none}.seller-hero-actions{display:grid;grid-template-columns:1fr}.seller-hero-actions a{justify-content:center}.seller-hero-balance{min-height:0;padding:18px}.seller-section-heading{align-items:stretch;flex-direction:column}.seller-period-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.seller-period-tabs a{min-width:0}.seller-chart-panel{padding:17px 12px}.seller-chart-panel>header{display:grid;gap:12px}.seller-chart-legend{justify-content:flex-start}.seller-chart-scroll-hint{display:block}.seller-operation-list{grid-template-columns:1fr}}
@media(max-width:1000px){.seller-shell{grid-template-columns:1fr}.seller-sidebar{position:static;height:auto;min-height:0;padding:14px 18px}.seller-nav-menu{flex:none}.seller-nav-menu summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border:1px solid #ffffff2e;border-radius:10px;color:#fff;font-weight:800;cursor:pointer}.seller-nav-menu:not([open])>nav{display:none}.seller-nav-menu[open]>nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}.seller-sidebar-actions{grid-template-columns:1fr 1fr}.seller-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.tenant-action-grid,.tenant-brand-editor{grid-template-columns:1fr}.grid-form{grid-template-columns:repeat(2,minmax(0,1fr))}.seller-settings-hero,.seller-settings-form{grid-template-columns:1fr}.seller-settings-card--brand,.seller-settings-actions{grid-column:auto}}
@media(max-width:640px){.seller-brand{padding-bottom:12px}.seller-store-status{display:none}.seller-nav-menu[open]>nav{grid-template-columns:1fr 1fr}.seller-top{position:static;padding:14px;align-items:flex-start;flex-wrap:wrap}.seller-top-title h1{font-size:23px}.seller-top-account{width:100%;justify-content:space-between}.seller-top-balance{margin:0;flex:1}.seller-account-copy{display:none!important}.seller-content{padding:12px 10px 28px;gap:16px}.seller-dashboard-hero{grid-template-columns:1fr;padding:24px 20px;gap:20px;border-radius:19px}.seller-dashboard-hero h2{font-size:29px}.seller-dashboard-hero br{display:none}.seller-hero-actions{display:grid;grid-template-columns:1fr}.seller-hero-actions a{justify-content:center}.seller-hero-balance{min-height:0;padding:18px}.seller-hero-balance>b{font-size:29px}.seller-section-heading{align-items:stretch;flex-direction:column}.seller-section-heading h2{font-size:21px}.seller-period-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.seller-period-tabs a{min-width:0;padding-inline:8px}.seller-finance-metrics{grid-template-columns:1fr 1fr;gap:9px}.seller-finance-metrics article{min-height:126px;padding:15px}.seller-finance-metrics article>b{font-size:21px}.seller-chart-panel{padding:17px 12px}.seller-chart-panel>header{display:grid;gap:12px}.seller-chart-legend{justify-content:flex-start}.seller-chart-canvas{margin-inline:-4px}.seller-dashboard-grid{gap:13px}.seller-recent-panel>header{padding:18px 15px 10px}.seller-operation-panel{padding:18px}.seller-operation-list{grid-template-columns:1fr}.seller-permission-note{align-items:flex-start}.seller-metrics,.seller-report-metrics{grid-template-columns:1fr 1fr;gap:10px}.seller-metrics article{padding:14px}.seller-metrics b{font-size:20px}.grid-form{grid-template-columns:1fr}.tenant-brand-editor{padding:10px}.tenant-brand-preview{min-height:190px;padding:18px}.seller-brand-readonly{align-items:flex-start;flex-direction:column;padding:18px}.seller-brand-lock{max-width:none;width:100%}.seller-settings-hero{padding:24px 19px;border-radius:19px}.seller-settings-hero h2{font-size:26px}.seller-settings-preview{grid-template-columns:50px minmax(0,1fr)}.seller-settings-preview img{width:50px;height:50px}.seller-settings-card{padding:18px 15px}.seller-settings-card>header{display:grid;gap:8px}.seller-settings-card>header p{text-align:left}.seller-settings-brand-grid,.seller-settings-fields,.seller-settings-fields--two{grid-template-columns:1fr}.seller-settings-logo-preview{min-height:165px}.seller-settings-fields .wide-field{grid-column:auto}.seller-settings-actions{align-items:stretch;flex-direction:column}.seller-settings-actions button{width:100%;min-width:0}.seller-shell .mobile-card-table{width:100%;min-width:0!important;border:0}.seller-shell .mobile-card-table thead{display:none}.seller-shell .mobile-card-table tbody,.seller-shell .mobile-card-table tr,.seller-shell .mobile-card-table td{display:block;width:100%}.seller-shell .mobile-card-table tr{margin-bottom:12px;padding:8px 12px;border:1px solid #dbe7f6;border-radius:14px;background:#fff;box-shadow:0 7px 18px #1232600d}.seller-shell .mobile-card-table td{min-height:40px;display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:10px;padding:8px 0;border:0;border-bottom:1px solid #edf2f8;text-align:left}.seller-shell .mobile-card-table td:last-child{border-bottom:0}.seller-shell .mobile-card-table td::before{content:attr(data-label);color:#71809b;font-size:11px;font-weight:900;text-transform:uppercase}.seller-product-table-wrap,.seller-shell .table-wrap{overflow:visible}.seller-price-form{grid-template-columns:1fr}.seller-price-form .seller-profit-preview{grid-column:auto}.seller-price-form button,.seller-price-form input{width:100%;min-height:44px}.seller-order-filter,.seller-report-filter .admin-form{display:grid;grid-template-columns:1fr}.seller-sidebar-actions a{min-height:42px;display:flex;align-items:center;justify-content:center;padding:8px}.tenant-pricing-form{display:grid!important;grid-template-columns:1fr}}
@media(max-width:430px){.seller-finance-metrics{grid-template-columns:1fr}.seller-dashboard-hero h2{font-size:26px}.seller-top-balance b{font-size:15px}}
@media(max-width:700px){
  .dashboard-report-actions,.seller-report-actions{align-items:stretch;flex-direction:column}.dashboard-report-actions>a,.seller-report-actions>a{justify-content:center;width:100%}
  .dashboard-daily-table-wrap{max-height:none;overflow:visible;border:0}.admin-shell .dashboard-detail-table{width:100%;min-width:0!important;border:0}.admin-shell .dashboard-detail-table thead{display:none}.admin-shell .dashboard-detail-table tbody,.admin-shell .dashboard-detail-table tr,.admin-shell .dashboard-detail-table td{display:block;width:100%}.admin-shell .dashboard-detail-table tr{margin-bottom:12px;padding:8px 12px;border:1px solid #dbe7f6;border-radius:14px;background:#fff;box-shadow:0 7px 18px #1232600d}.admin-shell .dashboard-detail-table td{min-height:40px;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:10px;padding:8px 0;border:0;border-bottom:1px solid #edf2f8;text-align:left}.admin-shell .dashboard-detail-table td:last-child{border-bottom:0}.admin-shell .dashboard-detail-table td::before{content:attr(data-label);color:#71809b;font-size:10px;font-weight:900;text-transform:uppercase}
  .seller-dashboard-filter{display:grid;grid-template-columns:1fr}.seller-dashboard-filter input,.seller-dashboard-filter select{width:100%;min-width:0}.seller-dashboard-grid--single .seller-operation-list{grid-template-columns:1fr}.seller-daily-table-wrap{max-height:none;overflow:visible;border:0}.seller-daily-table-wrap .seller-dashboard-table{min-width:0}
}
/* Profit sharing ledger */
.profit-share-scope-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px;
  margin: 0 0 20px;
  border: 1px solid #d9e6f8;
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  scrollbar-width: none;
}
.profit-share-scope-tabs::-webkit-scrollbar { display: none; }
.profit-share-scope-tabs a {
  flex: 0 0 auto;
  padding: 11px 16px;
  border-radius: 12px;
  color: #53657f;
  font-weight: 800;
  text-decoration: none;
}
.profit-share-scope-tabs a.active {
  color: #fff;
  background: linear-gradient(135deg, #1478ff, #1458c8);
  box-shadow: 0 10px 24px rgba(20, 103, 220, .24);
}
.profit-share-page-head,
.profit-share-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
  margin-bottom: 20px;
  border: 1px solid #cfe0f7;
  border-radius: 24px;
  background: linear-gradient(135deg, #f9fcff 0%, #eaf4ff 58%, #dcecff 100%);
  box-shadow: 0 18px 45px rgba(31, 70, 120, .09);
}
.profit-share-page-head h1,
.profit-share-hero h2 { margin: 5px 0 8px; color: #092652; }
.profit-share-page-head p,
.profit-share-hero p { margin: 0; color: #657892; }
.profit-share-scope-badge {
  flex: 0 0 auto;
  padding: 11px 16px;
  border: 1px solid #b9d7ff;
  border-radius: 999px;
  color: #1261cc;
  background: rgba(255, 255, 255, .8);
  font-weight: 900;
}
.profit-share-notice,
.profit-share-blocker,
.profit-share-ready {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 15px 18px;
  border-radius: 14px;
}
.profit-share-notice,
.profit-share-blocker { color: #9b4c00; background: #fff4dc; border: 1px solid #ffd585; }
.profit-share-notice { margin-bottom: 18px; }
.profit-share-ready { color: #08724b; background: #eafaf3; border: 1px solid #aee8d1; }
.profit-share-ratio {
  padding: 10px 15px;
  border-radius: 999px;
  font-weight: 900;
}
.profit-share-ratio.is-complete { color: #08724b; background: #e5f8ef; }
.profit-share-ratio.is-warning { color: #a05900; background: #fff1d4; }
.profit-share-preview {
  margin-bottom: 20px;
  overflow: hidden;
  border-color: #bfd8fb;
  background: linear-gradient(145deg, #fff 0%, #f5faff 55%, #eaf4ff 100%);
  box-shadow: 0 18px 42px rgba(25, 79, 151, .09);
}
.profit-share-preview .admin-section-head { align-items: center; }
.profit-share-preview-total {
  flex: 0 0 auto;
  min-width: 245px;
  padding: 16px 20px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #07306d, #1269d8);
  box-shadow: 0 14px 28px rgba(8, 59, 132, .2);
}
.profit-share-preview-total small,
.profit-share-preview-total b { display: block; }
.profit-share-preview-total small { font-size: 11px; font-weight: 900; opacity: .76; letter-spacing: .07em; }
.profit-share-preview-total b { margin-top: 4px; font-size: clamp(26px, 3vw, 38px); }
.profit-share-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 12px;
}
.profit-share-preview-stats span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #d7e5f7;
  border-radius: 13px;
  color: #64758d;
  background: rgba(255, 255, 255, .78);
}
.profit-share-preview-stats b { color: #12335f; }
.profit-share-preview-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.profit-share-preview-member {
  padding: 17px 18px;
  border: 1px solid #cfe1f8;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(28, 72, 129, .06);
}
.profit-share-preview-member span,
.profit-share-preview-member b,
.profit-share-preview-member small { display: block; }
.profit-share-preview-member span { color: #5c708d; font-weight: 800; }
.profit-share-preview-member b { margin: 5px 0 2px; color: #0b62ce; font-size: 27px; }
.profit-share-preview-member small { color: #8290a5; }
.profit-share-preview-example {
  padding: 12px 15px;
  border-radius: 12px;
  color: #684600;
  background: #fff7dc;
  font-weight: 800;
}
.profit-share-preview-action {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.profit-share-reset-note { margin: 13px 0 0; color: #657892; }
.profit-share-preview.is-caught-up {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.profit-share-mark-paid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
  min-width: min(680px, 65vw);
}
.profit-share-mark-paid label { display: grid; gap: 6px; color: #314865; font-weight: 800; }
.profit-share-mark-paid input { min-height: 43px; }
.profit-share-mark-paid button { grid-column: 1 / -1; }
.profit-share-add,
.profit-share-edit,
.profit-share-transfer-form { margin-top: 14px; }
.profit-share-add > summary,
.profit-share-edit > summary,
.profit-share-transfer-form > summary {
  cursor: pointer;
  color: #176dd9;
  font-weight: 800;
}
.profit-share-edit .admin-form,
.profit-share-transfer-form .admin-form {
  min-width: min(520px, 72vw);
  padding: 14px;
  margin-top: 10px;
  border: 1px solid #d8e5f6;
  border-radius: 14px;
  background: #f7faff;
}
.profit-share-period-form { margin: 16px 0 20px; }
.profit-share-periods tr.is-selected { background: #edf6ff; }
.profit-share-periods td a { color: #0b58bd; text-decoration: none; }
.profit-share-hero-profit {
  min-width: 250px;
  padding: 18px 20px;
  border-radius: 18px;
  background: #08285d;
  color: #fff;
}
.profit-share-hero-profit span,
.profit-share-hero-profit small { display: block; opacity: .75; }
.profit-share-hero-profit b { display: block; margin: 4px 0; font-size: clamp(28px, 3vw, 42px); }
.profit-share-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profit-share-lock-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.profit-share-empty { text-align: center; padding: 48px 24px; }
.profit-share-empty .admin-form { justify-content: center; margin-top: 18px; }

@media (max-width: 900px) {
  .profit-share-page-head,
  .profit-share-hero,
  .profit-share-lock-panel { align-items: stretch; flex-direction: column; }
  .profit-share-preview .admin-section-head,
  .profit-share-preview.is-caught-up { align-items: stretch; flex-direction: column; }
  .profit-share-preview-total { min-width: 0; }
  .profit-share-preview-stats { grid-template-columns: 1fr; }
  .profit-share-mark-paid { grid-template-columns: 1fr; min-width: 0; width: 100%; }
  .profit-share-mark-paid button { grid-column: auto; }
  .profit-share-hero-profit { min-width: 0; }
  .profit-share-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profit-share-edit .admin-form,
  .profit-share-transfer-form .admin-form { min-width: 0; width: 100%; }
}