/*
 * Furemu design system — shared styles for the user-flow screens.
 *
 * Values are lifted verbatim from the real product:
 *   - color/radius tokens ....... packages/ui/src/theme/{tokens,themes}.ts
 *   - web globals (copper) ...... apps/web/src/styles/globals.css
 *   - typography (Lora/Dongle) .. apps/web/src/styles/typography.css
 *   - login field look .......... packages/ui/src/components/fieldTokens.ts
 *
 * Every screen imports this file so web and mobile mocks stay visually
 * identical to the shipped app. Screen HTML must not invent colors.
 */

@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@400&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* Light theme semantic roles (themes.ts) */
  --background: #f5f0eb;
  --backgroundStrong: #f4efea;
  --surface1: #fffdfa;
  --surface2: #fefcf8;
  --surface3: #f4efea;
  --text: #1e1a17;
  --textMuted: #766a63;
  --borderColor: #e4d9d2;
  --borderColorHover: #d7c7be;
  --borderColorFocus: #8a4c33;
  --brand: #69392b;
  --brandPressed: #5c3328;
  --onBrand: #fffdfa;
  --brandMuted: #f4efea;
  --shadowColor: #1f1a17;
  --danger: #dc2626;
  --dangerPressed: #b91c1c;
  --onDanger: #ffffff;
  --dangerMuted: #fee2e2;
  --success: #16a34a;
  --successText: #15803d;
  --successMuted: #dcfce7;
  --warning: #d97706;
  --warningMuted: #fef3c7;
  --info: #0284c7;
  --infoMuted: #e0f2fe;

  /* Copper sweep stops (globals.css) */
  --accent-espresso: #5c3328;
  --accent-copper: #8a4c33;

  /* Radius scale (tokens.ts) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  /* Type */
  --font-editorial: 'Lora', Georgia, 'Times New Roman', serif;
  --font-heading: var(--font-editorial);
  --font-mark: 'Dongle', sans-serif;
  /* Native mobile does not bundle Lora (docs/mobile.md): the platform
     system font renders instead. */
  --font-native:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-editorial);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus,
:focus-visible {
  outline: none;
}

button {
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

img {
  display: block;
}

/* ============================================================= *
 * Screen canvases — ONE fixed size per platform (used by iframes)
 * ============================================================= */
.screen {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-editorial);
}

.screen--mobile {
  width: 402px;
  height: 874px;
  font-family: var(--font-native);
  background: var(--background);
}

/* The photo-frame flow: a 4:3 (landscape) Android 8 kiosk panel.
   The frame uses the Android platform font, so it matches the mobile
   platform's native typography rather than the web's Lora. Most surfaces
   are full-bleed photo/video, hence the dark default canvas. */
.screen--frame {
  width: 1024px;
  height: 768px;
  font-family: var(--font-native);
  background: #141110;
}

/* The frame can be mounted in portrait (3:4). When the overview's orientation
   switch renders the screen in a portrait viewport (a 768 x 1024 iframe), the
   canvas becomes a 3:4 panel and the layouts reflow. */
@media (orientation: portrait) {
  .screen--frame {
    width: 768px;
    height: 1024px;
  }
}

/* ============================================================= *
 * Buttons (FuremuButton)
 * ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  height: 40px;
  padding: 0 14px;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: linear-gradient(90deg, #5c3328 0%, #8a4c33 100%);
  color: var(--onBrand);
}

.btn--secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--borderColor);
}

.btn--outline {
  background: var(--surface1);
  color: var(--text);
  border: 1px solid var(--borderColor);
}

.btn--ghost {
  background: transparent;
  color: var(--brand);
}

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

.btn--sm {
  height: 32px;
  padding: 0 11px;
  font-size: 12px;
}

.btn--lg {
  height: 44px;
  padding: 0 18px;
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn--disabled {
  background: var(--surface3);
  color: var(--textMuted);
  border: 1px solid var(--borderColor);
  pointer-events: none;
}

/* ============================================================= *
 * Fields (FuremuInput) — fieldTokens.ts
 *   web: quiet gray fill, no resting border
 *   native/mobile: white fill with a visible neutral border
 * ============================================================= */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.field__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.input {
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: #f4efea;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}

.input::placeholder {
  color: var(--textMuted);
  opacity: 1;
}

.input:focus {
  border-color: var(--borderColorFocus);
}

.input--lg {
  height: 48px;
  font-size: 16px;
}

.input--native {
  background: #fffdfa;
  border-color: var(--borderColor);
}

.field__hint {
  font-size: 12px;
  color: var(--textMuted);
}

.field__error {
  font-size: 14px;
  color: var(--danger);
}

/* OTP boxes */
.otp {
  display: flex;
  gap: 8px;
}

.otp__box {
  flex: 1 1 0;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: #f4efea;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.otp__box--active {
  border-color: var(--borderColorFocus);
}

.otp__box--native {
  background: #fffdfa;
  border-color: var(--borderColor);
}

/* ============================================================= *
 * Cards
 * ============================================================= */
.card {
  background: var(--surface1);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadowColor) 0 6px 18px -6px;
}

