/* Carreh Web Dashboard 2026
   App-aligned dashboard shell. Namespaced to avoid breaking legacy dashboard code. */

:root {
  /* === Carreh iOS DesignSystem parity (DesignSystem.swift cr palette) === */
  --cw-cream: #FBF7F0;       /* page background */
  --cw-cream-2: #F5EFE3;     /* secondary surface / card bg */
  --cw-cream-3: #EDE5D3;     /* hairline tint */
  --cw-paper: #FFFFFF;       /* elevated card */
  --cw-card: #FFFFFF;        /* solid cards (not translucent) */
  --cw-card-solid: #FFFFFF;
  --cw-ink: #1A1814;         /* primary text (warm near-black) */
  --cw-ink-2: #4A4640;       /* secondary text */
  --cw-ink-3: #8A857B;       /* tertiary / muted */
  --cw-muted: #8A857B;
  --cw-green: #1F6B3D;       /* primary forest green */
  --cw-green-2: #2A8550;     /* hover */
  --cw-green-deep: #0E4A28;  /* darkest forest */
  --cw-green-soft: #D4E8DA;  /* pastel surface */
  --cw-green-mint: #E8F1E5;  /* subtle tint */
  --cw-green-ink: #0A2E18;
  --cw-gold: #C49A35;        /* accent */
  --cw-gold-2: #D4AC4F;
  --cw-gold-soft: #F5E6B8;
  --cw-coral: #E07856;
  --cw-coral-soft: #FAD9CC;
  --cw-red: #D9433F;         /* destructive */
  --cw-line: #E8E2D3;        /* borders / hairlines */
  --cw-on-primary: #FBF7F0;  /* cream text on green (never flips) */
  /* warm brown-tinted shadows (never grey) */
  --cw-shadow-soft: 0 2px 8px rgba(40, 32, 18, 0.05);
  --cw-shadow: 0 1px 3px rgba(40, 32, 18, 0.04), 0 8px 32px rgba(40, 32, 18, 0.08);
  --cw-shadow-pop: 0 4px 14px rgba(40, 32, 18, 0.07), 0 20px 52px rgba(40, 32, 18, 0.13);
  --cw-shadow-green: 0 8px 24px rgba(31, 107, 61, 0.28);
  --cw-serif: "Fraunces", "DM Serif Display", Georgia, serif;
  --cw-sans: "DM Sans", "Figtree", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cw-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cw-radius: 24px;
  --cw-radius-mid: 18px;
  --cw-radius-sm: 14px;
}

body.cw-modernized {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport height — stops the mobile scroll shake */
  background: var(--cw-cream);   /* flat cream paper — no gradients (iOS brief) */
  color: var(--cw-ink);
  font-family: var(--cw-sans);
  -webkit-font-smoothing: antialiased;
}

body.cw-modernized > :not(#carreh-web-dashboard-root):not(#cw-boot):not(script):not(style):not(link) {
  display: none !important;
}

/* …but the legacy Viva payment overlays are body-appended and must show ABOVE
   the modern dashboard when a native in-shell service form goes to checkout. */
body.cw-modernized > #_orderSummaryModal,
body.cw-modernized > #_payProcessingModal,
body.cw-modernized > #_paySuccessModal,
body.cw-modernized > #_payFailModal,
body.cw-modernized > #_stripeCheckoutModal {
  display: flex !important;
}

body.cw-dark {
  --cw-cream: #1A1814;
  --cw-cream-2: #211D17;
  --cw-cream-3: #2A241D;
  --cw-paper: #0F0D0A;
  --cw-card: #211D17;
  --cw-card-solid: #211D17;
  --cw-ink: #F5EFE3;
  --cw-ink-2: #C8C2B4;
  --cw-ink-3: #9A9388;
  --cw-muted: #9A9388;
  --cw-line: #2D2823;
  --cw-green-soft: #1C3A2A;
  --cw-green-mint: #18301F;
  --cw-on-primary: #FBF7F0;
  background: var(--cw-cream);
}

/* ── Legacy request-form mode ─────────────────────────────────────────────────
   When a service opens a legacy request form, we DON'T reveal the old dashboard.
   Instead we hide the legacy sidebar + chrome and centre the single active form
   on the clean cream surface, so it reads as "the same form in the new UI". */
body.cw-legacy-form-active {
  background: var(--cw-cream) !important;
}
body.cw-legacy-form-active #sidebar,
body.cw-legacy-form-active .sidebar,
body.cw-legacy-form-active #mobileTopBar,
body.cw-legacy-form-active .mobile-topbar {
  display: none !important;
}
body.cw-legacy-form-active #mainWrap,
body.cw-legacy-form-active .main {
  margin: 0 auto !important;
  max-width: 880px !important;
  width: 100% !important;
  padding: 84px 20px 64px !important;
  left: 0 !important;
}
.cw-legacy-back {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 99999;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--cw-line);
  background: var(--cw-card-solid);
  color: var(--cw-green);
  font: 800 14px/1 "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  box-shadow: var(--cw-shadow);
}
.cw-legacy-back:hover { background: var(--cw-cream-2); }

/* ── In-shell eSIM STORE skin (matched to the iOS app store) ──────────────────
   The live purchase store is the legacy #panel-esim (Viva checkout, stamps
   user_id → orders link + earn Carreh Euros). Rather than rewrite its markup, we
   re-map the CSS custom properties it references inline, so every surface adopts
   the Carreh app palette (cream pages · warm-white cards · green headings &
   accents · gold), and we give its header the app's signature green hero card. */
body.cw-legacy-form-active #panel-esim {
  --white: #FFFDF9;
  --off: #F5EFE3;
  --border2: #E8E2D3;
  --navy: #0E4A28;
  --muted: #8A857B;
  --ink: #1A1814;
  --ink3: #4A4640;
  --gold: #C49A35;
  /* The store's brand accent was a hard red; the app is green-forward. Remap it
     here so prices, the Popular badge, hover borders and the Review strip all
     read as Carreh green — within the panel only (errors set their own color). */
  --red: #1F6B3D;
  --tm: #1F6B3D;
  max-width: 760px;
  margin: 0 auto;
}
/* Softer, app-like plan tiles + a clear selected state */
body.cw-legacy-form-active #panel-esim [id^="eptile-"] {
  border-radius: 14px !important;
  background: #fff !important;
}
body.cw-legacy-form-active #panel-esim [id^="eptile-"].eselected {
  border-color: #1F6B3D !important;
  background: rgba(31, 107, 61, 0.06) !important;
  box-shadow: 0 8px 22px rgba(14, 74, 40, 0.12) !important;
}
body.cw-legacy-form-active #panel-esim .panel-head {
  background: linear-gradient(135deg, #1F6B3D, #0E4A28);
  border-radius: 22px;
  padding: 26px 24px;
  margin-bottom: 18px;
  box-shadow: 0 18px 40px rgba(14, 74, 40, 0.18);
}
body.cw-legacy-form-active #panel-esim .panel-head .panel-title,
body.cw-legacy-form-active #panel-esim .panel-head .panel-title em {
  color: #fbf7f0 !important;
}
body.cw-legacy-form-active #panel-esim .panel-head .panel-sub {
  color: rgba(251, 247, 240, 0.82) !important;
}
body.cw-legacy-form-active #panel-esim #esimBrowseView > div,
body.cw-legacy-form-active #panel-esim #esimDestView > div {
  box-shadow: 0 8px 24px rgba(40, 32, 18, 0.05);
}
/* Continue-to-Payment as the confident green app pill */
body.cw-legacy-form-active #panel-esim #esimSubmitBtn {
  background: linear-gradient(135deg, #1f6b3d, #0e4a28) !important;
  color: #fbf7f0 !important;
  border: none !important;
  box-shadow: 0 12px 26px rgba(14, 74, 40, 0.22) !important;
}
/* Brand the active "My eSIMs" tab green instead of the legacy red */
body.cw-legacy-form-active #panel-esim #esimTabActive {
  border-bottom-color: #1f6b3d !important;
  color: #1f6b3d !important;
}

#carreh-web-dashboard-root,
#carreh-web-dashboard-root * {
  box-sizing: border-box;
  min-width: 0;
}

#carreh-web-dashboard-root {
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport: no resize as the mobile URL bar hides/shows */
  color: var(--cw-ink);
  font-family: var(--cw-sans);
}

.cw-app {
  min-height: 100vh;
  min-height: 100dvh; /* avoids the scroll "shake" when mobile chrome collapses */
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
}

.cw-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* sticky rail tracks the live viewport instead of jumping */
  padding: 22px 18px;
  background: var(--cw-green-deep);
  color: #fffaf0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  overflow: auto;
  overscroll-behavior: contain;
}

.cw-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.cw-brand img {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  object-fit: contain;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 16px 34px rgba(0,0,0,0.15);
}

.cw-brand-title {
  font-family: var(--cw-serif);
  font-size: 1.48rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.cw-brand-sub {
  color: rgba(255,255,255,0.62);
  font-size: 0.72rem;
  margin-top: 2px;
}

.cw-nav-section {
  margin: 18px 10px 8px;
  color: rgba(255,255,255,0.48);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
}

.cw-nav-button {
  width: 100%;
  min-height: 46px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,0.72);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font: 800 0.88rem/1.1 var(--cw-sans);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease;
  text-align: left;
}

.cw-nav-button:hover,
.cw-nav-button.is-active {
  background: rgba(255,255,255,0.1);
  color: #fffaf0;
  border-color: rgba(202,166,67,0.24);
}

.cw-nav-button.is-active {
  box-shadow: inset 0 0 0 1px rgba(202,166,67,0.18);
}
.cw-nav-button.is-active .cw-nav-icon {
  background: var(--cw-gold);
  color: var(--cw-green-deep);
}

.cw-nav-icon {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.09);
  color: #e8c45a;
  flex: 0 0 auto;
}

.cw-main {
  min-width: 0;
  padding: 0 0 42px;
}

/* The page scroll content (under the sticky control row). Horizontal padding
   lives here so the control row can span edge-to-edge with the cream
   background while the content keeps its comfortable gutters. */
.cw-page {
  padding: 18px clamp(18px, 4vw, 48px) 0;
}

/* Sticky control row — ALWAYS horizontal: [menu] · spacer · [bell].
   Pinned to the top of every page so the bell can never fall below the page
   title in the body. Cream background prevents content bleeding through. */
.cw-topbar {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(18px, 4vw, 48px);
  background: var(--cw-cream, #FBF7F0);
  border-bottom: 1px solid transparent;
}

/* Spacer pushes the bell to the right edge on every width. */
.cw-topbar-spacer { flex: 1 1 auto; min-width: 0; }

.cw-mobile-menu {
  display: none;
}

/* Page heading block (eyebrow · H1 · subtitle), in the scroll content. */
.cw-pagehead { min-width: 0; margin-bottom: 18px; }
.cw-pagehead:empty { display: none; }

/* Back control on pushed sub-pages (Advisor/Settings/Profile/Orders/etc.).
   The shared chevron glyph points right, so flip it to read as a Back arrow. */
.cw-pagehead-back {
  display: inline-flex; align-items: center; gap: 5px;
  margin-bottom: 12px; padding: 7px 13px 7px 9px;
  border: 1px solid var(--cw-line); border-radius: 999px;
  background: var(--cw-card-solid); color: var(--cw-ink-2);
  font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cw-pagehead-back:hover { background: var(--cw-cream-2); color: var(--cw-ink); border-color: var(--cw-ink-3); }
.cw-pagehead-back svg { transform: rotate(180deg); }

.cw-eyebrow {
  color: var(--cw-gold);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 900;
}

.cw-title {
  font-family: var(--cw-serif);
  font-size: clamp(1.9rem, 3.8vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  margin: 6px 0 8px;
  color: var(--cw-green);
  overflow-wrap: anywhere;
}

body.cw-dark .cw-title {
  color: #f8f1df;
}

.cw-subtitle {
  color: var(--cw-muted);
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.65;
}

.cw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.cw-icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--cw-line);
  background: var(--cw-card-solid);
  color: var(--cw-ink-2);
  /* inline-flex (not grid) so the glyph stays centred even when the
     mobile media query re-declares `display: inline-flex` on the menu
     button — `place-items` does not horizontally centre a flex child. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.cw-icon-btn svg { display: block; }
.cw-icon-btn:hover {
  background: var(--cw-cream-2);
  color: var(--cw-green);
  border-color: var(--cw-green-soft);
  transform: translateY(-1px);
}
/* Topbar notification badge — absolutely positioned over the bell icon button.
   Distinct class from the in-flow `.cw-dot` (timeline/activity dot) so the two
   never collide in the cascade (the shared name caused the in-flow dot to
   inherit `position:absolute`, breaking mini-row layout). */
.cw-dot-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cw-red);
  border: 2px solid var(--cw-card-solid);
}

