:root {
  --ys-primary: #C91F5D;
  --ys-primary-dark: #9F1748;
  --ys-primary-hover: #B31953;
  --ys-rose-soft: #FCECF1;
  --ys-rose-light: #FFF4F6;
  --ys-background: #FFFAF8;
  --ys-text-main: #33242A;
  --ys-text-secondary: #75676C;
  --ys-text-muted: #9A8D91;
  --ys-admin-dark: #34242B;
  --ys-admin-dark-secondary: #49333C;
  --ys-bg: #fffaf7;
  --ys-bg-alt: #fffdf9;
  --ys-surface: rgba(255, 255, 255, 0.9);
  --ys-surface-strong: rgba(255, 252, 249, 0.96);
  --ys-surface-soft: #f8efeb;
  --ys-surface-muted: #f4e7e1;
  --ys-brand: #b51446;
  --ys-brand-deep: #8f1638;
  --ys-brand-soft: #f8dde3;
  --ys-ink: #2f1f22;
  --ys-text: #5f5150;
  --ys-text-soft: #857774;
  --ys-border: #eadfd9;
  --ys-border-strong: #dccbc2;
  --ys-shadow: 0 22px 60px rgba(95, 59, 64, 0.08);
  --ys-shadow-soft: 0 10px 30px rgba(95, 59, 64, 0.06);
  --ys-radius-sm: 14px;
  --ys-radius-md: 18px;
  --ys-radius-lg: 24px;
  --ys-radius-pill: 999px;
  --ys-max: 1240px;
  --ys-blush: #f6e7e5;
  --ys-peach: #fceee5;
  --ys-rose: #f6e1e7;
  --ys-sage: #ecf1e7;
  --ys-sky: #eaf2f8;
  --ys-lavender: #f0e9f7;
  --ys-champagne: #f8f1e4;
  --ys-transition: 180ms ease;
}

body {
  background: var(--ys-background);
  color: var(--ys-text-main);
}

.page {
  width: min(430px, calc(100% - 32px));
}

@media (min-width: 820px) {
  .page:not(.admin-page) { width: min(760px, calc(100% - 48px)); }
  .admin-page { width: min(1180px, calc(100% - 48px)); }
}

.primary-btn,
.mobile-primary {
  border: 0;
  border-radius: 14px;
  min-height: 46px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--ys-primary), var(--ys-primary-hover));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(201, 31, 93, 0.18);
}

.secondary-btn {
  border: 1px solid #E8DCE0;
  border-radius: 14px;
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: var(--ys-text-main);
  font-weight: 650;
}

.card,
.home-project-card,
.home-story-tile,
.story-type-row,
.story-start-card,
.included-card,
.admin-order-card,
.metric-card,
.notification-item,
.account-profile,
.profile-list {
  background: #fff;
  border: 1px solid #EFE3E6;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(60, 36, 48, 0.05);
}

.app-header {
  position: relative;
  border: 0;
  background: transparent;
}

.mobile-home .app-header,
.mobile-home-shell .app-header { display: none; }

.welcome-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding-top: 14px;
}

.welcome-block h1,
.mobile-titlebar h1,
.account-profile h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  color: var(--ys-text-main);
  letter-spacing: 0;
}

.welcome-block h1 { font-size: 1.45rem; }
.welcome-block p { margin: 0; color: var(--ys-text-secondary); line-height: 1.35; }

.memory-hero {
  position: relative;
  min-height: 220px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
}

.memory-hero__image,
.memory-hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.memory-hero__image img { object-fit: cover; }
.memory-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 12, 16, 0.05), rgba(25, 12, 16, 0.72));
}

.memory-copy {
  position: relative;
  z-index: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 18px;
}

.memory-copy h2 {
  max-width: 260px;
  margin: 0 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.9rem;
  line-height: 1.03;
  color: #fff;
}

.memory-copy p {
  max-width: 270px;
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.35;
  color: rgba(255,255,255,.9);
}

.story-tile-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px;
}

.home-story-tile {
  flex: 0 0 112px;
  min-height: 132px;
  scroll-snap-align: start;
  padding: 12px 10px;
  text-align: center;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
}

.home-story-tile p,
.home-story-tile em { display: none; }
.home-story-tile strong { font-size: .86rem; line-height: 1.2; color: var(--ys-text-main); }
.story-tile-visual { width: 44px; height: 44px; border-radius: 14px; color: var(--ys-primary); background: var(--ys-rose-light); }

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: calc(70px + env(safe-area-inset-bottom));
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  background: rgba(255,255,255,.96);
  border-top: 1px solid #EFE3E6;
  box-shadow: 0 -6px 24px rgba(60, 36, 48, 0.07);
}

.bottom-nav__item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: var(--ys-text-muted);
  font-size: 10.5px;
  font-weight: 650;
}

.bottom-nav__item.active { color: var(--ys-primary); }
.bottom-nav__item.create .icon {
  width: 48px;
  height: 48px;
  margin-top: -26px;
  border-radius: 50%;
  background: var(--ys-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(201, 31, 93, .28);
}

.customer-page { padding-bottom: 112px; }

.mobile-titlebar {
  height: 56px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  text-align: center;
}

.mobile-titlebar h1 { font-size: 1.08rem; }
.back-link { font-size: 2rem; color: var(--ys-text-main); line-height: 1; }

.story-choice-list { display: grid; gap: 12px; }
.story-type-row {
  display: grid;
  grid-template-columns: 76px 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
}
.story-type-row img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.story-type-row h3 { margin: 0; font-size: .94rem; line-height: 1.2; }
.story-type-row p { margin: 2px 0 4px; color: var(--ys-text-secondary); font-size: .78rem; line-height: 1.25; }
.story-type-row em { color: var(--ys-primary); font-size: .78rem; font-style: normal; font-weight: 700; }

.story-start-card { overflow: hidden; }
.story-start-card > img { width: 100%; height: 190px; object-fit: cover; }
.story-start-body { padding: 16px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.story-start-body h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; }
.story-start-body p { margin: 0; color: var(--ys-text-secondary); }
.story-start-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--ys-primary); background: var(--ys-rose-light); }
.story-start-body .mobile-primary { width: 100%; margin-top: 4px; }
.included-card { margin-top: 14px; padding: 16px; }
.included-card h3 { margin: 0 0 10px; }
.included-card p { margin: 8px 0; display: flex; gap: 8px; align-items: center; color: var(--ys-text-secondary); }
.included-card .icon { color: var(--ys-primary); }

.question-flow-card {
  padding: 4px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.question-flow-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 6px 0 26px;
  color: var(--ys-text-secondary);
  font-size: .86rem;
}
.question-flow-progress::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  height: 6px;
  border-radius: 999px;
  background: #F0DDE2;
}
.question-flow-progress span {
  grid-column: 1;
  grid-row: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--ys-primary);
  z-index: 1;
}
.question-flow-progress em { font-style: normal; }
.interview-card h2 {
  margin: 0 0 8px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.8rem;
  line-height: 1.08;
}
.answer-field span { display: none; }
.answer-field textarea {
  min-height: 138px;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
}
.question-photo-cta {
  min-height: 74px;
  margin: 14px 0 10px;
  border: 1.5px dashed rgba(201,31,93,.28);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ys-primary);
  background: rgba(255,255,255,.55);
}
.question-actions {
  position: sticky;
  bottom: calc(78px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(255,250,248,0), var(--ys-background) 20%);
}
.subtle-skip { width: 100%; margin-top: 10px; border-radius: 12px; }
.voice-hidden { display: none; }

.topbar:not(.topbar-authenticated) {
  background: transparent;
  border-bottom: 0;
  padding: 14px 18px;
}

.splash-page {
  min-height: calc(100vh - 74px);
  display: grid;
  place-items: center;
  padding: 20px 0 28px;
}

.splash-card {
  width: 100%;
  min-height: min(760px, calc(100vh - 120px));
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 14px;
}

.splash-logo {
  width: 76px;
  height: 76px;
  color: var(--ys-primary-dark);
  filter: drop-shadow(0 8px 12px rgba(201,31,93,.14));
}

.splash-page h1,
.auth-brand span {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.1rem;
  color: var(--ys-primary-dark);
}

.splash-page p {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  line-height: 1.35;
}

.splash-page i {
  width: 72px;
  height: 1px;
  background: #8f7b80;
  opacity: .45;
  margin: 10px 0 18px;
}

.splash-page strong {
  margin: 8px 0 2px;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  color: #D45F87;
  font-size: 2rem;
  line-height: .95;
  transform: rotate(-8deg);
  font-weight: 400;
}

.splash-page img {
  width: min(260px, 78vw);
  height: 170px;
  object-fit: cover;
  border-radius: 18px;
  opacity: .92;
  margin: 0 0 8px;
}

.splash-page .primary-btn,
.splash-page .secondary-btn {
  width: min(260px, 100%);
}

.auth-wrap {
  width: min(390px, calc(100% - 32px));
  margin: 0 auto;
  min-height: calc(100vh - 76px);
  display: grid;
  align-content: center;
  gap: 18px;
}

.auth-brand {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.auth-brand .brand-mark {
  width: 62px;
  height: 62px;
  font-size: 2rem;
  background: transparent;
  box-shadow: none;
}

.auth-card {
  padding: 22px 18px;
  border-radius: 18px;
}

.auth-card h1 {
  margin: 0 0 4px;
  text-align: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.45rem;
}

.auth-card > p {
  text-align: center;
  margin-bottom: 18px;
  font-size: .9rem;
}

.field {
  display: grid;
  gap: 6px;
  color: var(--ys-text-secondary);
  font-size: .82rem;
  font-weight: 650;
}

.field input,
.field select,
.field textarea,
.admin-search-inline,
.admin-sidebar input,
.admin-topbar-actions input,
.admin-block input,
.admin-block select,
.admin-block textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #EFE3E6;
  border-radius: 11px;
  background: #fff;
  padding: 11px 12px;
  color: var(--ys-text-main);
  font-size: 16px;
}

.auth-card form { display: grid; gap: 12px; }
.login-options {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: .78rem;
}
.link-btn {
  border: 0;
  background: transparent;
  color: var(--ys-primary);
  font-weight: 700;
  padding: 0;
}
.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--ys-text-muted);
  font-size: .8rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: #EFE3E6;
}
.auth-provider { width: 100%; }
.auth-switch { text-align: center; margin: 4px 0 0; font-size: .82rem; }
.auth-switch a { color: var(--ys-primary); font-weight: 800; }

.my-story-list { display: grid; gap: 12px; }
.customer-filter-row { margin: 4px 0 14px; overflow-x: auto; flex-wrap: nowrap; }

.account-profile {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 16px;
  text-align: center;
  margin-bottom: 16px;
}
.account-avatar {
  width: 76px;
  height: 76px;
  font-size: 1.4rem;
}
.account-profile p { margin: 0 0 8px; color: var(--ys-text-secondary); }
.profile-list { overflow: hidden; }
.profile-row {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid #F3E8EB;
  background: #fff;
  padding: 0 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  text-align: left;
}
.profile-row:last-child { border-bottom: 0; }
.profile-row span { display: inline-flex; align-items: center; gap: 10px; }
.profile-row b {
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ys-primary);
  color: #fff;
  font-size: .72rem;
}
.profile-row em { color: var(--ys-text-muted); font-style: normal; font-size: 1.2rem; }

.notification-page-list { margin-top: 8px; }

.admin-page {
  padding-bottom: 32px;
}

.admin-mobile-header {
  padding: 12px 14px;
  border-radius: 0 0 18px 18px;
}

.admin-sidebar {
  background: linear-gradient(180deg, var(--ys-admin-dark), var(--ys-admin-dark-secondary));
  color: #fff;
  border: 0;
}
.admin-sidebar h2 { color: #fff; font-size: 1rem; }
.admin-nav-link {
  color: rgba(255,255,255,.86);
  background: transparent;
}
.admin-nav-link.active,
.admin-nav-link:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
}
.admin-nav-link.danger { color: #fff; opacity: .9; }
.admin-sidebar input {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}

@media (max-width: 760px) {
  .admin-page {
    width: min(430px, 100%);
    padding-inline: 14px;
  }
  .admin-mobile-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 80;
  }
  .admin-shell { display: block; }
  .admin-sidebar {
    display: none;
    position: fixed;
    inset: 72px 14px auto 14px;
    z-index: 90;
    max-height: calc(100vh - 92px);
    overflow: auto;
    padding: 16px;
  }
  .admin-sidebar.open { display: grid; }
  .admin-topbar {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 8px 0 12px;
  }
  .admin-topbar h1 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.8rem;
  }
  .admin-topbar-actions { display: none; }
  .admin-table-wrap { display: none; }
  .admin-order-cards { display: grid; gap: 10px; }
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .notification-admin-grid {
    grid-template-columns: 1fr !important;
  }
  .metric-card {
    min-height: 96px;
    padding: 14px;
  }
  .order-detail-top .hero-actions,
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .order-hero h1 { font-size: 1.7rem; }
  .admin-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }
  .admin-tabs .tab { flex: 0 0 auto; }
}

@media (max-width: 340px) {
  .page { width: calc(100% - 24px); }
  .memory-copy h2,
  .interview-card h2 { font-size: 1.62rem; }
  .home-story-tile { flex-basis: 102px; }
  .story-type-row { grid-template-columns: 66px 30px minmax(0, 1fr); }
  .story-type-row img { width: 66px; height: 66px; }
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; color-scheme: light; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(245, 229, 223, 0.9), transparent 28%),
    linear-gradient(180deg, var(--ys-bg-alt), var(--ys-bg));
  color: var(--ys-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px clamp(16px, 4vw, 40px);
  background: rgba(255, 250, 247, 0.92);
  border-bottom: 1px solid rgba(234, 223, 217, 0.9);
  backdrop-filter: blur(18px);
}
.topbar-authenticated { display: none; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--ys-brand-deep);
}
.nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.app-header {
  position: sticky;
  top: 0;
  z-index: 45;
  background: rgba(255, 250, 247, 0.84);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(234, 223, 217, 0.78);
}
.app-header__inner,
.page {
  width: min(var(--ys-max), calc(100% - 32px));
  margin: 0 auto;
}
.app-header__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand-app { font-size: 1.6rem; }
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ys-brand);
  background: linear-gradient(145deg, #fff, var(--ys-brand-soft));
  box-shadow: inset 0 0 0 1px rgba(181, 20, 70, 0.08);
}
.desktop-nav { display: none; align-items: center; gap: 8px; }
.desktop-nav a,
.nav a,
.ghost-btn,
.icon-btn {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--ys-text);
  background: transparent;
  transition: background var(--ys-transition), color var(--ys-transition), border-color var(--ys-transition), transform var(--ys-transition);
}
.desktop-nav a.active,
.desktop-nav a:hover,
.nav a:hover,
.ghost-btn:hover,
.icon-btn:hover {
  color: var(--ys-brand-deep);
  background: rgba(248, 221, 227, 0.5);
  border-color: rgba(181, 20, 70, 0.1);
}
.app-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.icon-btn { position: relative; width: 44px; padding: 0; justify-content: center; }
.notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--ys-brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 0 0 3px var(--ys-bg-alt);
}
.notification-dot[hidden] { display: none; }
.notification-layer {
  position: absolute;
  top: calc(100% + 10px);
  right: max(16px, calc((100vw - var(--ys-max)) / 2));
  z-index: 80;
}
.notification-panel {
  width: min(420px, calc(100vw - 24px));
  max-height: min(640px, calc(100vh - 96px));
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--ys-border);
  border-radius: 22px;
  background: rgba(255, 252, 249, 0.98);
  box-shadow: var(--ys-shadow);
}
.notification-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.notification-panel h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.45rem;
}
.notification-panel p {
  margin: 2px 0 0;
  color: var(--ys-text);
  font-size: 0.92rem;
}
.notification-read-all {
  min-height: 38px;
  padding: 0 12px;
  font-size: 0.85rem;
  white-space: nowrap;
}
.notification-list {
  display: grid;
  gap: 10px;
}
.notification-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ys-border);
  border-radius: 16px;
  background: #fff;
}
.notification-item.is-unread {
  border-color: rgba(181, 20, 70, 0.28);
  background: linear-gradient(145deg, #fff, #fff7f8);
}
.notification-main {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 0;
  text-align: left;
  color: inherit;
}
.notification-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--ys-brand-soft);
  color: var(--ys-brand-deep);
}
.notification-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.notification-copy strong {
  color: var(--ys-ink);
  line-height: 1.25;
}
.notification-copy span,
.notification-copy small {
  color: var(--ys-text);
  line-height: 1.45;
}
.notification-copy em {
  width: fit-content;
  margin-top: 6px;
  color: var(--ys-brand-deep);
  font-style: normal;
  font-weight: 700;
}
.notification-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.notification-actions .secondary-btn {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.85rem;
}
.notification-actions .icon-btn {
  width: 36px;
  min-height: 36px;
  border-radius: 12px;
}
.avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f7ebdc, #f3d8d7);
  color: var(--ys-brand-deep);
  font-weight: 700;
  border: 1px solid rgba(181, 20, 70, 0.08);
}