.card--lg {
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* ============================================================= *
 * Chips and status
 * ============================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-full);
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--borderColor);
  background: var(--surface3);
  color: var(--textMuted);
}

.chip--brand {
  background: var(--brandMuted);
  border-color: var(--brand);
  color: var(--brand);
}

.chip--success {
  background: var(--successMuted);
  border-color: var(--success);
  color: var(--successText);
}

.chip--danger {
  background: var(--dangerMuted);
  border-color: var(--danger);
  color: var(--danger);
}

.chip--warning {
  background: var(--warningMuted);
  border-color: var(--warning);
  color: var(--warning);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--textMuted);
  flex: 0 0 auto;
}

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

.dot--danger {
  background: var(--danger);
}

/* ============================================================= *
 * Dashboard shell (web)
 * ============================================================= */
.shell {
  --sidebar-width: 272px;
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--background);
}

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  height: 100%;
  padding: 40px 18px 16px;
  display: flex;
  flex-direction: column;
  background: var(--surface1);
  border-right: 1px solid var(--borderColor);
}

.rail-header {
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
}

.wordmark {
  font-family: var(--font-mark);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  color: var(--textMuted);
  font-size: 14px;
  text-decoration: none;
}

.nav__link svg {
  width: 19px;
  height: 19px;
  margin-right: 12px;
  flex: 0 0 auto;
}

.nav__link--active {
  color: var(--text);
  font-weight: 600;
  background: var(--surface3);
}

.account-menu {
  margin-top: auto;
  padding-top: 24px;
}

.account-chip {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  background: var(--surface1);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 60px;
}

/* Page heading (PageHeading) */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  display: inline-block;
  width: 26px;
  height: 2px;
  margin: 0 10px 3px 0;
  content: '';
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-espresso), var(--accent-copper));
}

.page-title {
  margin: 8px 0 0;
  font-family: var(--font-heading);
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.page-desc {
  margin: 10px 0 0;
  color: var(--textMuted);
  font-size: 15px;
  line-height: 1.45;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* ============================================================= *
 * Tables (FuremuTable)
 * ============================================================= */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  padding: 14px 8px 10px;
  color: var(--textMuted);
  font-family: var(--font-editorial);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.2;
}

.table tbody td,
.table tbody th {
  padding: 12px 8px;
  border-top: 1px solid var(--borderColor);
  vertical-align: middle;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.table th:first-child,
.table td:first-child {
  padding-left: 0;
}

.table th:last-child,
.table td:last-child {
  padding-right: 0;
  text-align: right;
}

/* ============================================================= *
 * Mobile app chrome
 * ============================================================= */
.m-statusbar {
  height: 54px;
  padding: 0 28px 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.m-statusbar__icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The native navigation header (expo-router header): centered title on
   the warm-paper canvas, no shadow. */
.m-navbar {
  height: 44px;
  display: grid;
  place-items: center;
  position: relative;
  background: var(--background);
}

.m-navbar__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.m-navbar__back {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--brand);
}

.m-navbar__action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text);
}

.m-header {
  padding: 6px 20px 14px;
}

/* The scrollable content area under the fixed status bar + nav header,
   above the tab bar. */
.m-scroll {
  height: calc(100% - 54px - 44px - 84px);
  overflow: hidden;
  padding: 6px 16px 0;
}

.m-scroll--full {
  height: calc(100% - 54px - 44px);
}

