:root {
  color-scheme: light;
  --bg: #08111a;
  --panel: rgba(17, 28, 41, 0.82);
  --panel-strong: #122131;
  --ink: #f2f7fb;
  --muted: #8fa5b8;
  --line: rgba(160, 188, 208, 0.14);
  --brand: #2e8b57;
  --brand-dark: #79d9a4;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  --sidebar-bg: rgba(10, 18, 28, 0.9);
  --sidebar-panel: rgba(255, 255, 255, 0.03);
  --sidebar-line: rgba(143, 163, 184, 0.12);
  --sidebar-text: #f4f8fb;
  --sidebar-muted: #95a8b8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at 10% 18%, rgba(67, 160, 120, 0.18), transparent 22%),
    radial-gradient(circle at 85% 12%, rgba(54, 112, 146, 0.16), transparent 18%),
    linear-gradient(180deg, #09121b 0%, #071019 100%);
  color: var(--ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.auth-page {
  min-height: 100vh;
  display: block;
}
a { color: inherit; text-decoration: none; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 244px 1fr; }
.shell-auth { grid-template-columns: 1fr; }
.sidebar {
  background:
    radial-gradient(circle at 18% 82%, rgba(118, 216, 167, 0.18), transparent 28%),
    radial-gradient(circle at 55% 70%, rgba(61, 125, 160, 0.16), transparent 24%),
    var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 18px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid rgba(160, 188, 208, 0.08);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.02);
}
.brand-title, h1, h2, h3 { margin: 0; }
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 8px;
}
.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(121, 217, 164, 0.22), rgba(46, 139, 87, 0.12));
  color: #dffceb;
  font-weight: 800;
  border: 1px solid rgba(121, 217, 164, 0.18);
  box-shadow: 0 12px 28px rgba(12, 36, 29, 0.35);
}
.brand-copy {
  min-width: 0;
}
.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
}
.sidebar .eyebrow {
  color: #84d8a9;
  margin-bottom: 4px;
}
.brand-title {
  color: #fff;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: 0;
}
.sidebar-nav {
  padding: 2px 4px 0;
}
.nav-links {
  display: grid;
  gap: 8px;
}
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--sidebar-muted);
  font-weight: 700;
  border: 1px solid transparent;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  font-size: 14px;
  background: transparent;
}
.nav-link span:last-child {
  flex: 1;
}
.nav-link__icon {
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b9d1c1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 5px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.nav-link__icon svg {
  width: 13px;
  height: 13px;
  display: block;
  stroke: currentColor;
  fill: none;
}
.nav-link::after {
  content: ">";
  color: #506474;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.82;
}
.nav-link:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-color: rgba(255,255,255,0.04);
  transform: translateX(1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.nav-link.is-active {
  background: linear-gradient(180deg, #4aa96d, #3f9562);
  color: #fff;
  border-color: rgba(121, 217, 164, 0.28);
  box-shadow: 0 12px 22px rgba(27, 87, 58, 0.24);
}
.nav-link.is-active .nav-link__icon {
  color: #ffffff;
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.08);
}
.nav-link.is-active::after {
  color: rgba(255,255,255,0.78);
}
.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 12px;
  padding: 16px 12px 4px;
  border-top: 1px solid var(--sidebar-line);
  color: var(--sidebar-muted);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-user p {
  margin: 0 0 4px;
  color: #fff;
  font-weight: 700;
}
.user-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 800;
}
.role-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(46, 139, 87, 0.12);
  color: #9be6ba;
  font-size: 11px;
  font-weight: 700;
}
.content { padding: 24px; }
.content-shell {
  width: min(1320px, 100%);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.topbar-search {
  flex: 1;
  min-width: 260px;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(143, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(19, 33, 47, 0.78);
  backdrop-filter: blur(16px);
}
.topbar-search__icon {
  color: #83a0b2;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar-search__icon svg {
  width: 13px;
  height: 13px;
  display: block;
  stroke: currentColor;
  fill: none;
}
.topbar-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #dce8f1;
  font: inherit;
}
.topbar-search input::placeholder {
  color: #7d93a4;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.topbar-link,
.topbar-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(121, 217, 164, 0.18);
  background: rgba(121, 217, 164, 0.12);
  color: #ddfdeb;
  font-size: 13px;
  font-weight: 700;
}
.topbar-link {
  background: rgba(19, 33, 47, 0.72);
  border: 1px solid rgba(143, 163, 184, 0.14);
  color: #d5e6f2;
}
.topbar-actions .topbar-logout {
  background: linear-gradient(180deg, rgba(205, 74, 74, 0.94), rgba(170, 45, 45, 0.92));
  border-color: rgba(239, 128, 128, 0.2);
  color: #fff4f4;
  box-shadow: 0 12px 22px rgba(121, 26, 26, 0.24);
}
.topbar-actions .topbar-logout:hover {
  background: linear-gradient(180deg, rgba(221, 86, 86, 0.96), rgba(184, 51, 51, 0.94));
  color: #ffffff;
}
.topbar-link svg,
.topbar-logout svg {
  width: 13px;
  height: 13px;
  display: block;
  flex: 0 0 auto;
}
.auth-page .content {
  padding: 0;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.page-hero {
  padding: 2px 0 0;
}
.page-header h2 {
  margin: 0;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.page-summary {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}
.dashboard-header {
  padding: 0;
}
.dashboard-header__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-header__copy {
  display: grid;
  gap: 2px;
}

.dashboard-header__subtitle {
  margin: 0;
  color: #64788b;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
}

.dashboard-header--minimal {
  margin-bottom: 12px;
  padding: 0;
  align-items: center;
}

.dashboard-header--minimal .dashboard-header__copy {
  gap: 2px;
}

.dashboard-header--minimal h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.dashboard-header--minimal .dashboard-header__meta {
  gap: 8px;
}

.dashboard-header--minimal .calendar-pill {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
}

.dashboard-header--minimal .secondary-btn {
  padding: 10px 14px;
  font-size: 13px;
}
.calendar-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(143, 163, 184, 0.12);
  background: rgba(16, 28, 40, 0.78);
  color: #deebf5;
  font-weight: 700;
  font-size: 12px;
}
.dashboard-grid {
  display: grid;
  gap: 20px;
  align-items: start;
}
.dashboard-grid--seller {
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr) minmax(260px, 0.9fr);
}
.dashboard-grid--admin {
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr) minmax(260px, 0.9fr);
}
.form-spotlight-panel {
  background:
    radial-gradient(circle at 12% 12%, rgba(121, 217, 164, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(14, 25, 36, 0.94);
}
.table-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(143, 163, 184, 0.1);
  color: #465d71;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dashboard-chart-panel {
  min-height: 100%;
}
.dashboard-section-gap {
  margin-top: 20px;
}
.sales-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  min-height: 290px;
  margin-top: 6px;
}
.sales-bars__item {
  display: grid;
  gap: 10px;
  align-items: end;
  min-width: 0;
}
.sales-bars__value {
  color: #c8d8e5;
  font-size: 11px;
  text-align: center;
}
.sales-bars__bar-wrap {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 14px 0 0;
  border-radius: 20px 20px 10px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(143, 163, 184, 0.08);
  overflow: hidden;
}
.sales-bars__bar {
  width: 100%;
  max-width: 54px;
  border-radius: 16px 16px 8px 8px;
  background: linear-gradient(180deg, rgba(123, 227, 169, 0.98), rgba(46, 139, 87, 0.88));
  box-shadow: 0 18px 28px rgba(25, 87, 57, 0.28);
}
.sales-bars__bar--violet {
  background: linear-gradient(180deg, rgba(178, 156, 255, 0.96), rgba(108, 92, 231, 0.88));
  box-shadow: 0 18px 28px rgba(55, 44, 128, 0.28);
}
.sales-bars__label {
  color: #8fa5b8;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
.dashboard-note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(143, 163, 184, 0.12);
  background: rgba(255,255,255,0.03);
  color: #476072;
}
.dashboard-note--success {
  border-color: #cfe8d9;
  background: #edf8f1;
  color: #1f7d52;
  font-weight: 700;
}
.dashboard-list {
  display: grid;
  gap: 12px;
}
.dashboard-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(143, 163, 184, 0.08);
  background: rgba(255,255,255,0.03);
}
.dashboard-list__row strong {
  display: block;
  color: #f7fbff;
  margin-bottom: 4px;
}
.dashboard-list__row small {
  color: #8fa5b8;
  margin: 0;
}
.dashboard-list__meta {
  color: #e8f3fb;
  font-weight: 800;
  white-space: nowrap;
}
.money-panel__stack,
.summary-panel__stack {
  display: grid;
  gap: 14px;
}
.money-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(143, 163, 184, 0.08);
  background: rgba(255,255,255,0.03);
}
.money-line span {
  color: #93a8b8;
}
.money-line strong {
  color: #f7fbff;
  font-size: 20px;
}
.money-line--green strong {
  color: #b6f2cf;
}
.money-line--red strong {
  color: #ffb7b7;
}
.summary-panel__stack p {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(143, 163, 184, 0.08);
  background: rgba(255,255,255,0.03);
  color: #dbe9f3;
}
.summary-panel__stack strong {
  color: #ffffff;
}
.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)),
    rgba(16, 28, 40, 0.9);
  border: 1px solid rgba(143, 163, 184, 0.1);
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.panel-spotlight {
  animation: panelSpotlight 1.6s ease;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.grid-2 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.seller-products-edit-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
.seller-products-list-panel {
  min-width: 0;
}
.seller-product-panel {
  display: grid;
  gap: 22px;
}
.seller-product-panel__form {
  display: grid;
  gap: 14px;
  padding-bottom: 4px;
}
.stats-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 24px;
}
.compact-stats .stat-card {
  padding: 16px 18px 15px;
}
.compact-stats .stat-card strong {
  font-size: 22px;
  margin-top: 8px;
}
.stat-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    rgba(22, 35, 48, 0.82);
  border: 1px solid rgba(143, 163, 184, 0.09);
  border-radius: 8px;
  padding: 18px 18px 16px;
  box-shadow: 0 16px 28px rgba(3, 10, 18, 0.18);
  overflow: hidden;
}
.stat-card--blue {
  border-color: rgba(103, 198, 255, 0.16);
}
.stat-card--green {
  border-color: rgba(121, 217, 164, 0.16);
}
.stat-card--violet {
  border-color: rgba(155, 141, 255, 0.16);
}
.stat-card--amber {
  border-color: rgba(242, 211, 109, 0.16);
}
.stat-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.stat-card__icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.05);
}
.stat-card__icon svg {
  width: 13px;
  height: 13px;
  display: block;
  stroke: currentColor;
  fill: none;
}
.stat-card--blue .stat-card__icon {
  color: #b9dcff;
  background: rgba(74, 139, 255, 0.14);
}
.stat-card--green .stat-card__icon {
  color: #baf1d1;
  background: rgba(46, 139, 87, 0.16);
}
.stat-card--violet .stat-card__icon {
  color: #d7d0ff;
  background: rgba(124, 109, 255, 0.14);
}
.stat-card--amber .stat-card__icon {
  color: #ffe2a5;
  background: rgba(216, 154, 39, 0.16);
}
.stat-card--blue strong {
  color: #a9d4ff;
}
.stat-card--green strong {
  color: #b2f1cd;
}
.stat-card--violet strong {
  color: #d0c7ff;
}
.stat-card--amber strong {
  color: #ffe0a0;
}
.stat-card--blue .stat-label,
.stat-card--blue small {
  color: #c0dcf5;
}
.stat-card--green .stat-label,
.stat-card--green small {
  color: #c6ead6;
}
.stat-card--violet .stat-label,
.stat-card--violet small {
  color: #d7d0f6;
}
.stat-card--amber .stat-label,
.stat-card--amber small {
  color: #f1dfb8;
}
.stat-card span, .muted, small { color: var(--muted); }
.stat-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stat-card strong {
  display: block;
  margin-top: 12px;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.stat-card small {
  display: block;
  margin-top: 10px;
  line-height: 1.45;
}
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(15, 25, 37, 0.52);
  border: 1px solid rgba(143, 163, 184, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.table th, .table td {
  padding: 16px 14px;
  border-bottom: 1px solid rgba(160, 188, 208, 0.1);
  text-align: left;
  vertical-align: top;
}
.table th {
  font-size: 12px;
  color: #85a0b5;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.02);
}
.table tbody tr:hover {
  background: rgba(255,255,255,0.025);
}
.table tbody tr td:first-child,
.table thead tr th:first-child {
  padding-left: 0;
}
.table tbody tr td:last-child,
.table thead tr th:last-child {
  padding-right: 0;
}
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.filter-chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(143, 163, 184, 0.12);
  background: rgba(14, 24, 35, 0.82);
  color: #b8c9d7;
  font-weight: 700;
  cursor: pointer;
}
.filter-chip.is-active {
  background: linear-gradient(180deg, rgba(76, 180, 125, 0.3), rgba(63, 149, 98, 0.22));
  color: #defcea;
  border-color: rgba(121, 217, 164, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.products-layout {
  grid-template-columns: 320px minmax(0, 1fr);
}
.review-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  align-items: start;
}
.review-gallery {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.review-gallery__item {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(143, 163, 184, 0.1);
  background: rgba(255,255,255,0.03);
  aspect-ratio: 1 / 1;
}
.review-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.review-gallery__empty {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px dashed rgba(143, 163, 184, 0.2);
  color: var(--muted);
  background: rgba(255,255,255,0.02);
}
.review-meta {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
.review-meta__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.review-seller,
.review-status-card {
  display: grid;
  gap: 14px;
}
.review-status-card {
  margin-top: 18px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(143, 163, 184, 0.08);
  background: rgba(255,255,255,0.03);
}
.existing-media {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(143, 163, 184, 0.08);
  background: rgba(255,255,255,0.03);
}
.existing-media__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.existing-media__item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(143, 163, 184, 0.08);
  background: rgba(255,255,255,0.02);
}
.existing-media__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.submission-mode {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(143, 163, 184, 0.1);
  background: rgba(255,255,255,0.03);
}
.submission-mode__head {
  display: flex;
  align-items: center;
}
.submission-mode__label {
  color: #f4f8fb;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.submission-mode__options {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.submission-option {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(143, 163, 184, 0.12);
  background: rgba(17, 28, 41, 0.62);
  color: #dfeaf2;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.submission-option:hover {
  border-color: rgba(121, 217, 164, 0.22);
  background: rgba(21, 36, 51, 0.82);
  transform: translateY(-1px);
}
.submission-option.is-active {
  border-color: rgba(121, 217, 164, 0.34);
  background: linear-gradient(180deg, rgba(63, 149, 98, 0.22), rgba(17, 28, 41, 0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 26px rgba(8, 20, 14, 0.18);
}
.submission-option__icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  color: #b7d1c0;
}
.submission-option.is-active .submission-option__icon {
  background: rgba(121, 217, 164, 0.16);
  border-color: rgba(121, 217, 164, 0.18);
  color: #ecfff5;
}
.submission-option__icon svg {
  width: 15px;
  height: 15px;
  display: block;
}
.submission-option__content {
  display: grid;
  gap: 4px;
}
.submission-option__content strong {
  color: #f6fbff;
  font-size: 14px;
  line-height: 1.2;
}
.submission-option__content small {
  margin-top: 0;
  color: #91a8b8;
  line-height: 1.35;
}
.product-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bulk-import-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid rgba(143, 163, 184, 0.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)),
    rgba(11, 20, 30, 0.46);
}
.bulk-import-card__head {
  margin-bottom: 0;
  align-items: start;
}
.bulk-import-card__links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bulk-import-card__body {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1fr);
  align-items: start;
}
.bulk-import-card__hint {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(121, 217, 164, 0.12);
  background: rgba(121, 217, 164, 0.06);
}
.bulk-import-card__hint p {
  margin: 0;
  color: #c3d4df;
  line-height: 1.55;
}
.bulk-import-card__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(242, 211, 109, 0.16);
  color: #ffe3a0;
  font-size: 12px;
  font-weight: 700;
}
.bulk-import-card__form {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(143, 163, 184, 0.08);
  background: rgba(255,255,255,0.03);
}
.field--span-2 {
  grid-column: 1 / -1;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.form-actions .secondary-btn,
.form-actions .primary-btn {
  min-height: 42px;
}
.profile-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
}
.side-panel {
  align-self: start;
}
.profile-side-panel {
  display: grid;
  gap: 16px;
  background:
    radial-gradient(circle at 18% 14%, rgba(74, 169, 109, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(14, 25, 36, 0.92);
}
.profile-side-note {
  padding-top: 4px;
  border-top: 1px solid rgba(160, 188, 208, 0.08);
}
.product-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.product-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(143, 163, 184, 0.12);
  display: grid;
  place-items: center;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-thumb span {
  font-size: 10px;
  color: #86a0b1;
  text-align: center;
  padding: 4px;
}
.dashboard-low-stock {
  margin-bottom: 20px;
}
.stock-update-form {
  display: grid;
  gap: 8px;
  min-width: 180px;
}
.stock-update-form__current {
  color: #5f7487;
  font-size: 12px;
  font-weight: 800;
}
.stock-update-form__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stock-update-form__input {
  min-width: 0;
  padding: 10px 12px;
}
.stock-update-form__button {
  min-height: 40px;
  padding: 10px 12px;
  white-space: nowrap;
}
.product-label-page {
  min-height: 100vh;
  padding: 32px 20px;
  background:
    radial-gradient(circle at top left, rgba(31, 155, 98, 0.12), transparent 20%),
    #f3f7fa;
}
.label-toolbar {
  width: min(920px, 100%);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-label-card {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 26px;
  border-radius: 24px;
  border: 1px solid #dfe8ef;
  background: #ffffff;
  box-shadow: 0 22px 50px rgba(21, 40, 58, 0.08);
}
.product-label-card__head {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #e8eff4;
}
.product-label-card__head h1 {
  font-size: 28px;
  line-height: 1.1;
  color: #132436;
}
.product-label-card__price {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  background: #e9f7ef;
  color: #176b47;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}
.product-label-card__body {
  display: grid;
  justify-items: center;
  padding: 24px 0;
}
.product-label-card__qr {
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f8fbfd, #ffffff);
  border: 1px solid #e4edf3;
}
.product-label-card__qr img {
  width: min(100%, 220px);
  height: auto;
  display: block;
}
.action-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(121, 217, 164, 0.1);
  border: 1px solid rgba(121, 217, 164, 0.14);
}
.note-snippet {
  display: inline-block;
  max-width: 240px;
  color: #dbe8f2;
  line-height: 1.45;
}
.stock-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(121, 217, 164, 0.12);
  color: #a7ebc3;
  font-size: 12px;
  font-weight: 700;
}
.stock-pill--low {
  background: rgba(242, 211, 109, 0.16);
  color: #ffe3a0;
}
.stock-pill--urgent {
  background: rgba(220, 78, 78, 0.16);
  color: #ffb8b8;
}
.profile-summary {
  display: grid;
  gap: 18px;
}
.profile-summary__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-summary__avatar {
  width: 54px;
  height: 54px;
  font-size: 18px;
  box-shadow: 0 16px 26px rgba(5, 18, 28, 0.28);
}
.profile-summary__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: #9fe2bb;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.profile-summary__spotlight {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(160, 188, 208, 0.08);
}
.profile-summary__spotlight-label {
  color: #9fe2bb;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.profile-summary__spotlight p {
  margin: 0;
  color: #f3f7fb;
  line-height: 1.6;
}
.profile-summary__meta {
  display: grid;
  gap: 14px;
}
.profile-summary__meta .cell-stack {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(160, 188, 208, 0.08);
}
.profile-summary__meta .cell-stack:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.profile-form-panel {
  display: grid;
  gap: 18px;
}
.profile-form {
  display: grid;
  gap: 18px;
}
.profile-section-panel {
  display: grid;
  gap: 16px;
}
.profile-section__head {
  display: grid;
  gap: 4px;
}
.profile-section__head h4 {
  margin: 0;
  font-size: 15px;
  color: #f4f8fb;
}
.profile-fields {
  display: grid;
  gap: 14px;
}
.profile-fields--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field--full {
  grid-column: 1 / -1;
}
.profile-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}
.badge-featured {
  background: rgba(241, 214, 107, 0.16);
  color: #f3df8b;
}
.cell-stack {
  display: grid;
  gap: 4px;
}
.mono {
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  color: #5b7387;
  font-weight: 700;
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(46, 139, 87, 0.12);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
}
.badge-status--submitted {
  background: rgba(76, 139, 255, 0.16);
  color: #b9d6ff;
}
.badge-status--approved {
  background: rgba(46, 139, 87, 0.12);
  color: #9be6ba;
}
.badge-status--rejected {
  background: rgba(220, 78, 78, 0.16);
  color: #ffb6b6;
}
.badge-status--draft,
.badge-status--archived {
  background: rgba(143, 163, 184, 0.14);
  color: #c5d3de;
}
.badge-source--web {
  background: rgba(109, 124, 255, 0.16);
  color: #cbd2ff;
}
.badge-source--manual {
  background: rgba(242, 211, 109, 0.16);
  color: #ffe7a5;
}
.inline-status-form {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
}
.inline-status-form .form-select {
  min-width: 124px;
  padding: 9px 12px;
}
.inline-status-form .secondary-btn {
  min-height: 38px;
  padding: 8px 12px;
}
.field { display: grid; gap: 8px; }
.stack-md { display: grid; gap: 14px; }
.stack-lg { display: grid; gap: 18px; }
.login-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.login-method-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.login-method-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.login-method-card.is-active {
  border-color: var(--brand);
  background: #edf7f1;
  color: var(--brand-dark);
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(17, 28, 41, 0.84);
  color: var(--ink);
  font: inherit;
}
.form-checkbox { width: 18px; height: 18px; }
.primary-btn, .secondary-btn {
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
}
.primary-btn {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 18px rgba(46, 139, 87, 0.24);
}
.secondary-btn {
  background: rgba(121, 217, 164, 0.14);
  color: #dffceb;
  border: 1px solid rgba(121, 217, 164, 0.18);
}
.danger-btn {
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
  background: rgba(204, 69, 69, 0.92);
  color: #fff4f4;
  box-shadow: 0 12px 22px rgba(121, 26, 26, 0.24);
}
.export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(71, 132, 255, 0.28), rgba(52, 108, 216, 0.22));
  border: 1px solid rgba(109, 156, 255, 0.28);
  color: #d8e7ff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 14px 24px rgba(20, 48, 102, 0.2);
  white-space: nowrap;
}
.sales-controls {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(143, 163, 184, 0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}
.admin-products-table td:nth-child(2) {
  min-width: 280px;
}
.admin-products-table td:nth-child(9) {
  white-space: nowrap;
}
.sales-filter-bar {
  display: grid;
  gap: 18px;
}
.sales-filter-bar__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}
.sales-filter-bar__field {
  flex: 1 1 180px;
  min-width: 180px;
  padding: 14px;
  border: 1px solid rgba(143, 163, 184, 0.08);
  border-radius: 8px;
  background: rgba(11, 20, 30, 0.34);
  overflow: hidden;
}
.sales-filter-bar__field--wide {
  flex: 2 1 280px;
  min-width: 240px;
}
.sales-filter-bar__field span {
  margin-bottom: 2px;
}
.sales-filter-bar__field .form-input,
.sales-filter-bar__field .form-select {
  margin-top: 4px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.sales-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.sales-controls__export {
  display: flex;
  justify-content: flex-start;
}
.ghost-link { color: #2ea866; font-weight: 800; }
.sidebar .ghost-link {
  color: #d8f4e4;
  font-weight: 700;
}
.sidebar .ghost-link:hover {
  color: #fff;
}
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-flash-wrap {
  position: fixed;
  inset: 16px 16px auto 16px;
  z-index: 10;
  pointer-events: none;
}
.auth-flash-wrap .flash {
  pointer-events: auto;
}
.auth-card {
  width: min(460px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.flash-stack { display: grid; gap: 10px; margin-bottom: 18px; }
.flash {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 14px 12px 50px;
  border-radius: 8px;
  background: rgba(121, 217, 164, 0.15);
  border: 1px solid rgba(121, 217, 164, 0.16);
  color: #e0ffec;
  box-shadow: 0 16px 30px rgba(8, 24, 18, 0.2);
}
.flash::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(121, 217, 164, 0.18);
  color: #f2fff8;
  font-size: 13px;
  font-weight: 900;
}
.flash.error {
  background: rgba(220, 78, 78, 0.14);
  border-color: rgba(220, 78, 78, 0.18);
  color: #ffd3d3;
}
.flash.error::before {
  content: "×";
  background: rgba(220, 78, 78, 0.16);
  color: #fff0f0;
  font-size: 15px;
}
.toast-stack {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
}
.flash--toast {
  width: min(380px, calc(100vw - 24px));
  flex-direction: column;
  text-align: center;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
  padding: 22px 20px 20px;
  gap: 12px;
  background: rgba(18, 31, 45, 0.96);
  border-color: rgba(143, 163, 184, 0.16);
  color: #eff7fd;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
}
.flash--toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.flash--toast::before {
  position: static;
  transform: none;
  margin-right: 0;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  font-size: 18px;
}
.flash--toast.success {
  border-color: rgba(121, 217, 164, 0.22);
}
.flash--toast.error {
  border-color: rgba(220, 78, 78, 0.24);
}
.flash--toast.success,
.flash--toast.error {
  align-items: center;
}
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 32, 0.4);
  backdrop-filter: blur(8px);
}
.confirm-card {
  width: min(420px, 100%);
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #dde7ef;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(20, 36, 50, 0.18);
}
.confirm-card h3 {
  margin: 0 0 10px;
  color: #122131;
  font-size: 22px;
  line-height: 1.1;
}
.confirm-card p {
  margin: 0;
  color: #516577;
  line-height: 1.55;
  font-size: 15px;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.confirm-actions .secondary-btn {
  background: #f4f8fb;
  color: #244056;
  border: 1px solid #d7e3ec;
}

.confirm-actions .danger-btn {
  background: linear-gradient(180deg, #db5f5f, #c74848);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(163, 52, 52, 0.22);
}
.ajax-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 32, 0.28);
  display: grid;
  place-items: center;
}
.ajax-overlay__card {
  width: 180px;
  background: #132030;
  padding: 18px;
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--shadow);
}
.spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  border: 3px solid #dce8e1;
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.empty-cell { color: var(--muted); text-align: center; }
.top-gap { margin-top: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes panelSpotlight {
  0% {
    transform: scale(0.985);
    box-shadow: 0 0 0 rgba(121, 217, 164, 0), var(--shadow);
    border-color: rgba(143, 163, 184, 0.1);
  }
  30% {
    transform: scale(1);
    box-shadow: 0 0 0 4px rgba(121, 217, 164, 0.12), 0 28px 60px rgba(6, 22, 15, 0.3);
    border-color: rgba(121, 217, 164, 0.28);
  }
  100% {
    transform: scale(1);
    box-shadow: var(--shadow);
    border-color: rgba(143, 163, 184, 0.1);
  }
}
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { padding-bottom: 18px; }
  .grid-2, .stats-grid { grid-template-columns: 1fr; }
  .dashboard-grid--seller,
  .dashboard-grid--admin { grid-template-columns: 1fr; }
  .products-layout { grid-template-columns: 1fr; }
  .review-layout { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
  .content { padding: 18px; }
  .topbar { align-items: stretch; }
  .topbar-search { max-width: none; min-width: 0; }
  .topbar-actions { justify-content: flex-start; }
  .auth-page .content { padding: 0; }
  .auth-wrap { padding: 16px; }
  .auth-card { padding: 20px; }
  .auth-flash-wrap { inset: 12px 12px auto 12px; }
  .login-methods { grid-template-columns: 1fr; }
  .page-header, .panel-head { align-items: flex-start; flex-direction: column; }
  .dashboard-header__meta { width: 100%; }
  .page-header h2 { font-size: 26px; }
  .stat-card strong { font-size: 28px; }
  .sidebar-nav { padding: 0; }
  .profile-fields--two { grid-template-columns: 1fr; }
  .review-meta__grid { grid-template-columns: 1fr; }
  .existing-media__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .submission-mode__options { grid-template-columns: 1fr; }
  .product-form-grid { grid-template-columns: 1fr; }
  .bulk-import-card__body { grid-template-columns: 1fr; }
  .bulk-import-card__head { gap: 10px; }
  .sales-filter-bar__actions { align-items: center; }
  .profile-actions { justify-content: stretch; }
  .sales-bars { grid-template-columns: repeat(7, minmax(48px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
}

@media (max-width: 640px) {
  .content { padding: 14px; }
  .panel { padding: 16px; }
  .table th, .table td { padding: 12px 8px; }
  .topbar-actions { gap: 8px; }
  .topbar-link,
  .topbar-logout { width: 100%; }
  .page-summary { font-size: 14px; }
  .existing-media__grid { grid-template-columns: 1fr; }
  .sales-filter-bar__grid { display: grid; grid-template-columns: 1fr; }
  .sales-filter-bar__field,
  .sales-filter-bar__field--wide { min-width: 0; }
  .sales-filter-bar__actions { justify-content: stretch; flex-wrap: wrap; }
  .export-btn { width: 100%; }
  .sales-controls__export { justify-content: stretch; }
  .sales-controls { padding: 16px; }
  .sales-filter-bar__field { padding: 12px; }
  .toast-stack {
    padding: 12px;
  }
  .confirm-actions {
    justify-content: stretch;
  }
  .confirm-actions .secondary-btn,
  .confirm-actions .danger-btn {
    width: 100%;
  }
}

/* Seller overview refresh */
body.app-page {
  background: #eef3f6;
  color: #122131;
  font-size: 15px;
  line-height: 1.58;
  --ink: #142334;
  --muted: #5f7386;
}

.shell {
  grid-template-columns: 268px 1fr;
}

.sidebar {
  background:
    radial-gradient(circle at 18% 82%, rgba(118, 216, 167, 0.14), transparent 28%),
    radial-gradient(circle at 55% 70%, rgba(61, 125, 160, 0.12), transparent 24%),
    linear-gradient(180deg, #0d1830 0%, #15233a 100%);
}

.brand-mark--logo {
  position: relative;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}

.brand-mark__loop {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 4px solid #10b981;
  border-radius: 999px;
  left: 7px;
  top: 10px;
}

.brand-mark__loop--right {
  left: auto;
  right: 7px;
  border-color: #76e0b0;
}

.brand-mark--logo::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 18px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981, #76e0b0);
}

.nav-link__meta {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(53, 188, 113, 0.22);
  color: #effff6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto !important;
}

.sidebar-support-card {
  display: grid;
  gap: 8px;
  padding: 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.sidebar-support-card strong {
  color: #ffffff;
}

.sidebar-support-card small {
  color: #bfd0df;
  line-height: 1.5;
}

.sidebar-support-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  color: #f4fbff;
  font-weight: 700;
}

.content {
  padding: 14px 18px 24px;
  color: #132131;
}

.content-shell {
  width: min(1280px, 100%);
}

.app-page p,
.app-page li,
.app-page label,
.app-page td,
.app-page input,
.app-page select,
.app-page textarea,
.app-page button {
  color: #1d3042;
}

.app-page h1,
.app-page h2,
.app-page h3,
.app-page h4,
.app-page th,
.app-page strong {
  color: #122131;
}

.app-page .sidebar .brand-title {
  color: #ffffff;
}

.app-page .sidebar .eyebrow {
  color: #8ee4b2;
}

.app-page .sidebar .brand-copy,
.app-page .sidebar .sidebar-user,
.app-page .sidebar .sidebar-footer {
  color: #d9e8f3;
}

.app-page .sidebar .nav-link {
  color: #a9bdcc;
}

.app-page .sidebar .nav-link:hover {
  color: #ffffff;
}

.app-page .sidebar .nav-link.is-active {
  color: #ffffff;
}

.app-page .sidebar .nav-link__icon {
  color: #c3d7c9;
}

.app-page .sidebar .nav-link.is-active .nav-link__icon {
  color: #ffffff;
}

.topbar {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(209, 220, 231, 0.82);
  box-shadow: 0 10px 22px rgba(23, 42, 59, 0.05);
  width: 100%;
  min-width: 0;
  margin-left: 0;
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
}

.topbar-title strong {
  color: #15233a;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.topbar-search {
  display: none;
}

.topbar-search__icon {
  color: #718395;
}

.topbar-search__icon svg {
  width: 14px;
  height: 14px;
}

.topbar-search input {
  color: #223143;
  font-size: 13px;
}

.topbar-search input::placeholder {
  color: #8ea0b2;
}

.topbar-icon-btn,
.topbar-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid #d7e2ea;
  background: #ffffff;
  color: #405265;
  font-size: 12px;
  font-weight: 700;
}

.topbar-icon-btn {
  position: relative;
  padding: 0;
}

.topbar-icon-btn svg,
.topbar-logout svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke: currentColor;
  fill: none;
}

.topbar-icon-btn__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
}

.topbar-profile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #203041;
  padding-right: 2px;
}