.page { padding: 24px 0 120px; }
.customer-page { padding-bottom: 128px; }
.page-header,
.dashboard-head,
.interview-top,
.mobile-section-head,
.order-detail-top,
.order-hero,
.admin-activity-row,
.chapter-row,
.detail-list div,
.answer-review,
.photo-actions,
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.page-header,
.dashboard-head,
.mobile-section-head,
.order-detail-top,
.order-hero,
.interview-top { justify-content: space-between; align-items: flex-end; }

.page-title h1,
.hero-copy h1,
.welcome-block h1,
.memory-copy h2,
.section-heading h2,
.section h2,
.auth-card h1,
.interview-card h2,
.order-hero h1,
.admin-sidebar h2,
.admin-block h2,
.home-project-card h3,
.story-row h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ys-ink);
}
.page-title h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.08; }
.page-title p,
.hero-copy p,
.muted,
.small,
.field span { color: var(--ys-text); }
.section-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ys-brand);
}

.primary-btn,
.secondary-btn,
.mobile-primary,
.continue-btn,
.guide-banner a,
.tab,
.admin-nav-link {
  min-height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  font-weight: 600;
  transition: transform var(--ys-transition), box-shadow var(--ys-transition), background var(--ys-transition), border-color var(--ys-transition), color var(--ys-transition);
}
.primary-btn,
.mobile-primary,
.continue-btn {
  background: var(--ys-brand);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 14px 30px rgba(181, 20, 70, 0.18);
}
.secondary-btn {
  background: #fff;
  color: var(--ys-brand-deep);
  border: 1px solid var(--ys-border-strong);
}
.ghost-btn { color: var(--ys-brand-deep); }

.card,
.option,
.proof-page,
.order-contact,
.admin-table-wrap,
.upload-zone,
.bottom-nav,
.home-project-card,
.home-story-tile,
.guide-banner,
.memory-hero {
  border: 1px solid rgba(234, 223, 217, 0.92);
  box-shadow: var(--ys-shadow-soft);
}
.card,
.option,
.order-contact,
.upload-zone,
.home-project-card,
.home-story-tile,
.guide-banner {
  background: var(--ys-surface);
  border-radius: 18px;
}
.card { padding: 20px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section { padding: 18px 0; }

.hero-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.95fr);
  gap: 32px;
  align-items: center;
  padding: 40px 0 24px;
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.process-steps article {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--ys-border);
}
.process-steps b {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: var(--ys-brand-soft);
  color: var(--ys-brand-deep);
}
.story-type-gallery .story-type-card { min-height: 190px; }
.story-type-card > span {
  display: inline-flex;
  margin-bottom: 12px;
  background: var(--ys-lavender);
  color: #6e5d95;
}
.hero-copy h1 { font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 0.98; margin: 0 0 16px; }
.hero-copy p { font-size: 1.05rem; max-width: 640px; }
.pill,
.status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
}
.pill { background: var(--ys-brand-soft); color: var(--ys-brand-deep); }
.album-stack { min-height: 520px; position: relative; }
.album-card {
  position: absolute;
  width: min(380px, 82vw);
  aspect-ratio: 4 / 5;
  padding: 18px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 26px;
  box-shadow: var(--ys-shadow);
  border: 1px solid var(--ys-border);
}
.album-card:first-child { right: 0; top: 0; transform: rotate(3deg); }
.album-card:last-child { left: 0; bottom: 20px; transform: rotate(-5deg); }
.album-card img { height: 74%; width: 100%; object-fit: cover; border-radius: 18px; }

.auth-wrap { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: min(520px, 100%); padding: 28px; }
.auth-card h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 8px; }
.field { display: grid; gap: 8px; margin-bottom: 14px; }
.field span { font-size: 0.92rem; font-weight: 600; }
.field input,
.field select,
.field textarea,
.admin-sidebar input,
.admin-search-inline,
.admin-block textarea,
.admin-block input,
.admin-block select,
#messageText {
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px solid var(--ys-border);
  border-radius: 14px;
  background: #fff;
  color: var(--ys-ink);
  outline: none;
}
.field textarea,
.admin-block textarea,
#messageText { min-height: 120px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.admin-sidebar input:focus,
.admin-search-inline:focus,
.admin-block textarea:focus,
.admin-block input:focus,
.admin-block select:focus,
#messageText:focus {
  border-color: rgba(181, 20, 70, 0.5);
  box-shadow: 0 0 0 4px rgba(181, 20, 70, 0.08);
}
.check-row { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; color: var(--ys-text); }
.check-row input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ys-brand); }
.message,
#uploadMsg,
#authMessage,
#createMsg,
#submitMsg,
#proofMsg,
#messageMsg { color: #c1264f; font-weight: 600; }

.mobile-home { width: min(var(--ys-max), 100%); padding-top: 12px; }
.welcome-block { margin-bottom: 28px; }
.welcome-block h1 { margin: 0; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; }
.welcome-block p { margin: 8px 0 0; font-size: 1rem; color: var(--ys-text-soft); }

.memory-hero {
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  background: linear-gradient(180deg, #fff, #fdf5f1);
  border-radius: 26px;
}
.memory-hero__image { aspect-ratio: 16 / 11; overflow: hidden; }
.memory-hero__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) sepia(0.12) brightness(1.02); }
.memory-copy { padding: 22px; display: grid; gap: 12px; }
.memory-copy h2 { margin: 0; font-size: clamp(1.9rem, 6vw, 3.1rem); line-height: 1.06; max-width: 12ch; }
.memory-copy p { margin: 0; max-width: 36ch; color: var(--ys-text); }

.carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0 4px; }
.carousel-dots span { width: 8px; height: 8px; border-radius: 50%; background: #d7cfcb; }
.carousel-dots span:first-child { background: var(--ys-brand); }

.mobile-section { margin-top: 32px; }
.mobile-section h2 { margin: 0; font-size: clamp(1.55rem, 4vw, 2.25rem); line-height: 1.12; }
.mobile-section-head a { color: var(--ys-brand-deep); font-weight: 600; }

.story-tile-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 10px 4px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 0%, #000 88%, transparent 100%);
}
.story-tile-row::-webkit-scrollbar { display: none; }
.home-story-tile {
  flex: 0 0 clamp(148px, 42vw, 176px);
  min-height: 220px;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 12px;
  scroll-snap-align: start;
}
.story-tile-visual,
.option-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
}
.home-story-tile strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.2;
}
.home-story-tile p { margin: 0; color: var(--ys-text); font-size: 0.92rem; line-height: 1.5; }
.home-story-tile em,
.story-choice em {
  margin-top: auto;
  border: 0;
  background: transparent;
  color: var(--ys-brand-deep);
  font-style: normal;
  font-weight: 600;
  padding: 0;
  min-height: auto;
  justify-content: flex-start;
}
.tone-blush .story-tile-visual,
.tone-blush .option-icon { background: var(--ys-blush); color: var(--ys-brand-deep); }
.tone-rose .story-tile-visual,
.tone-rose .option-icon { background: var(--ys-rose); color: var(--ys-brand-deep); }
.tone-sky .story-tile-visual,
.tone-sky .option-icon { background: var(--ys-sky); color: #51728a; }
.tone-lavender .story-tile-visual,
.tone-lavender .option-icon { background: var(--ys-lavender); color: #6e5d90; }
.tone-sage .story-tile-visual,
.tone-sage .option-icon { background: var(--ys-sage); color: #54705b; }
.tone-champagne .story-tile-visual,
.tone-champagne .option-icon { background: var(--ys-champagne); color: #83622a; }
.tone-powder .story-tile-visual,
.tone-powder .option-icon { background: #e8f0f7; color: #5f7492; }

.continue-list { display: grid; gap: 14px; }
.home-project-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}
.home-project-card img { width: 88px; height: 112px; border-radius: 14px; object-fit: cover; }
.home-project-body { min-width: 0; }
.home-project-card h3 { margin: 0 0 8px; font-size: 1.28rem; line-height: 1.18; }
.mobile-progress { height: 8px; border-radius: 999px; background: #f0e4e2; overflow: hidden; margin-top: 10px; }
.mobile-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ys-brand), #d74f78); }
.home-project-card > strong { grid-column: 2; color: var(--ys-brand-deep); }
.continue-btn { grid-column: 1 / -1; width: fit-content; }

.guide-banner {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  margin-top: 32px;
  background: linear-gradient(145deg, #fff8f2, #fdf0e7);
}
.guide-art {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(181, 20, 70, 0.08);
  color: var(--ys-brand);
  font-size: 1.45rem;
}
.guide-banner h2 { margin: 0; font-size: 1.3rem; }
.guide-banner p { margin: 4px 0 0; color: var(--ys-text); }
.guide-banner a { width: fit-content; margin-top: 8px; }

.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
}
.story-row h3 { margin: 10px 0 6px; font-size: 1.35rem; }
.progress-ring {
  width: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 10px;
  display: grid;
  place-items: center;
  text-align: center;
  background: conic-gradient(var(--ys-brand) calc(var(--progress, 0) * 1%), #f2e3df 0);
}
.progress-ring strong { font-size: 1.35rem; }
.progress-ring span { font-size: 0.78rem; color: var(--ys-text); }

.story-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.story-choice { min-height: 244px; padding: 20px; text-align: left; display: grid; gap: 12px; }
.story-choice h3 { margin: 0; font-size: 1.42rem; }

.step-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin: 18px 0 22px;
}
.step-progress span {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--ys-border);
  color: var(--ys-text);
}
.step-progress span.active { background: var(--ys-brand); color: #fff; border-color: transparent; }

.tabs,
.admin-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 1px solid var(--ys-border);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ys-text);
  white-space: nowrap;
}
.tab.active,
.admin-nav-link.active,
.admin-nav-link:hover { background: var(--ys-brand); color: #fff; border-color: transparent; }

.interview-card {
  width: min(780px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 30px);
  border-radius: 26px;
}
.interview-card h2 { font-size: clamp(1.8rem, 5vw, 2.7rem); line-height: 1.13; margin: 10px 0 12px; }
.review-answer { padding: 16px 0; border-top: 1px solid var(--ys-border); }
.review-answer:first-of-type { border-top: 0; }

.upload-zone {
  display: grid;
  gap: 20px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(251,243,239,0.96));
}
.photo-drop {
  min-height: 180px;
  padding: 24px;
  border-radius: 20px;
  border: 1.5px dashed rgba(181, 20, 70, 0.35);
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
}
.photo-drop input { position: absolute; opacity: 0; pointer-events: none; }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.ordered-photo-tile,
.photo-tile { position: relative; overflow: hidden; }
.photo-order-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(181, 20, 70, 0.92);
  color: #fff;
  font-weight: 700;
}
.photo-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.photo-tile-body { display: grid; gap: 12px; margin-top: 14px; }

.message-bubble {
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: 18px;
  padding: 16px;
}
.admin-msg { background: #fcf3f6; border-color: #f1d8df; }

.proof-panel { max-width: 920px; margin: 0 auto; }
.proof-page {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  padding: 0;
  background: #fff;
  border-radius: 24px;
}
.proof-page span {
  position: absolute;
  inset: 14px 16px auto 16px;
  z-index: 3;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(143, 22, 56, 0.55);
}
.proof-viewer-shell iframe { width: 100%; height: 720px; border: 0; background: #fff; }
.proof-watermark-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  place-items: center;
  gap: 28px;
  transform: rotate(-24deg) scale(1.1);
  opacity: 0.2;
}
.proof-watermark-grid b { color: rgba(143, 22, 56, 0.82); }

.empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
}

.status-badge { background: #f2eeeb; color: var(--ys-text); border: 1px solid transparent; }
.status-draft { background: #f5efe9; color: #72584c; border-color: #e6ddd6; }
.status-submitted { background: #e9f3fb; color: #2d6586; border-color: #c9e1f3; }
.status-review { background: #f1eaf7; color: #6e5d95; border-color: #ddd0f1; }
.status-needs { background: #fceddf; color: #9a5a21; border-color: #f4d4b5; }
.status-approved { background: #eaf4eb; color: #2f6846; border-color: #cfe3d0; }
.status-pdf { background: #fbf1d5; color: #83651d; border-color: #f0dc9e; }
.status-printing { background: #e8f2fb; color: #2d6784; border-color: #cae0f1; }
.status-completed { background: #e9f3e3; color: #4d7130; border-color: #d4e5c6; }
.status-cancelled { background: #fae6ea; color: #aa3a56; border-color: #f0c5cf; }

.admin-page { background: transparent; border: 0; box-shadow: none; margin-top: 0; padding-top: 24px; }
.admin-mobile-header { display: none; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.admin-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.admin-sidebar {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 116px);
  overflow: auto;
  padding: 20px;
  background: rgba(255, 252, 249, 0.96);
}
.admin-sidebar h2,
.admin-block h2 { margin: 0 0 10px; }
.admin-nav,
.admin-list,
.admin-activity,
.admin-block { display: grid; gap: 12px; }
.admin-nav-link {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  justify-content: flex-start;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ys-text);
}
.admin-nav-link.active,
.admin-nav-link:hover {
  color: var(--ys-brand-deep);
  border-color: rgba(181, 20, 70, 0.18);
  background: linear-gradient(145deg, #fff, #fff4f5);
}
.admin-nav-link.danger { color: #9b2f3f; }
.admin-side-item {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--ys-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ys-ink);
}
.admin-side-item.active,
.admin-side-item:hover { border-color: rgba(181, 20, 70, 0.25); background: rgba(255, 255, 255, 0.96); }
.admin-side-item span,
.admin-side-item em,
.admin-activity-row span { color: var(--ys-text); font-style: normal; }
.admin-main { min-width: 0; display: grid; gap: 18px; }
.admin-topbar,
.admin-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.admin-topbar h1,
.admin-welcome h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}
.admin-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: min(520px, 55%);
}
.admin-topbar-actions input {
  min-width: 240px;
}
.admin-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--ys-brand), var(--ys-brand-deep));
  font-weight: 800;
}
.metric-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--ys-brand-deep);
  background: rgba(255, 255, 255, 0.7);
}
.stat { min-height: 120px; }
.stat strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--ys-ink);
  overflow-wrap: anywhere;
}
.metric-card:nth-child(4n + 1) { background: linear-gradient(145deg, #fff, var(--ys-blush)); }
.metric-card:nth-child(4n + 2) { background: linear-gradient(145deg, #fff, var(--ys-sky)); }
.metric-card:nth-child(4n + 3) { background: linear-gradient(145deg, #fff, var(--ys-sage)); }
.metric-card:nth-child(4n + 4) { background: linear-gradient(145deg, #fff, var(--ys-peach)); }

.admin-table-wrap { overflow: auto; background: rgba(255, 255, 255, 0.94); }
.admin-table { width: 100%; min-width: 960px; border-collapse: collapse; }
.admin-table th,
.admin-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ys-border);
}
.admin-table th { font-size: 0.84rem; color: var(--ys-text); background: #fcf7f4; }
.admin-orders-table tbody tr { cursor: pointer; }
.admin-orders-table tbody tr:hover { background: #fcf6f4; }
.admin-filter-row {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding-bottom: 4px;
}
.filter-chip {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--ys-border);
  border-radius: 999px;
  background: #fff;
  color: var(--ys-text);
}
.filter-chip.active,
.filter-chip:hover {
  border-color: rgba(181, 20, 70, 0.25);
  background: var(--ys-brand-soft);
  color: var(--ys-brand-deep);
}
.admin-order-cards {
  display: none;
  gap: 12px;
}
.admin-order-cards.visible { display: grid; }
.admin-order-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ys-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--ys-shadow-soft);
}
.admin-order-card > div:first-child {
  display: grid;
  gap: 2px;
}
.admin-order-card span { color: var(--ys-text); }
.admin-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.admin-order-card progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--ys-surface-muted);
}
.admin-order-card progress::-webkit-progress-bar { background: var(--ys-surface-muted); }
.admin-order-card progress::-webkit-progress-value { background: linear-gradient(90deg, var(--ys-brand), #d9855f); border-radius: 999px; }
.admin-order-card progress::-moz-progress-bar { background: linear-gradient(90deg, var(--ys-brand), #d9855f); border-radius: 999px; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.process-tile {
  border: 1px solid var(--ys-border);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.86);
}
.process-tile em {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ys-brand-soft);
  color: var(--ys-brand-deep);
  font-style: normal;
  font-size: 0.78rem;
}

.detail-list { display: grid; gap: 12px; }
.detail-list div { align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--ys-border); }
.detail-list span { min-width: 160px; color: var(--ys-text); }
.detail-list strong { overflow-wrap: anywhere; }
.order-hero { align-items: flex-start; padding: clamp(20px, 3vw, 28px); }
.order-hero h1 { margin: 12px 0 6px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; }
.order-contact { min-width: min(320px, 100%); padding: 18px; }
.file-preview {
  min-height: 160px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff, #f8f0eb);
  color: var(--ys-text);
  font-weight: 700;
}
.questions-photos-workspace,
.story-question-list,
.story-question-card,
.qp-toolbar,
.all-photos-section {
  display: grid;
  gap: 16px;
}
.qp-summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  position: sticky;
  top: 12px;
  z-index: 5;
}
.qp-summary > div {
  display: grid;
  gap: 4px;
}
.qp-summary span,
.question-meta span { color: var(--ys-text); }
.qp-subtabs {
  display: flex;
  overflow-x: auto;
  padding-bottom: 4px;
}
.story-question-card {
  border-radius: 8px;
  box-shadow: none;
}
.story-question-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.story-question-head h3,
.story-question-card h4 {
  margin: 4px 0 0;
}
.pill.warning {
  background: #fff3d8;
  color: #7a4a00;
}
.full-answer {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--ys-border);
  border-radius: 8px;
  background: #fffdfb;
}
.full-answer p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.65;
}
.question-meta {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}
.question-photo-grid {
  margin-top: 10px;
}
.photo-preview-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.photo-preview-button img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.order-photo-tile {
  padding: 14px;
  border: 1px solid var(--ys-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 20px;
  background: rgba(22, 18, 18, 0.82);
  overflow: auto;
}
.photo-lightbox-panel {
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
  color: #fff;
}
.photo-lightbox-image {
  max-height: 78vh;
  overflow: auto;
  display: grid;
  place-items: center;
  background: #111;
}
.photo-lightbox-panel img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  transform-origin: center center;
}
.photo-lightbox-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.notification-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: start;
}
.notification-composer form,
.notification-preview-stack {
  display: grid;
  gap: 14px;
}
.notification-user-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.notification-user-list {
  max-height: 280px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--ys-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
}
.notification-user-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid transparent;
}
.notification-user-row:has(input:checked) {
  border-color: rgba(181, 20, 70, 0.32);
  background: #fff7f8;
}
.notification-user-row input {
  margin-top: 4px;
  accent-color: var(--ys-brand);
}
.notification-user-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.notification-user-row small {
  color: var(--ys-text);
  overflow-wrap: anywhere;
}
.notification-confirm {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(181, 20, 70, 0.24);
  background: #fff7f8;
}
.notification-confirm p {
  margin: 4px 0 12px;
  color: var(--ys-text);
}
.notification-preview-card .notification-item {
  margin-top: 10px;
}
.notification-item.preview {
  grid-template-columns: 42px minmax(0, 1fr);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 60;
  transform: translateX(-50%);
  width: min(100%, 480px);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 252, 249, 0.96);
  border-radius: 24px 24px 0 0;
  backdrop-filter: blur(16px);
}
.bottom-nav__item {
  min-width: 60px;
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 16px;
  color: var(--ys-text-soft);
  font-size: 0.74rem;
  font-weight: 600;
}
.bottom-nav__item.active { background: rgba(248, 221, 227, 0.7); color: var(--ys-brand-deep); }
.bottom-nav__item.create { transform: translateY(-12px); }
.bottom-nav__item.create .icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ys-brand);
  color: #fff;
  box-shadow: 0 16px 28px rgba(181, 20, 70, 0.24);
}

