/* app.css — the app's entire stylesheet, extracted verbatim from
   index.html's main <style> block (v223) so styles are findable and
   diffable without scrolling a 4,000-line HTML file. Loaded via a
   single render-blocking <link> in <head>, exactly where the inline
   block used to be, so load order/behavior is unchanged. The tiny
   Face ID lock-screen <style> stays co-located with its markup in
   index.html on purpose. No bundler, on purpose (see README). */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --sans: -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
  /* One typeface everywhere — the Apple-Weather calm. --mono kept as an
     alias so existing usages inherit the same SF stack (with tabular
     figures for aligned numbers) instead of a second font. */
  --mono: -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* Accent colors — one place to rebrand instead of hunting hex codes
     through every inline style. Used in both static CSS below and in
     dynamically-generated inline styles (JS template strings), since
     inline style="" attributes resolve CSS custom properties the same
     way stylesheet rules do. */
  --accent-gold: #f2c66d;    /* Wedding menu, primary brand accent */
  --accent-green: #34c759;   /* PhotoStudio/Walkaround, "received" status */
  --accent-red: #ff453a;     /* destructive actions, "pending" status */
  --accent-red-soft: #ff6b6b; /* softer red for less-emphasized warnings */
}
html,
body {
  height: 100%;
  background: #000;
  color: #000;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
/* No scrollbars anywhere — every scroll container stays clean. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
#app {
  max-width: 430px;
  margin: 0 auto;
  /* Fill the whole screen reliably in standalone PWA. 100% chains from
     html/body (both 100%) = the real viewport, which iOS computes more
     reliably than 100dvh in home-screen mode (dvh can fall short and
     leave a gap that lifts the bottom nav). */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  /* Scope the z-index layering below (aurora:0 < content:1 < bnav:50 <
     overlays:300) to this container so it can never leak out. */
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 50% at 85% 100%,
      rgba(120, 90, 200, 0.18), rgba(0, 0, 0, 0) 70%),
    linear-gradient(
      135deg,
      rgba(242, 198, 109, 0.28) 0%,
      rgba(242, 198, 109, 0.12) 22%,
      rgba(242, 198, 109, 0.03) 40%,
      rgba(0, 0, 0, 0) 60%
    ),
    #000;
}

/* ── Ambient animated background (Gemini-startup style) ──────────────────
   Three soft, blurred colour blobs in the app palette that slowly drift and
   breathe behind the content. GPU-friendly: only transform/opacity animate,
   so each heavily-blurred blob is rasterised once and cheaply composited.
   Sits at z-index 0 (below the content layer at z-index 1), never captures
   taps, and freezes for users who prefer reduced motion. */
.app-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora-blob {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform, opacity;
}
.aurora-blob.a1 {
  top: -12%;
  left: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(242, 198, 109, 0.5), rgba(242, 198, 109, 0) 70%);
  animation: auroraA 20s ease-in-out infinite;
}
.aurora-blob.a2 {
  top: 10%;
  right: -24%;
  background: radial-gradient(circle at 50% 50%, rgba(124, 92, 208, 0.5), rgba(124, 92, 208, 0) 70%);
  animation: auroraB 26s ease-in-out infinite;
}
.aurora-blob.a3 {
  bottom: -14%;
  left: 20%;
  background: radial-gradient(circle at 50% 50%, rgba(52, 199, 89, 0.3), rgba(52, 199, 89, 0) 70%);
  animation: auroraC 30s ease-in-out infinite;
}
@keyframes auroraA {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  33% { transform: translate(16%, 12%) scale(1.15); opacity: 1; }
  66% { transform: translate(-8%, 20%) scale(0.95); opacity: 0.65; }
}
@keyframes auroraB {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.75; }
  40% { transform: translate(-20%, 16%) scale(1.2); opacity: 1; }
  70% { transform: translate(-6%, -10%) scale(0.9); opacity: 0.6; }
}
@keyframes auroraC {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate(14%, -18%) scale(1.15); opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; }
}
/* In-app "Reduce motion" toggle (Settings) — an override on top of the OS
   media query above, so the animated background can be frozen without
   changing a system setting. */
#app.reduce-motion .aurora-blob {
  animation: none !important;
}
/* iOS-style toggle switch (Settings rows). */
.ios-switch {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
  transition: background 0.2s;
  cursor: pointer;
}
.ios-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.ios-switch.on {
  background: var(--accent-green);
}
.ios-switch.on::after {
  transform: translateX(18px);
}
/* Lift the real content above the aurora layer. .bnav/.statusbar-fade and
   the overlays already carry their own higher z-index. */
.hdr,
#reminderBanner,
.content {
  position: relative;
  z-index: 1;
}

/* LOGIN */
.login-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  padding: 48px 28px;
  background: radial-gradient(
    ellipse 160% 130% at 0% 100%,
    #3a3a3a 0%,
    #1c1c1c 45%,
    #0a0a0a 70%,
    #000 90%
  );
  text-align: center;
}
.login-icon {
  width: 160px;
  height: 160px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Wrong-password shake — mirrors iOS's own passcode-reject gesture,
   applied to the mascot on catReact('wrong'). */
@keyframes catShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-9px) rotate(-1.5deg); }
  40%, 60% { transform: translateX(9px) rotate(1.5deg); }
}
.cat-shake { animation: catShake 0.55s cubic-bezier(.36,.07,.19,.97) both; }
/* Correct-password bounce — quick happy pop before the app opens. */
@keyframes catBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.12) rotate(-2deg); }
  60% { transform: scale(0.96) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}