.cw-btn {
  border: 1px solid var(--cw-line);
  background: var(--cw-card-solid);
  color: var(--cw-green);
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  font: 900 0.84rem/1 var(--cw-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
  white-space: normal;
  text-align: center;
  justify-content: center;
}

.cw-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(14,74,40,0.12);
}

.cw-btn-primary {
  color: var(--cw-on-primary);
  border-color: transparent;
  background: var(--cw-green);
  box-shadow: var(--cw-shadow-green);
}

.cw-btn-gold {
  background: var(--cw-gold);
  color: #2A1E04;
  color: #17341f;
  border-color: rgba(202,166,67,0.4);
}

.cw-danger {
  color: #9b1221;
  border-color: rgba(155, 18, 33, 0.22);
  background: rgba(155, 18, 33, 0.06);
}

.cw-grid {
  display: grid;
  gap: 18px;
}

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

.cw-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cw-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cw-card {
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius);
  box-shadow: var(--cw-shadow);
}

.cw-panel {
  padding: clamp(18px, 3vw, 28px);
}

.cw-hero {
  background: var(--cw-green-deep);
  color: var(--cw-on-primary);
  box-shadow: var(--cw-shadow-green);
  overflow: hidden;
}
/* Hero is a dark-green card: force its text to light so titles/eyebrows read. */
.cw-hero .cw-title { color: var(--cw-on-primary); }
.cw-hero .cw-subtitle { color: rgba(255, 255, 255, 0.82); }
.cw-hero .cw-eyebrow { color: var(--cw-gold-soft); }
.cw-hero .cw-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

.cw-metric {
  padding: 20px;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cw-metric-label {
  color: var(--cw-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 900;
}

.cw-metric-value {
  font-family: var(--cw-serif);
  font-size: clamp(1.85rem, 3vw, 2.9rem);
  color: var(--cw-green);
  line-height: 0.9;
}

body.cw-dark .cw-metric-value {
  color: #f8f1df;
}

.cw-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 12px;
}

.cw-section-title {
  font-family: var(--cw-serif);
  color: var(--cw-green);
  font-size: clamp(1.35rem, 2.2vw, 1.68rem);
  line-height: 1.08;
  margin: 0;
}

body.cw-dark .cw-section-title {
  color: #f8f1df;
}

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

.cw-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.cw-quick-action {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--cw-line);
  border-radius: 22px;
  background: rgba(255,255,255,0.58);
  color: var(--cw-text);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 8px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.cw-quick-action:hover {
  transform: translateY(-2px);
  border-color: rgba(202,166,67,0.45);
  box-shadow: 0 16px 36px rgba(14,74,40,0.1);
}

.cw-quick-action strong {
  color: var(--cw-green);
  font-weight: 900;
  line-height: 1.12;
}

.cw-quick-action small {
  color: var(--cw-muted);
  line-height: 1.35;
}

body.cw-dark .cw-quick-action {
  background: rgba(255,255,255,0.06);
}

body.cw-dark .cw-quick-action strong {
  color: #f8f1df;
}

.cw-mini-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--cw-line);
  border-radius: 18px;
  background: rgba(255,255,255,0.45);
}

.cw-mini-row strong,
.cw-mini-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cw-mini-row small {
  margin-top: 4px;
  color: var(--cw-muted);
  line-height: 1.35;
}

/* The in-flow timeline/activity/group dot. `position: static` is explicit so it
   overrides the topbar notification badge `.cw-dot-badge` rule and never leaves
   the grid flow — an absolute dot here pushed the text `<div>` into the narrow
   12px column, wrapping rewards/activity rows one character per line. */
.cw-dot {
  position: static;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(123,124,112,0.32);
  flex: 0 0 auto;
}

.cw-dot.is-live {
  background: var(--cw-gold);
  box-shadow: 0 0 0 5px rgba(202,166,67,0.12);
}

/* In the centred eSIM group header the dot needs no top-nudge (that nudge only
   aligns it to the first text line inside a mini-row). */
.cw-rgroup-head > .cw-dot { margin-top: 0; }

.cw-item {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--cw-line);
  background: rgba(255,255,255,0.56);
}

body.cw-dark .cw-item {
  background: rgba(255,255,255,0.04);
}

.cw-thumb {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: var(--cw-green-soft);
  color: var(--cw-green-deep);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  font-weight: 900;
  text-align: center;
}

.cw-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cw-thumb-badge {
  position: absolute;
  inset: auto 8px 8px 8px;
  border-radius: 12px;
  background: rgba(16, 36, 22, 0.58);
  color: #fff;
  padding: 4px 3px;
  font-size: 0.62rem;
  line-height: 1;
}

.cw-item-title {
  margin: 0 0 4px;
  font: 900 clamp(0.94rem, 1.1vw, 1.08rem)/1.24 var(--cw-sans);
  color: var(--cw-green);
  overflow-wrap: break-word;
  hyphens: auto;
}

body.cw-dark .cw-item-title {
  color: #f8f1df;
}

.cw-item-meta {
  color: var(--cw-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.cw-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.cw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(14,74,40,0.08);
  color: var(--cw-green);
  font-size: 0.68rem;
  font-weight: 900;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cw-badge-gold {
  background: rgba(202,166,67,0.16);
  color: #9a741b;
}

.cw-empty {
  padding: 34px;
  text-align: center;
  color: var(--cw-muted);
  border: 1px dashed var(--cw-line);
  border-radius: 26px;
  background: rgba(255,255,255,0.44);
}

.cw-empty strong {
  display: block;
  color: var(--cw-green);
  font-family: var(--cw-serif);
  font-size: 1.42rem;
  margin-bottom: 8px;
}

/* ── Notifications — day groups + type filter chips ───────────────────────── */
.cw-nf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cw-nf-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-nfilter {
  border: 1px solid var(--cw-line); background: var(--cw-card); color: var(--cw-ink-2); font: inherit; cursor: pointer;
  font-size: 0.78rem; font-weight: 700; padding: 6px 13px; border-radius: 999px; transition: all .15s ease;
}
.cw-nfilter:hover { border-color: var(--cw-green-soft); }
.cw-nfilter span { color: var(--cw-ink-3); font-weight: 700; }
.cw-nfilter.is-active { background: var(--cw-green); color: var(--cw-on-primary); border-color: var(--cw-green); }
.cw-nfilter.is-active span { color: rgba(251,247,240,0.8); }
.cw-nf-group + .cw-nf-group { margin-top: 18px; }
.cw-nf-grouphead {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cw-ink-3); margin: 0 0 8px 2px;
}
.cw-nf-ic {
  position: relative; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 20px; background: var(--cw-cream-2); border: 1px solid var(--cw-line);
}
.cw-nf-item.is-unread .cw-nf-ic { background: var(--cw-green-mint); border-color: var(--cw-green-soft); }
.cw-nf-item.is-unread .cw-item-title { font-weight: 800; }
.cw-nf-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--cw-coral); border: 2px solid var(--cw-card); }

.cw-skeleton {
  min-height: 120px;
  border-radius: var(--cw-radius);
  background: linear-gradient(90deg, var(--cw-cream-2), var(--cw-cream-3), var(--cw-cream-2));
  background-size: 220% 100%;
  animation: cw-shimmer 1.6s ease-in-out infinite;
}

@keyframes cw-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Information-dense service card (button). Left-aligned, premium, fills width. */
.cw-service {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--cw-line);
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cw-service:hover {
  transform: translateY(-2px);
  border-color: rgba(196,154,53,.45);
  box-shadow: 0 14px 32px rgba(16,40,28,.12);
}
.cw-service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cw-service-price { flex: 0 0 auto; white-space: nowrap; }
.cw-service-name {
  font-family: var(--cw-serif);
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--cw-green);
  margin: 2px 0 0;
}
body.cw-dark .cw-service-name { color: #f3ead6; }
.cw-service-what {
  color: var(--cw-ink-2);
  font-size: .86rem;
  line-height: 1.5;
  margin: 0;
}
.cw-service-incl {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cw-service-incl li {
  position: relative;
  padding-left: 18px;
  font-size: .8rem;
  color: var(--cw-muted);
  line-height: 1.4;
}
.cw-service-incl li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(196,154,53,.55);
}
.cw-service-cta {
  margin-top: auto;
  padding-top: 6px;
  font: 800 .82rem var(--cw-sans);
  color: var(--cw-gold);
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cw-service-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(14,74,40,0.08);
  color: var(--cw-green);
  font-size: 1.3rem;
  flex: 0 0 auto;
}
.cw-service-icon-lg { width: 64px; height: 64px; }

/* Service detail header (icon · text · price) — wraps cleanly on mobile. */
.cw-svc-detail-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cw-svc-detail-headtext { flex: 1; min-width: 220px; }
.cw-svc-detail-price { font-size: 15px; padding: 8px 14px; }
.cw-svc-after {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(14,74,40,0.05);
  border: 1px solid var(--cw-line);
}
.cw-svc-after strong { font: 800 .78rem var(--cw-sans); letter-spacing: .02em; color: var(--cw-green); }
body.cw-dark .cw-svc-after strong { color: #f3ead6; }

.cw-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cw-tool {
  min-height: 112px;
  padding: 16px;
  border: 1px solid var(--cw-line);
  border-radius: 22px;
  background: rgba(255,255,255,0.56);
  color: var(--cw-green);
  display: grid;
  align-content: start;
  gap: 7px;
  text-align: left;
  cursor: pointer;
  font-family: var(--cw-sans);
}

.cw-tool:hover {
  border-color: rgba(202,166,67,0.45);
  box-shadow: 0 14px 32px rgba(14,74,40,0.1);
}

.cw-tool strong {
  font-size: 0.98rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.cw-tool small {
  color: var(--cw-muted);
  line-height: 1.42;
}

.cw-tool.is-danger {
  color: #9b1221;
  background: rgba(155, 18, 33, 0.06);
  border-color: rgba(155, 18, 33, 0.2);
}

body.cw-dark .cw-tool {
  background: rgba(255,255,255,0.05);
}

.cw-advisor-response {
  margin-top: 10px;
  white-space: pre-wrap;
  text-align: left;
  color: var(--cw-ink);
  line-height: 1.62;
}

.cw-form {
  display: grid;
  gap: 12px;
}

.cw-stop-block {
  padding: 16px;
  background: rgba(255,255,255,0.44);
}

body.cw-dark .cw-stop-block {
  background: rgba(255,255,255,0.05);
}

.cw-field {
  display: grid;
  gap: 6px;
}

.cw-field span {
  color: var(--cw-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 900;
}

.cw-input,
.cw-select,
.cw-textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--cw-line);
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
  color: var(--cw-ink);
  padding: 12px 14px;
  font: 700 0.95rem/1.3 var(--cw-sans);
  outline: none;
}

body.cw-dark .cw-input,
body.cw-dark .cw-select,
body.cw-dark .cw-textarea {
  background: rgba(255,255,255,0.06);
}

/* Native in-shell service forms (Pass 2) */
.cw-service-grid { gap: 14px 16px; align-items: start; }
.cw-field-full { grid-column: 1 / -1; }
.cw-check-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  padding: 8px 0;
  font: 700 0.86rem/1.45 var(--cw-sans);
  color: var(--cw-ink-2);
  text-transform: none;
  letter-spacing: 0;
}
.cw-check-row input[type="checkbox"] {
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--cw-green);
  cursor: pointer;
}
.cw-input.cw-file { padding: 10px 12px; font-weight: 600; min-height: 46px; }
.cw-input.cw-file::-webkit-file-upload-button,
.cw-input.cw-file::file-selector-button {
  border: 1px solid var(--cw-line);
  background: var(--cw-cream-2);
  color: var(--cw-ink);
  border-radius: 10px;
  padding: 6px 12px;
  margin-right: 10px;
  font: 800 0.78rem var(--cw-sans);
  cursor: pointer;
}