@media (min-width: 768px) {
  .desktop-nav { display: flex; }
  .app-header__inner,
  .page { width: min(var(--ys-max), calc(100% - 48px)); }
  .memory-hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    min-height: 360px;
  }
  .memory-hero__image { order: 2; aspect-ratio: auto; }
  .memory-copy { order: 1; align-content: center; padding: 36px; }
  .continue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-banner { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .guide-banner a { margin-top: 0; }
  .bottom-nav {
    bottom: 16px;
    border-radius: 24px;
    width: min(680px, calc(100% - 32px));
  }
}

/* Final customer theme enforcement. Scoped after legacy rules so Account/Dark Mode works reliably. */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .shell {
  background: var(--ys-shell-token) !important;
  color: var(--ys-text-primary-token) !important;
}

.shell:has(.customer-page) > .app-header {
  display: none !important;
}

html[data-theme="dark"] .customer-page,
html[data-theme="dark"] .auth-wrap,
html[data-theme="dark"] .splash-page {
  background: transparent !important;
  color: var(--ys-text-primary-token) !important;
}

html[data-theme="dark"] .customer-page .card,
html[data-theme="dark"] .customer-page .home-project-card,
html[data-theme="dark"] .customer-page .home-story-tile,
html[data-theme="dark"] .customer-page .story-type-row,
html[data-theme="dark"] .customer-page .story-start-card,
html[data-theme="dark"] .customer-page .included-card,
html[data-theme="dark"] .customer-page .notification-item,
html[data-theme="dark"] .customer-page .account-profile,
html[data-theme="dark"] .customer-page .profile-list,
html[data-theme="dark"] .customer-page .appearance-row,
html[data-theme="dark"] .customer-page .empty-state,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .notification-panel {
  background: var(--ys-surface-token) !important;
  border-color: var(--ys-border-token) !important;
  color: var(--ys-text-primary-token) !important;
  box-shadow: var(--ys-shadow-token) !important;
}

html[data-theme="dark"] .customer-page .account-profile {
  background:
    radial-gradient(circle at top right, rgba(230, 58, 120, .18), transparent 42%),
    var(--ys-surface-secondary-token) !important;
}

html[data-theme="dark"] .customer-page .profile-row {
  background: var(--ys-surface-token) !important;
  border-color: var(--ys-border-token) !important;
  color: var(--ys-text-primary-token) !important;
}

html[data-theme="dark"] .customer-page .secondary-btn,
html[data-theme="dark"] .auth-wrap .secondary-btn,
html[data-theme="dark"] .customer-page .subtle-skip {
  background: var(--ys-surface-elevated-token) !important;
  border-color: var(--ys-border-token) !important;
  color: var(--ys-text-primary-token) !important;
}

html[data-theme="dark"] .customer-page input,
html[data-theme="dark"] .customer-page textarea,
html[data-theme="dark"] .customer-page select,
html[data-theme="dark"] .auth-wrap input {
  background: var(--ys-input-token) !important;
  border-color: var(--ys-border-token) !important;
  color: var(--ys-text-primary-token) !important;
}

html[data-theme="dark"] .bottom-nav {
  background: var(--ys-nav-token) !important;
  border-color: var(--ys-border-token) !important;
}

/* Final mobile alignment pass for Account and Questions. Keep at EOF. */
.account-page.customer-page {
  padding: 0 10px calc(168px + env(safe-area-inset-bottom)) !important;
}

.account-page .mobile-titlebar {
  height: auto !important;
  padding: 16px 0 12px !important;
  text-align: left !important;
  grid-template-columns: 1fr !important;
}

.account-page .mobile-titlebar h1 {
  text-align: left !important;
  font-size: 26px !important;
  line-height: 1.05 !important;
}

.account-profile {
  min-height: 0 !important;
  margin-bottom: 18px !important;
  padding: 22px 16px 18px !important;
  border-radius: 14px !important;
}

.account-profile .account-avatar,
.account-avatar {
  width: 78px !important;
  height: 78px !important;
  flex-basis: 78px !important;
  margin-bottom: 12px !important;
}

.account-profile h2 {
  margin: 6px 0 6px !important;
  font-size: 21px !important;
  line-height: 1.08 !important;
}

.account-profile p {
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}

.account-profile .secondary-btn {
  min-height: 32px !important;
  padding: 6px 17px !important;
}

.account-section {
  margin-top: 16px !important;
}

.account-section h2 {
  margin: 0 0 7px !important;
  line-height: 1.1 !important;
}

.appearance-row,
.profile-row {
  min-height: 54px !important;
  padding: 7px 12px !important;
}

.profile-row {
  grid-template-columns: 42px minmax(0, 1fr) 24px 12px !important;
  gap: 10px !important;
}

.profile-row .account-row-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
}

.profile-row .account-row-copy strong,
.profile-row .account-row-copy small {
  min-width: 0 !important;
  text-align: left !important;
}

.profile-row .account-row-copy strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.profile-row .account-row-copy small {
  white-space: normal !important;
  line-height: 1.18 !important;
}

.shell:has(.question-page) .bottom-nav {
  display: none !important;
}

.workspace-page.question-page {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: 0 14px calc(28px + env(safe-area-inset-bottom)) !important;
}

.question-page .question-actions {
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  margin-top: 46px !important;
}

.question-page .question-actions {
  position: fixed !important;
  left: 50% !important;
  width: min(calc(100% - 28px), 402px) !important;
  transform: translateX(-50%) !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding-top: 14px !important;
}

.workspace-page.question-page {
  padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
}

.chat-video-wrap {
  display: grid;
  gap: 6px;
  max-width: min(340px, 100%);
}

.chat-video-card {
  display: block;
  width: min(320px, 100%);
  max-height: 260px;
  border-radius: 13px;
  background: #1f171b;
}

.chat-video-wrap > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  font-size: .78rem;
  color: var(--ys-text-secondary);
}

.chat-video-wrap strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-video-wrap small {
  font-size: .74rem;
}

.chat-video-wrap a {
  grid-row: 1 / 3;
  grid-column: 2;
}

.chat-selected-media {
  flex: 1 0 100%;
  order: -1;
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(181, 20, 70, .07);
}

.chat-selected-media[hidden] {
  display: none !important;
}

.chat-selected-media > strong {
  font-size: .78rem;
  color: var(--ys-brand-deep);
}

.chat-selected-media > div {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.selected-media-thumb,
.selected-media-file {
  flex: 0 0 76px;
  display: grid;
  gap: 4px;
  font-size: .68rem;
  color: var(--ys-text-secondary);
}

.selected-media-thumb img,
.selected-media-thumb video {
  width: 76px;
  height: 58px;
  object-fit: cover;
  border-radius: 10px;
  background: #241c20;
}

.selected-media-file {
  width: 118px;
  min-height: 58px;
  place-items: center;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}

.selected-media-thumb em,
.selected-media-file em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.chat-history-marker {
  align-self: center;
  width: fit-content;
  margin: 4px auto 10px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(88, 62, 48, .06);
  color: var(--ys-text-secondary);
  font-size: .72rem;
  font-weight: 800;
}

button.chat-history-marker {
  cursor: pointer;
}

.chat-new-message {
  align-self: center;
  margin: 6px auto;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--ys-brand-deep);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(181, 20, 70, .18);
  cursor: pointer;
}

/* Messenger chat refinement. Keep after older chat/card rules. */
.shell:has(.chat-workspace-page) .bottom-nav {
  display: none !important;
}

.chat-workspace-page {
  width: 100% !important;
  max-width: none !important;
}

.chat-workspace-page > section {
  min-height: 0;
}

.chat-screen-header {
  max-width: 900px;
  margin: 0 auto;
  min-height: 68px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 32px 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(135deg, rgba(255, 232, 240, .96), rgba(255, 248, 237, .96));
  border: 1px solid rgba(181, 20, 70, .1);
  border-bottom: 0;
  box-shadow: none;
}

.chat-screen-header .back-link,
.chat-menu-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--ys-brand-deep);
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none;
}

