@tokenoftrust/storefront-runner 1.4.0 → 1.4.2-rc.0

package/apps/storefront/src/styles/admin.css

@@ -0,0 +1,1080 @@
+/*
+ * Storefront admin console styles — the white-labeled operations surface
+ * (apps/storefront/src/pages/admin.astro and its AdminXTab components).
+ *
+ * Global by design: admin.astro renders its own document shell instead of the
+ * public Layout, and every AdminXTab.astro relies on these class + token
+ * definitions. Externalized (not inline) so the strict CSP covers it as a
+ * hashed self stylesheet — see astro.config.mjs inlineStylesheets:"never".
+ */
+:root {
+  color-scheme: light;
+  --admin-bg: #f5f7f6;
+  --admin-surface: #ffffff;
+  --admin-surface-soft: #f9fbfa;
+  --admin-surface-tint: #eef6f4;
+  --admin-ink: #16211f;
+  --admin-muted: #64716d;
+  --admin-muted-2: #8c9894;
+  --admin-line: #dce5e2;
+  --admin-line-strong: #bdcbc7;
+  --admin-teal: #007f79;
+  --admin-teal-dark: #005d58;
+  --admin-teal-soft: #dff4f1;
+  --admin-green: #137a55;
+  --admin-green-soft: #e3f5eb;
+  --admin-blue: #2458c7;
+  --admin-blue-soft: #e7efff;
+  --admin-amber: #a45d00;
+  --admin-amber-soft: #fff0d5;
+  --admin-red: #b42318;
+  --admin-red-soft: #fde7e4;
+  --admin-violet: #6941c6;
+  --admin-violet-soft: #efe9ff;
+  --admin-shadow: 0 18px 50px rgba(23, 33, 31, 0.08);
+  --admin-radius: 8px;
+  --admin-radius-sm: 6px;
+  --admin-scroll-offset: 104px;
+  --admin-font:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  max-width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+  min-height: 100vh;
+  background: var(--admin-bg);
+  color: var(--admin-ink);
+  font: 14px/1.5 var(--admin-font);
+  overflow: hidden;
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  stroke-width: 1.9;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+  flex: 0 0 auto;
+}
+
+.shell {
+  display: grid;
+  grid-template-columns: 248px minmax(0, 1fr);
+  height: 100vh;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  padding: 20px 16px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: #101b18;
+  color: #eef7f5;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 42px;
+}
+
+.brand-mark {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: var(--admin-radius);
+  background: #00a991;
+  color: #06231e;
+  font-weight: 800;
+}
+
+.brand b,
+.store strong {
+  display: block;
+  font-size: 14px;
+  line-height: 1.1;
+}
+
+.brand span,
+.store span {
+  display: block;
+  margin-top: 3px;
+  color: rgba(238, 247, 245, 0.7);
+  font-size: 12px;
+}
+
+.store {
+  display: grid;
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--admin-radius);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+/* Cross-surface hop to the developer cockpit — same card language as the
+   sidebar's other blocks, kept visually quieter than the nav tabs. */
+.cockpit-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--admin-radius);
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(238, 247, 245, 0.85);
+  font-size: 13px;
+  text-decoration: none;
+}
+.cockpit-link:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+.cockpit-link svg {
+  width: 15px;
+  height: 15px;
+  stroke: currentColor;
+  fill: none;
+}
+
+/* Signed-in-as chip (identity visibility — Trello 13075 postscript: an
+   owner staring at a read-only Publish tab could not tell WHO the shell
+   thought they were). Mirrors .store's card language; the standing line
+   states the resolved principal FOR THIS STORE, not a global role. */
+.account {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--admin-radius);
+  background: rgba(255, 255, 255, 0.06);
+  /* Pinned to the sidebar's lower-left (the conventional account slot) —
+     the sidebar is a flex column, so this soaks the remaining space. */
+  margin-top: auto;
+}
+.account .account-avatar {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.08);
+}
+.account .account-avatar svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.8;
+}
+.account .account-meta {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+.account .account-email {
+  font-weight: 640;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.account .account-standing {
+  color: rgba(238, 247, 245, 0.7);
+  font-size: 11px;
+}
+.account .account-standing[data-standing="none"] {
+  color: rgba(255, 196, 120, 0.9);
+}
+.account a {
+  color: inherit;
+}
+.account .account-signout button {
+  margin-top: 2px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: rgba(238, 247, 245, 0.6);
+  font-size: 11px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.account .account-signout button:hover {
+  color: rgba(238, 247, 245, 0.9);
+}
+
+.tenant-picker {
+  display: grid;
+  gap: 4px;
+  padding: 10px 12px;
+  border: 1px solid rgba(0, 169, 145, 0.4);
+  border-radius: var(--admin-radius);
+  background: rgba(0, 169, 145, 0.1);
+}
+
+.tenant-picker label {
+  color: rgba(238, 247, 245, 0.7);
+  font-size: 11px;
+  font-weight: 760;
+  text-transform: uppercase;
+}
+
+.tenant-picker select {
+  min-height: 34px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--admin-radius-sm);
+  background: #101b18;
+  color: #eef7f5;
+}
+
+.tenant-picker-denied {
+  padding: 10px 12px;
+  border: 1px solid var(--admin-amber);
+  border-radius: var(--admin-radius);
+  background: rgba(164, 93, 0, 0.16);
+  color: #eef7f5;
+  font-size: 12px;
+}
+
+.tenant-picker-denied code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.nav {
+  display: grid;
+  gap: 4px;
+}
+
+.nav a {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 40px;
+  padding: 0 10px;
+  border-radius: var(--admin-radius-sm);
+  color: rgba(238, 247, 245, 0.74);
+  text-decoration: none;
+}
+
+.nav a.active {
+  background: rgba(0, 169, 145, 0.18);
+  color: #ffffff;
+}
+
+.nav-group {
+  display: grid;
+  gap: 3px;
+}
+
+.nav-subnav {
+  display: grid;
+  gap: 2px;
+  margin: 0 0 3px 28px;
+  padding-left: 10px;
+  border-left: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.nav-subnav a {
+  min-height: 32px;
+  padding: 0 8px;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.nav-subnav svg {
+  width: 16px;
+  height: 16px;
+}
+
+.health {
+  margin-top: auto;
+  display: grid;
+  gap: 9px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--admin-radius);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.health-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 12px;
+  color: rgba(238, 247, 245, 0.72);
+}
+
+.health-row strong {
+  color: #ffffff;
+}
+
+.main {
+  min-width: 0;
+  min-height: 0;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.content,
+.band,
+.panel,
+.panel-body,
+.table-wrap {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  min-height: 68px;
+  padding: 14px 24px;
+  border-bottom: 1px solid var(--admin-line);
+  background: rgba(245, 247, 246, 0.94);
+  backdrop-filter: blur(16px);
+}
+
+.page-title h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 760;
+}
+
+.page-title p {
+  margin: 2px 0 0;
+  color: var(--admin-muted);
+  font-size: 13px;
+}
+
+.page-title,
+.page-title p,
+.note,
+code {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.btn,
+.icon-btn {
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid var(--admin-line-strong);
+  border-radius: var(--admin-radius-sm);
+  background: var(--admin-surface);
+  color: var(--admin-ink);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn {
+  padding: 0 13px;
+  font-weight: 680;
+  max-width: 100%;
+}
+
+.icon-btn {
+  width: 38px;
+  padding: 0;
+}
+
+.btn.primary {
+  border-color: var(--admin-teal-dark);
+  background: var(--admin-teal);
+  color: #ffffff;
+}
+
+.floating-ask {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 80;
+  min-height: 58px;
+  max-width: min(280px, calc(100vw - 32px));
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 15px 9px 10px;
+  border: 1px solid rgba(0, 93, 88, 0.24);
+  border-radius: 999px;
+  background: var(--admin-teal);
+  color: #ffffff;
+  box-shadow: 0 16px 38px rgba(22, 33, 31, 0.22);
+}
+
+.floating-ask-icon {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.floating-ask-label {
+  display: grid;
+  gap: 1px;
+  min-width: 0;
+  text-align: left;
+}
+
+.floating-ask-label strong {
+  font-size: 14px;
+  line-height: 1.1;
+}
+
+.floating-ask-label small {
+  max-width: 160px;
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 11px;
+  font-weight: 680;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 18px;
+  padding: 20px 24px 40px;
+}
+
+.band {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 14px;
+}
+
+[data-admin-panel],
+[data-admin-guide-section] {
+  scroll-margin-top: var(--admin-scroll-offset);
+}
+
+html.admin-tabs-ready [data-admin-panel] {
+  display: none;
+}
+
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="orders"] #orders,
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="products"] #products,
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="subscriptions"] #subscriptions,
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="customers"] #customers,
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="fulfillment"] #fulfillment,
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="reporting"] #reporting,
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="ai-workflows"] #ai-workflows,
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="blog"] #blog,
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="publish"] #publish,
+html.admin-tabs-ready[data-admin-mode="work-area"][data-admin-tab="settings"] #settings {
+  display: grid;
+}
+
+html.admin-tabs-ready[data-admin-mode="work-area"] [data-admin-guide-section],
+html.admin-tabs-ready[data-admin-mode="work-area"] [data-admin-tab-help] {
+  display: none;
+}
+
+html[data-internal-admin-guide="false"] [data-admin-internal-only] {
+  display: none !important;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.section-title h2 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.section-title p {
+  margin: 4px 0 0;
+  color: var(--admin-muted);
+  font-size: 13px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+}
+
+.grid.cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid.cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid.cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.panel {
+  border: 1px solid var(--admin-line);
+  border-radius: var(--admin-radius);
+  background: var(--admin-surface);
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 50px;
+  padding: 13px 14px;
+  border-bottom: 1px solid var(--admin-line);
+}
+
+.panel-head h3 {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+}
+
+.panel-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  padding: 14px;
+}
+
+.metric {
+  min-height: 84px;
+  padding: 14px;
+  border: 1px solid var(--admin-line);
+  border-radius: var(--admin-radius);
+  background: var(--admin-surface);
+}
+
+.metric span,
+.field label {
+  display: block;
+  color: var(--admin-muted);
+  font-size: 11px;
+  font-weight: 760;
+  text-transform: uppercase;
+}
+
+.metric strong {
+  display: block;
+  margin-top: 9px;
+  font-size: 24px;
+}
+
+.metric small {
+  display: block;
+  margin-top: 3px;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 23px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: var(--admin-surface-tint);
+  color: #3f4d49;
+  font-size: 12px;
+  font-weight: 740;
+  white-space: nowrap;
+}
+
+.chip.green {
+  background: var(--admin-green-soft);
+  color: var(--admin-green);
+}
+
+.chip.teal {
+  background: var(--admin-teal-soft);
+  /* Slightly darker than --admin-teal (#007f79): the shared token only
+     reaches ~4.26:1 against --admin-teal-soft, just under WCAG AA's
+     4.5:1 for this chip's 12px text (hardening-qa a11y pass). Scoped to
+     this rule only — --admin-teal itself stays unchanged since it is
+     also used as a background (e.g. .btn.primary) where the pairing
+     and contrast requirement are different. */
+  color: #007973;
+}
+
+.chip.blue {
+  background: var(--admin-blue-soft);
+  color: var(--admin-blue);
+}
+
+.chip.amber {
+  background: var(--admin-amber-soft);
+  color: var(--admin-amber);
+}
+
+.chip.red {
+  background: var(--admin-red-soft);
+  color: var(--admin-red);
+}
+
+.chip.violet {
+  background: var(--admin-violet-soft);
+  color: var(--admin-violet);
+}
+
+.swatches {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 10px;
+}
+
+.swatch {
+  overflow: hidden;
+  border: 1px solid var(--admin-line);
+  border-radius: var(--admin-radius-sm);
+  background: var(--admin-surface);
+}
+
+.swatch-color {
+  min-height: 58px;
+}
+
+.swatch-meta {
+  padding: 10px;
+}
+
+.swatch-meta b {
+  display: block;
+  font-size: 13px;
+}
+
+.swatch-meta code,
+.note code {
+  color: var(--admin-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+}
+
+.field {
+  min-width: 0;
+  padding: 11px;
+  border: 1px solid var(--admin-line);
+  border-radius: var(--admin-radius-sm);
+  background: #fcfdfc;
+}
+
+.field strong {
+  display: block;
+  margin-top: 6px;
+  font-size: 13px;
+}
+
+.field p {
+  margin: 5px 0 0;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+.ship-gate {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 14px;
+  border: 1px solid #a6d8c0;
+  border-radius: var(--admin-radius);
+  background: #eefaf3;
+}
+
+.ship-gate.amber {
+  border-color: #f1c883;
+  background: #fff6e7;
+}
+
+.ship-gate-main,
+.risk-alert-main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.seal {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--admin-green);
+  color: #ffffff;
+}
+
+.ship-gate.amber .seal {
+  background: var(--admin-amber);
+}
+
+.ship-gate b,
+.risk-alert b {
+  display: block;
+  font-size: 15px;
+}
+
+.ship-gate span,
+.risk-alert span {
+  display: block;
+  margin-top: 3px;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+.risk-alert {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 12px 14px;
+  border: 1px solid #f1c883;
+  border-radius: var(--admin-radius);
+  background: #fff6e7;
+}
+
+/* A JS-toggled `.risk-alert` (e.g. the degraded-forge strip) must stay hidden
+   when `hidden` is set — the base display:flex above would otherwise win over
+   the UA [hidden] rule and keep it visible. */
+.risk-alert[hidden] {
+  display: none;
+}
+
+.risk-alert svg {
+  color: var(--admin-amber);
+}
+
+.order-assist-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.order-assist-card {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--admin-line);
+  border-radius: var(--admin-radius-sm);
+  background: var(--admin-surface);
+}
+
+.order-assist-card strong {
+  font-size: 14px;
+}
+
+.order-assist-card p {
+  margin: 0;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+.tabs {
+  display: flex;
+  gap: 6px;
+  max-width: 100%;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--admin-line);
+}
+
+.mobile-tabbar {
+  display: none;
+}
+
+.tab {
+  flex: 0 0 auto;
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--admin-muted);
+  font-weight: 760;
+  text-decoration: none;
+}
+
+.tab.active {
+  border-color: var(--admin-teal);
+  color: var(--admin-ink);
+}
+
+.table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--admin-line);
+  border-radius: var(--admin-radius);
+  background: var(--admin-surface);
+}
+
+table {
+  width: 100%;
+  min-width: 860px;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th {
+  height: 38px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--admin-line);
+  background: var(--admin-surface-soft);
+  color: var(--admin-muted);
+  font-size: 11px;
+  font-weight: 760;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+td {
+  height: 46px;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--admin-line);
+  vertical-align: middle;
+}
+
+tr:last-child td {
+  border-bottom: 0;
+}
+
+.subtle {
+  display: block;
+  margin-top: 2px;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+.money,
+.action {
+  text-align: right;
+}
+
+.check-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 0.36fr) minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--admin-line);
+}
+
+.check-row:last-child {
+  border-bottom: 0;
+}
+
+.check-row.blocking {
+  margin: 0 -8px;
+  padding: 10px 8px;
+  border: 1px solid #f1c883;
+  border-radius: var(--admin-radius-sm);
+  background: #fff8ec;
+}
+
+.check-row b {
+  font-size: 13px;
+}
+
+.check-row p {
+  margin: 2px 0 0;
+  color: var(--admin-muted);
+  font-size: 12px;
+}
+
+.type-sample h3 {
+  margin: 0 0 8px;
+  font-size: 25px;
+  line-height: 1.12;
+}
+
+.type-sample p {
+  margin: 0;
+  color: var(--admin-muted);
+}
+
+.note {
+  margin: 0;
+  color: var(--admin-muted);
+  font-size: 13px;
+}
+
+@media (max-width: 1120px) {
+  .shell {
+    grid-template-columns: 76px minmax(0, 1fr);
+  }
+
+  .brand b,
+  .brand span,
+  .store,
+  .nav span,
+  .nav-subnav,
+  .health {
+    display: none;
+  }
+
+  .sidebar {
+    align-items: center;
+    padding-inline: 12px;
+  }
+
+  .nav a {
+    justify-content: center;
+    padding: 0;
+  }
+
+  .grid.cols-4,
+  .grid.cols-3,
+  .order-assist-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  html,
+  body {
+    height: auto;
+    min-height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .shell {
+    grid-template-columns: 1fr;
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
+  .main {
+    height: auto;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  .sidebar {
+    position: static;
+    height: auto;
+    overflow: visible;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .nav {
+    display: none;
+  }
+
+  .mobile-tabbar {
+    position: sticky;
+    top: 0;
+    z-index: 29;
+    display: flex;
+    padding-inline: 16px;
+    background: rgba(245, 247, 246, 0.94);
+    backdrop-filter: blur(16px);
+  }
+
+  .topbar,
+  .ship-gate,
+  .risk-alert,
+  .section-title,
+  .panel-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .content,
+  .topbar {
+    padding-inline: 16px;
+  }
+
+  .floating-ask {
+    right: 16px;
+    bottom: 16px;
+  }
+
+  [data-admin-panel],
+  [data-admin-guide-section] {
+    scroll-margin-top: 16px;
+  }
+
+  .actions {
+    width: 100%;
+  }
+
+  .actions .btn {
+    flex: 1 1 150px;
+  }
+
+  .grid.cols-4,
+  .grid.cols-3,
+  .grid.cols-2,
+  .order-assist-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .check-row {
+    grid-template-columns: 1fr;
+  }
+}