.topbar-profile__avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1f8f62, #15734d);
  color: #ffffff;
  font-weight: 800;
  font-size: 11px;
}

.topbar-profile__copy {
  display: grid;
  gap: 1px;
}

.topbar-profile__copy strong {
  font-size: 11px;
  line-height: 1.1;
}

.topbar-profile__copy small {
  color: #73879a;
  margin: 0;
  font-size: 9px;
  line-height: 1.1;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar-logout {
  color: #b54747;
  background: #fff7f7;
  border-color: #f0d4d4;
}

.topbar-logout span {
  font-size: 10px;
}

.page-summary {
  color: #526578;
  font-size: 15px;
  line-height: 1.68;
  font-weight: 500;
}

.calendar-pill {
  border: 1px solid #d7e2ea;
  background: #ffffff;
  color: #203041;
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
}

#seller-summary .stats-grid,
#control-summary .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.panel,
.stat-card,
.table {
  background: #ffffff;
  color: #15233a;
}

.panel {
  border: 1px solid #e1e9ef;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(18, 34, 48, 0.06);
  padding: 18px;
}

.panel p,
.panel li {
  color: #2d4254;
}

.panel-head h3,
.panel-head p,
.panel-head .muted,
.panel-head small {
  color: #203244;
}

.stat-card {
  border: 1px solid #e2e9ef;
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(21, 40, 58, 0.05);
  padding: 14px 15px 13px;
}

#seller-summary .stat-card,
#control-summary .stat-card {
  padding: 11px 12px 10px;
  border-radius: 14px;
  min-height: 108px;
}