.chat-screen-header h1 {
  margin: 0;
  font: 800 1rem/1.15 Inter, system-ui, sans-serif;
  color: var(--ys-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-screen-header p {
  margin: 2px 0 0;
  color: var(--ys-text-secondary);
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-avatar,
.writer-avatar.chat-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: .95rem;
}

.chat-menu-btn {
  cursor: pointer;
}

.writer-chat {
  width: min(900px, 100%) !important;
  margin: 0 auto !important;
  min-height: min(760px, calc(100dvh - 174px)) !important;
  height: min(760px, calc(100dvh - 174px)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(181, 20, 70, .1) !important;
  border-radius: 0 0 18px 18px !important;
  background: var(--ys-chat-bg, #fff7f8) !important;
  box-shadow: 0 10px 32px rgba(60, 36, 48, .08) !important;
}

.writer-chat-head {
  display: none !important;
}

.writer-chat-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px clamp(12px, 2.6vw, 22px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  overflow-y: auto !important;
  background:
    linear-gradient(rgba(255, 250, 250, .9), rgba(255, 247, 248, .9)),
    radial-gradient(circle at 8px 8px, rgba(181, 20, 70, .045) 1px, transparent 1px) !important;
  background-size: auto, 20px 20px !important;
}

.chat-day-separator {
  margin: 8px auto 10px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(88, 62, 48, .07) !important;
  color: var(--ys-text-secondary) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.chat-bubble,
.message-bubble {
  width: fit-content !important;
  max-width: min(82%, 560px) !important;
  padding: 8px 11px 6px !important;
  border: 0 !important;
  border-radius: 17px 17px 17px 5px !important;
  background: var(--ys-chat-incoming, #fff) !important;
  color: var(--ys-text-main) !important;
  box-shadow: 0 2px 8px rgba(60, 36, 48, .07) !important;
}

.chat-bubble.mine,
.message-bubble.admin-msg {
  align-self: flex-end !important;
  margin-left: auto !important;
  border-radius: 17px 17px 5px 17px !important;
  background: var(--ys-chat-outgoing, #f7c7d8) !important;
  color: #341923 !important;
}

.chat-bubble.theirs,
.message-bubble:not(.admin-msg) {
  align-self: flex-start !important;
  margin-right: auto !important;
}

.chat-bubble strong,
.message-bubble strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ys-brand-deep);
  font-size: .72rem;
  line-height: 1.1;
}

.chat-bubble.mine strong {
  display: none;
}

.chat-bubble p,
.message-bubble p {
  margin: 2px 0 !important;
  line-height: 1.38 !important;
  overflow-wrap: anywhere !important;
}

.chat-bubble small,
.message-bubble span {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(70, 45, 55, .62) !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  text-align: right !important;
}

.writer-chat-compose,
.admin-chat-compose {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(181, 20, 70, .1) !important;
  background: rgba(255, 250, 250, .96) !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 8 !important;
}

.writer-chat-compose .chat-attach-btn,
.admin-chat-compose .chat-attach-btn {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

.writer-chat-compose textarea,
.admin-chat-compose textarea {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 42px !important;
  max-height: 132px !important;
  padding: 10px 13px !important;
  resize: none !important;
  overflow-y: auto !important;
  border-radius: 21px !important;
  line-height: 1.35 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: pre-wrap !important;
  background: #fff !important;
}

.writer-chat-compose .primary-btn,
.admin-chat-compose .primary-btn {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 42px !important;
  min-width: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  display: grid !important;
  place-items: center !important;
}

.writer-chat-compose .primary-btn::before,
.admin-chat-compose .primary-btn::before {
  content: "➤";
  font-size: 1rem;
  line-height: 1;
}

.chat-attachments {
  gap: 7px !important;
  margin: 3px 0 5px !important;
}

.chat-photo-wrap {
  max-width: min(320px, 100%) !important;
}

.chat-photo-card {
  width: min(280px, 100%) !important;
  border-radius: 13px !important;
}

.chat-photo-card img {
  aspect-ratio: 1 / .78 !important;
}

.chat-document-card {
  width: min(300px, 100%) !important;
  min-width: 0 !important;
  border-radius: 13px !important;
}

.admin-chat-layout {
  min-height: calc(100dvh - 120px);
  align-items: stretch;
}

.admin-chat-active {
  min-height: 0;
}

.admin-chat-active #orderMessagesSection {
  height: min(760px, calc(100dvh - 148px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.admin-chat-active #orderMessagesSection > .dashboard-head {
  flex: 0 0 auto;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(181, 20, 70, .1);
}

.admin-chat-active #orderMessagesList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #fff7f8;
}

.admin-chat-active .admin-chat-compose {
  order: 3;
}

.admin-chat-active #adminMessageMsg {
  order: 4;
  margin: 0 12px 8px;
}

@media (prefers-color-scheme: dark) {
  .writer-chat,
  .admin-chat-active #orderMessagesList {
    --ys-chat-bg: #171114;
    --ys-chat-incoming: #241c20;
    --ys-chat-outgoing: #9d3158;
    background: #171114 !important;
  }

  .writer-chat-body {
    background:
      linear-gradient(rgba(23, 17, 20, .94), rgba(23, 17, 20, .94)),
      radial-gradient(circle at 8px 8px, rgba(255, 190, 210, .04) 1px, transparent 1px) !important;
    background-size: auto, 20px 20px !important;
  }

  .chat-bubble,
  .message-bubble {
    color: #f9eef2 !important;
  }

  .chat-bubble.mine,
  .message-bubble.admin-msg {
    color: #fff8fb !important;
  }

  .writer-chat-compose,
  .admin-chat-compose,
  .chat-screen-header {
    background: rgba(31, 23, 27, .97) !important;
  }
}

@media (max-width: 640px) {
  .chat-workspace-page {
    min-height: 100dvh !important;
    padding: 0 !important;
  }

  .chat-workspace-page > section {
    height: calc(100dvh - 64px);
  }

  .chat-screen-header {
    height: 64px;
    min-height: 64px;
    max-width: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 8px 10px;
    grid-template-columns: 30px 38px minmax(0, 1fr) 30px;
    gap: 8px;
  }

  .chat-header-avatar,
  .writer-avatar.chat-header-avatar {
    width: 36px;
    height: 36px;
  }

  .writer-chat {
    width: 100% !important;
    height: calc(100dvh - 64px) !important;
    min-height: calc(100dvh - 64px) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  .writer-chat-body {
    padding: 12px 10px !important;
  }

  .chat-bubble,
  .message-bubble {
    max-width: 82% !important;
    padding: 8px 10px 6px !important;
    font-size: .94rem !important;
  }

  .writer-chat-compose,
  .admin-chat-compose {
    grid-template-columns: none !important;
    bottom: 0 !important;
    gap: 7px !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .writer-chat-compose .chat-attach-btn,
  .admin-chat-compose .chat-attach-btn {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .writer-chat-compose textarea,
  .admin-chat-compose textarea {
    min-height: 40px !important;
    max-height: 116px !important;
    padding: 9px 12px !important;
    font-size: 16px !important;
  }

  .writer-chat-compose .primary-btn,
  .admin-chat-compose .primary-btn {
    flex-basis: 42px !important;
    width: 42px !important;
    height: 40px !important;
    min-width: 42px !important;
  }

  .admin-chat-layout {
    display: block;
  }

  .admin-chat-list,
  .admin-chat-context {
    position: static;
  }

  .admin-chat-context {
    display: none;
  }

  .admin-chat-active #orderMessagesSection {
    height: calc(100dvh - 96px);
    border-radius: 0;
  }
}

/* Account and admin navigation fixes */
.admin-nav {
  min-height: calc(100vh - 72px);
}

.admin-nav-group,
.admin-nav-footer {
  display: grid;
  gap: 5px;
}

.admin-nav-group small {
  margin: 12px 8px 4px;
  color: rgba(255,255,255,.58);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.admin-nav-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.16);
}

.admin-nav-footer .return-link {
  min-height: 48px;
  background: rgba(255,255,255,.16);
}

.account-workspace {
  max-width: 1120px !important;
}

.account-workspace-card {
  margin-bottom: 16px;
}

.account-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.account-side-nav,
.account-content {
  min-width: 0;
}

.account-side-nav {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--ys-border);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--ys-shadow-soft);
}

.account-side-nav a,
.account-side-nav button {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ys-text);
  font-weight: 800;
  text-align: left;
}

.account-side-nav a.active,
.account-side-nav a:hover,
.account-side-nav button:hover {
  background: var(--ys-brand-soft);
  color: var(--ys-brand-deep);
}

.account-side-nav .logout-row {
  margin-top: 8px;
  color: #9b2f3f;
}

.account-content {
  display: grid;
  gap: 16px;
}

.account-form-card {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.account-form-card h2 {
  margin: 0;
}

.booking-row-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.booking-row-card > div:last-child {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.admin-chat-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(220px, 280px);
  gap: 14px;
  align-items: start;
}

.admin-chat-list,
.admin-chat-context {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.conversation-list {
  display: grid;
  gap: 8px;
}

.conversation-row {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--ys-border);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  color: var(--ys-ink);
}

.conversation-row.active,
.conversation-row:hover {
  border-color: rgba(181, 20, 70, .28);
  background: #fff7f7;
}

.conversation-row span,
.conversation-row small {
  color: var(--ys-text-secondary);
}

.conversation-row em {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--ys-brand-soft);
  color: var(--ys-brand-deep);
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}

.admin-chat-active {
  min-width: 0;
}

.admin-chat-compose {
  align-items: end;
}

.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chat-attachments a {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: inherit;
  font-size: .8rem;
  font-weight: 800;
}

.chat-day-separator {
  width: fit-content;
  margin: 10px auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(181, 20, 70, .08);
  color: var(--ys-text-secondary);
  font-size: .72rem;
  font-weight: 900;
}

.chat-photo-wrap,
.chat-document-actions {
  display: grid;
  gap: 6px;
  max-width: min(280px, 100%);
}

.chat-photo-wrap > span,
.chat-document-actions > a:last-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: .78rem;
  color: var(--ys-text-secondary);
}

.chat-photo-wrap > span strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-photo-card {
  display: block;
  width: min(230px, 100%);
  padding: 0 !important;
  overflow: hidden;
  border-radius: 14px !important;
  background: transparent !important;
}

.chat-photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.chat-document-card {
  min-width: min(260px, 100%);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.86) !important;
}

.chat-document-card strong,
.chat-document-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-document-card small {
  grid-column: 2 / 3;
  color: var(--ys-text-secondary);
}

.chat-document-card em {
  grid-row: 1 / 3;
  grid-column: 3;
  font-style: normal;
  font-weight: 900;
  color: var(--ys-brand-deep);
}

.writer-chat-body {
  max-height: min(62vh, 680px);
  overflow-y: auto;
  scroll-behavior: smooth;
}

.writer-chat-compose textarea,
.admin-chat-compose textarea {
  min-height: 44px;
  resize: vertical;
}

@media (max-width: 520px) {
  .writer-chat-compose,
  .admin-chat-compose {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    position: sticky;
    bottom: 72px;
    z-index: 5;
    background: var(--ys-surface);
    padding: 8px 0;
  }

  .writer-chat-compose textarea,
  .admin-chat-compose textarea {
    grid-column: 2;
    min-width: 0;
  }

  .writer-chat-compose .chat-attach-btn,
  .admin-chat-compose .chat-attach-btn {
    grid-column: 1;
    grid-row: 1;
    min-width: 44px;
    padding-inline: 0;
  }
}

.chat-attach-btn {
  cursor: pointer;
}

/* Customer story workspace redesign */
.story-memory-card {
  overflow: hidden;
  border-radius: 18px;
  background: #fffaf8;
}

.story-card-image {
  display: block;
  height: 168px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(135deg, #fce7ee, #fff5ed);
}

.story-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 6px;
}

.story-pill-action {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  background: #fff0f5;
  color: var(--ys-brand-deep);
  font-weight: 900;
}

.story-workspace-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff2f6, #fff9f3);
  border: 1px solid rgba(181, 20, 70, .1);
}

.story-workspace-header h1 {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 2rem);
}

.story-workspace-header p {
  margin: 3px 0 0;
  color: var(--ys-text-secondary);
}

.story-workspace-nav {
  position: sticky;
  top: 72px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--ys-border);
  box-shadow: var(--ys-shadow-soft);
}

.story-workspace-nav .tab {
  min-height: 42px;
  border-radius: 12px;
}

.writer-chat {
  min-height: min(72vh, 760px);
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto auto;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(201, 31, 93, .055), transparent 28%),
    #fff6f8;
  border: 1px solid rgba(181, 20, 70, .1);
}

.writer-chat-head {
  background: linear-gradient(135deg, #ffe8f0, #fff7ed);
  border-bottom: 1px solid rgba(181, 20, 70, .1);
}

.writer-chat-body {
  overflow-y: auto;
  padding: 18px;
}

.chat-bubble {
  max-width: min(78%, 560px);
  border-radius: 18px 18px 18px 6px;
  background: #fff;
  border: 1px solid rgba(88, 62, 48, .08);
}

.chat-bubble.mine {
  margin-left: auto;
  border-radius: 18px 18px 6px 18px;
  background: #ffdceb;
  color: #44242f;
}

.writer-chat-compose {
  position: sticky;
  bottom: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  background: rgba(255,250,248,.96);
  border-top: 1px solid rgba(181, 20, 70, .1);
}

.story-info-panel,
.story-section-list {
  display: grid;
  gap: 12px;
}

.story-progress-card {
  display: grid;
  gap: 12px;
  background: linear-gradient(135deg, #fff, #fff0f5);
}

.story-section-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.story-section-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fce7ee;
  color: var(--ys-brand-deep);
  font-weight: 900;
}

.draft-stage-card {
  display: grid;
  gap: 14px;
  background: linear-gradient(135deg, #fff, #f7f8ee);
}

.draft-steps {
  display: grid;
  gap: 10px;
}

.draft-steps div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ys-border);
}

.draft-steps .done span {
  color: #2f6846;
}

.selected-photo-preview {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ys-border);
}

.selected-photo-preview div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.selected-photo-preview span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff0f5;
  color: var(--ys-brand-deep);
  font-size: .8rem;
  font-weight: 800;
}

.story-hub,
.story-more-panel {
  display: grid;
  gap: 14px;
}

.story-hub-hero {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  gap: 18px;
  align-items: center;
  padding: 14px;
  background: linear-gradient(135deg, #fff, #fff0f5);
}

.story-hub-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
}

.story-hub-hero h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.story-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.story-hub-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
}

.story-hub-panel h2 {
  margin: 0;
  font-size: 1.2rem;
}

