/* ShopNegar Panel UI v1.3.0 — canonical stylesheet */
:root {
  --sn-navy-950: #071426;
  --sn-navy-900: #0b1f3a;
  --sn-navy-800: #123054;
  --sn-navy-700: #1c4168;
  --sn-teal-700: #087b7a;
  --sn-teal-600: #0d9488;
  --sn-teal-500: #16b3a7;
  --sn-teal-100: #dff7f3;
  --sn-teal-50: #effcf9;
  --sn-blue-600: #1877d2;
  --sn-blue-100: #dcecff;
  --sn-blue-50: #f1f7ff;
  --sn-amber-600: #c47a0a;
  --sn-amber-100: #ffedc7;
  --sn-amber-50: #fff8e9;
  --sn-red-600: #c4374d;
  --sn-red-100: #ffdce3;
  --sn-red-50: #fff3f5;
  --sn-green-700: #18744f;
  --sn-green-100: #d9f5e8;
  --sn-green-50: #effbf5;
  --sn-ink: #132238;
  --sn-text: #263a52;
  --sn-muted: #6b7f97;
  --sn-border: #dbe4ee;
  --sn-border-strong: #c7d4e2;
  --sn-surface: #ffffff;
  --sn-surface-alt: #f7f9fc;
  --sn-canvas: #f2f5f8;
  --sn-shadow-xs: 0 1px 2px rgba(11, 31, 58, .05);
  --sn-shadow-sm: 0 8px 22px rgba(11, 31, 58, .07);
  --sn-shadow-md: 0 18px 46px rgba(11, 31, 58, .12);
  --sn-radius-sm: 8px;
  --sn-radius-md: 12px;
  --sn-radius-lg: 18px;
  --sn-sidebar: 264px;
  --sn-topbar: 68px;
  --sn-content: 1440px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--sn-canvas); scroll-behavior: smooth; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--sn-text);
  background: var(--sn-canvas);
  font-family: Vazirmatn, IRANSansX, Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
body.sidebar-locked { overflow: hidden; }
a { color: var(--sn-blue-600); text-decoration: none; }
a:hover { color: var(--sn-teal-700); }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
::selection { background: var(--sn-teal-100); color: var(--sn-navy-950); }

.sn-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.muted { color: var(--sn-muted); }
.ltr, [dir="ltr"] { direction: ltr; text-align: left; }
.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;
}