.stat-card--rose {
  border-color: rgba(248, 113, 113, 0.18);
}

.stat-card--rose .stat-card__icon {
  color: #ffb2ba;
  background: rgba(248, 113, 113, 0.14);
}

.stat-card--rose strong {
  color: #ff8f9d;
}

.stat-card--rose .stat-label,
.stat-card--rose small {
  color: #e8a8b0;
}

.compact-stats .stat-card {
  padding: 11px 12px 10px;
  border-radius: 14px;
  min-height: 108px;
}

.compact-stats .stat-card strong {
  margin-top: 7px;
  font-size: 21px;
  letter-spacing: -0.03em;
}

.compact-stats .stat-card small {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: #576d80;
  font-weight: 600;
}

.compact-stats .stat-card__top {
  gap: 7px;
  align-items: center;
}

.compact-stats .stat-card__icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.compact-stats .stat-card__icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}

.compact-stats .stat-label {
  font-size: 10px;
  line-height: 1.25;
  color: #8095a7;
  opacity: 1;
}

.compact-stats .stat-card--blue .stat-card__icon {
  color: #1c72c9;
  background: #eaf4ff;
  border-color: #cfe4fb;
}

.compact-stats .stat-card--green .stat-card__icon {
  color: #168253;
  background: #e7f7ef;
  border-color: #cbead8;
}