.cat-bounce { animation: catBounce 0.5s cubic-bezier(.34,1.56,.64,1) both; }
.login-title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.6px;
  margin-bottom: 6px;
}
.login-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 40px;
}
.lf-lbl {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
  display: block;
  text-align: left;
  width: 100%;
}
.lf-inp {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  margin-bottom: 14px;
  transition: border-color 0.2s;
  text-align: left;
}
.lf-inp:focus {
  border-color: rgba(255, 255, 255, 0.35);
}
.btn-login {
  width: 100%;
  padding: 16px;
  background: #d4af37;
  border: none;
  border-radius: 14px;
  color: #000;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  margin-top: 4px;
}
.btn-login:active {
  opacity: 0.85;
}
.login-err {
  font-size: 13px;
  color: var(--accent-red);
  margin-bottom: 12px;
  display: none;
}
.login-toggle {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}
.login-toggle span {
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

/* HEADER */
.hdr {
  padding: calc(var(--safe-top) + 12px) 20px 12px;
  background: transparent;
  flex-shrink: 0;
}
.hdr-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.hdr-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hdr-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hdr-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}
.btn-signout {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.hero-lbl {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 6px;
}
.hero-amt {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
}
/* Small IDR conversion of the Total Comm, under the hero figure (v250). */
.hero-idr {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 3px;
  letter-spacing: 0.1px;
  min-height: 15px;
}
.hero-idr .hero-idr-rate {
  opacity: 0.6;
}
.hero-sub {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}
.hero-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.hero-dot.w {
  background: #c9a84c;
}
.hero-dot.p {
  background: var(--accent-green);
}
.hero-item-lbl {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.hero-item-val {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* NAV */
.bnav {
  display: flex;
  /* Float over the scrolling content, WhatsApp-style.
     Fixed to the REAL screen viewport (not #app) so it always hugs
     the bottom edge even if the app container height is miscomputed
     in standalone PWA mode. */
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 430px;
  /* Frosted glass tab bar, WhatsApp-style. Sits at the viewport
     bottom; the OS-reserved strip below it (unpaintable on iOS 26
     standalone) is pure black, and the home indicator lives there,
     so a modest fixed padding replaces the safe-area inset. */
  bottom: 0;
  z-index: 50;
  background: rgba(18, 18, 20, 0.55);
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0 12px;
  backdrop-filter: blur(36px) saturate(1.9) brightness(1.05);
  -webkit-backdrop-filter: blur(36px) saturate(1.9) brightness(1.05);
  /* Liquid-glass rim (v245): a bright top edge + a soft lift shadow so the
     tab bar reads as a floating pane of glass. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 -6px 20px rgba(0, 0, 0, 0.28);
}
/* Top status-bar melt: black fade under the time/battery area so the
   content dissolves into the status bar like native apps. */
.statusbar-fade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--safe-top) + 26px);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 60;
  pointer-events: none;
}
.nb {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-family: var(--sans);
}
.nb-dot {
  display: none;
  position: absolute;
  top: 4px;
  left: calc(50% + 7px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 0 2px rgba(18, 18, 20, 0.85);
}
.nb-dot.show {
  display: block;
}
.nb-lbl {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
}
.nb-ico {
  color: rgba(255, 255, 255, 0.4);
  display: block;
}
.nb.active .nb-ico {
  color: var(--accent-gold);
}
.nb.active .nb-lbl {
  color: var(--accent-gold);
  font-weight: 700;
}

/* CONTENT */
.content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}
.content::-webkit-scrollbar {
  display: none;
}
.page {
  display: none;
  /* Clear the floating bottom nav so nothing hides behind it */
  padding-bottom: calc(88px + var(--safe-bot));
}
.page.active {
  display: block;
}
.sec-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 20px 12px;
}
/* Voyages header: sticky, frosted so it blends with the app gradient
   (no hard black edge) while content scrolling under stays readable. */
#voyHdr {
  position: sticky;
  top: 0;
  z-index: 5;
  align-items: center;
  background: rgba(20, 16, 8, 0.55);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.sec-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.ghost-toggle-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px 10px 4px 8px;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ghost-toggle-btn.active {
  background: rgba(190, 150, 255, 0.15);
  border-color: rgba(190, 150, 255, 0.4);
  color: #c9a8ff;
}
.btn-export {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: rgba(255,255,255,0.7);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-export:active { opacity: 0.7; }
.sec-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}

/* VOYAGE CARD */
/* Liquid-glass surface (v245): stronger blur + saturation/brightness so the
   animated aurora glows through, a bright inset top edge (light catching the
   glass), a soft inner bottom shadow for depth, and an outer float shadow. */
.vcard {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(30px) saturate(1.8) brightness(1.05);
  backdrop-filter: blur(30px) saturate(1.8) brightness(1.05);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  margin: 0 12px 9px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -10px 22px rgba(0, 0, 0, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.22);
}
/* Newest voyage — brighter glass so it stands out at the top of the list */
.vcard-latest {
  background: rgba(242, 198, 109, 0.14);
  border: 0.5px solid rgba(242, 198, 109, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(242, 198, 109, 0.08),
    0 8px 28px rgba(242, 198, 109, 0.12);
}
.vc-latest-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #1a1408;
  background: var(--accent-gold);
  border-radius: 20px;
  vertical-align: middle;
}
/* Not clickable as a whole (v228) — the touch area for opening the detail
   sheet is confined to the Wedding/Walkaround .vc-stat boxes below, not
   the whole header. The badges/buttons inside still have their own
   cursor:pointer + tap feedback independently. */