/* Tabbed Logg trip/event detail */
.cw-modal.cw-detail { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.cw-detail-head { padding: clamp(20px,3.5vw,30px) clamp(20px,4vw,34px) 6px; position:relative; }
.cw-detail-tabs { display:flex; gap:8px; overflow-x:auto; padding:10px clamp(20px,4vw,34px); border-bottom:1px solid var(--cw-line); scrollbar-width:none; }
.cw-detail-tabs::-webkit-scrollbar { display:none; }
.cw-dtab { flex:none; border:1px solid var(--cw-line); background:var(--cw-cream-2); color:var(--cw-ink-2); border-radius:100px; padding:8px 16px; font:800 .8rem var(--cw-sans); cursor:pointer; white-space:nowrap; transition:all .15s; }
.cw-dtab.on { background:var(--cw-green); background-image:linear-gradient(135deg,#2d8a55,#1a6641); color:#fff; border-color:transparent; }
.cw-detail-body { overflow-y:auto; overscroll-behavior:contain; padding: clamp(16px,3vw,22px) clamp(20px,4vw,34px) clamp(22px,4vw,32px); }
.cw-menu-wrap { position:relative; flex:none; }
.cw-menu-btn { width:40px; height:40px; border-radius:12px; border:1px solid var(--cw-line); background:var(--cw-cream-2); color:var(--cw-ink); font-size:20px; font-weight:900; cursor:pointer; line-height:1; }
.cw-menu-btn:hover { background:var(--cw-cream-3); }
.cw-menu { position:absolute; top:46px; right:0; z-index:30; min-width:228px; background:var(--cw-card-solid); border:1px solid var(--cw-line); border-radius:14px; box-shadow:0 20px 50px rgba(16,40,28,.22); padding:6px; }
.cw-menu[hidden] { display:none; }
.cw-menu-item { display:block; width:100%; text-align:left; border:0; background:transparent; color:var(--cw-ink); padding:11px 12px; border-radius:9px; font:700 .86rem var(--cw-sans); cursor:pointer; }
.cw-menu-item:hover { background:var(--cw-cream-2); }
.cw-menu-item.danger { color:#B91C1C; }
.cw-od-hero { border-radius:18px; padding:22px; color:#fff; background:linear-gradient(150deg,#2d8a55,#0f2218); }
.cw-od-hero.done { background:linear-gradient(135deg,#6b4fb0,#b06fd1); }
.cw-od-hero h3 { font-family:var(--cw-serif); font-size:1.6rem; margin:6px 0 4px; color:#fff; }
.cw-od-hero p { margin:0; color:rgba(255,255,255,.86); font-size:.9rem; }
.cw-od-tiles { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:14px 0; }
.cw-od-tile { border:1px solid var(--cw-line); background:#fff; border-radius:14px; padding:12px 6px; text-align:center; cursor:pointer; transition:transform .15s; }
.cw-od-tile:hover { transform:translateY(-2px); }
.cw-od-tile strong { display:block; font-family:var(--cw-serif); font-size:1.3rem; color:var(--cw-green); }
.cw-od-tile small { color:var(--cw-muted); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
body.cw-dark .cw-od-tile { background:var(--cw-card-solid); }
.cw-ready-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--cw-line); font-size:.86rem; font-weight:700; }
.cw-ready-row:last-child { border-bottom:0; }
@media (max-width:560px){ .cw-od-tiles { grid-template-columns:repeat(3,1fr); } }

/* Group trip — chat */
.cw-chat-scroll { max-height:46vh; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px; padding:4px 2px 12px; }
.cw-chat-row { display:flex; justify-content:flex-start; }
.cw-chat-row.mine { justify-content:flex-end; }
.cw-chat-bubble { max-width:78%; background:var(--cw-cream-2); border:1px solid var(--cw-line); border-radius:16px 16px 16px 4px; padding:9px 13px; display:flex; flex-direction:column; gap:2px; }
.cw-chat-row.mine .cw-chat-bubble { background-image:linear-gradient(135deg,#2d8a55,#1a6641); border-color:transparent; border-radius:16px 16px 4px 16px; }
.cw-chat-author { font:800 .68rem var(--cw-sans); text-transform:uppercase; letter-spacing:.04em; color:var(--cw-muted); }
.cw-chat-row.mine .cw-chat-author { color:rgba(255,255,255,.78); }
.cw-chat-text { font:500 .9rem var(--cw-sans); color:var(--cw-ink); white-space:pre-wrap; word-break:break-word; }
.cw-chat-row.mine .cw-chat-text { color:#fff; }
.cw-chat-time { font:600 .64rem var(--cw-sans); color:var(--cw-muted); align-self:flex-end; }
.cw-chat-row.mine .cw-chat-time { color:rgba(255,255,255,.7); }
.cw-chat-compose { display:flex; gap:8px; margin-top:8px; position:sticky; bottom:0; background:var(--cw-card-solid,#fff); padding-top:8px; }
.cw-chat-compose .cw-input { flex:1; }

/* Group trip — expenses */
.cw-exp-grid { display:grid; grid-template-columns:2fr 1fr; gap:8px; }
.cw-exp-grid select { grid-column:auto; }
@media (max-width:520px){ .cw-exp-grid { grid-template-columns:1fr 1fr; } }
.cw-link-danger { background:none; border:0; color:#B91C1C; font:800 .74rem var(--cw-sans); cursor:pointer; padding:2px 0; text-decoration:underline; }
.cw-link-danger:hover { opacity:.75; }

/* Group trip — members */
.cw-member-ctrl { display:flex; align-items:center; gap:8px; flex:none; }
.cw-input-sm { padding:6px 9px; font-size:.78rem; border-radius:9px; }
input.cw-input, select.cw-input, textarea.cw-input { width:100%; border:1px solid var(--cw-line); background:#fff; color:var(--cw-ink); border-radius:11px; padding:10px 12px; font:600 .88rem var(--cw-sans); }
input.cw-input:focus, select.cw-input:focus, textarea.cw-input:focus { outline:none; border-color:var(--cw-green); box-shadow:0 0 0 3px rgba(45,138,85,.14); }
body.cw-dark input.cw-input, body.cw-dark select.cw-input, body.cw-dark textarea.cw-input { background:var(--cw-card-solid); }

/* Rewards info center */
.cw-info-btn { border:0; background:none; cursor:pointer; font-size:1rem; color:var(--cw-gold); line-height:1; padding:0; }
.cw-info-btn:hover { opacity:.7; }
.cw-info-q { border-top:1px solid var(--cw-line); padding:8px 0; }
.cw-info-q summary { cursor:pointer; font-weight:700; font-size:.86rem; list-style:none; }
.cw-info-q summary::-webkit-details-marker { display:none; }
.cw-info-q p { margin:6px 0 0; font-size:.85rem; color:var(--cw-ink-2); }

/* My eSIMs (dashboard) status groups */
.cw-rgroup-head { display:flex; align-items:center; gap:8px; font:800 .72rem var(--cw-sans); letter-spacing:.04em; text-transform:uppercase; color:var(--cw-navy,#0f2218); margin:14px 2px 8px; }
.cw-esim-card { transition:transform .15s; }
.cw-esim-card:hover { transform:translateY(-1px); }

/* Carreh Rewards tiers — equal-width columns that never overflow, 2-up on mobile */
.cw-rtiers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:6px; }
.cw-rtier { text-align:center; border:1px solid var(--cw-line); border-radius:14px; padding:14px 8px; background:#fff; min-width:0; }
.cw-rtier.on { border-color:var(--cw-gold); background:rgba(196,154,53,.08); box-shadow:0 6px 18px rgba(196,154,53,.14); }
.cw-rtier strong { font-size:.82rem; color:var(--cw-navy,#0f2218); display:block; }
@media (max-width:560px){ .cw-rtiers { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Compact, unified Rewards layout (tighter gaps between the stacked panels) */
.cw-rewards { display:flex; flex-direction:column; gap:12px; }
.cw-rewards > * { margin:0 !important; }
.cw-rw-intro { padding-bottom:16px; }
.cw-rw-h2 { margin:4px 0 0; display:flex; align-items:center; gap:8px; }
.cw-rw-intro-sub { margin-top:6px; }
.cw-rw-hero { background-image:linear-gradient(150deg,#2d8a55,#0f2218); color:#fff; }
.cw-rw-block-h { margin-top:0; }
.cw-rw-block-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cw-rw-learn { align-self:flex-start; }

/* Small button variant (compact CTAs — history / learn-more) */
.cw-btn-sm { padding:7px 14px; font-size:.78rem; }

/* Collaborator invites */
.cw-invite-grid { display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:520px){ .cw-invite-grid { grid-template-columns:1.4fr 1fr auto; } }
.cw-invite-bar { position:fixed; left:0; right:0; bottom:0; z-index:120; display:flex; flex-direction:column; gap:8px; padding:12px clamp(12px,4vw,28px); background:linear-gradient(0deg, rgba(15,34,24,.06), transparent); pointer-events:none; }
.cw-invite-card { pointer-events:auto; max-width:680px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--cw-card-solid,#fff); border:1px solid var(--cw-line); border-radius:16px; padding:12px 16px; box-shadow:0 16px 40px rgba(16,40,28,.18); }
.cw-invite-msg { font-size:.92rem; color:var(--cw-ink); min-width:0; }

/* Advisor chat */
.cw-chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.cw-chat-thread {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px; min-height: 320px; max-height: 56vh; overflow-y: auto; overscroll-behavior: contain;
}
.cw-chat-welcome { display: flex; gap: 14px; align-items: flex-start; padding: 8px 2px; }
.cw-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 86%; }
.cw-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.cw-msg-ai { align-self: flex-start; }
.cw-ava {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, #2d8a55, #0f2218); color: #ffd98a;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800;
}
.cw-ava-lg { width: 42px; height: 42px; font-size: 20px; border-radius: 14px; }
.cw-bubble {
  padding: 12px 16px; border-radius: 18px; font-size: 0.95rem; line-height: 1.55;
  box-shadow: 0 6px 16px rgba(16,40,28,.06);
  max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}
.cw-bubble ul { margin: 4px 0 0; }
.cw-bubble p { max-width: 100%; }
.cw-bubble-user { background: var(--cw-green); background-image: linear-gradient(135deg,#2d8a55,#1a6641); color: #fff; border-bottom-right-radius: 6px; }
.cw-bubble-ai { background: #fff; border: 1px solid var(--cw-line); color: var(--cw-ink); border-bottom-left-radius: 6px; }
body.cw-dark .cw-bubble-ai { background: var(--cw-card-solid); }

/* ── Advisor visa-intel card (AdvisorView.visaView parity) ────────────────── */
.cw-visa { border-radius: var(--cw-radius-sm); padding: 14px; border: 1px solid var(--cw-line); background: var(--cw-cream); }
.cw-visa.is-required { border-color: #F2D9A8; background: #FFF8EC; }
.cw-visa.is-free { border-color: var(--cw-green-soft); background: var(--cw-green-mint); }
.cw-visa-head { display: flex; align-items: center; gap: 10px; }
.cw-visa-shield { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.cw-visa-titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-visa-titles strong { font-size: 0.94rem; font-weight: 800; color: var(--cw-ink); }
.cw-visa-titles span { font-size: 0.78rem; font-weight: 800; }
.cw-visa.is-required .cw-visa-titles span { color: #B7791F; }
.cw-visa.is-free .cw-visa-titles span { color: var(--cw-green); }
.cw-visa-block { margin-top: 12px; }
.cw-visa-block h4 { margin: 0 0 5px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cw-ink-3); }
.cw-visa-block ul { margin: 0; padding-left: 18px; }
.cw-visa-block li { font-size: 0.82rem; color: var(--cw-ink-2); margin: 2px 0; }
.cw-chat-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 22px 14px; }
.cw-chip {
  border: 1px solid var(--cw-line); background: var(--cw-cream-2); color: var(--cw-ink);
  border-radius: 100px; padding: 9px 15px; font: 700 0.82rem var(--cw-sans); cursor: pointer;
  transition: all .15s ease;
}
.cw-chip:hover { border-color: var(--cw-green); color: var(--cw-green); transform: translateY(-1px); }
.cw-chat-bar {
  display: flex; gap: 10px; align-items: flex-end; padding: 14px 16px;
  border-top: 1px solid var(--cw-line); background: var(--cw-card-solid);
}
.cw-chat-input {
  flex: 1; resize: none; border: 1px solid var(--cw-line); border-radius: 18px;
  background: var(--cw-cream); color: var(--cw-ink); padding: 12px 16px;
  font: 600 0.95rem/1.4 var(--cw-sans); max-height: 132px; outline: none;
}
.cw-chat-input:focus { border-color: var(--cw-green); }
.cw-chat-send {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--cw-green); background-image: linear-gradient(135deg,#2d8a55,#1a6641);
  color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 8px 20px rgba(42,133,80,.3);
}
.cw-chat-send:hover { transform: translateY(-1px); }
.cw-typing { display: inline-flex; gap: 4px; align-items: center; height: 12px; }
.cw-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--cw-muted); animation: cwBounce 1.2s infinite ease-in-out; }
.cw-typing i:nth-child(2) { animation-delay: .15s; }
.cw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cwBounce { 0%,80%,100% { transform: scale(.6); opacity: .4 } 40% { transform: scale(1); opacity: 1 } }

/* ── Orders: responsive premium cards (replaces the crushing table) ───────── */
.cw-orders {
  display: grid;
  gap: 12px;
}
.cw-ord {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: var(--cw-shadow, 0 8px 24px rgba(16,40,28,.06));
}
.cw-ord-lead { display: flex; align-items: center; justify-content: center; }
.cw-ord-ic,
.cw-ord-flag {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.cw-ord-ic { background: rgba(14,74,40,0.08); color: var(--cw-green); }
.cw-ord-flag { background: var(--cw-cream-2); font-size: 1.7rem; line-height: 1; }
.cw-ord-main { min-width: 0; }
.cw-ord-titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cw-ord-title {
  font-family: var(--cw-serif);
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--cw-green);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
body.cw-dark .cw-ord-title { color: #f3ead6; }
.cw-ord-amount {
  font: 800 1rem var(--cw-sans);
  color: var(--cw-ink);
  white-space: nowrap;
  flex: 0 0 auto;
}
.cw-ord-sub {
  color: var(--cw-muted);
  font-size: .82rem;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.cw-ord-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}
.cw-ord-pill {
  font: 800 .68rem var(--cw-sans);
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.cw-ord-pill-ok { background: rgba(31,107,61,.14); color: #1F6B3D; }
.cw-ord-pill-live { background: rgba(196,154,53,.16); color: #9a7421; }
.cw-ord-pill-pending { background: rgba(15,34,24,.08); color: var(--cw-ink-2); }
.cw-ord-pill-danger { background: rgba(192,23,42,.12); color: #b21f2f; }
.cw-ord-date { font-size: .76rem; color: var(--cw-muted); white-space: nowrap; }
.cw-ord-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  align-items: stretch;
}
.cw-ord-btn { white-space: nowrap; padding: 9px 16px; font-size: .82rem; }

@media (max-width: 640px) {
  .cw-ord {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }
  .cw-ord-ic,
  .cw-ord-flag { width: 46px; height: 46px; border-radius: 14px; }
  .cw-ord-flag { font-size: 1.5rem; }
  .cw-ord-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cw-ord-btn { flex: 1 1 auto; }
}

.cw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
  table-layout: fixed;
}

.cw-table th {
  text-align: left;
  color: var(--cw-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0 12px;
}

.cw-table td {
  padding: 14px 12px;
  background: rgba(255,255,255,0.56);
  border-top: 1px solid var(--cw-line);
  border-bottom: 1px solid var(--cw-line);
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cw-table td:first-child {
  border-left: 1px solid var(--cw-line);
  border-radius: 16px 0 0 16px;
}

.cw-table td:last-child {
  border-right: 1px solid var(--cw-line);
  border-radius: 0 16px 16px 0;
}

.cw-atlas-card {
  background: var(--cw-green-deep);
  color: var(--cw-on-primary);
  box-shadow: var(--cw-shadow-green);
  border-radius: var(--cw-radius);
  padding: 28px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

.cw-atlas-card::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(202,166,67,0.18);
  border-radius: 24px;
  pointer-events: none;
}

.cw-atlas-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}

.cw-atlas-stat {
  text-align: center;
}

.cw-atlas-stat strong {
  display: block;
  font-family: var(--cw-serif);
  font-size: 2.8rem;
  line-height: 0.95;
}

.cw-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cw-flag {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.cw-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  z-index: 100001;
  background: var(--cw-ink);
  color: var(--cw-cream);
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: var(--cw-shadow-pop);
  font-weight: 900;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.cw-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cw-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(13, 20, 15, 0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.cw-modal {
  width: min(920px, 100%);
  max-height: min(88vh, 920px);
  max-height: min(88dvh, 920px); /* dynamic viewport — modal doesn't resize on mobile scroll */
  overflow: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 4vw, 36px);
  position: relative;
}

.cw-modal .cw-title,
.cw-panel > .cw-title,
.cw-card > .cw-title {
  font-size: clamp(1.9rem, 4.2vw, 3.25rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em !important;
  max-width: 100%;
}

.cw-modal-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--cw-line);
  background: var(--cw-card-solid);
  color: var(--cw-green);
  display: grid;
  place-items: center;
  font: 900 1.4rem/1 var(--cw-sans);
  cursor: pointer;
  z-index: 2;
}

.cw-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--cw-line);
  color: var(--cw-muted);
}

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

.cw-detail-row strong {
  max-width: min(420px, 58%);
  color: var(--cw-ink);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ── Order status timeline (renderOrderDetail stepper, esimTimeline parity) ── */
.cw-otl-card { padding: 16px 18px; }
.cw-otl { display: flex; flex-direction: column; }
.cw-otl-row { display: flex; align-items: flex-start; gap: 12px; }
.cw-otl-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.cw-otl-node {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cw-cream-3); color: var(--cw-on-primary); font-size: 11px; line-height: 1; transition: background .2s ease;
}
.cw-otl-row.is-done .cw-otl-node { background: var(--cw-green); }
.cw-otl-row.is-current .cw-otl-node { box-shadow: 0 0 0 3px var(--cw-green-soft); }
.cw-otl-row.is-danger .cw-otl-node { background: var(--cw-red); box-shadow: 0 0 0 3px var(--cw-coral-soft); }
.cw-otl-line { width: 2px; flex: 1; min-height: 22px; background: var(--cw-cream-3); margin: 2px 0; }
.cw-otl-line.is-done { background: var(--cw-green); }
.cw-otl-body { padding-bottom: 16px; min-width: 0; }
.cw-otl-row:last-child .cw-otl-body { padding-bottom: 0; }
.cw-otl-body strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--cw-ink-3); }
.cw-otl-row.is-done .cw-otl-body strong { color: var(--cw-ink); }
.cw-otl-row.is-danger .cw-otl-body strong { color: var(--cw-red); }
.cw-otl-body small { font-size: 0.74rem; color: var(--cw-ink-3); }

.cw-atlas-card h2 {
  font-size: clamp(1.45rem, 3vw, 2rem) !important;
  line-height: 1.08 !important;
  max-width: 100%;
}

.cw-atlas-card .cw-badge {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Release hardening: prevent the modern dashboard from feeling brittle on
   small screens, long content, or large browser text settings. */
.cw-main > *,
.cw-card,
.cw-panel,
.cw-hero,
.cw-service,
.cw-metric,
.cw-empty,
.cw-item,
.cw-modal,
.cw-atlas-card {
  overflow-wrap: break-word;
}

.cw-title,
.cw-section-title,
.cw-item-title,
.cw-subtitle,
.cw-item-meta,
.cw-detail-row,
.cw-badge,
.cw-btn,
.cw-table,
.cw-table code {
  max-width: 100%;
}

.cw-table code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.cw-table th:nth-child(1),
.cw-table td:nth-child(1) {
  width: 28%;
}

.cw-table th:nth-child(2),
.cw-table td:nth-child(2),
.cw-table th:nth-child(3),
.cw-table td:nth-child(3),
.cw-table th:nth-child(4),
.cw-table td:nth-child(4) {
  width: 14%;
}

.cw-table th:nth-child(5),
.cw-table td:nth-child(5) {
  width: 18%;
}

.cw-section-head,
.cw-detail-row,
.cw-card-row {
  flex-wrap: wrap;
}

.cw-section-title,
.cw-empty strong,
.cw-atlas-card h2,
.cw-service h3,
.cw-metric-value {
  overflow-wrap: break-word;
  hyphens: auto;
}

.cw-table-wrap,
.cw-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cw-btn:disabled {
  opacity: .58;
  cursor: wait;
  transform: none;
}

/* ── Home: "Where to next?" CTA pills (iOS greeting CTAs) ─────────────────── */
.cw-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.cw-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 18px 20px;
  border-radius: var(--cw-radius-mid);
  border: 1px solid var(--cw-line);
  background: var(--cw-card-solid);
  color: var(--cw-ink);
  cursor: pointer;
  box-shadow: var(--cw-shadow-soft);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cw-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--cw-shadow);
  border-color: var(--cw-green-soft);
}
.cw-cta-ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--cw-green-mint);
  color: var(--cw-green);
  flex: 0 0 auto;
}
.cw-cta-text { display: flex; flex-direction: column; gap: 2px; }
.cw-cta-text strong { font-size: 1.05rem; font-weight: 800; }
.cw-cta-text small { color: var(--cw-muted); font-size: 0.82rem; }
.cw-cta-primary {
  background: var(--cw-green);
  border-color: transparent;
  color: var(--cw-on-primary);
  box-shadow: var(--cw-shadow-green);
}
.cw-cta-primary .cw-cta-ic { background: rgba(255,255,255,0.16); color: var(--cw-on-primary); }
.cw-cta-primary .cw-cta-text small { color: rgba(255,255,255,0.82); }

/* ── Home: Advisor PRO card ───────────────────────────────────────────────── */
.cw-advisor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  border-color: var(--cw-gold-soft);
  background: var(--cw-card-solid);
}
.cw-advisor-main { flex: 1; min-width: 240px; }

/* light-on-dark ghost button (used on green hero cards) */
.cw-btn-ghost-light {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  color: var(--cw-on-primary);
}
.cw-btn-ghost-light:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* ── eSIM: destination cards ──────────────────────────────────────────────── */
.cw-dest-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  text-decoration: none;
  color: var(--cw-ink);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cw-dest-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cw-shadow);
  border-color: var(--cw-green-soft);
}
.cw-dest-flag { font-size: 1.9rem; line-height: 1; }
.cw-dest-card strong { font-size: 0.98rem; font-weight: 800; }
.cw-dest-card small { color: var(--cw-gold); font-weight: 700; font-size: 0.8rem; }

@media (max-width: 980px) {
  .cw-app {
    grid-template-columns: 1fr;
  }
  .cw-sidebar {
    position: fixed;
    z-index: 10000;
    inset: 0 auto 0 0;
    width: min(86vw, 330px);
    transform: translateX(-105%);
    transition: transform .24s ease;
    box-shadow: 30px 0 90px rgba(0,0,0,0.28);
  }
  body.cw-nav-open .cw-sidebar {
    transform: translateX(0);
  }
  .cw-mobile-menu {
    display: inline-flex;
  }
  .cw-main {
    padding: 0 0 34px;
  }
  .cw-page {
    padding: 14px 14px 0;
  }
  /* The control row STAYS horizontal on mobile — menu left, bell right —
     never stacking, so the bell can't fall under the title. */
  .cw-topbar {
    padding: 10px 14px;
  }
  .cw-grid-2,
  .cw-grid-3,
  .cw-grid-4,
  .cw-quick-grid,
  .cw-detail-grid {
    grid-template-columns: 1fr;
  }
  .cw-actions {
    justify-content: flex-start;
    width: 100%;
  }
  /* The bell lives in a .cw-actions inside the sticky row — keep it compact and
     right-aligned, never the full-width treatment other action rows get. */
  .cw-topbar .cw-actions {
    width: auto;
    justify-content: flex-end;
    flex: 0 0 auto;
  }
  .cw-actions .cw-btn,
  .cw-btn {
    min-width: 0;
    max-width: 100%;
  }
  .cw-item {
    grid-template-columns: 58px minmax(0,1fr);
    align-items: start;
  }
  .cw-item > .cw-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .cw-thumb {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }
  .cw-table,
  .cw-table thead,
  .cw-table tbody,
  .cw-table tr,
  .cw-table th,
  .cw-table td {
    display: block;
  }
  .cw-table thead {
    display: none;
  }
  .cw-table tr {
    margin-bottom: 10px;
  }
  .cw-table td {
    border: 1px solid var(--cw-line) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
  }
  .cw-table td:first-child {
    border-radius: 16px 16px 0 0 !important;
  }
  .cw-table td:last-child {
    border-bottom: 1px solid var(--cw-line) !important;
    border-radius: 0 0 16px 16px !important;
  }
  .cw-modal-backdrop {
    align-items: end;
    padding: 10px;
  }
  .cw-modal {
    width: 100%;
    max-height: 90vh;
    max-height: 90dvh; /* dynamic viewport — no resize as mobile chrome collapses */
    border-radius: 32px 32px 20px 20px;
    padding: 22px 16px;
  }
  .cw-detail-row {
    display: block;
  }
  .cw-detail-row strong {
    display: block;
    max-width: none;
    margin-top: 4px;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .cw-main {
    padding: 0 0 30px;
  }
  /* Tighter content gutters + less dead space below the sticky control row. */
  .cw-page {
    padding: 12px 12px 0;
  }
  .cw-pagehead {
    margin-bottom: 14px;
  }
  .cw-title {
    font-size: clamp(1.9rem, 9.5vw, 2.72rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
  }
  .cw-modal .cw-title,
  .cw-panel > .cw-title,
  .cw-card > .cw-title {
    font-size: clamp(1.75rem, 8.4vw, 2.42rem) !important;
    line-height: 1.08 !important;
  }
  .cw-subtitle {
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .cw-panel {
    padding: 16px;
  }
  .cw-card {
    border-radius: 22px;
  }
  /* Consistent, tighter gaps for every grid + stacked-card group on mobile. */
  .cw-grid {
    gap: 12px;
  }
  /* Cards always fill the full content width on mobile — no orphaned narrow
     cards or side gaps. */
  .cw-card,
  .cw-panel,
  .cw-hero,
  .cw-ord,
  .cw-service {
    width: 100%;
    box-sizing: border-box;
  }
  .cw-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    margin: 18px 0 10px;
  }
  .cw-section-title {
    font-size: 1.35rem;
    line-height: 1.15;
  }
  .cw-item {
    gap: 10px;
    padding: 12px;
    border-radius: 20px;
  }
  .cw-item-meta {
    font-size: 0.78rem;
  }
  .cw-atlas-stats {
    grid-template-columns: 1fr;
    margin: 18px 0;
  }
  .cw-atlas-stat {
    text-align: left;
  }
  .cw-atlas-stat strong {
    font-size: 2.1rem;
  }
  .cw-detail-row {
    gap: 6px;
  }
  .cw-toast {
    width: calc(100vw - 24px);
    border-radius: 18px;
    text-align: center;
  }
}

/* Extra density for small phones — trims the last of the wasted vertical and
   horizontal space the user flagged, without touching desktop. */
@media (max-width: 480px) {
  .cw-page {
    padding: 10px 10px 0;
  }
  .cw-topbar {
    padding: 9px 10px;
  }
  .cw-pagehead {
    margin-bottom: 12px;
  }
  .cw-panel {
    padding: 14px;
  }
  .cw-grid {
    gap: 10px;
  }
  .cw-orders {
    gap: 10px;
  }
  .cw-section-head {
    margin: 14px 0 8px;
  }
  .cw-hero {
    padding: 18px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cw-btn,
  .cw-nav-button,
  .cw-sidebar,
  .cw-toast {
    transition: none !important;
  }
  .cw-skeleton {
    animation: none !important;
  }
}

/* Service detail: included + how-it-works lists */
.cw-check-list,
.cw-step-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.cw-check-list li,
.cw-step-list li {
  position: relative;
  padding-left: 30px;
  color: var(--cw-ink);
  font-size: 14.5px;
  line-height: 1.45;
}
.cw-check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cw-green-mint);
  color: var(--cw-green-deep);
  font-size: 12px;
  font-weight: 700;
}
body.cw-dark .cw-check-list li::before {
  background: rgba(58, 139, 86, 0.22);
  color: #7fd0a1;
}
.cw-step-list {
  counter-reset: cw-step;
}
.cw-step-list li {
  counter-increment: cw-step;
}
.cw-step-list li::before {
  content: counter(cw-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(202, 166, 67, 0.18);
  color: #8a6d1f;
  font-size: 12px;
  font-weight: 700;
}
body.cw-dark .cw-step-list li::before {
  background: rgba(202, 166, 67, 0.22);
  color: #e3c25f;
}

/* ════════════════════════════════════════════════════════════════════════════
   HOME — iOS OverviewView parity
   Flat brand-green CTAs (no gradients), cream cards, warm brown shadows,
   Fraunces serif in brand green + DM Sans body, 24/18/14 radii. All --cw-* tokens.
   ════════════════════════════════════════════════════════════════════════════ */

.cw-home-feed { display: flex; flex-direction: column; gap: 18px; }
.cw-home-card {
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-mid);
  box-shadow: var(--cw-shadow-soft);
  padding: 16px;
}
/* clickable cards lift slightly on hover, like the iOS press state */
.cw-home-card[role="button"], .cw-home-card[data-open-logg], .cw-home-card[data-route] { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.cw-home-card[role="button"]:hover, .cw-home-card[data-open-logg]:hover, .cw-home-card[data-route]:hover { transform: translateY(-2px); box-shadow: var(--cw-shadow); }
.cw-chev { color: var(--cw-ink-3); opacity: 0.5; flex: 0 0 auto; display: inline-flex; }
.cw-x-btn {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(138,133,123,0.12); color: var(--cw-ink-3);
  font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.cw-x-btn:hover { background: rgba(138,133,123,0.2); }
.cw-btn-quiet { border: none; background: transparent; color: var(--cw-ink-2); }
.cw-pill-pro {
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.06em; color: var(--cw-on-primary);
  background: var(--cw-green); padding: 2px 6px; border-radius: 999px; vertical-align: middle;
}
.cw-pill-count, .cw-inbox-count {
  font-size: 0.62rem; font-weight: 800; color: var(--cw-on-primary);
  background: var(--cw-green); padding: 1px 7px; border-radius: 999px;
}

/* skeleton shimmer for loading shells (streak) */
.cw-skel-line {
  display: inline-block; border-radius: 6px; min-height: 0.8em; color: transparent !important;
  background: linear-gradient(90deg, var(--cw-cream-2) 25%, var(--cw-cream-3) 37%, var(--cw-cream-2) 63%);
  background-size: 400% 100%; animation: cwShimmer 1.3s ease-in-out infinite;
}
@keyframes cwShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Greeting hero ─────────────────────────────────────────────────────────── */
.cw-home-hero { display: flex; flex-direction: column; gap: 16px; }
.cw-home-greet { display: flex; flex-direction: column; gap: 4px; }
.cw-home-greet-word { color: var(--cw-ink-3); font-size: 0.9rem; font-weight: 600; }
.cw-home-name {
  font-family: var(--cw-serif); color: var(--cw-green); font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 2.4rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0;
}
body.cw-dark .cw-home-name { color: #f8f1df; }
.cw-home-handle {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  border: none; background: transparent; cursor: pointer; padding: 2px 0;
  color: var(--cw-ink-2); font-size: 0.82rem; font-weight: 600;
}
.cw-home-handle-cta { color: var(--cw-green); }
.cw-home-prompt { color: var(--cw-ink-3); font-size: 0.9rem; font-weight: 600; margin: 2px 0 0; }

/* ── Streak card ───────────────────────────────────────────────────────────── */
.cw-streak-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cw-streak-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cw-streak-flame { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.cw-streak-copy { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cw-streak-head { font-weight: 800; font-size: 1.12rem; color: var(--cw-ink); }
.cw-streak-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--cw-ink-3); font-size: 0.8rem; }
.cw-streak-badge { font-weight: 800; font-size: 0.7rem; color: var(--cw-coral); background: var(--cw-coral-soft); padding: 4px 10px; border-radius: 999px; }
.cw-streak-freeze { font-weight: 600; font-size: 0.7rem; color: var(--cw-ink-3); background: var(--cw-cream-2); padding: 4px 10px; border-radius: 999px; }
.cw-streak-xp { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; text-align: right; }
.cw-streak-xp-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; color: var(--cw-ink-3); text-transform: uppercase; white-space: nowrap; line-height: 1; }
/* nowrap keeps the value + "XP" on one line — no mid-number wrap (e.g. "6,420 XP"). */
.cw-streak-xp-val { font-weight: 800; font-size: 1.4rem; line-height: 1; color: var(--cw-coral); white-space: nowrap; }
.cw-streak-card { cursor: pointer; }

/* ── More hub streak banner (entry point into the Streak surface) ─────────── */
.cw-morestreak {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 6px;
  border: 1px solid var(--cw-coral-soft); background: linear-gradient(120deg, #FFF6F1, var(--cw-card));
}
.cw-morestreak-flame { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.cw-morestreak-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cw-morestreak-main strong { font-size: 1rem; font-weight: 800; color: var(--cw-ink); }
.cw-morestreak-main small { font-size: 0.78rem; color: var(--cw-ink-3); }
.cw-morestreak-go { flex: 0 0 auto; color: var(--cw-coral); display: inline-flex; }

/* ════ STREAK SURFACE (renderStreak — StreakPageView parity) ═══════════════ */
.cw-strk-hero { text-align: center; padding: 28px 20px; }
.cw-strk-flamewrap {
  width: 110px; height: 110px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(224,120,86,0.22), transparent 68%);
}
.cw-strk-flame { font-size: 52px; line-height: 1; }
.cw-strk-count { font-family: var(--cw-serif); font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--cw-ink); }
.cw-strk-count-label { font-size: 0.95rem; color: var(--cw-ink-3); margin-top: 4px; }
.cw-strk-risk {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.78rem; font-weight: 800;
  color: #B7791F; background: #FFF4E8; padding: 7px 13px; border-radius: 999px;
}
.cw-strk-tierpill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.8rem; font-weight: 800;
  color: var(--cw-coral); background: var(--cw-coral-soft); padding: 7px 15px; border-radius: 999px;
}
/* Week strip */
.cw-strk-weekcard { padding: 16px; }
.cw-strk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cw-strk-day { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cw-strk-day-dot {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; line-height: 1;
  background: var(--cw-cream-2); border: 1px solid var(--cw-line);
}
.cw-strk-day.is-on .cw-strk-day-dot { background: var(--cw-coral-soft); border-color: var(--cw-coral); }
.cw-strk-day.is-off .cw-strk-day-dot { background: var(--cw-cream-2); }
.cw-strk-day.is-future .cw-strk-day-dot { opacity: 0.45; }
.cw-strk-day.is-today .cw-strk-day-dot { box-shadow: 0 0 0 2px var(--cw-coral); }
.cw-strk-day-lab { font-size: 0.7rem; font-weight: 700; color: var(--cw-ink-3); }
.cw-strk-day.is-on .cw-strk-day-lab { color: var(--cw-coral); }
/* Metric trio */
.cw-strk-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.cw-strk-metric {
  background: var(--cw-card); border: 1px solid var(--cw-line); border-radius: var(--cw-radius-sm);
  padding: 14px; box-shadow: var(--cw-shadow-soft); display: flex; flex-direction: column; gap: 3px;
}
.cw-strk-metric-ic { font-size: 18px; line-height: 1; }
.cw-strk-metric strong { font-size: 1.3rem; font-weight: 800; color: var(--cw-ink); }
.cw-strk-metric small { font-size: 0.72rem; color: var(--cw-ink-3); }
/* Next tier */
.cw-strk-next-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; font-weight: 800; margin-bottom: 10px; }
.cw-strk-next-head > span:first-child { color: var(--cw-ink-3); }
.cw-strk-next-target { color: var(--cw-coral); }
.cw-strk-next-bar { height: 7px; border-radius: 999px; background: var(--cw-cream-3); overflow: hidden; }
.cw-strk-next-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cw-coral), #EF9A7E); transition: width .3s ease; }
.cw-strk-next small { display: block; margin-top: 8px; font-size: 0.74rem; color: var(--cw-ink-3); }
/* Tier ladder */
.cw-strk-ladder { display: grid; gap: 2px; }
.cw-strk-ladder-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--cw-line); }
.cw-strk-ladder-row:last-child { border-bottom: 0; }
.cw-strk-ladder-emoji { font-size: 18px; width: 24px; text-align: center; flex: 0 0 auto; opacity: 0.5; }
.cw-strk-ladder-row.is-reached .cw-strk-ladder-emoji { opacity: 1; }
.cw-strk-ladder-name { flex: 1; font-weight: 700; font-size: 0.88rem; color: var(--cw-ink-2); }
.cw-strk-ladder-row.is-current .cw-strk-ladder-name { color: var(--cw-coral); font-weight: 800; }
.cw-strk-ladder-min { font-size: 0.74rem; font-weight: 700; color: var(--cw-ink-3); }
.cw-strk-ladder-row > svg { color: var(--cw-coral); flex: 0 0 auto; }
/* Freeze */
.cw-strk-freeze-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cw-strk-freeze-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.cw-strk-freeze-head strong { display: block; font-size: 1rem; font-weight: 800; color: var(--cw-ink); }
.cw-strk-freeze-head small { font-size: 0.76rem; color: var(--cw-ink-3); }

/* ── Advisor card (overrides the old flex layout for this structure) ───────── */
.cw-advisor-card { display: block; border-color: var(--cw-green-soft); margin-top: 0; }
.cw-advisor-row { display: flex; align-items: center; gap: 12px; }
.cw-advisor-orb {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  color: var(--cw-green); background: var(--cw-green-mint);
}
.cw-advisor-copy { flex: 1; min-width: 0; }
.cw-advisor-title { font-weight: 800; font-size: 0.95rem; color: var(--cw-ink); display: flex; align-items: center; gap: 6px; }
.cw-advisor-tag { color: var(--cw-ink-3); font-size: 0.78rem; margin-top: 2px; }
.cw-advisor-hint {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  color: var(--cw-ink-2); font-size: 0.74rem; font-weight: 600;
  background: var(--cw-green-mint); padding: 6px 11px; border-radius: 999px;
}
.cw-advisor-hint svg { color: var(--cw-green); }

/* ── Events announcement banner ───────────────────────────────────────────── */
.cw-events-banner { display: flex; align-items: flex-start; gap: 10px; background: var(--cw-paper); border-color: var(--cw-gold-soft); padding: 0; }
.cw-events-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; border: none; background: transparent; cursor: pointer; padding: 16px; }
.cw-events-ic { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 20px; background: rgba(196,154,53,0.15); }
.cw-events-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cw-events-copy strong { font-weight: 800; font-size: 0.92rem; color: var(--cw-ink); }
.cw-events-copy small { color: var(--cw-ink-3); font-size: 0.78rem; }
.cw-events-try { flex: 0 0 auto; font-weight: 800; font-size: 0.68rem; color: var(--cw-green); background: var(--cw-green-soft); padding: 7px 10px; border-radius: 999px; }
.cw-events-banner .cw-x-btn { margin: 14px 14px 0 0; }

/* ── Username-claim card ──────────────────────────────────────────────────── */
.cw-claim-card { background: var(--cw-paper); border-color: rgba(138,133,123,0.18); }
.cw-claim-row { display: flex; align-items: flex-start; gap: 12px; }
.cw-claim-orb { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-family: var(--cw-serif); font-size: 22px; color: var(--cw-green); background: var(--cw-green-mint); }
.cw-claim-copy { flex: 1; min-width: 0; }
.cw-claim-copy strong { display: block; font-weight: 700; font-size: 0.95rem; color: var(--cw-ink); }
.cw-claim-copy small { color: var(--cw-ink-3); font-size: 0.8rem; }
.cw-claim-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cw-claim-actions .cw-btn { min-height: 38px; padding: 8px 16px; }

/* ── Pending invite card ──────────────────────────────────────────────────── */
.cw-invite { display: flex; flex-direction: column; gap: 12px; border-color: var(--cw-gold-soft); }
.cw-invite-row { display: flex; align-items: center; gap: 12px; }
.cw-invite-ic { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 20px; background: var(--cw-green-mint); }
.cw-invite-copy { flex: 1; min-width: 0; }
.cw-invite-copy strong { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.88rem; color: var(--cw-ink); }
.cw-invite-copy small { color: var(--cw-ink-2); font-size: 0.8rem; }
.cw-invite-cta { flex: 0 0 auto; min-height: 38px; padding: 8px 14px; }
.cw-invite-actions { display: flex; gap: 8px; }
.cw-invite-act { flex: 1; min-height: 40px; }
.cw-invite-act:disabled { opacity: 0.55; cursor: default; }

/* ── Live-trip hero (the one big green moment) ────────────────────────────── */
.cw-livetrip {
  background: var(--cw-green); border: 1px solid rgba(251,247,240,0.16);
  border-radius: var(--cw-radius); box-shadow: var(--cw-shadow-green);
  color: var(--cw-on-primary); padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.cw-livetrip-top { display: flex; align-items: center; justify-content: space-between; }
.cw-livetrip-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.62rem; letter-spacing: 0.08em; color: var(--cw-on-primary); background: rgba(196,154,53,0.22); padding: 5px 10px; border-radius: 999px; }
.cw-livetrip-status.is-live { background: rgba(251,247,240,0.18); }
.cw-livetrip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cw-gold); }
.cw-livetrip-status.is-live .cw-livetrip-dot { background: #8FE1A8; }
.cw-livetrip-title { font-family: var(--cw-serif); font-weight: 600; font-size: 1.4rem; line-height: 1.05; margin: 0; color: var(--cw-on-primary); }
.cw-livetrip-dest { color: rgba(251,247,240,0.78); font-size: 0.82rem; }
.cw-livetrip-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.cw-livetrip-chip { font-size: 0.76rem; color: rgba(251,247,240,0.9); background: rgba(251,247,240,0.1); padding: 5px 10px; border-radius: 999px; }
.cw-livetrip-cta {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-weight: 800; font-size: 0.84rem; color: var(--cw-green-deep);
  background: var(--cw-cream); padding: 11px 16px; border-radius: 999px;
}
.cw-livetrip-cta svg { color: var(--cw-green-deep); }

/* ── Memory card ──────────────────────────────────────────────────────────── */
.cw-memory { display: flex; align-items: center; gap: 12px; background: var(--cw-cream); border-color: rgba(255,216,116,0.3); }
.cw-memory-ic { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 20px; background: rgba(255,216,116,0.18); }
.cw-memory-copy { flex: 1; min-width: 0; }
.cw-memory-copy strong { display: block; font-family: var(--cw-serif); font-weight: 600; font-size: 0.95rem; color: var(--cw-ink); }
.cw-memory-copy small { color: var(--cw-ink-3); font-size: 0.8rem; }

/* ── Live exchange chip ───────────────────────────────────────────────────── */
.cw-livefx { display: flex; align-items: flex-start; gap: 12px; background: var(--cw-card); }
.cw-livefx-ic { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 22px; background: var(--cw-green-mint); }
.cw-livefx-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cw-livefx-kicker { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--cw-gold); }
.cw-livefx-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cw-gold); }
.cw-livefx-copy strong { font-family: var(--cw-serif); font-weight: 600; font-size: 0.95rem; color: var(--cw-ink); }
.cw-livefx-copy small { color: var(--cw-ink-3); font-size: 0.78rem; }
.cw-livefx-rate { font-family: var(--cw-mono); font-size: 0.78rem; color: var(--cw-green); font-weight: 600; margin-top: 2px; }

/* ── Upcoming trip row ────────────────────────────────────────────────────── */
.cw-trip-row { display: flex; align-items: center; gap: 14px; }
.cw-trip-ic { width: 52px; height: 52px; border-radius: var(--cw-radius-sm); flex: 0 0 auto; display: grid; place-items: center; color: var(--cw-on-primary); background: var(--cw-green); }
.cw-trip-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-trip-kicker { font-size: 0.7rem; color: var(--cw-ink-3); }
.cw-trip-name { font-weight: 800; font-size: 1rem; color: var(--cw-ink); }
.cw-trip-meta { font-size: 0.76rem; color: var(--cw-ink-3); }

/* ── Currency converter ───────────────────────────────────────────────────── */
.cw-fx { display: flex; flex-direction: column; gap: 12px; }
.cw-fx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cw-fx-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.84rem; color: var(--cw-ink); }
.cw-fx-title svg { color: var(--cw-green); }
.cw-fx-rate { font-size: 0.7rem; color: var(--cw-ink-3); }
.cw-fx-row { display: flex; align-items: center; gap: 12px; }
.cw-fx-cur {
  flex: 0 0 auto; border: none; background: var(--cw-cream); color: var(--cw-ink);
  font-weight: 800; font-size: 0.84rem; padding: 9px 12px; border-radius: 999px; cursor: pointer;
}
.cw-fx-amt {
  flex: 1; min-width: 0; border: none; background: transparent; text-align: right;
  font-family: var(--cw-serif); font-size: 1.4rem; color: var(--cw-ink); padding: 0;
}
.cw-fx-amt:focus { outline: none; }
.cw-fx-out { flex: 1; text-align: right; font-family: var(--cw-serif); font-size: 1.4rem; color: var(--cw-ink); }
.cw-fx-swap { display: flex; align-items: center; gap: 10px; }
.cw-fx-swap::before, .cw-fx-swap::after { content: ''; flex: 1; height: 1px; background: rgba(138,133,123,0.12); }
.cw-fx-swap-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--cw-green-mint); color: var(--cw-green); font-size: 14px; cursor: pointer; flex: 0 0 auto; }

/* ── Logg Inbox card ──────────────────────────────────────────────────────── */
.cw-inbox-row { display: flex; align-items: center; gap: 10px; }
.cw-inbox-orb { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: var(--cw-green); background: var(--cw-green-mint); }
.cw-inbox-copy { flex: 1; min-width: 0; }
.cw-inbox-title { display: flex; align-items: center; gap: 6px; font-family: var(--cw-serif); font-weight: 600; font-size: 1rem; color: var(--cw-ink); }
.cw-inbox-sub { display: block; color: var(--cw-ink-3); font-size: 0.78rem; margin-top: 2px; }
.cw-inbox-card.is-pending { border-color: var(--cw-gold-soft); }
.cw-inbox-card.is-pending .cw-inbox-orb { color: var(--cw-gold); background: rgba(196,154,53,0.15); }

/* ── Trip-gap nudge ───────────────────────────────────────────────────────── */
.cw-gaps { border-color: var(--cw-gold-soft); background: var(--cw-card); }
.cw-gaps-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cw-gaps-ic { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 900; color: var(--cw-gold); background: rgba(196,154,53,0.18); }
.cw-gaps-copy strong { display: block; font-weight: 800; font-size: 0.9rem; color: var(--cw-ink); }
.cw-gaps-copy small { color: var(--cw-ink-3); font-size: 0.76rem; }
.cw-gaps-list { display: flex; flex-direction: column; gap: 8px; }
.cw-gap-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--cw-gold-soft); background: var(--cw-cream); border-radius: var(--cw-radius-sm);
  padding: 10px; cursor: pointer; transition: transform .14s ease;
}
.cw-gap-row:hover { transform: translateY(-1px); }
.cw-gap-days { flex: 0 0 auto; width: 42px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; background: rgba(196,154,53,0.12); }
.cw-gap-days b { font-size: 1.1rem; color: var(--cw-gold); }
.cw-gap-days small { font-size: 0.58rem; color: var(--cw-ink-3); }
.cw-gap-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cw-gap-info strong { font-weight: 800; font-size: 0.84rem; color: var(--cw-ink); }
.cw-gap-info small { color: var(--cw-ink-3); font-size: 0.74rem; }
.cw-gap-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cw-gap-tag { font-weight: 800; font-size: 0.58rem; color: var(--cw-gold); background: rgba(196,154,53,0.14); padding: 2px 6px; border-radius: 999px; }

/* ── Announcement cards (Save from Social, Together Atlas, Border Intel) ───── */
.cw-announce { display: flex; align-items: center; gap: 12px; }
.cw-announce-ic { width: 48px; height: 48px; border-radius: var(--cw-radius-sm); flex: 0 0 auto; display: grid; place-items: center; font-size: 18px; color: var(--cw-on-primary); }
.cw-announce-ic-gold { background: var(--cw-gold); color: #2A1E04; }
.cw-announce-ic-forest { background: var(--cw-green-deep); }
.cw-announce-ic-green { background: var(--cw-green); }
.cw-announce-copy { flex: 1; min-width: 0; }
.cw-announce-copy strong { display: block; font-weight: 800; font-size: 0.92rem; color: var(--cw-ink); }
.cw-announce-copy small { color: var(--cw-ink-3); font-size: 0.78rem; }

/* ── Atlas Book preview ───────────────────────────────────────────────────── */
.cw-atlasbook { background: var(--cw-cream); border-color: rgba(255,255,255,0.12); border-radius: var(--cw-radius); }
.cw-atlasbook-row { display: flex; align-items: center; gap: 14px; }
.cw-atlasbook-ic { width: 52px; height: 52px; border-radius: var(--cw-radius-sm); flex: 0 0 auto; display: grid; place-items: center; color: var(--cw-gold-soft); background: var(--cw-green-deep); }
.cw-atlasbook-copy { flex: 1; min-width: 0; }
.cw-atlasbook-copy strong { font-weight: 800; font-size: 0.95rem; color: var(--cw-ink); }
.cw-atlasbook-copy small { display: block; color: var(--cw-ink-3); font-size: 0.78rem; margin-top: 2px; }
.cw-atlasbook-flags { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.cw-flag-strip { font-size: 16px; letter-spacing: 2px; }
.cw-atlasbook-open { font-weight: 800; font-size: 0.74rem; color: var(--cw-green); }

/* ── Quick access (Atlas / Logg) ──────────────────────────────────────────── */
.cw-quickaccess { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cw-qa { display: flex; align-items: center; gap: 10px; padding: 14px; text-align: left; border: 1px solid var(--cw-line); background: var(--cw-cream); }
.cw-qa-ic { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; color: var(--cw-green); background: var(--cw-green-mint); }
.cw-qa-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-qa-copy strong { font-weight: 800; font-size: 0.84rem; color: var(--cw-ink); }
.cw-qa-copy small { color: var(--cw-ink-3); font-size: 0.68rem; }

@media (max-width: 720px) {
  .cw-quickaccess { grid-template-columns: 1fr; }
  .cw-streak-card { align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════════
   ATLAS HUB — iOS-parity tabbed Atlas (BeenViews.swift). Flat cream cards,
   Fraunces serif headings in brand green, warm brown-tinted shadows,
   24/18/14 radii, --cw-* tokens only. No gradients on heroes/buttons.
   ════════════════════════════════════════════════════════════════════════ */
.cw-atlas { display: block; }

/* Header: "Atlas" serif title + level pill + Atlas Book shortcut */
.cw-atlas-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; margin-bottom: 14px;
}
.cw-atlas-title {
  font-family: var(--cw-serif); color: var(--cw-green);
  font-size: clamp(1.8rem, 3.4vw, 2.3rem); line-height: 1; margin: 0;
}
body.cw-dark .cw-atlas-title { color: #f8f1df; }
.cw-atlas-level {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em;
  text-transform: uppercase; margin-top: 5px;
}
.cw-atlas-hpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: var(--cw-gold-soft); color: var(--cw-green-deep);
  border: 1px solid rgba(196,154,53,0.35); font: inherit; font-weight: 800;
  font-size: 0.78rem; transition: transform .15s ease, box-shadow .15s ease;
}
.cw-atlas-hpill:hover { transform: translateY(-1px); box-shadow: var(--cw-shadow-soft); }

/* Sub-tab bar (segmented pills, horizontally scrollable) */
.cw-atlas-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px;
  margin-bottom: 6px; scrollbar-width: none;
  border-bottom: 1px solid var(--cw-line);
}
.cw-atlas-tabs::-webkit-scrollbar { display: none; }
.cw-atlas-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; cursor: pointer; font: inherit;
  font-weight: 800; font-size: 0.8rem; white-space: nowrap;
  color: var(--cw-ink-2); background: var(--cw-green-mint);
  border: 1px solid transparent; transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cw-atlas-tab:hover { transform: translateY(-1px); }
.cw-atlas-tab.is-active { background: var(--cw-green-deep); color: #fff; }
.cw-atlas-tab svg { opacity: 0.85; }
body.cw-dark .cw-atlas-tab { background: rgba(255,255,255,0.06); color: var(--cw-ink-2); }
body.cw-dark .cw-atlas-tab.is-active { background: var(--cw-green); color: #fff; }

.cw-atlas-body { padding-top: 6px; }

/* HOME: hero (% explored) + passport card */
.cw-atlas-herorow { align-items: stretch; }
.cw-atlas-hero {
  display: flex; flex-direction: column; justify-content: center;
}
.cw-atlas-heroname {
  font-family: var(--cw-serif); color: var(--cw-green);
  font-size: 1.5rem; line-height: 1; margin: 8px 0 4px;
}
body.cw-dark .cw-atlas-heroname { color: #f8f1df; }
.cw-atlas-bigpct {
  font-family: var(--cw-serif); color: var(--cw-green);
  font-size: clamp(3rem, 7vw, 4.6rem); line-height: 0.95; margin: 6px 0 14px;
}
body.cw-dark .cw-atlas-bigpct { color: #f8f1df; }
.cw-atlas-pctbar {
  height: 8px; border-radius: 999px; background: var(--cw-green-soft);
  overflow: hidden; margin-bottom: 12px;
}
.cw-atlas-pctbar span { display: block; height: 100%; border-radius: 999px; background: var(--cw-green); }
.cw-atlas-herosub { color: var(--cw-ink-3); font-size: 0.95rem; line-height: 1.5; margin: 0; }

/* Passport card — flat dark forest green (matches .cw-atlas-card) */
.cw-atlas-cardname { font-family: var(--cw-serif); font-size: 1.9rem; line-height: 1; margin: 10px 0 8px; color: #fff; }
.cw-atlas-cardlevel { color: var(--cw-gold-soft); font-weight: 800; letter-spacing: 0.04em; font-size: 0.82rem; }
.cw-atlas-card .cw-atlas-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 22px 0 16px; }
.cw-atlas-stat {
  text-align: center; cursor: pointer; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--cw-radius-sm);
  padding: 12px 6px; color: #fff; font: inherit; transition: background .15s ease;
}
.cw-atlas-stat:hover { background: rgba(255,255,255,0.12); }
.cw-atlas-stat strong { display: block; font-family: var(--cw-serif); font-size: 2rem; line-height: 1; }
.cw-atlas-stat span { font-size: 0.7rem; opacity: 0.65; }
.cw-stampflags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cw-stampflag {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: #fff; font-size: 18px; box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.cw-flag-more { font-size: 0.74rem; font-weight: 800; color: var(--cw-gold-soft); padding-left: 4px; }

/* Stat pills row (tap → sub-tab) */
.cw-atlas-pillrow { margin-top: 14px; }
.cw-atlas-pill {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px; cursor: pointer; font: inherit; color: var(--cw-ink);
  background: var(--cw-card); transition: transform .15s ease, box-shadow .15s ease;
}
.cw-atlas-pill:hover { transform: translateY(-2px); box-shadow: var(--cw-shadow-pop); }
.cw-atlas-pill svg { color: var(--cw-gold); }
.cw-atlas-pill strong { font-family: var(--cw-serif); font-size: 1.7rem; line-height: 1; color: var(--cw-green); }
body.cw-dark .cw-atlas-pill strong { color: #f8f1df; }
.cw-atlas-pill span { font-size: 0.72rem; color: var(--cw-ink-3); }

/* Quick-access grid */
.cw-atlas-quick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.cw-atlas-quickcard {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px; border-radius: var(--cw-radius-mid); cursor: pointer; font: inherit;
  background: var(--cw-card); border: 1px solid var(--cw-line); color: var(--cw-ink);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cw-atlas-quickcard:hover { transform: translateY(-2px); border-color: rgba(196,154,53,0.4); box-shadow: var(--cw-shadow); }
.cw-atlas-quickic {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--cw-radius-sm);
  display: grid; place-items: center; background: var(--cw-green-deep); color: var(--cw-gold-soft);
}
.cw-atlas-quickcard strong { display: block; color: var(--cw-green); font-weight: 800; font-size: 0.95rem; }
body.cw-dark .cw-atlas-quickcard strong { color: #f8f1df; }
.cw-atlas-quickcard small { color: var(--cw-ink-3); font-size: 0.78rem; }

.cw-atlas-bignum { font-family: var(--cw-serif); color: var(--cw-green); font-size: clamp(2.4rem,5vw,3.2rem); line-height: 1; margin: 4px 0 12px; }
.cw-atlas-bignum small { font-family: var(--cw-sans, inherit); font-size: 1rem; color: var(--cw-ink-3); font-weight: 600; }
body.cw-dark .cw-atlas-bignum { color: #f8f1df; }
.cw-atlas-statrow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cw-line); }
.cw-atlas-statrow span { font-size: 0.66rem; color: var(--cw-ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
.cw-atlas-statrow strong { font-size: 0.84rem; color: var(--cw-ink); font-weight: 700; text-align: right; }

.cw-atlas-link, .cw-atlas-back {
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 800;
  font-size: 0.82rem; color: var(--cw-green); display: inline-flex; align-items: center; gap: 5px;
}
.cw-atlas-back { margin-bottom: 14px; color: var(--cw-ink-2); }
.cw-atlas-back svg { transform: rotate(180deg); }

/* Lists + rows */
.cw-atlas-list { display: grid; gap: 8px; }
.cw-atlas-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 14px; border-radius: var(--cw-radius-sm); cursor: pointer; font: inherit;
  background: var(--cw-card); border: 1px solid var(--cw-line); color: var(--cw-ink);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.cw-atlas-row:hover { transform: translateY(-1px); border-color: rgba(196,154,53,0.4); box-shadow: var(--cw-shadow-soft); }
.cw-atlas-row-static { cursor: default; }
.cw-atlas-row-static:hover { transform: none; border-color: var(--cw-line); box-shadow: none; }
.cw-atlas-rowflag { flex: 0 0 auto; font-size: 26px; width: 34px; text-align: center; color: var(--cw-gold); }
.cw-atlas-rowmain { flex: 1; min-width: 0; }
.cw-atlas-rowmain strong { display: block; font-size: 0.92rem; font-weight: 800; color: var(--cw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-atlas-rowmain small { font-size: 0.74rem; color: var(--cw-ink-3); }
.cw-atlas-rowdate { flex: 0 0 auto; font-size: 0.72rem; color: var(--cw-ink-3); font-weight: 600; }
.cw-atlas-row > svg:last-child { color: var(--cw-ink-3); opacity: 0.6; flex: 0 0 auto; }

/* Search */
.cw-atlas-search {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 14px;
  border-radius: var(--cw-radius-sm); background: var(--cw-card); border: 1px solid var(--cw-line); color: var(--cw-ink-3);
}
.cw-atlas-search input { flex: 1; border: 0; background: none; font: inherit; font-size: 0.9rem; color: var(--cw-ink); outline: none; }

/* Country detail */
.cw-atlas-detailhero { text-align: center; }
.cw-atlas-detailflag { font-size: 56px; line-height: 1; }
.cw-atlas-detailname { font-family: var(--cw-serif); color: var(--cw-green); font-size: 2rem; margin: 12px 0 4px; }
body.cw-dark .cw-atlas-detailname { color: #f8f1df; }
.cw-atlas-detailmeta { color: var(--cw-ink-3); font-size: 0.86rem; }
.cw-atlas-detailchips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }

/* Empty states */
.cw-atlas-emptycard { text-align: center; }
.cw-atlas-emptyglobe {
  width: 78px; height: 78px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: var(--cw-green-mint); color: var(--cw-green);
}
.cw-atlas-emptycard h3 { font-family: var(--cw-serif); color: var(--cw-green); font-size: 1.3rem; margin: 14px 0 6px; }
body.cw-dark .cw-atlas-emptycard h3 { color: #f8f1df; }
.cw-atlas-emptycard p { color: var(--cw-ink-3); font-size: 0.9rem; line-height: 1.5; max-width: 440px; margin: 0 auto; }

/* ── Segmented control (Repeated Countries/Cities · Goals Active/Completed) ─ */
.cw-seg {
  display: flex; gap: 4px; padding: 4px; margin: 8px 0 16px;
  background: var(--cw-cream-2); border: 1px solid var(--cw-line); border-radius: 999px;
}
.cw-seg-btn {
  flex: 1; border: 0; background: none; font: inherit; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  color: var(--cw-ink-3); transition: background .15s ease, color .15s ease;
}
.cw-seg-btn:hover { color: var(--cw-ink-2); }
.cw-seg-btn.is-active { background: var(--cw-green); color: var(--cw-on-primary); box-shadow: var(--cw-shadow-soft); }

/* ── REPEATED — per-visit history cards with a gold visit timeline ───────── */
.cw-rep-list { display: grid; gap: 10px; }
.cw-rep-card {
  background: var(--cw-card); border: 1px solid var(--cw-line); border-radius: var(--cw-radius-sm);
  padding: 14px 16px; box-shadow: var(--cw-shadow-soft);
}
.cw-rep-head { display: flex; align-items: center; gap: 12px; }
.cw-rep-flag { flex: 0 0 auto; font-size: 30px; line-height: 1; width: 38px; text-align: center; }
.cw-rep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-rep-main strong { font-size: 0.95rem; font-weight: 800; color: var(--cw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-rep-main small { font-size: 0.74rem; color: var(--cw-ink-3); }
.cw-rep-count { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 800; color: var(--cw-gold); }
.cw-rep-count > svg { color: var(--cw-gold); }
.cw-rep-timeline { margin-top: 10px; padding-left: 4px; display: grid; gap: 6px; border-top: 1px solid var(--cw-line); padding-top: 10px; }
.cw-rep-visit { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cw-rep-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--cw-gold); opacity: 0.6; }
.cw-rep-date { font-size: 0.78rem; color: var(--cw-ink-2); font-weight: 600; flex: 0 0 auto; }
.cw-rep-cities { font-size: 0.72rem; color: var(--cw-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-rep-pill {
  flex: 0 0 auto; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px; color: var(--cw-gold); background: rgba(196,154,53,0.12);
}
.cw-rep-pill.is-logg { color: var(--cw-green); background: var(--cw-green-mint); }

/* ── GOALS — live progress cards (active) + sealed (completed) ───────────── */
.cw-goal-list { display: grid; gap: 10px; }
.cw-goal-card {
  background: var(--cw-card); border: 1px solid var(--cw-line); border-radius: var(--cw-radius-sm);
  padding: 14px 16px; box-shadow: var(--cw-shadow-soft);
}
.cw-goal-card.is-done { background: var(--cw-green-mint); border-color: var(--cw-green-soft); }
.cw-goal-head { display: flex; align-items: center; gap: 12px; }
.cw-goal-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-goal-titles strong { font-size: 0.95rem; font-weight: 800; color: var(--cw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-goal-titles small { font-size: 0.72rem; color: var(--cw-ink-3); }
.cw-goal-count { flex: 0 0 auto; font-size: 0.86rem; font-weight: 800; color: var(--cw-gold); }
.cw-goal-seal { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cw-gold); color: var(--cw-green-deep); }
.cw-goal-bar { margin-top: 11px; height: 6px; border-radius: 999px; background: var(--cw-cream-3); overflow: hidden; }
.cw-goal-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cw-gold), var(--cw-gold-2)); transition: width .3s ease; }

/* ── MAP ───────────────────────────────────────────────────────────────── */
.cw-map-wrap { position: relative; padding: 0; overflow: hidden; }
.cw-map-stage {
  position: relative; width: 100%; aspect-ratio: 1010 / 600; min-height: 280px;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--cw-green-mint), var(--cw-cream-2));
  display: grid; place-items: center;
}
.cw-map-svg { width: 100%; height: 100%; display: block; }
.cw-map-svg path { fill: var(--cw-cream-3); stroke: var(--cw-cream); stroke-width: 0.4; transition: fill .2s ease; }
.cw-map-svg path.cw-map-off { fill: var(--cw-cream-3); }
.cw-map-svg path.cw-map-on { fill: var(--cw-green); cursor: pointer; }
.cw-map-svg path.cw-map-on:hover { fill: var(--cw-green-2); }
body.cw-dark .cw-map-svg path.cw-map-off { fill: #2A241D; stroke: #1A1814; }
.cw-map-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--cw-ink-3); }
.cw-map-loading svg { color: var(--cw-green); opacity: 0.5; }
.cw-map-overlay {
  position: absolute; top: 16px; left: 16px; padding: 12px 16px; border-radius: var(--cw-radius-sm);
  background: var(--cw-green-deep); color: #fff; box-shadow: var(--cw-shadow-green); pointer-events: none;
}
.cw-map-count { display: flex; align-items: baseline; gap: 6px; }
.cw-map-count strong { font-family: var(--cw-serif); font-size: 2rem; line-height: 1; }
.cw-map-count span { font-size: 0.74rem; opacity: 0.8; }
.cw-map-pct { font-size: 0.72rem; color: var(--cw-gold-soft); font-weight: 800; margin-top: 3px; }
.cw-map-legend {
  position: absolute; bottom: 14px; right: 16px; display: flex; gap: 14px;
  padding: 8px 12px; border-radius: 999px; background: var(--cw-paper);
  box-shadow: var(--cw-shadow-soft); font-size: 0.72rem; color: var(--cw-ink-2); pointer-events: none;
}
.cw-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cw-map-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cw-map-dot-on { background: var(--cw-green); }
.cw-map-dot-off { background: var(--cw-cream-3); border: 1px solid var(--cw-line); }

/* ── STATS ─────────────────────────────────────────────────────────────── */
.cw-stat-levelhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cw-stat-levelbody { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; }
.cw-stat-score { text-align: center; }
.cw-stat-score > strong { font-family: var(--cw-serif); font-size: 2.6rem; color: var(--cw-green); line-height: 1; }
body.cw-dark .cw-stat-score > strong { color: #f8f1df; }
.cw-stat-score > span { font-size: 0.72rem; color: var(--cw-ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.cw-stat-score-bar { height: 7px; border-radius: 999px; background: var(--cw-green-soft); overflow: hidden; margin: 10px 0 6px; }
.cw-stat-score-bar span { display: block; height: 100%; background: var(--cw-gold); border-radius: 999px; }
.cw-stat-score small { font-size: 0.72rem; color: var(--cw-ink-3); }
.cw-stat-ladder { display: grid; gap: 7px; }
.cw-stat-ladder-row { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--cw-ink-3); }
.cw-stat-ladder-row.is-current { color: var(--cw-ink); font-weight: 800; }
.cw-stat-ladder-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cw-stat-ladder-name { flex: 1; }
.cw-stat-ladder-min { font-size: 0.72rem; opacity: 0.8; }
.cw-stat-ladder-row svg { color: var(--cw-green); }

.cw-stat-worldcard { margin-top: 14px; }
.cw-ring { display: grid; place-items: center; position: relative; margin: 6px auto 4px; width: 130px; height: 130px; }
.cw-ring svg { display: block; }
.cw-ring-label { position: absolute; text-align: center; }
.cw-ring-label strong { display: block; font-family: var(--cw-serif); font-size: 1.5rem; line-height: 1; }
.cw-ring-label span { font-size: 0.66rem; }
.cw-stat-mini { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 14px; }
.cw-stat-mini > div { text-align: center; }
.cw-stat-mini strong { display: block; font-family: var(--cw-serif); font-size: 1.4rem; color: var(--cw-green); line-height: 1; }
body.cw-dark .cw-stat-mini strong { color: #f8f1df; }
.cw-stat-mini span { font-size: 0.68rem; color: var(--cw-ink-3); }

.cw-stat-conts { display: grid; gap: 10px; }
.cw-stat-cont { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--cw-radius-sm); background: var(--cw-green-mint); }
body.cw-dark .cw-stat-cont { background: rgba(255,255,255,0.04); }
.cw-stat-cont-emoji { font-size: 20px; flex: 0 0 auto; }
.cw-stat-cont-body { flex: 1; min-width: 0; }
.cw-stat-cont-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cw-stat-cont-head strong { font-size: 0.84rem; color: var(--cw-ink); font-weight: 800; }
.cw-stat-cont-head span { font-size: 0.74rem; color: var(--cw-gold); font-weight: 800; }
.cw-stat-cont-bar { height: 6px; border-radius: 999px; background: var(--cw-gold-soft); overflow: hidden; }
.cw-stat-cont-bar span { display: block; height: 100%; background: var(--cw-gold); border-radius: 999px; }

.cw-stat-hls { display: grid; gap: 2px; }
.cw-stat-hl { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--cw-line); }
.cw-stat-hl:last-child { border-bottom: 0; }
.cw-stat-hl span { color: var(--cw-ink-2); font-size: 0.86rem; }
.cw-stat-hl strong { color: var(--cw-green); font-weight: 800; font-size: 0.9rem; }
body.cw-dark .cw-stat-hl strong { color: #f8f1df; }

/* ── BADGES ────────────────────────────────────────────────────────────── */
.cw-badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.cw-badge-cell {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 16px 10px; border-radius: var(--cw-radius-mid); background: var(--cw-card);
  border: 1px solid var(--cw-line); opacity: 0.62;
}
.cw-badge-cell.is-on { opacity: 1; border-color: rgba(196,154,53,0.4); }
.cw-badge-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.05); color: var(--cw-ink-3); }
.cw-badge-cell.is-on .cw-badge-ic { background: var(--cw-gold-soft); color: var(--cw-gold); }
.cw-badge-cell strong { font-size: 0.82rem; color: var(--cw-ink-2); font-weight: 800; }
.cw-badge-cell.is-on strong { color: var(--cw-green); }
body.cw-dark .cw-badge-cell.is-on strong { color: #f8f1df; }
.cw-badge-cell small { font-size: 0.68rem; color: var(--cw-ink-3); line-height: 1.3; }
.cw-badge-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cw-gold); margin-top: 2px; }
.cw-badge-tag-locked { color: var(--cw-ink-3); }

/* ── STAMPS (passport booklet look) ────────────────────────────────────── */
.cw-stamp {
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  padding: 14px 8px; border-radius: var(--cw-radius-sm);
  background: rgba(255,255,255,0.05); border: 1px dashed rgba(196,154,53,0.45);
}
.cw-stamp-flag { font-size: 26px; line-height: 1; }
.cw-stamp-name { font-size: 0.78rem; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cw-stamp-date { font-size: 0.62rem; color: var(--cw-gold-soft); letter-spacing: 0.06em; font-weight: 700; }

/* ── ATLAS BOOK (horizontal pager) ─────────────────────────────────────── */
.cw-book { overflow: hidden; border-radius: var(--cw-radius); }
.cw-book-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  gap: 0; -webkit-overflow-scrolling: touch;
}
.cw-book-track::-webkit-scrollbar { display: none; }
.cw-book-page {
  flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box;
  padding: 26px; min-height: 420px; color: #fff;
  background: var(--cw-green-deep);
  border: 1px solid rgba(196,154,53,0.18);
}
.cw-book-cover { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.cw-book-brand { font-size: 0.7rem; letter-spacing: 0.4em; color: var(--cw-gold-soft); font-weight: 800; }
.cw-book-cover-title { font-family: var(--cw-serif); font-size: 2.2rem; margin: 8px 0 16px; color: #fff; }
.cw-book-cover-name { font-family: var(--cw-serif); font-size: 1.4rem; color: #fff; }
.cw-book-cover-level { font-weight: 800; font-size: 0.8rem; margin-top: 8px; }
.cw-book-cover-big { font-family: var(--cw-serif); font-size: 4.4rem; line-height: 1; color: var(--cw-gold); margin: 18px 0 2px; }
.cw-book-cover-cap { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.cw-book-cover-stats, .cw-book-grid { display: flex; gap: 0; margin-top: 20px; width: 100%; }
.cw-book-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.cw-book-stat { flex: 1; text-align: center; padding: 12px 4px; border-radius: var(--cw-radius-sm); background: rgba(255,255,255,0.04); }
.cw-book-cover-stats .cw-book-stat + .cw-book-stat { border-left: 1px solid rgba(255,255,255,0.08); border-radius: 0; }
.cw-book-stat strong { display: block; font-family: var(--cw-serif); font-size: 1.5rem; color: var(--cw-gold); line-height: 1; }
.cw-book-stat span { font-size: 0.66rem; color: rgba(255,255,255,0.45); }
.cw-book-flags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 18px; font-size: 18px; }
.cw-book-head { display: flex; align-items: center; gap: 8px; font-family: var(--cw-serif); font-size: 1.25rem; color: #fff; margin-bottom: 18px; }
.cw-book-head svg { color: var(--cw-gold); }
.cw-book-head em { margin-left: auto; font-style: normal; font-size: 0.74rem; color: rgba(196,154,53,0.5); font-family: monospace; }
.cw-book .cw-ring { margin: 4px auto 18px; }
.cw-book-cont { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.cw-book-cont > span { font-size: 20px; }
.cw-book-cont > div { flex: 1; }
.cw-book-cont-head { display: flex; justify-content: space-between; margin-bottom: 5px; }
.cw-book-cont-head strong { font-size: 0.84rem; color: #fff; }
.cw-book-cont-head em { font-style: normal; font-size: 0.74rem; color: var(--cw-gold); font-weight: 800; }
.cw-book-cont-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.cw-book-cont-bar span { display: block; height: 100%; background: var(--cw-gold); border-radius: 999px; }
.cw-book-top { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 13px 16px; border-radius: var(--cw-radius-sm); background: rgba(196,154,53,0.1); border: 1px solid rgba(196,154,53,0.18); font-size: 0.84rem; color: rgba(255,255,255,0.75); }
.cw-book-top strong { color: #fff; }
.cw-book-score { text-align: center; margin-bottom: 18px; }
.cw-book-score strong { display: block; font-family: var(--cw-serif); font-size: 3rem; color: var(--cw-gold); line-height: 1; }
.cw-book-score span { font-size: 0.68rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); font-weight: 800; }
.cw-book-jrow { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cw-book-jrow span { color: rgba(255,255,255,0.6); font-size: 0.86rem; }
.cw-book-jrow strong { color: #fff; font-weight: 800; font-size: 0.9rem; }
.cw-book-stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cw-book-stampmore { text-align: center; font-size: 0.74rem; color: rgba(255,255,255,0.4); margin-top: 10px; }
.cw-book-empty { text-align: center; color: rgba(255,255,255,0.4); padding: 28px 0; font-size: 0.88rem; }
.cw-book-dots { display: flex; gap: 7px; justify-content: center; margin-top: 14px; }
.cw-book-dot { width: 8px; height: 4px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--cw-line); transition: width .25s ease, background .25s ease; }
.cw-book-dot.is-active { width: 24px; background: var(--cw-gold); }

@media (max-width: 720px) {
  .cw-atlas-herorow { grid-template-columns: 1fr; }
  .cw-atlas-quick { grid-template-columns: 1fr; }
  .cw-stat-levelbody { grid-template-columns: 1fr; gap: 16px; }
  .cw-stat-mini { grid-template-columns: repeat(2,1fr); }
  .cw-badge-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cw-book-stamps { grid-template-columns: repeat(2, 1fr); }
  .cw-map-overlay { top: 10px; left: 10px; padding: 9px 12px; }
  .cw-map-count strong { font-size: 1.5rem; }
}