/* Reversible app-only visual experiment. Storefront and payment surfaces are
   deliberately excluded so customer checkout keeps its established layout. */
html[data-surface-style="list"] .workspace .command-grid,
html[data-surface-style="list"] .workspace .analytics-overview,
html[data-surface-style="list"] .workspace .command-columns,
html[data-surface-style="list"] .workspace .growth-grid {
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
html[data-surface-style="list"] .workspace .home-command,
html[data-surface-style="list"] .workspace .home-balance,
html[data-surface-style="list"] .workspace .home-pulse,
html[data-surface-style="list"] .workspace .home-pulse button,
html[data-surface-style="list"] .workspace .network-hero,
html[data-surface-style="list"] .workspace .network-balance-card,
html[data-surface-style="list"] .workspace .resell-command,
html[data-surface-style="list"] .workspace .resell-summary,
html[data-surface-style="list"] .workspace .resell-flow > div {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Do not let the legacy interaction layer make list rows feel like cards. */
html[data-surface-style="list"] .workspace .app-warp-card,
html[data-surface-style="list"] .workspace .app-warp-card:hover,
html[data-surface-style="list"] .workspace .app-warp-card.is-touch-warp {
  transform: none !important;
  box-shadow: none !important;
}
html[data-surface-style="list"] .workspace .app-warp-card::after,
html[data-surface-style="list"] .workspace .app-warp-card.is-touch-warp::after { opacity: 0 !important; }
html[data-surface-style="list"] .workspace [data-screen="home"] { gap: 0 !important; }
html[data-surface-style="list"] .workspace .screen.active {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(20px, 3vw, 44px) 32px !important;
}
html[data-surface-style="list"] .workspace .screen.active > * { max-width: none; }
html[data-surface-style="list"] .workspace .listing-grid,
html[data-surface-style="list"] .workspace .network-grid,
html[data-surface-style="list"] .workspace .resell-catalogue-grid { gap: 0 !important; }
html[data-surface-style="list"] .workspace [data-screen="home"] > .home-command,
html[data-surface-style="list"] .workspace [data-screen="home"] > .home-pulse,
html[data-surface-style="list"] .workspace [data-screen="home"] > .section-heading,
html[data-surface-style="list"] .workspace [data-screen="home"] > .listing-grid { margin-top: 0 !important; margin-bottom: 0 !important; }
html[data-surface-style="list"] .workspace [data-screen="home"] > .listing-grid { padding-top: 8px; }
/* Keep list rows edge-aligned: responsive app padding should not create a
   second inset around each surface. */
html[data-surface-style="list"] .workspace .screen.active > .home-command,
html[data-surface-style="list"] .workspace .screen.active > .home-pulse,
html[data-surface-style="list"] .workspace .screen.active > .section-heading,
html[data-surface-style="list"] .workspace .screen.active > .listing-grid,
html[data-surface-style="list"] .workspace .screen.active > .network-grid,
html[data-surface-style="list"] .workspace .screen.active > .command-grid,
html[data-surface-style="list"] .workspace .screen.active > .analytics-overview,
html[data-surface-style="list"] .workspace .screen.active > .command-columns,
html[data-surface-style="list"] .workspace .screen.active > .growth-grid {
  width: 100%;
  margin-inline: 0 !important;
}
html[data-surface-style="list"] .workspace .home-command {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  padding: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
html[data-surface-style="list"] .workspace .home-command-copy,
html[data-surface-style="list"] .workspace .home-balance { padding: 26px 0; }
html[data-surface-style="list"] .workspace .home-balance { border-top: 1px solid var(--line) !important; }
html[data-surface-style="list"] .workspace .empty-state {
  min-height: 110px;
  padding: 28px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-surface-style="list"] .workspace .home-pulse {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border-bottom: 1px solid var(--line) !important;
}
html[data-surface-style="list"] .workspace .home-pulse button {
  min-width: 0;
  padding: 18px 14px;
  border-right: 1px solid var(--line) !important;
  text-align: left;
}
html[data-surface-style="list"] .workspace .home-pulse button:last-child { border-right: 0 !important; }
html[data-surface-style="list"] .workspace .command-grid > article,
html[data-surface-style="list"] .workspace .analytics-overview > article,
html[data-surface-style="list"] .workspace .command-columns > section,
html[data-surface-style="list"] .workspace .growth-grid > article {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
html[data-surface-style="list"] .workspace .command-grid > article:last-child,
html[data-surface-style="list"] .workspace .analytics-overview > article:last-child,
html[data-surface-style="list"] .workspace .command-columns > section:last-child,
html[data-surface-style="list"] .workspace .growth-grid > article:last-child { border-bottom: 0; }
html[data-surface-style="list"] .workspace .data-row,
html[data-surface-style="list"] .workspace .settings-card,
html[data-surface-style="list"] .workspace .commerce-command,
html[data-surface-style="list"] .workspace .catalogue-actions,
html[data-surface-style="list"] .workspace .analytics-chart,
html[data-surface-style="list"] .workspace .analytics-lower > section {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
/* The catalogue and browse views use their own card names. Flatten those too
   so the experiment is visibly a list treatment across the whole app. */
html[data-surface-style="list"] .workspace .business-card,
html[data-surface-style="list"] .workspace .listing-card,
html[data-surface-style="list"] .workspace .network-card,
html[data-surface-style="list"] .workspace .resell-card,
html[data-surface-style="list"] .workspace .storefront-card,
html[data-surface-style="list"] .workspace .store-zero,
html[data-surface-style="list"] .workspace .command-panel,
html[data-surface-style="list"] .workspace .store-fund-card,
html[data-surface-style="list"] .workspace .activity-row {
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html[data-surface-style="list"] .workspace .business-card,
html[data-surface-style="list"] .workspace .listing-card,
html[data-surface-style="list"] .workspace .network-card,
html[data-surface-style="list"] .workspace .resell-card,
html[data-surface-style="list"] .workspace .storefront-card { padding: 14px 0 !important; }
html[data-surface-style="list"] .workspace .business-cover,
html[data-surface-style="list"] .workspace .listing-media,
html[data-surface-style="list"] .workspace .network-card-media,
html[data-surface-style="list"] .workspace .resell-card-media,
html[data-surface-style="list"] .workspace .storefront-art { border-radius: 10px !important; }
html[data-surface-style="list"] .workspace .data-row {
  border-inline: 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
html[data-surface-style="list"] .workspace .command-panel > button,
html[data-surface-style="list"] .workspace .growth-grid button {
  border-radius: 0;
  border-inline: 0;
  background: transparent;
}
/* Catch legacy card components on screens that use their own class names. */
html[data-surface-style="list"] .workspace [class*="card"] {
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-surface-style="list"] .workspace [class*="card"]:not(button):not([class*="card-title"]):not([class*="card-body"]):not([class*="card-meta"]):not([class*="card-media"]):not([class*="card-actions"]):not([class*="card-head"]):not([class*="card-copy"]):not(.storefront-card-scam) {
  border-color: transparent !important;
  background: transparent !important;
}
html[data-surface-style="list"] .workspace .section-heading {
  padding-inline: 0 !important;
}
/* The page title already provides the context. Hide repeated overlines so
   screens read as a single, calm hierarchy instead of label-title-label. */
html[data-surface-style="list"] .workspace #eyebrow,
html[data-surface-style="list"] .workspace .kicker,
html[data-surface-style="list"] .workspace .home-label {
  display: none !important;
}
html[data-surface-style="list"] .workspace .section-heading h2,
html[data-surface-style="list"] .workspace .store-ops-head h2,
html[data-surface-style="list"] .workspace .network-hero h2,
html[data-surface-style="list"] .workspace .resell-section-heading h2,
html[data-surface-style="list"] .workspace .account-intro h2 {
  margin-top: 0 !important;
}
/* Store management has its own surface vocabulary; keep it consistent with
   the message-style treatment instead of leaving a rounded hero card behind. */
html[data-surface-style="list"] .workspace .store-ops-head,
html[data-surface-style="list"] .workspace .store-guide-strip,
html[data-surface-style="list"] .workspace .stores-overview,
html[data-surface-style="list"] .workspace .store-ops-grid {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html[data-surface-style="list"] .workspace .store-ops-head {
  padding-inline: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
html[data-surface-style="list"] .workspace .store-guide-strip,
html[data-surface-style="list"] .workspace .stores-overview {
  border-bottom: 1px solid var(--line) !important;
  padding-inline: 0 !important;
}
html[data-surface-style="list"] .workspace .network-hero,
html[data-surface-style="list"] .workspace .directory-hero,
html[data-surface-style="list"] .workspace .money-hero,
html[data-surface-style="list"] .workspace .account-intro,
html[data-surface-style="list"] .workspace .network-tools,
html[data-surface-style="list"] .workspace .directory-tools,
html[data-surface-style="list"] .workspace .money-balance-card,
html[data-surface-style="list"] .workspace .money-actions-card,
html[data-surface-style="list"] .workspace .money-history-panel,
html[data-surface-style="list"] .workspace .store-funds-panel,
html[data-surface-style="list"] .workspace .money-action,
html[data-surface-style="list"] .workspace .account-grid .settings-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html[data-surface-style="list"] .workspace .network-hero,
html[data-surface-style="list"] .workspace .directory-hero,
html[data-surface-style="list"] .workspace .money-hero,
html[data-surface-style="list"] .workspace .account-intro {
  min-height: 0 !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
html[data-surface-style="list"] .workspace .network-tools,
html[data-surface-style="list"] .workspace .directory-tools {
  margin: 0 !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
html[data-surface-style="list"] .workspace .network-hero-mark,
html[data-surface-style="list"] .workspace .directory-overview {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-inline: 0 !important;
}
html[data-surface-style="list"] .workspace .money-action {
  border-bottom: 1px solid var(--line) !important;
}

/* Store design options and app checkboxes share the same pill switch control. */
:where(.workspace, body.store-editor-mode) .style-check-grid label {
  position: relative;
  min-width: 0;
  justify-content: flex-start;
  padding: 0 62px 0 14px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.workspace, body.store-editor-mode) .style-check-grid input[type="checkbox"],
:where(.workspace, body.store-editor-mode) input[type="checkbox"]:not([role="switch"]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  flex: 0 0 42px;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  background: #242429 !important;
  cursor: pointer;
}
:where(.workspace, body.store-editor-mode) .style-check-grid input[type="checkbox"] {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
}
:where(.workspace, body.store-editor-mode) input[type="checkbox"]:not([role="switch"])::before {
  content: "";
  position: absolute;
  inset: 2px auto auto 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #9b9ba4;
  transition: transform .18s ease, background .18s ease;
}
:where(.workspace, body.store-editor-mode) input[type="checkbox"]:not([role="switch"]):checked {
  border-color: #8b7cff !important;
  background: #806cf2 !important;
}
:where(.workspace, body.store-editor-mode) input[type="checkbox"]:not([role="switch"]):checked::before {
  background: #fff;
  transform: translateX(18px);
}
body.store-editor-mode .style-studio,
body.store-editor-mode .style-controls,
body.store-editor-mode .style-control-section,
body.store-editor-mode .style-media-row,
body.store-editor-mode .style-fields,
body.store-editor-mode .style-check-grid { min-width: 0; max-width: 100%; }
body.store-editor-mode .style-media-row > label,
body.store-editor-mode .brand-logo-control,
body.store-editor-mode .wallpaper-control { min-width: 0; overflow: hidden; }
body.store-editor-mode input[type="file"] { min-width: 0; max-width: 100%; font-size: 10px; }
body.store-editor-mode input[type="file"]::file-selector-button {
  max-width: 100%;
  margin-right: 7px;
  padding: 7px 10px;
  border: 1px solid var(--pro-line);
  border-radius: 7px;
  color: var(--pro-text);
  background: #151518;
  cursor: pointer;
}

/* Replace the legacy stark white focus bars with a quiet, high-contrast
   app-colour treatment. Inputs use an inset ring so they never look boxed in. */
html[data-surface-style="list"] .workspace :where(button, a, select, textarea):focus-visible {
  outline: 1px solid rgba(141, 124, 255, .72) !important;
  outline-offset: 2px !important;
}
html[data-surface-style="list"] .workspace :where(input):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(141, 124, 255, .38) !important;
}
html[data-surface-style="list"] .workspace .solid-button:hover,
html[data-surface-style="list"] .workspace .solid-button:focus-visible {
  color: #0b0b0d !important;
  background: #fff !important;
  border-color: #fff !important;
}

/* Default interface polish ------------------------------------------------- */
/* Keep the rail scannable without turning six destinations into six visual
   sections.  One compact workspace group plus Browse is enough hierarchy. */
.rail-nav { gap: 18px !important; }
.rail-nav .nav-group { gap: 2px !important; }
.rail-nav .nav-group > small { margin: 0 0 5px !important; }

/* A settings row is a two-column layout: copy can wrap, the control always
   has a real right gutter and is never pushed against the card edge. */
.app-settings-card .setting-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 22px 18px 18px !important;
}
.app-settings-card .setting-toggle > input[role="switch"] { margin-right: 2px !important; }

/* Marketplace listings retain an airy catalogue rhythm in the new list UI.
   The separation belongs between products, not in extra card decoration. */
.marketplace-categories { margin-top: -4px; margin-bottom: 18px; gap: 8px; flex-wrap: wrap; }
html[data-surface-style="list"] .workspace .listing-grid.wide {
  column-gap: 22px !important;
  row-gap: 18px !important;
  padding-top: 10px !important;
}
html[data-surface-style="list"] .workspace .listing-card { padding: 16px 0 !important; }

/* Never allow the browser's bright default focus rectangle to bleed into the
   dark chrome. Mouse/touch clicks stay visually quiet; keyboard focus uses
   the same muted accent instead. */
:where(.app-shell) :focus { outline: none !important; }
:where(.app-shell) :focus-visible { outline: 1px solid rgba(141,124,255,.55) !important; outline-offset: 2px !important; }

/* Mobile messages: a 16px composer stops Safari's automatic text zoom. The
   fixed action row stays above the safe area, cannot overflow sideways and
   only animates transform/opacity for smooth opening. */
@media (max-width: 760px) {
  .screen[data-screen="messages"] { overflow-x: clip !important; }
  .screen[data-screen="messages"] .messenger { min-height: 0 !important; overflow: hidden !important; }
  .screen[data-screen="messages"] .conversation { min-width: 0 !important; }
  .screen[data-screen="messages"] .message-stream { padding-inline: 14px !important; overscroll-behavior-y: contain; }
  .screen[data-screen="messages"] .composer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    min-height: 58px !important;
    padding: 9px max(12px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    background: #09090b !important;
    border-top: 1px solid var(--line) !important;
    transform: translateZ(0);
  }
  .screen[data-screen="messages"] .composer > input { font-size: 16px !important; }
  .screen[data-screen="messages"] .composer-attach,
  .screen[data-screen="messages"] .composer-emoji { flex-shrink: 0 !important; }
  .mobile-menu-dialog { overscroll-behavior: contain; }
}

/* Dialog forms inherit a full-width mobile input rule. Checkbox controls are
   switches, so keep their intrinsic size and prevent that rule from turning
   them into large square fields in the product and store editors. */
#appDialog form input[type="checkbox"]:not([role="switch"]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  display: block !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  background: #242429 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35) !important;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
#appDialog form input[type="checkbox"]:not([role="switch"])::before {
  content: "" !important;
  position: absolute !important;
  inset: 2px auto auto 2px !important;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #9b9ba4 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.42) !important;
  transform: none !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s ease !important;
}
#appDialog form input[type="checkbox"]:not([role="switch"]):checked {
  border-color: #8b7cff !important;
  background: #806cf2 !important;
  box-shadow: 0 0 0 3px rgba(128,108,242,.1), inset 0 1px 1px rgba(255,255,255,.14) !important;
}
#appDialog form input[type="checkbox"]:not([role="switch"]):checked::before {
  background: #fff !important;
  transform: translateX(18px) !important;
}
#appDialog form :where(.canvas-check, .network-channel-options label, .product-relations label) {
  align-items: center !important;
  column-gap: 10px !important;
}

/* Safari focuses an overflow container while it is being touch-scrolled. Do
   not draw the platform-blue rectangle around the whole dialog in that case. */
#appDialog:focus,
#appDialog :focus {
  outline: none !important;
}
@media (min-width: 761px) {
  html[data-surface-style="list"] .workspace .command-grid,
  html[data-surface-style="list"] .workspace .analytics-overview { grid-template-columns: 1fr; }
  html[data-surface-style="list"] .workspace .command-columns { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  html[data-surface-style="list"] .workspace .command-grid,
  html[data-surface-style="list"] .workspace .analytics-overview,
  html[data-surface-style="list"] .workspace .growth-grid { display: block; }
  html[data-surface-style="list"] .workspace .command-grid > article,
  html[data-surface-style="list"] .workspace .analytics-overview > article,
  html[data-surface-style="list"] .workspace .growth-grid > article { padding: 16px 0; }
  html[data-surface-style="list"] .workspace .home-pulse { grid-template-columns: 1fr 1fr; }
  html[data-surface-style="list"] .workspace .home-pulse button { border-bottom: 1px solid var(--line) !important; }
  html[data-surface-style="list"] .workspace .home-pulse button:nth-child(2n) { border-right: 0 !important; }
}

/* Final mobile shell pass: this stylesheet is loaded last, so keep the dock
   overrides here where older visual layers cannot reintroduce the gradient. */
@media (max-width: 760px) {
  .workspace { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  .screen { padding-top: 8px !important; padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  .mobile-dock {
    height: 54px !important;
    padding: 3px 5px !important;
    background: #000 !important;
    border-color: #29292f !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.52) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .mobile-dock::before { display: none !important; }
  .mobile-dock button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 46px !important;
    padding: 2px 1px !important;
    line-height: 1 !important;
  }
  .mobile-dock button .ui-icon,
  .mobile-dock button svg {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 19px !important;
    margin: 0 auto !important;
  }
  .mobile-dock button span {
    display: block !important;
    width: 100% !important;
    height: 11px !important;
    line-height: 11px !important;
    text-align: center !important;
  }
}