.m-scroll--notabs {
  height: calc(100% - 54px);
}

.m-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.m-subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--textMuted);
}

.m-body {
  padding: 0 20px;
  height: calc(100% - 54px - 84px);
  overflow: hidden;
}

.m-tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  padding: 8px 12px 22px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  background: var(--surface1);
  border-top: 1px solid var(--borderColor);
}

.m-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
  color: var(--textMuted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.m-tab--active {
  color: var(--brand);
}

.m-tab svg {
  width: 24px;
  height: 24px;
}

.m-home-indicator {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 140px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--text);
  opacity: 0.85;
}

.m-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-card {
  background: var(--surface1);
  border: 1px solid var(--borderColor);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 20px -12px var(--shadowColor);
}

.m-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  background: var(--surface1);
  color: var(--textMuted);
  font-size: 14px;
}

.m-segmented {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--surface3);
}

.m-segmented__item {
  flex: 1;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--textMuted);
}

.m-segmented__item--active {
  background: var(--surface1);
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 2px 6px -2px var(--shadowColor);
}

.m-fab {
  position: absolute;
  right: 20px;
  bottom: 104px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(90deg, #5c3328 0%, #8a4c33 100%);
  color: var(--onBrand);
  box-shadow: 0 10px 24px -8px rgba(92, 51, 40, 0.55);
}

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
}

.m-btn--primary {
  background: linear-gradient(90deg, #5c3328 0%, #8a4c33 100%);
  color: var(--onBrand);
}

.m-btn--outline {
  background: var(--surface1);
  color: var(--text);
  border: 1px solid var(--borderColor);
}

.m-btn--block {
  width: 100%;
}

.m-btn--secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--borderColor);
}

/* A muted rounded panel, the native FuremuCard look. */
.m-panel {
  background: var(--surface1);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  padding: 16px;
}

.m-eyebrow {
  color: var(--textMuted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.m-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.m-meta {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.m-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.m-meta dt {
  color: var(--textMuted);
  font-weight: 500;
}

.m-meta dd {
  margin: 0;
  font-weight: 600;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--borderColor);
  background: var(--surface3);
  color: var(--textMuted);
}

.status-badge--success {
  background: var(--successMuted);
  border-color: var(--success);
  color: var(--successText);
}

.status-badge--brand {
  background: var(--brandMuted);
  border-color: var(--brand);
  color: var(--brand);
}

.status-badge--danger {
  background: var(--dangerMuted);
  border-color: var(--danger);
  color: var(--danger);
}

.m-bar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--surface3);
  overflow: hidden;
}

.m-bar > i {
  display: block;
  height: 100%;
  background: var(--brand);
}

/* Frame storage status (shared web + mobile frame detail).
   One cohesive block, in DOM order: condition label, used/total,
   remaining capacity, then the meter. Web uses <progress>; mobile
   uses .m-bar with role=progressbar. Warning token when <100%,
   danger token when full; the label text, not colour alone, carries
   the condition. Uses the same surface and border as the other cards. */
.storage-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  background: var(--surface1);
}

.storage-status__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Reuse .chip so the label matches the app's status chips; keep the
   label text at full contrast and let the icon colour, tint, and
   border carry the warning or danger signal. */
.storage-status .chip {
  color: var(--text);
}

.storage-status .chip svg {
  width: 14px;
  height: 14px;
}

.storage-status--warning .chip svg {
  color: var(--warning);
}

.storage-status--full .chip svg {
  color: var(--danger);
}

.storage-status__used {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.storage-status__meter {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: var(--radius-full);
  appearance: none;
  background: color-mix(in srgb, var(--surface3) 80%, var(--borderColor));
}

.storage-status__meter::-webkit-progress-bar {
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface3) 80%, var(--borderColor));
}

/* Keep the vendor pseudo-elements and the .m-bar fill in separate
   per-browser/per-element rules: an invalid selector combined in one
   list makes browsers drop the whole rule and lose the fill. */
.storage-status__meter::-webkit-progress-value {
  border-radius: var(--radius-full);
  background: var(--brand);
}

.storage-status__meter::-moz-progress-bar {
  border-radius: var(--radius-full);
  background: var(--brand);
}

.storage-status--warning .storage-status__meter::-webkit-progress-value {
  background: var(--warning);
}