.compact-stats .stat-card--violet .stat-card__icon {
  color: #6f53d8;
  background: #f0ebff;
  border-color: #ddd2ff;
}

.compact-stats .stat-card--amber .stat-card__icon {
  color: #c87a12;
  background: #fff3e3;
  border-color: #f3dfbf;
}

.compact-stats .stat-card--rose .stat-card__icon {
  color: #cf5c6d;
  background: #ffecef;
  border-color: #f5d4da;
}

.compact-stats .stat-card--blue .stat-label,
.compact-stats .stat-card--green .stat-label,
.compact-stats .stat-card--violet .stat-label,
.compact-stats .stat-card--amber .stat-label,
.compact-stats .stat-card--rose .stat-label {
  color: #8095a7;
}

.compact-stats .stat-card--blue small,
.compact-stats .stat-card--green small,
.compact-stats .stat-card--violet small,
.compact-stats .stat-card--amber small,
.compact-stats .stat-card--rose small {
  color: #576d80;
}

.stat-card__top {
  gap: 8px;
}

#seller-summary .stat-card__top,
#control-summary .stat-card__top {
  gap: 7px;
  align-items: center;
}

.stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.stat-card__icon svg {
  width: 16px;
  height: 16px;
}

#seller-summary .stat-card__icon,
#control-summary .stat-card__icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 10px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