/* Application shell */
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset-block: 0;
  right: 0;
  left: auto;
  z-index: 80;
  display: flex;
  width: var(--sn-sidebar);
  flex-direction: column;
  color: #d9e6f5;
  background:
    radial-gradient(circle at 100% 0, rgba(22, 179, 167, .18), transparent 34%),
    linear-gradient(180deg, var(--sn-navy-900), var(--sn-navy-950));
  border-left: 1px solid rgba(255,255,255,.06);
  box-shadow: -8px 0 30px rgba(7, 20, 38, .12);
}
.brand-card {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-block-end: 1px solid rgba(255,255,255,.09);
}
.brand-home { display: flex; min-width: 0; align-items: center; gap: 11px; color: #fff; }
.brand-home:hover { color: #fff; }
.brand-logo-wrap {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  color: var(--sn-navy-900);
  background: linear-gradient(145deg, #fff, #d9fff8);
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.brand-logo-wrap img { width: 28px; height: 28px; }
.brand-logo-wrap span { display: none; font-size: 19px; font-weight: 900; }
.brand-logo-wrap img[src=""] + span { display: block; }
.brand-title { display: block; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.brand-subtitle { display: block; margin-block-start: 1px; color: #8fa6c2; font-size: 11px; }
.sidebar-close {
  display: none;
  width: 36px;
  height: 36px;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 0;
  border-radius: 10px;
  font-size: 24px;
}
.sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 16px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.nav-section-title { margin: 9px 12px 7px; color: #7188a5; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.nav-list { display: grid; gap: 3px; }
.nav-item,
.nav-disclosure > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  color: #c2d1e3;
  border: 1px solid transparent;
  border-radius: 11px;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.nav-item b,
.nav-disclosure summary b { flex: 1 1 auto; font-size: 13px; font-weight: 690; }
.nav-item small { min-width: 21px; padding: 0 6px; color: #07292a; background: #82e9dd; border-radius: 999px; text-align: center; }
.nav-item:hover,
.nav-disclosure > summary:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(13,148,136,.34), rgba(13,148,136,.16));
  border-color: rgba(94, 234, 212, .22);
  box-shadow: inset -3px 0 0 #37d9c8;
}
.nav-disclosure { margin-block: 9px; }
.nav-disclosure > summary { list-style: none; cursor: pointer; }
.nav-disclosure > summary::-webkit-details-marker { display: none; }
.nav-disclosure > summary .sn-icon:last-child { width: 15px; transition: transform .2s ease; }
.nav-disclosure[open] > summary .sn-icon:last-child { transform: rotate(-90deg); }
.nav-list.nested { margin: 2px 20px 2px 0; padding-inline-start: 8px; border-inline-start: 1px solid rgba(255,255,255,.09); }
.nav-list.nested .nav-item { min-height: 40px; padding-block: 8px; }
.nav-list.nested .nav-item .sn-icon { width: 17px; height: 17px; }
.sidebar-footer { padding: 13px 14px 17px; border-block-start: 1px solid rgba(255,255,255,.09); }
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}
.sidebar-user-avatar { display: grid; width: 34px; height: 34px; place-items: center; color: #052b32; background: #72e5d8; border-radius: 10px; font-weight: 900; }
.sidebar-user-meta { min-width: 0; flex: 1; }
.sidebar-user-meta strong,
.sidebar-user-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-meta small { color: #829bb9; font-size: 10px; }
.sidebar-logout { color: #ff9caa; font-size: 12px; font-weight: 700; }
.sidebar-logout:hover { color: #ffc2cb; }
.sidebar-logout { display: block; margin-block-start: 9px; padding: 5px 10px; text-align: center; }

.main-shell { min-height: 100vh; margin-right: var(--sn-sidebar); margin-left: 0; }
.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  display: flex;
  height: var(--sn-topbar);
  align-items: center;
  gap: 14px;
  padding-inline: clamp(18px, 3vw, 42px);
  background: rgba(255,255,255,.93);
  border-block-end: 1px solid var(--sn-border);
  backdrop-filter: blur(14px);
}
.topbar-start { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; }
.topbar-end { display: flex; align-items: center; gap: 8px; }
.sidebar-open {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--sn-navy-900);
  background: var(--sn-surface-alt);
  border: 1px solid var(--sn-border);
  border-radius: 10px;
}
.breadcrumb { min-width: 0; }
.breadcrumb strong { display: block; color: var(--sn-ink); font-size: 13px; }
.breadcrumb b { display: block; color: var(--sn-ink); font-size: 13px; }
.breadcrumb span { display: block; color: var(--sn-muted); font-size: 10px; }
.breadcrumb small { display: block; max-width: 540px; overflow: hidden; color: var(--sn-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search {
  display: flex;
  width: min(360px, 30vw);
  height: 40px;
  align-items: center;
  gap: 9px;
  padding-inline: 12px;
  color: var(--sn-muted);
  background: var(--sn-surface-alt);
  border: 1px solid var(--sn-border);
  border-radius: 10px;
  text-align: start;
}
.topbar-search span { flex: 1; }
.topbar-search kbd { color: var(--sn-muted); background: #fff; border: 1px solid var(--sn-border); border-radius: 5px; font: 10px/1.4 monospace; padding: 1px 5px; }
.topbar-icon,
.topbar-primary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  color: var(--sn-text);
  background: #fff;
  border: 1px solid var(--sn-border);
  border-radius: 10px;
  font-weight: 700;
}
.topbar-icon { position: relative; width: 40px; padding: 0; }
.topbar-primary { color: #fff; background: var(--sn-teal-700); border-color: var(--sn-teal-700); }
.topbar-primary:hover { color: #fff; background: #056c6b; }
.notification-dot { position: absolute; inset-block-start: 7px; inset-inline-start: 7px; min-width: 16px; height: 16px; padding-inline: 3px; color: #fff; background: var(--sn-red-600); border: 2px solid #fff; border-radius: 999px; font-size: 8px; line-height: 12px; }
.content { width: min(100%, var(--sn-content)); margin-inline: auto; padding: 28px clamp(18px, 3vw, 42px) 64px; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(7,20,38,.55); backdrop-filter: blur(2px); }
.mobile-nav { display: none; }

/* Page framing */
.page-heading,
.sn-hero,
.page-hero,
.platform-hero,
.workdesk-hero-v016,
.orders-hero,
.report-hero,
.shipping-hero,
.sn-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 22px;
  padding: 0;
  background: transparent;
  border: 0;
}
.page-heading h1,
.sn-hero h1,
.page-hero h1,
.platform-hero h1,
.workdesk-hero-v016 h1,
.orders-hero h1,
.report-hero h1,
.shipping-hero h1,
.sn-page-header h1 { margin: 0; color: var(--sn-ink); font-size: clamp(25px, 3vw, 36px); line-height: 1.3; letter-spacing: -.035em; }
.page-heading p,
.sn-hero p,
.page-hero p,
.platform-hero p,
.workdesk-hero-v016 p,
.orders-hero p,
.report-hero p,
.shipping-hero p,
.sn-page-header p { max-width: 720px; margin: 6px 0 0; color: var(--sn-muted); font-size: 13px; }
.page-kicker,
.sn-kicker,
.eyebrow,
.platform-kicker,
.report-kicker,
.workdesk-kicker-v016 { display: inline-flex; margin-block-end: 5px; color: var(--sn-teal-700); font-size: 11px; font-weight: 800; }
.page-actions,
.sn-actions,
.platform-actions,
.workdesk-actions-v016,
.orders-actions,
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Buttons and controls */
.btn,
button,
input[type="submit"],
.button,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success {
  min-height: 42px;
  padding: 9px 15px;
  color: var(--sn-text);
  background: #fff;
  border: 1px solid var(--sn-border-strong);
  border-radius: 10px;
  box-shadow: var(--sn-shadow-xs);
  font-weight: 750;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover,
button:hover,
input[type="submit"]:hover,
.button:hover { border-color: #a9b9ca; box-shadow: 0 5px 14px rgba(11,31,58,.09); transform: translateY(-1px); }
.btn.primary,
button.primary,
.btn-primary,
form > button[type="submit"],
.actions > button[type="submit"] { color: #fff; background: var(--sn-teal-700); border-color: var(--sn-teal-700); }
.btn.primary:hover,
button.primary:hover,
.btn-primary:hover,
form > button[type="submit"]:hover { color: #fff; background: #056c6b; border-color: #056c6b; }
.btn.secondary,
.btn-secondary { color: var(--sn-navy-800); background: #fff; }
.btn.danger,
.btn-danger,
button.danger { color: var(--sn-red-600); background: var(--sn-red-50); border-color: #f2b6c1; }
.btn.success,
.btn-success { color: var(--sn-green-700); background: var(--sn-green-50); border-color: #b5e7d0; }
.btn.small,
button.small { min-height: 34px; padding: 6px 10px; border-radius: 8px; font-size: 12px; }
.btn.icon-only { width: 42px; padding: 0; }
.btn:disabled,
button:disabled { cursor: not-allowed; opacity: .55; transform: none; }

label { display: grid; align-content: start; gap: 6px; color: var(--sn-text); font-size: 12px; font-weight: 750; }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
  width: 100%;
  min-height: 43px;
  padding: 9px 12px;
  color: var(--sn-ink);
  background: #fff;
  border: 1px solid var(--sn-border-strong);
  border-radius: 10px;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(11,31,58,.025);
  font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea { min-height: 104px; resize: vertical; }
input:hover,
select:hover,
textarea:hover { border-color: #9fb0c3; }
input:focus,
select:focus,
textarea:focus { border-color: var(--sn-teal-600); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
input[readonly],
input:disabled,
select:disabled,
textarea:disabled { color: #60738a; background: #eef3f8; }
input[type="checkbox"],
input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--sn-teal-700); }
input[type="color"] { width: 52px; height: 40px; padding: 4px; background: #fff; border: 1px solid var(--sn-border); border-radius: 9px; }
label small,
.field-hint,
.help-text { color: var(--sn-muted); font-size: 11px; font-weight: 450; }
.form-grid,
.sn-form-grid,
.grid-form-v104,
.grid-form-v70,
.settings-grid,
.shipping-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.form-grid.cols-3,
.sn-form-grid.cols-3,
.grid-form-v104.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .full,
.sn-form-grid .full,
.grid-form-v104 .full,
.grid-form-v70 .full,
.settings-grid .full,
.shipping-form-grid .full { grid-column: 1 / -1; }
.form-actions,
.actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; justify-content: flex-start; gap: 8px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.inline-form > label { min-width: 180px; flex: 1; }
.checkbox-field,
.switch-field { display: flex; min-height: 46px; align-items: center; gap: 9px; padding: 10px 12px; background: var(--sn-surface-alt); border: 1px solid var(--sn-border); border-radius: 10px; }

/* Cards and grids */
.card,
.sn-card,
.panel,
.orders-panel,
.report-card,
.platform-card,
.workdesk-card-v016,
.store-health-card-v106,
.form-card,
.settings-section {
  color: var(--sn-text);
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-lg);
  box-shadow: var(--sn-shadow-xs);
}
.card,
.sn-card,
.panel,
.orders-panel,
.report-card,
.platform-card,
.workdesk-card-v016,
.form-card,
.settings-section { padding: 22px; }
.card h2,
.sn-card h2,
.panel h2,
.orders-panel h2,
.report-card h2,
.platform-card h2,
.workdesk-card-v016 h2,
.form-card h2,
.settings-section h2 { margin: 0 0 5px; color: var(--sn-ink); font-size: 18px; line-height: 1.45; }
.card h3,
.sn-card h3,
.panel h3 { margin: 0 0 6px; color: var(--sn-ink); font-size: 15px; }
.card > p:first-of-type,
.sn-card > p:first-of-type,
.panel > p:first-of-type { margin-block-start: 0; color: var(--sn-muted); }
.grid,
.sn-grid,
.sn-grid-2,
.grid-2,
.report-grid,
.workdesk-grid-v016,
.platform-panels { display: grid; gap: 16px; }
.sn-grid-2,
.grid-2,
.report-grid,
.workdesk-grid-v016,
.platform-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sn-grid-3,
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stack { display: grid; gap: 16px; }
.section-gap { margin-block-start: 18px; }
.card-header,
.panel-header,
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-block-end: 16px; }
.card-header h2,
.panel-header h2,
.section-header h2 { margin: 0; }

/* Operational metrics */
.metric-grid,
.sn-metrics,
.kpi-grid,
.orders-kpis,
.report-kpis,
.platform-product-kpis,
.workdesk-kpis-v016,
.store-health-grid-v106 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-block-end: 18px; }
.metric-card,
.sn-metric,
.kpi-card,
.orders-kpi,
.report-kpi,
.platform-product-kpi,
.workdesk-kpi-v016,
.store-health-card-v106 {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  padding: 19px;
  background: #fff;
  border: 1px solid var(--sn-border);
  border-radius: 15px;
  box-shadow: var(--sn-shadow-xs);
}
.metric-card::before,
.sn-metric::before,
.kpi-card::before,
.orders-kpi::before,
.report-kpi::before,
.platform-product-kpi::before,
.workdesk-kpi-v016::before,
.store-health-card-v106::before { position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; content: ""; background: var(--metric-accent, var(--sn-teal-600)); }
.metric-card.warning,
.kpi-card.warning { --metric-accent: var(--sn-amber-600); }
.metric-card.danger,
.kpi-card.danger { --metric-accent: var(--sn-red-600); }
.metric-card.blue,
.kpi-card.blue { --metric-accent: var(--sn-blue-600); }
.metric-label,
.sn-metric span,
.kpi-card .label,
.orders-kpi span,
.report-kpi span,
.platform-product-kpi span,
.workdesk-kpi-v016 span,
.store-health-card-v106 span { display: block; color: var(--sn-muted); font-size: 11px; font-weight: 700; }
.metric-value,
.sn-metric strong,
.kpi-card strong,
.orders-kpi strong,
.report-kpi strong,
.platform-product-kpi strong,
.workdesk-kpi-v016 strong,
.store-health-card-v106 strong { display: block; margin-block: 8px 2px; color: var(--sn-ink); font-size: clamp(24px, 2.5vw, 32px); line-height: 1.25; }
.metric-meta,
.kpi-card small,
.orders-kpi small,
.report-kpi small,
.platform-product-kpi small,
.workdesk-kpi-v016 small,
.store-health-card-v106 small { color: var(--sn-muted); font-size: 10px; }
.metric-icon { position: absolute; inset-block-start: 18px; inset-inline-start: 18px; display: grid; width: 36px; height: 36px; place-items: center; color: var(--sn-teal-700); background: var(--sn-teal-50); border-radius: 10px; }

/* Operational dashboard primitives */
.operations-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .8fr); gap: 16px; min-width: 0; }
.operations-main,
.operations-aside { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; }
.operations-main > *,
.operations-aside > * { min-width: 0; }
.action-queue { display: grid; gap: 9px; }
.action-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 11px; background: var(--sn-surface-alt); border: 1px solid var(--sn-border); border-radius: 11px; }
.action-row .action-icon { display: grid; width: 38px; height: 38px; place-items: center; color: var(--sn-teal-700); background: #fff; border: 1px solid var(--sn-border); border-radius: 10px; }
.action-row strong,
.action-row small { display: block; }
.action-row small { color: var(--sn-muted); font-size: 10px; }
.chart-shell { min-height: 240px; padding: 14px; background: linear-gradient(180deg, #fbfdff, #f4f8fc); border: 1px solid var(--sn-border); border-radius: 13px; }
.chart-bars { display: flex; height: 170px; align-items: end; justify-content: space-between; gap: 8px; padding: 14px 8px 0; border-block-end: 1px solid var(--sn-border); }
.chart-bar { position: relative; width: 100%; max-width: 32px; min-height: 4px; background: linear-gradient(180deg, var(--sn-teal-500), var(--sn-teal-700)); border-radius: 7px 7px 2px 2px; }
.chart-labels { display: flex; justify-content: space-between; gap: 8px; padding: 8px 4px 0; color: var(--sn-muted); font-size: 9px; }
.pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pipeline-step { padding: 12px; background: var(--sn-surface-alt); border: 1px solid var(--sn-border); border-radius: 11px; text-align: center; }
.pipeline-step strong { display: block; color: var(--sn-ink); font-size: 20px; }
.pipeline-step span { color: var(--sn-muted); font-size: 10px; }
.task-list { display: grid; gap: 8px; }
.task-item { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid var(--sn-border); border-radius: 11px; }
.task-item.done { color: var(--sn-muted); background: var(--sn-surface-alt); }
.task-status { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; color: #fff; background: var(--sn-teal-700); border-radius: 6px; font-size: 11px; }
.task-item:not(.done) .task-status { color: var(--sn-muted); background: #fff; border: 1px solid var(--sn-border-strong); }

/* Tables */
.table-wrap,
.sn-table-wrap,
.responsive-table,
.orders-table-wrap,
.report-table-wrap { max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--sn-border); border-radius: 13px; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; color: var(--sn-text); font-size: 12px; }
th,
td { min-width: 110px; padding: 12px 13px; border-block-end: 1px solid #e8eef4; text-align: start; vertical-align: middle; }
th { color: #52667e; background: #f6f8fb; font-size: 10px; font-weight: 850; white-space: nowrap; }
tbody tr { transition: background .13s ease; }
tbody tr:hover { background: #fbfdfd; }
tbody tr:last-child td { border-block-end: 0; }
td.actions-cell { min-width: 150px; }
.table-toolbar,
.toolbar,
.filters,
.orders-toolbar,
.report-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-block-end: 13px; }
.table-toolbar .searchbox,
.toolbar .searchbox,
.filters .searchbox,
.orders-toolbar input[type="search"] { min-width: 240px; flex: 1; }
.table-empty,
.empty-state {
  display: grid;
  min-height: 160px;
  place-items: center;
  gap: 8px;
  padding: 28px;
  color: var(--sn-muted);
  background: var(--sn-surface-alt);
  border: 1px dashed var(--sn-border-strong);
  border-radius: 13px;
  text-align: center;
}
.empty-state.compact { min-height: 100px; padding: 20px; }
.empty-state h3 { margin: 0; color: var(--sn-text); }
.empty-state p { margin: 0; }
.badge,
.status-badge,
.pill,
.status,
.tag {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 8px;
  color: #385069;
  background: #edf3f8;
  border: 1px solid #dae4ed;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.badge.success,
.badge.ok,
.status-badge.success,
.status.success,
.badge.active,
.status-active { color: var(--sn-green-700); background: var(--sn-green-50); border-color: #bfead5; }
.badge.warning,
.badge.warn,
.status-badge.warning,
.status.warning,
.status-pending { color: #965200; background: var(--sn-amber-50); border-color: #f2d39a; }
.badge.danger,
.badge.bad,
.status-badge.danger,
.status.danger,
.status-failed { color: var(--sn-red-600); background: var(--sn-red-50); border-color: #f1bcc5; }
.badge.info,
.status-badge.info,
.status.info { color: #175fa6; background: var(--sn-blue-50); border-color: #bfdafa; }

/* Store list and dense administration */
.store-admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; }
.store-admin-main,
.store-admin-aside { min-width: 0; }
.store-admin-aside { display: grid; align-content: start; gap: 16px; }
.store-cell { display: flex; min-width: 190px; align-items: center; gap: 10px; }
.store-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: var(--sn-teal-700); background: var(--sn-teal-50); border: 1px solid #c9ece6; border-radius: 10px; font-weight: 900; }
.store-cell strong,
.store-cell small { display: block; }
.store-cell small { color: var(--sn-muted); font: 10px/1.5 ui-monospace, Consolas, monospace; direction: ltr; text-align: right; }
.health-list { display: grid; gap: 8px; }
.health-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; background: var(--sn-surface-alt); border: 1px solid var(--sn-border); border-radius: 10px; }
.health-row strong { font-size: 12px; }
.health-row span { color: var(--sn-muted); font-size: 10px; }
.compact-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.compact-stat { padding: 9px; background: var(--sn-surface-alt); border: 1px solid var(--sn-border); border-radius: 10px; text-align: center; }
.compact-stat strong { display: block; color: var(--sn-ink); font-size: 18px; }
.compact-stat span { color: var(--sn-muted); font-size: 9px; }

/* Orders and courier quote */
.order-board,
.market-order-list { display: grid; gap: 11px; }
.order-card {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--sn-border);
  border-radius: 14px;
  box-shadow: var(--sn-shadow-xs);
}
.order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.order-top h3 { margin: 0; color: var(--sn-ink); font-size: 15px; }
.order-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-block: 9px; color: var(--sn-muted); font-size: 11px; }
.order-total { min-width: 150px; text-align: end; }
.order-total small,
.order-total strong { display: block; }
.order-total small { color: var(--sn-muted); font-size: 10px; }
.order-total strong { margin-block-start: 4px; color: var(--sn-ink); font-size: 18px; }
.order-filterbar { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(190px, .45fr) auto; align-items: end; }
.order-filterbar label { min-width: 0; }
.order-card .badges { margin-block: 11px; }
.order-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; padding-block-start: 11px; border-block-start: 1px solid var(--sn-border); }
.quote-fee-inline,
.courier-quote-box { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 8px; margin-block-start: 10px; padding: 11px; background: var(--sn-amber-50); border: 1px solid #efcf91; border-radius: 11px; }
.quote-fee-inline p,
.courier-quote-box p { grid-column: 1 / -1; margin: 0; color: #805112; font-size: 10px; }

/* Settings */
.settings-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: 16px; }
.settings-nav { position: sticky; inset-block-start: calc(var(--sn-topbar) + 18px); display: grid; gap: 5px; padding: 10px; background: #fff; border: 1px solid var(--sn-border); border-radius: 14px; box-shadow: var(--sn-shadow-xs); }
.settings-nav button { min-height: 39px; justify-content: flex-start; padding: 8px 10px; border-color: transparent; box-shadow: none; text-align: start; }
.settings-nav button.active { color: var(--sn-teal-700); background: var(--sn-teal-50); border-color: #caece7; }
.settings-content { min-width: 0; }
.settings-section { margin-block-end: 14px; scroll-margin-top: calc(var(--sn-topbar) + 20px); }
.settings-section-header { margin-block-end: 17px; padding-block-end: 13px; border-block-end: 1px solid var(--sn-border); }
.settings-section-header h2 { margin: 0; color: var(--sn-ink); }
.settings-section-header p { margin: 4px 0 0; color: var(--sn-muted); font-size: 11px; }
.settings-savebar { position: sticky; inset-block-end: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 14px; padding: 11px 13px; background: rgba(11,31,58,.95); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; box-shadow: var(--sn-shadow-md); backdrop-filter: blur(12px); }
.settings-savebar span { color: #c3d3e5; font-size: 11px; }

/* Alerts, toast, drawer and dialogs */
.alert,
.ng-alert-v104,
.notice,
.flash { margin-block: 12px; padding: 11px 13px; color: #664308; background: var(--sn-amber-50); border: 1px solid #efd39d; border-radius: 10px; }
.alert.success,
.notice.success { color: var(--sn-green-700); background: var(--sn-green-50); border-color: #b9e8d1; }
.alert.danger,
.notice.danger,
.login160-error { color: var(--sn-red-600); background: var(--sn-red-50); border: 1px solid #f2bdc6; border-radius: 10px; padding: 10px 12px; }
.toast,
.sn-toast {
  position: fixed;
  inset-block-start: 84px;
  inset-inline-start: 22px;
  z-index: 140;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  color: #fff;
  background: var(--sn-navy-900);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  box-shadow: var(--sn-shadow-md);
}
.sn-toast-container { position: fixed; inset-block-start: 78px; inset-inline-start: 18px; z-index: 145; display: grid; width: min(380px, calc(100vw - 36px)); gap: 9px; }
.sn-toast { position: relative; inset: auto; display: flex; width: 100%; align-items: flex-start; gap: 10px; }
.sn-toast.success { background: #0b6652; }
.sn-toast.danger { background: #9e2940; }
.sn-toast strong,
.sn-toast p { display: block; margin: 0; }
.sn-toast p { color: rgba(255,255,255,.82); font-size: 11px; }
.sn-toast-close { width: 27px; min-height: 27px; flex: 0 0 27px; padding: 0; color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
.drawer,
.sn-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 120;
  width: min(460px, 94vw);
  overflow-y: auto;
  padding: 22px;
  background: #fff;
  border-inline-end: 1px solid var(--sn-border);
  box-shadow: 16px 0 50px rgba(7,20,38,.18);
  transform: translateX(-102%);
  transition: transform .22s ease;
}
.drawer.open,
.sn-drawer:not([hidden]) { transform: translateX(0); }
.drawer-backdrop,
.sn-drawer-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(7,20,38,.5); }
.drawer-backdrop.open { display: block; }
.sn-drawer-close { position: sticky; inset-block-start: 0; z-index: 2; width: 38px; min-height: 38px; padding: 0; }
.command-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 40px));
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sn-border);
  border-radius: 17px;
  box-shadow: 0 30px 90px rgba(7,20,38,.28);
}
.command-dialog::backdrop { background: rgba(7,20,38,.6); backdrop-filter: blur(4px); }
.command-head { display: flex; align-items: center; gap: 10px; padding: 14px; border-block-end: 1px solid var(--sn-border); }
.command-head input { border: 0; box-shadow: none; }
.command-close { width: 38px; min-height: 38px; padding: 0; }
.command-list { display: grid; gap: 3px; max-height: 500px; overflow-y: auto; padding: 9px; }
.command-item { display: flex; align-items: center; gap: 10px; padding: 10px; color: var(--sn-text); border-radius: 9px; }
.command-item:hover,
.command-item:focus { color: var(--sn-ink); background: var(--sn-surface-alt); }

/* Public shell and authentication */
.public-body-v104 { background: #f4f7fa; }
.public-shell-v104 { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.public-header-v104 { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 18px; }
.ng-brand-v104 { display: flex; align-items: center; gap: 10px; color: var(--sn-ink); }
.ng-brand-mark-v104 { display: grid; width: 45px; height: 45px; place-items: center; color: #fff; background: linear-gradient(145deg, var(--sn-teal-600), var(--sn-blue-600)); border-radius: 14px; font-weight: 900; }
.ng-brand-text-v104 strong,
.ng-brand-text-v104 span { display: block; }
.ng-brand-text-v104 span { color: var(--sn-muted); font-size: 11px; }
.public-nav-v104 { display: flex; flex-wrap: wrap; gap: 7px; }
.public-nav-v104 a { display: inline-flex; min-height: 40px; align-items: center; padding: 8px 13px; color: var(--sn-text); background: #fff; border: 1px solid var(--sn-border); border-radius: 10px; font-weight: 700; }
.public-nav-v104 a.primary { color: #fff; background: var(--sn-teal-700); border-color: var(--sn-teal-700); }
.public-main-v104 { padding-block: 34px 60px; }
.public-footer-v104 { padding-block: 40px; color: #c4d2e3; background: var(--sn-navy-950); }
.footer-grid-v104 { display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 28px; }
.footer-grid-v104 h3 { color: #fff; }
.footer-grid-v104 a { color: #91eee2; }
.footer-links-v104 { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-contact-v104 { padding: 0; list-style: none; }
.form-shell-v104 { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; align-items: start; }
.form-side-v104,
.form-card-v104 { padding: clamp(24px, 4vw, 36px); border-radius: 22px; box-shadow: var(--sn-shadow-sm); }
.form-side-v104 { position: sticky; inset-block-start: 18px; color: #fff; background: linear-gradient(145deg, var(--sn-navy-900), #0a6d76); }
.form-side-v104 h1 { color: #fff; font-size: 31px; }
.form-side-v104 li { margin-block: 10px; }
.form-card-v104 { background: #fff; border: 1px solid var(--sn-border); }
.form-card-v104 > h1 { margin: 7px 0; color: var(--sn-ink); }
.auth-kicker-v104,
.auth-kicker-light-v104 { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.auth-kicker-v104 { color: #d8fff9; background: rgba(255,255,255,.1); }
.auth-kicker-light-v104 { color: var(--sn-teal-700); background: var(--sn-teal-50); }
.ng-help-link-v185 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block: 18px; padding: 13px 15px; color: #fff; background: linear-gradient(90deg, var(--sn-teal-600), var(--sn-blue-600)); border-radius: 12px; font-weight: 800; }
.ng-help-link-v185 span,
.ng-help-link-v185 small { display: block; }
.ng-help-link-v185 small { color: rgba(255,255,255,.8); }

.login160-body { display: grid; min-height: 100vh; place-items: center; padding: 26px; background: radial-gradient(circle at 15% 10%, #dff9f5, transparent 34%), #edf2f7; }
.login160-shell { display: grid; width: min(1080px, 100%); grid-template-columns: 1.05fr .85fr; overflow: hidden; background: #fff; border: 1px solid var(--sn-border); border-radius: 24px; box-shadow: 0 24px 80px rgba(11,31,58,.17); }
.login160-info { padding: clamp(32px, 5vw, 58px); color: #d7e6f7; background: linear-gradient(145deg, var(--sn-navy-900), #0a6f75); }
.login160-logo { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 19px; font-weight: 900; }
.login160-mark { display: grid; width: 42px; height: 42px; place-items: center; color: var(--sn-navy-900); background: #fff; border-radius: 13px; }
.login160-info h1 { max-width: 520px; margin: 28px 0 12px; color: #fff; font-size: clamp(31px, 4vw, 45px); line-height: 1.25; }
.login160-info p { color: #b7cada; }
.login160-list { display: grid; gap: 9px; margin-block-start: 26px; }
.login160-list span { position: relative; padding: 10px 42px 10px 12px; color: #e7f5ff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }
.login160-list span::before { position: absolute; inset-block-start: 50%; inset-inline-start: 13px; display: grid; width: 20px; height: 20px; place-items: center; content: "✓"; color: #052b32; background: #72e5d8; border-radius: 7px; font-size: 11px; font-weight: 900; transform: translateY(-50%); }
.login160-card { align-self: center; padding: clamp(28px, 5vw, 48px); }
.login160-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-block-end: 23px; }
.login160-tabs a { display: grid; min-height: 42px; place-items: center; color: var(--sn-text); background: #fff; border: 1px solid var(--sn-border); border-radius: 10px; font-weight: 750; }
.login160-title { color: var(--sn-ink); font-size: 25px; font-weight: 900; }
.login160-card form { display: grid; gap: 14px; margin-block-start: 18px; }
.login160-note { margin-block-start: 16px; color: var(--sn-muted); font-size: 11px; }

/* Legacy content normalized into the new system */
.sn-shell,
.page-shell,
.platform-shell,
.workdesk-shell-v016,
.orders-shell,
.report-shell,
.shipping-shell,
.success-settings-shell,
.platform-product-shell,
.store-edit-shell-v106,
.help-shell { width: 100%; margin: 0; padding: 0; }
.sn-card + .sn-card,
.card + .card,
.report-card + .report-card,
.orders-panel + .orders-panel { margin-block-start: 16px; }
.hero-accent,
.page-top-line,
.report-line { display: none; }
.hero-badge,
.sn-eyebrow,
.label-chip { display: inline-flex; margin-block-end: 5px; padding: 3px 8px; color: var(--sn-teal-700); background: var(--sn-teal-50); border: 1px solid #c7ece7; border-radius: 999px; font-size: 10px; font-weight: 800; }
.links-row,
.button-row,
.badges { display: flex; flex-wrap: wrap; gap: 7px; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-block: 8px; }
.secret-field { display: grid; grid-template-columns: 1fr auto auto; gap: 7px; }
.danger-zone { padding: 16px; background: var(--sn-red-50); border: 1px solid #f0bec7; border-radius: 12px; }
.modal-dialog {
  width: min(720px, calc(100vw - 30px));
  max-height: calc(100vh - 36px);
  padding: 0;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--sn-border);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(7,20,38,.26);
}
.modal-dialog::backdrop { background: rgba(7,20,38,.58); backdrop-filter: blur(4px); }
.modal-form { display: grid; gap: 18px; padding: 22px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-block-end: 14px; border-block-end: 1px solid var(--sn-border); }
.modal-header h2 { margin: 0; color: var(--sn-ink); }
.modal-header p { margin: 3px 0 0; color: var(--sn-muted); font-size: 11px; }
.modal-header button { width: 38px; min-height: 38px; padding: 0; }
.modal-actions { display: flex; justify-content: flex-start; gap: 8px; padding-block-start: 14px; border-block-start: 1px solid var(--sn-border); }
.card-title { color: var(--sn-ink); font-size: 18px; font-weight: 850; }
.card-subtitle { margin-block-start: 3px; color: var(--sn-muted); font-size: 11px; }
.sn-num { margin-block: 7px 2px; color: var(--sn-ink); font-size: 29px; font-weight: 900; }
.sn-sub { color: var(--sn-muted); font-size: 11px; font-weight: 750; }
.sn-compact-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sn-compact-actions form { display: inline-flex; margin: 0; }
.empty { display: grid; min-height: 120px; place-items: center; padding: 22px; color: var(--sn-muted); background: var(--sn-surface-alt); border: 1px dashed var(--sn-border-strong); border-radius: 12px; }
.divider { height: 1px; margin-block: 16px; background: var(--sn-border); }

/* v1.3 — complete operational page system */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px;
}
.page-head h1 { margin: 5px 0 0; color: var(--sn-ink); font-size: clamp(25px, 3vw, 36px); line-height: 1.3; letter-spacing: -.035em; }
.page-head p { max-width: 760px; margin: 7px 0 0; color: var(--sn-muted); line-height: 1.9; }

.sn-page { display: grid; gap: 18px; }
.sn-section-grid,
.grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sn-section-card,
.compact-card {
  min-width: 0;
  padding: 20px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-lg);
  box-shadow: var(--sn-shadow-sm);
}
.sn-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-block-end: 17px; }
.sn-section-head h2,
.sn-section-head h3 { margin: 0; color: var(--sn-ink); font-size: 18px; }
.sn-section-head p { margin: 5px 0 0; color: var(--sn-muted); font-size: 12px; line-height: 1.8; }
.sn-section-head .searchbox { width: min(310px, 100%); }

.sn-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sn-stat-tile,
.kpi,
.card.stat {
  position: relative;
  min-width: 0;
  min-height: 128px;
  padding: 18px;
  overflow: hidden;
  background: linear-gradient(145deg, #fff, #fbfefd);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-lg);
  box-shadow: var(--sn-shadow-sm);
}
.sn-stat-tile::before,
.kpi::before,
.card.stat::before { content: ""; position: absolute; inset-block: 0 auto; inset-inline: 0 auto; width: 4px; background: var(--sn-teal-500); }
.sn-stat-tile > span,
.kpi > span,
.card.stat .label { display: block; color: var(--sn-muted); font-size: 12px; font-weight: 800; }
.sn-stat-tile > strong,
.kpi > b,
.card.stat .num { display: block; margin-block: 13px 6px; color: var(--sn-ink); font-size: 27px; line-height: 1; }
.sn-stat-tile > small,
.card.stat .hint { color: var(--sn-muted); font-size: 11px; }
.metric-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-block-end: 1px solid var(--sn-border); }
.metric-row:last-child { border-block-end: 0; }
.metric-row > span { color: var(--sn-text); font-weight: 750; }
.metric-row > b { margin-inline-start: auto; color: var(--sn-ink); }
.metric-row > small { color: var(--sn-muted); white-space: nowrap; }
.metric-icon { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 42px; color: var(--sn-teal-700); background: var(--sn-teal-50); border: 1px solid var(--sn-teal-100); border-radius: 13px; }

.sn-filterbar,
.toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .42fr) auto;
  gap: 10px;
  padding: 12px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  border-radius: 16px;
  box-shadow: var(--sn-shadow-xs);
}
.sn-filterbar > :only-child,
.toolbar > :only-child { grid-column: 1 / -1; }
.sn-filterbar button,
.toolbar button { min-width: 94px; }

.sn-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 18px; }
.sn-form-main { display: grid; gap: 16px; }
.sn-form-aside { position: sticky; inset-block-start: calc(var(--sn-topbar) + 18px); display: grid; gap: 12px; }
.sn-form-layout > .sn-savebar { grid-column: 1 / -1; }
.sn-form-section { padding: 20px; background: #fff; border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow-sm); }
.sn-form-section > h2,
.sn-form-section > header h2 { margin: 0; color: var(--sn-ink); font-size: 18px; }
.sn-form-section > header { margin-block-end: 17px; }
.sn-form-section > header p { margin: 5px 0 0; color: var(--sn-muted); line-height: 1.8; font-size: 12px; }
.sn-help-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sn-help-list li { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; color: var(--sn-text); line-height: 1.8; }
.sn-help-list li::before { content: "✓"; display: grid; width: 25px; height: 25px; place-items: center; color: var(--sn-green-700); background: var(--sn-green-50); border-radius: 8px; font-weight: 950; }
.sn-help-list li > span { grid-column: 2; color: var(--sn-muted); }
.sn-savebar { position: sticky; inset-block-end: 16px; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.95); border: 1px solid var(--sn-border-strong); border-radius: 16px; box-shadow: 0 18px 45px rgba(11,31,58,.14); backdrop-filter: blur(14px); }
.sn-savebar p { margin: 0; color: var(--sn-muted); font-size: 12px; }
.sn-savebar small { display: block; margin-block-start: 3px; color: var(--sn-muted); font-size: 11px; }

.product-attrs-card { display: grid; gap: 13px; }
.product-attrs-head { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.product-attrs-head b,
.product-attrs-head span { display: block; }
.product-attrs-head b { color: var(--sn-ink); font-size: 15px; }
.product-attrs-head span { margin-block-start: 3px; color: var(--sn-muted); font-size: 11px; }
.attrs-grid { display: grid; gap: 9px; }
.attr-row { display: grid; grid-template-columns: minmax(130px, .45fr) minmax(180px, 1fr) auto; gap: 8px; }
.variant-row { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(105px, .45fr)) minmax(100px, .4fr) auto; gap: 8px; }
.attr-row button,
.variant-row button { min-width: 42px; padding-inline: 11px; }
.preview { display: block; width: 100%; max-height: 310px; object-fit: contain; background: var(--sn-surface-alt); border: 1px solid var(--sn-border); border-radius: 14px; }
.switch-row > span { display: grid; gap: 3px; }
.switch-row > span small { color: var(--sn-muted); font-size: 11px; font-weight: 500; }
.switch-row > input { justify-self: end; align-self: center; }

.sn-empty-state,
.empty-state {
  display: grid;
  min-height: 190px;
  place-items: center;
  gap: 12px;
  padding: 30px;
  text-align: center;
  color: var(--sn-muted);
  background: linear-gradient(145deg, var(--sn-surface-alt), #fff);
  border: 1px dashed var(--sn-border-strong);
  border-radius: 16px;
}
.sn-empty-state.compact,
.empty-state.compact { min-height: 108px; padding: 20px; }
.sn-empty-state h3,
.empty-state h3 { margin: 0; color: var(--sn-ink); font-size: 17px; }
.sn-empty-state p,
.empty-state p { max-width: 520px; margin: 0; line-height: 1.9; }
.sn-empty-icon { display: grid; width: 52px; height: 52px; place-items: center; color: var(--sn-teal-700); background: var(--sn-teal-50); border: 1px solid var(--sn-teal-100); border-radius: 17px; }
.sn-empty-icon .sn-icon { width: 26px; height: 26px; }

.sn-summary-list,
.support-action-list,
.health-list { display: grid; gap: 9px; }
.sn-summary-row,
.sn-summary-list > div,
.support-action-list a,
.health-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 12px 14px; color: var(--sn-text); background: var(--sn-surface-alt); border: 1px solid var(--sn-border); border-radius: 13px; }
.support-action-list a:hover,
.health-row:hover { color: var(--sn-teal-700); border-color: var(--sn-teal-500); transform: translateY(-1px); }
.support-action-list a > span,
.health-row span span { display: block; margin-block-start: 3px; color: var(--sn-muted); font-size: 11px; }
.sn-summary-row > span { color: var(--sn-muted); }

.sn-callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; color: var(--sn-text); background: var(--sn-blue-50); border: 1px solid var(--sn-blue-100); border-radius: 14px; line-height: 1.9; }
.sn-callout.warning { background: var(--sn-amber-50); border-color: var(--sn-amber-100); }
.sn-callout.success { background: var(--sn-green-50); border-color: var(--sn-green-100); }
.sn-callout .sn-icon { width: 22px; flex: 0 0 22px; color: var(--sn-blue-600); }

.sn-entity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.sn-entity-card,
.sn-entity-grid > article { min-width: 0; padding: 17px; background: #fff; border: 1px solid var(--sn-border); border-radius: 17px; box-shadow: var(--sn-shadow-xs); }
.sn-entity-grid > article b,
.sn-entity-grid > article span { display: block; }
.sn-entity-grid > article span { margin-block-start: 6px; color: var(--sn-muted); line-height: 1.8; }
.sn-entity-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-block-end: 13px; }
.sn-entity-card h3 { margin: 0; color: var(--sn-ink); font-size: 16px; }
.sn-entity-card header small { color: var(--sn-muted); }
.sn-entity-card .sn-summary-list { margin-block: 12px; }

.inline-check,
.checkline { display: flex !important; align-items: center; gap: 9px; min-height: 44px; padding: 10px 12px; background: var(--sn-surface-alt); border: 1px solid var(--sn-border); border-radius: 12px; cursor: pointer; }
.inline-check input,
.checkline input { width: 18px; height: 18px; flex: 0 0 18px; }
.switch-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

.warning-list { display: flex; flex-wrap: wrap; gap: 7px; }
.warning-list > span,
.warning-list > li { padding: 6px 9px; color: #9a4c05; background: var(--sn-amber-50); border: 1px solid var(--sn-amber-100); border-radius: 999px; font-size: 11px; font-weight: 800; }

.data-tabs { display: flex; gap: 8px; margin-block-end: 14px; padding-block-end: 3px; overflow-x: auto; }
.data-tab { min-width: max-content; padding: 9px 13px; color: var(--sn-muted); background: #fff; border: 1px solid var(--sn-border); border-radius: 10px; font-size: 12px; font-weight: 850; }
.data-tab.active { color: var(--sn-teal-700); background: var(--sn-teal-50); border-color: var(--sn-teal-500); }
.data-grid-card .inline { display: flex; gap: 8px; }
.data-grid-card .inline input { min-width: 220px; }

.docs-layout,
.doc-layout-v112 { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: 18px; }
.docs-nav,
.doc-nav-v112 { position: sticky; inset-block-start: calc(var(--sn-topbar) + 18px); display: grid; gap: 6px; padding: 12px; background: #fff; border: 1px solid var(--sn-border); border-radius: 16px; box-shadow: var(--sn-shadow-xs); }
.docs-nav a,
.doc-nav-v112 a { padding: 9px 11px; color: var(--sn-muted); border-radius: 9px; font-size: 12px; font-weight: 800; }
.docs-nav a:hover,
.doc-nav-v112 a:hover { color: var(--sn-teal-700); background: var(--sn-teal-50); }
.docs-content,
.doc-content-v112 { display: grid; gap: 14px; }
.docs-content > section { scroll-margin-top: calc(var(--sn-topbar) + 22px); }
.doc-section-v112 { scroll-margin-top: calc(var(--sn-topbar) + 22px); padding: 22px; background: #fff; border: 1px solid var(--sn-border); border-radius: 18px; box-shadow: var(--sn-shadow-xs); }
.doc-section-v112 h2 { margin-block-start: 0; color: var(--sn-ink); }
.doc-section-v112 p,
.doc-section-v112 li { color: var(--sn-text); line-height: 2; }
.doc-cards-v112 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doc-cards-v112 > div { padding: 14px; background: var(--sn-surface-alt); border: 1px solid var(--sn-border); border-radius: 13px; }
.doc-cards-v112 b,
.doc-cards-v112 span { display: block; }
.doc-cards-v112 span { margin-block-start: 5px; color: var(--sn-muted); line-height: 1.8; font-size: 12px; }
.doc-table-v112 { width: 100%; }

/* Responsive */
@media (max-width: 1180px) {
  :root { --sn-sidebar: 238px; }
  .content { padding-inline: 24px; }
  .metric-grid,
  .sn-metrics,
  .kpi-grid,
  .orders-kpis,
  .report-kpis,
  .platform-product-kpis,
  .workdesk-kpis-v016,
  .store-health-grid-v106 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-admin-layout { grid-template-columns: 1fr; }
  .store-admin-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-entity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-form-layout { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 900px) {
  :root { --sn-sidebar: 284px; }
  .sidebar { visibility: hidden; opacity: 0; pointer-events: none; transform: none; transition: opacity .18s ease, visibility .18s ease; }
  .sidebar.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
  .sidebar-close { display: block; }
  .sidebar-backdrop.open { display: block; }
  .main-shell { margin-right: 0; }
  .sidebar-open { display: grid; }
  .topbar-search { width: auto; flex: 1; }
  .topbar-search span,
  .topbar-search kbd { display: none; }
  .operations-layout { grid-template-columns: minmax(0, 1fr); }
  .sn-grid-3,
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-shell { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; }
  .settings-nav button { min-width: max-content; }
  .form-shell-v104 { grid-template-columns: 1fr; }
  .form-side-v104 { position: static; }
  .sn-form-layout,
  .docs-layout,
  .doc-layout-v112 { grid-template-columns: 1fr; }
  .sn-form-aside,
  .docs-nav,
  .doc-nav-v112 { position: static; }
  .variant-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-row [data-var-title],
  .variant-row [data-var-id] { grid-column: 1 / -1; }
  .docs-nav,
  .doc-nav-v112 { display: flex; overflow-x: auto; }
  .docs-nav a,
  .doc-nav-v112 a { min-width: max-content; }
}

@media (max-width: 720px) {
  :root { --sn-topbar: 60px; }
  body { font-size: 13px; }
  .topbar { height: var(--sn-topbar); padding-inline: 12px; }
  .breadcrumb small,
  .topbar-primary span,
  .topbar-search { display: none; }
  .topbar-primary { width: 40px; padding: 0; }
  .content { padding: 18px 12px 92px; }
  .page-heading,
  .page-head,
  .sn-hero,
  .page-hero,
  .platform-hero,
  .workdesk-hero-v016,
  .orders-hero,
  .report-hero,
  .shipping-hero,
  .sn-page-header { display: grid; align-items: start; gap: 12px; margin-block-end: 16px; }
  .page-heading h1,
  .page-head h1,
  .sn-hero h1,
  .page-hero h1,
  .platform-hero h1,
  .workdesk-hero-v016 h1,
  .orders-hero h1,
  .report-hero h1,
  .shipping-hero h1,
  .sn-page-header h1 { font-size: 26px; }
  .page-actions,
  .sn-actions,
  .platform-actions,
  .workdesk-actions-v016,
  .orders-actions,
  .report-actions { width: 100%; }
  .page-actions > *,
  .sn-actions > *,
  .workdesk-actions-v016 > * { flex: 1; justify-content: center; }
  .metric-grid,
  .sn-metrics,
  .kpi-grid,
  .orders-kpis,
  .report-kpis,
  .platform-product-kpis,
  .workdesk-kpis-v016,
  .store-health-grid-v106 { display: flex; margin-inline: -12px; padding-inline: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .sn-stat-strip { display: flex; margin-inline: -12px; padding-inline: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .metric-card,
  .sn-metric,
  .kpi-card,
  .orders-kpi,
  .report-kpi,
  .platform-product-kpi,
  .workdesk-kpi-v016,
  .store-health-card-v106 { min-width: 178px; min-height: 118px; flex: 0 0 178px; scroll-snap-align: start; }
  .sn-stat-tile,
  .kpi,
  .card.stat { min-width: 178px; min-height: 118px; flex: 0 0 178px; scroll-snap-align: start; }
  .card,
  .sn-card,
  .panel,
  .orders-panel,
  .report-card,
  .platform-card,
  .workdesk-card-v016,
  .form-card,
  .settings-section { padding: 16px; border-radius: 14px; }
  .sn-grid-2,
  .grid-2,
  .report-grid,
  .workdesk-grid-v016,
  .platform-panels,
  .sn-grid-3,
  .grid-3,
  .store-admin-aside { grid-template-columns: 1fr; }
  .sn-section-grid,
  .grid.two,
  .sn-entity-grid,
  .doc-cards-v112 { grid-template-columns: 1fr; }
  .form-grid,
  .sn-form-grid,
  .grid-form-v104,
  .grid-form-v70,
  .settings-grid,
  .shipping-form-grid,
  .form-grid.cols-3,
  .sn-form-grid.cols-3,
  .grid-form-v104.cols-3 { grid-template-columns: 1fr; }
  .sn-filterbar,
  .toolbar { grid-template-columns: 1fr; }
  .switch-row { grid-template-columns: 1fr; }
  .attr-row,
  .variant-row { grid-template-columns: 1fr; }
  .attr-row button,
  .variant-row button { width: 100%; }
  .sn-savebar { inset-block-end: 76px; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .action-row { grid-template-columns: 38px 1fr; }
  .action-row > .btn { grid-column: 1 / -1; }
  .order-filterbar { grid-template-columns: 1fr; }
  .order-filterbar button { width: 100%; }
  .order-top { align-items: flex-start; }
  .order-total { min-width: auto; }
  .quote-fee-inline,
  .courier-quote-box { grid-template-columns: 1fr; }
  .quote-fee-inline p,
  .courier-quote-box p { grid-column: auto; }
  .mobile-nav {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 65;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 68px;
    padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: rgba(255,255,255,.97);
    border-block-start: 1px solid var(--sn-border);
    box-shadow: 0 -12px 30px rgba(11,31,58,.1);
    backdrop-filter: blur(14px);
  }
  .mobile-nav a,
  .mobile-nav button { display: grid; min-height: 52px; place-items: center; gap: 0; padding: 3px; color: var(--sn-muted); background: transparent; border: 0; border-radius: 9px; box-shadow: none; font-size: 9px; }
  .mobile-nav .sn-icon { width: 21px; }
  .mobile-nav a.active { color: var(--sn-teal-700); background: var(--sn-teal-50); }
  .login160-body { padding: 12px; }
  .login160-shell { grid-template-columns: 1fr; border-radius: 18px; }
  .login160-info { display: none; }
  .public-header-v104 { align-items: flex-start; padding-block: 13px; }
  .public-nav-v104 { justify-content: flex-end; }
  .public-nav-v104 a:not(.primary) { display: none; }
  .footer-grid-v104 { grid-template-columns: 1fr; }
  .form-side-v104 { display: none; }
  .quote-fee-inline,
  .courier-quote-box { grid-template-columns: 1fr; }
  .settings-savebar { inset-block-end: 77px; }
}

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

@media print {
  .sidebar,
  .topbar,
  .mobile-nav,
  .page-actions,
  .sn-actions,
  .btn,
  button { display: none !important; }
  .main-shell { margin: 0; }
  .content { width: 100%; padding: 0; }
  body { background: #fff; }
  .card,
  .sn-card,
  .panel { break-inside: avoid; box-shadow: none; }
}