.vc-head {
  padding: 14px 16px 12px;
}
.vc-r1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3px;
}
/* Tapping the voyage number opens its config sheet for editing (v238 —
   replaced the standalone edit pencil). cursor:pointer + a subtle press
   feedback signal it's interactive; the number is the only tappable bit,
   the rest of the header background stays inert (v228). */
.vc-num {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.vc-num:active {
  opacity: 0.6;
}
.vc-total {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
}
.vc-meta {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.45;
}
.pay-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.pay-badge.received {
  background: rgba(52, 199, 89, 0.15);
  color: #1f8a3d;
}
.pay-badge.pending {
  background: rgba(255, 59, 48, 0.12);
  color: #c4281b;
}
/* Wedding commission status — gold family, distinct from PY's green/red */
.pay-badge.wed-received {
  background: rgba(242, 198, 109, 0.28);
  color: #8a6516;
}
.pay-badge.wed-pending {
  background: rgba(242, 198, 109, 0.1);
  color: rgba(180, 148, 92, 0.9);
}
/* "+" quick-add menu on each voyage card (v226) — jumps to Scan with this
   voyage pre-selected. Blue accent (no shared --accent-blue var exists yet;
   matches the #0a84ff already used for the Stats result chart's 7% tier).
   Pinned to the right edge of the badge row (v227) — right-thumb reach on
   a phone held one-handed — via margin-left:auto rather than DOM order
   alone, so it lands at a fixed, predictable spot regardless of how many
   badges precede it on a given card. */
.vc-add-wrap {
  position: relative;
  margin-left: auto;
}
.vc-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(10, 132, 255, 0.18);
  color: #0a84ff;
  cursor: pointer;
}
.vc-add-btn:active {
  filter: brightness(1.2);
}
/* The quick-add popover panel — lives inside #addMenuOverlay (a full-screen
   darken+blur overlay), positioned near the tapped card's "+" by JS (v247). */
.vc-add-menu {
  position: absolute;
  z-index: 20;
  min-width: 236px;
  /* Liquid glass (v246): more translucent so the darkened screen behind
     bleeds through, with a heavy blur keeping the menu text readable and a
     faint top-lit gradient sheen for the glassy "lit from above" look. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 45%),
    rgba(46, 46, 54, 0.55);
  -webkit-backdrop-filter: blur(40px) saturate(1.9) brightness(1.12);
  backdrop-filter: blur(40px) saturate(1.9) brightness(1.12);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 32px rgba(0, 0, 0, 0.5);
}
/* Darker + blurrier backdrop than the default sheet overlay — the
   iOS-context-menu dim (v247). The `.overlay.` prefix raises specificity so
   it beats the base `.overlay` rule that's defined later in the file. */
.overlay.add-menu-overlay {
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
/* Native-iOS rows: no divider lines, even vertical rhythm, generous padding.
   The panel already clips to its 16px radius, so the rows read as one clean
   stack (v248). */
.vc-add-menu button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
/* Press-and-hold highlight: a rounded-pill inset from the panel edges (like
   the native context menu's selected row), not an edge-to-edge fill. Painted
   by a pseudo-element behind the text (z-index:-1) so the label stays crisp
   (v248). */
.vc-add-menu button::before {
  content: "";
  position: absolute;
  inset: 2px 6px;
  z-index: -1;
  border-radius: 11px;
  background: transparent;
  transition: background 0.08s ease;
}
.vc-add-menu button:active::before {
  background: rgba(255, 255, 255, 0.2);
}
.vc-add-menu button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.pay-summary-card {
  flex: 1;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
}
.pay-summary-card.received {
  background: rgba(52, 199, 89, 0.1);
  border: 1px solid rgba(52, 199, 89, 0.3);
}
.pay-summary-card.pending {
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.25);
}
.psc-lbl {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.pay-summary-card.received .psc-lbl {
  color: #1f8a3d;
}
.pay-summary-card.pending .psc-lbl {
  color: #c4281b;
}
.psc-val {
  font-size: 18px;
  font-weight: 700;
}
.pay-summary-card.received .psc-val {
  color: var(--accent-green);
}
.pay-summary-card.pending .psc-val {
  color: var(--accent-red-soft);
}
.psc-sub {
  font-size: 10px;
  margin-top: 2px;
}
.pay-summary-card.received .psc-sub {
  color: rgba(52, 199, 89, 0.75);
}
.pay-summary-card.pending .psc-sub {
  color: rgba(255, 107, 107, 0.8);
}
/* Wedding comm status cards — gold family */
.pay-summary-card.wed-received {
  background: rgba(242, 198, 109, 0.14);
  border: 1px solid rgba(242, 198, 109, 0.4);
}
.pay-summary-card.wed-pending {
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.25);
}
.pay-summary-card.wed-received .psc-lbl,
.pay-summary-card.wed-received .psc-val {
  color: #d9ac52;
}
.pay-summary-card.wed-pending .psc-lbl {
  color: #c4281b;
}
.pay-summary-card.wed-pending .psc-val {
  color: var(--accent-red-soft);
}
.pay-summary-card.wed-received .psc-sub {
  color: rgba(242, 198, 109, 0.7);
}
.pay-summary-card.wed-pending .psc-sub {
  color: rgba(255, 107, 107, 0.8);
}
.vc-div {
  height: 0.5px;
  background: rgba(255, 255, 255, 0.08);
}
.vc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* Studio-role Master Photo: no Wedding, so the stat grid collapses to
   a single column (see isStudioMaster() in config.js). */
.vc-stats.solo {
  grid-template-columns: 1fr;
}
.vc-stats.solo .vc-stat:first-child {
  border-right: none;
}
.vc-stat {
  padding: 11px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.vc-stat:active {
  background: rgba(255, 255, 255, 0.05);
}
.vc-stat:first-child {
  border-right: 0.5px solid rgba(255, 255, 255, 0.08);
}
.vc-stat-l {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.vc-stat-v {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 3px;
}
.vc-stat-v.w {
  color: #fff;
}
.vc-stat-v.p {
  color: #fff;
}
.vc-stat-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}
.vc-py {
  background: rgba(255, 255, 255, 0.03);
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  padding: 10px 16px 0;
}
.vc-py-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.vc-py-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
}
.tier-badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
}
.tier-badge.t4 {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.1);
}
/* Crossed 0.30 PCD into the 7% tier — orange (dark-surface-
   validated, see dataviz skill). 10% Max reuses the app's
   standard green ("done"/"received" identity elsewhere). */