#seller-summary .stat-card__icon svg,
#control-summary .stat-card__icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}

#seller-summary .stat-card--blue .stat-card__icon,
#control-summary .stat-card--blue .stat-card__icon {
  color: #1c72c9;
  background: #eaf4ff;
  border-color: #cfe4fb;
}

#seller-summary .stat-card--green .stat-card__icon,
#control-summary .stat-card--green .stat-card__icon {
  color: #168253;
  background: #e7f7ef;
  border-color: #cbead8;
}

#seller-summary .stat-card--violet .stat-card__icon,
#control-summary .stat-card--violet .stat-card__icon {
  color: #6f53d8;
  background: #f0ebff;
  border-color: #ddd2ff;
}

#seller-summary .stat-card--amber .stat-card__icon,
#control-summary .stat-card--amber .stat-card__icon {
  color: #c87a12;
  background: #fff3e3;
  border-color: #f3dfbf;
}

#seller-summary .stat-card--rose .stat-card__icon,
#control-summary .stat-card--rose .stat-card__icon {
  color: #cf5c6d;
  background: #ffecef;
  border-color: #f5d4da;
}

.stat-label {
  min-height: auto;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: #5b7184;
  font-weight: 800;
}

#seller-summary .stat-label,
#control-summary .stat-label {
  font-size: 10px;
  line-height: 1.25;
  color: #8095a7;
  opacity: 1;
}