.story-hub-panel.primary-panel {
  background: linear-gradient(135deg, #fff, #ffe9f1);
}

.story-hub-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.story-hub-photos img,
.story-hub-photos a {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  object-fit: cover;
}

.story-hub-photos a {
  display: grid;
  place-items: center;
  background: #fff0f5;
  color: var(--ys-brand-deep);
  font-size: 1.5rem;
  font-weight: 900;
}

@media (max-width: 767px) {
  .account-layout {
    display: block;
  }

  .account-side-nav {
    position: static;
    display: none;
  }

  .account-workspace {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  .account-form-card {
    padding: 16px;
  }

  .booking-row-card {
    grid-template-columns: 1fr;
  }

  .booking-row-card > div:last-child {
    justify-items: stretch;
  }

  .profile-row,
  .appearance-row {
    min-height: 58px !important;
  }

  .admin-chat-layout {
    display: block;
  }

  .admin-chat-list,
  .admin-chat-context {
    position: static;
    margin-bottom: 12px;
  }

  .admin-chat-context {
    display: none;
  }

  .admin-chat-compose {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 10px 0 0;
    background: #fbf6ef;
  }

  .story-card-image {
    height: 150px;
  }

  .story-workspace-header {
    grid-template-columns: 1fr auto;
  }

  .story-workspace-header .back-link {
    grid-column: 1 / -1;
  }

  .story-workspace-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    top: auto;
    z-index: 35;
  }

  .workspace-page {
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }

  .writer-chat {
    min-height: calc(100vh - 230px);
    border-radius: 16px;
  }

  .writer-chat-body {
    padding: 12px;
  }

  .chat-bubble {
    max-width: 88%;
  }

  .ordered-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .story-hub-hero,
  .story-hub-grid {
    grid-template-columns: 1fr;
  }

  .story-hub-hero {
    padding: 12px;
  }

  .story-hub-panel {
    padding: 14px;
  }
}

/* Entry screen */
.shell:has(.entry-page) {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(246, 225, 231, .85), transparent 26%),
    radial-gradient(circle at 86% 14%, rgba(236, 241, 231, .95), transparent 30%),
    linear-gradient(180deg, #fffaf7 0%, #fff7f3 52%, #fffaf8 100%) !important;
}

.shell:has(.entry-page) > .topbar,
.shell:has(.entry-page) > .app-header {
  display: none !important;
}

.entry-page {
  width: min(1180px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px 0 34px;
  display: grid;
  align-content: center;
  gap: 22px;
}

.entry-hero {
  display: grid;
  gap: 26px;
  align-items: center;
}

.entry-copy {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
  animation: entry-rise 560ms ease both;
}

.entry-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #9f1748;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.52rem;
  font-weight: 700;
}

.entry-logo {
  width: 58px;
  height: 46px;
  filter: drop-shadow(0 8px 12px rgba(201, 31, 93, .12));
}

.entry-copy h1 {
  max-width: 660px;
  margin: 0;
  color: #2f1f22;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.25rem, 7vw, 4.85rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.entry-copy p {
  max-width: 560px;
  margin: 0;
  color: #665459;
  font-size: clamp(1rem, 2.8vw, 1.18rem);
  line-height: 1.6;
}

.entry-actions {
  width: min(100%, 390px);
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.entry-primary,
.entry-secondary {
  min-height: 56px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 800;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.entry-primary {
  border: 0;
  background: linear-gradient(180deg, #cf255f, #a51646);
  color: #fff;
  box-shadow: 0 16px 34px rgba(165, 22, 70, .24);
}

.entry-secondary {
  border: 1px solid rgba(165, 22, 70, .18);
  background: rgba(255, 255, 255, .82);
  color: #3d2930;
  box-shadow: 0 10px 28px rgba(95, 59, 64, .08);
}

.entry-primary:hover,
.entry-secondary:hover {
  transform: translateY(-2px);
}

.entry-primary .icon {
  width: 19px;
  height: 19px;
}

.entry-note {
  font-size: .93rem !important;
  color: #7c696d !important;
}

.entry-note a {
  color: #a51646;
  font-weight: 800;
}

.entry-visual,
.entry-mobile-visual {
  position: relative;
  min-height: 238px;
  display: grid;
  place-items: center;
}

.entry-visual {
  display: none;
}

.entry-book {
  position: relative;
  width: min(310px, 78vw);
  aspect-ratio: 1.22;
  border-radius: 18px 22px 22px 18px;
  background:
    linear-gradient(90deg, rgba(143, 22, 56, .16), transparent 14%),
    linear-gradient(135deg, #fffefd 0%, #fff4ed 48%, #f6dde5 100%);
  border: 1px solid rgba(165, 22, 70, .16);
  box-shadow: 0 24px 60px rgba(95, 59, 64, .16);
  transform: rotate(-2deg);
}

.entry-book::before,
.entry-book::after {
  content: "";
  position: absolute;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(95, 59, 64, .12);
}

.entry-book::before {
  left: 11%;
  top: 14%;
  width: 36%;
  height: 58%;
}

.entry-book::after {
  right: 12%;
  top: 13%;
  width: 34%;
  height: 64%;
}

.entry-photo {
  position: absolute;
  z-index: 2;
  border: 7px solid #fff;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(78, 48, 53, .17);
}

.photo-one {
  width: 35%;
  height: 32%;
  left: -8%;
  top: 18%;
  background: linear-gradient(135deg, #d7ebf0, #f8d9c8);
  transform: rotate(-9deg);
}

.photo-two {
  width: 38%;
  height: 34%;
  right: -7%;
  top: 7%;
  background: linear-gradient(135deg, #ead7f3, #f6e1e7);
  transform: rotate(7deg);
}

.photo-three {
  width: 34%;
  height: 30%;
  right: 16%;
  bottom: -9%;
  background: linear-gradient(135deg, #ecf1e7, #fff0d8);
  transform: rotate(-4deg);
}

.entry-ribbon {
  position: absolute;
  z-index: 3;
  left: 48%;
  top: 0;
  width: 14px;
  height: 72%;
  background: linear-gradient(180deg, #c91f5d, #f2a5bd);
  border-radius: 0 0 999px 999px;
  opacity: .9;
}

.entry-preview {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 10px;
}

.entry-preview-card {
  flex: 0 0 156px;
  min-height: 134px;
  scroll-snap-align: start;
  padding: 14px;
  border: 1px solid rgba(165, 22, 70, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 12px 30px rgba(95, 59, 64, .08);
  display: grid;
  align-content: start;
  gap: 8px;
}

.entry-preview-card span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #a51646;
}

.entry-preview-card .icon {
  width: 22px;
  height: 22px;
}

.entry-preview-card strong {
  color: #33242a;
  font-size: .95rem;
  line-height: 1.15;
}

.entry-preview-card small {
  color: #75676c;
  line-height: 1.3;
}

.entry-preview-card.tone-blush span { background: #f8dde3; }
.entry-preview-card.tone-sky span { background: #eaf2f8; }
.entry-preview-card.tone-champagne span { background: #f8f1e4; }
.entry-preview-card.tone-sage span { background: #ecf1e7; }
.entry-preview-card.tone-rose span { background: #fff0f4; }

@keyframes entry-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 680px) {
  .entry-page {
    width: min(980px, calc(100% - 54px));
    padding-block: 34px;
    gap: 28px;
  }

  .entry-copy h1 {
    font-size: clamp(3.1rem, 7vw, 4.5rem);
  }

  .entry-actions {
    width: auto;
    grid-template-columns: repeat(2, minmax(170px, auto));
    justify-content: center;
  }

  .entry-preview {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
  }
}

@media (min-width: 1024px) {
  .entry-page {
    width: min(1180px, calc(100% - 72px));
    gap: 36px;
  }

  .entry-hero {
    min-height: 660px;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .86fr);
    gap: 54px;
  }

  .entry-copy {
    justify-items: start;
    text-align: left;
    gap: 20px;
  }

  .entry-copy h1 {
    font-size: clamp(3.7rem, 5.4vw, 5.35rem);
  }

  .entry-copy p {
    font-size: 1.18rem;
  }

  .entry-actions {
    justify-content: start;
    margin-top: 12px;
  }

  .entry-mobile-visual {
    display: none;
  }

  .entry-visual {
    min-height: 520px;
    display: grid;
  }

  .entry-visual::before,
  .entry-visual::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(165, 22, 70, .1);
    box-shadow: 0 18px 48px rgba(95, 59, 64, .08);
  }

  .entry-visual::before {
    width: 92px;
    height: 92px;
    right: 4%;
    top: 13%;
  }

  .entry-visual::after {
    width: 54px;
    height: 54px;
    left: 6%;
    bottom: 17%;
  }

  .entry-visual .entry-book {
    width: min(480px, 40vw);
  }

  .entry-preview-card {
    flex-basis: 174px;
  }
}

@media (max-width: 420px) {
  .entry-page {
    width: min(100% - 24px, 430px);
    align-content: start;
    padding-top: 18px;
  }

  .entry-copy {
    gap: 14px;
  }

  .entry-copy h1 {
    font-size: clamp(2.05rem, 11vw, 2.65rem);
  }

  .entry-mobile-visual {
    min-height: 188px;
  }

  .entry-actions,
  .entry-primary,
  .entry-secondary {
    width: 100%;
  }

.entry-preview-card {
    flex-basis: 148px;
  }
}

/* Booking, production, and writer chat */
.booking-calendar,
.booking-summary,
.writer-chat,
.production-week-card {
  border: 1px solid #efe3e6;
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 26px rgba(60, 36, 48, .06);
}

.booking-calendar {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.booking-calendar-head h2,
.writer-chat-head h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  color: var(--ys-text-main);
}

.booking-week-list {
  display: grid;
  gap: 10px;
}

.booking-week-card {
  min-height: 78px;
  padding: 12px;
  border: 1px solid #eadfd9;
  border-radius: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: #fffdf9;
}

.booking-week-card input {
  width: 20px;
  height: 20px;
  accent-color: var(--ys-primary);
}

.booking-week-card strong,
.production-week-head strong {
  color: var(--ys-text-main);
}

.booking-week-card small {
  display: block;
  margin-top: 4px;
  color: var(--ys-primary-dark);
  font-weight: 800;
}

.booking-week-card em {
  color: var(--ys-text-secondary);
  font-style: normal;
  font-size: .86rem;
}

.booking-week-card.is-disabled {
  opacity: .55;
  background: #f7f0ed;
}

.booking-summary {
  padding: 14px;
  background: linear-gradient(135deg, #fff7fa, #fffdf8);
}

.booking-summary p {
  margin: 6px 0 0;
}

.writer-chat {
  min-height: min(720px, calc(100vh - 150px));
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto auto;
  overflow: hidden;
}

.writer-chat-head {
  padding: 16px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #efe3e6;
  background: linear-gradient(135deg, #fffaf7, #fff1f5);
}

.writer-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--ys-primary);
  color: #fff;
  font-weight: 800;
}

.writer-chat-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  background: #fffaf8;
}

.chat-bubble {
  max-width: min(76%, 560px);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #eadfd9;
  background: #fff;
  box-shadow: 0 6px 18px rgba(60, 36, 48, .05);
}

.chat-bubble.mine {
  align-self: flex-end;
  background: #fff0f4;
  border-color: #f2cbd7;
}

.chat-bubble.theirs {
  align-self: flex-start;
  background: #fff;
}

.chat-bubble p {
  margin: 6px 0;
  line-height: 1.45;
}

.chat-bubble small {
  color: var(--ys-text-muted);
}

.writer-chat-compose {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px auto;
  gap: 10px;
  border-top: 1px solid #efe3e6;
  background: rgba(255,255,255,.92);
}

.writer-chat-compose textarea {
  min-height: 48px;
  max-height: 140px;
  resize: vertical;
}

.production-admin {
  display: grid;
  gap: 18px;
}

.production-week-grid {
  display: grid;
  gap: 14px;
}

.production-week-card {
  padding: 16px;
  display: grid;
  gap: 14px;
}

.production-week-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.production-week-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.production-orders {
  display: grid;
  gap: 8px;
}

.home-booking-card {
  padding: 16px;
  border: 1px solid #efe3e6;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,244,246,.92)),
    #fff;
  box-shadow: 0 8px 24px rgba(60, 36, 48, .06);
  display: grid;
  gap: 14px;
}

.home-booking-card h2 {
  margin: 2px 0 4px;
  color: var(--ys-text-main);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.1;
}

.home-booking-card p {
  margin: 0;
  color: var(--ys-text-secondary);
  line-height: 1.35;
}

.home-week-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}

.home-week-compact {
  display: none;
}

.home-week-chip {
  flex: 0 0 132px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid #eadfd9;
  border-radius: 14px;
  background: #fffdf9;
  color: var(--ys-text-main);
  display: grid;
  align-content: start;
  gap: 5px;
  scroll-snap-align: start;
}

.home-week-chip span {
  color: var(--ys-primary-dark);
  font-size: .78rem;
  font-weight: 800;
}

.home-week-chip small {
  color: var(--ys-text-secondary);
}

.home-week-chip.is-disabled {
  opacity: .62;
  background: #f7f0ed;
}

.home-calendar-tile {
  flex: 0 0 146px;
  min-height: 164px;
  padding: 12px;
  border: 1px solid #eadfd9;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #fff 0%, #fffaf7 100%);
  color: var(--ys-text-main);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 7px;
  scroll-snap-align: start;
  box-shadow: 0 8px 20px rgba(60, 36, 48, .05);
}

.calendar-tile-top {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff0f4;
  color: var(--ys-primary-dark);
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.home-calendar-tile strong {
  font-size: 1.05rem;
  line-height: 1.08;
}

.home-calendar-tile em {
  color: var(--ys-primary-dark);
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
}

.home-calendar-tile small {
  color: var(--ys-text-secondary);
  line-height: 1.25;
}

.home-calendar-tile b {
  width: 100%;
  min-height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ys-primary);
  color: #fff;
  font-size: .85rem;
}

.home-calendar-tile.is-disabled {
  opacity: .62;
  background: #f7f0ed;
}

.home-calendar-tile.is-disabled b {
  background: #cab8b1;
}

@media (min-width: 900px) {
  .booking-week-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .production-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-week-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  .home-calendar-tile {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .booking-week-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .booking-week-card em {
    grid-column: 2;
  }

  .writer-chat {
    min-height: calc(100vh - 116px);
    border-radius: 0;
    margin-inline: -6px;
  }

  .writer-chat-head {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .writer-chat-head .status-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .writer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .chat-bubble {
    max-width: 88%;
  }

  .writer-chat-compose {
    grid-template-columns: minmax(0, 1fr) 44px 72px;
  }

  .production-week-form {
    grid-template-columns: 1fr;
  }
}

/* Account alignment and question-flow repair */
.account-page.customer-page {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: calc(168px + env(safe-area-inset-bottom)) !important;
}

.account-page .mobile-titlebar {
  padding-top: 16px;
  padding-bottom: 16px;
}

.account-page .mobile-titlebar h1 {
  line-height: 1.05;
}

.account-profile {
  min-height: 218px !important;
  padding: 26px 18px 20px !important;
  margin-bottom: 24px !important;
}

.account-profile .account-avatar {
  width: 82px !important;
  height: 82px !important;
  flex-basis: 82px !important;
  margin-bottom: 14px !important;
}

.account-profile h2 {
  margin-bottom: 7px !important;
  line-height: 1.1;
}

.account-profile p {
  margin-bottom: 14px !important;
  line-height: 1.2;
}

.account-section {
  margin-top: 18px !important;
}

.account-section h2 {
  margin-bottom: 8px !important;
  line-height: 1.1;
}

.profile-list {
  overflow: visible;
}

.profile-row {
  min-height: 56px;
  grid-template-columns: 42px minmax(0, 1fr) 24px 12px !important;
  gap: 10px !important;
  padding: 8px 12px !important;
}

.profile-row .account-row-copy {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 3px;
}

.profile-row .account-row-copy strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-row .account-row-copy small {
  text-align: left !important;
  white-space: normal;
  line-height: 1.22;
}

.profile-row b {
  justify-self: end;
}

.profile-row em {
  justify-self: end;
}

.workspace-page.question-page {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 0 14px calc(118px + env(safe-area-inset-bottom)) !important;
}

.question-titlebar {
  height: 58px;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
}

.question-titlebar h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.question-titlebar .back-link {
  font-size: 30px;
  line-height: 1;
}

.question-page .question-flow-card {
  display: block;
  padding: 0 !important;
  margin: 0;
}

.question-page .question-flow-progress {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 8px 0 28px;
  gap: 14px;
}

.question-page .question-flow-progress::before,
.question-page .question-flow-progress span {
  height: 5px;
}

.question-page .question-flow-progress em {
  color: var(--ys-text-secondary-token);
  font-size: 12px;
  font-weight: 700;
}

.question-page .interview-card h2 {
  margin: 0 0 10px;
  max-width: 310px;
  font-size: 28px;
  line-height: 1.08;
  color: var(--ys-text-primary-token);
}

.question-page .interview-card > .muted {
  margin: 0 0 18px;
  max-width: 340px;
  font-size: 15px;
  line-height: 1.34;
  color: var(--ys-text-secondary-token) !important;
}

.question-page .answer-field {
  margin: 0 0 14px;
}

.question-page .answer-field textarea,
.question-page .answer-field input {
  min-height: 126px;
  width: 100%;
  border-radius: 9px;
  padding: 14px;
  background: var(--ys-input-token);
  border: 1px solid var(--ys-border-token);
  color: var(--ys-text-primary-token);
  resize: vertical;
}

.question-page .question-photo-cta {
  min-height: 82px;
  margin: 0 0 12px;
  border-radius: 10px;
  border: 1.5px dashed color-mix(in srgb, var(--ys-primary-token) 55%, transparent);
  background: color-mix(in srgb, var(--ys-surface-token) 82%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: left;
}

.question-page .question-photo-cta .icon {
  font-size: 24px;
}

.question-page .question-photo-cta strong {
  display: block;
  color: var(--ys-primary-token) !important;
}

.question-page .question-photo-cta small {
  display: block;
  margin-top: 3px;
  color: var(--ys-text-secondary-token);
  font-size: 12px;
}

.question-page .small.muted {
  display: none;
}

.question-page .question-actions {
  position: sticky;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 4;
  grid-template-columns: 96px minmax(0, 1fr);
  margin-top: 48px;
  padding-top: 14px;
  background: linear-gradient(180deg, transparent, var(--ys-bg-token) 34%);
}

.question-page .question-actions .secondary-btn,
.question-page .question-actions .primary-btn {
  min-height: 46px;
  border-radius: 999px;
}

.question-page .subtle-skip {
  display: none;
}

html[data-theme="dark"] .question-page .question-actions {
  background: linear-gradient(180deg, transparent, #171216 34%);
}

.shell:has(.question-page) .bottom-nav {
  display: none !important;
}

.shell:has(.question-page) {
  padding-bottom: 0 !important;
}

.workspace-page.question-page {
  padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}

.question-page .answer-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.question-page .question-actions {
  bottom: calc(14px + env(safe-area-inset-bottom));
  margin-top: 46px;
}

@media (max-width: 340px) {
  .account-page.customer-page,
  .workspace-page.question-page {
    padding-left: 10px;
    padding-right: 10px;
  }
  .profile-row {
    grid-template-columns: 40px minmax(0, 1fr) 22px 10px !important;
    gap: 8px !important;
  }
  .account-row-icon {
    width: 40px;
    height: 40px;
  }
  .question-page .interview-card h2 {
    font-size: 25px;
  }
  .question-page .interview-card > .muted {
    font-size: 14px;
  }
}

.story-type-row {
  grid-template-columns: 78px 46px minmax(0, 1fr) !important;
  column-gap: 12px !important;
}

.story-type-row .option-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  font-size: 22px !important;
  background: var(--ys-primary-soft-token) !important;
  color: var(--ys-primary-token) !important;
}

.story-type-row > span:last-child {
  min-width: 0;
}

.story-type-row h3,
.story-type-row p,
.story-type-row em {
  position: static !important;
}

html[data-theme="dark"] .story-type-row .option-icon {
  background: var(--ys-surface-elevated-token) !important;
  color: var(--ys-primary-token) !important;
}

@media (max-width: 340px) {
  .story-type-row {
    grid-template-columns: 68px 40px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }
  .story-type-row .option-icon {
    width: 38px !important;
    height: 38px !important;
  }
}

html[data-theme="dark"] .bottom-nav__item {
  color: var(--ys-text-muted-token) !important;
}

html[data-theme="dark"] .bottom-nav__item.active {
  color: var(--ys-primary-token) !important;
}

html[data-theme="dark"] .bottom-nav__item.create .icon {
  background: var(--ys-primary-token) !important;
  color: #fff !important;
}

/* Account page and customer dark mode */
:root {
  --ys-bg-token: #FFF9F7;
  --ys-shell-token: linear-gradient(180deg, #fff8f7 0%, #fffaf8 58%, #fff6f7 100%);
  --ys-surface-token: #FFFFFF;
  --ys-surface-secondary-token: #FFF3F5;
  --ys-surface-elevated-token: #FFFFFF;
  --ys-text-primary-token: #33242A;
  --ys-text-secondary-token: #75676C;
  --ys-text-muted-token: #9A8D91;
  --ys-border-token: #EFE3E6;
  --ys-primary-token: #CF1F60;
  --ys-primary-hover-token: #B71953;
  --ys-primary-soft-token: #FCECF1;
  --ys-input-token: #FFFFFF;
  --ys-shadow-token: 0 2px 10px rgba(60, 36, 48, 0.05);
  --ys-nav-token: rgba(255,255,255,.96);
}

:root[data-theme="dark"] {
  --ys-bg-token: #171216;
  --ys-shell-token: radial-gradient(circle at 50% -10%, rgba(80, 31, 52, 0.4), transparent 38%), linear-gradient(180deg, #171216 0%, #130f12 100%);
  --ys-surface-token: #221A1F;
  --ys-surface-secondary-token: #2B2026;
  --ys-surface-elevated-token: #32252C;
  --ys-text-primary-token: #FFF5F7;
  --ys-text-secondary-token: #D6C6CC;
  --ys-text-muted-token: #A9969E;
  --ys-border-token: #45343C;
  --ys-primary-token: #E63A78;
  --ys-primary-hover-token: #F04A85;
  --ys-primary-soft-token: #4A2132;
  --ys-input-token: #2A2229;
  --ys-shadow-token: 0 14px 35px rgba(0, 0, 0, 0.26);
  --ys-nav-token: rgba(34, 26, 31, .98);
}

body,
.shell {
  background: var(--ys-shell-token);
  color: var(--ys-text-primary-token);
}

.card,
.home-project-card,
.home-story-tile,
.story-type-row,
.story-start-card,
.included-card,
.notification-item,
.account-profile,
.profile-list,
.appearance-row,
.empty-state,
.auth-card,
.notification-panel {
  background: var(--ys-surface-token);
  border-color: var(--ys-border-token);
  color: var(--ys-text-primary-token);
  box-shadow: var(--ys-shadow-token);
}

.muted,
.home-header-copy p,
.story-type-row p,
.account-profile p,
.account-row-copy small,
.notification-copy span,
.notification-copy small,
.home-project-body .small {
  color: var(--ys-text-secondary-token);
}

.primary-btn,
.mobile-primary,
.continue-btn,
.filter-chip.active {
  background: linear-gradient(180deg, var(--ys-primary-token), var(--ys-primary-hover-token));
}

.secondary-btn {
  background: var(--ys-surface-token);
  border-color: var(--ys-border-token);
  color: var(--ys-text-primary-token);
}

.field input,
.field textarea,
.field select,
.auth-card .field input,
.admin-search-inline {
  background: var(--ys-input-token);
  border-color: var(--ys-border-token);
  color: var(--ys-text-primary-token);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ys-text-muted-token);
}

.bottom-nav {
  background: var(--ys-nav-token);
  border-color: var(--ys-border-token);
}

.bottom-nav__item {
  color: var(--ys-text-muted-token);
}

.bottom-nav__item.active,
.mobile-section-head a,
.story-card-footer strong,
.link-btn,
.auth-switch a,
.story-type-row em,
.included-card .icon,
.question-photo-cta {
  color: var(--ys-primary-token);
}

.bottom-nav__item.create .icon,
.home-project-card .continue-btn,
.my-story-list .continue-btn {
  background: var(--ys-primary-token);
}

.account-page {
  padding-top: 0;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

.account-page .mobile-titlebar {
  text-align: left;
  grid-template-columns: 1fr;
  height: auto;
  padding: 18px 0 14px;
}

.account-page .mobile-titlebar h1 {
  text-align: left;
  font-size: 26px;
  line-height: 1.1;
}

.account-profile {
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 24px 16px 22px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(207, 31, 96, .13), transparent 42%),
    var(--ys-surface-secondary-token);
}

.account-profile::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 42px;
  height: 32px;
  opacity: .1;
  background: currentColor;
  clip-path: polygon(0 30%, 38% 0, 50% 24%, 62% 0, 100% 30%, 100% 88%, 0 88%);
}

.account-avatar {
  width: 82px;
  height: 82px;
  border: 3px solid var(--ys-surface-token);
  background: linear-gradient(135deg, #f7c7d7, #fff4f8);
  color: var(--ys-primary-dark);
  font-size: 1.45rem;
}

.account-profile h2 {
  margin-top: 8px;
  font-size: 22px;
}

.account-profile .secondary-btn {
  min-height: 34px;
  padding: 7px 18px;
  border-radius: 999px;
  color: var(--ys-primary-token);
  border-color: rgba(207, 31, 96, .34);
  background: color-mix(in srgb, var(--ys-primary-soft-token) 42%, transparent);
}

.account-section {
  margin-top: 22px;
}

.account-section h2 {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--ys-text-primary-token);
}

.appearance-row,
.profile-row {
  width: 100%;
  min-height: 62px;
  border: 1px solid var(--ys-border-token);
  background: var(--ys-surface-token);
  color: var(--ys-text-primary-token);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
}

.appearance-row {
  border-radius: 15px;
  box-shadow: var(--ys-shadow-token);
}

.profile-list {
  overflow: hidden;
  border-radius: 15px;
}

.profile-row {
  min-height: 58px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}

.profile-row:last-child {
  border-bottom: 0;
}

.account-row-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--ys-primary-token);
}

.account-row-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-row-copy strong {
  font-size: 14px;
  line-height: 1.15;
}

.account-row-copy small {
  font-size: 12px;
  line-height: 1.2;
}

.profile-row b {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--ys-primary-token);
  color: #fff;
  font-size: 11px;
}

.profile-row em {
  color: var(--ys-text-muted-token);
  font-style: normal;
  font-size: 18px;
}

.theme-switch {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  padding: 3px;
  display: flex;
  align-items: center;
  background: #E7DDE1;
  transition: background 180ms ease;
}

.theme-switch i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
  transition: transform 180ms ease;
}

.theme-switch[aria-checked="true"] {
  background: var(--ys-primary-token);
}

.theme-switch[aria-checked="true"] i {
  transform: translateX(20px);
}

.theme-switch:focus-visible,
.appearance-row:focus-visible,
.profile-row:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ys-primary-token) 45%, transparent);
  outline-offset: 2px;
}

.tone-rose { background: #FCECF1; color: #CF1F60; }
.tone-blue { background: #EAF3FF; color: #3478C7; }
.tone-pink { background: #FFF0F7; color: #D4337A; }
.tone-amber { background: #FFF3DF; color: #D9862D; }
.tone-teal { background: #E8F7F4; color: #238A7D; }
.tone-purple { background: #F2ECFF; color: #7C55C7; }
.tone-green { background: #E8F7EF; color: #339668; }
.tone-lavender { background: #F2ECFF; color: #7C55C7; }
.tone-danger { background: #FCE8EC; color: #C33B52; }

:root[data-theme="dark"] .tone-rose { background: #4A2132; color: #FF75A6; }
:root[data-theme="dark"] .tone-blue { background: #1D3043; color: #7DBBFF; }
:root[data-theme="dark"] .tone-pink { background: #482138; color: #FF88BE; }
:root[data-theme="dark"] .tone-amber { background: #422D17; color: #FFB45F; }
:root[data-theme="dark"] .tone-teal { background: #173A37; color: #69D7C9; }
:root[data-theme="dark"] .tone-purple,
:root[data-theme="dark"] .tone-lavender { background: #302448; color: #BDA2FF; }
:root[data-theme="dark"] .tone-green { background: #18372B; color: #77DCA8; }
:root[data-theme="dark"] .tone-danger { background: #44202A; color: #FF8497; }

:root[data-theme="dark"] .home-icon-btn,
:root[data-theme="dark"] .home-avatar,
:root[data-theme="dark"] .story-tile-visual,
:root[data-theme="dark"] .story-start-icon {
  background: var(--ys-surface-elevated-token);
  border-color: var(--ys-border-token);
  color: var(--ys-primary-token);
}

:root[data-theme="dark"] .memory-hero::after {
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.78));
}

:root[data-theme="dark"] .status-draft { background: #3B3334; color: #D8CDD0; border-color: #514449; }
:root[data-theme="dark"] .status-submitted { background: #19334A; color: #91CAFF; border-color: #254B6E; }
:root[data-theme="dark"] .status-review { background: #40243B; color: #FFA6D0; border-color: #5C3454; }
:root[data-theme="dark"] .status-needs { background: #432C18; color: #FFC27C; border-color: #654323; }
:root[data-theme="dark"] .status-approved,
:root[data-theme="dark"] .status-completed { background: #1D3B2F; color: #8BE0B0; border-color: #2A5945; }
:root[data-theme="dark"] .status-pdf { background: #443719; color: #FFE08A; border-color: #665426; }
:root[data-theme="dark"] .status-printing { background: #1B3747; color: #91D8FF; border-color: #2A566F; }

:root[data-theme="dark"] .question-flow-card,
:root[data-theme="dark"] .subtle-skip {
  color: var(--ys-text-primary-token);
}

:root[data-theme="dark"] .question-photo-cta {
  background: var(--ys-surface-token);
  border-color: rgba(230, 58, 120, .46);
}

:root[data-theme="dark"] .bottom-nav {
  box-shadow: 0 -8px 26px rgba(0,0,0,.34);
}

@media (min-width: 1024px) {
  .page { padding-bottom: 56px; }
  .customer-page { padding-bottom: 72px; }
  .bottom-nav { display: none; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-mobile-header { display: flex; }
  .admin-sidebar {
    display: none;
    position: static;
    max-height: none;
  }
  .admin-sidebar.open { display: grid; }
  .admin-topbar,
  .admin-welcome { align-items: stretch; flex-direction: column; }
  .admin-topbar-actions {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }
  .admin-topbar-actions input { min-width: 0; flex: 1; }
  .notification-admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .app-header__inner,
  .page { width: calc(100% - 32px); }
  .brand-app { font-size: 1.42rem; }
  .page-header .primary-btn,
  .page-header .secondary-btn { width: 100%; }
  .grid-2,
  .grid-3,
  .grid-4,
  .story-row,
  .hero-app,
  .process-steps { grid-template-columns: 1fr; }
  .home-project-card { grid-template-columns: 76px minmax(0, 1fr); }
  .home-project-card img { width: 76px; height: 100px; }
  .proof-viewer-shell iframe { height: 460px; }
  .answer-review,
  .detail-list div { display: grid; grid-template-columns: 1fr; }
  .notification-layer {
    position: fixed;
    inset: 72px 12px auto 12px;
    right: 12px;
  }
  .notification-panel {
    width: 100%;
    max-height: calc(100vh - 92px);
    border-radius: 20px;
  }
  .notification-panel__header,
  .notification-actions,
  .notification-user-actions { align-items: stretch; }
  .notification-read-all,
  .notification-actions .secondary-btn,
  .notification-user-actions .secondary-btn,
  .notification-user-actions .ghost-btn { width: 100%; }
  .admin-table-wrap { display: none; }
  .admin-order-cards { display: grid; }
  .admin-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .admin-tabs .tab { flex: 0 0 auto; }
  .qp-summary,
  .story-question-head {
    align-items: stretch;
    flex-direction: column;
  }
  .order-gallery,
  .question-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .photo-lightbox { padding: 12px; }
  .photo-lightbox-actions .secondary-btn,
  .photo-lightbox-actions .ghost-btn {
    min-height: 44px;
  }
  .admin-topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
  }
}

@media (max-width: 479px) {
  .page { width: calc(100% - 24px); }
  .page,
  .customer-page { padding-bottom: 124px; }
  .card,
  .option,
  .upload-zone,
  .guide-banner,
  .home-story-tile,
  .home-project-card { padding: 16px; }
  .memory-copy { padding: 18px; }
  .mobile-section-head { align-items: flex-start; }
  .step-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-nav { width: 100%; }
}

/* Reference mobile polish: keep these overrides last so older broad rules do not dilute the app rebuild. */
body { background: var(--ys-background); color: var(--ys-text-main); }
.page { width: min(430px, calc(100% - 32px)); }
.card, .home-project-card, .home-story-tile, .story-type-row, .story-start-card, .included-card, .admin-order-card, .metric-card, .notification-item, .account-profile, .profile-list {
  border-radius: 16px;
  border: 1px solid #EFE3E6;
  background: #fff;
  box-shadow: 0 2px 10px rgba(60, 36, 48, 0.05);
}
.primary-btn, .mobile-primary {
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ys-primary), var(--ys-primary-hover));
  color: #fff;
  font-weight: 700;
}
.secondary-btn {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid #E8DCE0;
  background: #fff;
  color: var(--ys-text-main);
  font-weight: 650;
}
.topbar-authenticated, .mobile-home-shell .app-header { display: none; }
.customer-page { padding-bottom: 112px; }
.memory-hero { display: block; grid-template-columns: none; min-height: 220px; border-radius: 16px; }
.memory-copy { min-height: 220px; padding: 18px; }
.memory-copy h2 { color: #fff; font-size: 1.9rem; line-height: 1.03; }
.story-tile-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
.home-story-tile { flex: 0 0 112px; min-height: 132px; padding: 12px 10px; }
.home-story-tile p, .home-story-tile em { display: none; }
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: calc(70px + env(safe-area-inset-bottom));
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(255,255,255,.96);
  border-top: 1px solid #EFE3E6;
}
.bottom-nav__item { font-size: 10.5px; color: var(--ys-text-muted); }
.bottom-nav__item.active { color: var(--ys-primary); }
.bottom-nav__item.create .icon { width: 48px; height: 48px; margin-top: -26px; border-radius: 50%; background: var(--ys-primary); color: #fff; }
.story-choice-list { display: grid; gap: 12px; }
.story-type-row { grid-template-columns: 76px 34px minmax(0, 1fr); padding: 8px; }
.story-type-row img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.question-flow-card { padding: 4px 0 0; background: transparent; border: 0; box-shadow: none; }
.interview-card h2 { font-size: 1.8rem; line-height: 1.08; }
.answer-field textarea { min-height: 138px; font-size: 16px; }
.question-actions { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
.admin-sidebar { background: linear-gradient(180deg, var(--ys-admin-dark), var(--ys-admin-dark-secondary)); color: #fff; }
.admin-nav-link { color: rgba(255,255,255,.86); }
.admin-nav-link.active, .admin-nav-link:hover { background: rgba(255,255,255,.14); color: #fff; }
@media (min-width: 820px) {
  .page:not(.admin-page) { width: min(760px, calc(100% - 48px)); }
  .admin-page { width: min(1180px, calc(100% - 48px)); }
}
@media (max-width: 760px) {
  .page, .admin-page { width: min(430px, calc(100% - 24px)); }
  .admin-table-wrap { display: none; }
  .admin-order-cards { display: grid; gap: 10px; }
  .grid, .grid-2, .grid-3, .grid-4, .notification-admin-grid { grid-template-columns: 1fr !important; }
}

/* Closer reference pass */
.shell { background: linear-gradient(180deg, #fff8f7 0%, #fffaf8 58%, #fff6f7 100%); }
.shell:has(.splash-page) > .topbar,
.shell:has(.auth-wrap) > .topbar { display: none; }
.shell:has(.customer-page) > .topbar { display: none; }

.splash-page,
.auth-wrap,
.customer-page:not(.admin-page) {
  width: min(390px, calc(100% - 28px));
  margin-inline: auto;
}

.splash-page {
  min-height: 100vh;
  padding: 22px 0;
}
.splash-card {
  min-height: calc(100vh - 44px);
  justify-content: center;
  align-content: start;
  padding-top: clamp(54px, 15vh, 126px);
  gap: 11px;
}
.splash-logo {
  width: 88px;
  height: 88px;
  color: #A51646;
}
.splash-page h1 {
  font-size: 2.55rem;
  line-height: 1;
  color: #9F1748;
}
.splash-page p {
  font-size: 1.02rem;
  color: #33242A;
}
.splash-page i { margin: 22px 0 42px; }
.splash-page strong {
  justify-self: start;
  margin-left: 54px;
  font-size: 2.2rem;
  color: #d65f89;
}
.splash-page img {
  align-self: end;
  width: min(260px, 78vw);
  height: 150px;
  margin-top: auto;
  object-position: bottom;
  box-shadow: none;
}
.splash-page .primary-btn,
.splash-page .secondary-btn { display: none; }

.ys-book-logo {
  display: inline-block;
  width: 82px;
  height: 62px;
  color: #A51646;
}
.ys-book-logo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.splash-logo {
  width: 92px;
  height: 74px;
  filter: drop-shadow(0 8px 10px rgba(201,31,93,.12));
}
.auth-brand .ys-book-logo {
  width: 74px;
  height: 58px;
}
.splash-books {
  position: relative;
  width: 250px;
  height: 160px;
  margin-top: 8px;
  display: block;
}
.splash-books b {
  position: absolute;
  left: 50%;
  width: 210px;
  height: 42px;
  border-radius: 8px 12px 12px 8px;
  background: linear-gradient(90deg, #c69b82, #f4d6c5 16%, #fff7ee 20%, #c39a88 100%);
  box-shadow: 0 7px 15px rgba(88,54,46,.15);
}
.splash-books b:nth-child(1) { bottom: 22px; transform: translateX(-48%) rotate(-2deg); background-color: #b98678; }
.splash-books b:nth-child(2) { bottom: 54px; transform: translateX(-52%) rotate(2deg); background: linear-gradient(90deg, #a97868, #efcbbb 16%, #fff7ee 20%, #d9b3a3 100%); }
.splash-books b:nth-child(3) { bottom: 86px; width: 180px; transform: translateX(-49%) rotate(-4deg); background: linear-gradient(90deg, #d9b8a1, #f8deca 18%, #fff8ef 23%, #e6c9b4 100%); }

.auth-wrap {
  min-height: 100vh;
  align-content: start;
  padding-top: clamp(48px, 9vh, 86px);
}
.auth-brand span { font-size: 1.72rem; }
.auth-brand .brand-mark { width: 70px; height: 70px; color: #A51646; }
.auth-card {
  padding: 24px 18px 20px;
  border-radius: 16px;
}
.auth-card h1 { font-size: 1.35rem; }
.auth-card .primary-btn { width: 100%; }
.auth-card .field span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  color: var(--ys-text-primary-token);
  line-height: 1.35;
}
.login-options .check-row { min-height: auto; font-size: .78rem; }

.mobile-home {
  padding-top: 12px;
}
.welcome-block {
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin-bottom: 14px;
}
.welcome-block::after {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8d3df, #fff);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(60,36,48,.1);
}
.welcome-block h1 { font-size: 1.42rem; line-height: 1.05; }
.welcome-block p { font-size: .88rem; }
.memory-hero {
  min-height: 224px;
  margin-top: 0;
  box-shadow: 0 8px 18px rgba(60,36,48,.12);
}
.memory-copy {
  min-height: 224px;
  padding: 18px 18px 16px;
}
.memory-copy h2 {
  max-width: 220px;
  font-size: 1.72rem;
}
.memory-copy p { display: none; }
.memory-copy .mobile-primary {
  min-height: 44px;
  padding-inline: 18px;
  border-radius: 13px;
  font-size: .92rem;
}
.carousel-dots {
  position: relative;
  z-index: 2;
  margin-top: -22px;
  justify-content: center;
}
.mobile-section { margin-top: 18px; }
.mobile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.mobile-section-head h2 {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: .86rem;
  font-weight: 800;
}
.mobile-section-head a {
  color: var(--ys-primary);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}
.home-story-tile {
  flex-basis: 104px;
  min-height: 126px;
  border-radius: 14px;
}
.home-story-tile strong {
  font-size: .82rem;
}
.story-tile-visual {
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  background: #fff;
}
.continue-list { display: grid; gap: 10px; }
.home-project-card {
  position: relative;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px;
  align-items: center;
}
.home-project-card img {
  width: 74px;
  height: 74px;
  border-radius: 10px;
}
.home-project-body h3 {
  margin: 0 0 4px;
  font-size: .92rem;
  line-height: 1.15;
}
.home-project-body .small { margin: 4px 0 0; font-size: .7rem; }
.home-project-card > strong {
  align-self: center;
  font-size: .82rem;
}
.home-project-card .continue-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ys-primary);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
}
.mobile-progress { height: 6px; margin-top: 7px; }
.guide-banner { display: none; }

.mobile-titlebar {
  height: 54px;
  margin-bottom: 2px;
}
.mobile-titlebar h1 {
  font-size: 1.02rem;
  font-family: "Playfair Display", Georgia, serif;
}
.story-choice-list { gap: 10px; }
.story-type-row {
  min-height: 90px;
  grid-template-columns: 78px 34px minmax(0, 1fr);
  border-radius: 14px;
  padding: 8px;
}
.story-type-row img {
  width: 78px;
  height: 78px;
}
.story-type-row .option-icon {
  color: var(--ys-primary);
  font-size: 1.7rem;
}
.story-type-row h3 { font-size: .86rem; }
.story-type-row p { font-size: .72rem; }
.story-type-row em { font-size: .72rem; }

.story-start-page { padding-top: 0; }
.story-start-card {
  border-radius: 16px;
  padding: 0;
}
.story-start-card > img {
  height: 210px;
  border-radius: 16px 16px 0 0;
}
.story-start-body {
  margin: -32px 12px 0;
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(60,36,48,.08);
}
.included-card {
  border-radius: 14px;
}

.interview-card h2 {
  margin-top: 18px;
  font-size: 1.86rem;
}
.interview-card > .muted {
  color: #5d6678;
  line-height: 1.36;
  font-size: .94rem;
}
.answer-field textarea {
  min-height: 144px;
  border-color: #DFE4EA;
}
.question-photo-cta {
  min-height: 78px;
  background: rgba(255,255,255,.72);
  border-color: rgba(201,31,93,.32);
}
.question-actions {
  margin-top: 34px;
  bottom: 84px;
}

.bottom-nav {
  max-width: 430px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 18px 18px 0 0;
}

.admin-page {
  width: min(390px, calc(100% - 28px));
  padding: 0 0 28px;
}
.admin-mobile-header {
  margin-inline: -14px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.admin-mobile-header .brand-app {
  font-size: .98rem;
  color: #fff;
}
.admin-mobile-header .brand-mark {
  width: 28px;
  height: 28px;
  background: var(--ys-primary);
  color: #fff;
}
.admin-mobile-header .secondary-btn {
  min-height: 34px;
  padding: 6px 10px;
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.2);
}
.admin-shell {
  gap: 12px;
}
.admin-sidebar {
  border-radius: 16px;
  padding: 14px;
}
.admin-sidebar h2 { margin-bottom: 10px; }
.admin-nav { gap: 3px; }
.admin-nav-link {
  min-height: 40px;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: .9rem;
}
.admin-topbar {
  padding: 0;
  margin: 0 0 12px;
}
.admin-topbar h1 {
  margin: 0;
  font-size: 1.78rem;
}
.admin-topbar .section-kicker {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ys-text-secondary);
}
.admin-welcome {
  display: block;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.admin-welcome h1,
.admin-welcome p,
.admin-welcome .primary-btn { display: none; }
.admin-main > .grid-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px;
}
.metric-card,
.stat.metric-card {
  min-height: 92px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 4px;
}
.metric-card .metric-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ys-primary);
  background: var(--ys-rose-soft);
}
.metric-card strong {
  font-size: 1.35rem;
  line-height: 1;
}
.admin-block {
  padding: 14px;
  border-radius: 14px;
}
.admin-block h2 {
  font-size: 1rem;
}
.admin-order-card {
  grid-template-columns: minmax(0,1fr) auto;
  padding: 12px;
  border-radius: 12px;
}
.admin-order-card progress,
.admin-order-card .secondary-btn { grid-column: 1 / -1; }
.admin-order-card .secondary-btn {
  display: none;
}
.admin-card-meta { justify-items: end; }
.admin-filter-row {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  flex-wrap: nowrap;
  padding-bottom: 4px;
}
.filter-chip {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .72rem;
}
.filter-chip.active {
  background: var(--ys-primary);
  color: #fff;
  border-color: var(--ys-primary);
}
.order-detail-page {
  width: min(390px, calc(100% - 28px));
}
.order-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 8px;
}
.order-detail-top .secondary-btn {
  border: 0;
  padding: 0;
  min-height: 36px;
}
.order-detail-top .hero-actions { display: none; }
.order-hero {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 10px;
  padding: 10px;
}
.order-hero::before {
  content: "";
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: url("/images/telugucouple.jpeg") center/cover;
}
.order-hero h1 {
  margin: 0 0 2px;
  font-size: 1rem;
  font-family: "Segoe UI", Arial, sans-serif;
}
.order-hero .pill { float: right; }
.order-contact {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.order-detail-page > .grid-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px;
}
.order-detail-page .stat {
  padding: 10px;
  min-height: auto;
}
.order-detail-page .stat strong {
  font-size: .86rem;
}
.order-actions { display: none; }
.notification-composer form {
  gap: 10px;
}
.notification-composer .notification-user-actions,
.notification-user-list,
.notification-composer .grid-2 {
  display: none;
}
.notification-preview-card {
  padding: 12px;
}

.auth-wrap {
  width: min(390px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 44px 0 24px;
  display: grid;
  place-items: stretch center;
  align-content: start;
  gap: 14px;
}
.auth-card {
  width: 100%;
  padding: 20px 18px;
}
.auth-brand .brand-mark {
  width: 64px;
  height: 50px;
  margin: 0 auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.auth-card form { gap: 10px; }
.auth-card .field input {
  min-height: 44px;
  border-radius: 10px;
  font-size: 14px;
}
.login-options {
  margin: 2px 0 4px;
}
.login-options .check-row {
  display: flex;
  gap: 8px;
}
.login-options input {
  width: 16px;
  height: 16px;
}
.auth-provider {
  min-height: 42px;
  border-radius: 999px;
}

@media (max-width: 340px) {
  .splash-page, .auth-wrap, .customer-page:not(.admin-page), .admin-page, .order-detail-page {
    width: calc(100% - 20px);
  }
  .home-story-tile { flex-basis: 96px; }
  .story-type-row { grid-template-columns: 68px 30px minmax(0,1fr); }
  .story-type-row img { width: 68px; height: 68px; }
  .bottom-nav { padding-left: 10px; padding-right: 10px; }
}

/* Strict home alignment pass */

/* Super Admin workspace redesign */
.admin-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fbf6ef;
}

.admin-page .card {
  border-radius: 14px;
  border: 1px solid rgba(88, 62, 48, .1);
  box-shadow: 0 16px 38px rgba(86, 49, 35, .08);
}

.admin-mobile-header {
  display: none;
}

.admin-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  border-radius: 0;
  padding: 20px 16px;
  background: linear-gradient(180deg, #412f2a, #6f3a45);
  color: #fff;
  box-shadow: none;
}

.admin-sidebar h2 {
  color: #fff;
  font-size: .92rem;
  margin: 14px 8px 10px;
}

.admin-nav-link {
  min-height: 42px;
  border-radius: 10px;
  color: rgba(255,255,255,.86);
  background: transparent;
}

.admin-nav-link:hover,
.admin-nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.2);
}

.admin-nav-link.return-link {
  background: rgba(255,255,255,.1);
}

.admin-sidebar input {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.2);
}

.admin-sidebar input::placeholder {
  color: rgba(255,255,255,.64);
}

.admin-side-item {
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}

.admin-side-item span,
.admin-side-item em {
  color: rgba(255,255,255,.72);
}

.admin-side-item.active,
.admin-side-item:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

.admin-main {
  min-width: 0;
  width: 100%;
  padding: 24px;
  display: grid;
  gap: 18px;
}

.admin-topbar {
  min-height: 74px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-topbar h1 {
  font-size: clamp(1.5rem, 2vw, 2.15rem);
}

.admin-topbar-actions {
  min-width: min(540px, 54%);
}

.admin-topbar-actions input,
.admin-search-inline {
  min-height: 44px;
  border-radius: 999px;
}

.admin-welcome {
  padding: 22px;
  background: linear-gradient(135deg, #fffaf5, #f7ecf0);
}

.admin-welcome h1 {
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
}

.admin-table {
  min-width: 900px;
}

.admin-table th {
  white-space: nowrap;
}

.admin-table td small {
  display: block;
  margin-top: 4px;
  color: var(--ys-text-secondary);
}

.compact-btn {
  min-height: 34px;
  padding: 7px 12px;
}

.order-detail-page {
  width: 100% !important;
  max-width: none !important;
  padding: 24px !important;
}

.order-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.order-hero-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 18px;
  align-items: center;
  padding: 22px;
  background: linear-gradient(135deg, #fffaf6, #f5ece4 55%, #edf6f4);
}

.order-hero-compact h1 {
  margin: 10px 0 6px;
  font-size: clamp(1.6rem, 2.4vw, 2.35rem);
  line-height: 1.12;
}

.order-contact {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.72);
}

.order-progress {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 18px;
}

.order-progress-step {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 10px 6px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(88,62,48,.1);
  color: var(--ys-text-secondary);
}

.order-progress-step span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f0e7dd;
  color: #765d50;
  font-size: .78rem;
  font-weight: 800;
}

.order-progress-step.done {
  color: #2f6846;
  background: #f4faf2;
  border-color: #cfe3d0;
}

.order-progress-step.done span {
  background: #dcefd7;
  color: #2f6846;
}

.order-progress-step small {
  text-align: center;
  font-weight: 700;
}

.order-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 18px;
  align-items: start;
}

.order-workspace-main {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.order-side-panel {
  position: sticky;
  top: 18px;
}

.order-actions {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.order-actions h2 {
  margin: 2px 0 0;
  font-size: 1.1rem;
}

.order-actions .primary-btn,
.order-actions .secondary-btn,
.order-actions .ghost-btn {
  width: 100%;
}

.mobile-actions-sheet {
  display: none;
}

.order-tabs {
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(88,62,48,.1);
  overflow-x: auto;
  flex-wrap: nowrap;
}

.order-tabs .tab {
  flex: 0 0 auto;
  border-radius: 10px;
}

.order-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.next-action-card {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 18px;
  background: linear-gradient(135deg, #fff, #f8e8e6);
}

.next-action-card h2 {
  margin: 0;
  font-size: 1.35rem;
}

.story-chapter-list {
  display: grid;
  gap: 12px;
}

.story-chapter summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
}

.story-chapter summary em {
  color: var(--ys-text-secondary);
  font-style: normal;
  font-weight: 700;
}

.story-question-list.compact {
  margin-top: 14px;
}

.story-question-list.compact .story-question-card {
  box-shadow: none;
  border-radius: 12px;
}

.order-tab-toolbar {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.order-gallery {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.order-gallery .photo-tile {
  border-radius: 12px;
}

.order-drafts-grid {
  align-items: start;
}

.stacked-form {
  display: grid;
  gap: 10px;
}

@media (min-width: 1440px) {
  .admin-shell {
    grid-template-columns: 264px minmax(0, 1fr);
  }

  .admin-main,
  .order-detail-page {
    padding: 30px !important;
  }

  .order-workspace {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .admin-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .admin-main,
  .order-detail-page {
    padding: 18px !important;
  }

  .admin-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-topbar-actions {
    width: 100%;
    min-width: 0;
  }

  .order-workspace {
    grid-template-columns: 1fr;
  }

  .order-side-panel {
    position: static;
  }

  .order-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .admin-page {
    min-height: 100vh;
    background: #fbf6ef;
  }

  .admin-mobile-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 12px 14px;
    border-radius: 0;
    color: #fff;
    background: linear-gradient(135deg, #412f2a, #6f3a45);
  }

  .admin-mobile-header .brand-app {
    color: #fff;
  }

  .admin-shell {
    display: block;
    min-height: auto;
  }

  .admin-sidebar {
    display: none;
    position: fixed;
    z-index: 40;
    inset: 58px 12px auto 12px;
    height: min(78vh, 680px);
    max-height: min(78vh, 680px);
    border-radius: 16px;
  }

  .admin-sidebar.open {
    display: block;
  }

  .admin-main {
    padding: 14px;
    gap: 14px;
  }

  .admin-topbar {
    padding: 14px;
    align-items: stretch;
    flex-direction: column;
  }

  .admin-topbar h1 {
    font-size: 1.45rem;
  }

  .admin-topbar-actions {
    width: 100%;
    min-width: 0;
  }

  .admin-topbar-actions .icon-btn,
  .admin-topbar-actions .admin-avatar {
    display: none;
  }

  .admin-table-wrap {
    display: none;
  }

  .admin-order-cards {
    display: grid;
  }

  .admin-main > .grid-4,
  .grid.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid.grid-2,
  .grid.grid-3 {
    grid-template-columns: 1fr !important;
  }

  .order-detail-page {
    padding: 14px !important;
  }

  .order-detail-top {
    align-items: stretch;
    flex-direction: column;
  }

  .order-detail-top .hero-actions {
    display: flex;
    overflow-x: auto;
  }

  .order-hero-compact {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .order-hero-compact h1 {
    font-size: 1.45rem;
  }

  .order-progress {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .order-progress-step {
    min-width: 112px;
  }

  .order-workspace {
    display: block;
  }

  .order-side-panel {
    display: none;
  }

  .mobile-actions-sheet {
    display: block;
    margin: 0 0 14px;
  }

  .mobile-actions-sheet summary {
    min-height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--ys-primary);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
  }

  .mobile-actions-sheet .order-actions {
    margin-top: 10px;
  }

  .order-overview-grid {
    grid-template-columns: 1fr;
  }

  .order-tabs {
    margin-bottom: 12px;
  }

  .order-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mobile-home.page.customer-page {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 14px calc(112px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.home-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  margin-bottom: 18px;
}

.home-header-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.home-header-copy h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ys-text-main);
  white-space: normal;
}

.home-header-copy p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ys-text-secondary);
}

.home-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 0;
}

.home-icon-btn,
.home-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.home-icon-btn {
  position: relative;
  border: 1px solid #f0e3e7;
  background: #fff;
  color: var(--ys-primary);
  padding: 0;
}

.home-avatar {
  border: 2px solid #fff;
  background: linear-gradient(135deg, #f8d3df, #fff4f7);
  color: var(--ys-primary-dark);
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(60,36,48,.1);
}

.welcome-block,
.welcome-block::after {
  all: unset;
}

.mobile-home .memory-hero {
  width: 100%;
  aspect-ratio: 1.45 / 1;
  min-height: 0;
  height: auto;
  margin: 0 0 24px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.mobile-home .memory-hero__image,
.mobile-home .memory-hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mobile-home .memory-hero__image img {
  object-fit: cover;
}

.mobile-home .memory-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 28px;
  z-index: 2;
  min-height: 0;
  padding: 0;
  display: block;
}

.mobile-home .memory-copy h2 {
  max-width: 230px;
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.04;
}

.mobile-home .memory-copy .mobile-primary {
  width: auto;
  min-width: 190px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 14px;
}

.mobile-home .carousel-dots {
  display: none;
}

.mobile-home .mobile-section {
  margin-top: 0;
  margin-bottom: 28px;
}

.mobile-home .memory-hero + .mobile-section {
  margin-top: 0;
}

.mobile-home .mobile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  margin: 0 0 12px;
}

.mobile-home .mobile-section-head h2 {
  margin: 0;
  min-width: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-home .mobile-section-head a {
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

.mobile-home .story-tile-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.mobile-home .story-tile-row::-webkit-scrollbar {
  display: none;
}

.mobile-home .home-story-tile {
  flex: 0 0 108px;
  min-width: 108px;
  min-height: 136px;
  height: 136px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 12px 8px;
  gap: 0;
  border-radius: 14px;
}

.mobile-home .story-tile-visual {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  margin: 0 0 10px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 26px;
}

.mobile-home .home-story-tile strong {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 700;
}

.mobile-home .continue-list {
  display: grid;
  gap: 12px;
}

.mobile-home .home-project-card,
.my-story-list .home-project-card {
  min-height: 108px;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
}

.mobile-home .home-project-card img,
.my-story-list .home-project-card img {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 10px;
  object-fit: cover;
}

.mobile-home .home-project-body,
.my-story-list .home-project-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mobile-home .home-project-body h3,
.my-story-list .home-project-body h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;
}

.mobile-home .status-badge,
.my-story-list .status-badge {
  align-self: flex-start;
  min-height: 24px;
  height: 24px;
  padding: 0 10px;
  margin-top: 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.mobile-home .mobile-progress,
.my-story-list .mobile-progress {
  height: 5px;
  margin-top: 8px;
  border-radius: 999px;
  background: #eee3e6;
}

.mobile-home .mobile-progress span,
.my-story-list .mobile-progress span {
  background: var(--ys-primary);
}

.mobile-home .home-project-body .small,
.my-story-list .home-project-body .small {
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.2;
}

.mobile-home .story-card-footer,
.my-story-list .story-card-footer {
  flex: 0 0 82px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.mobile-home .story-card-footer strong,
.my-story-list .story-card-footer strong {
  font-size: 13px;
  line-height: 1;
  color: var(--ys-primary);
}

.mobile-home .continue-btn,
.my-story-list .continue-btn {
  position: static;
  min-height: 34px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ys-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.mobile-home .guide-banner {
  display: none;
}

.bottom-nav {
  height: calc(72px + env(safe-area-inset-bottom));
  padding: 6px 12px calc(8px + env(safe-area-inset-bottom));
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.bottom-nav__item {
  flex: 1 1 20%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  line-height: 1;
}

.bottom-nav__item .icon {
  width: 22px;
  height: 22px;
  font-size: 20px;
}

.bottom-nav__item.create {
  justify-content: flex-start;
}

.bottom-nav__item.create .icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  margin-top: -18px;
}

.bottom-nav__item.create span:last-child {
  margin-top: -2px;
}

@media (min-width: 390px) {
  .mobile-home .home-story-tile {
    flex-basis: 112px;
    min-width: 112px;
  }
}

@media (max-width: 340px) {
  .mobile-home.page.customer-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .home-header-copy h1 {
    font-size: 22px;
  }
  .home-header-copy p {
    font-size: 12px;
  }
  .home-icon-btn,
  .home-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .home-header-actions { gap: 8px; }
  .mobile-home .mobile-section-head { gap: 8px; }
  .mobile-home .mobile-section-head h2 { font-size: 13px; }
  .mobile-home .mobile-section-head a { font-size: 12px; }
  .mobile-home .home-story-tile {
    flex-basis: 88px;
    min-width: 88px;
    height: 132px;
    min-height: 132px;
    padding-inline: 6px;
  }
  .mobile-home .story-tile-visual { width: 42px; height: 42px; flex-basis: 42px; }
  .mobile-home .home-story-tile strong { font-size: 12px; }
  .mobile-home .story-card-footer,
  .my-story-list .story-card-footer {
    flex-basis: 74px;
  }
  .mobile-home .continue-btn,
  .my-story-list .continue-btn {
    padding-inline: 10px;
  }
}

/* Absolute final overrides: keep Account/Dark Mode above legacy media-query leakage. */
.appearance-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.profile-row {
  grid-template-columns: 42px minmax(0, 1fr) auto 16px;
}

.profile-row em {
  justify-self: end;
}

.profile-row .account-row-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-row .account-row-copy strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.profile-row .account-row-copy small {
  min-width: 0;
  text-align: right;
}

.appearance-row .account-row-copy {
  display: grid;
  gap: 2px;
}

.appearance-row .account-row-copy strong {
  white-space: nowrap;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .shell {
  background: var(--ys-shell-token) !important;
  color: var(--ys-text-primary-token) !important;
}

.shell:has(.customer-page) > .app-header {
  display: none !important;
}

html[data-theme="dark"] .customer-page h1,
html[data-theme="dark"] .customer-page h2,
html[data-theme="dark"] .customer-page h3,
html[data-theme="dark"] .customer-page strong,
html[data-theme="dark"] .account-profile h2,
html[data-theme="dark"] .account-section h2,
html[data-theme="dark"] .mobile-titlebar h1 {
  color: var(--ys-text-primary-token) !important;
}

html[data-theme="dark"] .customer-page p,
html[data-theme="dark"] .customer-page small,
html[data-theme="dark"] .customer-page .muted {
  color: var(--ys-text-secondary-token) !important;
}

html[data-theme="dark"] .customer-page .card,
html[data-theme="dark"] .customer-page .home-project-card,
html[data-theme="dark"] .customer-page .home-story-tile,
html[data-theme="dark"] .customer-page .story-type-row,
html[data-theme="dark"] .customer-page .story-start-card,
html[data-theme="dark"] .customer-page .included-card,
html[data-theme="dark"] .customer-page .notification-item,
html[data-theme="dark"] .customer-page .account-profile,
html[data-theme="dark"] .customer-page .profile-list,
html[data-theme="dark"] .customer-page .appearance-row,
html[data-theme="dark"] .customer-page .empty-state,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .notification-panel {
  background: var(--ys-surface-token) !important;
  border-color: var(--ys-border-token) !important;
  color: var(--ys-text-primary-token) !important;
  box-shadow: var(--ys-shadow-token) !important;
}

html[data-theme="dark"] .customer-page .account-profile {
  background:
    radial-gradient(circle at top right, rgba(230, 58, 120, .18), transparent 42%),
    var(--ys-surface-secondary-token) !important;
}

html[data-theme="dark"] .customer-page .profile-row,
html[data-theme="dark"] .customer-page .appearance-row {
  background: var(--ys-surface-token) !important;
  border-color: var(--ys-border-token) !important;
}

html[data-theme="dark"] .customer-page input,
html[data-theme="dark"] .customer-page textarea,
html[data-theme="dark"] .customer-page select,
html[data-theme="dark"] .auth-wrap input {
  background: var(--ys-input-token) !important;
  border-color: var(--ys-border-token) !important;
  color: var(--ys-text-primary-token) !important;
}

html[data-theme="dark"] .bottom-nav {
  background: var(--ys-nav-token) !important;
  border-color: var(--ys-border-token) !important;
}

/* Final mobile alignment pass for Account and Questions. Keep at EOF. */
.account-page.customer-page {
  padding: 0 10px calc(168px + env(safe-area-inset-bottom)) !important;
}

.account-page .mobile-titlebar {
  height: auto !important;
  padding: 16px 0 12px !important;
  text-align: left !important;
  grid-template-columns: 1fr !important;
}

.account-page .mobile-titlebar h1 {
  text-align: left !important;
  font-size: 26px !important;
  line-height: 1.05 !important;
}

.account-profile {
  min-height: 0 !important;
  margin-bottom: 18px !important;
  padding: 22px 16px 18px !important;
  border-radius: 14px !important;
}

.account-profile .account-avatar,
.account-avatar {
  width: 78px !important;
  height: 78px !important;
  flex-basis: 78px !important;
  margin-bottom: 12px !important;
}

.account-profile h2 {
  margin: 6px 0 6px !important;
  font-size: 21px !important;
  line-height: 1.08 !important;
}

.account-profile p {
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}

.account-profile .secondary-btn {
  min-height: 32px !important;
  padding: 6px 17px !important;
}

.account-section {
  margin-top: 16px !important;
}

.account-section h2 {
  margin: 0 0 7px !important;
  line-height: 1.1 !important;
}

.appearance-row,
.profile-row {
  min-height: 54px !important;
  padding: 7px 12px !important;
}

.profile-row {
  grid-template-columns: 42px minmax(0, 1fr) 24px 12px !important;
  gap: 10px !important;
}

.profile-row .account-row-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
}

.profile-row .account-row-copy strong,
.profile-row .account-row-copy small {
  min-width: 0 !important;
  text-align: left !important;
}

.profile-row .account-row-copy strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.profile-row .account-row-copy small {
  white-space: normal !important;
  line-height: 1.18 !important;
}

.shell:has(.question-page) .bottom-nav {
  display: none !important;
}

.workspace-page.question-page {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: 0 14px calc(28px + env(safe-area-inset-bottom)) !important;
}

.question-page .question-actions {
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  margin-top: 46px !important;
}

/* Fixed question action rail. Keep at EOF. */
.question-page .question-actions {
  position: fixed !important;
  left: 50% !important;
  width: min(calc(100% - 28px), 402px) !important;
  transform: translateX(-50%) !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding-top: 14px !important;
}

.workspace-page.question-page {
  padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
}