:root {
  /* Exact Color System */
  --bg-main: #FFFFFF;
  --bg-secondary: #F7F8FA;
  --bg-card: #FFFFFF;
  
  --primary-purple: #26333D;
  --primary-blue: #26333D;
  --soft-purple: #EFF2F2;
  --soft-blue: #EEF5FF;

  --text-primary: #182235;
  --text-secondary: #667085;
  --text-muted: #98A2B3;
  --border-color: #EAECF0;

  --success: #16B364;
  --warning: #F5A524;
  --error: #F04438;
  --star-gold: #FFB800;

  /* Geometry & Rhythm */
  --padding-screen-h: 20px;
  --spacing-section: 24px;
  --radius-card: 18px;
  --radius-card-sm: 15px;
  --radius-button: 15px;
  --radius-input: 14px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: auto;
}

input, textarea {
  user-select: text;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #F1F3F7;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 8px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Gradients */
.bg-primary-gradient {
  background: #26333D;
}

.text-primary-gradient {
  color: #26333D;
}

/* Subtle, Soft Premium Shadows (No dark, heavy shadows) */
.card-soft-shadow {
  background-color: #FFFFFF;
  border: 1px solid #E7EAF0;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 12px rgba(24, 34, 53, 0.035);
}

.card-soft-shadow-sm {
  background-color: #FFFFFF;
  border: 1px solid #E7EAF0;
  border-radius: var(--radius-card-sm);
  box-shadow: 0 1px 5px rgba(24, 34, 53, 0.025);
}

.glow-balance-card {
  box-shadow: 0 8px 24px rgba(38, 51, 61, 0.12);
}

/* Device Containers */
.device-container {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.pixel-shell {
  width: 412px;
  height: 892px;
  background: #FFFFFF;
  border-radius: 48px;
  border: 12px solid #1E293B;
  box-shadow: 0 22px 65px -25px rgba(24, 34, 53, 0.3);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fullscreen-shell {
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  background: #FFFFFF;
  border-radius: 0px;
  border: none;
  box-shadow: 0 8px 35px rgba(24, 34, 53, 0.12);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tablet-shell {
  width: 768px;
  height: 940px;
  background: #FFFFFF;
  border-radius: 36px;
  border: 14px solid #1E293B;
  box-shadow: 0 22px 65px -25px rgba(24, 34, 53, 0.3);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* System Status Bar & Camera Hole */
.android-status-bar {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: #FFFFFF;
  z-index: 40;
}

.camera-hole {
  width: 13px;
  height: 13px;
  background: #0F172A;
  border-radius: 50%;
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
}

.android-home-pill {
  width: 72px;
  height: 4px;
  background: #CBD5E1;
  border-radius: 10px;
  margin: 6px auto 5px auto;
}

/* Microinteractions & Animations */
.tap-subtle {
  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}
.tap-subtle:active {
  transform: scale(0.97);
}

/* Clean Line Icons Customization */
[data-lucide] {
  stroke-width: 1.85;
}

/* Hide scrollbar for carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Bottom Nav Styling */
.bottom-nav-surface {
  background: #FFFFFF;
  border-top: 0;
  height: 68px;
  box-shadow: none;
}

.preview-header {
  background: #FFFFFF;
  border: 1px solid #E7EAF0;
  color: #182235;
  box-shadow: 0 2px 12px rgba(24, 34, 53, 0.035);
}

.preview-switch {
  background: #F4F5F8;
  border: 1px solid #E7EAF0;
}

#screen-content {
  background: #FCFCFD;
}

.auth-mode .bottom-nav-surface { display: none !important; }
.auth-mode #app-viewport,
.auth-mode #screen-content { background: #fff; }
#screen-content.auth-content { display: flex; padding: 0 !important; }
.auth-screen {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 17px;
  background: #fcfcfd;
}
.auth-main { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 25px; padding: 26px 0; }
.auth-eyebrow { color: #667085; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.auth-intro h1 { max-width: 330px; margin-top: 9px; color: #182235; font-size: 30px; font-weight: 750; line-height: 1.2; letter-spacing: -.04em; }
.auth-intro > p:last-child { max-width: 330px; margin-top: 10px; color: #667085; font-size: 12px; line-height: 1.65; }
.auth-preview { padding: 14px; border: 1px solid #e5e8ee; border-radius: 19px; background: #f6f7f9; }
.auth-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 12px; color: #667085; font-size: 10px; font-weight: 750; letter-spacing: .1em; }
.auth-preview-header svg { color: #98a2b3; }
.auth-preview-card { display: flex; min-height: 73px; align-items: center; gap: 11px; padding: 13px; border: 1px solid #e5e8ee; border-radius: 14px; background: #fff; box-shadow: 0 2px 6px rgba(24,34,53,.025); }
.auth-preview-card + .auth-preview-card { margin-top: 9px; }
.auth-preview-icon { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border: 1px solid #e5e8ee; border-radius: 10px; background: #f8f9fb; color: #344054; }
.auth-preview-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.auth-preview-copy strong { color: #182235; font-size: 12px; font-weight: 750; }
.auth-preview-copy small { color: #667085; font-size: 10px; line-height: 1.4; }
.auth-preview-arrow { flex: none; color: #98a2b3; }
.auth-preview-order { display: grid; grid-template-columns: 38px minmax(0,1fr) 16px; column-gap: 11px; }
.auth-preview-progress { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 20px; background: #e8ebef; }
.auth-preview-progress span { display: block; width: 62%; height: 100%; border-radius: inherit; background: #475467; }
.auth-actions { display: flex; flex-direction: column; align-items: stretch; }
.auth-google-button { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: center; gap: 10px; border: 1px solid #273142; border-radius: 13px; background: #273142; color: #fff; font-size: 14px; font-weight: 700; transition: background-color .2s, transform .2s; }
.auth-google-button:hover { background: #182235; }
.auth-google-button:focus-visible { outline: 2px solid #475467; outline-offset: 2px; }
.auth-google-button svg { flex: none; }
.auth-google-button svg path { fill: currentColor; }
.auth-connection-note { margin: 11px 0 0; color: #98a2b3; font-size: 10px; line-height: 1.45; text-align: center; }
.auth-google-button:active { transform: scale(.99); }
@media (max-height: 720px) {
  .auth-screen { padding-top: 16px; padding-bottom: 12px; }
  .auth-main { gap: 16px; padding: 12px 0; }
  .auth-intro h1 { font-size: 26px; }
  .auth-preview { padding: 10px; }
  .auth-preview-header { padding-bottom: 8px; }
  .auth-preview-card { min-height: 63px; padding: 9px 11px; }
  .auth-preview-card + .auth-preview-card { margin-top: 7px; }
}
@media (max-width: 370px) {
  .auth-screen { padding-left: 16px; padding-right: 16px; }
  .auth-intro h1 { font-size: 26px; }
}

#screen-content h1,
#screen-content h2,
#screen-content h3,
#screen-content h4 {
  letter-spacing: -0.025em;
}

#screen-content [class~="text-[9px]"],
#screen-content [class~="text-[10px]"] {
  font-size: 11px !important;
}

#screen-content button,
.bottom-nav-item {
  cursor: pointer;
}

#screen-content button:focus-visible,
.bottom-nav-item:focus-visible,
.preview-switch button:focus-visible {
  outline: 2px solid #26333D;
  outline-offset: 2px;
}

#screen-content .auth-google-button:focus-visible { outline-color: #475467; }

.bottom-nav-item {
  min-height: 52px;
  gap: 3px;
}

.bottom-nav-item[data-tab="services"] svg {
  stroke-width: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================== */
/* ADVANCED ANIMATIONS & MICRO-INTERACTIONS           */
/* ================================================== */

@keyframes progressShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.progress-animated {
  background: #26333D;
  animation: none;
}

@keyframes radarRipple {
  0% { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(2.4); opacity: 0; }
}

.radar-ring {
  position: relative;
}

.radar-ring::after {
  content: none;
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  background-color: rgba(115, 87, 255, 0.5);
  animation: radarRipple 1.8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  pointer-events: none;
}

@keyframes bounceInCheck {
  0% { transform: scale(0.2); opacity: 0; }
  60% { transform: scale(1.15); }
  85% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-bounce-check {
  animation: bounceInCheck 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120px) rotate(360deg); opacity: 0; }
}

.confetti-particle {
  display: none;
}

@media (max-width: 600px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    padding: 0 !important;
    background: #FCFCFD;
  }

  header.preview-header,
  .camera-hole,
  .android-status-bar,
  .android-home-pill {
    display: none !important;
  }

  main {
    width: 100%;
    height: 100dvh;
    padding-bottom: 0 !important;
  }

  #container-app.pixel-shell,
  #container-app.fullscreen-shell,
  #container-app.tablet-shell {
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Custom Interactive Slider */
input[type=range].custom-slider {
  -webkit-appearance: none;
  appearance: none;
  background: #EAECF0;
  height: 6px;
  border-radius: 999px;
  outline: none;
}

input[type=range].custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #26333D;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(115, 87, 255, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease-out;
}

input[type=range].custom-slider::-webkit-slider-thumb:active {
  transform: scale(1.22);
}

/* Notification Badge Dot (Header Bell) */
.notification-badge-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  background-color: #26333D;
  border-radius: 9999px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 3px rgba(115, 87, 255, 0.35);
  pointer-events: none;
}

/* Clear, consistent controls for the order flow */
.flow-back,
.flow-primary,
.flow-secondary,
.flow-link {
  min-height: 48px;
}

.flow-back {
  width: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7eaf0;
  border-radius: 13px;
  background: #fff;
  color: #182235;
}

.flow-primary,
.flow-secondary {
  border-radius: 13px;
  padding: 11px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}

.flow-primary { background: #26333d; color: #fff; }
.flow-primary:hover { background: #4338ae; }
.flow-primary:disabled { opacity: .6; cursor: wait; }
.flow-secondary { background: #f7f8fc; border: 1px solid #e7eaf0; color: #334155; }
.flow-link { color: #26333d; font-size: 12px; font-weight: 650; padding: 0 4px; }
.flow-input {
  width: 100%;
  min-height: 50px;
  border: 1px solid #dfe3ec;
  border-radius: 13px;
  background: #fff;
  padding: 12px 14px;
  color: #182235;
  font-size: 14px;
  outline: none;
}
.flow-input:focus { border-color: #26333d; box-shadow: 0 0 0 3px rgba(38,51,61,.12); }
.flow-label { display: block; color: #182235; font-size: 13px; font-weight: 650; }
.flow-help { color: #667085; font-size: 12px; line-height: 1.5; }
.flow-overline { display: block; color: #667085; font-size: 11px; font-weight: 600; }
.flow-error { border: 1px solid #f5c7c2; background: #fff4f2; color: #a52a21; border-radius: 11px; padding: 11px 13px; font-size: 12px; }
.flow-check { display: flex; align-items: flex-start; gap: 11px; color: #334155; font-size: 12px; line-height: 1.5; }
.flow-check input { width: 20px; height: 20px; flex: none; margin-top: 0; accent-color: #26333d; }
.order-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px 0; }
.order-step { display: flex; align-items: center; gap: 6px; color: #98a2b3; font-size: 11px; font-weight: 600; white-space: nowrap; }
.order-step-number { width: 23px; height: 23px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef0f4; color: #667085; font-size: 11px; }
.order-step.is-current { color: #26333d; }
.order-step.is-current .order-step-number { background: #26333d; color: #fff; }
.order-step.is-complete { color: #334155; }
.order-step.is-complete .order-step-number { background: #e9e6ff; color: #26333d; }
.service-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid #e7eaf0; padding-top: 12px; color: #182235; font-size: 11px; }
.service-facts span { line-height: 1.45; }
.service-facts strong { display: block; color: #667085; font-weight: 500; margin-bottom: 2px; }
.status-timeline { border-left: 1px solid #dfe3ec; margin-left: 7px; padding-left: 20px; }
.status-timeline-item { position: relative; display: flex; min-height: 40px; padding-bottom: 13px; }
.status-timeline-item:last-child { min-height: 20px; padding-bottom: 0; }
.status-timeline-dot { position: absolute; width: 12px; height: 12px; left: -27px; top: 2px; border: 3px solid #fff; border-radius: 50%; background: #26333d; box-shadow: 0 0 0 1px #26333d; }

/* Orders and notifications */
.page-heading-row { display: flex; align-items: center; gap: 12px; }
.page-title { color: #182235; font-size: 24px; line-height: 1.2; font-weight: 700; }
.page-subtitle { margin-top: 5px; color: #667085; font-size: 12px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 1px 12px; }
.section-heading h2 { color: #182235; font-size: 15px; font-weight: 700; }
.section-heading > span { color: #98a2b3; font-size: 11px; white-space: nowrap; }
.text-action { color: #26333d; font-size: 12px; font-weight: 650; min-height: 44px; padding: 0 2px; white-space: nowrap; }
.notification-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.segmented-control { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #e7eaf0; border-radius: 13px; background: #f6f7f9; }
.segmented-control button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 9px; color: #667085; font-size: 12px; font-weight: 600; white-space: nowrap; }
.segmented-control button.is-selected { color: #182235; background: #fff; box-shadow: 0 1px 5px rgba(24,34,53,.07); }
.segmented-control button span { color: #98a2b3; font-size: 11px; }
.segmented-control button.is-selected span { color: #26333d; }
.notification-list { display: flex; flex-direction: column; gap: 9px; }
.notification-item { display: flex; width: 100%; align-items: flex-start; gap: 12px; min-height: 96px; padding: 15px; border: 1px solid #e7eaf0; border-radius: 16px; background: #fff; text-align: left; box-shadow: 0 2px 8px rgba(24,34,53,.025); transition: border-color .15s, background-color .15s; }
.notification-item:hover { border-color: #cbc8ed; }
.notification-item.is-unread { border-color: #d9d5f6; background: #faf9ff; }
.notification-icon { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; }
.notification-icon.tone-wallet { background: #eff2f2; color: #26333d; }
.notification-icon.tone-order { background: #eef4ff; color: #3565ad; }
.notification-icon.tone-support { background: #eef7f5; color: #20806f; }
.notification-copy { display: block; min-width: 0; flex: 1; }
.notification-meta { display: flex; justify-content: space-between; gap: 8px; color: #98a2b3; font-size: 10px; font-weight: 600; }
.notification-meta time { flex: none; font-weight: 500; }
.notification-copy strong { display: block; margin-top: 5px; color: #182235; font-size: 13px; line-height: 1.35; }
.notification-body { display: block; margin-top: 4px; color: #667085; font-size: 12px; line-height: 1.5; }
.unread-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #26333d; margin-top: 16px; }
.empty-panel { display: flex; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; padding: 28px 22px; border: 1px dashed #dce0e8; border-radius: 17px; background: #fff; text-align: center; }
.empty-panel-icon { width: 43px; height: 43px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 13px; border-radius: 13px; background: #eff2f2; color: #26333d; }
.empty-panel h1, .empty-panel h2, .empty-panel h3 { color: #182235; font-size: 15px; font-weight: 700; }
.empty-panel p { max-width: 260px; margin-top: 6px; color: #667085; font-size: 12px; line-height: 1.5; }
.order-search-wrap { position: relative; }
.order-search-wrap > svg { position: absolute; left: 14px; top: 15px; color: #98a2b3; }
.order-search-wrap input { width: 100%; min-height: 48px; padding: 10px 14px 10px 42px; border: 1px solid #e0e4eb; border-radius: 13px; background: #fff; color: #182235; font-size: 13px; outline: none; }
.order-search-wrap input:focus { border-color: #26333d; box-shadow: 0 0 0 3px rgba(38,51,61,.11); }
.order-search-wrap input::placeholder { color: #98a2b3; }
.order-filter-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.order-filter-tabs::-webkit-scrollbar { display: none; }
.order-filter-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 43px; padding: 0 13px; border: 1px solid #e7eaf0; border-radius: 11px; background: #fff; color: #667085; font-size: 12px; font-weight: 600; white-space: nowrap; }
.order-filter-tabs button span { font-size: 10px; color: #98a2b3; }
.order-filter-tabs button.is-selected { border-color: #26333d; background: #26333d; color: #fff; }
.order-filter-tabs button.is-selected span { color: #d8e1e2; }
.order-list { display: flex; flex-direction: column; gap: 11px; }
.orders-page { display: flex; flex-direction: column; gap: 20px; padding: 8px 0 32px; }
.orders-page-heading .page-title { font-size: 25px; letter-spacing: -.035em; }
.orders-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 15px 7px; border: 1px solid #e3e9e8; border-radius: 18px; background: #fff; box-shadow: 0 5px 20px rgba(25,40,48,.035); }
.orders-overview > div { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.orders-overview > div + div { border-left: 1px solid #edf0ef; }
.orders-overview span { color: #6b787f; font-size: 10px; line-height: 1.4; }
.orders-overview strong { color: #202b33; font-size: 22px; font-weight: 750; line-height: 1.15; letter-spacing: -.035em; }
.orders-tools { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px solid #e3e9e8; border-radius: 18px; background: #fff; }
.orders-tools .order-search-wrap input { background: #f8faf9; border-color: #e6ebea; }
.orders-page .order-filter-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow: visible; padding: 0; }
.orders-page .order-filter-tabs button { width: 100%; min-width: 0; min-height: 40px; justify-content: space-between; padding: 0 12px; border-radius: 10px; background: #f8faf9; }
.orders-page .order-filter-tabs button.is-selected { background: #26333d; }
.orders-page .order-filter-tabs button span { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 6px; background: #edf1ef; color: #5e6c72; font-size: 10px; }
.orders-page .order-filter-tabs button.is-selected span { background: rgba(255,255,255,.16); color: #fff; }
.orders-list-heading { margin-bottom: 11px; }
.orders-card { display: block; width: 100%; padding: 16px; border: 1px solid #e3e9e8; border-radius: 19px; background: #fff; color: #202b33; text-align: left; box-shadow: 0 5px 20px rgba(25,40,48,.035); transition: border-color .15s, box-shadow .15s; }
.orders-card:hover { border-color: #a8b6b9; box-shadow: 0 7px 22px rgba(25,40,48,.065); }
.orders-card:focus-visible { outline: 2px solid #527965; outline-offset: 2px; }
.orders-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #68757d; font-size: 11px; line-height: 1.4; }
.orders-card-meta > span { color: #344b43; font-weight: 700; white-space: nowrap; }
.orders-card-meta time { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders-card-service { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: 13px; }
.orders-card-title { display: block; flex: 1; min-width: 0; }
.orders-card-title strong { display: block; overflow: hidden; color: #202b33; font-size: 14px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.orders-card-title small { display: block; overflow: hidden; margin-top: 2px; color: #68757d; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.orders-card-chevron { flex: none; color: #9ba7aa; }
.orders-card-status { display: block; margin-top: 13px; }
.orders-card-target { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 13px; padding: 10px 11px; border-radius: 10px; background: #f7f9f8; color: #586a70; font-size: 11px; line-height: 1.4; }
.orders-card-target svg { flex: none; color: #87939a; }
.orders-card-target span { display: block; overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.orders-card-delivery { display: block; margin-top: 15px; }
.orders-card-delivery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #68757d; font-size: 11px; line-height: 1.4; }
.orders-card-delivery-head strong { color: #202b33; font-size: 12px; font-weight: 700; white-space: nowrap; }
.orders-card-delivery-head b { color: #344b43; font-size: 12px; font-weight: 700; }
.orders-card-delivery .order-progress-track { height: 7px; margin-top: 8px; }
.orders-card.tone-success .order-progress-track > span { background: #238054; }
.orders-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #edf0ef; color: #68757d; font-size: 11px; }
.orders-card-foot > span:first-child { flex: 1; min-width: 0; }
.orders-card-foot strong { flex: none; color: #202b33; font-size: 12px; font-weight: 700; white-space: nowrap; }
.orders-card-open { display: inline-flex; width: 28px; height: 28px; flex: none; align-items: center; justify-content: center; border: 1px solid #e3e9e8; border-radius: 8px; color: #344b43; }
.order-card { display: block; width: 100%; padding: 15px; border: 1px solid #e7eaf0; border-radius: 16px; background: #fff; color: #182235; text-align: left; box-shadow: 0 2px 10px rgba(24,34,53,.035); transition: border-color .15s, transform .15s; }
.order-card:hover { border-color: #b9c9be; transform: translateY(-1px); }
.order-card-top { display: flex; align-items: flex-start; gap: 9px; }
.order-card-icon { width: 35px; height: 35px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #eff2f2; color: #26333d; }
.order-card-title { display: block; min-width: 0; flex: 1; padding-top: 1px; }
.order-card-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.4; }
.order-card-title small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #98a2b3; font-size: 10px; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.status-badge .status-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.status-badge.tone-active { background: #eff2f2; color: #26333d; }
.status-badge.tone-pending { background: #f3f4f6; color: #667085; }
.status-badge.tone-success { background: #ebf8f1; color: #16804d; }
.status-badge.tone-danger { background: #fff0ef; color: #b43c32; }
.order-card-target { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 13px 0 14px; color: #667085; font-size: 12px; }
.order-card-target svg { flex: none; color: #98a2b3; }
.order-card-target span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-card-progress { display: block; padding-top: 12px; border-top: 1px solid #edf0f3; }
.order-card-progress > span:first-child { display: flex; justify-content: space-between; gap: 8px; color: #667085; font-size: 11px; }
.order-card-progress strong { color: #334155; font-size: 11px; font-weight: 650; white-space: nowrap; }
.order-progress-track { display: block; height: 6px; overflow: hidden; margin-top: 9px; border-radius: 99px; background: #edf0f5; }
.order-progress-track > span { display: block; height: 100%; border-radius: inherit; background: #26333d; }
.order-card.tone-success .order-progress-track > span { background: #16804d; }
.order-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; color: #667085; font-size: 11px; }
.order-card-footer > span:last-child { display: inline-flex; align-items: center; gap: 5px; color: #26333d; font-weight: 650; white-space: nowrap; }
.order-detail-notice { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid #e7eaf0; border-radius: 12px; background: #f7f8fc; color: #667085; font-size: 11px; line-height: 1.45; }
.order-detail-notice svg { color: #26333d; }
.order-detail-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding-top: 14px; border-top: 1px solid #edf0f3; }
.order-detail-metrics > div { padding: 11px 8px; border-radius: 10px; background: #f7f8fa; text-align: center; }
.order-detail-metrics span { display: block; color: #667085; font-size: 10px; }
.order-detail-metrics strong { display: block; margin-top: 4px; color: #182235; font-size: 14px; }

/* Locally bundled platform marks */
.platform-logo {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e7eaf0;
  border-radius: 12px;
  background: #f4f5f8;
}
.platform-logo img { width: 22px; height: 22px; display: block; }
.platform-logo--sm { width: 36px; height: 36px; border-radius: 10px; }
.platform-logo--sm img { width: 18px; height: 18px; }
.platform-logo--instagram { background: linear-gradient(135deg, #6d39c7 0%, #ca2a83 55%, #f5a444 100%); border-color: transparent; }
.platform-logo--tiktok,
.platform-logo--x,
.platform-logo--threads { background: #16191d; border-color: #16191d; }
.platform-logo--youtube { background: #fff0f2; border-color: #ffe4e8; }
.platform-logo--facebook { background: #edf4ff; border-color: #dceaff; }
.platform-logo--spotify { background: #eafaef; border-color: #d6f2de; }
.platform-logo--telegram { background: #ebf8ff; border-color: #d7effc; }

/* Category choices keep the full title and description readable on narrow phones. */
.platform-category-header { min-width: 0; }
.platform-category-header > div:last-child { min-width: 0; }
.platform-category-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 82px;
  padding: 14px 15px;
  border: 1px solid #e7eaf0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(24, 34, 53, .035);
  color: #182235;
  text-align: left;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.platform-category-card:hover { border-color: #b9c9be; background: #f8faf9; }
.platform-category-card:focus-visible { outline: 2px solid #26333d; outline-offset: 2px; }
.platform-category-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eff2f2;
  color: #26333d;
}
.platform-category-copy { display: block; min-width: 0; }
.platform-category-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.platform-category-copy > span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.platform-category-arrow {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f7f8fa;
  color: #98a2b3;
  transition: background-color .2s, color .2s;
}
.platform-category-card:hover .platform-category-arrow { background: #eff2f2; color: #26333d; }

.service-list-heading { margin-top: 2px; }
.platform-list { display: flex; flex-direction: column; gap: 9px; }
.platform-list-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 14px;
  border: 1px solid #e7eaf0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(24, 34, 53, .03);
  text-align: left;
  transition: border-color .2s, background-color .2s;
}
.platform-list-card:hover { border-color: #b9c9be; background: #f8faf9; }
.platform-list-copy { display: block; flex: 1; min-width: 0; }
.platform-list-copy strong { display: block; color: #182235; font-size: 14px; line-height: 1.3; font-weight: 700; }
.platform-list-copy > span { display: block; margin-top: 4px; color: #667085; font-size: 12px; line-height: 1.4; }
.platform-list-trailing { display: flex; flex: none; align-items: center; gap: 7px; color: #98a2b3; }
.platform-list-trailing small { color: #667085; font-size: 11px; font-weight: 600; white-space: nowrap; }
@media (max-width: 370px) {
  .platform-list-card { gap: 10px; padding: 12px; }
  .platform-list-trailing { gap: 4px; }
  .platform-list-trailing small { font-size: 10px; }
}

/* Focused cards shared by the service, order, wallet and support screens */
.service-page-note { color: #667085; font-size: 12px; line-height: 1.55; }
.service-option,
.detail-panel,
.history-panel,
.ticket-detail-panel,
.ticket-conversation { border: 1px solid #e4e7ee; border-radius: 18px; background: #fff; box-shadow: 0 3px 14px rgba(24,34,53,.035); }
.service-option { padding: 18px; }
.service-option-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.service-option-heading h2 { color: #182235; font-size: 16px; line-height: 1.35; font-weight: 700; }
.service-option-heading p { margin-top: 5px; color: #667085; font-size: 12px; line-height: 1.5; }
.service-recommended { flex: none; padding: 5px 8px; border-radius: 7px; background: #eff2f2; color: #26333d; font-size: 10px; font-weight: 700; }
.service-option-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }
.service-option-info > div { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; border-radius: 11px; background: #f7f8fa; }
.service-option-icon { color: #26333d; flex: none; }
.service-option-info small { display: block; color: #667085; font-size: 10px; line-height: 1.4; }
.service-option-info strong { display: block; margin-top: 2px; color: #182235; font-size: 11px; line-height: 1.35; font-weight: 650; }
.service-option-range { display: flex; justify-content: space-between; gap: 8px; padding: 14px 0; color: #667085; font-size: 11px; }
.service-option-range strong { color: #334155; font-weight: 650; text-align: right; }
.service-option-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid #edf0f3; }
.service-option-footer > div { min-width: 0; }
.service-option-footer > div span,
.service-option-footer > div small { display: block; color: #667085; font-size: 10px; }
.service-option-footer > div strong { display: block; margin: 2px 0; color: #182235; font-size: 17px; font-weight: 750; line-height: 1.3; }
.service-option-footer .flow-primary { min-width: 104px; }

.balance-panel { padding: 18px; border: 1px solid #e4e7ee; border-radius: 18px; background: #fff; box-shadow: 0 3px 14px rgba(24,34,53,.035); }
.balance-panel-top { display: flex; align-items: center; justify-content: space-between; color: #667085; font-size: 12px; }
.balance-panel-symbol { display: inline-flex; width: 35px; height: 35px; align-items: center; justify-content: center; border-radius: 10px; background: #eff2f2; color: #26333d; }
.balance-panel-value { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.balance-panel-value strong { color: #182235; font-size: 33px; line-height: 1.3; letter-spacing: -.04em; font-weight: 750; }
.balance-panel-value span { color: #667085; font-size: 12px; }
.balance-panel > p { margin: 2px 0 16px; color: #667085; font-size: 11px; }
.balance-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 15px; border-top: 1px solid #edf0f3; }
.balance-panel-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: #26333d; font-size: 12px; font-weight: 650; }
.balance-panel-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 15px; border-radius: 11px; background: #26333d; color: #fff; font-size: 12px; font-weight: 700; }

/* Star activity */
.activity-page { display: flex; flex-direction: column; gap: 24px; padding-bottom: 32px; }
.activity-page-heading { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.activity-page-heading > div { min-width: 0; }
.activity-page-heading h1 { color: #182235; font-size: 21px; font-weight: 750; letter-spacing: -.035em; line-height: 1.25; }
.activity-page-heading p { margin-top: 3px; color: #667085; font-size: 12px; line-height: 1.4; }
.activity-back-button { display: inline-flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border: 1px solid #e4e7ee; border-radius: 12px; background: #fff; color: #334155; }
.activity-back-button:hover { border-color: #c8c5ed; background: #f8f7ff; }
.activity-balance-card { padding: 19px; border: 1px solid #26333d; border-radius: 20px; background: #26333d; box-shadow: 0 10px 24px rgba(24,34,53,.1); }
.activity-balance-top { display: flex; align-items: center; justify-content: space-between; color: #c5cfd2; font-size: 12px; }
.activity-balance-icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.1); color: #e8f2ec; }
.activity-balance-value { display: flex; align-items: baseline; gap: 8px; margin: 3px 0 17px; }
.activity-balance-value strong { color: #fff; font-size: 36px; line-height: 1.2; font-weight: 750; letter-spacing: -.045em; }
.activity-balance-value span { color: #c5cfd2; font-size: 13px; }
.activity-balance-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); }
.activity-balance-footer > span { color: #c5cfd2; font-size: 11px; line-height: 1.35; }
.activity-add-button { display: inline-flex; min-height: 44px; flex: none; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 11px; background: #fff; color: #26333d; font-size: 12px; font-weight: 700; }
.activity-add-button:hover { background: #eef2f0; }
.activity-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.activity-summary-item { display: flex; min-width: 0; min-height: 112px; flex-direction: column; align-items: flex-start; padding: 14px; border: 1px solid #e4e9e8; border-radius: 16px; background: #fff; box-shadow: 0 3px 14px rgba(24,34,53,.03); }
.activity-summary-icon { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; background: #eff3f1; color: #344b43; }
.activity-summary-label { display: block; margin-top: 9px; color: #667085; font-size: 11px; line-height: 1.35; }
.activity-summary-item strong { display: block; margin-top: 2px; color: #182235; font-size: 20px; font-weight: 750; line-height: 1.25; letter-spacing: -.03em; }
.activity-summary-item strong small { color: #667085; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.activity-adjustment { margin-top: 9px; color: #667085; font-size: 11px; line-height: 1.4; }
.activity-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.activity-section-heading h2 { color: #182235; font-size: 16px; font-weight: 700; line-height: 1.3; }
.activity-section-heading p { margin-top: 3px; color: #667085; font-size: 11px; line-height: 1.4; }
.activity-count { display: inline-flex; min-width: 27px; height: 27px; flex: none; align-items: center; justify-content: center; padding: 0 7px; border-radius: 8px; background: #f2f3f7; color: #667085; font-size: 11px; font-weight: 700; }
.activity-transactions { display: flex; flex-direction: column; gap: 9px; list-style: none; }
.activity-transaction { min-width: 0; padding: 16px; border: 1px solid #e4e7ee; border-radius: 16px; background: #fff; box-shadow: 0 3px 14px rgba(24,34,53,.035); }
.activity-transaction-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.activity-transaction-icon { display: inline-flex; width: 38px; height: 38px; flex: none; align-items: center; justify-content: center; border-radius: 11px; background: #eff2f2; color: #26333d; }
.activity-transaction.is-credit .activity-transaction-icon { background: #eaf8f0; color: #16804d; }
.activity-transaction-info { flex: 1; min-width: 0; padding-top: 1px; }
.activity-transaction-info strong { display: block; color: #182235; font-size: 13px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.activity-transaction-info time { display: block; margin-top: 5px; color: #667085; font-size: 11px; line-height: 1.4; }
.activity-transaction-amount { display: flex; flex: none; flex-direction: column; align-items: flex-end; padding-top: 1px; color: #182235; font-size: 16px; font-weight: 750; line-height: 1.25; white-space: nowrap; }
.activity-transaction.is-credit .activity-transaction-amount { color: #16804d; }
.activity-transaction-amount small { margin-top: 3px; color: #667085; font-size: 11px; font-weight: 500; }
.activity-transaction-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; padding-top: 11px; border-top: 1px solid #edf0f3; color: #667085; font-size: 11px; line-height: 1.4; }
.activity-transaction-type { color: #485564; font-weight: 600; overflow-wrap: anywhere; }
.activity-balance-change { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; color: #667085; }
.activity-balance-change svg { color: #98a2b3; }
.activity-transaction-footer strong { color: #334155; font-weight: 700; }
.activity-transaction-reference { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; color: #87939d; font-size: 10px; overflow-wrap: anywhere; }
.activity-transaction-reference span { flex: 1; min-width: 140px; }
.activity-transaction-reference button { display: inline-flex; align-items: center; gap: 3px; padding: 2px 0; color: #26333d; font-size: 10px; font-weight: 700; }
.activity-transaction-reference button:hover { text-decoration: underline; }
.activity-empty { display: flex; flex-direction: column; align-items: center; padding: 28px 16px; border: 1px solid #e4e7ee; border-radius: 16px; background: #fff; text-align: center; }
.activity-empty > span { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: #eff2f2; color: #26333d; }
.activity-empty strong { margin-top: 11px; color: #182235; font-size: 13px; }
.activity-empty p { margin-top: 4px; color: #667085; font-size: 11px; }

.order-summary-card { display: block; width: 100%; padding: 16px; border: 1px solid #e4e7ee; border-radius: 17px; background: #fff; box-shadow: 0 3px 14px rgba(24,34,53,.035); color: #182235; text-align: left; transition: border-color .15s, transform .15s; }
.order-summary-card:hover { border-color: #b9c9be; transform: translateY(-1px); }
.order-summary-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.order-summary-title { display: block; min-width: 0; flex: 1; }
.order-summary-title strong { display: block; color: #182235; font-size: 14px; line-height: 1.35; font-weight: 700; overflow-wrap: break-word; }
.order-summary-title small { display: block; margin-top: 3px; color: #667085; font-size: 11px; line-height: 1.4; }
.order-summary-chevron { flex: none; color: #98a2b3; }
.order-summary-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; margin-top: 14px; color: #667085; font-size: 11px; line-height: 1.4; }
.order-summary-target { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-top: 13px; padding: 11px 0; border-top: 1px solid #edf0f3; color: #667085; font-size: 11px; }
.order-summary-target > span { flex: none; }
.order-summary-target strong { overflow: hidden; min-width: 0; color: #334155; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.order-summary-progress { display: block; margin-top: 14px; padding-top: 13px; border-top: 1px solid #edf0f3; }
.order-summary-target + .order-summary-progress { margin-top: 0; }
.order-summary-progress > span:first-child { display: flex; justify-content: space-between; gap: 8px; color: #667085; font-size: 12px; }
.order-summary-progress strong { color: #334155; font-weight: 650; white-space: nowrap; }
.order-summary-card.tone-success .order-progress-track > span { background: #16804d; }
.order-summary-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; color: #667085; font-size: 12px; }
.order-summary-foot > span:last-child { display: inline-flex; align-items: center; gap: 5px; color: #26333d; font-weight: 650; white-space: nowrap; }

.detail-panel { padding: 18px; }
.detail-panel-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.detail-panel-head > div { flex: 1; min-width: 0; }
.detail-panel-head strong { display: block; color: #182235; font-size: 15px; line-height: 1.4; }
.detail-panel-head span.break-all { display: block; margin-top: 3px; color: #667085; font-size: 12px; line-height: 1.4; }
.detail-panel-tier { display: block; margin-top: 3px; color: #68757d; font-size: 11px; line-height: 1.4; }
.detail-panel-target { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 11px 12px; border-radius: 11px; background: #f7f9f8; }
.detail-panel-target svg { flex: none; margin-top: 3px; color: #87939a; }
.detail-panel-target span { display: block; min-width: 0; }
.detail-panel-target small { display: block; color: #68757d; font-size: 10px; line-height: 1.35; }
.detail-panel-target strong { display: block; margin-top: 2px; color: #202b33; font-size: 12px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.detail-panel-status { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 17px; padding-top: 15px; border-top: 1px solid #edf0f3; color: #667085; font-size: 11px; }
.detail-delivery { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 22px; }
.detail-delivery span { display: block; margin-bottom: 4px; color: #667085; font-size: 11px; }
.detail-delivery strong { color: #182235; font-size: 25px; line-height: 1.2; letter-spacing: -.03em; }
.detail-delivery strong small { color: #667085; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.detail-delivery b { color: #26333d; font-size: 13px; }
.detail-panel > .order-progress-track { height: 8px; margin-top: 12px; }
.detail-panel-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf0f3; }
.detail-panel-facts > div { min-width: 0; padding: 12px; border-radius: 11px; background: #f7f8fa; }
.detail-panel-facts span { display: block; color: #667085; font-size: 11px; }
.detail-panel-facts strong { display: block; margin-top: 4px; color: #182235; font-size: 13px; }
.history-panel { padding: 18px; }
.history-list { margin-top: 7px; }
.history-list li { display: flex; align-items: flex-start; gap: 12px; position: relative; min-height: 46px; }
.history-list li:not(:last-child)::before { content: ''; position: absolute; top: 16px; bottom: -1px; left: 6px; width: 1px; background: #dfe3ec; }
.history-marker { display: block; flex: none; width: 13px; height: 13px; margin-top: 3px; border: 3px solid #fff; border-radius: 50%; background: #a9a3d8; box-shadow: 0 0 0 1px #a9a3d8; }
.history-list li.is-latest .history-marker { background: #26333d; box-shadow: 0 0 0 1px #26333d; }
.history-entry { display: flex; flex: 1; justify-content: space-between; gap: 8px; padding-bottom: 17px; }
.history-entry strong { color: #334155; font-size: 12px; font-weight: 650; }
.history-entry time { color: #98a2b3; font-size: 11px; white-space: nowrap; }
.preview-caption { display: flex; align-items: flex-start; gap: 8px; color: #667085; font-size: 11px; line-height: 1.55; }

/* Quiet, readable context beneath customer forms and conversations. */
.context-note.context-note { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-width: 0; margin: 0; padding: 12px 13px; border: 1px solid #dfe8e2; border-radius: 14px; background: #edf3ef; color: #52675b; text-align: start; }
.context-note > .context-note-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; background: #e0eae3; color: #587561; }
.context-note-icon > svg, .context-note-icon > i { width: 15px; height: 15px; flex: none; }
.context-note > .context-note-copy { flex: 1; min-width: 0; align-self: center; font-size: 12px; line-height: 1.65; color: inherit; overflow-wrap: anywhere; }
.context-note.draft-context-note { background: #f0f4f1; }
.context-note[data-state="error"] { border-color: #eadcc8; background: #faf5ec; color: #856433; }
.context-note[data-state="error"] > .context-note-icon { background: #f1e6d3; color: #856433; }

.shop-balance { display: flex; align-items: baseline; gap: 6px; padding: 16px 17px; border: 1px solid #e4e7ee; border-radius: 15px; background: #f7f8fa; }
.shop-balance span { flex: 1; color: #667085; font-size: 12px; }
.shop-balance strong { color: #182235; font-size: 21px; letter-spacing: -.03em; }
.shop-balance small { color: #667085; font-size: 11px; }
.package-list { display: flex; flex-direction: column; gap: 8px; }
.package-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 1px solid #e4e7ee; border-radius: 14px; background: #fff; text-align: left; transition: border-color .15s, background-color .15s; }
.package-option.is-selected { border-color: #26333d; background: #f5f8f6; box-shadow: 0 0 0 2px rgba(38,51,61,.08); }
.package-radio { display: inline-flex; width: 19px; height: 19px; flex: none; border: 1.5px solid #c6cad4; border-radius: 50%; background: #fff; }
.package-option.is-selected .package-radio { border: 5px solid #26333d; }
.package-copy { display: block; flex: 1; min-width: 0; }
.package-copy strong { display: block; color: #182235; font-size: 14px; font-weight: 700; }
.package-copy small { display: block; margin-top: 3px; color: #667085; font-size: 11px; line-height: 1.4; }
.package-price { color: #182235; font-size: 13px; font-weight: 700; white-space: nowrap; }
.shop-total { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 16px; border: 1px solid #e4e7ee; border-radius: 14px; background: #fff; }
.shop-total > span:first-child { color: #667085; font-size: 11px; }
.shop-total strong { grid-column: 1; color: #182235; font-size: 16px; }
.shop-total > span:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #182235; font-size: 15px; font-weight: 700; }
.shop-note { color: #667085; font-size: 11px; text-align: center; }

.ticket-new-button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border-radius: 11px; background: #eff2f2; color: #26333d; font-size: 12px; font-weight: 700; }
.support-home { display: flex; flex-direction: column; gap: 20px; padding: 8px 0 32px; }
.support-home-heading h1 { color: #202b33; font-size: 25px; font-weight: 750; line-height: 1.2; letter-spacing: -.035em; }
.support-home-heading p { margin-top: 5px; color: #68757d; font-size: 12px; line-height: 1.45; }
.support-start-card { padding: 19px; border-radius: 20px; background: #26333d; color: #fff; box-shadow: 0 10px 24px rgba(24,34,53,.1); }
.support-start-icon { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 11px; background: rgba(255,255,255,.11); color: #e7f0eb; }
.support-start-card h2 { margin-top: 14px; font-size: 20px; font-weight: 750; line-height: 1.25; letter-spacing: -.03em; }
.support-start-card p { max-width: 310px; margin-top: 6px; color: #c5cfd2; font-size: 12px; line-height: 1.55; }
.support-start-button { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 0 14px; border-radius: 11px; background: #fff; color: #26333d; font-size: 12px; font-weight: 750; }
.support-start-button:hover { background: #eef2f0; }
.support-start-hint { display: block; margin-top: 9px; color: #b9c7c7; font-size: 10px; text-align: center; }
.support-shortcuts { overflow: hidden; border: 1px solid #e3e9e8; border-radius: 18px; background: #fff; box-shadow: 0 5px 20px rgba(25,40,48,.035); }
.support-shortcuts button { display: flex; width: 100%; min-height: 69px; align-items: center; gap: 11px; padding: 12px 14px; text-align: left; }
.support-shortcuts button + button { border-top: 1px solid #edf0ef; }
.support-shortcuts button:hover { background: #f8faf9; }
.support-shortcut-icon { display: inline-flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: #eff3f1; color: #344b43; }
.support-shortcuts button > span:nth-child(2) { display: block; flex: 1; min-width: 0; }
.support-shortcuts strong, .support-shortcuts small { display: block; }
.support-shortcuts strong { color: #202b33; font-size: 13px; font-weight: 700; }
.support-shortcuts small { margin-top: 3px; color: #68757d; font-size: 11px; }
.support-shortcuts button > svg { flex: none; color: #9ba7aa; }
.support-recent .section-heading button { color: #344b43; font-size: 11px; font-weight: 700; }
.support-recent-card { display: flex; width: 100%; align-items: center; gap: 10px; padding: 15px; border: 1px solid #e3e9e8; border-radius: 16px; background: #fff; text-align: left; }
.support-recent-card > span { display: block; flex: 1; min-width: 0; }
.support-recent-card strong, .support-recent-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-recent-card strong { color: #202b33; font-size: 12px; font-weight: 700; }
.support-recent-card small { margin-top: 5px; color: #68757d; font-size: 11px; }
.support-recent-card > svg { flex: none; color: #344b43; }
.support-search { display: flex; min-height: 46px; align-items: center; gap: 9px; padding: 0 10px 0 14px; border: 1px solid #e3e9e8; border-radius: 13px; background: #fff; }
.support-search > svg { flex: none; color: #87939a; }
.support-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #202b33; font-size: 12px; outline: 0; }
.support-search button { display: inline-flex; width: 30px; height: 30px; flex: none; align-items: center; justify-content: center; border-radius: 8px; background: #eff3f1; color: #344b43; }
.ticket-create-page { display: flex; flex-direction: column; gap: 21px; padding: 4px 0 30px; }
.ticket-create-heading { display: flex; align-items: center; gap: 12px; }
.ticket-create-heading > div { min-width: 0; }
.ticket-create-heading h1 { color: #202b33; font-size: 21px; font-weight: 750; line-height: 1.3; letter-spacing: -.03em; }
.ticket-create-heading p { margin-top: 3px; color: #68757d; font-size: 11px; line-height: 1.4; }
.ticket-create-section-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ticket-step { display: inline-flex; width: 25px; height: 25px; flex: none; align-items: center; justify-content: center; border-radius: 8px; background: #26333d; color: #fff; font-size: 11px; font-weight: 700; }
.ticket-create-section-head h2 { color: #202b33; font-size: 14px; font-weight: 750; line-height: 1.35; }
.ticket-create-section-head p { margin-top: 2px; color: #68757d; font-size: 11px; line-height: 1.4; }
.ticket-issue-options { display: flex; flex-direction: column; gap: 8px; }
.ticket-issue-option.is-selected { border-color: #789883; background: #f4f8f5; }
.ticket-issue-option:focus-within { outline: 2px solid #527965; outline-offset: 2px; }
.ticket-issue-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ticket-selected-order { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 13px; border: 1px solid #dfe8e2; border-radius: 15px; background: #fff; }
.ticket-selected-copy { display: block; flex: 1; min-width: 0; }
.ticket-selected-copy strong, .ticket-selected-copy small, .ticket-selected-copy em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-selected-copy strong { color: #202b33; font-size: 12px; font-weight: 700; }
.ticket-selected-copy small { margin-top: 3px; color: #68757d; font-size: 10px; }
.ticket-selected-copy em { margin-top: 5px; color: #526e5d; font-size: 10px; font-style: normal; }
.ticket-order-change { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 0 12px; border: 1px solid #e3e9e8; border-radius: 11px; background: #f8faf9; color: #344b43; font-size: 12px; font-weight: 700; }
.ticket-order-change:hover { border-color: #9fb8a7; }
.ticket-order-change > span { display: inline-flex; align-items: center; gap: 4px; color: #68757d; font-size: 10px; font-weight: 500; }
.ticket-choice-mark { display: inline-flex; width: 19px; height: 19px; flex: none; align-items: center; justify-content: center; border: 1px solid #bac6c1; border-radius: 50%; background: #fff; color: transparent; }
.is-selected > .ticket-choice-mark { border-color: #456b51; background: #456b51; color: #fff; }
.ticket-general-icon { display: inline-flex; width: 35px; height: 35px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: #eff3f1; color: #344b43; }
.ticket-form-error[hidden] { display: none; }
.ticket-picker-backdrop { position: absolute; inset: 0; display: flex; align-items: flex-end; background: rgba(21,32,39,.46); pointer-events: auto; }
.ticket-picker-sheet { display: flex; width: 100%; max-height: min(84%, 740px); flex-direction: column; overflow: hidden; padding: 9px 15px max(19px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #f9fbf9; box-shadow: 0 -14px 35px rgba(18,32,26,.13); }
.ticket-picker-sheet .service-sheet-handle { margin-bottom: 15px; }
.ticket-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 2px 13px; }
.ticket-picker-heading h2 { color: #202b33; font-size: 20px; font-weight: 750; letter-spacing: -.035em; }
.ticket-picker-heading p { margin-top: 3px; color: #68757d; font-size: 11px; line-height: 1.4; }
.ticket-picker-heading button { display: inline-flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border: 1px solid #e3e9e8; border-radius: 10px; background: #fff; color: #344b43; }
.ticket-picker-search { display: flex; min-height: 44px; flex: none; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #dfe8e2; border-radius: 11px; background: #fff; color: #87939a; }
.ticket-picker-search:focus-within { border-color: #789883; box-shadow: 0 0 0 3px rgba(82,121,101,.12); }
.ticket-picker-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #202b33; font-size: 12px; }
.ticket-picker-general { display: flex; width: 100%; flex: none; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid #e3e9e8; border-radius: 12px; background: #fff; text-align: left; }
.ticket-picker-general.is-selected { border-color: #789883; background: #f4f8f5; }
.ticket-picker-general > span:nth-child(2) { display: block; flex: 1; min-width: 0; }
.ticket-picker-general strong, .ticket-picker-general small { display: block; }
.ticket-picker-general strong { color: #202b33; font-size: 12px; font-weight: 700; }
.ticket-picker-general small { margin-top: 3px; color: #68757d; font-size: 10px; }
.ticket-picker-general > svg { flex: none; color: #526e5d; }
.ticket-picker-results { display: flex; min-height: 0; flex-direction: column; gap: 8px; overflow-y: auto; margin-top: 10px; padding: 1px 2px 3px; }
.ticket-picker-count { flex: none; color: #68757d; font-size: 10px; font-weight: 650; }
.ticket-picker-option { display: flex; width: 100%; min-width: 0; flex: none; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e3e9e8; border-radius: 13px; background: #fff; text-align: left; }
.ticket-picker-option.is-selected, .ticket-picker-option:hover { border-color: #789883; background: #f4f8f5; }
.ticket-picker-option > span:nth-child(2) { display: block; flex: 1; min-width: 0; }
.ticket-picker-option strong, .ticket-picker-option small, .ticket-picker-option em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-picker-option strong { color: #202b33; font-size: 12px; font-weight: 700; }
.ticket-picker-option small { margin-top: 3px; color: #68757d; font-size: 10px; }
.ticket-picker-option em { margin-top: 5px; color: #526e5d; font-size: 10px; font-style: normal; }
.ticket-picker-option > svg { flex: none; color: #526e5d; }
.ticket-picker-empty { padding: 22px 12px; border: 1px dashed #dfe8e2; border-radius: 12px; color: #68757d; font-size: 11px; line-height: 1.45; text-align: center; }
.ticket-picker-more { display: flex; width: 100%; min-height: 41px; flex: none; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dfe8e2; border-radius: 11px; background: #fff; color: #344b43; font-size: 11px; font-weight: 700; }
.ticket-picker-more span { color: #68757d; font-weight: 500; }
.ticket-issue-option { position: relative; display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border: 1px solid #e3e9e8; border-radius: 12px; background: #fff; cursor: pointer; }
.ticket-issue-option > span:nth-child(2) { color: #202b33; font-size: 12px; font-weight: 600; }
.ticket-message-label { display: block; margin-bottom: 7px; color: #202b33; font-size: 11px; font-weight: 700; }
.ticket-create-section textarea { display: block; width: 100%; min-height: 122px; padding: 13px; border: 1px solid #dfe8e1; border-radius: 13px; background: #fff; color: #202b33; font: inherit; font-size: 12px; line-height: 1.55; resize: vertical; outline: 0; }
.ticket-create-section textarea:focus { border-color: #789883; box-shadow: 0 0 0 3px rgba(82,121,101,.12); }
.ticket-create-section textarea::placeholder { color: #98a2a4; }
.ticket-purchase-reference { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; padding: 12px; border: 1px solid #dfe8e2; border-radius: 12px; background: #f8faf9; }
.ticket-purchase-reference[hidden] { display: none; }
.ticket-purchase-reference label { color: #202b33; font-size: 11px; font-weight: 700; }
.ticket-purchase-reference label small { margin-left: 5px; color: #87939a; font-weight: 500; }
.ticket-purchase-reference input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #dfe8e2; border-radius: 9px; background: #fff; color: #202b33; font-size: 12px; outline: 0; }
.ticket-purchase-reference input:focus { border-color: #789883; box-shadow: 0 0 0 3px rgba(82,121,101,.12); }
.ticket-purchase-reference p { color: #87939a; font-size: 10px; line-height: 1.4; }
.ticket-context-hint { margin-top: 9px; color: #526e5d; font-size: 11px; line-height: 1.45; }
.ticket-message-help { margin-top: 7px; color: #87939a; font-size: 10px; line-height: 1.4; }
.ticket-form-error { margin-top: 9px; color: #b43c32; font-size: 11px; line-height: 1.4; }
.ticket-create-submit { min-height: 50px; width: 100%; }
.ticket-preview-note { margin-top: -10px; color: #87939a; font-size: 10px; line-height: 1.45; text-align: center; }
.ticket-list-card { display: block; width: 100%; padding: 16px; border: 1px solid #e4e7ee; border-radius: 17px; background: #fff; box-shadow: 0 3px 14px rgba(24,34,53,.035); text-align: left; }
.ticket-list-card:hover { border-color: #a8b6b9; }
.ticket-list-card:focus-visible, .support-recent-card:focus-visible { outline: 2px solid #527965; outline-offset: 2px; }
.ticket-list-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-list-top > span:first-child { color: #26333d; font-size: 11px; font-weight: 700; }
.ticket-status { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border-radius: 7px; background: #f3f4f6; color: #556070; font-size: 10px; font-weight: 650; white-space: nowrap; }
.ticket-status.is-waiting { background: #f7f3e9; color: #8a6331; }
.ticket-status.is-replied { background: #e9f3ed; color: #376454; }
.ticket-status.is-closed { background: #f0f2f2; color: #68757d; }
.ticket-list-card > strong { display: block; margin-top: 11px; color: #182235; font-size: 14px; }
.ticket-list-context { display: block; margin-top: 4px; color: #667085; font-size: 11px; }
.ticket-list-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #edf0f3; color: #98a2b3; font-size: 10px; }
.ticket-list-footer > span:last-child { display: inline-flex; align-items: center; gap: 4px; color: #26333d; font-size: 11px; font-weight: 650; white-space: nowrap; }
.ticket-detail-panel { padding: 18px; }
.ticket-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #667085; font-size: 11px; }
.ticket-detail-panel h2 { margin-top: 14px; color: #182235; font-size: 17px; font-weight: 700; }
.ticket-related-order { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 16px; padding: 11px; border: 1px solid #e7eaf0; border-radius: 11px; background: #f7f8fa; text-align: left; }
.ticket-related-order > span:nth-child(2) { flex: 1; min-width: 0; }
.ticket-related-order small { display: block; color: #667085; font-size: 10px; }
.ticket-related-order strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; color: #182235; font-size: 12px; }
.ticket-related-order em { display: block; overflow: hidden; margin-top: 3px; color: #68757d; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.ticket-related-order > svg { flex: none; color: #26333d; }
.ticket-general-context { display: flex; align-items: center; gap: 8px; margin-top: 15px; padding: 11px 12px; border-radius: 10px; background: #f7f9f8; color: #68757d; font-size: 11px; }
.ticket-general-context svg { flex: none; color: #344b43; }
.ticket-detail-reference { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; padding: 11px 12px; border: 1px solid #e3e9e8; border-radius: 10px; background: #f8faf9; }
.ticket-detail-reference span { color: #68757d; font-size: 10px; }
.ticket-detail-reference strong { color: #202b33; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.ticket-conversation { padding: 18px; }
.ticket-messages { display: flex; flex-direction: column; gap: 12px; }
.ticket-message { max-width: 91%; padding: 13px; border: 1px solid #e7eaf0; border-radius: 13px; background: #f7f8fa; }
.ticket-message.is-user { align-self: flex-end; border-color: #dce6df; background: #eff2f2; }
.ticket-message.is-support { align-self: flex-start; }
.ticket-message-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ticket-message-meta strong { color: #26333d; font-size: 11px; }
.ticket-message-meta time { color: #98a2b3; font-size: 10px; }
.ticket-message p { margin-top: 7px; color: #334155; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ticket-composer { display: flex; flex-direction: column; align-items: flex-end; padding: 16px; border: 1px solid #e3e9e8; border-radius: 17px; background: #fff; }
.ticket-composer label { display: block; align-self: flex-start; margin-bottom: 9px; color: #202b33; font-size: 12px; font-weight: 700; }
.ticket-composer textarea { display: block; width: 100%; min-height: 86px; padding: 12px 13px; border: 1px solid #dfe8e1; border-radius: 11px; background: #f8faf9; color: #202b33; font: inherit; font-size: 12px; line-height: 1.5; resize: vertical; outline: none; }
.ticket-composer textarea:focus { border-color: #789883; box-shadow: 0 0 0 3px rgba(82,121,101,.12); }
.ticket-composer button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; padding: 0 14px; border-radius: 10px; background: #26333d; color: #fff; font-size: 12px; font-weight: 700; }

.target-feedback { min-height: 16px; color: #667085; font-size: 11px; line-height: 1.45; }
.target-feedback.is-error { color: #b42318; }
.target-feedback.is-valid { color: #16804d; }
.flow-input[aria-invalid="true"] { border-color: #e59e98; }
.saved-targets { padding-top: 4px; }
.saved-targets > span { display: block; margin-bottom: 8px; color: #667085; font-size: 11px; font-weight: 600; }
.saved-targets > div { display: flex; flex-wrap: wrap; gap: 7px; }
.saved-target-chip { display: inline-flex; align-items: center; max-width: 100%; min-height: 38px; border: 1px solid #e4e7ee; border-radius: 10px; background: #f7f8fa; }
.saved-target-chip button:first-child { overflow: hidden; max-width: 235px; padding: 8px 10px; color: #334155; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.saved-target-chip button:last-child { display: inline-flex; width: 34px; height: 36px; align-items: center; justify-content: center; border-left: 1px solid #e4e7ee; color: #667085; }
.order-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.order-detail-actions > button { min-width: 0; }
.order-detail-actions > .order-action-note { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0; padding: 11px 13px; border: 1px solid #dfe8e2; border-radius: 12px; background: #edf3ef; color: #61756b; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; text-align: start; }
.order-action-note > svg, .order-action-note > i { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: #6a8575; }
.order-action-note > span { min-width: 0; }
.order-request-link { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: space-between; min-height: 47px; padding: 0 14px; border: 1px solid #e4e7ee; border-radius: 12px; background: #fff; color: #26333d; font-size: 12px; font-weight: 650; }

@media (max-width: 370px) {
  .service-option-info { grid-template-columns: 1fr; }
  .service-recommended { max-width: 95px; overflow: hidden; text-overflow: ellipsis; }
  .order-summary-head .status-badge,
  .detail-panel-head .status-badge { padding: 4px 6px; font-size: 9px; }
  .package-option { gap: 9px; padding: 12px; }
  .package-price { font-size: 12px; }
}

/* Shared mobile visual language */
:root {
  --text-primary: #202b33;
  --text-secondary: #68757d;
  --text-muted: #87939a;
  --border-color: #e4e9e9;
}
#screen-content { background: #f8faf9; }
.bottom-nav-surface { height: 70px; border: 0; box-shadow: none; background: #f8faf9; }
.bottom-nav-item { position: relative; color: #87939a; }
.bottom-nav-item[aria-current="page"] { color: #26333d; }
.bottom-nav-item[aria-current="page"]::before { content: none; }
.bottom-nav-item[aria-current="page"] span { color: #26333d !important; }
.card-soft-shadow, .card-soft-shadow-sm,
.platform-list-card, .order-summary-card, .detail-panel,
.history-panel, .ticket-list-card { box-shadow: 0 5px 20px rgba(25, 40, 48, .035); border-color: #e3e9e8; }
.platform-list-card:hover, .order-summary-card:hover,
.card-soft-shadow:hover { border-color: #a8b6b9; }
.platform-list-card, .order-summary-card, .ticket-list-card { border-radius: 20px; }
.status-badge.tone-active { background: #eaf1ee; color: #376454; }
.status-badge.tone-success { background: #e8f4ed; color: #238054; }
.order-progress-track { background: #e7ecec; }
.order-progress-track > span { background: #527965; }
.order-summary-card.tone-success .order-progress-track > span { background: #238054; }
.order-filter-tabs button { border-radius: 100px; border-color: #e3e9e8; }
.order-filter-tabs button.is-selected { background: #26333d; border-color: #26333d; }
.order-filter-tabs button.is-selected span { color: #d8e1e2; }
.order-summary-foot > span:last-child, .balance-panel-link,
.ticket-list-footer > span:last-child { color: #26333d; }

/* The login artwork is built from CSS so the HTML stays light in WebView. */
.auth-mode #app-viewport, .auth-mode #screen-content { background: #f8faf9; }
.auth-screen { padding: 23px 24px 20px; background: #f8faf9; }
.auth-main { justify-content: center; gap: 20px; padding: 22px 0 16px; }
.auth-eyebrow { color: #6c7c79; font-size: 10px; letter-spacing: .19em; }
.auth-intro h1 { max-width: 340px; margin-top: 13px; color: #202b33; font-size: 40px; font-weight: 800; line-height: 1.09; letter-spacing: -.065em; }
.auth-intro h1 em { color: #688878; font-style: normal; }
.auth-intro > p:last-child { max-width: 315px; margin-top: 13px; color: #68757d; font-size: 12px; line-height: 1.68; }
.auth-visual { position: relative; flex: none; height: 280px; overflow: hidden; border: 1px solid #e3e9e8; border-radius: 25px; background: #f1f5f2; }
.auth-visual-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(70, 96, 85, .07) 1px, transparent 1px), linear-gradient(to bottom, rgba(70, 96, 85, .07) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, #000 10%, transparent 100%); }
.auth-orbit { position: absolute; left: 50%; top: 45%; border: 1px solid rgba(83, 118, 99, .27); border-radius: 50%; transform: translate(-50%, -50%); }
.auth-orbit-outer { width: 220px; height: 220px; }
.auth-orbit-inner { width: 150px; height: 150px; }
.auth-visual-center { position: absolute; top: 45%; left: 50%; display: grid; width: 70px; height: 70px; place-items: center; transform: translate(-50%, -50%); border: 8px solid #f1f5f2; border-radius: 22px; background: #26333d; color: #fff; box-shadow: 0 0 0 1px #d1dbd5; }
.auth-visual-center svg { stroke-width: 2.2; }
.auth-visual-label { position: absolute; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #dde6df; border-radius: 10px; background: #fff; color: #202b33; box-shadow: 0 5px 15px rgba(32, 48, 39, .04); }
.auth-visual-label span { color: #759383; font-size: 9px; font-weight: 800; }
.auth-visual-label strong { font-size: 11px; font-weight: 700; }
.auth-visual-label-one { left: 18px; top: 26px; }
.auth-visual-label-two { right: 17px; top: 67px; }
.auth-visual-label-three { left: 28px; bottom: 62px; }
.auth-visual-caption { position: absolute; right: 19px; bottom: 18px; left: 19px; display: flex; align-items: center; gap: 10px; color: #6e7c74; font-size: 10px; font-weight: 600; }
.auth-visual-caption-rule { width: 20px; height: 1px; background: #809b8b; }
.auth-actions-title { margin-bottom: 11px; color: #202b33; font-size: 12px; font-weight: 750; }
.auth-google-button { min-height: 55px; border-color: #26333d; background: #26333d; border-radius: 13px; }
.auth-google-button:hover { background: #18252d; }
.auth-connection-note { max-width: 280px; margin: 10px auto 0; color: #87939a; font-size: 10px; line-height: 1.5; }
.review-legal-links a:hover, .review-legal-links button:hover { text-decoration: underline; }
.review-legal-links { margin: -8px 2px 0; color: #87939a; font-size: 10px; line-height: 1.5; }
.review-legal-links a, .review-legal-links button { color: #526e5d; font-size: 10px; font-weight: 700; text-decoration: none; }

/* Home gives the balance a clear focal point and keeps actions easy to find. */
.home-heading { margin-bottom: 1px; }
.home-kicker { color: #78877f; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.home-kicker span { display: inline-block; width: 3px; height: 3px; margin: 0 5px 2px; border-radius: 50%; background: #aab9b0; }
.home-title-period { color: #8ca997; }
.home-screen .balance-panel { position: relative; overflow: hidden; padding: 20px; border: 0; border-radius: 24px; background: #26333d; box-shadow: none; }
.home-screen .balance-panel::after { content: ''; position: absolute; right: -55px; top: -88px; width: 240px; height: 240px; border: 1px solid rgba(226, 242, 231, .17); border-radius: 50%; box-shadow: 0 0 0 45px rgba(226, 242, 231, .035), 0 0 0 90px rgba(226, 242, 231, .025); pointer-events: none; }
.home-screen .balance-panel-top, .home-screen .balance-panel > p { position: relative; z-index: 1; color: #b6c7c2; }
.home-screen .balance-panel-symbol { position: relative; z-index: 1; background: rgba(255,255,255,.1); color: #fff; }
.home-screen .balance-panel-value { position: relative; z-index: 1; margin-top: 5px; }
.home-screen .balance-panel-value strong { color: #fff; font-size: 38px; }
.home-screen .balance-panel-value span { color: #c5d2ce; }
.home-screen .balance-panel-actions { position: relative; z-index: 1; border-color: rgba(255,255,255,.14); }
.home-screen .balance-panel-link { color: #f1f6f3; }
.home-screen .balance-panel-button { background: #eff5ef; color: #26333d; }
.home-service-cta { border-color: #dce5e0; background: #f0f5f1; box-shadow: none; }
.home-service-cta-icon { background: #fff; color: #26333d; border: 1px solid #dbe6dc; }
.home-service-cta-arrow { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: #26333d; color: #fff; }

@media (max-height: 740px) {
  .auth-screen { padding-top: 16px; padding-bottom: 12px; }
  .auth-main { gap: 15px; padding: 14px 0 10px; }
  .auth-intro h1 { font-size: 34px; }
  .auth-visual { height: 220px; }
  .auth-orbit-outer { width: 175px; height: 175px; }
  .auth-orbit-inner { width: 115px; height: 115px; }
}
@media (max-width: 600px) {
  #container-app { padding-top: env(safe-area-inset-top); background: #f8faf9; }
  .bottom-nav-surface { height: calc(70px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .auth-screen { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) {
  .auth-screen { padding-left: 18px; padding-right: 18px; }
  .auth-intro h1 { font-size: 33px; }
  .auth-visual { height: 230px; }
  .auth-visual-label-one { left: 11px; }
  .auth-visual-label-two { right: 10px; }
}

/* Compact service comparison cards */
.service-options-list { display: grid; gap: 11px; }
.service-option {
  position: relative;
  padding: 17px 18px 16px;
  border-color: #e0e8e5;
  border-radius: 20px;
  box-shadow: 0 5px 18px rgba(25, 40, 48, .035);
}
.service-option.is-recommended { border-color: #aec7b8; background: #fcfefc; }
.service-recommended { padding: 5px 8px; border-radius: 6px; background: #e9f1ec; color: #466d57; font-size: 10px; font-weight: 700; letter-spacing: 0; }
.service-option-heading { margin-top: 0; }
.service-option-heading h2 { color: #202b33; font-size: 17px; font-weight: 750; letter-spacing: -.035em; }
.service-option-heading p { margin-top: 3px; color: #68757d; font-size: 11px; }
.service-option-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 16px; padding: 13px 0; border-top: 1px solid #e9eeeb; border-bottom: 1px solid #e9eeeb; }
.service-option-details > div { min-width: 0; }
.service-option-details > div + div { padding-left: 16px; border-left: 1px solid #e4eae6; }
.service-option-details dt { color: #88958f; font-size: 10px; line-height: 1.35; }
.service-option-details dd { margin-top: 4px; color: #26333d; font-size: 12px; font-weight: 750; line-height: 1.35; }
.service-option-range { align-items: baseline; padding: 11px 0; color: #78867e; font-size: 11px; }
.service-option-range strong { color: #26333d; font-size: 11px; }
.service-option-footer { padding-top: 13px; border-color: #e9eeeb; }
.service-option-footer > div > span { color: #84938d; font-size: 10px; }
.service-option-footer > div strong { margin: 2px 0 0; color: #202b33; font-size: 22px; font-weight: 800; letter-spacing: -.045em; }
.service-option-footer > div strong small { display: inline; color: #68757d; font-size: 11px; font-weight: 650; letter-spacing: 0; }
.service-option-footer > div > small { margin-top: 1px; color: #89968e; font-size: 10px; }
.service-option-footer .flow-primary { min-width: 105px; min-height: 44px; padding: 9px 13px; border-radius: 11px; background: #26333d; font-size: 12px; }
.service-option-footer .flow-primary:hover { background: #1b2831; }
.service-option-footer .flow-primary svg { width: 15px; height: 15px; }
@media (max-width: 370px) {
  .service-option { padding: 15px; }
  .service-option-details > div + div { padding-left: 11px; }
  .service-option-footer .flow-primary { min-width: 92px; }
}

.review-terms-check { align-items: center; padding: 14px; border: 1px solid #dfe6e2; border-radius: 13px; background: #f8faf9; color: #26333d; }
.review-terms-check input { margin-top: 0; }
.review-place-button:disabled { background: #aebbb8; opacity: 1; cursor: not-allowed; }

/* Keep the order form visible while comparing another package. */
.selected-service-card { padding: 15px 16px 13px; border: 1px solid #dde6e1; border-radius: 18px; background: #fff; box-shadow: 0 4px 18px rgba(25, 40, 48, .035); }
.selected-service-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.selected-service-card-platform { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.selected-service-card-platform small { color: #85948c; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.selected-service-card-platform strong { overflow: hidden; color: #202b33; font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.selected-service-change { display: inline-flex; min-height: 39px; flex: none; align-items: center; gap: 3px; padding: 0 9px; border: 1px solid #e1e8e3; border-radius: 10px; background: #f8faf9; color: #26333d; font-size: 11px; font-weight: 700; }
.selected-service-change:hover { border-color: #aebfb3; }
.selected-service-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding: 12px; border: 1px solid #e9efea; border-radius: 12px; background: #f7faf7; }
.selected-service-card-tier { position: relative; display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; padding-left: 11px; }
.selected-service-card-tier::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 0; width: 3px; border-radius: 3px; background: #8eae98; }
.selected-service-card-tier small, .selected-service-card-price > small:first-child { color: #73857a; font-size: 10px; font-weight: 650; letter-spacing: 0; }
.selected-service-card-tier strong { color: #202b33; font-size: 14px; font-weight: 800; line-height: 1.25; letter-spacing: -.025em; }
.selected-service-card-price { display: flex; flex: none; flex-direction: column; align-items: flex-end; text-align: right; }
.selected-service-card-price strong { margin-top: 2px; color: #202b33; font-size: 19px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; white-space: nowrap; }
.selected-service-card-price strong em { color: #596b61; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0; }
.selected-service-card-price > small:last-child { margin-top: 2px; color: #8a9890; font-size: 9px; font-weight: 500; }
.service-sheet-backdrop { position: absolute; inset: 0; display: flex; align-items: flex-end; background: rgba(21, 32, 39, .46); pointer-events: auto; }
.service-sheet { display: flex; width: 100%; max-height: min(78%, 680px); flex-direction: column; overflow: hidden; padding: 9px 16px max(19px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #f9fbf9; box-shadow: 0 -14px 35px rgba(18, 32, 26, .13); }
.service-sheet-handle { width: 36px; height: 4px; flex: none; margin: 0 auto 17px; border-radius: 10px; background: #cbd6ce; }
.service-sheet-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 3px 15px; }
.service-sheet-heading p { color: #7b8c81; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.service-sheet-heading h2 { margin-top: 3px; color: #202b33; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.service-sheet-heading span { display: block; margin-top: 3px; color: #6d7d73; font-size: 11px; line-height: 1.4; }
.service-sheet-heading button { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border: 1px solid #e0e8e2; border-radius: 11px; background: #fff; color: #26333d; }
.service-sheet-list { display: flex; min-height: 0; flex-direction: column; gap: 9px; overflow-y: auto; padding: 1px 2px 2px; }
.service-sheet-option { display: flex; width: 100%; flex: none; flex-direction: column; gap: 7px; padding: 13px 14px; border: 1px solid #e1e8e3; border-radius: 15px; background: #fff; color: #26333d; text-align: left; }
.service-sheet-option:hover, .service-sheet-option.is-selected { border-color: #93b09d; background: #f7fbf8; }
.service-sheet-option-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.service-sheet-option-main strong { font-size: 13px; font-weight: 750; }
.service-sheet-current { padding: 4px 6px; border-radius: 6px; background: #e6f0e8; color: #477157; font-size: 9px; font-weight: 750; }
.service-sheet-option-meta { color: #77867d; font-size: 10px; line-height: 1.45; }
.service-sheet-option-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid #edf1ee; }
.service-sheet-price-copy { display: flex; flex-direction: column; gap: 2px; }
.service-sheet-price-copy small { color: #829188; font-size: 9px; font-weight: 600; }
.service-sheet-price-copy strong { color: #202b33; font-size: 19px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.service-sheet-price-copy strong em { color: #5c7062; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0; }
.service-sheet-price-arrow { display: grid; width: 29px; height: 29px; flex: none; place-items: center; border-radius: 9px; background: #eef3ee; color: #476b53; }
@media (max-width: 370px) {
  .selected-service-card { padding: 13px; }
  .selected-service-card-bottom { align-items: flex-start; }
  .service-sheet { padding-right: 12px; padding-left: 12px; }
}

/* Order details: compact fields and a clear cost summary. */
.order-form-field { padding: 15px; border: 1px solid #e1e9e4; border-radius: 17px; background: #fff; box-shadow: 0 4px 16px rgba(25, 40, 48, .025); }
.order-form-field-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.order-form-field-heading .flow-label { color: #26333d; font-size: 13px; font-weight: 750; }
.order-form-field-heading > span { flex: none; color: #829188; font-size: 10px; font-weight: 600; text-align: right; }
.order-form-control { display: flex; min-height: 52px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #dce5df; border-radius: 12px; background: #f9fbf9; transition: border-color .15s, box-shadow .15s; }
.order-form-control > svg { flex: none; color: #789083; }
.order-form-control:focus-within { border-color: #779987; box-shadow: 0 0 0 3px rgba(101, 143, 115, .12); background: #fff; }
.order-form-control.is-invalid { border-color: #cf857a; }
.order-form-control .order-form-input { width: 100%; min-width: 0; min-height: 50px; padding: 11px 0; border: 0; border-radius: 0; background: transparent; color: #26333d; box-shadow: none; font-size: 14px; outline: none; }
.order-form-control .order-form-input:focus, .order-form-control .order-form-input[aria-invalid="true"] { border: 0; box-shadow: none; }
.order-form-control .order-form-input::placeholder { color: #9aa7a0; }
.order-form-control-quantity .order-form-input { font-size: 17px; font-weight: 750; }
.order-form-control-quantity .order-form-input::-webkit-outer-spin-button,
.order-form-control-quantity .order-form-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.order-form-control-quantity .order-form-input { appearance: textfield; }
.order-form-unit { flex: none; padding-left: 10px; border-left: 1px solid #e0e8e2; color: #7e8e83; font-size: 11px; font-weight: 600; }
.order-form-field .flow-help { margin-top: 9px; color: #7b8980; font-size: 11px; }
.order-quantity-feedback { margin-top: 7px; color: #b53f36; font-size: 11px; font-weight: 600; }
#order-quantity-feedback.hidden { display: none; }
.order-form-field .target-feedback:empty { display: none; }
.order-form-field .target-feedback:not(:empty) { margin-top: 7px; }
.order-cost-panel { overflow: hidden; padding: 18px 18px 16px; border-radius: 19px; background: #26333d; color: #fff; }
.order-cost-panel-head { display: flex; align-items: center; justify-content: space-between; color: #bdcec3; font-size: 11px; font-weight: 650; }
.order-cost-panel-head svg { color: #d8e8dc; }
.order-cost-panel-total { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; }
.order-cost-panel-total strong { font-size: 34px; font-weight: 800; letter-spacing: -.055em; line-height: 1.15; }
.order-cost-panel-total span { color: #c9d9ce; font-size: 13px; font-weight: 600; }
.order-cost-panel-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .17); color: #c5d3c9; font-size: 11px; }
.order-cost-panel-balance strong { color: #fff; font-size: 12px; font-weight: 750; white-space: nowrap; }
.order-cost-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding: 11px; border: 1px solid rgba(224, 241, 228, .14); border-radius: 12px; background: rgba(255, 255, 255, .08); }
.order-cost-action > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.order-cost-action small { color: #b8c9bd; font-size: 10px; }
.order-cost-action strong { color: #fff; font-size: 11px; font-weight: 750; line-height: 1.3; }
.order-cost-action button { display: inline-flex; min-height: 40px; flex: none; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border-radius: 9px; background: #f0f6f0; color: #26333d; font-size: 11px; font-weight: 800; }
.order-cost-action button:hover { background: #fff; }
#order-details-affordability.hidden, #order-details-primary.hidden { display: none; }
@media (max-width: 370px) {
  .order-form-field { padding: 13px; }
  .order-form-field-heading > span { font-size: 9px; }
  .order-cost-action { gap: 6px; padding: 9px; }
  .order-cost-action button { padding: 0 8px; }
}

/* Review sheet: each item has its own reading position. */
.confirm-order-sheet { max-height: 88%; overflow-y: auto; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.confirm-order-summary { overflow: hidden; border: 1px solid #e2e9e3; border-radius: 16px; background: #f8faf8; }
.confirm-order-service { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px; }
.confirm-order-service > span:last-child { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; }
.confirm-order-service small, .confirm-order-destination small, .confirm-order-metrics small { color: #819087; font-size: 10px; font-weight: 650; }
.confirm-order-service strong { margin-top: 3px; color: #202b33; font-size: 13px; font-weight: 750; line-height: 1.3; }
.confirm-order-tier { margin-top: 7px; padding: 4px 7px; border-radius: 6px; background: #e9f1eb; color: #466c52; font-size: 10px; font-weight: 700; }
.confirm-order-destination { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-top: 1px solid #e5ece6; }
.confirm-order-destination strong { color: #26333d; font-size: 12px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.confirm-order-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e5ece6; background: #fff; }
.confirm-order-metrics > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 13px 14px; }
.confirm-order-metrics > div + div { border-left: 1px solid #e5ece6; background: #f0f5f1; }
.confirm-order-metrics strong { color: #202b33; font-size: 18px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; white-space: nowrap; }
.confirm-order-metrics strong em { color: #65786b; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: 0; }
@media (max-width: 370px) {
  .confirm-order-metrics > div { padding-right: 10px; padding-left: 10px; }
  .confirm-order-metrics strong { font-size: 16px; }
}

/* Completion screen uses a compact receipt rather than a table of labels. */
.order-success-page { display: flex; min-height: 100%; flex-direction: column; padding-bottom: 28px; }
.order-success-hero { display: flex; flex-direction: column; align-items: center; padding: 27px 10px 20px; text-align: center; }
.order-success-mark { display: grid; width: 70px; height: 70px; place-items: center; border: 1px solid #cfdfd2; border-radius: 22px; background: #edf6ef; color: #2f7950; }
.order-success-mark svg { stroke-width: 2.2; }
.order-success-hero p { margin-top: 19px; color: #6d8977; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.order-success-hero h1 { margin-top: 5px; color: #202b33; font-size: 27px; font-weight: 800; letter-spacing: -.055em; line-height: 1.2; }
.order-success-hero > span:last-child { max-width: 275px; margin-top: 8px; color: #718078; font-size: 11px; line-height: 1.55; }
.order-success-receipt { overflow: hidden; border: 1px solid #e0e8e2; border-radius: 19px; background: #fff; box-shadow: 0 7px 25px rgba(25, 40, 48, .045); }
.order-success-receipt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; background: #26333d; }
.order-success-receipt-top > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.order-success-receipt-top small { color: #b9cbbf; font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.order-success-receipt-top strong { color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
.order-success-status { max-width: 145px; padding: 6px 9px; border: 1px solid rgba(207, 234, 213, .18); border-radius: 100px; background: rgba(222, 242, 226, .12); color: #dff0e3; font-size: 10px; font-weight: 700; line-height: 1.25; text-align: center; }
.order-success-service { display: flex; align-items: center; gap: 11px; padding: 16px; }
.order-success-service > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.order-success-service small, .order-success-target small, .order-success-metrics small { color: #839188; font-size: 10px; font-weight: 600; }
.order-success-service strong { color: #202b33; font-size: 13px; font-weight: 750; line-height: 1.3; }
.order-success-service em { color: #65816c; font-size: 11px; font-style: normal; font-weight: 600; }
.order-success-target { display: flex; flex-direction: column; gap: 5px; margin: 0 16px; padding: 12px 0; border-top: 1px solid #edf1ed; }
.order-success-target strong { color: #26333d; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.order-success-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #e8eee9; background: #f7faf7; }
.order-success-metrics > span { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 14px 16px; }
.order-success-metrics > span + span { border-left: 1px solid #e5ece6; }
.order-success-metrics strong { color: #202b33; font-size: 18px; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
.order-success-metrics strong em { color: #75877b; font-size: 10px; font-style: normal; font-weight: 650; letter-spacing: 0; }
.order-success-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.order-success-actions .flow-primary, .order-success-actions .flow-secondary { min-height: 50px; }
.order-success-actions .flow-secondary { background: #fff; border-color: #e0e8e2; }
@media (max-width: 370px) {
  .order-success-receipt-top { padding-right: 12px; padding-left: 12px; }
  .order-success-status { max-width: 115px; font-size: 9px; }
  .order-success-metrics > span { padding-right: 11px; padding-left: 11px; }
  .order-success-metrics strong { font-size: 16px; }
}

/* Order progress and help request share a restrained, readable layout. */
.order-detail-page .detail-panel { overflow: hidden; padding: 0; border-radius: 20px; }
.order-detail-page .detail-panel-head { padding: 17px 17px 0; }
.order-detail-page .detail-panel-head small { display: block; margin-bottom: 3px; color: #829188; font-size: 9px; font-weight: 750; letter-spacing: .1em; }
.order-detail-page .detail-panel-head strong { color: #202b33; font-size: 14px; font-weight: 750; }
.order-detail-page .detail-panel-head span.break-all { color: #718078; font-size: 11px; }
.order-detail-page .detail-panel-status { margin: 15px 17px 0; padding-top: 13px; border-color: #e8eee9; color: #829188; font-size: 10px; }
.order-detail-page .detail-delivery { align-items: flex-end; gap: 8px; margin: 19px 17px 0; }
.order-detail-page .detail-delivery span { color: #728179; font-size: 11px; }
.order-detail-page .detail-delivery strong { color: #202b33; font-size: 28px; font-weight: 800; }
.order-detail-page .detail-delivery strong small { color: #839088; font-size: 11px; }
.order-detail-page .detail-delivery b { padding: 6px 9px; border-radius: 8px; background: #eaf2eb; color: #3f7552; font-size: 12px; }
.order-detail-page .detail-panel > .order-progress-track { height: 7px; margin: 12px 17px 0; background: #e8eee9; }
.order-detail-page .detail-panel-facts { grid-template-columns: 1fr 1fr; gap: 0; margin: 19px 0 0; padding: 0; border-color: #e8eee9; }
.order-detail-page .detail-panel-facts > div { padding: 14px 17px; border-radius: 0; background: #f8faf8; }
.order-detail-page .detail-panel-facts > div + div { border-left: 1px solid #e8eee9; }
.order-detail-page .detail-panel-facts span { color: #829188; font-size: 10px; }
.order-detail-page .detail-panel-facts strong { color: #26333d; font-size: 13px; font-weight: 750; }
.order-detail-page .history-panel { padding: 17px; border-radius: 20px; }
.order-detail-page .history-list { margin-top: 10px; }
.order-detail-page .history-list li { min-height: 39px; }
.order-detail-page .history-list li:not(:last-child)::before { background: #dce7df; }
.order-detail-page .history-marker { background: #a2b9a8; box-shadow: 0 0 0 1px #a2b9a8; }
.order-detail-page .history-list li.is-latest .history-marker { background: #527e5f; box-shadow: 0 0 0 1px #527e5f; }
.order-detail-page .history-entry { padding-bottom: 14px; }
.order-detail-page .history-entry strong { color: #26333d; }
.order-detail-preview { padding: 0 2px; color: #819087; font-size: 10px; }
.order-detail-actions .flow-primary, .order-detail-actions .flow-secondary { min-height: 48px; font-size: 12px; }
.order-detail-actions .flow-secondary, .order-detail-actions .order-request-link { border-color: #e0e8e2; background: #fff; }

/* Profile and purchase records */
.profile-page, .purchase-history-page { display: flex; flex-direction: column; gap: 21px; padding: 8px 0 32px; }
.profile-page-heading h1 { color: #202b33; font-size: 25px; font-weight: 750; line-height: 1.2; letter-spacing: -.035em; }
.profile-page-heading p { margin-top: 5px; color: #68757d; font-size: 12px; line-height: 1.4; }
.profile-identity { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 16px; border: 1px solid #e3e9e8; border-radius: 18px; background: #fff; box-shadow: 0 5px 20px rgba(25,40,48,.035); }
.profile-avatar { display: inline-flex; width: 46px; height: 46px; flex: none; align-items: center; justify-content: center; border-radius: 13px; background: #eff3f1; color: #344b43; font-size: 15px; font-weight: 750; }
.profile-identity-copy { display: block; flex: 1; min-width: 0; }
.profile-identity-copy small { display: block; color: #87939a; font-size: 9px; font-weight: 750; letter-spacing: .09em; }
.profile-identity-copy strong { display: block; overflow: hidden; margin-top: 3px; color: #202b33; font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.profile-identity-copy > span { display: block; overflow: hidden; margin-top: 2px; color: #68757d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-edit-button { display: inline-flex; width: 35px; height: 35px; flex: none; align-items: center; justify-content: center; border: 1px solid #e3e9e8; border-radius: 10px; background: #f8faf9; color: #344b43; }
.profile-wallet { padding: 18px; border: 1px solid #26333d; border-radius: 19px; background: #26333d; box-shadow: 0 10px 24px rgba(24,34,53,.1); }
.profile-wallet-top { display: flex; align-items: center; justify-content: space-between; color: #c5cfd2; font-size: 12px; }
.profile-wallet-top svg { color: #d7e4dc; }
.profile-wallet > strong { display: block; margin-top: 7px; color: #fff; font-size: 33px; font-weight: 750; line-height: 1.2; letter-spacing: -.04em; }
.profile-wallet > strong small { color: #c5cfd2; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.profile-wallet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 17px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.15); }
.profile-wallet-actions button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.23); border-radius: 10px; color: #fff; font-size: 11px; font-weight: 700; }
.profile-wallet-actions button:first-child { border-color: #fff; background: #fff; color: #26333d; }
.profile-wallet-actions button:last-child:hover { background: rgba(255,255,255,.08); }
.profile-section-heading { margin-bottom: 10px; }
.profile-section-heading h2 { color: #202b33; font-size: 15px; font-weight: 750; }
.profile-section-heading p { margin-top: 3px; color: #68757d; font-size: 11px; line-height: 1.4; }
.profile-menu { overflow: hidden; border: 1px solid #e3e9e8; border-radius: 18px; background: #fff; box-shadow: 0 5px 20px rgba(25,40,48,.035); }
.profile-menu button, .profile-menu a { display: flex; width: 100%; min-height: 65px; align-items: center; gap: 11px; padding: 12px 14px; color: inherit; text-align: left; text-decoration: none; }
.profile-menu > * + * { border-top: 1px solid #edf0ef; }
.profile-menu button:hover, .profile-menu a:hover { background: #f8faf9; }
.profile-menu-icon { display: inline-flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: #eff3f1; color: #344b43; }
.profile-menu button > span:nth-child(2), .profile-menu a > span:nth-child(2) { display: block; flex: 1; min-width: 0; }
.profile-menu strong, .profile-menu small { display: block; }
.profile-menu strong { color: #202b33; font-size: 12px; font-weight: 700; }
.profile-menu small { margin-top: 3px; color: #68757d; font-size: 10px; line-height: 1.35; }
.profile-menu button > svg, .profile-menu a > svg { flex: none; color: #9ba7aa; }
.profile-logout { display: flex; min-height: 45px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e3e9e8; border-radius: 11px; background: #fff; color: #68757d; font-size: 12px; font-weight: 650; }
.profile-logout:hover { color: #202b33; }
.purchase-history-heading { display: flex; align-items: center; gap: 12px; }
.purchase-history-heading > div { min-width: 0; }
.purchase-history-heading h1 { color: #202b33; font-size: 21px; font-weight: 750; line-height: 1.25; letter-spacing: -.03em; }
.purchase-history-heading p { margin-top: 3px; color: #68757d; font-size: 11px; }
.purchase-history-summary { padding: 17px; border: 1px solid #e3e9e8; border-radius: 18px; background: #fff; box-shadow: 0 5px 20px rgba(25,40,48,.035); }
.purchase-history-summary > span { color: #68757d; font-size: 11px; }
.purchase-history-summary strong { display: block; margin-top: 5px; color: #202b33; font-size: 27px; font-weight: 750; letter-spacing: -.04em; }
.purchase-history-summary strong small { color: #68757d; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.purchase-history-summary p { margin-top: 5px; color: #87939a; font-size: 10px; }
.purchase-history-list { display: flex; flex-direction: column; gap: 9px; }
.purchase-record { padding: 15px; border: 1px solid #e3e9e8; border-radius: 16px; background: #fff; box-shadow: 0 3px 14px rgba(25,40,48,.03); }
.purchase-record-top { display: flex; align-items: center; gap: 10px; }
.purchase-record-icon { display: inline-flex; width: 35px; height: 35px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: #eff3f1; color: #344b43; }
.purchase-record-title { display: block; flex: 1; min-width: 0; }
.purchase-record-title strong, .purchase-record-title small { display: block; }
.purchase-record-title strong { color: #202b33; font-size: 13px; font-weight: 750; }
.purchase-record-title small { margin-top: 3px; color: #68757d; font-size: 10px; }
.purchase-record-badge { padding: 5px 7px; border-radius: 7px; background: #f0f2f2; color: #68757d; font-size: 9px; font-weight: 700; }
.purchase-record-details { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 13px; color: #68757d; font-size: 11px; }
.purchase-record-details strong { color: #202b33; font-weight: 700; }
.purchase-record-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #edf0ef; color: #68757d; font-size: 10px; }
.purchase-record-foot strong { color: #202b33; font-weight: 700; }
.purchase-history-note { display: flex; align-items: flex-start; gap: 8px; padding: 13px; border: 1px solid #e3e9e8; border-radius: 12px; background: #f4f7f5; color: #68757d; }
.purchase-history-note svg { flex: none; margin-top: 2px; color: #526e5d; }
.purchase-history-note p { font-size: 10px; line-height: 1.5; }
.purchase-help-link { display: flex; min-height: 44px; align-items: center; justify-content: space-between; padding: 0 13px; border: 1px solid #e3e9e8; border-radius: 11px; background: #fff; color: #344b43; font-size: 12px; font-weight: 700; }
.profile-info-backdrop { position: absolute; inset: 0; display: flex; align-items: flex-end; background: rgba(21,32,39,.46); pointer-events: auto; }
.profile-info-sheet { width: 100%; max-height: 85%; overflow-y: auto; padding: 9px 18px max(19px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #f9fbf9; box-shadow: 0 -14px 35px rgba(18,32,26,.13); }
.profile-info-sheet .service-sheet-handle { margin-bottom: 17px; }
.profile-info-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-info-heading h2 { color: #202b33; font-size: 19px; font-weight: 750; letter-spacing: -.03em; }
.profile-info-heading button { display: inline-flex; width: 35px; height: 35px; flex: none; align-items: center; justify-content: center; border: 1px solid #e3e9e8; border-radius: 10px; background: #fff; color: #344b43; }
.profile-info-steps { display: flex; flex-direction: column; gap: 13px; margin-top: 19px; }
.profile-info-steps > div { display: flex; align-items: flex-start; gap: 10px; }
.profile-info-steps > div > span { display: inline-flex; width: 23px; height: 23px; flex: none; align-items: center; justify-content: center; border-radius: 7px; background: #26333d; color: #fff; font-size: 10px; font-weight: 700; }
.profile-info-steps p { display: block; flex: 1; min-width: 0; }
.profile-info-steps strong, .profile-info-steps small { display: block; }
.profile-info-steps strong { color: #202b33; font-size: 12px; font-weight: 700; }
.profile-info-steps small { margin-top: 3px; color: #68757d; font-size: 11px; line-height: 1.45; }
.profile-info-note { margin-top: 17px; color: #68757d; font-size: 10px; line-height: 1.5; }
.profile-info-done { width: 100%; min-height: 45px; margin-top: 17px; border-radius: 10px; background: #26333d; color: #fff; font-size: 12px; font-weight: 700; }
.profile-edit-fields { display: flex; flex-direction: column; margin-top: 17px; }
.profile-edit-fields label { margin: 10px 0 6px; color: #202b33; font-size: 11px; font-weight: 700; }
.profile-edit-fields label small { margin-left: 4px; color: #87939a; font-weight: 500; }
.profile-edit-fields input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dfe8e2; border-radius: 10px; background: #fff; color: #202b33; font-size: 12px; outline: 0; }
.profile-edit-fields input:focus { border-color: #789883; box-shadow: 0 0 0 3px rgba(82,121,101,.12); }
.profile-edit-email { display: block; margin-top: 16px; padding: 11px 12px; border-radius: 10px; background: #eff3f1; }
.profile-edit-email small, .profile-edit-email strong { display: block; }
.profile-edit-email small { color: #68757d; font-size: 10px; }
.profile-edit-email strong { overflow: hidden; margin-top: 3px; color: #202b33; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.profile-edit-error { margin-top: 10px; color: #b43c32; font-size: 11px; }
.profile-info-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }
.profile-info-actions button { min-height: 44px; border: 1px solid #e3e9e8; border-radius: 10px; background: #fff; color: #344b43; font-size: 12px; font-weight: 700; }
.profile-info-actions button:last-child { border-color: #26333d; background: #26333d; color: #fff; }

/* Legal documents inside the app shell */
.legal-mode .bottom-nav-surface { display: none !important; }
.legal-mode #app-viewport, .legal-mode #screen-content { background: #f8faf9; }
.app-legal-page { display: flex; flex-direction: column; gap: 18px; padding: 6px 0 35px; }
.app-legal-header { display: flex; align-items: center; gap: 12px; color: #68757d; font-size: 11px; font-weight: 650; }
.app-legal-intro { padding: 4px 1px 0; }
.app-legal-eyebrow { color: #526e5d; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.app-legal-intro h1 { margin-top: 7px; color: #202b33; font-size: 25px; font-weight: 760; line-height: 1.18; letter-spacing: -.04em; }
.app-legal-intro p { margin-top: 8px; color: #68757d; font-size: 11px; line-height: 1.55; }
.app-legal-draft { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid #dce7df; border-radius: 12px; background: #f0f5f1; color: #52635a; }
.app-legal-draft svg { flex: none; margin-top: 1px; color: #526e5d; }
.app-legal-draft p { font-size: 10px; line-height: 1.5; }
.app-legal-sections { overflow: hidden; border: 1px solid #e3e9e8; border-radius: 17px; background: #fff; box-shadow: 0 5px 20px rgba(25,40,48,.035); }
.app-legal-section { padding: 17px; }
.app-legal-section + .app-legal-section { border-top: 1px solid #edf0ef; }
.app-legal-section > span { color: #8aa092; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.app-legal-section h2 { margin-top: 4px; color: #202b33; font-size: 14px; font-weight: 750; line-height: 1.35; }
.app-legal-section p { margin-top: 9px; color: #607078; font-size: 11px; line-height: 1.63; }
.app-legal-related { display: flex; flex-direction: column; gap: 8px; }
.app-legal-related button { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border: 1px solid #e3e9e8; border-radius: 10px; background: #fff; color: #344b43; font-size: 11px; font-weight: 700; text-align: left; }
.app-legal-related button:hover { border-color: #9fb8a7; }
.app-legal-date { color: #87939a; font-size: 10px; text-align: center; }

/* Service status and saved services */
.service-catalog-note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border: 1px solid #e3e9e8; border-radius: 11px; background: #f3f7f4; color: #617369; }
.service-catalog-note svg { flex: none; margin-top: 1px; }
.service-catalog-note span { font-size: 10px; line-height: 1.5; }
.service-save-button { display: inline-flex; width: 35px; height: 35px; flex: none; align-items: center; justify-content: center; border: 1px solid #e3e9e8; border-radius: 10px; background: #f8faf9; color: #87939a; }
.service-save-button.is-saved { border-color: #b9cfc0; background: #eaf2ec; color: #456b51; }
.service-save-button.is-saved svg { fill: currentColor; }
.service-availability { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 14px 0 4px; padding: 9px 10px; border-radius: 10px; background: #f4f7f5; }
.service-availability-label { display: inline-flex; flex: none; align-items: center; gap: 5px; color: #526e5d; font-size: 10px; font-weight: 750; }
.service-availability-label > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.service-availability small { color: #68757d; font-size: 10px; line-height: 1.35; text-align: right; }
.service-availability.is-paused { background: #f8f0ed; }
.service-availability.is-paused .service-availability-label { color: #a55445; }
.service-availability.is-delayed { background: #faf5e9; }
.service-availability.is-delayed .service-availability-label { color: #986e2f; }
.service-option-footer .flow-primary:disabled { background: #d7dfdc; color: #617369; cursor: not-allowed; }
.service-sheet-option:disabled { opacity: .55; cursor: not-allowed; }
.service-favorites-list { display: flex; flex-direction: column; gap: 8px; }
.service-favorite-row { display: flex; align-items: center; overflow: hidden; border: 1px solid #e3e9e8; border-radius: 13px; background: #fff; }
.service-favorite-open { display: flex; min-width: 0; min-height: 61px; flex: 1; align-items: center; gap: 9px; padding: 10px 12px; text-align: left; }
.service-favorite-open > span:nth-child(2) { display: block; flex: 1; min-width: 0; }
.service-favorite-open strong, .service-favorite-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-favorite-open strong { color: #202b33; font-size: 11px; font-weight: 700; }
.service-favorite-open small { margin-top: 3px; color: #68757d; font-size: 10px; }
.service-favorite-open > svg { flex: none; color: #526e5d; }
.service-favorite-remove { display: inline-flex; width: 39px; min-height: 61px; flex: none; align-items: center; justify-content: center; border-left: 1px solid #edf0ef; color: #87939a; }
.service-favorite-open:hover, .service-favorite-remove:hover { background: #f8faf9; }
.home-screen .service-favorite-open { width: 100%; }

/* Order next step */
.order-next-panel { padding: 17px; border: 1px solid #dfe8e2; border-radius: 17px; background: #f3f7f4; }
.order-next-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-next-head span:first-child { color: #526e5d; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.order-next-head span:last-child { color: #87939a; font-size: 9px; }
.order-next-panel h2 { margin-top: 10px; color: #202b33; font-size: 15px; font-weight: 750; }
.order-next-panel > p { margin-top: 5px; color: #617369; font-size: 11px; line-height: 1.55; }
.order-next-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.order-next-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e3e9e8; border-radius: 10px; background: #fff; }
.order-next-facts small, .order-next-facts strong { display: block; }
.order-next-facts small { color: #87939a; font-size: 9px; }
.order-next-facts strong { overflow: hidden; margin-top: 3px; color: #202b33; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.order-next-panel > button { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; margin-top: 13px; color: #344b43; font-size: 11px; font-weight: 750; }

/* Clear customer states and touch-friendly account details. */
#screen-content button, #modal-container button { min-height: 48px; min-width: 48px; }
#screen-content input[type="text"], #screen-content input[type="search"], #screen-content input[type="url"], #screen-content input[type="number"], #screen-content select { min-height: 48px; }
.order-detail-page .detail-panel-status { align-items: flex-start; flex-direction: column; gap: 6px; font-size: 12px; }
.order-next-panel > p { font-size: 12px; line-height: 1.6; }
.order-next-panel > button { min-height: 48px; margin-top: 10px; padding: 0 12px; border: 1px solid #cfdbd2; border-radius: 11px; background: #fff; font-size: 12px; }
.order-request-link { min-height: 48px; }
.activity-add-button, .activity-back-button, .profile-edit-button, .profile-wallet-actions button, .ticket-new-button { min-height: 48px; }
.activity-back-button, .profile-edit-button { min-width: 48px; }
.activity-transaction { padding: 0; overflow: hidden; }
.activity-transaction-open { display: block; width: 100%; min-height: 96px; padding: 16px; color: inherit; text-align: left; }
.activity-transaction-open:hover { background: #f8faf9; }
.activity-transaction-open:focus-visible, .receipt-sheet button:focus-visible, .connection-banner button:focus-visible { outline: 2px solid #26333d; outline-offset: -3px; }
.activity-transaction-info strong { font-size: 14px; }
.activity-transaction-info time { font-size: 12px; }
.activity-transaction-view { display: inline-flex; align-items: center; gap: 5px; color: #344b43; font-size: 12px; font-weight: 700; }
.state-panel { display: flex; min-height: 238px; flex-direction: column; align-items: center; justify-content: center; padding: 26px 20px; border: 1px solid #e2e9e5; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 4px 18px rgba(24,34,53,.035); }
.state-panel-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 13px; background: #eff3f1; color: #344b43; }
.state-panel h2 { margin-top: 13px; color: #202b33; font-size: 16px; font-weight: 750; }
.state-panel p { max-width: 270px; margin-top: 6px; color: #65736e; font-size: 12px; line-height: 1.55; }
.state-panel button { min-height: 48px; margin-top: 17px; padding: 0 16px; gap: 8px; }
.state-error .state-panel-icon { background: #fff4ed; color: #a55129; }
.connection-banner[hidden] { display: none; }
.connection-banner { display: flex; align-items: center; gap: 9px; margin: 9px 18px 0; padding: 11px 12px; border: 1px solid #eedfc6; border-radius: 12px; background: #fffaf0; color: #483b29; }
.connection-banner span { flex: 1; min-width: 0; }
.connection-banner strong, .connection-banner small { display: block; }
.connection-banner strong { font-size: 12px; }
.connection-banner small { margin-top: 2px; font-size: 11px; line-height: 1.35; }
.connection-banner button { min-width: 70px; min-height: 48px; padding: 0 9px; border-radius: 9px; background: #fff; color: #26333d; font-size: 11px; font-weight: 700; }
.loading-screen { padding-top: 22px; }
.loading-line, .loading-card { background: linear-gradient(100deg,#eef2f0 20%,#f7f9f8 50%,#eef2f0 80%); background-size: 200% 100%; animation: loading-glide 1.4s ease-in-out infinite; }
.loading-line { width: 75%; height: 15px; margin-bottom: 11px; border-radius: 6px; }
.loading-line.short { width: 42%; height: 25px; }
.loading-card { height: 130px; margin-top: 25px; border-radius: 18px; }
.loading-card.small { height: 76px; margin-top: 12px; }
@keyframes loading-glide { to { background-position-x: -200%; } }
.receipt-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; background: rgba(23,34,40,.5); backdrop-filter: blur(3px); }
.receipt-sheet { width: 100%; max-height: 88%; overflow-y: auto; padding: 10px 20px 24px; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -12px 32px rgba(24,34,53,.12); animation: receipt-enter .2s ease-out both; }
@keyframes receipt-enter { from { transform: translateY(18px); opacity: .7; } }
.receipt-handle { width: 42px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: #d9e0dd; }
.receipt-header { display: flex; align-items: center; justify-content: space-between; color: #68757d; font-size: 11px; font-weight: 750; letter-spacing: .09em; }
.receipt-header button { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; background: #f5f7f6; color: #26333d; }
.receipt-amount { display: flex; flex-direction: column; align-items: center; padding: 16px 0 20px; border-bottom: 1px solid #e8eeea; }
.receipt-amount > span { color: #68757d; font-size: 13px; }
.receipt-amount strong { margin-top: 5px; color: #26333d; font-size: 31px; line-height: 1.2; letter-spacing: -.04em; }
.receipt-amount strong.is-credit { color: #187b4c; }
.receipt-amount strong small { font-size: 13px; font-weight: 550; letter-spacing: 0; }
.receipt-amount time { margin-top: 6px; color: #85918c; font-size: 11px; }
.receipt-details { margin: 7px 0 14px; }
.receipt-details > div { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-bottom: 1px solid #eef1ef; font-size: 12px; }
.receipt-details dt { color: #68757d; }
.receipt-details dd { max-width: 65%; color: #26333d; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.receipt-id { font-size: 11px; }
.receipt-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.receipt-actions button:only-child { grid-column: 1 / -1; }
.receipt-actions button { min-height: 48px; }
.empty-panel { border-style: solid; border-color: #e2e9e5; border-radius: 18px; box-shadow: 0 4px 18px rgba(24,34,53,.035); }
.empty-panel-icon { width: 48px; height: 48px; }
.empty-panel h1, .empty-panel h2, .empty-panel h3 { font-size: 16px; }
.empty-panel p { font-size: 12px; line-height: 1.55; }
.empty-panel button { min-height: 48px; }
.purchase-pending-indicator { display: inline-block; width: 15px; height: 15px; margin-right: 6px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; vertical-align: -3px; animation: pending-spin .7s linear infinite; }
@keyframes pending-spin { to { transform: rotate(360deg); } }
button[aria-busy="true"] { cursor: progress; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .loading-line, .loading-card, .receipt-sheet { animation: none; } }
@media (prefers-reduced-motion: reduce) { .purchase-pending-indicator { animation: none; } }

/* Home actions and notification choices. */
.attention-section { display: flex; flex-direction: column; gap: 11px; }
.attention-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.attention-heading h2 { color: #202b33; font-size: 17px; font-weight: 750; line-height: 1.3; }
.attention-heading p { margin-top: 3px; color: #68757d; font-size: 11px; line-height: 1.4; }
.attention-heading > span { display: inline-flex; min-width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; background: #eaf1ec; color: #3f684c; font-size: 11px; font-weight: 750; }
.attention-list { display: flex; flex-direction: column; gap: 8px; }
.attention-item { display: flex; width: 100%; align-items: flex-start; gap: 11px; padding: 15px; border: 1px solid #e1e9e3; border-radius: 16px; background: #fff; box-shadow: 0 4px 18px rgba(24,34,53,.035); text-align: left; transition: border-color .15s, background-color .15s; }
.attention-item:hover { border-color: #b9cbbc; background: #fbfcfb; }
.attention-icon { display: inline-flex; width: 38px; height: 38px; flex: none; align-items: center; justify-content: center; border-radius: 11px; background: #eef3ef; color: #3f684c; }
.attention-copy { display: block; min-width: 0; flex: 1; }
.attention-copy small { display: block; color: #789083; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.attention-copy strong { display: block; margin-top: 2px; color: #202b33; font-size: 13px; font-weight: 750; line-height: 1.4; }
.attention-copy > span { display: block; margin-top: 4px; color: #68757d; font-size: 11px; line-height: 1.45; }
.attention-copy em { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: #344b43; font-size: 11px; font-style: normal; font-weight: 750; }
.notification-settings-link { display: inline-flex; width: 48px; height: 48px; flex: none; align-items: center; justify-content: center; border: 1px solid #e3e9e8; border-radius: 12px; background: #fff; color: #344b43; }
.notification-preferences-page { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 32px; }
.notification-preferences-intro { padding: 17px; border: 1px solid #e3e9e8; border-radius: 17px; background: #fff; box-shadow: 0 4px 16px rgba(24,34,53,.03); }
.notification-preferences-intro h2 { color: #202b33; font-size: 15px; font-weight: 750; }
.notification-preferences-intro p { margin-top: 6px; color: #68757d; font-size: 12px; line-height: 1.55; }
.notification-preferences-list { overflow: hidden; border: 1px solid #e3e9e8; border-radius: 17px; background: #fff; box-shadow: 0 4px 16px rgba(24,34,53,.03); }
.notification-preference-row { display: flex; min-height: 79px; align-items: center; gap: 11px; padding: 12px 14px; }
.notification-preference-row + .notification-preference-row { border-top: 1px solid #edf0ef; }
.notification-preference-icon { display: inline-flex; width: 37px; height: 37px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: #eff3f1; color: #344b43; }
.notification-preference-copy { display: block; min-width: 0; flex: 1; }
.notification-preference-copy strong { display: block; color: #202b33; font-size: 12px; font-weight: 750; line-height: 1.4; }
.notification-preference-copy small { display: block; margin-top: 3px; color: #68757d; font-size: 11px; line-height: 1.4; }
.notification-switch { position: relative; display: inline-flex; width: 54px; height: 48px; flex: none; align-items: center; justify-content: center; }
.notification-switch::before { content: ''; position: absolute; width: 44px; height: 26px; border-radius: 16px; background: #cbd5d0; transition: background-color .15s; }
.notification-switch span { position: relative; width: 20px; height: 20px; margin-left: -18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23,34,40,.18); transition: margin-left .15s; }
.notification-switch.is-on::before { background: #476f56; }
.notification-switch.is-on span { margin-left: 18px; }
.notification-preferences-note { display: flex; align-items: flex-start; gap: 8px; padding: 0 3px; color: #68757d; font-size: 11px; line-height: 1.5; }
.notification-preferences-note svg { flex: none; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .attention-item, .notification-switch::before, .notification-switch span { transition: none; } }

/* Purchase status in the preview */
.purchase-check-page { display: flex; flex-direction: column; gap: 17px; padding: 8px 0 32px; }
.purchase-check-status { display: flex; align-items: flex-start; gap: 11px; padding: 17px; border: 1px solid #dfe8e2; border-radius: 17px; background: #f3f7f4; }
.purchase-check-status-icon { display: inline-flex; width: 37px; height: 37px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: #e3eee6; color: #456b51; }
.purchase-check-status small { color: #526e5d; font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.purchase-check-status h2 { margin-top: 4px; color: #202b33; font-size: 14px; font-weight: 750; }
.purchase-check-status p { margin-top: 6px; color: #617369; font-size: 11px; line-height: 1.5; }
.purchase-check-action, .purchase-check-next { padding: 17px; border: 1px solid #e3e9e8; border-radius: 16px; background: #fff; box-shadow: 0 4px 15px rgba(25,40,48,.03); }
.purchase-check-action h2, .purchase-check-next h2 { color: #202b33; font-size: 14px; font-weight: 750; }
.purchase-check-action p { margin-top: 6px; color: #68757d; font-size: 11px; line-height: 1.55; }
.purchase-check-action button { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; border-radius: 10px; background: #26333d; color: #fff; font-size: 12px; font-weight: 700; }
.purchase-check-result { padding: 14px; border: 1px solid #cddfd1; border-radius: 12px; background: #f4f8f5; }
.purchase-check-result strong { color: #284636; font-size: 12px; }
.purchase-check-result p { margin-top: 5px; color: #617369; font-size: 11px; line-height: 1.5; }
.purchase-check-result small { display: block; margin-top: 8px; color: #87939a; font-size: 9px; }
.purchase-check-next ol { display: flex; flex-direction: column; gap: 8px; margin: 11px 0 0; padding-left: 0; color: #68757d; font-size: 11px; line-height: 1.5; }

/* VIP membership and transparent service pricing. */
.profile-vip-card { display: flex; width: 100%; flex-direction: column; gap: 14px; padding: 19px; border: 1px solid #d4e2d7; border-radius: 18px; background: #f0f6f1; color: #26333d; text-align: left; box-shadow: 0 6px 20px rgba(27,43,50,.045); }
.profile-vip-top, .profile-vip-foot, .profile-vip-main, .vip-hero-spend, .vip-hero-next { display: flex; justify-content: space-between; gap: 12px; }
.profile-vip-top { align-items: center; color: #4b7456; }
.profile-vip-mark { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.profile-vip-main { flex-direction: column; gap: 4px; }
.profile-vip-main strong { font-size: 25px; line-height: 1.1; letter-spacing: -.04em; }
.profile-vip-main small { color: #647a6b; font-size: 12px; }
.profile-vip-track, .vip-hero-progress { display: block; height: 6px; overflow: hidden; border-radius: 8px; background: #dce9df; }
.profile-vip-track span, .vip-hero-progress span { display: block; height: 100%; border-radius: inherit; background: #5d9670; }
.profile-vip-foot { align-items: center; color: #687e6e; font-size: 10px; line-height: 1.4; }
.profile-vip-foot strong { color: #304b39; font-size: 10px; text-align: right; }
.vip-page { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 30px; }
.vip-page-header { display: flex; align-items: center; gap: 12px; }
.vip-page-header h1 { color: #202b33; font-size: 21px; font-weight: 800; line-height: 1.2; }
.vip-page-header p { margin-top: 3px; color: #68757d; font-size: 12px; }
.vip-hero { padding: 20px; border-radius: 19px; background: #26333d; color: #fff; }
.vip-hero-progress { background: rgba(255,255,255,.17); }
.vip-hero-progress span { background: #a9cfb5; }
.vip-hero-label { display: inline-flex; align-items: center; gap: 7px; color: #b8d1c0; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.vip-hero > strong { display: block; margin-top: 15px; font-size: 32px; line-height: 1.1; letter-spacing: -.045em; }
.vip-hero > p { margin-top: 6px; color: #cbd9d0; font-size: 12px; line-height: 1.5; }
.vip-hero-spend { align-items: center; margin-top: 21px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); color: #cbd9d0; font-size: 11px; }
.vip-hero-spend strong { color: #fff; font-size: 13px; }
.vip-hero-next { align-items: center; margin: 16px 0 8px; color: #bfcfc5; font-size: 10px; }
.vip-hero-next strong { color: #fff; }
.vip-hero .vip-top-note { margin-top: 16px; }
.vip-section-heading h2, .vip-rules h2 { color: #202b33; font-size: 15px; font-weight: 800; }
.vip-section-heading p { margin-top: 3px; color: #68757d; font-size: 11px; }
.vip-levels { display: flex; flex-direction: column; gap: 9px; }
.vip-section-heading { margin-bottom: 3px; }
.vip-level { display: flex; min-height: 72px; align-items: center; gap: 11px; padding: 12px; border: 1px solid #e1e9e3; border-radius: 15px; background: #fff; }
.vip-level.is-current { border-color: #9abca3; background: #f4f8f5; }
.vip-level-icon { display: inline-flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: #edf2ef; color: #536d5b; }
.vip-level.is-unlocked .vip-level-icon { background: #e0efe4; color: #367249; }
.vip-level-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.vip-level-copy strong { color: #202b33; font-size: 12px; }
.vip-level-copy small { color: #68757d; font-size: 10px; }
.vip-level-discount { color: #304d3a; font-size: 12px; font-weight: 800; white-space: nowrap; }
.vip-rules { padding: 17px; border: 1px solid #e1e9e3; border-radius: 16px; background: #fff; }
.vip-rules ul { margin: 11px 0 0; padding-left: 0; color: #68757d; font-size: 11px; line-height: 1.55; }
.vip-rules li + li { margin-top: 8px; }
.vip-rules li, .purchase-check-next li { position: relative; padding-left: 15px; }
.vip-rules li::before, .purchase-check-next li::before { content: ''; position: absolute; top: .7em; left: 1px; width: 4px; height: 4px; border-radius: 50%; background: #5e8068; }
.vip-preview-note { color: #87928e; font-size: 10px; line-height: 1.5; }
.vip-price-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; color: #b9dac2; font-size: 11px; }
.vip-price-row strong { color: #d8f1dc; }
.vip-review-pricing { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; border-top: 1px solid #e7eaf0; color: #68757d; font-size: 11px; }
.vip-review-pricing span { display: flex; justify-content: space-between; gap: 10px; }
.vip-review-pricing strong { color: #2d6542; }
.vip-confirm-saving { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #eef6ef; color: #32704a; font-size: 11px; font-weight: 700; line-height: 1.45; }
.vip-order-saved { margin: 12px 0 0; padding: 9px 11px; border-radius: 10px; background: #edf6ef; color: #34704a; font-size: 11px; font-weight: 750; line-height: 1.45; }

/* FAQ topics stay visible and readable on narrow screens. */
#screen-content .faq-search-input { padding-left: 42px; }
.faq-search-icon { pointer-events: none; }
.faq-category-list { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-category-button { display: inline-flex; min-width: 0; min-height: 44px; flex: 1 1 auto; align-items: center; justify-content: center; padding: 9px 12px; border: 1px solid #e1e7e4; border-radius: 12px; background: #fff; color: #53616a; font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.faq-category-button.is-active { border-color: #26333d; background: #26333d; color: #fff; }
.faq-category-button:not(.is-active):hover { border-color: #aebfb4; background: #f6f9f7; }
@media (prefers-reduced-motion: reduce) { .faq-category-button { transition: none; } }

/* Login uses the same calm cards and typography as the app. */
.auth-mode #app-viewport, .auth-mode #screen-content, .auth-screen { background: #f8faf9; }
.auth-screen { padding: 24px 23px 16px; }
.auth-main { justify-content: flex-start; gap: 21px; padding: 42px 0 18px; }
.auth-eyebrow { display: flex; align-items: center; gap: 8px; color: #66766c; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.auth-eyebrow span { width: 3px; height: 3px; border-radius: 50%; background: #8a9c90; }
.auth-intro h1 { max-width: 350px; margin-top: 13px; color: #202b33; font-size: 39px; font-weight: 800; line-height: 1.13; letter-spacing: -.055em; }
.auth-intro > p:last-child { max-width: 310px; margin-top: 11px; color: #68757d; font-size: 12px; line-height: 1.6; }
.auth-google-button { display: grid; grid-template-columns: 20px minmax(0,1fr) 20px; min-height: 56px; gap: 10px; padding: 0 17px; border-radius: 13px; background: #26333d; text-align: center; }
.auth-google-button > i { justify-self: end; opacity: .75; }
.auth-connection-note { max-width: none; margin: 9px auto 0; color: #84918c; font-size: 10px; line-height: 1.5; }
.auth-order-preview { padding: 17px; border: 1px solid #e0e7e2; border-radius: 19px; background: #fff; box-shadow: 0 7px 25px rgba(25,40,48,.045); }
.auth-order-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #6e8175; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.auth-order-preview-head span:last-child { color: #98a59e; font-size: 9px; }
.auth-order-preview-service { display: flex; align-items: center; gap: 11px; margin-top: 17px; }
.auth-order-preview-icon { display: inline-flex; width: 42px; height: 42px; flex: none; align-items: center; justify-content: center; border-radius: 11px; background: #edf2ee; color: #34483b; }
.auth-order-preview-service > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.auth-order-preview-service strong { color: #202b33; font-size: 13px; line-height: 1.3; }
.auth-order-preview-service small { color: #82918a; font-size: 10px; }
.auth-order-preview-progress { margin-top: 18px; }
.auth-order-preview-progress > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auth-order-preview-progress strong { color: #3a694a; font-size: 11px; }
.auth-order-status { display: inline-flex; align-items: center; gap: 7px; }
.auth-order-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #52805e; }
.auth-order-preview-progress small { color: #68757d; font-size: 10px; }
.auth-order-preview-track { height: 6px; overflow: hidden; margin-top: 9px; border-radius: 6px; background: #e8eeea; }
.auth-order-preview-track span { display: block; width: 65%; height: 100%; border-radius: inherit; background: #577a61; }
.auth-order-preview-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #edf1ed; color: #6d7d73; font-size: 9px; font-weight: 650; }
.auth-order-preview-foot span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-height: 740px) { .auth-main { gap: 16px; padding: 18px 0 12px; } .auth-intro h1 { font-size: 33px; } .auth-order-preview { padding: 14px; } .auth-order-preview-service { margin-top: 13px; } .auth-order-preview-progress { margin-top: 13px; } }
@media (max-width: 370px) { .auth-screen { padding-left: 18px; padding-right: 18px; } .auth-intro h1 { font-size: 33px; } }

/* Purposeful, low-cost motion on the welcome screen. */
.auth-intro { animation: auth-enter .65s cubic-bezier(.2,.7,.2,1) both; }
.auth-actions { animation: auth-enter .65s cubic-bezier(.2,.7,.2,1) .12s both; }
.auth-order-preview { animation: auth-enter .7s cubic-bezier(.2,.7,.2,1) .25s both; }
.auth-order-status i { animation: auth-status-pulse 2.8s ease-in-out 1.5s infinite; }
.auth-order-preview-track span { position: relative; overflow: hidden; transform-origin: left center; animation: auth-progress-fill 1.15s cubic-bezier(.18,.72,.25,1) .7s both; }
.auth-order-preview-track span::after { content: ''; position: absolute; top: 0; bottom: 0; left: -25%; width: 25%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); animation: auth-progress-sweep 4.6s ease-in-out 2.1s infinite; }
@keyframes auth-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes auth-status-pulse { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes auth-progress-sweep { 0%, 58% { opacity: 0; transform: translateX(0); } 68% { opacity: .7; } 82%, 100% { opacity: 0; transform: translateX(500%); } }
@media (prefers-reduced-motion: reduce) {
  .auth-intro, .auth-actions, .auth-order-preview, .auth-order-status i, .auth-order-preview-track span, .auth-order-preview-track span::after { animation: none; }
}

/* Editorial login with a compact animated order dashboard. */
.auth-screen-v2 { position: relative; overflow: hidden; background: #fafbf9; }
.auth-screen-v2 .auth-topline, .auth-screen-v2 .auth-main { position: relative; z-index: 1; }
.auth-screen-v2 .auth-main { justify-content: center; justify-content: safe center; gap: 24px; padding: 14px 0; }
.auth-growth-arc { position: absolute; z-index: 2; top: 88px; left: 50%; width: min(280px, 76%); height: 90px; transform: translateX(-50%); pointer-events: none; }
.auth-growth-arc svg { display: block; width: 100%; height: 100%; overflow: visible; }
.auth-growth-guide { stroke: #e7eeea; stroke-width: 1; stroke-dasharray: 2 6; }
.auth-growth-path { stroke: #779781; stroke-width: 3; stroke-linecap: round; }
.auth-growth-point { fill: #fafbf9; stroke: #779781; stroke-width: 2; }
.auth-growth-point-end { fill: #6d8a76; stroke: #fafbf9; stroke-width: 3; }
.auth-journey { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px; color: #6d7d74; }
.auth-journey::before { content: ''; position: absolute; top: 3px; right: 16%; left: 16%; height: 1px; background: #dbe5de; }
.auth-journey span { position: relative; display: flex; align-items: center; flex-direction: column; gap: 9px; font-size: 10px; font-weight: 700; line-height: 1.25; text-align: center; }
.auth-journey span::before { content: ''; width: 7px; height: 7px; border: 1.5px solid #789381; border-radius: 50%; background: #fafbf9; }
.auth-screen-v2 .auth-intro { display: flex; width: 100%; align-items: flex-start; flex-direction: column; padding-inline: 18px; text-align: left; }
.auth-topline { display: flex; min-height: 43px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: #26333d; text-align: center; }
.auth-topline strong { font-size: 16px; font-weight: 850; letter-spacing: .14em; line-height: 1; }
.auth-topline small { color: #82918a; font-size: 9px; font-weight: 750; letter-spacing: .15em; line-height: 1.25; white-space: nowrap; }
.auth-screen-v2 .auth-eyebrow { color: #668070; font-size: 10px; letter-spacing: .14em; }
.auth-screen-v2 .auth-intro h1 { max-width: 340px; margin-top: 0; font-size: 32px; font-weight: 780; line-height: 1.12; letter-spacing: -.057em; }
.auth-screen-v2 .auth-intro h1 span { display: block; font: inherit; }
.auth-screen-v2 .auth-intro > p:last-child { max-width: 325px; margin-top: 15px; color: #617078; font-size: 12px; line-height: 1.6; }
.auth-stage { position: relative; min-height: 266px; overflow: hidden; padding: 18px; border-radius: 23px; background: #26333d; color: #fff; box-shadow: 0 15px 32px rgba(27,43,50,.13); animation: auth-enter .7s cubic-bezier(.2,.7,.2,1) .18s both; }
.auth-screen-v2 .auth-stage { min-height: 216px; }
.auth-stage::before { content: ''; position: absolute; top: -105px; right: -70px; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.018); pointer-events: none; }
.auth-stage-lines { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 95%); pointer-events: none; }
.auth-stage-head, .auth-stage-main { position: relative; z-index: 1; }
.auth-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #b9c9c1; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.auth-stage-head span:last-child { color: #e1eae4; font-size: 8px; }
.auth-stage-main { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.auth-stage-ring { position: relative; width: 132px; height: 132px; flex: none; }
.auth-stage-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.auth-stage-ring circle { fill: none; stroke-width: 7; }
.auth-stage-ring-base { stroke: rgba(255,255,255,.16); }
.auth-stage-ring-value { stroke: #b9d4bd; stroke-linecap: round; stroke-dasharray: 221 339; stroke-dashoffset: 221; animation: auth-ring-draw 1.4s cubic-bezier(.18,.72,.25,1) .55s forwards; }
.auth-stage-ring > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.auth-stage-ring strong { color: #fff; font-size: 33px; line-height: 1; letter-spacing: -.06em; }
.auth-stage-ring strong small { margin-left: 1px; font-size: 16px; font-weight: 650; }
.auth-stage-ring em { margin-top: 6px; color: #b9c9c1; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .12em; }
.auth-stage-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.auth-stage-copy > span { display: inline-flex; align-items: center; gap: 6px; color: #b9d4bd; font-size: 8px; font-weight: 800; letter-spacing: .07em; }
.auth-stage-copy > span i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #b9d4bd; animation: auth-status-pulse 2.8s ease-in-out infinite; }
.auth-stage-copy > strong { margin-top: 8px; color: #fff; font-size: 16px; font-weight: 750; line-height: 1.3; letter-spacing: -.025em; }
.auth-stage-copy > small { margin-top: 8px; color: #b9c9c1; font-size: 9px; line-height: 1.45; }
.auth-screen-v2 .auth-actions { animation-delay: .32s; }
.auth-screen-v2 .auth-google-button { border-color: #cdd8d0; background: #fff; color: #26333d; box-shadow: 0 5px 14px rgba(25,40,48,.04); }
.auth-screen-v2 .auth-google-button:hover { border-color: #a8bdae; background: #f7faf7; }
.auth-screen-v2 .auth-google-button > svg:last-child { justify-self: end; }
.auth-trust-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 11px; color: #66766d; font-size: 11px; font-weight: 600; line-height: 1.4; text-align: center; }
.auth-trust-note svg { width: 14px; height: 14px; flex: none; color: #718f7b; }
.auth-google-host { width: 100%; min-height: 44px; }
.auth-sign-in-error:not([hidden]) { margin-top: 10px; color: #aa3b3b; font-size: 12px; line-height: 1.5; text-align: center; }
.auth-button-action { display: grid; place-items: center; justify-self: end; width: 20px; height: 20px; }
.auth-button-spinner { display: none; width: 16px; height: 16px; border: 2px solid #d9e2dc; border-top-color: #26333d; border-radius: 50%; animation: auth-button-spin .8s linear infinite; }
.auth-google-button.is-loading .auth-button-spinner { display: block; }
.auth-google-button.is-loading .auth-button-arrow { display: none; }
.auth-google-button:disabled { cursor: wait; }
#google-sign-in-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes auth-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-button-spinner { animation: none; border-right-color: #26333d; } }
.live-account { padding: 18px 0 32px; color: #26333d; }
.live-brand { display: grid; gap: 3px; margin-bottom: 42px; text-align: center; }
.live-brand strong { font-size: 17px; letter-spacing: .13em; }
.live-brand small { color: #7c9085; font-size: 9px; letter-spacing: .1em; font-weight: 700; }
.live-profile { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
.live-avatar { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 18px; background: #e7eee9; font-size: 22px; font-weight: 750; }
.live-profile > div { min-width: 0; }
.live-profile small { color: #7c9085; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.live-profile h1 { margin: 3px 0; font-size: 23px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.live-profile p { color: #718078; font-size: 12px; overflow-wrap: anywhere; }
.live-wallet { padding: 24px; border-radius: 24px; background: #26333d; color: #fff; }
.live-wallet > div { display: flex; align-items: center; justify-content: space-between; color: #bbcfc2; font-size: 12px; }
.live-wallet svg { width: 20px; height: 20px; }
.live-wallet p { margin: 16px 0; font-size: 13px; }
.live-wallet strong { margin-right: 6px; font-size: 48px; font-weight: 750; line-height: 1; overflow-wrap: anywhere; }
.live-wallet small { display: block; padding-top: 14px; border-top: 1px solid #4c5a60; color: #bbcfc2; font-size: 11px; line-height: 1.5; }
.live-account-ready { display: flex; gap: 12px; padding: 22px 0; }
.live-account-ready > svg { width: 21px; height: 21px; flex: none; margin-top: 2px; color: #688878; }
.live-account-ready h2 { margin-bottom: 5px; font-size: 14px; font-weight: 750; }
.live-account-ready p { color: #718078; font-size: 12px; line-height: 1.65; }
.live-refresh { width: 100%; min-height: 48px; }
.live-refresh svg { width: 16px; height: 16px; }
.live-sign-out { display: block; width: 100%; min-height: 48px; margin-top: 12px; color: #66766d; font-size: 13px; font-weight: 650; }
.auth-screen-v2 .auth-connection-note { margin-top: 11px; }
@keyframes auth-ring-draw { to { stroke-dashoffset: 0; } }
@media (max-height: 770px) { .auth-growth-arc { top: 64px; width: min(230px, 67%); height: 64px; } .auth-journey { font-size: 9px; } }
@media (max-height: 640px) { .auth-growth-arc, .auth-journey { display: none; } }
@media (max-height: 740px) { .auth-screen-v2 .auth-main { gap: 17px; padding: 10px 0; } .auth-screen-v2 .auth-intro { padding-inline: 15px; } .auth-screen-v2 .auth-intro h1 { font-size: 30px; } .auth-stage { padding: 15px; } .auth-screen-v2 .auth-stage { min-height: 196px; } .auth-stage-main { gap: 9px; margin-top: 12px; } .auth-stage-ring { width: 113px; height: 113px; } .auth-stage-ring strong { font-size: 29px; } .auth-stage-copy > strong { font-size: 14px; } }
@media (max-width: 370px) { .auth-screen-v2 .auth-intro h1 { font-size: 29px; } .auth-stage-main { gap: 8px; } .auth-stage-ring { width: 108px; height: 108px; } .auth-stage-copy > strong { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .auth-stage, .auth-stage-ring-value, .auth-stage-copy > span i { animation: none; } .auth-stage-ring-value { stroke-dashoffset: 0; } }

/* Google identity and live account screens */
.account-avatar { position: relative; overflow: hidden; flex: none; }
.account-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.home-account-identity { margin: 0; }
.production-app .preview-header { display: none; }
.live-reward-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }
.live-reward-days > div { display: grid; gap: 8px; padding: 12px 3px; border: 1px solid #e2e8e4; border-radius: 12px; text-align: center; color: #7b8780; font-size: 10px; }
.live-reward-days strong { font-size: 13px; }
.live-reward-days .is-current { background: #26333d; border-color: #26333d; color: white; }
.live-reward-days .is-claimed { background: #edf5ef; color: #526b5c; }

/* Service explorer: wrapping controls and consistent, comparable prices. */
.catalog-explore-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; margin-top:16px; padding:12px 16px; border:1px solid #ccdcd2; border-radius:14px; background:#eaf2ed; color:#26333d; font-size:14px; font-weight:700; }
.catalog-filter-panel { padding:16px; border:1px solid #dfe7e2; border-radius:18px; background:#fff; }
.catalog-search { display:flex; gap:8px; min-width:0; }
.catalog-search .flow-input { flex:1; min-width:0; width:100%; font-size:16px; }
.catalog-search button { flex:none; min-width:48px; }
.catalog-filter-selects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.catalog-filter-selects label { display:grid; gap:6px; min-width:0; color:#708077; font-size:12px; font-weight:600; }
.catalog-filter-selects select { width:100%; min-width:0; max-width:100%; min-height:48px; padding:10px 28px 10px 10px; border:1px solid #e1e8e3; border-radius:12px; background:#f7faf8; color:#26333d; font:inherit; font-size:16px; }
.catalog-sort { grid-column:1/-1; }
.catalog-filter-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.catalog-filter-chip,.catalog-filter-reset { min-height:48px; padding:9px 13px; border:1px solid #dfe7e2; border-radius:12px; background:#fff; color:#61736a; font-size:13px; font-weight:650; }
.catalog-filter-chip.is-active { border-color:#26333d; background:#26333d; color:#fff; }
.catalog-filter-reset { margin-left:auto; border-color:transparent; text-decoration:underline; }
.catalog-results { margin:0; font-size:13px; color:#708077; }
.catalog-context { display:block; margin-bottom:6px; color:#78867e; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.catalog-badges { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.catalog-badge { display:inline-flex; align-items:center; padding:6px 9px; border-radius:8px; background:#f0f3f1; color:#6b7b72; font-size:11px; font-weight:650; }
.catalog-badge.is-popular { background:#26333d; color:#fff; }
.catalog-badge.is-fast,.catalog-badge.is-fast-start,.catalog-badge.is-refill { background:#eaf4ed; color:#417a58; }
.catalog-badge.is-slow { background:#fff3e6; color:#9b692c; }
.catalog-empty { padding:32px 20px; display:grid; justify-items:center; gap:12px; text-align:center; background:white; border:1px dashed #ccd9d0; border-radius:18px; }
.catalog-empty h2 { margin:0; font-size:17px; font-weight:700; }.catalog-empty p { margin:0; color:#75867b; font-size:13px; }
.catalog-pagination { display:flex; justify-content:space-between; align-items:center; gap:8px; }.catalog-pagination span { font-size:12px; white-space:nowrap; color:#708077; }
.service-option-details dd,.service-guide-facts dd { overflow-wrap:anywhere; }
#order-details-primary:disabled { opacity:.45; cursor:not-allowed; }
@media(max-width:360px) { .catalog-filter-panel { padding:12px; }.catalog-filter-chip { padding-inline:10px; }.catalog-pagination button { padding-inline:12px; }.service-option-footer { flex-wrap:wrap; }.service-option-footer>div { min-width:0; }.service-option-footer button { flex-shrink:0; } }

.catalog-results-row { display:flex; justify-content:space-between; align-items:center; gap:8px; }.catalog-results-row .catalog-filter-reset { padding:0 4px; font-size:12px; }

/* Compact, optional filters. Native form text stays 16px to avoid iOS zoom. */
.catalog-filter-panel.is-collapsible { padding:0; border-radius:13px; }
.catalog-filter-panel.is-collapsible>summary { display:flex; align-items:center; gap:8px; min-height:48px; padding:10px 14px; color:#52665b; cursor:pointer; font-size:12px; font-weight:650; list-style:none; }
.catalog-filter-panel.is-collapsible>summary::-webkit-details-marker { display:none; }
.catalog-filter-panel.is-collapsible>summary>span { display:flex; align-items:center; gap:8px; flex:1; }
.catalog-filter-panel.is-collapsible>summary>small:not(:empty) { min-width:20px; padding:3px 6px; border-radius:6px; background:#eaf2ed; color:#506c5d; text-align:center; font-size:10px; }
.catalog-filter-panel.is-collapsible[open]>summary>svg:last-child { transform:rotate(180deg); }
.catalog-filter-body { padding:0 14px 14px; border-top:1px solid #eef2ef; }
.catalog-filter-body .catalog-filter-selects label { font-size:11px; }
.catalog-filter-body .catalog-filter-chip { font-size:11px; padding-inline:11px; }
.compact-catalog-search input { border-radius:13px; min-height:48px; }
.catalog-context { font-size:10px; }.service-options-list .service-option h2 { font-size:15px; line-height:1.4; }
.service-options-list .service-option-details { font-size:11px; }.service-options-list .service-option-footer strong { font-size:21px; }
.service-options-list .service-option-footer small,.service-options-list .service-option-range,.service-options-list .service-guide summary { font-size:11px; }
.order-refund-panel { display:flex; align-items:flex-start; gap:12px; padding:18px; border:1px solid #e4e8e5; border-radius:18px; background:#fff; color:#52665b; }
.order-refund-panel.is-returned { background:#edf6ef; border-color:#cfe1d3; }.order-refund-panel>span { padding:9px; border-radius:11px; background:#ffffffb3; flex:none; }
.order-refund-panel h2 { margin:0 0 6px; font-size:15px; font-weight:750; color:#263c31; }.order-refund-panel p { margin:0; font-size:12px; line-height:1.7; }
.order-refund-panel button { display:flex; align-items:center; gap:7px; min-height:48px; font-size:12px; font-weight:650; }.order-refund-inline { display:block; margin-top:10px; color:#43805b; font-size:11px; font-weight:650; }

/* Supplier features and persistent order updates. */
.service-feature-chips { display:flex;flex-wrap:wrap;gap:6px;margin-top:11px; }
.service-feature-chips span { padding:4px 8px;border-radius:7px;background:#eef4f0;color:#4f6b5b;font-size:10px;line-height:1.4; }
.service-option-summary { margin-top:9px;color:#6b7871;font-size:11px;line-height:1.6;overflow-wrap:anywhere; }
.service-feature-list li strong,.service-feature-list li span { display:block; }
.service-feature-list li strong { color:#33463b;font-size:12px; }
.service-feature-list li span { margin-top:3px;color:#6b7871;font-size:11px;line-height:1.55; }
.history-completion-note { display:flex;gap:9px;margin-top:5px;padding:12px;border-radius:12px;background:#eef5f0;color:#476653;font-size:12px;line-height:1.5; }
.history-completion-note svg { width:17px;height:17px;flex:none; }
.history-completion-note small { display:block;font-size:10px;color:#7d8e81; }
@media(max-width:360px) { .history-entry { flex-direction:column;gap:3px; }.history-entry time { white-space:normal; } }

/* Compact filters, readable conditions, richer saved services and order status. */
.filter-select-control { position:relative;display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 12px;border:1px solid #e2e8e4;border-radius:10px;background:#f8faf9; }
.filter-select-control>span { flex:1;min-width:0;color:#33483d;font-size:12px;font-weight:650;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.filter-select-control>svg { width:14px;height:14px;flex:none;color:#84968c; }
.catalog-filter-selects .filter-select-control select { position:absolute;inset:0;opacity:0;width:100%;height:100%;min-height:46px;font-size:16px;cursor:pointer; }
.filter-select-control:focus-within { outline:2px solid #adc5b6;outline-offset:2px; }
.catalog-filter-selects { gap:10px; }.catalog-filter-body .catalog-filter-chip { border-radius:9px;min-height:44px;font-size:11px; }
.service-favorite-open { padding:13px;gap:11px;min-height:103px;align-items:flex-start; }.service-favorite-open>.platform-logo { margin-top:3px; }.service-favorite-open>svg { width:16px;height:16px;align-self:center; }
.service-favorite-open .saved-service-context { margin:0;color:#8a978f;font-size:9px;font-weight:500; }.service-favorite-open strong { margin-top:3px;font-size:12px;line-height:1.45;white-space:normal; }
.saved-service-tags { display:flex;gap:5px;flex-wrap:wrap;margin-top:6px; }.saved-service-tags em { font-style:normal;font-size:9px;color:#547760;background:#eef5f0;border-radius:5px;padding:2px 5px; }
.saved-service-price { display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin-top:7px; }.saved-service-price b { font-size:10px;color:#3c5144;font-weight:650; }.saved-service-price small { margin:0;font-size:9px;color:#89978e; }
.service-favorite-remove { align-self:stretch;min-height:48px;width:44px; }.service-favorite-row { border-radius:15px;box-shadow:0 3px 12px rgba(32,53,41,.025); }
.order-destination-link { display:flex;align-items:center;gap:8px;min-height:30px;border-radius:5px; }.order-destination-link strong { flex:1;min-width:0;color:#446750;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9d8ce; }.order-destination-link>svg { width:16px;height:16px;color:#6f8c79;flex:none; }.order-destination-link:focus-visible { outline:2px solid #799c86;outline-offset:4px; }
.order-next-panel { background:#fff;border-radius:18px;padding:17px;border-color:#dfe9e2; }.order-status-intro { display:flex;align-items:center;gap:11px; }.order-status-symbol { display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#edf5ef;color:#63896e;flex:none; }.order-status-symbol svg { width:21px;height:21px; }.order-status-intro small { color:#819487;font-size:9px;letter-spacing:.08em;font-weight:700; }.order-status-intro h2 { margin-top:3px;font-size:15px;line-height:1.4; }.order-next-panel>p { margin-top:12px;font-size:11px;line-height:1.7;color:#718278; }
.order-status-footer { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid #edf1ee; }.order-status-footer small,.order-status-footer strong { display:block; }.order-status-footer small { font-size:9px;color:#91a095; }.order-status-footer strong { margin-top:3px;font-size:10px;color:#5c7062; }.order-status-footer button { display:flex;gap:6px;align-items:center;min-height:44px;padding:8px 11px;border-radius:9px;border:1px solid #e0e9e3;font-size:11px;font-weight:650;color:#41624b;background:#f8fbf9; }.order-status-footer button svg { width:14px;height:14px; }.order-next-panel>.order-status-estimate { margin-top:9px;font-size:10px; }
@media(max-width:360px) { .order-status-footer { flex-wrap:wrap; }.filter-select-control { padding-inline:9px; }.service-favorite-open { padding:11px; }.service-guide-facts { gap:6px; } }

.order-next-panel.status-danger .order-status-symbol { background:#f9eeeb;color:#ad6a5d; }.order-next-panel.status-active .order-status-symbol { background:#edf2f6;color:#698297; }.order-next-panel.status-pending .order-status-symbol { background:#f6f2e9;color:#9d895b; }