.stat-card strong {
  margin-top: 9px;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

#seller-summary .stat-card strong,
#control-summary .stat-card strong {
  margin-top: 7px;
  font-size: 21px;
  line-height: 1.04;
}

.stat-card small {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: #607488;
  font-weight: 600;
}

#seller-summary .stat-card small,
#control-summary .stat-card small {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: #576d80;
}

.table {
  border: 1px solid #e1e9ef;
  border-radius: 16px;
}

.table th,
.table td {
  border-bottom: 1px solid #edf2f6;
  color: #203041;
  font-size: 14px;
}

.table th {
  background: #f7fafc;
  color: #62778b;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.table td {
  font-weight: 500;
}

.table tbody tr:hover {
  background: #f9fbfd;
}

.dashboard-overview-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1.1fr) minmax(290px, 0.95fr);
  align-items: start;
}

.dashboard-bottom-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1.05fr) minmax(290px, 0.9fr);
  align-items: start;
}

.chart-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  min-height: 260px;
}

.chart-card__yaxis {
  display: grid;
  align-content: stretch;
  justify-items: end;
  color: #5d7387;
  font-size: 12px;
  font-weight: 700;
}

.chart-card__yaxis span {
  display: flex;
  align-items: flex-end;
}

.chart-card__plot {
  display: grid;
  gap: 8px;
}

.chart-card__svg {
  width: 100%;
  height: 220px;
  overflow: visible;
}

.chart-card__gridline {
  stroke: #e7eef3;
  stroke-width: 1;
}

.chart-card__line {
  fill: none;
  stroke: #1f9b62;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-card__fill {
  fill: rgba(31, 155, 98, 0.16);
}

.chart-card__dot {
  fill: #1f9b62;
  stroke: #ffffff;
  stroke-width: 1;
}

.chart-card__xaxis {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  color: #5a7083;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.sales-bars__value {
  color: #445a6d;
  font-weight: 700;
}

.sales-bars__label {
  color: #5a7083;
}

.product-performance-list,
.expense-list {
  display: grid;
  gap: 12px;
}

.product-performance-row,
.expense-list__row,
.stock-alert-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f6;
}

.product-performance-row:last-child,
.expense-list__row:last-child,
.stock-alert-row:last-child {
  border-bottom: 0;
}

.product-performance-row__main,
.stock-alert-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-performance-row__thumb {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: #f2f6f9;
  border: 1px solid #e5edf3;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 800;
  color: #4f6579;
}

.product-performance-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-performance-row__copy,
.product-performance-row__meta,
.expense-list__meta,
.stock-alert-row__meta {
  display: grid;
  gap: 4px;
}

.product-performance-row__copy strong,
.stock-alert-row__main strong,
.expense-list__row strong,
.dashboard-list__row strong,
.money-breakdown__row strong,
.table td strong,
.list-item-with-media strong {
  color: #162537;
  font-weight: 700;
}

.product-performance-row__copy,
.expense-list__row,
.stock-alert-row,
.dashboard-list__row,
.money-line,
.summary-panel__stack p,
.order-overview-chip,
.status-grid__item {
  color: #213547;
}

.product-performance-row__copy small,
.stock-alert-row__main small,
.expense-list__row small,
.dashboard-list__row small,
.muted,
small {
  color: #617689;
  font-weight: 500;
}

.dashboard-list__meta,
.money-breakdown__row,
.expense-list__meta,
.product-performance-row__meta {
  color: #24384a;
}

.dashboard-list__meta span,
.expense-list__meta strong,
.expense-list__meta small,
.product-performance-row__meta strong,
.stock-alert-row__meta,
.money-breakdown__row span {
  color: #294055;
}

.product-performance-row__meta {
  justify-items: end;
}

.dashboard-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.dashboard-tag--green {
  background: #e7f8ee;
  color: #1a9b60;
}

.dashboard-tag--amber {
  background: #fff3de;
  color: #d88916;
}

.dashboard-tag--red {
  background: #ffe6e6;
  color: #e34d4d;
}

.money-line {
  border: 1px solid #edf2f6;
  background: #f9fbfd;
}

.money-line span {
  color: #607588;
  font-weight: 600;
}

.money-line strong {
  color: #172538;
  font-size: 18px;
}

.money-line--green span,
.money-line--green strong {
  color: #14784e;
}

.money-line--red span,
.money-line--red strong {
  color: #c94c4c;
}

.money-breakdown {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.money-breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #677a8d;
}

.money-breakdown__row strong {
  color: #15233a;
}

.order-overview-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.order-overview-chip {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #edf2f6;
  background: #fbfcfd;
  display: grid;
  gap: 4px;
}

.order-overview-chip span {
  color: #657b90;
  font-size: 11px;
  font-weight: 700;
}

.order-overview-chip strong {
  color: #172538;
  font-size: 18px;
}

.empty-cell {
  color: #6a7f92;
  font-weight: 600;
}

.dashboard-table td,
.dashboard-table th {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.dashboard-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.dashboard-actions--single {
  justify-content: stretch;
}

.dashboard-action-btn {
  flex: 1;
  justify-content: center;
  display: inline-flex;
  align-items: center;
}

.dashboard-quick-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 24px auto 4px;
  padding: 12px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #dde7ee;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.dashboard-quick-actions__btn {
  min-width: 160px;
}

.summary-panel__stack p {
  border: 1px solid #d7eadc;
  background: #eef8f1;
  color: #274233;
  font-size: 14px;
  line-height: 1.55;
}

.summary-panel__stack strong {
  color: #163623;
}

.list-item-with-media {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.list-item-with-media__thumb {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #f2f6f9;
  border: 1px solid #e5edf3;
  color: #4c6174;
  font-weight: 800;
  flex: 0 0 auto;
}

.list-item-with-media__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f6fa;
  color: #55697d;
  border: 1px solid #e1ebf2;
  font-size: 12px;
  font-weight: 700;
}

.status-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.status-grid__item {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #e8eef3;
  background: #f9fbfd;
  display: grid;
  gap: 6px;
}

.status-grid__item span {
  color: #607588;
  font-size: 12px;
  font-weight: 700;
}

.status-grid__item strong {
  color: #15233a;
  font-size: 20px;
}

.form-error {
  color: #d14343;
  margin-top: 6px;
  display: block;
}

.app-page .field > span,
.app-page .submission-mode__label,
.app-page .table-meta-pill,
.app-page .calendar-pill,
.app-page .badge-soft,
.app-page .dashboard-tag,
.app-page .role-pill {
  letter-spacing: 0.01em;
}

.app-page .table-meta-pill {
  color: #5b7286;
  border-color: #dee8ef;
  background: #f8fbfd;
}

.app-page .calendar-pill {
  color: #24384a;
}