.tier-badge.t7 {
  color: #c8792a;
  background: rgba(200, 121, 42, 0.15);
}
.tier-badge.t10 {
  color: #1f8a3d;
  background: rgba(52, 199, 89, 0.15);
}
.track {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  margin-bottom: 14px;
}
.track-fill {
  height: 6px;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 6px;
}
/* Apple Weather–style muted capsule: soft, low-saturation gradients */
.track-fill.above {
  background: linear-gradient(90deg, rgba(120, 200, 160, 0.55), rgba(140, 210, 175, 0.85));
}
.track-fill.below {
  background: linear-gradient(90deg, rgba(220, 170, 120, 0.5), rgba(225, 155, 130, 0.8));
}
.vc-tiers {
  display: flex;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}
.vt {
  flex: 1 1 0;
  padding: 10px 8px;
  border-right: 0.5px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
  min-width: 0;
}
.vt:last-child {
  border-right: none;
}
.vt.act {
  background: rgba(255, 255, 255, 0.1);
}
.vt-rate {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 3px;
  font-family: var(--mono);
  white-space: nowrap;
}
.vt-amt {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vt.act .vt-rate {
  color: var(--accent-green);
}
.vt.act .vt-amt {
  color: var(--accent-green);
}
.vt-pct {
  display: inline-block;
  margin-left: 8px;
  opacity: 0.75;
}

/* Completed-cruise result table (Target/Achieved/Variance × PCD/$) —
   replaces the in-progress tier bar + tier boxes once a voyage is
   marked done, since chasing a tier no longer applies. PY only —
   Wedding has no tier/PCD concept (flat 10%). */
.vc-pcd-table {
  padding: 4px 16px 12px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}
.vc-pcd-tier-hd {
  padding-top: 10px;
  margin-bottom: 4px;
  /* Right-aligned (v227) — easier to spot at a glance, matching the
     non-completed card's tier badge, which already sits on the right of
     its own row (.vc-py-row is justify-content:space-between). */
  text-align: right;
}
.vc-pcd-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 6px 0;
}
.vc-pcd-row.hd {
  padding-bottom: 2px;
}
.vc-pcd-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
}
.vc-pcd-row.hd .vc-pcd-v {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.3);
}
.vc-pcd-v {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  text-align: right;
  color: rgba(255, 255, 255, 0.85);
}
.vc-pcd-row.variance {
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  margin-top: 2px;
  padding-top: 10px;
}
.vc-pcd-row.variance.pos .vc-pcd-lbl,
.vc-pcd-row.variance.pos .vc-pcd-v {
  color: var(--accent-green);
}
.vc-pcd-row.variance.neg .vc-pcd-lbl,
.vc-pcd-row.variance.neg .vc-pcd-v {
  color: var(--accent-red-soft);
}
/* Small target-vs-achieved bar under the Result table — a tick at
   the target position, fill to where sales actually landed. Scaled
   so achieved never overflows the track even when above target. */
.vc-pcd-bar {
  padding-top: 10px;
  margin-top: 2px;
}
.vc-pcd-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  position: relative;
  overflow: visible;
}
.vc-pcd-fill {
  height: 6px;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
}
.vc-pcd-fill.above {
  background: var(--accent-green);
}
.vc-pcd-fill.below {
  background: var(--accent-red-soft);
}
.vc-pcd-target {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 1px;
  transform: translateX(-50%);
}

/* EMPTY */
.empty {
  text-align: center;
  padding: 60px 20px;
}
.empty-t {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
.empty-s {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
}

/* SCAN */
.scan-section {
  padding: 16px 20px;
}
.field-lbl {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
  display: block;
}
.field-sel {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 13px 16px;
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
}
.setup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #1a1a1a;
  margin: 0 16px 12px;
  border-radius: 14px;
  cursor: pointer;
}
.setup-row:active {
  opacity: 0.8;
}
.setup-row-l {
  font-size: 13px;
  font-weight: 600;
}
.setup-row-l.ok {
  color: var(--accent-green);
}
.setup-row-l.warn {
  color: #ff9f0a;
}
.setup-row-s {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 2px;
}
.reminder-row {
  background: #1a1a1a;
  border-left: 3px solid var(--accent-gold);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.reminder-row-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.reminder-row > .reminder-row-main > button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}
