/* Home Workspace maps neutral surfaces and status tones to the shared semantic system. */
.mobile-workspace,
.mw-bottom-nav,
.mw-sheet {
  --mw-background: var(--background-dark, #0b0d12);
  --mw-surface: var(--surface-dark, #171a22);
  --mw-surface-raised: var(--surface-raised-dark, #20242e);
  --mw-text: var(--text-on-dark, #f8fafc);
  --mw-muted: var(--muted-on-dark, #9aa3b3);
  --mw-border: var(--border-on-dark, rgb(255 255 255 / 9%));
  --mw-brand: var(--brand, #7c5cff);
  --mw-success: var(--success, #34d399);
  --mw-warning: var(--warning, #fbbf24);
  --mw-danger: var(--danger, #fb7185);
  box-sizing: border-box;
  color: var(--mw-text);
}

.mobile-workspace *,
.mobile-workspace *::before,
.mobile-workspace *::after,
.mw-bottom-nav *,
.mw-sheet *,
.mw-sheet *::before,
.mw-sheet *::after {
  box-sizing: border-box;
}

/* Native navigation and the status-bar backdrop are outside module scroll areas. */
html.mobile-workspace-native,
body.mobile-workspace-native {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.mobile-workspace-native {
  position: fixed;
  inset: 0;
  height: 100dvh;
}

/* iOS focus zoom persists across routes when editable text is below 16px. */
body.mobile-workspace-native
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
    [type="color"]
  ),
body.mobile-workspace-native textarea,
body.mobile-workspace-native select,
body.mobile-workspace-native [contenteditable="true"] {
  font-size: max(16px, 1em) !important;
}

body.mobile-workspace-native #global-search-form > label {
  min-width: 0;
}

body.mobile-workspace-native #global-search-query {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

body.mobile-workspace-native #root,
body.mobile-workspace-native .shell {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

body.mobile-workspace-native .shell {
  display: block;
}

body.mobile-workspace-native .shell > aside {
  display: none;
}

body.mobile-workspace-native .ui-toast-region,
body.mobile-workspace-native .marketplace-penalty-toast {
  top: calc(12px + env(safe-area-inset-top));
}

body.mobile-workspace-native:not(.auth-screen):not(.mobile-workspace-active)
  .shell
  > main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: calc(14px + env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    calc(76px + env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

body.mobile-workspace-native .app-page-header {
  flex: 0 0 auto;
}

.mw-home-back {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  padding: 4px 8px 4px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--brand, #6d28d9);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.mw-home-back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mw-home-back:focus-visible {
  outline: 2px solid var(--brand, #6d28d9);
  outline-offset: 2px;
}

body.mobile-workspace-native .app-page-header {
  align-items: flex-start;
  flex-wrap: wrap;
}

body.mobile-workspace-native .mw-home-back {
  flex: 0 0 100%;
  align-self: flex-start;
}

body.mobile-workspace-native:not(.auth-screen):not(.mobile-workspace-active)
  #content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: none;
}

body.mobile-workspace-native.auth-screen #root {
  overflow: hidden auto;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: none;
}

body.mobile-workspace-native #content:has(> .messenger-shell) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.mobile-workspace-native #content > .messenger-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

body.mobile-workspace-native .messenger-layout {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

body.mobile-workspace-native .messenger-loading {
  box-sizing: border-box;
  min-height: 0;
  max-height: 100%;
}

body.mobile-workspace-active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior-y: none;
  background: var(--background-dark, #0b0d12);
}

body.mobile-workspace-active .shell {
  display: block;
  background: var(--background-dark, #0b0d12);
}

body.mobile-workspace-active .shell,
body.mobile-workspace-active main,
body.mobile-workspace-active #content {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

body.mobile-workspace-active .shell > aside,
body.mobile-workspace-active .app-page-header,
body.mobile-workspace-active .platform-observation-banner,
body.mobile-workspace-active [data-kolegin-pwa-host],
body.mobile-workspace-active > .offline-action-queue {
  display: none !important;
}

body.mobile-workspace-active main {
  height: 100%;
  min-height: 0;
  padding: 0 !important;
  background:
    radial-gradient(circle at 80% -10%, rgb(124 92 255 / 18%), transparent 34%),
    linear-gradient(180deg, #10131a 0%, #0b0d12 52%, #090b0f 100%);
}

body.mobile-workspace-active #content {
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.mobile-workspace-active .shell {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.mobile-workspace {
  --mw-row-size: 108px;
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 0
    calc(128px + env(safe-area-inset-bottom));
  overflow: hidden;
  color-scheme: dark;
  background-color: var(--mw-background);
  background-size: cover;
}

.mobile-workspace[data-mw-wallpaper="white"] {
  background: var(--surface, #fff);
}

.mobile-workspace[data-mw-wallpaper="custom"][data-mw-wallpaper-ready="true"] {
  background-color: var(--mw-background);
  background-image:
    linear-gradient(180deg, rgb(0 0 0 / 56%), rgb(0 0 0 / 60%)),
    var(--mw-custom-wallpaper-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.mobile-workspace[data-mw-wallpaper="custom"][data-mw-wallpaper-ready="true"]
  .mw-app-icon
  > strong {
  text-shadow:
    0 1px 2px rgb(0 0 0 / 82%),
    0 2px 6px rgb(0 0 0 / 58%);
}

.mobile-workspace[data-mw-wallpaper="aurora"],
.mw-wallpaper-options [data-mw-wallpaper-option="aurora"] {
  background-image:
    radial-gradient(ellipse at 12% 12%, rgb(119 80 182 / 64%), transparent 58%),
    radial-gradient(
      ellipse at 110% 55%,
      rgb(34 103 155 / 58%),
      transparent 65%
    ),
    linear-gradient(160deg, #292440, #111b2c 66%, #141520);
}

.mobile-workspace[data-mw-wallpaper="dusk"],
.mobile-workspace[data-mw-wallpaper="custom"]:not(
    [data-mw-wallpaper-ready="true"]
  ),
.mw-wallpaper-options [data-mw-wallpaper-option="dusk"] {
  background-image:
    radial-gradient(
      ellipse at 105% 8%,
      rgb(226 153 147 / 64%),
      transparent 55%
    ),
    radial-gradient(
      ellipse at -20% 55%,
      rgb(128 97 162 / 66%),
      transparent 65%
    ),
    linear-gradient(165deg, #754052, #342d53 52%, #192438);
}

.mobile-workspace[data-mw-wallpaper="ocean"],
.mw-wallpaper-options [data-mw-wallpaper-option="ocean"] {
  background-image:
    radial-gradient(ellipse at 8% 8%, rgb(119 212 211 / 58%), transparent 52%),
    radial-gradient(
      ellipse at 110% 65%,
      rgb(51 123 180 / 58%),
      transparent 62%
    ),
    linear-gradient(160deg, #2a6b79, #15374f 58%, #101f33);
}

.mobile-workspace[data-mw-wallpaper="sand"],
.mw-wallpaper-options [data-mw-wallpaper-option="sand"] {
  background-image:
    radial-gradient(ellipse at 5% 4%, rgb(241 206 168 / 64%), transparent 58%),
    radial-gradient(
      ellipse at 115% 68%,
      rgb(218 194 171 / 48%),
      transparent 66%
    ),
    linear-gradient(145deg, #9a7453, #59463b 54%, #2e2a29);
}

.mobile-workspace[data-mw-wallpaper="graphite"],
.mw-wallpaper-options [data-mw-wallpaper-option="graphite"] {
  background-image:
    radial-gradient(ellipse at 8% 12%, rgb(132 143 158 / 32%), transparent 58%),
    radial-gradient(
      ellipse at 105% 58%,
      rgb(114 123 140 / 25%),
      transparent 65%
    ),
    linear-gradient(155deg, #353a43, #1b2029 60%, #10131b);
}

.mw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 0 12px 8px;
}

.mw-topbar > div:first-child {
  min-width: 0;
}

.mw-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #9b8cff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 16px;
  text-transform: uppercase;
}

.mw-topbar h2 {
  margin: 0;
  overflow: hidden;
  color: var(--mw-text);
  font-size: 22px;
  font-weight: 790;
  letter-spacing: -0.035em;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-top-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.mw-icon-button,
.mw-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--mw-border);
  border-radius: 15px;
  background: rgb(255 255 255 / 6%);
  color: var(--mw-text);
}

.mw-avatar {
  background: linear-gradient(145deg, #7c5cff, #4b6cff);
  box-shadow: 0 8px 24px rgb(82 72 255 / 28%);
  font-size: 13px;
  font-weight: 850;
}

.mw-sync-banner {
  display: grid;
  gap: 2px;
  margin: 0 18px 10px;
  padding: 9px 12px;
  border: 1px solid rgb(251 191 36 / 25%);
  border-radius: 12px;
  background: rgb(251 191 36 / 8%);
  color: #fde68a;
  font-size: 12px;
  line-height: 16px;
}

.mw-sync-banner small {
  color: var(--mw-muted);
}

.mw-sync-banner button {
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  background: transparent;
  color: var(--mw-text);
  white-space: normal;
  font: inherit;
}

.mw-sync-banner button:focus-visible {
  outline: 3px solid #b7aaff;
  outline-offset: 2px;
}

.mw-sync-error {
  border-color: rgb(251 113 133 / 30%);
  background: rgb(251 113 133 / 8%);
  color: #fecdd3;
}

.mw-pages {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-y: none;
}

.mw-pages::-webkit-scrollbar {
  display: none;
}

.mw-page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4px 16px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.mw-page-heading {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 8px;
  color: rgb(248 250 252 / 82%);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgb(0 0 0 / 32%);
}

.mw-page-heading button,
.mw-customize,
.mw-inline-action,
.mw-edit-toolbar button,
.mw-empty button {
  min-height: 38px;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  background: rgb(255 255 255 / 6%);
  color: var(--mw-text);
  font-size: 12px;
  font-weight: 750;
}

.mw-grid {
  display: grid;
  grid-auto-flow: row dense;
  grid-auto-rows: var(--mw-row-size);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 10px;
  min-height: 100%;
}

.mw-item {
  position: relative;
  grid-column: span var(--mw-w);
  grid-row: span var(--mw-h);
  min-width: 0;
  min-height: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.mw-item:focus-visible,
.mw-bottom-nav button:focus-visible,
.mw-sheet button:focus-visible,
.mw-topbar button:focus-visible,
.mw-customize:focus-visible {
  outline: 3px solid #b7aaff;
  outline-offset: 2px;
}

.mw-item.is-editing {
  touch-action: none;
  animation: mw-edit-float 0.24s ease-out 1;
}

.mw-item.is-dragging {
  opacity: 0.45;
  transform: scale(0.96);
}

.mw-item.mw-drop-target {
  outline: 2px solid #ab9cff;
  outline-offset: 3px;
}

.mw-app-icon {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 7px;
  padding-top: 2px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.mw-app-icon > strong {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  color: var(--mw-text);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: -0.015em;
  line-height: 16px;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgb(0 0 0 / 65%);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mw-app-glyph,
.mw-mini-glyph {
  display: grid;
  place-items: center;
  color: white;
}

.mw-app-glyph {
  position: relative;
  isolation: isolate;
  width: min(clamp(52px, 16vw, 64px), 100%);
  aspect-ratio: 1;
  border: 1px solid rgb(17 24 39 / 6%);
  border-radius: 26%;
  background: #fafafa;
  color: #111827;
  box-shadow:
    0 1px 2px rgb(17 24 39 / 5%),
    0 3px 7px rgb(17 24 39 / 5%);
  transition:
    transform 150ms ease,
    filter 150ms ease;
}

.mw-app-glyph svg {
  width: 72%;
  height: 72%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.mw-app-artwork {
  padding: 0;
  border: 0;
}

.mw-app-artwork > .mw-icon-artwork {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  fill: none;
  stroke: none;
  filter: none;
}

.mw-app-icon:not(.is-editing):active .mw-app-glyph {
  transform: scale(0.91);
  filter: brightness(0.9);
}

.mw-app-glyph > b {
  position: absolute;
  z-index: 2;
  top: -5px;
  right: -5px;
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  border: 2px solid var(--mw-background);
  border-radius: 999px;
  background: var(--mw-danger);
  color: white;
  font-size: 10px;
}

.mw-glyph-pulse,
.mw-glyph-ai {
  background:
    radial-gradient(circle at 16% 18%, #f2acff, transparent 48%),
    linear-gradient(145deg, #aa60e8, #6356e5 55%, #4889df);
  color: white;
}

.mw-glyph-decision,
.mw-glyph-tasks {
  background: linear-gradient(155deg, #fff, #f2eff8);
  color: #e57052;
}

.mw-glyph-profit,
.mw-glyph-finance {
  background: linear-gradient(155deg, #fff, #e6f5ee);
  color: #158b71;
}

.mw-glyph-production,
.mw-glyph-equipment {
  background: linear-gradient(155deg, #fff9ed, #eedcc1);
  color: #af762f;
}

.mw-glyph-wb {
  background: linear-gradient(145deg, #e975dd, #ba3bc8 55%, #7d37b6);
  color: white;
}

.mw-glyph-ozon {
  background: linear-gradient(145deg, #75b4ff, #3f7aee 54%, #3358cd);
  color: white;
}

.mw-glyph-workers,
.mw-glyph-chat {
  background: linear-gradient(145deg, #71d5fa, #319de7 54%, #347bd6);
  color: white;
}

.mw-glyph-stock,
.mw-glyph-album {
  background: linear-gradient(155deg, #fff, #e2f1f1);
  color: #2d8b8c;
}

.mw-glyph-reports,
.mw-glyph-add {
  background: linear-gradient(155deg, #fff, #e4e9f0);
  color: #596b87;
}

.mw-app-glyph:not(.mw-folder-preview) {
  background: #fafafa;
  color: #111827;
}

.mw-widget {
  display: grid;
  align-content: start;
  gap: 9px;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 13px;
  border: 1px solid var(--mw-border);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 5%), transparent 52%),
    var(--mw-surface);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 5%),
    0 14px 30px rgb(0 0 0 / 16%);
  cursor: pointer;
}

.mw-widget-widget_stack {
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
}

.mw-stack-bar,
.mw-stack-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mw-stack-bar strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-stack-bar button,
.mw-stack-navigation button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  background: var(--mw-surface);
  color: var(--mw-text);
  cursor: pointer;
}

.mw-stack-navigation {
  justify-content: space-between;
}

.mw-stack-navigation span {
  font-size: 12px;
  color: var(--mw-muted);
}

.mw-stack-navigation button:disabled {
  opacity: 0.45;
  cursor: default;
}

.mw-stack-body {
  display: grid;
  align-content: start;
  gap: 9px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.mw-widget-pulse {
  padding: 16px;
  background:
    radial-gradient(circle at 86% 8%, rgb(153 124 255 / 42%), transparent 36%),
    linear-gradient(145deg, #2c2455, #1b1b38 56%, #151923);
  border-color: rgb(169 151 255 / 24%);
}

.mw-widget-decision {
  border-color: rgb(251 191 36 / 22%);
  background:
    linear-gradient(145deg, rgb(251 191 36 / 12%), transparent 58%),
    var(--mw-surface);
}

.mw-widget-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.mw-widget-head > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 1px;
}

.mw-widget-head small,
.mw-kpis small,
.mw-freshness,
.mw-widget p {
  color: var(--mw-muted);
  font-size: 10px;
  line-height: 14px;
}

.mw-widget-head b {
  overflow: hidden;
  color: var(--mw-text);
  font-size: 14px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-mini-glyph {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.mw-mini-glyph svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.mw-widget-head em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  color: var(--mw-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 12px;
}

.mw-widget-head .mw-tone-success {
  background: rgb(52 211 153 / 12%);
  color: #6ee7b7;
}

.mw-widget-head .mw-tone-warning {
  background: rgb(251 191 36 / 12%);
  color: #fde68a;
}

.mw-widget-head .mw-tone-danger {
  background: rgb(251 113 133 / 12%);
  color: #fecdd3;
}

.mw-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.mw-kpis > span {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.mw-kpis b {
  overflow: hidden;
  color: var(--mw-text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mw-widget-pulse .mw-kpis b {
  font-size: 15px;
  line-height: 20px;
}

.mw-widget p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mw-widget-compact .mw-kpis,
.mw-widget-compact > p,
.mw-widget-compact .mw-freshness {
  display: none;
}

.mw-freshness {
  align-self: end;
  margin-top: auto;
}

.mw-state-stale,
.mw-state-offline {
  color: #fde68a;
}

.mobile-workspace[data-privacy="hidden"] .mw-sensitive b {
  color: transparent;
  text-shadow: 0 0 10px rgb(255 255 255 / 56%);
  user-select: none;
}

.mw-skeleton {
  display: block;
  width: 100%;
  height: 27px;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 5%),
    rgb(255 255 255 / 11%),
    rgb(255 255 255 / 5%)
  );
  background-size: 220% 100%;
  animation: mw-skeleton 1.5s ease-in-out infinite;
}

.mw-skeleton-title {
  width: 72%;
  height: 14px;
}

.mw-inline-action {
  justify-self: start;
  min-height: 32px;
  padding: 5px 9px;
}

.mw-item-controls {
  position: absolute;
  z-index: 4;
  top: -7px;
  right: -7px;
  display: flex;
  gap: 4px;
}

.mw-item-controls button {
  display: grid;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  background: #303541;
  color: white;
  font-size: 13px;
  box-shadow: 0 5px 12px rgb(0 0 0 / 34%);
}

.mw-item-controls [data-mw-remove] {
  background: #db3c5a;
}

.mw-app-icon .mw-item-controls {
  top: -8px;
  right: -8px;
}

.mw-app-icon .mw-item-controls button {
  position: relative;
  isolation: isolate;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
  line-height: 1;
}

.mw-app-icon .mw-item-controls button::before {
  position: absolute;
  z-index: -1;
  inset: 10px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  background: #303541;
  box-shadow: 0 2px 5px rgb(0 0 0 / 28%);
  content: "";
}

.mw-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 16px 10px;
  padding: 10px;
  border: 1px solid rgb(124 92 255 / 25%);
  border-radius: 15px;
  background: rgb(124 92 255 / 9%);
}

.mw-edit-toolbar > span {
  display: grid;
  min-width: 120px;
  flex: 1 1 auto;
}

.mw-edit-toolbar b {
  font-size: 12px;
}

.mw-edit-toolbar small {
  color: var(--mw-muted);
  font-size: 10px;
}

.mw-edit-toolbar button {
  min-height: 36px;
  padding: 5px 8px;
}

.mw-edit-toolbar button:last-child {
  border-color: transparent;
  background: var(--mw-brand);
}

.mw-edit-toolbar button:disabled {
  opacity: 0.45;
}

.mw-page-control {
  position: fixed;
  z-index: 901;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transform: translateX(-50%);
  padding-inline: 8px;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  scrollbar-width: none;
}

.mw-page-control::before {
  position: absolute;
  z-index: -1;
  inset: 10px 0;
  border-radius: 24px;
  background: rgb(17 20 27 / 82%);
  backdrop-filter: blur(18px);
  content: "";
}

.mobile-workspace .mw-page-control button {
  flex: 0 0 24px;
  display: grid;
  width: 24px;
  height: 44px;
  min-width: 24px !important;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.mw-page-control button span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mw-muted);
}

.mw-page-control button.active span {
  background: var(--mw-text);
}

.mw-page-control button:focus-visible,
.mw-connection:focus-visible {
  outline: 2px solid var(--mw-text);
  outline-offset: -2px;
}

.mw-connection {
  display: grid;
  width: 44px;
  min-height: 44px;
  padding: 12px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mw-muted);
  box-shadow: none;
}

.mw-status-connection {
  position: absolute;
  z-index: 2;
  top: calc(6px + env(safe-area-inset-top));
  left: max(28px, env(safe-area-inset-left));
  width: 8px;
  height: 8px;
  pointer-events: none;
}

.mw-status-connection[hidden],
body.mw-native-status .mw-status-connection {
  display: none !important;
}

.mw-connection-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mw-danger);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
}

.mw-connection-dot[data-connection-state="ready"] {
  background: var(--mw-success);
}

.mw-connection-dot[data-connection-state="offline"],
.mw-connection-dot[data-connection-state="error"] {
  background: var(--mw-danger);
}

.mw-connection svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.mw-connection[data-connection-state="ready"] {
  color: var(--mw-success);
}

.mw-connection[data-connection-state="offline"],
.mw-connection[data-connection-state="error"] {
  color: var(--mw-danger);
}

.mw-customize {
  display: block;
  min-height: 42px;
  margin: 2px auto 0;
  padding: 8px 14px;
  background: transparent;
  color: var(--mw-muted);
}

.mw-empty {
  display: grid;
  grid-column: 1 / -1;
  min-height: 220px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  border: 1px dashed rgb(255 255 255 / 14%);
  border-radius: 20px;
  color: var(--mw-muted);
  text-align: center;
}

.mw-empty > span {
  width: 34px;
}

.mw-empty svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.mw-empty b {
  color: var(--mw-text);
}

.mw-empty p {
  margin: 0;
  font-size: 12px;
}

.mw-bottom-nav {
  position: fixed;
  z-index: 900;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  min-height: calc(68px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  padding: 7px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom)
    max(8px, env(safe-area-inset-left));
  border-top: 1px solid rgb(255 255 255 / 8%);
  background: rgb(17 20 27 / 92%);
  box-shadow: 0 -12px 40px rgb(0 0 0 / 28%);
  backdrop-filter: blur(22px) saturate(140%);
}

body.mobile-workspace-native .mw-bottom-nav {
  display: grid;
}

.mw-bottom-nav button {
  display: grid;
  min-width: 0;
  min-height: 52px;
  padding: 5px 2px;
  place-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: #7f8898;
  font-size: 9px;
  font-weight: 720;
}

.mw-bottom-nav button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.mw-bottom-nav button.active {
  color: #ab9cff;
}

.mw-bottom-nav .mw-bottom-add {
  width: 50px;
  height: 50px;
  min-height: 50px;
  margin: -16px auto 0;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 18px;
  background: linear-gradient(145deg, #8b69ff, #4c58f5);
  color: white;
  box-shadow: 0 10px 26px rgb(77 73 245 / 42%);
}

.mw-bottom-nav .mw-bottom-add svg {
  width: 25px;
  height: 25px;
}

.mw-more-dots {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 22px;
}

.mw-sheet-backdrop {
  position: fixed;
  z-index: 980;
  inset: 0;
  background: rgb(0 0 0 / 58%);
  backdrop-filter: blur(3px);
}

.mw-sheet {
  position: fixed;
  z-index: 981;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(82svh, 720px);
  overflow: auto;
  padding: 6px 16px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid var(--mw-border);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: #181b23;
  box-shadow: 0 -24px 70px rgb(0 0 0 / 48%);
  color-scheme: dark;
}

.mw-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 22%);
}

.mw-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mw-sheet h2 {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
}

.mw-sheet header button {
  display: grid;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: rgb(255 255 255 / 7%);
  color: white;
  font-size: 22px;
}

.mw-sheet-body {
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.mw-home-settings {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.mw-sheet [hidden] {
  display: none !important;
}

.mw-sheet-body > button,
.mw-home-settings > button,
.mw-voice-action {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--mw-border);
  border-radius: 15px;
  background: rgb(255 255 255 / 5%);
  color: var(--mw-text);
  text-align: left;
}

.mw-sheet-body > button > span:last-child,
.mw-home-settings > button > span:last-child,
.mw-voice-action > span:last-child {
  display: grid;
  gap: 2px;
}

.mw-sheet-body small {
  color: var(--mw-muted);
  font-size: 11px;
}

.mw-home-settings > button:disabled {
  opacity: 0.45;
  cursor: default;
}

.mw-screen-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.mw-screen-list > * {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--mw-border);
  border-radius: 16px;
  background: rgb(255 255 255 / 4%);
}

.mw-screen-list > * > span,
.mw-screen-list > * > strong,
.mw-screen-list > * > label {
  flex: 1 1 120px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 20px;
}

.mw-screen-list input,
.mw-library-search input,
input.mw-library-search {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  background: rgb(255 255 255 / 6%);
  color: var(--mw-text);
  font: inherit;
  font-size: 16px;
  line-height: 22px;
}

.mw-screen-list > * > input {
  flex: 1 1 160px;
  width: auto;
}

.mw-screen-list button,
.mw-screen-actions button,
.mw-library-tabs button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  background: rgb(255 255 255 / 6%);
  color: var(--mw-text);
  font: inherit;
  font-size: 13px;
  line-height: 20px;
}

.mw-screen-actions,
.mw-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.mw-screen-actions > button {
  flex: 1 1 120px;
}

.mw-library-search {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--mw-muted);
  font-size: 13px;
  line-height: 20px;
}

.mw-library-search input::placeholder {
  color: var(--mw-muted);
  opacity: 1;
}

.mw-library-search input:focus-visible,
input.mw-library-search:focus-visible,
.mw-screen-list input:focus-visible {
  outline: 2px solid #b7aaff;
  outline-offset: 2px;
}

.mw-library-tabs {
  padding: 4px;
  gap: 4px;
  border-radius: 16px;
  background: rgb(0 0 0 / 16%);
}

.mw-library-tabs button {
  flex: 1 1 100px;
  border-color: transparent;
  background: transparent;
  color: var(--mw-muted);
}

.mw-library-tabs
  button:is([aria-selected="true"], [aria-pressed="true"], .active) {
  background: rgb(255 255 255 / 12%);
  color: var(--mw-text);
  box-shadow: 0 2px 5px rgb(0 0 0 / 12%);
}

.mw-wallpaper-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mw-wallpaper-options [data-mw-wallpaper-option] {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: 120px;
  align-content: end;
  justify-items: start;
  gap: 4px;
  overflow: hidden;
  padding: 10px;
  border: 2px solid rgb(255 255 255 / 14%);
  border-radius: 18px;
  background-color: var(--mw-background);
  background-size: cover;
  color: var(--mw-text);
  text-align: left;
  text-shadow: 0 1px 4px rgb(0 0 0 / 60%);
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  box-shadow: inset 0 -48px 36px -28px rgb(0 0 0 / 60%);
}

.mw-wallpaper-options [data-mw-wallpaper-option]::before {
  position: absolute;
  top: 14px;
  left: 12px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgb(255 255 255 / 70%);
  box-shadow:
    19px 0 0 rgb(255 255 255 / 50%),
    38px 0 0 rgb(255 255 255 / 65%),
    0 20px 0 rgb(255 255 255 / 45%),
    19px 20px 0 rgb(255 255 255 / 60%),
    38px 20px 0 rgb(255 255 255 / 40%);
  content: "";
}

.mw-wallpaper-options
  [data-mw-wallpaper-option]:is(
    [aria-pressed="true"],
    [aria-selected="true"],
    .active
  ) {
  border-color: #c6baff;
  box-shadow:
    0 0 0 2px rgb(124 92 255 / 32%),
    inset 0 -48px 36px -28px rgb(0 0 0 / 60%);
}

.mw-wallpaper-custom {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--mw-border);
  border-radius: 18px;
  background: var(--mw-surface);
}

.mw-wallpaper-custom-preview {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 120px;
  max-height: 180px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  background-color: var(--mw-surface-raised);
  background-image: var(--mw-custom-wallpaper-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.mw-wallpaper-custom-preview:is(
  [aria-pressed="true"],
  [aria-selected="true"],
  .active
) {
  border-color: var(--mw-brand);
  box-shadow: 0 0 0 2px rgb(124 92 255 / 16%);
}

.mw-wallpaper-upload,
.mw-wallpaper-custom > button:not(.mw-wallpaper-custom-preview) {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  background: var(--mw-surface-raised);
  color: var(--mw-text);
  text-align: center;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.mw-wallpaper-upload input[type="file"] {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.mw-wallpaper-upload:focus-within,
.mw-wallpaper-upload:focus-visible,
.mw-wallpaper-custom > button:focus-visible {
  outline: 2px solid #b7aaff;
  outline-offset: 2px;
}

.mw-wallpaper-upload:has(input:disabled),
.mw-wallpaper-upload:disabled,
.mw-wallpaper-custom > button:disabled {
  opacity: 0.45;
  cursor: default;
}

.mw-wallpaper-upload input:disabled {
  cursor: default;
}

.mw-wallpaper-status,
.mw-wallpaper-description {
  min-width: 0;
  margin: 0;
  color: var(--mw-muted);
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 18px;
}

.mw-wallpaper-status:empty {
  display: none;
}

.mw-wallpaper-status:is([role="alert"], [data-state="error"], .is-error) {
  color: var(--mw-danger);
}

.mw-screen-list button:disabled,
.mw-screen-actions button:disabled,
.mw-library-tabs button:disabled,
.mw-wallpaper-options button:disabled {
  opacity: 0.45;
  cursor: default;
}

.mw-folder-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--mw-surface-raised);
}

.mw-folder-preview span {
  display: grid;
  place-items: center;
}

.mw-folder-preview span svg {
  width: 20px;
  height: 20px;
}

.mw-folder-form {
  display: grid;
  gap: 12px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
}

.mw-folder-form > input,
.mw-folder-form > button {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  background: var(--mw-surface-raised);
  color: var(--mw-text);
  font: inherit;
}

.mw-folder-form :focus-visible {
  outline: 2px solid var(--mw-brand);
  outline-offset: 2px;
}

.mw-folder-form fieldset {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--mw-border);
  border-radius: 12px;
}

.mw-folder-choice {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;
}

.mw-folder-choice input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.mw-folder-error {
  margin: 0;
  color: var(--mw-danger);
}

.mw-create-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mw-create-grid button {
  display: grid;
  min-width: 0;
  min-height: 86px;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 8px 4px;
  border: 1px solid var(--mw-border);
  border-radius: 16px;
  background: rgb(255 255 255 / 4%);
  color: var(--mw-text);
  font-size: 10px;
}

.mw-create-grid b {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-voice-action svg {
  flex: 0 0 28px;
  width: 28px;
  fill: none;
  stroke: #ab9cff;
  stroke-width: 1.8;
}

body.mobile-workspace-light .mobile-workspace,
body.mobile-workspace-light .mw-bottom-nav,
body.mobile-workspace-light .mw-sheet {
  --mw-background: var(--surface, #fff);
  --mw-surface: var(--surface-soft, #f8f9fb);
  --mw-surface-raised: var(--surface-muted, #f1f3f6);
  --mw-text: var(--text, #111827);
  --mw-muted: var(--muted, #5f6672);
  --mw-border: var(--border, #e4e6eb);
  --mw-brand: var(--brand, #6545cc);
  --mw-success: var(--success, #16804a);
  --mw-warning: var(--warning, #946200);
  --mw-danger: var(--danger, #b4233e);
  color-scheme: light;
}

body.mobile-workspace-active.mobile-workspace-light,
body.mobile-workspace-active.mobile-workspace-light .shell,
body.mobile-workspace-active.mobile-workspace-light main {
  background: var(--surface, #fff);
}

body.mobile-workspace-light .mw-app-icon > strong,
body.mobile-workspace-light .mw-page-heading {
  color: var(--mw-text);
  text-shadow: none;
}

body.mobile-workspace-light .mw-eyebrow {
  color: var(--mw-brand);
}

body.mobile-workspace-light .mw-item:focus-visible,
body.mobile-workspace-light .mw-bottom-nav button:focus-visible,
body.mobile-workspace-light .mw-sheet button:focus-visible,
body.mobile-workspace-light .mw-topbar button:focus-visible,
body.mobile-workspace-light .mw-customize:focus-visible,
body.mobile-workspace-light .mw-sync-banner button:focus-visible,
body.mobile-workspace-light .mw-library-search input:focus-visible,
body.mobile-workspace-light input.mw-library-search:focus-visible,
body.mobile-workspace-light .mw-screen-list input:focus-visible,
body.mobile-workspace-light .mw-wallpaper-upload:focus-within,
body.mobile-workspace-light .mw-wallpaper-upload:focus-visible,
body.mobile-workspace-light .mw-wallpaper-custom > button:focus-visible,
body.mobile-workspace-light .mw-item.mw-drop-target {
  outline-color: var(--mw-brand);
}

body.mobile-workspace-light .mw-icon-button,
body.mobile-workspace-light .mw-avatar {
  border-color: var(--mw-border);
  background: var(--mw-surface);
  color: var(--mw-text);
  box-shadow: none;
}

body.mobile-workspace-light .mw-widget {
  border-color: var(--mw-border);
  background: var(--mw-surface);
  box-shadow: 0 2px 6px rgb(17 24 39 / 3%);
}

body.mobile-workspace-light .mw-widget-head em {
  background: var(--mw-surface-raised);
}

body.mobile-workspace-light .mw-widget-head .mw-tone-success {
  background: var(--success-soft, #edf8f1);
  color: var(--mw-success);
}

body.mobile-workspace-light .mw-widget-head .mw-tone-warning {
  background: var(--warning-soft, #fff7e6);
  color: var(--mw-warning);
}

body.mobile-workspace-light .mw-widget-head .mw-tone-danger {
  background: var(--danger-soft, #fff0f2);
  color: var(--mw-danger);
}

body.mobile-workspace-light .mw-state-stale,
body.mobile-workspace-light .mw-state-offline {
  color: var(--mw-warning);
}

body.mobile-workspace-light
  .mobile-workspace[data-privacy="hidden"]
  .mw-sensitive
  b {
  text-shadow: 0 0 10px rgb(17 24 39 / 45%);
}

body.mobile-workspace-light .mw-skeleton {
  background-image: linear-gradient(
    90deg,
    rgb(17 24 39 / 4%),
    rgb(17 24 39 / 9%),
    rgb(17 24 39 / 4%)
  );
}

body.mobile-workspace-light .mw-edit-toolbar {
  border-color: var(--mw-border);
  background: var(--mw-surface);
}

body.mobile-workspace-light .mw-page-heading button,
body.mobile-workspace-light .mw-customize,
body.mobile-workspace-light .mw-inline-action,
body.mobile-workspace-light .mw-edit-toolbar button,
body.mobile-workspace-light .mw-empty button {
  background: var(--mw-background);
}

body.mobile-workspace-light .mw-edit-toolbar button:last-child {
  background: var(--mw-brand);
  color: #fff;
}

body.mobile-workspace-light .mw-item-controls button {
  border-color: var(--mw-border);
  background: var(--mw-surface-raised);
  color: var(--mw-text);
  box-shadow: 0 1px 4px rgb(17 24 39 / 8%);
}

body.mobile-workspace-light .mw-item-controls [data-mw-remove] {
  background: var(--mw-danger);
  color: #fff;
}

body.mobile-workspace-light .mw-app-icon .mw-item-controls button {
  background: transparent;
  box-shadow: none;
}

body.mobile-workspace-light .mw-app-icon .mw-item-controls button::before {
  border-color: var(--mw-border);
  background: var(--mw-surface-raised);
  box-shadow: 0 1px 4px rgb(17 24 39 / 8%);
}

body.mobile-workspace-light .mw-empty {
  border-color: var(--mw-border);
}

body.mobile-workspace-light .mw-page-control::before {
  background: rgb(238 240 243 / 92%);
}

body.mobile-workspace-light .mw-page-control button span {
  background: #969da8;
}

body.mobile-workspace-light .mw-page-control button.active span {
  background: var(--mw-text);
}

body.mobile-workspace-light .mw-bottom-nav {
  border-color: var(--mw-border);
  background: rgb(255 255 255 / 95%);
  box-shadow: 0 -2px 12px rgb(17 24 39 / 3%);
}

body.mobile-workspace-light .mw-bottom-nav button {
  color: var(--mw-muted);
}

body.mobile-workspace-light .mw-bottom-nav button.active {
  color: var(--mw-text);
}

body.mobile-workspace-light .mw-bottom-nav .mw-bottom-add {
  border-color: var(--mw-border);
  background: var(--mw-surface-raised);
  color: var(--mw-text);
  box-shadow: 0 2px 7px rgb(17 24 39 / 8%);
}

body.mobile-workspace-light .mw-sheet-backdrop {
  background: rgb(17 24 39 / 24%);
}

body.mobile-workspace-light .mw-sheet {
  background: var(--mw-background);
  box-shadow: 0 -12px 48px rgb(17 24 39 / 16%);
}

body.mobile-workspace-light .mw-sheet-handle {
  background: #c5cad2;
}

body.mobile-workspace-light .mw-sheet header button {
  background: var(--mw-surface-raised);
  color: var(--mw-text);
}

body.mobile-workspace-light .mw-sheet-body > button,
body.mobile-workspace-light .mw-home-settings > button,
body.mobile-workspace-light .mw-voice-action,
body.mobile-workspace-light .mw-screen-list > *,
body.mobile-workspace-light .mw-screen-list button,
body.mobile-workspace-light .mw-screen-actions button,
body.mobile-workspace-light .mw-create-grid button {
  background: var(--mw-surface);
}

body.mobile-workspace-light .mw-screen-list input,
body.mobile-workspace-light .mw-library-search input,
body.mobile-workspace-light input.mw-library-search {
  background: var(--mw-background);
}

body.mobile-workspace-light .mw-library-tabs {
  background: var(--mw-surface-raised);
}

body.mobile-workspace-light
  .mw-library-tabs
  button:is([aria-selected="true"], [aria-pressed="true"], .active) {
  background: var(--mw-background);
  box-shadow: 0 1px 4px rgb(17 24 39 / 8%);
}

body.mobile-workspace-light .mw-sync-banner {
  border-color: var(--warning-border, #ebd49c);
  background: var(--warning-soft, #fff7e6);
  color: var(--mw-warning);
}

body.mobile-workspace-light .mw-sync-error {
  border-color: var(--danger-border, #f1bec6);
  background: var(--danger-soft, #fff0f2);
  color: var(--mw-danger);
}

body.mobile-workspace-light .mw-voice-action svg {
  stroke: var(--mw-brand);
}

body.mobile-workspace-light .mw-wallpaper-options [data-mw-wallpaper-option] {
  color: #fff;
}

.mw-wallpaper-options [data-mw-wallpaper-option="white"],
body.mobile-workspace-light
  .mw-wallpaper-options
  [data-mw-wallpaper-option="white"] {
  border-color: var(--border, #e4e6eb);
  background: var(--surface, #fff);
  color: var(--text, #111827);
  text-shadow: none;
  box-shadow: none;
}

.mw-wallpaper-options [data-mw-wallpaper-option="white"]::before {
  border: 1px solid #d9dde4;
  background: #f4f5f7;
  box-shadow:
    19px 0 0 #d9dde4,
    38px 0 0 #eceef2,
    0 20px 0 #e7e9ed,
    19px 20px 0 #d9dde4,
    38px 20px 0 #e7e9ed;
}

.mw-wallpaper-options
  [data-mw-wallpaper-option="white"]:is(
    [aria-pressed="true"],
    [aria-selected="true"],
    .active
  ),
body.mobile-workspace-light
  .mw-wallpaper-options
  [data-mw-wallpaper-option="white"]:is(
    [aria-pressed="true"],
    [aria-selected="true"],
    .active
  ) {
  border-color: var(--mw-brand);
  box-shadow: 0 0 0 2px rgb(124 92 255 / 12%);
}

@keyframes mw-skeleton {
  to {
    background-position: -220% 0;
  }
}

@keyframes mw-edit-float {
  from {
    transform: rotate(-0.35deg);
  }
  to {
    transform: rotate(0.35deg);
  }
}

@media (max-width: 767px) {
  /* iOS zooms focused fields below 16px and can retain that zoom after login. */
  .auth-field input,
  .auth-field select,
  .mw-sheet input:not([type="checkbox"]):not([type="radio"]),
  .mw-sheet select,
  .mw-sheet textarea {
    font-size: 16px;
  }

  .mw-bottom-nav {
    display: grid;
  }

  body:not(.auth-screen) main {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 768px) {
  body.mobile-workspace-native:not(.auth-screen):not(.mobile-workspace-active)
    main {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

body.auth-screen .mw-bottom-nav {
  display: none;
}

@media (max-width: 359px) {
  .mobile-workspace {
    --mw-row-size: 94px;
  }
  .mw-page {
    padding-inline: 10px;
  }

  .mw-grid {
    gap: 12px 7px;
  }

  .mw-widget {
    padding: 10px;
    border-radius: 17px;
  }

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

  .mw-wallpaper-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mw-item.is-editing,
  .mw-skeleton {
    animation: none;
  }

  .mw-page-control button,
  .mw-app-glyph,
  .mw-pages {
    scroll-behavior: auto !important;
    transition: none;
  }
}

/* Compact owner console; command entry lives in a sheet so icons stay fixed. */
.mw-widget-pulse {
  padding: 14px;
  background: linear-gradient(135deg, #fff, #f4f3f8);
  color: #20232e;
  border-color: rgb(255 255 255 / 75%);
  box-shadow: 0 8px 24px rgb(19 13 35 / 12%);
}
.mw-console {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.mw-console-heading,
.mw-console-brand,
.mw-console-attention,
.mw-console-compose {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mw-console-heading {
  justify-content: space-between;
}
.mw-console-brand {
  font-size: 16px;
}
.mw-console-brand svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #7050cc;
  stroke-width: 1.8;
}
.mw-console-state {
  font-size: 10px;
  color: #686073;
}
.mw-console[data-console-state="error"] .mw-console-state,
.mw-console[data-console-state="permission_denied"] .mw-console-state {
  color: #a03c43;
}
.mw-console-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mw-console-metrics > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.mw-console-metrics small {
  color: #6b6475;
  font-size: 10px;
}
.mw-console-metrics strong {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mw-console-attention,
.mw-console-compose {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 12px;
  padding: 7px 10px;
  text-align: left;
  font: inherit;
}
.mw-console-attention {
  background: #eeebf5;
  color: #504364;
  font-size: 11px;
  justify-content: space-between;
}
.mw-console-attention > span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mw-console-compose {
  background: #25232d;
  color: #fff;
  font-size: 12px;
}
.mw-console-compose svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.mw-console-compose > span:last-child {
  margin-left: auto;
}
.mw-console-panel {
  display: grid;
  gap: 12px;
}
.mw-console-panel p {
  margin: 0;
  color: var(--mw-muted);
}
.mw-console-input-label {
  font-size: 12px;
}
.mw-console-panel textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  min-height: 96px;
  font: inherit;
  font-size: 16px;
  padding: 14px;
  border-radius: 16px;
  color: var(--mw-text);
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
}
.mw-console-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mw-console-tools button {
  min-height: 44px;
  padding: 9px 12px;
  font-size: 12px;
}
.mw-console-tools #run {
  margin-left: auto;
  background: #7554cf;
  color: #fff;
}
.mw-console-examples {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mw-console-examples button {
  padding: 8px 12px;
  font-size: 11px;
  border-radius: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .mw-pages {
    scroll-behavior: auto;
  }
}
.mw-console-attention.mw-tone-danger {
  color: #96353e;
  background: #fbe9eb;
}
.mw-console-attention.mw-tone-warning {
  color: #7b521f;
  background: #f8eedc;
}
@media (max-width: 359px) {
  .mw-widget-pulse {
    padding: 12px;
  }
  .mw-console {
    gap: 5px;
  }
  .mw-console-metrics strong {
    font-size: 20px;
  }
  .mw-console-attention {
    min-height: 30px;
  }
}
.mw-widget .mw-item-controls {
  top: 4px;
  right: 4px;
}
.mw-widget-compact .mw-console-metrics,
.mw-widget-compact .mw-console-attention {
  display: none;
}
.mw-console-heading .mw-console-state {
  margin-left: auto;
}
.mw-console-refresh {
  border: 0;
  background: transparent;
  color: #655091;
  padding: 0;
  width: 30px;
  min-height: 30px;
  font-size: 20px;
  flex-shrink: 0;
}