.app-page .field > span {
  color: #31465a;
  font-size: 13px;
  font-weight: 700;
}

.app-page .form-input,
.app-page .form-select,
.app-page .form-textarea {
  border: 1px solid #d7e3ec;
  border-radius: 12px;
  background: #ffffff;
  color: #152638;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.03);
}

.app-page .form-input::placeholder,
.app-page .form-textarea::placeholder {
  color: #879bad;
}

.app-page .form-input:focus,
.app-page .form-select:focus,
.app-page .form-textarea:focus {
  outline: none;
  border-color: #7ac7a0;
  box-shadow: 0 0 0 4px rgba(61, 167, 111, 0.12);
}

.app-page .side-panel,
.app-page .profile-side-panel,
.app-page .form-spotlight-panel,
.app-page .bulk-import-card,
.app-page .bulk-import-card__form,
.app-page .submission-mode,
.app-page .sales-controls,
.app-page .sales-filter-bar__field,
.app-page .review-status-card,
.app-page .existing-media,
.app-page .profile-summary__spotlight {
  background: #f8fbfd;
  border-color: #e2ebf2;
  box-shadow: none;
}

.app-page .submission-option {
  background: #ffffff;
  border-color: #dbe6ee;
  color: #1b3042;
}

.app-page .submission-option:hover {
  background: #f6fbf8;
  border-color: #b9dcc8;
}

