/* Box Closet resident application. */
:root {
  color-scheme: dark;
  --app-blue: #0071e3;
  --app-blue-bright: #2997ff;
  --app-green: #34c759;
  --app-white: #fff;
  --app-black: #000;
  --app-ink: var(--app-white);
  --app-muted: rgba(255, 255, 255, 0.58);
  --app-line: rgba(255, 255, 255, 0.12);
  --app-panel: #111113;
  --app-panel-2: #1b1b1e;

  --app-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  scroll-behavior: smooth;
  background: var(--app-black);
}
body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background: var(--app-white);
  color: #1d1d1f;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font-family: inherit; }
button { cursor: pointer; touch-action: manipulation; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--app-blue); outline-offset: 3px; }

.app-proof-strip {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px 14px;
  background: #0a0a0b;
  color: rgba(255,255,255,.62);
  text-align: center;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.showcase {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.story-panel { padding: 18px; }
.eyebrow,
.micro-label {
  color: #6e6e73;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.story-panel h1 {
  max-width: 430px;
  margin: 10px 0 18px;
  font-size: clamp(44px, 7vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.story-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.story-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  border-radius: 999px;
  background: #fff;
  color: #1d1d1f;
  border: 1px solid rgba(0,0,0,.08);
  text-decoration: none;
  font-weight: 600;
}
.story-button--primary { background: var(--app-blue); color: #fff; border-color: transparent; }
.comparison-points { display: none; }

.iphone-stage,
.iphone-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.iphone-stage { display: block; }
.iphone-shell { position: relative; }
.iphone-screen {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--app-black);
  color: var(--app-ink);
}

.app-global-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: calc(env(safe-area-inset-top) + 10px) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
}
.account-signout {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: transparent;
  color: var(--app-ink);
  font-size: 12px;
  font-weight: 650;
}
.brand-lockup { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 620; letter-spacing: -0.03em; }
.brand-lockup img { width: 30px; height: 30px; object-fit: contain; }
.brand-lockup--tote-wordmark { min-width: 0; }
.brand-lockup--tote-wordmark .brand-wordmark {
  display: block;
  width: 112px;
  height: auto;
  max-height: 30px;
  object-fit: contain;
  opacity: .9;
}
.brand-lockup--app-header-logo {
  position: relative;
  min-width: 146px;
  align-items: center;
  height: 34px;
}
.brand-lockup--app-header-logo .brand-logo-image {
  display: block;
  width: 146px;
  height: 34px;
  max-height: 34px;
  object-fit: contain;
  image-rendering: auto;
  opacity: .98;
}
.brand-lockup--app-header-logo .brand-logo-image--bright {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  pointer-events: none;
}
body[data-appearance="bright"] .brand-logo-image--dark { opacity: 0; }
body[data-appearance="bright"] .brand-logo-image--bright { opacity: .98; }
.avatar {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: var(--app-white);
  color: #000;
  font-weight: 700;
  font-size: 15px;
}
.app-scroll {
  min-height: 0;
  height: auto;
  overflow: hidden;
  position: relative;
}
.app-screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 14px 20px 18px;
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.app-screen.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.greeting-block { margin-bottom: 14px; }
.greeting-block .micro-label { color: rgba(255,255,255,.4); margin: 0 0 6px; }
.greeting-block h2,
.screen-title h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 8vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 620;
}
.hero-tote-card {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border-radius: 24px;
  background: #151517;
  border: 0;
  cursor: pointer;
}
.hero-copy { position: relative; z-index: 2; padding: 23px 22px; }
.hero-copy h3 { margin: 0; color: #fff; font-size: 29px; line-height: 1.05; letter-spacing: -0.035em; }
.hero-copy p { margin: 6px 0 14px; color: rgba(255,255,255,.5); font-size: 18px; letter-spacing: -0.02em; }
.status-pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(52,199,89,.18);
  color: #b9ffd0;
  font-size: 13px;
  font-weight: 600;
}
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-green); }
.hero-tote-card img,
.hero-tote-card .inline-product-video {
  position: absolute;
  right: -24px;
  bottom: 6px;
  width: 72%;
  max-height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 24px 20px rgba(0,0,0,.4));
}
.inline-product-video,
.closet-media {
  display: block;
  background: transparent;
}
.primary-return,
.secondary-action {
  width: 100%;
  min-height: 56px;
  margin: 12px 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.vault-card,
.closet-item,
.timeline-list article {
  display: flex;
  align-items: center;
}
.vault-card {
  width: 100%;
  min-height: 76px;
  gap: 13px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: transparent;
  color: #fff;
  text-align: left;
}
.vault-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: rgba(0,113,227,.22); color: var(--app-blue-bright); }
.vault-card b { display: block; font-size: 17px; letter-spacing: -0.02em; }
.vault-card small { display: block; color: rgba(255,255,255,.5); font-size: 13px; }
.vault-card i { margin-left: auto; font-size: 28px; color: rgba(255,255,255,.72); font-style: normal; }
.vault-media-card {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 16px;
  background: #050506;
  border: 1px solid rgba(255,255,255,.12);
}
.vault-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050506;
}
.vault-sheet-media {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: #050506;
  border: 1px solid rgba(0,0,0,.08);
}
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.quick-grid article { padding: 12px; border-radius: 16px; background: var(--app-panel); }
.quick-grid b { display: block; color: #fff; font-size: 22px; line-height: 1; }
.quick-grid span { color: rgba(255,255,255,.48); font-size: 11px; }
.screen-title { margin: 0 0 16px; }
.screen-title p { margin: 0 0 5px; color: var(--app-blue-bright); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; font-size: 11px; }
.closet-item { gap: 13px; padding: 13px; margin: 10px 0; border-radius: 20px; background: var(--app-panel); }
.closet-item.featured { background: #18181b; }
.closet-item img,
.closet-item .closet-media { width: 80px; height: 66px; object-fit: cover; border-radius: 14px; background: #050506; }
.item-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(0,113,227,.16); color: var(--app-blue-bright); font-size: 22px; }
.closet-item h3 { margin: 0 0 4px; color: #fff; font-size: 17px; letter-spacing: -0.025em; }
.closet-item p { margin: 0; color: rgba(255,255,255,.52); }
.closet-item span { display: block; margin-top: 5px; color: var(--app-green); font-size: 12px; font-weight: 650; }
.closet-item { flex-direction: column; align-items: stretch; }
.closet-item-detail { display: flex; align-items: center; gap: 13px; }
.closet-item-copy { flex: 1; min-width: 0; }
.local-import-action {
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(0,113,227,.16);
  color: #6eb4ff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.local-import-action:disabled { opacity: .6; }
.closet-item [data-import-status] { display: block; min-height: 1.3em; margin-top: 6px; color: rgba(255,255,255,.58); font-size: 11px; }
.secondary-action { background: var(--app-blue); color: #fff; min-height: 54px; font-size: 17px; }
.timeline-list { display: grid; gap: 10px; margin-top: 12px; }
.timeline-list article { gap: 12px; padding: 14px; border-radius: 18px; background: var(--app-panel); }
.timeline-list i { width: 10px; height: 10px; border-radius: 50%; background: var(--app-green); }
.timeline-list b { color: #fff; display: block; margin-bottom: 2px; }
.timeline-list span { color: rgba(255,255,255,.5); font-size: 12px; }
.timeline-list--compact { gap: 8px; }
.timeline-list--compact article { min-height: 54px; }
.media-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 2px;
}
.media-proof-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  background: #08080a;
}
.tab-bar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 64px;
  padding: 8px max(14px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(5,5,6,.82);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}
.tab { display: grid; gap: 3px; place-items: center; min-width: 70px; border: 0; background: transparent; color: rgba(255,255,255,.48); font-size: 11px; }
.tab span { font-size: 25px; line-height: 1; }
.tab b { font-weight: 500; }
.tab.is-active { color: var(--app-blue-bright); }

.vault-camera-input { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sheet { position: absolute; inset: 0; z-index: 100; overflow: hidden; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 160ms ease; }
.sheet.is-open { pointer-events: auto; opacity: 1; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); }
.sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 20px);
  width: min(440px, calc(100% - 24px));
  max-height: calc(100% - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 22px;
  border-radius: 28px;
  background: var(--app-white);
  color: #1d1d1f;
  transition: transform 160ms ease;
}
.sheet.is-open .sheet-panel { transform: translate(-50%, 0); }
.sheet-close { position: absolute; right: 16px; top: 13px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #e8e8ed; font-size: 21px; }
.sheet-panel h2 { margin: 8px 42px 8px 0; font-size: 30px; letter-spacing: -0.035em; line-height: 1.03; }
.sheet-panel p { margin: 0; color: #515154; line-height: 1.35; }
.sheet-options { display: grid; gap: 9px; margin: 16px 0; }
.sheet-options button { min-height: 48px; border-radius: 14px; border: 0; background: #fff; color: #1d1d1f; font-weight: 680; }
.sheet-confirmation { margin: -4px 0 12px; padding: 11px 13px; border-radius: 14px; background: rgba(52,199,89,.13); color: #167a2f; font-size: 13px; font-weight: 650; }
.sheet-confirmation.settings-save-note { border: 1px solid rgba(52,199,89,.28); background: rgba(52,199,89,.12); color: #1d1d1f; }
.custody-proof { padding: 13px; border-radius: 15px; background: #fff; }
.custody-proof b { display: block; margin-bottom: 4px; }
.custody-proof span { color: #6e6e73; font-size: 12px; line-height: 1.32; }
.tote-name-field { display: grid; gap: 8px; color: #6e6e73; font-size: 12px; font-weight: 650; }
.tote-name-field input { width: 100%; min-height: 50px; border-radius: 15px; border: 0; background: #fff; color: #1d1d1f; padding: 0 14px; font-size: 17px; }
.slide-confirm { display: grid; gap: 9px; padding: 13px; border-radius: 17px; background: #fff; color: #1d1d1f; font-weight: 680; }
.swipe-control {
  position: relative;
  min-height: var(--swipe-height);
  height: var(--swipe-height);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border-radius: 999px;
  background: #0f0f12;
  color: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  --swipe-height: 58px;
  --swipe-inset: 6px;
  --swipe-thumb-size: 46px;
  --swipe-native-thumb-size: calc(var(--swipe-thumb-size) + (2 * var(--swipe-inset)));
  --swipe-progress: 0%;
  --thumb-x: 0px;
}
.swipe-control::before {
  content: "";
  position: absolute;
  inset: var(--swipe-inset);
  border-radius: 999px;
  pointer-events: none;
}
.swipe-track {
  position: absolute;
  inset: var(--swipe-inset);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.swipe-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--swipe-progress);
  min-width: var(--swipe-thumb-size);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms ease;
}
.swipe-thumb {
  position: absolute;
  left: var(--swipe-inset);
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--swipe-thumb-size);
  height: var(--swipe-thumb-size);
  border-radius: 50%;
  background: var(--app-green);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  transform: translate3d(var(--thumb-x), 0, 0);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease, color 220ms ease;
  box-shadow: 0 7px 18px rgba(0,0,0,.28);
}
.swipe-label { position: relative; z-index: 2; font-size: 15px; font-weight: 650; letter-spacing: -0.02em; pointer-events: none; }
.swipe-control.is-approved .swipe-fill { width: 100%; background: var(--app-green); }
.swipe-control.is-approved .swipe-thumb { background: #fff; color: var(--app-green); }
.swipe-control.is-approved { color: #fff; box-shadow: inset 0 0 0 1px rgba(52,199,89,.35); }
.swipe-control.is-pending { color: rgba(255,255,255,.92); }
.swipe-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
}
.swipe-range::-webkit-slider-runnable-track { height: var(--swipe-height); background: transparent; }
.swipe-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--swipe-native-thumb-size); height: var(--swipe-height); border-radius: 999px; }
.swipe-range::-moz-range-track { height: var(--swipe-height); background: transparent; }
.swipe-range::-moz-range-thumb { width: var(--swipe-native-thumb-size); height: var(--swipe-height); border: 0; border-radius: 999px; }
.slide-confirm:not(.swipe-control) input { width: 100%; accent-color: var(--app-blue); }

.live-status-tracker {
  display: grid;
  gap: 12px;
  padding: 4px 0 2px;
}
.live-status-tracker p {
  margin: 0;
  color: #1d1d1f;
  font-size: 13px;
  font-weight: 680;
  letter-spacing: -0.02em;
}
.status-rail {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8e8ed;
}
.status-rail i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--status-progress);
  border-radius: inherit;
  background: var(--app-green);
  transition: width 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
.status-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.status-step {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  color: #8e8e93;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d1d6;
  box-shadow: 0 0 0 4px var(--app-white);
}
.status-step b {
  display: block;
  max-width: 62px;
  color: inherit;
  font-size: 10px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.status-step.is-active { color: #1d1d1f; }
.status-step.is-active .status-dot { background: var(--app-green); }

.vault-scan-panel { display: grid; gap: 9px; }
.vault-scan-panel button { background: #fff; }

.install-note { width: min(760px, calc(100vw - 32px)); margin: 0 auto 34px; color: #6e6e73; text-align: center; font-size: 12px; line-height: 1.35; }
.profile-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 22px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: #1d1d1f;
}
body.has-profile .profile-gate { display: none; }
body:not(.has-profile) { background: var(--app-black); overflow: hidden; }
body:not(.has-profile) .showcase,
body:not(.has-profile) .sheet,
body:not(.has-profile) .install-note { display: none; }
.profile-card {
  width: min(300px, calc(100vw - 48px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 22px 18px;
  border-radius: 28px;
  background: transparent;
}
body.has-unreadable-state .profile-card--resident,
body.has-unreadable-state .profile-card--welcome,
body.has-unreadable-state .profile-card--login,
body.has-unreadable-state .profile-card--signup { display: none; }
.profile-card--welcome,
.profile-card--login,
.profile-card--signup { display: grid; gap: 18px; text-align: center; overflow: visible; }
.profile-welcome-mark { display: block; width: 148px; height: 148px; margin: 0 auto; }
.profile-welcome-mark--small { width: 108px; height: 108px; }
.profile-welcome-copy { display: grid; gap: 8px; }
.profile-welcome-copy h1 { margin: 0; color: #1d1d1f; font-size: 34px; line-height: 1; letter-spacing: -.05em; }
.profile-welcome-copy p { margin: 0; color: #6e6e73; font-size: 15px; line-height: 1.4; }
.profile-entry-actions { display: grid; gap: 10px; }
.profile-entry-actions .profile-submit,
.profile-card--login .profile-submit,
.profile-card--signup .profile-submit { margin-top: 0; }
.hosted-auth-form { display: grid; gap: 12px; text-align: left; }
.hosted-auth-form label { display: grid; gap: 6px; color: #6e6e73; font-size: 12px; font-weight: 650; }
.hosted-auth-form input { width: 100%; min-height: 48px; border: 1px solid rgba(0,0,0,.1); border-radius: 15px; background: #fff; color: #1d1d1f; padding: 0 14px; font-size: 16px; }
.profile-entry-secondary {
  width: 100%;
  min-height: 52px;
  border: 1px solid #d2d2d7;
  border-radius: 17px;
  background: #fff;
  color: #0066cc;
  font-size: 17px;
  font-weight: 650;
}
.profile-card--recovery {
  display: grid;
  gap: 16px;
  align-content: start;
}
.resident-onboarding-copy--recovery { display: grid; gap: 10px; }
.resident-onboarding-copy--recovery h1 { margin: 0; }
.recovery-note {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background: #111214;
  border: 1px solid rgba(255,255,255,.08);
}
.recovery-note b { color: var(--app-white); font-size: 13px; }
.recovery-note span,
.recovery-status {
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}
.recovery-actions { display: grid; gap: 10px; }
.recovery-secondary-button {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 17px;
  background: #111214;
  color: var(--app-white);
  font-size: 16px;
  font-weight: 650;
}
.recovery-danger-button {
  background: #ff453a;
  color: #fff;
}
.profile-photo-button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  height: auto;
  margin: 0 0 14px;
  background: transparent;
  color: #0071e3;
  border: 0;
  cursor: pointer;
}
.profile-input-label { justify-self: start; color: #3a3a3c; font-size: 12px; font-weight: 650; }
.profile-photo-button input { position: absolute; opacity: 0; pointer-events: none; }
.profile-photo-preview {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 1px solid #e5e5ea;
  border-radius: 50%;
  background: var(--app-white);
  font-size: 34px;
  font-weight: 400;
}
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-status { display: block; margin: 0 0 20px; color: #6e6e73; text-align: center; font-size: 11px; line-height: 1.3; }
.profile-photo-status[data-state="error"],
.settings-photo small[data-state="error"] { color: #ff9f0a; }
.settings-photo small { color: #6e6e73; font-size: 11px; font-weight: 500; }
.profile-grid { display: grid; grid-template-columns: 1fr; gap: 11px; }
.profile-grid label { display: grid; gap: 6px; min-width: 0; color: #6e6e73; font-size: 12px; font-weight: 600; }
.profile-grid input,
.profile-grid select { width: 100%; min-width: 0; min-height: 48px; border-radius: 15px; border: 0; background: var(--app-white); color: #1d1d1f; padding: 0 14px; font-size: 16px; }
.profile-submit { width: 100%; min-height: 54px; margin-top: 16px; border: 0; border-radius: 17px; background: #0071e3; color: #fff; font-size: 17px; font-weight: 740; letter-spacing: -0.03em; }
.profile-wide { grid-column: 1 / -1; }

@media (max-height: 720px) {
  .profile-card { padding: 18px 18px; }
  .profile-card--recovery { gap: 14px; }
  .profile-photo-button { width: 82px; height: 82px; margin-bottom: 16px; }
  .profile-photo-preview { font-size: 34px; }
  .profile-grid { gap: 9px; }
  .profile-grid input,
  .profile-grid select { min-height: 44px; font-size: 15px; }
  .profile-submit { min-height: 50px; margin-top: 12px; }
  .recovery-secondary-button { min-height: 46px; }
  .sheet.is-settings .settings-photo { gap: 5px; padding: 2px 0 0; }
  .sheet.is-settings .settings-photo-preview { width: 62px; height: 62px; font-size: 20px; }
  .sheet.is-settings .settings-form { gap: 9px; }
  .sheet.is-settings .settings-field { gap: 4px; }
  .sheet.is-settings .settings-field input,
  .sheet.is-settings .settings-field select { min-height: 42px; font-size: 15px; }
  .sheet.is-settings .profile-submit { min-height: 46px; margin-top: 6px; }
  .sheet:not(.is-settings) .sheet-panel { max-height: calc(86svh - env(safe-area-inset-bottom)); padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
  .sheet:not(.is-settings) .vault-sheet-media { max-height: 132px; border-radius: 16px; }
  .sheet:not(.is-settings) .tote-name-field input { min-height: 44px; font-size: 16px; }
  .sheet:not(.is-settings) .swipe-control { --swipe-height: 48px; --swipe-inset: 4px; --swipe-thumb-size: 40px; min-height: var(--swipe-height); }
  .sheet:not(.is-settings) .live-status-tracker { gap: 8px; }
  .sheet:not(.is-settings) .status-step b { font-size: 9px; max-width: 58px; }
}

@media (max-height: 820px) {
  .sheet-panel { bottom: 10px; max-height: calc(100dvh - 56px); padding: 18px 20px; }
  .sheet-panel h2 { margin-top: 5px; margin-bottom: 6px; font-size: 26px; line-height: 1.04; }
  .sheet-panel p { font-size: 15px; line-height: 1.28; }
  .sheet-options { gap: 8px; margin: 12px 0; }
  .sheet-options button { min-height: 44px; }
  .vault-sheet-media { max-height: 176px; aspect-ratio: 16 / 7.3; }
  .slide-confirm,
  .custody-proof { padding: 10px; }
  .sheet-confirmation { margin-bottom: 8px; padding: 9px 12px; }
  .swipe-control { --swipe-height: 50px; --swipe-inset: 5px; --swipe-thumb-size: 40px; min-height: var(--swipe-height); }
}

@media (max-width: 980px) {
  .showcase { grid-template-columns: 1fr; }
  .story-panel { text-align: center; }
  .story-actions { justify-content: center; }
}
@media (max-width: 720px) {
  html, body {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--app-black);
    touch-action: manipulation;
  }
  .app-proof-strip, .story-panel, .install-note { display: none; }
  .showcase, .iphone-stage, .iphone-shell, .iphone-screen {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .app-screen {
    padding: 12px calc(20px + env(safe-area-inset-right)) 18px calc(20px + env(safe-area-inset-left));
  }
  .greeting-block h2, .screen-title h2 { font-size: clamp(26px, 7vw, 34px); }
  .hero-tote-card { min-height: min(210px, 30dvh); }
  .hero-copy h3 { font-size: clamp(24px, 7vw, 30px); }
  .primary-return { min-height: 54px; margin: 11px 0; }
  .vault-card { min-height: 68px; }
  .sheet-panel {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 20px);
    width: min(430px, 100vw);
    max-height: calc(100dvh - env(safe-area-inset-top) - 10px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 28px 28px 0 0;
    padding: 22px max(20px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
}
@media (display-mode: standalone) {
  html, body, .showcase, .iphone-stage, .iphone-shell, .iphone-screen {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  html, body { overflow: hidden; touch-action: manipulation; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.sheet.is-settings .sheet-panel { background: var(--app-white); }
.sheet.is-settings [data-sheet-body] { min-height: 0; }
.sheet.is-settings .sheet-options { margin-top: 14px; }
.settings-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: #e8e8ed;
}
.settings-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6e6e73;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.settings-tabs button.is-active {
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.settings-panel-body { margin-top: 12px; }
.settings-inline-save-note {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(52,199,89,.13);
  color: #167a2f;
  text-align: center;
  font-size: 13px;
  font-weight: 680;
  letter-spacing: -0.02em;
}
.settings-form { display: grid; gap: 13px; }
.settings-photo {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 6px 0 3px;
  color: var(--app-blue);
  cursor: pointer;
  font-size: 13px;
}
.settings-photo input { position: absolute; opacity: 0; pointer-events: none; }
.settings-photo-preview {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border-radius: 50%;
  background: #111114;
  color: #fff;
  font-size: 24px;
  font-weight: 760;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.settings-photo-preview img,
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar.has-image { padding: 0; overflow: hidden; background: #111114; }
.settings-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.settings-wide { grid-column: 1 / -1; }
.settings-field {
  display: grid;
  gap: 6px;
  color: #6e6e73;
  font-size: 12px;
  font-weight: 650;
}
.settings-field input,
.settings-field select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 15px;
  background: #fff;
  color: #1d1d1f;
  padding: 0 13px;
  font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.notification-list { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; padding-right: 2px; }
.notification-list--compact { scroll-padding: 10px; overscroll-behavior: contain; }
.activity-history-list { margin-top: 4px; }
.sheet.is-activity-history .notification-list { max-height: min(48svh, 320px); }
.notification-list article {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
}
.notification-list i {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--app-green);
}
.notification-list b { display: block; color: #1d1d1f; font-size: 14px; letter-spacing: -0.02em; }
.notification-list span { display: block; margin-top: 2px; color: #6e6e73; font-size: 12px; }
@media (max-width: 720px) {
  .settings-field-grid { grid-template-columns: 1fr; }
  .settings-tabs button { font-size: 11px; }
  .notification-list { max-height: 42svh; }
}
.appearance-panel {
  display: grid;
  gap: 12px;
  padding: 4px 0 2px;
}
.appearance-panel p {
  margin: 0;
  color: #1d1d1f;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.appearance-panel small {
  color: #6e6e73;
  font-size: 12px;
  line-height: 1.35;
}
.appearance-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  padding: 5px;
  border-radius: 999px;
  background: #e8e8ed;
}
.appearance-switch button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6e6e73;
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -0.025em;
}
.appearance-switch button.is-active {
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 5px 18px rgba(0,0,0,.1);
}
@media (max-height: 720px) {
  .sheet.is-settings .settings-photo { gap: 5px; padding: 2px 0 0; }
  .sheet.is-settings .settings-photo-preview { width: 62px; height: 62px; font-size: 20px; }
  .sheet.is-settings .settings-form { gap: 9px; }
  .sheet.is-settings .settings-field { gap: 4px; }
  .sheet.is-settings .settings-field input,
  .sheet.is-settings .settings-field select { min-height: 42px; font-size: 15px; }
  .sheet.is-settings .profile-submit { min-height: 46px; margin-top: 6px; }
  .sheet.is-settings .notification-list { max-height: min(34svh, 238px); gap: 6px; padding-bottom: 2px; }
  .sheet.is-settings .notification-list article { padding: 9px 10px; border-radius: 14px; gap: 9px; }
  .sheet.is-settings .notification-list b { font-size: 13px; }
  .sheet.is-settings .notification-list span { max-width: 238px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet.is-activity-history .notification-list { max-height: min(34svh, 238px); gap: 6px; padding-bottom: 2px; }
  .sheet.is-activity-history .notification-list article { padding: 9px 10px; border-radius: 14px; gap: 9px; }
  .sheet.is-activity-history .notification-list b { font-size: 13px; }
  .sheet.is-activity-history .notification-list span { max-width: 238px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .timeline-list--compact article { padding: 11px 12px; min-height: 50px; }
}

body[data-appearance="bright"] .showcase,
body[data-appearance="bright"] .iphone-screen,
body[data-appearance="bright"] .app-screen {
  background: var(--app-white);
  color: #1d1d1f;
}
body[data-appearance="bright"] .app-global-header,
body[data-appearance="bright"] .greeting-block h2,
body[data-appearance="bright"] .screen-title h2,
body[data-appearance="bright"] .hero-copy h3,
body[data-appearance="bright"] .quick-grid b,
body[data-appearance="bright"] .closet-item h3,
body[data-appearance="bright"] .timeline-list b,
body[data-appearance="bright"] .vault-card {
  color: #1d1d1f;
}

body[data-appearance="bright"] .brand-logo-image { filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
body[data-appearance="bright"] .avatar {
  background: #1d1d1f;
  color: #fff;
  border-color: rgba(0,0,0,.08);
}
body[data-appearance="bright"] .greeting-block .micro-label,
body[data-appearance="bright"] .hero-copy p,
body[data-appearance="bright"] .vault-card small,
body[data-appearance="bright"] .quick-grid span,
body[data-appearance="bright"] .closet-item p,
body[data-appearance="bright"] .timeline-list span {
  color: #6e6e73;
}
body[data-appearance="bright"] .hero-tote-card,
body[data-appearance="bright"] .vault-card,
body[data-appearance="bright"] .quick-grid article,
body[data-appearance="bright"] .closet-item,
body[data-appearance="bright"] .timeline-list article {
  background: #fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
}
body[data-appearance="bright"] .hero-tote-card .inline-product-video,
body[data-appearance="bright"] .closet-media,
body[data-appearance="bright"] .vault-media-card,
body[data-appearance="bright"] .media-proof-grid img {
  background: var(--app-white);
}
body[data-appearance="bright"] .primary-return {
  background: #1d1d1f;
  color: #fff;
}
body[data-appearance="bright"] .secondary-action { background: var(--app-blue); color: #fff; }
body[data-appearance="bright"] .tab-bar {
  background: rgba(255,255,255,.86);
  border-top-color: rgba(0,0,0,.08);
}
body[data-appearance="bright"] .tab { color: rgba(29,29,31,.52); }
body[data-appearance="bright"] .tab.is-active,
body[data-appearance="bright"] .screen-title p,
body[data-appearance="bright"] .vault-icon {
  color: #0066cc;
}
body[data-appearance="bright"] .vault-icon { background: rgba(0,113,227,.1); }
body[data-appearance="bright"] .status-pill {
  background: rgba(52,199,89,.13);
  color: #167a2f;
}
body[data-appearance="bright"] .app-scroll { background: var(--app-white); }
@media (max-width: 720px), (display-mode: standalone) {
  body[data-appearance="bright"] .showcase,
  body[data-appearance="bright"] .iphone-stage,
  body[data-appearance="bright"] .iphone-shell,
  body[data-appearance="bright"] .iphone-screen {
    background: var(--app-white);
  }
}

/* Resident lifecycle v2 — Branson source ingestion */
.resident-onboarding-copy { margin: 0 0 16px; }
.resident-onboarding-copy .micro-label { margin: 0 0 5px; color: #0071e3; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.resident-onboarding-copy h1 { margin: 0; color: #1d1d1f; font-size: 30px; line-height: 1.02; letter-spacing: -.045em; }
.resident-onboarding-copy > p:last-child { margin: 10px 0 0; color: #6e6e73; font-size: 12px; line-height: 1.35; }
.onboarding-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 13px; }
.onboarding-flow span { display: grid; gap: 5px; color: #6e6e73; font-size: 9px; font-weight: 650; text-align: center; }
.onboarding-flow i { display: grid; place-items: center; width: 24px; height: 24px; margin: auto; border-radius: 50%; background: var(--app-white); color: #0071e3; font-style: normal; font-size: 10px; }
.profile-card--resident .profile-photo-button { width: 100%; height: auto; margin-bottom: 10px; }
.profile-card--resident .profile-photo-preview { width: 68px; height: 68px; }
.profile-card--resident .profile-grid { gap: 8px; }
.profile-card--resident .profile-grid input,
.profile-card--resident .profile-grid select { min-height: 43px; font-size: 15px; }
.profile-card--resident .profile-submit { min-height: 48px; margin-top: 12px; }
.profile-trust-line { display: block; margin-top: 10px; color: #86868b; font-size: 10px; line-height: 1.3; text-align: center; }
.resident-greeting { margin-bottom: 13px; }
.resident-greeting h2 { margin-bottom: 4px; font-size: clamp(28px, 7vw, 34px); }
.resident-greeting > p:last-child { margin: 0; color: rgba(255,255,255,.46); font-size: 13px; }
.vault-card--primary { min-height: 82px; margin-bottom: 10px; background: #151517; }
.vault-card--primary > span:nth-child(2) { min-width: 0; flex: 1; }
.resident-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.resident-action-grid button { display: grid; align-content: space-between; min-width: 0; min-height: 100px; padding: 12px 10px; border: 0; border-radius: 18px; background: #151517; color: var(--app-white); text-align: left; }
.resident-action-grid button > span { color: #2997ff; font-size: 22px; font-weight: 400; }
.resident-action-grid b { margin-top: 10px; font-size: 12px; line-height: 1.1; letter-spacing: -.015em; }
.resident-action-grid small { margin-top: 4px; color: rgba(255,255,255,.42); font-size: 9px; line-height: 1.2; }
.lifecycle-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 0 12px; }
.lifecycle-strip span { position: relative; display: grid; justify-items: center; gap: 5px; color: rgba(255,255,255,.36); font-size: 9px; font-weight: 650; }
.lifecycle-strip span:not(:last-child)::after { content: ''; position: absolute; top: 12px; left: calc(50% + 14px); width: calc(100% - 24px); height: 1px; background: rgba(255,255,255,.1); }
.lifecycle-strip i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #171719; color: rgba(255,255,255,.46); font-style: normal; }
.lifecycle-strip .is-complete { color: rgba(255,255,255,.66); }
.lifecycle-strip .is-complete i { background: rgba(0,113,227,.2); color: #2997ff; }
.billing-trust-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 13px 14px; border-radius: 18px; background: #101012; }
.billing-trust-card div { min-width: 0; }
.billing-trust-card p { margin: 0 0 3px; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.billing-trust-card b { display: block; color: #fff; font-size: 15px; }
.billing-trust-card small { display: block; margin-top: 3px; color: rgba(255,255,255,.38); font-size: 9px; }
.billing-trust-card > span { flex: none; padding: 6px 8px; border-radius: 999px; background: rgba(52,199,89,.12); color: #30d158; font-size: 9px; font-weight: 700; }
.resident-quick-grid { margin-top: 0; }
.resident-screen-title { margin-bottom: 12px; }
.resident-screen-title > span { display: block; margin-top: 4px; color: rgba(255,255,255,.42); font-size: 12px; }
.closet-filter { display: flex; gap: 6px; margin-bottom: 8px; }
.closet-filter button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: #151517; color: rgba(255,255,255,.52); font-size: 11px; font-weight: 650; }
.closet-filter button.is-active { background: var(--app-white); color: #1d1d1f; }
.resident-closet-list { display: grid; gap: 8px; }
.resident-closet-list .closet-item { margin: 0; min-height: 78px; }
.tote-monogram { display: grid !important; place-items: center; flex: none; width: 66px; height: 62px; margin: 0 !important; border-radius: 14px; background: rgba(0,113,227,.14); color: #2997ff !important; font-size: 24px !important; }
.register-tote-action { margin-top: 12px; }
.empty-closet { display: grid; gap: 4px; padding: 22px 16px; border-radius: 18px; background: #151517; text-align: center; }
.empty-closet span { color: rgba(255,255,255,.42); font-size: 12px; }
.vault-availability,
.qr-scan-card,
.registration-id,
.custody-policy,
.capacity-card,
.tote-detail-card { display: grid; gap: 4px; padding: 13px; border-radius: 16px; background: #fff; color: #1d1d1f; }
.vault-availability span,
.qr-scan-card small,
.custody-policy span,
.capacity-card span,
.tote-detail-card p,
.tote-detail-card span { color: #6e6e73; font-size: 12px; line-height: 1.32; }
.qr-scan-card { justify-items: center; padding: 20px 14px; text-align: center; }
.qr-scan-card > span { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 5px; border-radius: 16px; background: rgba(0,113,227,.1); color: #0071e3; font-size: 30px; }
.sheet-options .sheet-primary-button { background: #0071e3; color: #fff; }
.sheet-options .sheet-link-button { min-height: 38px; background: transparent; color: #0066cc; }
.registration-form,
.service-request-form { display: grid; gap: 11px; }
.registration-success { display: grid; gap: 8px; padding: 13px; border-radius: 15px; background: #fff; color: #1d1d1f; }
.registration-success span { color: #6e6e73; font-size: 12px; }
.registration-success .sheet-secondary-button { width: 100%; margin-top: 2px; }
.registration-form label,
.access-code-field { display: grid; gap: 5px; color: #515154; font-size: 12px; font-weight: 650; }
.registration-form label small { color: #86868b; font-weight: 500; }
.registration-form input,
.registration-form textarea,
.access-code-field input { width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 13px; background: #fff; color: #1d1d1f; font: inherit; font-size: 15px; resize: none; }
.registration-photo input { padding: 9px; }
.registration-id { grid-template-columns: 1fr auto; align-items: center; background: rgba(0,113,227,.08); }
.registration-id span { color: #0066cc; font-size: 12px; font-weight: 650; }
.inventory-capture { display: grid; gap: 10px; padding-top: 2px; }
.inventory-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.inventory-section-heading div { display: grid; gap: 2px; }
.inventory-section-heading b { font-size: 13px; }
.inventory-section-heading small,
.inventory-section-heading > span,
.inventory-review-note,
.dictation-transcript { color: #6e6e73; font-size: 10px; line-height: 1.35; }
.registration-form .inventory-photo-picker { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px dashed rgba(0,113,227,.32); border-radius: 13px; background: rgba(0,113,227,.07); color: #0066cc; overflow: hidden; }
.inventory-photo-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.inventory-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; min-height: 62px; }
.inventory-photo-grid > span { grid-column: 1 / -1; display: grid; place-items: center; min-height: 62px; padding: 8px; border-radius: 13px; background: #fff; color: #86868b; font-size: 11px; text-align: center; }
.inventory-photo-grid figure { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 13px; background: #e8e8ed; }
.inventory-photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.sheet-options .inventory-photo-grid button { position: absolute; top: 4px; right: 4px; width: 24px; min-height: 24px; height: 24px; padding: 0; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; }
.inventory-notes-label textarea { min-height: 74px; }
.dictation-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet-options .dictation-row button { min-height: 34px; padding: 7px 12px; border-radius: 999px; background: #fff; color: #0066cc; }
.dictation-row small { color: #6e6e73; font-size: 10px; text-align: right; }
.dictation-transcript { min-height: 0; padding: 0 2px; }
.inventory-suggestions { display: grid; gap: 7px; }
.inventory-suggestions > p { padding: 10px 12px; border-radius: 13px; background: #fff; font-size: 11px; }
.inventory-suggestion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; align-items: center; padding: 10px; border: 1px solid rgba(0,0,0,.07); border-radius: 14px; background: #fff; }
.inventory-suggestion > div { display: grid; gap: 2px; }
.inventory-suggestion small { color: #6e6e73; font-size: 9px; }
.inventory-suggestion > input { grid-column: 1 / -1; min-height: 38px; padding: 8px 10px; }
.inventory-suggestion nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sheet-options .inventory-suggestion nav button { min-height: 32px; padding: 6px; border-radius: 9px; background: var(--app-white); color: #515154; font-size: 10px; }
.inventory-suggestion.is-accepted,
.inventory-suggestion.is-corrected { border-color: rgba(52,199,89,.34); background: rgba(52,199,89,.07); }
.inventory-suggestion.is-rejected { opacity: .56; }
.inventory-summary,
.inventory-comparison { display: grid; gap: 8px; padding: 13px; border-radius: 16px; background: #fff; color: #1d1d1f; }
.inventory-summary > div { display: flex; justify-content: space-between; gap: 10px; }
.inventory-summary span,
.inventory-summary small,
.inventory-comparison span,
.inventory-comparison small { color: #6e6e73; font-size: 10px; line-height: 1.4; }
.inventory-summary p,
.inventory-comparison p { font-size: 12px; }
.inventory-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inventory-comparison > div { display: grid; gap: 3px; padding: 10px; border-radius: 12px; background: var(--app-white); }
.inventory-comparison p,
.inventory-comparison small { grid-column: 1 / -1; }
.service-request-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.service-request-form legend { margin-bottom: 7px; color: #515154; font-size: 11px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.service-tote-list { display: grid; gap: 6px; }
.service-tote,
.choice-grid label { position: relative; display: block; }
.service-tote input,
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.service-tote span,
.choice-grid label span { display: grid; gap: 2px; min-height: 48px; align-content: center; padding: 9px 11px; border: 1px solid rgba(0,0,0,.08); border-radius: 13px; background: #fff; color: #1d1d1f; }
.service-tote input:checked + span,
.choice-grid input:checked + span { border-color: #0071e3; background: rgba(0,113,227,.08); box-shadow: inset 0 0 0 1px #0071e3; }
.service-tote small,
.choice-grid small { color: #6e6e73; font-size: 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.choice-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid--three label span { padding-inline: 6px; text-align: center; }
.capacity-note { margin: 6px 2px 0 !important; color: #6e6e73 !important; font-size: 10px !important; }
.specific-window-fields { display: grid; gap: 5px; margin-top: 8px; color: #515154; font-size: 11px; font-weight: 650; }
.specific-window-fields input { min-height: 42px; padding: 9px 10px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fff; color: #1d1d1f; font: inherit; }
[hidden] { display: none !important; }
.activity-advance-button { width: max-content; min-height: 32px; margin-top: 6px; padding: 7px 10px; border: 0; border-radius: 10px; background: rgba(0,113,227,.1); color: #0066cc; font-size: 11px; font-weight: 700; }
.unit-service-options { padding-top: 2px !important; }
.access-code-field { margin-top: 7px; }
.access-policy-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; color: #515154; font-size: 11px; line-height: 1.35; }
.access-policy-check input { flex: none; margin-top: 1px; accent-color: #0071e3; }
[data-autonomous-safeguards] { display: grid; gap: 8px; }
.custody-policy { background: #1d1d1f; color: #fff; }
.custody-policy span { color: rgba(255,255,255,.62); }
.service-empty { padding: 12px; border-radius: 13px; background: #fff; color: #6e6e73; text-align: center; font-size: 12px; }
.tote-detail-status { color: #167a2f !important; font-weight: 700; }
.tote-detail-video { width: 100%; height: 132px; border-radius: 16px; object-fit: cover; background: #050506; }
.tote-detail-photo { display: block; width: 100%; height: 180px; border-radius: 16px; object-fit: cover; background: #e8e8ed; }
.closet-media--photo { flex: none; width: 66px; height: 62px; border-radius: 14px; object-fit: cover; }
.tote-detail-card > div { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.08); }
body[data-appearance="bright"] .resident-greeting > p:last-child,
body[data-appearance="bright"] .resident-screen-title > span,
body[data-appearance="bright"] .resident-action-grid small,
body[data-appearance="bright"] .billing-trust-card p,
body[data-appearance="bright"] .billing-trust-card small { color: #6e6e73; }
body[data-appearance="bright"] .resident-action-grid button,
body[data-appearance="bright"] .billing-trust-card,
body[data-appearance="bright"] .empty-closet,
body[data-appearance="bright"] .closet-filter button { background: #fff; color: #1d1d1f; box-shadow: 0 6px 18px rgba(0,0,0,.04); }
body[data-appearance="bright"] .resident-action-grid b,
body[data-appearance="bright"] .billing-trust-card b,
body[data-appearance="bright"] .resident-screen-title h2 { color: #1d1d1f; }
body[data-appearance="bright"] .resident-action-grid { background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.04); }
body[data-appearance="bright"] .resident-action-grid button { background: transparent; box-shadow: none; }
body[data-appearance="bright"] .resident-action-grid button::after { color: #86868b; }
body[data-appearance="bright"] .closet-filter button.is-active { background: #1d1d1f; color: #fff; }
body[data-appearance="bright"] .lifecycle-strip span { color: #6e6e73; }
body[data-appearance="bright"] .lifecycle-strip i { background: #fff; }
body[data-appearance="bright"] .lifecycle-strip span:not(:last-child)::after { background: rgba(0,0,0,.1); }
@media (max-height: 760px) {
  .profile-card--resident .resident-onboarding-copy > p:last-child,
  .profile-card--resident .profile-trust-line { display: none; }
  .profile-card--resident .resident-onboarding-copy { margin-bottom: 10px; }
  .profile-card--resident .profile-photo-button { width: 100%; height: auto; margin-bottom: 8px; }
  .profile-card--resident .profile-photo-preview { width: 52px; height: 52px; }
  .profile-card--resident .profile-grid { gap: 6px; }
  .profile-card--resident .profile-grid input,
  .profile-card--resident .profile-grid select { min-height: 39px; }
  .sheet.is-service-request .sheet-panel { max-height: calc(94svh - env(safe-area-inset-bottom)); }
  .sheet.is-service-request .sheet-options { overflow-y: auto; overscroll-behavior: contain; }
  .service-request-form { gap: 8px; }
  .service-tote span,
  .choice-grid label span { min-height: 43px; padding: 7px 9px; }
  .custody-policy { padding: 10px; }
}