/* [project]/apps/web/src/app/globals.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light dark;
  --color-bg: #121316;
  --color-surface: #1b1d22;
  --color-surface-raised: #24272e;
  --color-text: #ecedef;
  --color-text-muted: #a4a9b3;
  --color-accent: #e0a458;
  --color-on-accent: #1a1304;
  --color-danger: #ff7a7a;
  --color-success: #5fcb8a;
  --color-border: #343842;
  --color-border-control: #6b717d;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --touch-target: 48px;
  --nav-height: 64px;
  --content-width: 520px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
  }
}

:root[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --color-bg: #fff;
  --color-surface: #f2f3f5;
  --color-surface-raised: #e7e9ed;
  --color-text: #16181d;
  --color-text-muted: #4b515c;
  --color-accent: #8f5200;
  --color-on-accent: #fff;
  --color-danger: #b3261e;
  --color-success: #1b6b3a;
  --color-border: #d5d8de;
  --color-border-control: #767c88;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light;
    --color-bg: #fff;
    --color-surface: #f2f3f5;
    --color-surface-raised: #e7e9ed;
    --color-text: #16181d;
    --color-text-muted: #4b515c;
    --color-accent: #8f5200;
    --color-on-accent: #fff;
    --color-danger: #b3261e;
    --color-success: #1b6b3a;
    --color-border: #d5d8de;
    --color-border-control: #767c88;
  }
}

*, :before, :after {
  box-sizing: border-box;
}

html, body {
  background: var(--color-bg);
  min-height: 100%;
  color: var(--color-text);
  font-family: var(--font-body);
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, p {
  margin: 0;
}

h1 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.25rem;
}

h1:focus {
  outline: none;
}

a {
  color: var(--color-accent);
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.muted {
  color: var(--color-text-muted);
}

.caption {
  font-size: .75rem;
  line-height: 1rem;
}

.screen {
  min-height: 100dvh;
  padding: var(--space-5) var(--space-4);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.screen__inner {
  width: 100%;
  max-inline-size: var(--content-width);
  gap: var(--space-5);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.stack {
  gap: var(--space-4);
  flex-direction: column;
  display: flex;
}

.stack--tight {
  gap: var(--space-2);
}

.grow {
  flex: 1;
}

.wordmark {
  letter-spacing: -.02em;
  color: var(--color-accent);
  font-size: 2.5rem;
  font-weight: 700;
}

.topbar {
  min-block-size: var(--touch-target);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.progress {
  color: var(--color-text-muted);
  font-size: .875rem;
}

.btn {
  min-block-size: var(--touch-target);
  padding-inline: var(--space-5);
  border-radius: var(--radius-full);
  font: inherit;
  cursor: pointer;
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--secondary {
  color: var(--color-text);
  border-color: var(--color-border-control);
  background: none;
}

.btn--quiet {
  color: var(--color-text-muted);
  padding-inline: var(--space-3);
  background: none;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.field {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.field__label {
  font-size: .875rem;
  font-weight: 500;
}

.field__input {
  min-block-size: var(--touch-target);
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.field__input--code {
  letter-spacing: .4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
}

.check {
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--touch-target);
  display: flex;
}

.check input {
  block-size: 24px;
  inline-size: 24px;
  accent-color: var(--color-accent);
}

.error {
  color: var(--color-danger);
  font-size: .875rem;
}

.notice {
  color: var(--color-success);
  font-size: .875rem;
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.rules {
  gap: var(--space-3);
  flex-direction: column;
  margin: 0;
  padding-inline-start: var(--space-5);
  display: flex;
}

.actions {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
}

.skeleton {
  border-radius: var(--radius-md);
  background: var(--color-surface);
  animation: 1.4s ease-in-out infinite pulse;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

.shell {
  flex-direction: column;
  min-block-size: 100dvh;
  display: flex;
}

.shell__main {
  padding: var(--space-5) var(--space-4) calc(var(--nav-height) + var(--space-5));
  flex: 1;
  inline-size: 100%;
  max-inline-size: 720px;
  margin-inline: auto;
}

.nav {
  z-index: 20;
  block-size: var(--nav-height);
  background: var(--color-surface);
  border-block-start: 1px solid var(--color-border);
  padding-block-end: env(safe-area-inset-bottom);
  display: flex;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
}

.nav__link {
  min-block-size: var(--touch-target);
  color: var(--color-text-muted);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 2px;
  font-size: .75rem;
  text-decoration: none;
  display: flex;
}

.nav__link[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
}

.nav__icon {
  block-size: 24px;
  inline-size: 24px;
}

@media (min-width: 900px) {
  .shell {
    flex-direction: row;
  }

  .nav {
    block-size: 100dvh;
    inline-size: 220px;
    padding: var(--space-5) var(--space-3);
    border-block-start: none;
    border-inline-end: 1px solid var(--color-border);
    justify-content: flex-start;
    gap: var(--space-2);
    flex-direction: column;
    position: sticky;
    inset-block-start: 0;
  }

  .nav__link {
    justify-content: flex-start;
    gap: var(--space-3);
    padding-inline: var(--space-4);
    border-radius: var(--radius-full);
    flex-direction: row;
    flex: none;
    font-size: .875rem;
  }

  .shell__main {
    padding-block-end: var(--space-5);
  }
}

.empty {
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-7) var(--space-4);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  block-size: 1px;
  inline-size: 1px;
  position: absolute;
  overflow: hidden;
}

.chips {
  gap: var(--space-2);
  border: 0;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  display: flex;
}

.chip {
  min-block-size: var(--touch-target);
  padding-inline: var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-control);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  background: none;
  align-items: center;
  font-size: .875rem;
  display: inline-flex;
  position: relative;
}

.chip input {
  opacity: 0;
  cursor: pointer;
  margin: 0;
  position: absolute;
  inset: 0;
}

.chip:has(input:checked) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}

button.chip:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.chip:has(input:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.legend {
  margin-block-end: var(--space-2);
  padding: 0;
  font-size: .875rem;
  font-weight: 500;
}

.textarea {
  min-block-size: 120px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  line-height: 1.5;
}

.row {
  gap: var(--space-2);
  display: flex;
}

.row .field__input {
  flex: 1;
  min-inline-size: 0;
}

.photo-grid {
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.photo-card {
  gap: var(--space-2);
  flex-direction: column;
  display: flex;
}

.photo-frame {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
  padding: var(--space-2);
  color: var(--color-text-muted);
  justify-content: center;
  align-items: center;
  font-size: .75rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.photo-frame img {
  object-fit: cover;
  block-size: 100%;
  inline-size: 100%;
  position: absolute;
  inset: 0;
}

.badge {
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
  font-size: .75rem;
  line-height: 1rem;
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-start: var(--space-2);
}

.badge--ok {
  color: var(--color-success);
}

.badge--bad {
  color: var(--color-danger);
}

.photo-actions {
  gap: var(--space-1);
  display: flex;
}

.icon-btn {
  min-block-size: var(--touch-target);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-control);
  min-inline-size: 0;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  background: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.icon-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.icon-btn--danger {
  color: var(--color-danger);
}

.photo-strip {
  gap: var(--space-2);
  display: flex;
}

.photo-strip__item {
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--color-surface);
  block-size: 72px;
  inline-size: 72px;
}

.links {
  gap: var(--space-3);
  flex-direction: column;
  display: flex;
}

.member-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (max-width: 359px) {
  .member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .member-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.member-card {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  position: relative;
  overflow: hidden;
}

.member-link {
  color: #fff;
  text-decoration: none;
  display: block;
  position: absolute;
  inset: 0;
}

.member-link img {
  object-fit: cover;
  block-size: 100%;
  inline-size: 100%;
  position: absolute;
  inset: 0;
}

.member-placeholder {
  color: var(--color-text-muted);
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
  font-weight: 700;
  display: flex;
  position: absolute;
  inset: 0;
}

.member-overlay {
  padding: var(--space-5) var(--space-2) var(--space-2);
  background: linear-gradient(to top, #000000c7, #0000);
  flex-direction: column;
  font-size: .75rem;
  line-height: 1rem;
  display: flex;
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
}

.member-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  overflow: hidden;
}

.member-distance {
  opacity: .92;
}

.presence {
  border-radius: var(--radius-full);
  border: 2px solid #0009;
  block-size: 12px;
  inline-size: 12px;
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
}

.presence--online {
  background: var(--color-success);
}

.presence--recently {
  background: var(--color-accent);
}

.sheet {
  inline-size: min(100% - 2 * var(--space-4), 480px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  max-block-size: 90dvh;
  color: var(--color-text);
  padding: var(--space-5);
  overflow: auto;
}

.sheet::backdrop {
  background: #0009;
}

.carousel {
  gap: var(--space-2);
  scroll-snap-type: x mandatory;
  border-radius: var(--radius-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  overflow-x: auto;
}

.carousel__slide {
  scroll-snap-align: center;
  aspect-ratio: 1;
  background: var(--color-surface);
  flex: 0 0 100%;
}

.carousel__slide img {
  object-fit: cover;
  block-size: 100%;
  inline-size: 100%;
  display: block;
}

.chip--static {
  cursor: default;
  min-block-size: 36px;
  list-style: none;
}

.switch {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
  display: flex;
}

.switch input {
  appearance: none;
  border-radius: var(--radius-full);
  background: var(--color-border-control);
  cursor: pointer;
  flex: none;
  block-size: 32px;
  inline-size: 52px;
  margin: 0;
  transition: background .15s;
  position: relative;
}

.switch input:after {
  content: "";
  border-radius: var(--radius-full);
  background: var(--color-bg);
  block-size: 24px;
  inline-size: 24px;
  transition: transform .15s;
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
}

.switch input:checked {
  background: var(--color-accent);
}

.switch input:checked:after {
  transform: translateX(20px);
}

[dir="rtl"] .switch input:checked:after {
  transform: translateX(-20px);
}

.switch input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .switch input, .switch input:after {
    transition: none;
  }
}

.avatar {
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  block-size: 48px;
  inline-size: 48px;
  color: var(--color-text-muted);
  object-fit: cover;
  flex: none;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: inline-flex;
}

.convos {
  gap: var(--space-1);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.convo {
  align-items: center;
  gap: var(--space-3);
  min-block-size: 72px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  display: flex;
}

.convo:hover {
  background: var(--color-surface);
}

.convo__text {
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
  display: flex;
}

.convo__name {
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  display: flex;
}

.convo__preview {
  color: var(--color-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.convo__preview--new {
  color: var(--color-text);
  font-weight: 600;
}

.convo__meta {
  align-items: flex-end;
  gap: var(--space-1);
  flex-direction: column;
  flex: none;
  display: flex;
}

.dot {
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  block-size: 8px;
  inline-size: 8px;
}

.dot--online {
  background: var(--color-success);
}

.dot--recently {
  background: var(--color-accent);
}

.unread-badge {
  border-radius: var(--radius-full);
  background: var(--color-accent);
  block-size: 22px;
  min-inline-size: 22px;
  color: var(--color-on-accent);
  justify-content: center;
  align-items: center;
  padding-inline: 6px;
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
}

.nav__link {
  position: relative;
}

.unread-badge--nav {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: calc(50% + 6px);
}

.chat {
  gap: var(--space-3);
  min-block-size: calc(100dvh - var(--nav-height) - 2 * var(--space-5));
  flex-direction: column;
  display: flex;
}

.chat__header {
  align-items: center;
  gap: var(--space-2);
  display: flex;
}

.chat__who {
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  color: var(--color-text);
  flex: 1;
  text-decoration: none;
  display: flex;
}

.menu {
  position: relative;
}

.menu summary {
  cursor: pointer;
  min-inline-size: var(--touch-target);
  min-block-size: var(--touch-target);
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  list-style: none;
  display: inline-flex;
}

.menu summary::-webkit-details-marker {
  display: none;
}

.menu__items {
  z-index: 5;
  min-inline-size: 200px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  position: absolute;
  inset-inline-end: 0;
}

.chat__log {
  gap: var(--space-3);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.chat__empty {
  text-align: center;
  padding: var(--space-6) 0;
}

.bubbles {
  gap: var(--space-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.bubble {
  max-inline-size: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  align-self: flex-start;
  gap: var(--space-1);
  flex-direction: column;
  display: flex;
}

.bubble--mine {
  background: var(--color-accent);
  color: var(--color-on-accent);
  align-self: flex-end;
}

.bubble__meta {
  gap: var(--space-2);
  opacity: .8;
  justify-content: flex-end;
  display: flex;
}

.photo-button {
  border-radius: var(--radius-md);
  cursor: pointer;
  background: none;
  border: 0;
  min-block-size: 160px;
  min-inline-size: 160px;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.photo-button img {
  block-size: auto;
  inline-size: 100%;
  max-inline-size: 260px;
  display: block;
}

.photo-button--blurred img {
  filter: blur(28px) brightness(.8);
  transform: scale(1.1);
}

.photo-button__hint {
  padding: var(--space-3);
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 4px #000c;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  display: flex;
  position: absolute;
  inset: 0;
}

.sheet--photo {
  text-align: center;
}

.sheet--photo img {
  block-size: auto;
  inline-size: 100%;
  border-radius: var(--radius-md);
  margin-block-end: var(--space-4);
  display: block;
}

.chat__composer {
  gap: var(--space-2);
  padding-block: var(--space-2);
  background: var(--color-bg);
  flex-direction: column;
  display: flex;
  position: sticky;
  inset-block-end: var(--nav-height);
}

.chat__row {
  align-items: flex-end;
  gap: var(--space-2);
  display: flex;
}

.chat__input {
  min-block-size: var(--touch-target);
  max-block-size: 160px;
  padding: var(--space-3);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  resize: none;
  field-sizing: content;
  flex: 1;
}

.chat__attach {
  inline-size: var(--touch-target);
  padding-inline: 0;
  font-size: 1.5rem;
}

@media (min-width: 900px) {
  .chat {
    min-block-size: calc(100dvh - 2 * var(--space-5));
  }

  .chat__composer {
    inset-block-end: 0;
  }
}

.actions-row {
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.choice {
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--touch-target);
  cursor: pointer;
  display: flex;
}

.choice input {
  block-size: 24px;
  inline-size: 24px;
  accent-color: var(--color-accent);
}

.link-button {
  appearance: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  min-block-size: 24px;
  padding: 0;
  text-decoration: underline;
}

.notices {
  gap: var(--space-3);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.btn--danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: none;
}

fieldset.card {
  min-inline-size: 0;
  margin: 0;
}

fieldset.card legend {
  padding-inline: var(--space-2);
}

.offline-banner {
  z-index: 25;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border-control);
  font-size: .875rem;
  position: sticky;
  inset-block-start: 0;
}

.hide-button {
  z-index: 30;
  inline-size: var(--touch-target);
  block-size: var(--touch-target);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-control);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
  position: fixed;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
}

.neutral {
  min-block-size: 100dvh;
  padding: var(--space-6) var(--space-4);
  gap: var(--space-4);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  flex-direction: column;
  max-inline-size: 520px;
  margin-inline: auto;
  display: flex;
}

.neutral__title {
  min-block-size: var(--touch-target);
  align-self: flex-start;
  margin: 0;
}

.neutral__list {
  gap: var(--space-3);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.neutral__note {
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  flex-direction: column;
  display: flex;
}

.neutral__note span {
  color: var(--color-text-muted);
}

.banner-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-control);
}

.address-list {
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.address-list li {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  overflow-wrap: anywhere;
  display: flex;
}

.lock-screen {
  z-index: 200;
  padding: var(--space-4);
  background: var(--color-bg);
  color: var(--color-text);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.lock-screen__box {
  width: 100%;
  max-width: 320px;
}

/*# sourceMappingURL=apps_web_src_app_globals_1wvyn-hyvojof.css.map*/