.storage-status--warning .storage-status__meter::-moz-progress-bar {
  background: var(--warning);
}

.storage-status--warning .storage-status__meter > i {
  background: var(--warning);
}

.storage-status--full .storage-status__meter::-webkit-progress-value {
  background: var(--danger);
}

.storage-status--full .storage-status__meter::-moz-progress-bar {
  background: var(--danger);
}

.storage-status--full .storage-status__meter > i {
  background: var(--danger);
}

.storage-status__remaining {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Indeterminate upload progress (native ActivityIndicator / web progress). */
.m-progress {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface3);
}

.m-progress__indeterminate {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: m-progress-slide 1.2s ease-in-out infinite;
}

@keyframes m-progress-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* Inline busy indicator for bundle sync. */
.m-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--surface3);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: m-spin 0.8s linear infinite;
}

@keyframes m-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Bundle sync result note (pending / ok / error). */
.m-sync-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
}

.m-sync-note--pending {
  background: var(--surface3);
  color: var(--textMuted);
}

.m-sync-note--ok {
  background: var(--successMuted);
  color: var(--successText);
}

.m-sync-note--error {
  background: var(--dangerMuted);
  color: var(--danger);
}

.m-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 20px 16px;
  border: 1px solid var(--borderColor);
  border-radius: 18px;
  background: var(--surface2);
  min-height: 160px;
  justify-content: center;
}

.m-empty h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.m-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--textMuted);
  line-height: 1.45;
}

.m-inline-error {
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  background: var(--dangerMuted);
  color: var(--text);
  padding: 12px 14px;
  font-size: 14px;
}

.m-skeleton {
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface3) 80%, var(--borderColor));
}

.m-switch {
  width: 50px;
  height: 30px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 999px;
  background: var(--success);
  border: 1px solid var(--success);
  position: relative;
  flex: 0 0 auto;
}

.m-switch.on {
  background: var(--success);
  border-color: var(--success);
}

.m-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
}

.m-switch.on i {
  left: 22px;
}

.m-switch:disabled {
  opacity: 0.5;
}

/* ============================================================= *
 * Web modal dialog (Dialog + ConfirmDialog)
 * ============================================================= */
.modal {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  backdrop-filter: blur(9px);
}

.dialog-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-lg);
  background: var(--surface1);
  padding: 24px;
  box-shadow: 0 30px 70px -30px rgba(31, 26, 23, 0.5);
}

.dialog-panel--wide {
  max-width: 720px;
}

.dialog-panel h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
}

.dialog-panel p {
  margin: 0;
  color: var(--textMuted);
  font-size: 15px;
  line-height: 1.5;
}

.dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--textMuted);
}

.dialog-close:hover {
  background: var(--surface3);
  color: var(--text);
}

.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

/* ============================================================= *
 * Web dropdown popover (DropdownMenu)
 * ============================================================= */
.menu-anchor {
  position: absolute;
  z-index: 40;
}

.menu {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  background: var(--surface1);
  box-shadow: 0 10px 24px -10px rgba(31, 26, 23, 0.35);
}

.menu__item {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
}

.menu__item:hover {
  background: var(--surface3);
}

.menu__item--danger {
  color: var(--danger);
}

.menu__item--danger:hover {
  background: var(--dangerMuted);
}

.menu__sep {
  height: 1px;
  margin: 4px 0;
  background: var(--borderColor);
}

/* ============================================================= *
 * Mobile bottom sheet (DetailBottomSheet)
 * ============================================================= */
.sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(31, 26, 23, 0.5);
}

.m-sheet {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 24px 24px 0 0;
  background: var(--surface1);
  padding: 8px 20px 30px;
}

.m-sheet__handle {
  width: 40px;
  height: 4px;
  margin: 4px auto 10px;
  border-radius: 2px;
  background: var(--borderColorHover);
}

.m-sheet h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.m-sheet__sub {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--textMuted);
}

.m-sheet__row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.m-sheet__sep {
  width: 100%;
  height: 1px;
  background: var(--borderColor);
}

.m-sheet__card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--borderColor);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}

.m-sheet__card--danger {
  color: var(--danger);
}

.m-sheet__cancel {
  width: 100%;
  height: 48px;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  background: var(--surface1);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}