.reminder-row > .reminder-row-main > button:active {
  color: #fff;
}
.reminder-expand {
  padding: 0 14px 12px;
}
.reminder-expand textarea {
  width: 100%;
  min-height: 52px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  font-family: var(--sans);
  font-size: 12.5px;
  box-sizing: border-box;
}
.reminder-expand textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.reminder-expand-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.reminder-resolve-btn {
  background: var(--accent-green);
  color: #05130d;
  border: none;
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.reminder-cancel-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  cursor: pointer;
  padding: 7px 6px;
}
.history-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 10px 2px 8px;
}
.history-row {
  background: #1a1a1a;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.history-row-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
.history-row.resolved {
  border-left: 3px solid var(--accent-green);
}
.history-row-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
}
.history-row-comment {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}
.history-row-comment.empty {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}
.history-row textarea {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  font-family: var(--sans);
  font-size: 12.5px;
  box-sizing: border-box;
  margin-top: 8px;
}
.history-row textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.history-empty {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  padding: 16px 0;
}
.upload-zone {
  position: relative;
  margin: 0 16px 12px;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 28px 20px;
  text-align: center;
  background: #080808;
  overflow: visible;
}
.upload-zone:active {
  border-color: rgba(255, 255, 255, 0.5);
}
.upload-zone input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}
.uz-t {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 10px;
  margin-bottom: 4px;
  pointer-events: none;
}
.uz-s {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
input[type="file"] {
  display: none;
}
.manual-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 16px 16px;
}
.btn-manual {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-manual:active {
  background: rgba(255, 255, 255, 0.08);
}
.btn-manual.w {
  color: #c9a84c;
  border-color: rgba(201, 168, 76, 0.25);
}
.btn-manual.p {
  color: var(--accent-green);
  border-color: rgba(52, 199, 89, 0.2);
}
.proc-list {
  padding: 0 16px;
}
.proc-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.proc-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.proc-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proc-status {
  font-size: 13px;
  font-weight: 500;
}
.proc-status.reading {
  color: rgba(255, 255, 255, 0.5);
}
.proc-status.done-w {
  color: #c9a84c;
}
.proc-status.done-p {
  color: var(--accent-green);
}
.proc-status.err {
  color: var(--accent-red);
}
.spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.res-hdr {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 0 10px;
}
.er-row {
  padding: 14px 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.er-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.er-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.er-tag.w {
  color: #c9a84c;
}
.er-tag.p {
  color: var(--accent-green);
}
.er-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.er-right {
  text-align: right;
  flex-shrink: 0;
  margin-left: 12px;
}
.er-sales {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 2px;
}
.er-comm {
  font-size: 16px;
  font-weight: 700;
}
.er-comm.w {
  color: #c9a84c;
}
.er-comm.p {
  color: var(--accent-green);
}
.er-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.5;
}

/* STATS */
.stats-wrap {
  padding: 0 20px;
}
.stat-block {
  padding: 20px 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.stat-lbl {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.stat-big {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.stat-row:last-child {
  border: none;
}
.stat-row-k {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}
.stat-row-v {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.stat-row-v.w {
  color: #c9a84c;
}
.stat-row-v.p {
  color: var(--accent-green);
}

/* MENU DRAWER — slides in from the left */
#aboutCard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 84vw;
  height: 100%;
  padding: calc(var(--safe-top) + 24px) 22px calc(24px + var(--safe-bot));
  background: rgba(20, 22, 28, 0.85);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  border-right: 0.5px solid rgba(255, 255, 255, 0.1);
  transform: translateX(-100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#aboutOverlay.open #aboutCard {
  transform: translateX(0);
}
.menu-x {
  position: absolute;
  top: calc(var(--safe-top) + 20px);
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 12px;
  border-radius: 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}
.menu-row:active {
  background: rgba(255, 255, 255, 0.07);
}
.menu-row span {
  flex: 1;
}
.menu-row .menu-chev {
  color: rgba(255, 255, 255, 0.3);
}

/* SHEETS */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.overlay.open {
  opacity: 1;
  pointer-events: all;
}
.sheet {
  border-radius: 24px 24px 0 0;
  padding: 0 0 calc(32px + var(--safe-bot));
  width: 100%;
  max-width: 430px;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.32, 1, 0.36, 1);
  /* Leave a generous tap-outside strip above the sheet; the very top
     of the screen is under the Dynamic Island where iOS eats taps. */
  max-height: 87dvh;
  overflow-y: auto;
}
.sheet::-webkit-scrollbar {
  display: none;
}
.overlay.open .sheet {
  transform: translateY(0);
}
.sh-handle {
  width: 36px;
  height: 4px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  margin: 14px auto 0;
  cursor: pointer;
  position: relative;
}
/* Invisible enlarged tap target around the 36x4 bar — closes the sheet */
.sh-handle::after {
  content: "";
  position: absolute;
  inset: -14px -44px;
}
.sheet-white {
  background: #fff;
  color: #000;
}
.sheet-dark {
  background: rgba(26, 26, 31, 0.72);
  -webkit-backdrop-filter: blur(42px) saturate(1.9) brightness(1.05);
  backdrop-filter: blur(42px) saturate(1.9) brightness(1.05);
  color: #fff;
  /* Bright top edge — the light-catching rim that reads as liquid glass. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sh-handle-dark {
  background: rgba(255, 255, 255, 0.2);
}

/* DETAIL SHEET */
.ds-hdr {
  padding: 20px 24px 0;
}
.ds-tag {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.ds-voyage {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.ds-meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}
.ds-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px 24px 0;
}
.ds-sum.solo {
  grid-template-columns: 1fr;
}
/* Studio-role Master Photo never has Wedding entries — hide the
   button/tab entirely rather than just showing it always empty. */
body.role-studio .btn-manual.w {
  display: none;
}
body.role-studio .manual-row {
  grid-template-columns: 1fr;
}
.ds-box {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}
.ds-box:active {
  opacity: 0.85;
}
.ds-box.act {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 14px rgba(255, 255, 255, 0.12);
}
.ds-box-l {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.ds-box-v {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 3px;
}
.ds-box-v.w {
  color: #e3b341;
}
.ds-box-v.p {
  color: var(--accent-green);
}
.ds-box-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.ds-pcd {
  margin: 16px 24px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  overflow: hidden;
}
.ds-pcd-rows {
  padding: 14px 16px 10px;
}
.ds-pcd-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.ds-pcd-row:last-child {
  border: none;
}
.ds-pcd-k {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}
.ds-pcd-v {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.ds-prog-wrap {
  padding: 8px 16px 14px;
}
.ds-prog-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  position: relative;
  overflow: visible;
  margin-top: 22px;
}
.ds-prog-fill {
  height: 2px;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
}
.ds-prog-fill.above {
  background: var(--accent-green);
}
.ds-prog-fill.below {
  background: #ff3b30;
}
.ds-prog-fcst {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 15px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1px;
  transform: translateX(-50%);
}
.ds-prog-cursor {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 15px;
  border-radius: 2px;
  transform: translateX(-50%);
}
.ds-prog-cursor.above {
  background: var(--accent-green);
}
.ds-prog-cursor.below {
  background: #ff3b30;
}
.ds-prog-now {
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--mono);
  white-space: nowrap;
}
.ds-prog-now.above {
  color: var(--accent-green);
}
.ds-prog-now.below {
  color: var(--accent-red-soft);
}
.ds-tier-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 24px;
  margin-bottom: 10px;
}
.ds-tier-table {
  margin: 0 24px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  overflow: hidden;
}
.ds-tier-thead {
  display: grid;
  grid-template-columns: 52px 1fr 1fr 1fr;
  padding: 8px 14px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}
.ds-tier-th {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
}
.ds-tier-th:first-child {
  text-align: left;
}
.ds-tier-row {
  display: grid;
  grid-template-columns: 52px 1fr 1fr 1fr;
  padding: 11px 14px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
}
.ds-tier-row:last-child {
  border: none;
}
.ds-tier-row.cur {
  background: rgba(255, 255, 255, 0.12);
}
/* The row for the user's own $PCD forecast (v230) — same neutral-white
   identity as .ds-prog-fcst's tick mark on the progress bar just above
   this table, so the two visually read as the same "your forecast"
   concept. Yields to .cur (already-reached, green) when both apply. */
.ds-tier-row.forecast:not(.cur) {
  border-left: 2px solid rgba(255, 255, 255, 0.4);
  padding-left: 12px;
}
.ds-tier-td {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
}
.ds-tier-td:first-child {
  text-align: left;
}
.ds-tier-row.cur .ds-tier-td {
  color: var(--accent-green);
}
.ds-view {
  display: none;
}
.ds-view.act {
  display: block;
}
.ds-sales-sum {
  margin: 16px 24px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ds-ss-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.ds-ss-amt {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
}
.ds-ss-txn {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 3px;
}
.ds-ss-tier {
  font-size: 13px;
  font-weight: 700;
}
.ds-ss-tier.p {
  color: var(--accent-green);
}
.ds-ss-tier.w {
  color: #e3b341;
}
.ds-entries {
  padding: 0 24px;
}
.ds-entry {
  padding: 14px 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}
.ds-entry:last-child {
  border: none;
}
.ds-entry-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ds-entry-shot {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.ds-entry-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.code-warn {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-red-soft);
  background: rgba(255, 59, 48, 0.1);
  padding: 2px 6px;
  border-radius: 6px;
  vertical-align: middle;
  margin-left: 4px;
}
.ds-entry-right {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  margin-left: 12px;
}
.ds-entry-amt {
  font-size: 15px;
  font-weight: 700;
}
.ds-entry-amt.w {
  color: #e3b341;
}
.ds-entry-amt.p {
  color: var(--accent-green);
}
.btn-edit {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px;
}
.ds-entry-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
  margin-top: 4px;
}
.ds-empty {
  padding: 32px 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}

/* EDIT SHEET */
.edit-hdr {
  padding: 20px 24px;
}
.edit-tag {
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.edit-name {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  margin-bottom: 3px;
}
.edit-meta {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}
.edit-body {
  padding: 0 24px 8px;
}
.edit-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  text-align: left;
}
.edit-btn-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.edit-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.edit-btn.view,
.edit-btn.download {
  background: #f5f5f7;
  color: #000;
}
.edit-btn.delete {
  background: rgba(255, 59, 48, 0.08);
  color: #ff3b30;
}
.btn-cancel-edit {
  width: 100%;
  padding: 14px;
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.4);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

/* SETUP & MANUAL SHEETS */
.sf-hdr,
.ms-hdr {
  padding: 20px 24px 0;
}
.sf-title,
.ms-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}
.sf-sub,
.ms-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 24px;
}
.sf-body,
.ms-body {
  padding: 0 24px;
}
.sf-lbl,
.ms-lbl {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: block;
}
.sf-inp,
.ms-inp {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 0 12px;
  color: #fff;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  outline: none;
  -webkit-appearance: none;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}
.sf-inp:focus,
.ms-inp:focus {
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.sf-row,
.ms-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sf-preview,
.ms-preview {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 24px;
  display: none;
}
.sf-prev-lbl,
.ms-prev-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sf-prev-grid,
.ms-prev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sf-prev-box,
.ms-prev-box {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 12px;
}
.sf-prev-box-l,
.ms-prev-box-l {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 4px;
}
.sf-prev-box-v,
.ms-prev-box-v {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.btn-save {
  width: 100%;
  padding: 16px;
  background: #fff;
  border: none;
  border-radius: 14px;
  color: #000;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  margin-bottom: 10px;
}
.btn-save:active {
  opacity: 0.85;
}
.btn-cancel {
  width: 100%;
  padding: 14px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* SCAN CONFIRM SHEET */
.cf-thumb {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 16px;
  display: block;
}
.cf-type-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.cf-type-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
}
.cf-type-btn.sel-w {
  border-color: #c9a84c;
  background: rgba(201,168,76,0.15);
  color: #c9a84c;
}
.cf-type-btn.sel-p {
  border-color: var(--accent-green);
  background: rgba(52,199,89,0.15);
  color: var(--accent-green);
}
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cf-field.full {
  grid-column: 1 / -1;
}
.cf-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cf-inp {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 9px 12px;
  color: #fff;
  font-family: var(--mono);
  font-size: 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.cf-inp:focus {
  border-color: rgba(255,255,255,0.3);
}
.cf-comm-box {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cf-comm-lbl { font-size: 13px; color: rgba(255,255,255,0.45); }
.cf-comm-val { font-size: 20px; font-weight: 700; }
.cf-comm-val.w { color: #c9a84c; }
.cf-comm-val.p { color: var(--accent-green); }
.btn-save-w {
  width: 100%;
  padding: 16px;
  background: #c9a84c;
  border: none;
  border-radius: 14px;
  color: #000;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  margin-bottom: 10px;
}
.btn-save-p {
  width: 100%;
  padding: 16px;
  background: var(--accent-green);
  border: none;
  border-radius: 14px;
  color: #000;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  margin-bottom: 10px;
}

/* LIGHTBOX */
.lbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  padding: 20px;
}
.lbox.open {
  opacity: 1;
  pointer-events: all;
}
.lbox img {
  max-width: 100%;
  max-height: 80dvh;
  border-radius: 12px;
}
.lbox-x {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast {
  /* iOS-HUD style: centered on screen, frosted glass, fade+scale */
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(40, 40, 46, 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.32, 1, 0.36, 1);
  white-space: nowrap;
  color: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Settings sections */
.set-sec-hdr {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.4px;
  margin: 22px 6px 8px;
}
.set-sec-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.5;
  margin: -2px 6px 10px;
}
.set-card {
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 6px 14px;
}
.set-add-btn {
  width: 100%;
  padding: 13px;
  margin: 6px 0 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* iOS Settings–style grouped list (Settings root) */
.ios-group {
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  margin: 10px 0;
}
.ios-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
}
.ios-row:last-child {
  border-bottom: none;
}
.ios-row:active {
  background: rgba(255, 255, 255, 0.05);
}
.ios-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ios-row-lbl {
  flex: 1;
  font-size: 15px;
  color: #fff;
}
.ios-chev {
  flex-shrink: 0;
}
.ios-back {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--accent-gold);
  font-size: 15px;
  cursor: pointer;
  padding: 0 0 6px;
  margin: -2px 0 0 -4px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(30px) saturate(1.8) brightness(1.05);
  backdrop-filter: blur(30px) saturate(1.8) brightness(1.05);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  padding: 16px 18px;
  margin-bottom: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -10px 22px rgba(0, 0, 0, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.22);
}
.stat-card .stat-lbl {
  margin-bottom: 8px;
}
.stat-card .stat-row {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  padding: 10px 0;
}
.stat-card .stat-row:last-child {
  border: none;
  padding-bottom: 0;
}
.chart-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.chart-wrap::-webkit-scrollbar {
  display: none;
}
.chart-inner {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-width: max-content;
  padding: 0 4px;
}
.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 28px;
  cursor: pointer;
}
.month-chart {
  gap: 10px;
}
/* The column is wider than the bar itself — the comm-avg chart's
   "Σ$X.Xk" sub-label needs more room than a bare 22px mark would
   give it. The bar mark stays capped at 22px (mark spec: ≤24px
   thick) via .month-chart .bar-outer below; the column is just its
   slot, with the leftover as air around the label text. */
.month-bar-col {
  width: 36px;
}
.bar-outer {
  width: 100%;
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: visible;
}
.bar-fill {
  width: 100%;
  border-radius: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* Monthly bar charts (Sales/Avg-per-cruise/Comm-avg) only — capped
   width + rounded top-only caps per the mark spec, a 3-line
   reference grid baked into each bar's own track (all bars in a
   chart share the same 100px BAR_H, so the lines land at the same
   pixel offset across every column and read as one continuous
   gridline), a 2-stop gradient fill, and a tap "lift" for touch
   feedback since this is a touch-only surface, not hover. */
.month-chart .bar-outer {
  width: 22px;
  margin: 0 auto;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.04);
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.1) 0,
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px,
    transparent 49px,
    rgba(255, 255, 255, 0.09) 49px,
    rgba(255, 255, 255, 0.09) 50px,
    transparent 50px,
    transparent 99px,
    rgba(255, 255, 255, 0.13) 99px,
    rgba(255, 255, 255, 0.13) 100px
  );
}
.month-chart .bar-fill {
  border-radius: 4px 4px 0 0;
}
.month-bar-col:active .bar-fill {
  filter: brightness(1.18);
}
/* Result chart (v214+) — horizontal diverging rows, one per voyage.
   A vertical center line marks the $0.30/PCD target; each row's bar
   grows right (over target) or left (under target) from it. Rows
   stack down the card instead of across it, so the page scrolls
   vertically (natural on mobile) instead of the chart needing its
   own horizontal scroll — and the $/% label always has the full
   row width to sit in, so it can never wrap or collide with a
   neighbor. Color is by ACTUAL commission tier (red <0.30 PCD, blue
   0.30-0.60, green ≥0.60 — calcPY's own thresholds), with the tier
   % printed per row as plain text so blue vs green is never
   hue-only for colorblind readers (validated: scripts/
   validate_palette.js "#ff3b30,#0a84ff,#1e9e46" --mode dark
   --surface #141414 — the tritan gap between blue/green sits in the
   6-8 floor band, which is why the tier-% text exists). */
.result-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
/* Zebra striping (v217) — alternating light/dark bands so a dense
   list of rows is easy to track left-to-right without losing your
   place. Odd rows sit on the card's own (dark) surface; even rows
   get a light overlay, reading as a lighter stripe against it. */
.result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
}
.result-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.045);
}
.result-row-tier {
  flex: 0 0 auto;
  width: 28px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
}
.result-row-lbl {
  flex: 0 0 auto;
  width: 36px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.result-row-track {
  flex: 1 1 auto;
  position: relative;
  height: 15px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
.result-row-center {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
  pointer-events: none;
}
.result-row-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.result-row-fill.pos {
  left: 50%;
  border-radius: 0 4px 4px 0;
}
.result-row-fill.neg {
  right: 50%;
  border-radius: 4px 0 0 4px;
}
.result-row-fill.red {
  background: linear-gradient(90deg, #ff7c74, #ff3b30);
}
.result-row-fill.blue {
  background: linear-gradient(90deg, #5eb8ff, #0a84ff);
}
.result-row-fill.green {
  background: linear-gradient(90deg, #68be83, #1e9e46);
}
/* Each row's $ and % get their own fixed-width, right-aligned slot
   (v219) instead of just packing against each other — otherwise a
   row with "-$29.8k" pushes its own % further left than a row with
   "-$0.1k", so the $ figures (and the % figures) don't line up
   into columns down the list. Right edge is the anchor: both slots
   are text-align:right, so scanning down, all $ figures share one
   right edge and all % figures share another. */
.result-row-val {
  flex: 0 0 auto;
  min-width: 126px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 7px;
  font-family: var(--mono);
  white-space: nowrap;
}
.result-row-amt {
  min-width: 70px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
}
.result-row-pct {
  min-width: 48px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
}
.result-row-val.red {
  color: #ff3b30;
}
.result-row-val.blue {
  color: #0a84ff;
}
.result-row-val.green {
  color: var(--accent-green);
}
.result-summary {
  display: flex;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}
.result-summary-item {
  flex: 1 1 0;
  text-align: center;
}
.result-summary-lbl {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 4px;
}
.result-summary-val {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}
.result-summary-val.pos {
  color: var(--accent-green);
}
.result-summary-val.neg {
  color: #ff3b30;
}
.result-summary-val.red {
  color: #ff3b30;
}
.result-summary-val.blue {
  color: #0a84ff;
}
.result-summary-val.green {
  color: var(--accent-green);
}
/* Fleet-format $PCD reference table (Stats page) — same 9-column layout as
   the corporate fleet Power BI report, scoped to this contract's voyages. */
.fleet-pcd-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-family: var(--mono);
  font-size: 11.5px;
}
.fleet-pcd-table th {
  text-align: right;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.45);
  padding: 0 6px 8px;
  white-space: nowrap;
}
.fleet-pcd-table th:first-child,
.fleet-pcd-table td:first-child {
  text-align: left;
}
.fleet-pcd-table td {
  text-align: right;
  padding: 6px 6px;
  white-space: nowrap;
  border-top: 0.5px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}
.fleet-pcd-table tbody tr:nth-child(even):not(.fleet-pcd-total) td {
  background: rgba(255, 255, 255, 0.04);
}
.fleet-pcd-table tr.fleet-pcd-total td {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 700;
  color: #fff;
  padding-top: 9px;
}
.fleet-pcd-table .fp-pos {
  color: var(--accent-green);
}
.fleet-pcd-table .fp-neg {
  color: #ff3b30;
}
.month-chart .bar-val {
  height: 16px;
  line-height: 16px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
}
.month-chart .bar-lbl {
  font-size: 11px;
}
.bar-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  white-space: nowrap;
}
.bar-fill.hit {
  background: var(--accent-green);
}
.bar-fill.miss {
  background: #ff3b30;
}
.bar-fill.empty {
  background: rgba(255, 255, 255, 0.1);
}
.bar-lbl {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  font-family: var(--mono);
  white-space: nowrap;
}
.bar-val {
  font-size: 8px;
  font-weight: 600;
  text-align: center;
  font-family: var(--mono);
  white-space: nowrap;
}
.bar-val.hit {
  color: var(--accent-green);
}
.bar-val.miss {
  color: #ff3b30;
}
.bar-val.empty {
  color: rgba(255, 255, 255, 0.25);
}
.chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding: 0 4px;
}
.leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.sds-row {
  padding: 14px 24px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sds-row:last-child {
  border: none;
}
.sds-voyage {
  font-size: 15px;
  font-weight: 600;
  color: #000;
}
.sds-right {
  text-align: right;
}
.sds-sales {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 2px;
}
.sds-comm {
  font-size: 16px;
  font-weight: 700;
}
.sds-comm.w {
  color: #b8860b;
}
.sds-comm.p {
  color: #1a7a2e;
}
.sds-sales-big {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.sds-comm-small {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  margin-top: 2px;
}