.app-page .submission-option.is-active {
  background: linear-gradient(180deg, #f2fbf5, #eaf7ef);
  border-color: #99cfb0;
  box-shadow: 0 10px 24px rgba(34, 108, 67, 0.08);
}

.app-page .submission-option__icon {
  background: #f4f8fb;
  border-color: #e0e9f0;
  color: #587085;
}

.app-page .submission-option.is-active .submission-option__icon {
  background: #dff5e8;
  border-color: #bde3cb;
  color: #1f8f62;
}

.app-page .submission-option__content strong,
.app-page .bulk-import-card h3,
.app-page .profile-summary__spotlight p,
.app-page .review-status-card h4,
.app-page .side-panel h3 {
  color: #132436;
}

.app-page .submission-option__content small,
.app-page .bulk-import-card__hint p,
.app-page .sales-filter-bar__field span,
.app-page .profile-summary__spotlight-label,
.app-page .review-status-card p {
  color: #62788b;
}

.app-page .bulk-import-card__hint {
  background: #edf8f1;
  border-color: #cfe8d9;
}

.app-page .bulk-import-card__badge {
  background: #fff3de;
  color: #b56e12;
}

.app-page .secondary-btn {
  background: #eef7f2;
  color: #176b47;
  border-color: #cfe7d9;
}

.app-page .sales-filter-bar__field .form-input,
.app-page .sales-filter-bar__field .form-select {
  background: #ffffff;
}

.chat-page-header {
  margin-bottom: 16px;
  align-items: center;
}

.chat-page-header__copy {
  display: grid;
  gap: 4px;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chat-live-pill {
  background: #eef7f2;
  color: #166d48;
  border-color: #d1e8db;
}

.chat-shell {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(320px, 370px) minmax(0, 1fr);
  align-items: start;
}

.chat-sidebar,
.chat-thread-panel {
  min-height: 680px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.chat-sidebar {
  gap: 0;
}

.chat-sidebar__section {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.chat-sidebar__section + .chat-sidebar__section {
  border-top: 1px solid #e8eff4;
}

.chat-panel-head {
  margin-bottom: 0;
}

.chat-panel-head h3,
.chat-thread-head h3 {
  margin: 0;
  color: #15233a;
  font-size: 17px;
  line-height: 1.2;
}

.chat-panel-head p,
.chat-thread-head p {
  margin: 4px 0 0;
  color: #607488;
  font-size: 13px;
}

.chat-sidebar__hero {
  padding: 22px 20px 18px;
  background:
    radial-gradient(circle at top left, rgba(31, 155, 98, 0.18), transparent 40%),
    linear-gradient(180deg, #f7fbf8 0%, #f3f8fc 100%);
  border-bottom: 1px solid #e8eff4;
}

.chat-sidebar__hero-copy {
  display: grid;
  gap: 6px;
}

.chat-sidebar__hero-copy h3 {
  margin: 0;
  color: #15233a;
  font-size: 18px;
  line-height: 1.2;
}

.chat-sidebar__hero-copy p {
  margin: 0;
  color: #617688;
  font-size: 13px;
  line-height: 1.55;
}

.chat-sidebar__eyebrow {
  color: #1c8a59;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 800;
}

.chat-search-stack {
  display: grid;
  gap: 10px;
}

.chat-search-field {
  position: relative;
  display: block;
}

.chat-search-field .form-input {
  padding-left: 42px;
  min-height: 46px;
}

.chat-search-field__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #6f8799;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.chat-search-field__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.chat-contact-results,
.chat-conversation-list {
  display: grid;
  gap: 10px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}

.chat-contact-item,
.chat-conversation-item {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid #e3ebf2;
  background: #fbfdff;
  color: #162638;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.chat-contact-item {
  grid-template-columns: 42px minmax(0, 1fr);
}

.chat-contact-item:hover,
.chat-conversation-item:hover {
  border-color: #c8dce8;
  background: #f7fbfd;
  box-shadow: 0 10px 22px rgba(26, 46, 64, 0.05);
  transform: translateY(-1px);
}

.chat-conversation-item.is-active {
  border-color: #a9d6bd;
  background: linear-gradient(180deg, #f2fbf5, #ebf7ef);
  box-shadow: 0 12px 26px rgba(30, 102, 65, 0.08);
}

.chat-contact-item__avatar,
.chat-conversation-item__avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1f8f62, #15734d);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.chat-contact-item__body,
.chat-conversation-item__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.chat-contact-item__body strong,
.chat-conversation-item__body strong {
  color: #17283b;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}

.chat-contact-item__body small,
.chat-conversation-item__body small,
.chat-conversation-item__time {
  color: #657a8d;
  font-size: 12px;
  line-height: 1.35;
}

.chat-conversation-item__time {
  align-self: start;
  white-space: nowrap;
  font-weight: 700;
}

.chat-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e8eff4;
  background:
    radial-gradient(circle at top left, rgba(31, 155, 98, 0.12), transparent 34%),
    linear-gradient(180deg, #f9fcfa 0%, #ffffff 100%);
}

.chat-thread-head__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.chat-thread-head__avatar {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1f8f62, #15734d);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 22px rgba(22, 103, 67, 0.16);
}

.chat-thread-head__meta {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.chat-thread {
  flex: 1;
  min-height: 360px;
  max-height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 10px;
  background:
    linear-gradient(180deg, rgba(245, 250, 253, 0.7), rgba(255, 255, 255, 0));
}

.chat-bubble {
  max-width: min(78%, 620px);
  padding: 14px 16px;
  border-radius: 18px 18px 18px 8px;
  border: 1px solid #e5edf3;
  background: #f8fbfd;
  box-shadow: 0 10px 24px rgba(24, 43, 60, 0.04);
}

.chat-bubble--mine {
  margin-left: auto;
  border-color: #cae7d7;
  background: linear-gradient(180deg, #f1fbf4, #e8f6ed);
  border-radius: 18px 18px 8px 18px;
  box-shadow: 0 14px 28px rgba(31, 114, 72, 0.08);
}

.chat-bubble__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.chat-bubble__meta strong {
  color: #162537;
  font-size: 13px;
  font-weight: 800;
}

.chat-bubble__meta span {
  color: #6a7f92;
  font-size: 11px;
  font-weight: 700;
}

.chat-bubble p {
  margin: 0;
  color: #264052;
  line-height: 1.6;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-composer {
  margin-top: auto;
  padding: 16px 22px 22px;
  border-top: 1px solid #e8eff4;
  display: grid;
  gap: 12px;
  background: #ffffff;
}

.chat-composer__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-composer__label-row strong {
  color: #15233a;
  font-size: 14px;
}

.chat-composer__hint {
  color: #6a7f92;
  font-size: 12px;
  font-weight: 700;
}

.chat-composer .form-textarea {
  min-height: 110px;
  resize: vertical;
  border-radius: 16px;
}

.chat-composer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-composer__actions small {
  color: #5f7487;
  font-size: 12px;
  font-weight: 700;
}

.chat-empty-state,
.empty-state {
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed #d7e3ec;
  background: #f9fbfd;
  color: #607488;
  text-align: center;
}

.chat-empty-state {
  display: grid;
  place-items: center;
  min-height: 100%;
}

.chat-empty-state--thread {
  min-height: 240px;
}

.chat-empty-state strong {
  color: #17283b;
  font-size: 16px;
}

.chat-empty-state p {
  margin: 8px 0 0;
  color: #607488;
  max-width: 420px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .shell {
    grid-template-columns: 1fr;
  }

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

  .order-overview-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .chat-shell {
    grid-template-columns: 1fr;
  }

  .chat-sidebar,
  .chat-thread-panel {
    min-height: auto;
  }

  .chat-contact-results,
  .chat-conversation-list,
  .chat-thread {
    max-height: none;
  }

}

@media (max-width: 640px) {
  .topbar-profile,
  .topbar-logout {
    width: 100%;
  }

  .chart-card {
    grid-template-columns: 1fr;
  }

  .chart-card__yaxis {
    display: none;
  }

  .dashboard-actions {
    flex-direction: column;
  }

  .dashboard-quick-actions {
    width: 100%;
  }

  .dashboard-quick-actions__btn {
    width: 100%;
    min-width: 0;
  }

  .chat-conversation-item,
  .chat-contact-item {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .chat-conversation-item__time,
  .chat-thread-head .badge-soft,
  .chat-thread-head__meta small,
  .chat-live-pill,
  .chat-composer__hint {
    display: none;
  }

  .chat-composer__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .chat-thread-head,
  .chat-thread,
  .chat-composer,
  .chat-sidebar__hero,
  .chat-sidebar__section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .chat-composer__label-row,
  .chat-thread-head {
    align-items: flex-start;
  }

  .label-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .product-label-card {
    padding: 20px;
  }

  .product-label-card__head {
    flex-direction: column;
  }

  .product-label-card__price {
    width: fit-content;
  }

}

.sidebar-brand__main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-close-btn,
.topbar-menu-btn {
  display: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.sidebar-close-btn svg,
.topbar-menu-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.seller-products-stack {
  display: grid;
  gap: 18px;
}

.collapsible-panel__head {
  align-items: center;
}

.collapsible-panel__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.collapsible-panel__toggle {
  min-width: 120px;
  justify-content: center;
}

.collapsible-panel__body {
  display: grid;
  gap: 18px;
}

.collapsible-panel.is-collapsed .collapsible-panel__head {
  margin-bottom: 0;
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 16, 25, 0.52);
  backdrop-filter: blur(3px);
  z-index: 25;
}

@media (max-width: 980px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, calc(100vw - 32px));
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    overflow-y: auto;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .topbar-menu-btn,
  .sidebar-close-btn {
    display: inline-flex;
  }

  .sidebar-close-btn {
    color: #dbe8f2;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
  }

  body.sidebar-open {
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .topbar {
    gap: 10px;
  }

  .topbar-title {
    justify-content: space-between;
    width: 100%;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .topbar-profile {
    flex: 1;
    min-width: 0;
  }

  .topbar-profile__copy strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-logout {
    width: auto;
    flex: 0 0 auto;
  }

  .collapsible-panel__head,
  .collapsible-panel__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .chat-page-header {
    align-items: flex-start;
    gap: 10px;
  }

  .chat-page-header__copy {
    width: 100%;
  }

  .chat-page-header__copy h2 {
    font-size: 22px;
    line-height: 1.12;
  }

  .chat-page-header .page-summary {
    font-size: 13px;
    line-height: 1.5;
    max-width: none;
  }

  .chat-header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .chat-header-actions .secondary-btn,
  .chat-header-actions .badge-soft {
    width: 100%;
    justify-content: center;
  }
}

.app-page .sidebar-user p,
.app-page .sidebar-user span,
.app-page .sidebar-footer,
.app-page .sidebar-support-card small,
.app-page .sidebar-support-card__button {
  color: #eef6fb;
}

.app-page .sidebar-support-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

.app-page .role-pill {
  background: rgba(44, 145, 92, 0.2);
  color: #c7f3da;
}

.app-page .stock-update-form__current {
  color: #5a6f83;
}

.app-page .stock-pill {
  background: #e8f7ef;
  color: #1f8a59;
  border: 1px solid #cce9d8;
}

.app-page .stock-pill--low {
  background: #fff4de;
  color: #b66f12;
  border-color: #f1ddba;
}

.app-page .stock-pill--urgent {
  background: #ffe8e8;
  color: #cf4b4b;
  border-color: #f2cbcb;
}

.app-page .badge-status--approved {
  background: #e7f8ee;
  color: #1a8c59;
}

.app-page .badge-status--draft,
.app-page .badge-status--archived {
  background: #eef3f7;
  color: #6a7d8f;
}

.app-page .badge-status--submitted {
  background: #eaf2ff;
  color: #3f6fa7;
}

.app-page .badge-status--rejected {
  background: #ffe8e8;
  color: #cb4d4d;
}

.app-page .note-snippet,
.app-page .table td small,
.app-page .cell-stack .muted,
.app-page .muted,
.app-page small {
  color: #617689;
}

.app-page .table td .muted {
  color: #5f7488;
  font-weight: 600;
}

@media (max-width: 640px) {
  .table--mobile-cards thead {
    display: none;
  }

  .table--mobile-cards,
  .table--mobile-cards tbody,
  .table--mobile-cards tr,
  .table--mobile-cards td {
    display: block;
    width: 100%;
  }

  .table--mobile-cards tbody {
    display: grid;
    gap: 12px;
  }

  .table--mobile-cards tr {
    border: 1px solid #e2ebf2;
    border-radius: 18px;
    background: #fbfdff;
    padding: 14px;
    box-shadow: 0 10px 22px rgba(21, 40, 58, 0.04);
  }

  .table--mobile-cards td {
    padding: 0;
    border: 0;
  }

  .table--mobile-cards td + td {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf2f6;
  }

  .table--mobile-cards td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: #617689;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .table--mobile-cards td[colspan]::before,
  .table--mobile-cards .empty-cell::before {
    content: none;
  }

  .table--mobile-cards td strong {
    font-size: 15px;
    line-height: 1.3;
  }

  .table--mobile-cards td small,
  .table--mobile-cards td .muted,
  .table--mobile-cards td .note-snippet,
  .table--mobile-cards td .mono {
    font-size: 12px;
    line-height: 1.45;
  }

  .table--mobile-cards .stock-update-form,
  .table--mobile-cards form {
    min-width: 0;
  }

  .table--mobile-cards .stock-update-form__row,
  .table--mobile-cards .status-actions,
  .table--mobile-cards .row-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .table--mobile-cards .stock-update-form__input,
  .table--mobile-cards .stock-update-form__button,
  .table--mobile-cards .action-link,
  .table--mobile-cards .ghost-link,
  .table--mobile-cards .secondary-btn,
  .table--mobile-cards .primary-btn,
  .table--mobile-cards .filter-chip {
    width: 100%;
    justify-content: center;
  }
}