:root {
  --m-aw-bg: #f3f7fb;
  --m-aw-surface: #ffffff;
  --m-aw-text: #101828;
  --m-aw-muted: #667085;
  --m-aw-subtle: #98a2b3;
  --m-aw-blue: #0877e8;
  --m-aw-blue-dark: #0068c9;
  --m-aw-blue-soft: #eaf4ff;
  --m-aw-orange: #d97706;
  --m-aw-orange-soft: #fff4df;
  --m-aw-green: #16a34a;
  --m-aw-green-soft: #eafaf0;
  --m-aw-red: #ef4444;
  --m-aw-red-soft: #fff0f0;
  --m-aw-border: rgba(16, 24, 40, 0.08);
  --m-aw-radius-card: 18px;
  --m-aw-radius-control: 13px;
  --m-aw-shadow-card: 0 12px 30px rgba(15, 47, 88, 0.08);
  --m-aw-page-x: 14px;
}

@media (max-width: 768px) {
  body.mobile-web-active {
    min-width: 0;
    overflow-x: hidden;
    background: var(--m-aw-bg);
    color: var(--m-aw-text);
  }

  body.mobile-web-active .app-shell {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    padding: 0;
    background: var(--m-aw-bg);
  }

  body.mobile-web-active .topbar,
  body.mobile-web-active .announcement-bar {
    display: none !important;
  }

  body.mobile-web-active .page {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    padding: 0;
  }

  .m-page,
  .m-page * {
    box-sizing: border-box;
  }

  .m-page {
    width: 100%;
    min-height: 100dvh;
    padding: 0 var(--m-aw-page-x) calc(94px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 18% 0%, rgba(8, 119, 232, 0.13), transparent 32%),
      radial-gradient(circle at 100% 20%, rgba(8, 119, 232, 0.08), transparent 26%),
      var(--m-aw-bg);
  }

  .mobile-pressable {
    transition:
      transform 0.14s ease,
      box-shadow 0.14s ease,
      opacity 0.14s ease,
      filter 0.14s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-pressable:active {
    transform: scale(0.975);
    filter: saturate(0.95);
  }

  .mobile-pressable:disabled,
  .is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
  }

  .is-loading {
    pointer-events: none;
    opacity: 0.72;
  }
}